@patternfly/react-core 4.230.1 → 4.231.2

package/dist/js/components/MenuToggle/MenuToggleCheckbox.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { PickOptional } from '../../helpers/typeUtils';
+import { OUIAProps } from '../../helpers';
+export interface MenuToggleCheckboxProps extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'checked'>, OUIAProps {
+    /** Additional classes added to the MenuToggleCheckbox */
+    className?: string;
+    /** Flag to show if the checkbox selection is valid or invalid */
+    isValid?: boolean;
+    /** Flag to show if the checkbox is disabled */
+    isDisabled?: boolean;
+    /** Flag to show if the checkbox is checked when it is controlled by React state.
+     * To make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both.
+     */
+    isChecked?: boolean | null;
+    /** Flag to set the default checked value of the checkbox when it is uncontrolled by React state.
+     * To make the checkbox controlled instead use the isChecked prop, but do not use both.
+     */
+    defaultChecked?: boolean | null;
+    /** A callback for when the checkbox selection changes */
+    onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
+    /** Element to be rendered inside the <span> */
+    children?: React.ReactNode;
+    /** Id of the checkbox */
+    id: string;
+}
+export declare class MenuToggleCheckbox extends React.Component<MenuToggleCheckboxProps, {
+    ouiaStateId: string;
+}> {
+    static displayName: string;
+    static defaultProps: PickOptional<MenuToggleCheckboxProps>;
+    constructor(props: MenuToggleCheckboxProps);
+    handleChange: (event: React.FormEvent<HTMLInputElement>) => void;
+    calculateChecked: () => boolean;
+    render(): JSX.Element;
+}
+//# sourceMappingURL=MenuToggleCheckbox.d.ts.map

package/dist/js/components/MenuToggle/MenuToggleCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuToggleCheckbox.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuToggle/MenuToggleCheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAgB,SAAS,EAAoB,MAAM,eAAe,CAAC;AAE1E,MAAM,WAAW,uBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC,EAC3F,SAAS;IACX,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAChC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAChF,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;IACvG,MAAM,CAAC,WAAW,SAAwB;IAC1C,MAAM,CAAC,YAAY,EAAE,YAAY,CAAC,uBAAuB,CAAC,CAIxD;gBAEU,KAAK,EAAE,uBAAuB;IAO1C,YAAY,UAAW,MAAM,SAAS,CAAC,gBAAgB,CAAC,UAEtD;IAEF,gBAAgB,gBASd;IAEF,MAAM;CA0CP"}

package/dist/js/components/MenuToggle/MenuToggleCheckbox.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuToggleCheckbox = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const check_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css/components/Check/check"));
+const react_styles_1 = require("@patternfly/react-styles");
+const helpers_1 = require("../../helpers");
+class MenuToggleCheckbox extends React.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: helpers_1.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 = tslib_1.__rest(_a, ["className", "isValid", "isDisabled", "isChecked", "children", "ouiaId", "ouiaSafe", "onChange", "defaultChecked", "id"]);
+        const text = children && (React.createElement("span", { className: react_styles_1.css(check_1.default.checkLabel, className), "aria-hidden": "true", id: id }, children));
+        return (React.createElement("label", { className: react_styles_1.css(check_1.default.check, !children && check_1.default.modifiers.standalone, className), htmlFor: id },
+            React.createElement("input", Object.assign({ className: react_styles_1.css(check_1.default.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 }), helpers_1.getOUIAProps(MenuToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props)),
+            text));
+    }
+}
+exports.MenuToggleCheckbox = MenuToggleCheckbox;
+MenuToggleCheckbox.displayName = 'MenuToggleCheckbox';
+MenuToggleCheckbox.defaultProps = {
+    isValid: true,
+    isDisabled: false,
+    onChange: () => undefined
+};
+//# sourceMappingURL=MenuToggleCheckbox.js.map

