@jobber/components 4.85.5 → 4.85.6-CJS-to-ESM.1

package/dist/Combobox-BwSFlPWt.js

@@ -0,0 +1,120 @@
+import React, { useCallback, useRef, useState, Children, isValidElement, useMemo } from 'react';
+import { C as ComboboxContent } from './ComboboxContent-B108quRR.js';
+import { C as ComboboxAction } from './ComboboxAction-BzEwYtPm.js';
+import { C as ComboboxContextProvider } from './ComboboxProvider-Dm_tfmkr.js';
+import { C as ComboboxTrigger } from './ComboboxTrigger-BAOfY8Og.js';
+import { C as ComboboxOption } from './ComboboxOption-D_f4NcBM.js';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { d as debounce } from './debounce-asENWBkf.js';
+import { n as noop } from './noop-D_wzwwIq.js';
+import { C as ComboboxActivator } from './ComboboxActivator-DkcbNfv5.js';
+import { useAssert } from '@jobber/hooks/useAssert';
+
+var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\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(css_248z);
+
+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(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-Dr5ftH9X.js

@@ -0,0 +1,122 @@
+'use strict';
+
+var React = require('react');
+var ComboboxContent = require('./ComboboxContent-D44NnZaD.js');
+var ComboboxAction = require('./ComboboxAction-B3RwsCtx.js');
+var ComboboxProvider = require('./ComboboxProvider-BwxfVgmL.js');
+var ComboboxTrigger = require('./ComboboxTrigger-ZqNl11Qy.js');
+var ComboboxOption = require('./ComboboxOption-CWkyTkzU.js');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var debounce = require('./debounce-B-pQrPa0.js');
+var noop = require('./noop-DXH2P2oE.js');
+var ComboboxActivator = require('./ComboboxActivator-B-2nmWQ-.js');
+var useAssert = require('@jobber/hooks/useAssert');
+
+var css_248z = ".W8qMZnORYxI- {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\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 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(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-B3RwsCtx.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var Typography = require('./Typography-Dx8KtnBw.js');
+var ComboboxProvider = require('./ComboboxProvider-BwxfVgmL.js');
+
+var css_248z = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 var(--space-small);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.jobber-retheme .ncp0nKHQ7d8- {\n  border-radius: var(--radius-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: var(--space-small);\n}\n";
+var styles = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
+styleInject_es.styleInject(css_248z);
+
+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/ComboboxAction-BzEwYtPm.js

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { T as Typography } from './Typography-G8pA_xwj.js';
+import { a as ComboboxContext } from './ComboboxProvider-Dm_tfmkr.js';
+
+var css_248z = ".Ow9wSNnGP-g- {\n  width: 100%;\n  box-sizing: border-box;\n  padding: 0 var(--space-small);\n  background-color: var(--color-surface);\n}\n\n.ncp0nKHQ7d8- {\n  position: relative;\n  width: 100%;\n  min-height: calc((var(--space-largest) - var(--space-small)));\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: var(--radius-large);\n  text-align: left;\n  background-color: var(--color-surface);\n  cursor: pointer;\n  transition: all var(--timing-base);\n}\n\n.jobber-retheme .ncp0nKHQ7d8- {\n  border-radius: var(--radius-base);\n}\n\n.ncp0nKHQ7d8-:focus {\n  outline: none;\n}\n\n.ncp0nKHQ7d8-:hover,\n.ncp0nKHQ7d8-:focus-visible {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n.ncp0nKHQ7d8-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n\n.ncp0nKHQ7d8- span {\n  margin-left: var(--space-small);\n}\n";
+var styles = {"actionContainer":"Ow9wSNnGP-g-","actionButton":"ncp0nKHQ7d8-"};
+styleInject(css_248z);
+
+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/ComboboxActivator-B-2nmWQ-.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var Button = require('./Button-D3mW3Hcg.js');
+var Chip = require('./Chip-Div4v8At.js');
+require('./tslib.es6-ld72nsZq.js');
+require('@jobber/design');
+var ComboboxProvider = require('./ComboboxProvider-BwxfVgmL.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-DkcbNfv5.js

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

package/dist/ComboboxContent-B108quRR.js

@@ -0,0 +1,144 @@
+import React, { useContext, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import ReactDOM from 'react-dom';
+import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
+import { C as ComboboxContentSearch } from './ComboboxContentSearch-B8hsfo_D.js';
+import { C as ComboboxContentList } from './ComboboxContentList-DmdT_cqp.js';
+import { C as ComboboxContentHeader } from './ComboboxContentHeader-DFLlxg-X.js';
+import { a as ComboboxContext } from './ComboboxProvider-Dm_tfmkr.js';
+import { useRefocusOnActivator } from '@jobber/hooks/useRefocusOnActivator';
+import { useFocusTrap } from '@jobber/hooks/useFocusTrap';
+import { usePopper } from 'react-popper';
+import { useOnKeyDown } from '@jobber/hooks/useOnKeyDown';
+
+var css_248z = ".m1w5vdUZ6rQ- {\n  z-index: var(--elevation-tooltip);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: var(--shadow-base);\n  margin-top: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: var(--space-small);\n}\n";
+var styles = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+styleInject(css_248z);
+
+function useComboboxContent(open, selected) {
+    const { shouldScroll } = useContext(ComboboxContext);
+    const optionsListRef = useRef(null);
+    useEffect(() => {
+        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, selected]);
+    return {
+        optionsListRef,
+    };
+}
+function scrollToFirstSelected(firstSelected, shouldScroll) {
+    if (firstSelected) {
+        firstSelected.scrollIntoView({
+            block: "nearest",
+        });
+        shouldScroll.current = false;
+    }
+}
+
+// eslint-disable-next-line max-statements
+function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = useContext(ComboboxContext);
+    const hasOptionsVisible = open && filteredOptions.length > 0;
+    const focusedIndex = useRef(null);
+    useRefocusOnActivator(open);
+    const popperRef = useFocusTrap(open);
+    const { styles: popperStyles, attributes, update, } = usePopper(wrapperRef.current, popperRef.current, {
+        modifiers: [
+            {
+                name: "flip",
+                options: {
+                    fallbackPlacements: ["top-start"],
+                },
+            },
+        ],
+        placement: "bottom-start",
+    });
+    useEffect(() => {
+        focusedIndex.current = null;
+        if (open) {
+            update === null || update === void 0 ? void 0 : update();
+        }
+    }, [open, filteredOptions.length]);
+    useEffect(() => {
+        var _a;
+        if (open) {
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+        }
+        return () => {
+            var _a;
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+        };
+    }, [open, optionsListRef, filteredOptions]);
+    useOnKeyDown(() => {
+        if (open) {
+            handleClose();
+        }
+    }, "Escape");
+    function handleContentKeydown(event) {
+        var _a;
+        if (!hasOptionsVisible)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            const activeElementInList = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+            if (!activeElementInList)
+                return;
+            handleKeyboardSelection(event);
+        }
+        if (event.key === "ArrowDown") {
+            handleKeyboardNavigation(event, 1);
+        }
+        if (event.key === "ArrowUp") {
+            handleKeyboardNavigation(event, -1);
+        }
+    }
+    function handleKeyboardNavigation(event, indexChange) {
+        var _a;
+        const newIndex = focusedIndex.current === null ? 0 : focusedIndex.current + indexChange;
+        if (newIndex < 0 || newIndex >= filteredOptions.length)
+            return;
+        const optionElement = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children[newIndex];
+        optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
+        focusedIndex.current = newIndex;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function handleKeyboardSelection(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (focusedIndex.current !== null) {
+            selectionCallback(filteredOptions[focusedIndex.current]);
+        }
+    }
+    return {
+        popperRef,
+        popperStyles,
+        attributes,
+    };
+}
+
+function ComboboxContent(props) {
+    const optionsExist = props.options.length > 0;
+    const { optionsListRef } = useComboboxContent(props.open, props.selected);
+    const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const template = (React.createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames(styles.content, { [styles.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+        React.createElement(ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+                props.selectedStateSetter([]);
+            }, onSelectAll: () => {
+                props.selectedStateSetter(props.options);
+            } })),
+        React.createElement(ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        props.actionElements && (React.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React.createElement("div", { key: index, className: classnames({
+                [styles.actionPadding]: index === childrenArray.length - 1,
+            }) }, child)))))));
+    return ReactDOM.createPortal(template, document.body);
+}
+
+export { ComboboxContent as C };

