@deque/cauldron-react 6.4.2 → 6.5.0-canary.36dc15fa
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 +1 -2
- package/lib/components/Badge/index.d.ts +11 -0
- package/lib/components/Button/index.d.ts +1 -1
- package/lib/components/Dialog/index.d.ts +3 -0
- package/lib/components/IconButton/index.d.ts +1 -1
- package/lib/components/ImpactBadge/index.d.ts +10 -0
- package/lib/components/Notice/index.d.ts +1 -0
- package/lib/components/Pagination/Pagination.d.ts +1 -0
- package/lib/components/Tooltip/index.d.ts +2 -1
- package/lib/index.d.ts +2 -0
- package/lib/index.js +101 -23
- package/package.json +1 -1
package/lib/cauldron.css
CHANGED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
size?: 'default' | 'small';
|
|
5
|
+
}
|
|
6
|
+
interface BadgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
}
|
|
9
|
+
export declare const BadgeLabel: React.ForwardRefExoticComponent<BadgeLabelProps & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
|
+
export default Badge;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React, { ButtonHTMLAttributes, Ref } from 'react';
|
|
2
2
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
3
3
|
buttonRef?: Ref<HTMLButtonElement>;
|
|
4
|
-
variant?: 'primary' | 'secondary' | 'error' | 'link' | 'tag';
|
|
4
|
+
variant?: 'primary' | 'secondary' | 'tertiary' | 'error' | 'link' | 'tag';
|
|
5
5
|
thin?: boolean;
|
|
6
6
|
}
|
|
7
7
|
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -35,6 +35,9 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
|
|
|
35
35
|
close(): void;
|
|
36
36
|
handleClickOutside(): void;
|
|
37
37
|
focusHeading(): void;
|
|
38
|
+
private handleEscape;
|
|
39
|
+
private attachEventListeners;
|
|
40
|
+
private removeEventListeners;
|
|
38
41
|
}
|
|
39
42
|
interface DialogAlignmentProps {
|
|
40
43
|
align?: 'left' | 'center' | 'right';
|
|
@@ -19,7 +19,7 @@ export interface IconButtonProps extends PolymorphicProps<React.HTMLAttributes<H
|
|
|
19
19
|
* @deprecated use `tooltipProps.portal` instead
|
|
20
20
|
*/
|
|
21
21
|
tooltipPortal?: TooltipProps['portal'];
|
|
22
|
-
variant?: 'primary' | 'secondary' | 'error';
|
|
22
|
+
variant?: 'primary' | 'secondary' | 'tertiary' | 'error';
|
|
23
23
|
large?: boolean;
|
|
24
24
|
}
|
|
25
25
|
declare const IconButton: PolymorphicComponent<IconButtonProps>;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Badge from '../Badge';
|
|
3
|
+
import { ContentNode } from '../../types';
|
|
4
|
+
type ImpactType = 'critical' | 'serious' | 'moderate' | 'minor';
|
|
5
|
+
interface ImpactBadgeProps extends Omit<React.ComponentProps<typeof Badge>, 'children'> {
|
|
6
|
+
type: ImpactType;
|
|
7
|
+
label?: ContentNode;
|
|
8
|
+
}
|
|
9
|
+
declare const ImpactBadge: React.ForwardRefExoticComponent<Omit<ImpactBadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
+
export default ImpactBadge;
|
|
@@ -10,6 +10,7 @@ export interface NoticeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
10
10
|
type?: keyof typeof iconTypeMap;
|
|
11
11
|
title: ContentNode;
|
|
12
12
|
icon?: IconType;
|
|
13
|
+
variant?: 'default' | 'condensed';
|
|
13
14
|
children?: ReactNode;
|
|
14
15
|
}
|
|
15
16
|
declare const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -7,11 +7,12 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
7
7
|
variant?: 'text' | 'info' | 'big';
|
|
8
8
|
association?: 'aria-labelledby' | 'aria-describedby' | 'none';
|
|
9
9
|
show?: boolean | undefined;
|
|
10
|
+
defaultShow?: boolean;
|
|
10
11
|
placement?: Placement;
|
|
11
12
|
portal?: React.RefObject<HTMLElement> | HTMLElement;
|
|
12
13
|
hideElementOnHidden?: boolean;
|
|
13
14
|
}
|
|
14
|
-
declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show:
|
|
15
|
+
declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: showProp, defaultShow, hideElementOnHidden, className, ...props }: TooltipProps): JSX.Element;
|
|
15
16
|
declare namespace Tooltip {
|
|
16
17
|
var displayName: string;
|
|
17
18
|
}
|
package/lib/index.d.ts
CHANGED
|
@@ -38,6 +38,8 @@ export { default as Code } from './components/Code';
|
|
|
38
38
|
export { default as LoaderOverlay } from './components/LoaderOverlay';
|
|
39
39
|
export { default as Line } from './components/Line';
|
|
40
40
|
export { default as Tag, TagLabel } from './components/Tag';
|
|
41
|
+
export { default as Badge, BadgeLabel } from './components/Badge';
|
|
42
|
+
export { default as ImpactBadge } from './components/ImpactBadge';
|
|
41
43
|
export { default as TagButton } from './components/TagButton';
|
|
42
44
|
export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter } from './components/Table';
|
|
43
45
|
export { default as Tabs, Tab, TabPanel } from './components/Tabs';
|
package/lib/index.js
CHANGED
|
@@ -1386,6 +1386,9 @@ var AriaIsolate = /** @class */ (function () {
|
|
|
1386
1386
|
return AriaIsolate;
|
|
1387
1387
|
}());
|
|
1388
1388
|
|
|
1389
|
+
var isEscape = function (event) {
|
|
1390
|
+
return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
|
|
1391
|
+
};
|
|
1389
1392
|
var noop = function () {
|
|
1390
1393
|
//not empty
|
|
1391
1394
|
};
|
|
@@ -1397,24 +1400,29 @@ var Dialog = /** @class */ (function (_super) {
|
|
|
1397
1400
|
_this.close = _this.close.bind(_this);
|
|
1398
1401
|
_this.focusHeading = _this.focusHeading.bind(_this);
|
|
1399
1402
|
_this.handleClickOutside = _this.handleClickOutside.bind(_this);
|
|
1403
|
+
_this.handleEscape = _this.handleEscape.bind(_this);
|
|
1400
1404
|
_this.state = {};
|
|
1401
1405
|
return _this;
|
|
1402
1406
|
}
|
|
1403
1407
|
Dialog.prototype.componentDidMount = function () {
|
|
1404
1408
|
var _this = this;
|
|
1405
1409
|
if (this.props.show) {
|
|
1410
|
+
this.attachEventListeners();
|
|
1406
1411
|
this.attachIsolator(function () { return setTimeout(_this.focusHeading); });
|
|
1407
1412
|
}
|
|
1408
1413
|
};
|
|
1409
1414
|
Dialog.prototype.componentWillUnmount = function () {
|
|
1410
1415
|
var isolator = this.state.isolator;
|
|
1411
1416
|
isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
|
|
1417
|
+
this.removeEventListeners();
|
|
1412
1418
|
};
|
|
1413
1419
|
Dialog.prototype.componentDidUpdate = function (prevProps) {
|
|
1414
1420
|
if (!prevProps.show && this.props.show) {
|
|
1415
1421
|
this.attachIsolator(this.focusHeading);
|
|
1422
|
+
this.attachEventListeners();
|
|
1416
1423
|
}
|
|
1417
1424
|
else if (prevProps.show && !this.props.show) {
|
|
1425
|
+
this.removeEventListeners();
|
|
1418
1426
|
this.close();
|
|
1419
1427
|
}
|
|
1420
1428
|
};
|
|
@@ -1438,8 +1446,7 @@ var Dialog = /** @class */ (function (_super) {
|
|
|
1438
1446
|
: 2);
|
|
1439
1447
|
var Dialog = (React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
|
|
1440
1448
|
allowOutsideClick: true,
|
|
1441
|
-
|
|
1442
|
-
escapeDeactivates: !forceAction,
|
|
1449
|
+
escapeDeactivates: false,
|
|
1443
1450
|
fallbackFocus: '.Dialog__heading'
|
|
1444
1451
|
} },
|
|
1445
1452
|
React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
|
|
@@ -1481,6 +1488,24 @@ var Dialog = /** @class */ (function (_super) {
|
|
|
1481
1488
|
}
|
|
1482
1489
|
(_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.activate();
|
|
1483
1490
|
};
|
|
1491
|
+
Dialog.prototype.handleEscape = function (keyboardEvent) {
|
|
1492
|
+
if (!keyboardEvent.defaultPrevented && isEscape(keyboardEvent)) {
|
|
1493
|
+
this.close();
|
|
1494
|
+
}
|
|
1495
|
+
};
|
|
1496
|
+
Dialog.prototype.attachEventListeners = function () {
|
|
1497
|
+
var forceAction = this.props.forceAction;
|
|
1498
|
+
if (!forceAction) {
|
|
1499
|
+
var portal = this.props.portal || document.body;
|
|
1500
|
+
var targetElement = portal instanceof HTMLElement ? portal : portal.current;
|
|
1501
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('keyup', this.handleEscape);
|
|
1502
|
+
}
|
|
1503
|
+
};
|
|
1504
|
+
Dialog.prototype.removeEventListeners = function () {
|
|
1505
|
+
var portal = this.props.portal || document.body;
|
|
1506
|
+
var targetElement = portal instanceof HTMLElement ? portal : portal.current;
|
|
1507
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('keyup', this.handleEscape);
|
|
1508
|
+
};
|
|
1484
1509
|
Dialog.defaultProps = {
|
|
1485
1510
|
onClose: noop,
|
|
1486
1511
|
forceAction: false,
|
|
@@ -1594,6 +1619,7 @@ var Button = React.forwardRef(function (_a, ref) {
|
|
|
1594
1619
|
'Button--primary': variant === 'primary',
|
|
1595
1620
|
'Button--secondary': variant === 'secondary',
|
|
1596
1621
|
'Button--error': variant === 'error',
|
|
1622
|
+
'Button--tertiary': variant === 'tertiary',
|
|
1597
1623
|
Link: variant === 'link',
|
|
1598
1624
|
Tag: variant === 'tag',
|
|
1599
1625
|
'Button--tag': variant === 'tag',
|
|
@@ -1653,10 +1679,10 @@ var fireCustomEvent = function (show, button) {
|
|
|
1653
1679
|
};
|
|
1654
1680
|
function Tooltip(_a) {
|
|
1655
1681
|
var _this = this;
|
|
1656
|
-
var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d,
|
|
1682
|
+
var propId = _a.id, _b = _a.placement, initialPlacement = _b === void 0 ? 'auto' : _b, children = _a.children, portal = _a.portal, target = _a.target, _c = _a.association, association = _c === void 0 ? 'aria-describedby' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, showProp = _a.show, _e = _a.defaultShow, defaultShow = _e === void 0 ? false : _e, _f = _a.hideElementOnHidden, hideElementOnHidden = _f === void 0 ? false : _f, className = _a.className, props = tslib.__rest(_a, ["id", "placement", "children", "portal", "target", "association", "variant", "show", "defaultShow", "hideElementOnHidden", "className"]);
|
|
1657
1683
|
var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
|
|
1658
1684
|
var hideTimeoutRef = React.useRef(null);
|
|
1659
|
-
var _h = tslib.__read(React.useState(!!
|
|
1685
|
+
var _h = tslib.__read(React.useState(!!showProp || defaultShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
|
|
1660
1686
|
var _j = tslib.__read(React.useState(null), 2), targetElement = _j[0], setTargetElement = _j[1];
|
|
1661
1687
|
var _k = tslib.__read(React.useState(null), 2), tooltipElement = _k[0], setTooltipElement = _k[1];
|
|
1662
1688
|
var _l = tslib.__read(React.useState(null), 2), arrowElement = _l[0], setArrowElement = _l[1];
|
|
@@ -1708,12 +1734,20 @@ function Tooltip(_a) {
|
|
|
1708
1734
|
fireCustomEvent(false, targetElement);
|
|
1709
1735
|
}, TIP_HIDE_DELAY);
|
|
1710
1736
|
}
|
|
1737
|
+
return function () {
|
|
1738
|
+
clearTimeout(hideTimeoutRef.current);
|
|
1739
|
+
};
|
|
1711
1740
|
}, [targetElement]);
|
|
1712
1741
|
// Keep targetElement in sync with target prop
|
|
1713
1742
|
React.useEffect(function () {
|
|
1714
1743
|
var targetElement = target && 'current' in target ? target.current : target;
|
|
1715
1744
|
setTargetElement(targetElement);
|
|
1716
1745
|
}, [target]);
|
|
1746
|
+
React.useEffect(function () {
|
|
1747
|
+
if (typeof showProp === 'boolean') {
|
|
1748
|
+
setShowTooltip(showProp);
|
|
1749
|
+
}
|
|
1750
|
+
}, [showProp]);
|
|
1717
1751
|
// Get popper placement
|
|
1718
1752
|
var placement = (attributes.popper &&
|
|
1719
1753
|
attributes.popper['data-popper-placement']) ||
|
|
@@ -1724,11 +1758,12 @@ function Tooltip(_a) {
|
|
|
1724
1758
|
if (event.key === 'Escape' ||
|
|
1725
1759
|
event.key === 'Esc' ||
|
|
1726
1760
|
event.keyCode === 27) {
|
|
1761
|
+
event.preventDefault();
|
|
1727
1762
|
setShowTooltip(false);
|
|
1728
1763
|
}
|
|
1729
1764
|
};
|
|
1730
1765
|
var targetElement = document.body;
|
|
1731
|
-
if (showTooltip) {
|
|
1766
|
+
if (showTooltip && typeof showProp !== 'boolean') {
|
|
1732
1767
|
targetElement.addEventListener('keyup', handleEscape, { capture: true });
|
|
1733
1768
|
}
|
|
1734
1769
|
else {
|
|
@@ -1741,29 +1776,33 @@ function Tooltip(_a) {
|
|
|
1741
1776
|
capture: true
|
|
1742
1777
|
});
|
|
1743
1778
|
};
|
|
1744
|
-
}, [showTooltip]);
|
|
1779
|
+
}, [showTooltip, showProp]);
|
|
1745
1780
|
// Handle hover and focus events for the targetElement
|
|
1746
1781
|
React.useEffect(function () {
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1782
|
+
if (typeof showProp !== 'boolean') {
|
|
1783
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
|
|
1784
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
|
|
1785
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
|
|
1786
|
+
targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
|
|
1787
|
+
}
|
|
1751
1788
|
return function () {
|
|
1752
1789
|
targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseenter', show);
|
|
1753
1790
|
targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseleave', hide);
|
|
1754
1791
|
targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusin', show);
|
|
1755
1792
|
targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusout', hide);
|
|
1756
1793
|
};
|
|
1757
|
-
}, [targetElement, show, hide]);
|
|
1794
|
+
}, [targetElement, show, hide, showProp]);
|
|
1758
1795
|
// Handle hover events for the tooltipElement
|
|
1759
1796
|
React.useEffect(function () {
|
|
1760
|
-
|
|
1761
|
-
|
|
1797
|
+
if (typeof showProp !== 'boolean') {
|
|
1798
|
+
tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', show);
|
|
1799
|
+
tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', hide);
|
|
1800
|
+
}
|
|
1762
1801
|
return function () {
|
|
1763
1802
|
tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', show);
|
|
1764
1803
|
tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', hide);
|
|
1765
1804
|
};
|
|
1766
|
-
}, [tooltipElement, show, hide]);
|
|
1805
|
+
}, [tooltipElement, show, hide, showProp]);
|
|
1767
1806
|
// Keep the target's id in sync
|
|
1768
1807
|
React.useEffect(function () {
|
|
1769
1808
|
if (hasAriaAssociation) {
|
|
@@ -1839,6 +1878,7 @@ var IconButton = React.forwardRef(function (_a, ref) {
|
|
|
1839
1878
|
IconButton: true,
|
|
1840
1879
|
'IconButton--primary': variant === 'primary',
|
|
1841
1880
|
'IconButton--secondary': variant === 'secondary',
|
|
1881
|
+
'IconButton--tertiary': variant === 'tertiary',
|
|
1842
1882
|
'IconButton--error': variant === 'error',
|
|
1843
1883
|
'IconButton--large': large
|
|
1844
1884
|
}), ref: internalRef, disabled: disabled, tabIndex: disabled ? -1 : tabIndex }, accessibilityProps, other),
|
|
@@ -2599,6 +2639,41 @@ var Tag = function (_a) {
|
|
|
2599
2639
|
};
|
|
2600
2640
|
Tag.displayName = 'Tag';
|
|
2601
2641
|
|
|
2642
|
+
var BadgeLabel = React.forwardRef(function (_a, ref) {
|
|
2643
|
+
var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
|
|
2644
|
+
return (React__default["default"].createElement("div", tslib.__assign({ ref: ref, className: classNames__default["default"]('Badge__Label', className) }, other), children));
|
|
2645
|
+
});
|
|
2646
|
+
BadgeLabel.displayName = 'BadgeLabel';
|
|
2647
|
+
var Badge = React.forwardRef(function (_a, ref) {
|
|
2648
|
+
var children = _a.children, className = _a.className, _b = _a.size, size = _b === void 0 ? 'default' : _b, other = tslib.__rest(_a, ["children", "className", "size"]);
|
|
2649
|
+
return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Badge', className, {
|
|
2650
|
+
'Badge--small': size === 'small'
|
|
2651
|
+
}), ref: ref }, other), children));
|
|
2652
|
+
});
|
|
2653
|
+
Badge.displayName = 'Badge';
|
|
2654
|
+
|
|
2655
|
+
var iconByType = {
|
|
2656
|
+
critical: 'chevron-double-up',
|
|
2657
|
+
serious: 'chevron-up',
|
|
2658
|
+
moderate: 'chevron-down',
|
|
2659
|
+
minor: 'chevron-double-down'
|
|
2660
|
+
};
|
|
2661
|
+
var typeValues = {
|
|
2662
|
+
critical: 'Critical',
|
|
2663
|
+
serious: 'Serious',
|
|
2664
|
+
moderate: 'Moderate',
|
|
2665
|
+
minor: 'Minor'
|
|
2666
|
+
};
|
|
2667
|
+
var ImpactBadge = React.forwardRef(function (_a, ref) {
|
|
2668
|
+
var type = _a.type, label = _a.label, className = _a.className, other = tslib.__rest(_a, ["type", "label", "className"]);
|
|
2669
|
+
return (React__default["default"].createElement(Badge, tslib.__assign({ className: classNames__default["default"]("ImpactBadge", "ImpactBadge--".concat(type), className), ref: ref }, other),
|
|
2670
|
+
React__default["default"].createElement(Icon, { type: iconByType[type] }),
|
|
2671
|
+
label || (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
2672
|
+
React__default["default"].createElement(BadgeLabel, null, "Impact:"),
|
|
2673
|
+
typeValues[type]))));
|
|
2674
|
+
});
|
|
2675
|
+
ImpactBadge.displayName = 'ImpactBadge';
|
|
2676
|
+
|
|
2602
2677
|
var TagButton = React__default["default"].forwardRef(function (_a, ref) {
|
|
2603
2678
|
var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, rest = tslib.__rest(_a, ["label", "value", "icon", "className"]);
|
|
2604
2679
|
return (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", className: classNames__default["default"]('TagButton', className), ref: ref }, rest),
|
|
@@ -2879,7 +2954,7 @@ var AddressCityStateZip = function (_a) {
|
|
|
2879
2954
|
AddressCityStateZip.displayName = 'AddressCityStateZip';
|
|
2880
2955
|
|
|
2881
2956
|
var Pagination = React__default["default"].forwardRef(function (_a, ref) {
|
|
2882
|
-
var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, statusLabel = _a.statusLabel,
|
|
2957
|
+
var totalItems = _a.totalItems, _b = _a.itemsPerPage, itemsPerPage = _b === void 0 ? 10 : _b, _c = _a.currentPage, currentPage = _c === void 0 ? 1 : _c, _d = _a.hideStartEndPagination, hideStartEndPagination = _d === void 0 ? false : _d, statusLabel = _a.statusLabel, _e = _a.firstPageLabel, firstPageLabel = _e === void 0 ? 'First page' : _e, _f = _a.previousPageLabel, previousPageLabel = _f === void 0 ? 'Previous page' : _f, _g = _a.nextPageLabel, nextPageLabel = _g === void 0 ? 'Next page' : _g, _h = _a.lastPageLabel, lastPageLabel = _h === void 0 ? 'Last page' : _h, _j = _a.tooltipPlacement, tooltipPlacement = _j === void 0 ? 'bottom' : _j, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, _k = _a.thin, thin = _k === void 0 ? false : _k, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "hideStartEndPagination", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className", "thin"]);
|
|
2883
2958
|
var itemStart = currentPage * itemsPerPage - itemsPerPage + 1;
|
|
2884
2959
|
var itemEnd = Math.min(itemStart + itemsPerPage - 1, totalItems);
|
|
2885
2960
|
var isLastPage = itemEnd === totalItems;
|
|
@@ -2888,8 +2963,8 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
2888
2963
|
'Pagination--thin': thin
|
|
2889
2964
|
}) }, other),
|
|
2890
2965
|
React__default["default"].createElement("ul", null,
|
|
2891
|
-
React__default["default"].createElement("li", null,
|
|
2892
|
-
React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipProps: { placement: tooltipPlacement }, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick })),
|
|
2966
|
+
!hideStartEndPagination && (React__default["default"].createElement("li", null,
|
|
2967
|
+
React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipProps: { placement: tooltipPlacement }, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick }))),
|
|
2893
2968
|
React__default["default"].createElement("li", null,
|
|
2894
2969
|
React__default["default"].createElement(IconButton, { icon: "chevron-left", tooltipProps: { placement: tooltipPlacement }, label: previousPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onPreviousPageClick })),
|
|
2895
2970
|
React__default["default"].createElement("li", null,
|
|
@@ -2903,8 +2978,8 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
|
|
|
2903
2978
|
React__default["default"].createElement("strong", null, totalItems))))),
|
|
2904
2979
|
React__default["default"].createElement("li", null,
|
|
2905
2980
|
React__default["default"].createElement(IconButton, { icon: "chevron-right", tooltipProps: { placement: tooltipPlacement }, label: nextPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onNextPageClick })),
|
|
2906
|
-
React__default["default"].createElement("li", null,
|
|
2907
|
-
React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipProps: { placement: tooltipPlacement }, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick })))));
|
|
2981
|
+
!hideStartEndPagination && (React__default["default"].createElement("li", null,
|
|
2982
|
+
React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipProps: { placement: tooltipPlacement }, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick }))))));
|
|
2908
2983
|
});
|
|
2909
2984
|
Pagination.displayName = 'Pagination';
|
|
2910
2985
|
|
|
@@ -3165,13 +3240,13 @@ var iconTypeMap = {
|
|
|
3165
3240
|
};
|
|
3166
3241
|
var Notice = React.forwardRef(function (_a, ref) {
|
|
3167
3242
|
var _b;
|
|
3168
|
-
var _c = _a.type, type = _c === void 0 ? 'info' : _c, title = _a.title, icon = _a.icon, children = _a.children, otherProps = tslib.__rest(_a, ["type", "title", "icon", "children"]);
|
|
3243
|
+
var _c = _a.type, type = _c === void 0 ? 'info' : _c, title = _a.title, icon = _a.icon, _d = _a.variant, variant = _d === void 0 ? 'default' : _d, children = _a.children, otherProps = tslib.__rest(_a, ["type", "title", "icon", "variant", "children"]);
|
|
3169
3244
|
return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Notice', (_b = {},
|
|
3170
3245
|
_b["Notice--".concat(type)] = type,
|
|
3246
|
+
_b["Notice--condensed"] = variant === 'condensed',
|
|
3171
3247
|
_b)), ref: ref }, otherProps),
|
|
3172
|
-
React__default["default"].createElement(
|
|
3173
|
-
|
|
3174
|
-
title),
|
|
3248
|
+
React__default["default"].createElement(Icon, { type: icon || iconTypeMap[type] }),
|
|
3249
|
+
React__default["default"].createElement("div", { className: "Notice__title" }, title),
|
|
3175
3250
|
children && React__default["default"].createElement("div", { className: "Notice__content" }, children)));
|
|
3176
3251
|
});
|
|
3177
3252
|
Notice.displayName = 'Notice';
|
|
@@ -4098,6 +4173,8 @@ exports.Alert = Alert;
|
|
|
4098
4173
|
exports.AlertActions = AlertActions;
|
|
4099
4174
|
exports.AlertContent = AlertContent;
|
|
4100
4175
|
exports.AriaIsolate = AriaIsolate;
|
|
4176
|
+
exports.Badge = Badge;
|
|
4177
|
+
exports.BadgeLabel = BadgeLabel;
|
|
4101
4178
|
exports.Breadcrumb = Breadcrumb;
|
|
4102
4179
|
exports.BreadcrumbItem = BreadcrumbItem;
|
|
4103
4180
|
exports.BreadcrumbLink = BreadcrumbLink;
|
|
@@ -4124,6 +4201,7 @@ exports.ExpandCollapsePanel = ExpandCollapsePanel;
|
|
|
4124
4201
|
exports.FieldWrap = FieldWrap;
|
|
4125
4202
|
exports.Icon = Icon;
|
|
4126
4203
|
exports.IconButton = IconButton;
|
|
4204
|
+
exports.ImpactBadge = ImpactBadge;
|
|
4127
4205
|
exports.Layout = Layout;
|
|
4128
4206
|
exports.Line = Line;
|
|
4129
4207
|
exports.Link = Link;
|
package/package.json
CHANGED