@patternfly/react-core 4.237.4 → 4.237.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.237.4",
+  "version": "4.237.7",
   "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",
@@ -44,9 +44,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.88.4",
-    "@patternfly/react-styles": "^4.87.4",
-    "@patternfly/react-tokens": "^4.89.4",
+    "@patternfly/react-icons": "^4.88.7",
+    "@patternfly/react-styles": "^4.87.7",
+    "@patternfly/react-tokens": "^4.89.7",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -70,5 +70,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "c45164ec148b97dd7fe65152852de24813fba68e"
+  "gitHead": "6a8c488ab5de48d31ab8070271ebf17f9e6a625a"
 }

package/src/components/Button/examples/Button.md

@@ -96,21 +96,9 @@ Router links can be used for in-app linking in React environments to prevent pag
 
 Buttons that are aria-disabled are similar to normal disabled buttons, except they can receive focus. Every button variant can be aria-disabled using the `isAriaDisabled` property.
 
-```ts file="./ButtonAriaDisabled.tsx"
-```
-
-### Aria-disabled with tooltip
-
-Unlike normal disabled buttons, aria-disabled buttons can support tooltips.
-
-```ts file="./ButtonAriaDisabledTooltip.tsx"
-```
-
-### Aria-disabled link as button with tooltip
-
-Aria-disabled buttons can operate as links, which also support tooltips.
+Unlike normal disabled buttons, aria-disabled buttons can support tooltips. Furthermore, aria-disabled buttons can operate as links, which also support tooltips.
 
-```ts file="./ButtonAriaDisabledLinkTooltip.tsx"
+```ts file="./ButtonAriaDisabled.tsx"
 ```
 
 ### Button with count
@@ -118,4 +106,4 @@ Aria-disabled buttons can operate as links, which also support tooltips.
 Buttons can display a `count` in the form of a badge to indicate some value or number by passing in the `countOptions` prop as a `BadgeCountObject` object. The `BadgeCountObject` object will handle `count`, `isRead`, and `className` props for the badge count.
 
 ```ts file="./ButtonWithCount.tsx" isBeta
-```
+```

package/src/components/Button/examples/ButtonAriaDisabled.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { Button } from '@patternfly/react-core';
+import { Button, Tooltip } from '@patternfly/react-core';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const ButtonAriaDisabled: React.FunctionComponent = () => (
   <React.Fragment>
-    <Button isAriaDisabled>Primary aria disabled</Button> <Button isAriaDisabled>Secondary aria disabled</Button>{' '}
+    <Button isAriaDisabled>Primary aria disabled</Button>
+    <Button isAriaDisabled>Secondary aria disabled</Button>{' '}
     <Button variant="secondary" isDanger isAriaDisabled>
       Danger secondary aria disabled
     </Button>{' '}
@@ -35,5 +36,17 @@ export const ButtonAriaDisabled: React.FunctionComponent = () => (
     <Button isAriaDisabled variant="control">
       Control aria disabled
     </Button>
+    <br />
+    <br />
+    <Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.">
+      <Button isAriaDisabled variant="secondary">
+        Secondary button to core docs
+      </Button>
+    </Tooltip>{' '}
+    <Tooltip content="Aria-disabled link as button with tooltip">
+      <Button component="a" isAriaDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
+        Tertiary link as button to core docs
+      </Button>
+    </Tooltip>
   </React.Fragment>
 );

package/src/components/Checkbox/Checkbox.tsx

@@ -3,20 +3,23 @@ import styles from '@patternfly/react-styles/css/components/Check/check';
 import { css } from '@patternfly/react-styles';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getDefaultOUIAId, getOUIAProps, OUIAProps } from '../../helpers';
