@firecms/core 3.3.0 → 3.4.0-canary.1faa2a9

package/dist/util/urls.d.ts

@@ -0,0 +1,22 @@
+import type { PreviewType } from "../types";
+/**
+ * Is the given value an absolute `http(s)` URL, as opposed to a relative
+ * storage path such as `images/my_image.png`?
+ *
+ * Values saved in the datasource for storage properties can be either, e.g.
+ * when the property is configured with `storeUrl: true`, or when the value was
+ * written directly pointing to an externally hosted file.
+ */
+export declare function isAbsoluteHttpUrl(value?: string | null): boolean;
+/**
+ * Extract the lowercase file extension of a URL or path, ignoring any query
+ * string or hash fragment. Returns `undefined` when there is no extension.
+ */
+export declare function getFileExtensionFromUrl(urlOrPath?: string | null): string | undefined;
+/**
+ * Best effort guess of the preview type of a URL or path, based on its file
+ * extension. Used when no storage metadata (and therefore no content type) is
+ * available, e.g. for externally hosted files.
+ * Returns `undefined` when the extension is missing or not recognised.
+ */
+export declare function getPreviewTypeFromUrl(urlOrPath?: string | null): PreviewType | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.3.0",
+  "version": "3.4.0-canary.1faa2a9",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,8 +53,8 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/formex": "^3.3.0",
-    "@firecms/ui": "^3.3.0",
+    "@firecms/formex": "3.4.0-canary.1faa2a9",
+    "@firecms/ui": "3.4.0-canary.1faa2a9",
     "@floating-ui/dom": "^1.7.4",
     "@radix-ui/react-portal": "^1.1.10",
     "@radix-ui/react-slot": "^1.2.4",
@@ -63,9 +63,9 @@
     "date-fns": "^3.6.0",
     "fuse.js": "^7.1.0",
     "history": "^5.3.0",
-    "i18next": "^23.16.4",
+    "i18next": "^26.3.3",
     "json-logic-js": "^2.0.5",
-    "markdown-it": "^14.1.0",
+    "markdown-it": "^14.2.0",
     "markdown-it-ins": "^4.0.0",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-task-lists": "^2.1.1",
@@ -89,14 +89,14 @@
     "prosemirror-view": "^1.33.8",
     "react-dropzone": "^14.3.8",
     "react-fast-compare": "^3.2.2",
-    "react-i18next": "^14.1.3",
+    "react-i18next": "^17.0.11",
     "react-image-crop": "^11.0.10",
     "react-markdown": "^9.1.0",
     "react-moveable": "^0.56.0",
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
-    "vite-plugin-static-copy": "3.1.4",
+    "vite-plugin-static-copy": "4.1.1",
     "yup": "^1.7.1"
   },
   "peerDependencies": {
@@ -111,7 +111,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/json-logic-js": "^2.0.8",
-    "@types/node": "^20.19.17",
+    "@types/node": "^26.1.1",
     "@types/object-hash": "^3.0.6",
     "@types/react": "^19.2.3",
     "@types/react-dom": "^19.2.3",
@@ -123,12 +123,12 @@
     "eslint-plugin-react-compiler": "^19.1.0-rc.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.2.0",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^6.2.6",
     "react-router": "^6.30.2",
     "react-router-dom": "^6.30.2",
     "ts-jest": "^29.4.5",
     "ts-node": "^10.9.2",
-    "tsd": "^0.31.2",
+    "tsd": "^0.33.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.4"
   },
@@ -163,6 +163,10 @@
       "^.+\\.tsx?$": "ts-jest"
     },
     "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "/dist/"
+    ],
     "moduleFileExtensions": [
       "ts",
       "tsx",
@@ -172,6 +176,9 @@
       "node"
     ],
     "testEnvironment": "node",
+    "setupFiles": [
+      "<rootDir>/test/setup_jsdom.js"
+    ],
     "moduleNameMapper": {
       "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
     }

package/src/app/Scaffold.tsx

@@ -1,8 +1,9 @@
 import React, { PropsWithChildren, useCallback } from "react";
-import { ChevronLeftIcon, cls, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, MenuIcon, Sheet } from "@firecms/ui";
 import equal from "react-fast-compare"
 import { useLargeLayout } from "../hooks";
 import { ErrorBoundary } from "../components";
+import { LicenseBanner } from "../components/LicenseBanner";
 import { AppContext } from "./useApp";
 import { useTranslation } from "../hooks/useTranslation";
 
@@ -80,7 +81,11 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
         const [onHover, setOnHover] = React.useState(false);
 
         const setOnHoverTrue = useCallback(() => setOnHover(true), []);
