@patternfly/react-core 6.5.0-prerelease.71 → 6.5.0-prerelease.72

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.70","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.71","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.70","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.71","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.70","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.71","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.71",
+  "version": "6.5.0-prerelease.72",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.32",
-    "@patternfly/react-styles": "^6.5.0-prerelease.22",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.21",
+    "@patternfly/react-icons": "^6.5.0-prerelease.33",
+    "@patternfly/react-styles": "^6.5.0-prerelease.23",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.22",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.79",
+    "@patternfly/patternfly": "6.5.0-prerelease.80",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "46565481de4856d5e426669178a4731918d60410"
+  "gitHead": "ea832af189f62520e49b172f13cac22df6c5d3a4"
 }

package/src/components/Page/PageGroup.tsx

@@ -17,6 +17,10 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** @beta Applies the base sticky positioning to the top or bottom of the scroll parent container. */
+  stickyBase?: 'top' | 'bottom';
+  /** @beta Flag indicating if the group has stuck styling, applied when the group is not at the edge of the scroll parent container. */
+  isStickyStuck?: boolean;
   /** Enables the page group to fill the available vertical space if true, or disable filling if false. */
   isFilled?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the top */
@@ -37,6 +41,8 @@ export const PageGroup = ({
   className = '',
   children,
   stickyOnBreakpoint,
+  stickyBase,
+  isStickyStuck = false,
   isFilled,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -61,6 +67,10 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        stickyBase === 'top' && styles.modifiers.stickyTopBase,
+        stickyBase === 'bottom' && styles.modifiers.stickyBottomBase,
+        isStickyStuck && stickyBase === 'top' && styles.modifiers.stickyTopStuck,
+        isStickyStuck && stickyBase === 'bottom' && styles.modifiers.stickyBottomStuck,
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,
         hasShadowTop && styles.modifiers.shadowTop,

package/src/components/Page/PageSection.tsx

@@ -51,6 +51,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** @beta Applies the base sticky positioning to the top or bottom of the scroll parent container. */
+  stickyBase?: 'top' | 'bottom';
+  /** @beta Flag indicating if the section has stuck styling, applied when the section is not at the edge of the scroll parent container. */
+  isStickyStuck?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageSection should have a shadow at the bottom */
@@ -96,6 +100,8 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   isWidthLimited = false,
   isCenterAligned = false,
   stickyOnBreakpoint,
+  stickyBase,
+  isStickyStuck = false,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
@@ -124,6 +130,10 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         variantType[type],
         formatBreakpointMods(padding, styles),
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        stickyBase === 'top' && styles.modifiers.stickyTopBase,
+        stickyBase === 'bottom' && styles.modifiers.stickyBottomBase,
+        isStickyStuck && stickyBase === 'top' && styles.modifiers.stickyTopStuck,
+        isStickyStuck && stickyBase === 'bottom' && styles.modifiers.stickyBottomStuck,
         type === PageSectionTypes.default && variantStyle[variant],
         isFilled === false && styles.modifiers.noFill,
         isFilled === true && styles.modifiers.fill,

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -101,3 +101,55 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlas
 
   expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass);
 });
