@rio-cloud/rio-uikit 2.5.1 → 3.0.0-beta.1

package/components/datepicker/DatePicker.js

@@ -1,49 +1,29 @@
-import { jsx as C } from "react/jsx-runtime";
-import { forwardRef as L, useState as N } from "react";
-import o from "@rio-cloud/react-datetime";
-import { noop as O } from "es-toolkit/function";
-import _ from "../../utils/classNames.js";
-const A = o?.default ? o.default : o, k = "en-GB", x = 0, U = L((s, y) => {
-  const {
-    id: n,
-    dropup: c = !1,
-    alignRight: i = !1,
-    locale: l = k,
-    minWidth: p = x,
-    onChange: m = O,
-    mandatory: f = !0,
-    dateValidation: r,
-    clearableInput: u = !1,
-    closeOnSelect: d = !0,
-    inputProps: h,
-    className: a,
-    ...D
-  } = s, [g, P] = N(!1), E = (t) => r ? r(t) : typeof t == "object", I = (t) => {
-    const e = f ? E(t) : !0;
-    P(!e), m(t, e);
-  }, b = _(
-    "DatePicker",
-    "form-group",
-    g && "has-error",
-    c && "dropup",
-    i && "align-right",
-    a && a
-  ), j = { id: n, ...h };
-  return /* @__PURE__ */ C(
-    A,
-    {
-      ...D,
-      locale: l,
-      clearableInput: u,
-      closeOnSelect: d,
-      onChange: I,
-      minWidth: p,
-      inputProps: j,
-      className: b
-    }
-  );
+import e from "../../utils/classNames.js";
+import { forwardRef as t, useState as n } from "react";
+import { noop as r } from "es-toolkit/function";
+import { jsx as i } from "react/jsx-runtime";
+import a from "@rio-cloud/react-datetime";
+//#region src/components/datepicker/DatePicker.tsx
+var o = a?.default ? a.default : a, s = "en-GB", c = 0, l = t((t, a) => {
+	let { id: l, dropup: u = !1, alignRight: d = !1, locale: f = s, minWidth: p = c, onChange: m = r, mandatory: h = !0, dateValidation: g, clearableInput: _ = !1, closeOnSelect: v = !0, inputProps: y, className: b, ...x } = t, [S, C] = n(!1), w = (e) => g ? g(e) : typeof e == "object", T = (e) => {
+		let t = !h || w(e);
+		C(!t), m(e, t);
+	}, E = e("DatePicker", "form-group", S && "has-error", u && "dropup", d && "align-right", b && b), D = {
+		id: l,
+		...y
+	};
+	return /* @__PURE__ */ i(o, {
+		...x,
+		locale: f,
+		clearableInput: _,
+		closeOnSelect: v,
+		onChange: T,
+		minWidth: p,
+		inputProps: D,
+		className: E
+	});
 });
-export {
-  U as default
-};
-//# sourceMappingURL=DatePicker.js.map
+//#endregion
+export { l as default };
+
+//# sourceMappingURL=DatePicker.js.map

package/components/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, forwardRef } from 'react';\nimport type { Moment } from 'moment';\nimport DatetimeImport, { type DatetimepickerProps } from '@rio-cloud/react-datetime';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\n// Fix: Handle ESM/CJS interop by unwrapping default if necessary\n// @ts-expect-error\nconst Datetime = DatetimeImport?.default ? DatetimeImport.default : DatetimeImport;\n\nconst DEFAULT_LOCALE = 'en-GB';\nconst DEFAULT_MIN_WIDTH = 0;\n\nexport type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {\n    /**\n     * An id used for the internal input element.\n     */\n    id?: string;\n\n    /**\n     * The moment locale to be used for the date picker.\n     * Make sure to import the respective moment locale files.\n     *\n     * @default 'en-GB'\n     * @example import 'moment/dist/locale/de';\n     */\n    locale?: string;\n\n    /**\n     * Once the day has been selected, the date picker will be closed automatically.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Default value of the DatePicker (date or moment).\n     */\n    initialValue?: Date | Moment;\n\n    /**\n     * Value of the DatePicker (date or moment). Use this only if you want to use\n     * this component as a controlled component\n     */\n    value?: Date | string | Moment;\n\n    /*\n     * Defines the format for the date. It accepts any moment.js date format.\n     * If true the date will be displayed using the defaults for the current locale.\n     * If false the date picker is disabled and the component can be used as time picker.\n     */\n    dateFormat?: boolean | string;\n\n    /*\n     * Defines the format for the time. It accepts any moment.js time format.\n     * If true the time will be displayed using the defaults for the current locale.\n     * If false the time picker is disabled and the component can be used as date picker.\n     */\n    timeFormat?: boolean | string;\n\n    /*\n     * Defines additional attributes for the input element of the component.\n     */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n\n    /**\n     * Defines whether the dropdown opens upwards or not.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Opens the picker right aligned.\n     *\n     * @default false\n     */\n\n    alignRight?: boolean;\n\n    /**\n     * Defines whether the clearableInput button is shown.\n     *\n     * @default false\n     */\n    clearableInput?: boolean;\n\n    /**\n     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%\n     * you can also set a high minWidth number to use 100% with of the parent element.\n     * A value of \"0\" means no extra width is set and it becomes 100% width of the parent.\n     *\n     * @default 0\n     */\n    minWidth?: number;\n\n    /**\n     * Callback function when the value changes. Receives the new date (moment)\n     * and a boolean (whether date is valid or not) as arguments.\n     *\n     * @param value\n     * @param isValid\n     * @returns\n     */\n    onChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Defines whether the input shows an error when the date is invalid or cleared.\n     *\n     * @default true\n     */\n    mandatory?: boolean;\n\n    /**\n     * Overwrites the internal date validation function in case you need to customize it.\n     *\n     * @param date\n     * @returns\n     */\n    dateValidation?: (date: Moment | string) => boolean;\n\n    /**\n     * Additional classes to be set on the DatePicker element.\n     */\n    className?: string;\n};\n\nconst DatePicker = forwardRef((props: DatePickerProps, _ref) => {\n    const {\n        id,\n        dropup = false,\n        alignRight = false,\n        locale = DEFAULT_LOCALE,\n        minWidth = DEFAULT_MIN_WIDTH,\n        onChange = noop,\n        mandatory = true,\n        dateValidation,\n        clearableInput = false,\n        closeOnSelect = true,\n        inputProps,\n        className,\n        ...remainingProp\n    } = props;\n\n    const [hasError, setHasError] = useState(false);\n\n    const validateDate = (dateToValidate: Moment | string) => {\n        // If the entered date complies with the defined dateFormat, the Datetime component\n        // returns a moment object, otherwise the return value is a string.\n        // Note, using a isValid() function from moment or the Date object itself will result in\n        // different outcome in various browsers.\n        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults\n        // to \"01/01/2001\" whereas in Firefox it is an invalid date.\n        // The solution is to compare the entered value to the date format which is done by React Datetime.\n        const isDateObject = typeof dateToValidate === 'object';\n\n        return dateValidation ? dateValidation(dateToValidate) : isDateObject;\n    };\n\n    const handleChange = (date: Moment | string) => {\n        const isValid = mandatory ? validateDate(date) : true;\n        setHasError(!isValid);\n        onChange(date, isValid);\n    };\n\n    const classes = classNames(\n        'DatePicker',\n        'form-group',\n        hasError && 'has-error',\n        dropup && 'dropup',\n        alignRight && 'align-right',\n        className && className\n    );\n\n    // This way we can expose the \"id\" as top level prop and not as part of the inputProps which\n    // makes the use of the id much more convenient\n    const enhancedInputProps = { id, ...inputProps };\n\n    return (\n        <Datetime\n            // TODO: add support for setting ref to the input. Maybe add a \"inputRef\" prop to react-datetime\n            // ref={ref}\n            {...remainingProp}\n            locale={locale}\n            clearableInput={clearableInput}\n            closeOnSelect={closeOnSelect}\n            onChange={handleChange}\n            minWidth={minWidth}\n            inputProps={enhancedInputProps}\n            className={classes}\n        />\n    );\n});\n\nexport default DatePicker;\n"],"names":["Datetime","DatetimeImport","DEFAULT_LOCALE","DEFAULT_MIN_WIDTH","DatePicker","forwardRef","props","_ref","id","dropup","alignRight","locale","minWidth","onChange","noop","mandatory","dateValidation","clearableInput","closeOnSelect","inputProps","className","remainingProp","hasError","setHasError","useState","validateDate","dateToValidate","handleChange","date","isValid","classes","classNames","enhancedInputProps","jsx"],"mappings":";;;;;AAUA,MAAMA,IAAWC,GAAgB,UAAUA,EAAe,UAAUA,GAE9DC,IAAiB,SACjBC,IAAoB,GAoHpBC,IAAaC,EAAW,CAACC,GAAwBC,MAAS;AAC5D,QAAM;AAAA,IACF,IAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,YAAAC,IAAa;AAAA,IACb,QAAAC,IAAST;AAAA,IACT,UAAAU,IAAWT;AAAA,IACX,UAAAU,IAAWC;AAAA,IACX,WAAAC,IAAY;AAAA,IACZ,gBAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAUC,CAAW,IAAIC,EAAS,EAAK,GAExCC,IAAe,CAACC,MAUXV,IAAiBA,EAAeU,CAAc,IAFhC,OAAOA,KAAmB,UAK7CC,IAAe,CAACC,MAA0B;AAC5C,UAAMC,IAAUd,IAAYU,EAAaG,CAAI,IAAI;AACjD,IAAAL,EAAY,CAACM,CAAO,GACpBhB,EAASe,GAAMC,CAAO;AAAA,EAC1B,GAEMC,IAAUC;AAAA,IACZ;AAAA,IACA;AAAA,IACAT,KAAY;AAAA,IACZb,KAAU;AAAA,IACVC,KAAc;AAAA,IACdU,KAAaA;AAAA,EAAA,GAKXY,IAAqB,EAAE,IAAAxB,GAAI,GAAGW,EAAA;AAEpC,SACI,gBAAAc;AAAA,IAACjC;AAAA,IAAA;AAAA,MAGI,GAAGqB;AAAA,MACJ,QAAAV;AAAA,MACA,gBAAAM;AAAA,MACA,eAAAC;AAAA,MACA,UAAUS;AAAA,MACV,UAAAf;AAAA,MACA,YAAYoB;AAAA,MACZ,WAAWF;AAAA,IAAA;AAAA,EAAA;AAGvB,CAAC;"}
+{"version":3,"file":"DatePicker.js","names":[],"sources":["../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState, forwardRef } from 'react';\nimport type { Moment } from 'moment';\nimport DatetimeImport, { type DatetimepickerProps } from '@rio-cloud/react-datetime';\nimport { noop } from 'es-toolkit/function';\n\nimport classNames from '../../utils/classNames';\n\n// Fix: Handle ESM/CJS interop by unwrapping default if necessary\n// @ts-expect-error\nconst Datetime = DatetimeImport?.default ? DatetimeImport.default : DatetimeImport;\n\nconst DEFAULT_LOCALE = 'en-GB';\nconst DEFAULT_MIN_WIDTH = 0;\n\nexport type DatePickerProps = Omit<DatetimepickerProps, 'onChange' | 'initialValue'> & {\n    /**\n     * An id used for the internal input element.\n     */\n    id?: string;\n\n    /**\n     * The moment locale to be used for the date picker.\n     * Make sure to import the respective moment locale files.\n     *\n     * @default 'en-GB'\n     * @example import 'moment/dist/locale/de';\n     */\n    locale?: string;\n\n    /**\n     * Once the day has been selected, the date picker will be closed automatically.\n     *\n     * @default true\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Default value of the DatePicker (date or moment).\n     */\n    initialValue?: Date | Moment;\n\n    /**\n     * Value of the DatePicker (date or moment). Use this only if you want to use\n     * this component as a controlled component\n     */\n    value?: Date | string | Moment;\n\n    /*\n     * Defines the format for the date. It accepts any moment.js date format.\n     * If true the date will be displayed using the defaults for the current locale.\n     * If false the date picker is disabled and the component can be used as time picker.\n     */\n    dateFormat?: boolean | string;\n\n    /*\n     * Defines the format for the time. It accepts any moment.js time format.\n     * If true the time will be displayed using the defaults for the current locale.\n     * If false the time picker is disabled and the component can be used as date picker.\n     */\n    timeFormat?: boolean | string;\n\n    /*\n     * Defines additional attributes for the input element of the component.\n     */\n    inputProps?: React.HTMLProps<HTMLInputElement>;\n\n    /**\n     * Defines whether the dropdown opens upwards or not.\n     *\n     * @default false\n     */\n    dropup?: boolean;\n\n    /**\n     * Opens the picker right aligned.\n     *\n     * @default false\n     */\n\n    alignRight?: boolean;\n\n    /**\n     * Defines whether the clearableInput button is shown.\n     *\n     * @default false\n     */\n    clearableInput?: boolean;\n\n    /**\n     * Optional min-width value (without px). Since the DatePicker has a max-width of 100%\n     * you can also set a high minWidth number to use 100% with of the parent element.\n     * A value of \"0\" means no extra width is set and it becomes 100% width of the parent.\n     *\n     * @default 0\n     */\n    minWidth?: number;\n\n    /**\n     * Callback function when the value changes. Receives the new date (moment)\n     * and a boolean (whether date is valid or not) as arguments.\n     *\n     * @param value\n     * @param isValid\n     * @returns\n     */\n    onChange?: (value: Moment | string, isValid: boolean) => void;\n\n    /**\n     * Defines whether the input shows an error when the date is invalid or cleared.\n     *\n     * @default true\n     */\n    mandatory?: boolean;\n\n    /**\n     * Overwrites the internal date validation function in case you need to customize it.\n     *\n     * @param date\n     * @returns\n     */\n    dateValidation?: (date: Moment | string) => boolean;\n\n    /**\n     * Additional classes to be set on the DatePicker element.\n     */\n    className?: string;\n};\n\nconst DatePicker = forwardRef((props: DatePickerProps, _ref) => {\n    const {\n        id,\n        dropup = false,\n        alignRight = false,\n        locale = DEFAULT_LOCALE,\n        minWidth = DEFAULT_MIN_WIDTH,\n        onChange = noop,\n        mandatory = true,\n        dateValidation,\n        clearableInput = false,\n        closeOnSelect = true,\n        inputProps,\n        className,\n        ...remainingProp\n    } = props;\n\n    const [hasError, setHasError] = useState(false);\n\n    const validateDate = (dateToValidate: Moment | string) => {\n        // If the entered date complies with the defined dateFormat, the Datetime component\n        // returns a moment object, otherwise the return value is a string.\n        // Note, using a isValid() function from moment or the Date object itself will result in\n        // different outcome in various browsers.\n        // For instance `new Date('1')` or `moment('1')` are valid dates in Chrome where it defaults\n        // to \"01/01/2001\" whereas in Firefox it is an invalid date.\n        // The solution is to compare the entered value to the date format which is done by React Datetime.\n        const isDateObject = typeof dateToValidate === 'object';\n\n        return dateValidation ? dateValidation(dateToValidate) : isDateObject;\n    };\n\n    const handleChange = (date: Moment | string) => {\n        const isValid = mandatory ? validateDate(date) : true;\n        setHasError(!isValid);\n        onChange(date, isValid);\n    };\n\n    const classes = classNames(\n        'DatePicker',\n        'form-group',\n        hasError && 'has-error',\n        dropup && 'dropup',\n        alignRight && 'align-right',\n        className && className\n    );\n\n    // This way we can expose the \"id\" as top level prop and not as part of the inputProps which\n    // makes the use of the id much more convenient\n    const enhancedInputProps = { id, ...inputProps };\n\n    return (\n        <Datetime\n            // TODO: add support for setting ref to the input. Maybe add a \"inputRef\" prop to react-datetime\n            // ref={ref}\n            {...remainingProp}\n            locale={locale}\n            clearableInput={clearableInput}\n            closeOnSelect={closeOnSelect}\n            onChange={handleChange}\n            minWidth={minWidth}\n            inputProps={enhancedInputProps}\n            className={classes}\n        />\n    );\n});\n\nexport default DatePicker;\n"],"mappings":";;;;;;AAUA,IAAM,IAAW,GAAgB,UAAU,EAAe,UAAU,GAE9D,IAAiB,SACjB,IAAoB,GAoHpB,IAAa,GAAY,GAAwB,MAAS;CAC5D,IAAM,EACF,OACA,YAAS,IACT,gBAAa,IACb,YAAS,GACT,cAAW,GACX,cAAW,GACX,eAAY,IACZ,mBACA,oBAAiB,IACjB,mBAAgB,IAChB,eACA,cACA,GAAG,MACH,GAEE,CAAC,GAAU,KAAe,EAAS,EAAK,GAExC,KAAgB,MAUX,IAAiB,EAAe,CAAc,IAFhC,OAAO,KAAmB,UAK7C,KAAgB,MAA0B;EAC5C,IAAM,IAAU,MAAY,EAAa,CAAI;EAE7C,AADA,EAAY,CAAC,CAAO,GACpB,EAAS,GAAM,CAAO;CAC1B,GAEM,IAAU,EACZ,cACA,cACA,KAAY,aACZ,KAAU,UACV,KAAc,eACd,KAAa,CACjB,GAIM,IAAqB;EAAE;EAAI,GAAG;CAAW;CAE/C,OACI,kBAAC,GAAD;EAGI,GAAI;EACI;EACQ;EACD;EACf,UAAU;EACA;EACV,YAAY;EACZ,WAAW;CACd,CAAA;AAET,CAAC"}

package/components/datepicker/DayPicker.js

@@ -1,292 +1,200 @@
-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";
-import "react-imask";
-const Ae = (e) => Object.hasOwn(e, "value"), Ke = (e) => Object.hasOwn(e, "closeOnSelect"), w = (e, o) => typeof e == "function" ? e(o) : e ?? null, rt = (e) => {
-  const {
-    id: o,
-    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 (Q(e)) {
-      e.onChange?.(t, n);
-      return;
-    }
-    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;
-      const n = t.target;
-      if (!n) {
-        u();
-        return;
-      }
-      const f = O.current?.contains(n), P = C.current?.contains(n);
-      f || P || u();
-    },
-    void 0,
-    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;
-    }
-    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,
-        {
-          ...e,
-          size: "sm",
-          value: y,
-          onChange: ke,
-          className: "margin-15"
-        }
-      )
-    }
-  );
-  return /* @__PURE__ */ $(q, { children: [
-    /* @__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
-  ] });
-}, 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"
-  }
-};
-export {
-  Fe as DayPickerCalendar,
-  rt as default
-};
-//# sourceMappingURL=DayPicker.js.map
+import e from "../../hooks/useKey.js";
+import t from "../../hooks/useClickOutside.js";
+import n from "../../utils/classNames.js";
+import { useAnchorName as r, usePopover as i } from "../../hooks/useAnchoredPopover.js";
+import { isMultipleDayPickerProps as a, isRangeDayPickerProps as o, isSingleDayPickerProps as s } from "./dayPickerTypes.js";
+import { supportedDayPickerLocales as c } from "./dayPickerUtils.js";
+import l from "./DayPickerCalendar.js";
+import ee from "./DayPickerDropdown.js";
+import u from "./DayPickerInput.js";
+import d from "./useDayPickerInputState.js";
+import { useEffect as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/datepicker/DayPicker.tsx
+var te = (e) => Object.hasOwn(e, "value"), ne = (e) => Object.hasOwn(e, "closeOnSelect"), v = (e, t) => typeof e == "function" ? e(t) : e ?? null, y = (c) => {
+	let { id: y, name: x, mode: S = "single", locale: re = "en-GB", placeholder: ie, iconName: ae = "icon-calendar", dateFormat: oe, onBlur: se, inputProps: C, errorMessage: w, warningMessage: T, messageWhiteSpace: E = "normal", inputClassName: ce, className: le, dropdownClassName: ue, leftSidebarClassName: de, rightSidebarClassName: fe, footerClassName: pe, alignRight: me, isClearable: he = !1, closeOnOutsideClick: D = !0, selectionBehavior: O = "immediate" } = c, k = te(c), A = s(c), ge = ne(c) ? c.closeOnSelect !== !1 : O !== "deferred", [_e, j] = m(c.defaultValue), M = k ? c.value : _e, [N, P] = m(M), [F, I] = m(!1), L = r("day-picker"), R = p(null), z = p(null), B = p(null);
+	i(B, F), f(() => {
+		P(M);
+	}, [M]);
+	let V = () => I(!0), H = () => I(!1), U = { anchorName: L }, ve = { positionAnchor: L }, ye = { popover: "manual" }, be = (e) => {
+		B.current = e;
+	}, xe = (e, t) => {
+		if (A) {
+			c.onChange?.(e, t);
+			return;
+		}
+		if (a(c)) {
+			c.onChange?.(e, t);
+			return;
+		}
+		o(c) && c.onChange?.(e, t);
+	}, W = (e, t = {}) => {
+		k || j(e), P(e), xe(e, t);
+	}, Se = () => {
+		W(void 0, {});
+	}, G = () => {
+		H(), P(M);
+	}, K = () => {
+		W(N, {}), H();
+	}, Ce = t((e) => {
+		if (!D) return;
+		let t = e.target;
+		if (!t) {
+			G();
+			return;
+		}
+		let n = z.current?.contains(t), r = R.current?.contains(t);
+		n || r || G();
+	}, void 0, F);
+	e("Escape", (e) => {
+		let t = e.target;
+		if (!t || !F) return;
+		let n = R.current && R.current === t, r = !!z.current?.contains(t);
+		(n || r) && G();
+	});
+	let { displayValue: q, handleInputBlur: we, handleInputChange: Te, handleClearInput: J, handleInputFocus: Ee, handleInputKeyDown: De, inputMaskProps: Oe } = d({
+		props: c,
+		locale: re,
+		dateFormat: oe,
+		inputProps: C,
+		onBlur: se,
+		isDropdownOpen: F,
+		isSingleMode: A,
+		selectionBehavior: O,
+		closeOnOutsideClick: D,
+		committedValue: M,
+		draftValue: N,
+		setDraftValue: P,
+		commitValue: W,
+		clearValue: Se,
+		openDropdown: V,
+		closeDropdown: G,
+		applyDraftValue: K,
+		dropdownElementRef: B
+	}), Y = () => {
+		V(), R.current?.focus();
+	}, ke = () => {
+		if (F) {
+			G();
+			return;
+		}
+		V();
+	}, X = b({
+		props: c,
+		value: M,
+		draftValue: N,
+		setDraftValue: P,
+		apply: K,
+		clear: J,
+		close: G
+	}), Z = X.trigger ? v(X.trigger, {
+		...X.renderProps,
+		id: y,
+		name: x,
+		displayValue: q,
+		isOpen: F,
+		open: V,
+		toggle: ke
+	}) : null, Ae = (e, t) => {
+		if (t.disabled || t.hidden) return;
+		let n = O === "immediate";
+		n ? W(e, t) : P(e);
+		let r = S !== "range" || !!e?.from && !!e?.to;
+		ge && r && (n || W(e, t), H());
+	}, Q = !!(w || T), $ = {
+		...C,
+		name: x || C?.name,
+		autoComplete: C?.autoComplete || "off",
+		placeholder: ie || C?.placeholder
+	}, je = X.leftSidebar ? v(X.leftSidebar, X.renderProps) : null, Me = X.rightSidebar ? v(X.rightSidebar, X.renderProps) : null, Ne = X.footer ? v(X.footer, X.renderProps) : null, Pe = /* @__PURE__ */ g(ee, {
+		assignDropdownElement: be,
+		dropdownStyles: ve,
+		dropdownAttributes: ye,
+		enableStackedCalendars: (c.numberOfMonths ?? 1) > 1,
+		dropdownClassName: n(me && "align-right", ue),
+		outsideRef: Ce,
+		leftSidebar: je,
+		rightSidebar: Me,
+		footer: Ne,
+		leftSidebarClassName: de,
+		rightSidebarClassName: fe,
+		footerClassName: pe,
+		children: /* @__PURE__ */ g(l, {
+			...c,
+			size: "sm",
+			value: N,
+			onChange: Ae,
+			className: "margin-15"
+		})
+	});
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
+		className: n("form-group", Q && "has-feedback", !!w && "has-error", !!T && "has-warning", le),
+		children: Z ? /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g("div", {
+			ref: z,
+			className: "display-inline-block",
+			style: U,
+			children: Z
+		}), Q ? /* @__PURE__ */ g("span", {
+			className: `help-block white-space-${E}`,
+			children: /* @__PURE__ */ g("span", { children: w || T })
+		}) : null] }) : /* @__PURE__ */ g(u, {
+			id: y,
+			triggerRef: z,
+			triggerStyle: U,
+			inputRef: R,
+			displayValue: q,
+			iconName: ae,
+			isSingleMode: A,
+			isClearable: he,
+			inputMaskProps: Oe,
+			mergedInputProps: $,
+			inputClassName: ce,
+			errorMessage: w,
+			warningMessage: T,
+			messageWhiteSpace: E,
+			onChange: Te,
+			onAddonClick: Y,
+			onClick: (e) => {
+				C?.onClick?.(e), Y();
+			},
+			onFocus: Ee,
+			onBlur: we,
+			onKeyDown: De,
+			onClear: J
+		})
+	}), F && Pe] });
+}, b = ({ props: e, value: t, draftValue: n, setDraftValue: r, apply: i, clear: o, close: c }) => s(e) ? {
+	trigger: e.trigger,
+	leftSidebar: e.leftSidebar,
+	rightSidebar: e.rightSidebar,
+	footer: e.footer,
+	renderProps: {
+		value: t,
+		draftValue: n,
+		setDraftValue: r,
+		apply: i,
+		clear: o,
+		close: c,
+		mode: e.mode || "single",
+		locale: e.locale || "en-GB"
+	}
+} : (a(e), {
+	trigger: e.trigger,
+	leftSidebar: e.leftSidebar,
+	rightSidebar: e.rightSidebar,
+	footer: e.footer,
+	renderProps: {
+		value: t,
+		draftValue: n,
+		setDraftValue: r,
+		apply: i,
+		clear: o,
+		close: c,
+		mode: e.mode,
+		locale: e.locale || "en-GB"
+	}
+});
+//#endregion
+export { l as DayPickerCalendar, y as default, c as supportedDayPickerLocales };
+
+//# sourceMappingURL=DayPicker.js.map