@react-spectrum/s2 1.3.1 → 1.5.0

package/src/CardView.tsx

@@ -21,10 +21,29 @@ import {
 import {CardContext, InternalCardViewContext} from './Card';
 import {Collection} from 'react-aria/Collection';
 import {ContextValue} from 'react-aria-components/slots';
-import {createContext, forwardRef, ReactElement, useCallback, useMemo, useRef, useState} from 'react';
-import {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, Key, LoadingState} from '@react-types/shared';
+import {
+  createContext,
+  forwardRef,
+  ReactElement,
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import {
+  DOMRef,
+  DOMRefValue,
+  forwardRefType,
+  GlobalDOMAttributes,
+  Key,
+  LoadingState
+} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {GridLayout, Size, Virtualizer, WaterfallLayout} from 'react-aria-components/Virtualizer';
 import {ImageCoordinator} from './ImageCoordinator';
 import {useActionBarContainer} from './ActionBar';
@@ -34,40 +53,58 @@ import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
 import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'keyboardNavigationBehavior' | 'selectionBehavior' | 'className' | 'style' | 'render' | 'isLoading' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface CardViewProps<T>
+  extends
+    Omit<
+      GridListProps<T>,
+      | 'layout'
+      | 'keyboardNavigationBehavior'
+      | 'selectionBehavior'
+      | 'className'
+      | 'style'
+      | 'render'
+      | 'isLoading'
+      | keyof GlobalDOMAttributes
+    >,
+    UnsafeStyles {
   /**
    * The layout of the cards.
+   *
    * @default 'grid'
    */
-  layout?: 'grid' | 'waterfall',
+  layout?: 'grid' | 'waterfall';
   /**
    * The size of the cards.
+   *
    * @default 'M'
    */
-  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
   /**
    * The amount of space between the cards.
+   *
    * @default 'regular'
    */
-  density?: 'compact' | 'regular' | 'spacious',
+  density?: 'compact' | 'regular' | 'spacious';
   /**
    * The visual style of the cards.
+   *
    * @default 'primary'
    */
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet',
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet';
   /**
    * How selection should be displayed.
+   *
    * @default 'checkbox'
    */
-  selectionStyle?: 'checkbox' | 'highlight',
+  selectionStyle?: 'checkbox' | 'highlight';
   /** The loading state of the CardView. */
-  loadingState?: LoadingState,
+  loadingState?: LoadingState;
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
-  onLoadMore?: () => void,
+  onLoadMore?: () => void;
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
+  styles?: StylesPropWithHeight;
   /** Provides the ActionBar to render when cards are selected in the CardView. */
-  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement;
 }
 
 const layoutOptions = {
@@ -160,42 +197,52 @@ const layoutOptions = {
 
 const SIZES = ['XS', 'S', 'M', 'L', 'XL'] as const;
 
-const cardViewStyles = style({
-  overflowY: {
-    default: 'auto',
-    isLoading: 'hidden'
-  },
-  display: {
-    isEmpty: 'flex'
-  },
-  boxSizing: 'border-box',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'center',
-  ...focusRing(),
-  outlineStyle: {
-    default: 'none',
-    isEmpty: {
-      isFocusVisible: 'solid'
+const cardViewStyles = style(
+  {
+    overflowY: {
+      default: 'auto',
+      isLoading: 'hidden'
+    },
+    display: {
+      isEmpty: 'flex'
+    },
+    boxSizing: 'border-box',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    ...focusRing(),
+    outlineStyle: {
+      default: 'none',
+      isEmpty: {
+        isFocusVisible: 'solid'
+      }
+    },
+    outlineOffset: -2,
+    height: {
+      isActionBar: 'full'
     }
   },
-  outlineOffset: -2,
-  height: {
-    isActionBar: 'full'
-  }
-}, getAllowedOverrides({height: true}));
+  getAllowedOverrides({height: true})
+);
 
-const wrapperStyles = style({
-  position: 'relative',
-  overflow: 'clip'
-}, getAllowedOverrides({height: true}));
+const wrapperStyles = style(
+  {
+    position: 'relative',
+    overflow: 'clip'
+  },
+  getAllowedOverrides({height: true})
+);
 
-export const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
+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>) {
+export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T>(
+  props: CardViewProps<T>,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);
   let {
     children,
@@ -211,7 +258,8 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
     onLoadMore,
     items,
     renderEmptyState: renderEmptyStateProp,
-    ...otherProps} = props;
+    ...otherProps
+  } = props;
   let domRef = useDOMRef(ref);
   let innerRef = useRef(null);
   let scrollRef = props.renderActionBar ? innerRef : domRef;
@@ -249,15 +297,14 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 
   let ctx = useMemo(() => ({size, variant}), [size, variant]);
 
-  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({
+    ...props,
+    scrollRef
+  });
 
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
   let renderer;
-  let cardLoadingSentinel = (
-    <GridListLoadMoreItem
-      isLoading={isLoading}
-      onLoadMore={onLoadMore} />
-  );
+  let cardLoadingSentinel = <GridListLoadMoreItem isLoading={isLoading} onLoadMore={onLoadMore} />;
 
   if (typeof children === 'function' && items) {
     renderer = (
@@ -278,18 +325,23 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   }
 
   // Wrap the renderEmptyState function so that it is not called when there is a skeleton loader.
-  let renderEmptyState = renderEmptyStateProp ? (renderProps: GridListRenderProps) => {
-    let collection = renderProps.state.collection;
-    let firstKey = collection.getFirstKey();
-    if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {
-      return renderEmptyStateProp(renderProps);
-    }
-  } : undefined;
+  let renderEmptyState = renderEmptyStateProp
+    ? (renderProps: GridListRenderProps) => {
+        let collection = renderProps.state.collection;
+        let firstKey = collection.getFirstKey();
+        if (firstKey == null || collection.getItem(firstKey)?.type !== 'skeleton') {
+          return renderEmptyStateProp(renderProps);
+        }
+      }
+    : undefined;
 
-  let cardViewCtx = useMemo(() => ({
-    layout: layoutName,
-    ElementType: GridListItem
-  }), [layoutName]);
+  let cardViewCtx = useMemo(
+    () => ({
+      layout: layoutName,
+      ElementType: GridListItem
+    }),
+    [layoutName]
+  );
 
   let cardView = (
     <Virtualizer layout={layout} layoutOptions={options}>
@@ -314,7 +366,17 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
                 scrollPadding: options.minSpace.height,
                 scrollPaddingBottom: actionBarHeight + options.minSpace.height
               }}
-              className={renderProps => (!props.renderActionBar ? UNSAFE_className : '') + cardViewStyles({...renderProps, isLoading: props.loadingState === 'loading', isActionBar: !!props.renderActionBar}, !props.renderActionBar ? styles : undefined)}>
+              className={renderProps =>
+                (!props.renderActionBar ? UNSAFE_className : '') +
+                cardViewStyles(
+                  {
+                    ...renderProps,
+                    isLoading: props.loadingState === 'loading',
+                    isActionBar: !!props.renderActionBar
+                  },
+                  !props.renderActionBar ? styles : undefined
+                )
+              }>
               {renderer}
             </AriaGridList>
           </ImageCoordinator>
@@ -327,7 +389,10 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   // ActionBar cannot be inside the GridList due to ARIA and focus management requirements.
   if (props.renderActionBar) {
     return (
-      <div ref={domRef} className={UNSAFE_className + wrapperStyles(null, styles)} style={UNSAFE_style}>
+      <div
+        ref={domRef}
+        className={UNSAFE_className + wrapperStyles(null, styles)}
+        style={UNSAFE_style}>
         {cardView}
         {actionBar}
       </div>

package/src/CenterBaseline.tsx

@@ -12,15 +12,17 @@
 
 import {css} from '../style/style-macro' with {type: 'macro'};
 import {CSSProperties, ReactNode} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {mergeStyles} from '../style/runtime';
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 
-interface CenterBaselineProps {
-  style?: CSSProperties,
-  styles?: StyleString,
-  children: ReactNode,
-  slot?: string
+interface CenterBaselineProps extends DOMAttributes {
+  style?: CSSProperties;
+  styles?: StyleString;
+  children: ReactNode;
+  slot?: string;
 }
 
 const styles = style({
@@ -28,9 +30,28 @@ const styles = style({
   alignItems: 'center'
 });
 
+/**
+ * Vertically centers its children against the surrounding text baseline.
+ * Use this to align icons or other inline elements with adjacent text without
+ * breaking baseline alignment.
+ *
+ * @example
+ *   import {CenterBaseline} from '@react-spectrum/s2/CenterBaseline';
+ *   import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+ *   import CheckmarkIcon from '@react-spectrum/s2/icons/Checkmark';
+ *
+ *   <span className={style({display: 'flex', gap: 4, alignItems: 'baseline'})}>
+ *     <CenterBaseline>
+ *       <CheckmarkIcon />
+ *     </CenterBaseline>
+ *     <span>Done</span>
+ *   </span>;
+ */
 export function CenterBaseline(props: CenterBaselineProps): ReactNode {
+  let domProps = filterDOMProps(props);
   return (
     <div
+      {...domProps}
       slot={props.slot}
       style={props.style}
       className={mergeStyles(styles, props.styles) + ' ' + centerBaselineBefore}>
@@ -39,8 +60,12 @@ export function CenterBaseline(props: CenterBaselineProps): ReactNode {
   );
 }
 
-export const centerBaselineBefore = css('&::before { content: "\u00a0"; width: 0; visibility: hidden }');
+export const centerBaselineBefore = css(
+  '&::before { content: "\u00a0"; width: 0; visibility: hidden }'
+);
 
-export function centerBaseline(props: Omit<CenterBaselineProps, 'children'> = {}): (icon: ReactNode) => ReactNode {
+export function centerBaseline(
+  props: Omit<CenterBaselineProps, 'children'> = {}
+): (icon: ReactNode) => ReactNode {
   return (icon: ReactNode) => <CenterBaseline {...props}>{icon}</CenterBaseline>;
 }

package/src/Checkbox.tsx

@@ -10,21 +10,34 @@
  * governing permissions and limitations under the License.
  */
 
+import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
+import {CenterBaseline} from './CenterBaseline';
 import {
-  Checkbox as AriaCheckbox,
-  CheckboxProps as AriaCheckboxProps,
+  CheckboxButton,
+  CheckboxField,
+  CheckboxFieldProps,
   CheckboxRenderProps
 } from 'react-aria-components/Checkbox';
-import {baseColor, focusRing, space, style} from '../style' with {type: 'macro'};
-import {CenterBaseline} from './CenterBaseline';
 import {CheckboxGroupStateContext} from 'react-aria-components/CheckboxGroup';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import {ContextValue, useSlottedContext} from 'react-aria-components/slots';
-import {controlBorderRadius, controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {
+  controlBorderRadius,
+  controlFont,
+  controlSize,
+  getAllowedOverrides,
+  StyleProps
+} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import DashIcon from '../ui-icons/Dash';
-import {FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
+import {
+  FocusableRef,
+  FocusableRefValue,
+  GlobalDOMAttributes,
+  HelpTextProps
+} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
+import {HelpText} from './Field';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -35,27 +48,83 @@ interface CheckboxStyleProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /** Whether the Checkbox should be displayed with an emphasized style. */
-  isEmphasized?: boolean
+  isEmphasized?: boolean;
 }
 
 interface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}
 
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'render' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps, CheckboxStyleProps {
+export interface CheckboxProps
+  extends
+    Omit<
+      CheckboxFieldProps,
+      | 'className'
+      | 'style'
+      | 'render'
+      | 'children'
+      | 'onHover'
+      | 'onHoverStart'
+      | 'onHoverEnd'
+      | 'onHoverChange'
+      | 'onClick'
+      | keyof GlobalDOMAttributes
+    >,
+    HelpTextProps,
+    StyleProps,
+    CheckboxStyleProps {
   /** The label for the element. */
-  children?: ReactNode
+  children?: ReactNode;
 }
 
-export const CheckboxContext = createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
+export const CheckboxContext =
+  createContext<
+    ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLInputElement, HTMLDivElement>>
+  >(null);
+
+const field = style(
+  {
+    display: 'grid',
+    gridTemplateColumns: {
+      default: ['max-content', '1fr'],
+      isNoVisibleLabel: ['max-content']
+    },
+    columnGap: 'text-to-control',
+    alignContent: 'start',
+    width: {
+      default: 'fit',
+      isInCheckboxGroup: 'auto'
+    },
+    font: controlFont(),
+    '--field-height': {
+      type: 'height',
+      value: controlSize()
+    },
+    rowGap: {
+      default: 'calc(var(--field-height) - 1lh)',
+      isInCheckboxGroup: {
+        size: {
+          S: space(1),
+          M: space(1),
+          L: 2,
+          XL: 2
+        }
+      }
+    },
+    gridColumnStart: {
+      isInForm: 'field'
+    }
+  },
+  getAllowedOverrides()
+);
 
 const wrapper = style({
-  display: 'flex',
+  display: 'grid',
+  gridTemplateColumns: 'subgrid',
+  gridColumnStart: 1,
+  gridColumnEnd: -1,
   position: 'relative',
-  columnGap: 'text-to-control',
   alignItems: 'baseline',
-  width: 'fit',
-  font: controlFont(),
   transition: 'colors',
   color: {
     default: baseColor('neutral'),
@@ -64,11 +133,8 @@ const wrapper = style({
       forcedColors: 'GrayText'
     }
   },
-  gridColumnStart: {
-    isInForm: 'field'
-  },
   disableTapHighlight: true
-}, getAllowedOverrides());
+});
 
 export const box = style<RenderProps>({
   ...focusRing(),
@@ -126,7 +192,7 @@ export const iconStyles = style({
   }
 });
 
-const iconSize = {
+const smallerSize = {
   S: 'XS',
   M: 'S',
   L: 'M',
@@ -137,7 +203,10 @@ const iconSize = {
  * Checkboxes allow users to select multiple items from a list of individual items,
  * or to mark one individual item as selected.
  */
-export const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+export const Checkbox = forwardRef(function Checkbox(
+  {children, ...props}: CheckboxProps,
+  ref: FocusableRef<HTMLInputElement, HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);
   let boxRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -148,47 +217,73 @@ export const Checkbox = forwardRef(function Checkbox({children, ...props}: Check
   let ctx = useSlottedContext(CheckboxContext, props.slot);
 
   return (
-    <AriaCheckbox
+    <CheckboxField
       {...props}
       ref={domRef}
       inputRef={inputRef}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + wrapper({...renderProps, isInForm, size: props.size || 'M'}, props.styles)}>
-      {renderProps => {
-        let checkbox = (
-          <div
-            ref={boxRef}
-            style={pressScale(boxRef)(renderProps)}
-            className={box({
-              ...renderProps,
-              isSelected: renderProps.isSelected || renderProps.isIndeterminate,
-              size: props.size || 'M',
-              isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized
-            })}>
-            {renderProps.isIndeterminate &&
-              <DashIcon size={iconSize[props.size || 'M']} className={iconStyles} />
-            }
-            {renderProps.isSelected && !renderProps.isIndeterminate &&
-              <CheckmarkIcon size={iconSize[props.size || 'M']} className={iconStyles} />
-            }
-          </div>
-        );
+      className={
+        (props.UNSAFE_className || '') +
+        field(
+          {size: props.size || 'M', isInCheckboxGroup, isNoVisibleLabel: !children},
+          props.styles
+        )
+      }>
+      {({isDisabled, isInvalid}) => (
+        <>
+          <CheckboxButton
+            className={renderProps => wrapper({...renderProps, isInForm, size: props.size || 'M'})}>
+            {renderProps => {
+              let checkbox = (
+                <div
+                  ref={boxRef}
+                  style={pressScale(boxRef)(renderProps)}
+                  className={box({
+                    ...renderProps,
+                    isSelected: renderProps.isSelected || renderProps.isIndeterminate,
+                    size: props.size || 'M',
+                    isEmphasized: isInCheckboxGroup ? ctx?.isEmphasized : props.isEmphasized
+                  })}>
+                  {renderProps.isIndeterminate && (
+                    <DashIcon size={smallerSize[props.size || 'M']} className={iconStyles} />
+                  )}
+                  {renderProps.isSelected && !renderProps.isIndeterminate && (
+                    <CheckmarkIcon size={smallerSize[props.size || 'M']} className={iconStyles} />
+                  )}
+                </div>
+              );
 
-        // Only render checkbox without center baseline if no label.
-        // This avoids expanding the checkbox height to the font's line height.
-        if (!children) {
-          return checkbox;
-        }
+              // Only render checkbox without center baseline if no label.
+              // This avoids expanding the checkbox height to the font's line height.
+              if (!children) {
+                return checkbox;
+              }
 
-        return (
-          <>
-            <CenterBaseline>
-              {checkbox}
-            </CenterBaseline>
-            {children}
-          </>
-        );
-      }}
-    </AriaCheckbox>
+              return (
+                <>
+                  <CenterBaseline>{checkbox}</CenterBaseline>
+                  <span className={style({gridColumnStart: 2})}>{children}</span>
+                </>
+              );
+            }}
+          </CheckboxButton>
+          <HelpText
+            size={isInCheckboxGroup ? smallerSize[props.size || 'M'] : props.size || 'M'}
+            styles={style({
+              gridColumnStart: {
+                default: 1,
+                isInCheckboxGroup: 2
+              },
+              paddingTop: 0
+            })({isInCheckboxGroup})}
+            isDisabled={isDisabled}
+            isInvalid={isInCheckboxGroup ? false : isInvalid}
+            description={props.description}
+            showErrorIcon>
+            {props.errorMessage}
+          </HelpText>
+        </>
+      )}
+    </CheckboxField>
   );
 });