@patternfly/react-core 4.237.5 → 4.237.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.237.5",
+  "version": "4.237.6",
   "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.5",
-    "@patternfly/react-styles": "^4.87.5",
-    "@patternfly/react-tokens": "^4.89.5",
+    "@patternfly/react-icons": "^4.88.6",
+    "@patternfly/react-styles": "^4.87.6",
+    "@patternfly/react-tokens": "^4.89.6",
     "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": "418c3382f60536603adfb5b23d41dfbe03ddca39"
+  "gitHead": "55fff2303d14e704bf9c55a5d5f2866e16a83a05"
 }

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/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 => {