@react-spectrum/s2 1.3.0 → 1.4.0

package/src/Dialog.tsx

@@ -29,19 +29,22 @@ import {StyleProps} from './style-utils';
 import {useDOMRef} from './useDOMRef';
 
 // TODO: what style overrides should be allowed?
-export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
+export interface DialogProps
+  extends
+    Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
+    StyleProps {
   /**
    * Whether the Dialog is dismissible.
    */
-  isDismissible?: boolean,
+  isDismissible?: boolean;
   /**
    * The size of the Dialog.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /** Whether pressing the escape key to close the dialog should be disabled. */
-  isKeyboardDismissDisabled?: boolean
+  isKeyboardDismissDisabled?: boolean;
 }
 
 const image = style({
@@ -61,7 +64,7 @@ const header = style({
   font: 'body'
 });
 
-const content =  style({
+const content = style({
   flexGrow: 1,
   flexShrink: {
     [`@container (height < ${500 / 16}rem)`]: 0
@@ -101,25 +104,29 @@ export const dialogInner = style({
 });
 
 /**
- * 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.
+ * 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);
 
   return (
-    (<Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
+    <Modal
+      size={size}
+      isDismissable={isDismissible}
+      isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
       <RACDialog
         {...props}
         ref={domRef}
         style={props.UNSAFE_style}
         className={(props.UNSAFE_className || '') + dialogInner}>
-        {composeRenderProps(props.children, (children) => (
+        {composeRenderProps(props.children, children => (
           // Render the children multiple times inside the wrappers we need to implement the layout.
           // Each instance hides certain children so that they are all rendered in the correct locations.
           // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
-          (<OverlayTriggerStateContext.Provider value={null}>
+          <OverlayTriggerStateContext.Provider value={null}>
             {/* Hero image */}
             <Provider
               values={[
@@ -187,9 +194,7 @@ export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef
                   {children}
                 </Provider>
               </div>
-              {props.isDismissible &&
-                <CloseButton styles={style({marginBottom: 12})} />
-              }
+              {props.isDismissible && <CloseButton styles={style({marginBottom: 12})} />}
             </div>
             {/* Main content */}
             <Provider
@@ -228,14 +233,17 @@ export const Dialog = forwardRef(function Dialog(props: DialogProps, ref: DOMRef
                   [HeaderContext, {isHidden: true}],
                   [ContentContext, {isHidden: true}],
                   [FooterContext, {styles: footer}],
-                  [ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]
+                  [
+                    ButtonGroupContext,
+                    {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}
+                  ]
                 ]}>
                 {children}
               </Provider>
             </div>
-          </OverlayTriggerStateContext.Provider>)
+          </OverlayTriggerStateContext.Provider>
         ))}
       </RACDialog>
-    </Modal>)
+    </Modal>
   );
 });

package/src/DialogContainer.tsx

