@firecms/core 3.0.0-canary.3 → 3.0.0-canary.5

package/dist/types/entities.d.ts

@@ -43,6 +43,7 @@ export declare class EntityReference<M extends Record<string, any> = any> {
     readonly path: string;
     constructor(id: string, path: string);
     get pathWithId(): string;
+    isEntityReference(): boolean;
 }
 export declare class GeoPoint {
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.3",
+  "version": "3.0.0-canary.5",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -46,8 +46,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/formex": "^3.0.0-canary.3",
-    "@firecms/ui": "^3.0.0-canary.3",
+    "@firecms/formex": "^3.0.0-canary.5",
+    "@firecms/ui": "^3.0.0-canary.5",
     "@fontsource/ibm-plex-mono": "^5.0.8",
     "@fontsource/roboto": "^5.0.8",
     "@hello-pangea/dnd": "^16.5.0",
@@ -115,7 +115,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "9d587b683991dfcefd28e1c13b693364b5de72b2",
+  "gitHead": "e3850e04c28ef87d561bdf651950c7fbac87a9ec",
   "publishConfig": {
     "access": "public"
   }

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -24,13 +24,14 @@ import { getPreviewSizeFrom } from "../../preview/util";
 import { isReadOnly } from "../../util";
 
 import { CustomFieldValidator, mapPropertyToYup } from "../../form/validation";
-import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
+import {  useFireCMSContext } from "../../hooks";
 
 import { EntityTableCell } from "./internal/EntityTableCell";
 import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 
 import { getRowHeight } from "../VirtualTable/common";
 import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
+import { useClearRestoreValue } from "../../form/useClearRestoreValue";
 
 export interface PropertyTableCellProps<T extends CMSType, M extends Record<string, any>> {
     propertyKey: string;

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

@@ -96,7 +96,7 @@ export const TableReferenceFieldSuccess = React.memo(
         const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
 
         const buildSingleReferenceField = () => {
-            if (internalValue instanceof EntityReference)
+            if (internalValue && !Array.isArray(internalValue) && internalValue.isEntityReference && internalValue.isEntityReference())
                 return <ReferencePreview
                     onClick={disabled ? undefined : handleOpen}
                     size={getPreviewSizeFrom(size)}

package/src/components/ReferenceWidget.tsx

@@ -9,13 +9,13 @@ import { Button, cn } from "@firecms/ui";
 export type ReferenceWidgetProps<M extends Record<string, any>> = {
     name?: string,
     multiselect?: boolean,
-    value: EntityReference<M> | EntityReference<M>[] | null,
+    value: EntityReference | EntityReference[] | null,
     onReferenceSelected?: (params: {
-        reference: EntityReference<M> | null,
+        reference: EntityReference | null,
         entity: Entity<M> | null
     }) => void,
     onMultipleReferenceSelected?: (params: {
-        references: EntityReference<M>[] | null,
+        references: EntityReference[] | null,
         entities: Entity<M>[] | null
     }) => void,
     path: string,
@@ -113,7 +113,7 @@ export function ReferenceWidget<M extends Record<string, any>>({
                     size={size}/>
             })}
         </div>
-    } else if (value instanceof EntityReference) {
+    } else if (value?.isEntityReference && value?.isEntityReference()) {
         child = <ReferencePreview
             reference={value}
             onClick={onEntryClick}

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -60,7 +60,7 @@ export function ReferenceFilterField({
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
-            if (!(ref instanceof EntityReference)) {
+            if (!(ref.isEntityReference && ref.isEntityReference())) {
                 return null;
             }
             return ref.id;
@@ -74,7 +74,7 @@ export function ReferenceFilterField({
         let newValue = val;
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (newValue instanceof EntityReference ? [newValue] : []) : undefined
+            newValue = newOpIsArray ? (newValue.isEntityReference && newValue.isEntityReference() ? [newValue] : []) : undefined
         }
 
         setOperation(op);

package/src/components/index.tsx

@@ -31,5 +31,4 @@ export * from "./FireCMSAppBar";
 
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
-export * from "./LabelWithIcon";
 export * from "./SearchIconsView";

package/src/core/EntitySidePanel.tsx

@@ -4,7 +4,7 @@ import { EntitySidePanelProps } from "../types";
 import { useNavigationController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityView } from "../internal/EntityView";
+import { EntityView } from "./EntityView";
 import { useSideDialogContext } from "./SideDialogs";
 
 /**

package/src/{internal → core}/EntityView.tsx

@@ -32,8 +32,8 @@ import {
 import { EntityForm } from "../form";
 import { CircularProgress, CloseIcon, cn, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
 import { EntityFormSaveParams } from "../form/EntityForm";
-import { FORM_CONTAINER_WIDTH } from "./common";
-import { useSideDialogContext } from "../core";
+import { FORM_CONTAINER_WIDTH } from "../internal/common";
+import { useSideDialogContext } from "./index";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 

package/src/core/SideEntityView.tsx

@@ -0,0 +1,38 @@
+import { EntityViewProps } from "./EntityView";
+import { User } from "../types";
+import { useSideDialogContext } from "./SideDialogs";
+import { useSideEntityController } from "../hooks";
+import { FORM_CONTAINER_WIDTH } from "../internal/common";
+
+export type SideEntityViewProps<M extends Record<string, any>> = EntityViewProps<M> & {
+    formWidth?: number | string;
+    onClose?: () => void;
+}
+
+export function SideEntityView<M extends Record<string, any>, UserType extends User>({
+                                                                                         path,
+                                                                                         entityId,
+                                                                                         selectedSubPath,
+                                                                                         copy,
+                                                                                         collection,
+                                                                                         parentCollectionIds,
+                                                                                         onValuesAreModified,
+                                                                                         formWidth,
+                                                                                         onUpdate,
+                                                                                         onClose
+                                                                                     }: SideEntityViewProps<M>) {
+
+    const sideDialogContext = useSideDialogContext();
+    const sideEntityController = useSideEntityController();
+    const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
+
+    const onCloseHandler = () => {
+        if (onClose) {
+            onClose();
+        } else {
+            sideDialogContext.close();
+        }
+    }
+
+    return <></>;
+}

package/src/core/index.tsx

@@ -10,5 +10,3 @@ export * from "./field_configs";
 
 export * from "./SideDialogs";
 export * from "./NavigationRoutes";
-export * from "./useBuildModeController";
-export * from "./useBuildLocalConfigurationPersistence";

package/src/form/components/index.tsx

@@ -1,2 +1,3 @@
 export * from "./FormikArrayContainer";
 export * from "./FieldHelperText";
+export * from "./LabelWithIcon";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { useClearRestoreValue } from "../../hooks";
 import { ExpandablePanel } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Array field used for custom

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { ErrorView, LabelWithIcon } from "../../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { Button, ExpandablePanel } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
 

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -2,15 +2,14 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
 import { getDefaultValueFor, getIconForProperty, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cn, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -2,11 +2,11 @@ import React from "react";
 
 import { FieldProps } from "../../types";
 
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue, useCustomizationController } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { useCustomizationController } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { DateTimeField } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type DateTimeFieldProps = FieldProps<Date>;
 

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { DataType, EntityReference, FieldProps, GeoPoint } from "../../types";
+import { DataType, FieldProps, GeoPoint } from "../../types";
 
-import { ArrayContainer, LabelWithIcon } from "../../components";
-import { FieldHelperText } from "../components";
+import { ArrayContainer } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
@@ -546,7 +546,7 @@ function getDataType(value: any): DataType | undefined {
         return "array";
     } else if (value instanceof Date) {
         return "date";
-    } else if (value instanceof EntityReference) {
+    } else if (value.isEntityReference && value.isEntityReference()) {
         return "reference";
     } else if (value instanceof GeoPoint) {
         return "geopoint";

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
-import { ErrorBoundary, LabelWithIcon } from "../../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 

package/src/form/field_bindings/MarkdownFieldBinding.tsx

@@ -4,8 +4,7 @@ import React, { useDeferredValue, useEffect, useRef } from "react";
 import MarkdownIt from "markdown-it";
 import MdEditor, { Plugins } from "react-markdown-editor-lite";
 
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { FieldProps } from "../../types";
 import { getIconForProperty } from "../../util";
 import {

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
 import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * This fields renders a dropdown with multiple selection.

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { Entity, FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText } from "../components";
-import { ErrorBoundary, LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { cn, paperMixin } from "@firecms/ui";
 

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -1,13 +1,14 @@
 import React, { useCallback, useMemo } from "react";
 
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText } from "../components";
-import { ErrorView, LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorView } from "../../components";
 import { ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 import { Button } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Field that opens a reference selection dialog.
@@ -49,7 +50,7 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
         setValue
     });
 
-    const validValue = value && value instanceof EntityReference;
+    const validValue = value && value.isEntityReference && value.isEntityReference();
 
     const navigationController = useNavigationController();
     const collection: EntityCollection | undefined = useMemo(() => {

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { ErrorBoundary, LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Generic array field that allows reordering and renders the child property

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";
 import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
 

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -10,11 +10,10 @@ import {
 } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { FieldHelperText,LabelWithIcon } from "../components";
 
 import { getIconForProperty, isReadOnly } from "../../util";
-import { useClearRestoreValue, useSnackbarController, useStorageSource } from "../../hooks";
+import {  useSnackbarController, useStorageSource } from "../../hooks";
 import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
@@ -27,6 +26,7 @@ import {
     focusedMixin,
     Typography
 } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
 const disabledClasses = "border-dotted-gray"

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 
 import { FieldProps } from "../../types";
-import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
-import { FieldHelperText } from "../components/FieldHelperText";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type SwitchFieldProps = FieldProps<boolean>;
 

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -1,12 +1,11 @@
 import React, { useCallback } from "react";
 
+import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { FieldProps, PreviewType } from "../../types";
-import { FieldHelperText } from "../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
-import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
 import { PropertyPreview } from "../../preview";
-import { LabelWithIcon } from "../../components";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 interface TextFieldProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean

package/src/form/index.tsx

@@ -40,3 +40,4 @@ export {
 } from "./EntityForm";
 
 export { PropertyFieldBinding } from "./PropertyFieldBinding";
+export * from "./useClearRestoreValue";

package/src/hooks/index.tsx

@@ -4,7 +4,6 @@ export * from "./data/useEntityFetch";
 export * from "./data/save";
 export * from "./data/delete";
 
-export * from "../form/useClearRestoreValue";
 export * from "./useNavigationController";
 
 export * from "./useResolvedNavigationFrom";
@@ -23,3 +22,6 @@ export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
 export * from "./useCustomizationController";
 export * from "./useBuildNavigationController";
+
+export * from "./useBuildLocalConfigurationPersistence";
+export * from "./useBuildModeController";

package/src/{core → hooks}/useBuildModeController.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { ModeController } from "../hooks";
+import { ModeController } from "./index";
 
 /**
  * Use this hook to build a color mode controller that determines

package/src/internal/useBuildDataSource.ts

@@ -340,9 +340,11 @@ export function cmsToDelegateModel(data: any,
 ): any {
     if (data === undefined) {
         return buildDelete();
+    } else if (data === null) {
+        return null;
     } else if (Array.isArray(data)) {
         return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
-    } else if (data instanceof EntityReference) {
+    } else if (data.isEntityReference && data.isEntityReference()) {
         return buildReference(data);
     } else if (data instanceof GeoPoint) {
         return buildGeoPoint(data);

package/src/preview/PropertyPreview.tsx

@@ -178,7 +178,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         }
     } else if (property.dataType === "reference") {
         if (typeof property.path === "string") {
-            if (value instanceof EntityReference) {
+            if (typeof value === "object" && "isEntityReference" in value && value.isEntityReference()) {
                 content = <ReferencePreview
                     disabled={!property.path}
                     previewProperties={property.previewProperties}

package/src/preview/components/ReferencePreview.tsx

@@ -32,7 +32,7 @@ export type ReferencePreviewProps = {
  */
 export const ReferencePreview = React.memo<ReferencePreviewProps>(function ReferencePreview(props: ReferencePreviewProps) {
     const reference = props.reference;
-    if (!((reference as unknown) instanceof EntityReference)) {
+    if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
         return <ReferencePreviewContainer
             onClick={props.onClick}

package/src/types/entities.ts

@@ -56,6 +56,10 @@ export class EntityReference<M extends Record<string, any> = any> {
     get pathWithId() {
         return `${this.path}/${this.id}`;
     }
+
+    isEntityReference() {
+        return true;
+    }
 }
 
 export class GeoPoint {