asma-ui-core 3.100.1 → 3.101.0

package/dist/components/feedback/minimizable-dialog/MinimizableDialog.js

@@ -170,7 +170,7 @@ var Oe = ({ onCloseText: u = "", onMinimizeText: j = "", onExpandText: C = "", o
       }), /* @__PURE__ */ t("div", {
         className: J("flex flex-col", d && !i && "h-[87dvh]"),
         children: [/* @__PURE__ */ e("div", {
-          className: "flex-grow overflow-y-auto",
+          className: "flex-grow overflow-y-auto overscroll-contain",
           children: typeof x == "function" ? x({ fullScreen: d }) : x
         }), (Array.isArray(n) && n.length || typeof n == "function") && m || L ? /* @__PURE__ */ t("div", {
           className: h("flex items-center justify-between border-0 border-t-[1px] border-solid border-delta-200 bg-white p-4", P),

package/dist/components/feedback/minimizable-dialog/v2/MinimizableDialogV2.js

@@ -152,7 +152,7 @@ var ue = (g) => {
           children: o
         })]
       }), /* @__PURE__ */ e("div", {
-        className: a(t && "hidden", "flex flex-grow flex-col overflow-y-auto"),
+        className: a(t && "hidden", "flex flex-grow flex-col overflow-y-auto overscroll-contain"),
         children: O
       })]
     })

package/dist/components/inputs/dynamic-select/StyledDynamicSelect.js

