@fibery/ui-kit 1.40.0 → 1.40.2

package/src/icons/svg/dividers.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+    <path d="M5 16.0267L5.22143 18L6.65633 16.6311L9.10983 9.87556C8.50753 9.72444 7.97608 9.42222 7.54207 9.00444L5 16.0267ZM12.4491 9.00444C12.0151 9.42222 11.4748 9.72444 10.8813 9.87556L13.3348 16.6311L14.7697 18L15 16.0267L12.4491 9.00444ZM12.5996 6.97778C12.8654 5.59111 12.0682 4.36444 10.8813 3.93778V2.88889C10.8813 2.4 10.4827 2 9.99557 2C9.50841 2 9.10983 2.4 9.10983 2.88889V3.93778C8.08237 4.31111 7.33835 5.28889 7.33835 6.44444C7.33835 8.08 8.80868 9.37778 10.4916 9.06667C11.5368 8.87111 12.3959 8.02667 12.5996 6.97778ZM9.99557 7.33333C9.50841 7.33333 9.10983 6.93333 9.10983 6.44444C9.10983 5.95556 9.50841 5.55556 9.99557 5.55556C10.4827 5.55556 10.8813 5.95556 10.8813 6.44444C10.8813 6.93333 10.4827 7.33333 9.99557 7.33333Z"/>
+</svg>

package/src/icons/svg/double-line.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 7.5C1.5 7.08579 1.83579 6.75 2.25 6.75H17.75C18.1642 6.75 18.5 7.08579 18.5 7.5C18.5 7.91421 18.1642 8.25 17.75 8.25H2.25C1.83579 8.25 1.5 7.91421 1.5 7.5ZM1.5 12.5C1.5 12.0858 1.83579 11.75 2.25 11.75H17.75C18.1642 11.75 18.5 12.0858 18.5 12.5C18.5 12.9142 18.1642 13.25 17.75 13.25H2.25C1.83579 13.25 1.5 12.9142 1.5 12.5Z" />
+</svg>

package/src/icons/svg/line-jump.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.05 6.11H5.74C6.11 6.11 6.46 6.25 6.72 6.51L9.4 9.19C9.47718 9.26801 9.56907 9.32993 9.67034 9.3722C9.77162 9.41446 9.88026 9.43622 9.99 9.43622C10.0997 9.43622 10.2084 9.41446 10.3097 9.3722C10.4109 9.32993 10.5028 9.26801 10.58 9.19C10.658 9.11282 10.7199 9.02093 10.7622 8.91966C10.8045 8.81839 10.8262 8.70974 10.8262 8.6C10.8262 8.49026 10.8045 8.38162 10.7622 8.28034C10.7199 8.17907 10.658 8.08718 10.58 8.01L7.9 5.33C7.61677 5.04609 7.28001 4.82123 6.90922 4.66846C6.53844 4.51568 6.14102 4.43803 5.74 4.44H3.05C2.82987 4.44 2.61876 4.52745 2.4631 4.6831C2.30745 4.83876 2.22 5.04987 2.22 5.27C2.22 5.49013 2.30745 5.70124 2.4631 5.8569C2.61876 6.01255 2.82987 6.1 3.05 6.1V6.11Z" />
+<path d="M18.63 10.79L15.57 7.74C15.4957 7.6527 15.4042 7.58173 15.3011 7.53156C15.1981 7.48139 15.0857 7.45311 14.9712 7.4485C14.8567 7.44389 14.7424 7.46305 14.6357 7.50478C14.5289 7.5465 14.432 7.60988 14.3509 7.69093C14.2699 7.77198 14.2065 7.86894 14.1648 7.97569C14.1231 8.08245 14.1039 8.19669 14.1085 8.31121C14.1131 8.42574 14.1414 8.53807 14.1916 8.64112C14.2417 8.74418 14.3127 8.83573 14.4 8.91L16.03 10.55H0.83C0.60987 10.55 0.398757 10.6374 0.243101 10.7931C0.0874462 10.9488 0 11.1599 0 11.38C0 11.6001 0.0874462 11.8112 0.243101 11.9669C0.398757 12.1226 0.60987 12.21 0.83 12.21H16.03L14.4 13.84C14.2435 13.9952 14.1551 14.2061 14.1542 14.4265C14.1532 14.6468 14.2398 14.8585 14.395 15.015C14.5502 15.1715 14.7611 15.2599 14.9815 15.2609C15.2018 15.2618 15.4135 15.1752 15.57 15.02L18.62 11.97C18.698 11.8928 18.7599 11.8009 18.8022 11.6997C18.8445 11.5984 18.8662 11.4897 18.8662 11.38C18.8662 11.2703 18.8445 11.1616 18.8022 11.0603C18.7599 10.9591 18.698 10.8672 18.62 10.79H18.63Z" />
+</svg>

