@patternfly/react-table 4.60.6 → 4.61.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.61.3 (2022-01-20)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+## 4.61.2 (2022-01-20)
+
+
+### Bug Fixes
+
+* **Select:** Fixed dot next to the spinner in grouped view more variant ([#6831](https://github.com/patternfly/patternfly-react/issues/6831)) ([ccc81b4](https://github.com/patternfly/patternfly-react/commit/ccc81b4c8c30506f28e61e73dcbc106da50ca692))
+
+
+
+
+
+## 4.61.1 (2022-01-20)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+
+
+
+
+# 4.61.0 (2022-01-20)
+
+
+### Features
+
+* **Truncate:** added Truncate component ([#6713](https://github.com/patternfly/patternfly-react/issues/6713)) ([c803b5d](https://github.com/patternfly/patternfly-react/commit/c803b5df3761f689172d79bbc71bc38623b0bf5a))
+
+
+
+
+
 ## 4.60.6 (2022-01-20)
 
 

package/dist/umd/react-table.css

@@ -386,6 +386,7 @@
   --pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
   color: var(--pf-global--Color--100);
   width: 100%;
   background-color: var(--pf-c-table--BackgroundColor);
@@ -433,6 +434,14 @@
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
 
+.pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
+.pf-c-table > .pf-m-striped > tr:nth-child(odd),
+.pf-c-table > .pf-m-striped-even > tr:nth-child(even),
+.pf-c-table tr.pf-m-striped {
+  --pf-c-table__sticky-column--BackgroundColor: var(--pf-c-table--m-striped__tr--BackgroundColor);
+  background: var(--pf-c-table--m-striped__tr--BackgroundColor);
+}
+
 .pf-c-table tr:not(.pf-c-table__expandable-row) {
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
@@ -5922,6 +5931,10 @@ label.pf-c-check, .pf-c-check__label,
   white-space: nowrap;
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
@@ -5934,6 +5947,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
@@ -14742,13 +14756,8 @@ ul.pf-c-list {
   background-color: var(--pf-c-masthead--BackgroundColor);
 }
 
-@media screen and (min-width: 1200px) {
-  .pf-c-masthead {
-    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-  }
-}
 @media screen and (min-width: 768px) {
-  .pf-c-masthead {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
     --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
     --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
     --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14768,6 +14777,15 @@ ul.pf-c-list {
     --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
   }
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+  }
+}
+.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
+  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+}
+
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -14835,6 +14853,10 @@ ul.pf-c-list {
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
 }
 
+.pf-c-masthead .pf-c-nav {
+  align-self: stretch;
+}
+
 .pf-c-masthead__main {
   position: relative;
   display: flex;
@@ -23340,6 +23362,12 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-toolbar--spacer: 0;
 }
 
+.pf-c-toolbar__group.pf-m-overflow-container,
+.pf-c-toolbar__item.pf-m-overflow-container {
+  flex: 1;
+  overflow: hidden;
+}
+
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -25694,6 +25722,40 @@ label.pf-c-radio, .pf-c-radio__label,
   box-shadow: var(--pf-c-panel__footer--BoxShadow);
 }
 
+.pf-c-truncate {
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
+.pf-c-truncate__end {
+  direction: rtl;
+}
+
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
+}
+
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;

package/dist/umd/react-table.js

@@ -4902,7 +4902,7 @@
             /* eslint-disable @typescript-eslint/no-unused-vars */
             const _a = this.props, { children, className, id, description, itemCount, value, onClick, isDisabled, isPlaceholder, isNoResultsOption, isSelected, isChecked, isFocused, sendRef, keyHandler, index, component, inputId, isFavorite, ariaIsFavoriteLabel = 'starred', ariaIsNotFavoriteLabel = 'not starred', isLoad, isLoading, setViewMoreNextIndex, 
             // eslint-disable-next-line no-console
-            isLastOptionBeforeFooter } = _a, props = __rest$1(_a, ["children", "className", "id", "description", "itemCount", "value", "onClick", "isDisabled", "isPlaceholder", "isNoResultsOption", "isSelected", "isChecked", "isFocused", "sendRef", "keyHandler", "index", "component", "inputId", "isFavorite", "ariaIsFavoriteLabel", "ariaIsNotFavoriteLabel", "isLoad", "isLoading", "setViewMoreNextIndex", "isLastOptionBeforeFooter"]);
+            isLastOptionBeforeFooter, isGrouped = false } = _a, props = __rest$1(_a, ["children", "className", "id", "description", "itemCount", "value", "onClick", "isDisabled", "isPlaceholder", "isNoResultsOption", "isSelected", "isChecked", "isFocused", "sendRef", "keyHandler", "index", "component", "inputId", "isFavorite", "ariaIsFavoriteLabel", "ariaIsNotFavoriteLabel", "isLoad", "isLoading", "setViewMoreNextIndex", "isLastOptionBeforeFooter", "isGrouped"]);
             /* eslint-enable @typescript-eslint/no-unused-vars */
             const Component = component;
             if (!id && isFavorite !== null) {
@@ -4925,56 +4925,78 @@
                 setViewMoreNextIndex();
                 onClick(event);
             };
-            return (React__namespace.createElement(SelectConsumer, null, ({ onSelect, onClose, variant, inputIdPrefix, onFavorite }) => (React__namespace.createElement(React__namespace.Fragment, null,
-                variant !== SelectVariant.checkbox && (React__namespace.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$b.selectListItem, !isLoad && !isLoading && _default$b.selectMenuWrapper, isFavorite && _default$b.modifiers.favorite, isFocused && _default$b.modifiers.focus, isLoading && _default$b.modifiers.loading), ref: this.liRef },
-                    isLoading && children,
-                    !isLoading && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$b.selectMenuItem, isLoad && _default$b.modifiers.load, isSelected && _default$b.modifiers.selected, isDisabled && _default$b.modifiers.disabled, description && _default$b.modifiers.description, isFavorite !== null && _default$b.modifiers.link, className), onClick: (event) => {
-                                if (isLoad) {
-                                    onViewMoreClick(event);
-                                    event.stopPropagation();
-                                }
-                                else if (!isDisabled && !isLoading) {
-                                    onClick(event);
-                                    onSelect(event, value, isPlaceholder);
-                                    onClose();
-                                }
-                            }, role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
-                                this.onKeyDown(event, 0);
-                            }, type: "button" }),
-                            description && (React__namespace.createElement(React__namespace.Fragment, null,
-                                React__namespace.createElement("span", { className: css(_default$b.selectMenuItemMain) },
+            const renderOption = (onSelect, onClose, variant, inputIdPrefix, onFavorite) => {
+                if (variant !== SelectVariant.checkbox && isLoading && isGrouped) {
+                    return (React__namespace.createElement("div", { role: "presentation", className: css(_default$b.selectListItem, isLoading && _default$b.modifiers.loading, className) }, children));
+                }
+                else if (variant !== SelectVariant.checkbox && isLoad && isGrouped) {
+                    return (React__namespace.createElement("div", null,
+                        React__namespace.createElement("button", Object.assign({}, props, { role: "presentation", className: css(_default$b.selectMenuItem, _default$b.modifiers.load, className), onClick: (event) => {
+                                onViewMoreClick(event);
+                                event.stopPropagation();
+                            }, ref: this.ref, type: "button" }), children || value.toString())));
+                }
+                else if (variant !== SelectVariant.checkbox) {
+                    return (React__namespace.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$b.selectListItem, !isLoad && !isLoading && _default$b.selectMenuWrapper, isFavorite && _default$b.modifiers.favorite, isFocused && _default$b.modifiers.focus, isLoading && _default$b.modifiers.loading), ref: this.liRef },
+                        isLoading && children,
+                        isLoad && !isGrouped && (React__namespace.createElement("button", Object.assign({}, props, { className: css(_default$b.selectMenuItem, _default$b.modifiers.load, className), onClick: (event) => {
+                                onViewMoreClick(event);
+                                event.stopPropagation();
+                            }, ref: this.ref, type: "button" }), itemDisplay)),
+                        !isLoading && !isLoad && (React__namespace.createElement(React__namespace.Fragment, null,
+                            React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$b.selectMenuItem, isLoad && _default$b.modifiers.load, isSelected && _default$b.modifiers.selected, isDisabled && _default$b.modifiers.disabled, description && _default$b.modifiers.description, isFavorite !== null && _default$b.modifiers.link, className), onClick: (event) => {
+                                    if (!isDisabled) {
+                                        onClick(event);
+                                        onSelect(event, value, isPlaceholder);
+                                        onClose();
+                                    }
+                                }, role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
+                                    this.onKeyDown(event, 0);
+                                }, type: "button" }),
+                                description && (React__namespace.createElement(React__namespace.Fragment, null,
+                                    React__namespace.createElement("span", { className: css(_default$b.selectMenuItemMain) },
+                                        itemDisplay,
+                                        isSelected && (React__namespace.createElement("span", { className: css(_default$b.selectMenuItemIcon) },
+                                            React__namespace.createElement(CheckIcon$1, { "aria-hidden": true })))),
+                                    React__namespace.createElement("span", { className: css(_default$b.selectMenuItemDescription) }, description))),
+                                !description && (React__namespace.createElement(React__namespace.Fragment, null,
                                     itemDisplay,
                                     isSelected && (React__namespace.createElement("span", { className: css(_default$b.selectMenuItemIcon) },
-                                        React__namespace.createElement(CheckIcon$1, { "aria-hidden": true })))),
-                                React__namespace.createElement("span", { className: css(_default$b.selectMenuItemDescription) }, description))),
-                            !description && (React__namespace.createElement(React__namespace.Fragment, null,
-                                itemDisplay,
-                                isSelected && (React__namespace.createElement("span", { className: css(_default$b.selectMenuItemIcon) },
-                                    React__namespace.createElement(CheckIcon$1, { "aria-hidden": true })))))),
-                        isFavorite !== null && id && favoriteButton(onFavorite))))),
-                variant === SelectVariant.checkbox && isLoad && (React__namespace.createElement("button", { className: css(_default$b.selectMenuItem, _default$b.modifiers.load, isFocused && _default$b.modifiers.focus, className), onKeyDown: (event) => {
-                        this.onKeyDown(event, 0, undefined, true);
-                    }, onClick: (event) => {
-                        onViewMoreClick(event);
-                        event.stopPropagation();
-                    }, ref: this.ref }, children || (value && value.toString && value.toString()))),
-                variant === SelectVariant.checkbox && isLoading && (React__namespace.createElement("div", { className: css(_default$b.selectListItem, isLoading && _default$b.modifiers.loading, className) }, children)),
-                variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad && (React__namespace.createElement("label", Object.assign({}, props, { className: css(_default$9.check, _default$b.selectMenuItem, isDisabled && _default$b.modifiers.disabled, description && _default$b.modifiers.description, className), onKeyDown: (event) => {
-                        this.onKeyDown(event, 0, undefined, true);
-                    } }),
-                    React__namespace.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$9.checkInput), type: "checkbox", onChange: event => {
-                            if (!isDisabled) {
-                                onClick(event);
-                                onSelect(event, value);
-                            }
-                        }, ref: this.ref, checked: isChecked || false, disabled: isDisabled }),
-                    React__namespace.createElement("span", { className: css(_default$9.checkLabel, isDisabled && _default$b.modifiers.disabled) }, itemDisplay),
-                    description && React__namespace.createElement("div", { className: css(_default$9.checkDescription) }, description))),
-                variant === SelectVariant.checkbox && isNoResultsOption && !isLoading && !isLoad && (React__namespace.createElement("div", null,
-                    React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$b.selectMenuItem, isSelected && _default$b.modifiers.selected, isDisabled && _default$b.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
+                                        React__namespace.createElement(CheckIcon$1, { "aria-hidden": true })))))),
+                            isFavorite !== null && id && favoriteButton(onFavorite)))));
+                }
+                else if (variant === SelectVariant.checkbox && isLoad) {
+                    return (React__namespace.createElement("button", { className: css(_default$b.selectMenuItem, _default$b.modifiers.load, isFocused && _default$b.modifiers.focus, className), onKeyDown: (event) => {
                             this.onKeyDown(event, 0, undefined, true);
-                        }, type: "button" }), itemDisplay)))))));
+                        }, onClick: (event) => {
+                            onViewMoreClick(event);
+                            event.stopPropagation();
+                        }, ref: this.ref }, children || (value && value.toString && value.toString())));
+                }
+                else if (variant === SelectVariant.checkbox && isLoading) {
+                    return (React__namespace.createElement("div", { className: css(_default$b.selectListItem, isLoading && _default$b.modifiers.loading, className) }, children));
+                }
+                else if (variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad) {
+                    return (React__namespace.createElement("label", Object.assign({}, props, { className: css(_default$9.check, _default$b.selectMenuItem, isDisabled && _default$b.modifiers.disabled, description && _default$b.modifiers.description, className), onKeyDown: (event) => {
+                            this.onKeyDown(event, 0, undefined, true);
+                        } }),
+                        React__namespace.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$9.checkInput), type: "checkbox", onChange: event => {
+                                if (!isDisabled) {
+                                    onClick(event);
+                                    onSelect(event, value);
+                                }
+                            }, ref: this.ref, checked: isChecked || false, disabled: isDisabled }),
+                        React__namespace.createElement("span", { className: css(_default$9.checkLabel, isDisabled && _default$b.modifiers.disabled) }, itemDisplay),
+                        description && React__namespace.createElement("div", { className: css(_default$9.checkDescription) }, description)));
+                }
+                else if (variant === SelectVariant.checkbox && isNoResultsOption && !isLoading && !isLoad) {
+                    return (React__namespace.createElement("div", null,
+                        React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$b.selectMenuItem, isSelected && _default$b.modifiers.selected, isDisabled && _default$b.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
+                                this.onKeyDown(event, 0, undefined, true);
+                            }, type: "button" }), itemDisplay)));
+                }
+            };
+            return (React__namespace.createElement(SelectConsumer, null, ({ onSelect, onClose, variant, inputIdPrefix, onFavorite }) => (React__namespace.createElement(React__namespace.Fragment, null, renderOption(onSelect, onClose, variant, inputIdPrefix, onFavorite)))));
         }
     }
     SelectOption.displayName = 'SelectOption';
