@commercetools/nimbus 2.1.0 → 2.3.0

package/dist/components/combobox/utils/filters.d.ts

@@ -0,0 +1,339 @@
+import { Node } from 'react-stately';
+/**
+ * Default text-based filter for combobox items
+ * Filters individual items by their text content
+ * Does NOT handle sections - use createSectionAwareFilter for that
+ *
+ * @param nodes - Collection nodes to filter
+ * @param inputValue - Current filter text from input
+ * @returns Filtered collection nodes containing only items that match the input
+ *
+ * @example
+ * ```tsx
+ * <ComboBox.Root
+ *   items={items}
+ *   filter={filterByText}
+ *   placeholder="Search..."
+ * />
+ * ```
+ *
+ * **Behavior:**
+ * - Case-insensitive substring matching
+ * - Returns all nodes when input is empty or whitespace
+ * - Filters based on Node.textValue property
+ * - Does not preserve sections (use section-aware filter for that)
+ *
+ * **Note:** This filter works on individual items only. For filtering with
+ * sections preserved, use `createSectionAwareFilter` to wrap your custom
+ * filter logic.
+ */
+export declare function filterByText<T extends object>(nodes: Iterable<Node<T>>, inputValue: string): Iterable<Node<T>>;
+/**
+ * Starts-with filter for combobox items
+ * Matches items where textValue begins with the input
+ *
+ * @param nodes - Collection nodes to filter
+ * @param inputValue - Current filter text from input
+ * @returns Filtered collection nodes containing only items that start with the input
+ *
+ * @example
+ * ```tsx
+ * <ComboBox.Root
+ *   items={items}
+ *   filter={filterByStartsWith}
+ *   placeholder="Type to filter..."
+ * />
+ * ```
+ *
+ * **Behavior:**
+ * - Case-insensitive prefix matching
+ * - More restrictive than substring matching
+ * - Useful for autocomplete-style filtering
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Country/state selection where users type the beginning
+ * - Name lookups where first letters matter
+ * - Command palettes with prefix shortcuts
+ */
+export declare function filterByStartsWith<T extends object>(nodes: Iterable<Node<T>>, inputValue: string): Iterable<Node<T>>;
+/**
+ * Case-sensitive filter for combobox items
+ * Matches items with exact case matching
+ *
+ * @param nodes - Collection nodes to filter
+ * @param inputValue - Current filter text from input
+ * @returns Filtered collection nodes containing only items that match with exact case
+ *
+ * @example
+ * ```tsx
+ * <ComboBox.Root
+ *   items={programmingLanguages}
+ *   filter={filterByCaseSensitive}
+ *   placeholder="Case-sensitive search..."
+ * />
+ * ```
+ *
+ * **Behavior:**
+ * - Exact case matching (case-sensitive substring)
+ * - More precise than case-insensitive filtering
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Code/variable name search
+ * - File path filtering
+ * - Technical identifiers that are case-sensitive
+ */
+export declare function filterByCaseSensitive<T extends object>(nodes: Iterable<Node<T>>, inputValue: string): Iterable<Node<T>>;
+/**
+ * Word boundary filter for combobox items
+ * Matches items where input appears at word boundaries
+ *
+ * @param nodes - Collection nodes to filter
+ * @param inputValue - Current filter text from input
+ * @returns Filtered collection nodes where input matches at word boundaries
+ *
+ * @example
+ * ```tsx
+ * <ComboBox.Root
+ *   items={items}
+ *   filter={filterByWordBoundary}
+ *   placeholder="Search by word..."
+ * />
+ * ```
+ *
+ * **Behavior:**
+ * - Matches whole words or word beginnings
+ * - Case-insensitive
+ * - Input "eagle" matches "Bald Eagle" but not "beagle"
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Product search where partial words don't make sense
+ * - Name search with multiple words
+ * - Tag/category filtering
+ */
+export declare function filterByWordBoundary<T extends object>(nodes: Iterable<Node<T>>, inputValue: string): Iterable<Node<T>>;
+/**
+ * Fuzzy matching filter for combobox items
+ * Matches items where all input characters appear in order (but not necessarily consecutive)
+ *
+ * @param nodes - Collection nodes to filter
+ * @param inputValue - Current filter text from input
+ * @returns Filtered collection nodes that match the fuzzy pattern
+ *
+ * @example
+ * ```tsx
+ * <ComboBox.Root
+ *   items={items}
+ *   filter={filterByFuzzy}
+ *   placeholder="Fuzzy search..."
+ * />
+ * ```
+ *
+ * **Behavior:**
+ * - Case-insensitive fuzzy matching
+ * - Input "ble" matches "Bald Eagle"
+ * - All characters must appear in order, but can have gaps
+ * - More forgiving than substring matching
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Quick command/action selection
+ * - File/folder navigation
+ * - Large lists where users know approximate spelling
+ * - Abbreviated lookups (e.g., "nj" for "New Jersey")
+ */
+export declare function filterByFuzzy<T extends object>(nodes: Iterable<Node<T>>, inputValue: string): Iterable<Node<T>>;
+/**
+ * Creates a filter that searches across multiple object properties
+ * Useful when items have structured data with multiple searchable fields
+ *
+ * @param propertyPaths - Array of property paths to search (e.g., ['name', 'description', 'tags'])
+ * @returns A filter function that searches across specified properties
+ *
+ * @example
+ * ```tsx
+ * type Product = {
+ *   name: string;
+ *   category: string;
+ *   description: string;
+ * };
+ *
+ * const productFilter = createMultiPropertyFilter<Product>(['name', 'category', 'description']);
+ *
+ * <ComboBox.Root
+ *   items={products}
+ *   filter={productFilter}
+ *   placeholder="Search products..."
+ * >
+ *   {(item) => <ComboBox.Option textValue={item.name}>{item.name}</ComboBox.Option>}
+ * </ComboBox.Root>
+ * ```
+ *
+ * **Behavior:**
+ * - Searches all specified properties
+ * - Case-insensitive substring matching
+ * - Matches if ANY property contains the input
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Product catalogs with multiple searchable fields
+ * - User directories (search by name, email, department)
+ * - Document search (title, author, tags, content)
+ * - Complex data structures with nested properties
+ *
+ * **Note:** Uses node.value to access the original item data.
+ * If you need to search nested properties, use dot notation: 'address.city'
+ */
+export declare function createMultiPropertyFilter<T extends object>(propertyPaths: string[]): (nodes: Iterable<Node<T>>, inputValue: string) => Iterable<Node<T>>;
+/**
+ * Creates a filter with custom scoring/ranking logic
+ * Returns items sorted by relevance score (highest first)
+ *
+ * @param scoreFn - Function that returns a relevance score for each item (higher = more relevant)
+ * @returns A filter function that sorts results by score
+ *
+ * @example
+ * ```tsx
+ * // Prefer items that start with input, but also include substring matches
+ * const rankedFilter = createRankedFilter<SimpleOption>((node, inputValue) => {
+ *   const text = node.textValue.toLowerCase();
+ *   const input = inputValue.toLowerCase();
+ *
+ *   if (text.startsWith(input)) return 100; // Highest score for prefix match
+ *   if (text.includes(input)) return 50;    // Lower score for substring match
+ *   return 0;                               // No match
+ * });
+ *
+ * <ComboBox.Root
+ *   items={items}
+ *   filter={rankedFilter}
+ *   placeholder="Search..."
+ * />
+ * ```
+ *
+ * **Behavior:**
+ * - Applies custom scoring logic to each item
+ * - Filters out items with score <= 0
+ * - Sorts remaining items by score (descending)
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Search with relevance ranking
+ * - Prioritizing certain match types (prefix vs substring)
+ * - Boosting items based on metadata (popularity, recency, etc.)
+ * - Implementing search algorithms like TF-IDF
+ *
+ * **Score Guidelines:**
+ * - Return 0 or negative for non-matches (will be filtered out)
+ * - Higher scores = better matches
+ * - Consider using score ranges (e.g., 0-100) for consistent behavior
+ */
+export declare function createRankedFilter<T extends object>(scoreFn: (node: Node<T>, inputValue: string) => number): (nodes: Iterable<Node<T>>, inputValue: string) => Iterable<Node<T>>;
+/**
+ * Creates a filter that matches any of multiple input terms (OR logic)
+ * Splits input by spaces and matches if any term matches
+ *
+ * @param baseFilter - The underlying filter to use for each term (defaults to filterByText)
+ * @returns A filter function that matches any term
+ *
+ * @example
+ * ```tsx
+ * const multiTermFilter = createMultiTermFilter();
+ *
+ * <ComboBox.Root
+ *   items={items}
+ *   filter={multiTermFilter}
+ *   placeholder="Search (space-separated terms)..."
+ * />
+ * // Input "eagle bison" matches both "Bald Eagle" and "Bison"
+ * ```
+ *
+ * **Behavior:**
+ * - Splits input by whitespace
+ * - Matches if ANY term matches (OR logic)
+ * - Each term is filtered using the base filter
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Search with multiple keywords
+ * - Tag-based filtering (e.g., "react typescript")
+ * - Alternative spellings or synonyms
+ * - Flexible search where users enter multiple criteria
+ *
+ * **Note:** To require ALL terms to match (AND logic), consider chaining filters
+ * or implementing a custom filter function.
+ */
+export declare function createMultiTermFilter<T extends object>(baseFilter?: (nodes: Iterable<Node<T>>, inputValue: string) => Iterable<Node<T>>): (nodes: Iterable<Node<T>>, inputValue: string) => Iterable<Node<T>>;
+/**
+ * Creates a section-aware filter that preserves section structure
+ * Wraps a custom filter function to work with sections, hiding empty sections
+ *
+ * @param itemFilter - Filter function to apply to individual items
+ * @returns A filter function that preserves sections and hides empty ones
+ *
+ * @example
+ * ```tsx
+ * // Using with built-in filters
+ * const sectionAwareStartsWith = createSectionAwareFilter(
+ *   (nodes, input) => filterByStartsWith(nodes, input)
+ * );
+ *
+ * <ComboBox.Root
+ *   items={sectionsWithItems}
+ *   filter={sectionAwareStartsWith}
+ * >
+ *   {(section) => (
+ *     <ComboBox.Section title={section.name}>
+ *       {section.items.map((item) => (
+ *         <ComboBox.Option key={item.id} textValue={item.name}>
+ *           {item.name}
+ *         </ComboBox.Option>
+ *       ))}
+ *     </ComboBox.Section>
+ *   )}
+ * </ComboBox.Root>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Using with custom filter logic
+ * const customSectionFilter = createSectionAwareFilter(
+ *   (nodes, input) => {
+ *     const lowerInput = input.toLowerCase();
+ *     const filtered: Node<T>[] = [];
+ *     for (const node of nodes) {
+ *       // Custom filtering logic
+ *       if (node.textValue.toLowerCase().startsWith(lowerInput)) {
+ *         filtered.push(node);
+ *       }
+ *     }
+ *     return filtered;
+ *   }
+ * );
+ * ```
+ *
+ * **Behavior:**
+ * - Applies the item filter to items within each section
+ * - Preserves section nodes in the output
+ * - Automatically hides sections that have no matching items
+ * - Returns all nodes when input is empty
+ *
+ * **Use Cases:**
+ * - Categorized combobox options (Animals → Mammals, Birds, etc.)
+ * - Grouped data where sections provide context
+ * - Multi-level hierarchies that need filtering
+ * - Search where maintaining visual grouping is important
+ *
+ * **Important Notes:**
+ * - The item filter receives ONLY item nodes (not section nodes)
+ * - Section nodes are detected by checking node.type === "section"
+ * - Empty sections are automatically excluded from results
+ * - Section order is preserved from the original collection
+ *
+ * **Performance:**
+ * - Filters items separately for each section
+ * - More efficient than flat filtering for large datasets with many sections
+ */
+export declare function createSectionAwareFilter<T extends object>(itemFilter: (nodes: Iterable<Node<T>>, inputValue: string) => Iterable<Node<T>>): (nodes: Iterable<Node<T>>, inputValue: string) => Iterable<Node<T>>;

