@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 +4 -0
- package/lib/components/ClickOutsideListener/index.d.ts +1 -0
- package/lib/components/Icon/types.d.ts +1 -1
- package/lib/components/Link/index.d.ts +3 -1
- package/lib/components/LoaderOverlay/index.d.ts +1 -1
- package/lib/components/Pagination/usePagination.d.ts +1 -0
- package/lib/components/SideBar/SideBar.d.ts +1 -1
- package/lib/components/Table/Table.d.ts +5 -1
- package/lib/components/Table/TableFooter.d.ts +11 -0
- package/lib/components/Table/index.d.ts +1 -0
- package/lib/components/Toast/index.d.ts +3 -0
- package/lib/index.d.ts +1 -1
- package/lib/index.js +49 -20
- package/lib/link.js +25 -0
- package/lib/person-running.js +22 -0
- package/lib/table-sort-ascending.js +22 -0
- package/lib/table-sort-descending.js +22 -0
- package/package.json +4 -3
package/lib/cauldron.css
CHANGED
|
@@ -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
|
|
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 }:
|
|
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;
|
|
@@ -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("
|
|
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("
|
|
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
|
-
(
|
|
1564
|
-
|
|
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
|
|
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: "
|
|
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.
|
|
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 =
|
|
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:
|
|
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": "
|
|
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.
|
|
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
|
|
89
|
+
"url": "git+https://github.com/dequelabs/cauldron.git"
|
|
89
90
|
},
|
|
90
91
|
"peerDependencies": {
|
|
91
92
|
"react": ">=16.6 <= 18",
|