@firecms/core 3.0.0-beta.11 → 3.0.0-beta.12

package/src/components/ArrayContainer.tsx

@@ -41,6 +41,8 @@ export interface ArrayContainerProps<T> {
     newDefaultEntry: T;
     onValueChange: (value: T[]) => void,
     className?: string;
+    min?: number;
+    max?: number;
 }
 
 const buildIdsMap = (value: any[]) =>
@@ -67,7 +69,9 @@ export function ArrayContainer<T>({
                                       includeAddButton,
                                       newDefaultEntry,
                                       onValueChange,
-                                      className
+                                      className,
+                                      min = 0,
+                                      max = Infinity
                                   }: ArrayContainerProps<T>) {
 
     const hasValue = value && Array.isArray(value) && value.length > 0;
@@ -78,7 +82,8 @@ export function ArrayContainer<T>({
     const [internalIds, setInternalIds] = useState<number[]>(
         hasValue
             ? Object.values(internalIdsRef.current)
-            : []);
+            : []
+    );
 
     const itemCustomPropsRef = useRef<Record<number, object>>({});
 
@@ -104,7 +109,7 @@ export function ArrayContainer<T>({
 
     const insertInEnd = (e: React.SyntheticEvent) => {
         e.preventDefault();
-        if (disabled) return;
+        if (disabled || (value ?? []).length >= max) return;
         const id = getRandomId();
         const newIds: number[] = [...internalIds, id];
         if (onInternalIdAdded)
@@ -114,6 +119,7 @@ export function ArrayContainer<T>({
     };
 
     const remove = (index: number) => {
+        if ((value ?? []).length <= min) return;
         const newIds = [...internalIds];
         newIds.splice(index, 1);
         setInternalIds(newIds);
@@ -121,12 +127,14 @@ export function ArrayContainer<T>({
     };
 
     const copy = (index: number) => {
+        if ((value ?? []).length >= max) return;
         const id = getRandomId();
         const copyingItem = value[index];
         const newIds: number[] = [
-            ...internalIds.splice(0, index + 1),
+            ...internalIds.slice(0, index + 1),
             id,
-            ...internalIds.splice(index + 1, internalIds.length - index - 1)];
+            ...internalIds.slice(index + 1)
+        ];
         if (onInternalIdAdded)
             onInternalIdAdded(id);
         setInternalIds(newIds);
@@ -135,11 +143,13 @@ export function ArrayContainer<T>({
     };
 
     const addInIndex = (index: number) => {
+        if ((value ?? []).length >= max) return;
         const id = getRandomId();
         const newIds: number[] = [
-            ...internalIds.splice(0, index),
+            ...internalIds.slice(0, index),
             id,
-            ...internalIds.slice(index)];
+            ...internalIds.slice(index)
+        ];
         if (onInternalIdAdded)
             onInternalIdAdded(id);
         setInternalIds(newIds);
@@ -183,6 +193,7 @@ export function ArrayContainer<T>({
                                    storedProps={itemCustomPropsRef.current[internalId]}
                                    updateItemCustomProps={updateItemCustomProps}
                                    addInIndex={addInIndex}
+                                   includeAddButton={includeAddButton}
                                />
                            );
                        }}
@@ -213,6 +224,7 @@ export function ArrayContainer<T>({
                                             storedProps={itemCustomPropsRef.current[internalId]}
                                             updateItemCustomProps={updateItemCustomProps}
                                             addInIndex={addInIndex}
+                                            includeAddButton={includeAddButton}
                                         />
                                     )}
                                 </Draggable>
@@ -221,17 +233,19 @@ export function ArrayContainer<T>({
 
                         {droppableProvided.placeholder}
 
-                        {includeAddButton && <div className="py-4 justify-center text-left">
-                            <Button
-                                variant={"text"}
-                                size={size === "small" ? "small" : "medium"}
-                                color="primary"
-                                disabled={disabled}
-                                startIcon={<AddIcon/>}
-                                onClick={insertInEnd}>
-                                {addLabel ?? "Add"}
-                            </Button>
-                        </div>}
+                        {includeAddButton && (
+                            <div className="my-4 justify-center text-left">
+                                <Button
+                                    variant={"text"}
+                                    size={size === "small" ? "small" : "medium"}
+                                    color="primary"
+                                    disabled={disabled || value?.length >= max}
+                                    startIcon={<AddIcon/>}
+                                    onClick={insertInEnd}>
+                                    {addLabel ?? "Add"}
+                                </Button>
+                            </div>
+                        )}
                     </div>
                 )}
             </Droppable>
@@ -249,6 +263,7 @@ type ArrayContainerItemProps = {
     remove: (index: number) => void,
     copy: (index: number) => void,
     addInIndex?: (index: number) => void,
+    includeAddButton?: boolean,
     isDragging: boolean,
     storedProps?: object,
     updateItemCustomProps: (internalId: number, props: object) => void
@@ -263,6 +278,7 @@ export function ArrayContainerItem({
                                        buildEntry,
                                        remove,
                                        addInIndex,
+                                       includeAddButton,
                                        copy,
                                        isDragging,
                                        storedProps,
@@ -273,7 +289,7 @@ export function ArrayContainerItem({
         ref={provided.innerRef}
         {...provided.draggableProps}
         style={provided.draggableProps.style}
-        className={`${
+        className={`relative ${
             !isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""
         } rounded-md opacity-100`}
     >
@@ -295,6 +311,7 @@ export function ArrayContainerItem({
                               index={index}
                               provided={provided}
                               addInIndex={addInIndex}
+                              includeAddButton={includeAddButton}
                               copy={copy}/>
         </div>
     </div>;
@@ -307,6 +324,7 @@ export function ArrayItemOptions({
                                      index,
                                      provided,
                                      copy,
+                                     includeAddButton,
                                      addInIndex
                                  }: {
     direction?: "row" | "column",
@@ -315,6 +333,7 @@ export function ArrayItemOptions({
     index: number,
     provided: any,
     copy: (index: number) => void,
+    includeAddButton?: boolean,
     addInIndex?: (index: number) => void
 }) {
 
@@ -365,20 +384,20 @@ export function ArrayItemOptions({
                     Copy
                 </MenuItem>
 
-                {addInIndex && <MenuItem dense
-                                         onClick={() => {
-                                             setMenuOpen(false);
-                                             addInIndex(index);
-                                         }}>
+                {includeAddButton && addInIndex && <MenuItem dense
+                                                             onClick={() => {
+                                                                 setMenuOpen(false);
+                                                                 addInIndex(index);
+                                                             }}>
                     <KeyboardArrowUpIcon size={"small"}/>
                     Add on top
                 </MenuItem>}
 
-                {addInIndex && <MenuItem dense
-                                         onClick={() => {
-                                             setMenuOpen(false);
-                                             addInIndex(index + 1);
-                                         }}>
+                {includeAddButton && addInIndex && <MenuItem dense
+                                                             onClick={() => {
+                                                                 setMenuOpen(false);
+                                                                 addInIndex(index + 1);
+                                                             }}>
                     <KeyboardArrowDownIcon size={"small"}/>
                     Add below
                 </MenuItem>}

package/src/components/CircularProgressCenter.tsx

@@ -13,7 +13,7 @@ export function CircularProgressCenter({ text, ...props }: CircularProgressProps
 }) {
     return (
         <div
-            className="flex w-full h-screen max-h-full max-w-full bg-surface-50 dark:bg-surface-900 gap-4">
+            className="flex w-full h-screen max-h-full max-w-full gap-4">
             <div className="m-auto flex flex-col gap-2 items-center">
                 <CircularProgress {...props}/>
                 {text && <Typography

package/src/components/DeleteEntityDialog.tsx

@@ -181,7 +181,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
             </DialogContent>
             <DialogActions>
 
-                {loading && <CircularProgress size={"small"}/>}
+                {loading && <CircularProgress size={"smallest"}/>}
 
                 <Button onClick={handleCancel}
                         disabled={loading}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,8 +1,20 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
+import {
+    Checkbox,
+    Chip,
+    cls,
+    EditIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Skeleton,
+    Tooltip
+} from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
+import { hasEntityInCache } from "../../util/entity_cache";
 
 /**
  *
@@ -32,23 +44,25 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   actions = [],
                                                                                   hideId,
                                                                                   selectionController,
+                                                                                  openEntityMode
                                                                               }:
-                                                                                  {
-                                                                                      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;
-                                                                                  }) {
+                                                                              {
+                                                                                  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;
+                                                                                  openEntityMode: "side_panel" | "full_screen";
+                                                                              }) {
 
     const largeLayout = useLargeLayout();
 
@@ -63,6 +77,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
     return (
         <div
             className={cls(
@@ -98,6 +113,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                         highlightEntity,
                                         unhighlightEntity,
                                         onCollectionChange,
+                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -126,6 +142,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             highlightEntity,
                                             unhighlightEntity,
                                             onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
                                     {action.icon}
@@ -148,11 +165,15 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
             {!hideId && size !== "xs" && (
                 <div
-                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center flex items-center justify-center gap-1"
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-
+                    {hasDraft && <Tooltip title={"Unsaved changes"} className={"inline"}>
+                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
+                            <EditIcon size={12}/>
+                        </Chip>
+                    </Tooltip>}
                     {entity
                         ? entity.id
                         : <Skeleton/>

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -34,14 +34,14 @@ import { getRowHeight } from "../common/table_height";
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
- * {@link useDataSourceEntityCollectionTableController}
+ * {@link useDataSourceTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
  * @see VirtualTable
  * @group Components
  */
-export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, USER extends User>
+export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any> = any, USER extends User = any>
 ({
      className,
      style,
@@ -57,6 +57,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      highlightedEntities,
      onEntityClick,
      onColumnResize,
+     initialScroll,
+     onScroll,
      onSizeChanged,
      textSearchEnabled = false,
      hoverRow = true,
@@ -76,7 +78,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      getIdColumnWidth,
      onTextSearchClick,
      textSearchLoading,
-     enablePopupIcon
+     enablePopupIcon,
+     openEntityMode = "side_panel"
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
@@ -265,7 +268,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                                                        width={column.width}
                                                        frozen={column.frozen}
                                                        isSelected={false}
-                                                       size={size}/>;
+                                                       size={size}
+                                                       openEntityMode={openEntityMode}/>;
             } else if (additionalFieldsMap[columnKey]) {
                 return additionalCellRenderer(props);
             } else if (props.columnIndex < columns.length + 1) {
@@ -313,6 +317,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                              highlightedRow={(entity: Entity<M>) => Boolean(selectedEntities?.find(e => e.id === entity.id && e.path === entity.path))}
                              tableController={tableController}
                              onValueChange={onValueChange}
+                             initialScroll={initialScroll}
+                             onScroll={onScroll}
                              onColumnResize={onColumnResize}
                              hoverRow={hoverRow}
                              filterable={filterable}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -72,6 +72,21 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     onColumnResize?(params: OnColumnResizeParams): void;
 
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     /**
      * Callback when the selected size of the table is changed
      */
@@ -90,7 +105,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -136,6 +151,8 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     textSearchLoading?: boolean;
 
     enablePopupIcon: boolean;
+
+    openEntityMode?: "side_panel" | "full_screen";
 };
 
 export type GetPropertyForProps<M extends Record<string, any>> = {

package/src/components/EntityCollectionTable/index.tsx

@@ -8,5 +8,5 @@ export type {
 
 export * from "./PropertyTableCell";
 export * from "./EntityCollectionRowActions";
-export * from "../common/useDataSourceEntityCollectionTableController";
+export * from "../common/useDataSourceTableController";
 export * from "./column_utils";

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

@@ -56,7 +56,7 @@ export function CollectionTableToolbar({
             <Select
                 value={size as string}
                 className="w-16 h-10"
-                size={"medium"}
+                size={"small"}
                 onValueChange={(v) => onSizeChanged(v as CollectionSize)}
                 renderValue={(v) => <div className={"font-medium"}>{v.toUpperCase()}</div>}
             >
@@ -87,9 +87,9 @@ export function CollectionTableToolbar({
 
             <div className="flex items-center gap-2">
 
-                {largeLayout && <div className="w-[22px]">
+                {largeLayout && <div className="w-[22px] mr-4">
                     {loading &&
-                        <CircularProgress size={"small"}/>}
+                        <CircularProgress size={"smallest"}/>}
                 </div>}
 
                 {(onTextSearch || onTextSearchClick) &&

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

@@ -20,10 +20,9 @@ import { useWindowSize } from "./useWindowSize";
 import { ElementResizeListener } from "./ElementResizeListener";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
-import { PropertyFieldBinding } from "../../../../form";
+import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
 import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
-import { yupToFormErrors } from "../../../../core/EntityEditView";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
     customFieldValidator?: CustomFieldValidator;
@@ -240,14 +239,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
                 .then(() => ({}))
-                .catch((e) => {
-                    // const errors: Record<string, string> = {};
-                    // e.inner.forEach((error: any) => {
-                    //     errors[error.path] = error.message;
-                    // });
-                    // return errors;
-                    return yupToFormErrors(e);
-                });
+                .catch(yupToFormErrors);
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {
@@ -278,7 +270,9 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         path,
         setFieldValue,
         save: saveValue,
-        formex
+        formex,
+        status: "existing",
+        openEntityMode: "side_panel",
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as ResolvedProperties, propertyKey as string);