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

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

@@ -4,6 +4,7 @@ interface Props extends SyntaxHighlighterProps {
     children: React.ReactNode;
     language?: 'javascript' | 'css' | 'html' | 'yaml';
     className?: string;
+    tabIndex?: number;
 }
 declare const Code: React.ComponentType<Props>;
 export default Code;

package/lib/components/ExpandCollapsePanel/PanelTrigger.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { IconType } from '../Icon';
 export interface PanelTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children?: ((props: {
         open: boolean;
@@ -7,14 +8,18 @@ export interface PanelTriggerProps extends React.ButtonHTMLAttributes<HTMLButton
     open?: boolean;
     fullWidth?: string;
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    iconExpanded?: IconType;
+    iconCollapsed?: IconType;
 }
-declare function PanelTrigger({ children, className, open, fullWidth, onClick, ...other }: PanelTriggerProps): JSX.Element;
+declare function PanelTrigger({ children, className, open, fullWidth, onClick, iconExpanded, iconCollapsed, ...other }: PanelTriggerProps): JSX.Element;
 declare namespace PanelTrigger {
     var propTypes: {
         children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         open: PropTypes.Requireable<boolean>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
         className: PropTypes.Requireable<string>;
+        iconExpanded: PropTypes.Requireable<string>;
+        iconCollapsed: PropTypes.Requireable<string>;
     };
 }
 declare const _default: React.MemoExoticComponent<typeof PanelTrigger>;

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' | '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' | '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/Table/TableHeader.d.ts

@@ -6,9 +6,11 @@ interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
     sortDirection?: SortDirection;
     onSort?: () => void;
     className?: string;
+    sortAscendingAnnouncement?: string;
+    sortDescendingAnnouncemen?: string;
 }
 declare const TableHeader: {
-    ({ children, sortDirection, onSort, className, ...other }: TableHeaderProps): JSX.Element;
+    ({ children, sortDirection, onSort, className, sortAscendingAnnouncement, sortDescendingAnnouncemen, ...other }: TableHeaderProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;

package/lib/components/TwoColumnPanel/TwoColumnPanel.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import SkipLink from '../SkipLink';
 interface TwoColumnPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     initialCollapsed?: boolean;
     showCollapsedPanelLabel?: string;
     hideCollapsedPanelLabel?: string;
+    skipLink?: SkipLink;
 }
 declare const TwoColumnPanel: React.ForwardRefExoticComponent<TwoColumnPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default TwoColumnPanel;

package/lib/index.js

@@ -164,6 +164,7 @@ var iconTypes = [
     'lock',
     'magnifying-glass',
     'menu',
+    'minus',
     'new-releases',
     'new',
     'no',
@@ -229,6 +230,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/lock.svg': return Promise.resolve().then(function () { return require('./lock.js'); });
     case './icons/magnifying-glass.svg': return Promise.resolve().then(function () { return require('./magnifying-glass.js'); });
     case './icons/menu.svg': return Promise.resolve().then(function () { return require('./menu.js'); });
+    case './icons/minus.svg': return Promise.resolve().then(function () { return require('./minus.js'); });
     case './icons/new-releases.svg': return Promise.resolve().then(function () { return require('./new-releases.js'); });
     case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
     case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
@@ -1421,8 +1423,9 @@ var SkipLink = /** @class */ (function (_super) {
         return (React__default.createElement("nav", tslib.__assign({ className: classNames('SkipLink', currentClass) }, other),
             React__default.createElement("a", { href: target, className: "SkipLink__link", onClick: this.onClick, onFocus: this.onFocus, onBlur: this.onBlur },
                 React__default.createElement("span", { className: "SkipLink__item--first" }, skipText),
-                "\u00A0",
-                React__default.createElement("span", { className: "SkipLink__item--second" }, targetText))));
+                React__default.createElement("span", { className: "SkipLink__item--second" },
+                    React__default.createElement(Icon, { type: "triangle-right" }),
+                    targetText))));
     };
     SkipLink.prototype.onClick = function () {
         if (!isBrowser()) {
@@ -2597,16 +2600,18 @@ var TextField = /** @class */ (function (_super) {
 }(React__default.Component));
 
 function PanelTrigger(_a) {
-    var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick"]);
+    var children = _a.children, className = _a.className, open = _a.open, fullWidth = _a.fullWidth, onClick = _a.onClick, _b = _a.iconExpanded, iconExpanded = _b === void 0 ? 'chevron-down' : _b, _c = _a.iconCollapsed, iconCollapsed = _c === void 0 ? 'chevron-right' : _c, other = tslib.__rest(_a, ["children", "className", "open", "fullWidth", "onClick", "iconExpanded", "iconCollapsed"]);
     return (React__default.createElement("button", tslib.__assign({}, other, { className: classNames('ExpandCollapse__trigger', fullWidth ? 'fullWidth' : '', className), type: "button", "aria-expanded": open, onClick: onClick }),
         React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function' ? children({ open: !!open }) : children),
-        React__default.createElement(Icon, { type: open ? 'chevron-down' : 'chevron-right' })));
+        React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed })));
 }
 PanelTrigger.propTypes = {
     children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
     open: PropTypes.bool,
     onClick: PropTypes.func,
-    className: PropTypes.string
+    className: PropTypes.string,
+    iconExpanded: PropTypes.string,
+    iconCollapsed: PropTypes.string
 };
 var PanelTrigger$1 = React__default.memo(PanelTrigger);
 
