@patternfly/react-table 4.48.0 → 4.50.0

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.50.0 (2021-12-09)
+
+
+### Features
+
+* **Popover:** add composable header and alert variants ([#6664](https://github.com/patternfly/patternfly-react/issues/6664)) ([9028e8b](https://github.com/patternfly/patternfly-react/commit/9028e8ba5d674bde6a7e29532f7926e200dd632a))
+
+
+
+
+
+## 4.49.1 (2021-12-08)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+# 4.49.0 (2021-12-08)
+
+
+### Features
+
+* **DualListSelector:** add composable tree example ([#6652](https://github.com/patternfly/patternfly-react/issues/6652)) ([5fe977b](https://github.com/patternfly/patternfly-react/commit/5fe977becb5dea615724abf846f315e50931c188))
+
+
+
+
+
+## 4.48.1 (2021-12-07)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
 # 4.48.0 (2021-12-06)
 
 

package/dist/umd/react-table.css

@@ -526,10 +526,16 @@
 }
 
 .pf-c-table thead.pf-m-nested-column-header th,
-.pf-c-table thead.pf-m-nested-column-header td {
+.pf-c-table thead.pf-m-nested-column-header td,
+.pf-c-table thead.pf-m-nested-column-header input {
   vertical-align: middle;
 }
 
+.pf-c-table thead.pf-m-nested-column-header .pf-c-table__check label {
+  display: flex;
+  align-items: center;
+}
+
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) th:not([rowspan]),
 .pf-c-table thead.pf-m-nested-column-header tr:not(:first-child) td:not([rowspan]) {
   --pf-c-table--cell--PaddingTop: var(--pf-c-table--thead--m-nested-column-header--tr--PaddingTop);
@@ -569,7 +575,7 @@
   border-left: var(--pf-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-c-table__expandable-row--after--BorderColor);
 }
 
-.pf-c-table tbody .pf-c-table__check > input {
+.pf-c-table tbody .pf-c-table__check input {
   margin-top: var(--pf-c-table__check--input--MarginTop);
   vertical-align: top;
 }
@@ -905,10 +911,17 @@
   --pf-c-table--cell--FontSize: var(--pf-c-table__check--input--FontSize);
 }
 
-.pf-c-table__check > input:not([disabled]) {
+.pf-c-table__check label:not([disabled]),
+.pf-c-table__check input:not([disabled]) {
   cursor: pointer;
 }
 
+.pf-c-table__check label {
+  display: block;
+  padding: inherit;
+  margin: calc(var(--pf-c-table--cell--PaddingTop) * -1) calc(var(--pf-c-table--cell--PaddingRight) * -1) calc(var(--pf-c-table--cell--PaddingBottom) * -1) calc(var(--pf-c-table--cell--PaddingLeft) * -1);
+}
+
 .pf-c-table__favorite .pf-c-button {
   --pf-c-button--m-plain--Color: var(--pf-c-table__favorite--c-button--Color);
   --pf-c-button--FontSize: var(--pf-c-table__favorite--c-button--FontSize);
@@ -4319,7 +4332,7 @@
   text-align: right;
 }
 
-@media (min-width: 768px) {
+@media screen and (min-width: 768px) {
   .pf-c-form.pf-m-horizontal {
     --pf-c-form__group-label--PaddingBottom: 0;
   }
@@ -4343,6 +4356,150 @@
     grid-column: 2;
   }
 }
+@media screen and (min-width: 0) {
+  .pf-c-form.pf-m-horizontal-on-xs {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xs .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-form.pf-m-horizontal-on-sm {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+
+  .pf-c-form.pf-m-horizontal-on-sm .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-form.pf-m-horizontal-on-md {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+
+  .pf-c-form.pf-m-horizontal-on-md .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-form.pf-m-horizontal-on-lg {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+
+  .pf-c-form.pf-m-horizontal-on-lg .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-form.pf-m-horizontal-on-xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+
+  .pf-c-form.pf-m-horizontal-on-xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-form.pf-m-horizontal-on-2xl {
+    --pf-c-form__group-label--PaddingBottom: 0;
+  }
+
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group {
+    display: grid;
+    grid-column-gap: var(--pf-c-form--m-horizontal__group-label--md--GridColumnGap);
+    grid-template-columns: var(--pf-c-form--m-horizontal__group-label--md--GridColumnWidth) var(--pf-c-form--m-horizontal__group-control--md--GridColumnWidth);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label {
+    padding-top: var(--pf-c-form--m-horizontal__group-label--md--PaddingTop);
+  }
+
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-label.pf-m-no-padding-top {
+    --pf-c-form--m-horizontal__group-label--md--PaddingTop: var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--PaddingTop);
+    transform: translateY(var(--pf-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
+  }
+
+  .pf-c-form.pf-m-horizontal-on-2xl .pf-c-form__group-control {
+    grid-column: 2;
+  }
+}
 .pf-c-form.pf-m-limit-width {
   max-width: var(--pf-c-form--m-limit-width--MaxWidth);
 }
@@ -5523,14 +5680,15 @@ label.pf-c-check, .pf-c-check__label,
 }
 
 .pf-c-dropdown__toggle.pf-m-disabled, .pf-c-dropdown__toggle:disabled {
+  --pf-c-dropdown__toggle--before--BorderBottomColor: transparent;
   pointer-events: none;
 }
 
-.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled:not(.pf-m-plain) {
+.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain), .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain), .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--disabled--BackgroundColor);
 }
 
-.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before {
+.pf-c-dropdown__toggle.pf-m-disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle.pf-m-disabled.pf-m-plain.pf-m-text::before, .pf-c-dropdown__toggle:disabled:not(.pf-m-plain)::before, .pf-c-dropdown__toggle:disabled.pf-m-plain.pf-m-text::before {
   border: 0;
 }
 
@@ -5538,13 +5696,16 @@ label.pf-c-check, .pf-c-check__label,
   padding: 0;
 }
 
+.pf-c-dropdown__toggle.pf-m-split-button:not(.pf-m-disabled) {
+  background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
+}
+
 .pf-c-dropdown__toggle.pf-m-split-button > * {
   position: relative;
   padding-top: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingTop);
   padding-right: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingRight);
   padding-bottom: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingBottom);
   padding-left: var(--pf-c-dropdown__toggle--m-split-button--child--PaddingLeft);
-  background-color: var(--pf-c-dropdown__toggle--m-split-button--child--BackgroundColor);
 }
 
 .pf-c-dropdown__toggle.pf-m-split-button > *:first-child {
@@ -5576,6 +5737,10 @@ label.pf-c-check, .pf-c-check__label,
   border-left: var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth) solid var(--pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftColor);
 }
 
+.pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-disabled, .pf-c-dropdown__toggle.pf-m-split-button.pf-m-action.pf-m-primary[disabled] {
+  --pf-c-dropdown__toggle--m-split-button--m-primary--m-action--child--BorderLeftWidth: 0;
+}
+
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-check {
   display: flex;
   align-items: center;
@@ -5648,14 +5813,14 @@ label.pf-c-check, .pf-c-check__label,
   border-bottom-width: var(--pf-c-dropdown--m-expanded__toggle--before--BorderBottomWidth);
 }
 
-.pf-c-dropdown__toggle.pf-m-plain {
+.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) {
   --pf-c-dropdown__toggle--PaddingRight: var(--pf-c-dropdown__toggle--m-plain--PaddingRight);
   --pf-c-dropdown__toggle--PaddingLeft: var(--pf-c-dropdown__toggle--m-plain--PaddingLeft);
   display: inline-block;
   color: var(--pf-c-dropdown__toggle--m-plain--Color);
 }
 
-.pf-c-dropdown__toggle.pf-m-plain > * {
+.pf-c-dropdown__toggle.pf-m-plain:not(.pf-m-text) > * {
   line-height: var(--pf-c-dropdown__toggle--m-plain--child--LineHeight);
 }
 
@@ -5672,13 +5837,13 @@ label.pf-c-check, .pf-c-check__label,
 }
 
 .pf-c-dropdown__toggle.pf-m-primary {
-  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
-  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
   border-radius: var(--pf-c-dropdown__toggle--m-primary--BorderRadius);
 }
 
-.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled) {
+.pf-c-dropdown__toggle.pf-m-primary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
+  --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--BackgroundColor);
+  --pf-c-dropdown__toggle-button--Color: var(--pf-c-dropdown__toggle--m-primary--Color);
 }
 
 .pf-c-dropdown__toggle.pf-m-primary::before {
@@ -5697,17 +5862,20 @@ label.pf-c-check, .pf-c-check__label,
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-primary--active--BackgroundColor);
 }
 
