From b0e182b11b597933b502e6c7970d417646449dfd Mon Sep 17 00:00:00 2001
From: danylo-hlibov-timechimp <d.hlibov@timechimp.com>
Date: Fri, 14 Jul 2023 08:10:37 +0200
Subject: [PATCH 1/2] [CSR-4323]: multi dropdown virtual

---
 package.json                                  |  2 +-
 .../data-grid/filters/MultiFilter.tsx         |  2 +
 src/components/dropdown/Dropdown.tsx          |  2 +
 src/components/dropdown/types.ts              |  2 +
 .../fixed-size-select/FixedSizeSelect.tsx     | 85 +------------------
 src/components/index.ts                       |  1 +
 .../virtual-scroll-list/FixedSizeListItem.tsx | 28 ++++++
 .../virtual-scroll-list/VirtualScrollList.tsx | 48 +++++++++++
 src/components/virtual-scroll-list/index.ts   |  1 +
 src/components/virtual-scroll-list/styles.ts  |  9 ++
 10 files changed, 98 insertions(+), 82 deletions(-)
 create mode 100644 src/components/virtual-scroll-list/FixedSizeListItem.tsx
 create mode 100644 src/components/virtual-scroll-list/VirtualScrollList.tsx
 create mode 100644 src/components/virtual-scroll-list/index.ts
 create mode 100644 src/components/virtual-scroll-list/styles.ts

diff --git a/package.json b/package.json
index 7f152d575..40ff82c87 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "9.0.0",
+  "version": "9.0.1",
   "license": "MIT",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
diff --git a/src/components/data-grid/filters/MultiFilter.tsx b/src/components/data-grid/filters/MultiFilter.tsx
index c7f28ae48..74a1602e4 100644
--- a/src/components/data-grid/filters/MultiFilter.tsx
+++ b/src/components/data-grid/filters/MultiFilter.tsx
@@ -4,6 +4,7 @@ import { SIZE } from 'baseui/button';
 import { Button } from '../../button';
 import { Dropdown, DropdownItem } from '../../dropdown';
 import { Block } from '../../block';
+import { VirtualScrollList } from '../../virtual-scroll-list';
 import { padding } from '../../../utils';
 import { useTheme } from '../../../providers';
 import { MultiFilterProps } from './types';
