@patternfly/react-table 4.37.11 → 4.38.3

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.38.3 (2021-11-08)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## 4.38.2 (2021-11-08)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## 4.38.1 (2021-11-08)
+
+
+### Bug Fixes
+
+* **acccessconsoles:** use object type Select options values in order to not mix displayed text with option keys ([#6496](https://github.com/patternfly/patternfly-react/issues/6496)) ([975c8e1](https://github.com/patternfly/patternfly-react/commit/975c8e14d7ea8c53eb4048ea6ef73e804b3ad2be))
+
+
+
+
+
+# 4.38.0 (2021-11-04)
+
+
+### Features
+
+* **log-viewer:** support ANSI color ([#6519](https://github.com/patternfly/patternfly-react/issues/6519)) ([936a699](https://github.com/patternfly/patternfly-react/commit/936a699b0514a492d3c40be08932fb7bab275cce))
+
+
+
+
+
 ## 4.37.11 (2021-11-01)
 
 

package/dist/umd/react-table.css

@@ -5194,30 +5194,48 @@ label.pf-c-check, .pf-c-check__label,
   box-shadow: var(--pf-c-tooltip--BoxShadow);
 }
 
-.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow {
   bottom: 0;
   left: 50%;
   transform: translateX(var(--pf-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-top--Rotate));
 }
 
-.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
   top: 0;
   left: 50%;
   transform: translateX(var(--pf-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-bottom--Rotate));
 }
 
-.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow {
   top: 50%;
   right: 0;
   transform: translateX(var(--pf-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-left--Rotate));
 }
 
-.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow {
+.pf-c-tooltip.pf-m-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
   top: 50%;
   left: 0;
   transform: translateX(var(--pf-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-c-tooltip__arrow--m-right--Rotate));
 }
 
+.pf-c-tooltip.pf-m-left-top .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-top .pf-c-tooltip__arrow {
+  top: var(--pf-c-tooltip__arrow--Height);
+}
+
+.pf-c-tooltip.pf-m-left-bottom .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-right-bottom .pf-c-tooltip__arrow {
+  top: auto;
+  bottom: 0;
+}
+
+.pf-c-tooltip.pf-m-top-left .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-left .pf-c-tooltip__arrow {
+  left: var(--pf-c-tooltip__arrow--Width);
+}
+
+.pf-c-tooltip.pf-m-top-right .pf-c-tooltip__arrow, .pf-c-tooltip.pf-m-bottom-right .pf-c-tooltip__arrow {
+  right: 0;
+  left: auto;
+}
+
 .pf-c-tooltip__content {
   position: relative;
   padding: var(--pf-c-tooltip__content--PaddingTop) var(--pf-c-tooltip__content--PaddingRight) var(--pf-c-tooltip__content--PaddingBottom) var(--pf-c-tooltip__content--PaddingLeft);
@@ -15545,7 +15563,7 @@ ul.pf-c-list {
   --pf-c-menu-toggle--m-expanded--BackgroundColor: var(--pf-c-menu-toggle--m-primary--m-expanded--BackgroundColor);
 }
 
-.pf-c-menu-toggle.pf-m-plain {
+.pf-c-menu-toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-menu-toggle--Color: var(--pf-c-menu-toggle--m-plain--Color);
   --pf-c-menu-toggle--hover--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
   --pf-c-menu-toggle--focus--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
@@ -16330,14 +16348,12 @@ ul.pf-c-list {
 }
 
 .pf-c-nav__item {
-  --pf-c-nav__item__toggle-icon--Rotate: 0;
   position: relative;
   margin-top: var(--pf-c-nav__item--MarginTop);
 }
 
 .pf-c-nav__item.pf-m-expandable {
   --pf-c-nav__link--before--BorderBottomWidth: 0;
-  --pf-c-nav__item__toggle-icon--Rotate: var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate);
 }
 
 .pf-c-nav__item.pf-m-expandable::before {
@@ -16349,6 +16365,10 @@ ul.pf-c-list {
   border-bottom: var(--pf-c-nav__item--before--BorderWidth) solid var(--pf-c-nav__item--before--BorderColor);
 }
 
+.pf-c-nav__item .pf-c-nav__item:not(.pf-m-expanded) .pf-c-nav__toggle-icon {
+  transform: rotate(0);
+}
+
 .pf-c-nav__item .pf-c-nav__item.pf-m-expandable {
   --pf-c-nav__toggle--FontSize: var(--pf-c-nav__item__item__toggle--FontSize);
   --pf-c-nav__link--PaddingRight: var(--pf-c-nav__item__item__link--PaddingRight);
@@ -16636,11 +16656,7 @@ ul.pf-c-list {
   transition: var(--pf-c-nav__toggle-icon--Transition);
 }
 
-.pf-c-nav__item.pf-m-expanded .pf-c-nav__item .pf-c-nav__toggle-icon {
-  transform: rotate(0deg);
-}
-
-.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon, .pf-c-nav__item .pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
+.pf-c-nav__item.pf-m-expanded .pf-c-nav__toggle-icon {
   transform: rotate(var(--pf-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
 
@@ -17237,44 +17253,34 @@ ul.pf-c-list {
   justify-content: space-between;
   min-width: var(--pf-c-options-menu__toggle--MinWidth);
   max-width: 100%;
-  padding-left: var(--pf-c-options-menu__toggle--PaddingLeft);
+  padding: var(--pf-c-options-menu__toggle--PaddingTop) var(--pf-c-options-menu__toggle--PaddingRight) var(--pf-c-options-menu__toggle--PaddingBottom) var(--pf-c-options-menu__toggle--PaddingLeft);
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
   color: var(--pf-c-options-menu__toggle--Color);
   background-color: var(--pf-c-options-menu__toggle--BackgroundColor);
   border: none;
 }
 
-.pf-c-options-menu__toggle:not(.pf-m-text) {
-  padding-top: var(--pf-c-options-menu__toggle--PaddingTop);
-  padding-right: var(--pf-c-options-menu__toggle--PaddingRight);
-  padding-bottom: var(--pf-c-options-menu__toggle--PaddingBottom);
-}
-
 .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle::before {
   --pf-c-options-menu__toggle--BorderBottomColor: var(--pf-c-options-menu__toggle--expanded--BorderBottomColor);
   border-bottom-width: var(--pf-c-options-menu__toggle--expanded--BorderBottomWidth);
 }
 
-.pf-c-options-menu__toggle.pf-m-plain {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-options-menu__toggle--PaddingRight: var(--pf-c-options-menu__toggle--m-plain--PaddingRight);
   --pf-c-options-menu__toggle--PaddingLeft: var(--pf-c-options-menu__toggle--m-plain--PaddingLeft);
   display: inline-block;
-}
-
-.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
-  justify-content: center;
   color: var(--pf-c-options-menu__toggle--m-plain--Color);
 }
 
-.pf-c-options-menu__toggle.pf-m-plain .pf-c-options-menu__toggle-button-icon {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) .pf-c-options-menu__toggle-button-icon {
   line-height: var(--pf-c-options-menu__toggle--LineHeight);
 }
 
-.pf-c-options-menu__toggle.pf-m-plain:hover, .pf-c-options-menu__toggle.pf-m-plain:active, .pf-c-options-menu__toggle.pf-m-plain.pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):hover, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-active, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):focus, .pf-c-options-menu.pf-m-expanded > .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--hover--Color);
 }
 
-.pf-c-options-menu__toggle.pf-m-plain.pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:disabled {
+.pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text).pf-m-disabled, .pf-c-options-menu__toggle.pf-m-plain:not(.pf-m-text):disabled {
   --pf-c-options-menu__toggle--m-plain--Color: var(--pf-c-options-menu__toggle--m-plain--disabled--Color);
 }
 
@@ -24767,6 +24773,7 @@ label.pf-c-radio, .pf-c-radio__label,
 }
 
 .pf-c-text-input-group {
+  --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-text-input-group__text--before--BorderColor: var(--pf-global--BorderColor--300);
   --pf-c-text-input-group__text--after--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
@@ -24791,14 +24798,27 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-text-input-group__utilities--child--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-text-input-group__utilities--c-button--PaddingLeft: var(--pf-global--spacer--xs);
+  --pf-c-text-input-group--m-disabled--Color: var(--pf-global--disabled-color--100);
+  --pf-c-text-input-group--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   position: relative;
   display: flex;
+  color: var(--pf-c-text-input-group--Color, inherit);
+  background-color: var(--pf-c-text-input-group--BackgroundColor);
 }
 
 .pf-c-text-input-group:hover {
   --pf-c-text-input-group__text--after--BorderBottomColor: var(--pf-c-text-input-group--hover__text--after--BorderBottomColor);
 }
 
+.pf-c-text-input-group.pf-m-disabled {
+  --pf-c-text-input-group__text--before--BorderWidth: 0;
+  --pf-c-text-input-group__text--after--BorderBottomWidth: 0;
+  --pf-c-text-input-group--Color: var(--pf-c-text-input-group--m-disabled--Color);
+  --pf-c-text-input-group__icon--Color: var(--pf-c-text-input-group--m-disabled--Color);
+  --pf-c-text-input-group--BackgroundColor: var(--pf-c-text-input-group--m-disabled--BackgroundColor);
+  pointer-events: none;
+}
+
 .pf-c-text-input-group__main {
   display: flex;
   flex: 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"
     };
@@ -3530,9 +3618,17 @@
     var _default$f = {
       "modifiers": {
         "top": "pf-m-top",
+        "topLeft": "pf-m-top-left",
+        "topRight": "pf-m-top-right",
         "bottom": "pf-m-bottom",
+        "bottomLeft": "pf-m-bottom-left",
+        "bottomRight": "pf-m-bottom-right",
         "left": "pf-m-left",
+        "leftTop": "pf-m-left-top",
+        "leftBottom": "pf-m-left-bottom",
         "right": "pf-m-right",
+        "rightTop": "pf-m-right-top",
+        "rightBottom": "pf-m-right-bottom",
         "textAlignLeft": "pf-m-text-align-left"
       },
       "tooltip": "pf-c-tooltip",
@@ -4441,94 +4537,6 @@
         }));
     };
 
