@atom-learning/components 5.12.1 → 5.13.0-beta.0

package/dist/components/data-table/DataTableRow.js

@@ -1,2 +1,2 @@
-import{ChevronDown as x,ChevronRight as w}from"@atom-learning/icons";import*as n from"react";import{styled as h}from"../../stitches.js";import{Icon as C}from"../icon/Icon.js";import{Table as i}from"../table/Table.js";import{useDataTable as E}from"./DataTableContext.js";import{DataTableDataCell as D}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as S}from"./DataTableRowSelectionCheckbox.js";const v=h(i.Row,{bg:"initial",variants:{isSelected:{true:{"&:nth-child(odd), &:nth-child(even)":{bg:"$primary100"}}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{transition:"transform 150ms ease-in-out, box-shadow 150ms ease-in-out","&:hover":{transform:"translateY(-1px)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)",position:"relative",zIndex:3},"&:focus":{outline:"2px solid $primary500",outlineOffset:"-4px","& td":{bg:"transparent"}}}}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:r})=>{const{enableRowSelection:m,disabledRows:l,getCanSomeRowsExpand:p}=E(),s=!!(l!=null&&l[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!r||!o.target.closest("tr")||d(o.target)||r(t.original,o)},f=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return n.createElement(v,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!r&&!s,...r&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:f}},p()&&n.createElement(i.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&n.createElement(C,{is:e.getIsExpanded()?x:w})),m&&n.createElement(i.Cell,{css:{width:"$4"}},n.createElement(S,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>n.createElement(D,{key:t.id,cell:t})))};export{k as DataTableRow};
+import{ChevronDown as f,ChevronRight as h}from"@atom-learning/icons";import*as n from"react";import{styled as w}from"../../stitches.js";import{Icon as D}from"../icon/Icon.js";import{Table as i}from"../table/Table.js";import{useDataTable as C}from"./DataTableContext.js";import{DataTableDataCell as E}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as S}from"./DataTableRowSelectionCheckbox.js";const v=w(i.Row,{bg:"initial",position:"relative",variants:{isSelected:{true:{"&:nth-child(odd), &:nth-child(even)":{bg:"$primary100"}}},isDisabled:{true:{opacity:"30%"}},isFocusable:{true:{transform:"translateY(0)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0)",transition:"transform 300ms ease-in-out, box-shadow 300ms ease-in-out","&:hover":{transform:"translateY(-1px)",boxShadow:"0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)",transitionDuration:"100ms",zIndex:3},"&:focus":{outline:"2px solid $primary500",outlineOffset:"-4px","& td":{bg:"transparent"}}}}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:r})=>{const{enableRowSelection:p,disabledRows:l,getCanSomeRowsExpand:m}=C(),s=!!(l!=null&&l[e.id]),g=e.getToggleExpandedHandler(),u=e.getToggleSelectedHandler(),b=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!r||!o.target.closest("tr")||d(o.target)||r(t.original,o)},x=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return n.createElement(v,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!r&&!s,...r&&{onClick:t=>c(e,t),tabIndex:0,css:{cursor:"pointer"},onKeyDown:x}},m()&&n.createElement(i.Cell,{"data-testid":`expand-icon-${e.id}`,css:{width:"$4",cursor:e.getCanExpand()?"pointer":"auto"},onClick:g},e.getCanExpand()&&n.createElement(D,{is:e.getIsExpanded()?f:h})),p&&n.createElement(i.Cell,{css:{width:"$4"}},n.createElement(S,{row:e,checked:b(),onCheckedChange:u})),e.getVisibleCells().map((t,o)=>n.createElement(E,{key:t.id,cell:t})))};export{k as DataTableRow};
 //# sourceMappingURL=DataTableRow.js.map

