@react-spectrum/s2 0.5.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/s2",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Spectrum 2 UI components in React",
   "license": "Apache-2.0",
   "repository": {
@@ -57,33 +57,32 @@
     "src"
   ],
   "dependencies": {
-    "@react-aria/collections": "3.0.0-alpha.6",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/utils": "^3.26.0",
-    "@react-spectrum/utils": "^3.12.0",
-    "@react-stately/layout": "^4.1.0",
-    "@react-stately/virtualizer": "^4.2.0",
-    "@react-types/color": "^3.0.1",
-    "@react-types/dialog": "^3.5.14",
-    "@react-types/grid": "^3.2.10",
-    "@react-types/provider": "^3.8.5",
-    "@react-types/shared": "^3.26.0",
-    "@react-types/table": "^3.10.3",
-    "@react-types/textfield": "^3.10.0",
+    "@react-aria/collections": "3.0.0-alpha.7",
+    "@react-aria/i18n": "^3.12.5",
+    "@react-aria/interactions": "^3.23.0",
+    "@react-aria/live-announcer": "^3.4.1",
+    "@react-aria/utils": "^3.27.0",
+    "@react-spectrum/utils": "^3.12.1",
+    "@react-stately/layout": "^4.1.1",
+    "@react-stately/utils": "^3.10.5",
+    "@react-stately/virtualizer": "^4.2.1",
+    "@react-types/color": "^3.0.2",
+    "@react-types/dialog": "^3.5.15",
+    "@react-types/grid": "^3.2.11",
+    "@react-types/provider": "^3.8.6",
+    "@react-types/shared": "^3.27.0",
+    "@react-types/table": "^3.10.4",
+    "@react-types/textfield": "^3.11.0",
     "csstype": "^3.0.2",
-    "react-aria": "^3.36.0",
-    "react-aria-components": "^1.5.0"
+    "react-aria": "^3.37.0",
+    "react-aria-components": "^1.6.0"
   },
   "peerDependencies": {
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^13.0.0 || ^14.0.0",
-    "jest": "^29.5.0",
     "react": "^18.0.0 || ^19.0.0-rc.1",
     "react-dom": "^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

package/src/Accordion.tsx

@@ -45,7 +45,10 @@ const accordion = style({
 
 export const AccordionContext = createContext<ContextValue<AccordionProps, DOMRefValue<HTMLDivElement>>>(null);
 
-function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * An accordion is a container for multiple disclosures.
+ */
+export const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);
   let domRef = useDOMRef(ref);
   let {
@@ -66,10 +69,4 @@ function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
       </DisclosureGroup>
     </DisclosureContext.Provider>
   );
-}
-
-/**
- * An accordion is a container for multiple disclosures.
- */
-let _Accordion = forwardRef(Accordion);
-export {_Accordion as Accordion};
+});

package/src/ActionBar.tsx

