@jobber/components 6.103.2-JOB-141426-1b49367.0 → 6.103.2-JOB-141426-ee803fd.19

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

@@ -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 onInteractionMouseDown: (e: React.MouseEvent) => 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, onInteractionMouseDown, 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

@@ -13,6 +13,7 @@ interface PersistentRegionProps<T extends OptionLike> {
     readonly className?: string;
     readonly style?: React.CSSProperties;
     readonly onAction: (action: ActionConfig) => void;
+    readonly onInteractionMouseDown: (e: React.MouseEvent) => 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, onInteractionMouseDown, }: PersistentRegionProps<T>): React.JSX.Element | null;
 export {};

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

@@ -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

@@ -140,7 +140,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 +172,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 +197,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 => {
@@ -225,7 +229,7 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 // 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 isClickingWithinRef = React.useRef(false);
+    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) => {
@@ -268,7 +272,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;
         }
@@ -358,6 +363,7 @@ function useAutocomplete(props) {
         navigableCount: totalNavigableCount,
         shouldResetActiveIndexOnClose: () => !hasSelection,
         selectedIndex,
+        readOnly,
         onMenuClose: () => {
             if (props.allowFreeForm !== true) {
                 const hasText = inputValue.trim().length > 0;
@@ -369,7 +375,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;
@@ -462,16 +467,29 @@ function useAutocomplete(props) {
         setActiveIndex(null);
     }, [open, multiple, value, renderable, equals, setActiveIndex]);
     const onSelection = React.useCallback((option) => {
+        var _a;
         selectOption(option);
         // Might not always want to close on selection. Multi for example.
         setOpen(false);
-    }, [selectOption, setOpen]);
+        (_a = refs.domReference.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [selectOption, setOpen, refs.domReference]);
     const onAction = React.useCallback((action) => {
+        var _a;
         action.run();
         setActiveIndex(null);
         if (action.closeOnRun !== false)
             setOpen(false);
-    }, [setOpen, setActiveIndex]);
+        (_a = refs.domReference.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setOpen, setActiveIndex, refs.domReference]);
+    /**
+     * Handler for mousedown on interactive menu items (options/actions)
+     * Prevents default to avoid blur and sets flag for focus management
+     */
+    const onInteractionMouseDown = React.useCallback((e) => {
+        e.preventDefault();
+        // Set flag to prevent blur/focus handlers from interfering
+        isHandlingMenuInteractionRef.current = true;
+    }, []);
     function commitFromInputText(inputText) {
         var _a;
         if (inputText.length === 0)
@@ -513,15 +531,18 @@ function useAutocomplete(props) {
     ]);
     const onInputFocus = React.useCallback(() => {
         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);
+        }
+        isHandlingMenuInteractionRef.current = false;
     }, [props.onFocus, readOnly, openOnFocus, setOpen]);
     const onInputBlur = React.useCallback(() => {
         var _a, _b;
-        setInputFocused(false);
-        if (isClickingWithinRef.current) {
+        if (isHandlingMenuInteractionRef.current) {
             return;
         }
         if (readOnly) {
@@ -629,11 +650,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);
@@ -644,7 +665,6 @@ function useAutocomplete(props) {
         readOnly,
         props.allowFreeForm,
         openOnFocus,
-        inputFocused,
         setOpen,
     ]);
     return {
@@ -670,10 +690,10 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
-        isClickingWithinRef,
         // actions
         onSelection,
         onAction,
+        onInteractionMouseDown,
         // input handlers
         onInputChangeFromUser,
         onInputBlur,
@@ -684,7 +704,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, onInteractionMouseDown, isOptionSelected, slotOverrides, }) {
     let navigableIndex = -1;
     function renderItemNode(item) {
         var _a, _b, _c, _d, _e, _f;
@@ -708,6 +728,7 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
                 customRenderOption,
                 getOptionLabel,
                 onSelect,
+                onInteractionMouseDown,
                 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,
@@ -724,6 +745,7 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
             listboxId,
             customRenderAction,
             onAction,
+            onInteractionMouseDown,
             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,
@@ -737,12 +759,14 @@ 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, onMouseDown: e => {
+            e.preventDefault();
+        } }, 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, onInteractionMouseDown, indexOffset = 0, optionClassName, optionStyle, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === nextNavigableIndex;
@@ -756,6 +780,7 @@ function handleOptionRendering({ option, activeIndex, navigableIndex, getItemPro
                     listRef.current[idx] = node;
             },
             onClick: () => onSelect(option),
+            onMouseDown: onInteractionMouseDown,
             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)),
@@ -767,7 +792,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, onInteractionMouseDown, indexOffset = 0, actionClassName, actionStyle, origin, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === nextNavigableIndex;
@@ -785,6 +810,7 @@ function handleActionRendering({ action, activeIndex, navigableIndex, getItemPro
                 closeOnRun: action.shouldClose,
             });
         },
