@fibery/ui-kit 1.18.0 → 1.20.0

package/src/{Select → select}/custom-select-partials/menu.tsx

@@ -3,12 +3,18 @@ import {CSSObjectWithLabel, MenuProps} from "react-select";
 import cn from "classnames";
 import {components} from "react-windowed-select";
 import {css} from "@linaria/core";
-import {border, themeVars} from "../../design-system";
+import {border, space, themeVars} from "../../design-system";
 
+export const MenuListNulledStyles: CSSObjectWithLabel = {
+  paddingTop: "",
+  paddingBottom: "",
+};
 export const MenuNulledStyles: CSSObjectWithLabel = {
   backgroundColor: "",
   borderRadius: "",
   boxShadow: "",
+  paddingTop: "",
+  paddingBottom: "",
 };
 const MenuRootClass = css`
   color: ${themeVars.disabledTextColor};
@@ -16,6 +22,8 @@ const MenuRootClass = css`
   background-color: ${themeVars.colorBgSelectMenu};
   box-shadow: ${themeVars.shadowSelectMenu};
   border-radius: ${border.radius6}px;
+  padding-top: ${space.s6}px;
+  padding-bottom: ${space.s6}px;
   overflow: hidden;
 `;
 export function Menu<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(

package/src/{Select → select}/custom-select-partials/no-option-message.tsx

@@ -3,7 +3,7 @@ import {css} from "@linaria/core";
 import {space} from "../../design-system";
 
 const NopOptionMessageClass = css`
-  padding: ${space.l + 2}px ${space.m}px;
+  padding: ${space.s12 + 2}px ${space.s8}px;
 `;
 export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
   return <div className={NopOptionMessageClass}>{children}</div>;

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

@@ -0,0 +1,122 @@
+import {OptionProps} from "react-select";
+import {components} from "react-windowed-select";
+import {GroupBase} from "../index";
+import {css} from "@linaria/core";
+import {layout, space} from "../../design-system";
+import {ListItem} from "../../lists/list-item";
+import cn from "classnames";
+import {Children, ReactNode, useCallback, useMemo, useRef, useState} from "react";
+import {Tooltip} from "antd";
+
+export const OptionNulledVitualizedStyles = {
+  height: layout.menuItemHeight,
+};
+export const OptionNulledStyles = {
+  minHeight: layout.menuItemHeight,
+  paddingLeft: "",
+  paddingRight: "",
+  paddingTop: "",
+  opacity: "",
+  fontFamily: "",
+  fontSize: "",
+  lineHeight: "",
+  color: "",
+};
+const OptionRootClass = css`
+  padding: 0 ${space.s6}px;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  cursor: pointer;
+  max-width: 100%;
+`;
+
+const optionWithTextContent = css`
+  max-width: 100%;
+  padding: 0 ${space.s4}px;
+`;
+
+const optionTextOverflowWrapper = css`
+  max-width: 100%;
+  flex-basis: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 ${space.s4}px;
+`;
+
+function isOptionContentIsPureText(children: ReactNode) {
+  return !Children.toArray(children).find((child) => !(typeof child === "string" || typeof child === "number"));
+}
+
+type OptionTextContentWithTooltipProps = {
+  children: string | number;
+  isFocused?: boolean;
+};
+
+function OptionTextContentWithTooltip({children, isFocused}: OptionTextContentWithTooltipProps) {
+  const [isTooltipActive, setTooltipActive] = useState<boolean>(false);
+  const textWrapperRef = useRef<HTMLDivElement>(null);
+  const textContentRef = useRef<HTMLSpanElement>(null);
+  const onOptionMouseEnter = useCallback(() => {
+    setTimeout(() => {
+      if (!textContentRef.current || !textWrapperRef.current) {
+        return;
+      }
+      isFocused && setTooltipActive(textContentRef.current?.offsetWidth > textWrapperRef.current?.offsetWidth);
+    }, 300);
+  }, [textContentRef, textWrapperRef, isFocused]);
+  return (
+    <div
+      className={optionWithTextContent}
+      onMouseEnter={onOptionMouseEnter}
+      onMouseLeave={() => setTooltipActive(false)}
+    >
+      <Tooltip title={children} mouseEnterDelay={300} placement={"right"} open={isTooltipActive}>
+        <div ref={textWrapperRef} className={optionTextOverflowWrapper}>
+          <span ref={textContentRef}>{children}</span>
+        </div>
+      </Tooltip>
+    </div>
+  );
+}
+/**
+ * Attention! Do not use this option for potentially long lists inside React Select
+ *  Why is this option slow? Read here https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
+ *  */
+export function OptionSlow<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({children, ...rest}: OptionProps<Option, IsMulti, Group>) {
+  const {isDisabled, isSelected, isFocused} = rest;
+  const isPureText = useMemo(() => isOptionContentIsPureText(children), [children]);
+  return (
+    <components.Option {...rest} className={cn(rest.className, OptionRootClass)}>
+      <ListItem focused={isFocused} selected={isSelected} hovered={false} done={isDisabled}>
+        {isPureText ? (
+          <OptionTextContentWithTooltip isFocused={isFocused}>{children as string}</OptionTextContentWithTooltip>
+        ) : (
+          children
+        )}
+      </ListItem>
+    </components.Option>
+  );
+}
+
+/**
+ * This option is fast when there is 100+ items but breaks natural focus on hover React Select behaviour. Do not use it for short lists
+ * The issue is here https://the.fibery.io/SoftDev/bug/Select-option-behaviour-is-incorrect-9413
+ */
+export function Option<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({
+  children,
+  ...rest
+}: OptionProps<Option, IsMulti, Group>) {
+  /**
+   * This makes this option component fast
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const {onMouseOver, onMouseMove, ...truncatedInnerProps} = rest.innerProps;
+  const props = Object.assign(rest, {innerProps: truncatedInnerProps});
+  return <OptionSlow {...props}>{children}</OptionSlow>;
+}

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();
@@ -120,7 +140,7 @@ export const Select = forwardRef(function Select<
     (e) => {
       switch (e.key) {
         case "Escape":
-          // we cannot rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
+          // we can't rely on "menuIsOpen" prop here, as user may not pass this prop and rely on internal component behavior instead.
           if (menuOpenState) {
             e.stopPropagation();
           }
@@ -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,
@@ -27,18 +27,18 @@ import {
 } from "./index";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 
-const offset = [0, space.xs] as [number, number];
+const offset = [0, space.s4] as [number, number];
 const popupClassName = css`
   z-index: 1050;
   max-width: 360px;
