npm - @hexclave/dashboard-ui-components - Versions diffs - 1.0.53 → 1.0.55 - Mend

@hexclave/dashboard-ui-components 1.0.53 → 1.0.55

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/dist/components/data-grid/data-grid-export-dialog.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h as DataGridExportOptions, i as DataGridColumnDef } from "../../types-1-eOd1JF.js";
+import { h as DataGridExportOptions, i as DataGridColumnDef } from "../../types-D8o47V7M.js";
 //#region src/components/data-grid/data-grid-export-dialog.d.ts
 type DataGridExportDialogProps<TRow> = {

package/dist/components/data-grid/data-grid-sizing.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { a as getEffectiveMinWidth, i as getEffectiveMaxWidth, n as DEFAULT_MAX_COL_WIDTH, r as clampColumnWidth, t as DEFAULT_COL_WIDTH } from "../../data-grid-sizing-S1ixcZKo.js";
+import { a as getEffectiveMinWidth, i as getEffectiveMaxWidth, n as DEFAULT_MAX_COL_WIDTH, r as clampColumnWidth, t as DEFAULT_COL_WIDTH } from "../../data-grid-sizing-D9y1xwaq.js";
 export { DEFAULT_COL_WIDTH, DEFAULT_MAX_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth };

package/dist/components/data-grid/data-grid-toolbar.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { t as DataGridToolbar } from "../../data-grid-toolbar-BGSNGDpT.js";
+import { t as DataGridToolbar } from "../../data-grid-toolbar-dgvnYEpC.js";
 export { DataGridToolbar };

package/dist/components/data-grid/data-grid-toolbar.js CHANGED Viewed

@@ -151,7 +151,7 @@ function ColumnManager({ columns, visibility, onChange, strings, dateDisplay, on
 		]
 	});
 }
-function DataGridToolbar({ ctx, extra, extraLeading, hideQuickSearch }) {
+function DataGridToolbar({ ctx, extra, extraLeading, extraActions, hideQuickSearch }) {
 	const { state, onChange, columns, strings, exportCsv } = ctx;
 	const columnPopover = usePopover();
 	const updateVisibility = (0, react.useCallback)((visibility) => {
@@ -177,8 +177,9 @@ function DataGridToolbar({ ctx, extra, extraLeading, hideQuickSearch }) {
 		}));
 	}, [onChange]);
 	const hasDateColumns = (0, react.useMemo)(() => columns.some((c) => c.type === "date" || c.type === "dateTime"), [columns]);
+	const hasExtraActions = react.default.Children.toArray(extraActions).length > 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2",
+		className: "flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 pr-3 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2",
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex min-w-0 flex-1 flex-wrap items-center gap-2",
 			children: [
@@ -191,33 +192,40 @@ function DataGridToolbar({ ctx, extra, extraLeading, hideQuickSearch }) {
 				extra
 			]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "flex shrink-0 items-center justify-end gap-2",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "relative shrink-0",
-				ref: columnPopover.ref,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-					onClick: () => columnPopover.setOpen(!columnPopover.open),
-					active: columnPopover.open,
-					title: strings.columns,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.Eye, { className: "h-3.5 w-3.5" })
-				}), columnPopover.open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPanel, {
-					popoverRef: columnPopover.ref,
-					className: "right-0 left-auto",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnManager, {
-						columns,
-						visibility: state.columnVisibility,
-						onChange: updateVisibility,
-						strings,
-						dateDisplay: state.dateDisplay,
-						onDateDisplayChange: updateDateDisplay,
-						hasDateColumns
-					})
-				})]
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
-				onClick: exportCsv,
-				title: strings.export,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.DownloadSimple, { className: "h-3.5 w-3.5" })
-			})]
+			className: "flex shrink-0 items-center justify-end gap-1.5",
+			children: [
+				hasExtraActions && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [extraActions, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mx-0.5 hidden h-4 w-px bg-foreground/[0.1] sm:block",
+					"aria-hidden": true
+				})] }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "relative shrink-0",
+					ref: columnPopover.ref,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+						onClick: () => columnPopover.setOpen(!columnPopover.open),
+						active: columnPopover.open,
+						title: strings.columns,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.Eye, { className: "h-3.5 w-3.5" })
+					}), columnPopover.open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverPanel, {
+						popoverRef: columnPopover.ref,
+						className: "right-0 left-auto",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColumnManager, {
+							columns,
+							visibility: state.columnVisibility,
+							onChange: updateVisibility,
+							strings,
+							dateDisplay: state.dateDisplay,
+							onDateDisplayChange: updateDateDisplay,
+							hasDateColumns
+						})
+					})]
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolbarButton, {
+					onClick: exportCsv,
+					title: strings.export,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_phosphor_icons_react.DownloadSimple, { className: "h-3.5 w-3.5" })
+				})
+			]
 		})]
 	});
 }

