@servicetitan/anvil2 2.0.4 → 2.2.0

package/dist/beta/components/MultiSelectField/types.d.ts

@@ -13,9 +13,11 @@ export type MultiSelectFieldCacheOptions = {
 /**
  * Imperative handle for the MultiSelectField component.
  * @property clearCache - Clears the options cache.
+ * @property invalidate - Clears the cache and triggers a fresh options load from the data source.
  */
 export type MultiSelectFieldHandle = {
     clearCache: () => void;
+    invalidate: () => void;
 };
 export type MultiSelectFieldGroupByValue = SelectFieldGroupByValue;
 export type MultiSelectFieldOption = SelectFieldOption;
@@ -134,10 +136,10 @@ type MultiSelectFieldCommonProps = {
      */
     displayMenuAs?: "auto" | "popover" | "dialog";
     /**
-     * Error state for the field. Can be a boolean, string message, or ReactElement.
-     * When truthy, displays error styling and message.
+     * Error state for the field. Pass `true` to indicate error styling without a message.
+     * Pass a string, string[], or ReactElement (deprecated) for error messages.
      */
-    error?: ReactElement | string | boolean;
+    error?: boolean | string | ReactElement | string[];
     /**
      * Visually hides the label while keeping it accessible to screen readers.
      * @default false
@@ -157,10 +159,13 @@ type MultiSelectFieldCommonProps = {
      */
     description?: ReactElement | string;
     /**
-     * aria-live behavior for error messages.
-     * @default "assertive"
+     * @deprecated No longer used. Error messages always use `aria-live="assertive"`.
      */
     errorAriaLive?: AriaAttributes["aria-live"];
+    /**
+     * Warning message(s) to display. Supports a single string or an array of strings.
+     */
+    warning?: string | string[];
     /**
      * Whether the field is required. Shows a red asterisk (*) next to the label.
      */
@@ -185,7 +190,11 @@ type MultiSelectFieldCommonProps = {
     suffix?: string | ReactElement;
     /**
      * Configuration for the "Select All" option at the top of the list.
-     * When provided, a "Select All" option will be shown.
+     * When provided, a "Select All" option will be shown while the search input is empty.
+     *
+     * Select All and Select Filtered are mutually exclusive:
+     * - Select All is shown when the search input is empty.
+     * - Select Filtered (if provided) is shown when a search term is active.
      */
     selectAll?: {
         /**
@@ -199,10 +208,39 @@ type MultiSelectFieldCommonProps = {
          */
         onClick: () => void;
         /**
-         * isChecked state for the "Select All" option.
+         * Check state for the "Select All" option.
          * @default false
          */
-        isChecked: boolean | CheckState;
+        checkState: boolean | CheckState;
+    };
+    /**
+     * Function that receives the current search value and returns configuration for
+     * the "Select Filtered" option at the top of the list.
+     *
+     * When provided and a search term is active, a "Select Filtered" option will be shown
+     * instead of "Select All". This allows selecting all options matching the current filter.
+     *
+     * Select All and Select Filtered are mutually exclusive:
+     * - Select All (if provided) is shown when the search input is empty.
+     * - Select Filtered is shown when a search term is active.
+     *
+     * @param searchValue - The current search input value
+     * @returns Configuration object with label, onClick, and checkState
+     *
+     * @example
+     * selectFiltered={(searchValue) => ({
+     *   label: `Select items matching "${searchValue}"`,
+     *   onClick: () => handleSelectFiltered(searchValue),
+     *   checkState: allFilteredSelected ? "checked" : "unchecked",
+     * })}
+     */
+    selectFiltered?: (searchValue: string) => {
+        /** The label to display. @default `Select items matching "${searchValue}"` */
+        label?: string;
+        /** Callback when clicked. */
+        onClick: () => void;
+        /** Check state for the option. */
+        checkState: boolean | CheckState;
     };
     /**
      * When true, restricts the field to a single row height.
@@ -224,6 +262,12 @@ type MultiSelectFieldCommonProps = {
      * Custom inline styles for the wrapper element.
      */
     style?: CSSProperties;
+    /**
+     * Whether to virtualize the dropdown list using windowed rendering.
+     * Enable this for large option sets to improve performance by only rendering visible items.
+     * @default false
+     */
+    virtualize?: boolean;
 } & MultiSelectFieldSearchProps & LayoutUtilProps;
 type MultiSelectFieldGroupingProps = {
     /**

package/dist/beta/components/SelectField/SelectFieldSync.d.ts

@@ -1,13 +1,19 @@
 import { MatchSorterOptions } from 'match-sorter';
 import { SelectFieldProps, SelectFieldOption, SelectFieldGroupByValue } from './types';
+type FilterFn = (options: SelectFieldOption[], searchValue: string) => SelectFieldOption[];
 export type SelectFieldSyncProps = Omit<SelectFieldProps, "loadOptions" | "lazy" | "debounceMs" | "cache" | "initialLoad"> & {
     /**
      * The options to display in the select field.
      */
     options: SelectFieldOption[];
     /**
-     * The filter to use to filter the options.
-     * Can be a function to filter the options, or a MatchSorterOptions object to customize the default filtering.
+     * Controls how options are filtered and sorted when the user types a search value.
+     * Can be a function that returns options in the desired display order,
+     * or a MatchSorterOptions object to customize the default match-sorter behavior.
+     *
+     * Before any search is performed, options appear in the order they are supplied.
+     * By default, options are filtered by `label` and `searchText` using match-sorter,
+     * which also ranks results by match quality (best matches first).
      *
      * @example
      * <SelectFieldSync
@@ -25,7 +31,7 @@ export type SelectFieldSyncProps = Omit<SelectFieldProps, "loadOptions" | "lazy"
      *   filter={{ keys: ["label"] }}
      * />
      */
-    filter?: ((options: SelectFieldOption[], searchValue: string) => SelectFieldOption[]) | MatchSorterOptions;
+    filter?: FilterFn | MatchSorterOptions<SelectFieldOption>;
     /**
      * Function to compare two group values for sorting.
      * When provided, options are sorted by group using this comparator,
@@ -47,3 +53,4 @@ export type SelectFieldSyncProps = Omit<SelectFieldProps, "loadOptions" | "lazy"
  * - Supports all the other props of SelectField.
  */
 export declare const SelectFieldSync: (props: SelectFieldSyncProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/beta/components/SelectField/internal/FieldListBase.d.ts

@@ -1,14 +1,18 @@
 import { UseComboboxPropGetters } from 'downshift';
 import { SelectFieldDownshiftItem } from '../types';
-import { CSSProperties } from 'react';
+import { CSSProperties, MutableRefObject } from 'react';
 import { CheckState } from '../../../../types';
 import { SectionMeta } from './types';
+export type FieldListBaseHandle = {
+    scrollToTop: () => void;
+};
 export type FieldListBaseProps = {
     isOpen: boolean;
     items: SelectFieldDownshiftItem[];
     getMenuProps: UseComboboxPropGetters<SelectFieldDownshiftItem>["getMenuProps"];
     getItemProps: UseComboboxPropGetters<SelectFieldDownshiftItem>["getItemProps"];
     highlightedIndex: number;
+    highlightChangeTypeRef?: MutableRefObject<string>;
     getCheckedState: (item: SelectFieldDownshiftItem) => CheckState;
     selectionType: "single" | "multiple";
     hasMore: boolean;
@@ -21,7 +25,4 @@ export type FieldListBaseProps = {
     style?: CSSProperties;
     sectionsMeta?: SectionMeta[];
 };
-export declare const FieldListBase: {
-    ({ isOpen, items, getMenuProps, getItemProps, highlightedIndex, getCheckedState, selectionType, hasMore, onLoadMore, loading, loadingMore, disableAutoLoadMore, disabled, className, style, sectionsMeta, }: FieldListBaseProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const FieldListBase: import('react').ForwardRefExoticComponent<FieldListBaseProps & import('react').RefAttributes<FieldListBaseHandle>>;

package/dist/beta/components/SelectField/internal/SelectFieldList.d.ts

@@ -1,6 +1,6 @@
 import { SelectFieldDownshiftItem, SelectFieldOption } from '../types';
 import { UseComboboxPropGetters } from 'downshift';
-import { CSSProperties } from 'react';
+import { CSSProperties, MutableRefObject } from 'react';
 import { SectionMeta } from './types';
 type GetMenuProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getMenuProps"];
 type GetItemProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getItemProps"];
@@ -10,6 +10,7 @@ export type SelectFieldListProps = {
     getMenuProps: GetMenuProps;
     getItemProps: GetItemProps;
     highlightedIndex: number;
+    highlightChangeTypeRef?: MutableRefObject<string>;
     selectedOption: SelectFieldOption | null;
     hasMore: boolean;
     onLoadMore: () => void;
@@ -20,9 +21,10 @@ export type SelectFieldListProps = {
     className?: string;
     style?: CSSProperties;
     sectionsMeta?: SectionMeta[];
+    virtualize?: boolean;
 };
 export declare const SelectFieldList: {
-    ({ selectedOption, ...rest }: SelectFieldListProps): import("react/jsx-runtime").JSX.Element;
+    ({ selectedOption, virtualize, ...rest }: SelectFieldListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/beta/components/SelectField/internal/SelectFieldListItem.d.ts

@@ -10,6 +10,7 @@ export type SelectFieldListItemProps = {
     getItemProps: GetItemProps;
     selectionType: "single" | "multiple";
     checked: CheckState;
+    isListScrolled?: boolean;
 };
-export declare const SelectFieldListItem: ({ item, index, highlighted, disabled, getItemProps, selectionType, checked, }: SelectFieldListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFieldListItem: ({ item, index, highlighted, disabled, getItemProps, selectionType, checked, isListScrolled, }: SelectFieldListItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/beta/components/SelectField/internal/VirtualizedFieldListBase.d.ts

@@ -0,0 +1,2 @@
+import { FieldListBaseProps, FieldListBaseHandle } from './FieldListBase';
+export declare const VirtualizedFieldListBase: import('react').ForwardRefExoticComponent<FieldListBaseProps & import('react').RefAttributes<FieldListBaseHandle>>;

package/dist/beta/components/SelectField/internal/useCombo.d.ts

@@ -16,11 +16,12 @@ export type UseComboOptions = {
     displayAs: "popover" | "dialog";
     disableHighlightOnOpen?: boolean;
     disabled: boolean;
+    virtualize?: boolean;
 } & Pick<UseComboboxProps<SelectFieldDownshiftItem>, "onInputValueChange" | "onIsOpenChange">;
 /**
  * The purpose of useCombo is to provide an abstraction over the downshift combobox hook.
  */
-export declare const useCombo: ({ options, pinned, groupToString, groupSorter, selectAll, selectedOption, onSelectedOptionChange, onInputValueChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, }: UseComboOptions) => {
+export declare const useCombo: ({ options, pinned, groupToString, groupSorter, selectAll, selectedOption, onSelectedOptionChange, onInputValueChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, virtualize, }: UseComboOptions) => {
     inputValue: string;
     wrapperDivRef: import('react').RefObject<HTMLDivElement>;
     getToggleButtonProps: <Options>(options?: import('downshift').UseComboboxGetToggleButtonPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseComboboxGetToggleButtonPropsReturnValue, Options>;
@@ -29,6 +30,7 @@ export declare const useCombo: ({ options, pinned, groupToString, groupSorter, s
     getInputProps: <Options>(options?: import('downshift').UseComboboxGetInputPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseComboboxGetInputPropsReturnValue, Options>;
     getItemProps: <Options>(options: import('downshift').UseComboboxGetItemPropsOptions<SelectFieldDownshiftItem> & Options) => Omit<import('downshift').Overwrite<import('downshift').UseComboboxGetItemPropsReturnValue, Options>, "item" | "index">;
     highlightedIndex: number;
+    highlightChangeTypeRef: import('react').MutableRefObject<string>;
     isOpen: boolean;
     downshiftItems: SelectFieldDownshiftItem[];
     sectionsMeta: SectionMeta[];

package/dist/beta/components/SelectField/internal/useFieldListSections.d.ts

@@ -0,0 +1,55 @@
+import { SelectFieldDownshiftItem } from '../types';
+import { SectionMeta } from './types';
+export type SectionItem = {
+    item: SelectFieldDownshiftItem;
+    index: number;
+};
+export type PinnedSection = {
+    type: "pinned";
+    label: string;
+    items: SectionItem[];
+    loading?: boolean;
+};
+export type GroupSection = {
+    type: "group";
+    label: string;
+    items: SectionItem[];
+};
+export type FlatSection = {
+    type: "flat";
+    items: SectionItem[];
+};
+export type Section = PinnedSection | GroupSection | FlatSection;
+export type VirtualRow = {
+    type: "item";
+    item: SelectFieldDownshiftItem;
+    downshiftIndex: number;
+} | {
+    type: "header";
+    label: string;
+    sectionIndex: number;
+} | {
+    type: "divider";
+    sectionIndex: number;
+} | {
+    type: "load-more";
+};
+/**
+ * Computes grouped sections from a flat items array and section metadata.
+ * @param items - The flat downshift items array
+ * @param sectionsMeta - Section metadata describing pinned/group ranges
+ * @returns Grouped sections for rendering
+ */
+export declare const useFieldListSections: (items: SelectFieldDownshiftItem[], sectionsMeta: SectionMeta[]) => Section[];
+/**
+ * Flattens grouped sections into a linear list of virtual rows for virtualization,
+ * and builds a mapping from downshift item index to virtual row index.
+ * @param sections - The grouped sections from useFieldListSections
+ * @param hasMore - Whether there are more items to load
+ * @returns The flat virtual row list and a downshift-to-virtual index mapping
+ */
+export declare function flattenSectionsToVirtualRows(sections: Section[], hasMore: boolean): {
+    virtualRows: VirtualRow[];
+    downshiftIndexToVirtualRowIndex: Record<number, number>;
+    stickyIndices: number[];
+};

package/dist/beta/components/SelectField/stories/SelectField.stories.data.d.ts

@@ -30,3 +30,4 @@ export declare const simulateFetchingGroupedBooks: (groupBy: GroupByField) => (s
     options: SelectFieldGroupedOption[];
     hasMore: boolean;
 }>;
+export declare const richContentOptions: SelectFieldOption[];

package/dist/beta/components/SelectField/types.d.ts

@@ -1,5 +1,6 @@
 import { AriaAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
 import { CheckState, LayoutUtilProps, Size } from '../../../types';
+import { AvatarProps, ChipProps, IconProps } from '../../..';
 /**
  * Configuration options for the SelectField cache.
  * @property enabled - Whether caching is enabled. Defaults to true.
@@ -12,9 +13,11 @@ export type SelectFieldCacheOptions = {
 /**
  * Imperative handle for the SelectField component.
  * @property clearCache - Clears the options cache.
+ * @property invalidate - Clears the cache and triggers a fresh options load from the data source.
  */
 export type SelectFieldHandle = {
     clearCache: () => void;
+    invalidate: () => void;
 };
 export type SelectFieldGroupByValue = string | number;
 export type SelectFieldOption = {
@@ -27,6 +30,12 @@ export type SelectFieldOption = {
     content?: {
         title?: string;
         description?: string;
+        chips?: Pick<ChipProps, "label" | "color" | "textWrap">[];
+        avatar?: Pick<AvatarProps, "name" | "status" | "color" | "image">;
+        icon?: Pick<IconProps, "svg" | "color"> & {
+            /** Accessible label for the icon. When omitted, the icon is treated as decorative. */
+            label?: string;
+        };
     };
 };
 export type SelectFieldGroupedOption = SelectFieldOption & {
@@ -164,10 +173,10 @@ type SelectFieldCommonSelectFieldProps = {
      */
     displayMenuAs?: "auto" | "popover" | "dialog";
     /**
-     * Error state for the field. Can be a boolean, string message, or ReactElement.
-     * When truthy, displays error styling and message.
+     * Error state for the field. Pass `true` to indicate error styling without a message.
+     * Pass a string, string[], or ReactElement (deprecated) for error messages.
      */
-    error?: ReactElement | string | boolean;
+    error?: boolean | string | ReactElement | string[];
     /**
      * Visually hides the label while keeping it accessible to screen readers.
      * @default false
@@ -187,10 +196,13 @@ type SelectFieldCommonSelectFieldProps = {
      */
     description?: ReactElement | string;
     /**
-     * aria-live behavior for error messages.
-     * @default "assertive"
+     * @deprecated No longer used. Error messages always use `aria-live="assertive"`.
      */
     errorAriaLive?: AriaAttributes["aria-live"];
+    /**
+     * Warning message(s) to display. Supports a single string or an array of strings.
+     */
+    warning?: string | string[];
     /**
      * Whether the field is required. Shows a red asterisk (*) next to the label.
      */
@@ -221,6 +233,12 @@ type SelectFieldCommonSelectFieldProps = {
      * Custom inline styles for the wrapper element.
      */
     style?: CSSProperties;
+    /**
+     * Whether to virtualize the dropdown list using windowed rendering.
+     * Enable this for large option sets to improve performance by only rendering visible items.
+     * @default false
+     */
+    virtualize?: boolean;
 } & SelectFieldSearchProps & SelectFieldAddNewOptionProps & LayoutUtilProps;
 type SelectFieldGroupingProps = {
     /**
@@ -308,7 +326,7 @@ export type SelectFieldPropsLazy = SelectFieldPropsLazyPage | SelectFieldPropsLa
 export type SelectFieldProps = SelectFieldPropsLazy | SelectFieldPropsEager;
 export type SelectFieldDownshiftItem = {
     id: string | number;
-    type: "option" | "pinned-option" | "grouped-option" | "select-all";
+    type: "option" | "pinned-option" | "grouped-option" | "select-all" | "select-filtered";
     original: SelectFieldOption;
     disabled?: boolean;
     checkState?: CheckState;

package/dist/beta/components/Table/DataTable/internal/editable-cells/DataTableEditableNumberCell.d.ts

@@ -0,0 +1,7 @@
+import { EditableCellImperativeHandle, BaseEditableCellProps } from './types';
+export type DataTableEditableNumberCellProps<T> = BaseEditableCellProps<T>;
+export declare const DataTableEditableNumberCell: (<T>(props: DataTableEditableNumberCellProps<T> & {
+    ref?: React.Ref<EditableCellImperativeHandle>;
+}) => React.ReactElement) & {
+    displayName: string;
+};

package/dist/beta/components/Table/DataTable/internal/util/getTanStackColumnDef.d.ts

@@ -3,6 +3,7 @@ import { ColumnDef } from '../../../types';
 declare module "@tanstack/react-table" {
     interface ColumnMeta<TData, TValue> {
         editMode?: ColumnDef<TData>["editMode"];
+        editConfig?: ColumnDef<TData>["editConfig"];
         onChange?: ColumnDef<TData>["onChange"];
         options?: ColumnDef<TData>["options"];
         /**

package/dist/beta/components/Table/DataTable/stories/DataTable.story-data.d.ts

@@ -22,6 +22,7 @@ export type Category = "electronics" | "clothing" | "home" | "garden" | "other";
 export type EditableTableStoryData = {
     id?: string;
     note?: string;
+    amount?: number;
     status?: Status;
     payment_type: "credit_card" | "cash" | "bank_transfer" | "check" | "paypal";
     categories: Category[];

package/dist/beta/components/Table/createColumnHelper.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { ColumnDef, ColumnTypeConfig, TextEditConfig, SelectEditConfig, MultiselectEditConfig } from './types';
+import { ColumnDef, ColumnTypeConfig, TextEditConfig, NumberEditConfig, SelectEditConfig, MultiselectEditConfig, TableRow } from './types';
 /**
  * Utility type that extracts the element type from an array type
  */
@@ -45,7 +45,10 @@ type BaseColumnConfig<T, K extends keyof T> = {
      * The function to customize how the cell content is rendered.
      * When using `type`, a default renderer is provided but can be overridden.
      */
-    renderCell?: (value: T[K], rowDepth: number) => ReactNode;
+    renderCell?: (value: T[K], { row, depth }: {
+        row?: TableRow<T>;
+        depth?: number;
+    }) => ReactNode;
     /**
      * Whether the column is sortable, or a function to customize the sorting logic
      */
@@ -66,15 +69,25 @@ type ReadOnlyColumnConfig<T, K extends keyof T> = BaseColumnConfig<T, K> & {
     options?: never;
 };
 /**
- * Configuration for text editable columns using editConfig
- * Valid when T[K] is a string, number, or boolean type
+ * Configuration for text editable columns using editConfig.
+ * Valid when T[K] is a string. Also permits booleans (until we add a boolean editable column type)
  */
-type TextEditConfigColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends string | number | boolean ? BaseColumnConfig<T, K> & {
+type TextEditConfigColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends string | boolean ? BaseColumnConfig<T, K> & {
     editConfig: TextEditConfig<T, K>;
     editMode?: undefined;
     onChange?: undefined;
     options?: undefined;
 } : never;
+/**
+ * Configuration for number editable columns using editConfig.
+ * Valid when T[K] is a number type.
+ */
+type NumberEditConfigColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends number ? BaseColumnConfig<T, K> & {
+    editConfig: NumberEditConfig<T, K>;
+    editMode?: undefined;
+    onChange?: undefined;
+    options?: undefined;
+} : never;
 /**
  * Configuration for select editable columns using editConfig
  */
@@ -95,10 +108,11 @@ type MultiselectEditConfigColumnConfig<T, K extends keyof T> = NonNullable<T[K]>
     options?: undefined;
 } : never;
 /**
- * Configuration for text editable columns (legacy)
+ * Configuration for text editable columns (legacy).
+ * Valid when T[K] is a string. Also permits booleans (until we add a boolean editable column type)
  * @deprecated Use editConfig instead: `editConfig: { mode: "text", onChange: ... }`
  */
-type TextEditableColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends string | number | boolean ? BaseColumnConfig<T, K> & {
+type TextEditableColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends string | boolean ? BaseColumnConfig<T, K> & {
     editConfig?: undefined;
     editMode: "text";
     onChange?: (value: string, rowId: string) => void;
@@ -135,14 +149,15 @@ type MultiselectEditableColumnConfig<T, K extends keyof T> = NonNullable<T[K]> e
  * Includes both new editConfig-based and legacy editMode-based configs.
  * TypeScript will enforce that the editMode/editConfig matches the value type constraints.
  */
-type ColumnConfig<T, K extends keyof T> = ReadOnlyColumnConfig<T, K> | TextEditConfigColumnConfig<T, K> | SelectEditConfigColumnConfig<T, K> | MultiselectEditConfigColumnConfig<T, K> | TextEditableColumnConfig<T, K> | SelectEditableColumnConfig<T, K> | MultiselectEditableColumnConfig<T, K>;
+type ColumnConfig<T, K extends keyof T> = ReadOnlyColumnConfig<T, K> | TextEditConfigColumnConfig<T, K> | NumberEditConfigColumnConfig<T, K> | SelectEditConfigColumnConfig<T, K> | MultiselectEditConfigColumnConfig<T, K> | TextEditableColumnConfig<T, K> | SelectEditableColumnConfig<T, K> | MultiselectEditableColumnConfig<T, K>;
 /**
  * Factory function to create column helper function for defining Table columns.
  *
  * This helper provides type safety by enforcing that:
  * - `type` sets display defaults (formatter and alignment) for the column
  * - `editConfig` enables cell editing with proper type constraints
- * - `editConfig.mode: "text"` can only be used with string, number, or boolean columns
+ * - `editConfig.mode: "text"` can only be used with string (or boolean columns, until we add a boolean mode)
+ * - `editConfig.mode: "number"` can only be used with number columns
  * - `editConfig.mode: "multiselect"` can only be used with array columns
  * - `editConfig.mode: "select"` options values must match the column's value type
  * - `editConfig.onChange` callback receives the correct value type for the column
@@ -165,6 +180,18 @@ type ColumnConfig<T, K extends keyof T> = ReadOnlyColumnConfig<T, K> | TextEditC
  *   editConfig: { mode: "text", onChange: (value, rowId) => save(value, rowId) }
  * });
  *
+ * // Number editing
+ * createColumn("amount", {
+ *   headerLabel: "Amount",
+ *   editConfig: {
+ *     mode: "number",
+ *     minValue: 0,
+ *     maxValue: 10000,
+ *     step: 0.01,
+ *     onChange: (value, rowId) => save(value, rowId)
+ *   }
+ * });
+ *
  * // Select editing
  * createColumn("status", {
  *   headerLabel: "Status",

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

@@ -44,7 +44,7 @@ type ArrayElement<T> = T extends (infer U)[] ? U : never;
 /**
  * Edit mode literals for editable cells.
  */
-export type EditMode = "text" | "select" | "multiselect";
+export type EditMode = "text" | "number" | "select" | "multiselect";
 /**
  * Base edit configuration shared by all edit modes.
  * @template T - The row data type
@@ -69,6 +69,44 @@ export type TextEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
      */
     mode: "text";
 };
+/**
+ * Edit configuration for number mode cells.
+ * Renders an inline number input with increment/decrement support.
+ *
+ * @template T - The row data type
+ * @template K - The column key
+ */
+export type NumberEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
+    /**
+     * Number edit mode - renders an inline number input with formatting and validation.
+     */
+    mode: "number";
+    /**
+     * The minimum value for the number field.
+     * @default 0
+     */
+    minValue?: number;
+    /**
+     * The maximum value for the number field.
+     * @default 100000000000000
+     */
+    maxValue?: number;
+    /**
+     * The step value for the number field.
+     * @default 1
+     */
+    step?: number;
+    /**
+     * The maximum number of decimal places for the number field.
+     * @default 0
+     */
+    maximumFractionDigits?: number;
+    /**
+     * The minimum number of decimal places for the number field.
+     * @default 0
+     */
+    minimumFractionDigits?: number;
+};
 /**
  * Edit configuration for select mode cells.
  * @template T - The row data type
@@ -117,6 +155,15 @@ export type MultiselectEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> &
  * // Text editing
  * editConfig: { mode: "text", onChange: (value, rowId) => save(value, rowId) }
  *
+ * // Number editing
+ * editConfig: {
+ *   mode: "number",
+ *   minValue: 0,
+ *   maxValue: 1000,
+ *   step: 1,
+ *   onChange: (value, rowId) => save(value, rowId)
+ * }
+ *
  * // Select editing
  * editConfig: {
  *   mode: "select",
@@ -125,7 +172,7 @@ export type MultiselectEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> &
  * }
  * ```
  */
-export type EditConfig<T, K extends keyof T> = TextEditConfig<T, K> | SelectEditConfig<T, K> | MultiselectEditConfig<T, K>;
+export type EditConfig<T, K extends keyof T> = TextEditConfig<T, K> | NumberEditConfig<T, K> | SelectEditConfig<T, K> | MultiselectEditConfig<T, K>;
 /**
  * The type for a table row
  * @extends T
@@ -235,7 +282,7 @@ export type ColumnDef<T> = {
      * The edit mode of the cells in the column.
      * @deprecated Use `editConfig` instead. Example: `editConfig: { mode: "text", onChange: ... }`
      */
-    editMode?: "text" | "select" | "multiselect";
+    editMode?: "text" | "number" | "select" | "multiselect";
     /**
      * The content of the footer cell. An array will display multiple footer rows
      */
@@ -269,7 +316,10 @@ export type ColumnDef<T> = {
      * The function to customize how the cell content is rendered.
      * When using `type`, a default renderer is provided but can be overridden.
      */
-    renderCell?: (value: T[keyof T], rowDepth: number) => ReactNode;
+    renderCell?: (value: T[keyof T], { row, depth }: {
+        row?: T;
+        depth?: number;
+    }) => ReactNode;
     /**
      * Whether the column is resizable
      */

package/dist/beta/components/Toolbar/Filters/internal/utils/filter-state.d.ts

@@ -31,6 +31,7 @@ export declare const resetFilters: (filters: Filter[]) => Filter[];
 export declare const updateSingleFilter: (filters: Filter[], filterId: string, value: FilterValue) => Filter[];
 /**
  * Determines if two filter values are different.
+ * For arrays (multiSelect), compares by id set (order-insensitive, avoids JSON serialization).
  * For singleSelect, compares by id if both are objects with id.
  *
  * @param {T} a - First value to compare

package/dist/beta.js

@@ -1,9 +1,9 @@
-export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, h as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, i as timeFormatter, y as yearlessDateFormatter } from './DataTable-CQpySyDq.js';
-export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-vBomnRKG.js';
-export { u as useCalendarBetaProps } from './Calendar-jO-0jbbt.js';
-export { C as Calendar } from './Calendar-DxLrWESu.js';
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-BFsJssdD.js';
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-xj7jXas-.js';
+export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, h as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, i as timeFormatter, y as yearlessDateFormatter } from './DataTable-D30sE1Xt.js';
+export { T as Toolbar, a as ToolbarButton, c as ToolbarButtonLink, b as ToolbarButtonToggle, e as ToolbarControlGroup, g as ToolbarElement, f as ToolbarSearchField, d as ToolbarSelect } from './Toolbar-CVOenuCF.js';
+export { u as useCalendarBetaProps } from './Calendar-D0CczOpQ.js';
+export { C as Calendar } from './Calendar-oNlBgZKB.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-CigqXq3T.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-Bey99LzJ.js';
 export { I as InteractiveCard } from './InteractiveCard-OszQGxGw.js';
-export { u as useAdaptiveView } from './FieldDialog-Be54L3E-.js';
+export { u as useAdaptiveView } from './FieldDialog-CAuhkCZY.js';
 //# sourceMappingURL=beta.js.map

package/dist/components/ButtonToggle/ButtonToggle.d.ts

@@ -55,7 +55,7 @@ DataTrackingId;
  *   Toggle Me
  * </ButtonToggle>
  */
-export declare const ButtonToggle: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "loading" | "appearance"> & {
+export declare const ButtonToggle: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "appearance" | "loading"> & {
     /**
      * The default pressed(selected) state of the toggle button.
      * @default false