@fibery/ui-kit 1.36.2 → 1.37.0

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

@@ -1,5 +1,4 @@
-import {css} from "@linaria/core";
-import cn from "classnames";
+import {css, cx} from "@linaria/core";
 import {CSSObjectWithLabel, MenuProps, components} from "react-select";
 import {border, themeVars} from "../../design-system";
 import {GroupBase} from "../index";
@@ -15,7 +14,8 @@ export const MenuNulledStyles: CSSObjectWithLabel = {
   paddingTop: "",
   paddingBottom: "",
 };
-const MenuRootClass = css`
+
+const menuCss = css`
   color: ${themeVars.disabledTextColor};
   z-index: 1050;
   background-color: ${themeVars.colorBgSelectMenu};
@@ -24,8 +24,14 @@ const MenuRootClass = css`
   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(MenuRootClass, "react-select-menu", props.className)} />;
+export function Menu<T, U extends boolean, V extends GroupBase<T>>(props: MenuProps<T, U, V>) {
+  return <components.Menu {...props} className={cx(menuCss, "react-select-menu", props.className)} />;
+}
+
+const menuTransparentCss = css`
+  background-color: ${themeVars.transparent};
+`;
+
+export function MenuTransparent<T, U extends boolean, V extends GroupBase<T>>(props: MenuProps<T, U, V>) {
+  return <components.Menu {...props} className={cx(menuTransparentCss, "react-select-menu", props.className)} />;
 }

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

@@ -6,7 +6,6 @@ import {NoticeProps} from "react-select";
 import {GroupBase} from "../util";
 
 const noOptionMessageClass = css`
-  padding: 0 ${space.s6}px;
   cursor: default;
   user-select: none;
   max-width: 100%;

package/src/select/constants.ts

@@ -0,0 +1 @@
+export const SELECT_IN_POPOVER_VALUE_MAX_HEIGHT = 116;

