@firecms/core 3.0.0-canary.29 → 3.0.0-canary.290

package/src/components/PropertyCollectionView.tsx

@@ -0,0 +1,329 @@
+import React from "react";
+import { defaultBorderMixin, Typography } from "@firecms/ui";
+import { PreviewSize, PropertyPreview } from "../preview";
+import { ResolvedProperties, ResolvedProperty } from "../types";
+import { getValueInPath } from "../util";
+
+/**
+ * Build a readable label for a path and resolve the property
+ * Supports map and array (including arrays of maps)
+ */
+export function buildPropertyLabelAndGetProperty(
+    properties: ResolvedProperties,
+    key: string
+): { label: string; property: ResolvedProperty | undefined } {
+    if (!key) return {
+        label: "",
+        property: undefined
+    };
+
+    // Parse "a[0].b.c[2]" -> ["a", 0, "b", "c", 2]
+    const segments: (string | number)[] = [];
+    const re = /([^[.\]]+)|\[(\d+)\]/g;
+    let m: RegExpExecArray | null;
+    while ((m = re.exec(key)) !== null) {
+        if (m[1] !== undefined) segments.push(m[1]);
+        else if (m[2] !== undefined) segments.push(Number(m[2]));
+    }
+
+    let currentProps: ResolvedProperties | undefined = properties;
+    let currentProp: ResolvedProperty | undefined;
+    let lastLabel = "";
+
+    const getArrayOfProp = (p?: ResolvedProperty): ResolvedProperty | undefined => {
+        if (!p || p.dataType !== "array") return undefined;
+        return Array.isArray(p.of) ? (p.of[0] as ResolvedProperty) : (p.of as ResolvedProperty | undefined);
+    };
+
+    for (const seg of segments) {
+        if (typeof seg === "number") {
+            // Last segment label should be the index itself
+            lastLabel = `[${seg}]`;
+
+            // Move schema context into the array element
+            if (currentProp?.dataType === "array") {
+                currentProp = getArrayOfProp(currentProp);
+                if (currentProp?.dataType === "map" && currentProp.properties) {
+                    currentProps = currentProp.properties as ResolvedProperties;
+                } else {
+                    currentProps = undefined;
+                }
+            } else {
+                // Index without array schema context
+                currentProp = undefined;
+                currentProps = undefined;
+            }
+            continue;
+        }
+
+        // seg is a string key
+        if (currentProps && (currentProps as any)[seg]) {
+            const nextProp = (currentProps as any)[seg] as ResolvedProperty;
+            currentProp = nextProp;
+            // Last segment label should be the property name (or the raw key)
+            lastLabel = nextProp.name || String(seg);
+
+            if (nextProp.dataType === "map" && nextProp.properties) {
+                currentProps = nextProp.properties as ResolvedProperties;
+            } else if (nextProp.dataType === "array") {
+                // Keep array prop; the next segment (index) will step into its element schema
+                currentProps = undefined;
+            } else {
+                currentProps = undefined;
+            }
+        } else {
+            // Unknown key or no schema context
+            currentProp = undefined;
+            currentProps = undefined;
+            lastLabel = String(seg);
+        }
+    }
+
+    return {
+        label: lastLabel,
+        property: currentProp
+    };
+}
+
+const pathEndsWithIndex = (p: string) => /\[\d+\]$/.test(p);
+
+/**
+ * Improved simple layout for nested changes:
+ * - Map or Array-of-Map -> section header + indented rows
+ * - Leaf or Array-of-Primitives -> single row with label and value
+ */
+export const PropertyCollectionView = ({
+                                           data,
+                                           properties,
+                                           baseKey = "",
+                                           suppressHeader = false,
+                                           size = "small"
+                                       }: {
+    data: any;
+    properties: ResolvedProperties;
+    baseKey?: string;
+    suppressHeader?: boolean;
+    size?: PreviewSize;
+}) => {
+
+    const isTopLevel = !!baseKey && !baseKey.includes(".") && !baseKey.includes("[");
+
+    // Arrays
+    if (Array.isArray(data)) {
+        const {
+            label: arrayLabel,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        const ofProp = property?.dataType === "array"
+            ? (Array.isArray(property.of) ? property.of[0] : property.of) as ResolvedProperty | undefined
+            : undefined;
+
+        const isArrayOfMaps = ofProp?.dataType === "map";
+        const isArrayOfPrimitives = property?.dataType === "array" && ofProp && ofProp.dataType !== "map";
+
+        // Array of primitives -> single row
+        if (baseKey && property && isArrayOfPrimitives) {
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {arrayLabel}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Array of maps or unknown -> array header + combined item header (MapName [index]) then content
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {baseKey && arrayLabel && !suppressHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}>
+                        {arrayLabel}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {data.map((item, index) => {
+                        if (item === null || item === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}[${index}]` : `[${index}]`;
+
+                        // Combined header text
+                        const itemHeader = isArrayOfMaps && ofProp?.name
+                            ? `${ofProp.name} [${index}]`
+                            : `[${index}]`;
+
+                        return (
+                            <div key={currentKey} className="py-1">
+                                <Typography variant="caption"
+                                            color={"secondary"}
+                                            component={"span"}>
+                                    {itemHeader}
+                                </Typography>
+                                <div className={`pl-4 mt-1 border-l ${defaultBorderMixin}`}>
+                                    <PropertyCollectionView
+                                        data={item}
+                                        properties={properties}
+                                        baseKey={currentKey}
+                                        suppressHeader={true} // don’t repeat the inner map header
+                                        size={size}
+                                    />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Objects (maps or plain objects)
+    if (typeof data === "object" && data !== null) {
+        const {
+            label,
+            property
+        } = baseKey
+            ? buildPropertyLabelAndGetProperty(properties, baseKey)
+            : {
+                label: "",
+                property: undefined as ResolvedProperty | undefined
+            };
+
+        // Non-map leaf-like object -> single row
+        if (baseKey && (!property || property.dataType !== "map" || !property.properties)) {
+            if (!property) return null;
+            return (
+                <div
+                    className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            {label}
+                        </Typography>
+                    </div>
+                    <div className="col-span-8">
+                        <PropertyPreview propertyKey={baseKey}
+                                         value={data}
+                                         property={property}
+                                         size={size}/>
+                    </div>
+                </div>
+            );
+        }
+
+        // Map with defined properties -> show map header only if not suppressed
+        const showMapHeader =
+            baseKey &&
+            !suppressHeader &&
+            property?.dataType === "map" &&
+            (property.name || !pathEndsWithIndex(baseKey));
+
+        const headerText = property?.name || label;
+
+        return (
+            <div className={`${isTopLevel ? "py-4" : "py-1"} ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                {showMapHeader && (
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                    >
+                        {headerText}
+                    </Typography>
+                )}
+                <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
+                    {Object.entries(data).map(([key, value]) => {
+                        if (value === null || value === undefined) return null;
+                        const currentKey = baseKey ? `${baseKey}.${key}` : key;
+                        return (
+                            <PropertyCollectionView
+                                key={currentKey}
+                                data={value}
+                                properties={properties}
+                                baseKey={currentKey}
+                                size={size}
+                            />
+                        );
+                    })}
+                </div>
+            </div>
+        );
+    }
+
+    // Primitives
+    if (baseKey) {
+        const {
+            label,
+            property
+        } = buildPropertyLabelAndGetProperty(properties, baseKey);
+        if (!property) return null;
+        return (
+            <div
+                className={`grid grid-cols-12 gap-x-4 ${isTopLevel ? "py-4" : "py-2"} items-start ${isTopLevel ? `border-b ${defaultBorderMixin} last:border-b-0` : ""}`}>
+                <div className="col-span-4 pr-2">
+                    <Typography variant="caption"
+                                color={"secondary"}
+                                component={"span"}
+                                className="break-words">
+                        {label}
+                    </Typography>
+                </div>
+                <div className="col-span-8">
+                    <PropertyPreview propertyKey={baseKey}
+                                     value={data}
+                                     property={property}
+                                     size={size}/>
+                </div>
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export function buildDataFromPaths(values: object, paths: string[]): object {
+    const result = {};
+    paths.forEach(path => {
+        const value = getValueInPath(values, path);
+        if (value === undefined) return;
+
+        // lodash.set would be perfect here
+        const segments = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+        let current: any = result;
+        segments.forEach((segment, index) => {
+            if (index === segments.length - 1) {
+                current[segment] = value;
+            } else {
+                const nextSegment = segments[index + 1];
+                const isNextAnIndex = /^\d+$/.test(nextSegment);
+                if (!current[segment]) {
+                    if (isNextAnIndex) {
+                        current[segment] = [];
+                    } else {
+                        current[segment] = {};
+                    }
+                }
+                current = current[segment];
+            }
+        });
+    });
+    return result;
+}

package/src/components/PropertyConfigBadge.tsx

@@ -2,16 +2,22 @@ import { getIconForWidget } from "../util";
 import { PropertyConfig } from "../types";
 import { getDefaultFieldConfig } from "../core";
 
-export function PropertyConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
-    const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
+export function PropertyConfigBadge({
+                                        propertyConfig,
+                                        disabled
+                                    }: {
+    propertyConfig: PropertyConfig | undefined,
+    disabled?: boolean
+}): React.ReactNode {
+    const classes = "h-8 w-8 flex items-center justify-center rounded-full shadow text-white " + (disabled ? "bg-surface-400 dark:bg-surface-600" : "");
 
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
 
     return <div
         className={classes}
         style={{
-            background: propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888"
+            background: !disabled ? (propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888") : undefined
         }}>
-        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")}
+        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "small") : getIconForWidget(defaultPropertyConfig, "small")}
     </div>
 }

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,47 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+                                          propertyKey,
+                                          className,
+                                          children,
+                                      }: {
+    propertyKey: string,
+    className?: string,
+    children: React.ReactNode
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+                    delayDuration={800}
+                    side={"top"}
+                    align={"start"}
+                    sideOffset={8}
+                    className={className}>
+            {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-surface-accent-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                                 className={"text-white"}
+                                 onClick={useCallback(() => {
+                                     navigator.clipboard.writeText(propertyKey);
+                                     setCopied(true);
+                                     setTimeout(() => setCopied(false), 2000);
+                                 }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -4,7 +4,7 @@ import { CollectionSize, Entity, EntityCollection, FilterValues } from "../../ty
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 import {
     useAuthController,
@@ -16,7 +16,7 @@ import {
 } from "../../hooks";
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
-import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
+import { canCreateEntity, IconForView, resolveCollection } from "../../util";
 import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
@@ -101,13 +101,14 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         maxSelection,
     }: ReferenceSelectionInnerProps<M>) {
 
+    const authController = useAuthController();
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
 
-    const fullPath = navigation.resolveAliasesFrom(pathInput);
+    const fullPath = navigation.resolveIdsFrom(pathInput);
 
     const dataSource = useDataSource(collection);
 
@@ -233,7 +234,9 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             selectionEnabled={multiselect}
             hideId={collection?.hideIdFromCollection}
             fullPath={fullPath}
-            selectionController={selectionController}/>;
+            selectionController={selectionController}
+            openEntityMode={"side_panel"}
+        />;
 
     };
 
@@ -247,23 +250,22 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             error={"Could not find collection with id " + collection}/>
     }
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const resolvedCollection = useMemo(() => resolveCollection({
         collection: collection,
         path: fullPath,
         values: {},
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const tableController = useDataSourceEntityCollectionTableController<M>({
+    const tableController = useDataSourceTableController<M>({
         fullPath,
         collection,
         entitiesDisplayedFirst,
-        forceFilter
+        forceFilter,
+        updateUrl: false,
     });
 
     const {
@@ -272,7 +274,6 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         onTextSearchClick,
         textSearchEnabled
     } =
-        // eslint-disable-next-line react-hooks/rules-of-hooks
         useTableSearchHelper({
             collection,
             fullPath,
@@ -288,12 +289,21 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         textSearchLoading={textSearchLoading}
                         onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
                         textSearchEnabled={textSearchEnabled}
+                        additionalFields={collection.additionalFields}
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}
+                        enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
-                        title={<Typography variant={"subtitle2"}>
-                            {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
+                        openEntityMode={"side_panel"}
+                        title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
+                            <IconForView
+                                size={"small"}
+                                collectionOrView={collection}
+                                className={"text-surface-300 dark:text-surface-600"}/>
+                            {collection.singularName
+                                ? `Select ${collection.singularName}`
+                                : `Select from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={resolvedCollection.properties}

package/src/components/ReferenceWidget.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference, FilterValues } from "../type
 import { getReferenceFrom } from "../util";
 import { PreviewSize, ReferencePreview } from "../preview";
 import { useNavigationController, useReferenceDialog } from "../hooks";
-import { Button, cn } from "@firecms/ui";
+import { Button, cls } from "@firecms/ui";
 
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
     name?: string,
@@ -27,6 +27,8 @@ export type ReferenceWidgetProps<M extends Record<string, any>> = {
     forceFilter?: FilterValues<string>;
     size: PreviewSize;
     className?: string;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 /**
@@ -43,7 +45,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
                                                                    previewProperties,
                                                                    forceFilter,
                                                                    size,
-                                                                   className
+                                                                   className,
+                                                                   includeId,
+                                                                   includeEntityLink
                                                                }: ReferenceWidgetProps<M>) {
 
     const navigationController = useNavigationController();
@@ -52,16 +56,15 @@ export function ReferenceWidget<M extends Record<string, any>>({
         return navigationController.getCollection(path);
     }, [path, navigationController.getCollection]);
 
-    // if (!collection) {
-    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    // }
-
     const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
         if (disabled)
             return;
         if (onReferenceSelected) {
             const reference = entity ? getReferenceFrom(entity) : null;
-            onReferenceSelected?.({ reference, entity });
+            onReferenceSelected?.({
+                reference,
+                entity
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -70,7 +73,10 @@ export function ReferenceWidget<M extends Record<string, any>>({
             return;
         if (onMultipleReferenceSelected) {
             const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
-            onMultipleReferenceSelected({ references, entities });
+            onMultipleReferenceSelected({
+                references,
+                entities
+            });
         }
     }, [disabled, onReferenceSelected]);
 
@@ -110,7 +116,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
                     reference={ref}
                     disabled={disabled}
                     previewProperties={previewProperties}
-                    size={size}/>
+                    size={size}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}/>
             })}
         </div>
     } else if (value?.isEntityReference && value?.isEntityReference()) {
@@ -119,10 +127,12 @@ export function ReferenceWidget<M extends Record<string, any>>({
             onClick={onEntryClick}
             disabled={disabled}
             previewProperties={previewProperties}
-            size={size}/>
+            size={size}
+            includeId={includeId}
+            includeEntityLink={includeEntityLink}/>
 
     }
-    return <div className={cn("text-sm font-medium text-gray-500",
+    return <div className={cls("text-sm font-medium",
         "min-w-80 flex flex-col gap-4",
         "relative transition-colors duration-200 ease-in rounded font-medium",
         disabled ? "bg-opacity-50" : "hover:bg-opacity-75",

package/src/components/SearchIconsView.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 
 import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
-import { icon_synonyms, iconsSearch } from "../util";
+import { iconSynonyms, iconsSearch } from "../util";
 
 const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
-if (process.env.NODE_ENV !== "production") {
-    Object.keys(icon_synonyms).forEach((icon: string) => {
+if (iconSynonyms && process.env.NODE_ENV !== "production") {
+    Object.keys(iconSynonyms).forEach((icon: string) => {
         if (!iconKeys.includes(icon)) {
-            console.warn(`The icon ${icon} no longer exists. Remove it from \`icon_synonyms\``);
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`iconSynonyms\``);
         }
     });
 }
@@ -31,7 +31,9 @@ export function SearchIconsView({
                 setKeys(null);
             } else {
                 const searchResult = iconsSearch.search(value);
-                setKeys(searchResult.map((e: any) => e.key));
+                const limit = 50;
+                const limited = searchResult.slice(0, limit);
+                setKeys(limited.map((e) => e.item.key));
             }
         }, UPDATE_SEARCH_INDEX_WAIT_MS), []
     );
@@ -48,7 +50,7 @@ export function SearchIconsView({
     return (
         <>
             <SearchBar
-                autoFocus
+                autoFocus={false}
                 innerClassName={"w-full sticky top-0 z-10"}
                 onTextSearch={(value?: string) => setQuery(value ?? "")}
                 placeholder="Search for more icons…"
@@ -57,7 +59,8 @@ export function SearchIconsView({
             <div className={"flex max-w-full flex-wrap mt-4"}>
                 {icons.map((icon: string) => {
                     return (
-                        <Tooltip title={icon} key={icon}>
+                        <Tooltip title={icon} key={icon}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 toggled={selectedIcon === icon}