@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/src/components/Dropdown/DropdownMenu.tsx

@@ -12,8 +12,6 @@ export interface DropdownMenuProps {
   className?: string;
   /** Flag to indicate if menu is opened */
   isOpen?: boolean;
-  /** @deprecated - no longer used */
-  openedOnEnter?: boolean;
   /** Flag to indicate if the first dropdown item should gain initial focus, set false when adding
    * a specific auto-focus item (like a current selection) otherwise leave as true
    */
@@ -51,7 +49,6 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
   static defaultProps: DropdownMenuProps = {
     className: '',
     isOpen: true,
-    openedOnEnter: false,
     autoFocus: true,
     position: DropdownPosition.left,
     component: 'ul',
@@ -179,8 +176,6 @@ export class DropdownMenu extends React.Component<DropdownMenuProps> {
       component,
       isGrouped,
       setMenuComponentRef,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      openedOnEnter,
       alignments,
       ...props
     } = this.props;

package/src/components/Dropdown/DropdownToggle.tsx

@@ -29,8 +29,6 @@ export interface DropdownToggleProps extends React.HTMLProps<HTMLButtonElement>,
   isText?: boolean;
   /** Whether or not the <div> has a disabled state */
   isDisabled?: boolean;
-  /** @deprecated Use `toggleVariant` instead. Whether or not the dropdown toggle button should have primary button styling */
-  isPrimary?: boolean;
   /** Alternate styles for the dropdown toggle button */
   toggleVariant?: 'primary' | 'secondary' | 'default';
   /** An image to display within the dropdown toggle, appearing before any component children */
@@ -65,7 +63,6 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
   isDisabled = false,
   isPlain = false,
   isText = false,
-  isPrimary = false,
   toggleVariant = 'default',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isActive = false,
@@ -97,7 +94,6 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
           isDisabled={isDisabled}
           isPlain={isPlain}
           isText={isText}
-          isPrimary={isPrimary}
           toggleVariant={toggleVariant}
           onToggle={onToggle}
           aria-haspopup={ariaHasPopup}
@@ -123,7 +119,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
           styles.dropdownToggle,
           styles.modifiers.splitButton,
           splitButtonVariant === 'action' && styles.modifiers.action,
-          (toggleVariant === 'primary' || isPrimary) && splitButtonVariant === 'action' && styles.modifiers.primary,
+          toggleVariant === 'primary' && splitButtonVariant === 'action' && styles.modifiers.primary,
           toggleVariant === 'secondary' && splitButtonVariant === 'action' && styles.modifiers.secondary,
           isDisabled && styles.modifiers.disabled
         )}

package/src/components/Dropdown/DropdownToggleCheckbox.tsx

@@ -91,7 +91,6 @@ export class DropdownToggleCheckbox extends React.Component<DropdownToggleCheckb
     const spinner = (
       <Spinner
         diameter="1em"
-        isSVG
         aria-valuetext={defaultProgressAriaValueText}
         aria-live="polite"
         aria-label={defaultProgressAriaLabel}

package/src/components/Dropdown/DropdownWithContext.tsx

@@ -77,7 +77,6 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
       autoFocus,
       menuAppendTo,
       isFlipEnabled,
-      removeFindDomNode,
       zIndex,
       ...props
     } = this.props;
@@ -175,7 +174,6 @@ export class DropdownWithContext extends React.Component<DropdownProps & OUIAPro
               position={position}
               appendTo={menuAppendTo === 'parent' ? getParentElement() : menuAppendTo}
               isVisible={isOpen}
-              removeFindDomNode={removeFindDomNode}
               zIndex={zIndex}
               popperMatchesTriggerWidth={false}
             />

package/src/components/Dropdown/Toggle.tsx

