@patternfly/react-core 4.202.36 → 4.203.1

package/dist/umd/react-core.js

@@ -15167,7 +15167,7 @@
             this.displayName = 'MenuToggleBase';
         }
         render() {
-            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, variant, innerRef } = _a, props = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "variant", "innerRef"]);
+            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, variant, innerRef } = _a, props = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "variant", "innerRef"]);
             const isPlain = variant === 'plain';
             const isPlainText = variant === 'plainText';
             const content = (React__namespace.createElement(React__namespace.Fragment, null,
@@ -15177,7 +15177,7 @@
                 React__namespace.createElement("span", { className: css(styles$y.menuToggleControls) },
                     React__namespace.createElement("span", { className: css(styles$y.menuToggleToggleIcon) },
                         React__namespace.createElement(CaretDownIcon$1, { "aria-hidden": true })))));
-            return (React__namespace.createElement("button", Object.assign({ className: css(styles$y.menuToggle, isExpanded && styles$y.modifiers.expanded, variant === 'primary' && styles$y.modifiers.primary, variant === 'secondary' && styles$y.modifiers.secondary, (isPlain || isPlainText) && styles$y.modifiers.plain, isPlainText && styles$y.modifiers.text, isFullHeight && styles$y.modifiers.fullHeight, className), type: "button", "aria-expanded": false, ref: innerRef }, (isExpanded && { 'aria-expanded': true }), (isDisabled && { disabled: true }), props),
+            return (React__namespace.createElement("button", Object.assign({ className: css(styles$y.menuToggle, isExpanded && styles$y.modifiers.expanded, variant === 'primary' && styles$y.modifiers.primary, variant === 'secondary' && styles$y.modifiers.secondary, (isPlain || isPlainText) && styles$y.modifiers.plain, isPlainText && styles$y.modifiers.text, isFullHeight && styles$y.modifiers.fullHeight, isFullWidth && styles$y.modifiers.fullWidth, className), type: "button", "aria-expanded": false, ref: innerRef }, (isExpanded && { 'aria-expanded': true }), (isDisabled && { disabled: true }), props),
                 isPlain && children,
                 !isPlain && content));
         }
@@ -15186,6 +15186,7 @@
         className: '',
         isExpanded: false,
         isDisabled: false,
+        isFullWidth: false,
         isFullHeight: false,
         variant: 'default'
     };
@@ -15749,7 +15750,7 @@
     var FileIcon$1 = FileIcon;
 
     const MultipleFileUploadStatusItem = (_a) => {
-        var { className, file, fileIcon, onReadStarted = () => { }, onReadFinished = () => { }, onReadSuccess = () => { }, onReadFail = () => { }, onClearClick = () => { }, customFileHandler, fileName, fileSize, progressValue, progressVariant, progressAriaLabel, progressAriaLabelledBy, buttonAriaLabel = 'Remove from list' } = _a, props = __rest$1(_a, ["className", "file", "fileIcon", "onReadStarted", "onReadFinished", "onReadSuccess", "onReadFail", "onClearClick", "customFileHandler", "fileName", "fileSize", "progressValue", "progressVariant", "progressAriaLabel", "progressAriaLabelledBy", "buttonAriaLabel"]);
+        var { className, file, fileIcon, onReadStarted = () => { }, onReadFinished = () => { }, onReadSuccess = () => { }, onReadFail = () => { }, onClearClick = () => { }, customFileHandler, fileName, fileSize, progressValue, progressVariant, progressAriaLabel, progressAriaLabelledBy, progressId, buttonAriaLabel = 'Remove from list' } = _a, props = __rest$1(_a, ["className", "file", "fileIcon", "onReadStarted", "onReadFinished", "onReadSuccess", "onReadFail", "onClearClick", "customFileHandler", "fileName", "fileSize", "progressValue", "progressVariant", "progressAriaLabel", "progressAriaLabelledBy", "progressId", "buttonAriaLabel"]);
         const [loadPercentage, setLoadPercentage] = React__namespace.useState(0);
         const [loadResult, setLoadResult] = React__namespace.useState();
         function readFile(file) {
@@ -15803,7 +15804,7 @@
         return (React__namespace.createElement("li", Object.assign({ className: css(styles$x.multipleFileUploadStatusItem, className) }, props),
             React__namespace.createElement("div", { className: styles$x.multipleFileUploadStatusItemIcon }, fileIcon || React__namespace.createElement(FileIcon$1, null)),
             React__namespace.createElement("div", { className: styles$x.multipleFileUploadStatusItemMain },
-                React__namespace.createElement(Progress, { title: title, value: progressValue || loadPercentage, variant: progressVariant || loadResult, "aria-label": progressAriaLabel, "aria-labelledby": progressAriaLabelledBy })),
+                React__namespace.createElement(Progress, { title: title, value: progressValue || loadPercentage, variant: progressVariant || loadResult, "aria-label": progressAriaLabel, "aria-labelledby": progressAriaLabelledBy, id: progressId })),
             React__namespace.createElement("div", { className: styles$x.multipleFileUploadStatusItemClose },
                 React__namespace.createElement(Button, { variant: "plain", "aria-label": buttonAriaLabel, onClick: onClearClick },
                     React__namespace.createElement(TimesCircleIcon$1, null)))));
@@ -17021,13 +17022,19 @@
     };
 
     let toggleId = 0;
