@jobber/components 6.101.4 → 6.101.5-JOB-140604-4487daa.55

package/dist/Autocomplete/Autocomplete.types.d.ts

@@ -1,6 +1,14 @@
 import type { CSSProperties, Key, Ref, RefObject } from "react";
+import type { AriaInputProps, FocusEvents, HTMLInputBaseProps, RebuiltInputCommonProps } from "../sharedHelpers/types";
 import type { FormFieldProps } from "../FormField";
 import type { InputTextRebuiltProps, InputTextRef } from "../InputText";
+/**
+ * ARIA attributes for Autocomplete with managed/orchestrated behavior.
+ * Certain ARIA attributes are controlled internally by Autocomplete's
+ * state management and floating-ui integration and shouldn't be overridden.
+ */
+interface AriaInputPropsManaged extends Omit<AriaInputProps, "aria-controls" | "aria-expanded" | "aria-activedescendant" | "aria-autocomplete"> {
+}
 export type ExtraProps = Record<string, unknown>;
 type OptionValue = string | number;
 export interface BaseOption {
@@ -222,8 +230,7 @@ export type MenuFooter<Extra extends object = ExtraProps> = Extra & {
 };
 export type MenuItem<T extends OptionLike, SectionExtra extends object = ExtraProps, ActionExtra extends object = ExtraProps> = MenuSection<T, SectionExtra, ActionExtra> | MenuOptions<T, ActionExtra> | MenuHeader<ActionExtra> | MenuFooter<ActionExtra>;
 export type AutocompleteValue<Value extends OptionLike, Multiple extends boolean> = Multiple extends true ? Value[] : Value | undefined;
-interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> {
-    version: 2;
+interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extends boolean, SectionExtra extends object, ActionExtra extends object> extends AriaInputPropsManaged, Pick<HTMLInputBaseProps, "name" | "disabled" | "readOnly" | "autoFocus">, Pick<RebuiltInputCommonProps, "placeholder" | "error" | "invalid" | "loading" | "description" | "size" | "prefix" | "suffix" | "version">, FocusEvents<HTMLInputElement | HTMLTextAreaElement> {
     /**
      * Whether the autocomplete allows multiple selections.
      * WARNING: This is currently incomplete and will not display selections, only data is returned.
@@ -243,14 +250,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      * Callback invoked when the input value changes.
      */
     readonly onInputChange: (value: string) => void;
-    /**
-     * Callback invoked when the input is blurred.
-     */
-    readonly onBlur?: () => void;
-    /**
-     * Callback invoked when the input is focused.
-     */
-    readonly onFocus?: () => void;
     /**
      * Custom equality for input text to option mapping.
      * Defaults to case-sensitive label equality via getOptionLabel.
@@ -380,46 +379,12 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
     }) => MenuAction<ActionExtra>[]);
     /**
      * Whether the menu should open when the input gains focus.
+     * Note: Clicking on the input will always open the menu.
+     * openOnFocus only determines the behavior of focus events such as tabs or programmatic focus.
      *
      * @default true
      */
     readonly openOnFocus?: boolean;
-    /**
-     * The placeholder text for the input.
-     */
-    readonly placeholder?: string;
-    /**
-     * Whether the input is disabled.
-     */
-    readonly disabled?: boolean;
-    /**
-     * Error message to display below the input
-     * When present, invalid appearance applied to the input
-     */
-    readonly error?: string;
-    /**
-     * Whether the input is invalid. Receives invalid appearance.
-     */
-    readonly invalid?: boolean;
-    /**
-     * Whether the input is read-only.
-     * @default false
-     */
-    readonly readOnly?: boolean;
-    /**
-     * Description to display below the input
-     */
-    readonly description?: string;
-    /**
-     * Name of the input for form submission
-     */
-    readonly name?: string;
-    /**
-     * Size of the input
-     */
-    readonly size?: InputTextRebuiltProps["size"];
-    readonly suffix?: InputTextRebuiltProps["suffix"];
-    readonly prefix?: InputTextRebuiltProps["prefix"];
     /**
      * Callback invoked when the menu opens.
      *
@@ -430,11 +395,6 @@ interface AutocompleteRebuiltBaseProps<Value extends OptionLike, Multiple extend
      *
      */
     readonly onClose?: () => void;
-    /**
-     * Whether the menu is loading.
-     * Displays glimmers in the menu
-     */
-    readonly loading?: boolean;
     /**
      * Custom render prop for content to render when `loading` is true.
      */

package/dist/Autocomplete/components/MenuList.d.ts

@@ -6,7 +6,7 @@ interface MenuListProps<T extends OptionLike> {
     readonly activeIndex: number | null;
     readonly indexOffset?: number;
     readonly getItemProps: (userProps?: Record<string, unknown>) => Record<string, unknown>;
-    readonly listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+    readonly listRef: React.RefObject<Array<HTMLElement | null>>;
     readonly listboxId: string;
     readonly customRenderOption?: AutocompleteRebuiltProps<T, false>["customRenderOption"];
     readonly customRenderSection?: AutocompleteRebuiltProps<T, false>["customRenderSection"];
@@ -14,6 +14,7 @@ interface MenuListProps<T extends OptionLike> {
     readonly getOptionLabel: (option: T) => string;
     readonly onSelect: (option: T) => void;
     readonly onAction: (action: ActionConfig) => void;
+    readonly onInteractionPointerDown: (e: React.PointerEvent) => void;
     readonly isOptionSelected: (option: T) => boolean;
     readonly slotOverrides?: {
         option?: {
@@ -30,7 +31,7 @@ interface MenuListProps<T extends OptionLike> {
         };
     };
 }
-export declare function MenuList<T extends OptionLike>({ items, activeIndex, indexOffset, getItemProps, listRef, listboxId, customRenderOption, customRenderSection, customRenderAction, getOptionLabel, onSelect, onAction, isOptionSelected, slotOverrides, }: MenuListProps<T>): React.JSX.Element;
+export declare function MenuList<T extends OptionLike>({ items, activeIndex, indexOffset, getItemProps, listRef, listboxId, customRenderOption, customRenderSection, customRenderAction, getOptionLabel, onSelect, onAction, onInteractionPointerDown, isOptionSelected, slotOverrides, }: MenuListProps<T>): React.JSX.Element;
 export declare function DefaultActionContent({ textContent, }: {
     readonly textContent: string;
 }): React.JSX.Element;

package/dist/Autocomplete/components/PersistentRegion.d.ts

@@ -7,12 +7,13 @@ interface PersistentRegionProps<T extends OptionLike> {
     readonly indexOffset: number;
     readonly listboxId?: string;
     readonly getItemProps: (args?: Record<string, unknown>) => Record<string, unknown>;
-    readonly listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+    readonly listRef: React.RefObject<Array<HTMLElement | null>>;
     readonly customRenderHeader?: AutocompleteRebuiltProps<T, false>["customRenderHeader"];
     readonly customRenderFooter?: AutocompleteRebuiltProps<T, false>["customRenderFooter"];
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly onAction: (action: ActionConfig) => void;
+    readonly onInteractionPointerDown: (e: React.PointerEvent) => void;
 }
-export declare function PersistentRegion<T extends OptionLike>({ items, position, activeIndex, indexOffset, getItemProps, listRef, customRenderHeader, customRenderFooter, className, style, onAction, }: PersistentRegionProps<T>): React.JSX.Element | null;
+export declare function PersistentRegion<T extends OptionLike>({ items, position, activeIndex, indexOffset, getItemProps, listRef, customRenderHeader, customRenderFooter, className, style, onAction, onInteractionPointerDown, }: PersistentRegionProps<T>): React.JSX.Element | null;
 export {};

package/dist/Autocomplete/hooks/useAutocompleteListNav.d.ts

@@ -8,7 +8,7 @@ export interface UseAutocompleteListNavReturn {
     getItemProps: UseInteractionsReturn["getItemProps"];
     activeIndex: number | null;
     setActiveIndex: (index: number | null) => void;
-    listRef: React.MutableRefObject<Array<HTMLElement | null>>;
+    listRef: React.RefObject<Array<HTMLElement | null>>;
     open: boolean;
     setOpen: (open: boolean) => void;
     setReferenceElement: (el: HTMLElement | null) => void;
@@ -18,5 +18,6 @@ export interface UseAutocompleteListNavProps {
     shouldResetActiveIndexOnClose?: () => boolean;
     onMenuClose?: (reason?: string) => void;
     selectedIndex?: number | null;
+    readOnly?: boolean;
 }
-export declare function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuClose, selectedIndex, }: UseAutocompleteListNavProps): UseAutocompleteListNavReturn;
+export declare function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuClose, selectedIndex, readOnly, }: UseAutocompleteListNavProps): UseAutocompleteListNavReturn;

package/dist/Autocomplete/index.cjs

@@ -13,6 +13,7 @@ var Icon = require('../Icon-cjs.js');
 var InputText_index = require('../InputText/index.cjs');
 var Glimmer = require('../Glimmer-cjs.js');
 var FormField = require('../FormField-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
@@ -20,18 +21,6 @@ require('react-hook-form');
 require('framer-motion');
 require('../Button-cjs.js');
 require('react-router-dom');
-require('../omit-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../_baseGet-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../identity-cjs.js');
-require('../_getTag-cjs.js');
-require('../isSymbol-cjs.js');
-require('../keysIn-cjs.js');
-require('../_baseAssignValue-cjs.js');
-require('../_baseFlatten-cjs.js');
-require('../_setToString-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
@@ -140,7 +129,7 @@ function invokeActiveItemOnEnter(event, activeIndex, renderable, onSelect, onAct
 
 const MENU_OFFSET = design.tokens["space-small"];
 const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
-function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuClose, selectedIndex, }) {
+function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuClose, selectedIndex, readOnly = false, }) {
     const [open, setOpen] = React.useState(false);
     const [activeIndex, setActiveIndex] = React.useState(null);
     const listRef = React.useRef([]);
@@ -172,6 +161,10 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             }),
         ],
     });
