@react-spectrum/s2 0.5.0 → 0.7.0

package/src/CloseButton.tsx

@@ -15,7 +15,7 @@ import {Button, ButtonProps, ContextValue} from 'react-aria-components';
 import {createContext, forwardRef} from 'react';
 import CrossIcon from '../ui-icons/Cross';
 import {FocusableRef, FocusableRefValue} from '@react-types/shared';
-import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
@@ -23,7 +23,7 @@ import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, StyleProps {
+export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled' | 'onPress'>, StyleProps {
   /**
    * The size of the CloseButton.
    *
@@ -31,19 +31,17 @@ export interface CloseButtonProps extends Pick<ButtonProps, 'isDisabled'>, Style
    */
   size?: 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the Button appears over a color background. */
-  staticColor?: 'white' | 'black'
+  staticColor?: 'white' | 'black' | 'auto'
 }
 
 const hoverBackground = {
-  default: 'gray-100',
-  staticColor: {
-    white: 'transparent-white-100',
-    black: 'transparent-black-100'
-  }
+  default: 'gray-200',
+  isStaticColor: 'transparent-overlay-200'
 } as const;
 
 const styles = style({
   ...focusRing(),
+  ...staticColor(),
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -64,31 +62,29 @@ const styles = style({
     value: {
       default: 'neutral',
       isDisabled: 'disabled',
-      staticColor: {
-        white: {
-          default: baseColor('transparent-white-800'),
-          isDisabled: 'transparent-white-400'
-        },
-        black: {
-          default: baseColor('transparent-black-800'),
-          isDisabled: 'transparent-black-400'
-        }
+      isStaticColor: {
+        default: baseColor('transparent-overlay-800'),
+        isDisabled: 'transparent-overlay-400'
+      },
+      forcedColors: {
+        default: 'ButtonText',
+        isDisabled: 'GrayText'
       }
     }
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   }
 }, getAllowedOverrides());
 
-export const CloseButtonContext = createContext<ContextValue<CloseButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * A CloseButton allows a user to dismiss a dialog.
+ */
+export const CloseButton = forwardRef(function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CloseButtonContext);
   let {UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useFocusableRef(ref);
@@ -98,16 +94,10 @@ function CloseButton(props: CloseButtonProps, ref: FocusableRef<HTMLButtonElemen
       {...props}
       ref={domRef}
       slot="close"
-      aria-label={stringFormatter.format('dialog.dismiss')}
+      aria-label={props['aria-label'] || stringFormatter.format('dialog.dismiss')}
       style={pressScale(domRef, UNSAFE_style)}
-      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor}, props.styles)}>
+      className={renderProps => UNSAFE_className + styles({...renderProps, staticColor: props.staticColor, isStaticColor: !!props.staticColor}, props.styles)}>
       <CrossIcon size={({S: 'L', M: 'XL', L: 'XXL', XL: 'XXXL'} as const)[props.size || 'M']} />
     </Button>
   );
-}
-
-/**
- * A CloseButton allows a user to dismiss a dialog.
- */
-let _CloseButton = forwardRef(CloseButton);
-export {_CloseButton as CloseButton};
+});

package/src/ColorArea.tsx

@@ -25,9 +25,12 @@ 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);
 
-function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
+ */
+export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorAreaContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
@@ -68,10 +71,4 @@ function ColorArea(props: ColorAreaProps, ref: DOMRef<HTMLDivElement>) {
       }
     </AriaColorArea>
   );
-}
-
-/**
- * A ColorArea allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
- */
-let _ColorArea = forwardRef(ColorArea);
-export {_ColorArea as ColorArea};
+});

package/src/ColorField.tsx

@@ -34,9 +34,12 @@ 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);
 
-function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -103,10 +106,4 @@ function ColorField(props: ColorFieldProps, ref: Ref<TextFieldRef>) {
       </>)}
     </AriaColorField>
   );
-}
-
-/**
- * A color field allows users to edit a hex color or individual color channel value.
- */
-const _ColorField = forwardRef(ColorField);
-export {_ColorField as ColorField};
+});

