@ds-mo/ui 14.34.0 → 14.35.0

package/dist/react/components.d.ts

@@ -73,6 +73,7 @@ export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableGroup } from "./ds-table-group.js";
+export { DsTablePreferences } from "./ds-table-preferences.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
 export { DsTableSearch } from "./ds-table-search.js";
 export { DsTableSort } from "./ds-table-sort.js";

package/dist/react/components.js

@@ -74,6 +74,7 @@ export { DsSwitch } from "./ds-switch.js";
 export { DsTabGroup } from "./ds-tab-group.js";
 export { DsTableFilter } from "./ds-table-filter.js";
 export { DsTableGroup } from "./ds-table-group.js";
+export { DsTablePreferences } from "./ds-table-preferences.js";
 export { DsTableSavedViews } from "./ds-table-saved-views.js";
 export { DsTableSearch } from "./ds-table-search.js";
 export { DsTableSort } from "./ds-table-sort.js";

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

@@ -0,0 +1,21 @@
+/**
+ * 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 DsTablePreferencesCustomEvent, type FilterMenuChangeDetail, type FilterMenuMatchModeChangeDetail, type PreferencesTab, type TableColumnsConfigChangeDetail, type TableGroupingState, type TableSortChangeDetail } from "@ds-mo/ui";
+import type { Components } from "@ds-mo/ui/dist/components";
+import { DsTablePreferences as DsTablePreferencesElement } from "@ds-mo/ui/dist/components/ds-table-preferences.js";
+export type DsTablePreferencesEvents = {
+    onDsCustomizeOptionChange: EventName<DsTablePreferencesCustomEvent<string>>;
+    onDsPreferencesTabChange: EventName<DsTablePreferencesCustomEvent<PreferencesTab>>;
+    onDsFilterChange: EventName<DsTablePreferencesCustomEvent<FilterMenuChangeDetail>>;
+    onDsFilterMatchModeChange: EventName<DsTablePreferencesCustomEvent<FilterMenuMatchModeChangeDetail>>;
+    onDsActiveFilterChange: EventName<DsTablePreferencesCustomEvent<string>>;
+    onDsFiltersClear: EventName<DsTablePreferencesCustomEvent<void>>;
+    onDsSortChange: EventName<DsTablePreferencesCustomEvent<TableSortChangeDetail>>;
+    onDsGroupChange: EventName<DsTablePreferencesCustomEvent<TableGroupingState>>;
+    onDsGroupClear: EventName<DsTablePreferencesCustomEvent<void>>;
+    onDsColumnsConfigChange: EventName<DsTablePreferencesCustomEvent<TableColumnsConfigChangeDetail>>;
+};
+export declare const DsTablePreferences: StencilReactComponent<DsTablePreferencesElement, DsTablePreferencesEvents, Components.DsTablePreferences>;

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

@@ -0,0 +1,23 @@
+'use client';
+import { createComponent } from './react-runtime.js';
+import React from 'react';
+import { DsTablePreferences as DsTablePreferencesElement, defineCustomElement as defineDsTablePreferences } from "@ds-mo/ui/dist/components/ds-table-preferences.js";
+export const DsTablePreferences = /*@__PURE__*/ createComponent({
+    tagName: 'ds-table-preferences',
+    elementClass: DsTablePreferencesElement,
+    // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
+    react: React,
+    events: {
+        onDsCustomizeOptionChange: 'dsCustomizeOptionChange',
+        onDsPreferencesTabChange: 'dsPreferencesTabChange',
+        onDsFilterChange: 'dsFilterChange',
+        onDsFilterMatchModeChange: 'dsFilterMatchModeChange',
+        onDsActiveFilterChange: 'dsActiveFilterChange',
+        onDsFiltersClear: 'dsFiltersClear',
+        onDsSortChange: 'dsSortChange',
+        onDsGroupChange: 'dsGroupChange',
+        onDsGroupClear: 'dsGroupClear',
+        onDsColumnsConfigChange: 'dsColumnsConfigChange'
+    },
+    defineCustomElement: defineDsTablePreferences
+});

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

