@patternfly/react-core 4.221.15 → 4.222.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.15",
+  "version": "4.222.0",
   "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",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.72.15",
-    "@patternfly/react-styles": "^4.71.15",
-    "@patternfly/react-tokens": "^4.73.15",
+    "@patternfly/react-icons": "^4.73.0",
+    "@patternfly/react-styles": "^4.72.0",
+    "@patternfly/react-tokens": "^4.74.0",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "7ede2a5922f4ef870dd305ee1df3426e42eb1fe4"
+  "gitHead": "9c5a0c99d957bafa3548e1fd4db410a74f7f7ad8"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -2,8 +2,9 @@ import React, { useEffect } from 'react';
 import { TextInput } from '../TextInput/TextInput';
 import { Button } from '../Button/Button';
 import { Select, SelectOption } from '../Select';
-import ArrowLeftIcon from '@patternfly/react-icons/dist/esm/icons/arrow-left-icon';
-import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
+import { InputGroup } from '../InputGroup';
+import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
 import { getUniqueId } from '../../helpers/util';
@@ -63,7 +64,7 @@ const buildCalendar = (year: number, month: number, weekStart: number, validator
   const defaultDate = new Date(year, month);
   const firstDayOfWeek = new Date(defaultDate);
   firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + weekStart);
-  // We will always show 6 weeks like google calendar
+  // We will show a maximum of 6 weeks like Google calendar
   // Assume we just want the numbers for now...
   const calendarWeeks = [];
   for (let i = 0; i < 6; i++) {
@@ -77,6 +78,9 @@ const buildCalendar = (year: number, month: number, weekStart: number, validator
       firstDayOfWeek.setDate(firstDayOfWeek.getDate() + 1);
     }
     calendarWeeks.push(week);
+    if (firstDayOfWeek.getMonth() !== defaultDate.getMonth()) {
+      break;
+    }
   }
 
   return calendarWeeks;
@@ -204,62 +208,64 @@ export const CalendarMonth = ({
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
           <Button variant="plain" aria-label={prevMonthAriaLabel} onClick={() => onMonthClick(prevMonth)}>
-            <ArrowLeftIcon aria-hidden={true} />
+            <AngleLeftIcon aria-hidden={true} />
           </Button>
         </div>
-        <div className={styles.calendarMonthHeaderMonth}>
-          <span id={hiddenMonthId} hidden>
-            Month
-          </span>
-          <Select
-            // Max width with "September"
-            width="140px"
-            aria-labelledby={hiddenMonthId}
-            isOpen={isSelectOpen}
-            onToggle={() => {
-              setIsSelectOpen(!isSelectOpen);
-              onSelectToggle(!isSelectOpen);
-            }}
-            onSelect={(_ev, monthNum) => {
-              // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-              // to see the SelectOption as a child so it doesn't close the Popover.
-              setTimeout(() => {
-                setIsSelectOpen(false);
-                onSelectToggle(false);
+        <InputGroup>
+          <div className={styles.calendarMonthHeaderMonth}>
+            <span id={hiddenMonthId} hidden>
+              Month
+            </span>
+            <Select
+              // Max width with "September"
+              width="140px"
+              aria-labelledby={hiddenMonthId}
+              isOpen={isSelectOpen}
+              onToggle={() => {
+                setIsSelectOpen(!isSelectOpen);
+                onSelectToggle(!isSelectOpen);
+              }}
+              onSelect={(_ev, monthNum) => {
+                // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
+                // to see the SelectOption as a child so it doesn't close the Popover.
+                setTimeout(() => {
+                  setIsSelectOpen(false);
+                  onSelectToggle(false);
+                  const newDate = new Date(focusedDate);
+                  newDate.setMonth(Number(monthNum as string));
+                  setFocusedDate(newDate);
+                  setHoveredDate(newDate);
+                  setShouldFocus(false);
+                }, 0);
+              }}
+              variant="single"
+              selections={monthFormatted}
+            >
+              {longMonths.map((longMonth, index) => (
+                <SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
+                  {longMonth}
+                </SelectOption>
+              ))}
+            </Select>
+          </div>
+          <div className={styles.calendarMonthHeaderYear}>
+            <TextInput
+              aria-label={yearInputAriaLabel}
+              type="number"
+              value={yearFormatted}
+              onChange={year => {
                 const newDate = new Date(focusedDate);
-                newDate.setMonth(Number(monthNum as string));
+                newDate.setFullYear(+year);
                 setFocusedDate(newDate);
                 setHoveredDate(newDate);
                 setShouldFocus(false);
-              }, 0);
-            }}
-            variant="single"
-            selections={monthFormatted}
-          >
-            {longMonths.map((longMonth, index) => (
-              <SelectOption key={index} value={index} isSelected={longMonth === monthFormatted}>
-                {longMonth}
-              </SelectOption>
-            ))}
-          </Select>
-        </div>
-        <div className={styles.calendarMonthHeaderYear}>
-          <TextInput
-            aria-label={yearInputAriaLabel}
-            type="number"
-            value={yearFormatted}
-            onChange={year => {
-              const newDate = new Date(focusedDate);
-              newDate.setFullYear(+year);
-              setFocusedDate(newDate);
-              setHoveredDate(newDate);
-              setShouldFocus(false);
-            }}
-          />
-        </div>
+              }}
+            />
+          </div>
+        </InputGroup>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.nextMonth)}>
           <Button variant="plain" aria-label={nextMonthAriaLabel} onClick={() => onMonthClick(nextMonth)}>
