@atom-learning/components 7.0.0 → 8.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\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 weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"mappings":";;;;AAKA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ;AAED,IAAa,qBAAqB,EAChC,MACA,GAAG,WASC;CACJ,MAAM,EAAE,UAAU,SAAS,aAAa,iBAAiB,cAAc;CACvE,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,WAAW,QAAQ,SAAS;CAElC,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,eAAe,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;CAErD,MAAM,aAAa;EAAE,GAAG;EAAa,GAAG;EAAM;CAE9C,MAAM,wBAAwB,OAAe;AAE3C,SADqB,QAAQ,MAAM,QAAQ,IAAI,OAAO,GAAG,EACpC,UAAU;;CAGjC,MAAM,oBAAoB,YAAY;AACpC,SAAO,GAAG,WAAW,UAAU,GAC7B,WAAW,UACZ,GAAG,qBAAqB,QAAQ,GAAG,GAAG,CAAC,GACtC,QAAQ,GAAG,OAAO,WAAW,aAAa,WAAW;;AAIzD,QACE,wBAAA,cAAC,MAAD;EAAM,QAAO;EAAO,GAAI;EAId,EAJqB,GAAG,gBAAgB,UAAU,IACzD,gBAAgB,eAAe,IAAI,SAAS,QAC9C,GAAG,eAAe,aAAa,GAAG,GACjC,WAAW,iBAAiB,QAAQ,GAAG,KAC/B"}
+{"version":3,"file":"DataTableMetaData.js","names":[],"sources":["../../../src/components/data-table/DataTableMetaData.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\nimport { useDataTable } from './DataTableContext'\n\nconst defaultCopy = {\n  sorted_by: 'Sorted by',\n  ascending: 'ascending',\n  descending: 'descending',\n  separator: '-'\n}\n\nexport const DataTableMetaData = ({\n  copy,\n  ...rest\n}: React.ComponentProps<typeof Text> & {\n  copy?: {\n    sorted_by?: string\n    ascending?: string\n    descending?: string\n    separator?: string\n  }\n  sortLabel?: string\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 weight=\"bold\" {...rest}>{`${selectedRows || totalRows} ${\n      (selectedRows || totalRows) === 1 ? 'item' : 'items'\n    } ${selectedRows ? 'selected' : ''} ${\n      isSorted ? getSortingString(sorting) : ''\n    }`}</Text>\n  )\n}\n"],"mappings":";;;;;AAKA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,YAAY;CACZ,WAAW;CACZ;AAED,IAAa,qBAAqB,EAChC,MACA,GAAG,WASC;CACJ,MAAM,EAAE,UAAU,SAAS,aAAa,iBAAiB,cAAc;CACvE,MAAM,EAAE,YAAY,UAAU;CAC9B,MAAM,WAAW,QAAQ,SAAS;CAElC,MAAM,YAAY,aAAa,EAAE,MAAM;CAEvC,MAAM,eAAe,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC;CAErD,MAAM,aAAa;EAAE,GAAG;EAAa,GAAG;EAAM;CAE9C,MAAM,wBAAwB,OAAe;AAE3C,SADqB,QAAQ,MAAM,QAAQ,IAAI,OAAO,GAAG,EACpC,UAAU;;CAGjC,MAAM,oBAAoB,YAAY;AACpC,SAAO,GAAG,WAAW,UAAU,GAC7B,WAAW,UACZ,GAAG,qBAAqB,QAAQ,GAAG,GAAG,CAAC,GACtC,QAAQ,GAAG,OAAO,WAAW,aAAa,WAAW;;AAIzD,QACE,oBAAC,MAAD;EAAM,QAAO;EAAO,GAAI;YAAO,GAAG,gBAAgB,UAAU,IACzD,gBAAgB,eAAe,IAAI,SAAS,QAC9C,GAAG,eAAe,aAAa,GAAG,GACjC,WAAW,iBAAiB,QAAQ,GAAG;EAC/B,CAAA"}

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

@@ -4,7 +4,8 @@ import { Table } from "../table/Table.js";
 import { useDataTable } from "./DataTableContext.js";
 import { DataTableDataCell } from "./DataTableDataCell.js";
 import { DataTableRowSelectionCheckbox } from "./DataTableRowSelectionCheckbox.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight } from "@atom-learning/icons";
 //#region src/components/data-table/DataTableRow.tsx
 var StyledRow = styled(Table.Row, {
@@ -66,7 +67,7 @@ var DataTableRow = ({ row, rowAction }) => {
 			if (previousRow && previousRow.tagName === "TR") previousRow.focus();
 		}
 	};
-	return /* @__PURE__ */ React$1.createElement(StyledRow, {
+	return /* @__PURE__ */ jsxs(StyledRow, {
 		isSelected: row.getIsSelected(),
 		isDisabled,
 		isFocusable: !!rowAction && !isDisabled,
@@ -75,21 +76,27 @@ var DataTableRow = ({ row, rowAction }) => {
 			tabIndex: 0,
 			className: "cursor-pointer",
 			onKeyDown: handleKeyDown
-		}
-	}, getCanSomeRowsExpand() && /* @__PURE__ */ React$1.createElement(Table.Cell, {
-		"data-testid": `expand-icon-${row.id}`,
-		onClick: toggleExpandHandler,
-		className: cn("w-10", row.getCanExpand() ? "cursor-pointer" : "cursor-auto")
-	}, row.getCanExpand() && /* @__PURE__ */ React$1.createElement(Icon, { is: row.getIsExpanded() ? ChevronDown : ChevronRight })), enableRowSelection && /* @__PURE__ */ React$1.createElement(Table.Cell, { className: "w-10" }, /* @__PURE__ */ React$1.createElement(DataTableRowSelectionCheckbox, {
-		row,
-		checked: getCheckedState(),
-		onCheckedChange: toggleSelectHandler
-	})), row.getVisibleCells().map((cell) => {
-		return /* @__PURE__ */ React$1.createElement(DataTableDataCell, {
-			key: cell.id,
-			cell
-		});
-	}));
+		},
+		children: [
+			getCanSomeRowsExpand() && /* @__PURE__ */ jsx(Table.Cell, {
+				"data-testid": `expand-icon-${row.id}`,
+				onClick: toggleExpandHandler,
+				className: cn("w-10", row.getCanExpand() ? "cursor-pointer" : "cursor-auto"),
+				children: row.getCanExpand() && /* @__PURE__ */ jsx(Icon, { is: row.getIsExpanded() ? ChevronDown : ChevronRight })
+			}),
+			enableRowSelection && /* @__PURE__ */ jsx(Table.Cell, {
+				className: "w-10",
+				children: /* @__PURE__ */ jsx(DataTableRowSelectionCheckbox, {
+					row,
+					checked: getCheckedState(),
+					onCheckedChange: toggleSelectHandler
+				})
+			}),
+			row.getVisibleCells().map((cell) => {
+				return /* @__PURE__ */ jsx(DataTableDataCell, { cell }, cell.id);
+			})
+		]
+	});
 };
 //#endregion
 export { DataTableRow };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","names":[],"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 '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-100!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,WAAW;CAClC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,kBAAkB,EAC1B;EACD,YAAY,EACV,MAAM,CAAC,aAAa,EACrB;EACD,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACF,CAAC;AAEF,IAAM,wBAAwB,YAAqC;AACjE,KAAI,CAAC,QAAS,QAAO;AACrB,KAAI,QAAQ,QAAQ,qCAAqC,CAAE,QAAO;AAClE,KAAI,QAAQ,aAAa,OAAO,KAAK,SAAU,QAAO;AACtD,QAAO;;AAGT,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,cAAc;CAEhB,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,0BAA0B;CAC1D,MAAM,sBAAsB,IAAI,0BAA0B;CAE1D,MAAM,wBAAmD;AACvD,MAAI,IAAI,mBAAmB,CAAE,QAAO;AACpC,SAAO,IAAI,eAAe;;CAG5B,MAAM,kBACJ,SACA,UACG;AACH,MAAI,CAAC,UAAW;AAIhB,MAAI,CADgB,MAAM,OAAmB,QAAQ,KAAK,IACvC,qBAAqB,MAAM,OAAkB,CAC9D;AAGF,YAAU,QAAQ,UAAU,MAAM;;CAGpC,MAAM,iBAAiB,UAAoD;AACzE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,OAAI,qBAAqB,MAAM,OAAkB,CAC/C;AAEF,SAAM,gBAAgB;AACtB,kBACE,KACA,MACD;;AAEH,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;GAEtB,MAAM,UADc,MAAM,OAAuB,QAAQ,KAAK,EAClC;AAC5B,OAAI,WAAW,QAAQ,YAAY,KACjC,SAAQ,OAAO;;AAGnB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;GAEtB,MAAM,cADc,MAAM,OAAuB,QAAQ,KAAK,EAC9B;AAChC,OAAI,eAAe,YAAY,YAAY,KACzC,aAAY,OAAO;;;AAKzB,QACE,wBAAA,cAAC,WAAD;EACE,YAAY,IAAI,eAAe;EACnB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,MAAM;GAC9C,UAAU;GACV,WAAW;GACX,WAAW;GACZ;EA6BS,EA3BT,sBAAsB,IACrB,wBAAA,cAAC,MAAM,MAAP;EACE,eAAa,eAAe,IAAI;EAChC,SAAS;EACT,WAAW,GACT,QACA,IAAI,cAAc,GAAG,mBAAmB,cACzC;EAKU,EAHV,IAAI,cAAc,IACjB,wBAAA,cAAC,MAAD,EAAM,IAAI,IAAI,eAAe,GAAG,cAAc,cAAgB,CAAA,CAErD,EAGd,sBACC,wBAAA,cAAC,MAAM,MAAP,EAAY,WAAU,QAMT,EALX,wBAAA,cAAC,+BAAD;EACO;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,CAAA,CACS,EAEd,IAAI,iBAAiB,CAAC,KAAK,SAAS;AACnC,SAAO,wBAAA,cAAC,mBAAD;GAAmB,KAAK,KAAK;GAAU;GAAQ,CAAA;GACtD,CACQ"}
