@jobber/components 6.14.1-aidenfix--e9ec00c.0 → 6.15.0

package/dist/Autocomplete-es.js

@@ -1,107 +1,23 @@
 import { _ as __rest, a as __awaiter } from './tslib.es6-es.js';
-import React, { useState, useEffect, useRef, useMemo, forwardRef } from 'react';
+import React, { useState, useCallback, useEffect, useRef, useMemo, forwardRef } from 'react';
 import classnames from 'classnames';
+import { u as useIsMounted_2 } from './useIsMounted-es.js';
 import { createPortal } from 'react-dom';
-import { usePopper } from 'react-popper';
-import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { u as useSafeLayoutEffect_1 } from './useSafeLayoutEffect-es.js';
-import { u as useIsMounted_2 } from './useIsMounted-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';
-import { H as Heading } from './Heading-es.js';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-es.js';
 import { InputText } from './InputText/index.mjs';
 import { a as debounce } from './debounce-es.js';
+import { m as mergeRefs } from './FormField-es.js';
 
-var styles = {"autocomplete":"_7mObJiwfPh4-","options":"dL5JShAJlKM-","visible":"_2RzcnTdaPyc-","option":"y9zhi8Wr8QA-","active":"_3Xg49dtL1Q8-","separator":"LIeh390F3W8-","heading":"PWZL-94hH7k-","icon":"K2phy6IC3TY-","text":"a6-LbUm5WnY-","label":"tQNbuxcE9nU-","details":"qacStG9-XbE-","spinning":"P9cQDL4MZ-s-"};
+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-"};
 
