From 1b03abcf32207e1bf36eb7390b1d617050682733 Mon Sep 17 00:00:00 2001 From: mfrances Date: Fri, 14 Mar 2025 16:00:19 -0400 Subject: [PATCH 1/3] fix(deps): Apply JSX tranform changes to missed demos and examples --- .../ActionList/examples/ActionList.md | 2 +- .../examples/ActionListSingleGroup.tsx | 4 +- .../src/components/Alert/examples/Alert.md | 72 +++++++++++-------- .../Alert/examples/AlertAsyncLiveRegion.tsx | 8 +-- .../Alert/examples/AlertGroupAsync.tsx | 6 +- .../examples/AlertGroupMultipleDynamic.tsx | 4 +- .../examples/AlertGroupSingularDynamic.tsx | 4 +- .../AlertGroupSingularDynamicOverflow.tsx | 6 +- .../Alert/examples/AlertGroupToast.tsx | 4 +- .../AlertGroupToastOverflowCapture.tsx | 6 +- .../src/components/Card/examples/Card.md | 2 +- .../Card/examples/CardExpandable.tsx | 10 +-- .../Card/examples/CardWithModifiers.tsx | 4 +- .../components/Checkbox/examples/Checkbox.md | 2 +- .../Checkbox/examples/CheckboxControlled.tsx | 14 ++-- .../src/components/Hint/examples/Hint.md | 2 +- .../Hint/examples/HintBasicWithoutTitle.tsx | 4 +- .../src/components/Icon/examples/Icon.md | 2 +- .../Icon/examples/IconCustomProgress.tsx | 4 +- .../components/Icon/examples/IconProgress.tsx | 4 +- .../InputGroup/examples/InputGroup.md | 2 +- .../examples/InputGroupWithDropdown.tsx | 4 +- .../examples/InputGroupWithPopover.tsx | 6 +- .../src/components/Label/examples/Label.md | 2 +- .../Label/examples/LabelEditable.tsx | 6 +- .../LoginPage/examples/LoginPage.md | 2 +- .../LoginPage/examples/LoginPageBasic.tsx | 14 ++-- .../examples/LoginPageLanguageSelect.tsx | 18 ++--- .../examples/LoginPageShowHidePassword.tsx | 14 ++-- .../src/components/Menu/examples/Menu.md | 2 +- .../components/Menu/examples/MenuBasic.tsx | 6 +- .../Menu/examples/MenuWithFavorites.tsx | 6 +- .../MenuToggle/examples/MenuToggle.md | 30 ++++---- .../src/components/Modal/examples/Modal.md | 2 +- .../components/Modal/examples/ModalBasic.tsx | 4 +- .../Modal/examples/ModalCustomFocus.tsx | 4 +- .../Modal/examples/ModalCustomHeader.tsx | 4 +- .../Modal/examples/ModalCustomTitleIcon.tsx | 4 +- .../Modal/examples/ModalCustomWidth.tsx | 4 +- .../Modal/examples/ModalNoHeaderFooter.tsx | 4 +- .../components/Modal/examples/ModalSize.tsx | 6 +- .../Modal/examples/ModalTitleIcon.tsx | 4 +- .../Modal/examples/ModalTopAligned.tsx | 4 +- .../Modal/examples/ModalWithDescription.tsx | 4 +- .../Modal/examples/ModalWithDropdown.tsx | 6 +- .../Modal/examples/ModalWithForm.tsx | 16 ++--- .../Modal/examples/ModalWithHelp.tsx | 4 +- .../examples/ModalWithOverflowingContent.tsx | 4 +- .../Modal/examples/ModalWithWizard.tsx | 4 +- .../NumberInput/examples/NumberInput.md | 2 +- .../NumberInput/examples/NumberInputUnit.tsx | 6 +- .../examples/NumberInputUnitThreshold.tsx | 4 +- .../examples/NumberInputVaryingSizes.tsx | 10 +-- .../Pagination/examples/Pagination.md | 2 +- .../examples/PaginationIndeterminate.tsx | 6 +- .../Pagination/examples/PaginationSticky.tsx | 8 +-- .../examples/ProgressStepper.md | 2 +- .../ProgressStepperBasicWithAlignment.tsx | 6 +- .../examples/ProgressStepperCompact.tsx | 6 +- .../src/components/Radio/examples/Radio.md | 2 +- .../Radio/examples/RadioControlled.tsx | 4 +- .../SearchInput/examples/SearchInput.md | 1 + .../examples/SearchInputAdvanced.tsx | 7 +- .../SearchInput/examples/SearchInputBasic.tsx | 3 +- .../examples/SearchInputFocusSearch.tsx | 5 +- .../examples/SearchInputWithExpandable.tsx | 5 +- .../SearchInputWithNavigableOptions.tsx | 7 +- .../examples/SearchInputWithResultCount.tsx | 5 +- .../examples/SearchInputWithSubmitButton.tsx | 3 +- .../src/components/Select/examples/Select.md | 2 +- .../Select/examples/SelectBasic.tsx | 8 +-- .../Select/examples/SelectValidated.tsx | 8 +-- .../src/components/Tabs/examples/Tabs.md | 2 +- .../examples/TabsContentWithBodyPadding.tsx | 10 +-- .../Tabs/examples/TabsSeparateContent.tsx | 10 +-- .../examples/TabsToggledSeparateContent.tsx | 12 ++-- .../components/TextArea/examples/TextArea.md | 2 +- .../TextArea/examples/TextAreaReadOnly.tsx | 4 +- .../components/Toolbar/examples/Toolbar.md | 2 +- .../ToolbarComponentManagedToggleGroups.tsx | 12 ++-- .../ToolbarConsumerManagedToggleGroups.tsx | 14 ++-- .../ToolbarCustomLabelGroupContent.tsx | 8 +-- .../Toolbar/examples/ToolbarGroups.tsx | 14 ++-- .../Toolbar/examples/ToolbarStacked.tsx | 18 ++--- .../Toolbar/examples/ToolbarSticky.tsx | 6 +- .../Toolbar/examples/ToolbarWithFilters.tsx | 12 ++-- .../components/TreeView/examples/TreeView.md | 2 +- .../examples/TreeViewSingleSelectable.tsx | 6 +- .../examples/TreeViewWithMemoization.tsx | 6 +- packages/react-core/src/demos/AlertGroup.md | 2 +- packages/react-core/src/demos/BackToTop.md | 1 + packages/react-core/src/demos/Button.md | 4 +- .../demos/CustomMenus/ApplicationLauncher.md | 2 + .../src/demos/CustomMenus/ContextSelector.md | 1 + .../src/demos/CustomMenus/CustomMenus.md | 2 + .../src/demos/CustomMenus/OptionsMenu.md | 1 + .../CustomMenus/examples/ActionsMenuDemo.tsx | 7 +- .../examples/ApplicationLauncherDemo.tsx | 18 ++--- .../examples/ContextSelectorDemo.tsx | 13 ++-- .../CustomMenus/examples/DateSelectDemo.tsx | 7 +- .../examples/DrilldownMenuDemo.tsx | 15 ++-- .../demos/CustomMenus/examples/FlyoutDemo.tsx | 7 +- .../examples/InlineSearchFilterMenuDemo.tsx | 11 +-- .../CustomMenus/examples/OptionsMenuDemo.tsx | 7 +- .../CustomMenus/examples/TreeViewMenuDemo.tsx | 9 +-- .../DataList/examples/DataListActionable.tsx | 5 +- .../DataListExpandableControlInToolbar.tsx | 12 ++-- .../DataListStaticBottomPagination.tsx | 8 +-- packages/react-core/src/demos/DataListDemo.md | 2 + .../src/demos/DatePicker/DatePicker.md | 5 +- .../react-core/src/demos/DateTimePicker.md | 6 +- .../demos/DescriptionList/DescriptionList.md | 1 + .../examples/DescriptionListInDrawer.tsx | 7 +- .../ExpandableSection/ExpandableSection.md | 2 + .../examples/ExpandableTextDemo.tsx | 3 +- .../src/demos/Filters/FilterDemos.md | 2 +- .../examples/FilterAttributeSearch.tsx | 58 +++++++-------- .../Filters/examples/FilterCheckboxSelect.tsx | 32 ++++----- .../demos/Filters/examples/FilterFaceted.tsx | 34 ++++----- .../examples/FilterMixedSelectGroup.tsx | 44 ++++++------ .../examples/FilterSameSelectGroup.tsx | 44 ++++++------ .../Filters/examples/FilterSearchInput.tsx | 22 +++--- .../Filters/examples/FilterSingleSelect.tsx | 34 ++++----- packages/react-core/src/demos/HelperText.md | 1 + packages/react-core/src/demos/JumpLinks.md | 8 ++- packages/react-core/src/demos/Masthead.md | 1 + .../src/demos/MultipleFileUploadDemos.md | 2 +- packages/react-core/src/demos/Nav.md | 1 + .../NotificationDrawer/NotificationDrawer.md | 2 + .../examples/NotificationDrawerBasic.tsx | 18 ++--- .../examples/NotificationDrawerGrouped.tsx | 24 +++---- packages/react-core/src/demos/Page.md | 1 + .../react-core/src/demos/PasswordGenerator.md | 16 +++-- .../react-core/src/demos/PasswordStrength.md | 1 + .../react-core/src/demos/PrimaryDetail.md | 1 + packages/react-core/src/demos/ProgressDemo.md | 8 ++- .../src/demos/ProgressStepperDemo.md | 4 +- packages/react-core/src/demos/RTL/RTL.md | 1 + .../src/demos/SearchInput/SearchInput.md | 46 ++++++------ packages/react-core/src/demos/Tabs.md | 9 ++- .../src/demos/TextInputGroupDemo.md | 1 + packages/react-core/src/demos/Toolbar.md | 1 + .../react-core/src/demos/Wizard/WizardDemo.md | 2 + .../examples/Card/CardAggregateStatus.tsx | 4 +- .../demos/examples/Card/CardEventsView.tsx | 4 +- .../examples/Card/CardHorizontalGrid.tsx | 5 +- .../src/demos/examples/Card/CardLogView.tsx | 4 +- .../src/demos/examples/Card/CardNested.tsx | 9 +-- .../src/demos/examples/Card/CardStatus.tsx | 5 +- .../demos/examples/Card/CardStatusTabbed.tsx | 3 +- .../demos/examples/Card/CardWithAccordion.tsx | 3 +- .../DateTimePicker/DateTimePicker.tsx | 9 +-- .../examples/HelperText/HelperTextDynamic.tsx | 7 +- .../examples/HelperText/HelperTextStatic.tsx | 3 +- .../HelperTextStaticTextDynamicVariant.tsx | 7 +- .../Masthead/MastheadWithHorizontalNav.tsx | 17 ++--- ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 32 ++++----- .../MultipleFileUploadRejectedFile.tsx | 15 ++-- .../src/demos/examples/Nav/NavDrilldown.tsx | 6 +- .../src/demos/examples/Nav/NavExpandable.tsx | 6 +- .../src/demos/examples/Nav/NavFlyout.tsx | 15 ++-- .../src/demos/examples/Nav/NavGrouped.tsx | 3 +- .../src/demos/examples/Nav/NavHorizontal.tsx | 10 +-- .../examples/Nav/NavHorizontalWithSubnav.tsx | 12 ++-- .../src/demos/examples/Nav/NavManual.tsx | 16 ++--- .../src/demos/examples/Nav/NavWithSubnav.tsx | 6 +- .../examples/Page/PageContextSelector.tsx | 13 ++-- .../Page/PageStickySectionBreadcrumb.tsx | 9 +-- .../Page/PageStickySectionGroupAlternate.tsx | 9 +-- .../PasswordStrength/PasswordStrengthDemo.tsx | 4 +- .../PrimaryDetail/PrimaryDetailCardView.tsx | 30 ++++---- .../PrimaryDetailContentPadding.tsx | 18 ++--- .../PrimaryDetailDataListInCard.tsx | 10 +-- .../PrimaryDetail/PrimaryDetailFullPage.tsx | 18 ++--- .../PrimaryDetailInlineModifier.tsx | 18 ++--- .../PrimaryDetailSimpleListInCard.tsx | 6 +- .../src/demos/examples/Tabs/ModalTabs.tsx | 14 ++-- .../src/demos/examples/Tabs/NestedTabs.tsx | 5 +- .../examples/Tabs/NestedUnindentedTabs.tsx | 5 +- .../src/demos/examples/Tabs/TabsAndTable.tsx | 10 +-- .../AttributeValueFiltering.tsx | 19 ++--- .../TextInputGroup/AutoCompleteSearch.tsx | 17 ++--- .../Toolbar/ConsoleLogViewerToolbar.tsx | 34 ++++----- .../examples/Wizard/InModalWithDrawer.tsx | 5 +- .../InModalWithDrawerInformationalStep.tsx | 5 +- .../examples/Wizard/InPageWithDrawer.tsx | 8 +-- .../InPageWithDrawerInformationalStep.tsx | 8 +-- .../components/Chip/examples/Chip.md | 2 +- .../components/Chip/examples/ChipDefault.tsx | 4 +- .../examples/ChipGroupRemovableCategories.tsx | 6 +- .../components/Modal/examples/Modal.md | 2 +- .../components/Modal/examples/ModalBasic.tsx | 4 +- .../Modal/examples/ModalCustomFocus.tsx | 4 +- .../examples/ModalCustomHeaderFooter.tsx | 4 +- .../Modal/examples/ModalCustomTitleIcon.tsx | 4 +- .../Modal/examples/ModalCustomWidth.tsx | 4 +- .../components/Modal/examples/ModalLarge.tsx | 4 +- .../components/Modal/examples/ModalMedium.tsx | 4 +- .../Modal/examples/ModalNoHeaderFooter.tsx | 4 +- .../components/Modal/examples/ModalSmall.tsx | 4 +- .../Modal/examples/ModalTitleIcon.tsx | 4 +- .../Modal/examples/ModalTopAligned.tsx | 4 +- .../Modal/examples/ModalWithDescription.tsx | 4 +- .../Modal/examples/ModalWithDropdown.tsx | 6 +- .../Modal/examples/ModalWithForm.tsx | 16 ++--- .../Modal/examples/ModalWithHelp.tsx | 4 +- .../examples/ModalWithOverflowingContent.tsx | 4 +- .../Modal/examples/ModalWithWizard.tsx | 4 +- .../components/Tile/examples/Tile.md | 7 +- .../components/Wizard/examples/Wizard.md | 2 +- .../Wizard/examples/WizardInModal.tsx | 4 +- .../Wizard/examples/WizardWithDrawer.tsx | 6 +- 212 files changed, 933 insertions(+), 830 deletions(-) diff --git a/packages/react-core/src/components/ActionList/examples/ActionList.md b/packages/react-core/src/components/ActionList/examples/ActionList.md index ff1e7fb698e..e23eba3e738 100644 --- a/packages/react-core/src/components/ActionList/examples/ActionList.md +++ b/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'; diff --git a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx b/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx index 9d4ca00a6dc..75fa07880a8 100644 --- a/packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx +++ b/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); diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index 2a7b436bac9..bacf683bb8a 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -7,7 +7,7 @@ ouia: true --- import './alert.css'; -import { Fragment, useState } from 'react'; +import { Fragment, useEffect, useState } from 'react'; import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; @@ -30,15 +30,16 @@ PatternFly supports several alert variants for different scenarios. Each variant | Danger | Use to indicate that a critical or blocking error has occurred | ```ts +import { Fragment } from 'react'; import { Alert } from '@patternfly/react-core'; - + -; +; ``` ### Alert variations @@ -56,14 +57,15 @@ PatternFly supports several properties and variations that can be used to add ex - If there is a description passed via `children` prop, then the `component` prop should be a heading element. Headings should be ordered by their level and heading levels should not be skipped. For example, a heading of an `h2` level should not be followed directly by an `h4`. ```ts +import { Fragment } from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; - + + View details @@ -72,7 +74,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac > Ignore - + } >

Success alert description. This should tell the user more information about the alert.

@@ -95,7 +97,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac

