@rebasepro/core 0.0.1-canary.eae7889 → 0.1.0

package/dist/vitePlugin.d.ts

@@ -7,10 +7,37 @@ export interface RebaseCollectionsPluginOptions {
 }
 /**
  * A Vite plugin that dynamically loads and automatically wires Rebase collections.
- * It provides a virtual module "virtual:rebase-collections" that statically exports the resolved collections array.
+ *
+ * It provides two capabilities:
+ * 1. A **virtual module** `"virtual:rebase-collections"` that statically exports
+ *    the resolved collections array.
+ * 2. A **transform hook** that converts string-based component references
+ *    (e.g. `Field: "../../components/MyField"`) into `LazyComponentRef` objects
+ *    (`{ __rebaseLazy: true, load: () => import(...) }`), enabling code-splitting
+ *    and preventing the backend from loading React-dependent modules.
  */
 export declare function rebaseCollectionsPlugin(options: RebaseCollectionsPluginOptions): {
     name: string;
+    configResolved(config: {
+        root: string;
+    }): void;
     resolveId(id: string): string | null;
     load(id: string): string | null;
+    /**
+     * Transform collection files to convert string component references
+     * into lazy-loading `LazyComponentRef` objects.
+     *
+     * Example transform:
+     * ```
+     * // Input
+     * Field: "../../frontend/src/components/MyField"
+     *
+     * // Output
+     * Field: { __rebaseLazy: true, load: () => import("../../frontend/src/components/MyField") }
+     * ```
+     */
+    transform(code: string, id: string): {
+        code: string;
+        map: null;
+    } | null;
 };

package/dist/vitePlugin.js

