@react-spectrum/s2 0.5.0 → 0.6.0

package/src/Radio.tsx

@@ -102,7 +102,11 @@ const circle = style<RenderProps>({
   }
 });
 
-function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Radio buttons allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+export const Radio = /*#__PURE__*/ forwardRef(function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let circleRef = useRef(null);
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -138,11 +142,4 @@ function Radio(props: RadioProps, ref: FocusableRef<HTMLLabelElement>) {
       )}
     </AriaRadio>
   );
-}
-
-/**
- * Radio buttons allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-let _Radio = /*#__PURE__*/ forwardRef(Radio);
-export {_Radio as Radio};
+});

package/src/RadioGroup.tsx

@@ -49,7 +49,11 @@ export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'className' |
 
 export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Radio groups allow users to select a single option from a list of mutually exclusive options.
+ * All possible options are exposed up front for users to compare.
+ */
+export const RadioGroup = /*#__PURE__*/ forwardRef(function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RadioGroupContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -132,11 +136,4 @@ function RadioGroup(props: RadioGroupProps, ref: DOMRef<HTMLDivElement>) {
       )}
     </AriaRadioGroup>
   );
-}
-
-/**
- * Radio groups allow users to select a single option from a list of mutually exclusive options.
- * All possible options are exposed up front for users to compare.
- */
-let _RadioGroup = /*#__PURE__*/ forwardRef(RadioGroup);
-export {_RadioGroup as RadioGroup};
+});

package/src/RangeSlider.tsx

@@ -39,7 +39,7 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
 
 export const RangeSliderContext = createContext<ContextValue<RangeSliderProps, FocusableRefValue<HTMLDivElement>>>(null);
 
-function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);
   let formContext = useContext(FormContext);
@@ -124,7 +124,4 @@ function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>)
       </SliderTrack>
     </SliderBase>
   );
-}
-
-let _RangeSlider = /*#__PURE__*/ forwardRef(RangeSlider);
-export {_RangeSlider as RangeSlider};
+});

package/src/SearchField.tsx

@@ -42,7 +42,10 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className'
 
 export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, TextFieldRef>>(null);
 
-function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * A SearchField is a text field designed for searches.
+ */
+export const SearchField = /*#__PURE__*/ forwardRef(function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, SearchFieldContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -151,10 +154,4 @@ function SearchField(props: SearchFieldProps, ref: Ref<TextFieldRef>) {
       </>)}
     </AriaSearchField>
   );
-}
-
-/**
- * A SearchField is a text field designed for searches.
- */
-let _SearchField = /*#__PURE__*/ forwardRef(SearchField);
-export {_SearchField as SearchField};
+});

package/src/SegmentedControl.tsx

@@ -151,7 +151,10 @@ interface DefaultSelectionTrackProps {
 
 const InternalSegmentedControlContext = createContext<InternalSegmentedControlContextProps>({});
 
-function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
+ */
+export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SegmentedControlContext);
   let {
     defaultSelectedKey,
@@ -190,7 +193,7 @@ function SegmentedControl(props: SegmentedControlProps, ref: DOMRef<HTMLDivEleme
       </DefaultSelectionTracker>
     </ToggleButtonGroup>
   );
-}
+});
 
 function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   let state = useContext(ToggleGroupStateContext);
@@ -214,7 +217,10 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   );
 }
 
-function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * A SegmentedControlItem represents an option within a SegmentedControl.
+ */
+export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
   let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);
@@ -277,16 +283,4 @@ function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRe
       }
     </ToggleButton>
   );
-}
-
-/**
- * A SegmentedControlItem represents an option within a SegmentedControl.
- */
-const _SegmentedControlItem = /*#__PURE__*/ forwardRef(SegmentedControlItem);
-export {_SegmentedControlItem as SegmentedControlItem};
-
-/**
- * A SegmentedControl is a mutually exclusive group of buttons used for view switching.
- */
-const _SegmentedControl = /*#__PURE__*/ forwardRef(SegmentedControl);
-export {_SegmentedControl as SegmentedControl};
+});

package/src/Slider.tsx

@@ -389,7 +389,7 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
   );
 }
 
-function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
+export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SliderContext);
   let formContext = useContext(FormContext);
   props = useFormProps(props);