Short alert description.

 -; +; ``` ### Alert timeout @@ -103,11 +105,12 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac Use the `timeout` property to automatically dismiss an alert after a period of time. If set to `true`, the `timeout` will be 8000 milliseconds. Provide a specific value to dismiss the alert after a different number of milliseconds. ```ts +import { Fragment, useState } from 'react'; import { Alert, AlertActionLink, AlertGroup, Button } from '@patternfly/react-core'; const AlertTimeout: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState([]); - const [newAlertKey, setNewAlertKey] = React.useState(0); + const [alerts, setAlerts] = useState([]); + const [newAlertKey, setNewAlertKey] = useState(0); const onClick = () => { const timeout = 8000; @@ -119,7 +122,7 @@ const AlertTimeout: React.FunctionComponent = () => { title="Default timeout Alert" timeout={timeout} actionLinks={ - + View details @@ -128,7 +131,7 @@ const AlertTimeout: React.FunctionComponent = () => { > Ignore - + } key={newAlertKey} > @@ -139,7 +142,7 @@ const AlertTimeout: React.FunctionComponent = () => { }; return ( - + @@ -147,7 +150,7 @@ const AlertTimeout: React.FunctionComponent = () => { Remove all alerts {alerts} - + ); }; ``` @@ -161,9 +164,10 @@ It is not recommended to use an expandable alert with a `timeout` in a [toast al See the [toast alert considerations](/components/alert/accessibility#toast-alerts) section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts. ```ts +import { Fragment } from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; - + + View details @@ -188,12 +192,12 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac > Ignore - + } >

Success alert description. This should tell the user more information about the alert.

-; +; ``` ### Truncated alerts @@ -201,9 +205,10 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac Use the `truncateTitle` property to shorten a long `title`. Set `truncateTitle` equal to a number (passed in as `{n}`) to reduce the number of lines of text in the alert's `title`. Users may hover over or tab to a truncated `title` to see the full message in a tooltip. ```ts +import { Fragment } from 'react'; import { Alert } from '@patternfly/react-core'; - + -; +; ``` ### Custom icons @@ -233,6 +238,7 @@ import { Alert } from '@patternfly/react-core'; Use the `customIcon` property to replace a default alert icon with a custom icon. ```ts +import { Fragment } from 'react'; import { Alert } from '@patternfly/react-core'; import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; @@ -240,13 +246,13 @@ import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon'; import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; - + } title="Default alert title" /> } variant="info" title="Info alert title" /> } variant="success" title="Success alert title" /> } variant="warning" title="Warning alert title" /> } variant="danger" title="Danger alert title" /> -; +; ``` ### Inline alerts variants @@ -254,14 +260,15 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; Use inline alerts to display an alert inline with content. All alert variants may use the `isInline` property to position alerts in content-heavy areas, such as within forms, wizards, or drawers. ```ts +import { Fragment } from 'react'; import { Alert } from '@patternfly/react-core'; - + -; +; ``` ### Inline alert variations @@ -269,14 +276,15 @@ import { Alert } from '@patternfly/react-core'; All general alert variations can use the `isInline` property to apply inline styling. ```ts +import { Fragment } from 'react'; import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/react-core'; - + + View details @@ -285,7 +293,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac > Ignore - + } >

Success alert description. This should tell the user more information about the alert.

@@ -309,7 +317,7 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac

Short alert description.

 -; +; ``` ### Plain inline alert variants @@ -317,14 +325,15 @@ import { Alert, AlertActionCloseButton, AlertActionLink } from '@patternfly/reac Use the `isPlain` property to make any inline alert plain. Plain styling removes the colored background but keeps colored text and icons. ```ts +import { Fragment } from 'react'; import { Alert } from '@patternfly/react-core'; - + -; +; ``` ### Plain inline alert variations @@ -345,9 +354,10 @@ Live region alerts allow you to expose dynamic content changes in a way that can By default, `isLiveRegion`alerts are static. ```ts +import { Fragment } from 'react'; import { Alert, AlertActionCloseButton } from '@patternfly/react-core'; - + isLiveRegion prop to specify ARIA attributes and CSS manually on the containing element. -; +; ``` ### Dynamic live region alerts diff --git a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx index d80bdaa8c7d..6fe11a82222 100644 --- a/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertAsyncLiveRegion.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useState } from 'react'; import { Alert, AlertGroup, AlertVariant, ToggleGroup, ToggleGroupItem } from '@patternfly/react-core'; interface AlertInfo { @@ -8,15 +8,15 @@ interface AlertInfo { } export const AsyncLiveRegionAlert: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState([]); - const [isActive, setIsActive] = React.useState(false); + const [alerts, setAlerts] = useState([]); + const [isActive, setIsActive] = useState(false); const getUniqueId: () => number = () => new Date().getTime(); const addAlert = (alertInfo: AlertInfo) => { setAlerts((prevAlertInfo) => [...prevAlertInfo, alertInfo]); }; - React.useEffect(() => { + useEffect(() => { let timer = null; if (isActive) { timer = setInterval(() => { diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx index b608134f040..610d4fc0581 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupAsync.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Alert, AlertProps, @@ -12,8 +12,8 @@ import { import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; export const AlertGroupAsync: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState[]>([]); - const [isRunning, setIsRunning] = React.useState(false); + const [alerts, setAlerts] = useState[]>([]); + const [isRunning, setIsRunning] = useState(false); const btnClasses = [buttonStyles.button, buttonStyles.modifiers.secondary].join(' '); diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx index 9d98bd923e6..451252c4160 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupMultipleDynamic.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Alert, AlertProps, @@ -11,7 +11,7 @@ import { import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; export const AlertGroupMultipleDynamic: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState[]>([]); + const [alerts, setAlerts] = useState[]>([]); const addAlerts = (incomingAlerts: Partial[]) => { setAlerts((prevAlerts) => [...prevAlerts, ...incomingAlerts]); diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx index 1df8dc6296c..8f471476121 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamic.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Alert, AlertProps, @@ -11,7 +11,7 @@ import { import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; export const AlertGroupSingularDynamic: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState[]>([]); + const [alerts, setAlerts] = useState[]>([]); const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => { setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]); diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx index f7736ad4d42..1e26d95465e 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupSingularDynamicOverflow.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Alert, AlertProps, @@ -11,8 +11,8 @@ import { import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; export const AlertGroupSingularDynamicOverflow: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState[]>([]); - const [overflowMessage, setOverflowMessage] = React.useState(''); + const [alerts, setAlerts] = useState[]>([]); + const [overflowMessage, setOverflowMessage] = useState(''); const maxDisplayed = 4; diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx index 1d38f86308b..1c5613ef0a6 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupToast.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Alert, AlertProps, @@ -11,7 +11,7 @@ import { import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; export const AlertGroupToast: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState[]>([]); + const [alerts, setAlerts] = useState[]>([]); const addAlert = (title: string, variant: AlertProps['variant'], key: React.Key) => { setAlerts((prevAlerts) => [...prevAlerts, { title, variant, key }]); diff --git a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx index b8ddd9cd611..3d68793a3b9 100644 --- a/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx +++ b/packages/react-core/src/components/Alert/examples/AlertGroupToastOverflowCapture.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Alert, AlertProps, @@ -11,8 +11,8 @@ import { import buttonStyles from '@patternfly/react-styles/css/components/Button/button'; export const AlertGroupToastOverflowCapture: React.FunctionComponent = () => { - const [alerts, setAlerts] = React.useState[]>([]); - const [overflowMessage, setOverflowMessage] = React.useState(''); + const [alerts, setAlerts] = useState[]>([]); + const [overflowMessage, setOverflowMessage] = useState(''); const maxDisplayed = 4; diff --git a/packages/react-core/src/components/Card/examples/Card.md b/packages/react-core/src/components/Card/examples/Card.md index 11928543aee..b183c06b1b8 100644 --- a/packages/react-core/src/components/Card/examples/Card.md +++ b/packages/react-core/src/components/Card/examples/Card.md @@ -16,7 +16,7 @@ propComponents: ouia: true --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg'; import pfLogoSmall from '../../assets/PF-IconLogo.svg'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/src/components/Card/examples/CardExpandable.tsx index 39378dfe660..54c05beed7d 100644 --- a/packages/react-core/src/components/Card/examples/CardExpandable.tsx +++ b/packages/react-core/src/components/Card/examples/CardExpandable.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Card, CardHeader, @@ -17,10 +17,10 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardExpandable: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [isChecked, setIsChecked] = React.useState(false); - const [isExpanded, setIsExpanded] = React.useState(false); - const [isToggleRightAligned, setIsToggleRightAligned] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); + const [isToggleRightAligned, setIsToggleRightAligned] = useState(false); const onSelect = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx index 9b18185f07d..637a868f10a 100644 --- a/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx +++ b/packages/react-core/src/components/Card/examples/CardWithModifiers.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Card, CardTitle, CardBody, CardFooter, Checkbox } from '@patternfly/react-core'; export const CardWithModifiers: React.FunctionComponent = () => { const mods = ['isCompact', 'isLarge', 'isFullHeight', 'isPlain']; - const [modifiers, setModifiers] = React.useState({}); + const [modifiers, setModifiers] = useState({}); return ( diff --git a/packages/react-core/src/components/Checkbox/examples/Checkbox.md b/packages/react-core/src/components/Checkbox/examples/Checkbox.md index c7a87545404..d860af1e4eb 100644 --- a/packages/react-core/src/components/Checkbox/examples/Checkbox.md +++ b/packages/react-core/src/components/Checkbox/examples/Checkbox.md @@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-check propComponents: ['Checkbox'] --- -import { Fragment } from 'react'; +import { Fragment, useEffect, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx b/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx index d91da501c2a..ed125618496 100644 --- a/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx +++ b/packages/react-core/src/components/Checkbox/examples/CheckboxControlled.tsx @@ -1,11 +1,11 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useState } from 'react'; import { Checkbox } from '@patternfly/react-core'; export const CheckboxControlled: React.FunctionComponent = () => { - const [isChecked1, setIsChecked1] = React.useState(false); - const [isChecked2, setIsChecked2] = React.useState(false); - const [isChecked3, setIsChecked3] = React.useState(false); - const [isChecked4, setIsChecked4] = React.useState(false); + const [isChecked1, setIsChecked1] = useState(false); + const [isChecked2, setIsChecked2] = useState(false); + const [isChecked3, setIsChecked3] = useState(false); + const [isChecked4, setIsChecked4] = useState(false); const handleChange = (event: React.FormEvent, checked: boolean) => { const target = event.currentTarget; @@ -30,14 +30,14 @@ export const CheckboxControlled: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { if (isChecked1 !== null) { setIsChecked2(isChecked1); setIsChecked3(isChecked1); } }, [isChecked1]); - React.useEffect(() => { + useEffect(() => { setIsChecked1((isChecked2 && isChecked3) || (isChecked2 || isChecked3 ? null : false)); }, [isChecked2, isChecked3]); diff --git a/packages/react-core/src/components/Hint/examples/Hint.md b/packages/react-core/src/components/Hint/examples/Hint.md index 57aa3740de1..28fd2e21b1a 100644 --- a/packages/react-core/src/components/Hint/examples/Hint.md +++ b/packages/react-core/src/components/Hint/examples/Hint.md @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-hint propComponents: ['Hint', 'HintTitle', 'HintBody', 'HintFooter'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Examples diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx index 7884dc245fa..313a6c1c184 100644 --- a/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx +++ b/packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Hint, HintBody, @@ -14,7 +14,7 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const HintBasicWithoutTitle: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Icon/examples/Icon.md b/packages/react-core/src/components/Icon/examples/Icon.md index fcdef78bfb5..172ad48183c 100644 --- a/packages/react-core/src/components/Icon/examples/Icon.md +++ b/packages/react-core/src/components/Icon/examples/Icon.md @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-icon propComponents: ['Icon'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; diff --git a/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx b/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx index 9e319fc0191..e03bd578d4f 100644 --- a/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx +++ b/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Icon, Spinner, Checkbox } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; export const IconProgress: React.FunctionComponent = () => { - const [isInProgress, setIsInProgress] = React.useState(false); + const [isInProgress, setIsInProgress] = useState(false); return (
diff --git a/packages/react-core/src/components/Icon/examples/IconProgress.tsx b/packages/react-core/src/components/Icon/examples/IconProgress.tsx index b9889989a84..f0c59f0cd1e 100644 --- a/packages/react-core/src/components/Icon/examples/IconProgress.tsx +++ b/packages/react-core/src/components/Icon/examples/IconProgress.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Icon, Checkbox } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; export const IconProgress: React.FunctionComponent = () => { - const [isInProgress, setIsInProgress] = React.useState(false); + const [isInProgress, setIsInProgress] = useState(false); return (
diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroup.md b/packages/react-core/src/components/InputGroup/examples/InputGroup.md index 6d0d89210e6..901f61cc80c 100644 --- a/packages/react-core/src/components/InputGroup/examples/InputGroup.md +++ b/packages/react-core/src/components/InputGroup/examples/InputGroup.md @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-input-group propComponents: ['InputGroup', 'InputGroupItem', 'InputGroupText'] --- -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon'; import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon'; import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon'; diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx index a74d789c126..cf6a38718ee 100644 --- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx +++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithDropdown.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, InputGroup, @@ -12,7 +12,7 @@ import { } from '@patternfly/react-core'; export const InputGroupWithDropdown: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx index 4f4927e7042..3ca507dba39 100644 --- a/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx +++ b/packages/react-core/src/components/InputGroup/examples/InputGroupWithPopover.tsx @@ -1,10 +1,10 @@ -import { Fragment } from 'react'; +import { Fragment, useRef } from 'react'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core'; export const InputGroupWithPopover: React.FunctionComponent = () => { - const inputGroupRef1 = React.useRef(null); - const inputGroupRef2 = React.useRef(null); + const inputGroupRef1 = useRef(null); + const inputGroupRef2 = useRef(null); return ( diff --git a/packages/react-core/src/components/Label/examples/Label.md b/packages/react-core/src/components/Label/examples/Label.md index 122b6764cd6..29ebf65415c 100644 --- a/packages/react-core/src/components/Label/examples/Label.md +++ b/packages/react-core/src/components/Label/examples/Label.md @@ -5,7 +5,7 @@ cssPrefix: ['pf-v6-c-label', 'pf-v6-c-label-group'] propComponents: ['Label', 'LabelGroup'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import './Label.css'; diff --git a/packages/react-core/src/components/Label/examples/LabelEditable.tsx b/packages/react-core/src/components/Label/examples/LabelEditable.tsx index 75cca9015be..762ff42b076 100644 --- a/packages/react-core/src/components/Label/examples/LabelEditable.tsx +++ b/packages/react-core/src/components/Label/examples/LabelEditable.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Label } from '@patternfly/react-core'; export const LabelEditable: React.FunctionComponent = () => { - const [labelText, setLabelText] = React.useState('Editable label'); - const [compactLabelText, setCompactLabelText] = React.useState('Compact editable label'); + const [labelText, setLabelText] = useState('Editable label'); + const [compactLabelText, setCompactLabelText] = useState('Compact editable label'); const onEditCancel = (_event: KeyboardEvent, prevText: string) => { setLabelText(prevText); diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPage.md b/packages/react-core/src/components/LoginPage/examples/LoginPage.md index c191d6dff15..7443ce7e6e8 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPage.md +++ b/packages/react-core/src/components/LoginPage/examples/LoginPage.md @@ -18,7 +18,7 @@ propComponents: ] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import brandImg from '../../assets/PF-IconLogo.svg'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import GoogleIcon from '@patternfly/react-icons/dist/esm/icons/google-icon'; diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx index a13fcb66a6e..d75d069582a 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import brandImg from '../../assets/PF-IconLogo.svg'; import { LoginFooterItem, @@ -18,12 +18,12 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook- import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; export const SimpleLoginPage: React.FunctionComponent = () => { - const [showHelperText, setShowHelperText] = React.useState(false); - const [username, setUsername] = React.useState(''); - const [isValidUsername, setIsValidUsername] = React.useState(true); - const [password, setPassword] = React.useState(''); - const [isValidPassword, setIsValidPassword] = React.useState(true); - const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false); + const [showHelperText, setShowHelperText] = useState(false); + const [username, setUsername] = useState(''); + const [isValidUsername, setIsValidUsername] = useState(true); + const [password, setPassword] = useState(''); + const [isValidPassword, setIsValidPassword] = useState(true); + const [isRememberMeChecked, setIsRememberMeChecked] = useState(false); const handleUsernameChange = (_event: React.FormEvent, value: string) => { setUsername(value); diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx index 23ce6b7a56e..ddb32c8c6a6 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import brandImg from '../../assets/PF-IconLogo.svg'; import { LoginFooterItem, @@ -23,14 +23,14 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook- import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; export const LoginPageLanguageSelect: React.FunctionComponent = () => { - const [showHelperText, setShowHelperText] = React.useState(false); - const [username, setUsername] = React.useState(''); - const [isValidUsername, setIsValidUsername] = React.useState(true); - const [password, setPassword] = React.useState(''); - const [isValidPassword, setIsValidPassword] = React.useState(true); - const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false); - const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = React.useState(false); - const [selectedHeaderUtils, setSelectedHeaderUtils] = React.useState('English'); + const [showHelperText, setShowHelperText] = useState(false); + const [username, setUsername] = useState(''); + const [isValidUsername, setIsValidUsername] = useState(true); + const [password, setPassword] = useState(''); + const [isValidPassword, setIsValidPassword] = useState(true); + const [isRememberMeChecked, setIsRememberMeChecked] = useState(false); + const [isHeaderUtilsOpen, setIsHeaderUtilsOpen] = useState(false); + const [selectedHeaderUtils, setSelectedHeaderUtils] = useState('English'); /** i18n object is used to simulate i18n integration of native language translation */ const i18n = { diff --git a/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx index 1abf80bbcaa..88f7bead8f3 100644 --- a/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx +++ b/packages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import brandImg from '../../assets/PF-IconLogo.svg'; import { LoginFooterItem, @@ -18,12 +18,12 @@ import FacebookSquareIcon from '@patternfly/react-icons/dist/esm/icons/facebook- import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon'; export const LoginPageHideShowPassword: React.FunctionComponent = () => { - const [showHelperText, setShowHelperText] = React.useState(false); - const [username, setUsername] = React.useState(''); - const [isValidUsername, setIsValidUsername] = React.useState(true); - const [password, setPassword] = React.useState(''); - const [isValidPassword, setIsValidPassword] = React.useState(true); - const [isRememberMeChecked, setIsRememberMeChecked] = React.useState(false); + const [showHelperText, setShowHelperText] = useState(false); + const [username, setUsername] = useState(''); + const [isValidUsername, setIsValidUsername] = useState(true); + const [password, setPassword] = useState(''); + const [isValidPassword, setIsValidPassword] = useState(true); + const [isRememberMeChecked, setIsRememberMeChecked] = useState(false); const handleUsernameChange = (_event: React.FormEvent, value: string) => { setUsername(value); diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index 105e82ad476..136dc4064f3 100644 --- a/packages/react-core/src/components/Menu/examples/Menu.md +++ b/packages/react-core/src/components/Menu/examples/Menu.md @@ -20,7 +20,7 @@ propComponents: ouia: true --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; diff --git a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx index 9cfd8c6f48f..adbe88058c4 100644 --- a/packages/react-core/src/components/Menu/examples/MenuBasic.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuBasic.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem, Checkbox } from '@patternfly/react-core'; export const MenuBasic: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); - const [isPlain, setIsPlain] = React.useState(false); + const [activeItem, setActiveItem] = useState(0); + const [isPlain, setIsPlain] = useState(false); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx b/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx index a5de6ba02d8..638168bfd0b 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx @@ -1,12 +1,12 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Menu, MenuContent, MenuItem, MenuItemAction, MenuGroup, MenuList, Divider } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; export const MenuWithFavorites: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); - const [favorites, setFavorites] = React.useState([]); + const [activeItem, setActiveItem] = useState(0); + const [favorites, setFavorites] = useState([]); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 83bcbb26024..877406d275e 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -61,12 +61,13 @@ import { MenuToggle } from '@patternfly/react-core'; To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle. ```ts +import { Fragment } from 'react'; import { MenuToggle, Badge } from '@patternfly/react-core'; - + 4 selected}>Count 4} /> - + ``` ### With icons @@ -76,10 +77,11 @@ To add a recognizable icon to a menu toggle, use the `icon` property. The follow For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon). ```ts +import { Fragment } from 'react'; import { MenuToggle } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; - + } variant="primary" @@ -99,7 +101,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; > Icon -; +; ``` ### With avatar and text @@ -109,14 +111,15 @@ You can also pass images into the `icon` property. The following example passes This can be used alongside a text label that provides more context for the image. ```ts +import { Fragment } from 'react'; import { MenuToggle, Avatar } from '@patternfly/react-core'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; - + }>Ned Username{' '} } isExpanded>Ned Username{' '} } isDisabled>Ned Username - + ``` ### Variant styles @@ -124,10 +127,11 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”. ```ts +import { Fragment } from 'react'; import { MenuToggle } from '@patternfly/react-core'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; - + Collapsed{' '} Expanded @@ -135,7 +139,7 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; Disabled - + ``` @@ -146,16 +150,17 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`. If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name. ```ts +import { Fragment } from 'react'; import { MenuToggle } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; - + } variant="plain" aria-label="plain kebab"/> {' '} } variant="plain" isExpanded aria-label="plain expanded kebab"/> {' '} } variant="plain" isDisabled aria-label="disabled plain kebab"/> - + ``` ### Plain toggle with text label @@ -163,9 +168,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle. ```ts +import { Fragment } from 'react'; import { MenuToggle } from '@patternfly/react-core'; - + Disabled {' '} @@ -175,7 +181,7 @@ import { MenuToggle } from '@patternfly/react-core'; Custom text (expanded) - + ``` ### Split toggle with checkbox diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md index 245ec9176b5..9577b2ede69 100644 --- a/packages/react-core/src/components/Modal/examples/Modal.md +++ b/packages/react-core/src/components/Modal/examples/Modal.md @@ -6,7 +6,7 @@ propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter'] ouia: true --- -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon'; diff --git a/packages/react-core/src/components/Modal/examples/ModalBasic.tsx b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx index d5ab9b2b079..7ebec3da305 100644 --- a/packages/react-core/src/components/Modal/examples/ModalBasic.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core'; export const ModalBasic: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx index 53f53e349d2..883594a06c7 100644 --- a/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalCustomFocus.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core'; export const ModalCustomFocus: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx index ae88353ee72..419af47efa8 100644 --- a/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalCustomHeader.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, @@ -15,7 +15,7 @@ import { import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon'; export const ModalCustomHeaderFooter: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx index 8741d4c68a6..97b292605a9 100644 --- a/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core'; import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon'; export const ModalCustomTitleIcon: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx index d464c5f4e1d..174eb56d57c 100644 --- a/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core'; export const ModalCustomWidth: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx b/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx index 730782aaa6e..beccbdd3df6 100644 --- a/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalVariant } from '@patternfly/react-core'; export const ModalNoHeaderFooter: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalSize.tsx b/packages/react-core/src/components/Modal/examples/ModalSize.tsx index caef963c893..9898430d55a 100644 --- a/packages/react-core/src/components/Modal/examples/ModalSize.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalSize.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from '@patternfly/react-core'; export const ModalSize: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); - const [selectedVariant, setSelectedVariant] = React.useState(ModalVariant.small); + const [isModalOpen, setIsModalOpen] = useState(false); + const [selectedVariant, setSelectedVariant] = useState(ModalVariant.small); const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1); const formatSizeVariantName = (variant: string) => capitalize(variant); diff --git a/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx b/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx index d422124089b..d9e13b60229 100644 --- a/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core'; export const ModalTitleIcon: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx b/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx index 99d021475f1..a710ec1baa4 100644 --- a/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core'; export const ModalTopAligned: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx index d92739aa7c6..b84a848cf0d 100644 --- a/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core'; export const ModalWithDescription: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx index 2425c07aab1..1e2104dbb69 100644 --- a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Dropdown, @@ -14,8 +14,8 @@ import { } from '@patternfly/react-core'; export const ModalWithDropdown: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx index 50820630501..14283a69025 100644 --- a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Button, Form, @@ -14,13 +14,13 @@ import { } from '@patternfly/react-core'; export const ModalWithForm: React.FunctionComponent = () => { - const [isModalOpen, setModalOpen] = React.useState(false); - const [nameValue, setNameValue] = React.useState(''); - const [emailValue, setEmailValue] = React.useState(''); - const [addressValue, setAddressValue] = React.useState(''); - const nameLabelHelpRef = React.useRef(null); - const emailLabelHelpRef = React.useRef(null); - const addressLabelHelpRef = React.useRef(null); + const [isModalOpen, setModalOpen] = useState(false); + const [nameValue, setNameValue] = useState(''); + const [emailValue, setEmailValue] = useState(''); + const [addressValue, setAddressValue] = useState(''); + const nameLabelHelpRef = useRef(null); + const emailLabelHelpRef = useRef(null); + const addressLabelHelpRef = useRef(null); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx b/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx index 5d526d9fcdc..3e7a01ce6c0 100644 --- a/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; export const ModalWithHelp: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx b/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx index 1efb9ca744c..ec40b93d228 100644 --- a/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalWithOverflowingContent.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core'; export const ModalWithOverflowingContent: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen); diff --git a/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx b/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx index 6aae60a84d1..cbf745b2316 100644 --- a/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx +++ b/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core'; export const ModalWithWizard: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen); diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md index aae81092837..b4dac4c05c3 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInput.md +++ b/packages/react-core/src/components/NumberInput/examples/NumberInput.md @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-number-input propComponents: ['NumberInput'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx index 18c9ae808cb..888cde28ffb 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnit.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputUnit: React.FunctionComponent = () => { - const [value1, setValue1] = React.useState(90); - const [value2, setValue2] = React.useState(Number((1.0).toFixed(2))); + const [value1, setValue1] = useState(90); + const [value2, setValue2] = useState(Number((1.0).toFixed(2))); const onMinus1 = () => setValue1((value1 || 0) - 1); const onChange1 = (event: React.FormEvent) => { diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx index c52cef28436..8341c9d8dc1 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputUnitThreshold: React.FunctionComponent = () => { - const [value, setValue] = React.useState(0); + const [value, setValue] = useState(0); const minValue = 0; const maxValue = 10; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx index e06ba3c14bc..5735a850ff8 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx @@ -1,11 +1,11 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputVaryingSizes: React.FunctionComponent = () => { - const [input1Value, setInput1Value] = React.useState(1); - const [input2Value, setInput2Value] = React.useState(1234567890); - const [input3Value, setInput3Value] = React.useState(5); - const [input4Value, setInput4Value] = React.useState(12345); + const [input1Value, setInput1Value] = useState(1); + const [input2Value, setInput2Value] = useState(1234567890); + const [input3Value, setInput3Value] = useState(5); + const [input4Value, setInput4Value] = useState(12345); const onChange = ( event: React.FormEvent, diff --git a/packages/react-core/src/components/Pagination/examples/Pagination.md b/packages/react-core/src/components/Pagination/examples/Pagination.md index 2ba27a5a928..569167327a9 100644 --- a/packages/react-core/src/components/Pagination/examples/Pagination.md +++ b/packages/react-core/src/components/Pagination/examples/Pagination.md @@ -6,7 +6,7 @@ propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggl ouia: true --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx index 584b91198ef..957321f57fc 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationIndeterminate.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationIndeterminate: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx b/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx index 6d31193a90c..f68868a9aae 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx @@ -1,10 +1,10 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core'; export const PaginationSticky: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(100); - const [isTopSticky, setIsTopSticky] = React.useState(true); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(100); + const [isTopSticky, setIsTopSticky] = useState(true); const itemCount = 523; const onToggleSticky = () => { diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md index ac021e6ee42..7d5c3500fb0 100644 --- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md +++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepper.md @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-progress-stepper propComponents: ['ProgressStepper', 'ProgressStep'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon'; import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon'; diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx index bd1b04863a1..37ddee7736f 100644 --- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx +++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core'; export const ProgressStepperBasicWithAlignment: React.FunctionComponent = () => { - const [isVertical, setIsVertical] = React.useState(false); - const [isCenterAligned, setIsCenterAligned] = React.useState(false); + const [isVertical, setIsVertical] = useState(false); + const [isCenterAligned, setIsCenterAligned] = useState(false); return ( diff --git a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx index 7f07918d82f..ce3c488f326 100644 --- a/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx +++ b/packages/react-core/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { ProgressStepper, ProgressStep, Checkbox } from '@patternfly/react-core'; export const ProgressStepperCompact: React.FunctionComponent = () => { - const [isVertical, setIsVertical] = React.useState(false); - const [isCenterAligned, setIsCenterAligned] = React.useState(false); + const [isVertical, setIsVertical] = useState(false); + const [isCenterAligned, setIsCenterAligned] = useState(false); return ( diff --git a/packages/react-core/src/components/Radio/examples/Radio.md b/packages/react-core/src/components/Radio/examples/Radio.md index 13e954222c8..89235b8cdcf 100644 --- a/packages/react-core/src/components/Radio/examples/Radio.md +++ b/packages/react-core/src/components/Radio/examples/Radio.md @@ -7,7 +7,7 @@ propComponents: ['Radio'] ouia: true --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/Radio/examples/RadioControlled.tsx b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx index 12a66ad7739..75f2fd822c0 100644 --- a/packages/react-core/src/components/Radio/examples/RadioControlled.tsx +++ b/packages/react-core/src/components/Radio/examples/RadioControlled.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Radio } from '@patternfly/react-core'; export const RadioControlled: React.FunctionComponent = () => { - const [check1, setCheck1] = React.useState(false); + const [check1, setCheck1] = useState(false); const handleChange = () => { setCheck1(true); diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInput.md b/packages/react-core/src/components/SearchInput/examples/SearchInput.md index 0fed2d947bb..0c855fde1f2 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInput.md +++ b/packages/react-core/src/components/SearchInput/examples/SearchInput.md @@ -5,6 +5,7 @@ cssPrefix: 'pf-v6-c-search-input' propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable'] --- +import { useRef, useState } from 'react'; import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons'; ## Examples diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx index 1aa3fd6641d..194b4bc8f40 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputAdvanced.tsx @@ -1,10 +1,11 @@ +import { useState } from 'react'; import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core'; import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon'; export const SearchInputAdvanced: React.FunctionComponent = () => { - const [value, setValue] = React.useState('username:player firstname:john'); - const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = React.useState(false); - const [useCustomFooter, setUseCustomFooter] = React.useState(false); + const [value, setValue] = useState('username:player firstname:john'); + const [useEqualsAsDelimiter, setUseEqualsAsDelimiter] = useState(false); + const [useCustomFooter, setUseCustomFooter] = useState(false); const toggleDelimiter = (checked: boolean) => { setValue(value.replace(/:|=/g, checked ? '=' : ':')); diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx index fff5d272e0b..acef1f03303 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputBasic.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { SearchInput } from '@patternfly/react-core'; export const SearchInputBasic: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); + const [value, setValue] = useState(''); const onChange = (value: string) => { setValue(value); diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx index 076eb4a067c..84b621b3e11 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputFocusSearch.tsx @@ -1,8 +1,9 @@ +import { useRef, useState } from 'react'; import { SearchInput, Button } from '@patternfly/react-core'; export const SearchInputFocusSearch: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const ref: React.MutableRefObject = React.useRef(null); + const [value, setValue] = useState(''); + const ref: React.MutableRefObject = useRef(null); return ( <> diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx index cabb37f388f..315630d00a2 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithExpandable.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { SearchInput } from '@patternfly/react-core'; export const SearchInputWithExpandable: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [isExpanded, setIsExpanded] = React.useState(false); + const [value, setValue] = useState(''); + const [isExpanded, setIsExpanded] = useState(false); const onChange = (value: string) => { setValue(value); diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx index a8725e72cce..b768bca58ab 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { SearchInput } from '@patternfly/react-core'; export const SearchInputWithNavigableOptions: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [resultsCount, setResultsCount] = React.useState(0); - const [currentResult, setCurrentResult] = React.useState(1); + const [value, setValue] = useState(''); + const [resultsCount, setResultsCount] = useState(0); + const [currentResult, setCurrentResult] = useState(1); const onChange = (value: string) => { setValue(value); diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx index 51e4c7f863b..5fe5f7a783e 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithResultCount.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { SearchInput } from '@patternfly/react-core'; export const SearchInputWithResultCount: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [resultsCount, setResultsCount] = React.useState(0); + const [value, setValue] = useState(''); + const [resultsCount, setResultsCount] = useState(0); const onChange = (value: string) => { setValue(value); diff --git a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx index 9f488b4a14e..9b9dd6bf011 100644 --- a/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx +++ b/packages/react-core/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { SearchInput } from '@patternfly/react-core'; export const SearchInputWithSubmitButton: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); + const [value, setValue] = useState(''); return ( { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState('Select a value'); - const [isDisabled, setIsDisabled] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState('Select a value'); + const [isDisabled, setIsDisabled] = useState(false); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Select/examples/SelectValidated.tsx b/packages/react-core/src/components/Select/examples/SelectValidated.tsx index 055a4666b35..68dfa2db495 100644 --- a/packages/react-core/src/components/Select/examples/SelectValidated.tsx +++ b/packages/react-core/src/components/Select/examples/SelectValidated.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Select, SelectOption, @@ -11,9 +11,9 @@ import { } from '@patternfly/react-core'; export const SelectValidated: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState('Select a value'); - const [status, setStatus] = React.useState(); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState('Select a value'); + const [status, setStatus] = useState(); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 0bbf5ada5e7..622f0c9fc35 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -6,7 +6,7 @@ propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', ouia: true --- -import { Fragment } from 'react'; +import { createRef, Fragment, useState } from 'react'; import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; diff --git a/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx b/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx index 9849d03daec..da1de049bb8 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { createRef, Fragment, useState } from 'react'; import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core'; export const TabContentWithBodyPadding: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, @@ -11,9 +11,9 @@ export const TabContentWithBodyPadding: React.FunctionComponent = () => { setActiveTabKey(tabIndex); }; - const contentRef1 = React.createRef(); - const contentRef2 = React.createRef(); - const contentRef3 = React.createRef(); + const contentRef1 = createRef(); + const contentRef2 = createRef(); + const contentRef3 = createRef(); return ( diff --git a/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx b/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx index fa8e6008f00..09cc0a9cd1a 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { createRef, Fragment, useState } from 'react'; import { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core'; export const TabsSeparateContent: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, @@ -11,9 +11,9 @@ export const TabsSeparateContent: React.FunctionComponent = () => { setActiveTabKey(tabIndex); }; - const contentRef1 = React.createRef(); - const contentRef2 = React.createRef(); - const contentRef3 = React.createRef(); + const contentRef1 = createRef(); + const contentRef2 = createRef(); + const contentRef3 = createRef(); return ( diff --git a/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx b/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx index 6e6486ee628..c8a6d648f68 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { createRef, Fragment, useState } from 'react'; import { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core'; export const TabsToggledSeparateContent: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isTab2Hidden, setIsTab2Hidden] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isTab2Hidden, setIsTab2Hidden] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, @@ -12,9 +12,9 @@ export const TabsToggledSeparateContent: React.FunctionComponent = () => { setActiveTabKey(tabIndex); }; - const contentRef1 = React.createRef(); - const contentRef2 = React.createRef(); - const contentRef3 = React.createRef(); + const contentRef1 = createRef(); + const contentRef2 = createRef(); + const contentRef3 = createRef(); return ( diff --git a/packages/react-core/src/components/TextArea/examples/TextArea.md b/packages/react-core/src/components/TextArea/examples/TextArea.md index 9136eb2dff1..e0606d00883 100644 --- a/packages/react-core/src/components/TextArea/examples/TextArea.md +++ b/packages/react-core/src/components/TextArea/examples/TextArea.md @@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-form-control propComponents: ['TextArea'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx index 85ca49cb923..1b9fed1af0a 100644 --- a/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx +++ b/packages/react-core/src/components/TextArea/examples/TextAreaReadOnly.tsx @@ -1,8 +1,8 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Checkbox, TextArea } from '@patternfly/react-core'; export const TextAreaReadOnly: React.FunctionComponent = () => { - const [isPlainChecked, setIsPlainChecked] = React.useState(false); + const [isPlainChecked, setIsPlainChecked] = useState(false); return ( diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md index 2a0f85e197e..89639b516c7 100644 --- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md +++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md @@ -5,7 +5,7 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To section: components --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon'; import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon'; diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx index 936d8ec3c95..155eec1712d 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarComponentManagedToggleGroups.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { MenuToggle, MenuToggleElement, @@ -15,11 +15,11 @@ import { import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; export const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => { - const [inputValue, setInputValue] = React.useState(''); - const [statusIsExpanded, setStatusIsExpanded] = React.useState(false); - const [statusSelected, setStatusSelected] = React.useState(''); - const [riskIsExpanded, setRiskIsExpanded] = React.useState(false); - const [riskSelected, setRiskSelected] = React.useState(''); + const [inputValue, setInputValue] = useState(''); + const [statusIsExpanded, setStatusIsExpanded] = useState(false); + const [statusSelected, setStatusSelected] = useState(''); + const [riskIsExpanded, setRiskIsExpanded] = useState(false); + const [riskSelected, setRiskSelected] = useState(''); const statusOptions = ['New', 'Pending', 'Running', 'Cancelled']; const riskOptions = ['Risk', 'Low', 'Medium', 'High']; diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx index 2ac65257d8f..e91c85c30cd 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarConsumerManagedToggleGroups.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { MenuToggle, MenuToggleElement, @@ -15,12 +15,12 @@ import { import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon'; export const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => { - const [isExpanded, setIsExpanded] = React.useState(false); - const [inputValue, setInputValue] = React.useState(''); - const [statusIsExpanded, setStatusIsExpanded] = React.useState(false); - const [statusSelected, setStatusSelected] = React.useState(''); - const [riskIsExpanded, setRiskIsExpanded] = React.useState(false); - const [riskSelected, setRiskSelected] = React.useState(''); + const [isExpanded, setIsExpanded] = useState(false); + const [inputValue, setInputValue] = useState(''); + const [statusIsExpanded, setStatusIsExpanded] = useState(false); + const [statusSelected, setStatusSelected] = useState(''); + const [riskIsExpanded, setRiskIsExpanded] = useState(false); + const [riskSelected, setRiskSelected] = useState(''); const toggleIsExpanded = () => { setIsExpanded(!isExpanded); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx index 489a0f07fbc..aaa17084d55 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarCustomLabelGroupContent.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Toolbar, ToolbarItem, @@ -20,9 +20,9 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon'; import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon'; export const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => { - const [statusIsExpanded, setStatusIsExpanded] = React.useState(false); - const [riskIsExpanded, setRiskIsExpanded] = React.useState(false); - const [filters, setFilters] = React.useState({ + const [statusIsExpanded, setStatusIsExpanded] = useState(false); + const [riskIsExpanded, setRiskIsExpanded] = useState(false); + const [filters, setFilters] = useState({ risk: ['Low'], status: ['New', 'Pending'] }); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx index 3a97df002ef..18cfd37c8ef 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarGroups.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, MenuToggle, @@ -20,12 +20,12 @@ export const ToolbarGroups: React.FunctionComponent = () => { const secondOptions = ['1', '2', '3']; const thirdOptions = ['I', 'II', 'III']; - const [firstIsExpanded, setFirstIsExpanded] = React.useState(false); - const [firstSelected, setFirstSelected] = React.useState(''); - const [secondIsExpanded, setSecondIsExpanded] = React.useState(false); - const [secondSelected, setSecondSelected] = React.useState(''); - const [thirdIsExpanded, setThirdIsExpanded] = React.useState(false); - const [thirdSelected, setThirdSelected] = React.useState(''); + const [firstIsExpanded, setFirstIsExpanded] = useState(false); + const [firstSelected, setFirstSelected] = useState(''); + const [secondIsExpanded, setSecondIsExpanded] = useState(false); + const [secondSelected, setSecondSelected] = useState(''); + const [thirdIsExpanded, setThirdIsExpanded] = useState(false); + const [thirdSelected, setThirdSelected] = useState(''); const onToggle = (filterName: string) => { switch (filterName) { diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx index 524c4efaffa..73c9ffc14ae 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, ButtonVariant, @@ -32,14 +32,14 @@ export const ToolbarStacked: React.FunctionComponent = () => { const resourceOptions = ['All resources', 'Deployment', 'Pod']; const statusOptions = ['New', 'Pending', 'Running', 'Cancelled']; - const [kebabIsOpen, setKebabIsOpen] = React.useState(false); - const [resourceIsExpanded, setResourceIsExpanded] = React.useState(false); - const [resourceSelected, setResourceSelected] = React.useState(''); - const [statusIsExpanded, setStatusIsExpanded] = React.useState(false); - const [statusSelected, setStatusSelected] = React.useState(''); - const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = React.useState(false); - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [kebabIsOpen, setKebabIsOpen] = useState(false); + const [resourceIsExpanded, setResourceIsExpanded] = useState(false); + const [resourceSelected, setResourceSelected] = useState(''); + const [statusIsExpanded, setStatusIsExpanded] = useState(false); + const [statusSelected, setStatusSelected] = useState(''); + const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = useState(false); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onKebabToggle = () => { setKebabIsOpen(!kebabIsOpen); diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx index 7a1d665c14a..1b8d1292e75 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSticky.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core'; export const ToolbarSticky: React.FunctionComponent = () => { - const [isSticky, setIsSticky] = React.useState(true); - const [showEvenOnly, setShowEvenOnly] = React.useState(true); + const [isSticky, setIsSticky] = useState(true); + const [showEvenOnly, setShowEvenOnly] = useState(true); const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array; diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx index 20a576c2642..84d490ab35e 100644 --- a/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx +++ b/packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Dropdown, @@ -25,14 +25,14 @@ import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const ToolbarWithFilters: React.FunctionComponent = () => { - const [inputValue, setInputValue] = React.useState(''); - const [isStatusExpanded, setIsStatusExpanded] = React.useState(false); - const [isRiskExpanded, setIsRiskExpanded] = React.useState(false); - const [filters, setFilters] = React.useState({ + const [inputValue, setInputValue] = useState(''); + const [isStatusExpanded, setIsStatusExpanded] = useState(false); + const [isRiskExpanded, setIsRiskExpanded] = useState(false); + const [filters, setFilters] = useState({ risk: ['Low'], status: ['New', 'Pending'] }); - const [isKebabOpen, setIsKebabOpen] = React.useState(false); + const [isKebabOpen, setIsKebabOpen] = useState(false); const onInputChange = (newValue: string) => { setInputValue(newValue); diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md index 705f4cf1ea5..17ca0afb371 100644 --- a/packages/react-core/src/components/TreeView/examples/TreeView.md +++ b/packages/react-core/src/components/TreeView/examples/TreeView.md @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-tree-view propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons'; ## Examples diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx index 657a5f769e5..690e0961926 100644 --- a/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx +++ b/packages/react-core/src/components/TreeView/examples/TreeViewSingleSelectable.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core'; export const TreeViewSingleSelectable: React.FunctionComponent = () => { - const [activeItems, setActiveItems] = React.useState(); - const [allExpanded, setAllExpanded] = React.useState(); + const [activeItems, setActiveItems] = useState(); + const [allExpanded, setAllExpanded] = useState(); const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => { // Ignore folders for selection diff --git a/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx b/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx index 37327d088fd..dce5aaae0a4 100644 --- a/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx +++ b/packages/react-core/src/components/TreeView/examples/TreeViewWithMemoization.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { TreeView, Button, TreeViewDataItem } from '@patternfly/react-core'; export const TreeViewWithMemoization: React.FunctionComponent = () => { - const [activeItems, setActiveItems] = React.useState(); - const [allExpanded, setAllExpanded] = React.useState(false); + const [activeItems, setActiveItems] = useState(); + const [allExpanded, setAllExpanded] = useState(false); const onSelect = (_event: React.MouseEvent, treeViewItem: TreeViewDataItem) => { const filtered: TreeViewDataItem[] = []; diff --git a/packages/react-core/src/demos/AlertGroup.md b/packages/react-core/src/demos/AlertGroup.md index 2b2ca4c3d90..9099b7a64fb 100644 --- a/packages/react-core/src/demos/AlertGroup.md +++ b/packages/react-core/src/demos/AlertGroup.md @@ -3,7 +3,7 @@ id: Alert section: components --- -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; diff --git a/packages/react-core/src/demos/BackToTop.md b/packages/react-core/src/demos/BackToTop.md index 8ec7b32ca24..f1b362c9d00 100644 --- a/packages/react-core/src/demos/BackToTop.md +++ b/packages/react-core/src/demos/BackToTop.md @@ -2,6 +2,7 @@ id: Back to top section: components --- +import { useState } from 'react'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; ## Demos diff --git a/packages/react-core/src/demos/Button.md b/packages/react-core/src/demos/Button.md index 4e3634a184a..43db232d7a0 100644 --- a/packages/react-core/src/demos/Button.md +++ b/packages/react-core/src/demos/Button.md @@ -3,6 +3,7 @@ id: Button section: components --- +import { useState } from 'react'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; ## Demos @@ -14,11 +15,12 @@ The following demo shows the intended flow for a button that visually indicates Please note that only the button can be interacted with in this example. The username and password input fields cannot be edited as the focus is on the button behavior. ```ts +import { useState } from 'react'; import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; const ProgressButton: React.FunctionComponent = () => { - const [loginState, setLoginState] = React.useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn'); + const [loginState, setLoginState] = useState<'notLoggedIn' | 'loading' | 'loggedIn'>('notLoggedIn'); return (
diff --git a/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md b/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md index 53e99546ed4..cd9c28db99f 100644 --- a/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md +++ b/packages/react-core/src/demos/CustomMenus/ApplicationLauncher.md @@ -18,6 +18,8 @@ propComponents: ] --- +import { cloneElement, Fragment, useRef, useState } from 'react'; + import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; import brandImg from '../assets/PF-IconLogo.svg'; diff --git a/packages/react-core/src/demos/CustomMenus/ContextSelector.md b/packages/react-core/src/demos/CustomMenus/ContextSelector.md index 2f3fb252a98..998c60fae4f 100644 --- a/packages/react-core/src/demos/CustomMenus/ContextSelector.md +++ b/packages/react-core/src/demos/CustomMenus/ContextSelector.md @@ -19,6 +19,7 @@ propComponents: ] --- +import { useRef, useState } from 'react'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; As the context selector component is now deprecated, a context selector may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [dropdown](/components/menus/dropdown) component that is built off of menu. diff --git a/packages/react-core/src/demos/CustomMenus/CustomMenus.md b/packages/react-core/src/demos/CustomMenus/CustomMenus.md index f369d1dc50f..dd86ce5edaf 100644 --- a/packages/react-core/src/demos/CustomMenus/CustomMenus.md +++ b/packages/react-core/src/demos/CustomMenus/CustomMenus.md @@ -4,6 +4,8 @@ section: components subsection: menus --- +import { cloneElement, Fragment, useRef, useState } from 'react'; + import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon'; diff --git a/packages/react-core/src/demos/CustomMenus/OptionsMenu.md b/packages/react-core/src/demos/CustomMenus/OptionsMenu.md index d68e28fd488..9287ae5d523 100644 --- a/packages/react-core/src/demos/CustomMenus/OptionsMenu.md +++ b/packages/react-core/src/demos/CustomMenus/OptionsMenu.md @@ -6,6 +6,7 @@ source: react-demos propComponents: ['MenuToggle', 'Divider', 'Select', 'SelectList', 'SelectOption', 'SelectGroup'] --- +import { useRef, useState } from 'react'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; As the `` component is now deprecated, an options menu may now be built using the new suite of menu components. This is showcased in the following demo, which uses the new [select](/components/menus/select) component that is built off of menu. diff --git a/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx index 5a020ccf17a..91ca53adc86 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { MenuToggle, MenuItemAction, Select, SelectGroup, SelectList, SelectOption } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon'; @@ -5,9 +6,9 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; export const ActionsMenuDemo: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selectedItems, setSelectedItems] = React.useState([]); - const menuRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [selectedItems, setSelectedItems] = useState([]); + const menuRef = useRef(null); const onSelect = (event: React.MouseEvent | undefined, value: string | number | undefined) => { if (typeof value === 'string' || typeof value === 'undefined') { diff --git a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx index 71d533d5c40..b5e998d4d10 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/ApplicationLauncherDemo.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { cloneElement, Fragment, useRef, useState } from 'react'; import { MenuToggle, MenuSearch, @@ -17,11 +17,11 @@ import brandImg from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg'; const MockLink: React.FunctionComponent = ({ to, ...props }: any) => ; export const ApplicationLauncherDemo: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [refFullOptions, setRefFullOptions] = React.useState(); - const [favorites, setFavorites] = React.useState([]); - const [filteredIds, setFilteredIds] = React.useState(['*']); - const menuRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [refFullOptions, setRefFullOptions] = useState(); + const [favorites, setFavorites] = useState([]); + const [filteredIds, setFilteredIds] = useState(['*']); + const menuRef = useRef(null); const onToggleClick = () => { setTimeout(() => { @@ -123,8 +123,8 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => { const filteredCopy = items .map((group) => { if (group.type === DropdownGroup) { - const filteredGroup = React.cloneElement(group, { - children: React.cloneElement(group.props.children, { + const filteredGroup = cloneElement(group, { + children: cloneElement(group.props.children, { children: group.props.children.props.children.filter((child) => { if (filteredIds.includes(child.props.value)) { return child; @@ -140,7 +140,7 @@ export const ApplicationLauncherDemo: React.FunctionComponent = () => { keepDivider = false; } } else if (group.type === DropdownList) { - const filteredGroup = React.cloneElement(group, { + const filteredGroup = cloneElement(group, { children: group.props.children.filter((child) => { if (filteredIds.includes(child.props.value)) { return child; diff --git a/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx index 8507d1ec6a7..f2ea4b329e8 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { MenuToggle, MenuFooter, @@ -52,12 +53,12 @@ export const ContextSelectorDemo: React.FunctionComponent = () => { 'AWS 2', 'Azure 2' ]; - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState(typeof items[0] === 'string' ? items[0] : items[0].text); - const [filteredItems, setFilteredItems] = React.useState(items); - const [searchInputValue, setSearchInputValue] = React.useState(''); - const menuRef = React.useRef(null); - const menuFooterBtnRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState(typeof items[0] === 'string' ? items[0] : items[0].text); + const [filteredItems, setFilteredItems] = useState(items); + const [searchInputValue, setSearchInputValue] = useState(''); + const menuRef = useRef(null); + const menuFooterBtnRef = useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx index 2e231a5d809..bc54b2a30e9 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/DateSelectDemo.tsx @@ -1,9 +1,10 @@ +import { useRef, useState } from 'react'; import { MenuToggle, Select, SelectList, SelectOption, Timestamp } from '@patternfly/react-core'; export const DateSelectDemo: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState(0); - const menuRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState(0); + const menuRef = useRef(undefined); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx index 692e8c5dcee..c747176f886 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { MenuToggle, Menu, @@ -18,13 +19,13 @@ interface MenuHeightsType { } export const DrilldownMenuDemo: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [activeMenu, setActiveMenu] = React.useState('rootMenu'); - const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); - const [drilldownPath, setDrilldownPath] = React.useState([]); - const [menuHeights, setMenuHeights] = React.useState({}); - const toggleRef = React.useRef(null); - const menuRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [activeMenu, setActiveMenu] = useState('rootMenu'); + const [menuDrilledIn, setMenuDrilledIn] = useState([]); + const [drilldownPath, setDrilldownPath] = useState([]); + const [menuHeights, setMenuHeights] = useState({}); + const toggleRef = useRef(null); + const menuRef = useRef(null); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx index 4f2835c2d1c..2f4a217d69e 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/FlyoutDemo.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { MenuToggle, Menu, MenuContent, MenuList, MenuItem, MenuContainer } from '@patternfly/react-core'; /* eslint-disable no-console */ @@ -30,9 +31,9 @@ const FlyoutMenu: React.FunctionComponent = ({ depth, children ); export const FlyoutDemo: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); - const toggleRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const menuRef = useRef(null); + const toggleRef = useRef(null); let curFlyout = ; for (let i = 2; i < 14; i++) { diff --git a/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx index 2e7c8d22ddf..685eb6ae7ac 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/InlineSearchFilterMenuDemo.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { Menu, MenuList, @@ -12,11 +13,11 @@ import { } from '@patternfly/react-core'; 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(undefined); - const menuRef = React.useRef(undefined); + const [activeItem, setActiveItem] = useState(0); + const [input, setInput] = useState(''); + const [isOpen, setIsOpen] = useState(false); + const toggleRef = useRef(undefined); + const menuRef = useRef(undefined); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; diff --git a/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx index c1a98935e91..eb79376f9db 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/OptionsMenuDemo.tsx @@ -1,9 +1,10 @@ +import { useRef, useState } from 'react'; import { MenuToggle, Divider, Select, SelectList, SelectOption, SelectGroup } from '@patternfly/react-core'; export const OptionsMenuDemo: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState(''); - const menuRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState(''); + const menuRef = useRef(undefined); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx b/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx index b27009be367..ea6f96204bd 100644 --- a/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx +++ b/packages/react-core/src/demos/CustomMenus/examples/TreeViewMenuDemo.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { MenuToggle, Panel, @@ -10,10 +11,10 @@ import { } from '@patternfly/react-core'; export const TreeViewMenuDemo: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [checkedItems, setCheckedItems] = React.useState([]); - const toggleRef = React.useRef(null); - const menuRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [checkedItems, setCheckedItems] = useState([]); + const toggleRef = useRef(null); + const menuRef = useRef(undefined); const statusOptions: TreeViewDataItem[] = [ { diff --git a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx index 64c4b338a07..23793746390 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListActionable.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Button, Content, @@ -19,8 +20,8 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; export const DataListActionable: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [isDeleted, setIsDeleted] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [isDeleted, setIsDeleted] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx index ba15f83f179..503d731bdd1 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Content, @@ -33,11 +33,11 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DataListExpandableControlInToolbar: React.FunctionComponent = () => { - const [expanded, setExpanded] = React.useState(['ex-toggle1', 'ex-toggle3']); - const [isOpen1, setIsOpen1] = React.useState(false); - const [isOpen2, setIsOpen2] = React.useState(false); - const [isOpen3, setIsOpen3] = React.useState(false); - const [allExpanded, setAllExpanded] = React.useState(false); + const [expanded, setExpanded] = useState(['ex-toggle1', 'ex-toggle3']); + const [isOpen1, setIsOpen1] = useState(false); + const [isOpen2, setIsOpen2] = useState(false); + const [isOpen3, setIsOpen3] = useState(false); + const [allExpanded, setAllExpanded] = useState(false); const onToggleAll = () => { setAllExpanded((prevAllExpanded) => !prevAllExpanded); diff --git a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx index 1a1bcbec5f0..df6916d24c6 100644 --- a/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx +++ b/packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Content, @@ -31,9 +31,9 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData'; export const DataListStaticBottomPagination: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(10); - const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10)); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const [paginatedRows, setPaginatedRows] = useState(rows.slice(0, 10)); const handleSetPage = ( _evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/demos/DataListDemo.md b/packages/react-core/src/demos/DataListDemo.md index 0449f8cdaff..e44a1ac57a4 100644 --- a/packages/react-core/src/demos/DataListDemo.md +++ b/packages/react-core/src/demos/DataListDemo.md @@ -3,6 +3,8 @@ id: Data list section: components --- +import { Fragment, useState } from 'react'; + import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; diff --git a/packages/react-core/src/demos/DatePicker/DatePicker.md b/packages/react-core/src/demos/DatePicker/DatePicker.md index 990b2086684..53329fd0b42 100644 --- a/packages/react-core/src/demos/DatePicker/DatePicker.md +++ b/packages/react-core/src/demos/DatePicker/DatePicker.md @@ -14,11 +14,12 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from This is intended to be used as a filter. After selecting a start date, the next date is automatically selected. ```js +import { useState } from 'react'; import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core'; DateRangePicker = () => { - const [from, setFrom] = React.useState(); - const [to, setTo] = React.useState(); + const [from, setFrom] = useState(); + const [to, setTo] = useState(); const toValidator = (date) => isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date'; diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md index 683c2a2f97f..11593da2ac2 100644 --- a/packages/react-core/src/demos/DateTimePicker.md +++ b/packages/react-core/src/demos/DateTimePicker.md @@ -4,6 +4,7 @@ section: components subsection: date-and-time --- +import { useState } from 'react'; import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outlined-calendar-alt-icon'; import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon'; @@ -20,11 +21,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen ### Date and time range picker ```js +import { useState } from 'react'; import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core'; DateTimeRangePicker = () => { - const [from, setFrom] = React.useState(); - const [to, setTo] = React.useState(); + const [from, setFrom] = useState(); + const [to, setTo] = useState(); const toValidator = (date) => { return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from) diff --git a/packages/react-core/src/demos/DescriptionList/DescriptionList.md b/packages/react-core/src/demos/DescriptionList/DescriptionList.md index 613d7f0d5c2..5d7c75ec2a6 100644 --- a/packages/react-core/src/demos/DescriptionList/DescriptionList.md +++ b/packages/react-core/src/demos/DescriptionList/DescriptionList.md @@ -3,6 +3,7 @@ id: Description list section: components --- +import { useRef, useState } from 'react'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; diff --git a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx index 8ed5d3ac6b5..3af49469ed4 100644 --- a/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx +++ b/packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { Gallery, Content, @@ -20,9 +21,9 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const DescriptionListInDrawer: React.FunctionComponent = () => { - const drawerRef = React.useRef(null); - const btnRef = React.useRef(null); - const [isExpanded, setIsExpanded] = React.useState(true); + const drawerRef = useRef(null); + const btnRef = useRef(null); + const [isExpanded, setIsExpanded] = useState(true); const onExpand = () => { drawerRef.current && drawerRef.current.focus(); diff --git a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md index 440a7ade1ff..892f15342d5 100644 --- a/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md +++ b/packages/react-core/src/demos/ExpandableSection/ExpandableSection.md @@ -3,6 +3,8 @@ id: Expandable section section: components --- +import { useState } from 'react'; + ## Demos diff --git a/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx index 85a5cf1a3d7..185495469f1 100644 --- a/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx +++ b/packages/react-core/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { ExpandableSection, ExpandableSectionVariant, Truncate } from '@patternfly/react-core'; export const ExpandableTextDemo: React.FunctionComponent = () => { - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); diff --git a/packages/react-core/src/demos/Filters/FilterDemos.md b/packages/react-core/src/demos/Filters/FilterDemos.md index 1b882d7da62..4c8f7aa328a 100644 --- a/packages/react-core/src/demos/Filters/FilterDemos.md +++ b/packages/react-core/src/demos/Filters/FilterDemos.md @@ -3,7 +3,7 @@ id: Filters section: patterns --- -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { Popper, SearchInput, diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx index 9245ca36b94..0f7c16c4096 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { SearchInput, Toolbar, @@ -61,9 +61,9 @@ const columnNames = { export const FilterAttributeSearch: React.FunctionComponent = () => { // Set up repo filtering - const [searchValue, setSearchValue] = React.useState(''); - const [locationSelections, setLocationSelections] = React.useState([]); - const [statusSelection, setStatusSelection] = React.useState(''); + const [searchValue, setSearchValue] = useState(''); + const [locationSelections, setLocationSelections] = useState([]); + const [statusSelection, setStatusSelection] = useState(''); const onSearchChange = (value: string) => { setSearchValue(value); @@ -97,7 +97,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example - const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const [selectedRepoNames, setSelectedRepoNames] = useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => setSelectedRepoNames((prevSelected) => { const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); @@ -110,8 +110,8 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); // To allow shift+click to select/deselect multiple rows - const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const [shifting, setShifting] = React.useState(false); + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected @@ -128,7 +128,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { setRecentSelectedRowIndex(rowIndex); }; - React.useEffect(() => { + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { setShifting(true); @@ -150,11 +150,11 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { }, []); // Set up bulk selection menu - const bulkSelectMenuRef = React.useRef(null); - const bulkSelectToggleRef = React.useRef(null); - const bulkSelectContainerRef = React.useRef(null); + const bulkSelectMenuRef = useRef(null); + const bulkSelectToggleRef = useRef(null); + const bulkSelectContainerRef = useRef(null); - const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState(false); + const [isBulkSelectOpen, setIsBulkSelectOpen] = useState(false); const handleBulkSelectClickOutside = (event: MouseEvent) => { if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) { @@ -177,7 +177,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleBulkSelectMenuKeys); window.addEventListener('click', handleBulkSelectClickOutside); return () => { @@ -266,10 +266,10 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { ); // Set up status single select - const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState(false); - const statusToggleRef = React.useRef(null); - const statusMenuRef = React.useRef(null); - const statusContainerRef = React.useRef(null); + const [isStatusMenuOpen, setIsStatusMenuOpen] = useState(false); + const statusToggleRef = useRef(null); + const statusMenuRef = useRef(null); + const statusContainerRef = useRef(null); const handleStatusMenuKeys = (event: KeyboardEvent) => { if (isStatusMenuOpen && statusMenuRef.current?.contains(event.target as Node)) { @@ -286,7 +286,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleStatusMenuKeys); window.addEventListener('click', handleStatusClickOutside); return () => { @@ -358,10 +358,10 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { ); // Set up location checkbox select - const [isLocationMenuOpen, setIsLocationMenuOpen] = React.useState(false); - const locationToggleRef = React.useRef(null); - const locationMenuRef = React.useRef(null); - const locationContainerRef = React.useRef(null); + const [isLocationMenuOpen, setIsLocationMenuOpen] = useState(false); + const locationToggleRef = useRef(null); + const locationMenuRef = useRef(null); + const locationContainerRef = useRef(null); const handleLocationMenuKeys = (event: KeyboardEvent) => { if (isLocationMenuOpen && locationMenuRef.current?.contains(event.target as Node)) { @@ -378,7 +378,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleLocationMenuKeys); window.addEventListener('click', handleLocationClickOutside); return () => { @@ -471,11 +471,11 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { ); // Set up attribute selector - const [activeAttributeMenu, setActiveAttributeMenu] = React.useState<'Servers' | 'Status' | 'Location'>('Servers'); - const [isAttributeMenuOpen, setIsAttributeMenuOpen] = React.useState(false); - const attributeToggleRef = React.useRef(null); - const attributeMenuRef = React.useRef(null); - const attributeContainerRef = React.useRef(null); + const [activeAttributeMenu, setActiveAttributeMenu] = useState<'Servers' | 'Status' | 'Location'>('Servers'); + const [isAttributeMenuOpen, setIsAttributeMenuOpen] = useState(false); + const attributeToggleRef = useRef(null); + const attributeMenuRef = useRef(null); + const attributeContainerRef = useRef(null); const handleAttribueMenuKeys = (event: KeyboardEvent) => { if (!isAttributeMenuOpen) { @@ -498,7 +498,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleAttribueMenuKeys); window.addEventListener('click', handleAttributeClickOutside); return () => { diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx index 021714d4efa..957be9a910b 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { Menu, MenuContent, @@ -52,7 +52,7 @@ const columnNames = { export const FilterCheckboxSelect: React.FunctionComponent = () => { // Set up repo filtering - const [selections, setSelections] = React.useState([]); + const [selections, setSelections] = useState([]); const onFilter = (repo: Repository) => { if (selections.length === 0) { return true; @@ -75,7 +75,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example - const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const [selectedRepoNames, setSelectedRepoNames] = useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => setSelectedRepoNames((prevSelected) => { const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); @@ -88,8 +88,8 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); // To allow shift+click to select/deselect multiple rows - const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const [shifting, setShifting] = React.useState(false); + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected @@ -106,7 +106,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { setRecentSelectedRowIndex(rowIndex); }; - React.useEffect(() => { + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { setShifting(true); @@ -128,11 +128,11 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { }, []); // Set up bulk selection menu - const bulkSelectMenuRef = React.useRef(null); - const bulkSelectToggleRef = React.useRef(null); - const bulkSelectContainerRef = React.useRef(null); + const bulkSelectMenuRef = useRef(null); + const bulkSelectToggleRef = useRef(null); + const bulkSelectContainerRef = useRef(null); - const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState(false); + const [isBulkSelectOpen, setIsBulkSelectOpen] = useState(false); const handleBulkSelectClickOutside = (event: MouseEvent) => { if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) { @@ -155,7 +155,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleBulkSelectMenuKeys); window.addEventListener('click', handleBulkSelectClickOutside); return () => { @@ -233,10 +233,10 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { ); // Set up checkbox select menu - const [isOpen, setIsOpen] = React.useState(false); - const toggleRef = React.useRef(null); - const menuRef = React.useRef(null); - const containerRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const toggleRef = useRef(null); + const menuRef = useRef(null); + const containerRef = useRef(null); const handleMenuKeys = (event: KeyboardEvent) => { if (isOpen && menuRef.current?.contains(event.target as Node)) { @@ -253,7 +253,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx index 712112a67ce..f96c9eec76b 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { Toolbar, ToolbarContent, @@ -60,8 +60,8 @@ const columnNames = { export const FilterFaceted: React.FunctionComponent = () => { // Set up repo filtering - const [locationSelections, setLocationSelections] = React.useState([]); - const [statusSelections, setStatusSelections] = React.useState([]); + const [locationSelections, setLocationSelections] = useState([]); + const [statusSelections, setStatusSelections] = useState([]); const onFilter = (repo: Repository) => { // Search status with status selection @@ -80,7 +80,7 @@ export const FilterFaceted: React.FunctionComponent = () => { // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example - const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const [selectedRepoNames, setSelectedRepoNames] = useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => setSelectedRepoNames((prevSelected) => { const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); @@ -93,8 +93,8 @@ export const FilterFaceted: React.FunctionComponent = () => { const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); // To allow shift+click to select/deselect multiple rows - const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const [shifting, setShifting] = React.useState(false); + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected @@ -111,7 +111,7 @@ export const FilterFaceted: React.FunctionComponent = () => { setRecentSelectedRowIndex(rowIndex); }; - React.useEffect(() => { + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { setShifting(true); @@ -133,11 +133,11 @@ export const FilterFaceted: React.FunctionComponent = () => { }, []); // Set up bulk selection menu - const bulkSelectMenuRef = React.useRef(null); - const bulkSelectToggleRef = React.useRef(null); - const bulkSelectContainerRef = React.useRef(null); + const bulkSelectMenuRef = useRef(null); + const bulkSelectToggleRef = useRef(null); + const bulkSelectContainerRef = useRef(null); - const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState(false); + const [isBulkSelectOpen, setIsBulkSelectOpen] = useState(false); const handleBulkSelectClickOutside = (event: MouseEvent) => { if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) { @@ -160,7 +160,7 @@ export const FilterFaceted: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleBulkSelectMenuKeys); window.addEventListener('click', handleBulkSelectClickOutside); return () => { @@ -239,10 +239,10 @@ export const FilterFaceted: React.FunctionComponent = () => { ); // Set up location checkbox select - const [isOpen, setIsOpen] = React.useState(false); - const toggleRef = React.useRef(null); - const menuRef = React.useRef(null); - const containerRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const toggleRef = useRef(null); + const menuRef = useRef(null); + const containerRef = useRef(null); const handleKeys = (event: KeyboardEvent) => { if (isOpen && menuRef.current?.contains(event.target as Node)) { @@ -259,7 +259,7 @@ export const FilterFaceted: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleKeys); window.addEventListener('click', handleClickOutside); return () => { diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx index 1ac0d5a859c..b4610509a51 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { Toolbar, ToolbarContent, @@ -59,8 +59,8 @@ const columnNames = { export const FilterMixedSelectGroup: React.FunctionComponent = () => { // Set up repo filtering - const [locationSelections, setLocationSelections] = React.useState([]); - const [statusSelection, setStatusSelection] = React.useState(''); + const [locationSelections, setLocationSelections] = useState([]); + const [statusSelection, setStatusSelection] = useState(''); const onFilter = (repo: Repository) => { // Search status with status selection @@ -77,7 +77,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example - const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const [selectedRepoNames, setSelectedRepoNames] = useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => setSelectedRepoNames((prevSelected) => { const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); @@ -90,8 +90,8 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); // To allow shift+click to select/deselect multiple rows - const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const [shifting, setShifting] = React.useState(false); + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected @@ -108,7 +108,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { setRecentSelectedRowIndex(rowIndex); }; - React.useEffect(() => { + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { setShifting(true); @@ -130,11 +130,11 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { }, []); // Set up bulk selection menu - const bulkSelectMenuRef = React.useRef(null); - const bulkSelectToggleRef = React.useRef(null); - const bulkSelectContainerRef = React.useRef(null); + const bulkSelectMenuRef = useRef(null); + const bulkSelectToggleRef = useRef(null); + const bulkSelectContainerRef = useRef(null); - const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState(false); + const [isBulkSelectOpen, setIsBulkSelectOpen] = useState(false); const handleBulkSelectClickOutside = (event: MouseEvent) => { if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) { @@ -157,7 +157,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleBulkSelectMenuKeys); window.addEventListener('click', handleBulkSelectClickOutside); return () => { @@ -236,10 +236,10 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { ); // Set up status single select - const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState(false); - const statusToggleRef = React.useRef(null); - const statusMenuRef = React.useRef(null); - const statusContainerRef = React.useRef(null); + const [isStatusMenuOpen, setIsStatusMenuOpen] = useState(false); + const statusToggleRef = useRef(null); + const statusMenuRef = useRef(null); + const statusContainerRef = useRef(null); const handleStatusMenuKeys = (event: KeyboardEvent) => { if (isStatusMenuOpen && statusMenuRef.current?.contains(event.target as Node)) { @@ -256,7 +256,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleStatusMenuKeys); window.addEventListener('click', handleStatusClickOutside); return () => { @@ -329,10 +329,10 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { ); // Set up location checkbox select - const [isLocationMenuOpen, setIsLocationMenuOpen] = React.useState(false); - const locationToggleRef = React.useRef(null); - const locationMenuRef = React.useRef(null); - const locationContainerRef = React.useRef(null); + const [isLocationMenuOpen, setIsLocationMenuOpen] = useState(false); + const locationToggleRef = useRef(null); + const locationMenuRef = useRef(null); + const locationContainerRef = useRef(null); const handleLocationMenuKeys = (event: KeyboardEvent) => { if (isLocationMenuOpen && locationMenuRef.current?.contains(event.target as Node)) { @@ -349,7 +349,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleLocationMenuKeys); window.addEventListener('click', handleLocationClickOutside); return () => { diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx index df56da4a35e..40320bbf21c 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { Toolbar, ToolbarContent, @@ -57,8 +57,8 @@ const columnNames = { export const FilterSameSelectGroup: React.FunctionComponent = () => { // Set up repo filtering - const [locationSelection, setLocationSelection] = React.useState('All locations'); - const [statusSelection, setStatusSelection] = React.useState('All statuses'); + const [locationSelection, setLocationSelection] = useState('All locations'); + const [statusSelection, setStatusSelection] = useState('All statuses'); const onFilter = (repo: Repository) => { // Search status with status selection @@ -78,7 +78,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example - const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const [selectedRepoNames, setSelectedRepoNames] = useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => setSelectedRepoNames((prevSelected) => { const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); @@ -91,8 +91,8 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); // To allow shift+click to select/deselect multiple rows - const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const [shifting, setShifting] = React.useState(false); + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected @@ -109,7 +109,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { setRecentSelectedRowIndex(rowIndex); }; - React.useEffect(() => { + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { setShifting(true); @@ -131,11 +131,11 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { }, []); // Set up bulk selection menu - const bulkSelectMenuRef = React.useRef(null); - const bulkSelectToggleRef = React.useRef(null); - const bulkSelectContainerRef = React.useRef(null); + const bulkSelectMenuRef = useRef(null); + const bulkSelectToggleRef = useRef(null); + const bulkSelectContainerRef = useRef(null); - const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState(false); + const [isBulkSelectOpen, setIsBulkSelectOpen] = useState(false); const handleBulkSelectClickOutside = (event: MouseEvent) => { if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) { @@ -158,7 +158,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleBulkSelectMenuKeys); window.addEventListener('click', handleBulkSelectClickOutside); return () => { @@ -237,10 +237,10 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { ); // Set up status single select - const [isStatusMenuOpen, setIsStatusMenuOpen] = React.useState(false); - const statusToggleRef = React.useRef(null); - const statusMenuRef = React.useRef(null); - const statusContainerRef = React.useRef(null); + const [isStatusMenuOpen, setIsStatusMenuOpen] = useState(false); + const statusToggleRef = useRef(null); + const statusMenuRef = useRef(null); + const statusContainerRef = useRef(null); const handleStatusMenuKeys = (event: KeyboardEvent) => { if (isStatusMenuOpen && statusMenuRef.current?.contains(event.target as Node)) { @@ -257,7 +257,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleStatusMenuKeys); window.addEventListener('click', handleStatusClickOutside); return () => { @@ -331,10 +331,10 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { ); // Set up location checkbox select - const [isLocationMenuOpen, setIsLocationMenuOpen] = React.useState(false); - const locationToggleRef = React.useRef(null); - const locationMenuRef = React.useRef(null); - const locationContainerRef = React.useRef(null); + const [isLocationMenuOpen, setIsLocationMenuOpen] = useState(false); + const locationToggleRef = useRef(null); + const locationMenuRef = useRef(null); + const locationContainerRef = useRef(null); const handleLocationMenuKeys = (event: KeyboardEvent) => { if (isLocationMenuOpen && locationMenuRef.current?.contains(event.target as Node)) { @@ -351,7 +351,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleLocationMenuKeys); window.addEventListener('click', handleLocationClickOutside); return () => { diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx index bc075d1f47e..0d52f805997 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { SearchInput, Toolbar, @@ -56,7 +56,7 @@ const columnNames = { export const FilterSearchInput: React.FunctionComponent = () => { // Set up repo filtering - const [searchValue, setSearchValue] = React.useState(''); + const [searchValue, setSearchValue] = useState(''); const onSearchChange = (value: string) => { setSearchValue(value); @@ -81,7 +81,7 @@ export const FilterSearchInput: React.FunctionComponent = () => { // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example - const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const [selectedRepoNames, setSelectedRepoNames] = useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => setSelectedRepoNames((prevSelected) => { const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); @@ -94,8 +94,8 @@ export const FilterSearchInput: React.FunctionComponent = () => { const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); // To allow shift+click to select/deselect multiple rows - const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const [shifting, setShifting] = React.useState(false); + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected @@ -112,7 +112,7 @@ export const FilterSearchInput: React.FunctionComponent = () => { setRecentSelectedRowIndex(rowIndex); }; - React.useEffect(() => { + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { setShifting(true); @@ -134,11 +134,11 @@ export const FilterSearchInput: React.FunctionComponent = () => { }, []); // Set up bulk selection menu - const bulkSelectMenuRef = React.useRef(null); - const bulkSelectToggleRef = React.useRef(null); - const bulkSelectContainerRef = React.useRef(null); + const bulkSelectMenuRef = useRef(null); + const bulkSelectToggleRef = useRef(null); + const bulkSelectContainerRef = useRef(null); - const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState(false); + const [isBulkSelectOpen, setIsBulkSelectOpen] = useState(false); const handleBulkSelectClickOutside = (event: MouseEvent) => { if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) { @@ -161,7 +161,7 @@ export const FilterSearchInput: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleBulkSelectMenuKeys); window.addEventListener('click', handleBulkSelectClickOutside); return () => { diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx index ce84e4c8c47..0511982670e 100644 --- a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx +++ b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import { Menu, MenuContent, @@ -49,7 +49,7 @@ const columnNames = { export const FilterSingleSelect: React.FunctionComponent = () => { // Set up repo filtering - const [searchValue, setSearchValue] = React.useState(''); + const [searchValue, setSearchValue] = useState(''); const onFilter = (repo: Repository) => { if (searchValue === 'all') { return true; @@ -70,7 +70,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => { // In this example, selected rows are tracked by the repo names from each row. This could be any unique identifier. // This is to prevent state from being based on row order index in case we later add sorting. const isRepoSelectable = (repo: Repository) => repo.name !== 'a'; // Arbitrary logic for this example - const [selectedRepoNames, setSelectedRepoNames] = React.useState([]); + const [selectedRepoNames, setSelectedRepoNames] = useState([]); const setRepoSelected = (repo: Repository, isSelecting = true) => setSelectedRepoNames((prevSelected) => { const otherSelectedRepoNames = prevSelected.filter((r) => r !== repo.name); @@ -83,8 +83,8 @@ export const FilterSingleSelect: React.FunctionComponent = () => { const isRepoSelected = (repo: Repository) => selectedRepoNames.includes(repo.name); // To allow shift+click to select/deselect multiple rows - const [recentSelectedRowIndex, setRecentSelectedRowIndex] = React.useState(null); - const [shifting, setShifting] = React.useState(false); + const [recentSelectedRowIndex, setRecentSelectedRowIndex] = useState(null); + const [shifting, setShifting] = useState(false); const onSelectRepo = (repo: Repository, rowIndex: number, isSelecting: boolean) => { // If the user is shift + selecting the checkboxes, then all intermediate checkboxes should be selected @@ -101,7 +101,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => { setRecentSelectedRowIndex(rowIndex); }; - React.useEffect(() => { + useEffect(() => { const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Shift') { setShifting(true); @@ -123,11 +123,11 @@ export const FilterSingleSelect: React.FunctionComponent = () => { }, []); // Set up bulk selection menu - const bulkSelectMenuRef = React.useRef(null); - const bulkSelectToggleRef = React.useRef(null); - const bulkSelectContainerRef = React.useRef(null); + const bulkSelectMenuRef = useRef(null); + const bulkSelectToggleRef = useRef(null); + const bulkSelectContainerRef = useRef(null); - const [isBulkSelectOpen, setIsBulkSelectOpen] = React.useState(false); + const [isBulkSelectOpen, setIsBulkSelectOpen] = useState(false); const handleBulkSelectClickOutside = (event: MouseEvent) => { if (isBulkSelectOpen && !bulkSelectMenuRef.current?.contains(event.target as Node)) { @@ -150,7 +150,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleBulkSelectMenuKeys); window.addEventListener('click', handleBulkSelectClickOutside); return () => { @@ -228,11 +228,11 @@ export const FilterSingleSelect: React.FunctionComponent = () => { ); // Set up single select menu & state - const [isOpen, setIsOpen] = React.useState(false); - const [menuSelection, setMenuSelection] = React.useState('all'); - const toggleRef = React.useRef(null); - const menuRef = React.useRef(null); - const containerRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [menuSelection, setMenuSelection] = useState('all'); + const toggleRef = useRef(null); + const menuRef = useRef(null); + const containerRef = useRef(null); const handleMenuKeys = (event: KeyboardEvent) => { if (isOpen && menuRef.current?.contains(event.target as Node)) { @@ -249,7 +249,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { diff --git a/packages/react-core/src/demos/HelperText.md b/packages/react-core/src/demos/HelperText.md index 5e2823e067e..f404d8783ec 100644 --- a/packages/react-core/src/demos/HelperText.md +++ b/packages/react-core/src/demos/HelperText.md @@ -3,6 +3,7 @@ id: Helper text section: components --- +import { useEffect, useState } from 'react'; import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; diff --git a/packages/react-core/src/demos/JumpLinks.md b/packages/react-core/src/demos/JumpLinks.md index 60255b256d1..7db34498e23 100644 --- a/packages/react-core/src/demos/JumpLinks.md +++ b/packages/react-core/src/demos/JumpLinks.md @@ -3,6 +3,7 @@ id: Jump links section: components --- +import { useEffect, useState } from 'react'; import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead'; import breadcrumbStyles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; @@ -21,6 +22,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them. ```js isFullscreen +import { useEffect, useState } from 'react'; import { PageSection, JumpLinks, @@ -41,13 +43,13 @@ import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/mas ScrollspyH2 = () => { const headings = [1, 2, 3, 4, 5]; - const [isVertical, setIsVertical] = React.useState(true); - const [offsetHeight, setOffsetHeight] = React.useState(10); + const [isVertical, setIsVertical] = useState(true); + const [offsetHeight, setOffsetHeight] = useState(10); const offsetForPadding = 10; let masthead; // Update offset based on the masthead and jump links nav heights. - React.useEffect(() => { + useEffect(() => { masthead = document.getElementsByClassName(mastheadStyles.masthead)[0]; if (isVertical) { diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md index 5c3a21d9ade..19c6e8e07b5 100644 --- a/packages/react-core/src/demos/Masthead.md +++ b/packages/react-core/src/demos/Masthead.md @@ -3,6 +3,7 @@ id: Masthead section: components --- +import { cloneElement, Fragment, useEffect, useRef, useState } from 'react'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; diff --git a/packages/react-core/src/demos/MultipleFileUploadDemos.md b/packages/react-core/src/demos/MultipleFileUploadDemos.md index 711dfbfdbed..913a837598e 100644 --- a/packages/react-core/src/demos/MultipleFileUploadDemos.md +++ b/packages/react-core/src/demos/MultipleFileUploadDemos.md @@ -3,7 +3,7 @@ id: Multiple file upload section: components subsection: file-upload --- - +import { useEffect, useState } from 'react'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md index 29d2d2bf3ec..8e9ff804270 100644 --- a/packages/react-core/src/demos/Nav.md +++ b/packages/react-core/src/demos/Nav.md @@ -3,6 +3,7 @@ id: Navigation section: components --- +import { Fragment, useState } from 'react'; 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'; diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md index 90771bdb133..35e40326218 100644 --- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md +++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md @@ -3,6 +3,8 @@ id: Notification drawer section: components --- +import { Fragment, useRef, useState } from 'react'; + import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx index bc9843fe35a..ff49e4a0e62 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Avatar, Brand, @@ -56,31 +56,31 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg'; export const NotificationDrawerBasic: React.FunctionComponent = () => { - const drawerRef = React.useRef(null); + const drawerRef = useRef(null); - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); interface UnreadMap { [notificationId: string]: boolean; } - const [activeItem, setActiveItem] = React.useState(0); - const [isUnreadMap, setIsUnreadMap] = React.useState({ + const [activeItem, setActiveItem] = useState(0); + const [isUnreadMap, setIsUnreadMap] = useState({ 'notification-1': true, 'notification-2': true, 'notification-3': false, 'notification-4': false }); - const [shouldShowNotifications, setShouldShowNotifications] = React.useState(true); + const [shouldShowNotifications, setShouldShowNotifications] = useState(true); interface ActionsMenu { [toggleId: string]: boolean; } - const [isActionsMenuOpen, setIsActionsMenuOpen] = React.useState({}); + const [isActionsMenuOpen, setIsActionsMenuOpen] = useState({}); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx index 3f6a64fe35b..51358f47ced 100644 --- a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx +++ b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Avatar, Brand, @@ -58,14 +58,14 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg'; export const NotificationDrawerGrouped: React.FunctionComponent = () => { - const drawerRef = React.useRef(null); + const drawerRef = useRef(null); - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = React.useState(false); - const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = React.useState(true); - const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = React.useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const [firstDrawerGroupExpanded, setFirstDrawerGroupExpanded] = useState(false); + const [secondDrawerGroupExpanded, setSecondDrawerGroupExpanded] = useState(true); + const [thirdDrawerGroupExpanded, setThirdDrawerGroupExpanded] = useState(false); interface UnreadMap { [groupName: string]: { @@ -73,8 +73,8 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { } | null; } - const [activeItem, setActiveItem] = React.useState(0); - const [isUnreadMap, setIsUnreadMap] = React.useState({ + const [activeItem, setActiveItem] = useState(0); + const [isUnreadMap, setIsUnreadMap] = useState({ 'group-1': { 'notification-5': true, 'notification-6': true @@ -86,13 +86,13 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => { 'group-3': null }); - const [shouldShowNotifications, setShouldShowNotifications] = React.useState(true); + const [shouldShowNotifications, setShouldShowNotifications] = useState(true); interface ActionsMenu { [toggleId: string]: boolean; } - const [isActionsMenuOpen, setIsActionsMenuOpen] = React.useState({}); + const [isActionsMenuOpen, setIsActionsMenuOpen] = useState({}); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md index 191b5f3aa1a..5600490267f 100644 --- a/packages/react-core/src/demos/Page.md +++ b/packages/react-core/src/demos/Page.md @@ -3,6 +3,7 @@ id: Page section: components --- +import { useState } from 'react'; 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'; diff --git a/packages/react-core/src/demos/PasswordGenerator.md b/packages/react-core/src/demos/PasswordGenerator.md index 7f850499797..40035f9b432 100644 --- a/packages/react-core/src/demos/PasswordGenerator.md +++ b/packages/react-core/src/demos/PasswordGenerator.md @@ -3,6 +3,7 @@ id: Password generator section: patterns --- +import { useEffect, useRef, useState } from 'react'; import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon'; import EyeIcon from '@patternfly/react-icons/dist/esm/icons/eye-icon'; import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon'; @@ -12,6 +13,7 @@ import EyeSlashIcon from '@patternfly/react-icons/dist/esm/icons/eye-slash-icon' ### Provide a generated password ```ts +import { useEffect, useRef, useState } from 'react'; import { InputGroup, InputGroupItem, @@ -38,14 +40,14 @@ const PasswordGenerator: React.FunctionComponent = () => { } return retVal; }; - const [password, setPassword] = React.useState(''); - const [generatedPassword, setGeneratedPassword] = React.useState(generatePassword()); - const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false); - const [passwordHidden, setPasswordHidden] = React.useState(true); - const searchInputRef = React.useRef(null); - const autocompleteRef = React.useRef(null); + const [password, setPassword] = useState(''); + const [generatedPassword, setGeneratedPassword] = useState(generatePassword()); + const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false); + const [passwordHidden, setPasswordHidden] = useState(true); + const searchInputRef = useRef(null); + const autocompleteRef = .useRef(null); - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { diff --git a/packages/react-core/src/demos/PasswordStrength.md b/packages/react-core/src/demos/PasswordStrength.md index 1b4661059e1..009bf0bd667 100644 --- a/packages/react-core/src/demos/PasswordStrength.md +++ b/packages/react-core/src/demos/PasswordStrength.md @@ -3,6 +3,7 @@ id: Password strength section: patterns --- +import { useState } from 'react'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; diff --git a/packages/react-core/src/demos/PrimaryDetail.md b/packages/react-core/src/demos/PrimaryDetail.md index 5d99ca0f484..a3040769493 100644 --- a/packages/react-core/src/demos/PrimaryDetail.md +++ b/packages/react-core/src/demos/PrimaryDetail.md @@ -3,6 +3,7 @@ id: Primary-detail section: patterns --- +import { Fragment, useState } from 'react'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; diff --git a/packages/react-core/src/demos/ProgressDemo.md b/packages/react-core/src/demos/ProgressDemo.md index ee82845d395..d7c40237f61 100644 --- a/packages/react-core/src/demos/ProgressDemo.md +++ b/packages/react-core/src/demos/ProgressDemo.md @@ -2,7 +2,7 @@ id: Progress section: components --- - +import { useState } from 'react'; import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; ## Demos @@ -10,11 +10,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib ### Basic ```js +import { useState } from 'react'; import { Progress, Button, Stack, StackItem } from '@patternfly/react-core'; import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; ProgressStepperDemo = () => { - const [currentValue, setCurrentValue] = React.useState(0); + const [currentValue, setCurrentValue] = useState(0); const onProgressUpdate = (nextValue) => { setCurrentValue(nextValue); @@ -48,10 +49,11 @@ ProgressStepperDemo = () => { Sometimes a progress bar should only show increases to progress state. In this case, before the next value is set it should be checked against the current progress. The `Decrease progress` button attempts to set a lower progress value, simulating an update to a progress state that isn't desired, but won't change the progress state due to this check. ```js +import { useState } from 'react'; import { Progress, Button, Stack, StackItem } from '@patternfly/react-core'; ProgressStepperDemo = () => { - const [currentValue, setCurrentValue] = React.useState(0); + const [currentValue, setCurrentValue] = useState(0); const onProgressUpdate = (nextValue) => { if (nextValue > currentValue) { diff --git a/packages/react-core/src/demos/ProgressStepperDemo.md b/packages/react-core/src/demos/ProgressStepperDemo.md index e157c0bdaaa..d14fe7b2327 100644 --- a/packages/react-core/src/demos/ProgressStepperDemo.md +++ b/packages/react-core/src/demos/ProgressStepperDemo.md @@ -3,6 +3,7 @@ id: Progress stepper section: components --- +import { useState } from 'react'; import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; ## Demos @@ -10,11 +11,12 @@ import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessib ### Basic ```js +import { useState } from 'react'; import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core'; import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; ProgressStepperDemo = () => { - const [currentStep, setCurrentStep] = React.useState(0); + const [currentStep, setCurrentStep] = useState(0); const steps = [ { title: 'First step', id: 'step1' }, diff --git a/packages/react-core/src/demos/RTL/RTL.md b/packages/react-core/src/demos/RTL/RTL.md index 9c921ab5bae..a2c97ba4aeb 100644 --- a/packages/react-core/src/demos/RTL/RTL.md +++ b/packages/react-core/src/demos/RTL/RTL.md @@ -3,6 +3,7 @@ id: Right-to-left section: patterns --- +import { Fragment, useEffect, useState } from 'react'; import translationsEn from "./examples/translations.en.json"; import translationsHe from "./examples/translations.he.json"; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; diff --git a/packages/react-core/src/demos/SearchInput/SearchInput.md b/packages/react-core/src/demos/SearchInput/SearchInput.md index e3cc48b1ac9..b51a1d458c6 100644 --- a/packages/react-core/src/demos/SearchInput/SearchInput.md +++ b/packages/react-core/src/demos/SearchInput/SearchInput.md @@ -2,7 +2,7 @@ id: Search input section: components --- - +import { useEffect, useRef, useState } from 'react'; import { Button, Card, @@ -32,19 +32,20 @@ This demo handles building the advanced search form using the composable Menu, a It also demonstrates wiring up the appropriate keyboard interactions, focus management, and general event handling. ```js +import { useEffect, useRef, useState } from 'react'; import { Menu, MenuContent, MenuItem, MenuList, Popper, SearchInput } from '@patternfly/react-core'; import { words } from './words.js'; SearchAutocomplete = () => { - const [value, setValue] = React.useState(''); - const [hint, setHint] = React.useState(''); - const [autocompleteOptions, setAutocompleteOptions] = React.useState([]); + const [value, setValue] = useState(''); + const [hint, setHint] = useState(''); + const [autocompleteOptions, setAutocompleteOptions] = useState([]); - const [isAutocompleteOpen, setIsAutocompleteOpen] = React.useState(false); + const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(false); - const searchInputRef = React.useRef(null); - const autocompleteRef = React.useRef(null); + const searchInputRef = useRef(null); + const autocompleteRef = useRef(null); const onClear = () => { setValue(''); @@ -154,7 +155,7 @@ SearchAutocomplete = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { @@ -206,6 +207,7 @@ keyboard interactions, focus management, and general event handling. Note: This demo and its handling of 'date within' and a date picker is modeled after the gmail advanced search form. ```js +import { useEffect, useRef, useState } from 'react'; import { ActionGroup, Button, @@ -230,20 +232,20 @@ import { } from '@patternfly/react-core'; AdvancedComposableSearchInput = () => { - const [value, setValue] = React.useState(''); - const [hasWords, setHasWords] = React.useState(''); - const [dateWithin, setDateWithin] = React.useState('1 day'); - const [date, setDate] = React.useState(); + const [value, setValue] = useState(''); + const [hasWords, setHasWords] = useState(''); + const [dateWithin, setDateWithin] = useState('1 day'); + const [date, setDate] = useState(); - const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = React.useState(false); - const [isDateWithinOpen, setIsDateWithinOpen] = React.useState(false); + const [isAdvancedSearchOpen, setIsAdvancedSearchOpen] = useState(false); + const [isDateWithinOpen, setIsDateWithinOpen] = useState(false); - const isInitialMount = React.useRef(true); - const firstAttrRef = React.useRef(null); - const searchInputRef = React.useRef(null); - const advancedSearchPaneRef = React.useRef(null); - const dateWithinToggleRef = React.useRef(undefined); - const dateWithinMenuRef = React.useRef(undefined); + const isInitialMount = useRef(true); + const firstAttrRef = useRef(null); + const searchInputRef = useRef(null); + const advancedSearchPaneRef = useRef(null); + const dateWithinToggleRef = useRef(undefined); + const dateWithinMenuRef = useRef(undefined); const onClear = () => { setValue(''); @@ -264,7 +266,7 @@ AdvancedComposableSearchInput = () => { // After initial page load, whenever the advanced search menu is opened, the browser focus should be placed on the // first advanced search form input. Whenever the advanced search menu is closed, the browser focus should // be returned to the search input. - React.useEffect(() => { + useEffect(() => { if (isInitialMount.current) { isInitialMount.current = false; } else { @@ -320,7 +322,7 @@ AdvancedComposableSearchInput = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md index 160e445fb42..846321906e0 100644 --- a/packages/react-core/src/demos/Tabs.md +++ b/packages/react-core/src/demos/Tabs.md @@ -3,6 +3,7 @@ id: Tabs section: components --- +import { Fragment, useCallback, useRef, useState } from 'react'; import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon'; @@ -21,6 +22,7 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard ### Open tabs ```js isFullscreen +import { useState } from 'react'; import { PageSection, PageBreadcrumb, @@ -47,7 +49,7 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; TabsOpenDemo = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = (event, tabIndex) => { @@ -210,6 +212,7 @@ TabsOpenDemo = () => { ### Open tabs with secondary tabs ```js isFullscreen +import { useState } from 'react'; import { PageSection, PageBreadcrumb, @@ -236,8 +239,8 @@ import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; TabsOpenWithSecondaryTabsDemo = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [activeTabKeySecondary, setActiveTabKeySecondary] = React.useState(10); + const [activeTabKey, setActiveTabKey] = useState(0); + const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10); // Toggle currently active tab const handleTabClick = (event, tabIndex) => { diff --git a/packages/react-core/src/demos/TextInputGroupDemo.md b/packages/react-core/src/demos/TextInputGroupDemo.md index bb781892b8e..683bfc1585c 100644 --- a/packages/react-core/src/demos/TextInputGroupDemo.md +++ b/packages/react-core/src/demos/TextInputGroupDemo.md @@ -3,6 +3,7 @@ id: Text input group section: components --- +import { useEffect, useRef, useState } from 'react'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md index 5ed799c61cd..2ab2ced8931 100644 --- a/packages/react-core/src/demos/Toolbar.md +++ b/packages/react-core/src/demos/Toolbar.md @@ -3,6 +3,7 @@ id: Toolbar section: components --- +import { Fragment, useState } from 'react'; import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon'; import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon'; diff --git a/packages/react-core/src/demos/Wizard/WizardDemo.md b/packages/react-core/src/demos/Wizard/WizardDemo.md index cf8e3003160..fda29f8b4ea 100644 --- a/packages/react-core/src/demos/Wizard/WizardDemo.md +++ b/packages/react-core/src/demos/Wizard/WizardDemo.md @@ -4,6 +4,8 @@ section: components source: react-demos --- +import { Fragment, useRef, useState } from 'react'; + import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; diff --git a/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx index 27e7f399814..458b75f6474 100644 --- a/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx +++ b/packages/react-core/src/demos/examples/Card/CardAggregateStatus.tsx @@ -1,5 +1,5 @@ /* eslint-disable camelcase */ -import { Fragment, type JSX } from 'react'; +import { Fragment } from 'react'; import { Card, CardBody, @@ -28,7 +28,7 @@ interface CardData { [attribute: string]: { title: string; content: { - icon: JSX.Element; + icon: React.JSX.Element; count?: number; status?: string; subtitle?: string; diff --git a/packages/react-core/src/demos/examples/Card/CardEventsView.tsx b/packages/react-core/src/demos/examples/Card/CardEventsView.tsx index bc7507b58ab..45b2c702a64 100644 --- a/packages/react-core/src/demos/examples/Card/CardEventsView.tsx +++ b/packages/react-core/src/demos/examples/Card/CardEventsView.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; /* eslint-disable camelcase */ import { Card, @@ -29,7 +29,7 @@ import flex from '@patternfly/react-styles/css/utilities/Flex/flex'; import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min'; export const CardEventsView: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const selectItems = ( diff --git a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx index 3104c575dff..f4ae6d7b064 100644 --- a/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx +++ b/packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardHeader, @@ -24,8 +25,8 @@ import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardHorizontalGrid: React.FunctionComponent = () => { - const [isCardExpanded, setIsCardExpanded] = React.useState(false); - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + const [isCardExpanded, setIsCardExpanded] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); const onCardExpand = () => { setIsCardExpanded(!isCardExpanded); diff --git a/packages/react-core/src/demos/examples/Card/CardLogView.tsx b/packages/react-core/src/demos/examples/Card/CardLogView.tsx index 67d327fb9a4..83917f3f071 100644 --- a/packages/react-core/src/demos/examples/Card/CardLogView.tsx +++ b/packages/react-core/src/demos/examples/Card/CardLogView.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; /* eslint-disable camelcase */ import { Card, @@ -24,7 +24,7 @@ import flex from '@patternfly/react-styles/css/utilities/Flex/flex'; import l_gallery_GridTemplateColumns_min from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min'; export const CardLogView: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const selectItems = ( diff --git a/packages/react-core/src/demos/examples/Card/CardNested.tsx b/packages/react-core/src/demos/examples/Card/CardNested.tsx index a4f67d9e748..40c3fb9973f 100644 --- a/packages/react-core/src/demos/examples/Card/CardNested.tsx +++ b/packages/react-core/src/demos/examples/Card/CardNested.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardHeader, @@ -17,10 +18,10 @@ import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; export const CardNested: React.FunctionComponent = () => { - const [isCardExpanded1, onCardExpand1] = React.useState(true); - const [isCardExpanded2, onCardExpand2] = React.useState(false); - const [isCardExpanded3, onCardExpand3] = React.useState(false); - const [isToggleOnRight, onCheckClick] = React.useState(false); + const [isCardExpanded1, onCardExpand1] = useState(true); + const [isCardExpanded2, onCardExpand2] = useState(false); + const [isCardExpanded3, onCardExpand3] = useState(false); + const [isToggleOnRight, onCheckClick] = useState(false); return ( <> diff --git a/packages/react-core/src/demos/examples/Card/CardStatus.tsx b/packages/react-core/src/demos/examples/Card/CardStatus.tsx index 9535877cf19..c8b9d36760d 100644 --- a/packages/react-core/src/demos/examples/Card/CardStatus.tsx +++ b/packages/react-core/src/demos/examples/Card/CardStatus.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; /* eslint-disable camelcase */ import { Alert, @@ -29,12 +30,12 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/excla import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle'; export const CardStatus: React.FunctionComponent = () => { - const [drawerExpanded, setDrawerExpanded] = React.useState(false); + const [drawerExpanded, setDrawerExpanded] = useState(false); const handleDrawerToggleClick = () => { setDrawerExpanded(!drawerExpanded); }; - const [rowsExpanded, setRowsExpanded] = React.useState([false, false, false]); + const [rowsExpanded, setRowsExpanded] = useState([false, false, false]); const handleToggleExpand = (_: any, rowIndex: number) => { const newRowsExpanded = [...rowsExpanded]; newRowsExpanded[rowIndex] = !rowsExpanded[rowIndex]; diff --git a/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx b/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx index 5b8ed3fe328..c54736922bf 100644 --- a/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx +++ b/packages/react-core/src/demos/examples/Card/CardStatusTabbed.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardBody, @@ -62,7 +63,7 @@ const descriptionListData = [ ]; export const CardStatusTabbed: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); const handleTabClick = (_e: React.MouseEvent, tabIndex: string | number) => { setActiveTabKey(Number(tabIndex)); }; diff --git a/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx b/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx index 9d0a9058f1c..0e9599ffde4 100644 --- a/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx +++ b/packages/react-core/src/demos/examples/Card/CardWithAccordion.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardTitle, @@ -19,7 +20,7 @@ import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; import accessibility from '@patternfly/react-styles/css/utilities/Accessibility/accessibility'; export const CardWithAccordion: React.FunctionComponent = () => { - const [openCPU, setOpenCPU] = React.useState('cpu1'); + const [openCPU, setOpenCPU] = useState('cpu1'); return ( diff --git a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx index ef3dac71b23..f6307721257 100644 --- a/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx +++ b/packages/react-core/src/demos/examples/DateTimePicker/DateTimePicker.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { CalendarMonth, InputGroup, @@ -15,10 +16,10 @@ import OutlinedCalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/outl import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon'; export const DateTimePicker: React.FunctionComponent = () => { - const [isCalendarOpen, setIsCalendarOpen] = React.useState(false); - const [isTimeOpen, setIsTimeOpen] = React.useState(false); - const [valueDate, setValueDate] = React.useState('MM-DD-YYYY'); - const [valueTime, setValueTime] = React.useState('HH:MM'); + const [isCalendarOpen, setIsCalendarOpen] = useState(false); + const [isTimeOpen, setIsTimeOpen] = useState(false); + const [valueDate, setValueDate] = useState('MM-DD-YYYY'); + const [valueTime, setValueTime] = useState('HH:MM'); const times = Array.from(new Array(10), (_, i) => i + 8); const defaultTime = '0:00'; const dateFormat = (date: Date) => diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx index 4784660a5d0..7037178545c 100644 --- a/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx +++ b/packages/react-core/src/demos/examples/HelperText/HelperTextDynamic.tsx @@ -1,14 +1,15 @@ +import { useEffect, useState } from 'react'; import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core'; export const HelperTextDynamic: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [inputValidation, setInputValidation] = React.useState('default'); + const [value, setValue] = useState(''); + const [inputValidation, setInputValidation] = useState('default'); const handleInputChange = (_event, inputValue: string) => { setValue(inputValue); }; - React.useEffect(() => { + useEffect(() => { if (value === '') { setInputValidation('default'); } else if (value === 'johndoe') { diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx index 350e1513a2a..cd79b7998cb 100644 --- a/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx +++ b/packages/react-core/src/demos/examples/HelperText/HelperTextStatic.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core'; export const HelperTextStaticText: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); + const [value, setValue] = useState(''); const handleInputChange = (_event, inputValue: string) => { setValue(inputValue); diff --git a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx index a244299ad22..2cfa7782fc0 100644 --- a/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx +++ b/packages/react-core/src/demos/examples/HelperText/HelperTextStaticTextDynamicVariant.tsx @@ -1,14 +1,15 @@ +import { useEffect, useState } from 'react'; import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core'; export const HelperTextStaticTextDynamicVariant: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [inputValidation, setInputValidation] = React.useState({ + const [value, setValue] = useState(''); + const [inputValidation, setInputValidation] = useState({ ruleLength: 'indeterminate', ruleCharacterTypes: 'indeterminate' }); const { ruleLength, ruleCharacterTypes } = inputValidation; - React.useEffect(() => { + useEffect(() => { let lengthVariant = ruleLength; let typeVariant = ruleCharacterTypes; diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx index 3c44e13ee93..17e783f7ed5 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { Avatar, Brand, @@ -49,14 +50,14 @@ interface NavOnSelectProps { } export const MastheadWithHorizontalNav: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(0); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [activeItem, setActiveItem] = useState(0); - const [isOpen, setIsOpen] = React.useState(false); - const menuRef = React.useRef(null); - const toggleRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const menuRef = useRef(null); + const toggleRef = useRef(null); const onNavSelect = (_event: React.FormEvent, selectedItem: NavOnSelectProps) => { typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId); @@ -104,7 +105,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx index 849a3ac4b5b..b1a705abf0a 100644 --- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx +++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { cloneElement, Fragment, useEffect, useRef, useState } from 'react'; import { Avatar, Brand, @@ -66,17 +66,17 @@ interface NavOnSelectProps { } export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(1); - - const [isOpen, setIsOpen] = React.useState(false); - const [refFullOptions, setRefFullOptions] = React.useState(); - const [favorites, setFavorites] = React.useState([]); - const [filteredIds, setFilteredIds] = React.useState(['*']); - const menuRef = React.useRef(null); - const toggleRef = React.useRef(null); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [activeItem, setActiveItem] = useState(1); + + const [isOpen, setIsOpen] = useState(false); + const [refFullOptions, setRefFullOptions] = useState(); + const [favorites, setFavorites] = useState([]); + const [filteredIds, setFilteredIds] = useState(['*']); + const menuRef = useRef(null); + const toggleRef = useRef(null); const onNavSelect = (_event: React.FormEvent, selectedItem: NavOnSelectProps) => { typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId); @@ -138,7 +138,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = setIsOpen(!isOpen); }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); @@ -249,8 +249,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = const filteredCopy = items .map((group) => { if (group.type === MenuGroup) { - const filteredGroup = React.cloneElement(group, { - children: React.cloneElement(group.props.children, { + const filteredGroup = cloneElement(group, { + children: cloneElement(group.props.children, { children: group.props.children.props.children.filter((child) => { if (filteredIds.includes(child.props.itemId)) { return child; @@ -266,7 +266,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent = keepDivider = false; } } else if (group.type === MenuList) { - const filteredGroup = React.cloneElement(group, { + const filteredGroup = cloneElement(group, { children: group.props.children.filter((child) => { if (filteredIds.includes(child.props.itemId)) { return child; diff --git a/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx b/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx index 87a1a6593bb..644f280ab94 100644 --- a/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx +++ b/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { FileRejection } from 'react-dropzone'; import { MultipleFileUpload, @@ -20,12 +21,12 @@ interface readFile { } export const MultipleFileUploadBasic: React.FunctionComponent = () => { - const [isHorizontal, setIsHorizontal] = React.useState(false); - const [currentFiles, setCurrentFiles] = React.useState([]); - const [readFileData, setReadFileData] = React.useState([]); - const [showStatus, setShowStatus] = React.useState(false); - const [statusIcon, setStatusIcon] = React.useState('inProgress'); - const [modalText, setModalText] = React.useState(''); + const [isHorizontal, setIsHorizontal] = useState(false); + const [currentFiles, setCurrentFiles] = useState([]); + const [readFileData, setReadFileData] = useState([]); + const [showStatus, setShowStatus] = useState(false); + const [statusIcon, setStatusIcon] = useState('inProgress'); + const [modalText, setModalText] = useState(''); // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed if (!showStatus && currentFiles.length > 0) { @@ -33,7 +34,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => { } // determine the icon that should be shown for the overall status list - React.useEffect(() => { + useEffect(() => { if (readFileData.length < currentFiles.length) { setStatusIcon('inProgress'); } else if (readFileData.every((file) => file.loadResult === 'success')) { diff --git a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx index 842d3a94f2f..e9000dfc679 100644 --- a/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavDrilldown.tsx @@ -1,4 +1,4 @@ -import { type JSX, useState } from 'react'; +import { useState } from 'react'; import { Page, @@ -30,7 +30,7 @@ function getNavLayer(menuId: string): number { return 1; } -const subMenuTwo: JSX.Element = ( +const subMenuTwo: React.JSX.Element = ( SubMenu 1 - Item 1 @@ -47,7 +47,7 @@ const subMenuTwo: JSX.Element = ( ); -const subMenuOne: JSX.Element = ( +const subMenuOne: React.JSX.Element = ( Item 1 diff --git a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx index 995ae65a193..6bad93ef126 100644 --- a/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavExpandable.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Card, CardBody, @@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; export const NavExpandableDemo: React.FunctionComponent = () => { - const [activeGroup, setActiveGroup] = React.useState('grp-1'); - const [activeItem, setActiveItem] = React.useState('grp-1_itm-1'); + const [activeGroup, setActiveGroup] = useState('grp-1'); + const [activeItem, setActiveItem] = useState('grp-1_itm-1'); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx index 6280c123a41..d15b479163d 100644 --- a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Avatar, Brand, @@ -44,13 +45,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; export const NavFlyout: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [isMobileView, setIsMobileView] = React.useState(false); - const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true); - const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(0); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [isMobileView, setIsMobileView] = useState(false); + const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true); + const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false); + const [activeItem, setActiveItem] = useState(0); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx index 5dbcb4b6f68..c2e23680e18 100644 --- a/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavGrouped.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Content, Nav, @@ -12,7 +13,7 @@ import { import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; export const NavGrouped: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState('grp-1_itm-1'); + const [activeItem, setActiveItem] = useState('grp-1_itm-1'); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx index fa33c705104..ff4e71e9714 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Avatar, Brand, @@ -42,10 +42,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; export const NavHorizontal: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(0); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [activeItem, setActiveItem] = useState(0); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx index 7dc2be2087f..5cdfab5b77a 100644 --- a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Avatar, Brand, @@ -46,11 +46,11 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper'; export const NavHorizontalWithSubnav: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(0); - const [activeSubNavItem, setActiveSubNavItem] = React.useState(7); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [activeItem, setActiveItem] = useState(0); + const [activeSubNavItem, setActiveSubNavItem] = useState(7); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx index 4168a592c6a..f6b5aba16d4 100644 --- a/packages/react-core/src/demos/examples/Nav/NavManual.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavManual.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Avatar, Brand, @@ -46,13 +46,13 @@ import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.sv import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; export const NavManual: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [isMobileView, setIsMobileView] = React.useState(false); - const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = React.useState(true); - const [isSidebarOpenMobile, setIsSidebarOpenMobile] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(0); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [isMobileView, setIsMobileView] = useState(false); + const [isSidebarOpenDesktop, setIsSidebarOpenDesktop] = useState(true); + const [isSidebarOpenMobile, setIsSidebarOpenMobile] = useState(false); + const [activeItem, setActiveItem] = useState(0); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx index fd986b91398..c4ec34cdf8e 100644 --- a/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavWithSubnav.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Card, CardBody, @@ -19,8 +19,8 @@ import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/Dashbo import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; export const NavWithSubnav: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); - const [activeSubNavItem, setActiveSubNavItem] = React.useState(7); + const [activeItem, setActiveItem] = useState(0); + const [activeSubNavItem, setActiveSubNavItem] = useState(7); const onNavSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx index 4476f067db4..287944bb03e 100644 --- a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx +++ b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Avatar, Brand, @@ -53,12 +54,12 @@ interface NavOnSelectProps { } export const PageStickySectionBreadcrumb: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [isContextSelectorOpen, setIsContextSelectorOpen] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(1); - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false); + const [activeItem, setActiveItem] = useState(1); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx index c835d384d5e..8e47b5bcfab 100644 --- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx +++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Avatar, Brand, @@ -53,10 +54,10 @@ interface NavOnSelectProps { } export const PageStickySectionBreadcrumb: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(1); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [activeItem, setActiveItem] = useState(1); const onNavSelect = (_event: React.FormEvent, selectedItem: NavOnSelectProps) => { typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId); diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx index bbfb7eb7c74..0ee2e666e23 100644 --- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx +++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Avatar, Brand, @@ -56,10 +57,10 @@ interface NavOnSelectProps { } export const PageStickySectionGroupAlternate: React.FunctionComponent = () => { - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false); - const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(1); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false); + const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false); + const [activeItem, setActiveItem] = useState(1); const onNavSelect = (_event: React.FormEvent, selectedItem: NavOnSelectProps) => { typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId); diff --git a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx b/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx index f67c816cb2d..343096fdd3a 100644 --- a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx +++ b/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx @@ -1,4 +1,4 @@ -import { type JSX, useState } from 'react'; +import { useState } 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'; @@ -8,7 +8,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => { type HelperTextItemVariant = 'default' | 'indeterminate' | 'warning' | 'success' | 'error'; interface PassStrength { variant: HelperTextItemVariant; - icon: JSX.Element; + icon: React.JSX.Element; text: string; } diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx index e503158f882..33854cee367 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Badge, Button, @@ -53,20 +53,20 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap import { data } from '@patternfly/react-core/src/demos/CardView/examples/CardViewData.jsx'; export const PrimaryDetailCardView: React.FunctionComponent = () => { - const [totalItemCount, setTotalItemCount] = React.useState(10); - const [cardData, setCardData] = React.useState(data); - const [isChecked, setIsChecked] = React.useState(false); - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const [selectedItems, setSelectedItems] = React.useState([]); - const [areAllSelected, setAreAllSelected] = React.useState(false); - const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = React.useState(false); - const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = React.useState(false); - const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = React.useState(false); - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(10); - const [filters, setFilters] = React.useState>({ products: [] }); - const [state, setState] = React.useState({}); - const [activeCard, setActiveCard] = React.useState(-1); + const [totalItemCount, setTotalItemCount] = useState(10); + const [cardData, setCardData] = useState(data); + const [isChecked, setIsChecked] = useState(false); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const [selectedItems, setSelectedItems] = useState([]); + const [areAllSelected, setAreAllSelected] = useState(false); + const [splitButtonDropdownIsOpen, setSplitButtonDropdownIsOpen] = useState(false); + const [isLowerToolbarDropdownOpen, setIsLowerToolbarDropdownOpen] = useState(false); + const [isLowerToolbarKebabDropdownOpen, setIsLowerToolbarKebabDropdownOpen] = useState(false); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); + const [filters, setFilters] = useState>({ products: [] }); + const [state, setState] = useState({}); + const [activeCard, setActiveCard] = useState(-1); interface ProductType { id: number; diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx index d990b6a30fc..116dc8a11c7 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, ButtonVariant, @@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [ ]; export const PrimaryDetailContentPadding: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(''); - const [inputValue, setInputValue] = React.useState(''); - const [statusIsOpen, setStatusIsOpen] = React.useState(false); - const [statusSelected, setStatusSelected] = React.useState('Status'); - const [riskIsOpen, setRiskIsOpen] = React.useState(false); - const [riskSelected, setRiskSelected] = React.useState('Risk'); - const [selectedDataListItemId, setSelectedDataListItemId] = React.useState(''); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(''); + const [inputValue, setInputValue] = useState(''); + const [statusIsOpen, setStatusIsOpen] = useState(false); + const [statusSelected, setStatusSelected] = useState('Status'); + const [riskIsOpen, setRiskIsOpen] = useState(false); + const [riskSelected, setRiskSelected] = useState('Risk'); + const [selectedDataListItemId, setSelectedDataListItemId] = useState(''); const onStatusSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => { setStatusSelected(value); diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx index 38c1eb3e0c1..4421b582829 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailDataListInCard.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Card, Content, @@ -32,10 +32,10 @@ import { import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; export const PrimaryDetailDataListInCard: React.FunctionComponent = () => { - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1); - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); - const [selectedDataListItemId, setSelectedDataListItemId] = React.useState('dataListItem1'); - const [isExpanded, setIsExpanded] = React.useState(false); + const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + const [selectedDataListItemId, setSelectedDataListItemId] = useState('dataListItem1'); + const [isExpanded, setIsExpanded] = useState(false); const onDropdownToggle = () => { setIsDropdownOpen(!isDropdownOpen); diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx index 8254b7855f2..57eed2f56e4 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, ButtonVariant, @@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [ ]; export const PrimaryDetailFullPage: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(''); - const [inputValue, setInputValue] = React.useState(''); - const [statusIsOpen, setStatusIsOpen] = React.useState(false); - const [statusSelected, setStatusSelected] = React.useState('Status'); - const [riskIsOpen, setRiskIsOpen] = React.useState(false); - const [riskSelected, setRiskSelected] = React.useState('Risk'); - const [selectedDataListItemId, setSelectedDataListItemId] = React.useState(''); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(''); + const [inputValue, setInputValue] = useState(''); + const [statusIsOpen, setStatusIsOpen] = useState(false); + const [statusSelected, setStatusSelected] = useState('Status'); + const [riskIsOpen, setRiskIsOpen] = useState(false); + const [riskSelected, setRiskSelected] = useState('Risk'); + const [selectedDataListItemId, setSelectedDataListItemId] = useState(''); const onStatusSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => { setStatusSelected(value); diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx index 4692819ba03..0bed1377fc2 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, ButtonVariant, @@ -66,14 +66,14 @@ const riskOptions: SelectOptionType[] = [ ]; export const PrimaryDetailInlineModifier: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(''); - const [inputValue, setInputValue] = React.useState(''); - const [statusIsOpen, setStatusIsOpen] = React.useState(false); - const [statusSelected, setStatusSelected] = React.useState('Status'); - const [riskIsOpen, setRiskIsOpen] = React.useState(false); - const [riskSelected, setRiskSelected] = React.useState('Risk'); - const [selectedDataListItemId, setSelectedDataListItemId] = React.useState(''); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(''); + const [inputValue, setInputValue] = useState(''); + const [statusIsOpen, setStatusIsOpen] = useState(false); + const [statusSelected, setStatusSelected] = useState('Status'); + const [riskIsOpen, setRiskIsOpen] = useState(false); + const [riskSelected, setRiskSelected] = useState('Risk'); + const [selectedDataListItemId, setSelectedDataListItemId] = useState(''); const onStatusSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => { setStatusSelected(value); diff --git a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx index aa715574334..56d741b110e 100644 --- a/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx +++ b/packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailSimpleListInCard.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Card, Content, @@ -23,8 +23,8 @@ import { import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; export const PrimaryDetailSimpleListInCard: React.FunctionComponent = () => { - const [drawerPanelBodyContent, setDrawerPanelBodyContent] = React.useState(1); - const [isExpanded, setIsExpanded] = React.useState(false); + const [drawerPanelBodyContent, setDrawerPanelBodyContent] = useState(1); + const [isExpanded, setIsExpanded] = useState(false); const onSelectListItem = (_listItem, listItemProps) => { const id = listItemProps.children; diff --git a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx index 639dd113db4..e6060a85566 100644 --- a/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx +++ b/packages/react-core/src/demos/examples/Tabs/ModalTabs.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useCallback, useState } from 'react'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { PageSection, @@ -47,11 +47,11 @@ const products: Product[] = [ ]; export const ModalTabs: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(true); - const [selectedProduct, setSelectedProduct] = React.useState(products[0]); - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isModalOpen, setIsModalOpen] = useState(true); + const [selectedProduct, setSelectedProduct] = useState(products[0]); + const [activeTabKey, setActiveTabKey] = useState(0); - const onCardClick = React.useCallback( + const onCardClick = useCallback( (product: Product) => () => { setSelectedProduct(product); setIsModalOpen(true); @@ -59,13 +59,13 @@ export const ModalTabs: React.FunctionComponent = () => { [] ); - const closeModal = React.useCallback(() => { + const closeModal = useCallback(() => { setSelectedProduct(undefined); setIsModalOpen(false); setActiveTabKey(0); }, []); - const onTabSelect = React.useCallback( + const onTabSelect = useCallback( (_event: React.MouseEvent, tabIndex: string | number) => setActiveTabKey(tabIndex), [] ); diff --git a/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx index 03cb03ec4da..52247356beb 100644 --- a/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx +++ b/packages/react-core/src/demos/examples/Tabs/NestedTabs.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardHeader, @@ -19,8 +20,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing'; export const NestedTabs: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10); + const [activeTabKey, setActiveTabKey] = useState(0); + const [activeNestedTabKey, setActiveNestedTabKey] = useState(10); // Toggle currently active tab const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex); diff --git a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx index e55decfd910..c38caab0cd7 100644 --- a/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx +++ b/packages/react-core/src/demos/examples/Tabs/NestedUnindentedTabs.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardHeader, @@ -18,8 +19,8 @@ import { import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; export const NestedUnindentedTabs: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(1); - const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10); + const [activeTabKey, setActiveTabKey] = useState(1); + const [activeNestedTabKey, setActiveNestedTabKey] = useState(10); // Toggle currently active tab const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex); diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx index 68f21736711..36edd58e7ff 100644 --- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx +++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; /* eslint-disable no-console */ import { Button, @@ -67,13 +67,13 @@ interface Repository { export const TablesAndTabs = () => { // secondary tab properties - const [secondaryActiveTabKey, setSecondaryActiveTabKey] = React.useState(10); + const [secondaryActiveTabKey, setSecondaryActiveTabKey] = useState(10); const handleSecondaryTabClick = (tabIndex: number) => { setSecondaryActiveTabKey(tabIndex); }; // drawer properties - const [isExpanded, setIsExpanded] = React.useState(true); + const [isExpanded, setIsExpanded] = useState(true); // table properties // In real usage, this data would come from some external source like an API via props. @@ -93,7 +93,7 @@ export const TablesAndTabs = () => { lastCommit: 'Last commit' }; - const [selectedRepoName, setSelectedRepoName] = React.useState(repositories[0].name); + const [selectedRepoName, setSelectedRepoName] = useState(repositories[0].name); const isRepoSelected = (repo: Repository) => repo.name === selectedRepoName; const setRepoSelected = (_event: React.FormEvent, repo: Repository) => { setSelectedRepoName(repo.name); @@ -127,7 +127,7 @@ export const TablesAndTabs = () => { } ]; - const firstActionRef = React.useRef(null); + const firstActionRef = useRef(null); /** Handles when the user clicks on the custom action toggle, stops propagation to prevent the drawer from opening */ const handleActionsToggleClick = (event: React.MouseEvent, ActionsToggleProps: CustomActionsToggleProps) => { diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx index 22d80727c85..962bfbd1615 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { TextInputGroup, TextInputGroupMain, @@ -16,10 +17,10 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; export const AttributeValueFiltering: React.FunctionComponent = () => { - const [inputValue, setInputValue] = React.useState(''); - const [selectedKey, setSelectedKey] = React.useState(''); - const [menuIsOpen, setMenuIsOpen] = React.useState(false); - const [currentChips, setCurrentChips] = React.useState([]); + const [inputValue, setInputValue] = useState(''); + const [selectedKey, setSelectedKey] = useState(''); + const [menuIsOpen, setMenuIsOpen] = useState(false); + const [currentChips, setCurrentChips] = useState([]); interface attributeValueData { [attribute: string]: string[]; @@ -35,12 +36,12 @@ export const AttributeValueFiltering: React.FunctionComponent = () => { Status: ['running', 'idle', 'stopped'] }; const keyNames = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status']; - const [menuItemsText, setMenuItemsText] = React.useState(keyNames); - const [menuItems, setMenuItems] = React.useState[]>([]); + const [menuItemsText, setMenuItemsText] = useState(keyNames); + const [menuItems, setMenuItems] = useState[]>([]); /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */ - const menuRef = React.useRef(undefined); - const textInputGroupRef = React.useRef(undefined); + const menuRef = useRef(undefined); + const textInputGroupRef = useRef(undefined); /** callback for updating the inputValue state in this component so that the input can be controlled */ const handleInputChange = (_event: React.FormEvent, value: string) => { @@ -66,7 +67,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => { clearSelectedKey(); }; - React.useEffect(() => { + useEffect(() => { /** in the menu only show items that include the text in the input */ const filteredMenuItems = menuItemsText .filter( diff --git a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx index f3618a4da54..f9944f9b986 100644 --- a/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx +++ b/packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { TextInputGroup, TextInputGroupMain, @@ -16,18 +17,18 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; export const AutoCompleteSearch: React.FunctionComponent = () => { - const [inputValue, setInputValue] = React.useState(''); - const [menuIsOpen, setMenuIsOpen] = React.useState(false); - const [currentChips, setCurrentChips] = React.useState([]); - const [hint, setHint] = React.useState(''); + const [inputValue, setInputValue] = useState(''); + const [menuIsOpen, setMenuIsOpen] = useState(false); + const [currentChips, setCurrentChips] = useState([]); + const [hint, setHint] = useState(''); /** auto-completing suggestion text items to be shown in the menu */ const suggestionItems = ['Cluster', 'Kind', 'Label', 'Name', 'Namespace', 'Status']; - const [menuItems, setMenuItems] = React.useState[]>([]); + const [menuItems, setMenuItems] = useState[]>([]); /** refs used to detect when clicks occur inside vs outside of the textInputGroup and menu popper */ - const menuRef = React.useRef(undefined); - const textInputGroupRef = React.useRef(undefined); + const menuRef = useRef(undefined); + const textInputGroupRef = useRef(undefined); /** callback for updating the inputValue state in this component so that the input can be controlled */ const handleInputChange = (_event: React.FormEvent, value: string) => { @@ -46,7 +47,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => { setInputValue(''); }; - React.useEffect(() => { + useEffect(() => { /** in the menu only show items that include the text in the input */ const filteredMenuItems = suggestionItems .filter((item) => !inputValue || item.toLowerCase().includes(inputValue.toString().toLowerCase())) diff --git a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx index 16452705c10..e384267cc76 100644 --- a/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx +++ b/packages/react-core/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Badge, Button, @@ -35,22 +35,22 @@ export const ConsoleLogViewerToolbar: React.FC = () => { 'container-sample-3': { type: 'E' } }; - const [containerExpanded, setContainerExpanded] = React.useState(false); - const [containerExpandedMobile, setContainerExpandedMobile] = React.useState(false); - const [containerSelected, setContainerSelected] = React.useState(Object.keys(firstOptions)[0]); - const [optionExpanded, setOptionExpanded] = React.useState(false); - const [optionExpandedMobile, setOptionExpandedMobile] = React.useState(false); - const [isPaused, setIsPaused] = React.useState(false); - const [firstSwitchChecked, setFirstSwitchChecked] = React.useState(true); - const [secondSwitchChecked, setSecondSwitchChecked] = React.useState(false); - const [searchValue, setSearchValue] = React.useState(''); - const [searchResultsCount, setSearchResultsCount] = React.useState(3); - const [currentSearchResult, setCurrentSearchResult] = React.useState(1); - const [externalExpanded, setExternalExpanded] = React.useState(false); - const [externalExpandedMobile, setExternalExpandedMobile] = React.useState(false); - const [downloadExpanded, setDownloadExpanded] = React.useState(false); - const [downloadExpandedMobile, setDownloadExpandedMobile] = React.useState(false); - const [mobileView, setMobileView] = React.useState(window.innerWidth >= 1450 ? false : true); + const [containerExpanded, setContainerExpanded] = useState(false); + const [containerExpandedMobile, setContainerExpandedMobile] = useState(false); + const [containerSelected, setContainerSelected] = useState(Object.keys(firstOptions)[0]); + const [optionExpanded, setOptionExpanded] = useState(false); + const [optionExpandedMobile, setOptionExpandedMobile] = useState(false); + const [isPaused, setIsPaused] = useState(false); + const [firstSwitchChecked, setFirstSwitchChecked] = useState(true); + const [secondSwitchChecked, setSecondSwitchChecked] = useState(false); + const [searchValue, setSearchValue] = useState(''); + const [searchResultsCount, setSearchResultsCount] = useState(3); + const [currentSearchResult, setCurrentSearchResult] = useState(1); + const [externalExpanded, setExternalExpanded] = useState(false); + const [externalExpandedMobile, setExternalExpandedMobile] = useState(false); + const [downloadExpanded, setDownloadExpanded] = useState(false); + const [downloadExpandedMobile, setDownloadExpandedMobile] = useState(false); + const [mobileView, setMobileView] = useState(window.innerWidth >= 1450 ? false : true); const onContainerToggle = () => { setContainerExpanded((prevState) => !prevState); diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx index d1eb8bb205e..f9503ad113e 100644 --- a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx +++ b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawer.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { Button, Drawer, @@ -15,8 +16,8 @@ import { } from '@patternfly/react-core'; export const WizardModalWithDrawerDemo: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const drawerRef = React.useRef(null); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const drawerRef = useRef(null); const onExpand = () => { if (drawerRef.current) { diff --git a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx index 782d13286d8..688addb71ee 100644 --- a/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx +++ b/packages/react-core/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { Button, Content, @@ -16,8 +17,8 @@ import { } from '@patternfly/react-core'; export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const drawerRef = React.useRef(null); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const drawerRef = useRef(null); const onExpand = () => { if (drawerRef.current) { diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx index d0139cb7623..8426523dd9a 100644 --- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx +++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawer.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Brand, Breadcrumb, @@ -34,10 +34,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(0); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const [activeItem, setActiveItem] = useState(0); - const drawerRef = React.useRef(null); + const drawerRef = useRef(null); const onExpand = () => { if (drawerRef.current) { diff --git a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx index 045c2698c67..226b6423a04 100644 --- a/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx +++ b/packages/react-core/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Brand, Breadcrumb, @@ -34,10 +34,10 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); - const [activeItem, setActiveItem] = React.useState(0); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); + const [activeItem, setActiveItem] = useState(0); - const drawerRef = React.useRef(null); + const drawerRef = useRef(null); const onExpand = () => { if (drawerRef.current) { diff --git a/packages/react-core/src/deprecated/components/Chip/examples/Chip.md b/packages/react-core/src/deprecated/components/Chip/examples/Chip.md index a511c2bba36..3efdea7eaa8 100644 --- a/packages/react-core/src/deprecated/components/Chip/examples/Chip.md +++ b/packages/react-core/src/deprecated/components/Chip/examples/Chip.md @@ -7,7 +7,7 @@ ouia: true deprecated: true --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx index 825fe3700c3..4e6e9db293b 100644 --- a/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx +++ b/packages/react-core/src/deprecated/components/Chip/examples/ChipDefault.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Badge } from '@patternfly/react-core'; import { Chip } from '@patternfly/react-core/deprecated'; export const ChipDefault: React.FunctionComponent = () => { - const [chips, setChips] = React.useState({ + const [chips, setChips] = useState({ chip: { name: 'Chip 1' }, diff --git a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx index 7182a91b08a..9d045705472 100644 --- a/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx +++ b/packages/react-core/src/deprecated/components/Chip/examples/ChipGroupRemovableCategories.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Chip, ChipGroup } from '@patternfly/react-core/deprecated'; export const ChipGroupRemovableCategories: React.FunctionComponent = () => { - const [chipGroup1, setChipGroup1] = React.useState(['Chip one', 'Chip two', 'Chip three']); - const [chipGroup2, setChipGroup2] = React.useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']); + const [chipGroup1, setChipGroup1] = useState(['Chip one', 'Chip two', 'Chip three']); + const [chipGroup2, setChipGroup2] = useState(['Chip one', 'Chip two', 'Chip three', 'Chip four']); const deleteItem = (id: string, group: string[]) => { const copyOfChips = [...group]; diff --git a/packages/react-core/src/deprecated/components/Modal/examples/Modal.md b/packages/react-core/src/deprecated/components/Modal/examples/Modal.md index b90af56b0be..80f1032b91e 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/Modal.md +++ b/packages/react-core/src/deprecated/components/Modal/examples/Modal.md @@ -7,7 +7,7 @@ ouia: true deprecated: true --- -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon'; diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx index cb776b84c00..b481b3f9e3f 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalBasic.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; export const ModalBasic: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx index 8756ef23d92..047f6fae5bb 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; export const ModalCustomFocus: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx index 916bf2e9220..29a6ad87f9f 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx @@ -1,11 +1,11 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Title, TitleSizes } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon'; import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing'; export const ModalCustomHeaderFooter: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx index 5c22e027ce1..9dce4d7de0d 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx @@ -1,10 +1,10 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon'; export const ModalCustomTitleIcon: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx index 6b3d499e84d..1d97dad0ba1 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; export const ModalCustomWidth: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx index 3fc59893a8b..3cf17ae43ae 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalLarge.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalLarge: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx index 8e797093b64..ca3bc226464 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalMedium.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalMedium: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx index 3ebed042828..9f89024033c 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalNoHeaderFooter: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx index 2f25689e20e..f9cd48713c9 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalSmall.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalSmall: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx index 8b830d89593..fa9761d5c33 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; export const ModalTitleIcon: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx index 28e997deac8..f7f968a1a11 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalTopAligned.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; export const ModalTopAligned: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx index 906d9cccecb..5ea1a0c7daf 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDescription.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; export const ModalWithDescription: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx index 73b467c0485..84d52ebb785 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx @@ -1,10 +1,10 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalWithDropdown: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); - const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + const [isDropdownOpen, setIsDropdownOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx index c330cca9d04..aa5d133e1b4 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithForm.tsx @@ -1,15 +1,15 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalWithForm: React.FunctionComponent = () => { - const [isModalOpen, setModalOpen] = React.useState(false); - const [nameValue, setNameValue] = React.useState(''); - const [emailValue, setEmailValue] = React.useState(''); - const [addressValue, setAddressValue] = React.useState(''); - const nameLabelHelpRef = React.useRef(null); - const emailLabelHelpRef = React.useRef(null); - const addressLabelHelpRef = React.useRef(null); + const [isModalOpen, setModalOpen] = useState(false); + const [nameValue, setNameValue] = useState(''); + const [emailValue, setEmailValue] = useState(''); + const [addressValue, setAddressValue] = useState(''); + const nameLabelHelpRef = useRef(null); + const emailLabelHelpRef = useRef(null); + const addressLabelHelpRef = useRef(null); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx index 409f4f60908..341c3eb4c06 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithHelp.tsx @@ -1,11 +1,11 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Popover } from '@patternfly/react-core'; import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; export const ModalWithHelp: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen(!isModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx index 57ffd74b0f8..8209b0feba4 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalWithOverflowingContent: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen); diff --git a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx index 5a9920f84fa..bfb2498ab93 100644 --- a/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx +++ b/packages/react-core/src/deprecated/components/Modal/examples/ModalWithWizard.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core'; import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; export const ModalWithWizard: React.FunctionComponent = () => { - const [isModalOpen, setIsModalOpen] = React.useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen); diff --git a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md index 50857f62e82..45b0a61b12c 100644 --- a/packages/react-core/src/deprecated/components/Tile/examples/Tile.md +++ b/packages/react-core/src/deprecated/components/Tile/examples/Tile.md @@ -6,6 +6,7 @@ propComponents: ['Tile'] deprecated: true --- +import { useState } from 'react'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import './Tile.css'; @@ -73,10 +74,11 @@ You can also change the type of `Flex` you can use so that the line breaks in th ### Tiles with single selection ```ts +import { useState } from 'react'; import { Tile } from '@patternfly/react-core/deprecated'; const TileSingleSelect: React.FunctionComponent = () => { - const [selectedId, setSelectedId] = React.useState(''); + const [selectedId, setSelectedId] = useState(''); const onSelect = (event: React.MouseEvent) => { setSelectedId(event.currentTarget.id); @@ -103,10 +105,11 @@ const TileSingleSelect: React.FunctionComponent = () => { ### Tiles with multiple selection ```ts +import { useState } from 'react'; import { Tile } from '@patternfly/react-core/deprecated'; const TileMultiSelect: React.FunctionComponent = () => { - const [selectedIds, setSelectedIds] = React.useState([]); + const [selectedIds, setSelectedIds] = useState([]); const onSelect = (event: React.MouseEvent | React.KeyboardEvent) => { const targetId = event.currentTarget.id; diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md b/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md index 2a1b1772a51..1f142eff491 100644 --- a/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md +++ b/packages/react-core/src/deprecated/components/Wizard/examples/Wizard.md @@ -9,7 +9,7 @@ source: react-deprecated deprecated: true --- -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant, DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, ModalVariant, Alert, EmptyState, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core'; import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated'; diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx index bc782a8a81f..9d7fc9a75c1 100644 --- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx +++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardInModal.tsx @@ -1,9 +1,9 @@ -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import { Button } from '@patternfly/react-core'; import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated'; export const WizardInModal: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx b/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx index 19cf8c222eb..026ace4e196 100644 --- a/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx +++ b/packages/react-core/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx @@ -1,4 +1,4 @@ -import { Fragment } from 'react'; +import { Fragment, useRef, useState } from 'react'; import { Button, DrawerActions, @@ -10,9 +10,9 @@ import { import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated'; export const WizardWithDrawer: React.FunctionComponent = () => { - const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false); + const [isDrawerExpanded, setIsDrawerExpanded] = useState(false); - const drawerRef = React.useRef(null); + const drawerRef = useRef(null); const onExpandDrawer = () => { drawerRef.current && drawerRef.current.focus(); From ce8fca806768e705a9b8b78f296018a174e8baad Mon Sep 17 00:00:00 2001 From: mfrances Date: Fri, 14 Mar 2025 18:57:07 -0400 Subject: [PATCH 2/3] fixed all missed and edge cases --- .../Accordion/examples/Accordion.md | 1 + .../Accordion/examples/AccordionBordered.tsx | 5 ++- .../examples/AccordionDefinitionList.tsx | 3 +- ...cordionFixedWithMultipleExpandBehavior.tsx | 3 +- .../AccordionSingleExpandBehavior.tsx | 3 +- .../examples/AccordionToggleIconAtStart.tsx | 3 +- .../Breadcrumb/examples/Breadcrumb.md | 1 + .../examples/BreadcrumbDropdown.tsx | 5 ++- .../src/components/Button/examples/Button.md | 2 +- .../Button/examples/ButtonProgress.tsx | 9 ++-- .../CalendarMonth/examples/CalendarMonth.md | 1 + .../examples/CalendarMonthSelectableDate.tsx | 3 +- .../Card/examples/CardClickable.tsx | 3 +- .../Card/examples/CardClickableSelectable.tsx | 11 ++--- .../Card/examples/CardExpandableWithIcon.tsx | 7 ++-- .../Card/examples/CardHeaderInCardHead.tsx | 5 ++- .../examples/CardOnlyActionsInCardHead.tsx | 5 ++- .../Card/examples/CardSelectable.tsx | 9 ++-- .../Card/examples/CardSingleSelectable.tsx | 3 +- .../src/components/Card/examples/CardTile.tsx | 3 +- .../Card/examples/CardTileMulti.tsx | 7 ++-- .../Card/examples/CardWithImageAndActions.tsx | 7 ++-- .../examples/DescriptionList.md | 1 + .../examples/DescriptionListWithCard.tsx | 5 ++- .../DescriptionListWithLargeDisplaySize.tsx | 5 ++- ...riptionListWithLargeDisplaySizeAndCard.tsx | 5 ++- .../components/Dropdown/examples/Dropdown.md | 1 + .../Dropdown/examples/DropdownBasic.tsx | 3 +- .../examples/DropdownWithDescriptions.tsx | 3 +- .../Dropdown/examples/DropdownWithGroups.tsx | 3 +- .../examples/DropdownWithKebabToggle.tsx | 3 +- .../EmptyState/examples/EmptyState.md | 2 + .../examples/EmptyStateWithStatus.tsx | 3 +- .../examples/ExpandableSectionBasic.tsx | 3 +- .../ExpandableSectionCustomToggle.tsx | 3 +- .../examples/ExpandableSectionDetached.tsx | 3 +- .../examples/ExpandableSectionDisclosure.tsx | 3 +- .../ExpandableSectionTruncateExpansion.tsx | 3 +- .../FileUpload/examples/FileUpload.md | 1 + .../examples/FileUploadCustomPreview.tsx | 5 ++- .../examples/FileUploadCustomUpload.tsx | 23 ++++++----- .../examples/FileUploadSimpleFile.tsx | 5 ++- .../examples/FileUploadSimpleText.tsx | 7 ++-- .../examples/FileUploadTextWithEdits.tsx | 7 ++-- .../FileUploadTextWithRestrictions.tsx | 11 ++--- .../examples/FileUploadWithHelperText.tsx | 7 ++-- .../FormSelect/examples/FormSelect.md | 1 + .../FormSelect/examples/FormSelectBasic.tsx | 3 +- .../examples/FormSelectDisabled.tsx | 3 +- .../FormSelect/examples/FormSelectGrouped.tsx | 3 +- .../examples/FormSelectValidated.tsx | 7 ++-- .../Hint/examples/HintActionsWithNoOffset.tsx | 3 +- .../Hint/examples/HintBasicWithTitle.tsx | 3 +- .../src/components/Label/examples/Label.md | 2 +- .../examples/LabelGroupCategoryRemovable.tsx | 3 +- .../Label/examples/LabelGroupEditableAdd.tsx | 5 ++- .../LabelGroupEditableAddDropdown.tsx | 15 +++---- .../examples/LabelGroupEditableAddModal.tsx | 41 ++++++++++--------- .../examples/LabelGroupEditableLabels.tsx | 7 ++-- ...GroupVerticalCategoryOverflowRemovable.tsx | 3 +- .../src/components/Menu/examples/Menu.md | 2 +- .../Menu/examples/MenuDangerMenuItem.tsx | 3 +- .../Menu/examples/MenuFilterDrilldown.tsx | 13 +++--- .../examples/MenuFilteringWithSearchInput.tsx | 5 ++- .../Menu/examples/MenuOptionMultiSelect.tsx | 3 +- .../Menu/examples/MenuOptionSingleSelect.tsx | 5 ++- .../Menu/examples/MenuScrollable.tsx | 3 +- .../MenuScrollableCustomMenuHeight.tsx | 3 +- .../Menu/examples/MenuWithActions.tsx | 3 +- .../Menu/examples/MenuWithCheckbox.tsx | 3 +- .../Menu/examples/MenuWithDescription.tsx | 3 +- .../Menu/examples/MenuWithDrilldown.tsx | 9 ++-- .../MenuWithDrilldownInitialState.tsx | 9 ++-- .../MenuWithDrilldownSubmenuFunctions.tsx | 9 ++-- .../Menu/examples/MenuWithFooter.tsx | 3 +- .../Menu/examples/MenuWithIcons.tsx | 3 +- .../Menu/examples/MenuWithLinks.tsx | 3 +- .../Menu/examples/MenuWithSeparators.tsx | 3 +- .../Menu/examples/MenuWithTitledGroups.tsx | 3 +- .../Menu/examples/MenuWithViewMore.tsx | 17 ++++---- .../MenuToggle/examples/MenuToggle.md | 2 +- .../examples/MenuToggleTypeahead.tsx | 3 +- .../examples/MultipleFileUpload.md | 1 + .../examples/MultipleFileUploadBasic.tsx | 15 +++---- .../src/components/Nav/examples/Nav.md | 1 + .../components/Nav/examples/NavDefault.tsx | 3 +- .../components/Nav/examples/NavExpandable.tsx | 5 ++- .../Nav/examples/NavExpandableThirdLevel.tsx | 5 ++- .../src/components/Nav/examples/NavFlyout.tsx | 3 +- .../components/Nav/examples/NavGrouped.tsx | 3 +- .../Nav/examples/NavHorizontalNav.tsx | 3 +- .../Nav/examples/NavHorizontalSubNav.tsx | 3 +- .../src/components/Nav/examples/NavIcons.tsx | 3 +- .../src/components/Nav/examples/NavMixed.tsx | 5 ++- .../examples/NotificationBadge.md | 1 + .../examples/NotificationBadgeBasic.tsx | 7 ++-- .../examples/NotificationBadgeWithCount.tsx | 7 ++-- .../examples/NotificationDrawer.md | 1 + .../examples/NotificationDrawerBasic.tsx | 3 +- .../examples/NotificationDrawerGroups.tsx | 9 ++-- .../NotificationDrawerLightweight.tsx | 7 ++-- .../NumberInput/examples/NumberInput.md | 2 +- .../examples/NumberInputCustomStep.tsx | 3 +- .../NumberInputCustomStepAndThreshold.tsx | 3 +- .../examples/NumberInputDefault.tsx | 3 +- .../examples/NumberInputDisabled.tsx | 3 +- .../examples/NumberInputWithStatus.tsx | 5 ++- .../OverflowMenu/examples/OverflowMenu.md | 1 + .../OverflowMenuBreakpointOnContainer.tsx | 7 ++-- .../examples/OverflowMenuGroupTypes.tsx | 3 +- .../examples/OverflowMenuMultiGroup.tsx | 3 +- .../examples/OverflowMenuPersistent.tsx | 3 +- .../examples/OverflowMenuSimple.tsx | 3 +- .../src/components/Page/examples/Page.md | 1 + .../Page/examples/PageCenteredSection.tsx | 3 +- .../Page/examples/PageGroupSection.tsx | 3 +- .../Page/examples/PageMainSectionPadding.tsx | 3 +- .../examples/PageMainSectionVariations.tsx | 3 +- .../Page/examples/PageMultipleSidebarBody.tsx | 3 +- .../Page/examples/PageVerticalNav.tsx | 3 +- .../Page/examples/PageWithOrWithoutFill.tsx | 3 +- .../Pagination/examples/PaginationBottom.tsx | 5 ++- .../Pagination/examples/PaginationCompact.tsx | 5 ++- .../examples/PaginationDisabled.tsx | 5 ++- .../Pagination/examples/PaginationInset.tsx | 5 ++- .../Pagination/examples/PaginationNoItems.tsx | 5 ++- .../Pagination/examples/PaginationOffset.tsx | 5 ++- .../Pagination/examples/PaginationOnePage.tsx | 5 ++- .../Pagination/examples/PaginationTop.tsx | 5 ++- .../components/Popover/examples/Popover.md | 1 + .../Popover/examples/PopoverAdvanced.tsx | 7 ++-- .../Popover/examples/PopoverAlert.tsx | 3 +- .../examples/PopoverCloseControlled.tsx | 3 +- .../Popover/examples/PopoverReactRef.tsx | 3 +- .../components/Progress/examples/Progress.md | 2 + .../Progress/examples/ProgressHelperText.tsx | 3 +- .../src/components/Select/examples/Select.md | 2 +- .../Select/examples/SelectCheckbox.tsx | 5 ++- .../Select/examples/SelectFooter.tsx | 5 ++- .../Select/examples/SelectGrouped.tsx | 5 ++- .../Select/examples/SelectMultiTypeahead.tsx | 17 ++++---- .../examples/SelectMultiTypeaheadCheckbox.tsx | 21 +++++----- .../SelectMultiTypeaheadCreatable.tsx | 19 +++++---- .../examples/SelectOptionVariations.tsx | 5 ++- .../Select/examples/SelectTypeahead.tsx | 19 +++++---- .../examples/SelectTypeaheadCreatable.tsx | 19 +++++---- .../Select/examples/SelectViewMore.tsx | 23 ++++++----- .../SimpleList/examples/SimpleList.md | 1 + .../examples/SimpleListUncontrolled.tsx | 3 +- .../src/components/Slider/examples/Slider.md | 1 + .../Slider/examples/SliderActions.tsx | 9 ++-- .../Slider/examples/SliderContinuous.tsx | 7 ++-- .../Slider/examples/SliderDisabled.tsx | 3 +- .../Slider/examples/SliderDiscrete.tsx | 3 +- .../Slider/examples/SliderThumbValueInput.tsx | 5 ++- .../Slider/examples/SliderValueInput.tsx | 13 +++--- .../src/components/Switch/examples/Switch.md | 2 +- .../Switch/examples/SwitchBasic.tsx | 3 +- .../examples/SwitchCheckedWithLabel.tsx | 3 +- .../Switch/examples/SwitchReversed.tsx | 3 +- .../Switch/examples/SwitchWithoutLabel.tsx | 3 +- .../src/components/Tabs/examples/Tabs.md | 2 +- .../Tabs/examples/TabsBoxSecondary.tsx | 5 ++- .../Tabs/examples/TabsChildrenMounting.tsx | 3 +- .../components/Tabs/examples/TabsDefault.tsx | 5 ++- .../Tabs/examples/TabsDefaultOverflow.tsx | 5 ++- .../components/Tabs/examples/TabsDynamic.tsx | 13 +++--- .../components/Tabs/examples/TabsFilled.tsx | 5 ++- .../Tabs/examples/TabsFilledWithIcons.tsx | 5 ++- .../src/components/Tabs/examples/TabsHelp.tsx | 5 ++- .../Tabs/examples/TabsHelpAndClose.tsx | 13 +++--- .../Tabs/examples/TabsHorizontalOverflow.tsx | 5 ++- .../Tabs/examples/TabsIconAndText.tsx | 3 +- .../components/Tabs/examples/TabsInset.tsx | 5 ++- .../src/components/Tabs/examples/TabsNav.tsx | 3 +- .../Tabs/examples/TabsNavSubtab.tsx | 5 ++- .../Tabs/examples/TabsPageInsets.tsx | 5 ++- .../components/Tabs/examples/TabsSubtabs.tsx | 7 ++-- .../Tabs/examples/TabsTooltipReactRef.tsx | 7 ++-- .../TabsUnmountingInvisibleChildren.tsx | 3 +- .../components/Tabs/examples/TabsVertical.tsx | 5 ++- .../Tabs/examples/TabsVerticalExpandable.tsx | 5 ++- .../TabsVerticalExpandableUncontrolled.tsx | 3 +- .../components/TextArea/examples/TextArea.md | 2 +- .../examples/TextAreaAutoResizing.tsx | 3 +- .../TextArea/examples/TextAreaBasic.tsx | 3 +- .../TextAreaHorizontallyResizable.tsx | 3 +- .../TextArea/examples/TextAreaInvalid.tsx | 3 +- .../examples/TextAreaResizableNone.tsx | 3 +- .../TextArea/examples/TextAreaValidated.tsx | 9 ++-- .../examples/TextAreaVerticallyResizable.tsx | 3 +- .../TextInput/examples/TextInput.md | 1 + .../TextInput/examples/TextInputBasic.tsx | 3 +- .../examples/TextInputCustomIcon.tsx | 5 ++- .../examples/TextInputCustomIconInvalid.tsx | 3 +- .../TextInput/examples/TextInputInvalid.tsx | 3 +- .../TextInput/examples/TextInputReadOnly.tsx | 3 +- .../examples/TextInputSelectUsingRef.tsx | 5 ++- .../examples/TextInputStartTruncated.tsx | 3 +- .../TextInputGroup/examples/TextInputGroup.md | 1 + .../examples/TextInputGroupBasic.tsx | 3 +- .../examples/TextInputGroupFilters.tsx | 5 ++- .../TextInputGroupUtilitiesAndIcon.tsx | 3 +- .../examples/TextInputGroupWithStatus.tsx | 9 ++-- .../ToggleGroup/examples/ToggleGroup.md | 1 + .../examples/ToggleGroupCompact.tsx | 3 +- .../examples/ToggleGroupDefaultMultiple.tsx | 5 ++- .../examples/ToggleGroupDefaultSingle.tsx | 3 +- .../ToggleGroup/examples/ToggleGroupIcon.tsx | 3 +- .../examples/ToggleGroupTextIcon.tsx | 3 +- .../components/Tooltip/examples/Tooltip.md | 1 + .../Tooltip/examples/TooltipIcon.tsx | 3 +- .../Tooltip/examples/TooltipOptions.tsx | 27 ++++++------ .../Tooltip/examples/TooltipReactRef.tsx | 3 +- .../components/TreeView/examples/TreeView.md | 2 +- .../examples/TreeViewMultiselectable.tsx | 3 +- .../examples/TreeViewSelectionExpansion.tsx | 3 +- .../examples/TreeViewWithActionItems.tsx | 5 ++- .../TreeView/examples/TreeViewWithBadges.tsx | 3 +- .../examples/TreeViewWithCheckboxes.tsx | 5 ++- .../examples/TreeViewWithCustomBadges.tsx | 3 +- .../examples/TreeViewWithIconPerItem.tsx | 3 +- .../TreeView/examples/TreeViewWithIcons.tsx | 3 +- .../TreeView/examples/TreeViewWithSearch.tsx | 7 ++-- .../src/components/Wizard/examples/Wizard.md | 1 + .../WizardEnabledOnFormValidation.tsx | 5 ++- .../Wizard/examples/WizardGetCurrentStep.tsx | 3 +- .../examples/WizardStepDrawerContent.tsx | 5 ++- .../Wizard/examples/WizardStepStatus.tsx | 9 ++-- .../examples/WizardToggleStepVisibility.tsx | 7 ++-- .../examples/WizardValidateOnButtonPress.tsx | 15 +++---- .../examples/WizardWithCustomFooter.tsx | 5 ++- .../examples/WizardWithSubmitProgress.tsx | 9 ++-- .../Wizard/examples/WizardWithinModal.tsx | 3 +- packages/react-core/src/demos/JumpLinks.md | 2 +- .../react-core/src/demos/LabelGroupDemos.md | 1 + .../src/demos/RTL/examples/PaginatedTable.jsx | 23 ++++++----- .../Chip/examples/ChipGroupInline.tsx | 3 +- .../Chip/examples/ChipGroupWithCategories.tsx | 3 +- .../components/DragDrop/examples/DragDrop.md | 1 + .../DragDrop/examples/DragDropBasic.tsx | 3 +- .../examples/DragDropMultipleLists.tsx | 3 +- .../components/Wizard/examples/Wizard.md | 2 +- .../WizardEnabledOnFormValidation.tsx | 15 +++---- .../Wizard/examples/WizardFinished.tsx | 5 ++- .../WizardIncrementallyEnabledSteps.tsx | 3 +- .../examples/WizardValidateOnButtonPress.tsx | 17 ++++---- .../react-core/src/helpers/resizeObserver.tsx | 4 +- .../Table/examples/TableSortableCustom.tsx | 2 +- packages/react-table/src/demos/Table.md | 2 + .../src/demos/examples/TableBulkSelect.tsx | 13 +++--- .../demos/examples/TableColumnManagement.tsx | 4 +- .../TableColumnManagementWithDraggable.tsx | 4 +- .../demos/examples/TableCompoundExpansion.tsx | 5 ++- .../examples/LegacyTableSortableCustom.tsx | 2 +- 255 files changed, 765 insertions(+), 526 deletions(-) diff --git a/packages/react-core/src/components/Accordion/examples/Accordion.md b/packages/react-core/src/components/Accordion/examples/Accordion.md index 93037f27f6b..56fe2e7231d 100644 --- a/packages/react-core/src/components/Accordion/examples/Accordion.md +++ b/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 diff --git a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx b/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx index 7cd0a01ba40..45b4c6a4272 100644 --- a/packages/react-core/src/components/Accordion/examples/AccordionBordered.tsx +++ b/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) => { diff --git a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx b/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx index 938877aa888..c0cf781da5d 100644 --- a/packages/react-core/src/components/Accordion/examples/AccordionDefinitionList.tsx +++ b/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) { diff --git a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx index b4f68eba239..2ae7cdd7605 100644 --- a/packages/react-core/src/components/Accordion/examples/AccordionFixedWithMultipleExpandBehavior.tsx +++ b/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); diff --git a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx b/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx index a39ebad4578..64e4755485a 100644 --- a/packages/react-core/src/components/Accordion/examples/AccordionSingleExpandBehavior.tsx +++ b/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) { diff --git a/packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx b/packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx index 4da46e0f1d2..9519d2a8870 100644 --- a/packages/react-core/src/components/Accordion/examples/AccordionToggleIconAtStart.tsx +++ b/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) { diff --git a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md index 3309609ff97..fdc6975e649 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md +++ b/packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md @@ -6,6 +6,7 @@ propComponents: ['Breadcrumb', 'BreadcrumbItem', 'BreadcrumbHeading'] ouia: true --- +import { useRef, useState } from 'react'; import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; diff --git a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx index 6d1fc2266a6..87e0ec6541e 100644 --- a/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx +++ b/packages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { Breadcrumb, BreadcrumbItem, @@ -46,8 +47,8 @@ const dropdownItems = [ ]; export const BreadcrumbDropdown: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const badgeToggleRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const badgeToggleRef = useRef(undefined); const onToggle = () => setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md index a082ee23279..b816256151f 100644 --- a/packages/react-core/src/components/Button/examples/Button.md +++ b/packages/react-core/src/components/Button/examples/Button.md @@ -6,7 +6,7 @@ propComponents: ['Button', 'BadgeCountObject'] ouia: true --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon'; diff --git a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx index 44b07f44e3b..fd78b5fb8db 100644 --- a/packages/react-core/src/components/Button/examples/ButtonProgress.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonProgress.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Button, Flex } from '@patternfly/react-core'; import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; @@ -9,10 +10,10 @@ interface LoadingPropsType { } export const ButtonProgress: React.FunctionComponent = () => { - const [isPrimaryLoading, setIsPrimaryLoading] = React.useState(true); - const [isSecondaryLoading, setIsSecondaryLoading] = React.useState(true); - const [isInlineLoading, setIsInlineLoading] = React.useState(true); - const [isUploading, setIsUploading] = React.useState(false); + const [isPrimaryLoading, setIsPrimaryLoading] = useState(true); + const [isSecondaryLoading, setIsSecondaryLoading] = useState(true); + const [isInlineLoading, setIsInlineLoading] = useState(true); + const [isUploading, setIsUploading] = useState(false); const primaryLoadingProps = {} as LoadingPropsType; primaryLoadingProps.spinnerAriaValueText = 'Loading'; diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md index 2b784e4f5f9..ab5a6a3005e 100644 --- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md +++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md @@ -5,6 +5,7 @@ subsection: date-and-time cssPrefix: pf-v6-c-calendar-month propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps'] --- +import { useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx index 0e9d49a1065..876f2b3dda0 100644 --- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx +++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core'; export const CalendarMonthSelectableDate: React.FunctionComponent = () => { - const [date, setDate] = React.useState(new Date(2020, 10, 24)); + const [date, setDate] = useState(new Date(2020, 10, 24)); const onMonthChange = ( _event: React.MouseEvent | React.ChangeEvent | React.FormEvent | undefined, diff --git a/packages/react-core/src/components/Card/examples/CardClickable.tsx b/packages/react-core/src/components/Card/examples/CardClickable.tsx index 654d8736202..5bb2506535d 100644 --- a/packages/react-core/src/components/Card/examples/CardClickable.tsx +++ b/packages/react-core/src/components/Card/examples/CardClickable.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core'; export const CardClickable: React.FunctionComponent = () => { - const [isSecondary, setIsSecondary] = React.useState(false); + const [isSecondary, setIsSecondary] = useState(false); const toggleVariant = (checked: boolean) => { setIsSecondary(checked); diff --git a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx index 0e2c57537ae..6bad412a5c1 100644 --- a/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx +++ b/packages/react-core/src/components/Card/examples/CardClickableSelectable.tsx @@ -1,11 +1,12 @@ +import { useState } from 'react'; import { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core'; export const CardClickable: React.FunctionComponent = () => { - const [isChecked1, setIsChecked1] = React.useState(false); - const [isChecked2, setIsChecked2] = React.useState(false); - const [isChecked3, setIsChecked3] = React.useState(false); - const [isClicked, setIsClicked] = React.useState(false); - const [isSecondary, setIsSecondary] = React.useState(false); + const [isChecked1, setIsChecked1] = useState(false); + const [isChecked2, setIsChecked2] = useState(false); + const [isChecked3, setIsChecked3] = useState(false); + const [isClicked, setIsClicked] = useState(false); + const [isSecondary, setIsSecondary] = useState(false); const id1 = 'clickable-selectable-card-input-1'; const id2 = 'clickable-selectable-card-input-2'; diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx index fb3a227622a..19a706791c0 100644 --- a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx +++ b/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardHeader, @@ -16,9 +17,9 @@ import pfLogoSmall from '../../PF-IconLogo.svg'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardExpandableWithIcon: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [isChecked, setIsChecked] = React.useState(false); - const [isExpanded, setIsExpanded] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [isExpanded, setIsExpanded] = useState(false); const onSelect = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx index 59ce8254bcc..ab7ef1f7ba3 100644 --- a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx +++ b/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Card, CardHeader, @@ -15,8 +16,8 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardTitleInHeader: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [isChecked, setIsChecked] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [isChecked, setIsChecked] = useState(false); const onSelect = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx index e955f1c5c18..e6d7db885dc 100644 --- a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx +++ b/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Checkbox, Card, @@ -13,8 +14,8 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const CardOnlyActionsInCardHead: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [isChecked, setIsChecked] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [isChecked, setIsChecked] = useState(false); const onSelect = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Card/examples/CardSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSelectable.tsx index 26c3aca9393..2d32bcdedaf 100644 --- a/packages/react-core/src/components/Card/examples/CardSelectable.tsx +++ b/packages/react-core/src/components/Card/examples/CardSelectable.tsx @@ -1,10 +1,11 @@ +import { useState } from 'react'; import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core'; export const SelectableCard: React.FunctionComponent = () => { - const [isChecked1, setIsChecked1] = React.useState(false); - const [isChecked2, setIsChecked2] = React.useState(false); - const [isChecked3, setIsChecked3] = React.useState(false); - const [isSecondary, setIsSecondary] = React.useState(false); + const [isChecked1, setIsChecked1] = useState(false); + const [isChecked2, setIsChecked2] = useState(false); + const [isChecked3, setIsChecked3] = useState(false); + const [isSecondary, setIsSecondary] = useState(false); const id1 = 'selectable-card-input-1'; const id2 = 'selectable-card-input-2'; diff --git a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx index f6073dd47de..83f116e40c0 100644 --- a/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx +++ b/packages/react-core/src/components/Card/examples/CardSingleSelectable.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Card, CardHeader, CardTitle, CardBody, Gallery } from '@patternfly/react-core'; export const SingleSelectableCard: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(''); + const [isChecked, setIsChecked] = useState(''); const id1 = 'single-selectable-card-input-1'; const id2 = 'single-selectable-card-input-2'; const id3 = 'single-selectable-card-input-3'; diff --git a/packages/react-core/src/components/Card/examples/CardTile.tsx b/packages/react-core/src/components/Card/examples/CardTile.tsx index 24f0f41c0ec..2ed07685ba1 100644 --- a/packages/react-core/src/components/Card/examples/CardTile.tsx +++ b/packages/react-core/src/components/Card/examples/CardTile.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; export const CardTile: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(''); + const [isChecked, setIsChecked] = useState(''); const id1 = 'tile-1'; const id2 = 'tile-2'; const id3 = 'tile-3'; diff --git a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx index 310e037dd1e..c41816b5ba6 100644 --- a/packages/react-core/src/components/Card/examples/CardTileMulti.tsx +++ b/packages/react-core/src/components/Card/examples/CardTileMulti.tsx @@ -1,10 +1,11 @@ +import { useState } from 'react'; import { Card, CardHeader, CardBody, Gallery, Flex } from '@patternfly/react-core'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; export const CardTileMulti: React.FunctionComponent = () => { - const [isChecked1, setIsChecked1] = React.useState(false); - const [isChecked2, setIsChecked2] = React.useState(false); - const [isChecked3, setIsChecked3] = React.useState(false); + const [isChecked1, setIsChecked1] = useState(false); + const [isChecked2, setIsChecked2] = useState(false); + const [isChecked3, setIsChecked3] = useState(false); const id1 = 'multi-tile-1'; const id2 = 'multi-tile-2'; const id3 = 'multi-tile-3'; diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx index de361622506..d77fc82a0f7 100644 --- a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx +++ b/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Brand, Card, @@ -17,9 +18,9 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import pfLogo from '../../assets/PF-HorizontalLogo-Color.svg'; export const CardWithImageAndActions: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [isChecked, setIsChecked] = React.useState(false); - const [hasNoOffset, setHasNoOffset] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [isChecked, setIsChecked] = useState(false); + const [hasNoOffset, setHasNoOffset] = useState(false); const onSelect = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md index dc3b730c942..ebbde9e5bf0 100644 --- a/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionList.md @@ -15,6 +15,7 @@ propComponents: ] --- +import { useState } from 'react'; import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, DescriptionListGroup, DescriptionListTermHelpText, DescriptionListTermHelpTextButton, Popover, Checkbox, Card } from '@patternfly/react-core'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx index 63ad0076a42..3c9f75ef828 100644 --- a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Button, DescriptionList, @@ -9,8 +10,8 @@ import { import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const DescriptionListWithCard: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(false); - const [isSelectable, setSelectable] = React.useState(false); + const [isChecked, setIsChecked] = useState(false); + const [isSelectable, setSelectable] = useState(false); const toggleSelectable = (checked: boolean) => { setSelectable(checked ? true : false); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx index 22e3962bf4f..2c41c0e454a 100644 --- a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Button, DescriptionList, @@ -9,8 +10,8 @@ import { import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(false); - const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg'); + const [isChecked, setIsChecked] = useState(false); + const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg'); const toggleDisplaySize = (checked: boolean) => { setDisplaySize(checked ? '2xl' : 'lg'); diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx index 238990874ea..53c798206a4 100644 --- a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx +++ b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Button, DescriptionList, @@ -9,8 +10,8 @@ import { import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(false); - const [displaySize, setDisplaySize] = React.useState<'lg' | '2xl'>('lg'); + const [isChecked, setIsChecked] = useState(false); + const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg'); const toggleDisplaySize = (checked: boolean) => { setDisplaySize(checked ? '2xl' : 'lg'); diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index 2c05cc4a652..7db5e2ad906 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -16,6 +16,7 @@ propComponents: ] --- +import { useState } from 'react'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; ## Examples diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx index adfbe3080e5..846a846a0b4 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownBasic.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; export const DropdownBasic: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx index 3cb1f12e9d6..2cd8eb484a0 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithDescriptions.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; export const DropdownWithDescriptions: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx index cdd53aed518..7a68605eda1 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithGroups.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Dropdown, DropdownGroup, @@ -9,7 +10,7 @@ import { } from '@patternfly/react-core'; export const DropdownWithGroups: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx index c195359b0c2..6dc43da0604 100644 --- a/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx +++ b/packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Dropdown, DropdownItem, DropdownList, Divider, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const DropdownWithKebab: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md index 1654b7325bc..3966abfa196 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md +++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md @@ -4,6 +4,8 @@ section: components cssPrefix: pf-v6-c-empty-state propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyStateActions'] --- + +import { useState } from 'react'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx index 81765806961..c9b3a9bceca 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateWithStatus.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { EmptyState, EmptyStateBody, @@ -8,7 +9,7 @@ import { } from '@patternfly/react-core'; export const EmptyStateWithStatus: React.FunctionComponent = () => { - const [status, setStatus] = React.useState(EmptyStateStatus.success); + const [status, setStatus] = useState(EmptyStateStatus.success); const toggleStatus = () => { interface StatusToggleMap { diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx index ff77ba98af2..9d76f6e10b9 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionBasic.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { ExpandableSection } from '@patternfly/react-core'; export const ExpandableSectionBasic: React.FunctionComponent = () => { - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx index 7c6b5f99a83..3f9048722da 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { ExpandableSection, Badge } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; export const ExpandableSectionCustomToggle: React.FunctionComponent = () => { - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx index 21d17d0e74a..3f7f9042e96 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDetached.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core'; export const ExpandableSectionDetached: React.FunctionComponent = () => { - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); const onToggle = (isExpanded: boolean) => { setIsExpanded(isExpanded); diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx index 2990fe52bf5..e9360aa5b13 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { ExpandableSection } from '@patternfly/react-core'; export const ExpandableSectionDisclosure: React.FunctionComponent = () => { - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx index 83de90fb416..fd0f687bceb 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionTruncateExpansion.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { ExpandableSection, ExpandableSectionVariant } from '@patternfly/react-core'; export const ExpandableSectionTruncateExpansion: React.FunctionComponent = () => { - const [isExpanded, setIsExpanded] = React.useState(false); + const [isExpanded, setIsExpanded] = useState(false); const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => { setIsExpanded(isExpanded); diff --git a/packages/react-core/src/components/FileUpload/examples/FileUpload.md b/packages/react-core/src/components/FileUpload/examples/FileUpload.md index 4280d6a22c3..e6b86e780cb 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUpload.md +++ b/packages/react-core/src/components/FileUpload/examples/FileUpload.md @@ -6,6 +6,7 @@ section: components subsection: file-upload --- +import { useState } from 'react'; import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx index c0aa86c7e67..0a33f46eb75 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomPreview.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { FileUpload } from '@patternfly/react-core'; import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon'; export const CustomPreviewFileUpload: React.FunctionComponent = () => { - const [value, setValue] = React.useState(); - const [filename, setFilename] = React.useState(''); + const [value, setValue] = useState(); + const [filename, setFilename] = useState(''); const handleFileInputChange = (_, file: File) => { setValue(file); diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx index 27e4d3bffe8..159b26dc5a2 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadCustomUpload.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Checkbox } from '@patternfly/react-core'; export const CustomPreviewFileUpload: React.FunctionComponent = () => { @@ -13,17 +14,17 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => { 'hasPlaceholderText' ]; - const [value, setValue] = React.useState(''); - const [filename, setFilename] = React.useState(false); - const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = React.useState(true); - const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true); - const [isLoading, setIsLoading] = React.useState(false); - const [isDragActive, setIsDragActive] = React.useState(false); - const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false); - const [hasCustomFilePreview, setHasCustomFilePreview] = React.useState(false); - const [hasHelperText, setHasHelperText] = React.useState(false); - const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false); - const [checkedState, setCheckedState] = React.useState([ + const [value, setValue] = useState(''); + const [filename, setFilename] = useState(false); + const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = useState(true); + const [isClearButtonDisabled, setIsClearButtonDisabled] = useState(true); + const [isLoading, setIsLoading] = useState(false); + const [isDragActive, setIsDragActive] = useState(false); + const [hideDefaultPreview, setHideDefaultPreview] = useState(false); + const [hasCustomFilePreview, setHasCustomFilePreview] = useState(false); + const [hasHelperText, setHasHelperText] = useState(false); + const [hasPlaceholderText, setHasPlaceholderText] = useState(false); + const [checkedState, setCheckedState] = useState([ filename, isBrowseButtonDisabled, isClearButtonDisabled, diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx index d8d5fae2610..f9e9fea9dcf 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleFile.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { FileUpload } from '@patternfly/react-core'; export const SimpleFileUpload: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [filename, setFilename] = React.useState(''); + const [value, setValue] = useState(''); + const [filename, setFilename] = useState(''); const handleFileInputChange = (_, file: File) => { setFilename(file.name); diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx index 876d6f773ee..ee28f15bd27 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadSimpleText.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { FileUpload, DropEvent } from '@patternfly/react-core'; export const SimpleTextFileUpload: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [filename, setFilename] = React.useState(''); - const [isLoading, setIsLoading] = React.useState(false); + const [value, setValue] = useState(''); + const [filename, setFilename] = useState(''); + const [isLoading, setIsLoading] = useState(false); const handleFileInputChange = (_, file: File) => { setFilename(file.name); diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx index 18e3a368019..013e5eb9a09 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { FileUpload, DropEvent } from '@patternfly/react-core'; export const TextFileWithEditsAllowed: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [filename, setFilename] = React.useState(''); - const [isLoading, setIsLoading] = React.useState(false); + const [value, setValue] = useState(''); + const [filename, setFilename] = useState(''); + const [isLoading, setIsLoading] = useState(false); const handleFileInputChange = (_, file: File) => { setFilename(file.name); diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx index d0284856406..5f4f9f3c726 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { FileUpload, DropzoneErrorCode, @@ -10,11 +11,11 @@ import { } from '@patternfly/react-core'; export const TextFileUploadWithRestrictions: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [filename, setFilename] = React.useState(''); - const [isLoading, setIsLoading] = React.useState(false); - const [isRejected, setIsRejected] = React.useState(false); - const [message, setMessage] = React.useState('Must be a CSV file no larger than 1 KB'); + const [value, setValue] = useState(''); + const [filename, setFilename] = useState(''); + const [isLoading, setIsLoading] = useState(false); + const [isRejected, setIsRejected] = useState(false); + const [message, setMessage] = useState('Must be a CSV file no larger than 1 KB'); const handleFileInputChange = (_, file: File) => { setFilename(file.name); diff --git a/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx b/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx index ddeb124b14e..38b8bf5eb67 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx +++ b/packages/react-core/src/components/FileUpload/examples/FileUploadWithHelperText.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { FileUpload, FileUploadHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core'; export const FileUploadWithHelperText: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); - const [filename, setFilename] = React.useState(''); - const [isLoading, setIsLoading] = React.useState(false); + const [value, setValue] = useState(''); + const [filename, setFilename] = useState(''); + const [isLoading, setIsLoading] = useState(false); const handleFileInputChange = (_, file: File) => { setFilename(file.name); diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelect.md b/packages/react-core/src/components/FormSelect/examples/FormSelect.md index ba075ff4a6d..0a2d572af92 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelect.md +++ b/packages/react-core/src/components/FormSelect/examples/FormSelect.md @@ -6,6 +6,7 @@ cssPrefix: pf-v6-c-form-control propComponents: ['FormSelect', 'FormSelectOption', 'FormSelectOptionGroup'] ouia: true --- +import { useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx index cf70afb039d..0ee1d7749ad 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectBasic.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { FormSelect, FormSelectOption } from '@patternfly/react-core'; export const FormSelectBasic: React.FunctionComponent = () => { - const [formSelectValue, setFormSelectValue] = React.useState('mrs'); + const [formSelectValue, setFormSelectValue] = useState('mrs'); const onChange = (_event: React.FormEvent, value: string) => { setFormSelectValue(value); diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx index 257a8e8cd4a..d8508fc079f 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectDisabled.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { FormSelect, FormSelectOption } from '@patternfly/react-core'; export const FormSelectDisabled: React.FunctionComponent = () => { - const [formSelectValue, setFormSelectValue] = React.useState('mrs'); + const [formSelectValue, setFormSelectValue] = useState('mrs'); const onChange = (_event: React.FormEvent, value: string) => { setFormSelectValue(value); diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx index 9aafd8a6c5c..c45d0f41ea9 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectGrouped.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core'; export const FormSelectGrouped: React.FunctionComponent = () => { - const [formSelectValue, setFormSelectValue] = React.useState('2'); + const [formSelectValue, setFormSelectValue] = useState('2'); const onChange = (_event: React.FormEvent, value: string) => { setFormSelectValue(value); diff --git a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx index 0ccd5624d33..a8acfbaf972 100644 --- a/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx +++ b/packages/react-core/src/components/FormSelect/examples/FormSelectValidated.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Form, FormGroup, @@ -10,9 +11,9 @@ import { } from '@patternfly/react-core'; export const FormSelectValidated: React.FunctionComponent = () => { - const [formValue, setFormValue] = React.useState(''); - const [helperText, setHelperText] = React.useState(''); - const [validated, setValidated] = React.useState(ValidatedOptions.default); + const [formValue, setFormValue] = useState(''); + const [helperText, setHelperText] = useState(''); + const [validated, setValidated] = useState(ValidatedOptions.default); const simulateNetworkCall = (callback: () => void) => { setTimeout(callback, 2000); diff --git a/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx b/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx index 96e8259a5af..841fb4d6b95 100644 --- a/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx +++ b/packages/react-core/src/components/Hint/examples/HintActionsWithNoOffset.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Hint, HintTitle, HintBody, Button, Checkbox } from '@patternfly/react-core'; export const HintActionsWithNoOffset: React.FunctionComponent = () => { - const [hasNoActionsOffset, setHasNoActionsOffset] = React.useState(false); + const [hasNoActionsOffset, setHasNoActionsOffset] = useState(false); const toggleOffset = (checked: boolean) => { setHasNoActionsOffset(checked); diff --git a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx index 1d7997114b2..47740a26ec6 100644 --- a/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx +++ b/packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Hint, HintTitle, @@ -14,7 +15,7 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const HintBasicWithTitle: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Label/examples/Label.md b/packages/react-core/src/components/Label/examples/Label.md index 29ebf65415c..4110ebdf4a1 100644 --- a/packages/react-core/src/components/Label/examples/Label.md +++ b/packages/react-core/src/components/Label/examples/Label.md @@ -5,7 +5,7 @@ cssPrefix: ['pf-v6-c-label', 'pf-v6-c-label-group'] propComponents: ['Label', 'LabelGroup'] --- -import { Fragment, useState } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import './Label.css'; diff --git a/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx b/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx index 7b2a67c1cd8..d4435e94f70 100644 --- a/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx +++ b/packages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Label, LabelGroup, LabelProps } from '@patternfly/react-core'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; export const LabelGroupCategoryRemovable: React.FunctionComponent = () => { - const [labels, setLabels] = React.useState([ + const [labels, setLabels] = useState([ ['Label 1', 'grey'], ['Label 2', 'blue'], ['Label 3', 'green'], diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx index 9038b17a0e2..99ee3b6e653 100644 --- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx +++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAdd.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { LabelGroup, Label } from '@patternfly/react-core'; export const LabelGroupEditableAdd: React.FunctionComponent = () => { - const [idIndex, setIdIndex] = React.useState(3); - const [labels, setLabels] = React.useState([ + const [idIndex, setIdIndex] = useState(3); + const [labels, setLabels] = useState([ { name: 'Label 1', id: 0 }, { name: 'Label 2', id: 1 }, { diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx index 9fa281067b5..51d1d78b976 100644 --- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx +++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx @@ -1,13 +1,14 @@ +import { useEffect, useRef, useState } from 'react'; import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core'; export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => { - const toggleRef = React.useRef(undefined); - const menuRef = React.useRef(undefined); - const containerRef = React.useRef(undefined); + const toggleRef = useRef(undefined); + const menuRef = useRef(undefined); + const containerRef = useRef(undefined); - const [idIndex, setIdIndex] = React.useState(3); - const [isOpen, setIsOpen] = React.useState(false); - const [labels, setLabels] = React.useState([ + const [idIndex, setIdIndex] = useState(3); + const [isOpen, setIsOpen] = useState(false); + const [labels, setLabels] = useState([ { name: 'Label 1', id: 0 }, { name: 'Label 2', id: 1 }, { @@ -67,7 +68,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx index 2ef1ff016b9..d641a5fd0ec 100644 --- a/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx +++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { LabelGroup, Label, @@ -17,27 +18,27 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; export const LabelGroupEditableAddModal: React.FunctionComponent = () => { - const [isModalOpen, setModalOpen] = React.useState(false); - const [idIndex, setIdIndex] = React.useState(7); - const [labelText, setLabelText] = React.useState(''); - const [color, setColor] = React.useState(); - const [icon, setIcon] = React.useState(); - const [labelType, setLabelType] = React.useState('filled'); - const [isClosable, setIsCloseable] = React.useState(false); - const [isEditable, setIsEditable] = React.useState(false); - const labelInputRef = React.useRef(null); + const [isModalOpen, setModalOpen] = useState(false); + const [idIndex, setIdIndex] = useState(7); + const [labelText, setLabelText] = useState(''); + const [color, setColor] = useState(); + const [icon, setIcon] = useState(); + const [labelType, setLabelType] = useState('filled'); + const [isClosable, setIsCloseable] = useState(false); + const [isEditable, setIsEditable] = useState(false); + const labelInputRef = useRef(null); - const [isColorOpen, setIsColorOpen] = React.useState(false); - const colorMenuRef = React.useRef(null); - const colorContainerRef = React.useRef(null); - const colorToggleRef = React.useRef(null); + const [isColorOpen, setIsColorOpen] = useState(false); + const colorMenuRef = useRef(null); + const colorContainerRef = useRef(null); + const colorToggleRef = useRef(null); - const [isIconOpen, setIsIconOpen] = React.useState(false); - const iconMenuRef = React.useRef(null); - const iconContainerRef = React.useRef(null); - const iconToggleRef = React.useRef(null); + const [isIconOpen, setIsIconOpen] = useState(false); + const iconMenuRef = useRef(null); + const iconContainerRef = useRef(null); + const iconToggleRef = useRef(null); - const [labels, setLabels] = React.useState([ + const [labels, setLabels] = useState([ { name: 'Label 1', id: 4 }, { name: 'Label 2', id: 5 }, { @@ -106,7 +107,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => { setModalOpen(!isModalOpen); }; - React.useEffect(() => { + useEffect(() => { if (isModalOpen && labelInputRef && labelInputRef.current) { (labelInputRef.current as HTMLInputElement).focus(); } @@ -136,7 +137,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => { } }; - React.useEffect(() => { + useEffect(() => { window.addEventListener('keydown', handleMenuKeys); window.addEventListener('click', handleClickOutside); return () => { diff --git a/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx b/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx index 4e35edd9341..de97126c99a 100644 --- a/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx +++ b/packages/react-core/src/components/Label/examples/LabelGroupEditableLabels.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { LabelGroup, Label } from '@patternfly/react-core'; export const LabelGroupEditableLabels: React.FunctionComponent = () => { - const [label1, setLabel1] = React.useState('Editable label'); - const [label2, setLabel2] = React.useState('Editable label 2'); - const [label3, setLabel3] = React.useState('Editable label 3'); + const [label1, setLabel1] = useState('Editable label'); + const [label2, setLabel2] = useState('Editable label 2'); + const [label3, setLabel3] = useState('Editable label 3'); return ( diff --git a/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx b/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx index d0836b118e1..494bf74b96f 100644 --- a/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx +++ b/packages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Label, LabelGroup, LabelProps } from '@patternfly/react-core'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; export const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => { - const [labels, setLabels] = React.useState([ + const [labels, setLabels] = useState([ ['Label 1', 'grey'], ['Label 2', 'blue'], ['Label 3', 'green'], diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md index 136dc4064f3..cc7453a89c4 100644 --- a/packages/react-core/src/components/Menu/examples/Menu.md +++ b/packages/react-core/src/components/Menu/examples/Menu.md @@ -20,7 +20,7 @@ propComponents: ouia: true --- -import { Fragment, useState } from 'react'; +import { Fragment, createRef, useEffect, useRef, useState } from 'react'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; diff --git a/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx b/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx index cbe5cca57fc..231c75f3f88 100644 --- a/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuDangerMenuItem.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Divider, Menu, MenuContent, MenuItem, MenuList } from '@patternfly/react-core'; export const MenuDangerMenuItem: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; diff --git a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx index de9925cc349..512db494d7c 100644 --- a/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuFilterDrilldown.tsx @@ -1,3 +1,4 @@ +import { createRef, useState } from 'react'; import { Menu, MenuContent, @@ -11,10 +12,10 @@ import { } from '@patternfly/react-core'; export const MenuWithDrilldown: React.FunctionComponent = () => { - const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); - const [drilldownPath, setDrilldownPath] = React.useState([]); - const [menuHeights, setMenuHeights] = React.useState({}); - const [activeMenu, setActiveMenu] = React.useState('filter_drilldown-rootMenu'); + const [menuDrilledIn, setMenuDrilledIn] = useState([]); + const [drilldownPath, setDrilldownPath] = useState([]); + const [menuHeights, setMenuHeights] = useState({}); + const [activeMenu, setActiveMenu] = useState('filter_drilldown-rootMenu'); const drillIn = ( _event: React.KeyboardEvent | React.MouseEvent, @@ -44,8 +45,8 @@ export const MenuWithDrilldown: React.FunctionComponent = () => { } }; - const searchRef = React.createRef(); - const [startInput, setStartInput] = React.useState(''); + const searchRef = createRef(); + const [startInput, setStartInput] = useState(''); const handleStartTextInputChange = (value: string) => { setStartInput(value); diff --git a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx index 7e650dcfdd1..af9bc152f98 100644 --- a/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuFilteringWithSearchInput.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Menu, MenuList, @@ -10,8 +11,8 @@ import { } from '@patternfly/react-core'; export const MenuFilteringWithSearchInput: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); - const [input, setInput] = React.useState(''); + const [activeItem, setActiveItem] = useState(0); + const [input, setInput] = useState(''); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx b/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx index 7f04d95f6c4..55f6a21ce87 100644 --- a/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon'; export const MenuOptionMultiSelect: React.FunctionComponent = () => { - const [selectedItems, setSelectedItems] = React.useState([]); + const [selectedItems, setSelectedItems] = useState([]); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; diff --git a/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx b/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx index f0933e56841..14dfd07279d 100644 --- a/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon'; export const MenuOptionSingleSelect: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); - const [selectedItem, setSelectedItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); + const [selectedItem, setSelectedItem] = useState(0); const onSelect = (_event, itemId) => { setActiveItem(itemId); diff --git a/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx b/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx index 14fa48aef16..187c79cc5a5 100644 --- a/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuScrollable.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; export const MenuScrollable: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event, itemId) => { // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx b/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx index 0cb266f0a26..eb5d8129ccb 100644 --- a/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuScrollableCustomMenuHeight.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; export const MenuScrollableCustomMenuHeight: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event, itemId) => { // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx b/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx index c36a34ab9ac..00f47e38e8e 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithActions.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, MenuItemAction } from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon'; @@ -5,7 +6,7 @@ import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-i import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; export const MenuWithActions: React.FunctionComponent = () => { - const [selectedItems, setSelectedItems] = React.useState([0, 2, 3]); + const [selectedItems, setSelectedItems] = useState([0, 2, 3]); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; diff --git a/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx b/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx index 7669eaa4d73..b90e3bd45d3 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithCheckbox.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; export const MenuWithCheckbox: React.FunctionComponent = () => { - const [selectedItems, setSelectedItems] = React.useState([]); + const [selectedItems, setSelectedItems] = useState([]); /* eslint no-unused-vars: ["error", {"args": "after-used"}] */ const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx index a7010bece52..c260665fec2 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithDescription.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; export const MenuWithDescription: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx index dfffc827a9b..5dd3e848c7a 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldown.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core'; import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; @@ -5,10 +6,10 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; export const MenuWithDrilldown: React.FunctionComponent = () => { - const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); - const [drilldownPath, setDrilldownPath] = React.useState([]); - const [menuHeights, setMenuHeights] = React.useState({}); - const [activeMenu, setActiveMenu] = React.useState('drilldown-rootMenu'); + const [menuDrilledIn, setMenuDrilledIn] = useState([]); + const [drilldownPath, setDrilldownPath] = useState([]); + const [menuHeights, setMenuHeights] = useState({}); + const [activeMenu, setActiveMenu] = useState('drilldown-rootMenu'); const drillIn = ( _event: React.KeyboardEvent | React.MouseEvent, diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx index 69d8909fbe9..fc6864134c6 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownInitialState.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core'; import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; @@ -5,13 +6,13 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; export const MenuDrilldownInitialState: React.FunctionComponent = () => { - const [menuDrilledIn, setMenuDrilledIn] = React.useState([ + const [menuDrilledIn, setMenuDrilledIn] = useState([ 'initial-state-rootMenu', 'initial-state-drilldownMenuStart' ]); - const [drilldownPath, setDrilldownPath] = React.useState(['group:start_rollout', 'group:app_grouping']); - const [menuHeights, setMenuHeights] = React.useState({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state - const [activeMenu, setActiveMenu] = React.useState('initial-state-drilldownMenuStartGrouping'); + const [drilldownPath, setDrilldownPath] = useState(['group:start_rollout', 'group:app_grouping']); + const [menuHeights, setMenuHeights] = useState({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state + const [activeMenu, setActiveMenu] = useState('initial-state-drilldownMenuStartGrouping'); const drillIn = ( _event: React.KeyboardEvent | React.MouseEvent, diff --git a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx index d868155abdd..013ad5039bb 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithDrilldownSubmenuFunctions.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem, Divider, DrilldownMenu } from '@patternfly/react-core'; import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; @@ -5,10 +6,10 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () => { - const [menuDrilledIn, setMenuDrilledIn] = React.useState([]); - const [drilldownPath, setDrilldownPath] = React.useState([]); - const [menuHeights, setMenuHeights] = React.useState({}); - const [activeMenu, setActiveMenu] = React.useState('functions-rootMenu'); + const [menuDrilledIn, setMenuDrilledIn] = useState([]); + const [drilldownPath, setDrilldownPath] = useState([]); + const [menuHeights, setMenuHeights] = useState({}); + const [activeMenu, setActiveMenu] = useState('functions-rootMenu'); const drillIn = ( _event: React.KeyboardEvent | React.MouseEvent, diff --git a/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx b/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx index eff3431967d..1302c5cda6e 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithFooter.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Menu, MenuList, MenuItem, MenuContent, MenuFooter, Button } from '@patternfly/react-core'; export const MenuWithFooter: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; diff --git a/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx b/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx index ab9fdb780c1..32f91f9f7d8 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithIcons.tsx @@ -1,10 +1,11 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon'; import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; export const MenuWithIcons: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx b/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx index 9fafd131a14..111ff3b93bc 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithLinks.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; export const MenuWithLinks: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx b/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx index 6c319da9bc0..87b9ff12a2d 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithSeparators.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Divider, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; export const MenuWithSeparators: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; diff --git a/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx b/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx index 1ea4f912309..beac4de49eb 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithTitledGroups.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Menu, MenuContent, MenuGroup, MenuList, MenuItem, Divider } from '@patternfly/react-core'; export const MenuWithTitledGroups: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.MouseEvent | undefined, itemId: number | string | undefined) => { const item = itemId as number; // eslint-disable-next-line no-console diff --git a/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx b/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx index f856a0968ad..481c16f50c5 100644 --- a/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx +++ b/packages/react-core/src/components/Menu/examples/MenuWithViewMore.tsx @@ -1,11 +1,12 @@ +import { useEffect, useRef, useState } from 'react'; import { Menu, MenuList, MenuItem, MenuContent, Spinner } from '@patternfly/react-core'; export const MenuWithViewMore: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); - const [isLoading, setIsLoading] = React.useState(false); - const [numOptions, setNumOptions] = React.useState(3); + const [activeItem, setActiveItem] = useState(0); + const [isLoading, setIsLoading] = useState(false); + const [numOptions, setNumOptions] = useState(3); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [menuOptions, setMenuOptions] = React.useState([ + const [menuOptions, setMenuOptions] = useState([ Action , @@ -40,12 +41,12 @@ export const MenuWithViewMore: React.FunctionComponent = () => { Final option ]); - const [visibleOptions, setVisibleOptions] = React.useState(menuOptions.slice(0, numOptions)); + const [visibleOptions, setVisibleOptions] = useState(menuOptions.slice(0, numOptions)); - const activeItemRef = React.useRef(null); - const viewMoreRef = React.useRef(null); + const activeItemRef = useRef(null); + const viewMoreRef = useRef(null); - React.useEffect(() => { + useEffect(() => { activeItemRef.current?.focus(); }, [visibleOptions]); diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 877406d275e..bed5edd7cae 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-menu-toggle propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox'] --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; import './MenuToggle.css' import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx index 6cb4f054a31..6358c1a6566 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { MenuToggle, TextInputGroup, @@ -8,7 +9,7 @@ import { import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; export const MenuToggleTypeahead: React.FunctionComponent = () => { - const [inputValue, setInputValue] = React.useState(''); + const [inputValue, setInputValue] = useState(''); const onTextInputChange = (_event: React.FormEvent, value: string) => { setInputValue(value); diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md index d704d98f25a..9ded7604897 100644 --- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md +++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUpload.md @@ -7,6 +7,7 @@ propComponents: ['MultipleFileUpload', 'MultipleFileUploadMain', 'MultipleFileUploadStatus', 'MultipleFileUploadStatusItem'] --- +import { useEffect, useState } from 'react'; import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; Multiple file upload is able to: diff --git a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx index a26be260968..db53acd016d 100644 --- a/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx @@ -1,3 +1,4 @@ +import { useEffect, useState } from 'react'; import { MultipleFileUpload, MultipleFileUploadMain, @@ -18,12 +19,12 @@ interface readFile { } export const MultipleFileUploadBasic: React.FunctionComponent = () => { - const [isHorizontal, setIsHorizontal] = React.useState(false); - const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false); - const [currentFiles, setCurrentFiles] = React.useState([]); - const [readFileData, setReadFileData] = React.useState([]); - const [showStatus, setShowStatus] = React.useState(false); - const [statusIcon, setStatusIcon] = React.useState('inProgress'); + const [isHorizontal, setIsHorizontal] = useState(false); + const [fileUploadShouldFail, setFileUploadShouldFail] = useState(false); + const [currentFiles, setCurrentFiles] = useState([]); + const [readFileData, setReadFileData] = useState([]); + const [showStatus, setShowStatus] = useState(false); + const [statusIcon, setStatusIcon] = useState('inProgress'); // only show the status component once a file has been uploaded, but keep the status list component itself even if all files are removed if (!showStatus && currentFiles.length > 0) { @@ -31,7 +32,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => { } // determine the icon that should be shown for the overall status list - React.useEffect(() => { + useEffect(() => { if (readFileData.length < currentFiles.length) { setStatusIcon('inProgress'); } else if (readFileData.every((file) => file.loadResult === 'success')) { diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md index 093e99d6083..df18298f17b 100644 --- a/packages/react-core/src/components/Nav/examples/Nav.md +++ b/packages/react-core/src/components/Nav/examples/Nav.md @@ -6,6 +6,7 @@ propComponents: ['Nav', 'NavList', 'NavGroup', 'NavItem', 'NavItemSeparator', 'N ouia: true --- +import { useState } from 'react'; import './nav.css'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import UserIcon from '@patternfly/react-icons/dist/esm/icons/user-icon'; diff --git a/packages/react-core/src/components/Nav/examples/NavDefault.tsx b/packages/react-core/src/components/Nav/examples/NavDefault.tsx index c3bc1386532..fd9beb83fd0 100644 --- a/packages/react-core/src/components/Nav/examples/NavDefault.tsx +++ b/packages/react-core/src/components/Nav/examples/NavDefault.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Nav, NavItem, NavList } from '@patternfly/react-core'; export const NavDefault: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.FormEvent, result: { itemId: number | string }) => { setActiveItem(result.itemId as number); diff --git a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx index 3461449e6fc..8fc66179cb6 100644 --- a/packages/react-core/src/components/Nav/examples/NavExpandable.tsx +++ b/packages/react-core/src/components/Nav/examples/NavExpandable.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core'; export const NavExpandableExample: React.FunctionComponent = () => { - const [activeGroup, setActiveGroup] = React.useState('nav-expandable-group-1'); - const [activeItem, setActiveItem] = React.useState('nav-expandable-group-1_item-1'); + const [activeGroup, setActiveGroup] = useState('nav-expandable-group-1'); + const [activeItem, setActiveItem] = useState('nav-expandable-group-1_item-1'); const onSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx index 5c50aef9d32..d832d1d31ad 100644 --- a/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx +++ b/packages/react-core/src/components/Nav/examples/NavExpandableThirdLevel.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core'; export const NavExpandableThirdLevel: React.FunctionComponent = () => { - const [activeGroup, setActiveGroup] = React.useState('nav-expand3rd-group-1'); - const [activeItem, setActiveItem] = React.useState('nav-expand3rd-group-1_item-1'); + const [activeGroup, setActiveGroup] = useState('nav-expand3rd-group-1'); + const [activeItem, setActiveItem] = useState('nav-expand3rd-group-1_item-1'); const onSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/components/Nav/examples/NavFlyout.tsx b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx index a0d42e028d7..27a5f1a9ec7 100644 --- a/packages/react-core/src/components/Nav/examples/NavFlyout.tsx +++ b/packages/react-core/src/components/Nav/examples/NavFlyout.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Nav, NavItem, NavList, Menu, MenuContent, MenuList, MenuItem } from '@patternfly/react-core'; export const NavFlyout: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState('nav-flyout-default-link-1'); + const [activeItem, setActiveItem] = useState('nav-flyout-default-link-1'); const onSelect = (event: React.FormEvent, result: { itemId: number | string }) => { setActiveItem(result.itemId as string); diff --git a/packages/react-core/src/components/Nav/examples/NavGrouped.tsx b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx index e6288c70a61..e13dd402471 100644 --- a/packages/react-core/src/components/Nav/examples/NavGrouped.tsx +++ b/packages/react-core/src/components/Nav/examples/NavGrouped.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Nav, NavItem, NavGroup } from '@patternfly/react-core'; export const NavGrouped: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState('group-1_item-1'); + const [activeItem, setActiveItem] = useState('group-1_item-1'); const onSelect = (_event: React.FormEvent, result: { itemId: number | string }) => { setActiveItem(result.itemId as string); diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx index 3ed10875e86..e998f9332ea 100644 --- a/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx +++ b/packages/react-core/src/components/Nav/examples/NavHorizontalNav.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Nav, NavItem, NavList } from '@patternfly/react-core'; export const NavHorizontalNav: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.FormEvent, result: { itemId: number | string }) => { setActiveItem(result.itemId as number); diff --git a/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx index 85f0c8726a7..5eb4823580e 100644 --- a/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx +++ b/packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Nav, NavItem, NavList } from '@patternfly/react-core'; export const NavHorizontalSubNav: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.FormEvent, result: { itemId: number | string }) => { setActiveItem(result.itemId as number); diff --git a/packages/react-core/src/components/Nav/examples/NavIcons.tsx b/packages/react-core/src/components/Nav/examples/NavIcons.tsx index 8650cf9a922..47e7cbf4098 100644 --- a/packages/react-core/src/components/Nav/examples/NavIcons.tsx +++ b/packages/react-core/src/components/Nav/examples/NavIcons.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Nav, NavItem, NavList } from '@patternfly/react-core'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; @@ -5,7 +6,7 @@ import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon'; export const NavIcons: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = (_event: React.FormEvent, result: { itemId: number | string }) => { setActiveItem(result.itemId as number); diff --git a/packages/react-core/src/components/Nav/examples/NavMixed.tsx b/packages/react-core/src/components/Nav/examples/NavMixed.tsx index a53de216055..c867d0a4cd9 100644 --- a/packages/react-core/src/components/Nav/examples/NavMixed.tsx +++ b/packages/react-core/src/components/Nav/examples/NavMixed.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Nav, NavExpandable, NavItem, NavItemSeparator, NavList } from '@patternfly/react-core'; export const NavMixed: React.FunctionComponent = () => { - const [activeGroup, setActiveGroup] = React.useState(''); - const [activeItem, setActiveItem] = React.useState('ungrouped_item-1'); + const [activeGroup, setActiveGroup] = useState(''); + const [activeItem, setActiveItem] = useState('ungrouped_item-1'); const onSelect = ( _event: React.FormEvent, diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md index b6fa9eb01b6..4d0d3b7a662 100644 --- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md +++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadge.md @@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-notification-badge propComponents: ['NotificationBadge'] --- +import { useState } from 'react'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; ## Examples diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx index 24a86c1b1dd..29992671144 100644 --- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx +++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core'; export const NotificationBadgeBasic: React.FunctionComponent = () => { - const [readExpanded, setReadExpanded] = React.useState(false); - const [unreadExpanded, setUnreadExpanded] = React.useState(false); - const [attentionExpanded, setAttentionExpanded] = React.useState(false); + const [readExpanded, setReadExpanded] = useState(false); + const [unreadExpanded, setUnreadExpanded] = useState(false); + const [attentionExpanded, setAttentionExpanded] = useState(false); const onReadClick = () => { setReadExpanded(!readExpanded); diff --git a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx index 6fc325742eb..eea9b881358 100644 --- a/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx +++ b/packages/react-core/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core'; export const NotificationBadgeWithCount: React.FunctionComponent = () => { - const [readExpanded, setReadExpanded] = React.useState(false); - const [unreadExpanded, setUnreadExpanded] = React.useState(false); - const [attentionExpanded, setAttentionExpanded] = React.useState(false); + const [readExpanded, setReadExpanded] = useState(false); + const [unreadExpanded, setUnreadExpanded] = useState(false); + const [attentionExpanded, setAttentionExpanded] = useState(false); const onReadClick = () => { setReadExpanded(!readExpanded); diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md index 9b8d1c1797c..c437ed981ce 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md @@ -16,6 +16,7 @@ propComponents: ] --- +import { useState } from 'react'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx index 778f977b477..90c4a1d907b 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { NotificationDrawer, NotificationDrawerBody, @@ -15,7 +16,7 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const NotificationDrawerBasic: React.FunctionComponent = () => { - const [isOpenMap, setIsOpenMap] = React.useState(new Array(7).fill(false)); + const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false)); const onToggle = (index: number) => () => { const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)]; diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx index b3c05e21b35..5c857d7cf2d 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Button, EmptyState, @@ -24,10 +25,10 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; export const NotificationDrawerGroups: React.FunctionComponent = () => { - const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false); - const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true); - const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false); - const [isOpenMap, setIsOpenMap] = React.useState({}); + const [firstGroupExpanded, setFirstGroupExpanded] = useState(false); + const [secondGroupExpanded, setSecondGroupExpanded] = useState(true); + const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false); + const [isOpenMap, setIsOpenMap] = useState({}); const onToggle = (id: string) => { setIsOpenMap((prevState) => ({ ...prevState, [id]: !prevState[id] })); diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx index 5d28f124e69..ebb1d9da483 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Button, EmptyState, @@ -18,9 +19,9 @@ import { import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; export const NotificationDrawerLightweight: React.FunctionComponent = () => { - const [firstGroupExpanded, setFirstGroupExpanded] = React.useState(false); - const [secondGroupExpanded, setSecondGroupExpanded] = React.useState(true); - const [thirdGroupExpanded, setThirdGroupExpanded] = React.useState(false); + const [firstGroupExpanded, setFirstGroupExpanded] = useState(false); + const [secondGroupExpanded, setSecondGroupExpanded] = useState(true); + const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false); const toggleFirstDrawer = (_event: any, value: boolean) => { setFirstGroupExpanded(value); diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInput.md b/packages/react-core/src/components/NumberInput/examples/NumberInput.md index b4dac4c05c3..c2336cc9481 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInput.md +++ b/packages/react-core/src/components/NumberInput/examples/NumberInput.md @@ -5,7 +5,7 @@ cssPrefix: pf-v6-c-number-input propComponents: ['NumberInput'] --- -import { Fragment, useState } from 'react'; +import { Fragment, useReducer, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx index 1fee41baee3..8c2810c6895 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStep.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputCustomStep: React.FunctionComponent = () => { - const [value, setValue] = React.useState(90); + const [value, setValue] = useState(90); const step = 3; const stepper = (stepValue: number) => { diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx index 09f79ff90e5..311e21ee7fa 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => { - const [value, setValue] = React.useState(90); + const [value, setValue] = useState(90); const minValue = 90; const maxValue = 100; const step = 3; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx index b4581a34533..3d8aa925f3e 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDefault.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputDefault: React.FunctionComponent = () => { - const [value, setValue] = React.useState(90); + const [value, setValue] = useState(90); const onMinus = () => { const newValue = (value || 0) - 1; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx index 92f56e999c8..cdf7d216f50 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputDisabled.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { NumberInput } from '@patternfly/react-core'; export const NumberInputDisabled: React.FunctionComponent = () => { - const [value, setValue] = React.useState(100); + const [value, setValue] = useState(100); const minValue = 0; const maxValue = 100; diff --git a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx index 95a9c18e942..bbf2b9eb7a5 100644 --- a/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx +++ b/packages/react-core/src/components/NumberInput/examples/NumberInputWithStatus.tsx @@ -1,11 +1,12 @@ +import { useReducer, useState } from 'react'; import { NumberInput, ValidatedOptions } from '@patternfly/react-core'; export const NumberInputWithStatus: React.FunctionComponent = () => { const max = 10; const min = 0; - const [validated, setValidated] = React.useState(ValidatedOptions.success); - const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5); + const [validated, setValidated] = useState(ValidatedOptions.success); + const [value, setValue] = useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5); const onPlus = () => { const newVal = (value || 0) + 1; diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md index 06ad970c385..e73498c856d 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md @@ -13,6 +13,7 @@ propComponents: ] --- +import { useRef, useState } from 'react'; import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon'; import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon'; import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx index bf7da51a3fc..e124e07a507 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx @@ -1,3 +1,4 @@ +import { useRef, useState } from 'react'; import { OverflowMenu, OverflowMenuControl, @@ -14,9 +15,9 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [containerWidth, setContainerWidth] = React.useState(100); - const containerRef = React.useRef(null); + const [isOpen, setIsOpen] = useState(false); + const [containerWidth, setContainerWidth] = useState(100); + const containerRef = useRef(null); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx index 146fd403b0a..4b2b93c271a 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { OverflowMenu, OverflowMenuControl, @@ -17,7 +18,7 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; export const OverflowMenuGroupTypes: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx index 7af612a39db..0484322ebfa 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { OverflowMenu, OverflowMenuControl, @@ -17,7 +18,7 @@ import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon'; export const OverflowMenuMultiGroup: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx index 734ba6b8d0e..508b9dccc7b 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { OverflowMenu, OverflowMenuControl, @@ -14,7 +15,7 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuPersistent: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx index 92069de66eb..25998691118 100644 --- a/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx +++ b/packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { OverflowMenu, OverflowMenuControl, @@ -12,7 +13,7 @@ import { import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); const onToggle = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md index cf653fe4899..59f0f02fb7b 100644 --- a/packages/react-core/src/components/Page/examples/Page.md +++ b/packages/react-core/src/components/Page/examples/Page.md @@ -6,6 +6,7 @@ propComponents: ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton'] --- +import { useState } from 'react'; import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth'; diff --git a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx index f7cd297809d..b475f1da08d 100644 --- a/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx +++ b/packages/react-core/src/components/Page/examples/PageCenteredSection.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Page, Masthead, @@ -21,7 +22,7 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth'; export const PageCenteredSection: React.FunctionComponent = () => { - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx index fea37838ef4..4c113527085 100644 --- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx +++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Page, Masthead, @@ -24,7 +25,7 @@ import { import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; export const PageGroupSection: React.FunctionComponent = () => { - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx index 8e88b709566..96eabf69958 100644 --- a/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx +++ b/packages/react-core/src/components/Page/examples/PageMainSectionPadding.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Page, Masthead, @@ -17,7 +18,7 @@ import { import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; export const PageMainSectionPadding: React.FunctionComponent = () => { - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx index 6e7713c6e64..a510177e9d3 100644 --- a/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx +++ b/packages/react-core/src/components/Page/examples/PageMainSectionVariations.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Page, Masthead, @@ -17,7 +18,7 @@ import { import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; export const PageMainSectionPadding: React.FunctionComponent = () => { - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx index ac4135dd7c8..9b4943792bb 100644 --- a/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx +++ b/packages/react-core/src/components/Page/examples/PageMultipleSidebarBody.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Page, Masthead, @@ -17,7 +18,7 @@ import { import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; export const PageMultipleSidebarBody: React.FunctionComponent = () => { - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx index 299d572b90e..f14baa5cc15 100644 --- a/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx +++ b/packages/react-core/src/components/Page/examples/PageVerticalNav.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Page, Masthead, @@ -17,7 +18,7 @@ import { import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; export const PageVerticalNav: React.FunctionComponent = () => { - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx index 21927ad8bfb..10286dc1fc5 100644 --- a/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx +++ b/packages/react-core/src/components/Page/examples/PageWithOrWithoutFill.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Page, Masthead, @@ -17,7 +18,7 @@ import { import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; export const PageWithOrWithoutFill: React.FunctionComponent = () => { - const [isSidebarOpen, setIsSidebarOpen] = React.useState(true); + const [isSidebarOpen, setIsSidebarOpen] = useState(true); const onSidebarToggle = () => { setIsSidebarOpen(!isSidebarOpen); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx b/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx index eed56b6cf43..de343bfb221 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationBottom.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination, PaginationVariant } from '@patternfly/react-core'; export const PaginationBottom: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(10); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(10); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx index afa53d3b0a6..d59928fbae0 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationCompact.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationCompact: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx b/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx index 61abb5a270c..27d120356a5 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationDisabled.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationDisabled: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx b/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx index 44bcc59ab76..e9f281b9c25 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationInset.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationInset: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx index f9d9a1b2ee2..9b1619c4cf2 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationNoItems.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationNoItems: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx b/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx index a22d8841312..fa2548a091e 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationOffset.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationOffset: React.FunctionComponent = () => { - const [offset, setOffset] = React.useState(7); - const [perPage, setPerPage] = React.useState(20); + const [offset, setOffset] = useState(7); + const [perPage, setPerPage] = useState(20); const onSetPage = ( _event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx index 7a3cefda36f..ce396b01ba4 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationOnePage.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationOnePage: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx index b03bc13fdb8..3bd8ccb4bec 100644 --- a/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx +++ b/packages/react-core/src/components/Pagination/examples/PaginationTop.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Pagination } from '@patternfly/react-core'; export const PaginationTop: React.FunctionComponent = () => { - const [page, setPage] = React.useState(1); - const [perPage, setPerPage] = React.useState(20); + const [page, setPage] = useState(1); + const [perPage, setPerPage] = useState(20); const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => { setPage(newPage); diff --git a/packages/react-core/src/components/Popover/examples/Popover.md b/packages/react-core/src/components/Popover/examples/Popover.md index 0c5655987e8..2ccaa9d00ee 100644 --- a/packages/react-core/src/components/Popover/examples/Popover.md +++ b/packages/react-core/src/components/Popover/examples/Popover.md @@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-popover propComponents: ['Popover'] --- +import { useRef, useState } from 'react'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; diff --git a/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx b/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx index 5ebed4efc3a..9c856fce8c2 100644 --- a/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx +++ b/packages/react-core/src/components/Popover/examples/PopoverAdvanced.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { Popover, PopoverPosition, Checkbox, Button } from '@patternfly/react-core'; export const PopoverAdvanced: React.FunctionComponent = () => { - const [position, setPosition] = React.useState(PopoverPosition.auto); - const [show, setShow] = React.useState(false); - const [keepInViewChecked, setKeepInViewChecked] = React.useState(true); + const [position, setPosition] = useState(PopoverPosition.auto); + const [show, setShow] = useState(false); + const [keepInViewChecked, setKeepInViewChecked] = useState(true); const handleKeepInViewChange = (checked: boolean) => { setKeepInViewChecked(checked); diff --git a/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx b/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx index de2bccb8ef3..bd1bdab2851 100644 --- a/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx +++ b/packages/react-core/src/components/Popover/examples/PopoverAlert.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Popover, Button } from '@patternfly/react-core'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; @@ -6,7 +7,7 @@ import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/excl import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; export const AlertPopover: React.FunctionComponent = () => { - const [alertSeverityVariant, setAlertSeverityVariant] = React.useState('default'); + const [alertSeverityVariant, setAlertSeverityVariant] = useState('default'); const alertIcons = { custom: , diff --git a/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx b/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx index 8ea7d0d0572..403bb3bee50 100644 --- a/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx +++ b/packages/react-core/src/components/Popover/examples/PopoverCloseControlled.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Popover, Button } from '@patternfly/react-core'; export const PopoverCloseControlled: React.FunctionComponent = () => { - const [isVisible, setIsVisible] = React.useState(false); + const [isVisible, setIsVisible] = useState(false); return (
diff --git a/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx b/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx index f800a87c968..923c355a8f6 100644 --- a/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx +++ b/packages/react-core/src/components/Popover/examples/PopoverReactRef.tsx @@ -1,7 +1,8 @@ +import { useRef } from 'react'; import { Popover } from '@patternfly/react-core'; export const PopoverReactRef: React.FunctionComponent = () => { - const popoverRef = React.useRef(null); + const popoverRef = useRef(null); return (
diff --git a/packages/react-core/src/components/Progress/examples/Progress.md b/packages/react-core/src/components/Progress/examples/Progress.md index 9289969c41b..6e4ddd905bb 100644 --- a/packages/react-core/src/components/Progress/examples/Progress.md +++ b/packages/react-core/src/components/Progress/examples/Progress.md @@ -5,6 +5,8 @@ cssPrefix: pf-v6-c-progress propComponents: ['Progress'] --- +import { useState } from 'react'; + ## Examples ### Basic ```ts file="./ProgressBasic.tsx" diff --git a/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx b/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx index 13c2255b8c6..98974b11d50 100644 --- a/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx +++ b/packages/react-core/src/components/Progress/examples/ProgressHelperText.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { Progress, ProgressProps, HelperText, HelperTextItem, Radio } from '@patternfly/react-core'; export const ProgressHelperText: React.FunctionComponent = () => { type ProgressVariant = ProgressProps['variant']; - const [selectedVariant, setSelectedVariant] = React.useState(undefined); + const [selectedVariant, setSelectedVariant] = useState(undefined); const progressVariants: ProgressVariant[] = [undefined, 'success', 'warning', 'danger']; diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md index 0b0606b1a85..b594d37875e 100644 --- a/packages/react-core/src/components/Select/examples/Select.md +++ b/packages/react-core/src/components/Select/examples/Select.md @@ -8,7 +8,7 @@ propComponents: ouia: true --- -import { Fragment, useState } from 'react'; +import { Fragment, useEffect, useRef, useState } from 'react'; import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; diff --git a/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx index a3d3105caeb..2a1d582d83c 100644 --- a/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx +++ b/packages/react-core/src/components/Select/examples/SelectCheckbox.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Badge } from '@patternfly/react-core'; export const SelectCheckbox: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selectedItems, setSelectedItems] = React.useState([]); + const [isOpen, setIsOpen] = useState(false); + const [selectedItems, setSelectedItems] = useState([]); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Select/examples/SelectFooter.tsx b/packages/react-core/src/components/Select/examples/SelectFooter.tsx index d2333c630cb..fa61dfd213a 100644 --- a/packages/react-core/src/components/Select/examples/SelectFooter.tsx +++ b/packages/react-core/src/components/Select/examples/SelectFooter.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { MenuToggle, MenuFooter, Select, SelectList, SelectOption, Button } from '@patternfly/react-core'; export const SelectFooter: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState('Select a value'); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState('Select a value'); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Select/examples/SelectGrouped.tsx b/packages/react-core/src/components/Select/examples/SelectGrouped.tsx index 6108a41f266..4a592822d78 100644 --- a/packages/react-core/src/components/Select/examples/SelectGrouped.tsx +++ b/packages/react-core/src/components/Select/examples/SelectGrouped.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Select, SelectOption, @@ -9,8 +10,8 @@ import { } from '@patternfly/react-core'; export const SelectGrouped: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState('Select a value'); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState('Select a value'); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx index 640043aeb24..20095710a3d 100644 --- a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx +++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { Select, SelectOption, @@ -24,17 +25,17 @@ const initialSelectOptions: SelectOptionProps[] = [ ]; export const SelectMultiTypeahead: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [inputValue, setInputValue] = React.useState(''); - const [selected, setSelected] = React.useState([]); - const [selectOptions, setSelectOptions] = React.useState(initialSelectOptions); - const [focusedItemIndex, setFocusedItemIndex] = React.useState(null); - const [activeItemId, setActiveItemId] = React.useState(null); - const textInputRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [inputValue, setInputValue] = useState(''); + const [selected, setSelected] = useState([]); + const [selectOptions, setSelectOptions] = useState(initialSelectOptions); + const [focusedItemIndex, setFocusedItemIndex] = useState(null); + const [activeItemId, setActiveItemId] = useState(null); + const textInputRef = useRef(undefined); const NO_RESULTS = 'no results'; - React.useEffect(() => { + useEffect(() => { let newSelectOptions: SelectOptionProps[] = initialSelectOptions; // Filter menu items based on the text input value when one exists diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx index 5c55ab6eaa1..9241c38fa18 100644 --- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx +++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { Select, SelectOption, @@ -22,18 +23,18 @@ const initialSelectOptions: SelectOptionProps[] = [ ]; export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [inputValue, setInputValue] = React.useState(''); - const [selected, setSelected] = React.useState([]); - const [selectOptions, setSelectOptions] = React.useState(initialSelectOptions); - const [focusedItemIndex, setFocusedItemIndex] = React.useState(null); - const [activeItemId, setActiveItemId] = React.useState(null); - const [placeholder, setPlaceholder] = React.useState('0 items selected'); - const textInputRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [inputValue, setInputValue] = useState(''); + const [selected, setSelected] = useState([]); + const [selectOptions, setSelectOptions] = useState(initialSelectOptions); + const [focusedItemIndex, setFocusedItemIndex] = useState(null); + const [activeItemId, setActiveItemId] = useState(null); + const [placeholder, setPlaceholder] = useState('0 items selected'); + const textInputRef = useRef(undefined); const NO_RESULTS = 'no results'; - React.useEffect(() => { + useEffect(() => { let newSelectOptions: SelectOptionProps[] = initialSelectOptions; // Filter menu items based on the text input value when one exists @@ -63,7 +64,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => { setSelectOptions(newSelectOptions); }, [inputValue]); - React.useEffect(() => { + useEffect(() => { setPlaceholder(`${selected.length} item${selected.length !== 1 ? 's' : ''} selected`); }, [selected]); diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx index 1b718d8c954..e7e2be5428c 100644 --- a/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx +++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { Select, SelectOption, @@ -24,18 +25,18 @@ let initialSelectOptions: SelectOptionProps[] = [ ]; export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [inputValue, setInputValue] = React.useState(''); - const [selected, setSelected] = React.useState([]); - const [selectOptions, setSelectOptions] = React.useState(initialSelectOptions); - const [focusedItemIndex, setFocusedItemIndex] = React.useState(null); - const [activeItemId, setActiveItemId] = React.useState(null); - const [onCreation, setOnCreation] = React.useState(false); // Boolean to refresh filter state after new option is created - const textInputRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [inputValue, setInputValue] = useState(''); + const [selected, setSelected] = useState([]); + const [selectOptions, setSelectOptions] = useState(initialSelectOptions); + const [focusedItemIndex, setFocusedItemIndex] = useState(null); + const [activeItemId, setActiveItemId] = useState(null); + const [onCreation, setOnCreation] = useState(false); // Boolean to refresh filter state after new option is created + const textInputRef = useRef(undefined); const CREATE_NEW = 'create'; - React.useEffect(() => { + useEffect(() => { let newSelectOptions: SelectOptionProps[] = initialSelectOptions; // Filter menu items based on the text input value when one exists diff --git a/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx b/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx index 6a4030af40f..94ee3cd4d7c 100644 --- a/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx +++ b/packages/react-core/src/components/Select/examples/SelectOptionVariations.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement } from '@patternfly/react-core'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; export const SelectOptionVariations: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState('Select a value'); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState('Select a value'); const onToggleClick = () => { setIsOpen(!isOpen); diff --git a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx index b95a28c7984..b7a02d350ab 100644 --- a/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx +++ b/packages/react-core/src/components/Select/examples/SelectTypeahead.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { Select, SelectOption, @@ -22,18 +23,18 @@ const initialSelectOptions: SelectOptionProps[] = [ ]; export const SelectTypeahead: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState(''); - const [inputValue, setInputValue] = React.useState(''); - const [filterValue, setFilterValue] = React.useState(''); - const [selectOptions, setSelectOptions] = React.useState(initialSelectOptions); - const [focusedItemIndex, setFocusedItemIndex] = React.useState(null); - const [activeItemId, setActiveItemId] = React.useState(null); - const textInputRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState(''); + const [inputValue, setInputValue] = useState(''); + const [filterValue, setFilterValue] = useState(''); + const [selectOptions, setSelectOptions] = useState(initialSelectOptions); + const [focusedItemIndex, setFocusedItemIndex] = useState(null); + const [activeItemId, setActiveItemId] = useState(null); + const textInputRef = useRef(undefined); const NO_RESULTS = 'no results'; - React.useEffect(() => { + useEffect(() => { let newSelectOptions: SelectOptionProps[] = initialSelectOptions; // Filter menu items based on the text input value when one exists diff --git a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx index 47a79de6b6a..5d9ec246281 100644 --- a/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx +++ b/packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx @@ -1,3 +1,4 @@ +import { useEffect, useRef, useState } from 'react'; import { Select, SelectOption, @@ -22,18 +23,18 @@ let initialSelectOptions: SelectOptionProps[] = [ ]; export const SelectTypeaheadCreatable: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState(''); - const [inputValue, setInputValue] = React.useState(''); - const [filterValue, setFilterValue] = React.useState(''); - const [selectOptions, setSelectOptions] = React.useState(initialSelectOptions); - const [focusedItemIndex, setFocusedItemIndex] = React.useState(null); - const [activeItemId, setActiveItemId] = React.useState(null); - const textInputRef = React.useRef(undefined); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState(''); + const [inputValue, setInputValue] = useState(''); + const [filterValue, setFilterValue] = useState(''); + const [selectOptions, setSelectOptions] = useState(initialSelectOptions); + const [focusedItemIndex, setFocusedItemIndex] = useState(null); + const [activeItemId, setActiveItemId] = useState(null); + const textInputRef = useRef(undefined); const CREATE_NEW = 'create'; - React.useEffect(() => { + useEffect(() => { let newSelectOptions: SelectOptionProps[] = initialSelectOptions; // Filter menu items based on the text input value when one exists diff --git a/packages/react-core/src/components/Select/examples/SelectViewMore.tsx b/packages/react-core/src/components/Select/examples/SelectViewMore.tsx index f1513b418c4..b72a241f3ac 100644 --- a/packages/react-core/src/components/Select/examples/SelectViewMore.tsx +++ b/packages/react-core/src/components/Select/examples/SelectViewMore.tsx @@ -1,12 +1,13 @@ +import { useEffect, useRef, useState } from 'react'; import { Select, SelectOption, SelectList, MenuToggle, Spinner } from '@patternfly/react-core'; export const SelectViewMore: React.FunctionComponent = () => { - const [isOpen, setIsOpen] = React.useState(false); - const [selected, setSelected] = React.useState('Select a value'); - const [activeItem, setActiveItem] = React.useState(0); - const [isLoading, setIsLoading] = React.useState(false); + const [isOpen, setIsOpen] = useState(false); + const [selected, setSelected] = useState('Select a value'); + const [activeItem, setActiveItem] = useState(0); + const [isLoading, setIsLoading] = useState(false); // eslint-disable-next-line @typescript-eslint/no-unused-vars - const [selectOptions, setSelectOptions] = React.useState([ + const [selectOptions, setSelectOptions] = useState([ Option 1 , @@ -38,13 +39,13 @@ export const SelectViewMore: React.FunctionComponent = () => { Final Option 10 ]); - const [numOptions, setNumOptions] = React.useState(3); - const [visibleOptions, setVisibleOptions] = React.useState(selectOptions.slice(0, numOptions)); - const activeItemRef = React.useRef(null); - const viewMoreRef = React.useRef(null); - const toggleRef = React.useRef(null); + const [numOptions, setNumOptions] = useState(3); + const [visibleOptions, setVisibleOptions] = useState(selectOptions.slice(0, numOptions)); + const activeItemRef = useRef(null); + const viewMoreRef = useRef(null); + const toggleRef = useRef(null); - React.useEffect(() => { + useEffect(() => { activeItemRef.current?.focus(); }, [visibleOptions]); diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleList.md b/packages/react-core/src/components/SimpleList/examples/SimpleList.md index 34f04661ae0..bf7d3887cbd 100644 --- a/packages/react-core/src/components/SimpleList/examples/SimpleList.md +++ b/packages/react-core/src/components/SimpleList/examples/SimpleList.md @@ -4,6 +4,7 @@ section: components cssPrefix: pf-v6-c-simple-list propComponents: ['SimpleList', 'SimpleListGroup', 'SimpleListItem'] --- +import { useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx index a80d99e21b7..2fc63143e10 100644 --- a/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx +++ b/packages/react-core/src/components/SimpleList/examples/SimpleListUncontrolled.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { SimpleList, SimpleListItem, SimpleListItemProps } from '@patternfly/react-core'; export const SimpleListUncontrolled: React.FunctionComponent = () => { - const [activeItem, setActiveItem] = React.useState(0); + const [activeItem, setActiveItem] = useState(0); const onSelect = ( selectedItem: React.RefObject | React.RefObject, diff --git a/packages/react-core/src/components/Slider/examples/Slider.md b/packages/react-core/src/components/Slider/examples/Slider.md index ea765c9feeb..8c74eea7be0 100644 --- a/packages/react-core/src/components/Slider/examples/Slider.md +++ b/packages/react-core/src/components/Slider/examples/Slider.md @@ -5,6 +5,7 @@ cssPrefix: pf-v6-c-slider propComponents: ['Slider', 'SliderStepObject'] --- +import { useState } from 'react'; import { Slider, Button, Content, ContentVariants } from '@patternfly/react-core'; import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; diff --git a/packages/react-core/src/components/Slider/examples/SliderActions.tsx b/packages/react-core/src/components/Slider/examples/SliderActions.tsx index 6715965714e..1b4051008cb 100644 --- a/packages/react-core/src/components/Slider/examples/SliderActions.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderActions.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Slider, SliderOnChangeEvent, Button, Content } from '@patternfly/react-core'; import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; @@ -5,10 +6,10 @@ import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon'; import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon'; export const SliderActions: React.FunctionComponent = () => { - const [value1, setValue1] = React.useState(50); - const [value2, setValue2] = React.useState(50); - const [inputValue, setInputValue] = React.useState(50); - const [isDisabled, setIsDisabled] = React.useState(false); + const [value1, setValue1] = useState(50); + const [value2, setValue2] = useState(50); + const [inputValue, setInputValue] = useState(50); + const [isDisabled, setIsDisabled] = useState(false); const onChange1 = (_event: SliderOnChangeEvent, value: number) => { setValue1(Math.floor(Number(value))); diff --git a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx index 1317bbc3078..a525498d215 100644 --- a/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderContinuous.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { Checkbox, Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core'; export const SliderContinuous: React.FunctionComponent = () => { - const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false); - const [value, setValue] = React.useState(50); - const [valueCustom, setValueCustom] = React.useState(50); + const [hasTooltipOverThumb, setHasTooltipOverThumb] = useState(false); + const [value, setValue] = useState(50); + const [valueCustom, setValueCustom] = useState(50); return ( <> diff --git a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx index 48eff696133..2c31cb223c7 100644 --- a/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderDisabled.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core'; export const SliderDisabled: React.FunctionComponent = () => { - const [value, setValue] = React.useState(50); + const [value, setValue] = useState(50); const steps = [ { value: 0, label: '0' }, { value: 12.5, label: '1', isLabelHidden: true }, diff --git a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx index d779134561c..cfb9fb6cc3a 100644 --- a/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderDiscrete.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Slider, SliderOnChangeEvent, Content } from '@patternfly/react-core'; export const SliderDiscrete: React.FunctionComponent = () => { @@ -11,7 +12,7 @@ export const SliderDiscrete: React.FunctionComponent = () => { value7: 25 }; - const [numValue, setNumValue] = React.useState(initialValues); + const [numValue, setNumValue] = useState(initialValues); const handleChange = (value: number, name: string) => { setNumValue({ ...numValue, [name]: value }); diff --git a/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx b/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx index 5775c83c33d..6b9188c2390 100644 --- a/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderThumbValueInput.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Slider, SliderOnChangeEvent } from '@patternfly/react-core'; export const SliderThumbValueInput: React.FunctionComponent = () => { - const [value, setValue] = React.useState(50); - const [inputValue, setInputValue] = React.useState(50); + const [value, setValue] = useState(50); + const [inputValue, setInputValue] = useState(50); const onChange = ( _event: SliderOnChangeEvent, diff --git a/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx b/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx index e077ac192ae..21871042f8c 100644 --- a/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx +++ b/packages/react-core/src/components/Slider/examples/SliderValueInput.tsx @@ -1,12 +1,13 @@ +import { useState } from 'react'; import { Slider, SliderOnChangeEvent } from '@patternfly/react-core'; export const SliderValueInput: React.FunctionComponent = () => { - const [valueDiscrete, setValueDiscrete] = React.useState(62.5); - const [inputValueDiscrete, setInputValueDiscrete] = React.useState(5); - const [valuePercent, setValuePercent] = React.useState(50); - const [inputValuePercent, setInputValuePercent] = React.useState(50); - const [valueContinuous, setValueContinuous] = React.useState(50); - const [inputValueContinuous, setInputValueContinuous] = React.useState(50); + const [valueDiscrete, setValueDiscrete] = useState(62.5); + const [inputValueDiscrete, setInputValueDiscrete] = useState(5); + const [valuePercent, setValuePercent] = useState(50); + const [inputValuePercent, setInputValuePercent] = useState(50); + const [valueContinuous, setValueContinuous] = useState(50); + const [inputValueContinuous, setInputValueContinuous] = useState(50); const stepsDiscrete = [ { value: 0, label: '0' }, diff --git a/packages/react-core/src/components/Switch/examples/Switch.md b/packages/react-core/src/components/Switch/examples/Switch.md index 25dcebb14f1..39023c97c6d 100644 --- a/packages/react-core/src/components/Switch/examples/Switch.md +++ b/packages/react-core/src/components/Switch/examples/Switch.md @@ -6,7 +6,7 @@ propComponents: ['Switch'] ouia: true --- -import { Fragment } from 'react'; +import { Fragment, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx b/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx index f37979411f1..4abd03c2a23 100644 --- a/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx +++ b/packages/react-core/src/components/Switch/examples/SwitchBasic.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Switch } from '@patternfly/react-core'; export const SwitchBasic: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(true); + const [isChecked, setIsChecked] = useState(true); const handleChange = (_event: React.FormEvent, checked: boolean) => { setIsChecked(checked); diff --git a/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx b/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx index cb389e96d1c..351f2ec4935 100644 --- a/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx +++ b/packages/react-core/src/components/Switch/examples/SwitchCheckedWithLabel.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Switch } from '@patternfly/react-core'; export const SwitchCheckedWithLabel: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(true); + const [isChecked, setIsChecked] = useState(true); const handleChange = (_event: React.FormEvent, checked: boolean) => { setIsChecked(checked); diff --git a/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx b/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx index de35db8e49a..b3882418504 100644 --- a/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx +++ b/packages/react-core/src/components/Switch/examples/SwitchReversed.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Switch } from '@patternfly/react-core'; export const SwitchReversed: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(true); + const [isChecked, setIsChecked] = useState(true); const handleChange = (_event: React.FormEvent, checked: boolean) => { setIsChecked(checked); diff --git a/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx b/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx index eb6268517de..fbe701642c1 100644 --- a/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx +++ b/packages/react-core/src/components/Switch/examples/SwitchWithoutLabel.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Switch } from '@patternfly/react-core'; export const SwitchWithoutLabel: React.FunctionComponent = () => { - const [isChecked, setIsChecked] = React.useState(true); + const [isChecked, setIsChecked] = useState(true); const handleChange = (_event: React.FormEvent, checked: boolean) => { setIsChecked(checked); diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 622f0c9fc35..6df1476058a 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -6,7 +6,7 @@ propComponents: ['Tabs', 'Tab', 'TabContent', 'TabContentBody', 'TabTitleText', ouia: true --- -import { createRef, Fragment, useState } from 'react'; +import { createRef, Fragment, useEffect, useRef, useState } from 'react'; import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; diff --git a/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx b/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx index 9a943477d58..b6ef371a1f4 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsBoxSecondary.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; export const TabsBoxSecondary: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isTabsBoxSecondary, setIsTabsBoxSecondary] = React.useState(true); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isTabsBoxSecondary, setIsTabsBoxSecondary] = useState(true); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx b/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx index a05eca357d5..8a8dd9b13ce 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; export const TabsChildrenMounting: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx b/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx index 505e3769dae..24024377fd8 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; export const TabsDefault: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx b/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx index 56b3dbd6bcc..b5bc9103866 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; export const TabsDefaultOverflow: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx b/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx index a62520f12ad..f966a5550dc 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsDynamic.tsx @@ -1,11 +1,12 @@ +import { useEffect, useRef, useState } from 'react'; import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; export const TabsDynamic: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [tabs, setTabs] = React.useState(['Terminal 1', 'Terminal 2', 'Terminal 3']); - const [newTabNumber, setNewTabNumber] = React.useState(4); - const tabComponentRef = React.useRef(undefined); - const firstMount = React.useRef(true); + const [activeTabKey, setActiveTabKey] = useState(0); + const [tabs, setTabs] = useState(['Terminal 1', 'Terminal 2', 'Terminal 3']); + const [newTabNumber, setNewTabNumber] = useState(4); + const tabComponentRef = useRef(undefined); + const firstMount = useRef(true); const onClose = (event: any, tabIndex: string | number) => { const tabIndexNum = tabIndex as number; @@ -27,7 +28,7 @@ export const TabsDynamic: React.FunctionComponent = () => { setNewTabNumber(newTabNumber + 1); }; - React.useEffect(() => { + useEffect(() => { if (firstMount.current) { firstMount.current = false; return; diff --git a/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx b/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx index 9838505c8f6..17326fac2e2 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; export const TabsFilled: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx b/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx index 8c2edb68832..06aee39f478 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx @@ -1,11 +1,12 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core'; import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; export const TabsFilledWithIcons: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx b/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx index d6ee39810d3..1fc646e62ae 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsHelp.tsx @@ -1,8 +1,9 @@ +import { createRef, useState } from 'react'; import { Tabs, Tab, TabTitleText, TabAction, Popover } from '@patternfly/react-core'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; export const TabsHelp: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); const tabs = ['Users', 'Containers', 'Database', 'Disabled', 'ARIA disabled', 'Help disabled']; @@ -27,7 +28,7 @@ export const TabsHelp: React.FunctionComponent = () => { role="region" > {tabs.map((tab, index) => { - const ref = React.createRef(); + const ref = createRef(); return ( { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [tabs, setTabs] = React.useState(['Terminal 1', 'Terminal 2', 'Terminal 3']); - const tabComponentRef = React.useRef(undefined); - const firstMount = React.useRef(true); + const [activeTabKey, setActiveTabKey] = useState(0); + const [tabs, setTabs] = useState(['Terminal 1', 'Terminal 2', 'Terminal 3']); + const tabComponentRef = useRef(undefined); + const firstMount = useRef(true); const onClose = (event: any, tabIndex: string | number) => { const tabIndexNum = tabIndex as number; @@ -35,7 +36,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => { /> ); - React.useEffect(() => { + useEffect(() => { if (firstMount.current) { firstMount.current = false; return; @@ -54,7 +55,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => { ref={tabComponentRef} > {tabs.map((tab, index) => { - const ref = React.createRef(); + const ref = createRef(); return ( { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [showTabCount, setShowTabCount] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [showTabCount, setShowTabCount] = useState(false); const handleTabClick = (_event: any, tabIndex: string | number) => { setActiveTabKey(tabIndex); diff --git a/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx index a2d26e0a842..cd2a75932ed 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core'; import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; @@ -7,7 +8,7 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon'; export const TabsIconAndText: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsInset.tsx b/packages/react-core/src/components/Tabs/examples/TabsInset.tsx index e2846ede5ca..c78257c6842 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsInset.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsInset.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; export const TabsInset: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsNav.tsx b/packages/react-core/src/components/Tabs/examples/TabsNav.tsx index 7edf0f76105..906e5034fea 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsNav.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsNav.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; export const TabsNav: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx b/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx index 3023b900a13..4b1223df012 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsNavSubtab.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; export const TabsNavSubtab: React.FunctionComponent = () => { - const [activeTabKey1, setActiveTabKey1] = React.useState(0); - const [activeTabKey2, setActiveTabKey2] = React.useState(0); + const [activeTabKey1, setActiveTabKey1] = useState(0); + const [activeTabKey2, setActiveTabKey2] = useState(0); // Toggle currently active primary tab const handleTabClickFirst = ( diff --git a/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx b/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx index 22b151bdac6..c100d7ac54f 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; export const TabsPageInsets: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx b/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx index 855dfdafb0c..0c0428d62e2 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx @@ -1,9 +1,10 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; export const TabsSubtabs: React.FunctionComponent = () => { - const [activeTabKey1, setActiveTabKey1] = React.useState(0); - const [activeTabKey2, setActiveTabKey2] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey1, setActiveTabKey1] = useState(0); + const [activeTabKey2, setActiveTabKey2] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active primary tab const handleTabClickFirst = ( diff --git a/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx b/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx index 1e047acb78f..7091a1bbe4c 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx @@ -1,8 +1,9 @@ +import { createRef, useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; export const TabsTooltipReactRef: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, @@ -15,7 +16,7 @@ export const TabsTooltipReactRef: React.FunctionComponent = () => { setIsBox(checked); }; - const tooltipRef = React.createRef(); + const tooltipRef = createRef(); return (
diff --git a/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx b/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx index 1e6f44d209a..d8922894782 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; export const TabsUnmountingInvisibleChildren: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx b/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx index d1206b0d99f..c0feb9d0b73 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; export const TabsVertical: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isBox, setIsBox] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isBox, setIsBox] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx index a49845199e7..ff4b5bbb545 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx @@ -1,8 +1,9 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; export const TabsVerticalExpandable: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - const [isExpanded, setIsExpanded] = React.useState(false); + const [activeTabKey, setActiveTabKey] = useState(0); + const [isExpanded, setIsExpanded] = useState(false); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx index 3671988e8b3..6b658bc3abd 100644 --- a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx +++ b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx @@ -1,6 +1,7 @@ +import { useState } from 'react'; import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; export const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); + const [activeTabKey, setActiveTabKey] = useState(0); // Toggle currently active tab const handleTabClick = ( event: React.MouseEvent | React.KeyboardEvent | MouseEvent, diff --git a/packages/react-core/src/components/TextArea/examples/TextArea.md b/packages/react-core/src/components/TextArea/examples/TextArea.md index e0606d00883..a3dd633aa64 100644 --- a/packages/react-core/src/components/TextArea/examples/TextArea.md +++ b/packages/react-core/src/components/TextArea/examples/TextArea.md @@ -6,7 +6,7 @@ cssPrefix: pf-v6-c-form-control propComponents: ['TextArea'] --- -import { Fragment, useState } from 'react'; +import { Fragment, useRef, useState } from 'react'; ## Examples diff --git a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx index 819d5b80a51..4fe55f21820 100644 --- a/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx +++ b/packages/react-core/src/components/TextArea/examples/TextAreaAutoResizing.tsx @@ -1,7 +1,8 @@ +import { useState } from 'react'; import { TextArea } from '@patternfly/react-core'; export const TextAreaAutoResizing: React.FunctionComponent = () => { - const [value, setValue] = React.useState(''); + const [value, setValue] = useState(''); return (