@firecms/core 3.0.0-beta.8 → 3.0.0-beta.9

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-beta.8",
+    "version": "3.0.0-beta.9",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,63 +46,61 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/formex": "^3.0.0-beta.8",
-        "@firecms/ui": "^3.0.0-beta.8",
-        "@fontsource/jetbrains-mono": "^5.0.20",
+        "@firecms/editor": "^3.0.0-beta.9",
+        "@firecms/formex": "^3.0.0-beta.9",
+        "@firecms/ui": "^3.0.0-beta.9",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
+        "fuse.js": "^7.0.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"
+        "react-router": "^6.25.1",
+        "react-router-dom": "^6.25.1"
     },
     "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.14.9",
+        "@types/node": "^20.14.12",
         "@types/object-hash": "^3.0.6",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@types/react-measure": "^2.0.12",
         "@vitejs/plugin-react": "^4.3.1",
         "cross-env": "^7.0.3",
-        "firebase": "^10.12.2",
+        "firebase": "^10.12.4",
         "jest": "^29.7.0",
         "npm-run-all": "^4.1.5",
-        "react-router": "^6.24.0",
-        "react-router-dom": "^6.24.0",
-        "ts-jest": "^29.1.5",
+        "react-router": "^6.25.1",
+        "react-router-dom": "^6.25.1",
+        "ts-jest": "^29.2.3",
         "ts-node": "^10.9.2",
         "tsd": "^0.31.1",
-        "typescript": "^5.5.3",
-        "vite": "^5.3.2"
+        "typescript": "^5.5.4",
+        "vite": "^5.3.4"
     },
     "files": [
         "dist",
         "src"
     ],
-    "gitHead": "4ef14d60f86cb2e581b908a1dc84ad6a87b14e2e",
+    "gitHead": "a2fffa74049d185e674aae9f70b462f011edd1c2",
     "publishConfig": {
         "access": "public"
     },

package/src/app/Drawer.tsx

@@ -7,7 +7,7 @@ import { DefaultDrawer } from "../core";
  * If you want to customise the drawer, you can create your own component and pass it as a child.
  * For custom drawers, you can use the {@link useApp} to open and close the drawer.
  *
