@patternfly/react-core 4.198.18 → 4.198.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.198.18",
+  "version": "4.198.19",
   "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.49.18",
-    "@patternfly/react-styles": "^4.48.18",
-    "@patternfly/react-tokens": "^4.50.18",
+    "@patternfly/react-icons": "^4.49.19",
+    "@patternfly/react-styles": "^4.48.19",
+    "@patternfly/react-tokens": "^4.50.19",
     "focus-trap": "6.2.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": "cddb168bc8c901582a0a7cde8eabd692b9c85b6d"
+  "gitHead": "5b472303da22cb9c67e9977b3933f6576c27ac01"
 }

package/src/components/NumberInput/NumberInput.tsx

@@ -83,6 +83,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
+
   return (
     <div
       className={css(styles.numberInput, className)}
@@ -99,7 +100,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
         <Button
           variant="control"
           aria-label={minusBtnAriaLabel}
-          isDisabled={isDisabled || value === min}
+          isDisabled={isDisabled || value <= min}
           onClick={evt => onMinus(evt, inputName)}
           {...minusBtnProps}
         >
@@ -122,7 +123,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
         <Button
           variant="control"
           aria-label={plusBtnAriaLabel}
-          isDisabled={isDisabled || value === max}
+          isDisabled={isDisabled || value >= max}
           onClick={evt => onPlus(evt, inputName)}
           {...plusBtnProps}
         >

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

@@ -159,9 +159,20 @@ class UnitThresholdNumberInput extends React.Component {
     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.state.value - 1
+        value: this.normalizeBetween(this.state.value - 1, this.minValue, this.maxValue)
       });
     };
 
@@ -174,7 +185,7 @@ class UnitThresholdNumberInput extends React.Component {
 
     this.onPlus = () => {
       this.setState({
-        value: this.state.value + 1
+        value: this.normalizeBetween(this.state.value + 1, this.minValue, this.maxValue)
       });
     };
   }
@@ -369,12 +380,12 @@ class CustomStepNumberInput extends React.Component {
     super(props);
     this.state = {
       value: 90,
-      step: 3,
+      step: 3
     };
 
     this.stepper = step => () => {
-      this.setState(prev => ({...prev, value: prev.value + step }))
-    }
+      this.setState(prev => ({ ...prev, value: prev.value + step }));
+    };
 
     this.onChange = event => {
       this.setState({
@@ -400,3 +411,65 @@ class CustomStepNumberInput extends React.Component {
   }
 }
 ```
+
+### 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.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}
+        onPlus={this.stepper(3)}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+      />
+    );
+  }
+}
+```