@smwb/ui-react 2.7.0 → 2.8.0

package/dist/headless/components/inputs/checkbox/checkbox.js

@@ -1,73 +1,98 @@
-import { jsx as e, jsxs as g } from "react/jsx-runtime";
-import v from "react";
-import b from "clsx";
-import { Icon as d } from "../../base/icon/icon.js";
-import { useId as y } from "../../../hooks/useId.js";
-import { TextFieldWrapper as z } from "../textField/textFieldWrapper.js";
-const $ = v.forwardRef(function(m, h) {
+import { jsx as c, jsxs as z } from "react/jsx-runtime";
+import x from "react";
+import u from "clsx";
+import { Icon as w } from "../../base/icon/icon.js";
+import { cancelToggle as F, forgetCancelledToggle as I } from "../../../utils/readOnlyToggle.js";
+import { useHelperText as j } from "../../../hooks/useHelperText.js";
+import { useId as q } from "../../../hooks/useId.js";
+import { useForkRef as $ } from "../../../hooks/useForkRef.js";
+import { useSafeLayoutEffect as D } from "../../../hooks/useSafeLayoutEffect.js";
+import { TextFieldWrapper as E } from "../textField/textFieldWrapper.js";
+const Q = x.forwardRef(function(e, _) {
   const {
-    label: o,
-    disabled: r,
-    readOnly: c,
-    required: t,
-    name: p,
-    id: x,
+    label: m,
+    disabled: o,
+    readOnly: i,
+    required: s,
+    name: y,
+    id: g,
     indeterminate: a,
-    className: w,
-    size: k = "medium",
-    color: _ = "primary",
-    onChange: s,
-    helperText: f,
-    error: n,
-    ...u
-  } = m, l = y(x), N = (i) => {
-    if (c) {
-      i.preventDefault();
+    className: p,
+    size: N = "medium",
+    color: C = "primary",
+    onChange: t,
+    helperText: l,
+    error: d,
+    "aria-describedby": T,
+    ...b
+  } = e, h = q(g), f = j(l, { describedBy: T }), n = x.useRef(null), B = $(_, n);
+  D(() => {
+    n.current && (n.current.indeterminate = !!a);
+  });
+  const R = (r) => {
+    if (r.target.indeterminate = !!a, i) {
+      I(r, e.checked);
       return;
     }
-    s == null || s(i, i.target.checked, m);
+    t == null || t(r, r.target.checked, e);
+  }, v = (r) => {
+    var k;
+    (k = e.onClick) == null || k.call(e, r), i && F(r, e.checked);
   };
-  return /* @__PURE__ */ e(z, { helperText: f, disabled: r, error: n, className: "smwb-text-field-checkbox", children: /* @__PURE__ */ g(
-    "label",
+  return /* @__PURE__ */ c(
+    E,
     {
-      htmlFor: l,
-      className: b(
-        "smwb-checkbox__wrapper",
-        `smwb-checkbox_size-${k}`,
-        `smwb-checkbox_color-${_}`,
-        w,
+      helperText: l,
+      helperTextId: f.id,
+      disabled: o,
+      error: d,
+      className: "smwb-text-field-checkbox",
+      children: /* @__PURE__ */ z(
+        "label",
         {
-          "smwb-disabled": r,
-          "smwb-readonly": c,
-          "smwb-indeterminate": a
+          htmlFor: h,
+          className: u(
+            "smwb-checkbox__wrapper",
+            `smwb-checkbox_size-${N}`,
+            `smwb-checkbox_color-${C}`,
+            p,
+            {
+              "smwb-disabled": o,
+              "smwb-readonly": i,
+              "smwb-indeterminate": a
+            }
+          ),
+          children: [
+            /* @__PURE__ */ c(
+              "input",
+              {
+                type: "checkbox",
+                id: h,
+                name: y,
+                className: "smwb-checkbox__input",
+                disabled: o,
+                readOnly: i,
+                required: s,
+                "aria-invalid": d || void 0,
+                "aria-required": s || void 0,
+                "aria-describedby": f.describedBy,
+                ref: B,
+                ...b,
+                "aria-readonly": i || b["aria-readonly"],
+                onChange: R,
+                onClick: v
+              }
+            ),
+            /* @__PURE__ */ c("span", { className: u("smwb-checkbox__btn", { "smwb-indeterminate": a }), children: a ? /* @__PURE__ */ c(w, { name: "remove", size: 18, className: "smwb-checkbox__icon", weight: 700 }) : /* @__PURE__ */ c(w, { name: "check", size: 17, className: "smwb-checkbox__icon", weight: 700 }) }),
+            m && /* @__PURE__ */ c("span", { className: "smwb-checkbox__label", children: m })
+          ]
         }
-      ),
-      children: [
-        /* @__PURE__ */ e(
-          "input",
-          {
-            type: "checkbox",
-            id: l,
-            name: p,
-            className: "smwb-checkbox__input",
-            disabled: r,
-            readOnly: c,
-            required: t,
-            "aria-invalid": n || void 0,
-            "aria-required": t || void 0,
-            ref: h,
-            ...u,
-            onChange: N
-          }
-        ),
-        /* @__PURE__ */ e("span", { className: b("smwb-checkbox__btn", { "smwb-indeterminate": a }), children: a ? /* @__PURE__ */ e(d, { name: "remove", size: 18, className: "smwb-checkbox__icon", weight: 700 }) : /* @__PURE__ */ e(d, { name: "check", size: 17, className: "smwb-checkbox__icon", weight: 700 }) }),
-        o && /* @__PURE__ */ e("span", { className: "smwb-checkbox__label", children: o })
-      ]
+      )
     }
-  ) });
+  );
 });
 export {
-  $ as Checkbox,
-  $ as default
+  Q as Checkbox,
+  Q as default
 };
 //# sourceMappingURL=checkbox.js.map

package/dist/headless/components/inputs/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useId } from \"../../../hooks/useId\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  indeterminate?: boolean;\n  className?: string;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: CheckboxProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, ref) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    indeterminate,\n    className,\n    size = \"medium\",\n    color = \"primary\",\n    onChange,\n    helperText,\n    error,\n    ...args\n  } = props;\n  const id = useId(idProp);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (readOnly) {\n      e.preventDefault();\n      return;\n    }\n    onChange?.(e, e.target.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper helperText={helperText} disabled={disabled} error={error} className=\"smwb-text-field-checkbox\">\n      <label\n        htmlFor={id}\n        className={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${size}`,\n          `smwb-checkbox_color-${color}`,\n          className,\n          {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n            \"smwb-indeterminate\": indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          className=\"smwb-checkbox__input\"\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          ref={ref}\n          {...args}\n          onChange={handleChange}\n        />\n        <span className={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": indeterminate })}>\n          {indeterminate ? (\n            <Icon name=\"remove\" size={18} className=\"smwb-checkbox__icon\" weight={700} />\n          ) : (\n            <Icon name=\"check\" size={17} className=\"smwb-checkbox__icon\" weight={700} />\n          )}\n        </span>\n        {label && <span className=\"smwb-checkbox__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","ref","label","disabled","readOnly","required","name","idProp","indeterminate","className","size","color","onChange","helperText","error","args","id","useId","handleChange","e","TextFieldWrapper","jsxs","cn","jsx","Icon"],"mappings":";;;;;;AA0BO,MAAMA,IAAWC,EAAM,WAA4C,SAAkBC,GAAOC,GAAK;AACtG,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf,GACEgB,IAAKC,EAAMV,CAAM,GAEjBW,IAAe,CAACC,MAA2C;AAC/D,QAAIf,GAAU;AACZ,MAAAe,EAAE,eAAA;AACF;AAAA,IACF;AACA,IAAAP,KAAA,QAAAA,EAAWO,GAAGA,EAAE,OAAO,SAASnB;AAAA,EAClC;AAEA,2BACGoB,GAAA,EAAiB,YAAAP,GAAwB,UAAAV,GAAoB,OAAAW,GAAc,WAAU,4BACpF,UAAA,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAASL;AAAA,MACT,WAAWM;AAAA,QACT;AAAA,QACA,sBAAsBZ,CAAI;AAAA,QAC1B,uBAAuBC,CAAK;AAAA,QAC5BF;AAAA,QACA;AAAA,UACE,iBAAiBN;AAAA,UACjB,iBAAiBC;AAAA,UACjB,sBAAsBI;AAAA,QAAA;AAAA,MACxB;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,IAAAP;AAAA,YACA,MAAAV;AAAA,YACA,WAAU;AAAA,YACV,UAAAH;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACA,gBAAcS,KAAS;AAAA,YACvB,iBAAeT,KAAY;AAAA,YAC3B,KAAAJ;AAAA,YACC,GAAGc;AAAA,YACJ,UAAUG;AAAA,UAAA;AAAA,QAAA;AAAA,QAEZ,gBAAAK,EAAC,QAAA,EAAK,WAAWD,EAAG,sBAAsB,EAAE,sBAAsBd,EAAA,CAAe,GAC9E,UAAAA,IACC,gBAAAe,EAACC,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,WAAU,uBAAsB,QAAQ,IAAA,CAAK,sBAE1EA,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,WAAU,uBAAsB,QAAQ,KAAK,GAE9E;AAAA,QACCtB,KAAS,gBAAAqB,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAArB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE5D;AAEJ,CAAC;"}
+{"version":3,"file":"checkbox.js","sources":["../../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import React, { InputHTMLAttributes } from \"react\";\nimport cn from \"clsx\";\nimport Icon from \"../../base/icon/icon\";\nimport { cancelToggle, forgetCancelledToggle } from \"../../../utils/readOnlyToggle\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { useHelperText } from \"../../../hooks/useHelperText\";\nimport { useId } from \"../../../hooks/useId\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"size\"> {\n  label?: string;\n  disabled?: boolean;\n  /**\n   * Keeps the checkbox as it is: clicks on it or its label and Space change nothing, and `onChange` is not called.\n   * It stays focusable, and its input tells assistive technology it is read-only (`aria-readonly`).\n   */\n  readOnly?: boolean;\n  required?: boolean;\n  name?: string;\n  id?: string;\n  /**\n   * Shows the checkbox as partly checked, as for a \"select all\" over a partial selection: drawn with a dash and\n   * announced as \"mixed\" by screen readers, whatever `checked` is. A click does not clear it: the click toggles\n   * `checked` as usual and `onChange` reports the new `checked`, while the checkbox stays mixed until this prop turns\n   * false.\n   */\n  indeterminate?: boolean;\n  className?: string;\n  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, data: CheckboxProps) => void;\n  helperText?: React.ReactNode;\n  error?: boolean;\n}\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(props, forwardedRef) {\n  const {\n    label,\n    disabled,\n    readOnly,\n    required,\n    name,\n    id: idProp,\n    indeterminate,\n    className,\n    size = \"medium\",\n    color = \"primary\",\n    onChange,\n    helperText,\n    error,\n    \"aria-describedby\": ariaDescribedBy,\n    ...args\n  } = props;\n  const id = useId(idProp);\n  const helper = useHelperText(helperText, { describedBy: ariaDescribedBy });\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const ref = useForkRef(forwardedRef, inputRef);\n  // `indeterminate` is a DOM property with no attribute, so no markup carries it:\n  // set it on the input after every render.\n  useSafeLayoutEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = Boolean(indeterminate);\n  });\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    // A click clears the input's indeterminate property; the prop still decides it.\n    e.target.indeterminate = Boolean(indeterminate);\n    if (readOnly) {\n      forgetCancelledToggle(e, props.checked);\n      return;\n    }\n    onChange?.(e, e.target.checked, props);\n  };\n\n  const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n    props.onClick?.(e);\n    if (readOnly) cancelToggle(e, props.checked);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={helperText}\n      helperTextId={helper.id}\n      disabled={disabled}\n      error={error}\n      className=\"smwb-text-field-checkbox\"\n    >\n      <label\n        htmlFor={id}\n        className={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${size}`,\n          `smwb-checkbox_color-${color}`,\n          className,\n          {\n            \"smwb-disabled\": disabled,\n            \"smwb-readonly\": readOnly,\n            \"smwb-indeterminate\": indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={name}\n          className=\"smwb-checkbox__input\"\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          aria-invalid={error || undefined}\n          aria-required={required || undefined}\n          aria-describedby={helper.describedBy}\n          ref={ref}\n          {...args}\n          aria-readonly={readOnly || args[\"aria-readonly\"]}\n          onChange={handleChange}\n          onClick={handleClick}\n        />\n        <span className={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": indeterminate })}>\n          {indeterminate ? (\n            <Icon name=\"remove\" size={18} className=\"smwb-checkbox__icon\" weight={700} />\n          ) : (\n            <Icon name=\"check\" size={17} className=\"smwb-checkbox__icon\" weight={700} />\n          )}\n        </span>\n        {label && <span className=\"smwb-checkbox__label\">{label}</span>}\n      </label>\n    </TextFieldWrapper>\n  );\n});\n\nexport default Checkbox;\n"],"names":["Checkbox","React","props","forwardedRef","label","disabled","readOnly","required","name","idProp","indeterminate","className","size","color","onChange","helperText","error","ariaDescribedBy","args","id","useId","helper","useHelperText","inputRef","ref","useForkRef","useSafeLayoutEffect","handleChange","e","forgetCancelledToggle","handleClick","_a","cancelToggle","jsx","TextFieldWrapper","jsxs","cn","Icon"],"mappings":";;;;;;;;;;AAwCO,MAAMA,IAAWC,EAAM,WAA4C,SAAkBC,GAAOC,GAAc;AAC/G,QAAM;AAAA,IACJ,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,IAAIC;AAAA,IACJ,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGC;AAAA,EAAA,IACDhB,GACEiB,IAAKC,EAAMX,CAAM,GACjBY,IAASC,EAAcP,GAAY,EAAE,aAAaE,GAAiB,GAEnEM,IAAWtB,EAAM,OAAyB,IAAI,GAC9CuB,IAAMC,EAAWtB,GAAcoB,CAAQ;AAG7C,EAAAG,EAAoB,MAAM;AACxB,IAAIH,EAAS,YAASA,EAAS,QAAQ,gBAAgB,EAAQb;AAAA,EACjE,CAAC;AAED,QAAMiB,IAAe,CAACC,MAA2C;AAG/D,QADAA,EAAE,OAAO,gBAAgB,EAAQlB,GAC7BJ,GAAU;AACZ,MAAAuB,EAAsBD,GAAG1B,EAAM,OAAO;AACtC;AAAA,IACF;AACA,IAAAY,KAAA,QAAAA,EAAWc,GAAGA,EAAE,OAAO,SAAS1B;AAAA,EAClC,GAEM4B,IAAc,CAACF,MAA0C;;AAC7D,KAAAG,IAAA7B,EAAM,YAAN,QAAA6B,EAAA,KAAA7B,GAAgB0B,IACZtB,KAAU0B,EAAaJ,GAAG1B,EAAM,OAAO;AAAA,EAC7C;AAEA,SACE,gBAAA+B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,YAAAnB;AAAA,MACA,cAAcM,EAAO;AAAA,MACrB,UAAAhB;AAAA,MACA,OAAAW;AAAA,MACA,WAAU;AAAA,MAEV,UAAA,gBAAAmB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAAShB;AAAA,UACT,WAAWiB;AAAA,YACT;AAAA,YACA,sBAAsBxB,CAAI;AAAA,YAC1B,uBAAuBC,CAAK;AAAA,YAC5BF;AAAA,YACA;AAAA,cACE,iBAAiBN;AAAA,cACjB,iBAAiBC;AAAA,cACjB,sBAAsBI;AAAA,YAAA;AAAA,UACxB;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAuB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,IAAAd;AAAA,gBACA,MAAAX;AAAA,gBACA,WAAU;AAAA,gBACV,UAAAH;AAAA,gBACA,UAAAC;AAAA,gBACA,UAAAC;AAAA,gBACA,gBAAcS,KAAS;AAAA,gBACvB,iBAAeT,KAAY;AAAA,gBAC3B,oBAAkBc,EAAO;AAAA,gBACzB,KAAAG;AAAA,gBACC,GAAGN;AAAA,gBACJ,iBAAeZ,KAAYY,EAAK,eAAe;AAAA,gBAC/C,UAAUS;AAAA,gBACV,SAASG;AAAA,cAAA;AAAA,YAAA;AAAA,YAEX,gBAAAG,EAAC,QAAA,EAAK,WAAWG,EAAG,sBAAsB,EAAE,sBAAsB1B,EAAA,CAAe,GAC9E,UAAAA,IACC,gBAAAuB,EAACI,GAAA,EAAK,MAAK,UAAS,MAAM,IAAI,WAAU,uBAAsB,QAAQ,IAAA,CAAK,sBAE1EA,GAAA,EAAK,MAAK,SAAQ,MAAM,IAAI,WAAU,uBAAsB,QAAQ,KAAK,GAE9E;AAAA,YACCjC,KAAS,gBAAA6B,EAAC,QAAA,EAAK,WAAU,wBAAwB,UAAA7B,EAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAC1D;AAAA,EAAA;AAGN,CAAC;"}

