@react-spectrum/s2 1.3.1 → 1.5.0

package/src/ActionButtonGroup.tsx

@@ -13,72 +13,91 @@
 import {AriaLabelingProps} from '@react-types/shared';
 import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
-import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {Toolbar} from 'react-aria-components/Toolbar';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface ActionButtonGroupProps extends AriaLabelingProps, UnsafeStyles, SlotProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
+  styles?: StylesPropWithHeight;
   /** The children of the group. */
-  children: ReactNode,
+  children: ReactNode;
   /**
    * Size of the buttons.
-   * @default "M"
+   *
+   * @default 'M'
    */
-  size?: 'XS' | 'S' | 'M' | 'L' | 'XL',
+  size?: 'XS' | 'S' | 'M' | 'L' | 'XL';
   /**
    * Spacing between the buttons.
-   * @default "regular"
+   *
+   * @default 'regular'
    */
-  density?: 'compact' | 'regular',
-  /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */
-  isQuiet?: boolean,
+  density?: 'compact' | 'regular';
+  /**
+   * Whether the button should be displayed with a [quiet
+   * style](https://spectrum.adobe.com/page/action-button/#Quiet).
+   */
+  isQuiet?: boolean;
   /** Whether the buttons should divide the container width equally. */
-  isJustified?: boolean,
-  /** The static color style to apply. Useful when the ActionButtonGroup appears over a color background. */
-  staticColor?: 'white' | 'black' | 'auto',
+  isJustified?: boolean;
+  /**
+   * The static color style to apply. Useful when the ActionButtonGroup appears over a color
+   * background.
+   */
+  staticColor?: 'white' | 'black' | 'auto';
   /**
    * The axis the group should align with.
+   *
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical',
+  orientation?: 'horizontal' | 'vertical';
   /** Whether the group is disabled. */
-  isDisabled?: boolean
+  isDisabled?: boolean;
 }
 
