@tulip-systems/core 0.8.2 → 0.9.0

package/dist/src/modules/data-tables/strategies/pagination/components.mjs

@@ -0,0 +1,131 @@
+"use client";
+
+import { Button } from "../../../../components/ui/button.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../../components/ui/select.client.mjs";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/strategies/pagination/components.tsx
+function PaginationTableFooter({ table }) {
+	const selected = Object.keys(table.getState().rowSelection).length;
+	const total = table.getRowCount();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-y-4 px-2 md:flex-row md:items-center md:justify-between",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [selected > 0 && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "icon",
+				variant: "ghost",
+				className: "h-4 w-4 rounded-full",
+				onClick: () => table.resetRowSelection(),
+				children: /* @__PURE__ */ jsx(XIcon, { className: "h-2 w-2" })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex-1 text-muted-foreground text-sm",
+				children: [
+					selected ?? table.getFilteredSelectedRowModel().rows.length,
+					" of",
+					" ",
+					total ?? table.getFilteredRowModel().rows.length,
+					" row(s) selected."
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-x-6 md:justify-start lg:space-x-8",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "hidden items-center space-x-2 md:flex",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "font-medium text-sm",
+						children: "Rows per page"
+					}), /* @__PURE__ */ jsxs(Select, {
+						value: `${table.getState().pagination.pageSize}`,
+						onValueChange: (value) => {
+							table.setPageSize(Number(value));
+						},
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "h-8 w-[70px]",
+							children: /* @__PURE__ */ jsx(SelectValue, { placeholder: table.getState().pagination.pageSize })
+						}), /* @__PURE__ */ jsx(SelectContent, {
+							side: "top",
+							children: [
+								10,
+								20,
+								30,
+								40,
+								50,
+								100,
+								300,
+								500
+							].map((pageSize) => /* @__PURE__ */ jsx(SelectItem, {
+								value: `${pageSize}`,
+								children: pageSize
+							}, pageSize))
+						})]
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-center font-medium text-sm",
+					children: [
+						"Page ",
+						table.getState().pagination.pageIndex + 1,
+						" of ",
+						table.getPageCount()
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center space-x-2",
+					children: [
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							className: "hidden h-8 w-8 p-0 lg:flex",
+							onClick: () => table.setPageIndex(0),
+							disabled: !table.getCanPreviousPage(),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Go to first page"
+							}), /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							className: "h-8 w-8 p-0",
+							onClick: () => table.previousPage(),
+							disabled: !table.getCanPreviousPage(),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Go to previous page"
+							}), /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							className: "h-8 w-8 p-0",
+							onClick: () => table.nextPage(),
+							disabled: !table.getCanNextPage(),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Go to next page"
+							}), /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })]
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							type: "button",
+							variant: "outline",
+							className: "hidden h-8 w-8 p-0 lg:flex",
+							onClick: () => table.setPageIndex(table.getPageCount() - 1),
+							disabled: !table.getCanNextPage(),
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "sr-only",
+								children: "Go to last page"
+							}), /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })]
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+
+//#endregion
+export { PaginationTableFooter };

package/dist/src/modules/data-tables/strategies/pagination/strategy.d.mts

@@ -0,0 +1,12 @@
+import { TableStrategy } from "../../lib/types.mjs";
+
+//#region src/modules/data-tables/strategies/pagination/strategy.d.ts
+type UsePaginationStrategyInput = {
+  total: number | undefined;
+};
+type PaginationStrategy = typeof usePaginationStrategy;
+declare function usePaginationStrategy({
+  total
+}: UsePaginationStrategyInput): TableStrategy;
+//#endregion
+export { PaginationStrategy, UsePaginationStrategyInput, usePaginationStrategy };

package/dist/src/modules/data-tables/strategies/pagination/strategy.mjs

