@patternfly/react-core 4.232.12 → 4.233.1

package/dist/umd/react-core.js

@@ -8576,9 +8576,11 @@
         const idItem = React__namespace.Children.toArray(children).find((child) => !formCtrls.includes(child.type.displayName) && child.props.id);
         const inputGroupRef = innerRef || React__namespace.useRef(null);
         return (React__namespace.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$U.inputGroup, className) }, props), idItem
-            ? React__namespace.Children.map(children, (child) => formCtrls.includes(child.type.displayName)
-                ? React__namespace.cloneElement(child, { 'aria-describedby': idItem.props.id })
-                : child)
+            ? React__namespace.Children.map(children, (child) => !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
+                ? child
+                : React__namespace.cloneElement(child, {
+                    'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
+                }))
             : children));
     };
     InputGroup.displayName = 'InputGroup';
@@ -11869,9 +11871,27 @@
       }
     };
 
+    const c_expandable_section_m_truncate__content_LineClamp = {
+      "name": "--pf-c-expandable-section--m-truncate__content--LineClamp",
+      "value": "3",
+      "var": "var(--pf-c-expandable-section--m-truncate__content--LineClamp)"
+    };
+
+    exports.ExpandableSectionVariant = void 0;
+    (function (ExpandableSectionVariant) {
+        ExpandableSectionVariant["default"] = "default";
+        ExpandableSectionVariant["truncate"] = "truncate";
+    })(exports.ExpandableSectionVariant || (exports.ExpandableSectionVariant = {}));
+    const setLineClamp = (lines, element) => {
+        if (!element || lines < 1) {
+            return;
+        }
+        element.style.setProperty(c_expandable_section_m_truncate__content_LineClamp.name, lines.toString());
+    };
     class ExpandableSection extends React__namespace.Component {
         constructor(props) {
             super(props);
+            this.expandableContentRef = React__namespace.createRef();
             this.state = {
                 isExpanded: props.isExpanded
             };
@@ -11885,10 +11905,25 @@
             }
             return toggleText;
         }
+        componentDidMount() {
+            if (this.props.variant === exports.ExpandableSectionVariant.truncate && this.props.truncateMaxLines) {
+                const expandableContent = this.expandableContentRef.current;
+                setLineClamp(this.props.truncateMaxLines, expandableContent);
+            }
+        }
+        componentDidUpdate(prevProps) {
+            if (this.props.variant === exports.ExpandableSectionVariant.truncate &&
+                prevProps.truncateMaxLines !== this.props.truncateMaxLines) {
+                const expandableContent = this.expandableContentRef.current;
+                setLineClamp(this.props.truncateMaxLines, expandableContent);
+            }
+        }
         render() {
             const _a = this.props, { onToggle: onToggleProp, 
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            isActive, className, toggleText, toggleTextExpanded, toggleTextCollapsed, toggleContent, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId } = _a, props = __rest$1(_a, ["onToggle", "isActive", "className", "toggleText", "toggleTextExpanded", "toggleTextCollapsed", "toggleContent", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId"]);
+            isActive, className, toggleText, toggleTextExpanded, toggleTextCollapsed, toggleContent, children, isExpanded, isDetached, displaySize, isWidthLimited, isIndented, contentId, variant, 
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            truncateMaxLines } = _a, props = __rest$1(_a, ["onToggle", "isActive", "className", "toggleText", "toggleTextExpanded", "toggleTextCollapsed", "toggleContent", "children", "isExpanded", "isDetached", "displaySize", "isWidthLimited", "isIndented", "contentId", "variant", "truncateMaxLines"]);
             let onToggle = onToggleProp;
             let propOrStateIsExpanded = isExpanded;
             // uncontrolled
@@ -11899,12 +11934,14 @@
                 };
             }
             const computedToggleText = this.calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded);