+        onMouseDown: onInteractionMouseDown,
         className: classnames(styles$1.action, isActive && styles$1.actionActive, actionClassName),
         style: actionStyle,
     });
@@ -802,7 +828,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, onInteractionMouseDown, }) {
     if (!items || items.length === 0)
         return null;
     let navigableIndex = -1;
@@ -817,13 +843,14 @@ function PersistentRegion({ items, position, activeIndex, indexOffset, getItemPr
             customRenderFooter,
             listRef,
             onAction,
+            onInteractionMouseDown,
             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, onInteractionMouseDown, navigableIndex, }) {
     const interactive = Boolean(persistent.onClick);
     if (!interactive) {
         const node = handleTextPersistentRendering({
@@ -844,6 +871,7 @@ function handlePersistentRendering({ persistent, position, activeIndex, indexOff
         customRenderFooter,
         listRef,
         onAction,
+        onInteractionMouseDown,
         navigableIndex,
     });
 }
@@ -859,9 +887,11 @@ 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, onMouseDown: e => {
+            e.preventDefault();
+        } }, content));
 }
-function handleActionPersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, navigableIndex, }) {
+function handleActionPersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, onInteractionMouseDown, navigableIndex, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === indexOffset + nextNavigableIndex;
@@ -888,13 +918,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,
+                });
+            },
+            onMouseDown: onInteractionMouseDown,
             className: classnames(styles$1.action, isActive && styles$1.actionActive),
         }), { role: "button", tabIndex: -1 }), content)),
         nextNavigableIndex,
@@ -909,7 +942,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, isClickingWithinRef, 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, onInteractionMouseDown, 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, {
@@ -967,15 +1000,11 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                     style: Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), (_b = props.UNSAFE_styles) === null || _b === void 0 ? void 0 : _b.menu), (menuWidth
                         ? { width: menuWidth, maxWidth: menuWidth }
                         : {})),
-                }), { onPointerDown: () => {
-                        isClickingWithinRef.current = true;
-                    }, onPointerUp: () => {
-                        isClickingWithinRef.current = false;
-                    } }),
-                    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, onInteractionMouseDown: onInteractionMouseDown, 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, onInteractionMouseDown: onInteractionMouseDown, 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,
@@ -989,10 +1018,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, onInteractionMouseDown: onInteractionMouseDown, 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, onMouseDown: e => e.preventDefault() },
         React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
         React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
         React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" })));
@@ -1000,7 +1029,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, onMouseDown: e => e.preventDefault() }, 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-"};

package/dist/Autocomplete/index.mjs

@@ -1,5 +1,5 @@
 import React__default, { useState, useRef, useEffect, useCallback, useMemo, forwardRef } from 'react';
-import { u as useFloating, b as autoUpdate, o as offset, f as flip, c as size, e as useListNavigation, d as useDismiss, g as useInteractions, r as useTransitionStyles, F as FloatingPortal, p as FloatingFocusManager } from '../floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, o as offset, f as flip, c as size, r as useClick, e as useListNavigation, d as useDismiss, g as useInteractions, t as useTransitionStyles, F as FloatingPortal, p as FloatingFocusManager } from '../floating-ui.react-es.js';
 import classnames from 'classnames';
 import { tokens } from '@jobber/design';
 import { useCallbackRef, useDebounce, useSafeLayoutEffect, useIsMounted, useOnKeyDown } from '@jobber/hooks';
@@ -138,7 +138,7 @@ function invokeActiveItemOnEnter(event, activeIndex, renderable, onSelect, onAct
 
 const MENU_OFFSET = 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] = useState(false);
     const [activeIndex, setActiveIndex] = useState(null);
     const listRef = useRef([]);
