@patternfly/react-core 6.0.0-alpha.84 → 6.0.0-alpha.85

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.83","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.0.0-alpha.84","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.83","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.0.0-alpha.84","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.83","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.0.0-alpha.84","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.84",
+  "version": "6.0.0-alpha.85",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "d49fbd742aef4dadd4a1863265e596d9084fed7d"
+  "gitHead": "c3878e74a655cae5c081b3f2b799f060ccd47fed"
 }

package/src/components/Accordion/AccordionContent.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AccordionContext, AccordionItemContext } from './AccordionContext';
-import { AccordionExpandableContentBody } from './AccordionExpandableContentBody';
+import { AccordionExpandableContentBody, AccordionExpandableContentBodyProps } from './AccordionExpandableContentBody';
 
 export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the Accordion  */
@@ -21,6 +21,8 @@ export interface AccordionContentProps extends React.HTMLProps<HTMLDivElement> {
   component?: React.ElementType;
   /** Flag indicating content is custom. Expanded content Body wrapper will be removed from children.  This allows multiple bodies to be rendered as content. */
   isCustomContent?: React.ReactNode;
+  /** Props passed to the AccordionExpandableContentBody **/
+  contentBodyProps?: AccordionExpandableContentBodyProps;
 }
 
 export const AccordionContent: React.FunctionComponent<AccordionContentProps> = ({
@@ -32,6 +34,7 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
   'aria-label': ariaLabel = '',
   'aria-labelledby': ariaLabelledby,
   component,
+  contentBodyProps,
   ...props
 }: AccordionContentProps) => {
   const [hasScrollbar, setHasScrollbar] = React.useState(false);
@@ -64,7 +67,11 @@ export const AccordionContent: React.FunctionComponent<AccordionContentProps> =
             {...(hasScrollbar && Container === 'div' && { role: 'region' })}
             {...props}
           >
-            {isCustomContent ? children : <AccordionExpandableContentBody>{children}</AccordionExpandableContentBody>}
+            {isCustomContent ? (
+              children
+            ) : (
+              <AccordionExpandableContentBody {...contentBodyProps}>{children}</AccordionExpandableContentBody>
+            )}
           </Container>
         );
       }}

package/src/components/Accordion/AccordionExpandableContentBody.tsx

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
-export interface AccordionExpandableContentBodyProps {
+export interface AccordionExpandableContentBodyProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the accordion content body  */
   children?: React.ReactNode;
 }
 
 export const AccordionExpandableContentBody: React.FunctionComponent<AccordionExpandableContentBodyProps> = ({
-  children = null
-}: AccordionExpandableContentBodyProps) => <div className={css(styles.accordionExpandableContentBody)}>{children}</div>;
+  children = null,
+  ...props
+}: AccordionExpandableContentBodyProps) => (
+  <div className={css(styles.accordionExpandableContentBody)} {...props}>
+    {children}
+  </div>
+);
 AccordionExpandableContentBody.displayName = 'AccordionExpandableContentBody';

package/src/components/Accordion/AccordionItem.tsx

@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AccordionItemContext } from './AccordionContext';
 
-export interface AccordionItemProps {
+export interface AccordionItemProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the accordion item. */
   children?: React.ReactNode;
   /** Additional classes added to the accordion item. */
@@ -15,14 +15,17 @@ export interface AccordionItemProps {
 export const AccordionItem: React.FunctionComponent<AccordionItemProps> = ({
   children = null,
   className,
-  isExpanded: isExpandedProp = false
+  isExpanded: isExpandedProp = false,
+  ...props
 }: AccordionItemProps) => (
   <AccordionItemContext.Provider
     value={{
       isExpanded: isExpandedProp
     }}
   >
-    <div className={css(styles.accordionItem, isExpandedProp && styles.modifiers.expanded, className)}>{children}</div>
+    <div className={css(styles.accordionItem, isExpandedProp && styles.modifiers.expanded, className)} {...props}>
+      {children}
+    </div>
   </AccordionItemContext.Provider>
 );
 AccordionItem.displayName = 'AccordionItem';

package/src/components/Accordion/__tests__/AccordionItem.test.tsx

@@ -28,6 +28,12 @@ test(`Renders with additional classes when className is passed`, () => {
   expect(screen.getByText('Test')).toHaveClass('custom-class');
 });
 
+test(`Spreads props if others are passed`, () => {
+  render(<AccordionItem data-testId="testId">Test</AccordionItem>);
+
+  expect(screen.getByTestId('testId')).toBeInTheDocument();
+});
+
 test('Matches the snapshot', () => {
   const { asFragment } = render(<AccordionItem>Test</AccordionItem>);
   expect(asFragment()).toMatchSnapshot();