@firecms/core 3.0.0-alpha.84 → 3.0.0-beta.2-pre.1

package/dist/types/datasource.d.ts

@@ -24,7 +24,7 @@ export interface FetchCollectionProps<M extends Record<string, any> = any> {
     collection?: EntityCollection<M> | ResolvedEntityCollection<M>;
     filter?: FilterValues<Extract<keyof M, string>>;
     limit?: number;
-    startAfter?: any[];
+    startAfter?: any;
     orderBy?: string;
     searchString?: string;
     order?: "desc" | "asc";
@@ -139,7 +139,7 @@ export interface DataSource {
     /**
      * Count the number of entities in a collection
      */
-    countEntities<M extends Record<string, any> = any>(props: FetchCollectionProps<M>): Promise<number>;
+    countEntities?<M extends Record<string, any> = any>(props: FetchCollectionProps<M>): Promise<number>;
     /**
      * Check if the given filter combination is valid
      * @param props
@@ -235,7 +235,7 @@ export interface DataSourceDelegate {
     /**
      * Count the number of entities in a collection
      */
-    countEntities<M extends Record<string, any> = any>(props: FetchCollectionDelegateProps<M>): Promise<number>;
+    countEntities?<M extends Record<string, any> = any>(props: FetchCollectionDelegateProps<M>): Promise<number>;
     /**
      * Check if the given filter combination is valid
      * @param props

package/dist/types/entity_callbacks.d.ts

@@ -53,7 +53,7 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
      *
      * @param idUpdateProps
      */
-    onIdUpdate?(idUpdateProps: EntityIdUpdateProps<M>): string;
+    onIdUpdate?(idUpdateProps: EntityIdUpdateProps<M>): string | Promise<string>;
 };
 /**
  * Parameters passed to hooks when an entity is fetched

package/dist/util/strings.d.ts

@@ -3,4 +3,4 @@ export declare const toSnakeCase: (str: string) => string;
 export declare function randomString(strLength?: number): string;
 export declare function randomColor(): string;
 export declare function slugify(text?: string, separator?: string, lowercase?: boolean): string;
-export declare function unslugify(slug: string): string;
+export declare function unslugify(slug?: string): string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-alpha.84",
+  "version": "3.0.0-beta.2-pre.1",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -38,11 +38,11 @@
     "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
   },
   "dependencies": {
-    "@firecms/ui": "^3.0.0-alpha.84",
+    "@firecms/ui": "^3.0.0-beta.2-pre.1",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
-    "date-fns": "^3.0.6",
+    "date-fns": "^3.3.1",
     "formik": "^2.4.5",
     "history": "^5.3.0",
     "js-search": "^2.0.1",
@@ -73,41 +73,41 @@
   "devDependencies": {
     "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.6",
-    "@types/node": "^20.8.9",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.11.16",
     "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.2.45",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^18.2.54",
+    "@types/react-dom": "^18.2.18",
     "@types/react-measure": "^2.0.12",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^15.7.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "firebase": "^10.7.1",
+    "firebase": "^10.8.0",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
-    "react-router": "^6.21.0",
-    "react-router-dom": "^6.21.0",
-    "ts-jest": "^29.1.1",
+    "react-router": "^6.22.0",
+    "react-router-dom": "^6.22.0",
+    "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "tsd": "^0.28.1",
     "typescript": "^5.3.3",
-    "vite": "^4.5.1"
+    "vite": "^4.5.2"
   },
   "files": [
     "dist",
     "src"
   ],
-  "gitHead": "789225704404752ded55d0b750cd6ef76027d960",
+  "gitHead": "84f61eb3868f008f9c7c892881f12f0e79b566a0",
   "publishConfig": {
     "access": "public"
   }

package/src/components/ArrayContainer.tsx

@@ -3,7 +3,6 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
 
 import { getHashValue } from "../util";
-import useMeasure from "react-use-measure";
 import {
     AddIcon,
     Button,
@@ -12,9 +11,9 @@ import {
     IconButton,
     Menu,
     MenuItem,
-    MoreVertIcon,
     RemoveIcon,
-    Tooltip
+    Tooltip,
+    useOutsideAlerter
 } from "@firecms/ui";
 
 interface ArrayContainerProps<T> {
@@ -224,11 +223,6 @@ export function ArrayContainerItem({
                                        isDragging
                                    }: ArrayContainerItemProps) {
 
-    const [measureRef, bounds] = useMeasure();
-
-    const measuring = size !== "small" && bounds.height === 0;
-    const menuOverflow = size !== "small" && bounds.height < 100;
-
     const [onHover, setOnHover] = React.useState(false);
     const setOnHoverTrue = useCallback(() => setOnHover(true), []);
     const setOnHoverFalse = useCallback(() => setOnHover(false), []);
@@ -246,9 +240,7 @@ export function ArrayContainerItem({
     >
         <div
             className="flex items-start">
-            <div ref={measureRef}
-                 className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark"
-            >
+            <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
                 {buildEntry(index, internalId)}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}
@@ -256,8 +248,6 @@ export function ArrayContainerItem({
                               remove={remove}
                               index={index}
                               provided={provided}
-                              measuring={measuring}
-                              contentOverflow={menuOverflow}
                               copy={copy}/>
         </div>
     </div>;
@@ -270,12 +260,8 @@ export function ArrayItemOptions({
                                      index,
                                      provided,
                                      copy,
-                                     contentOverflow,
-                                     measuring
                                  }: {
     direction?: "row" | "column",
-    contentOverflow: boolean,
-    measuring: boolean,
     disabled: boolean,
     remove: (index: number) => void,
     index: number,
@@ -283,65 +269,41 @@ export function ArrayItemOptions({
     copy: (index: number) => void
 }) {
 
-    return <div className={`p-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
-                {...provided.dragHandleProps}
-    >
+    const [menuOpen, setMenuOpen] = useState(false);
+
+    const iconRef = React.useRef<HTMLDivElement>(null);
+    useOutsideAlerter(iconRef, () => setMenuOpen(false));
+
+    return <div className={`ml-2 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
+                ref={iconRef}
+                {...provided.dragHandleProps}>
         <Tooltip
+            delayDuration={400}
+            open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
-            title="Move">
+            title="Drag to move. Click for more options">
+
             <IconButton
                 size="small"
                 disabled={disabled}
+                onClick={() => setMenuOpen(true)}
+                onDragStart={(e: any) => {
+                    setMenuOpen(false);
+                }}
                 className={`cursor-${disabled ? "inherit" : "grab"}`}>
-                {/* TODO: for some reason, the icon as a span does not work with Drag and Drop
-                */}
-                <svg focusable="false"
-                     fill={"currentColor"}
-                     aria-hidden="true" viewBox="0 0 24 24">
-                    <path d="M20 9H4v2h16V9zM4 15h16v-2H4v2z"></path>
+                <svg width="24" height="24" viewBox="0 0 100 100" fill="none">
+                    <circle cx="28" cy="50" r="9" fill={"currentColor"}/>
+                    <circle cx="28" cy="21" r="9" fill={"currentColor"}/>
+                    <circle cx="71" cy="21" r="9" fill={"currentColor"}/>
+                    <circle cx="71" cy="50" r="9" fill={"currentColor"}/>
+                    <circle cx="71" cy="78" r="9" fill={"currentColor"}/>
+                    <circle cx="28" cy="78" r="9" fill={"currentColor"}/>
                 </svg>
