@patternfly/react-core 4.202.23 → 4.202.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.202.23",
+  "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.23",
-    "@patternfly/react-styles": "^4.52.23",
-    "@patternfly/react-tokens": "^4.54.23",
+    "@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": "542b9e9211edd7ff4b98f947f2943711a590bb54"
+  "gitHead": "73a1735a4abfde4bad7f3e762383e4b371ea6038"
 }

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/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();
     }