Update API diff (#186)

Author: devongovett

packages/@react-spectrum/s2/api-diff.md

@@ -109,6 +109,16 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 |------|------------|--------|----------|
 | isDisabled | – | 🔴 `boolean` | Focusable/interactive Avatars aren't supported in S2 yet. |
 | size | – | 🔴 `'avatar-size-100' \| 'avatar-size-200' \| 'avatar-size-300' \| 'avatar-size-400' \| 'avatar-size-50' \| 'avatar-size-500' \| 'avatar-size-600' \| 'avatar-size-700' \| 'avatar-size-75' \| (string & {<br>  <br>}) \| number` | This prop has been removed in favor of providing a size via the `styles` prop. |
+## Breadcrumbs
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| dependencies | 🟢 `Array<any>` | – | |
+| slot | 🟢 `null \| string` | – | |
+| size | 🟢 `'L' \| 'M'` | 🔴 `'L' \| 'M' \| 'S'` | Small is no longer supported in Spectrum Design. |
+| showRoot | – | 🔴 `boolean` | Not yet implemented in S2. |
+| isMultiline | – | 🔴 `boolean` | Not yet implemented in S2. |
+| autoFocusCurrent | – | 🔴 `boolean` | Not yet implemented in S2. |
 ## ButtonGroup
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -127,9 +137,40 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | Prop | Spectrum 2 | RSP v3 | Comments |
 |------|------------|--------|----------|
 | size | 🟢 `'L' \| 'M' \| 'S' \| 'XL'` | – | |
+## ColorArea
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| slot | 🟢 `null \| string` | – | |
+| size | – | 🔴 `DimensionValue` | Set size via `style` macro instead. |
+## ColorWheel
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| size | 🟢 `number` | 🔴 `DimensionValue` | Use pixel values instead. |
+| slot | 🟢 `null \| string` | – | |
+## ColorSlider
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| label | 🟢 `string` | 🔴 `ReactNode` | |
+| slot | 🟢 `null \| string` | – | |
+| showValueLabel | – | 🔴 `boolean` | Removed for accessibility reasons. |
+## ColorField
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| size | 🟢 `'L' \| 'M' \| 'S' \| 'XL'` | – | |
+| isInvalid | 🟢 `boolean` | – | |
+| slot | 🟢 `null \| string` | – | |
+| isQuiet | – | 🔴 `boolean` | Not supported in S2 design. |
+| placeholder | – | 🔴 `string` | Removed for accessibility reasons. |
+| validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
+## ColorSwatch
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
 | slot | 🟢 `null \| string` | – | |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
-| showErrorIcon | – | 🔴 `boolean` | Removed for accessibility reasons. |
 ## ComboBox
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -142,8 +183,12 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | loadingState | – | 🔴 `LoadingState` | Not yet implemented in S2. |
 | placeholder | – | 🔴 `string` | Removed for accessibility reasons. |
 | validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
 | onLoadMore | – | 🔴 `() => any` | Not yet implemented in S2. |
+## ContextualHelp
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| size | 🟢 `'S' \| 'XS'` | – | |
 ## Dialog
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -240,7 +285,6 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
 | isLoading | – | 🔴 `boolean` | Not yet implemented in S2. |
 | onLoadMore | – | 🔴 `() => any` | Not yet implemented in S2. |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
 ## ProgressBar
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -270,7 +314,6 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | slot | 🟢 `null \| string` | – | |
 | validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
 | showErrorIcon | – | 🔴 `boolean` | Removed for accessibility reasons. |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
 ## SearchField
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -282,7 +325,34 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | icon | – | 🔴 `ReactElement \| null` | Not yet implemented in S2. |
 | isQuiet | – | 🔴 `boolean` | Not supported in S2 design. |
 | validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
+## Slider
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| size | 🟢 `'L' \| 'M' \| 'S' \| 'XL'` | – | |
+| labelAlign | 🟢 `Alignment` | – | |
+| isEmphasized | 🟢 `boolean` | – | |
+| trackStyle | 🟢 `'thick' \| 'thin'` | – | |
+| thumbStyle | 🟢 `'default' \| 'precise'` | – | |
+| slot | 🟢 `null \| string` | – | |
+| isFilled | – | 🔴 `boolean` | Always filled in S2 design. |
+| trackGradient | – | 🔴 `Array<string>` | Not supported in S2 design. |
+| showValueLabel | – | 🔴 `boolean` | Removed for accessibility reasons. |
+| getValueLabel | – | 🔴 `(number) => string` | Not yet implemented in S2. |
+| orientation | – | 🔴 `Orientation` | Not yet implemented in S2. |
+## RangeSlider
+
+| Prop | Spectrum 2 | RSP v3 | Comments |
+|------|------------|--------|----------|
+| size | 🟢 `'L' \| 'M' \| 'S' \| 'XL'` | – | |
+| labelAlign | 🟢 `Alignment` | – | |
+| isEmphasized | 🟢 `boolean` | – | |
+| trackStyle | 🟢 `'thick' \| 'thin'` | – | |
+| thumbStyle | 🟢 `'default' \| 'precise'` | – | |
+| slot | 🟢 `null \| string` | – | |
+| showValueLabel | – | 🔴 `boolean` | Removed for accessibility reasons. |
+| getValueLabel | – | 🔴 `(RangeValue<number>) => string` | Not yet implemented in S2. |
+| orientation | – | 🔴 `Orientation` | Not yet implemented in S2. |
 ## StatusLight
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -314,7 +384,6 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | actionLabel | – | 🔴 `string` | Not yet implemented in S2.|
 | onAction | – | 🔴 `() => void` | Not yet implemented in S2. |
 | maxRows | – | 🔴 `number` | Not yet implemented in S2. |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
 | validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
 ## TextArea
 
@@ -327,7 +396,6 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | isQuiet | – | 🔴 `boolean` | Not supported in S2 design. |
 | placeholder | – | 🔴 `string` | Removed for accessibility reasons. |
 | validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
 ## TextField
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -339,7 +407,6 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | isQuiet | – | 🔴 `boolean` | Not supported in S2 design. |
 | placeholder | – | 🔴 `string` | Removed for accessibility reasons. |
 | validationState | – | 🔴 `ValidationState` | Use `isInvalid` instead. |
-| contextualHelp | – | 🔴 `ReactNode` | Not yet implemented in S2. |
 ## Tooltip
 
 | Prop | Spectrum 2 | RSP v3 | Comments |
@@ -354,19 +421,27 @@ React Spectrum v3 [style props](https://react-spectrum.adobe.com/react-spectrum/
 | Prop | Spectrum 2 | RSP v3 | Comments |
 |------|------------|--------|----------|
 | placement | 🟢 `'bottom' \| 'end' \| 'left' \| 'right' \| 'start' \| 'top'` | 🔴 `'bottom' \| 'bottom left' \| 'bottom right' \| 'bottom start' \| 'bottom end' \| 'top' \| 'top left' \| 'top right' \| 'top start' \| 'top end' \| 'left' \| 'left top' \| 'left bottom' \| 'start' \| 'start top' \| 'start bottom' \| 'right' \| 'right top' \| 'right bottom' \| 'end' \| 'end top' \| 'end bottom'` | |
-
 ## Item
 
 The v3 `Item` component has been split into multiple components depending on the type of collection it is within. These include:
 
 * MenuItem
+* PickerItem
+* ComboBoxItem
+* Breadcrumb
 * Tag
 
 In addition, the `key` prop has been renamed to `id` on all item components.
 
 ## Section
 
-The v3 `Section` component used in `Menu` is now named `MenuSection`. This accepts a `Header` as a child instead of a `title` prop. Both a heading and description are now supported within a section header.
+The v3 `Section` component has been split into multiple components depending on the type of collection it is within. These include:
+
+* MenuSection
+* PickerSection
+* ComboBoxSection
+
+The section components accept a `Header` as a child instead of a `title` prop. Both a heading and description are now supported within a section header.
 
 ```jsx
 <MenuSection>

packages/@react-spectrum/s2/src/ActionButton.tsx

@@ -41,7 +41,7 @@ interface ToggleButtonStyleProps {
   isEmphasized?: boolean
 }
 
-export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd'>, StyleProps, ActionButtonStyleProps {
+export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the ActionButton. */
   children?: ReactNode
 }

packages/@react-spectrum/s2/src/Breadcrumbs.tsx

@@ -36,7 +36,7 @@ interface BreadcrumbsStyleProps {
   // TODO: showRoot?: boolean,
 }
 
-export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {
+export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
   children?: ReactNode
 }
@@ -216,7 +216,7 @@ const heading = style({
   fontWeight: 'extra-bold'
 });
 
-export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className'>, LinkDOMProps {
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {
   /** The children of the breadcrumb item. */
   children?: ReactNode
 }

packages/@react-spectrum/s2/src/Button.tsx

@@ -45,7 +45,7 @@ interface ButtonStyleProps {
   staticColor?: 'white' | 'black'
 }
 
-export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd'>, StyleProps, ButtonStyleProps {
+export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
   children?: ReactNode
 }

packages/@react-spectrum/s2/src/Checkbox.tsx

@@ -35,7 +35,7 @@ interface CheckboxStyleProps {
 
 interface RenderProps extends CheckboxRenderProps, CheckboxStyleProps {}
 
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd'>, StyleProps, CheckboxStyleProps {
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, CheckboxStyleProps {
   /** The label for the element. */
   children?: ReactNode
 }

packages/@react-spectrum/s2/src/DropZone.tsx

@@ -18,7 +18,7 @@ import {StylesPropWithHeight, UnsafeStyles, getAllowedOverrides} from './style-u
 import {DOMProps, DOMRef} from '@react-types/shared';
 import {useDOMRef} from '@react-spectrum/utils';
 
-export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd'>, UnsafeStyles, DOMProps {
+export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the drop zone. */

packages/@react-spectrum/s2/src/Link.tsx

@@ -31,7 +31,7 @@ interface LinkStyleProps {
   isQuiet?: boolean
 }
 
-export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd'>, StyleProps, LinkStyleProps {
+export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {
   children?: ReactNode
 }
 

packages/@react-spectrum/s2/src/Radio.tsx

@@ -24,7 +24,7 @@ import {
 } from 'react-aria-components';
 import {useFocusableRef} from '@react-spectrum/utils';
 
-export interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd'>, StyleProps {
+export interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {
   /**
    * The label for the element.
    */

packages/@react-spectrum/s2/src/RangeSlider.tsx

@@ -14,27 +14,29 @@ import {
   SliderThumb,
   SliderTrack
 } from 'react-aria-components';
-import {SliderBase, SliderProps, thumb, thumbContainer, thumbHitArea, upperTrack, filledTrack, track} from './Slider';
-import {FocusableRef} from '@react-types/shared';
+import {SliderBase, SliderBaseProps, thumb, thumbContainer, thumbHitArea, upperTrack, filledTrack, track} from './Slider';
+import {FocusableRef, RangeValue} from '@react-types/shared';
 import {useRef, forwardRef, useContext} from 'react';
-import {forwardRefType} from './types';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocale} from '@react-aria/i18n';
 import {FormContext, useFormProps} from './Form';
 import {pressScale} from './pressScale';
 
-export interface RangeSliderProps<T> extends Omit<SliderProps<T>, 'fillOffset' | 'thumbLabel'> {
+export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number>>, 'children'> {
   /**
-   * The label for each of the Slider's thumbs.
+   * The name of the start input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
    */
-  thumbLabels?: string[]
+  startName?: string,
+  /**
+   * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+   */
+  endName?: string
 }
 
-function RangeSlider<T extends number | number[]>(props: RangeSliderProps<T>, ref: FocusableRef<HTMLDivElement>) {
+function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {
-    thumbLabels, 
     labelPosition = 'top', 
     size = 'M',
     isEmphasized,
@@ -52,14 +54,19 @@ function RangeSlider<T extends number | number[]>(props: RangeSliderProps<T>, re
   return (
     <SliderBase
       {...props}
+      value={props.value ? [props.value.start, props.value.end] : undefined}
+      defaultValue={props.defaultValue ? [props.defaultValue.start, props.defaultValue.end] : undefined}
+      onChange={v => props.onChange?.({start: v[0], end: v[1]})}
+      onChangeEnd={v => props.onChangeEnd?.({start: v[0], end: v[1]})}
       sliderRef={domRef}>
       <SliderTrack
         className={track({size, labelPosition, isInForm: !!formContext})}>
         {({state, isDisabled}) => (
           <>
             <div className={upperTrack({isDisabled, trackStyle})} />
             <div style={{width: `${Math.abs(state.getThumbPercent(0) - state.getThumbPercent(1)) * 100}%`, [cssDirection]: `${state.getThumbPercent(0) * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />
-            <SliderThumb className={thumbContainer} index={0} aria-label={thumbLabels?.[0]} ref={lowerThumbRef} style={(renderProps) => pressScale(lowerThumbRef, {transform: 'translate(-50%, -50%)', zIndex: state.getThumbPercent(0) === 1 ? 1 : undefined})({...renderProps, isPressed: renderProps.isDragging})}>
+            {/* TODO: translations */}
+            <SliderThumb className={thumbContainer} index={0} name={props.startName} aria-label="minimum" ref={lowerThumbRef} style={(renderProps) => pressScale(lowerThumbRef, {transform: 'translate(-50%, -50%)', zIndex: state.getThumbPercent(0) === 1 ? 1 : undefined})({...renderProps, isPressed: renderProps.isDragging})}>
               {(renderProps) => (
                 <div className={thumbHitArea({size})}>
                   <div
@@ -71,7 +78,7 @@ function RangeSlider<T extends number | number[]>(props: RangeSliderProps<T>, re
                 </div>
               )}
             </SliderThumb>
-            <SliderThumb  className={thumbContainer} index={1} aria-label={thumbLabels?.[1]} ref={upperThumbRef} style={(renderProps) => pressScale(upperThumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>
+            <SliderThumb  className={thumbContainer} index={1} name={props.endName} aria-label="maximum" ref={upperThumbRef} style={(renderProps) => pressScale(upperThumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>
               {(renderProps) => (
                 <div className={thumbHitArea({size})}>
                   <div
@@ -90,5 +97,5 @@ function RangeSlider<T extends number | number[]>(props: RangeSliderProps<T>, re
   );
 }
 
-let _RangeSlider = /*#__PURE__*/ (forwardRef as forwardRefType)(RangeSlider);
+let _RangeSlider = /*#__PURE__*/ forwardRef(RangeSlider);
 export {_RangeSlider as RangeSlider};