@sproutsocial/seeds-react-menu 0.1.0 → 0.2.0

package/src/MenuItem/__tests__/MenuItem.typetest.tsx

@@ -1,41 +1,60 @@
 import { MenuItem } from "../MenuItem";
 
-export const MenuItemTypeTest = () => (
-  <>
-    {/* Valid MenuItem with minimal required props */}
-    <MenuItem id="test">Test</MenuItem>
-    {/* Valid MenuItem allows disabled prop */}
-    <MenuItem id="test" disabled>
-      Test
-    </MenuItem>
-    {/* Valid MenuItem allows disabled prop false */}
-    <MenuItem id="test" disabled={false}>
-      Test
-    </MenuItem>
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function MenuItemTypeTest() {
+  return (
+    <>
+      {/* Valid MenuItem with minimal required props */}
+      <MenuItem id="test">Test</MenuItem>
+      {/* Valid MenuItem allows href */}
+      <MenuItem id="test" href="test.com">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows active prop */}
+      <MenuItem id="test" active>
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows active prop false */}
+      <MenuItem id="test" active={false}>
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be checkbox */}
+      <MenuItem id="test" inputType="checkbox">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be radio */}
+      <MenuItem id="test" inputType="radio">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be switch */}
+      <MenuItem id="test" inputType="switch">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputType prop to be icon */}
+      <MenuItem id="test" inputType="icon">
+        Test
+      </MenuItem>
+      {/* Valid MenuItem allows inputLabelId prop as a string */}
+      <MenuItem id="test" inputLabelId="Test Label">
+        Test
+      </MenuItem>
 
-    {/* @ts-expect-error - no children is invalid */}
-    <MenuItem id="foo" />
-    {/* @ts-expect-error - test empty states are invalid */}
-    <MenuItem />
-    {/* @ts-expect-error - test missing index is invalid */}
-    <MenuItem id="foo" />
-    {/* @ts-expect-error - test missing id is invalid */}
-    <MenuItem />
-    {/* @ts-expect-error - test that types are invalid */}
-    <MenuItem id={0} />
-    {/* @ts-expect-error -test that wrong highlighted type fails */}
-    <MenuItem $highlighted="string">Hello world!</MenuItem>
-    {/* @ts-expect-error -test that wrong role type fails */}
-    <MenuItem role="wrong">Hello world!</MenuItem>
-    {/* @ts-expect-error - missing id is invalid */}
-    <MenuItem>Test</MenuItem>
-    <MenuItem
-      /* @ts-expect-error - id may not be a number */
-      id={0}
-      /* @ts-expect-error - disabled may not be a string */
-      disabled="true"
-    >
-      Test
-    </MenuItem>
-  </>
-);
+      {/* @ts-expect-error - no children is invalid */}
+      <MenuItem id="foo" />
+      {/* @ts-expect-error - missing id is invalid */}
+      <MenuItem>Test</MenuItem>
+      <MenuItem
+        /* @ts-expect-error - id may not be a number */
+        id={0}
+        /* @ts-expect-error - active may not be a string */
+        active="true"
+        /* @ts-expect-error - inputType must be valid */
+        inputType="invalid"
+        /* @ts-expect-error - inputLabelId may not be a number */
+        inputLabelId={0}
+      >
+        Test
+      </MenuItem>
+    </>
+  );
+}

package/src/MenuItem/styles.tsx

@@ -16,18 +16,37 @@ const highlightedStyles = css`
   background-color: ${({ theme }) => theme.colors.listItem.background.hover};
 `;
 
-export const MenuItemContainer = styled.li<{ $highlighted: boolean }>`
+export const MenuItemContainer = styled.li`
+  box-sizing: border-box;
+  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]};
+  }
+
+  &:last-child {
+    margin-bottom: ${({ theme }) => theme.space[300]};
+  }
+`;
+
+export const StyledMenuItem = styled.div<{ $highlighted: boolean }>`
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
   border-radius: ${({ theme }) => theme.radii[500]};
   background-color: ${({ theme }) => theme.colors.listItem.background.base};
   border: 1px solid ${({ theme }) => theme.colors.listItem.background.base};
   color: ${({ theme }) => theme.colors.text.body};
   font-family: ${({ theme }) => theme.fontFamily};
   font-weight: ${({ theme }) => theme.fontWeights.normal};
