@jobber/components 4.66.0 → 4.66.1-fix-hide-h.6

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

@@ -0,0 +1,34 @@
+'use strict';
+
+var ComboboxContent = require('../../../ComboboxContent-BWHLiyL9.js');
+require('react');
+require('classnames');
+require('react-dom');
+require('../../../ComboboxContentSearch-noFYGH66.js');
+require('../../../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+require('../../../ComboboxContentList-BYbeCxp2.js');
+require('../../../Text-CuGgzpie.js');
+require('../../../Typography-Dcec2MjG.js');
+require('../../../Glimmer-ZDIXl8XO.js');
+require('../../../tslib.es6-6AwvlbWV.js');
+require('../../../Content-DQHuNmbK.js');
+require('../../../Spinner-b5Q8KXRQ.js');
+require('../../../AnimatedPresence-_p8QyR9z.js');
+require('framer-motion');
+require('../../../ComboboxOption-BY-tUk0s.js');
+require('../../../Flex-Xe7j4ihO.js');
+require('../../../ComboboxProvider-CfnemK-l.js');
+require('../../../ComboboxLoadMore-CvkW-I1H.js');
+require('../../../useInView-BC7a7D4f.js');
+require('../../../ComboboxContentHeader-CtZwAMyJ.js');
+require('../../../Button-CvQJyw1M.js');
+require('react-router-dom');
+require('../../../useRefocusOnActivator-DbDY65I1.js');
+require('../../../useFocusTrap-CH2wydSN.js');
+require('react-popper');
+require('../../../useOnKeyDown-D87huTBK.js');
+
+
+
+exports.ComboboxContent = ComboboxContent.ComboboxContent;

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

@@ -0,0 +1,28 @@
+export { C as ComboboxContent } from '../../../ComboboxContent-CKlthhjK.js';
+import 'react';
+import 'classnames';
+import 'react-dom';
+import '../../../ComboboxContentSearch-Bhmt-tVj.js';
+import '../../../Icon-GaU33tZU.js';
+import '@jobber/design';
+import '../../../ComboboxContentList-aU8fbxsp.js';
+import '../../../Text-C3-8gHkD.js';
+import '../../../Typography-BD0mo9T9.js';
+import '../../../Glimmer-DJ9psf2S.js';
+import '../../../tslib.es6-Bu_PBg9i.js';
+import '../../../Content-D7e26CKa.js';
+import '../../../Spinner-Bg1QOlTK.js';
+import '../../../AnimatedPresence-DsD8wMiB.js';
+import 'framer-motion';
+import '../../../ComboboxOption-CX-Z2eLn.js';
+import '../../../Flex-DteCYe_w.js';
+import '../../../ComboboxProvider-BKMfpEBY.js';
+import '../../../ComboboxLoadMore-BRTLjXUS.js';
+import '../../../useInView-BgkV4xmN.js';
+import '../../../ComboboxContentHeader-BAj0VyGa.js';
+import '../../../Button-DjFrVgPj.js';
+import 'react-router-dom';
+import '../../../useRefocusOnActivator-vy4E8omX.js';
+import '../../../useFocusTrap-F2c5ctH_.js';
+import 'react-popper';
+import '../../../useOnKeyDown-BJB7_guO.js';

package/dist/Combobox/components/ComboboxOption/ComboboxOption.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 export interface ComboboxOptionProps {
     readonly id: string | number;
     readonly label: string;
+    readonly prefix?: React.ReactNode;
 }
 export declare function ComboboxOption(props: ComboboxOptionProps): JSX.Element;

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

@@ -0,0 +1,14 @@
+'use strict';
+
+var ComboboxOption = require('../../../ComboboxOption-BY-tUk0s.js');
+require('react');
+require('classnames');
+require('../../../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+require('../../../Flex-Xe7j4ihO.js');
+require('../../../ComboboxProvider-CfnemK-l.js');
+require('../../../tslib.es6-6AwvlbWV.js');
+
+
+
+exports.ComboboxOption = ComboboxOption.ComboboxOption;

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

@@ -0,0 +1,8 @@
+export { C as ComboboxOption } from '../../../ComboboxOption-CX-Z2eLn.js';
+import 'react';
+import 'classnames';
+import '../../../Icon-GaU33tZU.js';
+import '@jobber/design';
+import '../../../Flex-DteCYe_w.js';
+import '../../../ComboboxProvider-BKMfpEBY.js';
+import '../../../tslib.es6-Bu_PBg9i.js';

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var ComboboxTrigger = require('../../../ComboboxTrigger-DgObs0vq.js');
+require('react');
+require('../../../Chip-DiIMUiij.js');
+require('classnames');
+require('../../../useInView-BC7a7D4f.js');
+require('../../../Avatar-CRADit7s.js');
+require('color');
+require('../../../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+require('../../../useChildComponent-D562aXq4.js');
+require('../../../Typography-Dcec2MjG.js');
+require('../../../Tooltip-mp-wmNRd.js');
+require('react-dom');
+require('framer-motion');
+require('../../../useSafeLayoutEffect-DHIY4lnV.js');
+require('../../../useIsMounted-sXqZBlpo.js');
+require('react-popper');
+require('../../../tslib.es6-6AwvlbWV.js');
+require('../../../ComboboxProvider-CfnemK-l.js');
+
+
+
+exports.ComboboxTrigger = ComboboxTrigger.ComboboxTrigger;

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

@@ -0,0 +1,19 @@
+export { C as ComboboxTrigger } from '../../../ComboboxTrigger-EPtw6WW1.js';
+import 'react';
+import '../../../Chip-sEzGnAdo.js';
+import 'classnames';
+import '../../../useInView-BgkV4xmN.js';
+import '../../../Avatar-kAXMTS3o.js';
+import 'color';
+import '../../../Icon-GaU33tZU.js';
+import '@jobber/design';
+import '../../../useChildComponent-CuuLz2Q6.js';
+import '../../../Typography-BD0mo9T9.js';
+import '../../../Tooltip-C-wkLpWe.js';
+import 'react-dom';
+import 'framer-motion';
+import '../../../useSafeLayoutEffect-tr9DHxlf.js';
+import '../../../useIsMounted-JfVXqbjM.js';
+import 'react-popper';
+import '../../../tslib.es6-Bu_PBg9i.js';
+import '../../../ComboboxProvider-BKMfpEBY.js';

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

@@ -10,6 +10,8 @@ type UseComboboxReturn = {
     selectedOptions: ComboboxOption[];
     selectedStateSetter: (selection: ComboboxOption[]) => void;
     shouldScroll: MutableRefObject<boolean>;
+    internalFilteredOptions: ComboboxOption[];
+    handleSearchChange: (value: string) => void;
 } & UseMakeComboboxHandlersReturn;
-export declare function useCombobox(selected: ComboboxOption[], onSelect: (selection: ComboboxOption[]) => void, onClose?: () => void, multiSelect?: boolean): UseComboboxReturn;
+export declare function useCombobox(selected: ComboboxOption[], onSelect: (selection: ComboboxOption[]) => void, options: ComboboxOption[], onClose?: () => void, multiSelect?: boolean, onSearch?: (searchValue: string) => void, debounceTime?: number): UseComboboxReturn;
 export {};

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

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import { ComboboxOption } from "../Combobox.types";
 interface useComboboxContent {
-    filteredOptions: ComboboxOption[];
     optionsListRef: React.RefObject<HTMLUListElement>;
 }
-export declare function useComboboxContent(options: ComboboxOption[], open: boolean, selected: ComboboxOption[], searchValue: string): useComboboxContent;
+export declare function useComboboxContent(open: boolean, selected: ComboboxOption[]): useComboboxContent;
 export {};

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

@@ -4,4 +4,4 @@ export interface UseMakeComboboxHandlersReturn {
     handleClose: () => void;
     handleSelection: (selection: ComboboxOption) => void;
 }
-export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void): UseMakeComboboxHandlersReturn;
+export declare function useMakeComboboxHandlers(setOpen: (open: boolean) => void, setSearchValue: (searchValue: string) => void, selectedOptions: ComboboxOption[], shouldScroll: React.MutableRefObject<boolean>, selectedStateSetter: (selected: ComboboxOption[]) => void, multiSelect?: boolean, onClose?: () => void, onSearch?: (searchValue: string) => void): UseMakeComboboxHandlersReturn;

package/dist/Combobox/index.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var Combobox = require('../Combobox-CbS1_GBQ.js');
+var ComboboxProvider = require('../ComboboxProvider-CfnemK-l.js');
+require('react');
+require('../ComboboxContent-BWHLiyL9.js');
+require('classnames');
+require('react-dom');
+require('../ComboboxContentSearch-noFYGH66.js');
+require('../Icon-fa-Ii8qc.js');
+require('@jobber/design');
+require('../ComboboxContentList-BYbeCxp2.js');
+require('../Text-CuGgzpie.js');
+require('../Typography-Dcec2MjG.js');
+require('../Glimmer-ZDIXl8XO.js');
+require('../tslib.es6-6AwvlbWV.js');
+require('../Content-DQHuNmbK.js');
+require('../Spinner-b5Q8KXRQ.js');
+require('../AnimatedPresence-_p8QyR9z.js');
+require('framer-motion');
+require('../ComboboxOption-BY-tUk0s.js');
+require('../Flex-Xe7j4ihO.js');
+require('../ComboboxLoadMore-CvkW-I1H.js');
+require('../useInView-BC7a7D4f.js');
+require('../ComboboxContentHeader-CtZwAMyJ.js');
+require('../Button-CvQJyw1M.js');
+require('react-router-dom');
+require('../useRefocusOnActivator-DbDY65I1.js');
+require('../useFocusTrap-CH2wydSN.js');
+require('react-popper');
+require('../useOnKeyDown-D87huTBK.js');
+require('../ComboboxAction-DEhgOzYs.js');
+require('../ComboboxTrigger-DgObs0vq.js');
+require('../Chip-DiIMUiij.js');
+require('../Avatar-CRADit7s.js');
+require('color');
+require('../useChildComponent-D562aXq4.js');
+require('../Tooltip-mp-wmNRd.js');
+require('../useSafeLayoutEffect-DHIY4lnV.js');
+require('../useIsMounted-sXqZBlpo.js');
+require('../debounce-pg3VOrFc.js');
+require('../_commonjsHelpers-BZy5LDD5.js');
+require('../isObjectLike-D1IeOnmx.js');
+require('../isSymbol-Bbb_qQGw.js');
+require('../noop-qmzLZ3Nj.js');
+require('../ComboboxActivator-BQxh2GkW.js');
+require('../useAssert-ChYQeQ8b.js');
+require('../_polyfill-node.process-CrU1R5tX.js');
+
+
+
+exports.Combobox = Combobox.Combobox;
+exports.ComboboxContextProvider = ComboboxProvider.ComboboxContextProvider;

package/dist/Combobox/index.mjs

@@ -0,0 +1,46 @@
+export { C as Combobox } from '../Combobox-CWHx4-n_.js';
+export { C as ComboboxContextProvider } from '../ComboboxProvider-BKMfpEBY.js';
+import 'react';
+import '../ComboboxContent-CKlthhjK.js';
+import 'classnames';
+import 'react-dom';
+import '../ComboboxContentSearch-Bhmt-tVj.js';
+import '../Icon-GaU33tZU.js';
+import '@jobber/design';
+import '../ComboboxContentList-aU8fbxsp.js';
+import '../Text-C3-8gHkD.js';
+import '../Typography-BD0mo9T9.js';
+import '../Glimmer-DJ9psf2S.js';
+import '../tslib.es6-Bu_PBg9i.js';
+import '../Content-D7e26CKa.js';
+import '../Spinner-Bg1QOlTK.js';
+import '../AnimatedPresence-DsD8wMiB.js';
+import 'framer-motion';
+import '../ComboboxOption-CX-Z2eLn.js';
+import '../Flex-DteCYe_w.js';
+import '../ComboboxLoadMore-BRTLjXUS.js';
+import '../useInView-BgkV4xmN.js';
+import '../ComboboxContentHeader-BAj0VyGa.js';
+import '../Button-DjFrVgPj.js';
+import 'react-router-dom';
+import '../useRefocusOnActivator-vy4E8omX.js';
+import '../useFocusTrap-F2c5ctH_.js';
+import 'react-popper';
+import '../useOnKeyDown-BJB7_guO.js';
+import '../ComboboxAction-CRlYsxnV.js';
+import '../ComboboxTrigger-EPtw6WW1.js';
+import '../Chip-sEzGnAdo.js';
+import '../Avatar-kAXMTS3o.js';
+import 'color';
+import '../useChildComponent-CuuLz2Q6.js';
+import '../Tooltip-C-wkLpWe.js';
+import '../useSafeLayoutEffect-tr9DHxlf.js';
+import '../useIsMounted-JfVXqbjM.js';
+import '../debounce-BBtff9-S.js';
+import '../_commonjsHelpers-Dy2IPW0w.js';
+import '../isObjectLike-CcKIYba1.js';
+import '../isSymbol-BmwHOL7f.js';
+import '../noop-DY7XyR6k.js';
+import '../ComboboxActivator-DP-DDMTP.js';
+import '../useAssert-DPy4bthp.js';
+import '../_polyfill-node.process-DcZ1HNOw.js';

package/dist/Combobox-CWHx4-n_.js

@@ -0,0 +1,117 @@
+import React, { useCallback, useRef, useState, Children, isValidElement, useMemo } from 'react';
+import { C as ComboboxContent } from './ComboboxContent-CKlthhjK.js';
+import { C as ComboboxAction } from './ComboboxAction-CRlYsxnV.js';
+import { C as ComboboxContextProvider } from './ComboboxProvider-BKMfpEBY.js';
+import { C as ComboboxTrigger } from './ComboboxTrigger-EPtw6WW1.js';
+import { C as ComboboxOption } from './ComboboxOption-CX-Z2eLn.js';
+import { d as debounce } from './debounce-BBtff9-S.js';
+import { n as noop } from './noop-DY7XyR6k.js';
+import { C as ComboboxActivator } from './ComboboxActivator-DP-DDMTP.js';
+import { u as useAssert_2 } from './useAssert-DPy4bthp.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/Combobox-CbS1_GBQ.js

@@ -0,0 +1,119 @@
+'use strict';
+
+var React = require('react');
+var ComboboxContent = require('./ComboboxContent-BWHLiyL9.js');
+var ComboboxAction = require('./ComboboxAction-DEhgOzYs.js');
+var ComboboxProvider = require('./ComboboxProvider-CfnemK-l.js');
+var ComboboxTrigger = require('./ComboboxTrigger-DgObs0vq.js');
+var ComboboxOption = require('./ComboboxOption-BY-tUk0s.js');
+var debounce = require('./debounce-pg3VOrFc.js');
+var noop = require('./noop-qmzLZ3Nj.js');
+var ComboboxActivator = require('./ComboboxActivator-BQxh2GkW.js');
+var useAssert = require('./useAssert-ChYQeQ8b.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/ComboboxAction-CRlYsxnV.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { T as Typography } from './Typography-BD0mo9T9.js';
+import { a as ComboboxContext } from './ComboboxProvider-BKMfpEBY.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-DEhgOzYs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-Dcec2MjG.js');
+var ComboboxProvider = require('./ComboboxProvider-CfnemK-l.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-BQxh2GkW.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var Button = require('./Button-CvQJyw1M.js');
+var Chip = require('./Chip-DiIMUiij.js');
+require('./tslib.es6-6AwvlbWV.js');
+require('@jobber/design');
+var ComboboxProvider = require('./ComboboxProvider-CfnemK-l.js');
+
+function ComboboxActivator(props) {
+    const { handleClose, open, setOpen } = React.useContext(ComboboxProvider.ComboboxContext);
+    if (props.children.type === Button.Button || props.children.type === Chip.Chip) {
+        return React.cloneElement(props.children, {
+            role: "combobox",
+            onClick: () => {
+                if (open) {
+                    handleClose();
+                }
+                else {
+                    setOpen(true);
+                }
+            },
+        });
+    }
+    return props.children;
+}
+
+exports.ComboboxActivator = ComboboxActivator;

package/dist/ComboboxActivator-DP-DDMTP.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { B as Button } from './Button-DjFrVgPj.js';
+import { C as Chip } from './Chip-sEzGnAdo.js';
+import './tslib.es6-Bu_PBg9i.js';
+import '@jobber/design';
+import { a as ComboboxContext } from './ComboboxProvider-BKMfpEBY.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 };