-    const OptionsToggle = ({ itemsTitle = 'items', optionsToggle = 'Items per page', 
+    const OptionsToggle = ({ itemsTitle = 'items', optionsToggle, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     itemsPerPageTitle = 'Items per page', ofWord = 'of', firstIndex = 0, lastIndex = 0, itemCount, widgetId = '', showToggle = true, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    onToggle = (_isOpen) => undefined, isOpen = false, isDisabled = false, parentRef = null, toggleTemplate: ToggleTemplate, onEnter = null }) => (React__namespace.createElement("div", { className: css(styles$s.optionsMenuToggle, isDisabled && styles$s.modifiers.disabled, styles$s.modifiers.plain, styles$s.modifiers.text) }, showToggle && (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("span", { className: css(styles$s.optionsMenuToggleText) }, typeof ToggleTemplate === 'string' ? (fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })) : (React__namespace.createElement(ToggleTemplate, { firstIndex: firstIndex, lastIndex: lastIndex, ofWord: ofWord, itemCount: itemCount, itemsTitle: itemsTitle }))),
-        React__namespace.createElement(DropdownToggle, { onEnter: onEnter, "aria-label": optionsToggle, onToggle: onToggle, isDisabled: isDisabled || (itemCount && itemCount <= 0), isOpen: isOpen, id: `${widgetId}-toggle-${toggleId++}`, className: styles$s.optionsMenuToggleButton, parentRef: parentRef })))));
+    onToggle = (_isOpen) => undefined, isOpen = false, isDisabled = false, parentRef = null, toggleTemplate: ToggleTemplate, onEnter = null, perPageComponent = 'div' }) => {
+        const isDiv = perPageComponent === 'div';
+        const toggleClasses = css(styles$s.optionsMenuToggle, isDisabled && styles$s.modifiers.disabled, styles$s.modifiers.plain, styles$s.modifiers.text);
+        const template = typeof ToggleTemplate === 'string' ? (fillTemplate(ToggleTemplate, { firstIndex, lastIndex, ofWord, itemCount, itemsTitle })) : (React__namespace.createElement(ToggleTemplate, { firstIndex: firstIndex, lastIndex: lastIndex, ofWord: ofWord, itemCount: itemCount, itemsTitle: itemsTitle }));
+        const dropdown = showToggle && (React__namespace.createElement(React__namespace.Fragment, null,
+            isDiv && React__namespace.createElement("span", { className: css(styles$s.optionsMenuToggleText) }, template),
+            React__namespace.createElement(DropdownToggle, { onEnter: onEnter, "aria-label": isDiv ? optionsToggle || 'Items per page' : optionsToggle, onToggle: onToggle, isDisabled: isDisabled || (itemCount && itemCount <= 0), isOpen: isOpen, id: `${widgetId}-toggle-${toggleId++}`, className: isDiv ? styles$s.optionsMenuToggleButton : toggleClasses, parentRef: parentRef, "aria-haspopup": "listbox" }, !isDiv && template)));
+        return isDiv ? React__namespace.createElement("div", { className: toggleClasses }, dropdown) : dropdown;
+    };
     OptionsToggle.displayName = 'OptionsToggle';
 
     class PaginationOptionsMenu extends React__namespace.Component {
@@ -17070,12 +17077,12 @@
             };
         }
         render() {
-            const { widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle, ofWord } = this.props;
+            const { widgetId, isDisabled, itemsPerPageTitle, dropDirection, optionsToggle, perPageOptions, toggleTemplate, firstIndex, lastIndex, itemCount, itemsTitle, ofWord, perPageComponent } = this.props;
             const { isOpen } = this.state;
             return (React__namespace.createElement(DropdownContext.Provider, { value: {
                     id: widgetId,
                     onSelect: this.onSelect,
-                    toggleIndicatorClass: styles$s.optionsMenuToggleButtonIcon,
+                    toggleIndicatorClass: perPageComponent === 'div' ? styles$s.optionsMenuToggleButtonIcon : styles$s.optionsMenuToggleIcon,
                     toggleTextClass: styles$s.optionsMenuToggleText,
                     menuClass: styles$s.optionsMenuMenu,
                     itemClass: styles$s.optionsMenuMenuItem,
@@ -17086,7 +17093,7 @@
                     baseComponent: 'div',
                     ouiaComponentType: PaginationOptionsMenu.displayName
                 } },
-                React__namespace.createElement(DropdownWithContext, { direction: dropDirection, isOpen: isOpen, toggle: React__namespace.createElement(OptionsToggle, { optionsToggle: optionsToggle, itemsPerPageTitle: itemsPerPageTitle, showToggle: perPageOptions && perPageOptions.length > 0, onToggle: this.onToggle, isOpen: isOpen, widgetId: widgetId, firstIndex: firstIndex, lastIndex: lastIndex, itemCount: itemCount, itemsTitle: itemsTitle, ofWord: ofWord, toggleTemplate: toggleTemplate, parentRef: this.parentRef.current, isDisabled: isDisabled }), dropdownItems: this.renderItems(), isPlain: true })));
+                React__namespace.createElement(DropdownWithContext, { direction: dropDirection, isOpen: isOpen, toggle: React__namespace.createElement(OptionsToggle, { optionsToggle: optionsToggle, itemsPerPageTitle: itemsPerPageTitle, showToggle: perPageOptions && perPageOptions.length > 0, onToggle: this.onToggle, isOpen: isOpen, widgetId: widgetId, firstIndex: firstIndex, lastIndex: lastIndex, itemCount: itemCount, itemsTitle: itemsTitle, ofWord: ofWord, toggleTemplate: toggleTemplate, parentRef: this.parentRef.current, isDisabled: isDisabled, perPageComponent: perPageComponent }), dropdownItems: this.renderItems(), isPlain: true })));
         }
     }
     PaginationOptionsMenu.displayName = 'PaginationOptionsMenu';
