@deque/cauldron-react 6.4.2-canary.f51057b7 → 6.5.0

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

@@ -0,0 +1,11 @@
+import React from 'react';
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    size?: 'default' | 'small';
+}
+interface BadgeLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const BadgeLabel: React.ForwardRefExoticComponent<BadgeLabelProps & React.RefAttributes<HTMLDivElement>>;
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+export default Badge;

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

@@ -35,6 +35,9 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     close(): void;
     handleClickOutside(): void;
     focusHeading(): void;
+    private handleEscape;
+    private attachEventListeners;
+    private removeEventListeners;
 }
 interface DialogAlignmentProps {
     align?: 'left' | 'center' | 'right';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import Badge from '../Badge';
+import { ContentNode } from '../../types';
+type ImpactType = 'critical' | 'serious' | 'moderate' | 'minor';
+interface ImpactBadgeProps extends Omit<React.ComponentProps<typeof Badge>, 'children'> {
+    type: ImpactType;
+    label?: ContentNode;
+}
+declare const ImpactBadge: React.ForwardRefExoticComponent<Omit<ImpactBadgeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default ImpactBadge;

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

@@ -10,6 +10,7 @@ export interface NoticeProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     type?: keyof typeof iconTypeMap;
     title: ContentNode;
     icon?: IconType;
+    variant?: 'default' | 'condensed';
     children?: ReactNode;
 }
 declare const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -5,6 +5,7 @@ interface Props extends React.HTMLAttributes<HTMLDivElement> {
     totalItems: number;
     itemsPerPage?: number;
     currentPage?: number;
+    hideStartEndPagination?: boolean;
     statusLabel?: ContentNode;
     firstPageLabel?: ContentNode;
     previousPageLabel?: ContentNode;

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

@@ -7,11 +7,12 @@ export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     variant?: 'text' | 'info' | 'big';
     association?: 'aria-labelledby' | 'aria-describedby' | 'none';
     show?: boolean | undefined;
+    defaultShow?: boolean;
     placement?: Placement;
     portal?: React.RefObject<HTMLElement> | HTMLElement;
     hideElementOnHidden?: boolean;
 }
-declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: initialShow, hideElementOnHidden, className, ...props }: TooltipProps): JSX.Element;
+declare function Tooltip({ id: propId, placement: initialPlacement, children, portal, target, association, variant, show: showProp, defaultShow, hideElementOnHidden, className, ...props }: TooltipProps): JSX.Element;
 declare namespace Tooltip {
     var displayName: string;
 }

package/lib/index.d.ts

@@ -38,6 +38,8 @@ export { default as Code } from './components/Code';
 export { default as LoaderOverlay } from './components/LoaderOverlay';
 export { default as Line } from './components/Line';
 export { default as Tag, TagLabel } from './components/Tag';
+export { default as Badge, BadgeLabel } from './components/Badge';
+export { default as ImpactBadge } from './components/ImpactBadge';
 export { default as TagButton } from './components/TagButton';
 export { default as Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TableFooter } from './components/Table';
 export { default as Tabs, Tab, TabPanel } from './components/Tabs';

package/lib/index.js

@@ -1386,6 +1386,9 @@ var AriaIsolate = /** @class */ (function () {
     return AriaIsolate;
 }());
 
+var isEscape = function (event) {
+    return event.key === 'Escape' || event.key === 'Esc' || event.keyCode === 27;
+};
 var noop = function () {
     //not empty
 };
