@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

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

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

@@ -1 +1 @@
-{"version":3,"file":"DragAndDropTable.js","names":[],"sources":["../../../../src/components/data-table/drag-and-drop/DragAndDropTable.tsx"],"sourcesContent":["import { arrayMove } from '@dnd-kit/sortable'\nimport 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"}
+{"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,oBAAoB,EAC/B,WAAW,MACX,eACA,UACA,SACA,OACA,WACA,GAAG,YACwB;CAC3B,MAAM,EAAE,gBAAgB,MAAM,YAAY,cAAc;CACxD,MAAM,YAAY,mBAAmB,eAAe;CAEpD,MAAM,SAAS,QAAM,cAEjB,KAAK,QAAQ,KAAK,QAAQ;AACxB,SAAO,IAAI;GACX,EACJ,CAAC,KAAK,CACP;CACD,MAAM,mBAAmB,QAAM,aAC5B,EAAE,UAAU,eAAe;EAC1B,MAAM,gBAAgB,UAAU,KAAK,SAAS,UAAU,SAAS;EACjE,MAAM,UAAU;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO;AAC7D,UAAQ;GAAE,SAAS;GAAe,OAAO,KAAK;GAAO,CAAC;AACtD,kBAAgB;GAAE;GAAU;GAAU;GAAS,CAAC;IAElD,CAAC,MAAM,cAAc,CACtB;AAED,QACE,wBAAA,cAAC,cAAD;EAAe,cAAc;EAAkB,aAAa;EAgB5C,EAfd,wBAAA,cAAC,kBAAA,KAAmB,EACpB,wBAAA,cAAC,OAAD;EACE,GAAI;EACJ,WAAW,KACT,WACA,aAAa;GACX;GACA;GACA;GACD,CACF;EAIK,EAFN,wBAAA,cAAC,eAAD;EAAsB;EAAiB;EAAY,CAAA,EACnD,wBAAA,cAAC,sBAAD;EAA+B;EAAmB;EAAY,CAAA,CACxD,CACM"}

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

@@ -1,20 +1,22 @@
-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";
+import { Table } from "../../table/Table.js";
+import { useDataTable } from "../DataTableContext.js";
+import { DragAndDropTableRow } from "./DragAndDropTableRow.js";
+import * as React$1 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
-	})));
+var DragAndDropTableBody = ({ striped = false, idColumn = "id", ...props }) => {
+	const { getRowModel } = useDataTable();
+	return /* @__PURE__ */ React$1.createElement(Table.Body, {
+		...props,
+		striped
+	}, getRowModel().rows.map((row) => {
+		return /* @__PURE__ */ React$1.createElement(DragAndDropTableRow, {
+			row,
+			key: row.id,
+			idColumn
+		});
+	}));
 };
 //#endregion
-export { i as DragAndDropTableBody };
+export { DragAndDropTableBody };
 
 //# sourceMappingURL=DragAndDropTableBody.js.map

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

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

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

@@ -1,24 +1,27 @@
-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";
+import { Table } from "../../table/Table.js";
+import { DataTableDataCell } from "../DataTableDataCell.js";
+import { SortableHandle } from "../../sortable/SortableHandle.js";
+import { SortableItem } from "../../sortable/SortableItem.js";
+import * as React$1 from "react";
+import { flexRender } 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
-	}))));
+var DragAndDropTableRow = ({ row, idColumn = "id" }) => {
+	const rowId = row.original[idColumn];
+	return /* @__PURE__ */ React$1.createElement(SortableItem, {
+		id: rowId,
+		asChild: true
+	}, /* @__PURE__ */ React$1.createElement(Table.Row, null, row.getVisibleCells().map((cell, i) => {
+		if (i === 0) return /* @__PURE__ */ React$1.createElement(Table.Cell, { key: cell.id }, /* @__PURE__ */ React$1.createElement(SortableHandle, {
+			targetId: rowId,
+			className: "inline-block"
+		}), flexRender(cell.column.columnDef.cell, cell.getContext()));
+		return /* @__PURE__ */ React$1.createElement(DataTableDataCell, {
+			key: cell.id,
+			cell
+		});
+	})));
 };
 //#endregion
-export { o as DragAndDropTableRow };
+export { DragAndDropTableRow };
 
 //# sourceMappingURL=DragAndDropTableRow.js.map

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

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

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

@@ -1,18 +1,22 @@
-import e from "invariant";
+import invariant 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
+var getSortDirection = (sorting) => {
+	if (sorting[0]) return sorting[0].desc ? "desc" : "asc";
+};
+var getNewAsyncData = async (getAsyncData, asyncDataOptions, paginationState, sorting, globalFilter) => {
+	const { pageIndex, pageSize } = paginationState;
+	const newData = await getAsyncData({
+		pageIndex: asyncDataOptions?.pageIndex ?? pageIndex,
+		pageSize: asyncDataOptions?.pageSize ?? pageSize,
+		sortBy: asyncDataOptions?.sortBy ?? sorting[0]?.id,
+		sortDirection: asyncDataOptions?.sortDirection ?? getSortDirection(sorting),
+		globalFilter: asyncDataOptions.globalFilter ?? globalFilter
 	});
-	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;
+	invariant(Array.isArray(newData?.results), "The getAsyncData function must return an object with a property `result` which must be an array");
+	invariant(newData && Number.isInteger(newData.total) && newData.total >= 0, "The getAsyncData function must return an object with a property `total` which must be a positive integer or zero");
+	return newData;
 };
 //#endregion
-export { n as getNewAsyncData };
+export { getNewAsyncData };
 
 //# sourceMappingURL=getNewAsyncData.js.map

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

