@patternfly/react-core 4.232.6 → 4.232.9

package/dist/umd/react-core.css

@@ -23752,89 +23752,6 @@ label.pf-c-tree-view__node-text {
   --pf-c-droppable--m-dragging--after--BorderColor: var(--pf-c-droppable--m-drag-outside--after--BorderColor);
 }
 
-.pf-c-panel {
-  --pf-c-panel--Width: auto;
-  --pf-c-panel--MinWidth: auto;
-  --pf-c-panel--MaxWidth: none;
-  --pf-c-panel--ZIndex: auto;
-  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-panel--BoxShadow: none;
-  --pf-c-panel--before--BorderWidth: 0;
-  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__main--MaxHeight: none;
-  --pf-c-panel__main--Overflow: visible;
-  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--BoxShadow: none;
-  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
-  --pf-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
-  position: relative;
-  z-index: var(--pf-c-panel--ZIndex);
-  width: var(--pf-c-panel--Width);
-  min-width: var(--pf-c-panel--MinWidth);
-  max-width: var(--pf-c-panel--MaxWidth);
-  background-color: var(--pf-c-panel--BackgroundColor);
-  box-shadow: var(--pf-c-panel--BoxShadow);
-}
-
-.pf-c-panel::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  pointer-events: none;
-  content: "";
-  border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
-}
-
-.pf-c-panel.pf-m-bordered {
-  --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
-}
-
-.pf-c-panel.pf-m-raised {
-  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
-  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
-}
-
-.pf-c-panel.pf-m-scrollable {
-  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
-  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
-  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
-}
-
-.pf-c-panel__header {
-  padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
-}
-
-.pf-c-panel__main {
-  max-height: var(--pf-c-panel__main--MaxHeight);
-  overflow: var(--pf-c-panel__main--Overflow);
-}
-
-.pf-c-panel__main-body {
-  padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
-}
-
-.pf-c-panel__footer {
-  padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
-  box-shadow: var(--pf-c-panel__footer--BoxShadow);
-}
-
 .pf-c-text-input-group {
   --pf-c-text-input-group--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-text-input-group__text--before--BorderWidth: var(--pf-global--BorderWidth--sm);
@@ -24007,6 +23924,89 @@ label.pf-c-tree-view__node-text {
   display: flex;
 }
 
+.pf-c-panel {
+  --pf-c-panel--Width: auto;
+  --pf-c-panel--MinWidth: auto;
+  --pf-c-panel--MaxWidth: none;
+  --pf-c-panel--ZIndex: auto;
+  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-panel--BoxShadow: none;
+  --pf-c-panel--before--BorderWidth: 0;
+  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
+  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-panel__main--MaxHeight: none;
+  --pf-c-panel__main--Overflow: visible;
+  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-panel__footer--BoxShadow: none;
+  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
+  --pf-c-panel--m-scrollable__main--Overflow: auto;
+  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
+  position: relative;
+  z-index: var(--pf-c-panel--ZIndex);
+  width: var(--pf-c-panel--Width);
+  min-width: var(--pf-c-panel--MinWidth);
+  max-width: var(--pf-c-panel--MaxWidth);
+  background-color: var(--pf-c-panel--BackgroundColor);
+  box-shadow: var(--pf-c-panel--BoxShadow);
+}
+
+.pf-c-panel::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
+}
+
+.pf-c-panel.pf-m-bordered {
+  --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
+}
+
+.pf-c-panel.pf-m-raised {
+  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
+  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
+}
+
+.pf-c-panel.pf-m-scrollable {
+  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
+  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
+  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
+}
+
+.pf-c-panel__header {
+  padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
+}
+
+.pf-c-panel__main {
+  max-height: var(--pf-c-panel__main--MaxHeight);
+  overflow: var(--pf-c-panel__main--Overflow);
+}
+
+.pf-c-panel__main-body {
+  padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
+}
+
+.pf-c-panel__footer {
+  padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
+  box-shadow: var(--pf-c-panel__footer--BoxShadow);
+}
+
 .pf-c-truncate {
   --pf-c-truncate--MinWidth: 12ch;
   --pf-c-truncate__start--MinWidth: 6ch;

package/dist/umd/react-core.js

@@ -17684,18 +17684,30 @@
     OverflowMenuDropdownItem.displayName = 'OverflowMenuDropdownItem';
 
     const PageBreadcrumb = (_a) => {
-        var { className = '', children, isWidthLimited, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        var { className = '', children, isWidthLimited, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll", 'aria-label']);
         const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
-        return (React__namespace.createElement("section", Object.assign({ className: css(styles$y.pageMainBreadcrumb, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
+        React__namespace.useEffect(() => {
+            if (hasOverflowScroll && !ariaLabel) {
+                /* eslint-disable no-console */
+                console.warn('PageBreadcrumb: An accessible aria-label is required when hasOverflowScroll is set to true.');
+            }
+        }, [hasOverflowScroll, ariaLabel]);
+        return (React__namespace.createElement("section", Object.assign({ className: css(styles$y.pageMainBreadcrumb, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), { "aria-label": ariaLabel }, props),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, children),
             !isWidthLimited && children));
     };
     PageBreadcrumb.displayName = 'PageBreadcrumb';
 
     const PageGroup = (_a) => {
-        var { className = '', children, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        var { className = '', children, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["className", "children", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll", 'aria-label']);
         const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$y.pageMainGroup, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })), children));
+        React__namespace.useEffect(() => {
+            if (hasOverflowScroll && !ariaLabel) {
+                /* eslint-disable no-console */
+                console.warn('PageGroup: An accessible aria-label is required when hasOverflowScroll is set to true.');
+            }
+        }, [hasOverflowScroll, ariaLabel]);
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$y.pageMainGroup, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), { "aria-label": ariaLabel }), children));
     };
     PageGroup.displayName = 'PageGroup';
 
@@ -17764,9 +17776,15 @@
         [exports.PageSectionVariants.darker]: styles$y.modifiers.dark_100
     };
     const PageSection = (_a) => {
-        var { className = '', children, variant = 'default', type = 'default', padding, isFilled, isWidthLimited = false, isCenterAligned = false, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "variant", "type", "padding", "isFilled", "isWidthLimited", "isCenterAligned", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        var { className = '', children, variant = 'default', type = 'default', padding, isFilled, isWidthLimited = false, isCenterAligned = false, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["className", "children", "variant", "type", "padding", "isFilled", "isWidthLimited", "isCenterAligned", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll", 'aria-label']);
         const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
-        return (React__namespace.createElement("section", Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$y), formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), variantStyle$3[variant], isFilled === false && styles$y.modifiers.noFill, isFilled === true && styles$y.modifiers.fill, isWidthLimited && styles$y.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== exports.PageSectionTypes.subNav && styles$y.modifiers.alignCenter, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 })),
+        React__namespace.useEffect(() => {
+            if (hasOverflowScroll && !ariaLabel) {
+                /* eslint-disable no-console */
+                console.warn('PageSection: An accessible aria-label is required when hasOverflowScroll is set to true.');
+            }
+        }, [hasOverflowScroll, ariaLabel]);
+        return (React__namespace.createElement("section", Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$y), formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), variantStyle$3[variant], isFilled === false && styles$y.modifiers.noFill, isFilled === true && styles$y.modifiers.fill, isWidthLimited && styles$y.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== exports.PageSectionTypes.subNav && styles$y.modifiers.alignCenter, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), { "aria-label": ariaLabel }),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, children),
             !isWidthLimited && children));
     };
