asma-ui-core 3.104.0 → 3.106.0

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

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

package/dist/components/inputs/select/StyledSelect.js

@@ -1,8 +1,8 @@
 import { cn as y } from "../../../helpers/cn.js";
 import { resolveSx as je } from "../../../helpers/sx.js";
-import { ChevronDownIcon as Ue } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as Ve } from "../../icons/close-icon/CloseIcon.js";
-import { TOP_LAYER_PROPS as qe, TOP_LAYER_RESET_STYLE as Ye, getOpenModalDialogAncestor as re, shouldUsePopoverTopLayer as ze, useTopLayerRef as Ke } from "../../../hooks/useTopLayer.hook.js";
+import { TOP_LAYER_PROPS as Ue, TOP_LAYER_RESET_STYLE as Ve, getOpenModalDialogAncestor as re, shouldUsePopoverTopLayer as qe, useTopLayerRef as Ye } from "../../../hooks/useTopLayer.hook.js";
+import { ChevronDownIcon as ze } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as Ke } from "../../icons/close-icon/CloseIcon.js";
 import { HelperRow as We } from "../../../helpers/HelperRow.js";
 import { useHelperRowBudget as Ge } from "../../../helpers/useHelperRowBudget.js";
 import { useHelperSlot as Je } from "../../../helpers/useHelperSlot.js";
@@ -32,7 +32,7 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
     at(N, { enabled: !n && !c }),
     ct(N),
     pt(N, { role: "listbox" })
-  ]), [Q, X] = x(), _ = ze(Q), Ee = ft([Ke(Se, _), P]);
+  ]), [Q, X] = x(), _ = qe(Q), Ee = ft([Ye(Se, _), P]);
   B(() => u?.setFocused(r || k), [
     r,
     k,
@@ -149,11 +149,11 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
               onClick: (e) => {
                 e.stopPropagation(), ee();
               },
-              children: /* @__PURE__ */ l(Ve, {
+              children: /* @__PURE__ */ l(Ke, {
                 width: 18,
                 height: 18
               })
-            }), /* @__PURE__ */ l(Ue, {
+            }), /* @__PURE__ */ l(ze, {
               width: 24,
               height: 24,
               className: y("shrink-0 transition-transform", H ? "text-gama-500" : Me, r && "flip-180")
@@ -178,9 +178,9 @@ var Ct = ({ dataTest: T, value: M, defaultValue: ne, onChange: $, error: le, err
           "aria-multiselectable": d ? !0 : void 0,
           "aria-labelledby": v,
           "aria-label": v ? void 0 : w,
-          ..._ ? qe : {},
+          ..._ ? Ue : {},
           style: {
-            ..._ ? Ye : {},
+            ..._ ? Ve : {},
             ...Fe,
             fontFamily: "Roboto, Helvetica, Arial, sans-serif"
           },