fix(deps): Apply JSX tranform changes to missed demos and examples (#11679)

* fix(deps): Apply JSX tranform changes to missed demos and examples

* fixed all missed and edge cases

* fix remaining issues

Author: mfrances17

packages/react-core/src/components/Accordion/examples/Accordion.md

@@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-accordion
 propComponents: ['Accordion', 'AccordionItem', 'AccordionContent', 'AccordionToggle', AccordionExpandableContentBody]
 ---
 
+import { useState } from 'react';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 ## Examples

packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -10,8 +11,8 @@ import {
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 export const AccordionBordered: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('bordered-toggle4');
-  const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
+  const [expanded, setExpanded] = useState('bordered-toggle4');
+  const [isDisplayLarge, setIsDisplayLarge] = useState(false);
 
   const displaySize = isDisplayLarge ? 'lg' : 'default';
   const onToggle = (id: string) => {

packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionDefinitionList: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('def-list-toggle2');
+  const [expanded, setExpanded] = useState('def-list-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {

packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState(['ex2-toggle4']);
+  const [expanded, setExpanded] = useState(['ex2-toggle4']);
 
   const toggle = (id) => {
     const index = expanded.indexOf(id);

packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionSingleExpandBehavior: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('ex-toggle2');
+  const [expanded, setExpanded] = useState('ex-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {

packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionToggleIconAtStart: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('start-toggle-toggle2');
+  const [expanded, setExpanded] = useState('start-toggle-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {

packages/react-core/src/components/ActionList/examples/ActionList.md

@@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-action-list
 propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import {
   ActionList,
   ActionListGroup,
@@ -14,7 +14,7 @@ import {
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const ActionListSingleGroup: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onToggle = () => {
     setIsOpen(!isOpen);

packages/react-core/src/components/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState, type JSX } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 import { AlertIcon } from './AlertIcon';
@@ -22,7 +22,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Close button; use the alert action close button component.  */
   actionClose?: React.ReactNode;
   /** Action links; use a single alert action link component or multiple wrapped in an array
-   * or React.Fragment.
+   * or React fragment.
    */
   actionLinks?: React.ReactNode;
   /** Content rendered inside the alert. */
@@ -54,7 +54,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Title of the alert.  */
   title: React.ReactNode;
   /** Sets the element to use as the alert title. Default is h4. */
-  component?: keyof JSX.IntrinsicElements;
+  component?: keyof React.JSX.IntrinsicElements;
   /** Adds accessible text to the alert toggle. */
   toggleAriaLabel?: string;
   /** Position of the tooltip which is displayed if text is truncated. */