@deque/cauldron-react 5.7.1-canary.024ab594 → 5.7.1-canary.2562efe5

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

@@ -52,6 +52,7 @@ 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';
 /**
  * Helpers / Utils
  */

package/lib/index.js

@@ -3943,6 +3943,225 @@ 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';
+
 var LIGHT_THEME_CLASS = 'cauldron--theme-light';
 var DARK_THEME_CLASS = 'cauldron--theme-dark';
 var ThemeContext = React.createContext({
@@ -4048,6 +4267,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.7.1-canary.024ab594",
+  "version": "5.7.1-canary.2562efe5",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
   "publishConfig": {