@smwb/ui-solid 0.12.0 → 0.13.0

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

@@ -1,27 +1,43 @@
-import { createComponent as n, setAttribute as b, use as k, spread as v, mergeProps as y, insert as a, effect as $, className as u, template as f } from "solid-js/web";
+import { createComponent as n, setAttribute as g, use as T, spread as $, mergeProps as z, insert as d, effect as O, className as h, template as _ } from "solid-js/web";
 import '../../../assets/styles/less/components/checkbox/checkbox.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                           */
-import { mergeProps as C, splitProps as z, Show as h } from "solid-js";
-import g from "clsx";
-import { TextFieldWrapper as q } from "../textField/textFieldWrapper.js";
-import { createId as T } from "../../../primitives/createId.js";
-import { mergeRefs as O } from "../../../primitives/mergeRefs.js";
-import { Icon as p } from "../../base/icon/icon.js";
-var P = /* @__PURE__ */ f("<span class=smwb-checkbox__label>"), I = /* @__PURE__ */ f("<label><input type=checkbox class=smwb-checkbox__input><span>");
-function E(o) {
-  const w = C({
-    size: "medium",
-    color: "primary"
-  }, o), [e, _] = z(w, ["label", "disabled", "readOnly", "required", "name", "id", "indeterminate", "class", "size", "color", "onChange", "helperText", "error", "ref"]), l = T(e.id), x = (r) => {
-    if (e.readOnly) {
-      r.preventDefault();
-      return;
+import { mergeProps as q, splitProps as B, createEffect as P, Show as p } from "solid-js";
+import f from "clsx";
+import { TextFieldWrapper as I } from "../textField/textFieldWrapper.js";
+import { createHelperText as H } from "../../../primitives/createHelperText.js";
+import { createId as S } from "../../../primitives/createId.js";
+import { mergeRefs as x } from "../../../primitives/mergeRefs.js";
+import { callHandler as A } from "../../../primitives/callHandler.js";
+import { Icon as w } from "../../base/icon/icon.js";
+var D = /* @__PURE__ */ _("<span class=smwb-checkbox__label>"), E = /* @__PURE__ */ _("<label><input type=checkbox class=smwb-checkbox__input><span>");
+function U(a) {
+  let o;
+  const k = q(
+    {
+      size: "medium",
+      color: "primary"
+    },
+    a,
+    // The input's ref: the caller's, and ours for the indeterminate property.
+    {
+      ref: x(a.ref, (r) => o = r)
     }
-    e.onChange?.(r, r.currentTarget.checked, o);
+  ), [e, y] = B(k, ["label", "disabled", "readOnly", "onClick", "required", "name", "id", "indeterminate", "class", "size", "color", "onChange", "helperText", "error", "aria-describedby", "ref"]), c = S(e.id), l = H(() => e.helperText, {
+    describedBy: () => e["aria-describedby"]
+  }), v = (r) => {
+    A(e.onClick, r), e.readOnly && r.preventDefault();
+  }, C = (r) => {
+    r.currentTarget.indeterminate = !!e.indeterminate, !e.readOnly && e.onChange?.(r, r.currentTarget.checked, a);
   };
-  return n(q, {
+  return P(() => {
+    const r = !!e.indeterminate;
+    o && (o.indeterminate = r);
+  }), n(I, {
     get helperText() {
-      return e.helperText;
+      return l.text();
+    },
+    get helperTextId() {
+      return l.id;
     },
     get disabled() {
       return e.disabled;
@@ -31,10 +47,10 @@ function E(o) {
     },
     class: "smwb-text-field-checkbox",
     get children() {
-      var r = I(), i = r.firstChild, s = i.nextSibling;
-      b(r, "for", l);
-      var c = O(e.ref);
-      return typeof c == "function" && k(c, i), b(i, "id", l), v(i, y({
+      var r = E(), i = r.firstChild, s = i.nextSibling;
+      g(r, "for", c);
+      var m = x(e.ref);
+      return typeof m == "function" && T(m, i), g(i, "id", c), $(i, z({
         get name() {
           return e.name;
         },
@@ -52,15 +68,22 @@ function E(o) {
         },
         get "aria-required"() {
           return e.required || void 0;
+        },
+        get "aria-describedby"() {
+          return l.describedBy();
         }
-      }, _, {
-        onChange: x
-      }), !1, !1), a(s, n(h, {
+      }, y, {
+        get "aria-readonly"() {
+          return e.readOnly || void 0;
+        },
+        onChange: C,
+        onClick: v
+      }), !1, !1), d(s, n(p, {
         get when() {
           return e.indeterminate;
         },
         get fallback() {
-          return n(p, {
+          return n(w, {
             name: "check",
             size: 17,
             class: "smwb-checkbox__icon",
@@ -68,30 +91,30 @@ function E(o) {
           });
         },
         get children() {
-          return n(p, {
+          return n(w, {
             name: "remove",
             size: 18,
             class: "smwb-checkbox__icon",
             weight: 700
           });
         }
-      })), a(r, n(h, {
+      })), d(r, n(p, {
         get when() {
           return e.label;
         },
         get children() {
-          var t = P();
-          return a(t, () => e.label), t;
+          var t = D();
+          return d(t, () => e.label), t;
         }
-      }), null), $((t) => {
-        var m = g("smwb-checkbox__wrapper", `smwb-checkbox_size-${e.size}`, `smwb-checkbox_color-${e.color}`, e.class, {
+      }), null), O((t) => {
+        var b = f("smwb-checkbox__wrapper", `smwb-checkbox_size-${e.size}`, `smwb-checkbox_color-${e.color}`, e.class, {
           "smwb-disabled": e.disabled,
           "smwb-readonly": e.readOnly,
           "smwb-indeterminate": e.indeterminate
-        }), d = g("smwb-checkbox__btn", {
+        }), u = f("smwb-checkbox__btn", {
           "smwb-indeterminate": e.indeterminate
         });
-        return m !== t.e && u(r, t.e = m), d !== t.t && u(s, t.t = d), t;
+        return b !== t.e && h(r, t.e = b), u !== t.t && h(s, t.t = u), t;
       }, {
         e: void 0,
         t: void 0
@@ -100,6 +123,6 @@ function E(o) {
   });
 }
 export {
-  E as Checkbox
+  U as Checkbox
 };
 //# sourceMappingURL=checkbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type SelectionChangeEvent = Event & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface CheckboxProps extends Omit<JSX.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  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: CheckboxProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Checkbox(props: CheckboxProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor }, props);\n  const [local, args] = splitProps(merged, [\n    \"label\",\n    \"disabled\",\n    \"readOnly\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"indeterminate\",\n    \"class\",\n    \"size\",\n    \"color\",\n    \"onChange\",\n    \"helperText\",\n    \"error\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    if (local.readOnly) {\n      event.preventDefault();\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  return (\n    <TextFieldWrapper\n      helperText={local.helperText}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <label\n        for={id}\n        class={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${local.size}`,\n          `smwb-checkbox_color-${local.color}`,\n          local.class,\n          {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n            \"smwb-indeterminate\": local.indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={local.name}\n          class=\"smwb-checkbox__input\"\n          disabled={local.disabled}\n          readonly={local.readOnly}\n          required={local.required}\n          aria-invalid={local.error || undefined}\n          aria-required={local.required || undefined}\n          ref={mergeRefs(local.ref)}\n          {...args}\n          onChange={handleChange}\n        />\n        <span class={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": local.indeterminate })}>\n          <Show\n            when={local.indeterminate}\n            fallback={<Icon name=\"check\" size={17} class=\"smwb-checkbox__icon\" weight={700} />}\n          >\n            <Icon name=\"remove\" size={18} class=\"smwb-checkbox__icon\" weight={700} />\n          </Show>\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-checkbox__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Checkbox;\n"],"names":["Checkbox","props","merged","mergeProps","size","color","local","args","splitProps","id","createId","handleChange","event","readOnly","preventDefault","onChange","currentTarget","checked","_$createComponent","TextFieldWrapper","helperText","disabled","error","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$setAttribute","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","name","readonly","required","undefined","_$insert","Show","when","indeterminate","fallback","Icon","weight","label","_el$4","_tmpl$","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t"],"mappings":"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"}
+{"version":3,"file":"checkbox.js","sources":["../../../../src/components/inputs/checkbox/checkbox.tsx"],"sourcesContent":["import { type JSX, Show, createEffect, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { TextFieldWrapper } from \"../textField/textFieldWrapper\";\nimport { createHelperText } from \"../../../primitives/createHelperText\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type SelectionControlSize = \"small\" | \"medium\" | \"large\";\nexport type SelectionControlColor = \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport type SelectionChangeEvent = Event & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface CheckboxProps extends Omit<JSX.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  size?: SelectionControlSize;\n  color?: SelectionControlColor;\n  /** Unified handler: `(event, checked, data)`. */\n  onChange?: (event: SelectionChangeEvent, checked: boolean, data: CheckboxProps) => void;\n  helperText?: JSX.Element;\n  error?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function Checkbox(props: CheckboxProps): JSX.Element {\n  let input: HTMLInputElement | undefined;\n  const merged = mergeProps(\n    { size: \"medium\" as SelectionControlSize, color: \"primary\" as SelectionControlColor },\n    props,\n    // The input's ref: the caller's, and ours for the indeterminate property.\n    { ref: mergeRefs<HTMLInputElement>(props.ref, (el) => (input = el)) }\n  );\n  const [local, args] = splitProps(merged, [\n    \"label\",\n    \"disabled\",\n    \"readOnly\",\n    \"onClick\",\n    \"required\",\n    \"name\",\n    \"id\",\n    \"indeterminate\",\n    \"class\",\n    \"size\",\n    \"color\",\n    \"onChange\",\n    \"helperText\",\n    \"error\",\n    \"aria-describedby\",\n    \"ref\",\n  ]);\n  const id = createId(local.id);\n  const helper = createHelperText(() => local.helperText, { describedBy: () => local[\"aria-describedby\"] });\n\n  // `readonly` means nothing to a checkbox input: a click on it or on its label, and Space, still\n  // toggle it. Cancel the click; the browser then puts the previous state back.\n  const handleClick: JSX.EventHandler<HTMLInputElement, MouseEvent> = (event) => {\n    callHandler(local.onClick, event);\n    if (local.readOnly) event.preventDefault();\n  };\n\n  const handleChange: JSX.EventHandler<HTMLInputElement, Event> = (event) => {\n    // A click clears the input's indeterminate property; the prop still decides it.\n    event.currentTarget.indeterminate = Boolean(local.indeterminate);\n    if (local.readOnly) {\n      return;\n    }\n    local.onChange?.(event, event.currentTarget.checked, props);\n  };\n\n  // `indeterminate` is a DOM property with no attribute, so no markup carries it:\n  // set it on the input, after hydration too, and whenever the prop changes.\n  createEffect(() => {\n    const indeterminate = Boolean(local.indeterminate);\n    if (input) input.indeterminate = indeterminate;\n  });\n\n  return (\n    <TextFieldWrapper\n      helperText={helper.text()}\n      helperTextId={helper.id}\n      disabled={local.disabled}\n      error={local.error}\n      class=\"smwb-text-field-checkbox\"\n    >\n      <label\n        for={id}\n        class={cn(\n          \"smwb-checkbox__wrapper\",\n          `smwb-checkbox_size-${local.size}`,\n          `smwb-checkbox_color-${local.color}`,\n          local.class,\n          {\n            \"smwb-disabled\": local.disabled,\n            \"smwb-readonly\": local.readOnly,\n            \"smwb-indeterminate\": local.indeterminate,\n          }\n        )}\n      >\n        <input\n          type=\"checkbox\"\n          id={id}\n          name={local.name}\n          class=\"smwb-checkbox__input\"\n          disabled={local.disabled}\n          readonly={local.readOnly}\n          required={local.required}\n          aria-invalid={local.error || undefined}\n          aria-required={local.required || undefined}\n          aria-describedby={helper.describedBy()}\n          ref={mergeRefs(local.ref)}\n          {...args}\n          aria-readonly={local.readOnly || undefined}\n          onChange={handleChange}\n          onClick={handleClick}\n        />\n        <span class={cn(\"smwb-checkbox__btn\", { \"smwb-indeterminate\": local.indeterminate })}>\n          <Show\n            when={local.indeterminate}\n            fallback={<Icon name=\"check\" size={17} class=\"smwb-checkbox__icon\" weight={700} />}\n          >\n            <Icon name=\"remove\" size={18} class=\"smwb-checkbox__icon\" weight={700} />\n          </Show>\n        </span>\n        <Show when={local.label}>\n          <span class=\"smwb-checkbox__label\">{local.label}</span>\n        </Show>\n      </label>\n    </TextFieldWrapper>\n  );\n}\n\nexport default Checkbox;\n"],"names":["Checkbox","props","input","merged","mergeProps","size","color","ref","mergeRefs","el","local","args","splitProps","id","createId","helper","createHelperText","helperText","describedBy","handleClick","event","callHandler","onClick","readOnly","preventDefault","handleChange","currentTarget","indeterminate","Boolean","onChange","checked","createEffect","_$createComponent","TextFieldWrapper","text","helperTextId","disabled","error","children","_el$","_tmpl$2","_el$2","firstChild","_el$3","nextSibling","_$setAttribute","_ref$","_$use","_$spread","_$mergeProps","name","readonly","required","undefined","_$insert","Show","when","fallback","Icon","weight","label","_el$4","_tmpl$","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t"],"mappings":"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"}

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

@@ -1,89 +1,100 @@
-import { createComponent as a, mergeProps as x, Portal as oe, use as ie, insert as B, effect as le, style as se, setAttribute as de, isServer as ce, template as ue } from "solid-js/web";
+import { createComponent as a, mergeProps as $, Portal as ie, use as le, insert as x, effect as se, style as ce, setAttribute as de, isServer as ue, template as ge } from "solid-js/web";
 import '../../../assets/styles/less/components/datePicker/dataPicker.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import { splitProps as ge, children as me, createSignal as d, createEffect as L, createMemo as fe, onCleanup as he, Show as b } from "solid-js";
-import { buildFloatingMiddleware as be, resolvePlacement as pe } from "../../../utils/floating.js";
-import { createFloating as ve } from "../../../primitives/createFloating.js";
-import { DataPickerHeader as we } from "./dataPickerHeader.js";
-import { DataPickerDays as Ce } from "./dataPickerDays.js";
+import { splitProps as me, children as fe, createSignal as d, createEffect as k, createMemo as he, onCleanup as B, Show as v } from "solid-js";
+import { buildFloatingMiddleware as ve, resolvePlacement as pe } from "../../../utils/floating.js";
+import { createFloating as be } from "../../../primitives/createFloating.js";
+import { isTopOverlayLayer as we } from "../../../primitives/overlayLayer.js";
+import { DataPickerHeader as ye } from "./dataPickerHeader.js";
+import { DataPickerDays as De } from "./dataPickerDays.js";
 import { DatePickerList as Y } from "./datePickerList.js";
-import { DataPickerInput as De } from "./dataPickerInput.js";
-import { DatePickerIconButton as ye } from "./datePickerIconButton.js";
-import { OpenView as o } from "./openView.js";
-import { isValidDate as C, getMonths as ke, getYears as Ve, getDisplayDate as E, setYear as Oe, setMonth as Pe } from "./dateUtils.js";
-import { mergeRefs as q } from "../../../primitives/mergeRefs.js";
-import { TextField as Se } from "../textField/textField.js";
-import { Icon as Fe } from "../../base/icon/icon.js";
-import { ClickAwayListener as Me } from "../../clickAwayListener/clickAwayListener.js";
-var Ae = /* @__PURE__ */ ue('<div class=smwb-date-picker data-testid=date-picker data-smwb-overlay-layer role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class=smwb-date-picker__inner><div class=smwb-date-picker__body>');
+import { DataPickerInput as Ce } from "./dataPickerInput.js";
+import { DatePickerIconButton as ke } from "./datePickerIconButton.js";
+import { OpenView as i } from "./openView.js";
+import { isValidDate as V, getMonths as Ve, getYears as Oe, getDisplayDate as q, setYear as Pe, setMonth as Se } from "./dateUtils.js";
+import { mergeRefs as z } from "../../../primitives/mergeRefs.js";
+import { TextField as Fe } from "../textField/textField.js";
+import { Icon as Me } from "../../base/icon/icon.js";
+import { ClickAwayListener as Ae } from "../../clickAwayListener/clickAwayListener.js";
+var Ee = /* @__PURE__ */ ge('<div class=smwb-date-picker data-testid=date-picker data-smwb-overlay-layer role=dialog aria-modal=false style="transition:opacity 150ms ease-in-out"><div class=smwb-date-picker__inner><div class=smwb-date-picker__body>');
 const Ie = 150;
-function Qe(D) {
-  const [e, y] = ge(D, ["value", "onChange", "showDaysOutsideMonth", "disablePast", "disableFuture", "weekStartsOn", "placement", "disabled", "disableCalendar", "calendarAriaLabel", "minDate", "maxDate", "isDateDisabled", "locale", "format", "range", "rangeValue", "onRangeChange", "calendarIcon", "onBlur", "ref"]), k = me(() => e.range && !e.disableCalendar ? e.calendarIcon : void 0), p = () => e.value === void 0 ? void 0 : new Date(e.value), V = () => e.rangeValue !== void 0, [z, H] = d([void 0, void 0]), l = () => V() && e.rangeValue ? e.rangeValue : z(), O = p(), [s, u] = d(C(O) ? O : /* @__PURE__ */ new Date()), [g, m] = d(o.days), [j, f] = d(!1);
-  let P, S;
-  const F = () => pe(e.placement ?? "bottom-start"), v = ve({
-    placement: () => F().placement,
-    middleware: () => be(F())
+function We(O) {
+  const [e, P] = me(O, ["value", "onChange", "showDaysOutsideMonth", "disablePast", "disableFuture", "weekStartsOn", "placement", "disabled", "disableCalendar", "calendarAriaLabel", "minDate", "maxDate", "isDateDisabled", "locale", "format", "range", "rangeValue", "onRangeChange", "calendarIcon", "onBlur", "ref"]), S = fe(() => e.range && !e.disableCalendar ? e.calendarIcon : void 0), p = () => e.value === void 0 ? void 0 : new Date(e.value), F = () => e.rangeValue !== void 0, [H, K] = d([void 0, void 0]), s = () => F() && e.rangeValue ? e.rangeValue : H(), M = p(), [c, m] = d(V(M) ? M : /* @__PURE__ */ new Date()), [f, h] = d(i.days), [j, u] = d(!1);
+  let b, w;
+  const A = () => pe(e.placement ?? "bottom-start"), y = be({
+    placement: () => A().placement,
+    middleware: () => ve(A())
   });
-  L(() => {
+  k(() => {
     if (e.disabled) return;
     const t = p();
-    u(C(t) ? t : /* @__PURE__ */ new Date());
+    m(V(t) ? t : /* @__PURE__ */ new Date());
   });
   const G = () => e.weekStartsOn ?? 1, J = (t) => {
-    u(t);
-  }, K = () => {
-    m(g() === o.months ? o.days : o.months);
+    m(t);
   }, N = () => {
-    m(g() === o.years ? o.days : o.years);
-  }, Q = (t) => {
-    u(Pe(s(), t)), m(o.days);
+    h(f() === i.months ? i.days : i.months);
+  }, Q = () => {
+    h(f() === i.years ? i.days : i.years);
   }, U = (t) => {
-    u(Oe(s(), t)), m(o.days);
-  }, W = (t, n) => {
+    m(Se(c(), t)), h(i.days);
+  }, W = (t) => {
+    m(Pe(c(), t)), h(i.days);
+  }, X = (t, r) => {
     if (e.range) {
-      if (!n) return;
-      const [i, h] = l();
-      let r;
-      !i || i && h ? r = [n, void 0] : r = C(i) && n.getTime() < i.getTime() ? [n, i] : [i, n], V() || H(r), e.onRangeChange?.(r), r[0] && r[1] && f(!1);
+      if (!r) return;
+      const [o, l] = s();
+      let n;
+      !o || o && l ? n = [r, void 0] : n = V(o) && r.getTime() < o.getTime() ? [r, o] : [o, r], F() || K(n), e.onRangeChange?.(n), n[0] && n[1] && u(!1);
       return;
     }
-    e.onChange?.(t, n, D), f(!1);
-  }, M = () => {
-    e.disabled || f((t) => !t);
-  }, X = (t) => {
-    const n = t.target;
-    S?.contains(n) || P?.contains(n) || f(!1);
-  }, Z = fe(() => ke(e.locale)), ee = Ve((/* @__PURE__ */ new Date()).getFullYear(), 100), A = () => j() && !e.disabled && !e.disableCalendar, [I, _] = d(A()), [te, R] = d(!1);
-  let w, c;
-  L(() => {
-    A() ? (c !== void 0 && clearTimeout(c), _(!0), w = requestAnimationFrame(() => R(!0))) : (R(!1), I() && (c = setTimeout(() => _(!1), Ie)));
-  }), he(() => {
-    w !== void 0 && cancelAnimationFrame(w), c !== void 0 && clearTimeout(c);
+    e.onChange?.(t, r, O), u(!1);
+  }, E = () => {
+    e.disabled || u((t) => !t);
+  }, Z = (t) => {
+    const r = t.target;
+    w?.contains(r) || b?.contains(r) || u(!1);
+  }, ee = he(() => Ve(e.locale)), te = Oe((/* @__PURE__ */ new Date()).getFullYear(), 100), D = () => j() && !e.disabled && !e.disableCalendar, [I, L] = d(D()), [re, _] = d(!1);
+  let C, g;
+  k(() => {
+    D() ? (g !== void 0 && clearTimeout(g), L(!0), C = requestAnimationFrame(() => _(!0))) : (_(!1), I() && (g = setTimeout(() => L(!1), Ie)));
+  }), B(() => {
+    C !== void 0 && cancelAnimationFrame(C), g !== void 0 && clearTimeout(g);
+  }), k(() => {
+    if (!D()) return;
+    const t = (r) => {
+      const o = w;
+      if (r.key !== "Escape" || !o || !we(o)) return;
+      u(!1);
+      const l = document.activeElement;
+      (!l || l === document.body || o.contains(l)) && b?.focus();
+    };
+    document.addEventListener("keydown", t), B(() => document.removeEventListener("keydown", t));
   });
-  const re = () => {
-    switch (g()) {
-      case o.months:
+  const ne = () => {
+    switch (f()) {
+      case i.months:
         return a(Y, {
           get value() {
-            return s().getMonth();
+            return c().getMonth();
           },
           get items() {
-            return Z();
+            return ee();
           },
-          onChange: Q
+          onChange: U
         });
-      case o.years:
+      case i.years:
         return a(Y, {
           get value() {
-            return s().getFullYear();
+            return c().getFullYear();
           },
-          items: ee,
-          onChange: U
+          items: te,
+          onChange: W
         });
       default:
-        return a(Ce, {
+        return a(De, {
           get viewValue() {
-            return s();
+            return c();
           },
           get value() {
             return p();
@@ -91,7 +102,7 @@ function Qe(D) {
           get showDaysOutsideMonth() {
             return e.showDaysOutsideMonth;
           },
-          onChange: W,
+          onChange: X,
           get disablePast() {
             return e.disablePast;
           },
@@ -117,21 +128,21 @@ function Qe(D) {
             return e.range;
           },
           get rangeStart() {
-            return l()[0];
+            return s()[0];
           },
           get rangeEnd() {
-            return l()[1];
+            return s()[1];
           }
         });
     }
-  }, ae = () => e.range && (l()[0] || l()[1]) ? `${E(l()[0], e.format)} – ${E(l()[1], e.format)}` : "", T = q(e.ref, v.setReference, (t) => P = t);
-  return [a(b, {
+  }, ae = () => e.range && (s()[0] || s()[1]) ? `${q(s()[0], e.format)} – ${q(s()[1], e.format)}` : "", R = z(e.ref, y.setReference, (t) => b = t);
+  return [a(v, {
     get when() {
       return e.range;
     },
     get fallback() {
-      return a(De, x({
-        ref: T,
+      return a(Ce, $({
+        ref: R,
         get value() {
           return e.value;
         },
@@ -141,7 +152,7 @@ function Qe(D) {
         get onBlur() {
           return e.onBlur;
         },
-        onToggle: M,
+        onToggle: E,
         get disabled() {
           return e.disabled;
         },
@@ -154,11 +165,11 @@ function Qe(D) {
         get calendarIcon() {
           return e.calendarIcon;
         }
-      }, y));
+      }, P));
     },
     get children() {
-      return a(Se, x({
-        ref: T,
+      return a(Fe, $({
+        ref: R,
         get value() {
           return ae();
         },
@@ -172,25 +183,25 @@ function Qe(D) {
         placeholder: `${e.format} – ${e.format}`
       } : {}, {
         get endAdornment() {
-          return a(b, {
+          return a(v, {
             get when() {
               return !e.disableCalendar;
             },
             get children() {
-              return a(ye, {
+              return a(ke, {
                 edge: "end",
-                onClick: M,
+                onClick: E,
                 get disabled() {
                   return !!e.disabled;
                 },
                 "data-testid": "date-picker-icon-button",
                 get children() {
-                  return a(b, {
+                  return a(v, {
                     get when() {
-                      return k();
+                      return S();
                     },
                     get fallback() {
-                      return a(Fe, {
+                      return a(Me, {
                         name: "calendar_today",
                         fill: 1,
                         weight: 500,
@@ -198,7 +209,7 @@ function Qe(D) {
                       });
                     },
                     get children() {
-                      return k();
+                      return S();
                     }
                   });
                 }
@@ -206,41 +217,41 @@ function Qe(D) {
             }
           });
         }
-      }, y));
+      }, P));
     }
-  }), a(b, {
+  }), a(v, {
     get when() {
       return I();
     },
     get children() {
-      return a(oe, {
+      return a(ie, {
         get mount() {
-          return ce ? void 0 : document.body;
+          return ue ? void 0 : document.body;
         },
         get children() {
-          return a(Me, {
-            onClickAway: X,
+          return a(Ae, {
+            onClickAway: Z,
             get children() {
-              var t = Ae(), n = t.firstChild, i = n.firstChild, h = q(v.setFloating, (r) => S = r);
-              return typeof h == "function" && ie(h, t), B(n, a(we, {
+              var t = Ee(), r = t.firstChild, o = r.firstChild, l = z(y.setFloating, (n) => w = n);
+              return typeof l == "function" && le(l, t), x(r, a(ye, {
                 get viewValue() {
-                  return s();
+                  return c();
                 },
                 get locale() {
                   return e.locale;
                 },
                 get openView() {
-                  return g();
+                  return f();
                 },
                 onChange: J,
-                onMonthLabelClick: K,
-                onYearLabelClick: N
-              }), i), B(i, re), le((r) => {
-                var ne = {
-                  ...v.floatingStyles(),
-                  opacity: te() ? 1 : 0
-                }, $ = e.calendarAriaLabel ?? "Choose date";
-                return r.e = se(t, ne, r.e), $ !== r.t && de(t, "aria-label", r.t = $), r;
+                onMonthLabelClick: N,
+                onYearLabelClick: Q
+              }), o), x(o, ne), se((n) => {
+                var oe = {
+                  ...y.floatingStyles(),
+                  opacity: re() ? 1 : 0
+                }, T = e.calendarAriaLabel ?? "Choose date";
+                return n.e = ce(t, oe, n.e), T !== n.t && de(t, "aria-label", n.t = T), n;
               }, {
                 e: void 0,
                 t: void 0
@@ -253,7 +264,7 @@ function Qe(D) {
   })];
 }
 export {
-  Qe as DatePicker,
-  o as OpenView
+  We as DatePicker,
+  i as OpenView
 };
 //# sourceMappingURL=datePicker.js.map