@jobber/components 4.92.0 → 4.92.1-JOB-91143.4

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

@@ -0,0 +1,8 @@
+export { C as ComboboxContentHeader } from '../../../../ComboboxContentHeader-CwgZyJ-n.js';
+import 'react';
+import '../../../../Typography-DBA8fJ4I.js';
+import 'classnames';
+import '../../../../Button-CKxjsn8f.js';
+import 'react-router-dom';
+import '../../../../Icon-BJUSeqrr.js';
+import '@jobber/design';

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var ComboboxContentList = require('../../../../ComboboxContentList-B84jQ_k9.js');
+require('react');
+require('classnames');
+require('../../../../Text-CqfEADu0.js');
+require('../../../../Typography-CBz3Bwzs.js');
+require('../../../../Glimmer-D0tv78WP.js');
+require('../../../../tslib.es6-CjmNBqgv.js');
+require('../../../../Content-DErBfjY3.js');
+require('../../../../Spinner-4_B4sbFF.js');
+require('../../../../AnimatedPresence-C7_0OG8K.js');
+require('framer-motion');
+require('@jobber/design');
+require('../../../../ComboboxOption-fq9MC5fv.js');
+require('../../../../Icon-DjU29wkY.js');
+require('../../../../Flex-BkRBJK0Z.js');
+require('../../../../ComboboxProvider-B1d2SG67.js');
+require('../../../../ComboboxLoadMore-BnhP-b9N.js');
+require('../../../../useInView-NIKZBawt.js');
+
+
+
+exports.ComboboxContentList = ComboboxContentList.ComboboxContentList;

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

@@ -0,0 +1,18 @@
+export { C as ComboboxContentList } from '../../../../ComboboxContentList-BlSsa2wi.js';
+import 'react';
+import 'classnames';
+import '../../../../Text-9Y0IeH0M.js';
+import '../../../../Typography-DBA8fJ4I.js';
+import '../../../../Glimmer-B5eYryBF.js';
+import '../../../../tslib.es6-BJzo8cuE.js';
+import '../../../../Content-DvE60Q2i.js';
+import '../../../../Spinner-AOCiYGuW.js';
+import '../../../../AnimatedPresence-DuP07qsR.js';
+import 'framer-motion';
+import '@jobber/design';
+import '../../../../ComboboxOption-CmhVk1Tm.js';
+import '../../../../Icon-BJUSeqrr.js';
+import '../../../../Flex-DQVyK7wo.js';
+import '../../../../ComboboxProvider-BpcqvBBD.js';
+import '../../../../ComboboxLoadMore-CKnSg956.js';
+import '../../../../useInView-Dk25sanP.js';

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

@@ -0,0 +1,10 @@
+'use strict';
+
+var ComboboxContentSearch = require('../../../../ComboboxContentSearch-DH_9gdSF.js');
+require('react');
+require('../../../../Icon-DjU29wkY.js');
+require('@jobber/design');
+
+
+
+exports.ComboboxContentSearch = ComboboxContentSearch.ComboboxContentSearch;

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

@@ -0,0 +1,4 @@
+export { C as ComboboxContentSearch } from '../../../../ComboboxContentSearch-B76E7yYs.js';
+import 'react';
+import '../../../../Icon-BJUSeqrr.js';
+import '@jobber/design';

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var ComboboxLoadMore = require('../../../../ComboboxLoadMore-BnhP-b9N.js');
+require('react');
+require('../../../../useInView-NIKZBawt.js');
+
+
+
+exports.ComboboxLoadMore = ComboboxLoadMore.ComboboxLoadMore;

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

