@servicetitan/anvil2 3.0.1 → 3.0.3

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

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { KeyboardEvent as ReactKeyboardEvent, ReactNode, SetStateAction } from 'react';
 import { BooleanFormatterOptions, CurrencyFormatterOptions, DateFormatterOptions, DateTimeFormatterOptions, NumberFormatterOptions, PercentFormatterOptions, TimeFormatterOptions } from './formatters';
 import { SelectMenuOption, SelectMenuGroupByValue } from '../SelectMenu';
 import { SelectMenuSyncProps } from '../SelectMenu/SelectMenuSync';
@@ -47,7 +47,7 @@ export type ColumnTypeConfig<T extends ColumnType = ColumnType> = T | {
 /**
  * Edit mode literals for editable cells.
  */
-export type EditMode = "text" | "number" | "select" | "select-async" | "multiselect" | "multiselect-async" | "boolean";
+export type EditMode = "text" | "number" | "select" | "select-async" | "multiselect" | "multiselect-async" | "boolean" | "custom";
 /**
  * Base edit configuration shared by all edit modes.
  * @template T - The row data type
@@ -61,6 +61,196 @@ type BaseEditConfig<T, K extends keyof T> = {
      */
     onChange: (value: T[K], rowId: string) => void;
 };
+type CustomEditCanonicalValueForValue<TValue> = TValue extends readonly (infer _Element)[] ? never : TValue extends object ? NonNullable<TValue> : never;
+type CustomEditCanonicalValue<T, K extends keyof T> = CustomEditCanonicalValueForValue<NonNullable<T[K]>>;
+export type CustomEditFieldValueUpdater<TValue extends object, TField extends keyof TValue> = TValue[TField] | ((previousValue: TValue[TField], draftValue: TValue) => TValue[TField]);
+export type CustomEditCloseReason = "submit" | "escape" | "outside-click" | "close-button" | "programmatic";
+export type CustomEditValidation<TValue extends object> = {
+    /**
+     * Form-level validation summary for the entire editor.
+     */
+    formError?: ReactNode;
+    /**
+     * Field-level validation messages keyed by draft field.
+     */
+    fieldErrors?: Partial<Record<keyof TValue, ReactNode>>;
+};
+export type CustomEditSurfaceConfig = {
+    /**
+     * Optional title rendered in the editor surface header.
+     */
+    title?: ReactNode;
+    /**
+     * Optional surface width.
+     */
+    width?: number | string;
+    /**
+     * Optional surface max height.
+     */
+    maxHeight?: number | string;
+    /**
+     * Accessible label for the close button.
+     */
+    closeButtonLabel?: string;
+    /**
+     * Optional keydown handler forwarded to the surface.
+     */
+    onKeyDown?: (event: ReactKeyboardEvent<HTMLDivElement>) => void;
+};
+export type CustomEditCloseRequest<TValue extends object> = {
+    /**
+     * Why the close was requested.
+     */
+    reason: CustomEditCloseReason;
+    /**
+     * Draft value at the time the request is evaluated.
+     */
+    draftValue: TValue;
+    /**
+     * Original committed value when editing began.
+     */
+    initialValue: TValue;
+    /**
+     * Whether the draft differs from the initial value.
+     */
+    isDirty: boolean;
+    /**
+     * Current validation metadata.
+     */
+    validation: CustomEditValidation<TValue>;
+};
+export type CustomEditController<TValue extends object> = {
+    /**
+     * Current local draft value owned by the custom editor.
+     */
+    draftValue: TValue;
+    /**
+     * Original value before editing began.
+     */
+    initialValue: TValue;
+    /**
+     * Whether the draft differs from the initial value.
+     */
+    isDirty: boolean;
+    /**
+     * Ordered list of changed fields.
+     */
+    changedFields: ReadonlyArray<keyof TValue>;
+    /**
+     * Current validation metadata for the draft.
+     */
+    validation: CustomEditValidation<TValue>;
+    /**
+     * Replace the entire draft value.
+     */
+    setDraftValue: (nextValue: SetStateAction<TValue>) => TValue;
+    /**
+     * Update a single field in the current draft value.
+     */
+    setDraftField: <TField extends keyof TValue>(field: TField, nextValue: CustomEditFieldValueUpdater<TValue, TField>) => TValue;
+    /**
+     * Submit the current draft and close the editor.
+     */
+    submit: () => void;
+    /**
+     * Restore the initial value and close the editor.
+     */
+    discard: () => void;
+    /**
+     * Request closure using the configured policy for the supplied reason.
+     */
+    requestClose: (reason: CustomEditCloseReason) => void;
+    /**
+     * Register the one preferred initial-focus action for the editor.
+     */
+    setInitialFocus: (focus: (() => void) | null) => void;
+    /**
+     * Canonical submit handler for form-based editors.
+     */
+    handleSubmit: (event?: {
+        preventDefault?: () => void;
+    }) => void;
+};
+export type ColumnReadRenderContext<T> = {
+    row: T;
+    depth: number;
+};
+export type ColumnReadRenderResult = {
+    /**
+     * Advanced read-path rendered content.
+     * Most consumers should prefer `renderCell` + `getCellText` and only use
+     * this shape when one hook should return both rendered content and sortable text.
+     */
+    content: ReactNode;
+    /**
+     * Optional sortable plain-text representation of the rendered content.
+     */
+    rawString?: string;
+};
+export type CustomEditRenderContext<T, K extends keyof T> = {
+    /**
+     * Full row data for the cell being edited.
+     */
+    row: T;
+    /**
+     * String row id for the cell being edited.
+     */
+    rowId: string;
+    /**
+     * Canonical committed value for the cell.
+     */
+    value: T[K];
+    /**
+     * Typed controller for draft mutation, validation, focus, and lifecycle control.
+     */
+    controller: CustomEditController<CustomEditCanonicalValue<T, K>>;
+};
+/**
+ * Edit configuration for custom mode cells.
+ * Preserves canonical object values while continuing to use `renderCell`
+ * for the read path.
+ *
+ * @template T - The row data type
+ * @template K - The column key
+ */
+export type CustomEditConfig<T, K extends keyof T> = [
+    CustomEditCanonicalValue<T, K>
+] extends [never] ? never : Omit<BaseEditConfig<T, K>, "onChange"> & {
+    /**
+     * Custom edit mode - renders a multi-field editor surface.
+     */
+    mode: "custom";
+    /**
+     * Callback fired when the draft is committed.
+     */
+    onCommit: (value: T[K], rowId: string) => void;
+    /**
+     * Callback fired on every local draft mutation.
+     */
+    onDraftUpdate?: (value: T[K], rowId: string) => void;
+    /**
+     * Optional validation metadata derived from the current draft.
+     */
+    validateDraft?: (draftValue: CustomEditCanonicalValue<T, K>, rowId: string) => CustomEditValidation<CustomEditCanonicalValue<T, K>> | undefined;
+    /**
+     * When true, submit-style close requests are blocked while validation contains
+     * a form error or any field error. Defaults to `false`.
+     */
+    blockOnValidationError?: boolean;
+    /**
+     * Optional close interception hook.
+     * Return `false` to keep the editor open.
+     */
+    onRequestClose?: (request: CustomEditCloseRequest<CustomEditCanonicalValue<T, K>>) => boolean | void;
+    /**
+     * Optional surface presentation overrides.
+     */
+    surface?: CustomEditSurfaceConfig;
+    /**
+     * Consumer-owned renderer for the custom editor contents.
+     */
+    renderEditor: (context: CustomEditRenderContext<T, K>) => ReactNode;
+};
 /**
  * Edit configuration for text mode cells.
  * @template T - The row data type
@@ -407,9 +597,17 @@ export type BooleanEditConfig<T, K extends keyof T> = BaseEditConfig<T, K> & {
  *   falseLabel: "No",
  *   onChange: (value, rowId) => save(value, rowId)
  * }
+ *
+ * // Custom editing keeps renderCell as the read path
+ * editConfig: {
+ *   mode: "custom",
+ *   onChange: (value, rowId) => save(value, rowId),
+ *   onDraftChange: (value, rowId) => saveDraft(value, rowId),
+ *   renderEditor: ({ helpers }) => renderAddressEditor(helpers)
+ * }
  * ```
  */
