docs: Menu rendered in ShadowRoot implement preview [ DO NOT MERGE ]

packages/dropdowns/demo/stories/MenuStory.tsx

@@ -6,11 +6,15 @@
  */
 
 import React from 'react';
+import { createPortal } from 'react-dom';
+import { StyleSheetManager } from 'styled-components';
+
 import { StoryFn } from '@storybook/react';
 import LeafIcon from '@zendeskgarden/svg-icons/src/16/leaf-stroke.svg';
 import CartIcon from '@zendeskgarden/svg-icons/src/16/shopping-cart-stroke.svg';
 import { Grid } from '@zendeskgarden/react-grid';
 import { IMenuProps, Item, ItemGroup, Separator, Menu } from '@zendeskgarden/react-dropdowns';
+import { IGardenTheme, ThemeProvider } from '@zendeskgarden/react-theming';
 import { IconButton } from '@zendeskgarden/react-buttons';
 import { ButtonType, IItem, Items } from './types';
 
@@ -29,50 +33,77 @@ interface IArgs extends IMenuProps {
   label: string;
 }
 
-export const MenuStory: StoryFn<IArgs> = ({ button, items, label, ...args }) => (
-  <Grid>
-    <Grid.Row justifyContent="center" style={{ height: 800 }}>
-      <Grid.Col alignSelf="center" textAlign="center">
-        <div style={{ display: 'inline-block', position: 'relative', width: 200 }}>
-          <Menu
-            {...args}
-            button={
-              button === 'string'
-                ? label
-                : /* eslint-disable-next-line react/no-unstable-nested-components */
-                  props => (
-                    <IconButton {...props} aria-label={label}>
-                      <LeafIcon />
-                    </IconButton>
-                  )
-            }
-          >
-            {items.map(item => {
-              if ('items' in item) {
-                return (
-                  <ItemGroup
-                    legend={item.legend}
-                    aria-label={item['aria-label']}
-                    key={item.legend || item['aria-label']}
-                    type={item.type}
-                    icon={item.icon ? <CartIcon /> : undefined}
-                  >
-                    {item.items.map(groupItem => (
-                      <MenuItem key={groupItem.value} {...groupItem} />
-                    ))}
-                  </ItemGroup>
-                );
-              }
+const Portal = ({ children, target }: any) => {
+  if (!target) return null;
+
+  return createPortal(children, target);
+};
+
+export const MenuStory: StoryFn<IArgs> = ({ button, items, label, ...args }) => {
+  const ref = React.useRef<any>(null);
+  const [document, setDocument] = React.useState(undefined);
+
+  React.useEffect(() => {
+    if (ref.current && !ref.current.shadowRoot) {
+      const shadowRoot = ref.current?.attachShadow({ mode: 'open' });
 
-              if ('isSeparator' in item) {
-                return <Separator key={item.value} />;
-              }
+      setDocument(shadowRoot);
+    }
+  }, []);
 
-              return <MenuItem key={item.value} {...item} />;
-            })}
-          </Menu>
-        </div>
-      </Grid.Col>
-    </Grid.Row>
-  </Grid>
-);
+  return (
+    <div ref={ref}>
+      <Portal target={document}>
+        <StyleSheetManager target={document}>
+          <ThemeProvider theme={(theme: IGardenTheme) => ({ ...theme, document })}>
+            <Grid>
+              <Grid.Row justifyContent="center" style={{ height: 800 }}>
+                <Grid.Col alignSelf="center" textAlign="center">
+                  <div style={{ display: 'inline-block', position: 'relative', width: 200 }}>
+                    <Menu
+                      {...args}
+                      button={
+                        button === 'string'
+                          ? label
+                          : /* eslint-disable-next-line react/no-unstable-nested-components */
+                            props => (
+                              <IconButton {...props} aria-label={label}>
+                                <LeafIcon />
+                              </IconButton>
+                            )
+                      }
+                    >
+                      {items.map(item => {
+                        if ('items' in item) {
+                          return (
+                            <ItemGroup
+                              legend={item.legend}
+                              aria-label={item['aria-label']}
+                              key={item.legend || item['aria-label']}
+                              type={item.type}
+                              icon={item.icon ? <CartIcon /> : undefined}
+                            >
+                              {item.items.map(groupItem => (
+                                <MenuItem key={groupItem.value} {...groupItem} />
+                              ))}
+                            </ItemGroup>
+                          );
+                        }
+
+                        if ('isSeparator' in item) {
+                          return <Separator key={item.value} />;
+                        }
+
+                        return <MenuItem key={item.value} {...item} />;
+                      })}
+                    </Menu>
+                  </div>
+                </Grid.Col>
+              </Grid.Row>
+            </Grid>
+          </ThemeProvider>
+        </StyleSheetManager>
+      </Portal>
+    </div>
+  );
+};