package/dist/components/data-grid/data-grid-toolbar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid-toolbar.js","names":["MagnifyingGlass","X","Eye","EyeSlash","Check","DownloadSimple"],"sources":["../../../src/components/data-grid/data-grid-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport {\n Check,\n DownloadSimple,\n Eye,\n EyeSlash,\n MagnifyingGlass,\n X,\n} from \"@phosphor-icons/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport type {\n DataGridColumnDef,\n DataGridDateDisplay,\n DataGridStrings,\n DataGridToolbarContext,\n} from \"./types\";\n\n// ─── Popover primitive ───────────────────────────────────────────────\n\nfunction usePopover() {\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (!open) return;\n const handler = (e: MouseEvent) => {\n if (ref.current && !ref.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handler);\n return () => document.removeEventListener(\"mousedown\", handler);\n }, [open]);\n\n React.useEffect(() => {\n if (!open) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false);\n };\n document.addEventListener(\"keydown\", handler);\n return () => document.removeEventListener(\"keydown\", handler);\n }, [open]);\n\n return { open, setOpen, ref };\n}\n\nfunction PopoverPanel({\n children,\n className,\n popoverRef,\n}: {\n children: React.ReactNode;\n className?: string;\n popoverRef: React.Ref<HTMLDivElement>;\n}) {\n return (\n <div\n ref={popoverRef}\n className={cn(\n \"absolute top-full left-0 mt-1 z-50\",\n \"bg-white text-popover-foreground rounded-xl shadow-lg dark:bg-popover\",\n \"ring-1 ring-black/[0.08] dark:ring-white/[0.1]\",\n \"backdrop-blur-xl\",\n className,\n )}\n >\n {children}\n </div>\n );\n}\n\n// ─── Quick search ────────────────────────────────────────────────────\n\nfunction QuickSearch({\n value,\n onChange,\n placeholder,\n}: {\n value: string;\n onChange: (value: string) => void;\n placeholder: string;\n}) {\n return (\n <div className=\"relative flex min-w-0 flex-1 items-center sm:flex-initial\">\n <MagnifyingGlass className=\"absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none\" />\n <input\n type=\"text\"\n className={cn(\n \"h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs\",\n \"border border-black/[0.08] dark:border-white/[0.06]\",\n \"bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n \"placeholder:text-muted-foreground/50\",\n \"focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]\",\n \"transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]\",\n )}\n placeholder={placeholder}\n value={value}\n onChange={(e) => onChange(e.target.value)}\n />\n {value && (\n <button\n className=\"absolute right-2 text-muted-foreground/40 hover:text-muted-foreground\"\n onClick={() => onChange(\"\")}\n aria-label=\"Clear search\"\n >\n <X className=\"h-3 w-3\" />\n </button>\n )}\n </div>\n );\n}\n\n// ─── Toolbar button ──────────────────────────────────────────────────\n\nfunction ToolbarButton({\n children,\n onClick,\n active,\n title,\n className: extraClassName,\n}: {\n children: React.ReactNode;\n onClick?: () => void;\n active?: boolean;\n title?: string;\n className?: string;\n}) {\n return (\n <button\n className={cn(\n \"relative flex items-center justify-center rounded-lg text-xs font-medium\",\n \"h-7 w-7\",\n \"transition-colors duration-75\",\n active\n ? \"bg-foreground/[0.06] text-foreground\"\n : \"text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]\",\n extraClassName,\n )}\n onClick={onClick}\n title={title}\n >\n {children}\n </button>\n );\n}\n\n// ─── Column manager ──────────────────────────────────────────────────\n\nfunction ColumnManager<TRow>({\n columns,\n visibility,\n onChange,\n strings,\n dateDisplay,\n onDateDisplayChange,\n hasDateColumns,\n}: {\n columns: readonly DataGridColumnDef<TRow>[];\n visibility: Record<string, boolean>;\n onChange: (visibility: Record<string, boolean>) => void;\n strings: DataGridStrings;\n dateDisplay: DataGridDateDisplay;\n onDateDisplayChange: (mode: DataGridDateDisplay) => void;\n hasDateColumns: boolean;\n}) {\n const hideableColumns = useMemo(\n () => columns.filter((c) => c.hideable !== false),\n [columns],\n );\n\n const toggleColumn = (id: string) => {\n const current = visibility[id] !== false;\n onChange({ ...visibility, [id]: !current });\n };\n\n const showAll = () => {\n const next = { ...visibility };\n for (const col of hideableColumns) next[col.id] = true;\n onChange(next);\n };\n\n const hideAll = () => {\n const next = { ...visibility };\n for (const col of hideableColumns) next[col.id] = false;\n onChange(next);\n };\n\n return (\n <div className=\"p-2 min-w-[240px] max-w-[300px]\">\n <div className=\"max-h-[280px] overflow-y-auto space-y-0.5\">\n {hideableColumns.map((col) => {\n const visible = visibility[col.id] !== false;\n return (\n <button\n key={col.id}\n className={cn(\n \"flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs\",\n \"hover:bg-foreground/[0.06] transition-colors duration-75\",\n visible ? \"text-foreground\" : \"text-muted-foreground/50\",\n )}\n onClick={() => toggleColumn(col.id)}\n >\n {visible ? (\n <Eye className=\"h-3.5 w-3.5 flex-shrink-0 text-blue-500\" />\n ) : (\n <EyeSlash className=\"h-3.5 w-3.5 flex-shrink-0\" />\n )}\n <span className=\"truncate text-left\">\n {typeof col.header === \"string\" ? col.header : col.id}\n </span>\n {visible && <Check className=\"h-3 w-3 ml-auto flex-shrink-0 text-blue-500\" />}\n </button>\n );\n })}\n </div>\n <div className=\"flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]\">\n <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={showAll}>\n {strings.showAll}\n </button>\n <span className=\"text-muted-foreground/20\">\|</span>\n <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={hideAll}>\n {strings.hideAll}\n </button>\n </div>\n\n {/* Date format toggle — only rendered when at least one column\n uses `type: \"date\"` or `\"dateTime\"`. Toggling writes to\n `state.dateDisplay` and the grid re-renders every date cell. /}\n {hasDateColumns && (\n <div className=\"mt-2 pt-2 border-t border-foreground/[0.06]\">\n <div className=\"flex items-center justify-between gap-2 px-1\">\n <span className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground\">\n {strings.dateFormat}\n </span>\n <div className=\"inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]\">\n <button\n className={cn(\n \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n dateDisplay === \"relative\"\n ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n )}\n onClick={() => onDateDisplayChange(\"relative\")}\n >\n {strings.dateFormatRelative}\n </button>\n <button\n className={cn(\n \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n dateDisplay === \"absolute\"\n ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n )}\n onClick={() => onDateDisplayChange(\"absolute\")}\n >\n {strings.dateFormatAbsolute}\n </button>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n}\n\n// ─── Main toolbar ────────────────────────────────────────────────────\n\nexport function DataGridToolbar<TRow>({\n ctx,\n extra,\n extraLeading,\n hideQuickSearch,\n}: {\n ctx: DataGridToolbarContext<TRow>;\n /* Extra content rendered inside the toolbar row, to the left of the\n * built-in columns / export actions. Use this to add table-specific\n * affordances (refresh, custom toggles, row counts) without giving up\n * the default actions. /\n extra?: React.ReactNode;\n /* Extra content rendered at the START of the toolbar row — occupies\n * the same position as the built-in quick search (after it, if the\n * quick search is visible). Use this together with `hideQuickSearch`\n * to fully replace the quick search with a custom input, e.g. an\n * AI-powered search bar. /\n extraLeading?: React.ReactNode;\n /* Whether to hide the built-in quick-search input. When `true`,\n * callers are expected to provide their own search UI via\n * `extraLeading`. */\n hideQuickSearch?: boolean;\n}) {\n const { state, onChange, columns, strings, exportCsv } = ctx;\n\n const columnPopover = usePopover();\n\n const updateVisibility = useCallback(\n (visibility: Record<string, boolean>) => {\n onChange((s) => ({ ...s, columnVisibility: visibility }));\n },\n [onChange],\n );\n\n const updateDateDisplay = useCallback(\n (mode: DataGridDateDisplay) => {\n onChange((s) => ({ ...s, dateDisplay: mode }));\n },\n [onChange],\n );\n\n const updateQuickSearch = useCallback(\n (value: string) => {\n onChange((s) => ({\n ...s,\n quickSearch: value,\n // Reset to first page whenever the search text changes,\n // otherwise you can end up on a page index that no longer\n // exists in the filtered / refetched result set.\n pagination: { ...s.pagination, pageIndex: 0 },\n }));\n },\n [onChange],\n );\n\n const hasDateColumns = useMemo(\n () => columns.some((c) => c.type === \"date\" \|\| c.type === \"dateTime\"),\n [columns],\n );\n\n return (\n <div className=\"flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2\">\n <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n {!hideQuickSearch && (\n <QuickSearch\n value={state.quickSearch}\n onChange={updateQuickSearch}\n placeholder={strings.searchPlaceholder}\n />\n )}\n {extraLeading}\n {extra}\n </div>\n <div className=\"flex shrink-0 items-center justify-end gap-2\">\n <div className=\"relative shrink-0\" ref={columnPopover.ref}>\n <ToolbarButton\n onClick={() => columnPopover.setOpen(!columnPopover.open)}\n active={columnPopover.open}\n title={strings.columns}\n >\n <Eye className=\"h-3.5 w-3.5\" />\n </ToolbarButton>\n {columnPopover.open && (\n <PopoverPanel popoverRef={columnPopover.ref} className=\"right-0 left-auto\">\n <ColumnManager\n columns={columns}\n visibility={state.columnVisibility}\n onChange={updateVisibility}\n strings={strings}\n dateDisplay={state.dateDisplay}\n onDateDisplayChange={updateDateDisplay}\n hasDateColumns={hasDateColumns}\n />\n </PopoverPanel>\n )}\n </div>\n\n <ToolbarButton onClick={exportCsv} title={strings.export}>\n <DownloadSimple className=\"h-3.5 w-3.5\" />\n </ToolbarButton>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"data-grid-toolbar.js","names":["MagnifyingGlass","X","Eye","EyeSlash","Check","React","DownloadSimple"],"sources":["../../../src/components/data-grid/data-grid-toolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@hexclave/ui\";\nimport {\n Check,\n DownloadSimple,\n Eye,\n EyeSlash,\n MagnifyingGlass,\n X,\n} from \"@phosphor-icons/react\";\nimport React, { useCallback, useMemo, useRef, useState } from \"react\";\nimport type {\n DataGridColumnDef,\n DataGridDateDisplay,\n DataGridStrings,\n DataGridToolbarContext,\n} from \"./types\";\n\n// ─── Popover primitive ───────────────────────────────────────────────\n\nfunction usePopover() {\n const [open, setOpen] = useState(false);\n const ref = useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (!open) return;\n const handler = (e: MouseEvent) => {\n if (ref.current && !ref.current.contains(e.target as Node)) {\n setOpen(false);\n }\n };\n document.addEventListener(\"mousedown\", handler);\n return () => document.removeEventListener(\"mousedown\", handler);\n }, [open]);\n\n React.useEffect(() => {\n if (!open) return;\n const handler = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false);\n };\n document.addEventListener(\"keydown\", handler);\n return () => document.removeEventListener(\"keydown\", handler);\n }, [open]);\n\n return { open, setOpen, ref };\n}\n\nfunction PopoverPanel({\n children,\n className,\n popoverRef,\n}: {\n children: React.ReactNode;\n className?: string;\n popoverRef: React.Ref<HTMLDivElement>;\n}) {\n return (\n <div\n ref={popoverRef}\n className={cn(\n \"absolute top-full left-0 mt-1 z-50\",\n \"bg-white text-popover-foreground rounded-xl shadow-lg dark:bg-popover\",\n \"ring-1 ring-black/[0.08] dark:ring-white/[0.1]\",\n \"backdrop-blur-xl\",\n className,\n )}\n >\n {children}\n </div>\n );\n}\n\n// ─── Quick search ────────────────────────────────────────────────────\n\nfunction QuickSearch({\n value,\n onChange,\n placeholder,\n}: {\n value: string;\n onChange: (value: string) => void;\n placeholder: string;\n}) {\n return (\n <div className=\"relative flex min-w-0 flex-1 items-center sm:flex-initial\">\n <MagnifyingGlass className=\"absolute left-2.5 h-3.5 w-3.5 text-muted-foreground/60 pointer-events-none\" />\n <input\n type=\"text\"\n className={cn(\n \"h-8 w-full sm:w-52 pl-8 pr-7 rounded-xl text-xs\",\n \"border border-black/[0.08] dark:border-white/[0.06]\",\n \"bg-white dark:bg-background shadow-sm ring-1 ring-black/[0.08] dark:ring-white/[0.06]\",\n \"placeholder:text-muted-foreground/50\",\n \"focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]\",\n \"transition-all duration-150 hover:transition-none hover:ring-black/[0.12] dark:hover:ring-white/[0.1]\",\n )}\n placeholder={placeholder}\n value={value}\n onChange={(e) => onChange(e.target.value)}\n />\n {value && (\n <button\n className=\"absolute right-2 text-muted-foreground/40 hover:text-muted-foreground\"\n onClick={() => onChange(\"\")}\n aria-label=\"Clear search\"\n >\n <X className=\"h-3 w-3\" />\n </button>\n )}\n </div>\n );\n}\n\n// ─── Toolbar button ──────────────────────────────────────────────────\n\nfunction ToolbarButton({\n children,\n onClick,\n active,\n title,\n className: extraClassName,\n}: {\n children: React.ReactNode;\n onClick?: () => void;\n active?: boolean;\n title?: string;\n className?: string;\n}) {\n return (\n <button\n className={cn(\n \"relative flex items-center justify-center rounded-lg text-xs font-medium\",\n \"h-7 w-7\",\n \"transition-colors duration-75\",\n active\n ? \"bg-foreground/[0.06] text-foreground\"\n : \"text-muted-foreground hover:text-foreground hover:bg-foreground/[0.04]\",\n extraClassName,\n )}\n onClick={onClick}\n title={title}\n >\n {children}\n </button>\n );\n}\n\n// ─── Column manager ──────────────────────────────────────────────────\n\nfunction ColumnManager<TRow>({\n columns,\n visibility,\n onChange,\n strings,\n dateDisplay,\n onDateDisplayChange,\n hasDateColumns,\n}: {\n columns: readonly DataGridColumnDef<TRow>[];\n visibility: Record<string, boolean>;\n onChange: (visibility: Record<string, boolean>) => void;\n strings: DataGridStrings;\n dateDisplay: DataGridDateDisplay;\n onDateDisplayChange: (mode: DataGridDateDisplay) => void;\n hasDateColumns: boolean;\n}) {\n const hideableColumns = useMemo(\n () => columns.filter((c) => c.hideable !== false),\n [columns],\n );\n\n const toggleColumn = (id: string) => {\n const current = visibility[id] !== false;\n onChange({ ...visibility, [id]: !current });\n };\n\n const showAll = () => {\n const next = { ...visibility };\n for (const col of hideableColumns) next[col.id] = true;\n onChange(next);\n };\n\n const hideAll = () => {\n const next = { ...visibility };\n for (const col of hideableColumns) next[col.id] = false;\n onChange(next);\n };\n\n return (\n <div className=\"p-2 min-w-[240px] max-w-[300px]\">\n <div className=\"max-h-[280px] overflow-y-auto space-y-0.5\">\n {hideableColumns.map((col) => {\n const visible = visibility[col.id] !== false;\n return (\n <button\n key={col.id}\n className={cn(\n \"flex items-center gap-2 w-full px-2.5 py-1.5 rounded-lg text-xs\",\n \"hover:bg-foreground/[0.06] transition-colors duration-75\",\n visible ? \"text-foreground\" : \"text-muted-foreground/50\",\n )}\n onClick={() => toggleColumn(col.id)}\n >\n {visible ? (\n <Eye className=\"h-3.5 w-3.5 flex-shrink-0 text-blue-500\" />\n ) : (\n <EyeSlash className=\"h-3.5 w-3.5 flex-shrink-0\" />\n )}\n <span className=\"truncate text-left\">\n {typeof col.header === \"string\" ? col.header : col.id}\n </span>\n {visible && <Check className=\"h-3 w-3 ml-auto flex-shrink-0 text-blue-500\" />}\n </button>\n );\n })}\n </div>\n <div className=\"flex items-center gap-2 mt-2 pt-2 border-t border-foreground/[0.06]\">\n <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={showAll}>\n {strings.showAll}\n </button>\n <span className=\"text-muted-foreground/20\">\|</span>\n <button className=\"text-[10px] text-muted-foreground hover:text-foreground font-medium uppercase tracking-wider transition-colors duration-75\" onClick={hideAll}>\n {strings.hideAll}\n </button>\n </div>\n\n {/* Date format toggle — only rendered when at least one column\n uses `type: \"date\"` or `\"dateTime\"`. Toggling writes to\n `state.dateDisplay` and the grid re-renders every date cell. /}\n {hasDateColumns && (\n <div className=\"mt-2 pt-2 border-t border-foreground/[0.06]\">\n <div className=\"flex items-center justify-between gap-2 px-1\">\n <span className=\"text-[10px] font-medium uppercase tracking-wider text-muted-foreground\">\n {strings.dateFormat}\n </span>\n <div className=\"inline-flex items-center gap-0.5 rounded-lg bg-zinc-100/90 p-0.5 ring-1 ring-black/[0.06] dark:bg-foreground/[0.04] dark:ring-white/[0.06]\">\n <button\n className={cn(\n \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n dateDisplay === \"relative\"\n ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n )}\n onClick={() => onDateDisplayChange(\"relative\")}\n >\n {strings.dateFormatRelative}\n </button>\n <button\n className={cn(\n \"px-2 py-0.5 rounded-md text-[11px] font-medium transition-colors duration-150 hover:transition-none\",\n dateDisplay === \"absolute\"\n ? \"bg-white text-foreground shadow-sm ring-1 ring-black/[0.12] dark:bg-background dark:ring-white/[0.06]\"\n : \"text-muted-foreground hover:text-foreground hover:bg-white/50 dark:hover:bg-white/[0.06]\",\n )}\n onClick={() => onDateDisplayChange(\"absolute\")}\n >\n {strings.dateFormatAbsolute}\n </button>\n </div>\n </div>\n </div>\n )}\n </div>\n );\n}\n\n// ─── Main toolbar ────────────────────────────────────────────────────\n\nexport function DataGridToolbar<TRow>({\n ctx,\n extra,\n extraLeading,\n extraActions,\n hideQuickSearch,\n}: {\n ctx: DataGridToolbarContext<TRow>;\n /* Extra content in the leading cluster, after search / `extraLeading`\n * (filters, status badges, row counts). Stays with the search side so\n * it doesn't compete with the trailing icon actions. /\n extra?: React.ReactNode;\n /* Extra content rendered at the START of the toolbar row — occupies\n * the same position as the built-in quick search (after it, if the\n * quick search is visible). Use this together with `hideQuickSearch`\n * to fully replace the quick search with a custom input, e.g. an\n * AI-powered search bar. /\n extraLeading?: React.ReactNode;\n /* Extra content in the trailing action cluster, immediately before\n * the built-in columns / export buttons (e.g. a labeled Refresh).\n * When present, a hairline divider separates it from those icons. /\n extraActions?: React.ReactNode;\n /* Whether to hide the built-in quick-search input. When `true`,\n * callers are expected to provide their own search UI via\n * `extraLeading`. */\n hideQuickSearch?: boolean;\n}) {\n const { state, onChange, columns, strings, exportCsv } = ctx;\n\n const columnPopover = usePopover();\n\n const updateVisibility = useCallback(\n (visibility: Record<string, boolean>) => {\n onChange((s) => ({ ...s, columnVisibility: visibility }));\n },\n [onChange],\n );\n\n const updateDateDisplay = useCallback(\n (mode: DataGridDateDisplay) => {\n onChange((s) => ({ ...s, dateDisplay: mode }));\n },\n [onChange],\n );\n\n const updateQuickSearch = useCallback(\n (value: string) => {\n onChange((s) => ({\n ...s,\n quickSearch: value,\n // Reset to first page whenever the search text changes,\n // otherwise you can end up on a page index that no longer\n // exists in the filtered / refetched result set.\n pagination: { ...s.pagination, pageIndex: 0 },\n }));\n },\n [onChange],\n );\n\n const hasDateColumns = useMemo(\n () => columns.some((c) => c.type === \"date\" \|\| c.type === \"dateTime\"),\n [columns],\n );\n const hasExtraActions = React.Children.toArray(extraActions).length > 0;\n\n return (\n <div className=\"flex w-full min-w-0 flex-col gap-2 px-2.5 py-2.5 pr-3 border-b border-foreground/[0.06] sm:flex-row sm:items-center sm:gap-2\">\n <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-2\">\n {!hideQuickSearch && (\n <QuickSearch\n value={state.quickSearch}\n onChange={updateQuickSearch}\n placeholder={strings.searchPlaceholder}\n />\n )}\n {extraLeading}\n {extra}\n </div>\n <div className=\"flex shrink-0 items-center justify-end gap-1.5\">\n {hasExtraActions && (\n <>\n {extraActions}\n <div\n className=\"mx-0.5 hidden h-4 w-px bg-foreground/[0.1] sm:block\"\n aria-hidden\n />\n </>\n )}\n <div className=\"relative shrink-0\" ref={columnPopover.ref}>\n <ToolbarButton\n onClick={() => columnPopover.setOpen(!columnPopover.open)}\n active={columnPopover.open}\n title={strings.columns}\n >\n <Eye className=\"h-3.5 w-3.5\" />\n </ToolbarButton>\n {columnPopover.open && (\n <PopoverPanel popoverRef={columnPopover.ref} className=\"right-0 left-auto\">\n <ColumnManager\n columns={columns}\n visibility={state.columnVisibility}\n onChange={updateVisibility}\n strings={strings}\n dateDisplay={state.dateDisplay}\n onDateDisplayChange={updateDateDisplay}\n hasDateColumns={hasDateColumns}\n />\n </PopoverPanel>\n )}\n </div>\n\n <ToolbarButton onClick={exportCsv} title={strings.export}>\n <DownloadSimple className=\"h-3.5 w-3.5\" />\n </ToolbarButton>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/components/data-grid/data-grid.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
-import { n as isDataGridInteractiveRowClickTarget, t as DataGrid } from "../../data-grid-AJi1TNDa.js";
+import { n as isDataGridInteractiveRowClickTarget, t as DataGrid } from "../../data-grid-DWHAjaNo.js";
 export { DataGrid, isDataGridInteractiveRowClickTarget };

