@firecms/core 3.1.0-canary.24c8270 → 3.1.0-canary.75005e4

package/src/form/components/LocalChangesMenu.tsx

@@ -16,7 +16,7 @@ import {
     WarningIcon
 } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
-import { useSnackbarController } from "../../hooks";
+import { useSnackbarController, useTranslation } from "../../hooks";
 import { mergeDeep } from "../../util";
 import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
 import { ResolvedProperties } from "../../types";
@@ -39,6 +39,7 @@ export function LocalChangesMenu<M extends object>({
                                                    }: LocalChangesMenuProps<M>) {
 
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
     const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
     const [open, setOpen] = useState(false);
 
@@ -62,7 +63,7 @@ export function LocalChangesMenu<M extends object>({
         formex.setValues(mergedValues);
         snackbarController.open({
             type: "info",
-            message: "Local changes applied to the form"
+            message: t("local_changes_applied")
         });
         handleCloseMenu();
         onClearLocalChanges?.();
@@ -72,7 +73,7 @@ export function LocalChangesMenu<M extends object>({
         removeEntityFromCache(cacheKey);
         snackbarController.open({
             type: "info",
-            message: "Local changes discarded"
+            message: t("local_changes_discarded")
         });
         handleCloseMenu();
         onClearLocalChanges?.();
@@ -90,7 +91,7 @@ export function LocalChangesMenu<M extends object>({
                         onClick={handleOpenMenu}
                     >
                         <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
-                        Unsaved Local changes
+                        {t("unsaved_local_changes")}
                         <KeyboardArrowDownIcon size={"smallest"}/>
                     </Button>
                 }
@@ -98,12 +99,11 @@ export function LocalChangesMenu<M extends object>({
                 onOpenChange={setOpen}
             >
                 <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
-                    This document was edited locally and has unsaved changes. These local changes will be lost if you
-                    don't apply them.
+                    {t("unsaved_local_changes_description")}
                 </div>
-                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
-                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
-                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>Discard Local Changes</MenuItem>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>{t("preview_changes")}</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>{t("apply_changes")}</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>{t("discard_local_changes")}</MenuItem>
             </Menu>
 
             <Dialog
@@ -111,10 +111,10 @@ export function LocalChangesMenu<M extends object>({
                 onOpenChange={setPreviewDialogOpen}
                 maxWidth={"4xl"}
             >
-                <DialogTitle variant={"h6"}>Preview Local Changes</DialogTitle>
+                <DialogTitle variant={"h6"}>{t("preview_local_changes")}</DialogTitle>
                 <DialogContent className={"my-4"}>
                     <Typography variant={"body2"} className={"mb-4"}>
-                        These are the local changes that will be applied to the form.
+                        {t("preview_local_changes_description")}
                     </Typography>
                     <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
                         maxHeight: 520,
@@ -127,7 +127,7 @@ export function LocalChangesMenu<M extends object>({
                     </div>
                 </DialogContent>
                 <DialogActions>
-                    <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>{t("close")}</Button>
                     <Button
                         variant={"filled"}
                         onClick={() => {
@@ -135,7 +135,7 @@ export function LocalChangesMenu<M extends object>({
                             setPreviewDialogOpen(false);
                         }}
                     >
-                        Apply changes
+                        {t("apply_changes")}
                     </Button>
                 </DialogActions>
             </Dialog>

package/src/form/components/StorageItemPreview.tsx

@@ -5,6 +5,7 @@ import { PreviewSize, PropertyPreview } from "../../preview";
 
 import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 interface StorageItemPreviewProps {
     name: string;
@@ -27,7 +28,7 @@ export function StorageItemPreview({
                                        placeholder,
                                        className
                                    }: StorageItemPreviewProps) {
-
+    const { t } = useTranslation();
     return (
         <div className={cls(
             "relative border-box flex items-center justify-center",
@@ -41,7 +42,7 @@ export function StorageItemPreview({
 
                     <Tooltip
                         asChild={true}
-                        title="Remove">
+                        title={t("remove")}>
                         <IconButton
                             size={"small"}
                             onClick={(event) => {

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -4,8 +4,7 @@ import { ReferencePreview } from "../../preview";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
-
-import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog, useTranslation } from "../../hooks";
 import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
@@ -48,6 +47,7 @@ export function ArrayOfReferencesFieldBinding({
         setValue
     });
 
+    const { t } = useTranslation();
     const navigationController = useNavigationController();
     const collection: EntityCollection | undefined = useMemo(() => {
         return ofProperty.path ? navigationController.getCollection(ofProperty.path) : undefined;
@@ -84,7 +84,7 @@ export function ArrayOfReferencesFieldBinding({
                                     }: ArrayEntryParams) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
-            return <div>Internal ERROR</div>;
+            return <div>{t("internal_error")}</div>;
         return (
             <ReferencePreview
                 key={internalId}
@@ -132,7 +132,7 @@ export function ArrayOfReferencesFieldBinding({
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 <EditIcon size={"small"}/>
-                Edit {property.name}
+                {t("edit_name", { name: property.name ?? "" })}
             </Button>
         </div>}
     </>;

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -11,6 +11,7 @@ import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { ArrayContainer, ArrayEntryParams } from "../../components";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -37,6 +38,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                         }: FieldProps<T>) {
 
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.oneOf)
         throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
@@ -84,7 +86,7 @@ export function BlockFieldBinding<T extends Array<any>>({
     const body = <ArrayContainer value={value}
                                  className={"flex flex-col gap-3"}
                                  droppableId={propertyKey}
-                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                 addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                  buildEntry={buildEntry}
                                  onInternalIdAdded={setLastAddedId}
                                  disabled={isSubmitting || Boolean(property.disabled)}
@@ -167,6 +169,7 @@ function BlockEntry({
     const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
 
     const formex = useFormex();
+    const { t } = useTranslation();
 
     useEffect(() => {
         if (!type) {
@@ -227,7 +230,7 @@ function BlockEntry({
                             <Select
                                 className="mb-2"
                                 placeholder={<Typography variant={"caption"}
-                                                         className={"px-4 py-2 font-medium"}>Type</Typography>}
+                                                         className={"px-4 py-2 font-medium"}>{t("type")}</Typography>}
                                 size={"medium"}
                                 fullWidth={true}
                                 position={"item-aligned"}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -22,6 +22,7 @@ import {
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
 import { getIn } from "@firecms/formex";
+import { useTranslation } from "../../hooks/useTranslation";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -54,6 +55,7 @@ export function KeyValueFieldBinding({
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
 
+    const { t } = useTranslation();
     const initialValues = getIn(context.formex.initialValues, propertyKey);
 
     const mapFormView = <MapEditView value={value}
@@ -103,6 +105,7 @@ function MapEditView<T extends Record<string, any>>({
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
+    const { t } = useTranslation();
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
         Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
@@ -230,7 +233,7 @@ function MapEditView<T extends Record<string, any>>({
                     }]]);
                 }
                 }>
-            {fieldName ? `Add to ${fieldName}` : "Add"}
+            {fieldName ? t("add_to_field", { fieldName }) : t("add_entry")}
         </Button>
 
     </div>;
@@ -261,12 +264,13 @@ function MapKeyValueRow<T extends Record<string, any>>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
 
     function buildInput(entryValue: any, fieldKey: string, dataType: DataType) {
         if (dataType === "string" || dataType === "number") {
             return <TextField
                 key={dataType}
-                placeholder={"value"}
+                placeholder={t("value")}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
                 size={"medium"}
@@ -325,7 +329,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
-                                addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
+                                addLabel={fieldKey ? t("add_to_field", { fieldName: fieldKey }) : t("add_entry")}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
                                 canAddElements={true}
@@ -370,7 +374,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -386,7 +390,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
-                        placeholder={"key"}
+                        placeholder={t("key")}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
                         size={"medium"}
                         onChange={(event) => {
@@ -404,17 +408,17 @@ function MapKeyValueRow<T extends Record<string, any>>({
                         </IconButton>}
                     >
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                                  onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                                  onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                                  onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                                  onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                                  onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                         <MenuItem dense
-                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                                  onClick={() => doUpdateDataType("array")}>{t("array")}</MenuItem>
                     </Menu>
 
                     <IconButton aria-label="delete"
@@ -446,6 +450,7 @@ function ArrayKeyValueRow<T>({
 }) {
 
     const { locale } = useCustomizationController();
+    const { t } = useTranslation();
     const [selectedDataType, setSelectedDataType] = useState<DataType>(getDataType(value) ?? "string");
 
     function doUpdateDataType(dataType: DataType) {
@@ -487,7 +492,7 @@ function ArrayKeyValueRow<T>({
                                            }}/>;
         } else if (dataType === "array") {
             return <Typography variant={"caption"}>
-                Arrays of arrays are not supported.
+                {t("arrays_of_arrays_not_supported")}
             </Typography>;
         } else if (dataType === "map") {
             return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
@@ -499,7 +504,7 @@ function ArrayKeyValueRow<T>({
         } else {
             return <Typography
                 variant={"caption"}>
-                {`Data type ${dataType} not supported yet`}
+                {t("data_type_not_supported", { dataType })}
             </Typography>;
         }
     }
@@ -519,15 +524,15 @@ function ArrayKeyValueRow<T>({
                         <ArrowDropDownIcon/>
                     </IconButton>}>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                              onClick={() => doUpdateDataType("string")}>{t("string")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                              onClick={() => doUpdateDataType("number")}>{t("number")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                              onClick={() => doUpdateDataType("boolean")}>{t("boolean")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                              onClick={() => doUpdateDataType("map")}>{t("map")}</MenuItem>
                     <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                              onClick={() => doUpdateDataType("date")}>{t("date")}</MenuItem>
                 </Menu>
 
             </Typography>

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -7,6 +7,7 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { FormEntry } from "../components/FormEntry";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { useTranslation } from "../../hooks";
 
 /**
  * Field that renders the children property fields
@@ -91,7 +92,7 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value, t)}*/}
 
     </>
         ;
@@ -128,7 +129,7 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any) => {
+const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: any) => void, value: any, t: any) => {
 
     const keys = Object.keys(properties)
         .filter((key) => !value || !(key in value));
@@ -143,7 +144,7 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
     if (!keys.length) return <></>;
 
     return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
+        <InputLabel>{t("add_property")}</InputLabel>
         <Select
             value={""}
             size={"large"}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -12,7 +12,7 @@ import {
     useStorageSource
 } from "../../index";
 import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
-import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
+import { FireCMSEditor, FireCMSEditorProps } from "../../editor";
 import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
 
 interface MarkdownEditorFieldProps {
@@ -55,12 +55,12 @@ export function MarkdownEditorFieldBinding({
         }
         internalValue.current = content;
         setValue(content);
-    }, [setValue]);
+    }, [setValue, value]);
 
     useEffect(() => {
         if (internalValue.current !== value) {
             internalValue.current = value;
-            setFieldVersion(fieldVersion + 1);
+            setFieldVersion(v => v + 1);
         }
     }, [value]);
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -7,6 +7,7 @@ import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { useAuthController } from "../../hooks";
+import { useTranslation } from "../../hooks/useTranslation";
 
 /**
  * Generic array field that allows reordering and renders the child property
@@ -34,6 +35,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
     const authController = useAuthController();
     const minimalistView = minimalistViewProp || property.minimalistView;
+    const { t } = useTranslation();
 
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
@@ -87,7 +89,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
     const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
     const sortable = property.sortable === undefined ? true : property.sortable;
     const arrayContainer = <ArrayContainer droppableId={propertyKey}
-                                           addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                           addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
                                            value={value}
                                            buildEntry={buildEntry}
                                            onInternalIdAdded={setLastAddedId}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -41,6 +41,7 @@ import {
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useTranslation } from "../../hooks/useTranslation";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
 const disabledClasses = fieldBackgroundDisabledMixin;
@@ -387,6 +388,7 @@ export function StorageUpload({
     storage,
     storagePathBuilder,
 }: StorageUploadProps) {
+    const { t } = useTranslation();
 
     if (multipleFilesSupported) {
         const arrayProperty = property as ResolvedArrayProperty<string[]>;
@@ -461,8 +463,8 @@ export function StorageUpload({
     }, [value, multipleFilesSupported, onChange, setInternalValue]);
 
     const helpText = multipleFilesSupported
-        ? "Drag 'n' drop some files here, or click to select files. Drag to reorder."
-        : "Drag 'n' drop a file here, or click to select one";
+        ? t("drag_drop_multiple")
+        : t("drag_drop_single");
 
     const renderProperty: ResolvedStringProperty = multipleFilesSupported
         ? (property as ResolvedArrayProperty<string[]>).of as ResolvedStringProperty

package/src/hooks/index.tsx

@@ -31,3 +31,4 @@ export * from "./useBuildLocalConfigurationPersistence";
 export * from "./useBuildModeController";
 
 export * from "./useValidateAuthenticator";
+export * from "./useTranslation";

package/src/hooks/useBuildNavigationController.tsx

@@ -34,7 +34,6 @@ import { getParentReferencesFromPath } from "../util/parent_references_from_path
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
 
-export const NAVIGATION_DEFAULT_GROUP_NAME = "Views";
 export const NAVIGATION_ADMIN_GROUP_NAME = "Admin";
 
 export type BuildNavigationContextProps<EC extends EntityCollection, USER extends User> = {
@@ -189,7 +188,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
                     path: pathKey,
                     collection,
                     description: collection.description?.trim(),
-                    group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+                    group: groupName
                 });
                 return acc;
             }, [] as NavigationEntry[]),
@@ -217,7 +216,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
                     path: view.path,
                     view,
                     description: view.description?.trim(),
-                    group: groupName ?? NAVIGATION_DEFAULT_GROUP_NAME
+                    group: groupName
                 });
                 return acc;
             }, [] as NavigationEntry[]),
@@ -242,7 +241,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             }, [] as NavigationEntry[])
         ];
 
-        const groupOrderValue = (groupName?: string): number => {
+        const groupOrderValue = (groupName?: string | null): number => {
             if (groupName === NAVIGATION_ADMIN_GROUP_NAME) return 1;
             return 0; // Other groups
         };
@@ -266,7 +265,10 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
 
         const collectedGroupsFromEntries = navigationEntries
             .map(e => e.group)
-            .filter(Boolean) as string[];
+            .filter((g): g is string => g !== null && Boolean(g));
+
+        // Check if there are any ungrouped entries
+        const hasUngroupedEntries = navigationEntries.some(e => e.group === null && e.type !== "admin");
 
         // Preserve order from finalNavigationGroupMappings (persisted order)
         const groupsFromMappings = finalNavigationGroupMappings.map(g => g.name);
@@ -284,7 +286,12 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         const uniqueGroupsArray = [...new Set(allDefinedGroups)];
         const adminGroups = uniqueGroupsArray.filter(g => g === NAVIGATION_ADMIN_GROUP_NAME);
         const nonAdminGroups = uniqueGroupsArray.filter(g => g !== NAVIGATION_ADMIN_GROUP_NAME);
-        const uniqueGroups = [...nonAdminGroups, ...adminGroups];
+        // Place null (ungrouped) first if there are ungrouped entries
+        const uniqueGroups: (string | null)[] = [
+            ...(hasUngroupedEntries ? [null] : []),
+            ...nonAdminGroups,
+            ...adminGroups
+        ];
 
         return {
             allowDragAndDrop: plugins?.some(plugin => plugin.homePage?.allowDragAndDrop) ?? false,
@@ -682,12 +689,12 @@ async function resolveCMSViews(
     return resolvedViews;
 }
 
-function getGroup(collectionOrView: EntityCollection<any, any> | CMSView) {
+function getGroup(collectionOrView: EntityCollection<any, any> | CMSView): string | null {
     const trimmed = collectionOrView.group?.trim();
     if (!trimmed || trimmed === "") {
-        return NAVIGATION_DEFAULT_GROUP_NAME;
+        return null;
     }
-    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
+    return trimmed;
 }
 
 function areCollectionListsEqual(a: EntityCollection[], b: EntityCollection[]) {
@@ -823,7 +830,7 @@ function computeNavigationGroups({
     (collections ?? []).forEach(collection => {
         const entry = collection.id ?? collection.path;
         if (!assignedEntries.has(entry)) {
-            const groupName = getGroup(collection);
+            const groupName = getGroup(collection) ?? "__default__";
             if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
             unassignedGroupMap[groupName].push(entry);
         }
@@ -833,7 +840,7 @@ function computeNavigationGroups({
     (views ?? []).forEach(view => {
         const entry = view.path;
         if (!assignedEntries.has(entry)) {
-            const groupName = getGroup(view);
+            const groupName = getGroup(view) ?? "__default__";
             if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
             unassignedGroupMap[groupName].push(entry);
         }
@@ -861,7 +868,7 @@ function computeNavigationGroups({
 
         // Add collections
         (collections ?? []).forEach(collection => {
-            const name = getGroup(collection);
+            const name = getGroup(collection) ?? "__default__";
             const entry = collection.id ?? collection.path;
             if (!groupMap[name]) groupMap[name] = [];
             groupMap[name].push(entry);
@@ -869,7 +876,7 @@ function computeNavigationGroups({
 
         // Add views
         (views ?? []).forEach(view => {
-            const name = getGroup(view);
+            const name = getGroup(view) ?? "__default__";
             const entry = view.path;
             if (!groupMap[name]) groupMap[name] = [];
             groupMap[name].push(entry);

package/src/hooks/useCollapsedGroups.ts

@@ -10,7 +10,7 @@ const STORAGE_KEY_PREFIX = "firecms-collapsed-groups";
  * @param groupNames - Array of group names to track
  * @param namespace - Namespace for localStorage key (e.g., "home", "drawer") to allow independent state
  */
-export function useCollapsedGroups(groupNames: string[], namespace: string = "default") {
+export function useCollapsedGroups(groupNames: (string | null)[], namespace: string = "default") {
     const storageKey = `${STORAGE_KEY_PREFIX}-${namespace}`;
 
     // Load collapsed groups from localStorage on mount
@@ -37,7 +37,7 @@ export function useCollapsedGroups(groupNames: string[], namespace: string = "de
         // Only clean up if we have actual groups loaded (avoid cleaning up during initial load)
         if (groupNames.length === 0) return;
 
-        const currentGroupNames = new Set(groupNames);
+        const currentGroupNames = new Set(groupNames.map(g => g ?? "__default__"));
 
         setCollapsedGroups(prev => {
             const cleaned = Object.fromEntries(
@@ -56,12 +56,13 @@ export function useCollapsedGroups(groupNames: string[], namespace: string = "de
         });
     }, [groupNames]);
 
-    const isGroupCollapsed = useCallback((name: string) => {
-        return !!collapsedGroups[name];
+    const isGroupCollapsed = useCallback((name?: string | null) => {
+        return !!collapsedGroups[name ?? "__default__"];
     }, [collapsedGroups]);
 
-    const toggleGroupCollapsed = useCallback((name: string) => {
-        setCollapsedGroups(prev => ({ ...prev, [name]: !prev[name] }));
+    const toggleGroupCollapsed = useCallback((name?: string | null) => {
+        const key = name ?? "__default__";
+        setCollapsedGroups(prev => ({ ...prev, [key]: !prev[key] }));
     }, []);
 
     return {

package/src/hooks/useTranslation.ts

@@ -0,0 +1,31 @@
+import { useTranslation as useI18nTranslation } from "react-i18next";
+
+const FIRECMS_NS = "firecms_core";
+
+/**
+ * Internal hook for translating FireCMS UI strings.
+ *
+ * Uses the `firecms_core` i18next namespace that is initialised by
+ * `FireCMSi18nProvider`. Do NOT use `react-i18next` directly in internal
+ * components — always go through this hook so the namespace is consistent.
+ *
+ * @example
+ * const { t } = useTranslation();
+ * <Button>{t("save")}</Button>
+ *
+ * @internal
+ */
+export function useTranslation() {
+    const { t, i18n } = useI18nTranslation(FIRECMS_NS);
+
+    /**
+     * Typed translation function scoped to FirecmsTranslations keys.
+     * Also supports i18next interpolation variables, e.g.
+     *   t("add_to_field", { fieldName: "Tags" })
+     *   t("error_deleting", { message: err.message })
+     */
+    const typedT = (key: string, vars?: Record<string, string>): string =>
+        t(key, vars) as string;
+
+    return { t: typedT, i18n };
+}