@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/VirtualTable/VirtualTableCell.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualTableCell.es.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTableCell.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { deepEqual as equal } from \"fast-equals\"\n\nimport { CellRendererParams, VirtualTableColumn } from \"./VirtualTableProps\";\n\ntype VirtualTableCellProps<T> = {\n    dataKey: string;\n    column: VirtualTableColumn;\n    columns: VirtualTableColumn[];\n    rowData: T | undefined;\n    cellData: unknown;\n    rowIndex: number;\n    columnIndex: number;\n    cellRenderer: (props: CellRendererParams<T>) => React.ReactNode;\n    // Sortable props\n    sortableNodeRef?: (node: HTMLElement | null) => void;\n    sortableStyle?: React.CSSProperties;\n    sortableAttributes?: Record<string, unknown>;\n    isDragging?: boolean;\n    isDraggable?: boolean;\n    frozen?: boolean;\n    extraData?: unknown;\n};\n\nexport const VirtualTableCell = React.memo<VirtualTableCellProps<unknown>>(\n    function VirtualTableCell<T>(props: VirtualTableCellProps<T>) {\n        // `undefined` is a row that exists but has not been read: the\n        // renderer is still asked, with no `rowData`, so it can draw a\n        // placeholder (see `VirtualTableProps.data`).\n        return props.rowData !== null ? props.cellRenderer(\n            {\n                cellData: props.cellData,\n                rowData: props.rowData,\n                rowIndex: props.rowIndex,\n                isScrolling: false,\n                column: props.column,\n                columns: props.columns,\n                columnIndex: props.columnIndex,\n                width: props.column.width,\n                sortableNodeRef: props.sortableNodeRef,\n                sortableStyle: props.sortableStyle,\n                sortableAttributes: props.sortableAttributes,\n                isDragging: props.isDragging,\n                isDraggable: props.isDraggable,\n                frozen: props.frozen,\n                extraData: props.extraData\n            } as CellRendererParams<T>\n        ) : null;\n    },\n    areCellPropsEqual\n);\n\n/**\n * Every prop the cell hands `cellRenderer` is compared, and so is\n * `cellRenderer` itself: a cell that kept the renderer it was first given kept\n * every value that renderer closed over — inline editing switched off, a\n * permission revoked, a new row-actions builder — until its row changed.\n *\n * Values that a parent rebuilds on each render (the row, its cell value, the\n * column, `extraData`) are compared by value; `deepEqual` returns at once for\n * the same reference. Functions and `columns` are compared by reference —\n * `VirtualTable` holds `columns` by value already.\n */\nfunction areCellPropsEqual(a: VirtualTableCellProps<unknown>, b: VirtualTableCellProps<unknown>): boolean {\n    return a.cellRenderer === b.cellRenderer &&\n        a.columns === b.columns &&\n        a.dataKey === b.dataKey &&\n        a.rowIndex === b.rowIndex &&\n        a.columnIndex === b.columnIndex &&\n        a.isDragging === b.isDragging &&\n        a.isDraggable === b.isDraggable &&\n        a.frozen === b.frozen &&\n        a.sortableNodeRef === b.sortableNodeRef &&\n        a.sortableStyle === b.sortableStyle &&\n        a.sortableAttributes === b.sortableAttributes &&\n        equal(a.column, b.column) &&\n        equal(a.cellData, b.cellData) &&\n        equal(a.extraData, b.extraData) &&\n        equal(a.rowData, b.rowData);\n}\n"],"mappings":";;;AAyBA,IAAa,mBAAmB,MAAM,KAClC,SAAS,iBAAoB,OAAiC;CAI1D,OAAO,MAAM,YAAY,OAAO,MAAM,aAClC;EACI,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,UAAU,MAAM;EAChB,aAAa;EACb,QAAQ,MAAM;EACd,SAAS,MAAM;EACf,aAAa,MAAM;EACnB,OAAO,MAAM,OAAO;EACpB,iBAAiB,MAAM;EACvB,eAAe,MAAM;EACrB,oBAAoB,MAAM;EAC1B,YAAY,MAAM;EAClB,aAAa,MAAM;EACnB,QAAQ,MAAM;EACd,WAAW,MAAM;CACrB,CACJ,IAAI;AACR,GACA,iBACJ;;;;;;;;;;;;AAaA,SAAS,kBAAkB,GAAmC,GAA4C;CACtG,OAAO,EAAE,iBAAiB,EAAE,gBACxB,EAAE,YAAY,EAAE,WAChB,EAAE,YAAY,EAAE,WAChB,EAAE,aAAa,EAAE,YACjB,EAAE,gBAAgB,EAAE,eACpB,EAAE,eAAe,EAAE,cACnB,EAAE,gBAAgB,EAAE,eACpB,EAAE,WAAW,EAAE,UACf,EAAE,oBAAoB,EAAE,mBACxB,EAAE,kBAAkB,EAAE,iBACtB,EAAE,uBAAuB,EAAE,sBAC3B,UAAM,EAAE,QAAQ,EAAE,MAAM,KACxB,UAAM,EAAE,UAAU,EAAE,QAAQ,KAC5B,UAAM,EAAE,WAAW,EAAE,SAAS,KAC9B,UAAM,EAAE,SAAS,EAAE,OAAO;AAClC"}

package/dist/components/VirtualTable/VirtualTableHeader.es.js

