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

package/src/Tabs.tsx

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps} from '@react-types/shared';
+import {AriaLabelingProps, LinkDOMProps} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
-import {BaseCollection, CollectionProps, Document, useCollectionDocument, useCollectionPortal, useSSRCollectionNode} from './Collection';
 import {Collection, Node, TabListState, useTabListState} from 'react-stately';
-import {ContextValue, createHideableComponent, forwardRefType, Hidden, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {CollectionDocumentContext, CollectionPortal, CollectionProps, useCollectionDocument, useSSRCollectionNode} from './Collection';
+import {ContextValue, createHideableComponent, forwardRefType, Hidden, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, Key, RefObject, useContext, useMemo} from 'react';
 
@@ -42,7 +42,7 @@ export interface TabListRenderProps {
   state: TabListState<unknown>
 }
 
-export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps {
+export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps {
   id?: Key
 }
 
@@ -111,15 +111,8 @@ export interface TabPanelRenderProps {
   state: TabListState<unknown>
 }
 
-interface InternalTabsContextValue {
-  state: TabListState<object>,
-  orientation: Orientation,
-  keyboardActivation: 'automatic' | 'manual'
-}
-
 export const TabsContext = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);
-const InternalTabsContext = createContext<InternalTabsContextValue | null>(null);
-const DocumentContext = createContext<Document<any, BaseCollection<any>> | null>(null);
+export const TabListStateContext = createContext<TabListState<object> | null>(null);
 
 function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TabsContext);
@@ -136,9 +129,9 @@ function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
       {/* Render a hidden copy of the children so that we can build the collection before constructing the state.
         * This should always come before the real DOM content so we have built the collection by the time it renders during SSR. */}
       <Hidden>
-        <DocumentContext.Provider value={document}>
+        <CollectionDocumentContext.Provider value={document}>
           {children}
-        </DocumentContext.Provider>
+        </CollectionDocumentContext.Provider>
       </Hidden>
       <TabsInner props={props} collection={collection} tabsRef={ref} />
     </>
@@ -152,7 +145,7 @@ interface TabsInnerProps {
 }
 
 function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
-  let {orientation = 'horizontal', keyboardActivation = 'automatic'} = props;
+  let {orientation = 'horizontal'} = props;
   let state = useTabListState({
     ...props,
     collection,
@@ -176,14 +169,18 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
       {...focusProps}
       {...renderProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       data-focused={isFocused || undefined}
       data-orientation={orientation}
       data-focus-visible={isFocusVisible || undefined}
       data-disabled={state.isDisabled || undefined}>
-      <InternalTabsContext.Provider value={{state, orientation, keyboardActivation}}>
+      <Provider
+        values={[
+          [TabsContext, props],
+          [TabListStateContext, state]
+        ]}>
         {renderProps.children}
-      </InternalTabsContext.Provider>
+      </Provider>
     </div>
   );
 }
@@ -195,23 +192,20 @@ const _Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(Tabs);
 export {_Tabs as Tabs};
 
 function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
-  let document = useContext(DocumentContext);
+  let document = useContext(CollectionDocumentContext);
   return document
-    ? <TabListPortal props={props} document={document} />
+    ? <CollectionPortal {...props} />
     : <TabListInner props={props} forwardedRef={ref} />;
 }
 
