@choice-ui/react 1.6.7 → 1.6.9

package/dist/components/toast/src/store.js

@@ -0,0 +1,205 @@
+const stores = /* @__PURE__ */ new Map();
+const subscribers = /* @__PURE__ */ new Map();
+const DEFAULT_TOASTER_ID = "default";
+const MAX_TOASTS_PER_TOASTER = 100;
+let toastCounter = 0;
+const MAX_COUNTER = Number.MAX_SAFE_INTEGER - 1;
+function generateId() {
+  if (toastCounter >= MAX_COUNTER) {
+    toastCounter = 0;
+  }
+  return `toast-${++toastCounter}-${Date.now()}`;
+}
+function validateToasterId(toasterId) {
+  if (typeof toasterId !== "string" || toasterId.length === 0) {
+    return DEFAULT_TOASTER_ID;
+  }
+  return toasterId.slice(0, 64);
+}
+function getStore(toasterId = DEFAULT_TOASTER_ID) {
+  if (!stores.has(toasterId)) {
+    stores.set(toasterId, {
+      toasts: [],
+      expanded: false,
+      position: "bottom-right"
+    });
+  }
+  return stores.get(toasterId);
+}
+function updateStore(toasterId, updates) {
+  const current = getStore(toasterId);
+  const newState = { ...current, ...updates };
+  stores.set(toasterId, newState);
+  return newState;
+}
+function notify(toasterId = DEFAULT_TOASTER_ID) {
+  const subs = subscribers.get(toasterId);
+  if (subs) {
+    subs.forEach((callback) => callback(getStore(toasterId)));
+  }
+}
+function subscribe(callback, toasterId = DEFAULT_TOASTER_ID) {
+  const validatedId = validateToasterId(toasterId);
+  if (!subscribers.has(validatedId)) {
+    subscribers.set(validatedId, /* @__PURE__ */ new Set());
+  }
+  subscribers.get(validatedId).add(callback);
+  return () => {
+    const subs = subscribers.get(validatedId);
+    subs == null ? void 0 : subs.delete(callback);
+    if ((subs == null ? void 0 : subs.size) === 0) {
+      subscribers.delete(validatedId);
+      const store = stores.get(validatedId);
+      if ((store == null ? void 0 : store.toasts.length) === 0) {
+        stores.delete(validatedId);
+      }
+    }
+  };
+}
+function getSnapshot(toasterId = DEFAULT_TOASTER_ID) {
+  return getStore(toasterId);
+}
+function setToasterConfig(config, toasterId = DEFAULT_TOASTER_ID) {
+  updateStore(toasterId, config);
+  notify(toasterId);
+}
+function addToast(title, type, options = {}, toasterId = DEFAULT_TOASTER_ID) {
+  const validatedId = validateToasterId(toasterId);
+  const store = getStore(validatedId);
+  const id = options.id ?? generateId();
+  const existingIndex = store.toasts.findIndex((t) => t.id === id);
+  const toastData = {
+    id,
+    type,
+    variant: options.variant,
+    title,
+    description: options.description,
+    descriptionHtml: options.descriptionHtml,
+    duration: options.duration,
+    icon: options.icon,
+    action: options.action,
+    cancel: options.cancel,
+    onClose: options.onClose,
+    onAutoClose: options.onAutoClose,
+    dismissible: options.dismissible ?? true,
+    createdAt: Date.now()
+  };
+  let newToasts;
+  if (existingIndex !== -1) {
+    newToasts = [...store.toasts];
+    newToasts[existingIndex] = toastData;
+  } else {
+    newToasts = [toastData, ...store.toasts];
+    if (newToasts.length > MAX_TOASTS_PER_TOASTER) {
+      const removed = newToasts.splice(MAX_TOASTS_PER_TOASTER);
+      removed.forEach((t) => {
+        var _a;
+        return (_a = t.onClose) == null ? void 0 : _a.call(t);
+      });
+    }
+  }
+  updateStore(validatedId, { toasts: newToasts });
+  notify(validatedId);
+  return id;
+}
+function dismiss(id, toasterId = DEFAULT_TOASTER_ID) {
+  var _a;
+  const store = getStore(toasterId);
+  const toast2 = store.toasts.find((t) => t.id === id);
+  if (toast2) {
+    (_a = toast2.onClose) == null ? void 0 : _a.call(toast2);
+    const newToasts = store.toasts.filter((t) => t.id !== id);
+    updateStore(toasterId, { toasts: newToasts });
+    notify(toasterId);
+  }
+}
+function dismissAll(toasterId) {
+  if (toasterId) {
+    const store = getStore(toasterId);
+    store.toasts.forEach((t) => {
+      var _a;
+      return (_a = t.onClose) == null ? void 0 : _a.call(t);
+    });
+    updateStore(toasterId, { toasts: [] });
+    notify(toasterId);
+  } else {
+    stores.forEach((store, id) => {
+      store.toasts.forEach((t) => {
+        var _a;
+        return (_a = t.onClose) == null ? void 0 : _a.call(t);
+      });
+      updateStore(id, { toasts: [] });
+      notify(id);
+    });
+  }
+}
+function updateHeight(id, height, toasterId = DEFAULT_TOASTER_ID) {
+  const store = getStore(toasterId);
+  const toastIndex = store.toasts.findIndex((t) => t.id === id);
+  if (toastIndex !== -1 && store.toasts[toastIndex].height !== height) {
+    const newToasts = [...store.toasts];
+    newToasts[toastIndex] = { ...newToasts[toastIndex], height };
+    updateStore(toasterId, { toasts: newToasts });
+    notify(toasterId);
+  }
+}
+function setExpanded(expanded, toasterId = DEFAULT_TOASTER_ID) {
+  updateStore(toasterId, { expanded });
+  notify(toasterId);
+}
+function promiseToast(promise, options, toasterId = DEFAULT_TOASTER_ID) {
+  const loadingOpts = typeof options.loading === "string" ? { title: options.loading } : options.loading;
+  const id = addToast(
+    loadingOpts.title,
+    "loading",
+    { ...loadingOpts, duration: Infinity },
+    toasterId
+  );
+  promise.then((data) => {
+    const successOpts = typeof options.success === "function" ? options.success(data) : options.success;
+    const opts = typeof successOpts === "string" ? { title: successOpts } : successOpts;
+    addToast(opts.title, "success", { ...opts, id }, toasterId);
+  }).catch((err) => {
+    const errorOpts = typeof options.error === "function" ? options.error(err) : options.error;
+    const opts = typeof errorOpts === "string" ? { title: errorOpts } : errorOpts;
+    addToast(opts.title, "error", { ...opts, id }, toasterId);
+  });
+  return promise;
+}
+function createToastApi(toasterId = DEFAULT_TOASTER_ID) {
+  const validatedId = validateToasterId(toasterId);
+  const api = (title, options) => addToast(title, "default", options, validatedId);
+  api.success = (title, options) => addToast(title, "success", options, validatedId);
+  api.error = (title, options) => addToast(title, "error", options, validatedId);
+  api.warning = (title, options) => addToast(title, "warning", options, validatedId);
+  api.info = (title, options) => addToast(title, "info", options, validatedId);
+  api.loading = (title, options) => addToast(title, "loading", options, validatedId);
+  api.promise = (promise, options) => promiseToast(promise, options, validatedId);
+  api.dismiss = (id) => dismiss(id, validatedId);
+  api.dismissAll = () => dismissAll(validatedId);
+  return api;
+}
+const toastApiCache = /* @__PURE__ */ new Map();
+function getOrCreateToastApi(toasterId) {
+  const validatedId = validateToasterId(toasterId);
+  let api = toastApiCache.get(validatedId);
+  if (!api) {
+    api = createToastApi(validatedId);
+    toastApiCache.set(validatedId, api);
+  }
+  return api;
+}
+const baseToast = createToastApi();
+const toast = Object.assign(baseToast, {
+  use: (toasterId) => getOrCreateToastApi(toasterId)
+});
+export {
+  dismiss,
+  dismissAll,
+  getSnapshot,
+  setExpanded,
+  setToasterConfig,
+  subscribe,
+  toast,
+  updateHeight
+};

