@deque/cauldron-react 4.7.0 → 5.0.0-canary.1e5b9b01

package/lib/cauldron.css

@@ -39,6 +39,10 @@ a.Button--secondary {
   padding: 9px 18px;
 }
 
+a.Button--thin {
+  padding: 0 16px;
+}
+
 .Icon {
   display: inline-block;
   vertical-align: middle;

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

@@ -8,6 +8,7 @@ export interface ClickOutsideListenerProps<T extends HTMLElement = HTMLElement>
     target?: T;
 }
 export default class ClickOutsideListener extends React.Component<ClickOutsideListenerProps> {
+    static displayName: string;
     static defaultProps: {
         mouseEvent: string;
         touchEvent: string;

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' | 'clipboard' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | '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' | 'play' | 'plus' | 'question-circle-alt' | 'question-circle' | 'radio-checked' | 'radio-unchecked' | 'recycle-square' | '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' | 'clipboard' | 'close' | 'code' | 'copy' | 'download' | 'dropper' | 'exchange' | 'export-solid' | 'external-link' | 'eye' | 'filter-solid' | 'filter' | 'flag' | 'gears' | 'grid' | 'hamburger-menu' | 'highlight' | 'info-circle-alt' | 'info-circle' | 'info-square' | 'kabob' | 'link' | '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' | 'upload';
 /** iconTypes holds each valid icon type. */
 export declare const iconTypes: string[];

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

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     linkRef?: React.Ref<HTMLAnchorElement>;
     variant?: 'button' | 'button-secondary';
+    thin?: boolean;
 }
 declare const Link: {
-    ({ children, linkRef, className, variant, ...other }: LinkProps): JSX.Element;
+    ({ children, linkRef, className, variant, thin, ...other }: LinkProps): JSX.Element;
     propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         variant: PropTypes.Requireable<string>;
+        thin: PropTypes.Requireable<boolean>;
         linkRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
             current: PropTypes.Requireable<any>;
         }>>;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: 'large' | 'small';
     label?: string;
     focusOnInitialRender?: boolean;

package/lib/components/Pagination/usePagination.d.ts

@@ -16,6 +16,7 @@ interface PageStatus {
     currentPage: number;
     pageStart: number;
     pageEnd: number;
+    setCurrentPage: (page: number) => void;
 }
 export declare const usePagination: ({ totalItems, initialPageSize, initialPage }: Options) => {
     pagination: PaginationResults;

package/lib/components/SideBar/SideBar.d.ts

@@ -5,7 +5,7 @@ export interface SideBarProps extends React.HTMLAttributes<HTMLUListElement> {
     onDismiss: () => void;
     className?: string;
     show: boolean;
-    navProps: React.HTMLAttributes<HTMLElement>;
+    navProps?: React.HTMLAttributes<HTMLElement>;
 }
 interface SideBarState {
     wide: boolean;

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

@@ -1,11 +1,15 @@
 import { TableHTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
+interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    variant?: 'border';
+}
 declare const Table: {
-    ({ children, className, ...other }: TableHTMLAttributes<HTMLTableElement>): JSX.Element;
+    ({ children, className, variant, ...other }: TableProps): JSX.Element;
     displayName: string;
     propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
+        variant: PropTypes.Requireable<string>;
     };
 };
 export default Table;

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from 'react';
+import PropTypes from 'prop-types';
+declare const TableFooter: {
+    ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
+    displayName: string;
+    propTypes: {
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        className: PropTypes.Requireable<string>;
+    };
+};
+export default TableFooter;

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

@@ -4,3 +4,4 @@ export { default as TableCell } from './TableCell';
 export { default as TableHead } from './TableHead';
 export { default as TableHeader } from './TableHeader';
 export { default as TableRow } from './TableRow';
+export { default as TableFooter } from './TableFooter';

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

@@ -8,6 +8,7 @@ export interface ToastProps {
     toastRef: React.Ref<HTMLDivElement>;
     focus?: boolean;
     show?: boolean;
+    dismissible?: boolean;
     children: React.ReactNode;
 }
 interface ToastState {
@@ -24,6 +25,7 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
         toastRef: () => void;
         focus: boolean;
         show: boolean;
+        dismissible: boolean;
     };
     static propTypes: {
         children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
@@ -35,6 +37,7 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
         }>>;
         focus: PropTypes.Requireable<boolean>;
         show: PropTypes.Requireable<boolean>;
+        dismissible: PropTypes.Requireable<boolean>;
     };
     static displayName: string;
     private el;

package/lib/index.d.ts

@@ -39,7 +39,7 @@ export { default as Code } from './components/Code';
 export { default as LoaderOverlay } from './components/LoaderOverlay';
 export { default as Line } from './components/Line';
 export { default as Tag, TagLabel } from './components/Tag';
-export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/Table';
+export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter } from './components/Table';
 export { default as Tabs, Tab, TabPanel } from './components/Tabs';
 export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
 export { default as Stepper, Step } from './components/Stepper';

