asma-ui-core 3.71.0 → 3.72.0

package/dist/datetime/components/time-picker/StyledTimePicker.js

@@ -1,71 +1,90 @@
-import { PopupState as j } from "../../../hooks/usePopupState.js";
+import { useIsMobileView as N } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as E } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useBackNavigationClose as I } from "../../hooks/useBackNavigationClose.hook.js";
+import { usePopupState as j } from "../../../hooks/usePopupState.js";
 import { ClickAwayListener as D } from "../../../components/mui-compat/ClickAwayListener.js";
-import { TimePickerPopper as E } from "./TimePickerPopper.js";
-import { getTimeFromValue as P } from "./helpers/getTimeFromValue.js";
-import { TimePickerInput as T } from "./TimePickerInput.js";
+import { TimePickerPanel as L } from "./components/TimePickerPanel.js";
+import { TimePickerPopper as O } from "./TimePickerPopper.js";
+import { getTimeFromValue as S } from "./helpers/getTimeFromValue.js";
+import { TimePickerInput as B } from "./TimePickerInput.js";
 import { useState as h } from "react";
-import { jsx as o, jsxs as A } from "react/jsx-runtime";
-import { format as v, isBefore as B, isValid as N } from "date-fns";
-var J = (l) => {
-  const { value: a, onSelect: i, notBeforeTime: m } = l, V = a ? v(a, "HH:mm") : "", [x, s] = h(V), [w, t] = h(!1), [g, n] = h(!0), c = w ? x : V, u = (e) => !e || !m || !N(m) || !B(e, m), k = c.length === 5 ? P(c, a) : null, y = k ? u(k) : !0, C = (e) => {
-    const r = e.close;
-    r?.();
-  }, H = (e, r) => {
-    const d = e.target.value;
-    if (t(!0), s(d), d.length !== 5) {
+import { jsx as o, jsxs as T } from "react/jsx-runtime";
+import { format as v, isBefore as M, isValid as A } from "date-fns";
+var Z = (i) => {
+  const { value: a, onSelect: r, notBeforeTime: m } = i, e = j({
+    variant: "popper",
+    popupId: "time-picker-popper"
+  }), V = N();
+  I({
+    open: V && e.isOpen,
+    onClose: e.close
+  });
+  const x = a ? v(a, "HH:mm") : "", [C, s] = h(x), [P, l] = h(!1), [b, n] = h(!0), c = P ? C : x, u = (t) => !t || !m || !A(m) || !M(t, m), k = c.length === 5 ? S(c, a) : null, g = k ? u(k) : !0, H = (t) => {
+    const p = t.target.value;
+    if (l(!0), s(p), p.length !== 5) {
       n(!1);
       return;
     }
-    const f = P(d, a);
-    if (!f) {
-      i(void 0), n(!1);
+    const d = S(p, a);
+    if (!d) {
+      r(void 0), n(!1);
       return;
     }
-    n(!0), u(f) ? (i(f), t(!1), C(r)) : i(void 0);
-  }, I = (e) => {
-    if (n(!0), u(e)) {
-      i(e), s(e ? v(e, "HH:mm") : ""), t(!1);
+    n(!0), u(d) ? (r(d), l(!1), e.close()) : r(void 0);
+  }, w = (t) => {
+    if (n(!0), u(t)) {
+      r(t), s(t ? v(t, "HH:mm") : ""), l(!1);
       return;
     }
-    i(void 0), s(e ? v(e, "HH:mm") : ""), t(!0);
-  }, L = () => {
-    i(void 0), s(""), t(!1), n(!0);
-  };
-  return /* @__PURE__ */ o(j, {
-    variant: "popper",
-    popupId: "time-picker-popper",
-    children: (e) => l.disabled || l.readOnly ? /* @__PURE__ */ o(T, {
-      ...l,
-      popupState: e,
-      localValue: c,
-      isValidTime: g,
-      isValidEndTime: y,
-      handleChange: (r) => H(r, e)
-    }) : /* @__PURE__ */ o(D, {
-      mouseEvent: "onMouseDown",
-      onClickAway: () => C(e),
-      children: /* @__PURE__ */ A("div", {
-        className: "relative h-auto w-auto",
-        children: [/* @__PURE__ */ o("div", {
-          className: "m-0 flex h-fit items-center justify-center p-0",
-          children: /* @__PURE__ */ o(T, {
-            ...l,
-            popupState: e,
-            localValue: c,
-            isValidTime: g,
-            isValidEndTime: y,
-            handleChange: (r) => H(r, e)
-          })
-        }), e.isOpen && /* @__PURE__ */ o(E, {
-          ...l,
-          popupState: e,
-          handleClear: L,
-          onSelect: (r) => I(r)
-        })]
+    r(void 0), s(t ? v(t, "HH:mm") : ""), l(!0);
+  }, y = () => {
+    r(void 0), s(""), l(!1), n(!0);
+  }, f = /* @__PURE__ */ o(B, {
+    ...i,
+    popupState: e,
+    localValue: c,
+    isValidTime: b,
+    isValidEndTime: g,
+    handleChange: H
+  });
+  return i.disabled || i.readOnly ? f : V ? /* @__PURE__ */ T("div", {
+    className: "relative h-auto w-auto",
+    children: [/* @__PURE__ */ o("div", {
+      className: "m-0 flex h-fit items-center justify-center p-0",
+      children: f
+    }), /* @__PURE__ */ o(E, {
+      anchor: "bottom",
+      open: e.isOpen,
+      onClose: e.close,
+      anchorEl: e.anchorEl,
+      children: /* @__PURE__ */ o("div", {
+        className: "mx-auto w-full max-w-[360px] px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
+        children: /* @__PURE__ */ o(L, {
+          dataTest: i.dataTest,
+          value: a,
+          onSelect: w,
+          handleClear: y,
+          onConfirm: e.close
+        })
       })
+    })]
+  }) : /* @__PURE__ */ o(D, {
+    mouseEvent: "onMouseDown",
+    onClickAway: e.close,
+    children: /* @__PURE__ */ T("div", {
+      className: "relative h-auto w-auto",
+      children: [/* @__PURE__ */ o("div", {
+        className: "m-0 flex h-fit items-center justify-center p-0",
+        children: f
+      }), e.isOpen && /* @__PURE__ */ o(O, {
+        ...i,
+        popupState: e,
+        handleClear: y,
+        onSelect: w
+      })]
     })
   });
 };
 export {
-  J as StyledTimePicker
+  Z as StyledTimePicker
 };

package/dist/datetime/components/time-picker/StyledTimePicker.module.js

@@ -1,10 +1,10 @@
 var e = {
-  "styled-time-picker-root": "_styled-time-picker-root_ck82a_1",
-  "styled-time-picker-root_column": "_styled-time-picker-root_column_ck82a_4",
-  "styled-time-picker-root_cell": "_styled-time-picker-root_cell_ck82a_7",
-  "styled-time-picker-root_cell__cell-now": "_styled-time-picker-root_cell__cell-now_ck82a_10",
-  "styled-time-picker-root_cell__cell-selected": "_styled-time-picker-root_cell__cell-selected_ck82a_13",
-  "time-picker-surface": "_time-picker-surface_ck82a_17"
+  "styled-time-picker-root": "_styled-time-picker-root_qcipa_1",
+  "styled-time-picker-root_column": "_styled-time-picker-root_column_qcipa_4",
+  "styled-time-picker-root_cell": "_styled-time-picker-root_cell_qcipa_7",
+  "styled-time-picker-root_cell__cell-now": "_styled-time-picker-root_cell__cell-now_qcipa_10",
+  "styled-time-picker-root_cell__cell-selected": "_styled-time-picker-root_cell__cell-selected_qcipa_13",
+  "time-picker-surface": "_time-picker-surface_qcipa_17"
 };
 export {
   e as default

package/dist/datetime/components/time-picker/TimePickerPopper.js

@@ -1,73 +1,35 @@
-import { StyledButton as r } from "../../shared-components/button/StyledButton.js";
 import { bindPopper as l } from "../../../hooks/usePopupState.js";
-import { Paper as s } from "../../../components/mui-compat/Paper.js";
+import { Paper as n } from "../../../components/mui-compat/Paper.js";
 import { Fade as c } from "../../../components/mui-compat/Fade.js";
-import { Popper as f } from "../../../components/mui-compat/Popper.js";
-import h from "./StyledTimePicker.module.js";
-import { TimePickerBody as u } from "./components/TimePickerBody.js";
-import { EraserIcon as x } from "../../shared-components/EraserIcon.js";
-import { CheckIcon as k } from "../../shared-components/CheckIcon.js";
-import y from "clsx";
-import { jsx as t, jsxs as o } from "react/jsx-runtime";
-var I = (m) => {
-  const { popupState: e, dataTest: a, value: i, onSelect: n, handleClear: p } = m;
-  return /* @__PURE__ */ t(f, {
-    ...l(e),
+import { Popper as d } from "../../../components/mui-compat/Popper.js";
+import f from "./StyledTimePicker.module.js";
+import { TimePickerPanel as s } from "./components/TimePickerPanel.js";
+import u from "clsx";
+import { jsx as e } from "react/jsx-runtime";
+var C = (o) => {
+  const { popupState: r, dataTest: t, value: i, onSelect: m, handleClear: p } = o;
+  return /* @__PURE__ */ e(d, {
+    ...l(r),
     transition: !0,
     style: { zIndex: "1300" },
-    children: ({ TransitionProps: d }) => /* @__PURE__ */ t(c, {
-      ...d,
+    children: ({ TransitionProps: a }) => /* @__PURE__ */ e(c, {
+      ...a,
       timeout: 350,
-      children: /* @__PURE__ */ o(s, {
+      children: /* @__PURE__ */ e(n, {
         elevation: 0,
-        className: y(h["time-picker-surface"]),
+        className: u(f["time-picker-surface"]),
         style: { paddingBottom: "1px" },
-        children: [/* @__PURE__ */ t(u, {
-          dataTest: `${a}-time-picker-body`,
+        children: /* @__PURE__ */ e(s, {
+          dataTest: t,
           value: i,
-          onSelect: n
-        }), /* @__PURE__ */ o("div", {
-          style: {
-            display: "flex",
-            marginTop: "12px",
-            marginBottom: "12px",
-            justifyContent: "space-between"
-          },
-          children: [/* @__PURE__ */ t(r, {
-            dataTest: "time-picker-erase-button",
-            "data-testid": "time-picker-erase-button",
-            variant: "text",
-            onClick: p,
-            size: "small",
-            disabled: !i,
-            style: {
-              minWidth: "40px",
-              marginLeft: "10px"
-            },
-            children: /* @__PURE__ */ t(x, {
-              width: 24,
-              height: 24
-            })
-          }), /* @__PURE__ */ t(r, {
-            dataTest: "time-picker-confirm-button",
-            "data-testid": "time-picker-confirm-button",
-            variant: "contained",
-            size: "small",
-            onClick: () => e.close(),
-            style: {
-              minWidth: "40px",
-              marginRight: "16px"
-            },
-            children: /* @__PURE__ */ t(k, {
-              width: 20,
-              height: 20
-            })
-          })]
-        })]
+          onSelect: m,
+          handleClear: p,
+          onConfirm: () => r.close()
+        })
       })
     })
   });
 };
 export {
-  I as TimePickerPopper
+  C as TimePickerPopper
 };

package/dist/datetime/components/time-picker/components/TimePickerBody.js

@@ -1,24 +1,29 @@
-import m from "../StyledTimePicker.module.js";
-import { TimePickerColumn as l } from "./TimePickerColumn.js";
-import { useEffect as d, useRef as u } from "react";
-import { jsx as o, jsxs as n } from "react/jsx-runtime";
-var k = ({ value: t, onSelect: r, dataTest: c }) => {
-  const e = u(null);
-  return d(() => {
-    const i = e.current?.querySelectorAll("div.styled-time-picker-root_cell__cell-selected").length;
-    e.current?.querySelectorAll(i ? "div.styled-time-picker-root_cell__cell-selected" : "div.styled-time-picker-root_cell__cell-now").forEach((s) => s.scrollIntoView());
-  }, [e]), /* @__PURE__ */ n("div", {
-    ref: e,
-    "data-test": c,
-    className: m["styled-time-picker-root"],
-    children: [/* @__PURE__ */ o(l, {
+import f from "../StyledTimePicker.module.js";
+import { TimePickerColumn as s } from "./TimePickerColumn.js";
+import { useEffect as u, useRef as d } from "react";
+import { jsx as m, jsxs as p } from "react/jsx-runtime";
+var k = ({ value: l, onSelect: i, dataTest: n }) => {
+  const t = d(null);
+  return u(() => {
+    const r = t.current;
+    if (!r) return;
+    const c = r.querySelectorAll('[data-cell="selected"]');
+    (c.length ? c : r.querySelectorAll('[data-cell="now"]')).forEach((o) => {
+      const e = o.parentElement;
+      e && (e.scrollTop = o.offsetTop - e.offsetTop - (e.clientHeight - o.clientHeight) / 2);
+    });
+  }, [t]), /* @__PURE__ */ p("div", {
+    ref: t,
+    "data-test": n,
+    className: f["styled-time-picker-root"],
+    children: [/* @__PURE__ */ m(s, {
       type: "hours",
-      value: t,
-      onSelect: r
-    }), /* @__PURE__ */ o(l, {
+      value: l,
+      onSelect: i
+    }), /* @__PURE__ */ m(s, {
       type: "minutes",
-      value: t,
-      onSelect: r
+      value: l,
+      onSelect: i
     })]
   });
 };

package/dist/datetime/components/time-picker/components/TimePickerColumn.js

@@ -1,18 +1,19 @@
 import r from "../StyledTimePicker.module.js";
-import _ from "clsx";
-import { jsx as c } from "react/jsx-runtime";
-import { getHours as a, getMinutes as k, set as y } from "date-fns";
-var b = ({ type: l, value: o, onSelect: n }) => {
-  const s = /* @__PURE__ */ new Date(), t = l === "hours", m = t ? 24 : 12, u = t ? s.getHours() : s.getMinutes();
-  return /* @__PURE__ */ c("div", {
+import a from "clsx";
+import { jsx as n } from "react/jsx-runtime";
+import { getHours as _, getMinutes as k, set as w } from "date-fns";
+var b = ({ type: m, value: o, onSelect: d }) => {
+  const s = /* @__PURE__ */ new Date(), t = m === "hours", u = t ? 24 : 12, p = t ? s.getHours() : s.getMinutes();
+  return /* @__PURE__ */ n("div", {
     className: r["styled-time-picker-root_column"],
-    children: new Array(m).fill(null).map((f, i) => {
-      const e = t ? i : i * 5, d = o && e === (t ? a(o) : k(o)), p = u == e;
-      return /* @__PURE__ */ c("button", {
+    children: new Array(u).fill(null).map((y, i) => {
+      const e = t ? i : i * 5, l = o && e === (t ? _(o) : k(o)), c = p == e;
+      return /* @__PURE__ */ n("button", {
         type: "button",
-        className: _("border-0", r["styled-time-picker-root_cell"], p && r["styled-time-picker-root_cell__cell-now"], d && r["styled-time-picker-root_cell__cell-selected"]),
+        "data-cell": l ? "selected" : c ? "now" : void 0,
+        className: a("border-0", r["styled-time-picker-root_cell"], c && r["styled-time-picker-root_cell__cell-now"], l && r["styled-time-picker-root_cell__cell-selected"]),
         onClick: () => {
-          n(y(o ?? /* @__PURE__ */ new Date(), t ? { hours: e } : { minutes: e }));
+          d(w(o ?? /* @__PURE__ */ new Date(), t ? { hours: e } : { minutes: e }));
         },
         children: e.toString().padStart(2, "0")
       }, e);

package/dist/datetime/components/time-picker/components/TimePickerPanel.js

@@ -0,0 +1,50 @@
+import { StyledButton as e } from "../../../shared-components/button/StyledButton.js";
+import { TimePickerBody as d } from "./TimePickerBody.js";
+import { EraserIcon as s } from "../../../shared-components/EraserIcon.js";
+import { CheckIcon as c } from "../../../shared-components/CheckIcon.js";
+import { Fragment as p, jsx as t, jsxs as r } from "react/jsx-runtime";
+var g = ({ dataTest: n, value: i, onSelect: a, handleClear: m, onConfirm: o }) => /* @__PURE__ */ r(p, { children: [/* @__PURE__ */ t(d, {
+  dataTest: `${n}-time-picker-body`,
+  value: i,
+  onSelect: a
+}), /* @__PURE__ */ r("div", {
+  style: {
+    display: "flex",
+    marginTop: "12px",
+    marginBottom: "12px",
+    justifyContent: "space-between"
+  },
+  children: [/* @__PURE__ */ t(e, {
+    dataTest: "time-picker-erase-button",
+    "data-testid": "time-picker-erase-button",
+    variant: "text",
+    onClick: m,
+    size: "small",
+    disabled: !i,
+    style: {
+      minWidth: "40px",
+      marginLeft: "10px"
+    },
+    children: /* @__PURE__ */ t(s, {
+      width: 24,
+      height: 24
+    })
+  }), /* @__PURE__ */ t(e, {
+    dataTest: "time-picker-confirm-button",
+    "data-testid": "time-picker-confirm-button",
+    variant: "contained",
+    size: "small",
+    onClick: o,
+    style: {
+      minWidth: "40px",
+      marginRight: "16px"
+    },
+    children: /* @__PURE__ */ t(c, {
+      width: 20,
+      height: 20
+    })
+  })]
+})] });
+export {
+  g as TimePickerPanel
+};

package/dist/src/datetime/components/time-picker/StyledTimePicker.d.ts

@@ -7,6 +7,7 @@ import { StyledTimePickerProps } from './types';
  * The dropdown follows the **Menus** surface (delta-300 border + Menus shadow `0 2 4 rgba(34,33,51,
  * .15)`): scrollable hour/minute columns of 36px cells — hover delta-50, "now" gama-50 (like the
  * calendar "today"), selected gama-500 white — plus an eraser + confirm footer. State (Enabled/Focus/
- * Error/Disabled) ← the field. Non-annotated props are behavioral.
+ * Error/Disabled) ← the field. On mobile (≤768px) the same panel opens in a bottom-sheet `Drawer`
+ * instead of the popper, matching `StyledDatePicker`. Non-annotated props are behavioral.
  */
 export declare const StyledTimePicker: React.FC<StyledTimePickerProps>;

package/dist/src/datetime/components/time-picker/components/TimePickerPanel.d.ts

@@ -0,0 +1,12 @@
+export interface TimePickerPanelProps {
+    dataTest: string;
+    value?: Date;
+    onSelect: (date: Date | undefined) => void;
+    handleClear: () => void;
+    onConfirm: () => void;
+}
+/**
+ * Hour/minute columns + eraser/confirm footer — the inner picker surface shared by the desktop
+ * popper (`TimePickerPopper`) and the mobile bottom-sheet drawer (`StyledTimePicker`).
+ */
+export declare const TimePickerPanel: React.FC<TimePickerPanelProps>;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.71.0",
+    "version": "3.72.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",