@react-spectrum/s2 1.4.0 → 1.5.1

package/src/Disclosure.tsx

@@ -41,7 +41,12 @@ import {
   DisclosureProps as RACDisclosureProps
 } from 'react-aria-components/Disclosure';
 import {filterDOMProps} from 'react-aria/filterDOMProps';
-import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  getAllowedOverrides,
+  StyleProps,
+  StylesPropWithFont,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {Heading} from 'react-aria-components/Heading';
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from './useDOMRef';
@@ -139,6 +144,11 @@ export interface DisclosureTitleProps extends UnsafeStyles, DOMProps {
   level?: number;
   /** The contents of the disclosure header. */
   children: React.ReactNode;
+  /**
+   * Spectrum-defined styles, returned by the `style()` macro. Only allows overriding
+   * `font`, `fontFamily`, `fontWeight`, `fontSize`, and `lineHeight`.
+   */
+  styles?: StylesPropWithFont;
 }
 
 interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {
@@ -153,85 +163,88 @@ const headingStyle = style({
   minWidth: 0
 });
 
-const buttonStyles = style({
-  ...focusRing(),
-  outlineOffset: -2,
-  font: 'heading',
-  color: {
-    default: baseColor('neutral'),
-    forcedColors: 'ButtonText',
-    isDisabled: {
-      default: 'disabled',
-      forcedColors: 'GrayText'
-    }
-  },
-  fontWeight: 'bold',
-  fontSize: {
-    size: {
-      S: 'title-sm',
-      M: 'title',
-      L: 'title-lg',
-      XL: 'title-xl'
-    }
-  },
-  lineHeight: 'ui',
-  display: 'flex',
-  flexGrow: 1,
-  alignItems: 'baseline',
-  paddingX: 'calc(self(minHeight) * 3/8 - 1px)',
-  paddingY: centerPadding(),
-  gap: 'calc(self(minHeight) * 3/8 - 1px)',
-  minHeight: {
-    // compact is equivalent to 'control', but other densities have more padding.
-    size: {
-      S: {
-        density: {
-          compact: 18,
-          regular: 24,
-          spacious: 32
-        }
-      },
-      M: {
-        density: {
-          compact: 24,
-          regular: 32,
-          spacious: 40
-        }
-      },
-      L: {
-        density: {
-          compact: 32,
-          regular: 40,
-          spacious: 48
-        }
-      },
-      XL: {
-        density: {
-          compact: 40,
-          regular: 48,
-          spacious: 56
+const buttonStyles = style(
+  {
+    ...focusRing(),
+    outlineOffset: -2,
+    font: 'heading',
+    color: {
+      default: baseColor('neutral'),
+      forcedColors: 'ButtonText',
+      isDisabled: {
+        default: 'disabled',
+        forcedColors: 'GrayText'
+      }
+    },
+    fontWeight: 'bold',
+    fontSize: {
+      size: {
+        S: 'title-sm',
+        M: 'title',
+        L: 'title-lg',
+        XL: 'title-xl'
+      }
+    },
+    lineHeight: 'ui',
+    display: 'flex',
+    flexGrow: 1,
+    alignItems: 'baseline',
+    paddingX: 'calc(self(minHeight) * 3/8 - 1px)',
+    paddingY: centerPadding(),
+    gap: 'calc(self(minHeight) * 3/8 - 1px)',
+    minHeight: {
+      // compact is equivalent to 'control', but other densities have more padding.
+      size: {
+        S: {
+          density: {
+            compact: 18,
+            regular: 24,
+            spacious: 32
+          }
+        },
+        M: {
+          density: {
+            compact: 24,
+            regular: 32,
+            spacious: 40
+          }
+        },
+        L: {
+          density: {
+            compact: 32,
+            regular: 40,
+            spacious: 48
+          }
+        },
+        XL: {
+          density: {
+            compact: 40,
+            regular: 48,
+            spacious: 56
+          }
         }
       }
-    }
-  },
-  width: 'full',
-  backgroundColor: {
-    default: 'transparent',
-    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),
-    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),
-    isPressed: lightDark('transparent-black-300', 'transparent-white-300')
-  },
-  transition: 'default',
-  borderWidth: 0,
-  borderRadius: {
-    // Only rounded for keyboard focus and quiet.
-    default: 'none',
-    isFocusVisible: 'default',
-    isQuiet: 'default'
+    },
+    width: 'full',
+    backgroundColor: {
+      default: 'transparent',
+      isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),
+      isHovered: lightDark('transparent-black-100', 'transparent-white-100'),
+      isPressed: lightDark('transparent-black-300', 'transparent-white-300')
+    },
+    transition: 'default',
+    borderWidth: 0,
+    borderRadius: {
+      // Only rounded for keyboard focus and quiet.
+      default: 'none',
+      isFocusVisible: 'default',
+      isQuiet: 'default'
+    },
+    textAlign: 'start',
+    disableTapHighlight: true
   },
-  textAlign: 'start',
-  disableTapHighlight: true
-});
+  getAllowedOverrides({font: true})
+);
 
 const chevronStyles = style({
   rotate: {
@@ -293,7 +306,7 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(
   props: DisclosureTitleProps,
   ref: DOMRef<HTMLDivElement>
 ) {
-  let {level = 3, UNSAFE_style, UNSAFE_className = '', ...otherProps} = props;
+  let {level = 3, UNSAFE_style, UNSAFE_className = '', styles, ...otherProps} = props;
   let domRef = useDOMRef(ref);
   const domProps = filterDOMProps(otherProps);
   let {direction} = useLocale();
@@ -309,7 +322,7 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(
       style={UNSAFE_style}
       className={(UNSAFE_className ?? '') + headingStyle}>
       <Button
-        className={renderProps => buttonStyles({...renderProps, size, density, isQuiet})}
+        className={renderProps => buttonStyles({...renderProps, size, density, isQuiet}, styles)}
         slot="trigger">
         <CenterBaseline>
           <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden="true" />

package/src/DropZone.tsx

@@ -26,7 +26,6 @@ import {
   UnsafeStyles
 } from './style-utils' with {type: 'macro'};
 import {IllustratedMessageContext} from './IllustratedMessage';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {style} from '../style' with {type: 'macro'};
 import {useDOMRef} from './useDOMRef';

package/src/Field.tsx

@@ -39,7 +39,6 @@ import intlMessages from '../intl/*.json';
 import {Label, LabelProps} from 'react-aria-components/Label';
 import {mergeStyles} from '../style/runtime';
 import {Provider} from 'react-aria-components/slots';
-// @ts-ignore
 import {StyleString} from '../style/types';
 import {Text} from 'react-aria-components/Text';
 import {useDOMRef} from './useDOMRef';

package/src/InlineAlert.tsx

@@ -21,7 +21,6 @@ import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';
 import {useDOMRef} from './useDOMRef';

package/src/ListView.tsx

@@ -67,7 +67,6 @@ import {
 } from 'react-aria-components/GridList';
 import {IconContext} from './Icon';
 import {ImageContext} from './Image';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Key} from '@react-types/shared';
 import {LayoutInfo, Virtualizer} from 'react-aria-components/Virtualizer';
@@ -93,7 +92,6 @@ export interface ListViewProps<T>
       | 'selectionBehavior'
       | 'layout'
       | 'render'
-      | 'keyboardNavigationBehavior'
       | 'orientation'
       | keyof GlobalDOMAttributes
     >,

package/src/Menu.tsx

@@ -64,7 +64,6 @@ import {IconContext} from './Icon';
 import {ImageContext} from './Image';
 import InfoCircleIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg'; // chevron right removed??
 import {InPopoverContext, Popover, PopoverContext} from './Popover';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import LinkOutIcon from '../ui-icons/LinkOut';
 import {mergeStyles} from '../style/runtime';
@@ -106,13 +105,7 @@ export interface MenuProps<T>
   extends
     Omit<
       AriaMenuProps<T>,
-      | 'children'
-      | 'style'
-      | 'className'
-      | 'render'
-      | 'dependencies'
-      | 'renderEmptyState'
-      | keyof GlobalDOMAttributes
+      'children' | 'style' | 'className' | 'render' | 'renderEmptyState' | keyof GlobalDOMAttributes
     >,
     StyleProps {
   /**

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';

package/src/Picker.tsx

@@ -82,7 +82,6 @@ import {ListLayout} from 'react-stately/useVirtualizerState';
 import {mergeStyles} from '../style/runtime';
 import {Placement} from 'react-aria-components/Popover';
 import {Popover} from './Popover';
-// @ts-ignore
 import {PressResponder} from 'react-aria/private/interactions/PressResponder';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';

package/src/Popover.tsx

@@ -49,7 +49,6 @@ export interface PopoverProps
     Omit<
       AriaPopoverProps,
       | 'arrowSize'
-      | 'isNonModal'
       | 'arrowBoundaryOffset'
       | 'isKeyboardDismissDisabled'
       | 'shouldCloseOnInteractOutside'
@@ -291,6 +290,8 @@ export interface PopoverDialogProps
       | 'containerPadding'
       | 'offset'
       | 'crossOffset'
+      | 'getTargetRect'
+      | 'isNonModal'
       | 'triggerRef'
       | 'isOpen'
       | 'onOpenChange'

package/src/ProgressCircle.tsx

@@ -198,7 +198,7 @@ export const ProgressCircle = /*#__PURE__*/ forwardRef(function ProgressCircle(
         )
       }>
       {({percentage, isIndeterminate}) => (
-        <svg fill="none" width="100%" height="100%">
+        <svg fill="none" width="100%" height="100%" style={{display: 'block'}}>
           <circle cx="50%" cy="50%" r={radius} className={hcmStroke({size})} />
           <circle cx="50%" cy="50%" r={radius} className={track({isStaticColor, size})} />
           <circle

package/src/RangeCalendar.tsx

@@ -22,7 +22,6 @@ import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {HeaderContext, HeadingContext} from './Content';
 import {helpTextStyles} from './Field';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {style} from '../style' with {type: 'macro'};
 import {Text} from 'react-aria-components/Text';

package/src/RangeSlider.tsx

@@ -24,7 +24,6 @@ import {
 } from './Slider';
 import {FocusableRef, FocusableRefValue, RangeValue} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {pressScale} from './pressScale';
 import {SliderFill, SliderThumb, SliderTrack} from 'react-aria-components/Slider';

package/src/TableView.tsx

@@ -92,7 +92,6 @@ import {
 import {getOwnerDocument} from 'react-aria/private/utils/domHelpers';
 import {GridNode} from 'react-stately/private/grid/GridCollection';
 import {IconContext} from './Icon';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {Key} from '@react-types/shared';
 import {LayoutInfo, Rect, TableLayout, Virtualizer} from 'react-aria-components/Virtualizer';
@@ -101,7 +100,6 @@ import {Menu, MenuItem, MenuSection, MenuTrigger} from './Menu';
 import Nubbin from '../ui-icons/S2_MoveHorizontalTableWidget.svg';
 import {OverlayTriggerStateContext} from 'react-aria-components/Dialog';
 import {ProgressCircle} from './ProgressCircle';
-// @ts-ignore
 import {CheckboxContext as RACCheckboxContext} from 'react-aria-components/Checkbox';
 import {Popover as RACPopover} from 'react-aria-components/Popover';
 import React, {
@@ -689,7 +687,15 @@ function CellFocusRing() {
   return (
     <div
       role="presentation"
-      className={style({...cellFocus, position: 'absolute', inset: 0, pointerEvents: 'none'})({
+      className={style({
+        ...cellFocus,
+        position: 'absolute',
+        top: 'var(--topFocusRing, 0)',
+        bottom: 0,
+        insetStart: 0,
+        insetEnd: 0,
+        pointerEvents: 'none'
+      })({
         isFocusVisible: true
       })}
     />
@@ -1927,7 +1933,12 @@ const rowTextColor = {
 
 const row = style<
   RowRenderProps &
-    S2TableProps & {isInFooter?: boolean; isNextSelected?: boolean; isPrevSelected?: boolean}
+    S2TableProps & {
+      isInFooter?: boolean;
+      isNextSelected?: boolean;
+      isPrevSelected?: boolean;
+      isFirstItem?: boolean;
+    }
 >({
   height: 'full',
   position: 'relative',
@@ -2030,20 +2041,18 @@ const row = style<
       }
     }
   },
-  // When checkbox selection, render the gray divider between rows as a border
   borderTopWidth: 0,
-  borderBottomWidth: {
-    selectionStyle: {
-      highlight: 0,
-      checkbox: 1
-    }
-  },
+  borderBottomWidth: 1,
   borderStartWidth: 0,
   borderEndWidth: 0,
   borderStyle: 'solid',
   borderColor: {
     selectionStyle: {
-      highlight: 'transparent',
+      highlight: {
+        default: 'gray-300',
+        isSelected: 'transparent',
+        isNextSelected: 'transparent'
+      },
       checkbox: {
         default: 'gray-300',
         forcedColors: 'ButtonBorder'
@@ -2074,20 +2083,11 @@ const row = style<
       isSelected: '--borderColorBlue'
     }
   },
-  // When highlight selection, render gray dividers as box shadow
-  boxShadow: {
-    selectionStyle: {
-      highlight: {
-        default: '[inset 0 -1px 0px var(--borderColorGray)]',
-        isNextSelected: '[inset 0 0 0 var(--borderColorGray)]'
-        // TODO: Determine if we want to support gray dividers between selected grouped rows
-        // isSelected: {
-        //   isNextSelected: '[inset 0 -1px 0px var(--borderColorGray)]'
-        // }
-      }
-    },
-    forcedColors: {
-      isFocusVisible: '[inset 0 0 0 2px Highlight]'
+  '--focusRingColor': {
+    type: 'outlineColor',
+    value: {
+      default: 'focus-ring',
+      forcedColors: 'Highlight'
     }
   },
   fontWeight: {
@@ -2095,20 +2095,50 @@ const row = style<
     isInFooter: 'bold'
   },
   isolation: 'isolate',
-  forcedColorAdjust: 'none'
+  forcedColorAdjust: 'none',
+  '--topFocusRing': {
+    type: 'top',
+    value: {
+      default: '[-1px]',
+      isFirstItem: 0
+    }
+  },
+  '--topHighlightBorder': {
+    type: 'top',
+    value: {
+      default: 0,
+      isSelected: '[-1px]',
+      // Don't overlap focus ring of row above.
+      isPrevSelected: 0,
+      isFirstItem: 0,
+      forcedColors: 0
+    }
+  },
+  '--bottomPosition': {
+    type: 'bottom',
+    value: {
+      selectionStyle: {
+        checkbox: {
+          default: '[-1px]',
+          // Avoid the next row's selected background covering this row's focus ring.
+          isNextSelected: 0
+        },
+        highlight: '[-1px]'
+      }
+    }
+  }
 });
 
 // Sticky cells (the drag cell, and the checkbox cell when present) get an inline z-index=2 applied by the virtualizer's layout
-// To ensure that the highlight selection border is painted above the stick cells, set z-index to 3
+// To ensure that the highlight selection border is painted above the sticky cells, set z-index to 3
 const highlightSelectionBorder = css(
   `&:before {
     content: "";
-    width: 100%;
-    height: 100%;
+    top: var(--topHighlightBorder);
+    bottom: -1px;
+    inset-inline: 0;
     position: absolute;
-    inset: 0;
     z-index: 3;
-    box-sizing: border-box;
     border-style: solid;
     border-color: var(--borderColor);
     border-top-width: var(--borderTopWidth);
@@ -2127,15 +2157,15 @@ const highlightSelectionBorder = css(
 const focusIndicator = css(
   `&:after {
     content: "";
-    width: 100%;
-    height: 100%;
-    top: 0;
-    z-index: 2;
+    top: var(--topFocusRing);
+    bottom: var(--bottomPosition);
+    z-index: 3;
     inset-inline-start: 0;
+    inset-inline-end: 0;
     border-radius: 5px;
     position: absolute;
     outline-style: solid;
-    outline-color: var(--borderColorBlue);
+    outline-color: var(--focusRingColor);
     outline-width: 2px;
     outline-offset: -2px;
     pointer-events: none;
@@ -2191,6 +2221,7 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T>(
           ...tableVisualOptions,
           selectionStyle,
           isInFooter,
+          isFirstItem: isFirstItem(renderProps.id, renderProps.state),
           isNextSelected: isNextSelected(renderProps.id, renderProps.state),
           isPrevSelected: isPrevSelected(renderProps.id, renderProps.state)
         }) +
@@ -2271,3 +2302,10 @@ export function isPrevSelected(id: Key | undefined, state: TableState<unknown>)
   let keyBefore = state.collection.getKeyBefore(id);
   return keyBefore != null && state.selectionManager.isSelected(keyBefore);
 }
+
+function isFirstItem(id: Key | undefined, state: TableState<unknown>) {
+  if (id == null || !state) {
+    return false;
+  }
+  return state.collection.getFirstKey() === id;
+}

package/src/Tabs.tsx

@@ -139,6 +139,7 @@ const InternalTabsContext = createContext<
   Partial<TabsProps> & {
     tablistRef?: RefObject<HTMLDivElement | null>;
     selectedKey?: Key | null;
+    baseId?: string;
   }
 >({});
 
@@ -200,6 +201,8 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
   }
 
   let tablistRef = useRef<HTMLDivElement | null>(null);
+  // Shared base id so child Tab/TabPanel components can derive stable ids.
+  let baseId = useId();
 
   return (
     <Provider
@@ -215,6 +218,7 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
             tablistRef,
             onSelectionChange: setValue,
             labelBehavior,
+            baseId,
             'aria-label': props['aria-label'],
             'aria-labelledby': props['aria-labelledby']
           }
@@ -460,9 +464,12 @@ const icon = style({
 });
 
 export function Tab(props: TabProps): ReactNode {
-  let {density, orientation, labelBehavior} = useContext(InternalTabsContext) ?? {};
+  let {density, orientation, labelBehavior, baseId} = useContext(InternalTabsContext) ?? {};
 
-  let contentId = useId();
+  // Derive a stable content id from the shared baseId on InternalTabsContext.
+  // Prevents infinite loop when rendering across multiple CollectionBuilder portals.
+  let fallbackId = useId();
+  let contentId = `${baseId ?? fallbackId}-content-${props.id ?? fallbackId}`;
   let ariaLabelledBy = props['aria-labelledby'] || '';
 
   return (

package/src/TagGroup.tsx

@@ -63,7 +63,6 @@ import {TextContext as RACTextContext} from 'react-aria-components/Text';
 import {Text, TextContext} from './Content';
 import {useDOMRef} from './useDOMRef';
 import {useEffectEvent} from 'react-aria/private/utils/useEffectEvent';
-// @ts-ignore
 import {useId} from 'react-aria/useId';
 import {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';
 import {useLocale} from 'react-aria/I18nProvider';

package/src/Toast.tsx

@@ -28,7 +28,6 @@ import InfoIcon from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
 import intlMessages from '../intl/*.json';
 import {isWebKit} from 'react-aria/private/utils/platform';
 import {ToastOptions as RACToastOptions, ToastQueue} from 'react-stately/useToastState';
-// @ts-ignore
 import {Text} from './Content';
 import {
   UNSTABLE_Toast as Toast,
@@ -39,9 +38,7 @@ import {
   ToastRegionProps,
   UNSTABLE_ToastStateContext as ToastStateContext
 } from 'react-aria-components/Toast';
-
 import toastCss from './Toast.module.css';
-
 import {useEvent} from 'react-aria/private/utils/useEvent';
 import {useLocalizedStringFormatter} from 'react-aria/useLocalizedStringFormatter';
 import {useMediaQuery} from './useMediaQuery';

package/src/TreeView.tsx

@@ -41,7 +41,6 @@ import {
   UnsafeStyles
 } from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ProgressCircle} from './ProgressCircle';
 import {Provider, useContextProps} from 'react-aria-components/slots';

package/src/style-utils.ts

@@ -375,6 +375,14 @@ export const widthProperties = ['width', 'minWidth', 'maxWidth'] as const;
 
 export const heightProperties = ['size', 'height', 'minHeight', 'maxHeight'] as const;
 
+export const fontProperties = [
+  'font',
+  'fontFamily',
+  'fontWeight',
+  'lineHeight',
+  'fontSize'
+] as const;
+
 export type StylesProp = StyleString<
   (typeof allowedOverrides)[number] | (typeof widthProperties)[number]
 >;
@@ -384,6 +392,8 @@ export type StylesPropWithHeight = StyleString<
   | (typeof heightProperties)[number]
 >;
 export type StylesPropWithoutWidth = StyleString<(typeof allowedOverrides)[number]>;
+
+export type StylesPropWithFont = StyleString<(typeof fontProperties)[number]>;
 export type UnsafeClassName = string & {properties?: never};
 export interface UnsafeStyles {
   /**
@@ -404,8 +414,9 @@ export interface StyleProps extends UnsafeStyles {
   styles?: StylesProp;
 }
 
-export function getAllowedOverrides({width = true, height = false} = {}): string[] {
+export function getAllowedOverrides({width = true, height = false, font = false} = {}): string[] {
   return (allowedOverrides as unknown as string[])
     .concat(width ? widthProperties : [])
-    .concat(height ? heightProperties : []);
+    .concat(height ? heightProperties : [])
+    .concat(font ? ['fontFamily', 'fontWeight', 'lineHeight', 'fontSize'] : []);
 }