asma-ui-core 3.51.0 → 3.52.0

package/dist/components/navigation/menu/StyledMenu.js

@@ -1,11 +1,11 @@
-import { cn as y } from "../../../helpers/cn.js";
-import { StyledPopover as S } from "../../utils/popover/StyledPopover.js";
-import { StyledMenuList as f } from "./StyledMenuList.js";
+import { cn as S } from "../../../helpers/cn.js";
+import { StyledPopover as f } from "../../utils/popover/StyledPopover.js";
+import { StyledMenuList as u } from "./StyledMenuList.js";
 import { jsx as p } from "react/jsx-runtime";
-var u = {
+var v = {
   border: "1px solid var(--colors-delta-300)",
   boxShadow: "0px 2px 4px 0px rgba(34, 33, 51, 0.15)"
-}, M = ({ open: a, anchorEl: o, onClose: t, anchorOrigin: l, transformOrigin: m, id: d, className: s, sx: x, classes: e, slotProps: r, autoFocus: i = !0, onClick: c, children: n }) => /* @__PURE__ */ p(S, {
+}, h = ({ open: a, anchorEl: o, onClose: t, anchorOrigin: l, transformOrigin: m, id: d, className: s, sx: x, classes: e, slotProps: r, autoFocus: i = !0, onClick: c, children: n, keepMounted: y }) => /* @__PURE__ */ p(f, {
   open: a,
   anchorEl: o,
   onClose: t,
@@ -14,12 +14,13 @@ var u = {
   id: d,
   className: s,
   sx: x,
+  keepMounted: y,
   slotProps: { paper: {
-    className: y("rounded", e?.paper, r?.paper?.className),
-    sx: [u, r?.paper?.sx],
+    className: S("rounded", e?.paper, r?.paper?.className),
+    sx: [v, r?.paper?.sx],
     style: r?.paper?.style
   } },
-  children: /* @__PURE__ */ p(f, {
+  children: /* @__PURE__ */ p(u, {
     autoFocus: i,
     className: e?.list,
     onClick: c,
@@ -27,5 +28,5 @@ var u = {
   })
 });
 export {
-  M as StyledMenu
+  h as StyledMenu
 };

package/dist/components/navigation/tabs/StyledTabs.js

@@ -1,23 +1,23 @@
 import { cn as n } from "../../../helpers/cn.js";
-import { resolveSx as M } from "../../../helpers/sx.js";
-import { ChevronRightIcon as V } from "../../icons/chevron-right-icon/ChevronRightIcon.js";
-import { ChevronLeftIcon as _ } from "../../icons/chevron-left-icon/ChevronLeftIcon.js";
+import { resolveSx as K } from "../../../helpers/sx.js";
+import { ChevronRightIcon as M } from "../../icons/chevron-right-icon/ChevronRightIcon.js";
+import { ChevronLeftIcon as V } from "../../icons/chevron-left-icon/ChevronLeftIcon.js";
 import { consumerOverrides as q } from "../../../helpers/classOverride.js";
 import { TabsContext as z } from "./TabsContext.js";
-import { Children as F, cloneElement as G, isValidElement as J, useCallback as u, useLayoutEffect as Q, useMemo as U, useRef as E, useState as A } from "react";
+import { Children as F, cloneElement as G, isValidElement as J, useCallback as b, useLayoutEffect as Q, useMemo as U, useRef as E, useState as A } from "react";
 import { jsx as l, jsxs as B } from "react/jsx-runtime";
-var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButtons: w = "auto", centered: j, size: b = "default", className: x, sx: N, children: y }) => {
-  const a = E(null), d = E(/* @__PURE__ */ new Map()), [h, O] = A({
+var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButtons: w = "auto", centered: j, size: h = "default", className: p, sx: N, children: x }) => {
+  const a = E(null), c = E(/* @__PURE__ */ new Map()), [u, O] = A({
     left: 0,
     width: 0,
     disabled: !1
-  }), [c, W] = A({
+  }), [d, W] = A({
     left: !1,
     right: !1
-  }), p = g === "scrollable", v = u((e, t) => {
-    t ? d.current.set(e, t) : d.current.delete(e);
-  }, []), S = u((e, t) => m?.(e, t), [m]), f = u(() => {
-    const e = d.current.get(i), t = a.current;
+  }), y = g === "scrollable", v = b((e, t) => {
+    t ? c.current.set(e, t) : c.current.delete(e);
+  }, []), S = b((e, t) => m?.(e, t), [m]), f = b(() => {
+    const e = c.current.get(i), t = a.current;
     if (e && O({
       left: e.offsetLeft,
       width: e.offsetWidth,
@@ -36,13 +36,13 @@ var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButto
     if (!e) return;
     const t = new ResizeObserver(f);
     return t.observe(e), () => t.disconnect();
-  }, [f, y]);
+  }, [f, x]);
   const k = (e) => {
     a.current?.scrollBy({
       left: e,
       behavior: "smooth"
     });
-  }, D = (e) => {
+  }, _ = (e) => {
     if (![
       "ArrowRight",
       "ArrowLeft",
@@ -50,35 +50,35 @@ var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButto
       "End"
     ].includes(e.key)) return;
     e.preventDefault();
-    const t = Array.from(d.current.values()).filter((s) => !s.disabled);
+    const t = Array.from(c.current.values()).filter((s) => !s.disabled);
     if (t.length === 0) return;
     const o = t.findIndex((s) => s === document.activeElement);
     let r = o;
     e.key === "ArrowRight" ? r = (o + 1) % t.length : e.key === "ArrowLeft" ? r = (o - 1 + t.length) % t.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), t[r]?.focus();
-  }, L = p && w !== !1, R = w === !0, P = L && (R || c.left), T = L && (R || c.right), H = q(x, "padding-x"), K = U(() => ({
+  }, L = y && w !== !1, R = w === !0, D = L && (R || d.left), P = L && (R || d.right), T = q(p, "padding-x"), H = U(() => ({
     value: i,
-    size: b,
+    size: h,
     onSelect: S,
     register: v
   }), [
     i,
-    b,
+    h,
     S,
     v
   ]), C = "flex h-10 w-10 shrink-0 items-center justify-center self-center rounded-[10%] border border-solid border-delta-500 text-delta-700 transition-colors hover:bg-gama-50 disabled:invisible";
   return /* @__PURE__ */ l(z.Provider, {
-    value: K,
+    value: H,
     children: /* @__PURE__ */ B("div", {
-      className: n("relative flex items-center rounded-t-lg bg-white", !H && "px-4", x),
-      style: M(N),
+      className: n("relative flex items-center rounded-t-lg bg-white", !T && "px-4", p),
+      style: K(N),
       children: [
-        P && /* @__PURE__ */ l("button", {
+        D && /* @__PURE__ */ l("button", {
           type: "button",
           "aria-label": "scroll tabs left",
           className: n(C, "mr-2"),
-          disabled: !c.left,
+          disabled: !d.left,
           onClick: () => k(-I),
-          children: /* @__PURE__ */ l(_, {
+          children: /* @__PURE__ */ l(V, {
             width: 24,
             height: 24
           })
@@ -87,25 +87,25 @@ var I = 120, le = ({ value: i, onChange: m, variant: g = "standard", scrollButto
           ref: a,
           role: "tablist",
           "aria-orientation": "horizontal",
-          onKeyDown: D,
+          onKeyDown: _,
           onScroll: f,
-          className: n("relative flex border-x-0 border-b border-t-0 border-solid border-delta-200 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", p ? "flex-1 overflow-x-auto" : "w-full", g === "fullWidth" && "[&>*]:flex-1", j && "justify-center", b === "small" && "min-h-9"),
-          children: [F.map(y, (e, t) => J(e) ? G(e, { index: t }) : e), /* @__PURE__ */ l("span", {
+          className: n("relative flex bg-[linear-gradient(to_top,var(--colors-delta-200)_1px,transparent_1px)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", y ? "flex-1 overflow-x-auto" : "w-full", g === "fullWidth" && "[&>*]:flex-1", j && "justify-center", h === "small" && "min-h-9"),
+          children: [F.map(x, (e, t) => J(e) ? G(e, { index: t }) : e), /* @__PURE__ */ l("span", {
             "aria-hidden": !0,
-            className: n("absolute bottom-0 h-0.5 transition-all duration-300", h.disabled ? "bg-delta-300" : "bg-gama-500"),
+            className: n("absolute bottom-0 h-0.5 transition-all duration-300", u.disabled ? "bg-delta-300" : "bg-gama-500"),
             style: {
-              left: h.left,
-              width: h.width
+              left: u.left,
+              width: u.width
             }
           })]
         }),
-        T && /* @__PURE__ */ l("button", {
+        P && /* @__PURE__ */ l("button", {
           type: "button",
           "aria-label": "scroll tabs right",
           className: n(C, "ml-2"),
-          disabled: !c.right,
+          disabled: !d.right,
           onClick: () => k(I),
-          children: /* @__PURE__ */ l(V, {
+          children: /* @__PURE__ */ l(M, {
             width: 24,
             height: 24
           })

package/dist/components/utils/popover/StyledPopover.js

@@ -1,53 +1,68 @@
-import { cn as A } from "../../../helpers/cn.js";
-import { resolveSx as i } from "../../../helpers/sx.js";
-import { TOP_LAYER_PROPS as F, TOP_LAYER_RESET_STYLE as P, getOpenModalDialogAncestor as S, useTopLayerRef as h } from "../../../hooks/useTopLayer.hook.js";
-import { useMemo as l } from "react";
-import { jsx as s } from "react/jsx-runtime";
-import { FloatingPortal as w, autoUpdate as E, flip as L, offset as z, shift as D, useDismiss as M, useFloating as O, useInteractions as N, useMergeRefs as k } from "@floating-ui/react";
-var C = {
+import { cn as E } from "../../../helpers/cn.js";
+import { resolveSx as p } from "../../../helpers/sx.js";
+import { TOP_LAYER_PROPS as F, TOP_LAYER_RESET_STYLE as O, getOpenModalDialogAncestor as L, useTopLayerRef as M } from "../../../hooks/useTopLayer.hook.js";
+import { useEffect as z, useMemo as f, useState as D } from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { FloatingPortal as N, autoUpdate as k, flip as C, offset as U, shift as Y, useDismiss as H, useFloating as K, useInteractions as $, useMergeRefs as j } from "@floating-ui/react";
+var I = {
   vertical: "bottom",
   horizontal: "left"
-}, U = {
+}, q = {
   vertical: "top",
   horizontal: "left"
-}, Y = (e, t) => `${t.vertical === "bottom" ? "top" : t.vertical === "top" ? "bottom" : e.vertical === "top" ? "top" : "bottom"}${e.horizontal === "left" ? "-start" : e.horizontal === "right" ? "-end" : ""}`, B = ({ open: e, anchorEl: t, onClose: p, anchorOrigin: r = C, transformOrigin: a = U, id: n, className: m, sx: f, slotProps: o, onClick: d, children: c }) => {
-  const { refs: u, floatingStyles: g, context: v } = O({
+}, B = (e, o) => `${o.vertical === "bottom" ? "top" : o.vertical === "top" ? "bottom" : e.vertical === "top" ? "top" : "bottom"}${e.horizontal === "left" ? "-start" : e.horizontal === "right" ? "-end" : ""}`, Z = ({ open: e, anchorEl: o, onClose: d, anchorOrigin: i = I, transformOrigin: l = q, id: u, className: m, sx: v, slotProps: a, onClick: g, children: h, keepMounted: y = !1 }) => {
+  const R = f(() => B(i, l), [i, l]), [n, _] = D(e);
+  e && !n && _(!0);
+  const r = e || y && n, { refs: s, floatingStyles: x, context: P } = K({
     open: e,
-    placement: l(() => Y(r, a), [r, a]),
+    placement: R,
     strategy: "fixed",
-    whileElementsMounted: E,
-    elements: { reference: t ?? void 0 },
+    whileElementsMounted: k,
+    elements: { reference: o ?? void 0 },
     middleware: [
-      z(4),
-      L({ padding: 8 }),
-      D({ padding: 8 })
+      U(4),
+      C({ padding: 8 }),
+      Y({ padding: 8 })
     ],
-    onOpenChange: (y, T, b) => {
-      y || p?.(T ?? {}, b === "escape-key" ? "escapeKeyDown" : "backdropClick");
+    onOpenChange: (t, b, A) => {
+      t || d?.(b ?? {}, A === "escape-key" ? "escapeKeyDown" : "backdropClick");
     }
-  }), { getFloatingProps: R } = N([M(v, {
+  }), { getFloatingProps: w } = $([H(P, {
     outsidePress: !0,
     escapeKey: !0
-  })]), _ = k([h(u.setFloating)]), x = l(() => e ? S(t) : void 0, [e, t]);
-  return e ? /* @__PURE__ */ s(w, {
-    root: x,
-    children: /* @__PURE__ */ s("div", {
-      ref: _,
-      id: n,
+  })]), S = j([M(s.setFloating)]), T = f(() => r ? L(o) : void 0, [r, o]);
+  return z(() => {
+    if (!r) return;
+    const t = s.floating.current;
+    if (!(!t || typeof t.showPopover != "function"))
+      try {
+        e && !t.matches(":popover-open") && t.showPopover(), !e && t.matches(":popover-open") && t.hidePopover();
+      } catch {
+      }
+  }, [
+    e,
+    r,
+    s.floating
+  ]), r ? /* @__PURE__ */ c(N, {
+    root: T,
+    children: /* @__PURE__ */ c("div", {
+      ref: S,
+      id: u,
       ...F,
       style: {
-        ...P,
-        ...g,
-        ...i(f),
-        ...i(o?.paper?.sx),
-        ...o?.paper?.style
+        ...O,
+        ...e ? x : {},
+        ...p(v),
+        ...p(a?.paper?.sx),
+        ...a?.paper?.style,
+        ...e ? null : { display: "none" }
       },
-      ...R({ onClick: d }),
-      className: A("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", m ?? "my-1", o?.paper?.className),
-      children: c
+      ...e ? w({ onClick: g }) : {},
+      className: E("z-[1300] overflow-auto rounded bg-white shadow-[0px_1px_12px_0px_rgba(0,0,0,0.15)]", m ?? "my-1", a?.paper?.className),
+      children: h
     })
   }) : null;
 };
 export {
-  B as StyledPopover
+  Z as StyledPopover
 };

package/dist/src/components/mui-compat/Popper.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties, ReactNode } from 'react';
 import { Placement } from '@floating-ui/react';
+import { CSSProperties, ReactNode } from 'react';
 export interface PopperTransitionProps {
     in: boolean;
     onExited: () => void;

package/dist/src/components/navigation/menu/StyledMenu.d.ts

@@ -24,10 +24,12 @@ export interface MenuProps {
     autoFocus?: boolean;
     onClick?: (event: MouseEvent<HTMLUListElement>) => void;
     children?: ReactNode;
+    /** MUI `Menu` `keepMounted` parity — see `StyledPopover.keepMounted`. */
+    keepMounted?: boolean;
 }
 /**
  * Anchored menu (replaces MUI `Menu`) = `StyledPopover` + a keyboard-navigable `StyledMenuList`.
  * Public props (`open`/`anchorEl`/`onClose`/`anchorOrigin`/`classes`/`autoFocus`) preserved
  * (DEC-003). TASK-303.
  */
-export declare const StyledMenu: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, classes, slotProps, autoFocus, onClick, children, }: MenuProps) => JSX.Element;
+export declare const StyledMenu: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, classes, slotProps, autoFocus, onClick, children, keepMounted, }: MenuProps) => JSX.Element;

package/dist/src/components/utils/popover/StyledPopover.d.ts

@@ -22,6 +22,12 @@ export interface StyledPopoverProps {
     };
     onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
     children?: ReactNode;
+    /**
+     * MUI `keepMounted` parity: after the first open, keep children in the React tree while closed
+     * (hidden). Needed when a menu item owns a dialog — without this, closing the menu unmounts the
+     * dialog in the same tick it opens.
+     */
+    keepMounted?: boolean;
 }
 /**
  * @figmaNode none — no standalone Figma component
@@ -36,4 +42,4 @@ export interface StyledPopoverProps {
  * mapping to MUI's `onClose(event, reason)`. `anchorOrigin`/`transformOrigin`/`slotProps.paper`
  * preserved (DEC-003). TASK-302.
  */
-export declare const StyledPopover: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, slotProps, onClick, children, }: StyledPopoverProps) => JSX.Element | null;
+export declare const StyledPopover: ({ open, anchorEl, onClose, anchorOrigin, transformOrigin, id, className, sx, slotProps, onClick, children, keepMounted, }: StyledPopoverProps) => JSX.Element | null;

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.51.0",
+    "version": "3.52.0",
     "type": "module",
     "sideEffects": [
         "**/*.css",