@@ -0,0 +1,45 @@
+"use client";
+
+import { tableSearchParams } from "../../lib/search-params.mjs";
+import { handleSortingChange } from "../helpers/sorting.mjs";
+import { useQueryStates } from "nuqs";
+
+//#region src/modules/data-tables/strategies/pagination/strategy.ts
+function usePaginationStrategy({ total }) {
+	const [query, setQuery] = useQueryStates(tableSearchParams);
+	const paginationState = {
+		pageIndex: query.cursor,
+		pageSize: query.limit
+	};
+	const sortingState = query.sort ? [{
+		id: query.sort,
+		desc: query.order === "desc"
+	}] : [];
+	const resetCursor = () => 0;
+	return {
+		name: "pagination",
+		rowCount: total,
+		paginationState,
+		manualPagination: true,
+		onPaginationChange: (updater) => {
+			const newState = typeof updater === "function" ? updater(paginationState) : updater;
+			setQuery({
+				cursor: Math.max(newState.pageIndex, 0),
+				limit: newState.pageSize
+			});
+			return newState;
+		},
+		tableSearchParams,
+		resetCursor,
+		sortingState,
+		manualSorting: true,
+		onSortingChange: handleSortingChange({
+			sortingState,
+			setQuery,
+			resetCursor
+		})
+	};
+}
+
+//#endregion
+export { usePaginationStrategy };

package/dist/src/modules/data-tables/tables/data-table/components/body.mjs

@@ -0,0 +1,32 @@
+"use client";
+
+import { Allowed } from "../../../../auth/components/allowed.client.mjs";
+import { TableBody, TableCell, TableRow } from "../../../components/table.mjs";
+import { DataTableRow } from "./row.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/tables/data-table/components/body.tsx
+function DataTableBody({ table }) {
+	const { rows } = table.getRowModel();
+	return /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? rows.map((row) => /* @__PURE__ */ jsx(DataTableRow, {
+		row,
+		table,
+		children: row.getVisibleCells().map((cell) => {
+			const columnDef = cell.column.columnDef;
+			const children = flexRender(cell.column.columnDef.cell, cell.getContext());
+			if (!columnDef.permissions) return /* @__PURE__ */ jsx(Fragment, { children }, cell.id);
+			return /* @__PURE__ */ jsx(Allowed, {
+				permission: columnDef.permissions,
+				children
+			}, cell.id);
+		})
+	}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: table.getAllFlatColumns().length,
+		className: "h-24 text-center",
+		children: "Geen resultaten gevonden"
+	}) }) });
+}
+
+//#endregion
+export { DataTableBody };

package/dist/src/modules/data-tables/tables/data-table/components/header.mjs

@@ -0,0 +1,12 @@
+"use client";
+
+import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/data-table/components/header.tsx
+function DataTableHeader({ table }) {
+	return /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHeaderCell, { header }, header.id)) }, headerGroup.id)) });
+}
+
+//#endregion
+export { DataTableHeader };

package/dist/src/modules/data-tables/tables/data-table/components/row.mjs

@@ -0,0 +1,13 @@
+import { TableRow } from "../../../components/table.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/data-table/components/row.tsx
+function DataTableRow({ row, table, className, ...props }) {
+	return /* @__PURE__ */ jsx(TableRow, {
+		...props,
+		"data-state": row.getIsSelected() && "selected"
+	});
+}
+
+//#endregion
+export { DataTableRow };

package/dist/src/modules/data-tables/tables/data-table/components/table.d.mts

@@ -0,0 +1,8 @@
+import { Table } from "../../../components/table.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/data-tables/tables/data-table/components/table.d.ts
+declare function DataTable<TData>(props: ComponentProps<typeof Table>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DataTable };

package/dist/src/modules/data-tables/tables/data-table/components/table.mjs

@@ -0,0 +1,42 @@
+"use client";
+
+import { FloatingCommandMenu } from "../../../../commands/components/menus/floating-menu.client.mjs";
+import { Table } from "../../../components/table.mjs";
+import { useTable } from "../../../hooks/use-table.client.mjs";
+import { TableBottombar, TableFooter } from "../../../components/footer.mjs";
+import { DataTableBody } from "./body.mjs";
+import { DataTableHeader } from "./header.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/data-table/components/table.tsx
+function DataTable(props) {
+	const table = useTable();
+	const meta = table.options.meta;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "rounded-md border",
+				children: /* @__PURE__ */ jsxs(Table, {
+					...props,
+					children: [
+						/* @__PURE__ */ jsx(DataTableHeader, { table }),
+						/* @__PURE__ */ jsx(DataTableBody, { table }),
+						/* @__PURE__ */ jsx(TableFooter, { table })
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(TableBottombar, { table }),
+			meta.commands && /* @__PURE__ */ jsx(FloatingCommandMenu, {
+				data: meta.selectedData,
+				commands: meta.commands,
+				meta,
+				state: meta.selectedData?.length ? "open" : "closed",
+				onSuccess: () => table.resetRowSelection()
+			})
+		]
+	});
+}
+
+//#endregion
+export { DataTable };

