@patternfly/react-core 4.237.3 → 4.237.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.237.3",
+  "version": "4.237.4",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.88.3",
-    "@patternfly/react-styles": "^4.87.3",
-    "@patternfly/react-tokens": "^4.89.3",
+    "@patternfly/react-icons": "^4.88.4",
+    "@patternfly/react-styles": "^4.87.4",
+    "@patternfly/react-tokens": "^4.89.4",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9c1f899d47ad72f53c17ecc33222acdc926046e8"
+  "gitHead": "c45164ec148b97dd7fe65152852de24813fba68e"
 }

package/src/components/Dropdown/DropdownItem.tsx

@@ -3,7 +3,7 @@ import { InternalDropdownItemProps, InternalDropdownItem } from './InternalDropd
 import { DropdownArrowContext } from './dropdownConstants';
 import { useOUIAProps, OUIAProps } from '../../helpers';
 
-export interface DropdownItemProps extends InternalDropdownItemProps, OUIAProps {
+export interface DropdownItemProps extends Omit<InternalDropdownItemProps, 'tabIndex'>, OUIAProps {
   /** Anything which can be rendered as dropdown item */
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown item */

package/src/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -44,7 +44,7 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
   }
 
   handleChange = (event: React.FormEvent<HTMLInputElement>) => {
-    this.props.onChange((event.target as HTMLInputElement).checked, event);
+    this.props.onChange?.((event.target as HTMLInputElement).checked, event);
   };
 
   calculateChecked = () => {

package/src/components/Dropdown/InternalDropdownItem.tsx

@@ -87,7 +87,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
   componentDidMount() {
     const { context, index, isDisabled, role, customChild, autoFocus } = this.props;
     const customRef = customChild ? this.getInnerNode(this.ref.current) : this.ref.current;
-    context.sendRef(
+    context?.sendRef?.(
       index,
       [customRef, customChild ? customRef : this.additionalRef.current],
       isDisabled,
@@ -99,7 +99,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
   componentDidUpdate() {
     const { context, index, isDisabled, role, customChild } = this.props;
     const customRef = customChild ? this.getInnerNode(this.ref.current) : this.ref.current;
-    context.sendRef(
+    context?.sendRef?.(
       index,
       [customRef, customChild ? customRef : this.additionalRef.current],
       isDisabled,
@@ -116,21 +116,21 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
       event.preventDefault();
     }
     if (event.key === 'ArrowUp') {
-      this.props.context.keyHandler(this.props.index, innerIndex, KEYHANDLER_DIRECTION.UP);
+      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.UP);
       event.stopPropagation();
     } else if (event.key === 'ArrowDown') {
-      this.props.context.keyHandler(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN);
+      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN);
       event.stopPropagation();
     } else if (event.key === 'ArrowRight') {
-      this.props.context.keyHandler(this.props.index, innerIndex, KEYHANDLER_DIRECTION.RIGHT);
+      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.RIGHT);
       event.stopPropagation();
     } else if (event.key === 'ArrowLeft') {
-      this.props.context.keyHandler(this.props.index, innerIndex, KEYHANDLER_DIRECTION.LEFT);
+      this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.LEFT);
       event.stopPropagation();
     } else if (event.key === 'Enter' || event.key === ' ') {
       event.target.click();
       this.props.enterTriggersArrowDown &&
-        this.props.context.keyHandler(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN);
+        this.props.context?.keyHandler?.(this.props.index, innerIndex, KEYHANDLER_DIRECTION.DOWN);
     }
   };
 
@@ -264,13 +264,13 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
 
           return (
             <li
-              className={listItemClassName || null}
+              {...(listItemClassName && { className: listItemClassName })}
               role="none"
               onKeyDown={this.onKeyDown}
               onClick={(event: any) => {
                 if (!isDisabled && !isAriaDisabled) {
-                  onClick(event);
-                  onSelect(event);
+                  onClick?.(event);
+                  onSelect?.(event);
                 }
               }}
               id={id}

package/src/components/Dropdown/Toggle.tsx

@@ -89,7 +89,7 @@ export class Toggle extends React.Component<ToggleProps> {
     const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
     const clickedWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target as Node);
     if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
-      onToggle(false, event);
+      onToggle?.(false, event);
     }
   };
 
@@ -103,8 +103,8 @@ export class Toggle extends React.Component<ToggleProps> {
       (event.key === KeyTypes.Escape || event.key === 'Tab') &&
       (escFromToggle || escFromWithinMenu)
     ) {
-      this.props.onToggle(false, event);
-      this.buttonRef.current.focus();
+      this.props.onToggle?.(false, event);
+      this.buttonRef.current?.focus();
     }
   };
 