@@ -17098,7 +17105,7 @@
         perPageOptions: [],
         itemsPerPageTitle: 'Items per page',
         perPageSuffix: 'per page',
-        optionsToggle: 'Items per page',
+        optionsToggle: '',
         ofWord: 'of',
         perPage: 0,
         firstIndex: 0,
@@ -17106,7 +17113,8 @@
         defaultToFullPage: false,
         itemsTitle: 'items',
         toggleTemplate: ToggleTemplate,
-        onPerPageSelect: () => null
+        onPerPageSelect: () => null,
+        perPageComponent: 'div'
     };
 
     const c_pagination__nav_page_select_c_form_control_width_chars = {
@@ -17176,7 +17184,7 @@
             }
         }
         render() {
-            const _a = this.props, { children, className, variant, isDisabled, isCompact, isStatic, isSticky, perPage, titles, firstPage, page: propPage, offset, defaultToFullPage, itemCount, itemsStart, itemsEnd, perPageOptions, dropDirection: dropDirectionProp, widgetId, toggleTemplate, onSetPage, onPerPageSelect, onFirstClick, onPreviousClick, onNextClick, onPageInput, onLastClick, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "variant", "isDisabled", "isCompact", "isStatic", "isSticky", "perPage", "titles", "firstPage", "page", "offset", "defaultToFullPage", "itemCount", "itemsStart", "itemsEnd", "perPageOptions", "dropDirection", "widgetId", "toggleTemplate", "onSetPage", "onPerPageSelect", "onFirstClick", "onPreviousClick", "onNextClick", "onPageInput", "onLastClick", "ouiaId", "ouiaSafe"]);
+            const _a = this.props, { children, className, variant, isDisabled, isCompact, isStatic, isSticky, perPage, titles, firstPage, page: propPage, offset, defaultToFullPage, itemCount, itemsStart, itemsEnd, perPageOptions, dropDirection: dropDirectionProp, widgetId, toggleTemplate, onSetPage, onPerPageSelect, onFirstClick, onPreviousClick, onNextClick, onPageInput, onLastClick, ouiaId, ouiaSafe, perPageComponent } = _a, props = __rest$1(_a, ["children", "className", "variant", "isDisabled", "isCompact", "isStatic", "isSticky", "perPage", "titles", "firstPage", "page", "offset", "defaultToFullPage", "itemCount", "itemsStart", "itemsEnd", "perPageOptions", "dropDirection", "widgetId", "toggleTemplate", "onSetPage", "onPerPageSelect", "onFirstClick", "onPreviousClick", "onNextClick", "onPageInput", "onLastClick", "ouiaId", "ouiaSafe", "perPageComponent"]);
             const dropDirection = dropDirectionProp || (variant === 'bottom' && !isStatic ? 'up' : 'down');
             let page = propPage;
             if (!page && offset) {
@@ -17208,7 +17216,7 @@
                         typeof toggleTemplate !== 'string' &&
                         toggleTemplate(toggleTemplateProps),
                     !toggleTemplate && (React__namespace.createElement(ToggleTemplate, { firstIndex: firstIndex, lastIndex: lastIndex, itemCount: itemCount, itemsTitle: titles.items, ofWord: titles.ofWord })))),
