@patternfly/react-core 5.0.0-alpha.85 → 5.0.0-alpha.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.85",
+  "version": "5.0.0-alpha.86",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "2161ca8ccb09609f0a72a68e70bd86cda585ea97"
+  "gitHead": "ba1717602667f1cba6fe191e752264c78327ae4b"
 }

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -18,7 +18,7 @@ export interface MultipleFileUploadProps extends Omit<React.HTMLProps<HTMLDivEle
   /** Flag setting the component to horizontal styling mode */
   isHorizontal?: boolean;
   /** When files are dropped or uploaded this callback will be called with all accepted files */
-  onFileDrop?: (data: File[]) => void;
+  onFileDrop?: (event: DropEvent, data: File[]) => void;
 }
 
 export const MultipleFileUploadContext = React.createContext({
@@ -34,7 +34,7 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
   ...props
 }: MultipleFileUploadProps) => {
   const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
-    onFileDrop(acceptedFiles);
+    onFileDrop(event, acceptedFiles);
     // allow users to set a custom drop accepted handler rather than using on data change
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
@@ -47,7 +47,7 @@ export const MultipleFileUpload: React.FunctionComponent<MultipleFileUploadProps
 
   const rootProps = getRootProps({
     ...props,
-    onClick: event => event.preventDefault() // Prevents clicking TextArea from opening file dialog
+    onClick: (event) => event.preventDefault() // Prevents clicking TextArea from opening file dialog
   });
 
   return (

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -50,4 +50,18 @@ The "Show as horizontal" checkbox can be used to easily toggle the `isHorizontal
 The "Demonstrate error reporting by forcing uploads to fail" checkbox shows how our `progressHelperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
 
 ```ts file="./MultipleFileUploadBasic.tsx"
+
 ```
+
+## Types
+
+Multiple file upload uses both the `DropEvent` and `DropzoneOptions` types from react-dropzone. The `DropEvent` type is a union comprised of the following types:
+
+```noLive
+ React.DragEvent<HTMLElement>
+ | React.ChangeEvent<HTMLInputElement>
+ | DragEvent
+ | Event
+```
+
+`DropzoneOptions` is comprised of additional props with their own types. For more information on using `DropzoneOptions` visit [react-dropzone props and methods](https://react-dropzone.js.org/#src).

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -8,6 +8,7 @@ import {
   HelperText,
   HelperTextItem
 } from '@patternfly/react-core';
+import { DropEvent } from 'react-dropzone';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -68,7 +69,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   };
 
   // callback that will be called by the react dropzone with the newly dropped file objects
-  const handleFileDrop = (droppedFiles: File[]) => {
+  const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
     const currentFileNames = currentFiles.map((file) => file.name);
     const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name));

package/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx

@@ -8,6 +8,7 @@ import {
   OverflowMenuDropdownItem,
   MenuToggle,
   Slider,
+  SliderOnChangeEvent,
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
@@ -26,7 +27,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
     setIsOpen(!isOpen);
   };
 
-  const onChange = (value: number) => {
+  const onChange = (_event: SliderOnChangeEvent, value: number) => {
     setContainerWidth(value);
   };
 

package/src/components/Slider/Slider.tsx

@@ -19,6 +19,13 @@ export interface SliderStepObject {
   value: number;
 }
 
+export type SliderOnChangeEvent =
+  | React.MouseEvent
+  | React.KeyboardEvent
+  | React.FormEvent<HTMLInputElement>
+  | React.TouchEvent
+  | React.FocusEvent<HTMLInputElement>;
+
 /** The main slider component. */
 export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Flag indicating if the slider is discrete for custom steps. This will cause the slider
@@ -55,6 +62,7 @@ export interface SliderProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onCh
   min?: number;
   /** Value change callback. This is called when the slider value changes. */
   onChange?: (
+    event: SliderOnChangeEvent,
     value: number,
     inputValue?: number,
     setLocalInputValue?: React.Dispatch<React.SetStateAction<number>>
@@ -131,7 +139,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     if (event.key === 'Enter') {
       event.preventDefault();
       if (onChange) {
-        onChange(localValue, localInputValue, setLocalInputValue);
+        onChange(event, localValue, localInputValue, setLocalInputValue);
       }
     }
   };
@@ -144,9 +152,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     thumbRef.current.focus();
   };
 
-  const onBlur = () => {
+  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     if (onChange) {
-      onChange(localValue, localInputValue, setLocalInputValue);
+      onChange(event, localValue, localInputValue, setLocalInputValue);
     }
   };
 
@@ -196,7 +204,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       thumbRef.current.style.setProperty('--pf-c-slider--value', `${snapValue}%`);
       setValue(snapValue);
       if (onChange) {
-        onChange(snapValue);
+        onChange(e, snapValue);
       }
     }
   };
