fix: inert react 19 support

Author: logonoff

packages/react-core/src/components/Compass/Compass.tsx

@@ -1,6 +1,8 @@
 import { Drawer, DrawerContent, DrawerContentBody, DrawerProps } from '../Drawer';
 import styles from '@patternfly/react-styles/css/components/Compass/compass';
 import { css } from '@patternfly/react-styles';
+import { IS_INERT } from '../../helpers/inert';
+
 export interface CompassProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Compass. */
   className?: string;
@@ -76,15 +78,15 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {header && (
         <div
           className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
-          {...(!isHeaderExpanded && { inert: 'true' })}
+          {...(!isHeaderExpanded && { inert: IS_INERT })}
         >
           {header}
         </div>
       )}
       {sidebarStart && (
         <div
           className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
-          {...(!isSidebarStartExpanded && { inert: 'true' })}
+          {...(!isSidebarStartExpanded && { inert: IS_INERT })}
         >
           {sidebarStart}
         </div>
@@ -93,15 +95,15 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
       {sidebarEnd && (
         <div
           className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
-          {...(!isSidebarEndExpanded && { inert: 'true' })}
+          {...(!isSidebarEndExpanded && { inert: IS_INERT })}
         >
           {sidebarEnd}
         </div>
       )}
       {footer && (
         <div
           className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
-          {...(!isFooterExpanded && { inert: 'true' })}
+          {...(!isFooterExpanded && { inert: IS_INERT })}
         >
           {footer}
         </div>

packages/react-core/src/components/Drawer/DrawerPanelContent.tsx

@@ -8,6 +8,7 @@ import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
 import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
 import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
 import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface DrawerPanelFocusTrapObject {
   /** Enables a focus trap on the drawer panel content. This will also automatically
@@ -409,7 +410,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
         ...((defaultSize || minSize || maxSize) && boundaryCssVars),
         ...style
       }}
-      {...(shouldCollapseSpace && { inert: '' })}
+      {...(shouldCollapseSpace && { inert: IS_INERT })}
       {...props}
       ref={panel}
     >

packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -7,6 +7,7 @@ import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
 import { flattenTree } from './treeUtils';
 import { DualListSelectorListContext } from './DualListSelectorContext';
 import { useHasAnimations } from '../../helpers';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIElement> {
   /** Content rendered inside the dual list selector. */
@@ -78,7 +79,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
     (child) =>
       isValidElement(child) &&
       cloneElement(child as React.ReactElement<any>, {
-        inert: isExpanded ? undefined : ''
+        inert: isExpanded ? undefined : IS_INERT
       })
   );
 

packages/react-core/src/components/Form/InternalFormFieldGroup.tsx

@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -72,7 +73,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
       {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
         <div
           className={css(styles.formFieldGroupBody)}
-          {...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
+          {...(hasAnimations && isExpandable && !isExpanded && { inert: IS_INERT })}
         >
           {children}
         </div>

packages/react-core/src/components/Nav/NavExpandable.tsx

@@ -7,6 +7,7 @@ import { PageSidebarContext } from '../Page/PageSidebar';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface NavExpandableProps
   extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
@@ -149,7 +150,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                     className={css(styles.navSubnav)}
                     aria-labelledby={navId}
                     hidden={expandedState ? null : true}
-                    {...(!expandedState && { inert: '' })}
+                    {...(!expandedState && { inert: IS_INERT })}
                   >
                     {srText && (
                       <h2 className="pf-v6-screen-reader" id={navId}>

packages/react-core/src/components/SearchInput/SearchInput.tsx

@@ -16,6 +16,7 @@ import { Popper } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
+import { IS_INERT } from '../../helpers/inert';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute property.
@@ -404,14 +405,14 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             className={inputGroupStyles.modifiers.searchExpand}
             isPlain
             onTransitionEnd={onTransitionEnd}
-            {...(isExpanded && { inert: '' })}
+            {...(isExpanded && { inert: IS_INERT })}
           >
             {expandToggleButton}
           </InputGroupItem>
           <InputGroupItem
             className={inputGroupStyles.modifiers.searchAction}
             isPlain
-            {...(!isExpanded && { inert: '' })}
+            {...(!isExpanded && { inert: IS_INERT })}
           >
             {collapseToggleButton}
           </InputGroupItem>
@@ -426,7 +427,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         {...(!hasAnimations && { isFill: true })}
         {...(hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
         {...(!isExpanded && {
-          inert: ''
+          inert: IS_INERT
         })}
       >
         {buildTextInputGroup()}
@@ -451,7 +452,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         {...(expandableInput &&
           hasAnimations &&
           !isExpanded && {
-            inert: ''
+            inert: IS_INERT
           })}
       >
         {buildTextInputGroup()}

packages/react-core/src/components/TreeView/TreeViewListItem.tsx

@@ -6,6 +6,7 @@ import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
@@ -225,7 +226,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     (child) =>
       isValidElement(child) &&
       cloneElement(child as React.ReactElement<any>, {
-        inert: internalIsExpanded ? undefined : ''
+        inert: internalIsExpanded ? undefined : IS_INERT
       })
   );
 

packages/react-core/src/helpers/inert.ts

@@ -0,0 +1,7 @@
+import { version } from 'react';
+
+/**
+ * Before React 19, React JSX treats empty string "" as truthy for inert prop.
+ * @see {@link https://stackoverflow.com/questions/72720469}
+ */
+export const IS_INERT = Number(version.split('.')[0]) >= 19 ? true : ('' as unknown as boolean);

packages/react-table/src/components/Table/Tr.tsx

@@ -4,6 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Table/table';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 import { TableContext } from './Table';
+import { IS_INERT } from './utils/inert';
 
 export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
   /** Content rendered inside the <tr> row */
@@ -115,7 +116,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         {...(isClickable && { tabIndex: 0 })}
         aria-label={ariaLabel}
         ref={innerRef}
-        {...(hasAnimations && rowIsHidden && { inert: '' })}
+        {...(hasAnimations && rowIsHidden && { inert: IS_INERT })}
         {...(onRowClick && { onClick: onRowClick, onKeyDown })}
         {...ouiaProps}
         {...props}

packages/react-table/src/components/Table/utils/inert.ts

@@ -0,0 +1,7 @@
+import { version } from 'react';
+
+/**
+ * Before React 19, React JSX treats empty string "" as truthy for inert prop.
+ * @see {@link https://stackoverflow.com/questions/72720469}
+ */
+export const IS_INERT = Number(version.split('.')[0]) >= 19 ? true : ('' as unknown as boolean);