asma-ui-core 3.25.0 → 3.26.0

package/dist/src/components/custom/module/header-layout/DynamicToolbar.d.ts

@@ -0,0 +1,25 @@
+import { CSSProperties, ReactElement } from 'react';
+import { DynamicToolbarAction } from './planToolbarActions';
+import { ToolbarSlot } from './ToolbarRows';
+import { ToolbarLocale } from './useTranslations';
+export type { DynamicToolbarAction } from './planToolbarActions';
+export type { ToolbarSlot } from './ToolbarRows';
+export type { ToolbarLocale } from './useTranslations';
+export { useDynamicToolbarLayout } from './DynamicToolbarLayoutContext';
+export interface DynamicToolbarProps {
+    title?: ToolbarSlot;
+    helperText?: ToolbarSlot;
+    beforeFilterActions?: DynamicToolbarAction[];
+    filter?: ToolbarSlot;
+    search?: ToolbarSlot;
+    afterSearchActions?: DynamicToolbarAction[];
+    selectedCount?: number;
+    onClearSelection?: () => void;
+    bulkActions?: DynamicToolbarAction[];
+    maxVisibleBulkActions?: number;
+    locale?: ToolbarLocale;
+    className?: string;
+    style?: CSSProperties;
+    dataTest?: string;
+}
+export declare function DynamicToolbar(props: DynamicToolbarProps): ReactElement;

package/dist/src/components/custom/module/header-layout/DynamicToolbarLayoutContext.d.ts

@@ -0,0 +1,7 @@
+export interface DynamicToolbarLayoutContextValue {
+    containerWidth: number;
+    filterIconOnly: boolean;
+    trailingIconOnly: boolean;
+}
+export declare const DynamicToolbarLayoutContext: import('node_modules/@types/react').Context<DynamicToolbarLayoutContextValue>;
+export declare function useDynamicToolbarLayout(): DynamicToolbarLayoutContextValue;

package/dist/src/components/custom/module/header-layout/ToolbarActionGroup.d.ts

@@ -0,0 +1,19 @@
+import { DynamicToolbarAction, PlannedToolbarActions } from './planToolbarActions';
+/** True when the plan renders anything (inline buttons or the More menu). */
+export declare function hasPlannedActions(plan?: PlannedToolbarActions): boolean;
+export declare function ToolbarActionButton({ action, showLabel, selectionTone, }: {
+    action: DynamicToolbarAction;
+    showLabel: boolean;
+    selectionTone?: boolean;
+}): JSX.Element;
+export declare function MoreTriggerButton({ overflowMenuLabel, onOpen, }: {
+    overflowMenuLabel: string;
+    onOpen?: (anchor: HTMLElement) => void;
+}): JSX.Element;
+/** Inline action buttons plus the "More" overflow menu for a planned strip. */
+export declare function ToolbarActionGroup({ plan, overflowMenuLabel, className, selectionTone, }: {
+    plan: PlannedToolbarActions;
+    overflowMenuLabel: string;
+    className?: string;
+    selectionTone?: boolean;
+}): JSX.Element | null;

package/dist/src/components/custom/module/header-layout/ToolbarMeasurement.d.ts

@@ -0,0 +1,27 @@
+import { WidthRegistry } from '../../../../hooks/useWidthRegistry';
+import { DynamicToolbarAction } from './planToolbarActions';
+import { ToolbarTranslations } from './useTranslations';
+export declare const KEY_TITLE = "title";
+export declare const KEY_LEADING = "slot:leading";
+export declare const KEY_SEARCH = "slot:search";
+export declare const KEY_SELECTION_INDICATOR = "selection-indicator";
+export declare const KEY_MORE_BUTTON = "more-button";
+export declare const filterKey: (iconOnly: boolean) => string;
+export declare const trailingKey: (iconOnly: boolean) => string;
+export declare const actionKey: (id: string, showLabel: boolean) => string;
+export interface SelectionIndicatorMeasurement {
+    selectedCount: number;
+    hasClear: boolean;
+    translations: ToolbarTranslations;
+}
+/**
+ * Invisible, inert strip rendering every action in both variants (label and
+ * icon-only) plus the More trigger and selection indicator, so the planners
+ * work with real rendered widths instead of font-dependent guesses.
+ */
+export declare function ToolbarMeasurementStrip({ actions, register, overflowMenuLabel, selectionIndicator, }: {
+    actions: DynamicToolbarAction[];
+    register: WidthRegistry['register'];
+    overflowMenuLabel: string;
+    selectionIndicator?: SelectionIndicatorMeasurement;
+}): JSX.Element;

