@fibery/ui-kit 1.17.1 → 1.19.0

package/src/select/custom-select-partials/clear-indicator.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import RemoveIcon from "../../icons/react/Remove";
+import {ClearIndicatorProps, GroupBase, MultiValueRemoveProps} from "react-select";
+import {Button} from "../../button/button";
+
+export function ClearIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>({
+  innerProps,
+  selectProps,
+}: ClearIndicatorProps<TOption, IsMulti, Group> | MultiValueRemoveProps<TOption, IsMulti, Group>) {
+  if (selectProps.isDisabled) {
+    return null;
+  }
+  return (
+    <div {...innerProps}>
+      <Button borderless Icon={RemoveIcon} disabled={selectProps.isDisabled} size={":button-size/super-small"} />
+    </div>
+  );
+}

package/src/select/custom-select-partials/drop-down-indicator.tsx

@@ -0,0 +1,26 @@
+import cn from "classnames";
+import {DropdownIndicatorProps} from "react-select";
+import {expanderExpandedStyle} from "../styles";
+import ArrowCollapseVertical from "../../icons/react/ArrowCollapseVertical";
+import {themeVars, transition} from "../../design-system";
+import React from "react";
+import {css} from "@linaria/core";
+import {GroupBase} from "../index";
+
+const expanderStyle = css`
+  transition: transform ${transition};
+`;
+export function DropdownIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
+  if (props.selectProps.isDisabled) {
+    return null;
+  }
+  return (
+    <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
+      <ArrowCollapseVertical color={themeVars.disabledTextColor} />
+    </div>
+  );
+}

package/src/select/custom-select-partials/group-heading.tsx

@@ -0,0 +1,54 @@
+import {GroupBase} from "../index";
+import {components} from "react-windowed-select";
+import {GroupHeadingProps} from "react-select";
+import {css} from "@linaria/core";
+import {layout, space, textStyles, themeVars} from "../../design-system";
+import React from "react";
+export const groupHeadingNulledStyles = {
+  paddingLeft: "",
+  paddingRight: "",
+  paddingTop: "",
+  margin: "",
+  ...textStyles.small,
+  color: "",
+  height: layout.menuItemHeight,
+};
+const groupHeadingClass = css`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: ${space.m + space.xs}px ${space.m}px ${space.l}px ${space.m}px;
+  color: ${themeVars.disabledTextColor};
+`;
+const groupDividerContainerStyle = css`
+  padding: ${space.l}px 0;
+  box-sizing: content-box;
+`;
+
+const groupDividerStyle = css`
+  width: 100%;
+  border-top: 1px solid #eeeff1;
+`;
+const GroupDivider = () => (
+  <div className={groupDividerContainerStyle}>
+    <div className={groupDividerStyle}></div>
+  </div>
+);
+export function GroupHeading<
+  Option,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({children, ...props}: GroupHeadingProps<Option, IsMulti, Group>) {
+  if (props.data.separator) {
+    return <GroupDivider />;
+  }
+
+  if (!children) {
+    return null;
+  }
+  return (
+    <components.GroupHeading {...props} className={groupHeadingClass}>
+      {children}
+    </components.GroupHeading>
+  );
+}

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

@@ -0,0 +1,25 @@
+import {GroupBase} from "../index";
+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";
+
+export const MenuNulledStyles: CSSObjectWithLabel = {
+  backgroundColor: "",
+  borderRadius: "",
+  boxShadow: "",
+};
+const MenuRootClass = css`
+  color: ${themeVars.disabledTextColor};
+  z-index: 1050;
+  background-color: ${themeVars.colorBgSelectMenu};
+  box-shadow: ${themeVars.shadowSelectMenu};
+  border-radius: ${border.radius6}px;
+  overflow: hidden;
+`;
+export function Menu<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: MenuProps<Option, IsMulti, Group>
+) {
+  return <components.Menu {...props} className={cn(props.className, MenuRootClass, "react-select-menu")} />;
+}

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

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

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

@@ -0,0 +1,65 @@
+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 {ListItemGeneral} from "../../lists/list-item-general";
+import cn from "classnames";
+
+export const OptionNulledVitualizedStyles = {
+  height: layout.newMenuItemHeight,
+};
+export const OptionNulledStyles = {
+  minHeight: layout.newMenuItemHeight,
+  paddingLeft: "",
+  paddingRight: "",
+  paddingTop: "",
+  opacity: "",
+  fontFamily: "",
+  fontSize: "",
+  lineHeight: "",
+  color: "",
+};
+const OptionRootClass = css`
+  padding: 0 ${space.s}px;
+  display: flex;
+  align-items: stretch;
+  justify-content: stretch;
+  cursor: pointer;
+`;
+
+/**
+ * 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;
+  return (
+    <components.Option {...rest} className={cn(rest.className, OptionRootClass)}>
+      <ListItemGeneral focused={isFocused} selected={isSelected} hovered={false} done={isDisabled}>
+        {children}
+      </ListItemGeneral>
+    </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

@@ -1,39 +1,34 @@
-/* eslint-disable */
-import cn from "classnames";
 import {forwardRef, useCallback, useMemo, useState} from "react";
 import BaseSelect, {
+  ActionMeta,
+  components as reactSelectComponents,
   createFilter,
   GroupBase as ReactSelectGroupBase,
-  GroupHeadingProps,
   MenuListProps,
   MenuProps,
   mergeStyles,
   MultiValue,
   MultiValueProps,
+  OnChangeValue,
   OptionProps,
   OptionsOrGroups,
   Props as BaseSelectProps,
+  PropsValue,
   SingleValue,
   SingleValueProps,
   StylesConfig,
-  ActionMeta,
-  OnChangeValue,
-  PropsValue,
-  components as reactSelectComponents,
 } from "react-select";
 import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
 import WindowedSelect, {components, WindowedMenuList} from "react-windowed-select";