@@ -260,9 +268,9 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
     // Call onchange callback
     if (onChange) {
       if (snapValue !== undefined) {
-        onChange(snapValue);
+        onChange(e, snapValue);
       } else {
-        onChange(newValue);
+        onChange(e, newValue);
       }
     }
   };
@@ -302,7 +310,7 @@ export const Slider: React.FunctionComponent<SliderProps> = ({
       thumbRef.current.style.setProperty('--pf-c-slider--value', `${newValue}%`);
       setValue(newValue);
       if (onChange) {
-        onChange(newValue);
+        onChange(e, newValue);
       }
     }
   };

package/src/components/Slider/examples/Slider.md

@@ -16,29 +16,55 @@ import LockOpenIcon from '@patternfly/react-icons/dist/esm/icons/lock-open-icon'
 ### Discrete
 
 ```ts file="./SliderDiscrete.tsx"
+
 ```
 
 ### Continuous
 
 ```ts file="./SliderContinuous.tsx"
+
 ```
 
 ### Value input
 
 ```ts file="./SliderValueInput.tsx"
+
 ```
 
 ### Thumb value input
 
 ```ts file="./SliderThumbValueInput.tsx"
+
 ```
 
 ### Actions
 
 ```ts file="./SliderActions.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./SliderDisabled.tsx"
+
+```
+
+## Types
+
+### SliderOnChangeEvent
+
+The slider's `onChange` prop accepts an `event` parameter of the following types:
+
+- `React.MouseEvent`
+- `React.KeyboardEvent`
+- `React.FormEvent<HTMLInputElement>`
+- `React.TouchEvent`
+- `React.FocusEvent<HTMLInputElement>`
+
+The `SliderOnChangeEvent` type is a union of the above event types, and can be imported and used in your code like in the following code snippet:
+
+```noLive
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
+
+<Slider onChange={(event: SliderOnChangeEvent) => {}} />
 ```

package/src/components/Slider/examples/SliderActions.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, Button, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Button, Text, TextVariants } 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';
 import LockIcon from '@patternfly/react-icons/dist/esm/icons/lock-icon';
@@ -11,11 +11,12 @@ export const SliderActions: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = React.useState(50);
   const [isDisabled, setIsDisabled] = React.useState(false);
 
