@patternfly/react-core 4.228.1 → 4.230.1

package/dist/umd/react-core.js

@@ -101,6 +101,76 @@
       "backdropOpen": "pf-c-backdrop__open"
     };
 
+    const global_breakpoint_sm = {
+      "name": "--pf-global--breakpoint--sm",
+      "value": "576px",
+      "var": "var(--pf-global--breakpoint--sm)"
+    };
+    var globalBreakpointSm = global_breakpoint_sm;
+
+    const global_breakpoint_md = {
+      "name": "--pf-global--breakpoint--md",
+      "value": "768px",
+      "var": "var(--pf-global--breakpoint--md)"
+    };
+    var globalBreakpointMd = global_breakpoint_md;
+
+    const global_breakpoint_lg = {
+      "name": "--pf-global--breakpoint--lg",
+      "value": "992px",
+      "var": "var(--pf-global--breakpoint--lg)"
+    };
+    var globalBreakpointLg = global_breakpoint_lg;
+
+    const global_breakpoint_xl = {
+      "name": "--pf-global--breakpoint--xl",
+      "value": "1200px",
+      "var": "var(--pf-global--breakpoint--xl)"
+    };
+    var globalBreakpointXl = global_breakpoint_xl;
+
+    const global_breakpoint_2xl = {
+      "name": "--pf-global--breakpoint--2xl",
+      "value": "1450px",
+      "var": "var(--pf-global--breakpoint--2xl)"
+    };
+    var globalBreakpoint2xl = global_breakpoint_2xl;
+
+    const global_height_breakpoint_sm = {
+      "name": "--pf-global--height-breakpoint--sm",
+      "value": "0",
+      "var": "var(--pf-global--height-breakpoint--sm)"
+    };
+    var globalHeightBreakpointSm = global_height_breakpoint_sm;
+
+    const global_height_breakpoint_md = {
+      "name": "--pf-global--height-breakpoint--md",
+      "value": "40rem",
+      "var": "var(--pf-global--height-breakpoint--md)"
+    };
+    var globalHeightBreakpointMd = global_height_breakpoint_md;
+
+    const global_height_breakpoint_lg = {
+      "name": "--pf-global--height-breakpoint--lg",
+      "value": "48rem",
+      "var": "var(--pf-global--height-breakpoint--lg)"
+    };
+    var globalHeightBreakpointLg = global_height_breakpoint_lg;
+
+    const global_height_breakpoint_xl = {
+      "name": "--pf-global--height-breakpoint--xl",
+      "value": "60rem",
+      "var": "var(--pf-global--height-breakpoint--xl)"
+    };
+    var globalHeightBreakpointXl = global_height_breakpoint_xl;
+
+    const global_height_breakpoint_2xl = {
+      "name": "--pf-global--height-breakpoint--2xl",
+      "value": "80rem",
+      "var": "var(--pf-global--height-breakpoint--2xl)"
+    };
+    var globalHeightBreakpoint2xl = global_height_breakpoint_2xl;
+
     const KEY_CODES = { ARROW_UP: 38, ARROW_DOWN: 40, ESCAPE_KEY: 27, TAB: 9, ENTER: 13, SPACE: 32 };
     const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
     const KEYHANDLER_DIRECTION = { UP: 'up', DOWN: 'down', RIGHT: 'right', LEFT: 'left' };
@@ -121,6 +191,20 @@
         ArrowLeft: 'ArrowLeft',
         ArrowRight: 'ArrowRight'
     };
+    const globalWidthBreakpoints = {
+        sm: parseInt(globalBreakpointSm.value),
+        md: parseInt(globalBreakpointMd.value),
+        lg: parseInt(globalBreakpointLg.value),
+        xl: parseInt(globalBreakpointXl.value),
+        '2xl': parseInt(globalBreakpoint2xl.value)
+    };
+    const globalHeightBreakpoints = {
+        sm: parseInt(globalHeightBreakpointSm.value),
+        md: parseInt(globalHeightBreakpointMd.value),
+        lg: parseInt(globalHeightBreakpointLg.value),
+        xl: parseInt(globalHeightBreakpointXl.value),
+        '2xl': parseInt(globalHeightBreakpoint2xl.value)
+    };
 
     /*!
     * tabbable 5.3.3
@@ -1790,11 +1874,11 @@
      * @param {object} mods The modifiers object
      * @param {any} styles The appropriate styles object for the component
      */
