@deque/cauldron-react 4.7.0 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/cauldron.css CHANGED
@@ -39,6 +39,10 @@ a.Button--secondary {
39
39
  padding: 9px 18px;
40
40
  }
41
41
 
42
+ a.Button--thin {
43
+ padding: 0 16px;
44
+ }
45
+
42
46
  .Icon {
43
47
  display: inline-block;
44
48
  vertical-align: middle;
@@ -8,6 +8,7 @@ export interface ClickOutsideListenerProps<T extends HTMLElement = HTMLElement>
8
8
  target?: T;
9
9
  }
10
10
  export default class ClickOutsideListener extends React.Component<ClickOutsideListenerProps> {
11
+ static displayName: string;
11
12
  static defaultProps: {
12
13
  mouseEvent: string;
13
14
  touchEvent: string;
@@ -2,6 +2,6 @@
2
2
  * GENERATED CODE. DO NOT EDIT DIRECTLY!
3
3
  */
4
4
  /** IconType represents each valid icon type. */
5
- 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';
5
+ 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' | 'sort-triangle' | 'sort' | 'star' | 'sun' | 'table-sort-ascending' | 'table-sort-descending' | 'tag' | 'target' | 'trash' | 'triangle-up' | 'triangle-down' | 'triangle-left' | 'triangle-right' | 'upload';
6
6
  /** iconTypes holds each valid icon type. */
7
7
  export declare const iconTypes: string[];
@@ -3,13 +3,15 @@ import PropTypes from 'prop-types';
3
3
  export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
4
4
  linkRef?: React.Ref<HTMLAnchorElement>;
5
5
  variant?: 'button' | 'button-secondary';
6
+ thin?: boolean;
6
7
  }
7
8
  declare const Link: {
8
- ({ children, linkRef, className, variant, ...other }: LinkProps): JSX.Element;
9
+ ({ children, linkRef, className, variant, thin, ...other }: LinkProps): JSX.Element;
9
10
  propTypes: {
10
11
  children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
11
12
  className: PropTypes.Requireable<string>;
12
13
  variant: PropTypes.Requireable<string>;
14
+ thin: PropTypes.Requireable<boolean>;
13
15
  linkRef: PropTypes.Requireable<((...args: any[]) => any) | PropTypes.InferProps<{
14
16
  current: PropTypes.Requireable<any>;
15
17
  }>>;
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
2
+ export interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
3
3
  variant?: 'large' | 'small';
4
4
  label?: string;
5
5
  focusOnInitialRender?: boolean;
@@ -16,6 +16,7 @@ interface PageStatus {
16
16
  currentPage: number;
17
17
  pageStart: number;
18
18
  pageEnd: number;
19
+ setCurrentPage: (page: number) => void;
19
20
  }
20
21
  export declare const usePagination: ({ totalItems, initialPageSize, initialPage }: Options) => {
21
22
  pagination: PaginationResults;
@@ -5,7 +5,7 @@ export interface SideBarProps extends React.HTMLAttributes<HTMLUListElement> {
5
5
  onDismiss: () => void;
6
6
  className?: string;
7
7
  show: boolean;
8
- navProps: React.HTMLAttributes<HTMLElement>;
8
+ navProps?: React.HTMLAttributes<HTMLElement>;
9
9
  }
10
10
  interface SideBarState {
11
11
  wide: boolean;
@@ -1,11 +1,15 @@
1
1
  import { TableHTMLAttributes } from 'react';
2
2
  import PropTypes from 'prop-types';
3
+ interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
4
+ variant?: 'border';
5
+ }
3
6
  declare const Table: {
4
- ({ children, className, ...other }: TableHTMLAttributes<HTMLTableElement>): JSX.Element;
7
+ ({ children, className, variant, ...other }: TableProps): JSX.Element;
5
8
  displayName: string;
6
9
  propTypes: {
7
10
  children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
8
11
  className: PropTypes.Requireable<string>;
12
+ variant: PropTypes.Requireable<string>;
9
13
  };
10
14
  };
11
15
  export default Table;
@@ -0,0 +1,11 @@
1
+ import { HTMLAttributes } from 'react';
2
+ import PropTypes from 'prop-types';
3
+ declare const TableFooter: {
4
+ ({ children, className, ...other }: HTMLAttributes<HTMLTableSectionElement>): JSX.Element;
5
+ displayName: string;
6
+ propTypes: {
7
+ children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
8
+ className: PropTypes.Requireable<string>;
9
+ };
10
+ };
11
+ export default TableFooter;
@@ -4,3 +4,4 @@ export { default as TableCell } from './TableCell';
4
4
  export { default as TableHead } from './TableHead';
5
5
  export { default as TableHeader } from './TableHeader';
6
6
  export { default as TableRow } from './TableRow';
7
+ export { default as TableFooter } from './TableFooter';
@@ -8,6 +8,7 @@ export interface ToastProps {
8
8
  toastRef: React.Ref<HTMLDivElement>;
9
9
  focus?: boolean;
10
10
  show?: boolean;
11
+ dismissible?: boolean;
11
12
  children: React.ReactNode;
12
13
  }
13
14
  interface ToastState {
@@ -24,6 +25,7 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
24
25
  toastRef: () => void;
25
26
  focus: boolean;
26
27
  show: boolean;
28
+ dismissible: boolean;
27
29
  };
28
30
  static propTypes: {
29
31
  children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
@@ -35,6 +37,7 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
35
37
  }>>;
36
38
  focus: PropTypes.Requireable<boolean>;
37
39
  show: PropTypes.Requireable<boolean>;
40
+ dismissible: PropTypes.Requireable<boolean>;
38
41
  };
39
42
  static displayName: string;
40
43
  private el;
package/lib/index.d.ts CHANGED
@@ -39,7 +39,7 @@ export { default as Code } from './components/Code';
39
39
  export { default as LoaderOverlay } from './components/LoaderOverlay';
40
40
  export { default as Line } from './components/Line';
41
41
  export { default as Tag, TagLabel } from './components/Tag';
42
- export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './components/Table';
42
+ export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter } from './components/Table';
43
43
  export { default as Tabs, Tab, TabPanel } from './components/Tabs';
44
44
  export { DescriptionList, DescriptionListItem, DescriptionTerm, DescriptionDetails } from './components/DescriptionList';
45
45
  export { default as Stepper, Step } from './components/Stepper';
package/lib/index.js CHANGED
@@ -164,6 +164,7 @@ var iconTypes = [
164
164
  'info-circle',
165
165
  'info-square',
166
166
  'kabob',
167
+ 'link',
167
168
  'list',
168
169
  'lock',
169
170
  'magnifying-glass',
@@ -173,6 +174,7 @@ var iconTypes = [
173
174
  'new',
174
175
  'no',
175
176
  'pencil',
177
+ 'person-running',
176
178
  'play',
177
179
  'plus',
178
180
  'question-circle-alt',
@@ -190,6 +192,8 @@ var iconTypes = [
190
192
  'sort',
191
193
  'star',
192
194
  'sun',
195
+ 'table-sort-ascending',
196
+ 'table-sort-descending',
193
197
  'tag',
194
198
  'target',
195
199
  'trash',
@@ -237,6 +241,7 @@ function __variableDynamicImportRuntime0__(path) {
237
241
  case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle.js'); });
238
242
  case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square.js'); });
239
243
  case './icons/kabob.svg': return Promise.resolve().then(function () { return require('./kabob.js'); });
244
+ case './icons/link.svg': return Promise.resolve().then(function () { return require('./link.js'); });
240
245
  case './icons/list.svg': return Promise.resolve().then(function () { return require('./list.js'); });
241
246
  case './icons/lock.svg': return Promise.resolve().then(function () { return require('./lock.js'); });
242
247
  case './icons/magnifying-glass.svg': return Promise.resolve().then(function () { return require('./magnifying-glass.js'); });
@@ -246,6 +251,7 @@ function __variableDynamicImportRuntime0__(path) {
246
251
  case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
247
252
  case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
248
253
  case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
254
+ case './icons/person-running.svg': return Promise.resolve().then(function () { return require('./person-running.js'); });
249
255
  case './icons/play.svg': return Promise.resolve().then(function () { return require('./play.js'); });
250
256
  case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus.js'); });
251
257
  case './icons/question-circle-alt.svg': return Promise.resolve().then(function () { return require('./question-circle-alt.js'); });
@@ -263,6 +269,8 @@ function __variableDynamicImportRuntime0__(path) {
263
269
  case './icons/sort.svg': return Promise.resolve().then(function () { return require('./sort.js'); });
264
270
  case './icons/star.svg': return Promise.resolve().then(function () { return require('./star.js'); });
265
271
  case './icons/sun.svg': return Promise.resolve().then(function () { return require('./sun.js'); });
272
+ case './icons/table-sort-ascending.svg': return Promise.resolve().then(function () { return require('./table-sort-ascending.js'); });
273
+ case './icons/table-sort-descending.svg': return Promise.resolve().then(function () { return require('./table-sort-descending.js'); });
266
274
  case './icons/tag.svg': return Promise.resolve().then(function () { return require('./tag.js'); });
267
275
  case './icons/target.svg': return Promise.resolve().then(function () { return require('./target.js'); });
268
276
  case './icons/trash.svg': return Promise.resolve().then(function () { return require('./trash.js'); });
@@ -305,7 +313,7 @@ var Icon = React.forwardRef(function (_a, ref) {
305
313
  var data = tslib.__assign(tslib.__assign({}, other), { 'aria-hidden': !label, className: classNames('Icon', "Icon--".concat(type), className, (_b = {},
306
314
  _b["Icon__".concat(direction)] = !!direction,
307
315
  _b)) });
308
- return (React__default.createElement("div", tslib.__assign({ ref: ref }, data),
316
+ return (React__default.createElement("span", tslib.__assign({ ref: ref }, data),
309
317
  label && React__default.createElement(Offscreen, null, label),
310
318
  IconSVG && React__default.createElement(IconSVG, null)));
311
319
  });
@@ -326,7 +334,7 @@ var PanelTrigger = function (_a) {
326
334
  React__default.createElement("button", tslib.__assign({ className: classNames(className, 'ExpandCollapse__trigger', {
327
335
  fullWidth: fullWidth
328
336
  }), type: "button", "aria-expanded": open, onClick: onClick }, otherProps),
329
- React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
337
+ React__default.createElement("span", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
330
338
  ? children({ open: !!open })
331
339
  : children),
332
340
  React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed }))));
@@ -899,6 +907,7 @@ var ClickOutsideListener = /** @class */ (function (_super) {
899
907
  ref: resolveRef
900
908
  });
901
909
  };
910
+ ClickOutsideListener.displayName = 'ClickOutsideListener';
902
911
  ClickOutsideListener.defaultProps = {
903
912
  mouseEvent: 'click',
904
913
  touchEvent: 'touchend'
@@ -1560,8 +1569,10 @@ var Dialog = /** @class */ (function (_super) {
1560
1569
  };
1561
1570
  Dialog.prototype.close = function () {
1562
1571
  var _a, _b, _c;
1563
- (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.deactivate();
1564
- (_c = (_b = this.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
1572
+ if (this.props.show) {
1573
+ (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.deactivate();
1574
+ (_c = (_b = this.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
1575
+ }
1565
1576
  };
1566
1577
  Dialog.prototype.handleClickOutside = function () {
1567
1578
  var _a = this.props, show = _a.show, forceAction = _a.forceAction;
@@ -1720,7 +1731,7 @@ var fireCustomEvent = function (show, button) {
1720
1731
  if (!button) {
1721
1732
  return;
1722
1733
  }
1723
- var event = new Event(show ? 'cauldron:tooltip:show' : 'cauldron:tooltip:hide', {
1734
+ var event = new CustomEvent(show ? 'cauldron:tooltip:show' : 'cauldron:tooltip:hide', {
1724
1735
  bubbles: true
1725
1736
  });
1726
1737
  button.dispatchEvent(event);
@@ -2339,7 +2350,7 @@ var Toast = /** @class */ (function (_super) {
2339
2350
  var _a = this.props, type = _a.type, children = _a.children,
2340
2351
  // prevent `onDismiss` from being passed-through to DOM
2341
2352
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
2342
- 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"]);
2353
+ 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"]);
2343
2354
  var scrim = type === 'action-needed' && show ? (React__default.createElement("div", { className: "Scrim--light Scrim--show Scrim--fade-in" })) : null;
2344
2355
  var defaultProps = {
2345
2356
  tabIndex: -1,
@@ -2356,7 +2367,7 @@ var Toast = /** @class */ (function (_super) {
2356
2367
  React__default.createElement("div", { className: "Toast__message" },
2357
2368
  React__default.createElement(Icon, { type: typeMap[type].icon }),
2358
2369
  React__default.createElement("div", { className: "Toast__message-content" }, children)),
2359
- type !== 'action-needed' && (React__default.createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
2370
+ type !== 'action-needed' && dismissible && (React__default.createElement("button", { type: "button", className: 'Toast__dismiss', "aria-label": dismissText, onClick: this.dismissToast },
2360
2371
  React__default.createElement(Icon, { type: "close" })))),
2361
2372
  scrim));
2362
2373
  };
@@ -2407,7 +2418,8 @@ var Toast = /** @class */ (function (_super) {
2407
2418
  // eslint-disable-next-line @typescript-eslint/no-empty-function
2408
2419
  toastRef: function () { },
2409
2420
  focus: true,
2410
- show: false
2421
+ show: false,
2422
+ dismissible: true
2411
2423
  };
2412
2424
  Toast.propTypes = {
2413
2425
  // the ui to be added as the message of the toast
@@ -2426,24 +2438,28 @@ var Toast = /** @class */ (function (_super) {
2426
2438
  // whether or not to focus the toast
2427
2439
  focus: PropTypes.bool,
2428
2440
  // whether or not to show the toast
2429
- show: PropTypes.bool
2441
+ show: PropTypes.bool,
2442
+ // whether or not the toast is dismissible
2443
+ dismissible: PropTypes.bool
2430
2444
  };
2431
2445
  Toast.displayName = 'Toast';
2432
2446
  return Toast;
2433
2447
  }(React__default.Component));
2434
2448
 
2435
2449
  var Link = function (_a) {
2436
- var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant"]);
2450
+ 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"]);
2437
2451
  return (React__default.createElement("a", tslib.__assign({ ref: linkRef, className: classNames(className, {
2438
2452
  Link: !variant,
2439
2453
  'Button--primary': variant === 'button',
2440
- 'Button--secondary': variant === 'button-secondary'
2454
+ 'Button--secondary': variant === 'button-secondary',
2455
+ 'Button--thin': thin
2441
2456
  }) }, other), children));
2442
2457
  };
2443
2458
  Link.propTypes = {
2444
2459
  children: PropTypes.node,
2445
2460
  className: PropTypes.string,
2446
2461
  variant: PropTypes.string,
2462
+ thin: PropTypes.bool,
2447
2463
  linkRef: PropTypes.oneOfType([
2448
2464
  PropTypes.func,
2449
2465
  PropTypes.shape({ current: PropTypes.any })
@@ -8252,13 +8268,14 @@ Tag.propTypes = {
8252
8268
  };
8253
8269
 
8254
8270
  var Table = function (_a) {
8255
- var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
8256
- return (React__default.createElement("table", tslib.__assign({ className: classNames('Table', className) }, other), children));
8271
+ var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
8272
+ return (React__default.createElement("table", tslib.__assign({ className: classNames('Table', variant === 'border' && 'Table--border', className) }, other), children));
8257
8273
  };
8258
8274
  Table.displayName = 'Table';
8259
8275
  Table.propTypes = {
8260
8276
  children: PropTypes.node.isRequired,
8261
- className: PropTypes.string
8277
+ className: PropTypes.string,
8278
+ variant: PropTypes.string
8262
8279
  };
8263
8280
 
8264
8281
  var TableBody = function (_a) {
@@ -8306,7 +8323,7 @@ var TableHeader = function (_a) {
8306
8323
  'TableHeader--sort-descending': sortDirection === 'descending'
8307
8324
  }) }, other), !!onSort && !!sortDirection ? (React__default.createElement("button", { onClick: onSort, className: "TableHeader__sort-button", type: "button" },
8308
8325
  children,
8309
- 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" }))),
8326
+ 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" }))),
8310
8327
  React__default.createElement(Offscreen, null,
8311
8328
  React__default.createElement("span", { role: "status", "aria-live": "polite" }, announcement)))) : (children)));
8312
8329
  };
@@ -8330,6 +8347,16 @@ TableRow.propTypes = {
8330
8347
  className: PropTypes.string
8331
8348
  };
8332
8349
 
8350
+ var TableFooter = function (_a) {
8351
+ var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
8352
+ return (React__default.createElement("tfoot", tslib.__assign({ className: classNames('TableFooter', className) }, other), children));
8353
+ };
8354
+ TableFooter.displayName = 'TableFooter';
8355
+ TableFooter.propTypes = {
8356
+ children: PropTypes.node.isRequired,
8357
+ className: PropTypes.string
8358
+ };
8359
+
8333
8360
  var Tab = React__default.forwardRef(function (_a, ref) {
8334
8361
  var children = _a.children, propId = _a.id, target = _a.target, other = tslib.__rest(_a, ["children", "id", "target"]);
8335
8362
  return (React__default.createElement("li", tslib.__assign({ id: propId, ref: ref, role: "tab" }, other), children));
@@ -8365,7 +8392,6 @@ var Tabs = function (_a) {
8365
8392
  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"]);
8366
8393
  var _d = tslib.__read(React.useState(initialActiveIndex), 2), activeIndex = _d[0], setActiveIndex = _d[1];
8367
8394
  var tabsRef = React.useRef(null);
8368
- var focusedTabRef = React.useRef(null);
8369
8395
  var tabs = React__default.Children.toArray(children).filter(function (child) { return child.type === Tab; });
8370
8396
  var tabCount = tabs.length;
8371
8397
  var handleClick = function (index) {
@@ -8438,14 +8464,15 @@ var Tabs = function (_a) {
8438
8464
  }, [activeIndex]);
8439
8465
  var config = tslib.__assign((_a = { id: id, className: classNames('Tab', {
8440
8466
  'Tab--active': selected
8441
- }), 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);
8467
+ }), 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);
8442
8468
  return React__default.cloneElement(child, config);
8443
8469
  });
8444
8470
  useDidUpdate(function () {
8445
8471
  var _a;
8446
- (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.focus();
8472
+ var activeTab = (_a = tabsRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(':scope > [role="tablist"] > [aria-selected="true"]');
8473
+ activeTab === null || activeTab === void 0 ? void 0 : activeTab.focus();
8447
8474
  if (typeof onChange === 'function') {
8448
- onChange({ activeTabIndex: activeIndex, target: focusedTabRef.current });
8475
+ onChange({ activeTabIndex: activeIndex, target: activeTab });
8449
8476
  }
8450
8477
  }, [activeIndex]);
8451
8478
  return (React__default.createElement("div", { className: classNames('Tabs', className, {
@@ -8717,7 +8744,8 @@ var usePagination = function (_a) {
8717
8744
  var pageStatus = {
8718
8745
  currentPage: currentPage,
8719
8746
  pageStart: pageStart,
8720
- pageEnd: pageEnd
8747
+ pageEnd: pageEnd,
8748
+ setCurrentPage: setCurrentPage
8721
8749
  };
8722
8750
  return { pagination: pagination, pageStatus: pageStatus };
8723
8751
  };
@@ -9068,6 +9096,7 @@ exports.TabPanel = TabPanel;
9068
9096
  exports.Table = Table;
9069
9097
  exports.TableBody = TableBody;
9070
9098
  exports.TableCell = TableCell;
9099
+ exports.TableFooter = TableFooter;
9071
9100
  exports.TableHead = TableHead;
9072
9101
  exports.TableHeader = TableHeader;
9073
9102
  exports.TableRow = TableRow;
package/lib/link.js ADDED
@@ -0,0 +1,25 @@
1
+ 'use strict';
2
+
3
+ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
+
5
+ var React = require('react');
6
+ var React__default = _interopDefault(React);
7
+
8
+ var _path;
9
+
10
+ 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); }
11
+
12
+ const SvgLink = props => /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ overflow: "visible",
15
+ preserveAspectRatio: "none",
16
+ viewBox: "0 0 24 24",
17
+ height: 24,
18
+ width: 24
19
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
20
+ 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",
21
+ fill: "currentColor",
22
+ vectorEffect: "non-scaling-stroke"
23
+ })));
24
+
25
+ exports.default = SvgLink;
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
+
5
+ var React = require('react');
6
+ var React__default = _interopDefault(React);
7
+
8
+ var _path;
9
+
10
+ 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); }
11
+
12
+ const SvgPersonRunning = props => /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ viewBox: "0 0 448 512",
15
+ height: 24,
16
+ width: 24
17
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
18
+ fill: "currentColor",
19
+ 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"
20
+ })));
21
+
22
+ exports.default = SvgPersonRunning;
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
+
5
+ var React = require('react');
6
+ var React__default = _interopDefault(React);
7
+
8
+ var _path;
9
+
10
+ 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); }
11
+
12
+ const SvgTableSortAscending = props => /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ viewBox: "0 0 320 512",
15
+ height: 24,
16
+ width: 24
17
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
18
+ fill: "currentColor",
19
+ 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"
20
+ })));
21
+
22
+ exports.default = SvgTableSortAscending;
@@ -0,0 +1,22 @@
1
+ 'use strict';
2
+
3
+ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
4
+
5
+ var React = require('react');
6
+ var React__default = _interopDefault(React);
7
+
8
+ var _path;
9
+
10
+ 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); }
11
+
12
+ const SvgTableSortDescending = props => /*#__PURE__*/React.createElement("svg", _extends({
13
+ xmlns: "http://www.w3.org/2000/svg",
14
+ viewBox: "0 0 320 512",
15
+ height: 24,
16
+ width: 24
17
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
18
+ fill: "currentColor",
19
+ 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"
20
+ })));
21
+
22
+ exports.default = SvgTableSortDescending;
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "4.7.0",
3
+ "version": "5.0.0",
4
4
  "description": "Fully accessible react components library for Deque Cauldron",
5
+ "homepage": "https://cauldron.dequelabs.com/",
5
6
  "publishConfig": {
6
7
  "access": "public"
7
8
  },
@@ -80,12 +81,12 @@
80
81
  "react-router-dom": "^5.1.2",
81
82
  "rollup": "^2.23.0",
82
83
  "sinon": "^10.0.0",
83
- "ts-node": "^10.8.1",
84
+ "ts-node": "^10.9.1",
84
85
  "typescript": "^4.7.3"
85
86
  },
86
87
  "repository": {
87
88
  "type": "git",
88
- "url": "git+https://github.com/dequelabs/cauldron-react.git"
89
+ "url": "git+https://github.com/dequelabs/cauldron.git"
89
90
  },
90
91
  "peerDependencies": {
91
92
  "react": ">=16.6 <= 18",