@react-spectrum/s2 3.0.0-nightly-5ae234603-240925 → 3.0.0-nightly-d57bd8d90-240927

package/src/ProgressCircle.tsx

@@ -13,9 +13,9 @@
 import {ContextValue, ProgressBar as RACProgressBar, ProgressBarProps as RACProgressBarProps} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -45,8 +45,7 @@ const wrapper = style<ProgressCircleStyleProps>({
       L: 64
     }
   },
-  aspectRatio: 'square',
-  display: 'inline-block'
+  aspectRatio: 'square'
 }, getAllowedOverrides({height: true}));
 
 const track = style<ProgressCircleStyleProps>({
@@ -73,7 +72,10 @@ const fill = style<ProgressCircleStyleProps>({
   transformOrigin: 'center'
 });
 
-export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, StyleProps {}
+export interface ProgressCircleProps extends Omit<RACProgressBarProps, 'children' | 'style' | 'valueLabel' | 'formatOptions' | 'label' | 'className'>, ProgressCircleStyleProps, UnsafeStyles {
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight
+}
 
 const rotationAnimation = keyframes(`
   0% {

package/src/Provider.tsx

@@ -16,7 +16,7 @@ import {createContext, JSX, ReactNode, useContext} from 'react';
 import {generateDefaultColorSchemeStyles} from './page.macro' with {type: 'macro'};
 import {I18nProvider, RouterProvider, useLocale} from 'react-aria-components';
 import {mergeStyles} from '../style/runtime';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 
 export interface ProviderProps extends UnsafeStyles {

package/src/Radio.tsx

@@ -15,12 +15,12 @@ import {
   RadioProps as AriaRadioProps,
   RadioRenderProps
 } from 'react-aria-components';
-import {baseColor, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {FocusableRef} from '@react-types/shared';
-import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {forwardRef, ReactNode, useContext, useRef} from 'react';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 

package/src/RadioGroup.tsx

@@ -20,7 +20,7 @@ import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type:
 import {FieldLabel, HelpText} from './Field';
 import {FormContext, useFormProps} from './Form';
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 

package/src/SearchField.tsx

@@ -22,7 +22,7 @@ import {createContext, forwardRef, Ref, useContext, useImperativeHandle, useRef}
 import {createFocusableRef} from '@react-spectrum/utils';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText, Input} from './Field';
-import {fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {fontRelative, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';

package/src/SegmentedControl.tsx

@@ -10,20 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupProps, RadioGroupStateContext, RadioProps} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
-import {DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';
-import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {focusRing, size, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {Text, TextContext} from './Content';
 import {useDOMRef, useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly' | 'name' | 'isRequired' | 'isInvalid' | 'validate' | 'validationBehavior' | 'children' | 'className' | 'style' | 'aria-label' | 'orientation'>, StyleProps{
+export interface SegmentedControlProps extends AriaLabelingProps, StyleProps, SlotProps {
   /**
    * The content to display in the segmented control.
    */
@@ -32,16 +32,22 @@ export interface SegmentedControlProps extends Omit<RadioGroupProps, 'isReadOnly
    * Whether the segmented control is disabled.
    */
   isDisabled?: boolean,
-  /**
-   * Defines a string value that labels the current element.
-   */
-  'aria-label': string
+  /** The id of the currently selected item (controlled). */
+  selectedKey?: string | null,
+  /** The id of the initial selected item (uncontrolled). */
+  defaultSelectedKey?: string,
+  /** Handler that is called when the selection changes. */
+  onSelectionChange?: (id: string) => void
 }
-export interface SegmentedControlItemProps extends Omit<RadioProps, 'children' | 'className' | 'style' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps {
+export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {
   /**
-   * The content to display in the control item.
+   * The content to display in the segmented control item.
    */
-  children: ReactNode
+  children: ReactNode,
+  /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */
+  id: string,
+  /** Whether the item is disabled or not. */
+  isDisabled?: boolean
 }
 
 export const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);
@@ -135,8 +141,9 @@ const InternalSegmentedControlContext = createContext<InternalSegmentedControlCo
 function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);
   let {
-    defaultValue,
-    value
+    defaultSelectedKey,
+    selectedKey,
+    onSelectionChange
   } = props;
   let domRef = useDOMRef(ref);
 
@@ -148,21 +155,23 @@ function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivEleme
       prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
     }
     
-    if (props.onChange) {
-      props.onChange(value);
+    if (onSelectionChange) {
+      onSelectionChange(value);
     }
   };
 
   return (
     <RadioGroup 
       {...props}
+      value={selectedKey}
+      defaultValue={defaultSelectedKey}
       ref={domRef}
       orientation="horizontal"
       style={props.UNSAFE_style}
       onChange={onChange}
       className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}
       aria-label={props['aria-label']}>
-      <DefaultSelectionTracker defaultValue={defaultValue} value={value} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>
+      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>
         {props.children}
       </DefaultSelectionTracker>
     </RadioGroup>
@@ -197,7 +206,7 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
   let divRef = useRef<HTMLDivElement>(null);
   let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);
   let state = useContext(RadioGroupStateContext);
-  let isSelected = props.value === state?.selectedValue;
+  let isSelected = props.id === state?.selectedValue;
   // do not apply animation if a user has the prefers-reduced-motion setting
   let isReduced = false;
   if (window?.matchMedia) {
@@ -205,7 +214,7 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
   }
 
   useLayoutEffect(() => {
-    register?.(props.value);
+    register?.(props.id);
   }, []);
 
   useLayoutEffect(() => {
@@ -231,7 +240,8 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
 
   return (
     <Radio 
-      {...props} 
+      {...props}
+      value={props.id}
       ref={domRef} 
       inputRef={inputRef}
       style={props.UNSAFE_style}
@@ -259,13 +269,13 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
 }
 
 /**
- * A control items represents an individual control within a segmented control.
+ * A SegmentedControlItem represents an option within a SegmentedControl.
  */
 const _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);
 export {_SegmentedControlItem as SegmentedControlItem};
 
 /**
- * A segmented control is a mutually exclusive group of buttons, with or without a track.
+ * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
  */
 const _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);
 export {_SegmentedControl as SegmentedControl};

package/src/Skeleton.tsx

@@ -15,7 +15,7 @@ import {colorToken} from '../style/tokens' with {type: 'macro'};
 import {mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import {style} from '../style/spectrum-theme' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 
 let reduceMotion = typeof window?.matchMedia === 'function'
@@ -64,6 +64,9 @@ export interface SkeletonProps {
   isLoading: boolean
 }
 
+/**
+ * A Skeleton wraps around content to render it as a placeholder.
+ */
 export function Skeleton({children, isLoading}: SkeletonProps) {
   // Disable all form components inside a skeleton.
   return (

package/src/SkeletonCollection.tsx

@@ -19,6 +19,10 @@ export interface SkeletonCollectionProps {
 }
 
 let cache = new WeakMap();
+
+/**
+ * A SkeletonCollection generates placeholder content within a collection component such as CardView.
+ */
 export const SkeletonCollection = createLeafComponent('skeleton', (props: SkeletonCollectionProps, ref, node) => {
   // Cache rendering based on node object identity. This allows the children function to randomize
   // its content (e.g. heights) and preserve on re-renders.

package/src/Slider.tsx

@@ -20,13 +20,13 @@ import {
 } from 'react-aria-components';
 import {clamp} from '@react-aria/utils';
 import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
-import {field, fieldInput, focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldLabel} from './Field';
 import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
+import {focusRing, size, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {mergeStyles} from '../style/runtime';
 import {pressScale} from './pressScale';
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocale, useNumberFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';

package/src/StatusLight.tsx

@@ -16,7 +16,7 @@ import {ContextValue, SlotProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {size, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {size, style} from '../style' with {type: 'macro'};
 import {Text} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useIsSkeleton} from './Skeleton';

package/src/Switch.tsx

@@ -16,12 +16,12 @@ import {
   ContextValue,
   SwitchRenderProps
 } from 'react-aria-components';
-import {baseColor, fontRelative, style} from '../style/spectrum-theme' with {type: 'macro'};
+import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';