chore(s2): fix S2 children and context types

packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx

@@ -15,7 +15,7 @@ import {DynamicExample, Example} from '../stories/ActionMenu.stories';
 import type {Meta, StoryObj} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
 
-const meta: Meta<typeof ActionMenu> = {
+const meta: Meta<typeof ActionMenu<any>> = {
   component: ActionMenu,
   parameters: {
     chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}

packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx

@@ -14,7 +14,7 @@ import {ActionMenu} from '../src';
 
 import type {Meta} from '@storybook/react';
 
-const meta: Meta<typeof ActionMenu> = {
+const meta: Meta<typeof ActionMenu<any>> = {
   component: ActionMenu,
   parameters: {
     chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}

packages/@react-spectrum/s2/chromatic/Menu.stories.tsx

@@ -15,7 +15,7 @@ import {Menu} from '../src';
 import type {Meta} from '@storybook/react';
 import {userEvent, within} from '@storybook/testing-library';
 
-const meta: Meta<typeof Menu> = {
+const meta: Meta<typeof Menu<any>> = {
   component: Menu,
   parameters: {
     chromaticProvider: {colorSchemes: ['light'], backgrounds: ['base'], locales: ['en-US'], disableAnimations: true}

packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx

@@ -14,7 +14,7 @@ import {Menu} from '../src';
 
 import type {Meta} from '@storybook/react';
 
-const meta: Meta<typeof Menu> = {
+const meta: Meta<typeof Menu<any>> = {
   component: Menu,
   parameters: {
     chromaticProvider: {colorSchemes: ['dark'], backgrounds: ['base'], locales: ['ar-AE'], disableAnimations: true}

packages/@react-spectrum/s2/src/Accordion.tsx

@@ -43,7 +43,7 @@ const accordion = style({
   flexDirection: 'column'
 }, getAllowedOverrides({height: true}));
 
-export const AccordionContext = createContext<ContextValue<AccordionProps, DOMRefValue<HTMLDivElement>>>(null);
+export const AccordionContext = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * An accordion is a container for multiple disclosures.

packages/@react-spectrum/s2/src/ActionButton.tsx

@@ -54,7 +54,7 @@ interface ActionGroupItemStyleProps {
 
 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
+  children: ReactNode
 }
 
 // These styles handle both ActionButton and ToggleButton
@@ -228,7 +228,7 @@ const avatarSize = {
   X: 26
 } as const;
 
-export const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ActionButtons allow users to perform an action.

packages/@react-spectrum/s2/src/ActionMenu.tsx

@@ -32,7 +32,7 @@ export interface ActionMenuProps<T> extends
   menuSize?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ActionMenuContext = createContext<ContextValue<ActionMenuProps<any>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionMenuContext = createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.

packages/@react-spectrum/s2/src/Avatar.tsx

@@ -53,7 +53,7 @@ const imageStyles = style({
   }
 }, getAllowedOverrides({width: false}));
 
-export const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);
+export const AvatarContext = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
 
 /**
  * An avatar is a thumbnail representation of an entity, such as a user or an organization.

packages/@react-spectrum/s2/src/AvatarGroup.tsx

@@ -35,7 +35,7 @@ export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingPr
   styles?: StylesPropWithoutWidth
 }
 
-export const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const avatar = style({
   marginStart: {

packages/@react-spectrum/s2/src/Breadcrumbs.tsx

@@ -62,10 +62,10 @@ interface BreadcrumbsStyleProps {
 
 export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);
+export const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
 
 const wrapper = style<BreadcrumbsStyleProps>({
   position: 'relative',
@@ -95,7 +95,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
   }
 }, getAllowedOverrides());
 
-const InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});
+const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
 /** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
 export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
@@ -290,7 +290,7 @@ const heading = style({
 
 export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {
   /** The children of the breadcrumb item. */
-  children?: ReactNode
+  children: ReactNode
 }
 
 /** An individual Breadcrumb for Breadcrumbs. */

packages/@react-spectrum/s2/src/Button.tsx

@@ -53,16 +53,16 @@ interface ButtonStyleProps {
 
 export interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
-  children?: ReactNode
+  children: ReactNode
 }
 
 export interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {
   /** The content to display in the Button. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
-export const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const ButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const LinkButtonContext = createContext<ContextValue<Partial<ButtonProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
 
 const iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
 const button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({

packages/@react-spectrum/s2/src/ButtonGroup.tsx

@@ -57,7 +57,7 @@ interface ButtonGroupContextValue extends Partial<ButtonGroupProps> {
   isHidden?: boolean
 }
 
-export const ButtonGroupContext = createContext<ContextValue<ButtonGroupContextValue, DOMRefValue<HTMLDivElement>>>({});
+export const ButtonGroupContext = createContext<ContextValue<Partial<ButtonGroupContextValue>, DOMRefValue<HTMLDivElement>>>({});
 
 const buttongroup = style<ButtonGroupStyleProps>({
   display: 'inline-flex',

packages/@react-spectrum/s2/src/CardView.tsx

@@ -531,7 +531,7 @@ const cardViewStyles = style({
   outlineOffset: -2
 }, getAllowedOverrides({height: true}));
 
-export const CardViewContext = createContext<ContextValue<CardViewProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+export const CardViewContext = createContext<ContextValue<Partial<CardViewProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
 
 export const CardView = /*#__PURE__*/ (forwardRef as forwardRefType)(function CardView<T extends object>(props: CardViewProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CardViewContext);

packages/@react-spectrum/s2/src/Checkbox.tsx

@@ -41,7 +41,7 @@ export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className' | 'st
   children?: ReactNode
 }
 
-export const CheckboxContext = createContext<ContextValue<CheckboxProps, FocusableRefValue<HTMLLabelElement>>>(null);
+export const CheckboxContext = createContext<ContextValue<Partial<CheckboxProps>, FocusableRefValue<HTMLLabelElement>>>(null);
 
 const wrapper = style({
   display: 'flex',

packages/@react-spectrum/s2/src/CheckboxGroup.tsx

@@ -41,15 +41,15 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
   /**
    * The Checkboxes contained within the CheckboxGroup.
    */
-  children?: ReactNode,
+  children: ReactNode,
   /**
    * By default, checkboxes are not emphasized (gray).
    * The emphasized (blue) version provides visual prominence.
    */
   isEmphasized?: boolean
 }
 
-export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+export const CheckboxGroupContext = createContext<ContextValue<Partial<CheckboxGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A CheckboxGroup allows users to select one or more items from a list of choices.

packages/@react-spectrum/s2/src/CloseButton.tsx

@@ -79,7 +79,7 @@ const styles = style({
   }
 }, getAllowedOverrides());
 
-export const CloseButtonContext = createContext<ContextValue<CloseButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * A CloseButton allows a user to dismiss a dialog.

packages/@react-spectrum/s2/src/ColorArea.tsx

@@ -25,7 +25,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'className' | 'style'>, StyleProps {}
 
-export const ColorAreaContext = createContext<ContextValue<ColorAreaProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.

packages/@react-spectrum/s2/src/ColorField.tsx

@@ -34,7 +34,7 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
   size?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, TextFieldRef>>(null);
+export const ColorFieldContext = createContext<ContextValue<Partial<ColorFieldProps>, TextFieldRef>>(null);
 
 /**
  * A color field allows users to edit a hex color or individual color channel value.

packages/@react-spectrum/s2/src/ColorSlider.tsx

@@ -31,7 +31,7 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children'
   label?: string
 }
 
-export const ColorSliderContext = createContext<ContextValue<ColorSliderProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorSlider allows users to adjust an individual channel of a color value.

packages/@react-spectrum/s2/src/ColorSwatch.tsx

@@ -43,7 +43,7 @@ interface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size'
   useWrapper: (swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) => JSX.Element
 }
 
-export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorSwatchContext = createContext<ContextValue<Partial<ColorSwatchProps>, DOMRefValue<HTMLDivElement>>>(null);
 export const InternalColorSwatchContext = createContext<SpectrumColorSwatchContextValue | null>(null);
 
 /**

packages/@react-spectrum/s2/src/ColorWheel.tsx

@@ -31,7 +31,7 @@ export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' |
   size?: number
 }
 
-export const ColorWheelContext = createContext<ContextValue<ColorWheelProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.

packages/@react-spectrum/s2/src/Content.tsx

@@ -21,7 +21,7 @@ import {useIsSkeleton, useSkeletonText} from './Skeleton';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ContentProps extends UnsafeStyles, SlotProps {
-  children?: ReactNode,
+  children: ReactNode,
   styles?: StyleString,
   isHidden?: boolean,
   id?: string
@@ -31,7 +31,7 @@ interface HeadingProps extends ContentProps {
   level?: number
 }
 
-export const HeadingContext = createContext<ContextValue<HeadingProps, DOMRefValue<HTMLHeadingElement>>>(null);
+export const HeadingContext = createContext<ContextValue<Partial<HeadingProps>, DOMRefValue<HTMLHeadingElement>>>(null);
 
 export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
@@ -52,7 +52,7 @@ function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   );
 });
 
-export const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);
+export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
 
 export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, HeaderContext);
@@ -72,7 +72,7 @@ export const Header = forwardRef(function Header(props: ContentProps, ref: DOMRe
   );
 });
 
-export const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 export const Content = forwardRef(function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ContentContext);
@@ -91,7 +91,7 @@ export const Content = forwardRef(function Content(props: ContentProps, ref: DOM
   );
 });
 
-export const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);
+export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);
 
 export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, TextContext);
@@ -125,7 +125,7 @@ export const Text = forwardRef(function Text(props: ContentProps, ref: DOMRef) {
   return text;
 });
 
-export const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
+export const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
 export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, KeyboardContext);
@@ -144,7 +144,7 @@ export const Keyboard = forwardRef(function Keyboard(props: ContentProps, ref: D
   );
 });
 
-export const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
+export const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
 export const Footer = forwardRef(function Footer(props: ContentProps, ref: DOMRef) {
   [props, ref] = useSpectrumContextProps(props, ref, FooterContext);

packages/@react-spectrum/s2/src/ContextualHelp.tsx

@@ -30,7 +30,7 @@ export interface ContextualHelpProps extends
   Pick<PopoverDialogProps, 'shouldFlip' | 'offset' | 'crossOffset' | 'placement' | 'containerPadding'>,
   ContextualHelpStyleProps, StyleProps, DOMProps, AriaLabelingProps {
   /** Contents of the Contextual Help popover. */
-  children?: ReactNode,
+  children: ReactNode,
   /**
    * The size of the ActionButton.
    *
@@ -46,7 +46,7 @@ const popover = style({
   padding: 24
 });
 
-export const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
 /**
  * Contextual help shows a user extra information about the state of an adjacent component, or a total view.

packages/@react-spectrum/s2/src/Disclosure.tsx

@@ -39,7 +39,7 @@ export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' |
   children: ReactNode
 }
 
-export const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);
+export const DisclosureContext = createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const disclosure = style({
   color: 'heading',

packages/@react-spectrum/s2/src/Divider.tsx

@@ -40,7 +40,7 @@ interface DividerSpectrumProps {
 // TODO: allow overriding height (only when orientation is vertical)??
 export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'elementType'>, StyleProps {}
 
-export const DividerContext = createContext<ContextValue<DividerProps, DOMRefValue>>(null);
+export const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 
 export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
   ...staticColor(),

packages/@react-spectrum/s2/src/DropZone.tsx

@@ -26,7 +26,7 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The content to display in the drop zone. */
-  children?: ReactNode,
+  children: ReactNode,
   /** Whether the drop zone has been filled. */
   isFilled?: boolean,
   /** The message to replace the default banner message that is shown when the drop zone is filled. */
@@ -39,7 +39,7 @@ export interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'sty
     size?: 'S' | 'M' | 'L'
 }
 
-export const DropZoneContext = createContext<ContextValue<DropZoneProps, DOMRefValue<HTMLDivElement>>>(null);
+export const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const dropzone = style<DropZoneRenderProps>({
   display: 'flex',

packages/@react-spectrum/s2/src/Field.tsx

@@ -151,7 +151,7 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
 
 interface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {
   size?: 'S' | 'M' | 'L' | 'XL',
-  children?: ReactNode,
+  children: ReactNode,
   styles?: StyleString
 }
 

packages/@react-spectrum/s2/src/Form.tsx

@@ -31,10 +31,10 @@ interface FormStyleProps extends Omit<SpectrumLabelableProps, 'label' | 'context
 }
 
 export interface FormProps extends FormStyleProps, Omit<RACFormProps, 'className' | 'style' | 'children'>, StyleProps {
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const FormContext = createContext<FormStyleProps | null>(null);
+export const FormContext = createContext<Partial<FormStyleProps | null>>(null);
 export function useFormProps<T extends FormStyleProps>(props: T): T {
   let ctx = useContext(FormContext);
   let isSkeleton = useIsSkeleton();

packages/@react-spectrum/s2/src/Icon.tsx

@@ -31,8 +31,8 @@ export interface IllustrationContextValue extends IconContextValue {
   size?: 'S' | 'M' | 'L'
 }
 
-export const IconContext = createContext<ContextValue<IconContextValue, SVGElement>>({});
-export const IllustrationContext = createContext<ContextValue<IllustrationContextValue, SVGElement>>({});
+export const IconContext = createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
+export const IllustrationContext = createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
 
 export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, context: Context<ContextValue<IconContextValue, SVGElement>> = IconContext): FunctionComponent<IconProps> {
   return (props: IconProps) => {

packages/@react-spectrum/s2/src/IllustratedMessage.tsx

@@ -155,7 +155,7 @@ interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMe
   isDropTarget?: boolean
 }
 
-export const IllustratedMessageContext = createContext<ContextValue<IllustratedMessageContextProps, DOMRefValue<HTMLDivElement>>>(null);
+export const IllustratedMessageContext = createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
  * An IllustratedMessage displays an illustration and a message, usually