-    /**
-     * 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";
@@ -6258,6 +6266,8 @@
       "title": "pf-c-title"
     };
 
+    const PopoverContext = React__namespace.createContext({});
+
     const PopoverContent = (_a) => {
         var { className = null, children } = _a, props = __rest$1(_a, ["className", "children"]);
         return (React__namespace.createElement("div", Object.assign({ className: css(_default$5.popoverContent, className) }, props), children));
@@ -6272,7 +6282,7 @@
 
     const PopoverHeader = (_a) => {
         var { children, id } = _a, props = __rest$1(_a, ["children", "id"]);
-        return (React__namespace.createElement(Title, Object.assign({ headingLevel: "h6", size: TitleSizes.md, id: id }, props), children));
+        return (React__namespace.createElement(PopoverContext.Consumer, null, ({ headerComponent }) => (React__namespace.createElement(Title, Object.assign({ headingLevel: headerComponent, size: TitleSizes.md, id: id }, props), children))));
     };
     PopoverHeader.displayName = 'PopoverHeader';
 
@@ -6334,9 +6344,9 @@
         PopoverPosition["rightEnd"] = "right-end";
     })(PopoverPosition || (PopoverPosition = {}));
     const Popover = (_a) => {
-        var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, 
+        var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, 
         // For every initial starting position, there are 3 escape positions
-        flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, boundary, tippyProps, reference, hasNoPadding = false, hasAutoWidth = false } = _a, rest = __rest$1(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "boundary", "tippyProps", "reference", "hasNoPadding", "hasAutoWidth"]);
+        flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, boundary, tippyProps, reference, hasNoPadding = false, hasAutoWidth = false } = _a, rest = __rest$1(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "headerComponent", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "boundary", "tippyProps", "reference", "hasNoPadding", "hasAutoWidth"]);
         {
             boundary !== undefined &&
                 console.warn('The Popover boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.');
@@ -6514,7 +6524,8 @@
                 headerContent && (React__namespace.createElement(PopoverHeader, { id: `popover-${uniqueId}-header` }, typeof headerContent === 'function' ? headerContent(hide) : headerContent)),
                 React__namespace.createElement(PopoverBody, { id: `popover-${uniqueId}-body` }, typeof bodyContent === 'function' ? bodyContent(hide) : bodyContent),
                 footerContent && (React__namespace.createElement(PopoverFooter, { id: `popover-${uniqueId}-footer` }, typeof footerContent === 'function' ? footerContent(hide) : footerContent)))));
-        return (React__namespace.createElement(Popper, { trigger: children, reference: reference, popper: content, popperMatchesTriggerWidth: false, appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: onTriggerClick, onTriggerEnter: onTriggerEnter, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior }));
+        return (React__namespace.createElement(PopoverContext.Provider, { value: { headerComponent } },
+            React__namespace.createElement(Popper, { trigger: children, reference: reference, popper: content, popperMatchesTriggerWidth: false, appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: onTriggerClick, onTriggerEnter: onTriggerEnter, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior })));
     };
     Popover.displayName = 'Popover';