package/dist/src/modules/data-tables/tables/inline-table/components/body.mjs

@@ -0,0 +1,69 @@
+"use client";
+
+import { Allowed } from "../../../../auth/components/allowed.client.mjs";
+import { TableBody, TableCell, TableRow } from "../../../components/table.mjs";
+import { useInlineTableContext } from "../hooks/context.client.mjs";
+import { useInlineDataTableHotkeys } from "../hooks/use-hotkeys.client.mjs";
+import { InlineTableRow } from "./row.client.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+import { SortableContext, rectSortingStrategy, sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
+import { restrictToParentElement, restrictToVerticalAxis } from "@dnd-kit/modifiers";
+
+//#region src/modules/data-tables/tables/inline-table/components/body.tsx
+function InlineTableBody({ table }) {
+	const context = useInlineTableContext();
+	const { rows } = table.getRowModel();
+	const { setNodeRef } = useDroppable({ id: "inline-data-table" });
+	const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	useInlineDataTableHotkeys(context.hotkeys);
+	if (rows?.length === 0) return /* @__PURE__ */ jsx(TableBody, { children: /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+		colSpan: table.getAllFlatColumns().length + 1 + (context.isDraggable ? 1 : 0) + (table.options.enableRowSelection ? 1 : 0),
+		className: "h-24 text-center",
+		children: "Geen resultaten gevonden"
+	}) }) });
+	function handleDragEnd(event) {
+		if (!context.isDraggable) return;
+		const { active, over } = event;
+		if (active.id !== over?.id) {
+			const fromIndex = rows.findIndex((item) => item.id === active.id);
+			const toIndex = rows.findIndex((item) => item.id === over?.id);
+			context.moveRow({
+				fromIndex,
+				toIndex
+			});
+		}
+	}
+	return /* @__PURE__ */ jsx(DndContext, {
+		sensors,
+		onDragEnd: handleDragEnd,
+		collisionDetection: closestCenter,
+		modifiers: [restrictToVerticalAxis, restrictToParentElement],
+		children: /* @__PURE__ */ jsx(SortableContext, {
+			items: rows.map((row) => row.id),
+			strategy: rectSortingStrategy,
+			children: /* @__PURE__ */ jsx(TableBody, {
+				ref: setNodeRef,
+				children: rows.map((row) => /* @__PURE__ */ jsx(InlineTableRow, {
+					row,
+					"data-row-id": row.id,
+					table,
+					className: "relative",
+					children: row.getVisibleCells().map((cell) => {
+						const columnDef = cell.column.columnDef;
+						const children = flexRender(cell.column.columnDef.cell, cell.getContext());
+						if (!columnDef.permissions) return /* @__PURE__ */ jsx(Fragment, { children }, cell.id);
+						return /* @__PURE__ */ jsx(Allowed, {
+							permission: columnDef.permissions,
+							children
+						}, cell.id);
+					})
+				}, row.id))
+			})
+		})
+	});
+}
+
+//#endregion
+export { InlineTableBody };

package/dist/src/modules/data-tables/tables/inline-table/components/cells/common.d.mts