-export type EditConfig<T, K extends keyof T> = TextEditConfig<T, K> | NumberEditConfig<T, K> | SelectEditConfig<T, K> | SelectAsyncEditConfig<T> | MultiselectEditConfig<T, K> | MultiselectAsyncEditConfig<T> | BooleanEditConfig<T, K>;
+export type EditConfig<T, K extends keyof T> = TextEditConfig<T, K> | NumberEditConfig<T, K> | SelectEditConfig<T, K> | SelectAsyncEditConfig<T> | MultiselectEditConfig<T, K> | MultiselectAsyncEditConfig<T> | BooleanEditConfig<T, K> | CustomEditConfig<T, K>;
 /**
  * The type for a table row
  * @extends T
@@ -459,6 +657,101 @@ export type TableRow<T> = T & {
      */
     subRows?: TableRow<T>[];
 };
+export type ColumnBaseDef = {
+    /**
+     * The label of the header
+     */
+    headerLabel: string;
+    /**
+     * The alignment of the header and cell content.
+     * When using `type`, this is set automatically but can be overridden.
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * Custom content to display when a cell value is empty (null, undefined, or empty string).
+     * Overrides the default em dash. When set on both the column and the DataTable,
+     * the column-level value takes precedence.
+     */
+    emptyCellContent?: ReactNode;
+    /**
+     * The content of the footer cell. An array will display multiple footer rows
+     */
+    footerContent?: ReactNode | ReactNode[];
+    /**
+     * The maximum width of the column, in pixels
+     */
+    maxWidth?: number;
+    /**
+     * The minimum width of the column, in pixels
+     */
+    minWidth?: number;
+    /**
+     * The pinning location of the column
+     */
+    pinned?: "left" | "right";
+    /**
+     * Whether the column is resizable
+     */
+    resizable?: boolean;
+};
+export type ColumnGroupDef<T> = ColumnBaseDef & {
+    /**
+     * Group column id.
+     */
+    id: string;
+    /**
+     * Columns of a group column
+     */
+    columns: ColumnDef<T>[];
+    editConfig?: never;
+    renderCell?: never;
+    sortable?: never;
+    type?: never;
+};
+export type ColumnDefForKey<T, K extends keyof T> = ColumnBaseDef & {
+    /**
+     * The id of the column - must be a key of T
+     */
+    id: K;
+    /**
+     * Columns of a group column
+     */
+    columns?: undefined;
+    /**
+     * Configuration for cell editing. Presence enables editing for the column.
+     * Consolidates edit mode, options, and onChange into a single object.
+     */
+    editConfig?: EditConfig<T, K>;
+    /**
+     * The function to customize how the cell content is rendered.
+     * When using `type`, a default renderer is provided but can be overridden.
+     * Custom edit columns continue to use this read-only render path.
+     */
+    renderCell?: (value: T[K], context: ColumnReadRenderContext<TableRow<T>>) => ReactNode;
+    /**
+     * Optional plain-text extractor for the read path.
+     * Useful when `renderCell` returns JSX or multiline content but default sorting
+     * should still use a simple string.
+     */
+    getCellText?: (value: T[K], context: ColumnReadRenderContext<TableRow<T>>) => string;
+    /**
+     * Optional advanced read-display extractor.
+     * Prefer `getCellText` for the common case where `renderCell` already handles
+     * display and sorting only needs a simple string. Use this when you want one
+     * hook to return both rendered read content and the sortable raw string.
+     */
+    getReadRenderResult?: (value: T[K], context: ColumnReadRenderContext<TableRow<T>>) => ColumnReadRenderResult;
+    /**
+     * Whether the column is sortable, or a function to customize the sorting logic.
+     * When a function, receives values of the column's value type.
+     */
+    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;
+};
 /**
  * Column definition type for DataTable columns.
  *
@@ -606,11 +899,22 @@ export type ColumnDef<T> = ColumnHeaderConfig & {
     /**
      * The function to customize how the cell content is rendered.
      * When using `type`, a default renderer is provided but can be overridden.
+     * Custom edit columns continue to use this read-only render path.
+     */
+    renderCell?: (value: T[keyof T], context: ColumnReadRenderContext<TableRow<T>>) => ReactNode;
+    /**
+     * Optional plain-text extractor for the read path.
+     * Useful when `renderCell` returns JSX or multiline content but default sorting
+     * should still use a simple string.
+     */
+    getCellText?: (value: T[keyof T], context: ColumnReadRenderContext<TableRow<T>>) => string;
+    /**
+     * Optional advanced read-display extractor.
+     * Prefer `getCellText` for the common case where `renderCell` already handles
+     * display and sorting only needs a simple string. Use this when you want one
+     * hook to return both rendered read content and the sortable raw string.
      */
