@patternfly/react-core 4.258.6 → 4.258.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.258.6",
+  "version": "4.258.8",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "418db80c9d90e4a39bac9b24c7869a9ab7d985f5"
+  "gitHead": "caf942ac339aec701ec15dfc6cb48d4859b7c3e4"
 }

package/src/components/TextArea/examples/TextArea.md

@@ -9,300 +9,52 @@ propComponents: ['TextArea']
 
 ### Basic
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class SimpleTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return <TextArea value={value} onChange={this.handleTextAreaChange} aria-label="text area example" />;
-  }
-}
+```ts file="./TextAreaBasic.tsx"
 ```
 
 ### Invalid
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleInvalidTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleInvalidTextAreaChange}
-        isRequired
-        validated={'error'}
-        aria-label="invalid text area example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaInvalid.tsx"
 ```
 
 ### Validated
 
-```js
-import React from 'react';
-import { Form, FormGroup, TextArea } from '@patternfly/react-core';
-
-class InvalidTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      invalidText: 'You must have something to say',
-      validated: 'default',
-      helperText: 'Share your thoughts.'
-    };
-
-    this.simulateNetworkCall = callback => {
-      setTimeout(callback, 2000);
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState(
-        {
-          value,
-          validated: 'default',
-          helperText: 'Validating...'
-        },
-        this.simulateNetworkCall(() => {
-          if (value && value.length > 0) {
-            if (value.length >= 10) {
-              this.setState({ validated: 'success', helperText: 'Thanks for your comments!' });
-            } else {
-              this.setState({
-                validated: 'error',
-                invalidText: 'Your being too brief, please enter at least 10 characters.'
-              });
-            }
-          } else {
-            this.setState({ validated: 'warning', helperText: 'You must have something to say' });
-          }
-        })
-      );
-    };
-  }
-
-  render() {
-    const { value, validated, helperText, invalidText } = this.state;
-
-    return (
-      <Form>
-        <FormGroup
-          label="Comments:"
-          type="string"
-          helperText={helperText}
-          helperTextInvalid={invalidText}
-          fieldId="selection"
-          validated={validated}
-        >
-          <TextArea
-            value={value}
-            onChange={this.handleTextAreaChange}
-            isRequired
-            validated={validated}
-            aria-label="invalid text area example"
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./TextAreaValidated.tsx"
 ```
 
-### Vertically resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
+### Vertically resizable
 
-class VerticalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="vertical"
-        aria-label="text vertical resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaVerticallyResizable.tsx"
 ```
 
-### Horizontally resizable text area
-
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-class HorizontalResizeTextArea extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: ''
-    };
-
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
+### Horizontally resizable
 
-    return (
-      <TextArea
-        value={value}
-        onChange={this.handleTextAreaChange}
-        resizeOrientation="horizontal"
-        aria-label="text horizontal resize example"
-      />
-    );
-  }
-}
+```ts file="./TextAreaHorizontallyResizable.tsx"
 ```
 
 ### Uncontrolled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea defaultValue="default value" aria-label="uncontrolled text area example" />;
+```ts file="./TextAreaUncontrolled.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="disabled text area example" isDisabled />;
+```ts file="./TextAreaDisabled.tsx"
 ```
 
 ### Read only
 
-```js
-import React from 'react';
-import { Checkbox, TextArea } from '@patternfly/react-core';
-
-const ReadOnlyTextArea = () => {
-  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
-
-  return (
-    <React.Fragment>
-      <div style={{ marginBottom: '12px' }}>
-        <Checkbox
-          id="isPlain"
-          key="isPlain"
-          label="Plain read only variant"
-          isChecked={isPlainChecked}
-          onChange={checked => setIsPlainChecked(checked)}
-        />
-      </div>
-      <TextArea
-        aria-label="read only text area example"
-        value="read only text area example"
-        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
-      />
-    </React.Fragment>
-  );
-};
+```ts file="./TextAreaReadOnly.tsx"
 ```
 
 ### Auto resizing
 