@@ -118,15 +118,15 @@ export class Toggle extends React.Component<ToggleProps> {
       }
       event.preventDefault();
 
-      this.props.onToggle(!this.props.isOpen, event);
+      this.props.onToggle?.(!this.props.isOpen, event);
     } else if ((event.key === 'Enter' || event.key === ' ') && !this.props.isOpen) {
       if (!this.props.bubbleEvent) {
         event.stopPropagation();
       }
       event.preventDefault();
 
-      this.props.onToggle(!this.props.isOpen, event);
-      this.props.onEnter();
+      this.props.onToggle?.(!this.props.isOpen, event);
+      this.props.onEnter?.();
     }
   };
 
@@ -167,11 +167,11 @@ export class Toggle extends React.Component<ToggleProps> {
               isPlain && styles.modifiers.plain,
               isText && styles.modifiers.text,
               isPrimary && styles.modifiers.primary,
-              buttonVariantStyles[toggleVariant],
+              toggleVariant && buttonVariantStyles[toggleVariant],
               className
             )}
             type={type || 'button'}
-            onClick={event => onToggle(!isOpen, event)}
+            onClick={event => onToggle?.(!isOpen, event)}
             aria-expanded={isOpen}
             aria-haspopup={ariaHasPopup}
             onKeyDown={event => this.onKeyDown(event)}

package/src/components/Modal/Modal.tsx

@@ -26,7 +26,7 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Optional title label text for screen readers */
   titleLabel?: string;
   /** Id to use for Modal Box label */
-  'aria-labelledby'?: string | null;
+  'aria-labelledby'?: string;
   /** Accessible descriptor of modal */
   'aria-label'?: string;
   /** Id to use for Modal Box descriptor */
@@ -121,7 +121,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
   handleEscKeyClick = (event: KeyboardEvent): void => {
     const { onEscapePress } = this.props;
     if (event.key === KeyTypes.Escape && this.props.isOpen) {
-      onEscapePress ? onEscapePress(event) : this.props.onClose();
+      onEscapePress ? onEscapePress(event) : this.props.onClose?.();
     }
   };
 
@@ -143,7 +143,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
     }
   };
 
