@react-spectrum/s2 0.5.0 → 0.6.0

package/src/Divider.tsx

@@ -13,7 +13,7 @@
 import {ContextValue, Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -34,7 +34,7 @@ interface DividerSpectrumProps {
    */
   orientation?: 'horizontal' | 'vertical',
   /** The static color style to apply. Useful when the Divider appears over a color background. */
-  staticColor?: 'white' | 'black'
+  staticColor?: 'white' | 'black' | 'auto'
 }
 
 // TODO: allow overriding height (only when orientation is vertical)??
@@ -42,25 +42,18 @@ export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorPro
 
 export const DividerContext = createContext<ContextValue<DividerProps, DOMRefValue>>(null);
 
-export const divider = style<DividerSpectrumProps>({
+export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
+  ...staticColor(),
   alignSelf: 'stretch',
   backgroundColor: {
     default: 'gray-200',
     size: {
       L: 'gray-800'
     },
-    staticColor: {
-      white: {
-        default: 'transparent-white-200',
-        size: {
-          L: 'transparent-white-800'
-        }
-      },
-      black: {
-        default: 'transparent-black-200',
-        size: {
-          L: 'transparent-black-800'
-        }
+    isStaticColor: {
+      default: 'transparent-overlay-200',
+      size: {
+        L: 'transparent-overlay-800'
       }
     },
     forcedColors: 'ButtonBorder'
@@ -93,7 +86,11 @@ export const divider = style<DividerSpectrumProps>({
   }
 }, getAllowedOverrides());
 
-function Divider(props: DividerProps, ref: DOMRef) {
+/**
+ * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
+ * They can also be used to establish rhythm and hierarchy.
+ */
+export const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, DividerContext);
   let domRef = useDOMRef(ref);
 
@@ -105,14 +102,8 @@ function Divider(props: DividerProps, ref: DOMRef) {
       className={(props.UNSAFE_className || '') + divider({
         size: props.size || 'M',
         orientation: props.orientation || 'horizontal',
-        staticColor: props.staticColor
+        staticColor: props.staticColor,
+        isStaticColor: !!props.staticColor
       }, props.styles)} />
   );
-}
-
-/**
- * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
- * They can also be used to establish rhythm and hierarchy.
- */
-let _Divider = /*#__PURE__*/ forwardRef(Divider);
-export {_Divider as Divider};
+});

package/src/DropZone.tsx

@@ -89,7 +89,10 @@ const banner = style({
   padding: '[calc((self(minHeight))/1.5)]'
 });
 
-function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A drop zone is an area into which one or multiple objects can be dragged and dropped.
+ */
+export const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);
   let {
@@ -119,10 +122,4 @@ function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </RACDropZone>
   );
-}
-
-/**
- * A drop zone is an area into which one or multiple objects can be dragged and dropped.
- */
-let _DropZone = /*#__PURE__*/ forwardRef(DropZone);
-export {_DropZone as DropZone};
+});

package/src/Field.tsx

@@ -36,13 +36,13 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
   labelAlign?: Alignment,
   labelPosition?: 'top' | 'side',
   includeNecessityIndicatorInAccessibilityName?: boolean,
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   contextualHelp?: ReactNode,
   isQuiet?: boolean,
   children?: ReactNode
 }
 
-function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
+export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     isDisabled,
@@ -98,7 +98,7 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         {...labelProps}
         ref={domRef}
         style={UNSAFE_style}
-        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, staticColor}), props.styles)}>
+        className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>
         {props.children}
         {(isRequired || necessityIndicator === 'label') && (
           <span className={style({whiteSpace: 'nowrap'})}>
@@ -127,28 +127,27 @@ function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
         )}
       </Label>
       {contextualHelp && (
-        <CenterBaseline
-          styles={style({
-            display: 'inline-flex',
-            height: 0,
-            marginStart: 4
-          })}>
-          <ContextualHelpContext.Provider
-            value={{
-              id: contextualHelpId,
-              'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
-              size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
-            }}>
-            {contextualHelp}
-          </ContextualHelpContext.Provider>
-        </CenterBaseline>
+        <span className={style({whiteSpace: 'nowrap'})}>
+          &nbsp;
+          <CenterBaseline
+            styles={style({
+              display: 'inline-flex',
+              height: 0
+            })}>
+            <ContextualHelpContext.Provider
+              value={{
+                id: contextualHelpId,
+                'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,
+                size: (size === 'L' || size === 'XL') ? 'S' : 'XS'
+              }}>
+              {contextualHelp}
+            </ContextualHelpContext.Provider>
+          </CenterBaseline>
+        </span>
       )}
     </div>
   );
