chore(s2): fix S2 children and context types (#7668)

* fix S2 children and context types

* fix chromatic types?

* missed one

* switch some children types back to optional

* fix types

* fix types

* types

* review comment

Author: reidbarber

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. */