@react-spectrum/menu 3.22.11 → 3.23.0

package/dist/zh-TW.mjs

@@ -1,10 +0,0 @@
-var $56f3d9ca2967952d$exports = {};
-$56f3d9ca2967952d$exports = {
-    "backButton": (args)=>`\u{8FD4}\u{56DE} ${args.prevMenuButton}`,
-    "moreActions": `\u{66F4}\u{591A}\u{52D5}\u{4F5C}`,
-    "unavailable": `\u{7121}\u{6CD5}\u{4F7F}\u{7528}\u{FF0C}\u{5C55}\u{958B}\u{4EE5}\u{53D6}\u{5F97}\u{8A73}\u{7D30}\u{8CC7}\u{6599}`
-};
-
-
-export {$56f3d9ca2967952d$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -1,10 +0,0 @@
-var $56f3d9ca2967952d$exports = {};
-$56f3d9ca2967952d$exports = {
-    "backButton": (args)=>`\u{8FD4}\u{56DE} ${args.prevMenuButton}`,
-    "moreActions": `\u{66F4}\u{591A}\u{52D5}\u{4F5C}`,
-    "unavailable": `\u{7121}\u{6CD5}\u{4F7F}\u{7528}\u{FF0C}\u{5C55}\u{958B}\u{4EE5}\u{53D6}\u{5F97}\u{8A73}\u{7D30}\u{8CC7}\u{6599}`
-};
-
-
-export {$56f3d9ca2967952d$exports as default};
-//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -1 +0,0 @@
-{"mappings":";AAAA,4BAAiB;IAAG,cAAc,CAAC,OAAS,CAAC,iBAAG,EAAE,KAAK,cAAc,EAAE;IACrE,eAAe,CAAC,gCAAI,CAAC;IACrB,eAAe,CAAC,gHAAc,CAAC;AACjC","sources":["packages/@react-spectrum/menu/intl/zh-TW.json"],"sourcesContent":["{\n  \"backButton\": \"返回 {prevMenuButton}\",\n  \"moreActions\": \"更多動作\",\n  \"unavailable\": \"無法使用，展開以取得詳細資料\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/src/ActionMenu.tsx

@@ -1,58 +0,0 @@
-/*
- * Copyright 2021 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ActionButton} from '@react-spectrum/button';
-import {filterDOMProps} from '@react-aria/utils';
-import {FocusableRef} from '@react-types/shared';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {Menu} from './Menu';
-import {MenuTrigger} from './MenuTrigger';
-import More from '@spectrum-icons/workflow/More';
-import React, {forwardRef, ReactElement} from 'react';
-import {SpectrumActionMenuProps} from '@react-types/menu';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useSlotProps} from '@react-spectrum/utils';
-
-/**
- * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
- */
-export const ActionMenu = forwardRef(function ActionMenu<T extends object>(props: SpectrumActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
-  props = useSlotProps(props, 'actionMenu');
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
-  let buttonProps = filterDOMProps(props, {labelable: true});
-  if (buttonProps['aria-label'] === undefined) {
-    buttonProps['aria-label'] = stringFormatter.format('moreActions');
-  }
-
-  return (
-    <MenuTrigger
-      isOpen={props.isOpen}
-      defaultOpen={props.defaultOpen}
-      onOpenChange={props.onOpenChange}
-      align={props.align}
-      direction={props.direction}
-      shouldFlip={props.shouldFlip}>
-      <ActionButton
-        ref={ref}
-        {...props}
-        {...buttonProps}>
-        <More />
-      </ActionButton>
-      <Menu
-        children={props.children}
-        items={props.items}
-        disabledKeys={props.disabledKeys}
-        onAction={props.onAction} />
-    </MenuTrigger>
-  );
-}) as <T>(props: SpectrumActionMenuProps<T> & {ref?: FocusableRef<HTMLButtonElement>}) => ReactElement;

package/src/ContextualHelpTrigger.tsx

@@ -1,194 +0,0 @@
-/*
- * Copyright 2023 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {classNames, SlotProvider, unwrapDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
-import {DOMRefValue, ItemProps, Key} from '@react-types/shared';
-import {FocusScope} from '@react-aria/focus';
-import {getInteractionModality} from '@react-aria/interactions';
-import helpStyles from '@adobe/spectrum-css-temp/components/contextualhelp/vars.css';
-import {isFocusWithin, nodeContains} from '@react-aria/utils';
-import {Popover} from '@react-spectrum/overlays';
-import React, {JSX, KeyboardEventHandler, ReactElement, useEffect, useRef, useState} from 'react';
-import ReactDOM from 'react-dom';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {SubmenuTriggerContext, useMenuStateContext} from './context';
-import {TrayHeaderWrapper} from './Menu';
-import {useSubmenuTrigger} from '@react-aria/menu';
-import {useSubmenuTriggerState} from '@react-stately/menu';
-
-interface MenuDialogTriggerProps {
-  /** Whether the menu item is currently unavailable. */
-  isUnavailable?: boolean,
-  /** The triggering Item and the Dialog, respectively. */
-  children: [ReactElement, ReactElement]
-}
-
-interface InternalMenuDialogTriggerProps extends MenuDialogTriggerProps {
-  targetKey: Key
-}
-
-export interface SpectrumMenuDialogTriggerProps extends MenuDialogTriggerProps {}
-
-function ContextualHelpTrigger(props: InternalMenuDialogTriggerProps): ReactElement {
-  let {isUnavailable = false, targetKey} = props;
-
-  let triggerRef = useRef<HTMLLIElement>(null);
-  let popoverRef = useRef<DOMRefValue<HTMLDivElement> | null>(null);
-  let {popoverContainer, trayContainerRef, rootMenuTriggerState, menu: parentMenuRef, state} = useMenuStateContext()!;
-  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, {...rootMenuTriggerState!, ...state});
-  let submenuRef = unwrapDOMRef(popoverRef);
-  let {submenuTriggerProps, popoverProps} = useSubmenuTrigger({
-    parentMenuRef,
-    submenuRef,
-    type: 'dialog',
-    isDisabled: !isUnavailable
-  }, submenuTriggerState, triggerRef);
-  let isMobile = useIsMobileDevice();
-  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');
-  useEffect(() => {
-    if (submenuTriggerState.isOpen) {
-      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
-    }
-  }, [submenuTriggerState.isOpen]);
-  let slots = {};
-  if (isUnavailable) {
-    slots = {
-      dialog: {
-        UNSAFE_className: classNames(
-          helpStyles,
-          'react-spectrum-ContextualHelp-dialog',
-          {
-            'react-spectrum-ContextualHelp-dialog--isMobile': isMobile
-          },
-          classNames(
-            styles,
-            {
-              'spectrum-Menu-subdialog': !isMobile,
-              [traySubmenuAnimation]: isMobile
-            }
-          )
-        )
-      },
-      content: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-content']},
-      footer: {UNSAFE_className: helpStyles['react-spectrum-ContextualHelp-footer']}
-    };
-  }
-  let [trigger] = React.Children.toArray(props.children);
-  let [, content] = props.children as [ReactElement, ReactElement];
-
-  let onBlurWithin = (e) => {
-    if (e.relatedTarget && popoverRef.current && (!nodeContains(popoverRef.current.UNSAFE_getDOMNode(), e.relatedTarget) && !(e.relatedTarget === triggerRef.current && getInteractionModality() === 'pointer'))) {
-      if (submenuTriggerState.isOpen) {
-        submenuTriggerState.close();
-      }
-    }
-  };
-
-  let overlay;
-  let tray;
-  let onBackButtonPress = () => {
-    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
-    setTimeout(() => {
-      submenuTriggerState.close();
-      if (parentMenuRef.current && !isFocusWithin(parentMenuRef.current)) {
-        parentMenuRef.current.focus();
-      }
-    }, 220); // Matches transition duration
-  };
-
-  if (isMobile) {
-    delete submenuTriggerProps.onBlur;
-    delete submenuTriggerProps.onHoverChange;
-    if (trayContainerRef.current && submenuTriggerState.isOpen) {
-      let subDialogKeyDown: KeyboardEventHandler = (e) => {
-        switch (e.key) {
-          case 'Escape':
-            e.stopPropagation();
-            onBackButtonPress();
-            break;
-        }
-      };
-
-      tray = (
-        <TrayHeaderWrapper
-          isSubmenu
-          parentMenuTreeState={state}
-          rootMenuTriggerState={rootMenuTriggerState}
-          wrapperKeyDown={subDialogKeyDown}
-          onBackButtonPress={onBackButtonPress}>
-          {content}
-        </TrayHeaderWrapper>
-      );
-
-      overlay = ReactDOM.createPortal(tray, trayContainerRef.current);
-    }
-  } else {
-    let onDismissButtonPress = () => {
-      submenuTriggerState.close();
-      parentMenuRef.current?.focus();
-    };
-
-    overlay = (
-      <Popover
-        {...popoverProps}
-        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}
-        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
-        onDismissButtonPress={onDismissButtonPress}
-        onBlurWithin={onBlurWithin}
-        container={popoverContainer!}
-        state={submenuTriggerState}
-        ref={popoverRef}
-        triggerRef={triggerRef}
-        placement="end top"
-        containerPadding={0}
-        hideArrow
-        enableBothDismissButtons>
-        <FocusScope restoreFocus contain>
-          {content}
-        </FocusScope>
-      </Popover>
-    );
-  }
-
-  return (
-    <>
-      <SubmenuTriggerContext.Provider value={{isUnavailable, triggerRef, ...submenuTriggerProps}}>{trigger}</SubmenuTriggerContext.Provider>
-      <SlotProvider slots={slots}>
-        {submenuTriggerState.isOpen && overlay}
-      </SlotProvider>
-    </>
-  );
-}
-
-ContextualHelpTrigger.getCollectionNode = function* getCollectionNode<T>(props: ItemProps<T>) {
-  let childArray: ReactElement[] = [];
-  React.Children.forEach(props.children, child => {
-    if (React.isValidElement(child)) {
-      childArray.push(child);
-    }
-  });
-  let [trigger] = childArray;
-  let [, content] = props.children as [ReactElement, ReactElement];
-
-  yield {
-    element: React.cloneElement(trigger, {...trigger.props as any, hasChildItems: true, isTrigger: true}),
-    wrapper: (element) => (
-      <ContextualHelpTrigger key={element.key} targetKey={element.key} {...props}>
-        {element}
-        {content}
-      </ContextualHelpTrigger>
-    )
-  };
-};
-
-let _Item = ContextualHelpTrigger as unknown as (props: SpectrumMenuDialogTriggerProps) => JSX.Element;
-export {_Item as ContextualHelpTrigger};