-export const actionGroupStyle = style({
-  display: 'flex',
-  flexDirection: {
-    orientation: {
-      horizontal: 'row',
-      vertical: 'column'
-    }
-  },
-  gap: {
-    density: {
-      compact: 2,
-      regular: {
-        size: {
-          XS: 4,
-          S: 4,
-          M: 8,
-          L: 8,
-          XL: 8
+export const actionGroupStyle = style(
+  {
+    display: 'flex',
+    flexDirection: {
+      orientation: {
+        horizontal: 'row',
+        vertical: 'column'
+      }
+    },
+    gap: {
+      density: {
+        compact: 2,
+        regular: {
+          size: {
+            XS: 4,
+            S: 4,
+            M: 8,
+            L: 8,
+            XL: 8
+          }
         }
       }
     }
-  }
-}, getAllowedOverrides({height: true}));
-
+  },
+  getAllowedOverrides({height: true})
+);
 
-export const ActionButtonGroupContext = createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
+export const ActionButtonGroupContext =
+  createContext<ContextValue<Partial<ActionButtonGroupProps>, HTMLDivElement>>(null);
 
 /**
  * An ActionButtonGroup is a grouping of related ActionButtons.
  */
-export const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ActionButtonGroup = forwardRef(function ActionButtonGroup(
+  props: ActionButtonGroupProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);
   let {
     density = 'regular',
@@ -96,7 +115,9 @@ export const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: Ac
       {...props}
       ref={ref}
       style={UNSAFE_style}
-      className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>
+      className={
+        UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)
+      }>
       <ActionButtonGroupContext.Provider value={props}>
         {children}
       </ActionButtonGroupContext.Provider>

package/src/ActionMenu.tsx

@@ -16,33 +16,44 @@ import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef} from 'react';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {forwardRefType} from './types';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Menu, MenuProps, MenuTrigger, MenuTriggerProps} from './Menu';
 import MoreIcon from '../s2wf-icons/S2_Icon_More_20_N.svg';
-import {StyleProps} from './style-utils' with { type: 'macro' };
+import {StyleProps} from './style-utils' with {type: 'macro'};
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface ActionMenuProps<T> extends
-  Pick<MenuTriggerProps, 'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'>,
-  Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction' | 'shouldCloseOnSelect'>,
-  Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>,
-  StyleProps, DOMProps, AriaLabelingProps {
+export interface ActionMenuProps<T>
+  extends
+    Pick<
+      MenuTriggerProps,
+      'isOpen' | 'defaultOpen' | 'onOpenChange' | 'align' | 'direction' | 'shouldFlip'
+    >,
+    Pick<MenuProps<T>, 'children' | 'items' | 'disabledKeys' | 'onAction' | 'shouldCloseOnSelect'>,
+    Pick<ActionButtonProps, 'isDisabled' | 'isQuiet' | 'autoFocus' | 'size'>,
+    StyleProps,
+    DOMProps,
+    AriaLabelingProps {
   /**
    * The size of the Menu.
    *
    * @default 'M'
    */
-  menuSize?: 'S' | 'M' | 'L' | 'XL'
+  menuSize?: 'S' | 'M' | 'L' | 'XL';
 }
 
-export const ActionMenuContext = createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);
+export const ActionMenuContext =
+  createContext<ContextValue<Partial<ActionMenuProps<any>>, FocusableRefValue<HTMLButtonElement>>>(
+    null
+  );
 
 /**
  * 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>) {
+export const ActionMenu = /*#__PURE__*/ (forwardRef as forwardRefType)(function ActionMenu<T>(
+  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});

package/src/AlertDialog.tsx

@@ -20,7 +20,6 @@ import {Dialog} from './Dialog';
 import {DOMProps, DOMRef} from '@react-types/shared';
 import {forwardRef, ReactNode} from 'react';
 import {IconContext} from './Icon';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';
 import {Provider} from 'react-aria-components/slots';
@@ -31,37 +30,38 @@ import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatte
 export interface AlertDialogProps extends DOMProps, UnsafeStyles {
   /**
    * The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog.
+   *
    * @default 'confirmation'
    */
-  variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',
+  variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning';
   /** The title of the AlertDialog. */
-  title: string,
+  title: string;
   /** The contents of the AlertDialog. */
-  children: ReactNode,
+  children: ReactNode;
   /** The label to display within the cancel button. */
-  cancelLabel?: string,
+  cancelLabel?: string;
   /** The label to display within the confirm button. */
-  primaryActionLabel: string,
+  primaryActionLabel: string;
   /** The label to display within the secondary button. */
-  secondaryActionLabel?: string,
+  secondaryActionLabel?: string;
   /** Whether the primary button is disabled. */
-  isPrimaryActionDisabled?: boolean,
+  isPrimaryActionDisabled?: boolean;
   /** Whether the secondary button is disabled. */
-  isSecondaryActionDisabled?: boolean,
+  isSecondaryActionDisabled?: boolean;
   /** Handler that is called when the cancel button is pressed. */
-  onCancel?: () => void,
+  onCancel?: () => void;
   /** Handler that is called when the primary button is pressed. */
-  onPrimaryAction?: () => void,
+  onPrimaryAction?: () => void;
   /** Handler that is called when the secondary button is pressed. */
-  onSecondaryAction?: () => void,
+  onSecondaryAction?: () => void;
   /** Button to focus by default when the dialog opens. */
-  autoFocusButton?: 'cancel' | 'primary' | 'secondary',
+  autoFocusButton?: 'cancel' | 'primary' | 'secondary';
   /**
    * The size of the Dialog.
    *
    * @default 'M'
    */
-    size?: 'S' | 'M' | 'L'
+  size?: 'S' | 'M' | 'L';
 }
 
 const icon = style({
@@ -78,7 +78,8 @@ const icon = style({
 });
 
 /**
- * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+ * 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');
@@ -110,24 +111,25 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro
       ref={ref}
       size={props.size}
       UNSAFE_style={props.UNSAFE_style}
-      UNSAFE_className={(props.UNSAFE_className || '')}>
+      UNSAFE_className={props.UNSAFE_className || ''}>
       {({close}) => (
         <>
-          <Provider
-            values={[
-              [IconContext, {styles: icon({variant})}]
-            ]}>
+          <Provider values={[[IconContext, {styles: icon({variant})}]]}>
             <Heading slot="title">
               <CenterBaseline>
-                {variant === 'error' && <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />}
-                {variant === 'warning' && <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />}
+                {variant === 'error' && (
+                  <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />
+                )}
+                {variant === 'warning' && (
+                  <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />
+                )}
                 {title}
               </CenterBaseline>
             </Heading>
           </Provider>
           <Content>{children}</Content>
           <ButtonGroup>
-            {cancelLabel &&
+            {cancelLabel && (
               <Button
                 onPress={() => chain(close(), onCancel())}
                 variant="secondary"
@@ -136,8 +138,8 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro
                 data-testid="rsp-AlertDialog-cancelButton">
                 {cancelLabel}
               </Button>
-            }
-            {secondaryActionLabel &&
+            )}
+            {secondaryActionLabel && (
               <Button
                 onPress={() => chain(close(), onSecondaryAction())}
                 variant="secondary"
@@ -147,7 +149,7 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro
                 data-testid="rsp-AlertDialog-secondaryButton">
                 {secondaryActionLabel}
               </Button>
-            }
+            )}
             <Button
               variant={buttonVariant as 'primary' | 'accent' | 'negative'}
               isDisabled={isPrimaryActionDisabled}

package/src/Avatar.tsx

@@ -15,54 +15,66 @@ import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {createContext, forwardRef} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
-import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  StylesPropWithoutWidth,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {Image} from './Image';
 import {isDocsEnv} from './macros' with {type: 'macro'};
-import {style} from '../style' with { type: 'macro' };
+import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {
   /** Text description of the avatar. */
-  alt?: string,
+  alt?: string;
   /** The image URL for the avatar. */
-  src?: string,
+  src?: string;
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithoutWidth,
+  styles?: StylesPropWithoutWidth;
   /**
    * The size of the avatar.
+   *
    * @default 24
    */
-  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}),
+  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {});
   /** Whether the avatar is over a color background. */
-  isOverBackground?: boolean
+  isOverBackground?: boolean;
 }
 