package/src/ColorSlider.tsx

@@ -31,9 +31,12 @@ 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);
 
-function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorSlider allows users to adjust an individual channel of a color value.
+ */
+export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSliderContext);
   let {UNSAFE_className = '', UNSAFE_style, styles} = props;
   let containerRef = useDOMRef(ref);
@@ -138,10 +141,4 @@ function ColorSlider(props: ColorSliderProps, ref: DOMRef<HTMLDivElement>) {
       </>)}
     </AriaColorSlider>
   );
-}
-
-/**
- * A ColorSlider allows users to adjust an individual channel of a color value.
- */
-let _ColorSlider = forwardRef(ColorSlider);
-export {_ColorSlider as ColorSlider};
+});

package/src/ColorSwatch.tsx

@@ -13,10 +13,10 @@
 import {
   ColorSwatch as AriaColorSwatch,
   ColorSwatchProps as AriaColorSwatchProps,
+  Color,
   ContextValue,
   parseColor
 } from 'react-aria-components';
-import {Color} from '@react-types/color';
 import {createContext, forwardRef, JSX, ReactElement, useContext, useMemo} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
@@ -43,10 +43,13 @@ 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);
 
-function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.Element {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchContext);
   let domRef = useDOMRef(ref);
   let ctx = useContext(InternalColorSwatchContext);
@@ -104,10 +107,4 @@ function ColorSwatch(props: ColorSwatchProps, ref: DOMRef<HTMLDivElement>): JSX.
   }
 
   return swatch;
-}
-
-/**
- * A ColorSwatch displays a preview of a selected color.
- */
-let _ColorSwatch = forwardRef(ColorSwatch);
-export {_ColorSwatch as ColorSwatch};
+});

package/src/ColorSwatchPicker.tsx

@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, ContextValue, SlotProps} from 'react-aria-components';
-import {Color} from '@react-types/color';
+import {ColorSwatchPicker as AriaColorSwatchPicker, ColorSwatchPickerItem as AriaColorSwatchPickerItem, Color, ContextValue, SlotProps} from 'react-aria-components';
 import {ColorSwatchProps, InternalColorSwatchContext} from './ColorSwatch';
 import {createContext, forwardRef, ReactElement, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, ValueBase} from '@react-types/shared';
@@ -42,7 +41,10 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
 
 export const ColorSwatchPickerContext = createContext<ContextValue<Partial<ColorSwatchPickerProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorSwatchPickerContext);
   let {
     density = 'regular',
@@ -72,13 +74,7 @@ function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: DOMRef<HTMLDivEle
       </InternalColorSwatchContext.Provider>
     </AriaColorSwatchPicker>
   );
-}
-
-/**
- * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
- */
-let _ColorSwatchPicker = forwardRef(ColorSwatchPicker);
-export {_ColorSwatchPicker as ColorSwatchPicker};
+});
 
 function useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchProps['rounding']) {
   return (

package/src/ColorWheel.tsx

@@ -31,9 +31,12 @@ 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);
 
-function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ColorWheelContext);
   let {UNSAFE_className = '', UNSAFE_style, styles = ''} = props;
   let containerRef = useDOMRef(ref);
@@ -101,10 +104,4 @@ function ColorWheel(props: ColorWheelProps, ref: DOMRef<HTMLDivElement>) {
       </>)}
     </AriaColorWheel>
   );
-}
-
-/**
- * A ColorWheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
- */
-let _ColorWheel = forwardRef(ColorWheel);
-export {_ColorWheel as ColorWheel};
+});

package/src/ComboBox.tsx

@@ -149,7 +149,10 @@ const iconStyles = style({
 
 let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
 
-function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
+/**
+ * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
+ */
+export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, ComboBoxContext);
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useRef<HTMLDivElement>(null);
@@ -321,13 +324,7 @@ function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: Ref<TextFieldR
       )}
     </AriaComboBox>
   );
-}
-
-/**
- * ComboBox allow users to choose a single option from a collapsible list of options when space is limited.
- */
-let _ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(ComboBox);
-export {_ComboBox as ComboBox};
+});
 
 
 export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
