@blueprintjs/core - npm Package Compare versions

Comparing version 5.0.0-alpha.4 to 5.0.0-alpha.5

lib/cjs/components/card/card.d.ts

 import * as React from "react";
-import { AbstractPureComponent, Elevation } from "../../common";
+import { Elevation } from "../../common";
 import { HTMLDivProps, Props } from "../../common/props";
-export interface CardProps extends Props, HTMLDivProps {
+export interface CardProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement> {
     /**
@@ -34,6 +34,2 @@ * Controls the intensity of the drop shadow beneath the card: the higher
  */
-export declare class Card extends AbstractPureComponent<CardProps> {
-    static displayName: string;
-    static defaultProps: CardProps;
-    render(): JSX.Element;
-}
+export declare const Card: React.FC<CardProps>;

lib/cjs/components/card/card.js

@@ -29,21 +29,13 @@ "use strict";
  */
-var Card = /** @class */ (function (_super) {
-    tslib_1.__extends(Card, _super);
-    function Card() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Card.prototype.render = function () {
-        var _a;
-        var _b = this.props, className = _b.className, elevation = _b.elevation, interactive = _b.interactive, htmlProps = tslib_1.__rest(_b, ["className", "elevation", "interactive"]);
-        var classes = (0, classnames_1.default)(common_1.Classes.CARD, (_a = {}, _a[common_1.Classes.INTERACTIVE] = interactive, _a), common_1.Classes.elevationClass(elevation), className);
-        return React.createElement("div", tslib_1.__assign({ className: classes }, htmlProps));
-    };
-    Card.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Card");
-    Card.defaultProps = {
-        elevation: common_1.Elevation.ZERO,
-        interactive: false,
-    };
-    return Card;
-}(common_1.AbstractPureComponent));
-exports.Card = Card;
+exports.Card = React.forwardRef(function (props, ref) {
+    var _a;
+    var className = props.className, elevation = props.elevation, interactive = props.interactive, htmlProps = tslib_1.__rest(props, ["className", "elevation", "interactive"]);
+    var classes = (0, classnames_1.default)(common_1.Classes.CARD, (_a = {}, _a[common_1.Classes.INTERACTIVE] = interactive, _a), common_1.Classes.elevationClass(elevation), className);
+    return React.createElement("div", tslib_1.__assign({ className: classes, ref: ref }, htmlProps));
+});
+exports.Card.defaultProps = {
+    elevation: common_1.Elevation.ZERO,
+    interactive: false,
+};
+exports.Card.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Card");
 //# sourceMappingURL=card.js.map

lib/cjs/components/context-menu/contextMenu.js

@@ -69,8 +69,14 @@ "use strict";
         }
+        var hasMenuContent = menu !== undefined;
         // If disabled, we should avoid this extra work.
         // Otherwise: if using the child or content function APIs, we need to make sure contentProps gets updated,
         // so we handle the event regardless of whether the consumer returned an undefined menu.
-        var shouldHandleEvent = !disabled && (common_1.Utils.isFunction(children) || common_1.Utils.isFunction(content) || maybePopover !== undefined);
+        var shouldHandleEvent = !disabled && (common_1.Utils.isFunction(children) || common_1.Utils.isFunction(content) || hasMenuContent);
+        // If there is no menu content, we shouldn't automatically swallow the contextmenu event, since the
+        // user probably wants to fall back to default browser behavior. If they still want to disable the
+        // native context menu in that case, they can do so with their own `onContextMenu` handler.
+        if (hasMenuContent) {
+            e.preventDefault();
+        }
         if (shouldHandleEvent) {
-            e.preventDefault();
             e.persist();
@@ -83,3 +89,3 @@ setMouseEvent(e);
         onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(e);
-    }, [onContextMenu, disabled]);
+    }, [children, content, disabled, onContextMenu, menu]);
     var containerClassName = (0, classnames_1.default)(className, common_1.Classes.CONTEXT_MENU);
