@firecms/core 3.0.0-beta.5 → 3.0.0-beta.7

package/package.json

@@ -1,122 +1,142 @@
 {
-  "name": "@firecms/core",
-  "type": "module",
-  "version": "3.0.0-beta.5",
-  "description": "Awesome Firebase/Firestore-based headless open-source CMS",
-  "funding": {
-    "url": "https://github.com/sponsors/firecmsco"
-  },
-  "author": "FireCMS",
-  "license": "MIT",
-  "repository": "git@github.com:FireCMSco/firecms.git",
-  "main": "./dist/index.umd.js",
-  "module": "./dist/index.es.js",
-  "types": "./dist/index.d.ts",
-  "source": "src/index.ts",
-  "engines": {
-    "node": ">=14"
-  },
-  "keywords": [
-    "firebase",
-    "cms",
-    "admin",
-    "admin panel",
-    "firebase panel",
-    "firestore",
-    "headless",
-    "headless cms",
-    "content manager"
-  ],
-  "scripts": {
-    "watch": "vite build --watch",
-    "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
-    "prepublishOnly": "run-s build",
-    "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
-    "test:lint": "eslint \"src/**\" --quiet",
-    "test": "jest",
-    "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
-    "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
-  },
-  "exports": {
-    ".": {
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js",
-      "types": "./dist/index.d.ts"
+    "name": "@firecms/core",
+    "type": "module",
+    "version": "3.0.0-beta.7",
+    "description": "Awesome Firebase/Firestore-based headless open-source CMS",
+    "funding": {
+        "url": "https://github.com/sponsors/firecmsco"
     },
-    "./package.json": "./package.json"
-  },
-  "dependencies": {
-    "@firecms/formex": "^3.0.0-beta.5",
-    "@firecms/ui": "^3.0.0-beta.5",
-    "@fontsource/ibm-plex-mono": "^5.0.12",
-    "@fontsource/roboto": "^5.0.12",
-    "@hello-pangea/dnd": "^16.5.0",
-    "date-fns": "^3.6.0",
-    "history": "^5.3.0",
-    "js-search": "^2.0.1",
-    "markdown-it": "^14.1.0",
-    "notistack": "^3.0.1",
-    "object-hash": "^3.0.0",
-    "react-image-file-resizer": "^0.4.8",
-    "react-markdown-editor-lite": "^1.3.4",
-    "react-transition-group": "^4.4.5",
-    "react-use-measure": "^2.1.1",
-    "react-window": "^1.8.10",
-    "typeface-rubik": "^1.1.13",
-    "yup": "^0.32.11"
-  },
-  "peerDependencies": {
-    "firebase": "^10.5.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.30",
-    "@types/object-hash": "^3.0.6",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
-    "@types/react-measure": "^2.0.12",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "cross-env": "^7.0.3",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.34.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "firebase": "^10.9.0",
-    "jest": "^29.7.0",
-    "npm-run-all": "^4.1.5",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0",
-    "ts-jest": "^29.1.2",
-    "ts-node": "^10.9.2",
-    "tsd": "^0.30.7",
-    "typescript": "^5.4.2",
-    "vite": "^5.2.3"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "gitHead": "8bf864185c9617aa3f120e59c873c8b8bda8dac4",
-  "publishConfig": {
-    "access": "public"
-  }
+    "author": "FireCMS",
+    "license": "MIT",
+    "repository": "git@github.com:FireCMSco/firecms.git",
+    "main": "./dist/index.umd.js",
+    "module": "./dist/index.es.js",
+    "types": "./dist/index.d.ts",
+    "source": "src/index.ts",
+    "engines": {
+        "node": ">=14"
+    },
+    "keywords": [
+        "firebase",
+        "cms",
+        "admin",
+        "admin panel",
+        "firebase panel",
+        "firestore",
+        "headless",
+        "headless cms",
+        "content manager"
+    ],
+    "scripts": {
+        "watch": "vite build --watch",
+        "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
+        "prepublishOnly": "run-s build",
+        "createTag": "PACKAGE_VERSION=$(cat package.json | grep version | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",
+        "test:lint": "eslint \"src/**\" --quiet",
+        "test": "jest",
+        "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f",
+        "generateIcons": "ts-node --esm src/icons/generateIcons.ts"
+    },
+    "exports": {
+        ".": {
+            "import": "./dist/index.es.js",
+            "require": "./dist/index.umd.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./package.json": "./package.json"
+    },
+    "dependencies": {
+        "@firecms/formex": "^3.0.0-beta.7",
+        "@firecms/ui": "^3.0.0-beta.7",
+        "@fontsource/jetbrains-mono": "^5.0.20",
+        "@hello-pangea/dnd": "^16.6.0",
+        "@radix-ui/react-portal": "^1.0.4",
+        "clsx": "^2.1.1",
+        "date-fns": "^3.6.0",
+        "history": "^5.3.0",
+        "js-search": "^2.0.1",
+        "markdown-it": "^14.1.0",
+        "notistack": "^3.0.1",
+        "object-hash": "^3.0.0",
+        "react-dropzone": "^14.2.3",
+        "react-fast-compare": "^3.2.2",
+        "react-image-file-resizer": "^0.4.8",
+        "react-markdown-editor-lite": "^1.3.4",
+        "react-transition-group": "^4.4.5",
+        "react-use-measure": "^2.1.1",
+        "react-window": "^1.8.10",
+        "typeface-rubik": "^1.1.13",
+        "yup": "^0.32.11"
+    },
+    "peerDependencies": {
+        "firebase": "^10.5.2",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-router": "^6.22.0",
+        "react-router-dom": "^6.22.0"
+    },
+    "devDependencies": {
+        "@jest/globals": "^29.7.0",
+        "@testing-library/react": "^15.0.7",
+        "@testing-library/user-event": "^14.5.2",
+        "@types/jest": "^29.5.12",
+        "@types/node": "^20.12.13",
+        "@types/object-hash": "^3.0.6",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@types/react-measure": "^2.0.12",
+        "@typescript-eslint/eslint-plugin": "^7.11.0",
+        "@typescript-eslint/parser": "^7.11.0",
+        "@vitejs/plugin-react": "^4.3.0",
+        "cross-env": "^7.0.3",
+        "eslint": "^8.57.0",
+        "eslint-config-standard": "^17.1.0",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-n": "^16.6.2",
+        "eslint-plugin-promise": "^6.2.0",
+        "eslint-plugin-react": "^7.34.2",
+        "eslint-plugin-react-hooks": "^4.6.2",
+        "firebase": "^10.12.2",
+        "jest": "^29.7.0",
+        "npm-run-all": "^4.1.5",
+        "react-router": "^6.23.1",
+        "react-router-dom": "^6.23.1",
+        "ts-jest": "^29.1.4",
+        "ts-node": "^10.9.2",
+        "tsd": "^0.31.0",
+        "typescript": "^5.4.5",
+        "vite": "^5.2.12"
+    },
+    "files": [
+        "dist",
+        "src"
+    ],
+    "gitHead": "b1f5dbd89d66bd75e8d214a4a6c40e07e371a1d1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "eslintConfig": {
+        "extends": [
+            "react-app",
+            "react-app/jest"
+        ]
+    },
+    "jest": {
+        "transform": {
+            "^.+\\.tsx?$": "ts-jest"
+        },
+        "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
+        "moduleFileExtensions": [
+            "ts",
+            "tsx",
+            "js",
+            "jsx",
+            "json",
+            "node"
+        ],
+        "testEnvironment": "node",
+        "moduleNameMapper": {
+            "\\.(css|less)$": "<rootDir>/test/__mocks__/styleMock.js"
+        }
+    }
 }

package/src/components/ClearFilterSortButton.tsx

@@ -0,0 +1,41 @@
+import { Button, FilterListOffIcon } from "@firecms/ui";
+import { EntityTableController } from "../types";
+
+export function ClearFilterSortButton({
+                                          tableController,
+                                          enabled
+                                      }: {
+    enabled: boolean;
+    tableController: EntityTableController
+}) {
+    if (!enabled) {
+        return null;
+    }
+
+    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
+    const sortIsSet = !!tableController.sortBy && tableController.sortBy.length > 0;
+
+    if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
+        let label;
+        if (filterIsSet && sortIsSet) {
+            label = "Clear filter and sort";
+        } else if (filterIsSet) {
+            label = "Clear filter";
+        } else {
+            label = "Clear sort";
+        }
+        return <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={() => {
+                tableController.clearFilter?.();
+                tableController.setSortBy?.(undefined);
+            }}
+            size={"small"}>
+            <FilterListOffIcon/>
+            {label}
+        </Button>
+    }
+    return null;
+}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -72,7 +72,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     return (
         <div
             onClick={onClick}
-            className={cn(
+            className={cls(
                 "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -5,7 +5,6 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
 import { getValueInPath } from "../../util";
-import { getRowHeight } from "../VirtualTable/common";
 import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
@@ -15,7 +14,8 @@ import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
-
+import { cls } from "@firecms/ui";
+import { getRowHeight } from "../common/table_height";
 
 /**
  * This component is in charge of rendering a collection table with a high
@@ -43,6 +43,8 @@ import { SelectableTable } from "../SelectableTable/SelectableTable";
  */
 export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
 ({
+     className,
+     style,
      forceFilter,
      actionsStart,
      actions,
@@ -73,13 +75,13 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      emptyComponent,
      getIdColumnWidth,
      onTextSearchClick,
-     textSearchLoading
+     textSearchLoading,
+     enablePopupIcon
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
 
     const largeLayout = useLargeLayout();
-    const disabledFilterChange = Boolean(forceFilter);
     const selectedEntities = (selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities)?.filter(Boolean);
 
     const context: FireCMSContext<UserType> = useFireCMSContext();
@@ -88,8 +90,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const selectedEntityIds = selectedEntities?.map(e => e.id);
 
-    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
-
     const updateSize = useCallback((size: CollectionSize) => {
         if (onSizeChanged)
             onSizeChanged(size);
@@ -120,10 +120,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         const propertyKey = column.key;
 
         let disabled = column.custom?.disabled;
-        const propertyValue = entity.values ? getValueInPath(entity.values, propertyKey) : undefined;
         const property = getPropertyFor?.({
             propertyKey,
-            propertyValue,
             entity
         }) ?? column.custom.resolvedProperty;
         if (!property?.disabled) {
@@ -150,6 +148,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                         height={getRowHeight(size)}
                         entity={entity}
                         disabled={disabled}
+                        enablePopupIcon={enablePopupIcon}
                         path={entity.path}/>
                     : renderSkeletonText()
                 }
@@ -179,7 +178,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         const child = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>{additionalField.value?.({ entity, context })}</>;
+            : <>{additionalField.value?.({
+                entity,
+                context
+            })}</>;
 
         return (
             <EntityTableCell
@@ -207,7 +209,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             properties,
             sortable,
             forceFilter,
-            disabledFilter: disabledFilterChange,
             AdditionalHeaderWidget
         });
 
@@ -237,10 +238,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const columns: VirtualTableColumn[] = [
         idColumn,
-        ...displayedColumnIds
-            .map((p) => {
-                return collectionColumns.find(c => c.key === p.key);
-            }).filter(Boolean) as VirtualTableColumn[]
+        ...(displayedColumnIds
+            ? displayedColumnIds
+                .map((p) => {
+                    return collectionColumns.find(c => c.key === p.key);
+                }).filter(Boolean)
+            : collectionColumns) as VirtualTableColumn[]
     ];
 
     const cellRenderer = (props: CellRendererParams<any>) => {
@@ -288,15 +291,13 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     return (
 
         <div ref={ref}
-             className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+             style={style}
+             className={cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
 
             <CollectionTableToolbar
-                forceFilter={disabledFilterChange}
-                filterIsSet={filterIsSet}
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}
                 textSearchLoading={textSearchLoading}
                 onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
-                clearFilter={tableController.clearFilter}
                 size={size}
                 onSizeChanged={updateSize}
                 title={title}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
     AdditionalFieldDelegate,
     CollectionSize,
-    Entity, EntityCollection,
+    Entity,
     EntityTableController,
     FilterValues,
     ResolvedProperties,
@@ -12,13 +12,16 @@ import {
 } from "../../types";
 import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
 
-
 /**
  * @group Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
     UserType extends User = User> = {
 
+    className?: string;
+
+    style?: React.CSSProperties;
+
     /**
      * Display these entities as selected
      */
@@ -92,7 +95,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     tableController: EntityTableController<M>;
 
-    displayedColumnIds: PropertyColumnConfig[];
+    displayedColumnIds?: PropertyColumnConfig[];
 
     forceFilter?: FilterValues<Extract<keyof M, string>>;
 
@@ -131,15 +134,16 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     onTextSearchClick?: () => void;
 
     textSearchLoading?: boolean;
-}
+
+    enablePopupIcon: boolean;
+};
 
 export type GetPropertyForProps<M extends Record<string, any>> = {
     propertyKey: string,
-    propertyValue: any,
     entity: Entity<M>
 };
 
 export type PropertyColumnConfig = {
     key: string,
-    disabled: boolean,
+    disabled?: boolean,
 };