@firecms/core 3.0.0-beta.12 → 3.0.0-beta.14

package/src/components/ClearFilterSortButton.tsx

@@ -18,7 +18,7 @@ export function ClearFilterSortButton({
     if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
         let label;
         if (filterIsSet && sortIsSet) {
-            label = "Clear filter and sort";
+            label = "Clear filter/sort";
         } else if (filterIsSet) {
             label = "Clear filter";
         } else {

package/src/components/ConfirmationDialog.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton } from "@firecms/ui";
 
 export function ConfirmationDialog({
-                                             open,
-                                             onAccept,
-                                             onCancel,
-                                             title,
-                                             loading,
-                                             body
-                                         }: {
+                                       open,
+                                       onAccept,
+                                       onCancel,
+                                       title,
+                                       loading,
+                                       body
+                                   }: {
     open: boolean,
     onAccept: () => void,
     onCancel: () => void,
@@ -38,7 +38,7 @@ export function ConfirmationDialog({
                     type="submit"
                     loading={loading}
                     onClick={onAccept}
-                >
+                    autoFocus>
                     Ok
                 </LoadingButton>
             </DialogActions>

package/src/components/DeleteEntityDialog.tsx

@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
+    useAuthController,
     useCustomizationController,
     useDataSource,
     useFireCMSContext,
@@ -34,7 +35,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                                                                       onMultipleEntitiesDelete,
                                                                       path
                                                                   }: DeleteEntityDialogProps<M>) {
-
+    const authController = useAuthController();
     const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
@@ -50,7 +51,8 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -165,19 +165,21 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
             {!hideId && size !== "xs" && (
                 <div
-                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center flex items-center justify-center gap-1"
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1"
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-                    {hasDraft && <Tooltip title={"Unsaved changes"} className={"inline"}>
+                    {hasDraft && <Tooltip title={"Local unsaved changes"} className={"inline"}>
                         <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
                             <EditIcon size={12}/>
                         </Chip>
                     </Tooltip>}
-                    {entity
-                        ? entity.id
-                        : <Skeleton/>
-                    }
+                    <span className="min-w-0 truncate text-center">
+                        {entity
+                            ? entity.id
+                            : <Skeleton/>
+                        }
+                    </span>
                 </div>
             )}
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -394,7 +394,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     size={size}
                                     multiselect={true}
                                     path={arrayProperty.of.path}
-                                    previewProperties={arrayProperty.of.previewProperties}
+                                    previewProperties={arrayProperty.of.previewKeys}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
                                     includeId={arrayProperty.of.includeId}

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

@@ -55,7 +55,7 @@ export function CollectionTableToolbar({
         <Tooltip title={"Table row size"} side={"right"} sideOffset={4}>
             <Select
                 value={size as string}
-                className="w-16 h-10"
+                className="w-16 ml-2"
                 size={"small"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}

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

@@ -5,6 +5,7 @@ import useMeasure from "react-use-measure";
 import { cls, DoNotDisturbOnIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 import { getRowHeight, TableSize } from "../../common/table_height";
+import { ErrorTooltip } from "../../ErrorTooltip";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -183,7 +184,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     ? "border-primary"
                     : "border-transparent";
 
-        return (
+        const result = <>
             <div
                 className={cls(
                     "transition-colors duration-100 ease-in-out",
@@ -241,7 +242,17 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                     </div>}
 
             </div>
-        );
+        </>;
+        if (showError) {
+            return (
+                <ErrorTooltip
+                    align={"start"}
+                    title={error?.message ?? "Error"}>
+                    {result}
+                </ErrorTooltip>
+            );
+        }
+        return result;
     }, (a, b) => {
         return a.error === b.error &&
             a.value === b.value &&

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

@@ -17,11 +17,10 @@ import { Formex, useCreateFormex } from "@firecms/formex";
 import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
-import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
-import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
+import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
@@ -71,7 +70,7 @@ export function PopupFormFieldLoading<M extends Record<string, any>>({
                 collection: inputCollection
             }).then(setEntity);
         }
-    }, [entityId, inputCollection]);
+    }, [entityId, inputCollection, dataSource, path]);
 
     if (!entity) return null;
     return <PopupFormFieldInternal {...{
@@ -107,6 +106,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 }) {
 
     const fireCMSContext = useFireCMSContext();
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     const [savingError, setSavingError] = React.useState<any>();
@@ -121,7 +121,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             path,
             values: entity?.values,
             entityId,
-            propertyConfigs: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController
         })
         : undefined;
 
@@ -145,33 +146,35 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         };
     }, [cellRect, windowSize.height, windowSize.width]);
 
-    const normalizePosition = useCallback(({
-                                               x,
-                                               y
-                                           }: { x: number, y: number }) => {
-
-        const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!draggableBoundingRect)
-            throw Error("normalizePosition called before draggableBoundingRect is set");
-
+    const normalizePosition = useCallback((
+        pos: { x: number, y: number },
+        draggableBoundingRect: DOMRect,
+        currentWindowSize: { width: number, height: number }
+    ) => {
+        if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return pos;
+        }
         return {
-            x: Math.max(0, Math.min(x, windowSize.width - draggableBoundingRect.width)),
-            y: Math.max(0, Math.min(y, windowSize.height - draggableBoundingRect.height))
+            x: Math.max(0, Math.min(pos.x, currentWindowSize.width - draggableBoundingRect.width)),
+            y: Math.max(0, Math.min(pos.y, currentWindowSize.height - draggableBoundingRect.height))
         };
-    }, [windowSize]);
+    }, []);
 