@@ -1 +1 @@
-{"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"}
+{"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,oBAAoB,YAAqD;AAC7E,KAAI,QAAQ,GACV,QAAO,QAAQ,GAAG,OAAO,SAAS;;AAKtC,IAAa,kBAAkB,OAC7B,cACA,kBACA,iBACA,SACA,iBAC0C;CAC1C,MAAM,EAAE,WAAW,aAAa;CAShC,MAAM,UAAU,MAAM,aARP;EACb,WAAW,kBAAkB,aAAa;EAC1C,UAAU,kBAAkB,YAAY;EACxC,QAAQ,kBAAkB,UAAU,QAAQ,IAAI;EAChD,eAAe,kBAAkB,iBAAiB,iBAAiB,QAAQ;EAC3E,cAAc,iBAAiB,gBAAgB;EAChD,CAEyC;AAE1C,WACE,MAAM,QAAQ,SAAS,QAAQ,EAC/B,kGACD;AACD,WACE,WAAW,OAAO,UAAU,QAAQ,MAAM,IAAI,QAAQ,SAAS,GAC/D,mHACD;AAED,QAAO"}

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

@@ -1,11 +1,11 @@
-import { styled as e } from "../../../styled.js";
-import { Text as t } from "../../text/Text.js";
-import { AsyncDataState as n } from "../DataTable.types.js";
-import { useDataTable as r } from "../DataTableContext.js";
-import { Pagination as i } from "../../pagination/Pagination.js";
-import * as a from "react";
+import { styled } from "../../../styled.js";
+import { Text } from "../../text/Text.js";
+import { AsyncDataState } from "../DataTable.types.js";
+import { useDataTable } from "../DataTableContext.js";
+import { Pagination as Pagination$1 } from "../../pagination/Pagination.js";
+import * as React$1 from "react";
 //#region src/components/data-table/pagination/Pagination.tsx
-var o = e("nav", { base: [
+var StyledNav = styled("nav", { base: [
 	"flex",
 	"flex-col",
 	"justify-between",
@@ -16,25 +16,34 @@ var o = e("nav", { base: [
 	"gap-4",
 	"mt-4",
 	"md:flex-row"
-] }), s = ({ colorScheme: e, ...s }) => {
-	let { applyPagination: c, getState: l, getExpandedRowModel: u, getRowModel: d, setPageIndex: f, getTotalRows: p, getPageCount: m, asyncDataState: h, hasAsyncData: g } = r();
-	a.useEffect(() => {
-		c();
-	}, [c]);
-	let { pagination: _ } = l(), v = h !== n.PENDING && p() === 0, y = g ? m() > 1 : u().rows.length / _.pageSize > 1;
-	if (v || !y) return null;
-	let b = u().rows.length, x = b === 0 ? 0 : _.pageIndex * _.pageSize + 1, S = d().rows.length, C = g ? S === 0 ? x : x + S - 1 : Math.min(x + _.pageSize - 1, b), w = (e) => {
-		f(e - 1);
-	}, T = g ? m() : Math.max(1, Math.ceil(b / _.pageSize));
-	return /* @__PURE__ */ a.createElement(o, s, /* @__PURE__ */ a.createElement(t, { size: "sm" }, `${x} - ${C} of ${g ? p() : b} items`), /* @__PURE__ */ a.createElement(i, {
-		colorScheme: e,
-		selectedPage: _.pageIndex + 1,
-		pagesCount: T,
-		onSelectedPageChange: w
+] });
+/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
+var Pagination = ({ colorScheme, ...props }) => {
+	const { applyPagination, getState, getExpandedRowModel, getRowModel, setPageIndex, getTotalRows, getPageCount, asyncDataState, hasAsyncData } = useDataTable();
+	React$1.useEffect(() => {
+		applyPagination();
+	}, [applyPagination]);
+	const { pagination: paginationState } = getState();
+	const isEmpty = !(asyncDataState === AsyncDataState.PENDING) && getTotalRows() === 0;
+	const showPagination = hasAsyncData ? getPageCount() > 1 : getExpandedRowModel().rows.length / paginationState.pageSize > 1;
+	if (isEmpty || !showPagination) return null;
+	const totalVisibleRows = getExpandedRowModel().rows.length;
+	const start = totalVisibleRows === 0 ? 0 : paginationState.pageIndex * paginationState.pageSize + 1;
+	const asyncRowCount = getRowModel().rows.length;
+	const end = hasAsyncData ? asyncRowCount === 0 ? start : start + asyncRowCount - 1 : Math.min(start + paginationState.pageSize - 1, totalVisibleRows);
+	const setPage = (index) => {
+		setPageIndex(index - 1);
+	};
+	const pageCount = hasAsyncData ? getPageCount() : Math.max(1, Math.ceil(totalVisibleRows / paginationState.pageSize));
+	return /* @__PURE__ */ React$1.createElement(StyledNav, props, /* @__PURE__ */ React$1.createElement(Text, { size: "sm" }, `${start} - ${end} of ${hasAsyncData ? getTotalRows() : totalVisibleRows} items`), /* @__PURE__ */ React$1.createElement(Pagination$1, {
+		colorScheme,
+		selectedPage: paginationState.pageIndex + 1,
+		pagesCount: pageCount,
+		onSelectedPageChange: setPage
 	}));
 };
-s.displayName = "Pagination";
+Pagination.displayName = "Pagination";
 //#endregion
-export { s as Pagination };
+export { Pagination };
 
 //# sourceMappingURL=Pagination.js.map