Socket
Socket
Sign inDemoInstall

@blueprintjs/core

Package Overview
Dependencies
Maintainers
1
Versions
296
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@blueprintjs/core - npm Package Compare versions

Comparing version 4.18.0 to 4.19.0

dist/core.bundle.js

2

lib/cjs/common/errors.d.ts

@@ -45,2 +45,3 @@ export declare const CLAMP_MIN_MAX: string;

export declare const TOASTER_CREATE_NULL: string;
export declare const TOASTER_MAX_TOASTS_INVALID: string;
export declare const TOASTER_WARN_INLINE: string;

@@ -50,2 +51,1 @@ export declare const DIALOG_WARN_NO_HEADER_ICON: string;

export declare const DRAWER_ANGLE_POSITIONS_ARE_CASTED: string;
export declare const TOASTER_MAX_TOASTS_INVALID: string;

@@ -18,3 +18,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.TOASTER_MAX_TOASTS_INVALID = exports.DRAWER_ANGLE_POSITIONS_ARE_CASTED = exports.DIALOG_WARN_NO_HEADER_CLOSE_BUTTON = exports.DIALOG_WARN_NO_HEADER_ICON = exports.TOASTER_WARN_INLINE = exports.TOASTER_CREATE_NULL = exports.SPINNER_WARN_CLASSES_SIZE = exports.MULTISLIDER_WARN_LABEL_STEP_SIZE_LABEL_VALUES_MUTEX = exports.MULTISLIDER_INVALID_CHILD = exports.RANGESLIDER_NULL_VALUE = exports.SLIDER_MAX = exports.SLIDER_MIN = exports.SLIDER_ZERO_LABEL_STEP = exports.SLIDER_ZERO_STEP = exports.RADIOGROUP_WARN_CHILDREN_OPTIONS_MUTEX = exports.PORTAL_LEGACY_CONTEXT_API = exports.PORTAL_CONTEXT_CLASS_NAME_STRING = exports.POPOVER_WARN_UNCONTROLLED_ONINTERACTION = exports.POPOVER_WARN_PLACEMENT_AND_POSITION_MUTEX = exports.POPOVER_WARN_HAS_BACKDROP_INLINE = exports.POPOVER_WARN_EMPTY_CONTENT = exports.POPOVER_WARN_DOUBLE_TARGET = exports.POPOVER_WARN_DOUBLE_CONTENT = exports.POPOVER_WARN_TOO_MANY_CHILDREN = exports.POPOVER_HAS_BACKDROP_INTERACTION = exports.POPOVER_REQUIRES_TARGET = exports.OVERFLOW_LIST_OBSERVE_PARENTS_CHANGED = exports.PANEL_STACK_REQUIRES_PANEL = exports.PANEL_STACK_INITIAL_PANEL_STACK_MUTEX = exports.NUMERIC_INPUT_CONTROLLED_VALUE_INVALID = exports.NUMERIC_INPUT_STEP_SIZE_NON_POSITIVE = exports.NUMERIC_INPUT_MAJOR_STEP_SIZE_NON_POSITIVE = exports.NUMERIC_INPUT_MINOR_STEP_SIZE_NON_POSITIVE = exports.NUMERIC_INPUT_MAJOR_STEP_SIZE_BOUND = exports.NUMERIC_INPUT_MINOR_STEP_SIZE_BOUND = exports.NUMERIC_INPUT_MIN_MAX = exports.INPUT_WARN_LEFT_ELEMENT_LEFT_ICON_MUTEX = exports.HOTKEYS_TARGET2_CHILDREN_LOCAL_HOTKEYS = exports.HOTKEYS_PROVIDER_NOT_FOUND = exports.HOTKEYS_WARN_DECORATOR_NEEDS_REACT_ELEMENT = exports.HOTKEYS_WARN_DECORATOR_NO_METHOD = exports.HOTKEYS_HOTKEY_CHILDREN = exports.CONTEXTMENU_WARN_DECORATOR_NEEDS_REACT_ELEMENT = exports.CONTEXTMENU_WARN_DECORATOR_NO_METHOD = exports.COLLAPSIBLE_LIST_INVALID_CHILD = exports.ALERT_WARN_CANCEL_OUTSIDE_CLICK = exports.ALERT_WARN_CANCEL_ESCAPE_KEY = exports.ALERT_WARN_CANCEL_PROPS = exports.CLAMP_MIN_MAX = void 0;
exports.DRAWER_ANGLE_POSITIONS_ARE_CASTED = exports.DIALOG_WARN_NO_HEADER_CLOSE_BUTTON = exports.DIALOG_WARN_NO_HEADER_ICON = exports.TOASTER_WARN_INLINE = exports.TOASTER_MAX_TOASTS_INVALID = exports.TOASTER_CREATE_NULL = exports.SPINNER_WARN_CLASSES_SIZE = exports.MULTISLIDER_WARN_LABEL_STEP_SIZE_LABEL_VALUES_MUTEX = exports.MULTISLIDER_INVALID_CHILD = exports.RANGESLIDER_NULL_VALUE = exports.SLIDER_MAX = exports.SLIDER_MIN = exports.SLIDER_ZERO_LABEL_STEP = exports.SLIDER_ZERO_STEP = exports.RADIOGROUP_WARN_CHILDREN_OPTIONS_MUTEX = exports.PORTAL_LEGACY_CONTEXT_API = exports.PORTAL_CONTEXT_CLASS_NAME_STRING = exports.POPOVER_WARN_UNCONTROLLED_ONINTERACTION = exports.POPOVER_WARN_PLACEMENT_AND_POSITION_MUTEX = exports.POPOVER_WARN_HAS_BACKDROP_INLINE = exports.POPOVER_WARN_EMPTY_CONTENT = exports.POPOVER_WARN_DOUBLE_TARGET = exports.POPOVER_WARN_DOUBLE_CONTENT = exports.POPOVER_WARN_TOO_MANY_CHILDREN = exports.POPOVER_HAS_BACKDROP_INTERACTION = exports.POPOVER_REQUIRES_TARGET = exports.OVERFLOW_LIST_OBSERVE_PARENTS_CHANGED = exports.PANEL_STACK_REQUIRES_PANEL = exports.PANEL_STACK_INITIAL_PANEL_STACK_MUTEX = exports.NUMERIC_INPUT_CONTROLLED_VALUE_INVALID = exports.NUMERIC_INPUT_STEP_SIZE_NON_POSITIVE = exports.NUMERIC_INPUT_MAJOR_STEP_SIZE_NON_POSITIVE = exports.NUMERIC_INPUT_MINOR_STEP_SIZE_NON_POSITIVE = exports.NUMERIC_INPUT_MAJOR_STEP_SIZE_BOUND = exports.NUMERIC_INPUT_MINOR_STEP_SIZE_BOUND = exports.NUMERIC_INPUT_MIN_MAX = exports.INPUT_WARN_LEFT_ELEMENT_LEFT_ICON_MUTEX = exports.HOTKEYS_TARGET2_CHILDREN_LOCAL_HOTKEYS = exports.HOTKEYS_PROVIDER_NOT_FOUND = exports.HOTKEYS_WARN_DECORATOR_NEEDS_REACT_ELEMENT = exports.HOTKEYS_WARN_DECORATOR_NO_METHOD = exports.HOTKEYS_HOTKEY_CHILDREN = exports.CONTEXTMENU_WARN_DECORATOR_NEEDS_REACT_ELEMENT = exports.CONTEXTMENU_WARN_DECORATOR_NO_METHOD = exports.COLLAPSIBLE_LIST_INVALID_CHILD = exports.ALERT_WARN_CANCEL_OUTSIDE_CLICK = exports.ALERT_WARN_CANCEL_ESCAPE_KEY = exports.ALERT_WARN_CANCEL_PROPS = exports.CLAMP_MIN_MAX = void 0;
var ns = "[Blueprint]";

