asma-ui-core 3.109.0 → 3.110.0

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

@@ -1,115 +1,119 @@
-import { isOverlayBackEnabled as I, useBackCloses as j } from "../../../hooks/useBackCloses.hook.js";
-import { useIsMobileView as M } from "../../hooks/useWindowWidthSize.hook.js";
-import { StyledDrawer as A } from "../../../components/navigation/drawer/StyledDrawer.js";
-import { useBackNavigationClose as q } from "../../hooks/useBackNavigationClose.hook.js";
-import { usePopupState as F } from "../../../hooks/usePopupState.js";
-import { ClickAwayListener as K } from "../../../components/mui-compat/ClickAwayListener.js";
-import { isBeforeMinTime as E } from "./helpers/minTime.js";
-import { TimePickerPanel as z } from "./components/TimePickerPanel.js";
-import { TimePickerPopper as G } from "./TimePickerPopper.js";
-import { getTimeFromValue as g } from "./helpers/getTimeFromValue.js";
-import { TimePickerInput as J } from "./TimePickerInput.js";
-import { useEffect as Q, useState as V } from "react";
-import { jsx as r, jsxs as B } from "react/jsx-runtime";
-import { format as w, isBefore as R, isValid as U } from "date-fns";
-var le = (i) => {
-  const { value: s, onSelect: n, notBeforeTime: d, minTime: c } = i, o = F({
+import { cn as g } from "../../../helpers/cn.js";
+import { isOverlayBackEnabled as M, useBackCloses as A } from "../../../hooks/useBackCloses.hook.js";
+import { useIsMobileView as q } from "../../hooks/useWindowWidthSize.hook.js";
+import { StyledDrawer as F } from "../../../components/navigation/drawer/StyledDrawer.js";
+import { useBackNavigationClose as K } from "../../hooks/useBackNavigationClose.hook.js";
+import { usePopupState as W } from "../../../hooks/usePopupState.js";
+import { ClickAwayListener as z } from "../../../components/mui-compat/ClickAwayListener.js";
+import { isBeforeMinTime as w } from "./helpers/minTime.js";
+import { TimePickerPanel as G } from "./components/TimePickerPanel.js";
+import { TimePickerPopper as J } from "./TimePickerPopper.js";
+import { getTimeFromValue as B } from "./helpers/getTimeFromValue.js";
+import { timePickerWidthProps as O } from "./helpers/timePickerWidth.js";
+import { TimePickerInput as Q } from "./TimePickerInput.js";
+import { useEffect as R, useState as E } from "react";
+import { jsx as r, jsxs as D } from "react/jsx-runtime";
+import { format as V, isBefore as U, isValid as X } from "date-fns";
+var fe = (o) => {
+  const { value: l, onSelect: n, notBeforeTime: d, minTime: c } = o, t = W({
     variant: "popper",
     popupId: "time-picker-popper"
-  }), m = M();
-  j({
-    active: o.isOpen,
-    requestClose: o.close
-  }), q({
-    open: m && o.isOpen && !I(),
-    onClose: o.close
+  }), m = q();
+  A({
+    active: t.isOpen,
+    requestClose: t.close
+  }), K({
+    open: m && t.isOpen && !M(),
+    onClose: t.close
   });
-  const { isOpen: x, anchorEl: C, close: h } = o;
-  Q(() => {
-    if (!x || m) return;
-    const e = (t) => {
-      C?.contains(document.activeElement) && (t.key === "Escape" ? (t.preventDefault(), t.stopPropagation(), h()) : t.key === "Tab" && h());
+  const { isOpen: P, anchorEl: x, close: h } = t;
+  R(() => {
+    if (!P || m) return;
+    const e = (i) => {
+      x?.contains(document.activeElement) && (i.key === "Escape" ? (i.preventDefault(), i.stopPropagation(), h()) : i.key === "Tab" && h());
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
   }, [
+    P,
     x,
-    C,
     h,
     m
   ]);
-  const P = s ? w(s, "HH:mm") : "", [O, u] = V(P), [T, a] = V(!1), [D, l] = V(!0), v = T ? O : P, k = (e) => !e || !d || !U(d) || !R(e, d), f = v.length === 5 ? g(v, s) : null, H = f ? k(f) : !0, L = (e) => {
-    const t = e.target.value;
-    if (a(!0), u(t), t.length !== 5) {
-      l(!1);
+  const C = l ? V(l, "HH:mm") : "", [H, u] = E(C), [b, a] = E(!1), [L, s] = E(!0), v = b ? H : C, k = (e) => !e || !d || !X(d) || !U(e, d), f = v.length === 5 ? B(v, l) : null, N = f ? k(f) : !0, I = (e) => {
+    const i = e.target.value;
+    if (a(!0), u(i), i.length !== 5) {
+      s(!1);
       return;
     }
-    const p = g(t, s);
+    const p = B(i, l);
     if (!p) {
-      n(void 0), l(!1);
+      n(void 0), s(!1);
       return;
     }
-    l(!0), !E(p, c) && (k(p) ? (n(p), a(!1), o.close()) : n(void 0));
-  }, S = (e) => {
-    if (!(e && E(e, c))) {
-      if (l(!0), k(e)) {
-        n(e), u(e ? w(e, "HH:mm") : ""), a(!1);
+    s(!0), !w(p, c) && (k(p) ? (n(p), a(!1), t.close()) : n(void 0));
+  }, T = (e) => {
+    if (!(e && w(e, c))) {
+      if (s(!0), k(e)) {
+        n(e), u(e ? V(e, "HH:mm") : ""), a(!1);
         return;
       }
-      n(void 0), u(e ? w(e, "HH:mm") : ""), a(!0);
+      n(void 0), u(e ? V(e, "HH:mm") : ""), a(!0);
     }
-  }, N = () => {
-    T && f && E(f, c) && a(!1);
-  }, b = () => {
-    n(void 0), u(""), a(!1), l(!0);
-  }, y = /* @__PURE__ */ r(J, {
-    ...i,
-    popupState: o,
+  }, j = () => {
+    b && f && w(f, c) && a(!1);
+  }, S = () => {
+    n(void 0), u(""), a(!1), s(!0);
+  }, y = /* @__PURE__ */ r(Q, {
+    ...o,
+    popupState: t,
     localValue: v,
-    isValidTime: D,
-    isValidEndTime: H,
-    handleChange: L,
-    handleBlur: N
+    isValidTime: L,
+    isValidEndTime: N,
+    handleChange: I,
+    handleBlur: j
   });
-  return i.disabled || i.readOnly ? y : m ? /* @__PURE__ */ B("div", {
-    className: "relative h-auto w-auto",
+  return o.disabled || o.readOnly ? y : m ? /* @__PURE__ */ D("div", {
+    className: g("relative h-auto", typeof o.width == "number" && "w-auto"),
+    ...O(o.width),
     children: [/* @__PURE__ */ r("div", {
       className: "m-0 flex h-fit items-center justify-center p-0",
       children: y
-    }), /* @__PURE__ */ r(A, {
+    }), /* @__PURE__ */ r(F, {
       anchor: "bottom",
-      open: o.isOpen,
-      onClose: o.close,
-      anchorEl: o.anchorEl,
+      open: t.isOpen,
+      onClose: t.close,
+      anchorEl: t.anchorEl,
       registerBackClose: !1,
       children: /* @__PURE__ */ r("div", {
         className: "mx-auto w-full max-w-[360px] px-4 pb-[max(1rem,env(safe-area-inset-bottom))] pt-2",
-        children: /* @__PURE__ */ r(z, {
-          dataTest: i.dataTest,
-          value: s,
+        children: /* @__PURE__ */ r(G, {
+          dataTest: o.dataTest,
+          value: l,
           minTime: c,
-          onSelect: S,
-          handleClear: b,
-          onConfirm: o.close
+          onSelect: T,
+          handleClear: S,
+          onConfirm: t.close
         })
       })
     })]
-  }) : /* @__PURE__ */ r(K, {
+  }) : /* @__PURE__ */ r(z, {
     mouseEvent: "onMouseDown",
-    onClickAway: o.close,
-    children: /* @__PURE__ */ B("div", {
-      className: "relative h-auto w-auto",
+    onClickAway: t.close,
+    children: /* @__PURE__ */ D("div", {
+      className: g("relative h-auto", typeof o.width == "number" && "w-auto"),
+      ...O(o.width),
       children: [/* @__PURE__ */ r("div", {
         className: "m-0 flex h-fit items-center justify-center p-0",
         children: y
-      }), o.isOpen && /* @__PURE__ */ r(G, {
-        ...i,
-        popupState: o,
-        handleClear: b,
-        onSelect: S
+      }), t.isOpen && /* @__PURE__ */ r(J, {
+        ...o,
+        popupState: t,
+        handleClear: S,
+        onSelect: T
       })]
     })
   });
 };
 export {
-  le as StyledTimePicker
+  fe as StyledTimePicker
 };

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

@@ -1,61 +1,63 @@
-import { ClockOutlineIcon as P } from "../../../components/icons/clock-outline-icon/ClockOutlineIcon.js";
+import { ClockOutlineIcon as E } from "../../../components/icons/clock-outline-icon/ClockOutlineIcon.js";
+import { fieldLabelAboveClass as N } from "../../../components/inputs/field-styles.js";
 import { StyledInputField as y } from "../../../components/inputs/input-field/StyledInputField.js";
-import { getTitleLabelling as R } from "../../helpers/getTitleLabelling.js";
-import { useInputMask as v } from "../../../helpers/inputMask.js";
-import { HelperText as w, defaultTimePickerHelperMessages as A } from "./components/HelperText.js";
-import { useEffect as H, useId as M, useRef as V } from "react";
-import { jsx as l, jsxs as j } from "react/jsx-runtime";
-var q = (x) => {
-  const { placeholder: f, disabled: e, inputClassName: h, dataTest: p, width: o, error: g, helperText: T, label: m, locale: k = "en", popupState: i, handleChange: C, handleBlur: I, isValidTime: d, isValidEndTime: c, localValue: b, title: a, readOnly: t, inputAriaProps: E } = x, N = v({
+import { getTitleLabelling as A } from "../../helpers/getTitleLabelling.js";
+import { useInputMask as R } from "../../../helpers/inputMask.js";
+import { HelperText as w, defaultTimePickerHelperMessages as H } from "./components/HelperText.js";
+import { timePickerWidthProps as M } from "./helpers/timePickerWidth.js";
+import { useEffect as V, useId as W, useRef as j } from "react";
+import { jsx as o, jsxs as z } from "react/jsx-runtime";
+var K = (f) => {
+  const { placeholder: h, disabled: e, inputClassName: x, dataTest: m, width: t, error: g, helperText: k, label: p, locale: T = "en", popupState: i, handleChange: C, handleBlur: I, isValidTime: d, isValidEndTime: c, localValue: P, title: l, readOnly: a, inputAriaProps: b } = f, v = R({
     mask: "xx:xx",
     maskChar: "x",
     showMask: !1
-  }), s = !d || !c || !!g, n = V(null), u = M();
-  return H(() => {
+  }), s = !d || !c || !!g, n = j(null), u = W();
+  return V(() => {
     n.current && i.setAnchorEl(n.current);
-  }, []), /* @__PURE__ */ j("div", {
-    style: { height: t ? "40px" : "75px" },
-    children: [a && /* @__PURE__ */ l("div", {
+  }, []), /* @__PURE__ */ z("div", {
+    ...M(t),
+    children: [l && /* @__PURE__ */ o("div", {
       id: u,
-      className: "pb-1 font-roboto font-semibold text-delta-800",
-      children: a
-    }), /* @__PURE__ */ l(y, {
-      inputRef: N,
+      className: N({ disabled: e }),
+      children: l
+    }), /* @__PURE__ */ o(y, {
+      inputRef: v,
       autoComplete: "off",
       type: "text",
-      dataTest: p,
-      "data-testid": p,
-      placeholder: f,
+      dataTest: m,
+      "data-testid": m,
+      placeholder: h,
       size: "small",
       error: s,
-      helperText: /* @__PURE__ */ l(w, {
+      helperText: /* @__PURE__ */ o(w, {
         isValidTime: d,
         isValidEndTime: c,
         error: s,
-        localization: k,
-        helperText: T,
-        messages: A
+        localization: T,
+        helperText: k,
+        messages: H
       }),
       onChange: C,
       onBlur: I,
       slotProps: {
-        htmlInput: R({
-          title: a,
+        htmlInput: A({
+          title: l,
           titleId: u,
-          label: m,
-          inputAriaProps: E
+          label: p,
+          inputAriaProps: b
         }),
         input: {
           ref: n,
           onClick: (r) => {
-            !e && !t && i.open(r);
+            !e && !a && i.open(r);
           },
-          endAdornment: /* @__PURE__ */ l(P, {
+          endAdornment: /* @__PURE__ */ o(E, {
             width: 24,
             height: 24,
             className: e ? "text-delta-300" : "text-delta-700",
             onClick: (r) => {
-              r.stopPropagation(), !e && !t && i.open(r);
+              r.stopPropagation(), !e && !a && i.open(r);
             }
           })
         },
@@ -64,19 +66,19 @@ var q = (x) => {
           hideErrorIcon: !0
         }
       },
-      value: b,
-      sx: {
-        maxWidth: o ?? 130,
-        width: o,
-        minWidth: o
-      },
+      value: P,
+      sx: typeof t == "number" ? {
+        maxWidth: t,
+        width: t,
+        minWidth: t
+      } : void 0,
       disabled: e,
-      readOnly: t,
-      className: h,
-      label: m
+      readOnly: a,
+      className: x,
+      label: p
     })]
   });
 };
 export {
-  q as TimePickerInput
+  K as TimePickerInput
 };

package/dist/datetime/components/time-picker/helpers/timePickerWidth.js

@@ -0,0 +1,12 @@
+import { fieldWidthStyle as r } from "../../../../components/inputs/field-styles.js";
+var o = (t) => {
+  if (typeof t == "number") return {};
+  const e = t ?? "xs";
+  return {
+    "data-field-width": e,
+    style: r(e)
+  };
+};
+export {
+  o as timePickerWidthProps
+};

package/dist/helpers/CharacterCounter.js

@@ -0,0 +1,21 @@
+import { cn as c } from "./cn.js";
+import { Fragment as i, jsx as n, jsxs as h } from "react/jsx-runtime";
+var m = {
+  en: (r, a) => `${r} of ${a} characters`,
+  no: (r, a) => `${r} av ${a} tegn`
+}, l = (r, a) => a - r <= Math.max(1, Math.min(10, Math.ceil(a * 0.2))), p = ({ id: r, length: a, limit: e, locale: o = "en", className: s }) => {
+  const t = m[o](a, e);
+  return /* @__PURE__ */ h(i, { children: [/* @__PURE__ */ n("span", {
+    id: r,
+    "aria-hidden": "true",
+    className: c("font-roboto text-sm leading-5 text-delta-600", s),
+    children: t
+  }), /* @__PURE__ */ n("span", {
+    "aria-live": "polite",
+    className: "sr-only",
+    children: l(a, e) ? t : ""
+  })] });
+};
+export {
+  p as CharacterCounter
+};