@patternfly/react-core 4.211.1 → 4.211.4

package/dist/umd/react-core.js

@@ -3332,7 +3332,7 @@
                 if (isEventFromContainer ? !isEventFromContainer(event) : !this._isEventFromContainer(event)) {
                     return;
                 }
-                const { isActiveElement, getFocusableElement, noVerticalArrowHandling, noHorizontalArrowHandling, noEnterHandling, noSpaceHandling, updateTabIndex, validSiblingTags, additionalKeyHandler, createNavigableElements } = this.props;
+                const { isActiveElement, getFocusableElement, noVerticalArrowHandling, noHorizontalArrowHandling, noEnterHandling, noSpaceHandling, updateTabIndex, validSiblingTags, additionalKeyHandler, createNavigableElements, onlyTraverseSiblings } = this.props;
                 // Pass the event off to be handled by any custom handler
                 additionalKeyHandler && additionalKeyHandler(event);
                 // Initalize navigableElements from the createNavigableElements callback
@@ -3360,7 +3360,7 @@
                     }
                 }
                 // Inject helper handler for arrow navigation
-                handleArrows(event, navigableElements, isActiveElement, getFocusableElement, validSiblingTags, noVerticalArrowHandling, noHorizontalArrowHandling, updateTabIndex);
+                handleArrows(event, navigableElements, isActiveElement, getFocusableElement, validSiblingTags, noVerticalArrowHandling, noHorizontalArrowHandling, updateTabIndex, onlyTraverseSiblings);
             };
             this._isEventFromContainer = (event) => {
                 const { containerRef } = this.props;
@@ -3388,6 +3388,7 @@
         isActiveElement: (navigableElement) => document.activeElement === navigableElement,
         getFocusableElement: (navigableElement) => navigableElement,
         validSiblingTags: ['BUTTON', 'A'],
+        onlyTraverseSiblings: true,
         updateTabIndex: true,
         noHorizontalArrowHandling: false,
         noVerticalArrowHandling: false,
@@ -4237,7 +4238,7 @@
     const Tooltip = (_a) => {
         var { content: bodyContent, position = 'top', trigger = 'mouseenter focus', isVisible = false, isContentLeftAligned = false, enableFlip = true, className = '', entryDelay = 300, exitDelay = 0, appendTo = () => document.body, zIndex = 9999, maxWidth = tooltipMaxWidth.value, distance = 15, aria = 'describedby', 
         // For every initial starting position, there are 3 escape positions
-        flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], id = `pf-tooltip-${pfTooltipIdCounter++}`, children, animationDuration = 300, reference, boundary, isAppLauncher, tippyProps } = _a, rest = __rest$1(_a, ["content", "position", "trigger", "isVisible", "isContentLeftAligned", "enableFlip", "className", "entryDelay", "exitDelay", "appendTo", "zIndex", "maxWidth", "distance", "aria", "flipBehavior", "id", "children", "animationDuration", "reference", "boundary", "isAppLauncher", "tippyProps"]);
+        flipBehavior = ['top', 'right', 'bottom', 'left', 'top', 'right', 'bottom'], id = `pf-tooltip-${pfTooltipIdCounter++}`, children, animationDuration = 300, reference, 'aria-live': ariaLive = reference ? 'polite' : 'off', boundary, isAppLauncher, tippyProps } = _a, rest = __rest$1(_a, ["content", "position", "trigger", "isVisible", "isContentLeftAligned", "enableFlip", "className", "entryDelay", "exitDelay", "appendTo", "zIndex", "maxWidth", "distance", "aria", "flipBehavior", "id", "children", "animationDuration", "reference", 'aria-live', "boundary", "isAppLauncher", "tippyProps"]);
         {
             boundary !== undefined &&
                 console.warn('The Tooltip boundary prop has been deprecated. If you want to constrain the popper to a specific element use the appendTo prop instead.');
@@ -4319,7 +4320,7 @@
             'right-end': styles$19.modifiers.rightBottom
         };
         const hasCustomMaxWidth = maxWidth !== tooltipMaxWidth.value;