-  isEmpty = (value: string | null) => value === null || value === undefined || value === '';
+  isEmpty = (value: string | null | undefined) => value === null || value === undefined || value === '';
 
   componentDidMount() {
     const {

package/src/components/Modal/ModalBoxTitle.tsx

@@ -38,7 +38,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
   ...props
 }: ModalBoxTitleProps) => {
   const [hasTooltip, setHasTooltip] = React.useState(false);
-  const h1 = React.useRef<HTMLHeadingElement>();
+  const h1 = React.useRef<HTMLHeadingElement>(null);
   const label = titleLabel || (isVariantIcon(titleIconVariant) ? `${capitalize(titleIconVariant)} alert:` : titleLabel);
   const variantIcons = {
     success: <CheckCircleIcon />,

package/src/components/TreeView/TreeView.tsx

@@ -101,7 +101,7 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
     <TreeViewList isNested={isNested} toolbar={toolbar}>
       {data.map(item => (
         <TreeViewListItem
-          key={item.id?.toString() || item.name.toString()}
+          key={item.id?.toString() || item.name?.toString()}
           name={item.name}
           title={item.title}
           id={item.id}

package/src/components/TreeView/TreeViewListItem.tsx

@@ -6,7 +6,7 @@ import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
-export interface TreeViewCheckProps extends Partial<React.InputHTMLAttributes<HTMLInputElement>> {
+export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
 }
 

package/src/components/TreeView/TreeViewRoot.tsx

@@ -26,16 +26,16 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       window.addEventListener('keydown', this.props.hasChecks ? this.handleKeysCheckbox : this.handleKeys);
     }
     if (this.props.hasChecks) {
-      const firstToggle = this.treeRef.current.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
+      const firstToggle = this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node-toggle')[0] as HTMLElement;
       if (firstToggle) {
         firstToggle.tabIndex = 0;
       }
-      const firstInput = this.treeRef.current.getElementsByTagName('INPUT')[0] as HTMLElement;
+      const firstInput = this.treeRef.current?.getElementsByTagName('INPUT')[0] as HTMLElement;
       if (firstInput) {
         firstInput.tabIndex = 0;
       }
     } else {
-      (this.treeRef.current.getElementsByClassName('pf-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
+      (this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node')[0] as HTMLElement).tabIndex = 0;
     }
   }
 
@@ -51,7 +51,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     }
     const activeElement = document.activeElement;
     const key = event.key;
-    const treeItems = Array.from(this.treeRef.current.getElementsByClassName('pf-c-tree-view__node')).filter(
+    const treeItems = Array.from(this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node')).filter(
       el => !el.classList.contains('pf-m-disabled')
     );
 
@@ -72,20 +72,22 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
     );
 
     if (['ArrowLeft', 'ArrowRight'].includes(key)) {
-      const isExpandable = activeElement.firstElementChild.firstElementChild.classList.contains(
+      const isExpandable = activeElement?.firstElementChild?.firstElementChild?.classList.contains(
         'pf-c-tree-view__node-toggle'
       );
-      const isExpanded = activeElement.closest('li').classList.contains('pf-m-expanded');
+      const isExpanded = activeElement?.closest('li')?.classList.contains('pf-m-expanded');
       if (key === 'ArrowLeft') {
         if (isExpandable && isExpanded) {
           (activeElement as HTMLElement).click();
         } else {
-          const parentList = activeElement.closest('ul').parentElement;
-          if (parentList.tagName !== 'DIV') {
-            const parentButton = parentList.querySelector('button');
+          const parentList = activeElement?.closest('ul')?.parentElement;
+          if (parentList?.tagName !== 'DIV') {
+            const parentButton = parentList?.querySelector('button');
             (activeElement as HTMLElement).tabIndex = -1;
-            parentButton.tabIndex = 0;
-            parentButton.focus();
+            if (parentButton) {
+              parentButton.tabIndex = 0;
+              parentButton.focus();
+            }
           }
         }
       } else {
@@ -93,11 +95,13 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
           (activeElement as HTMLElement).tabIndex = -1;
           (activeElement as HTMLElement).click();
           const childElement = activeElement
-            .closest('li')
-            .querySelector('ul > li')
-            .querySelector('button');
-          childElement.tabIndex = 0;
-          childElement.focus();
+            ?.closest('li')
+            ?.querySelector('ul > li')
+            ?.querySelector('button');
+          if (childElement) {
+            childElement.tabIndex = 0;
+            childElement.focus();
+          }
         }
       }
       event.preventDefault();
@@ -116,7 +120,7 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
       event.preventDefault();
     }
 
-    const treeNodes = Array.from(this.treeRef.current.getElementsByClassName('pf-c-tree-view__node'));
+    const treeNodes = Array.from(this.treeRef.current?.getElementsByClassName('pf-c-tree-view__node'));
 
     handleArrows(
       event,
@@ -131,21 +135,21 @@ export class TreeViewRoot extends React.Component<TreeViewRootProps> {
 
     if (['ArrowLeft', 'ArrowRight'].includes(key)) {
       if (key === 'ArrowLeft') {
-        if (activeElement.tagName === 'INPUT') {
-          activeElement.parentElement.previousSibling &&
+        if (activeElement?.tagName === 'INPUT') {
+          activeElement?.parentElement?.previousSibling &&
             (activeElement.parentElement.previousSibling as HTMLElement).focus();
-        } else if (activeElement.previousSibling) {
-          if (activeElement.previousElementSibling.tagName === 'SPAN') {
+        } else if (activeElement?.previousSibling) {
+          if (activeElement.previousElementSibling?.tagName === 'SPAN') {
             (activeElement.previousSibling.firstChild as HTMLElement).focus();
           } else {
             (activeElement.previousSibling as HTMLElement).focus();
           }
         }
       } else {
-        if (activeElement.tagName === 'INPUT') {
-          activeElement.parentElement.nextSibling && (activeElement.parentElement.nextSibling as HTMLElement).focus();
-        } else if (activeElement.nextSibling) {
-          if (activeElement.nextElementSibling.tagName === 'SPAN') {
+        if (activeElement?.tagName === 'INPUT') {
+          activeElement.parentElement?.nextSibling && (activeElement.parentElement.nextSibling as HTMLElement).focus();
+        } else if (activeElement?.nextSibling) {
+          if (activeElement.nextElementSibling?.tagName === 'SPAN') {
             (activeElement.nextSibling.firstChild as HTMLElement).focus();
           } else {
             (activeElement.nextSibling as HTMLElement).focus();