@patternfly/react-core 4.229.0 → 4.231.0

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxSecondary.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckboxSecondary: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-disabled-example"
+            key="split-checkbox-secondary-disabled"
+            aria-label="Select all"
+            isDisabled
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-example"
+            key="split-checkbox-secondary"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      variant="secondary"
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-secondary-expanded-example"
+            key="split-checkbox-secondary-expanded"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Secondary menu toggle with checkbox split button"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSplitButtonCheckboxWithText.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (
+  <React.Fragment>
+    <MenuToggle
+      isDisabled
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-disabled-example"
+            key="split-checkbox-with-text-disabled"
+            aria-label="Select all"
+            isDisabled
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    />{' '}
+    <MenuToggle
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-example"
+            key="split-checkbox-with-text"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    />{' '}
+    <MenuToggle
+      isExpanded
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-expanded-example"
+            key="split-checkbox-with-text-expanded"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    />
+  </React.Fragment>
+);

package/src/components/MenuToggle/index.ts

@@ -1 +1,3 @@
 export * from './MenuToggle';
+export * from './MenuToggleAction';
+export * from './MenuToggleCheckbox';

package/src/components/Page/Page.tsx

@@ -4,9 +4,10 @@ import { css } from '@patternfly/react-styles';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
 import { debounce, canUseDOM } from '../../helpers/util';
 import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
-import { PageGroup, PageGroupProps } from './PageGroup';
+import { PageBreadcrumbProps } from './PageBreadcrumb';
+import { PageGroupProps } from './PageGroup';
 import { getResizeObserver } from '../../helpers/resizeObserver';
-import { getBreakpoint } from '../../helpers/util';
+import { formatBreakpointMods, getBreakpoint, getVerticalBreakpoint } from '../../helpers/util';
 
 export enum PageLayouts {
   vertical = 'vertical',
@@ -18,14 +19,19 @@ export interface PageContextProps {
   onNavToggle: () => void;
   isNavOpen: boolean;
   width: number;
+  height: number;
   getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  getVerticalBreakpoint: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 }
+
 export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
   isNavOpen: false,
   onNavToggle: () => null,
   width: null,
-  getBreakpoint
+  height: null,
+  getBreakpoint,
+  getVerticalBreakpoint
 };
 export const PageContext = React.createContext<PageContextProps>(pageContextDefaults);
 
@@ -80,6 +86,13 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
    */
   getBreakpoint?: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /**
+   * The page resize observer uses the breakpoints returned from this function when adding the pf-m-breakpoint-[default|sm|md|lg|xl|2xl] class
+   * You can override the default getVerticalBreakpoint function to return breakpoints at different sizes than the default
+   * You can view the default getVerticalBreakpoint function here:
+   * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
+   */
+  getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
   /** Tertiary nav component for the page */
@@ -94,6 +107,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   additionalGroupedContent?: React.ReactNode;
   /** Additional props of the group */
   groupProps?: PageGroupProps;
+  /** Additional props of the breadcrumb */
+  breadcrumbProps?: PageBreadcrumbProps;
 }
 
 export interface PageState {
@@ -101,6 +116,7 @@ export interface PageState {
   mobileIsNavOpen: boolean;
   mobileView: boolean;
   width: number;
+  height: number;
 }
 
 export class Page extends React.Component<PageProps, PageState> {
@@ -113,7 +129,8 @@ export class Page extends React.Component<PageProps, PageState> {
     mainTabIndex: -1,
     isNotificationDrawerExpanded: false,
     onNotificationDrawerExpand: () => null,
-    getBreakpoint
+    getBreakpoint,
+    getVerticalBreakpoint
   };
   mainRef = React.createRef<HTMLDivElement>();
   pageRef = React.createRef<HTMLDivElement>();
@@ -128,7 +145,8 @@ export class Page extends React.Component<PageProps, PageState> {
       desktopIsNavOpen: managedSidebarOpen,
       mobileIsNavOpen: false,
       mobileView: false,
-      width: null
+      width: null,
+      height: null
     };
   }
 
@@ -179,7 +197,8 @@ export class Page extends React.Component<PageProps, PageState> {
     if (mobileView !== this.state.mobileView) {
       this.setState({ mobileView });
     }
-    this.pageRef.current && this.setState({ width: this.pageRef.current.clientWidth });
+    this.pageRef.current &&
+      this.setState({ width: this.pageRef.current.clientWidth, height: this.pageRef.current.clientHeight });
   };
 
   handleResize = debounce(this.resize, 250);
@@ -223,6 +242,7 @@ export class Page extends React.Component<PageProps, PageState> {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onPageResize,
       getBreakpoint,
+      getVerticalBreakpoint,
       mainAriaLabel,
       mainTabIndex,
       tertiaryNav,
@@ -230,16 +250,19 @@ export class Page extends React.Component<PageProps, PageState> {
       isBreadcrumbGrouped,
       additionalGroupedContent,
       groupProps,
+      breadcrumbProps,
       ...rest
     } = this.props;
-    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width } = this.state;
+    const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width, height } = this.state;
 
     const context = {
       isManagedSidebar,
       onNavToggle: mobileView ? this.onNavToggleMobile : this.onNavToggleDesktop,
       isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen,
       width,
-      getBreakpoint
+      height,
+      getBreakpoint,
+      getVerticalBreakpoint
     };
 
     let nav = null;