-            return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$I.expandableSection, propOrStateIsExpanded && styles$I.modifiers.expanded, isActive && styles$I.modifiers.active, isDetached && styles$I.modifiers.detached, displaySize === 'large' && styles$I.modifiers.displayLg, isWidthLimited && styles$I.modifiers.limitWidth, isIndented && styles$I.modifiers.indented, className) }),
-                !isDetached && (React__namespace.createElement("button", { className: css(styles$I.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, onClick: () => onToggle(!propOrStateIsExpanded) },
-                    React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon) },
-                        React__namespace.createElement(AngleRightIcon, { "aria-hidden": true })),
-                    React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleText) }, toggleContent || computedToggleText))),
-                React__namespace.createElement("div", { className: css(styles$I.expandableSectionContent), hidden: !propOrStateIsExpanded, id: contentId }, children)));
+            const expandableToggle = !isDetached && (React__namespace.createElement("button", { className: css(styles$I.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, onClick: () => onToggle(!propOrStateIsExpanded) },
+                variant !== exports.ExpandableSectionVariant.truncate && (React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon) },
+                    React__namespace.createElement(AngleRightIcon, { "aria-hidden": true }))),
+                React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleText) }, toggleContent || computedToggleText)));
+            return (React__namespace.createElement("div", Object.assign({ className: css(styles$I.expandableSection, propOrStateIsExpanded && styles$I.modifiers.expanded, isActive && styles$I.modifiers.active, isDetached && styles$I.modifiers.detached, displaySize === 'large' && styles$I.modifiers.displayLg, isWidthLimited && styles$I.modifiers.limitWidth, isIndented && styles$I.modifiers.indented, variant === exports.ExpandableSectionVariant.truncate && styles$I.modifiers.truncate, className) }, props),
+                variant === exports.ExpandableSectionVariant.default && expandableToggle,
+                React__namespace.createElement("div", { ref: this.expandableContentRef, className: css(styles$I.expandableSectionContent), hidden: variant !== exports.ExpandableSectionVariant.truncate && !propOrStateIsExpanded, id: contentId }, children),
+                variant === exports.ExpandableSectionVariant.truncate && expandableToggle));
         }
     }
     ExpandableSection.displayName = 'ExpandableSection';
@@ -11920,15 +11957,16 @@
         displaySize: 'default',
         isWidthLimited: false,
         isIndented: false,
-        contentId: ''
+        contentId: '',
+        variant: 'default'
     };
 
     const ExpandableSectionToggle = (_a) => {
-        var { children, className = '', isExpanded = false, onToggle, contentId, direction = 'down' } = _a, props = __rest$1(_a, ["children", "className", "isExpanded", "onToggle", "contentId", "direction"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$I.expandableSection, isExpanded && styles$I.modifiers.expanded, styles$I.modifiers.detached, className) }),
+        var { children, className = '', isExpanded = false, onToggle, contentId, direction = 'down', hasTruncatedContent = false } = _a, props = __rest$1(_a, ["children", "className", "isExpanded", "onToggle", "contentId", "direction", "hasTruncatedContent"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$I.expandableSection, isExpanded && styles$I.modifiers.expanded, styles$I.modifiers.detached, hasTruncatedContent && styles$I.modifiers.truncate, className) }, props),
             React__namespace.createElement("button", { className: css(styles$I.expandableSectionToggle), type: "button", "aria-expanded": isExpanded, "aria-controls": contentId, onClick: () => onToggle(!isExpanded) },
-                React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon, isExpanded && direction === 'up' && styles$I.modifiers.expandTop) },
-                    React__namespace.createElement(AngleRightIcon, { "aria-hidden": true })),
+                !hasTruncatedContent && (React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleIcon, isExpanded && direction === 'up' && styles$I.modifiers.expandTop) },
+                    React__namespace.createElement(AngleRightIcon, { "aria-hidden": true }))),
                 React__namespace.createElement("span", { className: css(styles$I.expandableSectionToggleText) }, children))));
     };
     ExpandableSectionToggle.displayName = 'ExpandableSectionToggle';