-const imageStyles = style({
-  display: 'flex',
-  alignItems: 'center',
-  borderRadius: 'full',
-  size: 20,
-  flexShrink: 0,
-  flexGrow: 0,
-  disableTapHighlight: true,
-  outlineStyle: {
-    default: 'none',
-    isOverBackground: 'solid'
+const imageStyles = style(
+  {
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: 'full',
+    size: 20,
+    flexShrink: 0,
+    flexGrow: 0,
+    disableTapHighlight: true,
+    outlineStyle: {
+      default: 'none',
+      isOverBackground: 'solid'
+    },
+    outlineColor: '--s2-container-bg',
+    outlineWidth: {
+      default: 1,
+      isLarge: 2
+    }
   },
-  outlineColor: '--s2-container-bg',
-  outlineWidth: {
-    default: 1,
-    isLarge: 2
-  }
-}, getAllowedOverrides({width: false}));
+  getAllowedOverrides({width: false})
+);
 
-export const AvatarContext = createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
+export const AvatarContext =
+  createContext<ContextValue<Partial<AvatarProps>, DOMRefValue<HTMLImageElement>>>(null);
 
 /**
  * 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>) {
+export const Avatar = forwardRef(function Avatar(
+  props: AvatarProps,
+  ref: DOMRef<HTMLImageElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);
   let domRef = useDOMRef(ref);
   let {
@@ -91,8 +103,9 @@ export const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef
         width: remSize,
         height: remSize
       }}
-      UNSAFE_className={UNSAFE_className + ' ' +  centerBaselineBefore}
+      UNSAFE_className={UNSAFE_className + ' ' + centerBaselineBefore}
       styles={imageStyles({isOverBackground, isLarge}, props.styles)}
-      src={src} />
+      src={src}
+    />
   );
 });

package/src/AvatarGroup.tsx

@@ -15,7 +15,11 @@ import {AvatarContext} from './Avatar';
 import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {createContext, CSSProperties, forwardRef, ReactNode} from 'react';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
-import {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  StylesPropWithoutWidth,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useLabel} from 'react-aria/useLabel';
@@ -23,19 +27,21 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {
   /** Avatar children of the avatar group. */
-  children: ReactNode,
+  children: ReactNode;
   /** The label for the avatar group. */
-  label?: string,
+  label?: string;
   /**
    * The size of the avatar group.
+   *
    * @default 24
    */
-  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,
+  size?: 16 | 20 | 24 | 28 | 32 | 36 | 40;
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithoutWidth
+  styles?: StylesPropWithoutWidth;
 }
 
-export const AvatarGroupContext = createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const AvatarGroupContext =
+  createContext<ContextValue<Partial<AvatarGroupProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const avatar = style({
   marginStart: {
@@ -60,15 +66,21 @@ const text = style({
   }
 });
 
-const container = style({
-  display: 'flex',
-  alignItems: 'center'
-}, getAllowedOverrides({width: false}));
+const container = style(
+  {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  getAllowedOverrides({width: false})
+);
 
 /**
  * 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>) {
+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;
@@ -85,12 +97,18 @@ export const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupPro
         {...fieldProps}
         role="group"
         className={(UNSAFE_className ?? '') + container(null, styles)}
-        style={{
-          ...UNSAFE_style,
-          '--size': size / 16 + 'rem'
-        } as CSSProperties}>
+        style={
+          {
+            ...UNSAFE_style,
+            '--size': size / 16 + 'rem'
+          } as CSSProperties
+        }>
         {children}
-        {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}
+        {label && (
+          <span {...labelProps} className={text({size: String(size)})}>
+            {label}
+          </span>
+        )}
       </div>
     </AvatarContext.Provider>
   );