@jobber/components 6.25.0 → 6.26.1

package/dist/Checkbox/index.mjs

@@ -1,4 +1,4 @@
-import React, { useState, useId, useEffect } from 'react';
+import React__default, { useState, useId, useEffect } from 'react';
 import { _ as __rest } from '../tslib.es6-es.js';
 import classnames from 'classnames';
 import { useFormContext, useForm, Controller } from 'react-hook-form';
@@ -31,19 +31,19 @@ function CheckboxLegacy({ checked, defaultChecked, disabled, label, name, value,
         [styles.indeterminate]: indeterminate,
     });
     const iconName = indeterminate ? "minus2" : "checkmark";
-    const labelText = label ? React.createElement(Text, null, label) : children;
-    return (React.createElement(Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
+    const labelText = label ? React__default.createElement(Text, null, label) : children;
+    return (React__default.createElement(Controller, { control: control, name: controlledName, defaultValue: defaultChecked, render: (_a) => {
             var _b = _a.field, { onChange: onControllerChange, name: controllerName } = _b, rest = __rest(_b, ["onChange", "name"]);
             const fieldProps = Object.assign(Object.assign({}, rest), { id: identifier, className: inputClassName, name: name && controllerName, onChange: handleChange, disabled: disabled });
-            return (React.createElement("div", { className: styles.checkBoxParent },
-                React.createElement("label", { className: wrapperClassName },
-                    React.createElement("span", { className: styles.checkHolder },
-                        React.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
-                        React.createElement("span", { className: styles.checkBox },
-                            React.createElement(Icon, { name: iconName, color: "surface" }))),
-                    labelText && React.createElement("span", { className: styles.label }, labelText)),
-                description && (React.createElement("div", { className: styles.description },
-                    React.createElement(Text, { variation: "subdued", size: "small" }, description)))));
+            return (React__default.createElement("div", { className: styles.checkBoxParent },
+                React__default.createElement("label", { className: wrapperClassName },
+                    React__default.createElement("span", { className: styles.checkHolder },
+                        React__default.createElement("input", Object.assign({}, fieldProps, { type: "checkbox", checked: checked, defaultChecked: defaultChecked, "aria-label": label, onChange: handleChange, onFocus: onFocus, onBlur: onBlur })),
+                        React__default.createElement("span", { className: styles.checkBox },
+                            React__default.createElement(Icon, { name: iconName, color: "surface" }))),
+                    labelText && React__default.createElement("span", { className: styles.label }, labelText)),
+                description && (React__default.createElement("div", { className: styles.description },
+                    React__default.createElement(Text, { variation: "subdued", size: "small" }, description)))));
             function handleChange(event) {
                 const newChecked = event.currentTarget.checked;
                 onChange && onChange(newChecked);
@@ -58,20 +58,20 @@ function CheckboxRebuilt({ checked, defaultChecked, disabled, label, name, value
         [styles.indeterminate]: indeterminate,
     });
     const iconName = indeterminate ? "minus2" : "checkmark";
-    const labelContent = typeof label === "string" ? React.createElement(Text, null, label) : label;
-    const descriptionContent = typeof description === "string" ? (React.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description);
+    const labelContent = typeof label === "string" ? React__default.createElement(Text, null, label) : label;
+    const descriptionContent = typeof description === "string" ? (React__default.createElement(Text, { size: "small", variation: "subdued" }, description)) : (description);
     function handleChange(event) {
         const newChecked = event.currentTarget.checked;
         onChange === null || onChange === void 0 ? void 0 : onChange(newChecked, event);
     }
-    return (React.createElement("div", { className: styles.checkBoxParent },
-        React.createElement("label", { className: wrapperClassName },
-            React.createElement("span", { className: styles.checkHolder },
-                React.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
-                React.createElement("span", { className: styles.checkBox },
-                    React.createElement(Icon, { name: iconName, color: "surface" }))),
-            labelContent && React.createElement("span", { className: styles.label }, labelContent)),
-        description && (React.createElement("div", { className: styles.description }, descriptionContent))));
+    return (React__default.createElement("div", { className: styles.checkBoxParent },
+        React__default.createElement("label", { className: wrapperClassName },
+            React__default.createElement("span", { className: styles.checkHolder },
+                React__default.createElement("input", { type: "checkbox", id: id, className: inputClassName, name: name, checked: checked, value: value, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur }),
+                React__default.createElement("span", { className: styles.checkBox },
+                    React__default.createElement(Icon, { name: iconName, color: "surface" }))),
+            labelContent && React__default.createElement("span", { className: styles.label }, labelContent)),
+        description && (React__default.createElement("div", { className: styles.description }, descriptionContent))));
 }
 
 function isNewCheckboxProps(props) {
@@ -79,9 +79,9 @@ function isNewCheckboxProps(props) {
 }
 function Checkbox(props) {
     if (isNewCheckboxProps(props)) {
-        return React.createElement(CheckboxRebuilt, Object.assign({}, props));
+        return React__default.createElement(CheckboxRebuilt, Object.assign({}, props));
     }
-    return React.createElement(CheckboxLegacy, Object.assign({}, props));
+    return React__default.createElement(CheckboxLegacy, Object.assign({}, props));
 }
 
 export { Checkbox };

package/dist/Chip-es.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React__default, { useRef } from 'react';
 import classnames from 'classnames';
 import { u as useInView_2 } from './useInView-es.js';
 import { A as Avatar } from './Avatar-es.js';
@@ -12,16 +12,16 @@ var styles$1 = {"chip":"FJNLweTKlm4-","clickableSuffix":"VI-h7qe-Bl0-","suffix":
 function ChipPrefix({ children }) {
     const avatarOrIcon = useChildComponent(children, d => d.type === Avatar || d.type === Icon);
     if (!avatarOrIcon)
-        return React.createElement(React.Fragment, null, children);
-    return React.createElement("span", { className: classnames(styles$1.prefix) }, avatarOrIcon);
+        return React__default.createElement(React__default.Fragment, null, children);
+    return React__default.createElement("span", { className: classnames(styles$1.prefix) }, avatarOrIcon);
 }
 
 var styles = {"wrapper":"NLNJBhRffp4-","input":"ulLzwMsQL3U-","inactive":"_3LLjp8oIxJ0-","invalid":"H7VZzUBkgjk-","disabled":"-yQxZSnxBBU-","button":"ngKOY8l4BG4-","icon":"rzbiB2nz36Q-","spinning":"X7Bx5CDPfDs-"};
 
 function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
     const buttonRef = useRef();
-    return (React.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
-        React.createElement(Icon, { size: "small", name: icon, color: getColor() })));
+    return (React__default.createElement("div", { ref: buttonRef, className: styles.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
+        React__default.createElement(Icon, { size: "small", name: icon, color: getColor() })));
     function handleKeyUp(event) {
         if (document.activeElement === buttonRef.current &&
             (event.key === " " || event.key === "Enter")) {
@@ -63,7 +63,7 @@ function ChipSuffix({ children, className, onClick, testID, ariaLabel, }) {
     if (!allowedSuffixIcons.includes(iconName)) {
         singleChild = undefined;
     }
-    return (React.createElement("span", { className: classnames(onClick ? styles$1.clickableSuffix : styles$1.suffix, className, !singleChild && styles$1.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
+    return (React__default.createElement("span", { className: classnames(onClick ? styles$1.clickableSuffix : styles$1.suffix, className, !singleChild && styles$1.empty), onClick: handleClick, onKeyPress: handleClick, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, "data-testid": testID, "aria-label": ariaLabel }, singleChild));
 }
 const allowedSuffixIcons = [
     "cross",
@@ -86,20 +86,20 @@ const Chip = ({ ariaLabel, disabled, heading, invalid, label, value, testID, onC
     const [headingRef, headingFullyVisible] = useInView_2();
     const tooltipMessage = getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading);
     const Tag = onClick ? "button" : "div";
-    return (React.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false },
-        React.createElement(Tag, { className: classes, onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev), tabIndex: disabled ? -1 : tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel, disabled: disabled, role: role, "data-testid": testID, type: "button" },
+    return (React__default.createElement(Tooltip, { message: tooltipMessage, setTabIndex: false },
+        React__default.createElement(Tag, { className: classes, onClick: (ev) => onClick === null || onClick === void 0 ? void 0 : onClick(value, ev), tabIndex: disabled ? -1 : tabIndex, onKeyDown: onKeyDown, "aria-label": ariaLabel, disabled: disabled, role: role, "data-testid": testID, type: "button" },
             prefix,
-            React.createElement("div", { className: styles$1.chipContent },
-                heading && (React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { size: "base", fontWeight: "medium" },
+            React__default.createElement("div", { className: styles$1.chipContent },
+                heading && (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Typography, { size: "base", fontWeight: "medium" },
                         heading,
-                        React.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
-                    label && React.createElement("span", { className: styles$1.chipBar }))),
-                React.createElement(Typography, { size: "base" },
+                        React__default.createElement("span", { ref: headingRef, className: styles$1.chipLabelRef })),
+                    label && React__default.createElement("span", { className: styles$1.chipBar }))),
+                React__default.createElement(Typography, { size: "base" },
                     label,
-                    React.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
-                !labelFullyVisible && (React.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
-                    React.createElement("span", null)))),
+                    React__default.createElement("span", { ref: labelRef, className: styles$1.chipLabelRef })),
+                !labelFullyVisible && (React__default.createElement("div", { className: styles$1.truncateGradient, "data-testid": "ATL-Chip-Truncation-Gradient" },
+                    React__default.createElement("span", null)))),
             suffix)));
 };
 function getTooltipMessage(labelFullyVisible, headingFullyVisible, label, heading) {

package/dist/ChipDismissible-es.js

@@ -1,19 +1,19 @@
 import { _ as __rest } from './tslib.es6-es.js';
-import React from 'react';
+import React__default from 'react';
 import { I as Icon } from './Icon-es.js';
 import { C as Chip, s as styles } from './Chip-es.js';
 
 function ChipSelectable(_a) {
     var { selected } = _a, rest = __rest(_a, ["selected"]);
-    return (React.createElement(Chip, Object.assign({}, rest),
-        React.createElement(Chip.Suffix, { className: selected ? styles.selected : "" },
-            React.createElement(Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
+    return (React__default.createElement(Chip, Object.assign({}, rest),
+        React__default.createElement(Chip.Suffix, { className: selected ? styles.selected : "" },
+            React__default.createElement(Icon, { name: selected ? "checkmark" : "add", size: "small", color: "interactiveSubtle" }))));
 }
 
 function ChipDismissible(props) {
-    return (React.createElement(Chip, Object.assign({}, props),
-        React.createElement(Chip.Suffix, null,
-            React.createElement(Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
+    return (React__default.createElement(Chip, Object.assign({}, props),
+        React__default.createElement(Chip.Suffix, null,
+            React__default.createElement(Icon, { name: "cross", size: "small", color: "interactiveSubtle" }))));
 }
 
 export { ChipSelectable as C, ChipDismissible as a };

package/dist/Chips/index.mjs

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { a as InternalChip } from '../InternalChipDismissible-es.js';
 import { I as InternalChipButton } from '../Chip-es.js';
 export { C as Chips } from '../Chips-es.js';
@@ -39,7 +39,7 @@ import '../useIsMounted-es.js';
 import '../_polyfill-node.process-es.js';
 
 function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestRemove, }) {
-    return (React.createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React.createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
+    return (React__default.createElement(InternalChip, { label: label, disabled: disabled, invalid: invalid, prefix: prefix, onClick: onClick, suffix: React__default.createElement(InternalChipButton, { icon: "remove", label: label, invalid: invalid, disabled: disabled, onClick: onRequestRemove }) }));
 }
 
 // Only need the component to pass in the data as a react children
@@ -47,7 +47,7 @@ function ChipDismissible({ label, disabled, invalid, prefix, onClick, onRequestR
 function Chip(props) {
     // Throw error when <Chip /> gets used outside of the <Chips />
     useAssert_2(true, "`<Chip>` component can only be used inside `<Chips>`");
-    return React.createElement(React.Fragment, null);
+    return React__default.createElement(React__default.Fragment, null);
 }
 
 export { Chip, ChipDismissible };

package/dist/Chips-es.js

@@ -1,4 +1,4 @@
-import React, { useId } from 'react';
+import React__default, { useId } from 'react';
 import classnames from 'classnames';
 import { a as styles } from './Chip-es.js';
 import { a as InternalChip, I as InternalChipDismissible } from './InternalChipDismissible-es.js';
@@ -8,7 +8,7 @@ const getSuffixProps = (isChipActive, showSelectedSuffix) => {
     if (isChipActive) {
         return showSelectedSuffix
             ? {
-                suffix: (React.createElement(Icon, { size: "small", name: "checkmark", color: "interactiveSubtle" })),
+                suffix: (React__default.createElement(Icon, { size: "small", name: "checkmark", color: "interactiveSubtle" })),
             }
             : {};
     }
@@ -22,7 +22,7 @@ function useInternalChips() {
 
 function InternalChipSingleSelect({ children, selected, name = useId(), showSelectedSuffix = true, onChange, onClick, }) {
     const { getSuffixProps } = useInternalChips();
-    return (React.createElement("div", { className: styles.wrapper, "data-testid": "singleselect-chips" }, React.Children.map(children, child => {
+    return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "singleselect-chips" }, React__default.Children.map(children, child => {
         const isSelected = child.props.value === selected;
         const suffixProps = getSuffixProps(isSelected, showSelectedSuffix);
         const classes = classnames(styles.input, {
@@ -30,11 +30,11 @@ function InternalChipSingleSelect({ children, selected, name = useId(), showSele
             [styles.invalid]: child.props.invalid,
             [styles.inactive]: !isSelected,
         });
-        return (React.createElement("label", null,
-            React.createElement("input", { type: "radio", checked: isSelected, className: classes, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
+        return (React__default.createElement("label", null,
+            React__default.createElement("input", { type: "radio", checked: isSelected, className: classes, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
                     /* No op. onClick handles the change to allow deselecting. */
                 }, disabled: child.props.disabled }),
-            React.createElement(InternalChip, Object.assign({}, child.props, suffixProps, { active: isSelected, tabIndex: -1 }))));
+            React__default.createElement(InternalChip, Object.assign({}, child.props, suffixProps, { active: isSelected, tabIndex: -1 }))));
     })));
     function handleKeyUp(active, value) {
         if (!active)
@@ -60,7 +60,7 @@ function InternalChipSingleSelect({ children, selected, name = useId(), showSele
 
 function InternalChipMultiSelect({ children, selected, showSelectedSuffix = true, onChange, onClick, }) {
     const { getSuffixProps } = useInternalChips();
-    return (React.createElement("div", { className: styles.wrapper, "data-testid": "multiselect-chips" }, React.Children.map(children, chip => {
+    return (React__default.createElement("div", { className: styles.wrapper, "data-testid": "multiselect-chips" }, React__default.Children.map(children, chip => {
         const isChipActive = isChipSelected(chip.props.value);
         const suffixProps = getSuffixProps(isChipActive, showSelectedSuffix);
         const classes = classnames(styles.input, {
@@ -68,9 +68,9 @@ function InternalChipMultiSelect({ children, selected, showSelectedSuffix = true
             [styles.invalid]: chip.props.invalid,
             [styles.inactive]: !isChipActive,
         });
-        return (React.createElement("label", null,
-            React.createElement("input", { type: "checkbox", checked: isChipActive, className: classes, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
-            React.createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive }, suffixProps, { tabIndex: -1 }))));
+        return (React__default.createElement("label", null,
+            React__default.createElement("input", { type: "checkbox", checked: isChipActive, className: classes, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
+            React__default.createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive }, suffixProps, { tabIndex: -1 }))));
     })));
     function isChipSelected(value) {
         return selected.includes(value);
@@ -102,11 +102,11 @@ function InternalChipMultiSelect({ children, selected, showSelectedSuffix = true
 function Chips(props) {
     switch (props.type) {
         case "dismissible":
-            return React.createElement(InternalChipDismissible, Object.assign({}, props));
+            return React__default.createElement(InternalChipDismissible, Object.assign({}, props));
         case "multiselect":
-            return React.createElement(InternalChipMultiSelect, Object.assign({}, props));
+            return React__default.createElement(InternalChipMultiSelect, Object.assign({}, props));
         default:
-            return React.createElement(InternalChipSingleSelect, Object.assign({}, props));
+            return React__default.createElement(InternalChipSingleSelect, Object.assign({}, props));
     }
 }
 

package/dist/Combobox/components/ComboboxContent/index.cjs

@@ -26,8 +26,6 @@ require('../../../Button-cjs.js');
 require('react-router-dom');
 require('../../../useRefocusOnActivator-cjs.js');
 require('../../../useFocusTrap-cjs.js');
-require('react-popper');
-require('../../../useOnKeyDown-cjs.js');
 require('../../../constants-cjs.js');
 
 

package/dist/Combobox/components/ComboboxContent/index.mjs

@@ -24,6 +24,4 @@ import '../../../Button-es.js';
 import 'react-router-dom';
 import '../../../useRefocusOnActivator-es.js';
 import '../../../useFocusTrap-es.js';
-import 'react-popper';
-import '../../../useOnKeyDown-es.js';
 import '../../../constants-es.js';

package/dist/Combobox/hooks/useComboboxAccessibility.d.ts

@@ -1,12 +1,7 @@
+import { UseInteractionsReturn } from "@floating-ui/react";
 import { ComboboxOption } from "../Combobox.types";
 export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, wrapperRef: React.RefObject<HTMLDivElement>): {
     popperRef: React.RefObject<HTMLDivElement>;
-    popperStyles: {
-        [key: string]: React.CSSProperties;
-    };
-    attributes: {
-        [key: string]: {
-            [key: string]: string;
-        } | undefined;
-    };
+    popperStyles: React.CSSProperties;
+    floatingProps: ReturnType<UseInteractionsReturn["getFloatingProps"]>;
 };

package/dist/Combobox/index.cjs

@@ -27,8 +27,6 @@ require('../Button-cjs.js');
 require('react-router-dom');
 require('../useRefocusOnActivator-cjs.js');
 require('../useFocusTrap-cjs.js');
-require('react-popper');
-require('../useOnKeyDown-cjs.js');
 require('../constants-cjs.js');
 require('../ComboboxAction-cjs.js');
 require('../ComboboxTrigger-cjs.js');
@@ -39,6 +37,7 @@ require('../useChildComponent-cjs.js');
 require('../Tooltip-cjs.js');
 require('../useSafeLayoutEffect-cjs.js');
 require('../useIsMounted-cjs.js');
+require('react-popper');
 require('../debounce-cjs.js');
 require('../_commonjsHelpers-cjs.js');
 require('../isObjectLike-cjs.js');

package/dist/Combobox/index.mjs

@@ -25,8 +25,6 @@ import '../Button-es.js';
 import 'react-router-dom';
 import '../useRefocusOnActivator-es.js';
 import '../useFocusTrap-es.js';
-import 'react-popper';
-import '../useOnKeyDown-es.js';
 import '../constants-es.js';
 import '../ComboboxAction-es.js';
 import '../ComboboxTrigger-es.js';
@@ -37,6 +35,7 @@ import '../useChildComponent-es.js';
 import '../Tooltip-es.js';
 import '../useSafeLayoutEffect-es.js';
 import '../useIsMounted-es.js';
+import 'react-popper';
 import '../debounce-es.js';
 import '../_commonjsHelpers-es.js';
 import '../isObjectLike-es.js';

package/dist/Combobox-es.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState, Children, isValidElement, useMemo } from 'react';
+import React__default, { useCallback, useRef, useState, Children, isValidElement, useMemo } from 'react';
 import { C as ComboboxContent } from './ComboboxContent-es.js';
 import { C as ComboboxAction } from './ComboboxAction-es.js';
 import { C as ComboboxContextProvider } from './ComboboxProvider-es.js';
@@ -109,11 +109,11 @@ function Combobox(props) {
         customRender: option.props.customRender,
     }))) || [], [optionElements]);
     const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, handleClose, handleSelection, handleOpen, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
-    return (React.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label },
-        React.createElement("div", { ref: wrapperRef, className: styles.wrapper },
-            open && (React.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
-            triggerElement || (React.createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
-            React.createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
+    return (React__default.createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, handleOpen: handleOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue, label: props.label },
+        React__default.createElement("div", { ref: wrapperRef, className: styles.wrapper },
+            open && (React__default.createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
+            triggerElement || (React__default.createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
+            React__default.createElement(ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
 }
 Combobox.Activator = ComboboxActivator;
 Combobox.Action = ComboboxAction;

package/dist/ComboboxAction-es.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { T as Typography } from './Typography-es.js';
 import { a as ComboboxContext } from './ComboboxProvider-es.js';
 
@@ -20,9 +20,9 @@ function ComboboxAction(props) {
         }
         props.onClick(e, options);
     };
-    return (React.createElement("div", { className: styles.actionContainer },
-        React.createElement("button", { className: styles.actionButton, onClick: handleClick, type: "button" },
-            React.createElement(Typography, { element: "span", size: "base", textColor: "interactive", fontWeight: "semiBold" }, computedLabel))));
+    return (React__default.createElement("div", { className: styles.actionContainer },
+        React__default.createElement("button", { className: styles.actionButton, onClick: handleClick, type: "button" },
+            React__default.createElement(Typography, { element: "span", size: "base", textColor: "interactive", fontWeight: "semiBold" }, computedLabel))));
 }
 
 export { ComboboxAction as C };

package/dist/ComboboxActivator-es.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { B as Button } from './Button-es.js';
 import 'classnames';
 import { C as Chip } from './Chip-es.js';
@@ -18,11 +18,11 @@ function useComboboxActivatorAccessibility() {
 }
 
 function ComboboxActivator(props) {
-    const { handleOpen } = React.useContext(ComboboxContext);
+    const { handleOpen } = React__default.useContext(ComboboxContext);
     const accessibilityAttributes = useComboboxActivatorAccessibility();
     if (typeof props.children !== "function" &&
         (props.children.type === Button || props.children.type === Chip)) {
-        return React.cloneElement(props.children, {
+        return React__default.cloneElement(props.children, {
             role: accessibilityAttributes.role,
             onClick: handleOpen,
         });