@deque/cauldron-react 4.3.0-canary.7b91d476 → 4.3.0-canary.9df9e64f

package/lib/components/Checkbox/index.d.ts

@@ -2,7 +2,7 @@ import React, { InputHTMLAttributes, Ref } from 'react';
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
     label: React.ReactNode;
-    labelDescription?: string;
+    labelDescription?: React.ReactNode;
     error?: React.ReactNode;
     customIcon?: React.ReactNode;
     checkboxRef?: Ref<HTMLInputElement>;

package/lib/components/Icon/types.d.ts

@@ -2,6 +2,6 @@
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
  */
 /** IconType represents each valid icon type. */
-export declare 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' | 'close' | 'code' | 'copy' | 'download' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
+export declare 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' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'external-link' | 'eye' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'list' | 'lock' | 'magnifying-glass' | 'menu' | 'minus' | 'new-releases' | 'new' | 'no' | 'pencil' | 'plus' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle' | 'resend' | 'robot' | 'run-again' | 'save' | 'share' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

package/lib/components/IconButton/index.d.ts

@@ -1,9 +1,16 @@
+/**
+ * Unfortunately, eslint does not recognize the Polymorphic component has propTypes set
+ *
+ * We might be able to remove this if we upgrade eslint and associated plugins
+ * See: https://github.com/dequelabs/cauldron/issues/451
+ */
+import React from 'react';
 import * as Polymorphic from '../../utils/polymorphic-type';
 import { IconType } from '../Icon';
 import { TooltipProps } from '../Tooltip';
 export interface IconButtonOwnProps {
     icon: IconType;
-    label: string;
+    label: React.ReactNode;
     tooltipPlacement?: TooltipProps['placement'];
     tooltipVariant?: TooltipProps['variant'];
     tooltipPortal?: TooltipProps['portal'];

package/lib/components/LoaderOverlay/index.d.ts

@@ -4,6 +4,7 @@ interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
     focusOnInitialRender?: boolean;
     children?: React.ReactNode;
+    focusTrap?: boolean;
 }
 declare const LoaderOverlay: React.ForwardRefExoticComponent<LoaderOverlayProps & React.RefAttributes<HTMLDivElement>>;
 export default LoaderOverlay;

package/lib/components/RadioGroup/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 export interface RadioItem extends React.InputHTMLAttributes<HTMLInputElement> {
-    label: string;
+    label: React.ReactNode;
     value?: string;
-    labelDescription?: string;
+    labelDescription?: React.ReactNode;
 }
 export interface RadioGroupProps {
     name?: string;

package/lib/components/Table/TableHeader.d.ts

@@ -7,16 +7,18 @@ interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     onSort?: () => void;
     className?: string;
     sortAscendingAnnouncement?: string;
-    sortDescendingAnnouncemen?: string;
+    sortDescendingAnnouncement?: string;
 }
 declare const TableHeader: {
-    ({ children, sortDirection, onSort, className, sortAscendingAnnouncement, sortDescendingAnnouncemen, ...other }: TableHeaderProps): JSX.Element;
+    ({ children, sortDirection, onSort, className, sortAscendingAnnouncement, sortDescendingAnnouncement, ...other }: TableHeaderProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         sortDirection: PropTypes.Requireable<string>;
         onSort: PropTypes.Requireable<(...args: any[]) => any>;
         className: PropTypes.Requireable<string>;
+        sortAscendingAnnouncement: PropTypes.Requireable<string>;
+        sortDescendingAnnouncement: PropTypes.Requireable<string>;
     };
 };
 export default TableHeader;

package/lib/dropper.js

@@ -0,0 +1,24 @@
+'use strict';
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+
+var _path;
+
+function _extends() { _extends = Object.assign || 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 SvgDropper = props => /*#__PURE__*/React.createElement("svg", _extends({
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 24 24",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "m20.71 5.63-2.34-2.34a.996.996 0 0 0-1.41 0l-3.12 3.12-1.93-1.91-1.41 1.41 1.42 1.42L3 16.25V21h4.75l8.92-8.92 1.42 1.42 1.41-1.41-1.92-1.92 3.12-3.12c.4-.4.4-1.03.01-1.42zM6.92 19 5 17.08l8.06-8.06 1.92 1.92L6.92 19z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports.default = SvgDropper;

package/lib/index.js

@@ -147,6 +147,7 @@ var iconTypes = [
     'code',
     'copy',
     'download',
+    'dropper',
     'exchange',
     'external-link',
     'eye',
@@ -213,6 +214,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/code.svg': return Promise.resolve().then(function () { return require('./code.js'); });
     case './icons/copy.svg': return Promise.resolve().then(function () { return require('./copy.js'); });
     case './icons/download.svg': return Promise.resolve().then(function () { return require('./download.js'); });
+    case './icons/dropper.svg': return Promise.resolve().then(function () { return require('./dropper.js'); });
     case './icons/exchange.svg': return Promise.resolve().then(function () { return require('./exchange.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'); });
@@ -1663,13 +1665,6 @@ var IconButton = React.forwardRef(function (_a, ref) {
             accessibilityProps['aria-disabled'] = disabled;
         }
     }
-    React.useEffect(function () {
-        var _a;
-        if (!disabled) {
-            return;
-        }
-        (_a = internalRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-label', label);
-    }, [disabled]);
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Component, tslib.__assign({ className: classNames(className, {
                 IconButton: true,
@@ -1677,7 +1672,8 @@ var IconButton = React.forwardRef(function (_a, ref) {
                 'IconButton--secondary': variant === 'secondary',
                 'IconButton--error': variant === 'error'
             }), ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),
-            React__default.createElement(Icon, { type: icon })),
+            React__default.createElement(Icon, { type: icon }),
+            React__default.createElement(Offscreen, null, label)),
         !disabled && (React__default.createElement(Tooltip, { target: internalRef, placement: tooltipPlacement, variant: tooltipVariant, portal: tooltipPortal, association: "aria-labelledby", hideElementOnHidden: true }, label))));
 });
 IconButton.propTypes = {
@@ -1685,7 +1681,7 @@ IconButton.propTypes = {
     as: PropTypes.elementType,
     // @ts-expect-error
     icon: PropTypes.string.isRequired,
-    label: PropTypes.string.isRequired,
+    label: PropTypes.node.isRequired,
     // @ts-expect-error
     tooltipPlacement: PropTypes.string,
     // @ts-expect-error
@@ -2360,7 +2356,7 @@ var RadioGroup = function (_a) {
                     var _a;
                     handleChange(radioValue);
                     onChange(radio, (_a = inputs.current) === null || _a === void 0 ? void 0 : _a[index]);
-                }, disabled: disabled, checked: isChecked, "aria-describedby": labelDescription && id + "Desc" }, other)),
+                }, disabled: disabled, checked: isChecked, "aria-describedby": labelDescription ? id + "Desc" : undefined }, other)),
             React__default.createElement("label", { htmlFor: id, className: classNames('Field__label', {
                     'Field__label--disabled': disabled
                 }) }, label),