@@ -0,0 +1,229 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ActionButtonGroup} from './ActionButtonGroup';
+import {announce} from '@react-aria/live-announcer';
+import {CloseButton} from './CloseButton';
+import {ContextValue, SlotProps} from 'react-aria-components';
+import {createContext, ForwardedRef, forwardRef, ReactElement, ReactNode, RefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import {DOMRef, DOMRefValue, Key} from '@react-types/shared';
+import {FocusScope, useKeyboard} from 'react-aria';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {style} from '../style' with {type: 'macro'};
+import {useControlledState} from '@react-stately/utils';
+import {useDOMRef} from '@react-spectrum/utils';
+import {useEnterAnimation, useExitAnimation, useObjectRef, useResizeObserver} from '@react-aria/utils';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
+
+const actionBarStyles = style({
+  borderRadius: 'lg',
+  '--s2-container-bg': {
+    type: 'backgroundColor',
+    value: {
+      default: 'elevated',
+      isEmphasized: 'neutral'
+    }
+  },
+  backgroundColor: '--s2-container-bg',
+  boxShadow: 'elevated',
+  boxSizing: 'border-box',
+  outlineStyle: 'solid',
+  outlineWidth: 1,
+  outlineOffset: -1,
+  outlineColor: {
+    default: 'gray-200',
+    isEmphasized: 'transparent',
+    forcedColors: 'ButtonBorder'
+  },
+  paddingX: 8,
+  paddingY: 12,
+  display: 'flex',
+  gap: 16,
+  alignItems: 'center',
+  position: {
+    isInContainer: 'absolute'
+  },
+  bottom: 0,
+  insetStart: 8,
+  '--insetEnd': {
+    type: 'insetEnd',
+    value: 8
+  },
+  width: {
+    default: 'full',
+    isInContainer: 'auto'
+  },
+  marginX: 'auto',
+  maxWidth: 960,
+  transition: 'transform',
+  transitionDuration: 200,
+  translateY: {
+    default: -8,
+    isEntering: 'full',
+    isExiting: 'full'
+  }
+});
+
+export interface ActionBarProps extends SlotProps {
+  /** A list of ActionButtons to display. */
+  children: ReactNode,
+  /** Whether the ActionBar should be displayed with a emphasized style. */
+  isEmphasized?: boolean,
+  /** The number of selected items that the ActionBar is currently linked to. If 0, the ActionBar is hidden. */
+  selectedItemCount?: number | 'all',
+  /** Handler that is called when the ActionBar clear button is pressed. */
+  onClearSelection?: () => void,
+  /** A ref to the scrollable element the ActionBar appears above. */
+  scrollRef?: RefObject<HTMLElement | null>
+}
+
+export const ActionBarContext = createContext<ContextValue<Partial<ActionBarProps>, DOMRefValue<HTMLDivElement>>>(null);
+
+export const ActionBar = forwardRef(function ActionBar(props: ActionBarProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, ActionBarContext);
+  let domRef = useDOMRef(ref);
+
+  let isOpen = props.selectedItemCount !== 0;
+  let isExiting = useExitAnimation(domRef, isOpen && props.scrollRef != null);
+  if (!isOpen && !isExiting) {
+    return null;
+  }
+
+  return <ActionBarInner {...props} ref={domRef} isExiting={isExiting} />;
+});
+
+const ActionBarInner = forwardRef(function ActionBarInner(props: ActionBarProps & {isExiting: boolean}, ref: ForwardedRef<HTMLDivElement | null>) {
+  let {isEmphasized, selectedItemCount = 0, children, onClearSelection, isExiting} = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+
+  // Store the last count greater than zero so that we can retain it while rendering the fade-out animation.
+  let [lastCount, setLastCount] = useState(selectedItemCount);
+  if ((selectedItemCount === 'all' || selectedItemCount > 0) && selectedItemCount !== lastCount) {
+    setLastCount(selectedItemCount);
+  }
+    
+  // Measure the width of the collection's scrollbar and offset the action bar by that amount.
+  let scrollRef = props.scrollRef;
+  let [scrollbarWidth, setScrollbarWidth] = useState(0);
+  let updateScrollbarWidth = useCallback(() => {
+    let el = scrollRef?.current;
+    if (el) {
+      let w = el.offsetWidth - el.clientWidth;
+      setScrollbarWidth(w);
+    }
+  }, [scrollRef]);
+
+  useResizeObserver({
+    ref: scrollRef,
+    onResize: updateScrollbarWidth
+  });
+
+  let {keyboardProps} = useKeyboard({
+    onKeyDown(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onClearSelection?.();
+      } else {
+        e.continuePropagation();
+      }
+    }
+  });
+
+  // Announce "actions available" on mount.
+  let isInitial = useRef(true);
+  useEffect(() => {
+    if (isInitial.current && scrollRef) {
+      isInitial.current = false;
+      announce(stringFormatter.format('actionbar.actionsAvailable'));
+    }
+  }, [stringFormatter, scrollRef]);
+
+  let objectRef = useObjectRef(ref);
+  let isEntering = useEnterAnimation(objectRef, !!scrollRef);
+
+  return (
+    <FocusScope restoreFocus>
+      <div
+        ref={objectRef}
+        {...keyboardProps}
+        className={actionBarStyles({isEmphasized, isInContainer: !!scrollRef, isEntering, isExiting})}
+        style={{insetInlineEnd: `calc(var(--insetEnd) + ${scrollbarWidth}px)`}}>
+        <div className={style({order: 1, marginStart: 'auto'})}>
+          <ActionButtonGroup
+            staticColor={isEmphasized ? 'auto' : undefined}
+            isQuiet
+            aria-label={stringFormatter.format('actionbar.actions')}>
+            {children}
+          </ActionButtonGroup>
+        </div>
+        <div className={style({order: 0, display: 'flex', alignItems: 'center', gap: 4})}>
+          <CloseButton
+            staticColor={isEmphasized ? 'auto' : undefined}
+            aria-label={stringFormatter.format('actionbar.clearSelection')}
+            onPress={() => onClearSelection?.()} />
+          <span className={style({font: 'ui', color: {default: 'neutral', isEmphasized: 'gray-25'}})({isEmphasized})}>
+            {lastCount === 'all'
+              ? stringFormatter.format('actionbar.selectedAll')
+              : stringFormatter.format('actionbar.selected', {count: lastCount})}
+          </span>
+        </div>
+      </div>
+    </FocusScope>
+  );
+});
+
+interface ActionBarContainerHookProps {
+  selectedKeys?: 'all' | Iterable<Key>,
+  defaultSelectedKeys?: 'all' | Iterable<Key>,
+  onSelectionChange?: (keys: Set<Key>) => void,
+  renderActionBar?: (selectedKeys: 'all' | Set<Key>) => ReactElement,
+  scrollRef?: RefObject<HTMLElement | null>
+}
+
+export function useActionBarContainer(props: ActionBarContainerHookProps) {
+  let {renderActionBar, scrollRef} = props;
+  let [selectedKeys, setSelectedKeys] = useControlledState(props.selectedKeys, props.defaultSelectedKeys || new Set(), props.onSelectionChange);
+  let selectedKeysSet = useMemo(() => selectedKeys === 'all' ? selectedKeys as 'all' : new Set(selectedKeys), [selectedKeys]);
+  let actionBar = useMemo(() => renderActionBar?.(selectedKeysSet), [renderActionBar, selectedKeysSet]);
+  let selectedItemCount = selectedKeysSet === 'all' ? 'all' as const : selectedKeysSet.size;
+  let [actionBarHeight, setActionBarHeight] = useState(0);
+  let actionBarRef = useCallback((ref: DOMRefValue | null) => {
+    let actionBar = ref?.UNSAFE_getDOMNode();
+    if (actionBar) {
+      setActionBarHeight(actionBar.offsetHeight + 8);
+    } else {
+      setActionBarHeight(0);
+    }
+  }, []);
+
+  let actionBarContext = useMemo(() => ({
+    ref: actionBarRef,
+    scrollRef,
+    selectedItemCount,
+    onClearSelection: () => setSelectedKeys(new Set())
+  }), [scrollRef, actionBarRef, selectedItemCount, setSelectedKeys]);
+
+  let wrappedActionBar = useMemo(() => (
+    <ActionBarContext.Provider value={actionBarContext}>
+      {actionBar}
+    </ActionBarContext.Provider>
+  ), [actionBarContext, actionBar]);
+
+  return {
+    selectedKeys,
+    onSelectionChange: setSelectedKeys,
+    actionBar: wrappedActionBar,
+    actionBarHeight
+  };
+}

