@react-spectrum/menu 3.22.11 → 3.23.0

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

package/src/SubmenuTrigger.tsx

@@ -1,154 +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, useIsMobileDevice} from '@react-spectrum/utils';
-import {isFocusWithin, mergeProps} from '@react-aria/utils';
-import {Key} from '@react-types/shared';
-import {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';
-import {Popover} from '@react-spectrum/overlays';
-import React, {type JSX, ReactElement, useRef} from 'react';
-import ReactDOM from 'react-dom';
-import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
-import {useLocale} from '@react-aria/i18n';
-import {useSubmenuTrigger} from '@react-aria/menu';
-import {useSubmenuTriggerState} from '@react-stately/menu';
-
-interface SubmenuTriggerProps {
-  /**
-   * The contents of the SubmenuTrigger - an Item and a Menu.
-   */
-  children: ReactElement<any>[],
-  targetKey: Key
-}
-
-export interface SpectrumSubmenuTriggerProps extends Omit<SubmenuTriggerProps, 'targetKey'> {}
-
-function SubmenuTrigger(props: SubmenuTriggerProps) {
-  let triggerRef = useRef<HTMLDivElement>(null);
-  let {
-    children,
-    targetKey
-  } = props;
-
-  let [menuTrigger, menu] = React.Children.toArray(children);
-  let {popoverContainer, trayContainerRef, menu: parentMenuRef, submenu: menuRef, rootMenuTriggerState} = useMenuStateContext()!;
-  let submenuTriggerState = useSubmenuTriggerState({triggerKey: targetKey}, rootMenuTriggerState!);
-  let {submenuTriggerProps, submenuProps, popoverProps} = useSubmenuTrigger({
-    parentMenuRef,
-    submenuRef: menuRef
-  }, submenuTriggerState, triggerRef);
-  let isMobile = useIsMobileDevice();
-  let onBackButtonPress = () => {
-    submenuTriggerState.close();
-    if (parentMenuRef.current && !isFocusWithin(parentMenuRef.current)) {
-      parentMenuRef.current.focus();
-    }
-  };
-
-  let {direction} = useLocale();
-  let mobileSubmenuKeyDown = (e: KeyboardEvent) => {
-    switch (e.key) {
-      case 'ArrowLeft':
-        if (direction === 'ltr') {
-          triggerRef.current?.focus();
-        }
-        break;
-      case 'ArrowRight':
-        if (direction === 'rtl') {
-          triggerRef.current?.focus();
-        }
-        break;
-    }
-  };
-
-  let overlay;
-
-  if (isMobile)  {
-    delete submenuTriggerProps.onBlur;
-    delete submenuTriggerProps.onHoverChange;
-    submenuProps.autoFocus ??= true;
-    if (trayContainerRef.current && submenuTriggerState.isOpen) {
-      overlay = ReactDOM.createPortal(menu, trayContainerRef.current);
-    }
-  } else {
-    let onDismissButtonPress = () => {
-      submenuTriggerState.close();
-      parentMenuRef.current?.focus();
-    };
-
-    overlay = (
-      <Popover
-        {...popoverProps}
-        onDismissButtonPress={onDismissButtonPress}
-        UNSAFE_className={classNames(styles, 'spectrum-Submenu-popover')}
-        container={popoverContainer!}
-        containerPadding={0}
-        enableBothDismissButtons
-        UNSAFE_style={{clipPath: 'unset', overflow: 'visible', borderWidth: '0px'}}
-        state={submenuTriggerState}
-        triggerRef={triggerRef}
-        scrollRef={menuRef}
-        placement="end top"
-        hideArrow>
-        {menu}
-      </Popover>
-    );
-  }
-
-  let menuContext = {
-    ...mergeProps(submenuProps, {
-      ref: menuRef,
-      UNSAFE_style: isMobile ? {
-        width: '100%',
-        maxHeight: 'inherit'
-      } : undefined,
-      UNSAFE_className: classNames(styles, {'spectrum-Menu-popover': !isMobile}),
-      ...(isMobile && {
-        onBackButtonPress,
-        onKeyDown: mobileSubmenuKeyDown
-      })
-    })
-  };
-
-  return (
-    <>
-      <SubmenuTriggerContext.Provider value={{triggerRef, ...submenuTriggerProps}}>{menuTrigger}</SubmenuTriggerContext.Provider>
-      <MenuContext.Provider value={menuContext}>
-        {overlay}
-      </MenuContext.Provider>
-    </>
-  );
-}
-
-SubmenuTrigger.getCollectionNode = function* (props: SpectrumSubmenuTriggerProps) {
-  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) => (
-      <SubmenuTrigger key={element.key} targetKey={element.key} {...props}>
-        {element}
-        {content}
-      </SubmenuTrigger>
-    )
-  };
-};
-
-let _SubmenuTrigger = SubmenuTrigger as unknown as (props: SpectrumSubmenuTriggerProps) => JSX.Element;
-export {_SubmenuTrigger as SubmenuTrigger};

package/src/context.ts

