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

package/src/components/EntityPreview.tsx

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import { PropertyPreview } from "../preview";
 import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
-import { useFireCMSContext } from "../hooks";
 import { cn, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";

package/src/components/LabelWithIcon.tsx

@@ -26,7 +26,7 @@ export function LabelWithIcon({
             {icon}
 
             <span
-                className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
+                className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
 
         </span>
     );

package/src/components/{FieldConfigBadge.tsx → PropertyConfigBadge.tsx}

@@ -2,7 +2,7 @@ import { getIconForWidget } from "../util";
 import { PropertyConfig } from "../types";
 import { getDefaultFieldConfig } from "../core";
 
-export function FieldConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
+export function PropertyConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
     const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
 
     const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;

package/src/components/ReferenceSelectionInner.tsx

@@ -273,7 +273,6 @@ export function ReferenceSelectionInner<M extends Record<string, any>>(
             <div className="flex-grow">
                 {entitiesDisplayedFirst &&
                     <EntityCollectionTable
-                        debugKey={"reference_selection_table"}
                         displayedColumnIds={displayedColumnIds}
                         onEntityClick={onEntityClick}
                         tableController={tableController}

package/src/components/index.tsx

@@ -12,7 +12,7 @@ export { CircularProgressCenter } from "./CircularProgressCenter";
 export * from "./HomePage";
 export * from "./EntityCollectionView/EntityCollectionView";
 
-export * from "./FieldConfigBadge";
+export * from "./PropertyConfigBadge";
 
 export * from "./EntityCollectionTable";
 export * from "./NotFoundPage";

package/src/core/NavigationRoutes.tsx

@@ -115,4 +115,3 @@ const buildCMSViewRoute = (path: string, cmsView: CMSView) => {
         element={cmsView.view}
     />;
 };
-

package/src/core/Scaffold.tsx

@@ -4,7 +4,7 @@ import { Link } from "react-router-dom";
 
 import { Drawer as DefaultDrawer, DrawerProps } from "./Drawer";
 import { useLargeLayout, useNavigationController } from "../hooks";
-import { CircularProgressCenter, ErrorBoundary, FireCMSAppBar, FireCMSAppBarProps, FireCMSLogo } from "../components";
+import { ErrorBoundary, FireCMSAppBar as DefaultFireCMSAppBar, FireCMSAppBarProps, FireCMSLogo } from "../components";
 import { ChevronLeftIcon, cn, defaultBorderMixin, IconButton, MenuIcon, Sheet, Tooltip } from "@firecms/ui";
 
 export const DRAWER_WIDTH = 280;
@@ -24,6 +24,9 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
      */
     logo?: string;
 
+    /**
+     * Whether to include the drawer in the scaffold
+     */
     includeDrawer?: boolean;
 
     /**
@@ -46,12 +49,12 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
      * A component that gets rendered on the upper side of the main toolbar.
      * `toolbarExtraWidget` has no effect if this is set.
      */
-    FireCMSAppBarComponent?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
+    FireCMSAppBar?: React.ComponentType<FireCMSAppBarProps<ExtraAppbarProps>>;
 
     /**
      * Additional props passed to the custom AppBar
      */
-    fireCMSAppBarComponentProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
+    fireCMSAppBarProps?: Partial<FireCMSAppBarProps> & ExtraAppbarProps;
 
 }
 
@@ -77,8 +80,8 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
             autoOpenDrawer,
             Drawer = DefaultDrawer,
             drawerProps,
-            FireCMSAppBarComponent = FireCMSAppBar,
-            fireCMSAppBarComponentProps,
+            FireCMSAppBar = DefaultFireCMSAppBar,
+            fireCMSAppBarProps,
         } = props;
 
         const largeLayout = useLargeLayout();
@@ -108,10 +111,10 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                     // }
                 }}>
 
-                <FireCMSAppBarComponent title={name}
+                <FireCMSAppBar title={name}
                                         includeDrawer={includeDrawer}
                                         drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarComponentProps}/>
+                                        {...fireCMSAppBarProps}/>
 
                 <StyledDrawer
                     displayed={includeDrawer}
@@ -127,7 +130,7 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                             hovered={onHover}
                             drawerOpen={computedDrawerOpen}
                             closeDrawer={handleDrawerClose}
-                            {...drawerProps}/> )}
+                            {...drawerProps}/>)}
                 </StyledDrawer>
 
                 <main

package/src/form/EntityForm.tsx

