@atom-learning/components 3.12.3 → 3.12.6

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

@@ -1,2 +1,2 @@
-import*as t from"react";import{DataTableBody as e}from"./DataTableBody.js";import{DataTableBulkActions as r}from"./DataTableBulkActions.js";import{DataTableProvider as l}from"./DataTableContext.js";import{DataTableDataCell as m}from"./DataTableDataCell.js";import{DataTableEmptyState as i}from"./DataTableEmptyState.js";import{DataTableError as b}from"./DataTableError.js";import{DataTableGlobalFilter as D}from"./DataTableGlobalFilter.js";import{DataTableHead as p}from"./DataTableHead.js";import{DataTableHeaderCell as T}from"./DataTableHeaderCell.js";import{DataTableLoading as f}from"./DataTableLoading.js";import{DataTableMetaData as n}from"./DataTableMetaData.js";import{DataTableRow as c}from"./DataTableRow.js";import{DataTableRowSelectionCheckbox as d}from"./DataTableRowSelectionCheckbox.js";import{DataTableSelectAllRowsCheckbox as C}from"./DataTableSelectAllRowsCheckbox.js";import{DataTableTable as g}from"./DataTableTable.js";import{DragAndDropTable as k}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as s}from"./pagination/Pagination.js";const a=o=>t.createElement(l,{...o});a.Body=e,a.DataCell=m,a.DragAndDropTable=k,a.Head=p,a.HeaderCell=T,a.MetaData=n,a.Pagination=s,a.Row=c,a.GlobalFilter=D,a.Table=g,a.Loading=f,a.Error=b,a.EmptyState=i,a.SelectAllRowsCheckbox=C,a.RowSelectionCheckbox=d,a.BulkActions=r;export{a as DataTable};
+import{DataTableBody as a}from"./DataTableBody.js";import{DataTableBulkActions as o}from"./DataTableBulkActions.js";import{DataTableProvider as t}from"./DataTableContext.js";import{DataTableDataCell as e}from"./DataTableDataCell.js";import{DataTableEmptyState as r}from"./DataTableEmptyState.js";import{DataTableError as l}from"./DataTableError.js";import{DataTableGlobalFilter as m}from"./DataTableGlobalFilter.js";import{DataTableHead as i}from"./DataTableHead.js";import{DataTableHeaderCell as b}from"./DataTableHeaderCell.js";import{DataTableLoading as D}from"./DataTableLoading.js";import{DataTableMetaData as p}from"./DataTableMetaData.js";import{DataTableRow as T}from"./DataTableRow.js";import{DataTableRowSelectionCheckbox as f}from"./DataTableRowSelectionCheckbox.js";import{DataTableSelectAllRowsCheckbox as n}from"./DataTableSelectAllRowsCheckbox.js";import{DataTableTable as c}from"./DataTableTable.js";import{DragAndDropTable as d}from"./drag-and-drop/DragAndDropTable.js";import{Pagination as C}from"./pagination/Pagination.js";const g=Object.assign(t,{Body:a,DataCell:e,DragAndDropTable:d,GlobalFilter:m,Head:i,HeaderCell:b,MetaData:p,Pagination:C,Row:T,Table:c,Loading:D,Error:l,EmptyState:r,SelectAllRowsCheckbox:n,RowSelectionCheckbox:f,BulkActions:o});export{g as DataTable};
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\ntype TDataTable = React.FC<React.ComponentProps<typeof DataTableProvider>> & {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: typeof DataTableBody\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: typeof DataTableDataCell\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: typeof DragAndDropTable\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: typeof DataTableGlobalFilter\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n\n  Head: typeof DataTableHead\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n\n  HeaderCell: typeof DataTableHeaderCell\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n\n  MetaData: typeof DataTableMetaData\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n\n  Pagination: typeof Pagination\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n\n  Row: typeof DataTableRow\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: typeof DataTableTable\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: typeof DataTableLoading\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: typeof DataTableError\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: typeof DataTableEmptyState\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: typeof DataTableSelectAllRowsCheckbox\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: typeof DataTableRowSelectionCheckbox\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  BulkActions: typeof DataTableBulkActions\n}\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable: TDataTable = (props) => <DataTableProvider {...props} />\n\nDataTable.Body = DataTableBody\nDataTable.DataCell = DataTableDataCell\nDataTable.DragAndDropTable = DragAndDropTable\nDataTable.Head = DataTableHead\nDataTable.HeaderCell = DataTableHeaderCell\nDataTable.MetaData = DataTableMetaData\nDataTable.Pagination = Pagination\nDataTable.Row = DataTableRow\nDataTable.GlobalFilter = DataTableGlobalFilter\nDataTable.Table = DataTableTable\nDataTable.Loading = DataTableLoading\nDataTable.Error = DataTableError\nDataTable.EmptyState = DataTableEmptyState\nDataTable.SelectAllRowsCheckbox = DataTableSelectAllRowsCheckbox\nDataTable.RowSelectionCheckbox = DataTableRowSelectionCheckbox\nDataTable.BulkActions = DataTableBulkActions\n"],"names":["DataTable","props","React","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableHead","DataTableHeaderCell","DataTableMetaData","Pagination","DataTableRow","DataTableGlobalFilter","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState","DataTableSelectAllRowsCheckbox","DataTableRowSelectionCheckbox","DataTableBulkActions"],"mappings":"2iCA8IO,MAAMA,EAAyBC,GAAUC,EAAA,cAACC,EAAA,CAAmB,GAAGF,CAAAA,CAAO,EAE9ED,EAAU,KAAOI,EACjBJ,EAAU,SAAWK,EACrBL,EAAU,iBAAmBM,EAC7BN,EAAU,KAAOO,EACjBP,EAAU,WAAaQ,EACvBR,EAAU,SAAWS,EACrBT,EAAU,WAAaU,EACvBV,EAAU,IAAMW,EAChBX,EAAU,aAAeY,EACzBZ,EAAU,MAAQa,EAClBb,EAAU,QAAUc,EACpBd,EAAU,MAAQe,EAClBf,EAAU,WAAagB,EACvBhB,EAAU,sBAAwBiB,EAClCjB,EAAU,qBAAuBkB,EACjClB,EAAU,YAAcmB"}
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/data-table/DataTable.tsx"],"sourcesContent":["import { DataTableBody } from './DataTableBody'\nimport { DataTableBulkActions } from './DataTableBulkActions'\nimport { DataTableProvider } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableEmptyState } from './DataTableEmptyState'\nimport { DataTableError } from './DataTableError'\nimport { DataTableGlobalFilter } from './DataTableGlobalFilter'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableHeaderCell } from './DataTableHeaderCell'\nimport { DataTableLoading } from './DataTableLoading'\nimport { DataTableMetaData } from './DataTableMetaData'\nimport { DataTableRow } from './DataTableRow'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTableTable } from './DataTableTable'\nimport { DragAndDropTable } from './drag-and-drop'\nimport { Pagination } from './pagination'\n\n/** Context provider for DataTable state and logic.\n *\n * Children can call `useDataTable` to access everything provided by `@tanstack/react-table` plus\n * the functionality we've built on top.\n */\nexport const DataTable = Object.assign(DataTableProvider, {\n  /** Default table body implementation for `DataTable`.\n   *\n   * Can be configured with alternating colours of rows. If you need more customisation options,\n   * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.\n   */\n  Body: DataTableBody,\n\n  /** Default table data cell implementation for `DataTable`\n   *\n   *\n   */\n  DataCell: DataTableDataCell,\n\n  /**\n   * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop\n   */\n  DragAndDropTable: DragAndDropTable,\n\n  /** Default global search implementation for `DataTable`\n   *\n   * If you need more customisation options, you can compose your own implementation with our UI-only input components and `useDataTable`.\n   */\n  GlobalFilter: DataTableGlobalFilter,\n\n  /** Default table head implementation\n   *\n   * Can be configured to be sortable and with different visual themes.\n   * If you need more customisation options, you can build your own implementation\n   * with `useDataTable` and the UI-only `Table` components.\n   */\n  Head: DataTableHead,\n\n  /** Default header implementation for `DataTable`\n   *\n   * Can be configured to make the column sortable. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  HeaderCell: DataTableHeaderCell,\n\n  /** Default pagination implementation for `DataTable`\n   *\n   * Can navigate forward, backward, or to any specific page. If you need more customisation options,\n   * you can build your own implementation with `useDataTable` and other UI components.\n   *\n   */\n  MetaData: DataTableMetaData,\n\n  /** Default display of amount of items and current sorting status for 'DataTable'\n   *\n   */\n  Pagination: Pagination,\n\n  /** Default row implementation for `DataTable`\n   *\n   * Renders all visible cells as `Table.Cell`. If you need more customisation options,\n   * you can build your own implementation with the UI-only `Table` components.\n   */\n  Row: DataTableRow,\n\n  /** Default table implementation for `DataTable`.\n   *\n   * Can be configured with sortable columns and different visual themes.\n   *\n   * If you need more customisation options, you can compose your own implementation with\n   * lower-level `DataTable` components or build the whole thing from\n   * scratch with `useDataTable` and the UI-only `Table` components.\n   *\n   */\n  Table: DataTableTable,\n\n  /** Default loading implementation for remote data\n   *\n   * Renders a loading component while fetching the paginated data using `getAsyncData`.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState`\n   * can be retrieved from `useDataTable`\n   */\n  Loading: DataTableLoading,\n\n  /** Default error implementation for remote data\n   *\n   * Renders an error component when `getAsyncData` promise rejects.\n   * Children are rendered as a function, it exposes a `runAsyncData` function to the children component.\n   * `runAsyncData()` can be used to retry fetching the paginated data with the current pageIndex, pageSize\n   * and sorting parameters or your own custom paginated options.\n   *\n   * If you need more customisation, you can compose your own implentation, `asyncDataState` and `runAsyncData()`\n   * can be retrieved from `useDataTable`\n   *\n   */\n  Error: DataTableError,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Extends the EmptyState component\n   */\n  EmptyState: DataTableEmptyState,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for bulk selection/deselection of all selectable rows\n   */\n  SelectAllRowsCheckbox: DataTableSelectAllRowsCheckbox,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  RowSelectionCheckbox: DataTableRowSelectionCheckbox,\n\n  /** Empty state implementation for `DataTable`.\n   *\n   * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row\n   */\n  BulkActions: DataTableBulkActions\n})\n"],"names":["DataTable","DataTableProvider","DataTableBody","DataTableDataCell","DragAndDropTable","DataTableGlobalFilter","DataTableHead","DataTableHeaderCell","DataTableMetaData","Pagination","DataTableRow","DataTableTable","DataTableLoading","DataTableError","DataTableEmptyState","DataTableSelectAllRowsCheckbox","DataTableRowSelectionCheckbox","DataTableBulkActions"],"mappings":"mhCAuBO,MAAMA,EAAY,OAAO,OAAOC,EAAmB,CAMxD,KAAMC,EAMN,SAAUC,EAKV,iBAAkBC,EAMlB,aAAcC,EAQd,KAAMC,EAON,WAAYC,EAQZ,SAAUC,EAKV,WAAYC,EAOZ,IAAKC,EAWL,MAAOC,EASP,QAASC,EAaT,MAAOC,EAMP,WAAYC,EAMZ,sBAAuBC,EAMvB,qBAAsBC,EAMtB,YAAaC,CACf,CAAC"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { Table } from '../table';
 declare type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'>;
