@spark-ui/components 10.11.1 → 10.11.2

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.11.2](https://github.com/leboncoin/spark-web/compare/v10.11.1...v10.11.2) (2025-07-15)
+
+### Bug Fixes
+
+- **components:** local fork of react-stately/toast to resolve deps issue ([36b7ce4](https://github.com/leboncoin/spark-web/commit/36b7ce4acd31a7b9909a25df29d0e05675c49516))
+
 ## [10.11.1](https://github.com/leboncoin/spark-web/compare/v10.11.0...v10.11.1) (2025-07-11)
 
 ### Bug Fixes

package/dist/snackbar/index.d.mts

@@ -1,4 +1,3 @@
-import { QueuedToast, ToastState, ToastOptions } from '@react-stately/toast';
 import { ReactNode, ComponentPropsWithRef, PropsWithChildren, ReactElement, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -8,6 +7,52 @@ import { ButtonProps } from '../button/index.mjs';
 import { IconButtonProps } from '../icon-button/index.mjs';
 import { IconProps } from '../icon/index.mjs';
 
+interface ToastOptions {
+    /** Handler that is called when the toast is closed, either by the user or after a timeout. */
+    onClose?: () => void;
+    /** 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;
+}
+interface QueuedToast<T> extends ToastOptions {
+    /** The content of the toast. */
+    content: T;
+    /** A unique key for the toast. */
+    key: string;
+    /** A timer for the toast, if a timeout was set. */
+    timer?: Timer;
+    /** The current animation state for the toast. */
+    animation?: 'entering' | 'queued' | 'exiting' | null;
+}
+interface ToastState<T> {
+    /** 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.
+     */
+    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. */
+    pauseAll(): void;
+    /** Resumes the timers for all visible toasts. */
+    resumeAll(): void;
+    /** The visible toasts. */
+    visibleToasts: QueuedToast<T>[];
+}
+declare class Timer {
+    private timerId;
+    private startTime;
+    private remaining;
+    private callback;
+    constructor(callback: () => void, delay: number);
+    reset(delay: number): void;
+    pause(): void;
+    resume(): void;
+}
+
 declare const snackbarItemVariant: (props?: ({
     design?: "filled" | "tinted" | null | undefined;
     intent?: "main" | "success" | "alert" | "error" | "info" | "neutral" | "basic" | "support" | "accent" | "inverse" | null | undefined;

package/dist/snackbar/index.d.ts

@@ -1,4 +1,3 @@
-import { QueuedToast, ToastState, ToastOptions } from '@react-stately/toast';
 import { ReactNode, ComponentPropsWithRef, PropsWithChildren, ReactElement, Ref } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
@@ -8,6 +7,52 @@ import { ButtonProps } from '../button/index.js';
 import { IconButtonProps } from '../icon-button/index.js';
 import { IconProps } from '../icon/index.js';
 
+interface ToastOptions {
+    /** Handler that is called when the toast is closed, either by the user or after a timeout. */
+    onClose?: () => void;
+    /** 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;
+}
+interface QueuedToast<T> extends ToastOptions {
+    /** The content of the toast. */
+    content: T;
+    /** A unique key for the toast. */
+    key: string;
+    /** A timer for the toast, if a timeout was set. */
+    timer?: Timer;
+    /** The current animation state for the toast. */
+    animation?: 'entering' | 'queued' | 'exiting' | null;
+}
+interface ToastState<T> {
+    /** 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.
+     */
+    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. */
+    pauseAll(): void;
+    /** Resumes the timers for all visible toasts. */
+    resumeAll(): void;
+    /** The visible toasts. */
+    visibleToasts: QueuedToast<T>[];
+}
+declare class Timer {
+    private timerId;
+    private startTime;
+    private remaining;
+    private callback;
+    constructor(callback: () => void, delay: number);
+    reset(delay: number): void;
+    pause(): void;
+    resume(): void;
+}
+
 declare const snackbarItemVariant: (props?: ({
     design?: "filled" | "tinted" | null | undefined;
     intent?: "main" | "success" | "alert" | "error" | "info" | "neutral" | "basic" | "support" | "accent" | "inverse" | null | undefined;

package/dist/snackbar/index.js

@@ -27,17 +27,165 @@ __export(snackbar_exports, {
 module.exports = __toCommonJS(snackbar_exports);
 
 // src/snackbar/Snackbar.tsx
-var import_toast3 = require("@react-stately/toast");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_dom = require("react-dom");
 
+// src/snackbar/local-toast/useToastState.ts
+var import_react = require("react");
+var import_shim = require("use-sync-external-store/shim/index.js");
+function useToastQueue(queue) {
+  let subscribe = (0, import_react.useCallback)((fn) => queue.subscribe(fn), [queue]);
+  let getSnapshot = (0, import_react.useCallback)(() => queue.visibleToasts, [queue]);
+  let visibleToasts = (0, import_shim.useSyncExternalStore)(subscribe, getSnapshot, getSnapshot);
+  return {
+    visibleToasts,
+    add: (content, options) => queue.add(content, options),
+    close: (key) => queue.close(key),
+    remove: (key) => queue.remove(key),
+    pauseAll: () => queue.pauseAll(),
+    resumeAll: () => queue.resumeAll()
+  };
+}
+var ToastQueue = class {
+  queue = [];
+  subscriptions = /* @__PURE__ */ new Set();
+  maxVisibleToasts;
+  hasExitAnimation;
+  /** The currently visible toasts. */
+  visibleToasts = [];
+  constructor(options) {
+    this.maxVisibleToasts = options?.maxVisibleToasts ?? 1;
+    this.hasExitAnimation = options?.hasExitAnimation ?? false;
+  }
+  /** Subscribes to updates to the visible toasts. */
+  subscribe(fn) {
+    this.subscriptions.add(fn);
+    return () => this.subscriptions.delete(fn);
+  }
+  /** Adds a new toast to the queue. */
+  add(content, options = {}) {
+    let toastKey = Math.random().toString(36);
+    let toast = {
+      ...options,
+      content,
+      key: toastKey,
+      timer: options.timeout ? new Timer(() => this.close(toastKey), options.timeout) : void 0
+    };
+    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" });
+    return toastKey;
+  }
+  /**
+   * Closes a toast. If `hasExitAnimation` is true, the toast
+   * transitions to an "exiting" state instead of being removed immediately.
+   */
+  close(key) {
+    let index = this.queue.findIndex((t) => t.key === key);
+    if (index >= 0) {
+      this.queue[index]?.onClose?.();
+      this.queue.splice(index, 1);
+    }
+    this.updateVisibleToasts({ action: "close", key });
+  }
+  /** Removes a toast from the visible toasts after an exiting animation. */
+  remove(key) {
+    this.updateVisibleToasts({ action: "remove", key });
+  }
+  updateVisibleToasts(options) {
+    let { action, 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 ?? 0) - (a.priority ?? 0));
+    } else if (action === "close" && this.hasExitAnimation) {
+      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() {
+    for (let toast of this.visibleToasts) {
+      if (toast.timer) {
+        toast.timer.pause();
+      }
+    }
+  }
+  /** Resumes the timers for all visible toasts. */
+  resumeAll() {
+    for (let toast of this.visibleToasts) {
+      if (toast.timer) {
+        toast.timer.resume();
+      }
+    }
+  }
+};
+var Timer = class {
+  timerId;
+  startTime = null;
+  remaining;
+  callback;
+  constructor(callback, delay) {
+    this.remaining = delay;
+    this.callback = callback;
+  }
+  reset(delay) {
+    this.remaining = delay;
+    this.resume();
+  }
+  pause() {
+    if (this.timerId == null) {
+      return;
+    }
+    clearTimeout(this.timerId);
+    this.timerId = null;
+    this.remaining -= Date.now() - this.startTime;
+  }
+  resume() {
+    if (this.remaining <= 0) {
+      return;
+    }
+    this.startTime = Date.now();
+    this.timerId = setTimeout(() => {
+      this.timerId = null;
+      this.remaining = 0;
+      this.callback();
+    }, this.remaining);
+  }
+};
+
 // src/snackbar/SnackbarRegion.tsx
 var import_toast2 = require("@react-aria/toast");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/snackbar/SnackbarItem.tsx
 var import_toast = require("@react-aria/toast");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/snackbar/SnackbarItem.styles.ts
 var import_class_variance_authority = require("class-variance-authority");
@@ -265,11 +413,11 @@ var import_class_variance_authority5 = require("class-variance-authority");
 
 // src/button/Button.tsx
 var import_class_variance_authority4 = require("class-variance-authority");
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -277,7 +425,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
+  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -1115,7 +1263,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react2.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react3.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1169,9 +1317,9 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/snackbar/SnackbarItemContext.tsx
-var import_react3 = require("react");
-var SnackbarItemContext = (0, import_react3.createContext)({});
-var useSnackbarItemContext = () => (0, import_react3.useContext)(SnackbarItemContext);
+var import_react4 = require("react");
+var SnackbarItemContext = (0, import_react4.createContext)({});
+var useSnackbarItemContext = () => (0, import_react4.useContext)(SnackbarItemContext);
 
 // src/snackbar/SnackbarItemAction.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -1219,7 +1367,7 @@ var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority8 = require("class-variance-authority");
 
 // src/icon/Icon.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/icon/Icon.styles.tsx
 var import_internal_utils8 = require("@spark-ui/internal-utils");
@@ -1264,9 +1412,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react4.Children.only(children);
+  const child = import_react5.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    (0, import_react4.cloneElement)(child, {
+    (0, import_react5.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -1385,7 +1533,7 @@ var SnackbarItemIcon = ({
 SnackbarItemIcon.displayName = "Snackbar.ItemIcon";
 
 // src/snackbar/useSwipe.ts
-var import_react5 = require("react");
+var import_react6 = require("react");
 var SWIPE_THRESHOLD = 75;
 var useSwipe = ({
   swipeRef,
@@ -1395,10 +1543,10 @@ var useSwipe = ({
   onSwipeEnd,
   threshold = 10
 }) => {
-  const [state, setState] = (0, import_react5.useState)();
-  const direction = (0, import_react5.useRef)(null);
-  const origin = (0, import_react5.useRef)(null);
-  const delta = (0, import_react5.useRef)(null);
+  const [state, setState] = (0, import_react6.useState)();
+  const direction = (0, import_react6.useRef)(null);
+  const origin = (0, import_react6.useRef)(null);
+  const delta = (0, import_react6.useRef)(null);
   const handleSwipeStart = (evt) => {
     origin.current = { x: evt.clientX, y: evt.clientY };
     document.addEventListener("selectstart", (e) => e.preventDefault());
@@ -1461,7 +1609,7 @@ var useSwipe = ({
       document.removeEventListener("selectstart", (e) => e.preventDefault());
     }
   };
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (!swipeRef.current) return;
     const swipeElement = swipeRef.current;
     swipeElement.addEventListener("pointerdown", handleSwipeStart);
@@ -1494,7 +1642,7 @@ var SnackbarItem = ({
   ref: forwardedRef,
   ...rest
 }) => {
-  const innerRef = (0, import_react6.useRef)(null);
+  const innerRef = (0, import_react7.useRef)(null);
   const ref = typeof forwardedRef !== "function" ? forwardedRef || innerRef : innerRef;
   const { toast, state } = useSnackbarItemContext();
   const { state: swipeState, direction: swipeDirection } = useSwipe({
@@ -1521,10 +1669,10 @@ var SnackbarItem = ({
     state,
     ref
   );
-  const findElement = (0, import_react6.useCallback)(
+  const findElement = (0, import_react7.useCallback)(
     (elementDisplayName) => {
-      const childrenArray = import_react6.Children.toArray(children);
-      const match = childrenArray.filter(import_react6.isValidElement).find(
+      const childrenArray = import_react7.Children.toArray(children);
+      const match = childrenArray.filter(import_react7.isValidElement).find(
         (child) => !!child.type.displayName?.includes(
           elementDisplayName
         )
@@ -1587,7 +1735,7 @@ var SnackbarItem = ({
 SnackbarItem.displayName = "Snackbar.Item";
 var renderSubComponent = (childItem, defaultItem, props) => {
   if (childItem) {
-    return (0, import_react6.cloneElement)(childItem, { ...props, ...childItem.props });
+    return (0, import_react7.cloneElement)(childItem, { ...props, ...childItem.props });
   } else if (defaultItem) {
     const Item = defaultItem;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Item, { ...props });
@@ -1635,7 +1783,7 @@ var SnackbarRegion = ({
   ref: forwardedRef,
   ...rest
 }) => {
-  const innerRef = (0, import_react7.useRef)(null);
+  const innerRef = (0, import_react8.useRef)(null);
   const ref = forwardedRef && typeof forwardedRef !== "function" ? forwardedRef : innerRef;
   const { regionProps } = (0, import_toast2.useToastRegion)(rest, state, ref);
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -1645,26 +1793,26 @@ var SnackbarRegion = ({
       ref,
       "data-position": position,
       className: snackbarRegionVariant({ position, className }),
-      children: state.visibleToasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SnackbarItemContext.Provider, { value: { toast, state }, children: (0, import_react7.cloneElement)(children, { key: toast.key }) }, toast.key))
+      children: state.visibleToasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SnackbarItemContext.Provider, { value: { toast, state }, children: (0, import_react8.cloneElement)(children, { key: toast.key }) }, toast.key))
     }
   );
 };
 
 // src/snackbar/useSnackbarGlobalStore.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 var useSnackbarGlobalStore = ({
   providers,
   subscriptions
 }) => {
-  const subscribe = (0, import_react8.useCallback)(
+  const subscribe = (0, import_react9.useCallback)(
     (listener) => {
       subscriptions.add(listener);
       return () => subscriptions.delete(listener);
     },
     [subscriptions]
   );
-  const getLastSnackbarProvider = (0, import_react8.useCallback)(() => [...providers].reverse()[0], [providers]);
-  const addProvider = (0, import_react8.useCallback)(
+  const getLastSnackbarProvider = (0, import_react9.useCallback)(() => [...providers].reverse()[0], [providers]);
+  const addProvider = (0, import_react9.useCallback)(
     (provider2) => {
       providers.add(provider2);
       for (const subscribeFn of subscriptions) {
@@ -1673,7 +1821,7 @@ var useSnackbarGlobalStore = ({
     },
     [providers, subscriptions]
   );
-  const deleteProvider = (0, import_react8.useCallback)(
+  const deleteProvider = (0, import_react9.useCallback)(
     (provider2) => {
       providers.delete(provider2);
       for (const subscribeFn of subscriptions) {
@@ -1682,7 +1830,7 @@ var useSnackbarGlobalStore = ({
     },
     [providers, subscriptions]
   );
-  const provider = (0, import_react8.useSyncExternalStore)(subscribe, getLastSnackbarProvider, getLastSnackbarProvider);
+  const provider = (0, import_react9.useSyncExternalStore)(subscribe, getLastSnackbarProvider, getLastSnackbarProvider);
   return {
     provider,
     addProvider,
@@ -1695,7 +1843,7 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 var GLOBAL_SNACKBAR_QUEUE = null;
 var getGlobalSnackBarQueue = () => {
   if (!GLOBAL_SNACKBAR_QUEUE) {
-    GLOBAL_SNACKBAR_QUEUE = new import_toast3.ToastQueue({
+    GLOBAL_SNACKBAR_QUEUE = new ToastQueue({
       maxVisibleToasts: 1,
       hasExitAnimation: true
     });
@@ -1710,10 +1858,10 @@ var GLOBAL_SNACKBAR_STORE = {
   subscriptions: /* @__PURE__ */ new Set()
 };
 var Snackbar = ({ ref: forwardedRef, ...props }) => {
-  const ref = (0, import_react9.useRef)(null);
-  const state = (0, import_toast3.useToastQueue)(getGlobalSnackBarQueue());
+  const ref = (0, import_react10.useRef)(null);
+  const state = useToastQueue(getGlobalSnackBarQueue());
   const { provider, addProvider, deleteProvider } = useSnackbarGlobalStore(GLOBAL_SNACKBAR_STORE);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     addProvider(ref);
     return () => {
       for (const toast of getGlobalSnackBarQueue().visibleToasts) {