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

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

@@ -1,492 +0,0 @@
-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;