-                React__namespace.createElement(PaginationOptionsMenu, { itemsPerPageTitle: titles.itemsPerPage, perPageSuffix: titles.perPageSuffix, itemsTitle: isCompact ? '' : titles.items, optionsToggle: titles.optionsToggle, perPageOptions: perPageOptions, firstIndex: itemsStart !== null ? itemsStart : firstIndex, lastIndex: itemsEnd !== null ? itemsEnd : lastIndex, ofWord: titles.ofWord, defaultToFullPage: defaultToFullPage, itemCount: itemCount, page: page, perPage: perPage, lastPage: lastPage, onPerPageSelect: onPerPageSelect, dropDirection: dropDirection, widgetId: widgetId, toggleTemplate: toggleTemplate, isDisabled: isDisabled }),
+                React__namespace.createElement(PaginationOptionsMenu, { itemsPerPageTitle: titles.itemsPerPage, perPageSuffix: titles.perPageSuffix, itemsTitle: isCompact ? '' : titles.items, optionsToggle: titles.optionsToggle, perPageOptions: perPageOptions, firstIndex: itemsStart !== null ? itemsStart : firstIndex, lastIndex: itemsEnd !== null ? itemsEnd : lastIndex, ofWord: titles.ofWord, defaultToFullPage: defaultToFullPage, itemCount: itemCount, page: page, perPage: perPage, lastPage: lastPage, onPerPageSelect: onPerPageSelect, dropDirection: dropDirection, widgetId: widgetId, toggleTemplate: toggleTemplate, isDisabled: isDisabled, perPageComponent: perPageComponent }),
                 React__namespace.createElement(Navigation, { pagesTitle: titles.page, pagesTitlePlural: titles.pages, toLastPage: titles.toLastPage, toPreviousPage: titles.toPreviousPage, toNextPage: titles.toNextPage, toFirstPage: titles.toFirstPage, currPage: titles.currPage, paginationTitle: titles.paginationTitle, ofWord: titles.ofWord, page: itemCount && itemCount <= 0 ? 0 : page, perPage: perPage, itemCount: itemCount, firstPage: itemsStart !== null ? itemsStart : 1, lastPage: lastPage, onSetPage: onSetPage, onFirstClick: onFirstClick, onPreviousClick: onPreviousClick, onNextClick: onNextClick, onLastClick: onLastClick, onPageInput: onPageInput, isDisabled: isDisabled, isCompact: isCompact }),
                 children));
         }
