@react-spectrum/s2 0.5.0 → 0.7.0

package/src/Menu.tsx

@@ -22,6 +22,7 @@ import {
   SubmenuTrigger as AriaSubmenuTrigger,
   SubmenuTriggerProps as AriaSubmenuTriggerProps,
   ContextValue,
+  DEFAULT_SLOT,
   Provider,
   Separator,
   SeparatorProps
@@ -32,9 +33,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 +46,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
@@ -70,7 +72,7 @@ export interface MenuTriggerProps extends AriaMenuTriggerProps {
   shouldFlip?: boolean
 }
 
-export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies'>, StyleProps {
+export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style' | 'className' | 'dependencies' | 'renderEmptyState'>, StyleProps {
   /**
    * The size of the Menu.
    *
@@ -80,24 +82,29 @@ 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);
+export const MenuContext = createContext<ContextValue<Partial<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]',
+  width: 'full',
   overflow: {
     isPopover: 'auto'
   },
@@ -108,7 +115,8 @@ export let menu = style({
     isPopover: 8
   },
   fontFamily: 'sans',
-  fontSize: 'control'
+  fontSize: 'control',
+  gridAutoRows: 'min-content'
 }, getAllowedOverrides());
 
 export let section = style({
@@ -120,7 +128,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'}>({
@@ -181,6 +189,7 @@ export let menuitem = style({
   },
   alignItems: 'baseline',
   minHeight: 'control',
+  height: 'min',
   textDecoration: 'none',
   cursor: {
     default: 'default',
@@ -309,10 +318,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 +337,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 +363,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 +404,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 +414,7 @@ export function Divider(props: SeparatorProps) {
         divider({
           size: 'M',
           orientation: 'horizontal',
-          staticColor: undefined
+          isStaticColor: false
         }), style({
           display: {
             default: 'grid',
@@ -419,11 +431,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 +469,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 (
@@ -481,6 +494,7 @@ export function MenuItem(props: MenuItemProps) {
                 }],
                 [TextContext, {
                   slots: {
+                    [DEFAULT_SLOT]: {styles: label({size})},
                     label: {styles: label({size})},
                     description: {styles: description({...renderProps, size})},
                     value: {styles: value}
@@ -489,20 +503,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 +549,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 +574,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>

package/src/Meter.tsx

@@ -40,7 +40,7 @@ interface MeterStyleProps {
   /**
    * The static color style to apply. Useful when the button appears over a color background.
    */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /**
    * The label's overall position relative to the element it is labeling.
    * @default 'top'
@@ -53,7 +53,7 @@ export interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className
   label?: ReactNode
 }
 
-export const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);
+export const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const wrapper = style({
   ...bar()
@@ -77,7 +77,7 @@ const trackStyles = style({
   }
 });
 
-const fillStyles = style<MeterStyleProps>({
+const fillStyles = style<MeterStyleProps & {isStaticColor: boolean}>({
   height: 'full',
   borderStyle: 'none',
   borderRadius: 'full',
@@ -88,20 +88,16 @@ const fillStyles = style<MeterStyleProps>({
       notice: lightDark('notice-800', 'notice-900'), // 'notice-visual',
       negative: lightDark('negative-800', 'negative-900') // 'negative-visual'
     },
-    staticColor: {
-      white: {
-        default: 'transparent-white-900'
-      },
-      // TODO: Is there a black static color in S2?
-      black: {
-        default: 'transparent-black-900'
-      }
-    },
+    isStaticColor: 'transparent-overlay-900',
     forcedColors: 'ButtonText'
   }
 });
 
-function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Meters are visual representations of a quantity or an achievement.
+ * Their progress is determined by user actions, rather than system actions.
+ */
+export const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, MeterContext);
   let domRef = useDOMRef(ref);
 
@@ -116,6 +112,7 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
     labelPosition = 'top',
     ...groupProps
   } = props;
