@deque/cauldron-react 5.12.0-canary.ec511885 → 5.13.0

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

@@ -26,6 +26,7 @@ interface ComboboxProps extends React.InputHTMLAttributes<Omit<HTMLInputElement,
     onActiveChange?: (option: ListboxOption) => void;
     renderNoResults?: (() => JSX.Element) | React.ReactElement;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
+    inputRef?: React.Ref<HTMLInputElement>;
 }
 declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
 export default Combobox;

package/lib/index.js

@@ -4383,16 +4383,16 @@ 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, 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(''), 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 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 comboboxRef = useSharedRef(ref);
-    var inputRef = React.useRef(null);
+    var inputRef = useSharedRef(propInputRef);
     var listboxRef = React.useRef(null);
     var isControlled = typeof propValue !== 'undefined';
     var isRequired = !!props.required;
@@ -4563,6 +4563,10 @@ var Combobox = React.forwardRef(function (_a, ref) {
         }), 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));
+    var errorId = "".concat(id, "-error");
+    var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': error
+            ? tokenList(errorId, ariaDescribedby)
+            : 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 }),
         React__default["default"].createElement("label", { className: classNames__default["default"]('Field__label', {
@@ -4577,7 +4581,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
             // We're handling click here to open the listbox when the wrapping element is clicked,
             // there's already keyboard handlers to open the listbox on the input element
             onClick: handleInputClick },
-            React__default["default"].createElement("input", tslib.__assign({ type: "text", id: "".concat(id, "-input"), ref: inputRef, value: value, role: "combobox", "aria-autocomplete": !isAutoComplete ? 'none' : 'list', "aria-controls": "".concat(id, "-listbox"), "aria-expanded": open, "aria-haspopup": "listbox", "aria-activedescendant": open && activeDescendant ? activeDescendant.element.id : undefined }, props, { onChange: handleChange, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur })),
+            React__default["default"].createElement("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 })),
             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
             ? reactDom.createPortal(comboboxListbox, portal instanceof HTMLElement
@@ -4585,7 +4589,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
                 : portal.current ||
                     /* istanbul ignore next: default fallback value */ document.body)
             : comboboxListbox),
-        hasError && (React__default["default"].createElement("div", { className: "Error", id: "".concat(id, "-error") }, error))));
+        hasError && (React__default["default"].createElement("div", { className: "Error", id: errorId }, error))));
 });
 Combobox.displayName = 'Combobox';
 

package/package.json

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