npm - @patternfly/react-core - Versions diffs - 6.5.0-prerelease.69 → 6.5.0-prerelease.70 - Mend

@patternfly/react-core 6.5.0-prerelease.69 → 6.5.0-prerelease.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

package/helpers/package.json CHANGED Viewed

	@@ -1 +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.68","private":true}
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.69","private":true}

package/layouts/package.json CHANGED Viewed

	@@ -1 +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.68","private":true}
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.69","private":true}

package/next/package.json CHANGED Viewed

	@@ -1 +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.68","private":true}
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.69","private":true}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.69",
+  "version": "6.5.0-prerelease.70",
   "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.30",
-    "@patternfly/react-styles": "^6.5.0-prerelease.21",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.20",
+    "@patternfly/react-icons": "^6.5.0-prerelease.31",
+    "@patternfly/react-styles": "^6.5.0-prerelease.22",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.21",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.78",
+    "@patternfly/patternfly": "6.5.0-prerelease.79",
     "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": "b679641cbe5c8fa428a0a9d1b1c4c5bc0b04b6e4"
+  "gitHead": "6b93dbd79a250af00d40d88f8e7eeb5553231946"
 }

package/src/components/CalendarMonth/CalendarMonth.tsx CHANGED Viewed

@@ -81,6 +81,13 @@ export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTML
   onSelectToggle?: (open: boolean) => void;
   /** Functions that returns if a date is valid and selectable. */
   validators?: ((date: Date) => boolean)[];