@@ -253,25 +276,38 @@ export class Page extends React.Component<PageProps, PageState> {
       nav = <div className={css(styles.pageMainNav)}>{tertiaryNav}</div>;
     }
 
-    let crumb = null;
-    if (breadcrumb && isBreadcrumbWidthLimited) {
-      crumb = (
-        <section className={css(styles.pageMainBreadcrumb, styles.modifiers.limitWidth)}>
-          <div className={css(styles.pageMainBody)}>{breadcrumb}</div>
-        </section>
-      );
-    } else if (breadcrumb) {
-      crumb = <section className={css(styles.pageMainBreadcrumb)}>{breadcrumb}</section>;
-    }
+    const crumb = breadcrumb ? (
+      <section
+        className={css(
+          styles.pageMainBreadcrumb,
+          isBreadcrumbWidthLimited && styles.modifiers.limitWidth,
+          formatBreakpointMods(
+            breadcrumbProps?.stickyOnBreakpoint,
+            styles,
+            'sticky-',
+            getVerticalBreakpoint(height),
+            true
+          )
+        )}
+      >
+        {isBreadcrumbWidthLimited ? <div className={css(styles.pageMainBody)}>{breadcrumb}</div> : breadcrumb}
+      </section>
+    ) : null;
 
     const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
 
     const group = isGrouped ? (
-      <PageGroup {...groupProps}>
+      <div
+        className={css(
+          styles.pageMainGroup,
+          formatBreakpointMods(groupProps?.stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true)
+        )}
+        {...groupProps}
+      >
         {isTertiaryNavGrouped && nav}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
-      </PageGroup>
+      </div>
     ) : null;
 
     const main = (
@@ -299,8 +335,9 @@ export class Page extends React.Component<PageProps, PageState> {
           {...rest}
           className={css(
             styles.page,
-            width !== null && 'pf-m-resize-observer',
+            width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
+            height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
             className
           )}
         >

package/src/components/Page/PageBreadcrumb.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
+import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes to apply to the PageBreadcrumb */
@@ -9,8 +11,17 @@ export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   children?: React.ReactNode;
   /** Limits the width of the breadcrumb */
   isWidthLimited?: boolean;
-  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Flag indicating if PageBreadcrumb should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Flag indicating if PageBreadcrumb should have a shadow at the bottom */
@@ -24,27 +35,33 @@ export const PageBreadcrumb = ({
   children,
   isWidthLimited,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageBreadcrumbProps) => (
-  <section
-    className={css(
-      styles.pageMainBreadcrumb,
-      isWidthLimited && styles.modifiers.limitWidth,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-    {...props}
-  >
-    {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-    {!isWidthLimited && children}
-  </section>
-);
+}: PageBreadcrumbProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <section
+      className={css(
+        styles.pageMainBreadcrumb,
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isWidthLimited && styles.modifiers.limitWidth,
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+      {...props}
+    >
+      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
+      {!isWidthLimited && children}
+    </section>
+  );
+};
 PageBreadcrumb.displayName = 'PageBreadcrumb';

package/src/components/Page/PageGroup.tsx

@@ -1,14 +1,24 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
-
+import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes to apply to the PageGroup */
   className?: string;
   /** Content rendered inside of the PageGroup */
   children?: React.ReactNode;
-  /** Modifier indicating if PageGroup is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Modifier indicating if PageGroup should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the bottom */
@@ -21,25 +31,31 @@ export const PageGroup = ({
   className = '',
   children,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageGroupProps) => (
-  <div
-    {...props}
-    className={css(
-      styles.pageMainGroup,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-  >
-    {children}
-  </div>
-);
+}: PageGroupProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <div
+      {...props}
+      className={css(
+        styles.pageMainGroup,
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+    >
+      {children}
+    </div>
+  );
+};
 PageGroup.displayName = 'PageGroup';

package/src/components/Page/PageNavigation.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
+import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes to apply to the PageNavigation */
@@ -9,8 +11,17 @@ export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Limits the width of the PageNavigation */
   isWidthLimited?: boolean;
-  /** Modifier indicating if the PageNavigation is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Flag indicating if PageNavigation should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Flag indicating if PageNavigation should have a shadow at the bottom */
@@ -24,27 +35,33 @@ export const PageNavigation = ({
   children,
   isWidthLimited,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageNavigationProps) => (
-  <div
-    className={css(
-      styles.pageMainNav,
-      isWidthLimited && styles.modifiers.limitWidth,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-    {...props}
-  >
-    {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-    {!isWidthLimited && children}
-  </div>
-);
+}: PageNavigationProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <div
+      className={css(
+        styles.pageMainNav,
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isWidthLimited && styles.modifiers.limitWidth,
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+      {...props}
+    >
+      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
+      {!isWidthLimited && children}
+    </div>
+  );
+};
 PageNavigation.displayName = 'PageNavigation';

package/src/components/Page/PageSection.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import { formatBreakpointMods } from '../../helpers/util';
+import { PageContext } from '../Page/Page';
 
 export enum PageSectionVariants {
   default = 'default',
@@ -43,8 +44,17 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'padding' | 'noPadding';
     '2xl'?: 'padding' | 'noPadding';
   };
-  /** Modifier indicating if PageSection is sticky to the top or bottom */
+  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
   sticky?: 'top' | 'bottom';
+  /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
+  stickyOnBreakpoint?: {
+    default?: 'top' | 'bottom';
+    sm?: 'top' | 'bottom';
+    md?: 'top' | 'bottom';
+    lg?: 'top' | 'bottom';
+    xl?: 'top' | 'bottom';
+    '2xl'?: 'top' | 'bottom';
+  };
   /** Modifier indicating if PageSection should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the bottom */
@@ -79,32 +89,38 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   isWidthLimited = false,
   isCenterAligned = false,
   sticky,
+  stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
   ...props
-}: PageSectionProps) => (
-  <section
-    {...props}
-    className={css(
-      variantType[type],
-      formatBreakpointMods(padding, styles),
-      variantStyle[variant],
-      isFilled === false && styles.modifiers.noFill,
-      isFilled === true && styles.modifiers.fill,
-      isWidthLimited && styles.modifiers.limitWidth,
-      isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles.modifiers.alignCenter,
-      sticky === 'top' && styles.modifiers.stickyTop,
-      sticky === 'bottom' && styles.modifiers.stickyBottom,
-      hasShadowTop && styles.modifiers.shadowTop,
-      hasShadowBottom && styles.modifiers.shadowBottom,
-      hasOverflowScroll && styles.modifiers.overflowScroll,
-      className
-    )}
-    {...(hasOverflowScroll && { tabIndex: 0 })}
-  >
-    {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
-    {!isWidthLimited && children}
-  </section>
-);
+}: PageSectionProps) => {
+  const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+
+  return (
+    <section
+      {...props}
+      className={css(
+        variantType[type],
+        formatBreakpointMods(padding, styles),
+        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        variantStyle[variant],
+        isFilled === false && styles.modifiers.noFill,
+        isFilled === true && styles.modifiers.fill,
+        isWidthLimited && styles.modifiers.limitWidth,
+        isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles.modifiers.alignCenter,
+        sticky === 'top' && styles.modifiers.stickyTop,
+        sticky === 'bottom' && styles.modifiers.stickyBottom,
+        hasShadowTop && styles.modifiers.shadowTop,
+        hasShadowBottom && styles.modifiers.shadowBottom,
+        hasOverflowScroll && styles.modifiers.overflowScroll,
+        className
+      )}
+      {...(hasOverflowScroll && { tabIndex: 0 })}
+    >
+      {isWidthLimited && <div className={css(styles.pageMainBody)}>{children}</div>}
+      {!isWidthLimited && children}
+    </section>
+  );
+};
 PageSection.displayName = 'PageSection';