@react-spectrum/s2 0.9.1 → 0.10.0

package/src/RangeCalendar.tsx

@@ -13,35 +13,103 @@
 import {
   RangeCalendar as AriaRangeCalendar,
   RangeCalendarProps as AriaRangeCalendarProps,
-  Button,
-  CalendarCell,
-  CalendarGrid,
+  ContextValue,
   DateValue,
-  Heading,
   Text
 } from 'react-aria-components';
-import {ReactNode} from 'react';
+import {CalendarButton, CalendarGrid, CalendarHeading} from './Calendar';
+import ChevronLeftIcon from '../s2wf-icons/S2_Icon_ChevronLeft_20_N.svg';
+import ChevronRightIcon from '../s2wf-icons/S2_Icon_ChevronRight_20_N.svg';
+import {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
+import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {Header} from './';
+import {helpTextStyles} from './Field';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
+import {style} from '../style' with {type: 'macro'};
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useSpectrumContextProps} from './useSpectrumContextProps';
 
 
 export interface RangeCalendarProps<T extends DateValue>
-  extends AriaRangeCalendarProps<T> {
-  errorMessage?: string
+  extends Omit<AriaRangeCalendarProps<T>, 'visibleDuration' | 'style' | 'className' | 'styles' | keyof GlobalDOMAttributes>,
+  StyleProps {
+  /**
+   * The error message to display when the calendar is invalid.
+   */
+  errorMessage?: ReactNode,
+  /**
+   * The number of months to display at once.
+   * @default 1
+   */
+  visibleMonths?: number
 }
 
-export function RangeCalendar<T extends DateValue>(
-  {errorMessage, ...props}: RangeCalendarProps<T>
-): ReactNode {
+export const RangeCalendarContext = createContext<ContextValue<Partial<RangeCalendarProps<any>>, HTMLDivElement>>(null);
+
+
+const calendarStyles = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 24,
+  width: 'fit'
+}, getAllowedOverrides());
+
+const headerStyles = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: 'full'
+});
+
+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 {
+    visibleMonths = 1,
+    errorMessage,
+    UNSAFE_style,
+    UNSAFE_className,
+    styles,
+    ...otherProps
+  } = props;
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
+
   return (
-    <AriaRangeCalendar {...props}>
-      <header>
-        <Button slot="previous">◀</Button>
-        <Heading />
-        <Button slot="next">▶</Button>
-      </header>
-      <CalendarGrid>
-        {(date) => <CalendarCell date={date} />}
-      </CalendarGrid>
-      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
+    <AriaRangeCalendar
+      {...otherProps}
+      ref={ref}
+      visibleDuration={{months: visibleMonths}}
+      style={UNSAFE_style}
+      className={(UNSAFE_className || '') + calendarStyles(null, styles)}>
+      {({isInvalid, isDisabled}) => {
+        return (
+          <>
+            <Header styles={headerStyles}>
+              <CalendarButton slot="previous"><ChevronLeftIcon /></CalendarButton>
+              <CalendarHeading />
+              <CalendarButton slot="next"><ChevronRightIcon /></CalendarButton>
+            </Header>
+            <div
+              className={style({
+                display: 'flex',
+                flexDirection: 'row',
+                gap: 24,
+                width: 'full',
+                alignItems: 'start'
+              })}>
+              {Array.from({length: visibleMonths}).map((_, i) => (
+                <CalendarGrid months={i} key={i} />
+              ))}
+            </div>
+            {isInvalid && (
+              <Text slot="errorMessage" className={helpTextStyles({isInvalid, isDisabled, size: 'M'})}>
+                {errorMessage || stringFormatter.format('calendar.invalidSelection', {selectedCount: 2})}
+              </Text>
+            )}
+          </>
+        );
+      }}
     </AriaRangeCalendar>
   );
-}
+});

package/src/RangeSlider.tsx

@@ -34,7 +34,13 @@ export interface RangeSliderProps extends Omit<SliderBaseProps<RangeValue<number
   /**
    * The name of the end input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
    */