@@ -1,17 +1,18 @@
-import { DynamicInteractiveChipGroup as m } from "./components/DynamicInteractiveChipGroup.js";
-import { DynamicSelectAutocomplete as i } from "./components/DynamicSelectAutocomplete.js";
-import { forwardRef as n } from "react";
-import { jsx as o } from "react/jsx-runtime";
-var p = n((t, r) => {
-  const { options: e } = t;
-  return e.length > 0 && e.length <= 5 ? /* @__PURE__ */ o(m, {
+import { DynamicInteractiveChipGroup as i } from "./components/DynamicInteractiveChipGroup.js";
+import { DynamicSelectAutocomplete as n } from "./components/DynamicSelectAutocomplete.js";
+import { DynamicSelectReadOnlyValue as o } from "./components/DynamicSelectReadOnlyValue.js";
+import { forwardRef as l } from "react";
+import { jsx as e } from "react/jsx-runtime";
+var d = l((t, r) => {
+  const { options: m } = t;
+  return t.readOnly && !t.multiple ? /* @__PURE__ */ e(o, { ...t }) : m.length > 0 && m.length <= 5 ? /* @__PURE__ */ e(i, {
     ...t,
     ref: r
-  }) : /* @__PURE__ */ o(i, {
+  }) : /* @__PURE__ */ e(n, {
     ...t,
     ref: r
   });
 });
 export {
-  p as StyledDynamicSelect
+  d as StyledDynamicSelect
 };

package/dist/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.js

@@ -0,0 +1,20 @@
+import { cn as u } from "../../../../helpers/cn.js";
+import { jsx as d, jsxs as x } from "react/jsx-runtime";
+var g = ({ dataTest: a, options: c, value: t, title: n, size: i = "medium", valueKey: o = "value", labelKey: m = "label", renderLabel: r }) => {
+  const s = (e) => typeof e == "object" ? e?.[o] : e, f = (e) => typeof e == "object" ? e?.[m]?.toString() ?? "" : e?.toString() ?? "", l = t == null ? null : c.find((e) => s(e) === s(t)) ?? t;
+  return /* @__PURE__ */ x("div", {
+    "data-testid": `${a}-read-only`,
+    className: "flex flex-col gap-y-1",
+    children: [n && /* @__PURE__ */ d("span", {
+      className: "text-base font-semibold text-delta-800",
+      children: n
+    }), /* @__PURE__ */ d("div", {
+      "data-testid": `${a}-read-only-value`,
+      className: u("text-delta-700", i === "small" ? "text-sm/5" : "text-base/6"),
+      children: l === null ? "-" : r ? r(l) : f(l)
+    })]
+  });
+};
+export {
+  g as DynamicSelectReadOnlyValue
+};

package/dist/components/utils/popover/PopoverSheet.js

@@ -1,66 +1,72 @@
-import { cn as re } from "../../../helpers/cn.js";
-import { firstTabbable as ne } from "../../../helpers/focusable.js";
-import { TOP_LAYER_PROPS as ie, TOP_LAYER_RESET_STYLE as se, getOpenModalDialogAncestor as ae, shouldUsePopoverTopLayer as le, useTopLayerRef as ce } from "../../../hooks/useTopLayer.hook.js";
-import { StyledButton as ue } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as de } from "../../../hooks/useMediaQuery.hook.js";
-import { useDebouncedValue as fe } from "../../../hooks/useDebouncedValue.hook.js";
-import { useFocusTrap as pe } from "../../../hooks/useFocusTrap.hook.js";
-import { formatResultsLabel as me } from "../bottom-sheet/formatResultsLabel.js";
-import { StyledBottomSheet as ge } from "../bottom-sheet/StyledBottomSheet.js";
-import { PopoverAnatomy as ve } from "./PopoverAnatomy.js";
-import { useCallback as v, useEffect as y, useId as he, useRef as T, useState as h } from "react";
-import { Fragment as N, jsx as l, jsxs as W } from "react/jsx-runtime";
-import { FloatingPortal as xe, autoUpdate as _e, flip as Pe, offset as be, shift as Re, size as ye, useDismiss as Te, useFloating as Ee, useInteractions as Me, useMergeRefs as Se } from "@floating-ui/react";
-var we = 240, Ae = {
+import { cn as ie } from "../../../helpers/cn.js";
+import { firstTabbable as se } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as ae, TOP_LAYER_RESET_STYLE as le, getOpenModalDialogAncestor as ce, shouldUsePopoverTopLayer as de, useTopLayerRef as ue } from "../../../hooks/useTopLayer.hook.js";
+import { StyledButton as fe } from "../../inputs/button/StyledButton.js";
+import { useMobileMediaQuery as pe } from "../../../hooks/useMediaQuery.hook.js";
+import { useDebouncedValue as me } from "../../../hooks/useDebouncedValue.hook.js";
+import { useFocusTrap as ge } from "../../../hooks/useFocusTrap.hook.js";
+import { formatResultsLabel as he } from "../bottom-sheet/formatResultsLabel.js";
+import { StyledBottomSheet as ve } from "../bottom-sheet/StyledBottomSheet.js";
+import { PopoverAnatomy as xe } from "./PopoverAnatomy.js";
+import { useCallback as v, useEffect as R, useId as _e, useRef as T, useState as l } from "react";
+import { Fragment as N, jsx as c, jsxs as B } from "react/jsx-runtime";
+import { FloatingPortal as be, autoUpdate as Pe, flip as ye, offset as Re, shift as Te, size as Ee, useDismiss as Me, useFloating as Se, useInteractions as we, useMergeRefs as Ae } from "@floating-ui/react";
+var Oe = 240, Fe = {
   info: 472,
   action: 472
-}, Fe = 0.6, B = "calc(100vw - 32px)", Ie = (n, c, u) => _e(n, c, u, { elementResize: !1 }), qe = ({ dataTest: n, renderTrigger: c, variant: u = "info", title: d, children: E, viewResultsAction: M, resetAction: S, footerActions: w, resultCount: x, closeLabel: A = "Lukk", ariaLabel: F, onOpenChange: I, className: O }) => {
-  const a = he(), L = `${a}-title`, [o, X] = h(!1), [H, z] = h(), [U, Y] = h(), f = de(), t = u === "action", $ = f && !t, k = f && t, p = v((e) => {
-    X(e), I?.(e);
-  }, [I]), { refs: _, floatingStyles: j, context: q } = Ee({
+}, Ie = 0.6, X = "calc(100vw - 32px)", Le = (n, d, u) => Pe(n, d, u, { elementResize: !1 }), Ve = ({ dataTest: n, renderTrigger: d, variant: u = "info", title: f, children: E, viewResultsAction: M, resetAction: S, footerActions: w, resultCount: x, closeLabel: A = "Lukk", ariaLabel: O, onOpenChange: F, className: I }) => {
+  const a = _e(), L = `${a}-title`, [o, z] = l(!1), [H, K] = l(), [U, Y] = l(), p = pe(), t = u === "action", $ = p && !t, k = p && t, m = v((e) => {
+    z(e), F?.(e);
+  }, [F]), { refs: _, floatingStyles: j, context: q } = Se({
     open: o,
-    onOpenChange: p,
+    onOpenChange: m,
     placement: "bottom-start",
     strategy: "fixed",
-    whileElementsMounted: Ie,
+    whileElementsMounted: Le,
     middleware: [
-      be(8),
-      ...$ ? [] : [Pe({ padding: 8 })],
-      Re({ padding: 8 }),
-      ye({
+      Re(8),
+      ...$ ? [] : [ye({ padding: 8 })],
+      Te({ padding: 8 }),
+      Ee({
         padding: 8,
         apply({ availableHeight: e }) {
-          Y(Math.min(e, Math.round(window.innerHeight * Fe)));
+          Y(Math.min(e, Math.round(window.innerHeight * Ie)));
         }
       })
     ]
-  }), { getFloatingProps: V } = Me([Te(q, {
+  }), { getFloatingProps: V } = we([Me(q, {
     enabled: !k,
     escapeKey: !0,
     outsidePress: (e) => {
-      const s = m.current;
+      const s = g.current;
       return !(s && e.target instanceof Node && s.contains(e.target));
     }
-  })]), P = le(H), C = T(null), [r, G] = h(null), K = v((e) => {
+  })]), b = de(H), C = T(null), [r, G] = l(null), Q = v((e) => {
     C.current = e, G(e);
-  }, []), Q = Se([ce(_.setFloating, P), K]), m = T(null), J = v((e) => {
-    m.current = e, _.setReference(e);
+  }, []), J = Ae([ue(_.setFloating, b), Q]), g = T(null), Z = v((e) => {
+    g.current = e, _.setReference(e);
   }, [_]), i = v(() => {
-    p(!1);
-  }, [p]);
-  pe(o && t && r !== null, C), y(() => {
-    if (!r) return;
+    m(!1);
+  }, [m]);
+  ge(o && t && r !== null, C);
+  const [W, ee] = l(!1);
+  R(() => {
+    if (!r || t && !W) return;
     const e = requestAnimationFrame(() => {
-      (t ? ne(r) : r)?.focus({ preventScroll: !0 });
+      (t ? se(r) : r)?.focus({ preventScroll: !0 });
     });
     return () => {
       cancelAnimationFrame(e);
     };
-  }, [r, t]), y(() => {
+  }, [
+    r,
+    t,
+    W
+  ]), R(() => {
     if (!r || t) return;
     const e = (s) => {
-      const R = s.relatedTarget;
-      R instanceof Node && (r.contains(R) || m.current?.contains(R)) || i();
+      const y = s.relatedTarget;
+      y instanceof Node && (r.contains(y) || g.current?.contains(y)) || i();
     };
     return r.addEventListener("focusout", e), () => {
       r.removeEventListener("focusout", e);
@@ -70,15 +76,15 @@ var we = 240, Ae = {
     t,
     i
   ]);
-  const b = T(!1);
-  y(() => {
+  const P = T(!1);
+  R(() => {
     if (o) {
-      b.current = !0;
+      P.current = !0;
       return;
     }
-    if (!b.current) return;
-    b.current = !1;
-    const e = m.current;
+    if (!P.current) return;
+    P.current = !1;
+    const e = g.current;
     if (!e) return;
     const s = requestAnimationFrame(() => {
       document.activeElement === document.body && e.focus();
@@ -88,7 +94,7 @@ var we = 240, Ae = {
     };
   }, [o]);
   const D = {
-    ref: J,
+    ref: Z,
     isOpen: o,
     triggerProps: {
       onClick: (e) => {
@@ -96,70 +102,70 @@ var we = 240, Ae = {
           i();
           return;
         }
-        z(ae(e.currentTarget)), p(!0);
+        K(ce(e.currentTarget)), ee(e.detail === 0), m(!0);
       },
       "aria-expanded": o,
       "aria-controls": o ? a : void 0,
       "aria-haspopup": t ? "dialog" : void 0,
       "aria-describedby": !t && o ? a : void 0
     }
-  }, g = (e) => typeof e == "function" ? e({ close: i }) : e, Z = fe(x, 500), ee = M ?? (x === void 0 ? void 0 : /* @__PURE__ */ l(ue, {
+  }, h = (e) => typeof e == "function" ? e({ close: i }) : e, te = me(x, 500), oe = M ?? (x === void 0 ? void 0 : /* @__PURE__ */ c(fe, {
     dataTest: `${n}-view-results`,
     type: "button",
     variant: "text",
     onClick: i,
-    children: me(Z)
-  })), te = f ? B : Ae[u], oe = f ? B : void 0;
-  return k ? /* @__PURE__ */ W(N, { children: [c(D), /* @__PURE__ */ l(ge, {
+    children: he(te)
+  })), re = p ? X : Fe[u], ne = p ? X : void 0;
+  return k ? /* @__PURE__ */ B(N, { children: [d(D), /* @__PURE__ */ c(ve, {
     id: a,
     dataTest: n,
     open: o,
     onClose: i,
-    title: d,
-    ariaLabel: F,
+    title: f,
+    ariaLabel: O,
     viewResultsAction: M,
     resetAction: S,
     footerActions: w,
     resultCount: x,
     closeLabel: A,
-    className: O,
+    className: I,
     children: E
-  })] }) : /* @__PURE__ */ W(N, { children: [c(D), o && /* @__PURE__ */ l(xe, {
+  })] }) : /* @__PURE__ */ B(N, { children: [d(D), o && /* @__PURE__ */ c(be, {
     root: H,
-    children: /* @__PURE__ */ l("div", {
+    children: /* @__PURE__ */ c("div", {
       ...V(),
-      ref: Q,
+      ref: J,
       id: a,
       "data-test": n,
       "data-testid": n,
       role: t ? "dialog" : void 0,
-      "aria-labelledby": t && d ? L : void 0,
-      "aria-label": t && !d ? F : void 0,
+      "aria-labelledby": t && f ? L : void 0,
+      "aria-label": t && !f ? O : void 0,
       tabIndex: t ? void 0 : -1,
-      ...P ? ie : {},
+      ...b ? ae : {},
       style: {
-        ...P ? se : {},
+        ...b ? le : {},
         ...j,
-        minWidth: we,
-        width: oe,
-        maxWidth: te,
+        minWidth: Oe,
+        width: ne,
+        maxWidth: re,
         maxHeight: U
       },
-      className: re("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", O),
-      children: /* @__PURE__ */ l(ve, {
+      className: ie("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", I),
+      children: /* @__PURE__ */ c(xe, {
         dataTest: n,
-        title: d,
+        title: f,
         titleId: L,
-        viewResultsAction: g(ee),
-        resetAction: g(S),
-        footerActions: g(w),
+        viewResultsAction: h(oe),
+        resetAction: h(S),
+        footerActions: h(w),
         closeLabel: A,
         onClose: i,
-        children: g(E)
+        children: h(E)
       })
     })
   })] });
 };
 export {
-  qe as PopoverSheet
+  Ve as PopoverSheet
 };

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

@@ -19,6 +19,9 @@ import { StyledDynamicSelectComponent } from './types';
  * are behavioral / MUI `Autocomplete` API-parity.
  *
  * **Rendering strategy:**
+ * - `readOnly` + single (not `multiple`) → plain text (`DynamicSelectReadOnlyValue`), whatever the
+ *   option count: the title, then the selected label (or `-`). No chip, no input, no helper row.
+ *   `readOnly` + `multiple` is unaffected and follows the rules below.
  * - `1–5 options` → renders as an interactive chip group (`DynamicInteractiveChipGroup`).
  *   Chips behave as radio buttons (single) or checkboxes (multiple).
  *   Long labels automatically switch to a vertical stacked layout.
@@ -96,7 +99,8 @@ import { StyledDynamicSelectComponent } from './types';
  * ---
  *
  * @example
- * // 4. Read-only display – only selected options are shown
+ * // 4. Read-only display – single: the selected label as plain text; multiple: only the selected
+ * //    options, as chips
  * <StyledDynamicSelect
  *   dataTest="status-readonly"
  *   options={statuses}

package/dist/src/components/inputs/dynamic-select/StyledDynamicSelect.readOnly.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import { DynamicSelectOption, StyledDynamicSelectProps } from '../types';
+type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick<StyledDynamicSelectProps<TOption>, 'dataTest' | 'options' | 'title' | 'size' | 'valueKey' | 'labelKey' | 'renderLabel'> & {
+    value: TOption | null;
+};
+/**
+ * Read-only **single** select: the selected option as plain text under the title — no chip, no
+ * input field, no helper/error row (there is nothing to validate). Applies whatever the option
+ * count, so the ≤5 chip variant and the 6+ autocomplete variant read the same.
+ *
+ * Text = Body Base 16/24 `text-icon/body` (delta-700); 14/20 at `size='small'`. 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, size, valueKey, labelKey, renderLabel, }: DynamicSelectReadOnlyValueProps<TOption>) => JSX.Element;
+export {};

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

@@ -26,7 +26,11 @@ interface DynamicSelectCommonProps<TOption extends DynamicSelectOption> {
     dataTest: string;
     /** @figmaProp option-count column — 1–5 → Chips select, 6–10 → Select (dropdown), 11+ → Autocomplete. */
     options: TOption[];
-    /** @figmaProp State = true→"Read-only" (non-interactive; selected value(s) shown as plain chips). */
+    /**
+     * @figmaProp State = true→"Read-only" (non-interactive). Single: the selected label as plain text
+     * (`-` when empty), no chip, input or helper row, at any option count. Multiple: the selected
+     * values as plain chips.
+     */
     readOnly?: boolean;
     /** Prevents the built-in clear button from appearing even when a value is set. Applies to autocomplete only. */
     disableClearable?: boolean;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.100.1",
+    "version": "3.101.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",
@@ -75,6 +75,7 @@
         "vrt:report": "playwright show-report",
         "test-storybook": "npx vitest --project=storybook",
         "test:interaction": "vitest --project=interaction --run",
+        "test:flaky": "tsx scripts/detect-flaky.ts",
         "changeset:pre-beta": "changeset pre enter beta",
         "changeset:pre-exit": "changeset pre exit",
         "changeset:version": "changeset version",