asma-ui-core 3.25.0 → 3.26.0

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

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

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

@@ -0,0 +1,13 @@
+import { createContext as t, useContext as o } from "react";
+var n = t({
+  containerWidth: 0,
+  filterIconOnly: !1,
+  trailingIconOnly: !1
+});
+function a() {
+  return o(n);
+}
+export {
+  n as DynamicToolbarLayoutContext,
+  a as useDynamicToolbarLayout
+};

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

@@ -0,0 +1,82 @@
+import { cn as m } from "../../../../helpers/cn.js";
+import { DotsVerticalIcon as p } from "../../../icons/dots-vertical-icon/DotsVerticalIcon.js";
+import { StyledButton as u } from "../../../inputs/button/StyledButton.js";
+import { StyledMenu as g } from "../../../navigation/menu/StyledMenu.js";
+import { StyledMenuItem as b } from "../../../navigation/menu/StyledMenuItem.js";
+import { useState as v } from "react";
+import { Fragment as x, jsx as n, jsxs as a } from "react/jsx-runtime";
+function S(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 });
+  const o = e.ariaLabel ?? e.label;
+  return /* @__PURE__ */ n(u, {
+    dataTest: e.dataTest ?? `dynamic-toolbar-action-${e.id}`,
+    variant: e.variant ?? (l ? "text" : "outlined"),
+    error: e.tone === "danger",
+    size: e.size ?? "small",
+    disabled: e.disabled,
+    startIcon: e.icon,
+    onClick: e.onClick,
+    "aria-label": t ? void 0 : o,
+    children: t ? e.label : void 0
+  });
+}
+function T({ overflowMenuLabel: e, onOpen: t }) {
+  return /* @__PURE__ */ n(u, {
+    dataTest: "dynamic-toolbar-overflow-actions",
+    variant: "text",
+    size: "small",
+    endIcon: /* @__PURE__ */ n(p, {
+      width: 20,
+      height: 20
+    }),
+    onClick: (l) => t?.(l.currentTarget),
+    "aria-label": e,
+    "aria-haspopup": "menu",
+    children: e
+  });
+}
+function w({ plan: e, overflowMenuLabel: t, className: l, selectionTone: o = !1 }) {
+  const [s, i] = v(null), { inlineActions: d, overflowActions: h, showMoreMenu: c } = e;
+  return !d.length && !c ? null : /* @__PURE__ */ a("div", {
+    className: m("flex shrink-0 flex-nowrap items-center gap-2", l),
+    children: [d.map(({ action: r, showLabel: f }) => /* @__PURE__ */ n(A, {
+      action: r,
+      showLabel: f,
+      selectionTone: o
+    }, r.id)), c && /* @__PURE__ */ a(x, { children: [/* @__PURE__ */ n(T, {
+      overflowMenuLabel: t,
+      onOpen: i
+    }), /* @__PURE__ */ n(g, {
+      anchorEl: s,
+      open: !!s,
+      onClose: () => i(null),
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      children: h.map((r) => /* @__PURE__ */ n(b, {
+        disabled: r.disabled,
+        onClick: () => {
+          i(null), r.onClick();
+        },
+        children: /* @__PURE__ */ a("div", {
+          className: m("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))
+    })] })]
+  });
+}
+export {
+  T as MoreTriggerButton,
+  A as ToolbarActionButton,
+  w as ToolbarActionGroup,
+  S as hasPlannedActions
+};

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

@@ -0,0 +1,56 @@
+import { MoreTriggerButton as c, ToolbarActionButton as a } from "./ToolbarActionGroup.js";
+import { SelectionIndicator as d } from "./ToolbarRows.js";
+import { Fragment as f } from "react";
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+var N = "title", T = "slot:search", b = "selection-indicator", h = "more-button", w = (n) => `slot:filter:${n ? "icon" : "label"}`, s = (n, r) => `action:${n}:${r ? "label" : "icon"}`, m = { inert: "" };
+function x({ actions: n, register: r, overflowMenuLabel: t, selectionIndicator: l }) {
+  return /* @__PURE__ */ e("div", {
+    "aria-hidden": !0,
+    ...m,
+    className: "pointer-events-none invisible absolute left-0 top-0 h-0 overflow-hidden",
+    children: /* @__PURE__ */ o("div", {
+      className: "flex h-0 flex-nowrap items-center overflow-hidden",
+      children: [
+        n.map((i) => /* @__PURE__ */ o(f, { children: [/* @__PURE__ */ e("span", {
+          ref: r(s(i.id, !0)),
+          className: "inline-flex shrink-0 whitespace-nowrap",
+          children: /* @__PURE__ */ e(a, {
+            action: i,
+            showLabel: !0
+          })
+        }), /* @__PURE__ */ e("span", {
+          ref: r(s(i.id, !1)),
+          className: "inline-flex shrink-0",
+          children: /* @__PURE__ */ e(a, {
+            action: i,
+            showLabel: !1
+          })
+        })] }, i.id)),
+        /* @__PURE__ */ e("span", {
+          ref: r(h),
+          className: "inline-flex shrink-0",
+          children: /* @__PURE__ */ e(c, { overflowMenuLabel: t })
+        }),
+        l && /* @__PURE__ */ e("span", {
+          ref: r("selection-indicator"),
+          className: "inline-flex shrink-0 whitespace-nowrap",
+          children: /* @__PURE__ */ e(d, {
+            selectedCount: l.selectedCount,
+            onClearSelection: l.hasClear ? () => {
+            } : void 0,
+            translations: l.translations
+          })
+        })
+      ]
+    })
+  });
+}
+export {
+  h as KEY_MORE_BUTTON,
+  T as KEY_SEARCH,
+  b as KEY_SELECTION_INDICATOR,
+  N as KEY_TITLE,
+  x as ToolbarMeasurementStrip,
+  s as actionKey,
+  w as filterKey
+};

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

@@ -0,0 +1,131 @@
+import { cn as f } from "../../../../helpers/cn.js";
+import { CloseIcon as g } from "../../../icons/close-icon/CloseIcon.js";
+import { StyledButton as j } from "../../../inputs/button/StyledButton.js";
+import { ToolbarActionGroup as c, hasPlannedActions as u } from "./ToolbarActionGroup.js";
+import { formatSelectionLabel as k } from "./useTranslations.js";
+import { Fragment as o, jsx as n, jsxs as r } from "react/jsx-runtime";
+function F({ selectedCount: e, onClearSelection: i, translations: t }) {
+  return /* @__PURE__ */ n("div", {
+    className: "flex shrink-0 items-center whitespace-nowrap",
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    children: /* @__PURE__ */ n(j, {
+      dataTest: "dynamic-toolbar-clear-selection",
+      variant: "text",
+      size: "small",
+      className: "!min-w-0 !px-1 !font-semibold",
+      startIcon: i ? /* @__PURE__ */ n(g, {
+        width: 20,
+        height: 20
+      }) : void 0,
+      onClick: i,
+      "aria-label": t.clearSelection,
+      children: k(e, t)
+    })
+  });
+}
+function G({ selectedCount: e, onClearSelection: i, translations: t, bulkActionsPlan: l }) {
+  return /* @__PURE__ */ r("div", {
+    className: "flex w-full min-w-0 flex-nowrap items-center justify-between gap-3",
+    children: [/* @__PURE__ */ n(F, {
+      selectedCount: e,
+      onClearSelection: i,
+      translations: t
+    }), /* @__PURE__ */ n(c, {
+      plan: l,
+      overflowMenuLabel: t.more,
+      selectionTone: !0
+    })]
+  });
+}
+function y({ search: e, expanded: i, measureRef: t }) {
+  return /* @__PURE__ */ n("div", {
+    ref: i ? void 0 : t,
+    className: f("[&_.MuiFormControl-root]:w-full", i ? "min-w-0 flex-1 [&_.MuiFormControl-root]:max-w-none" : "w-[min(240px,40vw)] max-w-[280px] shrink-0"),
+    children: e
+  });
+}
+function S({ visible: e, children: i }) {
+  return /* @__PURE__ */ n("div", {
+    className: f("overflow-hidden whitespace-nowrap transition-[max-width,opacity] duration-200 ease-in-out", e ? "max-w-[2000px] opacity-100" : "pointer-events-none max-w-0 opacity-0"),
+    "aria-hidden": !e,
+    children: /* @__PURE__ */ n("div", {
+      className: "inline-flex items-center gap-2",
+      children: i
+    })
+  });
+}
+function T({ title: e, measureRef: i }) {
+  return /* @__PURE__ */ n("div", {
+    ref: i,
+    className: "min-w-0 truncate text-2xl font-semibold text-delta-800",
+    children: e
+  });
+}
+function M({ title: e, helperText: i, titleMeasureRef: t }) {
+  return !e && !i ? null : /* @__PURE__ */ r("div", {
+    className: "min-w-0 max-w-full",
+    children: [e && /* @__PURE__ */ n(T, {
+      title: e,
+      measureRef: t
+    }), i && /* @__PURE__ */ n("div", {
+      className: "mt-1 text-sm text-delta-700",
+      children: i
+    })]
+  });
+}
+function U({ variant: e, beforeFilterActionsPlan: i, filter: t, search: l, afterSearchActionsPlan: p, bulkActionsPlan: a, showPageActions: w, overflowMenuLabel: s, searchMeasureRef: B, align: b = "end" }) {
+  const m = w && u(i), d = w && u(p), x = e === "inline-selection" && u(a);
+  if (!(t != null || l != null) && !m && !d && !x) return null;
+  const h = m ? /* @__PURE__ */ n(S, {
+    visible: m,
+    children: /* @__PURE__ */ n(c, {
+      plan: i,
+      overflowMenuLabel: s
+    })
+  }) : null, v = d ? /* @__PURE__ */ n(S, {
+    visible: d,
+    children: /* @__PURE__ */ n("div", {
+      className: "flex flex-nowrap items-center gap-2",
+      children: /* @__PURE__ */ n(c, {
+        plan: p,
+        overflowMenuLabel: s
+      })
+    })
+  }) : null, N = /* @__PURE__ */ r(o, { children: [t, l != null && /* @__PURE__ */ n(y, {
+    search: l,
+    measureRef: B
+  })] });
+  return /* @__PURE__ */ r("div", {
+    className: f("flex w-full min-w-0 flex-nowrap items-center gap-2", b === "end" ? "justify-end" : "justify-start"),
+    children: [
+      e === "inline-selection" && /* @__PURE__ */ r(o, { children: [x && a && /* @__PURE__ */ n(c, {
+        plan: a,
+        overflowMenuLabel: s,
+        selectionTone: !0
+      }), N] }),
+      e === "inline-normal" && /* @__PURE__ */ r(o, { children: [
+        h,
+        N,
+        v
+      ] }),
+      e === "utility-row" && /* @__PURE__ */ r(o, { children: [
+        h,
+        l != null && /* @__PURE__ */ n(y, {
+          search: l,
+          expanded: !0
+        }),
+        t,
+        v
+      ] })
+    ]
+  });
+}
+export {
+  y as SearchSlot,
+  F as SelectionIndicator,
+  G as SelectionRow,
+  M as TitleBlock,
+  T as TitleText,
+  U as UtilityCluster
+};