-                {/*<DragHandleIcon*/}
-                {/*    size={"small"}*/}
-                {/*    color={disabled ? "disabled" : "inherit"}/>*/}
             </IconButton>
-        </Tooltip>
-
-        {!measuring && !contentOverflow && <>
-            <Tooltip
-                title="Remove"
-                side={direction === "column" ? "left" : undefined}>
-                <IconButton
-                    size="small"
-                    aria-label="remove"
-                    disabled={disabled}
-                    onClick={() => remove(index)}>
-                    <RemoveIcon
-                        size={"small"}/>
-                </IconButton>
-            </Tooltip>
-
-            <Tooltip
-                side={direction === "column" ? "left" : undefined}
-                title="Copy in this position">
-                <IconButton
-                    size="small"
-                    aria-label="copy"
-                    disabled={disabled}
-                    onClick={() => copy(index)}>
-                    <ContentCopyIcon
-                        size={"small"}/>
-                </IconButton>
-            </Tooltip>
-        </>}
-
-        {!measuring && contentOverflow && <>
 
             <Menu
-                trigger={<IconButton size={"small"}>
-                    <MoreVertIcon
-                        size={"small"}/>
-                </IconButton>}
-            >
+                open={menuOpen}
+                trigger={<div/>}>
 
                 <MenuItem dense onClick={() => remove(index)}>
                     <RemoveIcon size={"small"}/>
@@ -353,7 +315,9 @@ export function ArrayItemOptions({
                 </MenuItem>
 
             </Menu>
-        </>}
+
+        </Tooltip>
+
     </div>;
 }