@sproutsocial/seeds-react-menu 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -21,6 +21,8 @@
     "@sproutsocial/seeds-react-button": "*",
     "@sproutsocial/seeds-react-checkbox": "*",
     "@sproutsocial/seeds-react-icon": "*",
+    "@sproutsocial/seeds-react-input": "*",
+    "@sproutsocial/seeds-react-label": "*",
     "@sproutsocial/seeds-react-popout": "*",
     "@sproutsocial/seeds-react-radio": "*",
     "@sproutsocial/seeds-react-switch": "*",

package/src/Autocomplete/Autocomplete.feature

@@ -13,17 +13,6 @@ Feature: Autocomplete
             Then a list of matching items is displayed
             And an item can be selected from the list
 
-        Scenario: User can add a new value
-            Given the Autocomplete Input has a value
-            When new values are allowed
-            And the value has no match
-            Then a new value can be created
-
-        Scenario: User gets a warning on error
-            Given the Autocomplete Input has a value
-            When the value is invalid
-            Then a warning message appears
-
         Scenario: User can select an item from the list
             Given the Autocomplete Input has text
             When an item is selected
@@ -35,32 +24,22 @@ Feature: Autocomplete
             When the Autocomplete input is focused
             Then the screen reader announces it as a "combobox"
 
-        Scenario: Component handles input change
-            When the input value changes
-            Then the onChange callback fires
+        Scenario: Component handles selected item change
+            Given that the onSelectedItemChange prop is passed to Autocomplete
+            When an item is selected on the Autocomplete
+            Then the onSelectedItemChange callback is called
 
-        Scenario Outline: Custom open/close behavior
-            Given the Autocomplete is rendered with custom behavior
+        Scenario Outline: Custom input handlers
+            Given the AutocompleteInput is rendered with custom behavior
             When the `<action>` is performed
             Then the `<handler>` is executed
 
             Examples: Custom Behavior
                 | action        | handler  |
-                | item selected | onSelect |
+                | input changed | onChange |
                 | input focused | onFocus  |
                 | input blurred | onBlur   |
 
-        Scenario Outline: Autocomplete suggestions are displayed
-            Given the Autocomplete is rendered with items
-            When <text> is typed into the input
-            Then matching <suggestion> items are displayed
-
-            Examples: Autocomplete Suggestions
-                | text       | suggestion             |
-                | ---------- | ---------------------- |
-                | app        | apple, application     |
-                | ban        | banana, band           |
-
     Rule: API
         Background:
             Given an engineer is developing using the component
@@ -73,24 +52,16 @@ Feature: Autocomplete
             When a selected item is passed to the Autocomplete
             Then the input reflects the selected item
 
-        Scenario: Autocomplete hasWarning
-            When the input's validation has an error
-            Then 'hasWarning' becomes true
+        Scenario: Autocomplete accepts custom filter function
+            When getIsItemVisible prop is passed to the Autocomplete
+            Then filtering of the items uses the custom function
 
         Scenario Outline: Autocomplete checks its types
             When <propName> is passed a value
             Then Autocomplete expects it to be of type <propType>
 
             Examples: Prop Types
-                | propName     | propType         |
-                | delimiters   | array of strings |
-                | value        | string           |
-                | hasFocus     | boolean          |
-                | onChange     | function         |
-                | onPaste      | function         |
-                | autoFocus    | boolean          |
-                | isInvalid    | boolean          |
-                | hasWarning   | boolean          |
-                | required     | boolean          |
-                | inputProps   | any              |
-                | autocomplete | string           |
+                | propName         | propType         |
+                | selectedItem     | object           |
+                | itemToString     | function         |
+                | getIsItemVisible | function         |