@@ -5982,11 +6004,11 @@
             if (isOpen) {
                 if (renderableItems.find(item => { var _a; return ((_a = item) === null || _a === void 0 ? void 0 : _a.key) === 'loading'; }) === undefined) {
                     if (loadingVariant === 'spinner') {
-                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoading: true, key: "loading", value: "loading" },
+                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoading: true, key: "loading", value: "loading", isGrouped: true },
                             React__namespace.createElement(Spinner, { size: "lg" })));
                     }
                     else if (loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.text) {
-                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoad: true, key: "loading", value: loadingVariant.text, setViewMoreNextIndex: this.setVieMoreNextIndex, onClick: loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.onClick }));
+                        renderableItems.push(React__namespace.createElement(SelectOption, { isLoad: true, key: "loading", value: loadingVariant.text, isGrouped: true, setViewMoreNextIndex: this.setVieMoreNextIndex, onClick: loadingVariant === null || loadingVariant === void 0 ? void 0 : loadingVariant.onClick }));
                     }
                 }
             }
@@ -6647,6 +6669,9 @@
         "visibleOn_2xl": "pf-m-visible-on-2xl",
         "fixed": "pf-m-fixed",
         "stickyHeader": "pf-m-sticky-header",
+        "striped": "pf-m-striped",
+        "expandable": "pf-m-expandable",
+        "stripedEven": "pf-m-striped-even",
         "ghostRow": "pf-m-ghost-row",
         "center": "pf-m-center",
         "help": "pf-m-help",

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

