@patternfly/react-core 4.243.1 → 4.244.0

package/src/components/FileUpload/FileUpload.tsx

@@ -8,22 +8,48 @@ 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,
     'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
   > {
-  /** Unique id for the TextArea, also used to generate ids for accessible labels. */
-  id: string;
-  /** What type of file. Determines what is is passed to `onChange` and expected by `value`
-   * (a string for 'text' and 'dataURL', or a File object otherwise. */
-  type?: 'text' | 'dataURL';
-  /** Value of the file's contents
-   * (string if text file, File object otherwise) */
-  value?: string | File;
+  /** Flag to allow editing of a text file's contents after it is selected from disk. */
+  allowEditingUploadedText?: boolean;
+  /** Aria-label for the text area. */
+  'aria-label'?: string;
+  /** Text for the browse button. */
+  browseButtonText?: string;
+  /** Additional children to render after (or instead of) the file preview. */
+  children?: React.ReactNode;
+  /** Additional classes added to the file upload container element. */
+  className?: string;
+  /** Text for the clear button. */
+  clearButtonText?: string;
   /** Value to be shown in the read-only filename field. */
   filename?: string;
-  /** @deprecated A callback for when the file contents change. Please instead use onFileInputChange, onTextChange, onDataChange, onClearClick individually.  */
+  /** Aria-label for the read-only filename field. */
+  filenameAriaLabel?: string;
+  /** Placeholder string to display in the empty filename field. */
+  filenamePlaceholder?: string;
+  /** Flag to hide the built-in preview of the file (where available). If true, you can use
+   * the children property to render an alternate preview.
+   */
+  hideDefaultPreview?: boolean;
+  /** Unique id for the text area. Also used to generate ids for accessible labels. */
+  id: string;
+  /** Flag to show if the field is disabled. */
+  isDisabled?: boolean;
+  /** Flag to show if a file is being loaded. */
+  isLoading?: boolean;
+  /** Flag to show if the field is read only. */
+  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,
@@ -32,61 +58,42 @@ export interface FileUploadProps
       | 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;
-  /** Callback for clicking on the FileUploadField text area. By default, prevents a click in the text area from opening file dialog. */
-  onClick?: (event: React.MouseEvent) => void;
-  /** Additional classes added to the FileUpload container element. */
-  className?: string;
-  /** Flag to show if the field is disabled. */
-  isDisabled?: boolean;
-  /** Flag to show if the field is read only. */
-  isReadOnly?: boolean;
-  /** Flag to show if a file is being loaded. */
-  isLoading?: boolean;
-  /** Aria-valuetext for the loading spinner */
+  /** Aria-valuetext for the loading spinner. */
   spinnerAriaValueText?: string;
-  /** Flag to show if the field is required. */
-  isRequired?: boolean;
+  /** What type of file. Determines what is passed to the onChange property and what is
+   * expected by the value property (a string for 'text' and 'dataURL', or a File object otherwise.
+   */
+  type?: 'text' | 'dataURL';
   /** Value to indicate if the field is modified to show that validation state.
    * If set to success, field will be modified to indicate valid state.
-   * If set to error,  field will be modified to indicate error state.
+   * If set to error, field will be modified to indicate error state.
    */
   validated?: 'success' | 'error' | 'default';
-  /** Aria-label for the TextArea. */
-  'aria-label'?: string;
-  /** Placeholder string to display in the empty filename field */
-  filenamePlaceholder?: string;
-  /** Aria-label for the read-only filename field */
-  filenameAriaLabel?: string;
-  /** Text for the Browse button */
-  browseButtonText?: string;
-  /** Text for the Clear button */
-  clearButtonText?: string;
-  /** Flag to hide the built-in preview of the file (where available).
-   * If true, you can use children to render an alternate preview. */
-  hideDefaultPreview?: boolean;
-  /** Flag to allow editing of a text file's contents after it is selected from disk */
-  allowEditingUploadedText?: boolean;
-  /** Additional children to render after (or instead of) the file preview. */
-  children?: React.ReactNode;
+  /** Value of the file's contents (string if text file, File object otherwise). */
+  value?: string | File;
 
   // Props available in FileUpload but not FileUploadField:
 
-  /** A callback for when a selected file starts loading */
-  onReadStarted?: (fileHandle: File) => void;
-  /** A callback for when a selected file finishes loading */
-  onReadFinished?: (fileHandle: File) => void;
-  /** A callback for when the FileReader API fails */
-  onReadFailed?: (error: DOMException, fileHandle: File) => void;
   /** Optional extra props to customize react-dropzone. */
   dropzoneProps?: DropzoneProps;
-  /** Clear button was clicked */
+  /** Clear button was clicked. */
   onClearClick?: React.MouseEventHandler<HTMLButtonElement>;
-  /** Text area text changed */
-  onTextChange?: (text: string) => void;
   /** On data changed - if type='text' or type='dataURL' and file was loaded it will call this method */
   onDataChange?: (data: string) => void;
+  /** A callback for when the FileReader API fails. */
+  onReadFailed?: (error: DOMException, fileHandle: File) => void;
+  /** A callback for when a selected file finishes loading. */
+  onReadFinished?: (fileHandle: File) => void;
+  /** A callback for when a selected file starts loading. */
+  onReadStarted?: (fileHandle: File) => void;
+  /** Text area text changed. */
+  onTextChange?: (text: string) => void;
 }
 
 export const FileUpload: React.FunctionComponent<FileUploadProps> = ({

package/src/components/FileUpload/FileUploadField.tsx

@@ -8,18 +8,46 @@ import { TextArea, TextAreResizeOrientation } from '../TextArea';
 import { Spinner, spinnerSize } from '../Spinner';
 import { fileReaderType } from '../../helpers/fileUtils';
 
+/** A more customizable file upload component for implementing custom logic. Drag and drop
+ * functionality is not built in by default.
+ */
+
 export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
-  /** Unique id for the TextArea, also used to generate ids for accessible labels */
-  id: string;
-  /** What type of file. Determines what is is expected by `value`
-   * (a string for 'text' and 'dataURL', or a File object otherwise). */
-  type?: 'text' | 'dataURL';
-  /** Value of the file's contents
-   * (string if text file, File object otherwise) */
-  value?: string | File;
+  /** Flag to allow editing of a text file's contents after it is selected from disk. */
+  allowEditingUploadedText?: boolean;
+  /** Aria-label for the text area. */
+  'aria-label'?: string;
+  /** Text for the browse button. */
+  browseButtonText?: string;
+  /** Additional children to render after (or instead of) the file preview. */
+  children?: React.ReactNode;
+  /** Additional classes added to the file upload field container element. */
+  className?: string;
+  /** Text for the clear button. */
+  clearButtonText?: string;
   /** Value to be shown in the read-only filename field. */
   filename?: string;
-  /** A callback for when the TextArea value changes. */
+  /** Aria-label for the read-only filename field. */
+  filenameAriaLabel?: string;
+  /** Placeholder string to display in the empty filename field. */
+  filenamePlaceholder?: string;
+  /** Flag to hide the built-in preview of the file (where available). If true, you can use
+   * the children property to render an alternate preview.
+   */
+  hideDefaultPreview?: boolean;
+  /** Unique id for the text area. Also used to generate ids for accessible labels. */
+  id: string;
+  /** Flag to disable the clear button. */
+  isClearButtonDisabled?: boolean;
+  /** Flag to show if the field is disabled. */
+  isDisabled?: boolean;
+  /** Flag to show if a file is being loaded. */
+  isLoading?: boolean;
+  /** Flag to show if the field is read only. */
+  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,
@@ -27,60 +55,38 @@ export interface FileUploadFieldProps extends Omit<React.HTMLProps<HTMLDivElemen
       | React.ChangeEvent<HTMLTextAreaElement> // User typed in the TextArea
       | React.MouseEvent<HTMLButtonElement, MouseEvent> // User clicked Clear button
   ) => void;
-  /** Additional classes added to the FileUploadField container element. */
-  className?: string;
-  /** Flag to show if the field is disabled. */
-  isDisabled?: boolean;
-  /** Flag to show if the field is read only. */
-  isReadOnly?: boolean;
-  /** Flag to show if a file is being loaded. */
-  isLoading?: boolean;
-  /** Aria-valuetext for the loading spinner */
+  /** Aria-valuetext for the loading spinner. */
   spinnerAriaValueText?: string;
-  /** Flag to show if the field is required. */
-  isRequired?: boolean;
+  /** What type of file. Determines what is is expected by the value property (a string for
+   * 'text' and 'dataURL', or a File object otherwise).
+   */
+  type?: 'text' | 'dataURL';
   /** Value to indicate if the field is modified to show that validation state.
    * If set to success, field will be modified to indicate valid state.
    * If set to error,  field will be modified to indicate error state.
    */
   validated?: 'success' | 'error' | 'default';
-  /** Aria-label for the TextArea. */
-  'aria-label'?: string;
-  /** Placeholder string to display in the empty filename field */
-  filenamePlaceholder?: string;
-  /** Aria-label for the read-only filename field */
-  filenameAriaLabel?: string;
-  /** Text for the Browse button */
-  browseButtonText?: string;
-  /** Text for the Clear button */
-  clearButtonText?: string;
-  /** Flag to disable the Clear button */
-  isClearButtonDisabled?: boolean;
-  /** Flag to hide the built-in preview of the file (where available).
-   * If true, you can use children to render an alternate preview. */
-  hideDefaultPreview?: boolean;
-  /** Flag to allow editing of a text file's contents after it is selected from disk */
-  allowEditingUploadedText?: boolean;
-  /** Additional children to render after (or instead of) the file preview. */
-  children?: React.ReactNode;
+  /** Value of the file's contents (string if text file, File object otherwise). */
+  value?: string | File;
 
   // Props available in FileUploadField but not FileUpload:
 
-  /** A callback for when the Browse button is clicked. */
+  /** A reference object to attach to the file upload field container element. */
+  containerRef?: React.Ref<HTMLDivElement>;
+  /** Flag to show if a file is being dragged over the file upload field. */
+  isDragActive?: boolean;
+  /** A callback for when the browse button is clicked. */
   onBrowseButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /** A callback for when the Clear button is clicked. */
+  /** A callback for when the clear button is clicked. */
   onClearButtonClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /** A callback from when the text area is clicked. Can also be set via the onClick property of FileUpload. */
+  /** Callback for when focus is lost on the text area field. */
+  onTextAreaBlur?: (event?: any) => void;
+  /** A callback for when the text area is clicked. Can also be set via the onClick property
+   * of the file upload component. */
   onTextAreaClick?: (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => void;
-  /** Flag to show if a file is being dragged over the field */
-  isDragActive?: boolean;
-  /** A reference object to attach to the FileUploadField container element. */
-  containerRef?: React.Ref<HTMLDivElement>;
-  /** Text area text changed */
+  /** Text area text changed. */
   onTextChange?: (text: string) => void;
-  /** Callback for when focus is lost on the text area field */
-  onTextAreaBlur?: (event?: any) => void;
-  /** Placeholder string to display in the empty text area field */
+  /** Placeholder string to display in the empty text area field. */
   textAreaPlaceholder?: string;
 }
 

package/src/components/Modal/Modal.tsx

@@ -7,62 +7,71 @@ import { ModalContent } from './ModalContent';
 import { OUIAProps, getDefaultOUIAId } from '../../helpers';
 
 export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
-  /** Content rendered inside the Modal. */
+  /** Action buttons to add to the standard modal footer. Ignored if the footer property
+   * is passed in.
+   */
+  actions?: any;
+  /** The parent container to append the modal to. Defaults to "document.body". */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** Id to use for the modal box descriptor. */
+  'aria-describedby'?: string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string;
+  /** Accessible label applied to the modal box body. This should be used to communicate
+   * important information about the modal box body div element if needed, such as that it
+   * is scrollable.
+   */
+  bodyAriaLabel?: string;
+  /** Accessible role applied to the modal box body. This will default to "region" if the
+   * bodyAriaLabel property is passed in. Set to a more appropriate role as applicable
+   * based on the modal content and context.
+   */
+  bodyAriaRole?: string;
+  /** Content rendered inside the modal. */
   children: React.ReactNode;
-  /** Additional classes added to the Modal */
+  /** Additional classes added to the modal. */
   className?: string;
-  /** Flag to show the modal */
-  isOpen?: boolean;
-  /** Complex header (more than just text), supersedes title for header content */
+  /** Description of the modal. */
+  description?: React.ReactNode;
+  /** Flag to disable focus trap. */
+  disableFocusTrap?: boolean;
+  /** Custom footer. */
+  footer?: React.ReactNode;
+  /** Flag indicating if modal content should be placed in a modal box body wrapper. */
+  hasNoBodyWrapper?: boolean;
+  /** Complex header (more than just text), supersedes the title property for header content. */
   header?: React.ReactNode;
-  /** Optional help section for the Modal Header */
+  /** Optional help section for the modal header. */
   help?: React.ReactNode;
-  /** Simple text content of the Modal Header, also used for aria-label on the body */
+  /** An id to use for the modal box container. */
+  id?: string;
+  /** Flag to show the modal. */
+  isOpen?: boolean;
+  /** A callback for when the close button is clicked. */
+  onClose?: () => void;
+  /** Modal handles pressing of the escape key and closes the modal. If you want to handle
+   * this yourself you can use this callback function. */
+  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Alternate position of the modal. */
+  position?: 'top';
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
+  positionOffset?: string;
+  /** Flag to show the close button in the header area of the modal. */
+  showClose?: boolean;
+  /** Simple text content of the modal header. Also used for the aria-label on the body. */
   title?: string;
-  /** Optional alert icon (or other) to show before the title of the Modal Header
-   * When the predefined alert types are used the default styling
-   * will be automatically applied */
+  /** Optional alert icon (or other) to show before the title of the modal header. When the
+   * predefined alert types are used the default styling will be automatically applied.
+   */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
-  /** Optional title label text for screen readers */
+  /** Optional title label text for screen readers. */
   titleLabel?: string;
-  /** Id to use for Modal Box label */
-  'aria-labelledby'?: string;
-  /** Accessible descriptor of modal */
-  'aria-label'?: string;
-  /** Id to use for Modal Box descriptor */
-  'aria-describedby'?: string;
-  /** Accessible label applied to the modal box body. This should be used to communicate important information about the modal box body div if needed, such as that it is scrollable */
-  bodyAriaLabel?: string;
-  /** Accessible role applied to the modal box body. This will default to region if a body aria label is applied. Set to a more appropriate role as applicable based on the modal content and context */
-  bodyAriaRole?: string;
-  /** Flag to show the close button in the header area of the modal */
-  showClose?: boolean;
-  /** Custom footer */
-  footer?: React.ReactNode;
-  /** Action buttons to add to the standard Modal Footer, ignored if `footer` is given */
-  actions?: any;
-  /** A callback for when the close button is clicked */
-  onClose?: () => void;
-  /** Default width of the Modal. */
-  width?: number | string;
-  /** The parent container to append the modal to. Defaults to document.body */
-  appendTo?: HTMLElement | (() => HTMLElement);
-  /** Flag to disable focus trap */
-  disableFocusTrap?: boolean;
-  /** Description of the modal */
-  description?: React.ReactNode;
-  /** Variant of the modal */
+  /** Variant of the modal. */
   variant?: 'small' | 'medium' | 'large' | 'default';
-  /** Alternate position of the modal */
-  position?: 'top';
-  /** Offset from alternate position. Can be any valid CSS length/percentage */
-  positionOffset?: string;
-  /** Flag indicating if modal content should be placed in a modal box body wrapper */
-  hasNoBodyWrapper?: boolean;
-  /** An ID to use for the ModalBox container */
-  id?: string;
-  /** Modal handles pressing of the Escape key and closes the modal. If you want to handle this yourself you can use this callback function */
-  onEscapePress?: (event: KeyboardEvent) => void;
+  /** Default width of the modal. */
+  width?: number | string;
 }
 
 export enum ModalVariant {

package/src/components/Modal/ModalBox.tsx

@@ -4,22 +4,22 @@ import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import topSpacer from '@patternfly/react-tokens/dist/esm/c_modal_box_m_align_top_spacer';
 
 export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the ModalBox. */
+  /** Id to use for the modal box description. */
+  'aria-describedby': string;
+  /** Accessible descriptor of the modal. */
+  'aria-label'?: string;
+  /** Id to use for the modal box label. */
+  'aria-labelledby'?: string;
+  /** Content rendered inside the modal box. */
   children: React.ReactNode;
-  /** Additional classes added to the ModalBox */
+  /** Additional classes added to the modal box. */
   className?: string;
-  /** Variant of the modal */
-  variant?: 'small' | 'medium' | 'large' | 'default';
-  /** Alternate position of the modal */
+  /** Alternate position of the modal. */
   position?: 'top';
-  /** Offset from alternate position. Can be any valid CSS length/percentage */
+  /** Offset from alternate position. Can be any valid CSS length/percentage. */
   positionOffset?: string;
-  /** Id to use for Modal Box label */
-  'aria-labelledby'?: string;
-  /** Accessible descriptor of modal */
-  'aria-label'?: string;
-  /** Id to use for Modal Box description */
-  'aria-describedby': string;
+  /** Variant of the modal. */
+  variant?: 'small' | 'medium' | 'large' | 'default';
 }
 
 export const ModalBox: React.FunctionComponent<ModalBoxProps> = ({

package/src/components/Modal/ModalBoxBody.tsx

@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxBodyProps extends React.HTMLProps<HTMLDivElement> {
-  /** Content rendered inside the ModalBoxBody */
+  /** Content rendered inside the modal box body. */
   children?: React.ReactNode;
-  /** Additional classes added to the ModalBoxBody */
+  /** Additional classes added to the modal box body. */
   className?: string;
 }
 

package/src/components/Modal/ModalBoxCloseButton.tsx

@@ -4,9 +4,9 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { OUIAProps } from '../../helpers';
 
 export interface ModalBoxCloseButtonProps extends OUIAProps {
-  /** Additional classes added to the close button */
+  /** Additional classes added to the close button. */
   className?: string;
-  /** A callback for when the close button is clicked */
+  /** A callback for when the close button is clicked. */
   onClose?: () => void;
 }
 

package/src/components/Modal/ModalBoxDescription.tsx

@@ -3,11 +3,11 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxDescriptionProps {
-  /** Content rendered inside the description */
+  /** Content rendered inside the description. */
   children?: React.ReactNode;
-  /** Additional classes added to the description */
+  /** Additional classes added to the description. */
   className?: string;
-  /** ID of the description */
+  /** Id of the description. */
   id?: string;
 }
 

package/src/components/Modal/ModalBoxFooter.tsx

@@ -3,9 +3,9 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxFooterProps {
-  /** Content rendered inside the Footer */
+  /** Content rendered inside the modal box footer. */
   children?: React.ReactNode;
-  /** Additional classes added to the Footer */
+  /** Additional classes added to the modal box footer. */
   className?: string;
 }
 

package/src/components/Modal/ModalBoxHeader.tsx

@@ -3,11 +3,11 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 export interface ModalBoxHeaderProps {
-  /** Content rendered inside the Header */
+  /** Content rendered inside the modal box header. */
   children?: React.ReactNode;
-  /** Additional classes added to the button */
+  /** Additional classes added to the modal box header. */
   className?: string;
-  /** Optional help section for the Modal Header */
+  /** Optional help section for the modal box header. */
   help?: React.ReactNode;
 }
 

package/src/components/Modal/ModalBoxTitle.tsx

@@ -15,18 +15,17 @@ export const isVariantIcon = (icon: any): icon is string =>
   ['success', 'danger', 'warning', 'info', 'default'].includes(icon as string);
 
 export interface ModalBoxTitleProps {
-  /** Content rendered inside the modal box header title. */
+  /** Additional classes added to the modal box title. */
+  className?: string;
+  /** Id of the modal box title. */
+  id: string;
+  /** Content rendered inside the modal box title. */
   title: React.ReactNode;
-  /** Optional alert icon (or other) to show before the title of the Modal Header
-   * When the predefined alert types are used the default styling
-   * will be automatically applied */
+  /** Optional alert icon (or other) to show before the title. When the predefined alert types
+   * are used the default styling will be automatically applied. */
   titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
-  /** Optional title label text for screen readers */
+  /** Optional title label text for screen readers. */
   titleLabel?: string;
-  /** Additional classes added to the modal box header title. */
-  className?: string;
-  /** id of the modal box header title. */
-  id: string;
 }
 
 export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({