@deque/cauldron-react 6.14.0 → 6.15.0-canary.05150a80

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

@@ -1,7 +1,7 @@
-import React, { ButtonHTMLAttributes, Ref } from 'react';
+import React, { type ButtonHTMLAttributes, type Ref } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     buttonRef?: Ref<HTMLButtonElement>;
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'link' | 'tag';
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'link' | 'tag' | 'badge';
     thin?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ContentNode } from '../../types';
 import ComboboxOption from './ComboboxOption';
+import type { ContentNode } from '../../types';
 import type { ComboboxValue } from './ComboboxOption';
 import type { ListboxOption } from '../Listbox/ListboxContext';
 interface ComboboxOption {
@@ -9,24 +9,42 @@ interface ComboboxOption {
     value?: ComboboxValue;
     formValue?: ComboboxValue;
     description?: string;
+    removeOptionLabel?: string;
 }
-interface ComboboxProps extends React.InputHTMLAttributes<Omit<HTMLInputElement, 'value' | 'defaultValue'>> {
+interface BaseComboboxProps extends Omit<React.InputHTMLAttributes<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?: (() => React.JSX.Element) | React.ReactElement;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     inputRef?: React.Ref<HTMLInputElement>;
 }
-declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>>;
+interface SingleSelectComboboxProps extends BaseComboboxProps {
+    value?: ComboboxValue;
+    defaultValue?: ComboboxValue;
+    inputValue?: never;
+    defaultInputValue?: never;
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>(props: {
+        target: T;
+        value: ComboboxValue;
+        previousValue: ComboboxValue;
+    }) => void;
+    multiselect?: false;
+}
+interface MultiSelectComboboxProps extends BaseComboboxProps {
+    value?: ComboboxValue[];
+    defaultValue?: ComboboxValue[];
+    inputValue?: ComboboxValue;
+    defaultInputValue?: ComboboxValue;
+    onSelectionChange?: <T extends HTMLElement = HTMLElement>(props: {
+        target: T;
+        value: ComboboxValue[];
+        previousValue: ComboboxValue[];
+    }) => void;
+    multiselect: true;
+}
+declare const Combobox: React.ForwardRefExoticComponent<(SingleSelectComboboxProps | MultiSelectComboboxProps) & React.RefAttributes<HTMLDivElement>>;
 export default Combobox;

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

@@ -3,22 +3,25 @@ import { ComboboxValue } from './ComboboxOption';
 type ComboboxContext = {
     autocomplete: 'none' | 'manual' | 'automatic';
     inputValue: ComboboxValue;
-    formValue: ComboboxValue;
-    selectedValue: ComboboxValue;
+    formValues: ComboboxValue[];
+    selectedValues: ComboboxValue[];
+    removeOptionLabels: string[];
+    setRemoveOptionLabels: React.Dispatch<React.SetStateAction<string[]>>;
     matchingOptions: Map<HTMLElement, ComboboxOptionState>;
     setMatchingOptions: React.Dispatch<React.SetStateAction<Map<HTMLElement, ComboboxOptionState>>>;
-    setFormValue: React.Dispatch<React.SetStateAction<ComboboxValue>>;
+    setFormValues: React.Dispatch<React.SetStateAction<ComboboxValue[]>>;
     matches: (<T extends string = string>(value: T) => boolean) | boolean;
 };
 export type ComboboxOptionState = {
     selected: boolean;
     value: ComboboxValue;
+    displayValue: 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, formValue, selectedValue, matches, matchingOptions, setMatchingOptions, setFormValue, children }: ComboboxProvider): React.JSX.Element;
+declare function ComboboxProvider({ autocomplete, inputValue, formValues, selectedValues, removeOptionLabels, setRemoveOptionLabels, matches, matchingOptions, setMatchingOptions, setFormValues, children }: ComboboxProvider): React.JSX.Element;
 declare function useComboboxContext(): ComboboxContext;
 export { ComboboxProvider, useComboboxContext };

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

@@ -7,6 +7,7 @@ interface ComboboxOptionProps extends React.HTMLAttributes<HTMLLIElement> {
     value?: ComboboxValue;
     formValue?: ComboboxValue;
     description?: ContentNode;
+    removeOptionLabel?: string;
     children: string;
 }
 declare const ComboboxOption: React.ForwardRefExoticComponent<ComboboxOptionProps & React.RefAttributes<HTMLLIElement>>;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ComboboxValue } from './ComboboxOption';
