asma-ui-core 3.101.0 → 3.101.2

package/dist/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.js

@@ -1,8 +1,7 @@
-import { cn as u } from "../../../../helpers/cn.js";
-import { jsx as d, jsxs as x } from "react/jsx-runtime";
-var g = ({ dataTest: a, options: c, value: t, title: n, size: i = "medium", valueKey: o = "value", labelKey: m = "label", renderLabel: r }) => {
-  const s = (e) => typeof e == "object" ? e?.[o] : e, f = (e) => typeof e == "object" ? e?.[m]?.toString() ?? "" : e?.toString() ?? "", l = t == null ? null : c.find((e) => s(e) === s(t)) ?? t;
-  return /* @__PURE__ */ x("div", {
+import { jsx as d, jsxs as u } from "react/jsx-runtime";
+var m = ({ dataTest: a, options: c, value: t, title: n, valueKey: i = "value", labelKey: o = "label", renderLabel: r }) => {
+  const s = (e) => typeof e == "object" ? e?.[i] : e, f = (e) => typeof e == "object" ? e?.[o]?.toString() ?? "" : e?.toString() ?? "", l = t == null ? null : c.find((e) => s(e) === s(t)) ?? t;
+  return /* @__PURE__ */ u("div", {
     "data-testid": `${a}-read-only`,
     className: "flex flex-col gap-y-1",
     children: [n && /* @__PURE__ */ d("span", {
@@ -10,11 +9,11 @@ var g = ({ dataTest: a, options: c, value: t, title: n, size: i = "medium", valu
       children: n
     }), /* @__PURE__ */ d("div", {
       "data-testid": `${a}-read-only-value`,
-      className: u("text-delta-700", i === "small" ? "text-sm/5" : "text-base/6"),
+      className: "text-base/6 text-delta-700",
       children: l === null ? "-" : r ? r(l) : f(l)
     })]
   });
 };
 export {
-  g as DynamicSelectReadOnlyValue
+  m as DynamicSelectReadOnlyValue
 };

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

@@ -1,46 +1,53 @@
-import { cn as p } from "../../../helpers/cn.js";
-import { CloseIcon as m } from "../../icons/close-icon/CloseIcon.js";
-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: [
-      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: a
-      }),
-      /* @__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(c, {
-          dataTest: `${i}-close`,
-          variant: "textGray",
-          type: "button",
-          "aria-label": s,
-          onClick: x,
-          startIcon: /* @__PURE__ */ e(m, {
-            width: 24,
-            height: 24
+import { cn as n } from "../../../helpers/cn.js";
+import { CloseIcon as c } from "../../icons/close-icon/CloseIcon.js";
+import { StyledButton as h } from "../../inputs/button/StyledButton.js";
+import { useScrollGutter as u } from "./useScrollGutter.js";
+import { useRef as v } from "react";
+import { Fragment as g, jsx as e, jsxs as r } from "react/jsx-runtime";
+var _ = 40, j = "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]", k = ({ dataTest: d, title: t, titleId: m, children: f, viewResultsAction: l, resetAction: a, footerActions: o, closeLabel: p, onClose: x }) => {
+  const i = v(null), s = u(i);
+  return /* @__PURE__ */ r(g, { children: [
+    /* @__PURE__ */ r("div", {
+      className: "relative flex min-h-0 flex-1 flex-col",
+      children: [
+        t && /* @__PURE__ */ e("div", {
+          id: m,
+          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", {
+          ref: i,
+          className: n("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto py-2 pl-4 [scrollbar-gutter:stable]", !t && s.overflows && "mt-10"),
+          style: { paddingRight: Math.max(0, _ - s.width) },
+          children: f
+        }),
+        /* @__PURE__ */ e("div", {
+          className: "absolute right-0 top-0",
+          children: /* @__PURE__ */ e(h, {
+            dataTest: `${d}-close`,
+            variant: "textGray",
+            type: "button",
+            "aria-label": p,
+            onClick: x,
+            startIcon: /* @__PURE__ */ e(c, {
+              width: 24,
+              height: 24
+            })
           })
         })
-      })
-    ]
-  }),
-  (l ?? r) && /* @__PURE__ */ t("div", {
-    className: p("flex shrink-0 items-start p-1", l ? "justify-between" : "justify-end"),
-    children: [l, r]
-  }),
-  o && /* @__PURE__ */ e("div", {
-    className: "flex shrink-0 flex-col items-end p-3",
-    children: o
-  })
-] });
+      ]
+    }),
+    (l ?? a) && /* @__PURE__ */ r("div", {
+      className: n("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 {
-  g as POPOVER_SURFACE_CLASSNAME,
-  y as PopoverAnatomy
+  j as POPOVER_SURFACE_CLASSNAME,
+  k as PopoverAnatomy
 };

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

@@ -0,0 +1,33 @@
+import { useLayoutEffect as v, useState as l } from "react";
+var w = {
+  width: 0,
+  overflows: !1
+}, h = (s) => {
+  const [f, u] = l(w);
+  return v(() => {
+    const e = s.current;
+    if (!e) return;
+    const t = () => {
+      const r = e.offsetWidth - e.clientWidth, d = e.scrollHeight > e.clientHeight;
+      u((n) => n.width === r && n.overflows === d ? n : {
+        width: r,
+        overflows: d
+      });
+    };
+    if (t(), typeof ResizeObserver > "u" || typeof MutationObserver > "u") return;
+    const o = new ResizeObserver(t), i = () => {
+      o.observe(e);
+      for (const r of Array.from(e.children)) o.observe(r);
+    };
+    i();
+    const c = new MutationObserver(() => {
+      i(), t();
+    });
+    return c.observe(e, { childList: !0 }), window.addEventListener("resize", t), () => {
+      o.disconnect(), c.disconnect(), window.removeEventListener("resize", t);
+    };
+  }, [s]), f;
+};
+export {
+  h as useScrollGutter
+};

package/dist/src/components/inputs/dynamic-select/components/DynamicSelectReadOnlyValue.d.ts

@@ -1,5 +1,5 @@
 import { DynamicSelectOption, StyledDynamicSelectProps } from '../types';
-type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick<StyledDynamicSelectProps<TOption>, 'dataTest' | 'options' | 'title' | 'size' | 'valueKey' | 'labelKey' | 'renderLabel'> & {
+type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick<StyledDynamicSelectProps<TOption>, 'dataTest' | 'options' | 'title' | 'valueKey' | 'labelKey' | 'renderLabel'> & {
     value: TOption | null;
 };
 /**
@@ -7,8 +7,9 @@ type DynamicSelectReadOnlyValueProps<TOption extends DynamicSelectOption> = Pick
  * input field, no helper/error row (there is nothing to validate). Applies whatever the option
  * count, so the ≤5 chip variant and the 6+ autocomplete variant read the same.
  *
- * Text = Body Base 16/24 `text-icon/body` (delta-700); 14/20 at `size='small'`. No value → `-`, the
- * same placeholder the chip variant shows. Multiple selects never reach this component.
+ * Text = Body Base 16/24 `text-icon/body` (delta-700) at every `size`: `size` scales chips and
+ * buttons, and read-only draws neither. No value → `-`, the same placeholder the chip variant shows.
+ * Multiple selects never reach this component.
  */
-export declare const DynamicSelectReadOnlyValue: <TOption extends DynamicSelectOption>({ dataTest, options, value, title, size, valueKey, labelKey, renderLabel, }: DynamicSelectReadOnlyValueProps<TOption>) => JSX.Element;
+export declare const DynamicSelectReadOnlyValue: <TOption extends DynamicSelectOption>({ dataTest, options, value, title, valueKey, labelKey, renderLabel, }: DynamicSelectReadOnlyValueProps<TOption>) => JSX.Element;
 export {};

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

@@ -0,0 +1,19 @@
+import { RefObject } from 'react';
+export interface ScrollGutter {
+    /** Layout width the scrollbar takes: 15-17px for a classic bar, 0 for an overlay one. */
+    width: number;
+    /** The content is taller than the scroll container. */
+    overflows: boolean;
+}
+/**
+ * Measures a scroll container's scrollbar gutter and whether it overflows, and keeps both current.
+ *
+ * Meant for a container with `scrollbar-gutter: stable`: its gutter is then reserved whether or not it
+ * scrolls, so `width` is a property of the platform (and zoom), not of the content — padding derived
+ * from it cannot oscillate as scrolling starts and stops. Re-measured on its own resize, on any direct
+ * child's resize (content growing inside a container already at max-height does not resize it), when
+ * children are added or removed, and on window resize, which also catches browser zoom.
+ *
+ * Measured in a layout effect, so the corrected layout is in place before the first paint.
+ */
+export declare const useScrollGutter: (ref: RefObject<HTMLElement | null>) => ScrollGutter;

package/package.json

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