@@ -70,9 +70,9 @@ exports.CLAMP_MIN_MAX = ns + " clamp: max cannot be less than min";

exports.TOASTER_CREATE_NULL = ns +
" Toaster.create() is not supported inside React lifecycle methods in React 16." +
" OverlayToaster.create() is not supported inside React lifecycle methods in React 16." +
" See usage example on the docs site.";
exports.TOASTER_WARN_INLINE = ns + " Toaster.create() ignores inline prop as it always creates a new element.";
exports.TOASTER_MAX_TOASTS_INVALID = ns + " <OverlayToaster> maxToasts is set to an invalid number, must be greater than 0";
exports.TOASTER_WARN_INLINE = ns + " OverlayToaster.create() ignores inline prop as it always creates a new element.";
exports.DIALOG_WARN_NO_HEADER_ICON = ns + " <Dialog> iconName is ignored if title is omitted.";
exports.DIALOG_WARN_NO_HEADER_CLOSE_BUTTON = ns + " <Dialog> isCloseButtonShown prop is ignored if title is omitted.";
exports.DRAWER_ANGLE_POSITIONS_ARE_CASTED = ns + " <Drawer> all angle positions are casted into pure position (TOP, BOTTOM, LEFT or RIGHT)";
exports.TOASTER_MAX_TOASTS_INVALID = ns + " <Toaster> maxToasts is set to an invalid number, must be greater than 0";
//# sourceMappingURL=errors.js.map

@@ -23,3 +23,3 @@ "use strict";

var common_1 = require("../../common");
var keyCombo_1 = require("./keyCombo");
var keyComboTag_1 = require("./keyComboTag");
/**

@@ -40,3 +40,3 @@ * Hotkey component.

React.createElement("div", { className: common_1.Classes.HOTKEY_LABEL }, label),
React.createElement(keyCombo_1.KeyCombo, tslib_1.__assign({}, spreadableProps))));
React.createElement(keyComboTag_1.KeyComboTag, tslib_1.__assign({}, spreadableProps))));
};

@@ -43,0 +43,0 @@ Hotkey.prototype.validateProps = function (props) {

export * from "./hotkeysTypes";
export * from "./hotkeys";
export { Hotkey, IHotkeyProps } from "./hotkey";
export { KeyCombo, KeyComboTagProps, IKeyComboProps } from "./keyCombo";
export { KeyCombo, KeyComboTag, KeyComboTagProps, IKeyComboProps } from "./keyComboTag";
export { HotkeysTarget, IHotkeysTargetComponent } from "./hotkeysTarget";

@@ -6,0 +6,0 @@ export { IKeyCombo, comboMatches, getKeyCombo, getKeyComboString, parseKeyCombo } from "./hotkeyParser";

@@ -18,3 +18,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.HotkeysTarget2 = exports.HotkeysDialog2 = exports.setHotkeysDialogProps = exports.hideHotkeysDialog = exports.parseKeyCombo = exports.getKeyComboString = exports.getKeyCombo = exports.comboMatches = exports.HotkeysTarget = exports.KeyCombo = exports.Hotkey = void 0;
exports.HotkeysTarget2 = exports.HotkeysDialog2 = exports.setHotkeysDialogProps = exports.hideHotkeysDialog = exports.parseKeyCombo = exports.getKeyComboString = exports.getKeyCombo = exports.comboMatches = exports.HotkeysTarget = exports.KeyComboTag = exports.KeyCombo = exports.Hotkey = void 0;
var tslib_1 = require("tslib");

@@ -26,4 +26,5 @@ /* eslint-disable deprecation/deprecation */

Object.defineProperty(exports, "Hotkey", { enumerable: true, get: function () { return hotkey_1.Hotkey; } });
var keyCombo_1 = require("./keyCombo");
Object.defineProperty(exports, "KeyCombo", { enumerable: true, get: function () { return keyCombo_1.KeyCombo; } });
var keyComboTag_1 = require("./keyComboTag");
Object.defineProperty(exports, "KeyCombo", { enumerable: true, get: function () { return keyComboTag_1.KeyCombo; } });
Object.defineProperty(exports, "KeyComboTag", { enumerable: true, get: function () { return keyComboTag_1.KeyComboTag; } });
// eslint-disable-next-line import/no-cycle

@@ -30,0 +31,0 @@ var hotkeysTarget_1 = require("./hotkeysTarget");

@@ -80,2 +80,10 @@ import * as React from "react";

/**
* A list of DOM events which should be stopped from propagating through the Portal.
* This prop is ignored if `usePortal` is `false`.
*
* @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
* @see https://github.com/palantir/blueprint/issues/6124
*/
portalStopPropagationEvents?: Array<keyof HTMLElementEventMap>;
/**
* A callback that is invoked when user interaction causes the overlay to close, such as

@@ -82,0 +90,0 @@ * clicking on the overlay or pressing the `esc` key (if enabled).

@@ -259,3 +259,3 @@ "use strict";

if (usePortal) {
return (React.createElement(portal_1.Portal, { className: this.props.portalClassName, container: this.props.portalContainer }, transitionGroup));
return (React.createElement(portal_1.Portal, { className: this.props.portalClassName, container: this.props.portalContainer, stopPropagationEvents: this.props.portalStopPropagationEvents }, transitionGroup));
}

@@ -262,0 +262,0 @@ else {

@@ -19,2 +19,9 @@ import * as React from "react";

container?: HTMLElement;
/**
* A list of DOM events which should be stopped from propagating through this portal element.
*
* @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
* @see https://github.com/palantir/blueprint/issues/6124
*/
stopPropagationEvents?: Array<keyof HTMLElementEventMap>;
}

@@ -51,2 +58,4 @@ export interface IPortalState {

private createContainerElement;
private addStopPropagationListeners;
private removeStopPropagationListeners;
}

@@ -68,2 +68,3 @@ "use strict";

this.props.container.appendChild(this.portalElement);
this.addStopPropagationListeners(this.props.stopPropagationEvents);
/* eslint-disable-next-line react/no-did-mount-set-state */