package/dist/components/combobox/utils/selection.d.ts

@@ -0,0 +1,10 @@
+import { Key } from 'react-stately';
+/**
+ * Normalize selectedKeys to Set format
+ */
+export declare const normalizeSelectedKeys: (keys: Key | Key[] | undefined | null) => Set<Key>;
+/**
+ * Denormalize selectedKeys from Set to array
+ * Always returns an array regardless of selection mode for simpler API
+ */
+export declare const denormalizeSelectedKeys: (keys: Set<Key>) => Key[];

package/dist/components/combobox/utils/test-data.d.ts

@@ -0,0 +1,6 @@
+/** most basic option */
+export type SimpleOption = {
+    name: string;
+    id: number;
+};
+export declare const simpleOptions: SimpleOption[];

package/dist/components/combobox/utils/test-utils.d.ts

@@ -0,0 +1,30 @@
+import { ComboBoxRootProps } from '../combobox.types';
+export declare function ComposedComboBox<T extends object>(props: ComboBoxRootProps<T>): import("react/jsx-runtime").JSX.Element;
+/** Initial Pokemomn API return type */
+export type Pokemon = {
+    name: string;
+    url: string;
+};
+/** Pokemon API Details return type */
+export type PokemonDetails = {
+    id: number;
+    name: string;
+    sprites: {
+        front_default: string;
+    };
+    types: Array<{
+        type: {
+            name: string;
+        };
+    }>;
+    height: number;
+    weight: number;
+    base_experience: number;
+};
+/**
+ * Reusable Pokemon option component that displays detailed information.
+ * Fetches full Pokemon details on mount and displays sprite, name, types, and stats.
+ */
+export declare const PokemonOption: ({ pokemon }: {
+    pokemon: Pokemon;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/combobox.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/combobox-B2nkVE2H.cjs.js");exports.ComboBox=o.ComboBox;
+"use strict";const o=require("../chunks/combobox-D_L2EmTy.cjs.js");exports.ComboBox=o.ComboBox;
 //# sourceMappingURL=combobox.cjs.map

package/dist/components/combobox.es.js

@@ -1,4 +1,4 @@
-import { C as r } from "../chunks/combobox-COyroO64.es.js";
+import { C as r } from "../chunks/combobox-B30crY-T.es.js";
 export {
   r as ComboBox
 };

package/dist/components/components.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/accordion.content-DwLtYzIy.cjs.js");exports.AccordionContent=o.AccordionContent;exports.AccordionHeader=o.AccordionHeader;exports.AccordionHeaderRightContent=o.AccordionHeaderRightContent;exports.AccordionItem=o.AccordionItem;exports.AccordionRoot=o.AccordionRoot;
+"use strict";const o=require("../chunks/accordion.content-DBBMLq5x.cjs.js");exports.AccordionContent=o.AccordionContent;exports.AccordionHeader=o.AccordionHeader;exports.AccordionHeaderRightContent=o.AccordionHeaderRightContent;exports.AccordionItem=o.AccordionItem;exports.AccordionRoot=o.AccordionRoot;
 //# sourceMappingURL=components.cjs.map

package/dist/components/components.es.js

@@ -1,4 +1,4 @@
-import { c as n, b as r, d as a, a as d, A as e } from "../chunks/accordion.content-C8iYlvoi.es.js";
+import { c as n, b as r, d as a, a as d, A as e } from "../chunks/accordion.content-DR_1dtdK.es.js";
 export {
   n as AccordionContent,
   r as AccordionHeader,

package/dist/components/data-table/components/data-table.body.d.ts

@@ -5,6 +5,6 @@ import { DataTableBodyProps, DataTableRowItem } from '../data-table.types';
  * @supportsStyleProps
  */
 export declare const DataTableBody: {
-    <T extends DataTableRowItem = DataTableRowItem>({ ref, ...props }: DataTableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends DataTableRowItem = DataTableRowItem>({ ref, "aria-label": ariaLabelProp, ...props }: DataTableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/data-table/components/data-table.context.d.ts

@@ -1,3 +1,5 @@
-import { DataTableContextValue } from '../data-table.types';
+import { DataTableContextValue, CustomSettingsContextValue } from '../data-table.types';
 export declare const DataTableContext: import('react').Context<DataTableContextValue<Record<string, unknown>> | null>;
+export declare const CustomSettingsContext: import('react').Context<CustomSettingsContextValue | null>;
 export declare const useDataTableContext: <T extends object = Record<string, unknown>>() => DataTableContextValue<T>;
+export declare const useCustomSettingsContext: () => CustomSettingsContextValue;

package/dist/components/data-table/components/data-table.header.d.ts

@@ -5,6 +5,6 @@ import { DataTableHeaderProps, DataTableColumnItem } from '../data-table.types';
  * @supportsStyleProps
  */
 export declare const DataTableHeader: {
-    <T extends DataTableColumnItem = DataTableColumnItem>({ ref, ...props }: DataTableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends DataTableColumnItem = DataTableColumnItem>({ ref, "aria-label": ariaLabelProp, ...props }: DataTableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/data-table/components/data-table.table.d.ts

@@ -5,6 +5,6 @@ import { DataTableTableSlotProps } from '../data-table.types';
  * @supportsStyleProps
  */
 export declare const DataTableTable: {
-    ({ ref: forwardedRef, children, ...props }: DataTableTableSlotProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref: forwardedRef, children, "aria-label": ariaLabelProp, ...props }: DataTableTableSlotProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/components/data-table/components/index.d.ts

@@ -7,4 +7,4 @@ export { DataTableRow } from './data-table.row';
 export { DataTableCell } from './data-table.cell';
 export { DataTableFooter } from './data-table.footer';
 export { DataTableManager } from './data-table.manager';
-export { DataTableContext, useDataTableContext } from './data-table.context';
+export { DataTableContext, useDataTableContext, useCustomSettingsContext, } from './data-table.context';

package/dist/components/data-table/data-table.d.ts

@@ -42,7 +42,7 @@ export declare const DataTable: (({ ref: forwardedRef, footer, ...props }: DataT
      * ```
      */
     Table: {
-        ({ ref: forwardedRef, children, ...props }: import('./data-table.types').DataTableTableSlotProps): import("react/jsx-runtime").JSX.Element;
+        ({ ref: forwardedRef, children, "aria-label": ariaLabelProp, ...props }: import('./data-table.types').DataTableTableSlotProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**
@@ -62,7 +62,7 @@ export declare const DataTable: (({ ref: forwardedRef, footer, ...props }: DataT
      * ```
      */
     Header: {
-        <T extends import('./data-table.types').DataTableColumnItem = import('./data-table.types').DataTableColumnItem>({ ref, ...props }: import('./data-table.types').DataTableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
+        <T extends import('./data-table.types').DataTableColumnItem = import('./data-table.types').DataTableColumnItem>({ ref, "aria-label": ariaLabelProp, ...props }: import('./data-table.types').DataTableHeaderProps<T>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**
@@ -101,7 +101,7 @@ export declare const DataTable: (({ ref: forwardedRef, footer, ...props }: DataT
      * ```
      */
     Body: {
-        <T extends import('./data-table.types').DataTableRowItem = import('./data-table.types').DataTableRowItem>({ ref, ...props }: import('./data-table.types').DataTableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
+        <T extends import('./data-table.types').DataTableRowItem = import('./data-table.types').DataTableRowItem>({ ref, "aria-label": ariaLabelProp, ...props }: import('./data-table.types').DataTableBodyProps<T>): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
     /**

package/dist/components/data-table/data-table.i18n.d.ts

@@ -154,4 +154,9 @@ export declare const messages: {
         description: string;
         defaultMessage: string;
     };
+    settingsTabsAriaLabel: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
 };

package/dist/components/data-table/data-table.messages.d.ts

@@ -0,0 +1,6 @@
+import { LocalizedString, LocalizedStrings } from '@internationalized/string';
+export declare const dataTableMessagesStrings: LocalizedStrings<string, LocalizedString>;
+/**
+ * Available message keys for DataTable component
+ */
+export type DataTableMessageKey = "comfortable" | "comfortableAriaLabel" | "compact" | "compactAriaLabel" | "dataTable" | "dataTableBody" | "dataTableHeader" | "expandRows" | "fullText" | "fullTextAriaLabel" | "hiddenColumns" | "hiddenColumnsAriaLabel" | "hideColumn" | "layoutSettings" | "layoutSettingsAriaLabel" | "noHiddenColumns" | "pinRows" | "reset" | "resizeColumn" | "rowDensity" | "rowDensityAriaLabel" | "searchHiddenColumns" | "selectRow" | "settings" | "settingsTabsAriaLabel" | "textPreviews" | "textPreviewsAriaLabel" | "textVisibility" | "textVisibilityAriaLabel" | "visibleColumns" | "visibleColumnsAria" | "visibleColumnsList";

package/dist/components/data-table/data-table.recipe.d.ts

@@ -2,7 +2,7 @@
  * Slot recipe configuration for the DataTable component.
  * Defines the styling variants, base styles, and slots using Chakra UI's slot recipe system.
  */
-export declare const dataTableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"table" | "root" | "body" | "footer" | "header" | "cell" | "column" | "row" | "selectionCell" | "expandButton" | "nestedIcon" | "headerSortIcon" | "columnResizer", {
+export declare const dataTableSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"table" | "root" | "body" | "footer" | "header" | "cell" | "row" | "column" | "selectionCell" | "expandButton" | "nestedIcon" | "headerSortIcon" | "columnResizer", {
     truncated: {
         true: {
             root: {

package/dist/components/data-table/data-table.types.d.ts

@@ -50,11 +50,16 @@ export type DataTableRowItem<T extends object = Record<string, unknown>> = T & {
     [key: string]: unknown;
 };
 export type DataTableDensity = "default" | "condensed";
+export type DataTableCustomSettings = {
+    icon?: ReactNode;
+    label: ReactNode;
+    panel: ReactNode;
+};
 export type DataTableContextValue<T extends object = Record<string, unknown>> = {
     columns: DataTableColumnItem<T>[];
     rows: DataTableRowItem<T>[];
     visibleColumns?: string[];
-    onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | undefined) => void;
+    onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | string | undefined) => void;
     renderEmptyState?: RaTableBodyProps<T>["renderEmptyState"];
     search?: string;
     sortDescriptor?: SortDescriptor;
@@ -87,6 +92,9 @@ export type DataTableContextValue<T extends object = Record<string, unknown>> =
     onColumnsChange?: (columns: DataTableColumnItem<T>[]) => void;
     onVisibilityChange?: (visibleColumnIds: string[]) => void;
 };
+export type CustomSettingsContextValue = {
+    customSettings?: DataTableCustomSettings;
+};
 type DataTableVariantProps = OmitInternalProps<DataTableRootSlotProps, "columns" | "rows">;
 export type DataTableProps<T extends object = Record<string, unknown>> = Omit<DataTableVariantProps, "truncated"> & {
     /**
@@ -126,7 +134,8 @@ export type DataTableProps<T extends object = Record<string, unknown>> = Omit<Da
     defaultPinnedRows?: Set<string>;
     onPinToggle?: (rowId: string) => void;
     onColumnsChange?: (columns: DataTableColumnItem<T>[]) => void;
-    onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | undefined) => void;
+    onSettingsChange?: (action: (typeof UPDATE_ACTIONS)[keyof typeof UPDATE_ACTIONS] | string | undefined) => void;
+    customSettings?: DataTableCustomSettings;
 };
 /**Combined props for the TableHeader element (Chakra styles + Aria behavior). */
 export type DataTableHeaderProps<T extends DataTableColumnItem> = RaTableHeaderProps<T> & DataTableHeaderSlotProps & {

package/dist/components/data-table/intl/de.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Pre-compiled de messages for DataTable
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    comfortable: string;
+    comfortableAriaLabel: string;
+    compact: string;
+    compactAriaLabel: string;
+    dataTable: string;
+    dataTableBody: string;
+    dataTableHeader: string;
+    expandRows: string;
+    fullText: string;
+    fullTextAriaLabel: string;
+    hiddenColumns: string;
+    hiddenColumnsAriaLabel: string;
+    hideColumn: string;
+    layoutSettings: string;
+    layoutSettingsAriaLabel: string;
+    noHiddenColumns: string;
+    pinRows: string;
+    reset: string;
+    resizeColumn: string;
+    rowDensity: string;
+    rowDensityAriaLabel: string;
+    searchHiddenColumns: string;
+    selectRow: string;
+    settings: string;
+    settingsTabsAriaLabel: string;
+    textPreviews: string;
+    textPreviewsAriaLabel: string;
+    textVisibility: string;
+    textVisibilityAriaLabel: string;
+    visibleColumns: string;
+    visibleColumnsAria: string;
+    visibleColumnsList: string;
+};
+export default _default;

package/dist/components/data-table/intl/en.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Pre-compiled en messages for DataTable
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    comfortable: string;
+    comfortableAriaLabel: string;
+    compact: string;
+    compactAriaLabel: string;
+    dataTable: string;
+    dataTableBody: string;
+    dataTableHeader: string;
+    expandRows: string;
+    fullText: string;
+    fullTextAriaLabel: string;
+    hiddenColumns: string;
+    hiddenColumnsAriaLabel: string;
+    hideColumn: string;
+    layoutSettings: string;
+    layoutSettingsAriaLabel: string;
+    noHiddenColumns: string;
+    pinRows: string;
+    reset: string;
+    resizeColumn: string;
+    rowDensity: string;
+    rowDensityAriaLabel: string;
+    searchHiddenColumns: string;
+    selectRow: string;
+    settings: string;
+    settingsTabsAriaLabel: string;
+    textPreviews: string;
+    textPreviewsAriaLabel: string;
+    textVisibility: string;
+    textVisibilityAriaLabel: string;
+    visibleColumns: string;
+    visibleColumnsAria: string;
+    visibleColumnsList: string;
+};
+export default _default;