@@ -7981,8 +7986,8 @@ SyntaxHighlighter.registerLanguage('css', css_1);
 SyntaxHighlighter.registerLanguage('html', xml_1);
 SyntaxHighlighter.registerLanguage('yaml', yaml_1);
 var Code = function (_a) {
-    var children = _a.children, className = _a.className, props = tslib.__rest(_a, ["children", "className"]);
-    return (React__default.createElement(SyntaxHighlighter, tslib.__assign({}, props, { useInlineStyles: false, className: classNames('Code', className) }), children));
+    var children = _a.children, className = _a.className, tabIndex = _a.tabIndex, props = tslib.__rest(_a, ["children", "className", "tabIndex"]);
+    return (React__default.createElement(SyntaxHighlighter, tslib.__assign({}, props, { useInlineStyles: false, className: classNames('Code', className), tabIndex: tabIndex }), children));
 };
 Code.displayName = 'Code';
 Code.propTypes = {
@@ -7997,9 +8002,31 @@ function AxeLoader() {
         React__default.createElement("path", { fill: "currentColor", d: "M379 549.9h-27.6v-16.7c-7.4 13.5-22.8 20.2-39 20.2-37.1 0-58.9-28.9-58.9-61.6 0-36.5 26.4-61.4 58.9-61.4 21.1 0 34 11.2 39 20.5V434H379v115.9zm-97.8-57.4c0 14.3 10.3 35.2 35.2 35.2 15.4 0 25.5-8 30.8-18.6 2.7-5.1 4-10.5 4.4-16.2.2-5.5-.8-11.2-3.2-16.2-4.9-11-15.6-20.5-32.3-20.5-22.4 0-35 18.1-35 36.1v.2zM436.2 488.9l-39-54.8h33.3l22.6 35.6 22.6-35.6h32.9l-38.8 54.8 43.2 61h-34L453.1 510l-26.2 39.9h-33.5l42.8-61z" })));
 }
 
