@deque/cauldron-react 5.8.1 → 5.9.0-canary.07ef06bd

package/lib/index.js

@@ -961,7 +961,7 @@ var ClickOutsideListener = /** @class */ (function (_super) {
     return ClickOutsideListener;
 }(React__default["default"].Component));
 
-var _a$1 = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a$1[0], down$1 = _a$1[1], tab = _a$1[2], enter = _a$1[3], space = _a$1[4], esc = _a$1[5];
+var _a$2 = tslib.__read([38, 40, 9, 13, 32, 27], 6), up = _a$2[0], down$1 = _a$2[1], tab = _a$2[2], enter = _a$2[3], space = _a$2[4], esc = _a$2[5];
 var OptionsMenuList = /** @class */ (function (_super) {
     tslib.__extends(OptionsMenuList, _super);
     function OptionsMenuList(props) {
@@ -1096,7 +1096,7 @@ var OptionsMenuList = /** @class */ (function (_super) {
     return OptionsMenuList;
 }(React__default["default"].Component));
 
-var _a = tslib.__read([40], 1), down = _a[0];
+var _a$1 = tslib.__read([40], 1), down = _a$1[0];
 var OptionsMenu = /** @class */ (function (_super) {
     tslib.__extends(OptionsMenu, _super);
     function OptionsMenu(props) {
@@ -1664,22 +1664,32 @@ var Dialog = /** @class */ (function (_super) {
     return Dialog;
 }(React__default["default"].Component));
 var DialogContent = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__content', className) }, other), children));
+    var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__content', className, {
+            'text--align-left': align === 'left',
+            'text--align-center': align === 'center',
+            'text--align-right': align === 'right'
+        }) }, other), children));
 };
 DialogContent.displayName = 'DialogContent';
 DialogContent.propTypes = {
     className: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node
+    children: PropTypes__default["default"].node,
+    align: PropTypes__default["default"].string
 };
 var DialogFooter = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__footer', className) }, other), children));
