@uipath/apollo-wind 0.10.0 → 0.11.0-pr295.af4e744

package/dist/components/ui/code-block.cjs

@@ -0,0 +1,258 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    CodeBlock: ()=>CodeBlock
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_react_namespaceObject = require("react");
+const external_react_syntax_highlighter_namespaceObject = require("react-syntax-highlighter");
+const atom_dark_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/atom-dark.js");
+var atom_dark_js_default = /*#__PURE__*/ __webpack_require__.n(atom_dark_js_namespaceObject);
+const night_owl_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/night-owl.js");
+var night_owl_js_default = /*#__PURE__*/ __webpack_require__.n(night_owl_js_namespaceObject);
+const nord_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/nord.js");
+var nord_js_default = /*#__PURE__*/ __webpack_require__.n(nord_js_namespaceObject);
+const one_dark_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/one-dark.js");
+var one_dark_js_default = /*#__PURE__*/ __webpack_require__.n(one_dark_js_namespaceObject);
+const one_light_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/one-light.js");
+var one_light_js_default = /*#__PURE__*/ __webpack_require__.n(one_light_js_namespaceObject);
+const prism_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/prism.js");
+var prism_js_default = /*#__PURE__*/ __webpack_require__.n(prism_js_namespaceObject);
+const vs_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/vs.js");
+var vs_js_default = /*#__PURE__*/ __webpack_require__.n(vs_js_namespaceObject);
+const vs_dark_js_namespaceObject = require("react-syntax-highlighter/dist/esm/styles/prism/vs-dark.js");
+var vs_dark_js_default = /*#__PURE__*/ __webpack_require__.n(vs_dark_js_namespaceObject);
+const external_button_cjs_namespaceObject = require("./button.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+const THEME_CONFIG = {
+    dark: {
+        prismStyle: nord_js_default(),
+        bg: '#182027',
+        headerBg: '#111920',
+        labelColor: '#8ea1b1',
+        iconColor: '#6b8899',
+        lineNumberColor: '#2e3f4c'
+    },
+    light: {
+        prismStyle: vs_js_default(),
+        bg: '#ffffff',
+        headerBg: '#f0f4f8',
+        labelColor: '#374151',
+        iconColor: '#6b7280',
+        lineNumberColor: '#c8d4de'
+    },
+    'future-dark': {
+        prismStyle: vs_dark_js_default(),
+        bg: '#18181b',
+        headerBg: '#09090b',
+        labelColor: '#a1a1aa',
+        iconColor: '#71717a',
+        lineNumberColor: '#3f3f46'
+    },
+    'future-light': {
+        prismStyle: vs_js_default(),
+        bg: '#fafafa',
+        headerBg: '#f4f4f5',
+        labelColor: '#52525b',
+        iconColor: '#71717a',
+        lineNumberColor: '#d4d4d8'
+    },
+    wireframe: {
+        prismStyle: prism_js_default(),
+        bg: '#f9fafb',
+        headerBg: '#f3f4f6',
+        labelColor: '#6b7280',
+        iconColor: '#9ca3af',
+        lineNumberColor: '#d1d5db'
+    },
+    vertex: {
+        prismStyle: night_owl_js_default(),
+        bg: 'oklch(0.21 0.03 258.5)',
+        headerBg: 'oklch(0.188 0.028 258.5)',
+        labelColor: '#a6b5c9',
+        iconColor: '#7a90a8',
+        lineNumberColor: 'oklch(0.32 0.03 258.5)'
+    },
+    canvas: {
+        prismStyle: atom_dark_js_default(),
+        bg: '#182027',
+        headerBg: '#111920',
+        labelColor: '#8ea1b1',
+        iconColor: '#6b8899',
+        lineNumberColor: '#2e3f4c'
+    },
+    'dark-hc': {
+        prismStyle: one_dark_js_default(),
+        bg: '#0a0a0a',
+        headerBg: '#141414',
+        labelColor: '#e4e4e4',
+        iconColor: '#c8c8c8',
+        lineNumberColor: '#505050'
+    },
+    'light-hc': {
+        prismStyle: one_light_js_default(),
+        bg: '#ffffff',
+        headerBg: '#e8e8e8',
+        labelColor: '#111827',
+        iconColor: '#374151',
+        lineNumberColor: '#9ca3af'
+    }
+};
+const BODY_CLASS_PRIORITY = [
+    'future-dark',
+    'future-light',
+    'dark-hc',
+    'light-hc',
+    'dark',
+    'light',
+    'wireframe',
+    'vertex',
+    'canvas'
+];
+function getBodyTheme() {
+    if ('undefined' == typeof document) return 'dark';
+    const bodyClasses = document.body.classList;
+    const htmlClasses = document.documentElement.classList;
+    return BODY_CLASS_PRIORITY.find((t)=>bodyClasses.contains(t) || htmlClasses.contains(t)) ?? 'future-dark';
+}
+function useApolloTheme() {
+    const [theme, setTheme] = (0, external_react_namespaceObject.useState)(getBodyTheme);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if ('undefined' == typeof document) return;
+        const observer = new MutationObserver(()=>setTheme(getBodyTheme()));
+        const targets = [
+            document.body,
+            document.documentElement
+        ];
+        targets.forEach((target)=>{
+            if (target) observer.observe(target, {
+                attributes: true,
+                attributeFilter: [
+                    'class'
+                ]
+            });
+        });
+        return ()=>observer.disconnect();
+    }, []);
+    return theme;
+}
+function CodeBlock({ children, language = 'tsx', showLineNumbers = true, showCopyButton = true, fileName, theme, wrapLines = false, className }) {
+    const [copied, setCopied] = (0, external_react_namespaceObject.useState)(false);
+    const timeoutRef = (0, external_react_namespaceObject.useRef)(null);
+    const detectedTheme = useApolloTheme();
+    const activeTheme = theme ?? detectedTheme;
+    const config = THEME_CONFIG[activeTheme];
+    const code = children.trim();
+    async function handleCopy() {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            timeoutRef.current = setTimeout(()=>setCopied(false), 1500);
+        } catch  {}
+    }
+    (0, external_react_namespaceObject.useEffect)(()=>()=>{
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        }, []);
+    const showHeader = !!(fileName || language || showCopyButton);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: (0, index_cjs_namespaceObject.cn)('overflow-hidden rounded-lg border border-border font-mono text-sm', className),
+        style: {
+            background: config.bg
+        },
+        children: [
+            showHeader && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                className: "flex items-center justify-between px-4 py-2 border-b border-border",
+                style: {
+                    background: config.headerBg
+                },
+                children: [
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                        className: "text-xs font-medium",
+                        style: {
+                            color: config.labelColor
+                        },
+                        children: fileName ?? language
+                    }),
+                    showCopyButton && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                        size: "icon",
+                        variant: "ghost",
+                        className: "h-7 w-7 [&_svg]:size-3.5 transition-colors",
+                        style: {
+                            color: config.iconColor
+                        },
+                        onClick: handleCopy,
+                        "aria-label": copied ? 'Copied!' : 'Copy code',
+                        children: copied ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Check, {}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Copy, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_react_syntax_highlighter_namespaceObject.Prism, {
+                language: language,
+                style: config.prismStyle,
+                showLineNumbers: showLineNumbers,
+                wrapLines: wrapLines,
+                wrapLongLines: wrapLines,
+                customStyle: {
+                    margin: 0,
+                    borderRadius: 0,
+                    background: 'transparent',
+                    padding: '1rem',
+                    fontSize: 13,
+                    lineHeight: 1.6
+                },
+                lineNumberStyle: {
+                    color: config.lineNumberColor,
+                    minWidth: '2.5em',
+                    paddingRight: '1.25em',
+                    userSelect: 'none'
+                },
+                codeTagProps: {
+                    style: {
+                        fontFamily: 'inherit'
+                    }
+                },
+                children: code
+            })
+        ]
+    });
+}
+exports.CodeBlock = __webpack_exports__.CodeBlock;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "CodeBlock"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/code-block.d.ts