-function TabListPortal({props, document}) {
-  return <>{useCollectionPortal(props, document)}</>;
-}
-
 interface TabListInnerProps<T> {
   props: TabListProps<T>,
   forwardedRef: ForwardedRef<HTMLDivElement>
 }
 
 function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInnerProps<T>) {
-  let {state, orientation, keyboardActivation} = useContext(InternalTabsContext)!;
+  let state = useContext(TabListStateContext)!;
+  let {orientation = 'horizontal', keyboardActivation = 'automatic'} = useSlottedContext(TabsContext)!;
   let objectRef = useObjectRef(ref);
 
   let {tabListProps} = useTabList({
@@ -269,7 +263,7 @@ export {_Tab as Tab};
 
 function TabInner({item, state}: {item: Node<object>, state: TabListState<object>}) {
   let {key} = item;
-  let ref = useObjectRef<HTMLDivElement>(item.props.ref);
+  let ref = useObjectRef<any>(item.props.ref);
   let {tabProps, isSelected, isDisabled, isPressed} = useTab({key}, state, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover({
@@ -291,12 +285,11 @@ function TabInner({item, state}: {item: Node<object>, state: TabListState<object
     }
   });
 
-  let DOMProps = filterDOMProps(item.props);
-  delete DOMProps.id;
+  let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
 
   return (
-    <div
-      {...mergeProps(DOMProps, tabProps, focusProps, hoverProps, renderProps)}
+    <ElementType
+      {...mergeProps(tabProps, focusProps, hoverProps, renderProps)}
       ref={ref}
       data-selected={isSelected || undefined}
       data-disabled={isDisabled || undefined}
@@ -307,7 +300,7 @@ function TabInner({item, state}: {item: Node<object>, state: TabListState<object
 }
 
 function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {
-  const {state} = useContext(InternalTabsContext)!;
+  const state = useContext(TabListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {tabPanelProps} = useTabPanel(props, state, ref);
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();

package/src/TagGroup.tsx

@@ -11,13 +11,15 @@
  */
 
 import {AriaTagGroupProps, useFocusRing, useHover, useTag, useTagGroup} from 'react-aria';
-import {BaseCollection, CollectionProps, Document, ItemProps, ItemRenderProps, useCachedChildren, useCollectionDocument, useCollectionPortal, useSSRCollectionNode} from './Collection';
 import {ButtonContext} from './Button';
+import {CollectionDocumentContext, CollectionProps, ItemProps, ItemRenderProps, useCachedChildren, useCollectionDocument, useCollectionPortal, useSSRCollectionNode} from './Collection';
 import {ContextValue, DOMProps, forwardRefType, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
 import {LabelContext} from './Label';
-import {ListState, Node, useListState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, Key, ReactNode, RefObject, useContext, useEffect, useRef} from 'react';
+import {LinkDOMProps} from '@react-types/shared';
+import {ListStateContext} from './ListBox';
+import {Node, useListState} from 'react-stately';
+import React, {createContext, ForwardedRef, forwardRef, Key, ReactNode, useContext, useEffect, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps {}
@@ -45,15 +47,8 @@ export interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'
   renderEmptyState?: () => ReactNode
 }
 
-interface InternalTagGroupContextValue {
-  state: ListState<any>,
-  document: Document<any, BaseCollection<any>>,
-  gridProps: HTMLAttributes<HTMLElement>,
-  tagListRef: RefObject<HTMLDivElement>
-}
-
 export const TagGroupContext = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);
-const InternalTagGroupContext = createContext<InternalTagGroupContextValue | null>(null);
+export const TagListContext = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);
 
 function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TagGroupContext);
@@ -84,13 +79,15 @@ function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {
     <div
       {...domProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       className={props.className ?? 'react-aria-TagGroup'}
       style={props.style}>
       <Provider
         values={[
           [LabelContext, {...labelProps, elementType: 'span', ref: labelRef}],
-          [InternalTagGroupContext, {state, document, gridProps, tagListRef}],
+          [TagListContext, {...gridProps, ref: tagListRef}],
+          [ListStateContext, state],
+          [CollectionDocumentContext, document],
           [TextContext, {
             slots: {
               description: descriptionProps,
@@ -112,8 +109,7 @@ export {_TagGroup as TagGroup};
 
 function TagList<T extends object>(props: TagListProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>) {
   // Render the portal first so that we have the collection by the time we render the DOM in SSR.
-  let {document} = useContext(InternalTagGroupContext)!;
-  let portal = useCollectionPortal(props, document);
+  let portal = useCollectionPortal(props);
   return (
     <>
       {portal}
@@ -128,8 +124,10 @@ interface TagListInnerProps<T> {
 }
 
 function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps<T>) {
-  let {state, gridProps, tagListRef} = useContext(InternalTagGroupContext)!;
-  let ref = mergeRefs(tagListRef, forwardedRef);
+  let state = useContext(ListStateContext)!;
+  let [gridProps, ref] = useContextProps(props, forwardedRef, TagListContext);
+  delete gridProps.items;
+  delete gridProps.renderEmptyState;
 
   let children = useCachedChildren({
     items: state.collection,
@@ -159,7 +157,6 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
     <div
       {...mergeProps(gridProps, focusProps)}
       {...renderProps}
-      {...filterDOMProps(props as any)}
       ref={ref}
       data-empty={state.collection.size === 0 || undefined}
       data-focused={isFocused || undefined}
@@ -183,7 +180,7 @@ export interface TagRenderProps extends Omit<ItemRenderProps, 'allowsDragging' |
   allowsRemoving: boolean
 }
 
-export interface TagProps extends RenderProps<TagRenderProps> {
+export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps {
   /** A unique id for the tag. */
   id?: Key,
   /**
@@ -204,7 +201,7 @@ const _Tag = /*#__PURE__*/ (forwardRef as forwardRefType)(Tag);
 export {_Tag as Tag};
 
 function TagItem({item}) {
-  let {state} = useContext(InternalTagGroupContext)!;
+  let state = useContext(ListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(item.props.ref);
   let {focusProps, isFocusVisible} = useFocusRing({within: true});
   let {rowProps, gridCellProps, removeButtonProps, ...states} = useTag({item}, state, ref);

package/src/TextField.tsx

@@ -11,7 +11,7 @@
  */
 
 import {AriaTextFieldProps, useTextField} from 'react-aria';
-import {ContextValue, DOMProps, forwardRefType, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, DOMProps, forwardRefType, Provider, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
@@ -45,7 +45,7 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   let [labelRef, label] = useSlot();
   let [inputElementType, setInputElementType] = useState('input');
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField<any>({
-    ...props,
+    ...removeDataAttributes(props),
     inputElementType,
     label
   }, inputRef);
@@ -73,7 +73,7 @@ function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
       {...filterDOMProps(props)}
       {...renderProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       data-disabled={props.isDisabled || undefined}
       data-invalid={props.isInvalid || undefined}>
       <Provider

package/src/ToggleButton.tsx

@@ -49,7 +49,7 @@ function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElem
       {...mergeProps(buttonProps, focusProps, hoverProps)}
       {...renderProps}
       ref={ref}
-      slot={props.slot}
+      slot={props.slot || undefined}
       data-focused={isFocused || undefined}
       data-disabled={props.isDisabled || undefined}
       data-pressed={isPressed || undefined}

package/src/Tooltip.tsx

@@ -10,20 +10,26 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMAttributes, FocusableElement} from '@react-types/shared';
+import {AriaLabelingProps, FocusableElement} from '@react-types/shared';
+import {ContextValue, forwardRefType, Provider, RenderProps, useContextProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
 import {FocusableProvider} from '@react-aria/focus';
-import {forwardRefType, RenderProps, useEnterAnimation, useExitAnimation, useRenderProps} from './utils';
 import {mergeProps, OverlayContainer, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';
-import {mergeRefs, useObjectRef} from '@react-aria/utils';
 import {OverlayArrowContext} from './OverlayArrow';
+import {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, ReactNode, RefObject, useContext, useRef} from 'react';
-import {TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
 
 export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
   children: ReactNode
 }
 
-export interface TooltipProps extends PositionProps, AriaLabelingProps, RenderProps<TooltipRenderProps> {}
+export interface TooltipProps extends PositionProps, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps> {
+  /**
+   * The ref for the element which the tooltip positions itself with respect to.
+   *
+   * When used within a TooltipTrigger this is set automatically. It is only required when used standalone.
+   */
+  triggerRef?: RefObject<Element>
+}
 
 export interface TooltipRenderProps {
   /**
@@ -47,13 +53,8 @@ export interface TooltipRenderProps {
   state: TooltipTriggerState
 }
 
-interface TooltipContextValue {
-  state: TooltipTriggerState,
-  triggerRef: RefObject<FocusableElement>,
-  tooltipProps: DOMAttributes
-}
-
-const InternalTooltipContext = createContext<TooltipContextValue | null>(null);
+export const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);
+export const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);
 
 /**
  * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
@@ -66,25 +67,31 @@ export function TooltipTrigger(props: TooltipTriggerComponentProps) {
   let {triggerProps, tooltipProps} = useTooltipTrigger(props, state, ref);
 
   return (
-    <InternalTooltipContext.Provider value={{state, triggerRef: ref, tooltipProps}}>
+    <Provider
+      values={[
+        [TooltipTriggerStateContext, state],
+        [TooltipContext, {...tooltipProps, triggerRef: ref}]
+      ]}>
       <FocusableProvider {...triggerProps} ref={ref}>
         {props.children}
       </FocusableProvider>
-    </InternalTooltipContext.Provider>
+    </Provider>
   );
 }
 
 function Tooltip(props: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
-  let {state} = useContext(InternalTooltipContext)!;
-  let objectRef = useObjectRef(ref);
-  let isExiting = useExitAnimation(objectRef, state.isOpen);
+  [props, ref] = useContextProps(props, ref, TooltipContext);
+  let contextState = useContext(TooltipTriggerStateContext);
+  let localState = useTooltipTriggerState(props);
+  let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
+  let isExiting = useExitAnimation(ref, state.isOpen);
   if (!state.isOpen && !isExiting) {
     return null;
   }
 
   return (
     <OverlayContainer>
-      <TooltipInner {...props} tooltipRef={objectRef} isExiting={isExiting} />
+      <TooltipInner {...props} tooltipRef={ref} isExiting={isExiting} />
     </OverlayContainer>
   );
 }
@@ -95,20 +102,19 @@ function Tooltip(props: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
 const _Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(Tooltip);
 export {_Tooltip as Tooltip};
 
-function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: ForwardedRef<HTMLDivElement>}) {
-  let {state, triggerRef, tooltipProps: triggerTooltipProps} = useContext(InternalTooltipContext)!;
+function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: RefObject<HTMLDivElement>}) {
+  let state = useContext(TooltipTriggerStateContext)!;
 
-  let overlayRef = useRef<HTMLDivElement>(null);
   let {overlayProps, arrowProps, placement} = useOverlayPosition({
     placement: props.placement || 'top',
-    targetRef: triggerRef,
-    overlayRef,
+    targetRef: props.triggerRef!,
+    overlayRef: props.tooltipRef,
     offset: props.offset,
     crossOffset: props.crossOffset,
     isOpen: state.isOpen
   });
 
-  let isEntering = useEnterAnimation(overlayRef, !!placement);
+  let isEntering = useEnterAnimation(props.tooltipRef, !!placement);
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-Tooltip',
@@ -125,14 +131,14 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: For
 
   return (
     <div
-      {...mergeProps(triggerTooltipProps, tooltipProps)}
-      ref={mergeRefs(overlayRef, props.tooltipRef)}
+      {...tooltipProps}
+      ref={props.tooltipRef}
       {...renderProps}
       style={{...renderProps.style, ...overlayProps.style}}
       data-placement={placement}
       data-entering={isEntering || undefined}
       data-exiting={props.isExiting || undefined}>
-      <OverlayArrowContext.Provider value={{arrowProps, placement}}>
+      <OverlayArrowContext.Provider value={{...arrowProps, placement}}>
         {renderProps.children}
       </OverlayArrowContext.Provider>
     </div>

package/src/index.ts

@@ -12,12 +12,12 @@
 
 export {Breadcrumbs, BreadcrumbsContext, Breadcrumb} from './Breadcrumbs';
 export {Button, ButtonContext} from './Button';
-export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar, CalendarContext, RangeCalendarContext} from './Calendar';
-export {Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxContext} from './Checkbox';
-export {ComboBox, ComboBoxContext} from './ComboBox';
-export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext} from './DateField';
-export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext} from './DatePicker';
-export {DialogTrigger, Dialog, DialogContext} from './Dialog';
+export {Calendar, CalendarGrid, CalendarGridHeader, CalendarGridBody, CalendarHeaderCell, CalendarCell, RangeCalendar, CalendarContext, RangeCalendarContext, CalendarStateContext, RangeCalendarStateContext} from './Calendar';
+export {Checkbox, CheckboxGroup, CheckboxGroupContext, CheckboxContext, CheckboxGroupStateContext} from './Checkbox';
+export {ComboBox, ComboBoxContext, ComboBoxStateContext} from './ComboBox';
+export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext, DateFieldStateContext, TimeFieldStateContext} from './DateField';
+export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext, DatePickerStateContext, DateRangePickerStateContext} from './DatePicker';
+export {DialogTrigger, Dialog, DialogContext, OverlayTriggerStateContext} from './Dialog';
 export {DropZone, DropZoneContext} from './DropZone';
 export {FileTrigger} from './FileTrigger';
 export {GridList, GridListContext} from './GridList';
@@ -29,31 +29,31 @@ export {Item, Section, Collection} from './Collection';
 export {Keyboard, KeyboardContext} from './Keyboard';
 export {Label, LabelContext} from './Label';
 export {Link, LinkContext} from './Link';
-export {ListBox, ListBoxContext} from './ListBox';
-export {Menu, MenuTrigger, MenuContext} from './Menu';
+export {ListBox, ListBoxContext, ListStateContext} from './ListBox';
+export {Menu, MenuTrigger, MenuContext, MenuStateContext} from './Menu';
 export {Meter, MeterContext} from './Meter';
 export {Modal, ModalOverlay, ModalContext} from './Modal';
-export {NumberField, NumberFieldContext} from './NumberField';
+export {NumberField, NumberFieldContext, NumberFieldStateContext} from './NumberField';
 export {OverlayArrow} from './OverlayArrow';
 export {Popover, PopoverContext} from './Popover';
 export {ProgressBar, ProgressBarContext} from './ProgressBar';
 export {Provider, useContextProps, useSlottedContext} from './utils';
-export {RadioGroup, Radio, RadioGroupContext, RadioContext} from './RadioGroup';
+export {RadioGroup, Radio, RadioGroupContext, RadioContext, RadioGroupStateContext} from './RadioGroup';
 export {SearchField, SearchFieldContext} from './SearchField';
-export {Select, SelectValue, SelectContext} from './Select';
+export {Select, SelectValue, SelectContext, SelectValueContext, SelectStateContext} from './Select';
 export {Separator, SeparatorContext} from './Separator';
-export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext} from './Slider';
+export {Slider, SliderOutput, SliderTrack, SliderThumb, SliderContext, SliderOutputContext, SliderTrackContext, SliderStateContext} from './Slider';
 export {Switch, SwitchContext} from './Switch';
-export {Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions} from './Table';
-export {Tabs, TabList, TabPanel, Tab, TabsContext} from './Tabs';
-export {TagGroup, TagGroupContext, TagList, Tag} from './TagGroup';
+export {Table, Row, Cell, Column, ColumnResizer, TableHeader, TableBody, TableContext, ResizableTableContainer, useTableOptions, TableStateContext, TableColumnResizeStateContext} from './Table';
+export {Tabs, TabList, TabPanel, Tab, TabsContext, TabListStateContext} from './Tabs';
+export {TagGroup, TagGroupContext, TagList, TagListContext, Tag} from './TagGroup';
 export {Text, TextContext} from './Text';
 export {TextArea, TextAreaContext} from './TextArea';
 export {TextField, TextFieldContext} from './TextField';
 export {ToggleButton, ToggleButtonContext} from './ToggleButton';
-export {TooltipTrigger, Tooltip} from './Tooltip';
-export {useDragAndDrop, DropIndicator, DropIndicatorContext} from './useDragAndDrop';
-export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider} from 'react-aria';
+export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from './Tooltip';
+export {useDragAndDrop, DropIndicator, DropIndicatorContext, DragAndDropContext} from './useDragAndDrop';
+export {DIRECTORY_DRAG_TYPE, isDirectoryDropItem, isFileDropItem, isTextDropItem, SSRProvider, RouterProvider, I18nProvider} from 'react-aria';
 
 export type {BreadcrumbsProps, BreadcrumbProps} from './Breadcrumbs';
 export type {ButtonProps, ButtonRenderProps} from './Button';

package/src/useDragAndDrop.tsx

@@ -170,3 +170,11 @@ function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>
  */
 const _DropIndicator = forwardRef(DropIndicator);
 export {_DropIndicator as DropIndicator};
+
+export interface DragAndDropContextValue {
+  dragAndDropHooks?: DragAndDropHooks,
+  dragState?: DraggableCollectionState,
+  dropState?: DroppableCollectionState
+}
+
+export const DragAndDropContext = createContext<DragAndDropContextValue>({});

package/src/utils.tsx

@@ -31,10 +31,11 @@ interface SlottedValue<T> {
   [slotCallbackSymbol]?: (value: T) => void
 }
 
-export type ContextValue<T extends SlotProps, E extends Element> = SlottedValue<WithRef<T, E>> | WithRef<T, E> | null | undefined;
+export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
+export type ContextValue<T, E extends Element> = SlottedContextValue<WithRef<T, E>>;
 
 type ProviderValue<T> = [Context<T>, T];
-type ProviderValues<A, B, C, D, E, F, G, H> =
+type ProviderValues<A, B, C, D, E, F, G, H, I, J> =
   | [ProviderValue<A>]
   | [ProviderValue<A>, ProviderValue<B>]
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>]
@@ -42,14 +43,16 @@ type ProviderValues<A, B, C, D, E, F, G, H> =
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>]
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>]
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>]
-  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>];
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>];
 
-interface ProviderProps<A, B, C, D, E, F, G, H> {
-  values: ProviderValues<A, B, C, D, E, F, G, H>,
+interface ProviderProps<A, B, C, D, E, F, G, H, I, J> {
+  values: ProviderValues<A, B, C, D, E, F, G, H, I, J>,
   children: ReactNode
 }
 
-export function Provider<A, B, C, D, E, F, G, H>({values, children}: ProviderProps<A, B, C, D, E, F, G, H>): JSX.Element {
+export function Provider<A, B, C, D, E, F, G, H, I, J>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I, J>): JSX.Element {
   for (let [Context, value] of values) {
     // @ts-ignore
     children = <Context.Provider value={value}>{children}</Context.Provider>;
@@ -134,13 +137,20 @@ export function useRenderProps<T>(props: RenderPropsHookOptions<T>) {
 
 export type WithRef<T, E> = T & {ref?: ForwardedRef<E>};
 export interface SlotProps {
-  /** A slot name for the component. Slots allow the component to receive props from a parent component. */
-  slot?: string
+  /**
+   * A slot name for the component. Slots allow the component to receive props from a parent component.
+   * An explicit `null` value indicates that the local props completely override all props received from a parent.
+   */
+  slot?: string | null
 }
 
-export function useSlottedContext<U extends SlotProps, E extends Element>(context: Context<ContextValue<U, E>>, slot?: string): WithRef<U, E> | null | undefined {
+export function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined {
   let ctx = useContext(context);
-  if (ctx && 'slots' in ctx && ctx.slots) {
+  if (slot === null) {
+    // An explicit `null` slot means don't use context.
+    return null;
+  }
+  if (ctx && typeof ctx === 'object' && 'slots' in ctx && ctx.slots) {
     if (!slot && !ctx.slots[defaultSlot]) {
       throw new Error('A slot prop is required');
     }
@@ -326,3 +336,20 @@ export function createHideableComponent<T, P = {}>(fn: (props: P, ref: React.Ref
   Wrapper.displayName = fn.displayName || fn.name;
   return (React.forwardRef as forwardRefType)(Wrapper);
 }
+
+/**
+ * Filters out `data-*` attributes to keep them from being passed down and duplicated.
+ * @param props
+ */
+export function removeDataAttributes<T>(props: T): T {
+  const prefix = /^(data-.*)$/;
+  let filteredProps = {} as T;
+
+  for (const prop in props) {
+    if (!prefix.test(prop)) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+
+  return filteredProps;
+}