@smwb/ui-react 2.7.0 → 2.8.0

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

@@ -1,233 +1,239 @@
-import { jsx as t, jsxs as A, Fragment as ke } from "react/jsx-runtime";
+import { jsx as n, jsxs as N, Fragment as ke } from "react/jsx-runtime";
 import '../../../assets/styles/less/components/datePicker/dataPicker.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
-import be, { useMemo as x, useState as g, 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 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 }
-}, rt = be.forwardRef(function(C, q) {
+}, ct = 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: n,
-    disableCalendar: P,
-    calendarAriaLabel: X = "Choose date",
-    minDate: Z,
-    maxDate: ee,
-    isDateDisabled: te,
-    locale: y,
-    format: d,
-    range: p,
-    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, [oe, ne] = g([void 0, void 0]), r = M && F ? F : oe, [s, k] = g(() => V(c) ? c : /* @__PURE__ */ new Date()), [m, b] = g(
+    ...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] = g(!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] = g();
-  j(() => {
-    ie(document.body);
-  }, []), j(() => {
-    n || k(V(c) ? c : /* @__PURE__ */ new Date());
-  }, [c, n]);
-  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 (p) {
+      if (y) {
         if (!a)
           return;
-        const [o, D] = r;
-        let u;
-        !o || o && D ? u = [a, void 0] : u = V(o) && a.getTime() < o.getTime() ? [a, o] : [o, a], M || ne(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, p, r, M, h]
-  ), $ = i(() => {
-    n || v((e) => !e);
-  }, [n]), pe = i((e) => {
-    var o, D;
+    [p, R, y, s, L, k]
+  ), A = c(() => {
+    r || g((e) => !e);
+  }, [r]), ye = c((e) => {
+    var t, l;
     const a = e.target;
-    (o = S.current) != null && o.contains(a) || (D = Y.current) != null && D.contains(a) || v(!1);
-  }, []), ge = 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: p,
-          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: ge, 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 = p && (r[0] || r[1]) ? `${U(r[0], d)} – ${U(r[1], d)}` : "";
-  return /* @__PURE__ */ A(ke, { children: [
-    p ? /* @__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: !!n,
-        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: !!n,
+            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: n,
-        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 && !n && !P,
-          timeout: 150,
-          mountOnEnter: !0,
-          unmountOnExit: !0,
-          children: (e) => /* @__PURE__ */ t(Ie, { onClickAway: pe, 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 {
-  rt as DatePicker,
-  Te as OpenView,
-  rt as default
+  ct as DatePicker,
+  Ae as OpenView,
+  ct as default
 };
 //# sourceMappingURL=datePicker.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"datePicker.js","sources":["../../../../src/components/inputs/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { TextField, TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { DataPickerHeader } from \"./dataPickerHeader\";\nimport { DataPickerDays } from \"./dataPickerDays\";\nimport { DatePickerList } from \"./datePickerList\";\nimport { getMonths, setMonth, getYears, setYear, isValidDate, getDisplayDate } from \"./utils\";\nimport { DataPickerInput } from \"./dataPickerInput\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport Icon from \"../../base/icon/icon\";\nimport { createPortal } from \"react-dom\";\n\nexport enum OpenView {\n  days = \"days\",\n  months = \"months\",\n  years = \"years\",\n}\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface DatePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  showDaysOutsideMonth?: boolean;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  /** Earliest selectable date (inclusive). */\n  minDate?: Date;\n  /** Latest selectable date (inclusive). */\n  maxDate?: Date;\n  /** Predicate to disable arbitrary days. */\n  isDateDisabled?: (day: Date) => boolean;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** BCP-47 locale for calendar labels (day/month/year names). */\n  locale?: string;\n  /** Input format pattern with tokens dd, MM, yyyy, e.g. \"dd/MM/yyyy\". */\n  format?: string;\n  /** Enables date-range selection. */\n  range?: boolean;\n  /** Controlled range value `[start, end]`. */\n  rangeValue?: [Date | undefined, Date | undefined];\n  /** Called when the range changes. */\n  onRangeChange?: (range: [Date | undefined, Date | undefined]) => void;\n  placement?: Placement;\n  disableCalendar?: boolean;\n  label?: string;\n  /** Accessible label for the calendar popup dialog. */\n  calendarAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  calendarIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: DatePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: DatePickerProps) => void;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(props: DatePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    showDaysOutsideMonth,\n    disablePast,\n    disableFuture,\n    weekStartsOn = 1,\n    placement = \"bottom-start\",\n    disabled,\n    disableCalendar,\n    calendarAriaLabel = \"Choose date\",\n    minDate,\n    maxDate,\n    isDateDisabled,\n    locale,\n    format,\n    range,\n    rangeValue,\n    onRangeChange,\n    calendarIcon,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const isRangeControlled = rangeValue !== undefined;\n  const [rangeState, setRangeState] = useState<[Date | undefined, Date | undefined]>([undefined, undefined]);\n  const currentRange = isRangeControlled && rangeValue ? rangeValue : rangeState;\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidDate(value) ? value : new Date()));\n  const [openView, setOpenView] = useState<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const calendarRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const calendarForkRef = useForkRef(calendarRef, refs.setFloating);\n\n  // The calendar is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing there, so the\n  // picker renders and hydrates on a server-rendered page.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onViewValueChange = useCallback((value: Date) => {\n    setViewValue(value);\n  }, []);\n\n  const onMonthLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.months ? OpenView.days : OpenView.months);\n  }, [openView]);\n\n  const onYearLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.years ? OpenView.days : OpenView.years);\n  }, [openView]);\n\n  const onMonthChange = useCallback(\n    (month: number) => {\n      setViewValue(setMonth(viewValue, month));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const onYearChange = useCallback(\n    (month: number) => {\n      setViewValue(setYear(viewValue, month));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const onChange = useCallback(\n    (event?: React.ChangeEvent<HTMLInputElement>, date?: Date) => {\n      if (range) {\n        if (!date) {\n          return;\n        }\n        const [start, end] = currentRange;\n        let next: [Date | undefined, Date | undefined];\n        if (!start || (start && end)) {\n          next = [date, undefined];\n        } else {\n          next = isValidDate(start) && date.getTime() < start.getTime() ? [date, start] : [start, date];\n        }\n        if (!isRangeControlled) {\n          setRangeState(next);\n        }\n        onRangeChange?.(next);\n        if (next[0] && next[1]) {\n          setIsOpen(false);\n        }\n        return;\n      }\n      onChangeProp?.(event, date, props);\n      setIsOpen(false);\n    },\n    [onChangeProp, props, range, currentRange, isRangeControlled, onRangeChange]\n  );\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (calendarRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const months = useMemo(() => getMonths(locale), [locale]);\n  const years = useMemo(() => getYears(new Date().getFullYear(), 100), []);\n\n  let view: React.ReactNode = null;\n\n  switch (openView) {\n    case OpenView.days:\n      view = (\n        <DataPickerDays\n          viewValue={viewValue}\n          value={value}\n          showDaysOutsideMonth={showDaysOutsideMonth}\n          onChange={onChange}\n          disablePast={disablePast}\n          disableFuture={disableFuture}\n          weekStartsOn={weekStartsOn}\n          minDate={minDate}\n          maxDate={maxDate}\n          isDateDisabled={isDateDisabled}\n          locale={locale}\n          range={range}\n          rangeStart={currentRange[0]}\n          rangeEnd={currentRange[1]}\n        />\n      );\n      break;\n    case OpenView.months:\n      view = <DatePickerList value={viewValue.getMonth()} items={months} onChange={onMonthChange} />;\n      break;\n    case OpenView.years:\n      view = <DatePickerList value={viewValue.getFullYear()} items={years} onChange={onYearChange} />;\n      break;\n  }\n\n  const rangeDisplay =\n    range && (currentRange[0] || currentRange[1])\n      ? `${getDisplayDate(currentRange[0], format)} – ${getDisplayDate(currentRange[1], format)}`\n      : \"\";\n\n  return (\n    <>\n      {range ? (\n        <TextField\n          ref={anchorForkRef}\n          value={rangeDisplay}\n          readOnly\n          onChange={() => undefined}\n          disabled={Boolean(disabled)}\n          placeholder={format ? `${format} – ${format}` : undefined}\n          endAdornment={\n            !disableCalendar && (\n              <DatePickerIconButton\n                edge=\"end\"\n                onClick={onToggle}\n                disabled={Boolean(disabled)}\n                data-testid=\"date-picker-icon-button\"\n              >\n                {calendarIcon || <Icon name=\"calendar_today\" fill={1} weight={500} size={24} />}\n              </DatePickerIconButton>\n            )\n          }\n          {...rest}\n        />\n      ) : (\n        <DataPickerInput\n          ref={anchorForkRef}\n          value={value}\n          onChange={onChangeProp}\n          onBlur={onBlurProp}\n          onToggle={onToggle}\n          disabled={disabled}\n          disableCalendar={disableCalendar}\n          format={format}\n          calendarIcon={calendarIcon}\n          {...rest}\n        />\n      )}\n      {portalRoot\n        ? createPortal(\n            <Transition\n              nodeRef={calendarRef}\n              in={isOpen && !disabled && !disableCalendar}\n              timeout={150}\n              mountOnEnter\n              unmountOnExit\n            >\n              {(state) => (\n                <ClickAwayListener onClickAway={onClickAway}>\n                  <div\n                    ref={calendarForkRef}\n                    className=\"smwb-date-picker\"\n                    style={{\n                      ...floatingStyles,\n                      ...defaultStyle(150),\n                      ...transitionStyles[state],\n                    }}\n                    data-testid=\"date-picker\"\n                    data-smwb-overlay-layer=\"\"\n                    role=\"dialog\"\n                    aria-modal=\"false\"\n                    aria-label={calendarAriaLabel}\n                  >\n                    <div className=\"smwb-date-picker__inner\">\n                      <DataPickerHeader\n                        viewValue={viewValue}\n                        locale={locale}\n                        openView={openView}\n                        onChange={onViewValueChange}\n                        onMonthLabelClick={onMonthLabelClick}\n                        onYearLabelClick={onYearLabelClick}\n                      />\n                      <div className=\"smwb-date-picker__body\">{view}</div>\n                    </div>\n                  </div>\n                </ClickAwayListener>\n              )}\n            </Transition>,\n            portalRoot\n          )\n        : null}\n    </>\n  );\n});\n\nexport default DatePicker;\n"],"names":["OpenView","defaultStyle","duration","transitionStyles","DatePicker","React","props","ref","valueProp","onChangeProp","showDaysOutsideMonth","disablePast","disableFuture","weekStartsOn","placement","disabled","disableCalendar","calendarAriaLabel","minDate","maxDate","isDateDisabled","locale","format","range","rangeValue","onRangeChange","calendarIcon","onBlurProp","rest","value","useMemo","isRangeControlled","rangeState","setRangeState","useState","currentRange","viewValue","setViewValue","isValidDate","openView","setOpenView","isOpen","setIsOpen","anchorRef","useRef","calendarRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","calendarForkRef","portalRoot","setPortalRoot","useSafeLayoutEffect","onViewValueChange","useCallback","onMonthLabelClick","onYearLabelClick","onMonthChange","month","setMonth","onYearChange","setYear","onChange","event","date","start","end","next","onToggle","prevState","onClickAway","target","_a","_b","months","getMonths","years","getYears","view","jsx","DataPickerDays","DatePickerList","rangeDisplay","getDisplayDate","jsxs","Fragment","TextField","DatePickerIconButton","Icon","DataPickerInput","createPortal","Transition","state","ClickAwayListener","DataPickerHeader"],"mappings":"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"}
+{"version":3,"file":"datePicker.js","sources":["../../../../src/components/inputs/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { autoUpdate, useFloating } from \"@floating-ui/react\";\nimport Transition, { TransitionStatus } from \"react-transition-group/Transition\";\nimport { buildFloatingMiddleware, Placement, resolvePlacement } from \"../../../utils/floating\";\nimport { useSafeLayoutEffect } from \"../../../hooks/useSafeLayoutEffect\";\nimport { useForkRef } from \"../../../hooks/useForkRef\";\nimport { isTopOverlayLayer } from \"../../../utils/overlayLayer\";\nimport { TextField, TextFieldProps } from \"../textField\";\nimport { ClickAwayListener } from \"../../clickAwayListener\";\nimport { DataPickerHeader } from \"./dataPickerHeader\";\nimport { DataPickerDays } from \"./dataPickerDays\";\nimport { DatePickerList } from \"./datePickerList\";\nimport { getMonths, setMonth, getYears, setYear, isValidDate, getDisplayDate } from \"./utils\";\nimport { DataPickerInput } from \"./dataPickerInput\";\nimport { DatePickerIconButton } from \"./datePickerIconButton\";\nimport Icon from \"../../base/icon/icon\";\nimport { createPortal } from \"react-dom\";\n\nexport enum OpenView {\n  days = \"days\",\n  months = \"months\",\n  years = \"years\",\n}\n\nconst defaultStyle = (duration: number) => ({\n  transition: `opacity ${duration}ms ease-in-out`,\n  opacity: 0,\n});\n\nconst transitionStyles = {\n  entering: { opacity: 1 },\n  entered: { opacity: 1 },\n  exiting: { opacity: 0 },\n} as Record<TransitionStatus, { opacity: number }>;\n\nexport interface DatePickerProps extends Omit<TextFieldProps, \"onBlur\" | \"onChange\" | \"value\" | \"defaultValue\"> {\n  showDaysOutsideMonth?: boolean;\n  disablePast?: boolean;\n  disableFuture?: boolean;\n  /** Earliest selectable date (inclusive). */\n  minDate?: Date;\n  /** Latest selectable date (inclusive). */\n  maxDate?: Date;\n  /** Predicate to disable arbitrary days. */\n  isDateDisabled?: (day: Date) => boolean;\n  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  /** BCP-47 locale for calendar labels (day/month/year names). */\n  locale?: string;\n  /** Input format pattern with tokens dd, MM, yyyy, e.g. \"dd/MM/yyyy\". */\n  format?: string;\n  /** Enables date-range selection. */\n  range?: boolean;\n  /** Controlled range value `[start, end]`. */\n  rangeValue?: [Date | undefined, Date | undefined];\n  /** Called when the range changes. */\n  onRangeChange?: (range: [Date | undefined, Date | undefined]) => void;\n  placement?: Placement;\n  disableCalendar?: boolean;\n  label?: string;\n  /** Accessible label for the calendar popup dialog. */\n  calendarAriaLabel?: string;\n  autoComplete?: string;\n  value?: Date | string;\n  calendarIcon?: React.ReactNode;\n  onChange?: (event?: React.ChangeEvent<HTMLInputElement>, value?: Date, data?: DatePickerProps) => void;\n  onBlur?: (event?: React.FocusEvent<HTMLInputElement>, value?: Date, data?: DatePickerProps) => void;\n}\n\nexport const DatePicker = React.forwardRef(function DatePicker(props: DatePickerProps, ref) {\n  const {\n    value: valueProp,\n    onChange: onChangeProp,\n    showDaysOutsideMonth,\n    disablePast,\n    disableFuture,\n    weekStartsOn = 1,\n    placement = \"bottom-start\",\n    disabled,\n    disableCalendar,\n    calendarAriaLabel = \"Choose date\",\n    minDate,\n    maxDate,\n    isDateDisabled,\n    locale,\n    format,\n    range,\n    rangeValue,\n    onRangeChange,\n    calendarIcon,\n    onBlur: onBlurProp,\n    ...rest\n  } = props;\n  const value = useMemo(() => (valueProp === undefined ? undefined : new Date(valueProp)), [valueProp]);\n  const isRangeControlled = rangeValue !== undefined;\n  const [rangeState, setRangeState] = useState<[Date | undefined, Date | undefined]>([undefined, undefined]);\n  const currentRange = isRangeControlled && rangeValue ? rangeValue : rangeState;\n  const [viewValue, setViewValue] = useState<Date>(() => (isValidDate(value) ? value : new Date()));\n  const [openView, setOpenView] = useState<OpenView>(OpenView.days);\n  const [isOpen, setIsOpen] = useState(false);\n\n  const anchorRef = useRef<HTMLDivElement | null>(null);\n  const calendarRef = useRef<HTMLDivElement | null>(null);\n\n  const resolved = resolvePlacement(placement);\n  const { refs, floatingStyles } = useFloating({\n    open: isOpen,\n    placement: resolved.placement,\n    whileElementsMounted: autoUpdate,\n    middleware: buildFloatingMiddleware(resolved),\n  });\n\n  const anchorForkRef = useForkRef(anchorRef, refs.setReference, ref);\n  const calendarForkRef = useForkRef(calendarRef, refs.setFloating);\n\n  // The calendar is portalled: its target is resolved in the browser only. A server\n  // render (no document) and the first client render emit nothing there, so the\n  // picker renders and hydrates on a server-rendered page.\n  const [portalRoot, setPortalRoot] = useState<HTMLElement>();\n  useSafeLayoutEffect(() => {\n    setPortalRoot(document.body);\n  }, []);\n\n  useSafeLayoutEffect(() => {\n    if (disabled) {\n      return;\n    }\n\n    setViewValue(isValidDate(value) ? value : new Date());\n  }, [value, disabled]);\n\n  const onViewValueChange = useCallback((value: Date) => {\n    setViewValue(value);\n  }, []);\n\n  const onMonthLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.months ? OpenView.days : OpenView.months);\n  }, [openView]);\n\n  const onYearLabelClick = useCallback(() => {\n    setOpenView(openView === OpenView.years ? OpenView.days : OpenView.years);\n  }, [openView]);\n\n  const onMonthChange = useCallback(\n    (month: number) => {\n      setViewValue(setMonth(viewValue, month));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const onYearChange = useCallback(\n    (month: number) => {\n      setViewValue(setYear(viewValue, month));\n      setOpenView(OpenView.days);\n    },\n    [viewValue]\n  );\n\n  const onChange = useCallback(\n    (event?: React.ChangeEvent<HTMLInputElement>, date?: Date) => {\n      if (range) {\n        if (!date) {\n          return;\n        }\n        const [start, end] = currentRange;\n        let next: [Date | undefined, Date | undefined];\n        if (!start || (start && end)) {\n          next = [date, undefined];\n        } else {\n          next = isValidDate(start) && date.getTime() < start.getTime() ? [date, start] : [start, date];\n        }\n        if (!isRangeControlled) {\n          setRangeState(next);\n        }\n        onRangeChange?.(next);\n        if (next[0] && next[1]) {\n          setIsOpen(false);\n        }\n        return;\n      }\n      onChangeProp?.(event, date, props);\n      setIsOpen(false);\n    },\n    [onChangeProp, props, range, currentRange, isRangeControlled, onRangeChange]\n  );\n\n  const onToggle = useCallback(() => {\n    if (!disabled) {\n      setIsOpen((prevState) => !prevState);\n    }\n  }, [disabled]);\n\n  const onClickAway = useCallback((event: Event | React.SyntheticEvent) => {\n    const target = event.target as HTMLElement;\n\n    if (calendarRef.current?.contains(target) || anchorRef.current?.contains(target)) {\n      return;\n    }\n\n    setIsOpen(false);\n  }, []);\n\n  const panelOpen = isOpen && !disabled && !disableCalendar;\n\n  // Escape closes the panel while it is the topmost overlay layer, so the next one\n  // reaches a Modal or Sheet around the picker. Focus left in the panel (or on\n  // <body> after a click there) goes back to the input rather than being lost.\n  useEffect(() => {\n    if (!panelOpen) {\n      return;\n    }\n    const onKeyDown = (event: KeyboardEvent) => {\n      const panel = calendarRef.current;\n      if (event.key !== \"Escape\" || !panel || !isTopOverlayLayer(panel)) {\n        return;\n      }\n      setIsOpen(false);\n      const active = document.activeElement;\n      if (!active || active === document.body || panel.contains(active)) {\n        anchorRef.current?.focus();\n      }\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n\n    return () => document.removeEventListener(\"keydown\", onKeyDown);\n  }, [panelOpen]);\n\n  const months = useMemo(() => getMonths(locale), [locale]);\n  const years = useMemo(() => getYears(new Date().getFullYear(), 100), []);\n\n  let view: React.ReactNode = null;\n\n  switch (openView) {\n    case OpenView.days:\n      view = (\n        <DataPickerDays\n          viewValue={viewValue}\n          value={value}\n          showDaysOutsideMonth={showDaysOutsideMonth}\n          onChange={onChange}\n          disablePast={disablePast}\n          disableFuture={disableFuture}\n          weekStartsOn={weekStartsOn}\n          minDate={minDate}\n          maxDate={maxDate}\n          isDateDisabled={isDateDisabled}\n          locale={locale}\n          range={range}\n          rangeStart={currentRange[0]}\n          rangeEnd={currentRange[1]}\n        />\n      );\n      break;\n    case OpenView.months:\n      view = <DatePickerList value={viewValue.getMonth()} items={months} onChange={onMonthChange} />;\n      break;\n    case OpenView.years:\n      view = <DatePickerList value={viewValue.getFullYear()} items={years} onChange={onYearChange} />;\n      break;\n  }\n\n  const rangeDisplay =\n    range && (currentRange[0] || currentRange[1])\n      ? `${getDisplayDate(currentRange[0], format)} – ${getDisplayDate(currentRange[1], format)}`\n      : \"\";\n\n  return (\n    <>\n      {range ? (\n        <TextField\n          ref={anchorForkRef}\n          value={rangeDisplay}\n          readOnly\n          onChange={() => undefined}\n          disabled={Boolean(disabled)}\n          placeholder={format ? `${format} – ${format}` : undefined}\n          endAdornment={\n            !disableCalendar && (\n              <DatePickerIconButton\n                edge=\"end\"\n                onClick={onToggle}\n                disabled={Boolean(disabled)}\n                data-testid=\"date-picker-icon-button\"\n              >\n                {calendarIcon || <Icon name=\"calendar_today\" fill={1} weight={500} size={24} />}\n              </DatePickerIconButton>\n            )\n          }\n          {...rest}\n        />\n      ) : (\n        <DataPickerInput\n          ref={anchorForkRef}\n          value={value}\n          onChange={onChangeProp}\n          onBlur={onBlurProp}\n          onToggle={onToggle}\n          disabled={disabled}\n          disableCalendar={disableCalendar}\n          format={format}\n          calendarIcon={calendarIcon}\n          {...rest}\n        />\n      )}\n      {portalRoot\n        ? createPortal(\n            <Transition nodeRef={calendarRef} in={panelOpen} timeout={150} mountOnEnter unmountOnExit>\n              {(state) => (\n                <ClickAwayListener onClickAway={onClickAway}>\n                  <div\n                    ref={calendarForkRef}\n                    className=\"smwb-date-picker\"\n                    style={{\n                      ...floatingStyles,\n                      ...defaultStyle(150),\n                      ...transitionStyles[state],\n                    }}\n                    data-testid=\"date-picker\"\n                    data-smwb-overlay-layer=\"\"\n                    role=\"dialog\"\n                    aria-modal=\"false\"\n                    aria-label={calendarAriaLabel}\n                  >\n                    <div className=\"smwb-date-picker__inner\">\n                      <DataPickerHeader\n                        viewValue={viewValue}\n                        locale={locale}\n                        openView={openView}\n                        onChange={onViewValueChange}\n                        onMonthLabelClick={onMonthLabelClick}\n                        onYearLabelClick={onYearLabelClick}\n                      />\n                      <div className=\"smwb-date-picker__body\">{view}</div>\n                    </div>\n                  </div>\n                </ClickAwayListener>\n              )}\n            </Transition>,\n            portalRoot\n          )\n        : null}\n    </>\n  );\n});\n\nexport default DatePicker;\n"],"names":["OpenView","defaultStyle","duration","transitionStyles","DatePicker","React","props","ref","valueProp","onChangeProp","showDaysOutsideMonth","disablePast","disableFuture","weekStartsOn","placement","disabled","disableCalendar","calendarAriaLabel","minDate","maxDate","isDateDisabled","locale","format","range","rangeValue","onRangeChange","calendarIcon","onBlurProp","rest","value","useMemo","isRangeControlled","rangeState","setRangeState","useState","currentRange","viewValue","setViewValue","isValidDate","openView","setOpenView","isOpen","setIsOpen","anchorRef","useRef","calendarRef","resolved","resolvePlacement","refs","floatingStyles","useFloating","autoUpdate","buildFloatingMiddleware","anchorForkRef","useForkRef","calendarForkRef","portalRoot","setPortalRoot","useSafeLayoutEffect","onViewValueChange","useCallback","onMonthLabelClick","onYearLabelClick","onMonthChange","month","setMonth","onYearChange","setYear","onChange","event","date","start","end","next","onToggle","prevState","onClickAway","target","_a","_b","panelOpen","useEffect","onKeyDown","panel","isTopOverlayLayer","active","months","getMonths","years","getYears","view","jsx","DataPickerDays","DatePickerList","rangeDisplay","getDisplayDate","jsxs","Fragment","TextField","DatePickerIconButton","Icon","DataPickerInput","createPortal","Transition","state","ClickAwayListener","DataPickerHeader"],"mappings":"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"}

package/dist/components/inputs/datePicker/datePickerDay.d.ts

@@ -9,5 +9,5 @@ interface DataPickerDayProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     day: Date;
     onChange?: (event?: React.ChangeEvent<HTMLInputElement>, date?: Date) => void;
 }
-export declare const DatePickerDay: React.MemoExoticComponent<({ className, children, onMouseDown: onMouseDownProp, onChange, active, current, hidden, outside, disabled, inRange, day, ...rest }: DataPickerDayProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DatePickerDay: React.MemoExoticComponent<({ className, children, onMouseDown: onMouseDownProp, onPointerDown: onPointerDownProp, onClick: onClickProp, type, onChange, active, current, hidden, outside, disabled, inRange, day, ...rest }: DataPickerDayProps) => import("react/jsx-runtime").JSX.Element>;
 export {};

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

@@ -1,62 +1,70 @@
-import { jsx as _, jsxs as d } from "react/jsx-runtime";
-import c from "react";
-import j from "clsx";
-import { Ripple as D } from "../../base/ripple/ripple.js";
-const B = c.memo(function({
-  className: k,
-  children: n,
-  onMouseDown: e,
-  onChange: r,
-  active: i,
-  current: f,
-  hidden: u,
-  outside: y,
+import { jsx as k, jsxs as z } from "react/jsx-runtime";
+import e from "react";
+import A from "clsx";
+import { Ripple as B } from "../../base/ripple/ripple.js";
+const J = e.memo(function({
+  className: y,
+  children: R,
+  onMouseDown: a,
+  // The day sets these on its root too; its own handlers call the caller's first.
+  onPointerDown: m,
+  onClick: s,
+  // A default: the caller's type wins.
+  type: b = "button",
+  onChange: _,
+  active: r,
+  current: l,
+  hidden: p,
+  outside: x,
   disabled: t,
-  inRange: l,
-  day: m,
-  ...o
+  inRange: d,
+  day: i,
+  ...j
 }) {
-  const s = c.useRef(null), R = c.useCallback(
-    (a) => {
-      e == null || e(a);
+  const f = e.useRef(null), N = e.useCallback(
+    (c) => {
+      a == null || a(c);
     },
-    [e]
-  ), w = c.useCallback(
-    (a) => {
-      var p;
-      t || (p = s.current) == null || p.onRipple(a);
+    [a]
+  ), w = e.useCallback(
+    (c) => {
+      var u;
+      m == null || m(c), t || (u = f.current) == null || u.onRipple(c);
     },
-    [t]
-  ), b = c.useCallback(() => {
-    t || r == null || r(void 0, m);
-  }, [r, m, t]);
-  if (u)
-    return /* @__PURE__ */ _("span", { className: "smwb-date-picker__day-hidden" });
-  const x = j("smwb-date-picker__day", k, {
-    "smwb-date-picker__day--active": !t && i,
-    "smwb-date-picker__day--current": f && !i,
-    "smwb-date-picker__day--outside": !t && y,
+    [m, t]
+  ), q = e.useCallback(
+    (c) => {
+      s == null || s(c), t || _ == null || _(void 0, i);
+    },
+    [s, _, i, t]
+  );
+  if (p)
+    return /* @__PURE__ */ k("span", { className: "smwb-date-picker__day-hidden" });
+  const v = A("smwb-date-picker__day", y, {
+    "smwb-date-picker__day--active": !t && r,
+    "smwb-date-picker__day--current": l && !r,
+    "smwb-date-picker__day--outside": !t && x,
     "smwb-date-picker__day--disabled": t,
-    "smwb-date-picker__day--in-range": !t && l
+    "smwb-date-picker__day--in-range": !t && d
   });
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ z(
     "button",
     {
-      className: x,
-      type: "button",
-      onMouseDown: R,
+      className: v,
+      type: b,
+      onMouseDown: N,
       onPointerDown: w,
-      onClick: b,
+      onClick: q,
       disabled: t,
-      ...o,
+      ...j,
       children: [
-        n,
-        !t && /* @__PURE__ */ _(D, { actionRef: s, center: !0 })
+        R,
+        !t && /* @__PURE__ */ k(B, { actionRef: f, center: !0 })
       ]
     }
   );
 });
 export {
-  B as DatePickerDay
+  J as DatePickerDay
 };
 //# sourceMappingURL=datePickerDay.js.map