package/dist/ComboboxContent-D44NnZaD.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var styleInject_es = require('./style-inject.es-XZHJH68X.js');
+var ComboboxContentSearch = require('./ComboboxContentSearch-UAyHetvM.js');
+var ComboboxContentList = require('./ComboboxContentList-DHQ0x2ml.js');
+var ComboboxContentHeader = require('./ComboboxContentHeader-CJ0if4JI.js');
+var ComboboxProvider = require('./ComboboxProvider-BwxfVgmL.js');
+var useRefocusOnActivator = require('@jobber/hooks/useRefocusOnActivator');
+var useFocusTrap = require('@jobber/hooks/useFocusTrap');
+var reactPopper = require('react-popper');
+var useOnKeyDown = require('@jobber/hooks/useOnKeyDown');
+
+var css_248z = ".m1w5vdUZ6rQ- {\n  z-index: var(--elevation-tooltip);\n  width: calc(var(--space-extravagant) * 3.75);\n  box-shadow: var(--shadow-base);\n  margin-top: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  overflow: auto;\n  background: var(--color-surface);\n}\n\n.jobber-retheme .m1w5vdUZ6rQ- {\n  border-radius: var(--radius-base);\n}\n\n/* CAUTION: Tests for content visibility assume this class' presence hides the content\n* so please be careful if you change this class name, or the css rules within.\n*/\n\n.m1w5vdUZ6rQ-.Zlkv2HA096A- {\n  display: none;\n  visibility: hidden;\n}\n\n.m1w5vdUZ6rQ-:focus,\n.m1w5vdUZ6rQ-:focus-visible {\n  outline: none;\n}\n\n.m1w5vdUZ6rQ-:focus-visible {\n  box-shadow: var(--shadow-focus);\n}\n\n.YQry-Rd6zfQ- {\n  display: -ms-flexbox;\n  display: flex;\n  -ms-flex-direction: column;\n      flex-direction: column;\n  position: sticky;\n  gap: var(--space-smaller);\n  bottom: 0;\n  width: 100%;\n  background-color: var(--color-surface);\n}\n\n.TcpqL34s4lI- {\n  padding-bottom: var(--space-small);\n}\n";
+var styles = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+styleInject_es.styleInject(css_248z);
+
+function useComboboxContent(open, selected) {
+    const { shouldScroll } = React.useContext(ComboboxProvider.ComboboxContext);
+    const optionsListRef = React.useRef(null);
+    React.useEffect(() => {
+        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, selected]);
+    return {
+        optionsListRef,
+    };
+}
+function scrollToFirstSelected(firstSelected, shouldScroll) {
+    if (firstSelected) {
+        firstSelected.scrollIntoView({
+            block: "nearest",
+        });
+        shouldScroll.current = false;
+    }
+}
+
+// eslint-disable-next-line max-statements
+function useComboboxAccessibility(selectionCallback, filteredOptions, optionsListRef, open, wrapperRef) {
+    const { handleClose } = React.useContext(ComboboxProvider.ComboboxContext);
+    const hasOptionsVisible = open && filteredOptions.length > 0;
+    const focusedIndex = React.useRef(null);
+    useRefocusOnActivator.useRefocusOnActivator(open);
+    const popperRef = useFocusTrap.useFocusTrap(open);
+    const { styles: popperStyles, attributes, update, } = reactPopper.usePopper(wrapperRef.current, popperRef.current, {
+        modifiers: [
+            {
+                name: "flip",
+                options: {
+                    fallbackPlacements: ["top-start"],
+                },
+            },
+        ],
+        placement: "bottom-start",
+    });
+    React.useEffect(() => {
+        focusedIndex.current = null;
+        if (open) {
+            update === null || update === void 0 ? void 0 : update();
+        }
+    }, [open, filteredOptions.length]);
+    React.useEffect(() => {
+        var _a;
+        if (open) {
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener("keydown", handleContentKeydown);
+        }
+        return () => {
+            var _a;
+            (_a = popperRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("keydown", handleContentKeydown);
+        };
+    }, [open, optionsListRef, filteredOptions]);
+    useOnKeyDown.useOnKeyDown(() => {
+        if (open) {
+            handleClose();
+        }
+    }, "Escape");
+    function handleContentKeydown(event) {
+        var _a;
+        if (!hasOptionsVisible)
+            return;
+        if (event.key === "Enter" || event.key === " ") {
+            const activeElementInList = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.contains(document.activeElement);
+            if (!activeElementInList)
+                return;
+            handleKeyboardSelection(event);
+        }
+        if (event.key === "ArrowDown") {
+            handleKeyboardNavigation(event, 1);
+        }
+        if (event.key === "ArrowUp") {
+            handleKeyboardNavigation(event, -1);
+        }
+    }
+    function handleKeyboardNavigation(event, indexChange) {
+        var _a;
+        const newIndex = focusedIndex.current === null ? 0 : focusedIndex.current + indexChange;
+        if (newIndex < 0 || newIndex >= filteredOptions.length)
+            return;
+        const optionElement = (_a = optionsListRef.current) === null || _a === void 0 ? void 0 : _a.children[newIndex];
+        optionElement === null || optionElement === void 0 ? void 0 : optionElement.focus();
+        focusedIndex.current = newIndex;
+        event.preventDefault();
+        event.stopPropagation();
+    }
+    function handleKeyboardSelection(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (focusedIndex.current !== null) {
+            selectionCallback(filteredOptions[focusedIndex.current]);
+        }
+    }
+    return {
+        popperRef,
+        popperStyles,
+        attributes,
+    };
+}
+
+function ComboboxContent(props) {
+    const optionsExist = props.options.length > 0;
+    const { optionsListRef } = useComboboxContent(props.open, props.selected);
+    const { popperRef, popperStyles, attributes } = useComboboxAccessibility(props.handleSelection, props.options, optionsListRef, props.open, props.wrapperRef);
+    const template = (React.createElement("div", Object.assign({ ref: popperRef, id: "ATL-Combobox-Content", "data-testid": "ATL-Combobox-Content", tabIndex: 0, className: classnames(styles.content, { [styles.hidden]: !props.open }), style: popperStyles.popper }, attributes.popper),
+        React.createElement(ComboboxContentSearch.ComboboxContentSearch, { open: props.open, placeholder: props.subjectNoun, searchValue: props.searchValue, setSearchValue: props.setSearchValue, handleSearchChange: props.handleSearchChange }),
+        props.multiselect && (optionsExist || props.selected.length > 0) && (React.createElement(ComboboxContentHeader.ComboboxContentHeader, { hasOptionsVisible: optionsExist, subjectNoun: props.subjectNoun, selectedCount: props.selected.length, onClearAll: () => {
+                props.selectedStateSetter([]);
+            }, onSelectAll: () => {
+                props.selectedStateSetter(props.options);
+            } })),
+        React.createElement(ComboboxContentList.ComboboxContentList, { multiselect: props.multiselect, options: props.options, selected: props.selected, optionsListRef: optionsListRef, searchValue: props.searchValue, subjectNoun: props.subjectNoun, loading: props.loading, onLoadMore: props.onLoadMore }),
+        props.actionElements && (React.createElement("div", { className: styles.actions, role: "group" }, props.actionElements.map((child, index, childrenArray) => (React.createElement("div", { key: index, className: classnames({
+                [styles.actionPadding]: index === childrenArray.length - 1,
+            }) }, child)))))));
+    return ReactDOM.createPortal(template, document.body);
+}
+
+exports.ComboboxContent = ComboboxContent;