@react-spectrum/s2 3.0.0-nightly-4b8b33a02-250211 → 3.0.0-nightly-56da82e3e-250212

package/src/TextField.tsx

@@ -41,7 +41,7 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);
+export const TextFieldContext = createContext<ContextValue<Partial<TextFieldProps>, TextFieldRef>>(null);
 
 /**
  * TextFields are text inputs that allow users to input custom text entries
@@ -61,7 +61,7 @@ export const TextField = forwardRef(function TextField(props: TextFieldProps, re
 
 export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}
 
-export const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);
+export const TextAreaContext = createContext<ContextValue<Partial<TextAreaProps>, TextFieldRef<HTMLTextAreaElement>>>(null);
 
 /**
  * TextAreas are multiline text inputs, useful for cases where users have

package/src/ToggleButton.tsx

@@ -28,12 +28,12 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ActionButtonStyleProps {
   /** The content to display in the button. */
-  children?: ReactNode,
+  children: ReactNode,
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
   isEmphasized?: boolean
 }
 
-export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ToggleButtonContext = createContext<ContextValue<Partial<ToggleButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ToggleButtons allow users to toggle a selection on or off, for example

package/src/ToggleButtonGroup.tsx

@@ -20,7 +20,7 @@ export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RAC
   isEmphasized?: boolean
 }
 
-export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>(null);
+export const ToggleButtonGroupContext = createContext<ContextValue<Partial<ToggleButtonGroupProps>, HTMLDivElement>>(null);
 
 /**
  * A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.

package/src/Tooltip.tsx

@@ -29,7 +29,7 @@ import {useDOMRef} from '@react-spectrum/utils';
 
 export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentProps, 'children' | 'closeDelay'>, Pick<AriaTooltipProps, 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'> {
   /** The content of the tooltip. */
-  children?: ReactNode,
+  children: ReactNode,
   /**
    * The placement of the element with respect to its anchor element.
    *
@@ -40,7 +40,7 @@ export interface TooltipTriggerProps extends Omit<AriaTooltipTriggerComponentPro
 
 export interface TooltipProps extends Omit<AriaTooltipProps, 'children' | 'className' | 'style' | 'triggerRef' | 'UNSTABLE_portalContainer' | 'isEntering' | 'isExiting' | 'placement' | 'containerPadding' |  'offset' | 'crossOffset' |  'shouldFlip' | 'arrowBoundaryOffset' | 'isOpen' | 'defaultOpen' | 'onOpenChange'>, UnsafeStyles {
   /** The content of the tooltip. */
-  children?: ReactNode
+  children: ReactNode
 }
 
 const tooltip = style<TooltipRenderProps & {colorScheme: ColorScheme | 'light dark' | null}>({
@@ -123,7 +123,7 @@ const arrowStyles = style<TooltipRenderProps>({
   }
 });
 
-let InternalTooltipTriggerContext = createContext<TooltipTriggerProps>({});
+let InternalTooltipTriggerContext = createContext<Partial<TooltipTriggerProps>>({});
 
 /**
  * Display container for Tooltip content. Has a directional arrow dependent on its placement.

package/src/TreeView.tsx

@@ -39,6 +39,7 @@ import React, {createContext, forwardRef, isValidElement, JSXElementConstructor,
 import {Text, TextContext} from './Content';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLocale} from 'react-aria';
+import {useScale} from './utils';
 
 interface S2TreeProps {
   // Only detatched is supported right now with the current styles from Spectrum
@@ -99,6 +100,7 @@ const tree = style({
 
 function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
   let {children, isDetached, isEmphasized} = props;
+  let scale = useScale();
 
   let renderer;
   if (typeof children === 'function') {
@@ -107,11 +109,15 @@ function TreeView(props: TreeViewProps, ref: DOMRef<HTMLDivElement>) {
 
   let domRef = useDOMRef(ref);
 
+  let rowHeight = isDetached ? 44 : 40;
+  if (scale === 'large') {
+    rowHeight = isDetached ? 54 : 50;
+  }
   let layout = useMemo(() => {
     return new UNSTABLE_ListLayout({
-      rowHeight: isDetached ? 42 : 40
+      rowHeight
     });
-  }, [isDetached]);
+  }, [rowHeight]);
 
   return (
     <UNSTABLE_Virtualizer layout={layout}>
@@ -189,9 +195,10 @@ const treeRow = style({
 const treeCellGrid = style({
   display: 'grid',
   width: 'full',
+  height: 'full',
   alignContent: 'center',
   alignItems: 'center',
-  gridTemplateColumns: ['minmax(0, auto)', 'minmax(0, auto)', 'minmax(0, auto)', 40, 'minmax(0, auto)', '1fr', 'minmax(0, auto)', 'auto'],
+  gridTemplateColumns: ['auto', 'auto', 'auto', 'auto', 'auto', '1fr', 'minmax(0, auto)', 'auto'],
   gridTemplateRows: '1fr',
   gridTemplateAreas: [
     'drag-handle checkbox level-padding expand-button icon content actions actionmenu'
@@ -306,8 +313,6 @@ const treeContent = style({
 
 const treeActions = style({
   gridArea: 'actions',
-  flexGrow: 0,
-  flexShrink: 0,
   /* TODO: I made this one up, confirm desired behavior. These paddings are to make sure the action group has enough padding for the focus ring */
   marginStart: 2,
   marginEnd: 4
@@ -356,6 +361,7 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
   let nestedRows;
   let {renderer} = useTreeRendererContext();
   let {isDetached, isEmphasized} = useContext(InternalTreeContext);
+  let scale = useScale();
 
   if (typeof children === 'string') {
     content = <Text>{children}</Text>;
@@ -408,7 +414,7 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
                   width: '[calc(calc(var(--tree-item-level, 0) - 1) * var(--indent))]'
                 })} />
               {/* TODO: revisit when we do async loading, at the moment hasChildItems will only cause the chevron to be rendered, no aria/data attributes indicating the row's expandability are added */}
