@patternfly/react-templates 6.4.0-prerelease.4 → 6.4.0-prerelease.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-templates",
-  "version": "6.4.0-prerelease.4",
+  "version": "6.4.0-prerelease.5",
   "description": "This package provides wrapped component demos for ease of use\n",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -40,8 +40,8 @@
     "tslib": "^2.8.1"
   },
   "peerDependencies": {
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "299d9d2d4df6d9a2868c6f367201655398ea6bae"
+  "gitHead": "526ae27080205bbed336c83bd788812b78f64b3d"
 }

package/src/components/Dropdown/SimpleDropdown.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useState } from 'react';
+import { forwardRef, useState, FunctionComponent, Ref, MouseEvent as ReactMouseEvent, CSSProperties } from 'react';
 import {
   Dropdown,
   DropdownItem,
@@ -54,7 +54,7 @@ export interface SimpleDropdownProps extends Omit<DropdownProps, 'toggle' | 'onT
   toggleProps?: MenuToggleProps;
 }
 
-const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
+const SimpleDropdownBase: FunctionComponent<SimpleDropdownProps> = ({
   innerRef,
   initialItems,
   onSelect: onSelectProp,
@@ -71,7 +71,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
 }: SimpleDropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  const onSelect = (event: React.MouseEvent<Element, MouseEvent>, value: string | number) => {
+  const onSelect = (event: ReactMouseEvent<Element, MouseEvent>, value: string | number) => {
     onSelectProp && onSelectProp(event, value);
     onToggleProp && onToggleProp(false);
     setIsOpen(false);
@@ -82,7 +82,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
     setIsOpen(!isOpen);
   };
 
-  const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const dropdownToggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={onToggle}
@@ -94,7 +94,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
       style={
         {
           width: toggleWidth
-        } as React.CSSProperties
+        } as CSSProperties
       }
       {...toggleProps}
     >
@@ -132,7 +132,7 @@ const SimpleDropdownBase: React.FunctionComponent<SimpleDropdownProps> = ({
   );
 };
 
-export const SimpleDropdown = forwardRef((props: SimpleDropdownProps, ref: React.Ref<any>) => (
+export const SimpleDropdown = forwardRef((props: SimpleDropdownProps, ref: Ref<any>) => (
   <SimpleDropdownBase {...props} innerRef={ref} />
 ));
 

package/src/components/Dropdown/examples/DropdownTemplates.md

@@ -11,7 +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 { Fragment, useState, FunctionComponent } 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';

package/src/components/Dropdown/examples/SimpleDropdownExample.tsx

@@ -1,9 +1,9 @@
-import { Fragment, useState } from 'react';
+import { Fragment, useState, FunctionComponent } 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 = () => {
+export const SimpleDropdownExample: FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = useState(false);
 
   const items: SimpleDropdownItem[] = [

package/src/components/Select/CheckboxSelect.tsx

@@ -1,4 +1,12 @@
-import { forwardRef, useEffect, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  FunctionComponent,
+  Ref,
+  MouseEvent as ReactMouseEvent,
+  CSSProperties
+} 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 {
@@ -35,7 +43,7 @@ export interface CheckboxSelectProps extends Omit<SelectProps, 'toggle' | 'onTog
   toggleProps?: MenuToggleProps;
 }
 
-const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
+const CheckboxSelectBase: FunctionComponent<CheckboxSelectProps> = ({
   innerRef,
   initialOptions,
   isDisabled,
@@ -69,7 +77,7 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const onSelect = (event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     const valueString = `${value}`;
     if (selected.includes(valueString)) {
       setSelected((prevSelected) => prevSelected.filter((item) => item !== valueString));
@@ -86,7 +94,7 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
     </>
   );
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={onToggleClick}
@@ -95,7 +103,7 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
       style={
         {
           width: toggleWidth
-        } as React.CSSProperties
+        } as CSSProperties
       }
       {...toggleProps}
     >
@@ -122,6 +130,6 @@ const CheckboxSelectBase: React.FunctionComponent<CheckboxSelectProps> = ({
   );
 };
 
-export const CheckboxSelect = forwardRef((props: CheckboxSelectProps, ref: React.Ref<any>) => (
+export const CheckboxSelect = forwardRef((props: CheckboxSelectProps, ref: Ref<any>) => (
   <CheckboxSelectBase {...props} innerRef={ref} />
 ));

package/src/components/Select/MultiTypeaheadSelect.tsx

@@ -1,4 +1,15 @@
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useRef,
+  FunctionComponent,
+  Ref,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  FormEvent as ReactFormEvent,
+  CSSProperties
+} from 'react';
 import { Button } from '@patternfly/react-core/dist/esm/components/Button';
 import { Label, LabelGroup, LabelProps } from '@patternfly/react-core/dist/esm/components/Label';
 import { MenuToggle, MenuToggleElement, MenuToggleProps } from '@patternfly/react-core/dist/esm/components/MenuToggle';
@@ -57,7 +68,7 @@ export interface MultiTypeaheadSelectProps extends Omit<SelectProps, 'toggle' |
   initialInputValue?: string;
 }
 
-export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSelectProps> = ({
+export const MultiTypeaheadSelectBase: FunctionComponent<MultiTypeaheadSelectProps> = ({
   innerRef,
   initialOptions,
   onSelectionChange,
@@ -145,7 +156,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
   };
 
   const selectOption = (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
+    _event: ReactMouseEvent<Element, MouseEvent> | ReactKeyboardEvent<HTMLInputElement> | undefined,
     option: string | number
   ) => {
     const selections = selected.includes(option) ? selected.filter((o) => option !== o) : [...selected, option];
@@ -155,7 +166,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
   };
 
   const clearOption = (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
+    _event: ReactMouseEvent<Element, MouseEvent> | ReactKeyboardEvent<HTMLInputElement> | undefined,
     option: string | number
   ) => {
     const selections = selected.filter((o) => option !== o);
@@ -163,13 +174,13 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     setSelected(selections);
   };
 
-  const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const _onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     if (value && value !== NO_RESULTS) {
       selectOption(_event, value);
     }
   };
 
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+  const onTextInputChange = (_event: ReactFormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
     onInputChange && onInputChange(value);
 
@@ -228,7 +239,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     setActiveAndFocusedItem(indexToFocus);
   };
 
-  const defaultOnInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const defaultOnInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {
     const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
@@ -252,7 +263,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     }
   };
 
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const onInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {
     if (onInputKeyDownProp) {
       onInputKeyDownProp(event);
     } else {
@@ -266,7 +277,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     textInputRef?.current?.focus();
   };
 
-  const onClearButtonClick = (ev: React.MouseEvent) => {
+  const onClearButtonClick = (ev: ReactMouseEvent) => {
     setSelected([]);
     onInputChange && onInputChange('');
     resetActiveAndFocusedItem();
@@ -274,7 +285,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
     onSelectionChange && onSelectionChange(ev, []);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       variant="typeahead"
@@ -286,7 +297,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
       style={
         {
           width: toggleWidth
-        } as React.CSSProperties
+        } as CSSProperties
       }
       {...toggleProps}
     >
@@ -359,7 +370,7 @@ export const MultiTypeaheadSelectBase: React.FunctionComponent<MultiTypeaheadSel
 
 MultiTypeaheadSelectBase.displayName = 'MultiTypeaheadSelectBase';
 
-export const MultiTypeaheadSelect = forwardRef((props: MultiTypeaheadSelectProps, ref: React.Ref<any>) => (
+export const MultiTypeaheadSelect = forwardRef((props: MultiTypeaheadSelectProps, ref: Ref<any>) => (
   <MultiTypeaheadSelectBase {...props} innerRef={ref} />
 ));
 

package/src/components/Select/SimpleSelect.tsx

@@ -1,4 +1,12 @@
-import { forwardRef, useEffect, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  FunctionComponent,
+  Ref,
+  MouseEvent as ReactMouseEvent,
+  CSSProperties
+} from 'react';
 import {
   Select,
   SelectList,
@@ -36,7 +44,7 @@ export interface SimpleSelectProps extends Omit<SelectProps, 'toggle' | 'onToggl
   toggleProps?: MenuToggleProps;
 }
 
-const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
+const SimpleSelectBase: FunctionComponent<SimpleSelectProps> = ({
   innerRef,
   initialOptions,
   isDisabled,
@@ -71,14 +79,14 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
     setIsOpen(!isOpen);
   };
 
-  const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const _onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     onSelect && onSelect(_event, value);
     setSelected(initialOptions.find((o) => o.value === value));
     onToggle && onToggle(true);
     setIsOpen(false);
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       onClick={onToggleClick}
@@ -87,7 +95,7 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
       style={
         {
           width: toggleWidth
-        } as React.CSSProperties
+        } as CSSProperties
       }
       {...toggleProps}
     >
@@ -114,7 +122,7 @@ const SimpleSelectBase: React.FunctionComponent<SimpleSelectProps> = ({
   );
 };
 
-export const SimpleSelect = forwardRef((props: SimpleSelectProps, ref: React.Ref<any>) => (
+export const SimpleSelect = forwardRef((props: SimpleSelectProps, ref: Ref<any>) => (
   <SimpleSelectBase {...props} innerRef={ref} />
 ));
 

package/src/components/Select/TypeaheadSelect.tsx

@@ -1,4 +1,15 @@
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import {
+  forwardRef,
+  useEffect,
+  useState,
+  useRef,
+  FunctionComponent,
+  Ref,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  FormEvent as ReactFormEvent,
+  CSSProperties
+} 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 {
@@ -65,7 +76,7 @@ export interface TypeaheadSelectProps extends Omit<SelectProps, 'toggle' | 'onSe
 const defaultNoOptionsFoundMessage = (filter: string) => `No results found for "${filter}"`;
 const defaultCreateOptionMessage = (newValue: string) => `Create "${newValue}"`;
 
-export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps> = ({
+export const TypeaheadSelectBase: FunctionComponent<TypeaheadSelectProps> = ({
   innerRef,
   initialOptions,
   onSelect,
@@ -203,7 +214,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
   };
 
   const selectOption = (
-    _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined,
+    _event: ReactMouseEvent<Element, MouseEvent> | ReactKeyboardEvent<HTMLInputElement> | undefined,
     option: TypeaheadSelectOption
   ) => {
     onSelect && onSelect(_event, option.value);
@@ -215,14 +226,14 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     closeMenu();
   };
 
-  const _onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
+  const _onSelect = (_event: ReactMouseEvent<Element, MouseEvent> | undefined, value: string | number | undefined) => {
     if (value && value !== NO_RESULTS) {
       const optionToSelect = selectOptions.find((option) => option.value === value);
       selectOption(_event, optionToSelect);
     }
   };
 
-  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {
+  const onTextInputChange = (_event: ReactFormEvent<HTMLInputElement>, value: string) => {
     setInputValue(value);
     onInputChange && onInputChange(value);
     setFilterValue(value);
@@ -276,7 +287,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     setActiveAndFocusedItem(indexToFocus);
   };
 
-  const defaultOnInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const defaultOnInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {
     const focusedItem = focusedItemIndex !== null ? selectOptions[focusedItemIndex] : null;
 
     switch (event.key) {
@@ -297,7 +308,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     }
   };
 
-  const onInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const onInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {
     if (onInputKeyDownProp) {
       onInputKeyDownProp(event);
     } else {
@@ -321,7 +332,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
     onClearSelection && onClearSelection();
   };
 
-  const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
+  const toggle = (toggleRef: Ref<MenuToggleElement>) => (
     <MenuToggle
       ref={toggleRef}
       variant="typeahead"
@@ -333,7 +344,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
       style={
         {
           width: toggleWidth
-        } as React.CSSProperties
+        } as CSSProperties
       }
       {...toggleProps}
     >
@@ -388,7 +399,7 @@ export const TypeaheadSelectBase: React.FunctionComponent<TypeaheadSelectProps>
 };
 TypeaheadSelectBase.displayName = 'TypeaheadSelectBase';
 
-export const TypeaheadSelect = forwardRef((props: TypeaheadSelectProps, ref: React.Ref<any>) => (
+export const TypeaheadSelect = forwardRef((props: TypeaheadSelectProps, ref: Ref<any>) => (
   <TypeaheadSelectBase {...props} innerRef={ref} />
 ));
 

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

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

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

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

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

@@ -11,7 +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 { Fragment, useEffect, useMemo, useState, FunctionComponent } 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 { Fragment, useMemo, useState } from 'react';
+import { Fragment, useMemo, useState, FunctionComponent } from 'react';
 import { Checkbox } from '@patternfly/react-core';
 import { SimpleSelect, SimpleSelectOption } from '@patternfly/react-templates';
 
@@ -8,7 +8,7 @@ const Options: SimpleSelectOption[] = [
   { content: 'Option 3', value: 'Option3' }
 ];
 
-export const SelectSimpleDemo: React.FunctionComponent = () => {
+export const SelectSimpleDemo: FunctionComponent = () => {
   const [isDisabled, setIsDisabled] = useState<boolean>(false);
   const [selected, setSelected] = useState<string | undefined>('Option1');
 

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, FunctionComponent } from 'react';
 import { TypeaheadSelect, TypeaheadSelectOption } from '@patternfly/react-templates';
 import { Checkbox } from '@patternfly/react-core';
 
@@ -12,7 +12,7 @@ const Options = [
 ];
 
 /* eslint-disable no-console */
-export const SelectTypeaheadDemo: React.FunctionComponent = () => {
+export const SelectTypeaheadDemo: FunctionComponent = () => {
   const [selected, setSelected] = useState<string | undefined>();
   const [options, setOptions] = useState(Options);
   const [isCreatable, setIsCreatable] = useState<boolean>(false);