-    const updatePopupLocation = useCallback((position?: {
+    const updatePopupLocation = useCallback((newPositionCandidate?: {
         x: number,
         y: number
     }) => {
-
         const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!cellRect || !draggableBoundingRect) return;
-        // const newPosition = normalizePosition(position ?? getInitialLocation());
-        const newPosition = position ?? normalizePosition(getInitialLocation());
-        if (!popupLocation || newPosition.x !== popupLocation.x || newPosition.y !== popupLocation.y)
-            setPopupLocation(newPosition);
-    }, [cellRect, getInitialLocation, normalizePosition, popupLocation]);
+        if (!cellRect || !draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return;
+        }
+        const basePosition = newPositionCandidate ?? getInitialLocation();
+        const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect, windowSize);
+
+        if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) {
+            setPopupLocation(newNormalizedPosition);
+        }
+    }, [cellRect, getInitialLocation, normalizePosition, popupLocation, windowSize]);
 
     useDraggable({
         containerRef: draggableRef,
@@ -190,19 +193,25 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     useLayoutEffect(
         () => {
+            if (!cellRect || initialPositionSet.current) return;
+            // Ensure draggableRef is available and has dimensions before initial positioning
             const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-            if (!cellRect || !draggableBoundingRect || initialPositionSet.current) return;
+            if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+                // If not ready, perhaps wait or log. For now, just return.
+                // This might need a retry mechanism or ensure content is rendered first.
+                return;
+            }
             updatePopupLocation();
             initialPositionSet.current = true;
         },
-        [cellRect, updatePopupLocation, initialPositionSet.current]
+        [cellRect, updatePopupLocation] // Removed initialPositionSet.current from deps as it's a ref
     );
 
     useLayoutEffect(
         () => {
             updatePopupLocation(popupLocation);
         },
-        [windowSize, cellRect]
+        [windowSize, cellRect, updatePopupLocation, popupLocation]
     );
 
     const validationSchema = useMemo(() => {
@@ -216,9 +225,28 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     }, [collection, entityId, propertyKey, customFieldValidator]);
 
     const adaptResize = useCallback(() => {
+        // When the popup resizes, we want to re-evaluate its position
+        // based on its current location and new dimensions.
         return updatePopupLocation(popupLocation);
     }, [popupLocation, updatePopupLocation]);
 
+    // Setup ResizeObserver
+    useEffect(() => {
+        const element = draggableRef.current;
+        if (!element) return;
+
+        const observer = new ResizeObserver(() => {
+            adaptResize();
+        });
+
+        observer.observe(element);
+
+        return () => {
+            observer.unobserve(element);
+            observer.disconnect();
+        };
+    }, [adaptResize, draggableRef]);
+
     const saveValue = async (values: M) => {
         setSavingError(null);
         if (inputCollection && entity && onCellValueChange && propertyKey) {
@@ -273,6 +301,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         formex,
         status: "existing",
         openEntityMode: "side_panel",
+        disabled: false,
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as ResolvedProperties, propertyKey as string);
@@ -285,7 +314,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             underlyingValueHasChanged: false,
             context: formContext,
             partOfArray: false,
-            minimalistView: false,
+            minimalistView: true,
             autoFocus: open
         }
         : undefined;
@@ -369,7 +398,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             } cursor-grab overflow-visible`}
             ref={draggableRef}>
 
-            <ElementResizeListener onResize={adaptResize}/>
+            {/* ElementResizeListener removed from here */}
 
             <div
                 className="overflow-hidden">

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

@@ -1,9 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 
 interface DraggableProps {
     containerRef: React.RefObject<HTMLDivElement>,
     innerRef: React.RefObject<HTMLDivElement>,
-    // ref: React.RefObject<HTMLDivElement>,
     x?: number;
     y?: number;
     onMove: (params: { x: number, y: number }) => void,
@@ -22,7 +21,7 @@ export function useDraggable({
 
     const listeningRef = React.useRef(false);
 
-    const onMouseDown = (event: any) => {
+    const onMouseDown = useCallback((event: any) => {
         if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
             return;
         }
@@ -39,16 +38,17 @@ export function useDraggable({
         document.addEventListener("selectstart", onSelect);
         listeningRef.current = true;
         // event.stopPropagation();
-    };
-    const onMouseDownInner = (event: any) => {
+    }, [containerRef, onMove]);
+
+    const onMouseDownInner = useCallback((event: any) => {
         // @ts-ignore
         event.innerClicked = true;
-    };
+    }, [])
 
-    const onSelect = (event: any) => {
+    const onSelect = useCallback((event: any) => {
         event.preventDefault()
         event.stopPropagation();
-    };
+    }, [])
 
     const onMouseUp = (event: any) => {
         document.removeEventListener("mousemove", onMouseMove);
@@ -92,6 +92,6 @@ export function useDraggable({
             if (innerCurrent)
                 innerCurrent.removeEventListener("mousedown", onMouseDownInner);
         };
-    });
+    }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
 
 }

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -93,6 +93,10 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * It defaults to the collection path if not provided.
      */
     fullPath?: string;
+    /**
+     * Full path using navigation ids.
+     */
+    fullIdPath?: string;
     /**
      * If this is a subcollection, specify the parent collection ids.
      */
@@ -138,6 +142,7 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
                                                                      fullPath: fullPathProp,
+                                                                     fullIdPath,
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
@@ -146,10 +151,11 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+
         const context = useFireCMSContext();
+        const navigation = useNavigationController();
         const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
-        const navigation = useNavigationController();
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
         const userConfigPersistence = useUserConfigurationPersistence();
@@ -240,6 +246,7 @@ export const EntityCollectionView = React.memo(
             navigateToEntity({
                 navigation,
                 path,
+                fullIdPath,
                 sideEntityController,
                 openEntityMode,
                 collection,
@@ -259,6 +266,7 @@ export const EntityCollectionView = React.memo(
                 collection,
                 entityId: undefined,
                 path: fullPath,
+                fullIdPath,
                 sideEntityController,
                 navigation,
                 onClose: unselectNavigatedEntity
@@ -378,7 +386,8 @@ export const EntityCollectionView = React.memo(
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
-            propertyConfigs: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController,
         }), [collection, fullPath]);
 
         const getPropertyFor = useCallback(({
@@ -399,7 +408,8 @@ export const EntityCollectionView = React.memo(
                 path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
-                propertyConfigs: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController
             });
         }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
@@ -415,6 +425,7 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => (
                         <Button color={"primary"}
                                 variant={"outlined"}
+                                className={"max-w-full truncate justify-start"}
                                 startIcon={<KeyboardTabIcon size={"small"}/>}
                                 onClick={(event: any) => {
                                     event.stopPropagation();
@@ -424,6 +435,7 @@ export const EntityCollectionView = React.memo(
                                         entityId: entity.id,
                                         selectedTab: subcollection.id ?? subcollection.path,
                                         path: fullPath,
+                                        fullIdPath,
                                         navigation,
                                         sideEntityController
                                     })
@@ -527,7 +539,7 @@ export const EntityCollectionView = React.memo(
                     highlightEntity={setHighlightedEntity}
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
-                    fullPath={fullPath}
+                    fullPath={fullIdPath ?? fullPath}
                     actions={actions}
                     hideId={collection?.hideIdFromCollection}
                     onCollectionChange={updateLastDeleteTimestamp}
@@ -691,6 +703,7 @@ export const EntityCollectionView = React.memo(
                     getIdColumnWidth={getIdColumnWidth}
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
+                        fullIdPath={fullIdPath ?? fullPath}
                         collection={collection}/>}
                     openEntityMode={openEntityMode}
                 />
@@ -737,10 +750,13 @@ export const EntityCollectionView = React.memo(
             equal(a.defaultSize, b.defaultSize) &&
             equal(a.initialFilter, b.initialFilter) &&
             equal(a.initialSort, b.initialSort) &&
+            equal(a.includeJsonView, b.includeJsonView) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.openEntityMode, b.openEntityMode) &&
+            equal(a.exportable, b.exportable) &&
+            equal(a.history, b.history) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -807,10 +823,12 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
 
 function EntityIdHeaderWidget({
                                   collection,
-                                  path
+                                  path,
+                                  fullIdPath
                               }: {
     collection: EntityCollection,
-    path: string
+    path: string,
+    fullIdPath: string
 }) {
 
     const navigation = useNavigationController();
@@ -848,6 +866,7 @@ function EntityIdHeaderWidget({
                                   collection,
                                   entityId,
                                   path,
+                                  fullIdPath,
                                   sideEntityController,
                                   navigation
                               })
@@ -882,6 +901,7 @@ function EntityIdHeaderWidget({
                                                       collection,
                                                       entityId: id,
                                                       path,
+                                                      fullIdPath,
                                                       sideEntityController,
                                                       navigation
                                                   })

package/src/components/EntityJsonPreview.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { useModeController } from "../hooks";
+
+export function EntityJsonPreview({ values }: { values: object }) {
+    const code = JSON.stringify(values, null, "\t");
+    const { mode } = useModeController();
+    const preRef = useRef<HTMLPreElement>(null);
+
+    // Global keydown handler
+    // const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    //     // Check for Control (Windows/Linux) or Command (macOS) + "a":
+    //     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+    //         // If our code view is mounted, perform selection
+    //         if (preRef.current) {
+    //             e.preventDefault();
+    //             e.stopPropagation();
+    //
+    //             const selection = window.getSelection();
+    //             const range = document.createRange();
+    //             range.selectNodeContents(preRef.current);
+    //             if (selection) {
+    //                 selection.removeAllRanges();
+    //                 selection.addRange(range);
+    //             }
+    //         }
+    //     }
+    // }, []);
+
+    // // Attach the global keydown listener when component mounts,
+    // // and remove it when it unmounts.
+    // useEffect(() => {
+    //     document.addEventListener("keydown", handleGlobalKeyDown);
+    //     return () => {
+    //         document.removeEventListener("keydown", handleGlobalKeyDown);
+    //     };
+    // }, [handleGlobalKeyDown]);
+
+    return (
+        <Highlight
+            theme={mode === "dark" ? themes.vsDark : themes.github}
+            code={code}
+            language="json"
+        >
+            {({ style, tokens, getLineProps, getTokenProps }) => (
+                <pre
+                    // Bind the ref to our pre element so we can select its contents.
+                    ref={preRef}
+                    style={{
+                        ...style,
+                        backgroundColor: "inherit"
+                    }}
+                    className="max-w-6xl mx-auto p-8 rounded text-sm"
+                >
+          {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} className="text-wrap">
+                  {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token })} className="word-break" />
+                  ))}
+              </div>
+          ))}
+        </pre>
+            )}
+        </Highlight>
+    );
+}