react-aria-components 1.0.0-beta.0 → 1.0.0-beta.2

package/src/Popover.tsx

@@ -15,6 +15,7 @@ import {ContextValue, forwardRefType, HiddenContext, RenderProps, SlotProps, use
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
+import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, RefObject, useContext} from 'react';
 
 export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {
@@ -45,18 +46,13 @@ export interface PopoverRenderProps {
   isExiting: boolean
 }
 
-interface PopoverContextValue extends PopoverProps {
-  state?: OverlayTriggerState,
-  triggerRef?: RefObject<Element>
-}
-
-export const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
+export const PopoverContext = createContext<ContextValue<PopoverProps, HTMLElement>>(null);
 
 function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, PopoverContext);
-  let ctx = props as PopoverContextValue;
+  let contextState = useContext(OverlayTriggerStateContext);
   let localState = useOverlayTriggerState(props);
-  let state = props.isOpen != null || props.defaultOpen != null || !ctx?.state ? localState : ctx.state;
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
   let isExiting = useExitAnimation(ref, state.isOpen);
   let isHidden = useContext(HiddenContext);
 
@@ -81,7 +77,7 @@ function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   return (
     <PopoverInner
       {...props}
-      triggerRef={ctx.triggerRef!}
+      triggerRef={props.triggerRef!}
       state={state}
       popoverRef={ref}
       isExiting={isExiting} />
@@ -126,13 +122,13 @@ function PopoverInner({state, isExiting, ...props}: PopoverInnerProps) {
         {...mergeProps(filterDOMProps(props as any), popoverProps)}
         {...renderProps}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         style={style}
         data-placement={placement}
         data-entering={isEntering || undefined}
         data-exiting={isExiting || undefined}>
         {!props.isNonModal && <DismissButton onDismiss={state.close} />}
-        <OverlayArrowContext.Provider value={{arrowProps, placement}}>
+        <OverlayArrowContext.Provider value={{...arrowProps, placement}}>
           {renderProps.children}
         </OverlayArrowContext.Provider>
         <DismissButton onDismiss={state.close} />

package/src/ProgressBar.tsx

@@ -65,7 +65,7 @@ function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>)
   });
 
   return (
-    <div {...progressBarProps} {...renderProps} ref={ref} slot={props.slot}>
+    <div {...progressBarProps} {...renderProps} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>

package/src/RadioGroup.tsx

@@ -11,7 +11,7 @@
  */
 
 import {AriaRadioGroupProps, AriaRadioProps, Orientation, useFocusRing, useHover, usePress, useRadio, useRadioGroup, VisuallyHidden} from 'react-aria';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState} from 'react-stately';
@@ -103,7 +103,7 @@ export interface RadioRenderProps {
 
 export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
 export const RadioContext = createContext<ContextValue<Partial<RadioProps>, HTMLInputElement>>(null);
-let InternalRadioContext = createContext<RadioGroupState | null>(null);
+export const RadioGroupStateContext = createContext<RadioGroupState | null>(null);
 
 function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, RadioGroupContext);
