@jobber/components 6.103.2-JOB-140609-8386817.45 → 6.103.2-JOB-141426-ee803fd.19

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';
@@ -18,6 +18,18 @@ import 'react-hook-form';
 import 'framer-motion';
 import '../Button-es.js';
 import 'react-router-dom';
+import '../omit-es.js';
+import '../_commonjsHelpers-es.js';
+import '../_baseGet-es.js';
+import '../isTypedArray-es.js';
+import '../isObjectLike-es.js';
+import '../identity-es.js';
+import '../_getTag-es.js';
+import '../isSymbol-es.js';
+import '../keysIn-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFlatten-es.js';
+import '../_setToString-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
 import '../Spinner-es.js';
@@ -126,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([]);
@@ -158,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,
@@ -179,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 => {
@@ -211,6 +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 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) => {
@@ -253,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;
         }
@@ -343,6 +361,7 @@ function useAutocomplete(props) {
         navigableCount: totalNavigableCount,
         shouldResetActiveIndexOnClose: () => !hasSelection,
         selectedIndex,
+        readOnly,
         onMenuClose: () => {
             if (props.allowFreeForm !== true) {
                 const hasText = inputValue.trim().length > 0;
@@ -354,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;
@@ -447,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)
@@ -498,14 +529,20 @@ 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 (isHandlingMenuInteractionRef.current) {
+            return;
+        }
         if (readOnly) {
             (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props);
             return;
@@ -611,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);
@@ -626,7 +663,6 @@ function useAutocomplete(props) {
         readOnly,
         props.allowFreeForm,
         openOnFocus,
-        inputFocused,
         setOpen,
     ]);
     return {
@@ -655,6 +691,7 @@ function useAutocomplete(props) {
         // actions
         onSelection,
         onAction,
+        onInteractionMouseDown,
         // input handlers
         onInputChangeFromUser,
         onInputBlur,
@@ -665,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;
@@ -689,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,
@@ -705,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,
@@ -718,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;
@@ -737,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)),
@@ -748,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;
@@ -766,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,
     });
@@ -783,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;
@@ -798,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({
@@ -825,6 +869,7 @@ function handlePersistentRendering({ persistent, position, activeIndex, indexOff
         customRenderFooter,
         listRef,
         onAction,
+        onInteractionMouseDown,
         navigableIndex,
     });
 }
@@ -840,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;
@@ -869,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,
@@ -890,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, 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, {
@@ -907,7 +957,7 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
         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", ariaAutocomplete: "list", ariaExpanded: open ? true : false, ariaControls: listboxId, ariaActiveDescendant: open && activeIndex != null
+        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
             ? `${listboxId}-item-${activeIndex}`
             : undefined });
     const referenceInputRef = (node) => {
@@ -949,10 +999,10 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
                         ? { width: menuWidth, maxWidth: menuWidth }
                         : {})),
                 })),
-                    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,
@@ -966,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" })));
@@ -977,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

@@ -58,6 +58,7 @@ export declare function useAutocomplete<Value extends OptionLike, Multiple exten
     listRef: React.MutableRefObject<(HTMLElement | null)[]>;
     onSelection: (option: Value) => void;
     onAction: (action: ActionConfig) => void;
+    onInteractionMouseDown: (e: React.MouseEvent) => void;
     onInputChangeFromUser: (val: string) => void;
     onInputBlur: () => void;
     onInputFocus: () => void;

package/dist/Checkbox/Checkbox.types.d.ts

@@ -1,7 +1,6 @@
 import type { ReactElement, ReactNode } from "react";
 import type { XOR } from "ts-xor";