-export declare const DataTableBody: React.FC<DataTableBodyProps>;
+export declare const DataTableBody: ({ striped, ...props }: DataTableBodyProps) => JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.js","sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n>\n\nexport const DataTableBody: React.FC<DataTableBodyProps> = ({\n  striped = false,\n  ...props\n}) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTable.Row row={row} key={row.id} />\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DataTableBody","striped","props","getRowModel","useDataTable","React","Table","row","DataTable"],"mappings":"kKAWO,MAAMA,EAA8C,CAAC,CAC1D,QAAAC,EAAU,MACPC,CACL,IAAM,CACJ,KAAM,CAAE,YAAAC,CAAY,EAAIC,IAExB,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASD,CAC7BE,EAAAA,EAAAA,EAAc,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAU,IAAV,CAAc,IAAKD,EAAK,IAAKA,EAAI,EAAA,CAAI,CAC9C,CACH,CAEJ"}
+{"version":3,"file":"DataTableBody.js","sources":["../../../src/components/data-table/DataTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../table'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n>\n\nexport const DataTableBody = ({\n  striped = false,\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return <DataTable.Row row={row} key={row.id} />\n      })}\n    </Table.Body>\n  )\n}\n"],"names":["DataTableBody","striped","props","getRowModel","useDataTable","React","Table","row","DataTable"],"mappings":"kKAWO,MAAMA,EAAgB,CAAC,CAC5B,QAAAC,EAAU,MACPC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,IAExB,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASD,CAC7BE,EAAAA,EAAAA,EAAc,KAAK,IAAKI,GAChBF,EAAA,cAACG,EAAU,IAAV,CAAc,IAAKD,EAAK,IAAKA,EAAI,EAAA,CAAI,CAC9C,CACH,CAEJ"}

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

@@ -1,22 +1,25 @@
 import * as React from 'react';
 import { CSS } from '../../stitches';
