@react-spectrum/s2 1.3.1 → 1.4.0

package/src/Popover.tsx

@@ -10,14 +10,31 @@
  * governing permissions and limitations under the License.
  */
 
-import {Popover as AriaPopover, PopoverProps as AriaPopoverProps, OverlayArrow} from 'react-aria-components/Popover';
+import {
+  Popover as AriaPopover,
+  PopoverProps as AriaPopoverProps,
+  OverlayArrow
+} from 'react-aria-components/Popover';
 import {ColorSchemeContext} from './Provider';
 import {composeRenderProps} from 'react-aria-components/composeRenderProps';
 import {ContextValue} from 'react-aria-components/slots';
-import {createContext, ForwardedRef, forwardRef, ReactNode, useCallback, useContext, useMemo} from 'react';
+import {
+  createContext,
+  ForwardedRef,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo
+} from 'react';
 import {DialogProps, OverlayTriggerStateContext} from 'react-aria-components/Dialog';
 import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
-import {getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  heightProperties,
+  UnsafeStyles,
+  widthProperties
+} from './style-utils' with {type: 'macro'};
 import {lightDark, setColorScheme, style} from '../style' with {type: 'macro'};
 import {mergeRefs} from 'react-aria/mergeRefs';
 import {mergeStyles} from '../style/runtime';
