refactor(dropdownmenu): refactor DropdownMenu to use SDS Autocomplete (…

…#605) * refactor(dropdownmenu): refactor DropdownMenu to use SDS Autocomplete * fix(dropdownmenu): fix imports * fix(dropdown): fix dropdown useEffect dependencies * fix(autocomplete): fix paper and popper component to stop scroll jump * docs(autocomplete): adding comments for context
chanzuckerberg · Sep 21, 2023 · e9d4df0 · e9d4df0
1 parent 87e1803
commit e9d4df0
Show file tree

Hide file tree

Showing 8 changed files with 145 additions and 396 deletions.
diff --git a/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__snapshots__/index.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`<Autocomplete /> Default story renders snapshot 1`] = `
   style="margin: 16px 0px 0px 24px; width: 300px;"
 >
   <div
-    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-41tour-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-t46og2-MuiAutocomplete-root"
     label="Search by label"
   >
     <div

diff --git a/packages/components/src/core/Autocomplete/index.stories.tsx b/packages/components/src/core/Autocomplete/index.stories.tsx
@@ -146,9 +146,6 @@ export default {
     multiple: {
       control: { type: "boolean" },
     },
-    search: {
-      control: { type: "boolean" },
-    },
   },
   component: Autocomplete,
   // (masoudmanson) For the purpose of storybook, the button is removed
@@ -182,6 +179,11 @@ export const Default = {
     multiple: true,
     search: true,
   },
+  parameters: {
+    controls: {
+      exclude: ["search"],
+    },
+  },
 };
 
 // Test
@@ -231,6 +233,9 @@ export const Test = {
     search: true,
   },
   parameters: {
+    controls: {
+      exclude: ["search"],
+    },
     snapshot: {
       skip: true,
     },

diff --git a/packages/components/src/core/Autocomplete/index.tsx b/packages/components/src/core/Autocomplete/index.tsx
@@ -5,8 +5,10 @@ import {
   AutocompleteRenderOptionState,
   InputAdornment,
   AutocompleteProps as MuiAutocompleteProps,
+  Popper,
+  PopperProps,
 } from "@mui/material";
-import React, { ReactNode, SyntheticEvent, useState } from "react";
+import React, { ReactNode, SyntheticEvent, useCallback, useState } from "react";
 import { noop } from "src/common/utils";
 import ButtonIcon from "../ButtonIcon";
 import { IconProps } from "../Icon";
@@ -106,6 +108,27 @@ const Autocomplete = <
 
   const [inputValue, setInputValue] = useState("");
 
+  /**
+   * (masoudmanson): Using a custom Popper or Paper with the Autocomplete
+   * without a useCalback results in scroll jumps while selecting an option!
+   */
+  const defaultPopperComponent = useCallback((popperProps: PopperProps) => {
+    return (
+      <Popper
+        modifiers={[
+          {
+            enabled: true,
+            name: "offset",
+            options: {
+              offset: [0, 8],
+            },
+          },
+        ]}
+        {...popperProps}
+      />
+    );
+  }, []);
+
   return (
     <StyledAutocomplete
       clearOnBlur={false}
@@ -116,6 +139,7 @@ const Autocomplete = <
       loadingText={loadingText}
       noOptionsText={noOptionsText}
       PaperComponent={PaperComponent}
+      PopperComponent={defaultPopperComponent}
       renderOption={renderOption}
       getOptionLabel={getOptionLabel}
       isOptionEqualToValue={isOptionEqualToValue}

diff --git a/packages/components/src/core/Autocomplete/style.ts b/packages/components/src/core/Autocomplete/style.ts
@@ -15,7 +15,6 @@ import {
 
 export interface StyleProps extends CommonThemeProps {
   count?: number;
-  hasSections?: boolean;
   icon?: ReactElement;
   search?: boolean;
 }
@@ -25,7 +24,6 @@ const doNotForwardProps = [
   "keepSearchOnSelect",
   "search",
   "InputBaseProps",
-  "hasSections",
 ];
 
 export const StyledAutocomplete = styled(Autocomplete, {
@@ -38,7 +36,7 @@ export const StyledAutocomplete = styled(Autocomplete, {
   }
 
   ${(props: StyleProps) => {
-    const { search, hasSections } = props;
+    const { search } = props;
     const spacings = getSpaces(props);
     const colors = getColors(props);
     const borders = getBorders(props);
@@ -55,60 +53,56 @@ export const StyledAutocomplete = styled(Autocomplete, {
       }
 
       & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {
-
-      ${
-        search || hasSections
-          ? `padding-left: ${spacings?.s}px !important;`
-          : ""
-      }
-
-      .MuiAutocomplete-listbox {
-        max-height: 40vh;
-        padding-top: 0;
-        padding-bottom: 0;
-        padding-right: ${spacings?.s}px;
-
-        .MuiAutocomplete-option {
-          min-height: unset;
-        }
-
-        .MuiAutocomplete-option.Mui-focused {
-          background-color: ${colors?.gray[100]};
-        }
-
-        .MuiAutocomplete-option[aria-selected="true"] {
-          background-color: white;
+        ${search ? `padding-left: ${spacings?.s}px !important;` : ""}
+
+        .MuiAutocomplete-listbox {
+          max-height: 40vh;
+          padding-top: 0;
+          padding-bottom: 0;
+          padding-right: ${spacings?.s}px;
+
+          .MuiAutocomplete-option {
+            min-height: unset;
+          }
+
+          .MuiAutocomplete-option.Mui-focused {
+            background-color: ${colors?.gray[100]};
+          }
+
+          .MuiAutocomplete-option[aria-selected="true"] {
+            background-color: white;
+          }
+
+          .MuiAutocomplete-option[aria-disabled="true"] {
+            opacity: 1;
+          }
+
+          .MuiAutocomplete-option[aria-selected="true"].Mui-focused {
+            background-color: ${colors?.gray[100]};
+          }
+
+          & > li:last-child .MuiAutocomplete-groupUl {
+            border-bottom: none;
+            margin-bottom: 0;
+          }
         }
 
-        .MuiAutocomplete-option[aria-disabled="true"] {
-          opacity: 1;
+        .MuiAutocomplete-groupLabel {
+          top: 0;
+          color: ${colors?.gray[500]};
+          padding: ${spacings?.xxs}px 0 ${spacings?.xxs}px 0;
         }
 
-        .MuiAutocomplete-option[aria-selected="true"].Mui-focused {
-          background-color: ${colors?.gray[100]};
-        }
-
-        & > li:last-child .MuiAutocomplete-groupUl {
-          border-bottom: none;
-          margin-bottom: 0;
-        }
-      }
-
-      .MuiAutocomplete-groupLabel {
-        top: 0;
-        color: ${colors?.gray[500]};
-        padding: ${spacings?.xxs}px 0 ${spacings?.xxs}px 0;
-      }
-
-      .MuiAutocomplete-groupUl {
-        margin-bottom: ${spacings?.m}px;
-        position: relative;
-        padding: 0 0 ${spacings?.xs}px 0 0;
-        border-bottom: ${borders?.gray[200]};
-
-        & li:last-of-type {
+        .MuiAutocomplete-groupUl {
+          margin-bottom: ${spacings?.m}px;
           position: relative;
-          margin-bottom: ${spacings?.xxs}px;
+          padding: 0 0 ${spacings?.xs}px 0 0;
+          border-bottom: ${borders?.gray[200]};
+
+          & li:last-of-type {
+            position: relative;
+            margin-bottom: ${spacings?.xxs}px;
+          }
         }
       }
     `;

