@espressif/dashboard-ui-components 1.10.0 → 1.11.0

package/dist/components/code-editor/code-editor.utils.js

@@ -0,0 +1,122 @@
+//#region src/components/code-editor/code-editor.utils.ts
+/** Offset of the first character of the line containing `pos`. */
+function getLineStart(value, pos) {
+	return value.lastIndexOf("\n", pos - 1) + 1;
+}
+/** Offset just past the last character of the line containing `pos` (before its `\n`). */
+function getLineEnd(value, pos) {
+	const next = value.indexOf("\n", pos);
+	return next === -1 ? value.length : next;
+}
+/**
+* Leading spaces and tabs of the line containing `pos`, counting only the
+* part before `pos`, so a caret inside the indentation never carries more
+* indentation than sits to its left.
+*/
+function getLineIndent(value, pos) {
+	const lineStart = getLineStart(value, pos);
+	return /^[ \t]*/.exec(value.slice(lineStart, pos))[0];
+}
+/** True when the selection touches more than one line. */
+function isMultiLineSelection(value, start, end) {
+	return value.slice(start, end).includes("\n");
+}
+/**
+* Start offsets of every line the selection covers. A selection that ends
+* at the very start of a line (after its `\n`) does not include that line,
+* matching how editors treat a full-line selection.
+*/
+function getSelectedLineStarts(value, start, end) {
+	const lastPos = end > start && value[end - 1] === "\n" ? end - 1 : end;
+	const starts = [getLineStart(value, start)];
+	for (let i = value.indexOf("\n", starts[0]); i !== -1 && i < lastPos; i = value.indexOf("\n", i + 1)) starts.push(i + 1);
+	return starts;
+}
+/** Tab with a caret or a single-line selection: spaces up to the next tab stop. */
+function insertTab(value, start, end, tabSize) {
+	const column = start - getLineStart(value, start);
+	const text = " ".repeat(tabSize - column % tabSize);
+	const caret = start + text.length;
+	return {
+		start,
+		end,
+		text,
+		selectionStart: caret,
+		selectionEnd: caret
+	};
+}
+/** Tab with a multi-line selection: prefix every selected non-empty line with `tabSize` spaces. */
+function indentLines(value, start, end, tabSize) {
+	const lineStarts = getSelectedLineStarts(value, start, end);
+	const blockStart = lineStarts[0];
+	const blockEnd = getLineEnd(value, lineStarts[lineStarts.length - 1]);
+	const indent = " ".repeat(tabSize);
+	const added = lineStarts.map((lineStart) => lineStart === getLineEnd(value, lineStart) ? 0 : tabSize);
+	const text = value.slice(blockStart, blockEnd).split("\n").map((line, i) => added[i] ? indent + line : line).join("\n");
+	const mapOffset = (pos, keepAtLineStart) => {
+		let shift = 0;
+		lineStarts.forEach((lineStart, i) => {
+			if (lineStart < pos || lineStart === pos && !keepAtLineStart) shift += added[i];
+		});
+		return pos + shift;
+	};
+	return {
+		start: blockStart,
+		end: blockEnd,
+		text,
+		selectionStart: mapOffset(start, true),
+		selectionEnd: mapOffset(end, false)
+	};
+}
+/**
+* Shift+Tab: remove up to `tabSize` leading spaces (or one leading tab) from
+* every selected line; with a caret, from the caret's line.
+*/
+function outdentLines(value, start, end, tabSize) {
+	const lineStarts = getSelectedLineStarts(value, start, end);
+	const blockStart = lineStarts[0];
+	const blockEnd = getLineEnd(value, lineStarts[lineStarts.length - 1]);
+	const lines = value.slice(blockStart, blockEnd).split("\n");
+	const removed = lines.map((line) => line.startsWith("	") ? 1 : Math.min(tabSize, /^ */.exec(line)[0].length));
+	const text = lines.map((line, i) => line.slice(removed[i])).join("\n");
+	const mapOffset = (pos) => {
+		let shift = 0;
+		lineStarts.forEach((lineStart, i) => {
+			if (lineStart <= pos) shift += Math.min(removed[i], pos - lineStart);
+		});
+		return pos - shift;
+	};
+	return {
+		start: blockStart,
+		end: blockEnd,
+		text,
+		selectionStart: mapOffset(start),
+		selectionEnd: mapOffset(end)
+	};
+}
+/** Enter: a line break followed by the current line's indentation. */
+function insertNewline(value, start, end) {
+	const text = "\n" + getLineIndent(value, start);
+	const caret = start + text.length;
+	return {
+		start,
+		end,
+		text,
+		selectionStart: caret,
+		selectionEnd: caret
+	};
+}
+/** Applies a `TextEdit` to a string. Used by tests and the non-`execCommand` fallback check. */
+function applyTextEdit(value, edit) {
+	return value.slice(0, edit.start) + edit.text + value.slice(edit.end);
+}
+/** Pretty-prints JSON with `tabSize`-space indentation. Throws on invalid JSON. */
+function formatJson(value, tabSize) {
+	return JSON.stringify(JSON.parse(value), null, tabSize);
+}
+/** Built-in formatter for `lang`, or `undefined` when there is none (only JSON has one). */
+function getBuiltInFormatter(lang) {
+	return lang.toLowerCase() === "json" ? formatJson : void 0;
+}
+//#endregion
+export { applyTextEdit, formatJson, getBuiltInFormatter, getLineEnd, getLineIndent, getLineStart, indentLines, insertNewline, insertTab, isMultiLineSelection, outdentLines };