@@ -78,5 +79,10 @@ this.setState({ hasMounted: true }, this.props.onChildrenMount);

}
if (this.portalElement != null && prevProps.stopPropagationEvents !== this.props.stopPropagationEvents) {
this.removeStopPropagationListeners(prevProps.stopPropagationEvents);
this.addStopPropagationListeners(this.props.stopPropagationEvents);
}
};
Portal.prototype.componentWillUnmount = function () {
var _a;
this.removeStopPropagationListeners(this.props.stopPropagationEvents);
(_a = this.portalElement) === null || _a === void 0 ? void 0 : _a.remove();

@@ -93,2 +99,10 @@ };

};
Portal.prototype.addStopPropagationListeners = function (eventNames) {
var _this = this;
eventNames === null || eventNames === void 0 ? void 0 : eventNames.forEach(function (event) { var _a; return (_a = _this.portalElement) === null || _a === void 0 ? void 0 : _a.addEventListener(event, handleStopProgation); });
};
Portal.prototype.removeStopPropagationListeners = function (events) {
var _this = this;
events === null || events === void 0 ? void 0 : events.forEach(function (event) { var _a; return (_a = _this.portalElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, handleStopProgation); });
};
Portal.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Portal");

@@ -112,2 +126,5 @@ Portal.contextTypes = REACT_CONTEXT_TYPES;

}
function handleStopProgation(e) {
e.stopPropagation();
}
//# sourceMappingURL=portal.js.map

@@ -11,3 +11,3 @@ import * as React from "react";

