@servicetitan/anvil2 1.50.0 → 1.50.2

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

@@ -0,0 +1,311 @@
+import { AriaAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
+import { CheckState, LayoutUtilProps, Size } from '../../../types';
+/**
+ * Configuration options for the MultiSelectField cache.
+ * @property enabled - Whether caching is enabled. Defaults to true.
+ * @property maxSize - Maximum number of cached entries before clearing the cache. Defaults to 50.
+ */
+export type MultiSelectFieldCacheOptions = {
+    enabled?: boolean;
+    maxSize?: number;
+};
+/**
+ * Imperative handle for the MultiSelectField component.
+ * @property clearCache - Clears the options cache.
+ */
+export type MultiSelectFieldHandle = {
+    clearCache: () => void;
+};
+export type MultiSelectFieldGroupByValue = string | number;
+export type MultiSelectFieldOption = {
+    id: string | number;
+    label: string;
+    searchText?: string;
+    group?: MultiSelectFieldGroupByValue;
+    disabled?: boolean;
+    content?: {
+        title?: string;
+        description?: string;
+    };
+};
+export type MultiSelectFieldGroupedOption = MultiSelectFieldOption & {
+    group: MultiSelectFieldGroupByValue;
+};
+export type MultiSelectFieldUngroupedOption = Omit<MultiSelectFieldOption, "group"> & {
+    group?: never;
+};
+export type MultiSelectFieldOptionsResult = MultiSelectFieldOption[] | Promise<MultiSelectFieldOption[]>;
+export type MultiSelectFieldEagerLoader = (searchValue: string) => MultiSelectFieldOptionsResult;
+export type MultiSelectFieldOffsetLazyResult = {
+    options: MultiSelectFieldUngroupedOption[];
+    hasMore?: boolean;
+};
+export type MultiSelectFieldOffsetLazyLoader = (searchValue: string, offset: number, limit: number) => MultiSelectFieldOffsetLazyResult | Promise<MultiSelectFieldOffsetLazyResult>;
+export type MultiSelectFieldPageLazyResult = {
+    options: MultiSelectFieldUngroupedOption[];
+    hasMore?: boolean;
+};
+export type MultiSelectFieldPageLazyLoader = (searchValue: string, pageNumber: number, pageSize: number) => MultiSelectFieldPageLazyResult | Promise<MultiSelectFieldPageLazyResult>;
+export type MultiSelectFieldGroupLazyResult = {
+    options: MultiSelectFieldGroupedOption[];
+    hasMore?: boolean;
+};
+export type MultiSelectFieldGroupLazyLoader = (searchValue: string, previousGroupKey: MultiSelectFieldGroupByValue | null) => MultiSelectFieldGroupLazyResult | Promise<MultiSelectFieldGroupLazyResult>;
+export type MultiSelectFieldSearchProps = {
+    /**
+     * The current search value.
+     * Not a preferred usage. You likely don't need to control the searchValue yourself.
+     */
+    searchValue?: string;
+    /**
+     * Callback when the search value changes.
+     * Not a preferred usage. Lean on the searchValue in the loadOptions function instead.
+     */
+    onSearchChange?: (searchValue: string) => void;
+    /**
+     * The number of milliseconds to debounce the search input.
+     */
+    debounceMs?: number;
+};
+export type MultiSelectFieldLabeledPinnedOptions = {
+    options: MultiSelectFieldOption[] | ((searchValue: string) => MultiSelectFieldOption[] | Promise<MultiSelectFieldOption[]>);
+    label: string;
+};
+/**
+ * There are a number of ways to configure pinned options.
+ * 1. An array of options
+ * 2. A function that returns a list of options (or Promise thereof) based on the search value
+ * 3. A labeled pinned options object (e.g. "Favorites", "Recent", "AI Suggestions", etc.)
+ * 4. An array of labeled pinned options objects (e.g. [{"label": "Favorites", "options": [...]}])
+ */
+export type MultiSelectFieldPinnedOptions = MultiSelectFieldOption[] | ((searchValue: string) => MultiSelectFieldOption[] | Promise<MultiSelectFieldOption[]>) | MultiSelectFieldLabeledPinnedOptions | MultiSelectFieldLabeledPinnedOptions[];
+/**
+ * @deprecated Use CheckState from "@servicetitan/anvil2" instead.
+ */
+export type MultiSelectFieldCheckState = CheckState;
+type MultiSelectFieldCommonProps = {
+    /**
+     * The id of the multi-select field.
+     */
+    id?: string;
+    /**
+     * The label of the multi-select field.
+     */
+    label: string;
+    /**
+     * The placeholder of the multi-select field.
+     */
+    placeholder?: string;
+    /**
+     * The size of the multi-select field.
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    /**
+     * The selected options. Must be controlled state.
+     */
+    value: MultiSelectFieldOption[];
+    /**
+     * The callback to call when the selected options change.
+     * @param options - The new array of selected options.
+     */
+    onSelectedOptionsChange: (options: MultiSelectFieldOption[]) => void;
+    /**
+     * Defines the initial loading behavior of the options. Controls when loadOptions is called.
+     * @default "auto"
+     * @description "auto" default behavior, currently equivalent to "immediate".
+     * @description "immediate" will load the initial options when the component is mounted.
+     * @description "open" will load the initial options if/when the user opens the dropdown.
+     */
+    initialLoad?: "auto" | "immediate" | "open";
+    /**
+     * The options to pin to the top of the list.
+     */
+    pinned?: MultiSelectFieldPinnedOptions;
+    /**
+     * Configuration for caching loadOptions results.
+     * Caching is enabled by default. Set `{ enabled: false }` to disable.
+     */
+    cache?: MultiSelectFieldCacheOptions;
+    /**
+     * The way to display the menu.
+     * @default "auto"
+     * @description "auto" will display the menu as a popover on mobile and a dialog on desktop.
+     * @description "popover" will always display the menu as a popover.
+     * @description "dialog" will always display the menu as a dialog.
+     */
+    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?: ReactElement | string | boolean;
+    /**
+     * Visually hides the label while keeping it accessible to screen readers.
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Hint text displayed below the input field.
+     */
+    hint?: ReactElement | string;
+    /**
+     * Custom ReactNode to render as the label, overriding the default label text.
+     * The `label` prop is still required for accessibility purposes.
+     */
+    labelNode?: ReactNode;
+    /**
+     * Description text displayed below the input field.
+     */
+    description?: ReactElement | string;
+    /**
+     * aria-live behavior for error messages.
+     * @default "assertive"
+     */
+    errorAriaLive?: AriaAttributes["aria-live"];
+    /**
+     * Whether the field is required. Shows a red asterisk (*) next to the label.
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled.
+     * When disabled, the input is still focusable but menu items cannot be selected.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is read-only.
+     * When read-only, the input is still focusable but menu items cannot be selected.
+     */
+    readOnly?: boolean;
+    /**
+     * Content to display before the input field.
+     */
+    prefix?: string | ReactElement;
+    /**
+     * Content to display after the input field.
+     */
+    suffix?: string | ReactElement;
+    /**
+     * Configuration for the "Select All" option at the top of the list.
+     * When provided, a "Select All" option will be shown.
+     */
+    selectAll?: {
+        /**
+         * The label to display for the "Select All" option.
+         * @default "Select All"
+         */
+        label?: string;
+        /**
+         * Callback when the "Select All" option is clicked.
+         * The parent component is responsible for handling the select/deselect all logic.
+         */
+        onClick: () => void;
+        /**
+         * isChecked state for the "Select All" option.
+         * @default false
+         */
+        isChecked: boolean | MultiSelectFieldCheckState;
+    };
+    /**
+     * When true, restricts the field to a single row height.
+     * Overflow chips will be collapsed into a "+N" indicator.
+     * @default false
+     */
+    singleRow?: boolean;
+    /**
+     * Maximum number of chips to display before showing a "+N" indicator.
+     * Applies regardless of fixedHeight setting.
+     * @default 10
+     */
+    maxChips?: number;
+    /**
+     * Custom CSS class name for the wrapper element.
+     */
+    className?: string;
+    /**
+     * Custom inline styles for the wrapper element.
+     */
+    style?: CSSProperties;
+} & MultiSelectFieldSearchProps & LayoutUtilProps;
+type MultiSelectFieldGroupingProps = {
+    /**
+     * Function to convert a group value to a display label.
+     * Only used when options have a `group` property.
+     * @param groupValue - The group value from the option's `group` property
+     * @returns The formatted group label
+     */
+    groupToString?: (groupValue: MultiSelectFieldGroupByValue) => string;
+};
+type MultiSelectFieldNonGroupingProps = {
+    /**
+     * Incompatible with non-group lazy loading.
+     */
+    groupToString?: never;
+    /**
+     * Incompatible with non-group lazy loading.
+     */
+    groupSorter?: never;
+};
+export type MultiSelectFieldPropsLazyPage = MultiSelectFieldCommonProps & {
+    /**
+     * Lazy loading mode using page-based pagination.
+     * Options will be loaded on demand when the user scrolls to the bottom of the list.
+     * This mode only supports flat options (i.e. cannot be used with grouped options).
+     */
+    lazy: "page";
+    lazyOptions?: {
+        pageSize?: number;
+    };
+    /**
+     * Function to load the options.
+     */
+    loadOptions: MultiSelectFieldPageLazyLoader;
+} & MultiSelectFieldNonGroupingProps;
+export type MultiSelectFieldPropsLazyOffset = MultiSelectFieldCommonProps & {
+    /**
+     * Lazy loading mode using offset-based pagination.
+     * Options will be loaded on demand when the user scrolls to the bottom of the list.
+     * This mode only supports flat options (i.e. cannot be used with grouped options).
+     */
+    lazy: "offset";
+    lazyOptions?: {
+        limit?: number;
+    };
+    /**
+     * Function to load the options.
+     */
+    loadOptions: MultiSelectFieldOffsetLazyLoader;
+} & MultiSelectFieldNonGroupingProps;
+export type MultiSelectFieldPropsLazyGroup = MultiSelectFieldCommonProps & {
+    /**
+     * Lazy loading mode using incremental group loading.
+     * Groups will be loaded on demand when the user scrolls to the bottom of the list.
+     * This mode supports grouped options.
+     */
+    lazy: "group";
+    lazyOptions?: object;
+    /**
+     * Function to load the options.
+     */
+    loadOptions: MultiSelectFieldGroupLazyLoader;
+} & MultiSelectFieldGroupingProps;
+export type MultiSelectFieldPropsEager = MultiSelectFieldCommonProps & {
+    /**
+     * Whether the options are lazy loaded. If true, the options will be loaded on demand when the user scrolls to the bottom of the list.
+     * @default false
+     */
+    lazy?: false;
+    /**
+     * Function to load the options.
+     */
+    loadOptions: MultiSelectFieldEagerLoader;
+};
+export type MultiSelectFieldPropsLazy = MultiSelectFieldPropsLazyPage | MultiSelectFieldPropsLazyOffset | MultiSelectFieldPropsLazyGroup;
+export type MultiSelectFieldProps = MultiSelectFieldPropsLazy | MultiSelectFieldPropsEager;
+export type MultiSelectFieldDownshiftItem = {
+    id: string | number;
+    type: "option" | "pinned-option" | "select-all";
+    original: MultiSelectFieldOption;
+    disabled?: boolean;
+    checkState?: MultiSelectFieldCheckState;
+};
+export {};

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

@@ -1,8 +1,10 @@
-export declare const FieldDialog: ({ id, isOpen, onClose, field, children, title, }: {
+import { FocusableElement } from '../../../../..';
+export declare const FieldDialog: ({ id, isOpen, onClose, field, children, title, initialFocusResolver, }: {
     id: string;
     isOpen: boolean;
     onClose: () => void;
     title: string;
     field: React.ReactNode;
     children: React.ReactNode;
+    initialFocusResolver?: (focusables: FocusableElement[]) => FocusableElement;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,5 +4,6 @@ export type FieldPopoverProps = {
     children: ReactNode;
     referenceElement: RefObject<HTMLElement>;
     open: boolean;
+    onClickOutside: () => void;
 };
 export declare const FieldPopover: (props: FieldPopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -8,6 +8,7 @@ import { ReactElement, RefObject } from 'react';
  * @property {boolean} [disableToggleButton] - Hides the toggle button when true
  * @property {boolean} [disabled] - Disables the input entirely
  * @property {boolean} [readOnly] - Cannot be modified but remains interactive
+ * @property {boolean} [required] - Marks the input as required for form validation
  * @property {boolean} [error] - Shows error styling on the input when true
  * @property {() => void} [onClear] - Callback fired when the clear button is clicked
  * @property {string} [id] - HTML id attribute for the input element
@@ -26,6 +27,7 @@ export type SelectFieldInputProps = {
     disableToggleButton?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    required?: boolean;
     error?: boolean;
     onClear?: () => void;
     id?: string;
@@ -59,6 +61,6 @@ export type SelectFieldInputProps = {
  * />
  */
 export declare const SelectFieldInput: {
-    ({ placeholder, size, disableClearButton, disableToggleButton, disabled, readOnly, error, onClear, id, inputWrapperRef, htmlInputWrapperProps, inputProps, toggleButtonProps, prefix, suffix, }: SelectFieldInputProps): import("react/jsx-runtime").JSX.Element;
+    ({ placeholder, size, disableClearButton, disableToggleButton, disabled, readOnly, required, error, onClear, id, inputWrapperRef, htmlInputWrapperProps, inputProps, toggleButtonProps, prefix, suffix, }: SelectFieldInputProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -8,14 +8,20 @@ type GetLabelProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getLabelP
  * @property {GetLabelProps} getLabelProps - Downshift getter function that returns accessibility props for the label
  * @property {boolean} [required] - Whether the field is required. Shows a red asterisk (*) when true.
  * @property {ReactNode} [moreInfo] - Additional information to display in a tooltip
- * @property {boolean} [openMoreInfo] - Controls the open state of the more info tooltip
+ * @property {boolean} [openMoreInfo] - @deprecated: Use `moreInfoOpen` instead.
+ * @property {boolean} [moreInfoOpen] - Controls the open state of the more info tooltip
+ * @property {boolean} [hideLabel] - Visually hides the label while keeping it accessible to screen readers
+ * @property {ReactNode} [labelNode] - Custom ReactNode to render as the label, overriding the default label text
  */
 export type SelectFieldLabelProps = {
     label: string;
     getLabelProps: GetLabelProps;
-    required?: boolean;
+    hideLabel?: boolean;
+    labelNode?: ReactNode;
     moreInfo?: ReactNode;
     openMoreInfo?: boolean;
+    moreInfoOpen?: boolean;
+    required?: boolean;
 };
 /**
  * Internal label component for the SelectField that renders an accessible label element.
@@ -26,6 +32,8 @@ export type SelectFieldLabelProps = {
  * - Supports screen readers with proper labeling
  * - Optional required field indicator with red asterisk
  * - Help tooltip with info icon for additional context
+ * - Can visually hide the label while maintaining accessibility
+ * - Supports custom label content via labelNode
  *
  * @example
  * <SelectFieldLabel
@@ -35,5 +43,5 @@ export type SelectFieldLabelProps = {
  *   moreInfo="Choose from available options"
  * />
  */
-export declare const SelectFieldLabel: ({ label, getLabelProps, required, moreInfo, openMoreInfo, }: SelectFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFieldLabel: ({ label, getLabelProps, hideLabel, labelNode, moreInfo, openMoreInfo, moreInfoOpen, required, }: SelectFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,5 +1,6 @@
 import { UseComboboxPropGetters } from 'downshift';
 import { SelectFieldDownshiftItem } from '../types';
+import { CheckState } from '../../../../types';
 type GetItemProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getItemProps"];
 export type SelectFieldListItemProps = {
     item: SelectFieldDownshiftItem;
@@ -8,7 +9,7 @@ export type SelectFieldListItemProps = {
     disabled: boolean;
     getItemProps: GetItemProps;
     selectionType: "single" | "multiple";
-    checked: boolean | "indeterminate";
+    checked: CheckState;
 };
 export declare const SelectFieldListItem: ({ item, index, highlighted, disabled, getItemProps, selectionType, checked, }: SelectFieldListItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -18,6 +18,7 @@ export type UseComboOptions = {
  */
 export declare const useCombo: ({ options, pinnedOptions, selectAll, selectedOption, onSelectedOptionChange, onInputValueChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, }: UseComboOptions) => {
     inputValue: string;
+    wrapperDivRef: import('react').RefObject<HTMLDivElement>;
     getToggleButtonProps: <Options>(options?: import('downshift').UseComboboxGetToggleButtonPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseComboboxGetToggleButtonPropsReturnValue, Options>;
     getLabelProps: <Options>(options?: import('downshift').UseComboboxGetLabelPropsOptions & Options) => import('downshift').Overwrite<import('downshift').UseComboboxGetLabelPropsReturnValue, Options>;
     getMenuProps: <Options>(options?: import('downshift').UseComboboxGetMenuPropsOptions & Options, otherOptions?: import('downshift').GetPropsCommonOptions) => import('downshift').Overwrite<import('downshift').UseComboboxGetMenuPropsReturnValue, Options>;

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

@@ -1,4 +1,4 @@
-import { AriaAttributes, ReactElement } from 'react';
+import { AriaAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
 import { LayoutUtilProps, Size } from '../../../types';
 /**
  * Configuration options for the SelectField cache.
@@ -155,10 +155,20 @@ type SelectFieldCommonSelectFieldProps = {
      * When truthy, displays error styling and message.
      */
     error?: ReactElement | string | boolean;
+    /**
+     * Visually hides the label while keeping it accessible to screen readers.
+     * @default false
+     */
+    hideLabel?: boolean;
     /**
      * Hint text displayed below the input field.
      */
     hint?: ReactElement | string;
+    /**
+     * Custom ReactNode to render as the label, overriding the default label text.
+     * The `label` prop is still required for accessibility purposes.
+     */
+    labelNode?: ReactNode;
     /**
      * Description text displayed below the input field.
      */
@@ -190,6 +200,14 @@ type SelectFieldCommonSelectFieldProps = {
      * Content to display after the input field.
      */
     suffix?: string | ReactElement;
+    /**
+     * Custom CSS class name for the wrapper element.
+     */
+    className?: string;
+    /**
+     * Custom inline styles for the wrapper element.
+     */
+    style?: CSSProperties;
 } & SelectFieldSearchProps & SelectFieldAddNewOptionProps & LayoutUtilProps;
 type SelectFieldGroupingProps = {
     /**

package/dist/beta/components/Table/DataTable/internal/cells/DataTableHeaderCell.d.ts

@@ -1,3 +1,4 @@
+import { Ref } from 'react';
 import { HeaderContext } from '@tanstack/react-table';
 import { DataTableHeaderCellProps as BaseDataTableHeaderCellProps } from '../../../base/cells/TableHeaderCell';
 /**
@@ -18,4 +19,11 @@ export type DataTableHeaderCellProps<T> = BaseDataTableHeaderCellProps & {
  * @param props.children - The children of the DataTableHeaderCell component
  * @param props.header - The header of the DataTableHeaderCell component
  */
-export declare function DataTableHeaderCell<T>(props: DataTableHeaderCellProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableHeaderCellInner<T>(props: DataTableHeaderCellProps<T>, forwardedRef: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Data table header cell with focus management and ref forwarding
+ */
+export declare const DataTableHeaderCell: <T>(props: DataTableHeaderCellProps<T> & {
+    ref?: Ref<HTMLDivElement>;
+}) => ReturnType<typeof DataTableHeaderCellInner>;
+export {};

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

@@ -15,6 +15,7 @@ export declare const expandedRowData: TableRow<TableStoryData>[];
 export declare const subComponentsData: TableRow<TableStoryData>[];
 export declare const primaryColumns: import('../..').ColumnDef<TableStoryData>[];
 export declare const groupedColumns: import('../..').ColumnDef<TableStoryData>[];
+export declare const columnsWithMaxWidth: import('../..').ColumnDef<TableStoryData>[];
 export declare const columnsWithoutFooter: import('../..').ColumnDef<TableStoryData>[];
 export type Category = "electronics" | "clothing" | "home" | "garden" | "other";
 export type EditableTableStoryData = {

package/dist/beta/components/Table/internal/ResizeHandle.d.ts

@@ -1,14 +1,17 @@
 import { Header } from '@tanstack/react-table';
 /**
  * Props for the ResizeHandle component
- * @extends Header<T, unknown>
+ * @property {Header<T, unknown>} header - The header instance from TanStack Table
+ * @property {() => void} [onResizeStart] - Callback fired before resize begins, useful for initializing state
  */
 export type ResizeHandleProps<T> = {
     header: Header<T, unknown>;
+    onResizeStart?: () => void;
 };
 /**
  * Resize handle component resizing table columns
  * @param props - The props for the ResizeHandle component
  * @param props.header - The header of the ResizeHandle component
+ * @param props.onResizeStart - Optional callback fired before resize begins
  */
-export declare function ResizeHandle<T>({ header }: ResizeHandleProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ResizeHandle<T>({ header, onResizeStart, }: ResizeHandleProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/beta/components/Table/internal/getCommonPinningStyles.d.ts

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 import { Column } from '@tanstack/react-table';
 /**
- * Get the common styles for position and width of a column with pinning
+ * Get the common styles for sticky positioning of pinned columns
+ * Width is handled by CSS Grid, so only positioning is needed
  */
 export declare const getCommonPinningStyles: <T>(column: Column<T>) => CSSProperties;

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

@@ -38,3 +38,31 @@ export declare const updateSingleFilter: (filters: Filter[], filterId: string, v
  * @returns {boolean} True if the values are different
  */
 export declare const hasChangedFilter: <T>(a: T, b: T) => boolean;
+/**
+ * Checks if the selection value of a filter has changed by comparing references.
+ * Uses reference equality (===) to detect if the parent has provided a new value.
+ *
+ * @param {Filter} existingFilter - The current filter state
+ * @param {Filter} newFilter - The incoming filter from props
+ * @returns {boolean} True if the selection value reference has changed
+ */
+export declare const hasFilterSelectionChanged: (existingFilter: Filter, newFilter: Filter) => boolean;
+/**
+ * Preserves the selection state from an existing filter into a new filter.
+ * Used when filter configuration updates but the selection value reference hasn't changed,
+ * allowing us to maintain user selections through configuration updates.
+ *
+ * @param {Filter} newFilter - The new filter configuration from props
+ * @param {Filter} existingFilter - The existing filter with user's selections
+ * @returns {Filter} New filter with configuration from newFilter and selection from existingFilter
+ */
+export declare const preserveFilterState: (newFilter: Filter, existingFilter: Filter) => Filter;
+/**
+ * Creates a deep clone of filters with updated item references.
+ * Ensures that selected items reference the current items array for proper equality checks.
+ * Used when initializing draft state to ensure selections use current item references.
+ *
+ * @param {Filter[]} filters - Array of filter objects to clone
+ * @returns {Filter[]} New array with cloned filters and updated item references
+ */
+export declare const cloneFiltersWithItemRefs: (filters: Filter[]) => Filter[];

package/dist/beta/components/index.d.ts

@@ -2,3 +2,4 @@ export * from './Table';
 export * from './Toolbar';
 export * from './Calendar';
 export * from './SelectField';
+export * from './MultiSelectField';

package/dist/beta.js

@@ -1,6 +1,8 @@
-export { D as DataTable, a as chipsFormatter, c as createColumnHelper, b as currencyFormatter, p as percentFormatter } from './DataTable-DSySFGWC.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-DEwvVf35.js';
-export { u as useCalendarBetaProps } from './Calendar-CAYitkfM.js';
-export { C as Calendar } from './Calendar-C9oxHTGG.js';
-export { S as SelectField, a as SelectFieldSync, u as useAdaptiveView } from './SelectFieldSync-BOzavAtv.js';
+export { D as DataTable, a as chipsFormatter, c as createColumnHelper, b as currencyFormatter, p as percentFormatter } from './DataTable-hXWouflx.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-K9UFfyvX.js';
+export { u as useCalendarBetaProps } from './Calendar-BeFARXwq.js';
+export { C as Calendar } from './Calendar-M9v994mm.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-0CL0RTpg.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-B3HNQf7R.js';
+export { u as useAdaptiveView } from './FieldDialog-BHgkQOhh.js';
 //# sourceMappingURL=beta.js.map

package/dist/beta.js.map

@@ -1 +1 @@
-{"version":3,"file":"beta.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"beta.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/Button/Button.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Combobox/ComboboxTypes.d.ts

@@ -287,7 +287,7 @@ export type ComboboxContentProps<Item> = Omit<ComponentPropsWithoutRef<"div">, "
  * Props for the ComboboxTrigger component
  * @template Item - The type of items in the combobox
  */
-export type ComboboxTriggerProps<Item = any> = Omit<TextFieldProps, "disabled" | "readOnly" | "showCounter"> & Pick<LabelProps, "required" | "moreInfo" | "openMoreInfo"> & LayoutUtilProps & {
+export type ComboboxTriggerProps<Item = any> = Omit<TextFieldProps, "disabled" | "readOnly" | "showCounter"> & Pick<LabelProps, "required" | "moreInfo" | "openMoreInfo" | "moreInfoOpen"> & LayoutUtilProps & {
     /**
      * Should be a positive integer.
      */

package/dist/components/Combobox/internal/ComboboxLegacy/ComboboxLegacyTrigger.d.ts

@@ -1,6 +1,6 @@
 import { TextFieldProps } from '../../../TextField/internal/TextField';
 import { LabelProps } from '../../../../internal/components/Label';
-type ComboboxLegacyTriggerProps = Omit<TextFieldProps, "disabled" | "readOnly"> & Pick<LabelProps, "required" | "moreInfo" | "openMoreInfo"> & {
+type ComboboxLegacyTriggerProps = Omit<TextFieldProps, "disabled" | "readOnly"> & Pick<LabelProps, "required" | "moreInfo" | "openMoreInfo" | "moreInfoOpen"> & {
     /**
      * Should be a positive integer.
      */
@@ -13,7 +13,7 @@ type ComboboxLegacyTriggerProps = Omit<TextFieldProps, "disabled" | "readOnly">
 };
 export type ComboboxLegacySearchFieldProps = ComboboxLegacyTriggerProps;
 export type ComboboxLegacySelectTriggerProps = ComboboxLegacyTriggerProps;
-export declare const ComboboxLegacyTrigger: ({ className, label, size, error, hint, description, required, moreInfo, openMoreInfo, prefix, suffix, maxRows, id, disabled, readOnly, ...rest }: ComboboxLegacyTriggerProps & {
+export declare const ComboboxLegacyTrigger: ({ className, label, size, error, hint, description, required, moreInfo, openMoreInfo, moreInfoOpen, prefix, suffix, maxRows, id, disabled, readOnly, ...rest }: ComboboxLegacyTriggerProps & {
     variant?: "combobox" | "select";
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const ComboboxLegacySearchField: (props: ComboboxLegacyTriggerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Combobox/internal/ComboboxLegacy/ComboboxLegacyUtils.d.ts

@@ -32,40 +32,4 @@ export type ComboboxLegacyContextProps<Item = any> = Required<Pick<UseDownshiftC
     setHasExactMatch?: Dispatch<SetStateAction<boolean>>;
 };
 export declare const ComboboxLegacyContext: import('react').Context<ComboboxLegacyContextProps<any> | null>;
-export declare const useDownshiftEnvironment: () => {
-    ref: MutableRefObject<HTMLDivElement | null>;
-    environment: {
-        document: Document;
-        addEventListener: {
-            <K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        };
-        removeEventListener: {
-            <K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-            (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-        };
-        Node: {
-            new (): Node;
-            prototype: Node;
-            readonly ELEMENT_NODE: 1;
-            readonly ATTRIBUTE_NODE: 2;
-            readonly TEXT_NODE: 3;
-            readonly CDATA_SECTION_NODE: 4;
-            readonly ENTITY_REFERENCE_NODE: 5;
-            readonly ENTITY_NODE: 6;
-            readonly PROCESSING_INSTRUCTION_NODE: 7;
-            readonly COMMENT_NODE: 8;
-            readonly DOCUMENT_NODE: 9;
-            readonly DOCUMENT_TYPE_NODE: 10;
-            readonly DOCUMENT_FRAGMENT_NODE: 11;
-            readonly NOTATION_NODE: 12;
-            readonly DOCUMENT_POSITION_DISCONNECTED: 1;
-            readonly DOCUMENT_POSITION_PRECEDING: 2;
-            readonly DOCUMENT_POSITION_FOLLOWING: 4;
-            readonly DOCUMENT_POSITION_CONTAINS: 8;
-            readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
-            readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
-        };
-    } | undefined;
-};
 export declare const useComboboxLegacy: <Item = any>() => ComboboxLegacyContextProps<Item>;