@@ -8025,7 +8021,7 @@ function useSharedRef(ref) {
 }
 
 var LoaderOverlay = React.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender"]);
+    var className = _a.className, variant = _a.variant, label = _a.label, children = _a.children, focusOnInitialRender = _a.focusOnInitialRender, _b = _a.focusTrap, focusTrap = _b === void 0 ? false : _b, other = tslib.__rest(_a, ["className", "variant", "label", "children", "focusOnInitialRender", "focusTrap"]);
     var overlayRef = useSharedRef(ref);
     React.useEffect(function () {
         if (!!focusOnInitialRender && overlayRef.current) {
@@ -8036,16 +8032,25 @@ var LoaderOverlay = React.forwardRef(function (_a, ref) {
         }
         return;
     }, [overlayRef.current]);
-    return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
-            ? 'Loader__overlay--large'
-            : variant === 'small'
-                ? 'Loader__overlay--small'
-                : ''), ref: overlayRef, tabIndex: -1 }, other),
-        React__default.createElement("div", { className: "Loader__overlay__loader" },
-            React__default.createElement(Loader, { variant: variant }),
-            React__default.createElement(AxeLoader, null)),
-        label ? React__default.createElement("span", { className: "Loader__overlay__label" }, label) : null,
-        children));
+    var Wrapper = focusTrap ? FocusTrap : React__default.Fragment;
+    var wrapperProps = focusTrap
+        ? {
+            focusTrapOptions: {
+                fallbackFocus: '.Loader__overlay'
+            }
+        }
+        : {};
+    return (React__default.createElement(Wrapper, tslib.__assign({}, wrapperProps),
+        React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
+                ? 'Loader__overlay--large'
+                : variant === 'small'
+                    ? 'Loader__overlay--small'
+                    : ''), ref: overlayRef, tabIndex: -1 }, other),
+            React__default.createElement("div", { className: "Loader__overlay__loader" },
+                React__default.createElement(Loader, { variant: variant }),
+                React__default.createElement(AxeLoader, null)),
+            label ? (React__default.createElement("span", { className: "Loader__overlay__label" }, label)) : null,
+            children)));
 });
 LoaderOverlay.propTypes = {
     className: PropTypes.string,
@@ -8125,18 +8130,15 @@ TableHead.propTypes = {
 };
 
 var TableHeader = function (_a) {
-    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncemen, sortDescendingAnnouncemen = _c === void 0 ? 'sorted descending' : _c, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncemen"]);
+    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, _b = _a.sortAscendingAnnouncement, sortAscendingAnnouncement = _b === void 0 ? 'sorted ascending' : _b, _c = _a.sortDescendingAnnouncement, sortDescendingAnnouncement = _c === void 0 ? 'sorted descending' : _c, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className", "sortAscendingAnnouncement", "sortDescendingAnnouncement"]);
     // When the sort direction changes, we want to announce the change in a live region
     // because changes to the sort value is not widely supported yet
     // see: https://a11ysupport.io/tech/aria/aria-sort_attribute
-    var _d = tslib.__read(React.useState(''), 2), announcement = _d[0], setAnnouncement = _d[1];
-    React.useEffect(function () {
-        if (sortDirection !== 'none') {
-            setAnnouncement(sortDirection === 'ascending'
-                ? sortAscendingAnnouncement
-                : sortDescendingAnnouncemen);
-        }
-    }, [sortDirection]);
+    var announcement = sortDirection === 'ascending'
+        ? sortAscendingAnnouncement
+        : sortDirection === 'descending'
+            ? sortDescendingAnnouncement
+            : '';
     return (React__default.createElement("th", tslib.__assign({ "aria-sort": sortDirection, className: classNames('TableHeader', className, {
             'TableHeader--sort-ascending': sortDirection === 'ascending',
             'TableHeader--sort-descending': sortDirection === 'descending'
@@ -8151,7 +8153,9 @@ TableHeader.propTypes = {
     children: PropTypes.node.isRequired,
     sortDirection: PropTypes.string,
     onSort: PropTypes.func,
-    className: PropTypes.string
+    className: PropTypes.string,
+    sortAscendingAnnouncement: PropTypes.string,
+    sortDescendingAnnouncement: PropTypes.string
 };
 
 var TableRow = function (_a) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.3.0-canary.7b91d476",
+  "version": "4.3.0-canary.9df9e64f",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"