@patternfly/react-core 4.236.4 → 4.236.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.236.4",
+  "version": "4.236.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.87.4",
-    "@patternfly/react-styles": "^4.86.4",
-    "@patternfly/react-tokens": "^4.88.4",
+    "@patternfly/react-icons": "^4.87.7",
+    "@patternfly/react-styles": "^4.86.7",
+    "@patternfly/react-tokens": "^4.88.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": "c1df72da34f893c6edb6d68d7bf2083bb2d7037c"
+  "gitHead": "9146bf58545f6e745af4b8ba31a22e1da35b077e"
 }

package/src/components/MenuToggle/MenuToggle.tsx

@@ -172,7 +172,7 @@ export class MenuToggleBase extends React.Component<MenuToggleProps> {
   }
 }
 
-export const MenuToggle = React.forwardRef<MenuToggleElement, MenuToggleProps>((props, ref) => (
+export const MenuToggle = React.forwardRef((props: MenuToggleProps, ref: React.Ref<MenuToggleElement>) => (
   <MenuToggleBase innerRef={ref} {...props} />
 ));
 

package/src/components/Page/Page.tsx

@@ -197,8 +197,17 @@ export class Page extends React.Component<PageProps, PageState> {
     if (mobileView !== this.state.mobileView) {
       this.setState({ mobileView });
     }
-    this.pageRef.current &&
-      this.setState({ width: this.pageRef.current.clientWidth, height: this.pageRef.current.clientHeight });
+    if (this.pageRef?.current) {
+      const currentWidth = this.pageRef.current.clientWidth;
+      const currentHeight = this.pageRef.current.clientHeight;
+
+      if (this.state.width !== currentWidth) {
+        this.setState({ width: currentWidth });
+      }
+      if (this.state.height !== currentHeight) {
+        this.setState({ height: currentHeight });
+      }
+    }
   };
 
   handleResize = debounce(this.resize, 250);

package/src/helpers/resizeObserver.tsx

@@ -56,11 +56,22 @@ import { canUseDOM } from './util';
  *   );
  * }
  *
+ * Example 3 - With debounced method passed in:
+ *
+ * public componentDidMount() {
+ *   this.observer = getResizeObserver(this.inputRef.current, debounce(this.handleResize, 250), false);
+ * }
+ *
  * @param {Element} containerRefElement The container reference to observe
  * @param {Function} handleResize The function to call for resize events
+ * @param {boolean} useRequestAnimationFrame Whether to pass the handleResize function as a callback to requestAnimationFrame. Pass in false when the function passed in is debounced. Defaults to true.
  * @return {Function} The function used to unobserve resize events
  */
-export const getResizeObserver = (containerRefElement: Element, handleResize: () => void) => {
+export const getResizeObserver = (
+  containerRefElement: Element,
+  handleResize: () => void,
+  useRequestAnimationFrame: boolean = true
+) => {
   let unobserve: any;
 
   if (canUseDOM) {
@@ -69,11 +80,18 @@ export const getResizeObserver = (containerRefElement: Element, handleResize: ()
     if (containerRefElement && ResizeObserver) {
       const resizeObserver = new ResizeObserver((entries: any) => {
         // Wrap resize function in requestAnimationFrame to avoid "ResizeObserver loop limit exceeded" errors
-        window.requestAnimationFrame(() => {
+        if (useRequestAnimationFrame) {
+          window.requestAnimationFrame(() => {
+            if (Array.isArray(entries) && entries.length > 0) {
+              handleResize();
+            }
+          });
+          // Avoid wrapping function in requestAnimationFrame if the function is debounced
+        } else {
           if (Array.isArray(entries) && entries.length > 0) {
             handleResize();
           }
-        });
+        }
       });
       resizeObserver.observe(containerRefElement);
       unobserve = () => resizeObserver.unobserve(containerRefElement);