@@ -386,6 +386,7 @@
   --pf-c-table--thead--m-nested-column-header--tr--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-table--thead--m-nested-column-header--tr--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-table__subhead--Color: var(--pf-global--Color--200);
+  --pf-c-table--m-striped__tr--BackgroundColor: var(--pf-global--BackgroundColor--light-200);
   color: var(--pf-global--Color--100);
   width: 100%;
   background-color: var(--pf-c-table--BackgroundColor);
@@ -433,6 +434,14 @@
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
 
+.pf-c-table.pf-m-striped:not(.pf-m-expandable) > tbody > tr:nth-child(odd), .pf-c-table.pf-m-striped.pf-m-expandable > tbody:nth-of-type(odd) > tr:not(.pf-c-table__expandable-row),
+.pf-c-table > .pf-m-striped > tr:nth-child(odd),
+.pf-c-table > .pf-m-striped-even > tr:nth-child(even),
+.pf-c-table tr.pf-m-striped {
+  --pf-c-table__sticky-column--BackgroundColor: var(--pf-c-table--m-striped__tr--BackgroundColor);
+  background: var(--pf-c-table--m-striped__tr--BackgroundColor);
+}
+
 .pf-c-table tr:not(.pf-c-table__expandable-row) {
   border-bottom: var(--pf-c-table--border-width--base) solid var(--pf-c-table--BorderColor);
 }