@@ -1,63 +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 {DOMProps, FocusStrategy, HoverEvents, KeyboardEvents, PressEvents, RefObject} from '@react-types/shared';
-import React, {HTMLAttributes, useContext} from 'react';
-import {RootMenuTriggerState} from '@react-stately/menu';
-import {TreeState} from '@react-stately/tree';
-
-export interface MenuContextValue extends Omit<HTMLAttributes<HTMLElement>, 'autoFocus' | 'onKeyDown'>, Pick<KeyboardEvents, 'onKeyDown'> {
-  onClose?: () => void,
-  closeOnSelect?: boolean,
-  shouldFocusWrap?: boolean,
-  autoFocus?: boolean | FocusStrategy,
-  ref?: RefObject<HTMLDivElement | null>,
-  state?: RootMenuTriggerState,
-  onBackButtonPress?: () => void,
-  submenuLevel?: number
-}
-
-export const MenuContext = React.createContext<MenuContextValue>({});
-
-export function useMenuContext(): MenuContextValue {
-  return useContext(MenuContext);
-}
-
-export interface SubmenuTriggerContextValue extends DOMProps, Pick<PressEvents, 'onPressStart' | 'onPress'>, Pick<HoverEvents, 'onHoverChange'>, Pick<KeyboardEvents, 'onKeyDown'> {
-  isUnavailable?: boolean,
-  triggerRef?: RefObject<HTMLElement | null>,
-  'aria-expanded'?: boolean | 'true' | 'false',
-  'aria-controls'?: string,
-  'aria-haspopup'?: 'dialog' | 'menu',
-  isOpen?: boolean
-}
-
-export const SubmenuTriggerContext = React.createContext<SubmenuTriggerContextValue | undefined>(undefined);
-
-export function useSubmenuTriggerContext(): SubmenuTriggerContextValue | undefined {
-  return useContext(SubmenuTriggerContext);
-}
-
-export interface MenuStateContextValue<T> {
-  state: TreeState<T>,
-  popoverContainer: HTMLElement | null,
-  trayContainerRef: RefObject<HTMLElement | null>,
-  menu: RefObject<HTMLDivElement | null>,
-  submenu: RefObject<HTMLDivElement | null>,
-  rootMenuTriggerState?: RootMenuTriggerState
-}
-
-export const MenuStateContext = React.createContext<MenuStateContextValue<any> | undefined>(undefined);
-
-export function useMenuStateContext(): MenuStateContextValue<any> | undefined {
-  return useContext(MenuStateContext);
-}

package/src/overlays.css

@@ -1,32 +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.
- */
-
-.spectrum-Popover {
-  /* This makes the contents of popovers focusable immediately, without waiting
-     a frame for animations to start. */
-  &.react-spectrum-Popover {
-    visibility: visible;
-  }
-
-  .spectrum-Dialog-content {
-    max-height: initial;
-  }
-}
-
-.spectrum-Modal-wrapper.react-spectrum-Modal-wrapper,
-.spectrum-Modal.react-spectrum-Modal {
-  visibility: visible;
-}
-
-.spectrum-Tray.react-spectrum-Tray {
-  visibility: visible;
-}

package/src/useCloseOnScroll.ts

@@ -1,65 +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 {getEventTarget, nodeContains} from '@react-aria/utils';
-import {RefObject} from '@react-types/shared';
-import {useEffect} from 'react';
-
-// This behavior moved from useOverlayTrigger to useOverlayPosition.
-// For backward compatibility, where useOverlayTrigger handled hiding the popover on close,
-// it sets a close function here mapped from the trigger element. This way we can avoid
-// forcing users to pass an onClose function to useOverlayPosition which could be considered
-// a breaking change.
-export const onCloseMap: WeakMap<Element, () => void> = new WeakMap();
-
-interface CloseOnScrollOptions {
-  triggerRef: RefObject<Element | null>,
-  isOpen?: boolean,
-  onClose?: (() => void) | null
-}
-
-/** @private */
-export function useCloseOnScroll(opts: CloseOnScrollOptions): void {
-  let {triggerRef, isOpen, onClose} = opts;
-
-  useEffect(() => {
-    if (!isOpen || onClose === null) {
-      return;
-    }
-
-    let onScroll = (e: Event) => {
-      // Ignore if scrolling an scrollable region outside the trigger's tree.
-      let target = getEventTarget(e);
-      // window is not a Node and doesn't have contain, but window contains everything
-      if (!triggerRef.current || ((target instanceof Node) && !nodeContains(target, triggerRef.current))) {
-        return;
-      }
-
-      // Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
-      // such as in a combobox. Clicking the dropdown button places focus on the input, and if the
-      // text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
-      if (getEventTarget(e) instanceof HTMLInputElement || getEventTarget(e) instanceof HTMLTextAreaElement) {
-        return;
-      }
-
-      let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);
-      if (onCloseHandler) {
-        onCloseHandler();
-      }
-    };
-
-    window.addEventListener('scroll', onScroll, true);
-    return () => {
-      window.removeEventListener('scroll', onScroll, true);
-    };
-  }, [isOpen, onClose, triggerRef]);
-}