@patternfly/react-core 4.268.1 → 4.269.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.268.1",
+  "version": "4.269.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": "a4fca9d0be55199414a01de809cc041561207489"
+  "gitHead": "bf9cf833bd7117fcfdb71fc68cab3d2453374336"
 }

package/src/components/LabelGroup/LabelGroup.tsx

@@ -156,15 +156,14 @@ export class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState
       ...rest
     } = this.props;
     const { isOpen } = this.state;
-    const numChildren = React.Children.count(children);
+    const renderedChildren = React.Children.toArray(children);
+    const numChildren = renderedChildren.length;
     const collapsedTextResult = fillTemplate(collapsedText as string, {
-      remaining: React.Children.count(children) - numLabels
+      remaining: numChildren - numLabels
     });
 
     const renderLabelGroup = (id: string) => {
-      const labelArray = !isOpen
-        ? React.Children.toArray(children).slice(0, numLabels)
-        : React.Children.toArray(children);
+      const labelArray = !isOpen ? renderedChildren.slice(0, numLabels) : renderedChildren;
 
       const content = (
         <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/SearchInput/AdvancedSearchMenu.tsx

@@ -3,7 +3,7 @@ import { Button } from '../Button';
 import { ActionGroup, Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
 import { GenerateId, KeyTypes } from '../../helpers';
-import { SearchAttribute } from './SearchInput';
+import { SearchInputSearchAttribute } from './SearchInput';
 import { Panel, PanelMain, PanelMainBody } from '../Panel';
 import { css } from '@patternfly/react-styles';
 
@@ -13,7 +13,7 @@ export interface AdvancedSearchMenuProps extends Omit<React.HTMLProps<HTMLDivEle
    */
   advancedSearchDelimiter?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the advanced search menu. */
   className?: string;
   /* Additional elements added after the attributes in the form.
@@ -161,7 +161,7 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
 
   const buildFormGroups = () => {
     const formGroups = [] as React.ReactNode[];
-    attributes.forEach((attribute: string | SearchAttribute, index: number) => {
+    attributes.forEach((attribute: string | SearchInputSearchAttribute, index: number) => {
       const display = typeof attribute === 'string' ? attribute : attribute.display;
       const queryAttr = typeof attribute === 'string' ? attribute : attribute.attr;
       if (index === 0) {

package/src/components/SearchInput/SearchInput.tsx

@@ -17,7 +17,7 @@ import { Popper } from '../../helpers';
  * be passed in as an object within an array to the search input component's attribute properrty.
  */
 
-export interface SearchAttribute {
+export interface SearchInputSearchAttribute {
   /** The search attribute's value to be provided in the search input's query string.
    * It should have no spaces and be unique for every attribute.
    */
@@ -32,11 +32,11 @@ export interface SearchAttribute {
  * the search input component's expandableInput property.
  */
 
-export interface ExpandableInput {
+export interface SearchInputExpandable {
   /** Flag to indicate if the search input is expanded. */
   isExpanded: boolean;
   /** Callback function to toggle the expandable search input. */
-  onToggleExpand: (isExpanded: boolean, event: React.SyntheticEvent<HTMLButtonElement>) => void;
+  onToggleExpand: (event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => void;
   /** An accessible label for the expandable search input toggle. */
   toggleAriaLabel: string;
 }
@@ -58,11 +58,11 @@ export interface SearchInputProps extends Omit<React.HTMLProps<HTMLDivElement>,
   /** An accessible label for the search input. */
   'aria-label'?: string;
   /** Array of attribute values used for dynamically generated advanced search. */
-  attributes?: string[] | SearchAttribute[];
+  attributes?: string[] | SearchInputSearchAttribute[];
   /** Additional classes added to the search input. */
   className?: string;
   /** Object that makes the search input expandable/collapsible. */
-  expandableInput?: ExpandableInput;
+  expandableInput?: SearchInputExpandable;
   /* Additional elements added after the attributes in the form.
    * The new form elements can be wrapped in a form group component for automatic formatting. */
   formAdditionalItems?: React.ReactNode;
@@ -285,7 +285,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
 
   const onExpandHandler = (event: React.SyntheticEvent<HTMLButtonElement>) => {
     setSearchValue('');
-    onToggleExpand(isExpanded, event);
+    onToggleExpand(event, isExpanded);
     setFocusAfterExpandChange(true);
   };
 

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

@@ -239,7 +239,7 @@ test('onToggleExpand is called if the expandable toggle is clicked', async () =>
   await user.click(screen.getByRole('button'));
 
   expect(mockOnToggleExpand).toHaveBeenCalledTimes(1);
-  expect(mockOnToggleExpand).toHaveBeenCalledWith(true, expect.objectContaining({ type: 'click' }));
+  expect(mockOnToggleExpand).toHaveBeenCalledWith(expect.objectContaining({ type: 'click' }), true);
 });
 
 test('toggleAriaLabel is applied to the expandable toggle', () => {

package/src/components/SearchInput/examples/SearchInput.md

@@ -2,7 +2,7 @@
 id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
-propComponents: ['SearchInput', 'SearchAttribute', 'ExpandableInput']
+propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
 beta: true
 ---
 

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -9,7 +9,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
     setValue(value);
   };
 
-  const onToggleExpand = (isExpanded: boolean) => {
+  const onToggleExpand = (_event: React.SyntheticEvent<HTMLButtonElement>, isExpanded: boolean) => {
     setIsExpanded(!isExpanded);
   };
 

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}>