-  padding-top: ${space.m}px;
-  padding-bottom: ${space.xs}px;
-  padding-left: ${space.m}px;
-  padding-right: ${space.m}px;
+  padding-top: ${space.s8}px;
+  padding-bottom: ${space.s4}px;
+  padding-left: ${space.s8}px;
+  padding-right: ${space.s8}px;
 `;
 
 const valueClassName = css`
-  border-radius: ${radius}px;
+  border-radius: ${border.radius4}px;
 
   &:focus {
     outline: none;
@@ -58,10 +58,10 @@ const valueClassName = css`
 
 const titleClassName = css`
   ${textStyles.heading6}
-  padding-top: ${space.s}px;
-  padding-left: ${space.m}px;
-  padding-right: ${space.m}px;
-  padding-bottom: ${space.l}px;
+  padding-top: ${space.s6}px;
+  padding-left: ${space.s8}px;
+  padding-right: ${space.s8}px;
+  padding-bottom: ${space.s12}px;
 `;
 
 export const selectInPopupStyles = {
@@ -78,10 +78,10 @@ export const selectInPopupStyles = {
     ...props,
     minWidth: 100,
     position: "static",
-    marginTop: space.s,
+    marginTop: space.s6,
     marginBottom: 0,
     boxShadow: "none",
-    borderRadius: radius,
+    borderRadius: border.radius4,
   }),
 };
 

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

@@ -2,8 +2,8 @@ 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 {MenuNulledStyles} from "./custom-select-partials/menu";
+import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
+import {MenuListNulledStyles, MenuNulledStyles} from "./custom-select-partials/menu";
 import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
 
 export const expanderExpandedStyle = css`
@@ -35,14 +35,14 @@ function createControlStyle({
       ...(state.isFocused && inputOverrides.focus),
       ...(state.isDisabled && inputOverrides.disabled),
       ":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
-      paddingLeft: space.l,
-      paddingRight: space.l,
+      paddingLeft: space.s10,
+      paddingRight: space.s12,
       "& > div": childDivStyle,
     } as unknown as CSSObjectWithLabel);
 }
 
 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,
