asma-ui-core 3.68.6 → 3.69.0

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

@@ -1,32 +1,36 @@
 import { cn as y } from "../../../../helpers/cn.js";
-import { CloseIcon as O } from "../../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as W } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledChip as H } from "../../../data-display/chip/StyledChip.js";
-import { StyledInteractiveChip as S } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
-import { StyledTooltip as J } from "../../../data-display/tooltip/StyledTooltip.js";
-import { StyledButton as M } from "../../button/StyledButton.js";
-import { useWrap as P } from "../helpers/useWrap.js";
+import { CloseIcon as j } from "../../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as J } from "../../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { StyledChip as P } from "../../../data-display/chip/StyledChip.js";
+import { StyledInteractiveChip as O } from "../../../data-display/interactive-chip/StyledInteractiveChip.js";
+import { StyledTooltip as Q } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledButton as U } from "../../button/StyledButton.js";
+import { useHelperAlertRole as X } from "../../../../helpers/useHelperAlertRole.js";
+import { warnMissingErrorMessage as Y } from "../../../../helpers/warnMissingErrorMessage.js";
+import { useWrap as Z } from "../helpers/useWrap.js";
 import { Skeleton as v } from "../../../mui-compat/Skeleton.js";
-import { forwardRef as Q, useEffect as U } from "react";
+import { forwardRef as _, useEffect as ee, useId as te } from "react";
 import { jsx as t, jsxs as N } from "react/jsx-runtime";
