@jobber/components 4.58.5 → 4.59.0

package/dist/Combobox/Combobox.d.ts

@@ -1,16 +1,11 @@
 /// <reference types="react" />
 import { ComboboxProps } from "./Combobox.types";
-import { ComboboxContent } from "./components/ComboboxContent";
 import { ComboboxAction } from "./components/ComboboxAction";
-import { ComboboxTriggerButton, ComboboxTriggerChip } from "./components/ComboboxTrigger";
-import { ComboboxOption } from "./components/ComboboxOption";
+import { ComboboxOption as ComboboxOptionComponent } from "./components/ComboboxOption/ComboboxOption";
 import { ComboboxActivator } from "./components/ComboboxActivator";
-export declare function Combobox({ multiSelect, label, selected, ...props }: ComboboxProps): JSX.Element;
+export declare function Combobox(props: ComboboxProps): JSX.Element;
 export declare namespace Combobox {
-    var TriggerButton: typeof ComboboxTriggerButton;
-    var TriggerChip: typeof ComboboxTriggerChip;
     var Activator: typeof ComboboxActivator;
-    var Content: typeof ComboboxContent;
     var Action: typeof ComboboxAction;
-    var Option: typeof ComboboxOption;
+    var Option: typeof ComboboxOptionComponent;
 }

package/dist/Combobox/Combobox.types.d.ts

@@ -1,8 +1,8 @@
 import { Dispatch, ReactElement, SetStateAction } from "react";
