@react-spectrum/s2 3.0.0-nightly-9421c1409-240922 → 3.0.0-nightly-5a0b4fabc-240924

package/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};