@deque/cauldron-react 5.8.0-canary.b09c14c1 → 5.8.0-canary.c7e293cc

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/index.d.ts

@@ -53,6 +53,7 @@ export { default as Breadcrumb, BreadcrumbItem, BreadcrumbLink } from './compone
 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

@@ -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) {
@@ -4162,6 +4162,403 @@ var ListboxGroup = React.forwardRef(function (_a, ref) {
 });
 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 () {
+    return (React__default["default"].createElement("div", { className: "ComboboxListbox__empty", "aria-live": "polite" }, "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 renderNoResults; }
+            : typeof renderNoResults === 'function'
+                ? function () { return 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,
@@ -4377,6 +4774,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;

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-canary.b09c14c1",
+  "version": "5.8.0-canary.c7e293cc",
   "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",