feat(autocomplete): add multi-column feature to Autocomplete

packages/components/src/core/Autocomplete/GITHUB_LABELS.tsx

@@ -0,0 +1,82 @@
+// (masoudmanson): The unit tests rely on the content in this file; do not alter it!
+
+import { DefaultAutocompleteOption } from ".";
+
+const COLUMN_ONE = "Column One";
+const COLUMN_TWO = "Column Two";
+const COLUMN_THREE = "Column Three";
+
+export const GITHUB_LABELS: DefaultAutocompleteOption[] = [
+  {
+    name: "Status: can't reproduce",
+    section: COLUMN_ONE,
+  },
+  {
+    name: "Status: confirmed",
+    section: COLUMN_ONE,
+  },
+  {
+    count: 3,
+    name: "Status: duplicate",
+    section: COLUMN_ONE,
+  },
+  {
+    count: 5,
+    name: "Status: needs information",
+    section: COLUMN_ONE,
+  },
+  {
+    details: "This will not be worked on",
+    name: "Status: wont do/fix",
+    section: COLUMN_ONE,
+  },
+  {
+    details: "This is still in progress",
+    name: "Status: work in progress",
+    section: COLUMN_ONE,
+  },
+  {
+    details: "This needs to be fixed!",
+    name: "Type: bug",
+    section: COLUMN_TWO,
+  },
+  {
+    count: 4,
+    name: "Type: discussion",
+    section: COLUMN_TWO,
+  },
+  {
+    name: "Type: documentation",
+    section: COLUMN_TWO,
+  },
+  {
+    name: "Type: enhancement",
+    section: COLUMN_TWO,
+  },
+  {
+    name: "Type: epic",
+    section: COLUMN_TWO,
+  },
+  {
+    count: 23,
+    details: "This one is disabled.",
+    name: "Type: feature request",
+    section: COLUMN_TWO,
+  },
+  {
+    name: "Type: question",
+    section: COLUMN_TWO,
+  },
+  {
+    name: "Epic: Documentation",
+    section: COLUMN_THREE,
+  },
+  {
+    name: "Epic: Dropdown Menu",
+    section: COLUMN_THREE,
+  },
+  {
+    name: "Epic: Migration to v5",
+    section: COLUMN_THREE,
+  },
+];

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-t46og2-MuiAutocomplete-root"
+    class="MuiAutocomplete-root MuiAutocomplete-hasPopupIcon css-13hf380-MuiAutocomplete-root"
     label="Search by label"
   >
     <div

packages/components/src/core/Autocomplete/index.stories.tsx

@@ -1,8 +1,8 @@
 import { Args, Meta } from "@storybook/react";
 import React, { SyntheticEvent, useEffect, useState } from "react";
 import { Value } from "../Dropdown";
-import { GITHUB_LABELS } from "../DropdownMenu/GITHUB_LABELS";
 import TagFilter from "../TagFilter";
+import { GITHUB_LABELS } from "./GITHUB_LABELS";
 import RawAutocomplete, { DefaultAutocompleteOption } from "./index";
 
 export type AutocompleteOptionValue<T, Multiple> = Multiple extends
