@react-spectrum/menu 3.22.10 → 3.23.0

package/src/Popover.tsx

@@ -1,240 +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 {AriaPopoverProps, DismissButton, PopoverAria} from '@react-aria/overlays';
-import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {DOMRef, RefObject, StyleProps} from '@react-types/shared';
-import {FocusWithinProps, useFocusWithin} from '@react-aria/interactions';
-import {mergeProps, useLayoutEffect, useObjectRef} from '@react-aria/utils';
-import {Overlay} from '@react-spectrum/overlays';
-import {OverlayTriggerState} from '@react-stately/overlays';
-import overrideStyles from './overlays.css';
-import React, {ForwardedRef, forwardRef, ReactNode, useRef, useState} from 'react';
-import styles from '@adobe/spectrum-css-temp/components/popover/vars.css';
-import {Underlay} from './Underlay';
-import {usePopover} from './usePopover';
-
-interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef' | 'maxHeight'>, FocusWithinProps, StyleProps {
-  children: ReactNode,
-  hideArrow?: boolean,
-  state: OverlayTriggerState,
-  shouldContainFocus?: boolean,
-  onEntering?: () => void,
-  onEnter?: () => void,
-  onEntered?: () => void,
-  onExiting?: () => void,
-  onExited?: () => void,
-  onExit?: () => void,
-  container?: HTMLElement,
-  disableFocusManagement?: boolean,
-  enableBothDismissButtons?: boolean,
-  onDismissButtonPress?: () => void
-}
-
-interface PopoverWrapperProps extends PopoverProps, FocusWithinProps {
-  isOpen?: boolean,
-  wrapperRef: RefObject<HTMLDivElement | null>
-}
-
-interface ArrowProps {
-  arrowProps: PopoverAria['arrowProps'],
-  isLandscape: boolean,
-  arrowRef?: RefObject<SVGSVGElement | null>,
-  primary: number,
-  secondary: number,
-  borderDiagonal: number
-}
-
-/**
- * Arrow placement can be done pointing right or down because those paths start at 0, x or y. Because the
- * other two don't, they start at a fractional pixel value, it introduces rounding differences between browsers and
- * between display types (retina with subpixels vs not retina). By flipping them with CSS we can ensure that
- * the path always starts at 0 so that it perfectly overlaps the popover's border.
- * See bottom of file for more explanation.
- */
-let arrowPlacement = {
-  left: 'right',
-  right: 'right',
-  top: 'bottom',
-  bottom: 'bottom'
-};
-
-export const Popover = forwardRef(function Popover(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
-  let {
-    children,
-    state,
-    ...otherProps
-  } = props;
-  let domRef = useDOMRef(ref);
-  let wrapperRef = useRef<HTMLDivElement>(null);
-
-  return (
-    <Overlay {...otherProps} isOpen={state.isOpen} nodeRef={wrapperRef}>
-      <PopoverWrapper ref={domRef} {...props} wrapperRef={wrapperRef}>
-        {children}
-      </PopoverWrapper>
-    </Overlay>
-  );
-});
-
-const PopoverWrapper = forwardRef((props: PopoverWrapperProps, ref: ForwardedRef<HTMLDivElement | null>) => {
-  let {
-    children,
-    isOpen,
-    hideArrow,
-    isNonModal,
-    enableBothDismissButtons,
-    state,
-    wrapperRef,
-    onDismissButtonPress = () => state.close()
-  } = props;
-  let {styleProps} = useStyleProps(props);
-  let objRef = useObjectRef(ref);
-
-  let {size, borderWidth, arrowRef} = useArrowSize();
-  const borderRadius = usePopoverBorderRadius(objRef);
-  let borderDiagonal = borderWidth * Math.SQRT2;
-  let primary = size + borderDiagonal;
-  let secondary = primary * 2;
-  let {
-    popoverProps,
-    arrowProps,
-    underlayProps,
-    placement
-  } = usePopover({
-    ...props,
-    popoverRef: objRef,
-    maxHeight: undefined,
-    arrowSize: hideArrow ? 0 : secondary,
-    arrowBoundaryOffset: borderRadius
-  }, state);
-  let {focusWithinProps} = useFocusWithin(props);
-
-  // Attach Transition's nodeRef to outermost wrapper for node.reflow: https://github.com/reactjs/react-transition-group/blob/c89f807067b32eea6f68fd6c622190d88ced82e2/src/Transition.js#L231
-  return (
-    <div ref={wrapperRef}>
-      {!isNonModal && <Underlay isTransparent {...mergeProps(underlayProps)} isOpen={isOpen} /> }
-      <div
-        {...styleProps}
-        {...mergeProps(popoverProps, focusWithinProps)}
-        style={{
-          ...styleProps.style,
-          ...popoverProps.style
-        }}
-        ref={objRef}
-        className={
-          classNames(
-            styles,
-            'spectrum-Popover',
-            `spectrum-Popover--${placement}`,
-            {
-              'spectrum-Popover--withTip': !hideArrow,
-              'is-open': isOpen,
-              [`is-open--${placement}`]: isOpen
-            },
-            classNames(
-              overrideStyles,
-              'spectrum-Popover',
-              'react-spectrum-Popover'
-            ),
-            styleProps.className
-          )
-        }
-        role="presentation"
-        data-testid="popover">
-        {(!isNonModal || enableBothDismissButtons) && <DismissButton onDismiss={onDismissButtonPress} />}
-        {children}
-        {hideArrow ? null : (
-          <Arrow
-            arrowProps={arrowProps}
-            isLandscape={placement != null ? arrowPlacement[placement] === 'bottom' : false}
-            arrowRef={arrowRef}
-            primary={primary}
-            secondary={secondary}
-            borderDiagonal={borderDiagonal} />
-        )}
-        <DismissButton onDismiss={onDismissButtonPress} />
-      </div>
-    </div>
-  );
-});
-
-function usePopoverBorderRadius(popoverRef: RefObject<HTMLDivElement | null>) {
-  let [borderRadius, setBorderRadius] = useState(0);
-  useLayoutEffect(() => {
-    if (popoverRef.current) {
-      let spectrumBorderRadius = window.getComputedStyle(popoverRef.current).borderRadius;
-      if (spectrumBorderRadius !== '') {
-        setBorderRadius(parseInt(spectrumBorderRadius, 10));
-      }
-    }
-  }, [popoverRef]);
-  return borderRadius;
-}
-
-function useArrowSize() {
-  let [size, setSize] = useState(20);
-  let [borderWidth, setBorderWidth] = useState(1);
-  let arrowRef = useRef<SVGSVGElement>(null);
-  // get the css value for the tip size and divide it by 2 for this arrow implementation
-  useLayoutEffect(() => {
-    if (arrowRef.current) {
-      let spectrumTipWidth = window.getComputedStyle(arrowRef.current)
-        .getPropertyValue('--spectrum-popover-tip-size');
-      if (spectrumTipWidth !== '') {
-        setSize(parseInt(spectrumTipWidth, 10) / 2);
-      }
-
-      let spectrumBorderWidth = window.getComputedStyle(arrowRef.current)
-        .getPropertyValue('--spectrum-popover-tip-borderWidth');
-      if (spectrumBorderWidth !== '') {
-        setBorderWidth(parseInt(spectrumBorderWidth, 10));
-      }
-    }
-  }, []);
-  return {size, borderWidth, arrowRef};
-}
-
-function Arrow(props: ArrowProps) {
-  let {primary, secondary, isLandscape, arrowProps, borderDiagonal, arrowRef} = props;
-  let halfBorderDiagonal = borderDiagonal / 2;
-
-  let primaryStart = 0;
-  let primaryEnd = primary - halfBorderDiagonal;
-
-  let secondaryStart = halfBorderDiagonal;
-  let secondaryMiddle = secondary / 2;
-  let secondaryEnd = secondary - halfBorderDiagonal;
-
-  let pathData = isLandscape ? [
-    'M', secondaryStart, primaryStart,
-    'L', secondaryMiddle, primaryEnd,
-    'L', secondaryEnd, primaryStart
-  ] : [
-    'M', primaryStart, secondaryStart,
-    'L', primaryEnd, secondaryMiddle,
-    'L', primaryStart, secondaryEnd
-  ];
-
-  /* use ceil because the svg needs to always accommodate the path inside it */
-  return (
-    <svg
-      xmlns="http://www.w3.org/svg/2000"
-      width={Math.ceil(isLandscape ? secondary : primary)}
-      height={Math.ceil(isLandscape ? primary : secondary)}
-      className={classNames(styles, 'spectrum-Popover-tip')}
-      ref={arrowRef}
-      {...arrowProps}>
-      <path className={classNames(styles, 'spectrum-Popover-tip-triangle')} d={pathData.join(' ')} />
-    </svg>
-  );
-}

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 {Key} from '@react-types/shared';
-import {MenuContext, SubmenuTriggerContext, useMenuStateContext} from './context';
-import {mergeProps, nodeContains} from '@react-aria/utils';
-import {Popover} from './Popover';
-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 && !nodeContains(parentMenuRef.current, document.activeElement)) {
-      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/Underlay.tsx

@@ -1,43 +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 {isScrollable} from '@react-aria/utils';
-import React, {JSX} from 'react';
-import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
-
-interface UnderlayProps {
-  isOpen?: boolean,
-  isTransparent?: boolean
-}
-
-export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {
-  let pageHeight: number | undefined = undefined;
-  if (typeof document !== 'undefined') {
-    let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
-    // Prevent Firefox from adding scrollbars when the page has a fractional height.
-    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
-    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
-  }
-
-  return (
-    <div
-      data-testid="underlay"
-      {...otherProps}
-      // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
-      style={{height: pageHeight}}
-      className={classNames(underlayStyles, 'spectrum-Underlay', {
-        'is-open': isOpen,
-        'spectrum-Underlay--transparent': isTransparent
-      })} />
-  );
-}