@patternfly/react-core 4.268.2 → 4.270.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.268.2",
+  "version": "4.270.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",
@@ -71,5 +71,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "a25b3ab583bd808d640a1c7ebb14d9296d701b2b"
+  "gitHead": "78cd4be8d80842ed0236d9ac106f6e8ed56bb075"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -42,9 +42,9 @@ export interface DatePickerProps
   /** Error message to display when the text input cannot be parsed. */
   invalidFormatText?: string;
   /** Callback called every time the text input loses focus. */
-  onBlur?: (value: string, date?: Date) => void;
+  onBlur?: (event: any, value: string, date?: Date) => void;
   /** Callback called every time the text input value changes. */
-  onChange?: (value: string, date?: Date) => void;
+  onChange?: (event: React.FormEvent<HTMLInputElement>, value: string, date?: Date) => void;
   /** String to display in the empty text input as a hint for the expected date format. */
   placeholder?: string;
   /** Props to pass to the popover that contains the calendar month component. */
@@ -138,28 +138,28 @@ const DatePickerBase = (
     setErrorText(validators.map(validator => validator(date)).join('\n') || '');
   };
 
-  const onTextInput = (value: string) => {
+  const onTextInput = (value: string, event: React.FormEvent<HTMLInputElement>) => {
     setValue(value);
     setErrorText('');
     const newValueDate = dateParse(value);
     setValueDate(newValueDate);
     if (isValidDate(newValueDate)) {
-      onChange(value, new Date(newValueDate));
+      onChange(event, value, new Date(newValueDate));
     } else {
-      onChange(value);
+      onChange(event, value);
     }
   };
 
-  const onInputBlur = () => {
+  const onInputBlur = (event: any) => {
     if (pristine) {
       return;
     }
     const newValueDate = dateParse(value);
     if (isValidDate(newValueDate)) {
-      onBlur(value, new Date(newValueDate));
+      onBlur(event, value, new Date(newValueDate));
       setError(newValueDate);
     } else {
-      onBlur(value);
+      onBlur(event, value);
       setErrorText(invalidFormatText);
     }
   };
@@ -170,7 +170,7 @@ const DatePickerBase = (
     setValueDate(newValueDate);
     setError(newValueDate);
     setPopoverOpen(false);
-    onChange(newValue, new Date(newValueDate));
+    onChange(null, newValue, new Date(newValueDate));
   };
 
   const onKeyPress = (ev: React.KeyboardEvent<HTMLInputElement>) => {

package/src/components/DatePicker/examples/DatePickerBasic.tsx

@@ -4,8 +4,8 @@ import { DatePicker } from '@patternfly/react-core';
 export const DatePickerBasic: React.FunctionComponent = () => (
   <DatePicker
     // eslint-disable-next-line no-console
-    onBlur={(str, date) => console.log('onBlur', str, date)}
+    onBlur={(_event, str, date) => console.log('onBlur', str, date)}
     // eslint-disable-next-line no-console
-    onChange={(str, date) => console.log('onChange', str, date)}
+    onChange={(_event, str, date) => console.log('onChange', str, date)}
   />
 );

package/src/components/DatePicker/examples/DatePickerControlled.tsx

@@ -7,7 +7,7 @@ export const DatePickerControlled: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Button onClick={() => setValue(initialValue)}>Reset date</Button>
-      <DatePicker value={value} onChange={value => setValue(value)} />
+      <DatePicker value={value} onChange={(_event, value) => setValue(value)} />
     </React.Fragment>
   );
 };

package/src/components/NumberInput/NumberInput.tsx

@@ -51,6 +51,8 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   minusBtnProps?: ButtonProps;
   /** Additional properties added to the plus button */
   plusBtnProps?: ButtonProps;
+  /** Allow the user to clear out the input to an empty string (recommended) */
+  allowEmptyInput?: boolean;
 }
 
 type DefaultKeyDownHandlerArgs = Pick<NumberInputProps, 'inputName' | 'onMinus' | 'onPlus'>;
@@ -87,8 +89,12 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   inputProps,
   minusBtnProps,
   plusBtnProps,