-}
-
-let _FieldLabel = forwardRef(FieldLabel);
-export {_FieldLabel as FieldLabel};
+});
 
 interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {
   size?: 'S' | 'M' | 'L' | 'XL',
@@ -193,7 +192,7 @@ const fieldGroupStyles = style({
   }
 });
 
-function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   return (
     <Group
       ref={ref}
@@ -217,14 +216,11 @@ function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {
         props.styles
       )} />
   );
-}
-
-let _FieldGroup = forwardRef(FieldGroup);
-export {_FieldGroup as FieldGroup};
+});
 
 export interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}
 
-function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+export const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;
   return (
     <RACInput
@@ -247,10 +243,7 @@ function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
         truncate: true
       }), styles)} />
   );
-}
-
-let _Input = forwardRef(Input);
-export {_Input as Input};
+});
 
 interface HelpTextProps extends FieldErrorProps {
   size?: 'S' | 'M' | 'L' | 'XL',

package/src/Form.tsx

@@ -62,7 +62,10 @@ export function useFormProps<T extends FormStyleProps>(props: T): T {
   }, [ctx, props, isSkeleton]);
 }
 
-function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
+/**
+ * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
+ */
+export const Form = /*#__PURE__*/ forwardRef(function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
   let {
     labelPosition = 'top',
     labelAlign,
@@ -114,10 +117,4 @@ function Form(props: FormProps, ref: DOMRef<HTMLFormElement>) {
       </FormContext.Provider>
     </RACForm>
   );
-}
-
-/**
- * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
- */
-let _Form = /*#__PURE__*/ forwardRef(Form);
-export {_Form as Form};
+});

package/src/FullscreenDialog.tsx

@@ -117,7 +117,10 @@ export const dialogInner = style({
   overflow: 'auto'
 });
 
-function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
+/**
+ * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
+ */
+export const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
   let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
@@ -145,11 +148,5 @@ function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
       </RACDialog>
     </Modal>
   );
-}
-
-/**
- * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
- */
-let _FullscreenDialog = forwardRef(FullscreenDialog);
-export {_FullscreenDialog as FullscreenDialog};
+});
 

package/src/IllustratedMessage.tsx

@@ -157,7 +157,11 @@ interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMe
 
 export const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * An IllustratedMessage displays an illustration and a message, usually
+ * for an empty state or an error page.
+ */
+export const IllustratedMessage = /*#__PURE__*/ forwardRef(function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);
   let domRef = useDOMRef(ref);
   let {
@@ -191,11 +195,4 @@ function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRe
       </Provider>
     </div>
   );
-}
-
-/**
- * An IllustratedMessage displays an illustration and a message, usually
- * for an empty state or an error page.
- */
-let _IllustratedMessage = /*#__PURE__*/ forwardRef(IllustratedMessage);
-export {_IllustratedMessage as IllustratedMessage};
+});

package/src/Image.tsx

@@ -77,7 +77,7 @@ function createState(src: string): State {
     startTime: Date.now(),
     loadTime: 0
   };
-} 
+}
 
 function reducer(state: State, action: Action): State {
   switch (action.type) {
@@ -130,7 +130,7 @@ const imgStyles = style({
   transitionDuration: 500
 });
 
-function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
+export const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
   [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
 
   let {
@@ -236,7 +236,4 @@ function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {
         )}
     </div>
   ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);
-}
-
-const _Image = forwardRef(Image);
-export {_Image as Image};
+});

package/src/InlineAlert.tsx

@@ -60,7 +60,6 @@ const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
   display: 'inline-block',
   position: 'relative',
   boxSizing: 'border-box',
-  maxWidth: 320,
   padding: 24,
   borderRadius: 'lg',
   borderStyle: 'solid',
@@ -209,7 +208,11 @@ const content = style({
   }
 });
 
-function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Inline alerts display a non-modal message associated with objects in a view.
+ * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
+ */
+export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);
   let {
@@ -267,11 +270,4 @@ function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
       </div>
     </div>
   );
-}
-
-/**
- * Inline alerts display a non-modal message associated with objects in a view.
- * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
- */
-const _InlineAlert = /*#__PURE__*/ forwardRef(InlineAlert);
-export {_InlineAlert as InlineAlert};
+});

package/src/Link.tsx