export declare type IToaster = ToasterInstance;
/** Public API methods available on a `<Toaster>` component instance. */
/** Public API methods available on a `<OverlayToaster>` component instance. */
export interface ToasterInstance {

@@ -28,6 +28,7 @@ /**

/**
* Props supported by the `<Toaster>` component.
* These props can be passed as an argument to the static `Toaster.create(props?, container?)` method.
* Props supported by the `OverlayToaster` component.
*
* These props can be passed as an argument to the static `OverlayToaster.create(props?, container?)` method.
*/
export interface IToasterProps extends Props {
export interface OverlayToasterProps extends Props {
/**

@@ -53,3 +54,3 @@ * Whether a toast should acquire application focus when it first opens.

*
* This prop is ignored by `Toaster.create()` as that method always appends a new element
* This prop is ignored by `OverlayToaster.create()` as that method always appends a new element
* to the container.

@@ -79,9 +80,9 @@ *

/**
* Toaster component.
* Default Toaster component which renders toasts inside an Overlay.
*
* @see https://blueprintjs.com/docs/#core/components/toast.toaster
*/
export declare class Toaster extends AbstractPureComponent2<IToasterProps, IToasterState> implements ToasterInstance {
export declare class OverlayToaster extends AbstractPureComponent2<OverlayToasterProps, IToasterState> implements ToasterInstance {
static displayName: string;
static defaultProps: IToasterProps;
static defaultProps: OverlayToasterProps;
/**

@@ -91,3 +92,3 @@ * Create a new `Toaster` instance that can be shared around your application.

*/
static create(props?: IToasterProps, container?: HTMLElement): ToasterInstance;
static create(props?: OverlayToasterProps, container?: HTMLElement): ToasterInstance;
state: IToasterState;

@@ -100,3 +101,3 @@ private toastId;

render(): JSX.Element;
protected validateProps({ maxToasts }: IToasterProps): void;
protected validateProps({ maxToasts }: OverlayToasterProps): void;
private isNewToastKey;

@@ -110,3 +111,7 @@ private dismissIfAtLimit;

}
export declare const OverlayToaster: typeof Toaster;
export declare type OverlayToasterProps = IToasterProps;
/** @deprecated use the new, more specific component name `OverlayToaster` instead (forwards-compatible with v5) */
export declare const Toaster: typeof OverlayToaster;
/** @deprecated use the new, more specific type `ToasterInstance` instead (forwards-compatible with v5) */
export declare type Toaster = ToasterInstance;
/** @deprecated use `OverlayToasterProps` instead */
export declare type IToasterProps = OverlayToasterProps;

@@ -18,3 +18,3 @@ "use strict";

Object.defineProperty(exports, "__esModule", { value: true });
exports.OverlayToaster = exports.Toaster = void 0;
exports.Toaster = exports.OverlayToaster = void 0;
var tslib_1 = require("tslib");

@@ -32,9 +32,9 @@ var classnames_1 = tslib_1.__importDefault(require("classnames"));

/**
* Toaster component.
* Default Toaster component which renders toasts inside an Overlay.
*
* @see https://blueprintjs.com/docs/#core/components/toast.toaster
*/
var Toaster = /** @class */ (function (_super) {
tslib_1.__extends(Toaster, _super);
function Toaster() {
var OverlayToaster = /** @class */ (function (_super) {
tslib_1.__extends(OverlayToaster, _super);
function OverlayToaster() {
var _this = _super !== null && _super.apply(this, arguments) || this;

@@ -66,3 +66,3 @@ _this.state = {

*/
Toaster.create = function (props, container) {
OverlayToaster.create = function (props, container) {
if (container === void 0) { container = document.body; }

@@ -74,3 +74,3 @@ if (props != null && props.usePortal != null && !(0, utils_1.isNodeEnv)("production")) {

container.appendChild(containerElement);
var toaster = ReactDOM.render(React.createElement(Toaster, tslib_1.__assign({}, props, { usePortal: false })), containerElement);
var toaster = ReactDOM.render(React.createElement(OverlayToaster, tslib_1.__assign({}, props, { usePortal: false })), containerElement);
if (toaster == null) {

@@ -81,3 +81,3 @@ throw new Error(errors_1.TOASTER_CREATE_NULL);

};
Toaster.prototype.show = function (props, key) {
OverlayToaster.prototype.show = function (props, key) {
if (this.props.maxToasts) {

@@ -100,3 +100,3 @@ // check if active number of toasts are at the maxToasts limit

};
Toaster.prototype.dismiss = function (key, timeoutExpired) {
OverlayToaster.prototype.dismiss = function (key, timeoutExpired) {
if (timeoutExpired === void 0) { timeoutExpired = false; }

@@ -117,10 +117,10 @@ this.setState(function (_a) {

};
Toaster.prototype.clear = function () {
OverlayToaster.prototype.clear = function () {
this.state.toasts.forEach(function (t) { var _a; return (_a = t.onDismiss) === null || _a === void 0 ? void 0 : _a.call(t, false); });
this.setState({ toasts: [] });
};
Toaster.prototype.getToasts = function () {
OverlayToaster.prototype.getToasts = function () {
return this.state.toasts;
};
Toaster.prototype.render = function () {
OverlayToaster.prototype.render = function () {
var classes = (0, classnames_1.default)(common_1.Classes.TOAST_CONTAINER, this.getPositionClasses(), this.props.className);

@@ -133,3 +133,3 @@ return (React.createElement(overlay_1.Overlay, { autoFocus: this.props.autoFocus, canEscapeKeyClose: this.props.canEscapeKeyClear, canOutsideClickClose: false, className: classes, enforceFocus: false, hasBackdrop: false, isOpen: this.state.toasts.length > 0 || this.props.children != null, onClose: this.handleClose, shouldReturnFocusOnClose: false,

};
Toaster.prototype.validateProps = function (_a) {
OverlayToaster.prototype.validateProps = function (_a) {
var maxToasts = _a.maxToasts;

@@ -141,6 +141,6 @@ // maximum number of toasts should not be a number less than 1

};
Toaster.prototype.isNewToastKey = function (key) {
OverlayToaster.prototype.isNewToastKey = function (key) {
return this.state.toasts.every(function (toast) { return toast.key !== key; });
};
Toaster.prototype.dismissIfAtLimit = function () {
OverlayToaster.prototype.dismissIfAtLimit = function () {
if (this.state.toasts.length === this.props.maxToasts) {

@@ -151,3 +151,3 @@ // dismiss the oldest toast to stay within the maxToasts limit

};
Toaster.prototype.createToastOptions = function (props, key) {
OverlayToaster.prototype.createToastOptions = function (props, key) {
if (key === void 0) { key = "toast-".concat(this.toastId++); }

@@ -157,3 +157,3 @@ // clone the object before adding the key prop to avoid leaking the mutation

};
Toaster.prototype.getPositionClasses = function () {
OverlayToaster.prototype.getPositionClasses = function () {
var positions = this.props.position.split("-");

@@ -165,4 +165,4 @@ // NOTE that there is no -center class because that's the default style

};
Toaster.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Toaster");
Toaster.defaultProps = {
OverlayToaster.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".OverlayToaster");
OverlayToaster.defaultProps = {
autoFocus: false,

@@ -173,6 +173,9 @@ canEscapeKeyClear: true,

};
return Toaster;
return OverlayToaster;
}(common_1.AbstractPureComponent2));
exports.Toaster = Toaster;
exports.OverlayToaster = Toaster;
exports.OverlayToaster = OverlayToaster;
/** @deprecated use the new, more specific component name `OverlayToaster` instead (forwards-compatible with v5) */
exports.Toaster = OverlayToaster;
// eslint-disable-next-line deprecation/deprecation
exports.Toaster.displayName = "".concat(props_1.DISPLAYNAME_PREFIX, ".Toaster");
//# sourceMappingURL=toaster.js.map

@@ -45,2 +45,3 @@ export declare const CLAMP_MIN_MAX: string;

export declare const TOASTER_CREATE_NULL: string;
export declare const TOASTER_MAX_TOASTS_INVALID: string;
export declare const TOASTER_WARN_INLINE: string;

@@ -50,2 +51,1 @@ export declare const DIALOG_WARN_NO_HEADER_ICON: string;

export declare const DRAWER_ANGLE_POSITIONS_ARE_CASTED: string;
export declare const TOASTER_MAX_TOASTS_INVALID: string;

@@ -66,9 +66,9 @@ /*

export var TOASTER_CREATE_NULL = ns +
" Toaster.create() is not supported inside React lifecycle methods in React 16." +
" OverlayToaster.create() is not supported inside React lifecycle methods in React 16." +
" See usage example on the docs site.";
export var TOASTER_WARN_INLINE = ns + " Toaster.create() ignores inline prop as it always creates a new element.";
export var TOASTER_MAX_TOASTS_INVALID = ns + " <OverlayToaster> maxToasts is set to an invalid number, must be greater than 0";
export var TOASTER_WARN_INLINE = ns + " OverlayToaster.create() ignores inline prop as it always creates a new element.";
export var DIALOG_WARN_NO_HEADER_ICON = ns + " <Dialog> iconName is ignored if title is omitted.";
export var DIALOG_WARN_NO_HEADER_CLOSE_BUTTON = ns + " <Dialog> isCloseButtonShown prop is ignored if title is omitted.";
export var DRAWER_ANGLE_POSITIONS_ARE_CASTED = ns + " <Drawer> all angle positions are casted into pure position (TOP, BOTTOM, LEFT or RIGHT)";
export var TOASTER_MAX_TOASTS_INVALID = ns + " <Toaster> maxToasts is set to an invalid number, must be greater than 0";
//# sourceMappingURL=errors.js.map

@@ -20,3 +20,3 @@ /*

import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX } from "../../common";
import { KeyCombo } from "./keyCombo";
import { KeyComboTag } from "./keyComboTag";
/**

@@ -37,3 +37,3 @@ * Hotkey component.

React.createElement("div", { className: Classes.HOTKEY_LABEL }, label),
React.createElement(KeyCombo, __assign({}, spreadableProps))));
React.createElement(KeyComboTag, __assign({}, spreadableProps))));
};

@@ -40,0 +40,0 @@ Hotkey.prototype.validateProps = function (props) {

export * from "./hotkeysTypes";
export * from "./hotkeys";
export { Hotkey, IHotkeyProps } from "./hotkey";
export { KeyCombo, KeyComboTagProps, IKeyComboProps } from "./keyCombo";
export { KeyCombo, KeyComboTag, KeyComboTagProps, IKeyComboProps } from "./keyComboTag";
export { HotkeysTarget, IHotkeysTargetComponent } from "./hotkeysTarget";

@@ -6,0 +6,0 @@ export { IKeyCombo, comboMatches, getKeyCombo, getKeyComboString, parseKeyCombo } from "./hotkeyParser";

@@ -20,3 +20,3 @@ /*

export { Hotkey } from "./hotkey";
export { KeyCombo } from "./keyCombo";
export { KeyCombo, KeyComboTag } from "./keyComboTag";
// eslint-disable-next-line import/no-cycle

@@ -23,0 +23,0 @@ export { HotkeysTarget } from "./hotkeysTarget";

@@ -80,2 +80,10 @@ import * as React from "react";

/**
* A list of DOM events which should be stopped from propagating through the Portal.
* This prop is ignored if `usePortal` is `false`.
*
* @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
* @see https://github.com/palantir/blueprint/issues/6124
*/
portalStopPropagationEvents?: Array<keyof HTMLElementEventMap>;
/**
* A callback that is invoked when user interaction causes the overlay to close, such as

@@ -82,0 +90,0 @@ * clicking on the overlay or pressing the `esc` key (if enabled).

@@ -256,3 +256,3 @@ /*

if (usePortal) {
return (React.createElement(Portal, { className: this.props.portalClassName, container: this.props.portalContainer }, transitionGroup));
return (React.createElement(Portal, { className: this.props.portalClassName, container: this.props.portalContainer, stopPropagationEvents: this.props.portalStopPropagationEvents }, transitionGroup));
}

@@ -259,0 +259,0 @@ else {

@@ -19,2 +19,9 @@ import * as React from "react";

container?: HTMLElement;
/**
* A list of DOM events which should be stopped from propagating through this portal element.
*
* @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
* @see https://github.com/palantir/blueprint/issues/6124
*/
stopPropagationEvents?: Array<keyof HTMLElementEventMap>;
}

@@ -51,2 +58,4 @@ export interface IPortalState {

private createContainerElement;
private addStopPropagationListeners;
private removeStopPropagationListeners;
}

@@ -65,2 +65,3 @@ /*

this.props.container.appendChild(this.portalElement);
this.addStopPropagationListeners(this.props.stopPropagationEvents);
/* eslint-disable-next-line react/no-did-mount-set-state */

@@ -75,5 +76,10 @@ this.setState({ hasMounted: true }, this.props.onChildrenMount);

}
if (this.portalElement != null && prevProps.stopPropagationEvents !== this.props.stopPropagationEvents) {
this.removeStopPropagationListeners(prevProps.stopPropagationEvents);
this.addStopPropagationListeners(this.props.stopPropagationEvents);
}
};
Portal.prototype.componentWillUnmount = function () {
var _a;
this.removeStopPropagationListeners(this.props.stopPropagationEvents);
(_a = this.portalElement) === null || _a === void 0 ? void 0 : _a.remove();

@@ -90,2 +96,10 @@ };

};
Portal.prototype.addStopPropagationListeners = function (eventNames) {
var _this = this;
eventNames === null || eventNames === void 0 ? void 0 : eventNames.forEach(function (event) { var _a; return (_a = _this.portalElement) === null || _a === void 0 ? void 0 : _a.addEventListener(event, handleStopProgation); });
};
Portal.prototype.removeStopPropagationListeners = function (events) {
var _this = this;
events === null || events === void 0 ? void 0 : events.forEach(function (event) { var _a; return (_a = _this.portalElement) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, handleStopProgation); });
};
Portal.displayName = "".concat(DISPLAYNAME_PREFIX, ".Portal");

@@ -109,2 +123,5 @@ Portal.contextTypes = REACT_CONTEXT_TYPES;

}
function handleStopProgation(e) {
e.stopPropagation();
}
//# sourceMappingURL=portal.js.map

@@ -11,3 +11,3 @@ import * as React from "react";

export declare type IToaster = ToasterInstance;
/** Public API methods available on a `<Toaster>` component instance. */
/** Public API methods available on a `<OverlayToaster>` component instance. */
export interface ToasterInstance {

@@ -28,6 +28,7 @@ /**

/**
* Props supported by the `<Toaster>` component.
* These props can be passed as an argument to the static `Toaster.create(props?, container?)` method.
* Props supported by the `OverlayToaster` component.
*
* These props can be passed as an argument to the static `OverlayToaster.create(props?, container?)` method.
*/
export interface IToasterProps extends Props {
export interface OverlayToasterProps extends Props {
/**

@@ -53,3 +54,3 @@ * Whether a toast should acquire application focus when it first opens.

*
* This prop is ignored by `Toaster.create()` as that method always appends a new element
* This prop is ignored by `OverlayToaster.create()` as that method always appends a new element
* to the container.

@@ -79,9 +80,9 @@ *

/**
* Toaster component.
* Default Toaster component which renders toasts inside an Overlay.
*
* @see https://blueprintjs.com/docs/#core/components/toast.toaster
*/
export declare class Toaster extends AbstractPureComponent2<IToasterProps, IToasterState> implements ToasterInstance {
export declare class OverlayToaster extends AbstractPureComponent2<OverlayToasterProps, IToasterState> implements ToasterInstance {
static displayName: string;
static defaultProps: IToasterProps;
static defaultProps: OverlayToasterProps;
/**

@@ -91,3 +92,3 @@ * Create a new `Toaster` instance that can be shared around your application.

*/
static create(props?: IToasterProps, container?: HTMLElement): ToasterInstance;
static create(props?: OverlayToasterProps, container?: HTMLElement): ToasterInstance;
state: IToasterState;

@@ -100,3 +101,3 @@ private toastId;

render(): JSX.Element;
protected validateProps({ maxToasts }: IToasterProps): void;
protected validateProps({ maxToasts }: OverlayToasterProps): void;
private isNewToastKey;

@@ -110,3 +111,7 @@ private dismissIfAtLimit;

}
export declare const OverlayToaster: typeof Toaster;
export declare type OverlayToasterProps = IToasterProps;
/** @deprecated use the new, more specific component name `OverlayToaster` instead (forwards-compatible with v5) */
export declare const Toaster: typeof OverlayToaster;
/** @deprecated use the new, more specific type `ToasterInstance` instead (forwards-compatible with v5) */
export declare type Toaster = ToasterInstance;
/** @deprecated use `OverlayToasterProps` instead */
export declare type IToasterProps = OverlayToasterProps;

@@ -28,9 +28,9 @@ /*

/**
* Toaster component.
* Default Toaster component which renders toasts inside an Overlay.
*
* @see https://blueprintjs.com/docs/#core/components/toast.toaster
*/
var Toaster = /** @class */ (function (_super) {
__extends(Toaster, _super);
function Toaster() {
var OverlayToaster = /** @class */ (function (_super) {
__extends(OverlayToaster, _super);
function OverlayToaster() {
var _this = _super !== null && _super.apply(this, arguments) || this;

@@ -62,3 +62,3 @@ _this.state = {

*/
Toaster.create = function (props, container) {
OverlayToaster.create = function (props, container) {
if (container === void 0) { container = document.body; }

@@ -70,3 +70,3 @@ if (props != null && props.usePortal != null && !isNodeEnv("production")) {

container.appendChild(containerElement);
var toaster = ReactDOM.render(React.createElement(Toaster, __assign({}, props, { usePortal: false })), containerElement);
var toaster = ReactDOM.render(React.createElement(OverlayToaster, __assign({}, props, { usePortal: false })), containerElement);
if (toaster == null) {

@@ -77,3 +77,3 @@ throw new Error(TOASTER_CREATE_NULL);

};
Toaster.prototype.show = function (props, key) {
OverlayToaster.prototype.show = function (props, key) {
if (this.props.maxToasts) {

@@ -96,3 +96,3 @@ // check if active number of toasts are at the maxToasts limit

};
Toaster.prototype.dismiss = function (key, timeoutExpired) {
OverlayToaster.prototype.dismiss = function (key, timeoutExpired) {
if (timeoutExpired === void 0) { timeoutExpired = false; }

@@ -113,10 +113,10 @@ this.setState(function (_a) {

};
Toaster.prototype.clear = function () {
OverlayToaster.prototype.clear = function () {
this.state.toasts.forEach(function (t) { var _a; return (_a = t.onDismiss) === null || _a === void 0 ? void 0 : _a.call(t, false); });
this.setState({ toasts: [] });
};
Toaster.prototype.getToasts = function () {
OverlayToaster.prototype.getToasts = function () {
return this.state.toasts;
};
Toaster.prototype.render = function () {
OverlayToaster.prototype.render = function () {
var classes = classNames(Classes.TOAST_CONTAINER, this.getPositionClasses(), this.props.className);

@@ -129,3 +129,3 @@ return (React.createElement(Overlay, { autoFocus: this.props.autoFocus, canEscapeKeyClose: this.props.canEscapeKeyClear, canOutsideClickClose: false, className: classes, enforceFocus: false, hasBackdrop: false, isOpen: this.state.toasts.length > 0 || this.props.children != null, onClose: this.handleClose, shouldReturnFocusOnClose: false,

};
Toaster.prototype.validateProps = function (_a) {
OverlayToaster.prototype.validateProps = function (_a) {
var maxToasts = _a.maxToasts;

@@ -137,6 +137,6 @@ // maximum number of toasts should not be a number less than 1

};
Toaster.prototype.isNewToastKey = function (key) {
OverlayToaster.prototype.isNewToastKey = function (key) {
return this.state.toasts.every(function (toast) { return toast.key !== key; });
};
Toaster.prototype.dismissIfAtLimit = function () {
OverlayToaster.prototype.dismissIfAtLimit = function () {
if (this.state.toasts.length === this.props.maxToasts) {

@@ -147,3 +147,3 @@ // dismiss the oldest toast to stay within the maxToasts limit

};
Toaster.prototype.createToastOptions = function (props, key) {
OverlayToaster.prototype.createToastOptions = function (props, key) {
if (key === void 0) { key = "toast-".concat(this.toastId++); }

@@ -153,3 +153,3 @@ // clone the object before adding the key prop to avoid leaking the mutation

};
Toaster.prototype.getPositionClasses = function () {
OverlayToaster.prototype.getPositionClasses = function () {
var positions = this.props.position.split("-");

@@ -161,4 +161,4 @@ // NOTE that there is no -center class because that's the default style

};
Toaster.displayName = "".concat(DISPLAYNAME_PREFIX, ".Toaster");
Toaster.defaultProps = {
OverlayToaster.displayName = "".concat(DISPLAYNAME_PREFIX, ".OverlayToaster");
OverlayToaster.defaultProps = {
autoFocus: false,

@@ -169,6 +169,9 @@ canEscapeKeyClear: true,

};
return Toaster;
return OverlayToaster;
}(AbstractPureComponent2));
export { Toaster };
export var OverlayToaster = Toaster;
export { OverlayToaster };
/** @deprecated use the new, more specific component name `OverlayToaster` instead (forwards-compatible with v5) */
export var Toaster = OverlayToaster;
// eslint-disable-next-line deprecation/deprecation
Toaster.displayName = "".concat(DISPLAYNAME_PREFIX, ".Toaster");
//# sourceMappingURL=toaster.js.map

@@ -45,2 +45,3 @@ export declare const CLAMP_MIN_MAX: string;

export declare const TOASTER_CREATE_NULL: string;
export declare const TOASTER_MAX_TOASTS_INVALID: string;
export declare const TOASTER_WARN_INLINE: string;

@@ -50,2 +51,1 @@ export declare const DIALOG_WARN_NO_HEADER_ICON: string;

export declare const DRAWER_ANGLE_POSITIONS_ARE_CASTED: string;
export declare const TOASTER_MAX_TOASTS_INVALID: string;

@@ -66,9 +66,9 @@ /*

export const TOASTER_CREATE_NULL = ns +
` Toaster.create() is not supported inside React lifecycle methods in React 16.` +
` OverlayToaster.create() is not supported inside React lifecycle methods in React 16.` +
` See usage example on the docs site.`;
export const TOASTER_WARN_INLINE = ns + ` Toaster.create() ignores inline prop as it always creates a new element.`;
export const TOASTER_MAX_TOASTS_INVALID = ns + ` <OverlayToaster> maxToasts is set to an invalid number, must be greater than 0`;
export const TOASTER_WARN_INLINE = ns + ` OverlayToaster.create() ignores inline prop as it always creates a new element.`;
export const DIALOG_WARN_NO_HEADER_ICON = ns + ` <Dialog> iconName is ignored if title is omitted.`;
export const DIALOG_WARN_NO_HEADER_CLOSE_BUTTON = ns + ` <Dialog> isCloseButtonShown prop is ignored if title is omitted.`;
export const DRAWER_ANGLE_POSITIONS_ARE_CASTED = ns + ` <Drawer> all angle positions are casted into pure position (TOP, BOTTOM, LEFT or RIGHT)`;
export const TOASTER_MAX_TOASTS_INVALID = ns + ` <Toaster> maxToasts is set to an invalid number, must be greater than 0`;
//# sourceMappingURL=errors.js.map

@@ -19,3 +19,3 @@ /*

import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX } from "../../common";
import { KeyCombo } from "./keyCombo";
import { KeyComboTag } from "./keyComboTag";
/**

@@ -40,3 +40,3 @@ * Hotkey component.

React.createElement("div", { className: Classes.HOTKEY_LABEL }, label),
React.createElement(KeyCombo, { ...spreadableProps })));
React.createElement(KeyComboTag, { ...spreadableProps })));
}

@@ -43,0 +43,0 @@ validateProps(props) {

export * from "./hotkeysTypes";
export * from "./hotkeys";
export { Hotkey, IHotkeyProps } from "./hotkey";
export { KeyCombo, KeyComboTagProps, IKeyComboProps } from "./keyCombo";
export { KeyCombo, KeyComboTag, KeyComboTagProps, IKeyComboProps } from "./keyComboTag";
export { HotkeysTarget, IHotkeysTargetComponent } from "./hotkeysTarget";

@@ -6,0 +6,0 @@ export { IKeyCombo, comboMatches, getKeyCombo, getKeyComboString, parseKeyCombo } from "./hotkeyParser";

@@ -20,3 +20,3 @@ /*

export { Hotkey } from "./hotkey";
export { KeyCombo } from "./keyCombo";
export { KeyCombo, KeyComboTag } from "./keyComboTag";
// eslint-disable-next-line import/no-cycle

@@ -23,0 +23,0 @@ export { HotkeysTarget } from "./hotkeysTarget";

@@ -80,2 +80,10 @@ import * as React from "react";

/**
* A list of DOM events which should be stopped from propagating through the Portal.
* This prop is ignored if `usePortal` is `false`.
*
* @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
* @see https://github.com/palantir/blueprint/issues/6124
*/
portalStopPropagationEvents?: Array<keyof HTMLElementEventMap>;
/**
* A callback that is invoked when user interaction causes the overlay to close, such as

@@ -82,0 +90,0 @@ * clicking on the overlay or pressing the `esc` key (if enabled).

@@ -106,3 +106,3 @@ /*

if (usePortal) {
return (React.createElement(Portal, { className: this.props.portalClassName, container: this.props.portalContainer }, transitionGroup));
return (React.createElement(Portal, { className: this.props.portalClassName, container: this.props.portalContainer, stopPropagationEvents: this.props.portalStopPropagationEvents }, transitionGroup));
}

@@ -109,0 +109,0 @@ else {

@@ -19,2 +19,9 @@ import * as React from "react";

container?: HTMLElement;
/**
* A list of DOM events which should be stopped from propagating through this portal element.
*
* @see https://legacy.reactjs.org/docs/portals.html#event-bubbling-through-portals
* @see https://github.com/palantir/blueprint/issues/6124
*/
stopPropagationEvents?: Array<keyof HTMLElementEventMap>;
}

@@ -51,2 +58,4 @@ export interface IPortalState {

private createContainerElement;
private addStopPropagationListeners;
private removeStopPropagationListeners;
}

@@ -64,2 +64,3 @@ /*

this.props.container.appendChild(this.portalElement);
this.addStopPropagationListeners(this.props.stopPropagationEvents);
/* eslint-disable-next-line react/no-did-mount-set-state */

@@ -74,4 +75,9 @@ this.setState({ hasMounted: true }, this.props.onChildrenMount);

}
if (this.portalElement != null && prevProps.stopPropagationEvents !== this.props.stopPropagationEvents) {
this.removeStopPropagationListeners(prevProps.stopPropagationEvents);
this.addStopPropagationListeners(this.props.stopPropagationEvents);
}
}
componentWillUnmount() {
this.removeStopPropagationListeners(this.props.stopPropagationEvents);
this.portalElement?.remove();

@@ -88,2 +94,8 @@ }

}
addStopPropagationListeners(eventNames) {
eventNames?.forEach(event => this.portalElement?.addEventListener(event, handleStopProgation));
}
removeStopPropagationListeners(events) {
events?.forEach(event => this.portalElement?.removeEventListener(event, handleStopProgation));
}
}

@@ -100,2 +112,5 @@ function maybeRemoveClass(classList, className) {

}
function handleStopProgation(e) {
e.stopPropagation();
}
//# sourceMappingURL=portal.js.map

@@ -11,3 +11,3 @@ import * as React from "react";

export declare type IToaster = ToasterInstance;
/** Public API methods available on a `<Toaster>` component instance. */
/** Public API methods available on a `<OverlayToaster>` component instance. */
export interface ToasterInstance {

@@ -28,6 +28,7 @@ /**

/**
* Props supported by the `<Toaster>` component.
* These props can be passed as an argument to the static `Toaster.create(props?, container?)` method.
* Props supported by the `OverlayToaster` component.
*
* These props can be passed as an argument to the static `OverlayToaster.create(props?, container?)` method.
*/
export interface IToasterProps extends Props {
export interface OverlayToasterProps extends Props {
/**

@@ -53,3 +54,3 @@ * Whether a toast should acquire application focus when it first opens.

*
* This prop is ignored by `Toaster.create()` as that method always appends a new element
* This prop is ignored by `OverlayToaster.create()` as that method always appends a new element
* to the container.

@@ -79,9 +80,9 @@ *

/**
* Toaster component.
* Default Toaster component which renders toasts inside an Overlay.
*
* @see https://blueprintjs.com/docs/#core/components/toast.toaster
*/
export declare class Toaster extends AbstractPureComponent2<IToasterProps, IToasterState> implements ToasterInstance {
export declare class OverlayToaster extends AbstractPureComponent2<OverlayToasterProps, IToasterState> implements ToasterInstance {
static displayName: string;
static defaultProps: IToasterProps;
static defaultProps: OverlayToasterProps;
/**

@@ -91,3 +92,3 @@ * Create a new `Toaster` instance that can be shared around your application.

*/
static create(props?: IToasterProps, container?: HTMLElement): ToasterInstance;
static create(props?: OverlayToasterProps, container?: HTMLElement): ToasterInstance;
state: IToasterState;

@@ -100,3 +101,3 @@ private toastId;

render(): JSX.Element;
protected validateProps({ maxToasts }: IToasterProps): void;
protected validateProps({ maxToasts }: OverlayToasterProps): void;
private isNewToastKey;

@@ -110,3 +111,7 @@ private dismissIfAtLimit;

}
export declare const OverlayToaster: typeof Toaster;
export declare type OverlayToasterProps = IToasterProps;
/** @deprecated use the new, more specific component name `OverlayToaster` instead (forwards-compatible with v5) */
export declare const Toaster: typeof OverlayToaster;
/** @deprecated use the new, more specific type `ToasterInstance` instead (forwards-compatible with v5) */
export declare type Toaster = ToasterInstance;
/** @deprecated use `OverlayToasterProps` instead */
export declare type IToasterProps = OverlayToasterProps;

@@ -27,8 +27,8 @@ /*

/**
* Toaster component.
* Default Toaster component which renders toasts inside an Overlay.
*
* @see https://blueprintjs.com/docs/#core/components/toast.toaster
*/
export class Toaster extends AbstractPureComponent2 {
static displayName = `${DISPLAYNAME_PREFIX}.Toaster`;
export class OverlayToaster extends AbstractPureComponent2 {
static displayName = `${DISPLAYNAME_PREFIX}.OverlayToaster`;
static defaultProps = {

@@ -50,3 +50,3 @@ autoFocus: false,

container.appendChild(containerElement);
const toaster = ReactDOM.render(React.createElement(Toaster, { ...props, usePortal: false }), containerElement);
const toaster = ReactDOM.render(React.createElement(OverlayToaster, { ...props, usePortal: false }), containerElement);
if (toaster == null) {

@@ -148,3 +148,6 @@ throw new Error(TOASTER_CREATE_NULL);

}
export const OverlayToaster = Toaster;
/** @deprecated use the new, more specific component name `OverlayToaster` instead (forwards-compatible with v5) */
export const Toaster = OverlayToaster;
// eslint-disable-next-line deprecation/deprecation
Toaster.displayName = `${DISPLAYNAME_PREFIX}.Toaster`;
//# sourceMappingURL=toaster.js.map
{
"name": "@blueprintjs/core",
"version": "4.18.0",
"version": "4.19.0",
"description": "Core styles & components",

@@ -11,2 +11,8 @@ "main": "lib/cjs/index.js",

"unpkg": "dist/core.bundle.js",
"files": [
"dist",
"lib",
"scripts",
"src"
],
"sideEffects": [

@@ -73,3 +79,3 @@ "**/*.css",

"devDependencies": {
"@blueprintjs/karma-build-scripts": "^4.0.19",
"@blueprintjs/karma-build-scripts": "^4.0.20",
"@blueprintjs/node-build-scripts": "^7.1.1",

@@ -76,0 +82,0 @@ "@blueprintjs/test-commons": "^1.1.16",

@@ -108,5 +108,8 @@ /*

ns +
` Toaster.create() is not supported inside React lifecycle methods in React 16.` +
` OverlayToaster.create() is not supported inside React lifecycle methods in React 16.` +
` See usage example on the docs site.`;
export const TOASTER_WARN_INLINE = ns + ` Toaster.create() ignores inline prop as it always creates a new element.`;
export const TOASTER_MAX_TOASTS_INVALID =
ns + ` <OverlayToaster> maxToasts is set to an invalid number, must be greater than 0`;
export const TOASTER_WARN_INLINE =
ns + ` OverlayToaster.create() ignores inline prop as it always creates a new element.`;

@@ -119,4 +122,1 @@ export const DIALOG_WARN_NO_HEADER_ICON = ns + ` <Dialog> iconName is ignored if title is omitted.`;

ns + ` <Drawer> all angle positions are casted into pure position (TOP, BOTTOM, LEFT or RIGHT)`;
export const TOASTER_MAX_TOASTS_INVALID =
ns + ` <Toaster> maxToasts is set to an invalid number, must be greater than 0`;

@@ -22,3 +22,3 @@ /*

export { Hotkey, IHotkeyProps } from "./hotkey";
export { KeyCombo, KeyComboTagProps, IKeyComboProps } from "./keyCombo";
export { KeyCombo, KeyComboTag, KeyComboTagProps, IKeyComboProps } from "./keyComboTag";
// eslint-disable-next-line import/no-cycle

@@ -25,0 +25,0 @@ export { HotkeysTarget, IHotkeysTargetComponent } from "./hotkeysTarget";

@@ -24,14 +24,14 @@ @# Toast

@### Toaster
@### OverlayToaster
The `Toaster` React component 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
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
aligned along the top or bottom edge of its container (new toasts will slide in from that edge) and
horizontally aligned along the left edge, center, or right edge of its container.
There are three ways to use the `Toaster` component:
There are three ways to use __OverlayToaster__:
1. `Toaster.create(props)` static method returns a new `ToasterInstance` instance. Use the instance method `toaster.show()` to manipulate this instance. __(recommended)__
1. `<Toaster><Toast />...</Toaster>`: Render a `<Toaster>` element with React `children`.
1. `<Toaster ref={ref => ref.show({ ...toast })} />`: Render a `<Toaster>` element and use the `ref` prop to access its instance methods.
1. `OverlayToaster.create(props)` static method returns a new `ToasterInstance` 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: ToasterInstance) => ref.show({ ...toast })} />`: Render a `<OverlayToaster>` element and use the `ref` prop to access its instance methods.

@@ -49,3 +49,3 @@ <div class="@ns-callout @ns-intent-primary @ns-icon-info-sign">

`Toaster` always disables `Overlay`'s `enforceFocus` behavior (meaning that you're not blocked
__OverlayToaster__ always disables Overlay's `enforceFocus` behavior (meaning that you're not blocked
from accessing other parts of the application while a toast is active), and by default also

@@ -58,20 +58,19 @@ disables `autoFocus` (meaning that focus will not switch to a toast when it appears). You can

@interface IToasterProps
@interface OverlayToasterProps
@## Static usage
The `Toaster` component provides the static `create` method that returns a new `Toaster` instance, rendered into an
element attached to `<body>`. A `Toaster` instance
has a collection of methods to show and hide toasts in its given container.
__OverlayToaster__ provides the static `create` method that returns a new `ToasterInstance`, rendered into an
element attached to `<body>`. A toaster instance has a collection of methods to show and hide toasts in its given container.
```ts
Toaster.create(props?: IToasterProps, container = document.body): ToasterInstance
OverlayToaster.create(props?: IToasterProps, container = document.body): ToasterInstance
```
The `Toaster` will be rendered into a new element appended to the given `container`.
The toaster will be rendered into a new element appended to the given `container`.
The `container` determines which element toasts are positioned relative to; the default value of `<body>` allows them to use the entire viewport.
Note that the return type is `ToasterInstance`, which is a minimal interface that exposes only the instance
methods detailed below. It can be thought of as `Toaster` minus the `React.Component` methods,
because the `Toaster` should not be treated as a normal React component.
methods detailed below. It can be thought of as `OverlayToaster` minus the `React.Component` methods,
because the `OverlayToaster` should not be treated as a normal React component.

@@ -81,4 +80,6 @@ <div class="@ns-callout @ns-intent-warning @ns-icon-warning-sign">

`Toaster.create()` will throw an error if invoked inside a component lifecycle method in React 16, as `ReactDOM.render()` will return
`null` resulting in an inaccessible toaster instance. See the second bullet point on the [React 16 release notes](https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes) for more information.
`OverlayToaster.create()` will throw an error if invoked inside a component lifecycle method in React 16,
as `ReactDOM.render()` will return `null` resulting in an inaccessible toaster instance. See the second bullet
point on the [React 16 release notes](https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes)
for more information.

@@ -91,3 +92,3 @@ </div>

Your application can contain several `Toaster` instances and easily share them across the codebase as modules.
Your application can contain several `ToasterInstance`s and easily share them across the codebase as modules.

@@ -99,6 +100,6 @@ The following code samples demonstrate our preferred pattern for intergrating a toaster into a React application:

```ts
import { Position, Toaster } from "@blueprintjs/core";
import { OverlayToaster, Position } from "@blueprintjs/core";
/** Singleton toaster instance. Create separate instances for different options. */
export const AppToaster = Toaster.create({
export const AppToaster = OverlayToaster.create({
className: "recipe-toaster",

@@ -131,5 +132,5 @@ position: Position.TOP,

Render the `<Toaster>` component like any other element and supply `<Toast>` elements as `children`. You can
Render the `<OverlayToaster>` component like any other element and supply `<Toast>` elements as `children`. You can
optionally attach a `ref` handler to access the instance methods, but we strongly recommend using the
[`Toaster.create` static method](#core/components/toast.static-usage) documented above instead. Note that
[`OverlayToaster.create` static method](#core/components/toast.static-usage) documented above instead. Note that
`children` and `ref` can be used together, but `children` will always appear _after_ toasts created with

@@ -139,3 +140,3 @@ `ref.show()`.

```tsx
import { Button, Position, Toast, Toaster } from "@blueprintjs/core";
import { Button, OverlayToaster, Position, Toast, ToasterInstance } from "@blueprintjs/core";
import * as React from "react";

@@ -146,5 +147,5 @@

private toaster: Toaster;
private toaster: ToasterInstance;
private refHandlers = {
toaster: (ref: Toaster) => this.toaster = ref,
toaster: (ref: ToasterInstance) => this.toaster = ref,
};

@@ -156,6 +157,6 @@

<Button onClick={this.addToast} text="Procure toast" />
<Toaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster}>
<OverlayToaster position={Position.TOP_RIGHT} ref={this.refHandlers.toaster}>
{/* "Toasted!" will appear here after clicking button. */}
{this.state.toasts.map(toast => <Toast {...toast} />)}
</Toaster>
</OverlayToaster>
</div>

@@ -162,0 +163,0 @@ )

@@ -37,3 +37,3 @@ ---

```tsx
import { InputGroup, KeyCombo, useHotkeys } from "@blueprintjs/core";
import { InputGroup, KeyComboTag, useHotkeys } from "@blueprintjs/core";
import React, { createRef, useCallback, useMemo } from "react";

@@ -65,3 +65,3 @@

<div tabIndex={0} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}>
Press <KeyCombo combo="R" /> to refresh data, <KeyCombo combo="F" /> to focus the input...
Press <KeyComboTag combo="R" /> to refresh data, <KeyComboTag combo="F" /> to focus the input...
<InputGroup inputRef={inputRef} />

@@ -68,0 +68,0 @@ </div>

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc