asma-ui-core 3.86.1 → 3.86.2

package/dist/components/data-display/chip/StyledChip.js

@@ -1,40 +1,40 @@
 import { cn as i } from "../../../helpers/cn.js";
-import { resolveSx as $ } from "../../../helpers/sx.js";
-import { CloseIcon as E } from "../../icons/close-icon/CloseIcon.js";
+import { resolveSx as E } from "../../../helpers/sx.js";
+import { CloseIcon as L } from "../../icons/close-icon/CloseIcon.js";
 import { consumerOverrides as x } from "../../../helpers/classOverride.js";
-import { getChipPadding as L } from "./chipPadding.js";
-import U from "./StyledChip.module.js";
-import { forwardRef as q } from "react";
-import { jsx as m, jsxs as A } from "react/jsx-runtime";
-var z = q(({ dataTest: g, label: l, size: r = "medium", disabled: t, readOnly: o, clickable: b, icon: w, avatar: u, deleteIcon: _, onDelete: c, onClick: p, onMouseDown: k, onMouseUp: y, className: h, classes: a, sx: S, tabIndex: v, "aria-label": j, role: s, "aria-checked": C, "aria-readonly": R, "data-hovered": B, "data-focus": D, variant: F, color: G }, M) => {
-  const n = !o && !t && (!!b || !!p), f = u ?? w, d = L(r, !!f, !!(c && !o)), N = {
+import { getChipPadding as U } from "./chipPadding.js";
+import q from "./StyledChip.module.js";
+import { forwardRef as A } from "react";
+import { jsx as m, jsxs as F } from "react/jsx-runtime";
+var O = A(({ dataTest: g, label: c, size: r = "medium", disabled: t, readOnly: o, clickable: b, icon: w, avatar: u, deleteIcon: _, onDelete: l, onClick: p, onMouseDown: k, onMouseUp: y, className: h, classes: a, sx: S, tabIndex: v, deleteButtonTabIndex: j, "aria-label": C, role: s, "aria-checked": R, "aria-readonly": B, "data-hovered": D, "data-focus": I, variant: G, color: H }, M) => {
+  const n = !o && !t && (!!b || !!p), f = u ?? w, d = U(r, !!f, !!(l && !o)), N = {
     paddingTop: d.top,
     paddingRight: d.right,
     paddingBottom: d.bottom,
     paddingLeft: d.left
-  }, I = (e) => {
-    e.stopPropagation(), c?.(e);
   }, K = (e) => {
+    e.stopPropagation(), l?.(e);
+  }, P = (e) => {
     n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), p?.(e));
-  }, P = x(h, "width"), W = x(h, "max-width");
-  return /* @__PURE__ */ A("div", {
+  }, W = x(h, "width"), $ = x(h, "max-width");
+  return /* @__PURE__ */ F("div", {
     ref: M,
     "data-testid": g,
-    "aria-label": j,
-    "data-hovered": B,
-    "data-focus": D,
+    "aria-label": C,
+    "data-hovered": D,
+    "data-focus": I,
     role: s ?? (n ? "button" : void 0),
-    "aria-checked": s ? C : void 0,
-    "aria-readonly": s ? R : void 0,
-    tabIndex: o ? void 0 : n ? v ?? 0 : v,
+    "aria-checked": s ? R : void 0,
+    "aria-readonly": s ? B : void 0,
+    tabIndex: o || t ? void 0 : n ? v ?? 0 : v,
     onClick: t || o ? void 0 : p,
-    onKeyDown: t || o ? void 0 : K,
+    onKeyDown: t || o ? void 0 : P,
     onMouseDown: t || o ? void 0 : k,
     onMouseUp: t || o ? void 0 : y,
-    className: i("box-border inline-flex items-center gap-1 rounded-[25px] border border-solid border-delta-300 bg-white text-base text-delta-700", !P && "w-fit", !W && "max-w-full", r === "small" ? "h-6" : "h-8", o && "pointer-events-none", t && "pointer-events-none opacity-[0.38]", n && i("cursor-pointer outline-none", "data-[hovered]:border-gama-200 data-[hovered]:bg-gama-25 hover:border-gama-200 hover:bg-gama-25", "active:!border-gama-400 active:bg-gama-25 active:shadow-[0_0_0_2px_var(--colors-gama-400)]"), U["focus-ring"], a?.root, h),
+    className: i("box-border inline-flex items-center gap-1 rounded-[25px] border border-solid border-delta-300 bg-white text-base text-delta-700", !W && "w-fit", !$ && "max-w-full", r === "small" ? "h-6" : "h-8", o && "pointer-events-none", t && "pointer-events-none opacity-[0.38]", n && i("cursor-pointer outline-none", "data-[hovered]:border-gama-200 data-[hovered]:bg-gama-25 hover:border-gama-200 hover:bg-gama-25", "active:!border-gama-400 active:bg-gama-25 active:shadow-[0_0_0_2px_var(--colors-gama-400)]"), q["focus-ring"], a?.root, h),
     style: {
       ...N,
-      ...$(S)
+      ...E(S)
     },
     children: [
       f && /* @__PURE__ */ m("span", {
@@ -43,16 +43,17 @@ var z = q(({ dataTest: g, label: l, size: r = "medium", disabled: t, readOnly: o
       }),
       /* @__PURE__ */ m("span", {
         className: i("min-w-0 truncate", a?.label),
-        children: l
+        children: c
       }),
-      c && !o && /* @__PURE__ */ m("button", {
+      l && !o && /* @__PURE__ */ m("button", {
         type: "button",
+        tabIndex: j,
         "data-testid": `${g}-delete`,
-        "aria-label": typeof l == "string" ? `Remove ${l}` : "Remove",
-        onClick: I,
+        "aria-label": typeof c == "string" ? `Remove ${c}` : "Remove",
+        onClick: K,
         disabled: t,
         className: i("flex shrink-0 items-center justify-center rounded-full border border-solid border-delta-100 bg-delta-50 p-0 text-delta-700 [outline:none]", r === "small" ? "h-[18px] w-[18px]" : "h-5 w-5", a?.deleteIcon),
-        children: _ ?? /* @__PURE__ */ m(E, {
+        children: _ ?? /* @__PURE__ */ m(L, {
           height: r === "small" ? 14 : 16,
           width: r === "small" ? 14 : 16,
           className: "min-w-0 shrink-0"
@@ -62,5 +63,5 @@ var z = q(({ dataTest: g, label: l, size: r = "medium", disabled: t, readOnly: o
   });
 });
 export {
-  z as StyledChip
+  O as StyledChip
 };

package/dist/components/data-display/tooltip/StyledTooltip.js

@@ -1,63 +1,92 @@
-import { cn as S } from "../../../helpers/cn.js";
-import { resolveSx as M } from "../../../helpers/sx.js";
-import { TOP_LAYER_PROPS as U, TOP_LAYER_RESET_STYLE as Y, getOpenModalDialogAncestor as j, shouldUsePopoverTopLayer as k, useTopLayerRef as C } from "../../../hooks/useTopLayer.hook.js";
-import { cloneElement as D, useRef as H, useState as I } from "react";
-import { Fragment as N, jsx as f, jsxs as g } from "react/jsx-runtime";
-import { FloatingArrow as z, FloatingPortal as B, arrow as G, autoUpdate as W, flip as q, offset as J, shift as K, useDismiss as Q, useFloating as V, useFocus as X, useHover as Z, useInteractions as $, useMergeRefs as ee, useRole as oe } from "@floating-ui/react";
-var te = "#363E4A", pe = (e) => !e.title && e.title !== 0 ? e.children : /* @__PURE__ */ f(re, { ...e }), re = ({ title: e, children: t, placement: u = "top", arrow: r = !1, enterDelay: x = 500, leaveDelay: v = 0, open: p, onOpen: R, onClose: y, disableHoverListener: h, disableFocusListener: w, offsetDistance: F, className: T, slotProps: s }) => {
-  const [_, E] = I(!1), l = p !== void 0, n = p ?? _, c = H(null), O = (m) => {
-    l || E(m), m ? R?.() : y?.();
-  }, { refs: i, floatingStyles: b, context: o } = V({
-    open: n,
-    onOpenChange: O,
-    placement: u,
+import { cn as N } from "../../../helpers/cn.js";
+import { resolveSx as U } from "../../../helpers/sx.js";
+import { firstTabbable as Y } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as j, TOP_LAYER_RESET_STYLE as k, getOpenModalDialogAncestor as D, shouldUsePopoverTopLayer as z, useTopLayerRef as G } from "../../../hooks/useTopLayer.hook.js";
+import { Fragment as W, cloneElement as $, useEffect as q, useLayoutEffect as J, useRef as K, useState as Q } from "react";
+import { Fragment as V, jsx as c, jsxs as v } from "react/jsx-runtime";
+import { FloatingArrow as X, FloatingPortal as Z, arrow as ee, autoUpdate as te, flip as oe, offset as ne, safePolygon as re, shift as se, useDismiss as ie, useFloating as ae, useFocus as le, useHover as ce, useInteractions as fe, useMergeRefs as de, useRole as pe } from "@floating-ui/react";
+var ue = "#363E4A", me = (t) => {
+  const n = document.createRange();
+  return n.selectNodeContents(t), n.getBoundingClientRect();
+}, Te = (t) => !t.title && t.title !== 0 ? t.children : /* @__PURE__ */ c(ge, { ...t }), ge = ({ title: t, children: n, placement: x = "top", arrow: f = !1, enterDelay: h = 500, leaveDelay: E = 0, open: b, onOpen: F, onClose: T, disableHoverListener: A, disableFocusListener: P, offsetDistance: _, className: w, slotProps: d }) => {
+  const [L, O] = Q(!1), p = b !== void 0, s = b ?? L, R = K(null), S = (e) => {
+    p || O(e), e ? F?.() : T?.();
+  }, { refs: o, floatingStyles: C, context: r } = ae({
+    open: s,
+    onOpenChange: S,
+    placement: x,
     strategy: "fixed",
-    whileElementsMounted: W,
+    whileElementsMounted: te,
     middleware: [
-      J(F ?? (r ? 8 : 6)),
-      q({ padding: 8 }),
-      K({ padding: 8 }),
-      ...r ? [G({ element: c })] : []
+      ne(_ ?? (f ? 8 : 6)),
+      oe({ padding: 8 }),
+      se({ padding: 8 }),
+      ...f ? [ee({ element: R })] : []
     ]
-  }), { getReferenceProps: P, getFloatingProps: A } = $([
-    Z(o, {
-      enabled: !l && !h,
+  }), { getReferenceProps: M, getFloatingProps: B } = fe([
+    ce(r, {
+      enabled: !p && !A,
       delay: {
-        open: x,
-        close: v
+        open: h,
+        close: E
       },
-      move: !1
+      move: !1,
+      handleClose: re()
     }),
-    X(o, { enabled: !l && !w }),
-    Q(o),
-    oe(o, { role: "tooltip" })
-  ]), d = n ? j(i.reference.current) : void 0, a = k(d), L = C(i.setFloating, a);
-  return /* @__PURE__ */ g(N, { children: [D(t, P({
-    ref: ee([i.setReference, t.ref]),
-    ...t.props
-  })), n && /* @__PURE__ */ f(B, {
-    root: d,
-    children: /* @__PURE__ */ g("div", {
-      ref: L,
-      ...a ? U : {},
-      ...A(),
+    le(r, { enabled: !p && !P }),
+    ie(r),
+    pe(r, { role: "tooltip" })
+  ]), y = s ? D(o.domReference.current) : void 0, u = z(y), H = G(o.setFloating, u), { floatingId: i } = r;
+  q(() => {
+    const e = o.domReference.current;
+    if (!s || !i || !(e instanceof HTMLElement)) return;
+    const a = Y(e) ?? e, l = a.getAttribute("aria-describedby");
+    return a.setAttribute("aria-describedby", l ? `${l} ${i}` : i), () => {
+      l === null ? a.removeAttribute("aria-describedby") : a.setAttribute("aria-describedby", l);
+    };
+  }, [
+    s,
+    o.domReference,
+    i
+  ]);
+  const m = n.type === W, g = m ? /* @__PURE__ */ c("span", {
+    style: { display: "contents" },
+    children: n
+  }) : n;
+  J(() => {
+    const e = o.domReference.current;
+    !m || !e || o.setPositionReference({
+      contextElement: e,
+      getBoundingClientRect: () => me(e)
+    });
+  }, [m, o]);
+  const { ["aria-describedby"]: be, ...I } = M({
+    ref: de([o.setReference, g.ref]),
+    ...g.props
+  });
+  return /* @__PURE__ */ v(V, { children: [$(g, I), s && /* @__PURE__ */ c(Z, {
+    root: y,
+    children: /* @__PURE__ */ v("div", {
+      ref: H,
+      ...u ? j : {},
+      ...B(),
       style: {
-        ...a ? Y : {},
-        ...b,
+        ...u ? k : {},
+        ...C,
         fontFamily: "Roboto, Helvetica, Arial, sans-serif",
         overflow: "visible",
-        ...s?.tooltip?.style,
-        ...M(s?.tooltip?.sx)
+        ...d?.tooltip?.style,
+        ...U(d?.tooltip?.sx)
       },
-      className: S("z-[1500] block max-w-[320px] whitespace-normal break-words rounded-[3px] bg-[#363E4A] px-2 py-1 text-sm leading-5 text-white shadow-[0px_1px_6px_0px_rgba(0,0,0,0.15)]", T, s?.tooltip?.className),
-      children: [e, r && /* @__PURE__ */ f(z, {
-        ref: c,
-        context: o,
-        fill: te
+      className: N("z-[1500] block max-w-[320px] whitespace-normal break-words rounded-[3px] bg-[#363E4A] px-2 py-1 text-sm leading-5 text-white shadow-[0px_1px_6px_0px_rgba(0,0,0,0.15)]", w, d?.tooltip?.className),
+      children: [t, f && /* @__PURE__ */ c(X, {
+        ref: R,
+        context: r,
+        fill: ue
       })]
     })
   })] });
 };
 export {
-  pe as StyledTooltip
+  Te as StyledTooltip
 };

package/dist/components/feedback/dialog/StyledDialog.js

@@ -1,108 +1,112 @@
-import { cn as f } from "../../../helpers/cn.js";
-import { resolveSx as N } from "../../../helpers/sx.js";
-import { CloseIcon as X } from "../../icons/close-icon/CloseIcon.js";
-import { registerOpenModalDialog as B } from "../../../hooks/useTopLayer.hook.js";
-import { StyledButton as G } from "../../inputs/button/StyledButton.js";
+import { cn as p } from "../../../helpers/cn.js";
+import { resolveSx as S } from "../../../helpers/sx.js";
+import { CloseIcon as B } from "../../icons/close-icon/CloseIcon.js";
+import { registerOpenModalDialog as G } from "../../../hooks/useTopLayer.hook.js";
+import { StyledButton as L } from "../../inputs/button/StyledButton.js";
 import { useMobileMediaQuery as P } from "../../../hooks/useMediaQuery.hook.js";
 import Q from "./StyledDialog.module.js";
-import { useEffect as D, useLayoutEffect as $, useRef as u } from "react";
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
+import { useEffect as D, useLayoutEffect as $, useRef as i } from "react";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
 var J = {
   xs: 444,
   sm: 600,
   md: 900,
   lg: 1200,
   xl: 1536
-}, re = ({ open: t, onClose: a, children: S, dataTest: i, maxWidth: x = "sm", fullWidth: _, fullScreen: C, scroll: E = "paper", disableEscapeKeyDown: p, className: H, style: j, sx: M, classes: h, PaperProps: O, slotProps: o, onCloseText: y, showCloseIcon: w = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: R }) => {
-  const W = P(), v = u(null), c = u(!1), b = u(t), n = C ?? W;
+}, ne = ({ open: t, onClose: a, children: C, dataTest: c, maxWidth: h = "sm", fullWidth: H, fullScreen: _, scroll: M = "paper", disableEscapeKeyDown: y, className: j, style: R, sx: O, classes: w, PaperProps: W, slotProps: n, onCloseText: v, showCloseIcon: b = !0, dialogLabel: d, dialogTitle: s, dialogHeaderNode: I }) => {
+  const z = P(), g = i(null), m = i(null), f = i(!1), k = i(t), o = _ ?? z;
   D(() => {
-    b.current && !t && o?.transition?.onExited?.(), b.current = t;
-  }, [t, o]), $(() => {
-    const e = v.current;
-    if (!(!e || !t))
-      return e.open || (e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 }))), B(e);
+    k.current && !t && n?.transition?.onExited?.(), k.current = t;
+  }, [t, n]), $(() => {
+    const e = g.current;
+    if (!e || !t) return;
+    e.open || (m.current = document.activeElement instanceof HTMLElement ? document.activeElement : null, e.showModal(), e.focus({ preventScroll: !0 }), requestAnimationFrame(() => e.open && e.focus({ preventScroll: !0 })));
+    const x = G(e);
+    return () => {
+      x(), m.current?.isConnected && m.current.focus({ preventScroll: !0 });
+    };
   }, [t]), D(() => {
     if (!t) return;
-    const e = document.body.style.overflow, K = document.documentElement.style.overflow;
+    const e = document.body.style.overflow, x = document.documentElement.style.overflow;
     return document.body.style.overflow = "hidden", document.documentElement.style.overflow = "hidden", () => {
-      document.body.style.overflow = e, document.documentElement.style.overflow = K;
+      document.body.style.overflow = e, document.documentElement.style.overflow = x;
     };
   }, [t]);
-  const m = {
-    ...O,
-    ...o?.paper
-  }, g = x === !1 ? void 0 : J[x], { className: I, style: z, onClick: q, ...A } = o?.backdrop ?? {}, k = (e) => {
-    c.current || (c.current = !0, window.setTimeout(() => {
-      c.current = !1;
+  const u = {
+    ...W,
+    ...n?.paper
+  }, N = h === !1 ? void 0 : J[h], { className: q, style: A, onClick: F, ...K } = n?.backdrop ?? {}, E = (e) => {
+    f.current || (f.current = !0, window.setTimeout(() => {
+      f.current = !1;
     }, 0), a?.(e, "escapeKeyDown"));
-  }, F = (e) => {
-    e.preventDefault(), p || k(e);
+  }, X = (e) => {
+    e.preventDefault(), y || E(e);
   };
-  return t ? /* @__PURE__ */ r("dialog", {
-    ref: v,
+  return t ? /* @__PURE__ */ l("dialog", {
+    ref: g,
     tabIndex: -1,
-    "data-testid": i,
-    "aria-label": i,
-    onCancel: F,
+    "data-testid": c,
+    "aria-label": c,
+    onCancel: X,
     onKeyDown: (e) => {
-      e.key !== "Escape" || p || (e.preventDefault(), k(e));
+      e.key !== "Escape" || y || (e.preventDefault(), E(e));
     },
-    className: f(Q.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", E === "body" && "overflow-y-auto", H, h?.root),
+    className: p(Q.StyledDialog, "fixed inset-0 m-0 h-full max-h-none w-full max-w-none items-center justify-center overflow-hidden border-0 bg-transparent p-0 outline-none open:flex", M === "body" && "overflow-y-auto", j, w?.root),
     style: {
       zIndex: 999,
-      ...N(M),
-      ...j
+      ...S(O),
+      ...R
     },
-    children: [/* @__PURE__ */ l("div", {
-      ...A,
-      className: f("absolute inset-0 bg-[#626e7eb2]", I),
-      style: z,
+    children: [/* @__PURE__ */ r("div", {
+      ...K,
+      className: p("absolute inset-0 bg-[#626e7eb2]", q),
+      style: A,
       onClick: (e) => {
-        q?.(e), e.defaultPrevented || a?.(e, "backdropClick");
+        F?.(e), e.defaultPrevented || a?.(e, "backdropClick");
       }
-    }), /* @__PURE__ */ r("div", {
-      className: f("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", n && "rounded-none", m.className, h?.paper),
+    }), /* @__PURE__ */ l("div", {
+      className: p("relative z-[1] flex flex-col overflow-hidden rounded-lg border-0 bg-white p-0 text-delta-800 shadow-[0px_4px_40px_0px_#22213366]", o && "rounded-none", u.className, w?.paper),
       style: {
         minWidth: 0,
         minHeight: 0,
-        ...!n && g ? { maxWidth: g } : {},
-        ...n ? {
+        ...!o && N ? { maxWidth: N } : {},
+        ...o ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : {
-          width: _ ? "calc(100% - 64px)" : "auto",
+          width: H ? "calc(100% - 64px)" : "auto",
           maxHeight: "100%"
         },
-        ...N(m.sx),
-        ...m.style,
-        ...n ? {
+        ...S(u.sx),
+        ...u.style,
+        ...o ? {
           width: "100%",
           maxWidth: "100%",
           height: "100%",
           maxHeight: "100%"
         } : { maxHeight: "calc(100% - 64px)" }
       },
-      children: [(!!d || !!s || w) && /* @__PURE__ */ r("div", {
+      children: [(!!d || !!s || b) && /* @__PURE__ */ l("div", {
         className: "box-border flex w-full min-w-0 max-w-full justify-between px-4 pt-4",
-        children: [/* @__PURE__ */ r("div", {
+        children: [/* @__PURE__ */ l("div", {
           className: "flex min-w-0 flex-1 flex-col justify-start gap-0.5",
-          children: [d && /* @__PURE__ */ l("div", {
+          children: [d && /* @__PURE__ */ r("div", {
             className: "flex h-8 items-center text-sm font-normal leading-5 text-delta-600",
             children: d
-          }), s && /* @__PURE__ */ l("div", {
+          }), s && /* @__PURE__ */ r("div", {
             className: "flex text-2xl font-semibold leading-8 text-delta-800",
             children: s
           })]
-        }), w && /* @__PURE__ */ r("div", {
+        }), b && /* @__PURE__ */ l("div", {
           className: "flex min-w-0 max-w-full shrink-0 justify-end gap-2",
-          children: [R, /* @__PURE__ */ l(G, {
-            dataTest: `close-button-${i}`,
-            "aria-label": y ? void 0 : "Close",
+          children: [I, /* @__PURE__ */ r(L, {
+            dataTest: `close-button-${c}`,
+            "aria-label": v ? void 0 : "Close",
             variant: "textGray",
             size: "small",
-            endIcon: /* @__PURE__ */ l(X, {
+            endIcon: /* @__PURE__ */ r(B, {
               width: 20,
               height: 20
             }),
@@ -113,13 +117,13 @@ var J = {
               paddingRight: "6px",
               paddingLeft: "6px"
             },
-            children: y
+            children: v
           })]
         })]
-      }), S]
+      }), C]
     })]
   }) : null;
 };
 export {
-  re as StyledDialog
+  ne as StyledDialog
 };