@@ -35,8 +35,6 @@ export interface ToggleProps {
   isPlain?: boolean;
   /** Display the toggle in text only mode */
   isText?: boolean;
-  /** @deprecated Use `toggleVariant` instead. Display the toggle with a primary button style */
-  isPrimary?: boolean;
   /** Style the toggle as a child of a split button */
   isSplitButton?: boolean;
   /** Alternate styles for the dropdown toggle button */
@@ -64,7 +62,6 @@ export class Toggle extends React.Component<ToggleProps> {
     isDisabled: false,
     isPlain: false,
     isText: false,
-    isPrimary: false,
     isSplitButton: false,
     onToggle: () => {},
     onEnter: () => {},
@@ -138,7 +135,6 @@ export class Toggle extends React.Component<ToggleProps> {
       isDisabled,
       isPlain,
       isText,
-      isPrimary,
       isSplitButton,
       toggleVariant,
       onToggle,
@@ -166,7 +162,6 @@ export class Toggle extends React.Component<ToggleProps> {
               isActive && styles.modifiers.active,
               isPlain && styles.modifiers.plain,
               isText && styles.modifiers.text,
-              isPrimary && styles.modifiers.primary,
               toggleVariant && buttonVariantStyles[toggleVariant],
               className
             )}

package/src/components/Dropdown/__tests__/Dropdown.test.tsx

@@ -132,7 +132,6 @@ describe('Dropdown', () => {
           isOpen
           dropdownItems={dropdownItems}
           toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-          removeFindDomNode
         />
       </React.StrictMode>
     );

package/src/components/EmptyState/EmptyStatePrimary.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
 
 export interface EmptyStatePrimaryProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the EmptyStatePrimary */
@@ -14,7 +13,7 @@ export const EmptyStatePrimary: React.FunctionComponent<EmptyStatePrimaryProps>
   className = '',
   ...props
 }: EmptyStatePrimaryProps) => (
-  <div className={css(styles.emptyStatePrimary, className)} {...props}>
+  <div className={css(className)} {...props}>
     {children}
   </div>
 );

package/src/components/EmptyState/EmptyStateSecondaryActions.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/EmptyState/empty-state';
-
 export interface EmptyStateSecondaryActionsProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the EmptyState */
   children?: React.ReactNode;
@@ -13,7 +11,7 @@ export const EmptyStateSecondaryActions: React.FunctionComponent<EmptyStateSecon
   className = '',
   ...props
 }: EmptyStateSecondaryActionsProps) => (
-  <div className={css(styles.emptyStateSecondary, className)} {...props}>
+  <div className={css(className)} {...props}>
     {children}
   </div>
 );

package/src/components/EmptyState/__tests__/EmptyState.test.tsx

@@ -70,10 +70,11 @@ describe('EmptyState', () => {
     expect(screen.getByTestId('body-test-id')).toHaveClass('custom-empty-state-body pf-c-empty-state__body');
   });
 
