@rebasepro/ui 0.14.0 → 0.14.1-canary.g7e666eb

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

@@ -13,9 +13,14 @@ type VirtualTableHeaderProps<M extends Record<string, unknown>> = {
     columnIndex: number;
     isResizingIndex: number;
     column: VirtualTableColumn<unknown>;
-    onColumnSort: (key: Extract<keyof M, string>) => void;
+    onColumnSort: (key: Extract<keyof M, string>, additive?: boolean) => void;
     filter?: [VirtualTableWhereFilterOp, unknown];
     sort: VirtualTableSort;
+    /**
+     * This column's zero-based rank in a multi-key sort, or `undefined` when
+     * only one column is sorted and a rank would say nothing.
+     */
+    sortPosition?: number;
     onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
     createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;

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

@@ -1,3 +1,3 @@
 import React from "react";
 import { VirtualTableContextProps } from "./types";
-export declare const VirtualTableHeaderRow: ({ columns, currentSort, onColumnSort, onFilterUpdate, sortByProperty, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight, draggingColumnId, headerHeight }: VirtualTableContextProps<Record<string, unknown>>) => React.JSX.Element;
+export declare const VirtualTableHeaderRow: ({ columns, sortIndex, onColumnSort, onFilterUpdate, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight, draggingColumnId, headerHeight }: VirtualTableContextProps<Record<string, unknown>>) => React.JSX.Element;

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

@@ -1,5 +1,7 @@
 import React from "react";
 import type { FilterFormFieldProps } from "./VirtualTableHeader";
+/** One sort key: the column, and which way it runs. */
+export type VirtualTableSortKey = [string, "asc" | "desc"];
 export type OnRowClickParams<T extends Record<string, unknown>> = {
     rowData: T;
     rowIndex: number;
@@ -30,7 +32,7 @@ export interface VirtualTableProps<T extends Record<string, unknown>> {
      * @param filterValues
      * @param sortBy
      */
-    checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>, sortBy?: [string, "asc" | "desc"]) => boolean;
+    checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>, sortBy?: VirtualTableSortKey[]) => boolean;
     /**
      * A callback function when scrolling the table to near the end
      */
@@ -77,14 +79,15 @@ export interface VirtualTableProps<T extends Record<string, unknown>> {
         scrollUpdateWasRequested: boolean;
     }) => void;
     /**
-     * Default sort applied to this collection
+     * Sort applied to this collection: the keys in order of significance, the
+     * second breaking ties on the first.
      */
-    sortBy?: [string, "asc" | "desc"];
+    sortBy?: VirtualTableSortKey[];
     /**
      * Callback used when sorting is updated
      * @param sortBy
      */
-    onSortByUpdate?: (sortBy?: [string, "asc" | "desc"]) => void;
+    onSortByUpdate?: (sortBy?: VirtualTableSortKey[]) => void;
     /**
      * If there is an error loading data you can pass it here, so it gets
      * displayed instead of the content

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

@@ -18,14 +18,17 @@ export type VirtualTableContextProps<T> = {
     headerHeight?: number;
     columns: VirtualTableColumn[];
     cellRenderer: React.ComponentType<CellRendererParams<T>>;
-    currentSort: "asc" | "desc" | undefined;
+    /** Each sorted column's direction and its rank in the sort, keyed by column. */
+    sortIndex: Map<string, {
+        direction: "asc" | "desc";
+        position: number;
+    }>;
     filter?: VirtualTableFilterValues<string>;
     onRowClick?: (props: OnRowClickParams<Record<string, unknown>>) => void;
-    onColumnSort: (key: string) => void;
+    onColumnSort: (key: string, additive?: boolean) => void;
     onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
     onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
     onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, unknown]) => void;
-    sortByProperty?: string;
     customView?: React.ReactNode;
     hoverRow: boolean;
     createFilterField?: (props: FilterFormFieldProps<unknown>) => React.ReactNode;

package/dist/index.es.js

@@ -5650,7 +5650,20 @@ function ToggleButtonGroup({ value, onValueChange, options, className }) {
 }
 //#endregion
 //#region src/components/VirtualTable/VirtualTableHeader.tsx