-            <ArrowRightIcon aria-hidden={true} />
+            <AngleRightIcon aria-hidden={true} />
           </Button>
         </div>
       </div>

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

@@ -18,42 +18,7 @@ Pressing _Clear_ button triggers `onClearClick` event.
 
 ### Simple text file
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-
-class SimpleTextFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '', filename: '', isLoading: false };
-    this.handleFileInputChange = (event, file) => this.setState({ filename: file.name });
-    this.handleTextOrDataChange = value => this.setState({ value });
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-    this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true });
-    this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false });
-  }
-
-  render() {
-    const { value, filename, isLoading } = this.state;
-    return (
-      <FileUpload
-        id="simple-text-file"
-        type="text"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        onFileInputChange={this.handleFileInputChange}
-        onDataChange={this.handleTextOrDataChange}
-        onTextChange={this.handleTextOrDataChange}
-        onReadStarted={this.handleFileReadStarted}
-        onReadFinished={this.handleFileReadFinished}
-        onClearClick={this.handleClear}
-        isLoading={isLoading}
-        browseButtonText="Upload"
-      />
-    );
-  }
-}
+```ts file="./FileUploadSimpleText.tsx"
 ```
 
 A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
@@ -61,43 +26,7 @@ Typing/pasting text in the box will call `onTextChange` with a string, and a str
 
 ### Text file with edits allowed
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-
-class TextFileWithEditsAllowed extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '', filename: '', isLoading: false };
-    this.handleFileInputChange = (event, file) => this.setState({ filename: file.name });
-    this.handleTextOrDataChange = value => this.setState({ value });
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-    this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true });
-    this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false });
-  }
-
-  render() {
-    const { value, filename, isLoading } = this.state;
-    return (
-      <FileUpload
-        id="text-file-with-edits-allowed"
-        type="text"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        onFileInputChange={this.handleFileInputChange}
-        onDataChange={this.handleTextOrDataChange}
-        onClearClick={this.handleClear}
-        onTextChange={this.handleTextOrDataChange}
-        onReadStarted={this.handleFileReadStarted}
-        onReadFinished={this.handleFileReadFinished}
-        isLoading={isLoading}
-        allowEditingUploadedText
-        browseButtonText="Upload"
-      />
-    );
-  }
-}
+```ts file="./FileUploadTextWithEdits.tsx"
 ```
 
 ### Restricting file size and type
@@ -110,58 +39,7 @@ Restricting file sizes and types in this way is for user convenience only, and i
 
 ### Text file with restrictions
 
-```js
-import React from 'react';
-import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
-
-class TextFileUploadWithRestrictions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '', filename: '', isLoading: false, isRejected: false };
-    this.handleFileInputChange = (event, file) => this.setState({ filename: file.name });
-    this.handleTextOrDataChange = value => this.setState({ value });
-    this.handleClear = event => this.setState({ filename: '', value: '', isRejected: false });
-    this.handleFileRejected = (rejectedFiles, event) => this.setState({ isRejected: true });
-    this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true });
-    this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false });
-  }
-
-  render() {
-    const { value, filename, isLoading, isRejected } = this.state;
-    return (
-      <Form>
-        <FormGroup
-          fieldId="text-file-with-restrictions"
-          helperText="Upload a CSV file"
-          helperTextInvalid="Must be a CSV file no larger than 1 KB"
-          validated={isRejected ? 'error' : 'default'}
-        >
-          <FileUpload
-            id="text-file-with-restrictions"
-            type="text"
-            value={value}
-            filename={filename}
-            filenamePlaceholder="Drag and drop a file or upload one"
-            onFileInputChange={this.handleFileInputChange}
-            onDataChange={this.handleTextOrDataChange}
-            onTextChange={this.handleTextOrDataChange}
-            onClearClick={this.handleClear}
-            onReadStarted={this.handleFileReadStarted}
-            onReadFinished={this.handleFileReadFinished}
-            isLoading={isLoading}
-            dropzoneProps={{
-              accept: '.csv',
-              maxSize: 1024,
-              onDropRejected: this.handleFileRejected
-            }}
-            validated={isRejected ? 'error' : 'default'}
-            browseButtonText="Upload"
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FileUploadTextWithRestrictions.tsx"
 ```
 
 ### Other file types