@@ -7,6 +7,7 @@ import { type DsTableCustomEvent, type PaginationChangeDetail, type TableCellAct
 import type { Components } from "@ds-mo/ui/dist/components";
 import { DsTable as DsTableElement } from "@ds-mo/ui/dist/components/ds-table.js";
 export type DsTableEvents = {
+    onDsCustomizeOptionChange: EventName<DsTableCustomEvent<string>>;
     onDsSortChange: EventName<DsTableCustomEvent<TableSortChangeDetail>>;
     onDsGroupCollapseChange: EventName<DsTableCustomEvent<TableGroupCollapseChangeDetail>>;
     onDsSelectionChange: EventName<DsTableCustomEvent<TableSelectionChangeDetail>>;

package/dist/react/ds-table.js

@@ -8,6 +8,7 @@ export const DsTable = /*@__PURE__*/ createComponent({
     // @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
     react: React,
     events: {
+        onDsCustomizeOptionChange: 'dsCustomizeOptionChange',
         onDsSortChange: 'dsSortChange',
         onDsGroupCollapseChange: 'dsGroupCollapseChange',
         onDsSelectionChange: 'dsSelectionChange',

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

@@ -36,6 +36,10 @@ export interface FilterMenuMatchModeChangeDetail {
 export declare class FilterMenu {
     el: HTMLElement;
     /** Controlled popup visibility. */
+    /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */
+    embedded: boolean;
+    /** Stacked, collapsible sections for a configuration panel. */
+    vertical: boolean;
     open: boolean;
     /** Select trigger text. */
     triggerLabel: string;
@@ -48,8 +52,20 @@ export declare class FilterMenu {
     /** Select trigger width fit. */
     width: FilterMenuWidth;
     /** Show the surface-aware inset border around the select trigger. */
+    /** Show the trigger chevron. */
+    showIndicator: boolean;
     hasBorder: boolean;
     /** Show selected interaction fill when one or more criteria are active. */
+    /** Keep trigger colors neutral when a value is selected. */
+    neutralTrigger: boolean;
+    /** Stage filter edits until Apply is pressed. */
+    applyRequired: boolean;
+    private draftValues?;
+    private draftModes?;
+    private changeValue;
+    private changeMode;
+    private get hasPendingChanges();
+    private applyDraft;
     activeFill: boolean;
     /**
      * Opt into table-caption icon-only chrome below 900px. The trigger omits its

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

@@ -6,6 +6,8 @@ export type MenuSelectionMode = 'none' | 'single';
 export type MenuSize = ControlSize;
 export declare class Menu {
     el: HTMLElement;
+    /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */
+    embedded: boolean;
     open: boolean;
     items: MenuItemData[];
     /** Choice-row density. */

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

@@ -8,7 +8,7 @@ export type SelectSize = 'lg' | 'md' | 'sm' | 'xs';
 export type SelectWidth = ControlWidth;
 export type SelectPopupAlign = 'start' | 'end';
 export type SelectValue = string | string[];
-export type SelectIndicator = 'down' | 'up-down';
+export type SelectIndicator = 'down' | 'up-down' | 'none';
 export interface SelectOptionActionDetail {
     value: string;
     anchorId: string;
@@ -61,12 +61,16 @@ export declare class Select {
     /** Replace the prefix with a loader and disable option interaction. */
     isLoading: boolean;
     /** Show the selected interaction fill when a valid value exists. */
+    /** Keep trigger colors neutral when a value is selected. */
+    neutralTrigger: boolean;
     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;
+    /** Always show only the prefix icon; retain an accessible name via aria-label. */
+    iconOnly: boolean;
     /** Show the surface-aware inset border, including focused and invalid strokes. */
     hasBorder: boolean;
     /** Optional trigger prefix icon name. */

package/dist/types/components/ShellApp/shell-app-types.d.ts

@@ -5,7 +5,7 @@ import type { MobileHeaderTone } from '../MobileHeader/mobile-header-types';
 import type { PanelNavGroup, PanelNavItem, PanelNavRouterMode } from '../PanelNav/panel-nav-types';
 import type { PanelToolsHeaders, PanelToolsHeaderAction, PanelToolsItem, PanelToolsRailAccessory } from '../PanelTools/panel-tools-types';
 import type { NavChromeStyle } from '../../shell/nav-chrome';
-import type { ShellPageContentInset, ShellPageContentSurface } from '../ShellPage/shell-page-types';
+import type { ShellPageContentInset, ShellPageContentSurface, ShellPageHeaderPresentation } from '../ShellPage/shell-page-types';
 export type ShellAppComposition = 'managed' | 'slotted';
 export type ShellSectionNavigation = 'bar' | 'panel';
 /**
@@ -48,6 +48,8 @@ export interface ShellNavigationConfig {
  * the intentionally different mobile MobileHeader presentation.
  */
 export interface ShellPageChromeConfig {
+    /** Explicit presentation for the page-local title. */
+    headerPresentation?: ShellPageHeaderPresentation;
     heading?: string;
     /** Desktop/tablet route-navigation heading when it differs from the page h1. */
     routeHeading?: string;

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

@@ -13,6 +13,7 @@ export declare class TabGroup {
     /** Width fit — hug content (default) or fill the parent with equal-width segments. */
     width: TabGroupWidth;
     /** Show the segmented control's outer background, border, and inset. */
+    presentation: 'segmented' | 'tabs';
     hasContainer: boolean;
     background: TabBackground | undefined;
     ariaLabel: string | null;

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

@@ -1,10 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import type { PaginationChangeDetail } from '../Pagination/pagination-types';
+import type { MenuItemData } from '../Menu/menu-types';
 import type { TableCaptionVisibility, TableCellActionDetail, TableColumn, TableColumnsConfigChangeDetail, TableDataMode, TableDataModeChangeDetail, TableGroup, TableGroupCollapseChangeDetail, TableGroupLoadMoreDetail, TableGroupingState, TableLoadMoreDetail, TableLoadMoreMode, TablePaginationState, TableRow, TableRowActivateDetail, TableSelectionChangeDetail, TableSelectionMode, TableSortChangeDetail, TableSortState } from './table-types';
 export declare class Table {
     el: HTMLElement;
     /** Stable column definitions. Assign through JavaScript. */
     columns: TableColumn[];
+    /** Additional toggle options in the column customizer. */
+    customizeOptions: MenuItemData[];
+    dsCustomizeOptionChange: EventEmitter<string>;
     /** Ungrouped row data. Ignored while grouping is active. Assign through JavaScript. */
     rows: TableRow[];
     /** One level of application-owned grouped data. Assign through JavaScript. */
@@ -29,6 +33,10 @@ export declare class Table {
      * opens the shared Menu of live show/hide switch rows.
      */
     columnCustomizer: boolean;
+    /** Hide only the built-in Customize trigger when an external preferences surface owns it. */
+    /** Remove borders from table-owned caption controls. */
+    captionControlsBorderless: boolean;
+    hideColumnCustomizerTrigger: boolean;
     /** Controlled hidden data-column identities. Action ids are ignored. */
     hiddenColumnIds: string[];
     /** Controlled data-column identities in display order. Omitted ids append in catalog order. */

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

@@ -4,6 +4,8 @@ export declare class TableFilter {
     /** Controlled popup visibility. */
     open: boolean;
     /** Product-owned filter categories and option definitions. */
+    /** Show the trigger border. */
+    hasBorder: boolean;
     filters: FilterMenuFilter[];
     /** Controlled values keyed by filter id. */
     values: FilterMenuValues;

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

@@ -17,6 +17,11 @@ export interface TableGroupOption {
 export declare class TableGroup {
     private el;
     /** Product-owned data points that may group the table. */
+    /** Render content inside a parent-owned surface; the parent owns dismissal and positioning. */
+    /** Show the trigger border. */
+    hasBorder: boolean;
+    vertical: boolean;
+    embedded: boolean;
     options: TableGroupOption[];
     /** Controlled grouping field and the order of its group sections. */
     grouping: TableGroupingState | null;

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

@@ -0,0 +1,56 @@
+import type { MenuItemData, MenuSection } from '../Menu/menu-types';
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { FilterMenuFilter, FilterMenuValues, FilterMenuMatchModes, FilterMenuChangeDetail, FilterMenuMatchModeChangeDetail } from '../FilterMenu/FilterMenu';
+import type { TableColumn, TableSortState, TableSortChangeDetail, TableGroupingState, TableColumnsConfigChangeDetail } from '../Table/table-types';
+import type { TableGroupOption } from '../TableGroup/TableGroup';
+export type PreferencesTab = 'filters' | 'sort' | 'group' | 'customize';
+export declare class TablePreferences {
+    el: HTMLElement;
+    /** Show the trigger border. */
+    hasBorder: boolean;
+    filters: FilterMenuFilter[];
+    values: FilterMenuValues;
+    matchModes: FilterMenuMatchModes;
+    activeFilterId: string | undefined;
+    columns: TableColumn[];
+    /** Additional toggle options in the column customizer. */
+    customizeOptions: MenuItemData[];
+    customizeSections: MenuSection[];
+    dsCustomizeOptionChange: EventEmitter<string>;
+    /** Optional sort fields when they differ from customizable content. */
+    sortColumns?: TableColumn[];
+    sort: TableSortState | null;
+    groupingOptions: TableGroupOption[];
+    grouping: TableGroupingState | null;
+    hiddenColumnIds: string[];
+    columnOrder: string[];
+    /** Render shared content without its popup or trigger. */
+    embedded: boolean;
+    activeTab: PreferencesTab;
+    dsPreferencesTabChange: EventEmitter<PreferencesTab>;
+    label: string;
+    dsFilterChange: EventEmitter<FilterMenuChangeDetail>;
+    dsFilterMatchModeChange: EventEmitter<FilterMenuMatchModeChangeDetail>;
+    dsActiveFilterChange: EventEmitter<string>;
+    dsFiltersClear: EventEmitter<void>;
+    dsSortChange: EventEmitter<TableSortChangeDetail>;
+    dsGroupChange: EventEmitter<TableGroupingState>;
+    dsGroupClear: EventEmitter<void>;
+    dsColumnsConfigChange: EventEmitter<TableColumnsConfigChangeDetail>;
+    private open;
+    private tab;
+    private pos;
+    private ready;
+    private readonly popupId;
+    private trigger?;
+    private popup?;
+    private readonly position;
+    private readonly interaction;
+    disconnectedCallback(): void;
+    private close;
+    private toggle;
+    onKeydown(event: KeyboardEvent): void;
+    private forward;
+    render(): any;
+}
+//# sourceMappingURL=TablePreferences.d.ts.map

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

@@ -3,6 +3,8 @@ import type { TableSavedView, TableSavedViewChangeDetail, TableSavedViewCreateDe
 export declare class TableSavedViews {
     el: HTMLElement;
     /** Application-owned custom saved views. Assign arrays through the JavaScript property. */
+    /** Show the trigger border. */
+    hasBorder: boolean;
     views: TableSavedView[];
     /** ID of the controlled active view, including the default view ID. */
     value: string;
@@ -16,6 +18,8 @@ export declare class TableSavedViews {
     label: string;
     /** Trigger label shown while the default view is selected. */
     triggerLabel: string;
+    /** Use an icon-only trigger in an explicitly compact toolbar. */
+    compact: boolean;
     /** Footer action label that opens the create-view dialog. */
     createLabel: string;
     /** Emitted when a view selection is requested. */

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

@@ -3,6 +3,8 @@ import type { TableColumn } from '../Table/table-types';
 import type { TableSearchFieldsChangeDetail } from './table-search-types';
 export declare class TableSearch {
     private el;
+    /** Show the resting field border; keyboard focus remains visible. */
+    hasBorder: boolean;
     /** Controlled free-text query. */
     value: string;
     /** Table column catalog used to derive searchable data points and their complete labels. */

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

@@ -3,6 +3,8 @@ import type { TableColumn, TableSortChangeDetail, TableSortState } from '../Tabl
 export declare class TableSort {
     private el;
     /** Catalog used to derive sortable fields, including compound header segments. */
+    /** Show the trigger border. */
+    hasBorder: boolean;
     columns: TableColumn[];
     /** Controlled table sort. Header sorting and this menu share the same value. */
     sort: TableSortState | null;

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

@@ -2,6 +2,8 @@ export declare class TableToolbar {
     el: HTMLElement;
     /** Accessible name for the grouped table controls. */
     label: string;
+    /** Use separators between regions when composing borderless controls. */
+    borderless: boolean;
     private slotPresence;
     componentWillLoad(): void;
     private hasOwnedSlot;