-interface DataTableBulkActionsProps {
-    css?: CSS;
+declare const BulkActionsDefaultActions: ({ children }: {
+    children: React.ReactElement;
+}) => React.ReactElement | null;
+declare const BulkActionsSelectedRowActions: ({ cancelLabel, children }: {
+    cancelLabel?: string | undefined;
+    children: React.ReactNode;
+}) => JSX.Element | null;
+export declare const DataTableBulkActions: (({ children, ...rest }: {
+    css?: CSS | undefined;
     children: React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>> | React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>> | [
         React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>>,
         React.ReactElement<React.ComponentProps<typeof BulkActionsSelectedRowActions>>
     ];
-}
-interface BulkActionsSelectedRowActionsProps {
-    cancelLabel?: string;
-    children: React.ReactNode;
-}
-declare const BulkActionsDefaultActions: ({ children }: {
-    children: React.ReactElement;
-}) => React.ReactElement | null;
-declare const BulkActionsSelectedRowActions: React.FC<BulkActionsSelectedRowActionsProps>;
-export declare const DataTableBulkActions: React.FC<DataTableBulkActionsProps> & {
-    DefaultActions: typeof BulkActionsDefaultActions;
-    SelectedRowActions: typeof BulkActionsSelectedRowActions;
+}) => JSX.Element) & {
+    DefaultActions: ({ children }: {
+        children: React.ReactElement;
+    }) => React.ReactElement | null;
+    SelectedRowActions: ({ cancelLabel, children }: {
+        cancelLabel?: string | undefined;
+        children: React.ReactNode;
+    }) => JSX.Element | null;
 };
 export {};

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{Button as s}from"../button/Button.js";import{Divider as m}from"../divider/Divider.js";import{styled as u}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";import{useDataTable as o}from"./DataTableContext.js";import{DataTable as d}from"./DataTable.js";const p=u(i,{p:"$2",width:"100%",mb:"$2",justifyContent:"space-between",alignItems:"center",minHeight:"$6",borderTopLeftRadius:"$0",borderTopRightRadius:"$0",variants:{isRowSelected:{true:{bg:"$primary100"}}}}),b=({children:n})=>{const{rowSelection:t}=o();return Object.keys(t||{}).length>0?null:n},f=({cancelLabel:n="Cancel",children:t})=>{const{toggleAllPageRowsSelected:r,rowSelection:l}=o(),a=()=>r(!1);return Object.keys(l||{}).length===0?null:e.createElement(e.Fragment,null,t,e.Children.count(t)>0&&e.createElement(m,{orientation:"vertical",css:{mx:"$4"}}),e.createElement(s,{theme:"neutral",onClick:a},n))},c=({children:n,...t})=>{const{rowSelection:r}=o(),l=Object.keys(r||{}).length>0;return e.createElement(p,{isRowSelected:l,...t},e.createElement(d.MetaData,null),e.createElement(i,{css:{justifyContent:"flex-end",alignItems:"center"}},n))};c.DefaultActions=b,c.SelectedRowActions=f;export{c as DataTableBulkActions};
+import*as e from"react";import{Button as a}from"../button/Button.js";import{Divider as s}from"../divider/Divider.js";import{styled as m}from"../../stitches.js";import{Flex as c}from"../flex/Flex.js";import{useDataTable as o}from"./DataTableContext.js";import{DataTable as u}from"./DataTable.js";const d=m(c,{p:"$2",width:"100%",mb:"$2",justifyContent:"space-between",alignItems:"center",minHeight:"$6",borderTopLeftRadius:"$0",borderTopRightRadius:"$0",variants:{isRowSelected:{true:{bg:"$primary100"}}}}),p=({children:n})=>{const{rowSelection:t}=o();return Object.keys(t||{}).length>0?null:n},b=({cancelLabel:n="Cancel",children:t})=>{const{toggleAllPageRowsSelected:r,rowSelection:l}=o(),i=()=>r(!1);return Object.keys(l||{}).length===0?null:e.createElement(e.Fragment,null,t,e.Children.count(t)>0&&e.createElement(s,{orientation:"vertical",css:{mx:"$4"}}),e.createElement(a,{theme:"neutral",onClick:i},n))},g=Object.assign(({children:n,...t})=>{const{rowSelection:r}=o(),l=Object.keys(r||{}).length>0;return e.createElement(d,{isRowSelected:l,...t},e.createElement(u.MetaData,null),e.createElement(c,{css:{justifyContent:"flex-end",alignItems:"center"}},n))},{DefaultActions:p,SelectedRowActions:b});export{g as DataTableBulkActions};
 //# sourceMappingURL=DataTableBulkActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActions.js","sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button'\nimport { Divider } from '~/components/divider'\nimport { CSS, styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\ninterface DataTableBulkActionsProps {\n  css?: CSS\n  children:\n    | React.ReactElement<React.ComponentProps<typeof BulkActionsDefaultActions>>\n    | React.ReactElement<\n        React.ComponentProps<typeof BulkActionsSelectedRowActions>\n      >\n    | [\n        React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >,\n        React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      ]\n}\n\ninterface BulkActionsSelectedRowActionsProps {\n  cancelLabel?: string\n  children: React.ReactNode\n}\n\nconst StyledContainer = styled(Flex, {\n  p: '$2',\n  width: '100%',\n  mb: '$2',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  minHeight: '$6',\n  borderTopLeftRadius: '$0',\n  borderTopRightRadius: '$0',\n  variants: {\n    isRowSelected: {\n      true: {\n        bg: '$primary100'\n      }\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement\n}): React.ReactElement | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions: React.FC<\n  BulkActionsSelectedRowActionsProps\n> = ({ cancelLabel = 'Cancel', children }) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" css={{ mx: '$4' }} />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions: React.FC<DataTableBulkActionsProps> & {\n  DefaultActions: typeof BulkActionsDefaultActions\n  SelectedRowActions: typeof BulkActionsSelectedRowActions\n} = ({ children, ...rest }) => {\n  const { rowSelection } = useDataTable()\n\n  const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n  return (\n    <StyledContainer isRowSelected={isRowSelected} {...rest}>\n      <DataTable.MetaData />\n\n      <Flex css={{ justifyContent: 'flex-end', alignItems: 'center' }}>\n        {children}\n      </Flex>\n    </StyledContainer>\n  )\n}\n\nDataTableBulkActions.DefaultActions = BulkActionsDefaultActions\nDataTableBulkActions.SelectedRowActions = BulkActionsSelectedRowActions\n"],"names":["StyledContainer","styled","Flex","BulkActionsDefaultActions","children","rowSelection","useDataTable","BulkActionsSelectedRowActions","cancelLabel","toggleAllPageRowsSelected","handleDeselectAllPageRows","React","Divider","Button","DataTableBulkActions","rest","isRowSelected","DataTable"],"mappings":"uSAgCA,MAAMA,EAAkBC,EAAOC,EAAM,CACnC,EAAG,KACH,MAAO,OACP,GAAI,KACJ,eAAgB,gBAChB,WAAY,SACZ,UAAW,KACX,oBAAqB,KACrB,qBAAsB,KACtB,SAAU,CACR,cAAe,CACb,KAAM,CACJ,GAAI,aACN,CACF,CACF,CACF,CAAC,EAEKC,EAA4B,CAAC,CACjC,SAAAC,CACF,IAEiC,CAC/B,KAAM,CAAE,aAAAC,CAAa,EAAIC,IAEzB,OAAI,OAAO,KAAKD,GAAgB,CAAA,CAAE,EAAE,OAAS,EAAU,KAEhDD,CACT,EAEMG,EAEF,CAAC,CAAE,YAAAC,EAAc,SAAU,SAAAJ,CAAS,IAAM,CAC5C,KAAM,CAAE,0BAAAK,EAA2B,aAAAJ,CAAa,EAAIC,EAAa,EAE3DI,EAA4B,IAAMD,EAA0B,EAAK,EAEvE,OAAI,OAAO,KAAKJ,GAAgB,CAAA,CAAE,EAAE,SAAW,EAAU,KAGvDM,EAAA,cAAAA,EAAA,SACGP,KAAAA,EACAO,EAAM,SAAS,MAAMP,CAAQ,EAAI,GAChCO,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,GAAI,IAAK,CAAG,CAAA,EAErDD,EAAA,cAACE,EAAA,CAAO,MAAM,UAAU,QAASH,CAC9BF,EAAAA,CACH,CACF,CAEJ,EAEaM,EAGT,CAAC,CAAE,SAAAV,KAAaW,CAAK,IAAM,CAC7B,KAAM,CAAE,aAAAV,CAAa,EAAIC,EAEnBU,EAAAA,EAAgB,OAAO,KAAKX,GAAgB,CAAE,CAAA,EAAE,OAAS,EAE/D,OACEM,EAAA,cAACX,EAAA,CAAgB,cAAegB,EAAgB,GAAGD,GACjDJ,EAAA,cAACM,EAAU,SAAV,IAAmB,EAEpBN,EAAA,cAACT,EAAA,CAAK,IAAK,CAAE,eAAgB,WAAY,WAAY,QAAS,CAC3DE,EAAAA,CACH,CACF,CAEJ,EAEAU,EAAqB,eAAiBX,EACtCW,EAAqB,mBAAqBP"}
+{"version":3,"file":"DataTableBulkActions.js","sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Button } from '~/components/button'\nimport { Divider } from '~/components/divider'\nimport { CSS, styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { DataTable } from '.'\nimport { useDataTable } from './DataTableContext'\n\nconst StyledContainer = styled(Flex, {\n  p: '$2',\n  width: '100%',\n  mb: '$2',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  minHeight: '$6',\n  borderTopLeftRadius: '$0',\n  borderTopRightRadius: '$0',\n  variants: {\n    isRowSelected: {\n      true: {\n        bg: '$primary100'\n      }\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement\n}): React.ReactElement | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" css={{ mx: '$4' }} />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    css?: CSS\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTable.MetaData />\n\n        <Flex css={{ justifyContent: 'flex-end', alignItems: 'center' }}>\n          {children}\n        </Flex>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"names":["StyledContainer","styled","Flex","BulkActionsDefaultActions","children","rowSelection","useDataTable","BulkActionsSelectedRowActions","cancelLabel","toggleAllPageRowsSelected","handleDeselectAllPageRows","React","Divider","Button","DataTableBulkActions","rest","isRowSelected","DataTable"],"mappings":"uSAUA,MAAMA,EAAkBC,EAAOC,EAAM,CACnC,EAAG,KACH,MAAO,OACP,GAAI,KACJ,eAAgB,gBAChB,WAAY,SACZ,UAAW,KACX,oBAAqB,KACrB,qBAAsB,KACtB,SAAU,CACR,cAAe,CACb,KAAM,CACJ,GAAI,aACN,CACF,CACF,CACF,CAAC,EAEKC,EAA4B,CAAC,CACjC,SAAAC,CACF,IAEiC,CAC/B,KAAM,CAAE,aAAAC,CAAa,EAAIC,IAEzB,OAAI,OAAO,KAAKD,GAAgB,CAAA,CAAE,EAAE,OAAS,EAAU,KAEhDD,CACT,EAEMG,EAAgC,CAAC,CACrC,YAAAC,EAAc,SACd,SAAAJ,CACF,IAGM,CACJ,KAAM,CAAE,0BAAAK,EAA2B,aAAAJ,CAAa,EAAIC,EAAAA,EAE9CI,EAA4B,IAAMD,EAA0B,EAAK,EAEvE,OAAI,OAAO,KAAKJ,GAAgB,CAAA,CAAE,EAAE,SAAW,EAAU,KAGvDM,EAAA,cAAAA,EAAA,SAAA,KACGP,EACAO,EAAM,SAAS,MAAMP,CAAQ,EAAI,GAChCO,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,GAAI,IAAK,CAAA,CAAG,EAErDD,EAAA,cAACE,EAAA,CAAO,MAAM,UAAU,QAASH,CAC9BF,EAAAA,CACH,CACF,CAEJ,EAEaM,EAAuB,OAAO,OACzC,CAAC,CACC,SAAAV,KACGW,CACL,IAiBM,CACJ,KAAM,CAAE,aAAAV,CAAa,EAAIC,IAEnBU,EAAgB,OAAO,KAAKX,GAAgB,EAAE,EAAE,OAAS,EAE/D,OACEM,EAAA,cAACX,EAAA,CAAgB,cAAegB,EAAgB,GAAGD,CAAAA,EACjDJ,EAAA,cAACM,EAAU,SAAV,IAAmB,EAEpBN,EAAA,cAACT,EAAA,CAAK,IAAK,CAAE,eAAgB,WAAY,WAAY,QAAS,CAAA,EAC3DE,CACH,CACF,CAEJ,EACA,CACE,eAAgBD,EAChB,mBAAoBI,CACtB,CACF"}

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

@@ -1,7 +1,7 @@
+/// <reference types="react" />
 import type { Cell } from '@tanstack/react-table';
-import * as React from 'react';
 declare type DataTableDataCellProps = {
     cell: Cell<Record<string, unknown>, unknown>;
 };
-export declare const DataTableDataCell: React.FC<DataTableDataCellProps>;
+export declare const DataTableDataCell: ({ cell }: DataTableDataCellProps) => JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableDataCell.js","sources":["../../../src/components/data-table/DataTableDataCell.tsx"],"sourcesContent":["import type { Cell } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table } from '../table'\n\ntype DataTableDataCellProps = {\n  cell: Cell<Record<string, unknown>, unknown>\n}\n\nexport const DataTableDataCell: React.FC<DataTableDataCellProps> = ({\n  cell\n}) => {\n  return (\n    <Table.Cell key={cell.id}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  )\n}\n"],"names":["DataTableDataCell","cell","React","Table","flexRender"],"mappings":"qHAUO,MAAMA,EAAsD,CAAC,CAClE,KAAAC,CACF,IAEIC,EAAA,cAACC,EAAM,KAAN,CAAW,IAAKF,EAAK,EAAA,EACnBG,EAAWH,EAAK,OAAO,UAAU,KAAMA,EAAK,YAAY,CAC3D"}
+{"version":3,"file":"DataTableDataCell.js","sources":["../../../src/components/data-table/DataTableDataCell.tsx"],"sourcesContent":["import type { Cell } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Table } from '../table'\n\ntype DataTableDataCellProps = {\n  cell: Cell<Record<string, unknown>, unknown>\n}\n\nexport const DataTableDataCell = ({ cell }: DataTableDataCellProps) => {\n  return (\n    <Table.Cell key={cell.id}>\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  )\n}\n"],"names":["DataTableDataCell","cell","React","Table","flexRender"],"mappings":"qHAUO,MAAMA,EAAoB,CAAC,CAAE,KAAAC,CAAK,IAErCC,EAAA,cAACC,EAAM,KAAN,CAAW,IAAKF,EAAK,EAAA,EACnBG,EAAWH,EAAK,OAAO,UAAU,KAAMA,EAAK,YAAY,CAC3D"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { EmptyState } from '../empty-state';
 declare type DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>;
-export declare const DataTableEmptyState: React.FC<DataTableEmptyStateProps>;
+export declare const DataTableEmptyState: ({ children, ...rest }: DataTableEmptyStateProps) => JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableEmptyState.js","sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState: React.FC<DataTableEmptyStateProps> = ({\n  children,\n  ...rest\n}) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (!isEmpty) return null\n\n  return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"names":["DataTableEmptyState","children","rest","asyncDataState","getTotalRows","useDataTable","AsyncDataState","React","EmptyState"],"mappings":"mMAQaA,EAA0D,CAAC,CACtE,SAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAKzC,EAAA,OAHkBF,IAAmBG,EAAe,SACtBF,MAAmB,EAI1CG,EAAA,cAACC,EAAA,CAAY,GAAGN,CAAAA,EAAOD,CAAS,EAFlB,IAGvB"}
+{"version":3,"file":"DataTableEmptyState.js","sources":["../../../src/components/data-table/DataTableEmptyState.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { EmptyState } from '../empty-state'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableEmptyStateProps = React.ComponentProps<typeof EmptyState>\n\nexport const DataTableEmptyState = ({\n  children,\n  ...rest\n}: DataTableEmptyStateProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (!isEmpty) return null\n\n  return <EmptyState {...rest}>{children}</EmptyState>\n}\n"],"names":["DataTableEmptyState","children","rest","asyncDataState","getTotalRows","useDataTable","AsyncDataState","React","EmptyState"],"mappings":"mMAQaA,EAAsB,CAAC,CAClC,SAAAC,KACGC,CACL,IAAgC,CAC9B,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAKzC,EAAA,OAHkBF,IAAmBG,EAAe,SACtBF,MAAmB,EAI1CG,EAAA,cAACC,EAAA,CAAY,GAAGN,CAAAA,EAAOD,CAAS,EAFlB,IAGvB"}

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { DataTableContextType } from './DataTable.types';
-interface IDataTableErrorProps {
+export declare const DataTableError: ({ children }: {
     children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement;
-}
-export declare const DataTableError: React.FC<IDataTableErrorProps>;
-export {};
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;

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

@@ -1,2 +1,2 @@
-import{AsyncDataState as n}from"./DataTable.types.js";import{useDataTable as e}from"./DataTableContext.js";const o=({children:t})=>{const{asyncDataState:a,runAsyncData:r}=e();return a!==n.REJECTED?null:t(r)};export{o as DataTableError};
+import{AsyncDataState as e}from"./DataTable.types.js";import{useDataTable as n}from"./DataTableContext.js";const o=({children:a})=>{const{asyncDataState:t,runAsyncData:r}=n();return t!==e.REJECTED?null:a(r)};export{o as DataTableError};
 //# sourceMappingURL=DataTableError.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableError.js","sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ninterface IDataTableErrorProps {\n  children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement\n}\n\nexport const DataTableError: React.FC<IDataTableErrorProps> = ({\n  children\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"names":["DataTableError","children","asyncDataState","runAsyncData","useDataTable","AsyncDataState"],"mappings":"2GASO,MAAMA,EAAiD,CAAC,CAC7D,SAAAC,CACF,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAEtD,OAAIF,IAAmBG,EAAe,SAAiB,KAEhDJ,EAASE,CAAY,CAC9B"}
+{"version":3,"file":"DataTableError.js","sources":["../../../src/components/data-table/DataTableError.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { AsyncDataState, DataTableContextType } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableError = ({\n  children\n}: {\n  children: (retry?: DataTableContextType['runAsyncData']) => React.ReactElement\n}) => {\n  const { asyncDataState, runAsyncData } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.REJECTED) return null\n\n  return children(runAsyncData)\n}\n"],"names":["DataTableError","children","asyncDataState","runAsyncData","useDataTable","AsyncDataState"],"mappings":"2GAKO,MAAMA,EAAiB,CAAC,CAC7B,SAAAC,CACF,IAEM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAEtD,OAAIF,IAAmBG,EAAe,SAAiB,KAEhDJ,EAASE,CAAY,CAC9B"}

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

@@ -4,5 +4,5 @@ declare type DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {
     label: string;
     hideLabel?: boolean;
 };
-export declare const DataTableGlobalFilter: React.FC<DataTableSearchProps>;
+export declare const DataTableGlobalFilter: ({ onChange, label, hideLabel, ...props }: DataTableSearchProps) => JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableGlobalFilter.js","sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { OptionalVisuallyHiddenWrapper } from '../../utilities/optional-visually-hidden-wrapper'\nimport { Label } from '../label'\nimport { SearchInput } from '../search-input'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter: React.FC<DataTableSearchProps> = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <OptionalVisuallyHiddenWrapper hidden={hideLabel}>\n        <Label css={{ mb: '$3' }} htmlFor={label}>\n          {label}\n        </Label>\n      </OptionalVisuallyHiddenWrapper>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"names":["DataTableGlobalFilter","onChange","label","hideLabel","props","setGlobalFilter","getState","resetPagination","getTotalRows","asyncDataState","useDataTable","globalFilter","AsyncDataState","handleChange","debounce","event","value","React","OptionalVisuallyHiddenWrapper","Label","SearchInput"],"mappings":"yZAaO,MAAMA,EAAwD,CAAC,CACpE,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACTC,CACL,IAAM,CACJ,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAAa,EACX,CAAE,aAAAC,CAAa,EAAIL,EAAAA,EAKzB,GAHkBG,IAAmBG,EAAe,SACtBJ,EAAAA,IAAmB,EAEpC,OAAO,KAEpB,MAAMK,EAAeC,EAAS,IAAMC,GAAU,CAC5C,KAAM,CACJ,OAAQ,CAAE,MAAAC,CAAM,CAClB,EAAID,EAEJd,GAAA,MAAAA,EAAWc,CAAAA,EACXR,IACAF,EAAgBW,CAAK,CACvB,CAAC,EAED,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,CAA8B,OAAQf,CAAAA,EACrCc,EAAA,cAACE,EAAA,CAAM,IAAK,CAAE,GAAI,IAAK,EAAG,QAASjB,CAAAA,EAChCA,CACH,CACF,EACAe,EAAA,cAACG,EAAA,CACE,GAAGhB,EACJ,aAAcO,EACd,SAAUE,EACV,KAAMX,CAAAA,CACR,CACF,CAEJ"}
+{"version":3,"file":"DataTableGlobalFilter.js","sources":["../../../src/components/data-table/DataTableGlobalFilter.tsx"],"sourcesContent":["import * as React from 'react'\nimport { debounce } from 'throttle-debounce'\n\nimport { OptionalVisuallyHiddenWrapper } from '../../utilities/optional-visually-hidden-wrapper'\nimport { Label } from '../label'\nimport { SearchInput } from '../search-input'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\ntype DataTableSearchProps = React.ComponentProps<typeof SearchInput> & {\n  label: string\n  hideLabel?: boolean\n}\nexport const DataTableGlobalFilter = ({\n  onChange,\n  label,\n  hideLabel = false,\n  ...props\n}: DataTableSearchProps) => {\n  const {\n    setGlobalFilter,\n    getState,\n    resetPagination,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n  const { globalFilter } = getState()\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const handleChange = debounce(250, (event) => {\n    const {\n      target: { value }\n    } = event\n\n    onChange?.(event)\n    resetPagination()\n    setGlobalFilter(value)\n  })\n\n  return (\n    <>\n      <OptionalVisuallyHiddenWrapper hidden={hideLabel}>\n        <Label css={{ mb: '$3' }} htmlFor={label}>\n          {label}\n        </Label>\n      </OptionalVisuallyHiddenWrapper>\n      <SearchInput\n        {...props}\n        defaultValue={globalFilter}\n        onChange={handleChange}\n        name={label}\n      />\n    </>\n  )\n}\n"],"names":["DataTableGlobalFilter","onChange","label","hideLabel","props","setGlobalFilter","getState","resetPagination","getTotalRows","asyncDataState","useDataTable","globalFilter","AsyncDataState","handleChange","debounce","event","value","React","OptionalVisuallyHiddenWrapper","Label","SearchInput"],"mappings":"yZAaO,MAAMA,EAAwB,CAAC,CACpC,SAAAC,EACA,MAAAC,EACA,UAAAC,EAAY,MACTC,CACL,IAA4B,CAC1B,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAAa,EACX,CAAE,aAAAC,CAAa,EAAIL,EAAAA,EAKzB,GAHkBG,IAAmBG,EAAe,SACtBJ,EAAAA,IAAmB,EAEpC,OAAO,KAEpB,MAAMK,EAAeC,EAAS,IAAMC,GAAU,CAC5C,KAAM,CACJ,OAAQ,CAAE,MAAAC,CAAM,CAClB,EAAID,EAEJd,GAAA,MAAAA,EAAWc,CAAAA,EACXR,IACAF,EAAgBW,CAAK,CACvB,CAAC,EAED,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,CAA8B,OAAQf,CAAAA,EACrCc,EAAA,cAACE,EAAA,CAAM,IAAK,CAAE,GAAI,IAAK,EAAG,QAASjB,CAAAA,EAChCA,CACH,CACF,EACAe,EAAA,cAACG,EAAA,CACE,GAAGhB,EACJ,aAAcO,EACd,SAAUE,EACV,KAAMX,CAAAA,CACR,CACF,CAEJ"}

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

@@ -6,5 +6,5 @@ declare type DataTableHeadProps = Omit<React.ComponentProps<typeof Table.Header>
     isSticky?: boolean;
     headerCss?: CSS;
 };
