@react-spectrum/s2 3.0.0-nightly-988096cf3-250218 → 3.0.0-nightly-90b6fd4f7-250221

package/src/CardView.tsx

@@ -13,18 +13,19 @@
 import {
   GridList as AriaGridList,
   ContextValue,
-  GridLayoutOptions,
+  GridLayout,
   GridListItem,
   GridListProps,
-  UNSTABLE_Virtualizer
+  Virtualizer,
+  WaterfallLayout
 } from 'react-aria-components';
 import {CardContext, InternalCardViewContext} from './Card';
 import {createContext, forwardRef, ReactElement, useMemo, useRef, useState} from 'react';
-import {DOMRef, DOMRefValue, forwardRefType, Key, LayoutDelegate, LoadingState, Node} from '@react-types/shared';
+import {DOMRef, DOMRefValue, forwardRefType, 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 {ImageCoordinator} from './ImageCoordinator';
-import {InvalidationContext, Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
+import {Size} from '@react-stately/virtualizer';
 import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useEffectEvent, useLayoutEffect, useLoadMore, useResizeObserver} from '@react-aria/utils';
@@ -66,359 +67,6 @@ export interface CardViewProps<T> extends Omit<GridListProps<T>, 'layout' | 'key
   renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
-class FlexibleGridLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> {
-  protected contentSize: Size = new Size();
-  protected layoutInfos: Map<Key, LayoutInfo> = new Map();
-
-  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {
-    let {
-      minItemSize = new Size(200, 200),
-      maxItemSize = new Size(Infinity, Infinity),
-      minSpace = new Size(18, 18),
-      maxColumns = Infinity
-    } = invalidationContext.layoutOptions || {};
-    let visibleWidth = this.virtualizer!.visibleRect.width;
-
-    // The max item width is always the entire viewport.
-    // If the max item height is infinity, scale in proportion to the max width.
-    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
-    let maxItemHeight = Number.isFinite(maxItemSize.height)
-      ? maxItemSize.height
-      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);
-
-    // Compute the number of rows and columns needed to display the content
-    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
-    let numColumns = Math.max(1, Math.min(maxColumns, columns));
-
-    // Compute the available width (minus the space between items)
-    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));
-
-    // Compute the item width based on the space available
-    let itemWidth = Math.floor(width / numColumns);
-    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
-
-    // Compute the item height, which is proportional to the item width
-    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));
-    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);
-    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
-
-    // Compute the horizontal spacing and content height
-    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
-
-    let rows = Math.ceil(this.virtualizer!.collection.size / numColumns);
-    let iterator = this.virtualizer!.collection[Symbol.iterator]();
-    let y = rows > 0 ? minSpace.height : 0;
-    let newLayoutInfos = new Map();
-    let skeleton: Node<T> | null = null;
-    let skeletonCount = 0;
-    for (let row = 0; row < rows; row++) {
-      let maxHeight = 0;
-      let rowLayoutInfos: LayoutInfo[] = [];
-      for (let col = 0; col < numColumns; col++) {
-        // Repeat skeleton until the end of the current row.
-        let node = skeleton || iterator.next().value;
-        if (!node) {
-          break;
-        }
-
-        if (node.type === 'skeleton') {
-          skeleton = node;
-        }
-
-        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
-        let content = skeleton ? {...skeleton} : node;
-        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
-        let oldLayoutInfo = this.layoutInfos.get(key);
-        let height = itemHeight;
-        let estimatedSize = true;
-        if (oldLayoutInfo) {
-          height = oldLayoutInfo.rect.height;
-          estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);
-        }
-
-        let rect = new Rect(x, y, itemWidth, height);
-        let layoutInfo = new LayoutInfo(node.type, key, rect);
-        layoutInfo.estimatedSize = estimatedSize;
-        layoutInfo.allowOverflow = true;
-        layoutInfo.content = content;
-        newLayoutInfos.set(key, layoutInfo);
-        rowLayoutInfos.push(layoutInfo);
-
-        maxHeight = Math.max(maxHeight, rect.height);
-      }
-
-      for (let layoutInfo of rowLayoutInfos) {
-        layoutInfo.rect.height = maxHeight;
-      }
-
-      y += maxHeight + minSpace.height;
-
-      // Keep adding skeleton rows until we fill the viewport
-      if (skeleton && row === rows - 1 && y < this.virtualizer!.visibleRect.height) {
-        rows++;
-      }
-    }
-
-    this.layoutInfos = newLayoutInfos;
-    this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
-  }
-
-  getLayoutInfo(key: Key): LayoutInfo {
-    return this.layoutInfos.get(key)!;
-  }
-
-  getContentSize(): Size {
-    return this.contentSize;
-  }
-
-  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
-    let layoutInfos: LayoutInfo[] = [];
-    for (let layoutInfo of this.layoutInfos.values()) {
-      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
-        layoutInfos.push(layoutInfo);
-      }
-    }
-    return layoutInfos;
-  }
-
-  updateItemSize(key: Key, size: Size) {
-    let layoutInfo = this.layoutInfos.get(key);
-    if (!size || !layoutInfo) {
-      return false;
-    }
-
-    if (size.height !== layoutInfo.rect.height) {
-      let newLayoutInfo = layoutInfo.copy();
-      newLayoutInfo.rect.height = size.height;
-      newLayoutInfo.estimatedSize = false;
-      this.layoutInfos.set(key, newLayoutInfo);
-      return true;
-    }
-
-    return false;
-  }
-}
-
-class WaterfallLayoutInfo extends LayoutInfo {
-  column = 0;
-
-  copy(): WaterfallLayoutInfo {
-    let res = super.copy() as WaterfallLayoutInfo;
-    res.column = this.column;
-    return res;
-  }
-}
-
-class WaterfallLayout<T extends object> extends Layout<Node<T>, GridLayoutOptions> implements LayoutDelegate {
-  protected contentSize: Size = new Size();
-  protected layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();
-  protected numColumns = 0;
-
-  update(invalidationContext: InvalidationContext<GridLayoutOptions>): void {
-    let {
-      minItemSize = new Size(200, 200),
-      maxItemSize = new Size(Infinity, Infinity),
-      minSpace = new Size(18, 18),
-      maxColumns = Infinity
-    } = invalidationContext.layoutOptions || {};
-    let visibleWidth = this.virtualizer!.visibleRect.width;
-
-    // The max item width is always the entire viewport.
-    // If the max item height is infinity, scale in proportion to the max width.
-    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
-    let maxItemHeight = Number.isFinite(maxItemSize.height)
-      ? maxItemSize.height
-      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);
-
-    // Compute the number of rows and columns needed to display the content
-    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
-    let numColumns = Math.max(1, Math.min(maxColumns, columns));
-
-    // Compute the available width (minus the space between items)
-    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));
-
-    // Compute the item width based on the space available
-    let itemWidth = Math.floor(width / numColumns);
-    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
-
-    // Compute the item height, which is proportional to the item width
-    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));
-    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);
-    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
-
-    // Compute the horizontal spacing and content height
-    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
-
-    // Setup an array of column heights
-    let columnHeights = Array(numColumns).fill(minSpace.height);
-    let newLayoutInfos = new Map();
-    let addNode = (key: Key, node: Node<T>) => {
-      let oldLayoutInfo = this.layoutInfos.get(key);
-      let height = itemHeight;
-      let estimatedSize = true;
-      if (oldLayoutInfo) {
-        height = oldLayoutInfo.rect.height;
-        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;
-      }
-
-      // Figure out which column to place the item in, and compute its position.
-      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
-      let prevColumn = numColumns === this.numColumns ? oldLayoutInfo?.column : undefined;
-      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);
-      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);
-      let y = columnHeights[column];
-
-      let rect = new Rect(x, y, itemWidth, height);
-      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);
-      layoutInfo.estimatedSize = estimatedSize;
-      layoutInfo.allowOverflow = true;
-      layoutInfo.content = node;
-      layoutInfo.column = column;
-      newLayoutInfos.set(key, layoutInfo);
-
-      columnHeights[column] += layoutInfo.rect.height + minSpace.height;
-    };
-
-    let skeletonCount = 0;
-    for (let node of this.virtualizer!.collection) {
-      if (node.type === 'skeleton') {
-        // Add skeleton cards until every column has at least one, and we fill the viewport.
-        let startingHeights = [...columnHeights];
-        while (
-          !columnHeights.every((h, i) => h !== startingHeights[i]) ||
-          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height
-        ) {
-          let key = `${node.key}-${skeletonCount++}`;
-          let content = this.layoutInfos.get(key)?.content || {...node};
-          addNode(key, content);
-        }
-        break;
-      } else {
-        addNode(node.key, node);
-      }
-    }
-
-    // Reset all columns to the maximum for the next section
-    let maxHeight = Math.max(...columnHeights);
-    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);
-    this.layoutInfos = newLayoutInfos;
-    this.numColumns = numColumns;
-  }
-
-  getLayoutInfo(key: Key): LayoutInfo {
-    return this.layoutInfos.get(key)!;
-  }
-
-  getContentSize(): Size {
-    return this.contentSize;
-  }
-
-  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
-    let layoutInfos: LayoutInfo[] = [];
-    for (let layoutInfo of this.layoutInfos.values()) {
-      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
-        layoutInfos.push(layoutInfo);
-      }
-    }
-    return layoutInfos;
-  }
-
-  updateItemSize(key: Key, size: Size) {
-    let layoutInfo = this.layoutInfos.get(key);
-    if (!size || !layoutInfo) {
-      return false;
-    }
-
-    if (size.height !== layoutInfo.rect.height) {
-      let newLayoutInfo = layoutInfo.copy();
-      newLayoutInfo.rect.height = size.height;
-      newLayoutInfo.estimatedSize = false;
-      this.layoutInfos.set(key, newLayoutInfo);
-      return true;
-    }
-
-    return false;
-  }
-
-  // Override keyboard navigation to work spacially.
-  getKeyRightOf(key: Key): Key | null {
-    let layoutInfo = this.getLayoutInfo(key);
-    if (!layoutInfo) {
-      return null;
-    }
-
-    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
-    let layoutInfos = this.getVisibleLayoutInfos(rect);
-    let bestKey: Key | null = null;
-    let bestDistance = Infinity;
-    for (let candidate of layoutInfos) {
-      if (candidate.key === key) {
-        continue;
-      }
-
-      // Find the closest item in the x direction with the most overlap in the y direction.
-      let deltaX = candidate.rect.x - rect.x;
-      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
-      let distance = deltaX - overlapY;
-      if (distance < bestDistance) {
-        bestDistance = distance;
-        bestKey = candidate.key;
-      }
-    }
-
-    return bestKey;
-  }
-
-  getKeyLeftOf(key: Key): Key | null {
-    let layoutInfo = this.getLayoutInfo(key);
-    if (!layoutInfo) {
-      return null;
-    }
-
-    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);
-    let layoutInfos = this.getVisibleLayoutInfos(rect);
-    let bestKey: Key | null = null;
-    let bestDistance = Infinity;
-    for (let candidate of layoutInfos) {
-      if (candidate.key === key) {
-        continue;
-      }
-
-      // Find the closest item in the x direction with the most overlap in the y direction.
-      let deltaX = rect.maxX - candidate.rect.maxX;
-      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);
-      let distance = deltaX - overlapY;
-      if (distance < bestDistance) {
-        bestDistance = distance;
-        bestKey = candidate.key;
-      }
-    }
-
-    return bestKey;
-  }
-
-  // This overrides the default behavior of shift selection to work spacially
-  // rather than following the order of the items in the collection (which may appear unpredictable).
-  getKeyRange(from: Key, to: Key): Key[] {
-    let fromLayoutInfo = this.getLayoutInfo(from);
-    let toLayoutInfo = this.getLayoutInfo(to);
-    if (!fromLayoutInfo || !toLayoutInfo) {
-      return [];
-    }
-
-    // Find items where half of the area intersects the rectangle
-    // formed from the first item to the last item in the range.
-    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);
-    let keys: Key[] = [];
-    for (let layoutInfo of this.layoutInfos.values()) {
-      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {
-        keys.push(layoutInfo.key);
-      }
-    }
-    return keys;
-  }
-}
-
 const layoutOptions = {
   XS: {
     compact: {
@@ -539,9 +187,6 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   let domRef = useDOMRef(ref);
   let innerRef = useRef(null);
   let scrollRef = props.renderActionBar ? innerRef : domRef;
-  let layout = useMemo(() => {
-    return layoutName === 'waterfall' ? new WaterfallLayout() : new FlexibleGridLayout();
-  }, [layoutName]);
 
   // This calculates the maximum t-shirt size where at least two columns fit in the available width.
   let [maxSizeIndex, setMaxSizeIndex] = useState(SIZES.length - 1);
@@ -570,6 +215,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 
   // The actual rendered t-shirt size is the minimum between the size prop and the maximum possible size.
   let size = SIZES[Math.min(maxSizeIndex, SIZES.indexOf(sizeProp))];
+  let layout = layoutName === 'waterfall' ? WaterfallLayout : GridLayout;
   let options = layoutOptions[size][density];
 
   useLoadMore({
@@ -583,7 +229,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
   let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
 
   let cardView = (
-    <UNSTABLE_Virtualizer layout={layout} layoutOptions={options}>
+    <Virtualizer layout={layout} layoutOptions={options}>
       <InternalCardViewContext.Provider value={GridListItem}>
         <CardContext.Provider value={ctx}>
           <ImageCoordinator>
@@ -609,7 +255,7 @@ export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
           </ImageCoordinator>
         </CardContext.Provider>
       </InternalCardViewContext.Provider>
-    </UNSTABLE_Virtualizer>
+    </Virtualizer>
   );
 
   // Add extra wrapper if there is an action bar so we can position relative to it.

package/src/Picker.tsx

@@ -49,7 +49,7 @@ import {
   FieldLabel,
   HelpText
 } from './Field';
-import {FocusableRef, FocusableRefValue, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, HelpTextProps, PressEvent, SpectrumLabelableProps} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
@@ -58,10 +58,12 @@ import {IconContext} from './Icon';
 import intlMessages from '../intl/*.json';
 import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
+import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
+import React, {createContext, forwardRef, ReactNode, useContext, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
+import {useGlobalListeners} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -272,6 +274,21 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     menuOffset = 8;
   }
 
+  // For mouse interactions, pickers open on press start. When the popover underlay appears
+  // it covers the trigger button, causing onPressEnd to fire immediately and no press scaling
+  // to occur. We override this by listening for pointerup on the document ourselves.
+  let [isPressed, setPressed] = useState(false);
+  let {addGlobalListener} = useGlobalListeners();
+  let onPressStart = (e: PressEvent) => {
+    if (e.pointerType !== 'mouse') {
+      return;
+    }
+    setPressed(true);
+    addGlobalListener(document, 'pointerup', () => {
+      setPressed(false);
+    }, {once: true, capture: true});
+  };
+
   return (
     <AriaSelect
       {...pickerProps}
@@ -296,64 +313,66 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
               contextualHelp={props.contextualHelp}>
               {label}
             </FieldLabel>
-            <Button
-              ref={domRef}
-              style={renderProps => pressScale(domRef)(renderProps)}
-              // Prevent press scale from sticking while Picker is open.
-              // @ts-ignore
-              isPressed={false}
-              className={renderProps => inputButton({
-                ...renderProps,
-                size: size,
-                isOpen,
-                isQuiet
-              })}>
-              {(renderProps) => (
-                <>
-                  <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>
-                    {({defaultChildren}) => {
-                      return (
-                        <Provider
-                          values={[
-                            [IconContext, {
-                              slots: {
-                                icon: {
-                                  render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
-                                  styles: icon
+            <PressResponder onPressStart={onPressStart} isPressed={isPressed}>
+              <Button
+                ref={domRef}
+                style={renderProps => pressScale(domRef)(renderProps)}
+                // Prevent press scale from sticking while Picker is open.
+                // @ts-ignore
+                isPressed={false}
+                className={renderProps => inputButton({
+                  ...renderProps,
+                  size: size,
+                  isOpen,
+                  isQuiet
+                })}>
+                {(renderProps) => (
+                  <>
+                    <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>
+                      {({defaultChildren}) => {
+                        return (
+                          <Provider
+                            values={[
+                              [IconContext, {
+                                slots: {
+                                  icon: {
+                                    render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}),
+                                    styles: icon
+                                  }
                                 }
-                              }
-                            }],
-                            [TextContext, {
-                              slots: {
-                                description: {},
-                                label: {styles: style({
-                                  display: 'block',
-                                  flexGrow: 1,
-                                  truncate: true
-                                })}
-                              }
-                            }],
-                            [InsideSelectValueContext, true]
-                          ]}>
-                          {defaultChildren}
-                        </Provider>
-                      );
-                    }}
-                  </SelectValue>
-                  {isInvalid && (
-                    <FieldErrorIcon isDisabled={isDisabled} />
-                  )}
-                  <ChevronIcon
-                    size={size}
-                    className={iconStyles} />
-                  {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
-                  {isInvalid && !isDisabled && !isQuiet &&
-                    // @ts-ignore known limitation detecting functions from the theme
-                    <div className={invalidBorder({...renderProps, size})} />
-                  }
-                </>
-              )}
-            </Button>
+                              }],
+                              [TextContext, {
+                                slots: {
+                                  description: {},
+                                  label: {styles: style({
+                                    display: 'block',
+                                    flexGrow: 1,
+                                    truncate: true
+                                  })}
+                                }
+                              }],
+                              [InsideSelectValueContext, true]
+                            ]}>
+                            {defaultChildren}
+                          </Provider>
+                        );
+                      }}
+                    </SelectValue>
+                    {isInvalid && (
+                      <FieldErrorIcon isDisabled={isDisabled} />
+                    )}
+                    <ChevronIcon
+                      size={size}
+                      className={iconStyles} />
+                    {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
+                    {isInvalid && !isDisabled && !isQuiet &&
+                      // @ts-ignore known limitation detecting functions from the theme
+                      <div className={invalidBorder({...renderProps, size})} />
+                    }
+                  </>
+                )}
+              </Button>
+            </PressResponder>
             <HelpText
               size={size}
               isDisabled={isDisabled}

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';
 
@@ -227,17 +227,14 @@ export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedC
   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;
@@ -255,7 +252,7 @@ export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedC
 
       prevRef.current = null;
     }
-  }, [isSelected]);
+  }, [isSelected, reduceMotion]);
 
   return (
     <ToggleButton 

package/src/Skeleton.tsx

@@ -17,13 +17,11 @@ 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