@@ -14,7 +14,7 @@ import {ContextValue, LinkRenderProps, Link as RACLink, LinkProps as RACLinkProp
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 import {SkeletonContext, useSkeletonText} from './Skeleton';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
@@ -27,7 +27,7 @@ interface LinkStyleProps {
    */
   variant?: 'primary' | 'secondary',
   /** The static color style to apply. Useful when the link appears over a color background. */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /** Whether the link is on its own vs inside a longer string of text. */
   isStandalone?: boolean,
   /** Whether the link should be displayed with a quiet style. */
@@ -40,8 +40,9 @@ export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className'
 
 export const LinkContext = createContext<ContextValue<LinkProps, FocusableRefValue<HTMLAnchorElement>>>(null);
 
-const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
+const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({
   ...focusRing(),
+  ...staticColor(),
   borderRadius: 'sm',
   font: {
     isStandalone: 'ui'
@@ -51,10 +52,7 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
       primary: 'accent',
       secondary: 'neutral' // TODO: should there be an option to inherit from the paragraph? What about hover states?
     },
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'LinkText'
   },
   transition: 'default',
@@ -74,16 +72,17 @@ const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean}>({
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   },
   disableTapHighlight: true
 }, getAllowedOverrides());
 
-function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
+/**
+ * Links allow users to navigate to a different location.
+ * They can be presented inline inside a paragraph or as standalone text.
+ */
+export const Link = /*#__PURE__*/ forwardRef(function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, LinkContext);
   let {variant = 'primary', staticColor, isQuiet, isStandalone, UNSAFE_style, UNSAFE_className = '', styles, children} = props;
 
@@ -103,15 +102,8 @@ function Link(props: LinkProps, ref: FocusableRef<HTMLAnchorElement>) {
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
+      className={renderProps => UNSAFE_className + link({...renderProps, variant, staticColor, isStaticColor: !!staticColor, isQuiet, isStandalone, isSkeleton}, styles)}>
       {children}
     </RACLink>
   );
-}
-
-/**
- * Links allow users to navigate to a different location.
- * They can be presented inline inside a paragraph or as standalone text.
- */
-const _Link = /*#__PURE__*/ forwardRef(Link);
-export {_Link as Link};
+});

package/src/Menu.tsx

@@ -32,9 +32,9 @@ import {centerBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronRightIcon from '../ui-icons/Chevron';
-import {createContext, forwardRef, JSX, ReactNode, useContext, useRef} from 'react';
+import {createContext, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
 import {divider} from './Divider';
-import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {DOMRef, DOMRefValue, PressEvent} from '@react-types/shared';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, KeyboardContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon'; // chevron right removed??
@@ -45,6 +45,7 @@ import {Placement, useLocale} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
+import {useGlobalListeners} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 // viewbox on LinkOut is super weird just because i copied the icon from designs...
 // need to strip id's from icons
@@ -80,22 +81,26 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
   /**
    * The contents of the collection.
    */
-  children?: ReactNode | ((item: T) => ReactNode)
+  children?: ReactNode | ((item: T) => ReactNode),
+  /** Hides the default link out icons on menu items that open links in a new tab. */
+  hideLinkOutIcon?: boolean
 }
 
 export const MenuContext = createContext<ContextValue<MenuProps<any>, DOMRefValue<HTMLDivElement>>>(null);
 
+const menuItemGrid = {
+  size: {
+    S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
+    M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
+    L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],
+    XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]
+  }
+} as const;
+
 export let menu = style({
   outlineStyle: 'none',
   display: 'grid',
-  gridTemplateColumns: {
-    size: {
-      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(24)],
-      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],
-      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(40)],
-      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(48)]
-    }
-  },
+  gridTemplateColumns: menuItemGrid,
   boxSizing: 'border-box',
   maxHeight: '[inherit]',
   overflow: {
@@ -120,7 +125,7 @@ export let section = style({
     '. checkmark icon label       value keyboard descriptor .',
     '. .         .    description .     .        .          .'
   ],
-  gridTemplateColumns: 'subgrid'
+  gridTemplateColumns: menuItemGrid
 });
 
 export let sectionHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
@@ -309,10 +314,18 @@ let descriptor = style({
   }
 });
 
-let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean}>({size: 'M', isSubmenu: false});
+let InternalMenuContext = createContext<{size: 'S' | 'M' | 'L' | 'XL', isSubmenu: boolean, hideLinkOutIcon: boolean}>({
+  size: 'M',
+  isSubmenu: false,
+  hideLinkOutIcon: false
+});
+
 let InternalMenuTriggerContext = createContext<Omit<MenuTriggerProps, 'children'> | null>(null);
 
-function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Menus display a list of actions or options that a user can choose.
+ */
+export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MenuContext);
   let {isSubmenu, size: ctxSize} = useContext(InternalMenuContext);
   let {
@@ -320,7 +333,8 @@ function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>
     size = ctxSize,
     UNSAFE_style,
     UNSAFE_className,
-    styles
+    styles,
+    hideLinkOutIcon = false
   } = props;
   let ctx = useContext(InternalMenuTriggerContext);
   let {align = 'start', direction = 'bottom', shouldFlip} = ctx ?? {};