@@ -17232,7 +17240,7 @@
             toPreviousPage: 'Go to previous page',
             toLastPage: 'Go to last page',
             toNextPage: 'Go to next page',
-            optionsToggle: 'Items per page',
+            optionsToggle: '',
             currPage: 'Current page',
             paginationTitle: 'Pagination',
             ofWord: 'of'
@@ -17252,7 +17260,8 @@
         onNextClick: () => undefined,
         onPageInput: () => undefined,
         onLastClick: () => undefined,
-        ouiaSafe: true
+        ouiaSafe: true,
+        perPageComponent: 'div'
     };
 
     Promise.resolve().then(function () { return progressStepper; });
@@ -18132,6 +18141,7 @@
         "scrollable": "pf-m-scrollable",
         "secondary": "pf-m-secondary",
         "noBorderBottom": "pf-m-no-border-bottom",
+        "borderBottom": "pf-m-border-bottom",
         "box": "pf-m-box",
         "vertical": "pf-m-vertical",
         "current": "pf-m-current",

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

@@ -773,6 +773,7 @@
   --pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element) - var(--pf-c-form-control--focus--BorderBottomWidth));
   --pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100);
   --pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200);
+  --pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100);
   --pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100);
   --pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300);
   --pf-c-form-control--disabled--BorderColor: transparent;
@@ -1059,6 +1060,14 @@ select.pf-c-form-control.pf-m-placeholder {
   color: var(--pf-c-form-control--placeholder--Color);
 }
 
+select.pf-c-form-control.pf-m-placeholder * {
+  color: var(--pf-c-form-control--placeholder--child--Color);
+}
+
+select.pf-c-form-control.pf-m-placeholder *:disabled {
+  color: revert;
+}
+
 textarea.pf-c-form-control {
   --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
   --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
@@ -2715,6 +2724,7 @@ button.pf-c-breadcrumb__link {
   --pf-c-card--m-selectable-raised--m-selected-raised--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base);
   --pf-c-card--m-flat--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-flat--BorderWidth));
   --pf-c-card--m-rounded--m-selectable-raised--m-selected-raised--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY--base) + var(--pf-c-card--m-rounded--BorderRadius));
+  --pf-c-card--m-selectable-raised--m-selected-raised--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-card--m-selectable-raised--m-selected-raised--Transition: transform .25s linear, box-shadow .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--Transition: transform .25s linear;
   --pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY: calc(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY) * -1);
@@ -2834,6 +2844,7 @@ button.pf-c-breadcrumb__link {
   --pf-c-card--m-selectable-raised--before--Transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--Transition);
   --pf-c-card--m-selectable-raised--before--TranslateY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--TranslateY);
   --pf-c-card--m-selectable-raised--before--ScaleY: var(--pf-c-card--m-selectable-raised--m-selected-raised--before--ScaleY);
+  z-index: var(--pf-c-card--m-selectable-raised--m-selected-raised--ZIndex);
   box-shadow: var(--pf-c-card--m-selectable-raised--m-selected-raised--BoxShadow);
   transition: var(--pf-c-card--m-selectable-raised--m-selected-raised--Transition);
   transform: translateY(var(--pf-c-card--m-selectable-raised--m-selected-raised--TranslateY));
@@ -18166,6 +18177,11 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs__link--disabled--before--BorderBottomWidth: 0;
 }
 
+.pf-c-tabs.pf-m-border-bottom {
+  --pf-c-tabs--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+  --pf-c-tabs__link--disabled--before--BorderBottomWidth: var(--pf-c-tabs--before--border-width--base);
+}
+
 .pf-c-tabs.pf-m-box .pf-c-tabs__link, .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
   --pf-c-tabs__link--after--BorderBottomWidth: 0;
 }