@fibery/ui-kit 1.24.1 → 1.25.1

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.24.1",
-  "main": "index.ts",
+  "version": "1.25.1",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -67,12 +66,11 @@
     "react-select": "5.3.2",
     "react-select-country-list": "2.2.1",
     "react-virtuoso": "4.6.0",
-    "react-windowed-select": "5.0.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
     "@fibery/emoji-data": "2.3.0",
-    "@fibery/helpers": "1.2.0",
-    "@fibery/react": "1.3.0"
+    "@fibery/react": "1.3.0",
+    "@fibery/helpers": "1.2.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/design-system.ts

@@ -235,7 +235,13 @@ export const themeColors = {
   checkboxColor: [slate.slate10, slateDark.slate10],
   colorBgActionsMenu: [getOpacities(whiteA.whiteA0).opacity85, getOpacities(slateDark.slate4).opacity85],
   colorBgActionsMenuItemHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
+  colorBgActionsMenuItemSelected: [getOpacities(indigo.indigo4).opacity80, getOpacities(indigoDark.indigo4).opacity80],
+  colorBgActionsMenuItemSelectedHover: [
+    getOpacities(indigo.indigo5).opacity80,
+    getOpacities(indigoDark.indigo6).opacity80,
+  ],
   colorBgActionsMenuItemDangerHover: [getOpacities(red.red9).opacity10, getOpacities(redDark.red10).opacity10],
+
   colorBgActionsMenuItemDangerActive: [getOpacities(red.red9).opacity80, getOpacities(redDark.red10).opacity80],
   actionMenuBg: [whiteA.whiteA0, slateDark.slate4],
   actionMenuInnerBg: [whiteA.whiteA0, slateDark.slate5],
@@ -251,7 +257,7 @@ export const themeColors = {
     `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${getOpacities(slate.slate10).opacity30}`,
     `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 6px 8px -4px ${getOpacities(slateDark.slate2).opacity30}`,
   ],
-  separatorColor: [getOpacities(slate.slate4).opacity50, getOpacities(slateDark.slate8).opacity50],
+  separatorColor: [getOpacities(blackA.blackA0).opacity5, getOpacities(whiteA.whiteA0).opacity5],
   separatorBreadcrumbsColor: [slate.slate8, slateDark.slate8],
   iconColor: [slate.slate10, slateDark.slate10],
   appIconColor: [getOpacities(slate.slate2).opacity90, getOpacities(slate.slate2).opacity70],
@@ -725,6 +731,7 @@ export const space = {
   s12: 12,
   s14: 14,
   s16: 16,
+  s18: 18,
   s20: 20,
   s24: 24,
   s28: 28,

package/src/icons/ast/AutomationsCancelled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AutomationsCancelled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.001 9.166a.833.833 0 0 0-.833.834v3.333a.833.833 0 0 0 1.667 0V10A.834.834 0 0 0 10 9.166Zm.317-3.266a.833.833 0 0 0-.633 0 .833.833 0 0 0-.275.175.958.958 0 0 0-.175.275.833.833 0 0 0 .175.908.958.958 0 0 0 .275.175.833.833 0 0 0 1.15-.766.874.874 0 0 0-.242-.592.834.834 0 0 0-.275-.175Zm-.317-4.234a8.333 8.333 0 1 0 0 16.667 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.333 6.667 6.667 0 0 1 0 13.333Z","fill":"#6E7A83"},"children":[]}],"metadata":""}]},"name":"automations-cancelled"};
+
+export default AutomationsCancelled;

package/src/icons/ast/AutomationsDisabled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AutomationsDisabled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M8.891 1.572a8.57 8.57 0 0 1 2.218 0 1 1 0 1 1-.259 1.983 6.57 6.57 0 0 0-1.7 0 1 1 0 0 1-.259-1.983ZM6.227 3.44a1 1 0 0 1-.184 1.402c-.45.347-.854.75-1.2 1.201a1 1 0 0 1-1.586-1.218 8.545 8.545 0 0 1 1.568-1.568 1 1 0 0 1 1.402.183Zm7.546 0a1 1 0 0 1 1.402-.183c.589.452 1.116.98 1.568 1.568a1 1 0 0 1-1.585 1.218 6.546 6.546 0 0 0-1.201-1.2 1 1 0 0 1-.184-1.403ZM2.693 8.03a1 1 0 0 1 .862 1.12 6.57 6.57 0 0 0 0 1.701 1 1 0 0 1-1.983.259 8.57 8.57 0 0 1 0-2.218 1 1 0 0 1 1.12-.862Zm14.614 0a1 1 0 0 1 1.121.862 8.57 8.57 0 0 1 0 2.218 1 1 0 1 1-1.983-.259 6.578 6.578 0 0 0 0-1.7 1 1 0 0 1 .862-1.121ZM3.44 13.773a1 1 0 0 1 1.402.184c.347.45.75.854 1.201 1.2a1 1 0 1 1-1.218 1.586 8.543 8.543 0 0 1-1.568-1.568 1 1 0 0 1 .183-1.402Zm13.12 0a1 1 0 0 1 .183 1.402 8.542 8.542 0 0 1-1.568 1.568 1 1 0 0 1-1.218-1.585c.45-.347.854-.75 1.2-1.201a1 1 0 0 1 1.403-.184Zm-8.531 3.534a1 1 0 0 1 1.12-.862 6.578 6.578 0 0 0 1.701 0 1 1 0 0 1 .259 1.983 8.57 8.57 0 0 1-2.218 0 1 1 0 0 1-.862-1.12Z","fill":"#6E7A83"},"children":[]}],"metadata":""}]},"name":"automations-disabled"};
+
+export default AutomationsDisabled;

package/src/icons/ast/AutomationsError.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AutomationsError: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M13.092 6.909a.834.834 0 0 0-1.184 0L10 8.825 8.092 6.91a.837.837 0 1 0-1.183 1.183L8.825 10 6.91 11.91a.834.834 0 0 0 .27 1.365.833.833 0 0 0 .913-.182L10 11.175l1.909 1.917a.834.834 0 0 0 1.365-.271.834.834 0 0 0-.182-.912L11.175 10l1.917-1.908a.833.833 0 0 0 0-1.183Zm2.8-2.8A8.334 8.334 0 1 0 4.109 15.892 8.334 8.334 0 1 0 15.892 4.109Zm-1.175 10.608A6.667 6.667 0 1 1 16.667 10a6.626 6.626 0 0 1-1.95 4.717Z","fill":"#E5484D"},"children":[]}],"metadata":""}]},"name":"automations-error"};
+
+export default AutomationsError;

package/src/icons/ast/AutomationsInProgress.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AutomationsInProgress: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M13.335 8.558 9.168 6.15a1.667 1.667 0 0 0-2.5 1.441v4.817a1.666 1.666 0 0 0 2.5 1.442l4.167-2.409a1.667 1.667 0 0 0 0-2.883ZM12.5 10l-4.166 2.408V7.592L12.5 10Zm-2.5-8.333a8.333 8.333 0 1 0 0 16.666 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.334 6.667 6.667 0 0 1 0 13.333Z","fill":"#6E7A83"},"children":[]}],"metadata":""}]},"name":"automations-in-progress"};
+
+export default AutomationsInProgress;

package/src/icons/ast/AutomationsNotStarted.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AutomationsNotStarted: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"M8.335 5.833a.833.833 0 0 0-.834.833v6.667a.833.833 0 0 0 1.667 0V6.666a.833.833 0 0 0-.833-.833ZM10 1.666a8.333 8.333 0 1 0 0 16.667 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.333 6.667 6.667 0 0 1 0 13.333Zm1.667-10.833a.833.833 0 0 0-.833.833v6.667a.833.833 0 0 0 1.666 0V6.666a.833.833 0 0 0-.833-.833Z","fill":"#6E7A83"},"children":[]}],"metadata":""}]},"name":"automations-not-started"};
+
+export default AutomationsNotStarted;

