asma-ui-core 3.94.1 → 3.95.0

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

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

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

@@ -2,53 +2,53 @@ import { cn as oe } from "../../../helpers/cn.js";
 import { firstTabbable as re } from "../../../helpers/focusable.js";
 import { TOP_LAYER_PROPS as ne, TOP_LAYER_RESET_STYLE as ie, getOpenModalDialogAncestor as se, shouldUsePopoverTopLayer as ae, useTopLayerRef as ce } from "../../../hooks/useTopLayer.hook.js";
 import { StyledButton as le } from "../../inputs/button/StyledButton.js";
-import { useMobileMediaQuery as de } from "../../../hooks/useMediaQuery.hook.js";
-import { useDebouncedValue as ue } from "../../../hooks/useDebouncedValue.hook.js";
+import { useMobileMediaQuery as ue } from "../../../hooks/useMediaQuery.hook.js";
+import { useDebouncedValue as de } from "../../../hooks/useDebouncedValue.hook.js";
 import { useFocusTrap as fe } from "../../../hooks/useFocusTrap.hook.js";
 import { formatResultsLabel as pe } from "../bottom-sheet/formatResultsLabel.js";
 import { StyledBottomSheet as me } from "../bottom-sheet/StyledBottomSheet.js";
 import { PopoverAnatomy as ge } from "./PopoverAnatomy.js";
-import { useCallback as m, useEffect as y, useId as ve, useRef as R, useState as g } from "react";
+import { useCallback as m, useEffect as b, useId as ve, useRef as y, useState as g } from "react";
 import { Fragment as N, jsx as c, jsxs as W } from "react/jsx-runtime";
