@react-spectrum/s2 1.3.1 → 1.5.0

package/src/Meter.tsx

@@ -12,7 +12,7 @@
 
 import {Meter as AriaMeter, MeterProps as AriaMeterProps} from 'react-aria-components/Meter';
 
-import {bar, track} from './bar-utils'  with {type: 'macro'};
+import {bar, track} from './bar-utils' with {type: 'macro'};
 import {ContextValue} from 'react-aria-components/slots';
 import {createContext, forwardRef, ReactNode} from 'react';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes, LabelPosition} from '@react-types/shared';
@@ -25,37 +25,48 @@ import {useDOMRef} from './useDOMRef';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 interface MeterStyleProps {
-  /** The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.
+  /**
+   * The [visual style](https://spectrum.adobe.com/page/meter/#-Options) of the Meter.
+   *
    * @default 'informative'
    */
-  variant?: 'informative' | 'positive' | 'notice' | 'negative',
+  variant?: 'informative' | 'positive' | 'notice' | 'negative';
   /**
    * The size of the Meter.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /**
    * The static color style to apply. Useful when the button appears over a color background.
    */
-  staticColor?: 'white' | 'black' | 'auto',
+  staticColor?: 'white' | 'black' | 'auto';
   /**
    * The label's overall position relative to the element it is labeling.
+   *
    * @default 'top'
    */
-  labelPosition?: LabelPosition
+  labelPosition?: LabelPosition;
 }
 