package/src/icons/ast/AutomationsSuccess.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const AutomationsSuccess: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"d":"m12.268 7.325-3.575 3.583-1.375-1.375a.833.833 0 1 0-1.175 1.175l1.958 1.967a.831.831 0 0 0 .592.241.833.833 0 0 0 .583-.241l4.167-4.167a.833.833 0 1 0-1.175-1.183Zm-2.267-5.659a8.333 8.333 0 1 0 0 16.667 8.333 8.333 0 0 0 0-16.666Zm0 15a6.667 6.667 0 1 1 0-13.333 6.667 6.667 0 0 1 0 13.333Z","fill":"#6E7A83"},"children":[]}],"metadata":""}]},"name":"automations-success"};
+
+export default AutomationsSuccess;

package/src/icons/ast/index.tsx

@@ -31,6 +31,12 @@ export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
+export { default as AutomationsCancelled } from './AutomationsCancelled';
+export { default as AutomationsDisabled } from './AutomationsDisabled';
+export { default as AutomationsError } from './AutomationsError';
+export { default as AutomationsInProgress } from './AutomationsInProgress';
+export { default as AutomationsNotStarted } from './AutomationsNotStarted';
+export { default as AutomationsSuccess } from './AutomationsSuccess';
 export { default as Back } from './Back';
 export { default as BacklogIcon } from './BacklogIcon';
 export { default as BatchActionsIcon } from './BatchActionsIcon';

package/src/icons/react/AutomationsCancelled.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AutomationsCancelledSvg from '../ast/AutomationsCancelled';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AutomationsCancelled = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AutomationsCancelledSvg} />;
+
+AutomationsCancelled.displayName = 'AutomationsCancelled';
+export default AutomationsCancelled;

package/src/icons/react/AutomationsDisabled.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AutomationsDisabledSvg from '../ast/AutomationsDisabled';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AutomationsDisabled = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AutomationsDisabledSvg} />;
+
+AutomationsDisabled.displayName = 'AutomationsDisabled';
+export default AutomationsDisabled;

package/src/icons/react/AutomationsError.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AutomationsErrorSvg from '../ast/AutomationsError';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AutomationsError = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AutomationsErrorSvg} />;
+
+AutomationsError.displayName = 'AutomationsError';
+export default AutomationsError;

package/src/icons/react/AutomationsInProgress.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AutomationsInProgressSvg from '../ast/AutomationsInProgress';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AutomationsInProgress = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AutomationsInProgressSvg} />;
+
+AutomationsInProgress.displayName = 'AutomationsInProgress';
+export default AutomationsInProgress;

package/src/icons/react/AutomationsNotStarted.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AutomationsNotStartedSvg from '../ast/AutomationsNotStarted';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AutomationsNotStarted = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AutomationsNotStartedSvg} />;
+
+AutomationsNotStarted.displayName = 'AutomationsNotStarted';
+export default AutomationsNotStarted;

package/src/icons/react/AutomationsSuccess.tsx

@@ -0,0 +1,12 @@
+// This icon file is generated automatically.
+
+import AutomationsSuccessSvg from '../ast/AutomationsSuccess';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const AutomationsSuccess = (
+  props: IconBaseProps,
+): JSX.Element => <Icon {...props} icon={AutomationsSuccessSvg} />;
+
+AutomationsSuccess.displayName = 'AutomationsSuccess';
+export default AutomationsSuccess;

package/src/icons/react/Chat.tsx

@@ -9,4 +9,4 @@ const Chat = (
 ): JSX.Element => <Icon {...props} icon={ChatSvg} />;
 
 Chat.displayName = 'Chat';