@@ -20118,12 +20156,23 @@
                 React__namespace.createElement(MenuContent, { maxMenuHeight: "200px" },
                     React__namespace.createElement(MenuList, { "aria-label": ariaLabel }, options.map((option, index) => (React__namespace.createElement(MenuItem, { onClick: this.onSelect, key: option, id: `${randomId}-option-${index}` }, option)))))));
             const textInput = (React__namespace.createElement(TextInput, Object.assign({ "aria-haspopup": "menu", className: css(formStyles.formControl), id: `${randomId}-input`, "aria-label": ariaLabel, validated: isInvalid ? 'error' : 'default', placeholder: placeholder, value: timeState || '', type: "text", iconVariant: "clock", onClick: this.onInputClick, onChange: this.onInputChange, onBlur: this.onBlur, autoComplete: "off", isDisabled: isDisabled, ref: this.inputRef }, inputProps)));
+            let calculatedAppendTo;
+            switch (menuAppendTo) {
+                case 'inline':
+                    calculatedAppendTo = () => this.toggleRef.current;
+                    break;
+                case 'parent':
+                    calculatedAppendTo = getParentElement;
+                    break;
+                default:
+                    calculatedAppendTo = menuAppendTo;
+            }
             return (React__namespace.createElement("div", { ref: this.baseComponentRef, className: css(datePickerStyles.datePicker, className) },
                 React__namespace.createElement("div", Object.assign({ className: css(datePickerStyles.datePickerInput), style: style }, props),
                     React__namespace.createElement(InputGroup, null,
                         React__namespace.createElement("div", { id: randomId },
-                            React__namespace.createElement("div", { ref: this.toggleRef, style: { paddingLeft: '0' } }, menuAppendTo !== 'inline' ? (React__namespace.createElement(Popper, { appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, trigger: textInput, popper: menuContainer, isVisible: isTimeOptionsOpen })) : (textInput)),
-                            isTimeOptionsOpen && menuAppendTo === 'inline' && menuContainer)),
+                            React__namespace.createElement("div", { ref: this.toggleRef, style: { paddingLeft: '0' } },
+                                React__namespace.createElement(Popper, { appendTo: calculatedAppendTo, trigger: textInput, popper: menuContainer, isVisible: isTimeOptionsOpen })))),
                     isInvalid && (React__namespace.createElement("div", { className: css(datePickerStyles.datePickerHelperText, datePickerStyles.modifiers.error) }, !isValidFormat ? invalidFormatErrorMessage : invalidMinMaxErrorMessage)))));
         }
     }
@@ -20144,6 +20193,7 @@
         inputProps: {},
         minTime: '',
         maxTime: '',
+        isOpen: false,
         setIsOpen: () => { }
     };
 
@@ -20710,7 +20760,7 @@
         }
     };
     const NumberInput = (_a) => {
-        var { value = 0, className, widthChars, isDisabled = false, onMinus = () => { }, onChange, onBlur, onPlus = () => { }, unit, unitPosition = 'after', min, max, inputName, inputAriaLabel = 'Input', minusBtnAriaLabel = 'Minus', plusBtnAriaLabel = 'Plus', inputProps, minusBtnProps, plusBtnProps } = _a, props = __rest$1(_a, ["value", "className", "widthChars", "isDisabled", "onMinus", "onChange", "onBlur", "onPlus", "unit", "unitPosition", "min", "max", "inputName", "inputAriaLabel", "minusBtnAriaLabel", "plusBtnAriaLabel", "inputProps", "minusBtnProps", "plusBtnProps"]);
+        var { value = 0, className, widthChars, isDisabled = false, validated = exports.ValidatedOptions.default, onMinus = () => { }, onChange, onBlur, onPlus = () => { }, unit, unitPosition = 'after', min, max, inputName, inputAriaLabel = 'Input', minusBtnAriaLabel = 'Minus', plusBtnAriaLabel = 'Plus', inputProps, minusBtnProps, plusBtnProps } = _a, props = __rest$1(_a, ["value", "className", "widthChars", "isDisabled", "validated", "onMinus", "onChange", "onBlur", "onPlus", "unit", "unitPosition", "min", "max", "inputName", "inputAriaLabel", "minusBtnAriaLabel", "plusBtnAriaLabel", "inputProps", "minusBtnProps", "plusBtnProps"]);
         const numberInputUnit = React__namespace.createElement("div", { className: css(styles$a.numberInputUnit) }, unit);
         const keyDownHandler = inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
         const handleBlur = (event) => {
@@ -20722,7 +20772,7 @@
                 onBlur(event);
             }
         };
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$a.numberInput, className) }, (widthChars && {
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$a.numberInput, validated !== 'default' && styles$a.modifiers.status, className) }, (widthChars && {
             style: Object.assign({ '--pf-c-number-input--c-form-control--width-chars': widthChars }, props.style)
         }), props),
             unit && unitPosition === 'before' && numberInputUnit,
