@deque/cauldron-react 5.8.0 → 5.8.1-canary.5921a8e6

package/lib/components/Combobox/Combobox.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ContentNode } from '../../types';
+import ComboboxOption from './ComboboxOption';
+import type { ComboboxValue } from './ComboboxOption';
+import type { ListboxOption } from '../Listbox/ListboxContext';
+interface ComboboxOption {
+    key?: string;
+    label: string;
+    value?: ComboboxValue;
+    description?: string;
+}
+interface ComboboxProps extends React.InputHTMLAttributes<Omit<HTMLInputElement, 'value' | 'defaultValue'>> {
+    label: ContentNode;
+    options?: ComboboxOption[];
+    value?: ComboboxValue;
+    defaultValue?: ComboboxValue;
+    requiredText?: React.ReactNode;
+    error?: React.ReactNode;
+    autocomplete?: 'none' | 'manual' | 'automatic';
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>({ target, value, previousValue }: {
+        target: T;
+        value: ComboboxValue;
+        previousValue: ComboboxValue;
+    }) => void;
+    onActiveChange?: (option: ListboxOption) => void;
+    renderNoResults?: (() => JSX.Element) | React.ReactElement;
+    portal?: React.RefObject<HTMLElement> | HTMLElement;
+}
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Combobox;

package/lib/components/Combobox/ComboboxContext.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ComboboxValue } from './ComboboxOption';
+type ComboboxContext = {
+    autocomplete: 'none' | 'manual' | 'automatic';
+    inputValue: ComboboxValue;
+    selectedValue: ComboboxValue;
+    matchingOptions: Map<HTMLElement, ComboboxOptionState>;
+    setMatchingOptions: React.Dispatch<React.SetStateAction<Map<HTMLElement, ComboboxOptionState>>>;
+    matches: (<T extends string = string>(value: T) => boolean) | boolean;
+};
+export type ComboboxOptionState = {
+    selected: boolean;
+    value: ComboboxValue;
+};
+type ComboboxProvider = {
+    children: React.ReactNode;
+    matches: ((inputValue: string, value: string) => boolean) | boolean;
+} & Omit<ComboboxContext, 'matches'>;
+declare const ComboboxContext: React.Context<ComboboxContext>;
+declare function ComboboxProvider({ autocomplete, inputValue, selectedValue, matches, matchingOptions, setMatchingOptions, children }: ComboboxProvider): JSX.Element;
+declare function useComboboxContext(): ComboboxContext;
+export { ComboboxProvider, useComboboxContext };

package/lib/components/Combobox/ComboboxGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ContentNode } from '../../types';
+interface ComboboxGroupProps extends React.HTMLAttributes<HTMLUListElement> {
+    label: ContentNode;
+}
+declare const ComboboxGroup: React.ForwardRefExoticComponent<ComboboxGroupProps & React.RefAttributes<HTMLUListElement>>;
+export default ComboboxGroup;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ListboxValue } from '../Listbox/ListboxOption';
+import type { ContentNode } from '../../types';
+export type ComboboxValue = Exclude<ListboxValue, number>;
+interface ComboboxOptionProps extends React.HTMLAttributes<HTMLLIElement> {
+    disabled?: boolean;
+    value?: ComboboxValue;
+    description?: ContentNode;
+    children: string;
+}
+declare const ComboboxOption: React.ForwardRefExoticComponent<ComboboxOptionProps & React.RefAttributes<HTMLLIElement>>;
+export default ComboboxOption;

package/lib/components/Combobox/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './Combobox';
+export { default as ComboboxOption } from './ComboboxOption';
+export { default as ComboboxGroup } from './ComboboxGroup';

package/lib/components/Listbox/Listbox.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { ListboxOption } from './ListboxContext';
+import type { ListboxValue } from './ListboxOption';
+interface ListboxProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+    as?: React.ElementType | string;
+    value?: ListboxValue;
+    navigation?: 'cycle' | 'bound';
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>({ value }: {
+        target: T;
+        previousValue: ListboxValue;
+        value: ListboxValue;
+    }) => void;
+    onActiveChange?: (option: ListboxOption) => void;
+}
+declare const Listbox: React.ForwardRefExoticComponent<ListboxProps & React.RefAttributes<HTMLElement>>;
+export default Listbox;

package/lib/components/Listbox/ListboxContext.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+type UnknownElement<T> = T extends Element ? T : HTMLElement;
+type UnknownValue<T> = T extends string ? T : number;
+type ListboxOption<Element = HTMLElement, Value = string | number> = {
+    element: UnknownElement<Element>;
+    value?: UnknownValue<Value>;
+};
+type ListboxContext<T extends ListboxOption> = {
+    options: T[];
+    active: T | null;
+    selected: T | null;
+    setOptions: React.Dispatch<React.SetStateAction<T[]>>;
+    onSelect: (option: T) => void;
+};
+type ListboxProvider<T extends ListboxOption> = {
+    children: React.ReactNode;
+} & ListboxContext<T>;
+declare const ListboxContext: React.Context<{
+    options: never[];
+    active: null;
+    selected: null;
+    setOptions: () => null;
+    onSelect: () => null;
+}>;
+declare function ListboxProvider<T extends ListboxOption>({ options, active, selected, setOptions, onSelect, children }: ListboxProvider<T>): JSX.Element;
+declare function useListboxContext<T extends ListboxOption>(): ListboxContext<T>;
+export { ListboxProvider, useListboxContext, ListboxOption };