- * @constructor
+
  */
 export function Drawer({
                            children,

package/src/app/Scaffold.tsx

@@ -36,7 +36,7 @@ export interface ScaffoldProps {
  * This component needs a parent {@link FireCMS}
  *
  * @param props
- * @constructor
+
  * @group Core
  */
 export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
@@ -79,6 +79,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
         const computedDrawerOpen: boolean = drawerOpen || Boolean(largeLayout && autoOpenDrawer && onHover);
 
+        const hasAppBar = Boolean(appBarChildren.length > 0);
         return (
             <AppContext.Provider value={{
                 logo,
@@ -115,9 +116,11 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
 
                     <main
                         className="flex flex-col flex-grow overflow-auto">
-                        <DrawerHeader/>
+                        {hasAppBar && <DrawerHeader/>}
                         <div
-                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1")}>
+                            className={cls(defaultBorderMixin, "flex-grow overflow-auto lg:m-0 lg:mx-4 lg:mb-4 lg:rounded-lg lg:border lg:border-solid m-0 mt-1", {
+                                "lg:mt-4": !hasAppBar
+                            })}>
 
                             <ErrorBoundary>
                                 {otherChildren}
@@ -163,17 +166,19 @@ function DrawerWrapper(props: {
             <Tooltip title="Open menu"
                      side="right"
                      sideOffset={12}
-                     className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20"
-            >
-                <IconButton
-                    color="inherit"
-                    aria-label="Open menu"
-                    className="sticky top-2 left-3 "
-                    onClick={() => props.setDrawerOpen(true)}
-                    size="large"
-                >
-                    <MenuIcon/>
-                </IconButton>
+                     asChild={true}>
+                <div
+                    className="ml-2 fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
+                    <IconButton
+                        color="inherit"
+                        aria-label="Open menu"
+                        className="sticky top-2 left-3 "
+                        onClick={() => props.setDrawerOpen(true)}
+                        size="large"
+                    >
+                        <MenuIcon/>
+                    </IconButton>
+                </div>
             </Tooltip>
         )}
 
@@ -205,7 +210,7 @@ function DrawerWrapper(props: {
                 aria-label="Open drawer"
                 onClick={() => props.setDrawerOpen(true)}
                 size="large"
-                className="absolute top-2 left-6"
+                className="absolute top-2 left-5"
             >
                 <MenuIcon/>
             </IconButton>
@@ -213,6 +218,8 @@ function DrawerWrapper(props: {
                    transparent={true}
                    open={props.open}
                    onOpenChange={props.setDrawerOpen}
+                   title={"Navigaion drawer"}
+                   overlayClassName={"bg-white bg-opacity-80"}
             >
                 {innerDrawer}
             </Sheet>
@@ -232,18 +239,6 @@ function DrawerWrapper(props: {
 
             {innerDrawer}
 
-            {/*<div*/}
-            {/*    className={`z-20 absolute right-0 top-4 ${*/}
-            {/*        props.open ? "opacity-100" : "opacity-0 invisible"*/}
-            {/*    } transition-opacity duration-1000 ease-in-out`}>*/}
-            {/*    <IconButton*/}
-            {/*        aria-label="Close drawer"*/}
-            {/*        onClick={() => props.setDrawerOpen(false)}*/}
-            {/*    >*/}
-            {/*        <ChevronLeftIcon/>*/}
-            {/*    </IconButton>*/}
-            {/*</div>*/}
-
         </div>
     );
 }

package/src/components/ArrayContainer.tsx

@@ -7,7 +7,8 @@ import {
     AddIcon,
     Button,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin, HandleIcon,
+    fieldBackgroundHoverMixin,
+    HandleIcon,
     IconButton,
     Menu,
     MenuItem,
@@ -26,7 +27,8 @@ interface ArrayContainerProps<T> {
     onInternalIdAdded?: (id: number) => void;
     includeAddButton?: boolean;
     newDefaultEntry: T;
-    onValueChange: (value: T[]) => void
+    onValueChange: (value: T[]) => void,
+    className?: string;
 }
 
 const buildIdsMap = (value: any[]) =>
@@ -52,7 +54,8 @@ export function ArrayContainer<T>({
                                       onInternalIdAdded,
                                       includeAddButton,
                                       newDefaultEntry,
-                                      onValueChange
+                                      onValueChange,
+                                      className
                                   }: ArrayContainerProps<T>) {
 
     const hasValue = value && Array.isArray(value) && value.length > 0;
@@ -153,6 +156,7 @@ export function ArrayContainer<T>({
             >
                 {(droppableProvided, droppableSnapshot) => (
                     <div
+                        className={className}
                         {...droppableProvided.droppableProps}
                         ref={droppableProvided.innerRef}>
                         {hasValue && internalIds.map((internalId: number, index: number) => {
@@ -235,12 +239,13 @@ export function ArrayContainerItem({
         {...provided.draggableProps}
         style={provided.draggableProps.style}
         className={`${
-            (isDragging || onHover) ? fieldBackgroundHoverMixin : ""
+            (isDragging || onHover) ? "hover:bg-slate-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20" : ""
         } mb-1 rounded-md opacity-100`}
     >
         <div
             className="flex items-start">
-            <div 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"}
@@ -253,7 +258,6 @@ export function ArrayContainerItem({
     </div>;
 }
 
-
 export function ArrayItemOptions({
                                      direction,
                                      disabled,
@@ -283,11 +287,13 @@ export function ArrayItemOptions({
             open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
             title="Drag to move. Click for more options">
-
             <IconButton
                 size="small"
                 disabled={disabled}
-                onClick={() => setMenuOpen(true)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setMenuOpen(true);
+                }}
                 onDragStart={(e: any) => {
                     setMenuOpen(false);
                 }}
@@ -298,7 +304,7 @@ export function ArrayItemOptions({
             <Menu
                 portalContainer={iconRef.current}
                 open={menuOpen}
-                trigger={<div/>}>
+                trigger={<div tabIndex={-1}/>}>
 
                 <MenuItem dense onClick={(e) => {
                     setMenuOpen(false);
@@ -316,7 +322,6 @@ export function ArrayItemOptions({
                 </MenuItem>
 
             </Menu>
-
         </Tooltip>
 
     </div>;

package/src/components/CircularProgressCenter.tsx

@@ -5,7 +5,7 @@ import { CircularProgress, CircularProgressProps, Typography } from "@firecms/ui
  *
  * @param text
  * @param props
- * @constructor
+
  * @ignore
  */
 export function CircularProgressCenter({ text, ...props }: CircularProgressProps & {

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -14,7 +14,6 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
  * @param size
  * @param toggleEntitySelection
  * @param hideId
- * @constructor
  *
  * @group Collection components
  */
@@ -56,12 +55,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const context = useFireCMSContext();
 
     const onCheckedChange = useCallback((checked: boolean) => {
-        selectionController?.toggleEntitySelection(entity);
-    }, [entity, selectionController?.toggleEntitySelection]);
-
-    const onClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        selectionController?.toggleEntitySelection(entity);
+        selectionController?.toggleEntitySelection(entity, checked);
     }, [entity, selectionController?.toggleEntitySelection]);
 
     const hasActions = actions.length > 0;
@@ -71,7 +65,6 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     return (
         <div
-            onClick={onClick}
             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" : ""
@@ -87,7 +80,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 <div className="w-34 flex justify-center">
 
                     {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index} title={action.name}>
+                        <Tooltip key={index}
+                                 title={action.name}
+                                 asChild={true}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -246,7 +246,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             : collectionColumns) as VirtualTableColumn[]
     ];
 
-    const cellRenderer = (props: CellRendererParams<any>) => {
+    const cellRenderer = useCallback((props: CellRendererParams<any>) => {
         const column = props.column;
         const columns = props.columns;
         const columnKey = column.key;
@@ -286,7 +286,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                 <ErrorView error={e}/>
             </EntityTableCell>;
         }
-    }
+    }, [tableRowActionsBuilder, additionalCellRenderer, propertyCellRenderer, size]);
 
     return (
 

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -49,6 +49,8 @@ export interface PropertyTableCellProps<T extends CMSType> {
 }
 
 function isStorageProperty(property: ResolvedProperty) {
+    if (property.dataType === "string" && property.markdown)
+        return false;
     if (property.dataType === "string" && (property as ResolvedStringProperty).storage)
         return true;
     if (property.dataType === "array") {
@@ -147,7 +149,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                 onValueUpdated,
                                 data: entity,
                             });
-                        } catch (e:any) {
+                        } catch (e: any) {
                             console.error("onValueChange error", e);
                             setError(e);
                         }
@@ -306,7 +308,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
-                } else if (!stringProperty.storage) {
+                } else if (stringProperty.markdown || !stringProperty.storage) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}
                                                         disabled={disabled}

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,14 +1,14 @@
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 import equal from "react-fast-compare"
 
 import { ReferencePreview } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
-import { getReferenceFrom } from "../../../util";
+import { getReferenceFrom, IconForView } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
-import { Button } from "@firecms/ui";
+import { cls } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
@@ -39,11 +39,11 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
             throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
         }
     }
-    return <TableReferenceFieldSuccess {...props} collection={collection}/>;
+    return <TableReferenceFieldInternal {...props} collection={collection}/>;
 }
 
-export const TableReferenceFieldSuccess = React.memo(
-    function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+export const TableReferenceFieldInternal = React.memo(
+    function TableReferenceFieldInternal(props: TableReferenceFieldProps & {
         collection: EntityCollection;
     }) {
         const {
@@ -87,11 +87,11 @@ export const TableReferenceFieldSuccess = React.memo(
             }
         );
 
-        const handleOpen = useCallback(() => {
+        const handleOpen = () => {
             if (disabled)
                 return;
             referenceDialogController.open();
-        }, [disabled, referenceDialogController]);
+        };
 
         const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
 
@@ -123,7 +123,7 @@ export const TableReferenceFieldSuccess = React.memo(
                              key={`preview_array_ref_${name}_${index}`}>
                             <ReferencePreview
                                 onClick={disabled ? undefined : handleOpen}
-                                size={"tiny"}
+                                size={"smallest"}
                                 reference={reference}
                                 hover={!disabled}
                                 disabled={!path}
@@ -150,13 +150,20 @@ export const TableReferenceFieldSuccess = React.memo(
                 {internalValue && multiselect && buildMultipleReferenceField()}
 
                 {valueNotSet &&
-                    <Button
+                    <EntityPreviewContainer
+                        className={cls("px-4 py-2 text-sm font-medium flex items-center uppercase",
+                            multiselect ? "gap-4" : "gap-6",
+                            disabled
+                                ? "text-slate-500"
+                                : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
                         onClick={handleOpen}
-                        size={"small"}
-                        variant="outlined"
-                        color="primary">
+                        size={"medium"}>
+                        <IconForView
+                            size={"small"}
+                            collectionOrView={collection}
+                            className={"text-gray-300 dark:text-gray-600"}/>
                         Edit {title}
-                    </Button>}
+                    </EntityPreviewContainer>}
 
             </div>
         );

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -179,10 +179,18 @@ function StorageUpload({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
+                        console.error("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }

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

@@ -45,22 +45,21 @@ const TableCellInner = ({
                             children
                         }: TableCellInnerProps) => {
     return (
-        <div
-            className={cls("flex flex-col max-h-full w-full",
-                {
-                    "items-start": faded || scrollable
-                })}
-            style={{
-                justifyContent,
-                height: fullHeight ? "100%" : undefined,
-                overflow: scrollable ? "auto" : undefined,
-                WebkitMaskImage: faded
-                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
-                    : undefined,
-                maskImage: faded
-                    ? "linear-gradient(to bottom, black 60%, transparent 100%)"
-                    : undefined
-            }}
+        <div className={cls("flex flex-col max-h-full w-full",
+            {
+                "items-start": faded || scrollable
+            })}
+             style={{
+                 justifyContent,
+                 height: fullHeight ? "100%" : undefined,
+                 overflow: scrollable ? "auto" : undefined,
+                 WebkitMaskImage: faded
+                     ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                     : undefined,
+                 maskImage: faded
+                     ? "linear-gradient(to bottom, black 60%, transparent 100%)"
+                     : undefined
+             }}
         >
             {children}
         </div>
@@ -156,8 +155,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
         }, [ref, onSelect, selected, disabled]);
 
         const onFocus = useCallback((event: React.SyntheticEvent<HTMLDivElement>) => {
-            onSelectCallback();
             event.stopPropagation();
+            event.preventDefault();
+            onSelectCallback();
         }, [onSelectCallback]);
 
         const isOverflowing = useMemo(() => {
@@ -203,11 +203,9 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 }}
                 tabIndex={selected || disabled ? undefined : 0}
                 onFocus={onFocus}
-                // onClick={onClick}
                 onMouseEnter={setOnHoverTrue}
                 onMouseMove={setOnHoverTrue}
                 onMouseLeave={setOnHoverFalse}
-                // contain={scrollable ? "content" : "size"}
             >
 
                 <ErrorBoundary>

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

@@ -11,7 +11,14 @@ export interface EntityTableCellActionsProps {
     children?: React.ReactNode;
 }
 
-export function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }: EntityTableCellActionsProps) {
+export function EntityTableCellActions({
+                                           showError,
+                                           disabled,
+                                           showExpandIcon,
+                                           selected,
+                                           openPopup,
+                                           children
+                                       }: EntityTableCellActionsProps) {
 
     const ref = useRef<HTMLDivElement>(null);
     const doOpenPopup = useCallback(() => {
@@ -54,13 +61,18 @@ export function EntityTableCellActions({ showError, disabled, showExpandIcon, se
 
                 {showError && <ErrorTooltip
                     side={"left"}
-                    className={"flex items-center justify-center"}
-                    style={{ width: 32, height: 32 }}
                     title={showError.message}>
-                    <ErrorOutlineIcon
-                        size={"small"}
-                        color={"error"}
-                    />
+                    <div
+                        className={"flex items-center justify-center"}
+                        style={{
+                            width: 32,
+                            height: 32
+                        }}>
+                        <ErrorOutlineIcon
+                            size={"small"}
+                            color={"error"}
+                        />
+                    </div>
                 </ErrorTooltip>
                 }
 

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

@@ -27,7 +27,7 @@ import { useCustomizationController, useFireCMSContext } from "../../../../hooks
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
-    entity?: Entity<M>;
+    entity: Entity<M>;
     customFieldValidator?: CustomFieldValidator;
     path: string;
     tableKey: string;
@@ -74,7 +74,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         y: number
     }>();
 
-    const entityId = entityProp?.id;
+    const entityId = entityProp.id;
     const [entity, setEntity] = useState<Entity<M> | undefined>(entityProp);
     // useEffect(() => {
     //     if (entityId && inputCollection) {
@@ -217,7 +217,6 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     if (!entity)
         return <></>;
 
-    // enableReinitialize={true}
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const formex = useCreateFormex<M>({
         initialValues: (entity?.values ?? {}) as EntityValues<M>,
@@ -277,9 +276,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             includeDescription: false,
             underlyingValueHasChanged: false,
             context: formContext,
-            tableMode: true,
             partOfArray: false,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: open
         }
         : undefined;