package/dist/headless/components/inputs/datePicker/datePicker.js

@@ -1,231 +1,237 @@
-import { jsx as t, jsxs as A, Fragment as ke } from "react/jsx-runtime";
-import be, { useMemo as x, useState as p, useRef as N, useCallback as i } from "react";
-import { useFloating as ve, autoUpdate as we } from "@floating-ui/react";
-import De from "react-transition-group/Transition";
-import { resolvePlacement as Ce, buildFloatingMiddleware as Re } from "../../../utils/floating.js";
-import { useSafeLayoutEffect as j } from "../../../hooks/useSafeLayoutEffect.js";
-import { useForkRef as z } from "../../../hooks/useForkRef.js";
-import { DataPickerHeader as Pe } from "./dataPickerHeader.js";
-import { DataPickerDays as Fe } from "./dataPickerDays.js";
-import { DatePickerList as H } from "./datePickerList.js";
-import { isValidDate as V, setMonth as Me, setYear as Se, getMonths as xe, getYears as Ve, getDisplayDate as U } from "./utils.js";
+import { jsx as n, jsxs as N, Fragment as ke } from "react/jsx-runtime";
+import be, { useMemo as x, useState as h, useRef as j, useCallback as c, useEffect as we } from "react";
+import { useFloating as De, autoUpdate as Ce } from "@floating-ui/react";
+import Re from "react-transition-group/Transition";
+import { resolvePlacement as Pe, buildFloatingMiddleware as Fe } from "../../../utils/floating.js";
+import { useSafeLayoutEffect as z } from "../../../hooks/useSafeLayoutEffect.js";
+import { useForkRef as H } from "../../../hooks/useForkRef.js";
+import { isTopOverlayLayer as Ee } from "../../../utils/overlayLayer.js";
+import { DataPickerHeader as Le } from "./dataPickerHeader.js";
+import { DataPickerDays as Me } from "./dataPickerDays.js";
+import { DatePickerList as K } from "./datePickerList.js";
+import { isValidDate as O, setMonth as Se, setYear as xe, getMonths as Oe, getYears as Ve, getDisplayDate as U } from "./utils.js";
 import { DataPickerInput as Be } from "./dataPickerInput.js";
