@patternfly/react-core 4.211.3 → 4.211.6

package/dist/umd/react-core.js

@@ -3093,6 +3093,11 @@
             addEventListener(onPopperClick, popperElement, 'click');
             onDocumentClick && addEventListener(onDocumentClickCallback, document, 'click');
             addEventListener(onDocumentKeyDown, document, 'keydown');
+            // Trigger a Popper update when content changes.
+            const observer = new MutationObserver(() => {
+                update && update();
+            });
+            popperElement && observer.observe(popperElement, { attributes: true, childList: true, subtree: true });
             return () => {
                 removeEventListener(onMouseEnter, refOrTrigger, 'mouseenter');
                 removeEventListener(onMouseLeave, refOrTrigger, 'mouseleave');
@@ -3103,6 +3108,7 @@
                 removeEventListener(onPopperClick, popperElement, 'click');
                 onDocumentClick && removeEventListener(onDocumentClickCallback, document, 'click');
                 removeEventListener(onDocumentKeyDown, document, 'keydown');
+                observer.disconnect();
             };
         }, [
             triggerElement,
@@ -3147,7 +3153,7 @@
                 return () => { };
             }
         }), [popperMatchesTriggerWidth]);
-        const { styles: popperStyles, attributes, forceUpdate } = usePopper(refOrTrigger, popperElement, {
+        const { styles: popperStyles, attributes, update } = usePopper(refOrTrigger, popperElement, {
             placement: getPlacementMemo,
             modifiers: [
                 {
@@ -3175,11 +3181,6 @@
                 sameWidthMod
             ]
         });
-        // force update when content changes
-        // https://github.com/patternfly/patternfly-react/issues/5620
-        React__namespace.useEffect(() => {
-            forceUpdate && forceUpdate();
-        }, [popper]);
         // Returns the CSS modifier class in order to place the Popper's arrow properly
         // Depends on the position of the Popper relative to the reference element
         const modifierFromPopperPosition = () => {
@@ -15334,7 +15335,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;
         }
@@ -15342,7 +15343,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) {
@@ -15466,12 +15468,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';

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);
 }