-export declare const DataTableHead: React.FC<DataTableHeadProps>;
+export declare const DataTableHead: ({ sortable, theme, isSticky, ...props }: DataTableHeadProps) => JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as p}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as b}from"./DataTableContext.js";import{DataTable as h}from"./DataTable.js";const E=({sortable:a=!0,theme:o="light",isSticky:s=!1,...c})=>{const{getHeaderGroups:i,setIsSortable:r,enableRowSelection:n,getCanSomeRowsExpand:d}=b();return e.useEffect(()=>{r(a)},[a,r]),e.createElement(t.Header,{theme:o,isSticky:s,...c},i().map(l=>e.createElement(t.Row,{key:l.id},d()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),n&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(p,null)),l.headers.map(m=>e.createElement(h.HeaderCell,{header:m,key:m.id})))))};export{E as DataTableHead};
+import*as e from"react";import{Table as t}from"../table/Table.js";import{DataTableSelectAllRowsCheckbox as p}from"./DataTableSelectAllRowsCheckbox.js";import{useDataTable as b}from"./DataTableContext.js";import{DataTable as h}from"./DataTable.js";const E=({sortable:a=!0,theme:o="light",isSticky:s=!1,...c})=>{const{getHeaderGroups:i,setIsSortable:l,enableRowSelection:n,getCanSomeRowsExpand:d}=b();return e.useEffect(()=>{l(a)},[a,l]),e.createElement(t.Header,{theme:o,isSticky:s,...c},i().map(r=>e.createElement(t.Row,{key:r.id},d()&&e.createElement(t.HeaderCell,{css:{width:"$4"}}),n&&e.createElement(t.HeaderCell,{css:{width:"$4"}},e.createElement(p,null)),r.headers.map(m=>e.createElement(h.HeaderCell,{header:m,key:m.id})))))};export{E as DataTableHead};
 //# sourceMappingURL=DataTableHead.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  headerCss?: CSS\n}\n\nexport const DataTableHead: React.FC<DataTableHeadProps> = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  ...props\n}) => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  return (\n    <Table.Header theme={theme} isSticky={isSticky} {...props}>\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row key={headerGroup.id}>\n            {getCanSomeRowsExpand() && (\n              <Table.HeaderCell css={{ width: '$4' }} />\n            )}\n            {enableRowSelection && (\n              <Table.HeaderCell css={{ width: '$4' }}>\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header) => (\n              <DataTable.HeaderCell header={header} key={header.id} />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAiBa,MAAAA,EAA8C,CAAC,CAC1D,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,MACRC,CACL,IAAM,CACJ,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,EAAa,EAEjB,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcL,CAAQ,CACxB,EAAG,CAACA,EAAUK,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CAAa,MAAOT,EAAO,SAAUC,EAAW,GAAGC,CACjDC,EAAAA,EAAkB,EAAA,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,EACzBJ,EAAAA,EAAAA,GACCE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,EACnCD,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}
