@patternfly/react-core 5.0.0-alpha.101 → 5.0.0-alpha.103

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.101",
+  "version": "5.0.0-alpha.103",
   "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": "0a923e74b859772a98042b8431d9df0c7bb105e9"
+  "gitHead": "6b1ff3ecf91538a866ee0b7b49ef733d40aef763"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -7,8 +7,6 @@ import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Modal, ModalVariant } from '../Modal';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
-// eslint-disable-next-line camelcase
-// import c_about_modal_box_BackgroundImage from '@patternfly/react-tokens/dist/esm/c_about_modal_box_BackgroundImage';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
@@ -48,7 +46,7 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
   onClose = (_e): any => undefined,
   productName,
   trademark,
-  // backgroundImageSrc,
+  backgroundImageSrc,
   brandImageSrc,
   brandImageAlt,
   hasNoContentContainer = false,
@@ -89,13 +87,11 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           hasNoBodyWrapper
         >
           <AboutModalBox
-            // style={
-              /* eslint-disable camelcase */
-              // backgroundImageSrc
-              //   ? { [c_about_modal_box_BackgroundImage.name as string]: `url(${backgroundImageSrc})` }
-              //   : {}
-              /* eslint-enable camelcase */
-            // }
+             style={
+              backgroundImageSrc
+                ? { ['--pf-v5-c-about-modal-box--BackgroundImage']: `url(${backgroundImageSrc})` } as React.CSSProperties  
+                : {}
+            }
             className={css(className)}
           >
             <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />

package/src/components/AboutModal/examples/AboutModal.md

@@ -20,6 +20,3 @@ import bgImg from './patternfly-orb.svg';
 ```ts file="./AboutModalComplexUserPositionedContent.tsx"
 ```
 
-### Custom background image
-```ts file="./AboutModalCustomBackgroundImage.tsx"
-```

package/src/components/AboutModal/examples/AboutModalBasic.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalBasic: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalBasic: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         productName="Product Name"
       >
         <TextContent>

