From d3a560bafbb0e4fdfca45dfff91f23046b7b3214 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Fri, 24 Jan 2025 15:38:06 -0600
Subject: [PATCH 1/8] fix S2 children and context types
---
packages/@react-spectrum/s2/src/Accordion.tsx | 2 +-
packages/@react-spectrum/s2/src/ActionButton.tsx | 4 ++--
packages/@react-spectrum/s2/src/ActionMenu.tsx | 2 +-
packages/@react-spectrum/s2/src/Avatar.tsx | 2 +-
packages/@react-spectrum/s2/src/AvatarGroup.tsx | 2 +-
packages/@react-spectrum/s2/src/Breadcrumbs.tsx | 8 ++++----
packages/@react-spectrum/s2/src/Button.tsx | 8 ++++----
packages/@react-spectrum/s2/src/ButtonGroup.tsx | 2 +-
packages/@react-spectrum/s2/src/CardView.tsx | 2 +-
packages/@react-spectrum/s2/src/Checkbox.tsx | 2 +-
packages/@react-spectrum/s2/src/CheckboxGroup.tsx | 4 ++--
packages/@react-spectrum/s2/src/CloseButton.tsx | 2 +-
packages/@react-spectrum/s2/src/ColorArea.tsx | 2 +-
packages/@react-spectrum/s2/src/ColorField.tsx | 2 +-
packages/@react-spectrum/s2/src/ColorSlider.tsx | 2 +-
packages/@react-spectrum/s2/src/ColorSwatch.tsx | 2 +-
packages/@react-spectrum/s2/src/ColorWheel.tsx | 2 +-
packages/@react-spectrum/s2/src/Content.tsx | 14 +++++++-------
packages/@react-spectrum/s2/src/ContextualHelp.tsx | 4 ++--
packages/@react-spectrum/s2/src/Disclosure.tsx | 2 +-
packages/@react-spectrum/s2/src/Divider.tsx | 2 +-
packages/@react-spectrum/s2/src/DropZone.tsx | 4 ++--
packages/@react-spectrum/s2/src/Field.tsx | 4 ++--
packages/@react-spectrum/s2/src/Form.tsx | 4 ++--
packages/@react-spectrum/s2/src/Icon.tsx | 4 ++--
.../@react-spectrum/s2/src/IllustratedMessage.tsx | 2 +-
packages/@react-spectrum/s2/src/Image.tsx | 2 +-
packages/@react-spectrum/s2/src/Link.tsx | 4 ++--
packages/@react-spectrum/s2/src/Menu.tsx | 4 ++--
packages/@react-spectrum/s2/src/Meter.tsx | 2 +-
packages/@react-spectrum/s2/src/NumberField.tsx | 2 +-
packages/@react-spectrum/s2/src/ProgressBar.tsx | 2 +-
packages/@react-spectrum/s2/src/ProgressCircle.tsx | 2 +-
packages/@react-spectrum/s2/src/Radio.tsx | 2 +-
packages/@react-spectrum/s2/src/RadioGroup.tsx | 4 ++--
packages/@react-spectrum/s2/src/RangeSlider.tsx | 2 +-
packages/@react-spectrum/s2/src/SearchField.tsx | 2 +-
.../@react-spectrum/s2/src/SegmentedControl.tsx | 4 ++--
packages/@react-spectrum/s2/src/Skeleton.tsx | 2 +-
packages/@react-spectrum/s2/src/Slider.tsx | 4 ++--
packages/@react-spectrum/s2/src/StatusLight.tsx | 4 ++--
packages/@react-spectrum/s2/src/Switch.tsx | 4 ++--
packages/@react-spectrum/s2/src/TableView.tsx | 2 +-
packages/@react-spectrum/s2/src/Tabs.tsx | 10 +++++-----
packages/@react-spectrum/s2/src/TagGroup.tsx | 4 ++--
packages/@react-spectrum/s2/src/TextField.tsx | 4 ++--
packages/@react-spectrum/s2/src/ToggleButton.tsx | 4 ++--
.../@react-spectrum/s2/src/ToggleButtonGroup.tsx | 2 +-
packages/@react-spectrum/s2/src/Tooltip.tsx | 6 +++---
49 files changed, 84 insertions(+), 84 deletions(-)
diff --git a/packages/@react-spectrum/s2/src/Accordion.tsx b/packages/@react-spectrum/s2/src/Accordion.tsx
index 468663688d1..2145077a512 100644
--- a/packages/@react-spectrum/s2/src/Accordion.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/ActionButton.tsx b/packages/@react-spectrum/s2/src/ActionButton.tsx
index 7168ff156fb..d7378755080 100644
--- a/packages/@react-spectrum/s2/src/ActionButton.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/ActionMenu.tsx b/packages/@react-spectrum/s2/src/ActionMenu.tsx
index 6df0dda6edd..ed891a42d70 100644
--- a/packages/@react-spectrum/s2/src/ActionMenu.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/Avatar.tsx b/packages/@react-spectrum/s2/src/Avatar.tsx
index fd296265f84..6ea34ff2bdd 100644
--- a/packages/@react-spectrum/s2/src/Avatar.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/AvatarGroup.tsx b/packages/@react-spectrum/s2/src/AvatarGroup.tsx
index 9963b3f9f9f..28c485820fe 100644
--- a/packages/@react-spectrum/s2/src/AvatarGroup.tsx
+++ b/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: {
diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
index 293d35ce63f..21e781e777a 100644
--- a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
+++ b/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. */
diff --git a/packages/@react-spectrum/s2/src/Button.tsx b/packages/@react-spectrum/s2/src/Button.tsx
index 79dadf987de..c85152f1b85 100644
--- a/packages/@react-spectrum/s2/src/Button.tsx
+++ b/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}>({
diff --git a/packages/@react-spectrum/s2/src/ButtonGroup.tsx b/packages/@react-spectrum/s2/src/ButtonGroup.tsx
index 05f0a276e8e..01c14dd94e5 100644
--- a/packages/@react-spectrum/s2/src/ButtonGroup.tsx
+++ b/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',
diff --git a/packages/@react-spectrum/s2/src/CardView.tsx b/packages/@react-spectrum/s2/src/CardView.tsx
index 8d275df67ec..7dc90d37b31 100644
--- a/packages/@react-spectrum/s2/src/CardView.tsx
+++ b/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);
diff --git a/packages/@react-spectrum/s2/src/Checkbox.tsx b/packages/@react-spectrum/s2/src/Checkbox.tsx
index 003e73c46b4..025962ff43e 100644
--- a/packages/@react-spectrum/s2/src/Checkbox.tsx
+++ b/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',
diff --git a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
index c60a464c77c..2d414eb4b0a 100644
--- a/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
+++ b/packages/@react-spectrum/s2/src/CheckboxGroup.tsx
@@ -41,7 +41,7 @@ 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.
@@ -49,7 +49,7 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
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.
diff --git a/packages/@react-spectrum/s2/src/CloseButton.tsx b/packages/@react-spectrum/s2/src/CloseButton.tsx
index a16e06c9982..3e77db1de24 100644
--- a/packages/@react-spectrum/s2/src/CloseButton.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/ColorArea.tsx b/packages/@react-spectrum/s2/src/ColorArea.tsx
index 4d6d63b043b..f66df9f008f 100644
--- a/packages/@react-spectrum/s2/src/ColorArea.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/ColorField.tsx b/packages/@react-spectrum/s2/src/ColorField.tsx
index 3372162e408..b937f10e543 100644
--- a/packages/@react-spectrum/s2/src/ColorField.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/ColorSlider.tsx b/packages/@react-spectrum/s2/src/ColorSlider.tsx
index a6c4af44dbb..87d9b07d279 100644
--- a/packages/@react-spectrum/s2/src/ColorSlider.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/ColorSwatch.tsx b/packages/@react-spectrum/s2/src/ColorSwatch.tsx
index 1c5300b8d66..01d4affbf93 100644
--- a/packages/@react-spectrum/s2/src/ColorSwatch.tsx
+++ b/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);
/**
diff --git a/packages/@react-spectrum/s2/src/ColorWheel.tsx b/packages/@react-spectrum/s2/src/ColorWheel.tsx
index 8edd59f14e5..7d773bd14e4 100644
--- a/packages/@react-spectrum/s2/src/ColorWheel.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
index 5f15f593b95..c2dd8fe4b05 100644
--- a/packages/@react-spectrum/s2/src/Content.tsx
+++ b/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
}
@@ -30,7 +30,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>) {
@@ -51,7 +51,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);
@@ -71,7 +71,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);
@@ -90,7 +90,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);
@@ -124,7 +124,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);
@@ -143,7 +143,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);
diff --git a/packages/@react-spectrum/s2/src/ContextualHelp.tsx b/packages/@react-spectrum/s2/src/ContextualHelp.tsx
index 56a3423c1dd..339c83902d3 100644
--- a/packages/@react-spectrum/s2/src/ContextualHelp.tsx
+++ b/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.
diff --git a/packages/@react-spectrum/s2/src/Disclosure.tsx b/packages/@react-spectrum/s2/src/Disclosure.tsx
index 5ca6ef22c76..f74f1fcf74a 100644
--- a/packages/@react-spectrum/s2/src/Disclosure.tsx
+++ b/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',
diff --git a/packages/@react-spectrum/s2/src/Divider.tsx b/packages/@react-spectrum/s2/src/Divider.tsx
index bc4b3d60700..31ae57f0f44 100644
--- a/packages/@react-spectrum/s2/src/Divider.tsx
+++ b/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(),
diff --git a/packages/@react-spectrum/s2/src/DropZone.tsx b/packages/@react-spectrum/s2/src/DropZone.tsx
index c090ddb753a..8bea944c2a3 100644
--- a/packages/@react-spectrum/s2/src/DropZone.tsx
+++ b/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',
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index 19e56772b8e..634497923c5 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -39,7 +39,7 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
staticColor?: 'white' | 'black' | 'auto',
contextualHelp?: ReactNode,
isQuiet?: boolean,
- children?: ReactNode
+ children: ReactNode
}
export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
@@ -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
}
diff --git a/packages/@react-spectrum/s2/src/Form.tsx b/packages/@react-spectrum/s2/src/Form.tsx
index d5c0d189770..0e65b03f6e7 100644
--- a/packages/@react-spectrum/s2/src/Form.tsx
+++ b/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();
diff --git a/packages/@react-spectrum/s2/src/Icon.tsx b/packages/@react-spectrum/s2/src/Icon.tsx
index c13d2819fcf..42f54df7d0f 100644
--- a/packages/@react-spectrum/s2/src/Icon.tsx
+++ b/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) => {
diff --git a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx b/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
index dcdfdfbcecf..53908b2c23a 100644
--- a/packages/@react-spectrum/s2/src/IllustratedMessage.tsx
+++ b/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
diff --git a/packages/@react-spectrum/s2/src/Image.tsx b/packages/@react-spectrum/s2/src/Image.tsx
index da7fa1e8644..45d396662b9 100644
--- a/packages/@react-spectrum/s2/src/Image.tsx
+++ b/packages/@react-spectrum/s2/src/Image.tsx
@@ -54,7 +54,7 @@ interface ImageContextValue extends ImageProps {
hidden?: boolean
}
-export const ImageContext = createContext<ContextValue<ImageContextValue, HTMLDivElement>>(null);
+export const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
type ImageState = 'loading' | 'loaded' | 'revealed' | 'error';
interface State {
diff --git a/packages/@react-spectrum/s2/src/Link.tsx b/packages/@react-spectrum/s2/src/Link.tsx
index a5ab4a21316..5f98aa7e491 100644
--- a/packages/@react-spectrum/s2/src/Link.tsx
+++ b/packages/@react-spectrum/s2/src/Link.tsx
@@ -35,10 +35,10 @@ interface LinkStyleProps {
}
export interface LinkProps extends Omit<RACLinkProps, 'isDisabled' | 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, LinkStyleProps {
- children?: ReactNode
+ children: ReactNode
}
-export const LinkContext = createContext<ContextValue<LinkProps, FocusableRefValue<HTMLAnchorElement>>>(null);
+export const LinkContext = createContext<ContextValue<Partial<LinkProps>, FocusableRefValue<HTMLAnchorElement>>>(null);
const link = style<LinkRenderProps & LinkStyleProps & {isSkeleton: boolean, isStaticColor: boolean}>({
...focusRing(),
diff --git a/packages/@react-spectrum/s2/src/Menu.tsx b/packages/@react-spectrum/s2/src/Menu.tsx
index 2b7b608602e..6f4c09b0da7 100644
--- a/packages/@react-spectrum/s2/src/Menu.tsx
+++ b/packages/@react-spectrum/s2/src/Menu.tsx
@@ -81,12 +81,12 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children' | 'style
/**
* The contents of the collection.
*/
- children?: ReactNode | ((item: T) => ReactNode),
+ children: ReactNode | ((item: T) => ReactNode),
/** Hides the default link out icons on menu items that open links in a new tab. */
hideLinkOutIcon?: boolean
}
-export const MenuContext = createContext<ContextValue<MenuProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+export const MenuContext = createContext<ContextValue<Partial<MenuProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
const menuItemGrid = {
size: {
diff --git a/packages/@react-spectrum/s2/src/Meter.tsx b/packages/@react-spectrum/s2/src/Meter.tsx
index 73ca3a7e621..0f791c80bb0 100644
--- a/packages/@react-spectrum/s2/src/Meter.tsx
+++ b/packages/@react-spectrum/s2/src/Meter.tsx
@@ -53,7 +53,7 @@ export interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className
label?: ReactNode
}
-export const MeterContext = createContext<ContextValue<MeterProps, DOMRefValue<HTMLDivElement>>>(null);
+export const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
const wrapper = style({
...bar()
diff --git a/packages/@react-spectrum/s2/src/NumberField.tsx b/packages/@react-spectrum/s2/src/NumberField.tsx
index b448ea3c435..a18f70ac951 100644
--- a/packages/@react-spectrum/s2/src/NumberField.tsx
+++ b/packages/@react-spectrum/s2/src/NumberField.tsx
@@ -54,7 +54,7 @@ export interface NumberFieldProps extends
size?: 'S' | 'M' | 'L' | 'XL'
}
-export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, TextFieldRef>>(null);
+export const NumberFieldContext = createContext<ContextValue<Partial<NumberFieldProps>, TextFieldRef>>(null);
const inputButton = style({
display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/ProgressBar.tsx b/packages/@react-spectrum/s2/src/ProgressBar.tsx
index b27695f3e21..0b2cf4a2a43 100644
--- a/packages/@react-spectrum/s2/src/ProgressBar.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressBar.tsx
@@ -55,7 +55,7 @@ export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'children'
label?: ReactNode
}
-export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressBarContext = createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
const indeterminateLTR = keyframes(`
0% {
diff --git a/packages/@react-spectrum/s2/src/ProgressCircle.tsx b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
index fa671f22da5..d8c53f9c72b 100644
--- a/packages/@react-spectrum/s2/src/ProgressCircle.tsx
+++ b/packages/@react-spectrum/s2/src/ProgressCircle.tsx
@@ -34,7 +34,7 @@ export interface ProgressCircleStyleProps {
isIndeterminate?: boolean
}
-export const ProgressCircleContext = createContext<ContextValue<ProgressCircleProps, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressCircleContext = createContext<ContextValue<Partial<ProgressCircleProps>, DOMRefValue<HTMLDivElement>>>(null);
// Double check the types passed to each style, may not need all for each
const wrapper = style<ProgressCircleStyleProps>({
diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
index 62dc88e1723..1cc9f001a46 100644
--- a/packages/@react-spectrum/s2/src/Radio.tsx
+++ b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -28,7 +28,7 @@ export interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' |
/**
* The label for the element.
*/
- children?: ReactNode
+ children: ReactNode
}
interface ContextProps {
diff --git a/packages/@react-spectrum/s2/src/RadioGroup.tsx b/packages/@react-spectrum/s2/src/RadioGroup.tsx
index 310592190f6..6ba21543a8c 100644
--- a/packages/@react-spectrum/s2/src/RadioGroup.tsx
+++ b/packages/@react-spectrum/s2/src/RadioGroup.tsx
@@ -28,7 +28,7 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
/**
* The Radios contained within the RadioGroup.
*/
- children?: ReactNode,
+ children: ReactNode,
/**
* The size of the RadioGroup.
*
@@ -47,7 +47,7 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
isEmphasized?: boolean
}
-export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+export const RadioGroupContext = createContext<ContextValue<Partial<RadioGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
/**
* Radio groups allow users to select a single option from a list of mutually exclusive options.
diff --git a/packages/@react-spectrum/s2/src/RangeSlider.tsx b/packages/@react-spectrum/s2/src/RangeSlider.tsx
index 9126edeb015..e197db55f1e 100644
--- a/packages/@react-spectrum/s2/src/RangeSlider.tsx
+++ b/packages/@react-spectrum/s2/src/RangeSlider.tsx
@@ -37,7 +37,7 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
endName?: string
}
-export const RangeSliderContext = createContext<ContextValue<RangeSliderProps, FocusableRefValue<HTMLDivElement>>>(null);
+export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
diff --git a/packages/@react-spectrum/s2/src/SearchField.tsx b/packages/@react-spectrum/s2/src/SearchField.tsx
index 5a35ea5b0d8..04a9f7f811a 100644
--- a/packages/@react-spectrum/s2/src/SearchField.tsx
+++ b/packages/@react-spectrum/s2/src/SearchField.tsx
@@ -40,7 +40,7 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
size?: 'S' | 'M' | 'L' | 'XL'
}
-export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);
+export const SearchFieldContext = createContext<ContextValue<Partial<SearchFieldProps>, TextFieldRef>>(null);
/**
* A SearchField is a text field designed for searches.
diff --git a/packages/@react-spectrum/s2/src/SegmentedControl.tsx b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
index a5fbe90da76..f92f9c56ece 100644
--- a/packages/@react-spectrum/s2/src/SegmentedControl.tsx
+++ b/packages/@react-spectrum/s2/src/SegmentedControl.tsx
@@ -52,7 +52,7 @@ export interface SegmentedControlItemProps extends AriaLabelingProps, StyleProps
isDisabled?: boolean
}
-export const SegmentedControlContext = createContext<ContextValue<SegmentedControlProps, DOMRefValue<HTMLDivElement>>>(null);
+export const SegmentedControlContext = createContext<ContextValue<Partial<SegmentedControlProps>, DOMRefValue<HTMLDivElement>>>(null);
const segmentedControl = style({
display: 'flex',
@@ -143,7 +143,7 @@ interface InternalSegmentedControlContextProps {
interface DefaultSelectionTrackProps {
defaultValue?: Key | null,
value?: Key | null,
- children?: ReactNode,
+ children: ReactNode,
prevRef: RefObject<DOMRect | null>,
currentSelectedRef: RefObject<HTMLDivElement | null>,
isJustified?: boolean
diff --git a/packages/@react-spectrum/s2/src/Skeleton.tsx b/packages/@react-spectrum/s2/src/Skeleton.tsx
index cad9e7495b3..302839dc152 100644
--- a/packages/@react-spectrum/s2/src/Skeleton.tsx
+++ b/packages/@react-spectrum/s2/src/Skeleton.tsx
@@ -48,7 +48,7 @@ export function useLoadingAnimation(isAnimating: boolean) {
}
export type SkeletonElement = ReactElement<{
- children?: ReactNode,
+ children: ReactNode,
className?: string,
ref?: Ref<HTMLElement>,
inert?: boolean | 'true'
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index dd217ec2866..8844ade7154 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -32,7 +32,7 @@ import {useLocale, useNumberFormatter} from '@react-aria/i18n';
import {useSpectrumContextProps} from './useSpectrumContextProps';
export interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {
- children?: ReactNode,
+ children: ReactNode,
/**
* The size of the Slider.
*
@@ -66,7 +66,7 @@ export interface SliderProps extends Omit<SliderBaseProps<number>, 'children'>,
fillOffset?: number
}
-export const SliderContext = createContext<ContextValue<SliderProps, FocusableRefValue<HTMLDivElement>>>(null);
+export const SliderContext = createContext<ContextValue<Partial<SliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
const slider = style({
font: 'control',
diff --git a/packages/@react-spectrum/s2/src/StatusLight.tsx b/packages/@react-spectrum/s2/src/StatusLight.tsx
index 81f8ac6d8cd..dc0a5f10145 100644
--- a/packages/@react-spectrum/s2/src/StatusLight.tsx
+++ b/packages/@react-spectrum/s2/src/StatusLight.tsx
@@ -40,7 +40,7 @@ export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaL
/**
* The content to display as the label.
*/
- children?: ReactNode,
+ children: ReactNode,
/**
* An accessibility role for the status light. Should be set when the status
* can change at runtime, and no more than one status light will update simultaneously.
@@ -49,7 +49,7 @@ export interface StatusLightProps extends StatusLightStyleProps, DOMProps, AriaL
role?: 'status'
}
-export const StatusLightContext = createContext<ContextValue<StatusLightProps, DOMRefValue<HTMLDivElement>>>(null);
+export const StatusLightContext = createContext<ContextValue<Partial<StatusLightProps>, DOMRefValue<HTMLDivElement>>>(null);
const wrapper = style<StatusLightStyleProps>({
display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index 2f323b53fd2..b8721538818 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -42,10 +42,10 @@ interface SwitchStyleProps {
interface RenderProps extends SwitchRenderProps, SwitchStyleProps {}
export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {
- children?: ReactNode
+ children: ReactNode
}
-export const SwitchContext = createContext<ContextValue<SwitchProps, FocusableRefValue<HTMLLabelElement>>>(null);
+export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
const wrapper = style({
display: 'flex',
diff --git a/packages/@react-spectrum/s2/src/TableView.tsx b/packages/@react-spectrum/s2/src/TableView.tsx
index 73663391b86..19b2baa5747 100644
--- a/packages/@react-spectrum/s2/src/TableView.tsx
+++ b/packages/@react-spectrum/s2/src/TableView.tsx
@@ -256,7 +256,7 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
}
}
-export const TableContext = createContext<ContextValue<TableViewProps, DOMRefValue<HTMLDivElement>>>(null);
+export const TableContext = createContext<ContextValue<Partial<TableViewProps>, DOMRefValue<HTMLDivElement>>>(null);
/**
* Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index ac8c776c881..cb72196a917 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -40,7 +40,7 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
/** Spectrum-defined styles, returned by the `style()` macro. */
styles?: StylesPropWithHeight,
/** The content to display in the tabs. */
- children?: ReactNode,
+ children: ReactNode,
/**
* The amount of space between the tabs.
* @default 'regular'
@@ -50,22 +50,22 @@ export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | '
export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className'>, StyleProps {
/** The content to display in the tab. */
- children?: ReactNode
+ children: ReactNode
}
export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'children' | 'style' | 'className'>, StyleProps {
/** The content to display in the tablist. */
- children?: ReactNode
+ children: ReactNode
}
export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {
/** Spectrum-defined styles, returned by the `style()` macro. */
styles?: StylesPropWithHeight,
/** The content to display in the tab panels. */
- children?: ReactNode
+ children: ReactNode
}
-export const TabsContext = createContext<ContextValue<TabsProps, DOMRefValue<HTMLDivElement>>>(null);
+export const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
const tabPanel = style({
marginTop: 4,
diff --git a/packages/@react-spectrum/s2/src/TagGroup.tsx b/packages/@react-spectrum/s2/src/TagGroup.tsx
index 1da73bd45b7..93fe47d3e94 100644
--- a/packages/@react-spectrum/s2/src/TagGroup.tsx
+++ b/packages/@react-spectrum/s2/src/TagGroup.tsx
@@ -52,7 +52,7 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
// Get types from RSP and extend those?
export interface TagProps extends Omit<AriaTagProps, 'children' | 'style' | 'className'> {
/** The children of the tag. */
- children?: ReactNode
+ children: ReactNode
}
export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | 'style' | 'className'>, Pick<TagListProps<T>, 'items' | 'children' | 'renderEmptyState'>, Omit<SpectrumLabelableProps, 'isRequired' | 'necessityIndicator'>, StyleProps, Omit<HelpTextProps, 'errorMessage'> {
@@ -80,7 +80,7 @@ export interface TagGroupProps<T> extends Omit<AriaTagGroupProps, 'children' | '
onGroupAction?: () => void
}
-export const TagGroupContext = createContext<ContextValue<TagGroupProps<any>, DOMRefValue<HTMLDivElement>>>(null);
+export const TagGroupContext = createContext<ContextValue<Partial<TagGroupProps<any>>, DOMRefValue<HTMLDivElement>>>(null);
const helpTextStyles = style({
gridArea: 'helptext',
diff --git a/packages/@react-spectrum/s2/src/TextField.tsx b/packages/@react-spectrum/s2/src/TextField.tsx
index b1aee46d024..ba5b029ec29 100644
--- a/packages/@react-spectrum/s2/src/TextField.tsx
+++ b/packages/@react-spectrum/s2/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
diff --git a/packages/@react-spectrum/s2/src/ToggleButton.tsx b/packages/@react-spectrum/s2/src/ToggleButton.tsx
index b9bebe433f8..03adc0f23b6 100644
--- a/packages/@react-spectrum/s2/src/ToggleButton.tsx
+++ b/packages/@react-spectrum/s2/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
diff --git a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx b/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
index 677996298c3..24f9ab3f18b 100644
--- a/packages/@react-spectrum/s2/src/ToggleButtonGroup.tsx
+++ b/packages/@react-spectrum/s2/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.
diff --git a/packages/@react-spectrum/s2/src/Tooltip.tsx b/packages/@react-spectrum/s2/src/Tooltip.tsx
index 836f6016eeb..deb5ebe947b 100644
--- a/packages/@react-spectrum/s2/src/Tooltip.tsx
+++ b/packages/@react-spectrum/s2/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.
From 7008d82b0798bcfb49ca8dbf375a23ac5b68158c Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Fri, 24 Jan 2025 17:22:52 -0600
Subject: [PATCH 2/8] fix chromatic types?
---
packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx | 2 +-
packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx | 2 +-
packages/@react-spectrum/s2/chromatic/Menu.stories.tsx | 2 +-
packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx | 2 +-
4 files changed, 4 insertions(+), 4 deletions(-)
diff --git a/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
index d2a97438a7f..3425c9909a0 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionMenu.stories.tsx
+++ b/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}
diff --git a/packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx
index fdcb6f40198..7995ea290d7 100644
--- a/packages/@react-spectrum/s2/chromatic/ActionMenuRTL.stories.tsx
+++ b/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}
diff --git a/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx b/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
index 5226e3e7f7d..8a23c5cbd5f 100644
--- a/packages/@react-spectrum/s2/chromatic/Menu.stories.tsx
+++ b/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}
diff --git a/packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx b/packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx
index 7e66245caa7..5d2e7f4db3a 100644
--- a/packages/@react-spectrum/s2/chromatic/MenuRTL.stories.tsx
+++ b/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}
From 75391cfb0955ddb4952d1bfb939ddff66bb2cb74 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Fri, 24 Jan 2025 17:29:47 -0600
Subject: [PATCH 3/8] missed one
---
packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx b/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
index 635e8bb1def..fca9928a949 100644
--- a/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
+++ b/packages/@react-spectrum/s2/stories/ActionMenu.stories.tsx
@@ -15,7 +15,7 @@ import {ActionMenu, MenuItem} from '../src';
import {categorizeArgTypes} from './utils';
import type {Meta, StoryObj} from '@storybook/react';
-const meta: Meta<typeof ActionMenu> = {
+const meta: Meta<typeof ActionMenu<any>> = {
component: ActionMenu,
parameters: {
layout: 'centered'
From 19f832f84aed746507b97efab58ffe4e0c5bbf26 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 27 Jan 2025 16:21:07 -0600
Subject: [PATCH 4/8] switch some children types back to optional
---
packages/@react-spectrum/s2/src/Radio.tsx | 2 +-
packages/@react-spectrum/s2/src/Slider.tsx | 2 +-
packages/@react-spectrum/s2/src/Switch.tsx | 2 +-
3 files changed, 3 insertions(+), 3 deletions(-)
diff --git a/packages/@react-spectrum/s2/src/Radio.tsx b/packages/@react-spectrum/s2/src/Radio.tsx
index 1cc9f001a46..62dc88e1723 100644
--- a/packages/@react-spectrum/s2/src/Radio.tsx
+++ b/packages/@react-spectrum/s2/src/Radio.tsx
@@ -28,7 +28,7 @@ export interface RadioProps extends Omit<AriaRadioProps, 'className' | 'style' |
/**
* The label for the element.
*/
- children: ReactNode
+ children?: ReactNode
}
interface ContextProps {
diff --git a/packages/@react-spectrum/s2/src/Slider.tsx b/packages/@react-spectrum/s2/src/Slider.tsx
index 8844ade7154..aaf09ec14f8 100644
--- a/packages/@react-spectrum/s2/src/Slider.tsx
+++ b/packages/@react-spectrum/s2/src/Slider.tsx
@@ -32,7 +32,7 @@ import {useLocale, useNumberFormatter} from '@react-aria/i18n';
import {useSpectrumContextProps} from './useSpectrumContextProps';
export interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {
- children: ReactNode,
+ children?: ReactNode,
/**
* The size of the Slider.
*
diff --git a/packages/@react-spectrum/s2/src/Switch.tsx b/packages/@react-spectrum/s2/src/Switch.tsx
index b8721538818..ccda65b085c 100644
--- a/packages/@react-spectrum/s2/src/Switch.tsx
+++ b/packages/@react-spectrum/s2/src/Switch.tsx
@@ -42,7 +42,7 @@ interface SwitchStyleProps {
interface RenderProps extends SwitchRenderProps, SwitchStyleProps {}
export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {
- children: ReactNode
+ children?: ReactNode
}
export const SwitchContext = createContext<ContextValue<Partial<SwitchProps>, FocusableRefValue<HTMLLabelElement>>>(null);
From 502a2d32c69ed7553b02dc435169236b43a82e91 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 10 Feb 2025 14:12:27 -0600
Subject: [PATCH 5/8] fix types
---
packages/@react-spectrum/s2/src/Field.tsx | 2 +-
packages/@react-spectrum/s2/src/Tabs.tsx | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/@react-spectrum/s2/src/Field.tsx b/packages/@react-spectrum/s2/src/Field.tsx
index 634497923c5..b294df3f405 100644
--- a/packages/@react-spectrum/s2/src/Field.tsx
+++ b/packages/@react-spectrum/s2/src/Field.tsx
@@ -39,7 +39,7 @@ interface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'chil
staticColor?: 'white' | 'black' | 'auto',
contextualHelp?: ReactNode,
isQuiet?: boolean,
- children: ReactNode
+ children?: ReactNode
}
export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 0a87d152941..4bb7dcf79cd 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -521,7 +521,7 @@ let HiddenTabs = function (props: {
);
};
-let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & TabsProps) => {
+let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange'], children: ReactNode} & TabsProps) => {
let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
let state = useContext(TabListStateContext);
From 416e184b942513c6fc4710657555a34d5d716f68 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 10 Feb 2025 14:49:44 -0600
Subject: [PATCH 6/8] fix types
---
packages/@react-spectrum/s2/src/Tabs.tsx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 4bb7dcf79cd..7236b121f8f 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -65,7 +65,7 @@ export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'cla
export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {
/** The content to display in the tablist. */
- children: ReactNode
+ children?: ReactNode | ((item: T) => ReactNode)
}
export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {
@@ -521,7 +521,7 @@ let HiddenTabs = function (props: {
);
};
-let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange'], children: ReactNode} & TabsProps) => {
+let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & TabsProps) => {
let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
let state = useContext(TabListStateContext);
From be635d3391dde959b3a7507a16c43a00ad8df7d0 Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 10 Feb 2025 15:01:22 -0600
Subject: [PATCH 7/8] types
---
packages/@react-spectrum/s2/src/Tabs.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 7236b121f8f..5e9f98d49f5 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -521,7 +521,7 @@ let HiddenTabs = function (props: {
);
};
-let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & TabsProps) => {
+let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {
let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
let {density, onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
let state = useContext(TabListStateContext);
From 0d3d6b441f51b186fab3b408f51f8e5f4d715d9f Mon Sep 17 00:00:00 2001
From: Reid Barber <reid@reidbarber.com>
Date: Mon, 10 Feb 2025 19:35:16 -0600
Subject: [PATCH 8/8] review comment
---
packages/@react-spectrum/s2/src/Tabs.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/@react-spectrum/s2/src/Tabs.tsx b/packages/@react-spectrum/s2/src/Tabs.tsx
index 5e9f98d49f5..ff6423c8171 100644
--- a/packages/@react-spectrum/s2/src/Tabs.tsx
+++ b/packages/@react-spectrum/s2/src/Tabs.tsx
@@ -65,7 +65,7 @@ export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'cla
export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'aria-label' | 'aria-labelledby'>, StyleProps {
/** The content to display in the tablist. */
- children?: ReactNode | ((item: T) => ReactNode)
+ children: ReactNode | ((item: T) => ReactNode)
}
export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className'>, UnsafeStyles {