+  let isStaticColor = !!staticColor;
 
   return (
     <AriaMeter
@@ -131,21 +128,14 @@ function Meter(props: MeterProps, ref: DOMRef<HTMLDivElement>) {
       {({percentage, valueText}) => (
         <>
           {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && <Text styles={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</Text>}
+          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}
           <SkeletonWrapper>
-            <div className={trackStyles({staticColor, size})}>
-              <div className={fillStyles({staticColor, variant})} style={{width: percentage + '%'}} />
+            <div className={trackStyles({isStaticColor, size})}>
+              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />
             </div>
           </SkeletonWrapper>
         </>
       )}
     </AriaMeter>
   );
-}
-
-/**
- * Meters are visual representations of a quantity or an achievement.
- * Their progress is determined by user actions, rather than system actions.
- */
-let _Meter = forwardRef(Meter);
-export {_Meter as Meter};
+});

package/src/Modal.tsx

@@ -14,7 +14,6 @@ import {colorScheme} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
 import {DOMRef} from '@react-types/shared';
 import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
-import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {ModalOverlay, ModalOverlayProps, Modal as RACModal, useLocale} from 'react-aria-components';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
@@ -28,28 +27,6 @@ interface ModalProps extends ModalOverlayProps {
   size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
 }
 
-const fade = keyframes(`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`);
-
-const fadeAndSlide = keyframes(`
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`);
-
 const modalOverlayStyles = style({
   ...colorScheme(),
   position: 'fixed',
@@ -59,21 +36,21 @@ const modalOverlayStyles = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  animation: {
-    isEntering: fade,
-    isExiting: fade
+  opacity: {
+    isEntering: 0,
+    isExiting: 0
   },
-  animationDuration: {
-    isEntering: 250,
+  transition: 'opacity',
+  transitionDuration: {
+    default: 250,
     isExiting: 130
-  },
-  animationDirection: {
-    isEntering: 'normal',
-    isExiting: 'reverse'
   }
 });
 
-function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A modal is an overlay element which blocks interaction with elements outside it.
+ */
+export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
   let domRef = useDOMRef(ref);
   let colorScheme = useContext(ColorSchemeContext);
   let {locale, direction} = useLocale();
@@ -138,23 +115,22 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
             value: 'layer-2'
           },
           backgroundColor: '--s2-container-bg',
-          animation: {
-            isEntering: fadeAndSlide,
-            isExiting: fade
+          opacity: {
+            isEntering: 0,
+            isExiting: 0
+          },
+          translateY: {
+            isEntering: 20
           },
-          animationDuration: {
-            isEntering: 250,
+          transition: '[opacity, translate]',
+          transitionDuration: {
+            default: 250,
             isExiting: 130
           },
-          animationDelay: {
-            isEntering: 160,
+          transitionDelay: {
+            default: 160,
             isExiting: 0
           },
-          animationDirection: {
-            isEntering: 'normal',
-            isExiting: 'reverse'
-          },
-          animationFillMode: 'both',
           // Transparent outline for WHCM.
           outlineStyle: 'solid',
           outlineWidth: 1,
@@ -162,10 +138,4 @@ function Modal(props: ModalProps, ref: DOMRef<HTMLDivElement>) {
         })({...renderProps, size: props.size})} />
     </ModalOverlay>
   );
-}
-
-/**
- * A modal is an overlay element which blocks interaction with elements outside it.
- */
-let _Modal = forwardRef(Modal);
-export {_Modal as Modal};
+});

package/src/NumberField.tsx

@@ -54,7 +54,7 @@ export interface NumberFieldProps extends
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);
+export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
 
 const inputButton = style({
   display: 'flex',
@@ -166,7 +166,10 @@ const stepperContainerStyles = style({
   }
 });
 
-function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
+ */
+export const NumberField = forwardRef(function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, NumberFieldContext);
   let {
     label,
@@ -287,7 +290,7 @@ function NumberField(props: NumberFieldProps, ref: Ref<TextFieldRef>) {
         }
     </AriaNumberField>
   );
-}
+});
 
 interface StepButtonProps extends AriaButtonProps {
 }
@@ -324,12 +327,6 @@ let StepButton = forwardRef((props: StepButtonProps, ref: ForwardedRef<HTMLDivEl
   );
 });
 
-/**
- * NumberFields allow users to input number values with a keyboard or increment/decrement with step buttons.
- */
-let _NumberField = forwardRef(NumberField);
-export {_NumberField as NumberField};
-
 // replace from RAC
 function useRenderProps(props: any) {
   let {