npm - @patternfly/react-core - Versions diffs - 6.2.0-prerelease.33 → 6.2.0-prerelease.34 - Mend

@patternfly/react-core 6.2.0-prerelease.33 → 6.2.0-prerelease.34

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

Files changed (713) hide show

package/src/components/Pagination/examples/PaginationDisabled.tsx CHANGED Viewed

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

package/src/components/Pagination/examples/PaginationIndeterminate.tsx CHANGED Viewed

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

package/src/components/Pagination/examples/PaginationInset.tsx CHANGED Viewed

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

package/src/components/Pagination/examples/PaginationNoItems.tsx CHANGED Viewed

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

package/src/components/Pagination/examples/PaginationOffset.tsx CHANGED Viewed

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

package/src/components/Pagination/examples/PaginationOnePage.tsx CHANGED Viewed

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

package/src/components/Pagination/examples/PaginationSticky.tsx CHANGED Viewed

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

package/src/components/Pagination/examples/PaginationTop.tsx CHANGED Viewed

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

package/src/components/Popover/examples/Popover.md CHANGED Viewed

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

package/src/components/Popover/examples/PopoverAdvanced.tsx CHANGED Viewed

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

package/src/components/Popover/examples/PopoverAlert.tsx CHANGED Viewed

@@ -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: <BellIcon />,

package/src/components/Popover/examples/PopoverCloseControlled.tsx CHANGED Viewed

@@ -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 (
     <div style={{ margin: '50px' }}>

package/src/components/Popover/examples/PopoverReactRef.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useRef } from 'react';
 import { Popover } from '@patternfly/react-core';
 export const PopoverReactRef: React.FunctionComponent = () => {
-  const popoverRef = React.useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLButtonElement>(null);
   return (
     <div style={{ margin: '50px' }}>

package/src/components/Progress/examples/Progress.md CHANGED Viewed

@@ -5,6 +5,8 @@ cssPrefix: pf-v6-c-progress
 propComponents: ['Progress']
 ---
+import { useState } from 'react';
 ## Examples
 ### Basic
 ```ts file="./ProgressBasic.tsx"

package/src/components/Progress/examples/ProgressHelperText.tsx CHANGED Viewed

@@ -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<ProgressVariant>(undefined);
+  const [selectedVariant, setSelectedVariant] = useState<ProgressVariant>(undefined);
   const progressVariants: ProgressVariant[] = [undefined, 'success', 'warning', 'danger'];

package/src/components/ProgressStepper/examples/ProgressStepper.md CHANGED Viewed

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

package/src/components/ProgressStepper/examples/ProgressStepperBasicWithAlignment.tsx CHANGED Viewed

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

package/src/components/ProgressStepper/examples/ProgressStepperCompact.tsx CHANGED Viewed

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

package/src/components/Radio/examples/Radio.md CHANGED Viewed

@@ -7,7 +7,7 @@ propComponents: ['Radio']
 ouia: true
 ---
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 ## Examples

package/src/components/Radio/examples/RadioControlled.tsx CHANGED Viewed

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

package/src/components/SearchInput/examples/SearchInput.md CHANGED Viewed

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

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx CHANGED Viewed

@@ -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 ? '=' : ':'));

package/src/components/SearchInput/examples/SearchInputBasic.tsx CHANGED Viewed

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

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx CHANGED Viewed

@@ -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<HTMLInputElement | null> = React.useRef(null);
+  const [value, setValue] = useState('');
+  const ref: React.MutableRefObject<HTMLInputElement | null> = useRef(null);
   return (
     <>

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx CHANGED Viewed

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

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx CHANGED Viewed

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

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx CHANGED Viewed

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

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx CHANGED Viewed

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

package/src/components/Select/examples/Select.md CHANGED Viewed

@@ -8,7 +8,7 @@ propComponents:
 ouia: true
 ---
-import { Fragment } 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';

package/src/components/Select/examples/SelectBasic.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Select, SelectOption, SelectList, MenuToggle, MenuToggleElement, Checkbox } from '@patternfly/react-core';
 export const SelectBasic: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Select/examples/SelectCheckbox.tsx CHANGED Viewed

@@ -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<number[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedItems, setSelectedItems] = useState<number[]>([]);
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Select/examples/SelectFooter.tsx CHANGED Viewed

@@ -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<boolean>(false);
-  const [selected, setSelected] = React.useState<string>('Select a value');
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string>('Select a value');
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Select/examples/SelectGrouped.tsx CHANGED Viewed

@@ -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<string>('Select a value');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Select/examples/SelectMultiTypeahead.tsx CHANGED Viewed

@@ -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<string>('');
-  const [selected, setSelected] = React.useState<string[]>([]);
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(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

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx CHANGED Viewed

@@ -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<string>('');
-  const [selected, setSelected] = React.useState<string[]>([]);
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const [placeholder, setPlaceholder] = React.useState('0 items selected');
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const [placeholder, setPlaceholder] = useState('0 items selected');
+  const textInputRef = useRef<HTMLInputElement>(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]);

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx CHANGED Viewed

@@ -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<string>('');
-  const [selected, setSelected] = React.useState<string[]>([]);
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const [onCreation, setOnCreation] = React.useState<boolean>(false); // Boolean to refresh filter state after new option is created
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState<string>('');
+  const [selected, setSelected] = useState<string[]>([]);
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const [onCreation, setOnCreation] = useState<boolean>(false); // Boolean to refresh filter state after new option is created
+  const textInputRef = useRef<HTMLInputElement>(undefined);
   const CREATE_NEW = 'create';
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
     // Filter menu items based on the text input value when one exists

package/src/components/Select/examples/SelectOptionVariations.tsx CHANGED Viewed

@@ -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<string>('Select a value');
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
   const onToggleClick = () => {
     setIsOpen(!isOpen);

package/src/components/Select/examples/SelectTypeahead.tsx CHANGED Viewed

@@ -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<string>('');
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('');
+  const [inputValue, setInputValue] = useState<string>('');
+  const [filterValue, setFilterValue] = useState<string>('');
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(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

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx CHANGED Viewed

@@ -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<string>('');
-  const [inputValue, setInputValue] = React.useState<string>('');
-  const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] = React.useState<SelectOptionProps[]>(initialSelectOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('');
+  const [inputValue, setInputValue] = useState<string>('');
+  const [filterValue, setFilterValue] = useState<string>('');
+  const [selectOptions, setSelectOptions] = useState<SelectOptionProps[]>(initialSelectOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(undefined);
   const CREATE_NEW = 'create';
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: SelectOptionProps[] = initialSelectOptions;
     // Filter menu items based on the text input value when one exists

package/src/components/Select/examples/SelectValidated.tsx CHANGED Viewed

@@ -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<string>('Select a value');
-  const [status, setStatus] = React.useState<MenuToggleStatus>();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string>('Select a value');
+  const [status, setStatus] = useState<MenuToggleStatus>();
   const onToggleClick = () => {
     setIsOpen(!isOpen);