@patternfly/react-core 4.201.1 → 4.202.1

package/dist/umd/react-core.js

@@ -6190,7 +6190,7 @@
                 setViewMoreNextIndex();
                 onClick(event);
             };
-            const renderOption = (onSelect, onClose, variant, inputIdPrefix, onFavorite) => {
+            const renderOption = (onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect) => {
                 if (variant !== exports.SelectVariant.checkbox && isLoading && isGrouped) {
                     return (React__namespace.createElement("div", { role: "presentation", className: css(_default$13.selectListItem, isLoading && _default$13.modifiers.loading, className) }, children));
                 }
@@ -6215,7 +6215,7 @@
                                     if (!isDisabled) {
                                         onClick(event);
                                         onSelect(event, value, isPlaceholder);
-                                        onClose();
+                                        shouldResetOnSelect && onClose();
                                     }
                                 }, role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
                                     this.onKeyDown(event, 0);
@@ -6263,7 +6263,7 @@
                             }, 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)))));
+            return (React__namespace.createElement(SelectConsumer, null, ({ onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect }) => (React__namespace.createElement(React__namespace.Fragment, null, renderOption(onSelect, onClose, variant, inputIdPrefix, onFavorite, shouldResetOnSelect)))));
         }
     }
     SelectOption.displayName = 'SelectOption';
@@ -6450,7 +6450,7 @@
                 const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
                 const clickedWithinMenu = menuRef && menuRef.current && menuRef.current.contains && menuRef.current.contains(event.target);
                 if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
-                    onToggle(false);
+                    onToggle(false, event);
                     onClose();
                 }
             };
@@ -6469,7 +6469,7 @@
                     const tabbableItems = findTabbableElements(footerRef, SelectFooterTabbableItems);
                     // If no tabbable item in footer close select
                     if (tabbableItems.length <= 0) {
-                        onToggle(false);
+                        onToggle(false, event);
                         onClose();
                         this.toggle.current.focus();
                         return;
@@ -6481,7 +6481,7 @@
                             if (event.shiftKey) {
                                 if (variant !== 'checkbox') {
                                     // only close non checkbox variation on shift clicked
-                                    onToggle(false);
+                                    onToggle(false, event);
                                     onClose();
                                     this.toggle.current.focus();
                                 }
@@ -6507,7 +6507,7 @@
                         }
                         else {
                             // no more footer items close menu
-                            onToggle(false);
+                            onToggle(false, event);
                             onClose();
                             this.toggle.current.focus();
                         }
@@ -6518,7 +6518,7 @@
                 if (isOpen &&
                     (event.key === KeyTypes.Escape || event.key === KeyTypes.Tab) &&
                     (escFromToggle || escFromWithinMenu)) {
-                    onToggle(false);
+                    onToggle(false, event);
                     onClose();
                     this.toggle.current.focus();
                 }
@@ -6535,7 +6535,7 @@
                             handleTypeaheadKeys('enter');
                         }
                         else {
-                            onToggle(!isOpen);
+                            onToggle(!isOpen, event);
                         }
                     }
                 }
@@ -6547,12 +6547,12 @@
                 }
                 event.preventDefault();
                 if ((event.key === KeyTypes.Tab || event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && isOpen) {
-                    onToggle(!isOpen);
+                    onToggle(!isOpen, event);
                     onClose();
                     this.toggle.current.focus();
                 }
                 else if ((event.key === KeyTypes.Enter || event.key === KeyTypes.Space) && !isOpen) {
-                    onToggle(!isOpen);
+                    onToggle(!isOpen, event);
                     onEnter();
                 }
             };