package/src/icons/svg/quick-filter-personal.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M2.75 11.25C3.16421 11.25 3.5 11.5858 3.5 12V15.25C3.5 15.9404 4.05964 16.5 4.75 16.5H8C8.41421 16.5 8.75 16.8358 8.75 17.25C8.75 17.6642 8.41421 18 8 18H4.75C3.23122 18 2 16.7688 2 15.25V12C2 11.5858 2.33579 11.25 2.75 11.25ZM17.25 11.25C17.6642 11.25 18 11.5858 18 12V15.25C18 16.7688 16.7688 18 15.25 18H12C11.5858 18 11.25 17.6642 11.25 17.25C11.25 16.8358 11.5858 16.5 12 16.5H15.25C15.9404 16.5 16.5 15.9404 16.5 15.25V12C16.5 11.5858 16.8358 11.25 17.25 11.25ZM11.25 12C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H8.75C8.33579 13.5 8 13.1642 8 12.75C8 12.3358 8.33579 12 8.75 12H11.25ZM12.25 9.25C12.6642 9.25 13 9.58579 13 10C13 10.4142 12.6642 10.75 12.25 10.75H7.75C7.33579 10.75 7 10.4142 7 10C7 9.58579 7.33579 9.25 7.75 9.25H12.25ZM8 2C8.41421 2 8.75 2.33579 8.75 2.75C8.75 3.16421 8.41421 3.5 8 3.5H4.75C4.05964 3.5 3.5 4.05964 3.5 4.75V8C3.5 8.41421 3.16421 8.75 2.75 8.75C2.33579 8.75 2 8.41421 2 8V4.75C2 3.23122 3.23122 2 4.75 2H8ZM15.25 2C16.7688 2 18 3.23122 18 4.75V8C18 8.41421 17.6642 8.75 17.25 8.75C16.8358 8.75 16.5 8.41421 16.5 8V4.75C16.5 4.05964 15.9404 3.5 15.25 3.5H12C11.5858 3.5 11.25 3.16421 11.25 2.75C11.25 2.33579 11.5858 2 12 2H15.25ZM13.25 6.5C13.6642 6.5 14 6.83579 14 7.25C14 7.66421 13.6642 8 13.25 8H6.75C6.33579 8 6 7.66421 6 7.25C6 6.83579 6.33579 6.5 6.75 6.5H13.25Z" fill="black"/>
+</svg>

package/src/icons/svg/quick-filter.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.25 2C16.7688 2 18 3.23122 18 4.75V15.25C18 16.7688 16.7688 18 15.25 18H4.75C3.23122 18 2 16.7688 2 15.25V4.75C2 3.23122 3.23122 2 4.75 2H15.25ZM4.75 3.5C4.05964 3.5 3.5 4.05964 3.5 4.75V15.25C3.5 15.9404 4.05964 16.5 4.75 16.5H15.25C15.9404 16.5 16.5 15.9404 16.5 15.25V4.75C16.5 4.05964 15.9404 3.5 15.25 3.5H4.75ZM11.25 12C11.6642 12 12 12.3358 12 12.75C12 13.1642 11.6642 13.5 11.25 13.5H8.75C8.33579 13.5 8 13.1642 8 12.75C8 12.3358 8.33579 12 8.75 12H11.25ZM12.25 9.25C12.6642 9.25 13 9.58579 13 10C13 10.4142 12.6642 10.75 12.25 10.75H7.75C7.33579 10.75 7 10.4142 7 10C7 9.58579 7.33579 9.25 7.75 9.25H12.25ZM13.25 6.5C13.6642 6.5 14 6.83579 14 7.25C14 7.66421 13.6642 8 13.25 8H6.75C6.33579 8 6 7.66421 6 7.25C6 6.83579 6.33579 6.5 6.75 6.5H13.25Z" fill="black"/>
+</svg>

package/src/images-gallery/get-gallery-src.ts

