Add support for SSR to RAC collections (#4913)

Author: devongovett

jest.ssr.config.js

@@ -42,6 +42,8 @@ module.exports = {
   // The test environment that will be used for testing
   testEnvironment: 'jsdom',
 
+  setupFilesAfterEnv: ['<rootDir>scripts/setupTests.js'],
+
   // The glob patterns Jest uses to detect test files
   testMatch: [
     '**/packages/**/*.ssr.test.[tj]s?(x)'

packages/@react-aria/ssr/src/SSRProvider.tsx

@@ -23,8 +23,7 @@ import React, {ReactNode, useContext, useLayoutEffect, useMemo, useRef, useState
 // consistent ids regardless of the loading order.
 interface SSRContextValue {
   prefix: string,
-  current: number,
-  isSSR: boolean
+  current: number
 }
 
 // Default context value to use in case there is no SSRProvider. This is fine for
@@ -34,11 +33,11 @@ interface SSRContextValue {
 // SSR case multiple copies of React Aria is not supported.
 const defaultContext: SSRContextValue = {
   prefix: String(Math.round(Math.random() * 10000000000)),
-  current: 0,
-  isSSR: false
+  current: 0
 };
 
 const SSRContext = React.createContext<SSRContextValue>(defaultContext);
+const IsSSRContext = React.createContext(false);
 
 export interface SSRProviderProps {
   /** Your application here. */
@@ -54,9 +53,8 @@ function LegacySSRProvider(props: SSRProviderProps): JSX.Element {
     // If this is the first SSRProvider, start with an empty string prefix, otherwise
     // append and increment the counter.
     prefix: cur === defaultContext ? '' : `${cur.prefix}-${counter}`,
-    current: 0,
-    isSSR
-  }), [cur, counter, isSSR]);
+    current: 0
+  }), [cur, counter]);
 
   // If on the client, and the component was initially server rendered,
   // then schedule a layout effect to update the component after hydration.
@@ -71,7 +69,9 @@ function LegacySSRProvider(props: SSRProviderProps): JSX.Element {
 
   return (
     <SSRContext.Provider value={value}>
-      {props.children}
+      <IsSSRContext.Provider value={isSSR}>
+        {props.children}
+      </IsSSRContext.Provider>
     </SSRContext.Provider>
   );
 }
@@ -194,6 +194,5 @@ export function useIsSSR(): boolean {
   }
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  let cur = useContext(SSRContext);
-  return cur.isSSR;
+  return useContext(IsSSRContext);
 }

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -879,14 +879,12 @@ describe('ComboBox', function () {
 
       let combobox = getByRole('combobox');
       expect(combobox.value).toBe('Two');
-      expect(onInputChange).toHaveBeenCalledTimes(1);
-      expect(onInputChange).toHaveBeenLastCalledWith('Two');
 
       act(() => combobox.focus());
       fireEvent.change(combobox, {target: {value: 'Tw'}});
       act(() => jest.runAllTimers());
 
-      expect(onInputChange).toHaveBeenCalledTimes(2);
+      expect(onInputChange).toHaveBeenCalledTimes(1);
       expect(onInputChange).toHaveBeenLastCalledWith('Tw');
       expect(combobox.value).toBe('Tw');
       let listbox = getByRole('listbox');
@@ -907,7 +905,7 @@ describe('ComboBox', function () {
       expect(queryByRole('listbox')).toBeNull();
       expect(combobox.value).toBe('Two');
       expect(onSelectionChange).toHaveBeenCalledTimes(0);
-      expect(onInputChange).toHaveBeenCalledTimes(3);
+      expect(onInputChange).toHaveBeenCalledTimes(2);
       expect(onInputChange).toHaveBeenLastCalledWith('Two');
     });
 
@@ -916,14 +914,12 @@ describe('ComboBox', function () {
 
       let combobox = getByRole('combobox');
       expect(combobox.value).toBe('Two');
-      expect(onInputChange).toHaveBeenCalledTimes(1);
-      expect(onInputChange).toHaveBeenLastCalledWith('Two');
 
       act(() => combobox.focus());
       fireEvent.change(combobox, {target: {value: 'Tw'}});
       act(() => jest.runAllTimers());
 
-      expect(onInputChange).toHaveBeenCalledTimes(2);
+      expect(onInputChange).toHaveBeenCalledTimes(1);
       expect(onInputChange).toHaveBeenLastCalledWith('Tw');
       expect(combobox.value).toBe('Tw');
       let listbox = getByRole('listbox');
@@ -938,7 +934,7 @@ describe('ComboBox', function () {
       // selectionManager.select from useSingleSelectListState always calls onSelectionChange even if the key is the same
       expect(onSelectionChange).toHaveBeenCalledTimes(1);
       expect(onSelectionChange).toHaveBeenLastCalledWith('2');
-      expect(onInputChange).toHaveBeenCalledTimes(3);
+      expect(onInputChange).toHaveBeenCalledTimes(2);
       expect(onInputChange).toHaveBeenLastCalledWith('Two');
     });
 
@@ -2344,7 +2340,6 @@ describe('ComboBox', function () {
         });
 
         expect(combobox.value).toBe('Two');
-        expect(onInputChange).toHaveBeenLastCalledWith('Two');
 
         let listbox = getByRole('listbox');
         expect(listbox).toBeVisible();
@@ -2382,7 +2377,6 @@ describe('ComboBox', function () {
         let {getByRole, rerender} = render(<ExampleComboBox selectedKey="2" />);
         let combobox = getByRole('combobox');
         expect(combobox.value).toBe('Two');
-        expect(onInputChange).toHaveBeenLastCalledWith('Two');
 
         rerender(<ExampleComboBox selectedKey="1" />);
         expect(combobox.value).toBe('One');

packages/@react-stately/combobox/src/useComboBoxState.ts

@@ -61,11 +61,6 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
 
   let [showAllItems, setShowAllItems] = useState(false);
   let [isFocused, setFocusedState] = useState(false);
-  let [inputValue, setInputValue] = useControlledState(
-    props.inputValue,
-    props.defaultInputValue ?? '',
-    props.onInputChange
-  );
 
   let onSelectionChange = (key) => {
     if (props.onSelectionChange) {
@@ -86,6 +81,12 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     items: props.items ?? props.defaultItems
   });
 
+  let [inputValue, setInputValue] = useControlledState(
+    props.inputValue,
+    props.defaultInputValue ?? collection.getItem(selectedKey)?.textValue ?? '',
+    props.onInputChange
+  );
+
   // Preserve original collection so we can show all items on demand
   let originalCollection = collection;
   let filteredCollection = useMemo(() => (
@@ -170,7 +171,6 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
     setInputValue(itemText);
   };
 
-  let isInitialRender = useRef(true);
   let lastSelectedKey = useRef(props.selectedKey ?? props.defaultSelectedKey ?? null);
   let lastSelectedKeyText = useRef(collection.getItem(selectedKey)?.textValue ?? '');
   // intentional omit dependency array, want this to happen on every render
@@ -219,11 +219,6 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
       }
     }
 
-    // If it is the intial render and inputValue isn't controlled nor has an intial value, set input to match current selected key if any
-    if (isInitialRender.current && (props.inputValue === undefined && props.defaultInputValue === undefined)) {
-      resetInputValue();
-    }
-
     // If the selectedKey changed, update the input value.
     // Do nothing if both inputValue and selectedKey are controlled.
     // In this case, it's the user's responsibility to update inputValue in onSelectionChange.
@@ -248,7 +243,6 @@ export function useComboBoxState<T extends object>(props: ComboBoxStateOptions<T
       }
     }
 
-    isInitialRender.current = false;
     lastSelectedKey.current = selectedKey;
     lastSelectedKeyText.current = selectedItemText;
   });

packages/@react-stately/tabs/src/useTabListState.ts

@@ -10,10 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {CollectionStateBase} from '@react-types/shared';
+import {Collection, CollectionStateBase} from '@react-types/shared';
+import {Key, useEffect, useRef} from 'react';
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
 import {TabListProps} from '@react-types/tabs';
-import {useEffect, useRef} from 'react';
 
 export interface TabListStateOptions<T> extends Omit<TabListProps<T>, 'children'>, CollectionStateBase<T> {}
 
@@ -29,7 +29,8 @@ export interface TabListState<T> extends SingleSelectListState<T> {
 export function useTabListState<T extends object>(props: TabListStateOptions<T>): TabListState<T> {
   let state = useSingleSelectListState<T>({
     ...props,
-    suppressTextValueWarning: true
+    suppressTextValueWarning: true,
+    defaultSelectedKey: props.defaultSelectedKey ?? findDefaultSelectedKey(props.collection, props.disabledKeys ? new Set(props.disabledKeys) : new Set())
   });
 
   let {
@@ -43,16 +44,7 @@ export function useTabListState<T extends object>(props: TabListStateOptions<T>)
     // Ensure a tab is always selected (in case no selected key was specified or if selected item was deleted from collection)
     let selectedKey = currentSelectedKey;
     if (selectionManager.isEmpty || !collection.getItem(selectedKey)) {
-      selectedKey = collection.getFirstKey();
-      // loop over tabs until we find one that isn't disabled and select that
-      while (state.disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey()) {
-        selectedKey = collection.getKeyAfter(selectedKey);
-      }
-      // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last
-      if (state.disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey()) {
-        selectedKey = collection.getFirstKey();
-      }
-
+      selectedKey = findDefaultSelectedKey(collection, state.disabledKeys);
       if (selectedKey != null) {
         // directly set selection because replace/toggle selection won't consider disabled keys
         selectionManager.setSelectedKeys([selectedKey]);
@@ -71,3 +63,20 @@ export function useTabListState<T extends object>(props: TabListStateOptions<T>)
     isDisabled: props.isDisabled || false
   };
 }
+
+function findDefaultSelectedKey<T>(collection: Collection<T> | null, disabledKeys: Set<Key>) {
+  let selectedKey = null;
+  if (collection) {
+    selectedKey = collection.getFirstKey();
+    // loop over tabs until we find one that isn't disabled and select that
+    while (disabledKeys.has(selectedKey) && selectedKey !== collection.getLastKey()) {
+      selectedKey = collection.getKeyAfter(selectedKey);
+    }
+    // if this check is true, then every item is disabled, it makes more sense to default to the first key than the last
+    if (disabledKeys.has(selectedKey) && selectedKey === collection.getLastKey()) {
+      selectedKey = collection.getFirstKey();
+    }
+  }
+
+  return selectedKey;
+}

packages/dev/parcel-transformer-docs/DocsTransformer.js

@@ -641,7 +641,7 @@ module.exports = new Transformer({
     }
 
     function isReactForwardRef(path) {
-      return isReactCall(path, 'forwardRef');
+      return isReactCall(path, 'forwardRef') || (path.isCallExpression() && path.get('callee').isIdentifier({name: 'createHideableComponent'}));
     }
 
     function isReactCall(path, name, module = 'react') {
@@ -669,13 +669,12 @@ module.exports = new Transformer({
 
     function isReactComponent(path) {
       if (path.isFunction()) {
-        if (
-          path.node.returnType &&
-          t.isTSTypeReference(path.node.returnType.typeAnnotation) &&
-          t.isTSQualifiedName(path.node.returnType.typeAnnotation.typeName) &&
-          t.isIdentifier(path.node.returnType.typeAnnotation.typeName.left, {name: 'JSX'}) &&
-          t.isIdentifier(path.node.returnType.typeAnnotation.typeName.right, {name: 'Element'})
-        ) {
+        let returnType = path.node.returnType?.typeAnnotation;
+        if (isJSXElementType(returnType)) {
+          return true;
+        }
+
+        if (returnType && t.isTSUnionType(returnType) && returnType.types.some(isJSXElementType)) {
           return true;
         }
 
@@ -697,6 +696,14 @@ module.exports = new Transformer({
       return false;
     }
 
+    function isJSXElementType(returnType) {
+      return returnType &&
+        t.isTSTypeReference(returnType) &&
+        t.isTSQualifiedName(returnType.typeName) &&
+        t.isIdentifier(returnType.typeName.left, {name: 'JSX'}) &&
+        t.isIdentifier(returnType.typeName.right, {name: 'Element'});
+    }
+
     function getJSDocs(path) {
       let comments = getDocComments(path);
       if (comments) {

packages/dev/test-utils/src/testSSR.js

@@ -27,7 +27,7 @@ try {
   // ignore.
 }
 
-export async function testSSR(filename, source) {
+export async function testSSR(filename, source, runAfterServer) {
   // Transform the code with babel so JSX becomes JS.
   source = babel.transformSync(source, {filename}).code;
 
@@ -64,11 +64,12 @@ export async function testSSR(filename, source) {
         try {
           document.body.innerHTML = `<div id="root">${body}</div>`;
           let container = document.querySelector('#root');
+          runAfterServer?.();
           let element = evaluate(source, filename);
           if (ReactDOMClient) {
             act(() => ReactDOMClient.hydrateRoot(container, <SSRProvider>{element}</SSRProvider>));
           } else {
-            ReactDOM.hydrate(<SSRProvider>{element}</SSRProvider>, container);
+            act(() => {ReactDOM.hydrate(<SSRProvider>{element}</SSRProvider>, container);});
           }
         } catch (err) {
           errors.push(err.stack);

packages/react-aria-components/docs/Select.mdx

@@ -562,10 +562,11 @@ interface MySelectProps<T extends object> extends Omit<SelectProps<T>, 'children
   label?: string,
   description?: string,
   errorMessage?: string,
+  items?: Iterable<T>,
   children: React.ReactNode | ((item: T) => React.ReactNode)
 }
 
-function MySelect<T extends object>({label, description, errorMessage, children, ...props}: MySelectProps<T>) {
+function MySelect<T extends object>({label, description, errorMessage, children, items, ...props}: MySelectProps<T>) {
   return (
     <Select {...props}>
       <Label>{label}</Label>
@@ -576,7 +577,7 @@ function MySelect<T extends object>({label, description, errorMessage, children,
       {description && <Text slot="description">{description}</Text>}
       {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
       <Popover>
-        <ListBox>
+        <ListBox items={items}>
           {children}
         </ListBox>
       </Popover>

packages/react-aria-components/src/Breadcrumbs.tsx

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
+import {Collection, Node} from 'react-stately';
 import {CollectionProps, useCollection} from './Collection';
 import {ContextValue, forwardRefType, Provider, SlotProps, StyleProps, useContextProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './Heading';
 import {LinkContext} from './Link';
-import {Node} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, RefObject} from 'react';
 
 export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, Omit<AriaBreadcrumbsProps, 'children'>, StyleProps, SlotProps {
   /** Whether the breadcrumbs are disabled. */
@@ -27,9 +27,26 @@ export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<an
 
 function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
-  let {navProps} = useBreadcrumbs(props);
   let {portal, collection} = useCollection(props);
 
+  // Render the portal first so that we have the collection by the time we render the DOM in SSR
+  return (
+    <>
+      {portal}
+      <BreadcrumbsInner props={props} collection={collection} breadcrumbsRef={ref} />
+    </>
+  );
+}
+
+interface BreadcrumbsInnerProps<T> {
+  props: BreadcrumbsProps<T>,
+  collection: Collection<Node<T>>,
+  breadcrumbsRef: RefObject<HTMLElement>
+}
+
+function BreadcrumbsInner<T extends object>({props, collection, breadcrumbsRef: ref}: BreadcrumbsInnerProps<T>) {
+  let {navProps} = useBreadcrumbs(props);
+
   return (
     <nav
       ref={ref}
@@ -48,7 +65,6 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: Forwarde
             isDisabled={props.isDisabled} />
         ))}
       </ol>
-      {portal}
     </nav>
   );
 }