@deque/cauldron-react 4.7.0-canary.aa673cb5 → 4.7.0-canary.aee7d227

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' | '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;
@@ -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';
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',
@@ -237,6 +239,7 @@ function __variableDynamicImportRuntime0__(path) {
237
239
  case './icons/info-circle.svg': return Promise.resolve().then(function () { return require('./info-circle.js'); });
238
240
  case './icons/info-square.svg': return Promise.resolve().then(function () { return require('./info-square.js'); });
239
241
  case './icons/kabob.svg': return Promise.resolve().then(function () { return require('./kabob.js'); });
242
+ case './icons/link.svg': return Promise.resolve().then(function () { return require('./link.js'); });
240
243
  case './icons/list.svg': return Promise.resolve().then(function () { return require('./list.js'); });
241
244
  case './icons/lock.svg': return Promise.resolve().then(function () { return require('./lock.js'); });
242
245
  case './icons/magnifying-glass.svg': return Promise.resolve().then(function () { return require('./magnifying-glass.js'); });
@@ -246,6 +249,7 @@ function __variableDynamicImportRuntime0__(path) {
246
249
  case './icons/new.svg': return Promise.resolve().then(function () { return require('./new.js'); });
247
250
  case './icons/no.svg': return Promise.resolve().then(function () { return require('./no.js'); });
248
251
  case './icons/pencil.svg': return Promise.resolve().then(function () { return require('./pencil.js'); });
252
+ case './icons/person-running.svg': return Promise.resolve().then(function () { return require('./person-running.js'); });
249
253
  case './icons/play.svg': return Promise.resolve().then(function () { return require('./play.js'); });
250
254
  case './icons/plus.svg': return Promise.resolve().then(function () { return require('./plus.js'); });
251
255
  case './icons/question-circle-alt.svg': return Promise.resolve().then(function () { return require('./question-circle-alt.js'); });
@@ -305,7 +309,7 @@ var Icon = React.forwardRef(function (_a, ref) {
305
309
  var data = tslib.__assign(tslib.__assign({}, other), { 'aria-hidden': !label, className: classNames('Icon', "Icon--".concat(type), className, (_b = {},
306
310
  _b["Icon__".concat(direction)] = !!direction,
307
311
  _b)) });
308
- return (React__default.createElement("div", tslib.__assign({ ref: ref }, data),
312
+ return (React__default.createElement("span", tslib.__assign({ ref: ref }, data),
309
313
  label && React__default.createElement(Offscreen, null, label),
310
314
  IconSVG && React__default.createElement(IconSVG, null)));
311
315
  });
@@ -326,7 +330,7 @@ var PanelTrigger = function (_a) {
326
330
  React__default.createElement("button", tslib.__assign({ className: classNames(className, 'ExpandCollapse__trigger', {
327
331
  fullWidth: fullWidth
328
332
  }), type: "button", "aria-expanded": open, onClick: onClick }, otherProps),
329
- React__default.createElement("div", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
333
+ React__default.createElement("span", { className: "ExpandCollapse__trigger-title" }, typeof children === 'function'
330
334
  ? children({ open: !!open })
331
335
  : children),
332
336
  React__default.createElement(Icon, { type: open ? iconExpanded : iconCollapsed }))));
@@ -899,6 +903,7 @@ var ClickOutsideListener = /** @class */ (function (_super) {
899
903
  ref: resolveRef
900
904
  });
901
905
  };
906
+ ClickOutsideListener.displayName = 'ClickOutsideListener';
902
907
  ClickOutsideListener.defaultProps = {
903
908
  mouseEvent: 'click',
904
909
  touchEvent: 'touchend'
@@ -1560,8 +1565,10 @@ var Dialog = /** @class */ (function (_super) {
1560
1565
  };
1561
1566
  Dialog.prototype.close = function () {
1562
1567
  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);
1568
+ if (this.props.show) {
1569
+ (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.deactivate();
1570
+ (_c = (_b = this.props).onClose) === null || _c === void 0 ? void 0 : _c.call(_b);
1571
+ }
1565
1572
  };
1566
1573
  Dialog.prototype.handleClickOutside = function () {
1567
1574
  var _a = this.props, show = _a.show, forceAction = _a.forceAction;
@@ -1720,7 +1727,7 @@ var fireCustomEvent = function (show, button) {
1720
1727
  if (!button) {
1721
1728
  return;
1722
1729
  }
1723
- var event = new Event(show ? 'cauldron:tooltip:show' : 'cauldron:tooltip:hide', {
1730
+ var event = new CustomEvent(show ? 'cauldron:tooltip:show' : 'cauldron:tooltip:hide', {
1724
1731
  bubbles: true
1725
1732
  });
1726
1733
  button.dispatchEvent(event);
@@ -2436,17 +2443,19 @@ var Toast = /** @class */ (function (_super) {
2436
2443
  }(React__default.Component));
2437
2444
 
2438
2445
  var Link = function (_a) {
2439
- var children = _a.children, linkRef = _a.linkRef, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "linkRef", "className", "variant"]);
2446
+ 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"]);
2440
2447
  return (React__default.createElement("a", tslib.__assign({ ref: linkRef, className: classNames(className, {
2441
2448
  Link: !variant,
2442
2449
  'Button--primary': variant === 'button',
2443
- 'Button--secondary': variant === 'button-secondary'
2450
+ 'Button--secondary': variant === 'button-secondary',
2451
+ 'Button--thin': thin
2444
2452
  }) }, other), children));
2445
2453
  };
2446
2454
  Link.propTypes = {
2447
2455
  children: PropTypes.node,
2448
2456
  className: PropTypes.string,
2449
2457
  variant: PropTypes.string,
2458
+ thin: PropTypes.bool,
2450
2459
  linkRef: PropTypes.oneOfType([
2451
2460
  PropTypes.func,
2452
2461
  PropTypes.shape({ current: PropTypes.any })
@@ -8255,13 +8264,14 @@ Tag.propTypes = {
8255
8264
  };
8256
8265
 
8257
8266
  var Table = function (_a) {
8258
- var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
8259
- return (React__default.createElement("table", tslib.__assign({ className: classNames('Table', className) }, other), children));
8267
+ var children = _a.children, className = _a.className, variant = _a.variant, other = tslib.__rest(_a, ["children", "className", "variant"]);
8268
+ return (React__default.createElement("table", tslib.__assign({ className: classNames('Table', variant === 'border' && 'Table--border', className) }, other), children));
8260
8269
  };
8261
8270
  Table.displayName = 'Table';
8262
8271
  Table.propTypes = {
8263
8272
  children: PropTypes.node.isRequired,
8264
- className: PropTypes.string
8273
+ className: PropTypes.string,
8274
+ variant: PropTypes.string
8265
8275
  };
8266
8276
 
8267
8277
  var TableBody = function (_a) {
@@ -8333,6 +8343,16 @@ TableRow.propTypes = {
8333
8343
  className: PropTypes.string
8334
8344
  };
8335
8345
 
8346
+ var TableFooter = function (_a) {
8347
+ var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
8348
+ return (React__default.createElement("tfoot", tslib.__assign({ className: classNames('TableFooter', className) }, other), children));
8349
+ };
8350
+ TableFooter.displayName = 'TableFooter';
8351
+ TableFooter.propTypes = {
8352
+ children: PropTypes.node.isRequired,
8353
+ className: PropTypes.string
8354
+ };
8355
+
8336
8356
  var Tab = React__default.forwardRef(function (_a, ref) {
8337
8357
  var children = _a.children, propId = _a.id, target = _a.target, other = tslib.__rest(_a, ["children", "id", "target"]);
8338
8358
  return (React__default.createElement("li", tslib.__assign({ id: propId, ref: ref, role: "tab" }, other), children));
@@ -9072,6 +9092,7 @@ exports.TabPanel = TabPanel;
9072
9092
  exports.Table = Table;
9073
9093
  exports.TableBody = TableBody;
9074
9094
  exports.TableCell = TableCell;
9095
+ exports.TableFooter = TableFooter;
9075
9096
  exports.TableHead = TableHead;
9076
9097
  exports.TableHeader = TableHeader;
9077
9098
  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;
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@deque/cauldron-react",
3
- "version": "4.7.0-canary.aa673cb5",
3
+ "version": "4.7.0-canary.aee7d227",
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
  },
@@ -85,7 +86,7 @@
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",