@patternfly/react-core 4.202.6 → 4.202.9

package/dist/umd/react-core.css

@@ -17051,6 +17051,83 @@ label.pf-c-radio, .pf-c-radio__label,
   box-shadow: var(--pf-c-select__menu-footer--BoxShadow);
 }
 
+.pf-c-simple-list {
+  --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
+  --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
+  --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
+  --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
+}
+
+.pf-c-simple-list__item-link {
+  display: block;
+  width: 100%;
+  padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
+  font-size: var(--pf-c-simple-list__item-link--FontSize);
+  font-weight: var(--pf-c-simple-list__item-link--FontWeight);
+  color: var(--pf-c-simple-list__item-link--Color);
+  text-align: left;
+  background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
+  border: none;
+}
+
+.pf-c-simple-list__item-link:hover {
+  text-decoration: none;
+  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
+  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+}
+
+.pf-c-simple-list__item-link:focus {
+  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
+  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
+  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
+}
+
+.pf-c-simple-list__item-link:active {
+  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
+  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
+  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
+}
+
+.pf-c-simple-list__item-link.pf-m-current {
+  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
+  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
+  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
+}
+
+.pf-c-simple-list__title {
+  padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
+  font-size: var(--pf-c-simple-list__title--FontSize);
+  font-weight: var(--pf-c-simple-list__title--FontWeight);
+  color: var(--pf-c-simple-list__title--Color);
+}
+
+.pf-c-simple-list__section + .pf-c-simple-list__section {
+  margin-top: var(--pf-c-simple-list__section--section--MarginTop);
+}
+
 .pf-c-skeleton {
   --pf-c-skeleton--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-skeleton--Width: auto;
@@ -25612,83 +25689,6 @@ svg.pf-c-spinner.pf-m-xl {
   margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
 }
 
-.pf-c-simple-list {
-  --pf-c-simple-list__item-link--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-simple-list__item-link--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-simple-list__item-link--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-simple-list__item-link--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-simple-list__item-link--Color: var(--pf-global--Color--100);
-  --pf-c-simple-list__item-link--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-simple-list__item-link--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-simple-list__item-link--m-current--Color: var(--pf-global--link--Color);
-  --pf-c-simple-list__item-link--m-current--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-simple-list__item-link--m-current--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-simple-list__item-link--hover--Color: var(--pf-global--Color--100);
-  --pf-c-simple-list__item-link--hover--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-simple-list__item-link--focus--Color: var(--pf-global--Color--100);
-  --pf-c-simple-list__item-link--focus--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-simple-list__item-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-simple-list__item-link--active--Color: var(--pf-global--Color--100);
-  --pf-c-simple-list__item-link--active--BackgroundColor: var(--pf-global--BackgroundColor--200);
-  --pf-c-simple-list__item-link--active--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-simple-list__title--PaddingTop: var(--pf-global--spacer--sm);
-  --pf-c-simple-list__title--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-simple-list__title--PaddingBottom: var(--pf-global--spacer--sm);
-  --pf-c-simple-list__title--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-simple-list__title--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-simple-list__title--Color: var(--pf-global--Color--dark-200);
-  --pf-c-simple-list__title--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-simple-list__section--section--MarginTop: var(--pf-global--spacer--sm);
-}
-
-.pf-c-simple-list__item-link {
-  display: block;
-  width: 100%;
-  padding: var(--pf-c-simple-list__item-link--PaddingTop) var(--pf-c-simple-list__item-link--PaddingRight) var(--pf-c-simple-list__item-link--PaddingBottom) var(--pf-c-simple-list__item-link--PaddingLeft);
-  font-size: var(--pf-c-simple-list__item-link--FontSize);
-  font-weight: var(--pf-c-simple-list__item-link--FontWeight);
-  color: var(--pf-c-simple-list__item-link--Color);
-  text-align: left;
-  background-color: var(--pf-c-simple-list__item-link--BackgroundColor);
-  border: none;
-}
-
-.pf-c-simple-list__item-link:hover {
-  text-decoration: none;
-  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
-  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
-}
-
-.pf-c-simple-list__item-link:focus {
-  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);
-  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--focus--BackgroundColor);
-  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--focus--Color);
-}
-
-.pf-c-simple-list__item-link:active {
-  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--active--FontWeight);
-  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--active--BackgroundColor);
-  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--active--Color);
-}
-
-.pf-c-simple-list__item-link.pf-m-current {
-  --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--m-current--FontWeight);
-  --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--m-current--BackgroundColor);
-  --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--m-current--Color);
-}
-
-.pf-c-simple-list__title {
-  padding: var(--pf-c-simple-list__title--PaddingTop) var(--pf-c-simple-list__title--PaddingRight) var(--pf-c-simple-list__title--PaddingBottom) var(--pf-c-simple-list__title--PaddingLeft);
-  font-size: var(--pf-c-simple-list__title--FontSize);
-  font-weight: var(--pf-c-simple-list__title--FontWeight);
-  color: var(--pf-c-simple-list__title--Color);
-}
-
-.pf-c-simple-list__section + .pf-c-simple-list__section {
-  margin-top: var(--pf-c-simple-list__section--section--MarginTop);
-}
-
 .pf-c-alert-group {
   --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);