package/dist/src/components/custom/module/header-layout/ToolbarRows.d.ts

@@ -0,0 +1,65 @@
+import { ReactElement, ReactNode } from 'react';
+import { PlannedToolbarActions } from './planToolbarActions';
+import { ToolbarTranslations } from './useTranslations';
+/**
+ * Slot for toolbar content: JSX widgets or plain text titles.
+ *
+ * Slot components that support collapsing their label to icon-only should read
+ * `useDynamicToolbarLayout()` (`filterIconOnly` / `trailingIconOnly`) — the
+ * toolbar never mutates slot elements.
+ */
+export type ToolbarSlot = ReactElement | string;
+/** Callback ref used to track a slot's rendered width. */
+export type MeasureRef = (element: HTMLElement | null) => void;
+export type UtilityRowVariant = 'inline-normal' | 'inline-selection' | 'utility-row';
+export declare function SelectionIndicator({ selectedCount, onClearSelection, translations, }: {
+    selectedCount: number;
+    onClearSelection?: () => void;
+    translations: ToolbarTranslations;
+}): JSX.Element;
+export declare function SelectionRow({ selectedCount, onClearSelection, translations, bulkActionsPlan, }: {
+    selectedCount: number;
+    onClearSelection?: () => void;
+    translations: ToolbarTranslations;
+    bulkActionsPlan: PlannedToolbarActions;
+}): JSX.Element;
+export declare function SearchSlot({ search, expanded, measureRef, }: {
+    search: ToolbarSlot;
+    expanded?: boolean;
+    measureRef?: MeasureRef;
+}): JSX.Element;
+/** Keeps children mounted while hidden so slots fade instead of popping. */
+export declare function FadeSlot({ visible, children }: {
+    visible: boolean;
+    children: ReactNode;
+}): JSX.Element;
+export declare function TitleText({ title, measureRef }: {
+    title: ToolbarSlot;
+    measureRef?: MeasureRef;
+}): JSX.Element;
+export declare function TitleBlock({ title, helperText, titleMeasureRef, }: {
+    title?: ToolbarSlot;
+    helperText?: ToolbarSlot;
+    titleMeasureRef?: MeasureRef;
+}): JSX.Element | null;
+/**
+ * Utility cluster — fixed internal order per variant (flex-nowrap).
+ * - inline-normal: before-filter actions → filter → search → after-search actions
+ * - inline-selection: bulk → filter → search
+ * - utility-row (§4/§7): before-filter actions → search (flex) → filter → after-search actions
+ *
+ * Bulk actions render only in the `inline-selection` variant; the other
+ * variants pair with a separate {@link SelectionRow} when selection is active.
+ */
+export declare function UtilityCluster({ variant, beforeFilterActionsPlan, filter, search, afterSearchActionsPlan, bulkActionsPlan, showPageActions, overflowMenuLabel, searchMeasureRef, align, }: {
+    variant: UtilityRowVariant;
+    beforeFilterActionsPlan: PlannedToolbarActions;
+    filter?: ReactNode;
+    search?: ToolbarSlot;
+    afterSearchActionsPlan: PlannedToolbarActions;
+    bulkActionsPlan?: PlannedToolbarActions;
+    showPageActions: boolean;
+    overflowMenuLabel: string;
+    searchMeasureRef?: MeasureRef;
+    align?: 'start' | 'end';
+}): JSX.Element | null;

