@patternfly/react-core 4.226.0 → 4.227.0

package/dist/umd/react-core.js

@@ -5921,7 +5921,7 @@
             ToggleIndicator && (React__namespace.createElement("span", { className: css(!splitButtonItems && toggleIndicatorClass) },
                 React__namespace.createElement(ToggleIndicator, null)))))));
         if (splitButtonItems) {
-            return (React__namespace.createElement("div", { className: css(styles$15.dropdownToggle, styles$15.modifiers.splitButton, splitButtonVariant === 'action' && styles$15.modifiers.action, (toggleVariant === 'primary' || isPrimary) && splitButtonVariant === 'action' && styles$15.modifiers.primary, isDisabled && styles$15.modifiers.disabled) },
+            return (React__namespace.createElement("div", { className: css(styles$15.dropdownToggle, styles$15.modifiers.splitButton, splitButtonVariant === 'action' && styles$15.modifiers.action, (toggleVariant === 'primary' || isPrimary) && splitButtonVariant === 'action' && styles$15.modifiers.primary, toggleVariant === 'secondary' && splitButtonVariant === 'action' && styles$15.modifiers.secondary, isDisabled && styles$15.modifiers.disabled) },
                 splitButtonItems,
                 toggle));
         }
@@ -8614,7 +8614,7 @@
     const today = new Date();
     const CalendarMonth = (_a) => {
         var { date: dateProp, locale = undefined, monthFormat = date => date.toLocaleDateString(locale, { month: 'long' }), weekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'narrow' }), longWeekdayFormat = date => date.toLocaleDateString(locale, { weekday: 'long' }), dayFormat = date => date.getDate(), weekStart = 0, // Use the American Sunday as a default
-        onChange = () => { }, validators = [() => true], className, onSelectToggle = () => { }, rangeStart, prevMonthAriaLabel = 'Previous month', nextMonthAriaLabel = 'Next month', yearInputAriaLabel = 'Select year', cellAriaLabel, isDateFocused = false } = _a, props = __rest$1(_a, ["date", "locale", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "onChange", "validators", "className", "onSelectToggle", "rangeStart", "prevMonthAriaLabel", "nextMonthAriaLabel", "yearInputAriaLabel", "cellAriaLabel", "isDateFocused"]);
+        onChange = () => { }, validators = [() => true], className, onSelectToggle = () => { }, onMonthChange = () => { }, rangeStart, prevMonthAriaLabel = 'Previous month', nextMonthAriaLabel = 'Next month', yearInputAriaLabel = 'Select year', cellAriaLabel, isDateFocused = false } = _a, props = __rest$1(_a, ["date", "locale", "monthFormat", "weekdayFormat", "longWeekdayFormat", "dayFormat", "weekStart", "onChange", "validators", "className", "onSelectToggle", "onMonthChange", "rangeStart", "prevMonthAriaLabel", "nextMonthAriaLabel", "yearInputAriaLabel", "cellAriaLabel", "isDateFocused"]);
         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);
         // eslint-disable-next-line prefer-const
@@ -8656,10 +8656,11 @@
                 setShouldFocus(true);
             }
         }, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);