-var se = Q((I, V) => {
-  const { options: d, dataTest: R, value: r, readOnly: n, multiple: i, title: T, disabled: k, onChange: f, required: $, error: x, helperText: q, valueKey: z = "value", labelKey: A = "label", renderLabel: o, getOptionTooltip: C, loading: B, size: b, locale: D = "en" } = I, { containerRef: p, wrapDisabled: g } = P({ dependencyList: [d, d.length] });
-  U(() => {
-    p.current && (p.current.inert = !0);
-  }, [p]);
-  const u = (e) => typeof e == "object" ? e?.[A]?.toString() ?? "" : e?.toString() ?? "", w = (e) => typeof e == "object" ? e?.[z] : e, c = (e) => {
+var he = _((V, A) => {
+  const { options: d, dataTest: R, value: r, readOnly: n, multiple: i, title: T, disabled: C, onChange: p, required: D, error: f, helperText: I, valueKey: E = "value", labelKey: L = "label", renderLabel: o, getOptionTooltip: k, loading: $, size: b, locale: z = "en", clearSelectionLabel: B } = V, q = te();
+  Y("DynamicInteractiveChipGroup", f, I);
+  const G = X(f), { containerRef: m, wrapDisabled: g } = Z({ dependencyList: [d, d.length] });
+  ee(() => {
+    m.current && (m.current.inert = !0);
+  }, [m]);
+  const u = (e) => typeof e == "object" ? e?.[L]?.toString() ?? "" : e?.toString() ?? "", w = (e) => typeof e == "object" ? e?.[E] : e, c = (e) => {
     const l = w(e);
     return l == null ? "" : typeof l == "string" || typeof l == "number" || typeof l == "boolean" ? String(l) : e == null ? "" : u(e);
-  }, s = (e, l) => w(e) === w(l), E = i ? Array.isArray(r) && r.length > 0 : r != null, L = (e) => {
+  }, s = (e, l) => w(e) === w(l), K = i ? Array.isArray(r) && r.length > 0 : r != null, M = (e) => {
     if (!i) {
       const a = s(e, r) ? null : e;
       if (a === null) return;
-      f(a);
+      p(a);
       return;
     }
     const l = r ?? [];
-    f(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
-  }, m = n ? d.filter((e) => !!(i ? r?.find((l) => s(l, e)) : s(r, e))) : d, K = m.findIndex((e) => !(typeof e == "object" && e?.disabled) && !n);
+    p(l.find((a) => s(a, e)) ? l.filter((a) => !s(a, e)) : [...l, e]);
+  }, h = n ? d.filter((e) => !!(i ? r?.find((l) => s(l, e)) : s(r, e))) : d, F = h.findIndex((e) => !(typeof e == "object" && e?.disabled) && !n);
   return /* @__PURE__ */ N("div", {
     "data-testid": `${R}-dynamic-radio-group`,
     className: "relative flex flex-col gap-y-1",
@@ -37,10 +41,10 @@ var se = Q((I, V) => {
       }),
       /* @__PURE__ */ t("div", {
         "aria-hidden": !0,
-        ref: p,
+        ref: m,
         className: "pointer-events-none absolute left-0 top-0 flex flex-wrap gap-2 opacity-0",
         style: { width: "100%" },
-        children: m.map((e) => /* @__PURE__ */ t(S, {
+        children: h.map((e) => /* @__PURE__ */ t(O, {
           className: "w-fit",
           readOnly: n,
           type: i ? "checkbox" : "radio",
@@ -50,32 +54,32 @@ var se = Q((I, V) => {
       }),
       /* @__PURE__ */ t("div", {
         className: y("flex flex-wrap gap-2", g && "flex-col gap-1"),
-        children: B ? /* @__PURE__ */ N("div", {
+        children: $ ? /* @__PURE__ */ N("div", {
           className: "flex flex-wrap gap-2",
           children: [
             /* @__PURE__ */ t(v, { className: "h-[32px] w-[60px]" }),
             /* @__PURE__ */ t(v, { className: "h-[32px] w-[60px]" }),
             /* @__PURE__ */ t(v, { className: "h-[32px] w-[60px]" })
           ]
-        }) : m?.length ? m.map((e, l) => {
-          const a = !!(i ? r?.find((G) => s(G, e)) : s(r, e)), F = C ? C(e) : null;
+        }) : h?.length ? h.map((e, l) => {
+          const a = !!(i ? r?.find((W) => s(W, e)) : s(r, e)), H = k ? k(e) : null;
           if (n && !a) return null;
-          const h = typeof e == "object" ? !!e?.disabled : !1, j = !h && !n && l === K ? V : void 0;
-          return /* @__PURE__ */ t(J, {
-            title: F,
+          const x = typeof e == "object" ? !!e?.disabled : !1, S = !x && !n && l === F ? A : void 0;
+          return /* @__PURE__ */ t(Q, {
+            title: H,
             arrow: !0,
             children: /* @__PURE__ */ t("span", {
-              className: y(h && "cursor-not-allowed"),
-              children: n && !g ? /* @__PURE__ */ t(H, {
-                ref: j,
-                disabled: !!k || h,
+              className: y(x && "cursor-not-allowed"),
+              children: n && !g ? /* @__PURE__ */ t(P, {
+                ref: S,
+                disabled: !!C || x,
                 classes: { root: "min-h-[32px] h-full" },
                 className: "w-fit",
                 dataTest: `ic-${c(e)}`,
                 label: o ? o(e) : u(e)
-              }) : /* @__PURE__ */ t(S, {
-                ref: j,
-                disabled: !!k || h,
+              }) : /* @__PURE__ */ t(O, {
+                ref: S,
+                disabled: !!C || x,
                 classes: g ? {
                   root: "border-none outline-none bg-transparent w-full flex justify-start h-full min-h-[40px] shadow-none",
                   label: "block whitespace-normal break-words overflow-visible"
@@ -86,44 +90,46 @@ var se = Q((I, V) => {
                 dataTest: `ic-${c(e)}`,
                 checked: a,
                 size: b,
-                onClick: () => L(e),
+                onClick: () => M(e),
                 label: o ? o(e) : u(e)
               })
             })
           }, c(e));
         }) : /* @__PURE__ */ t("span", { children: "-" })
       }),
-      !$ && E && !n && /* @__PURE__ */ t(M, {
+      !D && K && !n && /* @__PURE__ */ t(U, {
         dataTest: "clear-selection-btn",
         variant: "text",
-        startIcon: b === "medium" ? /* @__PURE__ */ t(O, {
+        startIcon: b === "medium" ? /* @__PURE__ */ t(j, {
           height: 24,
           width: 24,
           className: "size-6"
-        }) : /* @__PURE__ */ t(O, {
+        }) : /* @__PURE__ */ t(j, {
           height: 20,
           width: 20,
           className: "size-5"
         }),
         className: "w-fit",
         size: b,
-        onClick: () => f(i ? [] : null),
-        children: D === "en" ? "Clear selection" : "Fjern valget"
+        onClick: () => p(i ? [] : null),
+        children: B ?? (z === "en" ? "Clear selection" : "Fjern valget")
       }),
       /* @__PURE__ */ N("div", {
-        className: y("flex items-center gap-1 text-sm/5 text-delta-600", x && "text-error-500"),
-        children: [x && /* @__PURE__ */ t(W, {
+        id: q,
+        role: G,
+        className: y("flex min-h-[24px] items-center gap-1 pt-1 text-sm/5 text-delta-600", f && "text-error-500"),
+        children: [f && /* @__PURE__ */ t(J, {
           width: 20,
           height: 20,
           className: "min-w-5"
         }), /* @__PURE__ */ t("span", {
           className: "line-clamp-1",
-          children: q ?? (x ? "Required" : void 0)
+          children: I
         })]
       })
     ]
   });
 });
 export {
-  se as DynamicInteractiveChipGroup
+  he as DynamicInteractiveChipGroup
 };

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

@@ -1,35 +1,35 @@
-import { cn as D } from "../../../../helpers/cn.js";
+import { cn as $ } from "../../../../helpers/cn.js";
 import { LoadingIcon as Y } from "../../../icons/loading-icon/LoadingIcon.js";
 import { CheckIcon as Z } from "../../../icons/check-icon/CheckIcon.js";
 import { PlusIconCircle as ee } from "../../../icons/plus-icon-circle/PlusIconCircle.js";
-import { StyledChip as $ } from "../../../data-display/chip/StyledChip.js";
+import { StyledChip as j } from "../../../data-display/chip/StyledChip.js";
 import { StyledCheckbox as te } from "../../checkbox/base-ui/StyledCheckbox.js";
-import { StyledTooltip as j } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledTooltip as B } from "../../../data-display/tooltip/StyledTooltip.js";
 import { StyledInputField as le } from "../../input-field/StyledInputField.js";
 import { StyledSelectAutocomplete as ae } from "../../select-autocomplete/StyledSelectAutocomplete.js";
 import { DynamicInteractiveChipGroup as re } from "./DynamicInteractiveChipGroup.js";
-import { createElement as B, forwardRef as oe, useCallback as b, useState as ne } from "react";
-import { Fragment as L, jsx as l, jsxs as T } from "react/jsx-runtime";
-var ye = oe((S, q) => {
-  const [E, k] = ne(!1), { options: f, dataTest: g, value: x, readOnly: u, multiple: o, required: F, onChange: y, size: z, title: C, noOptionsText: K, placeholder: _, disabled: I, helperText: H, disableHelperText: R, error: G, valueKey: A = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: N, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = S, v = f.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = b((e) => typeof e == "object" ? e?.[A] : e, [A]), P = b((e, t) => p(e) === p(t), [p]), w = (e) => {
+import { createElement as L, forwardRef as oe, useCallback as b, useState as ne } from "react";
+import { Fragment as q, jsx as l, jsxs as O } from "react/jsx-runtime";
+var ye = oe((S, E) => {
+  const [F, k] = ne(!1), { options: f, dataTest: g, value: x, readOnly: u, multiple: o, required: z, onChange: y, size: H, title: v, noOptionsText: K, placeholder: _, disabled: I, helperText: R, disableHelperText: A, error: G, valueKey: N = "value", labelKey: W = "label", renderLabel: i, getOptionTooltip: P, startAdornment: J, autocompleteProps: n, loading: m, maxTags: M, onFocus: Q, onBlur: U } = S, C = f.length < 11, s = (e) => typeof e == "object" ? e?.[W]?.toString() ?? "" : e?.toString() ?? "", p = b((e) => typeof e == "object" ? e?.[N] : e, [N]), V = b((e, t) => p(e) === p(t), [p]), w = (e) => {
     const t = p(e);
     return t == null ? "" : typeof t == "string" || typeof t == "number" || typeof t == "boolean" ? String(t) : e == null ? "" : s(e);
-  }, V = b((e) => {
+  }, D = b((e) => {
     k(!0), n?.onOpen?.(e);
   }, [n]), X = b((e, t) => {
     k(!1), n?.onClose?.(e, t);
   }, [n]);
   if (o && u) return /* @__PURE__ */ l(re, { ...S });
-  const O = C ? `${g}-title` : void 0;
-  return /* @__PURE__ */ T("div", {
+  const T = v ? `${g}-title` : void 0;
+  return /* @__PURE__ */ O("div", {
     className: "flex w-full flex-col gap-y-1",
-    children: [C && /* @__PURE__ */ l("span", {
-      id: O,
+    children: [v && /* @__PURE__ */ l("span", {
+      id: T,
       className: "text-base font-semibold text-delta-800",
-      children: C
+      children: v
     }), /* @__PURE__ */ l(ae, {
-      open: E,
-      onOpen: V,
+      open: F,
+      onOpen: D,
       onClose: X,
       disableCloseOnSelect: o,
       dataTest: g,
@@ -38,8 +38,8 @@ var ye = oe((S, q) => {
       loading: m,
       readOnly: u,
       value: x,
-      size: z,
-      disableClearable: F,
+      size: H,
+      disableClearable: z,
       options: f,
       fullWidth: !0,
       classes: { listbox: "max-h-[300px]" },
@@ -48,13 +48,13 @@ var ye = oe((S, q) => {
         y(t);
       },
       filterSelectedOptions: !1,
-      isOptionEqualToValue: n?.isOptionEqualToValue ?? P,
+      isOptionEqualToValue: n?.isOptionEqualToValue ?? V,
       autoHeight: !0,
       multiple: o,
       renderValue: o ? (e) => {
         if (!Array.isArray(e)) return null;
-        const t = e, c = M ?? f.length, a = t.slice(0, c), d = t.length - c;
-        return [...a.map((r) => /* @__PURE__ */ l($, {
+        const t = e, d = M ?? f.length, a = t.slice(0, d), c = t.length - d;
+        return [...a.map((r) => /* @__PURE__ */ l(j, {
           dataTest: `${w(r)}-chip`,
           readOnly: u,
           variant: "outlined",
@@ -65,13 +65,13 @@ var ye = oe((S, q) => {
           },
           disabled: !!I || !!m,
           onDelete: () => {
-            Array.isArray(x) && y(x.filter((h) => !P(h, r)));
+            Array.isArray(x) && y(x.filter((h) => !V(h, r)));
           }
-        }, w(r))), d > 0 ? /* @__PURE__ */ l($, {
+        }, w(r))), c > 0 ? /* @__PURE__ */ l(j, {
           dataTest: "remaining-count-tag-chip",
-          label: `+${d}`,
+          label: `+${c}`,
           variant: "outlined",
-          onClick: V
+          onClick: D
         }, "remaining-count") : null];
       } : void 0,
       popupIcon: m ? /* @__PURE__ */ l(Y, {
@@ -81,22 +81,22 @@ var ye = oe((S, q) => {
         height: 24,
         width: 24
       }) : void 0,
-      renderOption: (e, t, c) => {
-        const a = typeof t == "object" ? !!t?.disabled : !1, d = N ? N(t) : null;
+      renderOption: (e, t, d) => {
+        const a = typeof t == "object" ? !!t?.disabled : !1, c = P ? P(t) : null;
         if (o) {
-          const h = c.selected;
-          return /* @__PURE__ */ B("li", {
+          const h = d.selected;
+          return /* @__PURE__ */ L("li", {
             ...e,
             role: "option",
             "aria-selected": h,
             key: e.id,
             onClick: a ? void 0 : e.onClick,
-            className: D("flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+            className: $("flex min-h-10 cursor-pointer items-center gap-x-1 bg-white px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
             "aria-disabled": a
-          }, /* @__PURE__ */ l(j, {
+          }, /* @__PURE__ */ l(B, {
             arrow: !0,
-            title: d,
-            children: /* @__PURE__ */ T(L, { children: [/* @__PURE__ */ l(te, {
+            title: c,
+            children: /* @__PURE__ */ O(q, { children: [/* @__PURE__ */ l(te, {
               disabled: a,
               dataTest: `${w(t)}-checkbox`,
               size: "small",
@@ -109,19 +109,19 @@ var ye = oe((S, q) => {
             })] })
           }));
         }
-        const r = c.selected;
-        return /* @__PURE__ */ B("li", {
+        const r = d.selected;
+        return /* @__PURE__ */ L("li", {
           ...e,
           role: "option",
           "aria-selected": r,
           key: e.id,
-          className: D("flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", a && "cursor-not-allowed bg-delta-50 aria-selected:!bg-delta-50 hover:!bg-delta-50 [&_*]:cursor-not-allowed"),
+          className: $("flex min-h-10 cursor-pointer items-center gap-x-1 px-2 text-base aria-selected:bg-gama-50 hover:bg-gama-50", 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
-        }, /* @__PURE__ */ l(j, {
+        }, /* @__PURE__ */ l(B, {
           arrow: !0,
-          title: d,
-          children: /* @__PURE__ */ T(L, { children: [/* @__PURE__ */ l("span", {
+          title: c,
+          children: /* @__PURE__ */ O(q, { children: [/* @__PURE__ */ l("span", {
             className: "w-5 min-w-5",
             children: r && /* @__PURE__ */ l(Z, {
               className: "size-5 min-h-5 min-w-5 text-gama-500",
@@ -137,28 +137,29 @@ var ye = oe((S, q) => {
       renderInput: (e) => /* @__PURE__ */ l(le, {
         dataTest: `${g}-input-field`,
         ...e,
-        inputRef: q,
+        inputRef: E,
         error: G,
-        helperText: R ? "" : H ?? " ",
+        helperText: A ? void 0 : R,
+        reserveHelperText: !A,
         variant: "outlined",
         label: "",
         placeholder: _,
         readOnly: u,
         onFocus: Q,
         onBlur: U,
-        onKeyDown: v ? (t) => t.preventDefault() : void 0,
+        onKeyDown: C ? (t) => t.preventDefault() : void 0,
         autoComplete: "off",
         slotProps: {
           ...e.slotProps,
           input: {
             ...e.slotProps?.input ?? {},
             startAdornment: J ?? e.slotProps?.input?.startAdornment,
-            style: v ? { caretColor: "transparent" } : {}
+            style: C ? { caretColor: "transparent" } : {}
           },
           htmlInput: {
             ...e.slotProps?.htmlInput ?? {},
-            ...O ? { "aria-labelledby": O } : {},
-            style: v ? { caretColor: "transparent" } : {}
+            ...T ? { "aria-labelledby": T } : {},
+            style: C ? { caretColor: "transparent" } : {}
           }
         }
       }),