+import { ASTERISK } from '../../helpers/htmlConstants';
 
 export interface CheckboxProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'type' | 'onChange' | 'disabled' | 'label'>,
     OUIAProps {
-  /** Additional classes added to the Checkbox. */
+  /** Additional classes added to the checkbox. */
   className?: string;
-  /** Flag to show if the Checkbox selection is valid or invalid. */
+  /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
-  /** Flag to show if the Checkbox is disabled. */
+  /** Flag to show if the checkbox is disabled. */
   isDisabled?: boolean;
-  /** Flag to show if the Checkbox is checked. If null, the checkbox will be indeterminate (partially checked). */
+  /** Flag to show if the checkbox is required. */
+  isRequired?: boolean;
+  /** Flag to show if the checkbox is checked. If null, the checkbox will be indeterminate (partially checked). */
   isChecked?: boolean | null;
   checked?: boolean;
-  /** A callback for when the Checkbox selection changes. */
+  /** A callback for when the checkbox selection changes. */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
   /** Label text of the checkbox. */
   label?: React.ReactNode;
@@ -45,6 +48,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
     className: '',
     isValid: true,
     isDisabled: false,
+    isRequired: false,
     isChecked: false,
     onChange: defaultOnChange,
     ouiaSafe: true,
@@ -69,6 +73,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       onChange,
       isValid,
       isDisabled,
+      isRequired,
       isChecked,
       label,
       checked,
@@ -106,6 +111,7 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
           aria-invalid={!isValid}
           aria-label={ariaLabel}
           disabled={isDisabled}
+          required={isRequired}
           ref={elem => elem && (elem.indeterminate = isChecked === null)}
           {...checkedProps}
           {...getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}
@@ -113,6 +119,11 @@ export class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         {label && (
           <label className={css(styles.checkLabel, isDisabled && styles.modifiers.disabled)} htmlFor={props.id}>
             {label}
+            {isRequired && (
+              <span className={css(styles.checkLabelRequired)} aria-hidden="true">
+                {ASTERISK}
+              </span>
+            )}
           </label>
         )}
         {description && <span className={css(styles.checkDescription)}>{description}</span>}

package/src/components/Checkbox/examples/Checkbox.md

@@ -43,3 +43,8 @@ import './checkbox.css';
 
 ```ts file='./CheckboxStandaloneInput.tsx'
 ```
+
+### Required input
+
+```ts file='./CheckboxRequired.tsx'
+```

package/src/components/Checkbox/examples/CheckboxRequired.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Checkbox } from '@patternfly/react-core';
+
+export const CheckboxRequired: React.FunctionComponent = () => (
+  <Checkbox label="Required checkbox" isRequired id="required-check" name="required-check" />
+);

package/src/components/MenuToggle/MenuToggle.tsx

@@ -149,6 +149,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
             aria-expanded={isExpanded}
             aria-label={ariaLabel}
             disabled={isDisabled}
+            onClick={onClick}
             {...otherProps}
           >
             {toggleControls}

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

@@ -1,9 +1,11 @@
 import React from 'react';
-import { render } from '@testing-library/react';
 import { MenuToggle } from '../MenuToggle';
