@deque/cauldron-react 5.9.1-canary.db304969 → 5.10.0-canary.3e283f97

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

@@ -7,6 +7,7 @@ interface ComboboxOption {
     key?: string;
     label: string;
     value?: ComboboxValue;
+    formValue?: ComboboxValue;
     description?: string;
 }
 interface ComboboxProps extends React.InputHTMLAttributes<Omit<HTMLInputElement, 'value' | 'defaultValue'>> {

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

@@ -3,9 +3,11 @@ import { ComboboxValue } from './ComboboxOption';
 type ComboboxContext = {
     autocomplete: 'none' | 'manual' | 'automatic';
     inputValue: ComboboxValue;
+    formValue: ComboboxValue;
     selectedValue: ComboboxValue;
     matchingOptions: Map<HTMLElement, ComboboxOptionState>;
     setMatchingOptions: React.Dispatch<React.SetStateAction<Map<HTMLElement, ComboboxOptionState>>>;
+    setFormValue: React.Dispatch<React.SetStateAction<ComboboxValue>>;
     matches: (<T extends string = string>(value: T) => boolean) | boolean;
 };
 export type ComboboxOptionState = {
@@ -17,6 +19,6 @@ type ComboboxProvider = {
     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 ComboboxProvider({ autocomplete, inputValue, formValue, selectedValue, matches, matchingOptions, setMatchingOptions, setFormValue, children }: ComboboxProvider): JSX.Element;
 declare function useComboboxContext(): ComboboxContext;
 export { ComboboxProvider, useComboboxContext };

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

@@ -5,6 +5,7 @@ export type ComboboxValue = Exclude<ListboxValue, number>;
 interface ComboboxOptionProps extends React.HTMLAttributes<HTMLLIElement> {
     disabled?: boolean;
     value?: ComboboxValue;
+    formValue?: ComboboxValue;
     description?: ContentNode;
     children: string;
 }

package/lib/index.js

@@ -4188,30 +4188,36 @@ ListboxGroup.displayName = 'ListboxGroup';
 var ComboboxContext = React.createContext({
     autocomplete: 'manual',
     inputValue: undefined,
+    formValue: undefined,
     selectedValue: undefined,
     matches: true,
     matchingOptions: new Map(),
-    setMatchingOptions: function () { return null; }
+    setMatchingOptions: function () { return null; },
+    setFormValue: 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 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 Provider = ComboboxContext.Provider;
     var contextValue = React.useMemo(function () { return ({
         autocomplete: autocomplete,
         inputValue: inputValue,
+        formValue: formValue,
         selectedValue: selectedValue,
         matches: typeof matches === 'function' && !!inputValue
             ? function (value) { return matches(inputValue, value); }
             : true,
         matchingOptions: matchingOptions,
-        setMatchingOptions: setMatchingOptions
+        setMatchingOptions: setMatchingOptions,
+        setFormValue: setFormValue
     }); }, [
         autocomplete,
         inputValue,
+        formValue,
         selectedValue,
         matches,
         matchingOptions,
-        setMatchingOptions
+        setMatchingOptions,
+        setFormValue
     ]);
     return React__default["default"].createElement(Provider, { value: contextValue }, children);
 }
@@ -4284,10 +4290,10 @@ var ComboboxMatch = function (_a) {
         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 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(), matches = _d.matches, setMatchingOptions = _d.setMatchingOptions;
+    var _d = useComboboxContext(), selectedValue = _d.selectedValue, matches = _d.matches, setMatchingOptions = _d.setMatchingOptions, setFormValue = _d.setFormValue;
     var comboboxOptionRef = useSharedRef(ref);
     var intersectionRef = useIntersectionRef(comboboxOptionRef, {
         root: null,
@@ -4315,6 +4321,15 @@ var ComboboxOption = React.forwardRef(function (_a, ref) {
             });
         }
     }, [isActive]);
+    React.useEffect(function () {
+        var _a;
+        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]);
     React.useEffect(function () {
         if (isMatching) {
             setMatchingOptions(function (options) {
@@ -4363,13 +4378,14 @@ 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, 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 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, props = tslib.__rest(_a, ["id", "className", "label", "children", "options", "value", "defaultValue", "requiredText", "error", "autocomplete", "onSelectionChange", "onActiveChange", "onChange", "onKeyDown", "onFocus", "onBlur", "name", "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 _h = tslib.__read(React.useState(''), 2), formValue = _h[0], setFormValue = _h[1];
+    var _j = tslib.__read(React.useState(false), 2), open = _j[0], setOpen = _j[1];
+    var _k = tslib.__read(React.useState(null), 2), activeDescendant = _k[0], setActiveDescendant = _k[1];
+    var _l = tslib.__read(propId ? [propId] : nextId.useId(1, 'combobox'), 1), id = _l[0];
     var comboboxRef = useSharedRef(ref);
     var inputRef = React.useRef(null);
     var listboxRef = React.useRef(null);
@@ -4398,7 +4414,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
             setActiveDescendant(null);
         }
         if (open && autocomplete === 'automatic' && !selectedValue) {
-            // Fire an Home keydown event on listbox to ensure the first item is selected
+            // Fire a Home keydown event on listbox to ensure the first item is selected
             triggerListboxKeyDown(Home);
         }
     }, [open]);
@@ -4539,10 +4555,11 @@ var Combobox = React.forwardRef(function (_a, ref) {
     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": "" },
+        }), 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": undefined },
         comboboxOptions,
         noMatchingOptions));
     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 }),
         React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
                 'Field__label--is-required': isRequired,
                 'Field__label--has-error': hasError
@@ -4557,7 +4574,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
             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
+        React__default["default"].createElement(ComboboxProvider, { autocomplete: autocomplete, inputValue: value, formValue: formValue, selectedValue: selectedValue, matches: !isAutoComplete || defaultAutoCompleteMatches, matchingOptions: matchingOptions, setMatchingOptions: setMatchingOptions, setFormValue: setFormValue }, portal
             ? reactDom.createPortal(comboboxListbox, portal instanceof HTMLElement
                 ? portal
                 : portal.current ||

package/package.json

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