@servicetitan/anvil2 3.0.4 → 3.0.5

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

@@ -1,2 +1,23 @@
 import { SelectFieldHandle, SelectFieldProps } from './types';
+/**
+ * SelectField component for selecting a single option from a searchable dropdown.
+ *
+ * Features:
+ * - Async option loading with caching, lazy pagination (page, offset, group), and debounced search
+ * - Supports pinned option sections (static or dynamically loaded)
+ * - Grouped options with custom sort and label functions
+ * - Combobox mode (searchable) and select mode (non-searchable) via disableSearch
+ * - Dialog and popover display modes with auto-detection based on viewport
+ * - Imperative handle for cache management (clearCache, invalidate)
+ * - Optional "Add new item" affordance below the option list with consumer-owned dialog
+ * - Supports layout utilities for positioning and spacing
+ *
+ * @example
+ * <SelectField
+ *   label="Technician"
+ *   value={selected}
+ *   onSelectedOptionChange={setSelected}
+ *   loadOptions={async (search) => fetchTechnicians(search)}
+ * />
+ */
 export declare const SelectField: import('react').ForwardRefExoticComponent<SelectFieldProps & import('react').RefAttributes<SelectFieldHandle>>;

package/dist/src/beta/components/SelectField/internal/SelectFieldComboboxMode.d.ts

@@ -3,4 +3,4 @@ import { SelectFieldComboboxInternalProps } from '../../../../internal/types/sel
  * Combobox mode: searchable select using useCombobox.
  * This is the default behavior when disableSearch is false.
  */