-var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
+/**
+ * When a component needs to track an internal ref on a component that has a
+ * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
+ * correctly invoke the parent ref as well providing an internal ref.
+ *
+ * @example
+ * React.forwardRef(function Component({ children }, ref) {
+ *   const internalRef = useSharedRef<HTMLElement>(ref)
+ *   if (internalRef.current) {
+ *     // do something with the internal ref...
+ *   }
+ *   return (<div ref={internalRef}>...</div>)
+ * })
+ */
+function useSharedRef(ref) {
+    var internalRef = React.useRef();
+    React.useEffect(function () {
+        setRef(ref, internalRef.current);
+    }, [ref]);
+    return internalRef;
+}
+
+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 overlayRef = typeof ref === 'function' || !ref ? React.createRef() : ref;
+    var overlayRef = useSharedRef(ref);
     React.useEffect(function () {
         if (!!focusOnInitialRender && overlayRef.current) {
             setTimeout(function () {
@@ -8009,11 +8036,6 @@ var LoaderOverlay = React__default.forwardRef(function (_a, ref) {
         }
         return;
     }, [overlayRef.current]);
-    React.useEffect(function () {
-        if (typeof ref === 'function') {
-            ref(overlayRef.current);
-        }
-    }, [ref]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames('Loader__overlay', className, variant === 'large'
             ? 'Loader__overlay--large'
             : variant === 'small'
@@ -8103,13 +8125,26 @@ TableHead.propTypes = {
 };
 
 var TableHeader = function (_a) {
-    var children = _a.children, sortDirection = _a.sortDirection, onSort = _a.onSort, className = _a.className, other = tslib.__rest(_a, ["children", "sortDirection", "onSort", "className"]);
+    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"]);
+    // 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]);
     return (React__default.createElement("th", tslib.__assign({ "aria-sort": sortDirection, className: classNames('TableHeader', className, {
             'TableHeader--sort-ascending': sortDirection === 'ascending',
             'TableHeader--sort-descending': sortDirection === 'descending'
         }) }, other), !!onSort && !!sortDirection ? (React__default.createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
         children,
-        React__default.createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default.createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default.createElement(Icon, { type: "triangle-up" })) : (React__default.createElement(Icon, { type: "triangle-down" }))))) : (children)));
+        React__default.createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default.createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default.createElement(Icon, { type: "triangle-up" })) : (React__default.createElement(Icon, { type: "triangle-down" }))),
+        React__default.createElement(Offscreen, null,
+            React__default.createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
 };
 TableHeader.displayName = 'TableHeader';
 TableHeader.propTypes = {
@@ -8523,11 +8558,23 @@ var BreadcrumbLink = React.forwardRef(function (_a, ref) {
     return (React__default.createElement(ElementType, tslib.__assign({ className: classNames('Link', 'Breadcrumb__Link', className), ref: ref }, props), children));
 });
 
+var ColumnLeft = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Left', className) }, props, { ref: ref }), children));
+});
+ColumnLeft.displayName = 'ColumnLeft';
+
+var ColumnRight = React.forwardRef(function (_a, ref) {
+    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
+    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Right', className) }, props, { ref: ref }), children));
+});
+ColumnRight.displayName = 'ColumnRight';
+
 var TwoColumnPanel = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, _c = _a.showCollapsedPanelLabel, showCollapsedPanelLabel = _c === void 0 ? 'Show Panel' : _c, _d = _a.hideCollapsedPanelLabel, hideCollapsedPanelLabel = _d === void 0 ? 'Hide Panel' : _d, props = tslib.__rest(_a, ["className", "children", "initialCollapsed", "showCollapsedPanelLabel", "hideCollapsedPanelLabel"]);
-    var _e = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _e[0], setCollapsed = _e[1];
-    var _f = tslib.__read(React.useState(false), 2), isFocusTrap = _f[0], setIsFocusTrap = _f[1];
-    var _g = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _g[0], setShowPanel = _g[1];
+    var className = _a.className, children = _a.children, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? false : _b, _c = _a.showCollapsedPanelLabel, showCollapsedPanelLabel = _c === void 0 ? 'Show Panel' : _c, _d = _a.hideCollapsedPanelLabel, hideCollapsedPanelLabel = _d === void 0 ? 'Hide Panel' : _d, _e = _a.skipLink, skipLink = _e === void 0 ? null : _e, props = tslib.__rest(_a, ["className", "children", "initialCollapsed", "showCollapsedPanelLabel", "hideCollapsedPanelLabel", "skipLink"]);
+    var _f = tslib.__read(React.useState(initialCollapsed), 2), isCollapsed = _f[0], setCollapsed = _f[1];
+    var _g = tslib.__read(React.useState(false), 2), isFocusTrap = _g[0], setIsFocusTrap = _g[1];
+    var _h = tslib.__read(React.useState(!initialCollapsed), 2), showPanel = _h[0], setShowPanel = _h[1];
     var togglePanel = function () {
         if (isCollapsed) {
             setShowPanel(true);
@@ -8654,6 +8701,7 @@ var TwoColumnPanel = React.forwardRef(function (_a, ref) {
                 fallbackFocus: columnLeftRef.current
             }, containerElements: [columnLeftRef.current] }),
         React__default.createElement(ClickOutsideListener, { onClickOutside: handleClickOutside, target: columnLeftRef.current }),
+        isCollapsed ? null : skipLink,
         showPanel ? ColumnLeftComponent : null,
         ColumnRightComponent));
 });
@@ -8671,18 +8719,6 @@ var ColumnGroupHeader = React.forwardRef(function (_a, ref) {
 });
 ColumnGroupHeader.displayName = 'ColumnGroupHeader';
 
-var ColumnLeft = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
-    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Left', className) }, props, { ref: ref }), children));
-});
-ColumnLeft.displayName = 'ColumnLeft';
-
-var ColumnRight = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
-    return (React__default.createElement("section", tslib.__assign({ className: classNames('TwoColumnPanel__Right', className) }, props, { ref: ref }), children));
-});
-ColumnRight.displayName = 'ColumnRight';
-
 var ColumnList = React.forwardRef(function (_a, ref) {
     var className = _a.className, children = _a.children, props = tslib.__rest(_a, ["className", "children"]);
     return (React__default.createElement("div", tslib.__assign({ className: classNames('TwoColumnPanel__List', className) }, props, { ref: ref }), children));

package/lib/minus.js

@@ -0,0 +1,25 @@
+'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 SvgMinus = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  overflow: "visible",
+  preserveAspectRatio: "none",
+  viewBox: "0 0 24 24",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M19 13H5v-2h14v2z",
+  vectorEffect: "non-scaling-stroke",
+  fill: "currentColor"
+})));
+
+exports.default = SvgMinus;

package/lib/utils/useSharedRef.d.ts

@@ -0,0 +1,16 @@
+import { MutableRefObject, Ref } from 'react';
+/**
+ * When a component needs to track an internal ref on a component that has a
+ * forwarded ref, useSharedRef will return a MutableRefObject<T> that will
+ * correctly invoke the parent ref as well providing an internal ref.
+ *
+ * @example
+ * React.forwardRef(function Component({ children }, ref) {
+ *   const internalRef = useSharedRef<HTMLElement>(ref)
+ *   if (internalRef.current) {
+ *     // do something with the internal ref...
+ *   }
+ *   return (<div ref={internalRef}>...</div>)
+ * })
+ */
+export default function useSharedRef<T>(ref: Ref<T>): MutableRefObject<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.2.1",
+  "version": "4.3.0-canary.7b91d476",
   "description": "Fully accessible react components library for Deque Cauldron",
   "publishConfig": {
     "access": "public"
@@ -124,4 +124,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}