@atom-learning/components 3.25.2 → 3.26.1

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## [3.25.2](https://github.com/Atom-Learning/components/compare/v3.25.1...v3.25.2) (2024-05-08)
+## [3.26.1](https://github.com/Atom-Learning/components/compare/v3.26.0...v3.26.1) (2024-05-15)
 
 
 ### Bug Fixes
 
-* upgrade icons, update react peer dep ([7cb6b27](https://github.com/Atom-Learning/components/commit/7cb6b27b68f115a8f5aa90cb228dc9f589793dac))
+* adding disabled style to dates that cannot be selected ([ec1686f](https://github.com/Atom-Learning/components/commit/ec1686f1ba9fff1f873aa0a3feae54860a3dc620))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/calendar/Day.js

@@ -1,2 +1,2 @@
-import{styled as o}from"../../stitches.js";const r=o("button",{bg:"transparent",border:"none",borderRadius:"$round",color:"$tonal900",cursor:"pointer",fontFamily:"$body",fontSize:"$sm",size:"$3",p:0,transition:"all 75ms","&:hover":{bg:"$tonal100"},"&:active":{color:"white",bg:"$primary800"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"2px"},variants:{isSelected:{true:{bg:"$primary800",color:"white","&:hover":{bg:"$primary800"}}},isToday:{true:{bg:"$tonal100"}},isOutsideMonth:{true:{color:"$tonal200"}}}});export{r as Day};
+import{styled as o}from"../../stitches.js";const r=o("button",{bg:"transparent",border:"none",borderRadius:"$round",color:"$tonal900",cursor:"pointer",fontFamily:"$body",fontSize:"$sm",size:"$3",p:0,transition:"all 75ms","&:hover":{bg:"$tonal100"},"&:active":{color:"white",bg:"$primary800"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"2px"},"&[disabled]":{opacity:"0.3",cursor:"default"},variants:{isSelected:{true:{bg:"$primary800",color:"white","&:hover":{bg:"$primary800"}}},isToday:{true:{bg:"$tonal100"}},isOutsideMonth:{true:{color:"$tonal200"}}}});export{r as Day};
 //# sourceMappingURL=Day.js.map

package/dist/components/calendar/Day.js.map

@@ -1 +1 @@
-{"version":3,"file":"Day.js","sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Day = styled('button', {\n  bg: 'transparent',\n  border: 'none',\n  borderRadius: '$round',\n  color: '$tonal900',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  fontSize: '$sm',\n  size: '$3',\n  p: 0,\n  transition: 'all 75ms',\n  '&:hover': {\n    bg: '$tonal100'\n  },\n  '&:active': {\n    color: 'white',\n    bg: '$primary800'\n  },\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '2px'\n  },\n  variants: {\n    isSelected: {\n      true: {\n        bg: '$primary800',\n        color: 'white',\n        '&:hover': { bg: '$primary800' }\n      }\n    },\n    isToday: {\n      true: { bg: '$tonal100' }\n    },\n    isOutsideMonth: {\n      true: { color: '$tonal200' }\n    }\n  }\n})\n"],"names":["Day","styled"],"mappings":"2CAEa,MAAAA,EAAMC,EAAO,SAAU,CAClC,GAAI,cACJ,OAAQ,OACR,aAAc,SACd,MAAO,YACP,OAAQ,UACR,WAAY,QACZ,SAAU,MACV,KAAM,KACN,EAAG,EACH,WAAY,WACZ,UAAW,CACT,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,aACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,GAAI,cACJ,MAAO,QACP,UAAW,CAAE,GAAI,aAAc,CACjC,CACF,EACA,QAAS,CACP,KAAM,CAAE,GAAI,WAAY,CAC1B,EACA,eAAgB,CACd,KAAM,CAAE,MAAO,WAAY,CAC7B,CACF,CACF,CAAC"}
+{"version":3,"file":"Day.js","sources":["../../../src/components/calendar/Day.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nexport const Day = styled('button', {\n  bg: 'transparent',\n  border: 'none',\n  borderRadius: '$round',\n  color: '$tonal900',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  fontSize: '$sm',\n  size: '$3',\n  p: 0,\n  transition: 'all 75ms',\n  '&:hover': {\n    bg: '$tonal100'\n  },\n  '&:active': {\n    color: 'white',\n    bg: '$primary800'\n  },\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '2px'\n  },\n  '&[disabled]': {\n    opacity: '0.3',\n    cursor: 'default'\n  },\n  variants: {\n    isSelected: {\n      true: {\n        bg: '$primary800',\n        color: 'white',\n        '&:hover': { bg: '$primary800' }\n      }\n    },\n    isToday: {\n      true: { bg: '$tonal100' }\n    },\n    isOutsideMonth: {\n      true: { color: '$tonal200' }\n    }\n  }\n})\n"],"names":["Day","styled"],"mappings":"iDAEaA,EAAMC,EAAO,SAAU,CAClC,GAAI,cACJ,OAAQ,OACR,aAAc,SACd,MAAO,YACP,OAAQ,UACR,WAAY,QACZ,SAAU,MACV,KAAM,KACN,EAAG,EACH,WAAY,WACZ,UAAW,CACT,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,aACN,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,cAAe,CACb,QAAS,MACT,OAAQ,SACV,EACA,SAAU,CACR,WAAY,CACV,KAAM,CACJ,GAAI,cACJ,MAAO,QACP,UAAW,CAAE,GAAI,aAAc,CACjC,CACF,EACA,QAAS,CACP,KAAM,CAAE,GAAI,WAAY,CAC1B,EACA,eAAgB,CACd,KAAM,CAAE,MAAO,WAAY,CAC7B,CACF,CACF,CAAC"}

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{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};
+import*as e from"react";import{styled as S}from"../../../stitches.js";import{Pagination as w}from"../../pagination/Pagination.js";import{Text as y}from"../../text/Text.js";import{AsyncDataState as $}from"../DataTable.types.js";import{useDataTable as D}from"../DataTableContext.js";const h=S("nav",{display:"flex",flexDirection:"column",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums",flexWrap:"wrap",width:"100%",gap:"$4",mt:"$4","@md":{flexDirection:"row"}}),r=({colorScheme:m,...s})=>{const{applyPagination:a,getState:g,getRowModel:l,getPageCount:n,setPageIndex:c,getTotalRows:o,asyncDataState:p}=D();e.useEffect(()=>{a()},[a]);const{pagination:t}=g(),f=p!==$.PENDING&&o()===0,d=n()>1;if(f||!d)return null;const i=t.pageIndex*t.pageSize+1,u=i+l().rows.length-1,P=x=>{c(x-1)};return e.createElement(h,{...s},e.createElement(y,{size:"sm"},`${i.toString()} - ${u.toString()} of ${o()} items`),e.createElement(w,{colorScheme:m,selectedPage:t.pageIndex+1,pagesCount:n(),onSelectedPageChange:P}))};r.displayName="Pagination";export{r 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 { 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"}
+{"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  // Show pagination only if total pages are more than 1\n  const showPagination = getPageCount() > 1\n\n  if (isEmpty || !showPagination) 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","isEmpty","AsyncDataState","showPagination","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,IAEJC,EAAM,UAAU,IAAM,CACpBR,GACF,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYS,CAAgB,EAAIR,EAAS,EAE3CS,EADYJ,IAAmBK,EAAe,SACtBN,MAAmB,EAG3CO,EAAiBT,IAAiB,EAExC,GAAIO,GAAW,CAACE,EAAgB,OAAO,KAEvC,MAAMC,EACJJ,EAAgB,UAAYA,EAAgB,SAAW,EACnDK,EAAiBD,EAAmBX,EAAY,EAAE,KAAK,OAAS,EAGhEa,EAAWC,GAAkB,CACjCZ,EAAaY,EAAQ,CAAC,CACxB,EAEA,OACER,EAAA,cAACb,EAAA,CAAW,GAAGI,GACbS,EAAA,cAACS,EAAA,CAAK,KAAK,MACR,GAAGJ,EAAiB,gBAAgBC,EAAe,iBAAiBT,EACvE,SAAA,EACAG,EAAA,cAACU,EAAA,CACC,YAAapB,EACb,aAAcW,EAAgB,UAAY,EAC1C,WAAYN,EAAAA,EACZ,qBAAsBY,CAAAA,CACxB,CACF,CAEJ,EAEAlB,EAAW,YAAc"}