[CSR-4323]: multi dropdown virtual

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

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

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),

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

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',

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

src/components/virtual-scroll-list/FixedSizeListItem.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { OptionListProps } from 'baseui/menu';
+import { DropdownOption } from '../dropdown';
+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>
+  );
+};

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>
+  );
+});

src/components/virtual-scroll-list/index.ts

@@ -0,0 +1 @@
+export * from './VirtualScrollList';

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',
+});