asma-ui-core 3.111.0 → 3.113.0

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

@@ -1,173 +1,175 @@
-import { cn as q } from "../../../../helpers/cn.js";
+import { cn as u } from "../../../../helpers/cn.js";
 import { StyledTooltip as E } from "../../../data-display/tooltip/StyledTooltip.js";
-import { LoadingIcon as re } from "../../../icons/loading-icon/LoadingIcon.js";
+import { LoadingIcon as ie } from "../../../icons/loading-icon/LoadingIcon.js";
 import { CheckIcon as ae } from "../../../icons/check-icon/CheckIcon.js";
-import { PlusIconCircle as ie } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
+import { PlusIconCircle as oe } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
 import { StyledChip as F } from "../../../data-display/chip/StyledChip.js";
-import { StyledCheckbox as oe } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { fieldWidthStyle as ne } from "../../field-styles.js";
+import { StyledCheckbox as ne } from "../../checkbox/base-ui/StyledCheckbox.js";
+import { fieldWidthStyle as de } from "../../field-styles.js";
 import { StyledInputField as se } from "../../input-field/StyledInputField.js";
-import { StyledSelectAutocomplete as de } from "../../select-autocomplete/StyledSelectAutocomplete.js";
-import { DynamicSelectTitle as ce } from "./DynamicSelectTitle.js";
-import { DynamicInteractiveChipGroup as ue } from "./DynamicInteractiveChipGroup.js";
-import { createElement as K, forwardRef as me, useCallback as h, useState as pe } from "react";
-import { Fragment as H, jsx as l, jsxs as T } from "react/jsx-runtime";
-var Ne = me((C, W) => {
-  const [_, O] = pe(!1), { options: S, dataTest: f, value: g, readOnly: u, multiple: i, required: R, onChange: x, size: G, rowSize: y = "compact", title: k, titleSize: J, width: I = "full", noOptionsText: M, placeholder: Q, disabled: N, helperText: U, disableHelperText: A, error: P, valueKey: V = "value", labelKey: X = "label", renderLabel: s, getOptionTooltip: $, startAdornment: Y, autocompleteProps: o, loading: m, maxTags: Z, onFocus: ee, onBlur: te } = C, d = (e) => typeof e == "object" ? e?.[X]?.toString() ?? "" : e?.toString() ?? "", p = h((e) => typeof e == "object" ? e?.[V] : e, [V]), B = h((e, t) => p(e) === p(t), [p]), v = (e) => {
-    const t = p(e);
-    return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : d(e);
-  }, D = h((e) => {
-    O(!0), o?.onOpen?.(e);
-  }, [o]), le = h((e, t) => {
-    O(!1), o?.onClose?.(e, t);
-  }, [o]);
-  if (i && u) return /* @__PURE__ */ l(ue, { ...C });
-  const w = k ? `${f}-title` : void 0;
-  return /* @__PURE__ */ T("div", {
+import { StyledSelectAutocomplete as ce } from "../../select-autocomplete/StyledSelectAutocomplete.js";
+import { DynamicSelectTitle as ue } from "./DynamicSelectTitle.js";
+import { DynamicInteractiveChipGroup as me } from "./DynamicInteractiveChipGroup.js";
+import { createElement as K, forwardRef as pe, useCallback as f, useState as be } from "react";
+import { Fragment as H, jsx as l, jsxs as C } from "react/jsx-runtime";
+var Pe = pe((O, W) => {
+  const [_, S] = be(!1), { options: I, dataTest: g, value: x, readOnly: m, multiple: o, required: R, onChange: y, size: G, rowSize: v = "compact", title: w, titleSize: J, width: N = "full", noOptionsText: M, placeholder: Q, disabled: P, helperText: U, disableHelperText: A, error: V, valueKey: $ = "value", labelKey: X = "label", renderLabel: s, getOptionTooltip: B, startAdornment: Y, autocompleteProps: n, loading: p, maxTags: Z, onFocus: ee, onBlur: te, locale: le } = O, c = (e) => typeof e == "object" ? e?.[X]?.toString() ?? "" : e?.toString() ?? "", b = f((e) => typeof e == "object" ? e?.[$] : e, [$]), D = f((e, t) => b(e) === b(t), [b]), T = (e) => {
+    const t = b(e);
+    return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : c(e);
+  }, j = f((e) => {
+    S(!0), n?.onOpen?.(e);
+  }, [n]), re = f((e, t) => {
+    S(!1), n?.onClose?.(e, t);
+  }, [n]);
+  if (o && m) return /* @__PURE__ */ l(me, { ...O });
+  const k = w ? `${g}-title` : void 0;
+  return /* @__PURE__ */ C("div", {
     className: "flex flex-col gap-y-1",
-    "data-field-width": I,
-    style: ne(I),
-    children: [/* @__PURE__ */ l(ce, {
-      id: w,
-      title: k,
+    "data-field-width": N,
+    style: de(N),
+    children: [/* @__PURE__ */ l(ue, {
+      id: k,
+      title: w,
       titleSize: J
-    }), /* @__PURE__ */ l(de, {
+    }), /* @__PURE__ */ l(ce, {
       open: _,
-      onOpen: D,
-      onClose: le,
-      disableCloseOnSelect: i,
-      dataTest: f,
-      disabled: !!N || !!m,
+      onOpen: j,
+      onClose: re,
+      disableCloseOnSelect: o,
+      dataTest: g,
+      pickerTitle: w,
+      locale: le,
+      disabled: !!P || !!p,
       noOptionsText: M,
-      loading: m,
-      readOnly: u,
-      value: g,
+      loading: p,
+      readOnly: m,
+      value: x,
       size: G,
-      rowSize: y,
+      rowSize: v,
       disableClearable: R,
-      options: S,
+      options: I,
       fullWidth: !0,
       classes: { listbox: "max-h-[300px]" },
-      getOptionLabel: o?.getOptionLabel ?? d,
+      getOptionLabel: n?.getOptionLabel ?? c,
       onChange: (e, t) => {
-        x(t);
+        y(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: o?.isOptionEqualToValue ?? B,
+      isOptionEqualToValue: n?.isOptionEqualToValue ?? D,
       autoHeight: !0,
-      multiple: i,
-      renderValue: i ? (e) => {
+      multiple: o,
+      renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, c = Z ?? S.length, a = t.slice(0, c), n = t.length - c;
-        return [...a.map((r) => /* @__PURE__ */ l(F, {
-          dataTest: `${v(r)}-chip`,
-          readOnly: u,
+        const t = e, a = Z ?? I.length, i = t.slice(0, a), d = t.length - a;
+        return [...i.map((r) => /* @__PURE__ */ l(F, {
+          dataTest: `${T(r)}-chip`,
+          readOnly: m,
           variant: "outlined",
-          label: s ? s(r) : d(r),
+          label: s ? s(r) : c(r),
           classes: {
             root: "h-fit w-fit min-h-[32px]",
             label: "block whitespace-normal"
           },
-          disabled: !!N || !!m,
+          disabled: !!P || !!p,
           deleteButtonTabIndex: -1,
           onDelete: () => {
-            Array.isArray(g) && x(g.filter((b) => !B(b, r)));
+            Array.isArray(x) && y(x.filter((h) => !D(h, r)));
           }
-        }, v(r))), n > 0 ? /* @__PURE__ */ l(F, {
+        }, T(r))), d > 0 ? /* @__PURE__ */ l(F, {
           dataTest: "remaining-count-tag-chip",
-          label: `+${n}`,
+          label: `+${d}`,
           variant: "outlined",
           tabIndex: -1,
-          onClick: D
+          onClick: j
         }, "remaining-count") : null];
       } : void 0,
-      popupIcon: m ? /* @__PURE__ */ l(re, {
+      popupIcon: p ? /* @__PURE__ */ l(ie, {
         height: 24,
         width: 24
-      }) : i ? /* @__PURE__ */ l(ie, {
+      }) : o ? /* @__PURE__ */ l(oe, {
         height: 24,
         width: 24
       }) : void 0,
-      renderOption: (e, t, c) => {
-        const a = typeof t == "object" ? !!t?.disabled : !1, n = $ ? $(t) : null, r = a && n ? `${e.id}-reason` : void 0, b = r && e["data-active"] !== void 0 ? !0 : void 0, j = r && /* @__PURE__ */ l("span", {
+      renderOption: (e, t, a) => {
+        const i = typeof t == "object" ? !!t?.disabled : !1, d = B ? B(t) : null, r = i && d ? `${e.id}-reason` : void 0, h = r && e["data-active"] !== void 0 ? !0 : void 0, z = r && /* @__PURE__ */ l("span", {
           id: r,
           className: "sr-only",
           "aria-hidden": "true",
-          children: n
+          children: d
         });
-        if (i) {
-          const L = c.selected;
+        if (o) {
+          const q = a.selected;
           return /* @__PURE__ */ K("li", {
             ...e,
             role: "option",
-            "aria-selected": L,
+            "aria-selected": q,
             key: e.id,
-            onClick: a ? void 0 : e.onClick,
-            className: q("relative box-border flex cursor-pointer items-center gap-x-1 bg-white px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
-            "aria-disabled": a,
+            onClick: i ? void 0 : e.onClick,
+            className: u("relative box-border flex cursor-pointer items-center bg-white py-2 text-base text-delta-800 aria-selected:bg-gama-50 hover:bg-delta-50", a.inPicker ? "gap-x-0.5 pl-0.5" : "gap-x-1 px-2", v === "regular" ? "min-h-12" : "min-h-10", i && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            "aria-disabled": i,
             "aria-describedby": r
-          }, j, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
+          }, z, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
             "aria-hidden": "true",
             className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
           }), /* @__PURE__ */ l(E, {
             arrow: !0,
-            title: n,
-            open: b,
-            children: /* @__PURE__ */ T(H, { children: [/* @__PURE__ */ l(oe, {
-              disabled: a,
-              dataTest: `${v(t)}-checkbox`,
+            title: d,
+            open: h,
+            children: /* @__PURE__ */ C(H, { children: [/* @__PURE__ */ l(ne, {
+              disabled: i,
+              dataTest: `${T(t)}-checkbox`,
               size: "small",
               decorative: !0,
               hideWrapper: !0,
               className: "min-w-[36px]",
-              checked: L
+              checked: q
             }), s ? s(t) : /* @__PURE__ */ l("span", {
-              className: "line-clamp-2 h-fit min-w-0 flex-1 break-words text-base text-delta-800",
-              children: d(t)
+              className: u(!a.inPicker && "line-clamp-2", "h-fit min-w-0 flex-1 break-words text-base"),
+              children: c(t)
             })] })
           }));
         }
-        const z = c.selected;
+        const L = a.selected;
         return /* @__PURE__ */ K("li", {
           ...e,
           role: "option",
-          "aria-selected": z,
+          "aria-selected": L,
           key: e.id,
-          className: q("relative box-border flex cursor-pointer items-center gap-x-1 px-2 py-2 text-base aria-selected:bg-gama-50 hover:bg-delta-50", y === "regular" ? "min-h-12" : "min-h-10", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
-          onClick: a ? void 0 : e.onClick,
-          "aria-disabled": a,
+          className: u("relative box-border flex cursor-pointer items-center gap-x-1 px-2 py-2 text-base text-delta-800 aria-selected:bg-gama-50 hover:bg-delta-50", v === "regular" ? "min-h-12" : "min-h-10", i && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          onClick: i ? void 0 : e.onClick,
+          "aria-disabled": i,
           "aria-describedby": r
-        }, j, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
+        }, z, e["data-active"] !== void 0 && /* @__PURE__ */ l("span", {
           "aria-hidden": "true",
           className: "border-l-solid pointer-events-none absolute inset-y-0 left-0 border-l-[3px] border-focus-ring"
         }), /* @__PURE__ */ l(E, {
           arrow: !0,
-          title: n,
-          open: b,
-          children: /* @__PURE__ */ T(H, { children: [/* @__PURE__ */ l("span", {
-            className: "w-5 min-w-5",
-            children: z && /* @__PURE__ */ l(ae, {
+          title: d,
+          open: h,
+          children: /* @__PURE__ */ C(H, { children: [/* @__PURE__ */ l("span", {
+            className: u("w-5 min-w-5", a.inPicker && "flex"),
+            children: L && /* @__PURE__ */ l(ae, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
               height: 20,
               width: 20
             })
           }), s ? s(t) : /* @__PURE__ */ l("span", {
-            className: "line-clamp-2 min-w-0 flex-1 break-words text-base text-delta-800",
-            children: d(t)
+            className: u(!a.inPicker && "line-clamp-2", "min-w-0 flex-1 break-words text-base"),
+            children: c(t)
           })] })
         }));
       },
       renderInput: (e) => /* @__PURE__ */ l(se, {
-        dataTest: `${f}-input-field`,
+        dataTest: `${g}-input-field`,
         ...e,
         inputRef: W,
-        error: P,
+        error: V,
         helperText: A ? void 0 : U,
-        reserveHelperText: A ? !1 : P !== void 0,
+        reserveHelperText: A ? !1 : V !== void 0,
         variant: "outlined",
         label: "",
         placeholder: Q,
-        readOnly: u,
+        readOnly: m,
         onFocus: ee,
         onBlur: te,
         onKeyDown: e.onKeyDown,
@@ -180,14 +182,14 @@ var Ne = me((C, W) => {
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            ...w ? { "aria-labelledby": w } : {}
+            ...k ? { "aria-labelledby": k } : {}
           }
         }
       }),
-      ...o
+      ...n
     })]
   });
 });
 export {
-  Ne as DynamicSelectAutocomplete
+  Pe as DynamicSelectAutocomplete
 };

package/dist/components/inputs/full-screen-picker/FullScreenPicker.js

@@ -0,0 +1,93 @@
+import { CloseIcon as b } from "../../icons/close-icon/CloseIcon.js";
+import { StyledButton as w } from "../button/StyledButton.js";
+import { useShortViewportMediaQuery as g } from "../../../hooks/useMediaQuery.hook.js";
+import { StyledDialog as y } from "../../feedback/dialog/StyledDialog.js";
+import { PickerLiveRegion as N } from "./PickerLiveRegion.js";
+import { useVisualViewportHeight as S } from "./useVisualViewportHeight.js";
+import { useEffect as k, useRef as x } from "react";
+import { jsx as e, jsxs as f } from "react/jsx-runtime";
+var q = ({ open: i, onClose: l, dataTest: o, title: r, fallbackName: a, ...n }) => {
+  const t = r != null && r !== !1 && r !== "";
+  return /* @__PURE__ */ e(y, {
+    open: i,
+    onClose: (h, s) => l(s),
+    dataTest: o,
+    fullScreen: !0,
+    showCloseIcon: !1,
+    ariaLabel: t ? void 0 : a,
+    children: /* @__PURE__ */ e(I, {
+      ...n,
+      dataTest: o,
+      title: t ? r : void 0,
+      onClose: l
+    })
+  });
+}, I = ({ dataTest: i, title: l, closeLabel: o, search: r, headerRow: a, children: n, announcement: t, onClose: h }) => {
+  const s = g(), p = S(), c = x(null), u = x(null);
+  return k(() => {
+    const v = requestAnimationFrame(() => {
+      const d = c.current?.closest("dialog");
+      if (!d || document.activeElement !== d || !d.matches(":focus-visible")) return;
+      const m = u.current?.querySelector('[role="listbox"]');
+      (m && m.tabIndex >= 0 ? m : c.current)?.focus({ preventScroll: !0 });
+    });
+    return () => cancelAnimationFrame(v);
+  }, []), /* @__PURE__ */ f("div", {
+    className: "flex min-h-0 flex-col",
+    style: { height: p },
+    children: [
+      /* @__PURE__ */ f("div", {
+        "data-testid": `${i}-header`,
+        className: "flex shrink-0 flex-col border-0 border-b border-solid border-delta-200 bg-white",
+        children: [
+          /* @__PURE__ */ f("div", {
+            className: "flex items-start gap-2",
+            children: [
+              l !== void 0 && /* @__PURE__ */ e("h2", {
+                className: "m-0 min-w-0 flex-1 break-words pl-4 pt-2 text-[20px] font-semibold leading-7 text-delta-800",
+                children: l
+              }),
+              s && /* @__PURE__ */ e("div", {
+                className: "min-w-0 max-w-[240px] flex-1 pt-2",
+                children: r
+              }),
+              /* @__PURE__ */ e(w, {
+                dataTest: `${i}-close`,
+                refLink: c,
+                "aria-label": o,
+                variant: "textGray",
+                startIcon: /* @__PURE__ */ e(b, {
+                  width: 24,
+                  height: 24
+                }),
+                className: "ml-auto h-10 w-10 min-w-10 shrink-0 px-0",
+                onClick: () => h("closeButton")
+              })
+            ]
+          }),
+          !s && /* @__PURE__ */ e("div", {
+            className: "px-4 pt-2",
+            children: r
+          }),
+          a ?? /* @__PURE__ */ e("div", {
+            "aria-hidden": "true",
+            className: "h-2"
+          })
+        ]
+      }),
+      /* @__PURE__ */ e("div", {
+        ref: u,
+        "data-testid": `${i}-body`,
+        className: "flex min-h-0 flex-1 flex-col overflow-y-auto px-4",
+        children: n
+      }),
+      /* @__PURE__ */ e(N, {
+        announcement: t,
+        dataTest: `${i}-live`
+      })
+    ]
+  });
+};
+export {
+  q as FullScreenPicker
+};

package/dist/components/inputs/full-screen-picker/PickerLiveRegion.js

@@ -0,0 +1,34 @@
+import { useCallback as i, useEffect as a, useRef as s, useState as u } from "react";
+import { jsx as c } from "react/jsx-runtime";
+var d = () => {
+  const [e, r] = u();
+  return [
+    e,
+    i((n) => r((t) => ({
+      text: n,
+      id: (t?.id ?? 0) + 1
+    })), []),
+    i(() => r(void 0), [])
+  ];
+}, f = ({ announcement: e, dataTest: r }) => {
+  const n = s(null);
+  return a(() => {
+    const t = n.current;
+    if (!t || (t.textContent = "", !e)) return;
+    const o = requestAnimationFrame(() => {
+      t.textContent = e.text;
+    });
+    return () => cancelAnimationFrame(o);
+  }, [e]), /* @__PURE__ */ c("div", {
+    ref: n,
+    role: "status",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "sr-only",
+    "data-testid": r
+  });
+};
+export {
+  f as PickerLiveRegion,
+  d as useAnnouncer
+};

package/dist/components/inputs/full-screen-picker/pickerCopy.js

@@ -0,0 +1,34 @@
+var a = {
+  no: {
+    close: "Lukk",
+    search: "Søk",
+    done: "Ferdig",
+    clearOne: "Fjern valget",
+    clearAll: "Fjern alle valg",
+    selectedCount: (e) => `${e} valgt`,
+    noMatches: "Ingen treff",
+    matchCount: (e) => `${e} treff`,
+    cleared: "Valget er fjernet",
+    clearedAll: "Alle valg er fjernet",
+    truncated: (e, l) => `Viser ${e} av ${l}. Søk for å finne flere.`
+  },
+  en: {
+    close: "Close",
+    search: "Search",
+    done: "Done",
+    clearOne: "Clear selection",
+    clearAll: "Clear all selections",
+    selectedCount: (e) => `${e} selected`,
+    noMatches: "No matches",
+    matchCount: (e) => e === 1 ? "1 match" : `${e} matches`,
+    cleared: "Selection cleared",
+    clearedAll: "All selections cleared",
+    truncated: (e, l) => `Showing ${e} of ${l}. Search to find more.`
+  }
+}, r = (e, l) => ({
+  ...a[e],
+  ...l
+});
+export {
+  r as getPickerText
+};

package/dist/components/inputs/full-screen-picker/useVisualViewportHeight.js

@@ -0,0 +1,10 @@
+import { useSyncExternalStore as t } from "react";
+var i = (e) => {
+  const r = window.visualViewport;
+  return r ? (r.addEventListener("resize", e), r.addEventListener("scroll", e), () => {
+    r.removeEventListener("resize", e), r.removeEventListener("scroll", e);
+  }) : (window.addEventListener("resize", e), () => window.removeEventListener("resize", e));
+}, n = () => Math.round(window.visualViewport?.height ?? window.innerHeight), o = () => 0, v = () => t(i, n, o);
+export {
+  v as useVisualViewportHeight
+};