@patternfly/react-core 4.214.5 → 4.215.0

package/dist/umd/react-core.js

@@ -8181,7 +8181,7 @@
             };
         }
         render() {
-            const _a = this.props, { 'aria-label': ariaLabel, className, onChange, isValid, isDisabled, isChecked, label, checked, defaultChecked, description, body, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ['aria-label', "className", "onChange", "isValid", "isDisabled", "isChecked", "label", "checked", "defaultChecked", "description", "body", "ouiaId", "ouiaSafe"]);
+            const _a = this.props, { 'aria-label': ariaLabel, className, onChange, isValid, isDisabled, isChecked, label, checked, defaultChecked, description, body, ouiaId, ouiaSafe, component: Component } = _a, props = __rest$1(_a, ['aria-label', "className", "onChange", "isValid", "isDisabled", "isChecked", "label", "checked", "defaultChecked", "description", "body", "ouiaId", "ouiaSafe", "component"]);
             if (!props.id) {
                 // eslint-disable-next-line no-console
                 console.error('Checkbox:', 'id is required to make input accessible');
@@ -8197,7 +8197,7 @@
                 checkedProps.defaultChecked = defaultChecked;
             }
             checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
-            return (React__namespace.createElement("div", { className: css(styles$Y.check, !label && styles$Y.modifiers.standalone, className) },
+            return (React__namespace.createElement(Component, { className: css(styles$Y.check, !label && styles$Y.modifiers.standalone, className) },
                 React__namespace.createElement("input", Object.assign({}, props, { className: css(styles$Y.checkInput), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, ref: elem => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
                 label && (React__namespace.createElement("label", { className: css(styles$Y.checkLabel, isDisabled && styles$Y.modifiers.disabled), htmlFor: props.id }, label)),
                 description && React__namespace.createElement("span", { className: css(styles$Y.checkDescription) }, description),
@@ -8211,7 +8211,8 @@
         isDisabled: false,
         isChecked: false,
         onChange: defaultOnChange,
-        ouiaSafe: true
+        ouiaSafe: true,
+        component: 'div'
     };
 
     Promise.resolve().then(function () { return clipboardCopy; });
@@ -14989,9 +14990,12 @@
         direction: 'right'
     });
     const MenuItemBase = (_a) => {
-        var { children, className, itemId = null, to, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isExternalLink = false, isSelected = null, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef } = _a, props = __rest$1(_a, ["children", "className", "itemId", "to", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isExternalLink", "isSelected", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef"]);
+        var { children, className, itemId = null, to, hasCheck = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isExternalLink = false, isSelected = null, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef } = _a, props = __rest$1(_a, ["children", "className", "itemId", "to", "hasCheck", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isExternalLink", "isSelected", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef"]);
         const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover } = React__namespace.useContext(MenuContext);
-        const Component = (to ? 'a' : component);
+        let Component = (to ? 'a' : component);
+        if (hasCheck && !to) {
+            Component = 'label';
+        }
         const [flyoutTarget, setFlyoutTarget] = React__namespace.useState(null);
         const flyoutContext = React__namespace.useContext(FlyoutContext);
         const [flyoutXDirection, setFlyoutXDirection] = React__namespace.useState(flyoutContext.direction);
@@ -15152,15 +15156,19 @@
                 setFlyoutRef(null);
             }
         };
-        return (React__namespace.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, className), onMouseOver: onMouseOver }, (flyoutMenu && { onKeyDown: handleFlyout }), { ref: ref, role: "none" }, props),
-            React__namespace.createElement(Component, Object.assign({ tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent(), disabled: isDisabled, role: "menuitem", ref: innerRef, onClick: (event) => {
+        return (React__namespace.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, className), onMouseOver: onMouseOver }, (flyoutMenu && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheck ? 'none' : 'menuitem' }, props),
+            React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement(Component, Object.assign({ tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheck && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheck && { disabled: isDisabled }), (!hasCheck && { role: 'menuitem' }), { ref: innerRef }, (!hasCheck && {
+                onClick: (event) => {
                     onItemSelect(event, onSelect);
                     _drill && _drill();
-                } }, additionalProps),
+                }
+            }), (hasCheck && { htmlFor: randomId }), additionalProps),
                 React__namespace.createElement("span", { className: css(menuStyles.menuItemMain) },
                     direction === 'up' && (React__namespace.createElement("span", { className: css(menuStyles.menuItemToggleIcon) },
                         React__namespace.createElement(AngleLeftIcon$1, { "aria-hidden": true }))),
                     icon && React__namespace.createElement("span", { className: css(menuStyles.menuItemIcon) }, icon),
+                    hasCheck && (React__namespace.createElement("span", { className: css('pf-c-menu__item-check') },
+                        React__namespace.createElement(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: event => onItemSelect(event, onSelect), isDisabled: isDisabled }))),
                     React__namespace.createElement("span", { className: css(menuStyles.menuItemText) }, children),
                     isExternalLink && (React__namespace.createElement("span", { className: css(menuStyles.menuItemExternalIcon) },
                         React__namespace.createElement(ExternalLinkAltIcon$1, { "aria-hidden": true }))),
@@ -15169,7 +15177,7 @@
                     getIsSelected() && (React__namespace.createElement("span", { className: css(menuStyles.menuItemSelectIcon) },
                         React__namespace.createElement(CheckIcon$1, { "aria-hidden": true })))),
                 description && direction !== 'up' && (React__namespace.createElement("span", { className: css(menuStyles.menuItemDescription) },
-                    React__namespace.createElement("span", null, description)))),
+                    React__namespace.createElement("span", null, description)))))),
             flyoutVisible && (React__namespace.createElement(MenuContext.Provider, { value: { disableHover } },
                 React__namespace.createElement(FlyoutContext.Provider, { value: { direction: flyoutXDirection } }, flyoutMenu))),
             typeof drilldownMenu === 'function' ? drilldownMenu() : drilldownMenu,