@firecms/core 3.0.0-alpha.27 → 3.0.0-alpha.29

package/src/components/TextareaAutosize.tsx

@@ -55,6 +55,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
         onFocus,
         onBlur,
         sizeRef,
+        ignoreBoxSizing,
         ...other
     } = props;
 
@@ -124,7 +125,7 @@ export const TextareaAutosize = React.forwardRef(function TextareaAutosize(
         outerHeight = Math.max(outerHeight, singleRowHeight, minHeight);
 
         // Take the box sizing into account for applying this value as a style.
-        const outerHeightStyle = outerHeight + (!props.ignoreBoxSizing && boxSizing === "border-box" ? padding + border : 0);
+        const outerHeightStyle = outerHeight + (!ignoreBoxSizing && boxSizing === "border-box" ? padding + border : 0);
 
         const overflow = Math.abs(outerHeight - innerHeight) <= 1;
 

package/src/core/FireCMS.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 
-import { FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { BreadcrumbsProvider } from "./contexts/BreacrumbsContext";
 import { ModeControllerContext } from "./contexts/ModeController";
 import { useBuildSideEntityController } from "./internal/useBuildSideEntityController";
@@ -17,6 +17,7 @@ import { AuthControllerContext } from "./contexts/AuthControllerContext";
 import { SideDialogsControllerContext } from "./contexts/SideDialogsControllerContext";
 import { useLocaleConfig } from "./internal/useLocaleConfig";
 import { CenteredView } from "../components";
+import { DialogsProvider } from "./contexts/DialogsProvider";
 
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
@@ -34,7 +35,7 @@ const DEFAULT_COLLECTION_PATH = "/c";
  * @constructor
  * @category Core
  */
-export function FireCMS<UserType extends User>(props: FireCMSProps<UserType>) {
+export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
 
     const modeController = useModeController();
     const {
@@ -124,10 +125,12 @@ export function FireCMS<UserType extends User>(props: FireCMSProps<UserType>) {
                                         <NavigationContextInstance.Provider
                                             value={navigation}>
                                             <BreadcrumbsProvider>
-                                                <FireCMSInternal
-                                                    loading={loading}>
-                                                    {children}
-                                                </FireCMSInternal>
+                                                <DialogsProvider>
+                                                    <FireCMSInternal
+                                                        loading={loading}>
+                                                        {children}
+                                                    </FireCMSInternal>
+                                                </DialogsProvider>
                                             </BreadcrumbsProvider>
                                         </NavigationContextInstance.Provider>
                                     </SideEntityControllerContext.Provider>

package/src/core/builders.ts

@@ -8,7 +8,7 @@ import {
     EntityCollection,
     EnumValueConfig,
     EnumValues,
-    FieldConfig,
+    PropertyConfig,
     GeopointProperty,
     MapProperty,
     NumberProperty,
@@ -27,10 +27,10 @@ import {
  * @category Builder
  */
 export function buildCollection<M extends Record<string, any> = any,
-    AdditionalKey extends string = string,
+
     UserType extends User = User>(
-    collection: EntityCollection<M, AdditionalKey, UserType>
-): EntityCollection<M, AdditionalKey, UserType> {
+    collection: EntityCollection<M,  UserType>
+): EntityCollection<M,  UserType> {
     return collection;
 }
 
@@ -121,20 +121,20 @@ export function buildEntityCallbacks<M extends Record<string, any> = any>(
  * @param additionalFieldDelegate
  * @category Builder
  */
-export function buildAdditionalFieldDelegate<M extends Record<string, any>, AdditionalKey extends string = string, UserType extends User = User>(
-    additionalFieldDelegate: AdditionalFieldDelegate<M, AdditionalKey, UserType>
-): AdditionalFieldDelegate<M, AdditionalKey, UserType> {
+export function buildAdditionalFieldDelegate<M extends Record<string, any>,  UserType extends User = User>(
+    additionalFieldDelegate: AdditionalFieldDelegate<M,  UserType>
+): AdditionalFieldDelegate<M,  UserType> {
     return additionalFieldDelegate;
 }
 
 /**
  * Identity function we use to defeat the type system of Typescript and build
  * additional field delegates views with all its properties
- * @param fieldConfig
+ * @param propertyConfig
  * @category Builder
  */
 export function buildFieldConfig<T extends CMSType = CMSType>(
-    fieldConfig: FieldConfig<T>
-): FieldConfig<T> {
-    return fieldConfig;
+    propertyConfig: PropertyConfig<T>
+): PropertyConfig<T> {
+    return propertyConfig;
 }

package/src/core/components/ArrayContainer.tsx

@@ -175,7 +175,7 @@ export function ArrayContainer<T>({
 
                         {droppableProvided.placeholder}
 
-                        {includeAddButton && <div className="p-4 justify-center text-left">
+                        {includeAddButton && <div className="py-4 justify-center text-left">
                             <Button
                                 variant={size === "small" ? "text" : "outlined"}
                                 size={size === "small" ? "small" : "medium"}

package/src/core/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -63,7 +63,7 @@ export const useEntityCollectionTableController = () => useContext<EntityCollect
  * @category Components
  */
 export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>(
-    function EntityCollectionTable<M extends Record<string, any>, AdditionalKey extends string, UserType extends User>
+    function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
     ({
          forceFilter,
          actionsStart,
@@ -110,7 +110,9 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
          endAdornment,
          AddColumnComponent,
          AdditionalHeaderWidget,
-         additionalIDHeaderWidget
+         additionalIDHeaderWidget,
+         emptyComponent,
+         getIdColumnWidth
      }: EntityCollectionTableProps<M>) {
 
         const largeLayout = useLargeLayout();
@@ -154,12 +156,12 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const onTextSearch = useCallback((newSearchString?: string) => setSearchString?.(newSearchString), []);
 
-        const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, string, UserType>> = useMemo(() => {
+        const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, UserType>> = useMemo(() => {
             return (additionalFields
                 ? additionalFields
-                    .map((aC) => ({ [aC.id]: aC as AdditionalFieldDelegate<M, string, any> }))
+                    .map((aC) => ({ [aC.id]: aC as AdditionalFieldDelegate<M, any> }))
                     .reduce((a, b) => ({ ...a, ...b }), {})
-                : {}) as Record<string, AdditionalFieldDelegate<M, string, UserType>>;
+                : {}) as Record<string, AdditionalFieldDelegate<M, UserType>>;
         }, [additionalFields]);
 
         // on ESC key press
@@ -198,7 +200,11 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
             let disabled = column.custom?.disabled;
             const propertyValue = entity.values ? getValueInPath(entity.values, propertyKey) : undefined;
-            const property = getPropertyFor?.({ propertyKey, propertyValue, entity }) ?? column.custom.resolvedProperty;
+            const property = getPropertyFor?.({
+                propertyKey,
+                propertyValue,
+                entity
+            }) ?? column.custom.resolvedProperty;
             if (!property?.disabled) {
                 disabled = false;
             }
@@ -238,7 +244,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
             const entity: Entity<M> = rowData;
 
-            const additionalField = additionalFieldsMap[column.key as AdditionalKey];
+            const additionalField = additionalFieldsMap[column.key as string];
             const value = additionalField.dependencies
                 ? Object.entries(entity.values)
                     .filter(([key, value]) => additionalField.dependencies!.includes(key as Extract<keyof M, string>))
@@ -318,14 +324,14 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         const idColumn: VirtualTableColumn = useMemo(() => ({
             key: "id_ewcfedcswdf3",
-            width: largeLayout ? 160 : 130,
+            width: getIdColumnWidth?.() ?? (largeLayout ? 160 : 130),
             title: "ID",
             resizable: false,
             frozen: largeLayout,
             headerAlign: "center",
             align: "center",
             AdditionalHeaderWidget: () => additionalIDHeaderWidget
-        }), [largeLayout])
+        }), [getIdColumnWidth, largeLayout])
 
         const columns: VirtualTableColumn[] = useMemo(() => [
             idColumn,
@@ -410,6 +416,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                         sortBy={sortBy}
                         onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
                         hoverRow={hoverRow}
+                        emptyComponent={emptyComponent}
                         checkFilterCombination={checkFilterCombination}
                         createFilterField={filterable ? createFilterField : undefined}
                         rowClassName={useCallback((entity: Entity<M>) => {
@@ -433,8 +440,8 @@ function createFilterField({
                                filterValue,
                                setFilterValue,
                                column,
-                               popupOpen,
-                               setPopupOpen
+                               hidden,
+                               setHidden
                            }: FilterFormFieldProps<{
     resolvedProperty: ResolvedProperty,
     disabled: boolean,
@@ -459,8 +466,8 @@ function createFilterField({
                                      path={baseProperty.path}
                                      title={resolvedProperty?.name}
                                      previewProperties={baseProperty?.previewProperties}
-                                     popupOpen={popupOpen}
-                                     setPopupOpen={setPopupOpen}/>;
+                                     hidden={hidden}
+                                     setHidden={setHidden}/>;
     } else if (baseProperty.dataType === "number" || baseProperty.dataType === "string") {
         const name = baseProperty.name;
         const enumValues = baseProperty.enumValues ? enumToObjectEntries(baseProperty.enumValues) : undefined;

package/src/core/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -21,7 +21,7 @@ export type OnColumnResizeParams = { width: number, key: string };
  * @category Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
-    AdditionalKey extends string = string,
+
     UserType extends User = User> = {
 
     /**
@@ -105,7 +105,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     inlineEditing?: boolean | ((entity: Entity<M>) => boolean);
 
-    additionalFields?: AdditionalFieldDelegate<M, AdditionalKey, UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M,  UserType>[];
 
     defaultSize?: CollectionSize;
 
@@ -129,6 +129,9 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     additionalIDHeaderWidget?: React.ReactNode;
 
+    emptyComponent?: React.ReactNode;
+
+    getIdColumnWidth?: () => number;
 }
 
 export type GetPropertyForProps<M extends Record<string, any>> = {

package/src/core/components/EntityCollectionTable/filters/ReferenceFilterField.tsx

@@ -15,8 +15,8 @@ interface ReferenceFilterFieldProps {
     path?: string;
     title?: string;
     previewProperties?: string[];
-    popupOpen: boolean;
-    setPopupOpen: (open: boolean) => void;
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
 }
 
 const operationLabels = {
@@ -42,7 +42,7 @@ export function ReferenceFilterField({
                                          path,
                                          title,
                                          previewProperties,
-                                         setPopupOpen
+                                         setHidden
                                      }: ReferenceFilterFieldProps) {
 
     const possibleOperations: (keyof typeof operationLabels) [] = isArray
@@ -118,13 +118,13 @@ export function ReferenceFilterField({
             onMultipleEntitiesSelected,
             selectedEntityIds,
             onClose: () => {
-                setPopupOpen(true);
+                setHidden(false);
             }
         }
     );
 
     const doOpenDialog = () => {
-        setPopupOpen(false);
+        setHidden(true);
         referenceDialogController.open();
     };
 
@@ -148,6 +148,10 @@ export function ReferenceFilterField({
         );
     };
 
+    console.log("ReferenceFilterField", {
+        internalValue
+
+    })
     return (
 
         <div className="flex w-[440px] flex-row">
@@ -175,7 +179,8 @@ export function ReferenceFilterField({
                 </div>}
                 {(!internalValue || (Array.isArray(internalValue) && internalValue.length === 0)) &&
                     <Button onClick={doOpenDialog}
-                            className="h-full">
+                            variant={"outlined"}
+                            className="h-full w-full">
                         {multiple ? "Select references" : "Select reference"}
                     </Button>
                 }

package/src/core/components/EntityCollectionTable/internal/EntityCollectionRowActions.tsx

@@ -1,12 +1,11 @@
 import React, { MouseEvent, useCallback } from "react";
+import equal from "react-fast-compare"
 
-import { CollectionSize, Entity } from "../../../../types";
-import { Checkbox, IconButton, Tooltip, Typography } from "../../../../components";
-import { useLargeLayout } from "../../../../hooks/useLargeLayout";
-import { DeleteIcon, FileCopyIcon, KeyboardTabIcon, MoreVertIcon } from "../../../../icons";
-import { Menu, MenuItem } from "../../../../components/Menu";
+import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../../../types";
+import { Checkbox, cn, IconButton, Menu, MenuItem, Tooltip, Typography } from "../../../../components";
+import { useFireCMSContext, useLargeLayout } from "../../../../hooks";
+import { MoreVertIcon } from "../../../../icons";
 import { Skeleton } from "../../../../components/Skeleton";
-import { cn } from "../../../../components/util/cn";
 
 /**
  *
@@ -25,62 +24,57 @@ import { cn } from "../../../../components/util/cn";
  *
  * @category Collection components
  */
-export function EntityCollectionRowActions<M extends Record<string, any>>({
-                                                                              entity,
-                                                                              width,
-                                                                              frozen,
-                                                                              isSelected,
-                                                                              selectionEnabled,
-                                                                              size,
-                                                                              toggleEntitySelection,
-                                                                              onCopyClicked,
-                                                                              onEditClicked,
-                                                                              onDeleteClicked,
-                                                                              hideId
-                                                                          }:
-                                                                              {
-                                                                                  entity: Entity<M>,
-                                                                                  width: number,
-                                                                                  frozen?: boolean,
-                                                                                  size: CollectionSize,
-                                                                                  isSelected: boolean,
-                                                                                  selectionEnabled?: boolean,
-                                                                                  toggleEntitySelection?: (selectedEntity: Entity<M>) => void
-                                                                                  onEditClicked?: (selectedEntity: Entity<M>) => void,
-                                                                                  onCopyClicked?: (selectedEntity: Entity<M>) => void,
-                                                                                  onDeleteClicked?: (selectedEntity: Entity<M>) => void,
-                                                                                  hideId?: boolean
-                                                                              }) {
+export const EntityCollectionRowActions = React.memo(function EntityCollectionRowActions({
+                                                                                             entity,
+                                                                                             collection,
+                                                                                             fullPath,
+                                                                                             width,
+                                                                                             frozen,
+                                                                                             isSelected,
+                                                                                             selectionEnabled,
+                                                                                             size,
+                                                                                             highlightEntity,
+                                                                                             onCollectionChange,
+                                                                                             unhighlightEntity,
+                                                                                             actions = [],
+                                                                                             hideId,
+                                                                                             selectionController
+                                                                                         }:
+                                                                                             {
+                                                                                                 entity: Entity<any>,
+                                                                                                 collection?: EntityCollection<any>,
+                                                                                                 fullPath?: string,
+                                                                                                 width: number,
+                                                                                                 frozen?: boolean,
+                                                                                                 size: CollectionSize,
+                                                                                                 isSelected: boolean,
+                                                                                                 selectionEnabled?: boolean,
+                                                                                                 actions?: EntityAction[],
+                                                                                                 hideId?: boolean,
+                                                                                                 onCollectionChange?: () => void,
+                                                                                                 selectionController?: SelectionController;
+                                                                                                 highlightEntity?: (entity: Entity<any>) => void;
+                                                                                                 unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                             }) {
 
     const largeLayout = useLargeLayout();
 
-    const editEnabled = Boolean(onEditClicked);
-    const copyEnabled = Boolean(onCopyClicked);
-    const deleteEnabled = Boolean(onDeleteClicked);
+    const context = useFireCMSContext();
 
     const onCheckedChange = useCallback((checked: boolean) => {
-        if (toggleEntitySelection)
-            toggleEntitySelection(entity);
-    }, [entity, toggleEntitySelection]);
-
-    const onDeleteClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        if (onDeleteClicked)
-            onDeleteClicked(entity);
-    }, [entity, onDeleteClicked]);
-
-    const onCopyClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        if (onCopyClicked)
-            onCopyClicked(entity);
-    }, [entity, onCopyClicked]);
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
 
     const onClick = useCallback((event: MouseEvent) => {
         event.stopPropagation();
-        if (toggleEntitySelection)
-            toggleEntitySelection(entity);
-    }, [entity, toggleEntitySelection]);
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const hasActions = actions.length > 0;
+    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
 
+    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
+    const uncollapsedActions = actions.filter(a => a.collapsed === false);
     return (
         <div
             onClick={onClick}
@@ -95,20 +89,58 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
                 contain: "strict"
             }}>
 
-            {(editEnabled || deleteEnabled || selectionEnabled) &&
+            {(hasActions || selectionEnabled) &&
                 <div className="w-34 flex justify-center">
-                    {editEnabled &&
-                        <Tooltip title={`Edit ${entity.id}`}>
+
+                    {uncollapsedActions.map((action, index) => (
+                        <Tooltip key={index} title={action.name}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
-                                    if (onEditClicked)
-                                        onEditClicked(entity);
+                                    action.onClick({
+                                        entity,
+                                        fullPath,
+                                        collection,
+                                        context,
+                                        selectionController,
+                                        highlightEntity,
+                                        unhighlightEntity,
+                                        onCollectionChange
+                                    });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
-                                <KeyboardTabIcon/>
+                                {action.icon}
                             </IconButton>
                         </Tooltip>
+                    ))}
+
+                    {hasCollapsedActions &&
+                        <Menu
+                            trigger={<IconButton
+                                size={largeLayout ? "medium" : "small"}>
+                                <MoreVertIcon/>
+                            </IconButton>}>
+                            {collapsedActions.map((action, index) => (
+                                <MenuItem
+                                    key={index}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick({
+                                            entity,
+                                            fullPath,
+                                            collection,
+                                            context,
+                                            selectionController,
+                                            highlightEntity,
+                                            unhighlightEntity,
+                                            onCollectionChange
+                                        });
+                                    }}>
+                                    {action.icon}
+                                    {action.name}
+                                </MenuItem>
+                            ))}
+                        </Menu>
                     }
 
                     {selectionEnabled &&
@@ -120,24 +152,6 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
                             />
                         </Tooltip>}
 
-                    {(copyEnabled || deleteEnabled) &&
-                        <Menu
-                            trigger={<IconButton
-                                size={largeLayout ? "medium" : "small"}>
-                                <MoreVertIcon/>
-                            </IconButton>}>
-                            {deleteEnabled && <MenuItem onClick={onDeleteClick}>
-                                <DeleteIcon/>
-                                Delete
-                            </MenuItem>}
-
-                            {copyEnabled && <MenuItem onClick={onCopyClick}>
-                                <FileCopyIcon/>
-                                Copy
-                            </MenuItem>}
-                        </Menu>
-                    }
-
                 </div>}
 
             {!hideId && size !== "xs" && (
@@ -145,7 +159,10 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
 
                     {entity
                         ? <Typography
-                            className={"font-mono"}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                            }}
+                            className={"font-mono select-all"}
                             variant={"caption"}
                             color={"secondary"}> {entity.id} </Typography>
                         : <Skeleton/>
@@ -156,4 +173,4 @@ export function EntityCollectionRowActions<M extends Record<string, any>>({
         </div>
     );
 
-}
+}, equal);

package/src/core/components/EntityCollectionTable/internal/PropertyTableCell.tsx

@@ -375,7 +375,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
                             hideOverflow = false;
                         }
                     } else if (arrayProperty.of.dataType === "reference") {
-                        if (typeof arrayProperty.of.key === "string") {
+                        if (typeof arrayProperty.of.path === "string") {
                             innerComponent =
                                 <TableReferenceField
                                     name={propertyKey as string}
@@ -384,7 +384,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
                                     updateValue={updateValue}
                                     size={size}
                                     multiselect={true}
-                                    path={arrayProperty.of.key}
+                                    path={arrayProperty.of.path}
                                     previewProperties={arrayProperty.of.previewProperties}
                                     title={arrayProperty.of.name}
                                     forceFilter={arrayProperty.of.forceFilter}