@sproutsocial/seeds-react-menu 0.2.1 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -14,9 +14,7 @@
     "clean:modules": "rm -rf node_modules",
     "typecheck": "tsc --noEmit",
     "test": "jest",
-    "test:watch": "jest --watch --coverage=false",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix"
+    "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
     "@sproutsocial/seeds-react-box": "*",
@@ -32,7 +30,7 @@
     "motion": "^11.11.17"
   },
   "devDependencies": {
-    "eslint-config-seeds": "*",
+    "@sproutsocial/eslint-config-seeds": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",
     "@types/react": "^18.0.0",

package/src/ActionMenu/ActionMenu.tsx

@@ -49,7 +49,7 @@ const handleStateChange = (
   if (!selectedItem) return;
 
   // if selectedItem is disabled, do nothing
-  if (selectedItem.element?.props?.disabled) {
+  if (selectedItem.disabled) {
     return;
   }
 
@@ -58,7 +58,7 @@ const handleStateChange = (
     changes.type === useSelect.stateChangeTypes.ToggleButtonKeyDownEnter;
 
   // selectedItem props
-  const selectedItemProps = selectedItem.element?.props;
+  const selectedItemProps = selectedItem.menuItemProps;
 
   if (selectedItemProps?.onClick) {
     // Create a synthetic event to pass into the onClick
@@ -111,7 +111,6 @@ export const ActionMenu = ({
     onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
     stateReducer: (state, actionAndChanges) => {
       let newState: Partial<UseSelectState<TypeDefaultItemProps>>;
-      // eslint-disable-next-line prefer-const, react-hooks/rules-of-hooks
       newState = useSelectStateReducer(state, actionAndChanges);
       return externalStateReducer
         ? externalStateReducer(state, {

package/src/MenuContent/MenuContentTypes.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { type HTMLMotionProps } from "motion/react";
-import type { ReactNode } from "react";
+import type { ReactNode, RefObject } from "react";
 
 export interface TypeMenuContentProps extends HTMLMotionProps<"ul"> {
   children: ReactNode;

package/src/MenuContext.tsx

@@ -1,4 +1,9 @@
-import React, { createContext, useMemo, useContext } from "react";
+import React, {
+  createContext,
+  useMemo,
+  useContext,
+  type RefObject,
+} from "react";
 import type {
   UseSelectReturnValue,
   UseSelectProps,

package/src/MenuGroup/MenuGroupTypes.ts

@@ -25,6 +25,5 @@ export interface TypeMenuGroupProps
     Omit<React.ComponentPropsWithoutRef<"ul">, "color"> {
   title?: string;
   children: ReactNode;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   titleAs?: string | React.ComponentType<any>;
 }

package/src/MenuGroup/__tests__/MenuGroup.test.tsx

@@ -44,7 +44,6 @@ describe("MenuGroup", () => {
       const menuGroup = screen.getByRole("group", { name: menuTitle });
       expect(menuGroup).toBeInTheDocument();
       expect(
-        // eslint-disable-next-line testing-library/prefer-presence-queries
         screen.queryByRole("heading", { name: menuTitle })
       ).toBeInTheDocument();
     });

package/src/MenuHeader/__tests__/MenuHeader.typetest.tsx

@@ -6,7 +6,6 @@ export const MenuHeaderTypeTest = () => (
       title="Menu Header"
       leftAction={<div>left action</div>}
       rightAction={<div>right action</div>}
-      // eslint-disable-next-line react/no-children-prop
       children={<div>children</div>}
     />
     {/* left and right action accept strings */}

package/src/MenuItem/MenuItem.tsx

@@ -17,12 +17,9 @@ export const MenuItem = ({
   children,
   onClick,
   onKeyDown,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   disabled = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ref,
   href,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   color,
   ...props
 }: TypeMenuItemProps) => {
@@ -53,7 +50,6 @@ export const MenuItem = ({
         // use anchor tag if href is provided and button for menuitem
         as={isListbox ? undefined : href ? "a" : "button"}
         href={href}
-        // eslint-disable-next-line react/no-children-prop
         children={children}
         {...optionProps}
         {...props}

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/__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,9 @@ import {
 import {
   render,
   screen,
+  fireEvent,
+  act,
+  cleanup,
   waitFor,
 } from "@sproutsocial/seeds-react-testing-library";
 
@@ -22,6 +23,10 @@ const menuItems = [
 ];
 
 describe("MultiSelectMenu", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
   it("should render the MenuItems when provided as children", async () => {
     const { user } = render(
       <MultiSelectMenu

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/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/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/