package/dist/components/toast/src/toaster.d.ts

@@ -0,0 +1,87 @@
+import { ReactNode } from 'react';
+import { ToasterActionsSlot, ToasterDescriptionSlot, ToasterIconSlot, ToasterItemSlot, ToasterTitleSlot } from './components';
+import { ToastPosition } from './types';
+export interface ToasterProps {
+    /**
+     * Unique ID for this Toaster instance
+     * Use this to have multiple Toaster instances in the same app
+     * @default "default"
+     */
+    id?: string;
+    /**
+     * Position of the toaster
+     * @default "bottom-right"
+     */
+    position?: ToastPosition;
+    /**
+     * Render toasts into a custom container
+     */
+    container?: HTMLElement | null;
+    /**
+     * Label for accessibility
+     * @default "Notifications"
+     */
+    label?: string;
+    /**
+     * Whether to use a portal for rendering
+     * @default true
+     */
+    portal?: boolean;
+    /**
+     * Offset from viewport edges in pixels
+     * @default 16
+     */
+    offset?: number;
+    /**
+     * Default duration for toasts in ms
+     * @default 5000
+     */
+    duration?: number;
+    /**
+     * Maximum number of visible toasts
+     * @default 3
+     */
+    visibleToasts?: number;
+    /**
+     * Additional class name
+     */
+    className?: string;
+    /**
+     * Children - use Toaster.Item to customize toast rendering
+     */
+    children?: ReactNode;
+    /**
+     * Show countdown progress bar at the bottom of each toast
+     * @default false
+     */
+    showProgress?: boolean;
+    /**
+     * Layout mode for toasts
+     * @default "default"
+     */
+    layout?: "default" | "compact";
+}
+interface ToasterComponent extends React.MemoExoticComponent<React.ForwardRefExoticComponent<ToasterProps & React.RefAttributes<HTMLDivElement>>> {
+    Item: typeof ToasterItemSlot;
+    Icon: typeof ToasterIconSlot;
+    Title: typeof ToasterTitleSlot;
+    Description: typeof ToasterDescriptionSlot;
+    Actions: typeof ToasterActionsSlot;
+}
+/**
+ * Toaster component with compound pattern
+ *
+ * @example
+ * ```tsx
+ * <Toaster id="my-toaster">
+ *   <Toaster.Item className="custom-class">
+ *     <Toaster.Icon>{(type, defaultIcon) => <CustomIcon type={type} />}</Toaster.Icon>
+ *     <Toaster.Title className="font-bold uppercase" />
+ *     <Toaster.Description className="text-sm" />
+ *     <Toaster.Actions>{(action, cancel, close) => <CustomActions />}</Toaster.Actions>
+ *   </Toaster.Item>
+ * </Toaster>
+ * ```
+ */
+export declare const Toaster: ToasterComponent;
+export {};

