@react-spectrum/s2 0.5.0 → 0.7.0

package/src/RadioGroup.tsx

@@ -28,7 +28,7 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
   /**
    * The Radios contained within the RadioGroup.
    */
-  children?: ReactNode,
+  children: ReactNode,
   /**
    * The size of the RadioGroup.
    *
@@ -47,9 +47,13 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
   isEmphasized?: boolean
 }
 
-export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+export const RadioGroupContext = createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Radio groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -132,11 +136,4 @@ function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </AriaRadioGroup>
   );
-}
-
-/**
- * Radio groups allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-let _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
-export {_RadioGroup as RadioGroup};
+});

package/src/RangeSlider.tsx

@@ -37,9 +37,9 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
   endName?: string
 }
 
-export const RangeSliderContext = createContext<ContextValue<RangeSliderProps, FocusableRefValue<HTMLDivElement>>>(null);
+export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
-function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);
   let formContext = useContext(FormContext);
@@ -124,7 +124,4 @@ function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>)
       </SliderTrack>
     </SliderBase>
   );
-}
-
-let _RangeSlider = /*#__PURE__*/ forwardRef(RangeSlider);
-export {_RangeSlider as RangeSlider};
+});

package/src/SearchField.tsx

@@ -40,9 +40,12 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);
+export const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
 
-function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * A SearchField is a text field designed for searches.
+ */
+export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -151,10 +154,4 @@ function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
       </>)}
     </AriaSearchField>
   );
-}
-
-/**
- * A SearchField is a text field designed for searches.
- */
-let _SearchField = /*#__PURE__*/ forwardRef(SearchField);
-export {_SearchField as SearchField};
+});

package/src/SegmentedControl.tsx

@@ -19,7 +19,7 @@ import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
-import {useDOMRef, useFocusableRef} from '@react-spectrum/utils';
+import {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -52,7 +52,7 @@ export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps
   isDisabled?: boolean
 }
 
-export const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);
+export const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const segmentedControl = style({
   display: 'flex',
@@ -143,7 +143,7 @@ interface InternalSegmentedControlContextProps {
 interface DefaultSelectionTrackProps {
   defaultValue?: Key | null,
   value?: Key | null,
-  children?: ReactNode,
+  children: ReactNode,
   prevRef: RefObject<DOMRect | null>,
   currentSelectedRef: RefObject<HTMLDivElement | null>,
   isJustified?: boolean
@@ -151,7 +151,10 @@ interface DefaultSelectionTrackProps {
 
 const InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});
 
-function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
+ */
+export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);
   let {
     defaultSelectedKey,
@@ -190,7 +193,7 @@ function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivEleme
       </DefaultSelectionTracker>
     </ToggleButtonGroup>
   );
-}
+});
 
 function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   let state = useContext(ToggleGroupStateContext);
@@ -214,24 +217,24 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   );
 }
 
-function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * A SegmentedControlItem represents an option within a SegmentedControl.
+ */
+export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
   let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);
   let state = useContext(ToggleGroupStateContext);
   let isSelected = state?.selectedKeys.has(props.id);
   // do not apply animation if a user has the prefers-reduced-motion setting
-  let isReduced = false;
-  if (window?.matchMedia) {
-    isReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-  }
+  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
 
   useLayoutEffect(() => {
     register?.(props.id);
   }, []);
 
   useLayoutEffect(() => {
-    if (isSelected && prevRef?.current && currentSelectedRef?.current && !isReduced) {
+    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
       let currentItem = currentSelectedRef?.current.getBoundingClientRect();
 
       let deltaX = prevRef?.current.left - currentItem?.left;
@@ -249,7 +252,7 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
 
       prevRef.current = null;
     }
-  }, [isSelected]);
+  }, [isSelected, reduceMotion]);
 
   return (
     <ToggleButton 
@@ -277,16 +280,4 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
       }
     </ToggleButton>
   );
