@patternfly/react-core 4.221.13 → 4.221.16

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
+
+export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isRejected, setIsRejected] = React.useState(false);
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setFilename(file.name);
+  };
+
+  const handleTextOrDataChange = (value: string) => {
+    setValue(value);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+    setIsRejected(false);
+  };
+
+  const handleFileRejected = (_rejectedFiles: File[], _event: React.DragEvent<HTMLElement>) => {
+    setIsRejected(true);
+  };
+
+  const handleFileReadStarted = (_fileHandle: File) => {
+    setIsLoading(true);
+  };
+
+  const handleFileReadFinished = (_fileHandle: File) => {
+    setIsLoading(false);
+  };
+
+  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={handleFileInputChange}
+          onDataChange={handleTextOrDataChange}
+          onTextChange={handleTextOrDataChange}
+          onReadStarted={handleFileReadStarted}
+          onReadFinished={handleFileReadFinished}
+          onClearClick={handleClear}
+          isLoading={isLoading}
+          dropzoneProps={{
+            accept: '.csv',
+            maxSize: 1024,
+            onDropRejected: handleFileRejected
+          }}
+          validated={isRejected ? 'error' : 'default'}
+          browseButtonText="Upload"
+        />
+      </FormGroup>
+    </Form>
+  );
+};

package/src/components/FormSelect/examples/FormSelect.md

@@ -9,310 +9,24 @@ ouia: true
 ## Examples
 
 ### Basic
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'mrs'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.options = [
-      { value: 'please choose', label: 'Select one', disabled: true },
-      { value: 'mr', label: 'Mr', disabled: false },
-      { value: 'miss', label: 'Miss', disabled: false },
-      { value: 'mrs', label: 'Mrs', disabled: false },
-      { value: 'ms', label: 'Ms', disabled: false },
-      { value: 'dr', label: 'Dr', disabled: false },
-      { value: 'other', label: 'Other', disabled: false }
-    ];
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
-```
-
-### Invalid
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';
-
-class FormSelectInputInvalid extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      validated: ValidatedOptions.default
-    };
-    this.isEmpty = () => this.state.value !== '';
-    this.onChange = (value, event) => {
-      const validated = this.isEmpty() && ValidatedOptions.error
-      this.setState({ value, validated });
-    };
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false  },
-      { value: '3', label: 'Three', disabled: false, isPlaceholder: false  }
-    ];
-  }
-
-  render() {
-    const { value, validated } = this.state;
-
-    return (
-      <FormSelect
-        validated={validated}
-        value={value}
-        onChange={this.onChange}
-        aria-label="FormSelect Input"
-      >
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectBasic.tsx'
 ```
 
 ### Validated