-.pf-m-expanded > .pf-c-dropdown__toggle.pf-m-primary {
+.pf-c-dropdown__toggle.pf-m-primary .pf-m-expanded > :not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown--m-expanded__toggle--m-primary--BackgroundColor);
 }
 
 .pf-c-dropdown__toggle.pf-m-secondary {
+  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
+}
+
+.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled]) {
   --pf-c-dropdown__toggle--Color: var(--pf-c-dropdown__toggle--m-secondary--Color);
   --pf-c-dropdown__toggle--BackgroundColor: var(--pf-c-dropdown__toggle--m-secondary--BackgroundColor);
-  border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
 }
 
-.pf-c-dropdown__toggle.pf-m-secondary::before {
+.pf-c-dropdown__toggle.pf-m-secondary:not(.pf-m-disabled):not([disabled])::before {
   border: var(--pf-c-dropdown__toggle--m-secondary--before--BorderWidth) solid var(--pf-c-dropdown__toggle--m-secondary--before--BorderColor);
   border-radius: var(--pf-c-dropdown__toggle--m-secondary--BorderRadius);
 }
@@ -10876,6 +11044,22 @@ button.pf-c-breadcrumb__link {
   --pf-c-description-list--m-horizontal__term--width: fit-content(20ch);
 }
 
+.pf-c-description-list.pf-m-fill-columns {
+  display: block;
+  column-count: var(--pf-c-description-list--GridTemplateColumns--count);
+  margin-bottom: calc(var(--pf-c-description-list--RowGap) * -1);
+}
+
+.pf-c-description-list.pf-m-fill-columns .pf-c-description-list__group {
+  display: inline-grid;
+  width: 100%;
+  margin-bottom: var(--pf-c-description-list--RowGap);
+  break-inside: avoid;
+  page-break-inside: avoid;
+  -webkit-column-break-inside: avoid;
+  -moz-column-break-inside: avoid;
+}
+
 .pf-c-description-list__group {
   display: grid;
   grid-column: var(--pf-c-description-list__group--GridColumn);

package/dist/umd/react-table.js

@@ -3829,6 +3829,7 @@
         "action": "pf-m-action",
         "disabled": "pf-m-disabled",
         "plain": "pf-m-plain",
+        "text": "pf-m-text",
         "splitButton": "pf-m-split-button",
         "primary": "pf-m-primary",
         "active": "pf-m-active",
@@ -3848,8 +3849,7 @@
         "alignLeftOn_2xl": "pf-m-align-left-on-2xl",
         "ariaDisabled": "pf-m-aria-disabled",
         "icon": "pf-m-icon",
-        "description": "pf-m-description",
-        "text": "pf-m-text"
+        "description": "pf-m-description"
       }
     };
 
