@firecms/core 3.3.0 → 3.4.0-canary.f6a889a

package/src/core/DrawerNavigationGroup.tsx

@@ -62,43 +62,41 @@ export function DrawerNavigationGroup({
     const { t } = useTranslation();
     return (
         <div
-            className={"bg-surface-50 dark:bg-surface-800/30 my-4 rounded-lg ml-3 mr-1"}
+            className={"my-2 mx-2 flex flex-col"}
             key={`drawer_group_${group}`}
         >
             {/* Group Header */}
-            {drawerOpen ? (
-                <div
-                    className="pl-4 pr-2 py-2 flex flex-row items-center cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg transition-colors"
-                    onClick={onToggleCollapsed}
-                >
-                    <ExpandMoreIcon
-                        size={"smallest"}
-                        className={cls(
-                            "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1",
-                            collapsed ? "-rotate-90" : "rotate-0"
-                        )}
-                    />
-                    <Typography
-                        variant={"caption"}
-                        color={"secondary"}
-                        className="font-medium flex-grow line-clamp-1"
-                    >
-                        {(group && group !== "__default__" ? group : t("views_group")).toUpperCase()}
-                    </Typography>
-                    {headerActions && (
-                        <div onClick={(e) => e.stopPropagation()}>
-                            {headerActions}
-                        </div>
+            <div
+                className={cls("pl-3 pr-2 py-0.5 flex flex-row items-center transition-colors",
+                    drawerOpen ? "cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800/40 rounded-lg" : "opacity-0 invisible pointer-events-none"
+                )}
+                onClick={drawerOpen ? onToggleCollapsed : undefined}
+            >
+                <ExpandMoreIcon
+                    size={"smallest"}
+                    className={cls(
+                        "text-surface-400 dark:text-surface-400 transition-transform duration-200 mr-1",
+                        collapsed ? "-rotate-90" : "rotate-0"
                     )}
-                </div>
-            ) : (
-                <div className="w-full" />
-            )}
+                />
+                <Typography
+                    variant={"caption"}
+                    color={"secondary"}
+                    className="font-semibold text-[11px] uppercase tracking-wider flex-grow line-clamp-1 text-surface-400 dark:text-surface-400"
+                >
+                    {(group && group !== "__default__" ? group : t("views_group"))}
+                </Typography>
+                {headerActions && (
+                    <div onClick={(e) => e.stopPropagation()}>
+                        {headerActions}
+                    </div>
+                )}
+            </div>
 
             {/* Collapsible Content */}
             <div
                 className={cls(
-                    "overflow-hidden transition-all duration-200 ease-in-out",
+                    "transition-all duration-200 ease-in-out overflow-hidden rounded-lg",
                     collapsed ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
                 )}
             >

package/src/core/DrawerNavigationItem.tsx

@@ -22,7 +22,7 @@ export function DrawerNavigationItem({
 }) {
 
     const iconWrap = <div
-        className={"text-text-secondary dark:text-text-secondary-dark"}>
+        className={"shrink-0 flex items-center justify-center w-[44px] h-[30px] text-surface-500 dark:text-text-secondary-dark group-hover/nav:text-primary transition-colors duration-150"}>
         {icon}
     </div>;
 
@@ -33,14 +33,12 @@ export function DrawerNavigationItem({
                 width: "100%",
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
-            className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75",
-                "flex flex-row items-center mr-8",
-                // "transition-all ease-in-out delay-100 duration-300",
-                // drawerOpen ? "w-full" : "w-18",
-                drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
-                "font-semibold text-xs",
-                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : ""
+            className={({ isActive }: { isActive: boolean }) => cls("rounded-lg truncate group/nav",
+                "hover:bg-primary/5 dark:hover:bg-primary/5 text-surface-700 dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
+                "flex flex-row items-center",
+                drawerOpen ? "pr-4 h-[30px]" : "h-[30px]",
+                "font-medium text-[13px]",
+                isActive ? "bg-primary/8 dark:bg-primary/10 text-primary dark:text-primary [&_div]:text-primary" : ""
             )}
             to={url}
         >
@@ -49,11 +47,11 @@ export function DrawerNavigationItem({
 
             <div
                 className={cls(
-                    "text-text-primary dark:text-surface-200",
+                    "text-surface-700 dark:text-surface-300",
                     drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "ml-4 font-inherit"
+                    "font-inherit truncate space-x-2"
                 )}>
-                {name.toUpperCase()}
+                {name}
             </div>
         </NavLink>
     </div>;

package/src/core/EntityEditView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import {
     Entity,
     EntityCollection,
@@ -13,6 +13,7 @@ import {
 import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary } from "../components";
 import {
     canEditEntity,
+    encodeEntityId,
     removeInitialAndTrailingSlashes,
     resolveCollection,
     resolveDefaultSelectedView,
@@ -246,6 +247,47 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const authController = useAuthController();
 
+    // Track which tabs have been visited so we keep them mounted (preserving
+    // their state) without eagerly mounting tabs that were never opened.
+    const mountedTabsRef = useRef<Set<string>>(new Set());
+    if (selectedTab) {
+        mountedTabsRef.current.add(selectedTab);
+    }
+
+    // Memoize the read-only fallback form context so it is not recreated on
+    // every render when there is no real formContext (read-only entity views).
+    const readOnlyFormContext = useMemo<FormContext | undefined>(() => {
+        if (formContext) return undefined; // real formContext takes precedence
+        if (!entityId) return undefined;
+        const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
+        return {
+            entityId,
+            disabled: false,
+            openEntityMode: layout,
+            status: status,
+            values: usedEntity?.values ?? {},
+            setFieldValue: (key: string, value: any) => {
+                throw new Error("You can't update values in read only mode");
+            },
+            save: () => {
+                throw new Error("You can't save in read only mode");
+            },
+            collection: resolveCollection<M>({
+                collection,
+                path,
+                entityId,
+                values: usedEntity?.values ?? {},
+                previousValues: usedEntity?.values ?? {},
+                propertyConfigs: customizationController.propertyConfigs,
+                authController
+            }),
+            path,
+            entity: usedEntity,
+            savingError: undefined,
+            formex: formexStub
+        };
+    }, [formContext, entityId, layout, status, usedEntity, collection, path, customizationController.propertyConfigs, authController]);
+
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .filter(e => !e.includeActions)
         .map((customView) => {
@@ -262,38 +304,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 return null;
             }
 
-            const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
-            const usedFormContext: FormContext = formContext ?? {
-                entityId,
-                disabled: false,
-                openEntityMode: layout,
-                status: status,
-                values: usedEntity?.values ?? {},
-                setFieldValue: (key: string, value: any) => {
-                    throw new Error("You can't update values in read only mode");
-                },
-                save: () => {
-                    throw new Error("You can't save in read only mode");
-                },
-                collection: resolveCollection<M>({
-                    collection,
-                    path,
-                    entityId,
-                    values: usedEntity?.values ?? {},
-                    previousValues: usedEntity?.values ?? {},
-                    propertyConfigs: customizationController.propertyConfigs,
-                    authController
-                }),
-                path,
-                entity: usedEntity,
-                savingError: undefined,
-                formex: formexStub
-            };
+            // Only mount tabs that are active or have been visited before.
+            const isActive = selectedTab === customView.key;
+            if (!isActive && !mountedTabsRef.current.has(customView.key)) {
+                return null;
+            }
+
+            const usedFormContext: FormContext = formContext ?? readOnlyFormContext!;
 
             return <div
                 className={cls(defaultBorderMixin,
                     "relative flex-1 w-full h-full overflow-auto",
-                    { "hidden": selectedTab !== customView.key }
+                    { "hidden": !isActive }
                 )}
                 key={`custom_view_${customView.key}`}
                 role="tabpanel">
@@ -311,7 +333,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const globalLoading = dataLoading && !usedEntity;
 
-    const jsonView = <div
+    // Only mount the JSON view once its tab has been selected at least once.
+    const jsonView = (selectedTab === JSON_TAB_VALUE || mountedTabsRef.current.has(JSON_TAB_VALUE)) ? <div
         className={cls("relative flex-1 h-full overflow-auto w-full",
             { "hidden": selectedTab !== JSON_TAB_VALUE })}
         key={"json_view"}
@@ -320,12 +343,14 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             <EntityJsonPreview
                 values={formContext?.values ?? entity?.values ?? {}} />
         </ErrorBoundary>
-    </div>;
+    </div> : null;
 
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.id ?? subcollection.path;
+        // `newFullPath` addresses the datasource, so the parent id stays raw.
         const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.path)}` : undefined;
-        const newFullIdPath = fullIdPath ? `${fullIdPath}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        // `newFullIdPath` is fed to buildUrlCollectionPath downstream, so it stays escaped.
+        const newFullIdPath = fullIdPath && usedEntity ? `${fullIdPath}/${encodeEntityId(usedEntity.id)}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
 
         if (selectedTab !== subcollectionId) return null;
         return (

package/src/core/field_configs.tsx

@@ -6,6 +6,7 @@ import {
     ArrayOfReferencesFieldBinding,
     BlockFieldBinding,
     DateTimeFieldBinding,
+    GeopointFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
     MultiSelectFieldBinding,
@@ -34,6 +35,7 @@ import {
     ListAltIcon,
     ListIcon,
     MailIcon,
+    LocationOnIcon,
     NumbersIcon, PersonIcon,
     RepeatIcon,
     ScheduleIcon,
@@ -273,6 +275,17 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: DateTimeFieldBinding
         }
     },
+    geopoint: {
+        key: "geopoint",
+        name: "Geopoint",
+        description: "Latitude and longitude pair",
+        Icon: LocationOnIcon,
+        color: "#0ea5e9",
+        property: {
+            dataType: "geopoint",
+            Field: GeopointFieldBinding
+        }
+    },
     group: {
         key: "group",
         name: "Group",
@@ -419,6 +432,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
         return "switch";
     } else if (property.dataType === "date") {
         return "date_time";
+    } else if (property.dataType === "geopoint") {
+        return "geopoint";
     } else if (property.dataType === "reference") {
         return "reference";
     }

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -58,7 +58,7 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-        setValue(entities.map(e => getReferenceFrom(e)));
+        setValue(entities.filter(Boolean).map(e => getReferenceFrom(e)));
     }, [setValue]);
 
     const referenceDialogController = useReferenceDialog({

package/src/form/field_bindings/GeopointFieldBinding.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { CloseIcon, IconButton, TextField } from "@firecms/ui";
+import { FieldProps, GeoPoint } from "../../types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { PropertyIdCopyTooltip } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { getIconForProperty } from "../../util";
+import { formatGeoPoint, getGeoPointCoordinates, parseGeoPoint } from "../../util/geopoint";
+
+type GeopointFieldBindingProps = FieldProps<GeoPoint>;
+
+export function GeopointFieldBinding({
+                                          propertyKey,
+                                          value,
+                                          setValue,
+                                          error,
+                                          showError,
+                                          disabled,
+                                          autoFocus,
+                                          property,
+                                          includeDescription,
+                                          size = "large"
+                                      }: GeopointFieldBindingProps) {
+
+    const coordinates = getGeoPointCoordinates(value);
+    const canClear = Boolean((property as any).clearable);
+    const [latitude, setLatitude] = useState<string>(coordinates ? coordinates.latitude.toString() : "");
+    const [longitude, setLongitude] = useState<string>(coordinates ? coordinates.longitude.toString() : "");
+    const [localError, setLocalError] = useState<string | undefined>();
+    const skipSyncRef = useRef(false);
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    useEffect(() => {
+        if (skipSyncRef.current) {
+            skipSyncRef.current = false;
+            return;
+        }
+        const nextCoordinates = getGeoPointCoordinates(value);
+        setLatitude(nextCoordinates ? nextCoordinates.latitude.toString() : "");
+        setLongitude(nextCoordinates ? nextCoordinates.longitude.toString() : "");
+    }, [value]);
+
+    const updateGeoPoint = (nextLatitude: string, nextLongitude: string) => {
+        skipSyncRef.current = true;
+        setLatitude(nextLatitude);
+        setLongitude(nextLongitude);
+
+        const trimmedLatitude = nextLatitude.trim();
+        const trimmedLongitude = nextLongitude.trim();
+
+        if (!trimmedLatitude && !trimmedLongitude) {
+            setLocalError(undefined);
+            setValue(null);
+            return;
+        }
+
+        const parsed = parseGeoPoint(`${trimmedLatitude}, ${trimmedLongitude}`);
+
+        if (parsed.error) {
+            setLocalError(parsed.error);
+            setValue(null);
+            return;
+        }
+
+        setLocalError(undefined);
+        setValue(parsed.point);
+    };
+
+    const handleClear = (event?: React.MouseEvent) => {
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        updateGeoPoint("", "");
+    };
+
+    const resolvedError = localError ?? error;
+    const shouldShowError = Boolean(resolvedError) || Boolean(showError && error);
+
+    return (
+        <>
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <div className="flex flex-col gap-2">
+                    <div className="mt-1">
+                        <LabelWithIcon
+                            icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required}
+                            title={property.name}
+                            className={shouldShowError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
+                        />
+                    </div>
+                    <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
+                        <TextField
+                            size={size}
+                            value={latitude}
+                            onChange={(event) => updateGeoPoint(event.target.value, longitude)}
+                            autoFocus={autoFocus}
+                            label={"Latitude"}
+                            type="number"
+                            disabled={disabled}
+                            endAdornment={canClear ? (
+                                <IconButton onClick={handleClear}>
+                                    <CloseIcon />
+                                </IconButton>
+                            ) : undefined}
+                            error={shouldShowError && Boolean(resolvedError)}
+                        />
+                        <TextField
+                            size={size}
+                            value={longitude}
+                            onChange={(event) => updateGeoPoint(latitude, event.target.value)}
+                            label={"Longitude"}
+                            type="number"
+                            disabled={disabled}
+                            error={shouldShowError && Boolean(resolvedError)}
+                        />
+                    </div>
+                    {value && !resolvedError && (
+                        <div className="text-xs text-text-secondary dark:text-text-secondary-dark font-mono">
+                            {formatGeoPoint(value)}
+                        </div>
+                    )}
+                </div>
+            </PropertyIdCopyTooltip>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={shouldShowError}
+                             error={resolvedError}
+                             disabled={disabled}
+                             property={property}/>
+        </>
+    );
+}

package/src/form/index.tsx

@@ -11,6 +11,7 @@ export { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBi
 export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
 export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
 export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+export { GeopointFieldBinding } from "./field_bindings/GeopointFieldBinding";
 export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
 export { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
 export { MapFieldBinding } from "./field_bindings/MapFieldBinding";

package/src/i18n/FireCMSi18nProvider.tsx

@@ -8,6 +8,7 @@ import { fr } from "../locales/fr";
 import { it } from "../locales/it";
 import { hi } from "../locales/hi";
 import { pt } from "../locales/pt";
+import { pl } from "../locales/pl";
 import { FireCMSTranslations } from "../types/translations";
 
 const FIRECMS_NS = "firecms_core";
@@ -139,6 +140,7 @@ function buildResources(
         it: { [FIRECMS_NS]: { ...it } },
         hi: { [FIRECMS_NS]: { ...hi } },
         pt: { [FIRECMS_NS]: { ...pt } },
+        pl: { [FIRECMS_NS]: { ...pl } },
     };
 
     if (!translations) return resources;

package/src/internal/useBuildSideEntityController.tsx

@@ -13,6 +13,7 @@ import {
 import { getNavigationEntriesFromPath, NavigationViewInternal } from "../util/navigation_from_path";
 import { useLocation } from "react-router-dom";
 import {
+    encodeEntityId,
     removeInitialAndTrailingSlashes,
     resolveCollection,
     resolveDefaultSelectedView,
@@ -277,7 +278,7 @@ const propsToSidePanel = (props: EntitySidePanelProps,
     const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
     const urlPath = props.entityId
-        ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`)
+        ? buildUrlCollectionPath(`${collectionPath}/${encodeEntityId(props.entityId)}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`)
         : buildUrlCollectionPath(`${collectionPath}${locationSearch}#${NEW_URL_HASH}`);
 
     const resolvedPanelProps: EntitySidePanelProps<any> = {

package/src/locales/de.ts

@@ -146,8 +146,8 @@ export const de: FireCMSTranslations = {
     // ─── Error states ─────────────────────────────────────────────
     error: "Fehler",
     error_uploading_file: "Fehler beim Hochladen der Datei",
-    error_deleting: "Fehler beim Löschen",
-    error_before_delete: "Fehler vor dem Löschen",
+    error_deleting: "Fehler beim Löschen: {{message}}",
+    error_before_delete: "Fehler vor dem Löschen: {{message}}",
     error_updating_asset: "Fehler beim Aktualisieren des Assets",
     error_deleting_asset: "Fehler beim Löschen des Assets",
     error_firestore_index: "Für diese Abfrage ist ein Firestore-Index erforderlich.",

package/src/locales/en.ts

@@ -154,8 +154,8 @@ export const en: FireCMSTranslations = {
     // ─── Error states ─────────────────────────────────────────────
     error: "Error",
     error_uploading_file: "Error uploading file",
-    error_deleting: "Error deleting",
-    error_before_delete: "Error before delete",
+    error_deleting: "Error deleting: {{message}}",
+    error_before_delete: "Error before delete: {{message}}",
     error_updating_asset: "Error updating asset",
     error_deleting_asset: "Error deleting asset",
     error_firestore_index: "A Firestore index is required for this query.",

package/src/locales/es.ts

@@ -152,8 +152,8 @@ export const es: FireCMSTranslations = {
     // ─── Error states ─────────────────────────────────────────────
     error: "Error",
     error_uploading_file: "Error al subir archivo",
-    error_deleting: "Error al eliminar",
-    error_before_delete: "Error antes de eliminar",
+    error_deleting: "Error al eliminar: {{message}}",
+    error_before_delete: "Error antes de eliminar: {{message}}",
     error_updating_asset: "Error al actualizar recurso",
     error_deleting_asset: "Error al eliminar recurso",
     error_firestore_index: "Se requiere un índice de Firestore para esta consulta.",

package/src/locales/fr.ts

@@ -146,8 +146,8 @@ export const fr: FireCMSTranslations = {
     // ─── Error states ─────────────────────────────────────────────
     error: "Erreur",
     error_uploading_file: "Erreur lors du téléchargement du fichier",
-    error_deleting: "Erreur lors de la suppression",
-    error_before_delete: "Erreur avant la suppression",
+    error_deleting: "Erreur lors de la suppression: {{message}}",
+    error_before_delete: "Erreur avant la suppression: {{message}}",
     error_updating_asset: "Erreur lors de la mise à jour de l'actif",
     error_deleting_asset: "Erreur lors de la suppression de l'actif",
     error_firestore_index: "Un index Firestore est requis pour cette requête.",

package/src/locales/hi.ts

@@ -146,8 +146,8 @@ export const hi: FireCMSTranslations = {
     // ─── Error states ─────────────────────────────────────────────
     error: "त्रुटि",
     error_uploading_file: "फ़ाइल अपलोड करने में त्रुटि",
-    error_deleting: "हटाने में त्रुटि",
-    error_before_delete: "हटाने से पहले त्रुटि",
+    error_deleting: "हटाने में त्रुटि: {{message}}",
+    error_before_delete: "हटाने से पहले त्रुटि: {{message}}",
     error_updating_asset: "एसेट अपडेट करने में त्रुटि",
     error_deleting_asset: "एसेट हटाने में त्रुटि",
     error_firestore_index: "इस क्वेरी के लिए Firestore इंडेक्स आवश्यक है।",

package/src/locales/it.ts

@@ -146,8 +146,8 @@ export const it: FireCMSTranslations = {
     // ─── Error states ─────────────────────────────────────────────
     error: "Errore",
     error_uploading_file: "Errore durante il caricamento del file",
-    error_deleting: "Errore durante l'eliminazione",
-    error_before_delete: "Errore prima dell'eliminazione",
+    error_deleting: "Errore durante l'eliminazione: {{message}}",
+    error_before_delete: "Errore prima dell'eliminazione: {{message}}",
     error_updating_asset: "Errore durante l'aggiornamento dell'asset",
     error_deleting_asset: "Errore durante l'eliminazione dell'asset",
     error_firestore_index: "Per questa query è richiesto un indice Firestore.",