@@ -170,6 +170,10 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             }),
         ],
     });
+    const click = useClick(context, {
+        enabled: !readOnly,
+        toggle: false, // Only open, never close on click
+    });
     const listNav = useListNavigation(context, {
         listRef,
         activeIndex,
@@ -191,7 +195,7 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
         escapeKey: true,
         outsidePressEvent: "click",
     });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([listNav, dismiss]);
+    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([click, listNav, dismiss]);
     useEffect(() => {
         listRef.current.length = navigableCount;
         setActiveIndex(prev => {
@@ -223,7 +227,7 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
 // 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 isClickingWithinRef = useRef(false);
+    const isHandlingMenuInteractionRef = useRef(false);
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = useCallback((opt) => {
@@ -266,7 +270,8 @@ function useAutocomplete(props) {
     const [debouncedInputValue, setDebouncedInputValue] = useState(inputValue);
     const debouncedSetter = useDebounce(setDebouncedInputValue, debounceMs);
     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;
         }
@@ -356,6 +361,7 @@ function useAutocomplete(props) {
         navigableCount: totalNavigableCount,
         shouldResetActiveIndexOnClose: () => !hasSelection,
         selectedIndex,
+        readOnly,
         onMenuClose: () => {
             if (props.allowFreeForm !== true) {
                 const hasText = inputValue.trim().length > 0;
@@ -367,7 +373,6 @@ function useAutocomplete(props) {
             }
         },
     });
-    const [inputFocused, setInputFocused] = useState(false);
     // Handles activeIndex reset and, in single-select mode only, clearing selection when input is empty
     useEffect(() => {
         const hasText = inputValue.trim().length > 0;
@@ -460,16 +465,29 @@ function useAutocomplete(props) {
         setActiveIndex(null);
     }, [open, multiple, value, renderable, equals, setActiveIndex]);
     const onSelection = useCallback((option) => {
+        var _a;
         selectOption(option);
         // Might not always want to close on selection. Multi for example.
         setOpen(false);
-    }, [selectOption, setOpen]);
+        (_a = refs.domReference.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [selectOption, setOpen, refs.domReference]);
     const onAction = useCallback((action) => {
+        var _a;
         action.run();
         setActiveIndex(null);
         if (action.closeOnRun !== false)
             setOpen(false);
-    }, [setOpen, setActiveIndex]);
+        (_a = refs.domReference.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setOpen, setActiveIndex, refs.domReference]);
+    /**
+     * Handler for mousedown on interactive menu items (options/actions)
+     * Prevents default to avoid blur and sets flag for focus management
+     */
+    const onInteractionMouseDown = useCallback((e) => {
+        e.preventDefault();
+        // Set flag to prevent blur/focus handlers from interfering
+        isHandlingMenuInteractionRef.current = true;
+    }, []);
     function commitFromInputText(inputText) {
         var _a;
         if (inputText.length === 0)
@@ -511,15 +529,18 @@ function useAutocomplete(props) {
     ]);
     const onInputFocus = useCallback(() => {
         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);
+        }
+        isHandlingMenuInteractionRef.current = false;
     }, [props.onFocus, readOnly, openOnFocus, setOpen]);
     const onInputBlur = useCallback(() => {
         var _a, _b;
-        setInputFocused(false);
-        if (isClickingWithinRef.current) {
+        if (isHandlingMenuInteractionRef.current) {
             return;
         }
         if (readOnly) {
@@ -627,11 +648,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);
@@ -642,7 +663,6 @@ function useAutocomplete(props) {
         readOnly,
         props.allowFreeForm,
         openOnFocus,
-        inputFocused,
         setOpen,
     ]);
     return {
@@ -668,10 +688,10 @@ function useAutocomplete(props) {
         activeIndex,
         setActiveIndex,
         listRef,
-        isClickingWithinRef,
         // actions
         onSelection,
         onAction,
+        onInteractionMouseDown,
         // input handlers
         onInputChangeFromUser,
         onInputBlur,
@@ -682,7 +702,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, onInteractionMouseDown, isOptionSelected, slotOverrides, }) {
     let navigableIndex = -1;
     function renderItemNode(item) {
         var _a, _b, _c, _d, _e, _f;
@@ -706,6 +726,7 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
                 customRenderOption,
                 getOptionLabel,
                 onSelect,
+                onInteractionMouseDown,
                 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,
@@ -722,6 +743,7 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
             listboxId,
             customRenderAction,
             onAction,
+            onInteractionMouseDown,
             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,
@@ -735,12 +757,14 @@ function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef,
 function handleSectionRendering({ customRenderSection, section, sectionClassName, sectionStyle, }) {
     var _a;
     const headerContent = customRenderSection ? (customRenderSection(section)) : (React__default.createElement(DefaultSectionContent, { section: section }));
-    return (React__default.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__default.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, onMouseDown: e => {
+            e.preventDefault();
+        } }, headerContent));
 }
 function DefaultSectionContent({ section, }) {
     return React__default.createElement(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, onInteractionMouseDown, indexOffset = 0, optionClassName, optionStyle, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === nextNavigableIndex;
@@ -754,6 +778,7 @@ function handleOptionRendering({ option, activeIndex, navigableIndex, getItemPro
                     listRef.current[idx] = node;
             },
             onClick: () => onSelect(option),
+            onMouseDown: onInteractionMouseDown,
             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)),
@@ -765,7 +790,7 @@ function DefaultOptionContent({ isSelected, text, }) {
         React__default.createElement("div", { className: styles$1.icon }, isSelected && React__default.createElement(Icon, { name: "checkmark", size: "small" })),
         React__default.createElement(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, onInteractionMouseDown, indexOffset = 0, actionClassName, actionStyle, origin, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === nextNavigableIndex;
@@ -783,6 +808,7 @@ function handleActionRendering({ action, activeIndex, navigableIndex, getItemPro
                 closeOnRun: action.shouldClose,
             });
         },
+        onMouseDown: onInteractionMouseDown,
         className: classnames(styles$1.action, isActive && styles$1.actionActive, actionClassName),
         style: actionStyle,
     });
@@ -800,7 +826,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, onInteractionMouseDown, }) {
     if (!items || items.length === 0)
         return null;
     let navigableIndex = -1;
@@ -815,13 +841,14 @@ function PersistentRegion({ items, position, activeIndex, indexOffset, getItemPr
             customRenderFooter,
             listRef,
             onAction,
+            onInteractionMouseDown,
             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, onInteractionMouseDown, navigableIndex, }) {
     const interactive = Boolean(persistent.onClick);
     if (!interactive) {
         const node = handleTextPersistentRendering({
@@ -842,6 +869,7 @@ function handlePersistentRendering({ persistent, position, activeIndex, indexOff
         customRenderFooter,
         listRef,
         onAction,
+        onInteractionMouseDown,
         navigableIndex,
     });
 }
@@ -857,9 +885,11 @@ function handleTextPersistentRendering({ persistent, position, customRenderHeade
     else {
         content = React__default.createElement(DefaultTextPersistentContent, { persistent: persistent });
     }
-    return (React__default.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__default.createElement("div", { key: `persistent-${position}-${String((_a = persistent.key) !== null && _a !== void 0 ? _a : persistent.label)}`, role: "presentation", tabIndex: -1, className: styles$1.textPersistent, onMouseDown: e => {
+            e.preventDefault();
+        } }, content));
 }
-function handleActionPersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, navigableIndex, }) {
+function handleActionPersistentRendering({ persistent, position, activeIndex, indexOffset, getItemProps, customRenderHeader, customRenderFooter, listRef, onAction, onInteractionMouseDown, navigableIndex, }) {
     var _a;
     const nextNavigableIndex = navigableIndex + 1;
     const isActive = activeIndex === indexOffset + nextNavigableIndex;
@@ -886,13 +916,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,
+                });
+            },
+            onMouseDown: onInteractionMouseDown,
             className: classnames(styles$1.action, isActive && styles$1.actionActive),
         }), { role: "button", tabIndex: -1 }), content)),
         nextNavigableIndex,
@@ -907,7 +940,7 @@ const AutocompleteRebuilt = 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, isClickingWithinRef, 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, onInteractionMouseDown, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
     const listboxId = React__default.useId();
     // Provides mount/unmount-aware transition styles for the floating element
     const { isMounted, styles: transitionStyles } = useTransitionStyles(context, {
@@ -965,15 +998,11 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                     style: Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), (_b = props.UNSAFE_styles) === null || _b === void 0 ? void 0 : _b.menu), (menuWidth
                         ? { width: menuWidth, maxWidth: menuWidth }
                         : {})),