@@ -86,0 +92,0 @@ var child = common_1.Utils.isFunction(children) ? (children({

lib/cjs/components/dialog/dialogBody.js

@@ -35,3 +35,3 @@ "use strict";
         var _a;
-        return (React.createElement("div", { role: "dialogbody", className: (0, classnames_1.default)(common_1.Classes.DIALOG_BODY, this.props.className, (_a = {},
+        return (React.createElement("div", { className: (0, classnames_1.default)(common_1.Classes.DIALOG_BODY, this.props.className, (_a = {},
                 _a[common_1.Classes.DIALOG_BODY_SCROLL_CONTAINER] = this.props.useOverflowScrollContainer,
@@ -38,0 +38,0 @@ _a)) }, this.props.children));

lib/cjs/components/index.d.ts

@@ -65,5 +65,6 @@ export { Alert, AlertProps } from "./alert/alert";
 export { TagInput, TagInputProps, TagInputAddMethod } from "./tag-input/tagInput";
-export { OverlayToaster, OverlayToasterProps } from "./toast/overlayToaster";
+export { OverlayToaster } from "./toast/overlayToaster";
+export type { OverlayToasterProps, ToasterPosition } from "./toast/overlayToasterProps";
 export { Toast, ToastProps } from "./toast/toast";
-export { Toaster, ToastOptions, ToasterPosition } from "./toast/toaster";
+export { Toaster, ToastOptions } from "./toast/toaster";
 export { TooltipProps, Tooltip } from "./tooltip/tooltip";
@@ -70,0 +71,0 @@ export { Tree, TreeProps } from "./tree/tree";

lib/cjs/components/index.js

@@ -19,3 +19,3 @@ "use strict";
 exports.MenuDivider = exports.Menu = exports.IconSize = exports.Icon = exports.HTMLTable = exports.HTMLSelect = exports.UL = exports.Pre = exports.OL = exports.Label = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Code = exports.Blockquote = exports.TextArea = exports.RadioGroup = exports.NumericInput = exports.InputGroup = exports.FormGroup = exports.FileInput = exports.Switch = exports.Radio = exports.Checkbox = exports.ControlGroup = exports.EditableText = exports.DrawerSize = exports.Drawer = exports.Divider = exports.MultistepDialog = exports.DialogStep = exports.DialogFooter = exports.DialogBody = exports.Dialog = exports.hideContextMenu = exports.showContextMenu = exports.ContextMenuPopover = exports.ContextMenu = exports.Collapse = exports.Card = exports.Callout = exports.ButtonGroup = exports.Button = exports.AnchorButton = exports.Breadcrumbs = exports.Breadcrumb = exports.Alert = void 0;
-exports.TreeNode = exports.Tree = exports.Tooltip = exports.Toast = exports.OverlayToaster = exports.TagInput = exports.Tag = exports.Tabs = exports.Tab = exports.SpinnerSize = exports.Spinner = exports.Slider = exports.RangeSlider = exports.MultiSlider = exports.HandleType = exports.HandleInteractionKind = exports.ResizeSensor = exports.ResizeEntry = exports.ProgressBar = exports.Portal = exports.PopupKind = exports.PopperPlacements = exports.PopoverPosition = exports.PopoverInteractionKind = exports.Popover = exports.PanelStack2 = exports.PanelStack = exports.Text = exports.Overlay = exports.OverflowList = exports.NonIdealStateIconSize = exports.NonIdealState = exports.NavbarHeading = exports.NavbarGroup = exports.NavbarDivider = exports.Navbar = exports.MenuItem = void 0;
+exports.TreeNode = exports.Tree = exports.Tooltip = exports.Toaster = exports.Toast = exports.OverlayToaster = exports.TagInput = exports.Tag = exports.Tabs = exports.Tab = exports.SpinnerSize = exports.Spinner = exports.Slider = exports.RangeSlider = exports.MultiSlider = exports.HandleType = exports.HandleInteractionKind = exports.ResizeSensor = exports.ResizeEntry = exports.ProgressBar = exports.Portal = exports.PopupKind = exports.PopperPlacements = exports.PopoverPosition = exports.PopoverInteractionKind = exports.Popover = exports.PanelStack2 = exports.PanelStack = exports.Text = exports.Overlay = exports.OverflowList = exports.NonIdealStateIconSize = exports.NonIdealState = exports.NavbarHeading = exports.NavbarGroup = exports.NavbarDivider = exports.Navbar = exports.MenuItem = void 0;
 var tslib_1 = require("tslib");
@@ -169,2 +169,4 @@ var alert_1 = require("./alert/alert");
 Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return toast_1.Toast; } });
+var toaster_1 = require("./toast/toaster");
+Object.defineProperty(exports, "Toaster", { enumerable: true, get: function () { return toaster_1.Toaster; } });
 var tooltip_1 = require("./tooltip/tooltip");
@@ -171,0 +173,0 @@ Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return tooltip_1.Tooltip; } });

lib/cjs/components/popover/popover.d.ts

@@ -139,3 +139,5 @@ import { State as PopperState, PositioningStrategy } from "@popperjs/core";
     private handleOverlayClose;
+    private handleKeyDown;
     private handleTargetClick;
+    private isSimulatedButtonClick;
     private setOpenState;
@@ -142,0 +144,0 @@ private updateDarkParent;

lib/cjs/components/popover/popover.js

@@ -118,5 +118,3 @@ "use strict";
                     // For keyboard accessibility, trigger the same behavior as a click event upon pressing ENTER/SPACE
-                    onKeyDown: function (event) {
-                        return common_1.Utils.isKeyboardClick(event) && _this.handleTargetClick(event);
-                    },
+                    onKeyDown: _this.handleKeyDown,
                 };
@@ -299,13 +297,28 @@ // Ensure target is focusable if relevant prop enabled
         };
