@deque/cauldron-react 6.4.2-canary.9eab948b → 6.4.2-canary.a3f374a6

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/index.d.ts

@@ -38,6 +38,7 @@ 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 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,
@@ -1733,6 +1758,7 @@ function Tooltip(_a) {
             if (event.key === 'Escape' ||
                 event.key === 'Esc' ||
                 event.keyCode === 27) {
+                event.preventDefault();
                 setShowTooltip(false);
             }
         };
@@ -2613,6 +2639,19 @@ 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 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),
@@ -4112,6 +4151,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;

package/package.json

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