+import { MenuToggleCheckbox } from '../MenuToggleCheckbox';
 import { Badge } from '../../Badge';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 describe('menu toggle', () => {
   test('renders successfully', () => {
@@ -54,4 +56,28 @@ describe('menu toggle', () => {
     const { asFragment } = render(<MenuToggle badge={<Badge>badge</Badge>}>Toggle</MenuToggle>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('split toggle passes onClick', async () => {
+    const mockClick = jest.fn();
+    const user = userEvent.setup();
+
+    render(<MenuToggle
+      onClick={mockClick}
+      splitButtonOptions={{
+        items: [
+          <MenuToggleCheckbox
+            id="split-button-checkbox-with-text-disabled-example"
+            key="split-checkbox-with-text-disabled"
+            aria-label="Select all"
+          >
+            10 selected
+          </MenuToggleCheckbox>
+        ]
+      }}
+      aria-label="Menu toggle with checkbox split button and text"
+    />);
+
+    await user.click(screen.getByRole(`button`) as Element);
+    expect(mockClick).toHaveBeenCalled();
+  });
 });

package/src/components/TextArea/TextArea.tsx

@@ -54,6 +54,21 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     'aria-label': null as string
   };
 
+  inputRef = React.createRef<HTMLTextAreaElement>();
+
+  private setAutoHeight = (field: HTMLTextAreaElement) => {
+    field.style.setProperty(heightToken.name, 'inherit');
+    const computed = window.getComputedStyle(field);
+    // Calculate the height
+    const height =
+      parseInt(computed.getPropertyValue('border-top-width')) +
+      parseInt(computed.getPropertyValue('padding-top')) +
+      field.scrollHeight +
+      parseInt(computed.getPropertyValue('padding-bottom')) +
+      parseInt(computed.getPropertyValue('border-bottom-width'));
+    field.style.setProperty(heightToken.name, `${height}px`);
+  };
+
   constructor(props: TextAreaProps) {
     super(props);
     if (!props.id && !props['aria-label']) {
@@ -62,20 +77,19 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     }
   }
 
+  componentDidMount(): void {
+    const inputRef = this.props.innerRef || this.inputRef;
+    if (this.props.autoResize && canUseDOM) {
+      const field = inputRef.current;
+      this.setAutoHeight(field);
+    }
+  }
+
   private handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     // https://gomakethings.com/automatically-expand-a-textarea-as-the-user-types-using-vanilla-javascript/
     const field = event.currentTarget;
     if (this.props.autoResize && canUseDOM) {
-      field.style.setProperty(heightToken.name, 'inherit');
-      const computed = window.getComputedStyle(field);
-      // Calculate the height
-      const height =
-        parseInt(computed.getPropertyValue('border-top-width')) +
-        parseInt(computed.getPropertyValue('padding-top')) +
-        field.scrollHeight +
-        parseInt(computed.getPropertyValue('padding-bottom')) +
-        parseInt(computed.getPropertyValue('border-bottom-width'));
-      field.style.setProperty(heightToken.name, `${height}px`);
+      this.setAutoHeight(field);
     }
     if (this.props.onChange) {
       this.props.onChange(field.value, event);
@@ -118,14 +132,14 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
         required={isRequired}
         disabled={isDisabled || disabled}
         readOnly={isReadOnly || readOnly}
-        ref={innerRef}
+        ref={innerRef || this.inputRef}
         {...props}
       />
     );
   }
 }
 
-export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>((props, ref) => (
+export const TextArea = React.forwardRef((props: TextAreaProps, ref: React.Ref<HTMLTextAreaElement>) => (
   <TextAreaBase {...props} innerRef={ref as React.MutableRefObject<any>} />
 ));
 TextArea.displayName = 'TextArea';

package/src/components/TextArea/examples/TextArea.md

@@ -6,7 +6,9 @@ propComponents: ['TextArea']
 ---
 
 ## Examples
+
 ### Basic
+
 ```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
@@ -32,6 +34,7 @@ class SimpleTextArea extends React.Component {
 ```
 
 ### Invalid
+
 ```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
@@ -42,7 +45,7 @@ class InvalidTextArea extends React.Component {
     this.state = {
       value: ''
     };
-    
+
     this.handleInvalidTextAreaChange = value => {
       this.setState({ value });
     };
@@ -65,6 +68,7 @@ class InvalidTextArea extends React.Component {
 ```
 
 ### Validated
+
 ```js
 import React from 'react';
 import { Form, FormGroup, TextArea } from '@patternfly/react-core';
@@ -78,28 +82,30 @@ class InvalidTextArea extends React.Component {
       validated: 'default',
       helperText: 'Share your thoughts.'
     };
-    
+
     this.simulateNetworkCall = callback => {
       setTimeout(callback, 2000);
-    }
-    
-    this.handleTextAreaChange = value => {
+    };
 
-      this.setState({
-        value,
-        validated: 'default',
-        helperText: 'Validating...',
-      },
+    this.handleTextAreaChange = value => {
+      this.setState(
+        {
+          value,
+          validated: 'default',
+          helperText: 'Validating...'
+        },
         this.simulateNetworkCall(() => {
           if (value && value.length > 0) {
             if (value.length >= 10) {
-              this.setState({validated: 'success', helperText: 'Thanks for your comments!'});
+              this.setState({ validated: 'success', helperText: 'Thanks for your comments!' });
             } else {
-              this.setState({validated: 'error', invalidText: 'Your being too brief, please enter at least 10 characters.'});
+              this.setState({
+                validated: 'error',
+                invalidText: 'Your being too brief, please enter at least 10 characters.'
+              });
             }
-          }
-          else {
-            this.setState({validated: 'warning', helperText: 'You must have something to say'});
+          } else {
+            this.setState({ validated: 'warning', helperText: 'You must have something to say' });
           }
         })
       );
@@ -134,6 +140,7 @@ class InvalidTextArea extends React.Component {
 ```
 
 ### Vertically resizable text area
+
 ```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
@@ -153,12 +160,20 @@ class VerticalResizeTextArea extends React.Component {
   render() {
     const { value } = this.state;
 
-    return <TextArea value={value} onChange={this.handleTextAreaChange} resizeOrientation='vertical' aria-label="text vertical resize example" />;
+    return (
+      <TextArea
+        value={value}
+        onChange={this.handleTextAreaChange}
+        resizeOrientation="vertical"
+        aria-label="text vertical resize example"
+      />
+    );
   }
 }
 ```
 
 ### Horizontally resizable text area
+
 ```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
@@ -178,33 +193,43 @@ class HorizontalResizeTextArea extends React.Component {
   render() {
     const { value } = this.state;
 
-    return <TextArea value={value} onChange={this.handleTextAreaChange} resizeOrientation='horizontal' aria-label="text horizontal resize example" />;
+    return (
+      <TextArea
+        value={value}
+        onChange={this.handleTextAreaChange}
+        resizeOrientation="horizontal"
+        aria-label="text horizontal resize example"
+      />
+    );
   }
 }
 ```
 
 ### Uncontrolled
+
 ```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
 
-<TextArea defaultValue="default value" aria-label="uncontrolled text area example" />
+<TextArea defaultValue="default value" aria-label="uncontrolled text area example" />;
 ```
 
 ### Disabled
+
 ```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
 
-<TextArea aria-label="disabled text area example" isDisabled />
+<TextArea aria-label="disabled text area example" isDisabled />;
 ```
 
 ### Auto resizing
+
 ```js
 import React from 'react';
 import { TextArea } from '@patternfly/react-core';
 
-<TextArea aria-label="auto resizing text area example" autoResize />
+<TextArea aria-label="auto resizing text area example" autoResize />;
 ```
 
 ### Icon sprite variants
@@ -249,4 +274,5 @@ IconSpriteTextArea = () => {
       />
     </>
   );
-};
+};
+```

package/src/components/TreeView/examples/TreeView.md

@@ -20,12 +20,15 @@ class DefaultTreeView extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { activeItems: {}, allExpanded: null };
+    this.state = { activeItems: [], allExpanded: null };
 
     this.onSelect = (evt, treeViewItem) => {
-      this.setState({
-        activeItems: [treeViewItem]
-      });
+      // Ignore folders for selection
+      if (treeViewItem && !treeViewItem.children) {
+        this.setState({
+          activeItems: [treeViewItem]
+        });
+      }
     };
 
     this.onToggle = evt => {
@@ -288,9 +291,12 @@ class SearchTreeView extends React.Component {
     this.state = { activeItems: {}, filteredItems: this.options, isFiltered: null };
 
     this.onSelect = (evt, treeViewItem) => {
-      this.setState({
-        activeItems: [treeViewItem]
-      });
+      // Ignore folders for selection
+      if (treeViewItem && !treeViewItem.children) {
+        this.setState({
+          activeItems: [treeViewItem]
+        });
+      }
     };
 
     this.onSearch = evt => {
@@ -575,9 +581,12 @@ class IconTreeView extends React.Component {
     this.state = { activeItems: {} };
 
     this.onSelect = (evt, treeViewItem) => {
-      this.setState({
-        activeItems: [treeViewItem]
-      });
+      // Ignore folders for selection
+      if (treeViewItem && !treeViewItem.children) {
+        this.setState({
+          activeItems: [treeViewItem]
+        });
+      }
     };
   }
 
@@ -668,9 +677,12 @@ class BadgesTreeView extends React.Component {
     this.state = { activeItems: {} };
 
     this.onSelect = (evt, treeViewItem) => {
-      this.setState({
-        activeItems: [treeViewItem]
-      });
+      // Ignore folders for selection
+      if (treeViewItem && !treeViewItem.children) {
+        this.setState({
+          activeItems: [treeViewItem]
+        });
+      }
     };
   }
 
@@ -753,9 +765,12 @@ class CustomBadgesTreeView extends React.Component {
     this.state = { activeItems: {} };
 
     this.onSelect = (evt, treeViewItem) => {
-      this.setState({
-        activeItems: [treeViewItem]
-      });
+      // Ignore folders for selection
+      if (treeViewItem && !treeViewItem.children) {
+        this.setState({
+          activeItems: [treeViewItem]
+        });
+      }
     };
   }
 
@@ -853,9 +868,12 @@ class IconTreeView extends React.Component {
     this.state = { activeItems: {}, isOpen: false };
 
     this.onSelect = (evt, treeViewItem) => {
-      this.setState({
-        activeItems: [treeViewItem]
-      });
+      // Ignore folders for selection
+      if (treeViewItem && !treeViewItem.children) {
+        this.setState({
+          activeItems: [treeViewItem]
+        });
+      }
     };
 
     this.onToggle = isOpen => {

package/src/components/Button/examples/ButtonAriaDisabledLinkTooltip.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Button, Tooltip } from '@patternfly/react-core';
-
-export const ButtonAriaDisabledLinkTooltip: React.FunctionComponent = () => (
-  <Tooltip content="Aria-disabled link as button with tooltip">
-    <Button component="a" isAriaDisabled href="https://pf4.patternfly.org/" target="_blank" variant="tertiary">
-      Tertiary link as button to core docs
-    </Button>
-  </Tooltip>
-);

package/src/components/Button/examples/ButtonAriaDisabledTooltip.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Button, Tooltip } from '@patternfly/react-core';
-
-export const ButtonAriaDisabledTooltip: React.FunctionComponent = () => (
-  <Tooltip content="Aria-disabled buttons are like disabled buttons, but focusable. Allows for tooltip support.">
-    <Button isAriaDisabled variant="secondary">
-      Secondary button to core docs
-    </Button>
-  </Tooltip>
-);