Skip to content

Commit 71ccccd

Browse files
logonofflogonoff
committed
fix: inert react 19 support
1 parent c9853de commit 71ccccd

File tree

11 files changed

+36
-23
lines changed

11 files changed

+36
-23
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Drawer, DrawerContent, DrawerContentBody, DrawerProps } from '../Drawer';
22
import styles from '@patternfly/react-styles/css/components/Compass/compass';
33
import { css } from '@patternfly/react-styles';
4+
import { IS_INERT } from '../../helpers/inert';
45

56
import compassBackgroundImageLight from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_light';
67
import compassBackgroundImageDark from '@patternfly/react-tokens/dist/esm/c_compass_BackgroundImage_dark';
@@ -76,15 +77,15 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
7677
{header && (
7778
<div
7879
className={css(styles.compassHeader, isHeaderExpanded && 'pf-m-expanded')}
79-
{...(!isHeaderExpanded && { inert: 'true' })}
80+
{...(!isHeaderExpanded && { inert: IS_INERT })}
8081
>
8182
{header}
8283
</div>
8384
)}
8485
{sidebarStart && (
8586
<div
8687
className={css(styles.compassSidebar, styles.modifiers.start, isSidebarStartExpanded && 'pf-m-expanded')}
87-
{...(!isSidebarStartExpanded && { inert: 'true' })}
88+
{...(!isSidebarStartExpanded && { inert: IS_INERT })}
8889
>
8990
{sidebarStart}
9091
</div>
@@ -93,15 +94,15 @@ export const Compass: React.FunctionComponent<CompassProps> = ({
9394
{sidebarEnd && (
9495
<div
9596
className={css(styles.compassSidebar, styles.modifiers.end, isSidebarEndExpanded && 'pf-m-expanded')}
96-
{...(!isSidebarEndExpanded && { inert: 'true' })}
97+
{...(!isSidebarEndExpanded && { inert: IS_INERT })}
9798
>
9899
{sidebarEnd}
99100
</div>
100101
)}
101102
{footer && (
102103
<div
103104
className={css(styles.compassFooter, isFooterExpanded && 'pf-m-expanded')}
104-
{...(!isFooterExpanded && { inert: 'true' })}
105+
{...(!isFooterExpanded && { inert: IS_INERT })}
105106
>
106107
{footer}
107108
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { FocusTrap } from '../../helpers/FocusTrap/FocusTrap';
88
import cssPanelMdFlexBasis from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis';
99
import cssPanelMdFlexBasisMin from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_min';
1010
import cssPanelMdFlexBasisMax from '@patternfly/react-tokens/dist/esm/c_drawer__panel_md_FlexBasis_max';
11+
import { IS_INERT } from '../../helpers/inert';
1112

1213
export interface DrawerPanelFocusTrapObject {
1314
/** Enables a focus trap on the drawer panel content. This will also automatically
@@ -394,7 +395,7 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
394395
...((defaultSize || minSize || maxSize) && boundaryCssVars),
395396
...style
396397
}}
397-
{...(shouldCollapseSpace && { inert: '' })}
398+
{...(shouldCollapseSpace && { inert: IS_INERT })}
398399
{...props}
399400
ref={panel}
400401
>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi
77
import { flattenTree } from './treeUtils';
88
import { DualListSelectorListContext } from './DualListSelectorContext';
99
import { useHasAnimations } from '../../helpers';
10+
import { IS_INERT } from '../../helpers/inert';
1011

1112
export interface DualListSelectorTreeItemProps extends React.HTMLProps<HTMLLIElement> {
1213
/** Content rendered inside the dual list selector. */
@@ -78,7 +79,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
7879
(child) =>
7980
isValidElement(child) &&
8081
cloneElement(child as React.ReactElement<any>, {
81-
inert: isExpanded ? undefined : ''
82+
inert: isExpanded ? undefined : IS_INERT
8283
})
8384
);
8485

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
33
import { FormFieldGroupToggle } from './FormFieldGroupToggle';
44
import { useSSRSafeId } from '../../helpers';
55
import { useHasAnimations } from '../../helpers';
6+
import { IS_INERT } from '../../helpers/inert';
67

78
export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
89
/** Anything that can be rendered as form field group content. */
@@ -72,7 +73,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
7273
{(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
7374
<div
7475
className={css(styles.formFieldGroupBody)}
75-
{...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
76+
{...(hasAnimations && isExpandable && !isExpanded && { inert: IS_INERT })}
7677
>
7778
{children}
7879
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { PageSidebarContext } from '../Page/PageSidebar';
77
import { PickOptional } from '../../helpers/typeUtils';
88
import { getOUIAProps, OUIAProps } from '../../helpers';
99
import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
10+
import { IS_INERT } from '../../helpers/inert';
1011

1112
export interface NavExpandableProps
1213
extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
@@ -149,7 +150,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
149150
className={css(styles.navSubnav)}
150151
aria-labelledby={navId}
151152
hidden={expandedState ? null : true}
152-
{...(!expandedState && { inert: '' })}
153+
{...(!expandedState && { inert: IS_INERT })}
153154
>
154155
{srText && (
155156
<h2 className="pf-v6-screen-reader" id={navId}>

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Popper } from '../../helpers';
1616
import { useHasAnimations } from '../../helpers';
1717
import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
1818
import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
19+
import { IS_INERT } from '../../helpers/inert';
1920

2021
/** Properties for adding search attributes to an advanced search input. These properties must
2122
* 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> = ({
404405
className={inputGroupStyles.modifiers.searchExpand}
405406
isPlain
406407
onTransitionEnd={onTransitionEnd}
407-
{...(isExpanded && { inert: '' })}
408+
{...(isExpanded && { inert: IS_INERT })}
408409
>
409410
{expandToggleButton}
410411
</InputGroupItem>
411412
<InputGroupItem
412413
className={inputGroupStyles.modifiers.searchAction}
413414
isPlain
414-
{...(!isExpanded && { inert: '' })}
415+
{...(!isExpanded && { inert: IS_INERT })}
415416
>
416417
{collapseToggleButton}
417418
</InputGroupItem>
@@ -426,7 +427,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
426427
{...(!hasAnimations && { isFill: true })}
427428
{...(hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
428429
{...(!isExpanded && {
429-
inert: ''
430+
inert: IS_INERT
430431
})}
431432
>
432433
{buildTextInputGroup()}
@@ -451,7 +452,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
451452
{...(expandableInput &&
452453
hasAnimations &&
453454
!isExpanded && {
454-
inert: ''
455+
inert: IS_INERT
455456
})}
456457
>
457458
{buildTextInputGroup()}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { TreeViewDataItem } from './TreeView';
66
import { Badge } from '../Badge';
77
import { useSSRSafeId } from '../../helpers';
88
import { useHasAnimations } from '../../helpers';
9+
import { IS_INERT } from '../../helpers/inert';
910

1011
export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
1112
checked?: boolean | null;
@@ -225,7 +226,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
225226
(child) =>
226227
isValidElement(child) &&
227228
cloneElement(child as React.ReactElement<any>, {
228-
inert: internalIsExpanded ? undefined : ''
229+
inert: internalIsExpanded ? undefined : IS_INERT
229230
})
230231
);
231232

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { version } from 'react';
2+
3+
/**
4+
* Before React 19, React JSX treats empty string "" as truthy for inert prop.
5+
* @see {@link https://stackoverflow.com/questions/72720469}
6+
*/
7+
export const IS_INERT = Number(version.split('.')[0]) >= 19 ? true : ('' as unknown as boolean);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Table/table';
44
import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
55
import { css } from '@patternfly/react-styles';
66
import { TableContext } from './Table';
7+
import { IS_INERT } from './utils/inert';
78

89
export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onResize'>, OUIAProps {
910
/** Content rendered inside the <tr> row */
@@ -115,7 +116,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
115116
{...(isClickable && { tabIndex: 0 })}
116117
aria-label={ariaLabel}
117118
ref={innerRef}
118-
{...(hasAnimations && rowIsHidden && { inert: '' })}
119+
{...(hasAnimations && rowIsHidden && { inert: IS_INERT })}
119120
{...(onRowClick && { onClick: onRowClick, onKeyDown })}
120121
{...ouiaProps}
121122
{...props}

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { version } from 'react';
2+
3+
/**
4+
* Before React 19, React JSX treats empty string "" as truthy for inert prop.
5+
* @see {@link https://stackoverflow.com/questions/72720469}
6+
*/
7+
export const IS_INERT = Number(version.split('.')[0]) >= 19 ? true : ('' as unknown as boolean);

0 commit comments

Comments
 (0)