@patternfly/react-core 6.2.0-prerelease.3 → 6.2.0-prerelease.30

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

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { 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';
@@ -102,7 +102,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
       >
         <TextInput
           isRequired
-          type="text"
+          type="password"
           id="password-field"
           name="password-field"
           aria-describedby="password-field-helper"

package/src/demos/examples/Skeleton/SkeletonCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Gallery, Flex, PageSection, Content, Card, CardBody, Skeleton } from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
+
+export const SkeletonCard: React.FunctionComponent = () => {
+  const card = (index: number) => (
+    <Card key={index} isCompact>
+      <CardBody>
+        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
+          <Skeleton screenreaderText="Loading content" />
+          <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+        </Flex>
+      </CardBody>
+      <CardBody>
+        <Skeleton shape="square" width="75%" screenreaderText="Loading medium square contents" />
+      </CardBody>
+      <CardBody>
+        <Flex direction={{ default: 'column' }} spacer={{ default: 'spacerMd' }}>
+          <Skeleton screenreaderText="Loading content" />
+          <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+          <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+          <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+        </Flex>
+      </CardBody>
+    </Card>
+  );
+  return (
+    <DashboardWrapper isBreadcrumbWidthLimited>
+      <PageSection isWidthLimited>
+        <Content component="h1">Main title</Content>
+        <Content component="p">This is a full page demo.</Content>
+      </PageSection>
+      <PageSection>
+        <Gallery hasGutter>{Array.from({ length: 7 }).map((_value, index) => card(index))}</Gallery>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

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/demos/examples/Wizard/InModal.tsx

@@ -46,7 +46,6 @@ export const WizardInModalDemo: React.FunctionComponent = () => (
             closeButtonAriaLabel="Close wizard"
           />
         }
-        height={400}
       >
         <WizardStep name="Information" id="wizard-step-1">
           <p>Step 1 content</p>

package/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -4,7 +4,6 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -38,7 +37,7 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -86,7 +85,6 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
             descriptionId="wiz-modal-demo-description"
           />
         }
-        height={400}
       >
         <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}

package/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -7,7 +7,6 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   Flex,
   Modal,
@@ -39,7 +38,7 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -91,7 +90,6 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
             descriptionId="wiz-modal-demo-description"
           />
         }
-        height={400}
       >
         <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}

package/src/demos/examples/Wizard/InPage.tsx

@@ -5,7 +5,7 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 export const WizardFullPage: React.FunctionComponent = () => (
   <React.Fragment>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type={PageSectionTypes.wizard}>
+      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
         <Wizard>
           <WizardStep name="Information" id="wizard-step-1">
             <p>Step 1 content</p>

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -10,7 +10,6 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   Flex,
   Nav,
@@ -135,7 +134,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -180,7 +179,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard}>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -11,7 +11,6 @@ import {
   DrawerContent,
   DrawerHead,
   DrawerPanelContent,
-  DrawerColorVariant,
   Flex,
   Nav,
   NavItem,
@@ -135,7 +134,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -184,7 +183,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard} ß>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß>
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}

package/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -23,7 +23,6 @@ exports[`Matches snapshot 1`] = `
       class="pf-v6-c-label__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Close Chip text"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-17"

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/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -106,7 +106,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -171,7 +171,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -204,7 +204,7 @@ exports[`DualListSelector basic 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-4"
@@ -380,7 +380,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-13"
@@ -413,7 +413,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-14"
@@ -446,7 +446,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-15"
@@ -479,7 +479,7 @@ exports[`DualListSelector basic with disabled controls 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-16"
@@ -666,7 +666,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-21"
@@ -763,7 +763,7 @@ exports[`DualListSelector with actions 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-24"
@@ -1004,7 +1004,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-9"
@@ -1069,7 +1069,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-11"
@@ -1102,7 +1102,7 @@ exports[`DualListSelector with custom status 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-12"
@@ -1320,7 +1320,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-5"
@@ -1385,7 +1385,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-7"
@@ -1418,7 +1418,7 @@ exports[`DualListSelector with search inputs 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-8"
@@ -1713,7 +1713,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Add selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-17"
@@ -1778,7 +1778,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove all"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-19"
@@ -1811,7 +1811,7 @@ exports[`DualListSelector with tree 1`] = `
         class="pf-v6-c-dual-list-selector__controls-item"
       >
         <button
-          aria-disabled="false"
+          aria-disabled="true"
           aria-label="Remove selected"
           class="pf-v6-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-20"

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/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -22,7 +22,6 @@ exports[`Modal Content Test description 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -102,7 +101,6 @@ exports[`Modal Content Test isOpen 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-2"
@@ -177,7 +175,6 @@ exports[`Modal Content Test only body 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -252,7 +249,6 @@ exports[`Modal Content Test with footer 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-4"
@@ -332,7 +328,6 @@ exports[`Modal Content Test with onclose 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-6"
@@ -412,7 +407,6 @@ exports[`Modal Content test without footer 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-5"
@@ -487,7 +481,6 @@ exports[`Modal Test with custom footer 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-8"
@@ -571,7 +564,6 @@ exports[`Modal Test with custom header 1`] = `
           class="pf-v6-c-modal-box__close"
         >
           <button
-            aria-disabled="false"
             aria-label="Close"
             class="pf-v6-c-button pf-m-plain"
             data-ouia-component-id="OUIA-Generated-Button-plain-7"

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> = ({