S2 TagGroup collapse (adobe#6795)

alecmev · Aug 15, 2024 · 16176b8 · 16176b8
1 parent b27e449
commit 16176b8
Show file tree

Hide file tree

Showing 7 changed files with 407 additions and 104 deletions.
diff --git a/.storybook-s2/custom-addons/provider/register.js b/.storybook-s2/custom-addons/provider/register.js
@@ -55,7 +55,6 @@ addons.register('ProviderSwitcher', (api) => {
     title: 'viewport',
     type: types.TOOL,
     match: ({ viewMode }) => {
-      console.log('viewMode', viewMode);
       return viewMode === 'story' || viewMode === 'docs'
     },
     render: () => <ProviderFieldSetter api={api} />,

diff --git a/packages/@react-spectrum/s2/package.json b/packages/@react-spectrum/s2/package.json
@@ -124,6 +124,7 @@
     "@parcel/macros": "2.12.1-canary.3165"
   },
   "dependencies": {
+    "@react-aria/collections": "3.0.0-alpha.3",
     "@react-aria/i18n": "^3.11.0",
     "@react-aria/interactions": "^3.22.0",
     "@react-aria/utils": "^3.23.0",

diff --git a/packages/@react-spectrum/s2/src/Breadcrumbs.tsx b/packages/@react-spectrum/s2/src/Breadcrumbs.tsx
@@ -14,10 +14,11 @@ import {Breadcrumb as AriaBreadcrumb, BreadcrumbsProps as AriaBreadcrumbsProps,
 import {AriaBreadcrumbItemProps, useLocale} from 'react-aria';
 import ChevronIcon from '../ui-icons/Chevron';
 import {createContext, forwardRef, ReactNode, useRef} from 'react';
-import {DOMRefValue, LinkDOMProps} from '@react-types/shared';
+import {DOMRef, DOMRefValue, LinkDOMProps} from '@react-types/shared';
 import {focusRing, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {forwardRefType} from './types';
 import {size, style} from '../style/spectrum-theme' with { type: 'macro' };
+import {useDOMRef} from '@react-spectrum/utils';
 
 interface BreadcrumbsStyleProps {
   /**
@@ -69,7 +70,7 @@ const wrapper = style<BreadcrumbsStyleProps>({
   }
 }, getAllowedOverrides());
 
-function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
+function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: DOMRef<HTMLOListElement>) {
   let {
     UNSAFE_className = '',
     UNSAFE_style,
@@ -78,11 +79,11 @@ function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>) {
     children,
     ...otherProps
   } = props;
-  let ref = useRef(null);
+  let domRef = useDOMRef(ref);
   return (
     <RACBreadcrumbs
       {...otherProps}
-      ref={ref}
+      ref={domRef}
       style={UNSAFE_style}
       className={UNSAFE_className + wrapper({
         size