@jobber/components 6.68.2 → 6.69.0

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

@@ -67,7 +67,7 @@ export interface MenuProps<GenericOption extends AnyOption = AnyOption, GenericO
     /**
      * Element that the menu is attached to when the menu opens.
      */
-    readonly attachTo: RefObject<Element | null>;
+    readonly attachTo: HTMLDivElement | null;
     /**
      * Ref to the TextInput element.
      */

package/dist/Autocomplete/Menu/DefaultMenu.d.ts

@@ -1,4 +1,4 @@
-import React, { RefObject } from "react";
+import React from "react";
 import { AnyOption, Option } from "../Autocomplete.types";
 export interface DefaultMenuProps {
     readonly options: AnyOption[];
@@ -6,9 +6,9 @@ export interface DefaultMenuProps {
     /**
      * Element that it's attached to when the menu opens.
      */
-    readonly attachTo: RefObject<Element | null>;
+    readonly attachTo: HTMLDivElement | null;
     onOptionSelect(chosenOption?: Option): void;
-    readonly visible?: boolean;
+    readonly visible: boolean;
 }
 /**
  * Renders the default Menu for the Autocomplete component.

package/dist/Autocomplete/Menu/MenuWrapper.d.ts

@@ -2,8 +2,7 @@ import React, { PropsWithChildren } from "react";
 import { UseRepositionMenu } from "../useRepositionMenu";
 export interface BaseAutocompleteMenuWrapperInternalProps {
     readonly setMenuRef: UseRepositionMenu["setMenuRef"];
-    readonly popperStyles: UseRepositionMenu["styles"];
-    readonly attributes: UseRepositionMenu["attributes"];
+    readonly floatStyles: UseRepositionMenu["styles"];
     readonly targetWidth: UseRepositionMenu["targetWidth"];
     readonly visible?: boolean;
 }
@@ -12,7 +11,7 @@ export interface BaseAutocompleteMenuWrapperInternalProps {
  * @param attachTo - The element that the menu should be attached to.
  */
 export declare function useAutocompleteMenu({ attachTo, }: {
-    attachTo: React.RefObject<Element | null>;
+    attachTo: HTMLDivElement | null;
 }): {
     MenuWrapper: ({ children, visible, }: {
         children?: React.ReactNode;

package/dist/Autocomplete/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const AUTOCOMPLETE_MAX_HEIGHT = 300;
+export declare const AUTCOMPLETE_MIN_HEIGHT = 100;

package/dist/Autocomplete/index.cjs

@@ -3,48 +3,38 @@
 var Autocomplete = require('../Autocomplete-cjs.js');
 require('../tslib.es6-cjs.js');
 require('react');
-require('../Modal/index.cjs');
-require('react-dom');
 require('classnames');
-require('framer-motion');
-require('../useRefocusOnActivator-cjs.js');
-require('../useOnKeyDown-cjs.js');
-require('../useFocusTrap-cjs.js');
+require('../useIsMounted-cjs.js');
+require('../useSafeLayoutEffect-cjs.js');
+require('../floating-ui.react-cjs.js');
+require('react-dom');
 require('../Heading-cjs.js');
 require('../Typography-cjs.js');
-require('../Button-cjs.js');
-require('react-router-dom');
+require('../Text-cjs.js');
 require('../Icon-cjs.js');
 require('@jobber/design');
-require('../ButtonDismiss-cjs.js');
-require('../noop-cjs.js');
-require('../_commonjsHelpers-cjs.js');
-require('../floating-ui.react-cjs.js');
-require('../identity-cjs.js');
-require('../isTypedArray-cjs.js');
-require('../isObjectLike-cjs.js');
-require('../AtlantisPortalContent-cjs.js');
-require('../AtlantisThemeContext-cjs.js');
-require('../_baseAssignValue-cjs.js');
-require('../_baseFor-cjs.js');
-require('../keysIn-cjs.js');
-require('../_isIterateeCall-cjs.js');
-require('../_setToString-cjs.js');
-require('../useIsMounted-cjs.js');
-require('../useSafeLayoutEffect-cjs.js');
-require('react-popper');
-require('../Text-cjs.js');
+require('../useOnKeyDown-cjs.js');
 require('../InputText/index.cjs');
 require('../FormField-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('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('../useDebounce-cjs.js');
 require('../debounce-cjs.js');
 

package/dist/Autocomplete/index.mjs

@@ -1,47 +1,37 @@
 export { A as Autocomplete, d as BaseAutocompleteMenuWrapper, a as BaseMenuGroupOption, B as BaseMenuOption, K as KeyboardAction, M as MenuOption, g as getRequestedIndexChange, f as isOptionGroup, i as isOptionSelected, e as useAutocompleteMenu, b as useCustomKeyboardNavigation, u as useKeyboardNavigation, c as useRepositionMenu } from '../Autocomplete-es.js';
 import '../tslib.es6-es.js';
 import 'react';
-import '../Modal/index.mjs';
-import 'react-dom';
 import 'classnames';
-import 'framer-motion';
-import '../useRefocusOnActivator-es.js';
-import '../useOnKeyDown-es.js';
-import '../useFocusTrap-es.js';
+import '../useIsMounted-es.js';
+import '../useSafeLayoutEffect-es.js';
+import '../floating-ui.react-es.js';
+import 'react-dom';
 import '../Heading-es.js';
 import '../Typography-es.js';
-import '../Button-es.js';
-import 'react-router-dom';
+import '../Text-es.js';
 import '../Icon-es.js';
 import '@jobber/design';
-import '../ButtonDismiss-es.js';
-import '../noop-es.js';
-import '../_commonjsHelpers-es.js';
-import '../floating-ui.react-es.js';
-import '../identity-es.js';
-import '../isTypedArray-es.js';
-import '../isObjectLike-es.js';
-import '../AtlantisPortalContent-es.js';
-import '../AtlantisThemeContext-es.js';
-import '../_baseAssignValue-es.js';
-import '../_baseFor-es.js';
-import '../keysIn-es.js';
-import '../_isIterateeCall-es.js';
-import '../_setToString-es.js';
-import '../useIsMounted-es.js';
-import '../useSafeLayoutEffect-es.js';
-import 'react-popper';
-import '../Text-es.js';
+import '../useOnKeyDown-es.js';
 import '../InputText/index.mjs';
 import '../FormField-es.js';
+import 'framer-motion';
+import '../Button-es.js';
+import 'react-router-dom';
 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 '../useDebounce-es.js';
 import '../debounce-es.js';

package/dist/Autocomplete/useRepositionMenu.d.ts

@@ -1,23 +1,10 @@
-import { usePopper } from "react-popper";
 import { MenuProps } from "./Autocomplete.types";
-export interface UseRepositionMenu extends ReturnType<typeof usePopper> {
+export interface UseRepositionMenu {
     readonly menuRef: HTMLElement | null;
     readonly setMenuRef: (ref: HTMLElement | null) => void;
     readonly targetWidth: number | undefined;
-}
-export declare function useRepositionMenu(attachTo: MenuProps["attachTo"], visible?: boolean): {
-    menuRef: HTMLElement | null;
-    setMenuRef: import("react").Dispatch<import("react").SetStateAction<HTMLElement | null>>;
-    targetWidth: number | undefined;
-    styles: {
-        [key: string]: React.CSSProperties;
-    };
-    attributes: {
-        [key: string]: {
-            [key: string]: string;
-        } | undefined;
+    readonly styles: {
+        float: React.CSSProperties;
     };
-    state: import("@popperjs/core").State | null;
-    update: import("@popperjs/core").Instance["update"] | null;
-    forceUpdate: import("@popperjs/core").Instance["forceUpdate"] | null;
-};
+}
+export declare function useRepositionMenu(attachTo: MenuProps["attachTo"], visible: boolean, cssManagedVisibility: boolean): UseRepositionMenu;

package/dist/Autocomplete-cjs.js

@@ -2,12 +2,10 @@
 
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var React = require('react');
-var Modal_index = require('./Modal/index.cjs');
 var classnames = require('classnames');
 var useIsMounted = require('./useIsMounted-cjs.js');
-var ReactDOM = require('react-dom');
+var floatingUi_react = require('./floating-ui.react-cjs.js');
 var useSafeLayoutEffect = require('./useSafeLayoutEffect-cjs.js');
-var reactPopper = require('react-popper');
 var Heading = require('./Heading-cjs.js');
 var Text = require('./Text-cjs.js');
 var Icon = require('./Icon-cjs.js');
@@ -18,25 +16,61 @@ var FormField = require('./FormField-cjs.js');
 
 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-"};
 
-function useRepositionMenu(attachTo, visible = false) {
-    var _a;
-    const [menuRef, setMenuRef] = React.useState(null);
-    const popper = reactPopper.usePopper(attachTo.current, menuRef, {
-        modifiers: [
-            { name: "offset", options: { offset: [0, 8] } },
-            { name: "flip", options: { fallbackPlacements: ["top"] } },
-        ],
-    });
+const AUTOCOMPLETE_MAX_HEIGHT = 300;
+const AUTCOMPLETE_MIN_HEIGHT = 100;
+
+function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
+    const { refs, floatingStyles, update } = floatingUi_react.useFloating(Object.assign({ placement: "bottom", middleware: [
+            floatingUi_react.offset(8),
+            floatingUi_react.flip({ fallbackPlacements: ["top"] }),
+            floatingUi_react.size({
+                apply({ availableHeight, elements }) {
+                    // Limit the height for a true maximum
+                    // However if we have less space than that, then reduce it to allow scrolling
+                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
+                        ? AUTOCOMPLETE_MAX_HEIGHT
+                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${maxHeight}px`,
+                    });
+                },
+            }),
+        ], elements: {
+            reference: attachTo,
+        } }, (!cssManagedVisibility
+        ? {
+            whileElementsMounted: floatingUi_react.autoUpdate,
+        }
+        : {})));
+    // While DefaultMenu leverages conditional rendering, CustomMenu is hidden with CSS
+    // We need to apply the correct update method to each case
     useSafeLayoutEffect.useSafeLayoutEffect_1(() => {
-        var _a;
-        (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
-    }, [visible]);
-    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
+        if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
+            const cleanup = floatingUi_react.autoUpdate(attachTo, refs.floating.current, update);
+            return cleanup;
+        }
+        return undefined;
+    }, [
+        cssManagedVisibility,
+        visible,
+        attachTo,
+        refs.floating.current,
+        update,
+        floatingUi_react.autoUpdate,
+    ]);
+    const targetWidth = attachTo === null || attachTo === void 0 ? void 0 : attachTo.clientWidth;
+    return {
+        menuRef: refs.floating.current,
+        setMenuRef: refs.setFloating,
+        targetWidth,
+        styles: {
+            float: floatingStyles,
+        },
+    };
 }
 
-function BaseAutocompleteMenuWrapperInternal({ setMenuRef, popperStyles, attributes, targetWidth, visible, children, }) {
-    return (React.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }), "data-elevation": "elevated" }, attributes.popper), children));
+function BaseAutocompleteMenuWrapperInternal({ setMenuRef, floatStyles, targetWidth, visible, children, }) {
+    return (React.createElement("div", { className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, floatStyles.float), { width: targetWidth }), "data-elevation": "elevated" }, children));
 }
 /**
  * Provides a wrapper for the Autocomplete menu that handles positioning and visibility.
@@ -45,18 +79,18 @@ function BaseAutocompleteMenuWrapperInternal({ setMenuRef, popperStyles, attribu
 function useAutocompleteMenu({ attachTo, }) {
     const [menuRef, setMenuRef] = React.useState(null);
     const AutocompleteMenuWrapper = React.useCallback(({ children, visible, }) => {
-        const menuPopperProps = useRepositionMenu(attachTo, visible);
+        const menuFloatProps = useRepositionMenu(attachTo, visible, true);
         React.useEffect(() => {
-            setMenuRef(menuPopperProps.menuRef);
-        }, [menuPopperProps.menuRef]);
-        return (React.createElement(BaseAutocompleteMenuWrapper, { attributes: menuPopperProps.attributes, popperStyles: menuPopperProps.styles, setMenuRef: menuPopperProps.setMenuRef, targetWidth: menuPopperProps.targetWidth, visible: visible }, children));
+            setMenuRef(menuFloatProps.menuRef);
+        }, [menuFloatProps.menuRef]);
+        return (React.createElement(BaseAutocompleteMenuWrapper, { floatStyles: menuFloatProps.styles, setMenuRef: menuFloatProps.setMenuRef, targetWidth: menuFloatProps.targetWidth, visible: visible }, children));
     }, [attachTo]);
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
     const mounted = useIsMounted.useIsMounted_2();
     const menu = React.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
-    return mounted.current ? ReactDOM.createPortal(menu, document.body) : menu;
+    return mounted.current ? React.createElement(floatingUi_react.FloatingPortal, null, menu) : menu;
 }
 
 function isOptionSelected(selectedOption, option) {
@@ -196,7 +230,7 @@ function getRequestedIndexChange({ event, options, direction, highlightedIndex,
  * Renders the default Menu for the Autocomplete component.
  */
 function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visible, }) {
-    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
+    const { menuRef, setMenuRef, styles: floatStyles, targetWidth, } = useRepositionMenu(attachTo, visible, false);
     const detectSeparatorCondition = (option) => option.description || option.details;
     const addSeparators = options.some(detectSeparatorCondition);
     const { highlightedIndex } = useKeyboardNavigation({
@@ -205,30 +239,12 @@ function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visibl
         visible,
         menuRef,
     });
-    return (React.createElement(BaseAutocompleteMenuWrapper, { setMenuRef, popperStyles, attributes, targetWidth, visible }, options === null || options === void 0 ? void 0 : options.map((option, index) => {
+    return (React.createElement(BaseAutocompleteMenuWrapper, { setMenuRef, floatStyles, targetWidth, visible }, options === null || options === void 0 ? void 0 : options.map((option, index) => {
         return (React.createElement(MenuOption, { key: index, option: option, isHighlighted: index === highlightedIndex, onOptionSelect: onOptionSelect, isSelected: isOptionSelected(selectedOption, option), addSeparators: addSeparators }));
     })));
 }
 
 function Menu({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }) {
-    const { open: isWithinOpenModal } = Modal_index.useModalContext();
-    /**
-     * Experimental/temporary workaround for Autocompletes within Modals. This is only necessary
-     * when an Autocomplete uses `customRenderMenu` and is rendered within the composable version
-     * of Modal (aka Modal.Provider).
-     *
-     * If `customRenderMenu` contains clickable elements such as Buttons, the consumer must ALSO
-     * replace any `onClick` handlers with `onMouseDown` handlers on those Buttons.
-     *
-     * The check below prevents Autocomplete from rendering the `customRenderMenu` when it's not visible
-     * (when the input isn't focused). This prevents Modals (FloatingUI) from marking the Autocomplete's
-     * menu as data-floating-ui-inert and aria-hidden="true". As a result, this prevents the bug where clicking
-     * within its menu would cause FloatingUI to close the parent Modal because it determined the click was
-     * outside of the Modal.
-     */
-    const specialModalWorkaround = isWithinOpenModal && customRenderMenu;
-    if (specialModalWorkaround && !inputFocused)
-        return null;
     if (customRenderMenu) {
         return (React.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
     }
@@ -263,7 +279,7 @@ function AutocompleteInternal(_a, ref) {
     const [options, setOptions] = React.useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = React.useState(false);
     const [inputText, setInputText] = React.useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
-    const autocompleteRef = React.useRef(null);
+    const [autocompleteRef, setAutocompleteRef] = React.useState(null);
     const delayedSearch = useDebounce.useDebounce(updateSearch, debounceRate);
     const inputRef = React.useRef(null);
     React.useEffect(() => {
@@ -273,7 +289,7 @@ function AutocompleteInternal(_a, ref) {
         var _a;
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
-    return (React.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
+    return (React.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
         React.createElement(InputText_index.InputText, Object.assign({ ref: FormField.mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
         React.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {

package/dist/Autocomplete-es.js

@@ -1,11 +1,9 @@
 import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
-import React__default, { useState, useCallback, useEffect, forwardRef, useMemo, useRef } from 'react';
-import { useModalContext } from './Modal/index.mjs';
+import React__default, { useCallback, useEffect, useState, forwardRef, useMemo, useRef } from 'react';
 import classnames from 'classnames';
 import { u as useIsMounted_2 } from './useIsMounted-es.js';
-import { createPortal } from 'react-dom';
+import { b as useFloating, o as offset, i as flip, p as size, d as autoUpdate, h as FloatingPortal } from './floating-ui.react-es.js';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
-import { usePopper } from 'react-popper';
 import { H as Heading } from './Heading-es.js';
 import { T as Text } from './Text-es.js';
 import { I as Icon } from './Icon-es.js';
@@ -16,25 +14,61 @@ import { m as mergeRefs } from './FormField-es.js';
 
 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-"};
 
-function useRepositionMenu(attachTo, visible = false) {
-    var _a;
-    const [menuRef, setMenuRef] = useState(null);
-    const popper = usePopper(attachTo.current, menuRef, {
-        modifiers: [
-            { name: "offset", options: { offset: [0, 8] } },
-            { name: "flip", options: { fallbackPlacements: ["top"] } },
-        ],
-    });
+const AUTOCOMPLETE_MAX_HEIGHT = 300;
+const AUTCOMPLETE_MIN_HEIGHT = 100;
+
+function useRepositionMenu(attachTo, visible, cssManagedVisibility) {
+    const { refs, floatingStyles, update } = useFloating(Object.assign({ placement: "bottom", middleware: [
+            offset(8),
+            flip({ fallbackPlacements: ["top"] }),
+            size({
+                apply({ availableHeight, elements }) {
+                    // Limit the height for a true maximum
+                    // However if we have less space than that, then reduce it to allow scrolling
+                    const maxHeight = availableHeight > AUTOCOMPLETE_MAX_HEIGHT
+                        ? AUTOCOMPLETE_MAX_HEIGHT
+                        : Math.max(AUTCOMPLETE_MIN_HEIGHT, availableHeight);
+                    Object.assign(elements.floating.style, {
+                        maxHeight: `${maxHeight}px`,
+                    });
+                },
+            }),
+        ], elements: {
+            reference: attachTo,
+        } }, (!cssManagedVisibility
+        ? {
+            whileElementsMounted: autoUpdate,
+        }
+        : {})));
+    // While DefaultMenu leverages conditional rendering, CustomMenu is hidden with CSS
+    // We need to apply the correct update method to each case
     useSafeLayoutEffect_1(() => {
-        var _a;
-        (_a = popper === null || popper === void 0 ? void 0 : popper.update) === null || _a === void 0 ? void 0 : _a.call(popper);
-    }, [visible]);
-    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
+        if (cssManagedVisibility && visible && attachTo && refs.floating.current) {
+            const cleanup = autoUpdate(attachTo, refs.floating.current, update);
+            return cleanup;
+        }
+        return undefined;
+    }, [
+        cssManagedVisibility,
+        visible,
+        attachTo,
+        refs.floating.current,
+        update,
+        autoUpdate,
+    ]);
+    const targetWidth = attachTo === null || attachTo === void 0 ? void 0 : attachTo.clientWidth;
+    return {
+        menuRef: refs.floating.current,
+        setMenuRef: refs.setFloating,
+        targetWidth,
+        styles: {
+            float: floatingStyles,
+        },
+    };
 }
 
-function BaseAutocompleteMenuWrapperInternal({ setMenuRef, popperStyles, attributes, targetWidth, visible, children, }) {
-    return (React__default.createElement("div", Object.assign({ className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, popperStyles.popper), { width: targetWidth }), "data-elevation": "elevated" }, attributes.popper), children));
+function BaseAutocompleteMenuWrapperInternal({ setMenuRef, floatStyles, targetWidth, visible, children, }) {
+    return (React__default.createElement("div", { className: classnames(styles.options, { [styles.visible]: visible }), ref: setMenuRef, style: Object.assign(Object.assign({}, floatStyles.float), { width: targetWidth }), "data-elevation": "elevated" }, children));
 }
 /**
  * Provides a wrapper for the Autocomplete menu that handles positioning and visibility.
@@ -43,18 +77,18 @@ function BaseAutocompleteMenuWrapperInternal({ setMenuRef, popperStyles, attribu
 function useAutocompleteMenu({ attachTo, }) {
     const [menuRef, setMenuRef] = React__default.useState(null);
     const AutocompleteMenuWrapper = useCallback(({ children, visible, }) => {
-        const menuPopperProps = useRepositionMenu(attachTo, visible);
+        const menuFloatProps = useRepositionMenu(attachTo, visible, true);
         useEffect(() => {
-            setMenuRef(menuPopperProps.menuRef);
-        }, [menuPopperProps.menuRef]);
-        return (React__default.createElement(BaseAutocompleteMenuWrapper, { attributes: menuPopperProps.attributes, popperStyles: menuPopperProps.styles, setMenuRef: menuPopperProps.setMenuRef, targetWidth: menuPopperProps.targetWidth, visible: visible }, children));
+            setMenuRef(menuFloatProps.menuRef);
+        }, [menuFloatProps.menuRef]);
+        return (React__default.createElement(BaseAutocompleteMenuWrapper, { floatStyles: menuFloatProps.styles, setMenuRef: menuFloatProps.setMenuRef, targetWidth: menuFloatProps.targetWidth, visible: visible }, children));
     }, [attachTo]);
     return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
 }
 function BaseAutocompleteMenuWrapper(props) {
     const mounted = useIsMounted_2();
     const menu = React__default.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
-    return mounted.current ? createPortal(menu, document.body) : menu;
+    return mounted.current ? React__default.createElement(FloatingPortal, null, menu) : menu;
 }
 
 function isOptionSelected(selectedOption, option) {
@@ -194,7 +228,7 @@ function getRequestedIndexChange({ event, options, direction, highlightedIndex,
  * Renders the default Menu for the Autocomplete component.
  */
 function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visible, }) {
-    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
+    const { menuRef, setMenuRef, styles: floatStyles, targetWidth, } = useRepositionMenu(attachTo, visible, false);
     const detectSeparatorCondition = (option) => option.description || option.details;
     const addSeparators = options.some(detectSeparatorCondition);
     const { highlightedIndex } = useKeyboardNavigation({
@@ -203,30 +237,12 @@ function DefaultMenu({ options, selectedOption, onOptionSelect, attachTo, visibl
         visible,
         menuRef,
     });
-    return (React__default.createElement(BaseAutocompleteMenuWrapper, { setMenuRef, popperStyles, attributes, targetWidth, visible }, options === null || options === void 0 ? void 0 : options.map((option, index) => {
+    return (React__default.createElement(BaseAutocompleteMenuWrapper, { setMenuRef, floatStyles, targetWidth, visible }, options === null || options === void 0 ? void 0 : options.map((option, index) => {
         return (React__default.createElement(MenuOption, { key: index, option: option, isHighlighted: index === highlightedIndex, onOptionSelect: onOptionSelect, isSelected: isOptionSelected(selectedOption, option), addSeparators: addSeparators }));
     })));
 }
 
 function Menu({ options, selectedOption, onOptionSelect, inputFocused, attachTo, inputRef, customRenderMenu, }) {
-    const { open: isWithinOpenModal } = useModalContext();
-    /**
-     * Experimental/temporary workaround for Autocompletes within Modals. This is only necessary
-     * when an Autocomplete uses `customRenderMenu` and is rendered within the composable version
-     * of Modal (aka Modal.Provider).
-     *
-     * If `customRenderMenu` contains clickable elements such as Buttons, the consumer must ALSO
-     * replace any `onClick` handlers with `onMouseDown` handlers on those Buttons.
-     *
-     * The check below prevents Autocomplete from rendering the `customRenderMenu` when it's not visible
-     * (when the input isn't focused). This prevents Modals (FloatingUI) from marking the Autocomplete's
-     * menu as data-floating-ui-inert and aria-hidden="true". As a result, this prevents the bug where clicking
-     * within its menu would cause FloatingUI to close the parent Modal because it determined the click was
-     * outside of the Modal.
-     */
-    const specialModalWorkaround = isWithinOpenModal && customRenderMenu;
-    if (specialModalWorkaround && !inputFocused)
-        return null;
     if (customRenderMenu) {
         return (React__default.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
     }
@@ -261,7 +277,7 @@ function AutocompleteInternal(_a, ref) {
     const [options, setOptions] = useState(initialOptionsMemo);
     const [inputFocused, setInputFocused] = useState(false);
     const [inputText, setInputText] = useState((_b = value === null || value === void 0 ? void 0 : value.label) !== null && _b !== void 0 ? _b : "");
-    const autocompleteRef = useRef(null);
+    const [autocompleteRef, setAutocompleteRef] = useState(null);
     const delayedSearch = useDebounce(updateSearch, debounceRate);
     const inputRef = useRef(null);
     useEffect(() => {
@@ -271,7 +287,7 @@ function AutocompleteInternal(_a, ref) {
         var _a;
         updateInput((_a = value === null || value === void 0 ? void 0 : value.label) !== null && _a !== void 0 ? _a : "");
     }, [value]);
-    return (React__default.createElement("div", { className: styles.autocomplete, ref: autocompleteRef },
+    return (React__default.createElement("div", { className: styles.autocomplete, ref: setAutocompleteRef },
         React__default.createElement(InputText, Object.assign({ ref: mergeRefs([ref, inputRef]), autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
         React__default.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {

package/dist/Popover-es.js

@@ -2,7 +2,7 @@ import { _ as __rest } from './tslib.es6-es.js';
 import React__default, { useState, useMemo, createContext, useContext } from 'react';
 import classnames from 'classnames';
 import ReactDOM__default from 'react-dom';
-import { i as arrow, b as useFloating, d as autoUpdate, o as offset, s as shift, c as autoPlacement, j as flip } from './floating-ui.react-es.js';
+import { o as offset, s as shift, c as autoPlacement, i as flip, j as arrow, b as useFloating, d as autoUpdate } from './floating-ui.react-es.js';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import { A as AtlantisPortalContent } from './AtlantisPortalContent-es.js';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';