-```js
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-<TextArea aria-label="auto resizing text area example" autoResize />;
+```ts file="./TextAreaAutoResizing.tsx"
 ```
 
 ### Icon sprite variants
 
 **Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images 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
-import React from 'react';
-import { TextArea } from '@patternfly/react-core';
-
-IconSpriteTextArea = () => {
-  const [success, setSuccess] = React.useState('');
-  const [warning, setWarning] = React.useState('');
-  const [error, setError] = React.useState('');
-
-  return (
-    <>
-      <TextArea
-        validated={ValidatedOptions.success}
-        isIconSprite
-        type="text"
-        onChange={value => setSuccess(value)}
-        aria-label="success icon sprite text area example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.warning}
-        isIconSprite
-        type="text"
-        onChange={value => setWarning(value)}
-        aria-label="warning icon sprite text input example"
-      />
-      <br />
-      <br />
-      <TextArea
-        validated={ValidatedOptions.error}
-        isIconSprite
-        type="text"
-        onChange={value => setError(value)}
-        aria-label="error icon sprite text area example"
-      />
-    </>
-  );
-};
+```ts isBeta file="./TextAreaIconSprite.tsx"
 ```

package/src/components/TextArea/examples/TextAreaAutoResizing.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaAutoResizing: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      aria-label="auto resizing text area example"
+      autoResize
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaBasic.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaBasic: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return <TextArea value={value} onChange={value => setValue(value)} aria-label="text area example" />;
+};

package/src/components/TextArea/examples/TextAreaDisabled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaDisabled: React.FunctionComponent = () => (
+  <TextArea aria-label="disabled text area example" isDisabled />
+);

package/src/components/TextArea/examples/TextAreaHorizontallyResizable.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaHorizontallyResizable: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="horizontal"
+      aria-label="text area horizontal resize example"
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaIconSprite.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaIconSprite: React.FunctionComponent = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextArea
+        validated={'success'}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        value={success}
+        aria-label="success icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'warning'}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        value={warning}
+        aria-label="warning icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={'error'}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        value={error}
+        aria-label="error icon sprite text area example"
+      />
+    </>
+  );
+};

package/src/components/TextArea/examples/TextAreaInvalid.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaInvalid: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      isRequired
+      validated={'error'}
+      aria-label="invalid text area example"
+    />
+  );
+};

package/src/components/TextArea/examples/TextAreaReadOnly.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox, TextArea } from '@patternfly/react-core';
+
+export const TextAreaReadOnly: React.FunctionComponent = () => {
+  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          id="isPlain"
+          key="isPlain"
+          label="Plain read only variant"
+          isChecked={isPlainChecked}
+          onChange={checked => setIsPlainChecked(checked)}
+        />
+      </div>
+      <TextArea
+        aria-label="read only text area example"
+        value="read only text area example"
+        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
+      />
+    </React.Fragment>
+  );
+};

package/src/components/TextArea/examples/TextAreaUncontrolled.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const TextAreaUncontrolled: React.FunctionComponent = () => (
+  <TextArea defaultValue="default value" aria-label="uncontrolled text area example" />
+);

package/src/components/TextArea/examples/TextAreaValidated.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Form, FormGroup, TextArea } from '@patternfly/react-core';
+
+export const TextAreaValidated: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [invalidText, setInvalidText] = React.useState('You must have something to say');
+  const [validated, setValidated] = React.useState<'default' | 'error' | 'warning' | 'success' | undefined>('default');
+  const [helperText, setHelperText] = React.useState('Share your thoughts.');
+  const simulateNetworkCall = (callback: Function) => {
+    setTimeout(callback, 2000);
+  };
+
+  const handleTextAreaChange = (value: string) => {
+    setValue(value);
+    setValidated('default');
+    setHelperText('Validating...');
+    simulateNetworkCall(() => {
+      if (value.length > 0) {
+        if (value.length >= 10) {
+          setValidated('success');
+          setHelperText('Thanks for your comments!');
+        } else {
+          setValidated('error');
+          setInvalidText("You're being too brief, please enter at least 10 characters.");
+        }
+      } else {
+        setValidated('warning');
+        setHelperText('You must have something to say');
+      }
+    });
+  };
+  return (
+    <Form>
+      <FormGroup
+        label="Comments:"
+        type="string"
+        helperText={helperText}
+        helperTextInvalid={invalidText}
+        fieldId="selection"
+        validated={validated}
+      >
+        <TextArea
+          value={value}
+          onChange={value => handleTextAreaChange(value)}
+          isRequired
+          validated={validated}
+          aria-label="invalid text area example"
+        />
+      </FormGroup>
+    </Form>
+  );
+};

package/src/components/TextArea/examples/TextAreaVerticallyResizable.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+export const VerticalResizeTextArea: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  return (
+    <TextArea
+      value={value}
+      onChange={value => setValue(value)}
+      resizeOrientation="vertical"
+      aria-label="text area vertical resize example"
+    />
+  );
+};

package/src/components/TimePicker/TimePicker.tsx

@@ -143,6 +143,8 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
     document.addEventListener('mousedown', this.onDocClick);
     document.addEventListener('touchstart', this.onDocClick);
     document.addEventListener('keydown', this.handleGlobalKeys);
+
+    this.setState({ isInvalid: !this.isValid(this.state.timeState) });
   }
 
   componentWillUnmount() {
@@ -198,7 +200,7 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
 
   componentDidUpdate(prevProps: TimePickerProps, prevState: TimePickerState) {
     const { timeState, isTimeOptionsOpen, isInvalid, timeRegex } = this.state;
-    const { time, is24Hour, delimiter, includeSeconds, isOpen } = this.props;
+    const { time, is24Hour, delimiter, includeSeconds, isOpen, minTime, maxTime } = this.props;
     if (prevProps.isOpen !== isOpen) {
       this.onToggle(isOpen);
     }
@@ -212,8 +214,22 @@ export class TimePicker extends React.Component<TimePickerProps, TimePickerState
       });
     }
     if (time !== '' && time !== prevProps.time) {
+      const parsedTime = parseTime(time, timeRegex, delimiter, !is24Hour, includeSeconds);
+
+      this.setState({
+        timeState: parsedTime,
+        isInvalid: !this.isValid(parsedTime)
+      });
+    }
+    if (minTime !== '' && minTime !== prevProps.minTime) {
+      this.setState({
+        minTimeState: parseTime(minTime, timeRegex, delimiter, !is24Hour, includeSeconds)
+      });
+    }
+
+    if (maxTime !== '' && maxTime !== prevProps.maxTime) {
       this.setState({
-        timeState: parseTime(time, timeRegex, delimiter, !is24Hour, includeSeconds)
+        maxTimeState: parseTime(maxTime, timeRegex, delimiter, !is24Hour, includeSeconds)
       });
     }
   }

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

@@ -107,24 +107,27 @@ describe('TimePicker', () => {
     });
 
     test('should be invalid after onBlur', async () => {
-      const validateTime = (_time: string) => {
-        return false;
-      };
       const user = userEvent.setup();
 
       render(
         <>
           <div>Other element</div>
-          <TimePicker value={'00:00'} validateTime={validateTime} aria-label="time picker" />
+          <TimePicker value={'00:00'} aria-label="time picker" />
         </>
       );
 
-      await user.type(screen.getByLabelText('time picker'), '01:00');
+      await user.type(screen.getByLabelText('time picker'), '14:00');
       expect(screen.queryByText('Invalid time format')).toBeNull();
 
       await user.click(screen.getByText('Other element'));
       expect(screen.getByText('Invalid time format')).toBeInTheDocument();
     });
+
+    test('should be invalid when invalid time prop is passed', () => {
+      render(<TimePicker time="00:00" aria-label="time picker" />);
+
+      expect(screen.getByText('Invalid time format')).toBeInTheDocument();
+    });
   });
 
   describe('test includeSeconds', () => {