@@ -345,7 +359,7 @@ function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>
   }
 
   let content = (
-    <InternalMenuContext.Provider value={{size, isSubmenu: true}}>
+    <InternalMenuContext.Provider value={{size, isSubmenu: true, hideLinkOutIcon}}>
       <Provider
         values={[
           [HeaderContext, {styles: sectionHeader({size})}],
@@ -386,13 +400,7 @@ function Menu<T extends object>(props: MenuProps<T>, ref: DOMRef<HTMLDivElement>
   }
 
   return content;
-}
-
-/**
- * Menus display a list of actions or options that a user can choose.
- */
-let _Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(Menu);
-export {_Menu as Menu};
+});
 
 export function Divider(props: SeparatorProps) {
   return (
@@ -402,7 +410,7 @@ export function Divider(props: SeparatorProps) {
         divider({
           size: 'M',
           orientation: 'horizontal',
-          staticColor: undefined
+          isStaticColor: false
         }), style({
           display: {
             default: 'grid',
@@ -419,11 +427,12 @@ export function Divider(props: SeparatorProps) {
 export interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}
 export function MenuSection<T extends object>(props: MenuSectionProps<T>) {
   // remember, context doesn't work if it's around Section nor inside
+  let {size} = useContext(InternalMenuContext);
   return (
     <>
       <AriaMenuSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaMenuSection>
       <Divider />
@@ -456,7 +465,7 @@ export function MenuItem(props: MenuItemProps) {
   let ref = useRef(null);
   let isLink = props.href != null;
   let isLinkOut = isLink && props.target === '_blank';
-  let {size} = useContext(InternalMenuContext);
+  let {size, hideLinkOutIcon} = useContext(InternalMenuContext);
   let textValue = props.textValue || (typeof props.children === 'string' ? props.children : undefined);
   let {direction} = useLocale();
   return (
@@ -489,20 +498,32 @@ export function MenuItem(props: MenuItemProps) {
                 [KeyboardContext, {styles: keyboard({size, isDisabled: renderProps.isDisabled})}],
                 [ImageContext, {styles: image({size})}]
               ]}>
-              {renderProps.selectionMode === 'single' && !isLink && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
-              {renderProps.selectionMode === 'multiple' && !isLink && !renderProps.hasSubmenu && (
+              {renderProps.selectionMode === 'single' && !renderProps.hasSubmenu && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+              {renderProps.selectionMode === 'multiple' && !renderProps.hasSubmenu && (
                 <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>
                   <CheckmarkIcon size={size} className={iconStyles} />
                 </div>
               )}
               {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
-              {isLinkOut && <LinkOutIcon size={linkIconSize[size]} className={descriptor} />}
+              {isLinkOut && !hideLinkOutIcon && (
+                <div slot="descriptor" className={descriptor}>
+                  <LinkOutIcon
+                    size={linkIconSize[size]}
+                    className={style({
+                      scaleX: {
+                        direction: {
+                          rtl: -1
+                        }
+                      }
+                    })({direction})} />
+                </div>
+              )}
               {renderProps.hasSubmenu && (
                 <div slot="descriptor" className={descriptor}>
                   <ChevronRightIcon
                     size={size}
                     className={style({
-                      scale: {
+                      scaleX: {
                         direction: {
                           rtl: -1
                         }
@@ -523,6 +544,23 @@ export function MenuItem(props: MenuItemProps) {
  * linking the Menu's open state with the trigger's press state.
  */
 function MenuTrigger(props: MenuTriggerProps) {
+  // RAC sets isPressed via PressResponder when the menu is open.
+  // We don't want press scaling to appear to get "stuck", so override this.
+  // For mouse interactions, menus open on press start. When the popover underlay appears
+  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
+  // to occur. We override this by listening for pointerup on the document ourselves.
+  let [isPressed, setPressed] = useState(false);
+  let {addGlobalListener} = useGlobalListeners();
+  let onPressStart = (e: PressEvent) => {
+    if (e.pointerType !== 'mouse') {
+      return;
+    }
+    setPressed(true);
+    addGlobalListener(document, 'pointerup', () => {
+      setPressed(false);
+    }, {once: true, capture: true});
+  };
+
   return (
     <InternalMenuTriggerContext.Provider
       value={{
@@ -531,9 +569,7 @@ function MenuTrigger(props: MenuTriggerProps) {
         shouldFlip: props.shouldFlip
       }}>
       <AriaMenuTrigger {...props}>
-        {/* RAC sets isPressed via PressResponder when the menu is open.
-            We don't want press scaling to appear to get "stuck", so override this. */}
-        <PressResponder isPressed={false}>
+        <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
           {props.children}
         </PressResponder>
       </AriaMenuTrigger>