@patternfly/react-core 4.229.0 → 4.231.0

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';
@@ -15159,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";
@@ -15182,7 +15280,9 @@
         isNavOpen: false,
         onNavToggle: () => null,
         width: null,
-        getBreakpoint
+        height: null,
+        getBreakpoint,
+        getVerticalBreakpoint
     };
     const PageContext = React__namespace.createContext(pageContextDefaults);
     const PageContextProvider = PageContext.Provider;
@@ -15213,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 = () => {
@@ -15237,7 +15338,8 @@
                 desktopIsNavOpen: managedSidebarOpen,
                 mobileIsNavOpen: false,
                 mobileView: false,
-                width: null
+                width: null,
+                height: null
             };
         }
         componentDidMount() {
@@ -15269,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) {
@@ -15286,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;
@@ -15306,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,
@@ -15326,7 +15423,8 @@
         mainTabIndex: -1,
         isNotificationDrawerExpanded: false,
         onNotificationDrawerExpand: () => null,
-        getBreakpoint
+        getBreakpoint,
+        getVerticalBreakpoint
     };
 
     const Masthead = (_a) => {
@@ -15941,7 +16039,7 @@
             this.displayName = 'MenuToggleBase';
         }
         render() {
-            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, variant, innerRef, onClick, 'aria-label': ariaLabel } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "variant", "innerRef", "onClick", 'aria-label']);
+            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, splitButtonOptions, variant, innerRef, onClick, 'aria-label': ariaLabel } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "splitButtonOptions", "variant", "innerRef", "onClick", 'aria-label']);
             const isPlain = variant === 'plain';
             const isPlainText = variant === 'plainText';
             const isTypeahead = variant === 'typeahead';