+{"version":3,"file":"DataTableHead.js","sources":["../../../src/components/data-table/DataTableHead.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Table } from '../table'\nimport { DataTableSelectAllRowsCheckbox } from './DataTableSelectAllRowsCheckbox'\nimport { DataTable, useDataTable } from './index'\n\ntype DataTableHeadProps = Omit<\n  React.ComponentProps<typeof Table.Header>,\n  'children'\n> & {\n  sortable?: boolean\n  isSticky?: boolean\n  headerCss?: CSS\n}\n\nexport const DataTableHead = ({\n  sortable = true,\n  theme = 'light',\n  isSticky = false,\n  ...props\n}: DataTableHeadProps) => {\n  const {\n    getHeaderGroups,\n    setIsSortable,\n    enableRowSelection,\n    getCanSomeRowsExpand\n  } = useDataTable()\n\n  React.useEffect(() => {\n    setIsSortable(sortable)\n  }, [sortable, setIsSortable])\n\n  return (\n    <Table.Header theme={theme} isSticky={isSticky} {...props}>\n      {getHeaderGroups().map((headerGroup) => {\n        return (\n          <Table.Row key={headerGroup.id}>\n            {getCanSomeRowsExpand() && (\n              <Table.HeaderCell css={{ width: '$4' }} />\n            )}\n            {enableRowSelection && (\n              <Table.HeaderCell css={{ width: '$4' }}>\n                <DataTableSelectAllRowsCheckbox />\n              </Table.HeaderCell>\n            )}\n            {headerGroup.headers.map((header) => (\n              <DataTable.HeaderCell header={header} key={header.id} />\n            ))}\n          </Table.Row>\n        )\n      })}\n    </Table.Header>\n  )\n}\n"],"names":["DataTableHead","sortable","theme","isSticky","props","getHeaderGroups","setIsSortable","enableRowSelection","getCanSomeRowsExpand","useDataTable","React","Table","headerGroup","DataTableSelectAllRowsCheckbox","header","DataTable"],"mappings":"uPAiBa,MAAAA,EAAgB,CAAC,CAC5B,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,SAAAC,EAAW,MACRC,CACL,IAA0B,CACxB,KAAM,CACJ,gBAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,qBAAAC,CACF,EAAIC,EAAa,EAEjB,OAAAC,EAAM,UAAU,IAAM,CACpBJ,EAAcL,CAAQ,CACxB,EAAG,CAACA,EAAUK,CAAa,CAAC,EAG1BI,EAAA,cAACC,EAAM,OAAN,CAAa,MAAOT,EAAO,SAAUC,EAAW,GAAGC,CACjDC,EAAAA,EAAkB,EAAA,IAAKO,GAEpBF,EAAA,cAACC,EAAM,IAAN,CAAU,IAAKC,EAAY,EACzBJ,EAAAA,EAAAA,GACCE,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAG,CAAA,EAEzCJ,GACCG,EAAA,cAACC,EAAM,WAAN,CAAiB,IAAK,CAAE,MAAO,IAAK,CAAA,EACnCD,EAAA,cAACG,EAAA,IAA+B,CAClC,EAEDD,EAAY,QAAQ,IAAKE,GACxBJ,EAAA,cAACK,EAAU,WAAV,CAAqB,OAAQD,EAAQ,IAAKA,EAAO,EAAI,CAAA,CACvD,CACH,CAEH,CACH,CAEJ"}

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

@@ -4,5 +4,5 @@ import { Table } from '../table';
 declare type DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {
     header: Header<Record<string, unknown>, unknown>;
 };
-export declare const DataTableHeaderCell: React.FC<DataTableHeaderProps>;
+export declare const DataTableHeaderCell: ({ header, children, css, ...props }: DataTableHeaderProps) => JSX.Element;
 export {};

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

@@ -1,2 +1,2 @@
-import{SortUp as s,SortDown as m}from"@atom-learning/icons";import{flexRender as a}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";import{Table as p}from"../table/Table.js";import{useDataTable as f}from"./DataTableContext.js";const u={asc:s,desc:m},g=({direction:e})=>t.createElement(d,{is:u[e],size:"sm",css:{position:"absolute",left:"$1"}}),b=({header:e,children:C,css:i,...c})=>{const r=e.column.getIsSorted(),{isSortable:o}=f(),n=e.column.getCanSort();return t.createElement(p.HeaderCell,{onClick:o&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:o&&n?"pointer":"initial",...i},...c},t.createElement(l,{css:{alignItems:"center"}},a(e.column.columnDef.header,e.getContext()),r&&o&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(g,{direction:r}))))};export{b as DataTableHeaderCell};
+import{SortUp as s,SortDown as m}from"@atom-learning/icons";import{flexRender as a}from"@tanstack/react-table";import*as t from"react";import{Flex as l}from"../flex/Flex.js";import{Icon as d}from"../icon/Icon.js";import{Table as p}from"../table/Table.js";import{useDataTable as f}from"./DataTableContext.js";const g={asc:s,desc:m},u=({direction:e})=>t.createElement(d,{is:g[e],size:"sm",css:{position:"absolute",left:"$1"}}),b=({header:e,children:S,css:i,...c})=>{const r=e.column.getIsSorted(),{isSortable:o}=f(),n=e.column.getCanSort();return t.createElement(p.HeaderCell,{onClick:o&&n?e.column.getToggleSortingHandler():void 0,css:{cursor:o&&n?"pointer":"initial",...i},...c},t.createElement(l,{css:{alignItems:"center"}},a(e.column.columnDef.header,e.getContext()),r&&o&&t.createElement(l,{css:{position:"relative",alignItems:"center"}},t.createElement(u,{direction:r}))))};export{b as DataTableHeaderCell};
 //# sourceMappingURL=DataTableHeaderCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { SortDown, SortUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n}\n\nconst sortIcons = {\n  asc: SortUp,\n  desc: SortDown\n}\n\nconst SortIcon: React.FC<{ direction: 'asc' | 'desc' }> = ({ direction }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    css={{ position: 'absolute', left: '$1' }}\n  />\n)\n\nexport const DataTableHeaderCell: React.FC<DataTableHeaderProps> = ({\n  header,\n  children,\n  css,\n  ...props\n}) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  return (\n    <Table.HeaderCell\n      onClick={\n        isSortableTable && isDataColumn\n          ? header.column.getToggleSortingHandler()\n          : undefined\n      }\n      css={{\n        cursor: isSortableTable && isDataColumn ? 'pointer' : 'initial',\n        ...css\n      }}\n      {...props}\n    >\n      <Flex css={{ alignItems: 'center' }}>\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex css={{ position: 'relative', alignItems: 'center' }}>\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n      </Flex>\n    </Table.HeaderCell>\n  )\n}\n"],"names":["sortIcons","SortUp","SortDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","Table","Flex","flexRender"],"mappings":"oTAaA,MAAMA,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAoD,CAAC,CAAE,UAAAC,CAAU,IACrEC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,IAAK,CAC1C,CAAA,EAGWG,EAAsD,CAAC,CAClE,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAAM,CACJ,MAAMC,EAAgBJ,EAAO,OAAO,YAC9B,EAAA,CAAE,WAAYK,CAAgB,EAAIC,EAAa,EAE/CC,EAAeP,EAAO,OAAO,WAAW,EAE9C,OACEH,EAAA,cAACW,EAAM,WAAN,CACC,QACEH,GAAmBE,EACfP,EAAO,OAAO,0BACd,OAEN,IAAK,CACH,OAAQK,GAAmBE,EAAe,UAAY,UACtD,GAAGL,CACL,EACC,GAAGC,GAEJN,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,WAAY,QAAS,CAAA,EAC/BC,EAAWV,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAW,CAAC,EAC9DI,GAAiBC,GAChBR,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,SAAU,WAAY,WAAY,QAAS,CACtDZ,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWS,CAAAA,CAAe,CACtC,CAEJ,CACF,CAEJ"}
