@react-spectrum/s2 0.11.1 → 0.12.0

package/src/Picker.tsx

@@ -20,6 +20,7 @@ import {
   ButtonRenderProps,
   Collection,
   ContextValue,
+  DEFAULT_SLOT,
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
@@ -32,9 +33,12 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, FocusableRef, FocusableRefValue, GlobalDOMAttributes, HelpTextProps, LoadingState, PressEvent, RefObject, SpectrumLabelableProps} from '@react-types/shared';
+import {AvatarContext} from './Avatar';
 import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
+import {box, iconStyles as checkboxIconStyles} from './Checkbox';
 import {centerBaseline} from './CenterBaseline';
 import {
+  checkbox,
   checkmark,
   description,
   icon,
@@ -64,8 +68,9 @@ import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria';
-import {PopoverBase} from './Popover';
+import {Popover} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
@@ -73,7 +78,7 @@ import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useGlobalListeners, useSlotId} from '@react-aria/utils';
-import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useScale} from './utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -91,8 +96,9 @@ export interface PickerStyleProps {
   isQuiet?: boolean
 }
 
-export interface PickerProps<T extends object> extends
-  Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
+type SelectionMode = 'single' | 'multiple';
+export interface PickerProps<T extends object, M extends SelectionMode = 'single'> extends
+  Omit<AriaSelectProps<T, M>, 'children' | 'style' | 'className' | keyof GlobalDOMAttributes>,
   PickerStyleProps,
   StyleProps,
   SpectrumLabelableProps,
@@ -236,6 +242,11 @@ const iconStyles = style({
   }
 });
 
+const avatar = style({
+  gridArea: 'icon',
+  marginEnd: 'text-to-visual'
+});
+
 const loadingWrapperStyles = style({
   gridColumnStart: '1',
   gridColumnEnd: '-1',
@@ -262,7 +273,7 @@ let InsideSelectValueContext = createContext(false);
 /**
  * Pickers allow users to choose a single option from a collapsible list of options when space is limited.
  */
-export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Picker<T extends object, M extends SelectionMode = 'single'>(props: PickerProps<T, M>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, PickerContext);
   let domRef = useFocusableRef(ref);
@@ -334,6 +345,8 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     );
   }
   let scale = useScale();
+  let {direction: dir} = useLocale();
+  let RTLFlipOffset = dir === 'rtl' ? -1 : 1;
 
   return (
     <AriaSelect
@@ -389,49 +402,54 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                 estimatedHeadingHeight: 50,
                 padding: 8,
                 loaderHeight: LOADER_ROW_HEIGHTS[size][scale]}}>
-              <PopoverBase
+              <Popover
                 hideArrow
+                padding="none"
                 offset={menuOffset}
+                crossOffset={isQuiet ? RTLFlipOffset * -12 : undefined}
                 placement={`${direction} ${align}` as Placement}
                 shouldFlip={shouldFlip}
                 UNSAFE_style={{
                   width: menuWidth && !isQuiet ? `${menuWidth}px` : undefined
                 }}
                 styles={style({
-                  marginStart: {
-                    isQuiet: -12
-                  },
                   minWidth: {
-                    default: '[var(--trigger-width)]',
+                    default: '--trigger-width',
                     isQuiet: 192
                   },
                   width: {
-                    default: '[var(--trigger-width)]',
-                    isQuiet: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'
+                    default: '--trigger-width',
+                    isQuiet: '[calc(var(--trigger-width) - 24)]'
                   }
                 })(props)}>
-                <Provider
-                  values={[
-                    [HeaderContext, {styles: listboxHeader({size})}],
-                    [HeadingContext, {
-                      // @ts-ignore
-                      role: 'presentation',
-                      styles: sectionHeading
-                    }],
-                    [TextContext, {
-                      slots: {
-                        description: {styles: description({size})}
-                      }
-                    }]
-                  ]}>
-                  <ListBox
-                    dependencies={props.dependencies}
-                    items={items}
-                    className={listbox({size})}>
-                    {renderer}
-                  </ListBox>
-                </Provider>
-              </PopoverBase>
+                <div
+                  className={style({
+                    display: 'flex',
+                    size: 'full'
+                  })}>
+                  <Provider
+                    values={[
+                      [HeaderContext, {styles: listboxHeader({size})}],
+                      [HeadingContext, {
+                        // @ts-ignore
+                        role: 'presentation',
+                        styles: sectionHeading
+                      }],
+                      [TextContext, {
+                        slots: {
+                          description: {styles: description({size})}
+                        }
+                      }]
+                    ]}>
+                    <ListBox
+                      dependencies={props.dependencies}
+                      items={items}
+                      className={listbox({size})}>
+                      {renderer}
+                    </ListBox>
+                  </Provider>
+                </div>
+              </Popover>
             </Virtualizer>
           </InternalPickerContext.Provider>
         </>