@@ -129,6 +129,11 @@ const Autocomplete = <Multiple extends boolean | undefined = false>(
 
 export default {
   argTypes: {
+    columnWidth: {
+      control: {
+        type: "number",
+      },
+    },
     groupBy: {
       control: {
         labels: ["No group by", "Group by section names"],
@@ -137,6 +142,9 @@ export default {
       mapping: groupByOptions,
       options: Object.keys(groupByOptions),
     },
+    isMultiColumn: {
+      control: { type: "boolean" },
+    },
     keepSearchOnSelect: {
       control: { type: "boolean" },
     },

packages/components/src/core/Autocomplete/index.tsx

@@ -18,6 +18,7 @@ import {
   InputBaseWrapper,
   StyleProps,
   StyledAutocomplete,
+  StyledListBox,
   StyledMenuInputSearch,
   StyledMenuItemDetails,
   StyledMenuItemText,
@@ -60,6 +61,8 @@ interface ExtraAutocompleteProps extends StyleProps {
   InputBaseProps?: Partial<InputSearchProps>;
   label: string;
   PaperComponent?: typeof StyledPaper | RenderFunctionType;
+  isMultiColumn?: boolean;
+  columnWidth?: number;
 }
 
 type CustomAutocompleteProps<
@@ -104,27 +107,57 @@ const Autocomplete = <
     renderOption = defaultRenderOption,
     renderTags = defaultRenderTags,
     search = false,
+    isMultiColumn = false,
   } = props;
 
   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) => {
+  // (masoudmanson): Utilizing useMemo hook to encapsulate the custom listbox component,
+  // mitigates the "Jump to Start" scroll glitch and enhances performance.
+  const MultiColumnListbox = React.useMemo(
+    () =>
+      React.forwardRef<
+        HTMLUListElement,
+        React.HTMLAttributes<HTMLUListElement>
+      >((listboxProps, ref) => <StyledListBox ref={ref} {...listboxProps} />),
+    []
+  );
+
+  // (masoudmanson): As we required a wider popper for multi-column dropdowns,
+  // we enforced an 'auto' width in the style file to the popper component. unfortunately
+  // the default popperOffset can not calculate the popper position with a auto width.
+  // To achieve the desired placement, we employ popper modifiers to compute the new
+  // popper position on the page, relying on the reference element's coordinates.
+
+  const DefaultPopperComponent = useCallback((popperProps: PopperProps) => {
     return (
       <Popper
+        {...popperProps}
         modifiers={[
           {
-            enabled: true,
-            name: "offset",
+            enabled: false,
+            name: "flip",
             options: {
-              offset: [0, 8],
+              altBoundary: true,
+              rootBoundary: "document",
             },
           },
+          {
+            enabled: true,
+            fn: (params) => {
+              const offsetLeft = params.state.rects.reference.x;
+              const offsetTop =
+                params.state.rects.reference.y +
+                params.state.rects.reference.height +
+                8;
+
+              params.state.elements.popper.style.transform = `translate3d(${offsetLeft}px, ${offsetTop}px, 0)`;
+            },
+            name: "resize",
+            phase: "afterWrite",
+          },
         ]}
-        {...popperProps}
+        placement="bottom-start"
       />
     );
   }, []);
@@ -139,7 +172,8 @@ const Autocomplete = <
       loadingText={loadingText}
       noOptionsText={noOptionsText}
       PaperComponent={PaperComponent}
-      PopperComponent={defaultPopperComponent}
+      PopperComponent={DefaultPopperComponent}
+      ListboxComponent={isMultiColumn ? MultiColumnListbox : undefined}
       renderOption={renderOption}
       getOptionLabel={getOptionLabel}
       isOptionEqualToValue={isOptionEqualToValue}

packages/components/src/core/Autocomplete/style.ts

@@ -17,10 +17,14 @@ export interface StyleProps extends CommonThemeProps {
   count?: number;
   icon?: ReactElement;
   search?: boolean;
+  isMultiColumn?: boolean;
+  columnWidth?: number;
 }
 
 const doNotForwardProps = [
+  "columnWidth",
   "count",
+  "isMultiColumn",
   "keepSearchOnSelect",
   "search",
   "InputBaseProps",
@@ -36,7 +40,7 @@ export const StyledAutocomplete = styled(Autocomplete, {
   }
 
   ${(props: StyleProps) => {
-    const { search } = props;
+    const { search, isMultiColumn } = props;
     const spacings = getSpaces(props);
     const colors = getColors(props);
     const borders = getBorders(props);
@@ -52,6 +56,10 @@ export const StyledAutocomplete = styled(Autocomplete, {
         }
       }
 
+      & + .MuiAutocomplete-popper {
+        ${isMultiColumn ? `width: auto !important;` : ""}
+      }
+
       & + .MuiAutocomplete-popper > .MuiAutocomplete-paper {
         ${search ? `padding-left: ${spacings?.s}px !important;` : ""}
 
@@ -61,54 +69,83 @@ export const StyledAutocomplete = styled(Autocomplete, {
           padding-bottom: 0;
           padding-right: ${spacings?.s}px;
 
-          .MuiAutocomplete-option {
-            min-height: unset;
-          }
+        ${isMultiColumn ? isMultiColumnStyles(props) : null}
 
-          .MuiAutocomplete-option.Mui-focused {
-            background-color: ${colors?.gray[100]};
-          }
+        .MuiAutocomplete-option {
+          min-height: unset;
+        }
 
-          .MuiAutocomplete-option[aria-selected="true"] {
-            background-color: white;
-          }
+        .MuiAutocomplete-groupLabel {
+          top: 0;
+          color: ${colors?.gray[500]};
+          padding: ${spacings?.xxs}px 0 ${spacings?.xxs}px 0;
+        }
 
-          .MuiAutocomplete-option[aria-disabled="true"] {
-            opacity: 1;
-          }
+        .MuiAutocomplete-option[aria-selected="true"] {
+          background-color: white;
+        }
 
-          .MuiAutocomplete-option[aria-selected="true"].Mui-focused {
-            background-color: ${colors?.gray[100]};
+        .MuiAutocomplete-option[aria-disabled="true"] {
+          opacity: 1;
+          .menuItem-details {
+            color: ${colors?.gray[300]};
           }
+        }
 
-          & > li:last-child .MuiAutocomplete-groupUl {
-            border-bottom: none;
-            margin-bottom: 0;
-          }
+        .MuiAutocomplete-option[aria-selected="true"].Mui-focused {
+          background-color: ${colors?.gray[100]};
         }
 
-        .MuiAutocomplete-groupLabel {
-          top: 0;
-          color: ${colors?.gray[500]};
-          padding: ${spacings?.xxs}px 0 ${spacings?.xxs}px 0;
+        & > 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;
+      .MuiAutocomplete-groupUl {
+        margin-bottom: ${spacings?.m}px;
+        position: relative;
+        padding: 0 0 ${spacings?.xs}px 0 0;
+        border-bottom: ${isMultiColumn ? "none" : borders?.gray[200]};
+
+        & li:last-of-type {
           position: relative;
           padding: 0 0 ${spacings?.xs}px 0 0;
-          border-bottom: ${borders?.gray[200]};
-
-          & li:last-of-type {
-            position: relative;
-            margin-bottom: ${spacings?.xxs}px;
-          }
         }
       }
     `;
   }}
 ` as typeof Autocomplete;
 
+const isMultiColumnStyles = (props: StyleProps): string => {
+  const { columnWidth = 200 } = props;
+  const spacings = getSpaces(props);
+  const borders = getBorders(props);
+
+  return `
+    & > li {
+      overflow: scroll;
+      width: ${columnWidth >= 200 ? columnWidth : 200}px;
+
+      border-right: ${borders?.gray[200]};
+      margin-right: ${spacings?.s}px;
+      padding-right: ${spacings?.s}px;
+
+      &:last-child {
+        border-right: none;
+        margin-right: 0;
+        padding-right: 0;
+      }
+    }
+  `;
+};
+
 export const InputBaseWrapper = styled("div", {
   shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
 })`
@@ -179,3 +216,7 @@ export const StyledMenuItemText = styled("div")`
   display: flex;
   flex-direction: column;
 `;
+
+export const StyledListBox = styled("ul")`
+  display: flex;
+`;