@react-spectrum/s2 0.11.2 → 0.12.0

package/src/Popover.tsx

@@ -14,20 +14,22 @@ import {
   Popover as AriaPopover,
   PopoverProps as AriaPopoverProps,
   composeRenderProps,
-  Dialog,
+  ContextValue,
   DialogProps,
   OverlayArrow,
   OverlayTriggerStateContext,
   useLocale
 } from 'react-aria-components';
-import {colorScheme, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {colorScheme, getAllowedOverrides, heightProperties, UnsafeStyles, widthProperties} from './style-utils' with {type: 'macro'};
 import {ColorSchemeContext} from './Provider';
-import {DOMRef, GlobalDOMAttributes} from '@react-types/shared';
-import {forwardRef, MutableRefObject, useCallback, useContext} from 'react';
+import {createContext, ForwardedRef, forwardRef, useCallback, useContext, useMemo} from 'react';
+import {DOMRef, DOMRefValue, GlobalDOMAttributes} from '@react-types/shared';
+import {lightDark, style} from '../style' with {type: 'macro'};
+import {mergeRefs} from '@react-aria/utils';
 import {mergeStyles} from '../style/runtime';
-import {style} from '../style' with {type: 'macro'};
 import {StyleString} from '../style/types' with {type: 'macro'};
 import {useDOMRef} from '@react-spectrum/utils';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface PopoverProps extends UnsafeStyles, Omit<AriaPopoverProps, 'arrowSize' | 'isNonModal' | 'arrowBoundaryOffset' | 'isKeyboardDismissDisabled' | 'shouldCloseOnInteractOutside' | 'shouldUpdatePosition' | keyof GlobalDOMAttributes> {
   styles?: StyleString,
@@ -62,10 +64,10 @@ let popover = style({
     default: 'elevated',
     isArrowShown: 'none'
   },
-  borderStyle: 'solid',
-  borderWidth: 1,
-  borderColor: {
-    default: 'gray-200',
+  outlineStyle: 'solid',
+  outlineWidth: 1,
+  outlineColor: {
+    default: lightDark('transparent-white-25', 'gray-200'),
     forcedColors: 'ButtonBorder'
   },
   width: {
@@ -118,8 +120,7 @@ let popover = style({
   isolation: 'isolate',
   pointerEvents: {
     isExiting: 'none'
-  },
-  outlineStyle: 'none'
+  }
 }, getAllowedOverrides());
 // TODO: animations and real Popover Arrow
 
@@ -145,12 +146,15 @@ let arrow = style({
   },
   strokeWidth: 1,
   stroke: {
-    default: 'gray-200',
+    default: lightDark('transparent-white-25', 'gray-200'),
     forcedColors: 'ButtonBorder'
   }
 });
 
-export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps, ref: DOMRef<HTMLDivElement>) {
+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 = '',
@@ -158,18 +162,18 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
     styles,
     size
   } = props;
-  let domRef = useDOMRef(ref);
   let colorScheme = useContext(ColorSchemeContext);
   let {locale, direction} = useLocale();
 
   // TODO: should we pass through lang and dir props in RAC?
   let popoverRef = useCallback((el: HTMLDivElement) => {
-    (domRef as MutableRefObject<HTMLDivElement>).current = el;
     if (el) {
       el.lang = locale;
       el.dir = direction;
     }
-  }, [locale, direction, domRef]);
+  }, [locale, direction]);
+  // Memoed so it doesn't break ComboBox/Picker scrolling
+  let mergedRef = useMemo(() => mergeRefs(popoverRef, ref), [ref, popoverRef]);
 
   // On small devices, show a modal (or eventually a tray) instead of a popover.
   // TODO: reverted this until we have trays.
@@ -198,7 +202,7 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
     <AriaPopover
       {...props}
       offset={(props.offset ?? 8) + (hideArrow ? 0 : 8)}
