@patternfly/react-core 6.2.0-prerelease.16 → 6.2.0-prerelease.18

package/src/components/Wizard/examples/WizardStepStatus.tsx

@@ -10,7 +10,7 @@ interface SomeContextProps {
 }
 type SomeContextRenderProps = Pick<SomeContextProps, 'successMessage', 'errorMessage'>;
 interface SomeContextProviderProps {
-  children: (context: SomeContextRenderProps) => React.ReactElement;
+  children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
 const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);

package/src/components/Wizard/examples/WizardToggleStepVisibility.tsx

@@ -8,7 +8,7 @@ interface SomeContextProps {
 }
 type SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked'>;
 interface SomeContextProviderProps {
-  children: (context: SomeContextRenderProps) => React.ReactElement;
+  children: (context: SomeContextRenderProps) => React.ReactElement<any>;
 }
 
 const SomeContext: React.Context<SomeContextProps> = React.createContext({} as SomeContextProps);

package/src/components/Wizard/hooks/useWizardFooter.tsx

@@ -8,7 +8,10 @@ import { WizardFooterProps } from '../WizardFooter';
  * @param footer
  * @param stepId
  */
-export const useWizardFooter = (footer: React.ReactElement | Partial<WizardFooterProps>, stepId?: string | number) => {
+export const useWizardFooter = (
+  footer: React.ReactElement<any> | Partial<WizardFooterProps>,
+  stepId?: string | number
+) => {
   const { activeStep, setFooter } = useWizardContext();
 
   React.useEffect(() => {

package/src/components/Wizard/types.tsx

@@ -17,11 +17,11 @@ export interface WizardBasicStep {
   /** Flag to determine whether the step is hidden */
   isHidden?: boolean;
   /** Content shown when the step's navigation item is selected. When treated as a parent step, only sub-step content will be shown. */
-  component?: React.ReactElement;
+  component?: React.ReactElement<any>;
   /** Replaces the step's navigation item or its properties. */
   navItem?: WizardNavItemType;
   /** Replaces the step's footer. The step's footer takes precedance over the wizard's footer. */
-  footer?: React.ReactElement | Partial<WizardFooterProps>;
+  footer?: React.ReactElement<any> | Partial<WizardFooterProps>;
   /** Used to determine icon next to the step's navItem */
   status?: 'default' | 'error' | 'success';
 }
@@ -58,9 +58,9 @@ export enum WizardStepChangeScope {
   Nav = 'nav'
 }
 
-export type WizardFooterType = Partial<WizardFooterProps> | CustomWizardFooterFunction | React.ReactElement;
-export type WizardNavType = Partial<WizardNavProps> | CustomWizardNavFunction | React.ReactElement;
-export type WizardNavItemType = Partial<WizardNavItemProps> | CustomWizardNavItemFunction | React.ReactElement;
+export type WizardFooterType = Partial<WizardFooterProps> | CustomWizardFooterFunction | React.ReactElement<any>;
+export type WizardNavType = Partial<WizardNavProps> | CustomWizardNavFunction | React.ReactElement<any>;
+export type WizardNavItemType = Partial<WizardNavItemProps> | CustomWizardNavItemFunction | React.ReactElement<any>;
 
 /** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
 export type CustomWizardNavFunction = (
@@ -86,19 +86,19 @@ export type CustomWizardFooterFunction = (
   onClose: (event: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>
 ) => React.ReactElement<WizardFooterProps>;
 
-export function isCustomWizardNav(nav: WizardNavType): nav is CustomWizardNavFunction | React.ReactElement {
+export function isCustomWizardNav(nav: WizardNavType): nav is CustomWizardNavFunction | React.ReactElement<any> {
   return typeof nav === 'function' || React.isValidElement(nav);
 }
 
 export function isCustomWizardNavItem(
   navItem: WizardNavItemType
-): navItem is CustomWizardNavItemFunction | React.ReactElement {
+): navItem is CustomWizardNavItemFunction | React.ReactElement<any> {
   return typeof navItem === 'function' || React.isValidElement(navItem);
 }
 
 export function isCustomWizardFooter(
   footer: WizardFooterType
-): footer is CustomWizardFooterFunction | React.ReactElement {
+): footer is CustomWizardFooterFunction | React.ReactElement<any> {
   return typeof footer === 'function' || React.isValidElement(footer);
 }
 

package/src/demos/CustomMenus/examples/DateSelectDemo.tsx

@@ -4,7 +4,7 @@ import { MenuToggle, Select, SelectList, SelectOption, Timestamp } from '@patter
 export const DateSelectDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<number>(0);
-  const menuRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/demos/CustomMenus/examples/FavoritesDemo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { MenuToggle, Divider, Dropdown, DropdownGroup, DropdownList, DropdownItem } from '@patternfly/react-core';
 
 export const FavoritesDemo: React.FunctionComponent = () => {

package/src/demos/CustomMenus/examples/FlyoutDemo.tsx

@@ -6,7 +6,7 @@ const onSelect = (event: React.MouseEvent | undefined, itemId: string | number |
   console.log('selected', itemId);
 /* eslint-enable no-console */
 interface FlyoutMenuProps {
-  children?: React.ReactElement;
+  children?: React.ReactElement<any>;
   depth: number;
 }
 

package/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx

@@ -16,8 +16,8 @@ export const InlineSearchFilterMenuDemo: React.FunctionComponent = () => {
   const [activeItem, setActiveItem] = React.useState(0);
   const [input, setInput] = React.useState('');
   const [isOpen, setIsOpen] = React.useState(false);
-  const toggleRef = React.useRef<any>();
-  const menuRef = React.useRef<any>();
+  const toggleRef = React.useRef<any>(undefined);
+  const menuRef = React.useRef<any>(undefined);
 
   const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: number | string | undefined) => {
     const item = itemId as number;

package/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx

@@ -4,7 +4,7 @@ import { MenuToggle, Divider, Select, SelectList, SelectOption, SelectGroup } fr
 export const OptionsMenuDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [selected, setSelected] = React.useState<string>('');
-  const menuRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx

@@ -14,7 +14,7 @@ export const TreeViewMenuDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false);
   const [checkedItems, setCheckedItems] = React.useState<TreeViewDataItem[]>([]);
   const toggleRef = React.useRef<HTMLButtonElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
 
   const statusOptions: TreeViewDataItem[] = [
     {

package/src/demos/SearchInput/SearchInput.md

@@ -244,8 +244,8 @@ AdvancedComposableSearchInput = () => {
   const firstAttrRef = React.useRef(null);
   const searchInputRef = React.useRef(null);
   const advancedSearchPaneRef = React.useRef(null);
-  const dateWithinToggleRef = React.useRef();
-  const dateWithinMenuRef = React.useRef();
+  const dateWithinToggleRef = React.useRef(undefined);
+  const dateWithinMenuRef = React.useRef(undefined);
 
   const onClear = () => {
     setValue('');

package/src/demos/examples/Card/CardAggregateStatus.tsx

@@ -18,6 +18,8 @@ import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclama
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
 import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
+import type { JSX } from 'react';
+
 interface ContentType {
   icon?: React.ReactNode;
   count?: number;

package/src/demos/examples/JumpLinks/JumpLinksWithDrawer.js

@@ -44,7 +44,7 @@ export const JumpLinksWithDrawer = () => {
   const headings = ['First', 'Second', 'Third', 'Fourth', 'Fifth'];
 
   const [isExpanded, setIsExpanded] = React.useState(false);
-  const drawerRef = React.useRef();
+  const drawerRef = React.useRef(undefined);
 
   const onCloseClick = () => {
     setIsExpanded(false);

package/src/demos/examples/Nav/NavDrilldown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 
 import {
   Page,

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -37,11 +37,11 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
   };
   const keyNames = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];
   const [menuItemsText, setMenuItemsText] = React.useState(keyNames);
-  const [menuItems, setMenuItems] = React.useState<React.ReactElement[]>([]);
+  const [menuItems, setMenuItems] = React.useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = React.useRef<HTMLDivElement>();
-  const textInputGroupRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const textInputGroupRef = React.useRef<HTMLDivElement>(undefined);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -24,11 +24,11 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
 
   /** auto-completing suggestion text items to be shown in the menu */
   const suggestionItems = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status'];
-  const [menuItems, setMenuItems] = React.useState<React.ReactElement[]>([]);
+  const [menuItems, setMenuItems] = React.useState<React.ReactElement<any>[]>([]);
 
   /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */
-  const menuRef = React.useRef<HTMLDivElement>();
-  const textInputGroupRef = React.useRef<HTMLDivElement>();
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const textInputGroupRef = React.useRef<HTMLDivElement>(undefined);
 
   /** callback for updating the inputValue state in this component so that the input can be controlled */
   const handleInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {

package/src/deprecated/components/DragDrop/Draggable.tsx

@@ -320,7 +320,7 @@ export const Draggable: React.FunctionComponent<DraggableProps> = ({
         </div>
       )}
       {hasNoWrapper ? (
-        React.cloneElement(children as React.ReactElement, childProps)
+        React.cloneElement(children as React.ReactElement<any>, childProps)
       ) : (
         <div {...childProps}>{children}</div>
       )}

package/src/deprecated/components/DragDrop/Droppable.tsx

@@ -30,7 +30,7 @@ export const Droppable: React.FunctionComponent<DroppableProps> = ({
     // if has no wrapper is set, don't overwrite children className with the className prop
     className:
       hasNoWrapper && React.Children.count(children) === 1
-        ? css(styles.droppable, className, (children as React.ReactElement).props.className)
+        ? css(styles.droppable, className, (children as React.ReactElement<any>).props.className)
         : css(styles.droppable, className),
     ...props
   };
@@ -38,7 +38,7 @@ export const Droppable: React.FunctionComponent<DroppableProps> = ({
   return (
     <DroppableContext.Provider value={{ zone, droppableId }}>
       {hasNoWrapper ? (
-        React.cloneElement(children as React.ReactElement, childProps)
+        React.cloneElement(children as React.ReactElement<any>, childProps)
       ) : (
         <div {...childProps}>{children}</div>
       )}

package/src/deprecated/components/DualListSelector/DualListSelectorControlsWrapper.tsx

@@ -11,7 +11,7 @@ export interface DualListSelectorControlsWrapperProps extends React.HTMLProps<HT
   /** Additional classes added to the wrapper. */
   className?: string;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** Accessible label for the dual list selector controls wrapper. */
   'aria-label'?: string;
 }

package/src/deprecated/components/DualListSelector/DualListSelectorListItem.tsx

@@ -24,7 +24,7 @@ export interface DualListSelectorListItemProps extends React.HTMLProps<HTMLLIEle
   /** @hide Internal field used to keep track of order of unfiltered options. */
   orderIndex?: number;
   /** @hide Forwarded ref */
-  innerRef?: React.RefObject<HTMLLIElement>;
+  innerRef?: React.RefObject<HTMLLIElement | null>;
   /** Flag indicating this item is draggable for reordring */
   isDraggable?: boolean;
   /** Accessible label for the draggable button on draggable list items */

package/src/deprecated/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -15,7 +15,7 @@ export interface DualListSelectorListWrapperProps extends React.HTMLProps<HTMLDi
   /** Accessibly label for the list */
   'aria-labelledby': string;
   /** @hide forwarded ref */
-  innerRef?: React.RefObject<HTMLDivElement>;
+  innerRef?: React.RefObject<HTMLDivElement | null>;
   /** @hide Options to list in the pane. */
   options?: React.ReactNode[];
   /** @hide Options currently selected in the pane. */

package/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -138,7 +138,9 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                     e.preventDefault();
                   }
                 }}
-                ref={(elem) => elem && (elem.indeterminate = isChecked === null)}
+                ref={(elem) => {
+                  elem && (elem.indeterminate = isChecked === null);
+                }}
                 checked={isChecked || false}
                 tabIndex={-1}
                 {...checkProps}
@@ -148,7 +150,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
             <span className={css(styles.dualListSelectorItemText)}>{text}</span>
             {hasBadge && children && (
               <span className={css(styles.dualListSelectorItemCount)}>
-                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement).props.data).length}</Badge>
+                <Badge {...badgeProps}>{flattenTree((children as React.ReactElement<any>).props.data).length}</Badge>
               </span>
             )}
           </span>

package/src/deprecated/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -20,7 +20,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
 
   const onSort = (pane: string) => {
     const toSort = pane === 'available' ? [...availableOptions] : [...chosenOptions];
-    (toSort as React.ReactElement[]).sort((a, b) => {
+    (toSort as React.ReactElement<any>[]).sort((a, b) => {
       if (a.props.children > b.props.children) {
         return 1;
       }
@@ -38,7 +38,7 @@ export const DualListSelectorComplexOptionsActions: React.FunctionComponent = ()
   };
 
   const filterOption = (option: React.ReactNode, input: string) =>
-    (option as React.ReactElement).props.children.includes(input);
+    (option as React.ReactElement<any>).props.children.includes(input);
 
   const availableOptionsActions = [
     <Button

package/src/deprecated/components/Modal/Modal.tsx

@@ -263,7 +263,7 @@ class Modal extends React.Component<ModalProps, ModalState> {
         elementToFocus={elementToFocus}
       />,
       this.getElement(appendTo)
-    ) as React.ReactElement;
+    ) as React.ReactElement<any>;
   }
 }
 

package/src/deprecated/components/Wizard/WizardDrawerWrapper.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 
+import type { JSX } from 'react';
+
 export interface WizardDrawerWrapperProps {
   /** The wizard content  */
-  children: React.ReactElement;
+  children: React.ReactElement<any>;
   /** Flag indicating the wizard has a drawer for at least one of the wizard steps */
   hasDrawer: boolean;
   /** The drawer component which wraps the wizard content */
-  wrapper: (children: React.ReactElement) => JSX.Element;
+  wrapper: (children: React.ReactElement<any>) => JSX.Element;
 }
 
 export const WizardDrawerWrapper: React.FunctionComponent<WizardDrawerWrapperProps> = ({

package/src/deprecated/components/Wizard/WizardToggle.tsx

@@ -8,7 +8,7 @@ import { WizardBody } from './WizardBody';
 
 export interface WizardToggleProps {
   /** Function that returns the WizardNav component */
-  nav: (isWizardNavOpen: boolean) => React.ReactElement;
+  nav: (isWizardNavOpen: boolean) => React.ReactElement<any>;
   /** The wizard steps */
   steps: WizardStep[];
   /** The currently active WizardStep */

package/src/deprecated/components/Wizard/__tests__/Generated/WizardToggle.test.tsx

@@ -10,7 +10,7 @@ import {} from '../..';
 it('WizardToggle should match snapshot (auto-generated)', () => {
   const { asFragment } = render(
     <WizardToggle
-      nav={(_isWizardNavOpen: boolean) => undefined as React.ReactElement}
+      nav={(_isWizardNavOpen: boolean) => undefined as unknown as React.ReactElement<any>}
       steps={[]}
       activeStep={{ name: 'some step' }}
       children={<div>ReactNode</div>}

package/src/helpers/KeyboardHandler.tsx

@@ -182,7 +182,7 @@ export const setTabIndex = (options: HTMLElement[]) => {
  * @param event Event triggered by the keyboard
  * @param menuRef Menu reference
  */
-export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement>) => {
+export const onToggleArrowKeydownDefault = (event: KeyboardEvent, menuRef: React.RefObject<HTMLDivElement | null>) => {
   if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
     return;
   }

package/src/helpers/Popper/Popper.tsx

@@ -58,7 +58,7 @@ export interface PopperProps {
    */
   triggerRef?: HTMLElement | (() => HTMLElement) | React.RefObject<any>;
   /** The popper (menu/tooltip/popover) element */
-  popper: React.ReactElement;
+  popper: React.ReactElement<any>;
   /**
    * Reference to the popper (menu/tooltip/popover) element.
    * Passing this prop will remove the wrapper div element from the popper.
@@ -225,7 +225,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   const transitionTimerRef = React.useRef(null);
   const showTimerRef = React.useRef(null);
   const hideTimerRef = React.useRef(null);
-  const prevExitDelayRef = React.useRef<number>();
+  const prevExitDelayRef = React.useRef<number>(undefined);
 
   const refOrTrigger = refElement || triggerElement;
   const showPopper = isVisible || internalIsVisible;
@@ -527,7 +527,12 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     return popperRef ? (
       localPopper
     ) : (
-      <div style={{ display: 'contents' }} ref={(node) => setPopperElement(node?.firstElementChild as HTMLElement)}>
+      <div
+        style={{ display: 'contents' }}
+        ref={(node) => {
+          setPopperElement(node?.firstElementChild as HTMLElement);
+        }}
+      >
         {localPopper}
       </div>
     );
@@ -545,7 +550,12 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   return (
     <>
       {!triggerRef && trigger && React.isValidElement(trigger) && (
-        <div style={{ display: 'contents' }} ref={(node) => setTriggerElement(node?.firstElementChild as HTMLElement)}>
+        <div
+          style={{ display: 'contents' }}
+          ref={(node) => {
+            setTriggerElement(node?.firstElementChild as HTMLElement);
+          }}
+        >
           {trigger}
         </div>
       )}

package/src/helpers/Popper/thirdparty/react-popper/usePopper.ts

@@ -102,7 +102,7 @@ export const usePopper = (
     updateStateModifier
   ]);
 
-  const popperInstanceRef = React.useRef<any>();
+  const popperInstanceRef = React.useRef<any>(undefined);
 
   useIsomorphicLayoutEffect(() => {
     if (popperInstanceRef && popperInstanceRef.current) {

package/src/layouts/Bullseye/Bullseye.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
+import type { JSX } from 'react';
+
 export interface BullseyeProps extends React.HTMLProps<HTMLDivElement> {
   /** content rendered inside the Bullseye layout */
   children?: React.ReactNode;

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { Bullseye } from '../Bullseye';