diff --git a/packages/components/src/core/Dropdown/index.tsx b/packages/components/src/core/Dropdown/index.tsx
@@ -111,13 +111,13 @@ const Dropdown = <Multiple extends boolean | undefined = false>({
 
   useEffect(() => {
     onChange(value);
-  }, [value]);
+  }, [onChange, value]);
 
   useEffect(() => {
     if (isControlled) {
       setValue(propValue);
     }
-  }, [propValue]);
+  }, [isControlled, propValue]);
 
   const [open, setOpen] = useState(false);
 

diff --git a/packages/components/src/core/DropdownMenu/index.stories.tsx b/packages/components/src/core/DropdownMenu/index.stories.tsx
@@ -284,7 +284,6 @@ const LivePreviewDemo = (): JSX.Element => {
             }}
             search={false}
             multiple={false}
-            hasSections={false}
             value={value1}
             onClickAway={handleClickAway1}
           />
@@ -369,7 +368,6 @@ const LivePreviewDemo = (): JSX.Element => {
             open={!!open4}
             search={false}
             multiple
-            hasSections
             groupBy={(option) => option.section as string}
             onChange={handleChange4}
             disableCloseOnSelect
@@ -638,7 +636,6 @@ const ScreenshotTestDemo = (props: Args): JSX.Element => {
                 </p>
                 <DropdownMenu
                   {...props}
-                  hasSections
                   groupBy={
                     groupBy &&
                     ((option: (typeof SCREENSHOT_TEST_OPTIONS)[number]) =>