asma-ui-core 3.105.0 → 3.107.0

package/dist/components/custom/module/header-layout/DynamicToolbar.js

@@ -6,11 +6,11 @@ import { planBulkToolbarActions as me, planToolbarActions as he } from "./planTo
 import { useToolbarTranslations as ue } from "./useTranslations.js";
 import { DynamicToolbarLayoutContext as fe } from "./DynamicToolbarLayoutContext.js";
 import { resolveBulkActionsAvailableWidth as Ae, resolvePageActionsAvailableWidth as xe, resolveReserveBulkActionsWidthPx as ve, resolveTitleAreaWidth as be, resolveToolbarLayout as pe } from "./estimateToolbarLayout.js";
-import { SearchSlot as we, SelectionIndicator as Pe, SelectionRow as Te, TitleBlock as H, TitleText as We, UtilityCluster as Q } from "./ToolbarRows.js";
-import { KEY_MORE_BUTTON as Me, KEY_SEARCH as $, KEY_SELECTION_INDICATOR as Be, KEY_TITLE as q, ToolbarMeasurementStrip as ye, actionKey as ge, filterKey as R } from "./ToolbarMeasurement.js";
+import { SearchSlot as Pe, SelectionIndicator as we, SelectionRow as Te, TitleBlock as H, TitleText as We, UtilityCluster as Q } from "./ToolbarRows.js";
+import { KEY_MORE_BUTTON as Me, KEY_SEARCH as $, KEY_SELECTION_INDICATOR as ge, KEY_TITLE as q, ToolbarMeasurementStrip as Be, actionKey as ye, filterKey as R } from "./ToolbarMeasurement.js";
 import { useCallback as Se, useMemo as o } from "react";