package/dist/components/data-grid/data-grid.js CHANGED Viewed

@@ -17,6 +17,7 @@ let __data_grid_export_dialog_js = require("./data-grid-export-dialog.js");
 let __data_grid_toolbar_js = require("./data-grid-toolbar.js");
 //#region src/components/data-grid/data-grid.tsx
 const DEFAULT_INFINITE_MAX_HEIGHT = "calc(100dvh - 16rem)";
+const DATA_GRID_SCROLLBAR_CLASS_NAME = (0, _hexclave_ui.cn)("[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]");
 function getEventTargetElement(target) {
 	if (target instanceof Element) return target;
 	if (target instanceof Node) return target.parentElement;
@@ -250,6 +251,20 @@ function hashStringToInt(value) {
 	for (let i = 0; i < value.length; i++) hash = (hash << 5) - hash + value.charCodeAt(i) | 0;
 	return Math.abs(hash);
 }
+/**
+* Column flex fractions used when the grid is loading before any schema is
+* known (e.g. QueryDataGrid discovers columns from the first result page).
+* Without these, `SkeletonRow` would render zero cells and the body looks
+* like an empty black void instead of a shimmer.
+*/
+const SCHEMA_PENDING_COL_FRACTIONS = [
+	.18,
+	.16,
+	.34,
+	.2,
+	.12
+];
+const SCHEMA_PENDING_SKELETON_ROWS = 10;
 function SkeletonRow({ columns, height, showCheckbox }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex",
@@ -269,6 +284,46 @@ function SkeletonRow({ columns, height, showCheckbox }) {
 		}, col.id))]
 	});
 }
