@atom-learning/components 3.20.0 → 3.21.0

package/dist/components/data-table/pagination/Pagination.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TcolorScheme } from '../../../experiments/color-scheme';
 declare const StyledNav: import("@stitches/react/types/styled-component").StyledComponent<"nav", {}, {
     sm: string;
     md: string;
@@ -330,7 +331,12 @@ declare const StyledNav: import("@stitches/react/types/styled-component").Styled
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type PaginationProps = React.ComponentProps<typeof StyledNav>;
+declare type PaginationProps = React.ComponentProps<typeof StyledNav> & {
+    colorScheme?: TcolorScheme;
+};
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
-export declare const Pagination: (props: PaginationProps) => JSX.Element | null;
+export declare const Pagination: {
+    ({ colorScheme, ...props }: PaginationProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

package/dist/components/data-table/pagination/Pagination.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as P}from"../../../stitches.js";import{Flex as m}from"../../flex/Flex.js";import{Text as I}from"../../text/Text.js";import{AsyncDataState as o}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";import{GotoPageSelect as w,DirectionButton as c}from"./PaginationButtons.js";const y=P("nav",{display:"flex",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums",flexWrap:"wrap",rowGap:"$4"}),C=p=>{const{applyPagination:r,getState:g,getRowModel:f,getPageCount:i,previousPage:d,nextPage:u,setPageIndex:x,getTotalRows:s,asyncDataState:a}=b();e.useEffect(()=>{r()},[r]);const{pagination:t}=g();if(a!==o.PENDING&&s()===0)return null;const l=t.pageIndex*t.pageSize+1,E=l+f().rows.length-1,n=a===o.PENDING||a===o.REJECTED;return e.createElement(y,{...p},e.createElement(I,{size:"sm",css:{pr:"$4","@sm":{flexBasis:"50%"}}},`${l.toString()} - ${E.toString()} of ${s()} items`),e.createElement(m,{css:{justifyContent:"space-between",width:"100%","@sm":{flexBasis:"50%"}}},e.createElement(w,{gotoPage:x,pageCount:i(),pageIndex:t.pageIndex,disabled:n}),e.createElement(m,null,e.createElement(c,{direction:"previous",disabled:t.pageIndex===0||n,onClick:d,css:{mr:"$4"}}),e.createElement(c,{direction:"next",disabled:t.pageIndex===i()-1||n,onClick:u}))))};export{C as Pagination};
+import*as e from"react";import{styled as P}from"../../../stitches.js";import{Pagination as x}from"../../pagination/Pagination.js";import{Text as S}from"../../text/Text.js";import{AsyncDataState as w}from"../DataTable.types.js";import{useDataTable as y}from"../DataTableContext.js";const $=P("nav",{display:"flex",flexDirection:"column",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums",flexWrap:"wrap",width:"100%",gap:"$4",mt:"$4","@md":{flexDirection:"row"}}),i=({colorScheme:r,...m})=>{const{applyPagination:a,getState:s,getRowModel:g,getPageCount:l,setPageIndex:c,getTotalRows:n,asyncDataState:p}=y();e.useEffect(()=>{a()},[a]);const{pagination:t}=s();if(p!==w.PENDING&&n()===0)return null;const o=t.pageIndex*t.pageSize+1,f=o+g().rows.length-1,d=u=>{c(u-1)};return e.createElement($,{...m},e.createElement(S,{size:"sm"},`${o.toString()} - ${f.toString()} of ${n()} items`),e.createElement(x,{colorScheme:r,selectedPage:t.pageIndex+1,pagesCount:l(),onSelectedPageChange:d}))};i.displayName="Pagination";export{i as Pagination};
 //# sourceMappingURL=Pagination.js.map

package/dist/components/data-table/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../../flex'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DirectionButton, GotoPageSelect } from './PaginationButtons'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums',\n  flexWrap: 'wrap',\n  rowGap: '$4'\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav>\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = (props: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    previousPage,\n    nextPage,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n  const isPaginationDisabled =\n    asyncDataState === AsyncDataState.PENDING ||\n    asyncDataState === AsyncDataState.REJECTED\n\n  return (\n    <StyledNav {...props}>\n      <Text\n        size=\"sm\"\n        css={{\n          pr: '$4',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n\n      <Flex\n        css={{\n          justifyContent: 'space-between',\n          width: '100%',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        <GotoPageSelect\n          gotoPage={setPageIndex}\n          pageCount={getPageCount()}\n          pageIndex={paginationState.pageIndex}\n          disabled={isPaginationDisabled}\n        />\n\n        <Flex>\n          <DirectionButton\n            direction=\"previous\"\n            disabled={paginationState.pageIndex === 0 || isPaginationDisabled}\n            onClick={previousPage}\n            css={{ mr: '$4' }}\n          />\n          <DirectionButton\n            direction=\"next\"\n            disabled={\n              paginationState.pageIndex === getPageCount() - 1 ||\n              isPaginationDisabled\n            }\n            onClick={nextPage}\n          />\n        </Flex>\n      </Flex>\n    </StyledNav>\n  )\n}\n"],"names":["StyledNav","styled","Pagination","props","applyPagination","getState","getRowModel","getPageCount","previousPage","nextPage","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","AsyncDataState","recordsCountFrom","recordsCountTo","isPaginationDisabled","Text","Flex","GotoPageSelect","DirectionButton"],"mappings":"oVAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,eACpB,SAAU,OACV,OAAQ,IACV,CAAC,EAKYC,EAAcC,GAA2B,CACpD,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,IAIxC,GAHkBO,IAAmBI,EAAe,SACtBL,EAAa,IAAM,EAEpC,OAAO,KAEpB,MAAMM,EACJF,EAAgB,UAAYA,EAAgB,SAAW,EACnDG,EAAiBD,EAAmBX,IAAc,KAAK,OAAS,EAChEa,EACJP,IAAmBI,EAAe,SAClCJ,IAAmBI,EAAe,SAEpC,OACEF,EAAA,cAACd,EAAA,CAAW,GAAGG,CACbW,EAAAA,EAAA,cAACM,EAAA,CACC,KAAK,KACL,IAAK,CACH,GAAI,KACJ,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEC,GAAGH,EAAiB,gBAAgBC,EAAe,SAAS,QAAQP,WACvE,EAEAG,EAAA,cAACO,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,MAAO,OACP,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEAP,EAAA,cAACQ,EAAA,CACC,SAAUZ,EACV,UAAWH,EACX,EAAA,UAAWQ,EAAgB,UAC3B,SAAUI,CAAAA,CACZ,EAEAL,EAAA,cAACO,EAAA,KACCP,EAAA,cAACS,EAAA,CACC,UAAU,WACV,SAAUR,EAAgB,YAAc,GAAKI,EAC7C,QAASX,EACT,IAAK,CAAE,GAAI,IAAK,EAClB,EACAM,EAAA,cAACS,EAAA,CACC,UAAU,OACV,SACER,EAAgB,YAAcR,IAAiB,GAC/CY,EAEF,QAASV,CACX,CAAA,CACF,CACF,CACF,CAEJ"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums',\n  flexWrap: 'wrap',\n  width: '100%',\n  gap: '$4',\n  mt: '$4',\n  '@md': {\n    flexDirection: 'row'\n  }\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n\n  //indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={getPageCount()}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getRowModel","getPageCount","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","AsyncDataState","recordsCountFrom","recordsCountTo","setPage","index","Text","PaginationComponent"],"mappings":"yRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,cAAe,SACf,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,eACpB,SAAU,OACV,MAAO,OACP,IAAK,KACL,GAAI,KACJ,MAAO,CACL,cAAe,KACjB,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,KAAgBC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAAa,EAEjBC,EAAM,UAAU,IAAM,CACpBR,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYS,CAAgB,EAAIR,EAAAA,EAIxC,GAHkBK,IAAmBI,EAAe,SACtBL,EAAa,IAAM,EAEpC,OAAO,KAEpB,MAAMM,EACJF,EAAgB,UAAYA,EAAgB,SAAW,EACnDG,EAAiBD,EAAmBT,EAAY,EAAE,KAAK,OAAS,EAGhEW,EAAWC,GAAkB,CACjCV,EAAaU,EAAQ,CAAC,CACxB,EAEA,OACEN,EAAA,cAACb,EAAA,CAAW,GAAGI,CACbS,EAAAA,EAAA,cAACO,EAAA,CAAK,KAAK,IAAA,EACR,GAAGJ,EAAiB,gBAAgBC,EAAe,SAAA,QAAiBP,EAAa,SACpF,EACAG,EAAA,cAACQ,EAAA,CACC,YAAalB,EACb,aAAcW,EAAgB,UAAY,EAC1C,WAAYN,IACZ,qBAAsBU,CAAAA,CACxB,CACF,CAEJ,EAEAhB,EAAW,YAAc"}