-        const onMonthClick = (newDate) => {
+        const onMonthClick = (newDate, ev) => {
             setFocusedDate(newDate);
             setHoveredDate(newDate);
             setShouldFocus(false);
+            onMonthChange(newDate, ev);
         };
         const onKeyDown = (ev) => {
             const newDate = new Date(focusedDate);
@@ -8715,7 +8716,7 @@
         return (React__default["default"].createElement("div", Object.assign({ className: css(styles$T.calendarMonth, className) }, props),
             React__default["default"].createElement("div", { className: styles$T.calendarMonthHeader },
                 React__default["default"].createElement("div", { className: css(styles$T.calendarMonthHeaderNavControl, styles$T.modifiers.prevMonth) },
-                    React__default["default"].createElement(Button, { variant: "plain", "aria-label": prevMonthAriaLabel, onClick: () => onMonthClick(prevMonth) },
+                    React__default["default"].createElement(Button, { variant: "plain", "aria-label": prevMonthAriaLabel, onClick: (ev) => onMonthClick(prevMonth, ev) },
                         React__default["default"].createElement(AngleLeftIcon$1, { "aria-hidden": true }))),
                 React__default["default"].createElement(InputGroup, null,
                     React__default["default"].createElement("div", { className: styles$T.calendarMonthHeaderMonth },
@@ -8727,7 +8728,7 @@
                             width: "140px", "aria-labelledby": hiddenMonthId, isOpen: isSelectOpen, onToggle: () => {
                                 setIsSelectOpen(!isSelectOpen);
                                 onSelectToggle(!isSelectOpen);
-                            }, onSelect: (_ev, monthNum) => {
+                            }, onSelect: (ev, monthNum) => {
                                 // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
                                 // to see the SelectOption as a child so it doesn't close the Popover.
                                 setTimeout(() => {
@@ -8738,18 +8739,20 @@
                                     setFocusedDate(newDate);
                                     setHoveredDate(newDate);
                                     setShouldFocus(false);
+                                    onMonthChange(newDate, ev);
                                 }, 0);
                             }, variant: "single", selections: monthFormatted }, longMonths.map((longMonth, index) => (React__default["default"].createElement(SelectOption, { key: index, value: index, isSelected: longMonth === monthFormatted }, longMonth))))),
                     React__default["default"].createElement("div", { className: styles$T.calendarMonthHeaderYear },
-                        React__default["default"].createElement(TextInput, { "aria-label": yearInputAriaLabel, type: "number", value: yearFormatted, onChange: year => {
+                        React__default["default"].createElement(TextInput, { "aria-label": yearInputAriaLabel, type: "number", value: yearFormatted, onChange: (year, ev) => {
                                 const newDate = new Date(focusedDate);
                                 newDate.setFullYear(+year);
                                 setFocusedDate(newDate);
                                 setHoveredDate(newDate);
                                 setShouldFocus(false);
+                                onMonthChange(newDate, ev);
                             } }))),
                 React__default["default"].createElement("div", { className: css(styles$T.calendarMonthHeaderNavControl, styles$T.modifiers.nextMonth) },
-                    React__default["default"].createElement(Button, { variant: "plain", "aria-label": nextMonthAriaLabel, onClick: () => onMonthClick(nextMonth) },
+                    React__default["default"].createElement(Button, { variant: "plain", "aria-label": nextMonthAriaLabel, onClick: (ev) => onMonthClick(nextMonth, ev) },
                         React__default["default"].createElement(AngleRightIcon$1, { "aria-hidden": true })))),
             React__default["default"].createElement("table", { className: styles$T.calendarMonthCalendar },
                 React__default["default"].createElement("thead", { className: styles$T.calendarMonthDays },
@@ -21032,9 +21035,7 @@
                             break;
                         }
                     }
-                    this.setState({
-                        currentStep: newStep
-                    });
+                    this.setCurrentStep(newStep, flattenedSteps[newStep - 1]);
                     const { id: prevId, name: prevName } = flattenedSteps[currentStep - 1];
                     const { id, name } = flattenedSteps[newStep - 1];
                     return onNext && onNext({ id, name }, { prevId, prevName });
@@ -21047,9 +21048,7 @@
                 if (flattenedSteps.length < currentStep) {
                     // Previous step was removed, just update the currentStep state
                     const adjustedStep = flattenedSteps.length;
-                    this.setState({
-                        currentStep: adjustedStep
-                    });
+                    this.setCurrentStep(adjustedStep, flattenedSteps[adjustedStep - 1]);
                 }
                 else {
                     let newStep = currentStep;
@@ -21062,9 +21061,7 @@
                             break;
                         }
                     }
-                    this.setState({
-                        currentStep: newStep
-                    });
+                    this.setCurrentStep(newStep, flattenedSteps[newStep - 1]);
                     const { id: prevId, name: prevName } = flattenedSteps[newStep];
                     const { id, name } = flattenedSteps[newStep - 1];
                     return onBack && onBack({ id, name }, { prevId, prevName });
@@ -21084,7 +21081,8 @@
                 else if (step > maxSteps) {
                     step = maxSteps;
                 }
-                this.setState({ currentStep: step, isNavOpen: false });
+                this.setCurrentStep(step, flattenedSteps[step - 1]);
+                this.setState({ isNavOpen: false });
                 const { id: prevId, name: prevName } = flattenedSteps[currentStep - 1];
                 const { id, name } = flattenedSteps[step - 1];
                 return onGoToStep && onGoToStep({ id, name }, { prevId, prevName });
@@ -21099,7 +21097,7 @@
                     }
                 }
                 if (step) {
-                    this.setState({ currentStep: step });
+                    this.setCurrentStep(step, flattenedSteps[step - 1]);
                 }
             };
             this.goToStepByName = (stepName) => {
@@ -21112,7 +21110,7 @@
                     }
                 }
                 if (step) {
-                    this.setState({ currentStep: step });
+                    this.setCurrentStep(step, flattenedSteps[step - 1]);
                 }
             };
             this.getFlattenedSteps = () => {
@@ -21163,8 +21161,23 @@
                 currentStep: this.props.startAtStep && Number.isInteger(this.props.startAtStep) ? this.props.startAtStep : 1,
                 isNavOpen: false
             };
+            if (props.onCurrentStepChanged) {
+                const flattenedSteps = this.getFlattenedSteps();
+                if (flattenedSteps.length >= this.state.currentStep) {
+                    const currentStep = flattenedSteps[this.state.currentStep - 1];
+                    props.onCurrentStepChanged(currentStep);
+                }
+            }
             this.drawerRef = React__namespace.createRef();
         }