+    const click = floatingUi_react.useClick(context, {
+        enabled: !readOnly,
+        toggle: false, // Only open, never close on click
+    });
     const listNav = floatingUi_react.useListNavigation(context, {
         listRef,
         activeIndex,
@@ -193,7 +186,7 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
         escapeKey: true,
         outsidePressEvent: "click",
     });
-    const { getReferenceProps, getFloatingProps, getItemProps } = floatingUi_react.useInteractions([listNav, dismiss]);
+    const { getReferenceProps, getFloatingProps, getItemProps } = floatingUi_react.useInteractions([click, listNav, dismiss]);
     React.useEffect(() => {
         listRef.current.length = navigableCount;
         setActiveIndex(prev => {
@@ -220,11 +213,34 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
     };
 }
 
+/**
+ * Handler that prevents default pointer behavior.
+ * Used to prevent blur/focus issues when clicking on non-interactive menu elements.
+ */
+function preventDefaultPointerDown(e) {
+    e.preventDefault();
+}
+/**
+ * Creates a handler for pointer down events on interactive menu items (options/actions).
+ * Prevents default to avoid blur and sets flag for focus management.
+ *
+ * @param isHandlingMenuInteractionRef - Ref to track if a menu interaction is in progress
+ * @returns A pointer down event handler
+ */
+function createInteractionPointerDownHandler(isHandlingMenuInteractionRef) {
+    return (e) => {
+        e.preventDefault();
+        // Set flag to prevent blur/focus handlers from interfering
+        isHandlingMenuInteractionRef.current = true;
+    };
+}
+
 // Keeping this hook cohesive improves readability by centralizing related
 // interactions and state transitions.
 // eslint-disable-next-line max-statements
 function useAutocomplete(props) {
     const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
+    const isHandlingMenuInteractionRef = React.useRef(false);
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = jobberHooks.useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = React.useCallback((opt) => {
@@ -267,7 +283,8 @@ function useAutocomplete(props) {
     const [debouncedInputValue, setDebouncedInputValue] = React.useState(inputValue);
     const debouncedSetter = jobberHooks.useDebounce(setDebouncedInputValue, debounceMs);
     React.useEffect(() => {
-        if (debounceMs === 0) {
+        // Skip debounce when clearing input for immediate feedback, preventing flickering of last selected item
+        if (debounceMs === 0 || inputValue === "") {
             setDebouncedInputValue(inputValue);
             return;
         }
@@ -357,6 +374,7 @@ function useAutocomplete(props) {
         navigableCount: totalNavigableCount,
         shouldResetActiveIndexOnClose: () => !hasSelection,
         selectedIndex,
+        readOnly,
         onMenuClose: () => {
             if (props.allowFreeForm !== true) {
                 const hasText = inputValue.trim().length > 0;
@@ -368,7 +386,6 @@ function useAutocomplete(props) {
             }
         },
     });
-    const [inputFocused, setInputFocused] = React.useState(false);
     // Handles activeIndex reset and, in single-select mode only, clearing selection when input is empty
     React.useEffect(() => {
         const hasText = inputValue.trim().length > 0;
@@ -464,13 +481,24 @@ function useAutocomplete(props) {
         selectOption(option);
         // Might not always want to close on selection. Multi for example.
         setOpen(false);
+        if (refs.domReference.current instanceof HTMLElement) {
+            refs.domReference.current.focus();
+        }
     }, [selectOption, setOpen]);
     const onAction = React.useCallback((action) => {
         action.run();
         setActiveIndex(null);
         if (action.closeOnRun !== false)
             setOpen(false);
+        if (refs.domReference.current instanceof HTMLElement) {
+            refs.domReference.current.focus();
+        }
     }, [setOpen, setActiveIndex]);
+    /**
+     * Handler for mousedown on interactive menu items (options/actions)
+     * Prevents default to avoid blur and sets flag for focus management
+     */
+    const onInteractionPointerDown = React.useMemo(() => createInteractionPointerDownHandler(isHandlingMenuInteractionRef), []);
     function commitFromInputText(inputText) {
         var _a;
         if (inputText.length === 0)
@@ -510,18 +538,24 @@ function useAutocomplete(props) {
         multiple,
         value,
     ]);
-    const onInputFocus = React.useCallback(() => {
+    const onInputFocus = React.useCallback((event) => {
         var _a;
-        setInputFocused(true);
-        if (!readOnly && openOnFocus)
+        if (!readOnly && openOnFocus && !isHandlingMenuInteractionRef.current) {
             setOpen(true);
-        (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props);
+        }
+        // Only call user's onFocus for genuine focus events, not programmatic restorations
+        if (!isHandlingMenuInteractionRef.current) {
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        }
+        isHandlingMenuInteractionRef.current = false;
     }, [props.onFocus, readOnly, openOnFocus, setOpen]);
-    const onInputBlur = React.useCallback(() => {
+    const onInputBlur = React.useCallback((event) => {
         var _a, _b;
-        setInputFocused(false);
+        if (isHandlingMenuInteractionRef.current) {
+            return;
+        }
         if (readOnly) {
-            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
             return;
         }
         if (props.allowFreeForm === true) {
@@ -533,7 +567,7 @@ function useAutocomplete(props) {
             tryRestoreInputToSelectedLabel();
         }
         lastInputWasUser.current = false;
-        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props);
+        (_b = props.onBlur) === null || _b === void 0 ? void 0 : _b.call(props, event);
     }, [
         readOnly,
         props.allowFreeForm,
@@ -625,11 +659,11 @@ function useAutocomplete(props) {
             setActiveIndex(null);
         }
         // Important: update open state before propagating the change so that downstream effects
-        // don’t see an intermediate state where inputValue changed but open was stale
+        // don't see an intermediate state where inputValue changed but open was stale
         if (!readOnly) {
             const hasText = val.trim().length > 0;
             const mustSelectFromOptions = hasText && !props.allowFreeForm;
-            const keepOpenOnEmpty = openOnFocus && inputFocused;
+            const keepOpenOnEmpty = openOnFocus;
             setOpen(mustSelectFromOptions || keepOpenOnEmpty);
         }
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(val);
@@ -640,7 +674,6 @@ function useAutocomplete(props) {
         readOnly,
         props.allowFreeForm,
         openOnFocus,
-        inputFocused,
         setOpen,
     ]);
     return {
@@ -669,6 +702,7 @@ function useAutocomplete(props) {
         // actions
         onSelection,
         onAction,
+        onInteractionPointerDown,
         // input handlers
         onInputChangeFromUser,
         onInputBlur,
@@ -679,7 +713,7 @@ function useAutocomplete(props) {
     };
 }
 
-function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef, listboxId, customRenderOption, customRenderSection, customRenderAction, getOptionLabel, onSelect, onAction, isOptionSelected, slotOverrides, }) {
+function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef, listboxId, customRenderOption, customRenderSection, customRenderAction, getOptionLabel, onSelect, onAction, onInteractionPointerDown, isOptionSelected, slotOverrides, }) {
     let navigableIndex = -1;
     function renderItemNode(item) {
         var _a, _b, _c, _d, _e, _f;
@@ -703,6 +737,7 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
                 customRenderOption,
                 getOptionLabel,
                 onSelect,
+                onInteractionPointerDown,
                 indexOffset,
                 optionClassName: (_c = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.option) === null || _c === void 0 ? void 0 : _c.className,
                 optionStyle: (_d = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.option) === null || _d === void 0 ? void 0 : _d.style,
@@ -719,6 +754,7 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
             listboxId,
             customRenderAction,
             onAction,
+            onInteractionPointerDown,
             indexOffset,
             actionClassName: (_e = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.action) === null || _e === void 0 ? void 0 : _e.className,
             actionStyle: (_f = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.action) === null || _f === void 0 ? void 0 : _f.style,
@@ -732,12 +768,12 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
 function handleSectionRendering({ customRenderSection, section, sectionClassName, sectionStyle, }) {
     var _a;
     const headerContent = customRenderSection ? (customRenderSection(section)) : (React.createElement(DefaultSectionContent, { section: section }));
-    return (React.createElement("div", { key: `section-${String((_a = section.key) !== null && _a !== void 0 ? _a : section.label)}`, role: "presentation", tabIndex: -1, "data-testid": "ATL-AutocompleteRebuilt-Section", className: classnames(styles$1.section, styles$1.stickyTop, sectionClassName), style: sectionStyle }, headerContent));
+    return (React.createElement("div", { key: `section-${String((_a = section.key) !== null && _a !== void 0 ? _a : section.label)}`, role: "presentation", tabIndex: -1, "data-testid": "ATL-AutocompleteRebuilt-Section", className: classnames(styles$1.section, styles$1.stickyTop, sectionClassName), style: sectionStyle, onPointerDown: preventDefaultPointerDown }, headerContent));
 }
 function DefaultSectionContent({ section, }) {
     return React.createElement(Heading.Heading, { level: 5 }, section.label);
 }
-function handleOptionRendering({ option, activeIndex, navigableIndex, getItemProps, listRef, listboxId, isOptionSelected, customRenderOption, getOptionLabel, onSelect, indexOffset = 0, optionClassName, optionStyle, }) {
+function handleOptionRendering({ option, activeIndex, navigableIndex, getItemProps, listRef, listboxId, isOptionSelected, customRenderOption, getOptionLabel, onSelect, onInteractionPointerDown, indexOffset = 0, optionClassName, optionStyle, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === nextNavigableIndex;
@@ -751,6 +787,7 @@ function handleOptionRendering({ option, activeIndex, navigableIndex, getItemPro
                     listRef.current[idx] = node;
             },
             onClick: () => onSelect(option),
+            onPointerDown: onInteractionPointerDown,
             className: classnames(styles$1.option, isActive && styles$1.optionActive, optionClassName),
             style: optionStyle,
         }), { role: "option", tabIndex: -1, "aria-selected": isSelected ? true : false, id: `${listboxId}-item-${nextNavigableIndex + indexOffset}`, "data-index": nextNavigableIndex + indexOffset, "data-active": isActive ? true : undefined }), optionContent)),
@@ -762,7 +799,7 @@ function DefaultOptionContent({ isSelected, text, }) {
         React.createElement("div", { className: styles$1.icon }, isSelected && React.createElement(Icon.Icon, { name: "checkmark", size: "small" })),
         React.createElement(Text.Text, null, text)));
 }
-function handleActionRendering({ action, activeIndex, navigableIndex, getItemProps, listRef, listboxId, customRenderAction, onAction, indexOffset = 0, actionClassName, actionStyle, origin, }) {
+function handleActionRendering({ action, activeIndex, navigableIndex, getItemProps, listRef, listboxId, customRenderAction, onAction, onInteractionPointerDown, indexOffset = 0, actionClassName, actionStyle, origin, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === nextNavigableIndex;
@@ -780,6 +817,7 @@ function handleActionRendering({ action, activeIndex, navigableIndex, getItemPro
                 closeOnRun: action.shouldClose,
             });
         },
+        onPointerDown: onInteractionPointerDown,
         className: classnames(styles$1.action, isActive && styles$1.actionActive, actionClassName),
         style: actionStyle,
     });
@@ -797,7 +835,7 @@ function DefaultActionContent({ textContent, }) {
         } }, textContent));
 }
 
-function PersistentRegion({ items, position, activeIndex, indexOffset, getItemProps, listRef, customRenderHeader, customRenderFooter, className, style, onAction, }) {
+function PersistentRegion({ items, position, activeIndex, indexOffset, getItemProps, listRef, customRenderHeader, customRenderFooter, className, style, onAction, onInteractionPointerDown, }) {
     if (!items || items.length === 0)
         return null;
     let navigableIndex = -1;
@@ -812,13 +850,14 @@ function PersistentRegion({ items, position, activeIndex, indexOffset, getItemPr
             customRenderFooter,
             listRef,
             onAction,
+            onInteractionPointerDown,
             navigableIndex,
         });
         navigableIndex = result.nextNavigableIndex;
         return result.node;
     })));
 }
-function handlePersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, navigableIndex, }) {
+function handlePersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, onInteractionPointerDown, navigableIndex, }) {
     const interactive = Boolean(persistent.onClick);
     if (!interactive) {
         const node = handleTextPersistentRendering({
@@ -839,6 +878,7 @@ function handlePersistentRendering({ persistent, position, activeIndex, indexOff
         customRenderFooter,
         listRef,
         onAction,
+        onInteractionPointerDown,
         navigableIndex,
     });
 }
@@ -854,9 +894,9 @@ function handleTextPersistentRendering({ persistent, position, customRenderHeade
     else {
         content = React.createElement(DefaultTextPersistentContent, { persistent: persistent });
     }
-    return (React.createElement("div", { key: `persistent-${position}-${String((_a = persistent.key) !== null && _a !== void 0 ? _a : persistent.label)}`, role: "presentation", tabIndex: -1, className: styles$1.textPersistent }, content));
+    return (React.createElement("div", { key: `persistent-${position}-${String((_a = persistent.key) !== null && _a !== void 0 ? _a : persistent.label)}`, role: "presentation", tabIndex: -1, className: styles$1.textPersistent, onPointerDown: preventDefaultPointerDown }, content));
 }
-function handleActionPersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, navigableIndex, }) {
+function handleActionPersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, onInteractionPointerDown, navigableIndex, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === indexOffset + nextNavigableIndex;
@@ -883,13 +923,16 @@ function handleActionPersistentRendering({ persistent, position, activeIndex, in
                 if (persistNode)
                     listRef.current[idx] = persistNode;
             },
-            onClick: () => onAction({
-                run: () => {
-                    var _a;
-                    (_a = persistent.onClick) === null || _a === void 0 ? void 0 : _a.call(persistent);
-                },
-                closeOnRun: persistent.shouldClose,
-            }),
+            onClick: () => {
+                onAction({
+                    run: () => {
+                        var _a;
+                        (_a = persistent.onClick) === null || _a === void 0 ? void 0 : _a.call(persistent);
+                    },
+                    closeOnRun: persistent.shouldClose,
+                });
+            },
+            onPointerDown: onInteractionPointerDown,
             className: classnames(styles$1.action, isActive && styles$1.actionActive),
         }), { role: "button", tabIndex: -1 }), content)),
         nextNavigableIndex,
@@ -904,7 +947,7 @@ const AutocompleteRebuilt = React.forwardRef(AutocompleteRebuiltInternal);
 function AutocompleteRebuiltInternal(props, forwardedRef) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     const { inputValue, placeholder, disabled, error, invalid, description, size: sizeProp, loading = false, } = props;
-    const { renderable, optionCount, persistentsHeaders, persistentsFooters, headerInteractiveCount, middleNavigableCount, getOptionLabel, isOptionSelected, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, activeIndex, open, listRef, onSelection, onAction, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
+    const { renderable, optionCount, persistentsHeaders, persistentsFooters, headerInteractiveCount, middleNavigableCount, getOptionLabel, isOptionSelected, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, activeIndex, open, listRef, onSelection, onAction, onInteractionPointerDown, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
     const listboxId = React.useId();
     // Provides mount/unmount-aware transition styles for the floating element
     const { isMounted, styles: transitionStyles } = floatingUi_react.useTransitionStyles(context, {
@@ -920,10 +963,11 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         onFocus: onInputFocus,
         onBlur: onInputBlur,
     });
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
-        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
+    const dataAttrs = filterDataAttributes.filterDataAttributes(props);
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
-            : undefined });
+            : undefined }), dataAttrs);
     const referenceInputRef = (node) => {
         setReferenceElement(node);
         // Workaround to get the width of the visual InputText element, which is not the same as
@@ -963,10 +1007,10 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                         ? { width: menuWidth, maxWidth: menuWidth }
                         : {})),
                 })),
