react-flatpickr - npm Package Compare versions

Comparing version 4.0.10 to 4.0.11

build/react-flatpickr.js

 import { jsx as b } from "react/jsx-runtime";
-import { useMemo as v, useRef as E, useImperativeHandle as F, useEffect as H, useCallback as S } from "react";
+import { useMemo as D, useRef as E, useImperativeHandle as F, useEffect as S, useCallback as v } from "react";
 import w from "flatpickr";
-const R = ["onCreate", "onDestroy"], k = [
+const H = ["onCreate", "onDestroy"], k = [
   "onChange",
@@ -13,15 +13,15 @@ "onOpen",
   "onDayCreate"
-], u = (e, c) => (k.forEach((r) => {
-  const i = c[r], n = e[r];
-  if (i) {
+], R = (e, c) => (k.forEach((r) => {
+  const o = c[r], n = e[r];
+  if (o) {
     n && !Array.isArray(n) ? e[r] = [e[r]] : e[r] || (e[r] = []);
-    const f = Array.isArray(i) ? i : [i];
-    e[r].length === 0 ? e[r] = f : e[r].push(...f);
+    const C = Array.isArray(o) ? o : [o];
+    e[r].length === 0 ? e[r] = C : e[r].push(...C);
   }
 }), k.forEach((r) => {
   delete c[r];
-}), R.forEach((r) => {
+}), H.forEach((r) => {
   delete c[r];
 }), e), M = (e) => {
-  const c = v(() => ({ ...e }), [e]), { defaultValue: r, options: i = {}, value: n, children: f, render: l } = c, a = v(() => u(i, c), [i, c]), h = E(null), t = E(void 0);
+  const c = D(() => ({ ...e }), [e]), { defaultValue: r, options: o = {}, value: n, children: C, render: u, onCreate: h, onDestroy: m } = c, g = D(() => R(o, c), [o, c]), l = E(null), t = E(void 0);
   F(
@@ -35,39 +35,40 @@ e.ref,
     []
-  ), H(() => {
-    var y;
-    const g = () => {
-      var C;
-      a.onClose = a.onClose || (() => {
-        var s;
-        (s = h.current) != null && s.blur && h.current.blur();
-      }), t.current = (((C = w) == null ? void 0 : C.default) || w)(h.current, a), t.current && n !== void 0 && t.current.setDate(n, !1), e.onCreate && e.onCreate(t.current);
-    }, m = () => {
-      e.onDestroy && e.onDestroy(t.current), t.current && t.current.destroy(), t.current = void 0;
+  ), S(() => {
+    const i = () => {
+      var a;
+      g.onClose = g.onClose || (() => {
+        var f;
+        (f = l.current) != null && f.blur && l.current.blur();
+      }), t.current = (((a = w) == null ? void 0 : a.default) || w)(l.current, g), h == null || h(t.current);
+    }, s = () => {
+      m == null || m(t.current), t.current && t.current.destroy(), t.current = void 0;
     };
-    if (g(), t.current) {
-      const C = Object.getOwnPropertyNames(a);
-      for (let s = C.length - 1; s >= 0; s--) {
-        const D = C[s];
-        let o = a[D];
-        (o == null ? void 0 : o.toString()) !== ((y = t.current.config[D]) == null ? void 0 : y.toString()) && (k.includes(D) && !Array.isArray(o) && (o = [o]), t.current.set(D, o));
+    return i(), () => {
+      s();
+    };
+  }, [g, h, m]), S(() => {
+    var i;
+    if (t.current) {
+      const s = Object.getOwnPropertyNames(g);
+      for (let a = s.length - 1; a >= 0; a--) {
+        const f = s[a];
+        let y = g[f];
+        (y == null ? void 0 : y.toString()) !== ((i = t.current.config[f]) == null ? void 0 : i.toString()) && (k.includes(f) && !Array.isArray(y) && (y = [y]), t.current.set(f, y));
       }
       n !== void 0 && n !== t.current.input.value && t.current.setDate(n, !1);
     }
-    return () => {
-      m();
-    };
-  }, [a, i, c, n, e]);
-  const A = S((g) => {
-    h.current = g;
+  }, [g, n]);
+  const A = v((i) => {
+    l.current = i;
   }, []);
-  if (l)
-    return l({ ...c, defaultValue: r, value: n }, A);
-  const x = S(
-    (g) => {
-      var m, y;
-      e && e.onChange && (Array.isArray(e == null ? void 0 : e.onChange) ? (m = e == null ? void 0 : e.onChange) == null || m.forEach(() => [new Date(g.target.value)], (n == null ? void 0 : n.toString()) || "") : typeof e.onChange == "function" && ((y = e == null ? void 0 : e.onChange) == null || y.call(e, [new Date(g.target.value)], (n == null ? void 0 : n.toString()) || "", t.current)));
+  if (u)
+    return u({ ...c, defaultValue: r, value: n }, A);
+  const x = v(
+    (i) => {
+      var s, a;
+      e && e.onChange && (Array.isArray(e == null ? void 0 : e.onChange) ? (s = e == null ? void 0 : e.onChange) == null || s.forEach(() => [new Date(i.target.value)], (n == null ? void 0 : n.toString()) || "") : typeof e.onChange == "function" && ((a = e == null ? void 0 : e.onChange) == null || a.call(e, [new Date(i.target.value)], (n == null ? void 0 : n.toString()) || "", t.current)));
     },
     [e, n]
   );
-  return i.wrap ? /* @__PURE__ */ b("div", { className: "flatpickr", ref: A, children: f }) : /* @__PURE__ */ b(
+  return o.wrap ? /* @__PURE__ */ b("div", { className: "flatpickr", ref: A, children: C }) : /* @__PURE__ */ b(
     "input",
@@ -74,0 +75,0 @@ {

package.json

 {
   "name": "react-flatpickr",
-  "version": "4.0.10",
+  "version": "4.0.11",
   "description": "flatpickr for React",
@@ -5,0 +5,0 @@ "exports": {

README.md

@@ -225,2 +225,8 @@ [![NPM version][npm-img]][npm-url]
 
+#### The Date Picker closes after a value is selected
+
+This occurs due to the date picker being created and destroyed on each render. To avoid this, you need
+to ensure that any props and options that are passed in are memoized with `useMemo`. You should also
+ensure that your event handlers have stable references by wrapping them in `useCallback`.
+
 ## License
@@ -227,0 +233,0 @@

No alert changes

Improved metrics

Total package byte prevSize

33497

0.1%

Lines of code

134

0.75%

Number of lines in readme file

246

2.5%

No dependency changes