-import { Fragment as z, jsx as t, jsxs as u } from "react/jsx-runtime";
-var G = 744, ke = 0, _e = 2, Ie = [
+import { Fragment as z, jsx as t, jsxs as f } from "react/jsx-runtime";
+var G = 744, ke = 0, Le = 2, _e = [
   {
     minWidth: 361,
     maxVisible: 2
@@ -24,37 +24,37 @@ var G = 744, ke = 0, _e = 2, Ie = [
     maxVisible: 0
   }
 ];
-function Ne(g, l) {
-  const A = Ie.find((x) => g >= x.minWidth);
-  return Math.min(A?.maxVisible ?? 0, l);
+function Ie(y, n) {
+  const x = _e.find((v) => y >= v.minWidth);
+  return Math.min(x?.maxVisible ?? 0, n);
 }
 var J = {
   inlineActions: [],
   overflowActions: [],
   showMoreMenu: !1
 };
-function He(g) {
-  const { title: l, helperText: A, beforeFilterActions: x = [], filter: v, search: c, afterSearchActions: C = [], selectedCount: T = 0, onClearSelection: S, bulkActions: d = [], maxVisibleBulkActions: P = _e, locale: Z = "en", className: ee, style: te, dataTest: ie = "dynamic-toolbar" } = g, b = ue(Z), { ref: oe, widthPx: n } = ce(), { register: W, widths: s } = de(), k = re(), _ = o(() => Ne(n, P), [n, P]), M = !k && n >= G ? P : _, m = T > 0, O = !m, p = o(() => [...x, ...C], [x, C]), h = Se((e, i) => s[ge(e.id, i)], [s]), a = o(() => ({
+function He(y) {
+  const { title: n, helperText: x, beforeFilterActions: v = [], filter: b, search: c, afterSearchActions: C = [], selectedCount: T = 0, onClearSelection: S, bulkActions: d = [], maxVisibleBulkActions: w = Le, locale: Z = "en", className: ee, style: te, dataTest: ie = "dynamic-toolbar" } = y, m = ue(Z), { ref: oe, widthPx: l } = ce(), { register: W, widths: s } = de(), k = re(), L = o(() => Ie(l, w), [l, w]), M = !k && l >= G ? w : L, h = T > 0, O = !h, p = o(() => [...v, ...C], [v, C]), u = Se((e, i) => s[ye(e.id, i)], [s]), a = o(() => ({
     titleWidthPx: s[q],
     searchWidthPx: s[$],
     filterLabelWidthPx: s[R(!1)],
     filterIconWidthPx: s[R(!0)],
-    selectionIndicatorWidthPx: s[Be],
+    selectionIndicatorWidthPx: s[ge],
     moreButtonWidthPx: s[Me],
-    actionWidthPx: h
-  }), [s, h]), I = o(() => ve(ke, d, h, M), [
+    actionWidthPx: u
+  }), [s, u]), _ = o(() => ve(ke, d, u, M), [
     d,
-    h,
+    u,
     M
-  ]), { mode: r, filterIconOnly: w, trailingIconOnly: B } = o(() => pe({
-    containerWidth: n,
+  ]), { mode: r, filterIconOnly: P, trailingIconOnly: g } = o(() => pe({
+    containerWidth: l,
     isMobile: k,
-    isSelectionMode: m,
+    isSelectionMode: h,
     compactBreakpointPx: G,
-    reserveBulkActionsWidthPx: I,
-    title: l,
+    reserveBulkActionsWidthPx: _,
+    title: n,
     hasLeadingUtility: !1,
-    hasFilter: v != null,
+    hasFilter: b != null,
     hasSearch: c != null,
     hasTrailingUtility: !1,
     pageActions: p,
@@ -63,182 +63,184 @@ function He(g) {
     measured: a
   }), [
     d,
-    n,
-    I,
-    v,
+    l,
+    _,
+    b,
     k,
-    m,
+    h,
     M,
     a,
     p,
     c,
-    l
-  ]), le = o(() => ({
-    containerWidth: n,
-    filterIconOnly: w,
-    trailingIconOnly: B
+    n
+  ]), ne = o(() => ({
+    containerWidth: l,
+    filterIconOnly: P,
+    trailingIconOnly: g
   }), [
-    n,
-    w,
-    B
-  ]), V = be(l, a.titleWidthPx), U = xe({
+    l,
+    P,
+    g
+  ]), V = be(n, a.titleWidthPx), U = xe({
     layoutMode: r,
-    containerWidth: n,
+    containerWidth: l,
     titleWidth: V,
-    filterIconOnly: w,
-    trailingIconOnly: B,
-    hasFilter: v != null,
+    filterIconOnly: P,
+    trailingIconOnly: g,
+    hasFilter: b != null,
     hasSearch: c != null,
     hasLeadingUtility: !1,
     hasTrailingUtility: !1,
-    reserveBulkActionsWidthPx: m ? 0 : I,
+    reserveBulkActionsWidthPx: h ? 0 : _,
     measured: a
   }), F = Ae({
     layoutMode: r,
-    containerWidth: n,
+    containerWidth: l,
     titleWidth: V,
-    filterIconOnly: w,
-    hasFilter: v != null,
+    filterIconOnly: P,
+    hasFilter: b != null,
     hasSearch: c != null,
     measured: a
-  }), f = o(() => he({
+  }), A = o(() => he({
     actions: p,
     availableWidth: U,
     collapseLabels: !0,
-    resolveActionWidth: h,
+    resolveActionWidth: u,
     moreButtonWidthPx: a.moreButtonWidthPx
   }), [
     p,
     U,
-    h,
+    u,
     a.moreButtonWidthPx
-  ]), y = o(() => new Set(x.map((e) => e.id)), [x]), K = o(() => {
-    const e = f.inlineActions.filter((i) => y.has(i.action.id));
+  ]), B = o(() => new Set(v.map((e) => e.id)), [v]), K = o(() => {
+    const e = A.inlineActions.filter((i) => B.has(i.action.id));
     return e.length ? {
       inlineActions: e,
       overflowActions: [],
       showMoreMenu: !1
     } : J;
-  }, [y, f]), D = o(() => {
-    const e = f.inlineActions.filter((i) => !y.has(i.action.id));
-    return !e.length && !f.showMoreMenu ? J : {
+  }, [B, A]), D = o(() => {
+    const e = A.inlineActions.filter((i) => !B.has(i.action.id));
+    return !e.length && !A.showMoreMenu ? J : {
       inlineActions: e,
-      overflowActions: f.overflowActions,
-      showMoreMenu: f.showMoreMenu
+      overflowActions: A.overflowActions,
+      showMoreMenu: A.showMoreMenu
     };
-  }, [y, f]), Y = o(() => me({
+  }, [B, A]), Y = o(() => me({
     actions: d,
     availableWidth: F,
-    maxVisibleBulkActions: r === "compact" ? _ : P,
-    resolveActionWidth: h,
+    maxVisibleBulkActions: r === "compact" ? L : w,
+    resolveActionWidth: u,
     moreButtonWidthPx: a.moreButtonWidthPx
   }), [
     d,
     F,
-    _,
+    L,
     r,
-    P,
-    h,
+    w,
+    u,
     a.moreButtonWidthPx
-  ]), ne = o(() => {
+  ]), le = o(() => {
     const e = /* @__PURE__ */ new Map();
     for (const i of [...p, ...d]) !i.hidden && !e.has(i.id) && e.set(i.id, i);
     return [...e.values()];
-  }, [p, d]), N = W(q, "scroll"), j = W($), E = v != null ? /* @__PURE__ */ t("span", {
-    ref: W(R(w)),
+  }, [p, d]), I = W(q, "scroll"), j = W($), N = b != null ? /* @__PURE__ */ t("span", {
+    ref: W(R(P)),
     className: "inline-flex shrink-0 items-center",
-    children: v
-  }) : void 0, se = /* @__PURE__ */ t(ye, {
-    actions: ne,
+    children: b
+  }) : void 0, se = /* @__PURE__ */ t(Be, {
+    actions: le,
     register: W,
-    overflowMenuLabel: b.more,
-    selectionIndicator: m ? {
+    overflowMenuLabel: m.more,
+    selectionIndicator: h ? {
       selectedCount: T,
       hasClear: S != null,
-      translations: b
+      translations: m
     } : void 0
   }), X = /* @__PURE__ */ t(Te, {
     selectedCount: T,
     onClearSelection: S,
-    translations: b,
+    translations: m,
     bulkActionsPlan: Y
-  }), L = (e, i) => /* @__PURE__ */ t(fe.Provider, {
-    value: le,
-    children: /* @__PURE__ */ u("div", {
+  }), E = (e, i) => /* @__PURE__ */ t(fe.Provider, {
+    value: ne,
+    children: /* @__PURE__ */ f("div", {
       ref: oe,
       "data-testid": ie,
       "data-layout": i,
-      "data-filter-icon-only": w ? "true" : "false",
-      "data-trailing-icon-only": B ? "true" : "false",
+      "data-filter-icon-only": P ? "true" : "false",
+      "data-trailing-icon-only": g ? "true" : "false",
       className: ae("relative flex w-full flex-col gap-2", ee),
       style: te,
       children: [se, e]
     })
   });
-  return r === "compact" || r === "stacked" ? L(/* @__PURE__ */ u(z, { children: [
+  return r === "compact" || r === "stacked" ? E(/* @__PURE__ */ f(z, { children: [
     /* @__PURE__ */ t(H, {
-      title: l,
-      helperText: A,
-      titleMeasureRef: N
+      title: n,
+      helperText: x,
+      titleMeasureRef: I
     }),
     /* @__PURE__ */ t(Q, {
       variant: "utility-row",
       beforeFilterActionsPlan: K,
-      filter: E,
+      filter: N,
       search: c,
       afterSearchActionsPlan: D,
       showPageActions: O,
-      overflowMenuLabel: b.more,
+      overflowMenuLabel: m.more,
+      inProgressLabel: m.inProgress,
       align: r === "compact" ? "start" : "end"
     }),
-    m && X
-  ] }), r) : r === "selection-split" ? L(/* @__PURE__ */ u(z, { children: [/* @__PURE__ */ u("div", {
+    h && X
+  ] }), r) : r === "selection-split" ? E(/* @__PURE__ */ f(z, { children: [/* @__PURE__ */ f("div", {
     className: "flex w-full min-w-0 flex-nowrap items-center justify-between gap-3",
     children: [/* @__PURE__ */ t("div", {
       className: "min-w-0 flex-1 overflow-hidden",
       children: /* @__PURE__ */ t(H, {
-        title: l,
-        helperText: A,
-        titleMeasureRef: N
+        title: n,
+        helperText: x,
+        titleMeasureRef: I
       })
-    }), /* @__PURE__ */ u("div", {
+    }), /* @__PURE__ */ f("div", {
       className: "flex shrink-0 flex-nowrap items-center gap-2",
-      children: [E, c != null && /* @__PURE__ */ t(we, {
+      children: [N, c != null && /* @__PURE__ */ t(Pe, {
         search: c,
         measureRef: j
       })]
     })]
-  }), X] }), "selection-split") : L(/* @__PURE__ */ u("div", {
+  }), X] }), "selection-split") : E(/* @__PURE__ */ f("div", {
     className: "flex w-full min-w-0 flex-col gap-1",
-    children: [/* @__PURE__ */ u("div", {
+    children: [/* @__PURE__ */ f("div", {
       className: "flex w-full min-w-0 flex-nowrap items-center gap-3",
-      children: [/* @__PURE__ */ u("div", {
+      children: [/* @__PURE__ */ f("div", {
         className: "flex min-w-0 flex-1 items-center gap-3",
-        children: [l && /* @__PURE__ */ t(We, {
-          title: l,
-          measureRef: N
-        }), m && /* @__PURE__ */ t(Pe, {
+        children: [n && /* @__PURE__ */ t(We, {
+          title: n,
+          measureRef: I
+        }), h && /* @__PURE__ */ t(we, {
           selectedCount: T,
           onClearSelection: S,
-          translations: b
+          translations: m
         })]
       }), /* @__PURE__ */ t("div", {
         className: "min-w-0 shrink-0",
         children: /* @__PURE__ */ t(Q, {
-          variant: m ? "inline-selection" : "inline-normal",
+          variant: h ? "inline-selection" : "inline-normal",
           beforeFilterActionsPlan: K,
-          filter: E,
+          filter: N,
           search: c,
           afterSearchActionsPlan: D,
           bulkActionsPlan: Y,
           showPageActions: O,
-          overflowMenuLabel: b.more,
+          overflowMenuLabel: m.more,
+          inProgressLabel: m.inProgress,
           searchMeasureRef: j
         })
       })]
-    }), A && /* @__PURE__ */ t("div", {
+    }), x && /* @__PURE__ */ t("div", {
       className: "text-sm text-delta-700",
-      children: A
+      children: x
     })]
   }), "inline");
 }

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

@@ -1,67 +1,85 @@
-import { cn as h } from "../../../../helpers/cn.js";
-import { DotsVerticalIcon as g } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
-import { StyledButton as p } from "../../../inputs/button/StyledButton.js";
-import { StyledMenu as v } from "../../../navigation/menu/StyledMenu.js";
-import { StyledMenuItem as x } from "../../../navigation/menu/StyledMenuItem.js";
-import { useState as k } from "react";
-import { Fragment as y, jsx as n, jsxs as s } from "react/jsx-runtime";
-function O(e) {
+import { cn as p } from "../../../../helpers/cn.js";
+import { DotsVerticalIcon as x } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { useReportDialogBusy as y } from "../../../feedback/dialog/DialogBusyContext.js";
+import { StyledButton as c } from "../../../inputs/button/StyledButton.js";
+import { StyledMenu as R } from "../../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as A } from "../../../navigation/menu/StyledMenuItem.js";
+import { useState as B } from "react";
+import { Fragment as I, jsx as n, jsxs as u } from "react/jsx-runtime";
+var v = "In progress";
+function S(e, l = v) {
+  return e.loading ? {
+    disabled: !0,
+    disabledReason: l,
+    "aria-busy": !0
+  } : {
+    disabled: e.disabled,
+    disabledReason: e.disabledReason
+  };
+}
+function F(e) {
   return e != null && (e.inlineActions.length > 0 || e.showMoreMenu);
 }
-function T({ action: e, showLabel: l, selectionTone: t = !1 }) {
+function T({ action: e, showLabel: l, selectionTone: o = !1, inProgressLabel: a }) {
   if (e.render) return e.render({ showLabel: l });
-  const o = e.ariaLabel ?? e.label;
-  return /* @__PURE__ */ n(p, {
+  const i = e.ariaLabel ?? e.label;
+  return /* @__PURE__ */ n(c, {
     dataTest: e.dataTest ?? `dynamic-toolbar-action-${e.id}`,
-    variant: e.variant ?? (t ? "text" : "outlined"),
+    variant: e.variant ?? (o ? "text" : "outlined"),
     error: e.tone === "danger",
     size: e.size ?? "large",
     type: "button",
+    disabled: !!e.disabled && !!e.disabledReason,
     "aria-disabled": e.disabled ? !0 : void 0,
+    disabledReason: e.disabledReason,
+    loading: e.loading,
+    holdsDialog: e.holdsDialog,
+    loadingAnnouncement: a,
     startIcon: e.icon,
     onClick: e.disabled ? void 0 : e.onClick,
-    "aria-label": l && e.ariaLabel == null ? void 0 : o,
+    "aria-label": l && e.ariaLabel == null ? void 0 : i,
     children: l ? e.label : void 0
   });
 }
-function A({ overflowMenuLabel: e, onOpen: l }) {
-  return /* @__PURE__ */ n(p, {
+function k({ overflowMenuLabel: e, onOpen: l }) {
+  return /* @__PURE__ */ n(c, {
     dataTest: "dynamic-toolbar-overflow-actions",
     variant: "text",
     size: "large",
     type: "button",
-    endIcon: /* @__PURE__ */ n(g, {
+    endIcon: /* @__PURE__ */ n(x, {
       width: 20,
       height: 20
     }),
-    onClick: (t) => l?.(t.currentTarget),
+    onClick: (o) => l?.(o.currentTarget),
     "aria-label": e,
     "aria-haspopup": "menu",
     children: e
   });
 }
-function j({ plan: e, overflowMenuLabel: l, className: t, selectionTone: o = !1, registerActionWidth: d }) {
-  const [u, a] = k(null), { inlineActions: m, overflowActions: b, showMoreMenu: c } = e;
-  return !m.length && !c ? null : /* @__PURE__ */ s("div", {
-    className: h("flex shrink-0 flex-nowrap items-center gap-2", t),
-    children: [m.map(({ action: r, showLabel: i }) => {
-      const f = /* @__PURE__ */ n(T, {
+function j({ plan: e, overflowMenuLabel: l, className: o, selectionTone: a = !1, registerActionWidth: i, inProgressLabel: m = v }) {
+  const [f, d] = B(null), { inlineActions: b, overflowActions: g, showMoreMenu: s } = e;
+  return y(s && g.some((r) => !!r.loading && r.holdsDialog !== !1)), !b.length && !s ? null : /* @__PURE__ */ u("div", {
+    className: p("flex shrink-0 flex-nowrap items-center gap-2", o),
+    children: [b.map(({ action: r, showLabel: t }) => {
+      const h = /* @__PURE__ */ n(T, {
         action: r,
-        showLabel: i,
-        selectionTone: o
+        showLabel: t,
+        selectionTone: a,
+        inProgressLabel: m
       }, r.id);
-      return d == null || r.measureInStrip !== !1 ? f : /* @__PURE__ */ n("span", {
-        ref: d(r.id, i),
+      return i == null || r.measureInStrip !== !1 ? h : /* @__PURE__ */ n("span", {
+        ref: i(r.id, t),
         className: "inline-flex shrink-0",
-        children: f
+        children: h
       }, r.id);
-    }), c && /* @__PURE__ */ s(y, { children: [/* @__PURE__ */ n(A, {
+    }), s && /* @__PURE__ */ u(I, { children: [/* @__PURE__ */ n(k, {
       overflowMenuLabel: l,
-      onOpen: (r) => a((i) => i ? null : r)
-    }), /* @__PURE__ */ n(v, {
-      anchorEl: u,
-      open: !!u,
-      onClose: () => a(null),
+      onOpen: (r) => d((t) => t ? null : r)
+    }), /* @__PURE__ */ n(R, {
+      anchorEl: f,
+      open: !!f,
+      onClose: () => d(null),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -70,13 +88,13 @@ function j({ plan: e, overflowMenuLabel: l, className: t, selectionTone: o = !1,
         vertical: "top",
         horizontal: "right"
       },
-      children: b.map((r) => /* @__PURE__ */ n(x, {
-        disabled: r.disabled,
+      children: g.map((r) => /* @__PURE__ */ n(A, {
+        ...S(r, m),
         onClick: () => {
-          a(null), r.onClick();
+          d(null), r.onClick();
         },
-        children: /* @__PURE__ */ s("div", {
-          className: h("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
+        children: /* @__PURE__ */ u("div", {
+          className: p("flex items-center gap-2", r.tone === "danger" ? "text-beta-500" : "text-delta-700"),
           children: [r.icon, /* @__PURE__ */ n("span", { children: r.label })]
         })
       }, r.id))
@@ -84,8 +102,9 @@ function j({ plan: e, overflowMenuLabel: l, className: t, selectionTone: o = !1,
   });
 }
 export {
-  A as MoreTriggerButton,
+  k as MoreTriggerButton,
   T as ToolbarActionButton,
   j as ToolbarActionGroup,
-  O as hasPlannedActions
+  F as hasPlannedActions,
+  S as overflowItemState
 };