@react-spectrum/s2 3.0.0-nightly-1457dedc6-250313 → 3.0.0-nightly-9d471e48d-250314

package/src/Calendar.tsx

@@ -20,6 +20,7 @@ import {
   Heading,
   Text
 } from 'react-aria-components';
+import {ReactNode} from 'react';
 
 
 export interface CalendarProps<T extends DateValue>
@@ -29,7 +30,7 @@ export interface CalendarProps<T extends DateValue>
 
 export function Calendar<T extends DateValue>(
   {errorMessage, ...props}: CalendarProps<T>
-) {
+): ReactNode {
   return (
     <AriaCalendar {...props}>
       <header>

package/src/CenterBaseline.tsx

@@ -28,7 +28,7 @@ const styles = style({
   alignItems: 'center'
 });
 
-export function CenterBaseline(props: CenterBaselineProps) {
+export function CenterBaseline(props: CenterBaselineProps): ReactNode {
   return (
     <div
       slot={props.slot}

package/src/ColorHandle.tsx

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {cloneElement, JSX, RefObject, useState} from 'react';
+import {cloneElement, JSX, ReactNode, RefObject, useState} from 'react';
 import {ColorThumb} from 'react-aria-components';
 import {createPortal} from 'react-dom';
 import {keyframes} from '../style/style-macro' with {type: 'macro'};
@@ -28,7 +28,7 @@ interface ColorHandleProps {
   getPosition: () => {x: number, y: number}
 }
 
-export function ColorHandle({containerRef, getPosition}: ColorHandleProps) {
+export function ColorHandle({containerRef, getPosition}: ColorHandleProps): ReactNode {
   return (
     <ColorThumb
       className={style({

package/src/ComboBox.tsx

@@ -338,7 +338,7 @@ const checkmarkIconSize = {
   XL: 'XL'
 } as const;
 
-export function ComboBoxItem(props: ComboBoxItemProps) {
+export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
   let ref = useRef(null);
   let isLink = props.href != null;
   let {size} = useContext(InternalComboboxContext);
@@ -378,7 +378,7 @@ export function ComboBoxItem(props: ComboBoxItemProps) {
 }
 
 export interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}
-export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {
+export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>): ReactNode {
   let {size} = useContext(InternalComboboxContext);
   return (
     <>

package/src/DateField.tsx

@@ -31,7 +31,7 @@ export interface DateFieldProps<T extends DateValue>
 
 export function DateField<T extends DateValue>(
   {label, description, errorMessage, ...props}: DateFieldProps<T>
-) {
+): ReactNode {
   return (
     <AriaDateField {...props}>
       <Label>{label}</Label>

package/src/DatePicker.tsx

@@ -38,7 +38,7 @@ export interface DatePickerProps<T extends DateValue>
 
 export function DatePicker<T extends DateValue>(
   {label, description, errorMessage, ...props}: DatePickerProps<T>
-) {
+): ReactNode {
   return (
     <AriaDatePicker {...props}>
       <Label>{label}</Label>

package/src/DateRangePicker.tsx

@@ -38,7 +38,7 @@ export interface DateRangePickerProps<T extends DateValue>
 
 export function DateRangePicker<T extends DateValue>(
   {label, description, errorMessage, ...props}: DateRangePickerProps<T>
-) {
+): ReactNode {
   return (
     <AriaDateRangePicker {...props}>
       <Label>{label}</Label>

package/src/DialogContainer.tsx

@@ -11,7 +11,7 @@
  */
 
 import {ModalContext, useSlottedContext} from 'react-aria-components';
-import React, {ReactElement, useState} from 'react';
+import React, {ReactElement, ReactNode, useState} from 'react';
 import {SpectrumDialogContainerProps} from '@react-types/dialog';
 
 export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type' | 'isDismissable' | 'isKeyboardDismissDisabled'> {}
@@ -21,7 +21,7 @@ export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps,
  * it in a modal. Useful in cases where there is no trigger element
  * or when the trigger unmounts while the dialog is open.
  */
-export function DialogContainer(props: DialogContainerProps) {
+export function DialogContainer(props: DialogContainerProps): ReactNode {
   let {
     children,
     onDismiss

package/src/DialogTrigger.tsx

@@ -12,6 +12,7 @@
 
 import {DialogTrigger as AriaDialogTrigger, DialogTriggerProps as AriaDialogTriggerProps} from 'react-aria-components';
 import {PressResponder} from '@react-aria/interactions';
+import {ReactNode} from 'react';
 
 export interface DialogTriggerProps extends AriaDialogTriggerProps {}
 
@@ -20,7 +21,7 @@ export interface DialogTriggerProps extends AriaDialogTriggerProps {}
  * open state with the trigger's press state. Additionally, it allows you to customize the type and
  * positioning of the Dialog.
  */
-export function DialogTrigger(props: DialogTriggerProps) {
+export function DialogTrigger(props: DialogTriggerProps): ReactNode {
   return (
     <AriaDialogTrigger {...props}>
       {/* RAC sets isPressed via PressResponder when the dialog is open.

package/src/Field.tsx

@@ -276,7 +276,7 @@ const helpTextStyles = style({
   }
 });
 
-export function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {
+export function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}): ReactNode {
   let domDescriptionRef = useDOMRef(props.descriptionRef || null);
   let domErrorRef = useDOMRef(props.errorRef || null);
 
@@ -308,7 +308,7 @@ export function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDiv
   );
 }
 
-export function FieldErrorIcon(props: {isDisabled?: boolean}) {
+export function FieldErrorIcon(props: {isDisabled?: boolean}): ReactNode {
   return (
     <Provider
       values={[

package/src/ImageCoordinator.tsx

@@ -44,7 +44,7 @@ interface State {
   loaded: Map<string, boolean>
 }
 
-type Action = 
+type Action =
   | {type: 'register', url: string}
   | {type: 'unregister', url: string}
   | {type: 'load', url: string}
@@ -120,7 +120,7 @@ function isAllLoaded(loaded: Map<string, boolean>) {
  * An ImageCoordinator coordinates loading behavior for a group of images.
  * Images within an ImageCoordinator are revealed together once all of them have loaded.
  */
-export function ImageCoordinator(props: ImageCoordinatorProps) {
+export function ImageCoordinator(props: ImageCoordinatorProps): ReactNode {
   // If we are already inside another ImageCoordinator, just pass
   // through children and coordinate loading at the root.
   let ctx = useContext(props.group || DefaultImageGroup);
@@ -139,7 +139,7 @@ function ImageCoordinatorRoot(props: ImageCoordinatorProps) {
     loadStartTime: 0,
     loaded: new Map()
   });
-  
+
   let register = useCallback((url: string) => dispatch({type: 'register', url}), []);
   let unregister = useCallback((url: string) => dispatch({type: 'unregister', url}), []);
   let load = useCallback((url: string) => dispatch({type: 'load', url}), []);

package/src/ListBox.tsx

@@ -16,11 +16,12 @@ import {
   ListBoxItemProps,
   ListBoxProps
 } from 'react-aria-components';
+import {ReactNode} from 'react';
 
 
 export function ListBox<T extends object>(
   {children, ...props}: ListBoxProps<T>
-) {
+): ReactNode {
   return (
     <AriaListBox {...props}>
       {children}
@@ -28,6 +29,6 @@ export function ListBox<T extends object>(
   );
 }
 
-export function ListBoxItem(props: ListBoxItemProps) {
+export function ListBoxItem(props: ListBoxItemProps): ReactNode {
   return <AriaListBoxItem {...props} />;
 }

package/src/Menu.tsx

@@ -406,7 +406,7 @@ export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T
   return content;
 });
 
-export function Divider(props: SeparatorProps) {
+export function Divider(props: SeparatorProps): ReactNode {
   return (
     <Separator
       {...props}
@@ -429,7 +429,7 @@ export function Divider(props: SeparatorProps) {
 }
 
 export interface MenuSectionProps<T extends object> extends AriaMenuSectionProps<T> {}
-export function MenuSection<T extends object>(props: MenuSectionProps<T>) {
+export function MenuSection<T extends object>(props: MenuSectionProps<T>): ReactNode {
   // remember, context doesn't work if it's around Section nor inside
   let {size} = useContext(InternalMenuContext);
   return (
@@ -465,7 +465,7 @@ const linkIconSize = {
   XL: 'XL'
 } as const;
 
-export function MenuItem(props: MenuItemProps) {
+export function MenuItem(props: MenuItemProps): ReactNode {
   let ref = useRef(null);
   let isLink = props.href != null;
   let isLinkOut = isLink && props.target === '_blank';
@@ -548,7 +548,7 @@ export function MenuItem(props: MenuItemProps) {
  * The MenuTrigger serves as a wrapper around a Menu and its associated trigger,
  * linking the Menu's open state with the trigger's press state.
  */
-function MenuTrigger(props: MenuTriggerProps) {
+function MenuTrigger(props: MenuTriggerProps): ReactNode {
   // RAC sets isPressed via PressResponder when the menu is open.
   // We don't want press scaling to appear to get "stuck", so override this.
   // For mouse interactions, menus open on press start. When the popover underlay appears
@@ -591,6 +591,6 @@ export {MenuTrigger, SubmenuTrigger};
 // This is purely so that storybook generates the types for both Menu and MenuTrigger
 interface ICombined<T extends object> extends MenuProps<T>, Omit<MenuTriggerProps, 'children'> {}
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function CombinedMenu<T extends object>(props: ICombined<T>) {
+export function CombinedMenu<T extends object>(props: ICombined<T>): ReactNode {
   return <div />;
 }

package/src/Picker.tsx

@@ -436,7 +436,7 @@ const checkmarkIconSize = {
   XL: 'XL'
 } as const;
 
-export function PickerItem(props: PickerItemProps) {
+export function PickerItem(props: PickerItemProps): ReactNode {
   let ref = useRef(null);
   let isLink = props.href != null;
   let {size} = useContext(InternalPickerContext);
@@ -484,7 +484,7 @@ function DefaultProvider({context, value, children}: {context: React.Context<any
 }
 
 export interface PickerSectionProps<T extends object> extends SectionProps<T> {}
-export function PickerSection<T extends object>(props: PickerSectionProps<T>) {
+export function PickerSection<T extends object>(props: PickerSectionProps<T>): ReactNode {
   let {size} = useContext(InternalPickerContext);
   return (
     <>

package/src/Provider.tsx

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

package/src/RangeCalendar.tsx

@@ -20,6 +20,7 @@ import {
   Heading,
   Text
 } from 'react-aria-components';
+import {ReactNode} from 'react';
 
 
 export interface RangeCalendarProps<T extends DateValue>
@@ -29,7 +30,7 @@ export interface RangeCalendarProps<T extends DateValue>
 
 export function RangeCalendar<T extends DateValue>(
   {errorMessage, ...props}: RangeCalendarProps<T>
-) {
+): ReactNode {
   return (
     <AriaRangeCalendar {...props}>
       <header>

package/src/Skeleton.tsx

@@ -19,7 +19,7 @@ import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types';
 import {useMediaQuery} from '@react-spectrum/utils';
 
-export function useLoadingAnimation(isAnimating: boolean) {
+export function useLoadingAnimation(isAnimating: boolean): (element: HTMLElement | null) => void {
   let animationRef = useRef<Animation | null>(null);
   let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
   return useCallback((element: HTMLElement | null) => {
@@ -65,7 +65,7 @@ export interface SkeletonProps {
 /**
  * A Skeleton wraps around content to render it as a placeholder.
  */
-export function Skeleton({children, isLoading}: SkeletonProps) {
+export function Skeleton({children, isLoading}: SkeletonProps): ReactNode {
   // Disable all form components inside a skeleton.
   return (
     <SkeletonContext.Provider value={isLoading}>
@@ -97,7 +97,7 @@ export function useSkeletonText(children: ReactNode, style: CSSProperties | unde
 }
 
 // Rendered inside <Text> to create skeleton line boxes via box-decoration-break.
-export function SkeletonText({children}) {
+export function SkeletonText({children}: {children: ReactNode}): ReactNode {
   return (
     <span
       // @ts-ignore - compatibility with React < 19
@@ -114,7 +114,7 @@ export function SkeletonText({children}) {
 }
 
 // Clones the child element and displays it with skeleton styling.
-export function SkeletonWrapper({children}: {children: SkeletonElement}) {
+export function SkeletonWrapper({children}: {children: SkeletonElement}): ReactNode {
   let isLoading = useContext(SkeletonContext);
   let animation = useLoadingAnimation(isLoading || false);
   if (isLoading == null) {

package/src/Slider.tsx

@@ -317,7 +317,7 @@ export let filledTrack = style({
   translateY: '[-50%]'
 });
 
-export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}) {
+export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T> & {sliderRef: RefObject<HTMLDivElement | null>}): ReactNode {
   let formContext = useContext(FormContext);
   props = useFormProps(props);
   let {

package/src/Tabs.tsx

@@ -182,12 +182,13 @@ const tablist = style({
   flexBasis: '[0%]'
 });
 
-export function TabList<T extends object>(props: TabListProps<T>) {
+export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
   let {showTabs} = useContext(CollapseContext) ?? {};
 
   if (showTabs) {
     return <TabListInner {...props} />;
   }
+  return null;
 }
 
 function TabListInner<T extends object>(props: TabListProps<T>) {
@@ -362,7 +363,7 @@ const icon = style({
   }
 });
 
-export function Tab(props: TabProps) {
+export function Tab(props: TabProps): ReactNode {
   let {density, labelBehavior} = useContext(InternalTabsContext) ?? {};
 
   let contentId = useId();
@@ -421,7 +422,7 @@ const tabPanel = style({
   minWidth: 0
 }, getAllowedOverrides({height: true}));
 
-export function TabPanel(props: TabPanelProps) {
+export function TabPanel(props: TabPanelProps): ReactNode | null {
   let {showTabs} = useContext(CollapseContext);
   let {selectedKey} = useContext(InternalTabsContext);
   if (showTabs) {

package/src/TabsPicker.tsx

@@ -305,7 +305,7 @@ function TabLine(props) {
 export interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
   children: ReactNode
 }
-export function PickerItem(props: PickerItemProps) {
+export function PickerItem(props: PickerItemProps): ReactNode {
   let ref = useRef(null);
   let isLink = props.href != null;
   const size = 'M';

package/src/TimeField.tsx

@@ -30,7 +30,7 @@ export interface TimeFieldProps<T extends TimeValue>
 
 export function TimeField<T extends TimeValue>(
   {label, description, errorMessage, ...props}: TimeFieldProps<T>
-) {
+): ReactNode {
   return (
     <AriaTimeField {...props}>
       <Label>{label}</Label>

package/src/Toolbar.tsx

@@ -11,8 +11,9 @@
  */
 
 import {Toolbar as RACToolbar, ToolbarProps} from 'react-aria-components';
+import {ReactNode} from 'react';
 
 
-export function Toolbar(props: ToolbarProps) {
+export function Toolbar(props: ToolbarProps): ReactNode {
   return <RACToolbar {...props} />;
 }

package/src/Tooltip.tsx

@@ -186,7 +186,7 @@ export const Tooltip = forwardRef(function Tooltip(props: TooltipProps, ref: DOM
  * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
  * relative to the trigger.
  */
-export function TooltipTrigger(props: TooltipTriggerProps) {
+export function TooltipTrigger(props: TooltipTriggerProps): ReactNode {
   let {
     containerPadding,
     crossOffset,
@@ -216,6 +216,6 @@ export function TooltipTrigger(props: TooltipTriggerProps) {
 // This is purely so that storybook generates the types for both Menu and MenuTrigger
 interface ICombined extends Omit<TooltipProps, 'placement'>, TooltipTriggerProps {}
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function CombinedTooltip(props: ICombined) {
+export function CombinedTooltip(props: ICombined): ReactNode {
   return <div />;
 }

package/src/TreeView.tsx

@@ -294,7 +294,7 @@ const treeRowFocusIndicator = raw(`
   }`
 );
 
-export const TreeViewItem = (props: TreeViewItemProps) => {
+export const TreeViewItem = (props: TreeViewItemProps): ReactNode => {
   let {
     href
   } = props;
@@ -315,7 +315,7 @@ export interface TreeViewItemContentProps extends Omit<TreeItemContentProps, 'ch
   children: ReactNode
 }
 
-export const TreeViewItemContent = (props: TreeViewItemContentProps) => {
+export const TreeViewItemContent = (props: TreeViewItemContentProps): ReactNode => {
   let {
     children
   } = props;

package/src/page.macro.ts

@@ -21,7 +21,7 @@ function weirdColorToken(token: typeof tokens['background-layer-2-color']) {
   return `light-dark(${token.sets.light.sets.light.value}, ${token.sets.dark.sets.dark.value})`;
 }
 
-export function generatePageStyles(this: MacroContext | void) {
+export function generatePageStyles(this: MacroContext | void): void {
   if (this && typeof this.addAsset === 'function') {
     this.addAsset({
       type: 'css',
@@ -55,13 +55,13 @@ export function generatePageStyles(this: MacroContext | void) {
   }
 }
 
-// This generates a low specificity rule to define default values for 
+// This generates a low specificity rule to define default values for
 // --lightningcss-light and --lightningcss-dark. This is used when rendering
 // a <Provider> without setting a colorScheme prop, and when page.css is not present.
 // It is equivalent to setting `color-scheme: light dark`, but without overriding
 // the browser default for content outside the provider.
 // Also set defaults for --s2-scale here.
-export function generateDefaultColorSchemeStyles(this: MacroContext | void) {
+export function generateDefaultColorSchemeStyles(this: MacroContext | void): void {
   if (this && typeof this.addAsset === 'function') {
     this.addAsset({
       type: 'css',

package/src/pressScale.ts

@@ -13,7 +13,7 @@
 import {composeRenderProps} from 'react-aria-components';
 import {CSSProperties, RefObject} from 'react';
 
-export function pressScale<R extends {isPressed: boolean}>(ref: RefObject<HTMLElement | null>, style?: CSSProperties | ((renderProps: R) => CSSProperties)) {
+export function pressScale<R extends {isPressed: boolean}>(ref: RefObject<HTMLElement | null>, style?: CSSProperties | ((renderProps: R) => CSSProperties)): (renderProps: R) => CSSProperties {
   return composeRenderProps(style, (style, renderProps: R) => {
     if (renderProps.isPressed && ref.current) {
       let {width = 0, height = 0} = ref.current.getBoundingClientRect() ?? {};

package/src/style-utils.ts

@@ -124,7 +124,7 @@ export const colorScheme = () => ({
   }
 } as const);
 
-export function staticColor() {
+export function staticColor(): Record<string, any> {
   return {
     '--s2-container-bg': {
       type: 'backgroundColor',
@@ -198,6 +198,6 @@ export interface StyleProps extends UnsafeStyles {
   styles?: StylesProp
 }
 
-export function getAllowedOverrides({width = true, height = false} = {}) {
+export function getAllowedOverrides({width = true, height = false} = {}): string[] {
   return (allowedOverrides as unknown as string[]).concat(width ? widthProperties : []).concat(height ? heightProperties : []);
 }