+    var children = _a.children, className = _a.className, align = _a.align, other = tslib.__rest(_a, ["children", "className", "align"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Dialog__footer', className, {
+            'text--align-left': align === 'left',
+            'text--align-center': align === 'center',
+            'text--align-right': align === 'right'
+        }) }, other), children));
 };
 DialogFooter.displayName = 'DialogFooter';
 DialogFooter.propTypes = {
     className: PropTypes__default["default"].string,
-    children: PropTypes__default["default"].node
+    children: PropTypes__default["default"].node,
+    align: PropTypes__default["default"].string
 };
 
 var Alert = function (_a) {
@@ -1813,7 +1823,10 @@ function Tooltip(_a) {
         placement: initialPlacement,
         modifiers: [
             { name: 'preventOverflow', options: { padding: 8 } },
-            { name: 'flip' },
+            {
+                name: 'flip',
+                options: { fallbackPlacements: ['left', 'right', 'top', 'bottom'] }
+            },
             { name: 'offset', options: { offset: [0, 8] } },
             { name: 'arrow', options: { padding: 5, element: arrowElement } }
         ]
@@ -3157,6 +3170,15 @@ Tag.propTypes = {
     className: PropTypes__default["default"].string
 };
 
+var TagButton = React__default["default"].forwardRef(function (_a, ref) {
+    var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, rest = tslib.__rest(_a, ["label", "value", "icon", "className"]);
+    return (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", className: classNames__default["default"]('TagButton', className), ref: ref }, rest),
+        React__default["default"].createElement(TagLabel, null, label),
+        value,
+        React__default["default"].createElement(Icon, { className: "TagButton__icon", type: icon })));
+});
+TagButton.displayName = 'TagButton';
+
 var Table = function (_a) {
     var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
     return (React__default["default"].createElement("table", tslib.__assign({ className: classNames__default["default"]('Table', variant === 'border' && 'Table--border', className) }, other), children));
@@ -3943,6 +3965,748 @@ Notice.propTypes = {
     icon: PropTypes__default["default"].string
 };
 
+/* istanbul ignore next */
+var ListboxContext = React.createContext({
+    options: [],
+    active: null,
+    selected: null,
+    setOptions: function () { return null; },
+    onSelect: function () { return null; }
+});
+function ListboxProvider(_a) {
+    var options = _a.options, active = _a.active, selected = _a.selected, setOptions = _a.setOptions, onSelect = _a.onSelect, children = _a.children;
+    var Provider = ListboxContext.Provider;
+    var value = React.useMemo(function () { return ({
+        options: options,
+        active: active,
+        selected: selected,
+        setOptions: setOptions,
+        onSelect: onSelect
+    }); }, [options, active, selected, setOptions]);
+    return React__default["default"].createElement(Provider, { value: value }, children);
+}
+function useListboxContext() {
+    return React.useContext(ListboxContext);
+}
+
+var keys = ['ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', ' '];
+// id for listbox options should always be defined since it should
+// be provide via the author, or auto-generated via the component
+var getOptionId = function (option) {
+    return option.element.getAttribute('id');
+};
+var isDisabledOption = function (option) {
+    return option.element.getAttribute('aria-disabled') === 'true';
+};
+var optionMatchesValue = function (option, value) {
+    return typeof option.value !== null &&
+        typeof option.value !== 'undefined' &&
+        option.value === value;
+};
+var Listbox = React.forwardRef(function (_a, ref) {
+    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, defaultValue = _a.defaultValue, value = _a.value, _c = _a.navigation, navigation = _c === void 0 ? 'bound' : _c, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange"]);
+    var _d = tslib.__read(React.useState([]), 2), options = _d[0], setOptions = _d[1];
+    var _e = tslib.__read(React.useState(null), 2), activeOption = _e[0], setActiveOption = _e[1];
+    var _f = tslib.__read(React.useState(null), 2), selectedOption = _f[0], setSelectedOption = _f[1];
+    var listboxRef = useSharedRef(ref);
+    var isControlled = typeof value !== 'undefined';
+    React.useLayoutEffect(function () {
+        if (!isControlled && selectedOption) {
+            return;
+        }
+        var listboxValue = isControlled ? value : defaultValue;
+        var matchingOption = options.find(function (option) {
+            return optionMatchesValue(option, listboxValue);
+        });
+        setSelectedOption(matchingOption || null);
+        setActiveOption(matchingOption || null);
+    }, [isControlled, options, value]);
+    React.useEffect(function () {
+        if (activeOption) {
+            onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(activeOption);
+        }
+    }, [activeOption]);
+    var handleSelect = React.useCallback(function (option) {
+        setActiveOption(option);
+        // istanbul ignore else
+        if (!isControlled) {
+            setSelectedOption(option);
+        }
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+            target: option.element,
+            value: option.value,
+            previousValue: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value
+        });
+    }, [isControlled, selectedOption]);
+    var handleKeyDown = React.useCallback(function (event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (!keys.includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        var enabledOptions = options.filter(function (option) { return !isDisabledOption(option); });
+        // istanbul ignore next
+        if (!enabledOptions.length) {
+            return;
+        }
+        var _a = tslib.__read(keys, 6), up = _a[0], down = _a[1], home = _a[2], end = _a[3], enter = _a[4], space = _a[5];
+        var firstOption = enabledOptions[0];
+        if (!activeOption) {
+            setActiveOption(firstOption);
+            return;
+        }
+        var lastOption = enabledOptions[enabledOptions.length - 1];
+        var currentOption = activeOption;
+        var currentIndex = enabledOptions.findIndex(function (_a) {
+            var element = _a.element;
+            return element === currentOption.element;
+        });
+        var allowCyclicalNavigation = navigation === 'cycle';
+        switch (event.key) {
+            case up:
+                var previousOption = currentIndex === 0 && allowCyclicalNavigation
+                    ? lastOption
+                    : enabledOptions[Math.max(currentIndex - 1, 0)];
+                setActiveOption(previousOption);
+                break;
+            case down:
+                var nextOption = currentIndex === enabledOptions.length - 1 &&
+                    allowCyclicalNavigation
+                    ? firstOption
+                    : enabledOptions[Math.min(currentIndex + 1, enabledOptions.length - 1)];
+                setActiveOption(nextOption);
+                break;
+            case home:
+                setActiveOption(firstOption);
+                break;
+            case end:
+                setActiveOption(lastOption);
+                break;
+            case enter:
+            case space:
+                activeOption && handleSelect(activeOption);
+                break;
+        }
+    }, [options, activeOption, navigation]);
+    var handleFocus = React.useCallback(function (event) {
+        if (!activeOption && !selectedOption) {
+            var firstOption = options.find(function (option) { return !isDisabledOption(option); });
+            // istanbul ignore else
+            if (firstOption) {
+                setActiveOption(firstOption);
+            }
+            // istanbul ignore else
+        }
+        else if (event.target === listboxRef.current) {
+            setActiveOption(selectedOption);
+        }
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    }, [options, activeOption, selectedOption]);
+    return (React__default["default"].createElement(Component, tslib.__assign({ role: "listbox", ref: listboxRef, tabIndex: "0", onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-activedescendant": activeOption ? getOptionId(activeOption) : undefined }, props),
+        React__default["default"].createElement(ListboxProvider, { options: options, active: activeOption, selected: selectedOption, setOptions: setOptions, onSelect: handleSelect }, children)));
+});
+Listbox.displayName = 'Listbox';
+
+function isElementPreceding(a, b) {
+    return !!(b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING);
+}
+var ListboxOption = React.forwardRef(function (_a, ref) {
+    var _b;
+    var _c;
+    var propId = _a.id, className = _a.className, _d = _a.as, Component = _d === void 0 ? 'li' : _d, children = _a.children, value = _a.value, disabled = _a.disabled, _e = _a.activeClass, activeClass = _e === void 0 ? 'ListboxOption--active' : _e, onClick = _a.onClick, props = tslib.__rest(_a, ["id", "className", "as", "children", "value", "disabled", "activeClass", "onClick"]);
+    var _f = useListboxContext(), active = _f.active, selected = _f.selected, setOptions = _f.setOptions, onSelect = _f.onSelect;
+    var listboxOptionRef = useSharedRef(ref);
+    var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'listbox-option'), 1), id = _g[0];
+    var isActive = active !== null && active.element === listboxOptionRef.current;
+    var isSelected = selected !== null && selected.element === listboxOptionRef.current;
+    var optionValue = typeof value !== 'undefined'
+        ? value
+        : (_c = listboxOptionRef.current) === null || _c === void 0 ? void 0 : _c.innerText;
+    React.useEffect(function () {
+        var element = listboxOptionRef.current;
+        setOptions(function (options) {
+            var e_1, _a;
+            var option = { element: element, value: optionValue };
+            // istanbul ignore next
+            if (!element)
+                return options;
+            // Elements are frequently appended, so check to see if the newly rendered
+            // element follows the last element first before any other checks
+            if (!options.length ||
+                isElementPreceding(options[options.length - 1].element, option.element)) {
+                return tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(options), false), [option], false);
+            }
+            try {
+                for (var options_1 = tslib.__values(options), options_1_1 = options_1.next(); !options_1_1.done; options_1_1 = options_1.next()) {
+                    var opt = options_1_1.value;
+                    if (isElementPreceding(element, opt.element)) {
+                        var index = options.indexOf(opt);
+                        return tslib.__spreadArray(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(options.slice(0, index)), false), [
+                            option
+                        ], false), tslib.__read(options.slice(index)), false);
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (options_1_1 && !options_1_1.done && (_a = options_1.return)) _a.call(options_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            // istanbul ignore next
+            // this should never happen, but just in case fall back to options
+            return options;
+        });
+        return function () {
+            setOptions(function (opts) { return opts.filter(function (opt) { return opt.element !== element; }); });
+        };
+    }, [optionValue]);
+    var handleClick = React.useCallback(function (event) {
+        if (disabled) {
+            return;
+        }
+        onSelect({ element: listboxOptionRef.current, value: optionValue });
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    }, [optionValue]);
+    return (React__default["default"].createElement(Component, tslib.__assign({ id: id, className: classNames__default["default"](className, (_b = {},
+            _b[activeClass] = isActive,
+            _b)), role: "option", ref: listboxOptionRef, "aria-disabled": typeof disabled === 'boolean' ? disabled : undefined, "aria-selected": isSelected, onClick: handleClick }, props), children));
+});
+ListboxOption.displayName = 'ListboxOption';
+
+var ListboxGroup = React.forwardRef(function (_a, ref) {
+    var _b = _a.as, Component = _b === void 0 ? 'ul' : _b, children = _a.children, propId = _a.id, label = _a.label, groupLabelProps = _a.groupLabelProps, props = tslib.__rest(_a, ["as", "children", "id", "label", "groupLabelProps"]);
+    var _c = tslib.__read(propId ? [propId] : nextId.useId(1, 'listbox-group-label'), 1), id = _c[0];
+    return (React__default["default"].createElement(Component, tslib.__assign({ role: "group", ref: ref, "aria-labelledby": id }, props),
+        React__default["default"].createElement("li", tslib.__assign({ role: "presentation", id: id }, groupLabelProps), label),
+        children));
+});
+ListboxGroup.displayName = 'ListboxGroup';
+
+/* istanbul ignore next */
+var ComboboxContext = React.createContext({
+    autocomplete: 'manual',
+    inputValue: undefined,
+    selectedValue: undefined,
+    matches: true,
+    matchingOptions: new Map(),
+    setMatchingOptions: function () { return null; }
+});
+function ComboboxProvider(_a) {
+    var autocomplete = _a.autocomplete, inputValue = _a.inputValue, selectedValue = _a.selectedValue, matches = _a.matches, matchingOptions = _a.matchingOptions, setMatchingOptions = _a.setMatchingOptions, children = _a.children;
+    var Provider = ComboboxContext.Provider;
+    var contextValue = React.useMemo(function () { return ({
+        autocomplete: autocomplete,
+        inputValue: inputValue,
+        selectedValue: selectedValue,
+        matches: typeof matches === 'function' && !!inputValue
+            ? function (value) { return matches(inputValue, value); }
+            : true,
+        matchingOptions: matchingOptions,
+        setMatchingOptions: setMatchingOptions
+    }); }, [
+        autocomplete,
+        inputValue,
+        selectedValue,
+        matches,
+        matchingOptions,
+        setMatchingOptions
+    ]);
+    return React__default["default"].createElement(Provider, { value: contextValue }, children);
+}
+function useComboboxContext() {
+    return React.useContext(ComboboxContext);
+}
+
+/**
+ * When a component needs to track intersection via a ref, useIntersectionRef
+ * will return a ref object containing the results from IntersectionObserver
+ * for the current intersection entry.
+ *
+ * @example
+ * const elementRef = useRef<HTMLElement>()
+ * const intersectionRef = useIntersectionRef<HTMLElement>(elementRef)
+ * return <span ref={elementRef}>...</span>
+ */
+function useIntersectionRef(element, intersectionObserverOptions) {
+    if (intersectionObserverOptions === void 0) { intersectionObserverOptions = {
+        root: null,
+        threshold: 1.0
+    }; }
+    var intersectionRef = React.useRef(null);
+    React.useEffect(function () {
+        // istanbul ignore else
+        if ('IntersectionObserver' in globalThis &&
+            typeof IntersectionObserver === 'function') {
+            if (typeof element === 'undefined' || element === null) {
+                return;
+            }
+            if (!(element instanceof HTMLElement) &&
+                !(element.current instanceof HTMLElement)) {
+                console.warn('An element or ref was provided to useIntersectionRef that was not an HTMLElement.');
+                return;
+            }
+            var handleIntersection = function (_a) {
+                var _b = tslib.__read(_a, 1), entry = _b[0];
+                intersectionRef.current = entry;
+            };
+            var observer_1 = new IntersectionObserver(handleIntersection, intersectionObserverOptions);
+            observer_1.observe(element instanceof HTMLElement ? element : element.current);
+            return function () {
+                observer_1.disconnect();
+            };
+        }
+    }, [element]);
+    return intersectionRef;
+}
+
+var ComboboxMatch = function (_a) {
+    var text = _a.children;
+    var inputValue = useComboboxContext().inputValue;
+    if (!(inputValue === null || inputValue === void 0 ? void 0 : inputValue.length)) {
+        return React__default["default"].createElement("span", null, text);
+    }
+    var matchStart = text.toLowerCase().indexOf(inputValue === null || inputValue === void 0 ? void 0 : inputValue.toLowerCase());
+    if (matchStart === -1) {
+        return React__default["default"].createElement("span", null, text);
+    }
+    var matchLength = inputValue.length;
+    var matchBefore = text.substring(0, matchStart);
+    var match = text.substring(matchStart, matchLength + matchStart);
+    var matchAfter = text.substring(matchStart + matchLength);
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", null, matchBefore),
+        React__default["default"].createElement("em", { className: "ComboboxOption__match" }, match),
+        React__default["default"].createElement("span", null, matchAfter)));
+};
+var ComboboxOption = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, disabled = _a.disabled, propId = _a.id, description = _a.description, propValue = _a.value, props = tslib.__rest(_a, ["className", "children", "disabled", "id", "description", "value"]);
+    var _b = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox-option'), 1), id = _b[0];
+    var _c = useListboxContext(), selected = _c.selected, active = _c.active;
+    var _d = useComboboxContext(), matches = _d.matches, setMatchingOptions = _d.setMatchingOptions;
+    var comboboxOptionRef = useSharedRef(ref);
+    var intersectionRef = useIntersectionRef(comboboxOptionRef, {
+        root: null,
+        threshold: 1.0
+    });
+    var isActive = !!(active === null || active === void 0 ? void 0 : active.element) && active.element === comboboxOptionRef.current;
+    var isSelected = !!(selected === null || selected === void 0 ? void 0 : selected.element) && selected.element === comboboxOptionRef.current;
+    var isMatching = (typeof matches === 'boolean' && matches) ||
+        (typeof matches === 'function' && matches(children));
+    // istanbul ignore next
+    React.useLayoutEffect(function () {
+        var intersectionEntry = intersectionRef.current;
+        if (!intersectionEntry || !isActive) {
+            return;
+        }
+        var rect = comboboxOptionRef.current.getBoundingClientRect();
+        var isInViewport = rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth;
+        if (!isInViewport || !intersectionEntry.isIntersecting) {
+            comboboxOptionRef.current.scrollIntoView({
+                inline: 'nearest',
+                block: rect.top <= 0 ? 'end' : 'nearest'
+            });
+        }
+    }, [isActive]);
+    React.useEffect(function () {
+        if (isMatching) {
+            setMatchingOptions(function (options) {
+                return new Map(options.set(comboboxOptionRef.current, {
+                    value: children,
+                    selected: isSelected
+                }));
+            });
+        }
+        return function () {
+            setMatchingOptions(function (options) {
+                options.forEach(function (_value, element) {
+                    // istanbul ignore else
+                    if (!element.isConnected) {
+                        options.delete(element);
+                    }
+                });
+                return new Map(options);
+            });
+        };
+    }, [isMatching, isSelected]);
+    if (!isMatching) {
+        return null;
+    }
+    return (React__default["default"].createElement(ListboxOption, tslib.__assign({ as: "li", className: classNames__default["default"]('ComboboxOption', className, {
+            'ComboboxOption--disabled': disabled
+        }), activeClass: "ComboboxOption--active", ref: comboboxOptionRef, disabled: disabled, id: id, value: propValue }, props),
+        React__default["default"].createElement("span", null,
+            React__default["default"].createElement(ComboboxMatch, null, children),
+            description && (React__default["default"].createElement("div", { className: "ComboboxOption__description" }, description))),
+        isSelected ? React__default["default"].createElement(Icon, { type: "check-solid" }) : null));
+});
+ComboboxOption.displayName = 'ComboboxOption';
+
+// Event Keys
+var _a = tslib.__read(['Enter', 'Escape', 'Home', 'End'], 4), Enter = _a[0], Escape = _a[1], Home = _a[2], End = _a[3];
+var defaultAutoCompleteMatches = function (inputValue, value) {
+    // istanbul ignore if
+    if (!value) {
+        return true;
+    }
+    return value.toLowerCase().includes(inputValue.toLowerCase());
+};
+var ComboboxNoResults = function (_a) {
+    var children = _a.children;
+    return (React__default["default"].createElement("div", { className: "ComboboxListbox__empty", role: "alert", "aria-live": "polite" }, children || 'No results found.'));
+};
+var Combobox = React.forwardRef(function (_a, ref) {
+    var propId = _a.id, className = _a.className, label = _a.label, children = _a.children, _b = _a.options, options = _b === void 0 ? [] : _b, propValue = _a.value, defaultValue = _a.defaultValue, _c = _a.requiredText, requiredText = _c === void 0 ? 'Required' : _c, error = _a.error, _d = _a.autocomplete, autocomplete = _d === void 0 ? 'manual' : _d, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, renderNoResults = _a.renderNoResults, portal = _a.portal, props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "renderNoResults", "portal"]);
+    var _e = tslib.__read(React.useState(defaultValue || propValue || ''), 2), value = _e[0], setValue = _e[1];
+    var _f = tslib.__read(React.useState(new Map()), 2), matchingOptions = _f[0], setMatchingOptions = _f[1];
+    var _g = tslib.__read(React.useState(value || ''), 2), selectedValue = _g[0], setSelectedValue = _g[1];
+    var _h = tslib.__read(React.useState(false), 2), open = _h[0], setOpen = _h[1];
+    var _j = tslib.__read(React.useState(null), 2), activeDescendant = _j[0], setActiveDescendant = _j[1];
+    var _k = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _k[0];
+    var comboboxRef = useSharedRef(ref);
+    var inputRef = React.useRef(null);
+    var listboxRef = React.useRef(null);
+    var isControlled = typeof propValue !== 'undefined';
+    var isRequired = !!props.required;
+    var isAutoComplete = autocomplete !== 'none';
+    var hasError = !!error;
+    var comboboxOptions = children ||
+        options.map(function (option, index) { return (React__default["default"].createElement(ComboboxOption, { key: option.key || index, id: "".concat(id, "-option-").concat(index + 1), description: option.description }, option.label)); });
+    var triggerListboxKeyDown = React__default["default"].useCallback(function (key) {
+        var _a;
+        (_a = listboxRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new KeyboardEvent('keydown', {
+            key: key,
+            bubbles: true,
+            cancelable: true
+        }));
+    }, [listboxRef]);
+    React.useEffect(function () {
+        if (!isAutoComplete) {
+            return;
+        }
+        if (!open && selectedValue && value !== selectedValue) {
+            setValue(selectedValue);
+        }
+        if (!open) {
+            setActiveDescendant(null);
+        }
+        if (open && autocomplete === 'automatic' && !selectedValue) {
+            // Fire an Home keydown event on listbox to ensure the first item is selected
+            triggerListboxKeyDown(Home);
+        }
+    }, [open]);
+    React.useEffect(function () {
+        if (autocomplete === 'manual') {
+            setActiveDescendant(null);
+        }
+        else if (autocomplete === 'automatic' &&
+            matchingOptions.size &&
+            !selectedValue) {
+            // Fire a home keydown event on listbox to ensure the first item is selected
+            requestAnimationFrame(function () {
+                triggerListboxKeyDown(Home);
+            });
+        }
+    }, [matchingOptions]);
+    var handleFocus = React.useCallback(function (event) {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        // istanbul ignore else
+        if (!event.defaultPrevented) {
+            setOpen(true);
+            if (selectedValue && value === selectedValue && isAutoComplete) {
+                setValue('');
+            }
+        }
+    }, [onFocus, value, selectedValue]);
+    var handleInputClick = React.useCallback(function (event) {
+        var _a;
+        setOpen(true);
+        if (selectedValue && value === selectedValue && isAutoComplete) {
+            setValue('');
+        }
+        if (event.target !== inputRef.current) {
+            // ensure focus is set on the input field
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [value, selectedValue]);
+    var handleComboboxOptionMouseDown = React.useCallback(function (event) {
+        // prevent blur from triggering when activating combobox options
+        event.preventDefault();
+    }, []);
+    var handleComboboxOptionClick = React.useCallback(function () {
+        var _a;
+        // maintain focus on the input
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    var handleBlur = React.useCallback(function (event) {
+        var _a;
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setOpen(false);
+        if (autocomplete === 'automatic' && activeDescendant) {
+            var stringValue = ((_a = activeDescendant.value) === null || _a === void 0 ? void 0 : _a.toString()) ||
+                /* istanbul ignore next: default value */ '';
+            setValue(stringValue);
+            setSelectedValue(stringValue);
+        }
+    }, [autocomplete, activeDescendant, onBlur]);
+    var handleKeyDown = React.useCallback(function (event) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        var enterKeypress = event.key === Enter;
+        var escKeypress = event.key === Escape;
+        var arrowKeypress = ['ArrowDown', 'ArrowUp'].includes(event.key);
+        if ([Home, End].includes(event.key)) {
+            // prevent the page from scrolling and allow start/end option activation
+            event.preventDefault();
+        }
+        if (escKeypress) {
+            setOpen(false);
+            return;
+        }
+        // Selection should not open the listbox or be
+        // forwarded to the listbox component when closed
+        if (enterKeypress && !open) {
+            return;
+        }
+        setOpen(true);
+        if (!open && arrowKeypress && selectedValue && isAutoComplete) {
+            // If the user opens the combobox again with a selected value
+            // just clear out the field to restore filtering capabilities
+            setValue('');
+        }
+        // Space should not trigger selection since the user could be typing
+        // a value for autocompletion. Additionally when not open and there's
+        // an active descendent we do not want to forward keydown events.
+        if (event.key === ' ' ||
+            (!open && activeDescendant) ||
+            (enterKeypress && !activeDescendant)) {
+            return;
+        }
+        // forward input events to listbox
+        triggerListboxKeyDown(event.key);
+        // Close combobox with keyboard selections
+        if (enterKeypress && activeDescendant) {
+            setOpen(false);
+        }
+    }, [onKeyDown, isAutoComplete, open, selectedValue, activeDescendant]);
+    React.useEffect(function () {
+        if (typeof propValue !== 'undefined') {
+            setValue(propValue);
+        }
+    }, [propValue]);
+    var handleChange = React.useCallback(function (event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+        // istanbul ignore else
+        if (!isControlled) {
+            setValue(event.target.value);
+        }
+    }, [isControlled, onChange]);
+    var handleSelectionChange = React.useCallback(function (_a) {
+        var target = _a.target, listboxValue = _a.value, previousValue = _a.previousValue;
+        var stringValue = (listboxValue === null || listboxValue === void 0 ? void 0 : listboxValue.toString()) || /* istanbul ignore next */ '';
+        // istanbul ignore else
+        if (!isControlled) {
+            setValue(stringValue);
+        }
+        setSelectedValue(stringValue);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+            target: target,
+            value: stringValue,
+            previousValue: previousValue === null || previousValue === void 0 ? void 0 : previousValue.toString()
+        });
+        setOpen(false);
+    }, [isControlled, onSelectionChange]);
+    var handleActiveChange = React.useCallback(function (option) {
+        // istanbul ignore else
+        if (option.element) {
+            setActiveDescendant(option);
+        }
+        onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(option);
+    }, []);
+    var NoMatchingOptions = React__default["default"].useMemo(function () {
+        return React__default["default"].isValidElement(renderNoResults)
+            ? function () { return React__default["default"].createElement(ComboboxNoResults, null, renderNoResults); }
+            : typeof renderNoResults === 'function'
+                ? function () { return React__default["default"].createElement(ComboboxNoResults, null, renderNoResults()); }
+                : ComboboxNoResults;
+    }, [renderNoResults]);
+    var noMatchingOptions = !!(value === null || value === void 0 ? void 0 : value.length) && !matchingOptions.size && (React__default["default"].createElement(NoMatchingOptions, null));
+    var comboboxListbox = (React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
+            'Combobox__listbox--open': open
+        }), role: "listbox", "aria-labelledby": "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: selectedValue, onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant": "" },
+        comboboxOptions,
+        noMatchingOptions));
+    return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', className), ref: comboboxRef },
+        React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
+                'Field__label--is-required': isRequired,
+                'Field__label--has-error': hasError
+            }), id: "".concat(id, "-label"), htmlFor: "".concat(id, "-input") },
+            React__default["default"].createElement("span", null, label),
+            isRequired && (React__default["default"].createElement("span", { className: "Field__required-text" }, requiredText))),
+        React__default["default"].createElement("div", { className: classNames__default["default"]('Combobox__input', {
+                'Combobox__input--error': hasError
+            }), 
+            // We're handling click here to open the listbox when the wrapping element is clicked,
+            // there's already keyboard handlers to open the listbox on the input element
+            onClick: handleInputClick },
+            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: value, role: "combobox", "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, props, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
+            React__default["default"].createElement("span", { className: "Combobox__arrow" })),
+        React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: value, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions }, portal
+            ? reactDom.createPortal(comboboxListbox, portal instanceof HTMLElement
+                ? portal
+                : portal.current ||
+                    /* istanbul ignore next: default fallback value */ document.body)
+            : comboboxListbox),
+        hasError && (React__default["default"].createElement("div", { className: "Error", id: "".concat(id, "-error") }, error))));
+});
+Combobox.displayName = 'Combobox';
+
+var ComboboxGroup = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, label = _a.label, props = tslib.__rest(_a, ["className", "children", "label"]);
+    var _b = useComboboxContext(), inputValue = _b.inputValue, autocomplete = _b.autocomplete, matchingOptions = _b.matchingOptions;
+    var comboboxGroupRef = useSharedRef(ref);
+    // istanbul ignore next
+    var showGroup = React.useMemo(function () {
+        if (autocomplete === 'none' || !(inputValue === null || inputValue === void 0 ? void 0 : inputValue.length)) {
+            return true;
+        }
+        var elements = Array.from(matchingOptions.keys());
+        return !!elements.find(function (element) { var _a; return (_a = comboboxGroupRef.current) === null || _a === void 0 ? void 0 : _a.contains(element); });
+    }, [inputValue, autocomplete, matchingOptions]);
+    return (React__default["default"].createElement(ListboxGroup, tslib.__assign({ as: "ul", className: classNames__default["default"]('ComboboxGroup', className, {
+            'ComboboxGroup--hidden': !showGroup
+        }), "aria-hidden": !showGroup, ref: comboboxGroupRef, label: label, groupLabelProps: { className: 'ComboboxGroup__label' } }, props), children));
+});
+ComboboxGroup.displayName = 'ComboboxGroup';
+
+var PromptPopoverContent = function (_a) {
+    var onClose = _a.onClose, _b = _a.applyButtonText, applyButtonText = _b === void 0 ? 'Apply' : _b, onApply = _a.onApply, _c = _a.closeButtonText, closeButtonText = _c === void 0 ? 'Close' : _c, infoText = _a.infoText, infoTextId = _a.infoTextId;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("span", { id: infoTextId }, infoText),
+        React__default["default"].createElement(Button, { className: "Popover__apply", onClick: onApply, thin: true }, applyButtonText),
+        React__default["default"].createElement(Button, { className: "Popover__close", variant: "secondary", onClick: onClose, thin: true }, closeButtonText)));
+};
+var Popover = React.forwardRef(function (_a, ref) {
+    var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.variant, variant = _c === void 0 ? 'custom' : _c, _d = _a.show, show = _d === void 0 ? false : _d, onClose = _a.onClose, className = _a.className, applyButtonText = _a.applyButtonText, closeButtonText = _a.closeButtonText, infoText = _a.infoText, onApply = _a.onApply, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "variant", "show", "onClose", "className", "applyButtonText", "closeButtonText", "infoText", "onApply"]);
+    var _e = tslib.__read(propId ? [propId] : nextId.useId(1, 'popover'), 1), id = _e[0];
+    var _f = tslib.__read(React.useState(null), 2), targetElement = _f[0], setTargetElement = _f[1];
+    var _g = tslib.__read(React.useState(null), 2), isolator = _g[0], setIsolator = _g[1];
+    var popoverRef = useSharedRef(ref);
+    var _h = tslib.__read(React.useState(null), 2), arrowElement = _h[0], setArrowElement = _h[1];
+    var _j = reactPopper.usePopper(targetElement, popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current, {
+        placement: initialPlacement,
+        modifiers: [
+            { name: 'preventOverflow', options: { padding: 8 } },
+            { name: 'flip' },
+            { name: 'offset', options: { offset: [0, 8] } },
+            { name: 'arrow', options: { padding: 5, element: arrowElement } }
+        ]
+    }), styles = _j.styles, attributes = _j.attributes;
+    var placement = (attributes.popper &&
+        attributes.popper['data-popper-placement']) ||
+        initialPlacement;
+    var additionalProps = variant === 'prompt' ? { 'aria-labelledby': "".concat(id, "-label") } : {};
+    // Keep targetElement in sync with target prop
+    React.useEffect(function () {
+        var targetElement = target && 'current' in target ? target.current : target;
+        setTargetElement(targetElement);
+    }, [target]);
+    React.useEffect(function () {
+        return function () {
+            isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        };
+    }, []);
+    React.useEffect(function () {
+        if (!isolator)
+            return;
+        if (show) {
+            isolator.activate();
+        }
+        else {
+            isolator.deactivate();
+        }
+        return function () {
+            isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        };
+    }, [show, isolator]);
+    React.useEffect(function () {
+        if (popoverRef.current)
+            attachIsolator();
+    }, [popoverRef.current]);
+    React.useEffect(function () {
+        if (show && popoverRef.current) {
+            // Find the first focusable element inside the container
+            var firstFocusableElement = popoverRef.current.querySelector(focusableSelector);
+            if (firstFocusableElement instanceof HTMLElement) {
+                firstFocusableElement.focus();
+            }
+        }
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-expanded', Boolean(show).toString());
+    }, [show, popoverRef.current]);
+    React.useEffect(function () {
+        var handleEscape = function (event) {
+            if (event.key === 'Escape' ||
+                event.key === 'Esc' ||
+                event.keyCode === 27) {
+                handleClosePopover();
+            }
+        };
+        if (show) {
+            document.body.addEventListener('keyup', handleEscape);
+        }
+        else {
+            document.body.removeEventListener('keyup', handleEscape);
+        }
+        return function () {
+            document.body.removeEventListener('keyup', handleEscape);
+        };
+    }, [show]);
+    React.useEffect(function () {
+        var attrText = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('aria-controls');
+        var hasPopupAttr = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getAttribute('aria-haspopup');
+        if (!(attrText === null || attrText === void 0 ? void 0 : attrText.includes(id)) && show) {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-controls', id);
+        }
+        if (!hasPopupAttr) {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-haspopup', 'true');
+        }
+    }, [targetElement, id, show]);
+    var handleClickOutside = function () {
+        if (show) {
+            handleClosePopover();
+        }
+    };
+    var attachIsolator = function () {
+        if (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) {
+            setIsolator(new AriaIsolate(popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current));
+        }
+    };
+    var handleClosePopover = function () {
+        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        if (show) {
+            onClose();
+        }
+    };
+    if (!show || !isBrowser())
+        return null;
+    return reactDom.createPortal(React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
+            allowOutsideClick: true,
+            fallbackFocus: '.Popover__borderLeft'
+        } },
+        React__default["default"].createElement(ClickOutsideListener, { onClickOutside: handleClickOutside },
+            React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
+                    'Popover--hidden': !show,
+                    'Popover--prompt': variant === 'prompt'
+                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, props, additionalProps),
+                React__default["default"].createElement("div", { className: "Popover__popoverArrow", ref: setArrowElement, style: styles.arrow }),
+                React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
+                variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) || document.body);
+});
+Popover.displayName = 'Popover';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4033,6 +4797,9 @@ exports.ColumnHeader = ColumnHeader;
 exports.ColumnLeft = ColumnLeft;
 exports.ColumnList = ColumnList;
 exports.ColumnRight = ColumnRight;
