@spark-ui/components 10.11.2 → 10.11.4

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.11.4](https://github.com/leboncoin/spark-web/compare/v10.11.3...v10.11.4) (2025-07-16)
+
+### Bug Fixes
+
+- **components:** fixed version for react-aria toast ([d7cf39b](https://github.com/leboncoin/spark-web/commit/d7cf39b28e6a869c618ac58f46c2caf48a413e1e))
+
+## [10.11.3](https://github.com/leboncoin/spark-web/compare/v10.11.2...v10.11.3) (2025-07-16)
+
+### Bug Fixes
+
+- **components:** forced beta version of react-stately toast ([452b321](https://github.com/leboncoin/spark-web/commit/452b32183e34719436020811088e0cadd8f958d4))
+
 ## [10.11.2](https://github.com/leboncoin/spark-web/compare/v10.11.1...v10.11.2) (2025-07-15)
 
 ### Bug Fixes

package/dist/snackbar/index.d.mts

@@ -1,3 +1,4 @@
+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';
@@ -7,52 +8,6 @@ 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,3 +1,4 @@
+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';
@@ -7,52 +8,6 @@ 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,165 +27,17 @@ __export(snackbar_exports, {
 module.exports = __toCommonJS(snackbar_exports);
 
 // src/snackbar/Snackbar.tsx
-var import_react10 = require("react");
+var import_toast3 = require("@react-stately/toast");
+var import_react9 = 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_react8 = require("react");
+var import_react7 = require("react");
 
 // src/snackbar/SnackbarItem.tsx
 var import_toast = require("@react-aria/toast");
-var import_react7 = require("react");
+var import_react6 = require("react");
 
 // src/snackbar/SnackbarItem.styles.ts
 var import_class_variance_authority = require("class-variance-authority");
@@ -413,11 +265,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_react3 = require("react");
+var import_react2 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
-var import_react2 = require("react");
+var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -425,7 +277,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
+  return (0, import_react.isValidElement)(children) ? (0, import_react.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -1263,7 +1115,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react3.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react2.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1317,9 +1169,9 @@ var Button = ({
 Button.displayName = "Button";
 
 // src/snackbar/SnackbarItemContext.tsx
-var import_react4 = require("react");
-var SnackbarItemContext = (0, import_react4.createContext)({});
-var useSnackbarItemContext = () => (0, import_react4.useContext)(SnackbarItemContext);
+var import_react3 = require("react");
+var SnackbarItemContext = (0, import_react3.createContext)({});
+var useSnackbarItemContext = () => (0, import_react3.useContext)(SnackbarItemContext);
 
 // src/snackbar/SnackbarItemAction.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -1367,7 +1219,7 @@ var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority8 = require("class-variance-authority");
 
 // src/icon/Icon.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
 
 // src/icon/Icon.styles.tsx
 var import_internal_utils8 = require("@spark-ui/internal-utils");
@@ -1412,9 +1264,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react5.Children.only(children);
+  const child = import_react4.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    (0, import_react5.cloneElement)(child, {
+    (0, import_react4.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -1533,7 +1385,7 @@ var SnackbarItemIcon = ({
 SnackbarItemIcon.displayName = "Snackbar.ItemIcon";
 
 // src/snackbar/useSwipe.ts
-var import_react6 = require("react");
+var import_react5 = require("react");
 var SWIPE_THRESHOLD = 75;
 var useSwipe = ({
   swipeRef,
@@ -1543,10 +1395,10 @@ var useSwipe = ({
   onSwipeEnd,
   threshold = 10
 }) => {
-  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 [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 handleSwipeStart = (evt) => {
     origin.current = { x: evt.clientX, y: evt.clientY };
     document.addEventListener("selectstart", (e) => e.preventDefault());
@@ -1609,7 +1461,7 @@ var useSwipe = ({
       document.removeEventListener("selectstart", (e) => e.preventDefault());
     }
   };
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!swipeRef.current) return;
     const swipeElement = swipeRef.current;
     swipeElement.addEventListener("pointerdown", handleSwipeStart);
@@ -1642,7 +1494,7 @@ var SnackbarItem = ({
   ref: forwardedRef,
   ...rest
 }) => {
-  const innerRef = (0, import_react7.useRef)(null);
+  const innerRef = (0, import_react6.useRef)(null);
   const ref = typeof forwardedRef !== "function" ? forwardedRef || innerRef : innerRef;
   const { toast, state } = useSnackbarItemContext();
   const { state: swipeState, direction: swipeDirection } = useSwipe({
@@ -1669,10 +1521,10 @@ var SnackbarItem = ({
     state,
     ref
   );
-  const findElement = (0, import_react7.useCallback)(
+  const findElement = (0, import_react6.useCallback)(
     (elementDisplayName) => {
-      const childrenArray = import_react7.Children.toArray(children);
-      const match = childrenArray.filter(import_react7.isValidElement).find(
+      const childrenArray = import_react6.Children.toArray(children);
+      const match = childrenArray.filter(import_react6.isValidElement).find(
         (child) => !!child.type.displayName?.includes(
           elementDisplayName
         )
@@ -1735,7 +1587,7 @@ var SnackbarItem = ({
 SnackbarItem.displayName = "Snackbar.Item";
 var renderSubComponent = (childItem, defaultItem, props) => {
   if (childItem) {
-    return (0, import_react7.cloneElement)(childItem, { ...props, ...childItem.props });
+    return (0, import_react6.cloneElement)(childItem, { ...props, ...childItem.props });
   } else if (defaultItem) {
     const Item = defaultItem;
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Item, { ...props });
@@ -1783,7 +1635,7 @@ var SnackbarRegion = ({
   ref: forwardedRef,
   ...rest
 }) => {
-  const innerRef = (0, import_react8.useRef)(null);
+  const innerRef = (0, import_react7.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)(
@@ -1793,26 +1645,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_react8.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_react7.cloneElement)(children, { key: toast.key }) }, toast.key))
     }
   );
 };
 
 // src/snackbar/useSnackbarGlobalStore.ts
-var import_react9 = require("react");
+var import_react8 = require("react");
 var useSnackbarGlobalStore = ({
   providers,
   subscriptions
 }) => {
-  const subscribe = (0, import_react9.useCallback)(
+  const subscribe = (0, import_react8.useCallback)(
     (listener) => {
       subscriptions.add(listener);
       return () => subscriptions.delete(listener);
     },
     [subscriptions]
   );
-  const getLastSnackbarProvider = (0, import_react9.useCallback)(() => [...providers].reverse()[0], [providers]);
-  const addProvider = (0, import_react9.useCallback)(
+  const getLastSnackbarProvider = (0, import_react8.useCallback)(() => [...providers].reverse()[0], [providers]);
+  const addProvider = (0, import_react8.useCallback)(
     (provider2) => {
       providers.add(provider2);
       for (const subscribeFn of subscriptions) {
@@ -1821,7 +1673,7 @@ var useSnackbarGlobalStore = ({
     },
     [providers, subscriptions]
   );
-  const deleteProvider = (0, import_react9.useCallback)(
+  const deleteProvider = (0, import_react8.useCallback)(
     (provider2) => {
       providers.delete(provider2);
       for (const subscribeFn of subscriptions) {
@@ -1830,7 +1682,7 @@ var useSnackbarGlobalStore = ({
     },
     [providers, subscriptions]
   );
-  const provider = (0, import_react9.useSyncExternalStore)(subscribe, getLastSnackbarProvider, getLastSnackbarProvider);
+  const provider = (0, import_react8.useSyncExternalStore)(subscribe, getLastSnackbarProvider, getLastSnackbarProvider);
   return {
     provider,
     addProvider,
@@ -1843,7 +1695,7 @@ var import_jsx_runtime12 = require("react/jsx-runtime");
 var GLOBAL_SNACKBAR_QUEUE = null;
 var getGlobalSnackBarQueue = () => {
   if (!GLOBAL_SNACKBAR_QUEUE) {
-    GLOBAL_SNACKBAR_QUEUE = new ToastQueue({
+    GLOBAL_SNACKBAR_QUEUE = new import_toast3.ToastQueue({
       maxVisibleToasts: 1,
       hasExitAnimation: true
     });
@@ -1858,10 +1710,10 @@ var GLOBAL_SNACKBAR_STORE = {
   subscriptions: /* @__PURE__ */ new Set()
 };
 var Snackbar = ({ ref: forwardedRef, ...props }) => {
-  const ref = (0, import_react10.useRef)(null);
-  const state = useToastQueue(getGlobalSnackBarQueue());
+  const ref = (0, import_react9.useRef)(null);
+  const state = (0, import_toast3.useToastQueue)(getGlobalSnackBarQueue());
   const { provider, addProvider, deleteProvider } = useSnackbarGlobalStore(GLOBAL_SNACKBAR_STORE);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     addProvider(ref);
     return () => {
       for (const toast of getGlobalSnackBarQueue().visibleToasts) {