@mantine/core/esm/components/Pagination/PaginationItems/PaginationItems.mjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"PaginationItems.mjs","names":[],"sources":["../../../../src/components/Pagination/PaginationItems/PaginationItems.tsx"],"sourcesContent":["import { usePaginationContext } from '../Pagination.context';\nimport { PaginationIcon } from '../Pagination.icons';\nimport { PaginationControl } from '../PaginationControl/PaginationControl';\nimport { PaginationDots } from '../PaginationDots/PaginationDots';\n\nexport interface PaginationItemsProps {\n  /** Dots icon component */\n  dotsIcon?: PaginationIcon;\n}\n\nexport function PaginationItems({ dotsIcon }: PaginationItemsProps) {\n  const ctx = usePaginationContext();\n\n  const items = ctx.range.map((page, index) => {\n    if (page === 'dots') {\n      return <PaginationDots icon={dotsIcon} key={index} />;\n    }\n\n    return (\n      <PaginationControl\n        key={index}\n        active={page === ctx.active}\n        aria-current={page === ctx.active ? 'page' : undefined}\n        onClick={() => ctx.onChange(page)}\n        disabled={ctx.disabled}\n        {...ctx.getItemProps?.(page)}\n      >\n        {ctx.getItemProps?.(page)?.children ?? page}\n      </PaginationControl>\n    );\n  });\n\n  return <>{items}</>;\n}\n\nPaginationItems.displayName = '@mantine/core/PaginationItems';\n"],"mappings":";;;;;;AAUA,SAAgB,gBAAgB,EAAE,YAAkC;CAClE,MAAM,MAAM,sBAAsB;AAqBlC,QAAO,oBAAA,UAAA,EAAA,UAnBO,IAAI,MAAM,KAAK,MAAM,UAAU;AAC3C,MAAI,SAAS,OACX,QAAO,oBAAC,gBAAD,EAAgB,MAAM,UAAwB,EAAT,MAAS;AAGvD,SACE,oBAAC,mBAAD;GAEE,QAAQ,SAAS,IAAI;GACrB,gBAAc,SAAS,IAAI,SAAS,SAAS,KAAA;GAC7C,eAAe,IAAI,SAAS,KAAK;GACjC,UAAU,IAAI;GACd,GAAI,IAAI,eAAe,KAAK;aAE3B,IAAI,eAAe,KAAK,EAAE,YAAY;GACrB,EARb,MAQa;GAEtB,EAEiB,CAAA;;AAGrB,gBAAgB,cAAc"}