@patternfly/react-core 5.0.0-prerelease.24 → 5.0.0-prerelease.26

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.0.0-prerelease.23"}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"5.0.0-prerelease.25"}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.0.0-prerelease.23"}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"5.0.0-prerelease.25"}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.0.0-prerelease.23"}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"5.0.0-prerelease.25"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-prerelease.24",
+  "version": "5.0.0-prerelease.26",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "84f2a1ecd3211da181754c55d9257feab2ddd205"
+  "gitHead": "3976445d6910dbf63d884bc058f7aea3a0dc8a17"
 }

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuItemProps, MenuItem } from '../Menu';
+import { TooltipProps } from '../Tooltip';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
 /**
@@ -17,6 +18,8 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   description?: React.ReactNode;
   /** Render item as disabled option */
   isDisabled?: boolean;
+  /** Render item as aria-disabled option */
+  isAriaDisabled?: boolean;
   /** Identifies the component in the dropdown onSelect callback */
   value?: any;
   /** Callback for item click */
@@ -25,6 +28,8 @@ export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** Props for adding a tooltip to a menu item */
+  tooltipProps?: TooltipProps;
 }
 
 const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
@@ -32,11 +37,13 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
   className,
   description,
   isDisabled,
+  isAriaDisabled,
   value,
   onClick,
   ouiaId,
   ouiaSafe,
   innerRef,
+  tooltipProps,
   ...props
 }: DropdownItemProps) => {
   const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
@@ -45,8 +52,10 @@ const DropdownItemBase: React.FunctionComponent<DropdownItemProps> = ({
       className={css(className)}
       description={description}
       isDisabled={isDisabled}
+      isAriaDisabled={isAriaDisabled}
       itemId={value}
       onClick={onClick}
+      tooltipProps={tooltipProps}
       ref={innerRef}
       {...ouiaProps}
       {...props}

package/src/components/Dropdown/examples/Dropdown.md

@@ -11,7 +11,8 @@ propComponents:
     'DropdownList',
     'MenuToggle',
     'DropdownToggleProps',
-    'DropdownPopperProps'
+    'DropdownPopperProps',
+    'TooltipProps'
   ]
 ---
 

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -46,11 +46,14 @@ export const DropdownBasic: React.FunctionComponent = () => {
         <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
           Disabled Link
         </DropdownItem>
+        <DropdownItem value={4} isAriaDisabled key="aria-disabled link" to="#default-link5" tooltipProps={{content: "aria-disabled link", position: "top"}}>
+          Aria-disabled Link
+        </DropdownItem>
         <Divider component="li" key="separator" />
-        <DropdownItem value={4} key="separated action">
+        <DropdownItem value={5} key="separated action">
           Separated Action
         </DropdownItem>
-        <DropdownItem value={5} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+        <DropdownItem value={6} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
           Separated Link
         </DropdownItem>
       </DropdownList>

package/src/components/FileUpload/FileUploadField.tsx

@@ -132,7 +132,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
         <InputGroup>
           <InputGroupItem isFill>
             <TextInput
-              readOnlyVariant="plain" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
+              readOnlyVariant="default" // Always read-only regardless of isReadOnly prop (which is just for the TextArea)
               isDisabled={isDisabled}
               id={`${id}-filename`}
               name={`${id}-filename`}

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`simple fileupload 1`] = `
           class="pf-v5-c-input-group__item pf-m-fill"
         >
           <span
-            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+            class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
               aria-describedby="simple-text-file-browse-button"

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`simple fileuploadfield 1`] = `
           class="pf-v5-c-input-group__item pf-m-fill"
         >
           <span
-            class="pf-v5-c-form-control pf-m-readonly pf-m-plain"
+            class="pf-v5-c-form-control pf-m-readonly"
           >
             <input
               aria-describedby="custom-file-upload-browse-button"

package/src/components/Menu/Menu.tsx

@@ -302,6 +302,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
               (navigableElement?.tagName === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
               ((navigableElement.firstChild as Element)?.tagName === 'LABEL' &&
                 navigableElement.querySelector('input')) || // for MenuItem checkboxes
+              ((navigableElement.firstChild as Element)?.tagName === 'DIV' &&
+                navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
               (navigableElement.firstChild as Element)
             }
             noHorizontalArrowHandling={

package/src/components/Menu/MenuItem.tsx

@@ -11,6 +11,7 @@ import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import { Checkbox } from '../Checkbox';
 import { MenuContext, MenuItemContext } from './MenuContext';
 import { MenuItemAction } from './MenuItemAction';
+import { Tooltip, TooltipProps } from '../Tooltip';
 import { canUseDOM } from '../../helpers/util';
 import { useIsomorphicLayoutEffect } from '../../helpers/useIsomorphicLayout';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
@@ -40,6 +41,10 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   component?: React.ElementType<any> | React.ComponentType<any>;
   /** Render item as disabled option */
   isDisabled?: boolean;
+  /** Render item as aria-disabled option */
+  isAriaDisabled?: boolean;
+  /** Props for adding a tooltip to a menu item */
+  tooltipProps?: TooltipProps;
   /** Render item with icon */
   icon?: React.ReactNode;
   /** Render item with one or more actions */
@@ -94,6 +99,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   onClick = () => {},
   component = 'button',
   isDisabled = false,
+  isAriaDisabled = false,
   isExternalLink = false,
   isSelected = null,
   isFocused,
@@ -106,6 +112,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   innerRef,
   id,
   'aria-label': ariaLabel,
+  tooltipProps,
   ...props
 }: MenuItemProps) => {
   const {
@@ -225,10 +232,12 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   };
 
   const onItemSelect = (event: any, onSelect: any) => {
-    // Trigger callback for Menu onSelect
-    onSelect && onSelect(event, itemId);
-    // Trigger callback for item onClick
-    onClick && onClick(event);
+    if (!isAriaDisabled) {
+      // Trigger callback for Menu onSelect
+      onSelect && onSelect(event, itemId);
+      // Trigger callback for item onClick
+      onClick && onClick(event);
+    }
   };
   const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false;
   let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
@@ -252,16 +261,18 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   if (Component === 'a') {
     additionalProps = {
       href: to,
-      'aria-disabled': isDisabled ? true : null,
+      'aria-disabled': isDisabled || isAriaDisabled ? true : null,
       // prevent invalid 'disabled' attribute on <a> tags
       disabled: null,
       target: isExternalLink ? '_blank' : null
     };
   } else if (Component === 'button') {
     additionalProps = {
-      type: 'button'
+      type: 'button',
+      'aria-disabled': isAriaDisabled ? true : null
     };
   }
+
   if (isOnPath) {
     additionalProps['aria-expanded'] = true;
   } else if (hasFlyout) {
@@ -300,25 +311,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   };
   const isSelectMenu = menuRole === 'listbox';
 
-  return (
-    <li
-      className={css(
-        styles.menuListItem,
-        isDisabled && styles.modifiers.disabled,
-        _isOnPath && styles.modifiers.currentPath,
-        isLoadButton && styles.modifiers.load,
-        isLoading && styles.modifiers.loading,
-        isFocused && styles.modifiers.focus,
-        isDanger && styles.modifiers.danger,
-        className
-      )}
-      onMouseOver={onMouseOver}
-      {...(flyoutMenu && { onKeyDown: handleFlyout })}
-      ref={ref}
-      role={!hasCheckbox ? 'none' : 'menuitem'}
-      {...(hasCheckbox && { 'aria-label': ariaLabel })}
-      {...props}
-    >
+  const renderItem = (
+    <>
       <GenerateId>
         {(randomId) => (
           <Component
@@ -332,9 +326,13 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             ref={innerRef}
             {...(!hasCheckbox && {
               onClick: (event: React.KeyboardEvent | React.MouseEvent) => {
-                onItemSelect(event, onSelect);
-                drill && drill(event);
-                flyoutMenu && handleFlyout(event);
+                if (!isAriaDisabled) {
+                  onItemSelect(event, onSelect);
+                  drill && drill(event);
+                  flyoutMenu && handleFlyout(event);
+                } else {
+                  event.preventDefault();
+                }
               }
             })}
             {...(hasCheckbox && { htmlFor: randomId })}
@@ -355,6 +353,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
                     isChecked={isSelected || false}
                     onChange={(event) => onItemSelect(event, onSelect)}
                     isDisabled={isDisabled}
+                    aria-disabled={isAriaDisabled}
                   />
                 </span>
               )}
@@ -402,6 +401,40 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
           />
         )}
       </MenuItemContext.Provider>
+    </>
+  );
+
+  return (
+    <li
+      className={css(
+        styles.menuListItem,
+        isDisabled && styles.modifiers.disabled,
+        isAriaDisabled && styles.modifiers.ariaDisabled,
+        _isOnPath && styles.modifiers.currentPath,
+        isLoadButton && styles.modifiers.load,
+        isLoading && styles.modifiers.loading,
+        isFocused && styles.modifiers.focus,
+        isDanger && styles.modifiers.danger,
+        className
+      )}
+      onMouseOver={() => {
+        if (!isAriaDisabled) {
+          onMouseOver();
+        }
+      }}
+      {...(flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout })}
+      ref={ref}
+      role={!hasCheckbox ? 'none' : 'menuitem'}
+      {...(hasCheckbox && { 'aria-label': ariaLabel })}
+      {...props}
+    >
+      {tooltipProps ? (
+        <Tooltip {...tooltipProps}>
+          {renderItem}
+        </Tooltip>
+      ) : (
+        renderItem
+      )}
     </li>
   );
 };

