@patternfly/react-core 4.202.21 → 4.202.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.21",
+  "version": "4.202.24",
   "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.53.21",
-    "@patternfly/react-styles": "^4.52.21",
-    "@patternfly/react-tokens": "^4.54.21",
+    "@patternfly/react-icons": "^4.53.24",
+    "@patternfly/react-styles": "^4.52.24",
+    "@patternfly/react-tokens": "^4.54.24",
     "focus-trap": "6.2.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": "15786a5112cf09f6bdbc95b067918cf24ec74ba0"
+  "gitHead": "73a1735a4abfde4bad7f3e762383e4b371ea6038"
 }

package/src/components/DataList/DataListCheck.tsx

@@ -9,9 +9,13 @@ export interface DataListCheckProps extends Omit<React.HTMLProps<HTMLInputElemen
   isValid?: boolean;
   /** Flag to show if the DataList checkbox is disabled */
   isDisabled?: boolean;
-  /** Flag to show if the DataList checkbox is checked */
+  /** Flag to show if the DataList checkbox is checked when it is controlled by React state.
+   * To make the DataList checkbox uncontrolled, instead use the checked prop, but do not use both.
+   */
   isChecked?: boolean;
-  /** Flag to set default value of DataList checkbox when it is uncontrolled by React state */
+  /** Flag to set default value of DataList checkbox when it is uncontrolled by React state.
+   * To make the DataList checkbox controlled, instead use the isChecked prop, but do not use both.
+   */
   checked?: boolean;
   /** A callback for when the DataList checkbox selection changes */
   onChange?: (checked: boolean, event: React.FormEvent<HTMLInputElement>) => void;
@@ -40,7 +44,8 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
         onChange={event => onChange(event.currentTarget.checked, event)}
         aria-invalid={!isValid}
         disabled={isDisabled}
-        checked={isChecked || checked}
+        {...(checked !== null && { defaultChecked: checked })}
+        {...(isChecked !== null && { checked: isChecked })}
       />
     </div>
   );

package/src/components/DescriptionList/DescriptionListGroup.tsx

@@ -9,7 +9,7 @@ export interface DescriptionListGroupProps extends React.HTMLProps<HTMLDivElemen
   className?: string;
 }
 