package/lib/index.js

@@ -110,7 +110,7 @@ var Workspace = /** @class */ (function (_super) {
     return Workspace;
 }(React__default.Component));
 
-var Offscreen = function (props) { return (React__default.createElement("div", tslib.__assign({ className: "Offscreen" }, props))); };
+var Offscreen = function (props) { return (React__default.createElement("span", tslib.__assign({ className: "Offscreen" }, props))); };
 
 /*!
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
@@ -164,6 +164,7 @@ var iconTypes = [
     'info-circle',
     'info-square',
     'kabob',
+    'link',
     'list',
     'lock',
     'magnifying-glass',
@@ -173,6 +174,7 @@ var iconTypes = [
     'new',
     'no',
     'pencil',
+    'person-running',
     'play',
     'plus',
     'question-circle-alt',
@@ -185,11 +187,14 @@ var iconTypes = [
     'robot',
     'run-again',
     'save',
+    'share-nodes',
     'share',
     'sort-triangle',
     'sort',
     'star',
     'sun',
+    'table-sort-ascending',
+    'table-sort-descending',
     'tag',
     'target',
     'trash',
@@ -237,6 +242,7 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle.js'); });
     case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square.js'); });
     case './icons/kabob.svg': return Promise.resolve().then(function () { return require('./kabob.js'); });
+    case './icons/link.svg': return Promise.resolve().then(function () { return require('./link.js'); });
     case './icons/list.svg': return Promise.resolve().then(function () { return require('./list.js'); });
     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'); });
@@ -246,6 +252,7 @@ function __variableDynamicImportRuntime0__(path) {
     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'); });
     case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
+    case './icons/person-running.svg': return Promise.resolve().then(function () { return require('./person-running.js'); });
     case './icons/play.svg': return Promise.resolve().then(function () { return require('./play.js'); });
     case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus.js'); });
     case './icons/question-circle-alt.svg': return Promise.resolve().then(function () { return require('./question-circle-alt.js'); });
@@ -258,11 +265,14 @@ function __variableDynamicImportRuntime0__(path) {
     case './icons/robot.svg': return Promise.resolve().then(function () { return require('./robot.js'); });
     case './icons/run-again.svg': return Promise.resolve().then(function () { return require('./run-again.js'); });
     case './icons/save.svg': return Promise.resolve().then(function () { return require('./save.js'); });
+    case './icons/share-nodes.svg': return Promise.resolve().then(function () { return require('./share-nodes.js'); });
     case './icons/share.svg': return Promise.resolve().then(function () { return require('./share.js'); });
     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/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'); });
     case './icons/tag.svg': return Promise.resolve().then(function () { return require('./tag.js'); });
     case './icons/target.svg': return Promise.resolve().then(function () { return require('./target.js'); });
     case './icons/trash.svg': return Promise.resolve().then(function () { return require('./trash.js'); });
@@ -305,7 +315,7 @@ var Icon = React.forwardRef(function (_a, ref) {
     var data = tslib.__assign(tslib.__assign({}, other), { 'aria-hidden': !label, className: classNames('Icon', "Icon--".concat(type), className, (_b = {},
             _b["Icon__".concat(direction)] = !!direction,
             _b)) });
-    return (React__default.createElement("div", tslib.__assign({ ref: ref }, data),
+    return (React__default.createElement("span", tslib.__assign({ ref: ref }, data),
         label && React__default.createElement(Offscreen, null, label),
         IconSVG && React__default.createElement(IconSVG, null)));
 });
@@ -326,7 +336,7 @@ var PanelTrigger = function (_a) {
         React__default.createElement("button", tslib.__assign({ className: classNames(className, 'ExpandCollapse__trigger', {
                 fullWidth: fullWidth
             }), type: "button", "aria-expanded": open, onClick: onClick }, otherProps),
-            React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
+            React__default.createElement("span", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
                 ? children({ open: !!open })
                 : children),
             React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed }))));
@@ -899,6 +909,7 @@ var ClickOutsideListener = /** @class */ (function (_super) {
                 ref: resolveRef
             });
     };
