@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

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?: 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
           }}

package/src/components/LabelGroup/LabelGroup.tsx

@@ -156,14 +156,15 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
       ...rest
     } = this.props;
     const { isOpen } = this.state;
-    const renderedChildren = React.Children.toArray(children);
-    const numChildren = renderedChildren.length;
+    const numChildren = React.Children.count(children);
     const collapsedTextResult = fillTemplate(collapsedText as string, {
-      remaining: numChildren - numLabels
+      remaining: React.Children.count(children) - numLabels
     });
 
     const renderLabelGroup = (id: string) => {
-      const labelArray = !isOpen ? renderedChildren.slice(0, numLabels) : renderedChildren;
+      const labelArray = !isOpen
+        ? React.Children.toArray(children).slice(0, numLabels)
+        : React.Children.toArray(children);
 
       const content = (
         <React.Fragment>

package/src/components/Menu/MenuGroup.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
 
-export interface MenuGroupProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
+export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
   /** Items within group */
   children?: React.ReactNode;
   /** Additional classes added to the MenuGroup */
   className?: string;
   /** Group label */
-  label?: React.ReactNode | React.FC;
+  label?: string;
   /** ID for title label */
   titleId?: string;
   /** Forwarded ref */
@@ -25,23 +25,16 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   innerRef,
   labelHeadingLevel: HeadingLevel = 'h1',
   ...props
-}: MenuGroupProps) => {
-  const Wrapper = typeof label === 'function' ? label : HeadingLevel;
-  return (
-    <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
-      <>
-        {['function', 'string'].includes(typeof label) ? (
-          <Wrapper className={css(styles.menuGroupTitle)} id={titleId}>
-            {label as React.ReactNode}
-          </Wrapper>
-        ) : (
-          label
-        )}
-        {children}
-      </>
-    </section>
-  );
-};
+}: MenuGroupProps) => (
+  <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
+    {label && (
+      <HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
+        {label}
+      </HeadingLevel>
+    )}
+    {children}
+  </section>
+);
 
 export const MenuGroup = React.forwardRef((props: MenuGroupProps, ref: React.Ref<HTMLElement>) => (
   <MenuGroupBase {...props} innerRef={ref} />

package/src/components/Menu/MenuItem.tsx

@@ -25,7 +25,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
   /** @beta Flag indicating the item has a checkbox */
-  hasCheck?: boolean;
+  hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;
   /** Flag indicating if the item is favorited */
@@ -79,7 +79,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
   className,
   itemId = null,
   to,
-  hasCheck = false,
+  hasCheckbox = false,
   isActive = null,
   isFavorited = null,
   isLoadButton = false,
@@ -117,7 +117,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     disableHover
   } = React.useContext(MenuContext);
   let Component = (to ? 'a' : component) as any;
-  if (hasCheck && !to) {
+  if (hasCheckbox && !to) {
     Component = 'label' as any;
   }
   const [flyoutTarget, setFlyoutTarget] = React.useState(null);
@@ -305,26 +305,26 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
       onMouseOver={onMouseOver}
       {...(flyoutMenu && { onKeyDown: handleFlyout })}
       ref={ref}
-      role={!hasCheck ? 'none' : 'menuitem'}
+      role={!hasCheckbox ? 'none' : 'menuitem'}
       {...props}
     >
       <GenerateId>
         {randomId => (
           <Component
             tabIndex={-1}
-            className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
+            className={css(styles.menuItem, getIsSelected() && !hasCheckbox && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
-            {...(!hasCheck && { disabled: isDisabled })}
-            {...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
+            {...(!hasCheckbox && { disabled: isDisabled })}
+            {...(!hasCheckbox && !flyoutMenu && { role: 'menuitem' })}
             ref={innerRef}
-            {...(!hasCheck && {
+            {...(!hasCheckbox && {
               onClick: (event: any) => {
                 onItemSelect(event, onSelect);
                 _drill && _drill();
                 flyoutMenu && handleFlyout(event);
               }
             })}
-            {...(hasCheck && { htmlFor: randomId })}
+            {...(hasCheckbox && { htmlFor: randomId })}
             {...additionalProps}
           >
             <span className={css(styles.menuItemMain)}>
@@ -334,7 +334,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
                 </span>
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
-              {hasCheck && (
+              {hasCheckbox && (
                 <span className={css('pf-c-menu__item-check')}>
                   <Checkbox
                     id={randomId}

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

@@ -52,13 +52,13 @@ describe('Menu', () => {
     });
   });
 
-  describe('with hasCheck', () => {
+  describe('with hasCheckbox', () => {
     test('should render Menu with checkbox items', () => {
       const { asFragment } = render(
         <Menu>
           <MenuContent>
             <MenuList>
-              <MenuItem hasCheck itemId={0}>
+              <MenuItem hasCheckbox itemId={0}>
                 Checkbox 1
               </MenuItem>
             </MenuList>

package/src/components/Menu/examples/MenuWithCheckbox.tsx

@@ -18,13 +18,13 @@ export const MenuWithCheckbox: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} selected={selectedItems}>
       <MenuContent>
         <MenuList>
-          <MenuItem hasCheck itemId={0} isSelected={selectedItems.includes(0)}>
+          <MenuItem hasCheckbox itemId={0} isSelected={selectedItems.includes(0)}>
             Checkbox 1
           </MenuItem>
-          <MenuItem hasCheck itemId={1} isSelected={selectedItems.includes(1)}>
+          <MenuItem hasCheckbox itemId={1} isSelected={selectedItems.includes(1)}>
             Checkbox 2
           </MenuItem>
-          <MenuItem hasCheck itemId={2} isDisabled>
+          <MenuItem hasCheckbox itemId={2} isDisabled>
             Checkbox 3
           </MenuItem>
         </MenuList>