-        const content = (React__namespace.createElement("div", Object.assign({ className: css(styles$19.tooltip, className), role: "tooltip", id: id, style: {
+        const content = (React__namespace.createElement("div", Object.assign({ "aria-live": ariaLive, className: css(styles$19.tooltip, className), role: "tooltip", id: id, style: {
                 maxWidth: hasCustomMaxWidth ? maxWidth : null,
                 opacity,
                 transition: getOpacityTransition(animationDuration)
@@ -14440,7 +14441,7 @@
 
     const PageGroup = (_a) => {
         var { className = '', children, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$z.pageMainGroup, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }), children));
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$z.pageMainGroup, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })), children));
     };
     PageGroup.displayName = 'PageGroup';
 
@@ -14783,7 +14784,7 @@
                 const isDrilldown = this.props.containsDrilldown;
                 return isDrilldown
                     ? Array.from(this.activeMenu.getElementsByTagName('UL')[0].children).filter(el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')))
-                    : Array.from(this.activeMenu.getElementsByTagName('LI')).filter(el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
+                    : Array.from(this.menuRef.current.getElementsByTagName('LI')).filter(el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider')));
             };
             if (props.innerRef) {
                 this.menuRef = props.innerRef;
@@ -15333,7 +15334,7 @@
     ModalBoxTitle.displayName = 'ModalBoxTitle';
 
     const ModalContent = (_a) => {
-        var { children, className = '', isOpen = false, header = null, help = null, description = null, title = '', titleIconVariant = null, titleLabel = '', 'aria-label': ariaLabel = '', 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby, showClose = true, footer = null, actions = [], onClose = () => undefined, variant = 'default', position, positionOffset, width = -1, boxId, labelId, descriptorId, disableFocusTrap = false, hasNoBodyWrapper = false, ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "header", "help", "description", "title", "titleIconVariant", "titleLabel", 'aria-label', 'aria-describedby', 'aria-labelledby', "showClose", "footer", "actions", "onClose", "variant", "position", "positionOffset", "width", "boxId", "labelId", "descriptorId", "disableFocusTrap", "hasNoBodyWrapper", "ouiaId", "ouiaSafe"]);
+        var { children, className = '', isOpen = false, header = null, help = null, description = null, title = '', titleIconVariant = null, titleLabel = '', 'aria-label': ariaLabel = '', 'aria-describedby': ariaDescribedby, 'aria-labelledby': ariaLabelledby, bodyAriaLabel, bodyAriaRole, showClose = true, footer = null, actions = [], onClose = () => undefined, variant = 'default', position, positionOffset, width = -1, boxId, labelId, descriptorId, disableFocusTrap = false, hasNoBodyWrapper = false, ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "header", "help", "description", "title", "titleIconVariant", "titleLabel", 'aria-label', 'aria-describedby', 'aria-labelledby', "bodyAriaLabel", "bodyAriaRole", "showClose", "footer", "actions", "onClose", "variant", "position", "positionOffset", "width", "boxId", "labelId", "descriptorId", "disableFocusTrap", "hasNoBodyWrapper", "ouiaId", "ouiaSafe"]);
         if (!isOpen) {
             return null;
         }
@@ -15341,7 +15342,8 @@
             React__namespace.createElement(ModalBoxTitle, { title: title, titleIconVariant: titleIconVariant, titleLabel: titleLabel, id: labelId }),
             description && React__namespace.createElement(ModalBoxDescription, { id: descriptorId }, description))));
         const modalBoxFooter = footer ? (React__namespace.createElement(ModalBoxFooter, null, footer)) : (actions.length > 0 && React__namespace.createElement(ModalBoxFooter, null, actions));
-        const modalBody = hasNoBodyWrapper ? (children) : (React__namespace.createElement(ModalBoxBody, Object.assign({}, props, (!description && !ariaDescribedby && { id: descriptorId })), children));
+        const defaultModalBodyAriaRole = bodyAriaLabel ? 'region' : undefined;
+        const modalBody = hasNoBodyWrapper ? (children) : (React__namespace.createElement(ModalBoxBody, Object.assign({ "aria-label": bodyAriaLabel, role: bodyAriaRole || defaultModalBodyAriaRole }, props, (!description && !ariaDescribedby && { id: descriptorId })), children));
         const boxStyle = width === -1 ? {} : { width };
         const ariaLabelledbyFormatted = () => {
             if (ariaLabelledby === null) {
@@ -15465,12 +15467,12 @@
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             appendTo, 
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onEscapePress, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, title, titleIconVariant, titleLabel, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["appendTo", "onEscapePress", 'aria-labelledby', 'aria-label', 'aria-describedby', "title", "titleIconVariant", "titleLabel", "ouiaId", "ouiaSafe"]);
+            onEscapePress, 'aria-labelledby': ariaLabelledby, 'aria-label': ariaLabel, 'aria-describedby': ariaDescribedby, bodyAriaLabel, bodyAriaRole, title, titleIconVariant, titleLabel, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["appendTo", "onEscapePress", 'aria-labelledby', 'aria-label', 'aria-describedby', "bodyAriaLabel", "bodyAriaRole", "title", "titleIconVariant", "titleLabel", "ouiaId", "ouiaSafe"]);
             const { container } = this.state;
             if (!canUseDOM || !container) {
                 return null;
             }
-            return ReactDOM__namespace.createPortal(React__namespace.createElement(ModalContent, Object.assign({}, props, { boxId: this.boxId, labelId: this.labelId, descriptorId: this.descriptorId, title: title, titleIconVariant: titleIconVariant, titleLabel: titleLabel, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, ouiaId: ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe: ouiaSafe })), container);
+            return ReactDOM__namespace.createPortal(React__namespace.createElement(ModalContent, Object.assign({}, props, { boxId: this.boxId, labelId: this.labelId, descriptorId: this.descriptorId, title: title, titleIconVariant: titleIconVariant, titleLabel: titleLabel, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, bodyAriaLabel: bodyAriaLabel, bodyAriaRole: bodyAriaRole, ouiaId: ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe: ouiaSafe })), container);
         }
     }
     Modal.displayName = 'Modal';
