@patternfly/react-core 4.235.8 → 4.236.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.235.8",
+  "version": "4.236.0",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.86.8",
-    "@patternfly/react-styles": "^4.85.8",
-    "@patternfly/react-tokens": "^4.87.8",
+    "@patternfly/react-icons": "^4.87.0",
+    "@patternfly/react-styles": "^4.86.0",
+    "@patternfly/react-tokens": "^4.88.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "6c9b5c5d59f891999837cd42cf974865548e6b7a"
+  "gitHead": "a4b7c93b2fad078f13a177a886317bbb054f4922"
 }

package/src/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -106,7 +106,7 @@ describe('Dropdown', () => {
       <Dropdown
         dropdownItems={dropdownItems}
         toggle={
-          <DropdownToggle id="Dropdown Toggle" isPrimary>
+          <DropdownToggle id="Dropdown Toggle" toggleVariant="primary">
             Dropdown
           </DropdownToggle>
         }

package/src/components/Dropdown/examples/DropdownPrimaryToggle.tsx

@@ -46,7 +46,7 @@ export const DropdownPrimaryToggle: React.FunctionComponent = () => {
     <Dropdown
       onSelect={onSelect}
       toggle={
-        <DropdownToggle id="toggle-primary" isPrimary onToggle={onToggle}>
+        <DropdownToggle id="toggle-primary" toggleVariant="primary" onToggle={onToggle}>
           Dropdown
         </DropdownToggle>
       }

package/src/components/MenuToggle/MenuToggle.tsx

@@ -124,7 +124,13 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
     };
 
     if (isTypeahead) {
-      return <div ref={innerRef as React.Ref<HTMLDivElement>} className={css(commonStyles)} {...componentProps} />;
+      return (
+        <div
+          ref={innerRef as React.Ref<HTMLDivElement>}
+          className={css(commonStyles, styles.modifiers.typeahead)}
+          {...componentProps}
+        />
+      );
     }
 
     if (splitButtonOptions) {

package/src/components/Page/PageSection.tsx

@@ -65,6 +65,8 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
    * This prop should also be passed in if a heading is not being used to describe the content of the page section.
    */
   'aria-label'?: string;
+  /** Sets the base component to render. Defaults to section */
+  component?: keyof JSX.IntrinsicElements;
 }
 
 const variantType = {
@@ -98,6 +100,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   hasShadowBottom = false,
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
+  component = 'section',
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = React.useContext(PageContext);
@@ -109,8 +112,10 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
     }
   }, [hasOverflowScroll, ariaLabel]);
 
+  const Component = component as any;
+
   return (
-    <section
+    <Component
       {...props}
       className={css(
         variantType[type],
@@ -133,7 +138,7 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
     >
       {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
       {!isWidthLimited && children}
-    </section>
+    </Component>
   );
 };
 PageSection.displayName = 'PageSection';

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -128,3 +128,15 @@ test('Logs a warning in the console when an aria-label is not included with hasO
 
   expect(consoleWarning).toHaveBeenCalled();
 });
+
+test('Renders as a section by default', () => {
+  render(<PageSection>test</PageSection>);
+
+  expect(screen.getByText('test')).toHaveProperty('nodeName', 'SECTION');
+});
+
+test('Renders as other elements when a different element type is passed using the component prop', () => {
+  render(<PageSection component="main">test</PageSection>);
+
+  expect(screen.getByRole('main')).toHaveTextContent('test');
+});