-  endName?: string
+  endName?: string,
+  /**
+   * The `<form>` element to associate the input with.
+   * The value of this attribute must be the id of a `<form>` in the same document.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+   */
+  form?: string
 }
 
 export const RangeSliderContext = createContext<ContextValue<Partial<RangeSliderProps>, FocusableRefValue<HTMLDivElement>>>(null);
@@ -58,12 +64,19 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props:
 
   let {direction} = useLocale();
   let cssDirection = direction === 'rtl' ? 'right' : 'left';
+  let defaultThumbValues: number[] | undefined = undefined;
+  if (props.defaultValue != null) {
+    defaultThumbValues = [props.defaultValue.start, props.defaultValue.end];
+  } else if (props.value == null) {
+    // make sure that useSliderState knows we have two handles
+    defaultThumbValues = [props.minValue ?? 0, props.maxValue ?? 100];
+  }
 
   return (
     <SliderBase
       {...props}
       value={props.value ? [props.value.start, props.value.end] : undefined}
-      defaultValue={props.defaultValue ? [props.defaultValue.start, props.defaultValue.end] : [props.minValue ?? 0, props.maxValue ?? 100]}
+      defaultValue={defaultThumbValues}
       onChange={v => props.onChange?.({start: v[0], end: v[1]})}
       onChangeEnd={v => props.onChangeEnd?.({start: v[0], end: v[1]})}
       sliderRef={domRef}>
@@ -82,6 +95,7 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props:
               className={thumbContainer}
               index={0}
               name={props.startName}
+              form={props.form}
               aria-label={stringFormatter.format('slider.minimum')}
               ref={lowerThumbRef}
               style={(renderProps) => pressScale(lowerThumbRef, {
@@ -103,6 +117,7 @@ export const RangeSlider = /*#__PURE__*/ forwardRef(function RangeSlider(props:
               className={thumbContainer}
               index={1}
               name={props.endName}
+              form={props.form}
               aria-label={stringFormatter.format('slider.maximum')}
               ref={upperThumbRef}
               style={(renderProps) => pressScale(upperThumbRef, {

package/src/SearchField.tsx

@@ -24,14 +24,14 @@ import {createFocusableRef} from '@react-spectrum/utils';
 import {field, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {FieldGroup, FieldLabel, HelpText, Input} from './Field';
 import {FormContext, useFormProps} from './Form';
-import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
+import {GlobalDOMAttributes, HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 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'>, StyleProps, SpectrumLabelableProps, HelpTextProps {
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'className' | 'style' | 'children' | keyof GlobalDOMAttributes>, StyleProps, SpectrumLabelableProps, HelpTextProps {
   /**
    * The size of the SearchField.
    *

package/src/SegmentedControl.tsx

@@ -203,6 +203,7 @@ function DefaultSelectionTracker(props: DefaultSelectionTrackProps) {
       isRegistered.current = true;
       state.toggleKey(value);
     }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -229,7 +230,7 @@ export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedC
 
   useLayoutEffect(() => {
     register?.(props.id);
-  }, []);
+  }, [register, props.id]);
 
   useLayoutEffect(() => {
     if (isSelected && prevRef?.current && currentSelectedRef?.current && !reduceMotion) {
@@ -250,7 +251,7 @@ export const SegmentedControlItem = /*#__PURE__*/ forwardRef(function SegmentedC
 
       prevRef.current = null;
     }
-  }, [isSelected, reduceMotion]);
+  }, [isSelected, reduceMotion, prevRef, currentSelectedRef]);
 
   return (
     <ToggleButton

package/src/Skeleton.tsx

@@ -120,13 +120,14 @@ export function SkeletonWrapper({children}: {children: SkeletonElement}): ReactN
     return children;
   }
 
-  let childRef = 'ref' in children ? children.ref as any : children.props.ref;
+  let childRef = 'ref' in children && !Object.getOwnPropertyDescriptor(children, 'ref')?.get ? children.ref as any : children.props.ref;
   return (
     <SkeletonContext.Provider value={null}>
       {isLoading ? cloneElement(children, {
         ref: mergeRefs(childRef, animation),
         className: (children.props.className || '') + ' ' + loadingStyle,
-        inert: 'true'
+        // @ts-ignore - compatibility with React < 19
+        inert: inertValue(true)
       }) : children}
     </SkeletonContext.Provider>
   );

package/src/Slider.tsx

@@ -23,7 +23,7 @@ import {clamp} from '@react-aria/utils';
 import {controlFont, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
 import {FieldLabel} from './Field';
-import {FocusableRef, FocusableRefValue, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
+import {FocusableRef, FocusableRefValue, GlobalDOMAttributes, InputDOMProps, SpectrumLabelableProps} from '@react-types/shared';
 import {focusRing, style} from '../style' with {type: 'macro'};
 import {FormContext, useFormProps} from './Form';
 import {mergeStyles} from '../style/runtime';
@@ -32,7 +32,7 @@ import {useFocusableRef} from '@react-spectrum/utils';
 import {useLocale, useNumberFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation'>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {
+export interface SliderBaseProps<T> extends Omit<AriaSliderProps<T>, 'children' | 'style' | 'className' | 'orientation' | keyof GlobalDOMAttributes>, Omit<SpectrumLabelableProps, 'necessityIndicator' | 'isRequired'>, StyleProps {
   children?: ReactNode,
   /**
    * The size of the Slider.
@@ -390,6 +390,9 @@ export function SliderBase<T extends number | number[]>(props: SliderBaseProps<T
   );
 }
 
+/**
+ * Sliders allow users to quickly select a value within a range. They should be used when the upper and lower bounds to the range are invariable.
+ */
 export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProps, ref: FocusableRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, SliderContext);
   let formContext = useContext(FormContext);
@@ -426,7 +429,7 @@ export const Slider = /*#__PURE__*/ forwardRef(function Slider(props: SliderProp
             <>
               <div className={upperTrack({isDisabled, trackStyle})} />
               <div style={{width: `${Math.abs(fillWidth) * 100}%`, [cssDirection]: `${offset * 100}%`}} className={filledTrack({isDisabled, isEmphasized, trackStyle})} />
-              <SliderThumb  className={thumbContainer} index={0} name={props.name} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>
+              <SliderThumb  className={thumbContainer} index={0} name={props.name} form={props.form} ref={thumbRef} style={(renderProps) => pressScale(thumbRef, {transform: 'translate(-50%, -50%)'})({...renderProps, isPressed: renderProps.isDragging})}>
                 {(renderProps) => (
                   <div className={thumbHitArea({size})}>
                     <div

package/src/Switch.tsx

@@ -14,13 +14,14 @@ import {
   Switch as AriaSwitch,
   SwitchProps as AriaSwitchProps,
   ContextValue,
-  SwitchRenderProps
+  SwitchRenderProps,
+  useLocale
 } from 'react-aria-components';
 import {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};
 import {CenterBaseline} from './CenterBaseline';
 import {controlFont, controlSize, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';
-import {FocusableRef, FocusableRefValue} from '@react-types/shared';
+import {Direction, FocusableRef, FocusableRefValue, GlobalDOMAttributes} from '@react-types/shared';
 import {FormContext, useFormProps} from './Form';
 import {pressScale} from './pressScale';
 import {useFocusableRef} from '@react-spectrum/utils';
@@ -41,7 +42,7 @@ interface SwitchStyleProps {
 
 interface RenderProps extends SwitchRenderProps, SwitchStyleProps {}
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, SwitchStyleProps {
+export interface SwitchProps extends Omit<AriaSwitchProps, 'className' | 'style' | 'children'  | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | keyof GlobalDOMAttributes>, StyleProps, SwitchStyleProps {
   children?: ReactNode
 }
 
@@ -124,7 +125,7 @@ const handle = style<RenderProps>({
 });
 
 // Use an inline style to calculate the transform so we can combine it with the press scale.
-const transformStyle = ({isSelected}: SwitchRenderProps) => ({
+const transformStyle = ({isSelected, direction}: SwitchRenderProps & {direction: Direction}) => {
   // In the default state, the handle is 8px smaller than the track. When selected it grows to 6px smaller than the track.
   // Normally this could be calculated as a scale transform with (trackHeight - 8px) / trackHeight, however,
   // CSS does not allow division with units. To solve this we use a 3d perspective transform. Perspective is the
@@ -143,11 +144,15 @@ const transformStyle = ({isSelected}: SwitchRenderProps) => ({
   //
   //    defaultPerspective = trackHeight - 8px
   //    selectedPerspective = 2 * (trackHeight - 6px)
-  transform: isSelected
-    // The selected state also translates the X position to the end of the track (minus the borders).
-    ? 'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'
-    : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
-});
+  const placement =
+    direction === 'ltr'
+      ? // The selected state also translates the X position to the end of the track (minus the borders).
+        'translateX(calc(var(--trackWidth) - 100% - 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)'
+      : 'translateX(calc(100% - var(--trackWidth) + 4px)) perspective(calc(2 * (var(--trackHeight) - 6px))) translateZ(-4px)';
+  return {
+    transform: isSelected ? placement : 'perspective(calc(var(--trackHeight) - 8px)) translateZ(-4px)'
+  };
+};
 
 /**
  * Switches allow users to turn an individual option on or off.
@@ -160,6 +165,7 @@ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProp
   let domRef = useFocusableRef(ref, inputRef);
   let handleRef = useRef(null);
   let isInForm = !!useContext(FormContext);
+  let {direction} = useLocale();
   props = useFormProps(props);
   return (
     <AriaSwitch
@@ -179,7 +185,7 @@ export const Switch = /*#__PURE__*/ forwardRef(function Switch(props: SwitchProp
               })}>
               <div
                 ref={handleRef}
-                style={pressScale(handleRef, transformStyle)(renderProps)}
+                style={pressScale(handleRef, transformStyle)({...renderProps, direction})}
                 className={handle(renderProps)} />
             </div>
           </CenterBaseline>

package/src/TableView.tsx

@@ -38,8 +38,8 @@ import {
   RowRenderProps,
   TableBodyRenderProps,
   TableLayout,
+  TableLoadMoreItem,
   TableRenderProps,
-  UNSTABLE_TableLoadingSentinel,
   useSlottedContext,
   useTableOptions,
   Virtualizer
@@ -48,7 +48,7 @@ import {centerPadding, controlFont, getAllowedOverrides, StylesPropWithHeight, U
 import {Checkbox} from './Checkbox';
 import Chevron from '../ui-icons/Chevron';
 import {ColumnSize} from '@react-types/table';
-import {DOMRef, DOMRefValue, forwardRefType, LoadingState, Node} from '@react-types/shared';
+import {DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes, LoadingState, Node} from '@react-types/shared';
 import {GridNode} from '@react-types/grid';
 import {IconContext} from './Icon';
 // @ts-ignore
@@ -109,7 +109,7 @@ interface S2TableProps {
 }
 
 // TODO: Note that loadMore and loadingState are now on the Table instead of on the TableBody
-export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks'>, UnsafeStyles, S2TableProps {
+export interface TableViewProps extends Omit<RACTableProps, 'style' | 'disabledBehavior' | 'className' | 'onRowAction' | 'selectionBehavior' | 'onScroll' | 'onCellAction' | 'dragAndDropHooks' | keyof GlobalDOMAttributes>, UnsafeStyles, S2TableProps {
   /** Spectrum-defined styles, returned by the `style()` macro. */
   styles?: StylesPropWithHeight
 }
@@ -196,11 +196,10 @@ export class S2TableLayout<T> extends TableLayout<T> {
     if (!header) {
       return [];
     }
-    let {children, layoutInfo} = body;
+    let {layoutInfo} = body;
     // TableLayout's buildCollection always sets the body width to the max width between the header width, but
     // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty
-    // TODO: we may want to adjust RAC layouts to do something simlar? Current users of RAC table will probably run into something similar
-    let isEmptyOrLoading = children?.length === 0 || (children?.length === 1 && children[0].layoutInfo.type === 'loader');
+    let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
     if (isEmptyOrLoading) {
       layoutInfo.rect.width = this.virtualizer!.visibleRect.width - 80;
     }
@@ -219,7 +218,7 @@ export class S2TableLayout<T> extends TableLayout<T> {
     // If performing first load or empty, the body will be sticky so we don't want to apply sticky to the loader, otherwise it will
     // affect the positioning of the empty state renderer
     let collection = this.virtualizer!.collection;
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    let isEmptyOrLoading = collection?.size === 0;
     layoutInfo.isSticky = !isEmptyOrLoading;
     return layoutNode;
   }
@@ -227,11 +226,11 @@ export class S2TableLayout<T> extends TableLayout<T> {
   // y is the height of the headers
   protected buildBody(y: number): LayoutNode {
     let layoutNode = super.buildBody(y);
-    let {children, layoutInfo} = layoutNode;
+    let {layoutInfo} = layoutNode;
     // Needs overflow for sticky loader
     layoutInfo.allowOverflow = true;
     // If loading or empty, we'll want the body to be sticky and centered
-    let isEmptyOrLoading = children?.length === 0 || (children?.length === 1 && children[0].layoutInfo.type === 'loader');
+    let isEmptyOrLoading = this.virtualizer?.collection.size === 0;
     if (isEmptyOrLoading) {
       layoutInfo.rect = new Rect(40, 40, this.virtualizer!.visibleRect.width - 80, this.virtualizer!.visibleRect.height - 80);
       layoutInfo.isSticky = true;
@@ -373,7 +372,7 @@ const centeredWrapper = style({
   height: 'full'
 });
 
-export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className'> {}
+export interface TableBodyProps<T> extends Omit<RACTableBodyProps<T>, 'style' | 'className' | keyof GlobalDOMAttributes> {}
 
 /**
  * The body of a `<Table>`, containing the table rows.
@@ -390,13 +389,13 @@ export const TableBody = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
   // This is because we don't distinguish between loadingMore and loading in the layout, resulting in a different rect being used to build the body. Perhaps can be considered as a user error
   // if they pass loadingMore without having any other items in the table. Alternatively, could update the layout so it knows the current loading state.
   let loadMoreSpinner = (
-    <UNSTABLE_TableLoadingSentinel isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full'})}>
+    <TableLoadMoreItem isLoading={loadingState === 'loadingMore'} onLoadMore={onLoadMore} className={style({height: 'full', width: 'full'})}>
       <div className={centeredWrapper}>
         <ProgressCircle
           isIndeterminate
           aria-label={stringFormatter.format('table.loadingMore')} />
       </div>
-    </UNSTABLE_TableLoadingSentinel>
+    </TableLoadMoreItem>
   );
 
   // If the user is rendering their rows in dynamic fashion, wrap their render function in Collection so we can inject
@@ -507,7 +506,7 @@ const columnStyles = style({
   forcedColorAdjust: 'none'
 });
 
-export interface ColumnProps extends RACColumnProps {
+export interface ColumnProps extends Omit<RACColumnProps, keyof GlobalDOMAttributes> {
   /** Whether the column should render a divider between it and the next column. */
   showDivider?: boolean,
   /** Whether the column allows resizing. */
@@ -863,7 +862,7 @@ const selectAllCheckboxColumn = style({
   backgroundColor: 'gray-75'
 });
 
-export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd'> {}
+export interface TableHeaderProps<T> extends Omit<RACTableHeaderProps<T>, 'style' | 'className' | 'onHoverChange' | 'onHoverStart' | 'onHoverEnd' | keyof GlobalDOMAttributes> {}
 
 /**
  * A header within a `<Table>`, containing the table columns.
@@ -1119,7 +1118,7 @@ const row = style<RowRenderProps & S2TableProps>({
   forcedColorAdjust: 'none'
 });
 
-export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue' | 'dependencies'>  {}
+export interface RowProps<T> extends Pick<RACRowProps<T>, 'id' | 'columns' | 'children' | 'textValue' | 'dependencies' | keyof GlobalDOMAttributes>  {}
 
 /**
  * A row within a `<Table>`.