@jobber/components 4.91.2-retheme-fe.2 → 4.91.2-retheme-fe.3

package/dist/ComboboxActivator-DR2zBEhW.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var React = require('react');
+var Button = require('./Button-CrxxoYQF.js');
+var Chip = require('./Chip-rCOZOjwt.js');
+require('./tslib.es6-6dmIhJTi.js');
+require('@jobber/design');
+var ComboboxProvider = require('./ComboboxProvider-fgameO9B.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/ComboboxContent-hlcIQRLz.js

@@ -0,0 +1,143 @@
+import React, { useContext, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+import ReactDOM from 'react-dom';
+import { C as ComboboxContentSearch } from './ComboboxContentSearch-CG16cjfz.js';
+import { C as ComboboxContentList } from './ComboboxContentList-B46nuf36.js';
+import { C as ComboboxContentHeader } from './ComboboxContentHeader-CJHYc30F.js';
+import { a as ComboboxContext } from './ComboboxProvider-BzFHJNMs.js';
+import { u as useRefocusOnActivator_2 } from './useRefocusOnActivator-DA8gO9ka.js';
+import { u as useFocusTrap_2 } from './useFocusTrap-B8ok2cIh.js';
+import { usePopper } from 'react-popper';
+import { u as useOnKeyDown_2 } from './useOnKeyDown-DrmWnz2G.js';
+
+var styles = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+
+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_2(open);
+    const popperRef = useFocusTrap_2(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_2(() => {
+        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 (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
+        ? ReactDOM.createPortal(template, document.body)
+        : template;
+}
+
+export { ComboboxContent as C };

package/dist/ComboboxContent-oQDp-dEd.js

@@ -0,0 +1,145 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var ReactDOM = require('react-dom');
+var ComboboxContentSearch = require('./ComboboxContentSearch-BgkQYIHq.js');
+var ComboboxContentList = require('./ComboboxContentList-DdhL57Bj.js');
+var ComboboxContentHeader = require('./ComboboxContentHeader-BpyDfau9.js');
+var ComboboxProvider = require('./ComboboxProvider-fgameO9B.js');
+var useRefocusOnActivator = require('./useRefocusOnActivator-y6qNNjZw.js');
+var useFocusTrap = require('./useFocusTrap-BBkfWfEx.js');
+var reactPopper = require('react-popper');
+var useOnKeyDown = require('./useOnKeyDown-DN2YGzzl.js');
+
+var styles = {"content":"m1w5vdUZ6rQ-","hidden":"Zlkv2HA096A-","actions":"YQry-Rd6zfQ-","actionPadding":"TcpqL34s4lI-"};
+
+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_2(open);
+    const popperRef = useFocusTrap.useFocusTrap_2(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_2(() => {
+        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 (globalThis === null || globalThis === void 0 ? void 0 : globalThis.document)
+        ? ReactDOM.createPortal(template, document.body)
+        : template;
+}
+
+exports.ComboboxContent = ComboboxContent;

package/dist/ComboboxContentHeader-BpyDfau9.js

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var Typography = require('./Typography-BCKgZ_gv.js');
+var Button = require('./Button-CrxxoYQF.js');
+
+var styles = {"header":"Q-mwo-g5Fi8-"};
+
+function ComboboxContentHeader(props) {
+    const hasSelected = props.selectedCount > 0;
+    const actionLabel = hasSelected ? "Clear" : "Select all";
+    const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
+    const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
+    const showAction = hasSelected || props.hasOptionsVisible;
+    return (React.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
+        React.createElement(Typography.Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
+        showAction && (React.createElement(Button.Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+}
+function getLabel(hasSelected, count, subjectNoun) {
+    if (hasSelected) {
+        return `${count} selected`;
+    }
+    if (subjectNoun) {
+        return `Select ${subjectNoun}`;
+    }
+    return "Select";
+}
+
+exports.ComboboxContentHeader = ComboboxContentHeader;

package/dist/ComboboxContentHeader-CJHYc30F.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { T as Typography } from './Typography-C0YR4XBl.js';
+import { B as Button } from './Button-DzwBVzGv.js';
+
+var styles = {"header":"Q-mwo-g5Fi8-"};
+
+function ComboboxContentHeader(props) {
+    const hasSelected = props.selectedCount > 0;
+    const actionLabel = hasSelected ? "Clear" : "Select all";
+    const label = getLabel(hasSelected, props.selectedCount, props.subjectNoun);
+    const handleSelectAll = hasSelected ? props.onClearAll : props.onSelectAll;
+    const showAction = hasSelected || props.hasOptionsVisible;
+    return (React.createElement("div", { className: styles.header, "data-testid": "ATL-Combobox-Header" },
+        React.createElement(Typography, { textColor: "heading", fontWeight: "semiBold" }, label),
+        showAction && (React.createElement(Button, { size: "small", label: actionLabel, type: "tertiary", onClick: handleSelectAll }))));
+}
+function getLabel(hasSelected, count, subjectNoun) {
+    if (hasSelected) {
+        return `${count} selected`;
+    }
+    if (subjectNoun) {
+        return `Select ${subjectNoun}`;
+    }
+    return "Select";
+}
+
+export { ComboboxContentHeader as C };

package/dist/ComboboxContentList-B46nuf36.js

@@ -0,0 +1,75 @@
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import { T as Text } from './Text-CyaxiLeN.js';
+import { G as Glimmer } from './Glimmer-C-o8hGKO.js';
+import { S as Spinner } from './Spinner-CRjrJ0LO.js';
+import { A as AnimatedPresence } from './AnimatedPresence-Dg0rSWmK.js';
+import { C as ComboboxOption } from './ComboboxOption-BPLxC2h4.js';
+import { C as ComboboxLoadMore } from './ComboboxLoadMore-lwIHDJ3e.js';
+
+var styles = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
+
+function ComboboxContentList(props) {
+    const optionsExist = props.options.length > 0;
+    const hasSearchTerm = props.searchValue.length > 0;
+    const { listScrollState } = useScrollState(props.optionsListRef, props.options);
+    return (React.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
+        optionsExist && (React.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
+            props.options.map(option => {
+                return (React.createElement(ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix }));
+            }),
+            React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
+                React.createElement(AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner, { size: "small" })))),
+            props.onLoadMore && (React.createElement(ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+        props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles.loadingContainer, key: index },
+            React.createElement(Glimmer, { shape: "rectangle", size: "small" })))))),
+        hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.filterMessage },
+            React.createElement(Text, { variation: "subdued" },
+                "No results for ",
+                `“${props.searchValue}”`))),
+        !hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.emptyStateMessage },
+            React.createElement(Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
+}
+function getZeroIndexStateText(subjectNoun) {
+    if (subjectNoun) {
+        return `You don't have any ${subjectNoun} yet`;
+    }
+    return "No options yet";
+}
+function useScrollState(optionsListRef, options) {
+    const [listScrollState, setlistScrollState] = useState("");
+    useEffect(() => {
+        const handleScroll = () => {
+            if (optionsListRef.current) {
+                const { scrollTop, clientHeight, scrollHeight } = optionsListRef.current;
+                if (scrollHeight === clientHeight) {
+                    setlistScrollState("scrollNone");
+                }
+                else if (scrollTop === 0) {
+                    setlistScrollState("scrollTop");
+                }
+                else if (scrollTop + clientHeight >= scrollHeight) {
+                    setlistScrollState("scrollBottom");
+                }
+                else {
+                    setlistScrollState("");
+                }
+            }
+        };
+        if (options.length === 0) {
+            handleScroll();
+        }
+        if (optionsListRef.current) {
+            optionsListRef.current.addEventListener("scroll", handleScroll);
+            handleScroll();
+        }
+        return () => {
+            if (optionsListRef.current) {
+                optionsListRef.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [options]);
+    return { listScrollState };
+}
+
+export { ComboboxContentList as C };

package/dist/ComboboxContentList-DdhL57Bj.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+var classnames = require('classnames');
+var Text = require('./Text-C0pm--c0.js');
+var Glimmer = require('./Glimmer-BG7eX9ml.js');
+var Spinner = require('./Spinner-DBuwcAqL.js');
+var AnimatedPresence = require('./AnimatedPresence-kepj98O9.js');
+var ComboboxOption = require('./ComboboxOption-CJpTBVXu.js');
+var ComboboxLoadMore = require('./ComboboxLoadMore-9FgWV4Uv.js');
+
+var styles = {"container":"SgMzjOcdE-E-","optionsList":"TwoTCjgcssc-","filterMessage":"_8T5M7MGwCRE-","emptyStateMessage":"_4y5NXkNeIQM-","scrollTop":"T6E3VwBGoQM-","scrollNone":"_6HQzxMQkXnE-","scrollBottom":"_5YsJZyMDkbA-","loadingContainer":"A6z4OI58xoE-","hasOptions":"QqHBSf52fPk-"};
+
+function ComboboxContentList(props) {
+    const optionsExist = props.options.length > 0;
+    const hasSearchTerm = props.searchValue.length > 0;
+    const { listScrollState } = useScrollState(props.optionsListRef, props.options);
+    return (React.createElement("div", { className: classnames(styles.container, styles[listScrollState]) },
+        optionsExist && (React.createElement("ul", { className: styles.optionsList, role: "listbox", "aria-multiselectable": props.multiselect, ref: props.optionsListRef },
+            props.options.map(option => {
+                return (React.createElement(ComboboxOption.ComboboxOption, { key: option.id, id: option.id, label: option.label, prefix: option.prefix }));
+            }),
+            React.createElement("div", { className: classnames([styles.loadingContainer, styles.hasOptions]) },
+                React.createElement(AnimatedPresence.AnimatedPresence, { transition: "fromBottom" }, Boolean(props.loading && optionsExist) && (React.createElement(Spinner.Spinner, { size: "small" })))),
+            props.onLoadMore && (React.createElement(ComboboxLoadMore.ComboboxLoadMore, { onLoadMore: props.onLoadMore })))),
+        props.loading && !optionsExist && (React.createElement(React.Fragment, null, Array.from({ length: 5 }).map((_, index) => (React.createElement("div", { className: styles.loadingContainer, key: index },
+            React.createElement(Glimmer.Glimmer, { shape: "rectangle", size: "small" })))))),
+        hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.filterMessage },
+            React.createElement(Text.Text, { variation: "subdued" },
+                "No results for ",
+                `“${props.searchValue}”`))),
+        !hasSearchTerm && !props.loading && !optionsExist && (React.createElement("div", { className: styles.emptyStateMessage },
+            React.createElement(Text.Text, { variation: "subdued" }, getZeroIndexStateText(props.subjectNoun))))));
+}
+function getZeroIndexStateText(subjectNoun) {
+    if (subjectNoun) {
+        return `You don't have any ${subjectNoun} yet`;
+    }
+    return "No options yet";
+}
+function useScrollState(optionsListRef, options) {
+    const [listScrollState, setlistScrollState] = React.useState("");
+    React.useEffect(() => {
+        const handleScroll = () => {
+            if (optionsListRef.current) {
+                const { scrollTop, clientHeight, scrollHeight } = optionsListRef.current;
+                if (scrollHeight === clientHeight) {
+                    setlistScrollState("scrollNone");
+                }
+                else if (scrollTop === 0) {
+                    setlistScrollState("scrollTop");
+                }
+                else if (scrollTop + clientHeight >= scrollHeight) {
+                    setlistScrollState("scrollBottom");
+                }
+                else {
+                    setlistScrollState("");
+                }
+            }
+        };
+        if (options.length === 0) {
+            handleScroll();
+        }
+        if (optionsListRef.current) {
+            optionsListRef.current.addEventListener("scroll", handleScroll);
+            handleScroll();
+        }
+        return () => {
+            if (optionsListRef.current) {
+                optionsListRef.current.removeEventListener("scroll", handleScroll);
+            }
+        };
+    }, [options]);
+    return { listScrollState };
+}
+
+exports.ComboboxContentList = ComboboxContentList;

package/dist/ComboboxContentSearch-BgkQYIHq.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var React = require('react');
+var Icon = require('./Icon-5T1h0cSC.js');
+
+var styles = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+
+function ComboboxContentSearch(props) {
+    const searchRef = React.useRef(null);
+    React.useEffect(() => {
+        if (props.open) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [props.open]);
+    return (React.createElement("div", { className: styles.search },
+        React.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+            React.createElement(Icon.Icon, { name: "remove", size: "small" })))));
+    function clearSearch() {
+        var _a;
+        props.setSearchValue("");
+        props.handleSearchChange("");
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleSearch(event) {
+        props.setSearchValue(event.currentTarget.value);
+        props.handleSearchChange(event.currentTarget.value);
+    }
+}
+
+exports.ComboboxContentSearch = ComboboxContentSearch;

package/dist/ComboboxContentSearch-CG16cjfz.js

@@ -0,0 +1,32 @@
+import React, { useRef, useEffect } from 'react';
+import { I as Icon } from './Icon-zn-zanGs.js';
+
+var styles = {"search":"MIyb-oFZg9w-","searchInput":"WZPK91I4aJs-","clearSearch":"_7loHrVUe-Rk-"};
+
+function ComboboxContentSearch(props) {
+    const searchRef = useRef(null);
+    useEffect(() => {
+        if (props.open) {
+            setTimeout(() => {
+                var _a;
+                (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [props.open]);
+    return (React.createElement("div", { className: styles.search },
+        React.createElement("input", { type: "search", ref: searchRef, className: styles.searchInput, placeholder: props.placeholder ? `Search ${props.placeholder}` : "Search", onChange: (event) => handleSearch(event), value: props.searchValue }),
+        props.searchValue && (React.createElement("button", { className: styles.clearSearch, onClick: clearSearch, type: "button", "data-testid": "ATL-Combobox-Content-Search-Clear", "aria-label": "Clear search" },
+            React.createElement(Icon, { name: "remove", size: "small" })))));
+    function clearSearch() {
+        var _a;
+        props.setSearchValue("");
+        props.handleSearchChange("");
+        (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    function handleSearch(event) {
+        props.setSearchValue(event.currentTarget.value);
+        props.handleSearchChange(event.currentTarget.value);
+    }
+}
+
+export { ComboboxContentSearch as C };

package/dist/ComboboxLoadMore-9FgWV4Uv.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var React = require('react');
+var useInView = require('./useInView-fsT3lwCU.js');
+
+var styles = {"trigger":"_3s8-RC5Ky3s-"};
+
+function ComboboxLoadMore({ onLoadMore }) {
+    const [inViewRef, isInView] = useInView.useInView_2();
+    React.useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+}
+
+exports.ComboboxLoadMore = ComboboxLoadMore;

package/dist/ComboboxLoadMore-lwIHDJ3e.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+import { u as useInView_2 } from './useInView-Bj_Jl5Bw.js';
+
+var styles = {"trigger":"_3s8-RC5Ky3s-"};
+
+function ComboboxLoadMore({ onLoadMore }) {
+    const [inViewRef, isInView] = useInView_2();
+    useEffect(() => {
+        isInView && onLoadMore();
+    }, [isInView]);
+    return (React.createElement("div", { "data-testid": "ATL-Combobox-Loadmore-Trigger", ref: inViewRef, className: styles.trigger }));
+}
+
+export { ComboboxLoadMore as C };

package/dist/ComboboxOption-BPLxC2h4.js

@@ -0,0 +1,20 @@
+import React, { useContext } from 'react';
+import classnames from 'classnames';
+import { I as Icon } from './Icon-zn-zanGs.js';
+import { F as Flex } from './Flex-DnI4PG_x.js';
+import { a as ComboboxContext } from './ComboboxProvider-BzFHJNMs.js';
+
+var styles = {"option":"_5QdRGmaNHvc-"};
+
+function ComboboxOption(props) {
+    const { selected, selectionHandler } = useContext(ComboboxContext);
+    const isSelected = selected.some(selection => selection.id.toString() === props.id.toString());
+    return (React.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(styles.option) },
+        React.createElement(Flex, { template: props.prefix ? ["shrink", "grow"] : ["grow"] },
+            props.prefix,
+            props.label),
+        React.createElement("div", null, isSelected && React.createElement(Icon, { name: "checkmark", color: "blue" }))));
+}
+
+export { ComboboxOption as C };