@servicetitan/anvil2 2.0.1 → 2.0.3

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

@@ -1,6 +1,7 @@
 import { SelectFieldDownshiftItem, SelectFieldOption } from '../types';
 import { UseComboboxPropGetters } from 'downshift';
 import { CSSProperties } from 'react';
+import { SectionMeta } from './types';
 type GetMenuProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getMenuProps"];
 type GetItemProps = UseComboboxPropGetters<SelectFieldDownshiftItem>["getItemProps"];
 export type SelectFieldListProps = {
@@ -18,9 +19,10 @@ export type SelectFieldListProps = {
     disabled?: boolean;
     className?: string;
     style?: CSSProperties;
+    sectionsMeta?: SectionMeta[];
 };
 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;
+    ({ selectedOption, ...rest }: SelectFieldListProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -0,0 +1,16 @@
+/**
+ * Metadata about list sections for rendering purposes.
+ * Used by both SelectFieldList and MultiSelectFieldList to render section headers and dividers.
+ * @property type - The type of section ("pinned" for pinned options, "group" for grouped options)
+ * @property label - Section label (e.g., "Recent", "Favorites", or group name)
+ * @property startIndex - Index in downshiftItems where this section starts
+ * @property endIndex - Index where this section ends (exclusive)
+ * @property loading - Whether this section is still loading its options (pinned sections only)
+ */
+export type SectionMeta = {
+    type: "pinned" | "group";
+    label: string;
+    startIndex: number;
+    endIndex: number;
+    loading?: boolean;
+};

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

@@ -1,8 +1,12 @@
 import { UseComboboxProps } from 'downshift';
-import { SelectFieldDownshiftItem, SelectFieldOption } from '../types';
+import { SelectFieldDownshiftItem, SelectFieldGroupByValue, SelectFieldOption, SelectFieldPinnedOptions } from '../types';
+import { SectionMeta } from './types';
+export type { SectionMeta };
 export type UseComboOptions = {
     options: SelectFieldOption[];
-    pinnedOptions?: unknown;
+    pinned?: SelectFieldPinnedOptions;
+    groupToString?: (groupValue: SelectFieldGroupByValue) => string;
+    groupSorter?: (a: SelectFieldGroupByValue, b: SelectFieldGroupByValue) => number;
     selectAll?: {
         label: string;
         onClick: () => void;
@@ -16,7 +20,7 @@ export type UseComboOptions = {
 /**
  * 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) => {
+export declare const useCombo: ({ options, pinned, groupToString, groupSorter, 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>;
@@ -27,6 +31,7 @@ export declare const useCombo: ({ options, pinnedOptions, selectAll, selectedOpt
     highlightedIndex: number;
     isOpen: boolean;
     downshiftItems: SelectFieldDownshiftItem[];
+    sectionsMeta: SectionMeta[];
     closeMenu: () => void;
     openMenu: () => void;
 };

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

@@ -0,0 +1,39 @@
+import { SelectFieldDownshiftItem, SelectFieldGroupByValue, SelectFieldOption } from '../types';
+/**
+ * Normalized group section structure used internally.
+ * @property label - The group label (derived from groupToString or String(groupValue))
+ * @property options - The options belonging to this group
+ */
+export type NormalizedGroupSection = {
+    label: string;
+    options: SelectFieldOption[];
+};
+type UseGroupedOptionsResult = {
+    /** Options that have a group property, converted to downshift items */
+    groupedItems: SelectFieldDownshiftItem[];
+    /** Options that don't have a group property, converted to downshift items */
+    ungroupedItems: SelectFieldDownshiftItem[];
+    /** Metadata about each group section for rendering */
+    groupSections: NormalizedGroupSection[];
+};
+/**
+ * Hook that processes options and groups them by their `group` property.
+ *
+ * Groups are ordered by insertion order (first occurrence of a group value
+ * defines its position in the list).
+ *
+ * @param options - The options to process
+ * @param groupToString - Optional function to convert group values to display labels
+ * @returns Grouped items, ungrouped items, and group section metadata
+ */
+export declare function useGroupedOptions(options: SelectFieldOption[], groupToString?: (groupValue: SelectFieldGroupByValue) => string): UseGroupedOptionsResult;
+/**
+ * Sorts group sections using the provided comparator function.
+ * The group value is extracted from the first option in each section.
+ *
+ * @param sections - The group sections to sort
+ * @param groupSorter - Comparator function for group values
+ * @returns A new array of sorted sections
+ */
+export declare function sortGroupSections(sections: NormalizedGroupSection[], groupSorter: (a: SelectFieldGroupByValue, b: SelectFieldGroupByValue) => number): NormalizedGroupSection[];
+export {};

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

@@ -0,0 +1,37 @@
+import { SelectFieldOption, SelectFieldPinnedOptions } from '../types';
+/**
+ * Normalized pinned section structure used internally.
+ * @property label - Section label (e.g., "Recent", "Favorites")
+ * @property options - The pinned options for this section
+ * @property loading - Whether this section is still loading its options
+ */
+export type NormalizedPinnedSection = {
+    label: string;
+    options: SelectFieldOption[];
+    loading?: boolean;
+};
+type UsePinnedOptionsResult = {
+    pinnedSections: NormalizedPinnedSection[];
+};
+/**
+ * Hook that normalizes and loads pinned options from various input formats.
+ *
+ * Handles:
+ * - Labeled pinned options object
+ * - Array of labeled pinned options objects
+ *
+ * Dynamic sections appear immediately with `loading: true` and empty options,
+ * then transition to their resolved options once loaded. Results are cached
+ * per section per search value so revisiting a previous search term is instant.
+ *
+ * Per-section configuration:
+ * - `searchReactive` (default true): when false, loader is called once and the
+ *   result is reused for all search values.
+ * - `cacheSize` (default 15): max number of search results cached per section.
+ *
+ * @param pinned - The pinned options configuration from props
+ * @param searchValue - Current search input value
+ * @returns Normalized pinned sections with per-section loading state
+ */
+export declare function usePinnedOptions(pinned: SelectFieldPinnedOptions | undefined, searchValue: string): UsePinnedOptionsResult;
+export {};

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

@@ -1,5 +1,5 @@
 import { AriaAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
-import { LayoutUtilProps, Size } from '../../../types';
+import { CheckState, LayoutUtilProps, Size } from '../../../types';
 /**
  * Configuration options for the SelectField cache.
  * @property enabled - Whether caching is enabled. Defaults to true.
@@ -23,6 +23,7 @@ export type SelectFieldOption = {
     searchText?: string;
     group?: SelectFieldGroupByValue;
     disabled?: boolean;
+    extra?: Record<string, unknown>;
     content?: {
         title?: string;
         description?: string;
@@ -82,18 +83,30 @@ type SelectFieldAddNewOptionProps = {
         renderDialogContent: (searchValue: string) => React.ReactNode;
     };
 };
-export type SelectFieldLabeledPinnedOptions = {
+export type SelectFieldPinnedOptionsSection = {
     options: SelectFieldOption[] | ((searchValue: string) => SelectFieldOption[] | Promise<SelectFieldOption[]>);
     label: string;
+    /**
+     * Whether to re-call the loader when search value changes.
+     * Only applies when `options` is a function. Defaults to true.
+     * When false, the loader is called once and the result is reused for all search values.
+     *
+     * You may wish to use this, for example, if you are loading a set of "favorites" options that should not be re-loaded when the search value changes.
+     */
+    searchReactive?: boolean;
+    /**
+     * Maximum number of search results to cache per section.
+     * Only applies when `options` is a function and `searchReactive` is true.
+     * Oldest entries are evicted when the limit is reached. Defaults to 15.
+     */
+    cacheSize?: number;
 };
 /**
- * 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": [...]}])
+ * There are two ways to configure pinned options.
+ * 1. A labeled pinned options object (e.g. "Favorites", "Recent", "AI Suggestions", etc.)
+ * 2. An array of labeled pinned options objects (e.g. [{"label": "Favorites", "options": [...]}])
  */
-export type SelectFieldPinnedOptions = SelectFieldOption[] | ((searchValue: string) => SelectFieldOption[] | Promise<SelectFieldOption[]>) | SelectFieldLabeledPinnedOptions | SelectFieldLabeledPinnedOptions[];
+export type SelectFieldPinnedOptions = SelectFieldPinnedOptionsSection | SelectFieldPinnedOptionsSection[];
 type SelectFieldCommonSelectFieldProps = {
     /**
      * The id of the select field.
@@ -217,6 +230,15 @@ type SelectFieldGroupingProps = {
      * @returns The formatted group label
      */
     groupToString?: (groupValue: SelectFieldGroupByValue) => string;
+    /**
+     * Function to compare two group values for sorting.
+     * When provided, options are sorted by group using this comparator,
+     * then by match-sort order within each group.
+     * @param a - First group value to compare
+     * @param b - Second group value to compare
+     * @returns Negative if a < b, positive if a > b, zero if equal
+     */
+    groupSorter?: (a: SelectFieldGroupByValue, b: SelectFieldGroupByValue) => number;
 };
 type SelectFieldNonGroupingProps = {
     /**
@@ -281,13 +303,14 @@ export type SelectFieldPropsEager = SelectFieldCommonSelectFieldProps & {
      * Function to load the options.
      */
     loadOptions: SelectFieldEagerLoader;
-};
+} & SelectFieldGroupingProps;
 export type SelectFieldPropsLazy = SelectFieldPropsLazyPage | SelectFieldPropsLazyOffset | SelectFieldPropsLazyGroup;
 export type SelectFieldProps = SelectFieldPropsLazy | SelectFieldPropsEager;
 export type SelectFieldDownshiftItem = {
     id: string | number;
-    type: "option" | "pinned-option" | "select-all";
+    type: "option" | "pinned-option" | "grouped-option" | "select-all";
     original: SelectFieldOption;
     disabled?: boolean;
+    checkState?: CheckState;
 };
 export {};

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

@@ -0,0 +1,51 @@
+import { ReactNode } from 'react';
+import { ColumnType, ColumnTypeConfig, ColumnTypeOptionsMap } from './types';
+/**
+ * Display defaults for a column type.
+ * Defines the default formatter and alignment for each column type.
+ */
+export type ColumnTypeDefaults = {
+    /**
+     * Default horizontal alignment for the column.
+     */
+    align: "start" | "center" | "end";
+    /**
+     * Factory function to create the default renderCell function.
+     * Receives formatter options and returns the renderCell function.
+     */
+    createRenderCell: (options?: ColumnTypeOptionsMap[ColumnType]) => ((value: unknown, rowDepth: number) => ReactNode) | undefined;
+};
+/**
+ * Mapping of column types to their display defaults.
+ * Used by the column helper to apply sensible defaults based on data type.
+ */
+export declare const COLUMN_TYPE_DEFAULTS: Record<ColumnType, ColumnTypeDefaults>;
+/**
+ * Extracts the column type string and options from a ColumnTypeConfig.
+ *
+ * @param config - The column type configuration (string or object)
+ * @returns Tuple of [type string, options object or undefined]
+ *
+ * @example
+ * ```ts
+ * resolveColumnTypeConfig("currency")
+ * // Returns: ["currency", undefined]
+ *
+ * resolveColumnTypeConfig({ type: "currency", options: { currency: "EUR" } })
+ * // Returns: ["currency", { currency: "EUR" }]
+ * ```
+ */
+export declare function resolveColumnTypeConfig<T extends ColumnType>(config: ColumnTypeConfig<T>): [T, ColumnTypeOptionsMap[T] | undefined];
+/**
+ * Gets the display defaults for a column type.
+ *
+ * @param type - The column type
+ * @returns The column type defaults (align and createRenderCell)
+ *
+ * @example
+ * ```ts
+ * const defaults = getColumnTypeDefaults("currency");
+ * // Returns: { align: "end", createRenderCell: ... }
+ * ```
+ */
+export declare function getColumnTypeDefaults(type: ColumnType): ColumnTypeDefaults;

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

@@ -1,11 +1,11 @@
 import { ReactNode } from 'react';
-import { ColumnDef } from './types';
+import { ColumnDef, ColumnTypeConfig, TextEditConfig, SelectEditConfig, MultiselectEditConfig } from './types';
 /**
  * Utility type that extracts the element type from an array type
  */
 type ArrayElement<T> = T extends (infer U)[] ? U : never;
 /**
- * Base column configuration without editMode-specific properties
+ * Base column configuration without editMode-specific or editConfig-specific properties
  */
 type BaseColumnConfig<T, K extends keyof T> = {
     /**
@@ -13,7 +13,8 @@ type BaseColumnConfig<T, K extends keyof T> = {
      */
     headerLabel: string;
     /**
-     * The alignment of the header
+     * The alignment of the header.
+     * When using `type`, this is set automatically but can be overridden.
      */
     align?: "start" | "center" | "end";
     /**
@@ -41,38 +42,74 @@ type BaseColumnConfig<T, K extends keyof T> = {
      */
     resizable?: boolean;
     /**
-     * The function to customize how the cell content is rendered
+     * 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;
     /**
      * Whether the column is sortable, or a function to customize the sorting logic
      */
     sortable?: boolean | ((valueA: T[K], valueB: T[K]) => number);
+    /**
+     * The column type for automatic display configuration.
+     * Sets default `renderCell` (formatter) and `align` based on the data type.
+     */
+    type?: ColumnTypeConfig;
 };
 /**
- * Configuration for read-only columns (no editMode)
+ * Configuration for read-only columns (no editing)
  */
 type ReadOnlyColumnConfig<T, K extends keyof T> = BaseColumnConfig<T, K> & {
+    editConfig?: undefined;
     editMode?: undefined;
     onChange?: never;
     options?: never;
 };
 /**
- * Configuration for text editable columns
+ * Configuration for text editable columns using editConfig
  * Valid when T[K] is a string, number, or boolean type
- * Number and boolean values are converted to strings -- support for this will be dropped in a future release
- * once we implement additional editable cell types
- * TODO: https://servicetitan.atlassian.net/browse/ANV-3798 Drop support for number and boolean values
+ */
+type TextEditConfigColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends string | number | boolean ? BaseColumnConfig<T, K> & {
+    editConfig: TextEditConfig<T, K>;
+    editMode?: undefined;
+    onChange?: undefined;
+    options?: undefined;
+} : never;
+/**
+ * Configuration for select editable columns using editConfig
+ */
+type SelectEditConfigColumnConfig<T, K extends keyof T> = BaseColumnConfig<T, K> & {
+    editConfig: SelectEditConfig<T, K>;
+    editMode?: undefined;
+    onChange?: undefined;
+    options?: undefined;
+};
+/**
+ * Configuration for multiselect editable columns using editConfig
+ * Only valid when T[K] is an array type
+ */
+type MultiselectEditConfigColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends unknown[] ? BaseColumnConfig<T, K> & {
+    editConfig: MultiselectEditConfig<T, K>;
+    editMode?: undefined;
+    onChange?: undefined;
+    options?: undefined;
+} : never;
+/**
+ * Configuration for text editable columns (legacy)
+ * @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> & {
+    editConfig?: undefined;
     editMode: "text";
     onChange?: (value: string, rowId: string) => void;
     options?: never;
 } : never;
 /**
- * Configuration for select editable columns
+ * Configuration for select editable columns (legacy)
+ * @deprecated Use editConfig instead: `editConfig: { mode: "select", options: [...], onChange: ... }`
  */
 type SelectEditableColumnConfig<T, K extends keyof T> = BaseColumnConfig<T, K> & {
+    editConfig?: undefined;
     editMode: "select";
     onChange?: (value: T[K], rowId: string) => void;
     options: {
@@ -81,10 +118,11 @@ type SelectEditableColumnConfig<T, K extends keyof T> = BaseColumnConfig<T, K> &
     }[];
 };
 /**
- * Configuration for multiselect editable columns
- * Only valid when T[K] is an array type
+ * Configuration for multiselect editable columns (legacy)
+ * @deprecated Use editConfig instead: `editConfig: { mode: "multiselect", options: [...], onChange: ... }`
  */
 type MultiselectEditableColumnConfig<T, K extends keyof T> = NonNullable<T[K]> extends unknown[] ? BaseColumnConfig<T, K> & {
+    editConfig?: undefined;
     editMode: "multiselect";
     onChange?: (value: T[K], rowId: string) => void;
     options: {
@@ -93,35 +131,59 @@ type MultiselectEditableColumnConfig<T, K extends keyof T> = NonNullable<T[K]> e
     }[];
 } : never;
 /**
- * Full column configuration type - union of all possible configurations
- * TypeScript will enforce that the editMode matches the value type constraints
+ * Full column configuration type - union of all possible configurations.
+ * 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> | TextEditableColumnConfig<T, K> | SelectEditableColumnConfig<T, K> | MultiselectEditableColumnConfig<T, K>;
+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>;
 /**
  * Factory function to create column helper function for defining Table columns.
  *
  * This helper provides type safety by enforcing that:
- * - `editMode: "text"` can only be used with string, number, or boolean columns
- * - `editMode: "multiselect"` can only be used with array columns
- * - `editMode: "select"` options values must match the column's value type
- * - `onChange` callback receives the correct value type for the column
+ * - `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: "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
  *
  * @template T - The type of the row data
  * @returns A function that creates type-safe column definitions
  *
  * @example
  * ```ts
- * type Data = { name: string; count: number; tags: string[] };
+ * type Data = { name: string; amount: number; tags: string[] };
  * const createColumn = createColumnHelper<Data>();
  *
- * // Valid: text mode with string column
- * createColumn("name", { headerLabel: "Name", editMode: "text" });
+ * // Display-only column with type defaults
+ * createColumn("amount", { headerLabel: "Amount", type: "currency" });
+ *
+ * // Editable column with editConfig
+ * createColumn("name", {
+ *   headerLabel: "Name",
+ *   type: "text",
+ *   editConfig: { mode: "text", onChange: (value, rowId) => save(value, rowId) }
+ * });
  *
- * // Valid: text mode with number column (value converted to string)
- * createColumn("count", { headerLabel: "Count", editMode: "text" });
+ * // Select editing
+ * createColumn("status", {
+ *   headerLabel: "Status",
+ *   editConfig: {
+ *     mode: "select",
+ *     options: [{ value: "active", label: "Active" }],
+ *     onChange: (value, rowId) => save(value, rowId)
+ *   }
+ * });
  *
- * // Valid: multiselect mode with array column
- * createColumn("tags", { headerLabel: "Tags", editMode: "multiselect", options: [...] });
+ * // Multiselect editing with array column
+ * createColumn("tags", {
+ *   headerLabel: "Tags",
+ *   editConfig: {
+ *     mode: "multiselect",
+ *     options: [{ value: "urgent", label: "Urgent" }],
+ *     onChange: (value, rowId) => save(value, rowId)
+ *   }
+ * });
  * ```
  */
 export declare function createColumnHelper<T>(): <K extends keyof T>(id: K | {

package/dist/beta/components/Table/formatters/dateFormatter.d.ts

@@ -16,7 +16,7 @@ export type DateFormatterOptions = {
      * - "long": January 15, 2024
      * - "full": Monday, January 15, 2024
      * - Intl.DateTimeFormatOptions: Custom format (e.g., { weekday: "long", month: "short", day: "numeric" })
-     * @default "medium"
+     * @default "short"
      */
     format?: DateFormatPreset | Intl.DateTimeFormatOptions;
 };

package/dist/beta/components/Table/formatters/dateTimeFormatter.d.ts

@@ -24,7 +24,7 @@ export type DateTimeFormatterOptions = {
      * - "long": January 15, 2024
      * - "full": Monday, January 15, 2024
      * - Intl.DateTimeFormatOptions: Custom format (e.g., { weekday: "long", month: "short", day: "numeric" })
-     * @default "medium"
+     * @default "short"
      */
     dateFormat?: DateTimeFormatDatePreset | Intl.DateTimeFormatOptions;
     /**

package/dist/beta/components/Table/formatters/yearlessDateFormatter.d.ts

@@ -16,8 +16,8 @@ export type YearlessDateFormatterOptions = {
      * The format preset or Intl.DateTimeFormatOptions object
      * - "short": Jan 05
      * - "long": January 05
-     * - Intl.DateTimeFormatOptions: Custom format (e.g., { month: "2-digit", day: "2-digit" })
-     * @default "long"
+     * - Intl.DateTimeFormatOptions: Custom format (e.g., { month: "long", day: "numeric" })
+     * @default "short"
      */
     format?: YearlessDateFormatPreset | Intl.DateTimeFormatOptions;
 };

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

@@ -1,3 +1,4 @@
+export * from './columnTypeDefaults';
 export * from './createColumnHelper';
 export * from './formatters';
 export * from './DataTable';