@@ -443,7 +443,4 @@ function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
       </SliderTrack>
     </SliderBase>
   );
-}
-
-let _Slider = /*#__PURE__*/ forwardRef(Slider);
-export {_Slider as Slider};
+});

package/src/StatusLight.tsx

@@ -102,7 +102,11 @@ const light = style<StatusLightStyleProps & {isSkeleton: boolean}>({
   overflow: 'visible' // prevents the light from getting clipped on iOS
 });
 
-function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Status lights are used to color code categories and labels commonly found in data visualization.
+ * When status lights have a semantic meaning, they should use semantic variant colors.
+ */
+export const StatusLight = /*#__PURE__*/ forwardRef(function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, StatusLightContext);
   let {children, size = 'M', variant, role, UNSAFE_className = '', UNSAFE_style, styles} = props;
   let domRef = useDOMRef(ref);
@@ -131,11 +135,4 @@ function StatusLight(props: StatusLightProps, ref: DOMRef<HTMLDivElement>) {
       <Text>{children}</Text>
     </div>
   );
-}
-
-/**
- * Status lights are used to color code categories and labels commonly found in data visualization.
- * When status lights have a semantic meaning, they should use semantic variant colors.
- */
-let _StatusLight = /*#__PURE__*/ forwardRef(StatusLight);
-export {_StatusLight as StatusLight};
+});

package/src/Switch.tsx

@@ -149,7 +149,11 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
     : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
 });
 
-function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
+/**
+ * Switches allow users to turn an individual option on or off.
+ * They are usually used to activate or deactivate a specific setting.
+ */
+export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SwitchContext);
   let {children, UNSAFE_className = '', UNSAFE_style} = props;
   let inputRef = useRef<HTMLInputElement | null>(null);
@@ -184,11 +188,4 @@ function Switch(props: SwitchProps, ref: FocusableRef<HTMLLabelElement>) {
       )}
     </AriaSwitch>
   );
-}
-
-/**
- * Switches allow users to turn an individual option on or off.
- * They are usually used to activate or deactivate a specific setting.
- */
-let _Switch = /*#__PURE__*/ forwardRef(Switch);
-export {_Switch as Switch};
+});

package/src/TableView.tsx