package/src/components/AboutModal/examples/AboutModalComplexUserPositionedContent.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalComplexUserPositionedContent: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalComplexUserPositionedContent: React.FunctionComponent = (
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(e: React.MouseEvent<Element, MouseEvent>) => toggleModal(e)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         hasNoContentContainer={true}
         productName="Product Name"
       >

package/src/components/AboutModal/examples/AboutModalWithoutProductName.tsx

@@ -5,7 +5,7 @@ import brandImg from './brandImg.svg';
 export const AboutModalWithoutProductName: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
 
-  const toggleModal = (_event: React.MouseEvent) => {
+  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
     setIsModalOpen(!isModalOpen);
   };
 
@@ -16,10 +16,11 @@ export const AboutModalWithoutProductName: React.FunctionComponent = () => {
       </Button>
       <AboutModal
         isOpen={isModalOpen}
-        onClose={(event: any) => toggleModal(event)}
+        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
         trademark="Trademark and copyright information here"
         brandImageSrc={brandImg}
         brandImageAlt="Patternfly Logo"
+        backgroundImageSrc='/assets/images/pfbg-icon.svg'
         aria-label="No product name about modal"
       >
         <TextContent>

package/src/components/FileUpload/FileUpload.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { DropEvent, DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
+import { DropzoneInputProps, DropzoneOptions, FileRejection, useDropzone } from 'react-dropzone';
 import { FileUploadField, FileUploadFieldProps } from './FileUploadField';
 import { readFile, fileReaderType } from '../../helpers/fileUtils';
+import { DropEvent } from '../../helpers/typeUtils';
 import { fromEvent } from 'file-selector';
 
 export interface FileUploadProps

package/src/components/FileUpload/examples/FileUpload.md

@@ -71,3 +71,16 @@ Note that the `isLoading` prop is styled to position the spinner dead center abo
 
 ```ts file="./FileUploadCustomUpload.tsx"
 ```
+
+## Types
+
+File upload uses the `DropzoneOptions` type from react-dropzone. It 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).
+
+Additionally, it calls the `onDataChange`, `onReadFailed`, `onReadFinished`, and `onReadStarted` callbacks with an event of type `DropEvent`. `DropEvent` is a union comprised of the following types:
+
+```noLive
+ React.DragEvent<HTMLElement>
+ | React.ChangeEvent<HTMLInputElement>
+ | DragEvent
+ | Event
+```

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const SimpleTextFileUpload: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, DropEvent } from '@patternfly/react-core';
 
 export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
+import { FileUpload, Form, FormGroup, FormHelperText, HelperText, HelperTextItem, DropEvent } from '@patternfly/react-core';
 
 export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
   const [value, setValue] = React.useState('');

package/src/components/MultipleFileUpload/MultipleFileUpload.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { DropEvent, DropzoneOptions, useDropzone } from 'react-dropzone';
+import { DropzoneOptions, useDropzone } from 'react-dropzone';
+import { DropEvent } from '../../helpers/typeUtils';
 import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/multiple-file-upload';
 import { css } from '@patternfly/react-styles';
 

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

@@ -55,7 +55,9 @@ The "Demonstrate error reporting by forcing uploads to fail" checkbox shows how
 
 ## 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:
+Multiple file upload uses the `DropzoneOptions` type from react-dropzone. It 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).
+
+Additionally, it calls the `onFileDrop` callback with an event of type `DropEvent`. `DropEvent` is a union comprised of the following types:
 
 ```noLive
  React.DragEvent<HTMLElement>
@@ -63,5 +65,3 @@ Multiple file upload uses both the `DropEvent` and `DropzoneOptions` types from
  | 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

@@ -6,9 +6,9 @@ import {
   MultipleFileUploadStatusItem,
   Checkbox,
   HelperText,
-  HelperTextItem
+  HelperTextItem,
+  DropEvent
 } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {

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

@@ -6,9 +6,9 @@ import {
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
   Modal,
-  Checkbox
+  Checkbox,
+  DropEvent
 } from '@patternfly/react-core';
-import { DropEvent } from 'react-dropzone';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {

package/src/helpers/typeUtils.ts

@@ -14,3 +14,5 @@ export type PickOptional<T> = Pick<T, OptionalKeys<T>>;
 // Picks all the optional keys from interface/type T and makes them required
 // so that they cannot be accidentally omitted when providing default values
 export type PickAndRequireOptional<T> = Required<Pick<T, OptionalKeys<T>>>;
+
+export type DropEvent = React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | DragEvent | Event;

package/src/components/AboutModal/examples/AboutModalCustomBackgroundImage.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import { AboutModal, Button, TextContent, TextList, TextListItem } from '@patternfly/react-core';
-import brandImg from './brandImg.svg';
-import bgImg from './patternfly-orb.svg';
-
-export const AboutModalCustomBackgroundImage: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-
-  const toggleModal = (_event: React.MouseEvent) => {
-    setIsModalOpen(!isModalOpen);
-  };
-
-  return (
-    <React.Fragment>
-      <Button variant="primary" onClick={toggleModal}>
-        Show about modal
-      </Button>
-      <AboutModal
-        isOpen={isModalOpen}
-        onClose={(event: any) => toggleModal(event)}
-        trademark="Trademark and copyright information here"
-        brandImageSrc={brandImg}
-        brandImageAlt="Patternfly Logo"
-        backgroundImageSrc={bgImg}
-        aria-label="Background image about modal"
-      >
-        <TextContent>
-          <TextList component="dl">
-            <TextListItem component="dt">CFME Version</TextListItem>
-            <TextListItem component="dd">5.5.3.4.20102789036450</TextListItem>
-          </TextList>
-        </TextContent>
-      </AboutModal>
-    </React.Fragment>
-  );
-};