@atom-learning/components 6.4.2 → 6.5.0

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

@@ -1,2 +1,77 @@
-import{ChevronDown as w,ChevronRight as x}from"@atom-learning/icons";import C from"clsx";import*as r from"react";import{styled as D}from"../../styled.js";import{Icon as E}from"../icon/Icon.js";import{Table as l}from"../table/Table.js";import{useDataTable as h}from"./DataTableContext.js";import{DataTableDataCell as v}from"./DataTableDataCell.js";import{DataTableRowSelectionCheckbox as y}from"./DataTableRowSelectionCheckbox.js";const S=D(l.Row,{base:["bg-[initial]","relative"],variants:{isSelected:{true:["odd:bg-primary-100"]},isDisabled:{true:["opacity-30"]},isFocusable:{true:["translate-y-0","duration-200","ease-out","transition-shadow","transition-transform","hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]","hover:-translate-y-px","hover:z-3","focus:outline-2","focus:outline-primary-500","focus:outline-solid","focus:-outline-offset-4","focus:[&_td]:bg-transparent"]}}}),d=e=>e?!!(e.closest("button, a, input, select, textarea")||e.getAttribute("role")==="button"):!1,k=({row:e,rowAction:n})=>{const{enableRowSelection:m,disabledRows:i,getCanSomeRowsExpand:u}=h(),s=!!(i!=null&&i[e.id]),p=e.getToggleExpandedHandler(),g=e.getToggleSelectedHandler(),f=()=>e.getIsSomeSelected()?"indeterminate":e.getIsSelected(),c=(t,o)=>{!n||!o.target.closest("tr")||d(o.target)||n(t.original,o)},b=t=>{if(t.key==="Enter"||t.key===" "){if(d(t.target))return;t.preventDefault(),c(e,t)}if(t.key==="ArrowDown"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.nextElementSibling;a&&a.tagName==="TR"&&a.focus()}if(t.key==="ArrowUp"){t.preventDefault();const o=t.target.closest("tr"),a=o==null?void 0:o.previousElementSibling;a&&a.tagName==="TR"&&a.focus()}};return r.createElement(S,{isSelected:e.getIsSelected(),isDisabled:s,isFocusable:!!n&&!s,...n&&{onClick:t=>c(e,t),tabIndex:0,className:"cursor-pointer",onKeyDown:b}},u()&&r.createElement(l.Cell,{"data-testid":`expand-icon-${e.id}`,onClick:p,className:C("w-10",e.getCanExpand()?"cursor-pointer":"cursor-auto")},e.getCanExpand()&&r.createElement(E,{is:e.getIsExpanded()?w:x})),m&&r.createElement(l.Cell,{className:"w-10"},r.createElement(y,{row:e,checked:f(),onCheckedChange:g})),e.getVisibleCells().map(t=>r.createElement(v,{key:t.id,cell:t})))};export{k as DataTableRow};
-//# sourceMappingURL=DataTableRow.js.map
+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";
+//#region src/components/data-table/DataTableRow.tsx
+var u = e(n.Row, {
+	base: ["bg-[initial]", "relative"],
+	variants: {
+		isSelected: { true: ["odd:bg-primary-100"] },
+		isDisabled: { true: ["opacity-30"] },
+		isFocusable: { true: [
+			"translate-y-0",
+			"duration-200",
+			"ease-out",
+			"transition-shadow",
+			"transition-transform",
+			"hover:shadow-[0px_4px_11px_0px_hsla(0,0%,12%,0.12)]",
+			"hover:-translate-y-px",
+			"hover:z-3",
+			"focus:outline-2",
+			"focus:outline-primary-500",
+			"focus:outline-solid",
+			"focus:-outline-offset-4",
+			"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));
+	};
+	return /* @__PURE__ */ s.createElement(u, {
+		isSelected: e.getIsSelected(),
+		isDisabled: g,
+		isFocusable: !!f && !g,
+		...f && {
+			onClick: (t) => b(e, t),
+			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();
+				}
+			}
+		}
+	}, 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
+	})));
+};
+//#endregion
+export { f as DataTableRow };
+
+//# sourceMappingURL=DataTableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRow.js","sources":["../../../src/components/data-table/DataTableRow.tsx"],"sourcesContent":["import { ChevronDown, ChevronRight } from '@atom-learning/icons'\nimport type { Row } from '@tanstack/react-table'\nimport 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"],"names":["StyledRow","styled","Table","isElementInteractive","element","DataTableRow","row","rowAction","enableRowSelection","disabledRows","getCanSomeRowsExpand","useDataTable","isDisabled","toggleExpandHandler","toggleSelectHandler","getCheckedState","handleRowClick","rowData","event","handleKeyDown","currentRow","nextRow","previousRow","React","clsx","Icon","ChevronDown","ChevronRight","DataTableRowSelectionCheckbox","cell","DataTableDataCell"],"mappings":"8aAkBA,MAAMA,EAAYC,EAAOC,EAAM,IAAK,CAClC,KAAM,CAAC,eAAgB,UAAU,EACjC,SAAU,CACR,WAAY,CACV,KAAM,CAAC,oBAAoB,CAC7B,EACA,WAAY,CACV,KAAM,CAAC,YAAY,CACrB,EACA,YAAa,CACX,KAAM,CACJ,gBACA,eACA,WACA,oBACA,uBACA,sDACA,wBACA,YACA,kBACA,4BACA,sBACA,0BACA,6BACF,CACF,CACF,CACF,CAAC,EAEKC,EAAwBC,GACvBA,EACD,CAAA,EAAAA,EAAQ,QAAQ,oCAAoC,GACpDA,EAAQ,aAAa,MAAM,IAAM,UAFhB,GAMVC,EAAe,CAAC,CAAE,IAAAC,EAAK,UAAAC,CAAU,IAAyB,CACrE,KAAM,CAAE,mBAAAC,EAAoB,aAAAC,EAAc,qBAAAC,CAAqB,EAC7DC,IAEIC,EAAa,CAAC,EAACH,GAAA,MAAAA,EAAeH,EAAI,EAAA,GAElCO,EAAsBP,EAAI,2BAC1BQ,EAAsBR,EAAI,yBAAyB,EAEnDS,EAAkB,IAClBT,EAAI,oBAA4B,gBAC7BA,EAAI,cAAc,EAGrBU,EAAiB,CACrBC,EACAC,IACG,CACC,CAACX,GAID,CADgBW,EAAM,OAAmB,QAAQ,IAAI,GACtCf,EAAqBe,EAAM,MAAiB,GAI/DX,EAAUU,EAAQ,SAAUC,CAAK,CACnC,EAEMC,EAAiBD,GAAoD,CACzE,GAAIA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,IAAK,CAC9C,GAAIf,EAAqBe,EAAM,MAAiB,EAC9C,OAEFA,EAAM,iBACNF,EACEV,EACAY,CACF,CACF,CACA,GAAIA,EAAM,MAAQ,YAAa,CAC7BA,EAAM,eAAe,EACrB,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDG,EAAUD,GAAA,KAAAA,OAAAA,EAAY,mBACxBC,GAAWA,EAAQ,UAAY,MACjCA,EAAQ,OAEZ,CACA,GAAIH,EAAM,MAAQ,UAAW,CAC3BA,EAAM,eAAe,EACrB,MAAME,EAAcF,EAAM,OAAuB,QAAQ,IAAI,EACvDI,EAAcF,GAAA,KAAAA,OAAAA,EAAY,uBAC5BE,GAAeA,EAAY,UAAY,MACzCA,EAAY,MAEhB,CAAA,CACF,EAEA,OACEC,EAAA,cAACvB,EAAA,CACC,WAAYM,EAAI,gBAChB,WAAYM,EACZ,YAAa,CAAC,CAACL,GAAa,CAACK,EAC5B,GAAIL,GAAa,CAChB,QAAUW,GAAUF,EAAeV,EAAKY,CAAK,EAC7C,SAAU,EACV,UAAW,iBACX,UAAWC,CACb,GAECT,EAAqB,GACpBa,EAAA,cAACrB,EAAM,KAAN,CACC,cAAa,eAAeI,EAAI,EAAE,GAClC,QAASO,EACT,UAAWW,EACT,OACAlB,EAAI,aAAA,EAAiB,iBAAmB,aAC1C,GAECA,EAAI,gBACHiB,EAAA,cAACE,EAAA,CAAK,GAAInB,EAAI,gBAAkBoB,EAAcC,CAAAA,CAAc,CAEhE,EAGDnB,GACCe,EAAA,cAACrB,EAAM,KAAN,CAAW,UAAU,QACpBqB,EAAA,cAACK,EAAA,CACC,IAAKtB,EACL,QAASS,IACT,gBAAiBD,EACnB,CACF,EAEDR,EAAI,gBAAgB,EAAE,IAAKuB,GACnBN,EAAA,cAACO,EAAA,CAAkB,IAAKD,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CAEJ"}
+{"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableRowSelectionCheckbox.js","sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        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"],"names":["DataTableRowSelectionCheckbox","row","checked","onCheckedChange","label","tableId","useDataTable","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAQa,MAAAA,EAAgC,CAAC,CAC5C,IAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,MAAAC,EAAQ,OAAOH,EAAI,EAAE,YACvB,IAK0B,CACxB,KAAM,CAAE,QAAAI,CAAQ,EAAIC,EAAAA,EAEpB,OACEC,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGJ,CAAO,QAAQJ,EAAI,EAAE,YAAA,EAAeG,CAAM,CAC/D,EACAG,EAAA,cAACG,EAAA,CACC,KAAK,KACL,MAAO,CAAE,UAAWT,EAAI,KAAM,EAC9B,QAASC,EACT,gBAAiBC,EACjB,KAAM,GAAGE,CAAO,QAAQJ,EAAI,EAAE,aAC9B,SAAU,CAACA,EAAI,eACf,UAAU,wCACZ,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DataTableRowSelectionCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableRowSelectionCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport type { Row } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/Checkbox'\nimport { Label } from '../label/Label'\nimport { useDataTable } from './DataTableContext'\n\nexport const DataTableRowSelectionCheckbox = ({\n  row,\n  checked,\n  onCheckedChange,\n  label = `Row ${row.id} selection`\n}: {\n  row: Row<Record<string, unknown>>\n  checked: boolean | 'indeterminate'\n  onCheckedChange: (value: boolean) => void\n  label?: string\n}): React.ReactElement => {\n  const { tableId } = useDataTable()\n\n  return (\n    <>\n      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_row_${row.id}_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n      <Checkbox\n        size=\"lg\"\n        style={{ '--depth': row.depth }}\n        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":";;;;;;AAQA,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,EAAe,MAAA,MACd,kBAAA,cAAC,GAAD,EAAO,SAAS,GAAG,EAAQ,OAAO,EAAI,GAAG,aAA4B,EAAd,EAAc,CACjD,EACtB,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"}

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