@@ -0,0 +1,3 @@
+export { C as ComboboxLoadMore } from '../../../../ComboboxLoadMore-CKnSg956.js';
+import 'react';
+import '../../../../useInView-Dk25sanP.js';

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var ComboboxContent = require('../../../ComboboxContent-FcsdPGqc.js');
+require('react');
+require('classnames');
+require('react-dom');
+require('../../../ComboboxContentSearch-DH_9gdSF.js');
+require('../../../Icon-DjU29wkY.js');
+require('@jobber/design');
+require('../../../ComboboxContentList-B84jQ_k9.js');
+require('../../../Text-CqfEADu0.js');
+require('../../../Typography-CBz3Bwzs.js');
+require('../../../Glimmer-D0tv78WP.js');
+require('../../../tslib.es6-CjmNBqgv.js');
+require('../../../Content-DErBfjY3.js');
+require('../../../Spinner-4_B4sbFF.js');
+require('../../../AnimatedPresence-C7_0OG8K.js');
+require('framer-motion');
+require('../../../ComboboxOption-fq9MC5fv.js');
+require('../../../Flex-BkRBJK0Z.js');
+require('../../../ComboboxProvider-B1d2SG67.js');
+require('../../../ComboboxLoadMore-BnhP-b9N.js');
+require('../../../useInView-NIKZBawt.js');
+require('../../../ComboboxContentHeader-CudWca0J.js');
+require('../../../Button-DE6Du5Wv.js');
+require('react-router-dom');
+require('../../../useRefocusOnActivator-Nc-vAHlK.js');
+require('../../../useFocusTrap-Bk_llzCy.js');
+require('react-popper');
+require('../../../useOnKeyDown-BRrGkWfQ.js');
+
+
+
+exports.ComboboxContent = ComboboxContent.ComboboxContent;

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

@@ -0,0 +1,28 @@
+export { C as ComboboxContent } from '../../../ComboboxContent-B3t3fDTn.js';
+import 'react';
+import 'classnames';
+import 'react-dom';
+import '../../../ComboboxContentSearch-B76E7yYs.js';
+import '../../../Icon-BJUSeqrr.js';
+import '@jobber/design';
+import '../../../ComboboxContentList-BlSsa2wi.js';
+import '../../../Text-9Y0IeH0M.js';
+import '../../../Typography-DBA8fJ4I.js';
+import '../../../Glimmer-B5eYryBF.js';
+import '../../../tslib.es6-BJzo8cuE.js';
+import '../../../Content-DvE60Q2i.js';
+import '../../../Spinner-AOCiYGuW.js';
+import '../../../AnimatedPresence-DuP07qsR.js';
+import 'framer-motion';
+import '../../../ComboboxOption-CmhVk1Tm.js';
+import '../../../Flex-DQVyK7wo.js';
+import '../../../ComboboxProvider-BpcqvBBD.js';
+import '../../../ComboboxLoadMore-CKnSg956.js';
+import '../../../useInView-Dk25sanP.js';
+import '../../../ComboboxContentHeader-CwgZyJ-n.js';
+import '../../../Button-CKxjsn8f.js';
+import 'react-router-dom';
+import '../../../useRefocusOnActivator-BCZuCyZg.js';
+import '../../../useFocusTrap-BztNbnoA.js';
+import 'react-popper';
+import '../../../useOnKeyDown-Dtenmfc9.js';

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var ComboboxOption = require('../../../ComboboxOption-fq9MC5fv.js');
+require('react');
+require('classnames');
+require('../../../Icon-DjU29wkY.js');
+require('@jobber/design');
+require('../../../Flex-BkRBJK0Z.js');
+require('../../../ComboboxProvider-B1d2SG67.js');
+require('../../../tslib.es6-CjmNBqgv.js');
+
+
+
+exports.ComboboxOption = ComboboxOption.ComboboxOption;

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

@@ -0,0 +1,8 @@
+export { C as ComboboxOption } from '../../../ComboboxOption-CmhVk1Tm.js';
+import 'react';
+import 'classnames';
+import '../../../Icon-BJUSeqrr.js';
+import '@jobber/design';
+import '../../../Flex-DQVyK7wo.js';
+import '../../../ComboboxProvider-BpcqvBBD.js';
+import '../../../tslib.es6-BJzo8cuE.js';

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var ComboboxTrigger = require('../../../ComboboxTrigger-CBviayim.js');
+require('react');
+require('../../../Chip-BRA8Ie1D.js');
+require('classnames');
+require('../../../useInView-NIKZBawt.js');
+require('../../../Avatar-CVgBcpGi.js');
+require('color');
+require('../../../Icon-DjU29wkY.js');
+require('@jobber/design');
+require('../../../useChildComponent-DktVoc_0.js');
+require('../../../Typography-CBz3Bwzs.js');
+require('../../../Tooltip-D2U8LSaI.js');
+require('react-dom');
+require('framer-motion');
+require('../../../useSafeLayoutEffect-BNLlFJBq.js');
+require('../../../useIsMounted-DZig4aFK.js');
+require('react-popper');
+require('../../../tslib.es6-CjmNBqgv.js');
+require('../../../ComboboxProvider-B1d2SG67.js');
+
+
+
+exports.ComboboxTrigger = ComboboxTrigger.ComboboxTrigger;

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

