@atom-learning/components 6.5.4 → 6.5.5

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

@@ -1,14 +1,14 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { Table as n } from "../table/Table.js";
-import { useDataTable as r } from "./DataTableContext.js";
-import { DataTableDataCell as i } from "./DataTableDataCell.js";
-import { DataTableRowSelectionCheckbox as a } from "./DataTableRowSelectionCheckbox.js";
-import o from "clsx";
-import * as s from "react";
-import { ChevronDown as c, ChevronRight as l } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { Table } from "../table/Table.js";
+import { useDataTable } from "./DataTableContext.js";
+import { DataTableDataCell } from "./DataTableDataCell.js";
+import { DataTableRowSelectionCheckbox } from "./DataTableRowSelectionCheckbox.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { ChevronDown, ChevronRight } from "@atom-learning/icons";
 //#region src/components/data-table/DataTableRow.tsx
-var u = e(n.Row, {
+var StyledRow = styled(Table.Row, {
 	base: ["bg-[initial]", "relative"],
 	variants: {
 		isSelected: { true: ["odd:bg-primary-100"] },
@@ -29,49 +29,70 @@ var u = e(n.Row, {
 			"focus:[&_td]:bg-transparent"
 		] }
 	}
-}), d = (e) => e ? !!(e.closest("button, a, input, select, textarea") || e.getAttribute("role") === "button") : !1, f = ({ row: e, rowAction: f }) => {
-	let { enableRowSelection: p, disabledRows: m, getCanSomeRowsExpand: h } = r(), g = !!m?.[e.id], _ = e.getToggleExpandedHandler(), v = e.getToggleSelectedHandler(), y = () => e.getIsSomeSelected() ? "indeterminate" : e.getIsSelected(), b = (e, t) => {
-		f && (!t.target.closest("tr") || d(t.target) || f(e.original, t));
+});
+var isElementInteractive = (element) => {
+	if (!element) return false;
+	if (element.closest("button, a, input, select, textarea")) return true;
+	if (element.getAttribute("role") === "button") return true;
+	return false;
+};
+var DataTableRow = ({ row, rowAction }) => {
+	const { enableRowSelection, disabledRows, getCanSomeRowsExpand } = useDataTable();
+	const isDisabled = !!disabledRows?.[row.id];
+	const toggleExpandHandler = row.getToggleExpandedHandler();
+	const toggleSelectHandler = row.getToggleSelectedHandler();
+	const getCheckedState = () => {
+		if (row.getIsSomeSelected()) return "indeterminate";
+		return row.getIsSelected();
+	};
+	const handleRowClick = (rowData, event) => {
+		if (!rowAction) return;
+		if (!event.target.closest("tr") || isElementInteractive(event.target)) return;
+		rowAction(rowData.original, event);
+	};
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			if (isElementInteractive(event.target)) return;
+			event.preventDefault();
+			handleRowClick(row, event);
+		}
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			const nextRow = event.target.closest("tr")?.nextElementSibling;
+			if (nextRow && nextRow.tagName === "TR") nextRow.focus();
+		}
+		if (event.key === "ArrowUp") {
+			event.preventDefault();
+			const previousRow = event.target.closest("tr")?.previousElementSibling;
+			if (previousRow && previousRow.tagName === "TR") previousRow.focus();
+		}
 	};
