@react-spectrum/menu 3.22.10 → 3.23.0

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>
-  );
-}

package/src/MenuSection.tsx

@@ -1,100 +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 {classNames} from '@react-spectrum/utils';
-import {getChildNodes} from '@react-stately/collections';
-import {MenuItem} from './MenuItem';
-import {Node} from '@react-types/shared';
-import React, {Fragment, JSX} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {TreeState} from '@react-stately/tree';
-import {useMenuSection} from '@react-aria/menu';
-import {useSeparator} from '@react-aria/separator';
-
-interface MenuSectionProps<T> {
-  item: Node<T>,
-  state: TreeState<T>
-}
-
-/** @private */
-export function MenuSection<T>(props: MenuSectionProps<T>): JSX.Element {
-  let {item, state} = props;
-  let {itemProps, headingProps, groupProps} = useMenuSection({
-    heading: item.rendered,
-    'aria-label': item['aria-label']
-  });
-
-  let {separatorProps} = useSeparator({
-    elementType: 'div'
-  });
-
-  let firstSectionKey = state.collection.getFirstKey();
-  let lastSectionKey = [...state.collection].filter(node => node.type === 'section').at(-1)?.key;
-  let sectionIsFirst = firstSectionKey === item.key && state.collection.getFirstKey() === firstSectionKey;
-  let lastKey = state.collection.getLastKey();
-  let sectionIsLast = lastSectionKey === item.key && lastKey != null && state.collection.getItem(lastKey)!.parentKey === lastSectionKey;
-
-  return (
-    <Fragment>
-      {item.key !== state.collection.getFirstKey() &&
-        <div
-          {...separatorProps}
-          className={classNames(
-            styles,
-            'spectrum-Menu-divider'
-          )} />
-      }
-      <div {...itemProps}>
-        {item.rendered &&
-          <span
-            {...headingProps}
-            className={
-              classNames(
-                styles,
-                'spectrum-Menu-sectionHeading'
-              )
-            }>
-            {item.rendered}
-          </span>
-        }
-        <div
-          {...groupProps}
-          className={
-            classNames(
-              styles,
-                'spectrum-Menu',
-              {
-                'spectrum-Menu-section--noHeading': item.rendered == null,
-                'spectrum-Menu-section--isFirst': sectionIsFirst,
-                'spectrum-Menu-section--isLast': sectionIsLast
-              }
-            )
-          }>
-          {[...getChildNodes(item, state.collection)].map(node => {
-            let item = (
-              <MenuItem
-                key={node.key}
-                item={node}
-                state={state} />
-            );
-
-            if (node.wrapper) {
-              item = node.wrapper(item);
-            }
-
-            return item;
-          })}
-        </div>
-      </div>
-    </Fragment>
-  );
-}

package/src/MenuTrigger.tsx

@@ -1,125 +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 {classNames, SlotProvider, unwrapDOMRef, useDOMRef, useIsMobileDevice} from '@react-spectrum/utils';
-import {DOMRef} from '@react-types/shared';
-import {MenuContext} from './context';
-import {Placement} from '@react-types/overlays';
-import {Popover, Tray} from '@react-spectrum/overlays';
-import {PressResponder, useInteractOutside} from '@react-aria/interactions';
-import React, {forwardRef, Fragment, useRef} from 'react';
-import {SpectrumMenuTriggerProps} from '@react-types/menu';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {useMenuTrigger} from '@react-aria/menu';
-import {useMenuTriggerState} from '@react-stately/menu';
-
-/**
- * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
- * linking the Menu's open state with the trigger's press state.
- */
-export const MenuTrigger = forwardRef(function MenuTrigger(props: SpectrumMenuTriggerProps, ref: DOMRef<HTMLElement>) {
-  let triggerRef = useRef<HTMLElement>(null);
-  let domRef = useDOMRef(ref);
-  let menuTriggerRef = domRef || triggerRef;
-  let menuRef = useRef<HTMLDivElement>(null);
-  let {
-    children,
-    align = 'start',
-    shouldFlip = true,
-    direction = 'bottom',
-    closeOnSelect,
-    trigger = 'press'
-  } = props;
-
-  let [menuTrigger, menu] = React.Children.toArray(children);
-  let state = useMenuTriggerState(props);
-
-  let {menuTriggerProps, menuProps} = useMenuTrigger({trigger}, state, menuTriggerRef);
-
-  let initialPlacement: Placement;
-  switch (direction) {
-    case 'left':
-    case 'right':
-    case 'start':
-    case 'end':
-      initialPlacement = `${direction} ${align === 'end' ? 'bottom' : 'top'}` as Placement;
-      break;
-    case 'bottom':
-    case 'top':
-    default:
-      initialPlacement = `${direction} ${align}` as Placement;
-  }
-
-  let isMobile = useIsMobileDevice();
-  let menuContext = {
-    ...menuProps,
-    ref: menuRef,
-    onClose: state.close,
-    closeOnSelect,
-    autoFocus: state.focusStrategy || true,
-    UNSAFE_style: isMobile ? {
-      width: '100%',
-      maxHeight: 'inherit'
-    } : undefined,
-    UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),
-    state
-  };
-
-  // Close when clicking outside the root menu when a submenu is open.
-  let rootOverlayRef = useRef(null);
-  let rootOverlayDomRef = unwrapDOMRef(rootOverlayRef);
-  useInteractOutside({
-    ref: rootOverlayDomRef,
-    onInteractOutside: () => {
-      state?.close();
-    },
-    isDisabled: !state.isOpen || state.expandedKeysStack.length === 0
-  });
-
-  // On small screen devices, the menu is rendered in a tray, otherwise a popover.
-  let overlay;
-  if (isMobile) {
-    overlay = (
-      <Tray state={state} isFixedHeight ref={rootOverlayRef}>
-        {menu}
-      </Tray>
-    );
-  } else {
-    overlay = (
-      <Popover
-        ref={rootOverlayRef}
-        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', filter: 'unset', borderWidth: '0px'}}
-        state={state}
-        triggerRef={menuTriggerRef}
-        scrollRef={menuRef}
-        placement={initialPlacement}
-        hideArrow
-        shouldFlip={shouldFlip}
-        shouldContainFocus>
-        {menu}
-      </Popover>
-    );
-  }
-
-  return (
-    <Fragment>
-      <SlotProvider slots={{actionButton: {holdAffordance: trigger === 'longPress'}}}>
-        <PressResponder {...menuTriggerProps} ref={menuTriggerRef} isPressed={state.isOpen}>
-          {menuTrigger}
-        </PressResponder>
-      </SlotProvider>
-      <MenuContext.Provider value={menuContext}>
-        {overlay}
-      </MenuContext.Provider>
-    </Fragment>
-  );
-});