+  allowEmptyInput = false,
   ...props
 }: NumberInputProps) => {
+  if (!allowEmptyInput) {
+    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

@@ -207,9 +207,15 @@ describe('numberInput', () => {
     expect(input).toHaveDisplayValue('0');
   });
 
-  test('renders nothing if null value passed', () => {
+  test('renders 0 if null value passed without allow empty', () => {
     render(<NumberInput value={null} />);
     const input = screen.getByRole('spinbutton');
+    expect(input).toHaveDisplayValue('0');
+  });
+
+  test('renders nothing if null value passed with allow empty', () => {
+    render(<NumberInput allowEmptyInput value={null} />);
+    const input = screen.getByRole('spinbutton');
     expect(input).toHaveDisplayValue('');
   });
 

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

@@ -24,6 +24,7 @@ export const NumberInputCustomStep: React.FunctionComponent = () => {
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
+      allowEmptyInput
     />
   );
 };

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

@@ -46,6 +46,7 @@ export const NumberInputCustomStepAndThreshold: React.FunctionComponent = () =>
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
+      allowEmptyInput
     />
   );
 };

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

@@ -29,6 +29,7 @@ export const NumberInputDefault: React.FunctionComponent = () => {
       inputAriaLabel="number input"
       minusBtnAriaLabel="minus"
       plusBtnAriaLabel="plus"
+      allowEmptyInput
     />
   );
 };

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

@@ -35,6 +35,7 @@ export const NumberInputDisabled: React.FunctionComponent = () => {
       plusBtnAriaLabel="plus"
       unit="%"
       isDisabled
+      allowEmptyInput
     />
   );
 };

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

@@ -37,6 +37,7 @@ export const NumberInputUnit: React.FunctionComponent = () => {
         minusBtnAriaLabel="minus 1"
         plusBtnAriaLabel="plus 1"
         unit="%"
+        allowEmptyInput
       />
       <br />
       <br />
@@ -51,6 +52,7 @@ export const NumberInputUnit: React.FunctionComponent = () => {
         plusBtnAriaLabel="plus 0.01"
         unit="$"
         unitPosition="before"
+        allowEmptyInput
       />
     </React.Fragment>
   );

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

@@ -59,6 +59,7 @@ export const NumberInputUnitThreshold: React.FunctionComponent = () => {
         minusBtnAriaLabel="minus"
         plusBtnAriaLabel="plus"
         unit="%"
+        allowEmptyInput
       />
     </React.Fragment>
   );

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

@@ -35,6 +35,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 2 minus"
         plusBtnAriaLabel="input 2 plus"
         widthChars={1}
+        allowEmptyInput
       />
       <br />
       <br />
@@ -48,6 +49,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 2 minus"
         plusBtnAriaLabel="input 2 plus"
         widthChars={10}
+        allowEmptyInput
       />
       <br />
       <br />
@@ -61,6 +63,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 3 minus"
         plusBtnAriaLabel="input 3 plus"
         widthChars={5}
+        allowEmptyInput
       />
       <br />
       <br />
@@ -74,6 +77,7 @@ export const NumberInputVaryingSizes: React.FunctionComponent = () => {
         minusBtnAriaLabel="input 4 minus"
         plusBtnAriaLabel="input 4 plus"
         widthChars={5}
+        allowEmptyInput
       />
     </React.Fragment>
   );

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

@@ -53,6 +53,7 @@ export const NumberInputWithStatus: React.FunctionComponent = () => {
         inputAriaLabel="number input"
         minusBtnAriaLabel="minus"
         plusBtnAriaLabel="plus"
+        allowEmptyInput
       />
     </>
   );

package/src/components/Tabs/Tabs.tsx

@@ -45,7 +45,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   /** @beta Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property. */
   onClose?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
   /** @beta Callback for the add button. Passing this property inserts the add button */
-  onAdd?: () => void;
+  onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /** @beta Aria-label for the add button */
   addButtonAriaLabel?: string;
   /** Uniquely identifies the tabs */

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -344,6 +344,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
           minusBtnAriaLabel="minus"
           plusBtnAriaLabel="plus"
           style={{ margin: '12px 0' }}
+          allowEmptyInput
         />
       </PageSection>
       <PageSection variant={PageSectionVariants.light}>