@@ -1397,24 +1400,29 @@ var Dialog = /** @class */ (function (_super) {
         _this.close = _this.close.bind(_this);
         _this.focusHeading = _this.focusHeading.bind(_this);
         _this.handleClickOutside = _this.handleClickOutside.bind(_this);
+        _this.handleEscape = _this.handleEscape.bind(_this);
         _this.state = {};
         return _this;
     }
     Dialog.prototype.componentDidMount = function () {
         var _this = this;
         if (this.props.show) {
+            this.attachEventListeners();
             this.attachIsolator(function () { return setTimeout(_this.focusHeading); });
         }
     };
     Dialog.prototype.componentWillUnmount = function () {
         var isolator = this.state.isolator;
         isolator === null || isolator === void 0 ? void 0 : isolator.deactivate();
+        this.removeEventListeners();
     };
     Dialog.prototype.componentDidUpdate = function (prevProps) {
         if (!prevProps.show && this.props.show) {
             this.attachIsolator(this.focusHeading);
+            this.attachEventListeners();
         }
         else if (prevProps.show && !this.props.show) {
+            this.removeEventListeners();
             this.close();
         }
     };
@@ -1438,8 +1446,7 @@ var Dialog = /** @class */ (function (_super) {
             : 2);
         var Dialog = (React__default["default"].createElement(FocusTrap__default["default"], { focusTrapOptions: {
                 allowOutsideClick: true,
-                onDeactivate: this.close,
-                escapeDeactivates: !forceAction,
+                escapeDeactivates: false,
                 fallbackFocus: '.Dialog__heading'
             } },
             React__default["default"].createElement(ClickOutsideListener, { onClickOutside: this.handleClickOutside },
@@ -1481,6 +1488,24 @@ var Dialog = /** @class */ (function (_super) {
         }
         (_a = this.state.isolator) === null || _a === void 0 ? void 0 : _a.activate();
     };
+    Dialog.prototype.handleEscape = function (keyboardEvent) {
+        if (!keyboardEvent.defaultPrevented && isEscape(keyboardEvent)) {
+            this.close();
+        }
+    };
+    Dialog.prototype.attachEventListeners = function () {
+        var forceAction = this.props.forceAction;
+        if (!forceAction) {
+            var portal = this.props.portal || document.body;
+            var targetElement = portal instanceof HTMLElement ? portal : portal.current;
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('keyup', this.handleEscape);
+        }
+    };
+    Dialog.prototype.removeEventListeners = function () {
+        var portal = this.props.portal || document.body;
+        var targetElement = portal instanceof HTMLElement ? portal : portal.current;
+        targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('keyup', this.handleEscape);
+    };
     Dialog.defaultProps = {
         onClose: noop,
         forceAction: false,
@@ -1654,10 +1679,10 @@ var fireCustomEvent = function (show, button) {
 };
 function Tooltip(_a) {
     var _this = this;
-    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, _e = _a.show, initialShow = _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", "hideElementOnHidden", "className"]);
+    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"]);
     var _g = tslib.__read(propId ? [propId] : nextId.useId(1, 'tooltip'), 1), id = _g[0];
     var hideTimeoutRef = React.useRef(null);
-    var _h = tslib.__read(React.useState(!!initialShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
+    var _h = tslib.__read(React.useState(!!showProp || defaultShow), 2), showTooltip = _h[0], setShowTooltip = _h[1];
     var _j = tslib.__read(React.useState(null), 2), targetElement = _j[0], setTargetElement = _j[1];
     var _k = tslib.__read(React.useState(null), 2), tooltipElement = _k[0], setTooltipElement = _k[1];
     var _l = tslib.__read(React.useState(null), 2), arrowElement = _l[0], setArrowElement = _l[1];
@@ -1709,12 +1734,20 @@ function Tooltip(_a) {
                 fireCustomEvent(false, targetElement);
             }, TIP_HIDE_DELAY);
         }
+        return function () {
+            clearTimeout(hideTimeoutRef.current);
+        };
     }, [targetElement]);
     // Keep targetElement in sync with target prop
     React.useEffect(function () {
         var targetElement = target && 'current' in target ? target.current : target;
         setTargetElement(targetElement);
     }, [target]);
+    React.useEffect(function () {
+        if (typeof showProp === 'boolean') {
+            setShowTooltip(showProp);
+        }
+    }, [showProp]);
     // Get popper placement
     var placement = (attributes.popper &&
         attributes.popper['data-popper-placement']) ||
@@ -1725,11 +1758,12 @@ function Tooltip(_a) {
             if (event.key === 'Escape' ||
                 event.key === 'Esc' ||
                 event.keyCode === 27) {
+                event.preventDefault();
                 setShowTooltip(false);
             }
         };
         var targetElement = document.body;
-        if (showTooltip) {
+        if (showTooltip && typeof showProp !== 'boolean') {
             targetElement.addEventListener('keyup', handleEscape, { capture: true });
         }
         else {
@@ -1742,29 +1776,33 @@ function Tooltip(_a) {
                 capture: true
             });
         };
-    }, [showTooltip]);
+    }, [showTooltip, showProp]);
     // Handle hover and focus events for the targetElement
     React.useEffect(function () {
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
-        targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
+        if (typeof showProp !== 'boolean') {
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseenter', show);
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('mouseleave', hide);
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusin', show);
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.addEventListener('focusout', hide);
+        }
         return function () {
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseenter', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('mouseleave', hide);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusin', show);
             targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeEventListener('focusout', hide);
         };
-    }, [targetElement, show, hide]);
+    }, [targetElement, show, hide, showProp]);
     // Handle hover events for the tooltipElement
     React.useEffect(function () {
-        tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', show);
-        tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', hide);
+        if (typeof showProp !== 'boolean') {
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseenter', show);
+            tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.addEventListener('mouseleave', hide);
+        }
         return function () {
             tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseenter', show);
             tooltipElement === null || tooltipElement === void 0 ? void 0 : tooltipElement.removeEventListener('mouseleave', hide);
         };
-    }, [tooltipElement, show, hide]);
+    }, [tooltipElement, show, hide, showProp]);
     // Keep the target's id in sync
     React.useEffect(function () {
         if (hasAriaAssociation) {
@@ -2601,6 +2639,41 @@ var Tag = function (_a) {
 };
 Tag.displayName = 'Tag';
 
+var BadgeLabel = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, other = tslib.__rest(_a, ["children", "className"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ ref: ref, className: classNames__default["default"]('Badge__Label', className) }, other), children));
+});
+BadgeLabel.displayName = 'BadgeLabel';
+var Badge = React.forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.size, size = _b === void 0 ? 'default' : _b, other = tslib.__rest(_a, ["children", "className", "size"]);
+    return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Badge', className, {
+            'Badge--small': size === 'small'
+        }), ref: ref }, other), children));
+});
+Badge.displayName = 'Badge';
+
+var iconByType = {
+    critical: 'chevron-double-up',
+    serious: 'chevron-up',
+    moderate: 'chevron-down',
+    minor: 'chevron-double-down'
+};
+var typeValues = {
+    critical: 'Critical',
+    serious: 'Serious',
+    moderate: 'Moderate',
+    minor: 'Minor'
+};
+var ImpactBadge = React.forwardRef(function (_a, ref) {
+    var type = _a.type, label = _a.label, className = _a.className, other = tslib.__rest(_a, ["type", "label", "className"]);
+    return (React__default["default"].createElement(Badge, tslib.__assign({ className: classNames__default["default"]("ImpactBadge", "ImpactBadge--".concat(type), className), ref: ref }, other),
+        React__default["default"].createElement(Icon, { type: iconByType[type] }),
+        label || (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(BadgeLabel, null, "Impact:"),
+            typeValues[type]))));
+});
+ImpactBadge.displayName = 'ImpactBadge';
+
 var TagButton = React__default["default"].forwardRef(function (_a, ref) {
     var label = _a.label, value = _a.value, icon = _a.icon, className = _a.className, rest = tslib.__rest(_a, ["label", "value", "icon", "className"]);
     return (React__default["default"].createElement(Button, tslib.__assign({ variant: "tag", className: classNames__default["default"]('TagButton', className), ref: ref }, rest),
@@ -2881,7 +2954,7 @@ var AddressCityStateZip = function (_a) {
 AddressCityStateZip.displayName = 'AddressCityStateZip';
 
 var Pagination = React__default["default"].forwardRef(function (_a, ref) {
-    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, _d = _a.firstPageLabel, firstPageLabel = _d === void 0 ? 'First page' : _d, _e = _a.previousPageLabel, previousPageLabel = _e === void 0 ? 'Previous page' : _e, _f = _a.nextPageLabel, nextPageLabel = _f === void 0 ? 'Next page' : _f, _g = _a.lastPageLabel, lastPageLabel = _g === void 0 ? 'Last page' : _g, _h = _a.tooltipPlacement, tooltipPlacement = _h === void 0 ? 'bottom' : _h, onNextPageClick = _a.onNextPageClick, onPreviousPageClick = _a.onPreviousPageClick, onFirstPageClick = _a.onFirstPageClick, onLastPageClick = _a.onLastPageClick, className = _a.className, _j = _a.thin, thin = _j === void 0 ? false : _j, other = tslib.__rest(_a, ["totalItems", "itemsPerPage", "currentPage", "statusLabel", "firstPageLabel", "previousPageLabel", "nextPageLabel", "lastPageLabel", "tooltipPlacement", "onNextPageClick", "onPreviousPageClick", "onFirstPageClick", "onLastPageClick", "className", "thin"]);
+    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"]);
     var itemStart = currentPage * itemsPerPage - itemsPerPage + 1;
     var itemEnd = Math.min(itemStart + itemsPerPage - 1, totalItems);
     var isLastPage = itemEnd === totalItems;
@@ -2890,8 +2963,8 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
             'Pagination--thin': thin
         }) }, other),
         React__default["default"].createElement("ul", null,
-            React__default["default"].createElement("li", null,
-                React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipProps: { placement: tooltipPlacement }, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick })),
+            !hideStartEndPagination && (React__default["default"].createElement("li", null,
+                React__default["default"].createElement(IconButton, { icon: "chevron-double-left", tooltipProps: { placement: tooltipPlacement }, label: firstPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onFirstPageClick }))),
             React__default["default"].createElement("li", null,
                 React__default["default"].createElement(IconButton, { icon: "chevron-left", tooltipProps: { placement: tooltipPlacement }, label: previousPageLabel, "aria-disabled": isFirstPage, onClick: isFirstPage ? undefined : onPreviousPageClick })),
             React__default["default"].createElement("li", null,
@@ -2905,8 +2978,8 @@ var Pagination = React__default["default"].forwardRef(function (_a, ref) {
                     React__default["default"].createElement("strong", null, totalItems))))),
             React__default["default"].createElement("li", null,
                 React__default["default"].createElement(IconButton, { icon: "chevron-right", tooltipProps: { placement: tooltipPlacement }, label: nextPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onNextPageClick })),
-            React__default["default"].createElement("li", null,
-                React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipProps: { placement: tooltipPlacement }, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick })))));
+            !hideStartEndPagination && (React__default["default"].createElement("li", null,
+                React__default["default"].createElement(IconButton, { icon: "chevron-double-right", tooltipProps: { placement: tooltipPlacement }, label: lastPageLabel, "aria-disabled": isLastPage, onClick: isLastPage ? undefined : onLastPageClick }))))));
 });
 Pagination.displayName = 'Pagination';
 