+{"version":3,"file":"DataTableRow.js","names":[],"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 '~/styled'\nimport { cn } from '~/styled'\n\nimport { Icon } from '../icon/Icon'\nimport { Table } from '../table/Table'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableDataCell } from './DataTableDataCell'\nimport { DataTableRowSelectionCheckbox } from './DataTableRowSelectionCheckbox'\n\nexport type DataTableRowProps = React.ComponentProps<typeof Table.Row> & {\n  row: Row<Record<string, unknown>>\n  rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n}\n\nconst StyledRow = styled(Table.Row, {\n  base: ['bg-[initial]', 'relative'],\n  variants: {\n    isSelected: {\n      true: ['bg-primary-100!']\n    },\n    isDisabled: {\n      true: ['opacity-30']\n    },\n    isFocusable: {\n      true: [\n        'translate-y-0',\n        'duration-200',\n        'ease-out',\n        'transition-shadow',\n        'transition-transform',\n        'hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]',\n        'hover:-translate-y-px',\n        'hover:z-3',\n        'focus:outline-2',\n        'focus:outline-primary-500',\n        'focus:outline-solid',\n        'focus:-outline-offset-4',\n        'focus:[&_td]:bg-transparent'\n      ]\n    }\n  }\n})\n\nconst isElementInteractive = (element: Element | null): boolean => {\n  if (!element) return false\n  if (element.closest('button, a, input, select, textarea')) return true\n  if (element.getAttribute('role') === 'button') return true\n  return false\n}\n\nexport const DataTableRow = ({ row, rowAction }: DataTableRowProps) => {\n  const { enableRowSelection, disabledRows, getCanSomeRowsExpand } =\n    useDataTable()\n\n  const isDisabled = !!disabledRows?.[row.id]\n\n  const toggleExpandHandler = row.getToggleExpandedHandler()\n  const toggleSelectHandler = row.getToggleSelectedHandler()\n\n  const getCheckedState = (): boolean | 'indeterminate' => {\n    if (row.getIsSomeSelected()) return 'indeterminate'\n    return row.getIsSelected()\n  }\n\n  const handleRowClick = (\n    rowData: Row<Record<string, unknown>>,\n    event: React.MouseEvent<HTMLTableRowElement>\n  ) => {\n    if (!rowAction) return\n\n    // Skip if clicking on an interactive element\n    const rowElement = (event.target as Element).closest('tr')\n    if (!rowElement || isElementInteractive(event.target as Element)) {\n      return\n    }\n\n    rowAction(rowData.original, event)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLTableRowElement>) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      if (isElementInteractive(event.target as Element)) {\n        return\n      }\n      event.preventDefault()\n      handleRowClick(\n        row,\n        event as unknown as React.MouseEvent<HTMLTableRowElement>\n      )\n    }\n    if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const nextRow = currentRow?.nextElementSibling as HTMLElement\n      if (nextRow && nextRow.tagName === 'TR') {\n        nextRow.focus()\n      }\n    }\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      const currentRow = (event.target as HTMLElement).closest('tr')\n      const previousRow = currentRow?.previousElementSibling as HTMLElement\n      if (previousRow && previousRow.tagName === 'TR') {\n        previousRow.focus()\n      }\n    }\n  }\n\n  return (\n    <StyledRow\n      isSelected={row.getIsSelected()}\n      isDisabled={isDisabled}\n      isFocusable={!!rowAction && !isDisabled}\n      {...(rowAction && {\n        onClick: (event) => handleRowClick(row, event),\n        tabIndex: 0,\n        className: 'cursor-pointer',\n        onKeyDown: handleKeyDown\n      })}\n    >\n      {getCanSomeRowsExpand() && (\n        <Table.Cell\n          data-testid={`expand-icon-${row.id}`}\n          onClick={toggleExpandHandler}\n          className={cn(\n            'w-10',\n            row.getCanExpand() ? 'cursor-pointer' : 'cursor-auto'\n          )}\n        >\n          {row.getCanExpand() && (\n            <Icon is={row.getIsExpanded() ? ChevronDown : ChevronRight} />\n          )}\n        </Table.Cell>\n      )}\n\n      {enableRowSelection && (\n        <Table.Cell className=\"w-10\">\n          <DataTableRowSelectionCheckbox\n            row={row}\n            checked={getCheckedState()}\n            onCheckedChange={toggleSelectHandler}\n          />\n        </Table.Cell>\n      )}\n      {row.getVisibleCells().map((cell) => {\n        return <DataTableDataCell key={cell.id} cell={cell} />\n      })}\n    </StyledRow>\n  )\n}\n"],"mappings":";;;;;;;;;;AAkBA,IAAM,YAAY,OAAO,MAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,WAAW;CAClC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,kBAAkB,EAC1B;EACD,YAAY,EACV,MAAM,CAAC,aAAa,EACrB;EACD,aAAa,EACX,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACF,CAAC;AAEF,IAAM,wBAAwB,YAAqC;AACjE,KAAI,CAAC,QAAS,QAAO;AACrB,KAAI,QAAQ,QAAQ,qCAAqC,CAAE,QAAO;AAClE,KAAI,QAAQ,aAAa,OAAO,KAAK,SAAU,QAAO;AACtD,QAAO;;AAGT,IAAa,gBAAgB,EAAE,KAAK,gBAAmC;CACrE,MAAM,EAAE,oBAAoB,cAAc,yBACxC,cAAc;CAEhB,MAAM,aAAa,CAAC,CAAC,eAAe,IAAI;CAExC,MAAM,sBAAsB,IAAI,0BAA0B;CAC1D,MAAM,sBAAsB,IAAI,0BAA0B;CAE1D,MAAM,wBAAmD;AACvD,MAAI,IAAI,mBAAmB,CAAE,QAAO;AACpC,SAAO,IAAI,eAAe;;CAG5B,MAAM,kBACJ,SACA,UACG;AACH,MAAI,CAAC,UAAW;AAIhB,MAAI,CADgB,MAAM,OAAmB,QAAQ,KAAK,IACvC,qBAAqB,MAAM,OAAkB,CAC9D;AAGF,YAAU,QAAQ,UAAU,MAAM;;CAGpC,MAAM,iBAAiB,UAAoD;AACzE,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,OAAI,qBAAqB,MAAM,OAAkB,CAC/C;AAEF,SAAM,gBAAgB;AACtB,kBACE,KACA,MACD;;AAEH,MAAI,MAAM,QAAQ,aAAa;AAC7B,SAAM,gBAAgB;GAEtB,MAAM,UADc,MAAM,OAAuB,QAAQ,KAAK,EAClC;AAC5B,OAAI,WAAW,QAAQ,YAAY,KACjC,SAAQ,OAAO;;AAGnB,MAAI,MAAM,QAAQ,WAAW;AAC3B,SAAM,gBAAgB;GAEtB,MAAM,cADc,MAAM,OAAuB,QAAQ,KAAK,EAC9B;AAChC,OAAI,eAAe,YAAY,YAAY,KACzC,aAAY,OAAO;;;AAKzB,QACE,qBAAC,WAAD;EACE,YAAY,IAAI,eAAe;EACnB;EACZ,aAAa,CAAC,CAAC,aAAa,CAAC;EAC7B,GAAK,aAAa;GAChB,UAAU,UAAU,eAAe,KAAK,MAAM;GAC9C,UAAU;GACV,WAAW;GACX,WAAW;GACZ;YATH;GAWG,sBAAsB,IACrB,oBAAC,MAAM,MAAP;IACE,eAAa,eAAe,IAAI;IAChC,SAAS;IACT,WAAW,GACT,QACA,IAAI,cAAc,GAAG,mBAAmB,cACzC;cAEA,IAAI,cAAc,IACjB,oBAAC,MAAD,EAAM,IAAI,IAAI,eAAe,GAAG,cAAc,cAAgB,CAAA;IAErD,CAAA;GAGd,sBACC,oBAAC,MAAM,MAAP;IAAY,WAAU;cACpB,oBAAC,+BAAD;KACO;KACL,SAAS,iBAAiB;KAC1B,iBAAiB;KACjB,CAAA;IACS,CAAA;GAEd,IAAI,iBAAiB,CAAC,KAAK,SAAS;AACnC,WAAO,oBAAC,mBAAD,EAAuC,MAAQ,EAAvB,KAAK,GAAkB;KACtD;GACQ"}

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

