npm - @patternfly/react-core - Versions diffs - 6.2.0-prerelease.15 → 6.2.0-prerelease.17 - Mend

@patternfly/react-core 6.2.0-prerelease.15 → 6.2.0-prerelease.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (547) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/DashboardHeader.tsx CHANGED Viewed

@@ -16,6 +16,8 @@ import {
   MastheadLogo,
   MastheadContent,
   MenuToggle,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -26,7 +28,6 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -108,10 +109,9 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
             >
               {notificationBadge ?? (
                 <ToolbarItem>
-                  <Button
+                  <NotificationBadge
                     aria-label="Notifications"
-                    variant={ButtonVariant.plain}
-                    icon={<BellIcon />}
+                    variant={NotificationBadgeVariant.read}
                     onClick={() => {}}
                   />
                 </ToolbarItem>

package/src/demos/SearchInput/SearchInput.md CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/Masthead/MastheadWithHorizontalNav.tsx CHANGED Viewed

@@ -25,6 +25,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   SkipToContent,
@@ -35,7 +37,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -188,7 +189,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx CHANGED Viewed

@@ -31,6 +31,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -50,7 +52,6 @@ import {
 import { Link } from '@reach/router';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
@@ -385,7 +386,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem visibility={{ default: 'hidden', md: 'hidden', lg: 'visible' }}>

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

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

package/src/demos/examples/Nav/NavFlyout.tsx CHANGED Viewed

@@ -23,6 +23,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -35,7 +37,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -134,7 +135,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontal.tsx CHANGED Viewed

@@ -23,6 +23,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   SkipToContent,
@@ -35,7 +37,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -112,7 +113,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx CHANGED Viewed

@@ -24,6 +24,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSectionTypes,
@@ -37,7 +39,6 @@ import {
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -161,7 +162,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Nav/NavManual.tsx CHANGED Viewed

@@ -24,6 +24,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -128,7 +129,7 @@ export const NavManual: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} onClick={() => {}} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageContextSelector.tsx CHANGED Viewed

@@ -26,6 +26,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -141,7 +142,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx CHANGED Viewed

@@ -27,6 +27,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -124,7 +125,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroup.tsx CHANGED Viewed

@@ -27,6 +27,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageSection,
   PageSidebar,
@@ -39,7 +41,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -124,7 +125,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

package/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx CHANGED Viewed

@@ -27,6 +27,8 @@ import {
   Nav,
   NavItem,
   NavList,
+  NotificationBadge,
+  NotificationBadgeVariant,
   Page,
   PageBreadcrumb,
   PageGroup,
@@ -41,7 +43,6 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -116,7 +117,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           gap={{ default: 'gapNone', md: 'gapMd' }}
         >
           <ToolbarItem>
-            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+            <NotificationBadge aria-label="Notifications" variant={NotificationBadgeVariant.read} onClick={() => {}} />
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>
       )}