@@ -0,0 +1,48 @@
+/**
+ * All Apollo theme variants supported by CodeBlock.
+ *
+ * Standard (apollo-core):
+ * - `'dark'` / `'light'`               — Default dark / light
+ * - `'dark-hc'` / `'light-hc'`         — High contrast variants
+ *
+ * Future / Demo themes:
+ * - `'future-dark'` / `'future-light'`  — Future zinc palette, cyan brand
+ * - `'wireframe'`                        — Greyscale / prototyping
+ * - `'vertex'`                           — Deep blue-grey, teal brand
+ * - `'canvas'`                           — Apollo MUI dark, orange brand
+ *
+ * When no theme is passed the component auto-detects from the Apollo
+ * `<body>` class and switches live when the theme changes.
+ */
+export type CodeBlockTheme = 'dark' | 'light' | 'dark-hc' | 'light-hc' | 'future-dark' | 'future-light' | 'wireframe' | 'vertex' | 'canvas';
+export interface CodeBlockProps {
+    /** The code string to display */
+    children: string;
+    /** Programming language for syntax highlighting (e.g. 'tsx', 'python', 'sql') */
+    language?: string;
+    /** Show line numbers on the left */
+    showLineNumbers?: boolean;
+    /** Show copy-to-clipboard button in the header */
+    showCopyButton?: boolean;
+    /** Optional file name displayed in the header */
+    fileName?: string;
+    /**
+     * Color scheme. When omitted the component auto-follows the active Apollo
+     * page theme by watching the class on `<body>` — switches live.
+     */
+    theme?: CodeBlockTheme;
+    /** Wrap long lines instead of scrolling horizontally */
+    wrapLines?: boolean;
+    className?: string;
+}
+/**
+ * Syntax-highlighted code block built on react-syntax-highlighter (Prism engine).
+ *
+ * Supports 200+ languages, optional line numbers, a filename header, and a
+ * one-click copy button. Automatically follows the active Apollo theme by
+ * watching the body class — or accept an explicit `theme` prop to override.
+ *
+ * Supported themes: dark, light, dark-hc, light-hc, future-dark,
+ * future-light, wireframe, vertex, canvas.
+ */
+export declare function CodeBlock({ children, language, showLineNumbers, showCopyButton, fileName, theme, wrapLines, className, }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/code-block.js

@@ -0,0 +1,207 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, Copy } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { Prism } from "react-syntax-highlighter";
+import atom_dark from "react-syntax-highlighter/dist/esm/styles/prism/atom-dark.js";
+import night_owl from "react-syntax-highlighter/dist/esm/styles/prism/night-owl.js";
+import nord from "react-syntax-highlighter/dist/esm/styles/prism/nord.js";
+import one_dark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark.js";
+import one_light from "react-syntax-highlighter/dist/esm/styles/prism/one-light.js";
+import prism from "react-syntax-highlighter/dist/esm/styles/prism/prism.js";
+import vs from "react-syntax-highlighter/dist/esm/styles/prism/vs.js";
+import vs_dark from "react-syntax-highlighter/dist/esm/styles/prism/vs-dark.js";
+import { Button } from "./button.js";
+import { cn } from "../../lib/index.js";
+const THEME_CONFIG = {
+    dark: {
+        prismStyle: nord,
+        bg: '#182027',
+        headerBg: '#111920',
+        labelColor: '#8ea1b1',
+        iconColor: '#6b8899',
+        lineNumberColor: '#2e3f4c'
+    },
+    light: {
+        prismStyle: vs,
+        bg: '#ffffff',
+        headerBg: '#f0f4f8',
+        labelColor: '#374151',
+        iconColor: '#6b7280',
+        lineNumberColor: '#c8d4de'
+    },
+    'future-dark': {
+        prismStyle: vs_dark,
+        bg: '#18181b',
+        headerBg: '#09090b',
+        labelColor: '#a1a1aa',
+        iconColor: '#71717a',
+        lineNumberColor: '#3f3f46'
+    },
+    'future-light': {
+        prismStyle: vs,
+        bg: '#fafafa',
+        headerBg: '#f4f4f5',
+        labelColor: '#52525b',
+        iconColor: '#71717a',
+        lineNumberColor: '#d4d4d8'
+    },
+    wireframe: {
+        prismStyle: prism,
+        bg: '#f9fafb',
+        headerBg: '#f3f4f6',
+        labelColor: '#6b7280',
+        iconColor: '#9ca3af',
+        lineNumberColor: '#d1d5db'
+    },
+    vertex: {
+        prismStyle: night_owl,
+        bg: 'oklch(0.21 0.03 258.5)',
+        headerBg: 'oklch(0.188 0.028 258.5)',
+        labelColor: '#a6b5c9',
+        iconColor: '#7a90a8',
+        lineNumberColor: 'oklch(0.32 0.03 258.5)'
+    },
+    canvas: {
+        prismStyle: atom_dark,
+        bg: '#182027',
+        headerBg: '#111920',
+        labelColor: '#8ea1b1',
+        iconColor: '#6b8899',
+        lineNumberColor: '#2e3f4c'
+    },
+    'dark-hc': {
+        prismStyle: one_dark,
+        bg: '#0a0a0a',
+        headerBg: '#141414',
+        labelColor: '#e4e4e4',
+        iconColor: '#c8c8c8',
+        lineNumberColor: '#505050'
+    },
+    'light-hc': {
+        prismStyle: one_light,
+        bg: '#ffffff',
+        headerBg: '#e8e8e8',
+        labelColor: '#111827',
+        iconColor: '#374151',
+        lineNumberColor: '#9ca3af'
+    }
+};
+const BODY_CLASS_PRIORITY = [
+    'future-dark',
+    'future-light',
+    'dark-hc',
+    'light-hc',
+    'dark',
+    'light',
+    'wireframe',
+    'vertex',
+    'canvas'
+];
+function getBodyTheme() {
+    if ('undefined' == typeof document) return 'dark';
+    const bodyClasses = document.body.classList;
+    const htmlClasses = document.documentElement.classList;
+    return BODY_CLASS_PRIORITY.find((t)=>bodyClasses.contains(t) || htmlClasses.contains(t)) ?? 'future-dark';
+}
+function useApolloTheme() {
+    const [theme, setTheme] = useState(getBodyTheme);
+    useEffect(()=>{
+        if ('undefined' == typeof document) return;
+        const observer = new MutationObserver(()=>setTheme(getBodyTheme()));
+        const targets = [
+            document.body,
+            document.documentElement
+        ];
+        targets.forEach((target)=>{
+            if (target) observer.observe(target, {
+                attributes: true,
+                attributeFilter: [
+                    'class'
+                ]
+            });
+        });
+        return ()=>observer.disconnect();
+    }, []);
+    return theme;
+}
+function CodeBlock({ children, language = 'tsx', showLineNumbers = true, showCopyButton = true, fileName, theme, wrapLines = false, className }) {
+    const [copied, setCopied] = useState(false);
+    const timeoutRef = useRef(null);
+    const detectedTheme = useApolloTheme();
+    const activeTheme = theme ?? detectedTheme;
+    const config = THEME_CONFIG[activeTheme];
+    const code = children.trim();
+    async function handleCopy() {
+        try {
+            await navigator.clipboard.writeText(code);
+            setCopied(true);
+            timeoutRef.current = setTimeout(()=>setCopied(false), 1500);
+        } catch  {}
+    }
+    useEffect(()=>()=>{
+            if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        }, []);
+    const showHeader = !!(fileName || language || showCopyButton);
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn('overflow-hidden rounded-lg border border-border font-mono text-sm', className),
+        style: {
+            background: config.bg
+        },
+        children: [
+            showHeader && /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between px-4 py-2 border-b border-border",
+                style: {
+                    background: config.headerBg
+                },
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        className: "text-xs font-medium",
+                        style: {
+                            color: config.labelColor
+                        },
+                        children: fileName ?? language
+                    }),
+                    showCopyButton && /*#__PURE__*/ jsx(Button, {
+                        size: "icon",
+                        variant: "ghost",
+                        className: "h-7 w-7 [&_svg]:size-3.5 transition-colors",
+                        style: {
+                            color: config.iconColor
+                        },
+                        onClick: handleCopy,
+                        "aria-label": copied ? 'Copied!' : 'Copy code',
+                        children: copied ? /*#__PURE__*/ jsx(Check, {}) : /*#__PURE__*/ jsx(Copy, {})
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(Prism, {
+                language: language,
+                style: config.prismStyle,
+                showLineNumbers: showLineNumbers,
+                wrapLines: wrapLines,
+                wrapLongLines: wrapLines,
+                customStyle: {
+                    margin: 0,
+                    borderRadius: 0,
+                    background: 'transparent',
+                    padding: '1rem',
+                    fontSize: 13,
+                    lineHeight: 1.6
+                },
+                lineNumberStyle: {
+                    color: config.lineNumberColor,
+                    minWidth: '2.5em',
+                    paddingRight: '1.25em',
+                    userSelect: 'none'
+                },
+                codeTagProps: {
+                    style: {
+                        fontFamily: 'inherit'
+                    }
+                },
+                children: code
+            })
+        ]
+    });
+}
+export { CodeBlock };

