fix: [RAC] BreadCrumbs now pass through with useRenderProps

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

@@ -9,17 +9,35 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
-import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
+import {AriaBreadcrumbsProps, mergeProps, useBreadcrumbs, useFocusRing} from 'react-aria';
+import {BaseCollection, Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext} from './Collection';
-import {ContextValue, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
+import {
+  ContextValue,
+  RenderProps,
+  SlotProps,
+  StyleRenderProps,
+  useContextProps,
+  useRenderProps,
+  useSlottedContext
+} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType, Key} from '@react-types/shared';
 import {LinkContext} from './Link';
 import {Node} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import React, {createContext, ForwardedRef, forwardRef, RefObject, useContext} from 'react';
 
-export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps {
+/**
+ * 1. Should I expose collection interface?
+ * 2. Maybe there's a possibility of unwanted props?
+ */
+export interface BreadCrumbsRenderProps {
+  isDisabled: boolean,
+  isFocusWithin: boolean,
+  isFocusVisible: boolean
+}
+
+export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleRenderProps<BreadCrumbsRenderProps>, SlotProps {
   /** Whether the breadcrumbs are disabled. */
   isDisabled?: boolean,
   /** Handler that is called when a breadcrumb is clicked. */
@@ -30,24 +48,48 @@ export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<an
 
 function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: ForwardedRef<HTMLOListElement>) {
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
+  return (
+    <CollectionBuilder content={<Collection {...props} />}>
+      {(collection) => <BreadCrumbsInner breadCrumbsRef={ref} props={props} collection={collection} />}
+    </CollectionBuilder>
+  );
+};
+
+interface BreadCrumbsInnerProps<T> {
+  props: BreadcrumbsProps<T>,
+  collection: BaseCollection<unknown>,
+  breadCrumbsRef: RefObject<HTMLOListElement | null>
+}
+
+function BreadCrumbsInner<T extends object>({props, collection, breadCrumbsRef}: BreadCrumbsInnerProps<T>) {
   let {CollectionRoot} = useContext(CollectionRendererContext);
   let {navProps} = useBreadcrumbs(props);
+  const {isFocused, isFocusVisible, focusProps} = useFocusRing({within: true});
+
+  let renderProps = useRenderProps({
+    defaultClassName: 'react-aria-Breadcrumbs',
+    className: props.className,
+    style: props.style,
+    values: {
+      isDisabled: props.isDisabled || false,
+      isFocusWithin: isFocused,
+      isFocusVisible
+    }
+  });
 
   return (
-    <CollectionBuilder content={<Collection {...props} />}>
-      {collection => (
-        <ol
-          ref={ref}
-          {...navProps}
-          slot={props.slot || undefined}
-          style={props.style}
-          className={props.className ?? 'react-aria-Breadcrumbs'}>
-          <BreadcrumbsContext.Provider value={props}>
-            <CollectionRoot collection={collection} />
-          </BreadcrumbsContext.Provider>
-        </ol>
-      )}
-    </CollectionBuilder>
+    <ol
+      {...mergeProps(navProps, focusProps)}
+      {...renderProps}
+      ref={breadCrumbsRef}
+      slot={props.slot || undefined}
+      data-focus-visible={isFocusVisible || undefined}
+      data-focus-within={isFocused || undefined}
+      data-disabled={props.isDisabled || undefined}>
+      <BreadcrumbsContext.Provider value={props}>
+        <CollectionRoot collection={collection} />
+      </BreadcrumbsContext.Provider>
+    </ol>
   );
 }
 

packages/react-aria-components/test/Breadcrumbs.test.js

@@ -11,8 +11,9 @@
  */
 
 import {Breadcrumb, Breadcrumbs, BreadcrumbsContext, Link} from 'react-aria-components';
+import {pointerMap, render} from '@react-spectrum/test-utils-internal';
 import React from 'react';
-import {render} from '@react-spectrum/test-utils-internal';
+import userEvent from '@testing-library/user-event';
 
 let renderBreadcrumbs = (breadcrumbsProps, itemProps) => render(
   <Breadcrumbs {...breadcrumbsProps}>
@@ -23,6 +24,11 @@ let renderBreadcrumbs = (breadcrumbsProps, itemProps) => render(
 );
 
 describe('Breadcrumbs', () => {
+  let user;
+  beforeAll(() => {
+    user = userEvent.setup({delay: null, pointerMap});
+  });
+
   it('should render with default class', () => {
     let {getByRole, getAllByRole} = renderBreadcrumbs();
     let breadcrumbs = getByRole('list');
@@ -104,7 +110,7 @@ describe('Breadcrumbs', () => {
     expect(breadcrumbRef.current).toBe(item);
   });
 
-  it('should support render props', () => {
+  it('should support isCurrent props', () => {
     let items = [
       {id: 1, name: 'Item 1'},
       {id: 2, name: 'Item 2'},
@@ -119,4 +125,49 @@ describe('Breadcrumbs', () => {
 
     expect(getAllByRole('listitem').map((it) => it.textContent)).toEqual(['Item 1', 'Item 2', 'Current']);
   });
+
+  it('should support isDisabled props', () => {
+    let {getByRole} = render(
+      <Breadcrumbs isDisabled className={({defaultClassName, isDisabled}) => `${defaultClassName}-${isDisabled}`}>
+        <Breadcrumb><Link>Item1</Link></Breadcrumb>
+      </Breadcrumbs>
+    );
+
+    const breadCrumbs = getByRole('list');
+    expect(breadCrumbs).toHaveAttribute('data-disabled', 'true');
+    expect(breadCrumbs).toHaveClass('react-aria-Breadcrumbs-true');
+  });
+
+  it('should support focus-ring', async () => {
+    let {getByRole} = render(
+      <Breadcrumbs className={({defaultClassName, isFocusVisible}) => `${defaultClassName}-${isFocusVisible}`}>
+        <Breadcrumb><Link href="/">Item1</Link></Breadcrumb>
+        <Breadcrumb><Link href="/react-aria">React Aria</Link></Breadcrumb>
+      </Breadcrumbs>
+    );
+    let breadCrumbs = getByRole('list');
+
+    expect(breadCrumbs).not.toHaveAttribute('data-focus-visible');
+    expect(breadCrumbs).toHaveClass('react-aria-Breadcrumbs-false');
+
+    await user.tab();
+    expect(breadCrumbs).toHaveAttribute('data-focus-visible', 'true');
+    expect(breadCrumbs).toHaveClass('react-aria-Breadcrumbs-true');
+
+    await user.tab();
+    expect(breadCrumbs).not.toHaveAttribute('data-focus-visible');
+    expect(breadCrumbs).toHaveClass('react-aria-Breadcrumbs-false');
+  });
+
+  it('should have default data attributes', () => {
+    let {getByRole, getAllByRole} = renderBreadcrumbs();
+
+    let breadcrumbs = getByRole('list');
+    expect(breadcrumbs).toHaveAttribute('data-rac');
+    expect(breadcrumbs).not.toHaveAttribute('data-focus-within');
+    expect(breadcrumbs).not.toHaveAttribute('data-disabled');
+
+    let items = getAllByRole('listitem');
+    items.forEach((item) => expect(item).toHaveAttribute('data-rac'));
+  });
 });