@@ -382,11 +379,12 @@ export function ComboBoxItem(props: ComboBoxItemProps) {
 
 export interface ComboBoxSectionProps<T extends object> extends SectionProps<T> {}
 export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>) {
+  let {size} = useContext(InternalComboboxContext);
   return (
     <>
       <AriaListBoxSection
         {...props}
-        className={section}>
+        className={section({size})}>
         {props.children}
       </AriaListBoxSection>
       <Divider />

package/src/Content.tsx

@@ -13,6 +13,7 @@
 import {ContextValue, Keyboard as KeyboardAria, Header as RACHeader, Heading as RACHeading, TextContext as RACTextContext, SlotProps, Text as TextAria} from 'react-aria-components';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {DOMRef, DOMRefValue} from '@react-types/shared';
+import {inertValue} from '@react-aria/utils';
 import {StyleString} from '../style/types';
 import {UnsafeStyles} from './style-utils';
 import {useDOMRef} from '@react-spectrum/utils';
@@ -20,18 +21,19 @@ import {useIsSkeleton, useSkeletonText} from './Skeleton';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface ContentProps extends UnsafeStyles, SlotProps {
-  children?: ReactNode,
+  children: ReactNode,
   styles?: StyleString,
-  isHidden?: boolean
+  isHidden?: boolean,
+  id?: string
 }
 
 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);
 
-// Wrapper around RAC Heading to unmount when hidden.
+export const Heading = forwardRef(// Wrapper around RAC Heading to unmount when hidden.
 function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, HeadingContext);
   let domRef = useDOMRef(ref);
@@ -48,14 +50,11 @@ function Heading(props: HeadingProps, ref: DOMRef<HTMLHeadingElement>) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Heading = forwardRef(Heading);
-export {_Heading as Heading};
+});
 
-export const HeaderContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLElement>>>(null);
+export const HeaderContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLElement>>>(null);
 
-function Header(props: ContentProps, ref: DOMRef) {
+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;
@@ -71,14 +70,11 @@ function Header(props: ContentProps, ref: DOMRef) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
+});
 
-const _Header = forwardRef(Header);
-export {_Header as Header};
+export const ContentContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-export const ContentContext = createContext<ContextValue<ContentProps, DOMRefValue<HTMLDivElement>>>(null);
-
-function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
+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;
@@ -93,14 +89,11 @@ function Content(props: ContentProps, ref: DOMRef<HTMLDivElement>) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Content = forwardRef(Content);
-export {_Content as Content};
+});
 
-export const TextContext = createContext<ContextValue<ContentProps, DOMRefValue>>(null);
+export const TextContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>(null);
 
-function Text(props: ContentProps, ref: DOMRef) {
+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;
@@ -116,7 +109,7 @@ function Text(props: ContentProps, ref: DOMRef) {
       {...otherProps}
       ref={domRef}
       // @ts-ignore - compatibility with React < 19
-      inert={isSkeleton ? 'true' : undefined}
+      inert={inertValue(isSkeleton)}
       className={UNSAFE_className + styles}
       style={UNSAFE_style}
       slot={slot || undefined}
@@ -130,14 +123,11 @@ function Text(props: ContentProps, ref: DOMRef) {
   }
 
   return text;
-}
-
-const _Text = forwardRef(Text);
-export {_Text as Text};
+});
 
-export const KeyboardContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
+export const KeyboardContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
-function Keyboard(props: ContentProps, ref: DOMRef) {
+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;
@@ -152,14 +142,11 @@ function Keyboard(props: ContentProps, ref: DOMRef) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
+});
 
-const _Keyboard = forwardRef(Keyboard);
-export {_Keyboard as Keyboard};
+export const FooterContext = createContext<ContextValue<Partial<ContentProps>, DOMRefValue>>({});
 