-        const setOnHoverFalse = useCallback(() => setOnHover(false), []);
+        const setOnHoverFalse = useCallback(() => {
+            // Don't collapse the drawer while a popover/dropdown is open
+            if (typeof document !== "undefined" && document.querySelector("[data-radix-popper-content-wrapper]")) return;
+            setOnHover(false);
+        }, []);
 
         const handleDrawerOpen = useCallback(() => {
             setDrawerOpen(true);
@@ -96,17 +101,21 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             } catch { /* ignore */ }
         }, []);
 
-        const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
+        // Pinned-open state only; hover is tracked separately so it can *float*
+        // over the content instead of pushing it.
+        const computedDrawerOpen: boolean = drawerOpen;
+        const computedDrawerHovered: boolean = Boolean(largeLayout && onHover);
 
         const hasAppBar = Boolean(appBarChildren.length > 0);
         return (
             <AppContext.Provider value={{
                 logo,
                 hasDrawer: includeDrawer,
-                drawerHovered: onHover,
+                drawerHovered: computedDrawerHovered,
                 drawerOpen: computedDrawerOpen,
                 closeDrawer: handleDrawerClose,
                 openDrawer: handleDrawerOpen,
+                closeHover: setOnHoverFalse,
                 autoOpenDrawer
             }}>
                 <div
@@ -128,7 +137,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                         onMouseMove={setOnHoverTrue}
                         onMouseLeave={setOnHoverFalse}
                         open={computedDrawerOpen}
-                        hovered={onHover}
+                        hovered={computedDrawerHovered}
                         setDrawerOpen={setDrawerOpen}>
                         {includeDrawer && drawerChildren}
                     </DrawerWrapper>
@@ -138,6 +147,12 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                         {hasAppBar && <DrawerHeader />}
 
+                        <LicenseBanner
+                            className={cls("flex-shrink-0", {
+                                "px-2 pb-1 lg:px-4 lg:pb-2": padding,
+                                "pt-2 lg:pt-4": !hasAppBar
+                            })}/>
+
                         <div
                             className={cls(defaultBorderMixin, "flex-grow overflow-auto m-0 ", {
                                 "lg:mt-4": !hasAppBar,
@@ -177,49 +192,30 @@ function DrawerWrapper(props: {
 }) {
 
     const { t } = useTranslation();
-    const width = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+
+    // Layout width is the space the drawer occupies in the flex row; the visual
+    // width is how wide the drawer actually renders. When hovered (but not
+    // pinned open) the layout width stays collapsed while the visual width
+    // expands, so the drawer *floats* over the content instead of pushing it.
+    const layoutWidth = !props.displayed ? 0 : (props.open ? DRAWER_WIDTH : 72);
+    const visualWidth = !props.displayed ? 0 : ((props.open || props.hovered) ? DRAWER_WIDTH : 72);
+    const isFloating = props.hovered && !props.open;
+
+    const transition = "left 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 75ms cubic-bezier(0.4, 0, 0.6, 1) 0ms";
+
     const innerDrawer = <div
-        className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
+        className={cls("h-full overflow-hidden", defaultBorderMixin,
+            isFloating
+                ? "absolute top-0 left-0 bottom-0 z-30 bg-surface-50 dark:bg-surface-900 shadow-lg border-r"
+                : "relative bg-surface-50 dark:bg-surface-900")}
         style={{
-            width,
-            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            width: visualWidth,
+            transition
         }}
     >
-
-        {!props.open && props.displayed && (
-            <Tooltip title={t("open_menu")}
-                side="right"
-                sideOffset={12}
-                asChild={true}>
-                <div
-                    className="ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20">
-                    <IconButton
-                        color="inherit"
-                        aria-label={t("open_menu")}
-                        onClick={() => props.setDrawerOpen(true)}
-                        size="large"
-                    >
-                        <MenuIcon size="small" />
-                    </IconButton>
-                </div>
-            </Tooltip>
-        )}
-
-        <div
-            className={`z-20 absolute right-0 top-4 ${props.open ? "opacity-100" : "opacity-0 invisible"
-                } transition-opacity duration-200 ease-in-out`}>
-            <IconButton
-                aria-label={t("close_drawer")}
-                onClick={() => props.setDrawerOpen(false)}
-            >
-                <ChevronLeftIcon />
-            </IconButton>
-        </div>
-
         <div className={"flex flex-col h-full"}>
             {props.children}
         </div>
-
     </div>;
 
     const largeLayout = useLargeLayout();
@@ -250,13 +246,14 @@ function DrawerWrapper(props: {
 
     return (
         <div
-            className="z-20 relative"
+            className="z-20 relative flex-shrink-0 overflow-visible"
             onMouseEnter={props.onMouseEnter}
             onMouseMove={props.onMouseMove}
             onMouseLeave={props.onMouseLeave}
             style={{
-                width,
-                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+                width: layoutWidth,
+                minWidth: layoutWidth,
+                transition
             }}>
 
             {innerDrawer}

package/src/app/useApp.tsx

@@ -10,6 +10,7 @@ export type AppState = {
     drawerOpen: boolean,
     openDrawer: () => void,
     closeDrawer: () => void,
+    closeHover?: () => void,
     autoOpenDrawer?: boolean,
     logo?: string
 }

package/src/components/DeleteEntityDialog.tsx

@@ -96,6 +96,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
         deleteEntityWithCallbacks({
             dataSource,
             entity,
+            // The entity is the authority on where it lives; stated rather than left implicit.
+            pathSegments: entity.pathSegments,
             collection: resolvedCollection,
             callbacks,
             onDeleteSuccess,

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -3,7 +3,7 @@ import React, { MouseEvent, useCallback } from "react";
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
 import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
-import { getEntityFromCache } from "../../util/entity_cache";
+import { entityCacheKey, getEntityFromCache } from "../../util/entity_cache";
 import { getLocalChangesBackup } from "../../util";
 import { getChanges } from "../../form/EntityForm";
 
@@ -82,7 +82,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
-    const cachedData = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : undefined;
+    const cachedData = enableLocalChangesBackup ? getEntityFromCache(entityCacheKey(fullPath, entity.id)) : undefined;
     const hasDraft = (() => {
         if (!cachedData || typeof cachedData !== "object" || Object.keys(cachedData).length === 0) return false;
         const realChanges = getChanges(cachedData as any, (entity?.values ?? {}) as any);

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -245,7 +245,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         const columnsResult: VirtualTableColumn[] = propertiesToColumns({
             properties,
             sortable,
-            forceFilter,
+            forcedFilters: tableController.forcedFilters,
+            allowedFilters: tableController.allowedFilters,
             AdditionalHeaderWidget
         });
 
@@ -353,6 +354,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}
                 textSearchLoading={textSearchLoading}
                 onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
+                initialSearchString={tableController.searchString}
                 title={title}
                 actionsStart={actionsStart}
                 actions={actions}

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { getTableCellAlignment, getTablePropertyColumnWidth } from "./internal/common";
 import { FilterValues, ResolvedProperties, ResolvedProperty } from "../../types";
 import { VirtualTableColumn } from "../VirtualTable";
-import { getIconForProperty, getResolvedPropertyInPath } from "../../util";
+import { getIconForProperty, getResolvedPropertyInPath, isDataTypeFilterable } from "../../util";
 import { getColumnKeysForProperty } from "../common/useColumnsIds";
 
 export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
@@ -20,7 +20,8 @@ export function buildIdColumn(largeLayout?: boolean): VirtualTableColumn {
 export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     properties: ResolvedProperties<M>;
     sortable?: boolean;
-    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+    forcedFilters?: (keyof M)[];
+    allowedFilters?: (keyof M)[];
     AdditionalHeaderWidget?: React.ComponentType<{
         property: ResolvedProperty,
         propertyKey: string,
@@ -28,8 +29,7 @@ export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     }>;
 }
 
-export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forceFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
-    const disabledFilter = Boolean(forceFilter);
+export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forcedFilters, AdditionalHeaderWidget, allowedFilters }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
     return Object.entries<ResolvedProperty>(properties)
         .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
         .map(({
@@ -39,14 +39,19 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
             const property = getResolvedPropertyInPath(properties, key);
             if (!property)
                 throw Error("Internal error: no property found in path " + key);
-            const filterable = filterableProperty(property);
+
+            const filterable = property.dataType === 'array' ? isDataTypeFilterable(property.of?.dataType, true) : isDataTypeFilterable(property.dataType);
+            const isFilterForced = forcedFilters?.includes(key) ?? false;
+            const isFilterAllowed = allowedFilters ? allowedFilters.includes(key) : filterable;
+
+            const filterEnabled = filterable && isFilterAllowed && !isFilterForced;
             return {
                 key: key as string,
                 align: getTableCellAlignment(property),
                 icon: getIconForProperty(property, "small"),
                 title: property.name ?? key as string,
                 sortable: sortable,
-                filter: !disabledFilter && filterable,
+                filter: filterEnabled,
                 width: getTablePropertyColumnWidth(property),
                 resizable: true,
                 custom: {
@@ -59,16 +64,3 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
             } satisfies VirtualTableColumn;
         });
 }
-
-function filterableProperty(property: ResolvedProperty, partOfArray = false): boolean {
-    if (partOfArray) {
-        return ["string", "number", "date", "reference"].includes(property.dataType);
-    }
-    if (property.dataType === "array") {
-        if (property.of)
-            return filterableProperty(property.of, true);
-        else
-            return false;
-    }
-    return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
-}

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -70,7 +70,7 @@ export const TableReferenceFieldInternal = React.memo(
         }, [updateValue]);
 
         const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-            updateValue(entities.map((e) => getReferenceFrom(e)));
+            updateValue(entities.filter(Boolean).map((e) => getReferenceFrom(e)));
         }, [updateValue]);
 
         const selectedEntityIds = internalValue

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -20,6 +20,11 @@ interface CollectionTableToolbarProps {
     onTextSearchClick?: () => void;
     onTextSearch?: (searchString?: string) => void;
     textSearchLoading?: boolean;
+    /**
+     * Search term the search bar should start with, typically the one restored from the
+     * URL query params by the table controller.
+     */
+    initialSearchString?: string;
 }
 
 export function CollectionTableToolbar({
@@ -29,6 +34,7 @@ export function CollectionTableToolbar({
     onTextSearch,
     onTextSearchClick,
     textSearchLoading,
+    initialSearchString,
     title,
     viewModeToggle
 }: CollectionTableToolbarProps) {
@@ -79,6 +85,7 @@ export function CollectionTableToolbar({
                         disabled={Boolean(onTextSearchClick)}
                         onClick={onTextSearchClick}
                         onTextSearch={onTextSearchClick ? undefined : onTextSearch}
+                        initialValue={initialSearchString}
                         placeholder={t("search")}
                         expandable={true} />}
 

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -26,6 +26,8 @@ import { OnCellValueChangeParams } from "../../../common";
 interface PopupFormFieldProps<M extends Record<string, any>> {
     customFieldValidator?: CustomFieldValidator;
     path: string;
+    /** `path` split at its real segment boundaries; forwarded to the datasource. */
+    pathSegments?: string[];
     entityId: string;
     tableKey: string;
     propertyKey?: Extract<keyof M, string>;
@@ -54,6 +56,7 @@ export function PopupFormFieldLoading<M extends Record<string, any>>({
                                                                          propertyKey,
                                                                          collection: inputCollection,
                                                                          path,
+                                                                         pathSegments,
                                                                          cellRect,
                                                                          open,
                                                                          onClose,
@@ -66,11 +69,12 @@ export function PopupFormFieldLoading<M extends Record<string, any>>({
         if (entityId && inputCollection) {
             dataSource.fetchEntity({
                 path,
+                pathSegments,
                 entityId,
                 collection: inputCollection
             }).then(setEntity);
         }
-    }, [entityId, inputCollection, dataSource, path]);
+    }, [entityId, inputCollection, dataSource, path, pathSegments]);
 
     if (!entity) return null;
     return <PopupFormFieldInternal {...{

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -42,6 +42,8 @@ export type EntityCollectionBoardViewProps<M extends Record<string, any> = any>
     collection: EntityCollection<M>;
     tableController: EntityTableController<M>;
     fullPath: string;
+    /** `fullPath` split at its real segment boundaries; forwarded to the datasource. */
+    pathSegments?: string[];
     parentCollectionIds?: string[];
     columnProperty: string;
     onEntityClick?: (entity: Entity<M>) => void;
@@ -60,6 +62,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     collection,
     tableController,
     fullPath,
+    pathSegments,
     parentCollectionIds = [],
     columnProperty,
     onEntityClick,
@@ -169,6 +172,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     // Use the new per-column data controller
     const boardDataController = useBoardDataController<M>({
         fullPath,
+        pathSegments,
         collection,
         columnProperty,
         columns,
@@ -270,6 +274,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
 
         currentDataSource.countEntities({
             path: fullPath,
+            pathSegments,
             collection: currentCollection
         }).then(count => {
             totalCount = count;
@@ -281,6 +286,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
 
         currentDataSource.countEntities({
             path: fullPath,
+            pathSegments,
             collection: currentCollection,
             filter: { [orderProperty]: ["!=", null] } as FilterValues<string>
         }).then(count => {
@@ -432,6 +438,8 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
 
         const saveProps: SaveEntityProps = {
             path: entity.path,
+            // Paired with `entity.path`: the segments the entity was loaded with.
+            pathSegments: entity.pathSegments,
             entityId: entity.id,
             values: updatedValues as M,
             previousValues: entity.values,
@@ -472,6 +480,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
             console.log("Fetching all documents from collection...");
             const allDocs = await dataSource.fetchCollection<M>({
                 path: fullPath,
+                pathSegments,
                 collection,
                 limit: 10000 // Fetch all
             });
@@ -492,6 +501,8 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
 
                 const saveProps: SaveEntityProps = {
                     path: entity.path,
+                    // Paired with `entity.path`: the segments the entity was loaded with.
+                    pathSegments: entity.pathSegments,
                     entityId: entity.id,
                     values: updatedValues as M,
                     previousValues: entity.values,
@@ -663,6 +674,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
                         });
                         sideEntityController.open({
                             path: fullPath,
+                            pathSegments,
                             collection,
                             entityId: undefined,
                             updateUrl: true,