@@ -6584,8 +6584,8 @@
             return (React__namespace.createElement(React__namespace.Fragment, null,
                 !isTypeahead && (React__namespace.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(_default$13.selectToggle, hasPlaceholderStyle && _default$13.modifiers.placeholder, isDisabled && _default$13.modifiers.disabled, isPlain && _default$13.modifiers.plain, isActive && _default$13.modifiers.active, className), "aria-label": ariaLabel, 
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    onClick: _event => {
-                        onToggle(!isOpen);
+                    onClick: event => {
+                        onToggle(!isOpen, event);
                         if (isOpen) {
                             onClose();
                         }
@@ -6595,17 +6595,17 @@
                         React__namespace.createElement(CaretDownIcon$1, null)))),
                 isTypeahead && (React__namespace.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(_default$13.selectToggle, hasPlaceholderStyle && _default$13.modifiers.placeholder, isDisabled && _default$13.modifiers.disabled, isPlain && _default$13.modifiers.plain, isTypeahead && _default$13.modifiers.typeahead, className), 
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                    onClick: _event => {
+                    onClick: event => {
                         if (!isDisabled) {
-                            onToggle(!isOpen);
+                            onToggle(!isOpen, event);
                             if (isOpen) {
                                 onClose();
                             }
                         }
                     }, onKeyDown: this.onKeyDown }),
                     children,
-                    React__namespace.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$1l.button, _default$13.selectToggleButton, _default$13.modifiers.plain), "aria-label": ariaLabel, onClick: _event => {
-                            onToggle(!isOpen);
+                    React__namespace.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$1l.button, _default$13.selectToggleButton, _default$13.modifiers.plain), "aria-label": ariaLabel, onClick: event => {
+                            onToggle(!isOpen, event);
                             if (isOpen) {
                                 onClose();
                             }
@@ -6872,7 +6872,7 @@
             this.onEnter = () => {
                 this.setState({ focusFirstOption: true });
             };
-            this.onToggle = (isExpanded) => {
+            this.onToggle = (isExpanded, e) => {
                 const { isInputValuePersisted, onSelect, onToggle, hasInlineFilter } = this.props;
                 if (!isExpanded && isInputValuePersisted && onSelect) {
                     onSelect(undefined, this.inputRef.current ? this.inputRef.current.value : '');
@@ -6882,7 +6882,7 @@
                         focusFirstOption: true
                     });
                 }
-                onToggle(isExpanded);
+                onToggle(isExpanded, e);
             };
             this.onClose = () => {
                 const { isInputFilterPersisted } = this.props;
@@ -6892,7 +6892,7 @@
             };
             this.onChange = (e) => {
                 if (e.target.value.toString() !== '' && !this.props.isOpen) {
-                    this.onToggle(true);
+                    this.onToggle(true, e);
                 }
                 if (this.props.onTypeaheadInputChanged) {
                     this.props.onTypeaheadInputChanged(e.target.value.toString());
@@ -7004,9 +7004,9 @@
                     typeaheadFilteredChildren
                 });
             };