-              {(hasChildRows || hasChildItems) && <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} />}
+              <ExpandableRowChevron isDisabled={isDisabled} isExpanded={isExpanded} scale={scale} isHidden={!(hasChildRows || hasChildItems)} />
               <Provider
                 values={[
                   [TextContext, {styles: treeContent}],
@@ -434,13 +440,22 @@ export const TreeViewItem = <T extends object>(props: TreeViewItemProps<T>) => {
 interface ExpandableRowChevronProps {
   isExpanded?: boolean,
   isDisabled?: boolean,
-  isRTL?: boolean
+  isRTL?: boolean,
+  scale: 'medium' | 'large',
+  isHidden?: boolean
 }
 
 const expandButton = style<ExpandableRowChevronProps>({
   gridArea: 'expand-button',
-  height: 'full',
-  aspectRatio: 'square',
+  color: {
+    default: '[inherit]',
+    isDisabled: {
+      default: 'disabled',
+      forcedColors: 'GrayText'
+    }
+  },
+  height: 40,
+  width: 40,
   display: 'flex',
   flexWrap: 'wrap',
   alignContent: 'center',
@@ -453,16 +468,22 @@ const expandButton = style<ExpandableRowChevronProps>({
       isRTL: 'rotate(-90deg)'
     }
   },
+  padding: 0,
   transition: 'default',
   backgroundColor: 'transparent',
-  borderStyle: 'none'
+  borderStyle: 'none',
+  disableTapHighlight: true,
+  visibility: {
+    isHidden: 'hidden'
+  }
 });
 
 function ExpandableRowChevron(props: ExpandableRowChevronProps) {
   let expandButtonRef = useRef<HTMLButtonElement>(null);
   let [fullProps, ref] = useContextProps({...props, slot: 'chevron'}, expandButtonRef, ButtonContext);
-  let {isExpanded, isDisabled} = fullProps;
+  let {isExpanded, isDisabled, scale, isHidden} = fullProps;
   let {direction} = useLocale();
+  isDisabled = isDisabled || isHidden;
 
   return (
     <Button
@@ -472,7 +493,7 @@ function ExpandableRowChevron(props: ExpandableRowChevronProps) {
       // Override tabindex so that grid keyboard nav skips over it. Needs -1 so android talkback can actually "focus" it
       excludeFromTabOrder={isAndroid() && !isDisabled}
       preventFocusOnPress
-      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl'})}>
+      className={renderProps => expandButton({...renderProps, isExpanded, isRTL: direction === 'rtl', scale, isHidden})}>
       <Chevron
         className={style({
           scale: {