@@ -1,8 +1,22 @@
+import path from "path";
+const LAZY_COMPONENT_KEYS = ["Field", "Preview", "Builder"];
+function buildTransformRegex() {
+  const keys = LAZY_COMPONENT_KEYS.join("|");
+  return new RegExp(
+    `((?:${keys})\\s*:\\s*)(['"])(\\.\\.?\\/[^'"]+)\\2`,
+    "g"
+  );
+}
 function rebaseCollectionsPlugin(options) {
   const virtualModuleId = "virtual:rebase-collections";
   const resolvedVirtualModuleId = "\0" + virtualModuleId;
+  let resolvedCollectionsDir;
+  const transformRegex = buildTransformRegex();
   return {
     name: "rebase-collections-plugin",
+    configResolved(config) {
+      resolvedCollectionsDir = path.isAbsolute(options.collectionsDir) ? options.collectionsDir : path.resolve(config.root, options.collectionsDir);
+    },
     resolveId(id) {
       if (id === virtualModuleId) {
         return resolvedVirtualModuleId;
@@ -21,6 +35,34 @@ function rebaseCollectionsPlugin(options) {
                 `;
       }
       return null;
+    },
+    /**
+     * Transform collection files to convert string component references
+     * into lazy-loading `LazyComponentRef` objects.
+     *
+     * Example transform:
+     * ```
+     * // Input
+     * Field: "../../frontend/src/components/MyField"
+     *
+     * // Output
+     * Field: { __rebaseLazy: true, load: () => import("../../frontend/src/components/MyField") }
+     * ```
+     */
+    transform(code, id) {
+      if (!resolvedCollectionsDir) return null;
+      if (!id.startsWith(resolvedCollectionsDir)) return null;
+      if (!/\.tsx?$/.test(id)) return null;
+      transformRegex.lastIndex = 0;
+      if (!transformRegex.test(code)) return null;
+      transformRegex.lastIndex = 0;
+      const transformed = code.replace(
+        transformRegex,
+        (_match, prefix, quote, importPath) => {
+          return `${prefix}{ __rebaseLazy: true, load: () => import(${quote}${importPath}${quote}) }`;
+        }
+      );
+      return { code: transformed, map: null };
     }
   };
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/core",
   "type": "module",
-  "version": "0.0.1-canary.eae7889",
+  "version": "0.1.0",
   "description": "Rebase core — framework-agnostic runtime for data-driven admin panels",
   "funding": {
     "url": "https://github.com/sponsors/rebaseco"
@@ -47,16 +47,16 @@
   },
   "dependencies": {
     "compressorjs": "^1.2.1",
-    "fast-equals": "5.3.0",
+    "fast-equals": "6.0.0",
     "fuse.js": "^7.1.0",
     "i18next": "^23.16.4",
     "notistack": "^3.0.2",
     "react-i18next": "^14.1.3",
-    "@rebasepro/formex": "0.0.1-canary.eae7889",
-    "@rebasepro/types": "0.0.1-canary.eae7889",
-    "@rebasepro/common": "0.0.1-canary.eae7889",
-    "@rebasepro/ui": "0.0.1-canary.eae7889",
-    "@rebasepro/utils": "0.0.1-canary.eae7889"
+    "@rebasepro/utils": "0.1.0",
+    "@rebasepro/common": "0.1.0",
+    "@rebasepro/formex": "0.1.0",
+    "@rebasepro/types": "0.1.0",
+    "@rebasepro/ui": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
@@ -82,7 +82,6 @@
     "npm-run-all": "^4.1.5",
     "react-router-dom": "^7.0.0",
     "ts-jest": "^29.4.5",
-    "ts-node": "^10.9.2",
     "tsd": "^0.31.2",
     "typescript": "^5.9.3",
     "vite": "^7.2.4"

package/src/components/BootstrapAdminBanner.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { useInternalUserManagementController } from "../hooks/useInternalUserManagementController";
+import { useAuthController } from "../hooks/useAuthController";
+import { useTranslation } from "../hooks/useTranslation";
+import { useSnackbarController } from "../hooks/useSnackbarController";
+import { Button, CircularProgress, Typography } from "@rebasepro/ui";
+
+export interface BootstrapAdminBannerProps {
+    className?: string;
+}
+
+export function BootstrapAdminBanner({
+    className
+}: BootstrapAdminBannerProps) {
+    const userManagement = useInternalUserManagementController();
+    const { user: loggedInUser } = useAuthController();
+    const { t } = useTranslation();
+    const snackbarController = useSnackbarController();
+    const [bootstrapping, setBootstrapping] = useState(false);
+
+    // If we're not running locally, don't render anything
+    if (typeof window !== "undefined" && window.location.hostname !== "localhost" && window.location.hostname !== "127.0.0.1") {
+        return null;
+    }
+
+    if (!userManagement || !loggedInUser) {
+        return null;
+    }
+
+    const { users, loading: delegateLoading, bootstrapAdmin, usersError } = userManagement;
+    const hasAdmin = users.some(u => u.roles?.includes("admin"));
+
+    if (delegateLoading || hasAdmin || usersError || !bootstrapAdmin) {
+        return null;
+    }
+
+    const handleBootstrap = async () => {
+        if (!bootstrapAdmin) return;
+        setBootstrapping(true);
+        try {
+            await bootstrapAdmin();
+            snackbarController.open({ type: "success", message: t("bootstrap_admin_success") || "Admin successfully created" });
+            window.location.reload();
+        } catch (error: unknown) {
+            snackbarController.open({ type: "error", message: error instanceof Error ? error.message : t("failed_to_bootstrap_admin") || "Failed to bootstrap admin" });
+        } finally {
+            setBootstrapping(false);
+        }
+    };
+
+    return (
+        <div className={`bg-yellow-100 dark:bg-yellow-900 border border-yellow-400 dark:border-yellow-700 rounded p-4 flex items-center justify-between ${className || ""}`}>
+            <div>
+                <Typography variant="label" className="text-yellow-800 dark:text-yellow-200">
+                    {t("no_users_or_roles_defined") || "No admins found. Click to add your user as admin."}
+                </Typography>
+            </div>
+            <Button
+                onClick={handleBootstrap}
+                disabled={bootstrapping}
+            >
+                {bootstrapping ? <CircularProgress size="small"/> : (t("add_logged_user_as_admin") || "Add logged user as admin")}
+            </Button>
+        </div>
+    );
+}

package/src/components/LoginView/LoginView.tsx

@@ -1,6 +1,23 @@
-
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 
+/** Google Identity Services SDK — injected by the GIS <script> tag. */
+declare global {
+    interface Window {
+        google?: {
+            accounts: {
+                oauth2: {
+                    initCodeClient(config: {
+                        client_id: string;
+                        scope: string;
+                        ux_mode: "popup" | "redirect";
+                        callback: (response: { code?: string; error?: string }) => void;
+                    }): { requestCode(): void };
+                };
+            };
+        };
+    }
+}
+
 import { Button, cls, IconButton, LoadingButton, Menu, MenuItem, TextField, Typography, iconSize } from "@rebasepro/ui";
 import { ArrowLeftIcon, MailIcon, MoonIcon, SunIcon, SunMoonIcon } from "lucide-react";
 import { AuthControllerExtended, User } from "@rebasepro/types";
@@ -119,7 +136,9 @@ export function LoginView({
 
     // Resolve capabilities — explicit props override authController.capabilities
     const caps = authController.capabilities ?? {};
-    const isBootstrapMode = needsSetup ?? (authController as any).needsSetup ?? false;
+    const isBootstrapMode = needsSetup
+        ?? ("needsSetup" in authController && !!(authController as { needsSetup?: boolean }).needsSetup)
+        ?? false;
     const canRegister = registrationEnabled ?? caps.registration ?? false;
     const hasGoogleLogin = googleEnabled ?? caps.googleLogin ?? false;
     const hasPasswordReset = caps.passwordReset ?? !!authController.forgotPassword;
@@ -171,7 +190,7 @@ export function LoginView({
     return (
         <div
             className={cls(
-                "relative flex items-center justify-center h-screen w-screen p-4 transition-opacity duration-500 bg-white dark:bg-surface-950",
+                "relative flex items-center justify-center h-screen w-screen p-4 transition-opacity duration-500 bg-white dark:bg-surface-900",
                 fadeIn ? "opacity-100" : "opacity-0"
             )}>
 
@@ -323,6 +342,19 @@ function LoginButton({
     );
 }
 
+const GoogleIcon = () => (
+    <svg viewBox="0 0 24 24" width="20" height="20">
+        <path fill="#4285F4"
+            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+        <path fill="#34A853"
+            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+        <path fill="#FBBC05"
+            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+        <path fill="#EA4335"
+            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+    </svg>
+);
+
 function GoogleLoginButton({
     disabled,
     googleClientId,
@@ -332,54 +364,52 @@ function GoogleLoginButton({
     googleClientId: string,
     authController: AuthControllerExtended
 }) {
-    const handleGoogleLogin = async () => {
-        if (!authController.googleLogin) return;
+    const codeClientRef = useRef<{ requestCode(): void } | null>(null);
 
-        try {
-            const google = (window as unknown as { google?: { accounts: { id: { initialize: (config: { client_id: string; callback: (response: { credential: string }) => void }) => void; prompt: () => void } } } }).google;
-            if (!google) {
-                console.error("Google Sign-In not loaded");
-                return;
-            }
+    useEffect(() => {
+        if (!authController.googleLogin) return;
 
-            google.accounts.id.initialize({
-                client_id: googleClientId,
-                callback: async (response: { credential: string }) => {
-                    try {
-                        await authController.googleLogin!(response.credential);
-                    } catch (err: unknown) {
-                        console.error("Google login error:", err);
-                    }
+        const google = window.google;
+        if (!google || codeClientRef.current) return;
+
+        codeClientRef.current = google.accounts.oauth2.initCodeClient({
+            client_id: googleClientId,
+            scope: "openid email profile",
+            ux_mode: "popup",
+            callback: async (response: { code?: string; error?: string }) => {
+                if (response.error || !response.code) {
+                    console.error("Google login error:", response.error);
+                    return;
                 }
-            });
+                try {
+                    // Send the authorization code to the backend.
+                    // redirectUri "postmessage" is required when using popup ux_mode.
+                    await authController.googleLogin!({
+                        code: response.code,
+                        redirectUri: "postmessage"
+                    });
+                } catch (err: unknown) {
+                    console.error("Google login error:", err);
+                }
+            }
+        });
+    }, [googleClientId, authController]);
 
-            google.accounts.id.prompt();
-        } catch (err: unknown) {
-            console.error("Google login error:", err);
+    const handleClick = () => {
+        if (!codeClientRef.current) {
+            console.error("Google Sign-In not loaded");
+            return;
         }
+        codeClientRef.current.requestCode();
     };
 
     return (
-        <Button
+        <LoginButton
             disabled={disabled}
-            className="w-full"
-            variant="outlined"
-            size="large"
-            onClick={handleGoogleLogin}>
-            <div className="flex items-center justify-center w-full gap-3 py-1">
-                <svg viewBox="0 0 24 24" width="20" height="20">
-                    <path fill="#4285F4"
-                        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-                    <path fill="#34A853"
-                        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-                    <path fill="#FBBC05"
-                        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-                    <path fill="#EA4335"
-                        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-                </svg>
-                <Typography variant="button">Continue with Google</Typography>
-            </div>
-        </Button>
+            text="Sign in with Google"
+            icon={<GoogleIcon/>}
+            onClick={handleClick}
+        />
     );
 }
 
@@ -544,6 +574,7 @@ function LoginForm({
             <LoadingButton
                 type="submit"
                 variant="filled"
+                color="primary"
                 className="w-full mt-1"
                 size="large"
                 loading={authController.authLoading}

package/src/components/UserSelectPopover.tsx

@@ -1,6 +1,6 @@
 
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { cls, defaultBorderMixin, Popover, Typography, CircularProgress, IconButton , iconSize } from "@rebasepro/ui";
+import { cls, defaultBorderMixin, Popover, Typography, CircularProgress, IconButton , iconSize, SearchBar } from "@rebasepro/ui";
 import { CircleUserIcon, SearchIcon, XIcon } from "lucide-react";
 import { User } from "@rebasepro/types";
 
@@ -228,40 +228,14 @@ export function UserSelectPopover({
                     )}
                 </div>
 
-                {/* SearchIcon input */}
+                {/* Search input */}
                 <div className={cls("px-2 py-1.5 border-b shrink-0", defaultBorderMixin)}>
-                    <div className="relative">
-                        <SearchIcon
-                            size={"smallest"}
-                            className="absolute left-2 top-1/2 -translate-y-1/2 text-text-disabled dark:text-text-disabled-dark pointer-events-none"
-                        />
-                        <input
-                            ref={inputRef}
-                            type="text"
-                            value={searchText}
-                            onChange={(e) => setSearchText(e.target.value)}
-                            placeholder="SearchIcon by name, email, or role…"
-                            className={cls(
-                                "w-full pl-7 pr-7 py-1.5 text-xs rounded-md",
-                                "bg-surface-100 dark:bg-surface-950 border",
-                                defaultBorderMixin,
-                                "outline-none focus:ring-1 focus:ring-primary/40",
-                                "placeholder-text-disabled dark:placeholder-text-disabled-dark",
-                                "text-text-primary dark:text-text-primary-dark"
-                            )}
-                        />
-                        {searchText && (
-                            <button
-                                onClick={() => {
-                                    setSearchText("");
-                                    inputRef.current?.focus();
-                                }}
-                                className="absolute right-1.5 top-1/2 -translate-y-1/2 p-0.5 rounded hover:bg-surface-200 dark:hover:bg-surface-700 text-text-disabled"
-                            >
-                                <XIcon size={iconSize.smallest}/>
-                            </button>
-                        )}
-                    </div>
+                    <SearchBar
+                        inputRef={inputRef}
+                        size="smallest"
+                        placeholder="Search by name, email, or role…"
+                        onTextSearch={(val) => setSearchText(val ?? "")}
+                    />
                 </div>
 
                 {/* User list */}

package/src/components/common/useColumnsIds.tsx

@@ -49,7 +49,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: EntityColl
         if (key.includes(".")) {
             const rootKey = key.split(".")[0];
             const rootProperty = collection.properties[rootKey];
-            if (rootProperty && rootProperty.type === "map" && rootProperty.spreadChildren && rootProperty.properties) {
+            if (rootProperty && rootProperty.type === "map" && rootProperty.ui?.spreadChildren && rootProperty.properties) {
                 rootsWithExplicitChildren.add(rootKey);
             }
         }
@@ -66,12 +66,12 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: EntityColl
         const property = collection.properties[key];
         if (property) {
             processedPropertyKeys.add(key);
-            if (property.hideFromCollection)
+            if (property.ui?.hideFromCollection)
                 return [null];
-            if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden)
+            if (property.ui?.disabled && typeof property.ui?.disabled === "object" && property.ui?.disabled.hidden)
                 return [null];
 
-            if (property.type === "map" && property.spreadChildren && property.properties) {
+            if (property.type === "map" && property.ui?.spreadChildren && property.properties) {
                 // Check if this spread map has explicit child keys in propertiesOrder
                 if (rootsWithExplicitChildren.has(key)) {
                     // DON'T auto-expand - the children are explicitly listed elsewhere
@@ -84,7 +84,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: EntityColl
             }
             return [{
                 key,
-                disabled: Boolean(property.disabled) || Boolean(property.readOnly)
+                disabled: Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly)
             }];
         }
 
@@ -100,15 +100,15 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: EntityColl
                     // Mark root as seen
                     processedPropertyKeys.add(rootKey);
 
-                    if (nestedProperty.hideFromCollection)
+                    if (nestedProperty.ui?.hideFromCollection)
                         return [null];
-                    if (nestedProperty.disabled && typeof nestedProperty.disabled === "object" && nestedProperty.disabled.hidden)
+                    if (nestedProperty.ui?.disabled && typeof nestedProperty.ui?.disabled === "object" && nestedProperty.ui?.disabled.hidden)
                         return [null];
 
                     return [{
                         key,
-                        disabled: Boolean(rootProperty.disabled) || Boolean(rootProperty.readOnly) ||
-                            Boolean(nestedProperty.disabled) || Boolean(nestedProperty.readOnly)
+                        disabled: Boolean(rootProperty.ui?.disabled) || Boolean(rootProperty.ui?.readOnly) ||
+                            Boolean(nestedProperty.ui?.disabled) || Boolean(nestedProperty.ui?.readOnly)
                     }];
                 }
             }
@@ -147,10 +147,10 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: EntityColl
 
         const property = collection.properties[propKey];
         if (!property) continue;
-        if (property.hideFromCollection) continue;
-        if (property.disabled && typeof property.disabled === "object" && property.disabled.hidden) continue;
+        if (property.ui?.hideFromCollection) continue;
+        if (property.ui?.disabled && typeof property.ui?.disabled === "object" && property.ui?.disabled.hidden) continue;
 
-        if (property.type === "map" && property.spreadChildren && property.properties) {
+        if (property.type === "map" && property.ui?.spreadChildren && property.properties) {
             // For spread maps, add all children that weren't already added
             const allChildConfigs = getColumnKeysForProperty(property as MapProperty, propKey);
             for (const childConfig of allChildConfigs) {
@@ -162,7 +162,7 @@ function hideAndExpandKeys<M extends Record<string, any>>(collection: EntityColl
         } else {
             result.push({
                 key: propKey,
-                disabled: Boolean(property.disabled) || Boolean(property.readOnly)
+                disabled: Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly)
             });
             processedPropertyKeys.add(propKey);
         }
@@ -193,17 +193,17 @@ function getDefaultColumnKeys<M extends Record<string, any> = any>(collection: E
 }
 
 export function getColumnKeysForProperty(property: Property, key: string, disabled?: boolean): PropertyColumnConfig[] {
-    if (property.type === "map" && property.spreadChildren && property.properties) {
+    if (property.type === "map" && property.ui?.spreadChildren && property.properties) {
         return Object.entries(property.properties)
             .flatMap(([childKey, childProperty]) => getColumnKeysForProperty(
                 childProperty as Readonly<Property>,
                 `${key}.${childKey}`,
-                disabled || Boolean(property.disabled) || Boolean(property.readOnly))
+                disabled || Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly))
             );
     }
     return [{
         key,
-        disabled: disabled || Boolean(property.disabled) || Boolean(property.readOnly)
+        disabled: disabled || Boolean(property.ui?.disabled) || Boolean(property.ui?.readOnly)
     }];
 }
 

package/src/components/common/useDataTableController.tsx

@@ -30,7 +30,7 @@ export type DataTableControllerProps<M extends Record<string, any> = any> = {
     /**
      * Force filter to be applied to the table.
      */
-    forceFilter?: FilterValues<string>;
+    fixedFilter?: FilterValues<string>;
 
     scrollRestoration?: ScrollRestorationController;
 
@@ -53,7 +53,7 @@ export type DataTableControllerProps<M extends Record<string, any> = any> = {
  * @param scrollRestoration
  * @param entitiesDisplayedFirst
  * @param lastDeleteTimestamp
- * @param forceFilterFromProps
+ * @param fixedFilterFromProps
  * @param updateUrl
  */
 export function useDataTableController<M extends Record<string, any> = any, USER extends User = User>(
@@ -63,25 +63,34 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         scrollRestoration,
         entitiesDisplayedFirst,
         lastDeleteTimestamp: _lastDeleteTimestamp,
-        forceFilter: forceFilterFromProps,
+        fixedFilter: fixedFilterFromProps,
         updateUrl
     }: DataTableControllerProps<M>)
     : EntityTableController<M> {
 
     const {
-        filter,
+        defaultFilter,
         sort,
-        forceFilter: forceFilterFromCollection
+        fixedFilter: fixedFilterFromCollection
     } = collection;
 
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
     const dataClient = useData();
 
-    const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
+    const fixedFilter = fixedFilterFromProps ?? fixedFilterFromCollection;
     const paginationEnabled = collection.pagination === undefined || Boolean(collection.pagination);
     const pageSize = typeof collection.pagination === "number" ? collection.pagination : DEFAULT_PAGE_SIZE;
 
-    const [searchString, setSearchString] = React.useState<string | undefined>();
+    const location = useLocation();
+
+    const [searchString, setSearchString] = React.useState<string | undefined>(() => {
+        if (updateUrl) {
+            const params = new URLSearchParams(location.search);
+            const urlSearch = params.get("search");
+            return urlSearch ? decodeURIComponent(urlSearch) : undefined;
+        }
+        return undefined;
+    });
 
     const checkFilterCombination = useCallback((filterValues: FilterValues<any>,
         sortBy?: [string, "asc" | "desc"]) => {
@@ -90,21 +99,19 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     }, []);
 
     const sortInternal = useMemo(() => {
-        if (sort && forceFilter && !checkFilterCombination(forceFilter, sort)) {
+        if (sort && fixedFilter && !checkFilterCombination(fixedFilter, sort)) {
             console.warn("Initial sort is not compatible with the force filter. Ignoring initial sort");
             return undefined;
         }
         return sort;
-    }, [sort, forceFilter]);
-
-    const location = useLocation();
+    }, [sort, fixedFilter]);
 
     const {
         filterValues: filterUrl,
         sortBy: sortUrl
     } = parseFilterAndSort(location.search);
 
-    const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string> | (string & {})> | undefined>(forceFilter ?? (updateUrl ? filterUrl : undefined) ?? filter ?? undefined);
+    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);
 
     // Sync filter/sort state from URL on browser navigation (back/forward).
@@ -120,15 +127,20 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         initialSearchRef.current = null;
 
         const { filterValues: urlFilterValues, sortBy: urlSortBy } = parseFilterAndSort(location.search);
-        if (!forceFilter) {
+        if (!fixedFilter) {
             setFilterValues(urlFilterValues as FilterValues<Extract<keyof M, string> | (string & {})> | undefined);
         }
-        if (urlSortBy && forceFilter && !checkFilterCombination(forceFilter, urlSortBy)) {
+        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);
         }
-    }, [location.search, updateUrl, forceFilter, checkFilterCombination]);
+
+        // Sync search string from URL
+        const urlParams = new URLSearchParams(location.search);
+        const urlSearch = urlParams.get("search");
+        setSearchString(urlSearch ? decodeURIComponent(urlSearch) : undefined);
+    }, [location.search, updateUrl, fixedFilter, checkFilterCombination]);
 
     useUpdateUrl(filterValues, sortBy, searchString, updateUrl);
 
@@ -174,10 +186,10 @@ export function useDataTableController<M extends Record<string, any> = any, USER
     const [dataLoadingError, setDataLoadingError] = useState<Error | undefined>();
     const [noMoreToLoad, setNoMoreToLoad] = useState<boolean>(false);
 
-    const clearFilter = useCallback(() => setFilterValues(forceFilter ?? undefined), [forceFilter]);
+    const clearFilter = useCallback(() => setFilterValues(fixedFilter ?? undefined), [fixedFilter]);
 
     const updateFilterValues = useCallback((updatedFilter: FilterValues<Extract<keyof M, string> | (string & {})> | undefined) => {
-        if (forceFilter) {
+        if (fixedFilter) {
             console.warn("Filter is not compatible with the force filter. Ignoring filter");
             return;
         }
@@ -186,7 +198,7 @@ export function useDataTableController<M extends Record<string, any> = any, USER
         } else {
             setFilterValues(updatedFilter);
         }
-    }, [forceFilter]);
+    }, [fixedFilter]);
 
     useEffect(() => {
 

package/src/components/index.tsx

@@ -22,4 +22,4 @@ export * from "./LoginView";
 
 export * from "./RebaseAuth";
 
-
+export * from "./BootstrapAdminBanner";