@patternfly/react-templates 6.2.0-prerelease.9 → 6.2.1-prerelease.0

package/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>
   );
 };

package/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} />
 ));

package/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';
@@ -37,6 +37,10 @@ export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' |
   onToggle?: (nextIsOpen: boolean) => void;
   /** Callback triggered when the text in the input field changes. */
   onInputChange?: (newValue: string) => void;
+  /** Custom callback triggered when the input field has focus and a keyboard event is triggered.
+   * This will override the default keydown behavior for the input field.
+   */
+  onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   /** Placeholder text for the select input. */
   placeholder?: string;
   /** Message to display when no options match the filter. */
@@ -55,6 +59,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
   onSelectionChange,
   onToggle,
   onInputChange,
+  onInputKeyDown: onInputKeyDownProp,
   placeholder = 'Select an option',
   noOptionsFoundMessage = (filter) => `No results found for "${filter}"`,
   isDisabled,
@@ -62,15 +67,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>();
+  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 +84,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 +113,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);
@@ -219,11 +221,12 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     setActiveAndFocusedItem(indexToFocus);
   };
 
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const defaultOnInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
       case 'Enter':
+        event.preventDefault();
         if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           selectOption(event, focusedItem?.value);
         }
@@ -242,6 +245,14 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     }
   };
 
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (onInputKeyDownProp) {
+      onInputKeyDownProp(event);
+    } else {
+      defaultOnInputKeyDown(event);
+    }
+  };
+
   const onToggleClick = () => {
     onToggle && onToggle(!isOpen);
     setIsOpen(!isOpen);
@@ -340,7 +351,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} />
 ));
 

package/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} />
 ));
 

package/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 {
@@ -36,6 +36,10 @@ export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSe
   onToggle?: (nextIsOpen: boolean) => void;
   /** Callback triggered when the text in the input field changes. */
   onInputChange?: (newValue: string) => void;
+  /** Custom callback triggered when the input field has focus and a keyboard event is triggered.
+   * This will override the default keydown behavior for the input field.
+   */
+  onInputKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
   /** Callback triggered when the clear button is selected */
   onClearSelection?: () => void;
   /** Placeholder text for the select input. */
@@ -67,6 +71,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   onSelect,
   onToggle,
   onInputChange,
+  onInputKeyDown: onInputKeyDownProp,
   onClearSelection,
   placeholder = 'Select an option',
   noOptionsAvailableMessage = 'No options are available',
@@ -79,20 +84,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>();
+  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 +156,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) {
@@ -273,11 +276,12 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     setActiveAndFocusedItem(indexToFocus);
   };
 
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const defaultOnInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
       case 'Enter':
+        event.preventDefault();
         if (isOpen && focusedItem && focusedItem.value !== NO_RESULTS && !focusedItem.isAriaDisabled) {
           selectOption(event, focusedItem);
         }
@@ -293,6 +297,14 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     }
   };
 
+  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (onInputKeyDownProp) {
+      onInputKeyDownProp(event);
+    } else {
+      defaultOnInputKeyDown(event);
+    }
+  };
+
   const onToggleClick = () => {
     onToggle && onToggle(!isOpen);
     setIsOpen(!isOpen);
@@ -376,7 +388,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} />
 ));
 

package/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';

package/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';

package/src/components/Select/__tests__/MultiTypeaheadSelect.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 { MultiTypeaheadSelect } from '../MultiTypeaheadSelect';
@@ -395,6 +394,25 @@ describe('MultiTypeaheadSelect', () => {
     expect(onInputChangeMock).toHaveBeenCalledWith('1');
   });
 