-	return /* @__PURE__ */ s.createElement(u, {
-		isSelected: e.getIsSelected(),
-		isDisabled: g,
-		isFocusable: !!f && !g,
-		...f && {
-			onClick: (t) => b(e, t),
+	return /* @__PURE__ */ React$1.createElement(StyledRow, {
+		isSelected: row.getIsSelected(),
+		isDisabled,
+		isFocusable: !!rowAction && !isDisabled,
+		...rowAction && {
+			onClick: (event) => handleRowClick(row, event),
 			tabIndex: 0,
 			className: "cursor-pointer",
-			onKeyDown: (t) => {
-				if (t.key === "Enter" || t.key === " ") {
-					if (d(t.target)) return;
-					t.preventDefault(), b(e, t);
-				}
-				if (t.key === "ArrowDown") {
-					t.preventDefault();
-					let e = t.target.closest("tr")?.nextElementSibling;
-					e && e.tagName === "TR" && e.focus();
-				}
-				if (t.key === "ArrowUp") {
-					t.preventDefault();
-					let e = t.target.closest("tr")?.previousElementSibling;
-					e && e.tagName === "TR" && e.focus();
-				}
-			}
+			onKeyDown: handleKeyDown
 		}
-	}, h() && /* @__PURE__ */ s.createElement(n.Cell, {
-		"data-testid": `expand-icon-${e.id}`,
-		onClick: _,
-		className: o("w-10", e.getCanExpand() ? "cursor-pointer" : "cursor-auto")
-	}, e.getCanExpand() && /* @__PURE__ */ s.createElement(t, { is: e.getIsExpanded() ? c : l })), p && /* @__PURE__ */ s.createElement(n.Cell, { className: "w-10" }, /* @__PURE__ */ s.createElement(a, {
-		row: e,
-		checked: y(),
-		onCheckedChange: v
-	})), e.getVisibleCells().map((e) => /* @__PURE__ */ s.createElement(i, {
-		key: e.id,
-		cell: e
-	})));
+	}, getCanSomeRowsExpand() && /* @__PURE__ */ React$1.createElement(Table.Cell, {
+		"data-testid": `expand-icon-${row.id}`,
+		onClick: toggleExpandHandler,
+		className: clsx("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
+		});
+	}));
 };
 //#endregion