package/src/components/Menu/examples/Menu.md

@@ -14,7 +14,8 @@ propComponents:
     'MenuSearchInput',
     'MenuGroup',
     'MenuContainer',
-    'MenuPopperProps'
+    'MenuPopperProps',
+    'TooltipProps'
   ]
 ouia: true
 ---

package/src/components/Menu/examples/MenuBasic.tsx

@@ -33,6 +33,12 @@ export const MenuBasic: React.FunctionComponent = () => {
             <MenuItem isDisabled to="#default-link4">
               Disabled link
             </MenuItem>
+            <MenuItem isAriaDisabled tooltipProps={{content: "aria-disabled action", position: "top"}}>
+              Aria-disabled action
+            </MenuItem>
+            <MenuItem isAriaDisabled to="#default-link5" tooltipProps={{content: "aria-disabled link", position: "top"}}>
+              Aria-disabled link
+            </MenuItem>
           </MenuList>
         </MenuContent>
       </Menu>

package/src/components/Toolbar/ToolbarChipGroupContent.tsx

@@ -68,11 +68,14 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
         (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
     }
 
+    const isHidden = numberOfFilters === 0 || isExpanded;
+
     return (
       <div
         className={css(
           styles.toolbarContent,
-          (numberOfFilters === 0 || isExpanded) && styles.modifiers.hidden,
+          !isHidden && !collapseListedFilters && styles.modifiers.chipContainer,
+          isHidden && styles.modifiers.hidden,
           className
         )}
         {...((numberOfFilters === 0 || isExpanded) && { hidden: true })}