@fibery/ui-kit 1.40.0 → 1.40.1

package/src/notification-dot.tsx

@@ -1,32 +1,22 @@
-import {css} from "@linaria/core";
-import {space, themeVars} from "./design-system";
+import {themeVars} from "./design-system";
+import {Dot} from "./dot";
+import {CSSProperties} from "react";
 
-const activityIndicatorStyle = css`
-  ${{
-    backgroundColor: themeVars.active,
-    borderRadius: "50%",
-    position: "absolute",
-    top: 0,
-  }}
-`;
-
-type PropsType = {
+type Props = {
   big?: boolean;
   color?: string;
-  style?: Record<string, string | number | null>;
-};
+} & React.ComponentProps<"div">;
 
-export const NotificationDot = ({big = true, color = themeVars.active, style}: PropsType) => {
-  const size = big ? space.s6 : space.s4;
+export const NotificationDot = ({big = true, color = themeVars.active, style}: Props) => {
   const marginTop = big ? -6 : -1;
   const marginRight = big ? -1 : 0;
   const styleObject = {
-    backgroundColor: color,
-    width: size,
-    height: size,
+    position: "absolute",
+    top: 0,
     marginTop,
     marginRight,
     ...style,
-  };
-  return <div className={activityIndicatorStyle} style={styleObject} />;
+  } as CSSProperties;
+
+  return <Dot color={color} size={big ? "medium" : "small"} style={styleObject} />;
 };

package/src/popover/index.tsx

@@ -45,6 +45,8 @@ import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {createContext} from "@fibery/react/src/create-context";
 import {Wrap} from "@fibery/react/src/wrap";
 