@@ -45,7 +45,7 @@ import {
 import {centerPadding, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
-import {colorMix, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
+import {colorMix, focusRing, fontRelative, lightDark, space, style} from '../style' with {type: 'macro'};
 import {ColumnSize} from '@react-types/table';
 import {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
@@ -58,10 +58,11 @@ import {mergeStyles} from '../style/runtime';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
-import React, {createContext, forwardRef, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {createContext, forwardRef, ReactElement, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {Rect} from '@react-stately/virtualizer';
 import SortDownArrow from '../s2wf-icons/S2_Icon_SortDown_20_N.svg';
 import SortUpArrow from '../s2wf-icons/S2_Icon_SortUp_20_N.svg';
+import {useActionBarContainer} from './ActionBar';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useLoadMore} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
@@ -103,7 +104,9 @@ interface S2TableProps {
   /** The current loading state of the table. */
   loadingState?: LoadingState,
   /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
-  onLoadMore?: () => any
+  onLoadMore?: () => any,
+  /** Provides the ActionBar to display when rows are selected in the TableView. */
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
@@ -119,7 +122,10 @@ const tableWrapper = style({
   minWidth: 0,
   display: 'flex',
   isolation: 'isolate',
-  disableTapHighlight: true
+  disableTapHighlight: true,
+  position: 'relative',
+  // Clip ActionBar animation.
+  overflow: 'clip'
 });
 
 const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boolean}>({
@@ -135,17 +141,14 @@ const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boo
     isQuiet: 'transparent',
     forcedColors: 'Background'
   },
-  outlineColor: {
-    default: 'gray-300',
-    isFocusVisible: 'focus-ring',
-    forcedColors: 'ButtonBorder'
-  },
-  outlineWidth: {
+  borderColor: 'gray-300',
+  borderStyle: 'solid',
+  borderWidth: {
     default: 1,
-    isQuiet: 0,
-    isFocusVisible: 2
+    isQuiet: 0
   },
-  outlineStyle: 'solid',
+  ...focusRing(),
+  outlineOffset: -1, // Cover the border
   borderRadius: {
     default: '[6px]',
     isQuiet: 'none'
@@ -255,7 +258,10 @@ export class S2TableLayout<T> extends UNSTABLE_TableLayout<T> {
 
 export const TableContext = createContext<ContextValue<TableViewProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
+ */
+export const TableView = forwardRef(function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TableContext);
   let {
     UNSAFE_style,
@@ -309,7 +315,7 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   }), [isQuiet, density, overflowMode, loadingState, isInResizeMode, setIsInResizeMode]);
 
   let isLoading = loadingState === 'loading' || loadingState === 'loadingMore';
-  let scrollRef = useRef(null);
+  let scrollRef = useRef<HTMLElement | null>(null);
   let memoedLoadMoreProps = useMemo(() => ({
     isLoading: isLoading,
     onLoadMore
@@ -317,6 +323,8 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
   useLoadMore(memoedLoadMoreProps, scrollRef);
   let isCheckboxSelection = props.selectionMode === 'multiple' || props.selectionMode === 'single';
 
+  let {selectedKeys, onSelectionChange, actionBar, actionBarHeight} = useActionBarContainer({...props, scrollRef});
+
   return (
     <ResizableTableContainer
       // TODO: perhaps this ref should be attached to the RACTable but it expects a table type ref which isn't true in the virtualized case
@@ -329,9 +337,15 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
       <UNSTABLE_Virtualizer layout={layout}>
         <InternalTableContext.Provider value={context}>
           <RACTable
-            ref={scrollRef}
-            // Fix webkit bug where scrollbars appear above the checkboxes/other table elements
-            style={{WebkitTransform: 'translateZ(0)'}}
+            ref={scrollRef as any}
+            style={{
+              // Fix webkit bug where scrollbars appear above the checkboxes/other table elements
+              WebkitTransform: 'translateZ(0)',
+              // Add padding at the bottom when the action bar is visible so users can scroll to the last items.
+              // Also add scroll padding so navigating with the keyboard doesn't go behind the action bar.
+              paddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0,
+              scrollPaddingBottom: actionBarHeight > 0 ? actionBarHeight + 8 : 0
+            }}
             className={renderProps => table({
               ...renderProps,
               isCheckboxSelection,
@@ -339,12 +353,16 @@ function TableView(props: TableViewProps, ref: DOMRef<HTMLDivElement>) {
             })}
             selectionBehavior="toggle"
             onRowAction={onAction}
-            {...otherProps} />
+            {...otherProps}
+            selectedKeys={selectedKeys}
+            defaultSelectedKeys={undefined}
+            onSelectionChange={onSelectionChange} />
         </InternalTableContext.Provider>
       </UNSTABLE_Virtualizer>
+      {actionBar}
     </ResizableTableContainer>
   );
-}
+});
 
 const centeredWrapper = style({
   display: 'flex',
@@ -356,7 +374,10 @@ const centeredWrapper = style({
 
 export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | 'dependencies'> {}
 
-function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * The body of a `<Table>`, containing the table rows.
+ */
+export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {items, renderEmptyState, children} = props;
   let domRef = useDOMRef(ref);
   let {loadingState} = useContext(InternalTableContext);
@@ -422,13 +443,7 @@ function TableBody<T extends object>(props: TableBodyProps<T>, ref: DOMRef<HTMLD
       {renderer}
     </RACTableBody>
   );
-}
-
-/**
- * The body of a `<Table>`, containing the table rows.
- */
-let _TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(TableBody);
-export {_TableBody as TableBody};
+});
 
 const cellFocus = {
   outlineStyle: {
@@ -830,7 +845,10 @@ let InternalTableHeaderContext = createContext<{isHeaderRowHovered?: boolean}>({
 
 export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'dependencies' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}
 
-function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A header within a `<Table>`, containing the table columns.
+ */
+export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>, ref: DOMRef<HTMLDivElement>) {
   let scale = useScale();
   let {selectionBehavior, selectionMode} = useTableOptions();
   let {isQuiet} = useContext(InternalTableContext);
@@ -870,13 +888,7 @@ function TableHeader<T extends object>({columns, children}: TableHeaderProps<T>,
       </RACTableHeader>
     </InternalTableHeaderContext.Provider>
   );
-}
-
-/**
- * A header within a `<Table>`, containing the table columns.
- */
-let _TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(TableHeader);
-export {_TableHeader as TableHeader};
+});
 
 function VisuallyHiddenSelectAllLabel() {
   let checkboxProps = useSlottedContext(RACCheckboxContext, 'selection');
@@ -1093,7 +1105,10 @@ const row = style<RowRenderProps & S2TableProps>({
 
 export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue'>  {}
 
-function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
+/**
+ * A row within a `<Table>`.
+ */
+export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<T>, ref: DOMRef<HTMLDivElement>) {
   let {selectionBehavior, selectionMode} = useTableOptions();
   let tableVisualOptions = useContext(InternalTableContext);
   let domRef = useDOMRef(ref);
@@ -1118,16 +1133,4 @@ function Row<T extends object>({id, columns, children, ...otherProps}: RowProps<
       </Collection>
     </RACRow>
   );
-}
-
-/**
- * A row within a `<Table>`.
- */
-let _Row = /*#__PURE__*/ (forwardRef as forwardRefType)(Row);
-export {_Row as Row};
-
-/**
- * Tables are containers for displaying information. They allow users to quickly scan, sort, compare, and take action on large amounts of data.
- */
-const _TableView = forwardRef(TableView);
-export {_TableView as TableView};
+});

package/src/Tabs.tsx

@@ -333,7 +333,10 @@ const tabs = style({
   }
 }, getAllowedOverrides({height: true}));
 
-function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
+ */
+export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
   let {
     density = 'regular',
@@ -357,10 +360,4 @@ function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
       </Provider>
     </RACTabs>
   );
-}
-
-/**
- * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
- */
-const _Tabs = forwardRef(Tabs);
-export {_Tabs as Tabs};
+});

package/src/TagGroup.tsx

@@ -103,7 +103,8 @@ const helpTextStyles = style({
 
 const InternalTagGroupContext = createContext<TagGroupProps<any>>({});
 
-function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
+/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
+export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TagGroupContext);
   props = useFormProps(props);
   let {onRemove} = props;
@@ -114,11 +115,7 @@ function TagGroup<T extends object>(props: TagGroupProps<T>, ref: DOMRef<HTMLDiv
       </CollectionBuilder>
     </InternalTagGroupContext.Provider>
   );
-}
-
-/** Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request. */
-let _TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(TagGroup);
-export {_TagGroup as TagGroup};
+});
 
 function TagGroupInner<T>({
   props: {
@@ -360,7 +357,7 @@ function TagGroupInner<T>({
                 minWidth: 'full',
                 font: 'ui'
               })}>
-              {item => <_Tag {...item.props} id={item.key} textValue={item.textValue} />}
+              {item => <Tag {...item.props} id={item.key} textValue={item.textValue} />}
             </TagList>
             {!isEmpty && (showCollapseToggleButton || groupActionLabel) &&
               <ActionGroup
@@ -519,7 +516,8 @@ const avatarSize = {
   L: 24
 } as const;
 
-function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
+/** An individual Tag for TagGroups. */
+export const Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivElement>) {
   textValue ||= typeof children === 'string' ? children : undefined;
   let ctx = useSlottedContext(TagGroupContext);
   let isInRealDOM = Boolean(ctx?.size);
@@ -541,12 +539,7 @@ function Tag({children, textValue, ...props}: TagProps, ref: DOMRef<HTMLDivEleme
       ))}
     </AriaTag>
   );
-}
-
-
-/** An individual Tag for TagGroups. */
-let _Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(Tag);
-export {_Tag as Tag};
+});
 
 function TagWrapper({children, isDisabled, allowsRemoving, isInRealDOM}) {
   let {size = 'M'} = useSlottedContext(TagGroupContext) ?? {};

package/src/TextField.tsx

@@ -43,33 +43,35 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'children' | 'c
 
 export const TextFieldContext = createContext<ContextValue<TextFieldProps, TextFieldRef>>(null);
 
-function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
+/**
+ * TextFields are text inputs that allow users to input custom text entries
+ * with a keyboard. Various decorations can be displayed around the field to
+ * communicate the entry requirements.
+ */
+export const TextField = forwardRef(function TextField(props: TextFieldProps, ref: Ref<TextFieldRef>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextFieldContext);
   return (
-    <_TextFieldBase
+    <TextFieldBase
       {...props}
       ref={ref}>
       <Input />
-    </_TextFieldBase>
+    </TextFieldBase>
   );
-}
-
-/**
- * TextFields are text inputs that allow users to input custom text entries
- * with a keyboard. Various decorations can be displayed around the field to
- * communicate the entry requirements.
- */
-let _TextField = forwardRef(TextField);
-export {_TextField as TextField};
+});
 
 export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'pattern'> {}
 
 export const TextAreaContext = createContext<ContextValue<TextAreaProps, TextFieldRef<HTMLTextAreaElement>>>(null);
 