-export { f as DataTableRow };
+export { DataTableRow };
 
 //# sourceMappingURL=DataTableRow.js.map

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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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: ['odd: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={clsx(\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,IAAY,EAAO,EAAM,KAAK;CAClC,MAAM,CAAC,gBAAgB,WAAW;CAClC,UAAU;EACR,YAAY,EACV,MAAM,CAAC,qBAAqB,EAC7B;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,EAEI,KAAwB,MACvB,IAEL,GADI,EAAQ,QAAQ,qCAAqC,IACrD,EAAQ,aAAa,OAAO,KAAK,YAFhB,IAMV,KAAgB,EAAE,QAAK,mBAAmC;CACrE,IAAM,EAAE,uBAAoB,iBAAc,4BACxC,GAAc,EAEV,IAAa,CAAC,CAAC,IAAe,EAAI,KAElC,IAAsB,EAAI,0BAA0B,EACpD,IAAsB,EAAI,0BAA0B,EAEpD,UACA,EAAI,mBAAmB,GAAS,kBAC7B,EAAI,eAAe,EAGtB,KACJ,GACA,MACG;AACE,QAID,CADgB,EAAM,OAAmB,QAAQ,KAAK,IACvC,EAAqB,EAAM,OAAkB,IAIhE,EAAU,EAAQ,UAAU,EAAM;;AAgCpC,QACE,kBAAA,cAAC,GAAD;EACE,YAAY,EAAI,eAAe;EACnB;EACZ,aAAa,CAAC,CAAC,KAAa,CAAC;EAC7B,GAAK,KAAa;GAChB,UAAU,MAAU,EAAe,GAAK,EAAM;GAC9C,UAAU;GACV,WAAW;GACX,YAtCiB,MAAoD;AACzE,QAAI,EAAM,QAAQ,WAAW,EAAM,QAAQ,KAAK;AAC9C,SAAI,EAAqB,EAAM,OAAkB,CAC/C;AAGF,KADA,EAAM,gBAAgB,EACtB,EACE,GACA,EACD;;AAEH,QAAI,EAAM,QAAQ,aAAa;AAC7B,OAAM,gBAAgB;KAEtB,IAAM,IADc,EAAM,OAAuB,QAAQ,KAAK,EAClC;AAC5B,KAAI,KAAW,EAAQ,YAAY,QACjC,EAAQ,OAAO;;AAGnB,QAAI,EAAM,QAAQ,WAAW;AAC3B,OAAM,gBAAgB;KAEtB,IAAM,IADc,EAAM,OAAuB,QAAQ,KAAK,EAC9B;AAChC,KAAI,KAAe,EAAY,YAAY,QACzC,EAAY,OAAO;;;GAepB;EA6BS,EA3BT,GAAsB,IACrB,kBAAA,cAAC,EAAM,MAAP;EACE,eAAa,eAAe,EAAI;EAChC,SAAS;EACT,WAAW,EACT,QACA,EAAI,cAAc,GAAG,mBAAmB,cACzC;EAKU,EAHV,EAAI,cAAc,IACjB,kBAAA,cAAC,GAAD,EAAM,IAAI,EAAI,eAAe,GAAG,IAAc,GAAgB,CAAA,CAErD,EAGd,KACC,kBAAA,cAAC,EAAM,MAAP,EAAY,WAAU,QAMT,EALX,kBAAA,cAAC,GAAD;EACO;EACL,SAAS,GAAiB;EAC1B,iBAAiB;EACjB,CAAA,CACS,EAEd,EAAI,iBAAiB,CAAC,KAAK,MACnB,kBAAA,cAAC,GAAD;EAAmB,KAAK,EAAK;EAAU;EAAQ,CAAA,CACtD,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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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: ['odd: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={clsx(\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,qBAAqB,EAC7B;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,KACT,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"}

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

@@ -1,23 +1,23 @@
-import { Checkbox as e } from "../checkbox/Checkbox.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import * as n from "react";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { useDataTable } from "./DataTableContext.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableRowSelectionCheckbox.tsx
-var r = ({ row: r, checked: i, onCheckedChange: a, label: o = `Row ${r.id} selection` }) => {
-	let { tableId: s } = t();
-	return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("label", {
-		htmlFor: `${s}_row_${r.id}_selection`,
+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", {
+		htmlFor: `${tableId}_row_${row.id}_selection`,
 		className: "sr-only"
-	}, o), /* @__PURE__ */ n.createElement(e, {
+	}, label), /* @__PURE__ */ React$1.createElement(Checkbox, {
 		size: "lg",
-		style: { "--depth": r.depth },
-		checked: i,
-		onCheckedChange: a,
-		name: `${s}_row_${r.id}_selection`,
-		disabled: !r.getCanSelect(),
+		style: { "--depth": row.depth },
+		checked,
+		onCheckedChange,
+		name: `${tableId}_row_${row.id}_selection`,
+		disabled: !row.getCanSelect(),
 		className: "mr-3 ml-[calc((var(--depth,0)*2)*4px)]"
 	}));
 };
 //#endregion
-export { r as DataTableRowSelectionCheckbox };
+export { DataTableRowSelectionCheckbox };
 
 //# sourceMappingURL=DataTableRowSelectionCheckbox.js.map

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,KAAiC,EAC5C,QACA,YACA,oBACA,WAAQ,OAAO,EAAI,GAAG,kBAME;CACxB,IAAM,EAAE,eAAY,GAAc;AAElC,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ,OAAO,EAAI,GAAG;EAAa,WAAU;EAExD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,OAAO,EAAE,WAAW,EAAI,OAAO;EACtB;EACQ;EACjB,MAAM,GAAG,EAAQ,OAAO,EAAI,GAAG;EAC/B,UAAU,CAAC,EAAI,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 => {\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"}

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

@@ -1,20 +1,29 @@
-import { Checkbox as e } from "../checkbox/Checkbox.js";
-import { useDataTable as t } from "./DataTableContext.js";
-import * as n from "react";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { useDataTable } from "./DataTableContext.js";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableSelectAllRowsCheckbox.tsx
-var r = ({ label: r = "All rows selection" }) => {
-	let { getIsAllPageRowsSelected: i, getIsSomePageRowsSelected: a, toggleAllPageRowsSelected: o, tableId: s } = t();
-	return /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("label", {
-		htmlFor: `${s}_all_rows_selection`,
+var DataTableSelectAllRowsCheckbox = ({ label = "All rows selection" }) => {
+	const { getIsAllPageRowsSelected, getIsSomePageRowsSelected, toggleAllPageRowsSelected, tableId } = useDataTable();
+	const getCheckedState = () => {
+		if (getIsSomePageRowsSelected()) return "indeterminate";
+		if (getIsAllPageRowsSelected()) return true;
+		return false;
+	};
+	const updateCheckedState = () => {
+		if (getIsSomePageRowsSelected()) return toggleAllPageRowsSelected(false);
+		return toggleAllPageRowsSelected(!getIsAllPageRowsSelected());
+	};
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement("label", {
+		htmlFor: `${tableId}_all_rows_selection`,
 		className: "sr-only"
-	}, r), /* @__PURE__ */ n.createElement(e, {
+	}, label), /* @__PURE__ */ React$1.createElement(Checkbox, {
 		size: "lg",
-		checked: a() ? "indeterminate" : !!i(),
-		onCheckedChange: () => a() ? o(!1) : o(!i()),
-		name: `${s}_allRowsSelection`
+		checked: getCheckedState(),
+		onCheckedChange: updateCheckedState,
+		name: `${tableId}_allRowsSelection`
 	}));
 };
 //#endregion
-export { r as DataTableSelectAllRowsCheckbox };
+export { DataTableSelectAllRowsCheckbox };
 
 //# sourceMappingURL=DataTableSelectAllRowsCheckbox.js.map

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,KAAkC,EAC7C,WAAQ,2BAGJ;CACJ,IAAM,EACJ,6BACA,8BACA,8BACA,eACE,GAAc;AAelB,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,SAAD;EAAO,SAAS,GAAG,EAAQ;EAAsB,WAAU;EAEnD,EADL,EACK,EACR,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,SAnBA,GAA2B,GAAS,kBACxC,EAAI,GAA0B;EAmB1B,uBAdA,GAA2B,GACtB,EAA0B,GAAM,GAElC,EAA0B,CAAC,GAA0B,CAAC;EAYzD,MAAM,GAAG,EAAQ;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,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"}

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

@@ -1,76 +1,101 @@
-import { styled as e } from "../../styled.js";
-import { Table as t } from "../table/Table.js";
-import { AsyncDataState as n } from "./DataTable.types.js";
-import { useDataTable as r } from "./DataTableContext.js";
-import { DataTableBody as i } from "./DataTableBody.js";
-import { DataTableHead as a } from "./DataTableHead.js";
-import { DataTableLoading as o } from "./DataTableLoading.js";
-import s from "clsx";
-import * as c from "react";
+import { styled } from "../../styled.js";
+import { Table } from "../table/Table.js";
+import { AsyncDataState } from "./DataTable.types.js";
+import { useDataTable } from "./DataTableContext.js";
+import { DataTableBody } from "./DataTableBody.js";
+import { DataTableHead } from "./DataTableHead.js";
+import { DataTableLoading } from "./DataTableLoading.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/data-table/DataTableTable.tsx
-var l = e("div", { base: [
+var TableContainer = styled("div", { base: [
 	"p-2",
 	"bg-white",
 	"rounded-lg"
-] }), u = ({ sortable: e, striped: u, theme: d = "white", className: f, scrollOptions: p = {
+] });
+var DataTableTable = ({ sortable, striped, theme = "white", className, scrollOptions = {
 	numberOfStickyColumns: 0,
 	stickyHeaderOffset: 0,
-	hasStickyHeader: !1,
-	showTotalInFirstColumn: !0,
+	hasStickyHeader: false,
+	showTotalInFirstColumn: true,
 	totalSuffix: "items"
-}, rowAction: m, withContainer: h = !1, ...g }) => {
-	let { asyncDataState: _, getTotalRows: v, getCanSomeRowsExpand: y, rowSelection: b, enableRowSelection: x, tableId: S, setTablePosition: C } = r(), w = c.useRef(null), T = c.useRef(!1), E = c.useRef(!1), D = c.useMemo(() => typeof window > "u" ? null : window, []);
-	c.useEffect(() => {
-		if (!D || typeof IntersectionObserver > "u") return;
-		let e = () => {
-			if (w.current) {
-				let e = w.current.getBoundingClientRect().top, t = w.current.getBoundingClientRect().bottom;
-				C((n) => ({
-					...n,
-					top: e,
-					bottom: t
+}, rowAction, withContainer = false, ...props }) => {
+	const { asyncDataState, getTotalRows, getCanSomeRowsExpand, rowSelection, enableRowSelection, tableId, setTablePosition } = useDataTable();
+	const tableRef = React$1.useRef(null);
+	const isTableVisible = React$1.useRef(false);
+	const isScrolling = React$1.useRef(false);
+	const scrollTarget = React$1.useMemo(() => {
+		if (typeof window === "undefined") return null;
+		return window;
+	}, []);
+	React$1.useEffect(() => {
+		if (!scrollTarget || typeof IntersectionObserver === "undefined") return;
+		const updatePosition = () => {
+			if (tableRef.current) {
+				const tableTop = tableRef.current.getBoundingClientRect().top;
+				const tableBottom = tableRef.current.getBoundingClientRect().bottom;
+				setTablePosition((prevPosition) => ({
+					...prevPosition,
+					top: tableTop,
+					bottom: tableBottom
 				}));
 			}
-			E.current = !1;
-		}, t = () => {
-			E.current ||= (requestAnimationFrame(e), !0);
+			isScrolling.current = false;
 		};
-		if (!w.current) return;
-		let n = p?.stickyHeaderOffset || 0, r = {
-			rootMargin: `-${n}px 0px -${n}px 0px`,
+		const handleScroll = () => {
+			if (!isScrolling.current) {
+				requestAnimationFrame(updatePosition);
+				isScrolling.current = true;
+			}
+		};
+		if (!tableRef.current) return;
+		const observerOffset = scrollOptions?.stickyHeaderOffset || 0;
+		const observerOptions = {
+			rootMargin: `-${observerOffset}px 0px -${observerOffset}px 0px`,
 			threshold: 0
-		}, i = new IntersectionObserver((e) => {
-			if (!e || e.length === 0) return;
-			let n = e[0];
-			T.current = n.isIntersecting, D && (n.isIntersecting ? D?.addEventListener("scroll", t) : D?.removeEventListener("scroll", t)), C((e) => ({
-				...e,
-				isVisible: n.isIntersecting
+		};
+		const handleTableIntersection = (entries) => {
+			if (!entries || entries.length === 0) return;
+			const entry = entries[0];
+			isTableVisible.current = entry.isIntersecting;
+			if (scrollTarget) if (entry.isIntersecting) scrollTarget?.addEventListener("scroll", handleScroll);
+			else scrollTarget?.removeEventListener("scroll", handleScroll);
+			setTablePosition((prevPosition) => ({
+				...prevPosition,
+				isVisible: entry.isIntersecting
 			}));
-		}, r);
-		return w.current && (p.hasStickyHeader || Object.keys(b || {}).length > 0) && i.observe(w.current), () => {
-			i.disconnect(), D && D?.removeEventListener("scroll", t);
+		};
+		const tableObserver = new IntersectionObserver(handleTableIntersection, observerOptions);
+		if (tableRef.current && (scrollOptions.hasStickyHeader || Object.keys(rowSelection || {}).length > 0)) tableObserver.observe(tableRef.current);
+		return () => {
+			tableObserver.disconnect();
+			if (scrollTarget) scrollTarget?.removeEventListener("scroll", handleScroll);
 		};
 	}, [
-		b,
-		p.hasStickyHeader,
-		p?.stickyHeaderOffset,
-		D,
-		C
+		rowSelection,
+		scrollOptions.hasStickyHeader,
+		scrollOptions?.stickyHeaderOffset,
+		scrollTarget,
+		setTablePosition
 	]);
-	let O = _ === n.PENDING, k = !O && v() === 0, A = () => {
-		let e = 0;
-		return y() && x ? e = 2 : (y() || x) && (e = 1), `${S}_${e}_control_columns`;
+	const isPending = asyncDataState === AsyncDataState.PENDING;
+	const isEmpty = !isPending && getTotalRows() === 0;
+	const buildScrollContainerKey = () => {
+		let controlColumnCount = 0;
+		if (getCanSomeRowsExpand() && !!enableRowSelection) controlColumnCount = 2;
+		else if (getCanSomeRowsExpand() || !!enableRowSelection) controlColumnCount = 1;
+		return `${tableId}_${controlColumnCount}_control_columns`;
 	};
-	if (k) return null;
-	let j = /* @__PURE__ */ c.createElement(t, {
+	if (isEmpty) return null;
+	const tableComponent = /* @__PURE__ */ React$1.createElement(Table, {
 		corners: "round",
 		size: "lg",
-		...g,
-		ref: w,
-		numberOfStickyColumns: p.numberOfStickyColumns,
-		scrollContainerCls: p.scrollContainerCls,
-		scrollContainerkey: A(),
-		className: s(f, O && [
+		...props,
+		ref: tableRef,
+		numberOfStickyColumns: scrollOptions.numberOfStickyColumns,
+		scrollContainerCls: scrollOptions.scrollContainerCls,
+		scrollContainerkey: buildScrollContainerKey(),
+		className: clsx(className, isPending && [
 			"opacity-50",
 			"pointer-events-none",
 			"transition-opacity",
@@ -78,21 +103,21 @@ var l = e("div", { base: [
 			"linear",
 			"delay-150"
 		])
-	}, /* @__PURE__ */ c.createElement(a, {
-		theme: d,
-		sortable: e,
-		isSticky: p.hasStickyHeader,
-		stickyOffset: p.stickyHeaderOffset,
-		className: p.headerCss,
-		showTotalInFirstColumn: p.showTotalInFirstColumn,
-		totalSuffix: p.totalSuffix
-	}), /* @__PURE__ */ c.createElement(i, {
-		striped: u,
-		rowAction: m
+	}, /* @__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__ */ c.createElement(c.Fragment, null, /* @__PURE__ */ c.createElement(o, null), h ? /* @__PURE__ */ c.createElement(l, { className: s(p.numberOfStickyColumns === 0 && "overflow-x-auto") }, j) : j);
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, /* @__PURE__ */ React$1.createElement(DataTableLoading, null), withContainer ? /* @__PURE__ */ React$1.createElement(TableContainer, { className: clsx(scrollOptions.numberOfStickyColumns === 0 && "overflow-x-auto") }, tableComponent) : tableComponent);
 };
 //#endregion
-export { u as DataTableTable };
+export { DataTableTable };
 
 //# sourceMappingURL=DataTableTable.js.map

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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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={clsx(\n        className,\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ]\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={clsx(\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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"}
+{"version":3,"file":"DataTableTable.js","names":[],"sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } 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={clsx(\n        className,\n        isPending && [\n          'opacity-50',\n          'pointer-events-none',\n          'transition-opacity',\n          'duration-250',\n          'linear',\n          'delay-150'\n        ]\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={clsx(\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

@@ -1,48 +1,55 @@
-import { Table as e } from "../../table/Table.js";
-import { AsyncDataState as t } from "../DataTable.types.js";
-import { useDataTable as n } from "../DataTableContext.js";
-import { DataTableHead as r } from "../DataTableHead.js";
-import { DataTableLoading as i } from "../DataTableLoading.js";
-import { SortableRoot as a } from "../../sortable/SortableRoot.js";
-import { DragAndDropTableBody as o } from "./DragAndDropTableBody.js";
-import s from "clsx";
-import * as c from "react";
-import { arrayMove as l } from "@dnd-kit/sortable";
+import { Table } from "../../table/Table.js";
+import { AsyncDataState } from "../DataTable.types.js";
+import { useDataTable } from "../DataTableContext.js";
+import { DataTableHead } from "../DataTableHead.js";
+import { DataTableLoading } from "../DataTableLoading.js";
+import { SortableRoot } from "../../sortable/SortableRoot.js";
+import { DragAndDropTableBody } from "./DragAndDropTableBody.js";
+import clsx from "clsx";
+import * as React$1 from "react";
+import { arrayMove } from "@dnd-kit/sortable";
 //#region src/components/data-table/drag-and-drop/DragAndDropTable.tsx
-var u = ({ idColumn: u = "id", onDragAndDrop: d, sortable: f, striped: p, theme: m, className: h, ...g }) => {
-	let { asyncDataState: _, data: v, setData: y } = n(), b = _ === t.PENDING, x = c.useMemo(() => v.results.map((e) => e[u]), [v]), S = c.useCallback(({ oldIndex: e, newIndex: t }) => {
-		let n = l(v.results, e, t), r = {
-			results: n,
-			total: v.total
+var DragAndDropTable = ({ idColumn = "id", onDragAndDrop, sortable, striped, theme, className, ...props }) => {
+	const { asyncDataState, data, setData } = useDataTable();
+	const isPending = asyncDataState === AsyncDataState.PENDING;
+	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
 		};
-		y({
-			results: n,
-			total: v.total
-		}), d?.({
-			oldIndex: e,
-			newIndex: t,
-			newData: r
+		setData({
+			results: sortedResults,
+			total: data.total
 		});
-	}, [v, d]);
-	return /* @__PURE__ */ c.createElement(a, {
-		onSortChange: S,
-		sortableIds: x
-	}, /* @__PURE__ */ c.createElement(i, null), /* @__PURE__ */ c.createElement(e, {
-		...g,
-		className: s(h, b && [
+		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: clsx(className, isPending && [
 			"opacity-50",
 			"pointer-events-none",
 			"transition-opacity,duration-250,linear,delay-150"
 		])
-	}, /* @__PURE__ */ c.createElement(r, {
-		theme: m,
-		sortable: f
-	}), /* @__PURE__ */ c.createElement(o, {
-		striped: p,
-		idColumn: u
+	}, /* @__PURE__ */ React$1.createElement(DataTableHead, {
+		theme,
+		sortable
+	}), /* @__PURE__ */ React$1.createElement(DragAndDropTableBody, {
+		striped,
+		idColumn
 	})));
 };
 //#endregion
-export { u as DragAndDropTable };
+export { DragAndDropTable };
 
 //# sourceMappingURL=DragAndDropTable.js.map