@jobber/components 4.85.4-CJS-to-ESM.2 → 4.85.4-CJS-to-ESM.4

package/dist/Chips-7c44a2f9.js

@@ -1,494 +0,0 @@
-import React, { useRef, useState, useId, useEffect } from 'react';
-import { s as styleInject } from './style-inject.es-a0e1a0ba.js';
-import classnames from 'classnames';
-import { useAssert } from '@jobber/hooks/useAssert';
-import { I as Icon } from './Icon-22723fe6.js';
-import { A as Avatar } from './Avatar-229083ec.js';
-import { T as Typography } from './Typography-52ed1386.js';
-import { T as Tooltip } from './Tooltip-a40fffbd.js';
-import sortBy from 'lodash/sortBy';
-import { useLiveAnnounce } from '@jobber/hooks/useLiveAnnounce';
-import debounce from 'lodash/debounce';
-import '@jobber/design';
-import { usePopper } from 'react-popper';
-import { T as Text } from './Text-c92ddeb3.js';
-import { B as Button } from './Button-30154871.js';
-import { S as Spinner } from './Spinner-90081e20.js';
-
-var css_248z$1 = "/**\n * Used in the wrapping chips component:\n * - InternalChipSingleSelect\n * - InternalChipMultiSelect\n */\n\n.zn6onyiQVmA- {\n  display: -ms-flexbox;\n  display: flex;\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.PEnZzMEgbhU- {\n  display: inline-grid;\n  position: relative;\n  max-width: 100%;\n  box-sizing: border-box;\n  padding: var(--space-small);\n  border: var(--border-base) solid var(--color-border);\n  border-radius: var(--radius-larger);\n  color: var(--color-text--secondary);\n  text-align: left;\n  vertical-align: middle;\n  background-color: var(--color-surface);\n  transition: var(--timing-base) ease-in-out;\n  transition-property: background-color, box-shadow, color;\n  grid-template-columns: -webkit-max-content;\n  grid-template-columns: max-content;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--space-small);\n}\n\n.dtysUhwYdG4-,\n.xGaMCAYsdwA- {\n  padding: calc(var(--space-smaller) + var(--space-smallest)) var(--space-small);\n}\n\n.dtysUhwYdG4- {\n  grid-template-columns: -webkit-min-content 1fr;\n  grid-template-columns: min-content 1fr;\n}\n\n.xGaMCAYsdwA- {\n  grid-template-columns: 1fr -webkit-min-content;\n  grid-template-columns: 1fr min-content;\n}\n\n.dtysUhwYdG4-.xGaMCAYsdwA- {\n  grid-template-columns: -webkit-min-content 1fr -webkit-min-content;\n  grid-template-columns: min-content 1fr min-content;\n}\n\n.SNT7gGV-h-o-,\n.W4D98cvEth4- ~ .PEnZzMEgbhU- {\n  box-shadow: var(--shadow-base);\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n/**\n * Interaction\n */\n\n.PEnZzMEgbhU-:focus,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU- {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n.SNT7gGV-h-o-:hover,\n.W4D98cvEth4- ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-):hover,\n.W4D98cvEth4-:focus ~ .PEnZzMEgbhU-:not(._0hEzaTXK9M0-) {\n  background-color: var(--color-surface--hover);\n}\n\n/**\n * States\n */\n\n.PEnZzMEgbhU-._0hEzaTXK9M0- {\n  border-color: var(--color-surface--reverse);\n  color: var(--color-text--reverse);\n  background-color: var(--color-surface--reverse);\n}\n\n.PEnZzMEgbhU-.JApS2787BU8- {\n  border-color: var(--color-critical--onSurface);\n  color: var(--color-critical--onSurface);\n  background-color: var(--color-critical--surface);\n}\n\n.PEnZzMEgbhU-.Kg0c8WVgMpg- {\n  border-color: var(--color-disabled--secondary);\n  color: var(--color-disabled);\n  background-color: var(--color-disabled--secondary);\n}\n\n._0hEzaTXK9M0-.Kg0c8WVgMpg- {\n  border-color: var(--color-disabled);\n  color: var(--color-white);\n  background-color: var(--color-disabled);\n}\n\n.JApS2787BU8-.Kg0c8WVgMpg- {\n  border-color: var(--color-critical);\n}\n\n/**\n * Input checkbox/radio\n *\n * Hide checkbox on UI but not screen readers and still allow focus state\n */\n\n.W4D98cvEth4- {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  clip: rect(0 0 0 0);\n  -webkit-clip-path: inset(100%);\n          clip-path: inset(100%);\n  white-space: nowrap;\n}\n\n/**\n * Button\n */\n\n._0-ZWexS4Gfg- {\n  display: -ms-flexbox;\n  display: flex;\n  border-radius: var(--radius-base);\n  cursor: pointer;\n  transition: background-color 200ms ease;\n}\n\n._0-ZWexS4Gfg-:hover,\n._0-ZWexS4Gfg-:focus {\n  background-color: var(--color-surface--hover);\n}\n\n._0-ZWexS4Gfg-:focus,\n.SNT7gGV-h-o- ._0-ZWexS4Gfg-:hover {\n  box-shadow: var(--shadow-focus);\n  outline: none;\n}\n\n/**\n * Override icon default colors.\n *\n * NOTE: This is a workaround since some icons have default colors that we don't\n * want to override until the component color prop overrides it.\n * DO NOT COPY!\n */\n\n.DQPnZP4UZpw- > svg {\n  fill: var(--color-interactive--subtle);\n}\n\n.DQPnZP4UZpw- {\n  display: -ms-flexbox;\n  display: flex;\n}\n";
-var styles$1 = {"wrapper":"zn6onyiQVmA-","chip":"PEnZzMEgbhU-","hasPrefix":"dtysUhwYdG4-","hasSuffix":"xGaMCAYsdwA-","clickable":"SNT7gGV-h-o-","input":"W4D98cvEth4-","active":"_0hEzaTXK9M0-","invalid":"JApS2787BU8-","disabled":"Kg0c8WVgMpg-","button":"_0-ZWexS4Gfg-","icon":"DQPnZP4UZpw-"};
-styleInject(css_248z$1);
-
-function InternalChipButton({ icon, invalid, disabled, label, onClick, }) {
-    const buttonRef = useRef();
-    return (React.createElement("div", { ref: buttonRef, className: styles$1.button, tabIndex: 0, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown, onClick: handleClick, role: "button", "aria-label": `Remove ${label}`, "aria-hidden": true, "aria-disabled": disabled, "data-testid": "remove-chip-button" },
-        React.createElement(Icon, { name: icon, color: getColor() })));
-    function handleKeyUp(event) {
-        if (document.activeElement === buttonRef.current &&
-            (event.key === " " || event.key === "Enter")) {
-            event.stopPropagation();
-            buttonRef.current.click();
-        }
-    }
-    function handleKeyDown(event) {
-        if (document.activeElement === buttonRef.current && event.key === " ") {
-            // Don't scroll down
-            event.preventDefault();
-        }
-    }
-    function getColor() {
-        if (disabled)
-            return "disabled";
-        if (invalid)
-            return "critical";
-        return "greyBlue";
-    }
-    function handleClick(event) {
-        event.stopPropagation();
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }
-}
-
-function InternalChipAffix({ affix, active, invalid, disabled, }) {
-    assertProps();
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Avatar) {
-        return React.createElement(Avatar, Object.assign({}, affix.props, { size: "small" }));
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === Icon) {
-        return renderChipIcon(affix);
-    }
-    if ((affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton) {
-        return React.createElement(InternalChipButton, Object.assign({}, affix.props));
-    }
-    return React.createElement(React.Fragment, null);
-    function renderChipIcon(icon) {
-        const color = getIconColor();
-        return (React.createElement("div", { className: styles$1.icon }, React.cloneElement(icon, Object.assign({ size: "base" }, (color && { color: color })))));
-    }
-    function getIconColor() {
-        if (disabled && !active)
-            return "disabled";
-        if (invalid && !disabled)
-            return "critical";
-        if (active)
-            return "white";
-        return;
-    }
-    function assertProps() {
-        const isAvatar = (affix === null || affix === void 0 ? void 0 : affix.type) === Avatar || false;
-        const isIcon = (affix === null || affix === void 0 ? void 0 : affix.type) === Icon || false;
-        const isChipButton = (affix === null || affix === void 0 ? void 0 : affix.type) === InternalChipButton || false;
-        useAssert(!!affix && !(isAvatar || isIcon || isChipButton), `Prefix prop only accepts "<Avatar />" or "<Icon />" component. You have "${affix === null || affix === void 0 ? void 0 : affix.type}".`);
-    }
-}
-
-function InternalChip({ label, active = false, disabled = false, invalid = false, prefix, suffix, tabIndex, ariaLabel, onClick, onKeyDown, }) {
-    const [truncateRef, setTruncateRef] = useState();
-    const isClickable = onClick && !disabled;
-    const classNames = classnames(styles$1.chip, {
-        [styles$1.clickable]: isClickable,
-        [styles$1.active]: active,
-        [styles$1.disabled]: disabled,
-        [styles$1.invalid]: invalid,
-        [styles$1.hasPrefix]: prefix,
-        [styles$1.hasSuffix]: suffix,
-    });
-    const affixProps = { active, invalid, disabled };
-    const Tag = onClick ? "button" : "div";
-    const chip = (React.createElement(Tag, Object.assign({ className: classNames }, (isClickable && { onClick, disabled }), { onKeyDown: onKeyDown, "data-testid": "chip-wrapper", "aria-label": ariaLabel, tabIndex: tabIndex, role: tabIndex !== undefined ? "option" : undefined }),
-        React.createElement(InternalChipAffix, Object.assign({ affix: prefix }, affixProps)),
-        React.createElement(Typography, { element: "span", numberOfLines: 1, size: "base" },
-            React.createElement("span", { ref: setTruncateRef }, label)),
-        React.createElement(InternalChipAffix, Object.assign({ affix: suffix }, affixProps))));
-    return isTruncated() ? React.createElement(Tooltip, { message: label }, chip) : chip;
-    function isTruncated() {
-        var _a;
-        const truncateParentHeight = ((_a = truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.parentElement) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
-        const truncateChildHeight = (truncateRef === null || truncateRef === void 0 ? void 0 : truncateRef.offsetHeight) || 0;
-        return truncateChildHeight >= truncateParentHeight * 2;
-    }
-}
-
-function InternalChipSingleSelect({ children, selected, name = useId(), onChange, onClick, }) {
-    return (React.createElement("div", { className: styles$1.wrapper, "data-testid": "singleselect-chips" }, React.Children.map(children, child => {
-        const isSelected = child.props.value === selected;
-        return (React.createElement("label", null,
-            React.createElement("input", { type: "radio", checked: isSelected, className: styles$1.input, name: name, onClick: handleClick(child.props.value), onKeyUp: handleKeyUp(isSelected, child.props.value), onChange: () => {
-                    /* No op. onClick handles the change to allow deselecting. */
-                }, disabled: child.props.disabled }),
-            React.createElement(InternalChip, Object.assign({}, child.props, { active: isSelected }))));
-    })));
-    function handleKeyUp(active, value) {
-        if (!active)
-            return;
-        return (event) => {
-            if (event.key === " ") {
-                // Wait for DOM changes before applying the new change.
-                setTimeout(() => handleChange(value), 0);
-            }
-        };
-    }
-    function handleClick(value) {
-        return (event) => {
-            onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
-            handleChange(value);
-        };
-    }
-    function handleChange(value) {
-        const newValue = value !== selected ? value : undefined;
-        onChange(newValue);
-    }
-}
-
-function InternalChipMultiSelect({ children, selected, onChange, onClick, }) {
-    return (React.createElement("div", { className: styles$1.wrapper, "data-testid": "multiselect-chips" }, React.Children.map(children, chip => {
-        const isChipActive = isChipSelected(chip.props.value);
-        return (React.createElement("label", null,
-            React.createElement("input", { type: "checkbox", checked: isChipActive, className: styles$1.input, onClick: handleClick(chip.props.value), onChange: handleChange(chip.props.value), disabled: chip.props.disabled }),
-            React.createElement(InternalChip, Object.assign({}, chip.props, { active: isChipActive, suffix: checkmarkIcon(isChipActive) }))));
-    })));
-    function isChipSelected(value) {
-        return selected.includes(value);
-    }
-    function handleClick(value) {
-        return (event) => onClick === null || onClick === void 0 ? void 0 : onClick(event, value);
-    }
-    function handleChange(value) {
-        return () => {
-            if (isChipSelected(value)) {
-                handleDeselect(value);
-            }
-            else {
-                handleSelect(value);
-            }
-        };
-    }
-    function handleSelect(value) {
-        const newVal = [...selected, value];
-        onChange(newVal);
-    }
-    function handleDeselect(value) {
-        const values = selected;
-        const newVal = values.filter(val => val !== value);
-        onChange(newVal);
-    }
-    function checkmarkIcon(show) {
-        // Ideally, we should be returning a fragment `<></>` when a function
-        // returns a component / element. However, this one needs to return nothing
-        // to prevent it from randomly rendering a suffix.
-        //
-        // DO NOT COPY!
-        if (!show)
-            return;
-        return React.createElement(Icon, { name: "checkmark" });
-    }
-}
-
-var css_248z = ".sCNIjluCskc- {\n  display: -ms-flexbox;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  border: var(--border-base) solid transparent;\n  border-radius: var(--radius-base);\n  transition: all var(--timing-base);\n  gap: var(--space-small);\n  -ms-flex-wrap: wrap;\n      flex-wrap: wrap;\n  -ms-flex-align: center;\n      align-items: center;\n}\n\n.MFUlz1WQLdk- {\n  -ms-flex: 1;\n      flex: 1;\n  min-width: 120px;\n  padding: var(--space-small) 0;\n  border: none;\n  border-radius: 0;\n  color: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-size: var(--typography--fontSize-base);\n  line-height: var(--typography--lineHeight-base);\n  background: transparent;\n  -webkit-appearance: none;\n          appearance: none;\n}\n\n.MFUlz1WQLdk-:focus {\n  outline: none;\n}\n\n.V9eYJdjPAeY- {\n  position: relative;\n  z-index: var(--elevation-menu);\n  width: 100%;\n}\n\n.LdytkOeCU9c- {\n  max-height: 320px;\n  box-shadow: var(--shadow-base);\n  padding: var(--space-small) 0;\n  border-radius: var(--radius-base);\n  overflow-y: scroll;\n  background-color: var(--color-surface);\n}\n\n.y7Cz2u8BuNE-,\n._-7bmao8Q9As- {\n  display: -ms-flexbox;\n  display: flex;\n  width: 100%;\n  padding: var(--space-small);\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  -webkit-appearance: none;\n          appearance: none;\n  -ms-flex-align: center;\n      align-items: center;\n  gap: var(--space-small);\n}\n\n.y7Cz2u8BuNE-:focus {\n  box-shadow: var(--shadow-focus);\n}\n\n.y7Cz2u8BuNE-:focus,\n.iCwWdcmtInc- {\n  outline: none;\n  background-color: var(--color-surface--hover);\n}\n\n._-7bmao8Q9As- {\n  -ms-flex-pack: center;\n      justify-content: center;\n}\n";
-var styles = {"wrapper":"sCNIjluCskc-","input":"MFUlz1WQLdk-","menu":"V9eYJdjPAeY-","menuList":"LdytkOeCU9c-","menuListOption":"y7Cz2u8BuNE-","loadingIndicator":"_-7bmao8Q9As-","activeOption":"iCwWdcmtInc-"};
-styleInject(css_248z);
-
-function useInternalChipDismissible({ children, selected, onChange, onClick, onCustomAdd, }) {
-    const ref = useRef(null);
-    const chipOptions = children.map(chip => chip.props);
-    const visibleChipOptions = chipOptions.filter(chip => selected.includes(chip.value));
-    const sortedVisibleChipOptions = sortBy(visibleChipOptions, chip => selected.indexOf(chip.value));
-    const availableChipOptions = chipOptions.filter(chip => !selected.includes(chip.value));
-    const { liveAnnounce } = useLiveAnnounce();
-    const actions = {
-        handleChipRemove: (value) => {
-            return () => {
-                liveAnnounce(`${value} Removed`);
-                onChange(selected.filter(val => val !== value));
-            };
-        },
-        handleChipAdd: (value) => onChange([...selected, value]),
-        handleCustomAdd: onCustomAdd,
-        handleChipClick: (value) => {
-            if (onClick === undefined)
-                return;
-            return (event) => onClick(event, value);
-        },
-        handleWrapperKeyDown: (event) => {
-            const target = event.target;
-            const isInputAndHasValue = target instanceof HTMLInputElement && target.value;
-            if (isInputAndHasValue)
-                return;
-            const nextElementToFocus = target.nextElementSibling;
-            const prevElementToFocus = target.previousElementSibling;
-            if (event.key === "ArrowLeft" &&
-                prevElementToFocus instanceof HTMLElement) {
-                prevElementToFocus.focus();
-            }
-            if (event.key === "ArrowRight" &&
-                nextElementToFocus instanceof HTMLElement) {
-                nextElementToFocus.focus();
-            }
-        },
-        handleChipKeyDown: (value) => {
-            return (event) => {
-                if (event.key === "Backspace" || event.key === "Delete") {
-                    const target = event.target;
-                    if (target instanceof HTMLElement) {
-                        const prevElement = target.previousElementSibling;
-                        const nextElement = target.nextElementSibling;
-                        if (prevElement instanceof HTMLElement) {
-                            prevElement.focus();
-                        }
-                        else if (nextElement instanceof HTMLElement) {
-                            nextElement.focus();
-                        }
-                    }
-                    actions.handleChipRemove(value)();
-                }
-            };
-        },
-    };
-    return Object.assign(Object.assign({}, actions), { ref,
-        sortedVisibleChipOptions,
-        availableChipOptions });
-}
-
-// eslint-disable-next-line max-statements
-function useInternalChipDismissibleInput({ options, isLoadingMore = false, onCustomOptionSelect, onOptionSelect, onSearch, }) {
-    const menuId = useId();
-    const [allOptions, setAllOptions] = useState([]);
-    const [searchValue, setSearchValue] = useState("");
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(0);
-    const [shouldCancelBlur, setShouldCancelBlur] = useState(false);
-    const [shouldCancelEnter, setShouldCancelEnter] = useState(false);
-    const canAddCustomOption = onCustomOptionSelect !== undefined && !isLoadingMore;
-    const maxOptionIndex = allOptions.length - 1;
-    const { liveAnnounce } = useLiveAnnounce();
-    useEffect(() => {
-        setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
-    }, [options]);
-    const computed = {
-        menuId,
-        inputRef: useRef(null),
-        activeOption: allOptions[activeIndex],
-        hasAvailableOptions: allOptions.length > 0,
-        nextOptionIndex: activeIndex < maxOptionIndex ? activeIndex + 1 : 0,
-        previousOptionIndex: activeIndex > 0 ? activeIndex - 1 : maxOptionIndex,
-    };
-    const actions = {
-        generateDescendantId: (index) => `${computed.menuId}-${index}`,
-        handleReset: () => {
-            setActiveIndex(activeIndex === 0 ? activeIndex : activeIndex - 1);
-            setSearchValue("");
-        },
-        handleOpenMenu: () => setMenuOpen(true),
-        handleCloseMenu: () => {
-            setMenuOpen(false);
-            setActiveIndex(0);
-        },
-        handleCancelBlur: () => setShouldCancelBlur(true),
-        handleEnableBlur: () => setShouldCancelBlur(false),
-        handleBlur: () => {
-            if (shouldCancelBlur)
-                return;
-            actions.handleReset();
-            actions.handleCloseMenu();
-        },
-        handleSearchChange: (event) => {
-            setActiveIndex(0);
-            setSearchValue(event.currentTarget.value);
-            setShouldCancelEnter(true);
-        },
-        handleSetActiveOnMouseOver: (index) => {
-            return () => setActiveIndex(index);
-        },
-        handleSelectOption: (selected) => {
-            var _a;
-            if (allOptions.length === 0)
-                return;
-            const setValue = selected.custom ? onCustomOptionSelect : onOptionSelect;
-            if (setValue) {
-                setValue(selected.value);
-                liveAnnounce(`${selected.label} Added`);
-                actions.handleReset();
-                (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-        },
-        handleKeyDown: (event) => {
-            const callbacks = {
-                Enter: () => {
-                    if (shouldCancelEnter)
-                        return;
-                    actions.handleSelectOption(computed.activeOption);
-                },
-                Tab: () => actions.handleSelectOption(computed.activeOption),
-                ",": () => {
-                    if (searchValue.length === 0)
-                        return;
-                    actions.handleSelectOption(generateCustomOptionObject(searchValue));
-                },
-                ArrowDown: () => {
-                    if (isLoadingMore && activeIndex === maxOptionIndex)
-                        return;
-                    setActiveIndex(computed.nextOptionIndex);
-                },
-                ArrowUp: () => setActiveIndex(computed.previousOptionIndex),
-            };
-            if (searchValue.length === 0) {
-                callbacks.Backspace = () => {
-                    var _a;
-                    // If there's no text left to delete,
-                    // and delete is pressed again, focus on a chip instead.
-                    const target = (_a = computed.inputRef.current) === null || _a === void 0 ? void 0 : _a.previousElementSibling;
-                    if (target instanceof HTMLElement) {
-                        target.focus();
-                    }
-                };
-            }
-            handleKeydownEvents(callbacks, event);
-        },
-        handleDebouncedSearch: debounce(() => {
-            onSearch && onSearch(searchValue);
-            setAllOptions(generateOptions(options, searchValue, canAddCustomOption));
-            setShouldCancelEnter(false);
-        }, 300),
-    };
-    return Object.assign(Object.assign(Object.assign(Object.assign({}, actions), { activeIndex,
-        allOptions }), computed), { menuOpen,
-        searchValue,
-        shouldCancelBlur });
-}
-function generateOptions(options, searchValue, canAddCustomOption) {
-    const allOptions = options
-        .filter(option => option.label.toLowerCase().match(searchValue.trim().toLowerCase()))
-        .map(opt => (Object.assign(Object.assign({}, opt), { custom: false })));
-    const { shouldAddCustomOption, customOption } = generateCustomOption(allOptions, searchValue, canAddCustomOption);
-    shouldAddCustomOption && allOptions.push(customOption);
-    return allOptions;
-}
-function generateCustomOption(options, searchValue, canAddCustomOption) {
-    function shouldAddCustomOption() {
-        const isMatchingOption = options.some(option => option.label.toLowerCase() === searchValue.trim().toLowerCase());
-        return !!searchValue && !isMatchingOption;
-    }
-    return {
-        shouldAddCustomOption: canAddCustomOption && shouldAddCustomOption(),
-        customOption: generateCustomOptionObject(searchValue),
-    };
-}
-function generateCustomOptionObject(searchValue) {
-    return {
-        value: searchValue,
-        label: searchValue,
-        prefix: React.createElement(Icon, { name: "add" }),
-        custom: true,
-    };
-}
-function handleKeydownEvents(callbacks, event) {
-    if (event.shiftKey)
-        return;
-    Object.entries(callbacks).forEach(([key, callback]) => {
-        if (event.key === key) {
-            event.preventDefault();
-            callback(event);
-        }
-    });
-}
-
-function useInView() {
-    const ref = useRef(null);
-    const [isInView, setIsInView] = useState(false);
-    if (window.IntersectionObserver) {
-        const observer = new IntersectionObserver(entries => {
-            setIsInView(entries[0].isIntersecting);
-        });
-        useEffect(() => {
-            ref.current && observer.observe(ref.current);
-            return () => {
-                if (!ref.current)
-                    return;
-                observer.unobserve(ref.current);
-            };
-        });
-    }
-    return { ref, isInView };
-}
-
-function useRepositionMenu(attachTo) {
-    var _a;
-    const [positionElement, setPositionedElementRef] = useState();
-    const popper = usePopper(attachTo.current, positionElement, {
-        modifiers: [
-            { name: "offset", options: { offset: [0, 8] } },
-            { name: "flip", options: { fallbackPlacements: ["top"] } },
-        ],
-    });
-    const targetWidth = (_a = attachTo.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-    return Object.assign(Object.assign({}, popper), { setPositionedElementRef, targetWidth });
-}
-
-function useScrollToActive(index) {
-    const ref = useRef(null);
-    useEffect(() => {
-        var _a, _b;
-        if (!window.HTMLElement.prototype.scrollIntoView)
-            return;
-        (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.children[index]) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
-            behavior: "smooth",
-            block: "nearest",
-            inline: "start",
-        });
-    }, [index]);
-    return ref;
-}
-
-function InternalChipDismissibleInput(props) {
-    const { activator = React.createElement(Button, { icon: "add", type: "secondary", ariaLabel: "Add" }), attachTo, isLoadingMore = false, onLoadMore, } = props;
-    const { activeIndex, allOptions, hasAvailableOptions, inputRef, menuId, menuOpen, searchValue, generateDescendantId, handleBlur, handleOpenMenu, handleSearchChange, handleCancelBlur, handleEnableBlur, handleSetActiveOnMouseOver, handleKeyDown, handleSelectOption, handleDebouncedSearch, } = useInternalChipDismissibleInput(props);
-    const menuRef = useScrollToActive(activeIndex);
-    const { ref: visibleChildRef, isInView } = useInView();
-    const { styles: popperStyles, attributes, update, setPositionedElementRef, } = useRepositionMenu(attachTo);
-    useEffect(() => {
-        if (menuOpen && update)
-            update();
-    }, [allOptions]);
-    useEffect(() => {
-        handleDebouncedSearch();
-        return handleDebouncedSearch.cancel;
-    }, [searchValue]);
-    useEffect(() => {
-        isInView && onLoadMore && onLoadMore(searchValue);
-    }, [isInView]);
-    if (!menuOpen) {
-        return React.cloneElement(activator, { onClick: handleOpenMenu });
-    }
-    return (React.createElement(React.Fragment, null,
-        React.createElement("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": "Press up and down arrow to cycle through the options or type to narrow down the results", "aria-autocomplete": "list", "aria-owns": menuId, "aria-expanded": hasAvailableOptions, "aria-activedescendant": generateDescendantId(activeIndex), value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, onBlur: debounce(handleBlur, 200), onFocus: handleOpenMenu, autoFocus: true }),
-        (hasAvailableOptions || isLoadingMore) && (React.createElement("div", Object.assign({ ref: setPositionedElementRef, className: styles.menu, style: popperStyles.popper }, attributes.popper),
-            React.createElement("div", { ref: menuRef, role: "listbox", id: menuId, className: styles.menuList, "data-testid": "chip-menu" },
-                allOptions.map((option, i) => (React.createElement("button", { key: option.value, role: "option", type: "button", id: generateDescendantId(i), className: classnames(styles.menuListOption, {
-                        [styles.activeOption]: activeIndex === i,
-                    }), onClick: () => handleSelectOption(option), onMouseEnter: handleSetActiveOnMouseOver(i), onMouseDown: handleCancelBlur, onMouseUp: handleEnableBlur },
-                    React.createElement("span", { "aria-hidden": true }, option.prefix),
-                    React.createElement(Text, null, option.label)))),
-                React.createElement("div", { ref: visibleChildRef }),
-                isLoadingMore && (React.createElement("div", { className: styles.loadingIndicator },
-                    React.createElement(Spinner, { size: "small", inline: true }))))))));
-}
-
-function InternalChipDismissible(props) {
-    const { availableChipOptions, ref: wrapperRef, sortedVisibleChipOptions, handleChipAdd, handleChipClick, handleChipKeyDown, handleChipRemove, handleCustomAdd, handleWrapperKeyDown, } = useInternalChipDismissible(props);
-    return (React.createElement("div", { ref: wrapperRef, className: styles.wrapper, "data-testid": "dismissible-chips", onKeyDown: handleWrapperKeyDown, role: "listbox" },
-        sortedVisibleChipOptions.map(chip => (React.createElement(InternalChip, Object.assign({ key: chip.value }, chip, { onKeyDown: handleChipKeyDown(chip.value), onClick: handleChipClick(chip.value), ariaLabel: `${chip.label}. Press delete or backspace to remove ${chip.label}`, tabIndex: 0, suffix: React.createElement(InternalChipButton, { icon: "remove", invalid: chip.invalid, disabled: chip.disabled, label: chip.label, onClick: handleChipRemove(chip.value) }) })))),
-        React.createElement(InternalChipDismissibleInput, { activator: props.activator, attachTo: wrapperRef, isLoadingMore: props.isLoadingMore, options: availableChipOptions, onOptionSelect: handleChipAdd, onCustomOptionSelect: handleCustomAdd, onSearch: props.onSearch, onLoadMore: props.onLoadMore })));
-}
-
-function Chips(props) {
-    switch (props.type) {
-        case "dismissible":
-            return React.createElement(InternalChipDismissible, Object.assign({}, props));
-        case "multiselect":
-            return React.createElement(InternalChipMultiSelect, Object.assign({}, props));
-        default:
-            return React.createElement(InternalChipSingleSelect, Object.assign({}, props));
-    }
-}
-
-export { Chips as C, InternalChip as I, InternalChipButton as a };