-  const onChange1 = (value: number) => {
+  const onChange1 = (_event: SliderOnChangeEvent, value: number) => {
     setValue1(Math.floor(Number(value)));
   };
 
   const onChange2 = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>

package/src/components/Slider/examples/SliderContinuous.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, Slider, Text, TextVariants } from '@patternfly/react-core';
+import { Checkbox, Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
 
 export const SliderContinuous: React.FunctionComponent = () => {
   const [hasTooltipOverThumb, setHasTooltipOverThumb] = React.useState(false);
@@ -12,15 +12,19 @@ export const SliderContinuous: React.FunctionComponent = () => {
         id="thumb-has-tooltip"
         label="hasTooltipOverThumb"
         isChecked={hasTooltipOverThumb}
-        onChange={(_event, checked) => setHasTooltipOverThumb(checked)}
+        onChange={(_event: React.FormEvent<HTMLInputElement>, checked: boolean) => setHasTooltipOverThumb(checked)}
         style={{ marginBottom: 20 }}
       />
       <Text component={TextVariants.h3}>Slider Value is: {value}</Text>
-      <Slider hasTooltipOverThumb={hasTooltipOverThumb} value={value} onChange={setValue} />
+      <Slider
+        hasTooltipOverThumb={hasTooltipOverThumb}
+        value={value}
+        onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
+      />
       <br />
       <Text component={TextVariants.h3}>Slider value is: {valueCustom}</Text>
       <Slider
-        onChange={setValueCustom}
+        onChange={(_event: SliderOnChangeEvent, value: number) => setValueCustom(value)}
         value={valueCustom}
         areCustomStepsContinuous
         hasTooltipOverThumb={hasTooltipOverThumb}

package/src/components/Slider/examples/SliderDisabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
 
 export const SliderDisabled: React.FunctionComponent = () => {
   const [value, setValue] = React.useState(50);
@@ -16,14 +16,19 @@ export const SliderDisabled: React.FunctionComponent = () => {
   ];
 
   const displayValue = () => {
-    const step = steps.find(step => step.value === value);
+    const step = steps.find((step) => step.value === value);
     return step ? step.label : 0;
   };
 
   return (
     <>
       <Text component={TextVariants.h3}>Slider value is: {displayValue()}</Text>
-      <Slider isDisabled value={value} onChange={setValue} customSteps={steps} />
+      <Slider
+        isDisabled
+        value={value}
+        onChange={(_event: SliderOnChangeEvent, value: number) => setValue(value)}
+        customSteps={steps}
+      />
     </>
   );
 };

package/src/components/Slider/examples/SliderDiscrete.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider, Text, TextVariants } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent, Text, TextVariants } from '@patternfly/react-core';
 
 export const SliderDiscrete: React.FunctionComponent = () => {
   const initialValues = {
@@ -53,7 +53,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.h3}>Slider value is: {numValue.value1}</Text>
       <Slider
         value={initialValues.value1}
-        onChange={(value: number) => handleChange(value, 'value1')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value1')}
         customSteps={steps}
       />
       <br />
@@ -61,7 +61,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = 0, max = 200, step = 50) </Text>
       <Slider
         value={initialValues.value2}
-        onChange={(value: number) => handleChange(value, 'value2')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value2')}
         max={200}
         step={50}
         showTicks
@@ -71,7 +71,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries not shown) </Text>
       <Slider
         value={initialValues.value3}
-        onChange={(value: number) => handleChange(value, 'value3')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value3')}
         min={-25}
         max={75}
         step={10}
@@ -83,7 +83,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown) </Text>
       <Slider
         value={initialValues.value4}
-        onChange={(value: number) => handleChange(value, 'value4')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value4')}
         min={-25}
         max={75}
         step={10}
@@ -94,7 +94,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
       <Text component={TextVariants.small}>(min = -25, max = 75, step = 10, boundaries shown, ticks not shown) </Text>
       <Slider
         value={initialValues.value5}
-        onChange={(value: number) => handleChange(value, 'value5')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value5')}
         min={-25}
         max={75}
         step={10}
@@ -107,7 +107,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         showTicks
         max={5}
         customSteps={stepsDiscreteWithMax}
-        onChange={(value: number) => handleChange(value, 'value6')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value6')}
       />
       <br />
       <Text component={TextVariants.h3}>Slider value is: {Math.floor(numValue.value7)}</Text>
@@ -116,7 +116,7 @@ export const SliderDiscrete: React.FunctionComponent = () => {
         value={initialValues.value7}
         showTicks
         customSteps={stepsDiscreteNoLinearWithMaxMin}
-        onChange={(value: number) => handleChange(value, 'value7')}
+        onChange={(_event: SliderOnChangeEvent, value: number) => handleChange(value, 'value7')}
         min={12}
         max={86}
       />

package/src/components/Slider/examples/SliderThumbValueInput.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Slider } from '@patternfly/react-core';
+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 onChange = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>

package/src/components/Slider/examples/SliderValueInput.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Slider } from '@patternfly/react-core';
+import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
 
 export const SliderValueInput: React.FunctionComponent = () => {
   const [valueDiscrete, setValueDiscrete] = React.useState(62.5);
@@ -29,6 +29,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
   ];
 
   const onChangeDiscrete = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
@@ -37,7 +38,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
     let newInputValue;
 
     if (inputValue === undefined) {
-      const step = stepsDiscrete.find(step => step.value === value);
+      const step = stepsDiscrete.find((step) => step.value === value);
       newInputValue = step ? step.label : 0;
       newInputValue = Number(newInputValue);
       newValue = value;
@@ -54,7 +55,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
           newInputValue = minValue;
           setLocalInputValue(minValue);
         } else {
-          const stepIndex = stepsDiscrete.findIndex(step => Number(step.label) >= inputValue);
+          const stepIndex = stepsDiscrete.findIndex((step) => Number(step.label) >= inputValue);
           if (Number(stepsDiscrete[stepIndex].label) === inputValue) {
             newValue = stepsDiscrete[stepIndex].value;
             newInputValue = inputValue;
@@ -77,6 +78,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
   };
 
   const onChangePercent = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>
@@ -85,7 +87,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
     let newInputValue;
 
     if (inputValue === undefined) {
-      const step = stepsPercent.find(step => step.value === value);
+      const step = stepsPercent.find((step) => step.value === value);
       newInputValue = step ? step.label.slice(0, -1) : 0;
       newInputValue = Number(newInputValue);
       newValue = value;
@@ -101,7 +103,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
           newValue = minValue;
           setLocalInputValue(minValue);
         } else {
-          const stepIndex = stepsPercent.findIndex(step => Number(step.label.slice(0, -1)) >= inputValue);
+          const stepIndex = stepsPercent.findIndex((step) => Number(step.label.slice(0, -1)) >= inputValue);
           if (Number(stepsPercent[stepIndex].label.slice(0, -1)) === inputValue) {
             newValue = stepsPercent[stepIndex].value;
             newInputValue = inputValue;
@@ -127,6 +129,7 @@ export const SliderValueInput: React.FunctionComponent = () => {
   };
 
   const onChangeContinuous = (
+    _event: SliderOnChangeEvent,
     value: number,
     inputValue: number,
     setLocalInputValue: React.Dispatch<React.SetStateAction<number>>

package/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx

@@ -8,6 +8,7 @@ import {
   Modal,
   Checkbox
 } from '@patternfly/react-core';
+import { DropEvent } from 'react-dropzone';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -34,7 +35,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   React.useEffect(() => {
     if (readFileData.length < currentFiles.length) {
       setStatusIcon('inProgress');
-    } else if (readFileData.every(file => file.loadResult === 'success')) {
+    } else if (readFileData.every((file) => file.loadResult === 'success')) {
       setStatusIcon('success');
     } else {
       setStatusIcon('danger');
@@ -44,39 +45,39 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   // remove files from both state arrays based on their name
   const removeFiles = (namesOfFilesToRemove: string[]) => {
     const newCurrentFiles = currentFiles.filter(
-      currentFile => !namesOfFilesToRemove.some(fileName => fileName === currentFile.name)
+      (currentFile) => !namesOfFilesToRemove.some((fileName) => fileName === currentFile.name)
     );
 
     setCurrentFiles(newCurrentFiles);
 
     const newReadFiles = readFileData.filter(
-      readFile => !namesOfFilesToRemove.some(fileName => fileName === readFile.fileName)
+      (readFile) => !namesOfFilesToRemove.some((fileName) => fileName === readFile.fileName)
     );
 
     setReadFileData(newReadFiles);
   };
 
   // callback that will be called by the react dropzone with the newly dropped file objects
-  const handleFileDrop = (droppedFiles: File[]) => {
+  const handleFileDrop = (_event: DropEvent, droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
-    const currentFileNames = currentFiles.map(file => file.name);
-    const reUploads = droppedFiles.filter(droppedFile => currentFileNames.includes(droppedFile.name));
+    const currentFileNames = currentFiles.map((file) => file.name);
+    const reUploads = droppedFiles.filter((droppedFile) => currentFileNames.includes(droppedFile.name));
 
     /** this promise chain is needed because if the file removal is done at the same time as the file adding react
      * won't realize that the status items for the re-uploaded files needs to be re-rendered */
     Promise.resolve()
-      .then(() => removeFiles(reUploads.map(file => file.name)))
-      .then(() => setCurrentFiles(prevFiles => [...prevFiles, ...droppedFiles]));
+      .then(() => removeFiles(reUploads.map((file) => file.name)))
+      .then(() => setCurrentFiles((prevFiles) => [...prevFiles, ...droppedFiles]));
   };
 
   // callback called by the status item when a file is successfully read with the built-in file reader
   const handleReadSuccess = (data: string, file: File) => {
-    setReadFileData(prevReadFiles => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);
+    setReadFileData((prevReadFiles) => [...prevReadFiles, { data, fileName: file.name, loadResult: 'success' }]);
   };
 
   // callback called by the status item when a file encounters an error while being read with the built-in file reader
   const handleReadFail = (error: DOMException, file: File) => {
-    setReadFileData(prevReadFiles => [
+    setReadFileData((prevReadFiles) => [
       ...prevReadFiles,
       { loadError: error, fileName: file.name, loadResult: 'danger' }
     ]);
@@ -95,7 +96,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     }
   };
 
-  const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
+  const successfullyReadFileCount = readFileData.filter((fileData) => fileData.loadResult === 'success').length;
 
   return (
     <>
@@ -123,7 +124,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             statusToggleText={`${successfullyReadFileCount} of ${currentFiles.length} files uploaded`}
             statusToggleIcon={statusIcon}
           >
-            {currentFiles.map(file => (
+            {currentFiles.map((file) => (
               <MultipleFileUploadStatusItem
                 file={file}
                 key={file.name}