asma-ui-core 3.88.0 → 3.89.0

package/dist/components/feedback/minimizable-dialog/MinimizableDialog.js

@@ -9,9 +9,9 @@ import { ArrowShrinkIcon as me } from "../../icons/arrow-shrink-icon/ArrowShrink
 import { firstTabbable as he } from "../../../helpers/focusable.js";
 import { StyledTooltip as f } from "../../data-display/tooltip/StyledTooltip.js";
 import { StyledButton as l } from "../../inputs/button/StyledButton.js";
-import { StyledMenu as fe } from "../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as ue } from "../../navigation/menu/StyledMenuItem.js";
-import { useFocusTrap as ve } from "../../../hooks/useFocusTrap.hook.js";
+import { useFocusTrap as fe } from "../../../hooks/useFocusTrap.hook.js";
+import { StyledMenu as ue } from "../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as ve } from "../../navigation/menu/StyledMenuItem.js";
 import H from "./MinimizableDialog.module.js";
 import { useToggleMenuVisibility as pe } from "../../../hooks/useToggleMenuVisibility.hook.js";
 import J from "clsx";
@@ -19,7 +19,7 @@ import { useLayoutEffect as be, useRef as Q, useState as T } from "react";
 import { Fragment as M, jsx as e, jsxs as t } from "react/jsx-runtime";
 var Oe = ({ onCloseText: u = "", onMinimizeText: j = "", onExpandText: C = "", onFullScreenText: F = "", showCloseIcon: _ = !0, showMinimizeIcon: W = !0, showExpandIcon: X = !0, showFullScreenIcon: Y = !0, title: s, label: g, children: x, open: E, onClose: w, className: G = "", primaryButtonText: y, primaryButtonLoading: k = !1, secondaryButtonText: c, onPrimaryButtonClick: v, onSecondaryButtonClick: p, dataTest: S, actionNode: Z, extraActions: n, extraActionsText: m, btnContainerClassName: D, footerClassName: P, footerInfo: L, locale: r = "en", enableFullscreen: B = !0, fullScreenState: R, handleFullScreenState: q }) => {
   const [i, ee] = T(!1), [O, te] = T(!1), { open: ie, anchorEl: le, handleOpen: re, handleClose: ne } = pe(), b = Q(null), z = Q(null), d = R ?? O, a = d && !i;
-  if (ve(E && a, b, w), be(() => {
+  if (fe(E && a, b, w), be(() => {
     b.current?.toggleAttribute("inert", i), z.current?.toggleAttribute("inert", !i);
   }, [i]), !E) return null;
   const de = a ? {
@@ -184,11 +184,11 @@ var Oe = ({ onCloseText: u = "", onMinimizeText: j = "", onExpandText: C = "", o
               }),
               onClick: re,
               children: m
-            }), /* @__PURE__ */ e(fe, {
+            }), /* @__PURE__ */ e(ue, {
               open: ie,
               anchorEl: le,
               onClose: ne,
-              children: n.map((o) => /* @__PURE__ */ e(ue, {
+              children: n.map((o) => /* @__PURE__ */ e(ve, {
                 className: o.className,
                 onClick: o.onClick,
                 children: o.label

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

@@ -0,0 +1,46 @@
+import { cn as p } from "../../../helpers/cn.js";
+import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
+import { StyledButton as f } from "../../inputs/button/StyledButton.js";
+import { Fragment as c, jsx as e, jsxs as r } from "react/jsx-runtime";
+var y = "box-border flex flex-col overflow-hidden rounded-lg border border-solid border-delta-300 bg-white text-delta-700 outline-none shadow-[0px_4px_40px_0px_#22213366]", u = ({ dataTest: d, title: t, titleId: i, children: n, viewResultsAction: l, resetAction: a, footerActions: o, closeLabel: s, onClose: x }) => /* @__PURE__ */ r(c, { children: [
+  /* @__PURE__ */ r("div", {
+    className: "relative flex min-h-0 flex-1 flex-col",
+    children: [
+      t && /* @__PURE__ */ e("div", {
+        id: i,
+        className: "shrink-0 truncate pb-1 pl-4 pr-10 pt-2 text-lg font-semibold leading-7 text-delta-800",
+        children: t
+      }),
+      /* @__PURE__ */ e("div", {
+        className: "flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto py-2 pl-4 pr-10",
+        children: n
+      }),
+      /* @__PURE__ */ e("div", {
+        className: "absolute right-0 top-0",
+        children: /* @__PURE__ */ e(f, {
+          dataTest: `${d}-close`,
+          variant: "textGray",
+          type: "button",
+          "aria-label": s,
+          onClick: x,
+          startIcon: /* @__PURE__ */ e(m, {
+            width: 24,
+            height: 24
+          })
+        })
+      })
+    ]
+  }),
+  (l ?? a) && /* @__PURE__ */ r("div", {
+    className: p("flex shrink-0 items-start p-1", l ? "justify-between" : "justify-end"),
+    children: [l, a]
+  }),
+  o && /* @__PURE__ */ e("div", {
+    className: "flex shrink-0 flex-col items-end p-3",
+    children: o
+  })
+] });
+export {
+  y as POPOVER_SURFACE_CLASSNAME,
+  u as PopoverAnatomy
+};

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

@@ -0,0 +1,140 @@
+import { cn as K } from "../../../helpers/cn.js";
+import { firstTabbable as Q } from "../../../helpers/focusable.js";
+import { TOP_LAYER_PROPS as J, TOP_LAYER_RESET_STYLE as Z, getOpenModalDialogAncestor as ee, shouldUsePopoverTopLayer as te, useTopLayerRef as re } from "../../../hooks/useTopLayer.hook.js";
+import { useMobileMediaQuery as oe } from "../../../hooks/useMediaQuery.hook.js";
+import { useFocusTrap as ne } from "../../../hooks/useFocusTrap.hook.js";
+import { PopoverAnatomy as ie } from "./PopoverAnatomy.js";
+import { useCallback as d, useEffect as P, useId as se, useRef as b, useState as u } from "react";
+import { Fragment as ae, jsx as _, jsxs as ce } from "react/jsx-runtime";
+import { FloatingPortal as le, autoUpdate as de, flip as ue, offset as fe, shift as pe, size as ge, useDismiss as me, useFloating as ve, useInteractions as he, useMergeRefs as xe } from "@floating-ui/react";
+var Pe = 240, be = {
+  info: 360,
+  action: 400
+}, _e = 0.6, M = "calc(100vw - 32px)", Se = ({ dataTest: f, renderTrigger: F, variant: A = "info", title: p, children: I, viewResultsAction: O, resetAction: w, footerActions: L, closeLabel: S = "Lukk", ariaLabel: H, onOpenChange: R, className: k }) => {
+  const s = se(), T = `${s}-title`, [r, C] = u(!1), [y, N] = u(), [D, W] = u(), g = oe(), t = A === "action", X = g && !t, a = d((e) => {
+    C(e), R?.(e);
+  }, [R]), { refs: m, floatingStyles: U, context: Y } = ve({
+    open: r,
+    onOpenChange: a,
+    placement: "bottom-start",
+    strategy: "fixed",
+    whileElementsMounted: de,
+    middleware: [
+      fe(8),
+      ...X ? [] : [ue({ padding: 8 })],
+      pe({ padding: 8 }),
+      ge({
+        padding: 8,
+        apply({ availableHeight: e }) {
+          W(Math.min(e, Math.round(window.innerHeight * _e)));
+        }
+      })
+    ]
+  }), { getFloatingProps: j } = he([me(Y, {
+    escapeKey: !0,
+    outsidePress: (e) => {
+      const n = c.current;
+      return !(n && e.target instanceof Node && n.contains(e.target));
+    }
+  })]), v = te(y), E = b(null), [o, q] = u(null), z = d((e) => {
+    E.current = e, q(e);
+  }, []), B = xe([re(m.setFloating, v), z]), c = b(null), V = d((e) => {
+    c.current = e, m.setReference(e);
+  }, [m]), i = d(() => {
+    a(!1);
+  }, [a]);
+  ne(r && t && o !== null, E), P(() => {
+    if (!o) return;
+    const e = requestAnimationFrame(() => {
+      (t ? Q(o) : o)?.focus({ preventScroll: !0 });
+    });
+    return () => {
+      cancelAnimationFrame(e);
+    };
+  }, [o, t]), P(() => {
+    if (!o || t) return;
+    const e = (n) => {
+      const x = n.relatedTarget;
+      x instanceof Node && (o.contains(x) || c.current?.contains(x)) || i();
+    };
+    return o.addEventListener("focusout", e), () => {
+      o.removeEventListener("focusout", e);
+    };
+  }, [
+    o,
+    t,
+    i
+  ]);
+  const h = b(!1);
+  P(() => {
+    if (r) {
+      h.current = !0;
+      return;
+    }
+    if (!h.current) return;
+    h.current = !1;
+    const e = c.current;
+    if (!e) return;
+    const n = requestAnimationFrame(() => {
+      document.activeElement === document.body && e.focus();
+    });
+    return () => {
+      cancelAnimationFrame(n);
+    };
+  }, [r]);
+  const $ = {
+    ref: V,
+    isOpen: r,
+    triggerProps: {
+      onClick: (e) => {
+        if (r) {
+          i();
+          return;
+        }
+        N(ee(e.currentTarget)), a(!0);
+      },
+      "aria-expanded": r,
+      "aria-controls": r ? s : void 0,
+      "aria-haspopup": t ? "dialog" : void 0,
+      "aria-describedby": !t && r ? s : void 0
+    }
+  }, l = (e) => typeof e == "function" ? e({ close: i }) : e, G = g ? M : be[A];
+  return /* @__PURE__ */ ce(ae, { children: [F($), r && /* @__PURE__ */ _(le, {
+    root: y,
+    children: /* @__PURE__ */ _("div", {
+      ...j(),
+      ref: B,
+      id: s,
+      "data-test": f,
+      "data-testid": f,
+      role: t ? "dialog" : void 0,
+      "aria-labelledby": t && p ? T : void 0,
+      "aria-label": t && !p ? H : void 0,
+      tabIndex: t ? void 0 : -1,
+      ...v ? J : {},
+      style: {
+        ...v ? Z : {},
+        ...U,
+        minWidth: Pe,
+        width: g ? M : void 0,
+        maxWidth: G,
+        maxHeight: D
+      },
+      className: K("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg border border-solid border-delta-300 bg-white text-delta-700 outline-none shadow-[0px_4px_40px_0px_#22213366]", k),
+      children: /* @__PURE__ */ _(ie, {
+        dataTest: f,
+        title: p,
+        titleId: T,
+        viewResultsAction: l(O),
+        resetAction: l(w),
+        footerActions: l(L),
+        closeLabel: S,
+        onClose: i,
+        children: l(I)
+      })
+    })
+  })] });
+};
+export {
+  Se as StyledPopoverV2
+};