@react-spectrum/s2 0.7.1 → 0.8.0

package/src/ButtonGroup.tsx

@@ -14,13 +14,13 @@ import {ButtonContext, LinkButtonContext} from './Button';
 import {ContextValue, Provider, SlotProps} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, useCallback, useRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
+import {filterDOMProps, useLayoutEffect, useValueEffect} from '@react-aria/utils';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {
   useDOMRef,
   useResizeObserver
 } from '@react-spectrum/utils';
-import {useLayoutEffect, useValueEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ButtonGroupStyleProps {
@@ -112,7 +112,8 @@ export const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupPro
     orientation = 'horizontal',
     align = 'start',
     children,
-    isDisabled
+    isDisabled,
+    ...otherProps
   } = props;
 
   let [hasOverflow, setHasOverflow] = useValueEffect(false);
@@ -165,6 +166,7 @@ export const ButtonGroup = forwardRef(function ButtonGroup(props: ButtonGroupPro
   let context = {styles: style({flexShrink: 0}), size, isDisabled};
   return (
     <div
+      {...filterDOMProps(otherProps)}
       ref={domRef}
       style={props.UNSAFE_style}
       className={(props.UNSAFE_className || '') + buttongroup({

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/Card.tsx

@@ -501,7 +501,7 @@ export interface CardPreviewProps extends UnsafeStyles, DOMProps {
 
 export const CardPreview = forwardRef(function CardPreview(props: CardPreviewProps, ref: DOMRef<HTMLDivElement>) {
   let {size, isQuiet, isHovered, isFocusVisible, isSelected, isPressed, isCheckboxSelection} = useContext(InternalCardContext);
-  let {UNSAFE_className, UNSAFE_style} = props;
+  let {UNSAFE_className = '', UNSAFE_style} = props;
   let domRef = useDOMRef(ref);
   return (
     <div

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/ColorSwatchPicker.tsx

@@ -50,6 +50,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: Co
     density = 'regular',
     size = 'M',
     rounding = 'none',
+    UNSAFE_className = '',
     ...otherProps
   } = props;
   let domRef = useDOMRef(ref);
@@ -58,7 +59,7 @@ export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: Co
     <AriaColorSwatchPicker
       {...otherProps}
       ref={domRef}
-      className={props.UNSAFE_className + style({
+      className={UNSAFE_className + style({
         display: 'flex',
         flexWrap: 'wrap',
         gap: {

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/Content.tsx

@@ -37,7 +37,7 @@ export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -57,7 +57,7 @@ export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, D
 export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -77,7 +77,7 @@ export const ContentContext = createContext<ContextValue<Partial<ContentProps>,
 export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -96,7 +96,7 @@ export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOM
 export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, children, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, children, ...otherProps} = props;
   let racContext = useContext(RACTextContext);
   let isSkeleton = useIsSkeleton();
   [children, UNSAFE_style] = useSkeletonText(children, UNSAFE_style);
@@ -130,7 +130,7 @@ export const KeyboardContext = createContext<ContextValue<Partial<ContentProps>,
 export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }
@@ -149,7 +149,7 @@ export const FooterContext = createContext<ContextValue<Partial<ContentProps>, D
 export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, FooterContext);
   let domRef = useDOMRef(ref);
-  let {UNSAFE_className = '', UNSAFE_style, styles, isHidden, slot, ...otherProps} = props;
+  let {UNSAFE_className = '', UNSAFE_style, styles = '', isHidden, slot, ...otherProps} = props;
   if (isHidden) {
     return null;
   }

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/Disclosure.tsx

@@ -130,10 +130,10 @@ const buttonStyles = style({
   fontWeight: 'bold',
   fontSize: {
     size: {
-      S: 'heading-xs',
-      M: 'heading-sm',
-      L: 'heading',
-      XL: 'heading-lg'
+      S: 'title-sm',
+      M: 'title',
+      L: 'title-lg',
+      XL: 'title-xl'
     }
   },
   lineHeight: 'ui',
@@ -147,32 +147,32 @@ const buttonStyles = style({
     // compact is equivalent to 'control', but other densities have more padding.
     size: {
       S: {
+        density: {
+          compact: 18,
+          regular: 24,
+          spacious: 32
+        }
+      },
+      M: {
         density: {
           compact: 24,
           regular: 32,
           spacious: 40
         }
       },
-      M: {
+      L: {
         density: {
           compact: 32,
           regular: 40,
           spacious: 48
         }
       },
-      L: {
+      XL: {
         density: {
           compact: 40,
           regular: 48,
           spacious: 56
         }
-      },
-      XL: {
-        density: {
-          compact: 48,
-          regular: 56,
-          spacious: 64
-        }
       }
     }
   },
@@ -219,18 +219,12 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
   let domRef = useDOMRef(ref);
   let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;
 
-  let mapSize = {
-    S: 'XS',
-    M: 'S',
-    L: 'M',
-    XL: 'L'
-  };
-
-  // maps to one size smaller in the compact density to ensure there is space between the top and bottom of the action button and container
+  // Shift button size down by 2 for compact density, 1 for regular/spacious to ensure there is space between the top and bottom of the action button and container
   let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;
-  if (density === 'compact') {
-    newSize = mapSize[size ?? 'M'] as 'XS' | 'S' | 'M' | 'L';
-  }
+  const sizes = ['XS', 'S', 'M', 'L', 'XL'];
+  const currentIndex = sizes.indexOf(size ?? 'M');
+  const shift = density === 'compact' ? 2 : 1;
+  newSize = sizes[Math.max(0, currentIndex - shift)] as 'XS' | 'S' | 'M' | 'L' | 'XL';
 
   return (
     <Provider

package/src/Divider.tsx

@@ -61,6 +61,8 @@ export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
   borderStyle: 'none',
   borderRadius: 'full',
   margin: 0,
+  flexGrow: 0,
+  flexShrink: 0,
   height: {
     orientation: {
       horizontal: {

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/Image.tsx

@@ -207,7 +207,7 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
     animation(domRef.current);
   });
 
-  if (props.alt == null) {
+  if (props.alt == null && process.env.NODE_ENV !== 'production') {
     console.warn(
       'The `alt` prop was not provided to an image. ' +
       'Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image ' +

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/Link.tsx

@@ -34,7 +34,7 @@ interface LinkStyleProps {
   isQuiet?: boolean
 }
 
-export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {
+export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'onClick'>, StyleProps, LinkStyleProps {
   children: ReactNode
 }
 

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/NotificationBadge.tsx

@@ -0,0 +1,172 @@
+/*
+ * Copyright 2025 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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
+import {ContextValue, SlotProps} from 'react-aria-components';
+import {filterDOMProps} from '@react-aria/utils';
+import {fontRelative, style} from '../style' with {type: 'macro'};
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {NumberFormatter} from '@internationalized/number';
+import React, {createContext, forwardRef} from 'react';
+import {useDOMRef} from '@react-spectrum/utils';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+export interface NotificationBadgeStyleProps {
+  /**
+   * The size of the notification badge.
+   *
+   * @default 'S'
+   */
+  size?: 'S' | 'M' | 'L' | 'XL'
+}
+
+export interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {
+  /**
+   * The value to be displayed in the notification badge.
+   */
+  value?: number | null
+}
+
+interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
+  isDisabled?: boolean,
+  staticColor?: 'black' | 'white' | 'auto'
+}
+
+export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
+
+const badge = style({
+  display: {
+    default: 'flex',
+    isDisabled: 'none'
+  },
+  font: 'control',
+  color: {
+    default: 'white',
+    isStaticColor: 'auto',
+    forcedColors: 'ButtonText'
+  },
+  fontSize: {
+    size: {
+      S: 'ui-xs',
+      M: 'ui-xs',
+      L: 'ui-sm',
+      XL: 'ui'
+    }
+  },
+  borderStyle: {
+    forcedColors: 'solid'
+  },
+  borderWidth: {
+    forcedColors: '[1px]'
+  },
+  borderColor: {
+    forcedColors: 'ButtonBorder'
+  },
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: {
+    default: 'accent',
+    isStaticColor: 'transparent-overlay-1000',
+    forcedColors: 'ButtonFace'
+  },
+  height: {
+    size: {
+      S: {
+        default: 12,
+        isIndicatorOnly: 8
+      },
+      M: {
+        default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible
+        isIndicatorOnly: 8
+      },
+      L: {
+        default: 16,
+        isIndicatorOnly: fontRelative(12)
+      },
+      XL: {
+        default: 18,
+        isIndicatorOnly: fontRelative(12)
+      }
+    }
+  },
+  aspectRatio: {
+    isIndicatorOnly: 'square',
+    isSingleDigit: 'square'
+  },
+  width: 'max',
+  paddingX: {
+    isDoubleDigit: 'edge-to-text'
+  },
+  borderRadius: 'pill'
+}, getAllowedOverrides());
+
+/**
+ * Notification badges are used to indicate new or pending activity .
+ */
+export const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+  [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);
+  let {
+    size = 'S',
+    value,
+    isDisabled = false,
+    staticColor,
+    ...otherProps
+  } = props as NotificationBadgeContextProps;
+  let domRef = useDOMRef(ref);
+  let {locale} = useLocale();
+  let formattedValue = '';
+
+  let isIndicatorOnly = false;
+  let isSingleDigit = false;
+  let isDoubleDigit = false;
+
+  if (value == null) {
+    isIndicatorOnly = true;
+  } else if (value <= 0) {
+    throw new Error('Value cannot be negative or zero');
+  } else if (!Number.isInteger(value)) {
+    throw new Error('Value must be a positive integer');
+  } else {
+    formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));
+    let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0;  // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)
+    if (length === 1) {
+      isSingleDigit = true;
+    } else if (length === 2) {
+      isDoubleDigit = true;
+    }
+
+    if (value > 99) {
+      formattedValue = stringFormatter.format('notificationbadge.plus', {notifications: formattedValue});
+    }
+  }
+
+  let ariaLabel = props['aria-label'] || undefined;
+  if (ariaLabel === undefined && isIndicatorOnly) {
+    ariaLabel = stringFormatter.format('notificationbadge.indicatorOnly');
+  }
+
+  return (
+    <span
+      {...filterDOMProps(otherProps, {labelable: true})}
+      role={ariaLabel && 'img'}
+      aria-label={ariaLabel}
+      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}
+      style={props.UNSAFE_style}
+      ref={domRef}>
+      {formattedValue}
+    </span>
+  );
+});

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 (
     <>