@@ -5922,6 +5931,10 @@ label.pf-c-check, .pf-c-check__label,
   white-space: nowrap;
 }
 
+.pf-c-dropdown__toggle-text {
+  flex: 0 1 auto;
+}
+
 .pf-c-dropdown__toggle-icon {
   margin-right: var(--pf-c-dropdown__toggle-icon--MarginRight);
   margin-left: var(--pf-c-dropdown__toggle-icon--MarginLeft);
@@ -5934,6 +5947,7 @@ label.pf-c-check, .pf-c-check__label,
 
 .pf-c-dropdown__toggle-image {
   display: inline-flex;
+  flex-shrink: 0;
   margin-top: var(--pf-c-dropdown__toggle-image--MarginTop);
   margin-right: var(--pf-c-dropdown__toggle-image--MarginRight);
   margin-bottom: var(--pf-c-dropdown__toggle-image--MarginBottom);
@@ -14742,13 +14756,8 @@ ul.pf-c-list {
   background-color: var(--pf-c-masthead--BackgroundColor);
 }
 
-@media screen and (min-width: 1200px) {
-  .pf-c-masthead {
-    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-  }
-}
 @media screen and (min-width: 768px) {
-  .pf-c-masthead {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
     --pf-c-masthead--GridTemplateColumns: var(--pf-c-masthead--m-display-inline--GridTemplateColumns);
     --pf-c-masthead__main--GridColumn: var(--pf-c-masthead--m-display-inline__main--GridColumn);
     --pf-c-masthead__main--MinHeight: var(--pf-c-masthead--m-display-inline__main--MinHeight);
@@ -14768,6 +14777,15 @@ ul.pf-c-list {
     --pf-c-masthead__content--c-nav--m-horizontal--MarginLeft: var(--pf-c-masthead--m-display-inline__content--c-nav--m-horizontal--MarginLeft);
   }
 }
+@media screen and (min-width: 1200px) {
+  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+    --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+  }
+}
+.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
+  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
+}
+
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -14835,6 +14853,10 @@ ul.pf-c-list {
   --pf-c-dropdown__toggle--before--BorderLeftColor: var(--pf-c-masthead--c-dropdown--m-full-height__toggle--before--BorderLeftColor);
 }
 
+.pf-c-masthead .pf-c-nav {
+  align-self: stretch;
+}
+
 .pf-c-masthead__main {
   position: relative;
   display: flex;
@@ -23340,6 +23362,12 @@ label.pf-c-radio, .pf-c-radio__label,
   --pf-c-toolbar--spacer: 0;
 }
 
+.pf-c-toolbar__group.pf-m-overflow-container,
+.pf-c-toolbar__item.pf-m-overflow-container {
+  flex: 1;
+  overflow: hidden;
+}
+
 .pf-c-toolbar__expand-all-icon {
   display: inline-block;
   transition: var(--pf-c-toolbar__expand-all-icon--Transition);
@@ -25694,6 +25722,40 @@ label.pf-c-radio, .pf-c-radio__label,
   box-shadow: var(--pf-c-panel__footer--BoxShadow);
 }
 
+.pf-c-truncate {
+  --pf-c-truncate--MinWidth: 12ch;
+  --pf-c-truncate__start--MinWidth: 6ch;
+  display: inline-grid;
+  grid-auto-flow: column;
+  align-items: baseline;
+  min-width: var(--pf-c-truncate--MinWidth);
+}
+
+.pf-c-truncate__start,
+.pf-c-truncate__end {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pf-c-truncate__start {
+  min-width: var(--pf-c-truncate__start--MinWidth);
+}
+
+.pf-c-truncate__end {
+  direction: rtl;
+}
+
+.pf-c-truncate__start + .pf-c-truncate__end {
+  overflow: visible;
+  direction: ltr;
+}
+
+@supports (-webkit-hyphens: none) {
+  .pf-c-truncate__end {
+    direction: ltr;
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;