-export default Chat;
+export default Chat;

package/src/icons/react/ChatAi.tsx

@@ -9,4 +9,4 @@ const ChatAi = (
 ): JSX.Element => <Icon {...props} icon={ChatAiSvg} />;
 
 ChatAi.displayName = 'ChatAi';
-export default ChatAi;
+export default ChatAi;

package/src/icons/react/Headphones.tsx

@@ -9,4 +9,4 @@ const Headphones = (
 ): JSX.Element => <Icon {...props} icon={HeadphonesSvg} />;
 
 Headphones.displayName = 'Headphones';
-export default Headphones;
+export default Headphones;

package/src/icons/react/HeadphonesAi.tsx

@@ -9,4 +9,4 @@ const HeadphonesAi = (
 ): JSX.Element => <Icon {...props} icon={HeadphonesAiSvg} />;
 
 HeadphonesAi.displayName = 'HeadphonesAi';
-export default HeadphonesAi;
+export default HeadphonesAi;

package/src/icons/react/index.tsx

@@ -31,6 +31,12 @@ export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowTop } from './ArrowTop';
 export { default as AskForInput } from './AskForInput';
 export { default as Atom } from './Atom';
+export { default as AutomationsCancelled } from './AutomationsCancelled';
+export { default as AutomationsDisabled } from './AutomationsDisabled';
+export { default as AutomationsError } from './AutomationsError';
+export { default as AutomationsInProgress } from './AutomationsInProgress';
+export { default as AutomationsNotStarted } from './AutomationsNotStarted';
+export { default as AutomationsSuccess } from './AutomationsSuccess';
 export { default as Back } from './Back';
 export { default as BacklogIcon } from './BacklogIcon';
 export { default as BatchActionsIcon } from './BatchActionsIcon';

package/src/lists/list-row-surface.tsx

@@ -1,19 +1,30 @@
-import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode} from "react";
-import {border, space, textStyles, themeVars} from "../design-system";
+import {ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren, ReactNode, useId} from "react";
+import {border, colors, layout, lineHeight, space, textStyles, themeVars} from "../design-system";
 import {css, cx} from "@linaria/core";
+import {ActionsMenuItemProps} from "../actions-menu/actions-menu-item";
+import {useActionsMenuContext} from "../actions-menu";
+import {stopPropagation} from "@fibery/react/src/stop-propagation";
+import {useActiveDangerousRow, useSetActiveDangerousRow} from "../actions-menu/contexts/actions-menu-dangerous-rows";
+import _ from "lodash";
+import {useCallbackRef} from "@fibery/react/src/use-callback-ref";
 
-export interface ListRowProps extends HTMLAttributes<HTMLDivElement> {
+interface ListRowSurfaceBase extends HTMLAttributes<HTMLDivElement> {
+  testId?: string;
+}
+export interface ListRowSurfaceProps extends ListRowSurfaceBase {
   darker?: boolean;
-  className?: string;
   selected?: boolean;
   done?: boolean;
   focused?: boolean;
   hovered?: boolean;
 }
+interface ActionMenuItemSurfaceProps
+  extends Omit<ActionsMenuItemProps, "description">,
+    Omit<ListRowSurfaceProps, "children" | "darker" | "onSelect" | "id"> {}
 export const NATUAL_HOVER_CLASS = "natural-hover";
 export const NATUAL_FOCUS_CLASS = "natural-focus";
-const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
-const NATURAL_FOCUS = `&.${NATUAL_FOCUS_CLASS}:focus`;
+export const NATURAL_HOVER = `&.${NATUAL_HOVER_CLASS}:hover`;
+export const NATURAL_FOCUS = `&.${NATUAL_FOCUS_CLASS}:focus`;
 
 export const listRowSurfaceStylesBase = css`
   max-width: 100%;
@@ -59,7 +70,9 @@ export const listRowSurfaceStatesDefault = css`
     cursor: pointer;
     background-color: ${themeVars.colorBgListItemGeneralHover};
   }