-```js
-import React from 'react';
-import { Form, FormGroup, FormSelect, FormSelectOption, FormSelectOptionGroup, ValidatedOptions } from '@patternfly/react-core';
-
-class FormSelectInputInvalid extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must choose something',
-      validated: ValidatedOptions.default
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.onChange = (value, event) => {
-      this.setState(
-        { value, validated: ValidatedOptions.default, helperText: 'Validating...' },
-        this.simulateNetworkCall(() => {
-          if (value === '3') {
-            this.setState({ validated: ValidatedOptions.success, helperText: 'You chose wisely' });
-          } else if (value === '') {
-              this.setState({ validated: ValidatedOptions.warning, helperText: 'You must select a value' });
-          } else {
-            this.setState({ validated: ValidatedOptions.error, invalidText: 'You must chose Three (thought that was obvious)' });
-          }
-        })
-      );
-    };
-
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true  },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false  },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false  },
-      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false  }
-    ];
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-    return (
-      <Form>
-        <FormGroup
-          label="Selection:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <FormSelect
-            id="selection"
-            validated={validated}
-            value={value}
-            onChange={this.onChange}
-            aria-label="FormSelect Input"
-          >
-            {this.options.map((option, index) => (
-              <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} isPlaceholder={option.isPlaceholder} />
-            ))}
-          </FormSelect>
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file='./FormSelectValidated.tsx'
 ```
 
 ### Disabled
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInputDisabled extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'mrs'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.options = [
-      { value: 'please choose', label: 'Select one', disabled: true },
-      { value: 'mr', label: 'Mr', disabled: false },
-      { value: 'miss', label: 'Miss', disabled: false },
-      { value: 'mrs', label: 'Mrs', disabled: false },
-      { value: 'ms', label: 'Ms', disabled: false },
-      { value: 'dr', label: 'Dr', disabled: false },
-      { value: 'other', label: 'Other', disabled: false }
-    ];
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} isDisabled aria-label="FormSelect Input">
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectDisabled.tsx'
 ```
 
 ### Grouped
-```js
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectInputGrouped extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '2'
-    };
-    this.onChange = (value, event) => {
-      this.setState({ value });
-    };
-    this.groups = [
-      {
-        groupLabel: 'Group1',
-        disabled: false,
-        options: [
-          { value: '1', label: 'The first option', disabled: false },
-          { value: '2', label: 'Second option is selected by default', disabled: false }
-        ]
-      },
-      {
-        groupLabel: 'Group2',
-        disabled: false,
-        options: [
-          { value: '3', label: 'The third option', disabled: false },
-          { value: '4', label: 'The fourth option', disabled: false }
-        ]
-      },
-      {
-        groupLabel: 'Group3',
-        disabled: true,
-        options: [
-          { value: '5', label: 'The fifth option', disabled: false },
-          { value: '6', label: 'The sixth option', disabled: false }
-        ]
-      }
-    ];
-    this.getOptionLbl = option => option.label;
-    this.getOptionVal = option => option.value;
-    this.getOptionsGroupLbl = group => group && group.groupLabel;
-    this.getGroupOptions = group => group && group.options;
-  }
-
-  render() {
-    return (
-      <FormSelect value={this.state.value} onChange={this.onChange} aria-label="FormSelect Input">
-        {this.groups.map((group, index) => (
-          <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
-            {group.options.map((option, i) => (
-              <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
-            ))}
-          </FormSelectOptionGroup>
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectGrouped.tsx'
 ```
 
 ### Icon sprite variant
 
 **Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
 
-```js isBeta
-import React from 'react';
-import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
-
-class FormSelectIconSpriteInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      validated: ValidatedOptions.default
-    };
-
-    this.onChange = (value, event) => {
-      if (value === '3') {
-        this.setState({ value, validated: ValidatedOptions.success, helperText: 'You chose wisely' });
-      } else if (value === '') {
-        this.setState({ value, validated: ValidatedOptions.warning, helperText: 'You must select a value' });
-      } else {
-        this.setState({
-          value,
-          validated: ValidatedOptions.error,
-          invalidText: 'You must chose Three (thought that was obvious)'
-        });
-      }
-    };
-
-    this.options = [
-      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
-      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
-      { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
-      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
-    ];
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <FormSelect
-        validated={validated}
-        isIconSprite
-        value={value}
-        onChange={this.onChange}
-        aria-label="FormSelect Input"
-      >
-        {this.options.map((option, index) => (
-          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
-        ))}
-      </FormSelect>
-    );
-  }
-}
+```ts file='./FormSelectIconSpriteVariant.tsx' isBeta
 ```

package/src/components/FormSelect/examples/FormSelectBasic.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormSelect, FormSelectOption } from '@patternfly/react-core';
+
+export const FormSelectBasic: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const options = [
+    { value: 'please choose', label: 'Select one', disabled: true },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+      {options.map((option, index) => (
+        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+      ))}
+    </FormSelect>
+  );
+};

package/src/components/FormSelect/examples/FormSelectDisabled.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormSelect, FormSelectOption } from '@patternfly/react-core';
+
+export const FormSelectDisabled: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('mrs');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const options = [
+    { value: 'please choose', label: 'Select one', disabled: true },
+    { value: 'mr', label: 'Mr', disabled: false },
+    { value: 'miss', label: 'Miss', disabled: false },
+    { value: 'mrs', label: 'Mrs', disabled: false },
+    { value: 'ms', label: 'Ms', disabled: false },
+    { value: 'dr', label: 'Dr', disabled: false },
+    { value: 'other', label: 'Other', disabled: false }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} isDisabled aria-label="FormSelect Input">
+      {options.map((option, index) => (
+        <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+      ))}
+    </FormSelect>
+  );
+};

