@react-spectrum/s2 0.5.0 → 0.7.0

package/src/ActionMenu.tsx

@@ -32,9 +32,12 @@ export interface ActionMenuProps<T> extends
   menuSize?: 'S' | 'M' | 'L' | 'XL'
 }
 
-export const ActionMenuContext = createContext<ContextValue<ActionMenuProps<any>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionMenuContext = createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
 
-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

@@ -53,9 +53,12 @@ const imageStyles = style({
   }
 }, getAllowedOverrides({width: false}));
 
-export const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);
+export const AvatarContext = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
 
-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

@@ -35,7 +35,7 @@ export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingPr
   styles?: StylesPropWithoutWidth
 }
 
-export const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);
+export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const avatar = style({
   marginStart: {
@@ -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

@@ -13,7 +13,7 @@
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {centerBaseline} from './CenterBaseline';
 import {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {ContextValue, Provider, SlotProps} from 'react-aria-components';
+import {ContextValue, Provider, TextContext as RACTextContext, SlotProps} from 'react-aria-components';
 import {filterDOMProps} from '@react-aria/utils';
 import {fontRelative, lightDark, style} from '../style' with {type: 'macro'};
 import {IconContext} from './Icon';
@@ -35,12 +35,17 @@ export interface BadgeStyleProps {
    *
    * @default 'neutral'
    */
-  variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
+  variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'chartreuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',
   /**
    * The fill of the badge.
    * @default 'bold'
    */
-  fillStyle?: 'bold' | 'subtle' | 'outline'
+  fillStyle?: 'bold' | 'subtle' | 'outline',
+  /**
+   * Sets the text behavior for the contents.
+   * @default 'wrap'
+   */
+  overflowMode?: 'wrap' | 'truncate'
 }
 
 export interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {
@@ -56,7 +61,10 @@ const badge = style<BadgeStyleProps>({
   display: 'flex',
   font: 'control',
   justifyContent: 'center',
-  alignItems: 'center',
+  alignItems: {
+    default: 'baseline',
+    ':has([slot=icon]:only-child)': 'center'
+  },
   borderRadius: 'control',
   minHeight: 'control',
   paddingX: {
@@ -86,7 +94,7 @@ const badge = style<BadgeStyleProps>({
           notice: 'black',
           orange: 'black',
           yellow: 'black',
-          charteuse: 'black',
+          chartreuse: 'black',
           celery: 'black'
         }
       },
@@ -108,7 +116,7 @@ const badge = style<BadgeStyleProps>({
           red: 'red',
           orange: 'orange',
           yellow: 'yellow',
-          charteuse: 'chartreuse',
+          chartreuse: 'chartreuse',
           celery: 'celery',
           green: 'green',
           seafoam: 'seafoam',
@@ -137,7 +145,7 @@ const badge = style<BadgeStyleProps>({
           red: 'red-subtle',
           orange: 'orange-subtle',
           yellow: 'yellow-subtle',
-          charteuse: 'chartreuse-subtle',
+          chartreuse: 'chartreuse-subtle',
           celery: 'celery-subtle',
           green: 'green-subtle',
           seafoam: 'seafoam-subtle',
@@ -181,13 +189,17 @@ 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,
     variant = 'neutral',
     size = 'S',
     fillStyle = 'bold',
+    overflowMode = 'wrap',
     ...otherProps
   } = props; // useProviderProps(props) in v3
   let domRef = useDOMRef(ref);
@@ -196,7 +208,17 @@ function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <Provider
       values={[
-        [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],
+        [TextContext, {
+          styles: style({
+            paddingY: '--labelPadding',
+            order: 1,
+            overflowX: 'hidden',
+            overflowY: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: {overflowMode: {truncate: 'nowrap', wrap: 'normal'}}
+          })({overflowMode})
+        }],
+        [RACTextContext, {}],
         [IconContext, {
           render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
           styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})
@@ -218,10 +240,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};
+});

package/src/Breadcrumbs.tsx

@@ -15,13 +15,13 @@ import {
   Breadcrumb as AriaBreadcrumb,
   BreadcrumbsProps as AriaBreadcrumbsProps,
   CollectionRenderer,
+  CollectionRendererContext,
   ContextValue,
+  DefaultCollectionRenderer,
   HeadingContext,
   Link,
   Provider,
-  Breadcrumbs as RACBreadcrumbs,
-  UNSTABLE_CollectionRendererContext,
-  UNSTABLE_DefaultCollectionRenderer
+  Breadcrumbs as RACBreadcrumbs
 } from 'react-aria-components';
 import {AriaBreadcrumbItemProps, useLocale} from 'react-aria';
 import ChevronIcon from '../ui-icons/Chevron';
@@ -31,12 +31,12 @@ import {focusRing, size, style} from '../style' with { type: 'macro' };
 import FolderIcon from '../s2wf-icons/S2_Icon_FolderBreadcrumb_20_N.svg';
 import {forwardRefType} from './types';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {inertValue, useLayoutEffect} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Menu, MenuItem, MenuTrigger} from './Menu';
 import {Text} from './Content';
 import {useDOMRef, useResizeObserver} from '@react-spectrum/utils';
-import {useLayoutEffect} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -62,10 +62,10 @@ interface BreadcrumbsStyleProps {
 
 export interface BreadcrumbsProps<T> extends Omit<AriaBreadcrumbsProps<T>, 'children' | 'items' | 'style' | 'className'>, BreadcrumbsStyleProps, StyleProps {
   /** The children of the Breadcrumbs. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, DOMRefValue<HTMLOListElement>>>(null);
+export const BreadcrumbsContext = createContext<ContextValue<Partial<BreadcrumbsProps<any>>, DOMRefValue<HTMLOListElement>>>(null);
 
 const wrapper = style<BreadcrumbsStyleProps>({
   position: 'relative',
@@ -95,9 +95,10 @@ const wrapper = style<BreadcrumbsStyleProps>({
   }
 }, getAllowedOverrides());
 
-const InternalBreadcrumbsContext = createContext<BreadcrumbsProps<any>>({});
+const InternalBreadcrumbsContext = createContext<Partial<BreadcrumbsProps<any>>>({});
 
-function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
+/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
+export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, BreadcrumbsContext);
   let domRef = useDOMRef(ref);
   let {
@@ -129,7 +130,7 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<H
       </CollapsingCollection>
     </Provider>
   );
-}
+});
 
 let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProps<unknown>['onAction']}) => {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
@@ -138,7 +139,7 @@ let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProp
   let {size, isDisabled} = useContext(InternalBreadcrumbsContext);
   let label = stringFormatter.format('breadcrumbs.more');
   return (
-    <UNSTABLE_CollectionRendererContext.Provider value={UNSTABLE_DefaultCollectionRenderer}>
+    <CollectionRendererContext.Provider value={DefaultCollectionRenderer}>
       <li className={breadcrumbStyles({size, isDisabled, isMenu: true})}>
         <MenuTrigger>
           <ActionButton isDisabled={isDisabled} isQuiet aria-label={label}><FolderIcon /></ActionButton>
@@ -158,20 +159,16 @@ let BreadcrumbMenu = (props: {items: Array<Node<any>>, onAction: BreadcrumbsProp
           size={size}
           className={chevronStyles({direction, isMenu: true})} />
       </li>
-    </UNSTABLE_CollectionRendererContext.Provider>
+    </CollectionRendererContext.Provider>
   );
 };
 
-/** Breadcrumbs show hierarchy and navigational context for a user’s location within an application. */
-let _Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumbs);
-export {_Breadcrumbs as Breadcrumbs};
-
 let HiddenBreadcrumbs = function (props: {listRef: RefObject<HTMLDivElement | null>, items: Array<Node<any>>, size: string}) {
   let {listRef, items, size} = props;
   return (
     <div
       // @ts-ignore
-      inert="true"
+      inert={inertValue(true)}
       ref={listRef}
       className={style({
         display: '[inherit]',
@@ -293,10 +290,11 @@ const heading = style({
 
 export interface BreadcrumbProps extends Omit<AriaBreadcrumbItemProps, 'children' | 'style' | 'className' | 'autoFocus'>, LinkDOMProps {
   /** The children of the breadcrumb item. */
-  children?: ReactNode
+  children: ReactNode
 }
 
-function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
+/** An individual Breadcrumb for Breadcrumbs. */
+export const Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIElement>) {
   let {href, target, rel, download, ping, referrerPolicy} = props;
   let {size = 'M'} = useContext(InternalBreadcrumbsContext) ?? {};
   let domRef = useDOMRef(ref);
@@ -351,11 +349,7 @@ function Breadcrumb({children, ...props}: BreadcrumbProps, ref: DOMRef<HTMLLIEle
       }}
     </AriaBreadcrumb>
   );
-}
-
-/** An individual Breadcrumb for Breadcrumbs. */
-let _Breadcrumb = /*#__PURE__*/ (forwardRef as forwardRefType)(Breadcrumb);
-export {_Breadcrumb as Breadcrumb};
+});
 
 // Context for passing the count for the custom renderer
 let CollapseContext = createContext<{
@@ -366,9 +360,9 @@ let CollapseContext = createContext<{
 function CollapsingCollection({children, containerRef, onAction}) {
   return (
     <CollapseContext.Provider value={{containerRef, onAction}}>
-      <UNSTABLE_CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>
+      <CollectionRendererContext.Provider value={CollapsingCollectionRenderer}>
         {children}
-      </UNSTABLE_CollectionRendererContext.Provider>
+      </CollectionRendererContext.Provider>
     </CollapseContext.Provider>
   );
 }