npm - asma-ui-core - Versions diffs - 3.79.1 → 3.80.1 - Mend

asma-ui-core 3.79.1 → 3.80.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/components/custom/module/header-layout/ToolbarActionGroup.js CHANGED Viewed

@@ -8,23 +8,23 @@ import { Fragment as T, jsx as n, jsxs as o } from "react/jsx-runtime";
 function O(e) {
   return e != null && (e.inlineActions.length > 0 || e.showMoreMenu);
 }
-function A({ action: e, showLabel: t, selectionTone: l = !1 }) {
-  if (e.render) return e.render({ showLabel: t });
+function A({ action: e, showLabel: l, selectionTone: i = !1 }) {
+  if (e.render) return e.render({ showLabel: l });
   const a = e.ariaLabel ?? e.label;
   return /* @__PURE__ */ n(p, {
     dataTest: e.dataTest ?? `dynamic-toolbar-action-${e.id}`,
-    variant: e.variant ?? (l ? "text" : "outlined"),
+    variant: e.variant ?? (i ? "text" : "outlined"),
     error: e.tone === "danger",
     size: e.size ?? "large",
     type: "button",
     disabled: e.disabled,
     startIcon: e.icon,
     onClick: e.onClick,
-    "aria-label": t && e.ariaLabel == null ? void 0 : a,
-    children: t ? e.label : void 0
+    "aria-label": l && e.ariaLabel == null ? void 0 : a,
+    children: l ? e.label : void 0
   });
 }
-function C({ overflowMenuLabel: e, onOpen: t }) {
+function C({ overflowMenuLabel: e, onOpen: l }) {
   return /* @__PURE__ */ n(p, {
     dataTest: "dynamic-toolbar-overflow-actions",
     variant: "text",
@@ -34,30 +34,30 @@ function C({ overflowMenuLabel: e, onOpen: t }) {
       width: 20,
       height: 20
     }),
-    onClick: (l) => t?.(l.currentTarget),
+    onClick: (i) => l?.(i.currentTarget),
     "aria-label": e,
     "aria-haspopup": "menu",
     children: e
   });
 }
-function j({ plan: e, overflowMenuLabel: t, className: l, selectionTone: a = !1, registerActionWidth: d }) {
+function j({ plan: e, overflowMenuLabel: l, className: i, selectionTone: a = !1, registerActionWidth: d }) {
   const [u, s] = y(null), { inlineActions: m, overflowActions: b, showMoreMenu: c } = e;
   return !m.length && !c ? null : /* @__PURE__ */ o("div", {
-    className: f("flex shrink-0 flex-nowrap items-center gap-2", l),
-    children: [m.map(({ action: r, showLabel: i }) => {
+    className: f("flex shrink-0 flex-nowrap items-center gap-2", i),
+    children: [m.map(({ action: r, showLabel: t }) => {
       const h = /* @__PURE__ */ n(A, {
         action: r,
-        showLabel: i,
+        showLabel: t,
         selectionTone: a
       }, r.id);
       return d == null || r.measureInStrip !== !1 ? h : /* @__PURE__ */ n("span", {
-        ref: d(r.id, i),
+        ref: d(r.id, t),
         className: "inline-flex shrink-0",
         children: h
       }, r.id);
     }), c && /* @__PURE__ */ o(T, { children: [/* @__PURE__ */ n(C, {
-      overflowMenuLabel: t,
-      onOpen: s
+      overflowMenuLabel: l,
+      onOpen: (r) => s((t) => t ? null : r)
     }), /* @__PURE__ */ n(x, {
       anchorEl: u,
       open: !!u,
@@ -70,7 +70,7 @@ function j({ plan: e, overflowMenuLabel: t, className: l, selectionTone: a = !1,
         vertical: "top",
         horizontal: "right"
       },
-      children: b.map((r, i) => /* @__PURE__ */ o(k, { children: [i > 0 && /* @__PURE__ */ n("hr", { className: "m-0 border-0 border-t border-solid border-delta-200" }), /* @__PURE__ */ n(v, {
+      children: b.map((r, t) => /* @__PURE__ */ o(k, { children: [t > 0 && /* @__PURE__ */ n("hr", { className: "m-0 border-0 border-t border-solid border-delta-200" }), /* @__PURE__ */ n(v, {
         disabled: r.disabled,
         onClick: () => {
           s(null), r.onClick();

package/dist/components/feedback/dialog/dialog-footer/StyledDialogFooter.js CHANGED Viewed

@@ -1,76 +1,93 @@
 import { cn as T } from "../../../../helpers/cn.js";
-import { DotsVerticalIcon as S } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
-import { StyledButton as y } from "../../../inputs/button/StyledButton.js";
-import { StyledMenu as $ } from "../../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as z } from "../../../navigation/menu/StyledMenuItem.js";
-import { useElementWidthPx as L } from "../../../../hooks/useElementWidthPx.js";
-import { useWidthRegistry as j } from "../../../../hooks/useWidthRegistry.js";
-import { planToolbarActions as K } from "../../../custom/module/header-layout/planToolbarActions.js";
-import { ToolbarActionButton as F } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
-import { useToolbarTranslations as H } from "../../../custom/module/header-layout/useTranslations.js";
-import { useMemo as C, useState as D } from "react";
-import { Fragment as _, jsx as r, jsxs as t } from "react/jsx-runtime";
-var G = 470, U = 8, k = "dialog-footer-right", w = "dialog-footer-more", N = (i, n) => `dialog-footer-action:${i}:${n ? "label" : "icon"}`;
-function ae({ leftActions: i = [], leadingSlot: n, secondaryAction: o, primaryAction: s, fixed: P = !1, rounded: E = !0, locale: M = "en", className: W, dataTest: d = "styled-dialog-footer" }) {
-  const R = H(M), { ref: A, widthPx: c } = L(), { register: m, widths: a } = j(), [p, f] = D(null), u = c > 0 && c < G, B = u ? 8 : 16, g = C(() => i.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
+import { DotsVerticalIcon as O } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { LoadingIcon as $ } from "../../../icons/loading-icon/LoadingIcon.js";
+import { StyledTooltip as z } from "../../../data-display/tooltip/StyledTooltip.js";
+import { StyledButton as w } from "../../../inputs/button/StyledButton.js";
+import { StyledMenu as j } from "../../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as K } from "../../../navigation/menu/StyledMenuItem.js";
+import { useElementWidthPx as F } from "../../../../hooks/useElementWidthPx.js";
+import { useWidthRegistry as H } from "../../../../hooks/useWidthRegistry.js";
+import { planToolbarActions as D } from "../../../custom/module/header-layout/planToolbarActions.js";
+import { ToolbarActionButton as G } from "../../../custom/module/header-layout/ToolbarActionGroup.js";
+import { useToolbarTranslations as U } from "../../../custom/module/header-layout/useTranslations.js";
+import { useMemo as C, useState as X } from "react";
+import { Fragment as _, jsx as r, jsxs as l } from "react/jsx-runtime";
+var Y = 470, V = 8, k = "dialog-footer-right", N = "dialog-footer-more", I = (o, t) => `dialog-footer-action:${o}:${t ? "label" : "icon"}`;
+function ce({ leftActions: o = [], leadingSlot: t, secondaryAction: a, primaryAction: s, fixed: P = !1, rounded: B = !0, locale: E = "en", className: M, dataTest: d = "styled-dialog-footer" }) {
+  const W = U(E), { ref: R, widthPx: c } = F(), { register: m, widths: n } = H(), [p, h] = X(null), g = c > 0 && c < Y, S = g ? 8 : 16, u = C(() => o.filter((e) => !e.hidden).map((e) => e.icon == null && e.canHideLabel == null ? {
     ...e,
     canHideLabel: !1
-  } : e), [i]), I = a[k] ?? 0, x = o != null || s != null, b = Math.max(0, c - B * 2 - I - (x ? U : 0)), h = C(() => K({
-    actions: g,
-    availableWidth: b,
+  } : e), [o]), A = n[k] ?? 0, x = a != null || s != null, v = Math.max(0, c - S * 2 - A - (x ? V : 0)), f = C(() => D({
+    actions: u,
+    availableWidth: v,
     collapseLabels: !0,
-    resolveActionWidth: (e, l) => a[N(e.id, l)],
-    moreButtonWidthPx: a[w]
+    resolveActionWidth: (e, i) => n[I(e.id, i)],
+    moreButtonWidthPx: n[N]
   }), [
-    g,
-    b,
-    a
-  ]), v = (e, l, O) => /* @__PURE__ */ r(y, {
-    dataTest: e.dataTest ?? `${d}-${O}`,
-    variant: e.variant ?? l,
-    error: e.tone === "danger",
-    size: "medium",
-    type: e.type ?? "button",
-    disabled: e.disabled,
-    startIcon: e.icon,
-    onClick: e.onClick,
-    "aria-label": e.ariaLabel,
-    children: e.label
-  });
-  return /* @__PURE__ */ t("div", {
-    ref: A,
+    u,
+    v,
+    n
+  ]), b = (e, i, L) => {
+    const y = /* @__PURE__ */ r(w, {
+      dataTest: e.dataTest ?? `${d}-${L}`,
+      variant: e.variant ?? i,
+      error: e.tone === "danger",
+      size: "medium",
+      type: e.type ?? "button",
+      disabled: !!e.disabled || !!e.loading,
+      startIcon: e.icon,
+      endIcon: e.loading ? /* @__PURE__ */ r($, {
+        width: 20,
+        height: 20
+      }) : e.endIcon,
+      onClick: e.onClick,
+      "aria-label": e.ariaLabel,
+      "aria-busy": e.loading,
+      children: e.label
+    });
+    return e.tooltip ? /* @__PURE__ */ r(z, {
+      arrow: !0,
+      title: e.tooltip,
+      children: /* @__PURE__ */ r("span", {
+        className: "inline-flex",
+        children: y
+      })
+    }) : y;
+  };
+  return /* @__PURE__ */ l("div", {
+    ref: R,
     "data-testid": d,
-    className: T("flex items-center justify-end border-0 border-t border-solid border-delta-200 bg-white", u ? "gap-2 p-2" : "gap-4 p-4", E && "rounded-b-lg", P && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", W),
+    className: T("flex items-center justify-end border-0 border-t border-solid border-delta-200 bg-white", g ? "gap-2 p-2" : "gap-4 p-4", B && "rounded-b-lg", P && "sticky bottom-0 z-[1] shadow-[0_0_16px_0_rgba(34,33,51,0.2)]", M),
     children: [/* @__PURE__ */ r("div", {
       className: "flex shrink-0 flex-nowrap items-center gap-2",
-      children: n ?? /* @__PURE__ */ t(_, { children: [h.inlineActions.map(({ action: e, showLabel: l }) => /* @__PURE__ */ r("span", {
-        ref: m(N(e.id, l)),
+      children: t ?? /* @__PURE__ */ l(_, { children: [f.inlineActions.map(({ action: e, showLabel: i }) => /* @__PURE__ */ r("span", {
+        ref: m(I(e.id, i)),
         className: "inline-flex shrink-0",
-        children: /* @__PURE__ */ r(F, {
+        children: /* @__PURE__ */ r(G, {
           action: e,
-          showLabel: l
+          showLabel: i
         })
-      }, e.id)), h.showMoreMenu && /* @__PURE__ */ t(_, { children: [/* @__PURE__ */ r("span", {
-        ref: m(w),
+      }, e.id)), f.showMoreMenu && /* @__PURE__ */ l(_, { children: [/* @__PURE__ */ r("span", {
+        ref: m(N),
         className: "inline-flex shrink-0",
-        children: /* @__PURE__ */ r(y, {
+        children: /* @__PURE__ */ r(w, {
           dataTest: `${d}-more`,
           variant: "outlined",
           size: "medium",
           type: "button",
-          onClick: (e) => f(e.currentTarget),
-          "aria-label": R.more,
+          onClick: (e) => h(e.currentTarget),
+          "aria-label": W.more,
           "aria-haspopup": "menu",
           "aria-expanded": p != null,
-          startIcon: /* @__PURE__ */ r(S, {
+          startIcon: /* @__PURE__ */ r(O, {
             width: 24,
             height: 24
           })
         })
-      }), /* @__PURE__ */ r($, {
+      }), /* @__PURE__ */ r(j, {
         anchorEl: p,
         open: p != null,
-        onClose: () => f(null),
+        onClose: () => h(null),
         anchorOrigin: {
           vertical: "top",
           horizontal: "left"
@@ -79,12 +96,12 @@ function ae({ leftActions: i = [], leadingSlot: n, secondaryAction: o, primaryAc
           vertical: "bottom",
           horizontal: "left"
         },
-        children: h.overflowActions.map((e) => /* @__PURE__ */ r(z, {
+        children: f.overflowActions.map((e) => /* @__PURE__ */ r(K, {
           disabled: e.disabled,
           onClick: () => {
-            f(null), e.onClick();
+            h(null), e.onClick();
           },
-          children: /* @__PURE__ */ t("div", {
+          children: /* @__PURE__ */ l("div", {
             className: T("flex items-center gap-2", e.tone === "danger" ? "text-beta-500" : "text-delta-700"),
             children: [e.icon, /* @__PURE__ */ r("span", { children: e.label })]
           })
@@ -92,14 +109,14 @@ function ae({ leftActions: i = [], leadingSlot: n, secondaryAction: o, primaryAc
       })] })] })
     }), x && /* @__PURE__ */ r("span", {
       className: "flex min-w-px flex-1 flex-nowrap items-center justify-end",
-      children: /* @__PURE__ */ t("span", {
+      children: /* @__PURE__ */ l("span", {
         ref: m(k),
         className: "flex shrink-0 flex-nowrap items-center gap-2",
-        children: [o && v(o, "outlined", "secondary"), s && v(s, "contained", "primary")]
+        children: [a && b(a, "outlined", "secondary"), s && b(s, "contained", "primary")]
       })
     })]
   });
 }
 export {
-  ae as StyledDialogFooter
+  ce as StyledDialogFooter
 };

package/dist/src/components/feedback/dialog/dialog-footer/StyledDialogFooter.d.ts CHANGED Viewed

@@ -14,6 +14,21 @@ export interface StyledDialogFooterButton {
     /** Renders in the destructive palette (Figma `Danger = on`). */
     tone?: 'default' | 'danger';
     icon?: ReactNode;
+    /** Trailing icon. `loading` supplies its own and wins. */
+    endIcon?: ReactNode;
+    /**
+     * Shows a spinner after the label and disables the button. Consumers previously swapped
+     * the label *for* a spinner, which changes the button's width mid-submit — hence the
+     * hard-coded `w-[98px]` workarounds in the footers this replaces. Keeping the label
+     * makes the width stable on its own.
+     */
+    loading?: boolean;
+    /**
+     * Wraps the button in a `StyledTooltip`. Falsy renders no tooltip, so the common
+     * `tooltip={disabled && 'Locked for editing'}` reads naturally. A disabled button does
+     * not emit pointer events, so the tooltip is anchored on a wrapper around it.
+     */
+    tooltip?: ReactNode;
     dataTest?: string;
     ariaLabel?: string;
 }

package/package.json CHANGED Viewed

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