@@ -0,0 +1,19 @@
+export { C as ComboboxTrigger } from '../../../ComboboxTrigger-D6M0Glk-.js';
+import 'react';
+import '../../../Chip-D5t8gDBN.js';
+import 'classnames';
+import '../../../useInView-Dk25sanP.js';
+import '../../../Avatar-5fBKFezP.js';
+import 'color';
+import '../../../Icon-BJUSeqrr.js';
+import '@jobber/design';
+import '../../../useChildComponent-D2t-5Jky.js';
+import '../../../Typography-DBA8fJ4I.js';
+import '../../../Tooltip-DeXlEfZX.js';
+import 'react-dom';
+import 'framer-motion';
+import '../../../useSafeLayoutEffect-CtAU_CL9.js';
+import '../../../useIsMounted-CEL42pGR.js';
+import 'react-popper';
+import '../../../tslib.es6-BJzo8cuE.js';
+import '../../../ComboboxProvider-BpcqvBBD.js';

package/dist/Combobox/index.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var Combobox = require('../Combobox-4g_P-scs.js');
+var ComboboxProvider = require('../ComboboxProvider-B1d2SG67.js');
+require('react');
+require('../ComboboxContent-FcsdPGqc.js');
+require('classnames');
+require('react-dom');
+require('../ComboboxContentSearch-DH_9gdSF.js');
+require('../Icon-DjU29wkY.js');
+require('@jobber/design');
+require('../ComboboxContentList-B84jQ_k9.js');
+require('../Text-CqfEADu0.js');
+require('../Typography-CBz3Bwzs.js');
+require('../Glimmer-D0tv78WP.js');
+require('../tslib.es6-CjmNBqgv.js');
+require('../Content-DErBfjY3.js');
+require('../Spinner-4_B4sbFF.js');
+require('../AnimatedPresence-C7_0OG8K.js');
+require('framer-motion');
+require('../ComboboxOption-fq9MC5fv.js');
+require('../Flex-BkRBJK0Z.js');
+require('../ComboboxLoadMore-BnhP-b9N.js');
+require('../useInView-NIKZBawt.js');
+require('../ComboboxContentHeader-CudWca0J.js');
+require('../Button-DE6Du5Wv.js');
+require('react-router-dom');
+require('../useRefocusOnActivator-Nc-vAHlK.js');
+require('../useFocusTrap-Bk_llzCy.js');
+require('react-popper');
+require('../useOnKeyDown-BRrGkWfQ.js');
+require('../ComboboxAction-Ci7RkWIs.js');
+require('../ComboboxTrigger-CBviayim.js');
+require('../Chip-BRA8Ie1D.js');
+require('../Avatar-CVgBcpGi.js');
+require('color');
+require('../useChildComponent-DktVoc_0.js');
+require('../Tooltip-D2U8LSaI.js');
+require('../useSafeLayoutEffect-BNLlFJBq.js');
+require('../useIsMounted-DZig4aFK.js');
+require('../debounce-BpTvHvBt.js');
+require('../_commonjsHelpers-xAV1A7i5.js');
+require('../isObjectLike-DkE0-lSd.js');
+require('../isSymbol-DVwHxcm6.js');
+require('../noop-9CHQCFDx.js');
+require('../ComboboxActivator-Wru82KGv.js');
+require('../useAssert-B1i-_d5Q.js');
+require('../_polyfill-node.process-CYhOBsNv.js');
+
+
+
+exports.Combobox = Combobox.Combobox;
+exports.ComboboxContextProvider = ComboboxProvider.ComboboxContextProvider;

package/dist/Combobox/index.mjs

