@ds-mo/ui 14.15.1 → 14.17.0

package/dist/react/components.d.ts

@@ -66,7 +66,9 @@ export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
+export { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";

package/dist/react/components.js

@@ -67,7 +67,9 @@ export { DsSlider } from "./ds-slider.js";
 export { DsSwatchPicker } from "./ds-swatch-picker.js";
 export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
+export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
+export { DsTableSort } from "./ds-table-sort.js";
 export { DsTableToolbar } from "./ds-table-toolbar.js";
 export { DsTable } from "./ds-table.js";
 export { DsTag } from "./ds-tag.js";

package/dist/react/ds-table-filter.d.ts

@@ -0,0 +1,17 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsTableFilterCustomEvent, type FilterMenuChangeDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTableFilter as DsTableFilterElement } from "@ds-mo/ui/dist/components/ds-table-filter.js";
+export type DsTableFilterEvents = {
+    onDsChange: EventName<DsTableFilterCustomEvent<FilterMenuChangeDetail>>;
+    onDsClear: EventName<DsTableFilterCustomEvent<void>>;
+    onDsActiveFilterChange: EventName<DsTableFilterCustomEvent<string>>;
+    onDsClose: EventName<DsTableFilterCustomEvent<void>>;
+    onDsOpenChange: EventName<DsTableFilterCustomEvent<boolean>>;
+    onDsAfterClose: EventName<DsTableFilterCustomEvent<void>>;
+};
+export declare const DsTableFilter: StencilReactComponent<DsTableFilterElement, DsTableFilterEvents, Components.DsTableFilter>;

package/dist/react/ds-table-filter.js

@@ -0,0 +1,19 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTableFilter as DsTableFilterElement, defineCustomElement as defineDsTableFilter } from "@ds-mo/ui/dist/components/ds-table-filter.js";
+export const DsTableFilter = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-filter',
+    elementClass: DsTableFilterElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsChange: 'dsChange',
+        onDsClear: 'dsClear',
+        onDsActiveFilterChange: 'dsActiveFilterChange',
+        onDsClose: 'dsClose',
+        onDsOpenChange: 'dsOpenChange',
+        onDsAfterClose: 'dsAfterClose'
+    },
+    defineCustomElement: defineDsTableFilter
+});

package/dist/react/ds-table-sort.d.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated by the Stencil React Output Target.
+ * Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
+ */
+import type { EventName, StencilReactComponent } from './react-runtime.js';
+import { type DsTableSortCustomEvent, type TableSortChangeDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTableSort as DsTableSortElement } from "@ds-mo/ui/dist/components/ds-table-sort.js";
+export type DsTableSortEvents = {
+    onDsSortChange: EventName<DsTableSortCustomEvent<TableSortChangeDetail>>;
+};
+export declare const DsTableSort: StencilReactComponent<DsTableSortElement, DsTableSortEvents, Components.DsTableSort>;

package/dist/react/ds-table-sort.js

@@ -0,0 +1,12 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTableSort as DsTableSortElement, defineCustomElement as defineDsTableSort } from "@ds-mo/ui/dist/components/ds-table-sort.js";
+export const DsTableSort = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-sort',
+    elementClass: DsTableSortElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: { onDsSortChange: 'dsSortChange' },
+    defineCustomElement: defineDsTableSort
+});

package/dist/types/components/ButtonUnfilled/ButtonUnfilled.d.ts