package/dist/components/code-editor/use-code-editor-keys.js

@@ -0,0 +1,79 @@
+import { applyTextEdit, indentLines, insertNewline, insertTab, isMultiLineSelection, outdentLines } from "./code-editor.utils.js";
+import * as React$1 from "react";
+//#region src/components/code-editor/use-code-editor-keys.ts
+/**
+* Replaces a range of the textarea through the browser's editing pipeline so
+* the change lands on the native undo stack (Cmd/Ctrl+Z undoes a Tab, an
+* auto-indent or a Format like any typed text).
+*
+* `document.execCommand` is deprecated, but it is still the only standard way
+* to make a programmatic edit undoable; `setRangeText` and assigning `value`
+* both clear the undo history. When `execCommand` is missing or refuses the
+* edit, fall back to `setRangeText` plus a synthetic `input` event, which
+* edits correctly (and fires React's `onChange`) but is not undoable.
+*/
+function applyEdit(el, edit) {
+	const current = el.value;
+	const expected = applyTextEdit(current, edit);
+	if (expected === current) {
+		el.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+		return;
+	}
+	if (el.ownerDocument.activeElement !== el) el.focus({ preventScroll: true });
+	el.setSelectionRange(edit.start, edit.end);
+	let applied = false;
+	try {
+		applied = typeof document.execCommand === "function" && document.execCommand(edit.text ? "insertText" : "delete", false, edit.text);
+	} catch {
+		applied = false;
+	}
+	if (!applied || el.value !== expected) {
+		if (el.value !== current) el.value = current;
+		el.setRangeText(edit.text, edit.start, edit.end, "end");
+		el.dispatchEvent(new Event("input", { bubbles: true }));
+	}
+	el.setSelectionRange(edit.selectionStart, edit.selectionEnd);
+}
+/**
+* Editor keys for the `CodeEditor` textarea: Tab / Shift+Tab indent and
+* outdent, Enter keeps the current indentation, and Esc releases Tab so the
+* next Tab moves focus (WCAG 2.1.2, no keyboard trap).
+*/
+function useCodeEditorKeys({ tabSize, onKeyDown, onBlur }) {
+	const tabReleasedRef = React$1.useRef(false);
+	return {
+		onKeyDown: React$1.useCallback((event) => {
+			onKeyDown?.(event);
+			if (event.defaultPrevented) return;
+			if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+			const el = event.currentTarget;
+			if (el.readOnly || el.disabled) return;
+			if (event.key === "Escape") {
+				tabReleasedRef.current = true;
+				return;
+			}
+			if (event.key === "Shift") return;
+			const released = tabReleasedRef.current;
+			tabReleasedRef.current = false;
+			const { value, selectionStart: start, selectionEnd: end } = el;
+			if (event.key === "Tab") {
+				if (released || event.altKey || event.ctrlKey || event.metaKey) return;
+				event.preventDefault();
+				if (event.shiftKey) applyEdit(el, outdentLines(value, start, end, tabSize));
+				else if (isMultiLineSelection(value, start, end)) applyEdit(el, indentLines(value, start, end, tabSize));
+				else applyEdit(el, insertTab(value, start, end, tabSize));
+				return;
+			}
+			if (event.key === "Enter" && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+				event.preventDefault();
+				applyEdit(el, insertNewline(value, start, end));
+			}
+		}, [onKeyDown, tabSize]),
+		onBlur: React$1.useCallback((event) => {
+			tabReleasedRef.current = false;
+			onBlur?.(event);
+		}, [onBlur])
+	};
+}
+//#endregion
+export { applyEdit, useCodeEditorKeys };

