@firecms/core 3.0.0-alpha.79 → 3.0.0-alpha.80

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-alpha.79",
+  "version": "3.0.0-alpha.80",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,7 +38,7 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-alpha.79",
+    "@firecms/ui": "^3.0.0-alpha.80",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -107,7 +107,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "f41d941643af2a0f25d15f5aa85d05b2ab65228c",
+  "gitHead": "60fbe594a5ad36fa5a47ba279ef3f55014fe823f",
   "publishConfig": {
     "access": "public"
   }

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useMemo } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef } from "react";
 import equal from "react-fast-compare";
 import {
     AdditionalFieldDelegate,
@@ -29,6 +29,7 @@ import { DateTimeFilterField } from "./filters/DateTimeFilterField";
 import { CustomFieldValidator } from "../../form/validation";
 import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
+import { useOutsideAlerter } from "@firecms/ui";
 
 const DEFAULT_STATE = {} as any;
 
@@ -114,6 +115,8 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
          textSearchLoading
      }: EntityCollectionTableProps<M>) {
 
+        const ref = useRef<HTMLDivElement>(null);
+
         const largeLayout = useLargeLayout();
         const disabledFilterChange = Boolean(forceFilter);
         const selectedEntities = selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities;
@@ -135,6 +138,14 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                 setItemCount?.(itemCount + pageSize);
         };
 
+        useOutsideAlerter(ref,
+            () => {
+                if (selectedCell) {
+                    unselect();
+                }
+            },
+            Boolean(selectedCell));
+
         const resetPagination = useCallback(() => {
             setItemCount?.(pageSize);
         }, [pageSize]);
@@ -366,7 +377,8 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                 }}
             >
 
-                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+                <div ref={ref}
+                     className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
 
                     <CollectionTableToolbar
                         forceFilter={disabledFilterChange}

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -190,7 +190,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
                     height,
                     entity,
                     cellRect,
-                    propertyKey: propertyKey as Extract<keyof M, string>,
+                    propertyKey: propertyKey as Extract<keyof M, string>
                 });
             }
         }, [entity, height, propertyKey, select, width]);

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

@@ -4,7 +4,7 @@ import useMeasure from "react-use-measure";
 
 import { VirtualTableSize } from "../../VirtualTable";
 import { getRowHeight } from "../../VirtualTable/common";
-import { useOutsideAlerter, cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 
 interface EntityTableCellProps {
@@ -90,13 +90,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
 
         const [measureRef, bounds] = useMeasure();
         const ref = useRef<HTMLDivElement>(null);
-        useOutsideAlerter(ref, () => {
-            if (selected && onSelect) {
-                onSelect(undefined);
-            }
-        }, Boolean(selected && onSelect));
 
-        const [isOverflowing, setIsOverflowing] = useState<boolean>(false);
         const maxHeight = useMemo(() => getRowHeight(size), [size]);
 
         const [onHover, setOnHover] = useState(false);
@@ -167,13 +161,12 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
             event.stopPropagation();
         }, [onSelectCallback]);
 
-        useEffect(() => {
+        const isOverflowing = useMemo(() => {
             if (bounds) {
-                const newOverflowingValue = bounds.height > maxHeight;
-                if (isOverflowing !== newOverflowingValue)
-                    setIsOverflowing(newOverflowingValue);
+                return bounds.height > maxHeight;
             }
-        }, [bounds, isOverflowing, maxHeight]);
+            return false;
+        }, [bounds, maxHeight]);
 
         const isSelected = !showError && selected;
 
@@ -247,17 +240,18 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
 
             </div>
         );