-    renderCell?: (value: T[keyof T], { row, depth }: {
-        row?: T;
-        depth?: number;
-    }) => ReactNode;
+    getReadRenderResult?: (value: T[keyof T], context: ColumnReadRenderContext<TableRow<T>>) => ColumnReadRenderResult;
     /**
      * Whether the column is resizable
      */

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

@@ -7,3 +7,4 @@ export * from './MultiSelectField';
 export * from './SelectMenu';
 export * from './MultiSelectMenu';
 export * from './InteractiveCard';
+export * from './RichTextEditor';

package/dist/beta.js

@@ -1,13 +1,14 @@
-export { F as FilterBar } from './FilterBar-BU8StPPd.js';
-export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, i as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, h as htmlFormatter, m as markdownFormatter, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, j as timeFormatter, y as yearlessDateFormatter } from './DataTable-BDXdCF7J.js';
-export { T as Toolbar, a as ToolbarButton, b as ToolbarButtonLink, d as ToolbarControlGroup, f as ToolbarElement, e as ToolbarSearchField, c as ToolbarSelect } from './Toolbar-Dzj2KMEy.js';
-export { T as ToolbarButtonToggle } from './ToolbarButtonToggle--2Ka05N8.js';
-export { u as useCalendarBetaProps } from './Calendar-CaCMa_jq.js';
-export { C as Calendar } from './Calendar-BAbAagIx.js';
-export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-W_-jTf7z.js';
-export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-ueey5UBM.js';
-export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-QcjbQtCO.js';
-export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-D7hqugcQ.js';
-export { I as InteractiveCard } from './InteractiveCard-CnW0m_F-.js';
-export { u as useAdaptiveView } from './syncFilterUtils-nJS_tCsu.js';
+export { F as FilterBar } from './FilterBar-Cr0Tiw-y.js';
+export { C as COLUMN_TYPE_DEFAULTS, D as DataTable, b as booleanFormatter, a as chipsFormatter, c as createColumnHelper, d as currencyFormatter, i as dateFormatPresets, e as dateFormatter, f as dateTimeFormatter, g as getColumnTypeDefaults, h as htmlFormatter, m as markdownFormatter, n as numberFormatter, p as percentFormatter, r as resolveColumnTypeConfig, t as timeFormatPresets, j as timeFormatter, y as yearlessDateFormatter } from './DataTable-CME7SbPc.js';
+export { T as Toolbar, a as ToolbarButton, b as ToolbarButtonLink, d as ToolbarControlGroup, f as ToolbarElement, e as ToolbarSearchField, c as ToolbarSelect } from './Toolbar-B3gBBULy.js';
+export { T as ToolbarButtonToggle } from './ToolbarButtonToggle-Ch0SH4oH.js';
+export { u as useCalendarBetaProps } from './Calendar-DCO_y5QZ.js';
+export { C as Calendar } from './Calendar-CMzwTBdD.js';
+export { S as SelectField, a as SelectFieldSync } from './SelectFieldSync-Ci9k35TH.js';
+export { M as MultiSelectField, a as MultiSelectFieldSync } from './MultiSelectFieldSync-CSTBMpZC.js';
+export { S as SelectMenu, a as SelectMenuSync } from './SelectMenuSync-s2IzEHug.js';
+export { M as MultiSelectMenu, a as MultiSelectMenuSync } from './MultiSelectMenuSync-DKt2MBno.js';
+export { I as InteractiveCard } from './InteractiveCard-KGs2b_al.js';
+export { R as RichTextEditor } from './RichTextEditor-DUz-bi8H.js';
+export { u as useAdaptiveView } from './syncFilterUtils-BCxA8KSW.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/Toolbar/internal/utils/accessibility.d.ts

