asma-ui-core 3.44.0 → 3.45.1

package/dist/components/inputs/search-field/StyledSearchField.js

@@ -1,70 +1,76 @@
-import { cn as r } from "../../../helpers/cn.js";
-import { SearchIcon as c } from "../../icons/search-icon/SearchIcon.js";
-import { CloseIcon as d } from "../../icons/close-icon/CloseIcon.js";
-import { StyledInputField as p } from "../input-field/StyledInputField.js";
-import { useState as u } from "react";
-import { jsx as o, jsxs as h } from "react/jsx-runtime";
-var g = ({ value: t, onClear: n, ...e }) => {
-  const [l, s] = u(!1), a = l || t;
-  return /* @__PURE__ */ h("div", {
+import { cn as p } from "../../../helpers/cn.js";
+import { SearchIcon as m } from "../../icons/search-icon/SearchIcon.js";
+import { CloseIcon as f } from "../../icons/close-icon/CloseIcon.js";
+import { StyledInputField as u } from "../input-field/StyledInputField.js";
+import { useState as v } from "react";
+import { jsx as t } from "react/jsx-runtime";
+var b = ({ value: o, onClear: s, label: n, onFocus: d, onBlur: c, ...r }) => {
+  const [h, l] = v(!1), i = h || o, a = typeof n == "string" ? n : void 0;
+  return /* @__PURE__ */ t("div", {
     className: "relative w-full",
-    children: [/* @__PURE__ */ o(p, {
+    children: /* @__PURE__ */ t(u, {
       size: "small",
       variant: "outlined",
-      value: t,
-      onFocus: () => {
-        s(!0);
+      value: o,
+      label: i ? n : void 0,
+      placeholder: i ? void 0 : a,
+      onFocus: (e) => {
+        l(!0), d?.(e);
       },
-      onBlur: () => {
-        s(!1);
+      onBlur: (e) => {
+        l(!1), c?.(e);
       },
       slotProps: {
-        input: {
-          className: r("transition-[padding] duration-300", a ? "pl-0" : "pl-5"),
-          sx: { "& input": {
+        htmlInput: {
+          style: {
+            overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
-            overflow: "hidden"
-          } },
-          endAdornment: t ? /* @__PURE__ */ o("div", {
+            ...o ? { paddingRight: 40 } : {}
+          },
+          "aria-label": i ? void 0 : a
+        },
+        input: {
+          endAdornment: o ? /* @__PURE__ */ t("button", {
+            type: "button",
+            "aria-label": "Clear",
             "data-testid": "styled-search-clear-icon",
-            className: r("cursor-pointer rounded-full bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", t ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0"),
+            className: p("cursor-pointer rounded-full border-0 bg-delta-50", "flex items-center justify-center", "transform-gpu transition-all duration-300 ease-in-out", o ? "scale-100 opacity-100" : "pointer-events-none scale-75 opacity-0", r.readOnly && "-translate-x-[6.5px]"),
             style: {
               width: 24,
               height: 24,
               flexShrink: 0
             },
-            onClick: (i) => {
-              i.preventDefault(), i.stopPropagation(), n?.();
+            onClick: (e) => {
+              e.preventDefault(), e.stopPropagation(), s?.();
             },
-            children: /* @__PURE__ */ o(d, {
+            children: /* @__PURE__ */ t(f, {
               width: 20,
               height: 20,
               color: "var(--colors-delta-700)",
               className: "pointer-events-none"
             })
-          }) : null
-        },
-        inputLabel: { sx: {
-          transform: "translate(34px, 9px) scale(1)",
-          width: a ? void 0 : "calc(100% - 42px)",
-          "&.MuiInputLabel-shrink": { transform: "translate(16px, -9px) scale(0.75)" }
-        } }
+          }) : null,
+          startAdornment: i ? void 0 : /* @__PURE__ */ t("span", {
+            "data-testid": "styled-search-icon",
+            className: "flex items-center",
+            children: /* @__PURE__ */ t(m, {
+              width: 24,
+              height: 24,
+              color: "var(--colors-delta-700)",
+              className: "pointer-events-none"
+            })
+          })
+        }
       },
-      ...e,
+      ...r,
       sx: {
-        ...e.fullWidth ? { width: "100%" } : { width: 160 },
-        ...e.sx
+        ...r.fullWidth ? { width: "100%" } : { width: 160 },
+        ...r.sx
       }
-    }), /* @__PURE__ */ o(c, {
-      "data-testid": "styled-search-icon",
-      width: 24,
-      height: 24,
-      className: r("absolute left-2 top-1/2 -translate-y-1/2", "transform-gpu transition-all duration-300 ease-in-out", a ? "pointer-events-none scale-75 opacity-0" : "scale-100 opacity-100", e.error && "top-1/3"),
-      color: "var(--colors-delta-700)"
-    })]
+    })
   });
 };
 export {
-  g as StyledSearchField
+  b as StyledSearchField
 };

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

@@ -1,48 +1,173 @@
-import { ChevronDownIcon as u } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
-import { ErrorOutlineIcon as d } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
-import { StyledFormHelperText as c } from "../../miscellaneous/StyledFormHelperText.js";
-import s from "clsx";
-import { Select as h } from "@mui/material";
-import { Fragment as p, jsx as o, jsxs as t } from "react/jsx-runtime";
-var I = ({ dataTest: i, allowClear: l, error: e, errorText: n, ...r }) => /* @__PURE__ */ t(p, { children: [/* @__PURE__ */ o(h, {
-  ...r,
-  "data-testid": i,
-  error: e,
-  value: r.value,
-  IconComponent: ({ className: a }) => /* @__PURE__ */ o(u, {
-    width: 24,
-    height: 24,
-    className: s(a, "-mt-[3.5px]")
-  }),
-  endAdornment: l && r.value ? /* @__PURE__ */ o("div", {
-    "data-testid": "select-clear-button",
-    className: "absolute right-8 flex items-center justify-center rounded-full p-[2px] duration-300 hover:bg-gama-100",
-    onClick: () => {
-      r.onChange?.({ target: { value: "" } }, null);
+import { cn as f } from "../../../helpers/cn.js";
+import { resolveSx as ue } from "../../../helpers/sx.js";
+import { ChevronDownIcon as pe } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { CloseIcon as me } from "../../icons/close-icon/CloseIcon.js";
+import { ErrorOutlineIcon as xe } from "../../icons/error-outline-icon/ErrorOutlineIcon.js";
+import { outlineClass as ge } from "../field-styles.js";
+import { TOP_LAYER_PROPS as ye, TOP_LAYER_RESET_STYLE as be, getOpenModalDialogAncestor as he, useTopLayerRef as we } from "../../../hooks/useTopLayer.hook.js";
+import { useFormControlContext as Ae } from "../../miscellaneous/FormControlContext.js";
+import { StyledFormHelperText as ve } from "../../miscellaneous/StyledFormHelperText.js";
+import { Children as S, cloneElement as Re, isValidElement as E, useEffect as I, useMemo as ke, useRef as De, useState as C } from "react";
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { FloatingPortal as Fe, autoUpdate as Se, flip as Ee, offset as Ce, shift as Ne, size as _e, useClick as Pe, useDismiss as Te, useFloating as je, useInteractions as qe, useMergeRefs as K, useRole as Ue } from "@floating-ui/react";
+var Ge = ({ dataTest: N, value: _, defaultValue: L, onChange: P, error: M, errorText: H, allowClear: T, disabled: O, readOnly: i, name: u, placeholder: b, displayEmpty: h, multiple: c, renderValue: j, fullWidth: Y, className: z, style: W, sx: $, variant: G, children: w, MenuProps: J, onFocus: Q, onBlur: X, labelId: p }) => {
+  const a = Ae(), q = `${N}-listbox`, A = G === "standard", U = M ?? a?.error ?? !1, o = O ?? a?.disabled ?? !1, [s, m] = C(!1), [v, R] = C(!1), [Z, V] = C(L), k = _ !== void 0, r = k ? _ : Z, l = Array.isArray(r) ? r.length > 0 : r !== void 0 && r !== "" && r !== null, x = De(null), { refs: d, floatingStyles: ee, context: D } = je({
+    open: s,
+    onOpenChange: m,
+    placement: "bottom-start",
+    strategy: "fixed",
+    whileElementsMounted: Se,
+    middleware: [
+      Ce(4),
+      Ee({ padding: 8 }),
+      Ne({ padding: 8 }),
+      _e({ apply({ rects: e, elements: t }) {
+        t.floating.style.minWidth = `${e.reference.width + 20}px`;
+      } })
+    ]
+  }), { getReferenceProps: te, getFloatingProps: re } = qe([
+    Pe(D, { enabled: !o && !i }),
+    Te(D),
+    Ue(D, { role: "listbox" })
+  ]), oe = K([d.setReference]), se = K([we(d.setFloating), x]), ne = ke(() => s ? he(d.reference.current) : void 0, [s, d]);
+  I(() => a?.setFocused(s || v), [
+    s,
+    v,
+    a
+  ]), I(() => a?.setFilled(l || !!b || !!h), [
+    l,
+    b,
+    h,
+    a
+  ]);
+  const le = (e, t) => {
+    const g = c ? Array.isArray(r) && r.includes(e) ? r.filter((F) => F !== e) : [...Array.isArray(r) ? r : [], e] : e;
+    k || V(g), P?.({ target: {
+      value: g,
+      name: u
+    } }, t), c || (m(!1), requestAnimationFrame(() => d.domReference.current?.focus()));
+  }, B = () => {
+    const e = c ? [] : "";
+    k || V(e), P?.({ target: {
+      value: e,
+      name: u
+    } }, null), m(!1), R(!1);
+  }, ae = S.map(w, (e) => {
+    if (!E(e)) return e;
+    const t = e.props.value;
+    return Re(e, {
+      selected: c ? Array.isArray(r) && r.includes(t) : t === r,
+      onClick: () => le(t, e.props.children)
+    });
+  }), ie = S.toArray(w).find((e) => E(e) && e.props.value === r), ce = j ? j(r) : c && Array.isArray(r) ? S.toArray(w).filter((e) => E(e) && r.includes(e.props.value)).map((e) => {
+    const t = e.props.children;
+    return typeof t == "string" || typeof t == "number" ? String(t) : "";
+  }).join(", ") : ie?.props.children, de = (e) => {
+    if ((e.key === "Backspace" || e.key === "Delete") && T && l && !o && !i) {
+      e.preventDefault(), B();
+      return;
+    }
+    e.key !== "ArrowDown" && e.key !== "ArrowUp" || o || i || (e.preventDefault(), m(!0), requestAnimationFrame(() => {
+      const t = x.current?.querySelectorAll('[role="option"]:not([aria-disabled="true"])');
+      t?.length && t[e.key === "ArrowUp" ? t.length - 1 : 0]?.focus();
+    }));
+  }, fe = (e) => {
+    const t = x.current ? Array.from(x.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')) : [];
+    if (t.length === 0) return;
+    const g = t.findIndex((F) => F === document.activeElement);
+    e.key === "ArrowDown" || e.key === "ArrowUp" ? (e.preventDefault(), t[(g + (e.key === "ArrowDown" ? 1 : -1) + t.length) % t.length]?.focus()) : (e.key === "Enter" || e.key === " ") && (e.preventDefault(), document.activeElement?.click());
+  };
+  return /* @__PURE__ */ y("div", {
+    className: f("group relative inline-flex flex-col", Y && "w-full", z),
+    style: {
+      fontFamily: "Roboto, Helvetica, Arial, sans-serif",
+      ...ue($),
+      ...W
     },
-    children: /* @__PURE__ */ o(m, {
-      width: 18,
-      height: 18
-    })
-  }) : null,
-  sx: {
-    ".MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-delta-500) !important" },
-    "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-gama-500) !important" },
-    "&.MuiFormLabel-root-MuiInputLabel-root .Mui-error": { color: "var(--colors-error-500) !important" },
-    "&.Mui-error .MuiOutlinedInput-notchedOutline": { borderColor: "var(--colors-error-500) !important" },
-    "& .MuiInputBase-colorPrimary.Mui-error fieldset": { borderColor: "var(--colors-error-500) !important" },
-    "&.Mui-focused::after": { borderColor: "var(--colors-gama-400) !important" },
-    "&:hover .MuiOutlinedInput-notchedOutline": { border: "2px solid var(--colors-gama-300) !important" },
-    ...r.sx
-  }
-}), e && /* @__PURE__ */ t(c, {
-  className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
-  children: [/* @__PURE__ */ o(d, {
-    width: 20,
-    height: 20
-  }), n ?? "Required"]
-})] });
+    children: [
+      /* @__PURE__ */ y("button", {
+        ref: oe,
+        type: "button",
+        "data-testid": N,
+        ...te({ onKeyDown: de }),
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-expanded": s,
+        "aria-controls": q,
+        "aria-labelledby": p,
+        "aria-label": p ? void 0 : u,
+        "aria-disabled": o ? !0 : void 0,
+        disabled: o,
+        onFocus: (e) => {
+          R(!0), Q?.(e);
+        },
+        onBlur: (e) => {
+          R(!1), X?.(e);
+        },
+        style: { minWidth: l && !A ? 105 : void 0 },
+        className: f("relative flex w-full items-center justify-between bg-transparent text-left text-delta-800 outline-none", A ? "h-10 min-w-0 border-0 px-0 text-base" : "h-10 rounded-lg border-0 px-3 text-base", o && "cursor-not-allowed text-delta-300", i && "pointer-events-none"),
+        children: [
+          /* @__PURE__ */ n("span", {
+            className: f("min-w-0 flex-1 truncate", !l && "text-delta-500"),
+            children: l || h ? ce : b
+          }),
+          /* @__PURE__ */ y("span", {
+            className: "flex items-center gap-1",
+            children: [T && l && !o && /* @__PURE__ */ n("span", {
+              "aria-hidden": "true",
+              "data-testid": "select-clear-button",
+              className: "flex items-center justify-center rounded-full p-[2px] hover:bg-gama-100",
+              onClick: (e) => {
+                e.stopPropagation(), B();
+              },
+              children: /* @__PURE__ */ n(me, {
+                width: 18,
+                height: 18
+              })
+            }), /* @__PURE__ */ n(pe, {
+              width: 24,
+              height: 24,
+              className: f("shrink-0 transition-transform", o ? "text-delta-300" : "text-delta-700", s && "rotate-180")
+            })]
+          }),
+          !A && /* @__PURE__ */ n("div", { className: ge({
+            focused: s || v,
+            error: U,
+            disabled: o,
+            readOnly: i
+          }) })
+        ]
+      }),
+      s && /* @__PURE__ */ n(Fe, {
+        root: ne,
+        children: /* @__PURE__ */ n("ul", {
+          ref: se,
+          id: q,
+          role: "listbox",
+          "aria-labelledby": p,
+          "aria-label": p ? void 0 : u,
+          ...ye,
+          style: {
+            ...be,
+            ...ee,
+            fontFamily: "Roboto, Helvetica, Arial, sans-serif"
+          },
+          ...re(),
+          onKeyDown: fe,
+          className: f("z-[1300] m-0 max-h-72 list-none overflow-auto rounded-lg border border-solid border-delta-300 bg-white px-0 py-1 shadow-[0px_2px_4px_0px_rgba(34,33,51,0.15)]", J?.className),
+          children: ae
+        })
+      }),
+      U && /* @__PURE__ */ y(ve, {
+        className: "m-0 flex items-center gap-1 pt-1 text-sm text-error-500",
+        children: [/* @__PURE__ */ n(xe, {
+          width: 20,
+          height: 20
+        }), H ?? "Required"]
+      })
+    ]
+  });
+};
 export {
-  I as StyledSelect
+  Ge as StyledSelect
 };

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

@@ -1,29 +1,25 @@
-import { CheckIcon as t } from "../../icons/check-icon/CheckIcon.js";
-import { MenuItem as o } from "@mui/material";
-import { jsx as r, jsxs as n } from "react/jsx-runtime";
-var s = (e) => /* @__PURE__ */ n(o, {
-  ...e,
-  sx: {
-    "&.MuiMenuItem-root": {
-      fontSize: "var(--font-size-body-base) !important",
-      gap: "4px",
-      px: 1
-    },
-    "&.Mui-selected": { backgroundColor: "var(--colors-gama-50) !important" }
-  },
-  children: [/* @__PURE__ */ r("span", {
-    style: {
-      width: "24px",
-      justifyContent: "center",
-      display: "flex"
-    },
-    children: e.selected && /* @__PURE__ */ r(t, {
+import { cn as l } from "../../../helpers/cn.js";
+import { CheckIcon as n } from "../../icons/check-icon/CheckIcon.js";
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+var p = ({ children: r, selected: e, disabled: t, className: o, onClick: i }) => /* @__PURE__ */ s("li", {
+  role: "option",
+  "aria-selected": e ? !0 : void 0,
+  "aria-disabled": t ? !0 : void 0,
+  tabIndex: -1,
+  onClick: t ? void 0 : i,
+  className: l("flex items-center gap-1 px-2 py-2.5 text-base outline-none", t ? "cursor-not-allowed text-delta-300" : "cursor-pointer text-delta-700 hover:bg-delta-50", e && "bg-gama-50", o),
+  children: [/* @__PURE__ */ a("span", {
+    className: "flex w-6 justify-center",
+    children: e && /* @__PURE__ */ a(n, {
       width: 22,
       height: 22,
-      style: { color: "var(--colors-gama-500)" }
+      className: "text-gama-500"
     })
-  }), /* @__PURE__ */ r("span", { children: e.children })]
+  }), /* @__PURE__ */ a("span", {
+    className: "min-w-0 flex-1 truncate",
+    children: r
+  })]
 });
 export {
-  s as StyledSelectItem
+  p as StyledSelectItem
 };