-    }, (a, b) =>
-        a.error === b.error &&
-        a.value === b.value &&
-        a.disabled === b.disabled &&
-        a.saved === b.saved &&
-        a.allowScroll === b.allowScroll &&
-        a.align === b.align &&
-        a.size === b.size &&
-        a.disabledTooltip === b.disabledTooltip &&
-        a.width === b.width &&
-        a.showExpandIcon === b.showExpandIcon &&
-        a.removePadding === b.removePadding &&
-        a.fullHeight === b.fullHeight &&
-        a.selected === b.selected) as React.FunctionComponent<EntityTableCellProps>;
+    }, (a, b) => {
+        return a.error === b.error &&
+            a.value === b.value &&
+            a.disabled === b.disabled &&
+            a.saved === b.saved &&
+            a.allowScroll === b.allowScroll &&
+            a.align === b.align &&
+            a.size === b.size &&
+            a.disabledTooltip === b.disabledTooltip &&
+            a.width === b.width &&
+            a.showExpandIcon === b.showExpandIcon &&
+            a.removePadding === b.removePadding &&
+            a.fullHeight === b.fullHeight &&
+            a.selected === b.selected;
+    }) as React.FunctionComponent<EntityTableCellProps>;

package/src/hooks/useLargeLayout.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 
+type LayoutListener = (isLargeLayout: boolean) => void;
+
 const breakpoints = {
     xs: 0,
     sm: 640,
@@ -9,26 +11,87 @@ const breakpoints = {
     "2xl": 1536,
     "3xl": 1920
 }
-export const useLargeLayout = (breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean => {
-    const [isLargeLayout, setIsLargeLayout] = useState<boolean>(false);
+
+// Global state and listeners array
+let isLargeLayoutGlobal = checkLargeLayout("lg"); // Default value
+const listeners: LayoutListener[] = [];
+
+// Utility to notify all listeners
+const notifyListeners = () => {
+    listeners.forEach(listener => listener(isLargeLayoutGlobal));
+};
+
+// Listen to resize events once, at a global level
+window.addEventListener("resize", () => {
+    const newIsLargeLayout = checkLargeLayout("lg");
+    if (newIsLargeLayout !== isLargeLayoutGlobal) {
+        isLargeLayoutGlobal = newIsLargeLayout;
+        notifyListeners();
+    }
+});
+
+export const useLargeLayout = () => {
+    const [isLargeLayout, setIsLargeLayout] = useState(isLargeLayoutGlobal);
 
     useEffect(() => {
-        const handleResize = () => {
-            const matched = window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
-            setIsLargeLayout(matched);
+        // Listener function to update component state
+        const listener: LayoutListener = (newIsLargeLayout) => {
+            setIsLargeLayout(newIsLargeLayout);
         };
 
-        // Set initial state
-        handleResize();
+        // Register listener
+        listeners.push(listener);
 
-        // Set up event listener for resize events
-        window.addEventListener("resize", handleResize);
+        // Initial state
+        setIsLargeLayout(isLargeLayoutGlobal);
 
-        // Clean up event listener when component unmounts
+        // Clean up by removing the listener
         return () => {
-            window.removeEventListener("resize", handleResize);
+            const index = listeners.indexOf(listener);
+            if (index > -1) {
+                listeners.splice(index, 1);
+            }
         };
     }, []);
 
     return isLargeLayout;
 };
+
+function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean {
+    return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
+}
+
+// import { useEffect, useState } from "react";
+//
+// const breakpoints = {
+//     xs: 0,
+//     sm: 640,
+//     md: 768,
+//     lg: 1024,
+//     xl: 1280,
+//     "2xl": 1536,
+//     "3xl": 1920
+// }
+// export const useLargeLayout = (breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean => {
+//     const [isLargeLayout, setIsLargeLayout] = useState<boolean>(false);
+//
+//     useEffect(() => {
+//         const handleResize = () => {
+//             const matched = window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
+//             setIsLargeLayout(matched);
+//         };
+//
+//         // Set initial state
+//         handleResize();
+//
+//         // Set up event listener for resize events
+//         window.addEventListener("resize", handleResize);
+//
+//         // Clean up event listener when component unmounts
+//         return () => {
+//             window.removeEventListener("resize", handleResize);
+//         };
+//     }, []);
+//
+//     return isLargeLayout;
+// };

package/src/internal/useBuildSideDialogsController.tsx

@@ -4,6 +4,7 @@ import { SideDialogPanelProps, SideDialogsController } from "../types";
 import equal from "react-fast-compare"
 
 export function useBuildSideDialogsController(): SideDialogsController {
+    console.log("useBuildSideDialogsController");
 
     const location = useLocation();
     const navigate = useNavigate();