react templates changes

Author: mfrances17

packages/react-templates/src/components/Dropdown/SimpleDropdown.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, useState } from 'react';
 import {
   Dropdown,
   DropdownItem,
@@ -69,7 +69,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
   shouldFocusToggleOnSelect,
   ...props
 }: SimpleDropdownProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
 
   const onSelect = (event: React.MouseEvent<Element, MouseEvent>, value: string | number) => {
     onSelectProp && onSelectProp(event, value);
@@ -132,7 +132,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
   );
 };
 
-export const SimpleDropdown = React.forwardRef((props: SimpleDropdownProps, ref: React.Ref<any>) => (
+export const SimpleDropdown = forwardRef((props: SimpleDropdownProps, ref: React.Ref<any>) => (
   <SimpleDropdownBase {...props} innerRef={ref} />
 ));
 

packages/react-templates/src/components/Dropdown/__tests__/SimpleDropdown.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { SimpleDropdown } from '../SimpleDropdown';

packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md

@@ -11,6 +11,7 @@ Note: Templates live in their own package at [@patternfly/react-templates](https
 
 For custom use cases, please see the dropdown component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
 
+import { Fragment, useState } from 'react';
 import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
 import { SimpleDropdown } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

packages/react-templates/src/components/Dropdown/examples/SimpleDropdownExample.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import { Fragment, useState } from 'react';
 import { Checkbox, Flex, FlexItem } from '@patternfly/react-core';
 import { SimpleDropdown, SimpleDropdownItem } from '@patternfly/react-templates';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const SimpleDropdownExample: React.FunctionComponent = () => {
-  const [isDisabled, setIsDisabled] = React.useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
 
   const items: SimpleDropdownItem[] = [
     // eslint-disable-next-line no-console
@@ -18,7 +18,7 @@ export const SimpleDropdownExample: React.FunctionComponent = () => {
   ];
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Checkbox
         id="simple-example-disabled-toggle"
         label="Disable simple dropdown toggles"
@@ -48,6 +48,6 @@ export const SimpleDropdownExample: React.FunctionComponent = () => {
           />
         </FlexItem>
       </Flex>
-    </React.Fragment>
+    </Fragment>
   );
 };

packages/react-templates/src/components/Select/CheckboxSelect.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import { Badge } from '@patternfly/react-core/dist/esm/components/Badge';
 import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import {
@@ -46,10 +46,10 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
   toggleProps,
   ...props
 }: CheckboxSelectProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string[]>([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string[]>([]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     const selectedOptions = initialOptions?.filter((option) => option.selected);
     setSelected(selectedOptions?.map((selectedOption) => String(selectedOption.value)) ?? []);
   }, [initialOptions]);
@@ -122,6 +122,6 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
   );
 };
 
-export const CheckboxSelect = React.forwardRef((props: CheckboxSelectProps, ref: React.Ref<any>) => (
+export const CheckboxSelect = forwardRef((props: CheckboxSelectProps, ref: React.Ref<any>) => (
   <CheckboxSelectBase {...props} innerRef={ref} />
 ));

packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { Label, LabelGroup } from '@patternfly/react-core/dist/esm/components/Label';
 import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
@@ -62,15 +62,15 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
   toggleProps,
   ...props
 }: MultiTypeaheadSelectProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<(string | number)[]>(
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<(string | number)[]>(
     (initialOptions?.filter((o) => o.selected) ?? []).map((o) => o.value)
   );
-  const [inputValue, setInputValue] = React.useState<string>();
-  const [selectOptions, setSelectOptions] = React.useState<MultiTypeaheadSelectOption[]>(initialOptions);
-  const [focusedItemIndex, setFocusedItemIndex] = React.useState<number | null>(null);
-  const [activeItemId, setActiveItemId] = React.useState<string | null>(null);
-  const textInputRef = React.useRef<HTMLInputElement>(undefined);
+  const [inputValue, setInputValue] = useState<string>();
+  const [selectOptions, setSelectOptions] = useState<MultiTypeaheadSelectOption[]>(initialOptions);
+  const [focusedItemIndex, setFocusedItemIndex] = useState<number | null>(null);
+  const [activeItemId, setActiveItemId] = useState<string | null>(null);
+  const textInputRef = useRef<HTMLInputElement>(undefined);
 
   const NO_RESULTS = 'no results';
 
@@ -79,7 +79,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     setIsOpen(true);
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     let newSelectOptions: MultiTypeaheadSelectOption[] = initialOptions;
 
     // Filter menu items based on the text input value when one exists
@@ -108,10 +108,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue, initialOptions]);
 
-  React.useEffect(
-    () => setSelected((initialOptions?.filter((o) => o.selected) ?? []).map((o) => o.value)),
-    [initialOptions]
-  );
+  useEffect(() => setSelected((initialOptions?.filter((o) => o.selected) ?? []).map((o) => o.value)), [initialOptions]);
 
   const setActiveAndFocusedItem = (itemIndex: number) => {
     setFocusedItemIndex(itemIndex);
@@ -340,7 +337,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
 
 MultiTypeaheadSelectBase.displayName = 'MultiTypeaheadSelectBase';
 
-export const MultiTypeaheadSelect = React.forwardRef((props: MultiTypeaheadSelectProps, ref: React.Ref<any>) => (
+export const MultiTypeaheadSelect = forwardRef((props: MultiTypeaheadSelectProps, ref: React.Ref<any>) => (
   <MultiTypeaheadSelectBase {...props} innerRef={ref} />
 ));
 

packages/react-templates/src/components/Select/SimpleSelect.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import {
   Select,
   SelectList,
@@ -48,10 +48,10 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   placeholder = 'Select a value',
   ...props
 }: SimpleSelectProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<SimpleSelectOption | undefined>();
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<SimpleSelectOption | undefined>();
 
-  React.useEffect(() => {
+  useEffect(() => {
     const selectedOption = initialOptions?.find((option) => option.selected);
     setSelected(selectedOption);
   }, [initialOptions]);
@@ -114,7 +114,7 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   );
 };
 
-export const SimpleSelect = React.forwardRef((props: SimpleSelectProps, ref: React.Ref<any>) => (
+export const SimpleSelect = forwardRef((props: SimpleSelectProps, ref: React.Ref<any>) => (
   <SimpleSelectBase {...props} innerRef={ref} />
 ));
 

packages/react-templates/src/components/Select/TypeaheadSelect.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
 import {
@@ -79,20 +79,18 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   toggleProps,
   ...props
 }: TypeaheadSelectProps) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const [selected, setSelected] = React.useState<string>(String(initialOptions.find((o) => o.selected)?.content ?? ''));
-  const [inputValue, setInputValue] = React.useState<string>(
-    String(initialOptions.find((o) => o.selected)?.content ?? '')
-  );
-  const [filterValue, setFilterValue] = React.useState<string>('');
-  const [selectOptions, setSelectOptions] = React.useState<TypeaheadSelectOption[]>(initialOptions);
-  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>(String(initialOptions.find((o) => o.selected)?.content ?? ''));
+  const [inputValue, setInputValue] = useState<string>(String(initialOptions.find((o) => o.selected)?.content ?? ''));
+  const [filterValue, setFilterValue] = useState<string>('');
+  const [selectOptions, setSelectOptions] = useState<TypeaheadSelectOption[]>(initialOptions);
+  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: TypeaheadSelectOption[] = initialOptions;
 
     // Filter menu items based on the text input value when one exists
@@ -153,7 +151,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     noOptionsAvailableMessage
   ]);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // If the selected option changed and the current input value is the previously selected item, update the displayed value.
     const selectedOption = initialOptions.find((o) => o.selected);
     if (inputValue === selected && selectedOption?.value !== selected) {
@@ -376,7 +374,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
 };
 TypeaheadSelectBase.displayName = 'TypeaheadSelectBase';
 
-export const TypeaheadSelect = React.forwardRef((props: TypeaheadSelectProps, ref: React.Ref<any>) => (
+export const TypeaheadSelect = forwardRef((props: TypeaheadSelectProps, ref: React.Ref<any>) => (
   <TypeaheadSelectBase {...props} innerRef={ref} />
 ));
 

packages/react-templates/src/components/Select/__tests__/CheckboxSelect.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CheckboxSelect } from '../CheckboxSelect';

packages/react-templates/src/components/Select/__tests__/CheckboxSelectSnapshots.test.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { CheckboxSelect } from '../CheckboxSelect';