@react-spectrum/s2 3.0.0-nightly-5ed06068e-241105 → 3.0.0-nightly-09ccc53e7-241107

package/src/ActionButton.tsx

@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {ActionButtonGroupContext} from './ActionButtonGroup';
 import {baseColor, focusRing, fontRelative, style} from '../style' with { type: 'macro' };
-import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton} from 'react-aria-components';
+import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';
 import {centerBaseline} from './CenterBaseline';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
@@ -44,18 +45,32 @@ interface ToggleButtonStyleProps {
   isEmphasized?: boolean
 }
 
+interface ActionGroupItemStyleProps {
+  density?: 'regular' | 'compact',
+  orientation?: 'horizontal' | 'vertical',
+  isJustified?: boolean
+}
+
 export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending'>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the ActionButton. */
   children?: ReactNode
 }
 
 // These styles handle both ActionButton and ToggleButton
-export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps>({
+const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
+export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps>({
   ...focusRing(),
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   columnGap: 'text-to-visual',
+  flexShrink: 0,
+  flexGrow: {
+    isJustified: 1
+  },
+  flexBasis: {
+    isJustified: 0
+  },
   font: 'control',
   fontWeight: 'medium',
   userSelect: 'none',
@@ -159,17 +174,69 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   borderStyle: 'none',
   paddingX: {
     default: 'edge-to-text',
-    ':has([slot=icon]:only-child)': 0
+    [iconOnly]: 0
   },
   paddingY: 0,
-  borderRadius: 'control',
+  borderTopStartRadius: {
+    default: 'control',
+    density: {
+      compact: {
+        default: 'none',
+        ':first-child': 'control'
+      }
+    }
+  },
+  borderTopEndRadius: {
+    default: 'control',
+    density: {
+      compact: {
+        default: 'none',
+        orientation: {
+          horizontal: {
+            ':last-child': 'control'
+          },
+          vertical: {
+            ':first-child': 'control'
+          }
+        }
+      }
+    }
+  },
+  borderBottomStartRadius: {
+    default: 'control',
+    density: {
+      compact: {
+        default: 'none',
+        orientation: {
+          horizontal: {
+            ':first-child': 'control'
+          },
+          vertical: {
+            ':last-child': 'control'
+          }
+        }
+      }
+    }
+  },
+  borderBottomEndRadius: {
+    default: 'control',
+    density: {
+      compact: {
+        default: 'none',
+        ':last-child': 'control'
+      }
+    }
+  },
   '--iconMargin': {
     type: 'marginTop',
     value: {
       default: fontRelative(-2),
-      ':has([slot=icon]:only-child)': 0
+      [iconOnly]: 0
     }
   },
+  zIndex: {
+    isFocusVisible: 2
+  },
   disableTapHighlight: true
 }, getAllowedOverrides());
 
@@ -180,19 +247,32 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
   let overlayTriggerState = useContext(OverlayTriggerStateContext);
+  let {
+    density = 'regular',
+    isJustified,
+    orientation = 'horizontal',
+    staticColor = props.staticColor,
+    isQuiet = props.isQuiet,
+    size = props.size || 'M',
+    isDisabled = props.isDisabled
+  } = useSlottedContext(ActionButtonGroupContext) || {};
 
   return (
     <RACButton
       {...props}
+      isDisabled={isDisabled}
       ref={domRef}
       style={pressScale(domRef, props.UNSAFE_style)}
       className={renderProps => (props.UNSAFE_className || '') + btnStyles({
         ...renderProps,
         // Retain hover styles when an overlay is open.
         isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
-        staticColor: props.staticColor,
-        size: props.size || 'M',
-        isQuiet: props.isQuiet
+        staticColor,
+        size,
+        isQuiet,
+        density,
+        isJustified,
+        orientation
       }, props.styles)}>
       <Provider
         values={[

package/src/ActionButtonGroup.tsx

@@ -0,0 +1,106 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ContextValue, SlotProps, Toolbar} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
+import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {style} from '../style' with {type: 'macro'};
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: StylesPropWithHeight,
+  /** The children of the group. */
+  children: ReactNode,
+  /**
+   * Size of the buttons.
+   * @default "M"
+   */
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  /**
+   * Spacing between the buttons.
+   * @default "regular"
+   */
+  density?: 'compact' | 'regular',
+  /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
+  isQuiet?: boolean,
+  /** Whether the buttons should divide the container width equally. */
+  isJustified?: boolean,
+  /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
+  staticColor?: 'white' | 'black',
+  /**
+   * The axis the group should align with.
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical',
+  /** Whether the group is disabled. */
+  isDisabled?: boolean
+}
+
+export const actionGroupStyle = style({
+  display: 'flex',
+  flexDirection: {
+    orientation: {
+      horizontal: 'row',
+      vertical: 'column'
+    }
+  },
+  gap: {
+    density: {
+      compact: 2,
+      regular: {
+        size: {
+          XS: 4,
+          S: 4,
+          M: 8,
+          L: 8,
+          XL: 8
+        }
+      }
+    }
+  }
+}, getAllowedOverrides({height: true}));
+
+
+export const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);
+
+function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);
+  let {
+    density = 'regular',
+    size = 'M',
+    orientation = 'horizontal',
+    isJustified,
+    children,
+    UNSAFE_className = '',
+    UNSAFE_style,
+    styles
+  } = props;
+
+  return (
+    <Toolbar
+      {...props}
+      ref={ref}
+      style={UNSAFE_style}
+      className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>
+      <ActionButtonGroupContext.Provider value={props}>
+        {children}
+      </ActionButtonGroupContext.Provider>
+    </Toolbar>
+  );
+}
+
+/**
+ * An ActionButtonGroup is a grouping of related ActionButtons.
+ */
+const _ActionButtonGroup = forwardRef(ActionButtonGroup);
+export {_ActionButtonGroup as ActionButtonGroup};