@@ -132,7 +132,7 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
       {...radioGroupProps}
       {...renderProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       data-orientation={props.orientation || 'vertical'}
       data-invalid={state.isInvalid || undefined}
       data-disabled={state.isDisabled || undefined}
@@ -140,7 +140,7 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
       data-required={state.isRequired || undefined}>
       <Provider
         values={[
-          [InternalRadioContext, state],
+          [RadioGroupStateContext, state],
           [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
           [TextContext, {
             slots: {
@@ -157,10 +157,10 @@ function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
 
 function Radio(props: RadioProps, ref: ForwardedRef<HTMLInputElement>) {
   [props, ref] = useContextProps(props, ref, RadioContext);
-  let state = React.useContext(InternalRadioContext)!;
+  let state = React.useContext(RadioGroupStateContext)!;
   let domRef = useObjectRef(ref);
   let {inputProps, isSelected, isDisabled, isPressed: isPressedKeyboard} = useRadio({
-    ...props,
+    ...removeDataAttributes<RadioProps>(props),
     // ReactNode type doesn't allow function children.
     children: typeof props.children === 'function' ? true : props.children
   }, state, domRef);

package/src/SearchField.tsx

@@ -12,7 +12,7 @@
 
 import {AriaSearchFieldProps, useSearchField} from 'react-aria';
 import {ButtonContext} from './Button';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
@@ -52,7 +52,7 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
   let [labelRef, label] = useSlot();
   let state = useSearchFieldState(props);
   let {labelProps, inputProps, clearButtonProps, descriptionProps, errorMessageProps} = useSearchField({
-    ...props,
+    ...removeDataAttributes(props),
     label
   }, state, inputRef);
 
@@ -75,7 +75,7 @@ function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>)
       {...DOMProps}
       {...renderProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       data-empty={state.value === '' || undefined}
       data-disabled={props.isDisabled || undefined}
       data-invalid={props.isInvalid || undefined}>

package/src/Select.tsx

@@ -10,13 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaSelectProps, HiddenSelect, useFocusRing, useSelect} from 'react-aria';
+import {AriaSelectProps, HiddenSelect, useFocusRing, useLocalizedStringFormatter, useSelect} from 'react-aria';
 import {ButtonContext} from './Button';
-import {ContextValue, forwardRefType, Hidden, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {CollectionDocumentContext, ItemRenderProps, useCollectionDocument} from './Collection';
+import {ContextValue, forwardRefType, Hidden, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
-import {ItemRenderProps, useCollectionDocument} from './Collection';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {LabelContext} from './Label';
-import {ListBoxContext} from './ListBox';
+import {ListBoxContext, ListStateContext} from './ListBox';
+import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {SelectState, useSelectState} from 'react-stately';
@@ -57,14 +60,8 @@ export interface SelectRenderProps {
 
 export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'items'>, RenderProps<SelectRenderProps>, SlotProps {}
 
-interface SelectValueContext {
-  state: SelectState<unknown>,
-  valueProps: HTMLAttributes<HTMLElement>,
-  placeholder?: string
-}
-
 export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
-const InternalSelectContext = createContext<SelectValueContext | null>(null);
+export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
 
 function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SelectContext);
@@ -97,7 +94,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
     menuProps,
     descriptionProps,
     errorMessageProps
-  } = useSelect({...props, label}, state, buttonRef);
+  } = useSelect({...removeDataAttributes(props), label}, state, buttonRef);
 
   // Make menu width match input + button
   let [buttonWidth, setButtonWidth] = useState<string | null>(null);
@@ -128,24 +125,28 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
       <Hidden>
         <Provider
           values={[
-            [InternalSelectContext, {state, valueProps, placeholder: props.placeholder}],
-            [ListBoxContext, {document}]
+            [SelectContext, props],
+            [SelectStateContext, state],
+            [CollectionDocumentContext, document]
           ]}>
           {renderProps.children}
         </Provider>
       </Hidden>
       <Provider
         values={[
-          [InternalSelectContext, {state, valueProps, placeholder: props.placeholder}],
+          [SelectContext, props],
+          [SelectStateContext, state],
+          [SelectValueContext, valueProps],
           [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
           [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: state.isOpen}],
+          [OverlayTriggerStateContext, state],
           [PopoverContext, {
-            state,
             triggerRef: buttonRef,
             placement: 'bottom start',
             style: {'--trigger-width': buttonWidth} as React.CSSProperties
           }],
-          [ListBoxContext, {state, ...menuProps}],
+          [ListBoxContext, menuProps],
+          [ListStateContext, state],
           [TextContext, {
             slots: {
               description: descriptionProps,
@@ -158,7 +159,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
           {...renderProps}
           {...focusProps}
           ref={ref}
-          slot={props.slot}
+          slot={props.slot || undefined}
           data-focused={state.isFocused || undefined}
           data-focus-visible={isFocusVisible || undefined}
           data-open={state.isOpen || undefined}
@@ -196,8 +197,12 @@ export interface SelectValueRenderProps<T> {
 
 export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>> {}
 
+export const SelectValueContext = createContext<ContextValue<SelectValueProps<any>, HTMLSpanElement>>(null);
+
 function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
-  let {state, valueProps, placeholder} = useContext(InternalSelectContext)!;
+  [props, ref] = useContextProps(props, ref, SelectValueContext);
+  let state = useContext(SelectStateContext)!;
+  let {placeholder} = useSlottedContext(SelectContext)!;
   let selectedItem = state.selectedKey != null
     ? state.collection.getItem(state.selectedKey)
     : null;
@@ -217,10 +222,11 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
     });
   }
 
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+
   let renderProps = useRenderProps({
     ...props,
-    // TODO: localize this.
-    defaultChildren: rendered || placeholder || 'Select an item',
+    defaultChildren: rendered || placeholder || stringFormatter.format('selectPlaceholder'),
     defaultClassName: 'react-aria-SelectValue',
     values: {
       selectedItem: state.selectedItem?.value as T ?? null,
@@ -230,10 +236,9 @@ function SelectValue<T extends object>(props: SelectValueProps<T>, ref: Forwarde
   });
 
   let DOMProps = filterDOMProps(props);
-  delete DOMProps.id;
 
   return (
-    <span ref={ref} {...DOMProps} {...valueProps} {...renderProps} data-placeholder={!selectedItem || undefined}>
+    <span ref={ref} {...DOMProps} {...renderProps} data-placeholder={!selectedItem || undefined}>
       {/* clear description and error message slots */}
       <TextContext.Provider value={undefined}>
         {renderProps.children}

package/src/Separator.tsx

@@ -45,7 +45,7 @@ function Separator(originalProps: SeparatorProps, originalRef: ForwardedRef<HTML
       style={style}
       className={className ?? 'react-aria-Separator'}
       ref={ref}
-      slot={props.slot} />
+      slot={props.slot || undefined} />
   );
 }
 

package/src/Slider.tsx

@@ -11,11 +11,10 @@
  */
 
 import {AriaSliderProps, AriaSliderThumbProps, mergeProps, Orientation, useFocusRing, useHover, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
-import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {DOMAttributes} from '@react-types/shared';
-import {filterDOMProps, mergeRefs} from '@react-aria/utils';
+import {ContextValue, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {filterDOMProps} from '@react-aria/utils';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, OutputHTMLAttributes, RefObject, useContext, useRef} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, OutputHTMLAttributes, RefObject, useContext, useRef} from 'react';
 import {SliderState, useSliderState} from 'react-stately';
 
 export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, SlotProps {
@@ -25,15 +24,10 @@ export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps
   formatOptions?: Intl.NumberFormatOptions
 }
 
-interface SliderContextValue {
-  state: SliderState,
-  trackProps: DOMAttributes,
-  outputProps: OutputHTMLAttributes<HTMLOutputElement>,
-  trackRef: RefObject<HTMLDivElement>
-}
-
 export const SliderContext = createContext<ContextValue<SliderProps, HTMLDivElement>>(null);
-const InternalSliderContext = createContext<SliderContextValue | null>(null);
+export const SliderStateContext = createContext<SliderState | null>(null);
+export const SliderTrackContext = createContext<ContextValue<SliderTrackContextValue, HTMLDivElement>>(null);
+export const SliderOutputContext = createContext<ContextValue<SliderOutputContextValue, HTMLOutputElement>>(null);
 
 export interface SliderRenderProps {
   /**
@@ -81,7 +75,9 @@ function Slider<T extends number | number[]>(props: SliderProps<T>, ref: Forward
   return (
     <Provider
       values={[
-        [InternalSliderContext, {state, trackProps, trackRef, outputProps}],
+        [SliderStateContext, state],
+        [SliderTrackContext, {...trackProps, ref: trackRef}],
+        [SliderOutputContext, outputProps],
         [LabelContext, {...labelProps, ref: labelRef}]
       ]}>
       <div
@@ -89,7 +85,7 @@ function Slider<T extends number | number[]>(props: SliderProps<T>, ref: Forward
         {...groupProps}
         {...renderProps}
         ref={ref}
-        slot={props.slot}
+        slot={props.slot || undefined}
         data-orientation={state.orientation}
         data-disabled={state.isDisabled || undefined} />
     </Provider>
@@ -103,9 +99,12 @@ const _Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(Slider);
 export {_Slider as Slider};
 
 export interface SliderOutputProps extends RenderProps<SliderRenderProps> {}
+interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'className' | 'style'>, SliderOutputProps {}
 
-function SliderOutput({children, style, className, ...otherProps}: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
-  let {state, outputProps} = useContext(InternalSliderContext)!;
+function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
+  [props, ref] = useContextProps(props, ref, SliderOutputContext);
+  let {children, style, className, ...otherProps} = props;
+  let state = useContext(SliderStateContext)!;
   let renderProps = useRenderProps({
     className,
     style,
@@ -121,7 +120,7 @@ function SliderOutput({children, style, className, ...otherProps}: SliderOutputP
 
   return (
     <output
-      {...mergeProps(filterDOMProps(otherProps as any), outputProps)}
+      {...otherProps}
       {...renderProps}
       ref={ref}
       data-orientation={state.orientation || undefined}
@@ -144,11 +143,12 @@ export interface SliderTrackRenderProps extends SliderRenderProps {
 }
 
 export interface SliderTrackProps extends RenderProps<SliderTrackRenderProps> {}
+interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, SliderTrackProps {}
 
 function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {state, trackProps, trackRef} = useContext(InternalSliderContext)!;
+  [props, ref] = useContextProps(props, ref, SliderTrackContext);
+  let state = useContext(SliderStateContext)!;
   let {hoverProps, isHovered} = useHover({});
-  let domRef = mergeRefs(ref, trackRef);
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-SliderTrack',
@@ -162,9 +162,9 @@ function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>)
 
   return (
     <div
-      {...mergeProps(filterDOMProps(props as any), hoverProps, trackProps)}
+      {...mergeProps(props, hoverProps)}
       {...renderProps}
-      ref={domRef}
+      ref={ref}
       data-hovered={isHovered || undefined}
       data-orientation={state.orientation || undefined}
       data-disabled={state.isDisabled || undefined} />
@@ -212,14 +212,15 @@ export interface SliderThumbRenderProps {
 export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'validationState'>, RenderProps<SliderThumbRenderProps> {}
 
 function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {state, trackRef} = useContext(InternalSliderContext)!;
+  let state = useContext(SliderStateContext)!;
+  let {ref: trackRef} = useSlottedContext(SliderTrackContext)!;
   let {index = 0} = props;
   let inputRef = useRef<HTMLInputElement>(null);
   let [labelRef, label] = useSlot();
   let {thumbProps, inputProps, labelProps, isDragging, isFocused, isDisabled} = useSliderThumb({
     ...props,
     index,
-    trackRef,
+    trackRef: trackRef as RefObject<HTMLDivElement>,
     inputRef,
     label
   }, state);

package/src/Switch.tsx

@@ -11,7 +11,7 @@
  */
 
 import {AriaSwitchProps, mergeProps, useFocusRing, useHover, usePress, useSwitch, VisuallyHidden} from 'react-aria';
-import {ContextValue, forwardRefType, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, forwardRefType, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, useState} from 'react';
 import {ToggleState, useToggleState} from 'react-stately';
@@ -66,7 +66,7 @@ function Switch(props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) {
   [props, ref] = useContextProps(props, ref, SwitchContext);
   let state = useToggleState(props);
   let {inputProps, isSelected, isDisabled, isReadOnly, isPressed: isPressedKeyboard} = useSwitch({
-    ...props,
+    ...removeDataAttributes(props),
     // ReactNode type doesn't allow function children.
     children: typeof props.children === 'function' ? true : props.children
   }, state, ref);
@@ -117,7 +117,7 @@ function Switch(props: SwitchProps, ref: ForwardedRef<HTMLInputElement>) {
   return (
     <label
       {...mergeProps(DOMProps, pressProps, hoverProps, renderProps)}
-      slot={props.slot}
+      slot={props.slot || undefined}
       data-selected={isSelected || undefined}
       data-pressed={pressed || undefined}
       data-hovered={isHovered || undefined}

package/src/Table.tsx

@@ -1,4 +1,4 @@
-import {AriaLabelingProps} from '@react-types/shared';
+import {AriaLabelingProps, LinkDOMProps} from '@react-types/shared';
 import {BaseCollection, CollectionContext, CollectionProps, CollectionRendererContext, ItemRenderProps, NodeValue, useCachedChildren, useCollection, useCollectionChildren, useSSRCollectionNode} from './Collection';
 import {buildHeaderRows, TableColumnResizeState} from '@react-stately/table';
 import {ButtonContext} from './Button';
@@ -6,10 +6,12 @@ import {CheckboxContext} from './Checkbox';
 import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
 import {ContextValue, defaultSlot, DOMProps, forwardRefType, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useTableColumnResizeState, useTableState} from 'react-stately';
-import {DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
-import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
+import {DragAndDropContext, DragAndDropHooks, DropIndicator, DropIndicatorContext, DropIndicatorProps} from './useDragAndDrop';
+import {DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useFocusRing, useHover, useLocale, useLocalizedStringFormatter, useTable, useTableCell, useTableColumnHeader, useTableColumnResize, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox, useVisuallyHidden} from 'react-aria';
 import {filterDOMProps, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {GridNode} from '@react-types/grid';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import React, {createContext, ForwardedRef, forwardRef, Key, ReactElement, ReactNode, RefObject, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 
@@ -35,11 +37,11 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
   }
 
   commit(firstKey: Key, lastKey: Key, isSSR = false) {
-    this.updateColumns();
+    this.updateColumns(isSSR);
     super.commit(firstKey, lastKey, isSSR);
   }
 
-  private updateColumns() {
+  private updateColumns(isSSR: boolean) {
     if (!this.columnsDirty) {
       return;
     }
@@ -73,7 +75,7 @@ class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T
 
     this.headerRows = buildHeaderRows(columnKeyMap, this.columns);
     this.columnsDirty = false;
-    if (this.rowHeaderColumnKeys.size === 0 && this.columns.length > 0) {
+    if (this.rowHeaderColumnKeys.size === 0 && this.columns.length > 0 && !isSSR) {
       throw new Error('A table must have at least one Column with the isRowHeader prop set to true');
     }
   }
@@ -244,16 +246,9 @@ function ResizableTableContainer(props: ResizableTableContainerProps, ref: Forwa
 const _ResizableTableContainer = forwardRef(ResizableTableContainer);
 export {_ResizableTableContainer as ResizableTableContainer};
 
-interface InternalTableContextValue {
-  state: TableState<unknown>,
-  dragAndDropHooks?: DragAndDropHooks,
-  dragState?: DraggableCollectionState,
-  dropState?: DroppableCollectionState,
-  layoutState?: TableColumnResizeState<unknown>
-}
-
 export const TableContext = createContext<ContextValue<TableProps, HTMLTableElement>>(null);
-const InternalTableContext = createContext<InternalTableContextValue | null>(null);
+export const TableStateContext = createContext<TableState<unknown> | null>(null);
+export const TableColumnResizeStateContext = createContext<TableColumnResizeState<unknown> | null>(null);
 
 export interface TableRenderProps {
   /**
@@ -389,7 +384,7 @@ function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
 
   let style = renderProps.style;
   let tableContainerContext = useContext(ResizableTableContainerContext);
-  let layoutState: TableColumnResizeState<unknown> | undefined = undefined;
+  let layoutState: TableColumnResizeState<unknown> | null = null;
   if (tableContainerContext) {
     layoutState = tableContainerContext.useTableColumnResizeState({
       tableWidth: tableContainerContext.tableWidth
@@ -408,7 +403,9 @@ function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
       </TableOptionsContext.Provider>
       <Provider
         values={[
-          [InternalTableContext, {state, dragAndDropHooks, dragState, dropState, layoutState}],
+          [TableStateContext, state],
+          [TableColumnResizeStateContext, layoutState],
+          [DragAndDropContext, {dragAndDropHooks, dragState, dropState}],
           [DropIndicatorContext, {render: TableDropIndicatorWrapper}]
         ]}>
         <FocusScope>
@@ -418,7 +415,7 @@ function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
             {...mergeProps(gridProps, focusProps, droppableCollection?.collectionProps)}
             style={style}
             ref={ref}
-            slot={props.slot}
+            slot={props.slot || undefined}
             data-allows-dragging={isListDraggable || undefined}
             data-drop-target={isRootDropTarget || undefined}
             data-focused={isFocused || undefined}
@@ -599,7 +596,7 @@ export {_TableBody as TableBody};
 
 export interface RowRenderProps extends ItemRenderProps {}
 
-export interface RowProps<T> extends StyleRenderProps<RowRenderProps> {
+export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMProps {
   id?: Key,
   /** A list of columns used when dynamically rendering cells. */
   columns?: Iterable<T>,
@@ -747,7 +744,7 @@ function TableBodyRowGroup<T>({collection, isDroppable}: {collection: TableColle
 
 function TableHeaderRow<T>({item}: {item: GridNode<T>}) {
   let ref = useRef<HTMLTableRowElement>(null);
-  let {state} = useContext(InternalTableContext)!;
+  let state = useContext(TableStateContext)!;
   let {rowProps} = useTableHeaderRow({node: item}, state, ref);
   let {checkboxProps} = useTableSelectAllCheckbox(state);
 
@@ -788,7 +785,7 @@ const ColumnResizerContext = createContext<ColumnResizerContextValue | null>(nul
 
 function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
   let ref = useObjectRef<HTMLTableHeaderCellElement>(column.props.ref);
-  let {state} = useContext(InternalTableContext)!;
+  let state = useContext(TableStateContext)!;
   let {columnHeaderProps} = useTableColumnHeader(
     {node: column},
     state,
@@ -797,7 +794,7 @@ function TableColumnHeader<T>({column}: {column: GridNode<T>}) {
   let {isFocused, isFocusVisible, focusProps} = useFocusRing();
   let {hoverProps, isHovered} = useHover({});
 
-  let {layoutState} = useContext(InternalTableContext)!;
+  let layoutState = useContext(TableColumnResizeStateContext);
   let isResizing = false;
   if (layoutState) {
     isResizing = layoutState.resizingColumn === column.key;
@@ -896,10 +893,11 @@ export interface ColumnResizerProps extends RenderProps<ColumnResizerRenderProps
 }
 
 function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {layoutState} = useContext(InternalTableContext)!;
+  let layoutState = useContext(TableColumnResizeStateContext);
   if (!layoutState) {
     throw new Error('Wrap your <Table> in a <ResizableTableContainer> to enable column resizing');
   }
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let {onResizeStart, onResize, onResizeEnd} = useContext(ResizableTableContainerContext)!;
   let {column, triggerRef} = useContext(ColumnResizerContext)!;
@@ -907,8 +905,7 @@ function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivEleme
   let {resizerProps, inputProps, isResizing} = useTableColumnResize(
     {
       column,
-      // TODO: translate
-      'aria-label': props['aria-label'] || 'Resizer',
+      'aria-label': props['aria-label'] || stringFormatter.format('tableResizer'),
       onResizeStart,
       onResize,
       onResizeEnd,
@@ -986,7 +983,8 @@ export {_ColumnResizer as ColumnResizer};
 
 function TableRow<T>({item}: {item: GridNode<T>}) {
   let ref = useObjectRef<HTMLTableRowElement>(item.props.ref);
-  let {state, dragAndDropHooks, dragState, dropState} = useContext(InternalTableContext)!;
+  let state = useContext(TableStateContext)!;
+  let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext);
   let {rowProps, ...states} = useTableRow(
     {
       node: item,
@@ -1115,7 +1113,8 @@ function TableRow<T>({item}: {item: GridNode<T>}) {
 
 function TableCell<T>({cell}: {cell: GridNode<T>}) {
   let ref = useObjectRef<HTMLTableCellElement>(cell.props.ref);
-  let {state, dragState} = useContext(InternalTableContext)!;
+  let state = useContext(TableStateContext)!;
+  let {dragState} = useContext(DragAndDropContext);
 
   // @ts-ignore
   cell.column = state.collection.columns[cell.index];
@@ -1155,7 +1154,7 @@ function TableCell<T>({cell}: {cell: GridNode<T>}) {
 
 function TableDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
-  let {dragAndDropHooks, dropState} = useContext(InternalTableContext)!;
+  let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
   let buttonRef = useRef<HTMLDivElement>(null);
   let {dropIndicatorProps, isHidden, isDropTarget} = dragAndDropHooks!.useDropIndicator!(
     props,
@@ -1186,7 +1185,7 @@ function TableDropIndicator(props: TableDropIndicatorProps, ref: ForwardedRef<HT
     ...otherProps
   } = props;
 
-  let {state} = useContext(InternalTableContext)!;
+  let state = useContext(TableStateContext)!;
   let {visuallyHiddenProps} = useVisuallyHidden();
   let renderProps = useRenderProps({
     ...otherProps,
@@ -1216,7 +1215,8 @@ function TableDropIndicator(props: TableDropIndicatorProps, ref: ForwardedRef<HT
 const TableDropIndicatorForwardRef = forwardRef(TableDropIndicator);
 
 function RootDropIndicator() {
-  let {state, dragAndDropHooks, dropState} = useContext(InternalTableContext)!;
+  let state = useContext(TableStateContext)!;
+  let {dragAndDropHooks, dropState} = useContext(DragAndDropContext);
   let ref = useRef<HTMLDivElement>(null);
   let {dropIndicatorProps} = dragAndDropHooks!.useDropIndicator!({
     target: {type: 'root'}