-export const FooterContext = createContext<ContextValue<ContentProps, DOMRefValue>>({});
-
-function Footer(props: ContentProps, ref: DOMRef) {
+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;
@@ -174,7 +161,4 @@ function Footer(props: ContentProps, ref: DOMRef) {
       style={UNSAFE_style}
       slot={slot || undefined} />
   );
-}
-
-const _Footer = forwardRef(Footer);
-export {_Footer as Footer};
+});

package/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,9 +46,12 @@ const popover = style({
   padding: 24
 });
 
-export const ContextualHelpContext = createContext<ContextValue<ContextualHelpProps, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ContextualHelpContext = createContext<ContextValue<Partial<ContextualHelpProps>, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
+ */
+export const ContextualHelp = forwardRef(function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ContextualHelpContext);
   let {
@@ -128,10 +131,4 @@ function ContextualHelp(props: ContextualHelpProps, ref: FocusableRef<HTMLButton
       </PopoverBase>
     </DialogTrigger>
   );
-}
-
-/**
- * Contextual help shows a user extra information about the state of an adjacent component, or a total view.
- */
-let _ContextualHelp = forwardRef(ContextualHelp);
-export {_ContextualHelp as ContextualHelp};
+});

package/src/CustomDialog.tsx

@@ -55,7 +55,10 @@ const dialogStyle = style({
   maxSize: '[inherit]'
 }, getAllowedOverrides({height: true}));
 
-function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
+/**
+ * A CustomDialog is a floating window with a custom layout.
+ */
+export const CustomDialog = forwardRef(function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
   let {
     size,
     isDismissible,
@@ -80,10 +83,4 @@ function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
       </RACDialog>
     </Modal>
   );
-}
-
-/**
- * A CustomDialog is a floating window with a custom layout.
- */
-let _CustomDialog = forwardRef(CustomDialog);
-export {_CustomDialog as CustomDialog};
+});

package/src/Dialog.tsx

@@ -90,7 +90,11 @@ export const dialogInner = style({
   overflow: 'auto'
 });
 
-function Dialog(props: DialogProps, ref: DOMRef) {
+/**
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
+ * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ */
+export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef) {
   let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
@@ -224,11 +228,4 @@ function Dialog(props: DialogProps, ref: DOMRef) {
       </RACDialog>
     </Modal>
   );
-}
-
-/**
- * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
- * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
- */
-let _Dialog = forwardRef(Dialog);
-export {_Dialog as Dialog};
+});

package/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',
@@ -65,7 +65,10 @@ const disclosure = style({
   minWidth: 200
 }, getAllowedOverrides());
 
-function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
+ */
+export const Disclosure = forwardRef(function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);
   let {
     size = 'M',
@@ -92,13 +95,7 @@ function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
       </RACDisclosure>
     </Provider>
   );
-}
-
-/**
- * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
- */
-let _Disclosure = forwardRef(Disclosure);
-export {_Disclosure as Disclosure};
+});
 
 export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
   /** The heading level of the disclosure header.
@@ -256,7 +253,10 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
  */
 export const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);
 
-function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
+ */
+export const DisclosureTitle = forwardRef(function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement>) {
   let {
     level = 3,
     UNSAFE_style,
@@ -295,13 +295,7 @@ function DisclosureTitle(props: DisclosureTitleProps, ref: DOMRef<HTMLDivElement
       {buttonTrigger}
     </DisclosureHeader>
   );
-}
-
-/**
- * A disclosure title consisting of a heading and a trigger button to expand/collapse the panel.
- */
-let _DisclosureTitle = forwardRef(DisclosureTitle);
-export {_DisclosureTitle as DisclosureTitle};
+});
 
 export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {
   children: React.ReactNode
@@ -327,7 +321,10 @@ const panelStyles = style({
   }
 });
 
-function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
+ */
+export const DisclosurePanel = forwardRef(function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement>) {
   let {
     UNSAFE_style,
     UNSAFE_className = '',
@@ -346,11 +343,5 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement
       {props.children}
     </RACDisclosurePanel>
   );
-}
-
-/**
- * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
- */
-let _DisclosurePanel = forwardRef(DisclosurePanel);
-export {_DisclosurePanel as DisclosurePanel};
+});