@@ -16787,7 +16789,7 @@
 
     const PageBreadcrumb = (_a) => {
         var { className = '', children, isWidthLimited, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("section", Object.assign({ className: css(styles$z.pageMainBreadcrumb, isWidthLimited && styles$z.modifiers.limitWidth, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }, props),
+        return (React__namespace.createElement("section", Object.assign({ className: css(styles$z.pageMainBreadcrumb, isWidthLimited && styles$z.modifiers.limitWidth, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$z.pageMainBody) }, children),
             !isWidthLimited && children));
     };
@@ -16859,7 +16861,7 @@
     };
     const PageSection = (_a) => {
         var { className = '', children, variant = 'default', type = 'default', padding, isFilled, isWidthLimited = false, isCenterAligned = false, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "variant", "type", "padding", "isFilled", "isWidthLimited", "isCenterAligned", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("section", Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$z), variantStyle$3[variant], isFilled === false && styles$z.modifiers.noFill, isFilled === true && styles$z.modifiers.fill, isWidthLimited && styles$z.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== exports.PageSectionTypes.subNav && styles$z.modifiers.alignCenter, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }),
+        return (React__namespace.createElement("section", Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$z), variantStyle$3[variant], isFilled === false && styles$z.modifiers.noFill, isFilled === true && styles$z.modifiers.fill, isWidthLimited && styles$z.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== exports.PageSectionTypes.subNav && styles$z.modifiers.alignCenter, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$z.pageMainBody) }, children),
             !isWidthLimited && children));
     };
@@ -16887,7 +16889,7 @@
 
     const PageNavigation = (_a) => {
         var { className = '', children, isWidthLimited, sticky, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$z.pageMainNav, isWidthLimited && styles$z.modifiers.limitWidth, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }, props),
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$z.pageMainNav, isWidthLimited && styles$z.modifiers.limitWidth, sticky === 'top' && styles$z.modifiers.stickyTop, sticky === 'bottom' && styles$z.modifiers.stickyBottom, hasShadowTop && styles$z.modifiers.shadowTop, hasShadowBottom && styles$z.modifiers.shadowBottom, hasOverflowScroll && styles$z.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$z.pageMainBody) }, children),
             !isWidthLimited && children));
     };
@@ -20690,10 +20692,11 @@
       "panelMainBody": "pf-c-panel__main-body"
     };
 
-    const Panel = (_a) => {
-        var { className, children, variant, isScrollable } = _a, props = __rest$1(_a, ["className", "children", "variant", "isScrollable"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$7.panel, variant === 'raised' && styles$7.modifiers.raised, variant === 'bordered' && styles$7.modifiers.bordered, isScrollable && styles$7.modifiers.scrollable, className) }, props), children));
+    const PanelBase = (_a) => {
+        var { className, children, variant, isScrollable, innerRef } = _a, props = __rest$1(_a, ["className", "children", "variant", "isScrollable", "innerRef"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$7.panel, variant === 'raised' && styles$7.modifiers.raised, variant === 'bordered' && styles$7.modifiers.bordered, isScrollable && styles$7.modifiers.scrollable, className), ref: innerRef }, props), children));
     };
+    const Panel = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(PanelBase, Object.assign({ innerRef: ref }, props))));
     Panel.displayName = 'Panel';
 
     const PanelMain = (_a) => {

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

@@ -3123,6 +3123,7 @@ label.pf-c-check, .pf-c-check__label,
   position: relative;
   display: inline-flex;
   align-items: center;
+  min-width: 0;
   padding: var(--pf-c-chip--PaddingTop) var(--pf-c-chip--PaddingRight) var(--pf-c-chip--PaddingBottom) var(--pf-c-chip--PaddingLeft);
   list-style: none;
   background-color: var(--pf-c-chip--BackgroundColor);
@@ -3230,6 +3231,7 @@ label.pf-c-check, .pf-c-check__label,
   flex: 1;
   flex-wrap: wrap;
   align-items: baseline;
+  min-width: 0;
 }
 
 .pf-c-chip-group__list {
@@ -3242,10 +3244,13 @@ label.pf-c-check, .pf-c-check__label,
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .pf-c-chip-group__list-item {
   display: inline-flex;
+  min-width: 0;
   margin-right: var(--pf-c-chip-group__list-item--MarginRight);
   margin-bottom: var(--pf-c-chip-group__list-item--MarginBottom);
 }