@@ -0,0 +1,71 @@
+import {thumbnailsMimeTypesWhiteList} from "./thumbnails-mime-types-white-list";
+
+export function getGallerySrc({
+  src,
+  contentType,
+  contentLength,
+  isPhone,
+}: {
+  src: string;
+  contentType: string;
+  contentLength: number;
+  isPhone: boolean;
+}): null | {
+  type: "iframe" | "video" | "image";
+  src: string;
+} {
+  const isFiberyFile = src?.startsWith("/api/files");
+
+  if (!isPhone && isFiberyFile && contentType?.startsWith("text/") && contentLength < 2 * 1024 * 1024) {
+    const url = new URL(src, `${window.location}`);
+    url.searchParams.append("plain-text", "true");
+
+    return {
+      type: "iframe",
+      src: url.href,
+    };
+  }
+
+  if (!contentType || !thumbnailsMimeTypesWhiteList.has(contentType)) {
+    return null;
+  }
+
+  if (ImageContentTypes.includes(contentType)) {
+    return {
+      type: "image",
+      src,
+    };
+  }
+
+  if (VideoContentTypes.includes(contentType)) {
+    return {
+      type: "video",
+      src,
+    };
+  }
+
+  if (!isPhone && IframeContentTypes.includes(contentType)) {
+    return {
+      type: "iframe",
+      src: new URL(src, `${window.location}`).href,
+    };
+  }
+
+  return null;
+}
+
+const ImageContentTypes = [
+  "image/apng",
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/avif",
+  "image/gif",
+  "image/x-icon",
+  "image/bmp",
+  "image/tiff",
+  "image/svg+xml",
+];
+
+const VideoContentTypes = ["video/mp4", "video/quicktime"];
+const IframeContentTypes = ["application/pdf"];

package/src/images-gallery/images-gallery.tsx

@@ -340,7 +340,7 @@ export function createPhotoSwipeLightbox(
   return photoSwipeLightbox;
 }
 
-function initGallery(
+export function initGallery(
   imagesRegistry: Registry,
   {toastQueue, themeMode, isPhone}: {toastQueue: ToastQueue; themeMode: ThemeMode; isPhone: boolean}
 ) {

package/src/images-gallery/thumbnails-mime-types-white-list.ts

@@ -0,0 +1,17 @@
+export const thumbnailsMimeTypesWhiteList = new Set([
+  "image/apng",
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "image/avif",
+  "image/gif",
+  "image/x-icon",
+  "image/bmp",
+  "image/tiff",
+  "image/heic",
+  "image/svg+xml",
+  "video/mp4",
+  "video/quicktime",
+  "application/pdf",
+  "image/vnd.adobe.photoshop",
+]);

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

@@ -44,6 +44,9 @@ import {usePopupStackContext} from "./popup-stack-context";
 import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 import {createContext} from "@fibery/react/src/create-context";
 import {Wrap} from "@fibery/react/src/wrap";
+import {composeEventHandlers} from "@fibery/react/src/compose-event-handlers";
+
+export const mobileZIndex = 1002;
 
 const Backdrop = ({className}: {className?: string}) => {
   return (
@@ -171,7 +174,7 @@ export function MobilePopup({
           right: var(${safeAreaInsetRightVar});
           top: var(${safeAreaInsetTopVar});
           bottom: var(${safeAreaInsetBottomVar});
-          z-index: 1002;
+          z-index: ${mobileZIndex};
         `,
         !height && mobileAnimationClassName,
         !height && popupContentClassName,
@@ -230,20 +233,25 @@ type TriggerProps = {
   asChild?: boolean;
   // Support case when popup trigger is virtual reference
   reference?: Reference;
-  children?: ReactNode;
-};
+} & React.ComponentPropsWithoutRef<"div">;
 
-const Trigger = ({asChild = false, reference, children}: TriggerProps) => {
+const Trigger = ({asChild = false, reference, children, onMouseDown, ...props}: TriggerProps) => {
   const {setTriggerElement, disabled, open, onOpen, onClose} = useContext();
 
-  const onMouseDown: React.MouseEventHandler<HTMLElement> = (e) => {
-    if (disabled) {
-      return;
-    }
-    if (e.button === 0) {
-      open ? onClose?.(e as unknown as Event) : onOpen?.();
+  const onMouseDownCb: React.MouseEventHandler<HTMLElement> = composeEventHandlers(
+    onMouseDown,
+    (e) => {
+      if (disabled) {
+        return;
+      }
+      if (e.button === 0) {
+        open ? onClose?.(e as unknown as Event) : onOpen?.();
+      }
+    },
+    {
+      checkForDefaultPrevented: false,
     }
-  };
+  );
 
   useEffect(() => {
     if (reference) {
@@ -261,12 +269,13 @@ const Trigger = ({asChild = false, reference, children}: TriggerProps) => {
       ref: setTriggerElement,
       "aria-expanded": open,
       "aria-haspopup": true,
-      onMouseDown,
+      onMouseDown: onMouseDownCb,
+      ...props,
     });
   }
 
   return (
-    <div ref={setTriggerElement} onMouseDown={onMouseDown}>
+    <div ref={setTriggerElement} onMouseDown={onMouseDownCb} {...props}>
       {children}
     </div>
   );

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";