@@ -0,0 +1,46 @@
+export { C as Combobox } from '../Combobox-C9lk5lGs.js';
+export { C as ComboboxContextProvider } from '../ComboboxProvider-BpcqvBBD.js';
+import 'react';
+import '../ComboboxContent-B3t3fDTn.js';
+import 'classnames';
+import 'react-dom';
+import '../ComboboxContentSearch-B76E7yYs.js';
+import '../Icon-BJUSeqrr.js';
+import '@jobber/design';
+import '../ComboboxContentList-BlSsa2wi.js';
+import '../Text-9Y0IeH0M.js';
+import '../Typography-DBA8fJ4I.js';
+import '../Glimmer-B5eYryBF.js';
+import '../tslib.es6-BJzo8cuE.js';
+import '../Content-DvE60Q2i.js';
+import '../Spinner-AOCiYGuW.js';
+import '../AnimatedPresence-DuP07qsR.js';
+import 'framer-motion';
+import '../ComboboxOption-CmhVk1Tm.js';
+import '../Flex-DQVyK7wo.js';
+import '../ComboboxLoadMore-CKnSg956.js';
+import '../useInView-Dk25sanP.js';
+import '../ComboboxContentHeader-CwgZyJ-n.js';
+import '../Button-CKxjsn8f.js';
+import 'react-router-dom';
+import '../useRefocusOnActivator-BCZuCyZg.js';
+import '../useFocusTrap-BztNbnoA.js';
+import 'react-popper';
+import '../useOnKeyDown-Dtenmfc9.js';
+import '../ComboboxAction-CDXUQcsS.js';
+import '../ComboboxTrigger-D6M0Glk-.js';
+import '../Chip-D5t8gDBN.js';
+import '../Avatar-5fBKFezP.js';
+import 'color';
+import '../useChildComponent-D2t-5Jky.js';
+import '../Tooltip-DeXlEfZX.js';
+import '../useSafeLayoutEffect-CtAU_CL9.js';
+import '../useIsMounted-CEL42pGR.js';
+import '../debounce-Dd5GxxzC.js';
+import '../_commonjsHelpers-C-Wbr7RH.js';
+import '../isObjectLike-D72TVWLW.js';
+import '../isSymbol-BdlIpdew.js';
+import '../noop-CiBZ2qxz.js';
+import '../ComboboxActivator-DC7UbnAU.js';
+import '../useAssert-Bk9LtVuC.js';
+import '../_polyfill-node.process-B_9ykg-O.js';