@@ -4762,6 +4762,12 @@
         "horizontal": "pf-m-horizontal",
         "alignRight": "pf-m-align-right",
         "noPaddingTop": "pf-m-no-padding-top",
+        "horizontalOnXs": "pf-m-horizontal-on-xs",
+        "horizontalOnSm": "pf-m-horizontal-on-sm",
+        "horizontalOnMd": "pf-m-horizontal-on-md",
+        "horizontalOnLg": "pf-m-horizontal-on-lg",
+        "horizontalOnXl": "pf-m-horizontal-on-xl",
+        "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
         "limitWidth": "pf-m-limit-width",
         "action": "pf-m-action",
         "info": "pf-m-info",
@@ -6292,14 +6298,31 @@
     PopoverContent.displayName = 'PopoverContent';
 
     const PopoverBody = (_a) => {
-        var { children, id } = _a, props = __rest$1(_a, ["children", "id"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(_default$6.popoverBody), id: id }, props), children));
+        var { children, id, className } = _a, props = __rest$1(_a, ["children", "id", "className"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(_default$6.popoverBody, className), id: id }, props), children));
     };
     PopoverBody.displayName = 'PopoverBody';
 
+    const PopoverHeaderIcon = (_a) => {
+        var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
+        return (React__namespace.createElement("span", Object.assign({ className: css(_default$6.popoverTitleIcon, className) }, props), children));
+    };
+    PopoverHeaderIcon.displayName = 'PopoverHeaderIcon';
+
+    const PopoverHeaderText = (_a) => {
+        var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
+        return (React__namespace.createElement("span", Object.assign({ className: css(_default$6.popoverTitleText, className) }, props), children));
+    };
+    PopoverHeaderText.displayName = 'PopoverHeaderText';
+
     const PopoverHeader = (_a) => {
-        var { children, id } = _a, props = __rest$1(_a, ["children", "id"]);
-        return (React__namespace.createElement(PopoverContext.Consumer, null, ({ headerComponent }) => (React__namespace.createElement(Title, Object.assign({ headingLevel: headerComponent, size: TitleSizes.md, id: id }, props), children))));
+        var { children, icon, className, titleHeadingLevel = 'h6', alertSeverityVariant, id, alertSeverityScreenReaderText } = _a, props = __rest$1(_a, ["children", "icon", "className", "titleHeadingLevel", "alertSeverityVariant", "id", "alertSeverityScreenReaderText"]);
+        const HeadingLevel = titleHeadingLevel;
+        return icon || alertSeverityVariant ? (React__namespace.createElement("header", Object.assign({ className: css('pf-c-popover__header', className), id: id }, props),
+            React__namespace.createElement(HeadingLevel, { className: css(_default$6.popoverTitle, icon && _default$6.modifiers.icon) },
+                icon && React__namespace.createElement(PopoverHeaderIcon, null, icon),
+                alertSeverityVariant && alertSeverityScreenReaderText && (React__namespace.createElement("span", { className: "pf-u-screen-reader" }, alertSeverityScreenReaderText)),
+                React__namespace.createElement(PopoverHeaderText, null, children)))) : (React__namespace.createElement(Title, Object.assign({ headingLevel: titleHeadingLevel, size: TitleSizes.md, id: id, className: className }, props), children));
     };
     PopoverHeader.displayName = 'PopoverHeader';
 