+export const mobileZIndex = 1002;
+
 const Backdrop = ({className}: {className?: string}) => {
   return (
     <div
@@ -171,7 +173,7 @@ export function MobilePopup({
           right: var(${safeAreaInsetRightVar});
           top: var(${safeAreaInsetTopVar});
           bottom: var(${safeAreaInsetBottomVar});
-          z-index: 1002;
+          z-index: ${mobileZIndex};
         `,
         !height && mobileAnimationClassName,
         !height && popupContentClassName,

package/src/select/components/menu.tsx

@@ -32,6 +32,7 @@ export function Menu<T, U extends boolean, V extends GroupBase<T>>(props: MenuPr
 
 const menuTransparentCss = css`
   background-color: ${themeVars.transparent};
+  overflow: auto;
 `;
 
 export function MenuTransparent<T, U extends boolean, V extends GroupBase<T>>(props: MenuProps<T, U, V>) {

package/src/select/index.tsx

@@ -1,44 +1,13 @@
 /* eslint-disable no-use-before-define */
-import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
-import {ForwardedRef, forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
-import BaseSelect, {
-  ActionMeta,
-  components as reactSelectComponents,
-  createFilter,
-  MenuListProps,
-  MenuProps,
-  ControlProps,
-  mergeStyles,
-  MultiValue,
-  MultiValueProps,
-  OnChangeValue,
-  OptionProps,
-  OptionsOrGroups,
-  Props as BaseSelectProps,
-  PropsValue,
-  SelectInstance,
-  SingleValue,
-  SingleValueProps,
-  StylesConfig,
-} from "react-select";
-import BaseCreatableSelect, {CreatableProps} from "react-select/creatable";
-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 {
-  makeComponentsStyles,
-  makeNonVirtualizedStyles,
-  makeSingleLineStyles,
-  makeVirtualizedStyles,
-  makeZIndexStyles,
-} from "./styles";
-import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
-import _ from "lodash";
+import {useIsPhone} from "../use-is-phone";
+import {SelectComponent} from "./select";
+import React, {ForwardedRef, forwardRef} from "react";
+import type {SelectProps, GroupBase, SelectInstance} from "./select";
+import {SelectInPopover} from "./select-in-popover";
+import {combineStyles} from "./select";
+import {makeSingleLineStyles} from "./styles";
+import {css} from "@linaria/core";
+import {$TSFixMe} from "../tsfixme";
 
 export type {
   ActionMeta,
@@ -57,244 +26,111 @@ export type {
   StylesConfig,
   SelectInstance,
   BaseSelectProps,
-};
+  SelectProps,
+} from "./select";
 
-export {reactSelectComponents as components, MenuListVirtualized, createFilter};
+export {components, MenuListVirtualized, createFilter} from "./select";
 
-function GroupVirtualized() {
-  return null;
-}
-
-export function combineStyles<T, U extends boolean, V extends GroupBase<T>>(styles: StylesConfig<T, U, V>[]) {
-  return styles.reduce(mergeStyles, {});
-}
+export {combineStyles} from "./select";
 
-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?: U;
-  disabled?: boolean;
-  forbidValuesClearInCollnMode?: boolean;
+const emptyComponents = {
+  Menu: () => null,
 };
 
-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;
-
-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<
+export const Select = forwardRef(function SelectInner<
   T = unknown,
   U extends boolean = boolean,
   V extends GroupBase<T> = GroupBase<T>
 >(
   {
-    components,
-    isCollectionMode,
-    menuPortalTarget,
-    onKeyDown,
+    maxMenuHeight,
+    options = [],
+    formatOptionLabel,
+    isOptionDisabled,
     styles,
-    virtualized = true,
-    onMenuOpen,
-    onMenuClose,
-    onChange,
-    forbidValuesClearInCollnMode,
-    ...rest
+    isClearable,
+    placeholder,
+    title,
+    isSearchable,
+    ...restProps
   }: SelectProps<T, U, V>,
   forwardedRef: ForwardedRef<SelectInstance<T, U, V>>
 ) {
-  const {getPopupContainerElement, zIndex} = useSelectControlSettings();
-  const [menuOpenState, setMenuOpenState] = useState(rest.defaultMenuIsOpen);
-  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) {
-        case "Escape":
-          // 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();
-          }
-          break;
-        case "Home":
-          e.preventDefault();
-          if (e.shiftKey) {
-            (e.target as HTMLInputElement).selectionStart = 0;
-          } else {
-            (e.target as HTMLInputElement).setSelectionRange(0, 0);
-          }
-          break;
-        case "End": {
-          e.preventDefault();
-          const len = (e.target as HTMLInputElement).value.length;
-          if (e.shiftKey) {
-            (e.target as HTMLInputElement).selectionEnd = len;
-          } else {
-            (e.target as HTMLInputElement).setSelectionRange(len, len);
-          }
-          break;
+  const isPhone = useIsPhone();
+  if (isPhone) {
+    return (
+      <SelectInPopover
+        {...(restProps as $TSFixMe)}
+        options={options}
+        isSearchable={isSearchable}
+        title={title || typeof placeholder === "string" ? placeholder : ""}
+        isClearable={typeof isClearable === "undefined" ? false : isClearable}
+        formatOptionLabel={
+          formatOptionLabel as ((option: T, {context}: {context: "menu" | "value"}) => React.ReactNode) | undefined
         }
-        default:
-      }
-      onKeyDown && onKeyDown(e);
-    },
-    [onKeyDown, menuOpenState]
-  );
-
-  const selectRef = useRef<SelectInstance<T, U, V> | null>(null);
-  const composedRef = useComposedRefs(forwardedRef, selectRef);
-
-  const selectComponents = useSelectComponents({
-    components,
-    optionsCount,
-    virtualized,
-    isCollectionMode,
-    forbidValuesClearInCollnMode,
-  });
-
-  const combinedStyles = useSelectStyles({virtualized, zIndex, styles});
-
-  return (
-    <ReactSelectRefContext.Provider value={selectRef as RefObject<SelectInstance>}>
-      <BaseSelect<T, U, V>
-        ref={composedRef}
-        // 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.
-        menuPortalTarget={getPopupContainerElement ? getPopupContainerElement() : menuPortalTarget}
-        menuPlacement={"auto"}
-        styles={combinedStyles}
-        isMulti={isCollectionMode}
-        backspaceRemovesValue={isCollectionMode && !forbidValuesClearInCollnMode}
-        tabSelectsValue={false}
-        components={selectComponents}
-        {...rest}
-        onKeyDown={handleKeyDown}
-        onMenuOpen={onMenuOpenWrapped}
-        onMenuClose={onMenuCloseWrapped}
-        onChange={rest.disabled ? undefined : onChange}
-        isDisabled={rest.disabled}
+        isOptionDisabled={isOptionDisabled as ((option: T) => boolean) | undefined}
+        renderValue={() => {
+          return (
+            <div
+              className={css`
+                display: block;
+                position: relative;
+              `}
+            >
+              <div
+                className={css`
+                  position: absolute;
+                  inset: 0;
+                  z-index: 1;
+                `}
+              />
+              <div
+                className={css`
+                  pointer-events: none;
+                `}
+              >
+                <SelectComponent
+                  {...restProps}
+                  isSearchable={false}
+                  components={emptyComponents}
+                  placeholder={placeholder}
+                  maxMenuHeight={maxMenuHeight}
+                  options={options}
+                  styles={styles}
+                  formatOptionLabel={formatOptionLabel}
+                  isOptionDisabled={isOptionDisabled}
+                  isClearable={isClearable}
+                  menuIsOpen={false}
+                />
+              </div>
+            </div>
+          );
+        }}
       />
-    </ReactSelectRefContext.Provider>
+    );
+  }
+  return (
+    <SelectComponent<T, U, V>
+      ref={forwardedRef}
+      maxMenuHeight={maxMenuHeight}
+      options={options}
+      placeholder={placeholder}
+      formatOptionLabel={formatOptionLabel}
+      isOptionDisabled={isOptionDisabled}
+      isClearable={isClearable}
+      styles={styles}
+      {...restProps}
+    />
   );
 }) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  props: SelectProps<Option, IsMulti, Group> & {ref?: any}
+  props: SelectProps<Option, IsMulti, Group> & {ref?: $TSFixMe}
 ) => JSX.Element;
 
-function CreatableSelectInner<T = unknown, U extends boolean = boolean, V extends GroupBase<T> = GroupBase<T>>(
-  {
-    components,
-    isCollectionMode,
-    menuPortalTarget,
-    styles = {},
-    virtualized = true,
-    forbidValuesClearInCollnMode,
-    ...rest
-  }: CreatableProps<T, U, V> & SelectProps<T, U, V>,
-  ref: ForwardedRef<SelectInstance<T, U, V>>
-) {
-  const optionsCount = useMemo(() => countOptions(rest.options), [rest.options]);
-
-  const selectComponents = useSelectComponents({
-    components,
-    optionsCount,
-    virtualized,
-    isCollectionMode,
-    forbidValuesClearInCollnMode,
-  });
-
-  const combinedStyles = useSelectStyles({virtualized, styles});
-
-  return (
-    <BaseCreatableSelect
-      ref={ref}
-      menuPortalTarget={menuPortalTarget}
-      menuPlacement={"auto"}
-      styles={combinedStyles}
-      isMulti={isCollectionMode}
-      backspaceRemovesValue={isCollectionMode}
-      tabSelectsValue={false}
-      components={selectComponents}
-      {...rest}
-      isDisabled={rest.disabled}
-    />
-  );
+export function SingleRowSelect<T = unknown, U extends boolean = boolean, V extends GroupBase<T> = GroupBase<T>>({
+  styles = {},
+  ...rest
+}: SelectProps<T, U, V>) {
+  return <Select {...rest} styles={combineStyles([makeSingleLineStyles<T, U, V>(), styles])} />;
 }
 
-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>;
+export {CreatableSelect} from "./select";

package/src/select/select-in-popover.tsx

@@ -25,10 +25,10 @@ import {
   OnChangeValue,
   OptionsOrGroups,
   PropsValue,
-  Select as ReactSelect,
+  SelectComponent as ReactSelect,
   SelectProps,
   StylesConfig,
-} from "./index";
+} from "./select";
 import {SelectControlSettingsProvider} from "./select-control-settings-context";
 import {ButtonColor, ButtonVariant} from "../button/base-button";
 import {makeSelectInPopoverStyles} from "./styles";
@@ -131,6 +131,7 @@ export type SelectInPopoverRef<T, U extends boolean, V extends GroupBase<T>> = {
 
 type Props<T, U extends boolean, V extends GroupBase<T>> = {
   value?: PropsValue<T>;
+  isSearchable?: boolean;
   menuIsOpen?: boolean;
   autoFocus?: boolean;
   virtualized?: boolean;
@@ -139,6 +140,7 @@ type Props<T, U extends boolean, V extends GroupBase<T>> = {
   noOptionsMessage?: () => string | JSX.Element | null;
   options: OptionsOrGroups<T, V>;
   filterOption?: SelectProps<T, U, V>["filterOption"];
+  menuPortalTarget?: SelectProps<T, U, V>["menuPortalTarget"];
   inputValue?: string;
   disabled?: boolean;
   isCollectionMode?: U;
@@ -203,7 +205,11 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
     otherSelectProps,
     forbidValuesClearInCollnMode,
     isOptionDisabled,
+    isSearchable = true,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    menuPortalTarget,
     popoverPlacement = "bottom-start",
+    ...rest
   } = props;
   const [visible, setVisible] = useControllableState({
     value: menuIsOpen,
@@ -381,9 +387,10 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
           {/*So in dom react-select will be a child of popover. */}
           <SelectControlSettingsProvider inPopover={true} getPopupContainerElement={undefined}>
             <ReactSelect<T, U, V>
+              {...rest}
               ref={selectRef}
               styles={styles}
-              isSearchable={true}
+              isSearchable={isSearchable}
               onKeyDown={onKeyDown}
               autoFocus={autoFocus}
               onBlur={onBlur}
@@ -408,6 +415,7 @@ function SelectInPopoverInner<T, U extends boolean, V extends GroupBase<T>>(
               isClearable={!isCollectionMode && isClearable}
               formatGroupLabel={formatGroupLabel}
               formatOptionLabel={formatOptionLabel}
+              menuShouldBlockScroll={false}
               {...otherSelectProps}
               components={selectComponents}
               forbidValuesClearInCollnMode={forbidValuesClearInCollnMode}