package/dist/Combobox-4g_P-scs.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var React = require('react');
+var ComboboxContent = require('./ComboboxContent-FcsdPGqc.js');
+var ComboboxAction = require('./ComboboxAction-Ci7RkWIs.js');
+var ComboboxProvider = require('./ComboboxProvider-B1d2SG67.js');
+var ComboboxTrigger = require('./ComboboxTrigger-CBviayim.js');
+var ComboboxOption = require('./ComboboxOption-fq9MC5fv.js');
+var debounce = require('./debounce-BpTvHvBt.js');
+var noop = require('./noop-9CHQCFDx.js');
+var ComboboxActivator = require('./ComboboxActivator-Wru82KGv.js');
+var useAssert = require('./useAssert-B1i-_d5Q.js');
+
+var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
+
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
+    const handleClose = React.useCallback(() => {
+        setOpen(false);
+        setSearchValue("");
+        onSearch && onSearch("");
+        onClose && onClose();
+        if (selectedOptions.length > 0) {
+            shouldScroll.current = true;
+        }
+    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
+    const handleSelection = React.useCallback((selection) => {
+        if (multiSelect) {
+            handleMultiSelect(selectedStateSetter, selectedOptions, selection);
+        }
+        else {
+            handleSingleSelect(selectedStateSetter, selection);
+        }
+    }, [multiSelect, selectedStateSetter, selectedOptions]);
+    const handleSingleSelect = React.useCallback((selectCallback, selection) => {
+        selectCallback([selection]);
+        handleClose();
+    }, []);
+    return {
+        handleClose,
+        handleSelection,
+    };
+}
+function handleMultiSelect(selectCallback, selected, selection) {
+    if (selected.some(s => s.id === selection.id)) {
+        selectCallback(selected.filter(s => s.id !== selection.id));
+    }
+    else {
+        selectCallback([...selected, selection]);
+    }
+}
+
+function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
+    const wrapperRef = React.useRef(null);
+    const shouldScroll = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const searchCallback = React.useCallback(debounce.debounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
+    const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    return {
+        wrapperRef,
+        searchValue,
+        setSearchValue,
+        open,
+        setOpen,
+        selectedOptions: selected,
+        selectedStateSetter: onSelect,
+        shouldScroll,
+        handleClose,
+        handleSelection,
+        internalFilteredOptions,
+        handleSearchChange: onSearch ? searchCallback : noop.noop,
+    };
+}
+
+const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox must have exactly one Trigger element";
+function useComboboxValidation(children) {
+    const optionElements = getCompoundComponents(ComboboxOption.ComboboxOption, children);
+    const actionElements = getCompoundComponents(ComboboxAction.ComboboxAction, children);
+    const activatorElements = getCompoundComponents(ComboboxActivator.ComboboxActivator, children);
+    const shouldThrowTriggerError = isInvalid(activatorElements);
+    useAssert.useAssert_2(shouldThrowTriggerError, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
+    return {
+        optionElements,
+        triggerElement: activatorElements[0],
+        actionElements,
+    };
+}
+function isInvalid(activators) {
+    return activators.length > 1 ? true : false;
+}
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+function getCompoundComponents(type, children) {
+    const childrenArray = React.Children.toArray(children);
+    const elements = childrenArray.filter((child) => React.isValidElement(child) && child.type === type);
+    return elements;
+}
+
+function Combobox(props) {
+    const { optionElements, triggerElement, actionElements } = useComboboxValidation(props.children);
+    const options = React.useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => ({
+        id: option.props.id,
+        label: option.props.label,
+        prefix: option.props.prefix,
+    }))) || [], [optionElements]);
+    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, internalFilteredOptions, handleSearchChange, } = useCombobox(props.selected, props.onSelect, options, props.onClose, props.multiSelect, props.onSearch, props.onSearchDebounce);
+    return (React.createElement(ComboboxProvider.ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue },
+        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.ComboboxTrigger, { label: props.label, selected: props.selected })),
+            React.createElement(ComboboxContent.ComboboxContent, { multiselect: props.multiSelect, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
+}
+Combobox.Activator = ComboboxActivator.ComboboxActivator;
+Combobox.Action = ComboboxAction.ComboboxAction;
+Combobox.Option = ComboboxOption.ComboboxOption;
+
+exports.Combobox = Combobox;

package/dist/Combobox-C9lk5lGs.js

@@ -0,0 +1,117 @@
+import React, { useCallback, useRef, useState, Children, isValidElement, useMemo } from 'react';
+import { C as ComboboxContent } from './ComboboxContent-B3t3fDTn.js';
+import { C as ComboboxAction } from './ComboboxAction-CDXUQcsS.js';
+import { C as ComboboxContextProvider } from './ComboboxProvider-BpcqvBBD.js';
+import { C as ComboboxTrigger } from './ComboboxTrigger-D6M0Glk-.js';
+import { C as ComboboxOption } from './ComboboxOption-CmhVk1Tm.js';
+import { d as debounce } from './debounce-Dd5GxxzC.js';
+import { n as noop } from './noop-CiBZ2qxz.js';
+import { C as ComboboxActivator } from './ComboboxActivator-DC7UbnAU.js';
+import { u as useAssert_2 } from './useAssert-Bk9LtVuC.js';
+
+var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
+
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose, onSearch) {
+    const handleClose = useCallback(() => {
+        setOpen(false);
+        setSearchValue("");
+        onSearch && onSearch("");
+        onClose && onClose();
+        if (selectedOptions.length > 0) {
+            shouldScroll.current = true;
+        }
+    }, [setOpen, setSearchValue, onClose, onSearch, selectedOptions.length]);
+    const handleSelection = useCallback((selection) => {
+        if (multiSelect) {
+            handleMultiSelect(selectedStateSetter, selectedOptions, selection);
+        }
+        else {
+            handleSingleSelect(selectedStateSetter, selection);
+        }
+    }, [multiSelect, selectedStateSetter, selectedOptions]);
+    const handleSingleSelect = useCallback((selectCallback, selection) => {
+        selectCallback([selection]);
+        handleClose();
+    }, []);
+    return {
+        handleClose,
+        handleSelection,
+    };
+}
+function handleMultiSelect(selectCallback, selected, selection) {
+    if (selected.some(s => s.id === selection.id)) {
+        selectCallback(selected.filter(s => s.id !== selection.id));
+    }
+    else {
+        selectCallback([...selected, selection]);
+    }
+}
+
+function useCombobox(selected, onSelect, options, onClose, multiSelect, onSearch, debounceTime = 300) {
+    const wrapperRef = useRef(null);
+    const shouldScroll = useRef(false);
+    const [open, setOpen] = useState(false);
+    const [searchValue, setSearchValue] = useState("");
+    const searchCallback = useCallback(debounce((value) => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value), debounceTime), [onSearch, debounceTime]);
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose, onSearch);
+    const internalFilteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
+    return {
+        wrapperRef,
+        searchValue,
+        setSearchValue,
+        open,
+        setOpen,
+        selectedOptions: selected,
+        selectedStateSetter: onSelect,
+        shouldScroll,
+        handleClose,
+        handleSelection,
+        internalFilteredOptions,
+        handleSearchChange: onSearch ? searchCallback : noop,
+    };
+}
+
+const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox must have exactly one Trigger element";
+function useComboboxValidation(children) {
+    const optionElements = getCompoundComponents(ComboboxOption, children);
+    const actionElements = getCompoundComponents(ComboboxAction, children);
+    const activatorElements = getCompoundComponents(ComboboxActivator, children);
+    const shouldThrowTriggerError = isInvalid(activatorElements);
+    useAssert_2(shouldThrowTriggerError, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
+    return {
+        optionElements,
+        triggerElement: activatorElements[0],
+        actionElements,
+    };
+}
+function isInvalid(activators) {
+    return activators.length > 1 ? true : false;
+}
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+function getCompoundComponents(type, children) {
+    const childrenArray = Children.toArray(children);
+    const elements = childrenArray.filter((child) => isValidElement(child) && child.type === type);
+    return elements;
+}
+
+function Combobox(props) {
+    const { optionElements, triggerElement, actionElements } = useComboboxValidation(props.children);
+    const options = useMemo(() => (optionElements === null || optionElements === void 0 ? void 0 : optionElements.map(option => ({
+        id: option.props.id,
+        label: option.props.label,
+        prefix: option.props.prefix,
+    }))) || [], [optionElements]);
+    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, 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, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll, searchValue: searchValue },
+        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, setOpen: setOpen, options: props.onSearch ? options : internalFilteredOptions, loading: props.loading, handleSearchChange: handleSearchChange, onLoadMore: props.onLoadMore }))));
+}
+Combobox.Activator = ComboboxActivator;
+Combobox.Action = ComboboxAction;
+Combobox.Option = ComboboxOption;
+
+export { Combobox as C };

