feat(container-menu)!: Add getAnchorProps for explicit anchor handling (#695)

Author: ze-flo

packages/menu/README.md

@@ -18,6 +18,8 @@ Check out [storybook](https://zendeskgarden.github.io/react-containers) for live
 
 ### useMenu
 
+#### Menu items
+
 ```jsx
 import { useMenu } from '@zendeskgarden/container-menu';
 
@@ -50,6 +52,40 @@ const Menu = () => {
 };
 ```
 
+#### Menu links
+
+```jsx
+import { useMenu } from '@zendeskgarden/container-menu';
+
+const Menu = () => {
+  const triggerRef = useRef();
+  const menuRef = useRef();
+  const items = [
+    { value: 'home', label: 'Home', href="#", selected: true },
+    { value: 'about', label: 'About', href="www.example.com/about" },
+    { value: 'support', label: 'Support', href="www.support.example.com", external: true }
+  ];
+  const { isExpanded, getTriggerProps, getMenuProps, getItemProps, getAnchorProps } = useMenu({
+    triggerRef,
+    menuRef,
+    items
+  });
+
+  return (
+    <>
+      <button {...getTriggerProps()}>Menu</button>
+      <ul {...getMenuProps()} style={{ visibility: isExpanded ? 'visible' : 'hidden' }}>
+        {items.map(item => (
+          <li key={item.value} {...getItemProps({ item })}>
+            <a {...getAnchorProps({ item })}>{item.label}</a>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};
+```
+
 ### MenuContainer
 
 ```jsx
@@ -61,27 +97,20 @@ const Menu = () => {
   const items = [
     { value: 'value-1', label: 'One' },
     { value: 'value-2', label: 'Two' },
-    { value: 'value-3', label: 'Three', href: '#0' },
-    { value: 'value-4', label: 'Four' }
+    { value: 'value-3', label: 'Three' }
   ];
 
   return (
     <MenuContainer triggerRef={triggerRef} menuRef={menuRef} items={items}>
-      {({ isExpanded, getTriggerProps, getMenuProps, getItemProps, getSeparatorProps }) => (
+      {({ isExpanded, getTriggerProps, getMenuProps, getItemProps }) => (
         <>
           <button {...getTriggerProps()}>Menu</button>
           <ul {...getMenuProps()} style={{ visibility: isExpanded ? 'visible' : 'hidden' }}>
-            {items.map(item =>
-              item.href ? (
-                <li key={item.value} role="none">
-                  <a {...getItemProps({ item })}>{item.label}</a>
-                </li>
-              ) : (
-                <li key={item.value} {...getItemProps({ item })}>
-                  {item.label}
-                </li>
-              )
-            )}
+            {items.map(item => (
+              <li key={item.value} {...getItemProps({ item })}>
+                {item.label}
+              </li>
+            ))}
           </ul>
         </>
       )}

packages/menu/demo/menu.stories.tsx

@@ -48,6 +48,8 @@ export const Controlled: Story = {
     return (
       <MenuStory
         {...args}
+        // Storybook sets args to null when they are removed from controls. This breaks useMenu since getControlledValue treats null as intentional input.
+        selectedItems={args.selectedItems === null ? undefined : args.selectedItems}
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onChange={({ type, ...rest }) => {
           updateArgs(rest);

packages/menu/demo/stories/MenuStory.tsx

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { AnchorHTMLAttributes, LiHTMLAttributes, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { StoryFn } from '@storybook/react';
 import classNames from 'classnames';
 import {
@@ -29,18 +29,20 @@ interface IUseMenuComponentProps extends MenuReturnValue {
 type MenuItemProps = {
   item: IMenuItemBase;
   getItemProps: IUseMenuComponentProps['getItemProps'];
+  getAnchorProps: IUseMenuComponentProps['getAnchorProps'];
   focusedValue: IUseMenuComponentProps['focusedValue'];
   isSelected?: boolean;
 };
 
-const Item = ({ item, getItemProps, focusedValue, isSelected }: MenuItemProps) => {
-  const itemProps = getItemProps({ item });
+const Item = ({ item, getAnchorProps, getItemProps, focusedValue, isSelected }: MenuItemProps) => {
+  const itemProps = getItemProps<HTMLLIElement>({ item });
+  const anchorProps = getAnchorProps({ item });
 
   const itemChildren = (
     <>
       <span className="inline-flex justify-center items-center w-4">
-        {item?.type === 'radio' && !!isSelected && '•'}
-        {item?.type === 'checkbox' && !!isSelected && '✓'}
+        {!!isSelected && item.type === 'radio' && '•'}
+        {!!isSelected && (item.type === 'checkbox' || !!item.href) && '✓'}
       </span>
       {item.label || item.value}
     </>
@@ -54,16 +56,21 @@ const Item = ({ item, getItemProps, focusedValue, isSelected }: MenuItemProps) =
         'cursor-pointer': !item.disabled,
         'cursor-default': item.disabled
       })}
-      role={itemProps.href ? 'none' : undefined}
-      {...(!itemProps.href && (itemProps as LiHTMLAttributes<HTMLLIElement>))}
+      {...itemProps}
     >
-      {itemProps.href ? (
+      {anchorProps ? (
         <a
-          {...(itemProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
-          className="w-full rounded-sm outline-offset-0 transition-none border-width-none"
+          {...anchorProps}
+          className={classNames(
+            ' w-full rounded-sm outline-offset-0 transition-none border-width-none',
+            {
+              'text-grey-400': item.disabled,
+              'cursor-default': item.disabled
+            }
+          )}
         >
           {itemChildren}
-          {!!item.isExternal && (
+          {anchorProps.target === '_blank' && (
             <>
               <span aria-hidden="true"> ↗</span>
               <span className="sr-only">(opens in new window)</span>
@@ -85,11 +92,20 @@ const Component = ({
   getTriggerProps,
   getMenuProps,
   getItemProps,
+  getAnchorProps,
   getItemGroupProps,
   getSeparatorProps
 }: MenuReturnValue & UseMenuProps) => {
   const selectedValues = selection.map(item => item.value);
 
+  useEffect(() => {
+    const originalWindowOpen = window.open;
+    window.open = () => null;
+    return () => {
+      window.open = originalWindowOpen;
+    };
+  }, []);
+
   return (
     <div className="relative">
       <button className="px-2 py-1" type="button" {...getTriggerProps()}>
@@ -116,6 +132,7 @@ const Component = ({
                       key={groupItem.value}
                       item={{ ...groupItem }}
                       getItemProps={getItemProps}
+                      getAnchorProps={getAnchorProps}
                       focusedValue={focusedValue}
                       isSelected={selectedValues.includes(groupItem.value)}
                     />
@@ -141,6 +158,8 @@ const Component = ({
               item={item}
               focusedValue={focusedValue}
               getItemProps={getItemProps}
+              getAnchorProps={getAnchorProps}
+              isSelected={selectedValues.includes(item.value)}
             />
           );
         })}

packages/menu/demo/stories/data.ts

@@ -16,9 +16,16 @@ export const ITEMS: MenuItem[] = [
     value: 'plant-04',
     label: 'Aloe Vera',
     href: 'https://en.wikipedia.org/wiki/Aloe_vera',
-    isExternal: false
+    external: false
   },
-  { value: 'plant-05', label: 'Succulent' },
+  {
+    value: 'plant-05',
+    label: 'Palm tree',
+    href: 'https://en.wikipedia.org/wiki/Palm_tree',
+    external: true,
+    disabled: true
+  },
+  { value: 'plant-06', label: 'Succulent' },
   {
     label: 'Choose favorites',
     items: [