@@ -20730,7 +20780,7 @@
                 React__namespace.createElement(Button, Object.assign({ variant: "control", "aria-label": minusBtnAriaLabel, isDisabled: isDisabled || value <= min, onClick: evt => onMinus(evt, inputName) }, minusBtnProps),
                     React__namespace.createElement("span", { className: css(styles$a.numberInputIcon) },
                         React__namespace.createElement(MinusIcon, { "aria-hidden": "true" }))),
-                React__namespace.createElement("input", Object.assign({ className: css(styles$a.formControl), type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { disabled: isDisabled }), (onChange && { onChange }), { onBlur: handleBlur }, (!onChange && { readOnly: true }), inputProps, { onKeyDown: keyDownHandler })),
+                React__namespace.createElement(TextInput, Object.assign({ type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { isDisabled }), (onChange && { onChange: (value, event) => onChange(event) }), { onBlur: handleBlur }, (!onChange && { isReadOnly: true }), { onKeyDown: keyDownHandler, validated: validated }, inputProps)),
                 React__namespace.createElement(Button, Object.assign({ variant: "control", "aria-label": plusBtnAriaLabel, isDisabled: isDisabled || value >= max, onClick: evt => onPlus(evt, inputName) }, plusBtnProps),
                     React__namespace.createElement("span", { className: css(styles$a.numberInputIcon) },
                         React__namespace.createElement(PlusIcon, { "aria-hidden": "true" })))),

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

@@ -2590,6 +2590,10 @@ button.pf-c-breadcrumb__link {
   --pf-c-button--m-tertiary--focus--Color: var(--pf-global--palette--black-100);
   --pf-c-button--m-tertiary--active--after--BorderColor: var(--pf-global--BorderColor--100);
   --pf-c-button--m-tertiary--active--Color: var(--pf-global--palette--black-100);
+  --pf-c-button--m-warning--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-warning--hover--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-warning--focus--Color: var(--pf-global--palette--black-900);
+  --pf-c-button--m-warning--active--Color: var(--pf-global--palette--black-900);
   --pf-c-button--m-warning--hover--BackgroundColor: var(--pf-global--warning-color--200);
   --pf-c-button--m-warning--focus--BackgroundColor: var(--pf-global--warning-color--200);
   --pf-c-button--m-warning--active--BackgroundColor: var(--pf-global--warning-color--200);
@@ -8560,6 +8564,10 @@ label.pf-c-check, .pf-c-check__label,
   overflow: hidden;
 }
 
+.pf-c-expandable-section.pf-m-detached {
+  --pf-c-expandable-section--m-truncate__toggle--MarginTop: 0;
+}
+
 .pf-c-expandable-section__toggle {
   display: flex;
   padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
@@ -16796,212 +16804,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-pagination--m-sticky--BackgroundColor: var(--pf-global--BackgroundColor--300);
 }
 
