@rebasepro/ui 0.8.0 → 0.9.1-canary.09aaf62

package/dist/src/index.css

@@ -54,6 +54,16 @@
     --color-surface-accent-950: #0f172a;
 }
 
+/* Native UI (scrollbars, form controls) must follow the active theme,
+   otherwise Chrome renders light scrollbars in dark mode */
+html {
+    color-scheme: light;
+}
+
+html.dark {
+    color-scheme: dark;
+}
+
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/ui",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.9.1-canary.09aaf62",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -13,12 +13,12 @@
     "url": "https://github.com/rebasepro/rebase.git",
     "directory": "packages/ui"
   },
-  "main": "./dist/index.umd.js",
+  "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "engines": {
-    "node": ">=14"
+    "node": ">=20"
   },
   "keywords": [
     "rebase",
@@ -35,8 +35,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "development": "./dist/index.es.js",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "import": "./dist/index.es.js"
     },
     "./package.json": "./package.json",
     "./index.css": "./dist/index.css",
@@ -112,7 +111,7 @@
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/index.css 2>/dev/null; tsc --emitDeclarationOnly -p tsconfig.prod.json",
+    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/index.css 2>/dev/null; tsc --emitDeclarationOnly -p tsconfig.prod.json && 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",

package/src/components/CircularProgress.tsx

@@ -24,13 +24,13 @@ export function CircularProgress({
 
     let borderClasses = "";
     if (size === "smallest") {
-        borderClasses = "border-[3px]";
+        borderClasses = "border-2";
     } else if (size === "small") {
-        borderClasses = "border-[4px]";
+        borderClasses = "border-2";
     } else if (size === "medium") {
-        borderClasses = "border-4";
+        borderClasses = "border-[3px]";
     } else {
-        borderClasses = "border-[6px]";
+        borderClasses = "border-4";
     }
 
     return (
@@ -38,8 +38,9 @@ export function CircularProgress({
             className={cls(
                 sizeClasses,
                 borderClasses,
-                "inline-block animate-spin rounded-full border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite]",
-                "text-primary dark:text-primary",
+                "inline-block shrink-0 rounded-full border-solid align-[-0.125em]",
+                "animate-[spin_0.7s_linear_infinite] motion-reduce:animate-[spin_1.5s_linear_infinite]",
+                "border-surface-200 dark:border-surface-700 border-t-primary dark:border-t-primary",
                 className)}
             role="status">
               <span

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -288,7 +288,13 @@ export type WhereFilterOp =
     | "array-contains"
     | "in"
     | "not-in"
-    | "array-contains-any";
+    | "array-contains-any"
+    | "like"
+    | "ilike"
+    | "not-like"
+    | "not-ilike"
+    | "is-null"
+    | "is-not-null";
 
 export type FilterValues<Key extends string> =
     Partial<Record<Key, [WhereFilterOp, unknown] | [WhereFilterOp, unknown][]>>;

package/src/components/VirtualTable/selection/SelectionStore.ts

@@ -2,7 +2,7 @@ import { useSyncExternalStore, useCallback, useRef } from "react";
 
 export interface SelectedCell {
     columnKey: string;
-    rowId: string | number;
+    id: string | number;
     cellRect?: DOMRect;
     width?: number;
     height?: number;
@@ -12,7 +12,7 @@ export function createVirtualTableSelectionStore<T extends SelectedCell = Select
     let selectedCell: T | undefined = undefined;
     const listeners = new Set<() => void>();
 
-    function getSnapshot(): T | undefined {
+    function getEntity(): T | undefined {
         return selectedCell;
     }
 
@@ -27,7 +27,7 @@ export function createVirtualTableSelectionStore<T extends SelectedCell = Select
     }
 
     return {
-        getSnapshot,
+        getEntity,
         subscribe,
         select
     };
@@ -38,17 +38,17 @@ export type VirtualTableSelectionStore<T extends SelectedCell = SelectedCell> =
 export function useVirtualTableCellSelected<T extends SelectedCell = SelectedCell>(
     store: VirtualTableSelectionStore<T>,
     columnKey: string,
-    rowId: string | number
+    id: string | number
 ): boolean {
-    const selectorRef = useRef({ columnKey, rowId });
-    selectorRef.current = { columnKey, rowId };
+    const selectorRef = useRef({ columnKey, id });
+    selectorRef.current = { columnKey, id };
 
-    const getSnapshot = useCallback(() => {
-        const cell = store.getSnapshot();
+    const getEntity = useCallback(() => {
+        const cell = store.getEntity();
         if (!cell) return false;
         const s = selectorRef.current;
-        return cell.columnKey === s.columnKey && cell.rowId === s.rowId;
+        return cell.columnKey === s.columnKey && cell.id === s.id;
     }, [store]);
 
-    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+    return useSyncExternalStore(store.subscribe, getEntity, getEntity);
 }

package/src/index.css

@@ -54,6 +54,16 @@
     --color-surface-accent-950: #0f172a;
 }
 
+/* Native UI (scrollbars, form controls) must follow the active theme,
+   otherwise Chrome renders light scrollbars in dark mode */
+html {
+    color-scheme: light;
+}
+
+html.dark {
+    color-scheme: dark;
+}
+
 /* Chrome, Safari and Opera */
 .no-scrollbar::-webkit-scrollbar {
     display: none;