@deque/cauldron-react 5.11.0 → 5.12.0-canary.6dd5a340

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/components/Dialog/index.d.ts

@@ -38,6 +38,7 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     };
     private element;
     private heading;
+    private headingId;
     constructor(props: DialogProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

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' | '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' | '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' | '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' | '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' | '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';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

package/lib/index.js

@@ -216,6 +216,8 @@ var iconTypes = [
     'sort-triangle',
     'sort',
     'star',
+    'step-back',
+    'step-forward',
     'sun',
     'table-sort-ascending',
     'table-sort-descending',
@@ -299,6 +301,8 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/sort-triangle.svg': return Promise.resolve().then(function () { return require('./sort-triangle.js'); });
     case './icons/sort.svg': return Promise.resolve().then(function () { return require('./sort.js'); });
     case './icons/star.svg': return Promise.resolve().then(function () { return require('./star.js'); });
+    case './icons/step-back.svg': return Promise.resolve().then(function () { return require('./step-back.js'); });
+    case './icons/step-forward.svg': return Promise.resolve().then(function () { return require('./step-forward.js'); });
     case './icons/sun.svg': return Promise.resolve().then(function () { return require('./sun.js'); });
     case './icons/table-sort-ascending.svg': return Promise.resolve().then(function () { return require('./table-sort-ascending.js'); });
     case './icons/table-sort-descending.svg': return Promise.resolve().then(function () { return require('./table-sort-descending.js'); });
@@ -1557,6 +1561,7 @@ var Dialog = /** @class */ (function (_super) {
     tslib.__extends(Dialog, _super);
     function Dialog(props) {
         var _this = _super.call(this, props) || this;
+        _this.headingId = nextId__default["default"]('dialog-title-');
         _this.close = _this.close.bind(_this);
         _this.focusHeading = _this.focusHeading.bind(_this);
         _this.handleClickOutside = _this.handleClickOutside.bind(_this);
@@ -1613,10 +1618,10 @@ var Dialog = /** @class */ (function (_super) {
                             return;
                         }
                         setRef(dialogRef, el);
-                    } }, other),
+                    }, "aria-labelledby": this.headingId }, other),
                     React__default["default"].createElement("div", { className: "Dialog__inner" },
                         React__default["default"].createElement("div", { className: "Dialog__header" },
-                            React__default["default"].createElement(Heading, { className: "Dialog__heading", ref: function (el) { return (_this.heading = el); }, tabIndex: -1 }, typeof heading === 'object' && 'text' in heading
+                            React__default["default"].createElement(Heading, { className: "Dialog__heading", ref: function (el) { return (_this.heading = el); }, tabIndex: -1, id: this.headingId }, typeof heading === 'object' && 'text' in heading
                                 ? heading.text
                                 : heading),
                             close),
@@ -4378,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;
@@ -4558,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', {
@@ -4572,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
@@ -4580,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';
 
@@ -4628,7 +4637,9 @@ var Popover = React.forwardRef(function (_a, ref) {
     var placement = (attributes.popper &&
         attributes.popper['data-popper-placement']) ||
         initialPlacement;
-    var additionalProps = variant === 'prompt' ? { 'aria-labelledby': "".concat(id, "-label") } : {};
+    var additionalProps = variant === 'prompt' && !props['aria-label']
+        ? { 'aria-labelledby': "".concat(id, "-label") }
+        : {};
     // Keep targetElement in sync with target prop
     React.useEffect(function () {
         var targetElement = target && 'current' in target ? target.current : target;
@@ -4720,7 +4731,7 @@ var Popover = React.forwardRef(function (_a, ref) {
             React__default["default"].createElement("div", tslib.__assign({ id: id, className: classNames__default["default"]('Popover', "Popover--".concat(placement), className, {
                     'Popover--hidden': !show,
                     'Popover--prompt': variant === 'prompt'
-                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, props, additionalProps),
+                }), ref: popoverRef, role: "dialog", style: styles.popper }, attributes.popper, additionalProps, props),
                 React__default["default"].createElement("div", { className: "Popover__popoverArrow", ref: setArrowElement, style: styles.arrow }),
                 React__default["default"].createElement("div", { className: "Popover__borderLeft" }),
                 variant === 'prompt' ? (React__default["default"].createElement(PromptPopoverContent, { applyButtonText: applyButtonText, onApply: onApply, closeButtonText: closeButtonText, infoText: infoText || '', onClose: handleClosePopover, infoTextId: "".concat(id, "-label") })) : (children)))), (portal && 'current' in portal ? portal.current : portal) || document.body);

package/lib/step-back.js

@@ -0,0 +1,45 @@
+'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 SvgStepBack = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 26 26",
+  style: {
+    transform: "scaleX(-1) rotate(90deg)"
+  },
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M18 3h-6l6 6H7a7 7 0 1 0 0 14v-4a3 3 0 1 1 0-6h11l-6 6h6l8-8-8-8z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports["default"] = SvgStepBack;

package/lib/step-forward.js

@@ -0,0 +1,45 @@
+'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 SvgStepForward = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 26 26",
+  style: {
+    transform: "rotate(90deg)"
+  },
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M18 3h-6l6 6H7a7 7 0 1 0 0 14v-4a3 3 0 1 1 0-6h11l-6 6h6l8-8-8-8z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports["default"] = SvgStepForward;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "5.11.0",
+  "version": "5.12.0-canary.6dd5a340",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",
@@ -57,7 +57,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "jest": "^24.7.1",
-    "jest-axe": "^3.4.0",
+    "jest-axe": "^8.0.0",
     "nyc": "^15.0.1",
     "postcss-cli": "^7.1.1",
     "postcss-import": "^12.0.1",