@rebasepro/app 0.14.0 → 0.14.1-canary.g7e666eb

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/app",
   "type": "module",
-  "version": "0.14.0",
+  "version": "0.14.1-canary.g7e666eb",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -52,12 +52,12 @@
     "magic-string": "^0.30.0",
     "notistack": "^3.0.2",
     "react-i18next": "^17.0.11",
-    "@rebasepro/admin-types": "0.14.0",
-    "@rebasepro/common": "0.14.0",
-    "@rebasepro/forms": "0.14.0",
-    "@rebasepro/types": "0.14.0",
-    "@rebasepro/ui": "0.14.0",
-    "@rebasepro/utils": "0.14.0"
+    "@rebasepro/admin-types": "0.14.1-canary.g7e666eb",
+    "@rebasepro/forms": "0.14.1-canary.g7e666eb",
+    "@rebasepro/common": "0.14.1-canary.g7e666eb",
+    "@rebasepro/ui": "0.14.1-canary.g7e666eb",
+    "@rebasepro/types": "0.14.1-canary.g7e666eb",
+    "@rebasepro/utils": "0.14.1-canary.g7e666eb"
   },
   "peerDependencies": {
     "react": ">=19.2.7",
@@ -138,7 +138,7 @@
     "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json && pnpm exec esbuild src/vitePlugin.ts --platform=node --format=esm --outfile=dist/vitePlugin.js && node ../../scripts/assert-build-output.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
-    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
+    "clean": "rm -rf dist && find ./src \\( -name '*.js' -o -name '*.d.ts' \\) -type f | xargs rm -f",
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   }
 }

package/src/components/Debug/UIReferenceView.tsx