@@ -62,6 +63,7 @@ export const MultiFilter = ({
       selectedIds={selectedItems.map(({ id }) => id as string)}
       searchPlaceholder={searchPlaceholder}
       isLoading={valuesLoading}
+      customList={VirtualScrollList}
       footer={
         <Block {...padding(scale300, scale600)} backgroundColor={light4}>
           <Button onClick={handleApplyFilter} width="100%">
diff --git a/src/components/dropdown/Dropdown.tsx b/src/components/dropdown/Dropdown.tsx
index 9fdc92e9d..81aee2ece 100755
--- a/src/components/dropdown/Dropdown.tsx
+++ b/src/components/dropdown/Dropdown.tsx
@@ -28,6 +28,7 @@ export const Dropdown = ({
   placement = 'bottomRight',
   isLoading = false,
   additionalProperties,
+  customList: List,
 }: DropdownProps) => {
   const [dropdownItems, setDropdownItems] = useState<DropdownItem[]>([]);
   const [searchTerm, setSearchTerm] = useState<string>();
@@ -118,6 +119,7 @@ export const Dropdown = ({
               items={dropdownItems}
               overrides={{
                 List: {
+                  component: List,
                   style: {
                     ...padding(),
                     ...borderRadius(showSearch ? '0' : radius200),
diff --git a/src/components/dropdown/types.ts b/src/components/dropdown/types.ts
index 30dfb1ccc..40e9c5806 100644
--- a/src/components/dropdown/types.ts
+++ b/src/components/dropdown/types.ts
@@ -1,3 +1,4 @@
+import React from 'react';
 import { TetherPlacement } from 'baseui/layer';
 
 export interface ActionItemFilterCondition {
@@ -45,4 +46,5 @@ export interface DropdownProps {
   isLoading?: boolean;
   // Additional properties to pass to the action function of a dropdown item i.e. a reference to the GridApi
   additionalProperties?: any;
+  customList?: React.ComponentType<any>;
 }
diff --git a/src/components/fixed-size-select/FixedSizeSelect.tsx b/src/components/fixed-size-select/FixedSizeSelect.tsx
index 15af60050..70847a0ee 100644
--- a/src/components/fixed-size-select/FixedSizeSelect.tsx
+++ b/src/components/fixed-size-select/FixedSizeSelect.tsx
@@ -1,75 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { themedWithStyle } from '../../theme';
-import { Option, Select, StyledDropdownListItem, Value } from 'baseui/select';
-import { StyledList, StyledEmptyState, OptionListProps } from 'baseui/menu';
-import { FixedSizeList } from 'react-window';
+import { Option, Select, Value } from 'baseui/select';
 import { border, borderRadius, padding } from '../../utils';
 import { useTheme } from '../../providers';
+import { VirtualScrollList } from '../virtual-scroll-list';
 import { FixedSizeSelectProps } from './types';
 
-const LIST_ITEM_HEIGHT = 42;
-const EMPTY_LIST_HEIGHT = 72;
-const MAX_LIST_HEIGHT = 200;
-
-const ListItem = themedWithStyle(StyledDropdownListItem, {
-  ...padding('0'),
-  display: 'flex',
-  alignItems: 'center',
-});
-
-const FixedSizeListItem = ({
-  data,
-  index,
-  style,
-}: {
-  data: { props: OptionListProps }[];
-  index: number;
-  style: React.CSSProperties;
-}) => {
-  const { item, overrides, ...restChildProps } = data[index].props;
-  return (
-    <ListItem
-      key={item.id}
-      style={{
-        boxSizing: 'border-box',
-        ...style,
-      }}
-      {...restChildProps}
-    >
-      {item.id}
-    </ListItem>
-  );
-};
-
-const VirtualDropdown = React.forwardRef<HTMLUListElement, any>((props: any, ref) => {
-  const children = React.Children.toArray(props.children);
-  // @ts-expect-error typing issue
-  if (!children[0] || !children[0].props.item) {
-    return (
-      <StyledList $style={{ height: EMPTY_LIST_HEIGHT + 'px' }} ref={ref}>
-        {/* @ts-expect-error typing issue */}
-        <StyledEmptyState {...children[0].props} />
-      </StyledList>
-    );
-  }
-  const height = Math.min(MAX_LIST_HEIGHT, children.length * LIST_ITEM_HEIGHT);
-  return (
-    <StyledList ref={ref}>
-      <FixedSizeList
-        width="100%"
-        height={height}
-        itemCount={children.length}
-        // @ts-expect-error typing issue
-        itemData={children}
-        itemKey={(index: number, data: { props: OptionListProps }[]) => data[index].props.item.id}
-        itemSize={LIST_ITEM_HEIGHT}
-      >
-        {FixedSizeListItem}
-      </FixedSizeList>
-    </StyledList>
-  );
-});
-
 const defaultOptions: Option[] = [];
 for (let i = 0; i < 10000; i += 1) {
   defaultOptions.push({
@@ -78,19 +13,7 @@ for (let i = 0; i < 10000; i += 1) {
   });
 }
 
-export const FixedSizeSelect = ({
-  items,
-  selection,
-  selectedIds,
-  searchPlaceholder,
-}: // title,
-// showSearch,
-// isLoading,
-// startEnhancer,
-// size,
-// isActive,
-// onClear,
-FixedSizeSelectProps) => {
+export const FixedSizeSelect = ({ items, selection, selectedIds, searchPlaceholder }: FixedSizeSelectProps) => {
   const [value, setValue] = useState<Value>([]);
   const [dropdownItems, setDropdownItems] = useState<any[]>([]);
 
@@ -136,7 +59,7 @@ FixedSizeSelectProps) => {
       valueKey="label"
       placeholder={searchPlaceholder || 'Select'}
       overrides={{
-        Dropdown: { component: VirtualDropdown },
+        Dropdown: { component: VirtualScrollList },
         Root: {
           style: {
             width: 'auto',
diff --git a/src/components/index.ts b/src/components/index.ts
index c4833c466..a7538defb 100755
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -59,3 +59,4 @@ export * from './drawer';
 export * from './movable-table';
 export * from './slider';
 export * from './fixed-size-select';
+export * from './virtual-scroll-list';
diff --git a/src/components/virtual-scroll-list/FixedSizeListItem.tsx b/src/components/virtual-scroll-list/FixedSizeListItem.tsx
new file mode 100644
index 000000000..c1e813a53
--- /dev/null
+++ b/src/components/virtual-scroll-list/FixedSizeListItem.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { OptionListProps } from 'baseui/menu';
+import { DropdownOption } from 'index';
+import { ListItem } from './styles';
+
+export const FixedSizeListItem = ({
+  data,
+  index,
+  style,
+}: {
+  data: { props: OptionListProps }[];
+  index: number;
+  style: React.CSSProperties;
+}) => {
+  const { item, ...restChildProps } = data[index].props;
+  return (
+    <ListItem
+      key={item.id}
+      style={{
+        boxSizing: 'border-box',
+        ...style,
+      }}
+      {...restChildProps}
+    >
+      <DropdownOption item={item} onItemSelect={item.action} />
+    </ListItem>
+  );
+};
diff --git a/src/components/virtual-scroll-list/VirtualScrollList.tsx b/src/components/virtual-scroll-list/VirtualScrollList.tsx
new file mode 100644
index 000000000..c9197038b
--- /dev/null
+++ b/src/components/virtual-scroll-list/VirtualScrollList.tsx
@@ -0,0 +1,48 @@
+import React, { ReactElement } from 'react';
+import { StyledList, StyledEmptyState, OptionListProps } from 'baseui/menu';
+import { FixedSizeList } from 'react-window';
+import { FixedSizeListItem } from './FixedSizeListItem';
+import { borderRadius, padding } from '../../utils';
+
+const LIST_ITEM_HEIGHT = 42;
+const EMPTY_LIST_HEIGHT = 72;
+const MAX_LIST_HEIGHT = 200;
+
+export const VirtualScrollList = React.forwardRef<HTMLUListElement, any>((props: any, ref) => {
+  const children = React.Children.toArray(props.children);
+
+  const [firstChildren] = children as ReactElement[];
+
+  if (!firstChildren || !firstChildren.props.item) {
+    return (
+      <StyledList $style={{ height: EMPTY_LIST_HEIGHT + 'px' }} ref={ref}>
+        <StyledEmptyState {...firstChildren.props} />
+      </StyledList>
+    );
+  }
+  const height = Math.min(MAX_LIST_HEIGHT, children.length * LIST_ITEM_HEIGHT);
+  return (
+    <StyledList
+      ref={ref}
+      $style={{
+        ...padding(),
+        ...borderRadius('0'),
+        paddingInlineStart: '0',
+        boxShadow: 'none',
+        outline: 'none',
+        maxHeight: '300px',
+      }}
+    >
+      <FixedSizeList
+        width="100%"
+        height={height}
+        itemCount={children.length}
+        itemData={children as ReactElement[]}
+        itemKey={(index: number, data: { props: OptionListProps }[]) => data[index].props.item.id}
+        itemSize={LIST_ITEM_HEIGHT}
+      >
+        {FixedSizeListItem}
+      </FixedSizeList>
+    </StyledList>
+  );
+});
diff --git a/src/components/virtual-scroll-list/index.ts b/src/components/virtual-scroll-list/index.ts
new file mode 100644
index 000000000..0554516d3
--- /dev/null
+++ b/src/components/virtual-scroll-list/index.ts
@@ -0,0 +1 @@
+export * from './VirtualScrollList';
diff --git a/src/components/virtual-scroll-list/styles.ts b/src/components/virtual-scroll-list/styles.ts
new file mode 100644
index 000000000..4324dfee3
--- /dev/null
+++ b/src/components/virtual-scroll-list/styles.ts
@@ -0,0 +1,9 @@
+import { StyledDropdownListItem } from 'baseui/select';
+import { themedWithStyle } from '../../theme';
+import { padding } from '../../utils';
+
+export const ListItem = themedWithStyle(StyledDropdownListItem, {
+  ...padding('0'),
+  display: 'flex',
+  alignItems: 'center',
+});

From 719d67f5e187162b485065a2d48c76f62164da6a Mon Sep 17 00:00:00 2001
From: danylo-hlibov-timechimp <d.hlibov@timechimp.com>
Date: Fri, 14 Jul 2023 09:31:50 +0200
Subject: [PATCH 2/2] fix: fixed imports

---
 src/components/virtual-scroll-list/FixedSizeListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/virtual-scroll-list/FixedSizeListItem.tsx b/src/components/virtual-scroll-list/FixedSizeListItem.tsx
index c1e813a53..8d0d5a0aa 100644
--- a/src/components/virtual-scroll-list/FixedSizeListItem.tsx
+++ b/src/components/virtual-scroll-list/FixedSizeListItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { OptionListProps } from 'baseui/menu';
-import { DropdownOption } from 'index';
+import { DropdownOption } from '../dropdown';
 import { ListItem } from './styles';
 
 export const FixedSizeListItem = ({