@@ -5,4 +5,4 @@ export declare const DataTableRowSelectionCheckbox: ({ row, checked, onCheckedCh
     checked: boolean | "indeterminate";
     onCheckedChange: (value: boolean) => void;
     label?: string;
-}) => React.ReactElement;
+}) => React.ReactElement<unknown>;

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

@@ -1,13 +1,15 @@
 import { Checkbox } from "../checkbox/Checkbox.js";
 import { useDataTable } from "./DataTableContext.js";
-import * as React$1 from "react";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableRowSelectionCheckbox.tsx
 var DataTableRowSelectionCheckbox = ({ row, checked, onCheckedChange, label = `Row ${row.id} selection` }) => {
 	const { tableId } = useDataTable();
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("label", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
 		htmlFor: `${tableId}_row_${row.id}_selection`,
-		className: "sr-only"
-	}, label), /* @__PURE__ */ React$1.createElement(Checkbox, {
+		className: "sr-only",
+		children: label
+	}), /* @__PURE__ */ jsx(Checkbox, {
 		size: "lg",
 		style: { "--depth": row.depth },
 		checked,
@@ -15,7 +17,7 @@ var DataTableRowSelectionCheckbox = ({ row, checked, onCheckedChange, label = `R
 		name: `${tableId}_row_${row.id}_selection`,
 		disabled: !row.getCanSelect(),
 		className: "mr-3 ml-[calc((var(--depth,0)*2)*4px)]"
-	}));
+	})] });
 };
 //#endregion
 export { DataTableRowSelectionCheckbox };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\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      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAME;CACxB,MAAM,EAAE,YAAY,cAAc;AAElC,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;EAExD,EADL,MACK,EACR,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\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<unknown> => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <label htmlFor={`${tableId}_row_${row.id}_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n        name={`${tableId}_row_${row.id}_selection`}\n        disabled={!row.getCanSelect()}\n        className=\"mr-3 ml-[calc((var(--depth,0)*2)*4px)]\"\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,iCAAiC,EAC5C,KACA,SACA,iBACA,QAAQ,OAAO,IAAI,GAAG,kBAMW;CACjC,MAAM,EAAE,YAAY,cAAc;AAElC,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ,OAAO,IAAI,GAAG;EAAa,WAAU;YAC7D;EACK,CAAA,EACR,oBAAC,UAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,IAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,QAAQ,OAAO,IAAI,GAAG;EAC/B,UAAU,CAAC,IAAI,cAAc;EAC7B,WAAU;EACV,CAAA,CACD,EAAA,CAAA"}

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

@@ -1,6 +1,7 @@
 import { Checkbox } from "../checkbox/Checkbox.js";
 import { useDataTable } from "./DataTableContext.js";
-import * as React$1 from "react";
+import "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableSelectAllRowsCheckbox.tsx
 var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
 	const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, toggleAllPageRowsSelected, tableId } = useDataTable();
@@ -13,15 +14,16 @@ var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
 		if (getIsSomePageRowsSelected()) return toggleAllPageRowsSelected(false);
 		return toggleAllPageRowsSelected(!getIsAllPageRowsSelected());
 	};
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("label", {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
 		htmlFor: `${tableId}_all_rows_selection`,
-		className: "sr-only"
-	}, label), /* @__PURE__ */ React$1.createElement(Checkbox, {
+		className: "sr-only",
+		children: label
+	}), /* @__PURE__ */ jsx(Checkbox, {
 		size: "lg",
 		checked: getCheckedState(),
 		onCheckedChange: updateCheckedState,
 		name: `${tableId}_allRowsSelection`
-	}));
+	})] });
 };
 //#endregion
 export { DataTableSelectAllRowsCheckbox };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/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      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,cAAc;CAElB,MAAM,wBAAwB;AAC5B,MAAI,2BAA2B,CAAE,QAAO;AACxC,MAAI,0BAA0B,CAAE,QAAO;AACvC,SAAO;;CAGT,MAAM,2BAA2B;AAC/B,MAAI,2BAA2B,CAC7B,QAAO,0BAA0B,MAAM;AAEzC,SAAO,0BAA0B,CAAC,0BAA0B,CAAC;;AAG/D,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;EAEnD,EADL,MACK,EACR,wBAAA,cAAC,UAAD;EACE,MAAK;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,MAAM,GAAG,QAAQ;EACjB,CAAA,CACD"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/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      <label htmlFor={`${tableId}_all_rows_selection`} className=\"sr-only\">\n        {label}\n      </label>\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;AAMA,IAAa,kCAAkC,EAC7C,QAAQ,2BAGJ;CACJ,MAAM,EACJ,0BACA,2BACA,2BACA,YACE,cAAc;CAElB,MAAM,wBAAwB;AAC5B,MAAI,2BAA2B,CAAE,QAAO;AACxC,MAAI,0BAA0B,CAAE,QAAO;AACvC,SAAO;;CAGT,MAAM,2BAA2B;AAC/B,MAAI,2BAA2B,CAC7B,QAAO,0BAA0B,MAAM;AAEzC,SAAO,0BAA0B,CAAC,0BAA0B,CAAC;;AAG/D,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,SAAS,GAAG,QAAQ;EAAsB,WAAU;YACxD;EACK,CAAA,EACR,oBAAC,UAAD;EACE,MAAK;EACL,SAAS,iBAAiB;EAC1B,iBAAiB;EACjB,MAAM,GAAG,QAAQ;EACjB,CAAA,CACD,EAAA,CAAA"}

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