package/dist/src/components/custom/module/header-layout/estimateToolbarLayout.d.ts

@@ -0,0 +1,95 @@
+import { ToolbarSlot } from './ToolbarRows';
+import { DynamicToolbarAction, ResolveToolbarActionWidth } from './planToolbarActions';
+export type ToolbarLayoutMode = 'compact' | 'stacked' | 'selection-split' | 'inline';
+export interface ToolbarLayoutResolution {
+    mode: ToolbarLayoutMode;
+    filterIconOnly: boolean;
+    trailingIconOnly: boolean;
+}
+/**
+ * Real, rendered widths measured by DynamicToolbar. Every field is optional:
+ * a missing value falls back to the heuristic estimate, so layout planning
+ * works on first render and degrades gracefully.
+ */
+export interface MeasuredToolbarWidths {
+    titleWidthPx?: number;
+    leadingUtilityWidthPx?: number;
+    searchWidthPx?: number;
+    filterLabelWidthPx?: number;
+    filterIconWidthPx?: number;
+    trailingLabelWidthPx?: number;
+    trailingIconWidthPx?: number;
+    selectionIndicatorWidthPx?: number;
+    moreButtonWidthPx?: number;
+    actionWidthPx?: ResolveToolbarActionWidth;
+}
+export declare function estimateTitleAreaWidth(title?: ToolbarSlot): number;
+/**
+ * Width reserved for the title area. Prefers the measured natural width
+ * (capped — the title is allowed to truncate rather than dominate layout),
+ * falling back to the character-count estimate before measurement.
+ */
+export declare function resolveTitleAreaWidth(title: ToolbarSlot | undefined, measuredTitleWidthPx?: number): number;
+export declare function estimateActionsStripWidth(actions: DynamicToolbarAction[], showLabel: boolean, resolveActionWidth?: ResolveToolbarActionWidth): number;
+/**
+ * Bulk zone width as it actually renders: the top-priority actions inline
+ * (labels always shown) up to `maxVisibleBulkActions`, plus the More trigger
+ * when the remaining actions overflow into the menu.
+ */
+export declare function estimateBulkStripWidth(bulkActions: DynamicToolbarAction[], maxVisibleBulkActions: number, resolveActionWidth?: ResolveToolbarActionWidth): number;
+export declare function resolveReserveBulkActionsWidthPx(reserveBulkActionsWidthPx: number, bulkActions: DynamicToolbarAction[], resolveActionWidth?: ResolveToolbarActionWidth, maxVisibleBulkActions?: number): number;
+export interface EstimateUtilitiesWidthOptions {
+    hasLeadingUtility: boolean;
+    hasFilter: boolean;
+    hasSearch: boolean;
+    hasTrailingUtility: boolean;
+    showPageActions: boolean;
+    showBulkActions: boolean;
+    filterIconOnly: boolean;
+    trailingIconOnly: boolean;
+    pageActionsWidthPx: number;
+    bulkActionsWidthPx: number;
+    /** §4/§7: search before filter on utility row */
+    searchBeforeFilter?: boolean;
+    measured?: MeasuredToolbarWidths;
+}
+export declare function estimateUtilitiesClusterWidth(options: EstimateUtilitiesWidthOptions): number;
+export declare function resolveToolbarLayout(options: {
+    containerWidth: number;
+    isMobile: boolean;
+    isSelectionMode: boolean;
+    compactBreakpointPx: number;
+    reserveBulkActionsWidthPx: number;
+    title?: ToolbarSlot;
+    hasLeadingUtility: boolean;
+    hasFilter: boolean;
+    hasSearch: boolean;
+    hasTrailingUtility: boolean;
+    pageActions: DynamicToolbarAction[];
+    bulkActions: DynamicToolbarAction[];
+    maxVisibleBulkActions?: number;
+    measured?: MeasuredToolbarWidths;
+}): ToolbarLayoutResolution;
+/** Width budget for `planToolbarActions` based on resolved layout. */
+export declare function resolvePageActionsAvailableWidth(options: {
+    layoutMode: ToolbarLayoutMode;
+    containerWidth: number;
+    titleWidth: number;
+    filterIconOnly: boolean;
+    trailingIconOnly: boolean;
+    hasFilter: boolean;
+    hasSearch: boolean;
+    hasLeadingUtility: boolean;
+    hasTrailingUtility: boolean;
+    reserveBulkActionsWidthPx: number;
+    measured?: MeasuredToolbarWidths;
+}): number;
+export declare function resolveBulkActionsAvailableWidth(options: {
+    layoutMode: ToolbarLayoutMode;
+    containerWidth: number;
+    titleWidth: number;
+    filterIconOnly: boolean;
+    hasFilter: boolean;
+    hasSearch: boolean;
+    measured?: MeasuredToolbarWidths;
+}): number;