-export const DescriptionListGroup: React.FC<DescriptionListGroupProps> = ({
+export const DescriptionListGroup: React.FunctionComponent<DescriptionListGroupProps> = ({
   className,
   children,
   ...props

package/src/components/Drawer/DrawerActions.tsx

@@ -9,7 +9,7 @@ export interface DrawerActionsProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const DrawerActions: React.SFC<DrawerActionsProps> = ({
+export const DrawerActions: React.FunctionComponent<DrawerActionsProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

package/src/components/Drawer/DrawerCloseButton.tsx

@@ -13,7 +13,7 @@ export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement>
   'aria-label'?: string;
 }
 
-export const DrawerCloseButton: React.SFC<DrawerCloseButtonProps> = ({
+export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   onClose = () => undefined as any,

package/src/components/Drawer/DrawerContent.tsx

@@ -15,7 +15,7 @@ export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
 }
 
-export const DrawerContent: React.SFC<DrawerContentProps> = ({
+export const DrawerContent: React.FunctionComponent<DrawerContentProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

package/src/components/Drawer/DrawerContentBody.tsx

@@ -11,7 +11,7 @@ export interface DrawerContentBodyProps extends React.HTMLProps<HTMLDivElement>
   hasPadding?: boolean;
 }
 
-export const DrawerContentBody: React.SFC<DrawerContentBodyProps> = ({
+export const DrawerContentBody: React.FunctionComponent<DrawerContentBodyProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

package/src/components/Drawer/DrawerHead.tsx

@@ -12,7 +12,7 @@ export interface DrawerHeadProps extends React.HTMLProps<HTMLDivElement> {
   hasNoPadding?: boolean;
 }
 
-export const DrawerHead: React.SFC<DrawerHeadProps> = ({
+export const DrawerHead: React.FunctionComponent<DrawerHeadProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

package/src/components/Drawer/DrawerMain.tsx

@@ -9,7 +9,7 @@ export interface DrawerMainProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
 }
 
-export const DrawerMain: React.SFC<DrawerMainProps> = ({
+export const DrawerMain: React.FunctionComponent<DrawerMainProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

package/src/components/Drawer/DrawerPanelBody.tsx

@@ -11,7 +11,7 @@ export interface DrawerPanelBodyProps extends React.HTMLProps<HTMLDivElement> {
   hasNoPadding?: boolean;
 }
 
-export const DrawerPanelBody: React.SFC<DrawerPanelBodyProps> = ({
+export const DrawerPanelBody: React.FunctionComponent<DrawerPanelBodyProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

package/src/components/Drawer/DrawerSection.tsx

@@ -12,7 +12,7 @@ export interface DrawerSectionProps extends React.HTMLProps<HTMLDivElement> {
   colorVariant?: DrawerColorVariant | 'light-200' | 'default';
 }
 
-export const DrawerSection: React.SFC<DrawerSectionProps> = ({
+export const DrawerSection: React.FunctionComponent<DrawerSectionProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   className = '',
   children,

package/src/components/Dropdown/BadgeToggle.tsx

@@ -52,7 +52,7 @@ export const BadgeToggle: React.FunctionComponent<BadgeToggleProps> = ({
   bubbleEvent = false,
   onToggle = () => undefined as void,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: BadgeToggleProps) => (
   <Toggle

package/src/components/Dropdown/Dropdown.tsx

@@ -49,7 +49,7 @@ export interface DropdownProps extends ToggleMenuBaseProps, React.HTMLProps<HTML
 export const Dropdown: React.FunctionComponent<DropdownProps> = ({
   onSelect,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ouiaId,
   ouiaSafe,
   alignments,

package/src/components/Dropdown/DropdownItem.tsx

@@ -63,7 +63,7 @@ export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({
   listItemClassName,
   onClick,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   additionalChild,
   customChild,
   tabIndex = -1,

package/src/components/Dropdown/DropdownSeparator.tsx

@@ -14,7 +14,7 @@ export interface SeparatorProps extends React.HTMLProps<HTMLAnchorElement>, OUIA
 export const DropdownSeparator: React.FunctionComponent<SeparatorProps> = ({
   className = '',
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ouiaId,
   ouiaSafe,
   ...props

package/src/components/Dropdown/DropdownToggle.tsx

@@ -75,7 +75,7 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
   ouiaId,
   ouiaSafe,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: DropdownToggleProps) => {
   const ouiaProps = useOUIAProps(DropdownToggle.displayName, ouiaId, ouiaSafe);

package/src/components/Dropdown/KebabToggle.tsx

@@ -47,7 +47,7 @@ export const KebabToggle: React.FunctionComponent<KebabToggleProps> = ({
   bubbleEvent = false,
   onToggle = () => undefined as void,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref, // Types of Ref are different for React.FC vs React.Component
+  ref, // Types of Ref are different for React.FunctionComponent vs React.Component
   ...props
 }: KebabToggleProps) => (
   <Toggle

package/src/components/DualListSelector/DualListSelector.tsx

@@ -149,27 +149,30 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
     isTree: false,
     isDisabled: false
   };
-  private originalAvailableCopy = JSON.parse(JSON.stringify(this.props.availableOptions));
-  private originalChosenCopy = JSON.parse(JSON.stringify(this.props.chosenOptions));
 
   // If the DualListSelector uses trees, concat the two initial arrays and merge duplicate folder IDs
-  private mergedCopy = this.props.isTree
-    ? Object.values(
-        (this.originalAvailableCopy as DualListSelectorTreeItemData[])
-          .concat(this.originalChosenCopy as DualListSelectorTreeItemData[])
-          .reduce((mapObj: any, item: DualListSelectorTreeItemData) => {
-            const key = item.id;
-            if (mapObj[key]) {
-              // If map already has an item ID, add the dupe ID's children to the existing map
-              mapObj[key].children.push(...item.children);
-            } else {
-              // Else clone the item data
-              mapObj[key] = { ...item };
-            }
-            return mapObj;
-          }, {})
-      )
-    : null;
+  private createMergedCopy() {
+    const copyOfAvailable = JSON.parse(JSON.stringify(this.props.availableOptions));
+    const copyOfChosen = JSON.parse(JSON.stringify(this.props.chosenOptions));
+
+    return this.props.isTree
+      ? Object.values(
+          (copyOfAvailable as DualListSelectorTreeItemData[])
+            .concat(copyOfChosen as DualListSelectorTreeItemData[])
+            .reduce((mapObj: any, item: DualListSelectorTreeItemData) => {
+              const key = item.id;
+              if (mapObj[key]) {
+                // If map already has an item ID, add the dupe ID's children to the existing map
+                mapObj[key].children.push(...item.children);
+              } else {
+                // Else clone the item data
+                mapObj[key] = { ...item };
+              }
+              return mapObj;
+            }, {})
+        )
+      : null;
+  }
 
   constructor(props: DualListSelectorProps) {
     super(props);
@@ -275,7 +278,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
 
       const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
       const nextChosenOptions = currChosen.concat(movedOptions);
-      const newChosen = this.mergedCopy
+      const newChosen = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
         .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
 
@@ -330,7 +333,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       // Get next chosen options from current + new nodes and remap from base
       const currChosen = flattenTree(prevState.chosenOptions as DualListSelectorTreeItemData[]);
       const nextChosenOptions = currChosen.concat(prevState.availableTreeOptionsChecked);
-      const newChosen = this.mergedCopy
+      const newChosen = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
         .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextChosenOptions));
 
@@ -383,7 +386,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
         .filter(item => filterRestTreeItems(item as DualListSelectorTreeItemData, movedOptions));
       const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
       const nextAvailableOptions = currAvailable.concat(movedOptions);
-      const newAvailable = this.mergedCopy
+      const newAvailable = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
         .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
 
@@ -434,7 +437,7 @@ export class DualListSelector extends React.Component<DualListSelectorProps, Dua
       // Get next chosen options from current and remap from base
       const currAvailable = flattenTree(prevState.availableOptions as DualListSelectorTreeItemData[]);
       const nextAvailableOptions = currAvailable.concat(prevState.chosenTreeOptionsChecked);
-      const newAvailable = this.mergedCopy
+      const newAvailable = this.createMergedCopy()
         .map(opt => Object.assign({}, opt))
         .filter(item => filterTreeItemsWithoutFolders(item as DualListSelectorTreeItemData, nextAvailableOptions));
 

package/src/components/OverflowMenu/OverflowMenuContent.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuContentProps extends React.HTMLProps<HTMLDivElement
   isPersistent?: boolean;
 }
 
-export const OverflowMenuContent: React.SFC<OverflowMenuContentProps> = ({
+export const OverflowMenuContent: React.FunctionComponent<OverflowMenuContentProps> = ({
   className,
   children,
   isPersistent

package/src/components/OverflowMenu/OverflowMenuControl.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuControlProps extends React.HTMLProps<HTMLDivElement
   hasAdditionalOptions?: boolean;
 }
 
-export const OverflowMenuControl: React.SFC<OverflowMenuControlProps> = ({
+export const OverflowMenuControl: React.FunctionComponent<OverflowMenuControlProps> = ({
   className,
   children,
   hasAdditionalOptions,

package/src/components/OverflowMenu/OverflowMenuDropdownItem.tsx

@@ -9,7 +9,7 @@ export interface OverflowMenuDropdownItemProps extends DropdownItemProps {
   index?: number;
 }
 
-export const OverflowMenuDropdownItem: React.SFC<OverflowMenuDropdownItemProps> = ({
+export const OverflowMenuDropdownItem: React.FunctionComponent<OverflowMenuDropdownItemProps> = ({
   children,
   isShared = false,
   index,

package/src/components/OverflowMenu/OverflowMenuGroup.tsx

@@ -14,7 +14,7 @@ export interface OverflowMenuGroupProps extends React.HTMLProps<HTMLDivElement>
   groupType?: 'button' | 'icon';
 }
 
-export const OverflowMenuGroup: React.FC<OverflowMenuGroupProps> = ({
+export const OverflowMenuGroup: React.FunctionComponent<OverflowMenuGroupProps> = ({
   className,
   children,
   isPersistent = false,

package/src/components/OverflowMenu/OverflowMenuItem.tsx

@@ -12,7 +12,7 @@ export interface OverflowMenuItemProps extends React.HTMLProps<HTMLDivElement> {
   isPersistent?: boolean;
 }
 
-export const OverflowMenuItem: React.SFC<OverflowMenuItemProps> = ({
+export const OverflowMenuItem: React.FunctionComponent<OverflowMenuItemProps> = ({
   className,
   children,
   isPersistent = false

package/src/components/Select/SelectToggle.tsx

@@ -100,11 +100,14 @@ export class SelectToggle extends React.Component<SelectToggleProps> {
   }
 
   onDocClick = (event: Event) => {
-    const { parentRef, menuRef, isOpen, onToggle, onClose } = this.props;
+    const { parentRef, menuRef, footerRef, isOpen, onToggle, onClose } = this.props;
     const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target as Node);
     const clickedWithinMenu =
       menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target as Node);
-    if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
+    const clickedWithinFooter =
+      footerRef && footerRef.current && footerRef.current.contains && footerRef.current.contains(event.target as Node);
+
+    if (isOpen && !(clickedOnToggle || clickedWithinMenu || clickedWithinFooter)) {
       onToggle(false, event);
       onClose();
     }

package/src/components/Tabs/TabContent.tsx

@@ -28,7 +28,7 @@ const variantStyle = {
   light300: styles.modifiers.light_300
 };
 
-const TabContentBase: React.FC<TabContentProps> = ({
+const TabContentBase: React.FunctionComponent<TabContentProps> = ({
   id,
   activeKey,
   'aria-label': ariaLabel,