@@ -0,0 +1,209 @@
+import { defaultBorderMixin } from "../../styles.es.js";
+import { cls } from "../../util/cls.es.js";
+import { Button } from "../Button.es.js";
+import { ErrorBoundary } from "../ErrorBoundary.es.js";
+import { IconButton } from "../IconButton.es.js";
+import { Popover } from "../Popover.es.js";
+import { Badge } from "../Badge.es.js";
+import React, { useCallback, useEffect, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpIcon, FilterIcon } from "lucide-react";
+import { deepEqual } from "fast-equals";
+//#region src/components/VirtualTable/VirtualTableHeader.tsx
+/**
+* What the next click on this column's sort control will do, spelled out for
+* the tooltip and for screen readers. An unlabelled arrow that means three
+* different things depending on the state it is in is a control you have to
+* click to learn.
+*/
+function sortActionTitle(sort, sortPosition) {
+	const rank = sortPosition !== void 0 ? ` (sort key ${sortPosition + 1})` : "";
+	const addKey = " — shift-click to add it under the current sort instead";
+	if (sort === "asc") return `Sorted ascending${rank}. Click to sort descending.${addKey}`;
+	if (sort === "desc") return `Sorted descending${rank}. Click to remove this sort.${addKey}`;
+	return `Click to sort ascending.${addKey}`;
+}
+var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRef, columnIndex, isResizingIndex, sort, sortPosition, onColumnSort, onFilterUpdate, filter, column, onClickResizeColumn, createFilterField, AdditionalHeaderWidget, isDragging, isDraggable }) {
+	const [onHover, setOnHover] = useState(false);
+	const [openFilter, setOpenFilter] = React.useState(false);
+	const [hidden, setHidden] = React.useState(false);
+	const handleSettingsClick = useCallback((_event) => {
+		setOpenFilter(true);
+	}, []);
+	const update = useCallback((filterForProperty, newOpenFilterState) => {
+		onFilterUpdate(column, filterForProperty);
+		if (newOpenFilterState !== void 0) setOpenFilter(newOpenFilterState);
+	}, [column, onFilterUpdate]);
+	const hovered = !(isResizingIndex !== columnIndex && isResizingIndex > 0) && (onHover || isResizingIndex === columnIndex);
+	return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxs("div", {
+		className: cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center", isDragging ? "bg-primary-bg" : "bg-surface-sheet", "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark", !isDragging && "hover:bg-surface-hover", column.frozen ? "sticky left-0 z-10" : "relative z-0", isDraggable && "cursor-grab"),
+		style: {
+			left: column.frozen ? 0 : void 0,
+			minWidth: column.width,
+			maxWidth: column.width
+		},
+		onMouseEnter: () => setOnHover(true),
+		onMouseMove: () => setOnHover(true),
+		onMouseLeave: () => setOnHover(false),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "overflow-hidden grow",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: `flex items-center justify-${column.headerAlign} flex-row`,
+					children: [column.icon && /* @__PURE__ */ jsx("div", {
+						className: "flex-shrink-0 flex items-center justify-center mr-1",
+						children: React.isValidElement(column.icon) ? React.cloneElement(column.icon, {
+							size: 14,
+							className: cls(column.icon.props?.className, "flex-shrink-0")
+						}) : column.icon
+					}), /* @__PURE__ */ jsx("div", {
+						className: "truncate -webkit-box w-full mr-1 overflow-hidden",
+						style: {
+							WebkitBoxOrient: "vertical",
+							WebkitLineClamp: 2,
+							justifyContent: column.align
+						},
+						children: column.title
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs(Fragment, { children: [AdditionalHeaderWidget && /* @__PURE__ */ jsx(AdditionalHeaderWidget, { onHover: onHover || openFilter }), column.sortable && (sort || hovered || openFilter) && /* @__PURE__ */ jsxs("div", {
+				className: "flex-shrink-0 flex items-center",
+				children: [/* @__PURE__ */ jsx(Badge, {
+					color: "secondary",
+					invisible: !sort,
+					children: /* @__PURE__ */ jsxs(IconButton, {
+						size: "small",
+						className: onHover || openFilter ? "bg-surface-card" : void 0,
+						title: sortActionTitle(sort, sortPosition),
+						"aria-label": sortActionTitle(sort, sortPosition),
+						onClick: (event) => {
+							onColumnSort(column.key, event.shiftKey);
+						},
+						children: [
+							!sort && /* @__PURE__ */ jsx(ArrowUpIcon, {
+								size: 14,
+								className: "flex-shrink-0"
+							}),
+							sort === "asc" && /* @__PURE__ */ jsx(ArrowUpIcon, {
+								size: 14,
+								className: "flex-shrink-0"
+							}),
+							sort === "desc" && /* @__PURE__ */ jsx(ArrowUpIcon, {
+								size: 14,
+								className: "flex-shrink-0 rotate-180"
+							})
+						]
+					})
+				}), sort && sortPosition !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "flex-shrink-0 -ml-0.5 mr-0.5 text-[10px] font-semibold leading-none tabular-nums text-text-secondary dark:text-text-secondary-dark",
+					"aria-hidden": true,
+					children: sortPosition + 1
+				})]
+			})] }),
+			column.filter && createFilterField && /* @__PURE__ */ jsx("div", {
+				className: "flex-shrink-0",
+				children: /* @__PURE__ */ jsx(Badge, {
+					color: "secondary",
+					invisible: !filter,
+					children: /* @__PURE__ */ jsx(Popover, {
+						open: openFilter,
+						onOpenChange: setOpenFilter,
+						className: hidden ? "hidden" : void 0,
+						modal: true,
+						trigger: /* @__PURE__ */ jsx(IconButton, {
+							"aria-label": column.title ? `Filter ${column.title}` : "Filter",
+							className: onHover || openFilter ? "bg-surface-card" : void 0,
+							size: "small",
+							onClick: handleSettingsClick,
+							children: /* @__PURE__ */ jsx(FilterIcon, {
+								size: 14,
+								className: "flex-shrink-0"
+							})
+						}),
+						children: /* @__PURE__ */ jsx(FilterForm, {
+							column,
+							filter,
+							onHover,
+							onFilterUpdate: update,
+							createFilterField,
+							hidden,
+							setHidden
+						})
+					})
+				})
+			}),
+			column.resizable && /* @__PURE__ */ jsx("div", {
+				ref: resizeHandleRef,
+				"data-no-dnd": "true",
+				className: cls("absolute h-full w-[6px] top-0 right-0 cursor-col-resize", hovered && "bg-hairline-strong"),
+				onPointerDown: (e) => {
+					e.stopPropagation();
+					if (onClickResizeColumn) onClickResizeColumn(columnIndex, column);
+				}
+			})
+		]
+	}) });
+}, deepEqual);
+function FilterForm({ column, onFilterUpdate, filter, onHover, createFilterField, hidden, setHidden }) {
+	const id = column.key;
+	const [filterInternal, setFilterInternal] = useState(filter);
+	useEffect(() => {
+		setFilterInternal(filter);
+	}, [filter]);
+	if (!column.filter) return null;
+	const submit = () => {
+		onFilterUpdate(filterInternal, false);
+	};
+	const reset = (_e) => {
+		onFilterUpdate(void 0, false);
+	};
+	const filterIsSet = !!filter;
+	const filterField = createFilterField({
+		id,
+		filterValue: filterInternal,
+		setFilterValue: setFilterInternal,
+		column,
+		hidden,
+		setHidden
+	});
+	if (!filterField) return null;
+	return /* @__PURE__ */ jsxs("form", {
+		noValidate: true,
+		onSubmit: (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			submit();
+		},
+		className: "text-surface-900 dark:text-white",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: cls(defaultBorderMixin, "py-4 px-6 typography-label border-b"),
+				children: column.title ?? id
+			}),
+			filterField && /* @__PURE__ */ jsx("div", {
+				className: "m-4 w-[400px]",
+				children: filterField
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex justify-end m-4",
+				children: [/* @__PURE__ */ jsx(Button, {
+					className: "mr-4",
+					disabled: !filterIsSet,
+					variant: "text",
+					type: "reset",
+					"aria-label": "filter clear",
+					onClick: reset,
+					children: "Clear"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					children: "Filter"
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { VirtualTableHeader };
+
+//# sourceMappingURL=VirtualTableHeader.es.js.map

package/dist/components/VirtualTable/VirtualTableHeader.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualTableHeader.es.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTableHeader.tsx"],"sourcesContent":["import { ArrowUpIcon, FilterIcon } from \"lucide-react\";\nimport { iconSize } from \"../../icons/Icon\";\n\nimport React, { RefObject, useCallback, useEffect, useState } from \"react\";\nimport { deepEqual as equal } from \"fast-equals\";\n\nimport { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from \"./VirtualTableProps\";\nimport { ErrorBoundary } from \"../ErrorBoundary\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { IconButton } from \"../IconButton\";\nimport { Popover } from \"../Popover\";\nimport { defaultBorderMixin } from \"../../styles\";\nimport { cls } from \"../../util/cls\";\ninterface FilterFormProps<T> {\n    column: VirtualTableColumn<T>;\n    onFilterUpdate: (filter?: [VirtualTableWhereFilterOp, unknown], newOpenFilterState?: boolean) => void;\n    filter?: [VirtualTableWhereFilterOp, unknown];\n    onHover: boolean,\n    createFilterField: (props: FilterFormFieldProps<T>) => React.ReactNode;\n    hidden: boolean;\n    setHidden: (hidden: boolean) => void;\n}\n\nexport type FilterFormFieldProps<CustomProps> = {\n    id: React.Key,\n    filterValue: [VirtualTableWhereFilterOp, unknown] | undefined,\n    setFilterValue: (filterValue?: [VirtualTableWhereFilterOp, unknown]) => void;\n    column: VirtualTableColumn<CustomProps>;\n    hidden: boolean;\n    setHidden: (hidden: boolean) => void;\n};\n\ntype VirtualTableHeaderProps<M extends object> = {\n    resizeHandleRef: React.Ref<HTMLDivElement>;\n    columnIndex: number;\n    isResizingIndex: number;\n    column: VirtualTableColumn<unknown>;\n    onColumnSort: (key: Extract<keyof M, string>, additive?: boolean) => void;\n    filter?: [VirtualTableWhereFilterOp, unknown];\n    sort: VirtualTableSort;\n    /**\n     * This column's zero-based rank in a multi-key sort, or `undefined` when\n     * only one column is sorted and a rank would say nothing.\n     */\n    sortPosition?: number;\n    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;\n    onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;\n    createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;\n    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;\n    isDragging?: boolean;\n    isDraggable?: boolean;\n};\n\n/**\n * What the next click on this column's sort control will do, spelled out for\n * the tooltip and for screen readers. An unlabelled arrow that means three\n * different things depending on the state it is in is a control you have to\n * click to learn.\n */\nfunction sortActionTitle(sort: VirtualTableSort, sortPosition?: number): string {\n    const rank = sortPosition !== undefined ? ` (sort key ${sortPosition + 1})` : \"\";\n    const addKey = \" — shift-click to add it under the current sort instead\";\n    if (sort === \"asc\") return `Sorted ascending${rank}. Click to sort descending.${addKey}`;\n    if (sort === \"desc\") return `Sorted descending${rank}. Click to remove this sort.${addKey}`;\n    return `Click to sort ascending.${addKey}`;\n}\n\nexport const VirtualTableHeader = React.memo<VirtualTableHeaderProps<Record<string, unknown>>>(\n    function VirtualTableHeader<M extends object>({\n        resizeHandleRef,\n        columnIndex,\n        isResizingIndex,\n        sort,\n        sortPosition,\n        onColumnSort,\n        onFilterUpdate,\n        filter,\n        column,\n        onClickResizeColumn,\n        createFilterField,\n        AdditionalHeaderWidget,\n        isDragging,\n        isDraggable\n    }: VirtualTableHeaderProps<M>) {\n\n        const [onHover, setOnHover] = useState(false);\n\n        const [openFilter, setOpenFilter] = React.useState(false);\n        const [hidden, setHidden] = React.useState(false);\n\n        const handleSettingsClick = useCallback((_event: React.MouseEvent) => {\n            setOpenFilter(true);\n        }, []);\n\n        const update = useCallback((filterForProperty?: [VirtualTableWhereFilterOp, unknown], newOpenFilterState?: boolean) => {\n            onFilterUpdate(column, filterForProperty);\n            if (newOpenFilterState !== undefined)\n                setOpenFilter(newOpenFilterState);\n        }, [column, onFilterUpdate]);\n\n        const thisColumnIsResizing = isResizingIndex === columnIndex;\n        const anotherColumnIsResizing = isResizingIndex !== columnIndex && isResizingIndex > 0;\n\n        const hovered = !anotherColumnIsResizing && (onHover || thisColumnIsResizing);\n\n        return (\n            <ErrorBoundary>\n                <div\n                    className={cls(\"flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center\",\n                        isDragging\n                            ? \"bg-primary-bg\"\n                            : \"bg-surface-sheet\",\n                        \"text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark\",\n                        !isDragging && \"hover:bg-surface-hover\",\n                        column.frozen ? \"sticky left-0 z-10\" : \"relative z-0\",\n                        isDraggable && \"cursor-grab\"\n                    )}\n                    style={{\n                        left: column.frozen ? 0 : undefined,\n                        minWidth: column.width,\n                        maxWidth: column.width\n                    }}\n                    onMouseEnter={() => setOnHover(true)}\n                    onMouseMove={() => setOnHover(true)}\n                    onMouseLeave={() => setOnHover(false)}\n                >\n\n                    <div className=\"overflow-hidden grow\">\n                        <div\n                            className={`flex items-center justify-${column.headerAlign} flex-row`}>\n\n                            {column.icon && (\n                                <div className=\"flex-shrink-0 flex items-center justify-center mr-1\">\n                                    {React.isValidElement(column.icon) ? (\n                                        React.cloneElement(column.icon as React.ReactElement<any>, {\n                                            size: 14,\n                                            className: cls((column.icon as React.ReactElement<any>).props?.className, \"flex-shrink-0\")\n                                        })\n                                    ) : (\n                                        column.icon\n                                    )}\n                                </div>\n                            )}\n\n                            <div\n                                className=\"truncate -webkit-box w-full mr-1 overflow-hidden\"\n                                style={{\n                                    WebkitBoxOrient: \"vertical\",\n                                    WebkitLineClamp: 2,\n                                    justifyContent: column.align\n                                }}>\n                                {column.title}\n                            </div>\n\n                        </div>\n                    </div>\n                    <>\n\n                        {AdditionalHeaderWidget &&\n                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}\n\n                        {column.sortable && (sort || hovered || openFilter) &&\n                            <div className=\"flex-shrink-0 flex items-center\">\n                                <Badge color=\"secondary\"\n                                    invisible={!sort}>\n                                    <IconButton\n                                        size={\"small\"}\n                                        className={onHover || openFilter ? \"bg-surface-card\" : undefined}\n                                        // Shift keeps the sort already in place\n                                        // and adds this column beneath it, which\n                                        // is how a two-key order is built from\n                                        // header clicks. Plain click still\n                                        // replaces the whole sort, so the common\n                                        // case takes no modifier and nothing a\n                                        // user knew before stops working.\n                                        title={sortActionTitle(sort, sortPosition)}\n                                        aria-label={sortActionTitle(sort, sortPosition)}\n                                        onClick={(event: React.MouseEvent) => {\n                                            onColumnSort(column.key as Extract<keyof M, string>, event.shiftKey);\n                                        }}\n                                    >\n                                        {!sort &&\n                                            <ArrowUpIcon size={14} className=\"flex-shrink-0\" />}\n                                        {sort === \"asc\" &&\n                                            <ArrowUpIcon size={14} className=\"flex-shrink-0\" />}\n                                        {sort === \"desc\" &&\n                                            <ArrowUpIcon size={14} className=\"flex-shrink-0 rotate-180\" />}\n                                    </IconButton>\n                                </Badge>\n                                {/* The rank, shown only once there is more than\n                                    one key: two arrows with no numbers beside\n                                    them say a table is sorted by both columns\n                                    and nothing about which one decides. */}\n                                {sort && sortPosition !== undefined && (\n                                    <span\n                                        className=\"flex-shrink-0 -ml-0.5 mr-0.5 text-[10px] font-semibold leading-none tabular-nums text-text-secondary dark:text-text-secondary-dark\"\n                                        aria-hidden={true}\n                                    >\n                                        {sortPosition + 1}\n                                    </span>\n                                )}\n                            </div>\n                        }\n                    </>\n\n                    {column.filter && createFilterField && <div className=\"flex-shrink-0\">\n                        <Badge color=\"secondary\"\n                            invisible={!filter}>\n\n                            <Popover\n                                open={openFilter}\n                                onOpenChange={setOpenFilter}\n                                className={hidden ? \"hidden\" : undefined}\n                                modal={true}\n                                trigger={\n                                    <IconButton\n                                        aria-label={column.title ? `Filter ${column.title}` : \"Filter\"}\n                                        className={onHover || openFilter ? \"bg-surface-card\" : undefined}\n                                        size={\"small\"}\n                                        onClick={handleSettingsClick}>\n                                        <FilterIcon size={14} className=\"flex-shrink-0\"/>\n                                    </IconButton>}\n                            >\n                                <FilterForm column={column}\n                                    filter={filter}\n                                    onHover={onHover}\n                                    onFilterUpdate={update}\n                                    createFilterField={createFilterField}\n                                    hidden={hidden}\n                                    setHidden={setHidden}/>\n\n                            </Popover>\n\n                        </Badge>\n\n                    </div>}\n\n                    {column.resizable && <div\n                        ref={resizeHandleRef as React.Ref<HTMLDivElement>}\n                        data-no-dnd=\"true\"\n                        className={cls(\n                            \"absolute h-full w-[6px] top-0 right-0 cursor-col-resize\",\n                            hovered && \"bg-hairline-strong\"\n                        )}\n                        onPointerDown={(e) => {\n                            e.stopPropagation();\n                            if (onClickResizeColumn) {\n                                onClickResizeColumn(columnIndex, column);\n                            }\n                        }}\n                    />}\n                </div>\n\n            </ErrorBoundary>\n        );\n    }, equal) as React.FunctionComponent<VirtualTableHeaderProps<Record<string, unknown>>>;\n\nfunction FilterForm<M>({\n    column,\n    onFilterUpdate,\n    filter,\n    onHover,\n    createFilterField,\n    hidden,\n    setHidden\n}: FilterFormProps<M>) {\n\n    const id = column.key;\n\n    const [filterInternal, setFilterInternal] = useState<[VirtualTableWhereFilterOp, unknown] | undefined>(filter);\n\n    useEffect(() => {\n        setFilterInternal(filter);\n    }, [filter]);\n\n    if (!column.filter) return null;\n\n    const submit = () => {\n        onFilterUpdate(filterInternal, false);\n    };\n\n    const reset = (_e: React.MouseEvent) => {\n        onFilterUpdate(undefined, false);\n    };\n\n    const filterIsSet = !!filter;\n\n    const filterField = createFilterField({\n        id,\n        filterValue: filterInternal,\n        setFilterValue: setFilterInternal,\n        column,\n        hidden,\n        setHidden\n    });\n\n    if (!filterField) return null;\n    return (\n        <form noValidate={true}\n            onSubmit={(e) => {\n                e.stopPropagation();\n                e.preventDefault();\n                submit();\n            }}\n            className={\"text-surface-900 dark:text-white\"}>\n            <div\n                className={cls(defaultBorderMixin, \"py-4 px-6 typography-label border-b\")}>\n                {column.title ?? id}\n            </div>\n            {filterField && <div className=\"m-4 w-[400px]\">\n                {filterField}\n            </div>}\n            <div className=\"flex justify-end m-4\">\n                <Button\n                    className=\"mr-4\"\n                    disabled={!filterIsSet}\n                    variant={\"text\"}\n                    type=\"reset\"\n                    aria-label=\"filter clear\"\n                    onClick={reset}>Clear</Button>\n                <Button\n                    type=\"submit\">Filter</Button>\n            </div>\n        </form>\n    );\n\n}\n"],"mappings":"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"}

package/dist/components/VirtualTable/VirtualTableHeaderRow.es.js

@@ -0,0 +1,166 @@
+import { defaultBorderMixin } from "../../styles.es.js";
+import { cls } from "../../util/cls.es.js";
+import { ErrorBoundary } from "../ErrorBoundary.es.js";
+import { VirtualTableHeader } from "./VirtualTableHeader.es.js";
+import React, { createRef, useCallback, useEffect, useMemo, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useSortable } from "@dnd-kit/sortable";
+//#region src/components/VirtualTable/VirtualTableHeaderRow.tsx
+var SortableColumnHeader = ({ column, columnIndex, columnRefs, isResizing, onFilterUpdate, filter, sortIndex, sortCount, onColumnSort, onClickResizeColumn, createFilterField, isDragging, isDraggable }) => {
+	const [isPressing, setIsPressing] = useState(false);
+	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+		id: column.key,
+		disabled: !isDraggable || column.frozen
+	});
+	const style = {
+		transform: transform ? `translateX(${transform.x}px)` : void 0,
+		transition: isDragging ? void 0 : transition,
+		minWidth: column.width,
+		maxWidth: column.width,
+		width: column.width
+	};
+	const combinedListeners = isDraggable ? {
+		...listeners,
+		onPointerDown: (e) => {
+			setIsPressing(true);
+			listeners?.onPointerDown?.(e);
+		},
+		onPointerUp: () => setIsPressing(false),
+		onPointerCancel: () => setIsPressing(false)
+	} : {};
+	React.useEffect(() => {
+		if (!isDragging) setIsPressing(false);
+	}, [isDragging]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: setNodeRef,
+		style,
+		className: cls("flex-shrink-0 h-full", column.frozen && "sticky left-0 z-10"),
+		...attributes,
+		...combinedListeners,
+		children: /* @__PURE__ */ jsx(VirtualTableHeader, {
+			resizeHandleRef: columnRefs[columnIndex],
+			columnIndex,
+			isResizingIndex: isResizing,
+			onFilterUpdate,
+			filter,
+			sort: sortIndex.get(column.key)?.direction,
+			sortPosition: sortCount > 1 ? sortIndex.get(column.key)?.position : void 0,
+			onColumnSort,
+			onClickResizeColumn,
+			column,
+			createFilterField,
+			AdditionalHeaderWidget: column.AdditionalHeaderWidget,
+			isDragging: isDragging || isPressing,
+			isDraggable
+		})
+	});
+};
+var VirtualTableHeaderRow = ({ columns, sortIndex, onColumnSort, onFilterUpdate, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight = 54, draggingColumnId, headerHeight = 40 }) => {
+	const columnRefs = useMemo(() => columns.map(() => createRef()), [columns.length]);
+	const [isResizing, setIsResizing] = useState(-1);
+	const adjustWidthColumn = useCallback((index, width, end) => {
+		const column = columns[index];
+		const minWidth = 100;
+		const maxWidth = 800;
+		const newWidth = width > maxWidth ? maxWidth : width < minWidth ? minWidth : width;
+		const params = {
+			width: newWidth,
+			key: column.key,
+			column: {
+				...column,
+				width: newWidth
+			}
+		};
+		if (!end) onColumnResize(params);
+		else onColumnResizeEnd(params);
+	}, [
+		columns,
+		onColumnResize,
+		onColumnResizeEnd
+	]);
+	const getEventNewWidth = useCallback((e) => {
+		if (isResizing >= 0) {
+			const left = columnRefs[isResizing].current?.parentElement?.getBoundingClientRect().left;
+			if (!left) return;
+			return e.clientX - left;
+		}
+	}, [columnRefs, isResizing]);
+	const setCursorDocument = useCallback((isResizing) => {
+		document.body.style.cursor = isResizing ? "col-resize" : "auto";
+	}, []);
+	const handleOnMouseMove = useCallback((e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		const newWidth = getEventNewWidth(e);
+		if (newWidth) adjustWidthColumn(isResizing, newWidth, false);
+	}, [
+		adjustWidthColumn,
+		getEventNewWidth,
+		isResizing
+	]);
+	const handleOnMouseUp = useCallback((e) => {
+		e.stopPropagation();
+		e.preventDefault();
+		const newWidth = getEventNewWidth(e);
+		if (newWidth) adjustWidthColumn(isResizing, newWidth, true);
+		setIsResizing(-1);
+		setCursorDocument(false);
+	}, [
+		adjustWidthColumn,
+		getEventNewWidth,
+		isResizing,
+		setCursorDocument
+	]);
+	const removeResizingListeners = useCallback(() => {
+		document.removeEventListener("mousemove", handleOnMouseMove);
+		document.removeEventListener("mouseup", handleOnMouseUp);
+	}, [handleOnMouseMove, handleOnMouseUp]);
+	const attachResizeListeners = useCallback(() => {
+		document.addEventListener("mousemove", handleOnMouseMove);
+		document.addEventListener("mouseup", handleOnMouseUp);
+	}, [handleOnMouseMove, handleOnMouseUp]);
+	useEffect(() => {
+		if (isResizing >= 0) attachResizeListeners();
+		else removeResizingListeners();
+		return () => {
+			removeResizingListeners();
+		};
+	}, [
+		attachResizeListeners,
+		isResizing,
+		removeResizingListeners
+	]);
+	const onClickResizeColumn = useCallback((index) => {
+		setIsResizing(index);
+		setCursorDocument(true);
+	}, [setCursorDocument]);
+	return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+		className: cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-sheet"),
+		style: { height: headerHeight },
+		children: [columns.map((column, columnIndex) => {
+			const columnFilter = column && filter && filter[column.key] ? filter[column.key] : void 0;
+			const filterForThisProperty = columnFilter ? Array.isArray(columnFilter[0]) ? columnFilter[0] : columnFilter : void 0;
+			const isDraggable = !column.frozen && !!onColumnsOrderChange;
+			const isDragging = draggingColumnId === column.key;
+			return /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(SortableColumnHeader, {
+				column,
+				columnIndex,
+				columnRefs,
+				isResizing,
+				onFilterUpdate,
+				filter: filterForThisProperty,
+				sortIndex,
+				sortCount: sortIndex.size,
+				onColumnSort,
+				onClickResizeColumn,
+				createFilterField,
+				isDragging,
+				isDraggable
+			}) }, "header_" + column.key);
+		}), AddColumnComponent && /* @__PURE__ */ jsx(AddColumnComponent, {})]
+	}) });
+};
+//#endregion
+export { VirtualTableHeaderRow };
+
+//# sourceMappingURL=VirtualTableHeaderRow.es.js.map