-                    React.createElement(PersistentRegion, { items: persistentsHeaders, position: "header", activeIndex: activeIndex, indexOffset: 0, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, onAction: onAction, className: classnames(styles$1.persistentHeader, (_c = props.UNSAFE_className) === null || _c === void 0 ? void 0 : _c.header), style: (_d = props.UNSAFE_styles) === null || _d === void 0 ? void 0 : _d.header }),
+                    React.createElement(PersistentRegion, { items: persistentsHeaders, position: "header", activeIndex: activeIndex, indexOffset: 0, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentHeader, (_c = props.UNSAFE_className) === null || _c === void 0 ? void 0 : _c.header), style: (_d = props.UNSAFE_styles) === null || _d === void 0 ? void 0 : _d.header }),
                     React.createElement("div", { className: styles$1.scrollRegion }, loading ? ((_e = props.customRenderLoading) !== null && _e !== void 0 ? _e : React.createElement(LoadingContent, null)) : (React.createElement(React.Fragment, null,
                         showEmptyStateMessage && (React.createElement(EmptyStateMessage, { emptyState: props.emptyStateMessage })),
-                        renderable.length > 0 && (React.createElement(MenuList, { items: renderable, activeIndex: activeIndexForMiddle, indexOffset: headerInteractiveCount, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, getOptionLabel: getOptionLabel, onSelect: onSelection, onAction: onAction, isOptionSelected: isOptionSelected, slotOverrides: {
+                        renderable.length > 0 && (React.createElement(MenuList, { items: renderable, activeIndex: activeIndexForMiddle, indexOffset: headerInteractiveCount, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, getOptionLabel: getOptionLabel, onSelect: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, isOptionSelected: isOptionSelected, slotOverrides: {
                                 option: {
                                     className: (_f = props.UNSAFE_className) === null || _f === void 0 ? void 0 : _f.option,
                                     style: (_g = props.UNSAFE_styles) === null || _g === void 0 ? void 0 : _g.option,
@@ -980,10 +1024,10 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                                     style: (_l = props.UNSAFE_styles) === null || _l === void 0 ? void 0 : _l.section,
                                 },
                             } }))))),
-                    React.createElement(PersistentRegion, { items: persistentsFooters, position: "footer", activeIndex: activeIndex, indexOffset: headerInteractiveCount + middleNavigableCount, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, onAction: onAction, className: classnames(styles$1.persistentFooter, (_m = props.UNSAFE_className) === null || _m === void 0 ? void 0 : _m.footer), style: (_o = props.UNSAFE_styles) === null || _o === void 0 ? void 0 : _o.footer })))))));
+                    React.createElement(PersistentRegion, { items: persistentsFooters, position: "footer", activeIndex: activeIndex, indexOffset: headerInteractiveCount + middleNavigableCount, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentFooter, (_m = props.UNSAFE_className) === null || _m === void 0 ? void 0 : _m.footer), style: (_o = props.UNSAFE_styles) === null || _o === void 0 ? void 0 : _o.footer })))))));
 }
 function LoadingContent() {
-    return (React.createElement("div", { className: styles$1.loadingList },
+    return (React.createElement("div", { className: styles$1.loadingList, onPointerDown: preventDefaultPointerDown },
         React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
         React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
         React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" })));
@@ -991,7 +1035,7 @@ function LoadingContent() {
 function EmptyStateMessage({ emptyState, }) {
     const emptyStateDefault = "No options";
     const emptyStateContent = emptyState !== null && emptyState !== void 0 ? emptyState : emptyStateDefault;
-    return React.createElement("div", { className: styles$1.emptyStateMessage }, emptyStateContent);
+    return (React.createElement("div", { className: styles$1.emptyStateMessage, onPointerDown: preventDefaultPointerDown }, emptyStateContent));
 }
 
 var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","heading":"PWZL-94hH7k-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};