packages/dropdowns/demo/stories/data.ts

@@ -23,6 +23,12 @@ export const ITEMS: Items = [
     value: 'separator',
     isSeparator: true
   },
+  {
+    value: 'item-anchor',
+    label: 'Item link',
+    href: 'https://garden.zendesk.com',
+    isExternal: true
+  },
   {
     value: 'item-meta',
     label: 'Item',

packages/dropdowns/package.json

@@ -23,7 +23,7 @@
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.0",
     "@zendeskgarden/container-combobox": "^2.0.0",
-    "@zendeskgarden/container-menu": "^0.5.1",
+    "@zendeskgarden/container-menu": "file:../../zendeskgarden-container-menu-0.6.0.tgz",
     "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/react-buttons": "^9.5.4",
     "@zendeskgarden/react-forms": "^9.5.4",

packages/dropdowns/src/elements/menu/Item.tsx

@@ -5,30 +5,65 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { LiHTMLAttributes, MutableRefObject, forwardRef, useMemo } from 'react';
+import React, {
+  AnchorHTMLAttributes,
+  LiHTMLAttributes,
+  MutableRefObject,
+  forwardRef,
+  useMemo
+} from 'react';
 import PropTypes from 'prop-types';
 import { mergeRefs } from 'react-merge-refs';
 import AddIcon from '@zendeskgarden/svg-icons/src/16/plus-stroke.svg';
 import NextIcon from '@zendeskgarden/svg-icons/src/16/chevron-right-stroke.svg';
 import PreviousIcon from '@zendeskgarden/svg-icons/src/16/chevron-left-stroke.svg';
 import CheckedIcon from '@zendeskgarden/svg-icons/src/16/check-lg-stroke.svg';
-import { IItemProps, OptionType as ItemType, OPTION_TYPE } from '../../types';
-import { StyledItem, StyledItemContent, StyledItemIcon, StyledItemTypeIcon } from '../../views';
+
+import { IItemProps, OPTION_TYPE, OptionType } from '../../types';
+import {
+  StyledItem,
+  StyledItemAnchor,
+  StyledItemContent,
+  StyledItemIcon,
+  StyledItemTypeIcon
+} from '../../views';
 import { ItemMeta } from './ItemMeta';
 import useMenuContext from '../../context/useMenuContext';
 import useItemGroupContext from '../../context/useItemGroupContext';
 import { ItemContext } from '../../context/useItemContext';
 import { toItem } from './utils';
 
+const optionType = new Set(OPTION_TYPE);
+
+const renderActionIcon = (itemType?: OptionType) => {
+  switch (itemType) {
+    case 'add':
+      return <AddIcon />;
+    case 'next':
+      return <NextIcon />;
+    case 'previous':
+      return <PreviousIcon />;
+    default:
+      return <CheckedIcon />;
+  }
+};
+
+/**
+ * 1. role='img' on `svg` is valid WAI-ARIA usage in this context.
+ *    https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
+ */
+
 const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
   (
     {
       children,
       value,
       label = value,
+      href,
       isSelected,
       icon,
       isDisabled,
+      isExternal,
       type,
       name,
       onClick,
@@ -47,58 +82,72 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
         name,
         type,
         isSelected,
-        isDisabled
+        isDisabled,
+        href,
+        isExternal
       }),
       type: selectionType
     };
 