package/src/ActionButton.tsx

@@ -17,7 +17,7 @@ import {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext
 import {centerBaseline} from './CenterBaseline';
 import {createContext, forwardRef, ReactNode, useContext} from 'react';
 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' };
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {SkeletonContext} from './Skeleton';
@@ -34,7 +34,7 @@ export interface ActionButtonStyleProps {
    */
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
   /** The static color style to apply. Useful when the ActionButton appears over a color background. */
-  staticColor?: 'black' | 'white',
+  staticColor?: 'black' | 'white' | 'auto',
   /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
   isQuiet?: boolean
 }
@@ -59,8 +59,9 @@ export interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'styl
 
 // These styles handle both ActionButton and ToggleButton
 const iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';
-export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean}>({
+export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({
   ...focusRing(),
+  ...staticColor(),
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -98,33 +99,17 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
         isQuiet: 'transparent'
       }
     },
-    staticColor: {
-      white: {
-        ...baseColor('transparent-white-100'),
-        default: {
-          default: 'transparent-white-100',
-          isQuiet: 'transparent'
-        },
-        isSelected: {
-          default: baseColor('transparent-white-800'),
-          isDisabled: {
-            default: 'transparent-white-100',
-            isQuiet: 'transparent'
-          }
-        }
+    isStaticColor: {
+      ...baseColor('transparent-overlay-100'),
+      default: {
+        default: 'transparent-overlay-100',
+        isQuiet: 'transparent'
       },
-      black: {
-        ...baseColor('transparent-black-100'),
-        default: {
-          default: 'transparent-black-100',
+      isSelected: {
+        default: baseColor('transparent-overlay-800'),
+        isDisabled: {
+          default: 'transparent-overlay-100',
           isQuiet: 'transparent'
-        },
-        isSelected: {
-          default: baseColor('transparent-black-800'),
-          isDisabled: {
-            default: 'transparent-black-100',
-            isQuiet: 'transparent'
-          }
         }
       }
     },
@@ -143,17 +128,10 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
       isEmphasized: 'white'
     },
     isDisabled: 'disabled',
-    staticColor: {
-      white: {
-        default: baseColor('transparent-white-800'),
-        isSelected: 'black',
-        isDisabled: 'transparent-white-400'
-      },
-      black: {
-        default: baseColor('transparent-black-800'),
-        isSelected: 'white',
-        isDisabled: 'transparent-black-400'
-      }
+    isStaticColor: {
+      default: baseColor('transparent-overlay-800'),
+      isSelected: 'auto',
+      isDisabled: 'transparent-overlay-400'
     },
     forcedColors: {
       default: 'ButtonText',
@@ -169,10 +147,7 @@ export const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & Togg
   },
   outlineColor: {
     default: 'focus-ring',
-    staticColor: {
-      white: 'white',
-      black: 'black'
-    },
+    isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
   },
   borderStyle: 'none',
@@ -255,7 +230,11 @@ const avatarSize = {
 
 export const ActionButtonContext = createContext<ContextValue<ActionButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * ActionButtons allow users to perform an action.
+ * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
+ */
+export const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);
   props = useFormProps(props as any);
   let domRef = useFocusableRef(ref);
@@ -283,6 +262,7 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
         // Retain hover styles when an overlay is open.
         isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
         staticColor,
+        isStaticColor: !!staticColor,
         size,
         isQuiet,
         density,
@@ -307,11 +287,4 @@ function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElem
       </Provider>
     </RACButton>
   );
-}
-
-/**
- * ActionButtons allow users to perform an action.
- * They’re used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren’t meant to draw a lot of attention.
- */
-let _ActionButton = forwardRef(ActionButton);
-export {_ActionButton as ActionButton};
+});

package/src/ActionButtonGroup.tsx

@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps} from '@react-types/shared';
 import {ContextValue, SlotProps, Toolbar} from 'react-aria-components';
 import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {
+export interface ActionButtonGroupProps extends AriaLabelingProps, UnsafeStyles, SlotProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight,
   /** The children of the group. */
@@ -36,7 +37,7 @@ export interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {
   /** Whether the buttons should divide the container width equally. */
   isJustified?: boolean,
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
-  staticColor?: 'white' | 'black',
+  staticColor?: 'white' | 'black' | 'auto',
   /**
    * The axis the group should align with.
    * @default 'horizontal'
@@ -71,9 +72,12 @@ export const actionGroupStyle = style({
 }, getAllowedOverrides({height: true}));
 
 
-export const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);
+export const ActionButtonGroupContext = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
 
-function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+/**
+ * An ActionButtonGroup is a grouping of related ActionButtons.
+ */
+export const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);
   let {
     density = 'regular',
@@ -97,10 +101,4 @@ function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTML
       </ActionButtonGroupContext.Provider>
     </Toolbar>
   );
-}
-
-/**
- * An ActionButtonGroup is a grouping of related ActionButtons.
- */
-const _ActionButtonGroup = forwardRef(ActionButtonGroup);
-export {_ActionButtonGroup as ActionButtonGroup};
+});