@@ -456,6 +474,13 @@ function PickerProgressCircle(props) {
   );
 }
 
+const avatarSize = {
+  S: 16,
+  M: 20,
+  L: 22,
+  XL: 26
+} as const;
+
 interface PickerButtonInnerProps<T extends object> extends PickerStyleProps, Omit<AriaSelectRenderProps, 'isRequired' | 'isFocused'>, Pick<PickerProps<T>, 'loadingState'> {
   loadingCircle: ReactNode,
   buttonRef: RefObject<HTMLButtonElement | null>
@@ -474,6 +499,7 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
     loadingCircle,
     buttonRef
   } = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
 
   // 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
@@ -506,8 +532,8 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
         })}>
         {(renderProps) => (
           <>
-            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> * {display: none;}')}>
-              {({defaultChildren}) => {
+            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
+              {({selectedItems, defaultChildren}) => {
                 return (
                   <Provider
                     values={[
@@ -519,19 +545,43 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
                           }
                         }
                       }],
+                      [AvatarContext, {
+                        slots: {
+                          avatar: {
+                            size: avatarSize[size ?? 'M'],
+                            styles: avatar
+                          }
+                        }
+                      }],
                       [TextContext, {
                         slots: {
                           description: {},
-                          label: {styles: style({
-                            display: 'block',
-                            flexGrow: 1,
-                            truncate: true
-                          })}
+                          [DEFAULT_SLOT]: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore
+                            'data-slot': 'label'
+                          },
+                          label: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore not technically necessary, but good for consistency
+                            'data-slot': 'label'
+                          }
                         }
                       }],
                       [InsideSelectValueContext, true]
                     ]}>
-                    {defaultChildren}
+                    {selectedItems.length <= 1
+                      ? defaultChildren
+                      : <Text slot="label">{stringFormatter.format('picker.selectedCount', {count: selectedItems.length})}</Text>
+                    }
                   </Provider>
                 );
               }}
@@ -577,6 +627,7 @@ export function PickerItem(props: PickerItemProps): ReactNode {
       className={renderProps => (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)}>
       {(renderProps) => {
         let {children} = props;
+        let checkboxRenderProps = {...renderProps, size, isFocused: false, isFocusVisible: false, isIndeterminate: false, isReadOnly: false, isInvalid: false, isRequired: false};
         return (
           <DefaultProvider
             context={IconContext}
@@ -584,15 +635,27 @@ export function PickerItem(props: PickerItemProps): ReactNode {
               icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper}), styles: icon}
             }}}>
             <DefaultProvider