+        _this.handleKeyDown = function (e) {
+            var isKeyboardClick = common_1.Utils.isKeyboardClick(e);
+            // For keyboard accessibility, trigger the same behavior as a click event upon pressing ENTER/SPACE
+            if (isKeyboardClick) {
+                _this.handleTargetClick(e);
+            }
+        };
         _this.handleTargetClick = function (e) {
-            // ensure click did not originate from within inline popover before closing
-            if (!_this.props.disabled && !_this.isElementInPopover(e.target)) {
-                if (_this.props.isOpen == null) {
-                    _this.setState(function (prevState) { return ({ isOpen: !prevState.isOpen }); });
+            // Target element(s) may fire simulated click event upon pressing ENTER/SPACE, which we should ignore
+            // see: https://github.com/palantir/blueprint/issues/5775
+            var shouldIgnoreClick = _this.state.isOpen && _this.isSimulatedButtonClick(e);
+            if (!shouldIgnoreClick) {
+                // ensure click did not originate from within inline popover before closing
+                if (!_this.props.disabled && !_this.isElementInPopover(e.target)) {
+                    if (_this.props.isOpen == null) {
+                        _this.setState(function (prevState) { return ({ isOpen: !prevState.isOpen }); });
+                    }
+                    else {
+                        _this.setOpenState(!_this.props.isOpen, e);
+                    }
                 }
-                else {
-                    _this.setOpenState(!_this.props.isOpen, e);
-                }
             }
         };
+        _this.isSimulatedButtonClick = function (e) {
+            return !e.isTrusted && e.target.matches(".".concat(common_1.Classes.BUTTON));
+        };
         return _this;
@@ -312,0 +325,0 @@ }

lib/cjs/components/toast/overlayToaster.d.ts

 /// <reference types="react" />
 import { AbstractPureComponent } from "../../common";
-import { Props } from "../../common/props";
+import type { OverlayToasterProps } from "./overlayToasterProps";
 import { ToastProps } from "./toast";
-import { Toaster, ToasterPosition, ToastOptions } from "./toaster";
-/**
- * Props supported by the `<Toaster>` component.
- * These props can be passed as an argument to the static `Toaster.create(props?, container?)` method.
- */
-export interface OverlayToasterProps extends Props {
-    /**
-     * Whether a toast should acquire application focus when it first opens.
-     * This is disabled by default so that toasts do not interrupt the user's flow.
-     * Note that `enforceFocus` is always disabled for `Toaster`s.
-     *
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * Whether pressing the `esc` key should clear all active toasts.
-     *
-     * @default true
-     */
-    canEscapeKeyClear?: boolean;
-    /**
-     * Whether the toaster should be rendered into a new element attached to `document.body`.
-     * If `false`, then positioning will be relative to the parent element.
-     *
-     * This prop is ignored by `Toaster.create()` as that method always appends a new element
-     * to the container.
-     *
-     * @default true
-     */
-    usePortal?: boolean;
-    /**
-     * Position of `Toaster` within its container.
-     *
-     * @default Position.TOP
-     */
-    position?: ToasterPosition;
-    /**
-     * The maximum number of active toasts that can be displayed at once.
-     *
-     * When the limit is about to be exceeded, the oldest active toast is removed.
-     *
-     * @default undefined
-     */
-    maxToasts?: number;
-}
+import type { Toaster, ToastOptions } from "./toaster";
 export interface OverlayToasterState {
@@ -51,0 +7,0 @@ toasts: ToastOptions[];

lib/cjs/components/toast/toaster.d.ts

@@ -1,7 +0,6 @@
-import { Position } from "../../common";
-import { ToastProps } from "./toast";
+import type { OverlayToasterProps } from "./overlayToasterProps";
+import type { ToastProps } from "./toast";
 export declare type ToastOptions = ToastProps & {
     key: string;
 };
-export declare type ToasterPosition = typeof Position.TOP | typeof Position.TOP_LEFT | typeof Position.TOP_RIGHT | typeof Position.BOTTOM | typeof Position.BOTTOM_LEFT | typeof Position.BOTTOM_RIGHT;
 /** Instance methods available on a toaster component instance. */
@@ -22,3 +21,8 @@ export interface Toaster {
 }
-/** @deprecated use `Toaster` type instead */
 export declare type ToasterInstance = Toaster;
+export declare const Toaster: {
+    create: typeof deprecatedToasterCreate;
+};
+/** @deprecated use OverlayToaster.create() instead */
+declare function deprecatedToasterCreate(props?: OverlayToasterProps, container?: HTMLElement): Toaster;
+export {};

lib/cjs/components/toast/toaster.js

@@ -18,2 +18,16 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toaster = void 0;
+var overlayToaster_1 = require("./overlayToaster");
+// merges with declaration of `Toaster` type in `toasterTypes.ts`
+// kept for backwards-compatibility with v4.x
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+exports.Toaster = {
+    // eslint-disable-next-line deprecation/deprecation
+    create: deprecatedToasterCreate,
+};
+/** @deprecated use OverlayToaster.create() instead */
+function deprecatedToasterCreate(props, container) {
+    if (container === void 0) { container = document.body; }
+    return overlayToaster_1.OverlayToaster.create(props, container);
+}
 //# sourceMappingURL=toaster.js.map

lib/esm/components/card/card.d.ts

 import * as React from "react";
-import { AbstractPureComponent, Elevation } from "../../common";
+import { Elevation } from "../../common";
 import { HTMLDivProps, Props } from "../../common/props";
-export interface CardProps extends Props, HTMLDivProps {
+export interface CardProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement> {
     /**
@@ -34,6 +34,2 @@ * Controls the intensity of the drop shadow beneath the card: the higher
  */
-export declare class Card extends AbstractPureComponent<CardProps> {
-    static displayName: string;
-    static defaultProps: CardProps;
-    render(): JSX.Element;
-}
+export declare const Card: React.FC<CardProps>;

lib/esm/components/card/card.js

@@ -16,6 +16,6 @@ /*
  */
-import { __assign, __extends, __rest } from "tslib";
+import { __assign, __rest } from "tslib";
 import classNames from "classnames";
 import * as React from "react";
-import { AbstractPureComponent, Classes, Elevation } from "../../common";
+import { Classes, Elevation } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
@@ -27,21 +27,13 @@ /**
  */
-var Card = /** @class */ (function (_super) {
-    __extends(Card, _super);
-    function Card() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Card.prototype.render = function () {
-        var _a;
-        var _b = this.props, className = _b.className, elevation = _b.elevation, interactive = _b.interactive, htmlProps = __rest(_b, ["className", "elevation", "interactive"]);
-        var classes = classNames(Classes.CARD, (_a = {}, _a[Classes.INTERACTIVE] = interactive, _a), Classes.elevationClass(elevation), className);
-        return React.createElement("div", __assign({ className: classes }, htmlProps));
-    };
-    Card.displayName = "".concat(DISPLAYNAME_PREFIX, ".Card");
-    Card.defaultProps = {
-        elevation: Elevation.ZERO,
-        interactive: false,
-    };
-    return Card;
-}(AbstractPureComponent));
-export { Card };
+export var Card = React.forwardRef(function (props, ref) {
+    var _a;
+    var className = props.className, elevation = props.elevation, interactive = props.interactive, htmlProps = __rest(props, ["className", "elevation", "interactive"]);
+    var classes = classNames(Classes.CARD, (_a = {}, _a[Classes.INTERACTIVE] = interactive, _a), Classes.elevationClass(elevation), className);
+    return React.createElement("div", __assign({ className: classes, ref: ref }, htmlProps));
+});
+Card.defaultProps = {
+    elevation: Elevation.ZERO,
+    interactive: false,
+};
+Card.displayName = "".concat(DISPLAYNAME_PREFIX, ".Card");
 //# sourceMappingURL=card.js.map

lib/esm/components/context-menu/contextMenu.js

@@ -66,8 +66,14 @@ /*
         }
+        var hasMenuContent = menu !== undefined;
         // If disabled, we should avoid this extra work.
         // Otherwise: if using the child or content function APIs, we need to make sure contentProps gets updated,
         // so we handle the event regardless of whether the consumer returned an undefined menu.
-        var shouldHandleEvent = !disabled && (Utils.isFunction(children) || Utils.isFunction(content) || maybePopover !== undefined);
+        var shouldHandleEvent = !disabled && (Utils.isFunction(children) || Utils.isFunction(content) || hasMenuContent);
+        // If there is no menu content, we shouldn't automatically swallow the contextmenu event, since the
+        // user probably wants to fall back to default browser behavior. If they still want to disable the
+        // native context menu in that case, they can do so with their own `onContextMenu` handler.
+        if (hasMenuContent) {
+            e.preventDefault();
+        }
         if (shouldHandleEvent) {
-            e.preventDefault();
             e.persist();
@@ -80,3 +86,3 @@ setMouseEvent(e);
         onContextMenu === null || onContextMenu === void 0 ? void 0 : onContextMenu(e);
-    }, [onContextMenu, disabled]);
+    }, [children, content, disabled, onContextMenu, menu]);
     var containerClassName = classNames(className, Classes.CONTEXT_MENU);
@@ -83,0 +89,0 @@ var child = Utils.isFunction(children) ? (children({

lib/esm/components/dialog/dialogBody.js

@@ -32,3 +32,3 @@ /*
         var _a;
-        return (React.createElement("div", { role: "dialogbody", className: classNames(Classes.DIALOG_BODY, this.props.className, (_a = {},
+        return (React.createElement("div", { className: classNames(Classes.DIALOG_BODY, this.props.className, (_a = {},
                 _a[Classes.DIALOG_BODY_SCROLL_CONTAINER] = this.props.useOverflowScrollContainer,
@@ -35,0 +35,0 @@ _a)) }, this.props.children));

lib/esm/components/index.d.ts

@@ -65,5 +65,6 @@ export { Alert, AlertProps } from "./alert/alert";
 export { TagInput, TagInputProps, TagInputAddMethod } from "./tag-input/tagInput";
-export { OverlayToaster, OverlayToasterProps } from "./toast/overlayToaster";
+export { OverlayToaster } from "./toast/overlayToaster";
+export type { OverlayToasterProps, ToasterPosition } from "./toast/overlayToasterProps";
 export { Toast, ToastProps } from "./toast/toast";
-export { Toaster, ToastOptions, ToasterPosition } from "./toast/toaster";
+export { Toaster, ToastOptions } from "./toast/toaster";
 export { TooltipProps, Tooltip } from "./tooltip/tooltip";
@@ -70,0 +71,0 @@ export { Tree, TreeProps } from "./tree/tree";

lib/esm/components/index.js

@@ -79,2 +79,3 @@ /*
 export { Toast } from "./toast/toast";
+export { Toaster } from "./toast/toaster";
 export { Tooltip } from "./tooltip/tooltip";
@@ -81,0 +82,0 @@ export { Tree } from "./tree/tree";

lib/esm/components/popover/popover.d.ts

@@ -139,3 +139,5 @@ import { State as PopperState, PositioningStrategy } from "@popperjs/core";
     private handleOverlayClose;
+    private handleKeyDown;
     private handleTargetClick;
+    private isSimulatedButtonClick;
     private setOpenState;
@@ -142,0 +144,0 @@ private updateDarkParent;

lib/esm/components/popover/popover.js

@@ -115,5 +115,3 @@ /*
                     // For keyboard accessibility, trigger the same behavior as a click event upon pressing ENTER/SPACE
-                    onKeyDown: function (event) {
-                        return Utils.isKeyboardClick(event) && _this.handleTargetClick(event);
-                    },
+                    onKeyDown: _this.handleKeyDown,
                 };
@@ -296,13 +294,28 @@ // Ensure target is focusable if relevant prop enabled
         };
+        _this.handleKeyDown = function (e) {
+            var isKeyboardClick = Utils.isKeyboardClick(e);
+            // For keyboard accessibility, trigger the same behavior as a click event upon pressing ENTER/SPACE
+            if (isKeyboardClick) {
+                _this.handleTargetClick(e);
+            }
+        };
         _this.handleTargetClick = function (e) {
-            // ensure click did not originate from within inline popover before closing
-            if (!_this.props.disabled && !_this.isElementInPopover(e.target)) {
-                if (_this.props.isOpen == null) {
-                    _this.setState(function (prevState) { return ({ isOpen: !prevState.isOpen }); });
+            // Target element(s) may fire simulated click event upon pressing ENTER/SPACE, which we should ignore
+            // see: https://github.com/palantir/blueprint/issues/5775
+            var shouldIgnoreClick = _this.state.isOpen && _this.isSimulatedButtonClick(e);
+            if (!shouldIgnoreClick) {
+                // ensure click did not originate from within inline popover before closing
+                if (!_this.props.disabled && !_this.isElementInPopover(e.target)) {
+                    if (_this.props.isOpen == null) {
+                        _this.setState(function (prevState) { return ({ isOpen: !prevState.isOpen }); });
+                    }
+                    else {
+                        _this.setOpenState(!_this.props.isOpen, e);
+                    }
                 }
-                else {
-                    _this.setOpenState(!_this.props.isOpen, e);
-                }
             }
         };
+        _this.isSimulatedButtonClick = function (e) {
+            return !e.isTrusted && e.target.matches(".".concat(Classes.BUTTON));
+        };
         return _this;
@@ -309,0 +322,0 @@ }

lib/esm/components/toast/overlayToaster.d.ts

 /// <reference types="react" />
 import { AbstractPureComponent } from "../../common";
-import { Props } from "../../common/props";
+import type { OverlayToasterProps } from "./overlayToasterProps";
 import { ToastProps } from "./toast";
-import { Toaster, ToasterPosition, ToastOptions } from "./toaster";
-/**
- * Props supported by the `<Toaster>` component.
- * These props can be passed as an argument to the static `Toaster.create(props?, container?)` method.
- */
-export interface OverlayToasterProps extends Props {
-    /**
-     * Whether a toast should acquire application focus when it first opens.
-     * This is disabled by default so that toasts do not interrupt the user's flow.
-     * Note that `enforceFocus` is always disabled for `Toaster`s.
-     *
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * Whether pressing the `esc` key should clear all active toasts.
-     *
-     * @default true
-     */
-    canEscapeKeyClear?: boolean;
-    /**
-     * Whether the toaster should be rendered into a new element attached to `document.body`.
-     * If `false`, then positioning will be relative to the parent element.
-     *
-     * This prop is ignored by `Toaster.create()` as that method always appends a new element
-     * to the container.
-     *
-     * @default true
-     */
-    usePortal?: boolean;
-    /**
-     * Position of `Toaster` within its container.
-     *
-     * @default Position.TOP
-     */
-    position?: ToasterPosition;
-    /**
-     * The maximum number of active toasts that can be displayed at once.
-     *
-     * When the limit is about to be exceeded, the oldest active toast is removed.
-     *
-     * @default undefined
-     */
-    maxToasts?: number;
-}
+import type { Toaster, ToastOptions } from "./toaster";
 export interface OverlayToasterState {
@@ -51,0 +7,0 @@ toasts: ToastOptions[];

lib/esm/components/toast/toaster.d.ts

@@ -1,7 +0,6 @@
-import { Position } from "../../common";
-import { ToastProps } from "./toast";
+import type { OverlayToasterProps } from "./overlayToasterProps";
+import type { ToastProps } from "./toast";
 export declare type ToastOptions = ToastProps & {
     key: string;
 };
-export declare type ToasterPosition = typeof Position.TOP | typeof Position.TOP_LEFT | typeof Position.TOP_RIGHT | typeof Position.BOTTOM | typeof Position.BOTTOM_LEFT | typeof Position.BOTTOM_RIGHT;
 /** Instance methods available on a toaster component instance. */
@@ -22,3 +21,8 @@ export interface Toaster {
 }
-/** @deprecated use `Toaster` type instead */
 export declare type ToasterInstance = Toaster;
+export declare const Toaster: {
+    create: typeof deprecatedToasterCreate;
+};
+/** @deprecated use OverlayToaster.create() instead */
+declare function deprecatedToasterCreate(props?: OverlayToasterProps, container?: HTMLElement): Toaster;
+export {};

lib/esm/components/toast/toaster.js

@@ -16,3 +16,15 @@ /*
  */
-export {};
+import { OverlayToaster } from "./overlayToaster";
+// merges with declaration of `Toaster` type in `toasterTypes.ts`
+// kept for backwards-compatibility with v4.x
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export var Toaster = {
+    // eslint-disable-next-line deprecation/deprecation
+    create: deprecatedToasterCreate,
+};
+/** @deprecated use OverlayToaster.create() instead */
+function deprecatedToasterCreate(props, container) {
+    if (container === void 0) { container = document.body; }
+    return OverlayToaster.create(props, container);
+}
 //# sourceMappingURL=toaster.js.map

lib/esnext/components/card/card.d.ts

 import * as React from "react";
-import { AbstractPureComponent, Elevation } from "../../common";
+import { Elevation } from "../../common";
 import { HTMLDivProps, Props } from "../../common/props";
-export interface CardProps extends Props, HTMLDivProps {
+export interface CardProps extends Props, HTMLDivProps, React.RefAttributes<HTMLDivElement> {
     /**
@@ -34,6 +34,2 @@ * Controls the intensity of the drop shadow beneath the card: the higher
  */
-export declare class Card extends AbstractPureComponent<CardProps> {
-    static displayName: string;
-    static defaultProps: CardProps;
-    render(): JSX.Element;
-}
+export declare const Card: React.FC<CardProps>;

lib/esnext/components/card/card.js

@@ -18,3 +18,3 @@ /*
 import * as React from "react";
-import { AbstractPureComponent, Classes, Elevation } from "../../common";
+import { Classes, Elevation } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
@@ -26,14 +26,12 @@ /**
  */
-export class Card extends AbstractPureComponent {
-    static displayName = `${DISPLAYNAME_PREFIX}.Card`;
-    static defaultProps = {
-        elevation: Elevation.ZERO,
-        interactive: false,
-    };
-    render() {
-        const { className, elevation, interactive, ...htmlProps } = this.props;
-        const classes = classNames(Classes.CARD, { [Classes.INTERACTIVE]: interactive }, Classes.elevationClass(elevation), className);
-        return React.createElement("div", { className: classes, ...htmlProps });
-    }
-}
+export const Card = React.forwardRef((props, ref) => {
+    const { className, elevation, interactive, ...htmlProps } = props;
+    const classes = classNames(Classes.CARD, { [Classes.INTERACTIVE]: interactive }, Classes.elevationClass(elevation), className);
+    return React.createElement("div", { className: classes, ref: ref, ...htmlProps });
+});
+Card.defaultProps = {
+    elevation: Elevation.ZERO,
+    interactive: false,
+};
+Card.displayName = `${DISPLAYNAME_PREFIX}.Card`;
 //# sourceMappingURL=card.js.map

lib/esnext/components/context-menu/contextMenu.js

@@ -65,8 +65,14 @@ /*
         }
+        const hasMenuContent = menu !== undefined;
         // If disabled, we should avoid this extra work.
         // Otherwise: if using the child or content function APIs, we need to make sure contentProps gets updated,
         // so we handle the event regardless of whether the consumer returned an undefined menu.
-        const shouldHandleEvent = !disabled && (Utils.isFunction(children) || Utils.isFunction(content) || maybePopover !== undefined);
+        const shouldHandleEvent = !disabled && (Utils.isFunction(children) || Utils.isFunction(content) || hasMenuContent);
+        // If there is no menu content, we shouldn't automatically swallow the contextmenu event, since the
+        // user probably wants to fall back to default browser behavior. If they still want to disable the
+        // native context menu in that case, they can do so with their own `onContextMenu` handler.
+        if (hasMenuContent) {
+            e.preventDefault();
+        }
         if (shouldHandleEvent) {
-            e.preventDefault();
             e.persist();
@@ -79,3 +85,3 @@ setMouseEvent(e);
         onContextMenu?.(e);
-    }, [onContextMenu, disabled]);
+    }, [children, content, disabled, onContextMenu, menu]);
     const containerClassName = classNames(className, Classes.CONTEXT_MENU);
@@ -82,0 +88,0 @@ const child = Utils.isFunction(children) ? (children({

lib/esnext/components/dialog/dialogBody.js

@@ -29,3 +29,3 @@ /*
     render() {
-        return (React.createElement("div", { role: "dialogbody", className: classNames(Classes.DIALOG_BODY, this.props.className, {
+        return (React.createElement("div", { className: classNames(Classes.DIALOG_BODY, this.props.className, {
                 [Classes.DIALOG_BODY_SCROLL_CONTAINER]: this.props.useOverflowScrollContainer,
@@ -32,0 +32,0 @@ }) }, this.props.children));

lib/esnext/components/index.d.ts

@@ -65,5 +65,6 @@ export { Alert, AlertProps } from "./alert/alert";
 export { TagInput, TagInputProps, TagInputAddMethod } from "./tag-input/tagInput";
-export { OverlayToaster, OverlayToasterProps } from "./toast/overlayToaster";
+export { OverlayToaster } from "./toast/overlayToaster";
+export type { OverlayToasterProps, ToasterPosition } from "./toast/overlayToasterProps";
 export { Toast, ToastProps } from "./toast/toast";
-export { Toaster, ToastOptions, ToasterPosition } from "./toast/toaster";
+export { Toaster, ToastOptions } from "./toast/toaster";
 export { TooltipProps, Tooltip } from "./tooltip/tooltip";
@@ -70,0 +71,0 @@ export { Tree, TreeProps } from "./tree/tree";

lib/esnext/components/index.js

@@ -79,2 +79,3 @@ /*
 export { Toast } from "./toast/toast";
+export { Toaster } from "./toast/toaster";
 export { Tooltip } from "./tooltip/tooltip";
@@ -81,0 +82,0 @@ export { Tree } from "./tree/tree";

lib/esnext/components/popover/popover.d.ts

@@ -139,3 +139,5 @@ import { State as PopperState, PositioningStrategy } from "@popperjs/core";
     private handleOverlayClose;
+    private handleKeyDown;
     private handleTargetClick;
+    private isSimulatedButtonClick;
     private setOpenState;
@@ -142,0 +144,0 @@ private updateDarkParent;

lib/esnext/components/popover/popover.js

@@ -213,3 +213,3 @@ /*
                 // For keyboard accessibility, trigger the same behavior as a click event upon pressing ENTER/SPACE
-                onKeyDown: (event) => Utils.isKeyboardClick(event) && this.handleTargetClick(event),
+                onKeyDown: this.handleKeyDown,
             };
@@ -462,13 +462,28 @@ // Ensure target is focusable if relevant prop enabled
     };
+    handleKeyDown = (e) => {
+        const isKeyboardClick = Utils.isKeyboardClick(e);
+        // For keyboard accessibility, trigger the same behavior as a click event upon pressing ENTER/SPACE
+        if (isKeyboardClick) {
+            this.handleTargetClick(e);
+        }
+    };
     handleTargetClick = (e) => {
-        // ensure click did not originate from within inline popover before closing
-        if (!this.props.disabled && !this.isElementInPopover(e.target)) {
-            if (this.props.isOpen == null) {
-                this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+        // Target element(s) may fire simulated click event upon pressing ENTER/SPACE, which we should ignore
+        // see: https://github.com/palantir/blueprint/issues/5775
+        const shouldIgnoreClick = this.state.isOpen && this.isSimulatedButtonClick(e);
+        if (!shouldIgnoreClick) {
+            // ensure click did not originate from within inline popover before closing
+            if (!this.props.disabled && !this.isElementInPopover(e.target)) {
+                if (this.props.isOpen == null) {
+                    this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+                }
+                else {
+                    this.setOpenState(!this.props.isOpen, e);
+                }
             }
-            else {
-                this.setOpenState(!this.props.isOpen, e);
-            }
         }
     };
+    isSimulatedButtonClick = (e) => {
+        return !e.isTrusted && e.target.matches(`.${Classes.BUTTON}`);
+    };
     // a wrapper around setState({ isOpen }) that will call props.onInteraction instead when in controlled mode.
@@ -475,0 +490,0 @@ // starts a timeout to delay changing the state if a non-zero duration is provided.

lib/esnext/components/toast/overlayToaster.d.ts

 /// <reference types="react" />
 import { AbstractPureComponent } from "../../common";
-import { Props } from "../../common/props";
+import type { OverlayToasterProps } from "./overlayToasterProps";
 import { ToastProps } from "./toast";
-import { Toaster, ToasterPosition, ToastOptions } from "./toaster";
-/**
- * Props supported by the `<Toaster>` component.
- * These props can be passed as an argument to the static `Toaster.create(props?, container?)` method.
- */
-export interface OverlayToasterProps extends Props {
-    /**
-     * Whether a toast should acquire application focus when it first opens.
-     * This is disabled by default so that toasts do not interrupt the user's flow.
-     * Note that `enforceFocus` is always disabled for `Toaster`s.
-     *
-     * @default false
-     */
-    autoFocus?: boolean;
-    /**
-     * Whether pressing the `esc` key should clear all active toasts.
-     *
-     * @default true
-     */
-    canEscapeKeyClear?: boolean;
-    /**
-     * Whether the toaster should be rendered into a new element attached to `document.body`.
-     * If `false`, then positioning will be relative to the parent element.
-     *
-     * This prop is ignored by `Toaster.create()` as that method always appends a new element
-     * to the container.
-     *
-     * @default true
-     */
-    usePortal?: boolean;
-    /**
-     * Position of `Toaster` within its container.
-     *
-     * @default Position.TOP
-     */
-    position?: ToasterPosition;
-    /**
-     * The maximum number of active toasts that can be displayed at once.
-     *
-     * When the limit is about to be exceeded, the oldest active toast is removed.
-     *
-     * @default undefined
-     */
-    maxToasts?: number;
-}
+import type { Toaster, ToastOptions } from "./toaster";
 export interface OverlayToasterState {
@@ -51,0 +7,0 @@ toasts: ToastOptions[];

lib/esnext/components/toast/toaster.d.ts

@@ -1,7 +0,6 @@
-import { Position } from "../../common";
-import { ToastProps } from "./toast";
+import type { OverlayToasterProps } from "./overlayToasterProps";
+import type { ToastProps } from "./toast";
 export declare type ToastOptions = ToastProps & {
     key: string;
 };
-export declare type ToasterPosition = typeof Position.TOP | typeof Position.TOP_LEFT | typeof Position.TOP_RIGHT | typeof Position.BOTTOM | typeof Position.BOTTOM_LEFT | typeof Position.BOTTOM_RIGHT;
 /** Instance methods available on a toaster component instance. */
@@ -22,3 +21,8 @@ export interface Toaster {
 }
-/** @deprecated use `Toaster` type instead */
 export declare type ToasterInstance = Toaster;
+export declare const Toaster: {
+    create: typeof deprecatedToasterCreate;
+};
+/** @deprecated use OverlayToaster.create() instead */
+declare function deprecatedToasterCreate(props?: OverlayToasterProps, container?: HTMLElement): Toaster;
+export {};

lib/esnext/components/toast/toaster.js

@@ -16,3 +16,14 @@ /*
  */
-export {};
+import { OverlayToaster } from "./overlayToaster";
+// merges with declaration of `Toaster` type in `toasterTypes.ts`
+// kept for backwards-compatibility with v4.x
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const Toaster = {
+    // eslint-disable-next-line deprecation/deprecation
+    create: deprecatedToasterCreate,
+};
+/** @deprecated use OverlayToaster.create() instead */
+function deprecatedToasterCreate(props, container = document.body) {
+    return OverlayToaster.create(props, container);
+}
 //# sourceMappingURL=toaster.js.map

package.json

 {
     "name": "@blueprintjs/core",
-    "version": "5.0.0-alpha.4",
+    "version": "5.0.0-alpha.5",
     "description": "Core styles & components",
@@ -52,4 +52,4 @@ "main": "lib/cjs/index.js",
     "dependencies": {
-        "@blueprintjs/colors": "^5.0.0-alpha.2",
-        "@blueprintjs/icons": "^5.0.0-alpha.3",
+        "@blueprintjs/colors": "^5.0.0-alpha.3",
+        "@blueprintjs/icons": "^5.0.0-alpha.4",
         "@juggle/resize-observer": "^3.4.0",
@@ -74,5 +74,5 @@ "@popperjs/core": "^2.11.7",
     "devDependencies": {
-        "@blueprintjs/karma-build-scripts": "^5.0.0-alpha.3",
-        "@blueprintjs/node-build-scripts": "^8.0.0-alpha.2",
-        "@blueprintjs/test-commons": "^2.0.0-alpha.2",
+        "@blueprintjs/karma-build-scripts": "^5.0.0-alpha.4",
+        "@blueprintjs/node-build-scripts": "^8.0.0-alpha.3",
+        "@blueprintjs/test-commons": "^2.0.0-alpha.3",
         "@testing-library/react": "^12.1.5",
@@ -79,0 +79,0 @@ "enzyme": "^3.11.0",

src/components/index.ts

@@ -106,5 +106,6 @@ /*
 export { TagInput, TagInputProps, TagInputAddMethod } from "./tag-input/tagInput";
-export { OverlayToaster, OverlayToasterProps } from "./toast/overlayToaster";
+export { OverlayToaster } from "./toast/overlayToaster";
+export type { OverlayToasterProps, ToasterPosition } from "./toast/overlayToasterProps";
 export { Toast, ToastProps } from "./toast/toast";
-export { Toaster, ToastOptions, ToasterPosition } from "./toast/toaster";
+export { Toaster, ToastOptions } from "./toast/toaster";
 export { TooltipProps, Tooltip } from "./tooltip/tooltip";
@@ -111,0 +112,0 @@ export { Tree, TreeProps } from "./tree/tree";

src/components/toast/toast.md

@@ -26,4 +26,4 @@ @# Toast
 
-The __OverlayToaster__ component is a stateful container for a single list of toasts. Internally, it
-uses the [Overlay](#core/components/overlay) component to manage children and transitions. It can be vertically
+The __OverlayToaster__ component (previously named __Toaster__) is a stateful container for a single list of toasts.
+Internally, it uses [__Overlay__](#core/components/overlay) to manage children and transitions. It can be vertically
 aligned along the top or bottom edge of its container (new toasts will slide in from that edge) and
@@ -34,5 +34,27 @@ horizontally aligned along the left edge, center, or right edge of its container.
 
-1. `OverlayToaster.create(props)` static method returns a new `Toaster` instance. Use the instance method `toaster.show()` to manipulate this instance. __(recommended)__
-1. `<OverlayToaster><Toast />...</OverlayToaster>`: Render a `<OverlayToaster>` element with React `children`.
-1. `<OverlayToaster ref={(ref: Toaster) => ref.show({ ...toast })} />`: Render a `<OverlayToaster>` element and use the `ref` prop to access its instance methods.
+1. __Recommended__: use the `OverlayToaster.create()` static method to create a new `Toaster` instance:
+    ```ts
+    const myToaster: Toaster = OverlayToaster.create({ position: "bottom" });
+    myToaster.show({ ...toastOptions });
+    ```
+2. Render an `<OverlayToaster>` with `<Toast>` children:
+    ```ts
+    render(
+        <OverlayToaster>
+            <Toast {...toastOptions} />
+        </OverlayToaster>,
+        targetElement,
+    );
+    ```
+3. Use a ref callback or object to access toaster instance methods.
+    - Example with ref callback:
+    ```ts
+    render(<OverlayToaster ref={(ref: Toaster | null) => ref?.show({ ...toastOptions })} />, targetElement);
+    ```
+    - Example with ref object (note that React type constraints require us to use the more specific `OverlayToaster` type):
+    ```ts
+    const myToaster = React.createRef<OverlayToaster>();
+    render(<OverlayToaster ref={myToaster} />, targetElement);
+    myToaster.current?.show({ ...toastOptions });
+    ```
 
@@ -39,0 +61,0 @@ <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">

src/components/toast/toaster.ts

@@ -17,14 +17,7 @@ /*
 
-import { Position } from "../../common";
-import { ToastProps } from "./toast";
+import { OverlayToaster } from "./overlayToaster";
+import type { OverlayToasterProps } from "./overlayToasterProps";
+import type { ToastProps } from "./toast";
 
 export type ToastOptions = ToastProps & { key: string };
-export type ToasterPosition =
-    | typeof Position.TOP
-    | typeof Position.TOP_LEFT
-    | typeof Position.TOP_RIGHT
-    | typeof Position.BOTTOM
-    | typeof Position.BOTTOM_LEFT
-    | typeof Position.BOTTOM_RIGHT;
-
 /** Instance methods available on a toaster component instance. */
@@ -49,3 +42,14 @@ export interface Toaster {
 
-/** @deprecated use `Toaster` type instead */
 export type ToasterInstance = Toaster;
+// merges with declaration of `Toaster` type in `toasterTypes.ts`
+// kept for backwards-compatibility with v4.x
+// eslint-disable-next-line @typescript-eslint/no-redeclare
+export const Toaster = {
+    // eslint-disable-next-line deprecation/deprecation
+    create: deprecatedToasterCreate,
+};
+
+/** @deprecated use OverlayToaster.create() instead */
+function deprecatedToasterCreate(props?: OverlayToasterProps, container = document.body): Toaster {
+    return OverlayToaster.create(props, container);
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

5570241

increased by0.24%

Number of package files

1492

increased by0.67%

Lines of code

80700

increased by0.28%

Dependency changes

• Updated@blueprintjs/colors@^5.0.0-alpha.3

• Updated@blueprintjs/icons@^5.0.0-alpha.4