+        setCurrentStep(currentStep, currentStepObject) {
+            this.setState({
+                currentStep
+            });
+            if (this.props.onCurrentStepChanged) {
+                this.props.onCurrentStepChanged(currentStepObject);
+            }
+        }
         componentDidMount() {
             const target = typeof document !== 'undefined' ? document.body : null;
             if (target) {
@@ -21177,10 +21190,15 @@
                 target.removeEventListener('keydown', this.handleKeyClicks, false);
             }
         }
+        componentDidUpdate(prevProps) {
+            if (prevProps.startAtStep !== this.props.startAtStep) {
+                this.setState({ currentStep: this.props.startAtStep });
+            }
+        }
         render() {
             const _a = this.props, { 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            width, height, title, description, descriptionComponent, onClose, onSave, onBack, onNext, onGoToStep, className, steps, startAtStep, nextButtonText = 'Next', backButtonText = 'Back', cancelButtonText = 'Cancel', hideClose, closeButtonAriaLabel = 'Close', navAriaLabel, navAriaLabelledBy, mainAriaLabel, mainAriaLabelledBy, hasNoBodyPadding, footer, appendTo, isOpen, titleId, descriptionId, isNavExpandable, hasDrawer, isDrawerExpanded } = _a, rest = __rest$1(_a, ["width", "height", "title", "description", "descriptionComponent", "onClose", "onSave", "onBack", "onNext", "onGoToStep", "className", "steps", "startAtStep", "nextButtonText", "backButtonText", "cancelButtonText", "hideClose", "closeButtonAriaLabel", "navAriaLabel", "navAriaLabelledBy", "mainAriaLabel", "mainAriaLabelledBy", "hasNoBodyPadding", "footer", "appendTo", "isOpen", "titleId", "descriptionId", "isNavExpandable", "hasDrawer", "isDrawerExpanded"])
+            width, height, title, description, descriptionComponent, onClose, onSave, onBack, onNext, onGoToStep, className, steps, startAtStep, nextButtonText = 'Next', backButtonText = 'Back', cancelButtonText = 'Cancel', hideClose, closeButtonAriaLabel = 'Close', navAriaLabel, navAriaLabelledBy, mainAriaLabel, mainAriaLabelledBy, hasNoBodyPadding, footer, appendTo, isOpen, titleId, descriptionId, isNavExpandable, onCurrentStepChanged, hasDrawer, isDrawerExpanded } = _a, rest = __rest$1(_a, ["width", "height", "title", "description", "descriptionComponent", "onClose", "onSave", "onBack", "onNext", "onGoToStep", "className", "steps", "startAtStep", "nextButtonText", "backButtonText", "cancelButtonText", "hideClose", "closeButtonAriaLabel", "navAriaLabel", "navAriaLabelledBy", "mainAriaLabel", "mainAriaLabelledBy", "hasNoBodyPadding", "footer", "appendTo", "isOpen", "titleId", "descriptionId", "isNavExpandable", "onCurrentStepChanged", "hasDrawer", "isDrawerExpanded"])
             /* eslint-enable @typescript-eslint/no-unused-vars */
             ;
             const { currentStep } = this.state;

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

@@ -781,6 +781,7 @@
 }
 
 .pf-c-form-control {
+  --pf-c-form-control--Color: var(--pf-global--Color--100);
   --pf-c-form-control--FontSize: var(--pf-global--FontSize--md);
   --pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md);
   --pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -903,7 +904,7 @@
   --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) + 1px - var(--pf-global--spacer--lg));
   --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg) + 0.0625rem);
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md) - var(--pf-global--spacer--lg));
-  color: var(--pf-global--Color--100);
+  color: var(--pf-c-form-control--Color);
   width: var(--pf-c-form-control--Width);
   padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
   font-size: var(--pf-c-form-control--FontSize);
@@ -957,8 +958,8 @@
 }
 
 .pf-c-form-control:disabled {
-  --pf-c-form-control--Color: var(--pf-c-form-control--disabled--Color);
   --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
+  color: var(--pf-c-form-control--disabled--Color);
   cursor: not-allowed;
   border-color: var(--pf-c-form-control--disabled--BorderColor);
 }
@@ -16718,7 +16719,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --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: var(--pf-global--spacer--md);
+  --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);