@patternfly/react-core 4.202.8 → 4.202.11

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
                     });
             });
         }
@@ -9790,12 +9806,13 @@
         isStatic: false,
         onExpand: () => { },
         position: 'right',
-        drawerRef: null
+        drawerRef: null,
+        isInline: false
     });
     const Drawer = (_a) => {
         var { className = '', children, isExpanded = false, isInline = false, isStatic = false, position = 'right', onExpand = () => { } } = _a, props = __rest$1(_a, ["className", "children", "isExpanded", "isInline", "isStatic", "position", "onExpand"]);
         const drawerRef = React__namespace.useRef();
-        return (React__namespace.createElement(DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef } },
+        return (React__namespace.createElement(DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef, isInline } },
             React__namespace.createElement("div", Object.assign({ className: css(_default$P.drawer, isExpanded && _default$P.modifiers.expanded, isInline && _default$P.modifiers.inline, isStatic && _default$P.modifiers.static, position === 'left' && _default$P.modifiers.panelLeft, position === 'bottom' && _default$P.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
     };
     Drawer.displayName = 'Drawer';
@@ -9830,9 +9847,10 @@
         var { 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         className = '', children, panelContent, colorVariant = exports.DrawerColorVariant.default } = _a, props = __rest$1(_a, ["className", "children", "panelContent", "colorVariant"]);
+        const drawerContentRef = React__namespace.useRef();
         return (React__namespace.createElement(DrawerMain, null,
-            React__namespace.createElement("div", Object.assign({ className: css(_default$P.drawerContent, colorVariant === exports.DrawerColorVariant.light200 && _default$P.modifiers.light_200, className) }, props), children),
-            panelContent));
+            React__namespace.createElement("div", Object.assign({ className: css(_default$P.drawerContent, colorVariant === exports.DrawerColorVariant.light200 && _default$P.modifiers.light_200, className), ref: drawerContentRef }, props), children),
+            React__namespace.cloneElement(panelContent, { drawerContentRef })));
     };
     DrawerContent.displayName = 'DrawerContent';
 
@@ -9864,9 +9882,11 @@
     let isResizing = null;
     let newSize = 0;
     const DrawerPanelContent = (_a) => {
-        var { className = '', id, children, hasNoBorder = false, isResizable = false, onResize, minSize, defaultSize, maxSize, increment = 5, resizeAriaLabel = 'Resize', resizeAriaDescribedBy = 'Press space to begin resizing, and use the arrow keys to grow or shrink the panel. Press enter or escape to finish resizing.', widths, colorVariant = exports.DrawerColorVariant.default } = _a, props = __rest$1(_a, ["className", "id", "children", "hasNoBorder", "isResizable", "onResize", "minSize", "defaultSize", "maxSize", "increment", "resizeAriaLabel", "resizeAriaDescribedBy", "widths", "colorVariant"]);
+        var { className = '', id, children, hasNoBorder = false, isResizable = false, onResize, minSize, defaultSize, maxSize, increment = 5, resizeAriaLabel = 'Resize', widths, colorVariant = exports.DrawerColorVariant.default, drawerContentRef } = _a, props = __rest$1(_a, ["className", "id", "children", "hasNoBorder", "isResizable", "onResize", "minSize", "defaultSize", "maxSize", "increment", "resizeAriaLabel", "widths", "colorVariant", "drawerContentRef"]);
         const panel = React__namespace.useRef();
-        const { position, isExpanded, isStatic, onExpand, drawerRef } = React__namespace.useContext(DrawerContext);
+        const splitterRef = React__namespace.useRef();
+        const [separatorValue, setSeparatorValue] = React__namespace.useState(0);
+        const { position, isExpanded, isStatic, onExpand, drawerRef, isInline } = React__namespace.useContext(DrawerContext);
         const hidden = isStatic ? false : !isExpanded;
         const [isExpandedInternal, setIsExpandedInternal] = React__namespace.useState(!hidden);
         let currWidth = 0;
@@ -9880,6 +9900,38 @@
                 setIsExpandedInternal(isExpanded);
             }
         }, [isStatic, isExpanded]);
+        const calcValueNow = () => {
+            let splitterPos;
+            let drawerSize;
+            if (isInline && position === 'right') {
+                splitterPos = panel.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+                drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+            }
+            else if (isInline && position === 'left') {
+                splitterPos = splitterRef.current.getBoundingClientRect().right - panel.current.getBoundingClientRect().left;
+                drawerSize = drawerRef.current.getBoundingClientRect().right - drawerRef.current.getBoundingClientRect().left;
+            }
+            else if (position === 'right') {
+                splitterPos =
+                    drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+                drawerSize =
+                    drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+            }
+            else if (position === 'left') {
+                splitterPos =
+                    splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+                drawerSize =
+                    drawerContentRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
+            }
+            else if (position === 'bottom') {
+                splitterPos =
+                    drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
+                drawerSize =
+                    drawerContentRef.current.getBoundingClientRect().bottom - drawerContentRef.current.getBoundingClientRect().top;
+            }
+            const newSplitterPos = (splitterPos / drawerSize) * 100;
+            return Math.round((newSplitterPos + Number.EPSILON) * 100) / 100;
+        };
         const handleTouchStart = (e) => {
             e.stopPropagation();
             document.addEventListener('touchmove', callbackTouchMove, { passive: false });
@@ -9933,6 +9985,7 @@
             }
             panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
             currWidth = newSize;