-
+  &[data-highlighted] {
+    background-color: ${themeVars.colorBgListItemGeneralFocus};
+  }
   ${NATURAL_FOCUS}, &.focus {
     background-color: ${themeVars.colorBgListItemGeneralFocus};
     ${NATURAL_HOVER},
@@ -67,7 +80,8 @@ export const listRowSurfaceStatesDefault = css`
       background-color: ${themeVars.colorBgListItemGeneralFocus};
     }
   }
-  &.done {
+  &.done,
+  &[data-disabled] {
     cursor: not-allowed;
     color: ${themeVars.colorTextListItemGeneralDisabled};
     background-color: ${themeVars.colorBgListItemGeneralDisabled};
@@ -139,12 +153,54 @@ export const listRowSurfaceStatesDark = css`
   }
 `;
 
+export const actionMenuItemSurface = css`
+  margin: 0 ${space.s4}px;
+  background-color: ${themeVars.colorBgListItemGeneral};
+  ${NATURAL_HOVER},
+  &[data-highlighted] {
+    background-color: ${themeVars.colorBgActionsMenuItemHover};
+  }
+  &.done,
+  &[data-disabled] {
+    cursor: not-allowed;
+    color: ${themeVars.colorTextListItemGeneralDisabled};
+    background-color: ${themeVars.colorBgListItemGeneralDisabled};
+    ${NATURAL_HOVER}, &.hover > * {
+      opacity: ${themeVars.opacityListItemGeneralDisabled};
+    }
+  }
+  &.selected {
+    cursor: default;
+    background-color: ${themeVars.colorBgActionsMenuItemSelected};
+    ${NATURAL_HOVER},&.hover, &[data-highlighted] {
+      background-color: ${themeVars.colorBgActionsMenuItemSelectedHover};
+    }
+  }
+  &.dangerous {
+    background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+    ${NATURAL_HOVER},
+    &.hover,
+    &[data-highlighted] {
+      background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+    }
+  }
+  &.warm {
+    background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+    color: ${colors.inversedTextColor};
+    ${NATURAL_HOVER}, &.hover,
+    &[data-highlighted] {
+      background-color: ${themeVars.colorBgActionsMenuItemDangerActive};
+      color: ${colors.inversedTextColor};
+    }
+  }
+`;
+
 /**
  * This should be responsible for all flat list items existing in UI in Fibery. Options, action menus and etc.
  * You can enforce it's state with props focused, hovered, selected, done (use it for disabled too)
  */
 
-export const ListRowSurface = forwardRef<HTMLDivElement, ListRowProps>(
+export const ListRowSurface = forwardRef<HTMLDivElement, ListRowSurfaceProps>(
   ({selected, focused, darker, hovered, done, className, children, ...rest}, ref) => {
     return (
       <div
@@ -167,8 +223,60 @@ export const ListRowSurface = forwardRef<HTMLDivElement, ListRowProps>(
     );
   }
 );
+export const ActionMenuItemSurface = forwardRef<HTMLDivElement, ActionMenuItemSurfaceProps>(
+  ({testId, className, loading, selected, hovered, focused, title, disabled, children, dangerous, ...props}, ref) => {
+    const id = useId();
+    const activeDangerousRow = useActiveDangerousRow();
+    const showWarning = activeDangerousRow === id;
+    const onSelect = useCallbackRef(props.onSelect || _.noop);
+    const {MenuPrimitive} = useActionsMenuContext();
+    const setActiveDangerousRow = useSetActiveDangerousRow();
+    const handleSelect = (e: Event) => {
+      e.stopPropagation();
+
+      if (loading || !id) {
+        e.preventDefault();
+        return;
+      }
+
+      if (dangerous && !showWarning) {
+        e.preventDefault();
+        setActiveDangerousRow(id);
+        return;
+      }
 
-export interface ListRowContentProps extends PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
+      setActiveDangerousRow(null);
+
+      onSelect(e);
+    };
+    return (
+      <MenuPrimitive.Item
+        ref={ref}
+        data-testid={testId}
+        onClick={stopPropagation}
+        onSelect={handleSelect}
+        title={title ? title : ""}
+        className={cx(
+          listRowSurfaceStylesBase,
+          actionMenuItemSurface,
+          className,
+          hovered === undefined && NATUAL_HOVER_CLASS,
+          focused === undefined && NATUAL_FOCUS_CLASS,
+          focused && "focus",
+          disabled && "done",
+          selected && "selected",
+          dangerous && "dangerous",
+          showWarning && "warn"
+        )}
+        disabled={disabled}
+      >
+        {children}
+      </MenuPrimitive.Item>
+    );
+  }
+);
+
+export interface ListRowContentProps extends PropsWithChildren<Omit<HTMLAttributes<HTMLDivElement>, "className">> {
   rootClassName?: string;
   before?: ReactNode;
   after?: ReactNode;
@@ -201,22 +309,11 @@ const ListRowContentSegment = css`
 `;
 export const ListRowContent = forwardRef<HTMLDivElement, ListRowContentProps>(
   (
-    {
-      before,
-      after,
-      className,
-      contentRef,
-      rootClassName,
-      afterClassName,
-      beforeClassName,
-      contentClassName,
-      children,
-      ...rest
-    },
+    {before, after, contentRef, rootClassName, afterClassName, beforeClassName, contentClassName, children, ...rest},
     ref
   ) => {
     return (
-      <div {...rest} ref={ref} className={cx(ListRowContentRoot, rootClassName, className)}>
+      <div {...rest} ref={ref} className={cx(ListRowContentRoot, rootClassName)}>
         {before ? <div className={cx(ListRowLayoutSegment, beforeClassName)}>{before}</div> : null}
         <div ref={contentRef} className={cx(ListRowContentSegment, contentClassName)}>
           {children}
@@ -226,3 +323,30 @@ export const ListRowContent = forwardRef<HTMLDivElement, ListRowContentProps>(
     );
   }
 );
+
+interface ActionMenuItemContentProps extends ListRowContentProps {
+  description?: string;
+}
+const actionMenuItemDescriptionClass = css`
+  ${textStyles.small};
+  line-height: ${lineHeight.nowrap};
+  color: ${themeVars.accentTextColor};
+  padding: ${space.s2}px ${space.s8}px 0;
+`;
+const actionMenuItemContentClass = css`
+  line-height: ${layout.menuItemHeight}px;
+  padding: 0 ${space.s8}px;
+`;
+const actionMenuItemWithDescription = css`
+  min-height: ${layout.itemWithSubtitleHeight}px;
+`;
+export const ActionMenuItemContent = forwardRef<HTMLDivElement, ActionMenuItemContentProps>(
+  ({contentClassName, description, ...rest}, ref) => {
+    return (
+      <div className={cx(description && actionMenuItemWithDescription)}>
+        <ListRowContent contentClassName={cx(contentClassName, actionMenuItemContentClass)} ref={ref} {...rest} />
+        {description ? <div className={actionMenuItemDescriptionClass}>{description}</div> : null}
+      </div>
+    );
+  }
+);

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

@@ -1,24 +1,38 @@
 import {GroupBase} from "../index";
-import {components} from "react-windowed-select";
-import {GroupHeadingProps} from "react-select";
+import {GroupHeadingProps, components} from "react-select";
 import {css} from "@linaria/core";
 import {layout, space, textStyles, themeVars} from "../../design-system";
 import React from "react";
+import {isPureTextChildren} from "../util";
+import {TooltipIfOverflown} from "../../tooltip-if-overflown";
+
 export const groupHeadingNulledStyles = {
   paddingLeft: "",
   paddingRight: "",
   paddingTop: "",
+  marginBottom: "",
+  display: "",
   margin: "",
   ...textStyles.small,
   color: "",
   height: layout.menuItemHeight,
 };
 const groupHeadingClass = css`
