@patternfly/react-table 4.37.9 → 4.38.1

package/dist/umd/react-table.js

@@ -3243,6 +3243,94 @@
         noSpaceHandling: false
     };
 
+    /**
+     * 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 {Element} containerRefElement 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 = (containerRefElement, handleResize) => {
+        let unobserve;
+        if (canUseDOM) {
+            const { ResizeObserver } = window;
+            if (containerRefElement && 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(containerRefElement);
+                unobserve = () => resizeObserver.unobserve(containerRefElement);
+            }
+            else {
+                window.addEventListener('resize', handleResize);
+                unobserve = () => window.removeEventListener('resize', handleResize);
+            }
+        }
+        return () => {
+            if (unobserve) {
+                unobserve();
+            }
+        };
+    };
+
     var _default$j = {
       "bullseye": "pf-l-bullseye"
     };
@@ -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() {

package/dist/umd/react-table.min.css

@@ -6631,37 +6631,6 @@ svg.pf-c-spinner.pf-m-xl {
   overflow: hidden;
 }
 
-.pf-c-action-list {
-  --pf-c-action-list--m-icon--spacer: 0;
-  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
-  --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
-}
-
-.pf-c-action-list,
-.pf-c-action-list__group {
-  --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
-  --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
-  display: flex;
-  align-items: center;
-}
-
-.pf-c-action-list > * + *,
-.pf-c-action-list__group > * + * {
-  margin-left: var(--pf-c-action-list--child--spacer);
-}
-
-.pf-c-action-list > * + .pf-c-action-list__group,
-.pf-c-action-list .pf-c-action-list__group + *,
-.pf-c-action-list__group > * + .pf-c-action-list__group,
-.pf-c-action-list__group .pf-c-action-list__group + * {
-  margin-left: var(--pf-c-action-list--group--spacer);
-}
-
-.pf-c-action-list.pf-m-icons,
-.pf-c-action-list__group.pf-m-icons {
-  --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
-}
-
 .pf-c-accordion {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -6900,6 +6869,37 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-accordion__expanded-content-body--PaddingTop: var(--pf-c-accordion__expanded-content-body--expanded-content-body--PaddingTop);
 }
 
+.pf-c-action-list {
+  --pf-c-action-list--m-icon--spacer: 0;
+  --pf-c-action-list--child--spacer-base: var(--pf-global--spacer--md);
+  --pf-c-action-list--group--spacer-base: var(--pf-global--spacer--2xl);
+}
+
+.pf-c-action-list,
+.pf-c-action-list__group {
+  --pf-c-action-list--child--spacer: var(--pf-c-action-list--child--spacer-base);
+  --pf-c-action-list--group--spacer: var(--pf-c-action-list--group--spacer-base);
+  display: flex;
+  align-items: center;
+}
+
+.pf-c-action-list > * + *,
+.pf-c-action-list__group > * + * {
+  margin-left: var(--pf-c-action-list--child--spacer);
+}
+
+.pf-c-action-list > * + .pf-c-action-list__group,
+.pf-c-action-list .pf-c-action-list__group + *,
+.pf-c-action-list__group > * + .pf-c-action-list__group,
+.pf-c-action-list__group .pf-c-action-list__group + * {
+  margin-left: var(--pf-c-action-list--group--spacer);
+}
+
+.pf-c-action-list.pf-m-icons,
+.pf-c-action-list__group.pf-m-icons {
+  --pf-c-action-list--child--spacer: var(--pf-c-action-list--m-icon--spacer);
+}
+
 .pf-c-alert {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -7494,6 +7494,32 @@ svg.pf-c-spinner.pf-m-xl {
     display: none !important;
   }
 }
+.pf-c-avatar {
+  --pf-c-avatar--BorderColor: transparent;
+  --pf-c-avatar--BorderWidth: 0;
+  --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-avatar--Width: 2.25rem;
+  --pf-c-avatar--Height: 2.25rem;
+  --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
+  --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
+  --pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm);
+  width: var(--pf-c-avatar--Width);
+  height: var(--pf-c-avatar--Height);
+  border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
+  border-radius: var(--pf-c-avatar--BorderRadius);
+}
+
+.pf-c-avatar.pf-m-light {
+  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-light--BorderColor);
+  --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-light--BorderWidth);
+}
+
+.pf-c-avatar.pf-m-dark {
+  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
+  --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
+}
+
 .pf-c-back-to-top {
   --pf-c-back-to-top--Right: var(--pf-global--spacer--2xl);
   --pf-c-back-to-top--Bottom: var(--pf-global--spacer--lg);
@@ -7529,32 +7555,6 @@ svg.pf-c-spinner.pf-m-xl {
   box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow);
 }
 
-.pf-c-avatar {
-  --pf-c-avatar--BorderColor: transparent;
-  --pf-c-avatar--BorderWidth: 0;
-  --pf-c-avatar--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-avatar--Width: 2.25rem;
-  --pf-c-avatar--Height: 2.25rem;
-  --pf-c-avatar--m-light--BorderColor: var(--pf-global--BorderColor--dark-100);
-  --pf-c-avatar--m-light--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-avatar--m-dark--BorderColor: var(--pf-global--palette--black-700);
-  --pf-c-avatar--m-dark--BorderWidth: var(--pf-global--BorderWidth--sm);
-  width: var(--pf-c-avatar--Width);
-  height: var(--pf-c-avatar--Height);
-  border: var(--pf-c-avatar--BorderWidth) solid var(--pf-c-avatar--BorderColor);
-  border-radius: var(--pf-c-avatar--BorderRadius);
-}
-
-.pf-c-avatar.pf-m-light {
-  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-light--BorderColor);
-  --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-light--BorderWidth);
-}
-
-.pf-c-avatar.pf-m-dark {
-  --pf-c-avatar--BorderColor: var(--pf-c-avatar--m-dark--BorderColor);
-  --pf-c-avatar--BorderWidth: var(--pf-c-avatar--m-dark--BorderWidth);
-}
-
 .pf-c-background-image {
   --pf-c-background-image--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
   --pf-c-background-image--BackgroundImage: url("../../assets/images/pfbg_576.jpg");
@@ -8714,6 +8714,44 @@ button.pf-c-breadcrumb__link {
   --pf-c-button--PaddingLeft: var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft);
 }
 
+.pf-c-code-block {
+  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
+  --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
+  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
+  background-color: var(--pf-c-code-block--BackgroundColor);
+}
+
+.pf-c-code-block__header {
+  display: flex;
+  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
+}
+
+.pf-c-code-block__actions {
+  display: flex;
+  margin-left: auto;
+}
+
+.pf-c-code-block__content {
+  padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
+}
+
+.pf-c-code-block__pre {
+  font-family: var(--pf-c-code-block__pre--FontFamily);
+  font-size: var(--pf-c-code-block__pre--FontSize);
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.pf-c-code-block__code {
+  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
+}
+
 .pf-c-context-selector__menu {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -9015,44 +9053,6 @@ button.pf-c-breadcrumb__link {
   pointer-events: none;
 }
 
-.pf-c-code-block {
-  --pf-c-code-block--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-code-block__header--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-code-block__header--BorderBottomColor: var(--pf-global--BorderColor--100);
-  --pf-c-code-block__content--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-code-block__content--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-code-block__pre--FontFamily: var(--pf-global--FontFamily--monospace);
-  --pf-c-code-block__pre--FontSize: var(--pf-global--FontSize--sm);
-  background-color: var(--pf-c-code-block--BackgroundColor);
-}
-
-.pf-c-code-block__header {
-  display: flex;
-  border-bottom: var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor);
-}
-
-.pf-c-code-block__actions {
-  display: flex;
-  margin-left: auto;
-}
-
-.pf-c-code-block__content {
-  padding: var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft);
-}
-
-.pf-c-code-block__pre {
-  font-family: var(--pf-c-code-block__pre--FontFamily);
-  font-size: var(--pf-c-code-block__pre--FontSize);
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.pf-c-code-block__code {
-  font-family: var(--pf-c-code-block__code--FontFamily, inherit);
-}
-
 .pf-c-data-list {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -15830,16 +15830,6 @@ ul.pf-c-list {
     --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
   }
 }
-.pf-l-bullseye {
-  --pf-l-bullseye--Padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--pf-l-bullseye--Padding);
-  margin: 0;
-}
-
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -16742,6 +16732,16 @@ ul.pf-c-list {
   left: 0;
 }
 
+.pf-l-bullseye {
+  --pf-l-bullseye--Padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--pf-l-bullseye--Padding);
+  margin: 0;
+}
+
 .pf-c-notification-badge {
   --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
@@ -17382,6 +17382,80 @@ ul.pf-c-list {
   color: var(--pf-c-options-menu__group-title--Color);
 }
 
+.pf-c-overflow-menu {
+  --pf-c-overflow-menu--spacer--base: var(--pf-global--spacer--md);
+  --pf-c-overflow-menu--spacer: var(--pf-global--spacer--sm);
+  --pf-c-overflow-menu__group--spacer: var(--pf-c-overflow-menu--spacer--base);
+  --pf-c-overflow-menu__item--spacer: var(--pf-c-overflow-menu--spacer--base);
+  --pf-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-c-overflow-menu--spacer--base);
+  --pf-c-overflow-menu__group--m-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
+  --pf-c-overflow-menu__group--m-button-group--space-items: var(--pf-global--spacer--sm);
+  --pf-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
+  --pf-c-overflow-menu__group--m-icon-button-group--space-items: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.pf-c-overflow-menu__content {
+  display: flex;
+  align-items: center;
+}
+
+.pf-c-overflow-menu__group {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--spacer);
+  display: flex;
+  align-items: center;
+}
+
+.pf-c-overflow-menu__group.pf-m-button-group {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--spacer);
+}
+
+.pf-c-overflow-menu__group.pf-m-button-group > * {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--space-items);
+}
+
+.pf-c-overflow-menu__group.pf-m-icon-button-group {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--spacer);
+}
+
+.pf-c-overflow-menu__group.pf-m-icon-button-group > * {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--space-items);
+}
+
+.pf-c-overflow-menu__item {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__item--spacer);
+}
+
+.pf-c-overflow-menu__content,
+.pf-c-overflow-menu__control,
+.pf-c-overflow-menu__group,
+.pf-c-overflow-menu__item {
+  margin-right: var(--pf-c-overflow-menu--spacer);
+}
+
+.pf-c-overflow-menu__content:last-child,
+.pf-c-overflow-menu__control:last-child,
+.pf-c-overflow-menu__group:last-child,
+.pf-c-overflow-menu__item:last-child {
+  --pf-c-overflow-menu--spacer: 0;
+}
+
+.pf-c-overflow-menu > .pf-c-divider,
+.pf-c-overflow-menu__group > .pf-c-divider {
+  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu--c-divider--m-vertical--spacer);
+}
+
+.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical,
+.pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical {
+  margin-right: var(--pf-c-overflow-menu--spacer);
+}
+
+.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child,
+.pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical:last-child {
+  --pf-c-overflow-menu--spacer: 0;
+}
+
 .pf-c-page__sidebar.pf-m-light {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);
@@ -24832,80 +24906,6 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-button--PaddingLeft: var(--pf-c-text-input-group__utilities--c-button--PaddingLeft);
 }
 
-.pf-c-overflow-menu {
-  --pf-c-overflow-menu--spacer--base: var(--pf-global--spacer--md);
-  --pf-c-overflow-menu--spacer: var(--pf-global--spacer--sm);
-  --pf-c-overflow-menu__group--spacer: var(--pf-c-overflow-menu--spacer--base);
-  --pf-c-overflow-menu__item--spacer: var(--pf-c-overflow-menu--spacer--base);
-  --pf-c-overflow-menu--c-divider--m-vertical--spacer: var(--pf-c-overflow-menu--spacer--base);
-  --pf-c-overflow-menu__group--m-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
-  --pf-c-overflow-menu__group--m-button-group--space-items: var(--pf-global--spacer--sm);
-  --pf-c-overflow-menu__group--m-icon-button-group--spacer: var(--pf-c-overflow-menu--spacer--base);
-  --pf-c-overflow-menu__group--m-icon-button-group--space-items: 0;
-  display: inline-flex;
-  align-items: center;
-}
-
-.pf-c-overflow-menu__content {
-  display: flex;
-  align-items: center;
-}
-
-.pf-c-overflow-menu__group {
-  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--spacer);
-  display: flex;
-  align-items: center;
-}
-
-.pf-c-overflow-menu__group.pf-m-button-group {
-  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--spacer);
-}
-
-.pf-c-overflow-menu__group.pf-m-button-group > * {
-  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-button-group--space-items);
-}
-
-.pf-c-overflow-menu__group.pf-m-icon-button-group {
-  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--spacer);
-}
-
-.pf-c-overflow-menu__group.pf-m-icon-button-group > * {
-  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__group--m-icon-button-group--space-items);
-}
-
-.pf-c-overflow-menu__item {
-  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu__item--spacer);
-}
-
-.pf-c-overflow-menu__content,
-.pf-c-overflow-menu__control,
-.pf-c-overflow-menu__group,
-.pf-c-overflow-menu__item {
-  margin-right: var(--pf-c-overflow-menu--spacer);
-}
-
-.pf-c-overflow-menu__content:last-child,
-.pf-c-overflow-menu__control:last-child,
-.pf-c-overflow-menu__group:last-child,
-.pf-c-overflow-menu__item:last-child {
-  --pf-c-overflow-menu--spacer: 0;
-}
-
-.pf-c-overflow-menu > .pf-c-divider,
-.pf-c-overflow-menu__group > .pf-c-divider {
-  --pf-c-overflow-menu--spacer: var(--pf-c-overflow-menu--c-divider--m-vertical--spacer);
-}
-
-.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical,
-.pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical {
-  margin-right: var(--pf-c-overflow-menu--spacer);
-}
-
-.pf-c-overflow-menu > .pf-c-divider.pf-m-vertical:last-child,
-.pf-c-overflow-menu__group > .pf-c-divider.pf-m-vertical:last-child {
-  --pf-c-overflow-menu--spacer: 0;
-}
-
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;