@@ -6360,10 +6383,17 @@
         PopoverPosition["rightStart"] = "right-start";
         PopoverPosition["rightEnd"] = "right-end";
     })(PopoverPosition || (PopoverPosition = {}));
+    const alertStyle = {
+        default: _default$6.modifiers.default,
+        info: _default$6.modifiers.info,
+        success: _default$6.modifiers.success,
+        warning: _default$6.modifiers.warning,
+        danger: _default$6.modifiers.danger
+    };
     const Popover = (_a) => {
-        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, 
+        var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', headerIcon = null, alertSeverityVariant, alertSeverityScreenReaderText, 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", "headerComponent", "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", "headerIcon", "alertSeverityVariant", "alertSeverityScreenReaderText", "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.');
@@ -6509,7 +6539,7 @@
                     }
                     return node;
                 }
-            }, preventScrollOnDeactivate: true, className: css(_default$6.popover, hasNoPadding && _default$6.modifiers.noPadding, hasAutoWidth && _default$6.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
+            }, preventScrollOnDeactivate: true, className: css(_default$6.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && _default$6.modifiers.noPadding, hasAutoWidth && _default$6.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
                 minWidth: hasCustomMinWidth ? minWidth : null,
                 maxWidth: hasCustomMaxWidth ? maxWidth : null,
                 opacity,
@@ -6518,7 +6548,7 @@
             React__namespace.createElement(PopoverArrow, null),
             React__namespace.createElement(PopoverContent, null,
                 showClose && React__namespace.createElement(PopoverCloseButton, { onClose: closePopover, "aria-label": closeBtnAriaLabel }),
-                headerContent && (React__namespace.createElement(PopoverHeader, { id: `popover-${uniqueId}-header` }, typeof headerContent === 'function' ? headerContent(hide) : headerContent)),
+                headerContent && (React__namespace.createElement(PopoverHeader, { id: `popover-${uniqueId}-header`, icon: headerIcon, alertSeverityVariant: alertSeverityVariant, alertSeverityScreenReaderText: alertSeverityScreenReaderText || `${alertSeverityVariant} alert:`, titleHeadingLevel: headerComponent }, 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(PopoverContext.Provider, { value: { headerComponent } },