+{"version":3,"file":"DataTableHeaderCell.js","sources":["../../../src/components/data-table/DataTableHeaderCell.tsx"],"sourcesContent":["import { SortDown, SortUp } from '@atom-learning/icons'\nimport type { Header } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { Table } from '../table'\nimport { useDataTable } from './DataTableContext'\ntype DataTableHeaderProps = React.ComponentProps<typeof Table.HeaderCell> & {\n  header: Header<Record<string, unknown>, unknown>\n}\n\nconst sortIcons = {\n  asc: SortUp,\n  desc: SortDown\n}\n\nconst SortIcon = ({ direction }: { direction: 'asc' | 'desc' }) => (\n  <Icon\n    is={sortIcons[direction]}\n    size=\"sm\"\n    css={{ position: 'absolute', left: '$1' }}\n  />\n)\n\nexport const DataTableHeaderCell = ({\n  header,\n  children,\n  css,\n  ...props\n}: DataTableHeaderProps) => {\n  const sortDirection = header.column.getIsSorted()\n  const { isSortable: isSortableTable } = useDataTable()\n  // false for display columns, e.g. \"Actions\"\n  const isDataColumn = header.column.getCanSort()\n\n  return (\n    <Table.HeaderCell\n      onClick={\n        isSortableTable && isDataColumn\n          ? header.column.getToggleSortingHandler()\n          : undefined\n      }\n      css={{\n        cursor: isSortableTable && isDataColumn ? 'pointer' : 'initial',\n        ...css\n      }}\n      {...props}\n    >\n      <Flex css={{ alignItems: 'center' }}>\n        {flexRender(header.column.columnDef.header, header.getContext())}\n        {sortDirection && isSortableTable && (\n          <Flex css={{ position: 'relative', alignItems: 'center' }}>\n            <SortIcon direction={sortDirection} />\n          </Flex>\n        )}\n      </Flex>\n    </Table.HeaderCell>\n  )\n}\n"],"names":["sortIcons","SortUp","SortDown","SortIcon","direction","React","Icon","DataTableHeaderCell","header","children","css","props","sortDirection","isSortableTable","useDataTable","isDataColumn","Table","Flex","flexRender"],"mappings":"oTAaA,MAAMA,EAAY,CAChB,IAAKC,EACL,KAAMC,CACR,EAEMC,EAAW,CAAC,CAAE,UAAAC,CAAU,IAC5BC,EAAA,cAACC,EAAA,CACC,GAAIN,EAAUI,GACd,KAAK,KACL,IAAK,CAAE,SAAU,WAAY,KAAM,IAAK,CAC1C,CAAA,EAGWG,EAAsB,CAAC,CAClC,OAAAC,EACA,SAAAC,EACA,IAAAC,KACGC,CACL,IAA4B,CAC1B,MAAMC,EAAgBJ,EAAO,OAAO,YAC9B,EAAA,CAAE,WAAYK,CAAgB,EAAIC,EAAa,EAE/CC,EAAeP,EAAO,OAAO,WAAW,EAE9C,OACEH,EAAA,cAACW,EAAM,WAAN,CACC,QACEH,GAAmBE,EACfP,EAAO,OAAO,0BACd,OAEN,IAAK,CACH,OAAQK,GAAmBE,EAAe,UAAY,UACtD,GAAGL,CACL,EACC,GAAGC,GAEJN,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,WAAY,QAAS,CAAA,EAC/BC,EAAWV,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAW,CAAC,EAC9DI,GAAiBC,GAChBR,EAAA,cAACY,EAAA,CAAK,IAAK,CAAE,SAAU,WAAY,WAAY,QAAS,CACtDZ,EAAAA,EAAA,cAACF,EAAA,CAAS,UAAWS,CAAAA,CAAe,CACtC,CAEJ,CACF,CAEJ"}

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-declare const PendingState: import("@stitches/react/types/styled-component").StyledComponent<React.FC<{
+declare const PendingState: import("@stitches/react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
     message?: string | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     css?: import("../../stitches").CSS | undefined;
-}>, {}, {
+}) => JSX.Element, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -334,5 +334,5 @@ declare const PendingState: import("@stitches/react/types/styled-component").Sty
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-export declare const DataTableLoading: React.FC<React.ComponentProps<typeof PendingState>>;
+export declare const DataTableLoading: (props: React.ComponentProps<typeof PendingState>) => JSX.Element | null;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableLoading.js","sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Loader } from '../loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  transform: 'translate(-50%, -50%)',\n  zIndex: 1\n})\n\nexport const DataTableLoading: React.FC<\n  React.ComponentProps<typeof PendingState>\n> = (props) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"names":["PendingState","styled","Loader","DataTableLoading","props","asyncDataState","useDataTable","AsyncDataState","React"],"mappings":"2NAQA,MAAMA,EAAeC,EAAOC,EAAQ,CAClC,SAAU,WACV,KAAM,MACN,IAAK,MACL,UAAW,wBACX,OAAQ,CACV,CAAC,EAEYC,EAERC,GAAU,CACb,KAAM,CAAE,eAAAC,CAAe,EAAIC,EAAAA,EAE3B,OAAID,IAAmBE,EAAe,QAAgB,KAE/CC,EAAA,cAACR,EAAA,CAAc,GAAGI,CAAAA,CAAO,CAClC"}
+{"version":3,"file":"DataTableLoading.js","sources":["../../../src/components/data-table/DataTableLoading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Loader } from '../loader'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\n\nconst PendingState = styled(Loader, {\n  position: 'absolute',\n  left: '50%',\n  top: '50%',\n  transform: 'translate(-50%, -50%)',\n  zIndex: 1\n})\n\nexport const DataTableLoading = (\n  props: React.ComponentProps<typeof PendingState>\n) => {\n  const { asyncDataState } = useDataTable()\n\n  if (asyncDataState !== AsyncDataState.PENDING) return null\n\n  return <PendingState {...props} />\n}\n"],"names":["PendingState","styled","Loader","DataTableLoading","props","asyncDataState","useDataTable","AsyncDataState","React"],"mappings":"2NAQA,MAAMA,EAAeC,EAAOC,EAAQ,CAClC,SAAU,WACV,KAAM,MACN,IAAK,MACL,UAAW,wBACX,OAAQ,CACV,CAAC,EAEYC,EACXC,GACG,CACH,KAAM,CAAE,eAAAC,CAAe,EAAIC,EAAAA,EAE3B,OAAID,IAAmBE,EAAe,QAAgB,KAE/CC,EAAA,cAACR,EAAA,CAAc,GAAGI,CAAAA,CAAO,CAClC"}

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

@@ -1,14 +1,17 @@
+/// <reference types="react" />
 import { CSS } from '@stitches/react';
-import * as React from 'react';
-interface IDataTableMetaDataProps {
+export declare const DataTableMetaData: ({ copy, css }: {
     copy?: {
-        sorted_by?: string;
-        ascending?: string;
-        descending?: string;
-        separator?: string;
-    };
-    sortLabel?: string;
-    css?: CSS;
-}
-export declare const DataTableMetaData: React.FC<IDataTableMetaDataProps>;
-export {};
+        sorted_by?: string | undefined;
+        ascending?: string | undefined;
+        descending?: string | undefined;
+        separator?: string | undefined;
+    } | undefined;
+    sortLabel?: string | undefined;
+    css?: CSS<{
+        media: {};
+        theme: {};
+        themeMap: {};
+        utils: {};
+    }> | undefined;
+}) => JSX.Element;

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

@@ -1,2 +1,2 @@
-import*as f from"react";import{Text as h}from"../text/Text.js";import{useDataTable as v}from"./DataTableContext.js";import"./DataTable.js";const S={sorted_by:"Sorted by",ascending:"ascending",descending:"descending",separator:"-"},T=({copy:i,css:c})=>{var o,s;const{getState:l,columns:g,getRowModel:m,rowSelection:p}=v(),{sorting:r}=l(),$=r.length>0,a=(s=(o=m())==null?void 0:o.rows)==null?void 0:s.length,n=Object.keys(p||{}).length,t={...S,...i},b=e=>{const d=g.find(y=>y.id===e);return(d==null?void 0:d.header)||e},u=e=>`${t.separator} ${t.sorted_by} ${b(e[0].id)} ${e[0].desc?t.descending:t.ascending}`;return f.createElement(h,{css:{fontWeight:600,...c}},`${n||a} ${(n||a)===1?"item":"items"} ${n?"selected":""} ${$?u(r):""}`)};export{T as DataTableMetaData};
+import*as f from"react";import{Text as h}from"../text/Text.js";import{useDataTable as v}from"./DataTableContext.js";import"./DataTable.js";const w={sorted_by:"Sorted by",ascending:"ascending",descending:"descending",separator:"-"},S=({copy:a,css:c})=>{var o,s;const{getState:l,columns:g,getRowModel:m,rowSelection:p}=v(),{sorting:r}=l(),$=r.length>0,d=(s=(o=m())==null?void 0:o.rows)==null?void 0:s.length,n=Object.keys(p||{}).length,t={...w,...a},b=e=>{const i=g.find(y=>y.id===e);return(i==null?void 0:i.header)||e},u=e=>`${t.separator} ${t.sorted_by} ${b(e[0].id)} ${e[0].desc?t.descending:t.ascending}`;return f.createElement(h,{css:{fontWeight:600,...c}},`${n||d} ${(n||d)===1?"item":"items"} ${n?"selected":""} ${$?u(r):""}`)};export{S as DataTableMetaData};
 //# sourceMappingURL=DataTableMetaData.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import { CSS } from '@stitches/react'\nimport * as React from 'react'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\ninterface IDataTableMetaDataProps {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n  css?: CSS\n}\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData: React.FC<IDataTableMetaDataProps> = ({\n  copy,\n  css\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text css={{ fontWeight: 600, ...css }}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","css","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"2IAiBA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAuD,CAAC,CACnE,KAAAC,EACA,IAAAC,CACF,IAAM,CA3BN,IAAAC,EAAAC,EA4BE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,IACnD,CAAE,QAAAC,CAAQ,EAAIL,EACdM,EAAAA,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,MAAA,KAAAJ,OAAAA,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,EAAE,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBT,GACjB,GAAGI,EAAW,aACnBA,EAAW,aACTC,EAAqBL,EAAQ,GAAG,EAAE,KACpCA,EAAQ,GAAG,KAAOI,EAAW,WAAaA,EAAW,YAIzD,OACEM,EAAA,cAACC,EAAA,CAAK,IAAK,CAAE,WAAY,IAAK,GAAGnB,CAAI,CAAA,EAAI,GAAGW,GAAgBD,MACzDC,GAAgBD,KAAe,EAAI,OAAS,WAC3CC,EAAe,WAAa,MAC9BF,EAAWQ,EAAiBT,CAAO,EAAI,IACtC,CAEP"}