package/dist/js/components/MenuToggle/MenuToggleCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuToggleCheckbox.js","sourceRoot":"","sources":["../../../../src/components/MenuToggle/MenuToggleCheckbox.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,wGAAyE;AACzE,2DAA+C;AAE/C,2CAA0E;AA2B1E,MAAa,kBAAmB,SAAQ,KAAK,CAAC,SAA2D;IAQvG,YAAY,KAA8B;QACxC,KAAK,CAAC,KAAK,CAAC,CAAC;QAMf,iBAAY,GAAG,CAAC,KAAwC,EAAE,EAAE;YAC1D,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAE,KAAK,CAAC,MAA2B,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACzE,CAAC,CAAC;QAEF,qBAAgB,GAAG,GAAG,EAAE;YACtB,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACjD,IAAI,SAAS,KAAK,IAAI,EAAE;gBACtB,oFAAoF;gBACpF,OAAO,KAAK,CAAC;aACd;iBAAM,IAAI,SAAS,KAAK,SAAS,EAAE;gBAClC,OAAO,SAAS,CAAC;aAClB;YACD,OAAO,cAAc,CAAC;QACxB,CAAC,CAAC;QAlBA,IAAI,CAAC,KAAK,GAAG;YACX,WAAW,EAAE,0BAAgB,CAAC,kBAAkB,CAAC,WAAW,CAAC;SAC9D,CAAC;IACJ,CAAC;IAiBD,MAAM;QACJ,MAAM,KAaF,IAAI,CAAC,KAAK,EAbR,EACJ,SAAS,EACT,OAAO,EACP,UAAU,EACV,SAAS,EACT,QAAQ,EACR,MAAM,EACN,QAAQ;QACR,sDAAsD;QACtD,QAAQ,EACR,cAAc,EACd,EAAE,OAEU,EADT,KAAK,sBAZJ,yHAaL,CAAa,CAAC;QACf,MAAM,IAAI,GAAG,QAAQ,IAAI,CACvB,8BAAM,SAAS,EAAE,kBAAG,CAAC,eAAM,CAAC,UAAU,EAAE,SAAS,CAAC,iBAAc,MAAM,EAAC,EAAE,EAAE,EAAE,IAC1E,QAAQ,CACJ,CACR,CAAC;QACF,OAAO,CACL,+BAAO,SAAS,EAAE,kBAAG,CAAC,eAAM,CAAC,KAAK,EAAE,CAAC,QAAQ,IAAI,eAAM,CAAC,SAAS,CAAC,UAAU,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE;YACnG,6CACE,SAAS,EAAE,kBAAG,CAAC,eAAM,CAAC,UAAU,CAAC,IAC7B,CAAC,IAAI,CAAC,gBAAgB,EAAE,KAAK,SAAS,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,IAC9E,IAAI,EAAE,EAAE,EACR,IAAI,EAAC,UAAU,EACf,GAAG,EAAE,IAAI,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC,kBAChD,CAAC,OAAO,EACtB,QAAQ,EAAE,UAAU,IAChB,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAC5E,sBAAY,CACd,kBAAkB,CAAC,WAAW,EAC9B,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EACtD,QAAQ,CACT,EACG,KAAK,EACT;YACD,IAAI,CACC,CACT,CAAC;IACJ,CAAC;;AAvEH,gDAwEC;AAvEQ,8BAAW,GAAG,oBAAoB,CAAC;AACnC,+BAAY,GAA0C;IAC3D,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,KAAK;IACjB,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAgB;CACjC,CAAC"}

package/dist/js/components/MenuToggle/index.d.ts

@@ -1,2 +1,4 @@
 export * from './MenuToggle';
+export * from './MenuToggleAction';
+export * from './MenuToggleCheckbox';
 //# sourceMappingURL=index.d.ts.map

package/dist/js/components/MenuToggle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuToggle/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/MenuToggle/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}

package/dist/js/components/MenuToggle/index.js

@@ -2,4 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./MenuToggle"), exports);
+tslib_1.__exportStar(require("./MenuToggleAction"), exports);
+tslib_1.__exportStar(require("./MenuToggleCheckbox"), exports);
 //# sourceMappingURL=index.js.map

package/dist/js/components/MenuToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/MenuToggle/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/MenuToggle/index.ts"],"names":[],"mappings":";;;AAAA,uDAA6B;AAC7B,6DAAmC;AACnC,+DAAqC"}

package/dist/umd/react-core.css

@@ -13427,6 +13427,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
 }
 
+.pf-l-bullseye {
+  --pf-l-bullseye--Padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--pf-l-bullseye--Padding);
+  margin: 0;
+}
+
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -14480,16 +14490,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-nav__item--item__link--after--Top: 0;
 }
 
-.pf-l-bullseye {
-  --pf-l-bullseye--Padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--pf-l-bullseye--Padding);
-  margin: 0;
-}
-
 .pf-c-notification-badge {
   --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
@@ -23961,6 +23961,75 @@ label.pf-c-tree-view__node-text {
     direction: ltr;
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;
@@ -27251,75 +27320,6 @@ label.pf-c-tree-view__node-text {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;

package/dist/umd/react-core.js

@@ -15668,8 +15668,9 @@
                     setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
                     disableHover: this.state.disableHover
                 } },
-                isRootMenu && (React__namespace.createElement(KeyboardHandler, { containerRef: this.menuRef || null, additionalKeyHandler: this.handleExtraKeys, createNavigableElements: this.createNavigableElements, isActiveElement: (element) => document.activeElement.parentElement === element ||
-                        (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element), getFocusableElement: (navigableElement) => navigableElement.firstChild, noHorizontalArrowHandling: document.activeElement &&
+                isRootMenu && (React__namespace.createElement(KeyboardHandler, { containerRef: this.menuRef || null, additionalKeyHandler: this.handleExtraKeys, createNavigableElements: this.createNavigableElements, isActiveElement: (element) => document.activeElement.closest('li') === element ||
+                        document.activeElement.parentElement === element ||
+                        (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element), getFocusableElement: (navigableElement) => navigableElement.querySelector('input') || navigableElement.firstChild, noHorizontalArrowHandling: document.activeElement &&
                         (document.activeElement.classList.contains('pf-c-breadcrumb__link') ||
                             document.activeElement.classList.contains('pf-c-dropdown__toggle')), noEnterHandling: true, noSpaceHandling: true })),
                 React__namespace.createElement("div", Object.assign({ id: id, className: css(menuStyles.menu, isPlain && menuStyles.modifiers.plain, isScrollable && menuStyles.modifiers.scrollable, containsFlyout && menuStyles.modifiers.flyout, isNavFlyout && menuStyles.modifiers.nav, containsDrilldown && menuStyles.modifiers.drilldown, _isMenuDrilledIn && menuStyles.modifiers.drilledIn, className), "aria-label": ariaLabel, ref: this.menuRef }, getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props), children)));
@@ -16039,7 +16040,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';
@@ -16048,14 +16049,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));
             }
-            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)));
+            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(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps)));
         }
     }
     MenuToggleBase.defaultProps = {
@@ -16063,12 +16070,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",
@@ -23232,7 +23289,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;