package/src/Menu.tsx

@@ -1,228 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {ActionButton} from '@react-spectrum/button';
-import ArrowDownSmall from '@spectrum-icons/ui/ArrowDownSmall';
-import {classNames, useDOMRef, useIsMobileDevice, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
-import {FocusScope} from '@react-aria/focus';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {MenuContext, MenuStateContext, useMenuStateContext} from './context';
-import {MenuItem} from './MenuItem';
-import {MenuSection} from './MenuSection';
-import {mergeProps, useLayoutEffect, useSlotId, useSyncRef} from '@react-aria/utils';
-import React, {KeyboardEventHandler, ReactElement, ReactNode, RefObject, useContext, useEffect, useRef, useState} from 'react';
-import {RootMenuTriggerState} from '@react-stately/menu';
-import {SpectrumMenuProps} from '@react-types/menu';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {TreeState, useTreeState} from '@react-stately/tree';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useMenu} from '@react-aria/menu';
-
-/**
- * Menus display a list of actions or options that a user can choose.
- */
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-export const Menu = React.forwardRef(function Menu<T extends object>(props: SpectrumMenuProps<T>, ref: DOMRef<HTMLDivElement>) {
-  let isSubmenu = true;
-  let contextProps = useContext(MenuContext);
-  let parentMenuContext = useMenuStateContext();
-  let {rootMenuTriggerState, state: parentMenuTreeState} = parentMenuContext || {rootMenuTriggerState: contextProps.state};
-  if (!parentMenuContext) {
-    isSubmenu = false;
-  }
-  let completeProps = {
-    ...mergeProps(contextProps, props)
-  };
-  let domRef = useDOMRef(ref);
-  let [popoverContainer, setPopoverContainer] = useState<HTMLElement | null>(null);
-  let trayContainerRef = useRef<HTMLDivElement | null>(null);
-  let state = useTreeState(completeProps);
-  let submenuRef = useRef<HTMLDivElement>(null);
-  let {menuProps} = useMenu(completeProps, state, domRef);
-  let {styleProps} = useStyleProps(completeProps);
-  useSyncRef(contextProps, domRef);
-  let [leftOffset, setLeftOffset] = useState({left: 0});
-  let prevPopoverContainer = useRef<HTMLElement | null>(null);
-
-  useLayoutEffect(() => {
-    if (popoverContainer && prevPopoverContainer.current !== popoverContainer && leftOffset.left === 0) {
-      prevPopoverContainer.current = popoverContainer;
-      let {left} = popoverContainer.getBoundingClientRect();
-      setLeftOffset({left: -1 * left});
-    }
-  }, [leftOffset, popoverContainer]);
-
-  let menuLevel = contextProps.submenuLevel ?? -1;
-  let nextMenuLevelKey = rootMenuTriggerState?.expandedKeysStack[menuLevel + 1];
-  let hasOpenSubmenu = false;
-  if (nextMenuLevelKey != null) {
-    let nextMenuLevel = state.collection.getItem(nextMenuLevelKey);
-    hasOpenSubmenu = nextMenuLevel != null;
-  }
-
-  return (
-    <MenuStateContext.Provider value={{popoverContainer, trayContainerRef, menu: domRef, submenu: submenuRef, rootMenuTriggerState, state}}>
-      <div style={{height: hasOpenSubmenu ? '100%' : undefined}} ref={trayContainerRef} />
-      <FocusScope>
-        <TrayHeaderWrapper
-          onBackButtonPress={contextProps.onBackButtonPress}
-          hasOpenSubmenu={hasOpenSubmenu}
-          isSubmenu={isSubmenu}
-          parentMenuTreeState={parentMenuTreeState}
-          rootMenuTriggerState={rootMenuTriggerState}
-          menuRef={domRef}>
-          <div
-            {...menuProps}
-            style={mergeProps(styleProps.style, menuProps.style)}
-            ref={domRef}
-            className={
-              classNames(
-                styles,
-                'spectrum-Menu',
-                styleProps.className
-              )
-            }>
-            {[...state.collection].map(item => {
-              if (item.type === 'section') {
-                return (
-                  <MenuSection
-                    key={item.key}
-                    item={item}
-                    state={state} />
-                );
-              }
-
-              let menuItem = (
-                <MenuItem
-                  key={item.key}
-                  item={item}
-                  state={state} />
-              );
-
-              if (item.wrapper) {
-                menuItem = item.wrapper(menuItem);
-              }
-
-              return menuItem;
-            })}
-          </div>
-        </TrayHeaderWrapper>
-        {rootMenuTriggerState?.isOpen && <div ref={setPopoverContainer} style={{width: '100vw', position: 'absolute', top: -5, ...leftOffset}} /> }
-      </FocusScope>
-    </MenuStateContext.Provider>
-  );
-}) as <T>(props: SpectrumMenuProps<T> & {ref?: DOMRef<HTMLDivElement>}) => ReactElement;
-
-export function TrayHeaderWrapper(props: {
-  children: ReactNode,
-  isSubmenu?: boolean,
-  hasOpenSubmenu?: boolean,
-  parentMenuTreeState?: TreeState<any>,
-  rootMenuTriggerState?: RootMenuTriggerState,
-  onBackButtonPress?: (() => void),
-  wrapperKeyDown?: KeyboardEventHandler<HTMLDivElement> | undefined,
-  menuRef?: RefObject<HTMLDivElement | null>
-}): ReactNode {
-  let {children, isSubmenu, hasOpenSubmenu, parentMenuTreeState, rootMenuTriggerState, onBackButtonPress, wrapperKeyDown, menuRef} = props;
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
-  let lastKey = rootMenuTriggerState?.expandedKeysStack.slice(-1)[0];
-  let backButtonText = '';
-  if (lastKey != null) {
-    backButtonText = parentMenuTreeState?.collection.getItem(lastKey)?.textValue ?? '';
-  }
-  let backButtonLabel = stringFormatter.format('backButton', {
-    prevMenuButton: backButtonText ?? ''
-  });
-  let headingId = useSlotId();
-  let isMobile = useIsMobileDevice();
-  let {direction} = useLocale();
-
-  let [traySubmenuAnimation, setTraySubmenuAnimation] = useState('');
-  useLayoutEffect(() => {
-    if (!hasOpenSubmenu) {
-      setTraySubmenuAnimation('spectrum-TraySubmenu-enter');
-    }
-  }, [hasOpenSubmenu, isMobile]);
-
-  let timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  let handleBackButtonPress = () => {
-    setTraySubmenuAnimation('spectrum-TraySubmenu-exit');
-    timeoutRef.current = setTimeout(() => {
-      onBackButtonPress?.();
-    }, 220); // Matches transition duration
-  };
-
-  useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current);
-      }
-    };
-  }, []);
-
-  // When opening submenu in tray, focus the first item in the submenu after animation completes
-  // This fixes an issue with iOS VO where the closed submenu was getting focus
-  let focusTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    if (isMobile && isSubmenu && !hasOpenSubmenu && traySubmenuAnimation === 'spectrum-TraySubmenu-enter') {
-      focusTimeoutRef.current = setTimeout(() => {
-        let firstItem = menuRef?.current?.querySelector('[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]') as HTMLElement;
-        firstItem?.focus();
-      }, 220);
-    }
-    return () => {
-      if (focusTimeoutRef.current) {
-        clearTimeout(focusTimeoutRef.current);
-      }
-    };
-  }, [hasOpenSubmenu, isMobile, isSubmenu, menuRef, traySubmenuAnimation]);
-
-  return (
-    <>
-      <div
-        role={headingId ? 'dialog' : undefined}
-        aria-labelledby={headingId}
-        aria-hidden={isMobile && hasOpenSubmenu}
-        data-testid="menu-wrapper"
-        className={
-          classNames(
-            styles,
-            'spectrum-Menu-wrapper',
-            {
-              'spectrum-Menu-wrapper--isMobile': isMobile,
-              'is-expanded': hasOpenSubmenu,
-              [traySubmenuAnimation]: isMobile
-            }
-          )
-        }>
-        <div role="presentation" className={classNames(styles, 'spectrum-Submenu-wrapper', {'spectrum-Submenu-wrapper--isMobile': isMobile})} onKeyDown={wrapperKeyDown}>
-          {isMobile && isSubmenu && !hasOpenSubmenu && (
-            <div className={classNames(styles, 'spectrum-Submenu-headingWrapper')}>
-              <ActionButton
-                aria-label={backButtonLabel}
-                isQuiet
-                onPress={handleBackButtonPress}>
-                {/* We don't have a ArrowLeftSmall so make due with ArrowDownSmall and transforms */}
-                {direction === 'rtl' ? <ArrowDownSmall UNSAFE_style={{rotate: '270deg'}} /> : <ArrowDownSmall UNSAFE_style={{rotate: '90deg'}} />}
-              </ActionButton>
-              <h1 id={headingId} className={classNames(styles, 'spectrum-Submenu-heading')}>{backButtonText}</h1>
-            </div>
-          )}
-          {children}
-        </div>
-      </div>
-    </>
-  );
-}