-            this.onClick = (_e) => {
+            this.onClick = (e) => {
                 if (!this.props.isOpen) {
-                    this.onToggle(true);
+                    this.onToggle(true, e);
                 }
             };
             this.clearSelection = (_e) => {
@@ -7083,9 +7083,20 @@
                     if (position === 'enter') {
                         if (typeaheadCurrIndex !== -1 && // do not allow selection without moving to an initial option
                             (typeaheadActiveChild || (this.refCollection[0] && this.refCollection[0][0]))) {
-                            this.setState({
-                                typeaheadInputValue: (typeaheadActiveChild && typeaheadActiveChild.innerText) || this.refCollection[0][0].innerText
-                            });
+                            if (typeaheadActiveChild) {
+                                const hasDescriptionElm = typeaheadActiveChild.childElementCount > 1;
+                                const typeaheadActiveChildText = hasDescriptionElm
+                                    ? typeaheadActiveChild.firstChild.innerText
+                                    : typeaheadActiveChild.innerText;
+                                this.setState({
+                                    typeaheadInputValue: typeaheadActiveChildText
+                                });
+                            }
+                            else {
+                                this.setState({
+                                    typeaheadInputValue: this.refCollection[0][0].innerText
+                                });
+                            }
                             if (typeaheadActiveChild) {
                                 typeaheadActiveChild.click();
                             }
@@ -7171,7 +7182,7 @@
                         else {
                             // Close if there is no footer
                             if (!this.props.footer) {
-                                this.onToggle(false);
+                                this.onToggle(false, null);
                                 this.onClose();
                             }
                             else {
@@ -7181,7 +7192,7 @@
                                 if (this.inputRef.current === document.activeElement) {
                                     if (shiftKey) {
                                         // close toggle if shift key and tab on input
-                                        this.onToggle(false);
+                                        this.onToggle(false, null);
                                         this.onClose();
                                     }
                                     else {
@@ -7190,7 +7201,7 @@
                                             tabbableItems[0].focus();
                                         }
                                         else {
-                                            this.onToggle(false);
+                                            this.onToggle(false, null);
                                             this.onClose();
                                         }
                                     }
@@ -7214,7 +7225,7 @@
                                         }
                                         else {
                                             // no next item, close toggle
-                                            this.onToggle(false);
+                                            this.onToggle(false, null);
                                             this.inputRef.current.focus();
                                             this.onClose();
                                         }
@@ -7383,7 +7394,7 @@
             /* eslint-enable @typescript-eslint/no-unused-vars */
             menuAppendTo, favorites, onFavorite, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject"]);
+            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject", "shouldResetOnSelect"]);
             const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
             const selectToggleId = toggleId || `pf-select-toggle-id-${currentId$1++}`;
             const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
@@ -7468,7 +7479,7 @@
                                 else if (event.key === KeyTypes.Tab && variant !== exports.SelectVariant.checkbox && this.props.footer) {
                                     // tab to footer or close menu if shift key
                                     if (event.shiftKey) {
-                                        this.onToggle(false);
+                                        this.onToggle(false, event);
                                     }
                                     else {
                                         const tabbableItems = findTabbableElements(this.footerRef, SelectFooterTabbableItems);
@@ -7478,7 +7489,7 @@
                                             event.preventDefault();
                                         }
                                         else {
-                                            this.onToggle(false);
+                                            this.onToggle(false, event);
                                         }
                                     }
                                 }
@@ -7598,7 +7609,14 @@
                 }
                 return null;
             };
-            return (React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement(SelectContext.Provider, { value: { onSelect, onFavorite, onClose: this.onClose, variant, inputIdPrefix: inputIdPrefix || randomId } }, menuAppendTo === 'inline' ? (mainContainer) : (React__namespace.createElement(Popper, { trigger: mainContainer, popper: popperContainer, direction: direction, appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, isVisible: isOpen }))))));
+            return (React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement(SelectContext.Provider, { value: {
+                    onSelect,
+                    onFavorite,
+                    onClose: this.onClose,
+                    variant,
+                    inputIdPrefix: inputIdPrefix || randomId,
+                    shouldResetOnSelect
+                } }, menuAppendTo === 'inline' ? (mainContainer) : (React__namespace.createElement(Popper, { trigger: mainContainer, popper: popperContainer, direction: direction, appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, isVisible: isOpen }))))));
         }
     }
     Select.displayName = 'Select';
@@ -7647,7 +7665,8 @@
         chipGroupComponent: null,
         isInputValuePersisted: false,
         isInputFilterPersisted: false,
-        isCreateSelectOptionObject: false
+        isCreateSelectOptionObject: false,
+        shouldResetOnSelect: true
     };
 
     const ArrowLeftIconConfig = {
@@ -9656,15 +9675,19 @@
       }
     };
 
