@patternfly/react-table 4.37.7 → 4.37.11

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.37.11 (2021-11-01)
+
+
+### Bug Fixes
+
+* **AboutModal:** allow to disable FocusTrap ([#6509](https://github.com/patternfly/patternfly-react/issues/6509)) ([72536e1](https://github.com/patternfly/patternfly-react/commit/72536e1f73641ff3f19f865f08dbb41ad0ee7b9f))
+
+
+
+
+
+## 4.37.10 (2021-10-29)
+
+
+### Bug Fixes
+
+* **Banner:** forward props ([#6511](https://github.com/patternfly/patternfly-react/issues/6511)) ([e36c890](https://github.com/patternfly/patternfly-react/commit/e36c89077afa82340994c0e3c0fc929e601e01bc))
+
+
+
+
+
+## 4.37.9 (2021-10-28)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## 4.37.8 (2021-10-27)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
 ## 4.37.7 (2021-10-27)
 
 

package/dist/umd/react-table.js

@@ -4441,6 +4441,94 @@
         }));
     };
 
+    /**
+     * This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver
+     * or the given containerRef are not available, a window resize event listener is used by default.
+     *
+     * Example 1:
+     *
+     * private containerRef = React.createRef<HTMLDivElement>();
+     * private observer: any = () => {};
+     *
+     * public componentDidMount() {
+     *   this.observer = getResizeObserver(this.containerRef.current, this.handleResize);
+     * }
+     *
+     * public componentWillUnmount() {
+     *   this.observer();
+     * }
+     *
+     * private handleResize = () => {
+     *   if (this.containerRef.current && this.containerRef.current.clientWidth) {
+     *     this.setState({ width: this.containerRef.current.clientWidth });
+     *   }
+     * };
+     *
+     * public render() {
+     *   return (
+     *     <div ref={this.containerRef} >
+     *       <Chart width={this.state.width} ... />
+     *     </div>
+     *   );
+     * }
+     *
+     * Example 2:
+     *
+     * private inputRef = React.createRef<HTMLInputElement>();
+     * private observer: any = () => {};
+     *
+     * public componentDidMount() {
+     *   this.observer = getResizeObserver(this.inputRef.current, this.handleResize);
+     * }
+     *
+     * public componentWillUnmount() {
+     *   this.observer();
+     * }
+     *
+     * private handleResize = () => {
+     *   if (this.inputRef.current) {
+     *     trimLeft(inputRef.current, String(this.props.value));
+     *   }
+     * };
+     *
+     * public render() {
+     *   return (
+     *     <input ref={this.inputRef} ... />
+     *   );
+     * }
+     *
+     * @param {React.RefObject} containerRef The container reference to observe
+     * @param {Function} handleResize The function to call for resize events
+     * @return {Function} The function used to unobserve resize events
+     */
+    const getResizeObserver = (containerRef, handleResize) => {
+        let unobserve;
+        if (canUseDOM) {
+            const { ResizeObserver } = window;
+            if (containerRef && ResizeObserver) {
+                const resizeObserver = new ResizeObserver((entries) => {
+                    // Wrap resize function in requestAnimationFrame to avoid "ResizeObserver loop limit exceeded" errors
+                    window.requestAnimationFrame(() => {
+                        if (Array.isArray(entries) && entries.length > 0) {
+                            handleResize();
+                        }
+                    });
+                });
+                resizeObserver.observe(containerRef);
+                unobserve = () => resizeObserver.unobserve(containerRef);
+            }
+            else {
+                window.addEventListener('resize', handleResize);
+                unobserve = () => window.removeEventListener('resize', handleResize);
+            }
+        }
+        return () => {
+            if (unobserve) {
+                unobserve();
+            }
+        };
+    };
+
     var TextInputTypes;
     (function (TextInputTypes) {
         TextInputTypes["text"] = "text";
@@ -4459,6 +4547,7 @@
         constructor(props) {
             super(props);
             this.inputRef = React__namespace.createRef();
+            this.observer = () => { };
             this.handleChange = (event) => {
                 if (this.props.onChange) {
                     this.props.onChange(event.currentTarget.value, event);
@@ -4501,17 +4590,14 @@
         }
         componentDidMount() {
             if (this.props.isLeftTruncated) {
+                const inputRef = this.props.innerRef || this.inputRef;
+                this.observer = getResizeObserver(inputRef.current, this.handleResize);
                 this.handleResize();
-                if (canUseDOM) {
-                    window.addEventListener('resize', debounce$1(this.handleResize, 250));
-                }
             }
         }
         componentWillUnmount() {
             if (this.props.isLeftTruncated) {
-                if (canUseDOM) {
-                    window.removeEventListener('resize', debounce$1(this.handleResize, 250));
-                }
+                this.observer();
             }
         }
         render() {