-              context={TextContext}
-              value={{
-                slots: {
-                  label: {styles: label({size})},
-                  description: {styles: description({...renderProps, size})}
-                }
-              }}>
-              {!isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
-              {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+              context={AvatarContext}
+              value={{slots: {
+                avatar: {size: avatarSize[size], styles: avatar}
+              }}}>
+              <DefaultProvider
+                context={TextContext}
+                value={{
+                  slots: {
+                    [DEFAULT_SLOT]: {styles: label({size})},
+                    label: {styles: label({size})},
+                    description: {styles: description({...renderProps, size})}
+                  }
+                }}>
+                {renderProps.selectionMode === 'single' && !isLink && <CheckmarkIcon size={checkmarkIconSize[size]} className={checkmark({...renderProps, size})} />}
+                {renderProps.selectionMode === 'multiple' && !isLink && (
+                  <div className={mergeStyles(checkbox, box(checkboxRenderProps))}>
+                    <CheckmarkIcon size={size} className={checkboxIconStyles} />
+                  </div>
+              )}
+                {typeof children === 'string' ? <Text slot="label">{children}</Text> : children}
+              </DefaultProvider>
             </DefaultProvider>
           </DefaultProvider>
         );

package/src/Popover.tsx

@@ -14,20 +14,22 @@ import {
   Popover as AriaPopover,
   PopoverProps as AriaPopoverProps,
   composeRenderProps,
-  Dialog,
+  ContextValue,
   DialogProps,
   OverlayArrow,
   OverlayTriggerStateContext,
   useLocale
 } from 'react-aria-components';
-import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {colorScheme, getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
-import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
+import {createContext, ForwardedRef, forwardRef, useCallback, useContext, useMemo} from 'react';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
+import {lightDark, style} from '../style' with {type: 'macro'};
+import {mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
-import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition' | keyof GlobalDOMAttributes> {
   styles?: StyleString,
@@ -62,10 +64,10 @@ let popover = style({
     default: 'elevated',
     isArrowShown: 'none'
   },
-  borderStyle: 'solid',
-  borderWidth: 1,
-  borderColor: {
-    default: 'gray-200',
+  outlineStyle: 'solid',
+  outlineWidth: 1,
+  outlineColor: {
+    default: lightDark('transparent-white-25', 'gray-200'),
     forcedColors: 'ButtonBorder'
   },
   width: {
@@ -118,8 +120,7 @@ let popover = style({
   isolation: 'isolate',
   pointerEvents: {
     isExiting: 'none'
-  },
-  outlineStyle: 'none'
+  }
 }, getAllowedOverrides());
 // TODO: animations and real Popover Arrow
 
@@ -145,12 +146,15 @@ let arrow = style({
   },
   strokeWidth: 1,
   stroke: {
-    default: 'gray-200',
+    default: lightDark('transparent-white-25', 'gray-200'),
     forcedColors: 'ButtonBorder'
   }
 });
 
-export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+export const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);
+export const InPopoverContext = createContext(false);
+
+export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {
   let {
     hideArrow = false,
     UNSAFE_className = '',
@@ -158,18 +162,18 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
     styles,
     size
   } = props;
-  let domRef = useDOMRef(ref);
   let colorScheme = useContext(ColorSchemeContext);
   let {locale, direction} = useLocale();
 
   // TODO: should we pass through lang and dir props in RAC?
   let popoverRef = useCallback((el: HTMLDivElement) => {
-    (domRef as MutableRefObject<HTMLDivElement>).current = el;
     if (el) {
       el.lang = locale;
       el.dir = direction;
     }
-  }, [locale, direction, domRef]);
+  }, [locale, direction]);
+  // Memoed so it doesn't break ComboBox/Picker scrolling
+  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);
 
   // On small devices, show a modal (or eventually a tray) instead of a popover.
   // TODO: reverted this until we have trays.
@@ -198,7 +202,7 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
     <AriaPopover
       {...props}
       offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}
-      ref={popoverRef}
+      ref={mergedRef}
       style={{
         ...UNSAFE_style,
         // Override default z-index from useOverlayPosition. We use isolation: isolate instead.
@@ -214,19 +218,33 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
               </svg>
             </OverlayArrow>
           )}
-          {children}
+          <InPopoverContext.Provider value>
+            {children}
+          </InPopoverContext.Provider>
         </>
       ))}
     </AriaPopover>
   );
 });
 