@@ -70,6 +70,12 @@ export declare class ButtonUnfilled {
      * active styling, and makes activation emit dsChange with the requested state.
      */
     pressed: boolean | undefined;
+    /**
+     * Collapse the visible label and chevron to an icon-only control when the
+     * owning `ds-table` caption is narrower than 900px. The trigger omits those
+     * parts rather than clipping them.
+     */
+    collapseLabel: boolean;
     /**
      * Mark the button as a Menu trigger. Implies `aria-haspopup="menu"` and covers
      * both menu-button shapes:
@@ -79,7 +85,7 @@ export declare class ButtonUnfilled {
      * - `icon` — the button *is* a menu. No chevron is added, so the glyph must
      *   convey the menu on its own. Use `Ellipses` for generic more-options;
      *   use a specific icon when the menu has a named purpose, such as
-     *   `Preferences` for Customize table.
+     *   `Table` for Customize table.
      *
      * Use `haspopup` directly for non-menu popups.
      */
@@ -91,10 +97,21 @@ export declare class ButtonUnfilled {
     focusTabIndex?: number;
     dsClick: EventEmitter<MouseEvent>;
     dsChange: EventEmitter<boolean>;
+    private captionCompact;
     private buttonEl;
+    private captionCompactDisconnect;
+    private hasLoaded;
+    componentDidLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
     setFocus(): Promise<void>;
     private handleClick;
+    private get captionIconOnly();
+    private get visualVariant();
     private get showDot();
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     private get resolvedHaspopup();
     private get doubleInset();
     /** Only popup triggers hold a pressed visual while expanded. */

package/dist/types/components/FilterMenu/FilterMenu.d.ts

@@ -42,6 +42,11 @@ export declare class FilterMenu {
     hasBorder: boolean;
     /** Show selected interaction fill when one or more criteria are active. */
     activeFill: boolean;
+    /**
+     * Opt into table-caption icon-only chrome below 900px. The trigger omits its
+     * visible label and chevron; keep an accessible name via aria-label.
+     */
+    collapseLabel: boolean;
     /** ID applied to the internal select trigger. */
     inputId: string | undefined;
     /** Direct accessible name for the internal select trigger. */
@@ -80,6 +85,7 @@ export declare class FilterMenu {
     private pos;
     private focusRingVisible;
     private activeOptionIndex;
+    private captionCompact;
     /** Requests a controlled value replacement without closing the popup. */
     dsChange: EventEmitter<FilterMenuChangeDetail>;
     /** Requests that the consumer clear every filter value. */
@@ -97,10 +103,14 @@ export declare class FilterMenu {
     private triggerElement;
     private pendingInitialFocusVisible;
     private closeTimer;
+    private captionCompactDisconnect;
+    private hasLoaded;
     private closingSnapshot;
     private readonly position;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
     onOpenChange(isOpen: boolean): void;
     onPositionInputChange(): void;
     handleKeyDown(event: KeyboardEvent): void;
@@ -132,6 +142,9 @@ export declare class FilterMenu {
     private toggleMultiple;
     private selectOption;
     private renderOptions;
+    private get captionIconOnly();
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     render(): any;
 }
 //# sourceMappingURL=FilterMenu.d.ts.map

package/dist/types/components/Select/Select.d.ts

@@ -60,6 +60,11 @@ export declare class Select {
     isLoading: boolean;
     /** Show the selected interaction fill when a valid value exists. */
     activeFill: boolean;
+    /**
+     * Opt into table-caption icon-only chrome below 900px. The trigger omits its
+     * visible label and chevron; keep an accessible name via aria-label.
+     */
+    collapseLabel: boolean;
     /** Show the surface-aware inset border, including focused and invalid strokes. */
     hasBorder: boolean;
     /** Optional trigger prefix icon name. */
@@ -115,6 +120,7 @@ export declare class Select {
     private positionReady;
     private focusRingVisible;
     private compactFooterSummary;
+    private captionCompact;
     private readonly generatedId;
     private readonly listboxId;
     private readonly errorId;
@@ -126,11 +132,15 @@ export declare class Select {
     private footerResizeObserver?;
     private observedFooterContentElement?;
     private footerMeasurementFrame?;
+    private captionCompactDisconnect;
+    private hasLoaded;
     private createController;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    connectedCallback(): void;
     componentDidRender(): void;
     disconnectedCallback(): void;
+    onCollapseLabelChange(): void;
     syncFormValue(): void;
     onLoadingChange(): void;
     onPopupAlignChange(): void;
@@ -164,6 +174,9 @@ export declare class Select {
     private readonly handleListKeyDown;
     private readonly handleTriggerKeyDown;
     private renderOption;
+    private get captionIconOnly();
+    private syncCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     render(): any;
 }
 //# sourceMappingURL=Select.d.ts.map

package/dist/types/components/Table/Table.d.ts

@@ -128,6 +128,7 @@ export declare class Table {
     private actionMenu;
     private actionMenuInitialFocusVisible;
     private truncateTooltipLabel;
+    private captionCompact;
     private columnCustomizerOpen;
     private columnCustomizerInitialFocusVisible;
     private dataModeSwitcherOpen;
@@ -163,6 +164,7 @@ export declare class Table {
     private stickyGroupConnected;
     private headerSlotObserver;
     private footerSlotObserver;
+    private captionCompactDisconnect;
     private fitResizeObserver;
     private fitObservedViewport;
     private fitObservedTable;
@@ -212,6 +214,8 @@ export declare class Table {
     private get containedScroll();
     private connectFitObserver;
     private disconnectFitObserver;
+    private connectCaptionCompactObserver;
+    private disconnectCaptionCompactObserver;
     private readonly syncFitPageSize;
     handleWindowPaginationKeyDown(event: KeyboardEvent): void;
     private handlePaginationKeyDown;

package/dist/types/components/Table/table-column-customizer.d.ts

@@ -11,6 +11,8 @@ export declare function resolveTableColumnOrder(columns: TableColumn[], columnOr
  * column remains visible when the catalog has any data columns.
  */
 export declare function resolveTableHiddenColumnIds(columns: TableColumn[], hiddenColumnIds: string[] | undefined): string[];
+/** True when hidden ids or data-column order differ from the catalog default. */
+export declare function isTableColumnsCustomized(columns: TableColumn[], hiddenColumnIds: string[] | undefined, columnOrder: string[] | undefined): boolean;
 export declare function resolveTableVisibleColumns(columns: TableColumn[], options?: {
     columnCustomizer?: boolean;
     hiddenColumnIds?: string[];

package/dist/types/components/TableFilter/TableFilter.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { FilterMenuChangeDetail, FilterMenuFilter, FilterMenuValues } from '../FilterMenu/FilterMenu';
+export declare class TableFilter {
+    /** Controlled popup visibility. */
+    open: boolean;
+    /** Product-owned filter categories and option definitions. */
+    filters: FilterMenuFilter[];
+    /** Controlled values keyed by filter id. */
+    values: FilterMenuValues;
+    /** Controlled category shown in the option pane. */
+    activeFilterId: string | undefined;
+    /** Visible trigger label. */
+    label: string;
+    /** Accessible name for the trigger. Defaults to Filter table. */
+    ariaLabel: string | null;
+    /** Accessible name for the non-modal filter dialog. Defaults to the trigger name. */
+    menuLabel: string | null;
+    /** Accessible name for the category tab list. */
+    categoriesLabel: string;
+    /** Footer action and date-clear accessible label. */
+    clearLabel: string;
+    /** Requests a controlled value replacement without closing the popup. */
+    dsChange: EventEmitter<FilterMenuChangeDetail>;
+    /** Requests that the consumer clear every filter value. */
+    dsClear: EventEmitter<void>;
+    /** Requests a controlled active-category replacement. */
+    dsActiveFilterChange: EventEmitter<string>;
+    /** Requests that the controlled popup close. */
+    dsClose: EventEmitter<void>;
+    /** Emitted whenever trigger activation changes popup visibility. */
+    dsOpenChange: EventEmitter<boolean>;
+    /** Emitted after exit motion and rendered popup removal complete. */
+    dsAfterClose: EventEmitter<void>;
+    render(): any;
+    private forward;
+}
+//# sourceMappingURL=TableFilter.d.ts.map

package/dist/types/components/TableSort/TableSort.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { TableColumn, TableSortChangeDetail, TableSortState } from '../Table/table-types';
+export declare class TableSort {
+    private el;
+    /** Catalog used to derive sortable fields, including compound header segments. */
+    columns: TableColumn[];
+    /** Controlled table sort. Header sorting and this menu share the same value. */
+    sort: TableSortState | null;
+    /** Accessible name for the trigger and menu. */
+    ariaLabel: string | null;
+    dsSortChange: EventEmitter<TableSortChangeDetail>;
+    private menuOpen;
+    private initialFocusVisible;
+    private readonly componentId;
+    private readonly triggerId;
+    private readonly menuId;
+    setFocus(): Promise<void>;
+    render(): any;
+    private toggle;
+    private open;
+    private close;
+    private handleSelect;
+}
+//# sourceMappingURL=TableSort.d.ts.map

package/dist/types/components/TableSort/table-sort-menu.d.ts

@@ -0,0 +1,15 @@
+import type { MenuItemData, MenuSection } from '../Menu/menu-types';
+import type { TableColumn, TableSortState } from '../Table/table-types';
+export declare const TABLE_SORT_DIRECTION_ASC = "direction:asc";
+export declare const TABLE_SORT_DIRECTION_DESC = "direction:desc";
+export interface TableSortField {
+    id: string;
+    label: string;
+}
+/** Sortable data fields from the catalog, including compound header segments. */
+export declare function tableSortFields(columns: readonly TableColumn[]): TableSortField[];
+export declare function tableSortMenuSections(columns: readonly TableColumn[], sort: TableSortState | null | undefined): MenuSection[];
+export declare function tableSortStatesEqual(left: TableSortState | null | undefined, right: TableSortState | null | undefined): boolean;
+/** Next controlled sort from a Sort menu selection. Does not toggle like a header click. */
+export declare function nextTableSortStateFromMenuItem(columns: readonly TableColumn[], current: TableSortState | null | undefined, item: MenuItemData): TableSortState | null;
+//# sourceMappingURL=table-sort-menu.d.ts.map