-function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
+/**
+ * TextAreas are multiline text inputs, useful for cases where users have
+ * a sizable amount of text to enter. They allow for all customizations that
+ * are available to text fields.
+ */
+export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElement>>) {
   [props, ref] = useSpectrumContextProps(props, ref, TextAreaContext);
   return (
-    <_TextFieldBase
+    <TextFieldBase
       {...props}
       ref={ref}
       fieldGroupCss={style({
@@ -77,19 +79,11 @@ function TextArea(props: TextAreaProps, ref: Ref<TextFieldRef<HTMLTextAreaElemen
         height: 'auto'
       })}>
       <TextAreaInput />
-    </_TextFieldBase>
+    </TextFieldBase>
   );
-}
+});
 
-/**
- * TextAreas are multiline text inputs, useful for cases where users have
- * a sizable amount of text to enter. They allow for all customizations that
- * are available to text fields.
- */
-let _TextArea = forwardRef(TextArea);
-export {_TextArea as TextArea};
-
-function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
+export const TextFieldBase = forwardRef(function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupCss?: StyleString}, ref: Ref<TextFieldRef<HTMLInputElement | HTMLTextAreaElement>>) {
   let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useRef<HTMLDivElement>(null);
   let formContext = useContext(FormContext);
@@ -162,9 +156,7 @@ function TextFieldBase(props: TextFieldProps & {children: ReactNode, fieldGroupC
       </>))}
     </AriaTextField>
   );