-export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {
+type PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;
+export interface PopoverDialogProps extends Pick<PopoverProps, 'children' | 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {
+  /**
+   * The amount of padding around the contents of the dialog.
+   * @default 'default'
+   */
+  padding?: 'default' | 'none',
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: PopoverStylesProp
 }
 
-
-const dialogStyle = style({
-  padding: 8,
+const innerDivStyle = style({
+  padding: {
+    padding: {
+      default: 8,
+      none: 0
+    }
+  },
   boxSizing: 'border-box',
   outlineStyle: 'none',
   borderRadius: 'inherit',
@@ -239,25 +257,29 @@ const dialogStyle = style({
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */
-export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
+export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);
   let domRef = useDOMRef(ref);
-  const {triggerRef, isOpen, onOpenChange, ...otherProps} = props;
-
+  let {
+    UNSAFE_className,
+    UNSAFE_style,
+    styles,
+    padding = 'default',
+    ...otherProps
+  } = props;
 
   return (
-    <PopoverBase  isOpen={isOpen} onOpenChange={onOpenChange} triggerRef={triggerRef} size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
-      <Dialog
-        {...otherProps}
-        ref={domRef}
-        style={props.UNSAFE_style}
-        className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>
-        {composeRenderProps(props.children, (children) => (
-          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
+    <PopoverBase {...otherProps} ref={domRef}>
+      {composeRenderProps(props.children, (children) => (
+        <div
+          style={UNSAFE_style}
+          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>
+          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}
           <OverlayTriggerStateContext.Provider value={null}>
             {children}
           </OverlayTriggerStateContext.Provider>
-        ))}
-      </Dialog>
+        </div>
+      ))}
     </PopoverBase>
   );
 });

package/src/Provider.tsx

@@ -51,7 +51,7 @@ export interface ProviderProps extends UnsafeStyles {
 
 export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
 
-export function Provider(props: ProviderProps): ReactNode {
+export function Provider(props: ProviderProps): JSX.Element {
   let result = <ProviderInner {...props} />;
   let parentColorScheme = useContext(ColorSchemeContext);
   let colorScheme = props.colorScheme || parentColorScheme;

package/src/RangeCalendar.tsx

@@ -64,6 +64,9 @@ const headerStyles = style({
   width: 'full'
 });
 
+/**
+ * RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
+ */
 export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RangeCalendarContext);
   let {

package/src/RangeSlider.tsx

@@ -45,6 +45,9 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
 
 export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
+/**
+ * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
+ */
 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);

package/src/SearchField.tsx

@@ -14,6 +14,7 @@ import {
   SearchField as AriaSearchField,
   SearchFieldProps as AriaSearchFieldProps,
   ContextValue,
+  InputProps,
   Provider
 } from 'react-aria-components';
 import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
@@ -31,7 +32,7 @@ import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the SearchField.
    *

package/src/SegmentedControl.tsx

@@ -13,13 +13,13 @@
 import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SelectionIndicator, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
+import {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
-import {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';
+import {useDOMRef, useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -110,9 +110,17 @@ const slider = style<{isDisabled: boolean}>({
       isDisabled: 'GrayText'
     }
   },
+  top: 0,
   left: 0,
   width: 'full',
   height: 'full',
+  contain: 'strict',
+  transition: {
+    default: '[translate,width]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  },
+  transitionDuration: 200,
+  transitionTimingFunction: 'out',
   position: 'absolute',
   boxSizing: 'border-box',
   borderStyle: 'solid',
@@ -130,8 +138,6 @@ const slider = style<{isDisabled: boolean}>({
 
 interface InternalSegmentedControlContextProps {
   register?: (value: Key, isDisabled?: boolean) => void,
-  prevRef?: RefObject<DOMRect | null>,
-  currentSelectedRef?: RefObject<HTMLDivElement | null>,
   isJustified?: boolean
 }
 
@@ -139,8 +145,6 @@ interface DefaultSelectionTrackProps {
   defaultValue?: Key | null,
   value?: Key | null,
   children: ReactNode,
-  prevRef: RefObject<DOMRect | null>,
-  currentSelectedRef: RefObject<HTMLDivElement | null>,
   isJustified?: boolean
 }
 
@@ -158,14 +162,7 @@ export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedContr
   } = props;
   let domRef = useDOMRef(ref);
 
-  let prevRef = useRef<DOMRect>(null);
-  let currentSelectedRef = useRef<HTMLDivElement>(null);
-
   let onChange = (values: Set<Key>) => {
-    if (currentSelectedRef.current) {
-      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
-    }
-
     if (onSelectionChange) {
       let firstKey = values.values().next().value;
       if (firstKey != null) {
@@ -186,7 +183,7 @@ export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedContr
       onSelectionChange={onChange}
       className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}
       aria-label={props['aria-label']}>
-      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>
+      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} isJustified={props.isJustified}>
         {props.children}
       </DefaultSelectionTracker>
     </ToggleButtonGroup>
@@ -209,7 +206,7 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   return (
     <Provider
       values={[
-        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]
+        [InternalSegmentedControlContext, {register: register, isJustified: props.isJustified}]
       ]}>
       {props.children}
     </Provider>
@@ -222,46 +219,21 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
 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 reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+  let {register, isJustified} = useContext(InternalSegmentedControlContext);
 
   useLayoutEffect(() => {
     register?.(props.id);
   }, [register, props.id]);
 
-  useLayoutEffect(() => {
-    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
-      let currentItem = currentSelectedRef?.current.getBoundingClientRect();
-
-      let deltaX = prevRef?.current.left - currentItem?.left;
-
-      currentSelectedRef.current.animate(
-        [
-          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},
-          {transform: 'translateX(0px)', width: `${currentItem.width}px`}
-        ],
-        {
-          duration: 200,
-          easing: 'ease-out'
-        }
-      );
-
-      prevRef.current = null;
-    }
-  }, [isSelected, reduceMotion, prevRef, currentSelectedRef]);
-
   return (
     <ToggleButton
       {...props}
       ref={domRef}
       style={props.UNSAFE_style}
       className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >
-      {({isSelected, isPressed, isDisabled}) => (
+      {({isPressed, isDisabled}) => (
         <>
-          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}
+          <SelectionIndicator className={slider({isDisabled})} />
           <Provider
             values={[
               [IconContext, {