+  min-height: ${layout.menuItemHeight}px;
+  color: ${themeVars.disabledTextColor};
+  padding: 0 ${space.s6}px 0 ${space.s8}px;
+  display: flex;
+  align-content: flex-end;
+  align-items: flex-end;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: ${space.s8 + space.s4}px ${space.s8}px ${space.s12}px ${space.s8}px;
-  color: ${themeVars.disabledTextColor};
+`;
+const groupHeadingContentClass = css`
+  white-space: nowrap;
+  flex-basis: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
 const groupDividerContainerStyle = css`
   padding: ${space.s12}px 0;
@@ -42,13 +56,22 @@ export function GroupHeading<
   if (props.data.separator) {
     return <GroupDivider />;
   }
-
-  if (!children) {
-    return null;
-  }
+  const isPureText = isPureTextChildren(children);
   return (
     <components.GroupHeading {...props} className={groupHeadingClass}>
-      {children}
+      {isPureText ? (
+        <TooltipIfOverflown title={children} side={"right"}>
+          {({setNode}) => {
+            return (
+              <div ref={setNode} className={groupHeadingContentClass}>
+                {children}
+              </div>
+            );
+          }}
+        </TooltipIfOverflown>
+      ) : (
+        <div className={groupHeadingContentClass}>{children}</div>
+      )}
     </components.GroupHeading>
   );
 }

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

@@ -0,0 +1,194 @@
+import {GroupHeadingProps, GroupProps, MenuListProps} from "react-select";
+import {ItemContent, Virtuoso, VirtuosoHandle} from "react-virtuoso";
+import {Children, ComponentType, ReactNode, useContext, useEffect, useRef, useState} from "react";
+import {GroupBase, ReactSelectRefContext} from "../util";
+import {layout} from "../../../src/design-system";
+import _, {isFunction, isObject} from "lodash";
+
+const OPTION_HEIGHT = layout.menuItemHeight;
+// this code is logic stolen from windowed-select SCROLL_INTO_VIEW_CHECK_FIX prevents list scrolling when focusing
+// partially visible option. set to 0 to scroll into view any partially hidden focused option every time
+// windowed select default is .33. We've got some precision here, can go with .2
+const MINIMAL_VISIBLE_PORTION_TO_SCROLL_INTO_VIEW = 0.2;
+const SCROLL_INTO_VIEW_CHECK_FIX = OPTION_HEIGHT - OPTION_HEIGHT * MINIMAL_VISIBLE_PORTION_TO_SCROLL_INTO_VIEW;
+function isGroupChild<Option, isMulty extends boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
+  props: unknown
+): props is GroupProps<Option, isMulty, Group> {
+  return (
+    isObject(props) &&
+    "options" in props &&
+    "Heading" in props &&
+    isFunction(props.Heading) &&
+    "headingProps" in props &&
+    isObject(props.headingProps)
+  );
+}
+const flattenGroupChildren: (
+  children: ReactNode,
+  renderGroup: (Component: ComponentType<GroupHeadingProps>, props: GroupProps["headingProps"]) => ReactNode
+) => ReactNode[] = (children, renderGroup) => {
+  return _.compact(
+    Children.toArray(children)
+      .map((child) => {
+        if (isObject(child) && "props" in child && isObject(child.props)) {
+          const {props} = child;
+          if (isGroupChild(props)) {
+            //well, it's a group
+            const children = _.compact(Children.toArray(props.children));
+            if (!children.length) {
+              // do not render empty groups
+              return [];
+            }
+            const heading = renderGroup(props.Heading, props.headingProps);
+            return [heading, ...children];
+          }
+        }
+        //if not a group, just keep child as is
+        return child;
+      })
+      .flat()
+  );
+};
+const drawListElement: ItemContent<ReactNode, never> = (index, child) => child;
+export function MenuListVirtualized<
+  Option,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<Option> = GroupBase<Option>
+>({
+  children,
+  focusedOption,
+  innerRef,
+  maxHeight,
+  theme,
+  getStyles,
+  cx,
+  selectProps,
+}: MenuListProps<Option, IsMulti, Group>) {
+  const virtuoso = useRef<VirtuosoHandle>(null);
+  // options props come non-filtered and we have insufficient info (props) to render groups and options from here.
+  // Also you never know what contents also possible as list content.
+  // that's why it is better working with children and find options and groups among them (hope internal API does not change)
+  // The best strategy to scroll to index and to evade height calculations is to
+  // deconstruct group into it's header and children (options) and render then side by side without group-wrapping div
+  // then we just use integrated scrollToIndex fromVirtuoso API to scroll to desired option (most reliable variant)
+  // that's why Group is just a dummy component that does nothing: to minimize impact of Group component being rendered inside ReactSelect
+  const renderGroup = (Component: ComponentType<GroupHeadingProps>, headingProps: GroupProps["headingProps"]) => {
+    const content = selectProps.formatGroupLabel
+      ? selectProps.formatGroupLabel(headingProps.data as Group)
+      : headingProps.data.label;
+    return content ? (
+      <Component
+        cx={cx}
+        selectProps={selectProps as unknown as GroupHeadingProps["selectProps"]}
+        theme={theme}
+        getStyles={getStyles}
+        {...headingProps}
+      >
+        {content}
+      </Component>
+    ) : null;
+  };
+  const select = useContext(ReactSelectRefContext);
+  const [initialFocusedOption, setInitialFocusedOption] = useState<Option | null>(null);
+
+  const flattenChildren = flattenGroupChildren(children, renderGroup);
+  //fix for select not having focused option when open. if no focused item present, at least first option must be focused.
+  //Unfortunately, we can not rely on select focusedOption to determine option that should be focused initially:
+  //to mark selected option react-select uses value field of Option object.
+  //to define initially focused option react select uses whole Option object reference equality which is not always the case
+  //if select value is not exactly same object as option, we end up having initially focusedOption being just first option.
+  //fix below ensures that initial focusedOption is always selectedOption in cost of one more rerender
+  if (select.current && flattenChildren.length && !initialFocusedOption) {
+    let firstExistingOption: unknown;
+    let selectedOption: unknown;
+    //if an options exists, but there is no focused option, looking for first selected / existing option
+    for (let i = 0; i < flattenChildren.length; i++) {
+      const child = flattenChildren[i];
+      if (
+        isObject(child) &&
+        "props" in child &&
+        isObject(child.props) &&
+        "type" in child.props &&
+        child.props.type === "option" &&
+        "isSelected" in child.props
+      ) {
+        //well it is an option, check if it has data (just for ts and be sure)
+        if ("data" in child.props && isObject(child.props.data)) {
+          if ("isSelected" in child.props && child.props.isSelected) {
+            //setting selected option data as focused option, wrapping up
+            selectedOption = child.props.data;
+            break;
+          }
+          if (!firstExistingOption) {
+            firstExistingOption = child.props.data;
+          }
+        }
+      }
+    }
+    if (selectedOption) {
+      setInitialFocusedOption(selectedOption as Option);
+      select.current.setState({focusedOption: selectedOption});
+    } else if (firstExistingOption) {
+      setInitialFocusedOption(firstExistingOption as Option);
+      select.current.setState({focusedOption: firstExistingOption});
+    }
+  }
+  const menuHeight = Math.min(flattenChildren.length * layout.menuItemHeight, maxHeight);
+  //scrolling to focused option
+  useEffect(() => {
+    let to: ReturnType<typeof setTimeout> | undefined;
+    if (initialFocusedOption && focusedOption && virtuoso.current) {
+      const index = flattenChildren.findIndex((child) => {
+        if (isObject(child) && "props" in child) {
+          if (isObject(child.props) && "data" in child.props) {
+            return child.props.data === focusedOption;
+          }
+        }
+        return false;
+      });
+      if (index >= 0) {
+        const focusedOptionPosition = index * OPTION_HEIGHT;
+        virtuoso.current.getState((state) => {
+          to = setTimeout(() => {
+            if (!virtuoso.current) {
+              return;
+            }
+            if (state.scrollTop - SCROLL_INTO_VIEW_CHECK_FIX > focusedOptionPosition) {
+              virtuoso.current.scrollToIndex({index: index, behavior: "auto"});
+            } else if (
+              state.scrollTop + menuHeight <
+              focusedOptionPosition + OPTION_HEIGHT - SCROLL_INTO_VIEW_CHECK_FIX
+            ) {
+              virtuoso.current.scrollToIndex({
+                index: index,
+                align: "end",
+                behavior: "auto",
+              });
+            }
+          }, 1);
+          // this just makes it smooth. Because of constant rerendering (or IDK why) Virtuoso state and actual scroll
+          // value desync, like actual element do not scroll last frame, this stabilises the behaviour and force sync it
+          virtuoso.current?.scrollTo({top: state.scrollTop});
+        });
+      }
+    }
+    return () => {
+      clearTimeout(to);
+    };
+  }, [focusedOption, flattenChildren, menuHeight, initialFocusedOption, virtuoso]);
+  return (
+    // Needed for correct display inside portals and etc.
+    <div>
+      <Virtuoso
+        ref={virtuoso}
+        // in reality only HTMLDiveElement | null will appear here. We do not use Virtuoso's useWindowScroll prop
+        scrollerRef={innerRef as (ref: HTMLElement | Window | null) => void}
+        style={{height: menuHeight}}
+        fixedItemHeight={layout.menuItemHeight}
+        data={flattenChildren}
+        totalCount={flattenChildren.length}
+        itemContent={drawListElement}
+      />
+    </div>
+  );
+}

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

@@ -1,7 +1,6 @@
 import {GroupBase} from "../index";
-import {CSSObjectWithLabel, MenuProps} from "react-select";
+import {CSSObjectWithLabel, MenuProps, components} from "react-select";
 import cn from "classnames";
-import {components} from "react-windowed-select";
 import {css} from "@linaria/core";
 import {border, space, themeVars} from "../../design-system";
 

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

@@ -1,10 +1,26 @@
 import React, {ReactNode} from "react";
+import {ListRowContent} from "../../lists/list-row-surface";
 import {css} from "@linaria/core";
-import {space} from "../../design-system";
+import {space, layout, textStyles} from "../../design-system";
 
-const NopOptionMessageClass = css`
-  padding: ${space.s12 + 2}px ${space.s8}px;
+const noOptionMessageClass = css`
+  padding: 0 ${space.s6}px;
+  cursor: default;
+  user-select: none;
 `;