package/src/components/FormSelect/examples/FormSelectGrouped.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
+
+export const FormSelectGrouped: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('2');
+
+  const onChange = (value: string) => {
+    setFormSelectValue(value);
+  };
+
+  const groups = [
+    {
+      groupLabel: 'Group1',
+      disabled: false,
+      options: [
+        { value: '1', label: 'The first option', disabled: false },
+        { value: '2', label: 'Second option is selected by default', disabled: false }
+      ]
+    },
+    {
+      groupLabel: 'Group2',
+      disabled: false,
+      options: [
+        { value: '3', label: 'The third option', disabled: false },
+        { value: '4', label: 'The fourth option', disabled: false }
+      ]
+    },
+    {
+      groupLabel: 'Group3',
+      disabled: true,
+      options: [
+        { value: '5', label: 'The fifth option', disabled: false },
+        { value: '6', label: 'The sixth option', disabled: false }
+      ]
+    }
+  ];
+
+  return (
+    <FormSelect value={formSelectValue} onChange={onChange} aria-label="FormSelect Input">
+      {groups.map((group, index) => (
+        <FormSelectOptionGroup isDisabled={group.disabled} key={index} label={group.groupLabel}>
+          {group.options.map((option, i) => (
+            <FormSelectOption isDisabled={option.disabled} key={i} value={option.value} label={option.label} />
+          ))}
+        </FormSelectOptionGroup>
+      ))}
+    </FormSelect>
+  );
+};

package/src/components/FormSelect/examples/FormSelectIconSpriteVariant.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+
+export const FormSelectIconSpriteVariant: React.FunctionComponent = () => {
+  const [formSelectValue, setFormSelectValue] = React.useState('');
+  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+  const [invalidText, setInvalidText] = React.useState('You must choose something');
+  const [helperText, setHelperText] = React.useState('');
+
+  const onChange = (value: string) => {
+    if (value === '3') {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.success);
+      setHelperText('You chose wisely');
+    } else if (value === '') {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.warning);
+      setHelperText('You must select a value');
+    } else {
+      setFormSelectValue(value);
+      setValidated(ValidatedOptions.error);
+      setInvalidText('You must chose Three (thought that was obvious)');
+    }
+  };
+
+  const options = [
+    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+  ];
+
+  return (
+    <Form>
+      <FormGroup
+        label="Selection:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <FormSelect
+          validated={validated}
+          isIconSprite
+          value={formSelectValue}
+          onChange={onChange}
+          aria-label="FormSelect Input"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+          ))}
+        </FormSelect>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/components/FormSelect/examples/FormSelectValidated.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Form, FormGroup, FormSelect, FormSelectOption, ValidatedOptions } from '@patternfly/react-core';
+
+export const FormSelectValidated: React.FunctionComponent = () => {
+  const [formValue, setFormValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must choose something');
+  const [helperText, setHelperText] = React.useState('');
+  const [validated, setValidated] = React.useState<ValidatedOptions>(ValidatedOptions.default);
+
+  const simulateNetworkCall = (callback: () => void) => {
+    setTimeout(callback, 2000);
+  };
+
+  const onChange = (value: string) => {
+    setFormValue(value);
+    setValidated(ValidatedOptions.default);
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value === '3') {
+        setValidated(ValidatedOptions.success);
+        setHelperText('You chose wisely');
+      } else if (value === '') {
+        setValidated(ValidatedOptions.warning);
+        setHelperText('You must select a value');
+      } else {
+        setValidated(ValidatedOptions.error);
+        setInvalidText('You must chose Three (thought that was obvious)');
+      }
+    });
+  };
+
+  const options = [
+    { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+    { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+    { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+    { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+  ];
+
+  return (
+    <Form>
+      <FormGroup
+        label="Selection:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <FormSelect
+          id="selection"
+          validated={validated}
+          value={formValue}
+          onChange={onChange}
+          aria-label="FormSelect Input"
+        >
+          {options.map((option, index) => (
+            <FormSelectOption
+              isDisabled={option.disabled}
+              key={index}
+              value={option.value}
+              label={option.label}
+              isPlaceholder={option.isPlaceholder}
+            />
+          ))}
+        </FormSelect>
+      </FormGroup>
+    </Form>
+  );
+};