+{"version":3,"file":"DataTableMetaData.js","sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import { CSS } from '@stitches/react'\nimport * as React from 'react'\n\nimport { Text } from '../text'\nimport { useDataTable } from './index'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  css\n}: {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\n  css?: CSS\n}) => {\n  const { getState, columns, getRowModel, rowSelection } = useDataTable()\n  const { sorting } = getState()\n  const isSorted = sorting.length > 0\n\n  const totalRows = getRowModel()?.rows?.length\n\n  const selectedRows = Object.keys(rowSelection || {}).length\n\n  const copyMerged = { ...defaultCopy, ...copy }\n\n  const getColumnDisplayName = (id: string) => {\n    const sortedColumn = columns.find((col) => col.id === id)\n    return sortedColumn?.header || id\n  }\n\n  const getSortingString = (sorting) => {\n    return `${copyMerged.separator} ${\n      copyMerged.sorted_by\n    } ${getColumnDisplayName(sorting[0].id)} ${\n      sorting[0].desc ? copyMerged.descending : copyMerged.ascending\n    }`\n  }\n\n  return (\n    <Text css={{ fontWeight: 600, ...css }}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"names":["defaultCopy","DataTableMetaData","copy","css","_a","_b","getState","columns","getRowModel","rowSelection","useDataTable","sorting","isSorted","totalRows","selectedRows","copyMerged","getColumnDisplayName","id","sortedColumn","col","getSortingString","React","Text"],"mappings":"2IAMA,MAAMA,EAAc,CAClB,UAAW,YACX,UAAW,YACX,WAAY,aACZ,UAAW,GACb,EAEaC,EAAoB,CAAC,CAChC,KAAAC,EACA,IAAAC,CACF,IASM,CAzBN,IAAAC,EAAAC,EA0BE,KAAM,CAAE,SAAAC,EAAU,QAAAC,EAAS,YAAAC,EAAa,aAAAC,CAAa,EAAIC,IACnD,CAAE,QAAAC,CAAQ,EAAIL,EACdM,EAAAA,EAAWD,EAAQ,OAAS,EAE5BE,GAAYR,GAAAD,EAAAI,MAAA,KAAAJ,OAAAA,EAAe,OAAf,KAAA,OAAAC,EAAqB,OAEjCS,EAAe,OAAO,KAAKL,GAAgB,EAAE,EAAE,OAE/CM,EAAa,CAAE,GAAGf,EAAa,GAAGE,CAAK,EAEvCc,EAAwBC,GAAe,CAC3C,MAAMC,EAAeX,EAAQ,KAAMY,GAAQA,EAAI,KAAOF,CAAE,EACxD,OAAOC,GAAA,KAAAA,OAAAA,EAAc,SAAUD,CACjC,EAEMG,EAAoBT,GACjB,GAAGI,EAAW,aACnBA,EAAW,aACTC,EAAqBL,EAAQ,GAAG,EAAE,KACpCA,EAAQ,GAAG,KAAOI,EAAW,WAAaA,EAAW,YAIzD,OACEM,EAAA,cAACC,EAAA,CAAK,IAAK,CAAE,WAAY,IAAK,GAAGnB,CAAI,CAAA,EAAI,GAAGW,GAAgBD,MACzDC,GAAgBD,KAAe,EAAI,OAAS,WAC3CC,EAAe,WAAa,MAC9BF,EAAWQ,EAAiBT,CAAO,EAAI,IACtC,CAEP"}

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

@@ -4,4 +4,4 @@ import { Table } from '../table';
 export declare type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {
     row: Row<Record<string, unknown>>;
 };
-export declare const DataTableRow: React.FC<DataTableRowProps>;
+export declare const DataTableRow: ({ row }: DataTableRowProps) => JSX.Element;

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}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n        bg: '$primary100 !important'\n      }\n    }\n  }\n})\n\nexport const DataTableRow: React.FC<DataTableRowProps> = ({ row }) => {\n  const { enableRowSelection, getCanSomeRowsExpand } = useDataTable()\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  return (\n    <StyledRow isSelected={row.getIsSelected()}>\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","DataTableRow","row","enableRowSelection","getCanSomeRowsExpand","useDataTable","toggleExpandHandler","toggleSelectHandler","getCheckedState","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAgBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CAEJ,GAAI,wBACN,CACF,CACF,CACF,CAAC,EAEYC,EAA4C,CAAC,CAAE,IAAAC,CAAI,IAAM,CACpE,KAAM,CAAE,mBAAAC,EAAoB,qBAAAC,CAAqB,EAAIC,EAAa,EAE5DC,EAAsBJ,EAAI,2BAC1BK,EAAsBL,EAAI,yBAE1BM,EAAAA,EAAkB,IAClBN,EAAI,oBAA4B,gBAC7BA,EAAI,gBAGb,OACEO,EAAA,cAACX,EAAA,CAAU,WAAYI,EAAI,cAAc,CAAA,EACtCE,EACCK,GAAAA,EAAA,cAACT,EAAM,KAAN,CACC,cAAa,eAAeE,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASI,CAERJ,EAAAA,EAAI,aACHO,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIR,EAAI,gBAAkBS,EAAcC,CAAAA,CAAc,CAEhE,EAGDT,GACCM,EAAA,cAACT,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAC7BS,EAAAA,EAAA,cAACI,EAAA,CACC,IAAKX,EACL,QAASM,EACT,EAAA,gBAAiBD,CACnB,CAAA,CACF,EAEDL,EAAI,kBAAkB,IAAI,CAACY,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}\n\nconst StyledRow = styled(Table.Row, {\n  bg: 'initial',\n  variants: {\n    isSelected: {\n      true: {\n        // the !important rule is needed because the bg property is set elsewhere and it's more specific than this one would be without the !important modifier.\n        bg: '$primary100 !important'\n      }\n    }\n  }\n})\n\nexport const DataTableRow = ({ row }: DataTableRowProps) => {\n  const { enableRowSelection, getCanSomeRowsExpand } = useDataTable()\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  return (\n    <StyledRow isSelected={row.getIsSelected()}>\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","DataTableRow","row","enableRowSelection","getCanSomeRowsExpand","useDataTable","toggleExpandHandler","toggleSelectHandler","getCheckedState","React","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","i","DataTableDataCell"],"mappings":"4ZAgBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,GAAI,UACJ,SAAU,CACR,WAAY,CACV,KAAM,CAEJ,GAAI,wBACN,CACF,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,IAAAC,CAAI,IAAyB,CAC1D,KAAM,CAAE,mBAAAC,EAAoB,qBAAAC,CAAqB,EAAIC,EAAa,EAE5DC,EAAsBJ,EAAI,2BAC1BK,EAAsBL,EAAI,yBAE1BM,EAAAA,EAAkB,IAClBN,EAAI,oBAA4B,gBAC7BA,EAAI,gBAGb,OACEO,EAAA,cAACX,EAAA,CAAU,WAAYI,EAAI,cAAc,CAAA,EACtCE,EACCK,GAAAA,EAAA,cAACT,EAAM,KAAN,CACC,cAAa,eAAeE,EAAI,KAChC,IAAK,CAAE,MAAO,KAAM,OAAQA,EAAI,aAAa,EAAI,UAAY,MAAO,EACpE,QAASI,CAERJ,EAAAA,EAAI,aACHO,GAAAA,EAAA,cAACC,EAAA,CAAK,GAAIR,EAAI,gBAAkBS,EAAcC,CAAAA,CAAc,CAEhE,EAGDT,GACCM,EAAA,cAACT,EAAM,KAAN,CAAW,IAAK,CAAE,MAAO,IAAK,CAC7BS,EAAAA,EAAA,cAACI,EAAA,CACC,IAAKX,EACL,QAASM,EACT,EAAA,gBAAiBD,CACnB,CAAA,CACF,EAEDL,EAAI,kBAAkB,IAAI,CAACY,EAAMC,IACzBN,EAAA,cAACO,EAAA,CAAkB,IAAKF,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}

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

@@ -1,10 +1,8 @@
 import type { Row } from '@tanstack/react-table';
 import * as React from 'react';
-interface DataTableRowSelectionCheckboxProps {
+export declare const DataTableRowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: {
     row: Row<Record<string, unknown>>;
     checked: boolean | 'indeterminate';
     onCheckedChange: (value: boolean) => void;
-    label?: string;
-}
-export declare const DataTableRowSelectionCheckbox: ({ row, checked, onCheckedChange, label }: DataTableRowSelectionCheckboxProps) => React.ReactElement;
-export {};
+    label?: string | undefined;
+}) => React.ReactElement;

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\ninterface DataTableRowSelectionCheckboxProps {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: DataTableRowSelectionCheckboxProps): 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        css={{ ml: row.depth ? `$${row.depth * 2}` : 0 }}\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":"4NAea,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,cACrB,IAA8D,CAC5D,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAAA,EAEpB,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,cAAiBG,EAAAA,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,IAAK,CAAE,GAAIT,EAAI,MAAQ,IAAIA,EAAI,MAAQ,IAAM,CAAE,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        css={{ ml: row.depth ? `$${row.depth * 2}` : 0 }}\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,EAAAA,EAEpB,OACEC,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,SAAeJ,EAAI,cAAiBG,EAAAA,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,IAAK,CAAE,GAAIT,EAAI,MAAQ,IAAIA,EAAI,MAAQ,IAAM,CAAE,EAC/C,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,SAAeJ,EAAI,eAC5B,SAAU,CAACA,EAAI,aACjB,CAAA,CAAA,CACF,CAEJ"}

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

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-interface DataTableSelectAllRowsCheckboxProps {
-    label?: string;
-}
-export declare const DataTableSelectAllRowsCheckbox: ({ label }: DataTableSelectAllRowsCheckboxProps) => JSX.Element;
-export {};
+export declare const DataTableSelectAllRowsCheckbox: ({ label }: {
+    label?: string | undefined;
+}) => JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\ninterface DataTableSelectAllRowsCheckboxProps {\n  label?: string\n}\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: DataTableSelectAllRowsCheckboxProps) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAWa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAA2C,CACzC,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAkB,IAClBJ,EAA0B,EAAU,gBACpC,CAAAD,CAAAA,EAAAA,EAIAM,EAAqB,IACrBL,EACKC,EAAAA,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,EAAyB,CAAC,EAG9D,OACEO,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,sBAAAA,EAA+BJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,QAASL,IACT,gBAAiBC,EACjB,KAAM,GAAGH,oBAAAA,CACX,CACF,CAEJ"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox'\nimport { Label } from '../label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableSelectAllRowsCheckbox = ({\n  label = 'All rows selection'\n}: {\n  label?: string\n}) => {\n  const {\n    getIsAllPageRowsSelected,\n    getIsSomePageRowsSelected,\n    toggleAllPageRowsSelected,\n    tableId\n  } = useDataTable()\n\n  const getCheckedState = () => {\n    if (getIsSomePageRowsSelected()) return 'indeterminate'\n    if (getIsAllPageRowsSelected()) return true\n    return false\n  }\n\n  const updateCheckedState = () => {\n    if (getIsSomePageRowsSelected()) {\n      return toggleAllPageRowsSelected(false)\n    }\n    return toggleAllPageRowsSelected(!getIsAllPageRowsSelected())\n  }\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAOa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAEM,CACJ,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,EAEEC,EAAAA,EAAkB,IAClBJ,EAA0B,EAAU,gBACpC,CAAAD,CAAAA,EAAAA,EAIAM,EAAqB,IACrBL,EACKC,EAAAA,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,EAAyB,CAAC,EAG9D,OACEO,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,sBAAAA,EAA+BJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,QAASL,IACT,gBAAiBC,EACjB,KAAM,GAAGH,oBAAAA,CACX,CACF,CAEJ"}

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { CSS } from '../../stitches';
 import { Table } from '../table';
-import { DataTable } from './DataTable';
-export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTable.Head>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>> & {
+import { TableBody } from '../table/TableBody';
+import { DataTableHead } from './DataTableHead';
+export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'children' | 'numberOfStickyColumns'> & Partial<Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>> & Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {
     scrollOptions?: {
         hasStickyHeader?: boolean;
         headerCss?: CSS;
@@ -10,4 +11,4 @@ export declare type DataTableTableProps = Omit<React.ComponentProps<typeof Table
         scrollContainerCss?: CSS;
     };
 };
-export declare const DataTableTable: React.FC<DataTableTableProps>;
+export declare const DataTableTable: ({ sortable, striped, theme, css, scrollOptions, ...props }: DataTableTableProps) => JSX.Element | null;

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 { DataTable } from './DataTable'\nimport { AsyncDataState } from './DataTable.types'\nimport { useDataTable } from './DataTableContext'\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 DataTable.Head>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof Table.Body>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable: React.FC<DataTableTableProps> = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\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          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRA0Ba,MAAAA,EAAgD,CAAC,CAC5D,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAChDC,EAAYH,IAAmBI,EAAe,QAGpD,MAFgB,CAACD,GAAaF,EAAa,IAAM,EAE7B,KAGlBI,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGR,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAE,EAAA,cAACG,EAAU,KAAV,CACC,MAAOZ,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAO,EAAA,cAACG,EAAU,KAAV,CAAe,QAASb,CAAS,CAAA,CACpC,CACF,CAEJ"}
+{"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      headerCss?: CSS\n      numberOfStickyColumns?: number\n      scrollContainerCss?: CSS\n    }\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme,\n  css,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    hasStickyHeader: false\n  },\n  ...props\n}: DataTableTableProps) => {\n  const { asyncDataState, getTotalRows } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  return (\n    <>\n      <DataTableLoading />\n\n      <Table\n        {...props}\n        numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n        scrollContainerCss={scrollOptions.scrollContainerCss}\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          css={scrollOptions.headerCss}\n        />\n        <DataTable.Body striped={striped} />\n      </Table>\n    </>\n  )\n}\n"],"names":["DataTableTable","sortable","striped","theme","css","scrollOptions","props","asyncDataState","getTotalRows","useDataTable","isPending","AsyncDataState","React","DataTableLoading","Table","DataTable"],"mappings":"iRA4Ba,MAAAA,EAAiB,CAAC,CAC7B,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,EACA,cAAAC,EAAgB,CACd,sBAAuB,EACvB,gBAAiB,EACnB,KACGC,CACL,IAA2B,CACzB,KAAM,CAAE,eAAAC,EAAgB,aAAAC,CAAa,EAAIC,EAAa,EAChDC,EAAYH,IAAmBI,EAAe,QAGpD,MAFgB,CAACD,GAAaF,EAAa,IAAM,EAE7B,KAGlBI,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACC,EAAA,IAAiB,EAElBD,EAAA,cAACE,EAAA,CACE,GAAGR,EACJ,sBAAuBD,EAAc,sBACrC,mBAAoBA,EAAc,mBAClC,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAE,EAAA,cAACG,EAAU,KAAV,CACC,MAAOZ,EACP,SAAUF,EACV,SAAUI,EAAc,gBACxB,IAAKA,EAAc,SACrB,CAAA,EACAO,EAAA,cAACG,EAAU,KAAV,CAAe,QAASb,CAAS,CAAA,CACpC,CACF,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTable.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import { TAsyncDataResult } from '../DataTable.types';
 import type { DataTableTableProps } from '../DataTableTable';
 declare type DragAndDropTableProps = DataTableTableProps & {
@@ -9,5 +9,5 @@ declare type DragAndDropTableProps = DataTableTableProps & {
         newData: TAsyncDataResult;
     }) => void;
 };
-export declare const DragAndDropTable: React.FC<DragAndDropTableProps>;
+export declare const DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, css, ...props }: DragAndDropTableProps) => JSX.Element;
 export {};

package/dist/components/data-table/drag-and-drop/DragAndDropTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Sortable } from '../../sortable'\nimport { Table } from '../../table'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable: React.FC<DragAndDropTableProps> = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  css,\n  ...props\n}) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\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 theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","css","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","DataTable","DragAndDropTableBody"],"mappings":"gcAqBaA,EAAoD,CAAC,CAChE,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,KACGC,CACL,IAAM,CACJ,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,EAAa,EACjDC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,EACZ,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,CAChD,CAAA,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,CAC1DC,EAAAA,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAG,EAAA,cAACW,EAAU,KAAV,CAAe,MAAOrB,EAAO,SAAUF,CAAAA,CAAU,EAClDY,EAAA,cAACY,EAAA,CAAqB,QAASvB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}
+{"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { Sortable } from '../../sortable'\nimport { Table } from '../../table'\nimport { DataTable } from '../DataTable'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  idColumn?: string\n  onDragAndDrop?: (onDragAndDropData: {\n    oldIndex: number\n    newIndex: number\n    newData: TAsyncDataResult\n  }) => void\n}\n\nexport const DragAndDropTable = ({\n  idColumn = 'id',\n  onDragAndDrop,\n  sortable,\n  striped,\n  theme,\n  css,\n  ...props\n}: DragAndDropTableProps) => {\n  const { asyncDataState, data, setData } = useDataTable()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n\n  const rowIds = React.useMemo(\n    () =>\n      data.results.map((row) => {\n        return row[idColumn] as React.ReactText\n      }),\n    [data]\n  )\n  const handleSortChange = React.useCallback(\n    ({ oldIndex, newIndex }) => {\n      const sortedResults = arrayMove(data.results, oldIndex, newIndex)\n      const newData = { results: sortedResults, total: data.total }\n      setData({ results: sortedResults, total: data.total })\n      onDragAndDrop?.({ oldIndex, newIndex, newData })\n    },\n    [data, onDragAndDrop]\n  )\n\n  return (\n    <Sortable.Root onSortChange={handleSortChange} sortableIds={rowIds}>\n      <DataTableLoading />\n      <Table\n        {...props}\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 theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","css","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","DataTable","DragAndDropTableBody"],"mappings":"gcAqBaA,EAAmB,CAAC,CAC/B,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,IAAAC,KACGC,CACL,IAA6B,CAC3B,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,EAAa,EACjDC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,EACZ,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,CAChD,CAAA,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAS,KAAT,CAAc,aAAcN,EAAkB,YAAaH,CAC1DC,EAAAA,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,IAAK,CACH,GAAGD,EACH,GAAIM,GAAa,CACf,QAAS,GACT,cAAe,OACf,WAAY,4BACd,CACF,CAAA,EAEAG,EAAA,cAACW,EAAU,KAAV,CAAe,MAAOrB,EAAO,SAAUF,CAAAA,CAAU,EAClDY,EAAA,cAACY,EAAA,CAAqB,QAASvB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}

package/dist/components/data-table/drag-and-drop/DragAndDropTableBody.d.ts

@@ -3,5 +3,5 @@ import { Table } from '../../table';
 declare type DataTableBodyProps = Omit<React.ComponentProps<typeof Table.Body>, 'children'> & {
     idColumn?: string;
 };
-export declare const DragAndDropTableBody: React.FC<DataTableBodyProps>;
+export declare const DragAndDropTableBody: ({ striped, idColumn, ...props }: DataTableBodyProps) => JSX.Element;
 export {};