-var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRef, columnIndex, isResizingIndex, sort, onColumnSort, onFilterUpdate, filter, column, onClickResizeColumn, createFilterField, AdditionalHeaderWidget, isDragging, isDraggable }) {
+/**
+* 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);
@@ -5694,16 +5707,18 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 					})]
 				})
 			}),
-			/* @__PURE__ */ jsxs(Fragment, { children: [AdditionalHeaderWidget && /* @__PURE__ */ jsx(AdditionalHeaderWidget, { onHover: onHover || openFilter }), column.sortable && (sort || hovered || openFilter) && /* @__PURE__ */ jsx("div", {
-				className: "flex-shrink-0",
-				children: /* @__PURE__ */ jsx(Badge, {
+			/* @__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-white dark:bg-surface-900" : void 0,
-						onClick: () => {
-							onColumnSort(column.key);
+						title: sortActionTitle(sort, sortPosition),
+						"aria-label": sortActionTitle(sort, sortPosition),
+						onClick: (event) => {
+							onColumnSort(column.key, event.shiftKey);
 						},
 						children: [
 							!sort && /* @__PURE__ */ jsx(ArrowUpIcon$1, {
@@ -5720,7 +5735,11 @@ var VirtualTableHeader = React.memo(function VirtualTableHeader({ resizeHandleRe
 							})
 						]
 					})
-				})
+				}), sort && sortPosition !== void 0 && /* @__PURE__ */ jsx("span", {
+					className: "flex-shrink-0 -ml-0.5 mr-0.5 text-[10px] font-bold 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",
@@ -5825,7 +5844,7 @@ function FilterForm({ column, onFilterUpdate, filter, onHover, createFilterField
 }
 //#endregion
 //#region src/components/VirtualTable/VirtualTableHeaderRow.tsx
-var SortableColumnHeader = ({ column, columnIndex, columnRefs, isResizing, onFilterUpdate, filter, sortByProperty, currentSort, onColumnSort, onClickResizeColumn, createFilterField, isDragging, isDraggable }) => {
+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,
@@ -5862,7 +5881,8 @@ var SortableColumnHeader = ({ column, columnIndex, columnRefs, isResizing, onFil
 			isResizingIndex: isResizing,
 			onFilterUpdate,
 			filter,
-			sort: sortByProperty === column.key ? currentSort : void 0,
+			sort: sortIndex.get(column.key)?.direction,
+			sortPosition: sortCount > 1 ? sortIndex.get(column.key)?.position : void 0,
 			onColumnSort,
 			onClickResizeColumn,
 			column,
@@ -5873,7 +5893,7 @@ var SortableColumnHeader = ({ column, columnIndex, columnRefs, isResizing, onFil
 		})
 	});
 };
-var VirtualTableHeaderRow = ({ columns, currentSort, onColumnSort, onFilterUpdate, sortByProperty, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight = 54, draggingColumnId, headerHeight = 48 }) => {
+var VirtualTableHeaderRow = ({ columns, sortIndex, onColumnSort, onFilterUpdate, filter, onColumnResize, onColumnResizeEnd, createFilterField, AddColumnComponent, onColumnsOrderChange, data, cellRenderer: CellRenderer, rowHeight = 54, draggingColumnId, headerHeight = 48 }) => {
 	const columnRefs = useMemo(() => columns.map(() => createRef()), [columns.length]);
 	const [isResizing, setIsResizing] = useState(-1);
 	const adjustWidthColumn = useCallback((index, width, end) => {
@@ -5967,8 +5987,8 @@ var VirtualTableHeaderRow = ({ columns, currentSort, onColumnSort, onFilterUpdat
 				isResizing,
 				onFilterUpdate,
 				filter: filterForThisProperty,
-				sortByProperty,
-				currentSort,
+				sortIndex,
+				sortCount: sortIndex.size,
 				onColumnSort,
 				onClickResizeColumn,
 				createFilterField,
@@ -6090,8 +6110,16 @@ var innerElementType = forwardRef(({ children, ...rest }, ref) => {
 * memoized component under a type that describes it.
 */
 var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, onEndReached, endOffset = 600, rowHeight = 54, headerHeight = 48, columns: columnsProp, onRowClick, onColumnResize, onColumnResizeEnd, filter: filterInput, checkFilterCombination, onFilterUpdate, sortBy, error, emptyComponent, onSortByUpdate, onScroll: onScrollProp, loading, cellRenderer, hoverRow, createFilterField, rowClassName, style, className, endAdornment, AddColumnComponent, initialScroll = 0, onColumnsOrderChange, extraData }) {
-	const sortByProperty = sortBy ? sortBy[0] : void 0;
-	const currentSort = sortBy ? sortBy[1] : void 0;
+	const sortIndex = useMemo(() => {
+		const index = /* @__PURE__ */ new Map();
+		(sortBy ?? []).forEach(([key, direction], position) => {
+			if (!index.has(key)) index.set(key, {
+				direction,
+				position
+			});
+		});
+		return index;
+	}, [sortBy]);
 	const [columns, setColumns] = useState(columnsProp);
 	const tableRef = useRef(null);
 	const endReachCallbackThreshold = useRef(0);
@@ -6151,12 +6179,27 @@ var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, o
 		endReachCallbackThreshold.current = 0;
 		if (tableRef.current) tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
 	}, []);
-	const onColumnSort = useCallback((key) => {
-		const isDesc = sortByProperty === key && currentSort === "desc";
-		const newSort = sortByProperty === key && currentSort === "asc" ? "desc" : isDesc ? void 0 : "asc";
-		const newSortProperty = isDesc ? void 0 : key;
+	/**
+	* Click a header to sort by that column: ascending, descending, then
+	* off. Shift-click to keep the sort you already have and add this
+	* column under it — the same idiom spreadsheets use, and the only way
+	* to build "by role, newest first" out of two clicks.
+	*
+	* Shift cycles the column it lands on through the same three states, so
+	* a key added by mistake is removed by shift-clicking it twice more,
+	* without disturbing the keys around it.
+	*/
+	const onColumnSort = useCallback((key, additive = false) => {
+		const current = sortIndex.get(key);
+		const next = current === void 0 ? "asc" : current.direction === "asc" ? "desc" : void 0;
+		const existing = sortBy ?? [];
+		let newSortBy;
+		if (!additive) newSortBy = next ? [[key, next]] : void 0;
+		else if (next === void 0) newSortBy = existing.filter(([existingKey]) => existingKey !== key);
+		else if (current === void 0) newSortBy = [...existing, [key, next]];
+		else newSortBy = existing.map((entry) => entry[0] === key ? [key, next] : entry);
+		if (newSortBy?.length === 0) newSortBy = void 0;
 		const filter = filterRef.current;
-		const newSortBy = newSort && newSortProperty ? [newSortProperty, newSort] : void 0;
 		if (filter) {
 			if (checkFilterCombination && !checkFilterCombination(filter, newSortBy)) {
 				if (onFilterUpdate) onFilterUpdate(void 0);
@@ -6167,12 +6210,12 @@ var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, o
 		scrollToTop();
 	}, [
 		checkFilterCombination,
-		currentSort,
 		onFilterUpdate,
 		onResetPagination,
 		onSortByUpdate,
 		scrollToTop,
-		sortByProperty
+		sortBy,
+		sortIndex
 	]);
 	const maxScroll = Math.max((data?.length ?? 0) * rowHeight - bounds.height, 0);
 	const onEndReachedInternal = useCallback((scrollOffset) => {
@@ -6195,13 +6238,12 @@ var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, o
 		let newFilterValue = filter ? { ...filter } : {};
 		if (!filterForProperty) delete newFilterValue[column.key];
 		else newFilterValue[column.key] = filterForProperty;
-		if (!(!checkFilterCombination || checkFilterCombination(newFilterValue, sortByProperty && currentSort ? [sortByProperty, currentSort] : void 0))) newFilterValue = filterForProperty ? { [column.key]: filterForProperty } : {};
+		if (!(!checkFilterCombination || checkFilterCombination(newFilterValue, sortBy))) newFilterValue = filterForProperty ? { [column.key]: filterForProperty } : {};
 		if (onFilterUpdate) onFilterUpdate(newFilterValue);
 	}, [
 		checkFilterCombination,
-		currentSort,
 		onFilterUpdate,
-		sortByProperty
+		sortBy
 	]);
 	const empty = !loading && (data?.length ?? 0) === 0;
 	const customView = error && (data?.length ?? 0) === 0 ? /* @__PURE__ */ jsxs(CenteredView, {
@@ -6224,7 +6266,6 @@ var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, o
 		headerHeight,
 		cellRenderer,
 		columns,
-		currentSort,
 		onRowClick,
 		customView,
 		onColumnResize: onColumnResizeInternal,
@@ -6232,7 +6273,7 @@ var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, o
 		filter: filterRef.current,
 		onColumnSort,
 		onFilterUpdate: onFilterUpdateInternal,
-		sortByProperty,
+		sortIndex,
 		hoverRow: hoverRow ?? false,
 		createFilterField,
 		rowClassName,
@@ -6249,7 +6290,6 @@ var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, o
 		rowHeight,
 		cellRenderer,
 		columns,
-		currentSort,
 		onRowClick,
 		customView,
 		onColumnResizeInternal,
@@ -6257,7 +6297,7 @@ var VirtualTable = React.memo(function VirtualTable({ data, onResetPagination, o
 		filterInput,
 		onColumnSort,
 		onFilterUpdateInternal,
-		sortByProperty,
+		sortIndex,
 		hoverRow,
 		createFilterField,
 		rowClassName,