-                }), { onPointerDown: () => {
-                        isClickingWithinRef.current = true;
-                    }, onPointerUp: () => {
-                        isClickingWithinRef.current = false;
-                    } }),
-                    React__default.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__default.createElement(PersistentRegion, { items: persistentsHeaders, position: "header", activeIndex: activeIndex, indexOffset: 0, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, onAction: onAction, onInteractionMouseDown: onInteractionMouseDown, 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__default.createElement("div", { className: styles$1.scrollRegion }, loading ? ((_e = props.customRenderLoading) !== null && _e !== void 0 ? _e : React__default.createElement(LoadingContent, null)) : (React__default.createElement(React__default.Fragment, null,
                         showEmptyStateMessage && (React__default.createElement(EmptyStateMessage, { emptyState: props.emptyStateMessage })),
-                        renderable.length > 0 && (React__default.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__default.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, onInteractionMouseDown: onInteractionMouseDown, 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,
@@ -987,10 +1016,10 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                                     style: (_l = props.UNSAFE_styles) === null || _l === void 0 ? void 0 : _l.section,
                                 },
                             } }))))),
-                    React__default.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__default.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, onInteractionMouseDown: onInteractionMouseDown, 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__default.createElement("div", { className: styles$1.loadingList },
+    return (React__default.createElement("div", { className: styles$1.loadingList, onMouseDown: e => e.preventDefault() },
         React__default.createElement(Glimmer, { shape: "rectangle", size: "base" }),
         React__default.createElement(Glimmer, { shape: "rectangle", size: "base" }),
         React__default.createElement(Glimmer, { shape: "rectangle", size: "base" })));
@@ -998,7 +1027,7 @@ function LoadingContent() {
 function EmptyStateMessage({ emptyState, }) {
     const emptyStateDefault = "No options";
     const emptyStateContent = emptyState !== null && emptyState !== void 0 ? emptyState : emptyStateDefault;
-    return React__default.createElement("div", { className: styles$1.emptyStateMessage }, emptyStateContent);
+    return (React__default.createElement("div", { className: styles$1.emptyStateMessage, onMouseDown: e => e.preventDefault() }, 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-"};

package/dist/Autocomplete/tests/Autocomplete.setup.d.ts

@@ -36,3 +36,16 @@ export declare function FreeFormWrapper({ initialValue, initialInputValue, onCha
     readonly inputEqualsOption?: (input: string, option: OptionLike) => boolean;
     readonly debounce?: number;
 }): React.JSX.Element;
+/**
+ * Wrapper for testing focus and blur behavior with tabbable siblings
+ * Includes tabbable elements before and after the autocomplete
+ * so tests can use tab navigation to focus without clicking
+ */
+export declare function FocusableSiblingsWrapper<T extends OptionLike>({ onFocus, onChange, onInputChange, menu, readOnly, openOnFocus, }: {
+    readonly onChange?: (v: T | undefined) => void;
+    readonly onInputChange?: (v: string) => void;
+    readonly menu?: MenuItem<T>[];
+    readonly readOnly?: boolean;
+    readonly onFocus?: () => void;
+    readonly openOnFocus?: boolean;
+}): React.JSX.Element;

package/dist/Autocomplete/useAutocomplete.d.ts

@@ -56,9 +56,9 @@ export declare function useAutocomplete<Value extends OptionLike, Multiple exten
     activeIndex: number | null;
     setActiveIndex: (index: number | null) => void;
     listRef: React.MutableRefObject<(HTMLElement | null)[]>;
-    isClickingWithinRef: React.MutableRefObject<boolean>;
     onSelection: (option: Value) => void;
     onAction: (action: ActionConfig) => void;
+    onInteractionMouseDown: (e: React.MouseEvent) => void;
     onInputChangeFromUser: (val: string) => void;
     onInputBlur: () => void;
     onInputFocus: () => void;

package/dist/DatePicker-es.js

@@ -1,7 +1,7 @@
 import React__default, { cloneElement, Component, createRef, useRef, useCallback, useEffect, createElement, forwardRef, isValidElement, useState } from 'react';
 import classnames from 'classnames';
 import { c as clsx } from './clsx-es.js';
-import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, t as FloatingArrow } from './floating-ui.react-es.js';
+import { u as useFloating, b as autoUpdate, f as flip, o as offset, a as arrow, v as FloatingArrow } from './floating-ui.react-es.js';
 import ReactDOM__default from 'react-dom';
 import { useRefocusOnActivator } from '@jobber/hooks';
 import { T as Typography } from './Typography-es.js';

package/dist/FormField-cjs.js

@@ -383,6 +383,7 @@ function FormField(props) {
     return React.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
+    var _a;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
@@ -429,7 +430,10 @@ function FormFieldInternal(props) {
         handleValidation,
         handleKeyDown,
     });
-    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    // Ensure focus tracking works by providing a wrapperRef when none is passed
+    const internalWrapperRef = React.useRef(null);
+    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
+    return (React.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
     function renderField() {
         switch (type) {
             case "select":

package/dist/FormField-es.js

@@ -381,6 +381,7 @@ function FormField(props) {
     return React__default.createElement(FormFieldInternal, Object.assign({}, props, { id: id }));
 }
 function FormFieldInternal(props) {
+    var _a;
     const { actionsRef, autocomplete = true, children, defaultValue, description, disabled, id, inputRef, inline, keyboard, max, maxLength, min, name: nameProp, pattern, readonly, rows, loading, type = "text", validations, value, onChange, onEnter, onFocus, onBlur, onValidation, onKeyUp, clearable = "never", autofocus, } = props;
     const { name } = useAtlantisFormFieldName({ id, nameProp });
     const { errorMessage, inputRefs, useControllerField, setValue, onControllerBlur, onControllerChange, } = useAtlantisReactHookForm({
@@ -427,7 +428,10 @@ function FormFieldInternal(props) {
         handleValidation,
         handleKeyDown,
     });
-    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear }), renderField()));
+    // Ensure focus tracking works by providing a wrapperRef when none is passed
+    const internalWrapperRef = useRef(null);
+    const wrapperRef = (_a = props.wrapperRef) !== null && _a !== void 0 ? _a : internalWrapperRef;
+    return (React__default.createElement(FormFieldWrapper, Object.assign({}, props, { value: useControllerField.value, error: errorMessage, identifier: id, descriptionIdentifier: descriptionIdentifier, clearable: clearable, onClear: handleClear, wrapperRef: wrapperRef }), renderField()));
     function renderField() {
         switch (type) {
             case "select":

package/dist/InputNumber/index.cjs

@@ -2773,7 +2773,7 @@ function InputNumberInternal(props, ref) {
             }
         },
     }));
-    return (React.createElement(FormField.FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
+    return (React.createElement(FormField.FormField, Object.assign({}, props, { clearable: "never", type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
     function customValidators(validators) {
         if (validators == null) {
             return getOverLimitMessage;

package/dist/InputNumber/index.mjs

@@ -2771,7 +2771,7 @@ function InputNumberInternal(props, ref) {
             }
         },
     }));
-    return (React__default.createElement(FormField, Object.assign({}, props, { type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
+    return (React__default.createElement(FormField, Object.assign({}, props, { clearable: "never", type: "number", inputRef: inputRef, onChange: handleChange, validations: Object.assign(Object.assign({}, props.validations), { validate: customValidators((_a = props.validations) === null || _a === void 0 ? void 0 : _a.validate) }) })));
     function customValidators(validators) {
         if (validators == null) {
             return getOverLimitMessage;

package/dist/floating-ui.react-cjs.js

@@ -1065,6 +1065,12 @@ function isVirtualPointerEvent(event) {
   // iOS VoiceOver returns 0.333• for width/height.
   event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
 }
+function isMouseLikePointerType(pointerType, strict) {
+  // On some Linux machines with Chromium, mouse inputs return a `pointerType`
+  // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
+  const values = ['mouse', 'pen'];
+  return values.includes(pointerType);
+}
 
 var isClient$1 = typeof document !== 'undefined';
 
@@ -4562,6 +4568,114 @@ const FloatingOverlay = /*#__PURE__*/React__namespace.forwardRef(function Floati
   });
 });
 
+function isButtonTarget(event) {
+  return isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
+}
+function isAnchorTarget(event) {
+  return isHTMLElement(event.target) && event.target.tagName === 'A';
+}
+function isSpaceIgnored(element) {
+  return isTypeableElement(element);
+}
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+function useClick(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    elements: {
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true,
+    event: eventOption = 'click',
+    toggle = true,
+    ignoreMouse = false,
+    keyboardHandlers = true,
+    stickIfOpen = true
+  } = props;
+  const pointerTypeRef = React__namespace.useRef();
+  const didKeyDownRef = React__namespace.useRef(false);
+  const reference = React__namespace.useMemo(() => ({
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onMouseDown(event) {
+      const pointerType = pointerTypeRef.current;
+
+      // Ignore all buttons except for the "main" button.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+      if (event.button !== 0) return;
+      if (eventOption === 'click') return;
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === 'mousedown' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        // Prevent stealing focus from the floating element
+        event.preventDefault();
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onClick(event) {
+      const pointerType = pointerTypeRef.current;
+      if (eventOption === 'mousedown' && pointerTypeRef.current) {
+        pointerTypeRef.current = undefined;
+        return;
+      }
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === 'click' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onKeyDown(event) {
+      pointerTypeRef.current = undefined;
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
+        return;
+      }
+      if (event.key === ' ' && !isSpaceIgnored(domReference)) {
+        // Prevent scrolling
+        event.preventDefault();
+        didKeyDownRef.current = true;
+      }
+      if (isAnchorTarget(event)) {
+        return;
+      }
+      if (event.key === 'Enter') {
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    },
+    onKeyUp(event) {
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
+        return;
+      }
+      if (event.key === ' ' && didKeyDownRef.current) {
+        didKeyDownRef.current = false;
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    }
+  }), [dataRef, domReference, eventOption, ignoreMouse, keyboardHandlers, onOpenChange, open, stickIfOpen, toggle]);
+  return React__namespace.useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
+}
+
 const bubbleHandlerKeys = {
   pointerdown: 'onPointerDown',
   mousedown: 'onMouseDown',
@@ -5943,6 +6057,7 @@ exports.limitShift = limitShift;
 exports.offset = offset;
 exports.shift = shift;
 exports.size = size;
+exports.useClick = useClick;
 exports.useDismiss = useDismiss;
 exports.useFloating = useFloating;
 exports.useFloatingNodeId = useFloatingNodeId;

package/dist/floating-ui.react-es.js

@@ -1044,6 +1044,12 @@ function isVirtualPointerEvent(event) {
   // iOS VoiceOver returns 0.333• for width/height.
   event.width < 1 && event.height < 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === 'touch';
 }
+function isMouseLikePointerType(pointerType, strict) {
+  // On some Linux machines with Chromium, mouse inputs return a `pointerType`
+  // of "pen": https://github.com/floating-ui/floating-ui/issues/2015
+  const values = ['mouse', 'pen'];
+  return values.includes(pointerType);
+}
 
 var isClient$1 = typeof document !== 'undefined';
 
@@ -4541,6 +4547,114 @@ const FloatingOverlay = /*#__PURE__*/React.forwardRef(function FloatingOverlay(p
   });
 });
 
+function isButtonTarget(event) {
+  return isHTMLElement(event.target) && event.target.tagName === 'BUTTON';
+}
+function isAnchorTarget(event) {
+  return isHTMLElement(event.target) && event.target.tagName === 'A';
+}
+function isSpaceIgnored(element) {
+  return isTypeableElement(element);
+}
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+function useClick(context, props) {
+  if (props === void 0) {
+    props = {};
+  }
+  const {
+    open,
+    onOpenChange,
+    dataRef,
+    elements: {
+      domReference
+    }
+  } = context;
+  const {
+    enabled = true,
+    event: eventOption = 'click',
+    toggle = true,
+    ignoreMouse = false,
+    keyboardHandlers = true,
+    stickIfOpen = true
+  } = props;
+  const pointerTypeRef = React.useRef();
+  const didKeyDownRef = React.useRef(false);
+  const reference = React.useMemo(() => ({
+    onPointerDown(event) {
+      pointerTypeRef.current = event.pointerType;
+    },
+    onMouseDown(event) {
+      const pointerType = pointerTypeRef.current;
+
+      // Ignore all buttons except for the "main" button.
+      // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+      if (event.button !== 0) return;
+      if (eventOption === 'click') return;
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === 'mousedown' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        // Prevent stealing focus from the floating element
+        event.preventDefault();
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onClick(event) {
+      const pointerType = pointerTypeRef.current;
+      if (eventOption === 'mousedown' && pointerTypeRef.current) {
+        pointerTypeRef.current = undefined;
+        return;
+      }
+      if (isMouseLikePointerType(pointerType) && ignoreMouse) return;
+      if (open && toggle && (dataRef.current.openEvent && stickIfOpen ? dataRef.current.openEvent.type === 'click' : true)) {
+        onOpenChange(false, event.nativeEvent, 'click');
+      } else {
+        onOpenChange(true, event.nativeEvent, 'click');
+      }
+    },
+    onKeyDown(event) {
+      pointerTypeRef.current = undefined;
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event)) {
+        return;
+      }
+      if (event.key === ' ' && !isSpaceIgnored(domReference)) {
+        // Prevent scrolling
+        event.preventDefault();
+        didKeyDownRef.current = true;
+      }
+      if (isAnchorTarget(event)) {
+        return;
+      }
+      if (event.key === 'Enter') {
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    },
+    onKeyUp(event) {
+      if (event.defaultPrevented || !keyboardHandlers || isButtonTarget(event) || isSpaceIgnored(domReference)) {
+        return;
+      }
+      if (event.key === ' ' && didKeyDownRef.current) {
+        didKeyDownRef.current = false;
+        if (open && toggle) {
+          onOpenChange(false, event.nativeEvent, 'click');
+        } else {
+          onOpenChange(true, event.nativeEvent, 'click');
+        }
+      }
+    }
+  }), [dataRef, domReference, eventOption, ignoreMouse, keyboardHandlers, onOpenChange, open, stickIfOpen, toggle]);
+  return React.useMemo(() => enabled ? {
+    reference
+  } : {}, [enabled, reference]);
+}
+
 const bubbleHandlerKeys = {
   pointerdown: 'onPointerDown',
   mousedown: 'onMouseDown',
@@ -5908,4 +6022,4 @@ function useTransitionStyles(context, props) {
   };
 }
 
-export { FloatingPortal as F, arrow as a, autoUpdate as b, size as c, useDismiss as d, useListNavigation as e, flip as f, useInteractions as g, useFloatingParentNodeId as h, useFloatingNodeId as i, FloatingTree as j, FloatingNode as k, limitShift as l, autoPlacement as m, useRole as n, offset as o, FloatingFocusManager as p, FloatingOverlay as q, useTransitionStyles as r, shift as s, FloatingArrow as t, useFloating as u };
+export { FloatingPortal as F, arrow as a, autoUpdate as b, size as c, useDismiss as d, useListNavigation as e, flip as f, useInteractions as g, useFloatingParentNodeId as h, useFloatingNodeId as i, FloatingTree as j, FloatingNode as k, limitShift as l, autoPlacement as m, useRole as n, offset as o, FloatingFocusManager as p, FloatingOverlay as q, useClick as r, shift as s, useTransitionStyles as t, useFloating as u, FloatingArrow as v };

package/dist/styles.css

@@ -99,11 +99,13 @@
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
   border-bottom: 1px solid hsl(200, 13%, 87%);
   border-bottom: var(--border-base) solid var(--color-border);
+  cursor: default;
 }
 
 .Twgjn26oldE- {
   padding: 8px 16px;
   padding: var(--space-small) var(--space-base);
+  cursor: default;
 }
 
 .mc1-CEwZtHE- {
@@ -132,6 +134,7 @@
 .vxk57ZhP8GU- {
   padding: 8px 0 4px 8px;
   padding: var(--space-small) 0 var(--space-smaller) var(--space-small);
+  cursor: default;
 }
 
 .j4h-0Mxa5gk- {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.103.2-JOB-141426-1b49367.0+1b4936717",
+  "version": "6.103.2-JOB-141426-ee803fd.19+ee803fdda",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "1b4936717ac7e8c7caefc4145e02c79f7dbb7f56"
+  "gitHead": "ee803fdda8687a785cb75ea60585b8cf506c9e3d"
 }