@@ -15,4 +15,4 @@ export type DataTableTableProps = Omit<React.ComponentProps<typeof Table>, 'chil
     rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void;
     withContainer?: boolean;
 };
-export declare const DataTableTable: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...props }: DataTableTableProps) => JSX.Element | null;
+export declare const DataTableTable: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...props }: DataTableTableProps) => React.JSX.Element | null;

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

@@ -6,6 +6,7 @@ import { DataTableBody } from "./DataTableBody.js";
 import { DataTableHead } from "./DataTableHead.js";
 import { DataTableLoading } from "./DataTableLoading.js";
 import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/DataTableTable.tsx
 var TableContainer = styled("div", { base: [
 	"p-2",
@@ -86,7 +87,7 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 		return `${tableId}_${controlColumnCount}_control_columns`;
 	};
 	if (isEmpty) return null;
-	const tableComponent = /* @__PURE__ */ React$1.createElement(Table, {
+	const tableComponent = /* @__PURE__ */ jsxs(Table, {
 		corners: "round",
 		size: "lg",
 		...props,
@@ -101,20 +102,24 @@ var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOpt
 			"duration-250",
 			"linear",
 			"delay-150"
-		], className)
-	}, /* @__PURE__ */ React$1.createElement(DataTableHead, {
-		theme,
-		sortable,
-		isSticky: scrollOptions.hasStickyHeader,
-		stickyOffset: scrollOptions.stickyHeaderOffset,
-		className: scrollOptions.headerCss,
-		showTotalInFirstColumn: scrollOptions.showTotalInFirstColumn,
-		totalSuffix: scrollOptions.totalSuffix
-	}), /* @__PURE__ */ React$1.createElement(DataTableBody, {
-		striped,
-		rowAction
-	}));
-	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(DataTableLoading, null), withContainer ? /* @__PURE__ */ React$1.createElement(TableContainer, { className: cn(scrollOptions.numberOfStickyColumns === 0 && "overflow-x-auto") }, tableComponent) : tableComponent);
+		], className),
+		children: [/* @__PURE__ */ jsx(DataTableHead, {
+			theme,
+			sortable,
+			isSticky: scrollOptions.hasStickyHeader,
+			stickyOffset: scrollOptions.stickyHeaderOffset,
+			className: scrollOptions.headerCss,
+			showTotalInFirstColumn: scrollOptions.showTotalInFirstColumn,
+			totalSuffix: scrollOptions.totalSuffix
+		}), /* @__PURE__ */ jsx(DataTableBody, {
+			striped,
+			rowAction
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DataTableLoading, {}), withContainer ? /* @__PURE__ */ jsx(TableContainer, {
+		className: cn(scrollOptions.numberOfStickyColumns === 0 && "overflow-x-auto"),
+		children: tableComponent
+	}) : tableComponent] });
 };
 //#endregion
 export { DataTableTable };

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...props\n}: DataTableTableProps): JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...props}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;AAaA,IAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CAAC;CAAO;CAAY;CAAa,EACxC,CAAC;AAuBF,IAAa,kBAAkB,EAC7B,UACA,SACA,QAAQ,SACR,WACA,gBAAgB;CACd,uBAAuB;CACvB,oBAAoB;CACpB,iBAAiB;CACjB,wBAAwB;CACxB,aAAa;CACd,EACD,WACA,gBAAgB,OAChB,GAAG,YAC0C;CAC7C,MAAM,EACJ,gBACA,cACA,sBACA,cACA,oBACA,SACA,qBACE,cAAc;CAElB,MAAM,WAAW,QAAM,OAAgC,KAAK;CAC5D,MAAM,iBAAiB,QAAM,OAAO,MAAM;CAC1C,MAAM,cAAc,QAAM,OAAgB,MAAM;CAEhD,MAAM,eAAe,QAAM,cAAc;AACvC,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO;IACN,EAAE,CAAC;AAEN,SAAM,gBAAgB;AACpB,MAAI,CAAC,gBAAgB,OAAO,yBAAyB,YACnD;EAGF,MAAM,uBAAuB;AAC3B,OAAI,SAAS,SAAS;IACpB,MAAM,WAAW,SAAS,QAAQ,uBAAuB,CAAC;IAC1D,MAAM,cAAc,SAAS,QAAQ,uBAAuB,CAAC;AAE7D,sBAAkB,kBAAkB;KAClC,GAAG;KACH,KAAK;KACL,QAAQ;KACT,EAAE;;AAEL,eAAY,UAAU;;EAGxB,MAAM,qBAAqB;AACzB,OAAI,CAAC,YAAY,SAAS;AACxB,0BAAsB,eAAe;AACrC,gBAAY,UAAU;;;AAI1B,MAAI,CAAC,SAAS,QAAS;EAEvB,MAAM,iBAAiB,eAAe,sBAAsB;EAE5D,MAAM,kBAAkB;GACtB,YAAY,IAAI,eAAe,UAAU,eAAe;GACxD,WAAW;GACZ;EAED,MAAM,2BAA2B,YAAyC;AACxE,OAAI,CAAC,WAAW,QAAQ,WAAW,EAAG;GACtC,MAAM,QAAQ,QAAQ;AAEtB,kBAAe,UAAU,MAAM;AAE/B,OAAI,aACF,KAAI,MAAM,eAER,eAAc,iBAAiB,UAAU,aAAa;OAGtD,eAAc,oBAAoB,UAAU,aAAa;AAI7D,qBAAkB,kBAAkB;IAClC,GAAG;IACH,WAAW,MAAM;IAClB,EAAE;;EAGL,MAAM,gBAAgB,IAAI,qBACxB,yBACA,gBACD;AAGD,MACE,SAAS,YACR,cAAc,mBACb,OAAO,KAAK,gBAAgB,EAAE,CAAC,CAAC,SAAS,GAE3C,eAAc,QAAQ,SAAS,QAAQ;AAGzC,eAAa;AACX,iBAAc,YAAY;AAC1B,OAAI,aACF,eAAc,oBAAoB,UAAU,aAAa;;IAG5D;EACD;EACA,cAAc;EACd,eAAe;EACf;EACA;EACD,CAAC;CAEF,MAAM,YAAY,mBAAmB,eAAe;CACpD,MAAM,UAAU,CAAC,aAAa,cAAc,KAAK;CAEjD,MAAM,gCAAwC;EAC5C,IAAI,qBAAqB;AAEzB,MAAI,sBAAsB,IAAI,CAAC,CAAC,mBAC9B,sBAAqB;WACZ,sBAAsB,IAAI,CAAC,CAAC,mBACrC,sBAAqB;AAGvB,SAAO,GAAG,QAAQ,GAAG,mBAAmB;;AAG1C,KAAI,QAAS,QAAO;CAEpB,MAAM,iBACJ,wBAAA,cAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,GAAI;EACJ,KAAK;EACL,uBAAuB,cAAc;EACrC,oBAAoB,cAAc;EAClC,oBAAoB,yBAAyB;EAC7C,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,EACD,UACD;EAYK,EAVN,wBAAA,cAAC,eAAD;EACS;EACG;EACV,UAAU,cAAc;EACxB,cAAc,cAAc;EAC5B,WAAW,cAAc;EACzB,wBAAwB,cAAc;EACtC,aAAa,cAAc;EAC3B,CAAA,EACF,wBAAA,cAAC,eAAD;EAAwB;EAAoB;EAAa,CAAA,CACnD;AAGV,QACE,wBAAA,cAAA,QAAA,UAAA,MACE,wBAAA,cAAC,kBAAA,KAAmB,EACnB,gBACC,wBAAA,cAAC,gBAAD,EACE,WAAW,GACT,cAAc,0BAA0B,KAAK,kBAC9C,EAGc,EADd,eACc,GAEjB,eAED"}
+{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { cn } from '~/styled'\n\nimport { Table } from '../table/Table'\nimport { TableBody } from '../table/TableBody'\nimport { AsyncDataState } from './DataTable.types'\nimport { DataTableBody } from './DataTableBody'\nimport { useDataTable } from './DataTableContext'\nimport { DataTableHead } from './DataTableHead'\nimport { DataTableLoading } from './DataTableLoading'\n\nconst TableContainer = styled('div', {\n  base: ['p-2', 'bg-white', 'rounded-lg']\n})\n\nexport type DataTableTableProps = Omit<\n  React.ComponentProps<typeof Table>,\n  'children' | 'numberOfStickyColumns'\n> &\n  Partial<\n    Pick<React.ComponentProps<typeof DataTableHead>, 'theme' | 'sortable'>\n  > &\n  Partial<Pick<React.ComponentProps<typeof TableBody>, 'striped'>> & {\n    scrollOptions?: {\n      hasStickyHeader?: boolean\n      stickyHeaderOffset?: number\n      headerCss?: string\n      numberOfStickyColumns?: number\n      scrollContainerCls?: string | string[]\n      showTotalInFirstColumn?: boolean\n      totalSuffix?: string\n    }\n    rowAction?: (row: Record<string, unknown>, event: React.MouseEvent) => void\n    withContainer?: boolean\n  }\n\nexport const DataTableTable = ({\n  sortable,\n  striped,\n  theme = 'white',\n  className,\n  scrollOptions = {\n    numberOfStickyColumns: 0,\n    stickyHeaderOffset: 0,\n    hasStickyHeader: false,\n    showTotalInFirstColumn: true,\n    totalSuffix: 'items'\n  },\n  rowAction,\n  withContainer = false,\n  ...props\n}: DataTableTableProps): React.JSX.Element | null => {\n  const {\n    asyncDataState,\n    getTotalRows,\n    getCanSomeRowsExpand,\n    rowSelection,\n    enableRowSelection,\n    tableId,\n    setTablePosition\n  } = useDataTable()\n\n  const tableRef = React.useRef<HTMLTableElement | null>(null)\n  const isTableVisible = React.useRef(false)\n  const isScrolling = React.useRef<boolean>(false)\n\n  const scrollTarget = React.useMemo(() => {\n    if (typeof window === 'undefined') return null\n    return window\n  }, [])\n\n  React.useEffect(() => {\n    if (!scrollTarget || typeof IntersectionObserver === 'undefined') {\n      return\n    }\n\n    const updatePosition = () => {\n      if (tableRef.current) {\n        const tableTop = tableRef.current.getBoundingClientRect().top\n        const tableBottom = tableRef.current.getBoundingClientRect().bottom\n\n        setTablePosition((prevPosition) => ({\n          ...prevPosition,\n          top: tableTop,\n          bottom: tableBottom\n        }))\n      }\n      isScrolling.current = false\n    }\n\n    const handleScroll = () => {\n      if (!isScrolling.current) {\n        requestAnimationFrame(updatePosition)\n        isScrolling.current = true\n      }\n    }\n\n    if (!tableRef.current) return\n\n    const observerOffset = scrollOptions?.stickyHeaderOffset || 0\n\n    const observerOptions = {\n      rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,\n      threshold: 0\n    }\n\n    const handleTableIntersection = (entries: IntersectionObserverEntry[]) => {\n      if (!entries || entries.length === 0) return\n      const entry = entries[0]\n\n      isTableVisible.current = entry.isIntersecting\n\n      if (scrollTarget) {\n        if (entry.isIntersecting) {\n          // add scroll listener\n          scrollTarget?.addEventListener('scroll', handleScroll)\n        } else {\n          // remove scroll listener\n          scrollTarget?.removeEventListener('scroll', handleScroll)\n        }\n      }\n\n      setTablePosition((prevPosition) => ({\n        ...prevPosition,\n        isVisible: entry.isIntersecting\n      }))\n    }\n\n    const tableObserver = new IntersectionObserver(\n      handleTableIntersection,\n      observerOptions\n    )\n\n    //only track table position if we have a sticky header or bulk actions active\n    if (\n      tableRef.current &&\n      (scrollOptions.hasStickyHeader ||\n        Object.keys(rowSelection || {}).length > 0)\n    ) {\n      tableObserver.observe(tableRef.current)\n    }\n\n    return () => {\n      tableObserver.disconnect()\n      if (scrollTarget) {\n        scrollTarget?.removeEventListener('scroll', handleScroll)\n      }\n    }\n  }, [\n    rowSelection,\n    scrollOptions.hasStickyHeader,\n    scrollOptions?.stickyHeaderOffset,\n    scrollTarget,\n    setTablePosition\n  ])\n\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  const buildScrollContainerKey = (): string => {\n    let controlColumnCount = 0\n\n    if (getCanSomeRowsExpand() && !!enableRowSelection) {\n      controlColumnCount = 2\n    } else if (getCanSomeRowsExpand() || !!enableRowSelection) {\n      controlColumnCount = 1\n    }\n\n    return `${tableId}_${controlColumnCount}_control_columns`\n  }\n\n  if (isEmpty) return null\n\n  const tableComponent = (\n    <Table\n      corners=\"round\"\n      size=\"lg\"\n      {...props}\n      ref={tableRef}\n      numberOfStickyColumns={scrollOptions.numberOfStickyColumns}\n      scrollContainerCls={scrollOptions.scrollContainerCls}\n      scrollContainerkey={buildScrollContainerKey()}\n      className={cn(\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ],\n        className\n      )}\n    >\n      <DataTableHead\n        theme={theme}\n        sortable={sortable}\n        isSticky={scrollOptions.hasStickyHeader}\n        stickyOffset={scrollOptions.stickyHeaderOffset}\n        className={scrollOptions.headerCss}\n        showTotalInFirstColumn={scrollOptions.showTotalInFirstColumn}\n        totalSuffix={scrollOptions.totalSuffix}\n      />\n      <DataTableBody striped={striped} rowAction={rowAction} />\n    </Table>\n  )\n\n  return (\n    <>\n      <DataTableLoading />\n      {withContainer ? (\n        <TableContainer\n          className={cn(\n            scrollOptions.numberOfStickyColumns === 0 && 'overflow-x-auto'\n          )}\n        >\n          {tableComponent}\n        </TableContainer>\n      ) : (\n        tableComponent\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

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

@@ -7,6 +7,7 @@ import { DataTableLoading } from "../DataTableLoading.js";
 import { SortableRoot } from "../../sortable/SortableRoot.js";
 import { DragAndDropTableBody } from "./DragAndDropTableBody.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { arrayMove } from "@dnd-kit/sortable";
 //#region src/components/data-table/drag-and-drop/DragAndDropTable.tsx
 var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, theme, className, ...props }) => {
@@ -15,42 +16,43 @@ var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, the
 	const rowIds = React$1.useMemo(() => data.results.map((row) => {
 		return row[idColumn];
 	}), [data]);
-	const handleSortChange = React$1.useCallback(({ oldIndex, newIndex }) => {
-		const sortedResults = arrayMove(data.results, oldIndex, newIndex);
-		const newData = {
-			results: sortedResults,
-			total: data.total
-		};
-		setData({
-			results: sortedResults,
-			total: data.total
-		});
-		onDragAndDrop?.({
-			oldIndex,
-			newIndex,
-			newData
-		});
-	}, [data, onDragAndDrop]);
-	return /* @__PURE__ */ React$1.createElement(SortableRoot, {
-		onSortChange: handleSortChange,
-		sortableIds: rowIds
-	}, /* @__PURE__ */ React$1.createElement(DataTableLoading, null), /* @__PURE__ */ React$1.createElement(Table, {
-		...props,
-		className: cn(isPending && [
-			"opacity-50",
-			"pointer-events-none",
-			"transition-opacity",
-			"duration-250",
-			"linear",
-			"delay-150"
-		], className)
-	}, /* @__PURE__ */ React$1.createElement(DataTableHead, {
-		theme,
-		sortable
-	}), /* @__PURE__ */ React$1.createElement(DragAndDropTableBody, {
-		striped,
-		idColumn
-	})));
+	return /* @__PURE__ */ jsxs(SortableRoot, {
+		onSortChange: React$1.useCallback(({ oldIndex, newIndex }) => {
+			const sortedResults = arrayMove(data.results, oldIndex, newIndex);
+			const newData = {
+				results: sortedResults,
+				total: data.total
+			};
+			setData({
+				results: sortedResults,
+				total: data.total
+			});
+			onDragAndDrop?.({
+				oldIndex,
+				newIndex,
+				newData
+			});
+		}, [data, onDragAndDrop]),
+		sortableIds: rowIds,
+		children: [/* @__PURE__ */ jsx(DataTableLoading, {}), /* @__PURE__ */ jsxs(Table, {
+			...props,
+			className: cn(isPending && [
+				"opacity-50",
+				"pointer-events-none",
+				"transition-opacity",
+				"duration-250",
+				"linear",
+				"delay-150"
+			], className),
+			children: [/* @__PURE__ */ jsx(DataTableHead, {
+				theme,
+				sortable
+			}), /* @__PURE__ */ jsx(DragAndDropTableBody, {
+				striped,
+				idColumn
+			})]
+		})]
+	});
 };
 //#endregion
 export { DragAndDropTable };

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\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  className,\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        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAwBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;CACD,MAAM,mBAAmB,QAAM,aAC5B,EAAE,UAAU,eAAe;EAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;EACjE,MAAM,UAAU;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO;AAC7D,UAAQ;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO,CAAC;AACtD,kBAAgB;GAAE;GAAU;GAAU;GAAS,CAAC;IAElD,CAAC,MAAM,cAAc,CACtB;AAED,QACE,wBAAA,cAAC,cAAD;EAAe,cAAc;EAAkB,aAAa;EAmB5C,EAlBd,wBAAA,cAAC,kBAAA,KAAmB,EACpB,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,WAAW,GACT,aAAa;GACX;GACA;GACA;GACA;GACA;GACA;GACD,EACD,UACD;EAIK,EAFN,wBAAA,cAAC,eAAD;EAAsB;EAAiB;EAAY,CAAA,EACnD,wBAAA,cAAC,sBAAD;EAA+B;EAAmB;EAAY,CAAA,CACxD,CACM"}
+{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport * as React from 'react'\n\nimport { cn } from '~/styled'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { AsyncDataState, TAsyncDataResult } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DataTableHead } from '../DataTableHead'\nimport { DataTableLoading } from '../DataTableLoading'\nimport type { DataTableTableProps } from '../DataTableTable'\nimport { DragAndDropTableBody } from './DragAndDropTableBody'\n\ntype DragAndDropTableProps = DataTableTableProps & {\n  className?: string\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  className,\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 string | number\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        className={cn(\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity',\n            'duration-250',\n            'linear',\n            'delay-150'\n          ],\n          className\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAwBA,IAAa,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;AAWD,QACE,qBAAC,cAAD;EAAe,cAXQ,QAAM,aAC5B,EAAE,UAAU,eAAe;GAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;GACjE,MAAM,UAAU;IAAE,SAAS;IAAe,OAAO,KAAK;IAAO;AAC7D,WAAQ;IAAE,SAAS;IAAe,OAAO,KAAK;IAAO,CAAC;AACtD,mBAAgB;IAAE;IAAU;IAAU;IAAS,CAAC;KAElD,CAAC,MAAM,cAAc,CACtB;EAGgD,aAAa;YAA5D,CACE,oBAAC,kBAAD,EAAoB,CAAA,EACpB,qBAAC,OAAD;GACE,GAAI;GACJ,WAAW,GACT,aAAa;IACX;IACA;IACA;IACA;IACA;IACA;IACD,EACD,UACD;aAZH,CAcE,oBAAC,eAAD;IAAsB;IAAiB;IAAY,CAAA,EACnD,oBAAC,sBAAD;IAA+B;IAAmB;IAAY,CAAA,CACxD;KACM"}

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

@@ -1,20 +1,21 @@
 import { Table } from "../../table/Table.js";
 import { useDataTable } from "../DataTableContext.js";
 import { DragAndDropTableRow } from "./DragAndDropTableRow.js";
-import * as React$1 from "react";
+import "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx
 var DragAndDropTableBody = ({ striped = false, idColumn = "id", ...props }) => {
 	const { getRowModel } = useDataTable();
-	return /* @__PURE__ */ React$1.createElement(Table.Body, {
+	return /* @__PURE__ */ jsx(Table.Body, {
 		...props,
-		striped
-	}, getRowModel().rows.map((row) => {
-		return /* @__PURE__ */ React$1.createElement(DragAndDropTableRow, {
-			row,
-			key: row.id,
-			idColumn
-		});
-	}));
+		striped,
+		children: getRowModel().rows.map((row) => {
+			return /* @__PURE__ */ jsx(DragAndDropTableRow, {
+				row,
+				idColumn
+			}, row.id);
+		})
+	});
 };
 //#endregion
 export { DragAndDropTableBody };

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableBody.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  idColumn?: string\n}\n\nexport const DragAndDropTableBody = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return (\n          <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n        )\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;AAaA,IAAa,wBAAwB,EACnC,UAAU,OACV,WAAW,MACX,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,cAAc;AACtC,QACE,wBAAA,cAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;EAMnB,EALV,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,SACE,wBAAA,cAAC,qBAAD;GAA0B;GAAK,KAAK,IAAI;GAAc;GAAY,CAAA;GAEpE,CACS"}
+{"version":3,"file":"DragAndDropTableBody.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Table } from '../../table/Table'\nimport { useDataTable } from '../DataTableContext'\nimport { DragAndDropTableRow } from './DragAndDropTableRow'\n\ntype DataTableBodyProps = Omit<\n  React.ComponentProps<typeof Table.Body>,\n  'children'\n> & {\n  idColumn?: string\n}\n\nexport const DragAndDropTableBody = ({\n  striped = false,\n  idColumn = 'id',\n  ...props\n}: DataTableBodyProps) => {\n  const { getRowModel } = useDataTable()\n  return (\n    <Table.Body {...props} striped={striped}>\n      {getRowModel().rows.map((row) => {\n        return (\n          <DragAndDropTableRow row={row} key={row.id} idColumn={idColumn} />\n        )\n      })}\n    </Table.Body>\n  )\n}\n"],"mappings":";;;;;;AAaA,IAAa,wBAAwB,EACnC,UAAU,OACV,WAAW,MACX,GAAG,YACqB;CACxB,MAAM,EAAE,gBAAgB,cAAc;AACtC,QACE,oBAAC,MAAM,MAAP;EAAY,GAAI;EAAgB;YAC7B,aAAa,CAAC,KAAK,KAAK,QAAQ;AAC/B,UACE,oBAAC,qBAAD;IAA0B;IAA4B;IAAY,EAA9B,IAAI,GAA0B;IAEpE;EACS,CAAA"}

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

@@ -2,24 +2,23 @@ import { Table } from "../../table/Table.js";
 import { DataTableDataCell } from "../DataTableDataCell.js";
 import { SortableHandle } from "../../sortable/SortableHandle.js";
 import { SortableItem } from "../../sortable/SortableItem.js";
-import * as React$1 from "react";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { flexRender } from "@tanstack/react-table";
 //#region src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx
 var DragAndDropTableRow = ({ row, idColumn = "id" }) => {
 	const rowId = row.original[idColumn];
-	return /* @__PURE__ */ React$1.createElement(SortableItem, {
+	return /* @__PURE__ */ jsx(SortableItem, {
 		id: rowId,
-		asChild: true
-	}, /* @__PURE__ */ React$1.createElement(Table.Row, null, row.getVisibleCells().map((cell, i) => {
-		if (i === 0) return /* @__PURE__ */ React$1.createElement(Table.Cell, { key: cell.id }, /* @__PURE__ */ React$1.createElement(SortableHandle, {
-			targetId: rowId,
-			className: "inline-block"
-		}), flexRender(cell.column.columnDef.cell, cell.getContext()));
-		return /* @__PURE__ */ React$1.createElement(DataTableDataCell, {
-			key: cell.id,
-			cell
-		});
-	})));
+		asChild: true,
+		children: /* @__PURE__ */ jsx(Table.Row, { children: row.getVisibleCells().map((cell, i) => {
+			if (i === 0) return /* @__PURE__ */ jsxs(Table.Cell, { children: [/* @__PURE__ */ jsx(SortableHandle, {
+				targetId: rowId,
+				className: "inline-block"
+			}), flexRender(cell.column.columnDef.cell, cell.getContext())] }, cell.id);
+			return /* @__PURE__ */ jsx(DataTableDataCell, { cell }, cell.id);
+		}) })
+	});
 };
 //#endregion
 export { DragAndDropTableRow };

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableRow.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { DataTableDataCell } from '../DataTableDataCell'\n\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n  idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n  row,\n  idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n  const rowId = row.original[idColumn] as React.ReactText\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle targetId={rowId} className=\"inline-block\" />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"mappings":";;;;;;;AAeA,IAAa,uBAAuB,EAClC,KACA,WAAW,WACqB;CAChC,MAAM,QAAQ,IAAI,SAAS;AAC3B,QACE,wBAAA,cAAC,cAAD;EAAe,IAAI;EAAO,SAAA;EAcV,EAbd,wBAAA,cAAC,MAAM,KAAA,MACJ,IAAI,iBAAiB,CAAC,KAAK,MAAM,MAAM;AACtC,MAAI,MAAM,EACR,QACE,wBAAA,cAAC,MAAM,MAAP,EAAY,KAAK,KAAK,IAGT,EAFX,wBAAA,cAAC,gBAAD;GAAiB,UAAU;GAAO,WAAU;GAAiB,CAAA,EAC5D,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC,CAC/C;AAGjB,SAAO,wBAAA,cAAC,mBAAD;GAAmB,KAAK,KAAK;GAAU;GAAQ,CAAA;GACtD,CACQ,CACE"}
+{"version":3,"file":"DragAndDropTableRow.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx"],"sourcesContent":["import type { Row } from '@tanstack/react-table'\nimport { flexRender } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport * as Sortable from '../../sortable'\nimport { Table } from '../../table/Table'\nimport { DataTableDataCell } from '../DataTableDataCell'\n\nexport type DataTableDraggableRowProps = React.ComponentProps<\n  typeof Table.Row\n> & {\n  row: Row<Record<string, unknown>>\n  idColumn?: string\n}\n\nexport const DragAndDropTableRow = ({\n  row,\n  idColumn = 'id'\n}: DataTableDraggableRowProps) => {\n  const rowId = row.original[idColumn] as string | number\n  return (\n    <Sortable.Item id={rowId} asChild>\n      <Table.Row>\n        {row.getVisibleCells().map((cell, i) => {\n          if (i === 0) {\n            return (\n              <Table.Cell key={cell.id}>\n                <Sortable.Handle targetId={rowId} className=\"inline-block\" />\n                {flexRender(cell.column.columnDef.cell, cell.getContext())}\n              </Table.Cell>\n            )\n          }\n          return <DataTableDataCell key={cell.id} cell={cell} />\n        })}\n      </Table.Row>\n    </Sortable.Item>\n  )\n}\n"],"mappings":";;;;;;;;AAeA,IAAa,uBAAuB,EAClC,KACA,WAAW,WACqB;CAChC,MAAM,QAAQ,IAAI,SAAS;AAC3B,QACE,oBAAC,cAAD;EAAe,IAAI;EAAO,SAAA;YACxB,oBAAC,MAAM,KAAP,EAAA,UACG,IAAI,iBAAiB,CAAC,KAAK,MAAM,MAAM;AACtC,OAAI,MAAM,EACR,QACE,qBAAC,MAAM,MAAP,EAAA,UAAA,CACE,oBAAC,gBAAD;IAAiB,UAAU;IAAO,WAAU;IAAiB,CAAA,EAC5D,WAAW,KAAK,OAAO,UAAU,MAAM,KAAK,YAAY,CAAC,CAC/C,EAAA,EAHI,KAAK,GAGT;AAGjB,UAAO,oBAAC,mBAAD,EAAuC,MAAQ,EAAvB,KAAK,GAAkB;IACtD,EACQ,CAAA;EACE,CAAA"}

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme';
-declare const StyledNav: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void) | React.RefObject<HTMLElement> | null | undefined;
-}, never> & {
+declare const StyledNav: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, never> & {
     as?: React.ElementType;
 }>;
 type PaginationProps = React.ComponentProps<typeof StyledNav> & {

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

@@ -4,6 +4,7 @@ import { AsyncDataState } from "../DataTable.types.js";
 import { useDataTable } from "../DataTableContext.js";
 import { Pagination as Pagination$1 } from "../../pagination/Pagination.js";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-table/pagination/Pagination.tsx
 var StyledNav = styled("nav", { base: [
 	"flex",
@@ -35,12 +36,18 @@ var Pagination = ({ colorScheme, ...props }) => {
 		setPageIndex(index - 1);
 	};
 	const pageCount = hasAsyncData ? getPageCount() : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize));
-	return /* @__PURE__ */ React$1.createElement(StyledNav, props, /* @__PURE__ */ React$1.createElement(Text, { size: "sm" }, `${start} - ${end} of ${hasAsyncData ? getTotalRows() : totalVisibleRows} items`), /* @__PURE__ */ React$1.createElement(Pagination$1, {
-		colorScheme,
-		selectedPage: paginationState.pageIndex + 1,
-		pagesCount: pageCount,
-		onSelectedPageChange: setPage
-	}));
+	return /* @__PURE__ */ jsxs(StyledNav, {
+		...props,
+		children: [/* @__PURE__ */ jsx(Text, {
+			size: "sm",
+			children: `${start} - ${end} of ${hasAsyncData ? getTotalRows() : totalVisibleRows} items`
+		}), /* @__PURE__ */ jsx(Pagination$1, {
+			colorScheme,
+			selectedPage: paginationState.pageIndex + 1,
+			pagesCount: pageCount,
+			onSelectedPageChange: setPage
+		})]
+	});
 };
 Pagination.displayName = "Pagination";
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;AAUA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;;AAOF,IAAa,cAAc,EAAE,aAAa,GAAG,YAA6B;CACxE,MAAM,EACJ,iBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,cAAc;AAElB,SAAM,gBAAgB;AACpB,mBAAiB;IAChB,CAAC,gBAAgB,CAAC;CAErB,MAAM,EAAE,YAAY,oBAAoB,UAAU;CAElD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK;CAEjD,MAAM,iBAAiB,eACnB,cAAc,GAAG,IACjB,qBAAqB,CAAC,KAAK,SAAS,gBAAgB,WAAW;AAEnE,KAAI,WAAW,CAAC,eAAgB,QAAO;CACvC,MAAM,mBAAmB,qBAAqB,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,aAAa,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,iBAAiB;CAGpE,MAAM,WAAW,UAAkB;AACjC,eAAa,QAAQ,EAAE;;CAGzB,MAAM,YAAY,eACd,cAAc,GACd,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,SAAS,CAAC;AAEvE,QACE,wBAAA,cAAC,WAAc,OACb,wBAAA,cAAC,MAAD,EAAM,MAAK,MAEK,EAFC,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,cAAc,GAAG,iBACjC,QAAe,EAChB,wBAAA,cAAC,cAAD;EACe;EACb,cAAc,gBAAgB,YAAY;EAC1C,YAAY;EACZ,sBAAsB;EACtB,CAAA,CACQ;;AAIhB,WAAW,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme/ColorScheme'\nimport { Pagination as PaginationComponent } from '../../pagination/Pagination'\nimport { Text } from '../../text/Text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  base: [\n    'flex',\n    'flex-col',\n    'justify-between',\n    'items-center',\n    'tabular-nums',\n    'flex-wrap',\n    'w-full',\n    'gap-4',\n    'mt-4',\n    'md:flex-row'\n  ]\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getExpandedRowModel,\n    getRowModel,\n    setPageIndex,\n    getTotalRows,\n    getPageCount,\n    asyncDataState,\n    hasAsyncData\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n  // Show pagination only if total pages are more than 1\n  const showPagination = hasAsyncData\n    ? getPageCount() > 1\n    : getExpandedRowModel().rows.length / paginationState.pageSize > 1\n\n  if (isEmpty || !showPagination) return null\n  const totalVisibleRows = getExpandedRowModel().rows.length\n\n  const start =\n    totalVisibleRows === 0\n      ? 0\n      : paginationState.pageIndex * paginationState.pageSize + 1\n\n  const asyncRowCount = getRowModel().rows.length\n  const end = hasAsyncData\n    ? asyncRowCount === 0\n      ? start\n      : start + asyncRowCount - 1\n    : Math.min(start + paginationState.pageSize - 1, totalVisibleRows)\n\n  // indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  const pageCount = hasAsyncData\n    ? getPageCount()\n    : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize))\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">{`${start} - ${end} of ${\n        hasAsyncData ? getTotalRows() : totalVisibleRows\n      } items`}</Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={pageCount}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAUA,IAAM,YAAY,OAAO,OAAO,EAC9B,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;;AAOF,IAAa,cAAc,EAAE,aAAa,GAAG,YAA6B;CACxE,MAAM,EACJ,iBACA,UACA,qBACA,aACA,cACA,cACA,cACA,gBACA,iBACE,cAAc;AAElB,SAAM,gBAAgB;AACpB,mBAAiB;IAChB,CAAC,gBAAgB,CAAC;CAErB,MAAM,EAAE,YAAY,oBAAoB,UAAU;CAElD,MAAM,UAAU,EADE,mBAAmB,eAAe,YACtB,cAAc,KAAK;CAEjD,MAAM,iBAAiB,eACnB,cAAc,GAAG,IACjB,qBAAqB,CAAC,KAAK,SAAS,gBAAgB,WAAW;AAEnE,KAAI,WAAW,CAAC,eAAgB,QAAO;CACvC,MAAM,mBAAmB,qBAAqB,CAAC,KAAK;CAEpD,MAAM,QACJ,qBAAqB,IACjB,IACA,gBAAgB,YAAY,gBAAgB,WAAW;CAE7D,MAAM,gBAAgB,aAAa,CAAC,KAAK;CACzC,MAAM,MAAM,eACR,kBAAkB,IAChB,QACA,QAAQ,gBAAgB,IAC1B,KAAK,IAAI,QAAQ,gBAAgB,WAAW,GAAG,iBAAiB;CAGpE,MAAM,WAAW,UAAkB;AACjC,eAAa,QAAQ,EAAE;;CAGzB,MAAM,YAAY,eACd,cAAc,GACd,KAAK,IAAI,GAAG,KAAK,KAAK,mBAAmB,gBAAgB,SAAS,CAAC;AAEvE,QACE,qBAAC,WAAD;EAAW,GAAI;YAAf,CACE,oBAAC,MAAD;GAAM,MAAK;aAAM,GAAG,MAAM,KAAK,IAAI,MACjC,eAAe,cAAc,GAAG,iBACjC;GAAe,CAAA,EAChB,oBAAC,cAAD;GACe;GACb,cAAc,gBAAgB,YAAY;GAC1C,YAAY;GACZ,sBAAsB;GACtB,CAAA,CACQ;;;AAIhB,WAAW,cAAc"}