-import { DatePickerIconButton as Le } from "./datePickerIconButton.js";
-import { Icon as Oe } from "../../base/icon/icon.js";
-import { createPortal as Ye } from "react-dom";
-import { TextField as Ee } from "../textField/textField.js";
-import { ClickAwayListener as Ie } from "../../clickAwayListener/clickAwayListener.js";
-var Te = /* @__PURE__ */ ((l) => (l.days = "days", l.months = "months", l.years = "years", l))(Te || {});
-const _e = (l) => ({
-  transition: `opacity ${l}ms ease-in-out`,
+import { DatePickerIconButton as Te } from "./datePickerIconButton.js";
+import { Icon as Ye } from "../../base/icon/icon.js";
+import { createPortal as Ie } from "react-dom";
+import { TextField as _e } from "../textField/textField.js";
+import { ClickAwayListener as $e } from "../../clickAwayListener/clickAwayListener.js";
+var Ae = /* @__PURE__ */ ((d) => (d.days = "days", d.months = "months", d.years = "years", d))(Ae || {});
+const Ne = (d) => ({
+  transition: `opacity ${d}ms ease-in-out`,
   opacity: 0
-}), $e = {
+}), je = {
   entering: { opacity: 1 },
   entered: { opacity: 1 },
   exiting: { opacity: 0 }
-}, nt = be.forwardRef(function(C, q) {
+}, it = be.forwardRef(function(R, q) {
   const {
-    value: R,
-    onChange: f,
+    value: P,
+    onChange: p,
     showDaysOutsideMonth: G,
     disablePast: J,
-    disableFuture: K,
-    weekStartsOn: Q = 1,
-    placement: W = "bottom-start",
-    disabled: o,
-    disableCalendar: P,
-    calendarAriaLabel: X = "Choose date",
-    minDate: Z,
-    maxDate: ee,
-    isDateDisabled: te,
-    locale: y,
-    format: d,
-    range: g,
-    rangeValue: F,
-    onRangeChange: h,
-    calendarIcon: B,
+    disableFuture: Q,
+    weekStartsOn: W = 1,
+    placement: X = "bottom-start",
+    disabled: r,
+    disableCalendar: F,
+    calendarAriaLabel: Z = "Choose date",
+    minDate: ee,
+    maxDate: te,
+    isDateDisabled: ne,
+    locale: v,
+    format: u,
+    range: y,
+    rangeValue: E,
+    onRangeChange: k,
+    calendarIcon: V,
     onBlur: ae,
-    ...L
-  } = C, c = x(() => R === void 0 ? void 0 : new Date(R), [R]), M = F !== void 0, [ne, oe] = p([void 0, void 0]), r = M && F ? F : ne, [s, k] = p(() => V(c) ? c : /* @__PURE__ */ new Date()), [m, b] = p(
+    ...B
+  } = R, m = x(() => P === void 0 ? void 0 : new Date(P), [P]), L = E !== void 0, [oe, re] = h([void 0, void 0]), s = L && E ? E : oe, [i, b] = h(() => O(m) ? m : /* @__PURE__ */ new Date()), [f, w] = h(
     "days"
     /* days */
-  ), [O, v] = p(!1), Y = N(null), S = N(null), E = Ce(W), { refs: I, floatingStyles: re } = ve({
-    open: O,
-    placement: E.placement,
-    whileElementsMounted: we,
-    middleware: Re(E)
-  }), T = z(Y, I.setReference, q), se = z(S, I.setFloating), [_, ie] = p();
-  j(() => {
-    ie(document.body);
-  }, []), j(() => {
-    o || k(V(c) ? c : /* @__PURE__ */ new Date());
-  }, [c, o]);
-  const le = i((e) => {
-    k(e);
-  }, []), ce = i(() => {
-    b(
-      m === "months" ? "days" : "months"
+  ), [T, g] = h(!1), M = j(null), D = j(null), Y = Pe(X), { refs: I, floatingStyles: se } = De({
+    open: T,
+    placement: Y.placement,
+    whileElementsMounted: Ce,
+    middleware: Fe(Y)
+  }), _ = H(M, I.setReference, q), ie = H(D, I.setFloating), [$, le] = h();
+  z(() => {
+    le(document.body);
+  }, []), z(() => {
+    r || b(O(m) ? m : /* @__PURE__ */ new Date());
+  }, [m, r]);
+  const ce = c((e) => {
+    b(e);
+  }, []), de = c(() => {
+    w(
+      f === "months" ? "days" : "months"
       /* months */
     );
-  }, [m]), de = i(() => {
-    b(
-      m === "years" ? "days" : "years"
+  }, [f]), me = c(() => {
+    w(
+      f === "years" ? "days" : "years"
       /* years */
     );
-  }, [m]), me = i(
+  }, [f]), ue = c(
     (e) => {
-      k(Me(s, e)), b(
+      b(Se(i, e)), w(
         "days"
         /* days */
       );
     },
-    [s]
-  ), ue = i(
+    [i]
+  ), fe = c(
     (e) => {
-      k(Se(s, e)), b(
+      b(xe(i, e)), w(
         "days"
         /* days */
       );
     },
-    [s]
-  ), fe = i(
+    [i]
+  ), pe = c(
     (e, a) => {
-      if (g) {
+      if (y) {
         if (!a)
           return;
-        const [n, D] = r;
-        let u;
-        !n || n && D ? u = [a, void 0] : u = V(n) && a.getTime() < n.getTime() ? [a, n] : [n, a], M || oe(u), h == null || h(u), u[0] && u[1] && v(!1);
+        const [t, l] = s;
+        let o;
+        !t || t && l ? o = [a, void 0] : o = O(t) && a.getTime() < t.getTime() ? [a, t] : [t, a], L || re(o), k == null || k(o), o[0] && o[1] && g(!1);
         return;
       }
-      f == null || f(e, a, C), v(!1);
+      p == null || p(e, a, R), g(!1);
     },
-    [f, C, g, r, M, h]
-  ), $ = i(() => {
-    o || v((e) => !e);
-  }, [o]), ge = i((e) => {
-    var n, D;
+    [p, R, y, s, L, k]
+  ), A = c(() => {
+    r || g((e) => !e);
+  }, [r]), ye = c((e) => {
+    var t, l;
     const a = e.target;
-    (n = S.current) != null && n.contains(a) || (D = Y.current) != null && D.contains(a) || v(!1);
-  }, []), pe = x(() => xe(y), [y]), ye = x(() => Ve((/* @__PURE__ */ new Date()).getFullYear(), 100), []);
-  let w = null;
-  switch (m) {
+    (t = D.current) != null && t.contains(a) || (l = M.current) != null && l.contains(a) || g(!1);
+  }, []), S = T && !r && !F;
+  we(() => {
+    if (!S)
+      return;
+    const e = (a) => {
+      var o;
+      const t = D.current;
+      if (a.key !== "Escape" || !t || !Ee(t))
+        return;
+      g(!1);
+      const l = document.activeElement;
+      (!l || l === document.body || t.contains(l)) && ((o = M.current) == null || o.focus());
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [S]);
+  const ge = x(() => Oe(v), [v]), he = x(() => Ve((/* @__PURE__ */ new Date()).getFullYear(), 100), []);
+  let C = null;
+  switch (f) {
     case "days":
-      w = /* @__PURE__ */ t(
-        Fe,
+      C = /* @__PURE__ */ n(
+        Me,
         {
-          viewValue: s,
-          value: c,
+          viewValue: i,
+          value: m,
           showDaysOutsideMonth: G,
-          onChange: fe,
+          onChange: pe,
           disablePast: J,
-          disableFuture: K,
-          weekStartsOn: Q,
-          minDate: Z,
-          maxDate: ee,
-          isDateDisabled: te,
-          locale: y,
-          range: g,
-          rangeStart: r[0],
-          rangeEnd: r[1]
+          disableFuture: Q,
+          weekStartsOn: W,
+          minDate: ee,
+          maxDate: te,
+          isDateDisabled: ne,
+          locale: v,
+          range: y,
+          rangeStart: s[0],
+          rangeEnd: s[1]
         }
       );
       break;
     case "months":
-      w = /* @__PURE__ */ t(H, { value: s.getMonth(), items: pe, onChange: me });
+      C = /* @__PURE__ */ n(K, { value: i.getMonth(), items: ge, onChange: ue });
       break;
     case "years":
-      w = /* @__PURE__ */ t(H, { value: s.getFullYear(), items: ye, onChange: ue });
+      C = /* @__PURE__ */ n(K, { value: i.getFullYear(), items: he, onChange: fe });
       break;
   }
-  const he = g && (r[0] || r[1]) ? `${U(r[0], d)} – ${U(r[1], d)}` : "";
-  return /* @__PURE__ */ A(ke, { children: [
-    g ? /* @__PURE__ */ t(
-      Ee,
+  const ve = y && (s[0] || s[1]) ? `${U(s[0], u)} – ${U(s[1], u)}` : "";
+  return /* @__PURE__ */ N(ke, { children: [
+    y ? /* @__PURE__ */ n(
+      _e,
       {
-        ref: T,
-        value: he,
+        ref: _,
+        value: ve,
         readOnly: !0,
         onChange: () => {
         },
-        disabled: !!o,
-        placeholder: d ? `${d} – ${d}` : void 0,
-        endAdornment: !P && /* @__PURE__ */ t(
-          Le,
+        disabled: !!r,
+        placeholder: u ? `${u} – ${u}` : void 0,
+        endAdornment: !F && /* @__PURE__ */ n(
+          Te,
           {
             edge: "end",
-            onClick: $,
-            disabled: !!o,
+            onClick: A,
+            disabled: !!r,
             "data-testid": "date-picker-icon-button",
-            children: B || /* @__PURE__ */ t(Oe, { name: "calendar_today", fill: 1, weight: 500, size: 24 })
+            children: V || /* @__PURE__ */ n(Ye, { name: "calendar_today", fill: 1, weight: 500, size: 24 })
           }
         ),
-        ...L
+        ...B
       }
-    ) : /* @__PURE__ */ t(
+    ) : /* @__PURE__ */ n(
       Be,
       {
-        ref: T,
-        value: c,
-        onChange: f,
+        ref: _,
+        value: m,
+        onChange: p,
         onBlur: ae,
-        onToggle: $,
-        disabled: o,
-        disableCalendar: P,
-        format: d,
-        calendarIcon: B,
-        ...L
+        onToggle: A,
+        disabled: r,
+        disableCalendar: F,
+        format: u,
+        calendarIcon: V,
+        ...B
       }
     ),
-    _ ? Ye(
-      /* @__PURE__ */ t(
-        De,
+    $ ? Ie(
+      /* @__PURE__ */ n(Re, { nodeRef: D, in: S, timeout: 150, mountOnEnter: !0, unmountOnExit: !0, children: (e) => /* @__PURE__ */ n($e, { onClickAway: ye, children: /* @__PURE__ */ n(
+        "div",
         {
-          nodeRef: S,
-          in: O && !o && !P,
-          timeout: 150,
-          mountOnEnter: !0,
-          unmountOnExit: !0,
-          children: (e) => /* @__PURE__ */ t(Ie, { onClickAway: ge, children: /* @__PURE__ */ t(
-            "div",
-            {
-              ref: se,
-              className: "smwb-date-picker",
-              style: {
-                ...re,
-                ..._e(150),
-                ...$e[e]
-              },
-              "data-testid": "date-picker",
-              "data-smwb-overlay-layer": "",
-              role: "dialog",
-              "aria-modal": "false",
-              "aria-label": X,
-              children: /* @__PURE__ */ A("div", { className: "smwb-date-picker__inner", children: [
-                /* @__PURE__ */ t(
-                  Pe,
-                  {
-                    viewValue: s,
-                    locale: y,
-                    openView: m,
-                    onChange: le,
-                    onMonthLabelClick: ce,
-                    onYearLabelClick: de
-                  }
-                ),
-                /* @__PURE__ */ t("div", { className: "smwb-date-picker__body", children: w })
-              ] })
-            }
-          ) })
+          ref: ie,
+          className: "smwb-date-picker",
+          style: {
+            ...se,
+            ...Ne(150),
+            ...je[e]
+          },
+          "data-testid": "date-picker",
+          "data-smwb-overlay-layer": "",
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-label": Z,
+          children: /* @__PURE__ */ N("div", { className: "smwb-date-picker__inner", children: [
+            /* @__PURE__ */ n(
+              Le,
+              {
+                viewValue: i,
+                locale: v,
+                openView: f,
+                onChange: ce,
+                onMonthLabelClick: de,
+                onYearLabelClick: me
+              }
+            ),
+            /* @__PURE__ */ n("div", { className: "smwb-date-picker__body", children: C })
+          ] })
         }
-      ),
-      _
+      ) }) }),
+      $
     ) : null
   ] });
 });
 export {
-  nt as DatePicker,
-  Te as OpenView,
-  nt as default
+  it as DatePicker,
+  Ae as OpenView,
+  it as default
 };
 //# sourceMappingURL=datePicker.js.map