Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

@react-stately/toast

Package Overview
Dependencies
Maintainers
2
Versions
693
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-stately/toast - npm Package Compare versions

Comparing version

3.0.0-nightly-8ab4f20de-240913
to
3.0.0-nightly-8c5b7a011-250827

28

dist/types.d.ts

@@ -0,10 +1,7 @@

type ToastAction = 'add' | 'remove' | 'clear';
export interface ToastStateProps {
/** The maximum number of toasts to display at a time. */
maxVisibleToasts?: number;
/**
* Whether toasts have an exit animation. If true, toasts are not
* removed immediately but transition into an "exiting" state instead.
* Once the animation is complete, call the `remove` function.
*/
hasExitAnimation?: boolean;
/** Function to wrap updates in (i.e. document.startViewTransition()). */
wrapUpdate?: (fn: () => void, action: ToastAction) => void;
}

@@ -16,4 +13,2 @@ export interface ToastOptions {

timeout?: number;
/** The priority of the toast relative to other toasts. Larger numbers indicate higher priority. */
priority?: number;
}

@@ -27,4 +22,2 @@ export interface QueuedToast<T> extends ToastOptions {

timer?: Timer;
/** The current animation state for the toast. */
animation?: 'entering' | 'queued' | 'exiting';
}

@@ -35,8 +28,5 @@ export interface ToastState<T> {

/**
* Closes a toast. If `hasExitAnimation` is true, the toast
* transitions to an "exiting" state instead of being removed immediately.
* Closes a toast.
*/
close(key: string): void;
/** Removes a toast from the visible toasts after an exiting animation. */
remove(key: string): void;
/** Pauses the timers for all visible toasts. */

@@ -59,3 +49,3 @@ pauseAll(): void;

/**
* A ToastQueue is a priority queue of toasts.
* A ToastQueue manages the order of toasts.
*/

@@ -67,12 +57,9 @@ export class ToastQueue<T> {

/** Subscribes to updates to the visible toasts. */
subscribe(fn: () => void): () => boolean;
subscribe(fn: () => void): () => void;
/** Adds a new toast to the queue. */
add(content: T, options?: ToastOptions): string;
/**
* Closes a toast. If `hasExitAnimation` is true, the toast
* transitions to an "exiting" state instead of being removed immediately.
* Closes a toast.
*/
close(key: string): void;
/** Removes a toast from the visible toasts after an exiting animation. */
remove(key: string): void;
/** Pauses the timers for all visible toasts. */

@@ -82,2 +69,3 @@ pauseAll(): void;

resumeAll(): void;
clear(): void;
}

@@ -84,0 +72,0 @@ declare class Timer {

79

dist/useToastState.main.js

@@ -25,9 +25,9 @@ var $pwpJQ$react = require("react");

function $c995945a643dde76$export$c7b26b20d3ced9c5(props = {}) {
let { maxVisibleToasts: maxVisibleToasts = 1, hasExitAnimation: hasExitAnimation = false } = props;
let { maxVisibleToasts: maxVisibleToasts = 1, wrapUpdate: wrapUpdate } = props;
let queue = (0, $pwpJQ$react.useMemo)(()=>new $c995945a643dde76$export$f1f8569633bbbec4({
maxVisibleToasts: maxVisibleToasts,
hasExitAnimation: hasExitAnimation
wrapUpdate: wrapUpdate
}), [
maxVisibleToasts,
hasExitAnimation
wrapUpdate
]);

@@ -48,3 +48,2 @@ return $c995945a643dde76$export$84726ef35ca2129a(queue);

close: (key)=>queue.close(key),
remove: (key)=>queue.remove(key),
pauseAll: ()=>queue.pauseAll(),

@@ -55,2 +54,6 @@ resumeAll: ()=>queue.resumeAll()

class $c995945a643dde76$export$f1f8569633bbbec4 {
runWithWrapUpdate(fn, action) {
if (this.wrapUpdate) this.wrapUpdate(fn, action);
else fn();
}
/** Subscribes to updates to the visible toasts. */ subscribe(fn) {

@@ -61,3 +64,3 @@ this.subscriptions.add(fn);

/** Adds a new toast to the queue. */ add(content, options = {}) {
let toastKey = Math.random().toString(36);
let toastKey = '_' + Math.random().toString(36).slice(2);
let toast = {

@@ -67,23 +70,10 @@ ...options,

key: toastKey,
timer: options.timeout ? new $c995945a643dde76$var$Timer(()=>this.close(toastKey), options.timeout) : null
timer: options.timeout ? new $c995945a643dde76$var$Timer(()=>this.close(toastKey), options.timeout) : undefined
};
let low = 0;
let high = this.queue.length;
while(low < high){
let mid = Math.floor((low + high) / 2);
if ((toast.priority || 0) > (this.queue[mid].priority || 0)) high = mid;
else low = mid + 1;
}
this.queue.splice(low, 0, toast);
toast.animation = low < this.maxVisibleToasts ? 'entering' : 'queued';
let i = this.maxVisibleToasts;
while(i < this.queue.length)this.queue[i++].animation = 'queued';
this.updateVisibleToasts({
action: 'add'
});
this.queue.unshift(toast);
this.updateVisibleToasts('add');
return toastKey;
}
/**
* Closes a toast. If `hasExitAnimation` is true, the toast
* transitions to an "exiting" state instead of being removed immediately.
* Closes a toast.
*/ close(key) {

@@ -96,33 +86,10 @@ let index = this.queue.findIndex((t)=>t.key === key);

}
this.updateVisibleToasts({
action: 'close',
key: key
});
this.updateVisibleToasts('remove');
}
/** Removes a toast from the visible toasts after an exiting animation. */ remove(key) {
this.updateVisibleToasts({
action: 'remove',
key: key
});
updateVisibleToasts(action) {
this.visibleToasts = this.queue.slice(0, this.maxVisibleToasts);
this.runWithWrapUpdate(()=>{
for (let fn of this.subscriptions)fn();
}, action);
}
updateVisibleToasts(options) {
let { action: action, key: key } = options;
let toasts = this.queue.slice(0, this.maxVisibleToasts);
if (action === 'add' && this.hasExitAnimation) {
let prevToasts = this.visibleToasts.filter((t)=>!toasts.some((t2)=>t.key === t2.key)).map((t)=>({
...t,
animation: 'exiting'
}));
this.visibleToasts = prevToasts.concat(toasts).sort((a, b)=>b.priority - a.priority);
} else if (action === 'close' && this.hasExitAnimation) // Cause a rerender to happen for exit animation
this.visibleToasts = this.visibleToasts.map((t)=>{
if (t.key !== key) return t;
else return {
...t,
animation: 'exiting'
};
});
else this.visibleToasts = toasts;
for (let fn of this.subscriptions)fn();
}
/** Pauses the timers for all visible toasts. */ pauseAll() {

@@ -134,2 +101,6 @@ for (let toast of this.visibleToasts)if (toast.timer) toast.timer.pause();

}
clear() {
this.queue = [];
this.updateVisibleToasts('clear');
}
constructor(options){

@@ -140,5 +111,4 @@ this.queue = [];

var _options_maxVisibleToasts;
this.maxVisibleToasts = (_options_maxVisibleToasts = options === null || options === void 0 ? void 0 : options.maxVisibleToasts) !== null && _options_maxVisibleToasts !== void 0 ? _options_maxVisibleToasts : 1;
var _options_hasExitAnimation;
this.hasExitAnimation = (_options_hasExitAnimation = options === null || options === void 0 ? void 0 : options.hasExitAnimation) !== null && _options_hasExitAnimation !== void 0 ? _options_hasExitAnimation : false;
this.maxVisibleToasts = (_options_maxVisibleToasts = options === null || options === void 0 ? void 0 : options.maxVisibleToasts) !== null && _options_maxVisibleToasts !== void 0 ? _options_maxVisibleToasts : Infinity;
this.wrapUpdate = options === null || options === void 0 ? void 0 : options.wrapUpdate;
}

@@ -167,2 +137,3 @@ }

constructor(callback, delay){
this.startTime = null;
this.remaining = delay;

@@ -169,0 +140,0 @@ this.callback = callback;

79

dist/useToastState.module.js

@@ -17,9 +17,9 @@ import {useMemo as $cNx9A$useMemo, useCallback as $cNx9A$useCallback} from "react";

function $77b352cf12efcf73$export$c7b26b20d3ced9c5(props = {}) {
let { maxVisibleToasts: maxVisibleToasts = 1, hasExitAnimation: hasExitAnimation = false } = props;
let { maxVisibleToasts: maxVisibleToasts = 1, wrapUpdate: wrapUpdate } = props;
let queue = (0, $cNx9A$useMemo)(()=>new $77b352cf12efcf73$export$f1f8569633bbbec4({
maxVisibleToasts: maxVisibleToasts,
hasExitAnimation: hasExitAnimation
wrapUpdate: wrapUpdate
}), [
maxVisibleToasts,
hasExitAnimation
wrapUpdate
]);

@@ -40,3 +40,2 @@ return $77b352cf12efcf73$export$84726ef35ca2129a(queue);

close: (key)=>queue.close(key),
remove: (key)=>queue.remove(key),
pauseAll: ()=>queue.pauseAll(),

@@ -47,2 +46,6 @@ resumeAll: ()=>queue.resumeAll()

class $77b352cf12efcf73$export$f1f8569633bbbec4 {
runWithWrapUpdate(fn, action) {
if (this.wrapUpdate) this.wrapUpdate(fn, action);
else fn();
}
/** Subscribes to updates to the visible toasts. */ subscribe(fn) {

@@ -53,3 +56,3 @@ this.subscriptions.add(fn);

/** Adds a new toast to the queue. */ add(content, options = {}) {
let toastKey = Math.random().toString(36);
let toastKey = '_' + Math.random().toString(36).slice(2);
let toast = {

@@ -59,23 +62,10 @@ ...options,

key: toastKey,
timer: options.timeout ? new $77b352cf12efcf73$var$Timer(()=>this.close(toastKey), options.timeout) : null
timer: options.timeout ? new $77b352cf12efcf73$var$Timer(()=>this.close(toastKey), options.timeout) : undefined
};
let low = 0;
let high = this.queue.length;
while(low < high){
let mid = Math.floor((low + high) / 2);
if ((toast.priority || 0) > (this.queue[mid].priority || 0)) high = mid;
else low = mid + 1;
}
this.queue.splice(low, 0, toast);
toast.animation = low < this.maxVisibleToasts ? 'entering' : 'queued';
let i = this.maxVisibleToasts;
while(i < this.queue.length)this.queue[i++].animation = 'queued';
this.updateVisibleToasts({
action: 'add'
});
this.queue.unshift(toast);
this.updateVisibleToasts('add');
return toastKey;
}
/**
* Closes a toast. If `hasExitAnimation` is true, the toast
* transitions to an "exiting" state instead of being removed immediately.
* Closes a toast.
*/ close(key) {

@@ -88,33 +78,10 @@ let index = this.queue.findIndex((t)=>t.key === key);

}
this.updateVisibleToasts({
action: 'close',
key: key
});
this.updateVisibleToasts('remove');
}
/** Removes a toast from the visible toasts after an exiting animation. */ remove(key) {
this.updateVisibleToasts({
action: 'remove',
key: key
});
updateVisibleToasts(action) {
this.visibleToasts = this.queue.slice(0, this.maxVisibleToasts);
this.runWithWrapUpdate(()=>{
for (let fn of this.subscriptions)fn();
}, action);
}
updateVisibleToasts(options) {
let { action: action, key: key } = options;
let toasts = this.queue.slice(0, this.maxVisibleToasts);
if (action === 'add' && this.hasExitAnimation) {
let prevToasts = this.visibleToasts.filter((t)=>!toasts.some((t2)=>t.key === t2.key)).map((t)=>({
...t,
animation: 'exiting'
}));
this.visibleToasts = prevToasts.concat(toasts).sort((a, b)=>b.priority - a.priority);
} else if (action === 'close' && this.hasExitAnimation) // Cause a rerender to happen for exit animation
this.visibleToasts = this.visibleToasts.map((t)=>{
if (t.key !== key) return t;
else return {
...t,
animation: 'exiting'
};
});
else this.visibleToasts = toasts;
for (let fn of this.subscriptions)fn();
}
/** Pauses the timers for all visible toasts. */ pauseAll() {

@@ -126,2 +93,6 @@ for (let toast of this.visibleToasts)if (toast.timer) toast.timer.pause();

}
clear() {
this.queue = [];
this.updateVisibleToasts('clear');
}
constructor(options){

@@ -132,5 +103,4 @@ this.queue = [];

var _options_maxVisibleToasts;
this.maxVisibleToasts = (_options_maxVisibleToasts = options === null || options === void 0 ? void 0 : options.maxVisibleToasts) !== null && _options_maxVisibleToasts !== void 0 ? _options_maxVisibleToasts : 1;
var _options_hasExitAnimation;
this.hasExitAnimation = (_options_hasExitAnimation = options === null || options === void 0 ? void 0 : options.hasExitAnimation) !== null && _options_hasExitAnimation !== void 0 ? _options_hasExitAnimation : false;
this.maxVisibleToasts = (_options_maxVisibleToasts = options === null || options === void 0 ? void 0 : options.maxVisibleToasts) !== null && _options_maxVisibleToasts !== void 0 ? _options_maxVisibleToasts : Infinity;
this.wrapUpdate = options === null || options === void 0 ? void 0 : options.wrapUpdate;
}

@@ -159,2 +129,3 @@ }

constructor(callback, delay){
this.startTime = null;
this.remaining = delay;

@@ -161,0 +132,0 @@ this.callback = callback;

15

package.json
{
"name": "@react-stately/toast",
"version": "3.0.0-nightly-8ab4f20de-240913",
"version": "3.0.0-nightly-8c5b7a011-250827",
"description": "Spectrum UI components in React",

@@ -9,3 +9,7 @@ "license": "Apache-2.0",

"exports": {
"types": "./dist/types.d.ts",
"source": "./src/index.ts",
"types": [
"./dist/types.d.ts",
"./src/index.ts"
],
"import": "./dist/import.mjs",

@@ -27,3 +31,3 @@ "require": "./dist/main.js"

"@swc/helpers": "^0.5.0",
"use-sync-external-store": "^1.2.0"
"use-sync-external-store": "^1.4.0"
},

@@ -34,8 +38,7 @@ "devDependencies": {

"peerDependencies": {
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
},
"publishConfig": {
"access": "public"
},
"stableVersion": "3.0.0-beta.5"
}
}

134

src/useToastState.ts

@@ -17,11 +17,8 @@ /*

type ToastAction = 'add' | 'remove' | 'clear';
export interface ToastStateProps {
/** The maximum number of toasts to display at a time. */
maxVisibleToasts?: number,
/**
* Whether toasts have an exit animation. If true, toasts are not
* removed immediately but transition into an "exiting" state instead.
* Once the animation is complete, call the `remove` function.
*/
hasExitAnimation?: boolean
/** Function to wrap updates in (i.e. document.startViewTransition()). */
wrapUpdate?: (fn: () => void, action: ToastAction) => void
}

@@ -33,5 +30,3 @@

/** A timeout to automatically close the toast after, in milliseconds. */
timeout?: number,
/** The priority of the toast relative to other toasts. Larger numbers indicate higher priority. */
priority?: number
timeout?: number
}

@@ -45,5 +40,3 @@

/** A timer for the toast, if a timeout was set. */
timer?: Timer,
/** The current animation state for the toast. */
animation?: 'entering' | 'queued' | 'exiting'
timer?: Timer
}

@@ -55,8 +48,5 @@

/**
* Closes a toast. If `hasExitAnimation` is true, the toast
* transitions to an "exiting" state instead of being removed immediately.
* Closes a toast.
*/
close(key: string): void,
/** Removes a toast from the visible toasts after an exiting animation. */
remove(key: string): void,
/** Pauses the timers for all visible toasts. */

@@ -75,4 +65,4 @@ pauseAll(): void,

export function useToastState<T>(props: ToastStateProps = {}): ToastState<T> {
let {maxVisibleToasts = 1, hasExitAnimation = false} = props;
let queue = useMemo(() => new ToastQueue<T>({maxVisibleToasts, hasExitAnimation}), [maxVisibleToasts, hasExitAnimation]);
let {maxVisibleToasts = 1, wrapUpdate} = props;
let queue = useMemo(() => new ToastQueue<T>({maxVisibleToasts, wrapUpdate}), [maxVisibleToasts, wrapUpdate]);
return useToastQueue(queue);

@@ -93,3 +83,2 @@ }

close: key => queue.close(key),
remove: key => queue.remove(key),
pauseAll: () => queue.pauseAll(),

@@ -101,3 +90,3 @@ resumeAll: () => queue.resumeAll()

/**
* A ToastQueue is a priority queue of toasts.
* A ToastQueue manages the order of toasts.
*/

@@ -108,3 +97,3 @@ export class ToastQueue<T> {

private maxVisibleToasts: number;
private hasExitAnimation: boolean;
private wrapUpdate?: (fn: () => void, action: ToastAction) => void;
/** The currently visible toasts. */

@@ -114,8 +103,16 @@ visibleToasts: QueuedToast<T>[] = [];

constructor(options?: ToastStateProps) {
this.maxVisibleToasts = options?.maxVisibleToasts ?? 1;
this.hasExitAnimation = options?.hasExitAnimation ?? false;
this.maxVisibleToasts = options?.maxVisibleToasts ?? Infinity;
this.wrapUpdate = options?.wrapUpdate;
}
private runWithWrapUpdate(fn: () => void, action: ToastAction): void {
if (this.wrapUpdate) {
this.wrapUpdate(fn, action);
} else {
fn();
}
}
/** Subscribes to updates to the visible toasts. */
subscribe(fn: () => void) {
subscribe(fn: () => void): () => void {
this.subscriptions.add(fn);

@@ -126,4 +123,4 @@ return () => this.subscriptions.delete(fn);

/** Adds a new toast to the queue. */
add(content: T, options: ToastOptions = {}) {
let toastKey = Math.random().toString(36);
add(content: T, options: ToastOptions = {}): string {
let toastKey = '_' + Math.random().toString(36).slice(2);
let toast: QueuedToast<T> = {

@@ -133,25 +130,8 @@ ...options,

key: toastKey,
timer: options.timeout ? new Timer(() => this.close(toastKey), options.timeout) : null
timer: options.timeout ? new Timer(() => this.close(toastKey), options.timeout) : undefined
};
let low = 0;
let high = this.queue.length;
while (low < high) {
let mid = Math.floor((low + high) / 2);
if ((toast.priority || 0) > (this.queue[mid].priority || 0)) {
high = mid;
} else {
low = mid + 1;
}
}
this.queue.unshift(toast);
this.queue.splice(low, 0, toast);
toast.animation = low < this.maxVisibleToasts ? 'entering' : 'queued';
let i = this.maxVisibleToasts;
while (i < this.queue.length) {
this.queue[i++].animation = 'queued';
}
this.updateVisibleToasts({action: 'add'});
this.updateVisibleToasts('add');
return toastKey;

@@ -161,6 +141,5 @@ }

/**
* Closes a toast. If `hasExitAnimation` is true, the toast
* transitions to an "exiting" state instead of being removed immediately.
* Closes a toast.
*/
close(key: string) {
close(key: string): void {
let index = this.queue.findIndex(t => t.key === key);

@@ -172,39 +151,17 @@ if (index >= 0) {

this.updateVisibleToasts({action: 'close', key});
this.updateVisibleToasts('remove');
}
/** Removes a toast from the visible toasts after an exiting animation. */
remove(key: string) {
this.updateVisibleToasts({action: 'remove', key});
}
private updateVisibleToasts(action: ToastAction) {
this.visibleToasts = this.queue.slice(0, this.maxVisibleToasts);
private updateVisibleToasts(options: {action: 'add' | 'close' | 'remove', key?: string}) {
let {action, key} = options;
let toasts = this.queue.slice(0, this.maxVisibleToasts);
if (action === 'add' && this.hasExitAnimation) {
let prevToasts: QueuedToast<T>[] = this.visibleToasts
.filter(t => !toasts.some(t2 => t.key === t2.key))
.map(t => ({...t, animation: 'exiting'}));
this.visibleToasts = prevToasts.concat(toasts).sort((a, b) => b.priority - a.priority);
} else if (action === 'close' && this.hasExitAnimation) {
// Cause a rerender to happen for exit animation
this.visibleToasts = this.visibleToasts.map(t => {
if (t.key !== key) {
return t;
} else {
return {...t, animation: 'exiting'};
}
});
} else {
this.visibleToasts = toasts;
}
for (let fn of this.subscriptions) {
fn();
}
this.runWithWrapUpdate(() => {
for (let fn of this.subscriptions) {
fn();
}
}, action);
}
/** Pauses the timers for all visible toasts. */
pauseAll() {
pauseAll(): void {
for (let toast of this.visibleToasts) {

@@ -218,3 +175,3 @@ if (toast.timer) {

/** Resumes the timers for all visible toasts. */
resumeAll() {
resumeAll(): void {
for (let toast of this.visibleToasts) {

@@ -226,2 +183,7 @@ if (toast.timer) {

}
clear(): void {
this.queue = [];
this.updateVisibleToasts('clear');
}
}

@@ -231,3 +193,3 @@

private timerId;
private startTime: number;
private startTime: number | null = null;
private remaining: number;

@@ -241,3 +203,3 @@ private callback: () => void;

reset(delay: number) {
reset(delay: number): void {
this.remaining = delay;

@@ -247,3 +209,3 @@ this.resume();

pause() {
pause(): void {
if (this.timerId == null) {

@@ -255,6 +217,6 @@ return;

this.timerId = null;
this.remaining -= Date.now() - this.startTime;
this.remaining -= Date.now() - this.startTime!;
}
resume() {
resume(): void {
if (this.remaining <= 0) {

@@ -261,0 +223,0 @@ return;

dist/types.d.ts.map

Sorry, the diff of this file is not supported yet

dist/useToastState.main.js.map

Sorry, the diff of this file is not supported yet

dist/useToastState.mjs

Sorry, the diff of this file is not supported yet

dist/useToastState.module.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

About

Packages

Explore npm
Explore Cargo
Explore Go
Explore Maven
Explore NuGet
Explore PyPI
Explore Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.