@fibery/ui-kit 1.18.0 → 1.19.0

package/src/{Select → select}/index.tsx

@@ -22,12 +22,13 @@ import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
 import {componentsStyles, singleLineComponentsStyle, virtualizedStyles, zIndexStyles} from "./styles";
 import {useSelectControlSettings} from "./select-control-settings-context";
-import {Option} from "./custom-select-partials/option";
+import {Option, OptionSlow} from "./custom-select-partials/option";
 import {Menu} from "./custom-select-partials/menu";
 import {GroupHeading} from "./custom-select-partials/group-heading";
 import {DropdownIndicator} from "./custom-select-partials/drop-down-indicator";
 import {NoOptionsMessage} from "./custom-select-partials/no-option-message";
 import {ClearIndicator} from "./custom-select-partials/clear-indicator";
+import {isObject} from "lodash";
 
 type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean};
 
@@ -69,7 +70,6 @@ export type SelectProps<
   isCollectionMode?: IsMulti;
   disabled?: boolean;
 };
-
 export function SingleRowSelect<
   Option = unknown,
   IsMulti extends boolean = boolean,
@@ -86,6 +86,23 @@ export function SingleRowSelect<
   );
 }
 
+const FAST_OPTION_USAGE_THRESHOLD = 200;
+function isGroup<Option, Group extends GroupBase<Option>>(optionOrGroup: Option | Group): optionOrGroup is Group {
+  return isObject(optionOrGroup) && "options" in optionOrGroup;
+}
+function countOptions<Option, Group extends GroupBase<Option>>(categorizedOptions?: OptionsOrGroups<Option, Group>) {
+  if (!categorizedOptions) {
+    return 0;
+  }
+  return categorizedOptions.reduce<number>((optionsAccumulator, categorizedOption) => {
+    if (isGroup<Option, Group>(categorizedOption)) {
+      return optionsAccumulator + categorizedOption.options.length;
+    } else {
+      return optionsAccumulator + 1;
+    }
+  }, 0);
+}
+
 export const Select = forwardRef(function Select<
   Option = unknown,
   IsMulti extends boolean = boolean,
@@ -108,6 +125,9 @@ export const Select = forwardRef(function Select<
 ) {
   const {getPopupContainerElement, zIndex} = useSelectControlSettings();
   const [menuOpenState, setMenuOpenState] = useState(rest.defaultMenuIsOpen);
+  const optionsCount = useMemo(() => {
+    return countOptions<Option, Group>(rest.options);
+  }, [rest.options]);
   const onMenuOpenWrapped = useCallback(() => {
     setMenuOpenState(true);
     onMenuOpen && onMenuOpen();
@@ -176,7 +196,13 @@ export const Select = forwardRef(function Select<
         Menu: Menu,
         DropdownIndicator,
         ClearIndicator,
-        Option,
+        /*
+       Fast Options break option focus on hover behaviour but help with slow React Select performance with large options list.
+       This isolates bug for big lists only
+       Read Option definition for more info
+       bug here: https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
+       */
+        Option: optionsCount > FAST_OPTION_USAGE_THRESHOLD ? Option : OptionSlow,
         MultiValueRemove: ClearIndicator,
         NoOptionsMessage,
         GroupHeading,
@@ -222,6 +248,9 @@ export function CreatableSelectInner<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   ref: any
 ) {
+  const optionsCount = useMemo(() => {
+    return countOptions<Option, Group>(rest.options);
+  }, [rest.options]);
   return (
     <BaseCreatableSelect
       ref={ref}
@@ -239,7 +268,13 @@ export function CreatableSelectInner<
         MenuList: virtualized ? WindowedMenuList : reactSelectComponents.MenuList,
         DropdownIndicator,
         ClearIndicator,
-        Option,
+        /*
+       Fast Options break option focus on hover behaviour but help with slow React Select performance with large options list.
+       This isolates bug for big lists only
+       Read Option definition for more info
+       bug here: https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
+       */
+        Option: optionsCount > FAST_OPTION_USAGE_THRESHOLD ? Option : OptionSlow,
         MultiValueRemove: ClearIndicator,
         NoOptionsMessage,
         GroupHeading,

package/src/{Select → select}/select-in-popover.tsx

@@ -1,5 +1,5 @@
 import {css, cx} from "@linaria/core";
-import {border, radius, space, textStyles} from "../design-system";
+import {border, space, textStyles} from "../design-system";
 import {inputOverrides} from "../antd/styles";
 import React, {
   ComponentType,
@@ -12,7 +12,7 @@ import React, {
   useRef,
   useState,
 } from "react";
-import {Popup} from "../Popup";
+import {Popup} from "../popup";
 import {$TSFixMe} from "../tsfixme";
 import {
   combineStyles,
@@ -38,7 +38,7 @@ const popupClassName = css`
 `;
 
 const valueClassName = css`
-  border-radius: ${radius}px;
+  border-radius: ${border.radius4}px;
 
   &:focus {
     outline: none;
@@ -81,7 +81,7 @@ export const selectInPopupStyles = {
     marginTop: space.s,
     marginBottom: 0,
     boxShadow: "none",
-    borderRadius: radius,
+    borderRadius: border.radius4,
   }),
 };
 

package/src/{Select → select}/styles.ts

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import type {ControlProps, CSSObjectWithLabel, StylesConfig} from "react-select";
 import {inputOverrides} from "../antd/styles";
 import {layout, space, themeVars} from "../design-system";
-import {OptionNulledStyles} from "./custom-select-partials/option";
+import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
 import {MenuNulledStyles} from "./custom-select-partials/menu";
 import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
 
@@ -42,7 +42,7 @@ function createControlStyle({
 }
 
 export const virtualizedStyles: StylesConfig = {
-  option: () => OptionNulledStyles,
+  option: () => ({...OptionNulledVitualizedStyles, ...OptionNulledStyles}),
   groupHeading: (provided) => ({
     ...provided,
     height: layout.menuItemHeight,
@@ -64,9 +64,7 @@ export const zIndexStyles = (zIndex: number): StylesConfig => ({
 });
 
 export const componentsStyles: StylesConfig = {
-  option: () => ({
-    minHeight: layout.menuItemHeight,
-  }),
+  option: () => OptionNulledStyles,
   placeholder: (provided) => ({
     ...provided,
     color: themeVars.disabledTextColor,

package/src/toast/primitives.tsx

@@ -1,24 +1,31 @@
+import {preventDefault} from "@fibery/react/src/prevent-default";
 import {css, cx} from "@linaria/core";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import {ElementRef, forwardRef} from "react";
+import {IconButton} from "../button/icon-button";
 import {border, space, textStyles, themeVars} from "../design-system";
 import CloseIcon from "../icons/react/Close";
-import {IconButton} from "../Button/icon-button";
-import {Button} from "../button";
-import {ButtonProps} from "../Button/button";
-import {useTheme} from "../theme-provider";
 
 export const ToastProvider = ToastPrimitives.Provider;
 
 const viewportCss = css`
   position: fixed;
   left: 50%;
-  transform: translateX(-50%);
   bottom: 0;
+  transform: translateX(-50%);
+
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: center;
+  gap: ${space.s16}px;
   margin: 0;
   z-index: 1010; // inherited from old toast implementation
-  padding: ${space.xl}px;
+  padding: 0;
   list-style: none;
+
+  &:not(:empty) {
+    padding: ${space.xl}px; // increased mouse hover area to pause timers of toast
+  }
 `;
 
 export const ToastViewport = forwardRef<
@@ -29,6 +36,8 @@ export const ToastViewport = forwardRef<
 });
 
 const rootCss = css`
+  user-select: auto !important;
+
   background-color: ${themeVars.colorBgToastDefault};
   padding: ${space.m}px ${space.m * 2}px;
   border-radius: ${border.radius6}px;
@@ -89,7 +98,17 @@ const rootCss = css`
 
 export const ToastRoot = forwardRef<ElementRef<typeof ToastPrimitives.Root>, ToastPrimitives.ToastProps>(
   ({className, ...props}, ref) => {
-    return <ToastPrimitives.Root ref={ref} className={cx(rootCss, className)} {...props}></ToastPrimitives.Root>;
+    return (
+      <ToastPrimitives.Root
+        ref={ref}
+        className={cx(rootCss, className)}
+        onSwipeStart={preventDefault}
+        onSwipeMove={preventDefault}
+        onSwipeCancel={preventDefault}
+        onSwipeEnd={preventDefault}
+        {...props}
+      />
+    );
   }
 );
 
@@ -115,20 +134,6 @@ export const ToastSubtitle = forwardRef<
   return <ToastPrimitives.Description ref={ref} className={cx(className, descriptionCss)} {...props} />;
 });
 
-export const ToastAction = forwardRef<
-  ElementRef<typeof ToastPrimitives.Action>,
-  ButtonProps & {altText: ToastPrimitives.ToastActionProps["altText"]}
->(({children, altText, ...props}, ref) => {
-  const theme = useTheme();
-  return (
-    <ToastPrimitives.Action ref={ref} altText={altText} asChild>
-      <Button color={theme.textColor} {...props}>
-        {children}
-      </Button>
-    </ToastPrimitives.Action>
-  );
-});
-
 export const ToastClose = () => {
   return (
     <ToastPrimitives.Close aria-label="Dismiss" asChild>

package/src/toast/toast-action.tsx

@@ -0,0 +1,20 @@
+import {Action as RadixToastAction, type ToastActionProps} from "@radix-ui/react-toast";
+import {ElementRef, forwardRef} from "react";
+import {ButtonProps} from "../button/button";
+import {Button} from "../button";
+import {useTheme} from "../theme-provider";
+
+export const ToastAction = forwardRef<
+  ElementRef<typeof RadixToastAction>,
+  ButtonProps & {altText: ToastActionProps["altText"]}
+>(({children, altText, ...props}, ref) => {
+  const theme = useTheme();
+  return (
+    <RadixToastAction ref={ref} altText={altText} asChild>
+      <Button color={theme.textColor} {...props}>
+        {children}
+      </Button>
+    </RadixToastAction>
+  );
+});
+export type ToastActionElement = React.ReactElement<typeof ToastAction>;

package/src/toast/toast-queue.tsx

@@ -0,0 +1,121 @@
+import {makePubSub} from "@fibery/helpers/utils/pub-sub";
+import type {ToastProps} from "./toast";
+
+type AddToastProps = Pick<ToastProps, "type" | "title" | "subTitle" | "icon" | "action" | "autoClose" | "open"> & {
+  id?: string;
+};
+type TypedAddProps = Omit<AddToastProps, "type">;
+
+type QueuedToast = AddToastProps & {
+  id: string;
+};
+
+type ToastQueueOpts = {
+  maxActiveToasts?: number;
+};
+export const makeToastQueue = ({maxActiveToasts = 1}: ToastQueueOpts = {}) => {
+  const pubSub = makePubSub();
+  let queue: QueuedToast[] = [];
+  let activeToasts: QueuedToast[] = [];
+
+  let count = 0;
+
+  const makeId = () => {
+    return `toast-${count++}`;
+  };
+
+  const updateActiveToasts = () => {
+    const freeSlots = maxActiveToasts - activeToasts.length;
+
+    const newToasts = queue.slice(0, freeSlots);
+    queue = queue.slice(freeSlots);
+
+    activeToasts = activeToasts.concat(newToasts);
+
+    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 t: QueuedToast = {
+      id: id || makeId(),
+      ...toast,
+    };
+
+    queue.push(t);
+
+    updateActiveToasts();
+
+    return t.id;
+  };
+
+  return {
+    add,
+    /** close active toast, play exit animation  */
+    close(id: string) {
+      closeActive(id);
+      pubSub.publish();
+    },
+    /** remove toast from active ones, should be called after exit animation  */
+    remove(id: string) {
+      activeToasts = activeToasts.filter((t) => t.id !== id);
+
+      updateActiveToasts();
+    },
+    getActiveToasts() {
+      return activeToasts;
+    },
+    subscribe: pubSub.subscribe,
+    unsubscribe: pubSub.unsubscribe,
+
+    info(t: TypedAddProps) {
+      return add(t);
+    },
+    success(t: TypedAddProps) {
+      return add({
+        type: "success",
+        ...t,
+      });
+    },
+    error(t: TypedAddProps) {
+      return add({
+        type: "error",
+        ...t,
+      });
+    },
+    loading(t: TypedAddProps) {
+      return add({
+        type: "loading",
+        ...t,
+      });
+    },
+  };
+};
+
+export type ToastQueue = ReturnType<typeof makeToastQueue>;

package/src/toast/toast.tsx

@@ -0,0 +1,114 @@
+import {useControllableState} from "@fibery/react/src/use-controllable-state";
+import {css} from "@linaria/core";
+import {useState} from "react";
+import {space, themeVars} from "../design-system";
+import Spinner from "../icons/react/Spinner";
+import SuccessIcon from "../icons/react/Success";
+import WarningTriangle from "../icons/react/WarningTriangle";
+import {ToastClose, ToastRoot, ToastSubtitle, ToastTitle} from "./primitives";
+import type {ToastActionElement} from "./toast-action";
+
+type ToastType = "info" | "error" | "success" | "loading";
+
+export type ToastProps = {
+  title: React.ReactNode;
+  subTitle?: React.ReactNode;
+  icon?: React.ReactNode;
+  action?: ToastActionElement;
+  autoClose?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+
+  type?: ToastType;
+
+  /** Is called on exit animation end */
+  onRemove?: () => void;
+};
+
+const defaultPropsPerType: Record<ToastType, Partial<ToastProps>> = {
+  info: {},
+  error: {
+    icon: <WarningTriangle color={themeVars.textColor} />,
+    autoClose: false,
+  },
+  loading: {
+    icon: <Spinner color={themeVars.textColor} />,
+  },
+  success: {
+    icon: <SuccessIcon color={themeVars.textColor} />,
+  },
+};
+
+const rootCss = css`
+  min-width: 320px;
+  display: flex;
+  align-items: center;
+  gap: ${space.l}px;
+`;
+
+const messageCss = css`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: ${space.xs}px;
+`;
+
+const iconCss = css`
+  grid-area: icon;
+`;
+
+export const Toast: React.FC<ToastProps> = (props) => {
+  const defaultProps = defaultPropsPerType[props.type || "info"];
+
+  const {
+    title,
+    subTitle,
+    icon,
+    action,
+    autoClose = true,
+    open,
+    onOpenChange,
+    onRemove,
+  } = {
+    ...defaultProps,
+    ...props,
+  };
+
+  const [isOpen, setOpen] = useControllableState({value: open, defaultValue: true, onChange: onOpenChange});
+
+  const [noReducedMotion] = useState(() => matchMedia("(prefers-reduced-motion: no-preference)").matches);
+
+  const close = autoClose ? null : <ToastClose />;
+
+  const onCloseProps = noReducedMotion
+    ? {
+        onOpenChange: setOpen,
+        // https://github.com/radix-ui/primitives/issues/1020
+        onAnimationEndCapture() {
+          if (!isOpen) {
+            onRemove?.();
+          }
+        },
+      }
+    : {
+        onOpenChange(v: boolean) {
+          setOpen(v);
+          if (!v) {
+            onRemove?.();
+          }
+        },
+      };
+
+  return (
+    <ToastRoot open={open} duration={autoClose ? 5000 : Infinity} className={rootCss} {...onCloseProps}>
+      {icon ? <div className={iconCss}>{icon}</div> : null}
+      <div className={messageCss}>
+        <ToastTitle>{title}</ToastTitle>
+        {subTitle ? <ToastSubtitle>{subTitle}</ToastSubtitle> : null}
+      </div>
+
+      {action}
+      {close}
+    </ToastRoot>
+  );
+};

package/src/toast/toaster.tsx

@@ -0,0 +1,72 @@
+import {createContext} from "@fibery/react/src/create-context";
+import React, {useEffect, 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 {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";
+
+const ToastThemeProvider: React.FC<React.PropsWithChildren> = ({children}) => {
+  const themeMode = useThemeMode();
+  const theme = getThemeColors(colors.brandColors.blue, themeMode === "dark" ? "light" : "dark");
+  const inlineTheme = createInlineTheme(theme, []);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div style={inlineTheme}>{children}</div>
+    </ThemeProvider>
+  );
+};
+
+const [Provider, useCtx] = createContext<ToastQueue>("ToastQueue");
+
+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>
+          ))}
+
+          <ToastViewport />
+        </ToastThemeProvider>
+      </ToastProvider>
+    </Provider>
+  );
+};
+export const useToast = useCtx;

package/src/Select/custom-select-partials/option.tsx

@@ -1,92 +0,0 @@
-import {OptionProps} from "react-select";
-import {components} from "react-windowed-select";
-import {GroupBase} from "../index";
-import {css, cx} from "@linaria/core";
-import {border, layout, space, textStyles, themeVars, transition} from "../../design-system";
-import {useMemo} from "react";
-
-export const OptionNulledStyles = {
-  height: layout.menuItemHeight,
-};
-const OptionWrapperClass = css`
-  max-width: 100%;
-  flex-basis: 100%;
-  display: flex;
-  align-items: center;
-  align-content: center;
-  ${{...textStyles.regular}};
-  color: ${themeVars.textColor};
-  background: ${themeVars.colorBgSelectOptionDefault};
-  border-radius: ${border.radius6}px;
-  padding: 0 ${space.s}px;
-  column-gap: ${space.xs}px;
-  transition: background-color ${transition}, color ${transition};
-`;
-const OptionRootClass = css`
-  padding: 0 ${space.s}px ${space.xxs}px;
-  display: flex;
-  align-items: stretch;
-  justify-content: stretch;
-  cursor: pointer;
-  &:hover {
-    .${OptionWrapperClass} {
-      background: ${themeVars.colorBgSelectOptionDefaultHover};
-    }
-  }
-`;
-
-const DisabledOptionClass = css`
-  cursor: not-allowed;
-  .${OptionWrapperClass} {
-    > * {
-      opacity: ${themeVars.opacitySelectOptionDisabled};
-    }
-    background: ${themeVars.colorBgSelectOptionDisabled};
-  }
-  &:hover {
-    .${OptionWrapperClass} {
-      background: ${themeVars.colorBgSelectOptionDisabled};
-    }
-  }
-`;
-const SelectedOptionClass = css`
-  cursor: default;
-  .${OptionWrapperClass} {
-    background: ${themeVars.colorBgSelectOptionSelected};
-  }
-  &:hover {
-    .${OptionWrapperClass} {
-      background: ${themeVars.colorBgSelectOptionSelectedHover};
-    }
-  }
-  &.${DisabledOptionClass} {
-    background: ${themeVars.colorBgSelectOptionSelectedDisabled};
-    &:hover {
-      background: ${themeVars.colorBgSelectOptionSelectedDisabled};
-    }
-  }
-`;
-export function Option<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
-  props: OptionProps<Option, IsMulti, Group>
-) {
-  const {children, ...rest} = props;
-  const {isDisabled, isFocused} = rest;
-  const className = useMemo(
-    () =>
-      cx(
-        rest.innerProps.className,
-        OptionRootClass,
-        isFocused && SelectedOptionClass, //do not use isSelected as flag to determine if item is selected. It is not always true, bug
-        isDisabled && DisabledOptionClass
-      ),
-    [rest.innerProps.className, isDisabled, isFocused]
-  );
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const {onMouseMove, onMouseOver, ...truncatedProps} = rest.innerProps;
-  const newProps = Object.assign(rest, {innerProps: truncatedProps});
-  return (
-    <components.Option {...newProps} className={className}>
-      <div className={OptionWrapperClass}>{children}</div>
-    </components.Option>
-  );
-}