+  text-align: left;
+  text-decoration: none;
   padding: ${({ theme }) => theme.space[300]};
-  list-style-type: none;
   outline: 0;
   ${({ theme }) => theme.typography[200]};
-  transition: all ${({ theme }) => theme.duration["fast"]};
 
   /* Highlighted */
   ${({ $highlighted }) => $highlighted && highlightedStyles}
@@ -69,3 +88,23 @@ export const MenuItemContainer = styled.li<{ $highlighted: boolean }>`
   ${layout}
   ${space}
 `;
+
+export const MenuItemRow = styled.div`
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+`;
+
+export const MenuItemAction = styled.div`
+  margin-right: ${({ theme }) => theme.space[300]};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`;
+
+export const MenuItemText = styled.div`
+  word-break: break-word;
+  flex-grow: 1;
+  min-width: 0;
+`;

package/src/{MenuItemSelectable/MenuItemSelectable.tsx → MenuItem/useOptionProps.tsx}

@@ -6,18 +6,9 @@ import { Radio } from "@sproutsocial/seeds-react-radio";
 import { useTheme } from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 import { MenuContext } from "../MenuContext";
-import { MenuItem } from "../MenuItem";
 
-// import { type TypeMenuItemRoles } from "../constants";
-import {
-  MenuItemSelectableAction,
-  MenuItemSelectableRow,
-  MenuItemSelectableText,
-} from "./styles";
-import type {
-  TypeMenuItemSelectableProps,
-  InputType,
-} from "./MenuItemSelectableTypes";
+import type { TypeMenuItemProps, InputType } from "./MenuItemTypes";
+import { MenuItemAction, MenuItemRow, MenuItemText } from "./styles";
 
 /**
  * SelectionIndicator - handles logic for appropriate rendering of inputs
@@ -47,7 +38,7 @@ export const SelectionIndicator = ({
           onChange={() => {}}
           checked={selected}
           aria-labelledby={labeledBy}
-          id={`MenuItemSelectable-${inputType}-${id}`}
+          id={`MenuItem-${inputType}-${id}`}
         />
       );
     case "switch":
@@ -56,15 +47,15 @@ export const SelectionIndicator = ({
           onClick={inputStub}
           checked={!!selected}
           aria-labelledby={labeledBy}
-          id={`MenuItemSelectable-${inputType}-${id}`}
+          id={`MenuItem-${inputType}-${id}`}
         />
       );
     case "radio":
       return (
         <Radio
           checked={selected}
-          id={`MenuItemSelectable-${inputType}-${id}`}
-          name={`MenuItemSelectable-${inputType}`}
+          id={`MenuItem-${inputType}-${id}`}
+          name={`MenuItem-${inputType}`}
           aria-labelledby={labeledBy}
         />
       );
@@ -80,15 +71,15 @@ export const SelectionIndicator = ({
 };
 
 /**
- * MenuItemSelectable - primitive with controlled input states
+ * useOptionProps - props needed for the option menu items
  */