@@ -17,9 +17,9 @@ import {useSlottedContext} from 'react-aria-components/slots';
 
 export interface DialogContainerProps {
   /** The Dialog to display, if any. */
-  children: ReactNode,
+  children: ReactNode;
   /** Handler that is called when the 'x' button of a dismissable Dialog is clicked. */
-  onDismiss: () => void
+  onDismiss: () => void;
 }
 
 /**
@@ -28,10 +28,7 @@ export interface DialogContainerProps {
  * or when the trigger unmounts while the dialog is open.
  */
 export function DialogContainer(props: DialogContainerProps): ReactNode {
-  let {
-    children,
-    onDismiss
-  } = props;
+  let {children, onDismiss} = props;
 
   let childArray = React.Children.toArray(children);
   if (childArray.length > 1) {
@@ -70,7 +67,7 @@ export interface DialogContainerValue {
   /**
    * A handler to programmatically dismiss the dialog.
    */
-  dismiss(): void
+  dismiss(): void;
 }
 
 export function useDialogContainer(): DialogContainerValue {

package/src/DialogTrigger.tsx

@@ -20,18 +20,16 @@ import {ReactNode} from 'react';
 export interface DialogTriggerProps extends AriaDialogTriggerProps {}
 
 /**
- * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
- * open state with the trigger's press state. Additionally, it allows you to customize the type and
- * positioning of the Dialog.
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the
+ * Dialog's open state with the trigger's press state. Additionally, it allows you to customize the
+ * type and positioning of the Dialog.
  */
 export function DialogTrigger(props: DialogTriggerProps): ReactNode {
   return (
     <AriaDialogTrigger {...props}>
       {/* RAC sets isPressed via PressResponder when the dialog is open.
           We don't want press scaling to appear to get "stuck", so override this. */}
-      <PressResponder isPressed={false}>
-        {props.children}
-      </PressResponder>
+      <PressResponder isPressed={false}>{props.children}</PressResponder>
     </AriaDialogTrigger>
   );
 }

package/src/Disclosure.tsx

@@ -11,8 +11,22 @@
  */
 
 import {ActionButtonContext} from './ActionButton';
-import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
-import {baseColor, centerPadding, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
+import {
+  AriaLabelingProps,
+  DOMProps,
+  DOMRef,
+  DOMRefValue,
+  forwardRefType,
+  GlobalDOMAttributes
+} from '@react-types/shared';
+import {
+  baseColor,
+  centerPadding,
+  focusRing,
+  lightDark,
+  space,
+  style
+} from '../style' with {type: 'macro'};
 import {Button} from 'react-aria-components/Button';
 import {CenterBaseline} from './CenterBaseline';
 
@@ -34,70 +48,77 @@ import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface DisclosureProps extends Omit<RACDisclosureProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, StyleProps {
+export interface DisclosureProps
+  extends
+    Omit<
+      RACDisclosureProps,
+      'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes
+    >,
+    StyleProps {
   /**
    * The size of the disclosure.
+   *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /**
    * The amount of space between the disclosures.
+   *
    * @default 'regular'
    */
-  density?: 'compact' | 'regular' | 'spacious',
+  density?: 'compact' | 'regular' | 'spacious';
   /** Whether the disclosure should be displayed with a quiet style. */
-  isQuiet?: boolean,
+  isQuiet?: boolean;
   /** The contents of the disclosure, consisting of a DisclosureTitle and DisclosurePanel. */
-  children: ReactNode
+  children: ReactNode;
 }
 
-export const DisclosureContext = createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const DisclosureContext =
+  createContext<ContextValue<Partial<DisclosureProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-const disclosure = style({
-  color: 'heading',
-  borderTopWidth: {
-    default: 1,
-    isQuiet: 0
-  },
-  borderBottomWidth: {
-    default: 1,
-    isQuiet: 0,
-    isInGroup: {
-      default: 0,
-      ':last-child': {
-        default: 1,
-        isQuiet: 0
+const disclosure = style(
+  {
+    color: 'heading',
+    borderTopWidth: {
+      default: 1,
+      isQuiet: 0
+    },
+    borderBottomWidth: {
+      default: 1,
+      isQuiet: 0,
+      isInGroup: {
+        default: 0,
+        ':last-child': {
+          default: 1,
+          isQuiet: 0
+        }
       }
-    }
+    },
+    borderStartWidth: 0,
+    borderEndWidth: 0,
+    borderStyle: 'solid',
+    borderColor: 'gray-200',
+    minWidth: 200
   },
-  borderStartWidth: 0,
-  borderEndWidth: 0,
-  borderStyle: 'solid',
-  borderColor: 'gray-200',
-  minWidth: 200
-}, getAllowedOverrides());
+  getAllowedOverrides()
+);
 
 /**
- * A disclosure is a collapsible section of content. It is composed of a header with a heading and trigger button, and a panel that contains the content.
+ * A disclosure is a collapsible section of content. It is composed of 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>) {
+export const Disclosure = forwardRef(function Disclosure(
+  props: DisclosureProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, DisclosureContext);
-  let {
-    size = 'M',
-    density = 'regular',
-    isQuiet,
-    UNSAFE_style,
-    UNSAFE_className = ''
-  } = props;
+  let {size = 'M', density = 'regular', isQuiet, UNSAFE_style, UNSAFE_className = ''} = props;
   let domRef = useDOMRef(ref);
 
   let isInGroup = useContext(DisclosureContext) !== null;
 
   return (
-    <Provider
-      values={[
-        [DisclosureContext, {size, isQuiet, density}]
-      ]}>
+    <Provider values={[[DisclosureContext, {size, isQuiet, density}]]}>
       <RACDisclosure
         {...props}
         ref={domRef}
@@ -110,17 +131,18 @@ export const Disclosure = forwardRef(function Disclosure(props: DisclosureProps,
 });
 
 export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
-  /** The heading level of the disclosure header.
+  /**
+   * The heading level of the disclosure header.
    *
    * @default 3
    */
-  level?: number,
+  level?: number;
   /** The contents of the disclosure header. */
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 const headingStyle = style({
@@ -227,16 +249,12 @@ const chevronStyles = style({
 const InternalDisclosureHeader = createContext<{} | null>(null);
 
 function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivElement>) {
-  let {
-    UNSAFE_className,
-    UNSAFE_style,
-    children
-  } = props;
+  let {UNSAFE_className, UNSAFE_style, children} = props;
   let domRef = useDOMRef(ref);
   let {size, isQuiet, density} = useSlottedContext(DisclosureContext)!;
 
   // Shift button size down by 2 for compact density, 1 for regular/spacious to ensure there is space between the top and bottom of the action button and container
-  let newSize : 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;
+  let newSize: 'XS' | 'S' | 'M' | 'L' | 'XL' | undefined = size;
   const sizes = ['XS', 'S', 'M', 'L', 'XL'];
   const currentIndex = sizes.indexOf(size ?? 'M');
   const shift = density === 'compact' ? 2 : 1;
@@ -250,7 +268,9 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
       ]}>
       <div
         style={UNSAFE_style}
-        className={(UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})}
+        className={
+          (UNSAFE_className ?? '') + style({display: 'flex', alignItems: 'center', gap: 4})
+        }
         ref={domRef}>
         {children}
       </div>
@@ -259,20 +279,21 @@ function DisclosureHeaderWithForwardRef(props: DisclosureHeaderProps, ref: DOMRe
 }
 
 /**
- * A wrapper element for the disclosure title that can contain other elements not part of the trigger.
+ * A wrapper element for the disclosure title that can contain other elements not part of the
+ * trigger.
  */
-export const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeaderWithForwardRef);
+export const DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(
+  DisclosureHeaderWithForwardRef
+);
 
 /**
  * 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,
-    UNSAFE_className = '',
-    ...otherProps
-  } = props;
+export const DisclosureTitle = forwardRef(function DisclosureTitle(
+  props: DisclosureTitleProps,
+  ref: DOMRef<HTMLDivElement>
+) {
+  let {level = 3, UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;
   let domRef = useDOMRef(ref);
   const domProps = filterDOMProps(otherProps);
   let {direction} = useLocale();
@@ -287,7 +308,9 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(props: Disclo
       ref={domRef}
       style={UNSAFE_style}
       className={(UNSAFE_className ?? '') + headingStyle}>
-      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot="trigger">
+      <Button
+        className={renderProps => buttonStyles({...renderProps, size, density, isQuiet})}
+        slot="trigger">
         <CenterBaseline>
           <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden="true" />
         </CenterBaseline>
@@ -300,15 +323,16 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(props: Disclo
     return buttonTrigger;
   }
 
-  return (
-    <DisclosureHeader>
-      {buttonTrigger}
-    </DisclosureHeader>
-  );
+  return <DisclosureHeader>{buttonTrigger}</DisclosureHeader>;
 });
 
-export interface DisclosurePanelProps extends Omit<RACDisclosurePanelProps, 'className' | 'style' | 'render' | 'children'>, UnsafeStyles, DOMProps, AriaLabelingProps {
-  children: React.ReactNode
+export interface DisclosurePanelProps
+  extends
+    Omit<RACDisclosurePanelProps, 'className' | 'style' | 'render' | 'children'>,
+    UnsafeStyles,
+    DOMProps,
+    AriaLabelingProps {
+  children: React.ReactNode;
 }
 
 const panelStyles = style({
@@ -335,14 +359,14 @@ const panelInner = style({
 });
 
 /**
- * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
+ * 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 = '',
-    ...otherProps
-  } = props;
+export const DisclosurePanel = forwardRef(function DisclosurePanel(
+  props: DisclosurePanelProps,
+  ref: DOMRef<HTMLDivElement>
+) {
+  let {UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;
   const domProps = filterDOMProps(otherProps);
   let {size} = useSlottedContext(DisclosureContext)!;
   let panelRef = useDOMRef(ref);
@@ -352,9 +376,7 @@ export const DisclosurePanel = forwardRef(function DisclosurePanel(props: Disclo
       ref={panelRef}
       style={UNSAFE_style}
       className={(UNSAFE_className ?? '') + panelStyles}>
-      <div className={panelInner({size})}>
-        {props.children}
-      </div>
+      <div className={panelInner({size})}>{props.children}</div>
     </RACDisclosurePanel>
   );
 });

package/src/Divider.tsx

@@ -15,7 +15,10 @@ import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef} from 'react';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};
-import {Separator as RACSeparator, SeparatorProps as RACSeparatorProps} from 'react-aria-components/Separator';
+import {
+  Separator as RACSeparator,
+  SeparatorProps as RACSeparatorProps
+} from 'react-aria-components/Separator';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -27,68 +30,80 @@ import {useSpectrumContextProps} from './useSpectrumContextProps';
 interface DividerSpectrumProps {
   /**
    * How thick the Divider should be.
+   *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L',
+  size?: 'S' | 'M' | 'L';
   /**
    * The orientation of the Divider.
+   *
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical',
+  orientation?: 'horizontal' | 'vertical';
   /** The static color style to apply. Useful when the Divider appears over a color background. */
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black' | 'auto';
 }
 
 // TODO: allow overriding height (only when orientation is vertical)??
-export interface DividerProps extends DividerSpectrumProps, Omit<RACSeparatorProps, 'className' | 'style' | 'render' | 'elementType' | keyof GlobalDOMAttributes>, StyleProps {}
+export interface DividerProps
+  extends
+    DividerSpectrumProps,
+    Omit<
+      RACSeparatorProps,
+      'className' | 'style' | 'render' | 'elementType' | keyof GlobalDOMAttributes
+    >,
+    StyleProps {}
 
 export const DividerContext = createContext<ContextValue<Partial<DividerProps>, DOMRefValue>>(null);
 
-export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>({
-  ...staticColor(),
-  alignSelf: 'stretch',
-  backgroundColor: {
-    default: 'gray-200',
-    size: {
-      L: 'gray-800'
-    },
-    isStaticColor: {
-      default: 'transparent-overlay-200',
+export const divider = style<DividerSpectrumProps & {isStaticColor: boolean}>(
+  {
+    ...staticColor(),
+    alignSelf: 'stretch',
+    backgroundColor: {
+      default: 'gray-200',
       size: {
-        L: 'transparent-overlay-800'
-      }
-    },
-    forcedColors: 'ButtonBorder'
-  },
-  borderStyle: 'none',
-  borderRadius: 'full',
-  margin: 0,
-  flexGrow: 0,
-  flexShrink: 0,
-  height: {
-    orientation: {
-      horizontal: {
-        // These should be px not rems, because we're emulating a border.
-        default: '[2px]',
+        L: 'gray-800'
+      },
+      isStaticColor: {
+        default: 'transparent-overlay-200',
         size: {
-          S: '[1px]',
-          L: '[4px]'
+          L: 'transparent-overlay-800'
+        }
+      },
+      forcedColors: 'ButtonBorder'
+    },
+    borderStyle: 'none',
+    borderRadius: 'full',
+    margin: 0,
+    flexGrow: 0,
+    flexShrink: 0,
+    height: {
+      orientation: {
+        horizontal: {
+          // These should be px not rems, because we're emulating a border.
+          default: '[2px]',
+          size: {
+            S: '[1px]',
+            L: '[4px]'
+          }
         }
       }
-    }
-  },
-  width: {
-    orientation: {
-      vertical: {
-        default: '[2px]',
-        size: {
-          S: '[1px]',
-          L: '[4px]'
+    },
+    width: {
+      orientation: {
+        vertical: {
+          default: '[2px]',
+          size: {
+            S: '[1px]',
+            L: '[4px]'
+          }
         }
       }
     }
-  }
-}, getAllowedOverrides());
+  },
+  getAllowedOverrides()
+);
 
 /**
  * Dividers bring clarity to a layout by grouping and dividing content in close proximity.
@@ -103,11 +118,18 @@ export const Divider = /*#__PURE__*/ forwardRef(function Divider(props: DividerP
       {...props}
       ref={domRef}
       style={props.UNSAFE_style}
-      className={(props.UNSAFE_className || '') + divider({
-        size: props.size || 'M',
-        orientation: props.orientation || 'horizontal',
-        staticColor: props.staticColor,
-        isStaticColor: !!props.staticColor
-      }, props.styles)} />
+      className={
+        (props.UNSAFE_className || '') +
+        divider(
+          {
+            size: props.size || 'M',
+            orientation: props.orientation || 'horizontal',
+            staticColor: props.staticColor,
+            isStaticColor: !!props.staticColor
+          },
+          props.styles
+        )
+      }
+    />
   );
 });