@react-spectrum/s2 0.11.2 → 0.12.0

package/src/Modal.tsx

@@ -24,18 +24,18 @@ interface ModalProps extends ModalOverlayProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover'
+  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'
 }
 
 const modalOverlayStyles = style({
   ...colorScheme(),
-  position: 'fixed',
-  inset: 0,
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: 'full',
+  height: '--page-height',
   isolation: 'isolate',
   backgroundColor: 'transparent-black-500',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
   opacity: {
     isEntering: 0,
     isExiting: 0
@@ -47,6 +47,22 @@ const modalOverlayStyles = style({
   }
 });
 
+const modalWrapper = style({
+  position: 'sticky',
+  top: 0,
+  left: 0,
+  width: 'full',
+  height: '--visual-viewport-height',
+  display: 'flex',
+  alignItems: {
+    default: 'center',
+    size: {
+      fullscreenTakeover: 'start'
+    }
+  },
+  justifyContent: 'center'
+});
+
 /**
  * A modal is an overlay element which blocks interaction with elements outside it.
  */
@@ -68,74 +84,83 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
     <ModalOverlay
       {...props}
       className={renderProps => modalOverlayStyles({...renderProps, colorScheme})}>
-      <RACModal
-        {...props}
-        ref={modalRef}
-        className={renderProps => style({
-          display: 'flex',
-          flexDirection: 'column',
-          borderRadius: {
-            default: 'xl',
-            size: {
-              fullscreenTakeover: 'none'
-            }
-          },
-          width: {
-            size: {
-              // Copied from designs, not sure if correct.
-              S: 400,
-              M: 480,
-              L: 640,
-              fullscreen: 'calc(100% - 40px)',
-              fullscreenTakeover: 'full'
-            }
-          },
-          height: {
-            size: {
-              fullscreen: 'calc(100% - 40px)',
-              fullscreenTakeover: 'full'
-            }
-          },
-          maxWidth: {
-            default: '90vw',
-            size: {
-              fullscreen: 'none',
-              fullscreenTakeover: 'none'
-            }
-          },
-          maxHeight: {
-            default: '90vh',
-            size: {
-              fullscreen: 'none',
-              fullscreenTakeover: 'none'
-            }
-          },
-          '--s2-container-bg': {
-            type: 'backgroundColor',
-            value: 'layer-2'
-          },
-          backgroundColor: '--s2-container-bg',
-          opacity: {
-            isEntering: 0,
-            isExiting: 0
-          },
-          translateY: {
-            isEntering: 20
-          },
-          transition: '[opacity, translate]',
-          transitionDuration: {
-            default: 250,
-            isExiting: 130
-          },
-          transitionDelay: {
-            default: 160,
-            isExiting: 0
-          },
-          // Transparent outline for WHCM.
-          outlineStyle: 'solid',
-          outlineWidth: 1,
-          outlineColor: 'transparent'
-        })({...renderProps, size: props.size})} />
+      <div className={modalWrapper({size: props.size})} style={{containerType: 'size'} as any}>
+        <RACModal
+          {...props}
+          ref={modalRef}
+          className={renderProps => style({
+            display: 'flex',
+            flexDirection: 'column',
+            borderRadius: {
+              default: 'xl',
+              size: {
+                fullscreenTakeover: 'none'
+              }
+            },
+            width: {
+              size: {
+                // Copied from designs, not sure if correct.
+                S: 400,
+                M: 480,
+                L: 640,
+                XL: 960,
+                fullscreen: 'calc(100% - 40px)',
+                fullscreenTakeover: 'full'
+              }
+            },
+            height: {
+              size: {
+                fullscreen: 'calc(100% - 40px)',
+                fullscreenTakeover: 'full'
+              }
+            },
+            maxWidth: {
+              default: '90vw',
+              size: {
+                fullscreen: 'none',
+                fullscreenTakeover: 'none'
+              }
+            },
+            maxHeight: {
+              default: '90%',
+              size: {
+                fullscreen: 'none',
+                fullscreenTakeover: 'none'
+              }
+            },
+            paddingBottom: {
+              size: {
+                // Extend background behind the iOS Safari toolbar and keyboard.
+                fullscreenTakeover: '[100vh]'
+              }
+            },
+            '--s2-container-bg': {
+              type: 'backgroundColor',
+              value: 'layer-2'
+            },
+            backgroundColor: '--s2-container-bg',
+            opacity: {
+              isEntering: 0,
+              isExiting: 0
+            },
+            translateY: {
+              isEntering: 20
+            },
+            transition: '[opacity, translate]',
+            transitionDuration: {
+              default: 250,
+              isExiting: 130
+            },
+            transitionDelay: {
+              default: 160,
+              isExiting: 0
+            },
+            // Transparent outline for WHCM.
+            outlineStyle: 'solid',
+            outlineWidth: 1,
+            outlineColor: 'transparent'
+          })({...renderProps, size: props.size})} />
+      </div>
     </ModalOverlay>
   );
 });