@@ -170,35 +48,7 @@ If no `type` prop is specified, the component will not read files directly. When
 
 ### Simple file of any format
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-
-class SimpleFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: null, filename: '' };
-    this.handleFileInputChange = (event, file) => {
-      this.setState({ filename: file.name });
-    };
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-  }
-
-  render() {
-    const { value, filename } = this.state;
-    return (
-      <FileUpload
-        id="simple-file"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        browseButtonText="Upload"
-        onFileInputChange={this.handleFileInputChange}
-        onClearClick={this.handleClear}
-      />
-    );
-  }
-}
+```ts file="./FileUploadSimpleFile.tsx"
 ```
 
 ### Customizing the file preview
@@ -207,43 +57,7 @@ Regardless of `type`, the preview area (the TextArea, or any future implementati
 
 ### Custom file preview
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
-
-class CustomPreviewFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: null, filename: '' };
-    this.handleFileInputChange = (event, file) => {
-      this.setState({ value: file, filename: file.name });
-    };
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-  }
-
-  render() {
-    const { value, filename, isLoading } = this.state;
-    return (
-      <FileUpload
-        id="customized-preview-file"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        onFileInputChange={this.handleFileInputChange}
-        onClearClick={this.handleClear}
-        hideDefaultPreview
-        browseButtonText="Upload"
-      >
-        {value && (
-          <div className="pf-u-m-md">
-            <FileUploadIcon size="lg" /> Custom preview here for your {value.size}-byte file named {value.name}
-          </div>
-        )}
-      </FileUpload>
-    );
-  }
-}
+```ts file="./FileUploadCustomPreview.tsx"
 ```
 
 ### Bringing your own file browse logic
@@ -254,83 +68,5 @@ Note that the `isLoading` prop is styled to position the spinner dead center abo
 
 ### Custom file upload
 