package/dist/components/code-editor/use-highlighted-html.js

@@ -0,0 +1,102 @@
+import { getHighlighter, normalizeLang } from "../../core/animate-ui/primitives/animate/shiki-highlighter.js";
+import { escapeHtml } from "../../core/animate-ui/primitives/animate/escape-html.js";
+import * as React$1 from "react";
+//#region src/components/code-editor/use-highlighted-html.ts
+var DEFAULT_CODE_EDITOR_THEMES = {
+	light: "everforest-light",
+	dark: "everforest-dark"
+};
+/** Shiki's grammar-less languages; they need no bundled grammar. */
+var PLAIN_LANGS = /* @__PURE__ */ new Set([
+	"text",
+	"plaintext",
+	"txt",
+	"plain"
+]);
+/**
+* A zero-width space after the last character. A `<pre>` collapses a
+* trailing `\n` while the textarea shows an empty last line for it; the
+* extra character gives that line a box so both layers keep the same height.
+*/
+var TRAILING_LINE = "​";
+var transformer = {
+	pre(node) {
+		delete node.properties.tabindex;
+	},
+	code(node) {
+		node.children.push({
+			type: "text",
+			value: TRAILING_LINE
+		});
+	}
+};
+function plainHtml(value) {
+	return `<pre><code>${escapeHtml(value)}${TRAILING_LINE}</code></pre>`;
+}
+var warned = /* @__PURE__ */ new Set();
+function warnOnce(key, message, error) {
+	if (warned.has(key)) return;
+	warned.add(key);
+	console.warn(`[dashboard-ui-components] ${message}`, ...error ? [error] : []);
+}
+var resolved = /* @__PURE__ */ new WeakMap();
+/**
+* HTML for the `CodeEditor` highlight layer. The highlighter loads once;
+* after that each value is highlighted synchronously, so results can never
+* arrive out of order. Highlighting follows `useDeferredValue(value)` so
+* React can let a keystroke render before the colours catch up. Falls back
+* to escaped plain text while loading, for languages or themes outside the
+* curated bundle, and above `maxHighlightLength`.
+*/
+function useHighlightedHtml(value, { lang, theme, themes, maxHighlightLength }) {
+	const [highlighter, setHighlighter] = React$1.useState(() => {
+		const promise = getHighlighter();
+		return resolved.get(promise) ?? null;
+	});
+	React$1.useEffect(() => {
+		if (highlighter) return;
+		let active = true;
+		const promise = getHighlighter();
+		promise.then((loaded) => {
+			resolved.set(promise, loaded);
+			if (active) setHighlighter(loaded);
+		}, (error) => warnOnce("load", "Syntax highlighter failed to load; showing plain text.", error));
+		return () => {
+			active = false;
+		};
+	}, [highlighter]);
+	const deferredValue = React$1.useDeferredValue(value);
+	const { light, dark } = themes;
+	return React$1.useMemo(() => {
+		if (!highlighter || deferredValue.length > maxHighlightLength) return plainHtml(deferredValue);
+		const normalizedLang = normalizeLang(lang);
+		if (!PLAIN_LANGS.has(normalizedLang) && !highlighter.getLoadedLanguages().includes(normalizedLang)) {
+			warnOnce(`lang:${lang}`, `Falling back to plain text for lang="${lang}"; not in the curated Shiki bundle.`);
+			return plainHtml(deferredValue);
+		}
+		try {
+			return highlighter.codeToHtml(deferredValue, {
+				lang: normalizedLang,
+				themes: {
+					light,
+					dark
+				},
+				defaultColor: theme,
+				transformers: [transformer]
+			});
+		} catch (error) {
+			warnOnce(`theme:${light}:${dark}:${lang}`, `Falling back to plain text for themes "${light}" / "${dark}" with lang="${lang}".`, error);
+			return plainHtml(deferredValue);
+		}
+	}, [
+		highlighter,
+		deferredValue,
+		lang,
+		theme,
+		light,
+		dark,
+		maxHighlightLength
+	]);
+}
+//#endregion
+export { DEFAULT_CODE_EDITOR_THEMES, useHighlightedHtml };