package/src/NumberField.tsx

@@ -19,6 +19,7 @@ import {
   ButtonRenderProps,
   ContextValue,
   InputContext,
+  InputProps,
   useContextProps
 } from 'react-aria-components';
 import {baseColor, space, style} from '../style' with {type: 'macro'};
@@ -40,7 +41,8 @@ export interface NumberFieldProps extends
   Omit<AriaNumberFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
   StyleProps,
   SpectrumLabelableProps,
-  HelpTextProps {
+  HelpTextProps,
+  Pick<InputProps, 'placeholder'> {
   /**
    * Whether to hide the increment and decrement buttons.
    * @default false
@@ -173,7 +175,6 @@ export const NumberField = forwardRef(function NumberField(props: NumberFieldPro
     }
   }));
 
-
   return (
     <AriaNumberField
       ref={domRef}

package/src/Picker.tsx

@@ -20,6 +20,7 @@ import {
   ButtonRenderProps,
   Collection,
   ContextValue,
+  DEFAULT_SLOT,
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
@@ -32,9 +33,12 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
+import {AvatarContext} from './Avatar';
 import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
+import {box, iconStyles as checkboxIconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
 import {
+  checkbox,
   checkmark,
   description,
   icon,
@@ -64,8 +68,9 @@ import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria';
-import {PopoverBase} from './Popover';
+import {Popover} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
@@ -73,7 +78,7 @@ import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useGlobalListeners, useSlotId} from '@react-aria/utils';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useScale} from './utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -91,8 +96,9 @@ export interface PickerStyleProps {
   isQuiet?: boolean
 }
 
-export interface PickerProps<T extends object> extends
-  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
+type SelectionMode = 'single' | 'multiple';
+export interface PickerProps<T extends object, M extends SelectionMode = 'single'> extends
+  Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -236,6 +242,11 @@ const iconStyles = style({
   }
 });
 
+const avatar = style({
+  gridArea: 'icon',
+  marginEnd: 'text-to-visual'
+});
+
 const loadingWrapperStyles = style({
   gridColumnStart: '1',
   gridColumnEnd: '-1',
@@ -262,7 +273,7 @@ let InsideSelectValueContext = createContext(false);
 /**
  * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
  */
-export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object, M extends SelectionMode = 'single'>(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
@@ -334,6 +345,8 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     );
   }
   let scale = useScale();
+  let {direction: dir} = useLocale();
+  let RTLFlipOffset = dir === 'rtl' ? -1 : 1;
 
   return (
     <AriaSelect
@@ -389,49 +402,54 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                 estimatedHeadingHeight: 50,
                 padding: 8,
                 loaderHeight: LOADER_ROW_HEIGHTS[size][scale]}}>
-              <PopoverBase
+              <Popover
                 hideArrow
+                padding="none"
                 offset={menuOffset}
+                crossOffset={isQuiet ? RTLFlipOffset * -12 : undefined}
                 placement={`${direction} ${align}` as Placement}
                 shouldFlip={shouldFlip}
                 UNSAFE_style={{
                   width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined
                 }}
                 styles={style({
-                  marginStart: {
-                    isQuiet: -12
-                  },
                   minWidth: {
-                    default: '[var(--trigger-width)]',
+                    default: '--trigger-width',
                     isQuiet: 192
                   },
                   width: {
-                    default: '[var(--trigger-width)]',
-                    isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+                    default: '--trigger-width',
+                    isQuiet: '[calc(var(--trigger-width) - 24)]'
                   }
                 })(props)}>