-export declare const SelectFieldComboboxMode: ({ id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, labelAiMark, readOnly, required, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, debounceMs, }: SelectFieldComboboxInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFieldComboboxMode: ({ id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, labelAiMark, readOnly, required, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, debounceMs, addItemLabel, onAddNewItem, }: SelectFieldComboboxInternalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/beta/components/SelectField/internal/SelectFieldSelectMode.d.ts

@@ -3,4 +3,4 @@ import { SelectFieldBaseInternalProps } from '../../../../internal/types/selectF
  * Select mode: non-searchable select using useSelect.
  * Active when disableSearch is true.
  */
-export declare const SelectFieldSelectMode: ({ labelAiMark, id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, required, }: SelectFieldBaseInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectFieldSelectMode: ({ labelAiMark, id, helperUid, selectedOption, onSelectedOptionChange, displayAs, isDisabledOrReadOnly, disabled, readOnly, placeholder, size, error, hasHelperText, disableClearButton, prefix, suffix, label, hideLabel, hint, moreInfo, moreInfoId, errorMessages, warning, description, className, style, layoutStyles, pinned, groupToString, groupSorter, virtualize, options, loading, loadingMore, hasMore, loadOptions, loadMore, initialLoad, initialLoadPerformed, setInitialLoadPerformed, inputWrapperRef, required, addItemLabel, onAddNewItem, }: SelectFieldBaseInternalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 import { AriaAttributes, CSSProperties, ReactElement, ReactNode } from 'react';
 import { AiMarkWithTooltipOrPopoverProps, LayoutUtilProps, Size } from '../../../types';
 import { AvatarProps, ChipProps, IconProps } from '../../..';
+import { AddNewItemProps } from '../../../internal/types/addNewItemTypes';
 /**
  * Configuration options for the SelectField cache.
  * @property enabled - Whether caching is enabled. Defaults to true.
@@ -250,7 +251,7 @@ type SelectFieldCommonSelectFieldProps = {
      * @default false
      */
     disableSearch?: boolean;
-} & SelectFieldSearchProps & SelectFieldAddNewOptionProps & LayoutUtilProps;
+} & SelectFieldSearchProps & SelectFieldAddNewOptionProps & LayoutUtilProps & AddNewItemProps;
 type SelectFieldGroupingProps = {
     /**
      * Function to convert a group value to a display label.

package/dist/src/beta/components/SelectMenu/SelectMenu.d.ts

@@ -14,6 +14,7 @@ import { SelectMenuHandle, SelectMenuProps } from './types';
  * - Full accessibility support with ARIA attributes
  * - Controlled selection state
  * - Configurable popover width
+ * - Optional "Add new item" affordance below the option list with consumer-owned dialog
  *
  * @example
  * <SelectMenu

package/dist/src/beta/components/SelectMenu/types.d.ts

@@ -1,5 +1,6 @@
 import { KeyboardEvent, ReactElement, RefObject } from 'react';
 import { SelectFieldCacheOptions, SelectFieldEagerLoader, SelectFieldGroupByValue, SelectFieldGroupLazyLoader, SelectFieldGroupedOption, SelectFieldOffsetLazyLoader, SelectFieldOption, SelectFieldPageLazyLoader, SelectFieldPinnedOptions, SelectFieldSearchProps } from '../SelectField/types';
+import { AddNewItemProps } from '../../../internal/types/addNewItemTypes';
 export type SelectMenuOption = SelectFieldOption;
 export type SelectMenuGroupByValue = SelectFieldGroupByValue;
 export type SelectMenuGroupedOption = SelectFieldGroupedOption;
@@ -124,7 +125,7 @@ type SelectMenuCommonProps = {
      * @default 320
      */
     popoverWidth?: "reference" | number | string;
-} & SelectMenuSearchProps;
+} & SelectMenuSearchProps & AddNewItemProps;
 type SelectMenuGroupingProps = {
     /**
      * Function to convert a group value to a display label.

package/dist/src/internal/components/AddNewItemButton.d.ts

@@ -0,0 +1,40 @@
+import { AddNewItemProps } from '../types/addNewItemTypes';
+/**
+ * Props for the AddNewItemButton component.
+ *
+ * @property {string} searchText - The current search text, forwarded to the consumer's handler and label callback.
+ * @property {() => void} [onCloseMenu] - Internal hook for the host menu to close itself when the button is clicked. Fires before the consumer's handler.
+ * @extends AddNewItemProps
+ */
+export type AddNewItemButtonProps = AddNewItemProps & {
+    /** The current search text, forwarded to the consumer's handler and label callback. */
+    searchText: string;
+    /** Internal hook for the host menu to close itself when the button is clicked. */
+    onCloseMenu?: () => void;
+};
+/**
+ * AddNewItemButton renders the consumer's "Add new item" affordance for the
+ * Select* / MultiSelect* components. Positioning, padding, background tint,
+ * and the visual separator from the option list are owned by the surrounding
+ * popover/dialog footer slot — this component is only responsible for the
+ * button itself.
+ *
+ * Features:
+ * - Renders nothing when no `onAddNewItem` handler is provided
+ * - Static or dynamic label resolved against the current search text
+ * - Closes the host menu via `onCloseMenu` when clicked, before invoking the consumer's handler
+ *
+ * @example
+ * <AddNewItemButton
+ *   searchText={searchText}
+ *   addItemLabel={(s) => `Add "${s}"`}
+ *   onAddNewItem={(text) => openAddDialog(text)}
+ *   onCloseMenu={closeMenu}
+ * />
+ *
+ * @returns The button, or null when the feature is not enabled.
+ */
+export declare const AddNewItemButton: {
+    ({ searchText, addItemLabel, onAddNewItem, onCloseMenu, }: AddNewItemButtonProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/src/internal/components/OptionsDialog/OptionsDialog.d.ts

@@ -1,5 +1,5 @@
 import { FocusableElement } from '../../..';
-export declare const OptionsDialog: ({ id, isOpen, onClose, field, children, title, initialFocusResolver, }: {
+export declare const OptionsDialog: ({ id, isOpen, onClose, field, children, title, initialFocusResolver, footer, }: {
     id: string;
     isOpen: boolean;
     onClose: () => void;
@@ -7,4 +7,6 @@ export declare const OptionsDialog: ({ id, isOpen, onClose, field, children, tit
     field?: React.ReactNode;
     children: React.ReactNode;
     initialFocusResolver?: (focusables: FocusableElement[]) => FocusableElement;
+    /** Optional content rendered below the dialog body. */
+    footer?: React.ReactNode;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/src/internal/components/OptionsPopover/OptionsPopover.d.ts

@@ -4,7 +4,13 @@ export type OptionsPopoverProps = {
     children: ReactNode;
     referenceElement: RefObject<HTMLElement>;
     open: boolean;
-    onClickOutside: () => void;
+    /**
+     * Fired when the popover should close — either because the user clicked
+     * outside it, focus moved to an element outside the popover or its
+     * reference (trigger) element, or the user pressed Escape inside the
+     * popover.
+     */
+    onClose: () => void;
     /** Controls the popover width strategy.
      * - `"reference"` — match the reference element's width
      * - `number` — fixed width in px
@@ -12,5 +18,11 @@ export type OptionsPopoverProps = {
      * - `undefined` (default) — intrinsic sizing (`max-content`)
      */
     width?: "reference" | number | string;
+    /**
+     * Optional content rendered as a full-bleed footer region inside the popover
+     * shell, separated from the body by a top border. The popover suppresses its
+     * own bottom padding so the footer can hug the popover's lower edge.
+     */
+    footer?: ReactNode;
 };
 export declare const OptionsPopover: (props: OptionsPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/internal/types/addNewItemTypes.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+/**
+ * Shared prop set for the "Add new item" affordance available on
+ * SelectField, SelectMenu, MultiSelectField, and MultiSelectMenu.
+ *
+ * @property addItemLabel - Label rendered inside the "Add new item" button. May be a static node or a callback that receives the current search text and returns a dynamic label (e.g. `Add "${searchText}"`). When omitted but `onAddNewItem` is provided, falls back to `"Add new item"`.
+ * @property onAddNewItem - Click handler for the "Add new item" button. Presence of this prop is what gates rendering the button. Receives the current search text. The menu auto-closes synchronously on click; the handler runs immediately after — typically opening a Dialog or Drawer to collect the new item's details. Consumers manage their own overlay presentation, focus return, option list updates, and selection state.
+ */
+export type AddNewItemProps = {
+    addItemLabel?: ReactNode | ((searchText: string) => ReactNode);
+    onAddNewItem?: (searchText: string) => void;
+};

package/dist/src/internal/types/selectFieldInternalTypes.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode, RefObject } from 'react';
 import { AiMarkWithTooltipOrPopoverProps, CheckState } from '../../types';
 import { SelectFieldOption, SelectFieldProps } from '../../beta/components/SelectField/types';
+import { AddNewItemProps } from './addNewItemTypes';
 /**
  * Metadata about list sections for rendering purposes.
  * Used by SelectOptions, MultiSelectOptions, and their Menu counterparts to render section headers and dividers.
@@ -62,7 +63,7 @@ export type SelectFieldBaseInternalProps = {
     initialLoadPerformed: boolean;
     setInitialLoadPerformed: (val: boolean) => void;
     inputWrapperRef: RefObject<HTMLDivElement>;
-};
+} & AddNewItemProps;
 export type SelectFieldComboboxInternalProps = SelectFieldBaseInternalProps & {
     debounceMs: number;
 };

package/dist/{syncFilterUtils-hlw11Ud8.js → syncFilterUtils-Dpp7gt05.js}

@@ -23,6 +23,7 @@ import { S as SvgClose } from './close-DZj38AEh.js';
 import { D as DialogContext } from './DialogContext-DBgtApl9.js';
 import { t as tabbable } from './usePopoverTransitionStates-CDXCdyKa.js';
 import { u as useDialogScrollLock } from './useDialogScrollLock-BW-aVboo.js';
+import { S as SvgAdd } from './add-BcQkAUip.js';
 import { u as useBreakpoint } from './useBreakpoint-CeaUyHxh.js';
 import { m as matchSorter } from './match-sorter.esm-CGAauEiU.js';
 
@@ -177,18 +178,18 @@ function useSelectFieldLoading(config) {
   };
 }
 
-const empty = "_empty_x5qls_7";
-const scroller = "_scroller_x5qls_23";
-const divider = "_divider_x5qls_57";
+const empty = "_empty_1stqb_7";
+const scroller = "_scroller_1stqb_23";
+const divider = "_divider_1stqb_59";
 const styles$3 = {
-	"select-field-list": "_select-field-list_x5qls_2",
+	"select-field-list": "_select-field-list_1stqb_2",
 	empty: empty,
-	"load-more": "_load-more_x5qls_15",
+	"load-more": "_load-more_1stqb_15",
 	scroller: scroller,
-	"scroll-sentinel": "_scroll-sentinel_x5qls_32",
-	"pinned-section": "_pinned-section_x5qls_40",
-	"pinned-section-header": "_pinned-section-header_x5qls_44",
-	"pinned-section-list": "_pinned-section-list_x5qls_51",
+	"scroll-sentinel": "_scroll-sentinel_1stqb_34",
+	"pinned-section": "_pinned-section_1stqb_42",
+	"pinned-section-header": "_pinned-section-header_1stqb_46",
+	"pinned-section-list": "_pinned-section-list_1stqb_53",
 	divider: divider
 };
 
@@ -903,7 +904,9 @@ function useDebouncedCallback(callback, delay = 300) {
 }
 
 const styles$1 = {
-	"options-popover": "_options-popover_12bid_2"
+	"options-popover": "_options-popover_1a8y0_2",
+	"options-popover-body": "_options-popover-body_1a8y0_39",
+	"options-popover-footer": "_options-popover-footer_1a8y0_48"
 };
 
 function resolveWidth(width, referenceWidth) {
@@ -914,10 +917,17 @@ function resolveWidth(width, referenceWidth) {
 }
 const OptionsPopover = (props) => {
   const ref = useRef(null);
-  const { id, children, referenceElement, open, onClickOutside, width } = props;
+  const { id, children, referenceElement, open, onClose, width, footer } = props;
+  const lastCloseRef = useRef(0);
+  const safeClose = useCallback(() => {
+    const now = Date.now();
+    if (now - lastCloseRef.current < 50) return;
+    lastCloseRef.current = now;
+    onClose();
+  }, [onClose]);
   useOnClickOutside({
     targets: [ref.current ?? void 0, referenceElement.current ?? void 0],
-    onClickOutside,
+    onClickOutside: safeClose,
     disable: !open
   });
   useEffect(() => {
@@ -927,6 +937,36 @@ const OptionsPopover = (props) => {
       ref.current?.hidePopover();
     }
   }, [open]);
+  useEffect(() => {
+    if (!open) return;
+    const popoverEl = ref.current;
+    if (!popoverEl) return;
+    const handleFocusOut = (e) => {
+      const next = e.relatedTarget;
+      if (!next) {
+        safeClose();
+        return;
+      }
+      if (popoverEl.contains(next)) return;
+      const trigger = referenceElement.current;
+      if (trigger && trigger.contains(next)) return;
+      safeClose();
+    };
+    popoverEl.addEventListener("focusout", handleFocusOut);
+    return () => popoverEl.removeEventListener("focusout", handleFocusOut);
+  }, [open, safeClose, referenceElement]);
+  useEffect(() => {
+    if (!open) return;
+    const popoverEl = ref.current;
+    if (!popoverEl) return;
+    const handleKeyDown = (e) => {
+      if (e.key !== "Escape" || e.defaultPrevented) return;
+      e.preventDefault();
+      safeClose();
+    };
+    popoverEl.addEventListener("keydown", handleKeyDown);
+    return () => popoverEl.removeEventListener("keydown", handleKeyDown);
+  }, [open, safeClose]);
   const updatePosition = useCallback(async () => {
     if (!ref.current || !referenceElement.current) return;
     const position = await computePosition(
@@ -973,27 +1013,32 @@ const OptionsPopover = (props) => {
       cleanup();
     };
   }, [referenceElement, ref, updatePosition, open]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       id,
       className: styles$1["options-popover"],
       popover: "manual",
-      children
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles$1["options-popover-body"], children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: styles$1["options-popover-footer"], children: footer }) : null
+      ]
     }
   );
 };
 
-const header = "_header_3g90c_40";
-const field = "_field_3g90c_2";
-const content = "_content_3g90c_53";
+const header = "_header_1v2a3_41";
+const field = "_field_1v2a3_2";
+const content = "_content_1v2a3_54";
+const footer = "_footer_1v2a3_60";
 const styles = {
-	"field-dialog": "_field-dialog_3g90c_2",
-	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_3g90c_20",
+	"field-dialog": "_field-dialog_1v2a3_2",
+	"field-dialog-visual-viewport-height": "_field-dialog-visual-viewport-height_1v2a3_21",
 	header: header,
 	field: field,
-	content: content
+	content: content,
+	footer: footer
 };
 
 const OptionsDialog = ({
@@ -1003,7 +1048,8 @@ const OptionsDialog = ({
   field,
   children,
   title,
-  initialFocusResolver
+  initialFocusResolver,
+  footer
 }) => {
   const elRef = useRef(null);
   const visualViewportHeightRef = useRef(null);
@@ -1080,7 +1126,8 @@ const OptionsDialog = ({
               ) }) })
             ] }),
             field ? /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["field"], children: field }) : null,
-            /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["content"], children })
+            /* @__PURE__ */ jsx(Flex, { direction: "column", className: styles["content"], children }),
+            footer ? /* @__PURE__ */ jsx("div", { className: styles["footer"], children: footer }) : null
           ]
         }
       )
@@ -1088,6 +1135,31 @@ const OptionsDialog = ({
   );
 };
 
+const AddNewItemButton = ({
+  searchText,
+  addItemLabel,
+  onAddNewItem,
+  onCloseMenu
+}) => {
+  if (!onAddNewItem) return null;
+  const resolvedLabel = typeof addItemLabel === "function" ? addItemLabel(searchText) : addItemLabel ?? "Add new item";
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      appearance: "secondary",
+      size: "small",
+      icon: { before: SvgAdd },
+      onClick: () => {
+        onCloseMenu?.();
+        onAddNewItem(searchText);
+      },
+      style: { width: "100%" },
+      children: resolvedLabel
+    }
+  );
+};
+AddNewItemButton.displayName = "AddNewItemButton";
+
 const DEFAULT_CACHE_SIZE = 15;
 const STATIC_CACHE_KEY = "__static__";
 function cacheSet(sectionCache, key, value, maxSize) {
@@ -1501,5 +1573,5 @@ const sortByGroup = (options, groupSorter) => {
   });
 };
 
-export { OptionsPanel as O, VirtualizedOptionsPanel as V, useSelectOrchestration as a, useProcessedOptions as b, buildSelectItems as c, useDebouncedCallback as d, OptionsDialog as e, OptionsPopover as f, defaultSyncFilter as g, toSelectItem as h, sortByGroup as s, toSyncFilterFn as t, useAdaptiveView as u };
-//# sourceMappingURL=syncFilterUtils-hlw11Ud8.js.map
+export { AddNewItemButton as A, OptionsPanel as O, VirtualizedOptionsPanel as V, useSelectOrchestration as a, useProcessedOptions as b, buildSelectItems as c, useDebouncedCallback as d, OptionsDialog as e, OptionsPopover as f, defaultSyncFilter as g, toSelectItem as h, sortByGroup as s, toSyncFilterFn as t, useAdaptiveView as u };
+//# sourceMappingURL=syncFilterUtils-Dpp7gt05.js.map