@deque/cauldron-react 6.20.2 → 6.21.0

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/components/Icon/types.d.ts

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'broken-image' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'images' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload';
+export type IconType = 'add-user' | 'arrow-circle-up' | 'arrow-circle-down' | 'arrow-circle-left' | 'arrow-circle-right' | 'arrow-up' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrows-alt' | 'bolt' | 'broken-image' | 'caution' | 'check-circle' | 'check-shield' | 'check-solid' | 'check' | 'checkbox-checked' | 'checkbox-unchecked' | 'chevron-double-up' | 'chevron-double-down' | 'chevron-double-left' | 'chevron-double-right' | 'chevron-up' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'clipboard' | 'clock' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'github' | 'grid' | 'hamburger-menu' | 'hashtag' | 'highlight' | 'images' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | 'linkedin' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'person-running' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share-nodes' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'step-back' | 'step-forward' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'twitter' | 'upload' | 'filter-solid';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

package/lib/filter.js

@@ -31,9 +31,9 @@ const SvgFilter = props => /*#__PURE__*/React__namespace.createElement("svg", _e
   height: 24,
   width: 24
 }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z",
-  fill: "currentColor",
-  vectorEffect: "non-scaling-stroke"
+  d: "M18.65 4.67H5.34a.616.616 0 0 0-.62.41c-.12.24-.06.55.16.73L10 10.94V16c0 .18.07.35.2.47l2.67 2.67c.12.13.29.2.47.2.09 0 .18-.02.26-.05.26-.1.42-.35.4-.63v-7.72l5.13-5.13c.21-.18.28-.48.15-.73a.628.628 0 0 0-.63-.41z",
+  vectorEffect: "non-scaling-stroke",
+  fill: "currentColor"
 })));
 
 exports["default"] = SvgFilter;

package/lib/index.js

@@ -142,7 +142,6 @@ var iconTypes = [
     'export-solid',
     'external-link',
     'eye',
-    'filter-solid',
     'filter',
     'flag',
     'gears',
@@ -198,7 +197,8 @@ var iconTypes = [
     'triangle-left',
     'triangle-right',
     'twitter',
-    'upload'
+    'upload',
+    'filter-solid'
 ];
 
 function __variableDynamicImportRuntime0__(path) {
@@ -229,7 +229,6 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/export-solid.svg': return Promise.resolve().then(function () { return require('./export-solid.js'); });
     case './icons/external-link.svg': return Promise.resolve().then(function () { return require('./external-link.js'); });
     case './icons/eye.svg': return Promise.resolve().then(function () { return require('./eye.js'); });
-    case './icons/filter-solid.svg': return Promise.resolve().then(function () { return require('./filter-solid.js'); });
     case './icons/filter.svg': return Promise.resolve().then(function () { return require('./filter.js'); });
     case './icons/flag.svg': return Promise.resolve().then(function () { return require('./flag.js'); });
     case './icons/gears.svg': return Promise.resolve().then(function () { return require('./gears.js'); });
@@ -290,6 +289,15 @@ function __variableDynamicImportRuntime0__(path) {
     })
    }
  }
+/**
+ * Some icons have a mapped type different from their filename;
+ * This is only a temporary measure to consolidate similar icons
+ * until we can address Cauldron's iconography.
+ * see: https://github.com/dequelabs/cauldron/issues/869
+ */
+var MAPPED_TYPES = {
+    'filter-solid': 'filter'
+};
 var Icon = React.forwardRef(function (_a, ref) {
     var _b;
     var label = _a.label, className = _a.className, type = _a.type, other = tslib.__rest(_a, ["label", "className", "type"]);
@@ -306,7 +314,8 @@ var Icon = React.forwardRef(function (_a, ref) {
         if (process.env.NODE_ENV === 'test') {
             return;
         }
-        __variableDynamicImportRuntime0__("./icons/".concat(name, ".svg"))
+        var iconName = MAPPED_TYPES[name] || name;
+        __variableDynamicImportRuntime0__("./icons/".concat(iconName, ".svg"))
             .then(function (icon) {
             isMounted.current && setIcon(function () { return icon.default; });
         })
@@ -1781,15 +1790,16 @@ 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: {
-            reference: resolveElement(target),
-            floating: ref.current
+            reference: resolveElement(target)
         },
         whileElementsMounted: dom.autoUpdate
-    }), floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
+    }), refs = _f.refs, floatingStyles = _f.floatingStyles, placement = _f.placement, middlewareData = _f.middlewareData;
     useEscapeKey({
         active: open,
         capture: true,
@@ -1819,7 +1829,10 @@ var AnchoredOverlay = React.forwardRef(function (_a, refProp) {
             });
         }
     }, [onShiftChange, (_b = middlewareData.shift) === null || _b === void 0 ? void 0 : _b.x, (_c = middlewareData.shift) === null || _c === void 0 ? void 0 : _c.y]);