package/dist/components/ui/data-table.cjs

@@ -38,11 +38,22 @@ const external_editable_cell_cjs_namespaceObject = require("./editable-cell.cjs"
 const external_input_cjs_namespaceObject = require("./input.cjs");
 const external_table_cjs_namespaceObject = require("./table.cjs");
 const react_table_namespaceObject = require("@tanstack/react-table");
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns' }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent }) {
     const [sorting, setSorting] = external_react_namespaceObject.useState([]);
     const [columnFilters, setColumnFilters] = external_react_namespaceObject.useState([]);
     const [columnVisibility, setColumnVisibility] = external_react_namespaceObject.useState({});
-    const [rowSelection, setRowSelection] = external_react_namespaceObject.useState({});
+    const [internalRowSelection, setInternalRowSelection] = external_react_namespaceObject.useState({});
+    const isControlled = void 0 !== controlledRowSelection;
+    const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
+    const setRowSelection = external_react_namespaceObject.useCallback((updater)=>{
+        const next = 'function' == typeof updater ? updater(rowSelection) : updater;
+        if (!isControlled) setInternalRowSelection(next);
+        controlledOnRowSelectionChange?.(next);
+    }, [
+        isControlled,
+        rowSelection,
+        controlledOnRowSelectionChange
+    ]);
     const processedColumns = external_react_namespaceObject.useMemo(()=>{
         if (!editable || !onCellUpdate) return columns;
         return columns.map((col)=>{
@@ -100,6 +111,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                         onChange: (event)=>table.getColumn(searchKey)?.setFilterValue(event.target.value),
                         className: "max-w-sm"
                     }),
+                    toolbarContent,
                     showColumnToggle && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_dropdown_menu_cjs_namespaceObject.DropdownMenu, {
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_dropdown_menu_cjs_namespaceObject.DropdownMenuTrigger, {
@@ -142,7 +154,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                     children: headerGroup.headers.map((header)=>{
                                         const { column } = header;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_table_cjs_namespaceObject.TableHead, {
-                                            className: compact ? 'relative h-8 px-2 py-1' : 'relative',
+                                            className: compact ? 'relative h-8 px-2 py-0' : 'relative py-0',
                                             style: {
                                                 width: resizable ? header.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,
@@ -151,6 +163,12 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                             children: [
                                                 header.isPlaceholder ? null : (0, react_table_namespaceObject.flexRender)(header.column.columnDef.header, header.getContext()),
                                                 resizable && header.column.getCanResize() && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                                    role: "separator",
+                                                    "aria-label": "Resize column",
+                                                    "aria-valuenow": header.column.getSize(),
+                                                    "aria-valuemin": header.column.columnDef.minSize ?? 40,
+                                                    "aria-valuemax": header.column.columnDef.maxSize ?? 1000,
+                                                    tabIndex: 0,
                                                     onMouseDown: header.getResizeHandler(),
                                                     onTouchStart: header.getResizeHandler(),
                                                     className: "absolute -right-1 top-0 z-10 h-full w-2 cursor-col-resize select-none touch-none group",
@@ -169,7 +187,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                     children: row.getVisibleCells().map((cell)=>{
                                         const { column } = cell;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_table_cjs_namespaceObject.TableCell, {
-                                            className: compact ? 'truncate px-2 py-1' : 'truncate',
+                                            className: compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0',
                                             style: {
                                                 width: resizable ? cell.column.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,

package/dist/components/ui/data-table.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Column, ColumnDef } from '@tanstack/react-table';
+import { Column, ColumnDef, RowSelectionState } from '@tanstack/react-table';
 export interface DataTableProps<TData, TValue> {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
@@ -13,8 +13,11 @@ export interface DataTableProps<TData, TValue> {
     resizable?: boolean;
     compact?: boolean;
     columnToggleText?: string;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    toolbarContent?: React.ReactNode;
 }
-export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, showColumnToggle, showPagination, pageSize, editable, onCellUpdate, resizable, compact, columnToggleText, rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export declare function DataTableColumnHeader<TData, TValue>({ column, title, children, }: {
     column: Column<TData, TValue>;
     title: string;

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown } from "lucide-react";
 import { Button } from "./button.js";
 import { Checkbox } from "./checkbox.js";
@@ -8,11 +8,22 @@ import { EditableCell } from "./editable-cell.js";
 import { Input } from "./input.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
-function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns' }) {
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns', rowSelection: controlledRowSelection, onRowSelectionChange: controlledOnRowSelectionChange, toolbarContent }) {
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [columnVisibility, setColumnVisibility] = useState({});
-    const [rowSelection, setRowSelection] = useState({});
+    const [internalRowSelection, setInternalRowSelection] = useState({});
+    const isControlled = void 0 !== controlledRowSelection;
+    const rowSelection = isControlled ? controlledRowSelection : internalRowSelection;
+    const setRowSelection = useCallback((updater)=>{
+        const next = 'function' == typeof updater ? updater(rowSelection) : updater;
+        if (!isControlled) setInternalRowSelection(next);
+        controlledOnRowSelectionChange?.(next);
+    }, [
+        isControlled,
+        rowSelection,
+        controlledOnRowSelectionChange
+    ]);
     const processedColumns = useMemo(()=>{
         if (!editable || !onCellUpdate) return columns;
         return columns.map((col)=>{
@@ -70,6 +81,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                         onChange: (event)=>table.getColumn(searchKey)?.setFilterValue(event.target.value),
                         className: "max-w-sm"
                     }),
+                    toolbarContent,
                     showColumnToggle && /*#__PURE__*/ jsxs(DropdownMenu, {
                         children: [
                             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
@@ -112,7 +124,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                     children: headerGroup.headers.map((header)=>{
                                         const { column } = header;
                                         return /*#__PURE__*/ jsxs(TableHead, {
-                                            className: compact ? 'relative h-8 px-2 py-1' : 'relative',
+                                            className: compact ? 'relative h-8 px-2 py-0' : 'relative py-0',
                                             style: {
                                                 width: resizable ? header.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,
@@ -121,6 +133,12 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                             children: [
                                                 header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
                                                 resizable && header.column.getCanResize() && /*#__PURE__*/ jsx("div", {
+                                                    role: "separator",
+                                                    "aria-label": "Resize column",
+                                                    "aria-valuenow": header.column.getSize(),
+                                                    "aria-valuemin": header.column.columnDef.minSize ?? 40,
+                                                    "aria-valuemax": header.column.columnDef.maxSize ?? 1000,
+                                                    tabIndex: 0,
                                                     onMouseDown: header.getResizeHandler(),
                                                     onTouchStart: header.getResizeHandler(),
                                                     className: "absolute -right-1 top-0 z-10 h-full w-2 cursor-col-resize select-none touch-none group",
@@ -139,7 +157,7 @@ function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...',
                                     children: row.getVisibleCells().map((cell)=>{
                                         const { column } = cell;
                                         return /*#__PURE__*/ jsx(TableCell, {
-                                            className: compact ? 'truncate px-2 py-1' : 'truncate',
+                                            className: compact ? 'h-8 truncate px-2 py-0' : 'h-12 truncate px-4 py-0',
                                             style: {
                                                 width: resizable ? cell.column.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
                                                 minWidth: column.columnDef.minSize,