-.pf-c-popover {
-  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
-  --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
-  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
-  --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
-  --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
-  --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
-  --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
-  --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
-  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
-  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
-  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-popover__content--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
-  --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
-  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-popover__arrow--m-top--TranslateX: -50%;
-  --pf-c-popover__arrow--m-top--TranslateY: 50%;
-  --pf-c-popover__arrow--m-top--Rotate: 45deg;
-  --pf-c-popover__arrow--m-right--TranslateX: -50%;
-  --pf-c-popover__arrow--m-right--TranslateY: -50%;
-  --pf-c-popover__arrow--m-right--Rotate: 45deg;
-  --pf-c-popover__arrow--m-bottom--TranslateX: -50%;
-  --pf-c-popover__arrow--m-bottom--TranslateY: -50%;
-  --pf-c-popover__arrow--m-bottom--Rotate: 45deg;
-  --pf-c-popover__arrow--m-left--TranslateX: 50%;
-  --pf-c-popover__arrow--m-left--TranslateY: -50%;
-  --pf-c-popover__arrow--m-left--Rotate: 45deg;
-  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
-  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
-  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
-  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
-  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
-  position: relative;
-  min-width: var(--pf-c-popover--MinWidth);
-  max-width: var(--pf-c-popover--MaxWidth);
-  font-size: var(--pf-c-popover--FontSize);
-  box-shadow: var(--pf-c-popover--BoxShadow);
-}
-
-.pf-c-popover.pf-m-no-padding {
-  --pf-c-popover__content--PaddingTop: 0px;
-  --pf-c-popover__content--PaddingRight: 0px;
-  --pf-c-popover__content--PaddingBottom: 0px;
-  --pf-c-popover__content--PaddingLeft: 0px;
-}
-
-.pf-c-popover.pf-m-width-auto {
-  --pf-c-popover--MinWidth: auto;
-  --pf-c-popover--MaxWidth: none;
-}
-
-.pf-c-popover.pf-m-top .pf-c-popover__arrow, .pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-top-right .pf-c-popover__arrow {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(var(--pf-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-c-popover__arrow--m-top--Rotate));
-}
-
-.pf-c-popover.pf-m-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
-  top: 0;
-  left: 50%;
-  transform: translateX(var(--pf-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-popover__arrow--m-bottom--Rotate));
-}
-
-.pf-c-popover.pf-m-left .pf-c-popover__arrow, .pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow {
-  top: 50%;
-  right: 0;
-  transform: translateX(var(--pf-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-c-popover__arrow--m-left--Rotate));
-}
-
-.pf-c-popover.pf-m-right .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
-  top: 50%;
-  left: 0;
-  transform: translateX(var(--pf-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-c-popover__arrow--m-right--Rotate));
-}
-
-.pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow {
-  top: var(--pf-c-popover__arrow--Height);
-}
-
-.pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
-  top: auto;
-  bottom: 0;
-}
-
-.pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow {
-  left: var(--pf-c-popover__arrow--Width);
-}
-
-.pf-c-popover.pf-m-top-right .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
-  right: 0;
-  left: auto;
-}
-
-.pf-c-popover.pf-m-danger {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
-}
-
-.pf-c-popover.pf-m-warning {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
-}
-
-.pf-c-popover.pf-m-success {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
-}
-
-.pf-c-popover.pf-m-default {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
-}
-
-.pf-c-popover.pf-m-info {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
-}
-
-.pf-c-popover__content {
-  position: relative;
-  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
-  background-color: var(--pf-c-popover__content--BackgroundColor);
-}
-
-.pf-c-popover__content > .pf-c-title {
-  margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
-}
-
-.pf-c-popover__content > .pf-c-button {
-  position: absolute;
-  top: var(--pf-c-popover--c-button--Top);
-  right: var(--pf-c-popover--c-button--Right);
-}
-
-.pf-c-popover__content > .pf-c-button + * {
-  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
-}
-
-.pf-c-popover__arrow {
-  position: absolute;
-  width: var(--pf-c-popover__arrow--Width);
-  height: var(--pf-c-popover__arrow--Height);
-  pointer-events: none;
-  background-color: var(--pf-c-popover__arrow--BackgroundColor);
-  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
-}
-
-.pf-c-popover__title {
-  flex: 0 0 auto;
-  margin-bottom: var(--pf-c-popover__title--MarginBottom);
-  font-family: var(--pf-c-popover__title--FontFamily);
-  font-size: var(--pf-c-popover__title--FontSize);
-  line-height: var(--pf-c-popover__title--LineHeight);
-}
-
-.pf-c-popover__title.pf-m-icon {
-  display: flex;
-}
-
-.pf-c-popover__title-icon {
-  margin-right: var(--pf-c-popover__title-icon--MarginRight);
-  color: var(--pf-c-popover__title-icon--Color);
-}
-
-.pf-c-popover__title-text {
-  color: var(--pf-c-popover__title-text--Color, inherit);
-}
-
-.pf-c-popover__body {
-  word-wrap: break-word;
-}
-
-.pf-c-popover__footer {
-  margin-top: var(--pf-c-popover__footer--MarginTop);
-}
-
-:where(.pf-theme-dark) .pf-c-popover {
-  --pf-c-popover--BoxShadow: none;
-  --pf-c-popover__arrow--BoxShadow: none;
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
-  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
-}
-
-:where(.pf-theme-dark) .pf-c-popover,
-:where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
-  border: 4px solid var(--pf-global--BorderColor--400);
-}
-
 .pf-c-progress {
   --pf-c-progress--GridGap: var(--pf-global--spacer--md);
   --pf-c-progress__bar--before--BackgroundColor: var(--pf-global--primary-color--100);
@@ -17888,6 +17690,212 @@ label.pf-c-radio, .pf-c-radio__label,
   cursor: not-allowed;
 }
 