package/lib/components/Listbox/ListboxGroup.d.ts

@@ -0,0 +1,9 @@
+import { ContentNode } from '../../types';
+import React from 'react';
+interface ListboxGroupProps extends React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType | string;
+    groupLabelProps?: React.HTMLAttributes<HTMLLIElement>;
+    label: ContentNode;
+}
+declare const ListboxGroup: React.ForwardRefExoticComponent<ListboxGroupProps & React.RefAttributes<HTMLElement>>;
+export default ListboxGroup;

package/lib/components/Listbox/ListboxOption.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ListboxValue = Readonly<string | number | undefined>;
+interface ListboxOptionsProps extends React.HTMLAttributes<HTMLElement> {
+    as?: React.ElementType | string;
+    value?: ListboxValue;
+    disabled?: boolean;
+    activeClass?: string;
+}
+declare const ListboxOption: React.ForwardRefExoticComponent<ListboxOptionsProps & React.RefAttributes<HTMLElement>>;
+export default ListboxOption;

package/lib/components/Listbox/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './Listbox';
+export { default as ListboxOption } from './ListboxOption';
+export { default as ListboxGroup } from './ListboxGroup';
+export { ListboxProvider, useListboxContext } from './ListboxContext';

package/lib/components/Popover/index.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import { Placement } from '@popperjs/core';
+import { Cauldron } from '../../types';
+export type PopoverVariant = 'prompt' | 'custom';
+type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
+    target: React.RefObject<HTMLElement> | HTMLElement;
+    variant?: PopoverVariant;
+    show: boolean;
+    onClose: () => void;
+    placement?: Placement;
+    portal?: React.RefObject<HTMLElement> | HTMLElement;
+};
+type CustomProps = BaseProps & {
+    variant: 'custom';
+    applyButtonText?: string;
+    onApply?: () => void;
+    closeButtonText?: string;
+    infoText?: ReactNode;
+    children: ReactNode;
+} & Cauldron.LabelProps;
+type PromptProps = BaseProps & {
+    variant: 'prompt';
+    applyButtonText?: string;
+    onApply: () => void;
+    closeButtonText?: string;
+    infoText: ReactNode;
+    children?: ReactNode;
+};
+export type PopoverProps = PromptProps | CustomProps;
+declare const Popover: React.ForwardRefExoticComponent<PopoverProps & React.RefAttributes<HTMLDivElement>>;
+export default Popover;

package/lib/index.d.ts

@@ -52,6 +52,9 @@ export { default as FieldWrap } from './components/FieldWrap';
 export { default as Breadcrumb, BreadcrumbItem, BreadcrumbLink } from './components/Breadcrumb';
 export { default as TwoColumnPanel, ColumnHeader, ColumnGroupHeader, ColumnLeft, ColumnRight, ColumnList } from './components/TwoColumnPanel';
 export { default as Notice } from './components/Notice';
+export { default as Listbox, ListboxOption, ListboxGroup } from './components/Listbox';
+export { default as Combobox, ComboboxOption, ComboboxGroup } from './components/Combobox';
+export { default as Popover } from './components/Popover';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -12,11 +12,11 @@ var reactDom = require('react-dom');
 var FocusTrap = require('focus-trap-react');
 var reactPopper = require('react-popper');
 var focusable = require('focusable');
-var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/light');
-var js = require('react-syntax-highlighter/dist/esm/languages/hljs/javascript');
-var css = require('react-syntax-highlighter/dist/esm/languages/hljs/css');
-var xml = require('react-syntax-highlighter/dist/esm/languages/hljs/xml');
-var yaml = require('react-syntax-highlighter/dist/esm/languages/hljs/yaml');
+var SyntaxHighlighter = require('react-syntax-highlighter/dist/cjs/light');
+var js = require('react-syntax-highlighter/dist/cjs/languages/hljs/javascript');
+var css = require('react-syntax-highlighter/dist/cjs/languages/hljs/css');
+var xml = require('react-syntax-highlighter/dist/cjs/languages/hljs/xml');
+var yaml = require('react-syntax-highlighter/dist/cjs/languages/hljs/yaml');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -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) {
@@ -3943,6 +3943,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 +4775,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 +4793,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 +4819,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;

package/lib/utils/useIntersectionRef.d.ts

@@ -0,0 +1,12 @@
+import type { MutableRefObject } from 'react';
+/**
+ * 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>
+ */
+export default function useIntersectionRef<T extends HTMLElement>(element: T | MutableRefObject<T>, intersectionObserverOptions?: IntersectionObserverInit): MutableRefObject<IntersectionObserverEntry | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.8.0",
+  "version": "5.8.1-canary.5921a8e6",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
   "publishConfig": {
@@ -110,7 +110,7 @@
       "**/__tests__/demo/**/*.js"
     ],
     "collectCoverageFrom": [
-      "**/src/**/*.tsx"
+      "**/src/**/*.{ts,tsx}"
     ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/__tests__/styleMock.js",
@@ -119,4 +119,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}