-                <Provider
-                  values={[
-                    [HeaderContext, {styles: listboxHeader({size})}],
-                    [HeadingContext, {
-                      // @ts-ignore
-                      role: 'presentation',
-                      styles: sectionHeading
-                    }],
-                    [TextContext, {
-                      slots: {
-                        description: {styles: description({size})}
-                      }
-                    }]
-                  ]}>
-                  <ListBox
-                    dependencies={props.dependencies}
-                    items={items}
-                    className={listbox({size})}>
-                    {renderer}
-                  </ListBox>
-                </Provider>
-              </PopoverBase>
+                <div
+                  className={style({
+                    display: 'flex',
+                    size: 'full'
+                  })}>
+                  <Provider
+                    values={[
+                      [HeaderContext, {styles: listboxHeader({size})}],
+                      [HeadingContext, {
+                        // @ts-ignore
+                        role: 'presentation',
+                        styles: sectionHeading
+                      }],
+                      [TextContext, {
+                        slots: {
+                          description: {styles: description({size})}
+                        }
+                      }]
+                    ]}>
+                    <ListBox
+                      dependencies={props.dependencies}
+                      items={items}
+                      className={listbox({size})}>
+                      {renderer}
+                    </ListBox>
+                  </Provider>
+                </div>
+              </Popover>
             </Virtualizer>
           </InternalPickerContext.Provider>
         </>
@@ -456,6 +474,13 @@ function PickerProgressCircle(props) {
   );
 }
 
+const avatarSize = {
+  S: 16,
+  M: 20,
+  L: 22,
+  XL: 26
+} as const;
+
 interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>, Pick<PickerProps<T>, 'loadingState'> {
   loadingCircle: ReactNode,
   buttonRef: RefObject<HTMLButtonElement | null>
@@ -474,6 +499,7 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
     loadingCircle,
     buttonRef
   } = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
 
   // For mouse interactions, pickers open on press start. When the popover underlay appears
   // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
@@ -506,8 +532,8 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
         })}>
         {(renderProps) => (
           <>
-            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>
-              {({defaultChildren}) => {
+            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
+              {({selectedItems, defaultChildren}) => {
                 return (
                   <Provider
                     values={[
@@ -519,19 +545,43 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
                           }
                         }
                       }],
+                      [AvatarContext, {
+                        slots: {
+                          avatar: {
+                            size: avatarSize[size ?? 'M'],
+                            styles: avatar
+                          }
+                        }
+                      }],
                       [TextContext, {
                         slots: {
                           description: {},
-                          label: {styles: style({
-                            display: 'block',
-                            flexGrow: 1,
-                            truncate: true
-                          })}
+                          [DEFAULT_SLOT]: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore
+                            'data-slot': 'label'
+                          },
+                          label: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore not technically necessary, but good for consistency
+                            'data-slot': 'label'
+                          }
                         }
                       }],
                       [InsideSelectValueContext, true]
                     ]}>
-                    {defaultChildren}
+                    {selectedItems.length <= 1
+                      ? defaultChildren
+                      : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>
+                    }
                   </Provider>
                 );
               }}
@@ -577,6 +627,7 @@ export function PickerItem(props: PickerItemProps): ReactNode {
       className={renderProps => (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)}>
       {(renderProps) => {
         let {children} = props;
+        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};
         return (
           <DefaultProvider
             context={IconContext}
@@ -584,15 +635,27 @@ export function PickerItem(props: PickerItemProps): ReactNode {
               icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
             }}}>
             <DefaultProvider
-              context={TextContext}
-              value={{
-                slots: {
-                  label: {styles: label({size})},
-                  description: {styles: description({...renderProps, size})}
-                }
-              }}>
-              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
-              {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+              context={AvatarContext}
+              value={{slots: {
+                avatar: {size: avatarSize[size], styles: avatar}
+              }}}>
+              <DefaultProvider
+                context={TextContext}
+                value={{
+                  slots: {
+                    [DEFAULT_SLOT]: {styles: label({size})},
+                    label: {styles: label({size})},
+                    description: {styles: description({...renderProps, size})}
+                  }
+                }}>
+                {renderProps.selectionMode === 'single' && !isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+                {renderProps.selectionMode === 'multiple' && !isLink && (
+                  <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>
+                    <CheckmarkIcon size={size} className={checkboxIconStyles} />
+                  </div>
+              )}
+                {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+              </DefaultProvider>
             </DefaultProvider>
           </DefaultProvider>
         );