@rebasepro/ui 0.20.0 → 0.21.0

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

@@ -14,4 +14,4 @@ import { VirtualTableProps } from "./VirtualTableProps.js";
  * implementation always had. Runtime behaviour is unchanged — this is the same
  * memoized component under a type that describes it.
  */
-export declare const VirtualTable: <T extends Record<string, unknown>>(props: VirtualTableProps<T>) => React.ReactElement | null;
+export declare const VirtualTable: <T extends object>(props: VirtualTableProps<T>) => React.ReactElement | null;

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

@@ -8,7 +8,7 @@ export type FilterFormFieldProps<CustomProps> = {
     hidden: boolean;
     setHidden: (hidden: boolean) => void;
 };
-type VirtualTableHeaderProps<M extends Record<string, unknown>> = {
+type VirtualTableHeaderProps<M extends object> = {
     resizeHandleRef: React.Ref<HTMLDivElement>;
     columnIndex: number;
     isResizingIndex: number;

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

@@ -11,7 +11,7 @@ import type { FilterFormFieldProps } from "./VirtualTableHeader.js";
  * order through no longer has to strip it.
  */
 export type VirtualTableSortKey = [string, "asc" | "desc", ("first" | "last")?];
-export type OnRowClickParams<T extends Record<string, unknown>> = {
+export type OnRowClickParams<T extends object> = {
     rowData: T;
     rowIndex: number;
     event: React.SyntheticEvent;
@@ -20,7 +20,7 @@ export type OnRowClickParams<T extends Record<string, unknown>> = {
  * @see Table
  * @group Components
  */
-export interface VirtualTableProps<T extends Record<string, unknown>> {
+export interface VirtualTableProps<T extends object> {
     /**
      * Array of arbitrary data
      */

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

@@ -1,3 +1,11 @@
 import React from "react";
 import { VirtualTableRowProps } from "./types.js";
-export declare const VirtualTableRow: React.NamedExoticComponent<VirtualTableRowProps<Record<string, unknown>>>;
+/**
+ * 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.
+ */
+export declare const VirtualTableRow: <T extends object>(props: VirtualTableRowProps<T>) => React.ReactElement | null;

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

@@ -1,18 +1,27 @@
 import React from "react";
 import { CellRendererParams, OnRowClickParams, OnVirtualTableColumnResizeParams, VirtualTableColumn, VirtualTableFilterValues, VirtualTableWhereFilterOp } from "./VirtualTableProps.js";
 import { FilterFormFieldProps } from "./VirtualTableHeader.js";
-export type VirtualTableRowProps<T extends Record<string, unknown>> = {
+export type VirtualTableRowProps<T extends object> = {
     style: React.CSSProperties;
     rowHeight: number;
-    rowData: T;
+    /**
+     * Absent while the window is scrolled past what has loaded — the row still
+     * has to occupy its slot, so it renders empty rather than not at all.
+     *
+     * Declared, because it happens. `VirtualTable` used to assert it away with
+     * `as Record<string, unknown>` on the way in, and this component then
+     * guarded `rowData &&` on the way out — the guard and the type disagreeing
+     * about the same value, in the same render.
+     */
+    rowData: T | undefined;
     rowIndex: number;
-    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
+    onRowClick?: (props: OnRowClickParams<T>) => void;
     children: React.ReactNode[];
     columns: VirtualTableColumn[];
     hoverRow?: boolean;
     rowClassName?: (rowData: T) => string | undefined;
 };
-export type VirtualTableContextProps<T> = {
+export type VirtualTableContextProps<T extends object> = {
     data?: T[];
     rowHeight?: number;
     headerHeight?: number;
@@ -24,7 +33,7 @@ export type VirtualTableContextProps<T> = {
         position: number;
     }>;
     filter?: VirtualTableFilterValues<string>;
-    onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
+    onRowClick?: (props: OnRowClickParams<T>) => void;
     onColumnSort: (key: string, additive?: boolean) => void;
     onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
     onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;

package/dist/index.es.js

@@ -4364,7 +4364,7 @@ function FileUpload({ accept, onFilesAdded, onFilesRejected, maxSize, disabled,
 		role: "button",
 		"aria-label": typeof title === "string" ? title : typeof uploadDescription === "string" ? uploadDescription : "Upload file",
 		"aria-disabled": disabled || void 0,
-		className: cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid", {
+		className: cls(fieldBackgroundMixin, "flex gap-2", "p-4 box-border relative items-center border-2 border-solid border-transparent outline-hidden rounded-lg duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary", {
 			"h-44": size === "large",
 			"h-28": size === "medium",
 			"h-16": size === "small",
@@ -6061,7 +6061,7 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 	}, [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 dark:bg-primary-bg-dark" : "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"),
+		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,
@@ -6383,11 +6383,17 @@ var VirtualTableHeaderRow = ({ columns, sortIndex, onColumnSort, onFilterUpdate,
 		}), AddColumnComponent && /* @__PURE__ */ jsx(AddColumnComponent, {})]
 	}) });
 };
-//#endregion
-//#region src/components/VirtualTable/VirtualTableRow.tsx
+/**
+* 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.
+*/
 var VirtualTableRow = React.memo(function VirtualTableRow({ rowData, rowIndex, children, onRowClick, rowHeight, style, hoverRow, rowClassName }) {
 	const onClick = useCallback((event) => {
-		if (onRowClick) onRowClick({
+		if (onRowClick && rowData) onRowClick({
 			rowData,
 			rowIndex,
 			event
@@ -6398,7 +6404,7 @@ var VirtualTableRow = React.memo(function VirtualTableRow({ rowData, rowIndex, c
 		rowIndex
 	]);
 	return /* @__PURE__ */ jsx("div", {
-		className: cls("group flex min-w-full text-sm border-b border-hairline bg-surface-card", rowClassName ? rowClassName(rowData) : "", {
+		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
 		}),
@@ -7458,7 +7464,7 @@ function CardView({ data, dataLoading = false, noMoreToLoad = false, dataLoading
 					const selected = selectedIds?.has(id) ?? false;
 					const highlighted = highlightedIds?.has(id) ?? false;
 					const handleClick = (e) => {
-						if ((e.metaKey || e.ctrlKey) && selectionEnabled) {
+						if (e && (e.metaKey || e.ctrlKey) && selectionEnabled) {
 							e.preventDefault();
 							onSelectionChange?.(item, !selected);
 							return;
@@ -8781,7 +8787,7 @@ function CollectionListView({ dataController, properties, propertiesOrder, idPro
 		const titleValue = getValueInPath(item, titlePropertyKey);
 		return /* @__PURE__ */ jsxs("div", {
 			style,
-			className: cls("flex items-center gap-3 px-4 cursor-pointer", "hover:bg-surface-hover", "transition-colors duration-100", selected && "bg-primary-50 dark:bg-primary-900/20", highlighted && "bg-surface-raised", rowClassName),
+			className: cls("flex items-center gap-3 px-4 cursor-pointer", "hover:bg-surface-hover", "transition-colors duration-100", selected && "bg-primary-bg", highlighted && "bg-surface-raised", rowClassName),
 			onClick,
 			children: [selectionEnabled && /* @__PURE__ */ jsx("div", {
 				className: "flex-shrink-0",