-import type { AriaInputProps, FocusEvents } from "../sharedHelpers/types";
-export interface BaseCheckboxProps extends AriaInputProps, FocusEvents<HTMLInputElement> {
+export interface BaseCheckboxProps {
     /**
      * Determines if the checkbox is checked or not.
      */
@@ -42,6 +41,14 @@ export interface BaseCheckboxProps extends AriaInputProps, FocusEvents<HTMLInput
      * Called when the checkbox value changes
      */
     onChange?(newValue: boolean): void;
+    /**
+     * Called when the checkbox is focused
+     */
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    /**
+     * Called when the checkbox loses focus
+     */
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
     /**
      * Whether the checkbox is invalid
      */

package/dist/Checkbox/index.cjs

@@ -54,10 +54,9 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaRequired, }, ref) {
+const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
     const descriptionIdentifier = React.useId();
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
-    const isInvalid = Boolean(invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -71,8 +70,7 @@ const CheckboxRebuilt = React.forwardRef(function CheckboxRebuiltInternal({ chec
     return (React.createElement("div", { className: styles.checkBoxParent },
         React.createElement("label", { className: wrapperClassName },
             React.createElement("span", { className: styles.checkHolder },
-                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy ||
-                        (description ? descriptionIdentifier : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React.createElement("span", { className: styles.checkBox },
                     React.createElement(Icon.Icon, { name: iconName, color: "surface" }))),
             labelContent && React.createElement("span", { className: styles.label }, labelContent)),

package/dist/Checkbox/index.mjs

@@ -52,10 +52,9 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         } }));
 }
 
-const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, ariaLabel, ariaDescribedBy, ariaRequired, }, ref) {
+const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, defaultChecked, disabled, label, name, value, indeterminate = false, description, id, onBlur, onChange, onFocus, invalid, }, ref) {
     const descriptionIdentifier = useId();
     const wrapperClassName = classnames(styles.wrapper, disabled && styles.disabled, invalid && styles.invalid);
-    const isInvalid = Boolean(invalid);
     const inputClassName = classnames(styles.input, {
         [styles.indeterminate]: indeterminate,
     });
@@ -69,8 +68,7 @@ const CheckboxRebuilt = forwardRef(function CheckboxRebuiltInternal({ checked, d
     return (React__default.createElement("div", { className: styles.checkBoxParent },
         React__default.createElement("label", { className: wrapperClassName },
             React__default.createElement("span", { className: styles.checkHolder },
-                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy ||
-                        (description ? descriptionIdentifier : undefined), "aria-invalid": isInvalid ? true : undefined, "aria-required": ariaRequired, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React__default.createElement("input", { ref: ref, type: "checkbox", id: id, className: inputClassName, name: name, "aria-describedby": description ? descriptionIdentifier : undefined, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
                 React__default.createElement("span", { className: styles.checkBox },
                     React__default.createElement(Icon, { name: iconName, color: "surface" }))),
             labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),

package/dist/Chips/InternalChipDismissible/hooks/index.cjs

@@ -4,12 +4,12 @@ var useScrollToActive = require('../../../useScrollToActive-cjs.js');
 require('react');
 require('../../../_commonjsHelpers-cjs.js');
 require('../../../_baseFlatten-cjs.js');
-require('../../../_getAllKeys-cjs.js');
+require('../../../_baseGet-cjs.js');
 require('../../../isTypedArray-cjs.js');
 require('../../../isObjectLike-cjs.js');
-require('../../../isSymbol-cjs.js');
 require('../../../identity-cjs.js');
 require('../../../_getTag-cjs.js');
+require('../../../isSymbol-cjs.js');
 require('../../../_baseEach-cjs.js');
 require('../../../_baseFor-cjs.js');
 require('../../../_isIterateeCall-cjs.js');

package/dist/Chips/InternalChipDismissible/hooks/index.mjs

@@ -2,12 +2,12 @@ export { b as useInView, u as useInternalChipDismissible, a as useInternalChipDi
 import 'react';
 import '../../../_commonjsHelpers-es.js';
 import '../../../_baseFlatten-es.js';
-import '../../../_getAllKeys-es.js';
+import '../../../_baseGet-es.js';
 import '../../../isTypedArray-es.js';
 import '../../../isObjectLike-es.js';
-import '../../../isSymbol-es.js';
 import '../../../identity-es.js';
 import '../../../_getTag-es.js';
+import '../../../isSymbol-es.js';
 import '../../../_baseEach-es.js';
 import '../../../_baseFor-es.js';
 import '../../../_isIterateeCall-es.js';

package/dist/Chips/InternalChipDismissible/index.cjs

@@ -5,12 +5,12 @@ require('react');
 require('../../useScrollToActive-cjs.js');
 require('../../_commonjsHelpers-cjs.js');
 require('../../_baseFlatten-cjs.js');
-require('../../_getAllKeys-cjs.js');
+require('../../_baseGet-cjs.js');
 require('../../isTypedArray-cjs.js');
 require('../../isObjectLike-cjs.js');
-require('../../isSymbol-cjs.js');
 require('../../identity-cjs.js');
 require('../../_getTag-cjs.js');
+require('../../isSymbol-cjs.js');
 require('../../_baseEach-cjs.js');
 require('../../_baseFor-cjs.js');
 require('../../_isIterateeCall-cjs.js');

package/dist/Chips/InternalChipDismissible/index.mjs

@@ -3,12 +3,12 @@ import 'react';
 import '../../useScrollToActive-es.js';
 import '../../_commonjsHelpers-es.js';
 import '../../_baseFlatten-es.js';
-import '../../_getAllKeys-es.js';
+import '../../_baseGet-es.js';
 import '../../isTypedArray-es.js';
 import '../../isObjectLike-es.js';
-import '../../isSymbol-es.js';
 import '../../identity-es.js';
 import '../../_getTag-es.js';
+import '../../isSymbol-es.js';
 import '../../_baseEach-es.js';
 import '../../_baseFor-es.js';
 import '../../_isIterateeCall-es.js';

package/dist/Chips/index.cjs

@@ -7,12 +7,12 @@ var Chips = require('../Chips-cjs.js');
 require('../useScrollToActive-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../_baseFlatten-cjs.js');
-require('../_getAllKeys-cjs.js');
+require('../_baseGet-cjs.js');
 require('../isTypedArray-cjs.js');
 require('../isObjectLike-cjs.js');
-require('../isSymbol-cjs.js');
 require('../identity-cjs.js');
 require('../_getTag-cjs.js');
+require('../isSymbol-cjs.js');
 require('../_baseEach-cjs.js');
 require('../_baseFor-cjs.js');
 require('../_isIterateeCall-cjs.js');

package/dist/Chips/index.mjs

@@ -5,12 +5,12 @@ export { C as Chips } from '../Chips-es.js';
 import '../useScrollToActive-es.js';
 import '../_commonjsHelpers-es.js';
 import '../_baseFlatten-es.js';
-import '../_getAllKeys-es.js';
+import '../_baseGet-es.js';
 import '../isTypedArray-es.js';
 import '../isObjectLike-es.js';
-import '../isSymbol-es.js';
 import '../identity-es.js';
 import '../_getTag-es.js';
+import '../isSymbol-es.js';
 import '../_baseEach-es.js';
 import '../_baseFor-es.js';
 import '../_isIterateeCall-es.js';

package/dist/DataList/components/DataListSearch/index.cjs

@@ -18,9 +18,20 @@ require('../../../useFormFieldFocus-cjs.js');
 require('../../../InputValidation-cjs.js');
 require('../../../Spinner-cjs.js');
 require('react-hook-form');
+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('../../../DataListContext-cjs.js');
 require('../../../noop-cjs.js');
-require('../../../_commonjsHelpers-cjs.js');
 require('../../../DataList.const-cjs.js');
 require('../../../AnimatedSwitcher-cjs.js');
 

package/dist/DataList/components/DataListSearch/index.mjs

@@ -16,8 +16,19 @@ import '../../../useFormFieldFocus-es.js';
 import '../../../InputValidation-es.js';
 import '../../../Spinner-es.js';
 import 'react-hook-form';
+import '../../../omit-es.js';
+import '../../../_commonjsHelpers-es.js';
+import '../../../_baseGet-es.js';
+import '../../../isTypedArray-es.js';
+import '../../../isObjectLike-es.js';
+import '../../../identity-es.js';
+import '../../../_getTag-es.js';
+import '../../../isSymbol-es.js';
+import '../../../keysIn-es.js';
+import '../../../_baseAssignValue-es.js';
+import '../../../_baseFlatten-es.js';
+import '../../../_setToString-es.js';
 import '../../../DataListContext-es.js';
 import '../../../noop-es.js';
-import '../../../_commonjsHelpers-es.js';
 import '../../../DataList.const-es.js';
 import '../../../AnimatedSwitcher-es.js';

package/dist/DataList/index.cjs

@@ -81,6 +81,14 @@ require('../InputText/index.cjs');
 require('../FormField-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
+require('../omit-cjs.js');
+require('../_baseGet-cjs.js');
+require('../identity-cjs.js');
+require('../isSymbol-cjs.js');
+require('../keysIn-cjs.js');
+require('../_baseAssignValue-cjs.js');
+require('../_baseFlatten-cjs.js');
+require('../_setToString-cjs.js');
 require('../DataListEmptyState-cjs.js');
 require('../DataListLoadMore-cjs.js');
 require('../DataListAction-cjs.js');

package/dist/DataList/index.mjs

@@ -79,6 +79,14 @@ import '../InputText/index.mjs';
 import '../FormField-es.js';
 import '../useFormFieldFocus-es.js';
 import '../InputValidation-es.js';
+import '../omit-es.js';
+import '../_baseGet-es.js';
+import '../identity-es.js';
+import '../isSymbol-es.js';
+import '../keysIn-es.js';
+import '../_baseAssignValue-es.js';
+import '../_baseFlatten-es.js';
+import '../_setToString-es.js';
 import '../DataListEmptyState-es.js';
 import '../DataListLoadMore-es.js';
 import '../DataListAction-es.js';