-import {createInlineTheme} from "../designSystem";
-import {useTheme} from "../ThemeProvider";
-import {
-  ClearIndicator,
-  DropdownIndicator,
-  GroupDivider,
-  NoOptionsMessage,
-  Option as OptionComponent,
-} from "./components";
 import {componentsStyles, singleLineComponentsStyle, virtualizedStyles, zIndexStyles} from "./styles";
 import {useSelectControlSettings} from "./select-control-settings-context";
+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};
 
@@ -52,32 +47,6 @@ export type {
   OnChangeValue,
   PropsValue,
 };
-
-function GroupHeading<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
->({children, ...props}: GroupHeadingProps<Option, IsMulti, Group>) {
-  if (props.data.separator) {
-    return <GroupDivider />;
-  }
-
-  if (!children) {
-    return null;
-  }
-
-  return <components.GroupHeading {...props}>{children}</components.GroupHeading>;
-}
-
-function Menu<Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
-  props: MenuProps<Option, IsMulti, Group>
-) {
-  const theme = useTheme();
-  const {innerProps, className} = props;
-  const overridedInnerProps = {...innerProps, style: {...innerProps.style, ...createInlineTheme(theme)}};
-  return <components.Menu {...props} innerProps={overridedInnerProps} className={cn(className, "react-select-menu")} />;
-}
-
 export {WindowedMenuList};
 
 export {components};
@@ -101,7 +70,6 @@ export type SelectProps<
   isCollectionMode?: IsMulti;
   disabled?: boolean;
 };
-
 export function SingleRowSelect<
   Option = unknown,
   IsMulti extends boolean = boolean,
@@ -118,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,
@@ -140,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();
@@ -191,7 +179,7 @@ export const Select = forwardRef(function Select<
       zIndex ? zIndexStyles(zIndex) : {},
       styles,
     ] as StylesConfig<Option, IsMulti, Group>[]);