@@ -1,4 +1,9 @@
 import { KeyboardEvent } from 'react';
+/**
+ * Gets all visible focusable elements for a specific toolbar instance.
+ * Filters out hidden items and includes the overflow trigger if present.
+ */
+export declare function getToolbarElements(toolbarElement: HTMLElement): Element[];
 /**
  * Updates tabindex values for all items in a toolbar.
  * Sets tabindex="0" for the active item and tabindex="-1" for all others.

package/dist/getKeyboardFocusableElements-B_U9rt6y.js

@@ -0,0 +1,11 @@
+const KEYBOARD_FOCUSABLE_SELECTOR = 'a[href], button, input, textarea, select, details, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+function getKeyboardFocusableElements(element) {
+  if (!element) return [];
+  const elements = element.querySelectorAll(KEYBOARD_FOCUSABLE_SELECTOR);
+  return Array.from(elements).filter(
+    (el) => !el.hasAttribute("disabled") && !el.getAttribute("aria-hidden") && !el.getAttribute("inert") && !(globalThis.getComputedStyle(el).display === "none")
+  );
+}
+
+export { KEYBOARD_FOCUSABLE_SELECTOR as K, getKeyboardFocusableElements as g };
+//# sourceMappingURL=getKeyboardFocusableElements-B_U9rt6y.js.map

package/dist/getKeyboardFocusableElements-B_U9rt6y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getKeyboardFocusableElements-B_U9rt6y.js","sources":["../src/internal/functions/getKeyboardFocusableElements.ts"],"sourcesContent":["/**\n * CSS selector matching elements that natively participate in keyboard focus.\n * Use with `querySelectorAll` to enumerate focusables, or with `Element.closest`\n * to test whether a given target is inside one.\n *\n * `[contenteditable]:not([contenteditable=\"false\"])` covers every editable\n * value the attribute accepts — `\"\"` (bare), `\"true\"`, `\"plaintext-only\"`,\n * `\"inherit\"` — and excludes the explicit opt-out `\"false\"`. All editable\n * variants have an implicit tabindex of 0.\n */\nexport const KEYBOARD_FOCUSABLE_SELECTOR =\n  'a[href], button, input, textarea, select, details, [contenteditable]:not([contenteditable=\"false\"]), [tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Retrieves all keyboard focusable elements within a given container element.\n *\n * Features:\n * - Finds all elements that can receive keyboard focus\n * - Filters out disabled, hidden, and inert elements\n * - Respects ARIA attributes for accessibility\n * - Checks computed styles for visibility\n * - Supports all standard focusable elements (links, buttons, inputs, etc.)\n * - Handles null and undefined input gracefully\n * - Returns array of focusable HTMLElements\n * - Excludes elements with tabindex=\"-1\"\n *\n * Focusable Elements Detected:\n * - Links with href attributes\n * - Buttons (all types)\n * - Form inputs (text, checkbox, radio, etc.)\n * - Textareas and select elements\n * - Details elements\n * - Elements with positive tabindex values\n *\n * @param element - The container element to search for focusable elements\n * @returns Array of focusable HTMLElements, or empty array if no element provided\n */\nexport function getKeyboardFocusableElements(element?: HTMLElement | null) {\n  if (!element) return [];\n  const elements = element.querySelectorAll(KEYBOARD_FOCUSABLE_SELECTOR);\n\n  return Array.from(elements).filter(\n    (el) =>\n      !el.hasAttribute(\"disabled\") &&\n      !el.getAttribute(\"aria-hidden\") &&\n      !el.getAttribute(\"inert\") &&\n      !(globalThis.getComputedStyle(el).display === \"none\"),\n  );\n}\n"],"names":[],"mappings":"AAUO,MAAM,2BAAA,GACX;AA0BK,SAAS,6BAA6B,OAAA,EAA8B;AACzE,EAAA,IAAI,CAAC,OAAA,EAAS,OAAO,EAAC;AACtB,EAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,gBAAA,CAAiB,2BAA2B,CAAA;AAErE,EAAA,OAAO,KAAA,CAAM,IAAA,CAAK,QAAQ,CAAA,CAAE,MAAA;AAAA,IAC1B,CAAC,OACC,CAAC,EAAA,CAAG,aAAa,UAAU,CAAA,IAC3B,CAAC,EAAA,CAAG,YAAA,CAAa,aAAa,KAC9B,CAAC,EAAA,CAAG,aAAa,OAAO,CAAA,IACxB,EAAE,UAAA,CAAW,gBAAA,CAAiB,EAAE,CAAA,CAAE,OAAA,KAAY,MAAA;AAAA,GAClD;AACF;;;;"}