@@ -1,2 +1,19 @@
-import*as c from"@radix-ui/react-visually-hidden";import*as e from"react";import{Checkbox as s}from"../checkbox/Checkbox.js";import{Label as i}from"../label/Label.js";import{useDataTable as g}from"./DataTableContext.js";const b=({label:r="All rows selection"})=>{const{getIsAllPageRowsSelected:l,getIsSomePageRowsSelected:t,toggleAllPageRowsSelected:o,tableId:a}=g(),m=()=>t()?"indeterminate":!!l(),n=()=>t()?o(!1):o(!l());return e.createElement(e.Fragment,null,e.createElement(c.Root,null,e.createElement(i,{htmlFor:`${a}_all_rows_selection`},r)),e.createElement(s,{size:"lg",checked:m(),onCheckedChange:n,name:`${a}_allRowsSelection`}))};export{b as DataTableSelectAllRowsCheckbox};
-//# sourceMappingURL=DataTableSelectAllRowsCheckbox.js.map
+import { Checkbox as e } from "../checkbox/Checkbox.js";
+import { Label as t } from "../label/Label.js";
+import { useDataTable as n } from "./DataTableContext.js";
+import * as r from "react";
+import * as i from "@radix-ui/react-visually-hidden";
+//#region src/components/data-table/DataTableSelectAllRowsCheckbox.tsx
+var a = ({ label: a = "All rows selection" }) => {
+	let { getIsAllPageRowsSelected: o, getIsSomePageRowsSelected: s, toggleAllPageRowsSelected: c, tableId: l } = n();
+	return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(i.Root, null, /* @__PURE__ */ r.createElement(t, { htmlFor: `${l}_all_rows_selection` }, a)), /* @__PURE__ */ r.createElement(e, {
+		size: "lg",
+		checked: s() ? "indeterminate" : !!o(),
+		onCheckedChange: () => s() ? c(!1) : c(!o()),
+		name: `${l}_allRowsSelection`
+	}));
+};
+//#endregion
+export { a as DataTableSelectAllRowsCheckbox };
+
+//# sourceMappingURL=DataTableSelectAllRowsCheckbox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/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      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"names":["DataTableSelectAllRowsCheckbox","label","getIsAllPageRowsSelected","getIsSomePageRowsSelected","toggleAllPageRowsSelected","tableId","useDataTable","getCheckedState","updateCheckedState","React","VisuallyHidden","Label","Checkbox"],"mappings":"4NAOa,MAAAA,EAAiC,CAAC,CAC7C,MAAAC,EAAQ,oBACV,IAEM,CACJ,KAAM,CACJ,yBAAAC,EACA,0BAAAC,EACA,0BAAAC,EACA,QAAAC,CACF,EAAIC,EAAAA,EAEEC,EAAkB,IAClBJ,IAAoC,gBACpC,CAAAD,CAAAA,EAAAA,EAIAM,EAAqB,IACrBL,EAA0B,EACrBC,EAA0B,EAAK,EAEjCA,EAA0B,CAACF,EAAAA,CAA0B,EAG9D,OACEO,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACC,EAAe,KAAf,KACCD,EAAA,cAACE,EAAA,CAAM,QAAS,GAAGN,CAAO,uBAAwBJ,CAAM,CAC1D,EAEAQ,EAAA,cAACG,EAAA,CACC,KAAK,KACL,QAASL,IACT,gBAAiBC,EACjB,KAAM,GAAGH,CAAO,mBAClB,CAAA,CACF,CAEJ"}
+{"version":3,"file":"DataTableSelectAllRowsCheckbox.js","names":[],"sources":["../../../src/components/data-table/DataTableSelectAllRowsCheckbox.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Checkbox } from '../checkbox/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      <VisuallyHidden.Root>\n        <Label htmlFor={`${tableId}_all_rows_selection`}>{label}</Label>\n      </VisuallyHidden.Root>\n\n      <Checkbox\n        size=\"lg\"\n        checked={getCheckedState()}\n        onCheckedChange={updateCheckedState}\n        name={`${tableId}_allRowsSelection`}\n      />\n    </>\n  )\n}\n"],"mappings":";;;;;;AAOA,IAAa,KAAkC,EAC7C,WAAQ,2BAGJ;CACJ,IAAM,EACJ,6BACA,8BACA,8BACA,eACE,GAAc;AAelB,QACE,kBAAA,cAAA,EAAA,UAAA,MACE,kBAAA,cAAC,EAAe,MAAA,MACd,kBAAA,cAAC,GAAD,EAAO,SAAS,GAAG,EAAQ,sBAAqC,EAAd,EAAc,CAC5C,EAEtB,kBAAA,cAAC,GAAD;EACE,MAAK;EACL,SApBA,GAA2B,GAAS,kBACxC,EAAI,GAA0B;EAoB1B,uBAfA,GAA2B,GACtB,EAA0B,GAAM,GAElC,EAA0B,CAAC,GAA0B,CAAC;EAazD,MAAM,GAAG,EAAQ;EACjB,CAAA,CACD"}

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

