@deque/cauldron-react 6.12.0-canary.98683670 → 6.12.0-canary.afa8fb4f

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

@@ -2,15 +2,29 @@ import React from 'react';
 import type { ListboxOption } from './ListboxContext';
 import type { ListboxValue } from './ListboxOption';
 import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymorphicComponent';
-interface ListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'>> {
-    value?: ListboxValue;
+interface BaseListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'defaultValue'>> {
     navigation?: 'cycle' | 'bound';
-    onSelectionChange?: <T extends HTMLElement = HTMLElement>({ value }: {
+    onActiveChange?: (option: ListboxOption) => void;
+}
+interface SingleSelectListboxProps extends BaseListboxProps {
+    multiselect?: false;
+    value?: ListboxValue;
+    defaultValue?: ListboxValue;
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>(props: {
         target: T;
         previousValue: ListboxValue;
         value: ListboxValue;
     }) => void;
-    onActiveChange?: (option: ListboxOption) => void;
 }
-declare const Listbox: PolymorphicComponent<ListboxProps>;
+interface MultiSelectListboxProps extends BaseListboxProps {
+    multiselect: true;
+    value?: ListboxValue[];
+    defaultValue?: ListboxValue[];
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>(props: {
+        target: T;
+        previousValue: ListboxValue[];
+        value: ListboxValue[];
+    }) => void;
+}
+declare const Listbox: PolymorphicComponent<SingleSelectListboxProps | MultiSelectListboxProps>;
 export default Listbox;

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

@@ -8,7 +8,8 @@ type ListboxOption<Element = HTMLElement, Value = string | number> = {
 type ListboxContext<T extends ListboxOption> = {
     options: T[];
     active: T | null;
-    selected: T | null;
+    selected: T[] | null;
+    multiselect: boolean;
     setOptions: React.Dispatch<React.SetStateAction<T[]>>;
     onSelect: (option: T) => void;
 };
@@ -19,9 +20,10 @@ declare const ListboxContext: React.Context<{
     options: never[];
     active: null;
     selected: null;
+    multiselect: boolean;
     setOptions: () => null;
     onSelect: () => null;
 }>;
-declare function ListboxProvider<T extends ListboxOption>({ options, active, selected, setOptions, onSelect, children }: ListboxProvider<T>): React.JSX.Element;
+declare function ListboxProvider<T extends ListboxOption>({ options, active, selected, multiselect, setOptions, onSelect, children }: ListboxProvider<T>): React.JSX.Element;
 declare function useListboxContext<T extends ListboxOption>(): ListboxContext<T>;
 export { ListboxProvider, useListboxContext, ListboxOption };

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

@@ -4,6 +4,7 @@ export type ListboxValue = Readonly<string | number | undefined>;
 interface ListboxOptionProps extends PolymorphicProps<React.HTMLAttributes<HTMLElement>> {
     value?: ListboxValue;
     disabled?: boolean;
+    selected?: boolean;
     activeClass?: string;
 }
 declare const ListboxOption: PolymorphicComponent<ListboxOptionProps>;

package/lib/index.js

@@ -1282,7 +1282,7 @@ var SideBar = /** @class */ (function (_super) {
 }(React.Component));
 
 var SideBarItem = function (_a) {
-    var children = _a.children, autoClickLink = _a.autoClickLink, other = tslib.__rest(_a, ["children", "autoClickLink"]);
+    var children = _a.children, _b = _a.autoClickLink, autoClickLink = _b === void 0 ? true : _b, other = tslib.__rest(_a, ["children", "autoClickLink"]);
     var onClick = function (e) {
         if (!autoClickLink) {
             return;
@@ -1294,9 +1294,6 @@ var SideBarItem = function (_a) {
     /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 };
 SideBarItem.displayName = 'SideBarItem';
-SideBarItem.defaultProps = {
-    autoClickLink: true
-};
 
 /**
  * Handles aria-hidden for dialogs.
@@ -3447,19 +3444,21 @@ var ListboxContext = React.createContext({
     options: [],
     active: null,
     selected: null,
+    multiselect: false,
     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 options = _a.options, active = _a.active, selected = _a.selected, multiselect = _a.multiselect, 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,
+        multiselect: multiselect,
         setOptions: setOptions,
         onSelect: onSelect
-    }); }, [options, active, selected, setOptions]);
+    }); }, [options, active, selected, multiselect, setOptions]);
     return React__default["default"].createElement(Provider, { value: value }, children);
 }
 function useListboxContext() {
@@ -3481,40 +3480,78 @@ var optionMatchesValue = function (option, value) {
         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 _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, _d = _a.multiselect, multiselect = _d === void 0 ? false : _d, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "multiselect", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange"]);
+    var _e = tslib.__read(React.useState([]), 2), options = _e[0], setOptions = _e[1];
+    var _f = tslib.__read(React.useState(null), 2), activeOption = _f[0], setActiveOption = _f[1];
+    var _g = tslib.__read(React.useState([]), 2), selectedOptions = _g[0], setSelectedOptions = _g[1];
     var listboxRef = useSharedRef(ref);
     var isControlled = typeof value !== 'undefined';
     React.useLayoutEffect(function () {
-        if (!isControlled && selectedOption) {
+        if (!isControlled && selectedOptions.length > 0) {
             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]);
+        if (!listboxValue) {
+            return;
+        }
+        if (multiselect) {
+            var matchingOptions = options.filter(function (option) {
+                return listboxValue.find(function (value) {
+                    return optionMatchesValue(option, value);
+                });
+            });
+            setSelectedOptions(matchingOptions);
+            setActiveOption(matchingOptions[0] || null);
+        }
+        else {
+            var matchingOption = options.find(function (option) {
+                return optionMatchesValue(option, listboxValue);
+            });
+            setSelectedOptions(matchingOption ? [matchingOption] : []);
+            setActiveOption(matchingOption || null);
+        }
+    }, [isControlled, options, value, defaultValue]);
     React.useEffect(function () {
         if (activeOption) {
             onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(activeOption);
         }
     }, [activeOption]);
     var handleSelect = React.useCallback(function (option) {
+        var _a;
         setActiveOption(option);
+        var optionIsSelected = selectedOptions.some(function (selected) { return selected.element === option.element; });
+        var previousValues = selectedOptions.map(function (selected) { return selected.value; });
         // istanbul ignore else
         if (!isControlled) {
-            setSelectedOption(option);
+            if (!multiselect) {
+                setSelectedOptions([option]);
+            }
+            else {
+                setSelectedOptions(optionIsSelected
+                    ? tslib.__spreadArray([], tslib.__read(selectedOptions.filter(function (selected) { return selected.element !== option.element; })), false) : tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(selectedOptions), false), [option], false));
+            }
         }
-        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]);
+        if (multiselect) {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: option.element,
+                value: optionIsSelected
+                    ? selectedOptions
+                        .filter(function (selectedOption) {
+                        return selectedOption.element !== option.element;
+                    })
+                        .map(function (selectedOption) { return selectedOption.value; })
+                    : tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(previousValues), false), [option.value], false),
+                previousValue: previousValues
+            });
+        }
+        else {
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: option.element,
+                value: option.value,
+                previousValue: (_a = selectedOptions[0]) === null || _a === void 0 ? void 0 : _a.value
+            });
+        }
+    }, [isControlled, selectedOptions, multiselect, onSelectionChange]);
     var handleKeyDown = React.useCallback(function (event) {
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
         if (!keys.includes(event.key)) {
@@ -3564,9 +3601,9 @@ var Listbox = React.forwardRef(function (_a, ref) {
                 activeOption && handleSelect(activeOption);
                 break;
         }
-    }, [options, activeOption, navigation]);
+    }, [options, activeOption, navigation, handleSelect]);
     var handleFocus = React.useCallback(function (event) {
-        if (!activeOption && !selectedOption) {
+        if (!activeOption) {
             var firstOption = options.find(function (option) { return !isDisabledOption(option); });
             // istanbul ignore else
             if (firstOption) {
@@ -3574,13 +3611,14 @@ var Listbox = React.forwardRef(function (_a, ref) {
             }
             // istanbul ignore else
         }
-        else if (event.target === listboxRef.current) {
-            setActiveOption(selectedOption);
+        else if (selectedOptions.length &&
+            event.target === listboxRef.current) {
+            setActiveOption(selectedOptions[selectedOptions.length - 1]);
         }
         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)));
+    }, [options, activeOption, selectedOptions]);
+    return (React__default["default"].createElement(Component, tslib.__assign({ role: "listbox", ref: listboxRef, tabIndex: "0", onKeyDown: handleKeyDown, onFocus: handleFocus, "aria-multiselectable": multiselect ? true : undefined, "aria-activedescendant": activeOption ? getOptionId(activeOption) : undefined }, props),
+        React__default["default"].createElement(ListboxProvider, { options: options, active: activeOption, multiselect: multiselect, selected: selectedOptions, setOptions: setOptions, onSelect: handleSelect }, children)));
 });
 Listbox.displayName = 'Listbox';
 
@@ -3590,12 +3628,15 @@ function isElementPreceding(a, b) {
 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 propId = _a.id, className = _a.className, _d = _a.as, Component = _d === void 0 ? 'li' : _d, children = _a.children, value = _a.value, disabled = _a.disabled, selectedProp = _a.selected, _e = _a.activeClass, activeClass = _e === void 0 ? 'ListboxOption--active' : _e, onClick = _a.onClick, props = tslib.__rest(_a, ["id", "className", "as", "children", "value", "disabled", "selected", "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 isActive = (active === null || active === void 0 ? void 0 : active.element) === listboxOptionRef.current;
+    var isSelected = typeof selectedProp === 'boolean'
+        ? selectedProp
+        : selected !== null &&
+            !!selected.find(function (option) { return option.element === listboxOptionRef.current; });
     var optionValue = typeof value !== 'undefined'
         ? value
         : (_c = listboxOptionRef.current) === null || _c === void 0 ? void 0 : _c.innerText;
@@ -3645,7 +3686,7 @@ var ListboxOption = React.forwardRef(function (_a, ref) {
         }
         onSelect({ element: listboxOptionRef.current, value: optionValue });
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [optionValue]);
+    }, [optionValue, onSelect, onClick, disabled]);
     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));
@@ -3767,17 +3808,20 @@ var ComboboxMatch = function (_a) {
         React__default["default"].createElement("span", null, matchAfter)));
 };
 var ComboboxOption = React.forwardRef(function (_a, ref) {
+    var _b;
     var className = _a.className, children = _a.children, disabled = _a.disabled, propId = _a.id, description = _a.description, propValue = _a.value, formValue = _a.formValue, props = tslib.__rest(_a, ["className", "children", "disabled", "id", "description", "value", "formValue"]);
-    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(), selectedValue = _d.selectedValue, matches = _d.matches, setMatchingOptions = _d.setMatchingOptions, setFormValue = _d.setFormValue;
+    var _c = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox-option'), 1), id = _c[0];
+    var _d = useListboxContext(), selected = _d.selected, active = _d.active;
+    var _e = useComboboxContext(), selectedValue = _e.selectedValue, matches = _e.matches, setMatchingOptions = _e.setMatchingOptions, setFormValue = _e.setFormValue;
     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 isSelected = !!(selected &&
+        !!((_b = selected[0]) === null || _b === void 0 ? void 0 : _b.element) &&
+        selected[0].element === comboboxOptionRef.current);
     var isMatching = (typeof matches === 'boolean' && matches) ||
         (typeof matches === 'function' && matches(children));
     // istanbul ignore next

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.12.0-canary.98683670",
+  "version": "6.12.0-canary.afa8fb4f",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",