@fibery/ui-kit 1.19.0 → 1.20.0

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;