Merge pull request #655 from Orfium/feat/list-v5

package.json

@@ -108,7 +108,6 @@
   },
   "dependencies": {
     "@tippyjs/react": "^4.2.5",
-    "@types/react-window": "^1.8.4",
     "dayjs": "^1.8.34",
     "emotion-reset": "^3.0.1",
     "lodash": "^4.17.19",
@@ -121,7 +120,6 @@
     "react-media": "^2.0.0-rc.1",
     "react-range": "^1.8.12",
     "react-switch": "^6.0.0",
-    "react-window": "^1.8.6",
     "recharts": "^1.8.5",
     "tslib": "^2.4.1",
     "uuid": "^8.3.2"

src/components/DropdownButton/DropdownButton.test.tsx

@@ -48,7 +48,7 @@ describe('DropdownButton:', () => {
 
     userEvent.click(iconButton);
 
-    const option = screen.getByTestId('dropdown-button-options');
+    const option = screen.getByTestId('ictinus_list_item_Item_1');
 
     userEvent.click(option);
 

src/components/DropdownButton/DropdownButton.tsx

@@ -1,5 +1,6 @@
 import { ClickEvent } from 'hooks/useLoading';
 import useTheme from 'hooks/useTheme';
+import { head } from 'lodash';
 import React, { useCallback } from 'react';
 import { TestProps } from 'utils/types';
 
@@ -13,7 +14,7 @@ import { generateTestDataId } from '../../utils/helpers';
 import Button from 'components/Button';
 import { PrimitiveButtonTypes } from 'components/Button/Button.types';
 import IconButton from 'components/IconButton';
-import List, { ListItemType } from 'components/List';
+import List, { ListItem, ListItemText, ListItemType, ListSelection } from 'components/List';
 import ClickAwayListener from 'components/utils/ClickAwayListener';
 import { MenuPositionAllowed, optionsStyle } from 'components/utils/DropdownOptions';
 
@@ -57,16 +58,26 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
 
   /** The CTA for the Options inside the Dropdown */
   const handleOptionClick = useCallback(
-    (option: ListItemType) => {
+    (option: string | number) => {
       setIsOpen(false);
-      onOptionSelect(option.value);
+      onOptionSelect(option);
     },
     [onOptionSelect]
   );
 
   /** The CTA for the IconButton and the ClickAwayListener */
   const handleIconButtonClick = useCallback(() => setIsOpen(!isOpen), [isOpen]);
 
+  const onSelectionChange = useCallback(
+    (keys: ListSelection) => {
+      setIsOpen(false);
+      const keyFound = String(head(Array.from(keys)));
+      const optionFound = items?.find((o) => o === keyFound);
+      optionFound && handleOptionClick(optionFound);
+    },
+    [handleOptionClick, items]
+  );
+
   return (
     <ClickAwayListener onClick={() => setIsOpen(false)}>
       <div css={wrapperStyle()}>
@@ -106,11 +117,16 @@ const DropdownButton = React.forwardRef<HTMLButtonElement, DropdownButtonProps>(
           <div css={optionsStyle({ menuPosition })(theme)}>
             {items && (
               <List
-                data={items.map((item) => ({ value: item, label: item }))}
-                rowSize={'small'}
-                handleOptionClick={handleOptionClick}
+                label={'dropdown-button'}
+                onSelectionChange={onSelectionChange}
                 dataTestId={generateTestDataId('dropdown-button-options', dataTestPrefixId)}
-              />
+              >
+                {items.map((item) => (
+                  <ListItem key={item} rowSize={'compact'}>
+                    <ListItemText>{item}</ListItemText>
+                  </ListItem>
+                ))}
+              </List>
             )}
           </div>
         )}

src/components/Filter/Filter.test.tsx

@@ -4,6 +4,7 @@ import { render, screen, waitFor } from 'test';
 
 import { selectDropdownOption } from '../../test';
 import Filter from './Filter';
+import { SELECT_ALL_OPTION } from '../Select/constants';
 
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
   observe: jest.fn(),
@@ -80,11 +81,13 @@ describe('Generic Filter', () => {
 
     const selectInput = screen.getByTestId('filter-input');
 
-    expect(screen.getByTestId('ictinus_list_default_option')).toBeInTheDocument();
+    expect(screen.getByTestId(`ictinus_list_item_${defaultFilter.value}`)).toBeInTheDocument();
 
     userEvent.type(selectInput, 'test');
 
-    expect(screen.queryByTestId('ictinus_list_default_option')).not.toBeInTheDocument();
+    expect(
+      screen.queryByTestId(`ictinus_list_item_${defaultFilter.value}`)
+    ).not.toBeInTheDocument();
   });
 
   it('should display loading dots when isLoading is true', async () => {
@@ -214,7 +217,7 @@ describe('Multi Filter', () => {
   });
 
   it('selects all options and changes label when Select All is clicked', async () => {
-    userEvent.click(screen.getByTestId('ictinus_list_default_option'));
+    userEvent.click(screen.getByTestId(`ictinus_list_item_${SELECT_ALL_OPTION.value}`));
 
     userEvent.click(button);
 

src/components/Filter/components/Options/Options.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import { flatMap, head } from 'lodash';
+import React, { useCallback } from 'react';
 
 import { emptyStyle } from './Options.style';
+import { SELECT_ALL_OPTION } from '../../../Select/constants';
 import { FilterOption } from '../../types';
 import { FILTER_OPTIONS_MAX_HEIGHT } from 'components/Filter/utils';
-import List from 'components/List';
+import List, { ListItem, ListItemText, ListSelection } from 'components/List';
 import { MAX_NON_VIRTUALIZED_ITEMS_FILTER } from 'components/List/utils';
 
 export interface Props {
@@ -30,19 +32,44 @@ const Options: React.FC<Props> = ({
 
   const height = isForcedVirtualized ? FILTER_OPTIONS_MAX_HEIGHT : undefined;
   const defaultOption = isDefaultOptionVisible ? defaultValue : undefined;
+  const onSelectionChange = useCallback(
+    (keys: ListSelection) => {
+      const keyFound = String(head(Array.from(keys)));
+      if (keyFound === SELECT_ALL_OPTION.value) {
+        onSelect(SELECT_ALL_OPTION);
+      } else {
+        const optionFound = flatMap(items, (o) => o.options || o).find(
+          (o) => String(o.value) === keyFound
+        );
+        optionFound && onSelect(optionFound);
+      }
+    },
+    [items, onSelect]
+  );
 
   return items.length ? (
     <List
-      data={items.filter((option) => option.value !== defaultValue.value)}
-      rowSize={'small'}
-      defaultOption={defaultOption}
-      selectedItem={selectedItem}
-      isSearchable={isSearchable}
-      handleOptionClick={(option: FilterOption) => onSelect(option)}
+      label={'filter-options'}
+      selectedKeys={selectedItem ? [selectedItem.value] : []}
+      disabledKeys={items.filter((o) => o.isDisabled).map((o) => o.value)}
+      onSelectionChange={onSelectionChange}
       isVirtualized={isVirtualized && isForcedVirtualized}
       height={height}
       dataTestId={dataTestId}
-    />
+    >
+      {defaultOption && (
+        <ListItem key={defaultOption.value} rowSize={'compact'}>
+          <ListItemText>{defaultOption.label}</ListItemText>
+        </ListItem>
+      )}
+      {items
+        .filter((option) => option.value !== defaultValue.value)
+        .map((item) => (
+          <ListItem key={item.value} rowSize={'compact'}>
+            <ListItemText>{item.label}</ListItemText>
+          </ListItem>
+        ))}
+    </List>
   ) : (
     <div css={emptyStyle()}>No options</div>
   );

src/components/List/List.style.ts

@@ -11,16 +11,6 @@ export const wrapperStyle =
       width: ${`${width}px` || '100%'};
     `;
 
-export const listLabelWithHelper: SerializedStyles = css`
-  display: flex;
-  flex-direction: column;
-  cursor: inherit;
-`;
-
-export const listLabel: SerializedStyles = css`
-  cursor: inherit;
-`;
-
 export const listStyle =
   ({ width, height, isSearchable }: { width?: number; height?: number; isSearchable?: boolean }) =>
   (theme: Theme): SerializedStyles =>
@@ -30,14 +20,15 @@ export const listStyle =
       margin-bottom: 0;
       border-radius: ${isSearchable ? 'initial' : theme.globals.spacing.get('3')};
       width: ${width ? rem(width) : '100%'};
-      height: ${height ? rem(height) : '100%'};
+      height: ${height ? rem(height) : 'auto'};
       overflow: auto;
       overflow-x: hidden;
+      background: ${theme.globals.colors.white};
     `;
 
-export const listLabelHelperText = (theme: Theme): SerializedStyles => css`
-  font-size: ${theme.globals.typography.fontSize.get('1')};
-  font-weight: ${theme.globals.typography.fontWeight.get('regular')};
-  color: ${theme.utils.getColor('lightGrey', 650)};
-  cursor: inherit;
+export const groupedUlStyle = (): SerializedStyles => css`
+   {
+    padding: 0;
+    list-style: none;
+  }
 `;