@react-spectrum/s2 0.5.0 → 0.6.0

package/src/Checkbox.tsx

@@ -125,7 +125,11 @@ const iconSize = {
   XL: 'L'
 } as const;
 
-function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Checkboxes allow users to select multiple items from a list of individual items,
+ * or to mark one individual item as selected.
+ */
+export const Checkbox = forwardRef(function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxContext);
   let boxRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -179,11 +183,4 @@ function Checkbox({children, ...props}: CheckboxProps, ref: FocusableRef<HTMLLab
       }}
     </AriaCheckbox>
   );
-}
-
-/**
- * Checkboxes allow users to select multiple items from a list of individual items,
- * or to mark one individual item as selected.
- */
-let _Checkbox = forwardRef(Checkbox);
-export {_Checkbox as Checkbox};
+});

package/src/CheckboxGroup.tsx

@@ -51,7 +51,10 @@ export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'classN
 
 export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A CheckboxGroup allows users to select one or more items from a list of choices.
+ */
+export const CheckboxGroup = forwardRef(function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, CheckboxGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -117,7 +120,7 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
             columnGap: 16,
             flexWrap: 'wrap'
           })({orientation})}>
-          <FormContext.Provider value={{...formContext, size}}>
+          <FormContext.Provider value={{...formContext, size, isRequired: undefined}}>
             <CheckboxContext.Provider value={{isEmphasized}}>
               {children}
             </CheckboxContext.Provider>
@@ -134,10 +137,4 @@ function CheckboxGroup(props: CheckboxGroupProps, ref: DOMRef<HTMLDivElement>) {
       </>)}
     </AriaCheckboxGroup>
   );
-}
-
-/**
- * A CheckboxGroup allows users to select one or more items from a list of choices.
- */
-let _CheckboxGroup = forwardRef(CheckboxGroup);
-export {_CheckboxGroup as CheckboxGroup};
+});

package/src/ClearButton.tsx

@@ -33,7 +33,7 @@ interface ClearButtonStyleProps {
 interface ClearButtonRenderProps extends ButtonRenderProps, ClearButtonStyleProps {}
 interface ClearButtonProps extends ButtonProps, ClearButtonStyleProps {}
 
-function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+export const ClearButton = forwardRef(function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
 
   return (
@@ -60,7 +60,4 @@ function ClearButton(props: ClearButtonProps, ref: FocusableRef<HTMLButtonElemen
       <CrossIcon size={props.size || 'M'} />
     </Button>
   );
-}
-
-let _ClearButton = forwardRef(ClearButton);
-export {_ClearButton as ClearButton};
+});

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);
 
-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

@@ -27,7 +27,10 @@ export interface ColorAreaProps extends Omit<AriaColorAreaProps, 'children' | 'c
 
 export const ColorAreaContext = createContext<ContextValue<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

@@ -36,7 +36,10 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'children' |
 
 export const ColorFieldContext = createContext<ContextValue<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

@@ -33,7 +33,10 @@ export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children'
 
 export const ColorSliderContext = createContext<ContextValue<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

@@ -46,7 +46,10 @@ interface SpectrumColorSwatchContextValue extends Pick<ColorSwatchProps, 'size'
 export const ColorSwatchContext = createContext<ContextValue<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

@@ -42,7 +42,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 +75,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

@@ -33,7 +33,10 @@ export interface ColorWheelProps extends Omit<AriaColorWheelProps, 'children' |
 
 export const ColorWheelContext = createContext<ContextValue<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

@@ -31,7 +31,7 @@ interface HeadingProps extends ContentProps {
 
 export const HeadingContext = createContext<ContextValue<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 +48,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);
 
-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 +68,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<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 +87,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);
 
-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;
@@ -130,14 +121,11 @@ function Text(props: ContentProps, ref: DOMRef) {
   }
 
   return text;
-}
-
-const _Text = forwardRef(Text);
-export {_Text as Text};
+});
 
 export const KeyboardContext = createContext<ContextValue<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 +140,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<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 +159,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

@@ -48,7 +48,10 @@ const popover = style({
 
 export const ContextualHelpContext = createContext<ContextValue<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

@@ -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};
+});