@patternfly/react-core 4.202.19 → 4.202.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.19",
+  "version": "4.202.20",
   "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.53.19",
-    "@patternfly/react-styles": "^4.52.19",
-    "@patternfly/react-tokens": "^4.54.19",
+    "@patternfly/react-icons": "^4.53.20",
+    "@patternfly/react-styles": "^4.52.20",
+    "@patternfly/react-tokens": "^4.54.20",
     "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": "9e9d16ac392a83a7141cd1720079d46bc6bd796b"
+  "gitHead": "d42bba5cd0c58e77d18fa60638804f9c6b21de94"
 }

package/src/components/NumberInput/NumberInput.tsx

@@ -20,6 +20,8 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   onMinus?: (event: React.MouseEvent, name?: string) => void;
   /** Callback for the text input changing */
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+  /** Callback function when text input is blurred (focus leaves) */
+  onBlur?: (event?: any) => void;
   /** Callback for the plus button */
   onPlus?: (event: React.MouseEvent, name?: string) => void;
   /** Adds the given unit to the number input */
@@ -66,6 +68,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   isDisabled = false,
   onMinus = () => {},
   onChange,
+  onBlur,
   onPlus = () => {},
   unit,
   unitPosition = 'after',
@@ -116,6 +119,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           aria-label={inputAriaLabel}
           {...(isDisabled && { disabled: isDisabled })}
           {...(onChange && { onChange })}
+          {...(onBlur && { onBlur })}
           {...(!onChange && { readOnly: true })}
           {...inputProps}
           onKeyDown={keyDownHandler}

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

@@ -447,6 +447,13 @@ class CustomStepNumberInput extends React.Component {
     };
 
     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
@@ -463,6 +470,7 @@ class CustomStepNumberInput extends React.Component {
         max={this.maxValue}
         onMinus={this.stepper(-3)}
         onChange={this.onChange}
+        onBlur={this.onBlur}
         onPlus={this.stepper(3)}
         inputName="input"
         inputAriaLabel="number input"