@react-spectrum/s2 1.3.1 → 1.5.0

package/src/FullscreenDialog.tsx

@@ -27,14 +27,18 @@ import {StyleProps} from './style-utils';
 import {useDOMRef} from './useDOMRef';
 
 // TODO: what style overrides should be allowed?
-export interface FullscreenDialogProps extends Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, StyleProps {
+export interface FullscreenDialogProps
+  extends
+    Omit<RACDialogProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
+    StyleProps {
   /**
    * The variant of fullscreen dialog to display.
-   * @default "fullscreen"
+   *
+   * @default 'fullscreen'
    */
-  variant?: 'fullscreen' | 'fullscreenTakeover',
+  variant?: 'fullscreen' | 'fullscreenTakeover';
   /** Whether pressing the escape key to close the dialog should be disabled. */
-  isKeyboardDismissDisabled?: boolean
+  isKeyboardDismissDisabled?: boolean;
 }
 
 const heading = style({
@@ -53,7 +57,7 @@ const header = style({
   font: 'body'
 });
 
-const content =  style({
+const content = style({
   gridArea: 'content',
   flexGrow: 1,
   overflowY: {
@@ -74,38 +78,16 @@ export const dialogInner = style({
   display: 'grid',
   gridTemplateAreas: {
     // Button group moves to the bottom on small screens.
-    default: [
-      'heading',
-      'header',
-      '.',
-      'content',
-      '.',
-      'buttons'
-    ],
-    sm: [
-      'heading header buttons',
-      '. . .',
-      'content content content'
-    ]
+    default: ['heading', 'header', '.', 'content', '.', 'buttons'],
+    sm: ['heading header buttons', '. . .', 'content content content']
   },
   gridTemplateColumns: {
     default: ['1fr'],
     sm: ['auto', '1fr', 'auto']
   },
   gridTemplateRows: {
-    default: [
-      'auto',
-      'auto',
-      24,
-      '1fr',
-      24,
-      'auto'
-    ],
-    sm: [
-      'auto',
-      32,
-      '1fr'
-    ]
+    default: ['auto', 'auto', 24, '1fr', 24, 'auto'],
+    sm: ['auto', 32, '1fr']
   },
   padding: {
     default: 24,
@@ -125,22 +107,26 @@ export const dialogInner = style({
 });
 
 /**
- * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
+ * Takeover dialogs are large types of dialogs. They use the totality of the screen and should be
+ * used for modal experiences with complex workflows.
  */
-export const FullscreenDialog = forwardRef(function FullscreenDialog(props: FullscreenDialogProps, ref: DOMRef) {
+export const FullscreenDialog = forwardRef(function FullscreenDialog(
+  props: FullscreenDialogProps,
+  ref: DOMRef
+) {
   let {variant = 'fullscreen', isKeyboardDismissDisabled} = props;
   let domRef = useDOMRef(ref);
 
   return (
-    (<Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
+    <Modal size={variant} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
       <RACDialog
         {...props}
         ref={domRef}
         style={props.UNSAFE_style}
         className={(props.UNSAFE_className || '') + dialogInner}>
-        {composeRenderProps(props.children, (children) => (
+        {composeRenderProps(props.children, children => (
           // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
-          (<OverlayTriggerStateContext.Provider value={null}>
+          <OverlayTriggerStateContext.Provider value={null}>
             <Provider
               values={[
                 [HeadingContext, {styles: heading}],
@@ -150,10 +136,9 @@ export const FullscreenDialog = forwardRef(function FullscreenDialog(props: Full
               ]}>
               {children}
             </Provider>
-          </OverlayTriggerStateContext.Provider>)
+          </OverlayTriggerStateContext.Provider>
         ))}
       </RACDialog>
-    </Modal>)
+    </Modal>
   );
 });
-

package/src/Icon.tsx

@@ -11,7 +11,15 @@
  */
 
 import {AriaLabelingProps, DOMProps} from '@react-types/shared';
-import {ComponentType, Context, createContext, FunctionComponent, ReactNode, SVGProps, useRef} from 'react';
+import {
+  ComponentType,
+  Context,
+  createContext,
+  FunctionComponent,
+  ReactNode,
+  SVGProps,
+  useRef
+} from 'react';
 import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {mergeStyles} from '../style/runtime';
 import {SkeletonWrapper, useSkeletonIcon} from './Skeleton';
@@ -56,39 +64,51 @@ const allowedOverrides = [
 type AllowedOverrides = Exclude<(typeof allowedOverrides)[number], '--iconPrimary' | 'size'>;
 
 export interface IconProps extends UnsafeStyles, SlotProps, AriaLabelingProps, DOMProps {
-  'aria-hidden'?: boolean | 'false' | 'true',
-  styles?: StyleString<AllowedOverrides>
+  'aria-hidden'?: boolean | 'false' | 'true';
+  styles?: StyleString<AllowedOverrides>;
 }
 
 export interface IconContextValue extends UnsafeStyles, SlotProps {
-  styles?: StyleString,
-  render?: (icon: ReactNode) => ReactNode
+  styles?: StyleString;
+  render?: (icon: ReactNode) => ReactNode;
 }
 
 export interface IllustrationProps extends UnsafeStyles, SlotProps, AriaLabelingProps, DOMProps {
-  'aria-hidden'?: boolean | 'false' | 'true',
-  size?: 'S' | 'M' | 'L',
-  styles?: StyleString<AllowedOverrides>
+  'aria-hidden'?: boolean | 'false' | 'true';
+  size?: 'S' | 'M' | 'L';
+  styles?: StyleString<AllowedOverrides>;
 }
 
 export interface IllustrationContextValue extends IconContextValue {
-  size?: 'S' | 'M' | 'L'
+  size?: 'S' | 'M' | 'L';
 }
 
 export const IconContext = createContext<ContextValue<Partial<IconContextValue>, SVGElement>>({});
-export const IllustrationContext = createContext<ContextValue<Partial<IllustrationContextValue>, SVGElement>>({});
-
-const iconStyles = style({
-  size: 20,
-  flexShrink: 0
-}, allowedOverrides);
+export const IllustrationContext = createContext<
+  ContextValue<Partial<IllustrationContextValue>, SVGElement>
+>({});
+
+const iconStyles = style(
+  {
+    size: 20,
+    flexShrink: 0
+  },
+  allowedOverrides
+);
 
-export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, context: Context<ContextValue<IconContextValue, SVGElement>> = IconContext): FunctionComponent<IconProps> {
+export function createIcon(
+  Component: ComponentType<SVGProps<SVGSVGElement>>,
+  context: Context<ContextValue<IconContextValue, SVGElement>> = IconContext
+): FunctionComponent<IconProps> {
   return (props: IconProps) => {
     let ref = useRef<SVGElement>(null);
     let ctx;
     // TODO: remove this default once we release RAC and use DEFAULT_SLOT.
-    [ctx, ref] = useSpectrumContextProps({slot: props.slot || 'icon'} as IconContextValue, ref, context);
+    [ctx, ref] = useSpectrumContextProps(
+      {slot: props.slot || 'icon'} as IconContextValue,
+      ref,
+      context
+    );
     let {render, styles: ctxStyles} = ctx;
     let {
       UNSAFE_className,
@@ -110,11 +130,16 @@ export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, co
           {...otherProps}
           focusable={false}
           aria-label={ariaLabel}
-          aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
+          aria-hidden={ariaLabel ? ariaHidden || undefined : true}
           role="img"
           data-slot={slot}
-          className={(UNSAFE_className ?? '') + ' ' + useSkeletonIcon(mergeStyles(iconStyles(null, styles), ctxStyles))}
-          style={UNSAFE_style} />
+          className={
+            (UNSAFE_className ?? '') +
+            ' ' +
+            useSkeletonIcon(mergeStyles(iconStyles(null, styles), ctxStyles))
+          }
+          style={UNSAFE_style}
+        />
       </SkeletonWrapper>
     );
 
@@ -126,22 +151,31 @@ export function createIcon(Component: ComponentType<SVGProps<SVGSVGElement>>, co
   };
 }
 
-const illustrationStyles = style({
-  size: {
+const illustrationStyles = style(
+  {
     size: {
-      S: 48,
-      M: 96,
-      L: 160
-    }
+      size: {
+        S: 48,
+        M: 96,
+        L: 160
+      }
+    },
+    flexShrink: 0
   },
-  flexShrink: 0
-}, allowedOverrides);
+  allowedOverrides
+);
 
-export function createIllustration(Component: ComponentType<SVGProps<SVGSVGElement>>): FunctionComponent<IllustrationProps> {
+export function createIllustration(
+  Component: ComponentType<SVGProps<SVGSVGElement>>
+): FunctionComponent<IllustrationProps> {
   return (props: IllustrationProps) => {
     let ref = useRef<SVGElement>(null);
     let ctx;
-    [ctx, ref] = useSpectrumContextProps({slot: props.slot || 'icon'} as IconContextValue, ref, IllustrationContext);
+    [ctx, ref] = useSpectrumContextProps(
+      {slot: props.slot || 'icon'} as IconContextValue,
+      ref,
+      IllustrationContext
+    );
     let {styles: ctxStyles} = ctx;
     let {
       UNSAFE_className,
@@ -167,11 +201,14 @@ export function createIllustration(Component: ComponentType<SVGProps<SVGSVGEleme
         size={size}
         focusable={false}
         aria-label={ariaLabel}
-        aria-hidden={ariaLabel ? (ariaHidden || undefined) : true}
+        aria-hidden={ariaLabel ? ariaHidden || undefined : true}
         role="img"
         data-slot={slot}
-        className={(UNSAFE_className ?? '') + ' ' + illustrationStyles({size}, styles) + (ctxStyles || '')}
-        style={UNSAFE_style} />
+        className={
+          (UNSAFE_className ?? '') + ' ' + illustrationStyles({size}, styles) + (ctxStyles || '')
+        }
+        style={UNSAFE_style}
+      />
     );
 
     if (render) {

package/src/IllustratedMessage.tsx

@@ -13,7 +13,12 @@
 import {ButtonGroupContext} from './ButtonGroup';
 import {ContentContext, HeadingContext} from './Content';
 import {ContextValue, Provider} from 'react-aria-components/slots';
-import {controlFont, getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  controlFont,
+  getAllowedOverrides,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
@@ -28,79 +33,85 @@ interface IllustratedMessageStyleProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L',
+  size?: 'S' | 'M' | 'L';
   /**
    * The direction that the IllustratedMessage should be laid out in.
    *
    * @default 'vertical'
    */
-  orientation?: 'horizontal' | 'vertical'
+  orientation?: 'horizontal' | 'vertical';
 }
 
-interface S2SpectrumIllustratedMessageProps extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {
+interface S2SpectrumIllustratedMessageProps
+  extends DOMProps, UnsafeStyles, IllustratedMessageStyleProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
+  styles?: StylesPropWithHeight;
   /** The content to display in the IllustratedMessage. */
-  children: ReactNode
+  children: ReactNode;
 }
 
-const illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>({
-  display: 'grid',
-  font: controlFont(),
-  maxWidth: {
-    orientation: {
-      vertical: 380,
-      horizontal: 528 // ask design about max width for horizontal because doesn't look great when L
+const illustratedMessage = style<IllustratedMessageStyleProps & {isInDropZone?: boolean}>(
+  {
+    display: 'grid',
+    font: controlFont(),
+    maxWidth: {
+      orientation: {
+        vertical: 380,
+        horizontal: 528 // ask design about max width for horizontal because doesn't look great when L
+      }
+    },
+    gridTemplateAreas: {
+      orientation: {
+        vertical: [
+          '   .  illustration .   ',
+          '   .       .       .   ',
+          'heading heading heading',
+          '   .       .       .   ',
+          'content content content',
+          '   .  buttonGroup  .   '
+        ],
+        horizontal: [
+          'illustration . heading',
+          'illustration .    .   ',
+          'illustration . content',
+          'illustration . buttonGroup'
+        ]
+      }
+    },
+    gridTemplateRows: {
+      orientation: {
+        vertical: {
+          default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],
+          size: {
+            L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']
+          }
+        },
+        horizontal: ['1fr', 4, '1fr']
+      }
+    },
+    gridTemplateColumns: {
+      orientation: {
+        horizontal: ['1fr', 12, 'auto']
+      }
+    },
+    justifyItems: {
+      orientation: {
+        vertical: 'center',
+        horizontal: 'start'
+      }
+    },
+    textAlign: {
+      orientation: {
+        vertical: 'center'
+      }
     }
   },
-  gridTemplateAreas: {
-    orientation: {
-      vertical: [
-        '   .  illustration .   ',
-        '   .       .       .   ',
-        'heading heading heading',
-        '   .       .       .   ',
-        'content content content',
-        '   .  buttonGroup  .   '
-      ],
-      horizontal: [
-        'illustration . heading',
-        'illustration .    .   ',
-        'illustration . content',
-        'illustration . buttonGroup'
-      ]
-    }
-  },
-  gridTemplateRows: {
-    orientation: {
-      vertical: {
-        default: ['min-content', 12, 'min-content', 4, 'min-content', 'min-content'],
-        size: {
-          L: ['min-content', 8, 'min-content', 4, 'min-content', 'min-content']
-        }
-      },
-      horizontal: ['1fr', 4, '1fr']
-    }
-  },
-  gridTemplateColumns: {
-    orientation: {
-      horizontal: ['1fr', 12, 'auto']
-    }
-  },
-  justifyItems: {
-    orientation: {
-      vertical: 'center',
-      horizontal: 'start'
-    }
-  },
-  textAlign: {
-    orientation: {
-      vertical: 'center'
-    }
-  }
-}, getAllowedOverrides({height: true}));
+  getAllowedOverrides({height: true})
+);
 
-const illustration = style<IllustratedMessageStyleProps & {isInDropZone?: boolean, isDropTarget?: boolean}>({
+const illustration = style<
+  IllustratedMessageStyleProps & {isInDropZone?: boolean; isDropTarget?: boolean}
+>({
   gridArea: 'illustration',
   alignSelf: 'center',
   '--iconPrimary': {
@@ -143,17 +154,23 @@ const buttonGroup = style({
 });
 
 interface IllustratedMessageContextProps extends Partial<S2SpectrumIllustratedMessageProps> {
-  isInDropZone?: boolean,
-  isDropTarget?: boolean
+  isInDropZone?: boolean;
+  isDropTarget?: boolean;
 }
 
-export const IllustratedMessageContext = createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const IllustratedMessageContext =
+  createContext<ContextValue<Partial<IllustratedMessageContextProps>, DOMRefValue<HTMLDivElement>>>(
+    null
+  );
 
 /**
  * An IllustratedMessage displays an illustration and a message, usually
  * for an empty state or an error page.
  */
-export const IllustratedMessage = /*#__PURE__*/ forwardRef(function IllustratedMessage(props: S2SpectrumIllustratedMessageProps, ref: DOMRef<HTMLDivElement>) {
+export const IllustratedMessage = /*#__PURE__*/ forwardRef(function IllustratedMessage(
+  props: S2SpectrumIllustratedMessageProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, IllustratedMessageContext);
   let domRef = useDOMRef(ref);
   let {
@@ -171,16 +188,28 @@ export const IllustratedMessage = /*#__PURE__*/ forwardRef(function IllustratedM
     <div
       {...filterDOMProps(otherProps)}
       style={UNSAFE_style}
-      className={UNSAFE_className + illustratedMessage({
-        size: props.size || 'M',
-        orientation: props.orientation || 'vertical'
-      }, props.styles)}
+      className={
+        UNSAFE_className +
+        illustratedMessage(
+          {
+            size: props.size || 'M',
+            orientation: props.orientation || 'vertical'
+          },
+          props.styles
+        )
+      }
       ref={domRef}>
       <Provider
         values={[
           [HeadingContext, {styles: heading({orientation, size})}],
           [ContentContext, {styles: content({size})}],
-          [IllustrationContext, {size: size === 'L' ? 'L' : 'M', styles: illustration({orientation, size, isInDropZone, isDropTarget})}],
+          [
+            IllustrationContext,
+            {
+              size: size === 'L' ? 'L' : 'M',
+              styles: illustration({orientation, size, isInDropZone, isDropTarget})
+            }
+          ],
           [ButtonGroupContext, {styles: buttonGroup}]
         ]}>
         {children}