-export interface MeterProps extends Omit<AriaMeterProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, MeterStyleProps, StyleProps {
+export interface MeterProps
+  extends
+    Omit<AriaMeterProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
+    MeterStyleProps,
+    StyleProps {
   /** The content to display as the label. */
-  label?: ReactNode
+  label?: ReactNode;
 }
 
-export const MeterContext = createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const MeterContext =
+  createContext<ContextValue<Partial<MeterProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-const wrapper = style({
-  ...bar()
-}, getAllowedOverrides());
+const wrapper = style(
+  {
+    ...bar()
+  },
+  getAllowedOverrides()
+);
 
 const valueStyles = style({
   ...fieldLabel(),
@@ -117,19 +128,38 @@ export const Meter = forwardRef(function Meter(props: MeterProps, ref: DOMRef<HT
       {...groupProps}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + wrapper({
-        size,
-        variant,
-        staticColor,
-        labelPosition
-      }, styles)}>
+      className={
+        UNSAFE_className +
+        wrapper(
+          {
+            size,
+            variant,
+            staticColor,
+            labelPosition
+          },
+          styles
+        )
+      }>
       {({percentage, valueText}) => (
         <>
-          {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>}
+          {label && (
+            <FieldLabel
+              size={size}
+              labelAlign="start"
+              labelPosition={labelPosition}
+              staticColor={staticColor}>
+              {label}
+            </FieldLabel>
+          )}
+          {label && (
+            <Text styles={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</Text>
+          )}
           <SkeletonWrapper>
             <div className={trackStyles({isStaticColor, size})}>
-              <div className={fillStyles({isStaticColor, variant})} style={{width: percentage + '%'}} />
+              <div
+                className={fillStyles({isStaticColor, variant})}
+                style={{width: percentage + '%'}}
+              />
             </div>
           </SkeletonWrapper>
         </>

package/src/Modal.tsx

@@ -18,13 +18,16 @@ import {setColorScheme, style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 
-interface ModalProps extends Omit<ModalOverlayProps, 'className' | 'style' | 'render' | keyof GlobalDOMAttributes> {
+interface ModalProps extends Omit<
+  ModalOverlayProps,
+  'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+> {
   /**
    * The size of the Modal.
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover'
+  size?: 'S' | 'M' | 'L' | 'XL' | 'fullscreen' | 'fullscreenTakeover';
 }
 
 const modalOverlayStyles = style({
@@ -72,13 +75,16 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
   let {locale, direction} = useLocale();
 
   // TODO: should we pass through lang and dir props in RAC?
-  let modalRef = useCallback((el: HTMLDivElement) => {
-    (domRef as MutableRefObject<HTMLDivElement>).current = el;
-    if (el) {
-      el.lang = locale;
-      el.dir = direction;
-    }
-  }, [locale, direction, domRef]);
+  let modalRef = useCallback(
+    (el: HTMLDivElement) => {
+      (domRef as MutableRefObject<HTMLDivElement>).current = el;
+      if (el) {
+        el.lang = locale;
+        el.dir = direction;
+      }
+    },
+    [locale, direction, domRef]
+  );
 
   return (
     <ModalOverlay
@@ -88,78 +94,81 @@ export const Modal = forwardRef(function Modal(props: ModalProps, ref: DOMRef<HT
         <RACModal
           {...props}
           ref={modalRef}
-          className={renderProps => style({
-            display: 'flex',
-            flexDirection: 'column',
-            borderRadius: {
-              default: 'xl',
-              size: {
-                fullscreenTakeover: 'none'
-              }
-            },
-            width: {
-              size: {
-                // Copied from designs, not sure if correct.
-                S: 400,
-                M: 480,
-                L: 640,
-                XL: 960,
-                fullscreen: 'calc(100% - 40px)',
-                fullscreenTakeover: 'full'
-              }
-            },
-            height: {
-              size: {
-                fullscreen: 'calc(100% - 40px)',
-                fullscreenTakeover: 'full'
-              }
-            },
-            maxWidth: {
-              default: '90vw',
-              size: {
-                fullscreen: 'none',
-                fullscreenTakeover: 'none'
-              }
-            },
-            maxHeight: {
-              default: '90%',
-              size: {
-                fullscreen: 'none',
-                fullscreenTakeover: 'none'
-              }
-            },
-            paddingBottom: {
-              size: {
-                // Extend background behind the iOS Safari toolbar and keyboard.
-                fullscreenTakeover: '[100vh]'
-              }
-            },
-            '--s2-container-bg': {
-              type: 'backgroundColor',
-              value: 'layer-2'
-            },
-            backgroundColor: '--s2-container-bg',
-            opacity: {
-              isEntering: 0,
-              isExiting: 0
-            },
-            translateY: {
-              isEntering: 20
-            },
-            transition: '[opacity, translate]',
-            transitionDuration: {
-              default: 250,
-              isExiting: 130
-            },
-            transitionDelay: {
-              default: 160,
-              isExiting: 0
-            },
-            // Transparent outline for WHCM.
-            outlineStyle: 'solid',
-            outlineWidth: 1,
-            outlineColor: 'transparent'
-          })({...renderProps, size: props.size})} />
+          className={renderProps =>
+            style({
+              display: 'flex',
+              flexDirection: 'column',
+              borderRadius: {
+                default: 'xl',
+                size: {
+                  fullscreenTakeover: 'none'
+                }
+              },
+              width: {
+                size: {
+                  // Copied from designs, not sure if correct.
+                  S: 400,
+                  M: 480,
+                  L: 640,
+                  XL: 960,
+                  fullscreen: 'calc(100% - 40px)',
+                  fullscreenTakeover: 'full'
+                }
+              },
+              height: {
+                size: {
+                  fullscreen: 'calc(100% - 40px)',
+                  fullscreenTakeover: 'full'
+                }
+              },
+              maxWidth: {
+                default: '90vw',
+                size: {
+                  fullscreen: 'none',
+                  fullscreenTakeover: 'none'
+                }
+              },
+              maxHeight: {
+                default: '90%',
+                size: {
+                  fullscreen: 'none',
+                  fullscreenTakeover: 'none'
+                }
+              },
+              paddingBottom: {
+                size: {
+                  // Extend background behind the iOS Safari toolbar and keyboard.
+                  fullscreenTakeover: '[100vh]'
+                }
+              },
+              '--s2-container-bg': {
+                type: 'backgroundColor',
+                value: 'layer-2'
+              },
+              backgroundColor: '--s2-container-bg',
+              opacity: {
+                isEntering: 0,
+                isExiting: 0
+              },
+              translateY: {
+                isEntering: 20
+              },
+              transition: '[opacity, translate]',
+              transitionDuration: {
+                default: 250,
+                isExiting: 130
+              },
+              transitionDelay: {
+                default: 160,
+                isExiting: 0
+              },
+              // Transparent outline for WHCM.
+              outlineStyle: 'solid',
+              outlineWidth: 1,
+              outlineColor: 'transparent'
+            })({...renderProps, size: props.size})
+          }
+        />
       </div>
     </ModalOverlay>
   );

package/src/NotificationBadge.tsx

@@ -15,7 +15,6 @@ import {ContextValue, SlotProps} from 'react-aria-components/slots';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {fontRelative, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {NumberFormatter} from '@internationalized/number';
 import React, {createContext, forwardRef} from 'react';
@@ -30,93 +29,103 @@ export interface NotificationBadgeStyleProps {
    *
    * @default 'S'
    */
-  size?: 'S' | 'M' | 'L' | 'XL'
+  size?: 'S' | 'M' | 'L' | 'XL';
 }
 
-export interface NotificationBadgeProps extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {
+export interface NotificationBadgeProps
+  extends DOMProps, AriaLabelingProps, StyleProps, NotificationBadgeStyleProps, SlotProps {
   /**
    * The value to be displayed in the notification badge.
    */
-  value?: number | null
+  value?: number | null;
 }
 
 interface NotificationBadgeContextProps extends Partial<NotificationBadgeProps> {
-  isDisabled?: boolean,
-  staticColor?: 'black' | 'white' | 'auto'
+  isDisabled?: boolean;
+  staticColor?: 'black' | 'white' | 'auto';
 }
 
-export const NotificationBadgeContext = createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const NotificationBadgeContext =
+  createContext<ContextValue<Partial<NotificationBadgeContextProps>, DOMRefValue<HTMLDivElement>>>(
+    null
+  );
 
-const badge = style({
-  display: {
-    default: 'flex',
-    isDisabled: 'none'
-  },
-  font: 'ui',
-  color: {
-    default: 'white',
-    isStaticColor: 'auto',
-    forcedColors: 'ButtonText'
-  },
-  fontSize: {
-    size: {
-      S: 'ui-xs',
-      M: 'ui-xs',
-      L: 'ui-sm',
-      XL: 'ui'
-    }
-  },
-  borderStyle: {
-    forcedColors: 'solid'
-  },
-  borderWidth: {
-    forcedColors: '[1px]'
-  },
-  borderColor: {
-    forcedColors: 'ButtonBorder'
-  },
-  justifyContent: 'center',
-  alignItems: 'center',
-  backgroundColor: {
-    default: 'accent',
-    isStaticColor: 'transparent-overlay-1000',
-    forcedColors: 'ButtonFace'
-  },
-  height: {
-    size: {
-      S: {
-        default: 12,
-        isIndicatorOnly: 8
-      },
-      M: {
-        default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible
-        isIndicatorOnly: 8
-      },
-      L: {
-        default: 16,
-        isIndicatorOnly: fontRelative(12)
-      },
-      XL: {
-        default: 18,
-        isIndicatorOnly: fontRelative(12)
+const badge = style(
+  {
+    display: {
+      default: 'flex',
+      isDisabled: 'none'
+    },
+    font: 'ui',
+    color: {
+      default: 'white',
+      isStaticColor: 'auto',
+      forcedColors: 'ButtonText'
+    },
+    fontSize: {
+      size: {
+        S: 'ui-xs',
+        M: 'ui-xs',
+        L: 'ui-sm',
+        XL: 'ui'
       }
-    }
-  },
-  aspectRatio: {
-    isIndicatorOnly: 'square',
-    isSingleDigit: 'square'
-  },
-  width: 'max',
-  paddingX: {
-    isDoubleDigit: 'edge-to-text'
+    },
+    borderStyle: {
+      forcedColors: 'solid'
+    },
+    borderWidth: {
+      forcedColors: '[1px]'
+    },
+    borderColor: {
+      forcedColors: 'ButtonBorder'
+    },
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: {
+      default: 'accent',
+      isStaticColor: 'transparent-overlay-1000',
+      forcedColors: 'ButtonFace'
+    },
+    height: {
+      size: {
+        S: {
+          default: 12,
+          isIndicatorOnly: 8
+        },
+        M: {
+          default: fontRelative(18), // sort of arbitrary? tried to get as close to the figma designs as possible
+          isIndicatorOnly: 8
+        },
+        L: {
+          default: 16,
+          isIndicatorOnly: fontRelative(12)
+        },
+        XL: {
+          default: 18,
+          isIndicatorOnly: fontRelative(12)
+        }
+      }
+    },
+    aspectRatio: {
+      isIndicatorOnly: 'square',
+      isSingleDigit: 'square'
+    },
+    width: 'max',
+    paddingX: {
+      isDoubleDigit: 'edge-to-text'
+    },
+    borderRadius: 'pill'
   },
-  borderRadius: 'pill'
-}, getAllowedOverrides());
+  getAllowedOverrides()
+);
 
 /**
  * Notification badges are used to indicate new or pending activity .
  */
-export const NotificationBadge = forwardRef(function Badge(props: NotificationBadgeProps, ref: DOMRef<HTMLDivElement>) {
+export const NotificationBadge = forwardRef(function Badge(
+  props: NotificationBadgeProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, NotificationBadgeContext);
   let {
@@ -142,7 +151,7 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
     throw new Error('Value must be a positive integer');
   } else {
     formattedValue = new NumberFormatter(locale).format(Math.min(value, 99));
-    let length = Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1 | 0;  // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)
+    let length = (Math.log(value <= 99 ? value : 99) * Math.LOG10E + 1) | 0; // for positive integers (https://stackoverflow.com/questions/14879691/get-number-of-digits-with-javascript)
     if (length === 1) {
       isSingleDigit = true;
     } else if (length === 2) {
@@ -150,7 +159,9 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
     }
 
     if (value > 99) {
-      formattedValue = stringFormatter.format('notificationbadge.plus', {notifications: formattedValue});
+      formattedValue = stringFormatter.format('notificationbadge.plus', {
+        notifications: formattedValue
+      });
     }
   }
 
@@ -164,7 +175,20 @@ export const NotificationBadge = forwardRef(function Badge(props: NotificationBa
       {...filterDOMProps(otherProps, {labelable: true})}
       role={ariaLabel && 'img'}
       aria-label={ariaLabel}
-      className={(props.UNSAFE_className || '') + badge({size, isIndicatorOnly, isSingleDigit, isDoubleDigit, isDisabled, isStaticColor: !!staticColor}, props.styles)}
+      className={
+        (props.UNSAFE_className || '') +
+        badge(
+          {
+            size,
+            isIndicatorOnly,
+            isSingleDigit,
+            isDoubleDigit,
+            isDisabled,
+            isStaticColor: !!staticColor
+          },
+          props.styles
+        )
+      }
       style={props.UNSAFE_style}
       ref={domRef}>
       {formattedValue}