-  }, [styles, virtualized]);
+  }, [styles, virtualized, zIndex]);
 
   return (
     <SelectComponent
@@ -205,10 +193,16 @@ export const Select = forwardRef(function Select<
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}
       components={{
-        Menu,
+        Menu: Menu,
         DropdownIndicator,
         ClearIndicator,
-        Option: OptionComponent,
+        /*
+       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,
@@ -231,8 +225,10 @@ export const Select = forwardRef(function Select<
 export const CreatableSelect = forwardRef(CreatableSelectInner) as <
   Option = unknown,
   IsMulti extends boolean = boolean,
+  // eslint-disable-next-line no-use-before-define
   Group extends GroupBase<Option> = GroupBase<Option>
 >(
+  // eslint-disable-next-line no-use-before-define
   props: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>
 ) => ReturnType<typeof CreatableSelectInner>;
 
@@ -249,8 +245,12 @@ export function CreatableSelectInner<
     virtualized = true,
     ...rest
   }: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>,
+  // 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}
@@ -264,11 +264,17 @@ export function CreatableSelectInner<
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}
       components={{
-        Menu,
+        Menu: Menu,
         MenuList: virtualized ? WindowedMenuList : reactSelectComponents.MenuList,
         DropdownIndicator,
         ClearIndicator,
-        Option: OptionComponent,
+        /*
+       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 "../designSystem";
+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;
@@ -72,7 +72,7 @@ export const selectInPopupStyles = {
   }),
   option: (props: $TSFixMe) => ({
     ...props,
-    borderRadius: border.radius3,
+    borderRadius: border.radius4,
   }),
   menu: (props: $TSFixMe) => ({
     ...props,
@@ -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

@@ -1,14 +1,11 @@
 import {css} from "@linaria/core";
-import {Property} from "csstype";
-import type {StylesConfig, CSSObjectWithLabel, ControlProps} from "react-select";
+import type {ControlProps, CSSObjectWithLabel, StylesConfig} from "react-select";
 import {inputOverrides} from "../antd/styles";
-import {border, layout, space, textStyles, themeVars, transition} from "../designSystem";
+import {layout, space, themeVars} from "../design-system";
+import {OptionNulledStyles, OptionNulledVitualizedStyles} from "./custom-select-partials/option";
+import {MenuNulledStyles} from "./custom-select-partials/menu";
+import {groupHeadingNulledStyles} from "./custom-select-partials/group-heading";
 
-export const expanderStyle = css`
-  ${{
-    transition: `transform ${transition}`,
-  }}
-`;
 export const expanderExpandedStyle = css`
   transform: rotate(180deg);
 `;
@@ -45,10 +42,7 @@ function createControlStyle({
 }
 
 export const virtualizedStyles: StylesConfig = {
-  option: (provided) => ({
-    ...provided,
-    height: layout.menuItemHeight,
-  }),
+  option: () => ({...OptionNulledVitualizedStyles, ...OptionNulledStyles}),
   groupHeading: (provided) => ({
     ...provided,
     height: layout.menuItemHeight,
@@ -70,36 +64,7 @@ export const zIndexStyles = (zIndex: number): StylesConfig => ({
 });
 
 export const componentsStyles: StylesConfig = {
-  option: (provided, state) => {
-    const disabledStyles = {
-      cursor: "not-allowed",
-      color: themeVars.disabledTextColor,
-    };
-    const enabledStyles = {
-      ":hover": {
-        backgroundColor: state.isFocused ? themeVars.actionMenuInnerHover : themeVars.actionMenuInnerHover,
-      },
-      ":active": {
-        backgroundColor: themeVars.actionMenuInnerHover,
-      },
-    };
-    return {
-      ...provided,
-      ...textStyles.regular,
-      minHeight: layout.menuItemHeight,
-      paddingLeft: space.l,
-      paddingRight: space.l,
-      paddingTop: 0,
-      paddingBottom: 0,
-      margin: 0,
-      backgroundColor: state.isFocused ? themeVars.actionMenuInnerHover : themeVars.actionMenuInnerBg,
-      cursor: "pointer",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "stretch",
-      ...(state.isDisabled ? disabledStyles : enabledStyles),
-    };
-  },
+  option: () => OptionNulledStyles,
   placeholder: (provided) => ({
     ...provided,
     color: themeVars.disabledTextColor,
@@ -140,12 +105,7 @@ export const componentsStyles: StylesConfig = {
   multiValueLabel: () => ({}),
   groupHeading: (provided) => ({
     ...provided,
-    paddingLeft: space.l,
-    paddingRight: space.m,
-    paddingTop: space.m + space.xs,
-    margin: 0,
-    ...textStyles.small,
-    color: themeVars.disabledTextColor,
+    ...groupHeadingNulledStyles,
   }),
   menuPortal: (provided) => ({
     ...provided,
@@ -153,11 +113,7 @@ export const componentsStyles: StylesConfig = {
   }),
   menu: (provided) => ({
     ...provided,
-    color: themeVars.disabledTextColor,
-    zIndex: 1050,
-    backgroundColor: themeVars.actionMenuInnerBg,
-    boxShadow: themeVars.actionMenuShadow as unknown as Property.BoxShadow,
-    borderRadius: border.radius6,
+    ...MenuNulledStyles,
   }),
   container: (provided, state) => ({
     ...provided,

package/src/{ThemeProvider.tsx → theme-provider.tsx}

@@ -1,7 +1,7 @@
 import invariant from "invariant";
 import {themeStyles} from "./theme-styles";
 import {createContext, ReactNode, useContext, useEffect, useState} from "react";
-import {colors, getThemeColors, ThemeColors} from "./designSystem";
+import {colors, getThemeColors, ThemeColors} from "./design-system";
 import {
   subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
@@ -51,6 +51,16 @@ export function useThemeMenuPreference(): ThemeMenuPreference {
   return themeMenuPreference;
 }
 
+export function useMenuTheme() {
+  const themeMode = useThemeMode();
+  return getThemeColors(colors.brandColors.blue, themeMode === "light" ? "light" : "dark");
+}
+
+export function MenuThemeProvider({children}: {children: ReactNode}) {
+  const theme = useMenuTheme();
+  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+}
+
 export function RootThemeProvider({
   initialThemeMode,
   initialPreference,

package/src/theme-styles.ts

@@ -1,8 +1,8 @@
 import {css} from "@linaria/core";
-import {createInlineTheme, getThemeColors, colors} from "./designSystem";
+import {createInlineTheme, getThemeColors, colors} from "./design-system";
 const lightTheme = getThemeColors(colors.brandColors.blue, "light");
 const darkTheme = getThemeColors(colors.brandColors.blue, "dark");
-const light2Theme = getThemeColors(colors.brandColors.blue, "light2");
+
 export const themeStyles = css`
   :global(html) {
     &:root {
@@ -11,8 +11,5 @@ export const themeStyles = css`
     &.dark-theme:root {
       ${createInlineTheme(darkTheme, [])}
     }
-    &.light-theme-and-dark-menu:root {
-      ${createInlineTheme(light2Theme, [])}
-    }
   }
 `;