+interface ComboboxPillProps extends React.HTMLAttributes<HTMLButtonElement> {
+    value: ComboboxValue;
+    removeOptionLabel?: string;
+    disabled?: boolean;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+declare const ComboboxPill: React.ForwardRefExoticComponent<ComboboxPillProps & React.RefAttributes<HTMLButtonElement>>;
+export default ComboboxPill;

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

@@ -5,6 +5,7 @@ import type { PolymorphicProps, PolymorphicComponent } from '../../utils/polymor
 interface BaseListboxProps extends PolymorphicProps<Omit<React.HTMLAttributes<HTMLElement>, 'onSelect' | 'defaultValue'>> {
     navigation?: 'cycle' | 'bound';
     onActiveChange?: (option: ListboxOption) => void;
+    disabled?: boolean;
 }
 interface SingleSelectListboxProps extends BaseListboxProps {
     multiselect?: false;

package/lib/index.js

@@ -960,7 +960,9 @@ var OptionsMenuList = function (_a) {
     /* eslint-disable jsx-a11y/click-events-have-key-events */
     /* eslint-disable jsx-a11y/role-supports-aria-props */
     return (React__default["default"].createElement(ClickOutsideListener$1, { onClickOutside: handleClickOutside, mouseEvent: clickOutsideEventActive, touchEvent: clickOutsideEventActive },
-        React__default["default"].createElement("ul", tslib.__assign({}, other, { className: classNames__default["default"]('OptionsMenu__list', className), "aria-expanded": show, role: "menu", onClick: handleClick, ref: function (el) {
+        React__default["default"].createElement("ul", tslib.__assign({}, other, { className: classNames__default["default"]('OptionsMenu__list', className, {
+                'OptionsMenu--expanded': show
+            }), role: "menu", onClick: handleClick, ref: function (el) {
                 menuRefInternal.current = el;
                 if (menuRef) {
                     setRef(menuRef, el);
@@ -1715,7 +1717,7 @@ var SkipLink = /** @class */ (function (_super) {
 
 var Button = React.forwardRef(function (_a, ref) {
     var _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, thin = _a.thin, children = _a.children, className = _a.className, buttonRef = _a.buttonRef, other = tslib.__rest(_a, ["variant", "thin", "children", "className", "buttonRef"]);
-    return (React__default["default"].createElement("button", tslib.__assign({ type: 'button', className: classNames__default["default"](className, {
+    return (React__default["default"].createElement("button", tslib.__assign({ type: "button", className: classNames__default["default"](className, {
             'Button--primary': variant === 'primary',
             'Button--secondary': variant === 'secondary',
             'Button--error': variant === 'error',
@@ -1723,7 +1725,8 @@ var Button = React.forwardRef(function (_a, ref) {
             Link: variant === 'link',
             Tag: variant === 'tag',
             'Button--tag': variant === 'tag',
-            'Button--thin': thin
+            'Button--thin': thin,
+            'Button--badge': variant === 'badge'
         }), ref: ref || buttonRef }, other), children));
 });
 Button.displayName = 'Button';
@@ -2281,7 +2284,7 @@ var Select = React__default["default"].forwardRef(function (_a, ref) {
                 'Field__label--has-error': !!error
             }) },
             React__default["default"].createElement("span", null, label),
-            required && (React__default["default"].createElement("span", { className: "Field__required-text" }, requiredText))),
+            required && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
         React__default["default"].createElement("div", { className: classNames__default["default"]('Field__select--wrapper', {
                 'Field__select--disabled': disabled,
                 'Field--has-error': !!error
@@ -2606,7 +2609,7 @@ var TextField = /** @class */ (function (_super) {
                     'Field__label--has-error': error
                 }), htmlFor: this.inputId },
                 React__default["default"].createElement("span", null, label),
-                isRequired && (React__default["default"].createElement("span", { className: "Field__required-text" }, requiredText))),
+                isRequired && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
             React__default["default"].createElement(Field, tslib.__assign({ className: classNames__default["default"](className, {
                     'Field__text-input': !multiline,
                     Field__textarea: multiline,
@@ -3627,10 +3630,10 @@ 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, _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 _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, _e = _a.disabled, disabled = _e === void 0 ? false : _e, props = tslib.__rest(_a, ["as", "children", "defaultValue", "value", "navigation", "multiselect", "onKeyDown", "onFocus", "onSelectionChange", "onActiveChange", "disabled"]);
+    var _f = tslib.__read(React.useState([]), 2), options = _f[0], setOptions = _f[1];
+    var _g = tslib.__read(React.useState(null), 2), activeOption = _g[0], setActiveOption = _g[1];
+    var _h = tslib.__read(React.useState([]), 2), selectedOptions = _h[0], setSelectedOptions = _h[1];
     var listboxRef = useSharedRef(ref);
     var isControlled = typeof value !== 'undefined';
     React.useLayoutEffect(function () {
@@ -3670,6 +3673,9 @@ var Listbox = React.forwardRef(function (_a, ref) {
     var handleSelect = React.useCallback(function (option) {
         var _a;
         setActiveOption(option);
+        if (disabled) {
+            return;
+        }
         var optionIsSelected = selectedOptions.some(function (selected) { return selected.element === option.element; });
         var previousValues = selectedOptions.map(function (selected) { return selected.value; });
         // istanbul ignore else
@@ -3858,36 +3864,42 @@ ListboxGroup.displayName = 'ListboxGroup';
 var ComboboxContext = React.createContext({
     autocomplete: 'manual',
     inputValue: undefined,
-    formValue: undefined,
-    selectedValue: undefined,
+    formValues: [],
+    selectedValues: [],
+    removeOptionLabels: [],
+    setRemoveOptionLabels: function () { return null; },
     matches: true,
     matchingOptions: new Map(),
     setMatchingOptions: function () { return null; },
-    setFormValue: function () { return null; }
+    setFormValues: function () { return null; }
 });
 function ComboboxProvider(_a) {
-    var autocomplete = _a.autocomplete, inputValue = _a.inputValue, formValue = _a.formValue, selectedValue = _a.selectedValue, matches = _a.matches, matchingOptions = _a.matchingOptions, setMatchingOptions = _a.setMatchingOptions, setFormValue = _a.setFormValue, children = _a.children;
+    var autocomplete = _a.autocomplete, inputValue = _a.inputValue, formValues = _a.formValues, selectedValues = _a.selectedValues, removeOptionLabels = _a.removeOptionLabels, setRemoveOptionLabels = _a.setRemoveOptionLabels, matches = _a.matches, matchingOptions = _a.matchingOptions, setMatchingOptions = _a.setMatchingOptions, setFormValues = _a.setFormValues, children = _a.children;
     var Provider = ComboboxContext.Provider;
     var contextValue = React.useMemo(function () { return ({
         autocomplete: autocomplete,
         inputValue: inputValue,
-        formValue: formValue,
-        selectedValue: selectedValue,
+        formValues: formValues,
+        selectedValues: selectedValues,
+        removeOptionLabels: removeOptionLabels,
+        setRemoveOptionLabels: setRemoveOptionLabels,
         matches: typeof matches === 'function' && !!inputValue
             ? function (value) { return matches(inputValue, value); }
             : true,
         matchingOptions: matchingOptions,
         setMatchingOptions: setMatchingOptions,
-        setFormValue: setFormValue
+        setFormValues: setFormValues
     }); }, [
         autocomplete,
         inputValue,
-        formValue,
-        selectedValue,
+        formValues,
+        selectedValues,
+        removeOptionLabels,
+        setRemoveOptionLabels,
         matches,
         matchingOptions,
         setMatchingOptions,
-        setFormValue
+        setFormValues
     ]);
     return React__default["default"].createElement(Provider, { value: contextValue }, children);
 }
@@ -3960,11 +3972,10 @@ 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 _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 className = _a.className, children = _a.children, disabled = _a.disabled, propId = _a.id, description = _a.description, propValue = _a.value, formValue = _a.formValue, removeOptionLabel = _a.removeOptionLabel, props = tslib.__rest(_a, ["className", "children", "disabled", "id", "description", "value", "formValue", "removeOptionLabel"]);
+    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(), selectedValues = _d.selectedValues, setRemoveOptionLabels = _d.setRemoveOptionLabels, matches = _d.matches, setMatchingOptions = _d.setMatchingOptions, setFormValues = _d.setFormValues;
     var comboboxOptionRef = useSharedRef(ref);
     var intersectionRef = useIntersectionRef(comboboxOptionRef, {
         root: null,
@@ -3972,8 +3983,10 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
     });
     var isActive = !!(active === null || active === void 0 ? void 0 : active.element) && active.element === comboboxOptionRef.current;
     var isSelected = !!(selected &&
-        !!((_b = selected[0]) === null || _b === void 0 ? void 0 : _b.element) &&
-        selected[0].element === comboboxOptionRef.current);
+        selected.findIndex(function (_a) {
+            var element = _a.element;
+            return element === comboboxOptionRef.current;
+        }) !== -1);
     var isMatching = (typeof matches === 'boolean' && matches) ||
         (typeof matches === 'function' && matches(children));
     // istanbul ignore next
@@ -3999,15 +4012,33 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
         var comboboxValue = typeof propValue !== 'undefined'
             ? propValue
             : (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
-        if (selectedValue === comboboxValue) {
-            setFormValue(typeof formValue === 'undefined' ? comboboxValue : formValue);
-        }
-    }, [selectedValue, formValue]);
+        var value = typeof formValue === 'undefined' ? comboboxValue : formValue;
+        setFormValues(function (prev) {
+            var formValues = prev.filter(function (fv) { return fv !== value; });
+            if (selectedValues.includes(comboboxValue)) {
+                formValues.push(value);
+            }
+            return formValues;
+        });
+        setRemoveOptionLabels(function (prev) {
+            if (!removeOptionLabel) {
+                return prev;
+            }
+            return selectedValues.map(function (value, index) {
+                return value === comboboxValue ? removeOptionLabel : prev[index];
+            });
+        });
+    }, [selectedValues, formValue]);
     React.useEffect(function () {
+        var _a;
         if (isMatching) {
+            var comboboxValue_1 = typeof propValue !== 'undefined'
+                ? propValue
+                : (_a = comboboxOptionRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
             setMatchingOptions(function (options) {
                 return new Map(options.set(comboboxOptionRef.current, {
-                    value: children,
+                    value: comboboxValue_1,
+                    displayValue: children,
                     selected: isSelected
                 }));
             });
@@ -4039,8 +4070,34 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
 });
 ComboboxOption.displayName = 'ComboboxOption';
 
+var ComboboxPill = React.forwardRef(function (_a, ref) {
+    var value = _a.value, removeOptionLabel = _a.removeOptionLabel, _b = _a.disabled, disabled = _b === void 0 ? false : _b, rest = tslib.__rest(_a, ["value", "removeOptionLabel", "disabled"]);
+    var commonProps = {
+        ref: ref,
+        'aria-label': removeOptionLabel ? removeOptionLabel : "remove ".concat(value),
+        className: 'ComboboxPill',
+        tabIndex: -1
+    };
+    return !disabled ? (React__default["default"].createElement(TagButton, tslib.__assign({ label: value || '', value: "", icon: "close" }, commonProps, rest))) : (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", disabled: disabled }, commonProps, rest), value));
+});
+ComboboxPill.displayName = 'ComboboxPill';
+
 // Event Keys
-var _a = tslib.__read(['Enter', 'Escape', 'Home', 'End'], 4), Enter = _a[0], Escape = _a[1], Home = _a[2], End = _a[3];
+var _a = tslib.__read([
+    'Enter',
+    'Escape',
+    'Home',
+    'End',
+    'Backspace',
+    'Delete'
+], 6), Enter = _a[0], Escape = _a[1], Home = _a[2], End = _a[3], Backspace = _a[4], Delete = _a[5];
+var _b = tslib.__read([
+    'ArrowDown',
+    'ArrowUp',
+    'ArrowLeft',
+    'ArrowRight'
+], 4), ArrowDown = _b[0], ArrowUp = _b[1], ArrowLeft = _b[2], ArrowRight = _b[3];
+var PillKeys = [Backspace, Delete, ArrowLeft, ArrowRight];
 var defaultAutoCompleteMatches = function (inputValue, value) {
     // istanbul ignore if
     if (!value) {
@@ -4053,24 +4110,37 @@ var ComboboxNoResults = function (_a) {
     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, name = _a.name, renderNoResults = _a.renderNoResults, portal = _a.portal, _e = _a.inputRef, propInputRef = _e === void 0 ? null : _e, ariaDescribedby = _a["aria-describedby"], props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "name", "renderNoResults", "portal", "inputRef", 'aria-describedby']);
-    var _f = tslib.__read(React.useState(defaultValue || propValue || ''), 2), value = _f[0], setValue = _f[1];
-    var _g = tslib.__read(React.useState(new Map()), 2), matchingOptions = _g[0], setMatchingOptions = _g[1];
-    var _h = tslib.__read(React.useState(value || ''), 2), selectedValue = _h[0], setSelectedValue = _h[1];
-    var _j = tslib.__read(React.useState(''), 2), formValue = _j[0], setFormValue = _j[1];
-    var _k = tslib.__read(React.useState(false), 2), open = _k[0], setOpen = _k[1];
-    var _l = tslib.__read(React.useState(null), 2), activeDescendant = _l[0], setActiveDescendant = _l[1];
-    var _m = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _m[0];
+    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, propInputValue = _a.inputValue, defaultInputValue = _a.defaultInputValue, _c = _a.multiselect, multiselect = _c === void 0 ? false : _c, _d = _a.requiredText, requiredText = _d === void 0 ? 'Required' : _d, error = _a.error, _e = _a.autocomplete, autocomplete = _e === void 0 ? 'manual' : _e, onSelectionChange = _a.onSelectionChange, onActiveChange = _a.onActiveChange, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onFocus = _a.onFocus, onBlur = _a.onBlur, name = _a.name, renderNoResults = _a.renderNoResults, portal = _a.portal, _f = _a.inputRef, propInputRef = _f === void 0 ? null : _f, ariaDescribedby = _a["aria-describedby"], _g = _a.disabled, disabled = _g === void 0 ? false : _g, props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "inputValue", "defaultInputValue", "multiselect", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "name", "renderNoResults", "portal", "inputRef", 'aria-describedby', "disabled"]);
+    var _h = tslib.__read(React.useState(new Map()), 2), matchingOptions = _h[0], setMatchingOptions = _h[1];
+    var _j = tslib.__read(React.useState(function () {
+        var value = defaultValue || propValue;
+        var inputVal = defaultInputValue || propInputValue;
+        return (Array.isArray(value) ? inputVal : value) || '';
+    }), 2), inputValue = _j[0], setInputValue = _j[1];
+    var _k = tslib.__read(React.useState(function () {
+        var value = defaultValue || propValue;
+        if (!value) {
+            return [];
+        }
+        return Array.isArray(value) ? value : [value];
+    }), 2), selectedValues = _k[0], setSelectedValues = _k[1];
+    var _l = tslib.__read(React.useState([]), 2), removeOptionLabels = _l[0], setRemoveOptionLabels = _l[1];
+    var _m = tslib.__read(React.useState([]), 2), formValues = _m[0], setFormValues = _m[1];
+    var _o = tslib.__read(React.useState(false), 2), open = _o[0], setOpen = _o[1];
+    var _p = tslib.__read(React.useState(null), 2), activeDescendant = _p[0], setActiveDescendant = _p[1];
+    var _q = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _q[0];
     var comboboxRef = useSharedRef(ref);
     var inputRef = useSharedRef(propInputRef);
     var listboxRef = React.useRef(null);
-    var isControlled = typeof propValue !== 'undefined';
+    var pillsRef = React.useRef([]);
+    var isControlled = typeof propValue !== 'undefined' &&
+        (multiselect ? typeof propInputValue !== 'undefined' : true);
     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, value: option.value }, option.label)); });
-    var triggerListboxKeyDown = React__default["default"].useCallback(function (key) {
+        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, value: option.value, formValue: option.formValue, removeOptionLabel: option.removeOptionLabel }, option.label)); });
+    var triggerListboxKeyDown = React.useCallback(function (key) {
         var _a;
         (_a = listboxRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new KeyboardEvent('keydown', {
             key: key,
@@ -4082,55 +4152,67 @@ var Combobox = React.forwardRef(function (_a, ref) {
         if (!isAutoComplete) {
             return;
         }
-        if (!open && selectedValue && value !== selectedValue) {
-            setValue(selectedValue);
+        if (!open &&
+            !multiselect &&
+            selectedValues.length &&
+            !selectedValues.includes(inputValue)) {
+            setInputValue(selectedValues[selectedValues.length - 1] || '');
         }
         if (!open) {
             setActiveDescendant(null);
         }
-        if (open && autocomplete === 'automatic' && !selectedValue) {
+        if (open && autocomplete === 'automatic' && !selectedValues.length) {
             // Fire a Home keydown event on listbox to ensure the first item is selected
             triggerListboxKeyDown(Home);
         }
-    }, [open]);
+    }, [open, multiselect, autocomplete, selectedValues]);
     React.useEffect(function () {
+        var lastSelectedValue = selectedValues.length !== 0
+            ? selectedValues[selectedValues.length - 1]
+            : undefined;
         var _a = tslib.__read(Array.from(matchingOptions.entries()).find(function (_a) {
-            var _b = tslib.__read(_a, 2), selected = _b[1].selected;
-            return selected;
+            var _b = tslib.__read(_a, 2), value = _b[1].value;
+            return value === lastSelectedValue;
         }) || [], 2), element = _a[0], option = _a[1];
         if (autocomplete === 'manual') {
             setActiveDescendant(!element ? null : tslib.__assign({ element: element }, option));
         }
         else if (autocomplete === 'automatic' &&
             matchingOptions.size &&
-            !selectedValue) {
+            !selectedValues.length) {
             // Fire a home keydown event on listbox to ensure the first item is selected
             requestAnimationFrame(function () {
                 triggerListboxKeyDown(Home);
             });
         }
-    }, [matchingOptions]);
+    }, [selectedValues, 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('');
+            if (selectedValues.length &&
+                selectedValues.includes(inputValue) &&
+                isAutoComplete) {
+                setInputValue('');
             }
         }
-    }, [onFocus, value, selectedValue]);
+    }, [onFocus, inputValue, selectedValues]);
     var handleInputClick = React.useCallback(function (event) {
         var _a;
-        setOpen(true);
-        if (selectedValue && value === selectedValue && isAutoComplete) {
-            setValue('');
+        if (!disabled) {
+            setOpen(true);
+        }
+        if (selectedValues.length &&
+            selectedValues.includes(inputValue) &&
+            isAutoComplete) {
+            setInputValue('');
         }
         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]);
+    }, [disabled, inputValue, selectedValues]);
     var handleComboboxOptionMouseDown = React.useCallback(function (event) {
         // prevent blur from triggering when activating combobox options
         event.preventDefault();
@@ -4147,22 +4229,46 @@ var Combobox = React.forwardRef(function (_a, ref) {
         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()) ||
+            var activeValue_1 = ((_a = activeDescendant.value) === null || _a === void 0 ? void 0 : _a.toString()) ||
                 /* istanbul ignore next: default value */ '';
-            setValue(stringValue);
-            setSelectedValue(stringValue);
-            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
-                target: activeDescendant.element,
-                value: stringValue,
-                previousValue: value
-            });
+            setInputValue(activeValue_1);
+            if (!multiselect) {
+                setSelectedValues([activeValue_1]);
+                onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                    target: activeDescendant.element,
+                    value: activeValue_1,
+                    previousValue: selectedValues[0]
+                });
+            }
+            else {
+                var activeValueIndex = selectedValues.indexOf(activeValue_1);
+                var newSelectedValues = selectedValues.filter(function (v) { return v !== activeValue_1; });
+                if (activeValueIndex === -1) {
+                    newSelectedValues.push(activeValue_1);
+                }
+                setSelectedValues(newSelectedValues);
+                onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                    target: activeDescendant.element,
+                    value: newSelectedValues,
+                    previousValue: selectedValues
+                });
+            }
         }
-    }, [autocomplete, activeDescendant, onBlur]);
+    }, [
+        autocomplete,
+        activeDescendant,
+        onBlur,
+        selectedValues,
+        onSelectionChange
+    ]);
     var handleKeyDown = React.useCallback(function (event) {
+        var _a;
         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);
+        var deleteKeypress = event.key === Delete;
+        var backspaceKeypress = event.key === Backspace;
+        var listboxArrowKeypress = [ArrowUp, ArrowDown].includes(event.key);
         if (
         // prevent the page from scrolling and allow start/end option activation
         [Home, End].includes(event.key) ||
@@ -4180,10 +4286,18 @@ var Combobox = React.forwardRef(function (_a, ref) {
             return;
         }
         setOpen(true);
-        if (!open && arrowKeypress && selectedValue && isAutoComplete) {
+        if (inputValue === '' &&
+            (backspaceKeypress || deleteKeypress || event.key === ArrowLeft) &&
+            pillsRef.current.length !== 0) {
+            (_a = pillsRef.current[pillsRef.current.length - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (!open &&
+            listboxArrowKeypress &&
+            selectedValues.length &&
+            isAutoComplete) {
             // If the user opens the combobox again with a selected value
             // just clear out the field to restore filtering capabilities
-            setValue('');
+            setInputValue('');
         }
         // Space should not trigger selection since the user could be typing
         // a value for autocompletion. Additionally when not open and there's
@@ -4196,37 +4310,124 @@ var Combobox = React.forwardRef(function (_a, ref) {
         // forward input events to listbox
         triggerListboxKeyDown(event.key);
         // Close combobox with keyboard selections
-        if (enterKeypress && activeDescendant) {
+        if (enterKeypress && activeDescendant && !multiselect) {
             setOpen(false);
         }
-    }, [onKeyDown, isAutoComplete, open, selectedValue, activeDescendant]);
+    }, [
+        onKeyDown,
+        isAutoComplete,
+        open,
+        multiselect,
+        selectedValues,
+        activeDescendant
+    ]);
     React.useEffect(function () {
-        if (typeof propValue !== 'undefined') {
-            setValue(propValue);
+        if (isControlled) {
+            if (!multiselect) {
+                setInputValue(propValue || '');
+            }
+            else {
+                setInputValue(propInputValue || '');
+            }
         }
-    }, [propValue]);
+    }, [multiselect, propValue, propInputValue]);
     var handleChange = React.useCallback(function (event) {
+        if (disabled) {
+            return;
+        }
         onChange === null || onChange === void 0 ? void 0 : onChange(event);
         // istanbul ignore else
         if (!isControlled) {
-            setValue(event.target.value);
+            setInputValue(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);
+    var handleRemovePill = React.useCallback(function (target, value) {
+        if (disabled) {
+            return;
         }
-        setSelectedValue(stringValue);
+        var newSelectedValues = selectedValues.filter(function (v) { return v !== value; });
+        setSelectedValues(newSelectedValues);
         onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
             target: target,
-            value: stringValue,
-            previousValue: previousValue === null || previousValue === void 0 ? void 0 : previousValue.toString()
+            value: newSelectedValues,
+            previousValue: selectedValues
         });
-        setOpen(false);
-    }, [isControlled, onSelectionChange]);
+    }, [disabled, selectedValues, onSelectionChange]);
+    var handlePillKeyDown = React.useCallback(function (event) {
+        if (!PillKeys.includes(event.key)) {
+            return;
+        }
+        event.preventDefault();
+        var isDelete = event.key === Delete;
+        var isBackspace = event.key === Backspace;
+        var isArrowLeft = event.key === ArrowLeft;
+        var isArrowRight = event.key === ArrowRight;
+        var focusedIndex = pillsRef.current.findIndex(function (p) { return document.activeElement === p; });
+        var pillsLength = pillsRef.current.length;
+        if (isDelete || isBackspace) {
+            if (disabled) {
+                return;
+            }
+            handleRemovePill(pillsRef.current[focusedIndex], selectedValues[focusedIndex]);
+            var nextIndex = focusedIndex + 1;
+            if (nextIndex == pillsLength) {
+                inputRef.current.focus();
+            }
+            else {
+                pillsRef.current[nextIndex].focus();
+            }
+        }
+        else if (isArrowLeft || isArrowRight) {
+            var nextIndex = Math.max(focusedIndex + (isArrowLeft ? -1 : 1), 0);
+            if (isArrowRight && nextIndex === pillsLength) {
+                inputRef.current.focus();
+            }
+            else {
+                pillsRef.current[nextIndex].focus();
+            }
+        }
+    }, [disabled, pillsRef, handleRemovePill]);
+    var handleSelectionChange = React.useCallback(function (_a) {
+        var target = _a.target, value = _a.value, previousValue = _a.previousValue;
+        if (!multiselect) {
+            var listboxValue = (value === null || value === void 0 ? void 0 : value.toString()) || '';
+            var listboxPreviousValue = (previousValue === null || previousValue === void 0 ? void 0 : previousValue.toString()) || '';
+            // istanbul ignore else
+            if (!isControlled) {
+                setInputValue(listboxValue);
+            }
+            setSelectedValues([listboxValue]);
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: target,
+                value: listboxValue,
+                previousValue: listboxPreviousValue
+            });
+        }
+        else {
+            var listboxPreviousValue = previousValue;
+            var listboxValue = value;
+            var previousValueSet_1 = new Set(listboxPreviousValue);
+            var valueSet_1 = new Set(listboxValue);
+            var removedValues_1 = new Set(listboxPreviousValue.filter(function (v) { return !valueSet_1.has(v); }));
+            var addedValues = listboxValue.filter(function (v) { return !previousValueSet_1.has(v); });
+            var newSelectedValues = selectedValues
+                .filter(function (v) { return !removedValues_1.has(v); })
+                .concat(addedValues);
+            // istanbul ignore else
+            if (!isControlled) {
+                setInputValue('');
+            }
+            setSelectedValues(newSelectedValues);
+            onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({
+                target: target,
+                value: newSelectedValues,
+                previousValue: selectedValues
+            });
+        }
+        if (!multiselect) {
+            setOpen(false);
+        }
+    }, [isControlled, multiselect, selectedValues, onSelectionChange]);
     var handleActiveChange = React.useCallback(function (option) {
         // istanbul ignore else
         if (option.element) {
@@ -4234,38 +4435,59 @@ var Combobox = React.forwardRef(function (_a, ref) {
         }
         onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(option);
     }, []);
-    var NoMatchingOptions = React__default["default"].useMemo(function () {
+    var NoMatchingOptions = React.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', {
+    var noMatchingOptions = !!inputValue && !matchingOptions.size && (React__default["default"].createElement(NoMatchingOptions, null));
+    var comboboxListbox = (
+    // eslint-disable-next-line
+    // @ts-expect-error
+    // multiselect & value props are passed to Listbox, but TS is unable to infer that
+    // it's a correct mapping from Combobox's multiselect & value props
+    React__default["default"].createElement(Listbox, { className: classNames__default["default"]('Combobox__listbox', {
             'Combobox__listbox--open': open
-        }), role: noMatchingOptions ? 'presentation' : 'listbox', "aria-labelledby": noMatchingOptions ? undefined : "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: selectedValue, onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant": undefined },
+        }), role: noMatchingOptions ? 'presentation' : 'listbox', "aria-labelledby": noMatchingOptions ? undefined : "".concat(id, "-label"), id: "".concat(id, "-listbox"), value: multiselect ? selectedValues : selectedValues[0], onMouseDown: handleComboboxOptionMouseDown, onClick: handleComboboxOptionClick, onSelectionChange: handleSelectionChange, onActiveChange: handleActiveChange, ref: listboxRef, tabIndex: undefined, "aria-activedescendant": undefined, multiselect: multiselect, disabled: disabled },
         comboboxOptions,
         noMatchingOptions));
     var errorId = "".concat(id, "-error");
     var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': error
             ? addIdRef(ariaDescribedby, errorId)
             : ariaDescribedby });
-    return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', className), ref: comboboxRef },
-        name && React__default["default"].createElement("input", { type: "hidden", name: name, value: formValue }),
+    return (React__default["default"].createElement("div", { id: id, className: classNames__default["default"]('Combobox', { 'Combobox--multiselect': multiselect }, className), ref: comboboxRef },
+        name &&
+            formValues.map(function (formValue, index) { return (React__default["default"].createElement("input", { type: "hidden", key: index, name: name, value: formValue })); }),
         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))),
+            isRequired && (React__default["default"].createElement("span", { className: "Field__required-text", "aria-hidden": "true" }, requiredText))),
         React__default["default"].createElement(TextFieldWrapper, { className: classNames__default["default"]({ 'TextFieldWrapper--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 }, inputProps, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
+            multiselect &&
+                selectedValues.map(function (value, index) {
+                    var refCallback = function (elem) {
+                        if (elem) {
+                            pillsRef.current[index] = elem;
+                        }
+                        else {
+                            pillsRef.current.splice(index, 1);
+                        }
+                    };
+                    var handleClick = function () {
+                        return handleRemovePill(pillsRef.current[index], value);
+                    };
+                    return (React__default["default"].createElement(ComboboxPill, { ref: refCallback, key: value, value: value, removeOptionLabel: removeOptionLabels[index], disabled: disabled, onClick: handleClick, onKeyDown: handlePillKeyDown }));
+                }),
+            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: inputValue, role: "combobox", disabled: disabled, "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, inputProps, { 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, formValue: formValue, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValue: setFormValue }, portal && typeof document !== 'undefined'
+        React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: inputValue, formValues: formValues, selectedValues: selectedValues, removeOptionLabels: removeOptionLabels, setRemoveOptionLabels: setRemoveOptionLabels, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValues: setFormValues }, portal && typeof document !== 'undefined'
             ? reactDom.createPortal(comboboxListbox, 
             // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
             portal instanceof HTMLElement

package/package.json

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