+const noOptionMessageContentClass = css`
+  padding: 0 ${space.s6}px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  ${{...textStyles.regular}}
+  line-height: ${layout.menuItemHeight}px;
+`;
+
 export const NoOptionsMessage = ({children}: {children: ReactNode}) => {
-  return <div className={NopOptionMessageClass}>{children}</div>;
+  return (
+    <div className={noOptionMessageClass}>
+      <ListRowContent contentClassName={noOptionMessageContentClass}>{children}</ListRowContent>
+    </div>
+  );
 };

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

@@ -1,12 +1,12 @@
-import {OptionProps} from "react-select";
-import {components} from "react-windowed-select";
+import {OptionProps, components} from "react-select";
 import {GroupBase} from "../index";
 import {css} from "@linaria/core";
 import {layout, space} from "../../design-system";
 import {ListRowContent, ListRowSurface} from "../../lists/list-row-surface";
 import cn from "classnames";
-import {Children, ReactNode, useMemo} from "react";
+import {ComponentProps, useMemo} from "react";
 import {TooltipIfOverflown} from "../../tooltip-if-overflown";
+import {isPureTextChildren} from "../util";
 
 export const OptionNulledVitualizedStyles = {
   height: layout.menuItemHeight,
@@ -31,11 +31,9 @@ const OptionRootClass = css`
   max-width: 100%;
 `;
 const OptionWithTextContent = css`
-  padding-left: 0 ${space.s6}px;
+  padding-left: ${space.s6}px;
 `;
-function isOptionContentIsPureText(children: ReactNode) {
-  return !Children.toArray(children).find((child) => !(typeof child === "string" || typeof child === "number"));
-}
+
 /**
  * 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
@@ -46,16 +44,19 @@ export function OptionSlow<
   Group extends GroupBase<Option> = GroupBase<Option>
 >({children, ...rest}: OptionProps<Option, IsMulti, Group>) {
   const {isDisabled, isSelected, isFocused} = rest;
-  const isPureText = useMemo(() => isOptionContentIsPureText(children), [children]);
+  const isPureText = useMemo(() => isPureTextChildren(children), [children]);
+  const surfaceProps: ComponentProps<typeof ListRowSurface> = {
+    focused: isFocused,
+    selected: isSelected,
+    done: isDisabled,
+  };
+  if ("onMouseOver" in rest.innerProps) {
+    surfaceProps.hovered = false; // disable hover if the option is actually slow
+  }
   return (
     <components.Option {...rest} className={cn(rest.className, OptionRootClass)}>
-      {isPureText ? (
-        <ListRowSurface
-          focused={isFocused}
-          selected={isSelected}
-          hovered={rest.innerProps.onMouseOver ? undefined : false} //if onMouseOver is not passed (fast option used) then enabling natural hover by passing undefined so we not forcing non-hover state
-          done={isDisabled}
-        >
+      <ListRowSurface {...surfaceProps}>
+        {isPureText ? (
           <TooltipIfOverflown title={children} side={"right"} sideOffset={space.s6} visible={isFocused}>
             {({setNode}) => {
               return (
@@ -65,17 +66,10 @@ export function OptionSlow<
               );
             }}
           </TooltipIfOverflown>
-        </ListRowSurface>
-      ) : (
-        <ListRowSurface
-          focused={isFocused}
-          selected={isSelected}
-          hovered={rest.innerProps.onMouseOver ? undefined : false} //if onMouseOver is not passed (fast option used) then enabling natural hover by passing undefined so we not forcing non-hover state
-          done={isDisabled}
-        >
-          <ListRowContent>{children}</ListRowContent>
-        </ListRowSurface>
-      )}
+        ) : (
+          children
+        )}
+      </ListRowSurface>
     </components.Option>
   );
 }

package/src/select/index.tsx

@@ -1,9 +1,8 @@
-import {forwardRef, useCallback, useMemo, useState} from "react";
+import {forwardRef, RefObject, useCallback, useMemo, useRef, useState} from "react";
 import BaseSelect, {
   ActionMeta,
   components as reactSelectComponents,
   createFilter,
-  GroupBase as ReactSelectGroupBase,
   MenuListProps,
   MenuProps,
   mergeStyles,
@@ -14,12 +13,12 @@ import BaseSelect, {
   OptionsOrGroups,
   Props as BaseSelectProps,
   PropsValue,
+  SelectInstance,
   SingleValue,
   SingleValueProps,
   StylesConfig,
 } from "react-select";
 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, OptionSlow} from "./custom-select-partials/option";
@@ -28,9 +27,9 @@ 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};
+import {countOptions, GroupBase, ReactSelectRefContext} from "./util";
+import {MenuListVirtualized} from "./custom-select-partials/menu-list-virtualized";
+import {useComposedRefs} from "@fibery/react/src/use-composed-refs";
 
 export type {
   OptionsOrGroups,
@@ -47,10 +46,13 @@ export type {
   OnChangeValue,
   PropsValue,
 };
-export {WindowedMenuList};
-
-export {components};
+export {reactSelectComponents as components};
+export {MenuListVirtualized};
 
+//Group dummy for virtualized option-lists. For performance.
+function GroupVirtualized() {
+  return null;
+}
 export function combineStyles<
   Option,
   IsMulti extends boolean = boolean,
@@ -70,6 +72,7 @@ export type SelectProps<
   isCollectionMode?: IsMulti;
   disabled?: boolean;
 };
+
 export function SingleRowSelect<
   Option = unknown,
   IsMulti extends boolean = boolean,
@@ -87,22 +90,6 @@ 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);
-}
-
 /**
  * Draws a select input.
  * Please use formatOptionLabel instead of Option component override. Select has smart optimisations for large lists
@@ -175,8 +162,6 @@ export const Select = forwardRef(function Select<
     [onKeyDown, menuOpenState]
   );
 
-  const SelectComponent = (virtualized ? WindowedSelect : BaseSelect) as unknown as typeof BaseSelect;
-
   const combinedStyles = useMemo(() => {
     return combineStyles<Option, IsMulti, Group>([
       componentsStyles,
@@ -185,41 +170,51 @@ export const Select = forwardRef(function Select<
       styles,
     ] as StylesConfig<Option, IsMulti, Group>[]);
   }, [styles, virtualized, zIndex]);
-
+  const contextRef = useRef<SelectInstance<Option, IsMulti, Group> | null>(null);
+  const combined = useComposedRefs(forwardedRef, contextRef);
   return (
-    <SelectComponent
-      ref={forwardedRef}
-      // 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}
-      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
-       */
-        Option: optionsCount > FAST_OPTION_USAGE_THRESHOLD ? Option : OptionSlow,
-        MultiValueRemove: ClearIndicator,
-        NoOptionsMessage,
-        GroupHeading,
-        ...components,
-      }}
-      {...rest}
-      onKeyDown={handleKeyDown}
-      onMenuOpen={onMenuOpenWrapped}
-      onMenuClose={onMenuCloseWrapped}
-      onChange={rest.disabled ? undefined : onChange}
-      isDisabled={rest.disabled}
-    />
+    <ReactSelectRefContext.Provider value={contextRef as RefObject<SelectInstance>}>
+      <BaseSelect<Option, IsMulti, Group>
+        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.
+        menuPortalTarget={(getPopupContainerElement && getPopupContainerElement()) || menuPortalTarget}
+        menuPlacement={"auto"}
+        styles={combinedStyles}
+        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,
+          //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,
+        }}
+        {...rest}
+        onKeyDown={handleKeyDown}
+        onMenuOpen={onMenuOpenWrapped}
+        onMenuClose={onMenuCloseWrapped}
+        onChange={rest.disabled ? undefined : onChange}
+        isDisabled={rest.disabled}
+      />
+    </ReactSelectRefContext.Provider>
   );
   // eslint-disable-next-line no-use-before-define
 }) as <Option = unknown, IsMulti extends boolean = boolean, Group extends GroupBase<Option> = GroupBase<Option>>(
@@ -256,6 +251,7 @@ export function CreatableSelectInner<
   const optionsCount = useMemo(() => {
     return countOptions<Option, Group>(rest.options);
   }, [rest.options]);
+
   return (
     <BaseCreatableSelect
       ref={ref}
@@ -270,7 +266,6 @@ export function CreatableSelectInner<
       tabSelectsValue={false}
       components={{
         Menu: Menu,
-        MenuList: virtualized ? WindowedMenuList : reactSelectComponents.MenuList,
         DropdownIndicator,
         ClearIndicator,
         /*
@@ -279,11 +274,17 @@ export function CreatableSelectInner<
        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,
+        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,
       }}
       {...rest}
       isDisabled={rest.disabled}

package/src/select/select-mock-context.tsx

@@ -0,0 +1,9 @@
+import {PropsWithChildren} from "react";
+import {VirtuosoMockContext} from "react-virtuoso";
+export function SelectMockContext({children}: PropsWithChildren) {
+  return (
+    <VirtuosoMockContext.Provider value={{viewportHeight: 1000, itemHeight: 32}}>
+      {children}
+    </VirtuosoMockContext.Provider>
+  );
+}

package/src/select/styles.ts

@@ -45,10 +45,8 @@ export const virtualizedStyles: StylesConfig = {
   option: () => ({...OptionNulledVitualizedStyles, ...OptionNulledStyles}),
   groupHeading: (provided) => ({
     ...provided,
+    ...groupHeadingNulledStyles,
     height: layout.menuItemHeight,
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
   }),
 };
 

package/src/select/util.ts

@@ -0,0 +1,31 @@
+import {GroupBase as ReactSelectGroupBase, OptionsOrGroups, SelectInstance} from "react-select";
+import {isObject} from "lodash";
+import {Children, createContext, ReactNode, RefObject} from "react";
+/**
+ * API used by ReactSelect internal partials (at least VirtualizedMenuList).
+ */
+export const ReactSelectRefContext = createContext<RefObject<SelectInstance>>({current: null});
+export type GroupBase<T> = ReactSelectGroupBase<T> & {separator?: boolean};
+export function isGroup<Option, Group extends GroupBase<Option>>(
+  optionOrGroup: Option | Group
+): optionOrGroup is Group {
+  return isObject(optionOrGroup) && "options" in optionOrGroup;
+}
+
+export 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 function isPureTextChildren(children: ReactNode) {
+  return !Children.toArray(children).find((child) => !(typeof child === "string" || typeof child === "number"));
+}

package/index.ts

@@ -1 +0,0 @@
-export * from "./src/design-system";

package/src/error-alert.tsx

@@ -1,57 +0,0 @@
-import {css} from "@linaria/core";
-import {layout, border, space, textStyles, themeVars} from "./design-system";
-import {Button} from "./button/button";
-import CloseIcon from "./icons/react/Close";
-import {useTheme} from "./theme-provider";
-
-const errorAlert = css`
-  background-color: ${themeVars.errorBgColor};
-  padding: ${space.s8}px ${space.s12}px;
-  min-height: ${layout.itemHeight}px;
-  border-radius: ${border.radius6}px;
-  display: flex;
-  gap: ${space.s6}px;
-  align-items: center;
-`;
-
-const messageStyle = css`
-  ${textStyles.heading5};
-  color: ${themeVars.errorTextColor};
-`;
-
-const descriptionStyle = css`
-  ${textStyles.regular};
-  color: ${themeVars.errorTextColor};
-`;
-
-export function ErrorAlert({
-  message,
-  description,
-  closable,
-  onClose,
-}: {
-  message: string;
-  description?: React.ReactNode;
-  closable?: boolean;
-  onClose?: () => void;
-}): JSX.Element {
-  const theme = useTheme();
-  const buttonColor = theme.errorButtonColor;
-  return (
-    <div className={errorAlert}>
-      <div
-        className={css`
-          flex-grow: 2;
-        `}
-      >
-        <div className={messageStyle}>{message}</div>
-        {description ? <div className={descriptionStyle}>{description}</div> : null}
-      </div>
-      {closable && onClose ? (
-        <div>
-          <Button borderless onClick={onClose} color={buttonColor} Icon={CloseIcon} width={24} />
-        </div>
-      ) : null}
-    </div>
-  );
-}