@@ -0,0 +1,11 @@
+import { TableCell } from "../../../../components/table.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/cells/common.d.ts
+declare function TableInlineCell({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof TableCell>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TableInlineCell };

package/dist/src/modules/data-tables/tables/inline-table/components/cells/common.mjs

@@ -0,0 +1,14 @@
+import { cn } from "../../../../../../lib/utils/cn.mjs";
+import { TableCell } from "../../../../components/table.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/inline-table/components/cells/common.tsx
+function TableInlineCell({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TableCell, {
+		className: cn("h-8 border-l p-0 align-middle first:border-0 focus-within:bg-accent focus-within:text-accent-foreground [&:has([role=checkbox])]:pr-0", className),
+		...props
+	});
+}
+
+//#endregion
+export { TableInlineCell };

package/dist/src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.d.mts

@@ -0,0 +1,24 @@
+import { TableColumnDef } from "../../../../lib/types.mjs";
+import "../../../../../../../data-tables.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CellContext } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.d.ts
+/**
+ * Create a new column with the drag handle
+ */
+type TableDragHandleProps<TData, TValue> = Pick<CellContext<TData, TValue>, "row"> & {
+  className?: string;
+  disabled?: boolean;
+};
+declare function TableDragHandle<TData, TValue>({
+  row,
+  className,
+  disabled
+}: TableDragHandleProps<TData, TValue>): react_jsx_runtime0.JSX.Element;
+/**
+ * Create a new column with the drag handle
+ */
+declare const createTableDragHandleCell: <TData>(newColumn?: Partial<TableColumnDef<TData>>) => TableColumnDef<TData>;
+//#endregion
+export { TableDragHandle, TableDragHandleProps, createTableDragHandleCell };

package/dist/src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.mjs

@@ -0,0 +1,38 @@
+import { cn } from "../../../../../../lib/utils/cn.mjs";
+import { Button } from "../../../../../../components/ui/button.mjs";
+import { createTableCell } from "../../../../lib/helpers/create-column.mjs";
+import { TableInlineCell } from "./common.mjs";
+import { GripIcon } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+
+//#region src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.tsx
+function TableDragHandle({ row, className, disabled }) {
+	const rowId = row.original.id;
+	const { attributes, listeners } = useSortable({ id: rowId });
+	return /* @__PURE__ */ jsx(TableInlineCell, {
+		className: "w-8",
+		children: /* @__PURE__ */ jsx(Button, {
+			...attributes,
+			...listeners,
+			variant: "ghost",
+			size: "icon",
+			type: "button",
+			className: cn("h-full w-8 rounded-none border-none", className),
+			disabled,
+			children: /* @__PURE__ */ jsx(GripIcon, { className: "size-4 fill-muted" })
+		})
+	});
+}
+/**
+* Create a new column with the drag handle
+*/
+const createTableDragHandleCell = createTableCell({
+	id: "dragHandle",
+	cell: TableDragHandle,
+	enableHiding: false,
+	enableSorting: false
+});
+
+//#endregion
+export { TableDragHandle, createTableDragHandleCell };

package/dist/src/modules/data-tables/tables/inline-table/components/cells/read-only.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/cells/read-only.d.ts
+declare function InlineDataTableReadOnly({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InlineDataTableReadOnly };

package/dist/src/modules/data-tables/tables/inline-table/components/cells/read-only.mjs

@@ -0,0 +1,14 @@
+import { cn } from "../../../../../../lib/utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/inline-table/components/cells/read-only.tsx
+function InlineDataTableReadOnly({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: cn("flex h-full w-full items-center truncate bg-muted/50 px-3", className),
+		children
+	});
+}
+
+//#endregion
+export { InlineDataTableReadOnly };

package/dist/src/modules/data-tables/tables/inline-table/components/header.mjs

@@ -0,0 +1,10 @@
+import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/inline-table/components/header.tsx
+function InlineTableHeader({ table }) {
+	return /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableHeaderRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHeaderCell, { header }, header.id)) }, headerGroup.id)) });
+}
+
+//#endregion
+export { InlineTableHeader };

package/dist/src/modules/data-tables/tables/inline-table/components/row.client.mjs

@@ -0,0 +1,24 @@
+"use client";
+
+import { TableRow } from "../../../components/table.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/modules/data-tables/tables/inline-table/components/row.client.tsx
+function InlineTableRow({ row, table, children, ...props }) {
+	const { setNodeRef, transform, transition } = useSortable({ id: row.id });
+	return /* @__PURE__ */ jsx(TableRow, {
+		...props,
+		ref: setNodeRef,
+		"data-state": row.getIsSelected() && "selected",
+		style: {
+			transform: CSS.Transform.toString(transform),
+			transition
+		},
+		children
+	});
+}
+
+//#endregion
+export { InlineTableRow };

