@jobber/components 6.112.1 → 6.113.0

package/dist/Autocomplete/index.cjs

@@ -10,23 +10,27 @@ var Heading = require('../Heading-cjs.js');
 var Text = require('../Text-cjs.js');
 var Typography = require('../Typography-cjs.js');
 var Icon = require('../Icon-cjs.js');
-var InputText_index = require('../InputText/index.cjs');
 var Glimmer = require('../Glimmer-cjs.js');
+var InputText_index = require('../InputText/index.cjs');
 var FormField = require('../FormField-cjs.js');
-var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 var tslib_es6 = require('../tslib.es6-cjs.js');
+require('react-hook-form');
+require('../Button-cjs.js');
+var filterDataAttributes = require('../filterDataAttributes-cjs.js');
 require('react/jsx-runtime');
 require('react-dom');
-require('react-hook-form');
+require('../Content-cjs.js');
 require('framer-motion');
-require('../Button-cjs.js');
-require('react-router-dom');
 require('../useFormFieldFocus-cjs.js');
 require('../InputValidation-cjs.js');
 require('../Spinner-cjs.js');
-require('../Content-cjs.js');
+require('react-router-dom');
 
-var styles$1 = {"list":"_37kZB-nYE08-","loadingList":"ULib3TUQja0-","option":"h5-1Pp0eRyo-","defaultOptionContent":"iBkyj85vd-E-","icon":"I6wAbSJJHNQ-","optionActive":"_4yhnonWAWRY-","actionActive":"oGLMF6n8C74-","action":"LBrwH6TEUYA-","section":"DDOv4DR8bJQ-","emptyStateMessage":"Twgjn26oldE-","stickyTop":"mc1-CEwZtHE-","scrollRegion":"kOR88SFNOn0-","persistentHeader":"_0O-kEf3h9ZI-","persistentFooter":"rQ9ZS7Rb7Z4-","textPersistent":"vxk57ZhP8GU-","spinning":"_0d8hyvaCPAw-"};
+const AUTOCOMPLETE_MAX_HEIGHT$1 = 300;
+/** Stable empty array for cleared/empty selection state. Reuse to avoid reference churn. */
+const EMPTY_SELECTED_VALUES = [];
+
+var styles$1 = {"list":"_37kZB-nYE08-","loadingList":"ULib3TUQja0-","option":"h5-1Pp0eRyo-","defaultOptionContent":"iBkyj85vd-E-","icon":"I6wAbSJJHNQ-","optionActive":"_4yhnonWAWRY-","actionActive":"oGLMF6n8C74-","action":"LBrwH6TEUYA-","section":"DDOv4DR8bJQ-","emptyStateMessage":"Twgjn26oldE-","stickyTop":"mc1-CEwZtHE-","scrollRegion":"kOR88SFNOn0-","persistentHeader":"_0O-kEf3h9ZI-","persistentFooter":"rQ9ZS7Rb7Z4-","textPersistent":"vxk57ZhP8GU-","multiSelectField":"AWoK6-P8fFE-","chipArea":"zJm0oR5x4qY-","inlineInput":"Oa26ZaVEi3g-","selectionChip":"IarOrfyYExE-","selectionChipActive":"pmtAk9HEhF4-","selectionChipDisabled":"nmXqlAV-DJo-","chipDismiss":"SmrmwoOlZDo-","limitText":"pqwAJ8VczCU-","spinning":"_0d8hyvaCPAw-"};
 
 function flattenMenu(menu) {
     const optionItems = [];
@@ -128,8 +132,8 @@ 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, readOnly = false, }) {
+const AUTOCOMPLETE_MAX_HEIGHT = 300;
+function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose, onMenuOpen, onMenuClose, selectedIndex, readOnly = false, disabled = false, outsidePressExcludeSelector, }) {
     const [open, setOpen] = React.useState(false);
     const [activeIndex, setActiveIndex] = React.useState(null);
     const listRef = React.useRef([]);
@@ -139,7 +143,10 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
         open,
         onOpenChange: (isOpen, _event, reason) => {
             setOpen(isOpen);
-            if (isOpen === false) {
+            if (isOpen) {
+                onMenuOpen === null || onMenuOpen === void 0 ? void 0 : onMenuOpen();
+            }
+            else {
                 if (shouldResetActiveIndexOnClose === null || shouldResetActiveIndexOnClose === void 0 ? void 0 : shouldResetActiveIndexOnClose()) {
                     setActiveIndex(null);
                 }
@@ -152,7 +159,7 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             floatingUi_react.size({
                 apply({ availableHeight, elements }) {
                     const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
-                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT$1,
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
                     });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight$1}px`,
@@ -161,8 +168,9 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
             }),
         ],
     });
+    const enabled = !readOnly && !disabled;
     const click = floatingUi_react.useClick(context, {
-        enabled: !readOnly,
+        enabled,
         toggle: false, // Only open, never close on click
     });
     const listNav = floatingUi_react.useListNavigation(context, {
@@ -182,7 +190,16 @@ function useAutocompleteListNav({ navigableCount, shouldResetActiveIndexOnClose,
         focusItemOnHover: false,
     });
     const dismiss = floatingUi_react.useDismiss(context, {
-        outsidePress: true,
+        outsidePress: outsidePressExcludeSelector
+            ? (event) => {
+                var _a, _b, _c, _d;
+                const target = event.target;
+                const insideRef = (_b = (_a = context.elements.domReference) === null || _a === void 0 ? void 0 : _a.contains(target)) !== null && _b !== void 0 ? _b : false;
+                const insideFloating = (_d = (_c = context.elements.floating) === null || _c === void 0 ? void 0 : _c.contains(target)) !== null && _d !== void 0 ? _d : false;
+                const insideExclude = event.target.closest(outsidePressExcludeSelector);
+                return !(insideRef || insideFloating || insideExclude);
+            }
+            : true,
         escapeKey: true,
         outsidePressEvent: "click",
     });
@@ -239,8 +256,8 @@ function createInteractionPointerDownHandler(isHandlingMenuInteractionRef) {
 // Keeping this hook cohesive improves readability by centralizing related
 // interactions and state transitions.
 // eslint-disable-next-line max-statements
-function useAutocomplete(props) {
-    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
+function useAutocomplete(props, inputRef) {
+    const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, disabled = false, debounce: debounceMs = 300, } = props;
     const isHandlingMenuInteractionRef = React.useRef(false);
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = jobberHooks.useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
@@ -256,7 +273,7 @@ function useAutocomplete(props) {
     const isOptionSelected = React.useCallback((opt) => {
         var _a;
         if (multiple) {
-            const current = (_a = value) !== null && _a !== void 0 ? _a : [];
+            const current = (_a = value) !== null && _a !== void 0 ? _a : EMPTY_SELECTED_VALUES;
             return current.some(v => equals(v, opt));
         }
         const current = value;
@@ -287,6 +304,9 @@ function useAutocomplete(props) {
         // Skip debounce when clearing input for immediate feedback, preventing flickering of last selected item
         if (debounceMs === 0 || inputValue === "") {
             setDebouncedInputValue(inputValue);
+            // Cancel any pending debounced call so a stale intermediate value
+            // (e.g. "P" while deleting "Pipe…") doesn't overwrite the immediate set.
+            debouncedSetter.cancel();
             return;
         }
         debouncedSetter(inputValue);
@@ -342,7 +362,7 @@ function useAutocomplete(props) {
     const hasSelection = React.useMemo(() => {
         var _a;
         if (multiple) {
-            const current = (_a = value) !== null && _a !== void 0 ? _a : [];
+            const current = (_a = value) !== null && _a !== void 0 ? _a : EMPTY_SELECTED_VALUES;
             return Array.isArray(current) && current.length > 0;
         }
         return value != null;
@@ -353,11 +373,13 @@ function useAutocomplete(props) {
     const totalNavigableCount = headerInteractivePersistents.length +
         mainNavigableCount +
         footerInteractivePersistents.length;
-    // Compute the currently selected index in the global navigable list (header -> middle -> footer)
+    // Compute the currently selected index in the global navigable list (header -> middle -> footer).
+    // In multiple mode this is always null — there is no single "selected" index, and
+    // floating-ui would otherwise jump the highlight whenever the value array changes.
     const selectedIndex = React.useMemo(() => {
-        const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+        if (multiple)
+            return null;
+        const selectedValue = value;
         if (!selectedValue)
             return null;
         const middleIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -376,6 +398,23 @@ function useAutocomplete(props) {
         shouldResetActiveIndexOnClose: () => !hasSelection,
         selectedIndex,
         readOnly,
+        disabled,
+        outsidePressExcludeSelector: multiple
+            ? "[data-testid='ATL-AutocompleteRebuilt-chipArea']"
+            : undefined,
+        onMenuOpen: () => {
+            if (multiple)
+                return;
+            const selectedValue = value;
+            if (selectedValue) {
+                const selectedNavigableIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
+                if (selectedNavigableIndex != null) {
+                    setActiveIndex(selectedNavigableIndex);
+                    return;
+                }
+            }
+            setActiveIndex(null);
+        },
         onMenuClose: () => {
             if (props.allowFreeForm !== true) {
                 const hasText = inputValue.trim().length > 0;
@@ -387,30 +426,30 @@ function useAutocomplete(props) {
             }
         },
     });
-    // Handles activeIndex reset and, in single-select mode only, clearing selection when input is empty
+    const prevOpenRef = React.useRef(false);
+    // TODO: Leverage FloatingUI useFocus, and onArrowKeyDown to manage open state and allow onOpenChange to be the source of truth
+    // JOB-154442
     React.useEffect(() => {
-        const hasText = inputValue.trim().length > 0;
-        if (hasText)
-            return;
-        // Always reset highlight when input is empty
-        setActiveIndex(null);
-        // In multiple mode, clearing the input should NOT clear the selection
-        if (multiple)
-            return;
-        // For single-select, treat clearing input as clearing the selection
-        if (hasSelection) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        var _a, _b;
+        if (open && !prevOpenRef.current) {
+            (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props);
         }
-    }, [inputValue, multiple, hasSelection, setActiveIndex, onChange, open]);
+        else if (!open && prevOpenRef.current) {
+            (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+        }
+        prevOpenRef.current = open;
+    }, [open, props.onOpen, props.onClose]);
     function selectOption(option) {
         var _a;
         if (multiple) {
-            const current = (_a = value) !== null && _a !== void 0 ? _a : [];
+            const current = (_a = value) !== null && _a !== void 0 ? _a : EMPTY_SELECTED_VALUES;
             const exists = current.some(v => equals(v, option));
             const next = exists
                 ? current.filter(v => !equals(v, option))
                 : [...current, option];
-            onChange(next);
+            onChange((next.length === 0 ? EMPTY_SELECTED_VALUES : next));
+            lastInputWasUser.current = false;
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange("");
         }
         else {
             onChange(option);
@@ -418,6 +457,14 @@ function useAutocomplete(props) {
             onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(getOptionLabel(option));
         }
     }
+    function reHighlightSelectedItem() {
+        const selectedValue = value;
+        if (!selectedValue)
+            return;
+        const idx = findNavigableIndexForValue(renderable, equals, selectedValue);
+        if (idx != null)
+            setActiveIndex(idx);
+    }
     function tryCommitFreeFormOnEnter() {
         if (props.allowFreeForm !== true)
             return false;
@@ -429,77 +476,38 @@ function useAutocomplete(props) {
         commitFromInputText(inputText);
         return true;
     }
-    // Keep the selected item highlighted when deleting characters from the input
-    const prevInputLengthRef = React.useRef(inputValue.length);
-    React.useEffect(() => {
-        const previousLength = prevInputLengthRef.current;
-        prevInputLengthRef.current = inputValue.length;
-        if (!open)
-            return;
-        if (!lastInputWasUser.current)
-            return;
-        if (previousLength <= inputValue.length)
-            return; // only on deletion
-        if (!hasSelection)
-            return;
-        const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
-        if (!selectedValue)
-            return;
-        const idx = findNavigableIndexForValue(renderable, equals, selectedValue);
-        if (idx != null)
-            setActiveIndex(idx);
-    }, [
-        inputValue,
-        renderable,
-        equals,
-        value,
-        open,
-        hasSelection,
-        multiple,
-        setActiveIndex,
-    ]);
-    React.useEffect(() => {
-        if (!open)
-            return;
-        // When opening the menu, initialize the highlight consistently:
-        // - If there is a current selection, highlight that option
-        // - Otherwise, leave the highlight unset (null)
-        const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
-        if (selectedValue) {
-            const selectedNavigableIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
-            if (selectedNavigableIndex != null) {
-                setActiveIndex(selectedNavigableIndex);
-                return;
-            }
-        }
-        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);
-        if (refs.domReference.current instanceof HTMLElement) {
-            refs.domReference.current.focus();
+        if (!multiple) {
+            setOpen(false);
         }
-    }, [selectOption, setOpen]);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [selectOption, setOpen, multiple, inputRef]);
     const onAction = React.useCallback((action) => {
+        var _a;
         action.run();
         setActiveIndex(null);
         if (action.closeOnRun !== false)
             setOpen(false);
-        if (refs.domReference.current instanceof HTMLElement) {
-            refs.domReference.current.focus();
-        }
-    }, [setOpen, setActiveIndex]);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [setOpen, setActiveIndex, inputRef]);
     /**
      * Handler for mousedown on interactive menu items (options/actions)
      * Prevents default to avoid blur and sets flag for focus management
      */
     const onInteractionPointerDown = React.useMemo(() => createInteractionPointerDownHandler(isHandlingMenuInteractionRef), []);
+    function applyFreeFormValue(freeFormCreated) {
+        var _a;
+        const nextValue = multiple
+            ? [...((_a = value) !== null && _a !== void 0 ? _a : EMPTY_SELECTED_VALUES), freeFormCreated]
+            : freeFormCreated;
+        props.onChange(nextValue);
+        if (multiple) {
+            lastInputWasUser.current = false;
+            onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange("");
+        }
+    }
     function commitFromInputText(inputText) {
         var _a;
         if (inputText.length === 0)
@@ -515,15 +523,20 @@ function useAutocomplete(props) {
         const freeFormCreated = (_a = props.createFreeFormValue) === null || _a === void 0 ? void 0 : _a.call(props, inputText);
         if (!freeFormCreated)
             return false;
-        props.onChange(freeFormCreated);
+        applyFreeFormValue(freeFormCreated);
         return true;
     }
     const tryRestoreInputToSelectedLabel = React.useCallback(() => {
         if (props.allowFreeForm === true)
             return;
-        const selectedValue = multiple
-            ? value === null || value === void 0 ? void 0 : value[0]
-            : value;
+        if (multiple) {
+            if (inputValue.trim().length > 0) {
+                lastInputWasUser.current = false;
+                onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange("");
+            }
+            return;
+        }
+        const selectedValue = value;
         if (!selectedValue)
             return;
         const selectedLabel = getOptionLabel(selectedValue);
@@ -643,8 +656,40 @@ function useAutocomplete(props) {
             });
         }
     }
+    const removeLastSelection = React.useCallback(() => {
+        var _a;
+        if (!multiple || readOnly)
+            return;
+        const current = (_a = value) !== null && _a !== void 0 ? _a : EMPTY_SELECTED_VALUES;
+        if (current.length > 0) {
+            const next = current.slice(0, -1);
+            onChange((next.length === 0 ? EMPTY_SELECTED_VALUES : next));
+        }
+    }, [multiple, readOnly, value, onChange]);
+    const removeSelection = React.useCallback((option) => {
+        var _a;
+        if (readOnly)
+            return;
+        if (multiple) {
+            const current = (_a = value) !== null && _a !== void 0 ? _a : EMPTY_SELECTED_VALUES;
+            const next = current.filter(v => !equals(v, option));
+            onChange((next.length === 0
+                ? EMPTY_SELECTED_VALUES
+                : next));
+        }
+        else {
+            const current = value;
+            if (current && equals(current, option)) {
+                onChange(undefined);
+            }
+        }
+    }, [readOnly, multiple, value, equals, onChange]);
     const onInputKeyDown = React.useCallback((event) => {
         const key = event.key;
+        if (key === "Backspace" && multiple && inputValue === "") {
+            removeLastSelection();
+            return;
+        }
         if (key !== "ArrowDown" && key !== "ArrowUp" && key !== "Enter")
             return;
         if (key === "ArrowDown" || key === "ArrowUp") {
@@ -652,20 +697,27 @@ function useAutocomplete(props) {
             return;
         }
         handleEnterKey(event);
-    }, [open, onSelection, onAction]);
+    }, [open, onSelection, onAction, multiple, inputValue, removeLastSelection]);
     const onInputChangeFromUser = React.useCallback((val) => {
         lastInputWasUser.current = true;
-        // Reset highlight (activeIndex) on additions to the search term
-        if (val.length > inputValue.length) {
+        const isEmpty = val.trim().length === 0;
+        if (isEmpty) {
+            setActiveIndex(null);
+            if (!multiple && hasSelection) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+            }
+        }
+        else if (val.length > inputValue.length) {
             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
+        else if (val.length < inputValue.length &&
+            !multiple &&
+            open &&
+            hasSelection) {
+            reHighlightSelectedItem();
+        }
         if (!readOnly) {
-            const hasText = val.trim().length > 0;
-            const mustSelectFromOptions = hasText && !props.allowFreeForm;
-            const keepOpenOnEmpty = openOnFocus;
-            setOpen(mustSelectFromOptions || keepOpenOnEmpty);
+            setOpen((!isEmpty && !props.allowFreeForm) || openOnFocus);
         }
         onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(val);
     }, [
@@ -676,7 +728,20 @@ function useAutocomplete(props) {
         props.allowFreeForm,
         openOnFocus,
         setOpen,
+        multiple,
+        hasSelection,
+        onChange,
+        open,
     ]);
+    const clearAll = React.useCallback(() => {
+        if (multiple) {
+            onChange(EMPTY_SELECTED_VALUES);
+        }
+        else {
+            onChange(undefined);
+        }
+        onInputChangeFromUser("");
+    }, [multiple, onChange, onInputChangeFromUser]);
     return {
         // rendering data
         renderable,
@@ -704,6 +769,8 @@ function useAutocomplete(props) {
         onSelection,
         onAction,
         onInteractionPointerDown,
+        removeSelection,
+        clearAll,
         // input handlers
         onInputChangeFromUser,
         onInputBlur,
@@ -714,6 +781,83 @@ function useAutocomplete(props) {
     };
 }
 
+function useChipNavigation({ selectedValues, inputValue, readOnly, removeSelection, onInputKeyDown, onInputBlur, }) {
+    const [rawActiveChipIndex, setRawActiveChipIndex] = React.useState(null);
+    const [previousInputValue, setPreviousInputValue] = React.useState(inputValue);
+    const activeChipIndex = clampActiveIndex(rawActiveChipIndex, selectedValues.length);
+    if (previousInputValue !== inputValue) {
+        setPreviousInputValue(inputValue);
+        if (inputValue !== "" && rawActiveChipIndex !== null) {
+            setRawActiveChipIndex(null);
+        }
+    }
+    const handleActiveChipKey = React.useCallback(
+    // eslint-disable-next-line max-statements
+    (event) => {
+        if (activeChipIndex === null)
+            return false;
+        const { key } = event;
+        if (key === "ArrowLeft") {
+            event.preventDefault();
+            setRawActiveChipIndex(i => Math.max(0, (i !== null && i !== void 0 ? i : 0) - 1));
+            return true;
+        }
+        if (key === "ArrowRight") {
+            event.preventDefault();
+            setRawActiveChipIndex(activeChipIndex + 1 >= selectedValues.length
+                ? null
+                : activeChipIndex + 1);
+            return true;
+        }
+        if (key === "Backspace" || key === "Delete") {
+            event.preventDefault();
+            const option = selectedValues[activeChipIndex];
+            const newLen = selectedValues.length - 1;
+            if (newLen === 0) {
+                setRawActiveChipIndex(null);
+            }
+            else if (activeChipIndex >= newLen) {
+                setRawActiveChipIndex(newLen - 1);
+            }
+            removeSelection(option);
+            return true;
+        }
+        if (key === "Escape") {
+            setRawActiveChipIndex(null);
+            return true;
+        }
+        setRawActiveChipIndex(null);
+        return false;
+    }, [activeChipIndex, selectedValues, removeSelection]);
+    const onKeyDown = React.useCallback((event) => {
+        if (handleActiveChipKey(event))
+            return;
+        if (event.key === "ArrowLeft" &&
+            !readOnly &&
+            inputValue === "" &&
+            selectedValues.length > 0) {
+            event.preventDefault();
+            setRawActiveChipIndex(selectedValues.length - 1);
+            return;
+        }
+        onInputKeyDown(event);
+    }, [handleActiveChipKey, selectedValues, inputValue, readOnly, onInputKeyDown]);
+    const onBlur = React.useCallback((event) => {
+        setRawActiveChipIndex(null);
+        onInputBlur(event);
+    }, [onInputBlur]);
+    return { activeChipIndex, onKeyDown, onBlur };
+}
+function clampActiveIndex(index, length) {
+    if (index === null)
+        return null;
+    if (length === 0)
+        return null;
+    if (index >= length)
+        return length - 1;
+    return index;
+}
+
 function MenuList({ items, activeIndex, indexOffset = 0, getItemProps, listRef, listboxId, customRenderOption, customRenderSection, customRenderAction, getOptionLabel, onSelect, onAction, onInteractionPointerDown, isOptionSelected, slotOverrides, }) {
     let navigableIndex = -1;
     function renderItemNode(item) {
@@ -797,7 +941,8 @@ function handleOptionRendering({ option, activeIndex, navigableIndex, getItemPro
 }
 function DefaultOptionContent({ isSelected, text, }) {
     return (React.createElement("div", { className: styles$1.defaultOptionContent },
-        React.createElement("div", { className: styles$1.icon }, isSelected && React.createElement(Icon.Icon, { name: "checkmark", size: "small" })),
+        React.createElement("div", { className: styles$1.icon, style: isSelected ? undefined : { visibility: "hidden" } },
+            React.createElement(Icon.Icon, { name: "checkmark", size: "small" })),
         React.createElement(Text.Text, null, text)));
 }
 function handleActionRendering({ action, activeIndex, navigableIndex, getItemProps, listRef, listboxId, customRenderAction, onAction, onInteractionPointerDown, indexOffset = 0, actionClassName, actionStyle, origin, }) {
@@ -943,12 +1088,50 @@ function DefaultTextPersistentContent({ persistent, }) {
     return React.createElement("div", { className: styles$1.textPersistent }, persistent.label);
 }
 
+function FloatingMenu({ context, getFloatingProps, refs, listboxId, className, floatingStyles, transitionStyles, menuWidth, menuStyle, renderable, persistentsHeaders, persistentsFooters, activeIndex, headerInteractiveCount, middleNavigableCount, getItemProps, listRef, onSelection, onAction, onInteractionPointerDown, getOptionLabel, isOptionSelected, loading, showEmptyStateMessage, emptyStateMessage, customRenderLoading, customRenderOption, customRenderSection, customRenderAction, customRenderHeader, customRenderFooter, slotOverrides, }) {
+    var _a, _b, _c, _d;
+    const activeIndexForMiddle = activeIndex != null ? activeIndex - headerInteractiveCount : null;
+    return (React.createElement(floatingUi_react.FloatingPortal, null,
+        React.createElement(floatingUi_react.FloatingFocusManager, { context: context, modal: false, initialFocus: -1, closeOnFocusOut: true, returnFocus: false },
+            React.createElement("div", Object.assign({}, getFloatingProps({
+                ref(node) {
+                    if (node)
+                        refs.setFloating(node);
+                },
+                id: listboxId,
+                role: "listbox",
+                className,
+                style: Object.assign(Object.assign(Object.assign(Object.assign({}, floatingStyles), transitionStyles), menuStyle), (menuWidth ? { width: menuWidth, maxWidth: menuWidth } : {})),
+            })),
+                React.createElement(PersistentRegion, { items: persistentsHeaders, position: "header", activeIndex: activeIndex, indexOffset: 0, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: customRenderHeader, customRenderFooter: customRenderFooter, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentHeader, (_a = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.header) === null || _a === void 0 ? void 0 : _a.className), style: (_b = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.header) === null || _b === void 0 ? void 0 : _b.style }),
+                React.createElement("div", { className: styles$1.scrollRegion }, loading ? (customRenderLoading !== null && customRenderLoading !== void 0 ? customRenderLoading : React.createElement(LoadingContent, null)) : (React.createElement(React.Fragment, null,
+                    showEmptyStateMessage && (React.createElement(EmptyStateMessage, { emptyState: emptyStateMessage })),
+                    renderable.length > 0 && (React.createElement(MenuList, { items: renderable, activeIndex: activeIndexForMiddle, indexOffset: headerInteractiveCount, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderOption: customRenderOption, customRenderSection: customRenderSection, customRenderAction: customRenderAction, getOptionLabel: getOptionLabel, onSelect: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, isOptionSelected: isOptionSelected, slotOverrides: slotOverrides }))))),
+                React.createElement(PersistentRegion, { items: persistentsFooters, position: "footer", activeIndex: activeIndex, indexOffset: headerInteractiveCount + middleNavigableCount, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: customRenderHeader, customRenderFooter: customRenderFooter, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentFooter, (_c = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.footer) === null || _c === void 0 ? void 0 : _c.className), style: (_d = slotOverrides === null || slotOverrides === void 0 ? void 0 : slotOverrides.footer) === null || _d === void 0 ? void 0 : _d.style })))));
+}
+function LoadingContent() {
+    return (React.createElement("div", { className: styles$1.loadingList, onPointerDown: preventDefaultPointerDown },
+        React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
+        React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
+        React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" })));
+}
+function EmptyStateMessage({ emptyState, }) {
+    const emptyStateDefault = "No options";
+    const emptyStateContent = emptyState !== null && emptyState !== void 0 ? emptyState : emptyStateDefault;
+    return (React.createElement("div", { className: styles$1.emptyStateMessage, onPointerDown: preventDefaultPointerDown }, emptyStateContent));
+}
+
 const AutocompleteRebuilt = React.forwardRef(AutocompleteRebuiltInternal);
 // eslint-disable-next-line max-statements
 function AutocompleteRebuiltInternal(props, forwardedRef) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     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, onInteractionPointerDown, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, } = useAutocomplete(props);
+    const formFieldRef = React.useRef(null);
+    // Ref for the multi-select input element, where we cannot use refs.domReference
+    // since it is not attached to the literal input element, whereas single + InputText only offers a
+    // ref to the literal input element.
+    const internalInputRef = React.useRef(null);
+    const { renderable, optionCount, persistentsHeaders, persistentsFooters, headerInteractiveCount, middleNavigableCount, getOptionLabel, isOptionSelected, refs, floatingStyles, context, getReferenceProps, getFloatingProps, getItemProps, activeIndex, open, listRef, onSelection, onAction, onInteractionPointerDown, removeSelection, onInputChangeFromUser, onInputBlur, onInputFocus, onInputKeyDown, setReferenceElement, clearAll, } = useAutocomplete(props, internalInputRef);
     const listboxId = React.useId();
     // Provides mount/unmount-aware transition styles for the floating element
     const { isMounted, styles: transitionStyles } = floatingUi_react.useTransitionStyles(context, {
@@ -959,90 +1142,172 @@ function AutocompleteRebuiltInternal(props, forwardedRef) {
     });
     const [menuWidth, setMenuWidth] = React.useState(undefined);
     const [positionRefEl, setPositionRefEl] = React.useState(null);
-    const composedReferenceProps = getReferenceProps({
-        onKeyDown: onInputKeyDown,
-        onFocus: onInputFocus,
-        onBlur: onInputBlur,
+    const inputId = React.useId();
+    const descriptionId = `descriptionUUID--${inputId}`;
+    const selectedValues = props.multiple
+        ? ((_a = props.value) !== null && _a !== void 0 ? _a : EMPTY_SELECTED_VALUES)
+        : EMPTY_SELECTED_VALUES;
+    const { activeChipIndex, onKeyDown: chipKeyDown, onBlur: chipBlur, } = useChipNavigation({
+        selectedValues,
+        inputValue,
+        readOnly: props.readOnly,
+        removeSelection,
+        onInputKeyDown,
+        onInputBlur,
     });
+    const focusInputOnPointerDown = React.useCallback((e) => {
+        var _a;
+        const target = e.target;
+        if (target.closest("input, button"))
+            return;
+        e.preventDefault();
+        (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const composedReferenceProps = getReferenceProps(Object.assign({ onKeyDown: props.multiple ? chipKeyDown : onInputKeyDown, onFocus: onInputFocus, onBlur: props.multiple ? chipBlur : onInputBlur }, (props.multiple ? { onPointerDown: focusInputOnPointerDown } : {})));
     const dataAttrs = filterDataAttributes.filterDataAttributes(props);
-    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
-        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), { role: "combobox", "aria-autocomplete": "list", "aria-expanded": open ? true : false, "aria-controls": listboxId, "aria-activedescendant": open && activeIndex != null
+    const ariaProps = {
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": open ? true : false,
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeChipIndex === null && open && activeIndex != null
             ? `${listboxId}-item-${activeIndex}`
-            : undefined }), dataAttrs);
+            : undefined,
+    };
+    const inputProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ version: 2, value: inputValue, onChange: props.readOnly ? undefined : onInputChangeFromUser }, (props.readOnly ? { onFocus: onInputFocus, onBlur: onInputBlur } : {})), { placeholder,
+        disabled, readOnly: props.readOnly, error: error !== null && error !== void 0 ? error : undefined, name: props.name, invalid, clearable: props.clearable, autoComplete: "off", autoFocus: props.autoFocus, description, size: sizeProp ? sizeProp : undefined, prefix: props.prefix, suffix: props.suffix }), (props.readOnly ? {} : composedReferenceProps)), ariaProps), dataAttrs);
+    const chipAreaRef = React.useCallback((node) => {
+        if (!node)
+            return;
+        // In multiple mode, we use the input as the reference so floating-ui's
+        // useListNavigation treats it as a typeable combobox and allows Space.
+        // Only use chipArea for positioning/sizing.
+        if (!props.multiple) {
+            setReferenceElement(node);
+        }
+        const multiContainer = node.closest("[data-testid='ATL-AutocompleteRebuilt-multiSelectContainer']");
+        if (multiContainer) {
+            setMenuWidth(multiContainer.clientWidth);
+            setPositionRefEl(multiContainer);
+        }
+    }, [setReferenceElement, props.multiple]);
     const referenceInputRef = React.useCallback((node) => {
         setReferenceElement(node);
-        // Workaround to get the width of the visual InputText element, which is not the same as
-        // the literal input reference element when props like suffix/prefix/clearable are present.
-        const visualInputTextElement = node === null || node === void 0 ? void 0 : node.closest("[data-testid='Form-Field-Wrapper']");
-        if (visualInputTextElement) {
-            setMenuWidth(visualInputTextElement.clientWidth);
-            setPositionRefEl(visualInputTextElement);
+        if (!props.multiple) {
+            // Workaround to get the width of the visual InputText element, which is not the same as
+            // the literal input reference element.
+            const visualInputTextElement = node === null || node === void 0 ? void 0 : node.closest("[data-testid='Form-Field-Wrapper']");
+            if (visualInputTextElement) {
+                setMenuWidth(visualInputTextElement.clientWidth);
+                setPositionRefEl(visualInputTextElement);
+            }
         }
-    }, [setReferenceElement]);
+    }, [setReferenceElement, props.multiple]);
     const mergedInputRef = React.useMemo(() => FormField.mergeRefs([
         referenceInputRef,
+        internalInputRef,
         forwardedRef,
     ]), [referenceInputRef, forwardedRef]);
     React.useEffect(() => {
         if (!positionRefEl)
             return;
-        // Set the reference element to the visual InputText element so the menu aligns with the input.
         refs.setPositionReference(positionRefEl);
     }, [positionRefEl, refs]);
-    const menuClassName = classnames(styles$1.list, (_a = props.UNSAFE_className) === null || _a === void 0 ? void 0 : _a.menu);
+    const menuClassName = classnames(styles$1.list, (_b = props.UNSAFE_className) === null || _b === void 0 ? void 0 : _b.menu);
     const showEmptyStateMessage = optionCount === 0 && props.emptyStateMessage !== false;
-    const activeIndexForMiddle = activeIndex != null ? activeIndex - headerInteractiveCount : null;
+    const floatingMenu = isMounted && !props.readOnly && !disabled && (React.createElement(FloatingMenu, { context: context, getFloatingProps: getFloatingProps, refs: refs, listboxId: listboxId, className: menuClassName, floatingStyles: floatingStyles, transitionStyles: transitionStyles, menuWidth: menuWidth, menuStyle: (_c = props.UNSAFE_styles) === null || _c === void 0 ? void 0 : _c.menu, renderable: renderable, persistentsHeaders: persistentsHeaders, persistentsFooters: persistentsFooters, activeIndex: activeIndex, headerInteractiveCount: headerInteractiveCount, middleNavigableCount: middleNavigableCount, getItemProps: getItemProps, listRef: listRef, onSelection: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, getOptionLabel: getOptionLabel, isOptionSelected: isOptionSelected, loading: loading, showEmptyStateMessage: showEmptyStateMessage, emptyStateMessage: props.emptyStateMessage, customRenderLoading: props.customRenderLoading, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, slotOverrides: {
+            option: {
+                className: (_d = props.UNSAFE_className) === null || _d === void 0 ? void 0 : _d.option,
+                style: (_e = props.UNSAFE_styles) === null || _e === void 0 ? void 0 : _e.option,
+            },
+            action: {
+                className: (_f = props.UNSAFE_className) === null || _f === void 0 ? void 0 : _f.action,
+                style: (_g = props.UNSAFE_styles) === null || _g === void 0 ? void 0 : _g.action,
+            },
+            section: {
+                className: (_h = props.UNSAFE_className) === null || _h === void 0 ? void 0 : _h.section,
+                style: (_j = props.UNSAFE_styles) === null || _j === void 0 ? void 0 : _j.section,
+            },
+            header: {
+                className: (_k = props.UNSAFE_className) === null || _k === void 0 ? void 0 : _k.header,
+                style: (_l = props.UNSAFE_styles) === null || _l === void 0 ? void 0 : _l.header,
+            },
+            footer: {
+                className: (_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,
+            },
+        } }));
+    if (props.customRenderInput) {
+        return (React.createElement("div", { "data-testid": "ATL-AutocompleteRebuilt" },
+            props.customRenderInput({ inputRef: mergedInputRef, inputProps }),
+            floatingMenu));
+    }
+    if (props.multiple) {
+        return (React.createElement(MultipleSelectionLayout, { selectedValues: selectedValues, inputValue: inputValue, disabled: disabled, error: error, invalid: invalid, sizeProp: sizeProp, inputId: inputId, descriptionId: descriptionId, description: description, placeholder: placeholder, clearable: props.clearable, prefix: props.prefix, suffix: props.suffix, readOnly: props.readOnly, name: props.name, autoFocus: props.autoFocus, formFieldRef: formFieldRef, chipAreaRef: chipAreaRef, mergedInputRef: mergedInputRef, internalInputRef: internalInputRef, activeChipIndex: activeChipIndex, getOptionLabel: getOptionLabel, customRenderValue: props.customRenderValue, removeSelection: removeSelection, clearAll: clearAll, onInputChangeFromUser: onInputChangeFromUser, chipAreaEventProps: props.readOnly
+                ? { onFocus: onInputFocus, onBlur: chipBlur }
+                : composedReferenceProps, inputAriaProps: ariaProps, inputDataAttrs: dataAttrs, limitVisibleSelections: props.limitVisibleSelections, limitSelectionText: props.limitSelectionText, unsafeClassName: (_p = props.UNSAFE_className) === null || _p === void 0 ? void 0 : _p.selection, unsafeStyle: (_q = props.UNSAFE_styles) === null || _q === void 0 ? void 0 : _q.selection }, floatingMenu));
+    }
     return (React.createElement("div", { "data-testid": "ATL-AutocompleteRebuilt" },
-        props.customRenderInput ? (props.customRenderInput({ inputRef: mergedInputRef, inputProps })) : (React.createElement(InputText_index.InputText, Object.assign({ ref: mergedInputRef }, inputProps))),
-        isMounted && !props.readOnly && (React.createElement(floatingUi_react.FloatingPortal, null,
-            React.createElement(floatingUi_react.FloatingFocusManager, { context: context, modal: false, initialFocus: -1, closeOnFocusOut: true, returnFocus: false },
-                React.createElement("div", Object.assign({}, getFloatingProps({
-                    ref(node) {
-                        if (node)
-                            refs.setFloating(node);
-                    },
-                    id: listboxId,
-                    role: "listbox",
-                    className: menuClassName,
-                    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 }
-                        : {})),
-                })),
-                    React.createElement(PersistentRegion, { items: persistentsHeaders, position: "header", activeIndex: activeIndex, indexOffset: 0, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderHeader: props.customRenderHeader, customRenderFooter: props.customRenderFooter, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentHeader, (_c = props.UNSAFE_className) === null || _c === void 0 ? void 0 : _c.header), style: (_d = props.UNSAFE_styles) === null || _d === void 0 ? void 0 : _d.header }),
-                    React.createElement("div", { className: styles$1.scrollRegion }, loading ? ((_e = props.customRenderLoading) !== null && _e !== void 0 ? _e : React.createElement(LoadingContent, null)) : (React.createElement(React.Fragment, null,
-                        showEmptyStateMessage && (React.createElement(EmptyStateMessage, { emptyState: props.emptyStateMessage })),
-                        renderable.length > 0 && (React.createElement(MenuList, { items: renderable, activeIndex: activeIndexForMiddle, indexOffset: headerInteractiveCount, listboxId: listboxId, getItemProps: getItemProps, listRef: listRef, customRenderOption: props.customRenderOption, customRenderSection: props.customRenderSection, customRenderAction: props.customRenderAction, getOptionLabel: getOptionLabel, onSelect: onSelection, onAction: onAction, onInteractionPointerDown: onInteractionPointerDown, isOptionSelected: isOptionSelected, slotOverrides: {
-                                option: {
-                                    className: (_f = props.UNSAFE_className) === null || _f === void 0 ? void 0 : _f.option,
-                                    style: (_g = props.UNSAFE_styles) === null || _g === void 0 ? void 0 : _g.option,
-                                },
-                                action: {
-                                    className: (_h = props.UNSAFE_className) === null || _h === void 0 ? void 0 : _h.action,
-                                    style: (_j = props.UNSAFE_styles) === null || _j === void 0 ? void 0 : _j.action,
-                                },
-                                section: {
-                                    className: (_k = props.UNSAFE_className) === null || _k === void 0 ? void 0 : _k.section,
-                                    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, onInteractionPointerDown: onInteractionPointerDown, className: classnames(styles$1.persistentFooter, (_m = props.UNSAFE_className) === null || _m === void 0 ? void 0 : _m.footer), style: (_o = props.UNSAFE_styles) === null || _o === void 0 ? void 0 : _o.footer })))))));
+        React.createElement(InputText_index.InputText, Object.assign({ ref: mergedInputRef }, inputProps)),
+        floatingMenu));
 }
-function LoadingContent() {
-    return (React.createElement("div", { className: styles$1.loadingList, onPointerDown: preventDefaultPointerDown },
-        React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
-        React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" }),
-        React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "base" })));
+function SelectionChip({ value, active, disabled, getOptionLabel, customRenderValue, canDismiss, onDismiss, unsafeClassName, unsafeStyle, }) {
+    return (React.createElement("span", { "data-selection-disabled": disabled, className: classnames(styles$1.selectionChip, {
+            [styles$1.selectionChipActive]: active,
+            [styles$1.selectionChipDisabled]: disabled,
+        }, unsafeClassName), style: unsafeStyle, "data-testid": "ATL-AutocompleteRebuilt-chip", onPointerDown: preventDefaultPointerDown },
+        customRenderValue ? (customRenderValue({ value, getOptionLabel })) : (React.createElement(Typography.Typography, { size: "small" }, getOptionLabel(value))),
+        canDismiss && (React.createElement("button", { type: "button", disabled: disabled, className: styles$1.chipDismiss, onClick: onDismiss, onPointerDown: preventDefaultPointerDown, "aria-label": `Remove ${getOptionLabel(value)}`, tabIndex: -1 },
+            React.createElement(Icon.Icon, { size: "small", name: "remove" })))));
 }
-function EmptyStateMessage({ emptyState, }) {
-    const emptyStateDefault = "No options";
-    const emptyStateContent = emptyState !== null && emptyState !== void 0 ? emptyState : emptyStateDefault;
-    return (React.createElement("div", { className: styles$1.emptyStateMessage, onPointerDown: preventDefaultPointerDown }, emptyStateContent));
+function SelectionChipsList({ selectedValues, isFocused, limitVisibleSelections = 6, limitSelectionText = (count) => `+${count}`, activeChipIndex, disabled, getOptionLabel, customRenderValue, canDismiss, removeSelection, unsafeClassName, unsafeStyle, }) {
+    const shouldLimit = !isFocused &&
+        limitVisibleSelections !== -1 &&
+        selectedValues.length > limitVisibleSelections;
+    const visibleValues = shouldLimit
+        ? selectedValues.slice(0, limitVisibleSelections)
+        : selectedValues;
+    const hiddenCount = shouldLimit
+        ? selectedValues.length - limitVisibleSelections
+        : 0;
+    return (React.createElement(React.Fragment, null,
+        visibleValues.map((v, i) => {
+            var _a;
+            return (React.createElement(SelectionChip, { key: (_a = v.key) !== null && _a !== void 0 ? _a : getOptionLabel(v), value: v, active: activeChipIndex === i, disabled: disabled, getOptionLabel: getOptionLabel, customRenderValue: customRenderValue, canDismiss: canDismiss, onDismiss: () => removeSelection(v), unsafeClassName: unsafeClassName, unsafeStyle: unsafeStyle }));
+        }),
+        hiddenCount > 0 && (React.createElement("span", { className: styles$1.limitText, "data-testid": "ATL-AutocompleteRebuilt-limitText" },
+            React.createElement(Typography.Typography, { size: "small", element: "span" }, limitSelectionText(hiddenCount))))));
+}
+function MultipleSelectionLayout({ selectedValues, inputValue, disabled, error, invalid, sizeProp, inputId, descriptionId, description, placeholder, clearable, prefix, suffix, readOnly, name, autoFocus, formFieldRef, chipAreaRef, mergedInputRef, internalInputRef, activeChipIndex, getOptionLabel, customRenderValue, removeSelection, clearAll, onInputChangeFromUser, chipAreaEventProps, inputAriaProps, inputDataAttrs, limitVisibleSelections, limitSelectionText, unsafeClassName, unsafeStyle, children, }) {
+    var _a;
+    const [isFocused, setIsFocused] = React.useState(false);
+    const hasValue = selectedValues.length > 0 || inputValue;
+    const canDismissChip = !disabled && !readOnly;
+    const handleFocusIn = React.useCallback(() => {
+        setIsFocused(true);
+    }, []);
+    const handleFocusOut = React.useCallback((e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            setIsFocused(false);
+        }
+    }, []);
+    return (React.createElement("div", { "data-testid": "ATL-AutocompleteRebuilt", onFocus: handleFocusIn, onBlur: handleFocusOut },
+        React.createElement("div", { className: styles$1.multiSelectField, "data-testid": "ATL-AutocompleteRebuilt-multiSelectContainer" },
+            React.createElement(FormField.FormFieldWrapper, { disabled: disabled, size: sizeProp ? sizeProp : undefined, error: (_a = error) !== null && _a !== void 0 ? _a : "", invalid: Boolean(error || invalid), identifier: inputId, descriptionIdentifier: descriptionId, description: description, clearable: clearable !== null && clearable !== void 0 ? clearable : "never", onClear: () => {
+                    var _a;
+                    clearAll();
+                    (_a = internalInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }, type: "text", placeholder: placeholder, value: hasValue ? "has-value" : "", prefix: prefix, suffix: suffix, wrapperRef: formFieldRef },
+                React.createElement("div", Object.assign({ ref: chipAreaRef, className: styles$1.chipArea, "data-testid": "ATL-AutocompleteRebuilt-chipArea" }, chipAreaEventProps),
+                    React.createElement(SelectionChipsList, { selectedValues: selectedValues, isFocused: isFocused, limitVisibleSelections: limitVisibleSelections, limitSelectionText: limitSelectionText, activeChipIndex: activeChipIndex, disabled: disabled, getOptionLabel: getOptionLabel, customRenderValue: customRenderValue, canDismiss: canDismissChip, removeSelection: removeSelection, unsafeClassName: unsafeClassName, unsafeStyle: unsafeStyle }),
+                    React.createElement("input", Object.assign({ ref: mergedInputRef, className: styles$1.inlineInput, id: inputId, value: inputValue, onChange: readOnly
+                            ? undefined
+                            : e => onInputChangeFromUser(e.target.value), disabled: disabled, readOnly: readOnly, name: name, autoComplete: "off", autoFocus: autoFocus }, inputAriaProps, inputDataAttrs))))),
+        children));
 }
 
 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-"};
 
-const AUTOCOMPLETE_MAX_HEIGHT = 300;
-
 function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
     const { refs, floatingStyles, update } = floatingUi_react.useFloating(Object.assign({ placement: "bottom", middleware: [
             floatingUi_react.offset(8),
@@ -1050,7 +1315,7 @@ function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
             floatingUi_react.size({
                 apply({ availableHeight, elements }) {
                     const maxHeight$1 = maxHeight.calculateMaxHeight(availableHeight, {
-                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT,
+                        maxHeight: AUTOCOMPLETE_MAX_HEIGHT$1,
                     });
                     Object.assign(elements.floating.style, {
                         maxHeight: `${maxHeight$1}px`,