@@ -80,11 +78,15 @@ export const componentsStyles: StylesConfig = {
     ...provided,
     overflow: "visible",
     color: themeVars.textColor,
+    marginLeft: "",
+    marginRight: "",
+    margin: "",
   }),
   valueContainer(provided) {
     return {
       ...provided,
       minWidth: 10,
+      gridTemplateColumns: "1fr",
     };
   },
   multiValue: (provided) => ({
@@ -94,7 +96,7 @@ export const componentsStyles: StylesConfig = {
     marginTop: 0,
     marginBottom: 0,
     marginLeft: 0,
-    marginRight: space.l,
+    marginRight: space.s12,
     alignItems: "center",
     height: layout.inputHeight - 2,
   }),
@@ -117,6 +119,10 @@ export const componentsStyles: StylesConfig = {
     ...provided,
     ...MenuNulledStyles,
   }),
+  menuList: (provided) => ({
+    ...provided,
+    ...MenuListNulledStyles,
+  }),
   container: (provided, state) => ({
     ...provided,
     pointerEvents: "auto",

package/src/toast/primitives.tsx

@@ -1,24 +1,29 @@
+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.s24}px; // increased mouse hover area to pause timers of toast
+  }
 `;
 
 export const ToastViewport = forwardRef<
@@ -29,12 +34,25 @@ export const ToastViewport = forwardRef<
 });
 
 const rootCss = css`
+  user-select: auto !important;
+
   background-color: ${themeVars.colorBgToastDefault};
-  padding: ${space.m}px ${space.m * 2}px;
+  padding: ${space.s12}px ${space.s8 * 2}px;
   border-radius: ${border.radius6}px;
   box-shadow: ${themeVars.shadowModal};
 
-  @keyframes hide {
+  will-change: opacity;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
     from {
       opacity: 1;
     }
@@ -71,15 +89,19 @@ const rootCss = css`
     transition: transform 200ms ease-out;
   }
 
+  &[data-state="open"] {
+    animation: fadeIn 200ms ease-out;
+  }
+  &[data-state="closed"] {
+    animation: fadeOut 200ms ease-out;
+  }
+
   @media (prefers-reduced-motion: no-preference) {
     will-change: transform, opacity;
 
     &[data-state="open"] {
       animation: slideIn 200ms ease-out;
     }
-    &[data-state="closed"] {
-      animation: hide 200ms ease-out;
-    }
 
     &[data-swipe="end"] {
       animation: swipeOut 200ms ease-out;
@@ -89,7 +111,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 +147,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,28 @@
+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";
+import {css} from "@linaria/core";
+import {space} from "../design-system";
+
+const toastActionCss = css`
+  margin-top: -${space.s4}px;
+  margin-bottom: -${space.s4}px;
+  flex-shrink: 0;
+`;
+
+export const ToastAction = forwardRef<
+  ElementRef<typeof RadixToastAction>,
+  ButtonProps & {altText: ToastActionProps["altText"]}
+>(({children, altText, ...props}, ref) => {
+  const theme = useTheme();
+  return (
+    <RadixToastAction className={toastActionCss} ref={ref} altText={altText} asChild>
+      <Button color={theme.textColor} {...props}>
+        {children}
+      </Button>
+    </RadixToastAction>
+  );
+});
+export type ToastActionElement = React.ReactElement<typeof ToastAction>;

package/src/toast/toast-provider.tsx

@@ -0,0 +1,15 @@
+import {createContext} from "@fibery/react/src/create-context";
+import React from "react";
+import type {ToastQueue} from "./toast-queue";
+import {ToastProvider as PrimitiveToastProvider} from "@radix-ui/react-toast";
+
+const [Provider, useCtx] = createContext<ToastQueue>("ToastQueue");
+
+export const ToastProvider: React.FC<React.PropsWithChildren<{toastQueue: ToastQueue}>> = ({toastQueue, children}) => {
+  return (
+    <Provider value={toastQueue}>
+      <PrimitiveToastProvider>{children}</PrimitiveToastProvider>
+    </Provider>
+  );
+};
+export const useToast = useCtx;