@@ -17793,9 +17811,15 @@
     PageHeaderToolsItem.displayName = 'PageHeaderToolsItem';
 
     const PageNavigation = (_a) => {
-        var { className = '', children, isWidthLimited, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll"]);
+        var { className = '', children, isWidthLimited, sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["className", "children", "isWidthLimited", "sticky", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll", 'aria-label']);
         const { height, getVerticalBreakpoint } = React__namespace.useContext(PageContext);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$y.pageMainNav, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), props),
+        React__namespace.useEffect(() => {
+            if (hasOverflowScroll && !ariaLabel) {
+                /* eslint-disable no-console */
+                console.warn('PageNavigation: An accessible aria-label is required when hasOverflowScroll is set to true.');
+            }
+        }, [hasOverflowScroll, ariaLabel]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$y.pageMainNav, formatBreakpointMods(stickyOnBreakpoint, styles$y, 'sticky-', getVerticalBreakpoint(height), true), isWidthLimited && styles$y.modifiers.limitWidth, sticky === 'top' && styles$y.modifiers.stickyTop, sticky === 'bottom' && styles$y.modifiers.stickyBottom, hasShadowTop && styles$y.modifiers.shadowTop, hasShadowBottom && styles$y.modifiers.shadowBottom, hasOverflowScroll && styles$y.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), { "aria-label": ariaLabel }, props),
             isWidthLimited && React__namespace.createElement("div", { className: css(styles$y.pageMainBody) }, children),
             !isWidthLimited && children));
     };