-    const setAutoFitMinModifiers = (autoFitMinModifier) => {
-        const prefix = '--pf-c-description-list--GridTemplateColumns--min';
-        const mods = autoFitMinModifier;
+    const setBreakpointModifiers = (prefix, modifiers) => {
+        const mods = modifiers;
         return Object.keys(mods || {}).reduce((acc, curr) => curr === 'default' ? Object.assign(Object.assign({}, acc), { [prefix]: mods[curr] }) : Object.assign(Object.assign({}, acc), { [`${prefix}-on-${curr}`]: mods[curr] }), {});
     };
     const DescriptionList = (_a) => {
-        var { className = '', children = null, isHorizontal = false, isAutoColumnWidths, isAutoFit, isInlineGrid, isCompact, isFluid, isFillColumns, columnModifier, autoFitMinModifier, orientation, style } = _a, props = __rest$1(_a, ["className", "children", "isHorizontal", "isAutoColumnWidths", "isAutoFit", "isInlineGrid", "isCompact", "isFluid", "isFillColumns", "columnModifier", "autoFitMinModifier", "orientation", "style"]);
-        return (React__namespace.createElement("dl", Object.assign({ className: css(_default$Q.descriptionList, (isHorizontal || isFluid) && _default$Q.modifiers.horizontal, isAutoColumnWidths && _default$Q.modifiers.autoColumnWidths, isAutoFit && _default$Q.modifiers.autoFit, formatBreakpointMods(columnModifier, _default$Q), formatBreakpointMods(orientation, _default$Q), isInlineGrid && _default$Q.modifiers.inlineGrid, isCompact && _default$Q.modifiers.compact, isFluid && _default$Q.modifiers.fluid, isFillColumns && _default$Q.modifiers.fillColumns, className), style: autoFitMinModifier || style
-                ? Object.assign(Object.assign({}, (isAutoFit ? setAutoFitMinModifiers(autoFitMinModifier) : {})), style) : undefined }, props), children));
+        var { className = '', children = null, isHorizontal = false, isAutoColumnWidths, isAutoFit, isInlineGrid, isCompact, isFluid, isFillColumns, columnModifier, autoFitMinModifier, horizontalTermWidthModifier, orientation, style } = _a, props = __rest$1(_a, ["className", "children", "isHorizontal", "isAutoColumnWidths", "isAutoFit", "isInlineGrid", "isCompact", "isFluid", "isFillColumns", "columnModifier", "autoFitMinModifier", "horizontalTermWidthModifier", "orientation", "style"]);
+        if (isAutoFit && autoFitMinModifier) {
+            style = Object.assign(Object.assign({}, style), setBreakpointModifiers('--pf-c-description-list--GridTemplateColumns--min', autoFitMinModifier));
+        }
+        if (isHorizontal && horizontalTermWidthModifier) {
+            style = Object.assign(Object.assign({}, style), setBreakpointModifiers('--pf-c-description-list--m-horizontal__term--width', horizontalTermWidthModifier));
+        }
+        return (React__namespace.createElement("dl", Object.assign({ className: css(_default$Q.descriptionList, (isHorizontal || isFluid) && _default$Q.modifiers.horizontal, isAutoColumnWidths && _default$Q.modifiers.autoColumnWidths, isAutoFit && _default$Q.modifiers.autoFit, formatBreakpointMods(columnModifier, _default$Q), formatBreakpointMods(orientation, _default$Q), isInlineGrid && _default$Q.modifiers.inlineGrid, isCompact && _default$Q.modifiers.compact, isFluid && _default$Q.modifiers.fluid, isFillColumns && _default$Q.modifiers.fillColumns, className), style: style }, props), children));
     };
     DescriptionList.displayName = 'DescriptionList';
 
@@ -14508,6 +14531,7 @@
         "plain": "pf-m-plain",
         "scrollable": "pf-m-scrollable",
         "nav": "pf-m-nav",
+        "focus": "pf-m-focus",
         "disabled": "pf-m-disabled",
         "load": "pf-m-load",
         "loading": "pf-m-loading",
@@ -14689,8 +14713,27 @@
         const menuContentRef = React__namespace.createRef();
         const refCallback = (el, menuId, onGetMenuHeight) => {
             if (el) {
-                onGetMenuHeight && onGetMenuHeight(menuId, el.clientHeight);
-                getHeight && getHeight(el.clientHeight.toString());
+                let clientHeight = el.clientHeight;
+                // if this menu is a submenu, we need to account for the root menu list's padding and root menu content's border.
+                let rootMenuList = null;
+                let parentEl = el.closest(`.${_default$A.menuList}`);
+                while (parentEl !== null && parentEl.nodeType === 1) {
+                    if (parentEl.classList.contains(_default$A.menuList)) {
+                        rootMenuList = parentEl;
+                    }
+                    parentEl = parentEl.parentElement;
+                }
+                if (rootMenuList) {
+                    const rootMenuListStyles = getComputedStyle(rootMenuList);
+                    const rootMenuListPaddingOffset = parseFloat(rootMenuListStyles.getPropertyValue('padding-top').replace(/px/g, '')) +
+                        parseFloat(rootMenuListStyles.getPropertyValue('padding-bottom').replace(/px/g, '')) +
+                        parseFloat(getComputedStyle(rootMenuList.parentElement)
+                            .getPropertyValue('border-bottom-width')
+                            .replace(/px/g, ''));
+                    clientHeight = clientHeight + rootMenuListPaddingOffset;
+                }
+                onGetMenuHeight && onGetMenuHeight(menuId, clientHeight);
+                getHeight && getHeight(clientHeight.toString());
             }
             return ref || menuContentRef;
         };
@@ -14992,10 +15035,13 @@
         "text": "pf-m-text",
         "disabled": "pf-m-disabled",
         "fullHeight": "pf-m-full-height",
+        "typeahead": "pf-m-typeahead",
         "splitButton": "pf-m-split-button",
         "action": "pf-m-action",
-        "active": "pf-m-active"
-      }
+        "active": "pf-m-active",
+        "fullWidth": "pf-m-full-width"
+      },
+      "textInputGroup": "pf-c-text-input-group"
     };
 
     class MenuToggleBase extends React__namespace.Component {
@@ -18502,13 +18548,13 @@
     class TimePicker extends React__namespace.Component {
         constructor(props) {
             super(props);
-            this.parentRef = React__namespace.createRef();
+            this.baseComponentRef = React__namespace.createRef();
             this.toggleRef = React__namespace.createRef();
             this.inputRef = React__namespace.createRef();
             this.menuRef = React__namespace.createRef();
             this.onDocClick = (event) => {
                 var _a, _b, _c, _d;
-                const clickedOnToggle = (_b = (_a = this.parentRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
+                const clickedOnToggle = (_b = (_a = this.toggleRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.contains(event.target);
                 const clickedWithinMenu = (_d = (_c = this.menuRef) === null || _c === void 0 ? void 0 : _c.current) === null || _d === void 0 ? void 0 : _d.contains(event.target);
                 if (this.state.isOpen && !(clickedOnToggle || clickedWithinMenu)) {
                     this.onToggle(false);
@@ -18698,7 +18744,7 @@
                     isInvalid: false
                 });
             };
-            this.onInputFocus = (e) => {
+            this.onInputClick = (e) => {
                 if (!this.state.isOpen) {
                     this.onToggle(true);
                 }
@@ -18783,15 +18829,21 @@
             const options = makeTimeOptions(stepMinutes, !is24Hour, delimiter, minTimeState, maxTimeState, includeSeconds);
             const isValidFormat = this.isValidFormat(timeState);
             const randomId = id || getUniqueId('time-picker');
+            const getParentElement = () => {
+                if (this.baseComponentRef && this.baseComponentRef.current) {
+                    return this.baseComponentRef.current.parentElement;
+                }
+                return null;
+            };
             const menuContainer = (React__namespace.createElement(Menu, { ref: this.menuRef, isScrollable: true },
                 React__namespace.createElement(MenuContent, { maxMenuHeight: "200px" },
-                    React__namespace.createElement(MenuList, { "aria-labelledby": `${randomId}-input` }, 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({ className: css(_default$1c.formControl), id: `${randomId}-input`, "aria-label": ariaLabel, validated: isInvalid ? 'error' : 'default', placeholder: placeholder, value: timeState || '', type: "text", iconVariant: "clock", onClick: this.onInputFocus, onFocus: this.onInputFocus, onChange: this.onInputChange, onBlur: this.onBlur, autoComplete: "off", isDisabled: isDisabled, ref: this.inputRef }, inputProps)));
-            return (React__namespace.createElement("div", { className: css(_default$R.datePicker, className) },
+                    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(_default$1c.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)));
+            return (React__namespace.createElement("div", { ref: this.baseComponentRef, className: css(_default$R.datePicker, className) },
                 React__namespace.createElement("div", Object.assign({ className: css(_default$R.datePickerInput), style: style }, props),
                     React__namespace.createElement(InputGroup, null,
-                        React__namespace.createElement("div", { id: randomId, ref: this.parentRef },
-                            React__namespace.createElement("div", { ref: this.toggleRef, style: { paddingLeft: '0' } }, menuAppendTo !== 'inline' ? (React__namespace.createElement(Popper, { appendTo: this.parentRef.current, trigger: textInput, popper: menuContainer, isVisible: isOpen })) : (textInput)),
+                        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: isOpen })) : (textInput)),
                             isOpen && menuAppendTo === 'inline' && menuContainer)),
                     isInvalid && (React__namespace.createElement("div", { className: css(_default$R.datePickerHelperText, _default$R.modifiers.error) }, !isValidFormat ? invalidFormatErrorMessage : invalidMinMaxErrorMessage)))));
         }
@@ -18808,6 +18860,7 @@
         delimiter: ':',
         'aria-label': 'Time picker',
         width: '150px',
+        menuAppendTo: 'inline',
         stepMinutes: 30,
         inputProps: {},
         minTime: '',
@@ -20381,6 +20434,7 @@
       "chipGroupList": "pf-c-chip-group__list",
       "modifiers": {
         "disabled": "pf-m-disabled",
+        "plain": "pf-m-plain",
         "icon": "pf-m-icon",
         "hint": "pf-m-hint"
       },

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

@@ -150,6 +150,7 @@
   right: 0;
   bottom: 0;
   left: 0;
+  pointer-events: none;
   content: "";
   border-bottom: var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomWidth) solid var(--pf-c-accordion--m-bordered__expanded-content--m-expanded__expanded-content-body--last-child--after--BorderBottomColor);
 }
@@ -11574,7 +11575,7 @@ ul.pf-c-list {
   --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--hover--Color, inherit);
 }
 
-.pf-c-menu__list-item:focus-within {
+.pf-c-menu__list-item:focus-within, .pf-c-menu__list-item.pf-m-focus {
   --pf-c-menu__list-item--BackgroundColor: var(--pf-c-menu__list-item--focus-within--BackgroundColor);
   --pf-c-menu__list-item--Color: var(--pf-c-menu__list-item--focus-within--Color, inherit);
 }
@@ -11864,6 +11865,11 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
+  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
+  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
+  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
+  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
+  --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -11872,6 +11878,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   font-size: var(--pf-c-menu-toggle--FontSize);
   line-height: var(--pf-c-menu-toggle--LineHeight);
   color: var(--pf-c-menu-toggle--Color);
+  cursor: pointer;
   background-color: var(--pf-c-menu-toggle--BackgroundColor);
   border: 0;
   border-radius: var(--pf-c-menu-toggle--BorderRadius);
@@ -11970,7 +11977,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu-toggle--m-plain--Color: var(--pf-c-menu-toggle--m-plain--hover--Color);
 }
 
-.pf-c-menu-toggle:focus {
+.pf-c-menu-toggle:focus, .pf-c-menu-toggle:focus-within {
   --pf-c-menu-toggle--BackgroundColor: var(--pf-c-menu-toggle--focus--BackgroundColor);
   --pf-c-menu-toggle--after--BorderBottomWidth: var(--pf-c-menu-toggle--focus--after--BorderBottomWidth);
   --pf-c-menu-toggle--after--BorderBottomColor: var(--pf-c-menu-toggle--focus--after--BorderBottomColor);
@@ -12017,6 +12024,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   height: 100%;
 }
 
+.pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
+  --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
+  flex: 1;
+  margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
+}
+
 .pf-c-menu-toggle.pf-m-split-button {
   --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
   padding: 0;
@@ -12138,6 +12151,14 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   background-color: var(--pf-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
 }
 
+.pf-c-menu-toggle.pf-m-typeahead, .pf-c-menu-toggle.pf-m-split-button {
+  --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
+}
+
+.pf-c-menu-toggle.pf-m-full-width {
+  width: 100%;
+}
+
 .pf-c-menu-toggle__button {
   color: inherit;
   border: 0;
@@ -22027,6 +22048,14 @@ svg.pf-c-spinner.pf-m-xl {
   pointer-events: none;
 }
 
+.pf-c-text-input-group.pf-m-plain {
+  --pf-c-text-input-group--BackgroundColor: transparent;
+}
+
+.pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::before, .pf-c-text-input-group.pf-m-plain .pf-c-text-input-group__text::after {
+  border: 0;
+}
+
 .pf-c-text-input-group__main {
   display: flex;
   flex: 1;