@rio-cloud/rio-uikit 2.3.0-beta.1 → 2.3.0-beta.3

package/components/datepicker/DayPicker.js

@@ -1,281 +1,291 @@
-import { jsxs as k, jsx as i, Fragment as Se } from "react/jsx-runtime";
-import { useState as re, useEffect as ae, useRef as N } from "react";
-import { DayPicker as ie } from "react-day-picker";
-import { format as se, parse as be, isValid as ce } from "date-fns";
-import * as E from "date-fns/locale";
-import { debounce as De } from "es-toolkit/function";
-import "react-day-picker/dist/style.css";
-import Pe from "../../hooks/useClickOutside.js";
-import ke from "../../hooks/usePopperDropdown.js";
-import Ne from "../../hooks/useKey.js";
-import we from "../clearableInput/ClearableInput.js";
-import Re from "../../utils/classNames.js";
-const Ee = (e) => !e.mode || e.mode === "single", xe = (e) => e.mode === "multiple", Le = (e) => e.mode === "range", Je = (e) => {
+import { jsx as i, jsxs as $, Fragment as q } from "react/jsx-runtime";
+import { useState as H, useRef as J, useEffect as Re } from "react";
+import Ie from "react-dom";
+import Ne from "../../hooks/useClickOutside.js";
+import Be from "../../hooks/useKey.js";
+import Me from "../../hooks/usePopperDropdown.js";
+import Ve from "../../utils/classNames.js";
+import { getOrCreatePortalRoot as Ee } from "../../utils/portalRoot.js";
+import Fe from "./DayPickerCalendar.js";
+import je from "./DayPickerDropdown.js";
+import Ge from "./DayPickerInput.js";
+import { isSingleDayPickerProps as L, isMultipleDayPickerProps as Q, isRangeDayPickerProps as Te } from "./dayPickerTypes.js";
+import xe from "./useDayPickerInputState.js";
+import "date-fns";
+import "date-fns/locale";
+const Ae = (e) => Object.hasOwn(e, "value"), Ke = (e) => Object.hasOwn(e, "closeOnSelect"), w = (e, o) => typeof e == "function" ? e(o) : e ?? null, nt = (e) => {
   const {
     id: o,
-    selected: r,
-    inputProps: s = {},
-    alignRight: u,
-    bsSize: f = "",
-    locale: a = "en-GB",
-    footer: S,
-    inline: le,
-    showOutsideDays: F = !0,
-    fixedWeeks: T = !0,
-    mode: M = "single",
-    dateFormat: p,
-    placeholder: O,
-    isClearable: B = !1,
-    closeOnSelect: j = !0,
-    defaultMonth: K,
-    startMonth: V,
-    endMonth: A,
-    inputClassName: G,
-    className: $
-  } = e, c = M === "single", de = M === "multiple", ye = M === "range", m = r !== void 0, [ue, b] = re(), h = m ? r : ue, w = c ? h instanceof Date ? h : void 0 : de ? Array.isArray(h) ? h : void 0 : Fe(h) ? h : void 0, z = { selected: w }, H = Te(a), [U, v] = re(""), W = m && !c ? Oe(w, a, M, p) : U;
-  ae(() => {
-    c && m && r instanceof Date && v(x(r, a, p));
-  }, [r, c, m, a, p]);
-  const I = (n, t) => {
-    if (Ee(e) && e.onSelectChange) {
-      e.onSelectChange(n, t);
+    name: l,
+    mode: g = "single",
+    locale: m = "en-GB",
+    placeholder: h,
+    iconName: p = "rioglyph-calendar",
+    dateFormat: U,
+    onBlur: X,
+    inputProps: c,
+    errorMessage: S,
+    warningMessage: k,
+    messageWhiteSpace: M = "normal",
+    inputClassName: Y,
+    className: Z,
+    dropdownClassName: _,
+    leftSidebarClassName: v,
+    rightSidebarClassName: ee,
+    footerClassName: te,
+    usePortal: R = !1,
+    alignRight: ne,
+    isClearable: re = !1,
+    closeOnOutsideClick: V = !0,
+    selectionBehavior: I = "immediate"
+  } = e, E = Ae(e), N = L(e), oe = Ke(e) ? e.closeOnSelect !== !1 : I !== "deferred", [ae, ie] = H(e.defaultValue), s = E ? e.value : ae, [y, d] = H(s), {
+    isOpen: a,
+    open: D,
+    close: B,
+    update: le,
+    referenceRef: O,
+    popperElementRef: ce,
+    popperStyles: se,
+    popperAttributes: de
+  } = Me({ placement: ne ? "bottom-end" : "bottom-start" }), C = J(null), F = J(null);
+  Re(() => {
+    d(s);
+  }, [s]);
+  const ue = (t) => {
+    F.current = t, ce(t);
+  }, fe = (t, n) => {
+    if (N) {
+      e.onChange?.(t, n);
       return;
     }
-    if (xe(e) && e.onSelectChange) {
-      e.onSelectChange(n, t);
+    if (Q(e)) {
+      e.onChange?.(t, n);
       return;
     }
-    Le(e) && e.onSelectChange && e.onSelectChange(n, t);
-  }, Z = (n) => q(n), fe = (n) => q(n.currentTarget.value), pe = N(
-    De((n) => {
-      const t = L(n, a);
-      console.log(t);
-      const d = !!t;
-      if (b(t), c && "onInputChange" in e && e.onInputChange && e.onInputChange(n, t, d), t !== void 0 || n === "") {
-        const Ie = p ? L(n, a, p) : t;
-        I(Ie, {});
-      }
-    }, 300)
-  ).current, q = (n) => {
-    v(n), pe(n);
-  }, D = N(!1), J = (n) => {
-    const t = n.relatedTarget, d = t && te.current?.contains(t);
-    if (l && !d && C(), !c)
-      return;
-    const y = L(U, a, p);
-    y && ce(y) && (b(y), I(y, {}), v(x(y, a, p)));
-  }, Q = () => {
-    l || ee();
-  }, X = (n) => {
-    if (n.key === "Tab" && (D.current = !0), n.key === "Enter") {
-      if (!l) {
-        P();
+    Te(e) && e.onChange?.(t, n);
+  }, b = (t, n = {}) => {
+    E || ie(t), d(t), fe(t, n);
+  }, ge = () => {
+    b(void 0, {});
+  }, u = () => {
+    B(), d(s);
+  }, j = () => {
+    b(y, {}), B();
+  }, me = Ne(
+    (t) => {
+      if (!V)
         return;
-      }
-      l && j && (I(w, {}), C());
-    }
-  }, Y = (n) => {
-    m || b(n);
-  }, me = () => {
-    Z(""), Y(void 0), v(""), m && b(void 0), ye && "onChange" in e && e.onChange && e.onChange(void 0), I(void 0, {});
-  }, _ = (n, t, d, y) => {
-    Y(n), I(n, d), c && !m && v(x(n, a, p)), D.current && g?.current?.focus(), j && (C(), D.current = !1);
-  }, {
-    isOpen: l,
-    open: ee,
-    close: C,
-    referenceRef: ne,
-    popperElementRef: ge,
-    popperStyles: Me,
-    popperAttributes: he
-  } = ke({ placement: u ? "bottom-end" : "bottom-start" }), g = N(null), te = N(null), Ce = (n) => {
-    te.current = n, ge(n);
-  }, R = Pe(
-    (n) => {
-      const t = n.target;
-      if (!t) {
-        C();
+      const n = t.target;
+      if (!n) {
+        u();
         return;
       }
-      const d = ne.current?.contains(t), y = g.current?.contains(t);
-      d || y || C();
+      const f = O.current?.contains(n), P = C.current?.contains(n);
+      f || P || u();
     },
     void 0,
-    l
-  ), P = () => {
-    ee(), g.current?.focus();
-  };
-  Ne("Escape", (n) => {
-    const t = n.target;
-    g.current && g.current === t && l && C();
-  }), ae(() => {
-    const n = (t) => {
-      !l || !R.current || t.key === "Tab" && R.current.contains(document.activeElement) && (D.current = !0, console.log("User tabbed into dropdown"));
-    };
-    return document.addEventListener("keydown", n), () => {
-      document.removeEventListener("keydown", n);
-    };
-  }, [l]);
-  const oe = `DayPicker ${f === "sm" ? "margin-10" : "margin-15"} ${f}`;
-  if (le)
-    return /* @__PURE__ */ k("div", { className: `display-flex flex-column justify-content-between ${$}`, children: [
-      /* @__PURE__ */ i(
-        ie,
-        {
-          ...z,
-          mode: M,
-          defaultMonth: K,
-          locale: H,
-          onSelect: _,
-          captionLayout: "dropdown",
-          animate: !0,
-          navLayout: "around",
-          startMonth: V,
-          endMonth: A,
-          showOutsideDays: F,
-          fixedWeeks: T,
-          className: oe
-        }
-      ),
-      S ? /* @__PURE__ */ i("div", { className: "padding-15", children: S }) : /* @__PURE__ */ i("div", {})
-    ] });
-  const ve = {
-    ...s,
-    readOnly: !c,
-    style: {
-      background: "var(--color-white)",
-      ...s?.style ?? {}
+    a
+  );
+  Be("Escape", (t) => {
+    const n = t.target;
+    if (!n || !a)
+      return;
+    const f = C.current && C.current === n, P = !!O.current?.contains(n);
+    (f || P) && u();
+  });
+  const {
+    displayValue: G,
+    handleInputBlur: he,
+    handleInputChange: pe,
+    handleClearInput: T,
+    handleInputFocus: Ce,
+    handleInputKeyDown: be,
+    inputMaskProps: Pe
+  } = xe({
+    props: e,
+    locale: m,
+    dateFormat: U,
+    inputProps: c,
+    onBlur: X,
+    isDropdownOpen: a,
+    isSingleMode: N,
+    selectionBehavior: I,
+    closeOnOutsideClick: V,
+    committedValue: s,
+    draftValue: y,
+    setDraftValue: d,
+    commitValue: b,
+    clearValue: ge,
+    openDropdown: D,
+    closeDropdown: u,
+    applyDraftValue: j,
+    popperElementRef: F
+  }), x = () => {
+    D(), C.current?.focus();
+  }, Se = () => {
+    if (a) {
+      u();
+      return;
     }
-  };
-  return /* @__PURE__ */ k(Se, { children: [
-    /* @__PURE__ */ i("div", { ref: ne, className: `form-group ${$}`, children: /* @__PURE__ */ k("div", { className: "input-group", children: [
-      /* @__PURE__ */ i("span", { className: "input-group-addon", onClick: P, children: /* @__PURE__ */ i("span", { className: "rioglyph rioglyph-calendar", "aria-hidden": "true" }) }),
-      B && /* @__PURE__ */ i(
-        we,
-        {
-          id: o,
-          autoComplete: "off",
-          placeholder: O,
-          ...ve,
-          type: "text",
-          value: W,
-          onChange: Z,
-          onClick: P,
-          onClear: me,
-          onBlur: J,
-          onFocus: Q,
-          onKeyPress: X,
-          ref: g,
-          inputClassName: G
-        }
-      ),
-      !B && /* @__PURE__ */ i(
-        "input",
+    D();
+  }, r = We({
+    props: e,
+    value: s,
+    draftValue: y,
+    setDraftValue: d,
+    apply: j,
+    clear: T,
+    close: u
+  }), A = r.trigger ? w(r.trigger, {
+    ...r.renderProps,
+    id: o,
+    name: l,
+    displayValue: G,
+    isOpen: a,
+    open: D,
+    toggle: Se
+  }) : null, ke = (t, n) => {
+    if (n.disabled || n.hidden)
+      return;
+    const f = I === "immediate";
+    f ? b(t, n) : d(t);
+    const P = g !== "range" || !!t?.from && !!t?.to;
+    oe && P && (f || b(t, n), B());
+  }, K = !!(S || k), ye = {
+    ...c,
+    name: l || c?.name,
+    autoComplete: c?.autoComplete || "off",
+    placeholder: h || c?.placeholder
+  }, De = r.leftSidebar ? w(r.leftSidebar, r.renderProps) : null, Oe = r.rightSidebar ? w(r.rightSidebar, r.renderProps) : null, we = r.footer ? w(r.footer, r.renderProps) : null, W = R ? Ee() : null, z = /* @__PURE__ */ i(
+    je,
+    {
+      assignPopperElement: ue,
+      popperStyles: se,
+      popperAttributes: de,
+      enableStackedCalendars: (e.numberOfMonths ?? 1) > 1,
+      dropdownClassName: _,
+      outsideRef: me,
+      updatePopperPosition: le,
+      leftSidebar: De,
+      rightSidebar: Oe,
+      footer: we,
+      leftSidebarClassName: v,
+      rightSidebarClassName: ee,
+      footerClassName: te,
+      children: /* @__PURE__ */ i(
+        Fe,
         {
-          id: o,
-          size: 12,
-          type: "text",
-          autoComplete: "off",
-          placeholder: O,
-          ...s,
-          value: W,
-          onChange: fe,
-          onClick: P,
-          onBlur: J,
-          onFocus: Q,
-          onKeyDown: X,
-          ref: g,
-          readOnly: !c,
-          className: Re("ClearableInput form-control bg-white", G)
+          ...e,
+          size: "sm",
+          value: y,
+          onChange: ke,
+          className: "margin-15"
         }
       )
-    ] }) }),
-    l && /* @__PURE__ */ i(
+    }
+  );
+  return /* @__PURE__ */ $(q, { children: [
+    /* @__PURE__ */ i(
       "div",
       {
-        style: Me,
-        className: "DayPickerPopover z-index-max bg-white shadow-default rounded margin-y-3 border",
-        ...he,
-        ref: Ce,
-        role: "dialog",
-        "aria-label": "DayPicker calendar",
-        children: /* @__PURE__ */ k("div", { ref: R, className: "display-flex flex-column justify-content-between", children: [
-          /* @__PURE__ */ i(
-            ie,
-            {
-              ...z,
-              mode: M,
-              defaultMonth: K,
-              locale: H,
-              onSelect: _,
-              captionLayout: "dropdown",
-              animate: !0,
-              navLayout: "around",
-              startMonth: V,
-              endMonth: A,
-              showOutsideDays: F,
-              fixedWeeks: T,
-              className: oe
-            }
-          ),
-          S ? /* @__PURE__ */ i("div", { className: "padding-15", children: S }) : /* @__PURE__ */ i("div", {})
-        ] })
+        className: Ve(
+          "form-group",
+          K && "has-feedback",
+          S && "has-error",
+          k && "has-warning",
+          Z
+        ),
+        children: A ? /* @__PURE__ */ $(q, { children: [
+          /* @__PURE__ */ i("div", { ref: O, className: "display-inline-block", children: A }),
+          K ? /* @__PURE__ */ i("span", { className: `help-block white-space-${M}`, children: /* @__PURE__ */ i("span", { children: S || k }) }) : null
+        ] }) : /* @__PURE__ */ i(
+          Ge,
+          {
+            id: o,
+            triggerRef: O,
+            inputRef: C,
+            displayValue: G,
+            iconName: p,
+            isSingleMode: N,
+            isClearable: re,
+            inputMaskProps: Pe,
+            mergedInputProps: ye,
+            inputClassName: Y,
+            errorMessage: S,
+            warningMessage: k,
+            messageWhiteSpace: M,
+            onChange: pe,
+            onAddonClick: x,
+            onClick: (t) => {
+              c?.onClick?.(t), x();
+            },
+            onFocus: Ce,
+            onBlur: he,
+            onKeyDown: be,
+            onClear: T
+          }
+        )
       }
-    )
+    ),
+    a && R && W && Ie.createPortal(z, W),
+    a && !R && z
   ] });
-}, Fe = (e) => {
-  if (!e || typeof e != "object")
-    return !1;
-  const o = e, r = o.from === void 0 || o.from instanceof Date, s = o.to === void 0 || o.to instanceof Date;
-  return r && s;
-}, Te = (e) => {
-  const o = e.split("-")[0];
-  return E[o] || E[e] || E.enGB;
-}, x = (e, o, r) => e ? r ? se(e, r) : new Intl.DateTimeFormat(o).format(e) : "", Oe = (e, o, r, s) => {
-  if (!e)
-    return "";
-  const u = (f) => s ? se(f, s) : new Intl.DateTimeFormat(o).format(f);
-  if (r === "single" && e instanceof Date)
-    return u(e);
-  if (r === "multiple" && Array.isArray(e))
-    return e.map(u).join(", ");
-  if (r === "range" && typeof e == "object" && "from" in e) {
-    const { from: f, to: a } = e;
-    return !f || !a ? "" : [f, a].filter(Boolean).map(u).join(" – ");
+}, We = ({
+  props: e,
+  value: o,
+  draftValue: l,
+  setDraftValue: g,
+  apply: m,
+  clear: h,
+  close: p
+}) => L(e) ? {
+  trigger: e.trigger,
+  leftSidebar: e.leftSidebar,
+  rightSidebar: e.rightSidebar,
+  footer: e.footer,
+  renderProps: {
+    value: o,
+    draftValue: l,
+    setDraftValue: g,
+    apply: m,
+    clear: h,
+    close: p,
+    mode: e.mode || "single",
+    locale: e.locale || "en-GB"
+  }
+} : Q(e) ? {
+  trigger: e.trigger,
+  leftSidebar: e.leftSidebar,
+  rightSidebar: e.rightSidebar,
+  footer: e.footer,
+  renderProps: {
+    value: o,
+    draftValue: l,
+    setDraftValue: g,
+    apply: m,
+    clear: h,
+    close: p,
+    mode: e.mode,
+    locale: e.locale || "en-GB"
+  }
+} : {
+  trigger: e.trigger,
+  leftSidebar: e.leftSidebar,
+  rightSidebar: e.rightSidebar,
+  footer: e.footer,
+  renderProps: {
+    value: o,
+    draftValue: l,
+    setDraftValue: g,
+    apply: m,
+    clear: h,
+    close: p,
+    mode: e.mode,
+    locale: e.locale || "en-GB"
   }
-  return "";
-}, Be = {
-  "bg-BG": "dd.MM.yyyy",
-  "cs-CZ": "dd.MM.yyyy",
-  "da-DK": "dd-MM-yyyy",
-  "de-DE": "dd.MM.yyyy",
-  "el-GR": "dd/MM/yyyy",
-  "en-GB": "dd/MM/yyyy",
-  "es-ES": "dd/MM/yyyy",
-  "et-EE": "dd.MM.yyyy",
-  "fi-FI": "dd.MM.yyyy",
-  "fr-FR": "dd/MM/yyyy",
-  "hr-HR": "dd.MM.yyyy",
-  "hu-HU": "yyyy. MM. dd.",
-  "it-IT": "dd/MM/yyyy",
-  "lt-LT": "dd-MM-yyyy",
-  "lv-LV": "dd.MM.yyyy",
-  "nb-NO": "dd.MM.yyyy",
-  "nl-NL": "dd-MM-yyyy",
-  "pl-PL": "dd.MM.yyyy",
-  "pt-BR": "dd/MM/yyyy",
-  "pt-PT": "dd/MM/yyyy",
-  "ro-RO": "dd.MM.yyyy",
-  "sk-SK": "dd.MM.yyyy",
-  "sl-SI": "dd.MM.yyyy",
-  "sv-SE": "yyyy-MM-dd"
-}, je = (e, o = "yyyy-MM-dd") => Be[e] || o, L = (e, o, r) => {
-  if (!e)
-    return;
-  const s = r || je(o, r), u = be(e, s, /* @__PURE__ */ new Date());
-  return ce(u) ? u : void 0;
 };
 export {
-  Je as default
+  Fe as DayPickerCalendar,
+  nt as default
 };
 //# sourceMappingURL=DayPicker.js.map