@patternfly/react-core 4.262.0 → 4.263.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.262.0",
+  "version": "4.263.0",
   "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": "441c5d2ff327a5c9b97eaa299c1c8b9b929f38e1"
+  "gitHead": "a6cd98641632354c9e9765f4cff1303942123fb7"
 }

package/src/components/Button/Button.tsx

@@ -172,6 +172,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         <span className={css(styles.buttonProgress)}>
           <Spinner
             size={spinnerSize.md}
+            isInline={isInline}
             aria-valuetext={spinnerAriaValueText}
             aria-label={spinnerAriaLabel}
             aria-labelledby={spinnerAriaLabelledBy}

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -257,7 +257,7 @@ exports[`Button isLoading inline link 1`] = `
       <span
         aria-label="Contents"
         aria-valuetext="Loading"
-        class="pf-c-spinner pf-m-md"
+        class="pf-c-spinner pf-m-inline"
         role="progressbar"
       >
         <span

package/src/components/NumberInput/NumberInput.tsx

@@ -10,7 +10,7 @@ import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   /** Value of the number input */
-  value?: number | null;
+  value?: number | '';
   /** Additional classes added to the number input */
   className?: string;
   /** Sets the width of the number input to a number of characters */
@@ -89,7 +89,6 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   plusBtnProps,
   ...props
 }: NumberInputProps) => {
-  value = value || 0;
   const numberInputUnit = <div className={css(styles.numberInputUnit)}>{unit}</div>;
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });

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

@@ -195,22 +195,22 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('47.01');
   });
 
-  test('renders 0 if no value passed', () => {
+  test('renders 0 (default value) if no value passed', () => {
     render(<NumberInput />);
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('0');
   });
 
-  test('renders 0 if undefined value passed', () => {
+  test('renders 0 (default value) if undefined value passed', () => {
     render(<NumberInput value={undefined} />);
     const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('0');
   });
 
-  test('renders 0 if null value passed', () => {
+  test('renders nothing if null value passed', () => {
     render(<NumberInput value={null} />);
     const input = screen.getByRole('spinbutton');
-    expect(input).toHaveDisplayValue('0');
+    expect(input).toHaveDisplayValue('');
   });
 
   test('does not throw an error if onChange is passed via inputProps as well as the onChange prop', () => {

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

@@ -19,6 +19,8 @@ propComponents: ['NumberInput']
 
 ### With unit and thresholds
 
+To enable a user entered value to snap to the nearest threshold if the entered input is out of bounds, define the blur event handler.
+
 ```ts file="./NumberInputUnitThreshold.tsx"
 ```
 

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

@@ -2,16 +2,16 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStep: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(90);
+  const [value, setValue] = React.useState<number | ''>(90);
   const step = 3;
 
   const stepper = (stepValue: number) => {
-    setValue(value + stepValue);
+    setValue((value || 0) + stepValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   return (

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(90);
+  const [value, setValue] = React.useState<number | ''>(90);
   const minValue = 90;
   const maxValue = 100;
   const step = 3;
@@ -19,13 +19,12 @@ export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () =>
   };
 
   const stepper = (stepValue: number) => {
-    setValue(value + stepValue);
+    setValue((value || 0) + 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 value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   const onBlur = (event: React.FormEvent<HTMLInputElement>) => {

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

@@ -2,20 +2,20 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDefault: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(90);
+  const [value, setValue] = React.useState<number | ''>(90);
 
   const onMinus = () => {
-    const newValue = value - 1;
+    const newValue = (value || 0) - 1;
     setValue(newValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   const onPlus = () => {
-    const newValue = value + 1;
+    const newValue = (value || 0) + 1;
     setValue(newValue);
   };
 

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

@@ -2,22 +2,22 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputDisabled: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(100);
+  const [value, setValue] = React.useState<number | ''>(100);
   const minValue = 0;
   const maxValue = 100;
 
   const onMinus = () => {
-    const newValue = value - 1;
+    const newValue = (value || 0) - 1;
     setValue(newValue);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
   };
 
   const onPlus = () => {
-    const newValue = value + 1;
+    const newValue = (value || 0) + 1;
     setValue(newValue);
   };
 

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

@@ -2,26 +2,26 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnit: React.FunctionComponent = () => {
-  const [value1, setValue1] = React.useState(90);
-  const [value2, setValue2] = React.useState(Number((1.0).toFixed(2)));
+  const [value1, setValue1] = React.useState<number | ''>(90);
+  const [value2, setValue2] = React.useState<number | ''>(Number((1.0).toFixed(2)));
 
-  const onMinus1 = () => setValue1(value1 - 1);
+  const onMinus1 = () => setValue1((value1 || 0) - 1);
   const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue1(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue1(value === '' ? value : +value);
   };
-  const onPlus1 = () => setValue1(value1 + 1);
+  const onPlus1 = () => setValue1((value1 || 0) + 1);
 
   const onMinus2 = () => {
-    const newValue = Number((value2 - 0.01).toFixed(2));
+    const newValue = Number(((value2 || 0) - 0.01).toFixed(2));
     setValue2(newValue);
   };
   const onChange2 = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    setValue2(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    setValue2(value === '' ? value : +value);
   };
   const onPlus2 = () => {
-    const newValue = Number((value2 + 0.01).toFixed(2));
+    const newValue = Number(((value2 || 0) + 0.01).toFixed(2));
     setValue2(newValue);
   };
 

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputUnitThreshold: React.FunctionComponent = () => {
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = React.useState<number | ''>(0);
   const minValue = 0;
   const maxValue = 10;
 
@@ -18,18 +18,27 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => {
   };
 
   const onMinus = () => {
-    const newValue = normalizeBetween(value - 1, minValue, maxValue);
+    const newValue = normalizeBetween((value as number) - 1, minValue, maxValue);
     setValue(newValue);
   };
 
   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 value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
+  };
+
+  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    const blurVal = +event.target.value;
+
+    if (blurVal < minValue) {
+      setValue(minValue);
+    } else if (blurVal > maxValue) {
+      setValue(maxValue);
+    }
   };
 
   const onPlus = () => {
-    const newValue = normalizeBetween(value + 1, minValue, maxValue);
+    const newValue = normalizeBetween((value as number) + 1, minValue, maxValue);
     setValue(newValue);
   };
 
@@ -43,6 +52,7 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => {
         max={maxValue}
         onMinus={onMinus}
         onChange={onChange}
+        onBlur={onBlur}
         onPlus={onPlus}
         inputName="input"
         inputAriaLabel="number input"

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

@@ -2,25 +2,25 @@ import React from 'react';
 import { NumberInput } from '@patternfly/react-core';
 
 export const NumberInputVaryingSizes: React.FunctionComponent = () => {
-  const [input1Value, setInput1Value] = React.useState(1);
-  const [input2Value, setInput2Value] = React.useState(1234567890);
-  const [input3Value, setInput3Value] = React.useState(5);
-  const [input4Value, setInput4Value] = React.useState(12345);
+  const [input1Value, setInput1Value] = React.useState<number | ''>(1);
+  const [input2Value, setInput2Value] = React.useState<number | ''>(1234567890);
+  const [input3Value, setInput3Value] = React.useState<number | ''>(5);
+  const [input4Value, setInput4Value] = React.useState<number | ''>(12345);
 
   const onChange = (
     event: React.FormEvent<HTMLInputElement>,
-    updateFunction: React.Dispatch<React.SetStateAction<number>>
+    updateFunction: React.Dispatch<React.SetStateAction<number | ''>>
   ) => {
-    const target = event.target as HTMLInputElement;
-    updateFunction(Number(target.value));
+    const value = (event.target as HTMLInputElement).value;
+    updateFunction(value === '' ? value : +value);
   };
 
-  const onMinus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
-    updateFunction(value - 1);
+  const onMinus = (value: number | '', updateFunction: React.Dispatch<React.SetStateAction<number | ''>>) => {
+    updateFunction((value || 0) - 1);
   };
 
-  const onPlus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
-    updateFunction(value + 1);
+  const onPlus = (value: number | '', updateFunction: React.Dispatch<React.SetStateAction<number | ''>>) => {
+    updateFunction((value || 0) + 1);
   };
 
   return (

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

@@ -9,22 +9,21 @@ export const NumberInputWithStatus: React.FunctionComponent = () => {
   const [value, setValue] = React.useReducer((state, newVal) => Math.max(min, Math.min(max, Number(newVal))), 5);
 
   const onPlus = () => {
-    const newVal = value + 1;
+    const newVal = (value || 0) + 1;
     setValue(newVal);
     validate(newVal);
   };
 
   const onMinus = () => {
-    const newVal = value - 1;
+    const newVal = (value || 0) - 1;
     setValue(newVal);
     validate(newVal);
   };
 
   const onChange = (event: React.FormEvent<HTMLInputElement>) => {
-    const target = event.target as HTMLInputElement;
-    const newVal = isNaN(+target.value) ? 5 : Number(target.value);
-    setValue(newVal);
-    validate(newVal);
+    const value = (event.target as HTMLInputElement).value;
+    setValue(value === '' ? value : +value);
+    validate(value);
   };
 
   const validate = newVal => {

package/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap

@@ -36,7 +36,9 @@ exports[`popover renders close-button, header and body 1`] = `
 
 exports[`popover renders in strict mode 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    style="display: contents;"
+  >
     <div>
       Toggle Popover
     </div>

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -441,7 +441,9 @@ exports[`SearchInput renders search input in strict mode 1`] = `
   <div
     class=""
   >
-    <div>
+    <div
+      style="display: contents;"
+    >
       <div
         class="pf-c-input-group"
       >

package/src/components/Spinner/Spinner.tsx

@@ -20,6 +20,8 @@ export interface SpinnerProps extends Omit<React.HTMLProps<HTMLSpanElement>, 'si
   isSVG?: boolean;
   /** Diameter of spinner set as CSS variable */
   diameter?: string;
+  /** @beta Indicates the spinner is inline and the size should inherit the text font size. This will override the size prop. */
+  isInline?: boolean;
   /** Accessible label to describe what is loading */
   'aria-label'?: string;
   /** Id of element which describes what is being loaded */
@@ -33,6 +35,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
   'aria-valuetext': ariaValueText = 'Loading...',
   isSVG = false,
   diameter,
+  isInline = false,
   'aria-label': ariaLabel,
   'aria-labelledBy': ariaLabelledBy,
   ...props
@@ -41,7 +44,7 @@ export const Spinner: React.FunctionComponent<SpinnerProps> = ({
 
   return (
     <Component
-      className={css(styles.spinner, styles.modifiers[size], className)}
+      className={css(styles.spinner, isInline ? styles.modifiers.inline : styles.modifiers[size], className)}
       role="progressbar"
       aria-valuetext={ariaValueText}
       {...(isSVG && { viewBox: '0 0 100 100' })}

package/src/components/Spinner/examples/Spinner.md

@@ -17,3 +17,7 @@ propComponents: ['Spinner']
 ### Custom size
 ```ts file="./SpinnerCustomSize.tsx"
 ```
+
+### Inline size
+```ts file="./SpinnerInline.tsx" isBeta
+```

package/src/components/Spinner/examples/SpinnerInline.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Spinner, Text, TextContent } from '@patternfly/react-core';
+
+export const SpinnerInline: React.FunctionComponent = () => (
+  <React.Fragment>
+    <TextContent>
+      <Text component="h1">
+        Heading
+        <Spinner isInline isSVG aria-label="Spinner in a heading" />
+      </Text>
+      <Text component="p">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.
+      </Text>
+      <Text component="h2">
+        Second level
+        <Spinner isInline isSVG aria-label="spinner in a subheading" />
+      </Text>
+      <Text component="p">
+        Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,{' '}
+        <Spinner isInline isSVG aria-label="Spinner in a paragraph" /> sit amet commodo arcu rutrum id. Proin pretium
+        urna vel cursus venenatis. Suspendisse potenti.
+      </Text>
+      <small>
+        Sometimes you need small text
+        <Spinner isInline isSVG aria-label="Spinner in a small element" />
+      </small>
+    </TextContent>
+  </React.Fragment>
+);

package/src/components/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap

@@ -10,7 +10,9 @@ exports[`tooltip renders 1`] = `
 
 exports[`tooltip renders in strict mode 1`] = `
 <DocumentFragment>
-  <div>
+  <div
+    style="display: contents;"
+  >
     <div>
       Toggle tooltip
     </div>

package/src/helpers/Popper/Popper.tsx

@@ -311,7 +311,7 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     [popperMatchesTriggerWidth]
   );
 
-  const { styles: popperStyles, attributes, update } = usePopper(refOrTrigger, popperElement, {
+  const { styles: popperStyles, attributes, update, forceUpdate } = usePopper(refOrTrigger, popperElement, {
     placement: getPlacementMemo,
     modifiers: [
       {
@@ -340,6 +340,10 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
     ]
   });
 
+  React.useEffect(() => {
+    forceUpdate && forceUpdate();
+  }, [popper]);
+
   // Returns the CSS modifier class in order to place the Popper's arrow properly
   // Depends on the position of the Popper relative to the reference element
   const modifierFromPopperPosition = () => {
@@ -383,7 +387,11 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
   let popperPortal;
   if (removeFindDomNode) {
     // If removeFindDomNode is passed, use the removeFindDomNode method of wrapping divs
-    popperPortal = <div ref={node => setPopperElement(node?.firstElementChild as HTMLElement)}>{menuWithPopper}</div>;
+    popperPortal = (
+      <div style={{ display: 'contents' }} ref={node => setPopperElement(node?.firstElementChild as HTMLElement)}>
+        {menuWithPopper}
+      </div>
+    );
   } else if (popperRef) {
     // If removeFindDomNode is not passed and popperRef is passed, use the popperRef method
     popperPortal = menuWithPopper;
@@ -400,7 +408,9 @@ export const Popper: React.FunctionComponent<PopperProps> = ({
         <FindRefWrapper onFoundRef={(foundRef: any) => setTriggerElement(foundRef)}>{trigger}</FindRefWrapper>
       )}
       {!reference && trigger && React.isValidElement(trigger) && removeFindDomNode && (
-        <div ref={node => setTriggerElement(node?.firstElementChild as HTMLElement)}>{trigger}</div>
+        <div style={{ display: 'contents' }} ref={node => setTriggerElement(node?.firstElementChild as HTMLElement)}>
+          {trigger}
+        </div>
       )}
       {ready && isVisible && ReactDOM.createPortal(popperPortal, getTarget())}
     </>