-    const formatBreakpointMods = (mods, styles, stylePrefix = '', breakpoint) => {
+    const formatBreakpointMods = (mods, styles, stylePrefix = '', breakpoint, vertical) => {
         if (!mods) {
             return '';
         }
-        if (breakpoint) {
+        if (breakpoint && !vertical) {
             if (breakpoint in mods) {
                 return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpoint]}`)];
             }
@@ -1809,13 +1893,40 @@
             return '';
         }
         return Object.entries(mods || {})
-            .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`)
+            .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}${vertical && breakpoint !== 'default' ? '-height' : ''}`)
             .map(toCamel)
             .map(mod => mod.replace(/-?(\dxl)/gi, (_res, group) => `_${group}`))
             .map(modifierKey => styles.modifiers[modifierKey])
             .filter(Boolean)
             .join(' ');
     };
+    /**
+     * Return the breakpoint for the given height
+     *
+     * @param {number | null} height The height to check
+     * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
+     */
+    const getVerticalBreakpoint = (height) => {
+        if (height === null) {
+            return null;
+        }
+        if (height >= globalHeightBreakpoints['2xl']) {
+            return '2xl';
+        }
+        if (height >= globalHeightBreakpoints.xl) {
+            return 'xl';
+        }
+        if (height >= globalHeightBreakpoints.lg) {
+            return 'lg';
+        }
+        if (height >= globalHeightBreakpoints.md) {
+            return 'md';
+        }
+        if (height >= globalHeightBreakpoints.sm) {
+            return 'sm';
+        }
+        return 'default';
+    };
     /**
      * Return the breakpoint for the given width
      *
@@ -1826,19 +1937,19 @@
         if (width === null) {
             return null;
         }
-        if (width >= 1450) {
+        if (width >= globalWidthBreakpoints['2xl']) {
             return '2xl';
         }
-        if (width >= 1200) {
+        if (width >= globalWidthBreakpoints.xl) {
             return 'xl';
         }
-        if (width >= 992) {
+        if (width >= globalWidthBreakpoints.lg) {
             return 'lg';
         }
-        if (width >= 768) {
+        if (width >= globalWidthBreakpoints.md) {
             return 'md';
         }
-        if (width >= 576) {
+        if (width >= globalWidthBreakpoints.sm) {
             return 'sm';
         }
         return 'default';
@@ -10472,14 +10583,17 @@
         return Object.keys(mods || {}).reduce((acc, curr) => curr === 'default' ? Object.assign(Object.assign({}, acc), { [prefix]: mods[curr] }) : Object.assign(Object.assign({}, acc), { [`${prefix}-on-${curr}`]: mods[curr] }), {});
     };
     const DescriptionList = (_a) => {
-        var { className = '', children = null, isHorizontal = false, isAutoColumnWidths, isAutoFit, isInlineGrid, isCompact, isFluid, isFillColumns, columnModifier, autoFitMinModifier, horizontalTermWidthModifier, orientation, style } = _a, props = __rest$1(_a, ["className", "children", "isHorizontal", "isAutoColumnWidths", "isAutoFit", "isInlineGrid", "isCompact", "isFluid", "isFillColumns", "columnModifier", "autoFitMinModifier", "horizontalTermWidthModifier", "orientation", "style"]);
+        var { className = '', children = null, isHorizontal = false, isAutoColumnWidths, isAutoFit, isInlineGrid, isCompact, isFluid, isFillColumns, displaySize, columnModifier, autoFitMinModifier, termWidth, horizontalTermWidthModifier, orientation, style } = _a, props = __rest$1(_a, ["className", "children", "isHorizontal", "isAutoColumnWidths", "isAutoFit", "isInlineGrid", "isCompact", "isFluid", "isFillColumns", "displaySize", "columnModifier", "autoFitMinModifier", "termWidth", "horizontalTermWidthModifier", "orientation", "style"]);
         if (isAutoFit && autoFitMinModifier) {
             style = Object.assign(Object.assign({}, style), setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier));
         }
+        if (termWidth) {
+            style = Object.assign(Object.assign({}, style), { '--pf-c-description-list__term--width': termWidth });
+        }
         if (isHorizontal && horizontalTermWidthModifier) {
             style = Object.assign(Object.assign({}, style), setBreakpointModifiers('--pf-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier));
         }
-        return (React__namespace.createElement("dl", Object.assign({ className: css(styles$M.descriptionList, (isHorizontal || isFluid) && styles$M.modifiers.horizontal, isAutoColumnWidths && styles$M.modifiers.autoColumnWidths, isAutoFit && styles$M.modifiers.autoFit, formatBreakpointMods(columnModifier, styles$M), formatBreakpointMods(orientation, styles$M), isInlineGrid && styles$M.modifiers.inlineGrid, isCompact && styles$M.modifiers.compact, isFluid && styles$M.modifiers.fluid, isFillColumns && styles$M.modifiers.fillColumns, className), style: style }, props), children));
+        return (React__namespace.createElement("dl", Object.assign({ className: css(styles$M.descriptionList, (isHorizontal || isFluid) && styles$M.modifiers.horizontal, isAutoColumnWidths && styles$M.modifiers.autoColumnWidths, isAutoFit && styles$M.modifiers.autoFit, formatBreakpointMods(columnModifier, styles$M), formatBreakpointMods(orientation, styles$M), isInlineGrid && styles$M.modifiers.inlineGrid, isCompact && styles$M.modifiers.compact, isFluid && styles$M.modifiers.fluid, isFillColumns && styles$M.modifiers.fillColumns, displaySize === 'lg' && styles$M.modifiers.displayLg, displaySize === '2xl' && styles$M.modifiers.display_2xl, className), style: style }, props), children));
     };
     DescriptionList.displayName = 'DescriptionList';
 
@@ -15156,19 +15270,6 @@
       "themeDark": "pf-theme-dark"
     };
 
-    const global_breakpoint_xl = {
-      "name": "--pf-global--breakpoint--xl",
-      "value": "1200px",
-      "var": "var(--pf-global--breakpoint--xl)"
-    };
-    var globalBreakpointXl = global_breakpoint_xl;
-
-    const PageGroup = (_a) => {
-        var { className = '', children, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$y.pageMainGroup, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })), children));
-    };
-    PageGroup.displayName = 'PageGroup';
-
     exports.PageLayouts = void 0;
     (function (PageLayouts) {
         PageLayouts["vertical"] = "vertical";
@@ -15179,7 +15280,9 @@
         isNavOpen: false,
         onNavToggle: () => null,
         width: null,
-        getBreakpoint
+        height: null,
+        getBreakpoint,
+        getVerticalBreakpoint
     };
     const PageContext = React__namespace.createContext(pageContextDefaults);
     const PageContextProvider = PageContext.Provider;
@@ -15210,7 +15313,8 @@
                 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 });
             };
             this.handleResize = debounce$1(this.resize, 250);
             this.handleMainClick = () => {
@@ -15234,7 +15338,8 @@
                 desktopIsNavOpen: managedSidebarOpen,
                 mobileIsNavOpen: false,
                 mobileView: false,
-                width: null
+                width: null,
+                height: null
             };
         }
         componentDidMount() {
@@ -15266,14 +15371,16 @@
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             defaultManagedSidebarIsOpen, 
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onPageResize, getBreakpoint, mainAriaLabel, mainTabIndex, tertiaryNav, isTertiaryNavGrouped, isBreadcrumbGrouped, additionalGroupedContent, groupProps } = _a, rest = __rest$1(_a, ["breadcrumb", "isBreadcrumbWidthLimited", "className", "children", "header", "sidebar", "notificationDrawer", "isNotificationDrawerExpanded", "onNotificationDrawerExpand", "isTertiaryNavWidthLimited", "skipToContent", "role", "mainContainerId", "isManagedSidebar", "defaultManagedSidebarIsOpen", "onPageResize", "getBreakpoint", "mainAriaLabel", "mainTabIndex", "tertiaryNav", "isTertiaryNavGrouped", "isBreadcrumbGrouped", "additionalGroupedContent", "groupProps"]);
-            const { mobileView, mobileIsNavOpen, desktopIsNavOpen, width } = this.state;
+            onPageResize, getBreakpoint, getVerticalBreakpoint, mainAriaLabel, mainTabIndex, tertiaryNav, isTertiaryNavGrouped, isBreadcrumbGrouped, additionalGroupedContent, groupProps, breadcrumbProps } = _a, rest = __rest$1(_a, ["breadcrumb", "isBreadcrumbWidthLimited", "className", "children", "header", "sidebar", "notificationDrawer", "isNotificationDrawerExpanded", "onNotificationDrawerExpand", "isTertiaryNavWidthLimited", "skipToContent", "role", "mainContainerId", "isManagedSidebar", "defaultManagedSidebarIsOpen", "onPageResize", "getBreakpoint", "getVerticalBreakpoint", "mainAriaLabel", "mainTabIndex", "tertiaryNav", "isTertiaryNavGrouped", "isBreadcrumbGrouped", "additionalGroupedContent", "groupProps", "breadcrumbProps"]);
+            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;
             if (tertiaryNav && isTertiaryNavWidthLimited) {
@@ -15283,16 +15390,9 @@
             else if (tertiaryNav) {
                 nav = React__namespace.createElement("div", { className: css(styles$y.pageMainNav) }, tertiaryNav);
             }
-            let crumb = null;
-            if (breadcrumb && isBreadcrumbWidthLimited) {
-                crumb = (React__namespace.createElement("section", { className: css(styles$y.pageMainBreadcrumb, styles$y.modifiers.limitWidth) },
-                    React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, breadcrumb)));
-            }
-            else if (breadcrumb) {
-                crumb = React__namespace.createElement("section", { className: css(styles$y.pageMainBreadcrumb) }, breadcrumb);
-            }
+            const crumb = breadcrumb ? (React__namespace.createElement("section", { className: css(styles$y.pageMainBreadcrumb, isBreadcrumbWidthLimited && styles$y.modifiers.limitWidth, formatBreakpointMods(breadcrumbProps === null || breadcrumbProps === void 0 ? void 0 : breadcrumbProps.stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true)) }, isBreadcrumbWidthLimited ? React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, breadcrumb) : breadcrumb)) : null;
             const isGrouped = isTertiaryNavGrouped || isBreadcrumbGrouped || additionalGroupedContent;
-            const group = isGrouped ? (React__namespace.createElement(PageGroup, Object.assign({}, groupProps),
+            const group = isGrouped ? (React__namespace.createElement("div", Object.assign({ className: css(styles$y.pageMainGroup, formatBreakpointMods(groupProps === null || groupProps === void 0 ? void 0 : groupProps.stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true)) }, groupProps),
                 isTertiaryNavGrouped && nav,
                 isBreadcrumbGrouped && crumb,
                 additionalGroupedContent)) : null;
@@ -15303,7 +15403,7 @@
                 children));
             const panelContent = React__namespace.createElement(DrawerPanelContent, null, notificationDrawer);
             return (React__namespace.createElement(PageContextProvider, { value: context },
-                React__namespace.createElement("div", Object.assign({ ref: this.pageRef }, rest, { className: css(styles$y.page, width !== null && 'pf-m-resize-observer', width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`, className) }),
+                React__namespace.createElement("div", Object.assign({ ref: this.pageRef }, rest, { className: css(styles$y.page, width !== null && height !== null && 'pf-m-resize-observer', width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`, height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`, className) }),
                     skipToContent,
                     header,
                     sidebar,
@@ -15323,7 +15423,8 @@
         mainTabIndex: -1,
         isNotificationDrawerExpanded: false,
         onNotificationDrawerExpand: () => null,
-        getBreakpoint
+        getBreakpoint,
+        getVerticalBreakpoint
     };
 
     const Masthead = (_a) => {
@@ -17440,27 +17541,6 @@
         isBelowBreakpoint: false
     });
 