package/src/MenuItem.tsx

@@ -1,159 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
-import ChevronLeft from '@spectrum-icons/workflow/ChevronLeft';
-import ChevronRight from '@spectrum-icons/workflow/ChevronRight';
-import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
-import {DOMAttributes, Node} from '@react-types/shared';
-import {FocusRing} from '@react-aria/focus';
-import {Grid} from '@react-spectrum/layout';
-import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {mergeRefs, useObjectRef, useSlotId} from '@react-aria/utils';
-import React, {JSX, useMemo, useRef} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {Text} from '@react-spectrum/text';
-import {TreeState} from '@react-stately/tree';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useMenuContext, useSubmenuTriggerContext} from './context';
-import {useMenuItem} from '@react-aria/menu';
-
-interface MenuItemProps<T> {
-  item: Node<T>,
-  state: TreeState<T>,
-  isVirtualized?: boolean
-}
-
-/** @private */
-export function MenuItem<T>(props: MenuItemProps<T>): JSX.Element {
-  let {
-    item,
-    state,
-    isVirtualized
-  } = props;
-  let {
-    closeOnSelect
-  } = useMenuContext();
-  let {
-    rendered,
-    key
-  } = item;
-
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/menu');
-  let {direction} = useLocale();
-
-  let submenuTriggerContext = useSubmenuTriggerContext();
-  let {triggerRef, ...submenuTriggerProps} = submenuTriggerContext || {};
-  let isSubmenuTrigger = !!submenuTriggerContext;
-  let isUnavailable;
-  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
-
-  if (isSubmenuTrigger) {
-    isUnavailable = submenuTriggerContext!.isUnavailable;
-  }
-
-  let isDisabled = state.disabledKeys.has(key);
-  let isContextualHelpTrigger = isSubmenuTrigger && isUnavailable !== undefined;
-  let isSelectable = (
-    (isContextualHelpTrigger ? !isUnavailable : !isSubmenuTrigger) &&
-    state.selectionManager.selectionMode !== 'none'
-  );
-  let isSelected = isSelectable && state.selectionManager.isSelected(key);
-  let itemref = useRef<any>(null);
-  let ref = useObjectRef(useMemo(() => mergeRefs(itemref, triggerRef), [itemref, triggerRef]));
-  let {
-    menuItemProps,
-    labelProps,
-    descriptionProps,
-    keyboardShortcutProps
-  } = useMenuItem(
-    {
-      isSelected,
-      isDisabled,
-      'aria-label': item['aria-label'],
-      key,
-      closeOnSelect,
-      isVirtualized,
-      ...submenuTriggerProps
-    },
-    state,
-    ref
-  );
-  let endId = useSlotId();
-  let endProps: DOMAttributes = {};
-  if (endId) {
-    endProps.id = endId;
-    menuItemProps['aria-describedby'] = [menuItemProps['aria-describedby'], endId].filter(Boolean).join(' ');
-  }
-
-  let contents = typeof rendered === 'string'
-    ? <Text>{rendered}</Text>
-    : rendered;
-
-  return (
-    <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
-      <ElementType
-        {...menuItemProps}
-        ref={ref}
-        className={classNames(
-          styles,
-          'spectrum-Menu-item',
-          {
-            'is-disabled': isDisabled,
-            'is-selected': isSelected,
-            'is-selectable': isSelectable,
-            'is-open': submenuTriggerProps.isOpen
-          }
-        )}>
-        <Grid
-          UNSAFE_className={
-            classNames(
-              styles,
-              'spectrum-Menu-itemGrid'
-            )
-          }>
-          <ClearSlots>
-            <SlotProvider
-              slots={{
-                text: {UNSAFE_className: styles['spectrum-Menu-itemLabel'], ...labelProps},
-                end: {UNSAFE_className: styles['spectrum-Menu-end'], ...endProps},
-                icon: {UNSAFE_className: styles['spectrum-Menu-icon'], size: 'S'},
-                description: {UNSAFE_className: styles['spectrum-Menu-description'], ...descriptionProps},
-                keyboard: {UNSAFE_className: styles['spectrum-Menu-keyboard'], ...keyboardShortcutProps},
-                chevron: {UNSAFE_className: styles['spectrum-Menu-chevron'], size: 'S'}
-              }}>
-              {contents}
-              {isSelected &&
-                <CheckmarkMedium
-                  slot="checkmark"
-                  UNSAFE_className={
-                    classNames(
-                      styles,
-                      'spectrum-Menu-checkmark'
-                    )
-                  } />
-              }
-              {
-                isUnavailable && <InfoOutline slot="end" size="XS" alignSelf="center" aria-label={stringFormatter.format('unavailable')} />
-              }
-              {
-                isUnavailable == null && isSubmenuTrigger && (direction === 'rtl' ? <ChevronLeft slot="chevron" /> : <ChevronRight slot="chevron" />)
-              }
-            </SlotProvider>
-          </ClearSlots>
-        </Grid>
-      </ElementType>
-    </FocusRing>
-  );
-}