-}
-
-let _TextFieldBase = forwardRef(TextFieldBase);
+});
 
 function TextAreaInput() {
   // Force re-render when value changes so we update the height.

package/src/ToggleButton.tsx

@@ -35,7 +35,11 @@ export interface ToggleButtonProps extends Omit<RACToggleButtonProps, 'className
 
 export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * ToggleButtons allow users to toggle a selection on or off, for example
+ * switching between two states or modes.
+ */
+export const ToggleButton = forwardRef(function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
@@ -61,6 +65,7 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
       className={renderProps => (props.UNSAFE_className || '') + btnStyles({
         ...renderProps,
         staticColor,
+        isStaticColor: !!staticColor,
         size,
         isQuiet,
         isEmphasized,
@@ -83,11 +88,4 @@ function ToggleButton(props: ToggleButtonProps, ref: FocusableRef<HTMLButtonElem
       </Provider>
     </RACToggleButton>
   );
-}
-
-/**
- * ToggleButtons allow users to toggle a selection on or off, for example
- * switching between two states or modes.
- */
-let _ToggleButton = forwardRef(ToggleButton);
-export {_ToggleButton as ToggleButton};
+});

package/src/ToggleButtonGroup.tsx

@@ -22,7 +22,10 @@ export interface ToggleButtonGroupProps extends ActionButtonGroupProps, Omit<RAC
 
 export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>(null);
 
-function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
+ */
+export const ToggleButtonGroup = forwardRef(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ToggleButtonGroupContext);
   let {
     density = 'regular',
@@ -46,10 +49,4 @@ function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTML
       </ToggleButtonGroupContext.Provider>
     </RACToggleButtonGroup>
   );
-}
-
-/**
- * A ToggleButtonGroup is a grouping of related ToggleButtons, with single or multiple selection.
- */
-const _ToggleButtonGroup = forwardRef(ToggleButtonGroup);
-export {_ToggleButtonGroup as ToggleButtonGroup};
+});