-```js
-import React from 'react';
-import { FileUploadField, Checkbox } from '@patternfly/react-core';
-
-class CustomFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      filename: false,
-      isClearButtonDisabled: true,
-      isLoading: false,
-      isDragActive: false,
-      hideDefaultPreview: false,
-      children: false,
-      hasPlaceholderText: false
-    };
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const {
-      value,
-      filename,
-      isClearButtonDisabled,
-      isLoading,
-      isDragActive,
-      hideDefaultPreview,
-      children,
-      hasPlaceholderText
-    } = this.state;
-    return (
-      <div>
-        {['filename', 'isClearButtonDisabled', 'isDragActive', 'isLoading', 'hideDefaultPreview', 'children', 'hasPlaceholderText'].map(
-          stateKey => (
-            <Checkbox
-              key={stateKey}
-              id={stateKey}
-              label={stateKey}
-              aria-label={stateKey}
-              isChecked={this.state[stateKey]}
-              onChange={checked =>
-                this.setState({
-                  [stateKey]: checked,
-                  // See notes above this example
-                  ...(stateKey === 'isLoading' && checked && { hideDefaultPreview: false }),
-                  ...(stateKey === 'hideDefaultPreview' && checked && { isLoading: false })
-                })
-              }
-            />
-          )
-        )}
-        <br />
-        <FileUploadField
-          id="custom-file-upload"
-          type="text"
-          value={value}
-          filename={filename ? 'example-filename.txt' : ''}
-          onTextChange={this.handleTextAreaChange}
-          filenamePlaceholder="Do something custom with this!"
-          onBrowseButtonClick={() => alert('Browse button clicked!')}
-          onClearButtonClick={() => alert('Clear button clicked!')}
-          isClearButtonDisabled={isClearButtonDisabled}
-          isLoading={isLoading}
-          isDragActive={isDragActive}
-          hideDefaultPreview={hideDefaultPreview}
-          browseButtonText="Upload"
-          textAreaPlaceholder={hasPlaceholderText ? "File preview" : ''}
-        >
-          {children && (
-            <div className="pf-u-m-md">(A custom preview of the uploaded file can be passed as children)</div>
-          )}
-        </FileUploadField>
-      </div>
-    );
-  }
-}
+```ts file="./FileUploadCustomUpload.tsx"
 ```

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

@@ -0,0 +1,40 @@
+import React from 'react';
+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 [filename, setFilename] = React.useState('');
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setValue(file);
+    setFilename(file.name);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  return (
+    <FileUpload
+      id="customized-preview-file"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onClearClick={handleClear}
+      hideDefaultPreview
+      browseButtonText="Upload"
+    >
+      {value && (
+        <div className="pf-u-m-md">
+          <FileUploadIcon size="lg" /> Custom preview here for your {value.size}-byte file named {value.name}
+        </div>
+      )}
+    </FileUpload>
+  );
+};

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

@@ -0,0 +1,116 @@
+import React from 'react';
+import { FileUploadField, Checkbox } from '@patternfly/react-core';
+
+export const CustomPreviewFileUpload: React.FunctionComponent = () => {
+  const properties = [
+    'filename',
+    'isClearButtonDisabled',
+    'isDragActive',
+    'isLoading',
+    'hideDefaultPreview',
+    'children',
+    'hasPlaceholderText'
+  ];
+
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState(false);
+  const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isDragActive, setIsDragActive] = React.useState(false);
+  const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false);
+  const [children, setChildren] = React.useState(false);
+  const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
+  const [checkedState, setCheckedState] = React.useState([
+    filename,
+    isClearButtonDisabled,
+    isLoading,
+    isDragActive,
+    hideDefaultPreview,
+    children,
+    hasPlaceholderText
+  ]);
+
+  const handleTextAreaChange = (value: string) => {
+    setValue(value);
+  };
+
+  const handleOnChange = (checked: boolean, stateKey: string, index: number) => {
+    const updatedCheckedState = [...checkedState];
+    switch (stateKey) {
+      case 'filename':
+        checked ? setFilename(true) : setFilename(false);
+        break;
+
+      case 'isClearButtonDisabled':
+        checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);
+        break;
+
+      case 'isDragActive':
+        checked ? setIsDragActive(true) : setIsDragActive(false);
+        break;
+
+      case 'isLoading':
+        checked ? setIsLoading(true) : setIsLoading(false);
+        // See notes above this example
+        if (checked) {
+          updatedCheckedState[properties.indexOf('hideDefaultPreview')] = false;
+          setHideDefaultPreview(false);
+        }
+        break;
+
+      case 'hideDefaultPreview':
+        checked ? setHideDefaultPreview(true) : setHideDefaultPreview(false);
+        // See notes above this example
+        if (checked) {
+          updatedCheckedState[properties.indexOf('isLoading')] = false;
+          setIsLoading(false);
+        }
+        break;
+
+      case 'children':
+        checked ? setChildren(true) : setChildren(false);
+        break;
+
+      case 'hasPlaceholderText':
+        checked ? setHasPlaceholderText(true) : setHasPlaceholderText(false);
+        break;
+    }
+    updatedCheckedState[index] = checked;
+    setCheckedState(updatedCheckedState);
+  };
+
+  return (
+    <div>
+      {properties.map((stateKey, index) => (
+        <Checkbox
+          name={stateKey}
+          key={stateKey}
+          id={stateKey}
+          label={stateKey}
+          aria-label={stateKey}
+          isChecked={checkedState[index]}
+          onChange={checked => handleOnChange(checked, stateKey, index)}
+        />
+      ))}
+      <br />
+      <FileUploadField
+        id="custom-file-upload"
+        type="text"
+        value={value}
+        filename={filename ? 'example-filename.txt' : ''}
+        onTextChange={handleTextAreaChange}
+        filenamePlaceholder="Do something custom with this!"
+        onBrowseButtonClick={() => alert('Browse button clicked!')}
+        onClearButtonClick={() => alert('Clear button clicked!')}
+        isClearButtonDisabled={isClearButtonDisabled}
+        isLoading={isLoading}
+        isDragActive={isDragActive}
+        hideDefaultPreview={hideDefaultPreview}
+        browseButtonText="Upload"
+        textAreaPlaceholder={hasPlaceholderText ? 'File preview' : ''}
+      >
+        {children && <div className="pf-u-m-md">(A custom preview of the uploaded file can be passed as children)</div>}
+      </FileUploadField>
+    </div>
+  );
+};

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FileUpload } from '@patternfly/react-core';
+
+export const SimpleFileUpload: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(null);
+  const [filename, setFilename] = React.useState('');
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setFilename(file.name);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  return (
+    <FileUpload
+      id="simple-file"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onClearClick={handleClear}
+      browseButtonText="Upload"
+    />
+  );
+};