+  it('calls the onInputKeyDown callback only when keydown event occurs', async () => {
+    const initialOptions = [
+      { content: 'Option 1', value: 'option1' },
+      { content: 'Option 2', value: 'option2' },
+      { content: 'Option 3', value: 'option3' }
+    ];
+
+    const user = userEvent.setup();
+    const onInputKeyDownMock = jest.fn();
+
+    render(<MultiTypeaheadSelect initialOptions={initialOptions} onInputKeyDown={onInputKeyDownMock} />);
+
+    const input = screen.getByRole('combobox');
+    await user.click(input);
+    expect(onInputKeyDownMock).not.toHaveBeenCalled();
+    await user.keyboard('{Enter}');
+    expect(onInputKeyDownMock).toHaveBeenCalledTimes(1);
+  });
+
   it('Matches snapshot', async () => {
     const initialOptions = [
       { content: 'Option 1', value: 'option1' },

package/src/components/Select/__tests__/SimpleSelect.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 { SimpleSelect } from '../SimpleSelect';

package/src/components/Select/__tests__/TypeaheadSelect.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 { TypeaheadSelect } from '../TypeaheadSelect';
@@ -390,6 +389,25 @@ test('typing in input triggers onInputChange callback', async () => {
   expect(onInputChangeMock).toHaveBeenCalledWith('1');
 });
 
+it('calls the onInputKeyDown callback only when keydown event occurs', async () => {
+  const initialOptions = [
+    { content: 'Option 1', value: 'option1' },
+    { content: 'Option 2', value: 'option2' },
+    { content: 'Option 3', value: 'option3' }
+  ];
+
+  const user = userEvent.setup();
+  const onInputKeyDownMock = jest.fn();
+
+  render(<TypeaheadSelect initialOptions={initialOptions} onInputKeyDown={onInputKeyDownMock} />);
+
+  const input = screen.getByRole('combobox');
+  await user.click(input);
+  expect(onInputKeyDownMock).not.toHaveBeenCalled();
+  await user.keyboard('{Enter}');
+  expect(onInputKeyDownMock).toHaveBeenCalledTimes(1);
+});
+
 test('Matches snapshot', async () => {
   const initialOptions = [
     { content: 'Option 1', value: 'option1' },

package/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap

@@ -32,10 +32,9 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
         style="display: none;"
       >
         <button
-          aria-disabled="false"
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-17"
+          data-ouia-component-id="OUIA-Generated-Button-plain-18"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -64,7 +63,7 @@ exports[`MultiTypeaheadSelect Matches snapshot 1`] = `
       aria-expanded="true"
       aria-label="Multi select Typeahead menu toggle"
       class="pf-v6-c-menu-toggle__button"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-17"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-18"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       tabindex="-1"

package/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap

@@ -32,10 +32,9 @@ exports[`Matches snapshot 1`] = `
         style="display: none;"
       >
         <button
-          aria-disabled="false"
           aria-label="Clear input value"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-17"
+          data-ouia-component-id="OUIA-Generated-Button-plain-18"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -64,7 +63,7 @@ exports[`Matches snapshot 1`] = `
       aria-expanded="true"
       aria-label="Typeahead menu toggle"
       class="pf-v6-c-menu-toggle__button"
-      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-17"
+      data-ouia-component-id="OUIA-Generated-MenuToggle-typeahead-18"
       data-ouia-component-type="PF6/MenuToggle"
       data-ouia-safe="true"
       tabindex="-1"

package/src/components/Select/examples/CheckboxSelectDemo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo, useState } from 'react';
 import { CheckboxSelect, CheckboxSelectOption } from '@patternfly/react-templates';
 
 const Options: { content: string; value: string; description?: string; isDisabled?: boolean }[] = [
@@ -9,9 +9,9 @@ const Options: { content: string; value: string; description?: string; isDisable
 ];
 
 export const SelectBasic: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string[]>(['option-2']);
+  const [selected, setSelected] = useState<string[]>(['option-2']);
 
-  const initialOptions = React.useMemo<CheckboxSelectOption[]>(
+  const initialOptions = useMemo<CheckboxSelectOption[]>(
     () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),
     [selected]
   );

package/src/components/Select/examples/MultiTypeaheadSelectDemo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useMemo, useState } from 'react';
 import { MultiTypeaheadSelect, MultiTypeaheadSelectOption } from '@patternfly/react-templates';
 
 const Options = [
@@ -17,9 +17,9 @@ const Options = [
 type SelectionsType = (string | number)[];
 
 export const MultiSelectTypeaheadDemo: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<SelectionsType>(['option5']);
+  const [selected, setSelected] = useState<SelectionsType>(['option5']);
 
-  const initialOptions = React.useMemo<MultiTypeaheadSelectOption[]>(
+  const initialOptions = useMemo<MultiTypeaheadSelectOption[]>(
     () => Options.map((o) => ({ ...o, selected: selected.includes(o.value) })),
     [selected]
   );

package/src/components/Select/examples/SelectTemplates.md

@@ -11,6 +11,7 @@ Note: Templates live in their own package at [@patternfly/react-templates](https
 
 For custom use cases, please see the select component suite from [@patternfly/react-core](https://www.npmjs.com/package/@patternfly/react-core).
 
+import { Fragment, useEffect, useMemo, useState } from 'react';
 import { Checkbox } from '@patternfly/react-core';
 import { SimpleSelect, CheckboxSelect, TypeaheadSelect, MultiTypeaheadSelect } from '@patternfly/react-templates';
 

package/src/components/Select/examples/SimpleSelectDemo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment, useMemo, useState } from 'react';
 import { Checkbox } from '@patternfly/react-core';
 import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
 
@@ -9,16 +9,16 @@ const Options: SimpleSelectOption[] = [
 ];
 
 export const SelectSimpleDemo: React.FunctionComponent = () => {
-  const [isDisabled, setIsDisabled] = React.useState<boolean>(false);
-  const [selected, setSelected] = React.useState<string | undefined>('Option1');
+  const [isDisabled, setIsDisabled] = useState<boolean>(false);
+  const [selected, setSelected] = useState<string | undefined>('Option1');
 
-  const initialOptions = React.useMemo<SimpleSelectOption[]>(
+  const initialOptions = useMemo<SimpleSelectOption[]>(
     () => Options.map((o) => ({ ...o, selected: o.value === selected })),
     [selected]
   );
 
   return (
-    <React.Fragment>
+    <Fragment>
       <Checkbox
         id="toggle-disabled"
         label="isDisabled"
@@ -31,6 +31,6 @@ export const SelectSimpleDemo: React.FunctionComponent = () => {
         isDisabled={isDisabled}
         onSelect={(_ev, selection) => setSelected(String(selection))}
       />
-    </React.Fragment>
+    </Fragment>
   );
 };

package/src/components/Select/examples/TypeaheadSelectDemo.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
 import { Checkbox } from '@patternfly/react-core';
 
@@ -13,17 +13,17 @@ const Options = [
 
 /* eslint-disable no-console */
 export const SelectTypeaheadDemo: React.FunctionComponent = () => {
-  const [selected, setSelected] = React.useState<string | undefined>();
-  const [options, setOptions] = React.useState(Options);
-  const [isCreatable, setIsCreatable] = React.useState<boolean>(false);
-  const [isCreateOptionOnTop, setIsCreateOptionOnTop] = React.useState<boolean>(false);
+  const [selected, setSelected] = useState<string | undefined>();
+  const [options, setOptions] = useState(Options);
+  const [isCreatable, setIsCreatable] = useState<boolean>(false);
+  const [isCreateOptionOnTop, setIsCreateOptionOnTop] = useState<boolean>(false);
 
-  const initialOptions = React.useMemo<TypeaheadSelectOption[]>(
+  const initialOptions = useMemo<TypeaheadSelectOption[]>(
     () => options.map((o) => ({ ...o, selected: o.value === selected })),
     [options, selected]
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     console.log(`Selected: ${selected || 'none'}`);
   }, [selected]);