+exports.Combobox = Combobox;
+exports.ComboboxGroup = ComboboxGroup;
+exports.ComboboxOption = ComboboxOption;
 exports.DescriptionDetails = DescriptionDetails;
 exports.DescriptionList = DescriptionList;
 exports.DescriptionListItem = DescriptionListItem;
@@ -4048,6 +4815,9 @@ exports.IssuePanel = IssuePanel;
 exports.Layout = Layout;
 exports.Line = Line;
 exports.Link = Link;
+exports.Listbox = Listbox;
+exports.ListboxGroup = ListboxGroup;
+exports.ListboxOption = ListboxOption;
 exports.Loader = Loader;
 exports.LoaderOverlay = LoaderOverlay;
 exports.Main = Main;
@@ -4071,6 +4841,7 @@ exports.PanelContent = PanelContent;
 exports.PanelHeader = PanelHeader;
 exports.PanelTrigger = PanelTrigger$1;
 exports.Pointout = Pointout;
+exports.Popover = Popover;
 exports.ProgressBar = ProgressBar;
 exports.RadioCardGroup = RadioCardGroup;
 exports.RadioGroup = RadioGroup;
@@ -4093,6 +4864,7 @@ exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
+exports.TagButton = TagButton;
 exports.TagLabel = TagLabel;
 exports.TextField = TextField;
 exports.ThemeContext = ThemeContext;