+            setSeparatorValue(calcValueNow());
         };
         const handleMouseup = () => {
             if (!isResizing) {
@@ -9961,8 +10014,7 @@
         const callbackMouseUp = React__namespace.useCallback(handleMouseup, []);
         const handleKeys = (e) => {
             const key = e.key;
-            if (key !== ' ' &&
-                key !== 'Escape' &&
+            if (key !== 'Escape' &&
                 key !== 'Enter' &&
                 key !== 'ArrowUp' &&
                 key !== 'ArrowDown' &&
@@ -9974,38 +10026,31 @@
                 return;
             }
             e.preventDefault();
-            if (key === ' ' || key === 'Escape' || key === 'Enter') {
-                if (key === ' ') {
-                    isResizing = true;
-                }
-                else {
-                    isResizing = false;
-                    onResize && onResize(currWidth, id);
-                }
-                const panelRect = panel.current.getBoundingClientRect();
-                newSize = position === 'bottom' ? panelRect.height : panelRect.width;
+            if (key === 'Escape' || key === 'Enter') {
+                onResize && onResize(currWidth, id);
             }
-            if (isResizing) {
-                let delta = 0;
-                if (key === 'ArrowRight') {
-                    delta = position === 'left' ? increment : -increment;
-                }
-                else if (key === 'ArrowLeft') {
-                    delta = position === 'left' ? -increment : increment;
-                }
-                else if (key === 'ArrowUp') {
-                    delta = increment;
-                }
-                else if (key === 'ArrowDown') {
-                    delta = -increment;
-                }
-                newSize = newSize + delta;
-                if (position === 'bottom') {
-                    panel.current.style.overflowAnchor = 'none';
-                }
-                panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
-                currWidth = newSize;
+            const panelRect = panel.current.getBoundingClientRect();
+            newSize = position === 'bottom' ? panelRect.height : panelRect.width;
+            let delta = 0;
+            if (key === 'ArrowRight') {
+                delta = position === 'left' ? increment : -increment;
+            }
+            else if (key === 'ArrowLeft') {
+                delta = position === 'left' ? -increment : increment;
             }
+            else if (key === 'ArrowUp') {
+                delta = increment;
+            }
+            else if (key === 'ArrowDown') {
+                delta = -increment;
+            }
+            newSize = newSize + delta;
+            if (position === 'bottom') {
+                panel.current.style.overflowAnchor = 'none';
+            }
+            panel.current.style.setProperty('--pf-c-drawer__panel--md--FlexBasis', newSize + 'px');
+            currWidth = newSize;
+            setSeparatorValue(calcValueNow());
         };
         const boundaryCssVars = {};
         if (defaultSize) {
@@ -10017,7 +10062,7 @@
         if (maxSize) {
             boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis--max'] = maxSize;
         }
-        return (React__namespace.createElement("div", Object.assign({ id: id, className: css(_default$P.drawerPanel, isResizable && _default$P.modifiers.resizable, hasNoBorder && _default$P.modifiers.noBorder, formatBreakpointMods(widths, _default$P), colorVariant === exports.DrawerColorVariant.light200 && _default$P.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
+        return (React__namespace.createElement(GenerateId, { prefix: "pf-drawer-panel-" }, panelId => (React__namespace.createElement("div", Object.assign({ id: id || panelId, className: css(_default$P.drawerPanel, isResizable && _default$P.modifiers.resizable, hasNoBorder && _default$P.modifiers.noBorder, formatBreakpointMods(widths, _default$P), colorVariant === exports.DrawerColorVariant.light200 && _default$P.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
                 if (!hidden && ev.nativeEvent.propertyName === 'transform') {
                     onExpand();
                 }
@@ -10026,10 +10071,10 @@
             style: boundaryCssVars
         }), props), isExpandedInternal && (React__namespace.createElement(React__namespace.Fragment, null,
             isResizable && (React__namespace.createElement(React__namespace.Fragment, null,
-                React__namespace.createElement("div", { className: css(_default$P.drawerSplitter, position !== 'bottom' && _default$P.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-describedby": resizeAriaDescribedBy, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart },
+                React__namespace.createElement("div", { className: css(_default$P.drawerSplitter, position !== 'bottom' && _default$P.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-valuenow": separatorValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-controls": id || panelId, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, ref: splitterRef },
                     React__namespace.createElement("div", { className: css(_default$P.drawerSplitterHandle), "aria-hidden": true })),
                 React__namespace.createElement("div", { className: css(_default$P.drawerPanelMain) }, children))),
-            !isResizable && children))));
+            !isResizable && children))))));
     };
     DrawerPanelContent.displayName = 'DrawerPanelContent';