package/dist/components/VirtualTable/VirtualTableHeaderRow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualTableHeaderRow.es.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTableHeaderRow.tsx"],"sourcesContent":["import React, { createRef, useCallback, useEffect, useMemo, useState } from \"react\";\n\nimport { VirtualTableColumn, VirtualTableWhereFilterOp } from \"./VirtualTableProps\";\nimport { ErrorBoundary } from \"../ErrorBoundary\";\nimport { VirtualTableHeader } from \"./VirtualTableHeader\";\nimport { VirtualTableContextProps } from \"./types\";\nimport { defaultBorderMixin } from \"../../styles\";\nimport { cls } from \"../../util/cls\";import { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\n\n// Sortable column header wrapper\nconst SortableColumnHeader = ({\n    column,\n    columnIndex,\n    columnRefs,\n    isResizing,\n    onFilterUpdate,\n    filter,\n    sortIndex,\n    sortCount,\n    onColumnSort,\n    onClickResizeColumn,\n    createFilterField,\n    isDragging,\n    isDraggable\n}: {\n    column: VirtualTableColumn;\n    columnIndex: number;\n    columnRefs: React.Ref<HTMLDivElement>[];\n    isResizing: number;\n    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;\n    filter: [VirtualTableWhereFilterOp, unknown] | undefined;\n    sortIndex: Map<string, { direction: \"asc\" | \"desc\"; position: number }>;\n    sortCount: number;\n    onColumnSort: (key: string, additive?: boolean) => void;\n    onClickResizeColumn: (index: number) => void;\n    createFilterField: ((props: import(\"./VirtualTableHeader\").FilterFormFieldProps<unknown>) => React.ReactNode) | undefined;\n    isDragging: boolean;\n    isDraggable: boolean;\n}) => {\n    const [isPressing, setIsPressing] = useState(false);\n\n    const {\n        attributes,\n        listeners,\n        setNodeRef,\n        transform,\n        transition\n    } = useSortable({\n        id: column.key,\n        disabled: !isDraggable || column.frozen\n    });\n\n    const style = {\n        // Only use translate, ignore any scale transforms\n        transform: transform ? `translateX(${transform.x}px)` : undefined,\n        // Don't transition the dragged item - only other items should animate\n        transition: isDragging ? undefined : transition,\n        minWidth: column.width,\n        maxWidth: column.width,\n        width: column.width\n    };\n\n    // Combine our press handlers with dnd-kit listeners\n    const combinedListeners = isDraggable ? {\n        ...listeners,\n        onPointerDown: (e: React.PointerEvent) => {\n            setIsPressing(true);\n            listeners?.onPointerDown?.(e);\n        },\n        onPointerUp: () => setIsPressing(false),\n        onPointerCancel: () => setIsPressing(false)\n    } : {};\n\n    // Reset pressing state when drag ends\n    React.useEffect(() => {\n        if (!isDragging) {\n            setIsPressing(false);\n        }\n    }, [isDragging]);\n\n    return (\n        <div\n            ref={setNodeRef}\n            style={style}\n            className={cls(\n                \"flex-shrink-0 h-full\",\n                column.frozen && \"sticky left-0 z-10\"\n            )}\n            {...attributes}\n            {...combinedListeners}\n        >\n            <VirtualTableHeader\n                resizeHandleRef={columnRefs[columnIndex]}\n                columnIndex={columnIndex}\n                isResizingIndex={isResizing}\n                onFilterUpdate={onFilterUpdate}\n                filter={filter}\n                sort={sortIndex.get(column.key)?.direction}\n                sortPosition={sortCount > 1 ? sortIndex.get(column.key)?.position : undefined}\n                onColumnSort={onColumnSort}\n                onClickResizeColumn={onClickResizeColumn}\n                column={column}\n                createFilterField={createFilterField}\n                AdditionalHeaderWidget={column.AdditionalHeaderWidget}\n                isDragging={isDragging || isPressing}\n                isDraggable={isDraggable}/>\n        </div>\n    );\n};\n\nexport const VirtualTableHeaderRow = ({\n    columns,\n    sortIndex,\n    onColumnSort,\n    onFilterUpdate,\n    filter,\n    onColumnResize,\n    onColumnResizeEnd,\n    createFilterField,\n    AddColumnComponent,\n    onColumnsOrderChange,\n    data,\n    cellRenderer: CellRenderer,\n    rowHeight = 54,\n    draggingColumnId,\n    headerHeight = 40\n}: VirtualTableContextProps<Record<string, unknown>>) => {\n\n    const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);\n    const [isResizing, setIsResizing] = useState(-1);\n\n    const adjustWidthColumn = useCallback((index: number, width: number, end: boolean) => {\n        const column = columns[index];\n        const minWidth = 100;\n        const maxWidth = 800;\n        const newWidth = width > maxWidth ? maxWidth : (width < minWidth ? minWidth : width);\n        const params = {\n            width: newWidth,\n            key: column.key as string,\n            column: {\n                ...column,\n                width: newWidth\n            } as VirtualTableColumn\n        };\n        if (!end)\n            onColumnResize(params);\n        else\n            onColumnResizeEnd(params);\n    }, [columns, onColumnResize, onColumnResizeEnd]);\n\n    const getEventNewWidth = useCallback((e: MouseEvent) => {\n        if (isResizing >= 0) {\n            const left = columnRefs[isResizing].current?.parentElement?.getBoundingClientRect().left;\n            if (!left) return;\n            return e.clientX - left;\n        }\n        return undefined;\n    }, [columnRefs, isResizing]);\n\n    const setCursorDocument = useCallback((isResizing: boolean) => {\n        document.body.style.cursor = isResizing ? \"col-resize\" : \"auto\";\n    }, []);\n\n    const handleOnMouseMove = useCallback((e: MouseEvent) => {\n        e.stopPropagation();\n        e.preventDefault();\n        const newWidth = getEventNewWidth(e);\n        if (newWidth)\n            adjustWidthColumn(isResizing, newWidth, false);\n    }, [adjustWidthColumn, getEventNewWidth, isResizing]);\n\n    const handleOnMouseUp = useCallback((e: MouseEvent) => {\n        e.stopPropagation();\n        e.preventDefault();\n        const newWidth = getEventNewWidth(e);\n        if (newWidth)\n            adjustWidthColumn(isResizing, newWidth, true);\n        setIsResizing(-1);\n        setCursorDocument(false);\n    }, [adjustWidthColumn, getEventNewWidth, isResizing, setCursorDocument]);\n\n    const removeResizingListeners = useCallback(() => {\n        document.removeEventListener(\"mousemove\", handleOnMouseMove);\n        document.removeEventListener(\"mouseup\", handleOnMouseUp);\n    }, [handleOnMouseMove, handleOnMouseUp]);\n\n    const attachResizeListeners = useCallback(() => {\n        document.addEventListener(\"mousemove\", handleOnMouseMove);\n        document.addEventListener(\"mouseup\", handleOnMouseUp);\n    }, [handleOnMouseMove, handleOnMouseUp]);\n\n    useEffect(() => {\n        if (isResizing >= 0) {\n            attachResizeListeners();\n        } else {\n            removeResizingListeners();\n        }\n        return () => {\n            removeResizingListeners();\n        };\n    }, [attachResizeListeners, isResizing, removeResizingListeners]);\n\n    const onClickResizeColumn = useCallback((index: number) => {\n        setIsResizing(index);\n        setCursorDocument(true);\n    }, [setCursorDocument]);\n\n    return (\n        <>\n            <div\n                className={cls(defaultBorderMixin, \"z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-sheet\")}\n                style={{ height: headerHeight }}>\n                {columns.map((column, columnIndex) => {\n                    const columnFilter = column && filter && filter[column.key] ? filter[column.key] : undefined;\n                    const filterForThisProperty: [VirtualTableWhereFilterOp, unknown] | undefined =\n                        columnFilter\n                            ? (Array.isArray(columnFilter[0]) ? (columnFilter as [VirtualTableWhereFilterOp, unknown][])[0] : (columnFilter as [VirtualTableWhereFilterOp, unknown]))\n                            : undefined;\n\n                    const isDraggable = !column.frozen && !!onColumnsOrderChange;\n                    const isDragging = draggingColumnId === column.key;\n\n                    return (\n                        <ErrorBoundary key={\"header_\" + column.key}>\n                            <SortableColumnHeader\n                                column={column}\n                                columnIndex={columnIndex}\n                                columnRefs={columnRefs}\n                                isResizing={isResizing}\n                                onFilterUpdate={onFilterUpdate}\n                                filter={filterForThisProperty}\n                                sortIndex={sortIndex}\n                                sortCount={sortIndex.size}\n                                onColumnSort={onColumnSort}\n                                onClickResizeColumn={onClickResizeColumn}\n                                createFilterField={createFilterField}\n                                isDragging={isDragging}\n                                isDraggable={isDraggable}\n                            />\n                        </ErrorBoundary>\n                    );\n                })}\n\n                {AddColumnComponent && <AddColumnComponent/>}\n\n            </div>\n        </>\n    );\n};\n"],"mappings":"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"}