-    const global_breakpoint_md = {
-      "name": "--pf-global--breakpoint--md",
-      "value": "768px",
-      "var": "var(--pf-global--breakpoint--md)"
-    };
-    var globalBreakpointMd = global_breakpoint_md;
-
-    const global_breakpoint_lg = {
-      "name": "--pf-global--breakpoint--lg",
-      "value": "992px",
-      "var": "var(--pf-global--breakpoint--lg)"
-    };
-    var globalBreakpointLg = global_breakpoint_lg;
-
-    const global_breakpoint_2xl = {
-      "name": "--pf-global--breakpoint--2xl",
-      "value": "1450px",
-      "var": "var(--pf-global--breakpoint--2xl)"
-    };
-    var globalBreakpoint2xl = global_breakpoint_2xl;
-
     const breakpoints = {
         md: globalBreakpointMd,
         lg: globalBreakpointLg,
@@ -17537,13 +17617,21 @@
     OverflowMenuDropdownItem.displayName = 'OverflowMenuDropdownItem';
 
     const PageBreadcrumb = (_a) => {
-        var { className = '', children, isWidthLimited, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("section", Object.assign({ className: css(styles$y.pageMainBreadcrumb, isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
+        var { className = '', children, isWidthLimited, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
+        return (React__namespace.createElement("section", Object.assign({ className: css(styles$y.pageMainBreadcrumb, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, children),
             !isWidthLimited && children));
     };
     PageBreadcrumb.displayName = 'PageBreadcrumb';
 
+    const PageGroup = (_a) => {
+        var { className = '', children, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$y.pageMainGroup, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })), children));
+    };
+    PageGroup.displayName = 'PageGroup';
+
     const BarsIconConfig = {
       name: 'BarsIcon',
       height: 512,
@@ -17609,8 +17697,9 @@
         [exports.PageSectionVariants.darker]: styles$y.modifiers.dark_100
     };
     const PageSection = (_a) => {
-        var { className = '', children, variant = 'default', type = 'default', padding, isFilled, isWidthLimited = false, isCenterAligned = false, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "variant", "type", "padding", "isFilled", "isWidthLimited", "isCenterAligned", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("section", Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$y), variantStyle$3[variant], isFilled === false && styles$y.modifiers.noFill, isFilled === true && styles$y.modifiers.fill, isWidthLimited && styles$y.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== exports.PageSectionTypes.subNav && styles$y.modifiers.alignCenter, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })),
+        var { className = '', children, variant = 'default', type = 'default', padding, isFilled, isWidthLimited = false, isCenterAligned = false, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "variant", "type", "padding", "isFilled", "isWidthLimited", "isCenterAligned", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
+        return (React__namespace.createElement("section", Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$y), formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), variantStyle$3[variant], isFilled === false && styles$y.modifiers.noFill, isFilled === true && styles$y.modifiers.fill, isWidthLimited && styles$y.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== exports.PageSectionTypes.subNav && styles$y.modifiers.alignCenter, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, children),
             !isWidthLimited && children));
     };
@@ -17637,8 +17726,9 @@
     PageHeaderToolsItem.displayName = 'PageHeaderToolsItem';
 
     const PageNavigation = (_a) => {
-        var { className = '', children, isWidthLimited, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$y.pageMainNav, isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
+        var { className = '', children, isWidthLimited, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$y.pageMainNav, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, children),
             !isWidthLimited && children));
     };
@@ -23304,7 +23394,10 @@
     exports.getResizeObserver = getResizeObserver;
     exports.getTextWidth = getTextWidth;
     exports.getUniqueId = getUniqueId;
+    exports.getVerticalBreakpoint = getVerticalBreakpoint;
     exports.globalBreakpoints = globalBreakpoints;
+    exports.globalHeightBreakpoints = globalHeightBreakpoints;
+    exports.globalWidthBreakpoints = globalWidthBreakpoints;
     exports.handleArrows = handleArrows;
     exports.innerDimensions = innerDimensions;
     exports.isElementInView = isElementInView;