+    ClickOutsideListener.displayName = 'ClickOutsideListener';
     ClickOutsideListener.defaultProps = {
         mouseEvent: 'click',
         touchEvent: 'touchend'
@@ -1560,8 +1571,10 @@ var Dialog = /** @class */ (function (_super) {
     };
     Dialog.prototype.close = function () {
         var _a, _b, _c;
-        (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.deactivate();
-        (_c = (_b = this.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        if (this.props.show) {
+            (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.deactivate();
+            (_c = (_b = this.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
+        }
     };
     Dialog.prototype.handleClickOutside = function () {
         var _a = this.props, show = _a.show, forceAction = _a.forceAction;
@@ -1720,7 +1733,7 @@ var fireCustomEvent = function (show, button) {
     if (!button) {
         return;
     }
-    var event = new Event(show ? 'cauldron:tooltip:show' : 'cauldron:tooltip:hide', {
+    var event = new CustomEvent(show ? 'cauldron:tooltip:show' : 'cauldron:tooltip:hide', {
         bubbles: true
     });
     button.dispatchEvent(event);
@@ -2339,7 +2352,7 @@ var Toast = /** @class */ (function (_super) {
         var _a = this.props, type = _a.type, children = _a.children, 
         // prevent `onDismiss` from being passed-through to DOM
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onDismiss = _a.onDismiss, dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show"]);
+        onDismiss = _a.onDismiss, dismissText = _a.dismissText, toastRef = _a.toastRef, focus = _a.focus, show = _a.show, dismissible = _a.dismissible, otherProps = tslib.__rest(_a, ["type", "children", "onDismiss", "dismissText", "toastRef", "focus", "show", "dismissible"]);
         var scrim = type === 'action-needed' && show ? (React__default.createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
         var defaultProps = {
             tabIndex: -1,
@@ -2356,7 +2369,7 @@ var Toast = /** @class */ (function (_super) {
                 React__default.createElement("div", { className: "Toast__message" },
                     React__default.createElement(Icon, { type: typeMap[type].icon }),
                     React__default.createElement("div", { className: "Toast__message-content" }, children)),
-                type !== 'action-needed' && (React__default.createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
+                type !== 'action-needed' && dismissible && (React__default.createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
                     React__default.createElement(Icon, { type: "close" })))),
             scrim));
     };
@@ -2407,7 +2420,8 @@ var Toast = /** @class */ (function (_super) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         toastRef: function () { },
         focus: true,
-        show: false
+        show: false,
+        dismissible: true
     };
     Toast.propTypes = {
         // the ui to be added as the message of the toast
@@ -2426,24 +2440,28 @@ var Toast = /** @class */ (function (_super) {
         // whether or not to focus the toast
         focus: PropTypes.bool,
         // whether or not to show the toast
-        show: PropTypes.bool
+        show: PropTypes.bool,
+        // whether or not the toast is dismissible
+        dismissible: PropTypes.bool
     };
     Toast.displayName = 'Toast';
     return Toast;
 }(React__default.Component));
 
 var Link = function (_a) {
-    var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant"]);
+    var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, thin = _a.thin, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant", "thin"]);
     return (React__default.createElement("a", tslib.__assign({ ref: linkRef, className: classNames(className, {
             Link: !variant,
             'Button--primary': variant === 'button',
-            'Button--secondary': variant === 'button-secondary'
+            'Button--secondary': variant === 'button-secondary',
+            'Button--thin': thin
         }) }, other), children));
 };
 Link.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
     variant: PropTypes.string,
+    thin: PropTypes.bool,
     linkRef: PropTypes.oneOfType([
         PropTypes.func,
         PropTypes.shape({ current: PropTypes.any })
@@ -8252,13 +8270,14 @@ Tag.propTypes = {
 };
 
 var Table = function (_a) {
-    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
-    return (React__default.createElement("table", tslib.__assign({ className: classNames('Table', className) }, other), children));
+    var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
+    return (React__default.createElement("table", tslib.__assign({ className: classNames('Table', variant === 'border' && 'Table--border', className) }, other), children));
 };
 Table.displayName = 'Table';
 Table.propTypes = {
     children: PropTypes.node.isRequired,
-    className: PropTypes.string
+    className: PropTypes.string,
+    variant: PropTypes.string
 };
 
 var TableBody = function (_a) {
@@ -8306,7 +8325,7 @@ var TableHeader = function (_a) {
             '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" }))),
+        React__default.createElement("span", { "aria-hidden": "true" }, sortDirection === 'none' ? (React__default.createElement(Icon, { type: "sort-triangle" })) : sortDirection === 'ascending' ? (React__default.createElement(Icon, { type: "table-sort-ascending" })) : (React__default.createElement(Icon, { type: "table-sort-descending" }))),
         React__default.createElement(Offscreen, null,
             React__default.createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
 };
@@ -8330,6 +8349,16 @@ TableRow.propTypes = {
     className: PropTypes.string
 };
 
+var TableFooter = function (_a) {
+    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
+    return (React__default.createElement("tfoot", tslib.__assign({ className: classNames('TableFooter', className) }, other), children));
+};
+TableFooter.displayName = 'TableFooter';
+TableFooter.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string
+};
+
 var Tab = React__default.forwardRef(function (_a, ref) {
     var children = _a.children, propId = _a.id, target = _a.target, other = tslib.__rest(_a, ["children", "id", "target"]);
     return (React__default.createElement("li", tslib.__assign({ id: propId, ref: ref, role: "tab" }, other), children));
@@ -8365,7 +8394,6 @@ var Tabs = function (_a) {
     var children = _a.children, thin = _a.thin, _b = _a.orientation, orientation = _b === void 0 ? 'horizontal' : _b, _c = _a.initialActiveIndex, initialActiveIndex = _c === void 0 ? 0 : _c, className = _a.className, onChange = _a.onChange, labelProp = tslib.__rest(_a, ["children", "thin", "orientation", "initialActiveIndex", "className", "onChange"]);
     var _d = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
     var tabsRef = React.useRef(null);
-    var focusedTabRef = React.useRef(null);
     var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
     var tabCount = tabs.length;
     var handleClick = function (index) {
@@ -8438,14 +8466,15 @@ var Tabs = function (_a) {
         }, [activeIndex]);
         var config = tslib.__assign((_a = { id: id, className: classNames('Tab', {
                     'Tab--active': selected
-                }), tabIndex: index === activeIndex ? 0 : -1 }, _a['aria-controls'] = (_b = target.current) === null || _b === void 0 ? void 0 : _b.id, _a['aria-selected'] = selected, _a.ref = index === activeIndex ? focusedTabRef : null, _a.onClick = function () { return handleClick(index); }, _a), other);
+                }), tabIndex: index === activeIndex ? 0 : -1 }, _a['aria-controls'] = (_b = target.current) === null || _b === void 0 ? void 0 : _b.id, _a['aria-selected'] = selected, _a.onClick = function () { return handleClick(index); }, _a), other);
         return React__default.cloneElement(child, config);
     });
     useDidUpdate(function () {
         var _a;
-        (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        var activeTab = (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(':scope > [role="tablist"] > [aria-selected="true"]');
+        activeTab === null || activeTab === void 0 ? void 0 : activeTab.focus();
         if (typeof onChange === 'function') {
-            onChange({ activeTabIndex: activeIndex, target: focusedTabRef.current });
+            onChange({ activeTabIndex: activeIndex, target: activeTab });
         }
     }, [activeIndex]);
     return (React__default.createElement("div", { className: classNames('Tabs', className, {
@@ -8717,7 +8746,8 @@ var usePagination = function (_a) {
     var pageStatus = {
         currentPage: currentPage,
         pageStart: pageStart,
-        pageEnd: pageEnd
+        pageEnd: pageEnd,
+        setCurrentPage: setCurrentPage
     };
     return { pagination: pagination, pageStatus: pageStatus };
 };
@@ -9068,6 +9098,7 @@ exports.TabPanel = TabPanel;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
+exports.TableFooter = TableFooter;
 exports.TableHead = TableHead;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;

package/lib/link.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 SvgLink = 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: "M18.5 16.01c0 .26-.11.51-.29.7l-1.53 1.52c-.19.18-.45.28-.71.27-.26 0-.52-.1-.71-.28l-2.14-2.16a.99.99 0 0 1-.29-.71c0-.29.12-.57.34-.76l.19.2.22.22.2.16c.08.06.17.11.27.14.1.01.19.01.29 0 .55 0 1-.45 1-1 .01-.1.01-.19 0-.29a.867.867 0 0 0-.14-.27l-.2-.16-.22-.22-.2-.19c.19-.21.46-.33.75-.33.27 0 .52.1.71.29l2.17 2.17c.19.19.29.44.29.71v-.01zm-7.32-7.34c0 .29-.12.57-.34.76l-.19-.2-.23-.22-.2-.16a.744.744 0 0 0-.22-.14c-.1-.01-.19-.01-.29 0-.55 0-1 .45-1 1-.01.09-.01.19 0 .29.03.1.08.19.14.27l.15.16.22.22.2.19c-.19.21-.47.32-.75.32a.98.98 0 0 1-.67-.27L5.79 8.72c-.19-.19-.29-.45-.29-.71 0-.26.11-.51.29-.7l1.54-1.52c.18-.18.42-.28.67-.28.27 0 .52.1.71.29l2.14 2.16c.19.19.29.44.29.71h.04zm9.32 7.34c.01-.8-.3-1.56-.87-2.12l-2.17-2.17c-1.16-1.18-3.06-1.21-4.24-.05l-.05.05-.92-.92c.6-.57.93-1.36.92-2.18.02-.79-.29-1.56-.86-2.11L10.16 4.4C9.6 3.81 8.81 3.48 8 3.51c-.79-.02-1.56.29-2.11.86L4.39 5.9c-.58.54-.9 1.31-.89 2.11-.01.8.3 1.56.87 2.12l2.17 2.17c.56.57 1.32.88 2.12.87.82.01 1.61-.32 2.17-.92l.92.92c-.6.57-.93 1.36-.92 2.18-.02.79.29 1.56.86 2.11l2.14 2.16a3 3 0 0 0 4.24 0l1.53-1.52c.58-.54.9-1.3.9-2.09z",
+  fill: "currentColor",
+  vectorEffect: "non-scaling-stroke"
+})));
+
+exports.default = SvgLink;

package/lib/person-running.js

@@ -0,0 +1,22 @@
+'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 SvgPersonRunning = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 448 512",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M288 96c26.5 0 48-21.5 48-48S314.5 0 288 0s-48 21.5-48 48 21.5 48 48 48zm-144 0h-13.3l-9.4 9.4-48 48L50.7 176 96 221.3l22.6-22.6 38.7-38.7H185l-31.3 94c-9.3 28 1.7 58.8 26.8 74.5l86.2 53.9-9.4 32.8-16 56-11.7 40.8h66.6l6.6-23.2 16-56 16-56 6.6-23.2-20.4-12.7-67-41.9 29-77.4 24.3 48.6 8.8 17.7H416V224h-60.2l-39.2-78.3-5.4-10.9-11.3-4.5-80-32-5.7-2.3H144zm-18.5 214.7L107.2 352H16v64h132.8l8.4-19 15.8-35.4-9.5-6a95.394 95.394 0 0 1-37.9-44.9z"
+})));
+
+exports.default = SvgPersonRunning;

package/lib/share-nodes.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 SvgShareNodes = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 448 512",
+  overflow: "visible",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  d: "M352 224c53 0 96-43 96-96s-43-96-96-96-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9 0 53 43 96 96 96s96-43 96-96-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9.7-7.8.7-11.9s-.2-8-.7-11.9l94.1-47c17.2 16.7 40.7 26.9 66.6 26.9z",
+  vectorEffect: "non-scaling-stroke",
+  fill: "currentColor"
+})));
+
+exports.default = SvgShareNodes;

package/lib/table-sort-ascending.js

@@ -0,0 +1,22 @@
+'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 SvgTableSortAscending = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 320 512",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M182.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-128 128c-9.2 9.2-11.9 22.9-6.9 34.9S19 224.1 32 224.1h256c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-128-128z"
+})));
+
+exports.default = SvgTableSortAscending;

package/lib/table-sort-descending.js

@@ -0,0 +1,22 @@
+'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 SvgTableSortDescending = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 320 512",
+  height: 24,
+  width: 24
+}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+  fill: "currentColor",
+  d: "M182.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-9.2-9.2-11.9-22.9-6.9-34.9S19 287.9 32 287.9h256c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-128 128z"
+})));
+
+exports.default = SvgTableSortDescending;

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "4.7.0",
+  "version": "5.0.0-canary.1e5b9b01",
   "description": "Fully accessible react components library for Deque Cauldron",
+  "homepage": "https://cauldron.dequelabs.com/",
   "publishConfig": {
     "access": "public"
   },
@@ -80,12 +81,12 @@
     "react-router-dom": "^5.1.2",
     "rollup": "^2.23.0",
     "sinon": "^10.0.0",
-    "ts-node": "^10.8.1",
+    "ts-node": "^10.9.1",
     "typescript": "^4.7.3"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/dequelabs/cauldron-react.git"
+    "url": "git+https://github.com/dequelabs/cauldron.git"
   },
   "peerDependencies": {
     "react": ">=16.6 <= 18",
@@ -125,4 +126,4 @@
       "\\.svg$": "<rootDir>/__tests__/svgMock.js"
     }
   }
-}
+}