@@ -26,114 +43,121 @@ import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps,
-  'arrowSize' |
-  'isNonModal' |
-  'arrowBoundaryOffset' |
-  'isKeyboardDismissDisabled' |
-  'shouldCloseOnInteractOutside' |
-  'shouldUpdatePosition' |
-  'style' |
-  'className' |
-  'render' |
-  keyof GlobalDOMAttributes
-> {
+export interface PopoverProps
+  extends
+    UnsafeStyles,
+    Omit<
+      AriaPopoverProps,
+      | 'arrowSize'
+      | 'isNonModal'
+      | 'arrowBoundaryOffset'
+      | 'isKeyboardDismissDisabled'
+      | 'shouldCloseOnInteractOutside'
+      | 'shouldUpdatePosition'
+      | 'style'
+      | 'className'
+      | 'render'
+      | keyof GlobalDOMAttributes
+    > {
   /**
    * The styles of the popover.
    */
-  styles?: StyleString,
+  styles?: StyleString;
   /**
    * Whether a popover's arrow should be hidden.
    *
    * @default false
    */
-  hideArrow?: boolean,
+  hideArrow?: boolean;
   /**
    * The size of the Popover. If not specified, the popover fits its contents.
    */
-  size?: 'S' | 'M' | 'L'
+  size?: 'S' | 'M' | 'L';
   /** The type of overlay that should be rendered when on a mobile device. */
   // mobileType?: 'modal' | 'fullscreen' | 'fullscreenTakeover' // TODO: add tray back in
 }
 
-let popover = style({
-  ...setColorScheme(),
-  '--s2-container-bg': {
-    type: 'backgroundColor',
-    value: {
-      default: 'layer-2',
-      forcedColors: 'Background'
-    }
-  },
-  backgroundColor: '--s2-container-bg',
-  borderRadius: 'lg',
-  filter: {
-    isArrowShown: 'elevated'
-  },
-  // Use box-shadow instead of filter when an arrow is not shown.
-  // This fixes the shadow stacking problem with submenus.
-  boxShadow: {
-    default: 'elevated',
-    isArrowShown: 'none'
-  },
-  outlineStyle: 'solid',
-  outlineWidth: 1,
-  outlineColor: {
-    default: lightDark('transparent-white-25', 'gray-200'),
-    forcedColors: 'ButtonBorder'
-  },
-  width: {
-    size: {
-      // Copied from designs, not sure if correct.
-      S: 336,
-      M: 416,
-      L: 576
-    }
-  },
-  // Don't be larger than full screen minus 2 * containerPadding
-  maxWidth: 'calc(100vw - 24px)',
-  boxSizing: 'border-box',
-  display: 'flex',
-  opacity: {
-    isEntering: 0,
-    isExiting: 0
-  },
-  translateY: {
-    placement: {
-      top: {
-        isEntering: 4,
-        isExiting: 4
-      },
-      bottom: {
-        isEntering: -4,
-        isExiting: -4
+let popover = style(
+  {
+    ...setColorScheme(),
+    '--s2-container-bg': {
+      type: 'backgroundColor',
+      value: {
+        default: 'layer-2',
+        forcedColors: 'Background'
       }
     },
-    isSubmenu: 0
-  },
-  translateX: {
-    placement: {
-      left: {
-        isEntering: 4,
-        isExiting: 4
-      },
-      right: {
-        isEntering: -4,
-        isExiting: -4
+    backgroundColor: '--s2-container-bg',
+    borderRadius: 'lg',
+    filter: {
+      isArrowShown: 'elevated'
+    },
+    // Use box-shadow instead of filter when an arrow is not shown.
+    // This fixes the shadow stacking problem with submenus.
+    boxShadow: {
+      default: 'elevated',
+      isArrowShown: 'none'
+    },
+    outlineStyle: 'solid',
+    outlineWidth: 1,
+    outlineColor: {
+      default: lightDark('transparent-white-25', 'gray-200'),
+      forcedColors: 'ButtonBorder'
+    },
+    width: {
+      size: {
+        // Copied from designs, not sure if correct.
+        S: 336,
+        M: 416,
+        L: 576
       }
     },
-    isSubmenu: 0
-  },
-  transition: '[opacity, translate]',
-  transitionDuration: 200,
-  transitionTimingFunction: {
-    isExiting: 'in'
+    // Don't be larger than full screen minus 2 * containerPadding
+    maxWidth: 'calc(100vw - 24px)',
+    boxSizing: 'border-box',
+    display: 'flex',
+    opacity: {
+      isEntering: 0,
+      isExiting: 0
+    },
+    translateY: {
+      placement: {
+        top: {
+          isEntering: 4,
+          isExiting: 4
+        },
+        bottom: {
+          isEntering: -4,
+          isExiting: -4
+        }
+      },
+      isSubmenu: 0
+    },
+    translateX: {
+      placement: {
+        left: {
+          isEntering: 4,
+          isExiting: 4
+        },
+        right: {
+          isEntering: -4,
+          isExiting: -4
+        }
+      },
+      isSubmenu: 0
+    },
+    transition: '[opacity, translate]',
+    transitionDuration: 200,
+    transitionTimingFunction: {
+      isExiting: 'in'
+    },
+    isolation: 'isolate',
+    pointerEvents: {
+      isExiting: 'none'
+    }
   },
-  isolation: 'isolate',
-  pointerEvents: {
-    isExiting: 'none'
-  }
-}, getAllowedOverrides());
+  getAllowedOverrides()
+);
 // TODO: animations and real Popover Arrow
 
 let arrow = style({
@@ -163,27 +187,28 @@ let arrow = style({
   }
 });
 
-export const PopoverContext = createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);
+export const PopoverContext =
+  createContext<ContextValue<PopoverProps, DOMRefValue<HTMLDivElement>>>(null);
 export const InPopoverContext = createContext(false);
 
-export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: ForwardedRef<HTMLDivElement | null>) {
-  let {
-    hideArrow = false,
-    UNSAFE_className = '',
-    UNSAFE_style,
-    styles,
-    size
-  } = props;
+export const PopoverBase = forwardRef(function PopoverBase(
+  props: PopoverProps,
+  ref: ForwardedRef<HTMLDivElement | null>
+) {
+  let {hideArrow = false, UNSAFE_className = '', UNSAFE_style, styles, size} = props;
   let colorScheme = useContext(ColorSchemeContext);
   let {locale, direction} = useLocale();
 
   // TODO: should we pass through lang and dir props in RAC?
-  let popoverRef = useCallback((el: HTMLDivElement) => {
-    if (el) {
-      el.lang = locale;
-      el.dir = direction;
-    }
-  }, [locale, direction]);
+  let popoverRef = useCallback(
+    (el: HTMLDivElement) => {
+      if (el) {
+        el.lang = locale;
+        el.dir = direction;
+      }
+    },
+    [locale, direction]
+  );
   // Memoed so it doesn't break ComboBox/Picker scrolling
   let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);
 
@@ -220,84 +245,105 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
         // Override default z-index from useOverlayPosition. We use isolation: isolate instead.
         zIndex: undefined
       }}
-      className={(renderProps) => UNSAFE_className + mergeStyles(popover({...renderProps, size, isArrowShown: !hideArrow, colorScheme, isSubmenu: renderProps.trigger === 'SubmenuTrigger'}), styles)}>
+      className={renderProps =>
+        UNSAFE_className +
+        mergeStyles(
+          popover({
+            ...renderProps,
+            size,
+            isArrowShown: !hideArrow,
+            colorScheme,
+            isSubmenu: renderProps.trigger === 'SubmenuTrigger'
+          }),
+          styles
+        )
+      }>
       {composeRenderProps(props.children, (children, renderProps) => (
         <>
           {!hideArrow && (
             <OverlayArrow className="">
               <svg viewBox="0 0 18 10" className={arrow(renderProps)}>
-                <path transform="translate(0 -1)" d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1" />
+                <path
+                  transform="translate(0 -1)"
+                  d="M1 1L7.93799 8.52588C8.07224 8.67448 8.23607 8.79362 8.41895 8.87524C8.60182 8.95687 8.79973 8.9993 9 9C9.19984 8.99882 9.39724 8.95606 9.57959 8.87427C9.76193 8.79248 9.9253 8.67336 10.0591 8.5249L17 1"
+                />
               </svg>
             </OverlayArrow>
           )}
-          <InPopoverContext.Provider value>
-            {children}
-          </InPopoverContext.Provider>
+          <InPopoverContext.Provider value>{children}</InPopoverContext.Provider>
         </>
       ))}
     </AriaPopover>
   );
 });
 
-type PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;
-export interface PopoverDialogProps extends Pick<PopoverProps,
-'size' |
-'hideArrow'|
-'placement' |
-'shouldFlip' |
-'containerPadding' |
-'offset' |
-'crossOffset' |
-'triggerRef' |
-'isOpen' |
-'onOpenChange'
->, Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
+type PopoverStylesProp = StyleString<
+  (typeof widthProperties)[number] | (typeof heightProperties)[number]
+>;
+export interface PopoverDialogProps
+  extends
+    Pick<
+      PopoverProps,
+      | 'size'
+      | 'hideArrow'
+      | 'placement'
+      | 'shouldFlip'
+      | 'containerPadding'
+      | 'offset'
+      | 'crossOffset'
+      | 'triggerRef'
+      | 'isOpen'
+      | 'onOpenChange'
+    >,
+    Omit<DialogProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>,
+    UnsafeStyles {
   /**
    * The children of the popover.
    */
-  children?: ReactNode,
+  children?: ReactNode;
   /**
    * The amount of padding around the contents of the dialog.
+   *
    * @default 'default'
    */
-  padding?: 'default' | 'none',
+  padding?: 'default' | 'none';
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: PopoverStylesProp
+  styles?: PopoverStylesProp;
 }
 
-const innerDivStyle = style({
-  padding: {
+const innerDivStyle = style(
+  {
     padding: {
-      default: 8,
-      none: 0
-    }
+      padding: {
+        default: 8,
+        none: 0
+      }
+    },
+    boxSizing: 'border-box',
+    outlineStyle: 'none',
+    borderRadius: 'inherit',
+    overflow: 'auto',
+    position: 'relative',
+    width: 'full',
+    maxSize: 'inherit'
   },
-  boxSizing: 'border-box',
-  outlineStyle: 'none',
-  borderRadius: 'inherit',
-  overflow: 'auto',
-  position: 'relative',
-  width: 'full',
-  maxSize: 'inherit'
-}, getAllowedOverrides({height: true}));
+  getAllowedOverrides({height: true})
+);
 
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */
-export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {
+export const Popover = forwardRef(function Popover(
+  props: PopoverDialogProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);
   let domRef = useDOMRef(ref);
-  let {
-    UNSAFE_className,
-    UNSAFE_style,
-    styles,
-    padding = 'default',
-    ...otherProps
-  } = props;
+  let {UNSAFE_className, UNSAFE_style, styles, padding = 'default', ...otherProps} = props;
 
   return (
     <PopoverBase {...otherProps} ref={domRef}>
-      {composeRenderProps(props.children, (children) => (
+      {composeRenderProps(props.children, children => (
         <div
           style={UNSAFE_style}
           className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>

package/src/ProgressBar.tsx

@@ -10,9 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import {ProgressBar as AriaProgressBar, ProgressBarProps as AriaProgressBarProps} from 'react-aria-components/ProgressBar';
+import {
+  ProgressBar as AriaProgressBar,
+  ProgressBarProps as AriaProgressBarProps
+} from 'react-aria-components/ProgressBar';
 
-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';
@@ -31,29 +34,37 @@ interface ProgressBarStyleProps {
    *
    * @default 'M'
    */
-  size?: 'S' | 'M' | 'L' | 'XL',
+  size?: 'S' | 'M' | 'L' | 'XL';
   /**
    * Whether presentation is indeterminate when progress isn't known.
    */
-  isIndeterminate?: boolean,
+  isIndeterminate?: boolean;
   /**
    * 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 ProgressBarProps extends Omit<AriaProgressBarProps, 'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes>, ProgressBarStyleProps, StyleProps {
+export interface ProgressBarProps
+  extends
+    Omit<
+      AriaProgressBarProps,
+      'children' | 'className' | 'style' | 'render' | keyof GlobalDOMAttributes
+    >,
+    ProgressBarStyleProps,
+    StyleProps {
   /** The content to display as the label. */
-  label?: ReactNode
+  label?: ReactNode;
 }
 
-export const ProgressBarContext = createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const ProgressBarContext =
+  createContext<ContextValue<Partial<ProgressBarProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 const indeterminateLTR = keyframes(`
   0% {
@@ -73,47 +84,40 @@ const indeterminateRTL = keyframes(`
   }
 `);
 
-const wrapper = style({
-  ...bar(),
-  gridTemplateColumns: {
-    default: {
-      labelPosition: {
-        top: ['1fr', 'auto'],
-        side: ['auto', '1fr']
+const wrapper = style(
+  {
+    ...bar(),
+    gridTemplateColumns: {
+      default: {
+        labelPosition: {
+          top: ['1fr', 'auto'],
+          side: ['auto', '1fr']
+        }
+      },
+      isIndeterminate: {
+        labelPosition: {
+          top: ['1fr'],
+          side: ['auto', '1fr']
+        }
       }
     },
-    isIndeterminate: {
-      labelPosition: {
-        top: ['1fr'],
-        side: ['auto', '1fr']
+    gridTemplateAreas: {
+      default: {
+        labelPosition: {
+          top: ['label value', 'bar bar'],
+          side: ['label bar value']
+        }
+      },
+      isIndeterminate: {
+        labelPosition: {
+          top: ['label', 'bar'],
+          side: ['label bar']
+        }
       }
     }
   },
-  gridTemplateAreas: {
-    default: {
-      labelPosition: {
-        top: [
-          'label value',
-          'bar bar'
-        ],
-        side: [
-          'label bar value'
-        ]
-      }
-    },
-    isIndeterminate: {
-      labelPosition: {
-        top: [
-          'label',
-          'bar'
-        ],
-        side: [
-          'label bar'
-        ]
-      }
-    }
-  }
-}, getAllowedOverrides());
+  getAllowedOverrides()
+);
 
 const valueStyles = style({
   ...fieldLabel(),
@@ -165,13 +169,17 @@ const indeterminateAnimation = style({
 });
 
 /**
- * ProgressBars show the progression of a system operation: downloading, uploading, processing, etc., in a visual way.
- * They can represent either determinate or indeterminate progress.
+ * ProgressBars show the progression of a system operation: downloading, uploading, processing,
+ * etc., in a visual way. They can represent either determinate or indeterminate progress.
  */
-export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props: ProgressBarProps, ref: DOMRef<HTMLDivElement>) {
+export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(
+  props: ProgressBarProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   [props, ref] = useSpectrumContextProps(props, ref, ProgressBarContext);
   let {
-    label, size = 'M',
+    label,
+    size = 'M',
     staticColor,
     isIndeterminate,
     labelPosition = 'top',
@@ -187,19 +195,36 @@ export const ProgressBar = /*#__PURE__*/ forwardRef(function ProgressBar(props:
       {...props}
       ref={domRef}
       style={UNSAFE_style}
-      className={UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)}>
+      className={
+        UNSAFE_className + wrapper({...props, size, labelPosition, staticColor}, props.styles)
+      }>
       {({percentage, valueText}) => (
         <>
-          {label && <FieldLabel size={size} labelAlign="start" labelPosition={labelPosition} staticColor={staticColor}>{label}</FieldLabel>}
-          {label && !isIndeterminate && <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>{valueText}</span>}
+          {label && (
+            <FieldLabel
+              size={size}
+              labelAlign="start"
+              labelPosition={labelPosition}
+              staticColor={staticColor}>
+              {label}
+            </FieldLabel>
+          )}
+          {label && !isIndeterminate && (
+            <span className={valueStyles({size, labelAlign: 'end', isStaticColor})}>
+              {valueText}
+            </span>
+          )}
           <div className={trackStyles({isStaticColor, size})}>
             <div
-              className={mergeStyles(fill({...props, isStaticColor}), (isIndeterminate ? indeterminateAnimation({direction}) : null))}
-              style={{width: isIndeterminate ? undefined : percentage + '%'}} />
+              className={mergeStyles(
+                fill({...props, isStaticColor}),
+                isIndeterminate ? indeterminateAnimation({direction}) : null
+              )}
+              style={{width: isIndeterminate ? undefined : percentage + '%'}}
+            />
           </div>
         </>
       )}
     </AriaProgressBar>
   );
 });
-