-import { XOR } from "ts-xor";
-import { ButtonProps } from "../Button";
-export interface ComboboxProps extends Partial<Omit<ComboboxContentBaseProps, "options">> {
-    readonly children: ReactElement | ReactElement[];
+type ComboboxFragment = Iterable<ComboboxNode>;
+type ComboboxNode = ReactElement | ComboboxFragment;
+export interface ComboboxProps {
+    readonly children?: ComboboxNode;
     /**
      * When `true`, `Combobox` will allow for multiple selections
      *
@@ -10,52 +10,48 @@ export interface ComboboxProps extends Partial<Omit<ComboboxContentBaseProps, "o
      */
     readonly multiSelect?: boolean;
     /**
-     * The label for the Combobox trigger
-     */
-    readonly label?: string;
-    readonly onSelect?: (selection: ComboboxOption[]) => void;
-    readonly onClose?: (selection: ComboboxOption[]) => void;
-}
-export interface ComboboxTriggerProps {
-    /**
-     * The label text of the trigger.
+     * Placeholder text to display in the search input. Defaults to "Search".
      */
-    readonly label: string;
-}
-export interface ComboboxTriggerButtonProps extends ComboboxTriggerProps, Pick<ButtonProps, "type" | "variation" | "icon" | "iconOnRight"> {
-}
-export type ComboboxTriggerChipProps = ComboboxTriggerProps;
-export interface ComboboxOption {
+    readonly searchPlaceholder?: string;
     /**
-     * A unique identifier for the option.
+     * The selected options of the Combobox.
      */
-    id: string | number;
+    readonly selected: ComboboxOption[];
     /**
-     * The value to be visually displayed in the Combobox options list.
+     * The encapsulating noun for the content of the combobox. Used
+     * in the empty state, and search placeholder. Should be pluralized.
      */
-    label: string;
-}
-interface ComboboxCloseProps {
+    readonly subjectNoun?: string;
     /**
      * Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument.
      */
     readonly onSelect: (selection: ComboboxOption[]) => void;
-}
-interface ComboboxSelectProps {
     /**
-     * Callback function invoked upon the Combobox menu closing. Provides the selected option(s) as an argument.
+     * Callback function invoked upon the Combobox menu closing.
+     */
+    readonly onClose?: () => void;
+    /**
+     * The Chip heading for the trigger
      */
-    readonly onClose: (selection: ComboboxOption[]) => void;
+    readonly label?: string;
+}
+export interface ComboboxActivatorProps {
+    readonly children: React.ReactElement;
+}
+export interface ComboboxTriggerProps extends Pick<ComboboxContentProps, "selected"> {
+    readonly label?: string;
 }
-interface ComboboxContentBaseProps {
+export interface ComboboxOption {
     /**
-     * List of selectable options to display.
+     * A unique identifier for the option.
      */
-    readonly options: ComboboxOption[];
+    id: string | number;
     /**
-     * Optional action button(s) to display at the bottom of the list.
+     * The value to be visually displayed in the Combobox options list.
      */
-    readonly children?: ReactElement | ReactElement[];
+    label: string;
+}
+export interface ComboboxContentProps {
     /**
      * Placeholder text to display in the search input. Defaults to "Search".
      */
@@ -69,8 +65,47 @@ interface ComboboxContentBaseProps {
      * in the empty state, and search placeholder. Should be pluralized.
      */
     readonly subjectNoun?: string;
+    /**
+     * Action elements to be displayed at the bottom of the list.
+     */
+    readonly actionElements?: ReactElement[];
+    /**
+     * State setter for the selected options.
+     */
+    readonly selectedStateSetter: (selection: ComboboxOption[]) => void;
+    /**
+     * Callback function to be called when an option is selected.
+     */
+    readonly handleSelection: (option: ComboboxOption) => void;
+    /**
+     * Are multiple selections permitted.
+     */
+    readonly multiselect?: boolean;
+    /**
+     * The current search term.
+     */
+    readonly searchValue: string;
+    /**
+     * Setter for the current search term.
+     */
+    readonly setSearchValue: Dispatch<SetStateAction<string>>;
+    /**
+     * Reference to the wrapping div element of all the Combobox pieces
+     */
+    readonly wrapperRef: React.RefObject<HTMLDivElement>;
+    /**
+     * Is the Combobox open
+     */
+    readonly open: boolean;
+    /**
+     * Setter for the open state of the Combobox.
+     */
+    readonly setOpen: (open: boolean) => void;
+    /**
+     * The full set of options for the Combobox in the shape of data, not elements.
+     */
+    readonly options: ComboboxOption[];
 }
-export type ComboboxContentProps = ComboboxContentBaseProps & XOR<ComboboxCloseProps, ComboboxSelectProps>;
 export interface ComboboxSearchProps {
     /**
      * The placeholder for the search input.
@@ -128,14 +163,6 @@ export interface ComboboxListProps {
      * A ref to the list element.
      */
     readonly optionsListRef: React.RefObject<HTMLUListElement>;
-    /**
-     * Setter for the first selected element, which is used to scroll the list to the first selected element on re-opening.
-     */
-    readonly setFirstSelectedElement: React.Dispatch<SetStateAction<HTMLElement | null>>;
-    /**
-     * The callback function to call when an option is selected.
-     */
-    readonly selectionHandler: (option: ComboboxOption) => void;
     /**
      * The current search term. Used in the no results message.
      */
@@ -143,7 +170,7 @@ export interface ComboboxListProps {
     /**
      * Determines if it is a single selection or multi selection Combobox.
      */
-    readonly multiselect: boolean;
+    readonly multiselect?: boolean;
     /**
      * The noun to be used in the empty state message.
      */

package/dist/Combobox/ComboboxProvider.d.ts

@@ -1,12 +1,20 @@
-import React, { RefObject } from "react";
+import React, { Dispatch, MutableRefObject, SetStateAction } from "react";
+import { ComboboxOption } from "./Combobox.types";
 export declare const ComboboxContext: React.Context<{
-    multiselect: boolean;
     open: boolean;
     setOpen: (open: boolean) => void;
-    wrapperRef: RefObject<HTMLDivElement>;
+    selected: ComboboxOption[];
+    selectionHandler: (option: ComboboxOption) => void;
+    handleClose: () => void;
+    shouldScroll: MutableRefObject<boolean>;
 }>;
 export interface ComboboxProviderProps {
     readonly children: React.ReactNode;
-    readonly multiselect?: boolean;
+    readonly selected: ComboboxOption[];
+    readonly selectionHandler: (option: ComboboxOption) => void;
+    readonly open: boolean;
+    readonly setOpen: Dispatch<SetStateAction<boolean>>;
+    readonly handleClose: () => void;
+    readonly shouldScroll: MutableRefObject<boolean>;
 }
 export declare function ComboboxContextProvider(props: ComboboxProviderProps): JSX.Element;

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

@@ -1,6 +1,3 @@
 import React from "react";
-interface ComboboxActivatorProps {
-    readonly children: React.ReactElement;
-}
+import { ComboboxActivatorProps } from "../../Combobox.types";
 export declare function ComboboxActivator(props: ComboboxActivatorProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export {};

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

@@ -1,2 +1,6 @@
-import { ComboboxOption as ComboboxOptionType } from "../../Combobox.types";
-export declare function ComboboxOption(_: ComboboxOptionType): null;
+/// <reference types="react" />
+export interface ComboboxOptionProps {
+    readonly id: string | number;
+    readonly label: string;
+}
+export declare function ComboboxOption(props: ComboboxOptionProps): JSX.Element;

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

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import { ComboboxContentProps } from "../../Combobox.types";
-interface ComboboxTriggerProps extends Pick<ComboboxContentProps, "selected"> {
-    readonly label: string;
-}
-export declare function ComboboxTrigger({ selected, ...props }: ComboboxTriggerProps): JSX.Element;
-export {};
+import { ComboboxTriggerProps } from "../../Combobox.types";
+export declare function ComboboxTrigger({ label, selected, }: ComboboxTriggerProps): JSX.Element;

package/dist/Combobox/components/ComboboxTrigger/index.d.ts

@@ -1,3 +1 @@
-export { ComboboxTriggerButton } from "./ComboboxTriggerButton/ComboboxTriggerButton";
-export { ComboboxTriggerChip } from "./ComboboxTriggerChip/ComboboxTriggerChip";
 export { ComboboxTrigger } from "./ComboboxTrigger";

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

@@ -0,0 +1,15 @@
+import React, { Dispatch, MutableRefObject } from "react";
+import { UseMakeComboboxHandlersReturn } from "./useMakeComboboxHandlers";
+import { ComboboxOption } from "../Combobox.types";
+type UseComboboxReturn = {
+    wrapperRef: React.RefObject<HTMLDivElement>;
+    searchValue: string;
+    setSearchValue: Dispatch<React.SetStateAction<string>>;
+    open: boolean;
+    setOpen: Dispatch<React.SetStateAction<boolean>>;
+    selectedOptions: ComboboxOption[];
+    selectedStateSetter: (selection: ComboboxOption[]) => void;
+    shouldScroll: MutableRefObject<boolean>;
+} & UseMakeComboboxHandlersReturn;
+export declare function useCombobox(selected: ComboboxOption[], onSelect: (selection: ComboboxOption[]) => void, onClose?: () => void, multiSelect?: boolean): UseComboboxReturn;
+export {};

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { ComboboxOption } from "../Combobox.types";
-export declare function useComboboxAccessibility(selectionCallback: (selection: ComboboxOption) => void, filteredOptions: ComboboxOption[], optionsListRef: React.RefObject<HTMLUListElement>, open: boolean, setOpen: (open: boolean) => void, wrapperRef: React.RefObject<HTMLDivElement>): {
+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;

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

@@ -1,13 +1,8 @@
 /// <reference types="react" />
 import { ComboboxOption } from "../Combobox.types";
 interface useComboboxContent {
-    searchValue: string;
-    setSearchValue: React.Dispatch<React.SetStateAction<string>>;
-    setFirstSelectedElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
     filteredOptions: ComboboxOption[];
     optionsListRef: React.RefObject<HTMLUListElement>;
-    selectedOptions: ComboboxOption[];
-    optionsSelectionHandler: (selected: ComboboxOption[]) => void;
 }
-export declare function useComboboxContent(options: ComboboxOption[], open: boolean, selected: ComboboxOption[], onClose: ((selection: ComboboxOption[]) => void) | undefined, onSelect: ((selection: ComboboxOption[]) => void) | undefined): useComboboxContent;
+export declare function useComboboxContent(options: ComboboxOption[], open: boolean, selected: ComboboxOption[], searchValue: string): useComboboxContent;
 export {};

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

@@ -1,10 +1,12 @@
-import { ReactElement, ReactNode } from "react";
-import { ComboboxActionProps, ComboboxOption as ComboboxOptionProps } from "../Combobox.types";
-export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger or Activator element";
-export declare const COMBOBOX_OPTION_AND_CONTENT_EXISTS_ERROR = "Combobox prefers using Combobox.Option and Combobox.Action as the direct child of Combobox instead of Combobox.Content";
-export declare function useComboboxValidation(children: ReactNode): {
-    triggerElement: ReactNode;
-    contentElement: ReactNode | undefined;
-    optionElements: ReactElement<ComboboxOptionProps>[];
-    actionElements: ReactElement<ComboboxActionProps>[];
+import { ReactElement } from "react";
+import { ComboboxProps } from "../Combobox.types";
+export declare const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox must have exactly one Trigger element";
+export declare function useComboboxValidation(children?: ComboboxProps["children"]): {
+    triggerElement?: ReactElement;
+    optionElements?: ReactElement[];
+    actionElements?: ReactElement[];
 };
+/**
+ * Return all instances child component that matches the `type` provided
+ */
+export declare function getCompoundComponents<T>(type: ReactElement<T>["type"], children?: ComboboxProps["children"]): ReactElement<T>[];

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { ComboboxOption } from "../Combobox.types";
+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;

package/dist/Combobox/index.js

@@ -2,7 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-5b8768b7.js');
 var React = require('react');
 var classnames = require('classnames');
 var ReactDOM = require('react-dom');
@@ -16,8 +15,8 @@ var useFocusTrap = require('@jobber/hooks/useFocusTrap');
 var reactPopper = require('react-popper');
 var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
 var Chip = require('../Chip-f8b8fd89.js');
-var useAssert = require('@jobber/hooks/useAssert');
 require('@jobber/design');
+var useAssert = require('@jobber/hooks/useAssert');
 require('react-router-dom');
 require('@jobber/hooks/useInView');
 require('../Avatar-1aa30ee1.js');
@@ -63,24 +62,40 @@ function ComboboxContentSearch(props) {
     }
 }
 
-var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._2LVD-wjMRfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._2LVD-wjMRfQ-:hover,\n._2LVD-wjMRfQ-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n._2LVD-wjMRfQ-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
-var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","option":"_2LVD-wjMRfQ-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-"};
+var css_248z$4 = ".SgMzjOcdE-E- {\n  position: relative;\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n}\n\n.TwoTCjgcssc- {\n  display: -ms-flexbox;\n  display: flex;\n  max-height: calc((16px / 2) * 33.33);\n  max-height: calc(calc(16px / 2) * 33.33);\n  max-height: calc(var(--space-small) * 33.33);\n  margin: 0;\n  padding: 0;\n  overflow: scroll;\n  list-style: none;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n\n._8T5M7MGwCRE-,\n._4y5NXkNeIQM- {\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n}\n\n.SgMzjOcdE-E-::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  right: 0;\n  bottom: calc(16px / 2);\n  bottom: var(--space-small);\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    180deg,\n    rgba(255, 255, 255, 0) 0%,\n    rgb(255, 255, 255) 100%\n  );\n}\n\n.SgMzjOcdE-E-::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: calc(16px / 2);\n  top: var(--space-small);\n  right: 0;\n  left: 0;\n  height: calc(16px * 1);\n  height: var(--space-base);\n  background: linear-gradient(\n    to bottom,\n    rgba(255, 255, 255, 1),\n    rgba(255, 255, 255, 0)\n  );\n}\n";
+var styles$4 = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-"};
 styleInject_es.styleInject(css_248z$4);
 
+var css_248z$3 = "._5QdRGmaNHvc- {\n  display: -ms-flexbox;\n  display: flex;\n  min-height: calc((calc(16px * 3) - calc(16px / 4)));\n  min-height: calc((var(--space-largest) - var(--space-smaller)));\n  box-sizing: border-box;\n  margin: 0 calc(16px / 2);\n  margin: 0 var(--space-small);\n  padding: calc(16px / 2);\n  padding: var(--space-small);\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  color: rgb(1, 41, 57);\n  color: var(--color-heading);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n._5QdRGmaNHvc-:hover,\n._5QdRGmaNHvc-:focus {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n._5QdRGmaNHvc-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n";
+var styles$3 = {"option":"_5QdRGmaNHvc-"};
+styleInject_es.styleInject(css_248z$3);
+
+const ComboboxContext = React__default["default"].createContext({});
+function ComboboxContextProvider(props) {
+    return (React__default["default"].createElement(ComboboxContext.Provider, { value: {
+            open: props.open,
+            setOpen: props.setOpen,
+            selected: props.selected,
+            selectionHandler: props.selectionHandler,
+            handleClose: props.handleClose,
+            shouldScroll: props.shouldScroll,
+        } }, props.children));
+}
+
+function ComboboxOption(props) {
+    const { selected, selectionHandler } = React.useContext(ComboboxContext);
+    const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
+    return (React__default["default"].createElement("li", { key: props.id, tabIndex: -1, "data-selected": isSelected, role: "option", "aria-selected": isSelected, onClick: () => selectionHandler &&
+            selectionHandler({ id: props.id, label: props.label }), className: classnames__default["default"](styles$3.option) },
+        props.label,
+        isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
+}
+
 function ComboboxContentList(props) {
-    let hasSeenFirstSelected = false;
     return (React__default["default"].createElement("div", { className: styles$4.container },
         !props.showEmptyState && props.options.length > 0 && (React__default["default"].createElement("ul", { className: styles$4.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef }, !props.showEmptyState &&
             props.options.map(option => {
-                const isSelected = props.selected.some(selection => selection.id.toString() === option.id.toString());
-                return (React__default["default"].createElement("li", { ref: listItem => {
-                        if (isSelected && !hasSeenFirstSelected) {
-                            props.setFirstSelectedElement(listItem);
-                            hasSeenFirstSelected = true;
-                        }
-                    }, key: option.id, tabIndex: -1, role: "option", "aria-selected": isSelected, onClick: () => props.selectionHandler(option), className: classnames__default["default"](styles$4.option) },
-                    option.label,
-                    isSelected && React__default["default"].createElement(Icon.Icon, { name: "checkmark", color: "blue" })));
+                return (React__default["default"].createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label }));
             }))),
         !props.showEmptyState && props.options.length === 0 && (React__default["default"].createElement("div", { className: styles$4.filterMessage },
             React__default["default"].createElement(Text.Text, { variation: "subdued" },
@@ -96,9 +111,9 @@ function getZeroIndexStateText(subjectNoun) {
     return "No options yet";
 }
 
-var css_248z$3 = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1) calc(16px / 2) 0 calc(16px * 1);\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
-var styles$3 = {"header":"Q-mwo-g5Fi8-"};
-styleInject_es.styleInject(css_248z$3);
+var css_248z$2 = ".Q-mwo-g5Fi8- {\n  display: -ms-flexbox;\n  display: flex;\n  padding: calc(16px * 1) calc(16px / 2) 0 calc(16px * 1);\n  padding: var(--space-base) var(--space-small) 0 var(--space-base);\n  -ms-flex-pack: justify;\n      justify-content: space-between;\n  gap: calc(16px / 4);\n  gap: var(--space-smaller);\n}\n";
+var styles$2 = {"header":"Q-mwo-g5Fi8-"};
+styleInject_es.styleInject(css_248z$2);
 
 function ComboboxContentHeader(props) {
     const hasSelected = props.selectedCount > 0;
@@ -106,7 +121,7 @@ function ComboboxContentHeader(props) {
     const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
     const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
     const showAction = hasSelected || props.hasOptionsVisible;
-    return (React__default["default"].createElement("div", { className: styles$3.header, "data-testid": "ATL-Combobox-Header" },
+    return (React__default["default"].createElement("div", { className: styles$2.header, "data-testid": "ATL-Combobox-Header" },
         React__default["default"].createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
         showAction && (React__default["default"].createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
 }
@@ -120,58 +135,38 @@ function getLabel(hasSelected, count, subjectNoun) {
     return "Select";
 }
 
-var css_248z$2 = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: transparent;\n}\n";
-var styles$2 = {"overlay":"W8qMZnORYxI-"};
-styleInject_es.styleInject(css_248z$2);
-
-const ComboboxContext = React__default["default"].createContext({});
-function ComboboxContextProvider(props) {
-    const multiselect = props.multiselect || false;
-    const [open, setOpen] = React.useState(false);
-    const wrapperRef = React.useRef(null);
-    return (React__default["default"].createElement(ComboboxContext.Provider, { value: { multiselect, open, setOpen, wrapperRef } },
-        React__default["default"].createElement("div", { ref: wrapperRef },
-            open && (React__default["default"].createElement("div", { className: styles$2.overlay, onClick: () => setOpen(false), "data-testid": "ATL-Combobox-Overlay" })),
-            props.children)));
-}
-
-function useComboboxContent(options, open, selected, onClose, onSelect) {
-    const [searchValue, setSearchValue] = React.useState("");
-    const [firstSelectedElement, setFirstSelectedElement] = React.useState(null);
+function useComboboxContent(options, open, selected, searchValue) {
+    const { shouldScroll } = React.useContext(ComboboxContext);
     const optionsListRef = React.useRef(null);
     const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()));
-    const [internalSelected, setInternalSelected] = React.useState(selected);
-    const selectedOptions = onClose ? internalSelected : selected;
-    const optionsSelectionHandler = onSelect ? onSelect : setInternalSelected;
-    React.useEffect(() => {
-        if (!open && onClose) {
-            onClose(selectedOptions);
-        }
-    }, [open, onClose, selectedOptions]);
     React.useEffect(() => {
-        if (open && firstSelectedElement) {
-            firstSelectedElement === null || firstSelectedElement === void 0 ? void 0 : firstSelectedElement.scrollIntoView({
-                block: "nearest",
+        var _a;
+        if (open && shouldScroll.current && optionsListRef.current) {
+            const firstSelected = Array.from((_a = optionsListRef === null || optionsListRef === void 0 ? void 0 : optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children).find(child => {
+                if (child instanceof HTMLElement) {
+                    return child.dataset.selected === "true";
+                }
             });
+            scrollToFirstSelected(firstSelected, shouldScroll);
         }
-    }, [open, firstSelectedElement]);
-    React.useEffect(() => {
-        if (selectedOptions.length === 0) {
-            setFirstSelectedElement(null);
-        }
-    }, [selectedOptions]);
+    }, [open, selected]);
     return {
-        searchValue,
-        setSearchValue,
-        setFirstSelectedElement,
         filteredOptions,
         optionsListRef,
-        selectedOptions,
-        optionsSelectionHandler,
     };
 }
+function scrollToFirstSelected(firstSelected, shouldScroll) {
+    if (firstSelected) {
+        firstSelected.scrollIntoView({
+            block: "nearest",
+        });
+        shouldScroll.current = false;
+    }
+}
 
-function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, setOpen, wrapperRef) {
+// eslint-disable-next-line max-statements
+function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = React.useContext(ComboboxContext);
     const hasOptionsVisible = open && filteredOptions.length > 0;
     const focusedIndex = React.useRef(null);
     useRefocusOnActivator.useRefocusOnActivator(open);
@@ -202,7 +197,7 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
     }, [open, optionsListRef, filteredOptions]);
     useOnKeyDown.useOnKeyDown(() => {
         if (open) {
-            setOpen(false);
+            handleClose();
         }
     }, "Escape");
     function handleContentKeydown(event) {
@@ -248,43 +243,21 @@ function useComboboxAccessibility(selectionCallback, filteredOptions, optionsLis
 }
 
 function ComboboxContent(props) {
-    const { open, setOpen, wrapperRef, multiselect } = React__default["default"].useContext(ComboboxContext);
     const optionsExist = props.options.length > 0;
-    const { searchValue, setSearchValue, setFirstSelectedElement, filteredOptions, optionsListRef, selectedOptions, optionsSelectionHandler, } = useComboboxContent(props.options, open, props.selected, props.onClose, props.onSelect);
-    const { popperRef, popperStyles, attributes } = useComboboxAccessibility(handleSelection, filteredOptions, optionsListRef, open, setOpen, wrapperRef);
-    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$6.content, { [styles$6.hidden]: !open }), style: popperStyles.popper }, attributes.popper),
-        React__default["default"].createElement(ComboboxContentSearch, { open: open, placeholder: props.subjectNoun, searchValue: searchValue, setSearchValue: setSearchValue }),
-        multiselect && optionsExist && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: filteredOptions.length > 0, subjectNoun: props.subjectNoun, selectedCount: selectedOptions.length, onClearAll: () => {
-                optionsSelectionHandler([]);
+    const { filteredOptions, optionsListRef } = useComboboxContent(props.options, props.open, props.selected, props.searchValue);
+    const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, filteredOptions, optionsListRef, props.open, props.wrapperRef);
+    const template = (React__default["default"].createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames__default["default"](styles$6.content, { [styles$6.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+        React__default["default"].createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue }),
+        props.multiselect && optionsExist && (React__default["default"].createElement(ComboboxContentHeader, { hasOptionsVisible: filteredOptions.length > 0, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+                props.selectedStateSetter([]);
             }, onSelectAll: () => {
-                optionsSelectionHandler(filteredOptions);
+                props.selectedStateSetter(filteredOptions);
             } })),
-        React__default["default"].createElement(ComboboxContentList, { multiselect: multiselect, showEmptyState: !optionsExist, options: filteredOptions, selected: selectedOptions, optionsListRef: optionsListRef, setFirstSelectedElement: setFirstSelectedElement, selectionHandler: handleSelection, searchValue: searchValue, subjectNoun: props.subjectNoun }),
-        props.children && (React__default["default"].createElement("div", { className: styles$6.actions, role: "group" }, React__default["default"].Children.toArray(props.children).map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
+        React__default["default"].createElement(ComboboxContentList, { multiselect: props.multiselect, showEmptyState: !optionsExist, options: filteredOptions, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun }),
+        props.actionElements && (React__default["default"].createElement("div", { className: styles$6.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React__default["default"].createElement("div", { key: index, className: classnames__default["default"]({
                 [styles$6.actionPadding]: index === childrenArray.length - 1,
             }) }, child)))))));
     return ReactDOM__default["default"].createPortal(template, document.body);
-    function handleSelection(selection) {
-        if (multiselect) {
-            handleMultiSelect(optionsSelectionHandler, selectedOptions, selection);
-        }
-        else {
-            handleSingleSelect(optionsSelectionHandler, selection);
-        }
-    }
-    function handleSingleSelect(selectCallback, selection) {
-        selectCallback([selection]);
-        setSearchValue("");
-        setOpen(false);
-    }
-}
-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]);
-    }
 }
 
 var css_248z$1 = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 calc(16px / 2);\n  padding: 0 var(--space-small);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((calc(16px * 3) - calc(16px / 2)));\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: calc(16px / 2) 0;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: calc(16px / 4);\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all 200ms;\n  transition: all var(--timing-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.ncp0nKHQ7d8-:hover {\n  background-color: rgb(244, 244, 244);\n  background-color: var(--color-surface--background);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: calc(16px / 2);\n  margin-left: var(--space-small);\n}\n";
@@ -297,127 +270,137 @@ function ComboboxAction(props) {
             React__default["default"].createElement(Typography.Typography, { element: "span", size: "base", textColor: "green", fontWeight: "semiBold" }, props.label))));
 }
 
-function ComboboxTriggerButton(props) {
-    const { open, setOpen } = React__default["default"].useContext(ComboboxContext);
-    return (React__default["default"].createElement(Button.Button, { role: "combobox", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "ATL-Combobox-Content", "aria-autocomplete": "list", label: props.label, variation: props.variation, type: props.type, onClick: () => setOpen(!open), icon: props.icon, iconOnRight: props.iconOnRight }));
+function ComboboxTrigger({ label = "Select", selected, }) {
+    const { handleClose, open, setOpen } = React__default["default"].useContext(ComboboxContext);
+    const hasSelection = selected.length;
+    const selectedLabel = selected.map(option => option.label).join(", ");
+    return (React__default["default"].createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", heading: label, onClick: () => {
+            if (open) {
+                handleClose();
+            }
+            else {
+                setOpen(true);
+            }
+        }, role: "combobox" }, !hasSelection && (React__default["default"].createElement(Chip.Chip.Suffix, null,
+        React__default["default"].createElement(Icon.Icon, { name: "add", size: "small" })))));
 }
 
-var css_248z = ".NtYpU6bZMtM- {\n  display: -ms-inline-flexbox;\n  display: inline-flex;\n  padding: calc(16px / 2) calc(16px * 1);\n  padding: var(--space-small) var(--space-base);\n  border: calc(16px / 16) solid rgb(225, 225, 225);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: calc((16px / 4) * 5);\n  border-radius: calc(calc(16px / 4) * 5);\n  border-radius: calc(var(--radius-large) * 5);\n  font-size: calc((16px * 1) * 0.875);\n  font-size: calc(calc(16px * 1) * 0.875);\n  font-size: var(--typography--fontSize-base);\n  background-color: rgba(255, 255, 255, 1);\n  background-color: var(--color-surface);\n  gap: calc(16px / 2);\n  gap: var(--space-small);\n}\n\n.NtYpU6bZMtM-:focus {\n  box-shadow: 0px 0px calc(16px / 4) calc(16px / 8)\n    rgb(231, 213, 87);\n  box-shadow: var(--shadow-focus);\n}\n\n.ftceU-6iBO0- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-pack: center;\n      justify-content: center;\n  -ms-flex-align: center;\n      align-items: center;\n}\n";
-var styles = {"trigger":"NtYpU6bZMtM-","triggerIcon":"ftceU-6iBO0-"};
+var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 6;\n  z-index: var(--elevation-menu);\n  background-color: transparent;\n}\n\n._-0dkolvLF-Y- {\n  display: inline-block;\n}\n";
+var styles = {"overlay":"W8qMZnORYxI-","wrapper":"_-0dkolvLF-Y-"};
 styleInject_es.styleInject(css_248z);
 
-function ComboboxTriggerChip(props) {
-    const { open, setOpen } = React__default["default"].useContext(ComboboxContext);
-    return (React__default["default"].createElement("button", { className: styles.trigger, role: "combobox", type: "button", "aria-expanded": open, "aria-haspopup": "listbox", "aria-controls": "ATL-Combobox-Content", "aria-autocomplete": "list", onClick: () => {
-            setOpen(!open);
-        } },
-        React__default["default"].createElement(Typography.Typography, { fontWeight: "semiBold", textColor: "heading" }, props.label),
-        React__default["default"].createElement("div", { className: styles.triggerIcon },
-            React__default["default"].createElement(Icon.Icon, { color: "surfaceReverse", name: "add", size: "small" }))));
+function useMakeComboboxHandlers(setOpen, setSearchValue, selectedOptions, shouldScroll, selectedStateSetter, multiSelect, onClose) {
+    const handleClose = React.useCallback(() => {
+        setOpen(false);
+        setSearchValue("");
+        onClose && onClose();
+        if (selectedOptions.length > 0) {
+            shouldScroll.current = true;
+        }
+    }, [setOpen, setSearchValue, onClose, 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 ComboboxTrigger(_a) {
-    var { selected } = _a, props = tslib_es6.__rest(_a, ["selected"]);
-    const { open, setOpen, multiselect } = React__default["default"].useContext(ComboboxContext);
-    const hasSelection = selected.length;
-    const selectedLabel = selected.map(option => option.label).join(", ");
-    const renderHeading = multiselect || !hasSelection;
-    return (React__default["default"].createElement(Chip.Chip, { variation: hasSelection ? "base" : "subtle", label: hasSelection ? selectedLabel : "", heading: renderHeading ? props.label : "", onClick: () => setOpen(!open), role: "combobox" }, !hasSelection && (React__default["default"].createElement(Chip.Chip.Suffix, null,
-        React__default["default"].createElement(Icon.Icon, { name: "add", size: "small" })))));
+function useCombobox(selected, onSelect, onClose, multiSelect) {
+    const wrapperRef = React.useRef(null);
+    const shouldScroll = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState("");
+    const { handleClose, handleSelection } = useMakeComboboxHandlers(setOpen, setSearchValue, selected, shouldScroll, onSelect, multiSelect, onClose);
+    return {
+        wrapperRef,
+        searchValue,
+        setSearchValue,
+        open,
+        setOpen,
+        selectedOptions: selected,
+        selectedStateSetter: onSelect,
+        shouldScroll,
+        handleClose,
+        handleSelection,
+    };
 }
 
 function ComboboxActivator(props) {
-    const { open, setOpen } = React__default["default"].useContext(ComboboxContext);
+    const { handleClose, open, setOpen } = React__default["default"].useContext(ComboboxContext);
     if (props.children.type === Button.Button || props.children.type === Chip.Chip) {
         return React__default["default"].cloneElement(props.children, {
             role: "combobox",
-            onClick: () => setOpen(!open),
+            onClick: () => {
+                if (open) {
+                    handleClose();
+                }
+                else {
+                    setOpen(true);
+                }
+            },
         });
     }
     return props.children;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function ComboboxOption(_) {
-    useAssert.useAssert(true, "Combobox.Option can only be used inside a Combobox component");
-    return null;
-}
-
-const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox can only have one Trigger or Activator element";
-const COMBOBOX_OPTION_AND_CONTENT_EXISTS_ERROR = "Combobox prefers using Combobox.Option and Combobox.Action as the direct child of Combobox instead of Combobox.Content";
+const COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE = "Combobox must have exactly one Trigger element";
 function useComboboxValidation(children) {
-    const childrenArray = React__default["default"].Children.toArray(children);
-    let triggerElement, contentElement, multipleTriggersFound = false;
-    const optionElements = [];
-    const actionElements = [];
-    childrenArray.forEach(child => {
-        if (isTriggerElement(child)) {
-            if (triggerElement) {
-                multipleTriggersFound = true;
-            }
-            triggerElement = child;
-        }
-        if (isContentElement(child)) {
-            contentElement = child;
-        }
-        if (isOptionElement(child)) {
-            optionElements.push(child);
-        }
-        if (isActionElement(child)) {
-            actionElements.push(child);
-        }
-    });
-    useAssert.useAssert(multipleTriggersFound, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
-    useAssert.useAssert(Boolean((optionElements.length || actionElements.length) && contentElement), COMBOBOX_OPTION_AND_CONTENT_EXISTS_ERROR);
+    const optionElements = getCompoundComponents(ComboboxOption, children);
+    const actionElements = getCompoundComponents(ComboboxAction, children);
+    const activatorElements = getCompoundComponents(ComboboxActivator, children);
+    const shouldThrowTriggerError = isInvalid(activatorElements);
+    useAssert.useAssert(shouldThrowTriggerError, COMBOBOX_TRIGGER_COUNT_ERROR_MESSAGE);
     return {
-        contentElement,
-        triggerElement,
         optionElements,
+        triggerElement: activatorElements[0],
         actionElements,
     };
 }
-function isTriggerElement(child) {
-    return (React__default["default"].isValidElement(child) &&
-        (child.type === ComboboxTriggerButton ||
-            child.type === ComboboxTriggerChip ||
-            child.type === ComboboxActivator));
-}
-function isContentElement(child) {
-    return React__default["default"].isValidElement(child) && child.type === ComboboxContent;
+function isInvalid(activators) {
+    return activators.length > 1 ? true : false;
 }
-function isOptionElement(child) {
-    return React__default["default"].isValidElement(child) && child.type === ComboboxOption;
-}
-function isActionElement(child) {
-    return React__default["default"].isValidElement(child) && child.type === ComboboxAction;
+/**
+ * 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(_a) {
-    var { multiSelect = false, label = "Select", selected = [] } = _a, props = tslib_es6.__rest(_a, ["multiSelect", "label", "selected"]);
-    const { contentElement, triggerElement, optionElements, actionElements } = useComboboxValidation(props.children);
-    const buildOptions = optionElements.map(option => ({
+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,
-    }));
-    return (React__default["default"].createElement(ComboboxContextProvider, { multiselect: multiSelect },
-        triggerElement || React__default["default"].createElement(ComboboxTrigger, { label: label, selected: selected }),
-        contentElement || (
-        // @ts-expect-error - Suppress the XOR error with onClose|onSelect until we finish the refactor on JOB-81416
-        React__default["default"].createElement(ComboboxContent, Object.assign({ options: buildOptions, selected: selected }, props), actionElements))));
+    }))) || [], [optionElements]);
+    const { selectedOptions, selectedStateSetter, shouldScroll, wrapperRef, searchValue, setSearchValue, open, setOpen, handleClose, handleSelection, } = useCombobox(props.selected, props.onSelect, props.onClose, props.multiSelect);
+    return (React__default["default"].createElement(ComboboxContextProvider, { selected: selectedOptions, selectionHandler: handleSelection, open: open, setOpen: setOpen, handleClose: handleClose, shouldScroll: shouldScroll },
+        React__default["default"].createElement("div", { ref: wrapperRef, className: styles.wrapper },
+            open && (React__default["default"].createElement("div", { className: styles.overlay, onClick: () => handleClose(), "data-testid": "ATL-Combobox-Overlay" })),
+            triggerElement || (React__default["default"].createElement(ComboboxTrigger, { label: props.label, selected: props.selected })),
+            React__default["default"].createElement(ComboboxContent, { multiselect: props.multiSelect, searchPlaceholder: props.searchPlaceholder, subjectNoun: props.subjectNoun, selected: selectedOptions, actionElements: actionElements, selectedStateSetter: selectedStateSetter, handleSelection: handleSelection, searchValue: searchValue, setSearchValue: setSearchValue, wrapperRef: wrapperRef, open: open, setOpen: setOpen, options: options }))));
 }
-/**
- * @deprecated Use Combobox.Activator instead
- */
-Combobox.TriggerButton = ComboboxTriggerButton;
-/**
- * @deprecated Use Combobox.Activator instead
- */
-Combobox.TriggerChip = ComboboxTriggerChip;
 Combobox.Activator = ComboboxActivator;
-/**
- * @deprecated Use individual Combobox.Option instead
- */
-Combobox.Content = ComboboxContent;
 Combobox.Action = ComboboxAction;
 Combobox.Option = ComboboxOption;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "4.58.5",
+  "version": "4.59.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -84,5 +84,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "e7ff430888d3261c08b96521ad414e1ad63c1cb5"
+  "gitHead": "6727b0e5428d011ebeec1f3b9bd642144964d977"
 }

package/dist/Combobox/components/ComboboxTrigger/ComboboxTriggerButton/ComboboxTriggerButton.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ComboboxTriggerButtonProps } from "../../../Combobox.types";
-export declare function ComboboxTriggerButton(props: ComboboxTriggerButtonProps): JSX.Element;

package/dist/Combobox/components/ComboboxTrigger/ComboboxTriggerChip/ComboboxTriggerChip.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { ComboboxTriggerChipProps } from "../../../Combobox.types";
-export declare function ComboboxTriggerChip(props: ComboboxTriggerChipProps): JSX.Element;