package/src/Content.tsx

@@ -120,7 +120,8 @@ function Text(props: ContentProps, ref: DOMRef) {
       inert={isSkeleton ? 'true' : undefined}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
-      slot={slot || undefined}>
+      slot={slot || undefined}
+      data-rsp-slot="text">
       {children}
     </TextAria>
   );

package/src/ContextualHelp.tsx

@@ -101,7 +101,7 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
         crossOffset={crossOffset}
         hideArrow
         UNSAFE_className={popover}>
-        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none'}))}>
+        <RACDialog className={mergeStyles(dialogInner, style({borderRadius: 'none', margin: -24, padding: 24}))}>
           <Provider
             values={[
               [TextContext, {

package/src/IllustratedMessage.tsx

@@ -114,9 +114,7 @@ const illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolea
   '--iconPrimary': {
     type: 'color',
     value: {
-      // TODO: ask design about what the color should be. Says gray-800 in the designs file, neutral in token spec, but different neutral in dropzone spec
-      default: 'gray-800',
-      isInDropZone: 'gray-500', // neutral doesn't seem to match the color in designs, opted for gray-500 instead
+      default: 'neutral',
       isDropTarget: 'accent'
     }
   }

package/src/Meter.tsx

@@ -82,11 +82,11 @@ const fillStyles = style<MeterStyleProps>({
   borderStyle: 'none',
   borderRadius: 'full',
   backgroundColor: {
-    default: 'informative',
+    default: 'informative-visual',
     variant: {
-      positive: 'positive',
-      notice: 'notice',
-      negative: 'negative'
+      positive: 'positive-visual',
+      notice: 'notice-visual',
+      negative: 'negative-visual'
     },
     staticColor: {
       white: {

package/src/Picker.tsx

@@ -122,7 +122,16 @@ const inputButton = style<PickerButtonProps | AriaSelectRenderProps>({
   font: 'control',
   display: 'flex',
   textAlign: 'start',
-  borderStyle: 'none',
+  borderStyle: {
+    default: 'none',
+    forcedColors: 'solid'
+  },
+  borderColor: {
+    forcedColors: {
+      default: 'ButtonText',
+      isDisabled: 'GrayText'
+    }
+  },
   borderRadius: 'control',
   alignItems: 'center',
   height: 'control',

package/src/ProgressBar.tsx

@@ -24,6 +24,7 @@ import {keyframes} from '../style/style-macro' with {type: 'macro'};
 import {mergeStyles} from '../style/runtime';
 import {size, style} from '../style' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useLocale} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ProgressBarStyleProps {
@@ -56,7 +57,7 @@ export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children'
 
 export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);
 
-const indeterminate = keyframes(`
+const indeterminateLTR = keyframes(`
   0% {
     transform:  translateX(-70%) scaleX(0.7);
   }
@@ -65,6 +66,15 @@ const indeterminate = keyframes(`
   }
 `);
 
+const indeterminateRTL = keyframes(`
+  0% {
+    transform:  translateX(100%) scaleX(0.7);
+  }
+  100% {
+    transform:  translateX(-70%) scaleX(0.7);
+  }
+`);
+
 const wrapper = style({
   ...bar(),
   gridTemplateColumns: {
@@ -151,7 +161,12 @@ const fill = style<ProgressBarStyleProps>({
 });
 
 const indeterminateAnimation = style({
-  animation: indeterminate,
+  animation: {
+    direction: {
+      ltr: indeterminateLTR,
+      rtl: indeterminateRTL
+    }
+  },
   animationDuration: 1000,
   animationIterationCount: 'infinite',
   animationTimingFunction: 'in-out',
@@ -170,6 +185,8 @@ function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
     UNSAFE_className = ''
   } = props;
   let domRef = useDOMRef(ref);
+  let {direction} = useLocale();
+
   return (
     <AriaProgressBar
       {...props}
@@ -182,7 +199,7 @@ function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
           {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', staticColor})}>{valueText}</span>}
           <div className={trackStyles({...props})}>
             <div
-              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation : null))}
+              className={mergeStyles(fill({...props, staticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
               style={{width: isIndeterminate ? undefined : percentage + '%'}} />
           </div>
         </>

package/src/Radio.tsx

@@ -74,9 +74,7 @@ const circle = style<RenderProps>({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  transition: '[border-width]',
-  transitionDuration: 250,
-  transitionTimingFunction: 'in-out',
+  transition: 'default',
   borderRadius: 'full',
   borderStyle: 'solid',
   boxSizing: 'border-box',

package/src/SegmentedControl.tsx

@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef} from '@react-types/shared';
+import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, Radio, RadioGroup, RadioGroupStateContext, SlotProps} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleGroupStateContext} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
 import {focusRing, size, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
@@ -32,12 +32,14 @@ export interface SegmentedControlProps extends AriaLabelingProps, StyleProps, Sl
    * Whether the segmented control is disabled.
    */
   isDisabled?: boolean,
+  /** Whether the items should divide the container width equally. */
+  isJustified?: boolean,
   /** The id of the currently selected item (controlled). */
-  selectedKey?: string | null,
+  selectedKey?: Key | null,
   /** The id of the initial selected item (uncontrolled). */
-  defaultSelectedKey?: string,
+  defaultSelectedKey?: Key,
   /** Handler that is called when the selection changes. */
-  onSelectionChange?: (id: string) => void
+  onSelectionChange?: (id: Key) => void
 }
 export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps {
   /**
@@ -45,25 +47,27 @@ export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps
    */
   children: ReactNode,
   /** The id of the item, matching the value used in SegmentedControl's `selectedKey` prop. */
-  id: string,
+  id: Key,
   /** Whether the item is disabled or not. */
   isDisabled?: boolean
 }
 
 export const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);
 
-const segmentedControl = style<{size: string}>({
-  font: 'control',
+const segmentedControl = style({
   display: 'flex',
+  gap: 4,
   backgroundColor: 'gray-100',
-  borderRadius: 'lg',
-  width: 'full'
+  borderRadius: 'default',
+  width: 'fit'
 }, getAllowedOverrides());
 
 const controlItem = style({
+  ...focusRing(),
   position: 'relative',
   display: 'flex',
   forcedColorAdjust: 'none',
+  font: 'control',
   color: {
     default: 'gray-700',
     isHovered: 'neutral-subdued',
@@ -78,17 +82,25 @@ const controlItem = style({
   // TODO: update this padding for icon-only items when we introduce the non-track style back
   paddingX: {
     default: 'edge-to-text',
-    ':has([slot=icon]:only-child)': size(6)
+    ':has([slot=icon]):not(:has([data-rsp-slot=text]))': size(6)
   },
   height: 32,
   alignItems: 'center',
-  flexBasis: 0,
-  flexGrow: 1,
+  flexGrow: {
+    isJustified: 1
+  },
+  flexBasis: {
+    isJustified: 0
+  },
   flexShrink: 0,
   minWidth: 0,
   justifyContent: 'center',
   whiteSpace: 'nowrap',
   disableTapHighlight: true,
+  userSelect: 'none',
+  backgroundColor: 'transparent',
+  borderStyle: 'none',
+  borderRadius: 'default',
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
@@ -96,7 +108,6 @@ const controlItem = style({
 }, getAllowedOverrides());
 
 const slider = style({
-  ...focusRing(),
   backgroundColor: {
     default: 'gray-25',
     forcedColors: {
@@ -123,17 +134,19 @@ const slider = style({
 });
 
 interface InternalSegmentedControlContextProps {
-  register?: (value: string, isDisabled?: boolean) => void,
+  register?: (value: Key, isDisabled?: boolean) => void,
   prevRef?: RefObject<DOMRect | null>,
-  currentSelectedRef?: RefObject<HTMLDivElement | null>
+  currentSelectedRef?: RefObject<HTMLDivElement | null>,
+  isJustified?: boolean
 }
 
 interface DefaultSelectionTrackProps {
-  defaultValue?: string | null,
-  value?: string | null,
+  defaultValue?: Key | null,
+  value?: Key | null,
   children?: ReactNode,
   prevRef: RefObject<DOMRect | null>,
-  currentSelectedRef: RefObject<HTMLDivElement | null>
+  currentSelectedRef: RefObject<HTMLDivElement | null>,
+  isJustified?: boolean
 }
 
 const InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});
@@ -150,63 +163,63 @@ function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivEleme
   let prevRef = useRef<DOMRect>(null);
   let currentSelectedRef = useRef<HTMLDivElement>(null);
 
-  let onChange = (value: string) => {
+  let onChange = (values: Set<Key>) => {
     if (currentSelectedRef.current) {
       prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
     }
     
     if (onSelectionChange) {
-      onSelectionChange(value);
+      onSelectionChange(values.values().next().value);
     }
   };
 
   return (
-    <RadioGroup 
+    <ToggleButtonGroup 
       {...props}
-      value={selectedKey}
-      defaultValue={defaultSelectedKey}
+      selectedKeys={selectedKey != null ? [selectedKey] : undefined}
+      defaultSelectedKeys={defaultSelectedKey != null ? [defaultSelectedKey] : undefined}
+      disallowEmptySelection
       ref={domRef}
       orientation="horizontal"
       style={props.UNSAFE_style}
-      onChange={onChange}
-      className={(props.UNSAFE_className || '') + segmentedControl({size: 'M'}, props.styles)}
+      onSelectionChange={onChange}
+      className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}
       aria-label={props['aria-label']}>
-      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef}>
+      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>
         {props.children}
       </DefaultSelectionTracker>
-    </RadioGroup>
+    </ToggleButtonGroup>
   );
 }
 
 function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
-  let state = useContext(RadioGroupStateContext);
+  let state = useContext(ToggleGroupStateContext);
   let isRegistered = useRef(!(props.defaultValue == null && props.value == null));
 
   // default select the first available item
-  let register = useCallback((value: string) => {
+  let register = useCallback((value: Key) => {
     if (state && !isRegistered.current) {
       isRegistered.current = true;
-      state.setSelectedValue(value);
+      state.toggleKey(value);
     }
   }, []);
 
   return (
     <Provider
       values={[
-        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef}]
+        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]
       ]}> 
       {props.children}
     </Provider>
   );
 }
 
-function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLLabelElement>) {
-  let inputRef = useRef<HTMLInputElement>(null);
-  let domRef = useFocusableRef(ref, inputRef);
+function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
+  let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
-  let {register, prevRef, currentSelectedRef} = useContext(InternalSegmentedControlContext);
-  let state = useContext(RadioGroupStateContext);
-  let isSelected = props.id === state?.selectedValue;
+  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) {
@@ -239,16 +252,14 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
   }, [isSelected]);
 
   return (
-    <Radio 
+    <ToggleButton 
       {...props}
-      value={props.id}
       ref={domRef} 
-      inputRef={inputRef}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps}, props.styles)} >
-      {({isSelected, isFocusVisible, isPressed, isDisabled}) => (
+      className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >
+      {({isSelected, isPressed, isDisabled}) => (
         <>
-          {isSelected && <div className={slider({isFocusVisible, isDisabled})} ref={currentSelectedRef} />}
+          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}
           <Provider 
             values={[
               [IconContext, {
@@ -264,7 +275,7 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
         </>
       )
       }
-    </Radio>
+    </ToggleButton>
   );
 }