@@ -15950,14 +16048,20 @@
                     React__namespace.createElement(CaretDownIcon$1, { "aria-hidden": true }))));
             const content = (React__namespace.createElement(React__namespace.Fragment, null,
                 icon && React__namespace.createElement("span", { className: css(styles$x.menuToggleIcon) }, icon),
-                isTypeahead ? children : React__namespace.createElement("span", { className: "pf-c-menu-toggle__text" }, children),
+                isTypeahead ? children : React__namespace.createElement("span", { className: css(styles$x.menuToggleText) }, children),
                 badge && React__namespace.createElement("span", { className: css(styles$x.menuToggleCount) }, badge),
                 isTypeahead ? (React__namespace.createElement("button", { type: "button", className: css(styles$x.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": "Menu toggle" }, toggleControls)) : (toggleControls)));
-            const componentProps = Object.assign(Object.assign({ className: css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isTypeahead && styles$x.modifiers.typeahead, isFullWidth && styles$x.modifiers.fullWidth, className), children: isPlain ? children : content }, (isDisabled && { disabled: true })), otherProps);
+            const commonStyles = css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, variant === 'secondary' && styles$x.modifiers.secondary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isFullWidth && styles$x.modifiers.fullWidth, isDisabled && styles$x.modifiers.disabled, className);
+            const componentProps = Object.assign(Object.assign({ children: isPlain ? children : content }, (isDisabled && { disabled: true })), otherProps);
             if (isTypeahead) {
-                return React__namespace.createElement("div", Object.assign({ ref: innerRef }, componentProps));
+                return React__namespace.createElement("div", Object.assign({ ref: innerRef, className: css(commonStyles) }, componentProps));
+            }
+            if (splitButtonOptions) {
+                return (React__namespace.createElement("div", { className: css(commonStyles, styles$x.modifiers.splitButton, (splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 : splitButtonOptions.variant) === 'action' && styles$x.modifiers.action) }, splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 :
+                    splitButtonOptions.items,
+                    React__namespace.createElement("button", Object.assign({ className: css(styles$x.menuToggleButton), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled }, otherProps), toggleControls)));
             }
-            return (React__namespace.createElement("button", Object.assign({ className: css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, variant === 'secondary' && styles$x.modifiers.secondary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isFullWidth && styles$x.modifiers.fullWidth, className), ref: innerRef, type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, onClick: onClick }, componentProps)));
+            return (React__namespace.createElement("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps)));
         }
     }
     MenuToggleBase.defaultProps = {
@@ -15965,12 +16069,62 @@
         isExpanded: false,
         isDisabled: false,
         isFullWidth: false,
-        isFullHeight: false,
-        variant: 'default'
+        isFullHeight: false
     };
     const MenuToggle = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
     MenuToggle.displayName = 'MenuToggle';
 
+    class MenuToggleAction extends React__namespace.Component {
+        render() {
+            const _a = this.props, { id, className, onClick, isDisabled, children } = _a, props = __rest$1(_a, ["id", "className", "onClick", "isDisabled", "children"]);
+            return (React__namespace.createElement("button", Object.assign({ id: id, className: css(styles$x.menuToggleButton, className), onClick: onClick, type: "button", disabled: isDisabled }, props), children));
+        }
+    }
+    MenuToggleAction.displayName = 'MenuToggleAction';
+    MenuToggleAction.defaultProps = {
+        className: '',
+        isDisabled: false,
+        onClick: () => { }
+    };
+
+    class MenuToggleCheckbox extends React__namespace.Component {
+        constructor(props) {
+            super(props);
+            this.handleChange = (event) => {
+                this.props.onChange(event.target.checked, event);
+            };
+            this.calculateChecked = () => {
+                const { isChecked, defaultChecked } = this.props;
+                if (isChecked === null) {
+                    // return false here and the indeterminate state will be set to true through the ref
+                    return false;
+                }
+                else if (isChecked !== undefined) {
+                    return isChecked;
+                }
+                return defaultChecked;
+            };
+            this.state = {
+                ouiaStateId: getDefaultOUIAId(MenuToggleCheckbox.displayName)
+            };
+        }
+        render() {
+            const _a = this.props, { className, isValid, isDisabled, isChecked, children, ouiaId, ouiaSafe, 
+            /* eslint-disable @typescript-eslint/no-unused-vars */
+            onChange, defaultChecked, id } = _a, props = __rest$1(_a, ["className", "isValid", "isDisabled", "isChecked", "children", "ouiaId", "ouiaSafe", "onChange", "defaultChecked", "id"]);
+            const text = children && (React__namespace.createElement("span", { className: css(styles$X.checkLabel, className), "aria-hidden": "true", id: id }, children));
+            return (React__namespace.createElement("label", { className: css(styles$X.check, !children && styles$X.modifiers.standalone, className), htmlFor: id },
+                React__namespace.createElement("input", Object.assign({ className: css(styles$X.checkInput) }, (this.calculateChecked() !== undefined && { onChange: this.handleChange }), { name: id, type: "checkbox", ref: elem => elem && (elem.indeterminate = isChecked === null), "aria-invalid": !isValid, disabled: isDisabled }, (defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked }), getOUIAProps(MenuToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props)),
+                text));
+        }
+    }
+    MenuToggleCheckbox.displayName = 'MenuToggleCheckbox';
+    MenuToggleCheckbox.defaultProps = {
+        isValid: true,
+        isDisabled: false,
+        onChange: () => undefined
+    };
+
     Promise.resolve().then(function () { return modalBox; });
     var modalStyles = {
       "button": "pf-c-button",
@@ -17443,27 +17597,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,
@@ -17540,13 +17673,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,
@@ -17612,8 +17753,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));
     };
@@ -17640,8 +17782,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));
     };
@@ -23145,7 +23288,9 @@
     exports.MenuItemAction = MenuItemAction;
     exports.MenuList = MenuList;
     exports.MenuToggle = MenuToggle;
+    exports.MenuToggleAction = MenuToggleAction;
     exports.MenuToggleBase = MenuToggleBase;
+    exports.MenuToggleCheckbox = MenuToggleCheckbox;
     exports.Modal = Modal;
     exports.ModalBox = ModalBox;
     exports.ModalBoxBody = ModalBoxBody;
@@ -23307,7 +23452,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;