+.pf-c-popover {
+  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
+  --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
+  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
+  --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
+  --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
+  --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
+  --pf-c-popover--m-default__title-icon--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
+  --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
+  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
+  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--300);
+  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-popover__content--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
+  --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
+  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-popover__arrow--m-top--TranslateX: -50%;
+  --pf-c-popover__arrow--m-top--TranslateY: 50%;
+  --pf-c-popover__arrow--m-top--Rotate: 45deg;
+  --pf-c-popover__arrow--m-right--TranslateX: -50%;
+  --pf-c-popover__arrow--m-right--TranslateY: -50%;
+  --pf-c-popover__arrow--m-right--Rotate: 45deg;
+  --pf-c-popover__arrow--m-bottom--TranslateX: -50%;
+  --pf-c-popover__arrow--m-bottom--TranslateY: -50%;
+  --pf-c-popover__arrow--m-bottom--Rotate: 45deg;
+  --pf-c-popover__arrow--m-left--TranslateX: 50%;
+  --pf-c-popover__arrow--m-left--TranslateY: -50%;
+  --pf-c-popover__arrow--m-left--Rotate: 45deg;
+  --pf-c-popover--c-button--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-popover--c-button--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
+  --pf-c-popover--c-button--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
+  --pf-c-popover--c-button--sibling--PaddingRight: var(--pf-global--spacer--2xl);
+  --pf-c-popover--c-title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title--MarginBottom: var(--pf-global--spacer--sm);
+  --pf-c-popover__title--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-popover__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-popover__title--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
+  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
+  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
+  position: relative;
+  min-width: var(--pf-c-popover--MinWidth);
+  max-width: var(--pf-c-popover--MaxWidth);
+  font-size: var(--pf-c-popover--FontSize);
+  box-shadow: var(--pf-c-popover--BoxShadow);
+}
+
+.pf-c-popover.pf-m-no-padding {
+  --pf-c-popover__content--PaddingTop: 0px;
+  --pf-c-popover__content--PaddingRight: 0px;
+  --pf-c-popover__content--PaddingBottom: 0px;
+  --pf-c-popover__content--PaddingLeft: 0px;
+}
+
+.pf-c-popover.pf-m-width-auto {
+  --pf-c-popover--MinWidth: auto;
+  --pf-c-popover--MaxWidth: none;
+}
+
+.pf-c-popover.pf-m-top .pf-c-popover__arrow, .pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-top-right .pf-c-popover__arrow {
+  bottom: 0;
+  left: 50%;
+  transform: translateX(var(--pf-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-c-popover__arrow--m-top--Rotate));
+}
+
+.pf-c-popover.pf-m-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
+  top: 0;
+  left: 50%;
+  transform: translateX(var(--pf-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-popover__arrow--m-bottom--Rotate));
+}
+
+.pf-c-popover.pf-m-left .pf-c-popover__arrow, .pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow {
+  top: 50%;
+  right: 0;
+  transform: translateX(var(--pf-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-c-popover__arrow--m-left--Rotate));
+}
+
+.pf-c-popover.pf-m-right .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
+  top: 50%;
+  left: 0;
+  transform: translateX(var(--pf-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-c-popover__arrow--m-right--Rotate));
+}
+
+.pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow {
+  top: var(--pf-c-popover__arrow--Height);
+}
+
+.pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
+  top: auto;
+  bottom: 0;
+}
+
+.pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow {
+  left: var(--pf-c-popover__arrow--Width);
+}
+
+.pf-c-popover.pf-m-top-right .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
+  right: 0;
+  left: auto;
+}
+
+.pf-c-popover.pf-m-danger {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
+}
+
+.pf-c-popover.pf-m-warning {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
+}
+
+.pf-c-popover.pf-m-success {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
+}
+
+.pf-c-popover.pf-m-default {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-default__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-default__title-text--Color);
+}
+
+.pf-c-popover.pf-m-info {
+  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
+  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
+}
+
+.pf-c-popover__content {
+  position: relative;
+  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
+  background-color: var(--pf-c-popover__content--BackgroundColor);
+}
+
+.pf-c-popover__content > .pf-c-title {
+  margin-bottom: var(--pf-c-popover--c-title--MarginBottom);
+}
+
+.pf-c-popover__content > .pf-c-button {
+  position: absolute;
+  top: var(--pf-c-popover--c-button--Top);
+  right: var(--pf-c-popover--c-button--Right);
+}
+
+.pf-c-popover__content > .pf-c-button + * {
+  padding-right: var(--pf-c-popover--c-button--sibling--PaddingRight);
+}
+
+.pf-c-popover__arrow {
+  position: absolute;
+  width: var(--pf-c-popover__arrow--Width);
+  height: var(--pf-c-popover__arrow--Height);
+  pointer-events: none;
+  background-color: var(--pf-c-popover__arrow--BackgroundColor);
+  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
+}
+
+.pf-c-popover__title {
+  flex: 0 0 auto;
+  margin-bottom: var(--pf-c-popover__title--MarginBottom);
+  font-family: var(--pf-c-popover__title--FontFamily);
+  font-size: var(--pf-c-popover__title--FontSize);
+  line-height: var(--pf-c-popover__title--LineHeight);
+}
+
+.pf-c-popover__title.pf-m-icon {
+  display: flex;
+}
+
+.pf-c-popover__title-icon {
+  margin-right: var(--pf-c-popover__title-icon--MarginRight);
+  color: var(--pf-c-popover__title-icon--Color);
+}
+
+.pf-c-popover__title-text {
+  color: var(--pf-c-popover__title-text--Color, inherit);
+}
+
+.pf-c-popover__body {
+  word-wrap: break-word;
+}
+
+.pf-c-popover__footer {
+  margin-top: var(--pf-c-popover__footer--MarginTop);
+}
+
+:where(.pf-theme-dark) .pf-c-popover {
+  --pf-c-popover--BoxShadow: none;
+  --pf-c-popover__arrow--BoxShadow: none;
+  --pf-c-popover__arrow--BackgroundColor: var(--pf-c-popover__content--BackgroundColor);
+  --pf-c-popover--m-default__title-text--Color: var(--pf-global--default-color--200);
+  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
+  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
+}
+
+:where(.pf-theme-dark) .pf-c-popover,
+:where(.pf-theme-dark) .pf-c-popover .pf-c-popover__arrow {
+  border: 4px solid var(--pf-global--BorderColor--400);
+}
+
 .pf-c-select {
   --pf-global--Color--100: var(--pf-global--Color--dark-100);
   --pf-global--Color--200: var(--pf-global--Color--dark-200);