@sproutsocial/seeds-react-menu 0.2.1 → 0.2.3

package/src/MenuItem/styles.tsx

@@ -23,7 +23,6 @@ export const MenuItemContainer = styled.li`
   list-style-type: none;
   margin-left: ${({ theme }) => theme.space[300]};
   margin-right: ${({ theme }) => theme.space[300]};
-  transition: all ${({ theme }) => theme.duration["fast"]};
 
   &:first-child {
     margin-top: ${({ theme }) => theme.space[300]};
@@ -49,6 +48,7 @@ export const StyledMenuItem = styled.div<{ $highlighted: boolean }>`
   padding: ${({ theme }) => theme.space[300]};
   outline: 0;
   ${({ theme }) => theme.typography[200]};
+  transition: all ${({ theme }) => theme.duration["fast"]};
 
   /* Highlighted */
   ${({ $highlighted }) => $highlighted && highlightedStyles}

package/src/MenuItem/useOptionProps.tsx

@@ -85,7 +85,6 @@ export const useOptionProps = ({
     () =>
       selectedItem?.id === id ||
       !!selectedItems?.find((item) => item?.id === id),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedItem, selectedItems]
   );
 

package/src/MenuRoot/MenuRoot.tsx

@@ -1,11 +1,10 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useRef } from "react";
 import styled from "styled-components";
 import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 
 import { MenuProvider, type TypeMenuProviderProps } from "../MenuContext";
 
 export interface TypeMenuRootOwnProps {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   menuToggleElement: React.ReactElement<any>;
   popoutProps?: Partial<
     Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">
@@ -46,6 +45,7 @@ export const MenuRoot = ({
   return (
     <MenuProvider {...contextProps}>
       <Popout
+        menuPopout
         isOpen={!!isOpen}
         setIsOpen={setIsOpen}
         content={

package/src/MenuRoot/__tests__/MenuRoot.test.tsx

@@ -5,6 +5,7 @@ import {
   screen,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
+import { Box } from "@sproutsocial/seeds-react-box";
 import { Button } from "@sproutsocial/seeds-react-button";
 import {
   MenuRoot,
@@ -17,7 +18,6 @@ import {
   type TypeMenuContextProps,
 } from "../../index";
 
-// eslint-disable-next-line react/display-name
 jest.mock("@sproutsocial/seeds-react-portal", () => ({ children }) => (
   <div>{children}</div>
 ));
@@ -197,7 +197,6 @@ describe("MenuRoot", () => {
     const { user } = render(
       <MenuRoot
         menuToggleElement={<CustomToggleElement />}
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore - mock contextProps may be imperfect
         getToggleButtonProps={() => ({ onClick: mockToggleClick })}
       >

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -82,7 +82,6 @@ export const MultiSelectMenu = ({
     defaultHighlightedIndex: 0,
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
-      // eslint-disable-next-line react-hooks/rules-of-hooks
       newState = useSelectStateReducer(state, actionAndChanges);
       newState = selectReducerForMultiSelect(state, {
         ...actionAndChanges,

package/src/MultiSelectMenu/MultiSelectMenuTypes.ts

@@ -1,8 +1,12 @@
 import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
-import type { TypeDownshiftMultiSelectProps } from "../MenuContext";
+import type {
+  TypeDownshiftSelectProps,
+  TypeDownshiftMultiSelectProps,
+} from "../MenuContext";
 
 export interface TypeMultiSelectMenuProps
   extends TypeMenuRootOwnProps,
+    TypeDownshiftSelectProps,
     TypeDownshiftMultiSelectProps {
   children: TypeMenuRootProps["children"];
 }

package/src/MultiSelectMenu/__tests__/MultiSelectMenu.test.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable testing-library/prefer-find-by */
-/* eslint-disable testing-library/no-wait-for-multiple-assertions */
 /* eslint-disable testing-library/no-unnecessary-act */
 import {
   MultiSelectMenu,
@@ -11,6 +9,7 @@ import {
 import {
   render,
   screen,
+  cleanup,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
 
@@ -22,6 +21,10 @@ const menuItems = [
 ];
 
 describe("MultiSelectMenu", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
   it("should render the MenuItems when provided as children", async () => {
     const { user } = render(
       <MultiSelectMenu

package/src/MultiSelectMenu/index.ts

@@ -1 +1,2 @@
 export * from "./MultiSelectMenu";
+export * from "./MultiSelectMenuTypes";

package/src/SingleSelectMenu/SingleSelectMenu.tsx

@@ -36,7 +36,6 @@ export const SingleSelectMenu = ({
     itemToString,
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
-      // eslint-disable-next-line react-hooks/rules-of-hooks, prefer-const
       newState = useSelectStateReducer(state, actionAndChanges);
       return externalStateReducer
         ? externalStateReducer(state, {

package/src/SingleSelectMenu/SingleSelectMenuTypes.ts

@@ -1,9 +1,8 @@
-import type { UseSelectProps } from "downshift";
 import type { TypeMenuRootProps, TypeMenuRootOwnProps } from "../MenuRoot";
-import type { TypeDefaultItemProps } from "../types";
+import type { TypeDownshiftSelectProps } from "../MenuContext";
 
 export interface TypeSingleSelectMenuProps
   extends TypeMenuRootOwnProps,
-    Partial<UseSelectProps<TypeDefaultItemProps>> {
+    TypeDownshiftSelectProps {
   children: TypeMenuRootProps["children"];
 }

package/src/hooks/useItemsFromChildren.tsx

@@ -1,10 +1,14 @@
 import React, { type ReactNode, useMemo } from "react";
-import type { TypeItemElements } from "../types";
+import type { TypeMenuItemProps } from "../MenuItem";
 import type { TypeMenuContext } from "../MenuContext";
 
 export interface TypeUseItemsFromChildrenProps {
   children: ReactNode;
 }
+export interface TypeItemElements {
+  element: React.ReactElement<TypeMenuItemProps>;
+  parents: readonly React.ReactNode[];
+}
 
 // https://stackoverflow.com/questions/69119016/find-specific-children-components-regardless-of-depth-in-react
 const walkAllChildren = (
@@ -16,7 +20,6 @@ const walkAllChildren = (
     // console.log("element", element);
     callback(element, parents);
     const newParents = [...parents, element];
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const children = (element as any).props?.children;
     React.Children.toArray(children).forEach((child) => {
       walk(child, newParents);
@@ -60,13 +63,12 @@ export const useItemsFromChildren = ({
     const allMenuItemElements = getAllMenuItems(children);
     const menuItemsMap: TypeMenuContext["itemsMap"] = {};
     const allMenuItems: TypeMenuContext["items"] = allMenuItemElements.map(
-      ({ element, parents }, index) => {
+      ({ element }, index) => {
         const item = {
           id: element.props.id,
           disabled: element.props.disabled,
           index,
-          element,
-          parents,
+          menuItemProps: element.props,
         };
         menuItemsMap[`${item.id}`] = item;
         return item;

package/src/index.ts

@@ -17,3 +17,4 @@ export * from "./MultiSelectMenu";
 export * from "./MenuContext";
 export * from "./hooks/useItemsFromChildren";
 export * from "./reducers/useSelectStateReducer";
+export * from "./types";

package/src/reducers/useComboboxStateReducer.tsx

@@ -0,0 +1,26 @@
+import { useCombobox } from "downshift";
+import type { UseComboboxProps } from "downshift";
+import type { TypeDefaultItemProps } from "../types";
+
+export const useComboboxStateReducer: Required<
+  UseComboboxProps<TypeDefaultItemProps>
+>["stateReducer"] = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
+    // case useCombobox.stateChangeTypes.InputBlur:
+    //   return {
+    //     ...changes,
+    //     // keep menu open on blur
+    //     isOpen: true,
+    //   };
+
+    /** Return standard change payload */
+    default:
+      return changes;
+  }
+};
+
+export const defaultUseComboboxProps = {
+  isItemDisabled: (item) => !!item.disabled,
+};

package/src/types.ts

@@ -1,13 +1,10 @@
 import type { TypeMenuItemProps } from "./MenuItem";
 
-export interface TypeItemElements {
-  element: React.ReactElement<TypeMenuItemProps>;
-  parents: readonly React.ReactNode[];
-}
-export interface TypeDefaultItemProps extends Partial<TypeItemElements> {
+export interface TypeDefaultItemProps {
   id: string;
   index: number;
   disabled?: boolean;
+  menuItemProps?: TypeMenuItemProps;
 }
 
 export type TypeNotEmptyChildren =

package/tsconfig.json

@@ -8,5 +8,5 @@
     "verbatimModuleSyntax": true
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "coverage"]
+  "exclude": ["node_modules", "dist"]
 }

package/.eslintignore

@@ -1,6 +0,0 @@
-# Node modules
-node_modules/
-
-# Build output
-dist/
-coverage/

package/src/ComboBox/TokenInput.feature

@@ -1,84 +0,0 @@
-Feature: TokenInput
-
-    A component that allows users to search, select, and manage tokens with autocomplete functionality.
-
-    Rule: User behavior
-
-        Background:
-            Given an end user is using the component
-
-        Scenario: User can add tokens
-            Given the ComboBox accepts new values
-            When text is typed
-            And a delimiter key is pressed
-            Then a new token is created from the input text
-
-        Scenario: User can not add tokens
-            Given the ComboBox does not accept new values
-            When text is typed
-            And a delimiter key is pressed
-            Then no new token is added
-
-        Scenario: User can remove tokens manually
-            Given the ComboBox has tokens
-            When token's remove button is clicked
-            Then the token is removed
-
-        Scenario: User can remove tokens with backspace
-            Given the ComboBox has tokens
-            When backspace is hit
-            Then the token is removed
-
-        Scenario: User can navigate tokens via keyboard
-            Given the ComboBox has tokens
-            And the Combobox Input has focus
-            When the tokens are navigated using arrow keys
-            Then the activeToken callback fires
-
-        Scenario: Component handles token addition
-            When a new token is added
-            Then the onAddToken callback fires
-
-        Scenario: Component handles token removal
-            Given the ComboBox is rendered with tokens
-            When a token is removed
-            Then the onRemoveToken callback fires
-
-        Scenario: Component handles token click
-            When a token is clicked
-            Then the onClickToken callback fires
-
-        Scenario: Component handles input change
-            When the input value changes
-            Then the onChange callback fires
-
-    Rule: API
-        Background:
-            Given an engineer is developing using the component
-
-        Scenario: TokenInput extends Combobox
-            When Combobox features are used in TokenInput
-            Then the TokenInput responds as a Combobox would
-
-        Scenario: ComboBox accepts tokens
-            When a token component is passed to the Combobox
-            And an item is selected
-            Then the token is rendered in the input
-
-        Scenario: ComboBox has a maximum token length
-            When 'tokenMaxLength' is set to <value>
-            Then the token string size is limited to <value>
-
-        Scenario Outline: ComboBox checks its types
-            When <propName> is passed a value
-            Then ComboBox expects it to be of type <propType>
-
-            Examples: Prop Types
-                | activeToken    | string                                                                            |
-                | tokens         | array of { id: string, iconName?: EnumIconNames, value: string, valid?: boolean } |
-                | onChangeTokens | function                                                                          |
-                | onAddToken     | function                                                                          |
-                | onRemoveToken  | function                                                                          |
-                | onClickToken   | function                                                                          |
-                | maxLength      | number                                                                            |
-                | tokenMaxLength | number                                                                            |