-  test('Secondary Action', () => {
+  // TODO: update this with issue #8555
+  xtest('Secondary Action', () => {
     render(<EmptyStateSecondaryActions className="custom-empty-state-secondary" data-testid="actions-test-id" />);
     expect(screen.getByTestId('actions-test-id')).toHaveClass(
-      'custom-empty-state-secondary pf-c-empty-state__secondary'
+      'pf-c-empty-state__secondary'
     );
   });
 
@@ -96,7 +97,8 @@ describe('EmptyState', () => {
     expect(container.querySelector('svg')).toBeInTheDocument();
   });
 
-  test('Primary div', () => {
+  // TODO: update this with issue #8555
+  xtest('Primary div', () => {
     render(
       <EmptyStatePrimary data-testid="primary-test-id">
         <Button variant="link">Link</Button>

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStatePrimary.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EmptyStatePrimary should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__primary ''"
+    class="''"
   >
     <div>
       ReactNode

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateSecondaryActions.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EmptyStateSecondaryActions should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-empty-state__secondary ''"
+    class="''"
   >
     ReactNode
   </div>

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -53,7 +53,7 @@ exports[`EmptyState Main 1`] = `
         New HTTP Proxy
       </button>
       <div
-        class="pf-c-empty-state__secondary"
+        class=""
       >
         <button
           aria-disabled="false"

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -23,8 +23,8 @@ export interface ExpandableSectionProps extends React.HTMLProps<HTMLDivElement>
    * property's value should match the contenId property of the expandable section toggle sub-component.
    */
   contentId?: string;
-  /** Display size variant. Set to "large" for disclosure styling. */
-  displaySize?: 'default' | 'large';
+  /** Display size variant. Set to "lg" for disclosure styling. */
+  displaySize?: 'default' | 'lg';
   /** Forces active state. */
   isActive?: boolean;
   /** Indicates the expandable section has a detached toggle. */
@@ -237,7 +237,7 @@ export class ExpandableSection extends React.Component<ExpandableSectionProps, E
           propOrStateIsExpanded && styles.modifiers.expanded,
           isActive && styles.modifiers.active,
           isDetached && styles.modifiers.detached,
-          displaySize === 'large' && styles.modifiers.displayLg,
+          displaySize === 'lg' && styles.modifiers.displayLg,
           isWidthLimited && styles.modifiers.limitWidth,
           isIndented && styles.modifiers.indented,
           variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,

package/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -49,7 +49,7 @@ test('Detached ExpandableSection renders successfully', () => {
 
 test('Disclosure ExpandableSection', () => {
   const { asFragment } = render(
-    <ExpandableSection {...props} displaySize="large" isWidthLimited>
+    <ExpandableSection {...props} displaySize="lg" isWidthLimited>
       test{' '}
     </ExpandableSection>
   );

package/src/components/ExpandableSection/examples/ExpandableSectionDisclosure.tsx

@@ -13,7 +13,7 @@ export const ExpandableSectionDisclosure: React.FunctionComponent = () => {
       toggleText={isExpanded ? 'Show less' : 'Show more'}
       onToggle={onToggle}
       isExpanded={isExpanded}
-      displaySize="large"
+      displaySize="lg"
       isWidthLimited
     >
       This content is visible only when the component is expanded.

package/src/components/FileUpload/FileUpload.tsx

@@ -1,15 +1,9 @@
 import * as React from 'react';
-import Dropzone, { DropzoneProps, DropzoneInputProps, DropFileEventHandler } from 'react-dropzone';
+import { DropEvent, DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { fromEvent } from 'file-selector';
 
-interface DropzoneInputPropsWithRef extends DropzoneInputProps {
-  ref: React.RefCallback<HTMLInputElement>; // Working around an issue in react-dropzone 9.0.0's types. Should not be necessary in later versions.
-}
-
-/** The main file upload component with drag and drop functionality built in by default. */
-
 export interface FileUploadProps
   extends Omit<
     FileUploadFieldProps,
@@ -47,26 +41,15 @@ export interface FileUploadProps
   isReadOnly?: boolean;
   /** Flag to show if the field is required. */
   isRequired?: boolean;
-  /** @deprecated A callback for when the file contents changes. Please instead use
-   * onFileInputChange, onTextChange, onDataChange, and onClearClick individually.
-   */
-  onChange?: (
-    value: string | File,
-    filename: string,
-    event:
-      | React.MouseEvent<HTMLButtonElement, MouseEvent> // Clear button was clicked
-      | React.DragEvent<HTMLElement> // User dragged/dropped a file
-      | React.ChangeEvent<HTMLElement> // User typed in the TextArea
-  ) => void;
   /** Callback for clicking on the file upload field text area. By default, prevents a click
    * in the text area from opening file dialog.
    */
   onClick?: (event: React.MouseEvent) => void;
   /** Change event emitted from the hidden \<input type="file" \> field associated with the component  */
-  onFileInputChange?: (event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>, file: File) => void;
+  onFileInputChange?: (event: DropEvent, file: File) => void;
   /** Aria-valuetext for the loading spinner. */
   spinnerAriaValueText?: string;
-  /** What type of file. Determines what is passed to the onChange property and what is
+  /** What type of file. Determines whether 'onDataChange` is called and what is
    * expected by the value property (a string for 'text' and 'dataURL', or a File object otherwise.
    */
   type?: 'text' | 'dataURL';
@@ -81,7 +64,7 @@ export interface FileUploadProps
   // Props available in FileUpload but not FileUploadField:
 
   /** Optional extra props to customize react-dropzone. */
-  dropzoneProps?: Partial<DropzoneProps>;
+  dropzoneProps?: Partial<DropzoneOptions>;
   /** Clear button was clicked. */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
   /** On data changed - if type='text' or type='dataURL' and file was loaded it will call this method */
@@ -102,7 +85,6 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   value = type === fileReaderType.text || type === fileReaderType.dataURL ? '' : null,
   filename = '',
   children = null,
-  onChange = () => {},
   onFileInputChange = null,
   onReadStarted = () => {},
   onReadFinished = () => {},
@@ -114,99 +96,85 @@ export const FileUpload: React.FunctionComponent<FileUploadProps> = ({
   dropzoneProps = {},
   ...props
 }: FileUploadProps) => {
-  const onDropAccepted: DropFileEventHandler = (acceptedFiles, event) => {
+  const onDropAccepted = (acceptedFiles: File[], event: DropEvent) => {
     if (acceptedFiles.length > 0) {
       const fileHandle = acceptedFiles[0];
       if (event.type === 'drop') {
         onFileInputChange?.(event, fileHandle);
       }
       if (type === fileReaderType.text || type === fileReaderType.dataURL) {
-        onChange('', fileHandle.name, event); // Show the filename while reading
         onReadStarted(fileHandle);
         readFile(fileHandle, type as fileReaderType)
           .then(data => {
             onReadFinished(fileHandle);
-            onChange(data as string, fileHandle.name, event);
             onDataChange?.(data as string);
           })
           .catch((error: DOMException) => {
             onReadFailed(error, fileHandle);
             onReadFinished(fileHandle);
-            onChange('', '', event); // Clear the filename field on a failure
             onDataChange?.('');
           });
-      } else {
-        onChange(fileHandle, fileHandle.name, event);
       }
     }
     dropzoneProps.onDropAccepted && dropzoneProps.onDropAccepted(acceptedFiles, event);
   };
 
-  const onDropRejected: DropFileEventHandler = (rejectedFiles, event) => {
-    if (rejectedFiles.length > 0) {
-      onChange('', rejectedFiles[0].name, event);
-    }
+  const onDropRejected = (rejectedFiles: FileRejection[], event: DropEvent) => {
     dropzoneProps.onDropRejected && dropzoneProps.onDropRejected(rejectedFiles, event);
   };
 
-  const fileInputRef = React.useRef<HTMLInputElement>();
-  const setFileValue = (filename: string) => {
-    fileInputRef.current.value = filename;
-  };
-
   const onClearButtonClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    onChange('', '', event);
     onClearClick?.(event);
     setFileValue(null);
   };
 
-  return (
-    <Dropzone multiple={false} {...dropzoneProps} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
-      {({ getRootProps, getInputProps, isDragActive, open }) => {
-        const oldInputProps = getInputProps();
-        const inputProps: DropzoneInputProps = {
-          ...oldInputProps,
-          onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
-            oldInputProps.onChange?.(e);
-            const files = await fromEvent(e.nativeEvent);
-            if (files.length === 1) {
-              onFileInputChange?.(e, files[0] as File);
-            }
-          }
-        };
+  const { getRootProps, getInputProps, isDragActive, open, inputRef } = useDropzone({
+    multiple: false,
+    ...dropzoneProps,
+    onDropAccepted,
+    onDropRejected
+  });
 
-        return (
-          <FileUploadField
-            {...getRootProps({
-              ...props,
-              refKey: 'containerRef',
-              onClick: event => event.preventDefault()
-            })}
-            tabIndex={null} // Omit the unwanted tabIndex from react-dropzone's getRootProps
-            id={id}
-            type={type}
-            filename={filename}
-            value={value}
-            onChange={onChange}
-            isDragActive={isDragActive}
-            onBrowseButtonClick={open}
-            onClearButtonClick={onClearButtonClick}
-            onTextAreaClick={onClick}
-            onTextChange={onTextChange}
-          >
-            <input
-              /* hidden, necessary for react-dropzone */
-              {...inputProps}
-              ref={input => {
-                fileInputRef.current = input;
-                (inputProps as DropzoneInputPropsWithRef).ref(input);
-              }}
-            />
-            {children}
-          </FileUploadField>
-        );
-      }}
-    </Dropzone>
+  const setFileValue = (filename: string) => {
+    inputRef.current.value = filename;
+  };
+
+  const oldInputProps = getInputProps();
+  const inputProps: DropzoneInputProps = {
+    ...oldInputProps,
+    onChange: async (e: React.ChangeEvent<HTMLInputElement>) => {
+      oldInputProps.onChange?.(e);
+      const files = await fromEvent(e.nativeEvent);
+      if (files.length === 1) {
+        onFileInputChange?.(e, files[0] as File);
+      }
+    }
+  };
+
+  const rootProps = getRootProps({
+    ...props,
+    tabIndex: null, // Omit the unwanted tabIndex from react-dropzone's getRootProps
+    id,
+    type,
+    filename,
+    value,
+    isDragActive,
+    onBrowseButtonClick: open,
+    onClearButtonClick,
+    onTextAreaClick: onClick,
+    onTextChange,
+    onClick,
+    refKey: 'containerRef'
+  });
+
+  return (
+    <FileUploadField {...rootProps}>
+      <input
+        /* hidden, necessary for react-dropzone */
+        {...inputProps}
+      />
+      {children}
+    </FileUploadField>
   );
 };
 FileUpload.displayName = 'FileUpload';

package/src/components/FileUpload/FileUploadField.tsx

@@ -12,7 +12,7 @@ import { fileReaderType } from '../../helpers/fileUtils';
  * functionality is not built in by default.
  */
 
-export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
+export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElement>, 'value'> {
   /** Flag to allow editing of a text file's contents after it is selected from disk. */
   allowEditingUploadedText?: boolean;
   /** Aria-label for the text area. */
@@ -47,14 +47,6 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
   isReadOnly?: boolean;
   /** Flag to show if the field is required. */
   isRequired?: boolean;
-  /** A callback for when the text area value changes. */
-  onChange?: (
-    value: string,
-    filename: string,
-    event:
-      | React.ChangeEvent<HTMLTextAreaElement> // User typed in the TextArea
-      | React.MouseEvent<HTMLButtonElement, MouseEvent> // User clicked Clear button
-  ) => void;
   /** Aria-valuetext for the loading spinner. */
   spinnerAriaValueText?: string;
   /** What type of file. Determines what is is expected by the value property (a string for
@@ -95,7 +87,6 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
   type,
   value = '',
   filename = '',
-  onChange = () => {},
   onBrowseButtonClick = () => {},
   onClearButtonClick = () => {},
   onTextAreaClick,
@@ -123,8 +114,7 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
 
   ...props
 }: FileUploadFieldProps) => {
-  const onTextAreaChange = (newValue: string, event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onChange(newValue, filename, event);
+  const onTextAreaChange = (newValue: string) => {
     onTextChange?.(newValue);
   };
   return (

package/src/components/FileUpload/__tests__/FileUpload.test.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 test('simple fileupload', () => {
-  const changeHandler = jest.fn();
   const readStartedHandler = jest.fn();
   const readFinishedHandler = jest.fn();
 
@@ -13,7 +12,6 @@ test('simple fileupload', () => {
       type="text"
       value={''}
       filename={''}
-      onChange={changeHandler}
       onReadStarted={readStartedHandler}
       onReadFinished={readFinishedHandler}
       isLoading={false}

package/src/components/FileUpload/__tests__/FileUploadField.test.tsx

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { render } from '@testing-library/react';
 
 test('simple fileuploadfield', () => {
-  const changeHandler = jest.fn();
   const browserBtnClickHandler = jest.fn();
   const clearBtnClickHandler = jest.fn();
 
@@ -13,7 +12,6 @@ test('simple fileuploadfield', () => {
       type="text"
       value={''}
       filename={''}
-      onChange={changeHandler}
       filenamePlaceholder="Do something custom with this!"
       onBrowseButtonClick={browserBtnClickHandler}
       onClearButtonClick={clearBtnClickHandler}

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -4,6 +4,7 @@ exports[`simple fileupload 1`] = `
 <DocumentFragment>
   <div
     class="pf-c-file-upload"
+    role="presentation"
   >
     <div
       class="pf-c-file-upload__file-select"
@@ -63,7 +64,6 @@ exports[`simple fileupload 1`] = `
       />
     </div>
     <input
-      autocomplete="off"
       style="display: none;"
       tabindex="-1"
       type="file"

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -3,20 +3,17 @@ import { FileUpload } from '@patternfly/react-core';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
 
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState<File>();
   const [filename, setFilename] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setValue(file);
     setFilename(file.name);
   };
 
   const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     setFilename('');
-    setValue('');
+    setValue(undefined);
   };
 
   return (

package/src/components/FileUpload/examples/FileUploadSimpleFile.tsx

@@ -2,13 +2,10 @@ import React from 'react';
 import { FileUpload } from '@patternfly/react-core';
 
 export const SimpleFileUpload: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(null);
+  const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState('');
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 

package/src/components/FileUpload/examples/FileUploadSimpleText.tsx

@@ -6,10 +6,7 @@ export const SimpleTextFileUpload: React.FunctionComponent = () => {
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 

package/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx

@@ -6,10 +6,7 @@ export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
   const [filename, setFilename] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -7,10 +7,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [isLoading, setIsLoading] = React.useState(false);
   const [isRejected, setIsRejected] = React.useState(false);
 
-  const handleFileInputChange = (
-    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
-    file: File
-  ) => {
+  const handleFileInputChange = (_, file: File) => {
     setFilename(file.name);
   };
 
@@ -24,7 +21,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
     setIsRejected(false);
   };
 
-  const handleFileRejected = (_rejectedFiles: File[], _event: React.DragEvent<HTMLElement>) => {
+  const handleFileRejected = () => {
     setIsRejected(true);
   };
 
@@ -58,7 +55,7 @@ export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
           onClearClick={handleClear}
           isLoading={isLoading}
           dropzoneProps={{
-            accept: '.csv',
+            accept: { 'text/csv': ['.csv'] },
             maxSize: 1024,
             onDropRejected: handleFileRejected
           }}