package/dist/src/components/custom/module/header-layout/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DynamicToolbar';
+export * from './DynamicToolbarLayoutContext';
+export * from './planToolbarActions';

package/dist/src/components/custom/module/header-layout/planToolbarActions.d.ts

@@ -0,0 +1,72 @@
+import { ReactElement } from 'react';
+export interface DynamicToolbarActionRenderOptions {
+    showLabel: boolean;
+}
+export interface DynamicToolbarAction {
+    id: string;
+    label: string;
+    onClick: () => void;
+    icon?: ReactElement;
+    disabled?: boolean;
+    hidden?: boolean;
+    variant?: 'contained' | 'outlined' | 'text' | 'textGray' | 'textWhite';
+    /** Visual tone. `danger` renders the action in the destructive/red palette. */
+    tone?: 'default' | 'danger';
+    size?: 'large' | 'small' | 'medium';
+    /**
+     * Higher priority resists overflow longer — lower-priority actions move
+     * into the More menu first. Label collapse is positional (right to left).
+     */
+    priority?: number;
+    /** Never move into the More overflow menu. */
+    keepVisible?: boolean;
+    /** Allow label + icon to collapse to icon-only. */
+    canHideLabel?: boolean;
+    /** Allow moving into the More overflow menu. */
+    canOverflow?: boolean;
+    dataTest?: string;
+    estimatedWidthPx?: number;
+    ariaLabel?: string;
+    /** Custom inline renderer for richer actions such as popover triggers. */
+    render?: (options: DynamicToolbarActionRenderOptions) => ReactElement;
+}
+export interface PlannedToolbarAction {
+    action: DynamicToolbarAction;
+    showLabel: boolean;
+    width: number;
+}
+export interface PlannedToolbarActions {
+    inlineActions: PlannedToolbarAction[];
+    overflowActions: DynamicToolbarAction[];
+    showMoreMenu: boolean;
+}
+export declare const ACTION_GAP_PX = 8;
+/** Fallback width of the icon-only "More" overflow trigger button. */
+export declare const MORE_BUTTON_PX = 40;
+/**
+ * Supplies the real (measured) width of an action. Returning `undefined`
+ * falls back to `estimateToolbarActionWidth`.
+ */
+export type ResolveToolbarActionWidth = (action: DynamicToolbarAction, showLabel: boolean) => number | undefined;
+export declare function estimateToolbarActionWidth(action: DynamicToolbarAction, showLabel: boolean): number;
+export declare function resolveToolbarActionWidth(action: DynamicToolbarAction, showLabel: boolean, resolveActionWidth?: ResolveToolbarActionWidth): number;
+export declare function planToolbarActions(options: {
+    actions: DynamicToolbarAction[];
+    availableWidth: number;
+    maxInlineActions?: number;
+    collapseLabels?: boolean;
+    resolveActionWidth?: ResolveToolbarActionWidth;
+    moreButtonWidthPx?: number;
+}): PlannedToolbarActions;
+/**
+ * Bulk actions overflow progressively: every action keeps its full label,
+ * and the lowest-priority actions drop into the "More" menu until the
+ * remaining inline strip fits the available width.
+ */
+export declare function planBulkToolbarActions(options: {
+    actions: DynamicToolbarAction[];
+    availableWidth: number;
+    maxVisibleBulkActions?: number;
+    resolveActionWidth?: ResolveToolbarActionWidth;
+    moreButtonWidthPx?: number;
+}): PlannedToolbarActions;