package/src/ActionMenu.tsx

@@ -34,7 +34,10 @@ export interface ActionMenuProps<T> extends
 
 export const ActionMenuContext = createContext<ContextValue<ActionMenuProps<any>, FocusableRefValue<HTMLButtonElement>>>(null);
 
-function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
+/**
+ * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
+ */
+export const ActionMenu = /*#__PURE__*/(forwardRef as forwardRefType)(function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableRef<HTMLButtonElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, ActionMenuContext);
   let buttonProps = filterDOMProps(props, {labelable: true});
@@ -69,10 +72,4 @@ function ActionMenu<T extends object>(props: ActionMenuProps<T>, ref: FocusableR
       </Menu>
     </MenuTrigger>
   );
-}
-
-/**
- * ActionMenu combines an ActionButton with a Menu for simple "more actions" use cases.
- */
-let _ActionMenu = /*#__PURE__*/(forwardRef as forwardRefType)(ActionMenu);
-export {_ActionMenu as ActionMenu};
+});

package/src/AlertDialog.tsx

@@ -74,7 +74,10 @@ const icon = style({
   }
 });
 
-function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
+/**
+ * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+ */
+export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   let {
     autoFocusButton,
@@ -152,10 +155,4 @@ function AlertDialog(props: AlertDialogProps, ref: DOMRef) {
       )}
     </Dialog>
   );