-}
-
-/**
- * A SegmentedControlItem represents an option within a SegmentedControl.
- */
-const _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);
-export {_SegmentedControlItem as SegmentedControlItem};
-
-/**
- * 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

@@ -12,18 +12,16 @@
 
 import {cloneElement, createContext, CSSProperties, ReactElement, ReactNode, Ref, useCallback, useContext, useRef} from 'react';
 import {colorToken} from '../style/tokens' with {type: 'macro'};
-import {mergeRefs} from '@react-aria/utils';
+import {inertValue, mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
-
-let reduceMotion = typeof window?.matchMedia === 'function'
-  ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-  : false;
+import {useMediaQuery} from '@react-spectrum/utils';
 
 export function useLoadingAnimation(isAnimating: boolean) {
   let animationRef = useRef<Animation | null>(null);
+  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
   return useCallback((element: HTMLElement | null) => {
     if (isAnimating && !animationRef.current && element && !reduceMotion) {
       // Use web animation API instead of CSS animations so that we can
@@ -48,7 +46,7 @@ export function useLoadingAnimation(isAnimating: boolean) {
 }
 
 export type SkeletonElement = ReactElement<{
-  children?: ReactNode,
+  children: ReactNode,
   className?: string,
   ref?: Ref<HTMLElement>,
   inert?: boolean | 'true'
@@ -82,7 +80,7 @@ export const loadingStyle = raw(`
   * {
     visibility: hidden;
   }
-`, 'UNSAFE_overrides');
+`, 'L'); // add to a separate layer so it overrides default style macro styles
 
 export function useSkeletonText(children: ReactNode, style: CSSProperties | undefined): [ReactNode, CSSProperties | undefined] {
   let isSkeleton = useContext(SkeletonContext);
@@ -103,7 +101,7 @@ export function SkeletonText({children}) {
   return (
     <span
       // @ts-ignore - compatibility with React < 19
-      inert="true"
+      inert={inertValue(true)}
       ref={useLoadingAnimation(true)}
       className={loadingStyle + style({
         color: 'transparent',

package/src/Slider.tsx

@@ -66,7 +66,7 @@ export interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>,
   fillOffset?: number
 }
 
-export const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);
+export const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
 const slider = style({
   font: 'control',
@@ -389,7 +389,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
   );
 }
 
-function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SliderContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -443,7 +443,4 @@ function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
       </SliderTrack>
     </SliderBase>
   );
-}
-
-let _Slider = /*#__PURE__*/ forwardRef(Slider);
-export {_Slider as Slider};
+});

package/src/StatusLight.tsx

@@ -49,7 +49,7 @@ export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaL
   role?: 'status'
 }
 
-export const StatusLightContext = createContext<ContextValue<StatusLightProps, DOMRefValue<HTMLDivElement>>>(null);
+export const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const wrapper = style<StatusLightStyleProps>({
   display: 'flex',
@@ -102,7 +102,11 @@ const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
   overflow: 'visible' // prevents the light from getting clipped on iOS
 });
 
-function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Status lights are used to color code categories and labels commonly found in data visualization.
+ * When status lights have a semantic meaning, they should use semantic variant colors.
+ */
+export const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
   let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
   let domRef = useDOMRef(ref);
@@ -131,11 +135,4 @@ function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
       <Text>{children}</Text>
     </div>
   );
-}
-
-/**
- * Status lights are used to color code categories and labels commonly found in data visualization.
- * When status lights have a semantic meaning, they should use semantic variant colors.
- */
-let _StatusLight = /*#__PURE__*/ forwardRef(StatusLight);
-export {_StatusLight as StatusLight};
+});

package/src/Switch.tsx

@@ -45,7 +45,7 @@ export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style'
   children?: ReactNode
 }
 
-export const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);
+export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',
@@ -149,7 +149,11 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
     : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
 });
 
-function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -184,11 +188,4 @@ function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
       )}
     </AriaSwitch>
   );
-}
-
-/**
- * Switches allow users to turn an individual option on or off.
- * They are usually used to activate or deactivate a specific setting.
- */
-let _Switch = /*#__PURE__*/ forwardRef(Switch);
-export {_Switch as Switch};
+});