package/dist/src/modules/data-tables/tables/inline-table/components/table.d.mts

@@ -0,0 +1,14 @@
+import { Table } from "../../../components/table.mjs";
+import { InlineTableProvider } from "../hooks/context.client.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/table.d.ts
+declare function InlineTable<TData>({
+  disabledColumns,
+  moveRowAction,
+  hotkeys,
+  ...props
+}: ComponentProps<typeof Table> & ComponentProps<typeof InlineTableProvider>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InlineTable };

package/dist/src/modules/data-tables/tables/inline-table/components/table.mjs

@@ -0,0 +1,52 @@
+"use client";
+
+import { FloatingCommandMenu } from "../../../../commands/components/menus/floating-menu.client.mjs";
+import { Table } from "../../../components/table.mjs";
+import { useTable } from "../../../hooks/use-table.client.mjs";
+import { TableBottombar, TableFooter } from "../../../components/footer.mjs";
+import { InlineTableProvider } from "../hooks/context.client.mjs";
+import { InlineTableBody } from "./body.mjs";
+import { InlineTableHeader } from "./header.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HotkeysProvider } from "react-hotkeys-hook";
+
+//#region src/modules/data-tables/tables/inline-table/components/table.tsx
+function InlineTable({ disabledColumns, moveRowAction, hotkeys, ...props }) {
+	const table = useTable();
+	const meta = table.options.meta;
+	return /* @__PURE__ */ jsx(InlineTableProvider, {
+		disabledColumns,
+		moveRowAction,
+		hotkeys,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "rounded-md border",
+					children: /* @__PURE__ */ jsxs(Table, {
+						...props,
+						children: [
+							/* @__PURE__ */ jsx(InlineTableHeader, { table }),
+							/* @__PURE__ */ jsx(HotkeysProvider, {
+								initiallyActiveScopes: ["inline-data-table"],
+								children: /* @__PURE__ */ jsx(InlineTableBody, { table })
+							}),
+							/* @__PURE__ */ jsx(TableFooter, { table })
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(TableBottombar, { table }),
+				meta.commands && /* @__PURE__ */ jsx(FloatingCommandMenu, {
+					data: meta.selectedData,
+					commands: meta.commands,
+					meta,
+					state: meta.selectedData?.length ? "open" : "closed",
+					onSuccess: () => table.resetRowSelection()
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { InlineTable };

package/dist/src/modules/data-tables/tables/inline-table/hooks/context.client.d.mts

@@ -0,0 +1,48 @@
+import { InlineDataTableHotkeysConfig } from "./use-hotkeys.client.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { PropsWithChildren } from "react";
+import { VisibilityState } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/tables/inline-table/hooks/context.client.d.ts
+/**
+ * Move row method as meta
+ */
+type MoveRowMethod = {
+  isDraggable: false;
+  moveRow: undefined;
+} | {
+  isDraggable: true;
+  moveRow: (params: {
+    fromIndex: number;
+    toIndex: number;
+  }) => void;
+};
+/**
+ * Inline form table context value
+ */
+type InlineTableContextValue = MoveRowMethod & {
+  disabledColumns?: VisibilityState;
+  hotkeys?: InlineDataTableHotkeysConfig;
+};
+/**
+ * Inline form table context hook
+ */
+declare function useInlineTableContext(): InlineTableContextValue;
+/**
+ * Inline form table context provider
+ */
+declare function InlineTableProvider<TData>({
+  children,
+  disabledColumns,
+  moveRowAction,
+  hotkeys
+}: PropsWithChildren<{
+  disabledColumns?: VisibilityState;
+  moveRowAction?: (input: {
+    fromIndex: number;
+    toIndex: number;
+  }) => Promise<unknown>;
+  hotkeys?: InlineDataTableHotkeysConfig;
+}>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InlineTableContextValue, InlineTableProvider, useInlineTableContext };