@servicetitan/anvil2 1.49.4 → 1.49.6

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

@@ -0,0 +1,39 @@
+import { MatchSorterOptions } from 'match-sorter';
+import { SelectFieldProps, SelectFieldOption } from './types';
+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.
+     *
+     * @example
+     * <SelectFieldSync
+     *   options={options}
+     *   filter={(options, searchValue) => {
+     *     return options.filter((option) => {
+     *       return option.label?.toLowerCase().includes(searchValue.toLowerCase());
+     *     });
+     *   }}
+     * />
+     *
+     * @example
+     * <SelectFieldSync
+     *   options={options}
+     *   filter={{ keys: ["label"] }}
+     * />
+     */
+    filter?: ((options: SelectFieldOption[], searchValue: string) => SelectFieldOption[]) | MatchSorterOptions;
+};
+/**
+ * SelectFieldSync is a simplified version of SelectField that is used to display a list of options in a select field.
+ *
+ * Features:
+ * - Accepts `options` instead of `loadOptions` and `lazy`.
+ * - Performs client-side filtering of the options.
+ * - Optionally accepts a function to filter the options, or a MatchSorterOptions object to customize the default filtering.
+ * - Supports all the other props of SelectField.
+ */
+export declare const SelectFieldSync: (props: SelectFieldSyncProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+export * from './SelectField';
+export * from './SelectFieldSync';
+export * from './types';

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

@@ -0,0 +1,8 @@
+export declare const FieldDialog: ({ id, isOpen, onClose, field, children, title, }: {
+    id: string;
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    field: React.ReactNode;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { ReactNode, RefObject } from 'react';
+export type FieldPopoverProps = {
+    id: string;
+    children: ReactNode;
+    referenceElement: RefObject<HTMLElement>;
+    open: boolean;
+};
+export declare const FieldPopover: (props: FieldPopoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+/**
+ * Props for the InView component
+ * @property {ReactNode} children - The content to render inside the visibility-tracked container
+ * @property {(isVisible: boolean) => void} [onVisibilityChange] - Callback fired when visibility changes
+ */
+type InViewProps = {
+    /**
+     * The content to render inside the visibility-tracked container
+     */
+    children?: ReactNode;
+    /**
+     * Callback fired when the element's visibility in the viewport changes
+     */
+    onVisibilityChange?: (isVisible: boolean) => void;
+    /**
+     * The root margin for the intersection observer
+     */
+    rootMargin?: string;
+};
+/**
+ * Internal component that detects when its content is visible in the viewport.
+ *
+ * Features:
+ * - Uses Intersection Observer API for efficient visibility detection
+ * - Fires callback when visibility state changes
+ * - Handles browser compatibility gracefully
+ * - Automatically cleans up observer on unmount
+ *
+ * @param props - Component props
+ * @returns Wrapped children with visibility detection
+ */
+export declare const InView: ({ children, onVisibilityChange, rootMargin, }: InViewProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,64 @@
+import { PassThroughProps, Size } from '../../../../types';
+import { ReactElement, RefObject } from 'react';
+/**
+ * Props for the SelectFieldInput component
+ * @property {string} [placeholder] - Placeholder text displayed when input is empty
+ * @property {Extract<Size, "small" | "medium" | "large">} [size] - Size variant of the input
+ * @property {boolean} [disableClearButton] - Hides the clear button when true
+ * @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} [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
+ * @property {string} [popoverTarget] - Target identifier for popover association
+ * @property {RefObject<HTMLDivElement>} [inputWrapperRef] - Ref for the input wrapper div element
+ * @property {PassThroughProps<"div">} [htmlInputWrapperProps] - Additional props passed to the wrapper div
+ * @property {PassThroughProps<"input">} [inputProps] - Additional props passed to the input element
+ * @property {PassThroughProps<"button">} [toggleButtonProps] - Additional props passed to the toggle button
+ * @property {string | ReactElement} [prefix] - Content to display before the input
+ * @property {string | ReactElement} [suffix] - Content to display after the input
+ */
+export type SelectFieldInputProps = {
+    placeholder?: string;
+    size?: Extract<Size, "small" | "medium" | "large">;
+    disableClearButton?: boolean;
+    disableToggleButton?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    error?: boolean;
+    onClear?: () => void;
+    id?: string;
+    popoverTarget?: string;
+    inputWrapperRef?: RefObject<HTMLDivElement>;
+    htmlInputWrapperProps?: PassThroughProps<"div">;
+    inputProps?: PassThroughProps<"input">;
+    toggleButtonProps?: PassThroughProps<"button">;
+    prefix?: string | ReactElement;
+    suffix?: string | ReactElement;
+};
+/**
+ * Internal input component for the SelectField that provides the text input and action buttons.
+ *
+ * Features:
+ * - Text input for filtering and displaying selected values
+ * - Optional clear button for removing the current selection
+ * - Optional toggle button for opening/closing the dropdown menu
+ * - Supports multiple size variants (small, medium, large)
+ * - Fully accessible with proper ARIA labels on buttons
+ * - Supports pass-through props for customization of internal elements
+ * - Optional prefix and suffix content
+ * - Error state styling
+ *
+ * @example
+ * <SelectFieldInput
+ *   placeholder="Search..."
+ *   size="medium"
+ *   onClear={() => handleClear()}
+ *   prefix="$"
+ * />
+ */
+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;
+    displayName: string;
+};

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import { UseComboboxPropGetters } from 'downshift';
+import { SelectFieldDownshiftItem } from '../types';
+type GetLabelProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getLabelProps"];
+/**
+ * Props for the SelectFieldLabel component
+ * @property {string} label - The text content to display as the label
+ * @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
+ */
+export type SelectFieldLabelProps = {
+    label: string;
+    getLabelProps: GetLabelProps;
+    required?: boolean;
+    moreInfo?: ReactNode;
+    openMoreInfo?: boolean;
+};
+/**
+ * Internal label component for the SelectField that renders an accessible label element.
+ *
+ * Features:
+ * - Renders a FieldLabel with proper accessibility attributes from Downshift
+ * - Automatically associates the label with the combobox input
+ * - Supports screen readers with proper labeling
+ * - Optional required field indicator with red asterisk
+ * - Help tooltip with info icon for additional context
+ *
+ * @example
+ * <SelectFieldLabel
+ *   label="Select an option"
+ *   getLabelProps={getLabelProps}
+ *   required
+ *   moreInfo="Choose from available options"
+ * />
+ */
+export declare const SelectFieldLabel: ({ label, getLabelProps, required, moreInfo, openMoreInfo, }: SelectFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { SelectFieldDownshiftItem, SelectFieldOption } from '../types';
+import { UseComboboxPropGetters } from 'downshift';
+import { CSSProperties } from 'react';
+type GetMenuProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getMenuProps"];
+type GetItemProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getItemProps"];
+export type SelectFieldListProps = {
+    isOpen: boolean;
+    items: SelectFieldDownshiftItem[];
+    getMenuProps: GetMenuProps;
+    getItemProps: GetItemProps;
+    highlightedIndex: number;
+    selectedOption: SelectFieldOption | null;
+    hasMore: boolean;
+    onLoadMore: () => void;
+    loading: boolean;
+    loadingMore: boolean;
+    disableAutoLoadMore?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+export declare const SelectFieldList: {
+    ({ isOpen, items, getMenuProps, getItemProps, highlightedIndex, selectedOption, hasMore, onLoadMore, loading, loadingMore, disableAutoLoadMore, disabled, className, style, }: SelectFieldListProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,14 @@
+import { UseComboboxPropGetters } from 'downshift';
+import { SelectFieldDownshiftItem } from '../types';
+type GetItemProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getItemProps"];
+export type SelectFieldListItemProps = {
+    item: SelectFieldDownshiftItem;
+    index: number;
+    highlighted: boolean;
+    disabled: boolean;
+    getItemProps: GetItemProps;
+    selectionType: "single" | "multiple";
+    checked: boolean | "indeterminate";
+};
+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

@@ -0,0 +1,31 @@
+import { UseComboboxProps } from 'downshift';
+import { SelectFieldDownshiftItem, SelectFieldOption } from '../types';
+export type UseComboOptions = {
+    options: SelectFieldOption[];
+    pinnedOptions?: unknown;
+    selectAll?: {
+        label: string;
+        onClick: () => void;
+    };
+    selectedOption: SelectFieldOption | null;
+    onSelectedOptionChange: (option: SelectFieldOption | null) => void;
+    displayAs: "popover" | "dialog";
+    disableHighlightOnOpen?: boolean;
+    disabled: 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, pinnedOptions, selectAll, selectedOption, onSelectedOptionChange, onInputValueChange, onIsOpenChange, displayAs, disableHighlightOnOpen, disabled, }: UseComboOptions) => {
+    inputValue: string;
+    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>;
+    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;
+    isOpen: boolean;
+    downshiftItems: SelectFieldDownshiftItem[];
+    closeMenu: () => void;
+    openMenu: () => void;
+};

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

@@ -0,0 +1,32 @@
+import { SelectFieldOption, SelectFieldUngroupedOption, SelectFieldGroupedOption, SelectFieldGroupByValue } from '../types';
+export type Book = {
+    id: string;
+    author: string;
+    title: string;
+    genre: string;
+};
+/**
+ * Small curated list of diverse books for simple examples
+ */
+export declare const books: Book[];
+/**
+ * Large dataset of 300 unique books for lazy loading demonstrations
+ */
+export declare const allBooks: Book[];
+export declare const sourceOptions: SelectFieldOption[];
+export declare function filterBooks(bookList: Book[], searchValue: string): Book[];
+export declare function mapBookToOption(book: Book): SelectFieldUngroupedOption;
+export declare const simulateFetchingPagedBooks: (searchValue: string, pageNumber: number, pageSize: number) => Promise<{
+    data: Book[];
+    count: number;
+}>;
+export declare const simulateFetchingOffsetBooks: (searchValue: string, offset: number, limit: number) => Promise<{
+    data: Book[];
+    count: number;
+}>;
+export type GroupByField = "genre" | "author";
+export declare function mapBookToGroupedOption(book: Book, groupBy: GroupByField): SelectFieldGroupedOption;
+export declare const simulateFetchingGroupedBooks: (groupBy: GroupByField) => (searchValue: string, previousGroupKey: SelectFieldGroupByValue | null) => Promise<{
+    options: SelectFieldGroupedOption[];
+    hasMore: boolean;
+}>;

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

@@ -0,0 +1,275 @@
+import { AriaAttributes, ReactElement } from 'react';
+import { LayoutUtilProps, Size } from '../../../types';
+/**
+ * Configuration options for the SelectField 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 SelectFieldCacheOptions = {
+    enabled?: boolean;
+    maxSize?: number;
+};
+/**
+ * Imperative handle for the SelectField component.
+ * @property clearCache - Clears the options cache.
+ */
+export type SelectFieldHandle = {
+    clearCache: () => void;
+};
+export type SelectFieldGroupByValue = string | number;
+export type SelectFieldOption = {
+    id: string | number;
+    label: string;
+    searchText?: string;
+    group?: SelectFieldGroupByValue;
+    disabled?: boolean;
+    content?: {
+        title?: string;
+        description?: string;
+    };
+};
+export type SelectFieldGroupedOption = SelectFieldOption & {
+    group: SelectFieldGroupByValue;
+};
+export type SelectFieldUngroupedOption = Omit<SelectFieldOption, "group"> & {
+    group?: never;
+};
+export type SelectFieldOptionsResult = SelectFieldOption[] | Promise<SelectFieldOption[]>;
+export type SelectFieldEagerLoader = (searchValue: string) => SelectFieldOptionsResult;
+export type SelectFieldOffsetLazyResult = {
+    options: SelectFieldUngroupedOption[];
+    hasMore?: boolean;
+};
+export type SelectFieldOffsetLazyLoader = (searchValue: string, offset: number, limit: number) => SelectFieldOffsetLazyResult | Promise<SelectFieldOffsetLazyResult>;
+export type SelectFieldPageLazyResult = {
+    options: SelectFieldUngroupedOption[];
+    hasMore?: boolean;
+};
+export type SelectFieldPageLazyLoader = (searchValue: string, pageNumber: number, pageSize: number) => SelectFieldPageLazyResult | Promise<SelectFieldPageLazyResult>;
+export type SelectFieldGroupLazyResult = {
+    options: SelectFieldGroupedOption[];
+    hasMore?: boolean;
+};
+export type SelectFieldGroupLazyLoader = (searchValue: string, previousGroupKey: SelectFieldGroupByValue | null) => SelectFieldGroupLazyResult | Promise<SelectFieldGroupLazyResult>;
+export type SelectFieldSearchProps = {
+    /**
+     * 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;
+};
+type SelectFieldAddNewOptionProps = {
+    /**
+     * The configuration for the add new option.
+     */
+    addNewOption?: {
+        /**
+         * The label to display for the add new option.
+         */
+        label: string;
+        /**
+         * The content to display in the add new option dialog.
+         */
+        renderDialogContent: (searchValue: string) => React.ReactNode;
+    };
+};
+export type SelectFieldLabeledPinnedOptions = {
+    options: SelectFieldOption[] | ((searchValue: string) => SelectFieldOption[] | Promise<SelectFieldOption[]>);
+    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 SelectFieldPinnedOptions = SelectFieldOption[] | ((searchValue: string) => SelectFieldOption[] | Promise<SelectFieldOption[]>) | SelectFieldLabeledPinnedOptions | SelectFieldLabeledPinnedOptions[];
+type SelectFieldCommonSelectFieldProps = {
+    /**
+     * The id of the select field.
+     */
+    id?: string;
+    /**
+     * The label of the select field.
+     */
+    label: string;
+    /**
+     * The placeholder of the select field.
+     */
+    placeholder?: string;
+    /**
+     * The size of the select field.
+     */
+    size?: Extract<Size, "small" | "medium" | "large">;
+    /**
+     * The value of the select field. Must be controlled state.
+     */
+    value: SelectFieldOption | null;
+    /**
+     * The callback to call when an item is clicked.
+     * @param option - The option that was selected.
+     */
+    onSelectedOptionChange: (option: SelectFieldOption | null) => 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?: SelectFieldPinnedOptions;
+    /**
+     * Whether to disable the clear button.
+     * @default false
+     */
+    disableClearButton?: boolean;
+    /**
+     * Configuration for caching loadOptions results.
+     * Caching is enabled by default. Set `{ enabled: false }` to disable.
+     */
+    cache?: SelectFieldCacheOptions;
+    /**
+     * 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;
+    /**
+     * Hint text displayed below the input field.
+     */
+    hint?: ReactElement | string;
+    /**
+     * 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;
+} & SelectFieldSearchProps & SelectFieldAddNewOptionProps & LayoutUtilProps;
+type SelectFieldGroupingProps = {
+    /**
+     * 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: SelectFieldGroupByValue) => string;
+};
+type SelectFieldNonGroupingProps = {
+    /**
+     * Incompatible with non-group lazy loading.
+     */
+    groupToString?: never;
+    /**
+     * Incompatible with non-group lazy loading.
+     */
+    groupSorter?: never;
+};
+export type SelectFieldPropsLazyPage = SelectFieldCommonSelectFieldProps & {
+    /**
+     * 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: SelectFieldPageLazyLoader;
+} & SelectFieldNonGroupingProps;
+export type SelectFieldPropsLazyOffset = SelectFieldCommonSelectFieldProps & {
+    /**
+     * 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: SelectFieldOffsetLazyLoader;
+} & SelectFieldNonGroupingProps;
+export type SelectFieldPropsLazyGroup = SelectFieldCommonSelectFieldProps & {
+    /**
+     * 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: SelectFieldGroupLazyLoader;
+} & SelectFieldGroupingProps;
+export type SelectFieldPropsEager = SelectFieldCommonSelectFieldProps & {
+    /**
+     * 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: SelectFieldEagerLoader;
+};
+export type SelectFieldPropsLazy = SelectFieldPropsLazyPage | SelectFieldPropsLazyOffset | SelectFieldPropsLazyGroup;
+export type SelectFieldProps = SelectFieldPropsLazy | SelectFieldPropsEager;
+export type SelectFieldDownshiftItem = {
+    id: string | number;
+    type: "option" | "pinned-option" | "select-all";
+    original: SelectFieldOption;
+    disabled?: boolean;
+};
+export {};

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

@@ -89,7 +89,7 @@ export type CustomTableFooterCellProps = {
     /**
      * The content of the footer cell
      */
-    content: string;
+    content: ReactNode;
     /**
      * The number of columns the footer cell should span
      */

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

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

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

@@ -0,0 +1 @@
+export * from './useAdaptiveView';

package/dist/beta/hooks/useAdaptiveView.d.ts

@@ -0,0 +1,50 @@
+/**
+ * The type of view to render based on device characteristics.
+ */
+export type AdaptiveView = "mobile" | "desktop";
+/**
+ * Return type for the useAdaptiveView hook.
+ */
+export interface UseAdaptiveViewReturn {
+    /**
+     * The current adaptive view type.
+     */
+    view: AdaptiveView;
+    /**
+     * True when the device should use mobile-optimized UI (Dialog).
+     */
+    isMobile: boolean;
+    /**
+     * True when the device should use desktop-optimized UI (Popover).
+     */
+    isDesktop: boolean;
+}
+/**
+ * Custom hook for detecting whether to use mobile or desktop UI patterns.
+ *
+ * This hook determines the optimal UI pattern (e.g., Dialog vs Popover) by combining:
+ * - Screen size via useBreakpoint (viewport width)
+ * - Pointer precision via CSS media query (pointer: coarse)
+ *
+ * A device is considered "mobile" when it has both:
+ * - A small screen (below md breakpoint, < 768px)
+ * - A coarse pointer (touch-primary input)
+ *
+ * This approach correctly identifies:
+ * - Mobile phones → mobile view (Dialog)
+ * - iPads/tablets → desktop view (Popover) due to larger screens
+ * - Touch laptops → desktop view (Popover) due to fine pointer primary
+ * - Desktop → desktop view (Popover)
+ *
+ * @returns Object containing view type and boolean flags for mobile/desktop
+ *
+ * @example
+ * const { isMobile } = useAdaptiveView();
+ *
+ * return isMobile ? (
+ *   <Dialog>{children}</Dialog>
+ * ) : (
+ *   <Popover>{children}</Popover>
+ * );
+ */
+export declare function useAdaptiveView(): UseAdaptiveViewReturn;

package/dist/beta/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './hooks';