-import { FloatingPortal as he, autoUpdate as xe, flip as be, offset as Pe, shift as ye, size as Re, useDismiss as _e, useFloating as Ee, useInteractions as Se, useMergeRefs as Te } from "@floating-ui/react";
+import { FloatingPortal as he, autoUpdate as xe, flip as _e, offset as Pe, shift as be, size as ye, useDismiss as Re, useFloating as Ee, useInteractions as Se, useMergeRefs as Te } from "@floating-ui/react";
 var Ae = 240, Me = {
   info: 472,
   action: 472
-}, we = 0.6, B = "calc(100vw - 32px)", je = ({ dataTest: s, renderTrigger: _, variant: E = "info", title: l, children: S, viewResultsAction: T, resetAction: A, footerActions: M, resultCount: v, closeLabel: w = "Lukk", ariaLabel: F, onOpenChange: I, className: O }) => {
-  const a = ve(), L = `${a}-title`, [o, X] = g(!1), [H, U] = g(), [Y, $] = g(), d = de(), t = E === "action", j = d && !t, k = d && t, u = m((e) => {
+}, we = 0.6, B = "calc(100vw - 32px)", je = ({ dataTest: s, renderTrigger: R, variant: E = "info", title: l, children: S, viewResultsAction: T, resetAction: A, footerActions: M, resultCount: v, closeLabel: w = "Lukk", ariaLabel: F, onOpenChange: I, className: O }) => {
+  const a = ve(), L = `${a}-title`, [o, X] = g(!1), [H, U] = g(), [Y, $] = g(), u = ue(), t = E === "action", j = u && !t, k = u && t, d = m((e) => {
     X(e), I?.(e);
   }, [I]), { refs: h, floatingStyles: q, context: z } = Ee({
     open: o,
-    onOpenChange: u,
+    onOpenChange: d,
     placement: "bottom-start",
     strategy: "fixed",
     whileElementsMounted: xe,
     middleware: [
       Pe(8),
-      ...j ? [] : [be({ padding: 8 })],
-      ye({ padding: 8 }),
-      Re({
+      ...j ? [] : [_e({ padding: 8 })],
+      be({ padding: 8 }),
+      ye({
         padding: 8,
         apply({ availableHeight: e }) {
           $(Math.min(e, Math.round(window.innerHeight * we)));
         }
       })
     ]
-  }), { getFloatingProps: V } = Se([_e(z, {
+  }), { getFloatingProps: V } = Se([Re(z, {
     enabled: !k,
     escapeKey: !0,
     outsidePress: (e) => {
       const i = f.current;
       return !(i && e.target instanceof Node && i.contains(e.target));
     }
-  })]), x = ae(H), C = R(null), [r, G] = g(null), K = m((e) => {
+  })]), x = ae(H), C = y(null), [r, G] = g(null), K = m((e) => {
     C.current = e, G(e);
-  }, []), Q = Te([ce(h.setFloating, x), K]), f = R(null), J = m((e) => {
+  }, []), Q = Te([ce(h.setFloating, x), K]), f = y(null), J = m((e) => {
     f.current = e, h.setReference(e);
   }, [h]), n = m(() => {
-    u(!1);
-  }, [u]);
-  fe(o && t && r !== null, C), y(() => {
+    d(!1);
+  }, [d]);
+  fe(o && t && r !== null, C), b(() => {
     if (!r) return;
     const e = requestAnimationFrame(() => {
       (t ? re(r) : r)?.focus({ preventScroll: !0 });
@@ -56,7 +56,7 @@ var Ae = 240, Me = {
     return () => {
       cancelAnimationFrame(e);
     };
-  }, [r, t]), y(() => {
+  }, [r, t]), b(() => {
     if (!r || t) return;
     const e = (i) => {
       const P = i.relatedTarget;
@@ -70,14 +70,14 @@ var Ae = 240, Me = {
     t,
     n
   ]);
-  const b = R(!1);
-  y(() => {
+  const _ = y(!1);
+  b(() => {
     if (o) {
-      b.current = !0;
+      _.current = !0;
       return;
     }
-    if (!b.current) return;
-    b.current = !1;
+    if (!_.current) return;
+    _.current = !1;
     const e = f.current;
     if (!e) return;
     const i = requestAnimationFrame(() => {
@@ -96,21 +96,21 @@ var Ae = 240, Me = {
           n();
           return;
         }
-        U(se(e.currentTarget)), u(!0);
+        U(se(e.currentTarget)), d(!0);
       },
       "aria-expanded": o,
       "aria-controls": o ? a : void 0,
       "aria-haspopup": t ? "dialog" : void 0,
       "aria-describedby": !t && o ? a : void 0
     }
-  }, p = (e) => typeof e == "function" ? e({ close: n }) : e, Z = ue(v, 500), ee = T ?? (v === void 0 ? void 0 : /* @__PURE__ */ c(le, {
+  }, p = (e) => typeof e == "function" ? e({ close: n }) : e, Z = de(v, 500), ee = T ?? (v === void 0 ? void 0 : /* @__PURE__ */ c(le, {
     dataTest: `${s}-view-results`,
     type: "button",
     variant: "text",
     onClick: n,
     children: pe(Z)
-  })), te = d ? B : Me[E];
-  return k ? /* @__PURE__ */ W(N, { children: [_(D), /* @__PURE__ */ c(me, {
+  })), te = u ? B : Me[E];
+  return k ? /* @__PURE__ */ W(N, { children: [R(D), /* @__PURE__ */ c(me, {
     id: a,
     dataTest: s,
     open: o,
@@ -124,7 +124,7 @@ var Ae = 240, Me = {
     closeLabel: w,
     className: O,
     children: S
-  })] }) : /* @__PURE__ */ W(N, { children: [_(D), o && /* @__PURE__ */ c(he, {
+  })] }) : /* @__PURE__ */ W(N, { children: [R(D), o && /* @__PURE__ */ c(he, {
     root: H,
     children: /* @__PURE__ */ c("div", {
       ...V(),
@@ -141,11 +141,11 @@ var Ae = 240, Me = {
         ...x ? ie : {},
         ...q,
         minWidth: Ae,
-        width: d ? B : void 0,
+        width: u ? B : void 0,
         maxWidth: te,
         maxHeight: Y
       },
-      className: oe("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]", O),
+      className: oe("z-[1300]", "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]", O),
       children: /* @__PURE__ */ c(ge, {
         dataTest: s,
         title: l,

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

@@ -1,16 +1,21 @@
 import { ReactNode } from 'react';
 /**
- * The Figma "_Popover" surface chrome (node `44531:233781`): white, 1px `border/outline`, radius 8
- * (`dialog` token) and the Dialogue-popup elevation — the same surface `StyledDialog` paints.
+ * The Figma "_Popover" surface chrome (node `44531:233781`): white, 1px `border/outline` (delta-300),
+ * radius 8 (`dialog` token) and the Dialogue-popup elevation — the same surface `StyledDialog` paints.
  *
- * `border-solid` and `box-border` are load-bearing, not noise: this package builds Tailwind with
- * `preflight: false`, so without them `border` computes to `border-style: none` (no border paints at
- * all) and `box-sizing` falls back to `content-box` (a 400px max-width renders 402).
+ * The 1px edge is an **inset box-shadow ring**, the package's own idiom for non-layout lines
+ * (`StyledTab`/`StyledMenuItem` draw their DS focus rings the same way): a border consumes layout
+ * width, and at the 472px Action max-width a date-picker pair (200 + 16 + 200 = 416px, with 16px +
+ * 40px body padding) needs the full 472px of the frame — with a border only 470px remain and the
+ * pair wraps. Figma's stroke takes no width from autolayout, and the inset shadow matches that.
+ *
+ * `box-border` is load-bearing, not noise: this package builds Tailwind with `preflight: false`, so
+ * without it `box-sizing` falls back to `content-box` and a 472px max-width renders 474.
  *
  * Positioning (`z-index`, the floating transform, the top-layer props) deliberately stays with the
  * caller, so the Gallery story can render the same surface statically in a grid.
  */
-export declare const POPOVER_SURFACE_CLASSNAME = "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]";
+export declare const POPOVER_SURFACE_CLASSNAME = "box-border flex flex-col overflow-hidden rounded-lg bg-white text-delta-700 outline-none shadow-[inset_0_0_0_1px_var(--colors-delta-300),0px_4px_40px_0px_#22213366]";
 export interface PopoverAnatomyProps {
     dataTest: string;
     title?: ReactNode;

package/package.json

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