@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/pagination/react.js

@@ -0,0 +1,492 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState, useRef, useLayoutEffect } from 'react';
+import srcImportsticky from './react/sticky.png';
+const pageData = {
+  "id": "Pagination",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/pagination/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Pagination/examples/Pagination.md",
+  "relPath": "packages/react-core/src/components/Pagination/examples/Pagination.md",
+  "propComponents": [
+    {
+      "name": "Pagination",
+      "description": "The main pagination component.",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "What should be rendered inside the pagination."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes for the pagination container.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "dropDirection",
+          "type": "'up' | 'down'",
+          "description": "Direction of dropdown context menu."
+        },
+        {
+          "name": "firstPage",
+          "type": "number",
+          "description": "Page to start at.",
+          "defaultValue": "1"
+        },
+        {
+          "name": "inset",
+          "type": "{\n  default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n}",
+          "description": "Insets at various breakpoints."
+        },
+        {
+          "name": "isCompact",
+          "type": "boolean",
+          "description": "Flag indicating if pagination is compact.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if pagination is disabled.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isLastFullPageShown",
+          "type": "boolean",
+          "description": "Indicate whether to show last full page of results when user selects perPage value\ngreater than remaining rows.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isStatic",
+          "type": "boolean",
+          "description": "Flag indicating if pagination should not be sticky on mobile.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isSticky",
+          "type": "boolean",
+          "description": "Flag indicating if pagination should stick to its position (based on variant). For dynamic sticky control, use isStickyBase\nand isStickyStuck instead.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isStickyBase",
+          "type": "boolean",
+          "description": "Flag indicating the pagination should have sticky positioning relative to its container.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isStickyStuck",
+          "type": "boolean",
+          "description": "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.",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "itemCount",
+          "type": "number",
+          "description": "Total number of items."
+        },
+        {
+          "name": "itemsEnd",
+          "type": "number",
+          "description": "Last index of items on current page.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "itemsStart",
+          "type": "number",
+          "description": "First index of items on current page.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "menuAppendTo",
+          "type": "HTMLElement | (() => HTMLElement) | 'inline'",
+          "description": "The container to append the pagination options menu to.",
+          "beta": true
+        },
+        {
+          "name": "offset",
+          "type": "number",
+          "description": "Start index of rows to display, used in place of providing page.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "onFirstClick",
+          "type": "(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void",
+          "description": "Function called when user clicks on navigate to first page.",
+          "defaultValue": "() => undefined"
+        },
+        {
+          "name": "onLastClick",
+          "type": "(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void",
+          "description": "Function called when user clicks on navigate to last page.",
+          "defaultValue": "() => undefined"
+        },
+        {
+          "name": "onNextClick",
+          "type": "(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void",
+          "description": "Function called when user clicks on navigate to next page.",
+          "defaultValue": "() => undefined"
+        },
+        {
+          "name": "onPageInput",
+          "type": "(event: React.KeyboardEvent<HTMLInputElement>, page: number) => void",
+          "description": "Function called when user inputs page number.",
+          "defaultValue": "() => undefined"
+        },
+        {
+          "name": "onPerPageSelect",
+          "type": "(\n  event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n  newPerPage: number,\n  newPage: number,\n  startIdx?: number,\n  endIdx?: number\n) => void",
+          "description": "Function called when user selects number of items per page.",
+          "defaultValue": "() => undefined"
+        },
+        {
+          "name": "onPreviousClick",
+          "type": "(event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void",
+          "description": "Function called when user clicks on navigate to previous page.",
+          "defaultValue": "() => undefined"
+        },
+        {
+          "name": "onSetPage",
+          "type": "(\n  event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n  newPage: number,\n  perPage?: number,\n  startIdx?: number,\n  endIdx?: number\n) => void",
+          "description": "Function called when user sets page.",
+          "defaultValue": "() => undefined"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "page",
+          "type": "number",
+          "description": "Current page number.",
+          "defaultValue": "1"
+        },
+        {
+          "name": "perPage",
+          "type": "number",
+          "description": "Number of items per page.",
+          "defaultValue": "defaultPerPageOptions[0].value"
+        },
+        {
+          "name": "perPageOptions",
+          "type": "PerPageOptions[]",
+          "description": "Array of the number of items per page options.",
+          "defaultValue": "[\n  {\n    title: '10',\n    value: 10\n  },\n  {\n    title: '20',\n    value: 20\n  },\n  {\n    title: '50',\n    value: 50\n  },\n  {\n    title: '100',\n    value: 100\n  }\n]"
+        },
+        {
+          "name": "titles",
+          "type": "PaginationTitles",
+          "description": "Object with titles to display in pagination.",
+          "defaultValue": "{\n  items: '',\n  page: '',\n  pages: '',\n  itemsPerPage: 'Items per page',\n  perPageSuffix: 'per page',\n  toFirstPageAriaLabel: 'Go to first page',\n  toPreviousPageAriaLabel: 'Go to previous page',\n  toLastPageAriaLabel: 'Go to last page',\n  toNextPageAriaLabel: 'Go to next page',\n  optionsToggleAriaLabel: '',\n  currPageAriaLabel: 'Current page',\n  paginationAriaLabel: 'Pagination',\n  ofWord: 'of'\n}"
+        },
+        {
+          "name": "toggleTemplate",
+          "type": "((props: PaginationToggleTemplateProps) => React.ReactElement<any>) | string",
+          "description": "This will be shown in pagination toggle span. You can use firstIndex, lastIndex,\nitemCount, itemsTitle, and/or ofWord props."
+        },
+        {
+          "name": "usePageInsets",
+          "type": "boolean",
+          "description": "Flag indicating that pagination should use page insets."
+        },
+        {
+          "name": "variant",
+          "type": "'top' | 'bottom' | PaginationVariant",
+          "description": "Position where pagination is rendered.",
+          "defaultValue": "PaginationVariant.top"
+        },
+        {
+          "name": "widgetId",
+          "type": "string",
+          "description": "Id to identify widget on page.",
+          "defaultValue": "'options-menu'"
+        }
+      ]
+    },
+    {
+      "name": "PaginationTitles",
+      "description": "Properties to customize various pagination titles. The following properties should be\npassed into the pagination component's title property.",
+      "props": [
+        {
+          "name": "currPageAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the input displaying the current page."
+        },
+        {
+          "name": "items",
+          "type": "string",
+          "description": "The type or title of the items being paginated."
+        },
+        {
+          "name": "itemsPerPage",
+          "type": "string",
+          "description": "The title of the pagination options menu."
+        },
+        {
+          "name": "ofWord",
+          "type": "string",
+          "description": "Label for the English word \"of\"."
+        },
+        {
+          "name": "optionsToggleAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the options toggle."
+        },
+        {
+          "name": "page",
+          "type": "string",
+          "description": "The title of a page displayed beside the page number."
+        },
+        {
+          "name": "pages",
+          "type": "string",
+          "description": "The title of a page displayed beside the page number (plural form)."
+        },
+        {
+          "name": "paginationAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the pagination component."
+        },
+        {
+          "name": "perPageSuffix",
+          "type": "string",
+          "description": "The suffix to be displayed after each option on the options menu dropdown."
+        },
+        {
+          "name": "toFirstPageAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the button which moves to the first page."
+        },
+        {
+          "name": "toLastPageAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the button which moves to the last page."
+        },
+        {
+          "name": "toNextPageAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the button which moves to the next page."
+        },
+        {
+          "name": "toPreviousPageAriaLabel",
+          "type": "string",
+          "description": "Accessible label for the button which moves to the previous page."
+        }
+      ]
+    },
+    {
+      "name": "PerPageOptions",
+      "description": "Properties to customize the content and behavior of the pagination dropdown options. These\nproperties should be passed into the pagination component's perPageOptions property.",
+      "props": [
+        {
+          "name": "title",
+          "type": "string",
+          "description": "The text title of the option, which is rendered inside the pagination dropdown menu."
+        },
+        {
+          "name": "value",
+          "type": "number",
+          "description": "The value of the option, which determines how many items are displayed per page."
+        }
+      ]
+    },
+    {
+      "name": "PaginationToggleTemplateProps",
+      "description": "",
+      "props": [
+        {
+          "name": "firstIndex",
+          "type": "number",
+          "description": "The first index of the items being paginated"
+        },
+        {
+          "name": "itemCount",
+          "type": "number",
+          "description": "The total number of items being paginated"
+        },
+        {
+          "name": "itemsTitle",
+          "type": "string",
+          "description": "The type or title of the items being paginated"
+        },
+        {
+          "name": "lastIndex",
+          "type": "number",
+          "description": "The last index of the items being paginated"
+        },
+        {
+          "name": "ofWord",
+          "type": "React.ReactNode",
+          "description": "The word that joins the index and itemCount/itemsTitle"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-pagination"
+  ],
+  "examples": [
+    "Top",
+    "Bottom",
+    "Indeterminate",
+    "Disabled",
+    "No items",
+    "One page",
+    "Compact",
+    "Offset",
+    "Inset"
+  ],
+  "fullscreenExamples": [
+    "Sticky",
+    "Dynamic sticky top",
+    "Dynamic sticky bottom"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  useRef,
+  useLayoutEffect
+};
+pageData.examples = {
+  'Top': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationTop: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      itemCount={523}\n      perPage={perPage}\n      page={page}\n      onSetPage={onSetPage}\n      widgetId=\"top-example\"\n      onPerPageSelect={onPerPageSelect}\n      ouiaId=\"PaginationTop\"\n    />\n  );\n};\n","title":"Top","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Bottom': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination, PaginationVariant } from '@patternfly/react-core';\n\nexport const PaginationBottom: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(10);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      itemCount={333}\n      widgetId=\"bottom-example\"\n      perPage={perPage}\n      page={page}\n      variant={PaginationVariant.bottom}\n      onSetPage={onSetPage}\n      onPerPageSelect={onPerPageSelect}\n    />\n  );\n};\n","title":"Bottom","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Indeterminate': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationIndeterminate: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      toggleTemplate={({ firstIndex, lastIndex }) => (\n        <Fragment>\n          <b>\n            {firstIndex} - {lastIndex}\n          </b>\n          of\n          <b>many</b>\n        </Fragment>\n      )}\n      widgetId=\"indeterminate-example\"\n      perPage={perPage}\n      page={page}\n      onSetPage={onSetPage}\n      onPerPageSelect={onPerPageSelect}\n    />\n  );\n};\n","title":"Indeterminate","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By not passing `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`itemCount`}
+        </code>
+        {` and passing `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`toggleTemplate`}
+        </code>
+        {` you can customize the toggle with text.`}
+      </p>
+    </Example>,
+  'Disabled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationDisabled: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      itemCount={523}\n      perPage={perPage}\n      page={page}\n      onSetPage={onSetPage}\n      widgetId=\"disabled-example\"\n      onPerPageSelect={onPerPageSelect}\n      isDisabled\n    />\n  );\n};\n","title":"Disabled","lang":"ts","className":""}}>
+      
+    </Example>,
+  'No items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationNoItems: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      itemCount={0}\n      perPage={perPage}\n      page={page}\n      onSetPage={onSetPage}\n      widgetId=\"no-items-example\"\n      onPerPageSelect={onPerPageSelect}\n    />\n  );\n};\n","title":"No items","lang":"ts","className":""}}>
+      
+    </Example>,
+  'One page': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationOnePage: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      itemCount={15}\n      perPage={perPage}\n      page={page}\n      onSetPage={onSetPage}\n      widgetId=\"one-page-example\"\n      onPerPageSelect={onPerPageSelect}\n    />\n  );\n};\n","title":"One page","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Compact': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationCompact: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      itemCount={523}\n      perPage={perPage}\n      page={page}\n      onSetPage={onSetPage}\n      widgetId=\"compact-example\"\n      onPerPageSelect={onPerPageSelect}\n      isCompact\n    />\n  );\n};\n","title":"Compact","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Offset': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationOffset: React.FunctionComponent = () => {\n  const [offset, setOffset] = useState(7);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPage: number,\n    _perPage: number | undefined,\n    startIdx: number | undefined\n  ) => {\n    setOffset(startIdx || 0);\n  };\n  const onPerPageSelect = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number) => {\n    setPerPage(newPerPage);\n    setOffset(0);\n  };\n\n  return (\n    <Pagination\n      itemCount={523}\n      perPage={perPage}\n      offset={offset}\n      onSetPage={onSetPage}\n      widgetId=\"offset-pagination-example\"\n      onPerPageSelect={onPerPageSelect}\n      ouiaId=\"PaginationOffset\"\n    />\n  );\n};\n","title":"Offset","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Sticky': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportsticky} {...{"code":"import { Fragment, useState } from 'react';\nimport { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';\n\nexport const PaginationSticky: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(100);\n  const [isTopSticky, setIsTopSticky] = useState(true);\n  const itemCount = 523;\n\n  const onToggleSticky = () => {\n    setIsTopSticky((prev) => !prev);\n  };\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  const buildCards = () => {\n    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;\n\n    return Array.from({ length: numberOfCards }).map((_value, index) => (\n      <GalleryItem key={index}>\n        <Card>\n          <CardBody>This is a card</CardBody>\n        </Card>\n      </GalleryItem>\n    ));\n  };\n\n  return isTopSticky ? (\n    <Fragment>\n      <Pagination\n        itemCount={itemCount}\n        perPage={perPage}\n        page={page}\n        onSetPage={onSetPage}\n        widgetId=\"pagination-options-menu-top\"\n        onPerPageSelect={onPerPageSelect}\n        isSticky\n      >\n        <button onClick={onToggleSticky}>Toggle to bottom position</button>\n      </Pagination>\n      <Gallery hasGutter>{buildCards()}</Gallery>\n    </Fragment>\n  ) : (\n    <Fragment>\n      <Gallery hasGutter>{buildCards()}</Gallery>\n      <Pagination\n        itemCount={itemCount}\n        perPage={perPage}\n        page={page}\n        onSetPage={onSetPage}\n        widgetId=\"pagination-options-menu-top\"\n        onPerPageSelect={onPerPageSelect}\n        isSticky\n        variant={PaginationVariant.bottom}\n      >\n        <button onClick={onToggleSticky}>Toggle to top position</button>\n      </Pagination>\n    </Fragment>\n  );\n};\n","title":"Sticky","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Dynamic sticky top': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useLayoutEffect, useState, useRef } from 'react';\nimport { Pagination, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';\n\nconst useIsStuckFromScrollParent = ({\n  shouldTrack,\n  scrollParentRef\n}: {\n  /** Indicates whether to track the scroll top position of the scroll parent element */\n  shouldTrack: boolean;\n  /** Reference to the scroll parent element */\n  scrollParentRef: React.RefObject<any>;\n}): boolean => {\n  const [isStuck, setIsStuck] = useState(false);\n\n  useLayoutEffect(() => {\n    if (!shouldTrack) {\n      setIsStuck(false);\n      return;\n    }\n\n    const scrollElement = scrollParentRef.current;\n    if (!scrollElement) {\n      setIsStuck(false);\n      return;\n    }\n\n    const syncFromScroll = () => {\n      setIsStuck(scrollElement.scrollTop > 0);\n    };\n    syncFromScroll();\n    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });\n    return () => scrollElement.removeEventListener('scroll', syncFromScroll);\n  }, [shouldTrack, scrollParentRef]);\n\n  return isStuck;\n};\n\nexport const PaginationDynamicStickyTop: React.FunctionComponent = () => {\n  const scrollParentRef = useRef<HTMLDivElement>(null);\n  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(50);\n  const itemCount = 523;\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  const buildCards = () => {\n    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;\n\n    return Array.from({ length: numberOfCards }).map((_value, index) => (\n      <GalleryItem key={index}>\n        <Card>\n          <CardBody>This is card {(page - 1) * perPage + index + 1}</CardBody>\n        </Card>\n      </GalleryItem>\n    ));\n  };\n\n  return (\n    <div ref={scrollParentRef} style={{ overflowY: 'scroll', height: '400px' }}>\n      <Pagination\n        itemCount={itemCount}\n        perPage={perPage}\n        page={page}\n        onSetPage={onSetPage}\n        widgetId=\"dynamic-sticky-top-example\"\n        onPerPageSelect={onPerPageSelect}\n        isStickyBase\n        isStickyStuck={isStickyStuck}\n      />\n      <Gallery hasGutter>{buildCards()}</Gallery>\n    </div>\n  );\n};\n","title":"Dynamic sticky top","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Pagination can be made sticky via two properties: `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyBase`}
+        </code>
+        {`, which allows separate control of the sticky position, and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyStuck`}
+        </code>
+        {`, which applies the sticky styling. In this example, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyStuck`}
+        </code>
+        {` is only applied when the pagination is not at the top of the scroll parent container.`}
+      </p>
+    </Example>,
+  'Dynamic sticky bottom': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useLayoutEffect, useState, useRef } from 'react';\nimport { Pagination, PaginationVariant, Gallery, GalleryItem, Card, CardBody } from '@patternfly/react-core';\n\nconst useIsStuckFromScrollParent = ({\n  shouldTrack,\n  scrollParentRef\n}: {\n  /** Indicates whether to track the scroll top position of the scroll parent element */\n  shouldTrack: boolean;\n  /** Reference to the scroll parent element */\n  scrollParentRef: React.RefObject<any>;\n}): boolean => {\n  const [isStuck, setIsStuck] = useState(false);\n\n  useLayoutEffect(() => {\n    if (!shouldTrack) {\n      setIsStuck(false);\n      return;\n    }\n\n    const scrollElement = scrollParentRef.current;\n    if (!scrollElement) {\n      setIsStuck(false);\n      return;\n    }\n\n    const syncFromScroll = () => {\n      setIsStuck(scrollElement.scrollTop + scrollElement.clientHeight < scrollElement.scrollHeight);\n    };\n    syncFromScroll();\n    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });\n    return () => scrollElement.removeEventListener('scroll', syncFromScroll);\n  }, [shouldTrack, scrollParentRef]);\n\n  return isStuck;\n};\n\nexport const PaginationDynamicStickyBottom: React.FunctionComponent = () => {\n  const scrollParentRef = useRef<HTMLDivElement>(null);\n  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(50);\n  const itemCount = 523;\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  const buildCards = () => {\n    const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;\n\n    return Array.from({ length: numberOfCards }).map((_value, index) => (\n      <GalleryItem key={index}>\n        <Card>\n          <CardBody>This is card {(page - 1) * perPage + index + 1}</CardBody>\n        </Card>\n      </GalleryItem>\n    ));\n  };\n\n  return (\n    <div ref={scrollParentRef} style={{ overflowY: 'scroll', height: '400px' }}>\n      <Gallery hasGutter>{buildCards()}</Gallery>\n      <Pagination\n        itemCount={itemCount}\n        perPage={perPage}\n        page={page}\n        onSetPage={onSetPage}\n        widgetId=\"dynamic-sticky-bottom-example\"\n        onPerPageSelect={onPerPageSelect}\n        variant={PaginationVariant.bottom}\n        isStickyBase\n        isStickyStuck={isStickyStuck}\n      />\n    </div>\n  );\n};\n","title":"Dynamic sticky bottom","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Bottom pagination can be made sticky via two properties: `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyBase`}
+        </code>
+        {`, which allows separate control of the sticky position, and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyStuck`}
+        </code>
+        {`, which applies the sticky styling. In this example, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyStuck`}
+        </code>
+        {` is only applied when the pagination is not at the bottom of the scroll parent container.`}
+      </p>
+    </Example>,
+  'Inset': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Pagination } from '@patternfly/react-core';\n\nexport const PaginationInset: React.FunctionComponent = () => {\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {\n    setPage(newPage);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    newPerPage: number,\n    newPage: number\n  ) => {\n    setPerPage(newPerPage);\n    setPage(newPage);\n  };\n\n  return (\n    <Pagination\n      itemCount={523}\n      perPage={perPage}\n      page={page}\n      onSetPage={onSetPage}\n      widgetId=\"inset-example\"\n      onPerPageSelect={onPerPageSelect}\n      inset={{\n        default: 'insetNone',\n        md: 'insetMd',\n        lg: 'inset2xl'\n      }}\n    />\n  );\n};\n","title":"Inset","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Top"])}
+    {React.createElement(pageData.examples["Bottom"])}
+    {React.createElement(pageData.examples["Indeterminate"])}
+    {React.createElement(pageData.examples["Disabled"])}
+    {React.createElement(pageData.examples["No items"])}
+    {React.createElement(pageData.examples["One page"])}
+    {React.createElement(pageData.examples["Compact"])}
+    {React.createElement(pageData.examples["Offset"])}
+    {React.createElement(pageData.examples["Sticky"])}
+    {React.createElement(pageData.examples["Dynamic sticky top"])}
+    {React.createElement(pageData.examples["Dynamic sticky bottom"])}
+    {React.createElement(pageData.examples["Inset"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsPaginationReactDocs';
+Component.pageData = pageData;
+
+export default Component;