package/dist/ComboboxAction-CDXUQcsS.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { T as Typography } from './Typography-DBA8fJ4I.js';
+import { a as ComboboxContext } from './ComboboxProvider-BpcqvBBD.js';
+
+var styles = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
+
+function ComboboxAction(props) {
+    const { searchValue } = useContext(ComboboxContext);
+    if (props.visible) {
+        const isVisible = typeof props.visible === "function" && !props.visible({ searchValue });
+        if (isVisible || !props.visible) {
+            return null;
+        }
+    }
+    const options = { searchValue };
+    const computedLabel = typeof props.label === "string" ? props.label : props.label(options);
+    return (React.createElement("div", { className: styles.actionContainer },
+        React.createElement("button", { className: styles.actionButton, onClick: e => props.onClick(e, options), type: "button" },
+            React.createElement(Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, computedLabel))));
+}
+
+export { ComboboxAction as C };

package/dist/ComboboxAction-Ci7RkWIs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-CBz3Bwzs.js');
+var ComboboxProvider = require('./ComboboxProvider-B1d2SG67.js');
+
+var styles = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
+
+function ComboboxAction(props) {
+    const { searchValue } = React.useContext(ComboboxProvider.ComboboxContext);
+    if (props.visible) {
+        const isVisible = typeof props.visible === "function" && !props.visible({ searchValue });
+        if (isVisible || !props.visible) {
+            return null;
+        }
+    }
+    const options = { searchValue };
+    const computedLabel = typeof props.label === "string" ? props.label : props.label(options);
+    return (React.createElement("div", { className: styles.actionContainer },
+        React.createElement("button", { className: styles.actionButton, onClick: e => props.onClick(e, options), type: "button" },
+            React.createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, computedLabel))));
+}
+
+exports.ComboboxAction = ComboboxAction;

package/dist/ComboboxActivator-DC7UbnAU.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { B as Button } from './Button-CKxjsn8f.js';
+import { C as Chip } from './Chip-D5t8gDBN.js';
+import './tslib.es6-BJzo8cuE.js';
+import '@jobber/design';
+import { a as ComboboxContext } from './ComboboxProvider-BpcqvBBD.js';
+
+function ComboboxActivator(props) {
+    const { handleClose, open, setOpen } = React.useContext(ComboboxContext);
+    if (props.children.type === Button || props.children.type === Chip) {
+        return React.cloneElement(props.children, {
+            role: "combobox",
+            onClick: () => {
+                if (open) {
+                    handleClose();
+                }
+                else {
+                    setOpen(true);
+                }
+            },
+        });
+    }
+    return props.children;
+}
+
+export { ComboboxActivator as C };