@patternfly/react-core 4.242.8 → 4.243.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.242.8",
+  "version": "4.243.1",
   "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",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.92.4",
-    "@patternfly/react-styles": "^4.91.4",
-    "@patternfly/react-tokens": "^4.93.4",
+    "@patternfly/react-icons": "^4.92.5",
+    "@patternfly/react-styles": "^4.91.5",
+    "@patternfly/react-tokens": "^4.93.5",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.216.0",
+    "@patternfly/patternfly": "4.217.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "13e7bc690a3e25b2a6c14b2a4fef153fff2b70cb"
+  "gitHead": "eb89462c9bbd1414e2da9f3b77601f965ba03bf2"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -120,7 +120,9 @@ const DatePickerBase = (
     setPristine(!value);
   }, [value]);
 
-  const setError = (date: Date) => setErrorText(validators.map(validator => validator(date)).join('\n') || '');
+  const setError = (date: Date) => {
+    setErrorText(validators.map(validator => validator(date)).join('\n') || '');
+  };
 
   const onTextInput = (value: string) => {
     setValue(value);
@@ -236,7 +238,7 @@ const DatePickerBase = (
               isDisabled={isDisabled}
               aria-label={ariaLabel}
               placeholder={placeholder}
-              validated={errorText ? 'error' : 'default'}
+              validated={errorText.trim() ? 'error' : 'default'}
               value={value}
               onChange={onTextInput}
               onBlur={onInputBlur}

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

@@ -1,8 +1,29 @@
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import { DatePicker } from '../DatePicker';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 
 test('disabled date picker', () => {
   const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (date: Date) => {
+    return '';
+  };
+
+  const rangeValidatorB = (date: Date) => {
+    return '';
+  };
+
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
+
+  await user.click(screen.getByRole('textbox'));
+
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});

package/src/components/NumberInput/examples/NumberInput.md

@@ -9,479 +9,40 @@ propComponents: ['NumberInput']
 
 ### Default
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class BasicNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.state.value - 1
-      });
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.state.value + 1
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        onMinus={this.onMinus}
-        onChange={this.onChange}
-        onPlus={this.onPlus}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputDefault.tsx"
 ```
 
 ### With unit
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class UnitNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value1: 90,
-      value2: (1.0).toFixed(2)
-    };
-
-    this.onMinus1 = () => {
-      this.setState({
-        value1: this.state.value1 - 1
-      });
-    };
-
-    this.onChange1 = event => {
-      this.setState({
-        value1: Number(event.target.value)
-      });
-    };
-
-    this.onPlus1 = () => {
-      this.setState({
-        value1: this.state.value1 + 1
-      });
-    };
-
-    this.onMinus2 = () => {
-      this.setState({
-        value2: (Number(this.state.value2) - 0.01).toFixed(2)
-      });
-    };
-
-    this.onChange2 = event => {
-      this.setState({
-        value2: event.target.value
-      });
-    };
-
-    this.onPlus2 = () => {
-      this.setState({
-        value2: (Number(this.state.value2) + 0.01).toFixed(2)
-      });
-    };
-  }
-
-  render() {
-    const { value1, value2 } = this.state;
-    return (
-      <React.Fragment>
-        <NumberInput
-          value={value1}
-          onMinus={this.onMinus1}
-          onChange={this.onChange1}
-          onPlus={this.onPlus1}
-          inputName="input 1"
-          inputAriaLabel="number input 1"
-          minusBtnAriaLabel="minus 1"
-          plusBtnAriaLabel="plus 1"
-          unit="%"
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={value2}
-          onMinus={this.onMinus2}
-          onChange={this.onChange2}
-          onPlus={this.onPlus2}
-          inputName="input 2"
-          inputAriaLabel="number input 2"
-          minusBtnAriaLabel="minus 0.01"
-          plusBtnAriaLabel="plus 0.01"
-          unit="$"
-          unitPosition="before"
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputUnit.tsx"
 ```
 
 ### With unit and thresholds
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class UnitThresholdNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 0
-    };
-    this.minValue = 0;
-    this.maxValue = 10;
-
-    this.normalizeBetween = (value, min, max) => {
-      if (min !== undefined && max !== undefined) {
-        return Math.max(Math.min(value, max), min);
-      } else if (value <= min) {
-        return min;
-      } else if (value >= max) {
-        return max;
-      }
-      return value;
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.normalizeBetween(this.state.value - 1, this.minValue, this.maxValue)
-      });
-    };
-
-    this.onChange = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.normalizeBetween(this.state.value + 1, this.minValue, this.maxValue)
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <React.Fragment>
-        With a minimum value of 0 and maximum value of 10
-        <br />
-        <NumberInput
-          value={value}
-          min={this.minValue}
-          max={this.maxValue}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input"
-          inputAriaLabel="number input"
-          minusBtnAriaLabel="minus"
-          plusBtnAriaLabel="plus"
-          unit="%"
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputUnitThreshold.tsx"
 ```
 
 ### Disabled
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class DisabledNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 100
-    };
-
-    this.onMinus = () => {
-      this.setState({
-        value: this.state.value - 1
-      });
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-
-    this.onPlus = () => {
-      this.setState({
-        value: this.state.value + 1
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    const minValue = 0;
-    const maxValue = 100;
-
-    return (
-      <NumberInput
-        value={value}
-        min={minValue}
-        max={maxValue}
-        onMinus={this.onMinus}
-        onChange={this.onChange}
-        onPlus={this.onPlus}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-        unit="%"
-        isDisabled
-      />
-    );
-  }
-}
-
+```ts file="./NumberInputDisabled.tsx"
 ```
+
 ### With status
 
-```ts file="./WithStatus.tsx"
+```ts file="./NumberInputWithStatus.tsx"
 ```
 
 ### Varying sizes
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class NumberInputSizes extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      input1Value: 1,
-      input2Value: 1234567890,
-      input3Value: 5,
-      input4Value: 12345
-    };
-
-    this.onChange = event => {
-      this.setState({
-        [`${event.target.name}Value`]: Number(event.target.value)
-      });
-    };
-
-    this.onMinus = (e, inputName) => {
-      this.setState({
-        [`${inputName}Value`]: this.state[`${inputName}Value`] - 1
-      });
-    };
-
-    this.onPlus = (e, inputName) => {
-      this.setState({
-        [`${inputName}Value`]: this.state[`${inputName}Value`] + 1
-      });
-    };
-  }
-
-  render() {
-    const { input1Value, input2Value, input3Value, input4Value } = this.state;
-
-    return (
-      <React.Fragment>
-        <NumberInput
-          value={input1Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input1"
-          inputAriaLabel="number input 1"
-          minusBtnAriaLabel="input 2 minus"
-          plusBtnAriaLabel="input 2 plus"
-          widthChars={1}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input2Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input2"
-          inputAriaLabel="number input 2"
-          minusBtnAriaLabel="input 2 minus"
-          plusBtnAriaLabel="input 2 plus"
-          widthChars={10}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input3Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input3"
-          inputAriaLabel="number input 3"
-          minusBtnAriaLabel="input 3 minus"
-          plusBtnAriaLabel="input 3 plus"
-          widthChars={5}
-        />
-        <br />
-        <br />
-        <NumberInput
-          value={input4Value}
-          onMinus={this.onMinus}
-          onChange={this.onChange}
-          onPlus={this.onPlus}
-          inputName="input4"
-          inputAriaLabel="number input 4"
-          minusBtnAriaLabel="input 4 minus"
-          plusBtnAriaLabel="input 4 plus"
-          widthChars={5}
-        />
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./NumberInputVaryingSizes.tsx"
 ```
 
 ### Custom increment/decrement
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class CustomStepNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90,
-      step: 3
-    };
-
-    this.stepper = step => () => {
-      this.setState(prev => ({ ...prev, value: prev.value + step }));
-    };
-
-    this.onChange = event => {
-      this.setState({
-        value: Number(event.target.value)
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        onMinus={this.stepper(-3)}
-        onChange={this.onChange}
-        onPlus={this.stepper(3)}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputCustomStep.tsx"
 ```
 
 ### Custom increment/decrement and thresholds
 
-```js
-import React from 'react';
-import { NumberInput } from '@patternfly/react-core';
-
-class CustomStepNumberInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 90,
-      step: 3
-    };
-    this.minValue = 90;
-    this.maxValue = 100;
-
-    this.normalizeBetween = (value, min, max) => {
-      if (min !== undefined && max !== undefined) {
-        return Math.max(Math.min(value, max), min);
-      } else if (value <= min) {
-        return min;
-      } else if (value >= max) {
-        return max;
-      }
-      return value;
-    };
-
-    this.stepper = step => () => {
-      this.setState(prev => ({
-        ...prev,
-        value: this.normalizeBetween(prev.value + step, this.minValue, this.maxValue)
-      }));
-    };
-
-    this.onChange = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue
-      });
-    };
-
-    this.onBlur = event => {
-      const newValue = isNaN(event.target.value) ? 0 : Number(event.target.value);
-      this.setState({
-        value: newValue > this.maxValue ? this.maxValue : newValue < this.minValue ? this.minValue : newValue
-      });
-    };
-  }
-
-  render() {
-    const { value } = this.state;
-    return (
-      <NumberInput
-        value={value}
-        min={this.minValue}
-        max={this.maxValue}
-        onMinus={this.stepper(-3)}
-        onChange={this.onChange}
-        onBlur={this.onBlur}
-        onPlus={this.stepper(3)}
-        inputName="input"
-        inputAriaLabel="number input"
-        minusBtnAriaLabel="minus"
-        plusBtnAriaLabel="plus"
-      />
-    );
-  }
-}
+```ts file="./NumberInputCustomStepAndThreshold.tsx"
 ```

package/src/components/NumberInput/examples/NumberInputCustomStep.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputCustomStep: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+  const step = 3;
+
+  const stepper = (stepValue: number) => {
+    setValue(value + stepValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      onMinus={() => stepper(-step)}
+      onChange={onChange}
+      onPlus={() => stepper(step)}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

package/src/components/NumberInput/examples/NumberInputCustomStepAndThreshold.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+  const minValue = 90;
+  const maxValue = 100;
+  const step = 3;
+
+  const normalizeBetween = (value, min, max) => {
+    if (min !== undefined && max !== undefined) {
+      return Math.max(Math.min(value, max), min);
+    } else if (value <= min) {
+      return min;
+    } else if (value >= max) {
+      return max;
+    }
+    return value;
+  };
+
+  const stepper = (stepValue: number) => {
+    setValue(value + stepValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onBlur = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      min={minValue}
+      max={maxValue}
+      onMinus={() => stepper(-step)}
+      onChange={onChange}
+      onBlur={onBlur}
+      onPlus={() => stepper(step)}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};

package/src/components/NumberInput/examples/NumberInputDefault.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputDefault: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(90);
+
+  const onMinus = () => {
+    const newValue = value - 1;
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  const onPlus = () => {
+    const newValue = value + 1;
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      onMinus={onMinus}
+      onChange={onChange}
+      onPlus={onPlus}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+    />
+  );
+};