-export const MenuItemSelectable = ({
+export const useOptionProps = ({
   id,
   children,
   inputType = "icon",
-  inputLabel,
+  inputLabelId,
   ...props
-}: TypeMenuItemSelectableProps) => {
+}: TypeMenuItemProps) => {
   const { selectedItem, selectedItems, isListbox } = useContext(MenuContext);
   const selected = useMemo(
     () =>
@@ -97,40 +88,26 @@ export const MenuItemSelectable = ({
     [selectedItem, selectedItems]
   );
 
-  if (isListbox === false) {
-    console.warn(
-      "MenuItemSelectable is invalid when isListbox is false (Menu)"
-    );
-  }
-
-  // const roles: Record<InputType, TypeMenuItemRoles> = {
-  //   checkbox: "menuitemcheckbox",
-  //   switch: "menuitemcheckbox",
-  //   radio: "menuitemradio",
-  //   icon: "option",
-  // };
-
-  const label = inputLabel || `menu-item-child-${id}`;
+  const label = inputLabelId || `menu-item-child-${id}`;
 
-  return (
-    <MenuItem
-      active={selected}
-      id={id}
-      // role={roles["icon"]}
-      aria-selected={selected}
-      {...props}
-    >
-      <MenuItemSelectableRow>
-        <MenuItemSelectableAction>
-          <SelectionIndicator
-            id={id}
-            aria-labelledby={label}
-            inputType={inputType}
-            selected={!!selected}
-          />
-        </MenuItemSelectableAction>
-        <MenuItemSelectableText id={label}>{children}</MenuItemSelectableText>
-      </MenuItemSelectableRow>
-    </MenuItem>
-  );
+  return isListbox
+    ? {
+        active: selected,
+        ["aria-selected"]: selected,
+        children: (
+          <MenuItemRow>
+            <MenuItemAction>
+              <SelectionIndicator
+                id={id}
+                aria-labelledby={label}
+                inputType={inputType}
+                selected={!!selected}
+              />
+            </MenuItemAction>
+            <MenuItemText id={label}>{children}</MenuItemText>
+          </MenuItemRow>
+        ),
+        ...props,
+      }
+    : {};
 };

package/src/MenuRoot/MenuRoot.tsx

@@ -5,7 +5,7 @@ import { Popout, type TypePopoutProps } from "@sproutsocial/seeds-react-popout";
 import { MenuProvider, type TypeMenuProviderProps } from "../MenuContext";
 
 export interface TypeMenuRootOwnProps {
-  triggerElement: React.ReactElement<any>;
+  menuToggleElement: React.ReactElement<any>;
   popoutProps?: Partial<
     Omit<TypePopoutProps, "isOpen" | "setIsOpen" | "content" | "children">
   >;
@@ -20,14 +20,21 @@ const CustomPopoutContent = styled(Popout.Content)`
   margin-left: 0;
   margin-right: 0;
 `;
+
+/**
+ * @link https://seeds.sproutsocial.com/components/menu-root/
+ *
+ * @description MenuRoot is a utility component used to handle {@link https://github.com/sproutsocial/seeds/blob/dev/seeds-react/seeds-react-menu/src/MenuContext.tsx | MenuContext}. This component should rarely, if ever, be used directly unless building a custom menu type.
+ */
+
 export const MenuRoot = ({
   children,
-  triggerElement,
+  menuToggleElement,
   popoutProps,
   width = "300px",
   ...contextProps
 }: TypeMenuRootProps) => {
-  const { isListbox, isOpen, openMenu, closeMenu, getMenuProps } = contextProps;
+  const { isOpen, openMenu, closeMenu } = contextProps;
   const setIsOpen = useCallback(
     (newIsOpen: boolean) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
@@ -41,19 +48,7 @@ export const MenuRoot = ({
         isOpen={!!isOpen}
         setIsOpen={setIsOpen}
         content={
-          <CustomPopoutContent width={width}>
-            <div
-              {...getMenuProps?.(
-                {
-                  ...(isListbox ? {} : { role: "menu" }),
-                },
-                // Suppress ref error for now
-                { suppressRefError: true }
-              )}
-            >
-              {children}
-            </div>
-          </CustomPopoutContent>
+          <CustomPopoutContent width={width}>{children}</CustomPopoutContent>
         }
         focusLockProps={{
           // correct jerking motion when scrolling while the Popout is open
@@ -63,7 +58,7 @@ export const MenuRoot = ({
         disableWrapperAria
         {...popoutProps}
       >
-        {triggerElement}
+        {menuToggleElement}
       </Popout>
     </MenuProvider>
   );

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

@@ -78,7 +78,7 @@ describe("MenuRoot", () => {
   it("renders custom children", () => {
     render(
       <MenuRoot
-        triggerElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
+        menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
         isOpen
       >
         <MenuHeader title="Menu Header" />
@@ -120,7 +120,7 @@ describe("MenuRoot", () => {
 
       return (
         <MenuRoot
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton appearance="secondary">
               Open Menu (<TestComponent />)
             </MenuToggleButton>
@@ -181,7 +181,7 @@ describe("MenuRoot", () => {
     ({ TestComponent, contextProps, testBtnText, testFn }) => {
       render(
         <MenuRoot
-          triggerElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
+          menuToggleElement={<MenuToggleButton>Open Menu</MenuToggleButton>}
           isOpen
           {...contextProps}
         >

package/src/MenuRoot/__tests__/MenuRoot.typetest.tsx

@@ -4,20 +4,20 @@ import { MenuRoot, MenuContent, MenuHeader, MenuFooter } from "../../index";
 export const MenuRootTypeTest = () => (
   <>
     {/* Valid MenuRoot with minimal required props */}
-    <MenuRoot triggerElement={<>test</>}>Test</MenuRoot>
+    <MenuRoot menuToggleElement={<>test</>}>Test</MenuRoot>
     {/* Valid MenuRoot allows MenuContent by itself as a child */}
-    <MenuRoot triggerElement={<>test</>}>
+    <MenuRoot menuToggleElement={<>test</>}>
       <MenuContent>Test</MenuContent>
     </MenuRoot>
     {/* Valid MenuRoot allows multiple children without fragment */}
-    <MenuRoot triggerElement={<>test</>}>
+    <MenuRoot menuToggleElement={<>test</>}>
       <MenuHeader>Test</MenuHeader>
       <MenuContent>Test</MenuContent>
       <MenuFooter>Test</MenuFooter>
     </MenuRoot>
     {/* Valid MenuRoot accepts Downshift props and functions for useSelect */}
     <MenuRoot
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       onSelectedItemChange={() => {}}
       selectItem={() => {}}
       selectedItem={null}
@@ -30,7 +30,7 @@ export const MenuRootTypeTest = () => (
     </MenuRoot>
     {/* Valid MenuRoot accepts Downshift props and functions for useMultipleSelection */}
     <MenuRoot
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       onSelectedItemsChange={() => {}}
       selectedItems={[]}
       multiSelectStateReducer={(c) => c}
@@ -40,19 +40,19 @@ export const MenuRootTypeTest = () => (
       Test
     </MenuRoot>
 
-    {/* @ts-expect-error - triggerElement is a required prop */}
+    {/* @ts-expect-error - menuToggleElement is a required prop */}
     <MenuRoot>Test</MenuRoot>
     <MenuRoot
-      /* @ts-expect-error - triggerElement must be a valid react element */
-      triggerElement="test"
+      /* @ts-expect-error - menuToggleElement must be a valid react element */
+      menuToggleElement="test"
     >
       Test
     </MenuRoot>
     {/* @ts-expect-error - when no children provided */}
-    <MenuRoot triggerElement="test" />
+    <MenuRoot menuToggleElement="test" />
 
     <MenuRoot
-      triggerElement={<>test</>}
+      menuToggleElement={<>test</>}
       /* @ts-expect-error - isOpen can't be a string */
       isOpen="false"
       /* @ts-expect-error - onSelectedItemChange can't be a string */

package/src/MultiSelectMenu/MultiSelectMenu.tsx

@@ -34,6 +34,14 @@ const selectReducerForMultiSelect: TypeMultiSelectMenuProps["stateReducer"] = (
   return changes;
 };
 
+/**
+ * @link https://seeds.sproutsocial.com/components/multiselect-menu/
+ *
+ * @description A MultiSelectMenu allows multiple {@link https://github.com/sproutsocial/seeds/tree/dev/seeds-react/seeds-react-menu/src/MenuItem | MenuItems} to be selected from a list or groups of lists.
+ *
+ * @see {@link https://seeds.sproutsocial.com/components/menu-group/ | MenuGroup}
+ */
+
 export const MultiSelectMenu = ({
   children,
   stateReducer: externalStateReducer,
@@ -91,7 +99,6 @@ export const MultiSelectMenu = ({
         case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
         case useSelect.stateChangeTypes.ItemClick:
-        case useSelect.stateChangeTypes.ToggleButtonBlur:
           if (!newSelectedItem) break;
           if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
             removeSelectedItem(newSelectedItem);

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

@@ -3,7 +3,7 @@ import {
   MultiSelectMenu,
   MenuContent,
   MenuToggleButton,
-  MenuItemSelectable,
+  MenuItem,
   MenuGroup,
 } from "../../index";
 import {
@@ -30,7 +30,7 @@ describe("MultiSelectMenu", () => {
   it("should render the menuItemSelectables when provided as children", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -39,9 +39,9 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable key={item.id} id={item.id} label={item.label}>
+              <MenuItem key={item.id} id={item.id} label={item.label}>
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -73,7 +73,7 @@ describe("MultiSelectMenu", () => {
   xit("should allow for multiple items to be selected", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -82,14 +82,14 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 data-testid={item.id}
                 label={item.label}
               >
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -129,7 +129,7 @@ describe("MultiSelectMenu", () => {
   xit("Should maintain selected state when closed and reopened", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -138,14 +138,14 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 data-testid={item.id}
                 label={item.label}
               >
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -190,7 +190,7 @@ describe("MultiSelectMenu", () => {
   xit("should be able to navigate using the keyboard", async () => {
     const { user } = render(
       <MultiSelectMenu
-        triggerElement={
+        menuToggleElement={
           <MenuToggleButton aria-label="testable menu" role="button">
             Testable Menu
           </MenuToggleButton>
@@ -199,14 +199,14 @@ describe("MultiSelectMenu", () => {
         <MenuContent>
           <MenuGroup>
             {menuItems.map((item) => (
-              <MenuItemSelectable
+              <MenuItem
                 key={item.id}
                 id={item.id}
                 data-testid={item.id}
                 label={item.label}
               >
                 {item.label}
-              </MenuItemSelectable>
+              </MenuItem>
             ))}
           </MenuGroup>
         </MenuContent>
@@ -246,7 +246,7 @@ describe("MultiSelectMenu", () => {
     xit("should stay open after menu item selection", async () => {
       const { user } = render(
         <MultiSelectMenu
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton aria-label="testable menu" role="button">
               Testable Menu
             </MenuToggleButton>
@@ -255,14 +255,14 @@ describe("MultiSelectMenu", () => {
           <MenuContent>
             <MenuGroup>
               {menuItems.map((item) => (
-                <MenuItemSelectable
+                <MenuItem
                   key={item.id}
                   id={item.id}
                   data-testid={item.id}
                   label={item.label}
                 >
                   {item.label}
-                </MenuItemSelectable>
+                </MenuItem>
               ))}
             </MenuGroup>
           </MenuContent>
@@ -297,7 +297,7 @@ describe("MultiSelectMenu", () => {
     xit("Should work with a initially selected items", async () => {
       const { user } = render(
         <MultiSelectMenu
-          triggerElement={
+          menuToggleElement={
             <MenuToggleButton aria-label="testable menu" role="button">
               Testable Menu
             </MenuToggleButton>
@@ -307,14 +307,14 @@ describe("MultiSelectMenu", () => {
           <MenuContent>
             <MenuGroup>
               {menuItems.map((item) => (
-                <MenuItemSelectable
+                <MenuItem
                   key={item.id}
                   id={item.id}
                   data-testid={item.id}
                   label={item.label}
                 >
                   {item.label}
-                </MenuItemSelectable>
+                </MenuItem>
               ))}
             </MenuGroup>
           </MenuContent>