@fibery/ui-kit 1.19.0 → 1.20.1

package/src/toast/{toast-queue.tsx → toast-queue.ts}

@@ -1,7 +1,10 @@
 import {makePubSub} from "@fibery/helpers/utils/pub-sub";
 import type {ToastProps} from "./toast";
 
-type AddToastProps = Pick<ToastProps, "type" | "title" | "subTitle" | "icon" | "action" | "autoClose" | "open"> & {
+export type AddToastProps = Pick<
+  ToastProps,
+  "type" | "title" | "subTitle" | "icon" | "action" | "duration" | "open"
+> & {
   id?: string;
 };
 type TypedAddProps = Omit<AddToastProps, "type">;
@@ -12,8 +15,15 @@ type QueuedToast = AddToastProps & {
 
 type ToastQueueOpts = {
   maxActiveToasts?: number;
+  onToastAdd?: (params: AddToastProps) => void;
+
+  /** Overrides toast props.
+   * This option is added only to support mapping of billing errors as it was done in toast actions.
+   * Ideally this should be removed and billing errors moved to thunk middlewares
+   */
+  transformToast?: (params: AddToastProps) => AddToastProps;
 };
-export const makeToastQueue = ({maxActiveToasts = 1}: ToastQueueOpts = {}) => {
+export const makeToastQueue = ({maxActiveToasts = 1, onToastAdd, transformToast}: ToastQueueOpts = {}) => {
   const pubSub = makePubSub();
   let queue: QueuedToast[] = [];
   let activeToasts: QueuedToast[] = [];
@@ -35,39 +45,24 @@ export const makeToastQueue = ({maxActiveToasts = 1}: ToastQueueOpts = {}) => {
     pubSub.publish();
   };
 
-  const closeActive = (id: string) => {
-    activeToasts = activeToasts.map((t) => (t.id === id ? {...t, open: false} : t));
-  };
-
-  const removeFromQueue = (id: string) => {
-    queue = queue.filter((queued) => queued.id !== id);
-  };
-
   /**
    * Add toast to queue
    *
    * Pass custom `id` if you don't want toasts to be duplicated.
    * If toast with same id already exists it will be closed to display fresh more relevant one
    */
-  const add = ({id, ...toast}: AddToastProps, {replace = true} = {}) => {
-    if (
-      id &&
-      !replace &&
-      (queue.some((queued) => queued.id === id) || activeToasts.some((active) => active.id === id))
-    ) {
-      return id;
-    }
-
-    if (id && replace) {
-      closeActive(id);
-      removeFromQueue(id);
+  const add = ({id, ...toast}: AddToastProps) => {
+    if (activeToasts.length > 0) {
+      activeToasts[0].open = false;
     }
 
     const t: QueuedToast = {
       id: id || makeId(),
-      ...toast,
+      ...(transformToast ? transformToast(toast) : toast),
     };
 
+    onToastAdd?.(t);
+
     queue.push(t);
 
     updateActiveToasts();
@@ -77,9 +72,10 @@ export const makeToastQueue = ({maxActiveToasts = 1}: ToastQueueOpts = {}) => {
 
   return {
     add,
-    /** close active toast, play exit animation  */
+    /** Mark active toast as closed. Can be used to play exit animation  */
     close(id: string) {
-      closeActive(id);
+      activeToasts = activeToasts.map((t) => (t.id === id ? {...t, open: false} : t));
+
       pubSub.publish();
     },
     /** remove toast from active ones, should be called after exit animation  */

package/src/toast/toast.tsx

@@ -1,6 +1,7 @@
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 import {useControllableState} from "@fibery/react/src/use-controllable-state";
 import {css} from "@linaria/core";
-import {useState} from "react";
+import {useEffect, useRef} from "react";
 import {space, themeVars} from "../design-system";
 import Spinner from "../icons/react/Spinner";
 import SuccessIcon from "../icons/react/Success";
@@ -15,21 +16,23 @@ export type ToastProps = {
   subTitle?: React.ReactNode;
   icon?: React.ReactNode;
   action?: ToastActionElement;
-  autoClose?: boolean;
+  duration?: number;
+  dismissable?: boolean;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
 
   type?: ToastType;
 
-  /** Is called on exit animation end */
-  onRemove?: () => void;
+  /** It gets called after exit animation */
+  onHide?: () => void;
 };
 
 const defaultPropsPerType: Record<ToastType, Partial<ToastProps>> = {
   info: {},
   error: {
     icon: <WarningTriangle color={themeVars.textColor} />,
-    autoClose: false,
+    duration: 10000,
+    dismissable: true,
   },
   loading: {
     icon: <Spinner color={themeVars.textColor} />,
@@ -40,17 +43,19 @@ const defaultPropsPerType: Record<ToastType, Partial<ToastProps>> = {
 };
 
 const rootCss = css`
+  box-sizing: border-box;
+  min-height: 44px;
   min-width: 320px;
   display: flex;
   align-items: center;
-  gap: ${space.l}px;
+  gap: ${space.s12}px;
 `;
 
 const messageCss = css`
   display: flex;
   flex-grow: 1;
   flex-direction: column;
-  gap: ${space.xs}px;
+  gap: ${space.s4}px;
 `;
 
 const iconCss = css`
@@ -65,10 +70,11 @@ export const Toast: React.FC<ToastProps> = (props) => {
     subTitle,
     icon,
     action,
-    autoClose = true,
+    duration = 5000,
+    dismissable,
     open,
     onOpenChange,
-    onRemove,
+    onHide,
   } = {
     ...defaultProps,
     ...props,
@@ -76,31 +82,32 @@ export const Toast: React.FC<ToastProps> = (props) => {
 
   const [isOpen, setOpen] = useControllableState({value: open, defaultValue: true, onChange: onOpenChange});
 
-  const [noReducedMotion] = useState(() => matchMedia("(prefers-reduced-motion: no-preference)").matches);
+  const ref = useRef<HTMLLIElement>(null);
+  const onHideCb = useCallbackRef(onHide);
 
-  const close = autoClose ? null : <ToastClose />;
+  useEffect(() => {
+    const toastEl = ref.current;
+    if (!isOpen) {
+      const emergencyTimeout = setTimeout(onHideCb, 400); // just in case if animationend doesn't fire for some reasons or toast got closed before render
 
-  const onCloseProps = noReducedMotion
-    ? {
-        onOpenChange: setOpen,
+      toastEl?.addEventListener("animationend", onHideCb, {
         // https://github.com/radix-ui/primitives/issues/1020
-        onAnimationEndCapture() {
-          if (!isOpen) {
-            onRemove?.();
-          }
-        },
-      }
-    : {
-        onOpenChange(v: boolean) {
-          setOpen(v);
-          if (!v) {
-            onRemove?.();
-          }
-        },
+        capture: true,
+      });
+
+      return () => {
+        toastEl?.removeEventListener("animationend", onHideCb, {capture: true});
+        clearTimeout(emergencyTimeout);
       };
+    }
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [isOpen, onHideCb]);
+
+  const close = dismissable ? <ToastClose /> : null;
 
   return (
-    <ToastRoot open={open} duration={autoClose ? 5000 : Infinity} className={rootCss} {...onCloseProps}>
+    <ToastRoot ref={ref} open={open} duration={duration} className={rootCss} onOpenChange={setOpen}>
       {icon ? <div className={iconCss}>{icon}</div> : null}
       <div className={messageCss}>
         <ToastTitle>{title}</ToastTitle>

package/src/toast/toaster.tsx

@@ -1,13 +1,10 @@
-import {createContext} from "@fibery/react/src/create-context";
-import React, {useEffect, useSyncExternalStore} from "react";
+import {useSyncExternalStore} from "react";
 import {createInlineTheme} from "../create-inline-theme";
 import {colors, getThemeColors} from "../design-system";
 import {ThemeProvider, useThemeMode} from "../theme-provider";
-import {ToastProvider, ToastViewport} from "./primitives";
+import {ToastViewport} from "./primitives";
 import {Toast} from "./toast";
-import type {ToastQueue} from "./toast-queue";
-import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
-import {reactNodeToString} from "@fibery/react/src/react-node-to-string";
+import {useToast} from "./toast-provider";
 
 const ToastThemeProvider: React.FC<React.PropsWithChildren> = ({children}) => {
   const themeMode = useThemeMode();
@@ -21,52 +18,18 @@ const ToastThemeProvider: React.FC<React.PropsWithChildren> = ({children}) => {
   );
 };
 
-const [Provider, useCtx] = createContext<ToastQueue>("ToastQueue");
+export const Toaster: React.FC = () => {
+  const toastQueue = useToast();
 
-type OnTrackToast = (args: {title: string; type: string}) => void;
-const TrackToast: React.FC<
-  React.PropsWithChildren<{title: React.ReactNode; type: string; onTrackToast: OnTrackToast}>
-> = ({title, type, onTrackToast, children}) => {
-  const onTrackCb = useCallbackRef(onTrackToast);
-  useEffect(() => {
-    onTrackCb({title: reactNodeToString(title), type});
-  }, [onTrackCb, title, type]);
-
-  return children as JSX.Element;
-};
-
-export const Toaster: React.FC<React.PropsWithChildren<{toastQueue: ToastQueue; onTrackToast: OnTrackToast}>> = ({
-  toastQueue,
-  children,
-  onTrackToast,
-}) => {
   const toasts = useSyncExternalStore(toastQueue.subscribe, toastQueue.getActiveToasts);
 
   return (
-    <Provider value={toastQueue}>
-      <ToastProvider>
-        {children}
-
-        <ToastThemeProvider>
-          {toasts.map(({id, open = true, ...toastProps}) => (
-            <TrackToast key={id} title={toastProps.title} type={toastProps.type || "info"} onTrackToast={onTrackToast}>
-              <Toast
-                {...toastProps}
-                open={open}
-                onOpenChange={(v) => {
-                  if (!v) {
-                    toastQueue.close(id);
-                  }
-                }}
-                onRemove={() => toastQueue.remove(id)}
-              />
-            </TrackToast>
-          ))}
+    <ToastThemeProvider>
+      {toasts.map(({id, open, type = "info", ...toastProps}) => (
+        <Toast key={`${id}-${type}`} type={type} {...toastProps} open={open} onHide={() => toastQueue.remove(id)} />
+      ))}
 
-          <ToastViewport />
-        </ToastThemeProvider>
-      </ToastProvider>
-    </Provider>
+      <ToastViewport />
+    </ToastThemeProvider>
   );
 };
-export const useToast = useCtx;

package/src/toast/utils/toastify-item-name.ts

@@ -0,0 +1,6 @@
+const charLimit = 60;
+
+const trimDynamicToastText = (str: string) => (str.length > charLimit ? `${str.slice(0, 60)}...` : str);
+
+export const toastifyItemName = ({prefix, name, postfix}: {prefix?: string; name?: string; postfix?: string}) =>
+  `${prefix ? `${prefix} ` : ""}"${name ? trimDynamicToastText(name) : "Untitled"}"${postfix ? ` ${postfix}` : ""}`;

package/src/tooltip.tsx

@@ -27,7 +27,7 @@ const tooltipStyle = css`
   min-height: 30px;
   max-width: 300px;
   background-color: ${themeVars.tooltipBgColor};
-  padding: ${space.s}px ${space.m}px;
+  padding: ${space.s6}px ${space.s8}px;
   border-radius: ${border.radius6}px;
   box-shadow: ${themeVars.actionMenuShadow};
 
@@ -132,7 +132,7 @@ export const Tooltip = forwardRef<HTMLButtonElement, TooltipProps>(
         </>
       ),
       side,
-      sideOffset = space.xs,
+      sideOffset = space.s4,
       align,
       alignOffset,
       instant,

package/src/icons/ast/RicheditorMarkHighlight.ts

@@ -1,8 +0,0 @@
-
-// This icon file is generated automatically.
-
-import { IconDefinition } from '../types';
-
-const RicheditorMarkHighlight: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{},"children":[{"type":"element","tagName":"path","properties":{"d":"m5.07 16.9.898-.625h2.418c.643 0 1.197-.177 1.66-.607.15-.14.135-.377-.012-.522L5.23 10.438c-.156-.153-.408-.154-.535.023-.34.476-.509 1.087-.509 1.698v2.37l-.89.873c-.382.39-.17.154-.597.624 1.517.595 2.37.874 2.37.874ZM10.653 14.177c.255.25.51.25.764 0l5.997-7.786a1.474 1.474 0 0 0 0-1.746l-1.909-1.87a1.247 1.247 0 0 0-1.781 0l-7.61 6.313c-.255.249-.255.498 0 .748l4.54 4.341Z"},"children":[]}]}],"metadata":""}]},"name":"richeditor-mark-highlight"};
-
-export default RicheditorMarkHighlight;

package/src/icons/react/RicheditorMarkHighlight.tsx

@@ -1,12 +0,0 @@
-// This icon file is generated automatically.
-
-import RicheditorMarkHighlightSvg from '../ast/RicheditorMarkHighlight';
-import { Icon } from '../Icon';
-import { IconBaseProps } from '../types';
-
-const RicheditorMarkHighlight = (
-  props: IconBaseProps,
-): JSX.Element => <Icon {...props} icon={RicheditorMarkHighlightSvg} />;
-
-RicheditorMarkHighlight.displayName = 'RicheditorMarkHighlight';
-export default RicheditorMarkHighlight;