npm - asma-ui-core - Versions diffs - 3.70.1 → 3.72.0 - Mend

asma-ui-core 3.70.1 → 3.72.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/dist/components/feedback/snack-bar/components/StyledInfoSnackbar.js CHANGED Viewed

@@ -1,36 +1,36 @@
 import { omit as m } from "../../../../helpers/omit.js";
 import { LoadingIcon as d } from "../../../icons/loading-icon/LoadingIcon.js";
-import { CloseIcon as f } from "../../../icons/close-icon/CloseIcon.js";
+import { CloseIcon as h } from "../../../icons/close-icon/CloseIcon.js";
 import p from "clsx";
-import { forwardRef as h } from "react";
-import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { jsx as r, jsxs as u } from "react/jsx-runtime";
 import { SnackbarContent as g, useSnackbar as b } from "notistack";
-var j = h((e, i) => {
-  const { id: a, message: n, closeButton: o, type: l, ...s } = m(e, [
+var j = f((e, i) => {
+  const { id: n, message: a, closeButton: o, type: l, ...s } = m(e, [
     "anchorOrigin",
     "autoHideDuration",
     "hideIconVariant",
     "iconVariant",
     "persist"
-  ]), { closeSnackbar: c } = b(), r = l === "loading";
-  return /* @__PURE__ */ t(g, {
+  ]), { closeSnackbar: c } = b(), t = l === "loading";
+  return /* @__PURE__ */ r(g, {
     ref: i,
     role: "alert",
     ...s,
     children: /* @__PURE__ */ u("div", {
-      className: p("relative flex w-full items-center justify-center", r && "pl-8", o && "pr-8"),
+      className: p("relative flex w-full items-center justify-center", t && "pl-8", o && "pr-8"),
       children: [
-        r ? /* @__PURE__ */ t(d, {
+        t ? /* @__PURE__ */ r(d, {
           width: 20,
           height: 20,
           className: "absolute left-0 top-1/2 -translate-y-1/2"
         }) : null,
-        /* @__PURE__ */ t("div", { children: n }),
-        o ? /* @__PURE__ */ t(f, {
-          onClick: () => c(a),
+        /* @__PURE__ */ r("div", { children: a }),
+        o ? /* @__PURE__ */ r(h, {
+          onClick: () => c(n),
           width: 20,
           height: 20,
-          className: "absolute right-0 top-1/2 -translate-y-1/2"
+          className: "absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer rounded hover:bg-white/20"
         }) : null
       ]
     })

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

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