asma-ui-core 3.108.3 → 3.109.0

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

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

package/dist/datetime/hooks/useBackNavigationClose.hook.js

@@ -0,0 +1,19 @@
+import { useEffect as i, useRef as c } from "react";
+var n = "__asmaPickerBack", u = ({ open: r, onClose: e }) => {
+  const o = c(e);
+  i(() => {
+    o.current = e;
+  }, [e]), i(() => {
+    if (!r) return;
+    const t = window.rawWindow ?? window, s = crypto.randomUUID(), a = () => o.current();
+    return t.history.pushState({
+      ...t.history.state,
+      [n]: s
+    }, "", t.location.href), t.addEventListener("popstate", a), () => {
+      t.removeEventListener("popstate", a), t.history.state?.[n] === s && t.history.back();
+    };
+  }, [r]);
+};
+export {
+  u as useBackNavigationClose
+};

package/dist/src/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.d.ts

@@ -1,5 +1,5 @@
 import { DynamicSelectOption, StyledDynamicSelectProps } from '../types';
-type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick<StyledDynamicSelectProps<TOption>, 'dataTest' | 'options' | 'title' | 'valueKey' | 'labelKey' | 'renderLabel'> & {
+type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick<StyledDynamicSelectProps<TOption>, 'dataTest' | 'options' | 'title' | 'titleSize' | 'valueKey' | 'labelKey' | 'renderLabel'> & {
     value: TOption | null;
 };
 /**
@@ -11,5 +11,5 @@ type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick
  * buttons, and read-only draws neither. No value → `-`, the same placeholder the chip variant shows.
  * Multiple selects never reach this component.
  */
-export declare const DynamicSelectReadOnlyValue: <TOption extends DynamicSelectOption>({ dataTest, options, value, title, valueKey, labelKey, renderLabel, }: DynamicSelectReadOnlyValueProps<TOption>) => JSX.Element;
+export declare const DynamicSelectReadOnlyValue: <TOption extends DynamicSelectOption>({ dataTest, options, value, title, titleSize, valueKey, labelKey, renderLabel, }: DynamicSelectReadOnlyValueProps<TOption>) => JSX.Element;
 export {};

package/dist/src/components/inputs/dynamic-select/components/DynamicSelectTitle.d.ts

@@ -0,0 +1,14 @@
+import { DynamicSelectOption, StyledDynamicSelectProps } from '../types';
+type DynamicSelectTitleProps = Pick<StyledDynamicSelectProps<DynamicSelectOption>, 'title' | 'titleSize'> & {
+    id?: string;
+};
+/**
+ * The title above every dynamic select variant — chips, autocomplete and the read-only value — so all
+ * three read the same and a consumer never stacks its own form label (with its input-title bottom
+ * padding) on top of the select.
+ *
+ * `base` = Body Base SemiBold 16/24; `lg` = Section title SemiBold 18/28 — both `text-icon/title-label`
+ * (delta-800), the `StyledFormLabel` sizes of the same names.
+ */
+export declare const DynamicSelectTitle: ({ title, titleSize, id }: DynamicSelectTitleProps) => JSX.Element | null;
+export {};

package/dist/src/components/inputs/dynamic-select/types.d.ts

@@ -34,8 +34,14 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
     readOnly?: boolean;
     /** Prevents the built-in clear button from appearing even when a value is set. Applies to autocomplete only. */
     disableClearable?: boolean;
-    /** @figmaProp Title (Body Base SemiBold 16, text-icon/title-label delta-800) above the control. */
-    title?: string;
+    /**
+     * @figmaProp Title (text-icon/title-label delta-800) above the control. A node, so a title can carry
+     * an icon or a required marker. Prefer it over a separate form label stacked on the select: the
+     * select owns the title-to-control gap, which is tighter in read-only (title over plain text).
+     */
+    title?: React.ReactNode;
+    /** @figmaProp none — title typography: `'base'` Body Base SemiBold 16/24 (default), `'lg'` Section title 18/28. */
+    titleSize?: 'base' | 'lg';
     /** @figmaProp none — app size (chips/buttons). Defaults to `'medium'`. */
     size?: 'small' | 'medium';
     /**

package/dist/src/components/navigation/drawer/StyledDrawer.d.ts

@@ -22,6 +22,8 @@ export interface DrawerProps {
     };
     /** Trigger element — when inside a modal `<dialog>`, portal into it so the sheet is interactive. */
     anchorEl?: Element | null;
+    /** Set `false` when a wrapper already owns the Back-close registration. */
+    registerBackClose?: boolean;
     children?: ReactNode;
 }
 /**

package/dist/src/components/utils/bottom-sheet/StyledBottomSheet.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { PopoverSlot } from '../popover/PopoverSheet';
 export type BottomSheetCloseReason = 'closeButton' | 'scrim' | 'escape' | 'drag' | 'viewResults' | 'action';
 /** @figmaNode 9Q7C7JYPgnUSsrX1L8v40t#5354-169163 (Ad-Voca-concept · "_bottom sheet") */