package/dist/umd/react-core.js

@@ -6202,7 +6202,7 @@
                             }, ref: this.ref, type: "button" }), children || value.toString())));
                 }
                 else if (variant !== exports.SelectVariant.checkbox) {
-                    return (React__namespace.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$13.selectListItem, !isLoad && !isLoading && _default$13.selectMenuWrapper, isFavorite && _default$13.modifiers.favorite, isFocused && _default$13.modifiers.focus, isLoading && _default$13.modifiers.loading), ref: this.liRef },
+                    return (React__namespace.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$13.selectListItem, !isLoading && _default$13.selectMenuWrapper, isFavorite && _default$13.modifiers.favorite, isFocused && _default$13.modifiers.focus, isLoading && _default$13.modifiers.loading), ref: this.liRef },
                         isLoading && children,
                         isLoad && !isGrouped && (React__namespace.createElement("button", Object.assign({}, props, { className: css(_default$13.selectMenuItem, _default$13.modifiers.load, className), onClick: (event) => {
                                 onViewMoreClick(event);
@@ -6359,9 +6359,18 @@
             let index = hasInlineFilter ? 1 : 0;
             if (isGrouped) {
                 return React__namespace.Children.map(children, (group) => {
-                    if (group.type === SelectOption || group.type === Divider) {
+                    if (group.type === Divider) {
                         return group;
                     }
+                    else if (group.type === SelectOption) {
+                        return React__namespace.cloneElement(group, {
+                            isChecked: this.checkForValue(group.props.value, checked),
+                            sendRef,
+                            keyHandler,
+                            index: index++,
+                            isLastOptionBeforeFooter
+                        });
+                    }
                     return React__namespace.cloneElement(group, {
                         titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
                         children: group.props.children ? (React__namespace.createElement("fieldset", { "aria-labelledby": group.props.label && group.props.label.replace(/\W/g, '-'), className: css(_default$13.selectMenuFieldset) }, React__namespace.Children.map(group.props.children, (option) => option.type === Divider
@@ -6829,7 +6838,9 @@
                 this.state.viewMoreNextIndex !== -1 &&
                     this.refCollection.length > this.state.viewMoreNextIndex &&
                     this.props.loadingVariant !== 'spinner' &&
-                    this.refCollection[this.state.viewMoreNextIndex][0]) {
+                    this.refCollection[this.state.viewMoreNextIndex][0] &&
+                    this.props.variant !== 'typeahead' && // do not hard focus newly added items for typeahead variants
+                    this.props.variant !== 'typeaheadmulti') {
                     this.refCollection[this.state.viewMoreNextIndex][0].focus();
                 }
                 const hasUpdatedChildren = prevProps.children.length !== this.props.children.length ||
@@ -7031,6 +7042,7 @@
             this.moveFocus = (nextIndex, updateCurrentIndex = true) => {
                 const { isCreatable, createText } = this.props;
                 const hasDescriptionElm = Boolean(this.refCollection[nextIndex][0] && this.refCollection[nextIndex][0].classList.contains('pf-m-description'));
+                const isLoad = Boolean(this.refCollection[nextIndex][0] && this.refCollection[nextIndex][0].classList.contains('pf-m-load'));
                 const optionTextElm = hasDescriptionElm
                     ? this.refCollection[nextIndex][0].firstElementChild
                     : this.refCollection[nextIndex][0];
@@ -7038,7 +7050,8 @@
                 if (isCreatable && optionTextElm.innerText.includes(createText)) {
                     typeaheadInputValue = this.state.creatableValue;
                 }
-                else if (optionTextElm) {
+                else if (optionTextElm && !isLoad) {
+                    // !isLoad prevents the view more button text from appearing the typeahead input
                     typeaheadInputValue = optionTextElm.innerText;
                 }
                 this.setState(prevState => ({
@@ -7084,15 +7097,17 @@
                         if (typeaheadCurrIndex !== -1 && // do not allow selection without moving to an initial option
                             (typeaheadActiveChild || (this.refCollection[0] && this.refCollection[0][0]))) {
                             if (typeaheadActiveChild) {
-                                const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
-                                const typeaheadActiveChildText = hasDescriptionElm
-                                    ? typeaheadActiveChild.firstChild.innerText
-                                    : typeaheadActiveChild.innerText;
-                                this.setState({
-                                    typeaheadInputValue: typeaheadActiveChildText
-                                });
+                                if (!typeaheadActiveChild.classList.contains('pf-m-load')) {
+                                    const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
+                                    const typeaheadActiveChildText = hasDescriptionElm
+                                        ? typeaheadActiveChild.firstChild.innerText
+                                        : typeaheadActiveChild.innerText;
+                                    this.setState({
+                                        typeaheadInputValue: typeaheadActiveChildText
+                                    });
+                                }
                             }
-                            else {
+                            else if (this.refCollection[0] && this.refCollection[0][0]) {
                                 this.setState({
                                     typeaheadInputValue: this.refCollection[0][0].innerText
                                 });
@@ -7371,15 +7386,16 @@
                     }
                 });
             }
-            return typeaheadChildren.map((child) => {
+            return typeaheadChildren.map((child, index) => {
                 const childElement = child;
                 return childElement.type.displayName === 'Divider'
                     ? child
                     : React__namespace.cloneElement(child, {
-                        isFocused: typeaheadActiveChild &&
-                            (typeaheadActiveChild.innerText === child.props.value.toString() ||
+                        isFocused: typeaheadActiveChild
+                            ? typeaheadActiveChild.innerText === child.props.value.toString() ||
                                 (this.props.isCreatable &&
-                                    typeaheadActiveChild.innerText === `{createText} "${child.props.value}"`))
+                                    typeaheadActiveChild.innerText === `{createText} "${child.props.value}"`)
+                            : index === typeaheadCurrIndex // fallback for view more + typeahead use cases, when the new expanded list is loaded and refCollection hasn't be updated yet
                     });
             });
         }
@@ -7763,7 +7779,6 @@
         onChange = () => { }, validators = [() => true], className, onSelectToggle = () => { }, rangeStart, prevMonthAriaLabel = 'Previous month', nextMonthAriaLabel = 'Next month', yearInputAriaLabel = 'Select year', cellAriaLabel } = _a, props = __rest$1(_a, ["date", "locale", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "onChange", "validators", "className", "onSelectToggle", "rangeStart", "prevMonthAriaLabel", "nextMonthAriaLabel", "yearInputAriaLabel", "cellAriaLabel"]);
         const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
         const [isSelectOpen, setIsSelectOpen] = React__default["default"].useState(false);
-        const [selectedDate, setSelectedDate] = React__default["default"].useState(new Date(dateProp));
         // eslint-disable-next-line prefer-const
         let [focusedDate, setFocusedDate] = React__default["default"].useState(new Date(dateProp));
         if (!isValidDate(focusedDate)) {
@@ -7893,7 +7908,7 @@
                 React__default["default"].createElement("tbody", { onKeyDown: onKeyDown }, calendar.map((week, index) => (React__default["default"].createElement("tr", { key: index, className: _default$_.calendarMonthDatesRow }, week.map(({ date, isValid }, index) => {
                     const dayFormatted = dayFormat(date);
                     const isToday = isSameDate(date, today);
-                    const isSelected = isValidDate(selectedDate) && isSameDate(date, selectedDate);
+                    const isSelected = isValidDate(dateProp) && isSameDate(date, dateProp);
                     const isFocused = isSameDate(date, focusedDate);
                     const isAdjacentMonth = date.getMonth() !== focusedDate.getMonth();
                     let isInRange = false;
@@ -7909,11 +7924,7 @@
                         // Core would likely need new styles
                     }
                     return (React__default["default"].createElement("td", { key: index, className: css(_default$_.calendarMonthDatesCell, isAdjacentMonth && _default$_.modifiers.adjacentMonth, isToday && _default$_.modifiers.current, (isSelected || isRangeStart) && _default$_.modifiers.selected, !isValid && _default$_.modifiers.disabled, (isInRange || isRangeStart || isRangeEnd) && _default$_.modifiers.inRange, isRangeStart && _default$_.modifiers.startRange, isRangeEnd && _default$_.modifiers.endRange) },
-                        React__default["default"].createElement("button", Object.assign({ className: css(_default$_.calendarMonthDate, isRangeEnd && _default$_.modifiers.hover, !isValid && _default$_.modifiers.disabled), type: "button", onClick: () => {
-                                setSelectedDate(date);
-                                setFocusedDate(date);
-                                onChange(date);
-                            }, onMouseOver: () => setHoveredDate(date), tabIndex: isFocused ? 0 : -1, disabled: !isValid, "aria-label": cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}` }, (isFocused && { ref: focusRef })), dayFormatted)));
+                        React__default["default"].createElement("button", Object.assign({ className: css(_default$_.calendarMonthDate, isRangeEnd && _default$_.modifiers.hover, !isValid && _default$_.modifiers.disabled), type: "button", onClick: () => onChange(date), onMouseOver: () => setHoveredDate(date), tabIndex: isFocused ? 0 : -1, disabled: !isValid, "aria-label": cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}` }, (isFocused && { ref: focusRef })), dayFormatted)));
                 }))))))));
     };