@deque/cauldron-react 6.20.2-canary.69d3e215 → 6.20.2-canary.82effd86

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

@@ -21,6 +21,7 @@ interface BaseComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     renderNoResults?: (() => React.JSX.Element) | React.ReactElement;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     inputRef?: React.Ref<HTMLInputElement>;
+    description?: React.ReactNode;
 }
 interface SingleSelectComboboxProps extends BaseComboboxProps {
     value?: ComboboxValue;

package/lib/index.js

@@ -1781,7 +1781,9 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
                 ? reactDom$1.autoPlacement({
                     alignment: getAutoAlignment(initialPlacement)
                 })
-                : reactDom$1.flip(),
+                : reactDom$1.flip({
+                    fallbackAxisSideDirection: 'start'
+                }),
             reactDom$1.shift({ crossAxis: false })
         ].filter(Boolean),
         elements: {
@@ -4158,7 +4160,7 @@ 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, 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 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, description = _a.description, 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", "description", '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;
@@ -4502,9 +4504,15 @@ var Combobox = React.forwardRef(function (_a, ref) {
         comboboxOptions,
         noMatchingOptions));
     var errorId = "".concat(id, "-error");
-    var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': error
-            ? addIdRef(ariaDescribedby, errorId)
-            : ariaDescribedby });
+    var descriptionId = "".concat(id, "-description");
+    var describedby = ariaDescribedby;
+    if (description) {
+        describedby = addIdRef(describedby, descriptionId);
+    }
+    if (error) {
+        describedby = addIdRef(describedby, errorId);
+    }
+    var inputProps = tslib.__assign(tslib.__assign({}, props), { 'aria-describedby': describedby });
     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 })); }),
@@ -4514,6 +4522,10 @@ var Combobox = React.forwardRef(function (_a, ref) {
             }), 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", "aria-hidden": "true" }, requiredText))),
+        description && (React__default["default"].createElement("span", { className: "Field__description", id: descriptionId }, description)),
+        hasError && (React__default["default"].createElement("div", { className: "Field__error", id: errorId },
+            React__default["default"].createElement(Icon, { type: "caution" }),
+            error)),
         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
@@ -4543,8 +4555,7 @@ var Combobox = React.forwardRef(function (_a, ref) {
                 : portal.current ||
                     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
                     /* istanbul ignore next: default fallback value */ document.body)
-            : comboboxListbox),
-        hasError && (React__default["default"].createElement("div", { className: "Error", id: errorId }, error))));
+            : comboboxListbox)));
 });
 Combobox.displayName = 'Combobox';
 
@@ -4623,25 +4634,25 @@ var Popover = React.forwardRef(function (_a, ref) {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.setAttribute('aria-haspopup', 'true');
         }
     }, [targetElement, id, show]);
-    var handleClickOutside = function (e) {
+    var handleClosePopover = function () {
+        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        if (show) {
+            onClose();
+        }
+    };
+    var handleClickOutside = React.useCallback(function (e) {
         if (e.target === targetElement) {
             return;
         }
         if (show) {
             handleClosePopover();
         }
-    };
+    }, [show, targetElement, handleClosePopover]);
     var attachIsolator = function () {
         if (popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current) {
             setIsolator(new AriaIsolate(popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current));
         }
     };
-    var handleClosePopover = function () {
-        isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
-        if (show) {
-            onClose();
-        }
-    };
     useEscapeKey({
         callback: handleClosePopover,
         active: show
@@ -5056,10 +5067,10 @@ var ActionListSeparator = React.forwardRef(function (_a, ref) {
 ActionListSeparator.displayName = 'ActionListSeparator';
 
 var ActionListLinkItem = React.forwardRef(function (_a, ref) {
-    var key = _a.key, className = _a.className; 
+    var className = _a.className; 
     // ActionListLinkItem should not be able to be "selected"
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    _a.selected; var props = tslib.__rest(_a, ["key", "className", "selected"]);
+    _a.selected; var props = tslib.__rest(_a, ["className", "selected"]);
     var contextRole = useActionListContext().role;
     var listItemRole = React.useMemo(function () {
         if (contextRole === 'menu') {
@@ -5071,7 +5082,7 @@ var ActionListLinkItem = React.forwardRef(function (_a, ref) {
         }
         return undefined;
     }, [contextRole]);
-    return (React__default["default"].createElement(ActionListItem, tslib.__assign({ key: key, ref: ref, className: classNames__default["default"]('Link ActionListLinkItem', className), as: "a", role: listItemRole, tabIndex: listItemRole === 'menuitem' ? -1 : undefined }, props)));
+    return (React__default["default"].createElement(ActionListItem, tslib.__assign({ ref: ref, className: classNames__default["default"]('Link ActionListLinkItem', className), as: "a", role: listItemRole, tabIndex: listItemRole === 'menuitem' ? -1 : undefined }, props)));
 });
 ActionListLinkItem.displayName = 'ActionListLinkItem';
 

package/package.json

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