Add DisclosureGroup component to RAC (#7063)

Author: devongovett

packages/@react-aria/disclosure/src/useDisclosure.ts

@@ -30,8 +30,8 @@ export interface AriaDisclosureProps {
 export interface DisclosureAria {
   /** Props for the disclosure button. */
   buttonProps: AriaButtonProps,
-  /** Props for the content element. */
-  contentProps: HTMLAttributes<HTMLElement>
+  /** Props for the disclosure panel. */
+  panelProps: HTMLAttributes<HTMLElement>
 }
 
 /**
@@ -84,8 +84,10 @@ export function useDisclosure(props: AriaDisclosureProps, state: DisclosureState
         }
       }
     },
-    contentProps: {
+    panelProps: {
       id: contentId,
+      // This can be overridden at the panel element level.
+      role: 'group',
       'aria-labelledby': triggerId,
       hidden: (!supportsBeforeMatch || isControlled) ? !state.isExpanded : true
     }

packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx

@@ -24,23 +24,23 @@ export default meta;
 
 export const Template = (args) => (
   <Accordion {...args}>
-    <Disclosure key="files">
+    <Disclosure id="files">
       <DisclosureHeader>
         Your files
       </DisclosureHeader>
       <DisclosurePanel>
         files
       </DisclosurePanel>
     </Disclosure>
-    <Disclosure key="shared">
+    <Disclosure id="shared">
       <DisclosureHeader>
         Shared with you
       </DisclosureHeader>
       <DisclosurePanel>
         shared
       </DisclosurePanel>
     </Disclosure>
-    <Disclosure key="last">
+    <Disclosure id="last">
       <DisclosureHeader>
         Last item
       </DisclosureHeader>

packages/@react-spectrum/accordion/src/Accordion.tsx

@@ -11,11 +11,10 @@
  */
 
 import {AriaLabelingProps, DOMProps, DOMRef, StyleProps} from '@react-types/shared';
-import {Button, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
+import {Button, DisclosureGroup, DisclosurePanelProps, DisclosureProps, Heading, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel} from 'react-aria-components';
 import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import {filterDOMProps} from '@react-aria/utils';
 import React, {forwardRef, ReactElement} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';
 import {useLocale} from '@react-aria/i18n';
@@ -31,17 +30,17 @@ function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
   return (
-    <div
-      {...filterDOMProps(props)}
+    <DisclosureGroup
+      {...props}
       {...styleProps}
       ref={domRef}
       className={classNames(styles, 'spectrum-Accordion', styleProps.className)}>
       {props.children}
-    </div>
+    </DisclosureGroup>
   );
 }
 
-export interface SpectrumDisclosureProps extends DisclosureProps, DOMProps, AriaLabelingProps  {
+export interface SpectrumDisclosureProps extends DisclosureProps, AriaLabelingProps  {
   /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
   children: [ReactElement<SpectrumDisclosureHeaderProps>, ReactElement<SpectrumDisclosurePanelProps>]
 }
@@ -78,11 +77,11 @@ function DisclosurePanel(props: SpectrumDisclosurePanelProps, ref: DOMRef<HTMLDi
 
 export interface SpectrumDisclosureHeaderProps extends DOMProps, AriaLabelingProps {
   /** 
-   * The heading level of the accordion header.
+   * The heading level of the disclosure header.
    * @default 3
    */
   level?: number,
-  /** The contents of the accordion header. */
+  /** The contents of the disclosure header. */
   children: React.ReactNode
 }
 

packages/@react-spectrum/accordion/stories/Accordion.stories.tsx

@@ -25,15 +25,15 @@ export type AccordionStory = ComponentStoryObj<typeof Accordion>;
 export const Default: AccordionStory = {
   render: (args) => (
     <Accordion {...args}>
-      <Disclosure key="files">
+      <Disclosure id="files">
         <DisclosureHeader>
           Files
         </DisclosureHeader>
         <DisclosurePanel>
           <p>Files content</p>
         </DisclosurePanel>
       </Disclosure>
-      <Disclosure key="people">
+      <Disclosure id="people">
         <DisclosureHeader>
           People
         </DisclosureHeader>

packages/@react-spectrum/s2/src/Accordion.tsx

@@ -10,17 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {ContextValue, Provider, SlotProps} from 'react-aria-components';
+import {ContextValue, DisclosureGroup, DisclosureGroupProps, SlotProps} from 'react-aria-components';
 import {DisclosureContext} from './Disclosure';
-import {DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';
-import {filterDOMProps} from '@react-aria/utils';
+import {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import React, {createContext, forwardRef} from 'react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-export interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps {
+export interface AccordionProps extends DisclosureGroupProps, UnsafeStyles, DOMProps, SlotProps {
   /** The disclosure elements in the accordion. */
   children: React.ReactNode,
   /** Spectrum-defined styles, returned by the `style()` macro. */
@@ -36,9 +35,7 @@ export interface AccordionProps extends UnsafeStyles, DOMProps, SlotProps {
    */
   density?: 'compact' | 'regular' | 'spacious',
   /** Whether the accordion should be displayed with a quiet style. */
-  isQuiet?: boolean,
-  /** Whether the accordion should be disabled. */
-  isDisabled?: boolean
+  isQuiet?: boolean
 }
 
 const accordion = style({
@@ -56,29 +53,23 @@ function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
     UNSAFE_className = '',
     size = 'M',
     density = 'regular',
-    isQuiet,
-    isDisabled,
-    ...otherProps
+    isQuiet
   } = props;
-  const domProps = filterDOMProps(otherProps);
   return (
-    <Provider
-      values={[
-        [DisclosureContext, {size, isQuiet, density, isDisabled}]
-      ]}>
-      <div
-        {...domProps}
+    <DisclosureContext.Provider value={{size, isQuiet, density}}>
+      <DisclosureGroup
+        {...props}
         ref={domRef}
         style={UNSAFE_style}
         className={(UNSAFE_className ?? '') + accordion(null, props.styles)}>
         {props.children}
-      </div>
-    </Provider>
+      </DisclosureGroup>
+    </DisclosureContext.Provider>
   );
 }
 
 /**
  * An accordion is a container for multiple disclosures.
  */
-let _Accordion = /*#__PURE__*/ (forwardRef as forwardRefType)(Accordion);
+let _Accordion = forwardRef(Accordion);
 export {_Accordion as Accordion};

packages/@react-spectrum/s2/src/Disclosure.tsx

@@ -10,19 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';
 import {Button, ContextValue, DisclosureStateContext, Heading, Provider, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps, useLocale, useSlottedContext} from 'react-aria-components';
 import {CenterBaseline} from './CenterBaseline';
 import {centerPadding, focusRing, getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with { type: 'macro' };
 import Chevron from '../ui-icons/Chevron';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {createContext, forwardRef, ReactElement, useContext} from 'react';
-import {size as sizeValue, style} from '../style/spectrum-theme' with { type: 'macro' };
+import {lightDark, size as sizeValue, style} from '../style/spectrum-theme' with { type: 'macro' };
+import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
 import {useDOMRef} from '@react-spectrum/utils';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
-export interface DisclosureProps extends RACDisclosureProps, StyleProps, DOMProps {
+export interface DisclosureProps extends RACDisclosureProps, StyleProps {
   /**
    * The size of the disclosure.
    * @default "M"
@@ -36,7 +35,7 @@ export interface DisclosureProps extends RACDisclosureProps, StyleProps, DOMProp
   /** Whether the disclosure should be displayed with a quiet style. */
   isQuiet?: boolean,
   /** The contents of the disclosure, consisting of an DisclosureHeader and DisclosurePanel. */
-  children: [ReactElement<DisclosureHeaderProps>, ReactElement<DisclosurePanelProps>]
+  children: ReactNode
 }
 
 export const DisclosureContext = createContext<ContextValue<Omit<DisclosureProps, 'children'>, DOMRefValue<HTMLDivElement>>>(null);
@@ -66,24 +65,19 @@ function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
   let {
     size = 'M',
     density = 'regular',
-    isQuiet, isDisabled
-  } = props;
-  let domRef = useDOMRef(ref);
-  let {
+    isQuiet,
     UNSAFE_style,
-    UNSAFE_className = '',
-    ...otherProps
+    UNSAFE_className = ''
   } = props;
-  const domProps = filterDOMProps(otherProps);
+  let domRef = useDOMRef(ref);
 
   return (
     <Provider
       values={[
-        [DisclosureContext, {size, isQuiet, density, isDisabled}]
+        [DisclosureContext, {size, isQuiet, density}]
       ]}>
       <RACDisclosure
-        {...domProps}
-        isDisabled={isDisabled}
+        {...props}
         ref={domRef}
         style={UNSAFE_style}
         className={(UNSAFE_className ?? '') + disclosure({isQuiet}, props.styles)}>
@@ -96,7 +90,7 @@ function Disclosure(props: DisclosureProps, ref: DOMRef<HTMLDivElement>) {
 /**
  * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
  */
-let _Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(Disclosure);
+let _Disclosure = forwardRef(Disclosure);
 export {_Disclosure as Disclosure};
 
 export interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {
@@ -105,6 +99,7 @@ export interface DisclosureHeaderProps extends UnsafeStyles, DOMProps {
    * @default 3
    */
   level?: number,
+  /** The contents of the disclosure header. */
   children: React.ReactNode
 }
 
@@ -171,18 +166,17 @@ const buttonStyles = style({
   width: 'full',
   backgroundColor: {
     default: 'transparent',
-    isFocusVisible: 'transparent-black-100',
-    isHovered: 'transparent-black-100'
+    isFocusVisible: lightDark('transparent-black-100', 'transparent-white-100'),
+    isHovered: lightDark('transparent-black-100', 'transparent-white-100'),
+    isPressed: lightDark('transparent-black-100', 'transparent-white-100')
   },
+  transition: 'default',
   borderWidth: 0,
   borderRadius: {
-    // Only rounded for keyboard focus and quiet hover.
+    // Only rounded for keyboard focus and quiet.
     default: 'none',
     isFocusVisible: 'control',
-    isQuiet: {
-      isHovered: 'control',
-      isFocusVisible: 'control'
-    }
+    isQuiet: 'control'
   },
   textAlign: 'start',
   disableTapHighlight: true
@@ -193,8 +187,7 @@ const chevronStyles = style({
     isRTL: 180,
     isExpanded: 90
   },
-  transitionDuration: '100ms',
-  transitionProperty: 'rotate',
+  transition: 'default',
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
@@ -222,7 +215,7 @@ function DisclosureHeader(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivEleme
       ref={domRef}
       style={UNSAFE_style}
       className={(UNSAFE_className ?? '') + headingStyle}>
-      <Button className={({isHovered, isFocused, isFocusVisible, isDisabled}) => buttonStyles({size, isHovered, isFocused, isFocusVisible, density, isQuiet, isDisabled})} slot="trigger">
+      <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot="trigger">
         <CenterBaseline>
           <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden="true" />
         </CenterBaseline>
@@ -235,7 +228,7 @@ function DisclosureHeader(props: DisclosureHeaderProps, ref: DOMRef<HTMLDivEleme
 /**
  * A header for a disclosure. Contains a heading and a trigger button to expand/collapse the panel.
  */
-let _DisclosureHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosureHeader);
+let _DisclosureHeader = forwardRef(DisclosureHeader);
 export {_DisclosureHeader as DisclosureHeader};
 
 export interface DisclosurePanelProps extends RACDisclosurePanelProps, UnsafeStyles, DOMProps, AriaLabelingProps {
@@ -286,6 +279,6 @@ function DisclosurePanel(props: DisclosurePanelProps, ref: DOMRef<HTMLDivElement
 /**
  * A disclosure panel is a collapsible section of content that is hidden until the disclosure is expanded.
  */
-let _DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(DisclosurePanel);
+let _DisclosurePanel = forwardRef(DisclosurePanel);
 export {_DisclosurePanel as DisclosurePanel};