+  /** The container to append the month select menu to. Defaults to 'inline'.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * monthAppendTo={() => document.body};
+   * monthAppendTo={document.getElementById('target')}
+   */
+  monthAppendTo?: HTMLElement | ((ref?: HTMLElement) => HTMLElement) | 'inline';
 }
 const buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => {
@@ -143,6 +150,7 @@ export const CalendarMonth = ({
   cellAriaLabel,
   isDateFocused = false,
   inlineProps,
+  monthAppendTo = 'inline',
   ...props
 }: CalendarProps) => {
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
@@ -327,7 +335,7 @@ export const CalendarMonth = ({
                   onMonthChange(ev, newDate);
                 }}
                 selected={monthFormatted}
-                popperProps={{ appendTo: 'inline' }}
+                popperProps={{ appendTo: monthAppendTo }}
               >
                 <SelectList>
                   {longMonths.map((longMonth, index) => (

package/src/components/Pagination/Pagination.tsx CHANGED Viewed

@@ -125,8 +125,14 @@ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAPr
   isCompact?: boolean;
   /** Flag indicating if pagination should not be sticky on mobile. */
   isStatic?: boolean;
-  /** Flag indicating if pagination should stick to its position (based on variant). */
+  /** Flag indicating if pagination should stick to its position (based on variant). For dynamic sticky control, use isStickyBase
+   * and isStickyStuck instead.
+   */
   isSticky?: boolean;
+  /** @beta Flag indicating the pagination should have sticky positioning relative to its container. */
+  isStickyBase?: boolean;
+  /** @beta Flag indicating the pagination should have stuck styling, when the pagination is not at the top (for top variant) or bottom (for bottom variant) of the scroll container. */
+  isStickyStuck?: boolean;
   /** Total number of items. */
   itemCount?: number;
   /** Last index of items on current page. */
@@ -191,8 +197,10 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
   variant = PaginationVariant.top,
   isDisabled = false,
   isCompact = false,
-  isSticky = false,
   isStatic = false,
+  isSticky = false,
+  isStickyBase = false,
+  isStickyStuck = false,
   dropDirection: dropDirectionProp,
   toggleTemplate,
   perPage = defaultPerPageOptions[0].value,
@@ -290,7 +298,9 @@ export const Pagination: React.FunctionComponent<PaginationProps> = ({
         usePageInsets && styles.modifiers.pageInsets,
         formatBreakpointMods(inset, styles),
         isStatic && styles.modifiers.static,
-        isSticky && styles.modifiers.sticky,
+        isSticky && !isStickyBase && !isStickyStuck && styles.modifiers.sticky,
+        isStickyBase && styles.modifiers.stickyBase,
+        isStickyStuck && styles.modifiers.stickyStuck,
         className
       )}
       {...(widgetId && { id: `${widgetId}-${variant}-pagination` })}

package/src/components/Pagination/__tests__/Pagination.test.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { Pagination, PaginationVariant } from '../index';
 import { KeyTypes } from '../../../helpers';
+import styles from '@patternfly/react-styles/css/components/Pagination/pagination';
 describe('Pagination', () => {
   describe('component render', () => {
@@ -117,6 +118,26 @@ describe('Pagination', () => {
       render(<Pagination data-testid="pagination-insets" usePageInsets />);
       expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
     });
+    test(`should not render ${styles.modifiers.stickyBase} class by default`, () => {
+      render(<Pagination data-testid="pagination-sticky-base-default" itemCount={20} />);
+      expect(screen.getByTestId('pagination-sticky-base-default')).not.toHaveClass(styles.modifiers.stickyBase);
+    });
+    test(`should render ${styles.modifiers.stickyBase} class when isStickyBase is true`, () => {
+      render(<Pagination data-testid="pagination-sticky-base" itemCount={20} isStickyBase />);
+      expect(screen.getByTestId('pagination-sticky-base')).toHaveClass(styles.modifiers.stickyBase);
+    });
+    test(`should not render ${styles.modifiers.stickyStuck} class by default`, () => {
+      render(<Pagination data-testid="pagination-sticky-stuck-default" itemCount={20} />);
+      expect(screen.getByTestId('pagination-sticky-stuck-default')).not.toHaveClass(styles.modifiers.stickyStuck);
+    });
+    test(`should render ${styles.modifiers.stickyStuck} class when isStickyStuck is true`, () => {
+      render(<Pagination data-testid="pagination-sticky-stuck" itemCount={20} isStickyStuck />);
+      expect(screen.getByTestId('pagination-sticky-stuck')).toHaveClass(styles.modifiers.stickyStuck);
+    });
   });
   describe('API', () => {

package/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap CHANGED Viewed

@@ -4,7 +4,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcm:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-:rdq:"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -29,7 +29,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rco:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rds:"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -93,7 +93,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcp:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdt:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -137,7 +137,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcq:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdu:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -183,7 +183,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rcs:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:re0:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -200,7 +200,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rct:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:re1:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -243,7 +243,7 @@ exports[`Pagination API verify inset2xl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcu:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:re2:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -289,7 +289,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rc4:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-:rd8:"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -314,7 +314,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rc6:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rda:"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -378,7 +378,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rc7:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdb:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -422,7 +422,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rc8:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdc:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -468,7 +468,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rca:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:rde:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -485,7 +485,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcb:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdf:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -528,7 +528,7 @@ exports[`Pagination API verify insetLg inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcc:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdg:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -574,7 +574,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rbr:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcv:"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -599,7 +599,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rbt:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rd1:"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -663,7 +663,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbu:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rd2:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -707,7 +707,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbv:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rd3:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -753,7 +753,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rc1:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:rd5:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -770,7 +770,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rc2:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rd6:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -813,7 +813,7 @@ exports[`Pagination API verify insetMd inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rc3:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rd7:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -859,7 +859,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rb9:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcd:"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -884,7 +884,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rbb:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rcf:"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -948,7 +948,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbc:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rcg:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -992,7 +992,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbd:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rch:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1038,7 +1038,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rbf:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:rcj:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -1055,7 +1055,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbg:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rck:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1098,7 +1098,7 @@ exports[`Pagination API verify insetNone inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbh:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rcl:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1144,7 +1144,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rbi:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcm:"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1169,7 +1169,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rbk:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rco:"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -1233,7 +1233,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbl:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rcp:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1277,7 +1277,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbm:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rcq:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1323,7 +1323,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rbo:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:rcs:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -1340,7 +1340,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbp:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rct:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1383,7 +1383,7 @@ exports[`Pagination API verify insetSm inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rbq:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rcu:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1429,7 +1429,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-pagination pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
-    data-ouia-component-id="OUIA-Generated-Pagination-top-:rcd:"
+    data-ouia-component-id="OUIA-Generated-Pagination-top-:rdh:"
     data-ouia-component-type="PF6/Pagination"
     data-ouia-safe="true"
     id="options-menu-top-pagination"
@@ -1454,7 +1454,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
         aria-expanded="false"
         aria-haspopup="listbox"
         class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
-        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rcf:"
+        data-ouia-component-id="OUIA-Generated-MenuToggle-plainText-:rdj:"
         data-ouia-component-type="PF6/MenuToggle"
         data-ouia-safe="true"
         id="options-menu-top-toggle"
@@ -1518,7 +1518,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to first page"
           class="pf-v6-c-button pf-m-plain"
           data-action="first"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcg:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdk:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1562,7 +1562,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to previous page"
           class="pf-v6-c-button pf-m-plain"
           data-action="previous"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rch:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdl:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           disabled=""
@@ -1608,7 +1608,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           <input
             aria-invalid="false"
             aria-label="Current page"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-:rcj:"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-:rdn:"
             data-ouia-component-type="PF6/TextInput"
             data-ouia-safe="true"
             max="2"
@@ -1625,7 +1625,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to next page"
           class="pf-v6-c-button pf-m-plain"
           data-action="next"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rck:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdo:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -1668,7 +1668,7 @@ exports[`Pagination API verify insetXl inset breakpoints 1`] = `
           aria-label="Go to last page"
           class="pf-v6-c-button pf-m-plain"
           data-action="last"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:rcl:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rdp:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"

package/src/components/Pagination/examples/Pagination.md CHANGED Viewed

@@ -6,18 +6,20 @@ propComponents: ['Pagination', PaginationTitles, PerPageOptions, PaginationToggl
 ouia: true
 ---
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useRef, useLayoutEffect } from 'react';
 ## Examples
 ### Top
 ```ts file="./PaginationTop.tsx"
 ```
 ### Bottom
 ```ts file="./PaginationBottom.tsx"
 ```
 ### Indeterminate
@@ -25,39 +27,63 @@ import { Fragment, useState } from 'react';
 By not passing `itemCount` and passing `toggleTemplate` you can customize the toggle with text.
 ```ts file="./PaginationIndeterminate.tsx"
 ```
 ### Disabled
 ```ts file="./PaginationDisabled.tsx"
 ```
 ### No items
 ```ts file="./PaginationNoItems.tsx"
 ```
 ### One page
 ```ts file="./PaginationOnePage.tsx"
 ```
 ### Compact
 ```ts file="./PaginationCompact.tsx"
 ```
 ### Offset
 ```ts file="./PaginationOffset.tsx"
 ```
 ### Sticky
 ```ts isFullscreen file="./PaginationSticky.tsx"
+```
+### Dynamic sticky top
+Pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the top of the scroll parent container.
+```ts isFullscreen file="./PaginationDynamicStickyTop.tsx"
+```
+### Dynamic sticky bottom
+Bottom pagination can be made sticky via two properties: `isStickyBase`, which allows separate control of the sticky position, and `isStickyStuck`, which applies the sticky styling. In this example, `isStickyStuck` is only applied when the pagination is not at the bottom of the scroll parent container.
+```ts isFullscreen file="./PaginationDynamicStickyBottom.tsx"
 ```
 ### Inset
 ```ts file="./PaginationInset.tsx"
 ```