@@ -1,2 +1,98 @@
-import C from"clsx";import*as t from"react";import{styled as A}from"../../styled.js";import{Table as B}from"../table/Table.js";import{AsyncDataState as L}from"./DataTable.types.js";import{DataTableBody as P}from"./DataTableBody.js";import{useDataTable as _}from"./DataTableContext.js";import{DataTableHead as M}from"./DataTableHead.js";import{DataTableLoading as V}from"./DataTableLoading.js";const j=A("div",{base:["p-2","bg-white","rounded-lg"]}),q=({sortable:g,striped:h,theme:S="white",className:k,scrollOptions:e={numberOfStickyColumns:0,stickyHeaderOffset:0,hasStickyHeader:!1,showTotalInFirstColumn:!0,totalSuffix:"items"},rowAction:v,withContainer:E=!1,...O})=>{const{asyncDataState:T,getTotalRows:I,getCanSomeRowsExpand:m,rowSelection:f,enableRowSelection:d,tableId:x,setTablePosition:l}=_(),n=t.useRef(null),H=t.useRef(!1),a=t.useRef(!1),r=t.useMemo(()=>typeof window>"u"?null:window,[]);t.useEffect(()=>{if(!r||typeof IntersectionObserver>"u")return;const o=()=>{if(n.current){const s=n.current.getBoundingClientRect().top,i=n.current.getBoundingClientRect().bottom;l(u=>({...u,top:s,bottom:i}))}a.current=!1},c=()=>{a.current||(requestAnimationFrame(o),a.current=!0)};if(!n.current)return;const y=(e==null?void 0:e.stickyHeaderOffset)||0,F={rootMargin:`-${y}px 0px -${y}px 0px`,threshold:0},N=s=>{if(!s||s.length===0)return;const i=s[0];H.current=i.isIntersecting,r&&(i.isIntersecting?r==null||r.addEventListener("scroll",c):r==null||r.removeEventListener("scroll",c)),l(u=>({...u,isVisible:i.isIntersecting}))},w=new IntersectionObserver(N,F);return n.current&&(e.hasStickyHeader||Object.keys(f||{}).length>0)&&w.observe(n.current),()=>{w.disconnect(),r&&(r==null||r.removeEventListener("scroll",c))}},[f,e.hasStickyHeader,e==null?void 0:e.stickyHeaderOffset,r,l]);const p=T===L.PENDING,D=!p&&I()===0,R=()=>{let o=0;return m()&&d?o=2:(m()||d)&&(o=1),`${x}_${o}_control_columns`};if(D)return null;const b=t.createElement(B,{corners:"round",size:"lg",...O,ref:n,numberOfStickyColumns:e.numberOfStickyColumns,scrollContainerCls:e.scrollContainerCls,scrollContainerkey:R(),className:C(k,p&&["opacity-50","pointer-events-none","transition-opacity","duration-250","linear","delay-150"])},t.createElement(M,{theme:S,sortable:g,isSticky:e.hasStickyHeader,stickyOffset:e.stickyHeaderOffset,className:e.headerCss,showTotalInFirstColumn:e.showTotalInFirstColumn,totalSuffix:e.totalSuffix}),t.createElement(P,{striped:h,rowAction:v}));return t.createElement(t.Fragment,null,t.createElement(V,null),E?t.createElement(j,{className:C(e.numberOfStickyColumns===0&&"overflow-x-auto")},b):b)};export{q as DataTableTable};
-//# sourceMappingURL=DataTableTable.js.map
+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";
+//#region src/components/data-table/DataTableTable.tsx
+var l = e("div", { base: [
+	"p-2",
+	"bg-white",
+	"rounded-lg"
+] }), u = ({ sortable: e, striped: u, theme: d = "white", className: f, scrollOptions: p = {
+	numberOfStickyColumns: 0,
+	stickyHeaderOffset: 0,
+	hasStickyHeader: !1,
+	showTotalInFirstColumn: !0,
+	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
+				}));
+			}
+			E.current = !1;
+		}, t = () => {
+			E.current ||= (requestAnimationFrame(e), !0);
+		};
+		if (!w.current) return;
+		let n = p?.stickyHeaderOffset || 0, r = {
+			rootMargin: `-${n}px 0px -${n}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
+			}));
+		}, r);
+		return w.current && (p.hasStickyHeader || Object.keys(b || {}).length > 0) && i.observe(w.current), () => {
+			i.disconnect(), D && D?.removeEventListener("scroll", t);
+		};
+	}, [
+		b,
+		p.hasStickyHeader,
+		p?.stickyHeaderOffset,
+		D,
+		C
+	]);
+	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`;
+	};
+	if (k) return null;
+	let j = /* @__PURE__ */ c.createElement(t, {
+		corners: "round",
+		size: "lg",
+		...g,
+		ref: w,
+		numberOfStickyColumns: p.numberOfStickyColumns,
+		scrollContainerCls: p.scrollContainerCls,
+		scrollContainerkey: A(),
+		className: s(f, O && [
+			"opacity-50",
+			"pointer-events-none",
+			"transition-opacity",
+			"duration-250",
+			"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
+	}));
+	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);
+};
+//#endregion
+export { u as DataTableTable };
+
+//# sourceMappingURL=DataTableTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableTable.js","sources":["../../../src/components/data-table/DataTableTable.tsx"],"sourcesContent":["import 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"],"names":["TableContainer","styled","DataTableTable","sortable","striped","theme","className","scrollOptions","rowAction","withContainer","props","asyncDataState","getTotalRows","getCanSomeRowsExpand","rowSelection","enableRowSelection","tableId","setTablePosition","useDataTable","tableRef","React","isTableVisible","isScrolling","scrollTarget","updatePosition","tableTop","tableBottom","prevPosition","handleScroll","observerOffset","observerOptions","handleTableIntersection","entries","entry","tableObserver","isPending","AsyncDataState","isEmpty","buildScrollContainerKey","controlColumnCount","tableComponent","Table","clsx","DataTableHead","DataTableBody","DataTableLoading"],"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,2 +1,48 @@
-import{arrayMove as T}from"@dnd-kit/sortable";import E from"clsx";import*as t from"react";import"../../sortable/SortableHandle.js";import"../../sortable/SortableItem.js";import{SortableRoot as I}from"../../sortable/SortableRoot.js";import{Table as g}from"../../table/Table.js";import{AsyncDataState as x}from"../DataTable.types.js";import{useDataTable as A}from"../DataTableContext.js";import{DataTableHead as C}from"../DataTableHead.js";import{DataTableLoading as N}from"../DataTableLoading.js";import{DragAndDropTableBody as S}from"./DragAndDropTableBody.js";const h=({idColumn:r="id",onDragAndDrop:o,sortable:m,striped:s,theme:i,className:p,...d})=>{const{asyncDataState:c,data:e,setData:D}=A(),u=c===x.PENDING,b=t.useMemo(()=>e.results.map(a=>a[r]),[e]),f=t.useCallback(({oldIndex:a,newIndex:l})=>{const n=T(e.results,a,l),y={results:n,total:e.total};D({results:n,total:e.total}),o==null||o({oldIndex:a,newIndex:l,newData:y})},[e,o]);return t.createElement(I,{onSortChange:f,sortableIds:b},t.createElement(N,null),t.createElement(g,{...d,className:E(p,u&&["opacity-50","pointer-events-none","transition-opacity,duration-250,linear,delay-150"])},t.createElement(C,{theme:i,sortable:m}),t.createElement(S,{striped:s,idColumn:r})))};export{h as DragAndDropTable};
-//# sourceMappingURL=DragAndDropTable.js.map
+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";
+//#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
+		};
+		y({
+			results: n,
+			total: v.total
+		}), d?.({
+			oldIndex: e,
+			newIndex: t,
+			newData: r
+		});
+	}, [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 && [
+			"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
+	})));
+};
+//#endregion
+export { u as DragAndDropTable };
+
+//# sourceMappingURL=DragAndDropTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport clsx from 'clsx'\nimport * as React from 'react'\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={clsx(\n          className,\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity,duration-250,linear,delay-150'\n          ]\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"names":["DragAndDropTable","idColumn","onDragAndDrop","sortable","striped","theme","className","props","asyncDataState","data","setData","useDataTable","isPending","AsyncDataState","rowIds","React","row","handleSortChange","oldIndex","newIndex","sortedResults","arrayMove","newData","Sortable","DataTableLoading","Table","clsx","DataTableHead","DragAndDropTableBody"],"mappings":"ijBAuBO,MAAMA,EAAmB,CAAC,CAC/B,SAAAC,EAAW,KACX,cAAAC,EACA,SAAAC,EACA,QAAAC,EACA,MAAAC,EACA,UAAAC,EACA,GAAGC,CACL,IAA6B,CAC3B,KAAM,CAAE,eAAAC,EAAgB,KAAAC,EAAM,QAAAC,CAAQ,EAAIC,EAAAA,EACpCC,EAAYJ,IAAmBK,EAAe,QAE9CC,EAASC,EAAM,QACnB,IACEN,EAAK,QAAQ,IAAKO,GACTA,EAAIf,CAAQ,CACpB,EACH,CAACQ,CAAI,CACP,EACMQ,EAAmBF,EAAM,YAC7B,CAAC,CAAE,SAAAG,EAAU,SAAAC,CAAS,IAAM,CAC1B,MAAMC,EAAgBC,EAAUZ,EAAK,QAASS,EAAUC,CAAQ,EAC1DG,EAAU,CAAE,QAASF,EAAe,MAAOX,EAAK,KAAM,EAC5DC,EAAQ,CAAE,QAASU,EAAe,MAAOX,EAAK,KAAM,CAAC,EACrDP,GAAA,MAAAA,EAAgB,CAAE,SAAAgB,EAAU,SAAAC,EAAU,QAAAG,CAAQ,EAChD,EACA,CAACb,EAAMP,CAAa,CACtB,EAEA,OACEa,EAAA,cAACQ,EAAA,CAAc,aAAcN,EAAkB,YAAaH,GAC1DC,EAAA,cAACS,EAAA,IAAiB,EAClBT,EAAA,cAACU,EAAA,CACE,GAAGlB,EACJ,UAAWmB,EACTpB,EACAM,GAAa,CACX,aACA,sBACA,kDACF,CACF,GAEAG,EAAA,cAACY,EAAA,CAAc,MAAOtB,EAAO,SAAUF,CAAAA,CAAU,EACjDY,EAAA,cAACa,EAAA,CAAqB,QAASxB,EAAS,SAAUH,CAAAA,CAAU,CAC9D,CACF,CAEJ"}
+{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport clsx from 'clsx'\nimport * as React from 'react'\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={clsx(\n          className,\n          isPending && [\n            'opacity-50',\n            'pointer-events-none',\n            'transition-opacity,duration-250,linear,delay-150'\n          ]\n        )}\n      >\n        <DataTableHead theme={theme} sortable={sortable} />\n        <DragAndDropTableBody striped={striped} idColumn={idColumn} />\n      </Table>\n    </Sortable.Root>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAuBA,IAAa,KAAoB,EAC/B,cAAW,MACX,kBACA,aACA,YACA,UACA,cACA,GAAG,QACwB;CAC3B,IAAM,EAAE,mBAAgB,SAAM,eAAY,GAAc,EAClD,IAAY,MAAmB,EAAe,SAE9C,IAAS,EAAM,cAEjB,EAAK,QAAQ,KAAK,MACT,EAAI,GACX,EACJ,CAAC,EAAK,CACP,EACK,IAAmB,EAAM,aAC5B,EAAE,aAAU,kBAAe;EAC1B,IAAM,IAAgB,EAAU,EAAK,SAAS,GAAU,EAAS,EAC3D,IAAU;GAAE,SAAS;GAAe,OAAO,EAAK;GAAO;AAE7D,EADA,EAAQ;GAAE,SAAS;GAAe,OAAO,EAAK;GAAO,CAAC,EACtD,IAAgB;GAAE;GAAU;GAAU;GAAS,CAAC;IAElD,CAAC,GAAM,EAAc,CACtB;AAED,QACE,kBAAA,cAAC,GAAD;EAAe,cAAc;EAAkB,aAAa;EAgB5C,EAfd,kBAAA,cAAC,GAAA,KAAmB,EACpB,kBAAA,cAAC,GAAD;EACE,GAAI;EACJ,WAAW,EACT,GACA,KAAa;GACX;GACA;GACA;GACD,CACF;EAIK,EAFN,kBAAA,cAAC,GAAD;EAAsB;EAAiB;EAAY,CAAA,EACnD,kBAAA,cAAC,GAAD;EAA+B;EAAmB;EAAY,CAAA,CACxD,CACM"}

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

@@ -1,2 +1,20 @@
-import*as o from"react";import{Table as d}from"../../table/Table.js";import{useDataTable as i}from"../DataTableContext.js";import{DragAndDropTableRow as p}from"./DragAndDropTableRow.js";const l=({striped:r=!1,idColumn:t="id",...m})=>{const{getRowModel:a}=i();return o.createElement(d.Body,{...m,striped:r},a().rows.map(e=>o.createElement(p,{row:e,key:e.id,idColumn:t})))};export{l as DragAndDropTableBody};
-//# sourceMappingURL=DragAndDropTableBody.js.map
+import { Table as e } from "../../table/Table.js";
+import { useDataTable as t } from "../DataTableContext.js";
+import { DragAndDropTableRow as n } from "./DragAndDropTableRow.js";
+import * as r from "react";
+//#region src/components/data-table/drag-and-drop/DragAndDropTableBody.tsx
+var i = ({ striped: i = !1, idColumn: a = "id", ...o }) => {
+	let { getRowModel: s } = t();
+	return /* @__PURE__ */ r.createElement(e.Body, {
+		...o,
+		striped: i
+	}, s().rows.map((e) => /* @__PURE__ */ r.createElement(n, {
+		row: e,
+		key: e.id,
+		idColumn: a
+	})));
+};
+//#endregion
+export { i as DragAndDropTableBody };
+
+//# sourceMappingURL=DragAndDropTableBody.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableBody.js","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> & { idColumn?: string }\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"],"names":["DragAndDropTableBody","striped","idColumn","props","getRowModel","useDataTable","React","Table","row","DragAndDropTableRow"],"mappings":"0LAWa,MAAAA,EAAuB,CAAC,CACnC,QAAAC,EAAU,GACV,SAAAC,EAAW,KACX,GAAGC,CACL,IAA0B,CACxB,KAAM,CAAE,YAAAC,CAAY,EAAIC,EAAa,EACrC,OACEC,EAAA,cAACC,EAAM,KAAN,CAAY,GAAGJ,EAAO,QAASF,CAAAA,EAC7BG,EAAc,EAAA,KAAK,IAAKI,GAErBF,EAAA,cAACG,EAAA,CAAoB,IAAKD,EAAK,IAAKA,EAAI,GAAI,SAAUN,CAAU,CAAA,CAEnE,CACH,CAEJ"}
+{"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,KAAwB,EACnC,aAAU,IACV,cAAW,MACX,GAAG,QACqB;CACxB,IAAM,EAAE,mBAAgB,GAAc;AACtC,QACE,kBAAA,cAAC,EAAM,MAAP;EAAY,GAAI;EAAgB;EAMnB,EALV,GAAa,CAAC,KAAK,KAAK,MAErB,kBAAA,cAAC,GAAD;EAA0B;EAAK,KAAK,EAAI;EAAc;EAAY,CAAA,CAEpE,CACS"}

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

@@ -1,2 +1,24 @@
-import{flexRender as i}from"@tanstack/react-table";import*as l from"react";import{SortableHandle as n}from"../../sortable/SortableHandle.js";import{SortableItem as c}from"../../sortable/SortableItem.js";import"../../sortable/SortableRoot.js";import{Table as r}from"../../table/Table.js";import{DataTableDataCell as d}from"../DataTableDataCell.js";const p=({row:t,idColumn:m="id"})=>{const o=t.original[m];return l.createElement(c,{id:o,asChild:!0},l.createElement(r.Row,null,t.getVisibleCells().map((e,a)=>a===0?l.createElement(r.Cell,{key:e.id},l.createElement(n,{targetId:o,className:"inline-block"}),i(e.column.columnDef.cell,e.getContext())):l.createElement(d,{key:e.id,cell:e}))))};export{p as DragAndDropTableRow};
-//# sourceMappingURL=DragAndDropTableRow.js.map
+import { Table as e } from "../../table/Table.js";
+import { DataTableDataCell as t } from "../DataTableDataCell.js";
+import { SortableHandle as n } from "../../sortable/SortableHandle.js";
+import { SortableItem as r } from "../../sortable/SortableItem.js";
+import * as i from "react";
+import { flexRender as a } from "@tanstack/react-table";
+//#region src/components/data-table/drag-and-drop/DragAndDropTableRow.tsx
+var o = ({ row: o, idColumn: s = "id" }) => {
+	let c = o.original[s];
+	return /* @__PURE__ */ i.createElement(r, {
+		id: c,
+		asChild: !0
+	}, /* @__PURE__ */ i.createElement(e.Row, null, o.getVisibleCells().map((r, o) => o === 0 ? /* @__PURE__ */ i.createElement(e.Cell, { key: r.id }, /* @__PURE__ */ i.createElement(n, {
+		targetId: c,
+		className: "inline-block"
+	}), a(r.column.columnDef.cell, r.getContext())) : /* @__PURE__ */ i.createElement(t, {
+		key: r.id,
+		cell: r
+	}))));
+};
+//#endregion
+export { o as DragAndDropTableRow };
+
+//# sourceMappingURL=DragAndDropTableRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTableRow.js","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"],"names":["DragAndDropTableRow","row","idColumn","rowId","React","Sortable","Table","cell","i","flexRender","DataTableDataCell"],"mappings":"2VAea,MAAAA,EAAsB,CAAC,CAClC,IAAAC,EACA,SAAAC,EAAW,IACb,IAAkC,CAChC,MAAMC,EAAQF,EAAI,SAASC,CAAQ,EACnC,OACEE,EAAA,cAACC,EAAA,CAAc,GAAIF,EAAO,QAAO,EAC/BC,EAAAA,EAAA,cAACE,EAAM,IAAN,KACEL,EAAI,gBAAgB,EAAE,IAAI,CAACM,EAAMC,IAC5BA,IAAM,EAENJ,EAAA,cAACE,EAAM,KAAN,CAAW,IAAKC,EAAK,EACpBH,EAAAA,EAAA,cAACC,EAAA,CAAgB,SAAUF,EAAO,UAAU,eAAe,EAC1DM,EAAWF,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAA,CAAY,CAC3D,EAGGH,EAAA,cAACM,EAAA,CAAkB,IAAKH,EAAK,GAAI,KAAMA,CAAM,CAAA,CACrD,CACH,CACF,CAEJ"}
+{"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,KAAuB,EAClC,QACA,cAAW,WACqB;CAChC,IAAM,IAAQ,EAAI,SAAS;AAC3B,QACE,kBAAA,cAAC,GAAD;EAAe,IAAI;EAAO,SAAA;EAcV,EAbd,kBAAA,cAAC,EAAM,KAAA,MACJ,EAAI,iBAAiB,CAAC,KAAK,GAAM,MAC5B,MAAM,IAEN,kBAAA,cAAC,EAAM,MAAP,EAAY,KAAK,EAAK,IAGT,EAFX,kBAAA,cAAC,GAAD;EAAiB,UAAU;EAAO,WAAU;EAAiB,CAAA,EAC5D,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,YAAY,CAAC,CAC/C,GAGV,kBAAA,cAAC,GAAD;EAAmB,KAAK,EAAK;EAAU;EAAQ,CAAA,CACtD,CACQ,CACE"}

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

@@ -1,2 +1,18 @@
-import n from"invariant";const d=e=>{if(e[0])return e[0].desc?"desc":"asc"},g=async(e,t,i,o,s)=>{var a;const{pageIndex:l,pageSize:c}=i,u={pageIndex:(t==null?void 0:t.pageIndex)??l,pageSize:(t==null?void 0:t.pageSize)??c,sortBy:(t==null?void 0:t.sortBy)??((a=o[0])==null?void 0:a.id),sortDirection:(t==null?void 0:t.sortDirection)??d(o),globalFilter:t.globalFilter??s},r=await e(u);return n(Array.isArray(r==null?void 0:r.results),"The getAsyncData function must return an object with a property `result` which must be an array"),n(r&&Number.isInteger(r.total)&&r.total>=0,"The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"),r};export{g as getNewAsyncData};
-//# sourceMappingURL=getNewAsyncData.js.map
+import e from "invariant";
+//#region src/components/data-table/getNewAsyncData.ts
+var t = (e) => {
+	if (e[0]) return e[0].desc ? "desc" : "asc";
+}, n = async (n, r, i, a, o) => {
+	let { pageIndex: s, pageSize: c } = i, l = await n({
+		pageIndex: r?.pageIndex ?? s,
+		pageSize: r?.pageSize ?? c,
+		sortBy: r?.sortBy ?? a[0]?.id,
+		sortDirection: r?.sortDirection ?? t(a),
+		globalFilter: r.globalFilter ?? o
+	});
+	return e(Array.isArray(l?.results), "The getAsyncData function must return an object with a property `result` which must be an array"), e(l && Number.isInteger(l.total) && l.total >= 0, "The getAsyncData function must return an object with a property `total` which must be a positive integer or zero"), l;
+};
+//#endregion
+export { n as getNewAsyncData };
+
+//# sourceMappingURL=getNewAsyncData.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"getNewAsyncData.js","sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"names":["getSortDirection","sorting","getNewAsyncData","getAsyncData","asyncDataOptions","paginationState","globalFilter","_a","pageIndex","pageSize","params","newData","invariant"],"mappings":"yBAaA,MAAMA,EAAoBC,GAAqD,CAC7E,GAAIA,EAAQ,CAAC,EACX,OAAOA,EAAQ,CAAC,EAAE,KAAO,OAAS,KAGtC,EAEaC,EAAkB,MAC7BC,EACAC,EACAC,EACAJ,EACAK,IAC0C,CA1B5C,IAAAC,EA2BE,KAAM,CAAE,UAAAC,EAAW,SAAAC,CAAS,EAAIJ,EAC1BK,EAAS,CACb,WAAWN,GAAA,KAAAA,OAAAA,EAAkB,YAAaI,EAC1C,UAAUJ,GAAA,KAAA,OAAAA,EAAkB,WAAYK,EACxC,QAAQL,GAAA,KAAAA,OAAAA,EAAkB,WAAUG,EAAAN,EAAQ,CAAC,IAAT,KAAA,OAAAM,EAAY,IAChD,eAAeH,GAAA,YAAAA,EAAkB,gBAAiBJ,EAAiBC,CAAO,EAC1E,aAAcG,EAAiB,cAAgBE,CACjD,EAEMK,EAAU,MAAMR,EAAaO,CAAM,EAEzC,OAAAE,EACE,MAAM,QAAQD,GAAA,KAAAA,OAAAA,EAAS,OAAO,EAC9B,iGACF,EACAC,EACED,GAAW,OAAO,UAAUA,EAAQ,KAAK,GAAKA,EAAQ,OAAS,EAC/D,kHACF,EAEOA,CACT"}
+{"version":3,"file":"getNewAsyncData.js","names":[],"sources":["../../../src/components/data-table/getNewAsyncData.ts"],"sourcesContent":["import type {\n  PaginationState,\n  SortDirection,\n  SortingState\n} from '@tanstack/react-table'\nimport invariant from 'invariant'\n\nimport type {\n  TAsyncDataOptions,\n  TAsyncDataResult,\n  TGetAsyncData\n} from './DataTable.types'\n\nconst getSortDirection = (sorting: SortingState): SortDirection | undefined => {\n  if (sorting[0]) {\n    return sorting[0].desc ? 'desc' : 'asc'\n  }\n  return undefined\n}\n\nexport const getNewAsyncData = async (\n  getAsyncData: TGetAsyncData,\n  asyncDataOptions: Partial<TAsyncDataOptions>,\n  paginationState: PaginationState,\n  sorting: SortingState,\n  globalFilter: string\n): Promise<TAsyncDataResult | undefined> => {\n  const { pageIndex, pageSize } = paginationState\n  const params = {\n    pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,\n    pageSize: asyncDataOptions?.pageSize ?? pageSize,\n    sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,\n    sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),\n    globalFilter: asyncDataOptions.globalFilter ?? globalFilter\n  }\n\n  const newData = await getAsyncData(params)\n\n  invariant(\n    Array.isArray(newData?.results),\n    'The getAsyncData function must return an object with a property `result` which must be an array'\n  )\n  invariant(\n    newData && Number.isInteger(newData.total) && newData.total >= 0,\n    'The getAsyncData function must return an object with a property `total` which must be a positive integer or zero'\n  )\n\n  return newData\n}\n"],"mappings":";;AAaA,IAAM,KAAoB,MAAqD;AAC7E,KAAI,EAAQ,GACV,QAAO,EAAQ,GAAG,OAAO,SAAS;GAKzB,IAAkB,OAC7B,GACA,GACA,GACA,GACA,MAC0C;CAC1C,IAAM,EAAE,cAAW,gBAAa,GAS1B,IAAU,MAAM,EARP;EACb,WAAW,GAAkB,aAAa;EAC1C,UAAU,GAAkB,YAAY;EACxC,QAAQ,GAAkB,UAAU,EAAQ,IAAI;EAChD,eAAe,GAAkB,iBAAiB,EAAiB,EAAQ;EAC3E,cAAc,EAAiB,gBAAgB;EAChD,CAEyC;AAW1C,QATA,EACE,MAAM,QAAQ,GAAS,QAAQ,EAC/B,kGACD,EACD,EACE,KAAW,OAAO,UAAU,EAAQ,MAAM,IAAI,EAAQ,SAAS,GAC/D,mHACD,EAEM"}