package/dist/components/data-table/DataTableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        '&:nth-child(odd), &:nth-child(even)': {\n          bg: '$primary100'\n        }\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    },\n    isFocusable: {\n      true: {\n        transition: 'transform 150ms ease-in-out, box-shadow 150ms ease-in-out',\n        '&:hover': {\n          transform: 'translateY(-1px)',\n          boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)',\n          position: 'relative',\n          zIndex: 3\n        },\n        '&:focus': {\n          outline: '2px solid $primary500',\n          outlineOffset: '-4px',\n          '& td': {\n            bg: 'transparent'\n          }\n        }\n      }\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        css: { cursor: 'pointer' },\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n          onClick={toggleExpandHandler}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell css={{ width: '$4' }}>\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAiBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CACJ,sCAAuC,CACrC,GAAI,aACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,WAAY,4DACZ,UAAW,CACT,UAAW,mBACX,UAAW,0CACX,SAAU,WACV,OAAQ,CACV,EACA,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,GAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,EAEIC,EAAAA,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,2BAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,kBAA4B,EAAA,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,iBACNF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,YAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAEZ,CAAA,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAA,EAChB,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,IAAK,CAAE,OAAQ,SAAU,EACzB,UAAWC,CACb,GAECT,EAAqB,GACpBa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,eAAiB,UAAY,MAAO,EACpE,QAASO,GAERP,EAAI,gBACHiB,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,cAAc,EAAImB,EAAcC,CAAc,CAAA,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAAA,EAC7BqB,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,EAAgB,EACzB,gBAAiBD,CACnB,CAAA,CACF,EAEDR,EAAI,gBAAA,EAAkB,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
+{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  position: 'relative',\n  variants: {\n    isSelected: {\n      true: {\n        '&:nth-child(odd), &:nth-child(even)': {\n          bg: '$primary100'\n        }\n      }\n    },\n    isDisabled: {\n      true: {\n        opacity: '30%'\n      }\n    },\n    isFocusable: {\n      true: {\n        transform: 'translateY(0)',\n        boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0)',\n        transition: 'transform 300ms ease-in-out, box-shadow 300ms ease-in-out',\n        '&:hover': {\n          transform: 'translateY(-1px)',\n          boxShadow: '0px 4px 11px 0px hsla(0, 0%, 12%, 0.12)',\n          transitionDuration: '100ms',\n          zIndex: 3\n        },\n        '&:focus': {\n          outline: '2px solid $primary500',\n          outlineOffset: '-4px',\n          '& td': {\n            bg: 'transparent'\n          }\n        }\n      }\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        css: { cursor: 'pointer' },\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          css={{ width: '$4', cursor: row.getCanExpand() ? 'pointer' : 'auto' }}\n          onClick={toggleExpandHandler}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell css={{ width: '$4' }}>\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell, i) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAiBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,WACV,SAAU,CACR,WAAY,CACV,KAAM,CACJ,sCAAuC,CACrC,GAAI,aACN,CACF,CACF,EACA,WAAY,CACV,KAAM,CACJ,QAAS,KACX,CACF,EACA,YAAa,CACX,KAAM,CACJ,UAAW,gBACX,UAAW,uCACX,WAAY,4DACZ,UAAW,CACT,UAAW,mBACX,UAAW,0CACX,mBAAoB,QACpB,OAAQ,CACV,EACA,UAAW,CACT,QAAS,wBACT,cAAe,OACf,OAAQ,CACN,GAAI,aACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,EAAa,EAETC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,KAElCO,EAAsBP,EAAI,yBAAyB,EACnDQ,EAAsBR,EAAI,2BAE1BS,EAAkB,IAClBT,EAAI,kBAAkB,EAAU,gBAC7BA,EAAI,cAAA,EAGPU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,iBACNF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,KAAA,OAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,MAAM,CAElB,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,iBACN,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,YAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,OAEhB,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,cAAc,EAC9B,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,IAAK,CAAE,OAAQ,SAAU,EACzB,UAAWC,CACb,CAECT,EAAAA,EAAAA,GACCa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASO,CAERP,EAAAA,EAAI,gBACHiB,EAAA,cAACC,EAAA,CAAK,GAAIlB,EAAI,gBAAkBmB,EAAcC,CAAAA,CAAc,CAEhE,EAGDlB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,GAC7BqB,EAAA,cAACI,EAAA,CACC,IAAKrB,EACL,QAASS,IACT,gBAAiBD,CAAAA,CACnB,CACF,EAEDR,EAAI,gBAAkB,EAAA,IAAI,CAACsB,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAAA,CAAM,CACrD,CACH,CAEJ"}

package/dist/components/data-table/DataTableRowSelectionCheckbox.js

@@ -1,2 +1,2 @@
-import*as c from"@radix-ui/react-visually-hidden";import*as t from"react";import{Checkbox as n}from"../checkbox/Checkbox.js";import{Label as m}from"../label/Label.js";import{useDataTable as i}from"./DataTableContext.js";const d=({row:e,checked:l,onCheckedChange:a,label:r=`Row ${e.id} selection`})=>{const{tableId:o}=i();return t.createElement(t.Fragment,null,t.createElement(c.Root,null,t.createElement(m,{htmlFor:`${o}_row_${e.id}_selection`},r)),t.createElement(n,{size:"lg",style:{"--depth":e.depth},css:{ml:"calc((var(--depth, 0) * 2) * 4px)"},checked:l,onCheckedChange:a,name:`${o}_row_${e.id}_selection`,disabled:!e.getCanSelect()}))};export{d as DataTableRowSelectionCheckbox};
+import*as c from"@radix-ui/react-visually-hidden";import*as t from"react";import{Checkbox as n}from"../checkbox/Checkbox.js";import{Label as m}from"../label/Label.js";import{useDataTable as i}from"./DataTableContext.js";const d=({row:e,checked:l,onCheckedChange:r,label:a=`Row ${e.id} selection`})=>{const{tableId:o}=i();return t.createElement(t.Fragment,null,t.createElement(c.Root,null,t.createElement(m,{htmlFor:`${o}_row_${e.id}_selection`},a)),t.createElement(n,{size:"lg",style:{"--depth":e.depth},css:{mr:"$3",ml:"calc((var(--depth, 0) * 2) * 4px)"},checked:l,onCheckedChange:r,name:`${o}_row_${e.id}_selection`,disabled:!e.getCanSelect()}))};export{d as DataTableRowSelectionCheckbox};
 //# sourceMappingURL=DataTableRowSelectionCheckbox.js.map

package/dist/components/data-table/DataTableRowSelectionCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        css={{ ml: 'calc((var(--depth, 0) * 2) * 4px)' }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n      />\n    </>\n  )\n}\n"],"names":["DataTableRowSelectionCheckbox","row","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAQa,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,cACrB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,IAEpB,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,gBAAiBG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,MAAO,CAAE,UAAWT,EAAI,KAAM,EAC9B,IAAK,CAAE,GAAI,mCAAoC,EAC/C,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,EAAI,eAC5B,SAAU,CAACA,EAAI,aACjB,CAAA,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        css={{ mr: '$3', ml: 'calc((var(--depth, 0) * 2) * 4px)' }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n      />\n    </>\n  )\n}\n"],"names":["DataTableRowSelectionCheckbox","row","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAQa,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,cACrB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAa,EAEjC,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,cAAA,EAAiBG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,MAAO,CAAE,UAAWT,EAAI,KAAM,EAC9B,IAAK,CAAE,GAAI,KAAM,GAAI,mCAAoC,EACzD,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,EAAI,eAC5B,SAAU,CAACA,EAAI,aACjB,CAAA,CAAA,CACF,CAEJ"}

package/dist/components/data-table/DataTableTable.d.ts

@@ -10,6 +10,8 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
         headerCss?: CSS;
         numberOfStickyColumns?: number;
         scrollContainerCss?: CSS;
+        showTotalInFirstColumn?: boolean;
+        totalSuffix?: string;
     };
     rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
 };

package/dist/components/data-table/DataTableTable.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as A}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as B}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const _=({sortable:k,striped:E,theme:S="white",css:h,scrollOptions:t={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1},rowAction:v,...C})=>{const{asyncDataState:O,getTotalRows:w,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:H,setTablePosition:i}=B(),r=e.useRef(null),R=e.useRef(!1),l=e.useRef(!1),n=e.useMemo(()=>typeof document>"u"?null:document.body,[]);e.useEffect(()=>{if(!n||typeof IntersectionObserver>"u")return;const o=()=>{if(r.current){const s=r.current.getBoundingClientRect().top,c=r.current.getBoundingClientRect().bottom;i(u=>({...u,top:s,bottom:c}))}l.current=!1},a=()=>{l.current||(requestAnimationFrame(o),l.current=!0)};if(!r.current)return;const p=(t==null?void 0:t.stickyHeaderOffset)||0,T={rootMargin:`-${p}px 0px -${p}px 0px`,threshold:0},x=s=>{if(!s||s.length===0)return;const c=s[0];R.current=c.isIntersecting,n&&(c.isIntersecting?n==null||n.addEventListener("scroll",a):n==null||n.removeEventListener("scroll",a)),i(u=>({...u,isVisible:c.isIntersecting}))},b=new IntersectionObserver(x,T);return r.current&&(t.hasStickyHeader||Object.keys(f||{}).length>0)&&b.observe(r.current),()=>{b.disconnect(),n&&(n==null||n.removeEventListener("scroll",a))}},[f,t.hasStickyHeader,t==null?void 0:t.stickyHeaderOffset,n,i]);const y=O===L.PENDING,D=!y&&w()===0,I=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${H}_${o}_control_columns`};return D?null:e.createElement(e.Fragment,null,e.createElement(P,null),e.createElement("div",{style:{display:"contents"}},e.createElement(A,{...C,ref:r,numberOfStickyColumns:t.numberOfStickyColumns,scrollContainerCss:{...t.scrollContainerCss},scrollContainerkey:I(),css:{...h,...y&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},e.createElement(g.Head,{theme:S,sortable:k,isSticky:t.hasStickyHeader,stickyOffset:t.stickyHeaderOffset,css:t.headerCss}),e.createElement(g.Body,{striped:E,rowAction:v}))))};export{_ as DataTableTable};
+import*as t from"react";import{styled as F}from"../../stitches.js";import{Box as A}from"../box/Box.js";import{Table as B}from"../table/Table.js";import{DataTable as g}from"./DataTable.js";import{AsyncDataState as L}from"./DataTable.types.js";import{useDataTable as _}from"./DataTableContext.js";import{DataTableLoading as P}from"./DataTableLoading.js";const M=F(A,{p:"$2",bg:"white",borderRadius:"$3"}),N=({sortable:h,striped:w,theme:C="white",css:S,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:k,...E})=>{const{asyncDataState:O,getTotalRows:v,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:x,setTablePosition:l}=_(),n=t.useRef(null),I=t.useRef(!1),c=t.useRef(!1),r=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!r||typeof IntersectionObserver>"u")return;const o=()=>{if(n.current){const s=n.current.getBoundingClientRect().top,i=n.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}c.current=!1},a=()=>{c.current||(requestAnimationFrame(o),c.current=!0)};if(!n.current)return;const b=(e==null?void 0:e.stickyHeaderOffset)||0,R={rootMargin:`-${b}px 0px -${b}px 0px`,threshold:0},D=s=>{if(!s||s.length===0)return;const i=s[0];I.current=i.isIntersecting,r&&(i.isIntersecting?r==null||r.addEventListener("scroll",a):r==null||r.removeEventListener("scroll",a)),l(u=>({...u,isVisible:i.isIntersecting}))},y=new IntersectionObserver(D,R);return n.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&y.observe(n.current),()=>{y.disconnect(),r&&(r==null||r.removeEventListener("scroll",a))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,r,l]);const p=O===L.PENDING,T=!p&&v()===0,H=()=>{let o=0;return m()&&!!d?o=2:(m()||!!d)&&(o=1),`${x}_${o}_control_columns`};return T?null:t.createElement(t.Fragment,null,t.createElement(P,null),t.createElement(M,null,t.createElement(B,{corners:"round",size:"lg",...E,ref:n,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCss:{...e.scrollContainerCss},scrollContainerkey:H(),css:{...S,...p&&{opacity:.5,pointerEvents:"none",transition:"opacity 250ms linear 150ms"}}},t.createElement(g.Head,{theme:C,sortable:h,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,css:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(g.Body,{striped:w,rowAction:k}))))};export{N as DataTableTable};
 //# sourceMappingURL=DataTableTable.js.map

package/dist/components/data-table/DataTableTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false\n  },\n  rowAction,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof document === 'undefined') return null\n    return document.body\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n      <div style={{ display: 'contents' }}>\n        <Table\n          {...props}\n          ref={tableRef}\n          numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n          scrollContainerCss={{\n            ...scrollOptions.scrollContainerCss\n          }}\n          scrollContainerkey={buildScrollContainerKey()}\n          css={{\n            ...css,\n            ...(isPending && {\n              opacity: 0.5,\n              pointerEvents: 'none',\n              transition: 'opacity 250ms linear 150ms'\n            })\n          }}\n        >\n          <DataTable.Head\n            theme={theme}\n            sortable={sortable}\n            isSticky={scrollOptions.hasStickyHeader}\n            stickyOffset={scrollOptions.stickyHeaderOffset}\n            css={scrollOptions.headerCss}\n          />\n          <DataTable.Body striped={striped} rowAction={rowAction} />\n        </Table>\n      </div>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","DataTableLoading","Table","DataTable"],"mappings":"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"}
+{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS, styled } from '~/stitches'\n\nimport { Box } from '../box'\nimport { Table } from '../table'\nimport { TableBody } from '../table/TableBody'\nimport { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled(Box, {\n  p: '$2',\n  bg: 'white',\n  borderRadius: '$3'\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n      <TableContainer>\n        <Table\n          corners=\"round\"\n          size=\"lg\"\n          {...props}\n          ref={tableRef}\n          numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n          scrollContainerCss={{\n            ...scrollOptions.scrollContainerCss\n          }}\n          scrollContainerkey={buildScrollContainerKey()}\n          css={{\n            ...css,\n            ...(isPending && {\n              opacity: 0.5,\n              pointerEvents: 'none',\n              transition: 'opacity 250ms linear 150ms'\n            })\n          }}\n        >\n          <DataTable.Head\n            theme={theme}\n            sortable={sortable}\n            isSticky={scrollOptions.hasStickyHeader}\n            stickyOffset={scrollOptions.stickyHeaderOffset}\n            css={scrollOptions.headerCss}\n            showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n            totalSuffix={scrollOptions.totalSuffix}\n          />\n          <DataTable.Body striped={striped} rowAction={rowAction} />\n        </Table>\n      </TableContainer>\n    </>\n  )\n}\n"],"names":["TableContainer","styled","Box","DataTableTable","sortable","striped","theme","css","scrollOptions","rowAction","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","DataTableLoading","Table","DataTable"],"mappings":"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"}

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

@@ -24,6 +24,8 @@ declare const StyledNav: import("@atom-learning/stitches-react/types/styled-comp
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dialog/Dialog.d.ts

@@ -22,6 +22,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -391,6 +393,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -759,6 +763,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1128,6 +1134,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1500,6 +1508,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1849,8 +1859,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
         closeDialogText?: string;
         showCloseButton?: boolean;
     }) => import("react").JSX.Element;
-    Heading: ({ css, ...props }: import("react").ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
-    Footer: ({ css, ...props }: import("react").ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
+    Heading: ({ css, ...props }: React.ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
+    Footer: ({ css, ...props }: React.ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
     Description: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
     Title: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dialog/DialogBackground.d.ts

@@ -22,6 +22,8 @@ export declare const DialogBackground: import("@atom-learning/stitches-react/typ
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -390,6 +392,8 @@ export declare const DialogBackground: import("@atom-learning/stitches-react/typ
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dialog/DialogClose.d.ts

@@ -22,6 +22,8 @@ export declare const DialogClose: import("@atom-learning/stitches-react/types/st
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dialog/DialogContent.d.ts

@@ -25,6 +25,8 @@ declare const StyledDialogContent: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dismissible/index.d.ts

@@ -1,6 +1,6 @@
 export declare const Dismissible: {
-    ({ disabled, dismissed, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
+    ({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/dismissible-group/index.d.ts

@@ -1,7 +1,7 @@
 export declare const DismissibleGroup: {
-    ({ as: Component, disabled, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
+    ({ as: Component, disabled, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Item: ({ children, value, disabled: itemDisabled, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
-    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Item: ({ children, value, disabled: itemDisabled, ...rest }: React.PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/divider/Divider.d.ts

@@ -25,6 +25,8 @@ export declare const StyledDivider: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/Drawer.d.ts

@@ -30,6 +30,8 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -399,6 +401,8 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -768,6 +772,8 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1137,6 +1143,8 @@ export declare const Drawer: {
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/drawer/DrawerContent.d.ts

@@ -26,6 +26,8 @@ export declare const StyledContent: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerFooter.d.ts

@@ -22,6 +22,8 @@ export declare const DrawerFooter: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerHeader.d.ts

@@ -22,6 +22,8 @@ export declare const DrawerHeader: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerMain.d.ts

@@ -22,6 +22,8 @@ export declare const DrawerMain: import("@atom-learning/stitches-react/types/sty
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerOverlay.d.ts

@@ -22,6 +22,8 @@ export declare const DrawerOverlay: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/drawer/DrawerTrigger.d.ts

@@ -22,6 +22,8 @@ export declare const DrawerTrigger: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -24,6 +24,8 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -393,6 +395,8 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -762,6 +766,8 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1135,6 +1141,8 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -1504,6 +1512,8 @@ export declare const DropdownMenu: import("@atom-learning/stitches-react/types/s
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;

package/dist/components/dropdown-menu/DropdownMenuContent.d.ts

@@ -22,6 +22,8 @@ export declare const DropdownMenuContent: import("@atom-learning/stitches-react/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenuItem.d.ts

@@ -56,6 +56,8 @@ export declare const DropdownMenuItem: import("@atom-learning/stitches-react/typ
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenuSeparator.d.ts

@@ -22,6 +22,8 @@ export declare const DropdownMenuSeparator: import("@atom-learning/stitches-reac
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/dropdown-menu/DropdownMenuTrigger.d.ts

@@ -22,6 +22,8 @@ export declare const DropdownMenuTrigger: import("@atom-learning/stitches-react/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/empty-state/EmptyState.d.ts

@@ -29,6 +29,8 @@ declare const EmptyStateContainer: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -399,6 +401,8 @@ declare const EmptyStateContainer: import("@atom-learning/stitches-react/types/s
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;
@@ -778,6 +782,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1152,6 +1158,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1527,6 +1535,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -1907,6 +1917,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -2281,6 +2293,8 @@ export declare const EmptyState: {
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;

package/dist/components/empty-state/EmptyStateBody.d.ts

@@ -31,6 +31,8 @@ declare const StyledEmptyStateBody: import("@atom-learning/stitches-react/types/
             textMinimal: string;
             background: string;
             backgroundAccent: string;
+            black: string;
+            white: string;
             grey100: string;
             grey200: string;
             grey300: string;
@@ -404,6 +406,8 @@ declare const StyledEmptyStateBody: import("@atom-learning/stitches-react/types/
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/empty-state/EmptyStateImage.d.ts

@@ -29,6 +29,8 @@ declare const StyledEmptyStateImage: import("@atom-learning/stitches-react/types
                 textMinimal: string;
                 background: string;
                 backgroundAccent: string;
+                black: string;
+                white: string;
                 grey100: string;
                 grey200: string;
                 grey300: string;
@@ -404,6 +406,8 @@ declare const StyledEmptyStateImage: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/empty-state/EmptyStateTitle.d.ts

@@ -25,6 +25,8 @@ declare const StyledEmptyStateTitle: import("@atom-learning/stitches-react/types
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/flex/Flex.d.ts

@@ -28,6 +28,8 @@ export declare const Flex: import("@atom-learning/stitches-react/types/styled-co
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/form/Form.d.ts

@@ -25,6 +25,8 @@ declare const StyledForm: import("@atom-learning/stitches-react/types/styled-com
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;

package/dist/components/grid/Grid.d.ts

@@ -25,6 +25,8 @@ declare const GridContainer: import("@atom-learning/stitches-react/types/styled-
         textMinimal: string;
         background: string;
         backgroundAccent: string;
+        black: string;
+        white: string;
         grey100: string;
         grey200: string;
         grey300: string;