package/dist/components/confirmation-dialog/confirmation-dialog.js

@@ -0,0 +1,72 @@
+import { Button } from "../button/button.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../../core/animate-ui/components/radix/dialog.js";
+import { Alert } from "../alert/alert.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/confirmation-dialog/confirmation-dialog.tsx
+function ConfirmationDialog({ title, description, onConfirm, onCancel, children, cancelButtonText = "Cancel", confirmButtonText = "Confirm", cancelButtonVariant = "ghost", confirmButtonVariant = "default", cancelButtonColor, confirmButtonColor = "error", cancelButtonStartIcon, confirmButtonEndIcon, isLoading = false, error = null, open, onOpenChange }) {
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+	const isOpen = open ?? uncontrolledOpen;
+	const setOpen = (next) => {
+		setUncontrolledOpen(next);
+		onOpenChange?.(next);
+	};
+	const handleConfirm = async () => {
+		try {
+			await onConfirm();
+			setOpen(false);
+		} catch {}
+	};
+	return /* @__PURE__ */ jsxs(Dialog, {
+		open: isOpen,
+		onOpenChange: setOpen,
+		children: [children != null && /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			showCloseButton: false,
+			children: [/* @__PURE__ */ jsxs(DialogHeader, { children: [
+				/* @__PURE__ */ jsx(DialogTitle, {
+					className: "leading-relaxed",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(DialogDescription, {
+					className: "leading-relaxed",
+					children: description
+				}),
+				error != null && error !== "" && /* @__PURE__ */ jsx(Alert, {
+					color: "error",
+					className: "mt-3",
+					children: error
+				})
+			] }), /* @__PURE__ */ jsxs(DialogFooter, {
+				className: "gap-3 flex",
+				children: [/* @__PURE__ */ jsx(DialogClose, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: cancelButtonVariant,
+						color: cancelButtonColor,
+						onClick: onCancel,
+						fullWidth: false,
+						className: "text-foreground",
+						disabled: isLoading,
+						startIcon: cancelButtonStartIcon,
+						children: cancelButtonText
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					fullWidth: false,
+					variant: confirmButtonVariant,
+					color: confirmButtonColor,
+					onClick: handleConfirm,
+					loading: isLoading,
+					endIcon: confirmButtonEndIcon,
+					children: confirmButtonText
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { ConfirmationDialog };

package/dist/components/content-container/content-container.js

@@ -0,0 +1,20 @@
+import { cn } from "../../utils/cn.js";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/content-container/content-container.tsx
+var maxWidthClasses = {
+	sm: "max-w-2xl",
+	md: "max-w-4xl",
+	lg: "max-w-5xl",
+	xl: "max-w-7xl"
+};
+var ContentContainer = React$1.forwardRef(function ContentContainer({ maxWidth, children, className, noGutters = false }, ref) {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("w-full", !noGutters && "mt-[72px]", maxWidth != null && maxWidthClasses[maxWidth], "mx-auto", "p-3 md:p-6", className),
+		children
+	});
+});
+ContentContainer.displayName = "ContentContainer";
+//#endregion
+export { ContentContainer };

package/dist/components/copiable-text/copiable-text.js

@@ -0,0 +1,46 @@
+import { cn } from "../../utils/cn.js";
+import { CopyButton } from "../../core/animate-ui/components/buttons/copy.js";
+import { buttonGroupVariants } from "../../core/button-group.js";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/copiable-text/copiable-text.tsx
+/** Row height and action-button size per scale; both must move together or the group tears. */
+var COPIABLE_TEXT_SIZE_STYLES = {
+	sm: {
+		row: "min-h-6",
+		action: "size-5"
+	},
+	default: {
+		row: "min-h-7",
+		action: "size-6"
+	},
+	lg: {
+		row: "min-h-8",
+		action: "size-7"
+	}
+};
+function CopiableText({ text, actions, alwaysShowActions = false, hideActionsOnTouch = false, size = "default", className }) {
+	const content = typeof text === "number" ? String(text) : text;
+	const sizeStyles = COPIABLE_TEXT_SIZE_STYLES[size];
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("relative inline-flex min-w-0 max-w-full items-center overflow-hidden group/copiable-text", sizeStyles.row, className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "block min-w-0 flex-1 truncate",
+			children: content
+		}), /* @__PURE__ */ jsxs("span", {
+			role: actions != null ? "group" : void 0,
+			className: cn(buttonGroupVariants(), "ml-2 shrink-0", !alwaysShowActions && "[@media(hover:hover)]:absolute [@media(hover:hover)]:right-0 [@media(hover:hover)]:top-1/2 [@media(hover:hover)]:ml-0 [@media(hover:hover)]:-translate-y-1/2 [@media(hover:hover)]:opacity-0 transition-opacity group-hover/copiable-text:opacity-100 group-focus-within/copiable-text:opacity-100", hideActionsOnTouch && "[@media(hover:none)]:hidden"),
+			onClick: (e) => e.stopPropagation(),
+			children: [actions, /* @__PURE__ */ jsx(CopyButton, {
+				content,
+				className: sizeStyles.action,
+				variant: "outline",
+				size: "sm",
+				hoverScale: 1,
+				tapScale: .9
+			})]
+		})]
+	});
+}
+//#endregion
+export { CopiableText };

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

@@ -0,0 +1,186 @@
+import { cn } from "../../utils/cn.js";
+import { useScrollOverflow } from "../../core/hooks/use-scroll-overflow.js";
+import { Checkbox } from "../../core/checkbox/motion-checkbox.js";
+import { Table } from "../../core/table.js";
+import { TogglableItemsList } from "../togglable-items-list/togglable-items-list.js";
+import { Pagination } from "../pagination/pagination.js";
+import { DEFAULT_PAGE_SIZE_OPTIONS } from "../pagination/pagination.props.js";
+import { SELECT_COLUMN_ID, buildStickyColumns, countStickyColumns, useStickyOffsets } from "./sticky-columns.js";
+import { DataTableHeader } from "./table-header.js";
+import { DataTableBody } from "./table-body.js";
+import { useResponsiveColumnVisibility } from "./responsive-columns.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Columns2 } from "lucide-react";
+import { getCoreRowModel, getPaginationRowModel, useReactTable } from "@tanstack/react-table";
+//#region src/components/data-table/data-table.tsx
+var edgeShadowClass = "pointer-events-none absolute inset-y-0 z-[3] w-4 from-black/10 to-transparent opacity-0 transition-opacity dark:from-black/40";
+function DataTable({ columns, data, tableActionsContent, isFetching, pageIndex = 0, hasNextPage = false, hasPrevPage = false, onNextPage, onPrevPage, pageSize = 5, onPageSizeChange, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, showColumnVisibilitySelector = true, columnVisibilityLabel = "Columns", noResultsHeading = "No results", noResultsDescription = "No results found. Try adjusting your search or filter to find what you're looking for.", noResultsAction, noResultsIllustration, hideNoResultsIllustration, pageLabel, previousLabel = "Previous", nextLabel = "Next", pageSizeOptionLabel, onRowClick, showBorder = false, rowSelection, onRowSelectionChange, getRowId, enableMultiRowSelection = true, enableRowSelection = false, tableRowClassName, getRowClassName, className, hidePaginationControls = false }) {
+	const [columnVisibility, setColumnVisibility] = useState(() => {
+		const initial = {};
+		for (const col of columns) {
+			const meta = col.meta;
+			const id = col.id ?? col.accessorKey;
+			if (id && meta?.defaultHidden) initial[id] = false;
+		}
+		return initial;
+	});
+	const selectColumn = useMemo(() => ({
+		id: SELECT_COLUMN_ID,
+		enableHiding: false,
+		enableSorting: false,
+		size: 40,
+		header: enableMultiRowSelection ? ({ table: t }) => /* @__PURE__ */ jsx(Checkbox, {
+			checked: t.getIsAllPageRowsSelected() ? true : t.getIsSomePageRowsSelected() ? "indeterminate" : false,
+			onCheckedChange: (value) => t.toggleAllPageRowsSelected(!!value),
+			"aria-label": "Select all"
+		}) : void 0,
+		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+			checked: row.getIsSelected(),
+			disabled: !row.getCanSelect(),
+			onCheckedChange: (value) => row.toggleSelected(!!value),
+			onClick: (e) => e.stopPropagation(),
+			"aria-label": "Select row"
+		})
+	}), [enableMultiRowSelection]);
+	const tableColumns = useMemo(() => enableRowSelection ? [selectColumn, ...columns] : columns, [
+		enableRowSelection,
+		selectColumn,
+		columns
+	]);
+	const table = useReactTable({
+		data,
+		columns: tableColumns,
+		state: {
+			columnVisibility,
+			pagination: useMemo(() => ({
+				pageIndex: 0,
+				pageSize
+			}), [pageSize]),
+			...rowSelection !== void 0 && { rowSelection }
+		},
+		autoResetPageIndex: false,
+		onColumnVisibilityChange: setColumnVisibility,
+		enableRowSelection,
+		enableMultiRowSelection,
+		onRowSelectionChange,
+		getRowId,
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel()
+	});
+	const rootRef = useRef(null);
+	useResponsiveColumnVisibility(rootRef, table.getAllLeafColumns(), setColumnVisibility);
+	const tableRef = useRef(null);
+	const scrollerRef = useRef(null);
+	const overflow = useScrollOverflow(scrollerRef, { getContent: (scroller) => scroller.querySelector("table") });
+	const visibleColumns = table.getVisibleLeafColumns();
+	const stickyOffsets = useStickyOffsets(tableRef, countStickyColumns(visibleColumns));
+	const stickyColumns = useMemo(() => buildStickyColumns(visibleColumns, stickyOffsets), [visibleColumns, stickyOffsets]);
+	const hasStickyColumns = stickyColumns.size > 0;
+	const { columnVisibilityItems, columnVisibilityCheckedState } = useMemo(() => {
+		const def = (c) => c;
+		const items = columns.filter((col) => def(col).enableHiding !== false).map((col, i) => {
+			const d = def(col);
+			const id = d.id ?? (typeof d.accessorKey === "string" ? d.accessorKey : void 0) ?? String(i);
+			return {
+				id,
+				label: typeof d.header === "string" ? d.header : id
+			};
+		});
+		return {
+			columnVisibilityItems: items,
+			columnVisibilityCheckedState: Object.fromEntries(items.map(({ id }) => [id, columnVisibility[id] ?? true]))
+		};
+	}, [columns, columnVisibility]);
+	const canChangePageSize = Boolean(onPageSizeChange);
+	const resolvedPageSizeOptions = useMemo(() => {
+		if (!canChangePageSize || pageSizeOptions.length === 0) return [];
+		return pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+	}, [
+		canChangePageSize,
+		pageSizeOptions,
+		pageSize
+	]);
+	const showToolbar = tableActionsContent || showColumnVisibilitySelector;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: rootRef,
+		className: cn("space-y-3", className),
+		children: [
+			showToolbar && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-3 data-table-toolbar",
+				children: [tableActionsContent && /* @__PURE__ */ jsx("div", {
+					className: "min-w-0 flex-[1_1_16rem]",
+					children: tableActionsContent
+				}), showColumnVisibilitySelector && /* @__PURE__ */ jsx("div", {
+					className: "ml-auto",
+					children: /* @__PURE__ */ jsx(TogglableItemsList, {
+						items: columnVisibilityItems,
+						checkedState: columnVisibilityCheckedState,
+						onToggle: (id, checked) => setColumnVisibility((prev) => ({
+							...prev,
+							[id]: checked
+						})),
+						label: columnVisibilityLabel,
+						icon: /* @__PURE__ */ jsx(Columns2, {}),
+						triggerButtonColor: "gray"
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-overflow-start": overflow.start || void 0,
+				"data-overflow-end": overflow.end || void 0,
+				className: cn("group/data-table relative overflow-hidden rounded-md data-table-container", showToolbar && "mt-6", showBorder && "border border-border/50"),
+				children: [
+					/* @__PURE__ */ jsxs(Table, {
+						ref: tableRef,
+						containerRef: scrollerRef,
+						children: [/* @__PURE__ */ jsx(DataTableHeader, {
+							headerGroups: table.getHeaderGroups(),
+							showBorder,
+							stickyColumns
+						}), /* @__PURE__ */ jsx(DataTableBody, {
+							rows: table.getRowModel().rows,
+							columnCount: tableColumns.length,
+							isFetching,
+							pageSize,
+							noResultsHeading,
+							noResultsDescription,
+							noResultsAction,
+							noResultsIllustration,
+							hideNoResultsIllustration,
+							onRowClick,
+							showBorder,
+							tableRowClassName,
+							getRowClassName,
+							stickyColumns
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: cn(edgeShadowClass, "left-0 bg-linear-to-r", overflow.start && !hasStickyColumns && "opacity-100")
+					}),
+					/* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						className: cn(edgeShadowClass, "right-0 bg-linear-to-l", overflow.end && "opacity-100")
+					})
+				]
+			}),
+			!hidePaginationControls && /* @__PURE__ */ jsx(Pagination, {
+				pageLabel: pageLabel ?? `Page ${pageIndex + 1}`,
+				previousLabel,
+				nextLabel,
+				onPrevPage: onPrevPage ?? (() => {}),
+				onNextPage: onNextPage ?? (() => {}),
+				hasPrevPage,
+				hasNextPage,
+				disabled: isFetching,
+				currentPageSize: pageSize,
+				pageSizeOptions: resolvedPageSizeOptions,
+				pageSizeOptionLabel,
+				onPageSizeChange: (size) => onPageSizeChange?.(size)
+			})
+		]
+	});
+}
+//#endregion
+export { DataTable };