+/** Sticky header shimmer when columns haven't been discovered yet. */
+function SchemaPendingHeaderCells({ showCheckbox }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [showCheckbox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex shrink-0 items-center justify-center border-r border-foreground/[0.04]",
+		style: { width: 44 }
+	}), SCHEMA_PENDING_COL_FRACTIONS.map((frac, colIdx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex items-center px-3 border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
+		style: { width: `${frac * 100}%` },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___skeleton_js.DesignSkeleton, {
+			className: "h-3 rounded-md",
+			style: { width: `${45 + colIdx * 13 % 30}%` }
+		})
+	}, colIdx))] });
+}
+/** Full-width body shimmer when columns haven't been discovered yet. */
+function SchemaPendingSkeleton({ rowHeight, showCheckbox }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "w-full",
+		"data-data-grid-schema-pending-skeleton": "",
+		role: "status",
+		"aria-label": "Loading",
+		children: Array.from({ length: SCHEMA_PENDING_SKELETON_ROWS }).map((_, rowIdx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex w-full border-b border-black/[0.04] dark:border-white/[0.04]",
+			style: { height: rowHeight },
+			role: "row",
+			children: [showCheckbox && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex shrink-0 items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
+				style: { width: 44 },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___skeleton_js.DesignSkeleton, { className: "h-4 w-4 rounded" })
+			}), SCHEMA_PENDING_COL_FRACTIONS.map((frac, colIdx) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "flex items-center px-3 border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
+				style: { width: `${frac * 100}%` },
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(___skeleton_js.DesignSkeleton, {
+					className: "h-3.5 rounded-md",
+					style: { width: `${50 + (rowIdx * 7 + colIdx * 19) % 40}%` }
+				})
+			}, colIdx))]
+		}, rowIdx))
+	});
+}
 function SelectionCheckbox({ checked, indeterminate, onChange, ariaLabel, title }) {
 	const Icon = indeterminate ? _phosphor_icons_react.MinusSquare : checked ? _phosphor_icons_react.CheckSquare : _phosphor_icons_react.Square;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -433,7 +488,7 @@ function DefaultFooter({ ctx, pagination, onChange }) {
 * - `renderCell` must be a pure function — no React hooks inside.
 */
 function DataGrid(props) {
-	const { columns: allColumns, rows, getRowId, totalRowCount, isLoading = false, isRefetching = false, hasMore = false, isLoadingMore = false, onLoadMore, state, onChange, paginationMode = "paginated", selectionMode = "none", resizable = true, rowHeight: rowHeightProp = 44, estimatedRowHeight: estimatedRowHeightProp, headerHeight = 44, overscan = 5, maxHeight, fillHeight = true, stickyTop, toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", exportOptions, strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange, onColumnResize, onColumnVisibilityChange } = props;
+	const { columns: allColumns, rows, getRowId, totalRowCount, isLoading = false, isRefetching = false, hasMore = false, isLoadingMore = false, onLoadMore, state, onChange, paginationMode = "paginated", selectionMode = "none", resizable = true, rowHeight: rowHeightProp = 44, estimatedRowHeight: estimatedRowHeightProp, headerHeight = 44, overscan = 5, maxHeight, fillHeight = true, stickyTop, horizontalScrollbarPosition = "bottom", toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", exportOptions, strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange, onColumnResize, onColumnVisibilityChange } = props;
 	const isDynamicRowHeight = rowHeightProp === "auto";
 	const fixedRowHeight = isDynamicRowHeight ? void 0 : rowHeightProp;
 	const estimatedRowHeight = estimatedRowHeightProp ?? fixedRowHeight ?? 44;
@@ -718,11 +773,31 @@ function DataGrid(props) {
 			observer.disconnect();
 		};
 	}, []);
-	const handleBodyScroll = (0, react.useCallback)(() => {
+	const isSyncingHorizontalScrollRef = (0, react.useRef)(false);
+	const syncHorizontalScroll = (0, react.useCallback)((source) => {
 		const body = scrollContainerRef.current;
 		const header = headerScrollRef.current;
-		if (body && header) header.scrollLeft = body.scrollLeft;
+		if (body == null || header == null || isSyncingHorizontalScrollRef.current) return;
+		const from = source === "header" ? header : body;
+		const to = source === "header" ? body : header;
+		if (to.scrollLeft === from.scrollLeft) return;
+		isSyncingHorizontalScrollRef.current = true;
+		to.scrollLeft = from.scrollLeft;
+		isSyncingHorizontalScrollRef.current = false;
 	}, []);
+	const handleBodyScroll = (0, react.useCallback)(() => {
+		syncHorizontalScroll("body");
+	}, [syncHorizontalScroll]);
+	const handleHeaderScroll = (0, react.useCallback)(() => {
+		syncHorizontalScroll("header");
+	}, [syncHorizontalScroll]);
+	const horizontalScrollbarAtTop = horizontalScrollbarPosition === "top";
+	const handleBodyWheel = (0, react.useCallback)((event) => {
+		if (!horizontalScrollbarAtTop || event.deltaX === 0) return;
+		const header = headerScrollRef.current;
+		if (header == null) return;
+		header.scrollLeft += event.deltaX;
+	}, [horizontalScrollbarAtTop]);
 	const toolbarCtx = (0, react.useMemo)(() => ({
 		state,
 		onChange,
@@ -801,15 +876,17 @@ function DataGrid(props) {
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" })
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						ref: headerScrollRef,
-						className: "w-full min-w-0 shrink-0 overflow-hidden border-b border-foreground/[0.06]",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, _hexclave_ui.cn)("w-full min-w-0 shrink-0 border-b border-foreground/[0.06]", horizontalScrollbarAtTop ? (0, _hexclave_ui.cn)("overflow-x-auto overflow-y-hidden", DATA_GRID_SCROLLBAR_CLASS_NAME) : "overflow-hidden"),
+						onScroll: horizontalScrollbarAtTop ? handleHeaderScroll : void 0,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex",
 							style: {
 								height: headerHeight,
-								minWidth: totalContentWidth
+								minWidth: totalContentWidth || void 0,
+								width: visibleColumns.length === 0 ? "100%" : void 0
 							},
 							role: "row",
-							children: [selectionMode !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							children: isLoading && visibleColumns.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaPendingHeaderCells, { showCheckbox: selectionMode !== "none" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [selectionMode !== "none" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "flex items-center justify-center border-r border-foreground/[0.04]",
 								style: { width: 44 },
 								children: selectionMode === "multiple" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectionCheckbox, {
@@ -827,15 +904,16 @@ function DataGrid(props) {
 									col,
 									resizable
 								}, col.id);
-							})]
+							})] })
 						})
 					})]
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref: scrollContainerRef,
-				className: (0, _hexclave_ui.cn)("relative z-0 w-full min-w-0 overflow-auto bg-transparent", isBounded ? "min-h-0 flex-1" : "flex-none", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"),
+				className: (0, _hexclave_ui.cn)("relative z-0 w-full min-w-0 bg-transparent", horizontalScrollbarAtTop ? "overflow-y-auto overflow-x-hidden" : "overflow-auto", isBounded ? "min-h-0 flex-1" : "flex-none", DATA_GRID_SCROLLBAR_CLASS_NAME),
 				onScroll: handleBodyScroll,
+				onWheel: horizontalScrollbarAtTop ? handleBodyWheel : void 0,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: rowsClipRef,
 					"data-data-grid-rows-clip": "",
@@ -846,12 +924,18 @@ function DataGrid(props) {
 					},
 					children: [
 						isLoading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							style: { minWidth: totalContentWidth },
-							children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonRow, {
+							style: {
+								minWidth: totalContentWidth || void 0,
+								width: visibleColumns.length === 0 ? "100%" : void 0
+							},
+							children: loadingState ?? (visibleColumns.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SchemaPendingSkeleton, {
+								rowHeight: estimatedRowHeight,
+								showCheckbox: selectionMode !== "none"
+							}) : Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SkeletonRow, {
 								columns: visibleColumns,
 								height: estimatedRowHeight,
 								showCheckbox: selectionMode !== "none"
-							}, i))
+							}, i)))
 						}),
 						!isLoading && rows.length === 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 							className: "flex items-center justify-center py-16 text-sm text-muted-foreground",