package/dist/src/components/custom/module/header-layout/useTranslations.d.ts

@@ -0,0 +1,17 @@
+export type ToolbarLocale = 'en' | 'no';
+declare const translations: {
+    en: {
+        more: string;
+        clearSelection: string;
+        selected: string;
+    };
+    no: {
+        more: string;
+        clearSelection: string;
+        selected: string;
+    };
+};
+export type ToolbarTranslations = (typeof translations)['en'];
+export declare function useToolbarTranslations(locale?: ToolbarLocale): ToolbarTranslations;
+export declare function formatSelectionLabel(count: number, t: ToolbarTranslations): string;
+export {};

package/dist/src/components/utils/filter-menu/StyledFilterButton.d.ts

@@ -2,6 +2,7 @@ import { StyledButtonProps } from '../../inputs/button';
 /**
  * Custom props:
  * @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made
+ * @param hideLabel - icon-only mode. When omitted, follows the surrounding DynamicToolbar layout (filterIconOnly).
  */
 interface StyledFilterMenuProps {
     filterIsActive: boolean;

package/dist/src/components/utils/filter-menu/StyledFilterMenu.d.ts

@@ -4,6 +4,7 @@ import { PopoverProps } from '@mui/material';
  * Custom props:
  * @param filterIsActive - needed to determine whether or not to show the dot in the top right corner indicating some changes were made
  * @param popoverContent
+ * @param hideLabel - icon-only mode. When omitted, follows the surrounding DynamicToolbar layout (filterIconOnly).
  */
 interface StyledFilterMenuProps {
     dataTest: string;

package/dist/src/hooks/useElementWidthPx.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+/**
+ * Tracks an element's width. The first measurement happens synchronously in a
+ * layout effect (before paint) so width-driven layouts never flash an
+ * unmeasured state; subsequent resize events are rAF-throttled.
+ */
+export declare function useElementWidthPx<T extends HTMLElement>(): {
+    ref: RefObject<T>;
+    widthPx: number;
+};

package/dist/src/hooks/useWidthRegistry.d.ts

@@ -0,0 +1,21 @@
+export type WidthMeasureMode = 'box' | 'scroll';
+export interface WidthRegistry {
+    /**
+     * Returns a stable callback ref for `key`. Attach it to the element whose
+     * width should be tracked. `scroll` mode measures `scrollWidth` (natural
+     * content width, ignoring truncation); `box` measures the border box.
+     */
+    register: (key: string, mode?: WidthMeasureMode) => (element: HTMLElement | null) => void;
+    /**
+     * Last known width per key. Keys keep their last value after the element
+     * unmounts, so variant widths (e.g. label vs icon-only) stay available
+     * once each variant has been rendered at least once.
+     */
+    widths: Readonly<Record<string, number>>;
+}
+/**
+ * Tracks real, rendered widths of a dynamic set of keyed elements with a
+ * single shared ResizeObserver. Used by DynamicToolbar to drive layout
+ * planning from measured widths instead of hard-coded estimates.
+ */
+export declare function useWidthRegistry(): WidthRegistry;

package/dist/src/index.d.ts

@@ -46,5 +46,6 @@ export * from './components/custom/widget/widget-title/StyledWidgetTitle';
 export * from './components/custom/widget/widget-header/StyledWidgetHeader';
 export * from './components/custom/widget/widget/StyledWidget';
 export * from './components/custom/module/module-title/StyledModuleTitle';
+export * from './components/custom/module/header-layout';
 export * from './components/feedback/minimizable-dialog';
 export { Fade, Paper, ClickAwayListener, Popper, Avatar, Skeleton, Container, Stack, FormLabel } from '@mui/material';

package/package.json

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