react-aria-components 1.15.0 → 1.16.0

package/src/Menu.tsx

@@ -431,12 +431,13 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent(ItemNode, function Men
   let state = useContext(MenuStateContext)!;
   let ref = useObjectRef<any>(forwardedRef);
   let selectionManager = useContext(SelectionManagerContext)!;
-
+  let {isVirtualized} = useContext(CollectionRendererContext);
   let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({
     ...props,
     id,
     key: item.key,
-    selectionManager
+    selectionManager,
+    isVirtualized: isVirtualized
   }, state, ref);
 
   let {hoverProps, isHovered} = useHover({

package/src/Popover.tsx

@@ -21,8 +21,8 @@ import {
   useContextProps,
   useRenderProps
 } from './utils';
-import {filterDOMProps, mergeProps, nodeContains, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
-import {focusSafely} from '@react-aria/interactions';
+import {filterDOMProps, isFocusWithin, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
+import {focusSafely, getInteractionModality} from '@react-aria/interactions';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
@@ -199,7 +199,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
   // Focus the popover itself on mount, unless a child element is already focused.
   // Skip this for submenus since hovering a submenutrigger should keep focus on the trigger
   useEffect(() => {
-    if (isDialog && props.trigger !== 'SubmenuTrigger' && ref.current && !nodeContains(ref.current, document.activeElement)) {
+    if (isDialog && (props.trigger !== 'SubmenuTrigger' || getInteractionModality() !== 'pointer') && ref.current && !isFocusWithin(ref.current)) {
       focusSafely(ref.current);
     }
   }, [isDialog, ref, props.trigger]);

package/src/Tree.tsx

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSelectionCheckbox, useHover, useId, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
+import {AriaTreeItemOptions, AriaTreeProps, DraggableItemResult, DropIndicatorAria, DropIndicatorProps, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing,  useGridListSection, useGridListSelectionCheckbox, useHover, useId, useLocale, useTree, useTreeItem, useVisuallyHidden} from 'react-aria';
+import {BaseCollection, Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, LoaderNode, SectionNode, useCachedChildren} from '@react-aria/collections';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {
@@ -19,6 +20,7 @@ import {
   ContextValue,
   DEFAULT_SLOT,
   dom,
+  DOMRenderProps,
   Provider,
   RenderProps,
   SlotProps,
@@ -26,83 +28,156 @@ import {
   useContextProps,
   useRenderProps
 } from './utils';
-import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, LoaderNode, useCachedChildren} from '@react-aria/collections';
-import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
+import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, SectionProps} from './Collection';
 import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection, PressEvents, RefObject, SelectionMode} from '@react-types/shared';
 import {DragAndDropContext, DropIndicatorContext, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
-import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
+import {DraggableCollectionState, DroppableCollectionState, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
+import {GridListHeader, GridListHeaderContext, GridListHeaderInnerContext, GridListHeaderProps} from './GridList';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {SelectionIndicatorContext} from './SelectionIndicator';
 import {SharedElementTransition} from './SharedElementTransition';
 import {TreeDropTargetDelegate} from './TreeDropTargetDelegate';
 import {useControlledState} from '@react-stately/utils';
 
-class TreeCollection<T> implements ICollection<Node<T>> {
-  private flattenedRows: Node<T>[];
-  private keyMap: Map<Key, CollectionNode<T>> = new Map();
-  private itemCount: number = 0;
-
-  constructor(opts) {
-    let {collection, expandedKeys} = opts;
-    let {flattenedRows, keyMap, itemCount} = flattenTree<T>(collection, {expandedKeys});
-    this.flattenedRows = flattenedRows;
-    // Use generated keyMap because it contains the modified collection nodes (aka it adjusts the indexes so that they ignore the existence of the Content items)
-    this.keyMap = keyMap;
-    this.itemCount = itemCount;
-  }
+class TreeCollection<T> extends BaseCollection<T> {
+  private expandedKeys: Set<Key> = new Set();
 
-  // TODO: should this collection's getters reflect the flattened structure or the original structure
-  // If we respresent the flattened structure, it is easier for the keyboard nav but harder to find all the nodes
-  *[Symbol.iterator]() {
-    yield* this.flattenedRows;
-  }
+  withExpandedKeys(lastExpandedKeys: Set<Key>, expandedKeys: Set<Key>) {
+    let collection = this.clone();
+    collection.expandedKeys = expandedKeys;
 
-  get size() {
-    return this.itemCount;
-  }
+    // Clone ancestor section nodes so React knows to re-render since the same item won't cause a new render but a clone creating a new object with the same value will
+    // Without this change, the items won't expand and collapse when virtualized inside a section
+    TreeCollection.cloneAncestorSections(expandedKeys, lastExpandedKeys, collection);
+    TreeCollection.cloneAncestorSections(lastExpandedKeys, expandedKeys, collection);   
 
-  getKeys() {
-    return this.keyMap.keys();
+    collection.frozen = this.frozen;
+    return collection;
   }
 
-  getItem(key: Key): Node<T> | null {
-    return this.keyMap.get(key) || null;
+  // diff lastExpandedKeys and expandedKeys so we only clone what has changed
+  private static cloneAncestorSections<T>(
+    keys: Iterable<Key>,
+    excludeSet: Set<Key>,
+    collection: TreeCollection<T>
+  ) {
+    for (let key of keys) {
+      if (!excludeSet.has(key)) {
+        let currentKey: Key | null = key;
+        while (currentKey != null) {
+          let item = collection.getItem(currentKey) as CollectionNode<T>;
+          if (item?.type === 'section') {
+            collection.keyMap.set(currentKey, item.clone());
+            break;
+          } else {
+            currentKey = item?.parentKey ?? null;
+          }
+        }
+      }
+    }
   }
 
-  at(idx: number) {
-    return this.flattenedRows[idx];
-  }
+  *[Symbol.iterator]() {
+    let firstKey = this.getFirstKey();
+    let node: Node<T> | null = firstKey != null ? this.getItem(firstKey) : null;
 
-  getFirstKey() {
-    return this.flattenedRows[0]?.key;
+    while (node) {
+      yield node as Node<T>;
+      if (node.type === 'section') {
+        node = node.nextKey ? this.getItem(node.nextKey) : null;
+      } else {
+        // This will include both item and content nodes
+        // We handle the content nodes in useCollectionRenderer and ListLayout
+        let key = this.getKeyAfter(node.key);
+        node = key ? this.getItem(key) : null;
+      }
+    }
   }
 
   getLastKey() {
-    return this.flattenedRows[this.flattenedRows.length - 1]?.key;
+    // Find the deepest expanded child. We don't use collection.getLastKey() here
+    // because that will return the deepest child regardless of expandedKeys.
+    // Instead, start from the last top-level key and walk down.
+    let key = this.lastKey;
+    if (key == null) {
+      return null;
+    }
+
+    let node = this.getItem(key) as CollectionNode<T>;
+
+    while (node?.lastChildKey != null && (node.type !== 'item' || this.expandedKeys.has(node.key))) {
+      node = this.getItem(node.lastChildKey) as CollectionNode<T>;
+    }
+
+    return node?.key;
   }
 
   getKeyAfter(key: Key) {
-    let index = this.flattenedRows.findIndex(row => row.key === key);
-    return this.flattenedRows[index + 1]?.key;
+    let node = this.getItem(key) as CollectionNode<T>;
+    if (!node) {
+      return null;
+    }
+
+    if ((this.expandedKeys.has(node.key) || node.type !== 'item') && node.firstChildKey != null) {
+      return node.firstChildKey;
+    }
+
+    while (node) {
+      if (node.nextKey != null) {
+        return node.nextKey;
+      }
+
+      if (node.parentKey != null) {
+        node = this.getItem(node.parentKey) as CollectionNode<T>;
+      } else {
+        return null;
+      }
+    }
+
+    return null;
   }
 
   getKeyBefore(key: Key) {
-    let index = this.flattenedRows.findIndex(row => row.key === key);
-    return this.flattenedRows[index - 1]?.key;
+    let node = this.getItem(key) as CollectionNode<T>;
+    if (!node) {
+      return null;
+    }
+
+    if (node.prevKey != null) {
+      node = this.getItem(node.prevKey) as CollectionNode<T>;
+
+      // If the lastChildKey is expanded, check its lastChildKey
+      while (node && (node.type !== 'item' || this.expandedKeys.has(node.key)) && node.lastChildKey != null) {
+        node = this.getItem(node.lastChildKey) as CollectionNode<T>;
+      }
+
+      return node?.key ?? null;
+    }
+
+    return node.parentKey;
   }
 
-  // Note that this will return Content nodes in addition to nested TreeItems
   getChildren(key: Key): Iterable<Node<T>> {
-    let keyMap = this.keyMap;
+    let self = this;
     return {
       *[Symbol.iterator]() {
-        let parent = keyMap.get(key);
-        let node = parent?.firstChildKey != null ? keyMap.get(parent.firstChildKey) : null;
-        while (node) {
-          yield node as Node<T>;
-          node = node.nextKey != null ? keyMap.get(node.nextKey) : undefined;
+        let parent = self.getItem(key) as CollectionNode<T> | null;
+        let node = parent?.firstChildKey != null ? self.getItem(parent.firstChildKey) as CollectionNode<T> : null;
+        if (parent && parent.type === 'section' && node) {
+          // Stop once either the node is null or the node is the parent's sibling
+          while (node && node.key !== parent.nextKey) {
+            yield self.getItem(node.key)!;
+            // This will include content nodes which we skip in ListLayout
+            let key = self.getKeyAfter(node.key);
+            node = key != null ? self.getItem(key)! as CollectionNode<T> : null;
+          }
+        } else {
+          while (node) {
+            yield node as Node<T>;
+            node = node.nextKey != null ? self.getItem(node.nextKey)! as CollectionNode<T> : null;
+          }
         }
       }
     };
@@ -183,7 +258,7 @@ export const Tree = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tree<T
   [props, ref] = useContextProps(props, ref, TreeContext);
 
   return (
-    <CollectionBuilder content={<Collection {...props} />}>
+    <CollectionBuilder content={<Collection {...props} />} createCollection={() => new TreeCollection<T>()}>
       {collection => <TreeInner props={props} collection={collection} treeRef={ref} />}
     </CollectionBuilder>
   );
@@ -202,7 +277,7 @@ const EXPANSION_KEYS = {
 
 interface TreeInnerProps<T extends object> {
   props: TreeProps<T>,
-  collection: ICollection<unknown>,
+  collection: TreeCollection<T>,
   treeRef: RefObject<HTMLDivElement | null>
 }
 
@@ -235,14 +310,22 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
   // Kinda annoying that we have to replicate this code here as well as in useTreeState, but don't want to add
   // flattenCollection stuff to useTreeState. Think about this later
   let [expandedKeys, setExpandedKeys] = useControlledState(
-    propExpandedKeys ? convertExpanded(propExpandedKeys) : undefined,
-    propDefaultExpandedKeys ? convertExpanded(propDefaultExpandedKeys) : new Set(),
+    propExpandedKeys ? new Set(propExpandedKeys) : undefined,
+    propDefaultExpandedKeys ? new Set(propDefaultExpandedKeys) : new Set(),
     onExpandedChange
   );
 
-  let flattenedCollection = useMemo(() => {
-    return new TreeCollection<object>({collection, expandedKeys});
-  }, [collection, expandedKeys]);
+  let [lastCollection, setLastCollection] = useState(collection);
+  let [lastExpandedKeys, setLastExpandedKeys] = useState(expandedKeys);
+  let [flattenedCollection, setFlattenedCollection] = useState(() => collection.withExpandedKeys(lastExpandedKeys, expandedKeys));
+
+
+  // if the lastExpandedKeys is not the same as the currentExpandedKeys or the collection has changed, then run this
+  if (!areSetsEqual(lastExpandedKeys, expandedKeys) || collection !== lastCollection) {
+    setFlattenedCollection(collection.withExpandedKeys(lastExpandedKeys, expandedKeys));
+    setLastCollection(collection);
+    setLastExpandedKeys(expandedKeys);
+  }
 
   let state = useTreeState({
     ...props,
@@ -290,16 +373,16 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     let dropTargetDelegate = dragAndDropHooks.dropTargetDelegate || ctxDropTargetDelegate || new dragAndDropHooks.ListDropTargetDelegate(state.collection, ref, {direction});
     treeDropTargetDelegate.setup(dropTargetDelegate, state, direction);
 
-    let keyboardDelegate =
-      new ListKeyboardDelegate({
-        collection: state.collection,
-        collator,
-        ref,
-        disabledKeys: state.selectionManager.disabledKeys,
-        disabledBehavior: state.selectionManager.disabledBehavior,
-        direction,
-        layoutDelegate
-      });
+    let keyboardDelegate = new ListKeyboardDelegate({
+      collection: state.collection,
+      collator,
+      ref,
+      disabledKeys: state.selectionManager.disabledKeys,
+      disabledBehavior: state.selectionManager.disabledBehavior,
+      direction,
+      layoutDelegate
+    });
+
     droppableCollection = dragAndDropHooks.useDroppableCollection!(
       {
         keyboardDelegate,
@@ -309,7 +392,7 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
           if (e.target.type === 'item') {
             let key = e.target.key;
             let item = state.collection.getItem(key);
-            let isExpanded = expandedKeys !== 'all' && expandedKeys.has(key);
+            let isExpanded = expandedKeys.has(key);
             if (item && item.hasChildNodes && (!isExpanded || dragAndDropHooks?.isVirtualDragging?.())) {
               state.toggleKey(key);
             }
@@ -826,88 +909,6 @@ export const TreeLoadMoreItem = createLeafComponent(LoaderNode, function TreeLoa
   );
 });
 
-function convertExpanded(expanded: 'all' | Iterable<Key>): 'all' | Set<Key> {
-  if (!expanded) {
-    return new Set<Key>();
-  }
-
-  return expanded === 'all'
-    ? 'all'
-    : new Set(expanded);
-}
-interface TreeGridCollectionOptions {
-  expandedKeys: Set<Key>
-}
-
-interface FlattenedTree<T> {
-  flattenedRows: Node<T>[],
-  keyMap: Map<Key, CollectionNode<T>>,
-  itemCount: number
-}
-
-function flattenTree<T>(collection: TreeCollection<T>, opts: TreeGridCollectionOptions): FlattenedTree<T> {
-  let {
-    expandedKeys = new Set()
-  } = opts;
-  let keyMap: Map<Key, CollectionNode<T>> = new Map();
-  let flattenedRows: Node<T>[] = [];
-  // Need to count the items here because BaseCollection will return the full item count regardless if items are hidden via collapsed rows
-  let itemCount = 0;
-  let parentLookup: Map<Key, boolean> = new Map();
-
-  let visitNode = (node: Node<T>) => {
-    if (node.type === 'item' || node.type === 'loader') {
-      let parentKey = node?.parentKey;
-      let clone = {...node};
-      if (parentKey != null) {
-        // TODO: assumes that non item content node (aka TreeItemContent always placed before Collection) will be always placed before the child rows. If we can't make this assumption then we can filter out
-        // every non-item per level and assign indicies based off the node's position in said filtered array
-        let hasContentNode = [...collection.getChildren(parentKey)][0].type !== 'item';
-        if (hasContentNode) {
-          clone.index = node?.index != null ? node?.index - 1 : 0;
-        }
-
-        // For loader nodes that have a parent (aka non-root level loaders), these need their levels incremented by 1 for parity with their sibiling rows
-        // (Collection only increments the level if it is a "item" type node).
-        if (node.type === 'loader') {
-          clone.level = node.level + 1;
-        }
-
-        keyMap.set(clone.key, clone as CollectionNode<T>);
-      } else {
-        keyMap.set(node.key, node as CollectionNode<T>);
-      }
-
-      // Grab the modified node from the key map so our flattened list and modified key map point to the same nodes
-      let modifiedNode = keyMap.get(node.key) || node;
-      if (modifiedNode.level === 0 || (modifiedNode.parentKey != null && expandedKeys.has(modifiedNode.parentKey) && parentLookup.get(modifiedNode.parentKey))) {
-        if (modifiedNode.type === 'item') {
-          itemCount++;
-        }
-
-        flattenedRows.push(modifiedNode);
-        parentLookup.set(modifiedNode.key, true);
-      }
-    } else if (node.type !== null) {
-      keyMap.set(node.key, node as CollectionNode<T>);
-    }
-
-    for (let child of collection.getChildren(node.key)) {
-      visitNode(child);
-    }
-  };
-
-  for (let node of collection) {
-    visitNode(node);
-  }
-
-  return {
-    flattenedRows,
-    keyMap,
-    itemCount
-  };
-}
-
 function TreeDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element | null {
   ref = useObjectRef(ref);
   let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
@@ -1001,3 +1002,65 @@ function RootDropIndicator() {
     </div>
   );
 }
+
+export interface GridListSectionProps<T> extends SectionProps<T>, DOMRenderProps<'section', undefined>  {}
+
+/**
+ * A TreeSection represents a section within a Tree.
+ */
+export const TreeSection = /*#__PURE__*/ createBranchComponent(SectionNode, <T extends object>(props: GridListSectionProps<T>, ref: ForwardedRef<HTMLElement>, item: Node<T>) => {
+  let state = useContext(TreeStateContext)!;
+  let {CollectionBranch} = useContext(CollectionRendererContext);
+  let headingRef = useRef(null);
+  ref = useObjectRef<HTMLElement>(ref);
+  let {rowHeaderProps, rowProps, rowGroupProps} = useGridListSection({
+    'aria-label': props['aria-label'] ?? undefined
+  }, state, ref);
+  let renderProps = useRenderProps({
+    ...props,
+    id: undefined,
+    children: undefined,
+    defaultClassName: 'react-aria-TreeSection',
+    values: undefined
+  });
+
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
+  return (
+    <dom.section
+      {...mergeProps(DOMProps, renderProps, rowGroupProps)}
+      ref={ref}>
+      <Provider
+        values={[
+          [GridListHeaderContext, {...rowProps, ref: headingRef}],
+          [GridListHeaderInnerContext, {...rowHeaderProps}]
+        ]}>
+        <CollectionBranch
+          collection={state.collection}
+          parent={item} />
+      </Provider>
+    </dom.section>
+  );
+});
+
+export const TreeHeader = (props: GridListHeaderProps): ReactNode => {
+  return (
+    <GridListHeader className="react-aria-TreeHeader" {...props}>
+      {props.children}
+    </GridListHeader>
+  );
+};
+
+function areSetsEqual<T>(a: Set<T>, b: Set<T>) {
+  if (a.size !== b.size) {
+    return false;
+  }
+
+  for (let item of a) {
+    if (!b.has(item)) {
+      return false;
+    }
+  }
+  return true;
+}

package/src/index.ts

@@ -29,7 +29,7 @@ export {ColorSwatch, ColorSwatchContext} from './ColorSwatch';
 export {ColorSwatchPicker, ColorSwatchPickerItem, ColorSwatchPickerContext} from './ColorSwatchPicker';
 export {ColorThumb} from './ColorThumb';
 export {ColorWheel, ColorWheelTrack, ColorWheelTrackContext, ColorWheelStateContext} from './ColorWheel';
-export {ComboBox, ComboBoxContext, ComboBoxStateContext} from './ComboBox';
+export {ComboBox, ComboBoxValue, ComboBoxContext, ComboBoxStateContext, ComboBoxValueContext} from './ComboBox';
 export {composeRenderProps, DEFAULT_SLOT, Provider, useContextProps, useRenderProps, useSlottedContext} from './utils';
 export {DateField, DateInput, DateSegment, TimeField, DateFieldContext, TimeFieldContext, DateFieldStateContext, TimeFieldStateContext} from './DateField';
 export {DatePicker, DateRangePicker, DatePickerContext, DateRangePickerContext, DatePickerStateContext, DateRangePickerStateContext} from './DatePicker';
@@ -77,7 +77,7 @@ export {ToggleButton, ToggleButtonContext} from './ToggleButton';
 export {ToggleButtonGroup, ToggleButtonGroupContext, ToggleGroupStateContext} from './ToggleButtonGroup';
 export {Toolbar, ToolbarContext} from './Toolbar';
 export {TooltipTrigger, Tooltip, TooltipTriggerStateContext, TooltipContext} from './Tooltip';
-export {TreeLoadMoreItem, Tree, TreeItem, TreeContext, TreeItemContent, TreeStateContext} from './Tree';
+export {TreeLoadMoreItem, Tree, TreeItem, TreeContext, TreeItemContent, TreeHeader, TreeSection, TreeStateContext} from './Tree';
 export {useDrag, useDrop} from '@react-aria/dnd';
 export {useDragAndDrop} from './useDragAndDrop';
 export {DropIndicator, DropIndicatorContext, DragAndDropContext} from './DragAndDrop';
@@ -100,7 +100,7 @@ export type {ColorSwatchPickerProps, ColorSwatchPickerRenderProps, ColorSwatchPi
 export type {ColorThumbProps, ColorThumbRenderProps} from './ColorThumb';
 export type {ColorPickerProps, ColorPickerRenderProps} from './ColorPicker';
 export type {ColorWheelProps, ColorWheelRenderProps, ColorWheelTrackProps, ColorWheelTrackRenderProps} from './ColorWheel';
-export type {ComboBoxProps, ComboBoxRenderProps} from './ComboBox';
+export type {ComboBoxProps, ComboBoxRenderProps, ComboBoxValueProps, ComboBoxValueRenderProps} from './ComboBox';
 export type {DateFieldProps, DateFieldRenderProps, DateInputProps, DateInputRenderProps, DateSegmentProps, DateSegmentRenderProps, TimeFieldProps} from './DateField';
 export type {DatePickerProps, DatePickerRenderProps, DateRangePickerProps, DateRangePickerRenderProps} from './DatePicker';
 export type {DialogProps, DialogTriggerProps, DialogRenderProps} from './Dialog';
@@ -111,6 +111,7 @@ export type {FileTriggerProps} from './FileTrigger';
 export type {FormProps} from './Form';
 export type {GridListProps, GridListRenderProps, GridListItemProps, GridListItemRenderProps, GridListLoadMoreItemProps, GridListSectionProps} from './GridList';
 export type {GroupProps, GroupRenderProps} from './Group';
+export type {HeaderProps} from './Header';
 export type {HeadingProps} from './Heading';
 export type {InputProps, InputRenderProps} from './Input';
 export type {SectionProps, CollectionRenderer} from './Collection';

package/src/utils.tsx

@@ -20,11 +20,11 @@ interface SlottedValue<T> {
   slots?: Record<string | symbol, T>
 }
 
-export type SlottedContextValue<T> = (SlottedValue<T> & T) | null | undefined;
+export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
 export type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
 
 type ProviderValue<T> = [Context<T>, T];
-type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> =
+type ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L> =
   | [ProviderValue<A>]
   | [ProviderValue<A>, ProviderValue<B>]
   | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>]
@@ -35,14 +35,15 @@ type ProviderValues<A, B, C, D, E, F, G, H, I, J, K> =
   | [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>]
-  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>];
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>]
+  | [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>, ProviderValue<F>, ProviderValue<G>, ProviderValue<H>, ProviderValue<I>, ProviderValue<J>, ProviderValue<K>, ProviderValue<L>];
 
-interface ProviderProps<A, B, C, D, E, F, G, H, I, J, K> {
-  values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K>,
+interface ProviderProps<A, B, C, D, E, F, G, H, I, J, K, L> {
+  values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L>,
   children: ReactNode
 }
 
-export function Provider<A, B, C, D, E, F, G, H, I, J, K>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I, J, K>): JSX.Element {
+export function Provider<A, B, C, D, E, F, G, H, I, J, K, L>({values, children}: ProviderProps<A, B, C, D, E, F, G, H, I, J, K, L>): JSX.Element {
   for (let [Context, value] of values) {
     // @ts-ignore
     children = <Context.Provider value={value}>{children}</Context.Provider>;