feat(AccordionBody): add transition callback props (#6478)

src/AccordionBody.tsx

@@ -2,13 +2,15 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { TransitionCallbacks } from '@restart/ui/types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import AccordionCollapse from './AccordionCollapse';
 import AccordionItemContext from './AccordionItemContext';
 import { BsPrefixRefForwardingComponent, BsPrefixProps } from './helpers';
 
 export interface AccordionBodyProps
   extends BsPrefixProps,
+    TransitionCallbacks,
     React.HTMLAttributes<HTMLElement> {}
 
 const propTypes = {
@@ -17,6 +19,31 @@ const propTypes = {
 
   /** @default 'accordion-body' */
   bsPrefix: PropTypes.string,
+
+  /**
+   * Callback fired before the component expands
+   */
+  onEnter: PropTypes.func,
+  /**
+   * Callback fired after the component starts to expand
+   */
+  onEntering: PropTypes.func,
+  /**
+   * Callback fired after the component has expanded
+   */
+  onEntered: PropTypes.func,
+  /**
+   * Callback fired before the component collapses
+   */
+  onExit: PropTypes.func,
+  /**
+   * Callback fired after the component starts to collapse
+   */
+  onExiting: PropTypes.func,
+  /**
+   * Callback fired after the component has collapsed
+   */
+  onExited: PropTypes.func,
 };
 
 const AccordionBody: BsPrefixRefForwardingComponent<'div', AccordionBodyProps> =
@@ -27,6 +54,12 @@ const AccordionBody: BsPrefixRefForwardingComponent<'div', AccordionBodyProps> =
         as: Component = 'div',
         bsPrefix,
         className,
+        onEnter,
+        onEntering,
+        onEntered,
+        onExit,
+        onExiting,
+        onExited,
         ...props
       },
       ref,
@@ -35,7 +68,15 @@ const AccordionBody: BsPrefixRefForwardingComponent<'div', AccordionBodyProps> =
       const { eventKey } = useContext(AccordionItemContext);
 
       return (
-        <AccordionCollapse eventKey={eventKey}>
+        <AccordionCollapse
+          eventKey={eventKey}
+          onEnter={onEnter}
+          onEntering={onEntering}
+          onEntered={onEntered}
+          onExit={onExit}
+          onExiting={onExiting}
+          onExited={onExited}
+        >
           <Component
             ref={ref}
             {...props}

test/AccordionSpec.tsx

@@ -233,4 +233,36 @@ describe('<Accordion>', () => {
 
     onSelectSpy.should.be.calledWith(['0']);
   });
+
+  it('should pass transition callbacks to underlying AccordionCollapse', async () => {
+    const increment = sinon.spy();
+
+    const { getByText } = render(
+      <Accordion>
+        <Accordion.Item eventKey="0">
+          <Accordion.Header>header0</Accordion.Header>
+          <Accordion.Body
+            onEnter={increment}
+            onEntering={increment}
+            onEntered={increment}
+            onExit={increment}
+            onExiting={increment}
+            onExited={increment}
+          >
+            body
+          </Accordion.Body>
+        </Accordion.Item>
+      </Accordion>,
+    );
+
+    fireEvent.click(getByText('header0'));
+
+    // Wait for body to open.
+    await waitFor(() => increment.callCount.should.equal(3));
+
+    fireEvent.click(getByText('header0'));
+
+    // Wait for body to close.
+    await waitFor(() => increment.callCount.should.equal(6));
+  });
 });