@patternfly/react-core 4.224.4 → 4.224.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.224.4",
+  "version": "4.224.5",
   "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.75.4",
-    "@patternfly/react-styles": "^4.74.4",
-    "@patternfly/react-tokens": "^4.76.4",
+    "@patternfly/react-icons": "^4.75.5",
+    "@patternfly/react-styles": "^4.74.5",
+    "@patternfly/react-tokens": "^4.76.5",
     "focus-trap": "6.9.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": "6bb7572d64d0b745ff5735006ec72d8eb4a432bc"
+  "gitHead": "90d8af769386bbe44a52b1fc1169ab991666d15d"
 }

package/src/components/NotificationBadge/examples/NotificationBadge.md

@@ -8,79 +8,11 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import './notificationBadge.css';
 
 ## Examples
-### Basic
-```js
-import React from 'react';
-import { NotificationBadge } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-class SimpleNotificationBadge extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      unreadVariant: 'unread',
-      attentionVariant: 'attention'
-    };
-    this.onFirstClick = () => {
-      this.setState({
-        unreadVariant: 'read'
-      });
-    };
-    this.onSecondClick = () => {
-      this.setState({
-        attentionVariant: 'read'
-      });
-    };
-  }
 
-  render() {
-    const { unreadVariant, attentionVariant } = this.state;
-    return (
-      <div className="pf-t-dark">
-        <NotificationBadge variant={unreadVariant} onClick={this.onFirstClick} aria-label="First notifications" />
-        <NotificationBadge variant={attentionVariant} onClick={this.onSecondClick} aria-label="Second notifications" />
-      </div>
-    );
-  }
-}
+### Basic
+```ts file='./NotificationBadgeBasic.tsx' 
 ```
 
-## Examples
 ### With count
-```js
-import React from 'react';
-import { NotificationBadge } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-class NotificationBadgeWithCount extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      firstVariant: 'unread',
-      firstCount: 30,
-      secondVariant: 'attention',
-      secondCount: 30
-    };
-    this.onFirstClick = () => {
-      this.setState({
-        firstVariant: 'read',
-      });
-    };
-    this.onSecondClick = () => {
-      this.setState({
-        secondVariant: 'read'
-      });
-    };
-  }
-
-  render() {
-    const { firstVariant, firstCount, secondVariant, secondCount } = this.state;
-    return (
-      <div className="pf-t-dark">
-        <NotificationBadge variant={firstVariant} onClick={this.onFirstClick} aria-label="First notifications" count={firstCount} />
-        <NotificationBadge variant={secondVariant} onClick={this.onSecondClick} aria-label="Second notifications" count={secondCount} />
-      </div>
-    );
-  }
-}
-```
+```ts file='./NotificationBadgeWithCount.tsx' 
+```

package/src/components/NotificationBadge/examples/NotificationBadgeBasic.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
+
+export const SimpleNotificationBadge: React.FunctionComponent = () => {
+  const [unreadVariant, setUnreadVariant] = React.useState(NotificationBadgeVariant.unread);
+  const [attentionVariant, setAttentionVariant] = React.useState(NotificationBadgeVariant.attention);
+
+  const onFirstClick = (value: NotificationBadgeVariant) => {
+    setUnreadVariant(value);
+  };
+
+  const onSecondClick = (value: NotificationBadgeVariant) => {
+    setAttentionVariant(value);
+  };
+
+  return (
+    <div className="pf-t-dark">
+      <NotificationBadge
+        variant={unreadVariant}
+        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
+        aria-label="First notifications"
+      />
+      <NotificationBadge
+        variant={attentionVariant}
+        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
+        aria-label="Second notifications"
+      />
+    </div>
+  );
+};

package/src/components/NotificationBadge/examples/NotificationBadgeWithCount.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { NotificationBadge, NotificationBadgeVariant } from '@patternfly/react-core';
+
+export const NotificationBadgeWithCount: React.FunctionComponent = () => {
+  const [firstVariant, setFirstVariant] = React.useState(NotificationBadgeVariant.unread);
+  const [firstVariantCount, setFirstVariantCount] = React.useState(30);
+  const [secondVariant, setSecondVariant] = React.useState(NotificationBadgeVariant.attention);
+  const [secondVariantCount, setSecondVariantCount] = React.useState(30);
+
+  const onFirstClick = (value: NotificationBadgeVariant) => {
+    setFirstVariant(value);
+    setFirstVariantCount(10);
+  };
+
+  const onSecondClick = (value: NotificationBadgeVariant) => {
+    setSecondVariant(value);
+    setSecondVariantCount(10);
+  };
+
+  return (
+    <div className="pf-t-dark">
+      <NotificationBadge
+        variant={firstVariant}
+        onClick={() => onFirstClick(NotificationBadgeVariant.read)}
+        aria-label="First notifications"
+        count={firstVariantCount}
+      />
+      <NotificationBadge
+        variant={secondVariant}
+        onClick={() => onSecondClick(NotificationBadgeVariant.read)}
+        aria-label="Second notifications"
+        count={secondVariantCount}
+      />
+    </div>
+  );
+};

package/src/components/NumberInput/NumberInput.tsx

@@ -87,6 +87,16 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   const keyDownHandler =
     inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
 
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    event.target.value = Number(event.target.value).toString();
+    if (onChange) {
+      onChange(event);
+    }
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
   return (
     <div
       className={css(styles.numberInput, className)}
@@ -119,7 +129,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
           aria-label={inputAriaLabel}
           {...(isDisabled && { disabled: isDisabled })}
           {...(onChange && { onChange })}
-          {...(onBlur && { onBlur })}
+          onBlur={handleBlur}
           {...(!onChange && { readOnly: true })}
           {...inputProps}
           onKeyDown={keyDownHandler}

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

@@ -1,6 +1,7 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { NumberInput } from '../NumberInput';
+import userEvent from '@testing-library/user-event';
 
 describe('numberInput', () => {
   test('renders defaults & extra props', () => {
@@ -60,4 +61,96 @@ describe('numberInput', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('renders negative value', () => {
+    render(<NumberInput value={-999} />);
+    expect(screen.getByDisplayValue('-999')).toBeInTheDocument();
+  });
+
+  test('renders decimal value', () => {
+    render(<NumberInput value={5.5} />);
+    expect(screen.getByDisplayValue('5.5')).toBeInTheDocument();
+  });
+
+  test('renders negative decimal value', () => {
+    render(<NumberInput value={-5.2} />);
+    expect(screen.getByDisplayValue('-5.2')).toBeInTheDocument();
+  });
+
+  test('does not call onChange callback when the input does not change', () => {
+    const onChangeMock = jest.fn();
+
+    render(<NumberInput onChange={onChangeMock}>5</NumberInput>);
+
+    expect(onChangeMock).not.toHaveBeenCalled();
+  });
+
+  test('calls onChange callback when input changes', () => {
+    const onChangeMock = jest.fn();
+    render(<NumberInput onChange={onChangeMock}>55</NumberInput>);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '55');
+
+    expect(onChangeMock).toHaveBeenCalledTimes(2);
+  });
+
+  test('does not call onBlur callback when input does not lose focus', () => {
+    const onBlurMock = jest.fn();
+
+    render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.click(input);
+
+    expect(onBlurMock).not.toHaveBeenCalled();
+  });
+
+  test('calls onBlur callback when input loses focus', () => {
+    const onBlurMock = jest.fn();
+
+    render(<NumberInput onBlur={onBlurMock}>5</NumberInput>);
+
+    const input = screen.getByRole('spinbutton');
+    userEvent.click(input);
+    userEvent.click(document.body);
+
+    expect(onBlurMock).toHaveBeenCalledTimes(1);
+  });
+
+  test('removes leading zeros from a positive whole number', () => {
+    render(<NumberInput value={10} onChange={() => {}} />);
+  
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '{arrowleft}{arrowleft}0');
+    expect(input).toHaveDisplayValue('010');
+  
+    userEvent.click(document.body);
+  
+    expect(input).toHaveDisplayValue('10');
+  });
+
+  test('removes leading zeros from a negative whole number', () => {
+    render(<NumberInput value={-18} onChange={() => {}} />);
+  
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '{arrowleft}{arrowleft}0');
+    expect(input).toHaveDisplayValue('-018');
+  
+    userEvent.click(document.body);
+  
+    expect(input).toHaveDisplayValue('-18');
+  });
+
+  test('removes leading zeros from a decimal number', () => {
+    render(<NumberInput value={47.01} onChange={() => {}} />);
+  
+    const input = screen.getByRole('spinbutton');
+    userEvent.type(input, '{arrowleft}{arrowleft}{arrowleft}{arrowleft}{arrowleft}0');
+    expect(input).toHaveDisplayValue('047.01');
+  
+    userEvent.click(document.body);
+  
+    expect(input).toHaveDisplayValue('47.01');
+  });
 });

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

@@ -96,7 +96,6 @@ class UnitNumberInput extends React.Component {
     };
 
     this.onChange2 = event => {
-      console.log(event.target.value);
       this.setState({
         value2: event.target.value
       });