@@ -3167,13 +3240,13 @@ var iconTypeMap = {
 };
 var Notice = React.forwardRef(function (_a, ref) {
     var _b;
-    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"]);
+    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"]);
     return (React__default["default"].createElement("div", tslib.__assign({ className: classNames__default["default"]('Notice', (_b = {},
             _b["Notice--".concat(type)] = type,
+            _b["Notice--condensed"] = variant === 'condensed',
             _b)), ref: ref }, otherProps),
-        React__default["default"].createElement("div", { className: "Notice__title" },
-            React__default["default"].createElement(Icon, { type: icon || iconTypeMap[type] }),
-            title),
+        React__default["default"].createElement(Icon, { type: icon || iconTypeMap[type] }),
+        React__default["default"].createElement("div", { className: "Notice__title" }, title),
         children && React__default["default"].createElement("div", { className: "Notice__content" }, children)));
 });
 Notice.displayName = 'Notice';
@@ -4100,6 +4173,8 @@ exports.Alert = Alert;
 exports.AlertActions = AlertActions;
 exports.AlertContent = AlertContent;
 exports.AriaIsolate = AriaIsolate;
+exports.Badge = Badge;
+exports.BadgeLabel = BadgeLabel;
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink;
@@ -4126,6 +4201,7 @@ exports.ExpandCollapsePanel = ExpandCollapsePanel;
 exports.FieldWrap = FieldWrap;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.ImpactBadge = ImpactBadge;
 exports.Layout = Layout;
 exports.Line = Line;
 exports.Link = Link;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deque/cauldron-react",
-  "version": "6.4.2-canary.f51057b7",
+  "version": "6.5.0",
   "license": "MPL-2.0",
   "description": "Fully accessible react components library for Deque Cauldron",
   "homepage": "https://cauldron.dequelabs.com/",