@@ -41,6 +41,10 @@ export interface StyledBottomSheetProps {
     closeLabel?: string;
     /** @figmaProp none — style escape hatch, applied to the sheet container */
     className?: string;
+    /** Set `false` when a wrapper already owns the Back-close registration. */
+    registerBackClose?: boolean;
+    /** Logical owner supplied by a wrapper that must keep one identity across responsive variants. */
+    ownerRef?: RefObject<Element | null>;
 }
 /**
  * ASMA Design System **Bottom Sheet** (ASMA-8184) — the mobile (0–743px) form of the Action popover:
@@ -56,4 +60,4 @@ export interface StyledBottomSheetProps {
  * Focus moves to the sheet on open (so the title is announced first) and back to the trigger on
  * close. `PopoverSheet` with `variant='action'` renders this automatically below 744px.
  */
-export declare const StyledBottomSheet: ({ dataTest, id, open, onClose, title, ariaLabel, children, viewResultsAction, resetAction, footerActions, resultCount, closeLabel, className, }: StyledBottomSheetProps) => JSX.Element | null;
+export declare const StyledBottomSheet: ({ dataTest, id, open, onClose, title, ariaLabel, children, viewResultsAction, resetAction, footerActions, resultCount, closeLabel, className, registerBackClose, ownerRef, }: StyledBottomSheetProps) => JSX.Element | null;

package/dist/src/components/utils/popover/StyledPopover.d.ts

@@ -35,6 +35,8 @@ export interface StyledPopoverProps {
      * dialog in the same tick it opens.
      */
     keepMounted?: boolean;
+    /** Set `false` when a wrapper already owns the Back-close registration. */
+    registerBackClose?: boolean;
 }
 /**
  * @figmaNode none — no standalone Figma component
@@ -51,4 +53,4 @@ export interface StyledPopoverProps {
  * mapping to MUI's `onClose(event, reason)`. `anchorOrigin`/`transformOrigin`/`slotProps.paper`
  * preserved (DEC-003). TASK-302.
  */
-export declare const StyledPopover: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, slotProps, onClick, children, keepMounted, tabIntoContent, }: StyledPopoverProps) => JSX.Element | null;
+export declare const StyledPopover: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, slotProps, onClick, children, keepMounted, tabIntoContent, registerBackClose, }: StyledPopoverProps) => JSX.Element | null;

package/dist/src/datetime/hooks/useBackNavigationClose.hook.d.ts

@@ -0,0 +1,5 @@
+/** Keeps the pre-adapter picker Back behavior while the host rollout flag is off. */
+export declare const useBackNavigationClose: ({ open, onClose }: {
+    open: boolean;
+    onClose: () => void;
+}) => void;

package/package.json

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