package/src/select/index.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable no-use-before-define */
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
-import {forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
+import {ForwardedRef, forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
 import BaseSelect, {
   ActionMeta,
-  Props as BaseSelectProps,
+  components as reactSelectComponents,
   createFilter,
   MenuListProps,
   MenuProps,
@@ -12,32 +13,32 @@ import BaseSelect, {
   OnChangeValue,
   OptionProps,
   OptionsOrGroups,
+  Props as BaseSelectProps,
   PropsValue,
-  components as reactSelectComponents,
   SelectInstance,
   SingleValue,
   SingleValueProps,
   StylesConfig,
 } from "react-select";
 import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
-import {ClearIndicator, NoClearIndicator} from "./custom-select-partials/clear-indicator";
-import {DropdownIndicator} from "./custom-select-partials/drop-down-indicator";
-import {GroupHeading} from "./custom-select-partials/group-heading";
-import {Menu} from "./custom-select-partials/menu";
-import {MenuListVirtualized} from "./custom-select-partials/menu-list-virtualized";
-import {NoOptionsMessage} from "./custom-select-partials/no-option-message";
-import {Option, OptionSlow} from "./custom-select-partials/option";
+import {ClearIndicator, NoClearIndicator} from "./components/clear-indicator";
+import {DropdownIndicator} from "./components/drop-down-indicator";
+import {GroupHeading} from "./components/group-heading";
+import {Menu} from "./components/menu";
+import {MenuListVirtualized} from "./components/menu-list-virtualized";
+import {NoOptionsMessage} from "./components/no-option-message";
+import {Option, OptionSlow} from "./components/option";
 import {useSelectControlSettings} from "./select-control-settings-context";
 import {
-  componentsStyles,
-  nonVirtualizedStyles,
-  singleLineComponentsStyle,
-  virtualizedStyles,
-  zIndexStyles,
+  makeComponentsStyles,
+  makeNonVirtualizedStyles,
+  makeSingleLineStyles,
+  makeVirtualizedStyles,
+  makeZIndexStyles,
 } from "./styles";
 import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
+import _ from "lodash";
 
-export {reactSelectComponents as components, MenuListVirtualized};
 export type {
   ActionMeta,
   GroupBase,
@@ -54,87 +55,124 @@ export type {
   StylesConfig,
 };
 
-//Group dummy for virtualized option-lists. For performance.
+export {reactSelectComponents as components, MenuListVirtualized, createFilter};
+
 function GroupVirtualized() {
   return null;
 }
-export function combineStyles<
-  Option,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
->(stylesConfigs: StylesConfig<Option, IsMulti, Group>[]) {
-  return stylesConfigs.reduce(mergeStyles, {});
-}
 
-export {createFilter};
+export function combineStyles<T, U extends boolean, V extends GroupBase<T>>(styles: StylesConfig<T, U, V>[]) {
+  return styles.reduce(mergeStyles, {});
+}
 
-export type SelectProps<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
-> = Omit<Omit<Omit<BaseSelectProps<Option, IsMulti, Group>, "isMulti">, "backspaceRemovesValue">, "isDisabled"> & {
+export type SelectProps<T = unknown, U extends boolean = boolean, V extends GroupBase<T> = GroupBase<T>> = Omit<
+  Omit<Omit<BaseSelectProps<T, U, V>, "isMulti">, "backspaceRemovesValue">,
+  "isDisabled"
+> & {
   virtualized?: boolean;
-  isCollectionMode?: IsMulti;
+  isCollectionMode?: U;
   disabled?: boolean;
   forbidValuesClearInCollnMode?: boolean;
 };
 
-export function SingleRowSelect<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
->({styles = {}, ...rest}: SelectProps<Option, IsMulti, Group>) {
-  return (
-    <Select<Option, IsMulti, Group>
-      {...rest}
-      styles={combineStyles<Option, IsMulti, Group>([
-        singleLineComponentsStyle as unknown as StylesConfig<Option, IsMulti, Group>,
-        styles,
-      ])}
-    />
-  );
+export function SingleRowSelect<T = unknown, U extends boolean = boolean, V extends GroupBase<T> = GroupBase<T>>({
+  styles = {},
+  ...rest
+}: SelectProps<T, U, V>) {
+  return <Select<T, U, V> {...rest} styles={combineStyles([makeSingleLineStyles(), styles])} />;
 }
 
 const FAST_OPTION_USAGE_THRESHOLD = 200;
-/**
- * Draws a select input.
- * Please use formatOptionLabel instead of Option component override. Select has smart optimisations for large lists
- * those would be lost and your select slow if options are too numerous
- */
+
+function useSelectComponents<T, U extends boolean, V extends GroupBase<T>>({
+  components,
+  optionsCount,
+  virtualized,
+  isCollectionMode,
+  forbidValuesClearInCollnMode,
+}: {
+  components: SelectProps<T, U, V>["components"];
+  optionsCount: number;
+  virtualized: boolean;
+  isCollectionMode?: U;
+  forbidValuesClearInCollnMode?: boolean;
+}) {
+  const shouldUseFastOption = optionsCount > FAST_OPTION_USAGE_THRESHOLD;
+  const shouldHideMultiValueRemove = isCollectionMode && forbidValuesClearInCollnMode;
+
+  return {
+    Menu,
+    DropdownIndicator,
+    ClearIndicator,
+    MultiValueRemove: shouldHideMultiValueRemove ? NoClearIndicator : ClearIndicator,
+    NoOptionsMessage,
+    GroupHeading,
+    Option: shouldUseFastOption ? Option : OptionSlow,
+    ...components,
+    Group: virtualized ? GroupVirtualized : components?.Group ? components.Group : reactSelectComponents.Group,
+    MenuList: virtualized
+      ? MenuListVirtualized
+      : components?.MenuList
+      ? components.MenuList
+      : reactSelectComponents.MenuList,
+  };
+}
+
+function useSelectStyles<T, U extends boolean, V extends GroupBase<T>>({
+  virtualized,
+  zIndex,
+  styles,
+}: {
+  virtualized: boolean;
+  zIndex?: number;
+  styles?: SelectProps<T, U, V>["styles"];
+}) {
+  return useMemo(() => {
+    return combineStyles<T, U, V>(
+      _.compact([
+        makeComponentsStyles<T, U, V>(),
+        virtualized ? makeVirtualizedStyles<T, U, V>() : makeNonVirtualizedStyles<T, U, V>(),
+        zIndex ? makeZIndexStyles<T, U, V>(zIndex) : null,
+        styles,
+      ])
+    );
+  }, [styles, virtualized, zIndex]);
+}
+
 export const Select = forwardRef(function Select<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
+  T = unknown,
+  U extends boolean = boolean,
+  V extends GroupBase<T> = GroupBase<T>
 >(
   {
     components,
     isCollectionMode,
     menuPortalTarget,
     onKeyDown,
-    styles = {},
+    styles,
     virtualized = true,
     onMenuOpen,
     onMenuClose,
     onChange,
     forbidValuesClearInCollnMode,
     ...rest
-  }: SelectProps<Option, IsMulti, Group>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  forwardedRef: any
+  }: SelectProps<T, U, V>,
+  forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
 ) {
   const {getPopupContainerElement, zIndex} = useSelectControlSettings();
   const [menuOpenState, setMenuOpenState] = useState(rest.defaultMenuIsOpen);
-  const optionsCount = useMemo(() => {
-    return countOptions<Option, Group>(rest.options);
-  }, [rest.options]);
+  const optionsCount = useMemo(() => countOptions(rest.options), [rest.options]);
+
   const onMenuOpenWrapped = useCallback(() => {
     setMenuOpenState(true);
     onMenuOpen && onMenuOpen();
   }, [onMenuOpen]);
+
   const onMenuCloseWrapped = useCallback(() => {
     setMenuOpenState(false);
     onMenuClose && onMenuClose();
   }, [onMenuClose]);
+
   const handleKeyDown: React.KeyboardEventHandler<HTMLInputElement> = useCallback(
     (e) => {
       switch (e.key) {
@@ -168,20 +206,23 @@ export const Select = forwardRef(function Select<
     },
     [onKeyDown, menuOpenState]
   );
-  const combinedStyles = useMemo(() => {
-    return combineStyles<Option, IsMulti, Group>([
-      componentsStyles,
-      virtualized ? virtualizedStyles : nonVirtualizedStyles,
-      zIndex ? zIndexStyles(zIndex) : {},
-      styles,
-    ] as StylesConfig<Option, IsMulti, Group>[]);
-  }, [styles, virtualized, zIndex]);
-  const contextRef = useRef<SelectInstance<Option, IsMulti, Group> | null>(null);
+
+  const contextRef = useRef<SelectInstance<T, U, V> | null>(null);
   const combined = useComposedRefs(forwardedRef, contextRef);
 
+  const selectComponents = useSelectComponents({
+    components,
+    optionsCount,
+    virtualized,
+    isCollectionMode,
+    forbidValuesClearInCollnMode,
+  });
+
+  const combinedStyles = useSelectStyles({virtualized, zIndex, styles});
+
   return (
     <ReactSelectRefContext.Provider value={contextRef as RefObject<SelectInstance>}>
-      <BaseSelect<Option, IsMulti, Group>
+      <BaseSelect<T, U, V>
         ref={combined}
         // There are places, where it is useful to override menuPortalTarget globally for all selects.
         // When you are already in some popup. e.g. user input in buttons, relation filter popover.
@@ -191,29 +232,7 @@ export const Select = forwardRef(function Select<
         isMulti={isCollectionMode}
         backspaceRemovesValue={isCollectionMode && !forbidValuesClearInCollnMode}
         tabSelectsValue={false}
-        components={{
-          Menu: Menu,
-          DropdownIndicator,
-          ClearIndicator,
-          /*
-   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
-   */
-          MultiValueRemove: isCollectionMode && forbidValuesClearInCollnMode ? NoClearIndicator : ClearIndicator,
-          NoOptionsMessage,
-          GroupHeading,
-          Option: optionsCount > FAST_OPTION_USAGE_THRESHOLD ? Option : OptionSlow,
-          ...components,
-          //Using dummy for virtualized lists. Virtualized lists render Groups differently (look MenuListVirtualized).
-          Group: virtualized ? GroupVirtualized : components?.Group ? components.Group : reactSelectComponents.Group,
-          MenuList: virtualized
-            ? MenuListVirtualized
-            : components?.MenuList
-            ? components.MenuList
-            : reactSelectComponents.MenuList,
-        }}
+        components={selectComponents}
         {...rest}
         onKeyDown={handleKeyDown}
         onMenuOpen={onMenuOpenWrapped}
@@ -223,49 +242,34 @@ export const Select = forwardRef(function Select<
       />
     </ReactSelectRefContext.Provider>
   );
-  // eslint-disable-next-line no-use-before-define
 }) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
-  // eslint-disable-next-line no-use-before-define,@typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   props: SelectProps<Option, IsMulti, Group> & {ref?: any}
 ) => JSX.Element;
 
-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>;
-
-export function CreatableSelectInner<
-  Option = unknown,
-  IsMulti extends boolean = boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>
->(
+function CreatableSelectInner<T = unknown, U extends boolean = boolean, V extends GroupBase<T> = GroupBase<T>>(
   {
     components,
     isCollectionMode,
     menuPortalTarget,
     styles = {},
     virtualized = true,
+    forbidValuesClearInCollnMode,
     ...rest
-  }: CreatableProps<Option, IsMulti, Group> & SelectProps<Option, IsMulti, Group>,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  ref: any
+  }: CreatableProps<T, U, V> & SelectProps<T, U, V>,
+  ref: ForwardedRef<SelectInstance<T, U, V>>
 ) {
-  const optionsCount = useMemo(() => {
-    return countOptions<Option, Group>(rest.options);
-  }, [rest.options]);
+  const optionsCount = useMemo(() => countOptions(rest.options), [rest.options]);
+
+  const selectComponents = useSelectComponents({
+    components,
+    optionsCount,
+    virtualized,
+    isCollectionMode,
+    forbidValuesClearInCollnMode,
+  });
 
-  const combinedStyles = useMemo(() => {
-    return combineStyles<Option, IsMulti, Group>([
-      componentsStyles,
-      virtualized ? virtualizedStyles : nonVirtualizedStyles,
-      styles,
-    ] as StylesConfig<Option, IsMulti, Group>[]);
-  }, [styles, virtualized]);
+  const combinedStyles = useSelectStyles({virtualized, styles});
 
   return (
     <BaseCreatableSelect
@@ -276,30 +280,17 @@ export function CreatableSelectInner<
       isMulti={isCollectionMode}
       backspaceRemovesValue={isCollectionMode}
       tabSelectsValue={false}
-      components={{
-        Menu: Menu,
-        DropdownIndicator,
-        ClearIndicator,
-        /*
-       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
-       */
-        MultiValueRemove: ClearIndicator,
-        NoOptionsMessage,
-        GroupHeading,
-        Option: optionsCount > FAST_OPTION_USAGE_THRESHOLD ? Option : OptionSlow,
-        ...components,
-        Group: virtualized ? GroupVirtualized : components?.Group ? components.Group : reactSelectComponents.Group,
-        MenuList: virtualized
-          ? MenuListVirtualized
-          : components?.MenuList
-          ? components.MenuList
-          : reactSelectComponents.MenuList,
-      }}
+      components={selectComponents}
       {...rest}
       isDisabled={rest.disabled}
     />
   );
 }
+
+export const CreatableSelect = forwardRef(CreatableSelectInner) as <
+  T = unknown,
+  U extends boolean = boolean,
+  V extends GroupBase<T> = GroupBase<T>
+>(
+  props: CreatableProps<T, U, V> & SelectProps<T, U, V>
+) => ReturnType<typeof CreatableSelectInner>;