+    const hasAnchor = !!href;
+
+    if (hasAnchor) {
+      if (type && optionType.has(type)) {
+        throw new Error(`Menu item '${value}' can't use type '${type}'`);
+      } else if (selectionType) {
+        throw new Error(`Menu item '${value}' can't use selection type '${selectionType}'`);
+      }
+    }
+
     const { ref: _itemRef, ...itemProps } = getItemProps({
       item,
       onClick,
       onKeyDown,
       onMouseEnter
     }) as LiHTMLAttributes<HTMLLIElement> & { ref: MutableRefObject<HTMLLIElement> };
 
-    const isActive = value === focusedValue;
-
-    const renderActionIcon = (iconType?: ItemType) => {
-      switch (iconType) {
-        case 'add':
-          return <AddIcon />;
-
-        case 'next':
-          return <NextIcon />;
+    const contextValue = useMemo(() => ({ isDisabled, type }), [isDisabled, type]);
 
-        case 'previous':
-          return <PreviousIcon />;
+    const itemChildren = (
+      <>
+        <StyledItemTypeIcon $isCompact={isCompact} $type={type}>
+          {renderActionIcon(type)}
+        </StyledItemTypeIcon>
+        {!!icon && (
+          <StyledItemIcon $isDisabled={isDisabled} $type={type}>
+            {icon}
+          </StyledItemIcon>
+        )}
+        <StyledItemContent>{children || label}</StyledItemContent>
+      </>
+    );
 
-        default:
-          return <CheckedIcon />;
-      }
+    const menuItemProps = {
+      $isCompact: isCompact,
+      $isActive: value === focusedValue,
+      $type: type,
+      ...props,
+      ...itemProps,
+      ref: mergeRefs([_itemRef, ref])
     };
 
-    const contextValue = useMemo(() => ({ isDisabled, type }), [isDisabled, type]);
-
     return (
       <ItemContext.Provider value={contextValue}>
-        <StyledItem
-          $type={type}
-          $isCompact={isCompact}
-          $isActive={isActive}
-          {...props}
-          {...itemProps}
-          ref={mergeRefs([_itemRef, ref])}
-        >
-          <StyledItemTypeIcon $isCompact={isCompact} $type={type}>
-            {renderActionIcon(type)}
-          </StyledItemTypeIcon>
-          {!!icon && (
-            <StyledItemIcon $isDisabled={isDisabled} $type={type}>
-              {icon}
-            </StyledItemIcon>
-          )}
-          <StyledItemContent>{children || label}</StyledItemContent>
-        </StyledItem>
+        {hasAnchor ? (
+          <li role="none">
+            <StyledItemAnchor
+              {...(menuItemProps as AnchorHTMLAttributes<HTMLAnchorElement>)}
+              href={href}
+              target={isExternal ? '_blank' : undefined}
+              // legacy browsers safeguards
+              rel={isExternal ? 'noopener noreferrer' : undefined}
+            >
+              {itemChildren}
+            </StyledItemAnchor>
+          </li>
+        ) : (
+          <StyledItem {...menuItemProps}>{itemChildren}</StyledItem>
+        )}
       </ItemContext.Provider>
     );
   }
@@ -107,9 +156,11 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
 ItemComponent.displayName = 'Item';
 
 ItemComponent.propTypes = {
+  href: PropTypes.string,
   icon: PropTypes.any,
   isDisabled: PropTypes.bool,
   isSelected: PropTypes.bool,
+  isExternal: PropTypes.bool,
   label: PropTypes.string,
   name: PropTypes.string,
   type: PropTypes.oneOf(OPTION_TYPE),