-}
-
-/**
- * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
- */
-let _AlertDialog = forwardRef(AlertDialog);
-export {_AlertDialog as AlertDialog};
+});

package/src/Avatar.tsx

@@ -55,7 +55,10 @@ const imageStyles = style({
 
 export const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);
 
-function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
+/**
+ * An avatar is a thumbnail representation of an entity, such as a user or an organization.
+ */
+export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);
   let domRef = useDOMRef(ref);
   let {
@@ -87,10 +90,4 @@ function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {
       styles={imageStyles({isOverBackground, isLarge}, props.styles)}
       src={src} />
   );
-}
-
-/**
- * An avatar is a thumbnail representation of an entity, such as a user or an organization.
- */
-let _Avatar = forwardRef(Avatar);
-export {_Avatar as Avatar};
+});

package/src/AvatarGroup.tsx

@@ -65,7 +65,10 @@ const container = style({
   alignItems: 'center'
 }, getAllowedOverrides({width: false}));
 
-function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * An avatar group is a grouping of avatars that are related to each other.
+ */
+export const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);
   let domRef = useDOMRef(ref);
   let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;
@@ -91,10 +94,4 @@ function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {
       </div>
     </AvatarContext.Provider>
   );
-}
-
-/**
- * An avatar group is a grouping of avatars that are related to each other.
- */
-let _AvatarGroup = forwardRef(AvatarGroup);
-export {_AvatarGroup as AvatarGroup};
+});

package/src/Badge.tsx

@@ -181,7 +181,10 @@ const badge = style<BadgeStyleProps>({
   }
 }, getAllowedOverrides());
 
-function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
+/**
+ * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
+ */
+export const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);
   let {
     children,
@@ -218,10 +221,4 @@ function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
       </SkeletonWrapper>
     </Provider>
   );
-}
-
-/**
- * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
- */
-let _Badge = forwardRef(Badge);
-export {_Badge as Badge};
+});