@@ -206,6 +206,8 @@ function EntityFormInternal<M extends Record<string, any>>({
     const [entityIdError, setEntityIdError] = React.useState<boolean>(false);
     const [savingError, setSavingError] = React.useState<Error | undefined>();
 
+    const [customIdLoading, setCustomIdLoading] = React.useState<boolean>(false);
+
     const initialValuesRef = useRef<EntityValues<M>>(entity?.values ?? baseDataSourceValues as EntityValues<M>);
     const initialValues = initialValuesRef.current;
     const [internalValues, setInternalValues] = useState<EntityValues<M> | undefined>(initialValues);
@@ -234,10 +236,12 @@ function EntityFormInternal<M extends Record<string, any>>({
     });
 
     const onIdUpdate = inputCollection.callbacks?.onIdUpdate;
-    useEffect(() => {
+
+    const doOnIdUpdate = useCallback(async () => {
         if (onIdUpdate && internalValues && (status === "new" || status === "copy")) {
+            setCustomIdLoading(true);
             try {
-                const updatedId = onIdUpdate({
+                const updatedId = await onIdUpdate({
                     collection: resolvedCollection,
                     path,
                     entityId,
@@ -249,9 +253,14 @@ function EntityFormInternal<M extends Record<string, any>>({
                 onIdUpdateError && onIdUpdateError(e);
                 console.error(e);
             }
+            setCustomIdLoading(false);
         }
     }, [entityId, internalValues, status]);
 
+    useEffect(() => {
+        doOnIdUpdate();
+    }, [doOnIdUpdate]);
+
     const underlyingChanges: Partial<EntityValues<M>> = useMemo(() => {
         if (initialValues && status === "existing") {
             return Object.entries(resolvedCollection.properties)
@@ -437,6 +446,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                                            status={status}
                                            onChange={setEntityId}
                                            error={entityIdError}
+                                           loading={customIdLoading}
                                            entity={entity}/>}
 
                         {entityId && <InnerForm

package/src/form/components/CustomIdField.tsx

@@ -6,7 +6,16 @@ import { Entity, EntityStatus, EnumValueConfig, EnumValues } from "../../types";
 
 import { useClipboard, useSnackbarController } from "../../hooks";
 import { enumToObjectEntries } from "../../util";
-import { ContentCopyIcon, IconButton, OpenInNewIcon, Select, SelectItem, TextField, Tooltip } from "@firecms/ui";
+import {
+    CircularProgress,
+    ContentCopyIcon,
+    IconButton,
+    OpenInNewIcon,
+    Select,
+    SelectItem,
+    TextField,
+    Tooltip
+} from "@firecms/ui";
 import { EnumValuesChip } from "../../preview";
 import { useCustomizationController } from "../../hooks/useCustomizationController";
 import { CustomizationController } from "../../types/customization_controller";
@@ -17,14 +26,16 @@ export function CustomIdField<M extends Record<string, any>>({
                                                                  status,
                                                                  onChange,
                                                                  error,
-                                                                 entity
+                                                                 entity,
+                                                                 loading
                                                              }: {
     customId?: boolean | EnumValues | "optional"
     entityId?: string
     status: EntityStatus,
     onChange: (id?: string) => void,
     error: boolean,
-    entity: Entity<M> | undefined
+    entity: Entity<M> | undefined,
+    loading: boolean
 }) {
 
     const disabled = status === "existing" || !customId;
@@ -48,7 +59,7 @@ export function CustomIdField<M extends Record<string, any>>({
 
     const fieldProps = {
         label: idSetAutomatically ? "ID is set automatically" : "ID",
-        disabled,
+        disabled: disabled || loading,
         name: "id",
         value: (entity && status === "existing" ? entity.id : entityId) ?? "",
         endAdornment: entity
@@ -109,6 +120,7 @@ export function CustomIdField<M extends Record<string, any>>({
             {!enumValues &&
                 <TextField {...fieldProps}
                            error={error}
+                           endAdornment={loading ? <CircularProgress size={"small"}/> : undefined}
                            placeholder={customId === "optional" ? "Autogenerated ID, it can be manually changed" : (status === "new" || status === "copy" ? "ID of the new document" : "ID of the document")}
                            onChange={(event) => {
                                let value = event.target.value;

package/src/form/components/ErrorFocus.tsx

@@ -21,7 +21,7 @@ export const ErrorFocus = ({ containerRef }:
                 if (scrollableParent) {
                     const top = errorElement.getBoundingClientRect().top;
                     scrollableParent.scrollTo({
-                        top: scrollableParent.scrollTop + top - 64,
+                        top: scrollableParent.scrollTop + top,
                         behavior: "smooth"
                     });
                 }

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

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

package/src/form/field_bindings/MarkdownFieldBinding.tsx

@@ -13,9 +13,9 @@ import {
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
-    Typography
+    Typography,
+    useInjectStyles
 } from "@firecms/ui";
-import { useInjectStyles } from "@firecms/ui";
 
 const mdParser = new MarkdownIt();
 try {

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -4,10 +4,9 @@ import { Entity, FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
 import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { ErrorBoundary, LabelWithIcon } from "../../components";
 import { getIconForProperty } from "../../util";
 import { cn, paperMixin } from "@firecms/ui";
-import { ErrorBoundary } from "../../components";
 
 /**
  *

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -4,11 +4,10 @@ import { Entity, EntityCollection, EntityReference, FieldProps } from "../../typ
 import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
 import { FieldHelperText } from "../components";
-import { LabelWithIcon } from "../../components";
+import { ErrorView, LabelWithIcon } from "../../components";
 import { ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 import { Button } from "@firecms/ui";
-import { ErrorView } from "../../components";
 
 /**
  * Field that opens a reference selection dialog.

package/src/hooks/useLargeLayout.tsx

@@ -22,13 +22,14 @@ const notifyListeners = () => {
 };
 
 // Listen to resize events once, at a global level
-window.addEventListener("resize", () => {
-    const newIsLargeLayout = checkLargeLayout("lg");
-    if (newIsLargeLayout !== isLargeLayoutGlobal) {
-        isLargeLayoutGlobal = newIsLargeLayout;
-        notifyListeners();
-    }
-});
+if (typeof window !== "undefined")
+    window.addEventListener("resize", () => {
+        const newIsLargeLayout = checkLargeLayout("lg");
+        if (newIsLargeLayout !== isLargeLayoutGlobal) {
+            isLargeLayoutGlobal = newIsLargeLayout;
+            notifyListeners();
+        }
+    });
 
 export const useLargeLayout = () => {
     const [isLargeLayout, setIsLargeLayout] = useState(isLargeLayoutGlobal);
@@ -58,6 +59,8 @@ export const useLargeLayout = () => {
 };
 
 function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean {
+    if (typeof window === "undefined")
+        return false;
     return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
 }
 

package/src/internal/useBuildDataSource.ts

@@ -276,27 +276,27 @@ export function useBuildDataSource({
             return delegate.generateEntityId(path,);
         }, [delegate.generateEntityId]),
 
-        countEntities: useCallback(async ({
-                                              path,
-                                              collection,
-                                              filter,
-                                              order,
-                                              orderBy
-                                          }: {
+        countEntities: delegate.countEntities ? async ({
+                                                           path,
+                                                           collection,
+                                                           filter,
+                                                           order,
+                                                           orderBy
+                                                       }: {
             path: string,
             collection: EntityCollection<any>,
             filter?: FilterValues<Extract<keyof any, string>>,
             orderBy?: string,
             order?: "desc" | "asc",
         }): Promise<number> => {
-            return delegate.countEntities({
+            return delegate.countEntities!({
                 path,
                 filter,
                 orderBy,
                 order,
                 isCollectionGroup: Boolean(collection.collectionGroup) ?? false
             });
-        }, [delegate.countEntities]),
+        } : undefined,
 
         isFilterCombinationValid: useCallback(({
                                                    path,

package/src/preview/PropertyPreviewProps.tsx

@@ -1,4 +1,4 @@
-import { CMSType, Entity, Property, ResolvedProperty } from "../types";
+import { CMSType, Property, ResolvedProperty } from "../types";
 
 /**
  * @group Preview components

package/src/types/datasource.ts

@@ -29,7 +29,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";
@@ -209,7 +209,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
@@ -354,7 +354,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

package/src/types/entity_callbacks.ts

@@ -65,7 +65,8 @@ 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>;
+
 }
 
 /**

package/src/util/strings.ts

@@ -50,7 +50,8 @@ export function slugify(text?: string, separator = "_", lowercase = true) {
         : text;
 }
 
-export function unslugify(slug: string): string {
+export function unslugify(slug?: string): string {
+    if (!slug) return "";
     if (slug.includes("-") || slug.includes("_") || !slug.includes(" ")) {
         const result = slug.replace(/[-_]/g, " ");
         return result.replace(/\w\S*/g, function (txt) {