-    var AnchoredOverlayComponent = (React__default["default"].createElement(Component, tslib.__assign({ ref: ref }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
+    var AnchoredOverlayComponent = (React__default["default"].createElement(Component, tslib.__assign({ ref: function (element) {
+            refs.setFloating(element);
+            ref.current = element;
+        } }, props, { style: tslib.__assign(tslib.__assign({}, floatingStyles), style) }), children));
     if (portal && !isBrowser()) {
         return null;
     }
@@ -3963,12 +3976,13 @@ function useComboboxContext() {
  * const intersectionRef = useIntersectionRef<HTMLElement>(elementRef)
  * return <span ref={elementRef}>...</span>
  */
-function useIntersectionRef(element, intersectionObserverOptions) {
+function useIntersectionRef(elementOrRef, intersectionObserverOptions) {
     if (intersectionObserverOptions === void 0) { intersectionObserverOptions = {
         root: null,
         threshold: 1.0
     }; }
     var intersectionRef = React.useRef(null);
+    var element = resolveElement(elementOrRef);
     React.useEffect(function () {
         // istanbul ignore else
         if ('IntersectionObserver' in globalThis &&
@@ -3976,8 +3990,7 @@ function useIntersectionRef(element, intersectionObserverOptions) {
             if (typeof element === 'undefined' || element === null) {
                 return;
             }
-            if (!(element instanceof HTMLElement) &&
-                !(element.current instanceof HTMLElement)) {
+            if (!(element instanceof HTMLElement)) {
                 console.warn('An element or ref was provided to useIntersectionRef that was not an HTMLElement.');
                 return;
             }
@@ -3986,7 +3999,7 @@ function useIntersectionRef(element, intersectionObserverOptions) {
                 intersectionRef.current = entry;
             };
             var observer_1 = new IntersectionObserver(handleIntersection, intersectionObserverOptions);
-            observer_1.observe(element instanceof HTMLElement ? element : element.current);
+            observer_1.observe(element);
             return function () {
                 observer_1.disconnect();
             };
@@ -4156,7 +4169,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;
@@ -4500,9 +4513,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 })); }),
@@ -4512,6 +4531,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
@@ -4541,8 +4564,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';
 
@@ -4621,25 +4643,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
@@ -5054,10 +5076,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') {
@@ -5069,7 +5091,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/lib/utils/useIntersectionRef.d.ts

@@ -1,4 +1,5 @@
 import type { MutableRefObject } from 'react';
+import type { ElementOrRef } from '../types';
 /**
  * When a component needs to track intersection via a ref, useIntersectionRef
  * will return a ref object containing the results from IntersectionObserver
@@ -9,4 +10,4 @@ import type { MutableRefObject } from 'react';
  * const intersectionRef = useIntersectionRef<HTMLElement>(elementRef)
  * return <span ref={elementRef}>...</span>
  */
-export default function useIntersectionRef<T extends HTMLElement>(element: T | MutableRefObject<T>, intersectionObserverOptions?: IntersectionObserverInit): MutableRefObject<IntersectionObserverEntry | null>;
+export default function useIntersectionRef<T extends HTMLElement>(elementOrRef: ElementOrRef<T>, intersectionObserverOptions?: IntersectionObserverInit): MutableRefObject<IntersectionObserverEntry | null>;

package/package.json

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

package/lib/filter-solid.js

@@ -1,39 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function _interopNamespace(e) {
-	if (e && e.__esModule) return e;
-	var n = Object.create(null);
-	if (e) {
-		Object.keys(e).forEach(function (k) {
-			if (k !== 'default') {
-				var d = Object.getOwnPropertyDescriptor(e, k);
-				Object.defineProperty(n, k, d.get ? d : {
-					enumerable: true,
-					get: function () { return e[k]; }
-				});
-			}
-		});
-	}
-	n["default"] = e;
-	return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-var _path;
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-const SvgFilterSolid = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  overflow: "visible",
-  preserveAspectRatio: "none",
-  viewBox: "0 0 24 24",
-  height: 24,
-  width: 24
-}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M18.65 4.67H5.34a.616.616 0 0 0-.62.41c-.12.24-.06.55.16.73L10 10.94V16c0 .18.07.35.2.47l2.67 2.67c.12.13.29.2.47.2.09 0 .18-.02.26-.05.26-.1.42-.35.4-.63v-7.72l5.13-5.13c.21-.18.28-.48.15-.73a.628.628 0 0 0-.63-.41z",
-  vectorEffect: "non-scaling-stroke",
-  fill: "currentColor"
-})));
-
-exports["default"] = SvgFilterSolid;