@react-spectrum/s2 1.3.1 → 1.5.0

package/src/Tabs.tsx

@@ -24,11 +24,35 @@ import {
 } from 'react-aria-components/Tabs';
 import {baseColor, focusRing, size, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
-import {Collection, DOMRef, DOMRefValue, GlobalDOMAttributes, Key, Node, Orientation, RefObject} from '@react-types/shared';
+import {
+  Collection,
+  DOMRef,
+  DOMRefValue,
+  GlobalDOMAttributes,
+  Key,
+  Node,
+  Orientation,
+  RefObject
+} from '@react-types/shared';
 import {CollectionBuilder} from 'react-aria/CollectionBuilder';
 import {ContextValue, Provider} from 'react-aria-components/slots';
-import {createContext, forwardRef, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
-import {getAllowedOverrides, StyleProps, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};
+import {
+  createContext,
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
+import {
+  getAllowedOverrides,
+  StyleProps,
+  StylesPropWithHeight,
+  UnsafeStyles
+} from './style-utils' with {type: 'macro'};
 import {Group} from 'react-aria-components/Group';
 import {IconContext} from './Icon';
 import {inertValue} from 'react-aria/private/utils/inertValue';
@@ -46,56 +70,88 @@ import {useLocale} from 'react-aria/I18nProvider';
 import {useResizeObserver} from 'react-aria/private/utils/useResizeObserver';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface TabsProps extends Omit<AriaTabsProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface TabsProps
+  extends
+    Omit<AriaTabsProps, 'className' | 'style' | 'render' | 'children' | keyof GlobalDOMAttributes>,
+    UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
+  styles?: StylesPropWithHeight;
   /** The content to display in the tabs. */
-  children: ReactNode,
+  children: ReactNode;
   /**
    * The amount of space between the tabs.
+   *
    * @default 'regular'
    */
-  density?: 'compact' | 'regular',
+  density?: 'compact' | 'regular';
   /**
    * Defines if the text within the tabs should be hidden and only the icon should be shown.
    * The text is always visible when the item is collapsed into a picker.
+   *
    * @default 'show'
    */
-  labelBehavior?: 'show' | 'hide'
+  labelBehavior?: 'show' | 'hide';
 }
 
-export interface TabProps extends Omit<AriaTabProps, 'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes>, StyleProps {
+export interface TabProps
+  extends
+    Omit<
+      AriaTabProps,
+      'children' | 'style' | 'className' | 'render' | 'onClick' | keyof GlobalDOMAttributes
+    >,
+    StyleProps {
   /** The content to display in the tab. */
-  children: ReactNode
+  children: ReactNode;
 }
 
-export interface TabListProps<T> extends Omit<AriaTabListProps<T>, 'style' | 'className' | 'render' | 'aria-label' | 'aria-labelledby' | keyof GlobalDOMAttributes>, StyleProps {
+export interface TabListProps<T>
+  extends
+    Omit<
+      AriaTabListProps<T>,
+      | 'style'
+      | 'className'
+      | 'render'
+      | 'aria-label'
+      | 'aria-labelledby'
+      | keyof GlobalDOMAttributes
+    >,
+    StyleProps {
   /** The content to display in the tablist. */
-  children: ReactNode | ((item: T) => ReactNode)
+  children: ReactNode | ((item: T) => ReactNode);
 }
 
-export interface TabPanelProps extends Omit<AriaTabPanelProps, 'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes>, UnsafeStyles {
+export interface TabPanelProps
+  extends
+    Omit<
+      AriaTabPanelProps,
+      'children' | 'style' | 'className' | 'render' | keyof GlobalDOMAttributes
+    >,
+    UnsafeStyles {
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StylesPropWithHeight,
+  styles?: StylesPropWithHeight;
   /** The content to display in the tab panels. */
-  children: ReactNode
+  children: ReactNode;
 }
 
-export const TabsContext = createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
-const InternalTabsContext = createContext<Partial<TabsProps> & {
-  tablistRef?: RefObject<HTMLDivElement | null>,
-  selectedKey?: Key | null
-}>({});
+export const TabsContext =
+  createContext<ContextValue<Partial<TabsProps>, DOMRefValue<HTMLDivElement>>>(null);
+const InternalTabsContext = createContext<
+  Partial<TabsProps> & {
+    tablistRef?: RefObject<HTMLDivElement | null>;
+    selectedKey?: Key | null;
+    baseId?: string;
+  }
+>({});
 
 interface CollapseContextType {
-  showTabs: boolean,
-  menuId: string,
-  valueId: string,
-  ariaLabel?: string | undefined,
-  ariaDescribedBy?: string | undefined,
-  tabs: Array<Node<any>>,
-  listRef?: RefObject<HTMLDivElement | null>,
-  onSelectionChange?: (key: Key) => void
+  showTabs: boolean;
+  menuId: string;
+  valueId: string;
+  ariaLabel?: string | undefined;
+  ariaDescribedBy?: string | undefined;
+  tabs: Array<Node<any>>;
+  listRef?: RefObject<HTMLDivElement | null>;
+  onSelectionChange?: (key: Key) => void;
 }
 
 const CollapseContext = createContext<CollapseContextType>({
@@ -105,20 +161,24 @@ const CollapseContext = createContext<CollapseContextType>({
   tabs: []
 });
 
-const tabs = style({
-  position: 'relative',
-  display: 'flex',
-  flexShrink: 0,
-  font: 'ui',
-  flexDirection: {
-    orientation: {
-      horizontal: 'column'
+const tabs = style(
+  {
+    position: 'relative',
+    display: 'flex',
+    flexShrink: 0,
+    font: 'ui',
+    flexDirection: {
+      orientation: {
+        horizontal: 'column'
+      }
     }
-  }
-}, getAllowedOverrides({height: true}));
+  },
+  getAllowedOverrides({height: true})
+);
 
 /**
- * Tabs organize content into multiple sections and allow users to navigate between them. The content under the set of tabs should be related and form a coherent unit.
+ * Tabs organize content into multiple sections and allow users to navigate between them. The
+ * content under the set of tabs should be related and form a coherent unit.
  */
 export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, TabsContext);
@@ -130,29 +190,39 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
     labelBehavior = 'show'
   } = props;
   let domRef = useDOMRef(ref);
-  let [value, setValue] = useControlledState(props.selectedKey, props.defaultSelectedKey ?? null!, props.onSelectionChange);
+  let [value, setValue] = useControlledState(
+    props.selectedKey,
+    props.defaultSelectedKey ?? null!,
+    props.onSelectionChange
+  );
 
   if (!props['aria-label'] && !props['aria-labelledby']) {
     throw new Error('An aria-label or aria-labelledby prop is required on Tabs for accessibility.');
   }
 
   let tablistRef = useRef<HTMLDivElement | null>(null);
+  // Shared base id so child Tab/TabPanel components can derive stable ids.
+  let baseId = useId();
 
   return (
     <Provider
       values={[
-        [InternalTabsContext, {
-          density,
-          isDisabled,
-          orientation,
-          disabledKeys,
-          selectedKey: value,
-          tablistRef,
-          onSelectionChange: setValue,
-          labelBehavior,
-          'aria-label': props['aria-label'],
-          'aria-labelledby': props['aria-labelledby']
-        }]
+        [
+          InternalTabsContext,
+          {
+            density,
+            isDisabled,
+            orientation,
+            disabledKeys,
+            selectedKey: value,
+            tablistRef,
+            onSelectionChange: setValue,
+            labelBehavior,
+            baseId,
+            'aria-label': props['aria-label'],
+            'aria-labelledby': props['aria-labelledby']
+          }
+        ]
       ]}>
       <CollectionBuilder content={props.children}>
         {collection => (
@@ -161,7 +231,8 @@ export const Tabs = forwardRef(function Tabs(props: TabsProps, ref: DOMRef<HTMLD
             selectedKey={value}
             onSelectionChange={setValue}
             collection={collection}
-            containerRef={domRef} />
+            containerRef={domRef}
+          />
         )}
       </CollectionBuilder>
     </Provider>
@@ -206,15 +277,19 @@ const tablist = style({
   minWidth: 'min'
 });
 
-const tablistWrapper = style({
-  position: 'relative',
-  minWidth: 0,
-  flexShrink: 0,
-  flexGrow: 0
-}, getAllowedOverrides());
+const tablistWrapper = style(
+  {
+    position: 'relative',
+    minWidth: 0,
+    flexShrink: 0,
+    flexGrow: 0
+  },
+  getAllowedOverrides()
+);
 
-export function TabList<T extends object>(props: TabListProps<T>): ReactNode | null {
-  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} = useContext(CollapseContext) ?? {};
+export function TabList<T>(props: TabListProps<T>): ReactNode | null {
+  let {showTabs, menuId, valueId, tabs, listRef, onSelectionChange, ariaLabel, ariaDescribedBy} =
+    useContext(CollapseContext) ?? {};
   let {density, orientation, labelBehavior} = useContext(InternalTabsContext);
 
   if (showTabs) {
@@ -223,21 +298,24 @@ export function TabList<T extends object>(props: TabListProps<T>): ReactNode | n
 
   return (
     <div className={tablistWrapper(null, props.styles)}>
-      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
-        <HiddenTabs items={tabs} density={density} listRef={listRef} />
-      </div>}
+      {listRef && (
+        <div className={tablist({orientation, labelBehavior, density})}>
+          <HiddenTabs items={tabs} density={density} listRef={listRef} />
+        </div>
+      )}
       <TabsMenu
         id={menuId}
         valueId={valueId}
         items={tabs}
         onSelectionChange={onSelectionChange}
         aria-label={ariaLabel}
-        aria-describedby={ariaDescribedBy} />
+        aria-describedby={ariaDescribedBy}
+      />
     </div>
   );
 }
 
-function TabListInner<T extends object>(props: TabListProps<T>) {
+function TabListInner<T>(props: TabListProps<T>) {
   let {
     tablistRef,
     orientation,
@@ -251,23 +329,24 @@ function TabListInner<T extends object>(props: TabListProps<T>) {
   return (
     <div
       style={props.UNSAFE_style}
-      className={
-        (props.UNSAFE_className || '') +
-        tablistWrapper(null, props.styles)}>
-      {listRef && <div className={tablist({orientation, labelBehavior, density})}>
-        <HiddenTabs items={tabs} density={density} listRef={listRef} />
-      </div>}
+      className={(props.UNSAFE_className || '') + tablistWrapper(null, props.styles)}>
+      {listRef && (
+        <div className={tablist({orientation, labelBehavior, density})}>
+          <HiddenTabs items={tabs} density={density} listRef={listRef} />
+        </div>
+      )}
       <RACTabList
         {...props}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         ref={tablistRef}
-        className={renderProps => tablist({...renderProps, labelBehavior, density})} />
+        className={renderProps => tablist({...renderProps, labelBehavior, density})}
+      />
     </div>
   );
 }
 
-const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}>({
+const selectedIndicator = style<{isDisabled: boolean; orientation?: Orientation}>({
   position: 'absolute',
   backgroundColor: {
     default: 'neutral',
@@ -318,53 +397,62 @@ const selectedIndicator = style<{isDisabled: boolean, orientation?: Orientation}
   borderRadius: 'full'
 });
 
-const tab = style<TabRenderProps & {density?: 'compact' | 'regular', labelBehavior?: 'show' | 'hide', orientation?: Orientation}>({
-  ...focusRing(),
-  display: 'flex',
-  color: {
-    default: baseColor('neutral-subdued'),
-    isSelected: baseColor('neutral'),
-    isDisabled: 'disabled',
-    forcedColors: {
-      isSelected: 'Highlight',
-      isDisabled: 'GrayText'
-    }
-  },
-  borderRadius: 'sm',
-  gap: 'text-to-visual',
-  height: {
-    orientation: {
-      horizontal: {
-        density: {
-          compact: 32,
-          regular: 48
+const tab = style<
+  TabRenderProps & {
+    density?: 'compact' | 'regular';
+    labelBehavior?: 'show' | 'hide';
+    orientation?: Orientation;
+  }
+>(
+  {
+    ...focusRing(),
+    display: 'flex',
+    color: {
+      default: baseColor('neutral-subdued'),
+      isSelected: baseColor('neutral'),
+      isDisabled: 'disabled',
+      forcedColors: {
+        isSelected: 'Highlight',
+        isDisabled: 'GrayText'
+      }
+    },
+    borderRadius: 'sm',
+    gap: 'text-to-visual',
+    height: {
+      orientation: {
+        horizontal: {
+          density: {
+            compact: 32,
+            regular: 48
+          }
         }
       }
-    }
-  },
-  minHeight: {
-    orientation: {
-      vertical: {
-        density: {
-          compact: 32,
-          regular: 48
+    },
+    minHeight: {
+      orientation: {
+        vertical: {
+          density: {
+            compact: 32,
+            regular: 48
+          }
         }
       }
-    }
-  },
-  alignItems: 'center',
-  position: 'relative',
-  cursor: 'default',
-  textDecoration: 'none',
-  flexShrink: 0,
-  transition: 'default',
-  paddingX: {
-    labelBehavior: {
-      hide: size(6)
-    }
+    },
+    alignItems: 'center',
+    position: 'relative',
+    cursor: 'default',
+    textDecoration: 'none',
+    flexShrink: 0,
+    transition: 'default',
+    paddingX: {
+      labelBehavior: {
+        hide: size(6)
+      }
+    },
+    disableTapHighlight: true
   },
-  disableTapHighlight: true
-}, getAllowedOverrides());
+  getAllowedOverrides()
+);
 
 const icon = style({
   display: 'block',
@@ -376,9 +464,12 @@ const icon = style({
 });
 
 export function Tab(props: TabProps): ReactNode {
-  let {density, orientation, labelBehavior} = useContext(InternalTabsContext) ?? {};
+  let {density, orientation, labelBehavior, baseId} = useContext(InternalTabsContext) ?? {};
 
-  let contentId = useId();
+  // Derive a stable content id from the shared baseId on InternalTabsContext.
+  // Prevents infinite loop when rendering across multiple CollectionBuilder portals.
+  let fallbackId = useId();
+  let contentId = `${baseId ?? fallbackId}-content-${props.id ?? fallbackId}`;
   let ariaLabelledBy = props['aria-labelledby'] || '';
 
   return (
@@ -388,22 +479,26 @@ export function Tab(props: TabProps): ReactNode {
       originalProps={props}
       aria-labelledby={`${labelBehavior === 'hide' ? contentId : ''} ${ariaLabelledBy}`}
       style={props.UNSAFE_style}
-      className={renderProps => (props.UNSAFE_className || '') + tab({...renderProps, density, labelBehavior, orientation}, props.styles)}>
+      className={renderProps =>
+        (props.UNSAFE_className || '') +
+        tab({...renderProps, density, labelBehavior, orientation}, props.styles)
+      }>
       {({
-          // @ts-ignore
-          isMenu,
-          isDisabled
-        }) => {
+        // @ts-ignore
+        isMenu,
+        isDisabled
+      }) => {
         if (isMenu) {
           return props.children;
         } else {
           return (
             <Provider
               values={[
-                [TextContext, {
-                  id: contentId,
-                  styles:
-                    style({
+                [
+                  TextContext,
+                  {
+                    id: contentId,
+                    styles: style({
                       order: 1,
                       display: {
                         labelBehavior: {
@@ -411,16 +506,22 @@ export function Tab(props: TabProps): ReactNode {
                         }
                       }
                     })({labelBehavior})
-                }],
-                [IconContext, {
-                  render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
-                  styles: icon
-                }]
+                  }
+                ],
+                [
+                  IconContext,
+                  {
+                    render: centerBaseline({slot: 'icon', styles: style({order: 0})}),
+                    styles: icon
+                  }
+                ]
               ]}>
-              <TabInner
-                orientation={orientation!}
-                isDisabled={isDisabled}>
-                {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+              <TabInner orientation={orientation!} isDisabled={isDisabled}>
+                {typeof props.children === 'string' ? (
+                  <Text>{props.children}</Text>
+                ) : (
+                  props.children
+                )}
               </TabInner>
             </Provider>
           );
@@ -430,34 +531,42 @@ export function Tab(props: TabProps): ReactNode {
   );
 }
 
-function TabInner({isDisabled, orientation, children}: {
-  isDisabled: boolean,
-  orientation: Orientation,
-  children: ReactNode
+function TabInner({
+  isDisabled,
+  orientation,
+  children
+}: {
+  isDisabled: boolean;
+  orientation: Orientation;
+  children: ReactNode;
 }) {
   let ref = useRef<HTMLDivElement | null>(null);
   let isHidden = useContext(HiddenTabsContext);
 
   return (
     <>
-      {!isHidden && <SelectionIndicator ref={ref} className={selectedIndicator({isDisabled, orientation})} />}
+      {!isHidden && (
+        <SelectionIndicator ref={ref} className={selectedIndicator({isDisabled, orientation})} />
+      )}
       {children}
     </>
   );
 }
 
-
-const tabPanel = style({
-  ...focusRing(),
-  marginTop: 4,
-  color: 'gray-800',
-  flexGrow: 1,
-  minHeight: 0,
-  display: {
-    default: 'block',
-    isInert: 'none'
-  }
-}, getAllowedOverrides({height: true}));
+const tabPanel = style(
+  {
+    ...focusRing(),
+    marginTop: 4,
+    color: 'gray-800',
+    flexGrow: 1,
+    minHeight: 0,
+    display: {
+      default: 'block',
+      isInert: 'none'
+    }
+  },
+  getAllowedOverrides({height: true})
+);
 
 export function TabPanel(props: TabPanelProps): ReactNode | null {
   let {showTabs} = useContext(CollapseContext);
@@ -467,7 +576,10 @@ export function TabPanel(props: TabPanelProps): ReactNode | null {
       <AriaTabPanel
         {...props}
         style={props.UNSAFE_style}
-        className={renderProps => (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)} />
+        className={renderProps =>
+          (props.UNSAFE_className ?? '') + tabPanel(renderProps, props.styles)
+        }
+      />
     );
   }
 
@@ -492,11 +604,15 @@ function CollapsedTabPanel(props: TabPanelProps) {
       aria-labelledby={menuId + ' ' + valueId}
       tabIndex={tabIndex}
       style={UNSAFE_style}
-      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)} />
+      className={renderProps => UNSAFE_className + tabPanel(renderProps, props.styles)}
+    />
   );
 }
 
-function isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disabledKeys: Set<Key>) {
+function isEveryTabDisabled<T>(
+  collection: Collection<Node<T>> | undefined,
+  disabledKeys: Set<Key>
+) {
   let testKey: Key | null = null;
   if (collection && collection.size > 0) {
     testKey = collection.getFirstKey();
@@ -519,10 +635,10 @@ function isEveryTabDisabled<T>(collection: Collection<Node<T>> | undefined, disa
 const HiddenTabsContext = createContext(false);
 
 let HiddenTabs = function (props: {
-  listRef: RefObject<HTMLDivElement | null>,
-  items: Array<Node<any>>,
-  size?: string,
-  density?: 'compact' | 'regular'
+  listRef: RefObject<HTMLDivElement | null>;
+  items: Array<Node<any>>;
+  size?: string;
+  density?: 'compact' | 'regular';
 }) {
   let {listRef, items = [], size, density} = props;
 
@@ -543,7 +659,7 @@ let HiddenTabs = function (props: {
         opacity: 0
       })}>
       <HiddenTabsContext.Provider value>
-        {items.map((item) => {
+        {items.map(item => {
           // pull off individual props as an allow list, don't want refs or other props getting through
           return (
             <div
@@ -560,14 +676,30 @@ let HiddenTabs = function (props: {
   );
 };
 
-let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionChange: TabsProps['onSelectionChange']} & Omit<TabsProps, 'children'>) => {
+let TabsMenu = (
+  props: {
+    valueId: string;
+    items: Array<Node<any>>;
+    onSelectionChange: TabsProps['onSelectionChange'];
+  } & Omit<TabsProps, 'children'>
+) => {
   let {id, items, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, valueId} = props;
-  let {density, onSelectionChange: _onSelectionChange, selectedKey, isDisabled, disabledKeys, labelBehavior} = useContext(InternalTabsContext);
-  let onSelectionChange = useCallback((key: Key | null) => {
-    if (key != null) {
-      _onSelectionChange?.(key);
-    }
-  }, [_onSelectionChange]);
+  let {
+    density,
+    onSelectionChange: _onSelectionChange,
+    selectedKey,
+    isDisabled,
+    disabledKeys,
+    labelBehavior
+  } = useContext(InternalTabsContext);
+  let onSelectionChange = useCallback(
+    (key: Key | null) => {
+      if (key != null) {
+        _onSelectionChange?.(key);
+      }
+    },
+    [_onSelectionChange]
+  );
   let state = useContext(TabListStateContext);
   let allKeysDisabled = useMemo(() => {
     return isEveryTabDisabled(state?.collection, disabledKeys ? new Set(disabledKeys) : new Set());
@@ -589,7 +721,8 @@ let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionCha
             compact: 32,
             regular: 48
           }
-        }})({density})}>
+        }
+      })({density})}>
       <Picker
         id={id}
         valueId={valueId}
@@ -618,18 +751,25 @@ let TabsMenu = (props: {valueId: string, items: Array<Node<any>>, onSelectionCha
   );
 };
 
-let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collection<Node<unknown>>, containerRef: any} & TabsProps) => {
+let CollapsingTabs = ({
+  collection,
+  containerRef,
+  ...props
+}: {collection: Collection<Node<unknown>>; containerRef: any} & TabsProps) => {
   let {orientation = 'horizontal', onSelectionChange} = props;
   let [showItems, _setShowItems] = useState(true);
   showItems = orientation === 'vertical' ? true : showItems;
-  let setShowItems = useCallback((value: boolean) => {
-    if (orientation === 'vertical') {
-      // if orientation is vertical, we always show the items
-      _setShowItems(true);
-    } else {
-      _setShowItems(value);
-    }
-  }, [orientation]);
+  let setShowItems = useCallback(
+    (value: boolean) => {
+      if (orientation === 'vertical') {
+        // if orientation is vertical, we always show the items
+        _setShowItems(true);
+      } else {
+        _setShowItems(value);
+      }
+    },
+    [orientation]
+  );
 
   let {direction} = useLocale();
 
@@ -683,17 +823,24 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
   let contents: ReactNode;
   if (showItems) {
     contents = (
-      <RACTabs
-        {...props}
-        className=""
-        style={{display: 'contents'}}>
+      <RACTabs {...props} className="" style={{display: 'contents'}}>
         {props.children}
       </RACTabs>
     );
   } else {
     contents = (
       <>
-        <CollapseContext.Provider value={{showTabs: false, tabs: children, menuId, valueId, listRef: listRef, onSelectionChange, ariaLabel: props['aria-label'], ariaDescribedBy: props['aria-labelledby']}}>
+        <CollapseContext.Provider
+          value={{
+            showTabs: false,
+            tabs: children,
+            menuId,
+            valueId,
+            listRef: listRef,
+            onSelectionChange,
+            ariaLabel: props['aria-label'],
+            ariaDescribedBy: props['aria-labelledby']
+          }}>
           {props.children}
         </CollapseContext.Provider>
       </>
@@ -701,8 +848,12 @@ let CollapsingTabs = ({collection, containerRef, ...props}: {collection: Collect
   }
 
   return (
-    <div style={props.UNSAFE_style} className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)} ref={containerRef}>
-      <CollapseContext.Provider value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>
+    <div
+      style={props.UNSAFE_style}
+      className={(props.UNSAFE_className || '') + tabs({orientation}, props.styles)}
+      ref={containerRef}>
+      <CollapseContext.Provider
+        value={{showTabs: true, menuId, valueId, tabs: children, listRef: listRef}}>
         {contents}
       </CollapseContext.Provider>
     </div>