package/src/Autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import { MenuContent, MenuItem, MenuLabel, MenuToggleButton } from "../index";
+// eslint-disable-next-line no-restricted-imports
+import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
+
+import { Autocomplete } from "./Autocomplete";
+import { AutocompleteInput } from "./AutocompleteInput";
+
+type CustomAutocompleteArgs = React.ComponentProps<typeof Autocomplete>;
+
+const meta: Meta<CustomAutocompleteArgs> = {
+  title: "Under Development/Autocomplete",
+  component: Autocomplete,
+  parameters: {
+    controls: {
+      expanded: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box display="flex" flexDirection="column" gap="16px" maxWidth={300}>
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<CustomAutocompleteArgs>;
+
+export const AutocompleteTextInputExample: Story = {
+  name: "Text Input",
+  render: (args) => {
+    return (
+      <Autocomplete
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel htmlFor="my-combobox" mb={300}>
+              Choose a book
+            </MenuLabel>
+            <AutocompleteInput />
+          </>
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </Autocomplete>
+    );
+  },
+};
+
+export const AutocompleteTextWithButtonExample: Story = {
+  name: "Text Input w/ Button",
+  render: (args) => {
+    return (
+      <Autocomplete
+        itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+        menuToggleElement={
+          <>
+            <MenuLabel htmlFor="my-combobox" mb={300}>
+              Choose a book
+            </MenuLabel>
+            <Box display="flex" alignItems="center" gap={200}>
+              <AutocompleteInput />
+              <MenuToggleButton>
+                <Icon name="chevron-down" aria-label="Open Menu" />
+              </MenuToggleButton>
+            </Box>
+          </>
+        }
+        {...(args as object)}
+      >
+        <MenuContent>
+          {TEST_BOOKS.map(({ id, title }) => (
+            <MenuItem key={id} id={id}>
+              {title}
+            </MenuItem>
+          ))}
+        </MenuContent>
+      </Autocomplete>
+    );
+  },
+};
+
+// export const AutocompleteControlled: Story = {
+//   name: "Controlled State",
+//   render: ({ inputType, ...args }) => {
+//     const [isOpen, setIsOpen] = React.useState<boolean>(false);
+//     const [selectedItem, setSelectedItem] =
+//       React.useState<TypeDefaultItemProps | null>(null);
+//     return (
+//       <Autocomplete
+//         isOpen={isOpen}
+//         onIsOpenChange={({ isOpen }) => setIsOpen(isOpen)}
+//         selectedItem={selectedItem}
+//         onSelectedItemChange={({ selectedItem: newSelectedItem }) => {
+//           setSelectedItem(newSelectedItem);
+//         }}
+//         itemToString={(item) => (item ? TEST_BOOKS[item.index].title : "")}
+//         menuToggleElement={<AutocompleteInput />}
+//         {...(args as object)}
+//       >
+//         <MenuContent>
+//           <MenuGroup>
+//             {TEST_BOOKS.map(({ id, title }) => (
+//               <MenuItem key={id} id={id} inputType={inputType}>
+//                 {title}
+//               </MenuItem>
+//             ))}
+//           </MenuGroup>
+//         </MenuContent>
+//       </Autocomplete>
+//     );
+//   },
+// };

package/src/Autocomplete/Autocomplete.tsx

@@ -5,7 +5,7 @@ import {
   defaultUseComboboxProps,
   useComboboxStateReducer,
 } from "../reducers/useComboboxStateReducer";
-import { itemToString } from "../utils/itemToString";
+import { itemToString as defaultItemToString } from "../utils/itemToString";
 import { MenuRoot } from "../MenuRoot";
 import type { TypeAutocompleteProps } from "./AutocompleteTypes";
 import type { TypeDefaultItemProps } from "../types";
@@ -21,19 +21,35 @@ import type { TypeDefaultItemProps } from "../types";
 export const Autocomplete = ({
   children,
   stateReducer: externalStateReducer,
+  itemToString = defaultItemToString,
+  getIsItemVisible = (item, inputValue) =>
+    itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()),
   ...useComboboxProps
 }: TypeAutocompleteProps) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
+  /** Get a list of items from the children */
+  const { allMenuItems } = useItemsFromChildren({ children });
+  const [items, setItems] = React.useState(allMenuItems);
 
+  /**
+   * Destructure Downshift props and call the core useCombobox with items and state handler
+   */
   const { isOpen, ...useComboboxReturnProps } = useCombobox({
     ...defaultUseComboboxProps,
-    // onInputValueChange({ inputValue }) {
-    //   setItems(books.filter(getBooksFilter(inputValue)));
-    // },
-    items: allMenuItems,
+    items,
     itemToString,
-    selectedItem: null,
-    defaultHighlightedIndex: 0,
+    onInputValueChange({ inputValue }) {
+      setItems(
+        inputValue
+          ? allMenuItems.reduce(
+              (items, item) => [
+                ...items,
+                { ...item, hidden: !getIsItemVisible(item, inputValue) },
+              ],
+              [] as TypeDefaultItemProps[]
+            )
+          : allMenuItems
+      );
+    },
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseComboboxState<TypeDefaultItemProps>>;
       newState = useComboboxStateReducer(state, actionAndChanges);
@@ -44,20 +60,22 @@ export const Autocomplete = ({
           })
         : newState;
     },
-    ...useCombobox,
+    ...useComboboxProps,
   });
 
   return (
     <MenuRoot
       {...{
         isListbox: true,
-        items: allMenuItems,
-        itemsMap: menuItemsMap,
+        items,
         itemToString,
         isOpen,
         ...useComboboxProps,
         ...useComboboxReturnProps,
       }}
+      popoutProps={{
+        focusOnContent: false,
+      }}
     >
       {children}
     </MenuRoot>

package/src/Autocomplete/AutocompleteInput.tsx

@@ -0,0 +1,51 @@
+import { useContext } from "react";
+import type {
+  UseComboboxGetInputPropsOptions,
+  GetInputPropsReturnValue,
+} from "downshift";
+import { Input, type TypeInputProps } from "@sproutsocial/seeds-react-input";
+import { MenuContext } from "../MenuContext";
+
+type TypeInputEventListeners =
+  | "onKeyDown"
+  | "onChange"
+  | "onInput"
+  | "onBlur"
+  | "onClick"
+  | "refKey";
+export interface TypeAutocompleteInputProps
+  extends Pick<UseComboboxGetInputPropsOptions, TypeInputEventListeners>,
+    Omit<Partial<TypeInputProps>, TypeInputEventListeners> {}
+
+export const AutocompleteInput = ({
+  onKeyDown,
+  onChange,
+  onInput,
+  onBlur,
+  onClick,
+  inputProps,
+  ...rest
+}: TypeAutocompleteInputProps) => {
+  const { getInputProps, inputValue } = useContext(MenuContext);
+  return (
+    <Input
+      id="autocomplete_input"
+      name="autocomplete_input"
+      inputProps={{
+        ...getInputProps?.({
+          // refKey: "innerRef",
+          onKeyDown,
+          onChange,
+          onInput,
+          onBlur,
+          onClick,
+          value: inputValue,
+        }),
+        ...inputProps,
+      }}
+      autoComplete={false}
+      value={inputValue}
+      {...rest}
+    />
+  );
+};

package/src/Autocomplete/AutocompleteTypes.ts

@@ -1,8 +1,15 @@
 import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
-import type { TypeDownshiftComboboxProps } from "../MenuContext";
+import type {
+  TypeDownshiftComboboxProps,
+  TypeMenuContext,
+} from "../MenuContext";
 
 export interface TypeAutocompleteProps
   extends TypeMenuRootOwnProps,
     TypeDownshiftComboboxProps {
   children: TypeMenuRootProps["children"];
+  getIsItemVisible?: (
+    item: TypeMenuContext["items"][number],
+    inputValue: string
+  ) => boolean;
 }

package/src/Autocomplete/__tests__/Autocomplete.test.tsx

@@ -1,113 +1,166 @@
-// import React from "react";
-// import {
-//   render,
-//   screen,
-//   fireEvent,
-//   waitFor,
-// } from "@sproutsocial/seeds-react-testing-library";
-// import { Autocomplete } from "../Autocomplete";
+import React from "react";
+import {
+  render,
+  screen,
+  waitFor,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import { MenuContent, MenuItem } from "../../index";
+import { Autocomplete } from "../Autocomplete";
+import { AutocompleteInput } from "../AutocompleteInput";
+import type { TypeAutocompleteProps } from "../AutocompleteTypes";
 
-xdescribe("Autocomplete Component", () => {
-  it("should render the Autocomplete component", () => {
-    // render(<Autocomplete />);
-    // const autocompleteElement = screen.getByRole("combobox");
-    // expect(autocompleteElement).toBeInTheDocument();
-  });
+const menuItems = [
+  { id: "item-0", index: 0, label: "Item 0" },
+  { id: "item-1", index: 1, label: "Item 1" },
+  { id: "item-2", index: 2, label: "Item 2" },
+  { id: "item-3", index: 3, label: "Item 3" },
+];
 
-  it("should display suggestions when typing", async () => {
-    // render(<Autocomplete />);
-    // const inputElement = screen.getByRole("combobox");
-    // fireEvent.change(inputElement, { target: { value: "test" } });
-    // await waitFor(() => {
-    //   const suggestions = screen.getAllByRole("option");
-    //   expect(suggestions.length).toBeGreaterThan(0);
-    // });
-  });
+const itemToString = (item) => (item ? menuItems[item.index].label : "");
+const defaultAutocompleteProps: TypeAutocompleteProps = {
+  menuToggleElement: <AutocompleteInput />,
+  itemToString,
+  children: (
+    <MenuContent>
+      {menuItems.map(({ id, label }) => (
+        <MenuItem key={id} id={id}>
+          {label}
+        </MenuItem>
+      ))}
+    </MenuContent>
+  ),
+};
 
-  it("should select a suggestion when clicked", async () => {
-    // render(<Autocomplete />);
-    // const inputElement = screen.getByRole("combobox");
-    // fireEvent.change(inputElement, { target: { value: "test" } });
-    // await waitFor(() => {
-    //   const suggestion = screen.getByText("test suggestion");
-    //   fireEvent.click(suggestion);
-    //   expect(inputElement.value).toBe("test suggestion");
-    // });
+describe("Autocomplete Component", () => {
+  it("should render the Autocomplete component with input as a combobox", () => {
+    render(<Autocomplete {...defaultAutocompleteProps}>TEST</Autocomplete>);
+    const autocompleteElement = screen.getByRole("combobox");
+    expect(autocompleteElement).toBeInTheDocument();
   });
 
-  it("should allow adding a new value when no match is found", async () => {
-    // render(<Autocomplete allowNewValues />);
-    // const inputElement = screen.getByRole("combobox");
-    // fireEvent.change(inputElement, { target: { value: "new value" } });
-    // await waitFor(() => {
-    //   const newValueOption = screen.getByText('Add "new value"');
-    //   fireEvent.click(newValueOption);
-    //   expect(inputElement.value).toBe("new value");
-    // });
+  it("should display suggestions when typing", async () => {
+    const { user } = render(<Autocomplete {...defaultAutocompleteProps} />);
+    const inputElement = screen.getByRole("combobox");
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "item");
+    });
+    await waitFor(() => {
+      const suggestions = screen.getAllByRole("option");
+      expect(suggestions.length).toBeGreaterThan(0);
+    });
   });
 
-  it("should display a warning message when the value is invalid", async () => {
-    // render(<Autocomplete />);
-    // const inputElement = screen.getByRole("combobox");
-    // fireEvent.change(inputElement, { target: { value: "invalid value" } });
-    // await waitFor(() => {
-    //   const warningMessage = screen.getByText("Invalid value");
-    //   expect(warningMessage).toBeInTheDocument();
-    // });
+  it("should select a suggestion when clicked", async () => {
+    const { user } = render(<Autocomplete {...defaultAutocompleteProps} />);
+    const inputElement = screen.getByRole("combobox") as HTMLInputElement;
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "item");
+    });
+    const suggestion = screen.getByRole("option", { name: menuItems[0].label });
+    await act(() => user.click(suggestion));
+    await waitFor(() => expect(inputElement.value).toBe(menuItems[0].label));
   });
 
   it("should mark an item as selected and reflect it in the input", async () => {
-    // render(<Autocomplete />);
-    // const inputElement = screen.getByRole("combobox");
-    // fireEvent.change(inputElement, { target: { value: "test" } });
-    // await waitFor(() => {
-    //   const suggestion = screen.getByText("test suggestion");
-    //   fireEvent.click(suggestion);
-    //   expect(inputElement.value).toBe("test suggestion");
-    //   expect(suggestion).toHaveAttribute("aria-selected", "true");
-    // });
-  });
-
-  it('should announce the input as a "combobox" for screen readers', () => {
-    // render(<Autocomplete />);
-    // const inputElement = screen.getByRole("combobox");
-    // expect(inputElement).toHaveAttribute("aria-haspopup", "listbox");
+    const { user } = render(<Autocomplete {...defaultAutocompleteProps} />);
+    const inputElement = screen.getByRole("combobox") as HTMLInputElement;
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "item");
+    });
+    const suggestion = screen.getByRole("option", { name: menuItems[0].label });
+    await act(() => user.click(suggestion));
+    await waitFor(() => expect(inputElement.value).toBe(menuItems[0].label));
+    expect(suggestion).toHaveAttribute("aria-selected", "true");
   });
 
-  it("should fire the onChange callback when the input value changes", () => {
-    // const handleChange = jest.fn();
-    // render(<Autocomplete onChange={handleChange} />);
-    // const inputElement = screen.getByRole("combobox");
-    // fireEvent.change(inputElement, { target: { value: "test" } });
-    // expect(handleChange).toHaveBeenCalledWith("test");
+  it("should call onSelectedItemChange when an item is selected", async () => {
+    const handleChange = jest.fn();
+    const { user } = render(
+      <Autocomplete
+        {...defaultAutocompleteProps}
+        onSelectedItemChange={handleChange}
+      />
+    );
+    const inputElement = screen.getByRole("combobox") as HTMLInputElement;
+    await act(() => user.click(inputElement));
+    const suggestion = screen.getByRole("option", { name: menuItems[0].label });
+    await act(() => user.click(suggestion));
+    await waitFor(() => expect(handleChange).toHaveBeenCalled());
   });
 
   it.each`
     action             | handler
-    ${"item selected"} | ${"onSelect"}
+    ${"input changed"} | ${"onChange"}
     ${"input focused"} | ${"onFocus"}
     ${"input blurred"} | ${"onBlur"}
   `(
     "should execute $handler when $action is performed",
     async ({ action, handler }) => {
-      // const handlerMock = jest.fn();
-      // const props = { [handler]: handlerMock };
-      // render(<Autocomplete {...props} />);
-      // const inputElement = screen.getByRole("combobox");
-      // if (action === "item selected") {
-      //   fireEvent.change(inputElement, { target: { value: "test" } });
-      //   await waitFor(() => {
-      //     const suggestion = screen.getByText("test suggestion");
-      //     fireEvent.click(suggestion);
-      //     expect(handlerMock).toHaveBeenCalled();
-      //   });
-      // } else if (action === "input focused") {
-      //   fireEvent.focus(inputElement);
-      //   expect(handlerMock).toHaveBeenCalled();
-      // } else if (action === "input blurred") {
-      //   fireEvent.blur(inputElement);
-      //   expect(handlerMock).toHaveBeenCalled();
-      // }
+      const handlerMock = jest.fn();
+      const props = { [handler]: handlerMock };
+      const { user } = render(
+        <Autocomplete
+          {...defaultAutocompleteProps}
+          menuToggleElement={<AutocompleteInput {...props} />}
+        />
+      );
+      const inputElement = screen.getByRole("combobox");
+      await act(() => user.click(inputElement));
+
+      // Use switch case for each action
+      switch (action) {
+        case "input changed":
+          await act(async () => {
+            await user.type(inputElement, "item");
+          });
+          break;
+        case "input focused":
+          // Clicking on the input adds focus to it
+          break;
+        case "input blurred":
+          await act(async () => {
+            await user.keyboard("{tab}");
+          });
+          break;
+        default:
+          break;
+      }
+
+      await waitFor(() => expect(handlerMock).toHaveBeenCalled());
     }
   );
+
+  it("should reflect the selected item in the input when a selected item is passed", () => {
+    const testItem = menuItems[0];
+    render(
+      <Autocomplete {...defaultAutocompleteProps} selectedItem={testItem} />
+    );
+    const inputElement = screen.getByRole("combobox") as HTMLInputElement;
+    expect(inputElement.value).toBe(testItem.label);
+  });
+
+  it("should use the custom filter function when getIsItemVisible is passed", async () => {
+    const customFilter: TypeAutocompleteProps["getIsItemVisible"] = jest.fn(
+      (item, inputValue) => itemToString(item).includes(inputValue)
+    );
+    const { user } = render(
+      <Autocomplete
+        {...defaultAutocompleteProps}
+        getIsItemVisible={customFilter}
+      />
+    );
+    const inputElement = screen.getByRole("combobox");
+    await act(async () => {
+      await user.click(inputElement);
+      await user.type(inputElement, "0");
+    });
+
+    await waitFor(() => expect(screen.getAllByRole("option").length).toBe(1));
+
+    expect(customFilter).toHaveBeenCalled();
+  });
 });