package/dist/components/VirtualTable/VirtualTableProps.d.ts

@@ -22,9 +22,11 @@ export type OnRowClickParams<T extends object> = {
  */
 export interface VirtualTableProps<T extends object> {
     /**
-     * Array of arbitrary data
+     * Array of arbitrary data. A position holding `undefined` is a row that
+     * exists but has not been read yet: it is drawn, and its cells are
+     * rendered with no `rowData`, so the renderer can show a placeholder.
      */
-    data?: T[];
+    data?: (T | undefined)[];
     /**
      * Properties displayed in this collection. If this property is not set
      * every property is displayed, you can filter
@@ -145,6 +147,15 @@ export interface VirtualTableProps<T extends object> {
      * Initial scroll position
      */
     initialScroll?: number;
+    /**
+     * Called with the positions in `data` of the rows on screen — not the
+     * ones drawn ahead of them — end exclusive, each time they change. While
+     * the table is still scrolling to `initialScroll`, the rows there.
+     */
+    onRowsRendered?: (range: {
+        start: number;
+        end: number;
+    }) => void;
     /**
      * Callback when columns are reordered via drag-and-drop.
      * @param columns The new column order

package/dist/components/VirtualTable/VirtualTableRow.d.ts

@@ -1,11 +1,10 @@
 import React from "react";
 import { VirtualTableRowProps } from "./types.js";
 /**
- * The same fix `VirtualTable` carries, one level down: `React.memo` takes the
- * props type as its own type argument, so the annotation on the call pins the
- * row type at the boundary and discards the `<T>` the inner function declares.
- * Pinned, the row a caller passes in and the row its `onRowClick` and
- * `rowClassName` receive were unrelated types, which is what every consumer was
- * paying for with a cast.
+ * Not memoised itself: `VirtualTableRowRenderer` (in `VirtualTable`) decides
+ * when a row is drawn again, from the inputs its cells are built from. A memo
+ * here could only compare the `children` it is handed, and those are new
+ * elements every time the renderer runs — it deep-compared every cell element
+ * and the full `columns` array each one carries, to find them unequal.
  */
-export declare const VirtualTableRow: <T extends object>(props: VirtualTableRowProps<T>) => React.ReactElement | null;
+export declare function VirtualTableRow<T extends object>({ rowData, rowIndex, children, onRowClick, rowHeight, style, hoverRow, rowClassName }: VirtualTableRowProps<T>): React.JSX.Element;

package/dist/components/VirtualTable/VirtualTableRow.es.js

@@ -0,0 +1,41 @@
+import { cls } from "../../util/cls.es.js";
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/VirtualTable/VirtualTableRow.tsx
+/**
+* Not memoised itself: `VirtualTableRowRenderer` (in `VirtualTable`) decides
+* when a row is drawn again, from the inputs its cells are built from. A memo
+* here could only compare the `children` it is handed, and those are new
+* elements every time the renderer runs — it deep-compared every cell element
+* and the full `columns` array each one carries, to find them unequal.
+*/
+function VirtualTableRow({ rowData, rowIndex, children, onRowClick, rowHeight, style, hoverRow, rowClassName }) {
+	const onClick = useCallback((event) => {
+		if (onRowClick && rowData) onRowClick({
+			rowData,
+			rowIndex,
+			event
+		});
+	}, [
+		onRowClick,
+		rowData,
+		rowIndex
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("group flex min-w-full text-sm border-b border-hairline bg-surface-card", rowClassName && rowData ? rowClassName(rowData) : "", {
+			"hover:!bg-surface-card-hover": hoverRow,
+			"cursor-pointer ": onRowClick
+		}),
+		onClick,
+		style: {
+			...style,
+			height: rowHeight,
+			width: "fit-content"
+		},
+		children
+	});
+}
+//#endregion
+export { VirtualTableRow };
+
+//# sourceMappingURL=VirtualTableRow.es.js.map

package/dist/components/VirtualTable/VirtualTableRow.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualTableRow.es.js","names":[],"sources":["../../../src/components/VirtualTable/VirtualTableRow.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\n\nimport { VirtualTableRowProps } from \"./types\";\nimport { cls } from \"../../util/cls\";\n\n/**\n * Not memoised itself: `VirtualTableRowRenderer` (in `VirtualTable`) decides\n * when a row is drawn again, from the inputs its cells are built from. A memo\n * here could only compare the `children` it is handed, and those are new\n * elements every time the renderer runs — it deep-compared every cell element\n * and the full `columns` array each one carries, to find them unequal.\n */\nexport function VirtualTableRow<T extends object>({\n    rowData,\n    rowIndex,\n    children,\n    onRowClick,\n    rowHeight,\n    style,\n    hoverRow,\n    rowClassName\n}: VirtualTableRowProps<T>) {\n\n    const onClick = useCallback((event: React.SyntheticEvent) => {\n        // A row with no data yet is not a row anyone clicked *on*.\n        if (onRowClick && rowData)\n            onRowClick({\n                rowData,\n                rowIndex,\n                event\n            })\n    }, [onRowClick, rowData, rowIndex]);\n\n    return (\n        <div\n            className={cls(\n                \"group flex min-w-full text-sm border-b border-hairline bg-surface-card\",\n                rowClassName && rowData ? rowClassName(rowData) : \"\",\n                {\n                    \"hover:!bg-surface-card-hover\": hoverRow,\n                    \"cursor-pointer \": onRowClick\n                }\n            )}\n            onClick={onClick}\n            style={{\n                ...(style),\n                height: rowHeight,\n                width: \"fit-content\"\n            }}\n        >\n            {children}\n        </div>\n    );\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,gBAAkC,EAC9C,SACA,UACA,UACA,YACA,WACA,OACA,UACA,gBACwB;CAExB,MAAM,UAAU,aAAa,UAAgC;EAEzD,IAAI,cAAc,SACd,WAAW;GACP;GACA;GACA;EACJ,CAAC;CACT,GAAG;EAAC;EAAY;EAAS;CAAQ,CAAC;CAElC,OACI,oBAAC,OAAD;EACI,WAAW,IACP,0EACA,gBAAgB,UAAU,aAAa,OAAO,IAAI,IAClD;GACI,gCAAgC;GAChC,mBAAmB;EACvB,CACJ;EACS;EACT,OAAO;GACH,GAAI;GACJ,QAAQ;GACR,OAAO;EACX;EAEC;CACA,CAAA;AAEb"}

package/dist/components/VirtualTable/fields/VirtualTableDateField.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
+import { type DateTimeFieldMode } from "../../DateTimeField.js";
 export declare function VirtualTableDateField(props: {
     name?: string;
     error?: Error;
-    mode?: "date" | "date_time";
+    mode?: DateTimeFieldMode;
     timezone?: string;
     internalValue: Date | undefined | null;
     updateValue: (newValue: (Date | null)) => void;

package/dist/components/VirtualTable/fields/VirtualTableDateField.es.js

@@ -0,0 +1,71 @@
+import { focusedDisabled } from "../../../styles.es.js";
+import { cls } from "../../../util/cls.es.js";
+import { DateTimeField } from "../../DateTimeField.es.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/VirtualTable/fields/VirtualTableDateField.tsx
+function VirtualTableDateField(props) {
+	const { name, disabled, error, mode, timezone, internalValue, updateValue, small = false, locale, pickerButton = true, inputRef } = props;
+	const [focused, setFocused] = useState(false);
+	const focusedRef = useRef(false);
+	const [draft, setDraft] = useState(null);
+	const draftRef = useRef(null);
+	const timerRef = useRef(void 0);
+	const updateValueRef = useRef(updateValue);
+	useEffect(() => {
+		updateValueRef.current = updateValue;
+	}, [updateValue]);
+	const commit = useCallback(() => {
+		clearTimeout(timerRef.current);
+		const pending = draftRef.current;
+		if (!pending) return;
+		draftRef.current = null;
+		setDraft(null);
+		updateValueRef.current(pending.value);
+	}, []);
+	const onDateChange = (dateValue) => {
+		const pending = { value: dateValue ?? null };
+		draftRef.current = pending;
+		setDraft(pending);
+		clearTimeout(timerRef.current);
+		if (!focusedRef.current) commit();
+		else if (!pending.value || pending.value.getFullYear() >= 1e3) timerRef.current = setTimeout(commit, 400);
+	};
+	useEffect(() => () => {
+		clearTimeout(timerRef.current);
+		if (draftRef.current) updateValueRef.current(draftRef.current.value);
+	}, []);
+	const shownValue = draft ? draft.value : internalValue;
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full h-full flex items-center",
+		onFocus: () => {
+			focusedRef.current = true;
+			setFocused(true);
+		},
+		onBlur: () => {
+			focusedRef.current = false;
+			setFocused(false);
+			commit();
+		},
+		children: /* @__PURE__ */ jsx(DateTimeField, {
+			value: shownValue ?? void 0,
+			onChange: onDateChange,
+			disabled,
+			error: Boolean(error),
+			"aria-label": name,
+			invisible: true,
+			pickerButton,
+			inputRef,
+			size: small ? "small" : "medium",
+			inputClassName: cls("w-full h-full", focusedDisabled, !pickerButton && "px-0", !shownValue && !focused && "text-transparent"),
+			className: cls("w-full h-full", focusedDisabled),
+			mode,
+			timezone,
+			locale
+		})
+	});
+}
+//#endregion
+export { VirtualTableDateField };
+
+//# sourceMappingURL=VirtualTableDateField.es.js.map