+
+test(`Does not add sticky base or sticky stuck classes by default`, () => {
+  render(<PageGroup>test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopBase} without stuck class when stickyBase="top"`, () => {
+  render(<PageGroup stickyBase="top">test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomBase} without stuck class when stickyBase="bottom"`, () => {
+  render(<PageGroup stickyBase="bottom">test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopStuck} when stickyBase="top" and isStickyStuck`, () => {
+  render(
+    <PageGroup stickyBase="top" isStickyStuck>
+      test
+    </PageGroup>
+  );
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(group).toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomStuck} when stickyBase="bottom" and isStickyStuck`, () => {
+  render(
+    <PageGroup stickyBase="bottom" isStickyStuck>
+      test
+    </PageGroup>
+  );
+  const group = screen.getByText('test');
+  expect(group).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(group).toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Does not add stuck class when isStickyStuck is true but stickyBase is not set`, () => {
+  render(<PageGroup isStickyStuck>test</PageGroup>);
+  const group = screen.getByText('test');
+  expect(group).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(group).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -199,3 +199,67 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlas
 
   expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass);
 });
+
+test(`Does not add sticky base or sticky stuck classes by default`, () => {
+  render(<PageSection component="main">test</PageSection>);
+  const section = screen.getByRole('main');
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopBase} without stuck class when stickyBase="top"`, () => {
+  render(
+    <PageSection component="main" stickyBase="top">
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomBase} without stuck class when stickyBase="bottom"`, () => {
+  render(
+    <PageSection component="main" stickyBase="bottom">
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyTopStuck} when stickyBase="top" and isStickyStuck`, () => {
+  render(
+    <PageSection component="main" stickyBase="top" isStickyStuck>
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyTopBase);
+  expect(section).toHaveClass(styles.modifiers.stickyTopStuck);
+});
+
+test(`Adds ${styles.modifiers.stickyBottomStuck} when stickyBase="bottom" and isStickyStuck`, () => {
+  render(
+    <PageSection component="main" stickyBase="bottom" isStickyStuck>
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).toHaveClass(styles.modifiers.stickyBottomBase);
+  expect(section).toHaveClass(styles.modifiers.stickyBottomStuck);
+});
+
+test(`Does not add stuck class when isStickyStuck is true but stickyBase is not set`, () => {
+  render(
+    <PageSection component="main" isStickyStuck>
+      test
+    </PageSection>
+  );
+  const section = screen.getByRole('main');
+  expect(section).not.toHaveClass(styles.modifiers.stickyTopStuck);
+  expect(section).not.toHaveClass(styles.modifiers.stickyBottomStuck);
+});

package/src/components/Page/examples/Page.md

@@ -6,7 +6,7 @@ propComponents:
   ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
 
-import { useState } from 'react';
+import { useState, useLayoutEffect, useRef } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
@@ -131,3 +131,13 @@ To remove the default background color from a page section or group, use the `is
 ```ts file="./PagePlainSections.tsx"
 
 ```
+
+### Dynamic sticky section
+
+A page section may be made sticky with separate control of its sticky positioning and stuck styling using the `stickyBase` and `isStickyStuck` properties. The `stickyBase` property accepts a value of `"top"` or `"bottom"` and applies the base sticky positioning in the given direction. The `isStickyStuck` property applies visual "stuck" styling such as a background, box shadow, and border, and should be toggled based on the scroll position of the scroll parent container.
+
+In this example, a scroll event listener on the scroll parent container toggles `isStickyStuck` when `scrollTop > 0`, so the stuck styling appears only when the content is scrolled.
+
+```ts file="./PageDynamicStickySection.tsx"
+
+```

package/src/components/Page/examples/PageDynamicStickySection.tsx

@@ -0,0 +1,108 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  PageSection,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Breadcrumb,
+  BreadcrumbItem,
+  Content
+} from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  shouldTrack: boolean;
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const PageDynamicStickySection: React.FunctionComponent = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+
+  const headerToolbar = (
+    <Toolbar id="dynamic-sticky-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  return (
+    <Page masthead={masthead}>
+      <div ref={scrollParentRef} style={{ overflowY: 'auto', height: '100%' }}>
+        <PageSection type="breadcrumb" stickyBase="top" isStickyStuck={isStickyStuck}>
+          <Breadcrumb>
+            <BreadcrumbItem>Section home</BreadcrumbItem>
+            <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+            <BreadcrumbItem to="#" isActive>
+              Section landing
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </PageSection>
+        <PageSection>
+          <Content>
+            <h1>Main title</h1>
+            <p>
+              Scroll the container to see the breadcrumb section above dynamically apply its stuck styling. The section
+              uses <code>stickyBase=&quot;top&quot;</code> to remain fixed at the top of the scroll parent, and{' '}
+              <code>isStickyStuck</code> is toggled via a scroll event listener to apply visual styling when the section
+              is no longer at the top edge.
+            </p>
+          </Content>
+        </PageSection>
+        {Array.from({ length: 30 }, (_, i) => (
+          <PageSection key={i} variant={i % 2 === 0 ? 'default' : 'secondary'}>
+            <Content>
+              <p>{`Section ${i + 1} content`}</p>
+            </Content>
+          </PageSection>
+        ))}
+      </div>
+    </Page>
+  );
+};