-      ref={popoverRef}
+      ref={mergedRef}
       style={{
         ...UNSAFE_style,
         // Override default z-index from useOverlayPosition. We use isolation: isolate instead.
@@ -214,19 +218,33 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
               </svg>
             </OverlayArrow>
           )}
-          {children}
+          <InPopoverContext.Provider value>
+            {children}
+          </InPopoverContext.Provider>
         </>
       ))}
     </AriaPopover>
   );
 });
 
-export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'className' | 'style' | keyof GlobalDOMAttributes>, StyleProps {
+type PopoverStylesProp = StyleString<((typeof widthProperties)[number] | (typeof heightProperties)[number])>;
+export interface PopoverDialogProps extends Pick<PopoverProps, 'children' | 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'children' | 'className' | 'style' | keyof GlobalDOMAttributes>, UnsafeStyles {
+  /**
+   * The amount of padding around the contents of the dialog.
+   * @default 'default'
+   */
+  padding?: 'default' | 'none',
+  /** Spectrum-defined styles, returned by the `style()` macro. */
+  styles?: PopoverStylesProp
 }
 
-
-const dialogStyle = style({
-  padding: 8,
+const innerDivStyle = style({
+  padding: {
+    padding: {
+      default: 8,
+      none: 0
+    }
+  },
   boxSizing: 'border-box',
   outlineStyle: 'none',
   borderRadius: 'inherit',
@@ -239,25 +257,29 @@ const dialogStyle = style({
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */
-export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
+export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef<HTMLDivElement>) {
+  [props, ref] = useSpectrumContextProps(props, ref, PopoverContext);
   let domRef = useDOMRef(ref);
-  const {triggerRef, isOpen, onOpenChange, ...otherProps} = props;
-
+  let {
+    UNSAFE_className,
+    UNSAFE_style,
+    styles,
+    padding = 'default',
+    ...otherProps
+  } = props;
 
   return (
-    <PopoverBase  isOpen={isOpen} onOpenChange={onOpenChange} triggerRef={triggerRef} size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
-      <Dialog
-        {...otherProps}
-        ref={domRef}
-        style={props.UNSAFE_style}
-        className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>
-        {composeRenderProps(props.children, (children) => (
-          // Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state.
+    <PopoverBase {...otherProps} ref={domRef}>
+      {composeRenderProps(props.children, (children) => (
+        <div
+          style={UNSAFE_style}
+          className={(UNSAFE_className || '') + innerDivStyle({padding}, styles)}>
+          {/* Reset OverlayTriggerStateContext so the buttons inside the dialog don't retain their hover state. */}
           <OverlayTriggerStateContext.Provider value={null}>
             {children}
           </OverlayTriggerStateContext.Provider>
-        ))}
-      </Dialog>
+        </div>
+      ))}
     </PopoverBase>
   );
 });

package/src/Provider.tsx

@@ -51,7 +51,7 @@ export interface ProviderProps extends UnsafeStyles {
 
 export const ColorSchemeContext = createContext<ColorScheme | 'light dark' | null>(null);
 
-export function Provider(props: ProviderProps): ReactNode {
+export function Provider(props: ProviderProps): JSX.Element {
   let result = <ProviderInner {...props} />;
   let parentColorScheme = useContext(ColorSchemeContext);
   let colorScheme = props.colorScheme || parentColorScheme;

package/src/RangeCalendar.tsx

@@ -64,6 +64,9 @@ const headerStyles = style({
   width: 'full'
 });
 
+/**
+ * RangeCalendars display a grid of days in one or more months and allow users to select a contiguous range of dates.
+ */
 export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, RangeCalendarContext);
   let {

package/src/RangeSlider.tsx

@@ -45,6 +45,9 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
 
 export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
 
+/**
+ * RangeSliders allow users to quickly select a subset range. They should be used when the upper and lower bounds to the range are invariable.
+ */
 export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props: RangeSliderProps, ref: FocusableRef<HTMLDivElement>) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, RangeSliderContext);

package/src/SearchField.tsx

@@ -14,6 +14,7 @@ import {
   SearchField as AriaSearchField,
   SearchFieldProps as AriaSearchFieldProps,
   ContextValue,
+  InputProps,
   Provider
 } from 'react-aria-components';
 import {baseColor, fontRelative, style} from '../style' with {type: 'macro'};
@@ -31,7 +32,7 @@ import SearchIcon from '../s2wf-icons/S2_Icon_Search_20_N.svg';
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps, Pick<InputProps, 'placeholder'> {
   /**
    * The size of the SearchField.
    *

package/src/SegmentedControl.tsx

@@ -13,13 +13,13 @@
 import {AriaLabelingProps, DOMRef, DOMRefValue, FocusableRef, Key} from '@react-types/shared';
 import {baseColor, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
-import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
+import {ContextValue, DEFAULT_SLOT, Provider, TextContext as RACTextContext, SelectionIndicator, SlotProps, ToggleButton, ToggleButtonGroup, ToggleButtonRenderProps, ToggleGroupStateContext} from 'react-aria-components';
 import {control, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
-import {createContext, forwardRef, ReactNode, RefObject, useCallback, useContext, useRef} from 'react';
+import {createContext, forwardRef, ReactNode, useCallback, useContext, useRef} from 'react';
 import {IconContext} from './Icon';
 import {pressScale} from './pressScale';
 import {Text, TextContext} from './Content';
-import {useDOMRef, useFocusableRef, useMediaQuery} from '@react-spectrum/utils';
+import {useDOMRef, useFocusableRef} from '@react-spectrum/utils';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
@@ -110,9 +110,17 @@ const slider = style<{isDisabled: boolean}>({
       isDisabled: 'GrayText'
     }
   },
+  top: 0,
   left: 0,
   width: 'full',
   height: 'full',
+  contain: 'strict',
+  transition: {
+    default: '[translate,width]',
+    '@media (prefers-reduced-motion: reduce)': 'none'
+  },
+  transitionDuration: 200,
+  transitionTimingFunction: 'out',
   position: 'absolute',
   boxSizing: 'border-box',
   borderStyle: 'solid',
@@ -130,8 +138,6 @@ const slider = style<{isDisabled: boolean}>({
 
 interface InternalSegmentedControlContextProps {
   register?: (value: Key, isDisabled?: boolean) => void,
-  prevRef?: RefObject<DOMRect | null>,
-  currentSelectedRef?: RefObject<HTMLDivElement | null>,
   isJustified?: boolean
 }
 
@@ -139,8 +145,6 @@ interface DefaultSelectionTrackProps {
   defaultValue?: Key | null,
   value?: Key | null,
   children: ReactNode,
-  prevRef: RefObject<DOMRect | null>,
-  currentSelectedRef: RefObject<HTMLDivElement | null>,
   isJustified?: boolean
 }
 
@@ -158,14 +162,7 @@ export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedContr
   } = props;
   let domRef = useDOMRef(ref);
 
-  let prevRef = useRef<DOMRect>(null);
-  let currentSelectedRef = useRef<HTMLDivElement>(null);
-
   let onChange = (values: Set<Key>) => {
-    if (currentSelectedRef.current) {
-      prevRef.current = currentSelectedRef?.current.getBoundingClientRect();
-    }
-
     if (onSelectionChange) {
       let firstKey = values.values().next().value;
       if (firstKey != null) {
@@ -186,7 +183,7 @@ export const SegmentedControl = /*#__PURE__*/ forwardRef(function SegmentedContr
       onSelectionChange={onChange}
       className={(props.UNSAFE_className || '') + segmentedControl(null, props.styles)}
       aria-label={props['aria-label']}>
-      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} prevRef={prevRef} currentSelectedRef={currentSelectedRef} isJustified={props.isJustified}>
+      <DefaultSelectionTracker defaultValue={defaultSelectedKey} value={selectedKey} isJustified={props.isJustified}>
         {props.children}
       </DefaultSelectionTracker>
     </ToggleButtonGroup>
@@ -209,7 +206,7 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
   return (
     <Provider
       values={[
-        [InternalSegmentedControlContext, {register: register, prevRef: props.prevRef, currentSelectedRef: props.currentSelectedRef, isJustified: props.isJustified}]
+        [InternalSegmentedControlContext, {register: register, isJustified: props.isJustified}]
       ]}>
       {props.children}
     </Provider>
@@ -222,46 +219,21 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
 export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedControlItem(props: SegmentedControlItemProps, ref: FocusableRef<HTMLButtonElement>) {
   let domRef = useFocusableRef(ref);
   let divRef = useRef<HTMLDivElement>(null);
-  let {register, prevRef, currentSelectedRef, isJustified} = useContext(InternalSegmentedControlContext);
-  let state = useContext(ToggleGroupStateContext);
-  let isSelected = state?.selectedKeys.has(props.id);
-  // do not apply animation if a user has the prefers-reduced-motion setting
-  let reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+  let {register, isJustified} = useContext(InternalSegmentedControlContext);
 
   useLayoutEffect(() => {
     register?.(props.id);
   }, [register, props.id]);
 
-  useLayoutEffect(() => {
-    if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
-      let currentItem = currentSelectedRef?.current.getBoundingClientRect();
-
-      let deltaX = prevRef?.current.left - currentItem?.left;
-
-      currentSelectedRef.current.animate(
-        [
-          {transform: `translateX(${deltaX}px)`, width: `${prevRef?.current.width}px`},
-          {transform: 'translateX(0px)', width: `${currentItem.width}px`}
-        ],
-        {
-          duration: 200,
-          easing: 'ease-out'
-        }
-      );
-
-      prevRef.current = null;
-    }
-  }, [isSelected, reduceMotion, prevRef, currentSelectedRef]);
-
   return (
     <ToggleButton
       {...props}
       ref={domRef}
       style={props.UNSAFE_style}
       className={renderProps => (props.UNSAFE_className || '') + controlItem({...renderProps, isJustified}, props.styles)} >
-      {({isSelected, isPressed, isDisabled}) => (
+      {({isPressed, isDisabled}) => (
         <>
-          {isSelected && <div className={slider({isDisabled})} ref={currentSelectedRef} />}
+          <SelectionIndicator className={slider({isDisabled})} />
           <Provider
             values={[
               [IconContext, {

package/src/SelectBoxGroup.tsx

@@ -26,6 +26,7 @@ import {IllustrationContext} from '../src/Icon';
 import {pressScale} from './pressScale';
 import React, {createContext, forwardRef, ReactNode, useContext, useMemo, useRef} from 'react';
 import {TextContext} from './Content';
+import {useFocusVisible} from 'react-aria';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 export interface SelectBoxGroupProps<T> extends StyleProps, Omit<ListBoxProps<T>, keyof GlobalDOMAttributes | 'layout' | 'dragAndDropHooks' | 'dependencies' | 'renderEmptyState' | 'children' | 'onAction' | 'shouldFocusOnHover' | 'selectionBehavior' | 'shouldSelectOnPressUp' | 'shouldFocusWrap' | 'style' | 'className'> {
@@ -293,7 +294,7 @@ const gridStyles = style<{orientation?: Orientation}>({
  */
 export function SelectBox(props: SelectBoxProps): ReactNode {
   let {children, isDisabled: individualDisabled = false, UNSAFE_style, UNSAFE_className, styles, ...otherProps} = props;
-  
+
   let {
     orientation = 'vertical',
     isDisabled: groupDisabled = false
@@ -301,6 +302,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
 
   const isDisabled = individualDisabled || groupDisabled;
   const ref = useRef<HTMLDivElement>(null);
+  let {isFocusVisible} = useFocusVisible();
 
   return (
     <ListBoxItem
@@ -308,6 +310,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
       ref={ref}
       className={renderProps => (UNSAFE_className || '') + selectBoxStyles({
         ...renderProps,
+        isFocusVisible: isFocusVisible && renderProps.isFocused,
         orientation
       }, styles)}
       style={pressScale(ref, UNSAFE_style)}
@@ -315,7 +318,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
       {({isSelected, isDisabled, isHovered}) => {
         return (
           <>
-            <div 
+            <div
               className={style({
                 position: 'absolute',
                 top: 8,
@@ -330,8 +333,8 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
                     isDisabled,
                     size: 'M'
                   } as any)}>
-                  <Checkmark 
-                    size="S" 
+                  <Checkmark
+                    size="S"
                     className={iconStyles} />
                 </div>
               )}
@@ -382,27 +385,22 @@ export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T
     ...otherProps
   } = props;
 
-  const selectBoxContextValue = useMemo(
-    () => {
-      const contextValue = {
-        orientation,
-        isDisabled
-      };
-      return contextValue;
-    },
-    [orientation, isDisabled]
-  );
+  const selectBoxContextValue = useMemo(() => ({
+    orientation,
+    isDisabled
+  }), [orientation, isDisabled]);
 
   return (
-    <ListBox
-      selectionMode={selectionMode}
-      layout="grid"
-      className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}
-      style={UNSAFE_style}
-      {...otherProps}>
-      <SelectBoxContext.Provider value={selectBoxContextValue}>
+    <SelectBoxContext.Provider value={selectBoxContextValue}>
+      <ListBox
+        selectionMode={selectionMode}
+        layout="grid"
+        orientation={orientation}
+        className={(UNSAFE_className || '') + gridStyles({orientation}, styles)}
+        style={UNSAFE_style}
+        {...otherProps}>
         {children}
-      </SelectBoxContext.Provider>
-    </ListBox>
+      </ListBox>
+    </SelectBoxContext.Provider>
   );
 });

package/src/TableView.tsx

@@ -55,7 +55,6 @@ import {IconContext} from './Icon';
 import intlMessages from '../intl/*.json';
 import {LayoutNode} from '@react-stately/layout';
 import {Menu, MenuItem, MenuSection, MenuTrigger} from './Menu';
-import {mergeStyles} from '../style/runtime';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
@@ -125,10 +124,12 @@ const tableWrapper = style({
   position: 'relative',
   // Clip ActionBar animation.
   overflow: 'clip'
-});
+}, getAllowedOverrides({height: true}));
 
 const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boolean}>({
   width: 'full',
+  height: 'full',
+  boxSizing: 'border-box',
   userSelect: 'none',
   minHeight: 0,
   minWidth: 0,
@@ -163,7 +164,7 @@ const table = style<TableRenderProps & S2TableProps & {isCheckboxSelection?: boo
   scrollPaddingStart: {
     isCheckboxSelection: 40
   }
-}, getAllowedOverrides({height: true}));
+});
 
 // component-height-100
 const DEFAULT_HEADER_HEIGHT = {
@@ -320,7 +321,7 @@ export const TableView = forwardRef(function TableView(props: TableViewProps, re
       onResize={propsOnResize}
       onResizeEnd={onResizeEnd}
       onResizeStart={onResizeStart}
-      className={(UNSAFE_className || '') + mergeStyles(tableWrapper, styles)}
+      className={(UNSAFE_className || '') + tableWrapper(null, styles)}
       style={UNSAFE_style}>
       <Virtualizer
         layout={S2TableLayout}
@@ -461,7 +462,7 @@ const cellFocus = {
 } as const;
 
 function CellFocusRing() {
-  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />;
+  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0, pointerEvents: 'none'})({isFocusVisible: true})} />;
 }
 
 const columnStyles = style({
@@ -1035,8 +1036,8 @@ export const Cell = forwardRef(function Cell(props: CellProps, ref: DOMRef<HTMLD
       {...otherProps}>
       {({isFocusVisible}) => (
         <>
-          {isFocusVisible && <CellFocusRing />}
           <span className={cellContent({...tableVisualOptions, isSticky, align: align || 'start'})}>{children}</span>
+          {isFocusVisible && <CellFocusRing />}
         </>
       )}
     </RACCell>