package/dist/components/toast/src/toaster.js

@@ -0,0 +1,271 @@
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence } from "framer-motion";
+import { memo, forwardRef, useMemo, Children, isValidElement, useRef, useState, useCallback, useSyncExternalStore, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { useEventCallback } from "usehooks-ts";
+import { subscribe, getSnapshot, setToasterConfig, dismiss, setExpanded } from "./store.js";
+import { toastViewportTv } from "./tv.js";
+import { ToasterActionsSlot, ToasterDescriptionSlot, ToasterTitleSlot, ToasterIconSlot, ToasterItemSlot } from "./components/toaster-slots.js";
+import { DEFAULT_HEIGHT, GAP, ToasterItem } from "./components/toaster-item.js";
+import { tcx } from "../../../shared/utils/tcx/tcx.js";
+import { mergeRefs } from "../../../shared/utils/merge-refs/merge-refs.js";
+let sharedPortalContainer = null;
+let portalRefCount = 0;
+function getSharedPortalContainer() {
+  if (!sharedPortalContainer && typeof document !== "undefined") {
+    sharedPortalContainer = document.createElement("div");
+    sharedPortalContainer.setAttribute("data-toast-portal", "");
+    document.body.appendChild(sharedPortalContainer);
+  }
+  return sharedPortalContainer;
+}
+function releaseSharedPortalContainer() {
+  portalRefCount--;
+  if (portalRefCount <= 0 && sharedPortalContainer) {
+    sharedPortalContainer.remove();
+    sharedPortalContainer = null;
+    portalRefCount = 0;
+  }
+}
+const ToasterRoot = memo(
+  forwardRef(function Toaster2({
+    id: toasterId = "default",
+    position = "bottom-right",
+    container,
+    label = "Notifications",
+    portal = true,
+    offset = 16,
+    duration = 5e3,
+    visibleToasts = 3,
+    className,
+    children,
+    showProgress = false,
+    layout = "default"
+  }, ref) {
+    const collectedSlots = useMemo(() => {
+      const slots = {};
+      Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === ToasterItemSlot) {
+          const itemProps = child.props;
+          slots.itemClassName = itemProps.className;
+          slots.itemStyle = itemProps.style;
+          Children.forEach(itemProps.children, (slotChild) => {
+            if (!isValidElement(slotChild)) return;
+            if (slotChild.type === ToasterIconSlot) {
+              const iconProps = slotChild.props;
+              slots.iconClassName = iconProps.className;
+              slots.iconStyle = iconProps.style;
+              slots.renderIcon = iconProps.children;
+            } else if (slotChild.type === ToasterTitleSlot) {
+              const titleProps = slotChild.props;
+              slots.titleClassName = titleProps.className;
+              slots.titleStyle = titleProps.style;
+            } else if (slotChild.type === ToasterDescriptionSlot) {
+              const descProps = slotChild.props;
+              slots.descriptionClassName = descProps.className;
+              slots.descriptionStyle = descProps.style;
+            } else if (slotChild.type === ToasterActionsSlot) {
+              const actionsProps = slotChild.props;
+              slots.actionsClassName = actionsProps.className;
+              slots.actionsStyle = actionsProps.style;
+              slots.renderActions = actionsProps.children;
+            }
+          });
+        }
+      });
+      return slots;
+    }, [children]);
+    const internalRef = useRef(null);
+    const [hovering, setHovering] = useState(false);
+    const subscribeToStore = useCallback(
+      (callback) => subscribe(callback, toasterId),
+      [toasterId]
+    );
+    const getStoreSnapshot = useCallback(() => getSnapshot(toasterId), [toasterId]);
+    const state = useSyncExternalStore(subscribeToStore, getStoreSnapshot, getStoreSnapshot);
+    useEffect(() => {
+      setToasterConfig({ position }, toasterId);
+    }, [position, toasterId]);
+    const timersRef = useRef(/* @__PURE__ */ new Map());
+    const remainingRef = useRef(/* @__PURE__ */ new Map());
+    useEffect(() => {
+      const currentIds = new Set(state.toasts.map((t) => t.id));
+      timersRef.current.forEach((timer, id) => {
+        if (!currentIds.has(id)) {
+          clearTimeout(timer);
+          timersRef.current.delete(id);
+          remainingRef.current.delete(id);
+        }
+      });
+      state.toasts.forEach((toast) => {
+        var _a;
+        if (toast.type === "loading") return;
+        const toastDuration = toast.duration ?? duration;
+        if (toastDuration <= 0) return;
+        const hasTimer = timersRef.current.has(toast.id);
+        if (hovering) {
+          if (hasTimer) {
+            clearTimeout(timersRef.current.get(toast.id));
+            timersRef.current.delete(toast.id);
+            const elapsed = Date.now() - toast.createdAt;
+            const remaining = Math.max(0, toastDuration - elapsed);
+            remainingRef.current.set(toast.id, remaining);
+          }
+        } else {
+          if (!hasTimer) {
+            let delay = remainingRef.current.get(toast.id);
+            if (delay === void 0) {
+              const elapsed = Date.now() - toast.createdAt;
+              delay = Math.max(0, toastDuration - elapsed);
+            }
+            remainingRef.current.delete(toast.id);
+            if (delay <= 0) {
+              (_a = toast.onAutoClose) == null ? void 0 : _a.call(toast);
+              dismiss(toast.id, toasterId);
+              return;
+            }
+            const timer = setTimeout(() => {
+              var _a2;
+              (_a2 = toast.onAutoClose) == null ? void 0 : _a2.call(toast);
+              dismiss(toast.id, toasterId);
+              timersRef.current.delete(toast.id);
+              remainingRef.current.delete(toast.id);
+            }, delay);
+            timersRef.current.set(toast.id, timer);
+          }
+        }
+      });
+    }, [state.toasts, duration, hovering, toasterId]);
+    useEffect(() => {
+      return () => {
+        timersRef.current.forEach((timer) => clearTimeout(timer));
+        timersRef.current.clear();
+        remainingRef.current.clear();
+      };
+    }, []);
+    const handleMouseEnter = useEventCallback(() => {
+      setHovering(true);
+      setExpanded(true, toasterId);
+    });
+    const handleMouseLeave = useEventCallback(() => {
+      setHovering(false);
+      setExpanded(false, toasterId);
+    });
+    const handleKeyDown = useEventCallback((e) => {
+      var _a;
+      if (e.key === "F6" && state.toasts.length > 0) {
+        e.preventDefault();
+        const firstToast = (_a = internalRef.current) == null ? void 0 : _a.querySelector(
+          '[role="alertdialog"], [role="status"]'
+        );
+        if (firstToast instanceof HTMLElement) {
+          firstToast.focus();
+        }
+      }
+    });
+    const visibleToastsList = useMemo(
+      () => state.toasts.slice(0, visibleToasts),
+      [state.toasts, visibleToasts]
+    );
+    useEffect(() => {
+      if (visibleToastsList.length === 0 && hovering) {
+        setHovering(false);
+        setExpanded(false, toasterId);
+      }
+    }, [visibleToastsList.length, hovering, toasterId]);
+    const containerHeight = useMemo(() => {
+      var _a;
+      if (visibleToastsList.length === 0) return void 0;
+      if (state.expanded) {
+        const totalHeight = visibleToastsList.reduce((acc, toast, index) => {
+          const height = toast.height || DEFAULT_HEIGHT;
+          const gap = index < visibleToastsList.length - 1 ? GAP : 0;
+          return acc + height + gap;
+        }, 0);
+        return totalHeight;
+      } else {
+        const frontmostHeight = ((_a = visibleToastsList[0]) == null ? void 0 : _a.height) || DEFAULT_HEIGHT;
+        const peekOffset = (visibleToastsList.length - 1) * 8;
+        return frontmostHeight + peekOffset;
+      }
+    }, [state.expanded, visibleToastsList]);
+    const toastHeights = useMemo(
+      () => visibleToastsList.map((t) => t.height ?? 0),
+      [visibleToastsList]
+    );
+    const tv = toastViewportTv({ position, expanded: state.expanded, layout });
+    const viewportStyle = useMemo(() => {
+      var _a;
+      const frontmostHeight = (_a = visibleToastsList[0]) == null ? void 0 : _a.height;
+      return {
+        "--toast-frontmost-height": frontmostHeight ? `${frontmostHeight}px` : void 0,
+        "--toast-offset": `${offset}px`,
+        height: containerHeight ? `${containerHeight}px` : void 0
+      };
+    }, [visibleToastsList, offset, containerHeight]);
+    useEffect(() => {
+      if (portal && !container) {
+        portalRefCount++;
+        return releaseSharedPortalContainer;
+      }
+    }, [portal, container]);
+    if (visibleToastsList.length === 0) return null;
+    const content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: mergeRefs(internalRef, ref),
+        role: "region",
+        "aria-live": "polite",
+        "aria-atomic": "false",
+        "aria-relevant": "additions text",
+        "aria-label": label,
+        tabIndex: -1,
+        "data-toaster": true,
+        "data-toaster-id": toasterId,
+        "data-position": position,
+        style: viewportStyle,
+        className: tcx(tv, className),
+        onKeyDown: handleKeyDown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: /* @__PURE__ */ jsx(AnimatePresence, { children: visibleToastsList.map((toast, index) => /* @__PURE__ */ jsx(
+          ToasterItem,
+          {
+            toast,
+            index,
+            total: visibleToastsList.length,
+            expanded: state.expanded,
+            position,
+            toasterId,
+            toastHeights,
+            slotProps: collectedSlots,
+            showProgress,
+            defaultDuration: duration,
+            isPaused: hovering,
+            layout
+          },
+          toast.id
+        )) })
+      }
+    );
+    if (!portal) {
+      return content;
+    }
+    const portalContainer = container ?? getSharedPortalContainer();
+    if (!portalContainer) {
+      return content;
+    }
+    return createPortal(content, portalContainer);
+  })
+);
+ToasterRoot.displayName = "Toaster";
+const Toaster = Object.assign(ToasterRoot, {
+  Item: ToasterItemSlot,
+  Icon: ToasterIconSlot,
+  Title: ToasterTitleSlot,
+  Description: ToasterDescriptionSlot,
+  Actions: ToasterActionsSlot
+});
+export {
+  Toaster
+};