@@ -602,7 +602,14 @@ selected: true }, { name: "Tags" }].map(c => (
                         {(["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2", "body1", "body2", "caption", "label", "button"] as const).map(v => (
                             <div key={v} className={cls("flex items-baseline gap-4 border-b pb-3 last:border-0", defaultBorderMixin)}>
                                 <span className="w-24 shrink-0 text-xs text-surface-400 font-mono">{v}</span>
-                                <Typography variant={v}>The quick brown fox jumps over the lazy dog</Typography>
+                                {/* `component="p"` keeps the variant's styling but not its
+                                    element. Rendering the specimen with its native tag put a
+                                    real <h1> — "The quick brown fox jumps over the lazy dog" —
+                                    plus h2-h6 into the document outline of every page that
+                                    embeds this view, including the public rebase.pro/ui gallery,
+                                    where it competed with the page's actual heading. The class
+                                    carries the type, so this renders identically. */}
+                                <Typography variant={v} component="p">The quick brown fox jumps over the lazy dog</Typography>
                             </div>
                         ))}
                     </div>

package/src/components/Debug/UIStyleGuide.tsx

@@ -34,7 +34,10 @@ export const UIStyleGuide = () => {
                     {typographyVariants.map(variant => (
                         <div key={variant} className="flex items-center gap-4 border-b border-surface-100 dark:border-surface-950 pb-4 last:border-0">
                             <span className="w-24 text-[10px] uppercase tracking-wider text-text-disabled font-mono">{variant}</span>
-                            <Typography variant={variant}>
+                            {/* component="p" keeps the variant's styling without emitting a
+                                real h1-h6 into the host page's document outline. See the
+                                matching note in UIReferenceView. */}
+                            <Typography variant={variant} component="p">
                                 The quick brown fox jumps over the lazy dog ({variant})
                             </Typography>
                         </div>

package/src/components/Debug/crm-dashboard/CrmDashboardDemo.tsx

@@ -944,7 +944,11 @@ export function CrmDashboardDemo() {
                 <div className="flex flex-col sm:flex-row sm:items-end justify-between mb-6 gap-4">
                     <div>
                         <Typography variant="h4" className="tracking-tight">
-                            {getGreeting()} 👋
+                            {/* No emoji: this demo renders inside the public rebase.pro/ui
+                                gallery, and emoji render differently on every platform,
+                                cannot be recoloured, and read as a placeholder for a design
+                                decision nobody made. The greeting carries itself. */}
+                            {getGreeting()}
                         </Typography>
                         <Typography variant="body2" color="secondary" className="mt-0.5">
                             {getFormattedDate()} — here&apos;s your crm overview.

package/src/components/common/useDataTableController.tsx

@@ -7,7 +7,8 @@ import { useDataOrder } from "../../hooks/data/useDataOrder";
 import { populateFetchCache } from "../../hooks/data/useFetch";
 import { toFindParams } from "../../hooks/data/collectionQuery";
 import { getRelationIncludeParams } from "../../util/previews";
-import { Entity, EntityReference, EntityRelation, FilterValues, User, WhereFilterOp, FindResponse } from "@rebasepro/types";
+import { Entity, EntityReference, EntityRelation, FilterValues, OrderBySpec, OrderByTuple, User, WhereFilterOp, FindResponse } from "@rebasepro/types";
+import { normalizeOrderBy, serializeOrderBy } from "@rebasepro/common";
 import { EntityTableController, RebaseContext, SelectedCellProps, AdminCollection } from "@rebasepro/admin-types";
 import { ScrollRestorationController } from "./useScrollRestoration";
 
@@ -96,17 +97,21 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     });
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
-        sortBy?: [string, "asc" | "desc"]) => {
+        sortBy?: OrderByTuple[]) => {
         // PostgREST/SQL can handle arbitrary filter/sort combinations natively.
         return true;
     }, []);
 
+    // The collection's default, in the list form the controller works in.
+    // `collection.sort` accepts either spelling so a one-key default stays the
+    // one-liner it always was.
     const sortInternal = useMemo(() => {
-        if (sort && fixedFilter && !checkFilterCombination(fixedFilter, sort)) {
+        const keys = normalizeOrderBy(sort as OrderBySpec | undefined);
+        if (keys && fixedFilter && !checkFilterCombination(fixedFilter, keys)) {
             console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
             return undefined;
         }
-        return sort;
+        return keys;
     }, [sort, fixedFilter]);
 
     const {
@@ -115,7 +120,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     } = parseFilterAndSort(location.search);
 
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string> | (string & {})> | undefined>(fixedFilter ?? (updateUrl ? filterUrl : undefined) ?? defaultFilter ?? undefined);
-    const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string> | (string & {}), "asc" | "desc"] | undefined>((updateUrl ? sortUrl : undefined) ?? sortInternal);
+    const [sortBy, setSortBy] = React.useState<OrderByTuple<Extract<keyof M, string> | (string & {})>[] | undefined>((updateUrl ? sortUrl : undefined) ?? sortInternal);
 
     // Sync filter/sort state from URL on browser navigation (back/forward).
     // Skip initial mount since useState initializers already handle URL params + collection defaults.
@@ -136,7 +141,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         if (urlSortBy && fixedFilter && !checkFilterCombination(fixedFilter, urlSortBy)) {
             console.warn("URL sort is not compatible with the force filter.");
         } else {
-            setSortBy(urlSortBy as [Extract<keyof M, string> | (string & {}), "asc" | "desc"] | undefined);
+            setSortBy(urlSortBy as OrderByTuple<Extract<keyof M, string> | (string & {})>[] | undefined);
         }
 
         // Sync search string from URL
@@ -163,8 +168,10 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
     const [itemCount, setItemCount] = React.useState<number | undefined>(paginationEnabled ? initialItemCount : undefined);
 
-    const sortByProperty = sortBy ? sortBy[0] : undefined;
-    const currentSort = sortBy ? sortBy[1] : undefined;
+    // The whole sort, as one string, so the effect below re-runs when any key
+    // changes — a `sortBy` array is a new reference on every render and would
+    // re-subscribe on each one if used as a dependency directly.
+    const sortKey = sortBy ? serializeOrderBy(sortBy) : undefined;
 
     const context: RebaseContext<USER> = useRebaseContext();
 
@@ -253,7 +260,9 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
         // filterValues is already FilterValues — pass directly to the accessor
         const whereParams = filterValues && Object.keys(filterValues).length > 0 ? filterValues : undefined;
-        const orderByParams: [string, "asc" | "desc"] | undefined = sortBy ? [String(sortBy[0]), sortBy[1]] : undefined;
+        const orderByParams = sortBy && sortBy.length > 0
+            ? sortBy.map(([field, direction]) => [String(field), direction] as OrderByTuple)
+            : undefined;
 
         let unsubscribe: (() => void) | undefined;
 
@@ -277,7 +286,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         }
 
         return unsubscribe;
-    }, [dataClient, path, itemCount, currentSort, sortByProperty, filterValues, searchString]);
+    }, [dataClient, path, itemCount, sortKey, filterValues, searchString]);
 
     const orderedData = useDataOrder({
         data: rawData,
@@ -336,7 +345,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
 
 function useUpdateUrl<M extends Record<string, any> = any>(
     filterValues: FilterValues<Extract<keyof M, string>> | undefined,
-    sortBy: [Extract<keyof M, string>, "asc" | "desc"] | undefined,
+    sortBy: OrderByTuple<Extract<keyof M, string>>[] | undefined,
     searchString: string | undefined,
     updateUrl: boolean | undefined
 ) {
@@ -371,11 +380,15 @@ function useUpdateUrl<M extends Record<string, any> = any>(
     }, [filterValues, sortBy, searchString, updateUrl]);
 }
 
-function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [string, "asc" | "desc"] | undefined) {
+function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: OrderByTuple[] | undefined) {
     const entries: Record<string, string> = {};
-    if (sortBy) {
-        entries["__sort"] = encodeURIComponent(sortBy[0]);
-        entries["__sort_order"] = encodeURIComponent(sortBy[1]);
+    if (sortBy && sortBy.length > 0) {
+        // Comma-separated, positionally paired. A single key encodes exactly as
+        // it did before — `__sort=name&__sort_order=asc` — so links already out
+        // in the world keep working, and a reload of a two-key sort no longer
+        // silently comes back sorted by the first key alone.
+        entries["__sort"] = sortBy.map(([field]) => encodeURIComponent(field)).join(",");
+        entries["__sort_order"] = sortBy.map(([, direction]) => direction).join(",");
     }
     if (filterValues) {
         Object.entries(filterValues).forEach(([key, value]) => {
@@ -426,14 +439,23 @@ function encodeFilterAndSort(filterValues?: FilterValues<string>, sortBy?: [stri
 
 function parseFilterAndSort<M>(search: string): {
     filterValues: FilterValues<string> | undefined,
-    sortBy?: [Extract<keyof M, string>, "asc" | "desc"]
+    sortBy?: OrderByTuple<Extract<keyof M, string>>[]
 } {
     const entries = new URLSearchParams(search);
     const filterValues: FilterValues<string> = {};
-    let sortBy: [string, "asc" | "desc"] | undefined = undefined;
+    let sortBy: OrderByTuple[] | undefined = undefined;
     entries.forEach((value, key) => {
         if (key === "__sort") {
-            sortBy = [decodeURIComponent(value), entries.get("__sort_order") as "asc" | "desc"];
+            const directions = (entries.get("__sort_order") ?? "").split(",");
+            const keys = value
+                .split(",")
+                .map((field) => decodeURIComponent(field).trim())
+                .filter(Boolean)
+                // A direction missing from the URL — a hand-written link, or the
+                // one-key form of an older bookmark — is ascending, the same
+                // reading `?orderBy=name` gets everywhere else.
+                .map((field, index): OrderByTuple => [field, directions[index] === "desc" ? "desc" : "asc"]);
+            sortBy = keys.length > 0 ? keys : undefined;
         } else if (key.endsWith("_op")) {
             const field = key.replace("_op", "");
             const filterOp = decodeURIComponent(value) as WhereFilterOp;

package/src/hooks/data/collectionQuery.ts

@@ -1,4 +1,4 @@
-import type { FindParams, FilterValues, LogicalCondition } from "@rebasepro/types";
+import type { FindParams, FilterValues, LogicalCondition, OrderBySpec } from "@rebasepro/types";
 
 /**
  * The one place a collection read's parameters are assembled.
@@ -24,12 +24,12 @@ export interface CollectionQueryInput<M extends Record<string, unknown>> {
     logical?: LogicalCondition;
     /**
      * Loosened from `FindParams["orderBy"]` on purpose: callers hold the sort
-     * as a plain `[string, direction]` read off user config or a URL, where the
-     * column is not statically known. Narrowing it here would push a cast onto
-     * every call site, which is the kind of friction that sends people back to
-     * hand-building the object this exists to replace.
+     * as plain `[string, direction]` pairs read off user config or a URL, where
+     * the columns are not statically known. Narrowing it here would push a cast
+     * onto every call site, which is the kind of friction that sends people back
+     * to hand-building the object this exists to replace.
      */
-    orderBy?: [string, "asc" | "desc"];
+    orderBy?: OrderBySpec;
     limit?: number;
     offset?: number;
     page?: number;