-var IndexChange;
-(function (IndexChange) {
-    IndexChange[IndexChange["Previous"] = -1] = "Previous";
-    IndexChange[IndexChange["Next"] = 1] = "Next";
-})(IndexChange || (IndexChange = {}));
-// Adding useIsMounted is what tipped this to 13 statements.
-// Any additions beyond useIsMounted should probably see this component refactored a bit
-// eslint-disable-next-line max-statements
-function Menu({ visible, options, selectedOption, onOptionSelect, attachTo, }) {
-    const [highlightedIndex, setHighlightedIndex] = useState(0);
-    const { menuRef, setMenuRef, styles: popperStyles, attributes, targetWidth, } = useRepositionMenu(attachTo, visible);
-    const detectSeparatorCondition = (option) => option.description || option.details;
-    const detectGroups = (option) => option.options;
-    const addSeparators = options.some(detectSeparatorCondition);
-    const initialHighlight = options.some(detectGroups) ? 1 : 0;
-    setupKeyListeners();
-    useEffect(() => setHighlightedIndex(initialHighlight), [options]);
-    const mounted = useIsMounted_2();
-    const menu = (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), options.map((option, index) => {
-        const optionClass = classnames(styles.option, {
-            [styles.active]: index === highlightedIndex,
-            [styles.separator]: addSeparators,
-        });
-        if (isGroup(option)) {
-            return (React.createElement("div", { key: option.label, className: styles.heading },
-                React.createElement(Heading, { level: 5 }, option.label)));
-        }
-        return (React.createElement("button", { className: optionClass, key: option.value, onMouseDown: onOptionSelect.bind(undefined, option) },
-            React.createElement("div", { className: styles.icon }, isOptionSelected(selectedOption, option) && (React.createElement(Icon, { name: "checkmark", size: "small" }))),
-            React.createElement("div", { className: styles.text },
-                React.createElement("div", { className: styles.label },
-                    React.createElement(Text, null, option.label),
-                    option.description !== undefined && (React.createElement(Text, { variation: "subdued" }, option.description))),
-                option.details !== undefined && (React.createElement("div", { className: styles.details },
-                    React.createElement(Text, null, option.details))))));
-    })));
-    return mounted.current ? createPortal(menu, document.body) : menu;
-    function setupKeyListeners() {
-        useEffect(() => {
-            var _a, _b;
-            (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.children[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
-                behavior: "smooth",
-                block: "nearest",
-                inline: "start",
-            });
-        }, [highlightedIndex]);
-        useOnKeyDown_2((event) => {
-            const indexChange = arrowKeyPress(event, IndexChange.Next);
-            if (indexChange) {
-                setHighlightedIndex(Math.min(options.length - 1, highlightedIndex + indexChange));
-            }
-        }, "ArrowDown");
-        useOnKeyDown_2((event) => {
-            const indexChange = arrowKeyPress(event, IndexChange.Previous);
-            if (indexChange) {
-                setHighlightedIndex(Math.max(0, highlightedIndex + indexChange));
-            }
-        }, "ArrowUp");
-        useOnKeyDown_2((event) => {
-            if (!visible)
-                return;
-            if (isGroup(options[highlightedIndex]))
-                return;
-            event.preventDefault();
-            onOptionSelect(options[highlightedIndex]);
-        }, "Enter");
-    }
-    function arrowKeyPress(event, direction) {
-        if (!visible)
-            return;
-        event.preventDefault();
-        const requestedIndex = options[highlightedIndex + direction];
-        return requestedIndex && isGroup(requestedIndex)
-            ? direction + direction
-            : direction;
-    }
-}
-function isOptionSelected(selectedOption, option) {
-    return selectedOption && selectedOption.value === option.value;
-}
-function isGroup(option) {
-    if (option.options)
-        return true;
-    return false;
-}
 function useRepositionMenu(attachTo, visible = false) {
     var _a;
-    const [menuRef, setMenuRef] = useState();
+    const [menuRef, setMenuRef] = useState(null);
     const popper = usePopper(attachTo.current, menuRef, {
         modifiers: [
             { name: "offset", options: { offset: [0, 8] } },
@@ -116,6 +32,207 @@ function useRepositionMenu(attachTo, visible = false) {
     return Object.assign(Object.assign({}, popper), { menuRef, setMenuRef, targetWidth });
 }
 
+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));
+}
+/**
+ * Provides a wrapper for the Autocomplete menu that handles positioning and visibility.
+ * @param attachTo - The element that the menu should be attached to.
+ */
+function useAutocompleteMenu({ attachTo, }) {
+    const [menuRef, setMenuRef] = React.useState(null);
+    const AutocompleteMenuWrapper = useCallback(({ children, visible, }) => {
+        const menuPopperProps = useRepositionMenu(attachTo, visible);
+        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));
+    }, [attachTo]);
+    return { MenuWrapper: AutocompleteMenuWrapper, menuRef };
+}
+function BaseAutocompleteMenuWrapper(props) {
+    const mounted = useIsMounted_2();
+    const menu = React.createElement(BaseAutocompleteMenuWrapperInternal, Object.assign({}, props));
+    return mounted.current ? createPortal(menu, document.body) : menu;
+}
+
+function isOptionSelected(selectedOption, option) {
+    return Boolean(selectedOption && selectedOption.value === option.value);
+}
+/**
+ * Helper function to determine if the option is a group. This is used to
+ * determine if the option contains a list of options for rendering Section
+ * Labels in the Autocomplete component.
+ */
+function isOptionGroup(option) {
+    return "options" in option;
+}
+
+/**
+ * The rendering of the default MenuOption
+ */
+function MenuOption({ isHighlighted, option, onOptionSelect, isSelected, addSeparators, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    if (isOptionGroup(option)) {
+        return (React.createElement(MenuGroupOptions, { UNSAFE_className: UNSAFE_className.groupOption, option: option, UNSAFE_style: UNSAFE_style.groupOption }));
+    }
+    return (React.createElement(BaseMenuOption, { UNSAFE_className: UNSAFE_className.option, UNSAFE_style: UNSAFE_style.option, option: option, isHighlighted: isHighlighted, onOptionSelect: onOptionSelect, addSeparators: addSeparators },
+        React.createElement(MenuOptionContent, { option: option, isSelected: isSelected, UNSAFE_className: UNSAFE_className.content, UNSAFE_style: UNSAFE_style.content })));
+}
+function MenuOptionContent({ option, isSelected, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    const iconClassName = classnames(styles.icon, UNSAFE_className.icon);
+    const textClassName = classnames(styles.text, UNSAFE_className.text);
+    const labelClassName = classnames(styles.label, UNSAFE_className.label);
+    const detailsClassName = classnames(styles.details, UNSAFE_className.details);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: iconClassName, style: UNSAFE_style.icon }, isSelected && React.createElement(Icon, { name: "checkmark", size: "small" })),
+        React.createElement("div", { className: textClassName, style: UNSAFE_style.text },
+            React.createElement("div", { className: labelClassName, style: UNSAFE_style.label },
+                React.createElement(Text, null, option.label),
+                option.description !== undefined && (React.createElement(Text, { variation: "subdued" }, option.description))),
+            option.details !== undefined && (React.createElement("div", { className: detailsClassName, style: UNSAFE_style.details },
+                React.createElement(Text, null, option.details))))));
+}
+/**
+ * The rendering of the default MenuGroupOption
+ */
+function MenuGroupOptions({ option, UNSAFE_className = {}, UNSAFE_style = {}, }) {
+    return (React.createElement(BaseMenuGroupOption, { UNSAFE_className: UNSAFE_className.heading, UNSAFE_style: UNSAFE_style.heading },
+        React.createElement(Heading, { level: 5 }, option.label)));
+}
+function BaseMenuGroupOption({ children, UNSAFE_className = "", UNSAFE_style = {}, }) {
+    const headingClassName = classnames(styles.heading, UNSAFE_className);
+    return (React.createElement("div", { className: headingClassName, style: UNSAFE_style }, children));
+}
+/**
+ * Renders the base option component. The component takes children and renders them inside a button.
+ */
+function BaseMenuOption({ option, isHighlighted, onOptionSelect, addSeparators, children, UNSAFE_className = "", UNSAFE_style = {}, }) {
+    const optionClass = classnames(styles.option, {
+        [styles.active]: isHighlighted,
+        [styles.separator]: addSeparators,
+    }, UNSAFE_className);
+    return (React.createElement("button", { role: "option", type: "button", className: optionClass, onMouseDown: onOptionSelect === null || onOptionSelect === void 0 ? void 0 : onOptionSelect.bind(undefined, option), style: UNSAFE_style }, children));
+}
+
+var KeyboardAction;
+(function (KeyboardAction) {
+    KeyboardAction[KeyboardAction["Previous"] = -1] = "Previous";
+    KeyboardAction[KeyboardAction["Next"] = 1] = "Next";
+    KeyboardAction[KeyboardAction["Select"] = 0] = "Select";
+})(KeyboardAction || (KeyboardAction = {}));
+/**
+ * Hook to handle custom keyboard navigation for the Autocomplete component.
+ * Use this hook if you are using components in the menu that aren't MenuOption or BaseMenuOption.
+ */
+function useCustomKeyboardNavigation({ onRequestHighlightChange, }) {
+    useOnKeyDown_2((event) => {
+        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Next);
+    }, "ArrowDown");
+    useOnKeyDown_2((event) => {
+        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Previous);
+    }, "ArrowUp");
+    useOnKeyDown_2((event) => {
+        onRequestHighlightChange === null || onRequestHighlightChange === void 0 ? void 0 : onRequestHighlightChange(event, KeyboardAction.Select);
+    }, "Enter");
+}
+/**
+ * Hook to handle keyboard navigation for the Menu in the Autocomplete component.
+ * If using components in the menu that aren't MenuOption or BaseMenuOption, you should use the `useCustomKeyboardNavigation` hook.
+ */
+function useKeyboardNavigation({ options, onOptionSelect, menuRef, visible, }) {
+    const [highlightedIndex, setHighlightedIndex] = useState(0);
+    const initialHighlight = options.some(isOptionGroup) ? 1 : 0;
+    useEffect(() => setHighlightedIndex(initialHighlight), [options]);
+    useEffect(() => {
+        var _a, _b;
+        (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.children[highlightedIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, {
+            behavior: "smooth",
+            block: "nearest",
+            inline: "start",
+        });
+    }, [highlightedIndex]);
+    const onRequestHighlightChange = useCallback((event, direction) => {
+        if (!visible)
+            return;
+        const indexChange = getRequestedIndexChange({
+            event,
+            options,
+            direction,
+            highlightedIndex,
+        });
+        switch (direction) {
+            case KeyboardAction.Previous:
+                setHighlightedIndex(prev => Math.max(0, prev + indexChange));
+                break;
+            case KeyboardAction.Next:
+                setHighlightedIndex(prev => Math.min(options.length - 1, prev + indexChange));
+                break;
+            case KeyboardAction.Select:
+                if (isOptionGroup(options[highlightedIndex]))
+                    return;
+                onOptionSelect(options[highlightedIndex]);
+                break;
+        }
+    }, [highlightedIndex, options, onOptionSelect, visible]);
+    useCustomKeyboardNavigation({ onRequestHighlightChange });
+    return { highlightedIndex };
+}
+/**
+ * Function to get the requested index change based on the current highlighted index and the direction of the keyboard action.
+ * Accounts for groups in the options array.
+ */
+function getRequestedIndexChange({ event, options, direction, highlightedIndex, }) {
+    event.preventDefault();
+    const requestedIndex = options[highlightedIndex + direction];
+    return requestedIndex && isOptionGroup(requestedIndex)
+        ? direction + direction
+        : direction;
+}
+
+/**
+ * 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 detectSeparatorCondition = (option) => option.description || option.details;
+    const addSeparators = options.some(detectSeparatorCondition);
+    const { highlightedIndex } = useKeyboardNavigation({
+        onOptionSelect,
+        options,
+        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(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, }) {
+    if (customRenderMenu) {
+        return (React.createElement(CustomMenu, { attachTo: attachTo, inputFocused: inputFocused, inputRef: inputRef, customRenderMenu: customRenderMenu, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption }));
+    }
+    if (!inputFocused || !options.length)
+        return null;
+    return (React.createElement(DefaultMenu, { attachTo: attachTo, options: options, onOptionSelect: onOptionSelect, selectedOption: selectedOption, visible: inputFocused }));
+}
+/**
+ * Renders the custom Menu for the Autocomplete component.
+ * Provides the menuRef and MenuWrapper to the customRenderMenu function.
+ */
+function CustomMenu({ options, selectedOption, onOptionSelect, customRenderMenu, attachTo, inputFocused, inputRef, }) {
+    const { MenuWrapper, menuRef } = useAutocompleteMenu({ attachTo });
+    const menuContent = customRenderMenu({
+        options,
+        menuRef,
+        onOptionSelect,
+        selectedOption,
+        inputFocused,
+        MenuWrapper,
+        inputRef,
+    });
+    return menuContent;
+}
+
 /**
  * A hook to easily manage debounced functions, including their cleanup.
  * @param func The function to debounce.
@@ -147,15 +264,17 @@ function useDebounce(func, wait, options) {
 }
 
 // Max statements increased to make room for the debounce functions
-/* eslint max-statements: ["error", 14] */
+// eslint-disable-next-line max-statements
 function AutocompleteInternal(_a, ref) {
     var _b;
-    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations"]);
-    const [options, setOptions] = useState(initialOptions);
-    const [menuVisible, setMenuVisible] = useState(false);
+    var { initialOptions = [], value, allowFreeForm = true, size = undefined, debounce: debounceRate = 300, onChange, getOptions, placeholder, onBlur, onFocus, validations, customRenderMenu } = _a, inputProps = __rest(_a, ["initialOptions", "value", "allowFreeForm", "size", "debounce", "onChange", "getOptions", "placeholder", "onBlur", "onFocus", "validations", "customRenderMenu"]);
+    const initialOptionsMemo = useMemo(() => mapToOptions(initialOptions), [initialOptions]);
+    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 delayedSearch = useDebounce(updateSearch, debounceRate);
+    const inputRef = useRef(null);
     useEffect(() => {
         delayedSearch();
     }, [inputText]);
@@ -164,8 +283,8 @@ function AutocompleteInternal(_a, ref) {
         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 },
-        React.createElement(InputText, Object.assign({ ref: ref, autocomplete: false, size: size, value: inputText, onChange: handleInputChange, placeholder: placeholder, onFocus: handleInputFocus, onBlur: handleInputBlur, validations: validations }, inputProps)),
-        menuVisible && (React.createElement(Menu, { attachTo: autocompleteRef, visible: menuVisible && options.length > 0, options: options, selectedOption: value, onOptionSelect: handleMenuChange }))));
+        React.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.createElement(Menu, { attachTo: autocompleteRef, inputRef: inputRef, inputFocused: inputFocused, options: options, customRenderMenu: customRenderMenu, selectedOption: value, onOptionSelect: handleMenuChange })));
     function updateInput(newText) {
         setInputText(newText);
         if (newText === "") {
@@ -175,14 +294,15 @@ function AutocompleteInternal(_a, ref) {
     function updateSearch() {
         return __awaiter(this, void 0, void 0, function* () {
             const updatedOptions = yield getOptions(inputText);
-            const filteredOptions = updatedOptions.filter((option) => "options" in option && option.options ? option.options.length > 0 : true);
+            const filteredOptions = updatedOptions.filter(option => isOptionGroup(option) ? option.options.length > 0 : true);
             setOptions(mapToOptions(filteredOptions));
         });
     }
     function handleMenuChange(chosenOption) {
+        var _a;
         onChange(chosenOption);
-        updateInput(chosenOption.label);
-        setMenuVisible(false);
+        updateInput((_a = chosenOption === null || chosenOption === void 0 ? void 0 : chosenOption.label) !== null && _a !== void 0 ? _a : "");
+        setInputFocused(false);
     }
     function handleInputChange(newText) {
         updateInput(newText);
@@ -191,7 +311,7 @@ function AutocompleteInternal(_a, ref) {
         }
     }
     function handleInputBlur() {
-        setMenuVisible(false);
+        setInputFocused(false);
         if (value == undefined || value.label !== inputText) {
             setInputText("");
             onChange(undefined);
@@ -199,21 +319,23 @@ function AutocompleteInternal(_a, ref) {
         onBlur && onBlur();
     }
     function handleInputFocus() {
-        setMenuVisible(true);
+        setInputFocused(true);
         if (onFocus) {
             onFocus();
         }
     }
 }
 function mapToOptions(items) {
-    return items.reduce(function (result, item) {
-        result = result.concat([item]);
-        if (item.options) {
+    const retVal = items.reduce((result, item) => {
+        result.push(item);
+        if (isOptionGroup(item) && item.options) {
             result = result.concat(item.options);
         }
         return result;
     }, []);
+    return retVal;
 }
+// Casts the Generics to the forward ref so autocomplete works as expected for consumers
 const Autocomplete = forwardRef(AutocompleteInternal);
 
-export { Autocomplete as A };
+export { Autocomplete as A, BaseMenuOption as B, KeyboardAction as K, MenuOption as M, BaseMenuGroupOption as a, useCustomKeyboardNavigation as b, useRepositionMenu as c, BaseAutocompleteMenuWrapper as d, useAutocompleteMenu as e, isOptionGroup as f, getRequestedIndexChange as g, isOptionSelected as i, useKeyboardNavigation as u };

package/dist/Popover/index.cjs

@@ -5,7 +5,6 @@ require('react');
 require('react-popper');
 require('../useRefocusOnActivator-cjs.js');
 require('classnames');
-require('react-dom');
 require('../ButtonDismiss-cjs.js');
 require('../Button-cjs.js');
 require('react-router-dom');

package/dist/Popover/index.mjs

@@ -3,7 +3,6 @@ import 'react';
 import 'react-popper';
 import '../useRefocusOnActivator-es.js';
 import 'classnames';
-import 'react-dom';
 import '../ButtonDismiss-es.js';
 import '../Button-es.js';
 import 'react-router-dom';

package/dist/Popover-cjs.js

@@ -4,7 +4,6 @@ var React = require('react');
 var reactPopper = require('react-popper');
 var useRefocusOnActivator = require('./useRefocusOnActivator-cjs.js');
 var classnames = require('classnames');
-var ReactDOM = require('react-dom');
 var ButtonDismiss = require('./ButtonDismiss-cjs.js');
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -21,15 +20,11 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss.ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
-    return React.createElement(React.Fragment, null, open && React.createElement(PopoverPortal, null, popoverContent));
-}
-function PopoverPortal({ children }) {
-    return ReactDOM.createPortal(children, document.body);
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/Popover-es.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import { usePopper } from 'react-popper';
 import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-es.js';
 import classnames from 'classnames';
-import ReactDOM from 'react-dom';
 import { B as ButtonDismiss } from './ButtonDismiss-es.js';
 
 var classes = {"popover":"rY8OtuArIi0-","header":"UI1AohefbSo-","dismissButton":"HyA0TM5soDM-","arrow":"uClo-5-xhAc-","spinning":"VA0ROLmpLPs-"};
@@ -19,15 +18,11 @@ function Popover({ onRequestClose, children, attachTo, open, preferredPlacement
     const popoverClassNames = classnames(classes.popover, UNSAFE_className.container);
     const dismissButtonClassNames = classnames(classes.dismissButton, UNSAFE_className.dismissButtonContainer);
     const arrowClassNames = classnames(classes.arrow, UNSAFE_className.arrow);
-    const popoverContent = (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
+    return (React.createElement(React.Fragment, null, open && (React.createElement("div", Object.assign({ role: "dialog", "data-elevation": "elevated", ref: setPopperElement, style: Object.assign(Object.assign({}, popperStyles.popper), ((_a = UNSAFE_style.container) !== null && _a !== void 0 ? _a : {})), className: popoverClassNames }, attributes.popper, { "data-testid": "popover-container" }),
         React.createElement("div", { className: dismissButtonClassNames, style: (_b = UNSAFE_style.dismissButtonContainer) !== null && _b !== void 0 ? _b : {}, "data-testid": "popover-dismiss-button-container" },
             React.createElement(ButtonDismiss, { onClick: onRequestClose, ariaLabel: "Close dialog" })),
         children,
-        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })));
-    return React.createElement(React.Fragment, null, open && React.createElement(PopoverPortal, null, popoverContent));
-}
-function PopoverPortal({ children }) {
-    return ReactDOM.createPortal(children, document.body);
+        React.createElement("div", { ref: setArrowElement, className: arrowClassNames, style: Object.assign(Object.assign({}, popperStyles.arrow), ((_c = UNSAFE_style.arrow) !== null && _c !== void 0 ? _c : {})), "data-testid": "popover-arrow" })))));
 }
 function buildModifiers(arrowElement) {
     const modifiers = [

package/dist/index.cjs

@@ -5,6 +5,15 @@ var AnimatedSwitcher = require('./AnimatedSwitcher-cjs.js');
 var AtlantisContext = require('./AtlantisContext-cjs.js');
 var updateTheme = require('./updateTheme-cjs.js');
 var Autocomplete = require('./Autocomplete-cjs.js');
+require('react');
+require('classnames');
+var Heading = require('./Heading-cjs.js');
+var Text = require('./Text-cjs.js');
+var Icon = require('./Icon-cjs.js');
+require('./useSafeLayoutEffect-cjs.js');
+require('react-popper');
+require('./useIsMounted-cjs.js');
+require('react-dom');
 var Avatar = require('./Avatar-cjs.js');
 var Banner = require('./Banner-cjs.js');
 var Box = require('./Box-cjs.js');
@@ -14,8 +23,6 @@ var Card = require('./Card-cjs.js');
 var Checkbox = require('./Checkbox-cjs.js');
 var Chip = require('./Chip-cjs.js');
 var ChipDismissible = require('./ChipDismissible-cjs.js');
-require('react');
-var Icon = require('./Icon-cjs.js');
 var Chips = require('./Chips-cjs.js');
 require('./useAssert-cjs.js');
 var Combobox = require('./Combobox-cjs.js');
@@ -46,7 +53,6 @@ var FormatTime = require('./FormatTime-cjs.js');
 var Gallery = require('./Gallery-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
 var Grid = require('./Grid-cjs.js');
-var Heading = require('./Heading-cjs.js');
 var InlineLabel = require('./InlineLabel-cjs.js');
 var InputAvatar = require('./InputAvatar-cjs.js');
 var InputDate_index = require('./InputDate/index.cjs');
@@ -81,7 +87,6 @@ var StatusLabel = require('./StatusLabel-cjs.js');
 var Switch = require('./Switch-cjs.js');
 var Body = require('./Body-cjs.js');
 var Tabs = require('./Tabs-cjs.js');
-var Text = require('./Text-cjs.js');
 var showToast = require('./showToast-cjs.js');
 var Tooltip = require('./Tooltip-cjs.js');
 var Typography = require('./Typography-cjs.js');
@@ -97,12 +102,7 @@ require('./keysIn-cjs.js');
 require('./_isIterateeCall-cjs.js');
 require('./_setToString-cjs.js');
 require('./tslib.es6-cjs.js');
-require('classnames');
-require('react-dom');
-require('react-popper');
 require('./useOnKeyDown-cjs.js');
-require('./useSafeLayoutEffect-cjs.js');
-require('./useIsMounted-cjs.js');
 require('./debounce-cjs.js');
 require('./isSymbol-cjs.js');
 require('color');
@@ -188,6 +188,9 @@ exports.atlantisThemeContextDefaultValues = updateTheme.atlantisThemeContextDefa
 exports.updateTheme = updateTheme.updateTheme;
 exports.useAtlantisTheme = updateTheme.useAtlantisTheme;
 exports.Autocomplete = Autocomplete.Autocomplete;
+exports.Heading = Heading.Heading;
+exports.Text = Text.Text;
+exports.Icon = Icon.Icon;
 exports.Avatar = Avatar.Avatar;
 exports.Banner = Banner.Banner;
 exports.Box = Box.Box;
@@ -198,7 +201,6 @@ exports.Checkbox = Checkbox.Checkbox;
 exports.Chip = Chip.Chip;
 exports.ChipDismissible = ChipDismissible.ChipDismissible;
 exports.ChipSelectable = ChipDismissible.ChipSelectable;
-exports.Icon = Icon.Icon;
 exports.Chips = Chips.Chips;
 exports.Combobox = Combobox.Combobox;
 exports.ComboboxContextProvider = ComboboxProvider.ComboboxContextProvider;
@@ -241,7 +243,6 @@ exports.GLIMMER_TEST_ID = Glimmer.GLIMMER_TEST_ID;
 exports.Glimmer = Glimmer.Glimmer;
 exports.GRID_TEST_ID = Grid.GRID_TEST_ID;
 exports.Grid = Grid.Grid;
-exports.Heading = Heading.Heading;
 exports.InlineLabel = InlineLabel.InlineLabel;
 exports.InputAvatar = InputAvatar.InputAvatar;
 exports.InputDate = InputDate_index.InputDate;
@@ -299,7 +300,6 @@ exports.Row = Body.Row;
 exports.Table = Body.Table;
 exports.Tab = Tabs.Tab;
 exports.Tabs = Tabs.Tabs;
-exports.Text = Text.Text;
 exports.Toast = showToast.Toast;
 exports.showToast = showToast.showToast;
 exports.Tooltip = Tooltip.Tooltip;

package/dist/index.mjs

@@ -3,6 +3,15 @@ export { A as AnimatedSwitcher } from './AnimatedSwitcher-es.js';
 export { A as AtlantisContext, a as atlantisContextDefaultValues, u as useAtlantisContext } from './AtlantisContext-es.js';
 export { A as AtlantisThemeContextProvider, T as THEME_CHANGE_EVENT, a as atlantisThemeContextDefaultValues, b as updateTheme, u as useAtlantisTheme } from './updateTheme-es.js';
 export { A as Autocomplete } from './Autocomplete-es.js';
+import 'react';
+import 'classnames';
+export { H as Heading } from './Heading-es.js';
+export { T as Text } from './Text-es.js';
+export { I as Icon } from './Icon-es.js';
+import './useSafeLayoutEffect-es.js';
+import 'react-popper';
+import './useIsMounted-es.js';
+import 'react-dom';
 export { A as Avatar } from './Avatar-es.js';
 export { B as Banner } from './Banner-es.js';
 export { B as Box } from './Box-es.js';
@@ -12,8 +21,6 @@ export { C as Card } from './Card-es.js';
 export { C as Checkbox } from './Checkbox-es.js';
 export { C as Chip } from './Chip-es.js';
 export { a as ChipDismissible, C as ChipSelectable } from './ChipDismissible-es.js';
-import 'react';
-export { I as Icon } from './Icon-es.js';
 export { C as Chips } from './Chips-es.js';
 import './useAssert-es.js';
 export { C as Combobox } from './Combobox-es.js';
@@ -44,7 +51,6 @@ export { F as FormatTime } from './FormatTime-es.js';
 export { G as Gallery } from './Gallery-es.js';
 export { a as GLIMMER_TEST_ID, G as Glimmer } from './Glimmer-es.js';
 export { G as GRID_TEST_ID, a as Grid } from './Grid-es.js';
-export { H as Heading } from './Heading-es.js';
 export { I as InlineLabel } from './InlineLabel-es.js';
 export { I as InputAvatar } from './InputAvatar-es.js';
 export { InputDate } from './InputDate/index.mjs';
@@ -79,7 +85,6 @@ export { S as StatusLabel } from './StatusLabel-es.js';
 export { S as Switch } from './Switch-es.js';
 export { B as Body, C as Cell, b as CellCurrency, a as CellNumeric, F as Footer, H as Header, R as Row, T as Table } from './Body-es.js';
 export { a as Tab, T as Tabs } from './Tabs-es.js';
-export { T as Text } from './Text-es.js';
 export { T as Toast, s as showToast } from './showToast-es.js';
 export { T as Tooltip } from './Tooltip-es.js';
 export { T as Typography } from './Typography-es.js';
@@ -95,12 +100,7 @@ import './keysIn-es.js';
 import './_isIterateeCall-es.js';
 import './_setToString-es.js';
 import './tslib.es6-es.js';
-import 'classnames';
-import 'react-dom';
-import 'react-popper';
 import './useOnKeyDown-es.js';
-import './useSafeLayoutEffect-es.js';
-import './useIsMounted-es.js';
 import './debounce-es.js';
 import './isSymbol-es.js';
 import 'color';