@react-spectrum/s2 0.11.1 → 0.12.0

package/src/Card.tsx

@@ -253,7 +253,11 @@ let preview = style({
 
 const image = style({
   width: 'full',
-  aspectRatio: '3/2',
+  aspectRatio: {
+    layout: {
+      grid: '3/2'
+    }
+  },
   objectFit: 'cover',
   userSelect: 'none',
   pointerEvents: 'none'
@@ -346,7 +350,10 @@ let footer = style({
   paddingTop: 'calc(var(--card-spacing) * 1.5 / 2)'
 });
 
-export const InternalCardViewContext = createContext<'div' | typeof GridListItem>('div');
+export const InternalCardViewContext = createContext({
+  ElementType: 'div' as 'div' | typeof GridListItem,
+  layout: 'grid' as 'grid' | 'waterfall'
+});
 export const CardContext = createContext<ContextValue<Partial<CardProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 interface InternalCardContextValue {
@@ -377,8 +384,12 @@ const actionButtonSize = {
   XL: 'L'
 } as const;
 
+/**
+ * A Card summarizes an object that a user can select or navigate to.
+ */
 export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLDivElement>) {
   [props] = useSpectrumContextProps(props, ref, CardContext);
+  let {ElementType, layout} = useContext(InternalCardViewContext);
   let domRef = useDOMRef(ref);
   let {density = 'regular', size = 'M', variant = 'primary', UNSAFE_className = '', UNSAFE_style, styles, id, ...otherProps} = props;
   let isQuiet = variant === 'quiet';
@@ -386,7 +397,7 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
   let children = (
     <Provider
       values={[
-        [ImageContext, {alt: '', styles: image}],
+        [ImageContext, {alt: '', styles: image({layout})}],
         [TextContext, {
           slots: {
             [DEFAULT_SLOT]: {},
@@ -413,7 +424,6 @@ export const Card = forwardRef(function Card(props: CardProps, ref: DOMRef<HTMLD
     </Provider>
   );
 
-  let ElementType = useContext(InternalCardViewContext);
   if (ElementType === 'div' || isSkeleton) {
     return (
       <div
@@ -560,6 +570,7 @@ export const CollectionCardPreview = forwardRef(function CollectionCardPreview(p
 export interface AssetCardProps extends Omit<CardProps, 'density'> {}
 
 export const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, ref: DOMRef<HTMLDivElement>) {
+  let {layout} = useContext(InternalCardViewContext);
   return (
     <Card {...props} ref={ref} density="regular">
       {composeRenderProps(props.children, children => (
@@ -569,11 +580,15 @@ export const AssetCard = forwardRef(function AssetCard(props: AssetCardProps, re
               alt: '',
               styles: style({
                 width: 'full',
-                aspectRatio: 'square',
+                aspectRatio: {
+                  layout: {
+                    grid: 'square'
+                  }
+                },
                 objectFit: 'contain',
                 pointerEvents: 'none',
                 userSelect: 'none'
-              })
+              })({layout})
             }],
             [IllustrationContext, {
               render(icon) {
@@ -620,7 +635,7 @@ export interface UserCardProps extends Omit<CardProps, 'density' | 'variant'> {
   variant?: 'primary' | 'secondary' | 'tertiary'
 }
 
-export const UserCard = forwardRef(function UserCard(props: CardProps, ref: DOMRef<HTMLDivElement>) {
+export const UserCard = forwardRef(function UserCard(props: UserCardProps, ref: DOMRef<HTMLDivElement>) {
   let {size = 'M'} = props;
   return (
     <Card {...props} ref={ref} density="spacious">

package/src/CardView.tsx

@@ -192,6 +192,9 @@ const wrapperStyles = style({
 
 export const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
+/**
+ * A CardView displays a group of related objects, with support for selection and bulk actions.
+ */
 export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {
@@ -282,9 +285,14 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
     }
   } : undefined;
 
+  let cardViewCtx = useMemo(() => ({
+    layout: layoutName,
+    ElementType: GridListItem
+  }), [layoutName]);
+
   let cardView = (
     <Virtualizer layout={layout} layoutOptions={options}>
-      <InternalCardViewContext.Provider value={GridListItem}>
+      <InternalCardViewContext.Provider value={cardViewCtx}>
         <CardContext.Provider value={ctx}>
           <ImageCoordinator>
             <AriaGridList

package/src/ColorArea.tsx

@@ -13,7 +13,8 @@
 import {
   ColorArea as AriaColorArea,
   ColorAreaProps as AriaColorAreaProps,
-  ContextValue
+  ContextValue,
+  useLocale
 } from 'react-aria-components';
 import {ColorHandle} from './ColorHandle';
 import {createContext, forwardRef} from 'react';
@@ -34,6 +35,7 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
   [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
+  let {direction} = useLocale();
   return (
     <AriaColorArea
       {...props}
@@ -67,7 +69,13 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
       {({state}) =>
         (<ColorHandle
           containerRef={containerRef}
-          getPosition={() => state.getThumbPosition()} />)
+          getPosition={() => {
+            let {x, y} = state.getThumbPosition();
+            return {
+              x: direction === 'ltr' ? x : 1 - x,
+              y
+            };
+          }} />)
       }
     </AriaColorArea>
   );

package/src/ColorField.tsx

@@ -13,7 +13,8 @@
 import {
   ColorField as AriaColorField,
   ColorFieldProps as AriaColorFieldProps,
-  ContextValue
+  ContextValue,
+  InputProps
 } from 'react-aria-components';
 import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
@@ -25,7 +26,7 @@ import {style} from '../style' with {type: 'macro'};
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the color field.
    *

package/src/ColorSlider.tsx

@@ -41,7 +41,7 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
   let trackRef = useRef(null);
-  let {locale} = useLocale();
+  let {direction, locale} = useLocale();
 
   return (
     <AriaColorSlider
@@ -133,7 +133,8 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
           <ColorHandle
             containerRef={trackRef}
             getPosition={() => {
-              let x = state.orientation === 'horizontal' ? state.getThumbPercent(0) : 0.5;
+              let thumbLeft = direction === 'ltr' ? state.getThumbPercent(0) : 1 - state.getThumbPercent(0);
+              let x = state.orientation === 'horizontal' ? thumbLeft : 0.5;
               let y = state.orientation === 'horizontal' ? 0.5 : 1 - state.getThumbPercent(0);
               return {x, y};
             }} />

package/src/ComboBox.tsx

@@ -21,6 +21,7 @@ import {
   ComboBoxStateContext,
   ContextValue,
   InputContext,
+  InputProps,
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
@@ -33,6 +34,7 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, GlobalDOMAttributes, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
+import {AvatarContext} from './Avatar';
 import {BaseCollection, CollectionNode, createLeafComponent} from '@react-aria/collections';
 import {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
@@ -59,7 +61,7 @@ import intlMessages from '../intl/*.json';
 import {mergeRefs, useResizeObserver, useSlotId} from '@react-aria/utils';
 import {Node} from 'react-stately';
 import {Placement} from 'react-aria';
-import {PopoverBase} from './Popover';
+import {Popover} from './Popover';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
 import {TextFieldRef} from '@react-types/textfield';
@@ -83,7 +85,8 @@ export interface ComboBoxProps<T extends object> extends
   HelpTextProps,
   Pick<ListBoxProps<T>, 'items' | 'dependencies'>,
   Pick<AriaPopoverProps, 'shouldFlip'>,
-  Pick<AsyncLoadable, 'onLoadMore'>  {
+  Pick<AsyncLoadable, 'onLoadMore'>,
+  Pick<InputProps, 'placeholder'>  {
     /** The contents of the collection. */
     children: ReactNode | ((item: T) => ReactNode),
     /**
@@ -304,6 +307,11 @@ const dividerStyle = style({
   width: 'full'
 });
 
+const avatar = style({
+  gridArea: 'icon',
+  marginEnd: 'text-to-visual'
+});
+
 // Not from any design, just following the sizing of the existing rows
 export const LOADER_ROW_HEIGHTS = {
   S: {
@@ -363,6 +371,13 @@ export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | '
   children: ReactNode
 }
 
+const avatarSize = {
+  S: 16,
+  M: 20,
+  L: 22,
+  XL: 26
+} as const;
+
 const checkmarkIconSize = {
   S: 'XS',
   M: 'M',
@@ -392,6 +407,11 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
                     icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
                   }
                 }],
+                [AvatarContext, {
+                  slots: {
+                    avatar: {size: avatarSize[size], styles: avatar}
+                  }
+                }],
                 [TextContext, {
                   slots: {
                     label: {styles: label({size})},
@@ -399,7 +419,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
                   }
                 }]
               ]}>
-              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+              {!isLink && !props.onAction && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
               {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
             </Provider>
           </>
@@ -478,7 +498,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
   }
 
   let triggerRef = useRef<HTMLDivElement>(null);
-    // Make menu width match input + button
+  // Make menu width match input + button
   let [triggerWidth, setTriggerWidth] = useState<string | null>(null);
   let onResize = useCallback(() => {
     if (triggerRef.current) {
@@ -643,57 +663,62 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
           description={descriptionMessage}>
           {errorMessage}
         </HelpText>
-        <PopoverBase
+        <Popover
           hideArrow
           triggerRef={triggerRef}
           offset={menuOffset}
           placement={`${direction} ${align}` as Placement}
           shouldFlip={shouldFlip}
           UNSAFE_style={{
-            width: menuWidth ? `${menuWidth}px` : undefined,
-            // manually subtract border as we can't set Popover to border-box, it causes the contents to spill out
-            '--trigger-width': `calc(${triggerWidth} - 2px)`
+            '--trigger-width': (menuWidth ? menuWidth + 'px' : triggerWidth)
           } as CSSProperties}
+          padding="none"
           styles={style({
             minWidth: '--trigger-width',
             width: '--trigger-width'
           })}>
-          <Provider
-            values={[
-              [HeaderContext, {styles: listboxHeader({size})}],
-              [HeadingContext, {
-                // @ts-ignore
-                role: 'presentation',
-                styles: sectionHeading
-              }],
-              [TextContext, {
-                slots: {
-                  'description': {styles: description({size})}
-                }
-              }]
-            ]}>
-            <Virtualizer
-              layout={ListLayout}
-              layoutOptions={{
-                estimatedRowHeight: 32,
-                padding: 8,
-                estimatedHeadingHeight: 50,
-                loaderHeight: LOADER_ROW_HEIGHTS[size][scale]
-              }}>
-              <ListBox
-                dependencies={props.dependencies}
-                renderEmptyState={() => (
-                  <span className={emptyStateText({size})}>
-                    {loadingState === 'loading' ? stringFormatter.format('table.loading') : stringFormatter.format('combobox.noResults')}
-                  </span>
-                )}
-                items={items}
-                className={listbox({size})}>
-                {renderer}
-              </ListBox>
-            </Virtualizer>
-          </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})}
+                  }
+                }]
+              ]}>
+              <Virtualizer
+                layout={ListLayout}
+                layoutOptions={{
+                  estimatedRowHeight: 32,
+                  padding: 8,
+                  estimatedHeadingHeight: 50,
+                  loaderHeight: LOADER_ROW_HEIGHTS[size][scale]
+                }}>
+                <ListBox
+                  dependencies={props.dependencies}
+                  renderEmptyState={() => (
+                    <span className={emptyStateText({size})}>
+                      {loadingState === 'loading' ? stringFormatter.format('table.loading') : stringFormatter.format('combobox.noResults')}
+                    </span>
+                  )}
+                  items={items}
+                  className={listbox({size})}>
+                  {renderer}
+                </ListBox>
+              </Virtualizer>
+            </Provider>
+          </div>
+        </Popover>
       </InternalComboboxContext.Provider>
     </>
   );

package/src/ContextualHelp.tsx

@@ -11,7 +11,7 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeStyles} from '../style/runtime';
-import {PopoverBase, PopoverDialogProps} from './Popover';
+import {Popover, PopoverDialogProps} from './Popover';
 import {space, style} from '../style' with {type: 'macro'};
 import {StyleProps} from './style-utils' with { type: 'macro' };
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -39,11 +39,12 @@ export interface ContextualHelpProps extends
   size?: 'XS' | 'S'
 }
 
-const popover = style({
-  fontFamily: 'sans',
+const wrappingDiv = style({
   minWidth: 268,
   width: 268,
-  padding: 24
+  padding: 24,
+  boxSizing: 'border-box',
+  height: 'full'
 });
 
 export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
@@ -96,39 +97,42 @@ export const ContextualHelp = forwardRef(function ContextualHelp(props: Contextu
         isQuiet>
         {variant === 'info' ? <InfoIcon /> : <HelpIcon />}
       </ActionButton>
-      <PopoverBase
+      <Popover
+        padding="none"
         placement={placement}
         shouldFlip={shouldFlip}
         // not working => containerPadding={containerPadding}
         offset={offset}
         crossOffset={crossOffset}
-        hideArrow
-        styles={popover}>
-        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
-          <Provider
-            values={[
-              [TextContext, {
-                slots: {
-                  [DEFAULT_SLOT]: {}
-                }
-              }],
-              [HeadingContext, {styles: style({
-                font: 'heading-xs',
-                margin: 0,
-                marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
-              })}],
-              [ContentContext, {styles: style({
-                font: 'body-sm'
-              })}],
-              [FooterContext, {styles: style({
-                font: 'body-sm',
-                marginTop: 16
-              })}]
-            ]}>
-            {children}
-          </Provider>
-        </RACDialog>
-      </PopoverBase>
+        hideArrow>
+        <div
+          className={wrappingDiv}>
+          <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: 'calc(self(paddingTop) * -1)', padding: 24}))}>
+            <Provider
+              values={[
+                [TextContext, {
+                  slots: {
+                    [DEFAULT_SLOT]: {}
+                  }
+                }],
+                [HeadingContext, {styles: style({
+                  font: 'heading-xs',
+                  margin: 0,
+                  marginBottom: space(8) // This only makes it 10px on mobile and should be 12px
+                })}],
+                [ContentContext, {styles: style({
+                  font: 'body-sm'
+                })}],
+                [FooterContext, {styles: style({
+                  font: 'body-sm',
+                  marginTop: 16
+                })}]
+              ]}>
+              {children}
+            </Provider>
+          </RACDialog>
+        </div>
+      </Popover>
     </DialogTrigger>
   );
 });

package/src/CustomDialog.tsx

@@ -53,7 +53,7 @@ const dialogStyle = style({
   position: 'relative',
   size: 'full',
   maxSize: 'inherit'
-}, getAllowedOverrides({height: true}));
+}, getAllowedOverrides({height: true, width: true}));
 
 /**
  * A CustomDialog is a floating window with a custom layout.

package/src/DateField.tsx

@@ -87,6 +87,10 @@ const iconStyles = style({
   justifyContent: 'end'
 });
 
+/**
+ * DateFields allow users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
 export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(
   props: DateFieldProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {

package/src/DatePicker.tsx

@@ -33,7 +33,7 @@ import {FieldGroup, FieldLabel, HelpText} from './Field';
 import {forwardRefType, GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {PopoverBase} from './Popover';
+import {Popover} from './Popover';
 import {pressScale} from './pressScale';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -41,7 +41,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface DatePickerProps<T extends DateValue> extends
   Omit<AriaDatePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
-  Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'isDateUnavailable'>,
+  Pick<CalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -119,6 +119,9 @@ export const timeField = style({
   width: 'unset'
 });
 
+/**
+ * DatePickers combine a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
 export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(
   props: DatePickerProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {
@@ -237,25 +240,30 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
 
 export function CalendarPopover(props: PropsWithChildren): ReactElement {
   return (
-    <PopoverBase
+    <Popover
       hideArrow
-      styles={style({
-        paddingX: 16,
-        paddingY: 32,
-        overflow: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 16
-      })}>
-      <Dialog>
-        <Provider
-          values={[
-            [OverlayTriggerStateContext, null]
-          ]}>
-          {props.children}
-        </Provider>
-      </Dialog>
-    </PopoverBase>
+      padding="none">
+      <div
+        className={style({
+          paddingX: 16,
+          paddingY: 32,
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 16,
+          boxSizing: 'border-box',
+          size: 'full'
+        })}>
+        <Dialog>
+          <Provider
+            values={[
+              [OverlayTriggerStateContext, null]
+            ]}>
+            {props.children}
+          </Provider>
+        </Dialog>
+      </div>
+    </Popover>
   );
 }
 

package/src/DateRangePicker.tsx

@@ -33,7 +33,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface DateRangePickerProps<T extends DateValue> extends
   Omit<AriaDateRangePickerProps<T>, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>,
-  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'isDateUnavailable'>,
+  Pick<RangeCalendarProps<T>, 'createCalendar' | 'pageBehavior' | 'firstDayOfWeek' | 'isDateUnavailable'>,
   StyleProps,
   SpectrumLabelableProps,
   HelpTextProps {
@@ -52,6 +52,10 @@ export interface DateRangePickerProps<T extends DateValue> extends
 
 export const DateRangePickerContext = createContext<ContextValue<Partial<DateRangePickerProps<any>>, HTMLDivElement>>(null);
 
+/**
+ * DateRangePickers combine two DateFields and a RangeCalendar popover to allow users
+ * to enter or select a date and time range.
+ */
 export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(
   props: DateRangePickerProps<T>, ref: Ref<HTMLDivElement>
 ): ReactElement {

package/src/Dialog.tsx

@@ -33,7 +33,7 @@ export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L',
+  size?: 'S' | 'M' | 'L' | 'XL',
   /** Whether pressing the escape key to close the dialog should be disabled. */
   isKeyboardDismissDisabled?: boolean
 }
@@ -57,10 +57,13 @@ const header = style({
 
 const content =  style({
   flexGrow: 1,
+  flexShrink: {
+    [`@container (height < ${500 / 16}rem)`]: 0
+  },
   overflowY: {
     default: 'auto',
-    // Make the whole dialog scroll rather than only the content when the height it small.
-    [`@media (height < ${400 / 16}rem)`]: 'visible'
+    // Make the whole dialog scroll rather than only the content when the height is small.
+    [`@container (height < ${500 / 16}rem)`]: 'visible'
   },
   font: 'body',
   // TODO: adjust margin on mobile?