@firecms/core 3.0.0-canary.21 → 3.0.0-canary.211

package/src/components/ArrayContainer.tsx

@@ -6,9 +6,12 @@ import { getHashValue } from "../util";
 import {
     AddIcon,
     Button,
+    cls,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin, HandleIcon,
+    HandleIcon,
     IconButton,
+    KeyboardArrowDownIcon,
+    KeyboardArrowUpIcon,
     Menu,
     MenuItem,
     RemoveIcon,
@@ -16,17 +19,30 @@ import {
     useOutsideAlerter
 } from "@firecms/ui";
 
-interface ArrayContainerProps<T> {
+export type ArrayEntryParams = {
+    index: number,
+    internalId: number,
+    isDragging: boolean,
+    storedProps?: object,
+    storeProps: (props: object) => void
+};
+
+export type ArrayEntryBuilder = (params: ArrayEntryParams) => React.ReactNode;
+
+export interface ArrayContainerProps<T> {
     droppableId: string;
     value: T[];
     addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
+    buildEntry: ArrayEntryBuilder;
     disabled?: boolean;
     size?: "small" | "medium";
     onInternalIdAdded?: (id: number) => void;
     includeAddButton?: boolean;
     newDefaultEntry: T;
-    onValueChange: (value: T[]) => void
+    onValueChange: (value: T[]) => void,
+    className?: string;
+    min?: number;
+    max?: number;
 }
 
 const buildIdsMap = (value: any[]) =>
@@ -52,7 +68,10 @@ export function ArrayContainer<T>({
                                       onInternalIdAdded,
                                       includeAddButton,
                                       newDefaultEntry,
-                                      onValueChange
+                                      onValueChange,
+                                      className,
+                                      min = 0,
+                                      max = Infinity
                                   }: ArrayContainerProps<T>) {
 
     const hasValue = value && Array.isArray(value) && value.length > 0;
@@ -63,7 +82,14 @@ export function ArrayContainer<T>({
     const [internalIds, setInternalIds] = useState<number[]>(
         hasValue
             ? Object.values(internalIdsRef.current)
-            : []);
+            : []
+    );
+
+    const itemCustomPropsRef = useRef<Record<number, object>>({});
+
+    const updateItemCustomProps = useCallback((internalId: number, customProps: object) => {
+        itemCustomPropsRef.current[internalId] = customProps;
+    }, []);
 
     useEffect(() => {
         if (hasValue && value && value.length !== internalIds.length) {
@@ -83,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)
@@ -93,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);
@@ -100,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);
@@ -113,6 +142,20 @@ export function ArrayContainer<T>({
         onValueChange([...value.slice(0, index + 1), copyingItem, ...value.slice(index + 1)]);
     };
 
+    const addInIndex = (index: number) => {
+        if ((value ?? []).length >= max) return;
+        const id = getRandomId();
+        const newIds: number[] = [
+            ...internalIds.slice(0, index),
+            id,
+            ...internalIds.slice(index)
+        ];
+        if (onInternalIdAdded)
+            onInternalIdAdded(id);
+        setInternalIds(newIds);
+        onValueChange([...value.slice(0, index), newDefaultEntry, ...value.slice(index)]);
+    }
+
     const onDragEnd = (result: any) => {
         // dropped outside the list
         if (!result.destination) {
@@ -147,12 +190,17 @@ export function ArrayContainer<T>({
                                    remove={remove}
                                    copy={copy}
                                    isDragging={snapshot.isDragging}
+                                   storedProps={itemCustomPropsRef.current[internalId]}
+                                   updateItemCustomProps={updateItemCustomProps}
+                                   addInIndex={addInIndex}
+                                   includeAddButton={includeAddButton}
                                />
                            );
                        }}
             >
                 {(droppableProvided, droppableSnapshot) => (
                     <div
+                        className={cls("space-y-1", className)}
                         {...droppableProvided.droppableProps}
                         ref={droppableProvided.innerRef}>
                         {hasValue && internalIds.map((internalId: number, index: number) => {
@@ -173,6 +221,10 @@ export function ArrayContainer<T>({
                                             remove={remove}
                                             copy={copy}
                                             isDragging={snapshot.isDragging}
+                                            storedProps={itemCustomPropsRef.current[internalId]}
+                                            updateItemCustomProps={updateItemCustomProps}
+                                            addInIndex={addInIndex}
+                                            includeAddButton={includeAddButton}
                                         />
                                     )}
                                 </Draggable>
@@ -181,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>
@@ -205,10 +259,14 @@ type ArrayContainerItemProps = {
     internalId: number,
     size?: "small" | "medium",
     disabled: boolean,
-    buildEntry: (index: number, internalId: number) => React.ReactNode,
+    buildEntry: ArrayEntryBuilder,
     remove: (index: number) => void,
     copy: (index: number) => void,
+    addInIndex?: (index: number) => void,
+    includeAddButton?: boolean,
     isDragging: boolean,
+    storedProps?: object,
+    updateItemCustomProps: (internalId: number, props: object) => void
 };
 
 export function ArrayContainerItem({
@@ -219,41 +277,46 @@ export function ArrayContainerItem({
                                        disabled,
                                        buildEntry,
                                        remove,
+                                       addInIndex,
+                                       includeAddButton,
                                        copy,
-                                       isDragging
+                                       isDragging,
+                                       storedProps,
+                                       updateItemCustomProps
                                    }: ArrayContainerItemProps) {
 
-    const [onHover, setOnHover] = React.useState(false);
-    const setOnHoverTrue = useCallback(() => setOnHover(true), []);
-    const setOnHoverFalse = useCallback(() => setOnHover(false), []);
-
     return <div
-        onMouseEnter={setOnHoverTrue}
-        onMouseMove={setOnHoverTrue}
-        onMouseLeave={setOnHoverFalse}
         ref={provided.innerRef}
         {...provided.draggableProps}
         style={provided.draggableProps.style}
-        className={`${
-            (isDragging || onHover) ? fieldBackgroundHoverMixin : ""
-        } mb-1 rounded-md opacity-100`}
+        className={`relative ${
+            !isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""
+        } rounded-md opacity-100`}
     >
         <div
             className="flex items-start">
-            <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
-                {buildEntry(index, internalId)}
+            <div
+                className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
+                {buildEntry({
+                    index,
+                    internalId,
+                    isDragging,
+                    storedProps,
+                    storeProps: (props: object) => updateItemCustomProps(internalId, props)
+                })}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}
                               disabled={disabled}
                               remove={remove}
                               index={index}
                               provided={provided}
+                              addInIndex={addInIndex}
+                              includeAddButton={includeAddButton}
                               copy={copy}/>
         </div>
     </div>;
 }
 
-
 export function ArrayItemOptions({
                                      direction,
                                      disabled,
@@ -261,13 +324,17 @@ export function ArrayItemOptions({
                                      index,
                                      provided,
                                      copy,
+                                     includeAddButton,
+                                     addInIndex
                                  }: {
     direction?: "row" | "column",
     disabled: boolean,
     remove: (index: number) => void,
     index: number,
     provided: any,
-    copy: (index: number) => void
+    copy: (index: number) => void,
+    includeAddButton?: boolean,
+    addInIndex?: (index: number) => void
 }) {
 
     const [menuOpen, setMenuOpen] = useState(false);
@@ -275,7 +342,7 @@ export function ArrayItemOptions({
     const iconRef = React.useRef<HTMLDivElement>(null);
     useOutsideAlerter(iconRef, () => setMenuOpen(false));
 
-    return <div className={`pl-2 pt-1 pb-4 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
+    return <div className={`pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
                 ref={iconRef}
                 {...provided.dragHandleProps}>
         <Tooltip
@@ -283,11 +350,13 @@ export function ArrayItemOptions({
             open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
             title="Drag to move. Click for more options">
-
             <IconButton
                 size="small"
                 disabled={disabled}
-                onClick={() => setMenuOpen(true)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setMenuOpen(true);
+                }}
                 onDragStart={(e: any) => {
                     setMenuOpen(false);
                 }}
@@ -298,7 +367,7 @@ export function ArrayItemOptions({
             <Menu
                 portalContainer={iconRef.current}
                 open={menuOpen}
-                trigger={<div/>}>
+                trigger={<div tabIndex={-1}/>}>
 
                 <MenuItem dense onClick={(e) => {
                     setMenuOpen(false);
@@ -315,8 +384,25 @@ export function ArrayItemOptions({
                     Copy
                 </MenuItem>
 
-            </Menu>
+                {includeAddButton && addInIndex && <MenuItem dense
+                                                             onClick={() => {
+                                                                 setMenuOpen(false);
+                                                                 addInIndex(index);
+                                                             }}>
+                    <KeyboardArrowUpIcon size={"small"}/>
+                    Add on top
+                </MenuItem>}
+
+                {includeAddButton && addInIndex && <MenuItem dense
+                                                             onClick={() => {
+                                                                 setMenuOpen(false);
+                                                                 addInIndex(index + 1);
+                                                             }}>
+                    <KeyboardArrowDownIcon size={"small"}/>
+                    Add below
+                </MenuItem>}
 
+            </Menu>
         </Tooltip>
 
     </div>;

package/src/components/CircularProgressCenter.tsx

@@ -5,7 +5,7 @@ import { CircularProgress, CircularProgressProps, Typography } from "@firecms/ui
  *
  * @param text
  * @param props
- * @constructor
+
  * @ignore
  */
 export function CircularProgressCenter({ text, ...props }: CircularProgressProps & {
@@ -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-gray-50 dark:bg-gray-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/ClearFilterSortButton.tsx

@@ -0,0 +1,41 @@
+import { Button, FilterListOffIcon } from "@firecms/ui";
+import { EntityTableController } from "../types";
+
+export function ClearFilterSortButton({
+                                          tableController,
+                                          enabled
+                                      }: {
+    enabled: boolean;
+    tableController: EntityTableController
+}) {
+    if (!enabled) {
+        return null;
+    }
+
+    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
+    const sortIsSet = !!tableController.sortBy && tableController.sortBy.length > 0;
+
+    if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
+        let label;
+        if (filterIsSet && sortIsSet) {
+            label = "Clear filter and sort";
+        } else if (filterIsSet) {
+            label = "Clear filter";
+        } else {
+            label = "Clear sort";
+        }
+        return <Button
+            variant={"outlined"}
+            className="h-fit-content"
+            aria-label="filter clear"
+            onClick={() => {
+                tableController.clearFilter?.();
+                tableController.setSortBy?.(undefined);
+            }}
+            size={"small"}>
+            <FilterListOffIcon/>
+            {label}
+        </Button>
+    }
+    return null;
+}

package/src/components/{DeleteConfirmationDialog.tsx → ConfirmationDialog.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
 
-export function DeleteConfirmationDialog({
+export function ConfirmationDialog({
                                              open,
                                              onAccept,
                                              onCancel,
@@ -22,8 +22,8 @@ export function DeleteConfirmationDialog({
             open={open}
             onOpenChange={(open) => !open ? onCancel() : undefined}
         >
+            <DialogTitle variant={"h6"} className={"mb-2"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"} className={"mb-2"}>{title}</Typography>
                 {body}
             </DialogContent>
 

package/src/components/DeleteEntityDialog.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCallbacks, EntityCollection } from "../types";
 import React, { useCallback, useMemo, useState } from "react";
-import { Button, CircularProgress, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
     useCustomizationController,
@@ -40,25 +40,17 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = useState(false);
 
-    const [entityOrEntities, setUsedEntityOrEntities] = React.useState<Entity<M> | Entity<M>[]>();
-
-    const [multipleEntities, setMultipleEntities] = React.useState<boolean>();
     const context = useFireCMSContext();
+    const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+        ? entityOrEntitiesToDelete[0]
+        : entityOrEntitiesToDelete;
 
-    React.useEffect(() => {
-        if (entityOrEntitiesToDelete) {
-            const revisedEntityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
-                ? entityOrEntitiesToDelete[0]
-                : entityOrEntitiesToDelete;
-            setUsedEntityOrEntities(revisedEntityOrEntities);
-            setMultipleEntities(Array.isArray(revisedEntityOrEntities));
-        }
-    }, [entityOrEntitiesToDelete]);
+    const multipleEntities = Array.isArray(entityOrEntities);
 
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {
@@ -181,16 +173,15 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
             open={open}
             onOpenChange={(open) => !open ? onClose() : undefined}
         >
+            <DialogTitle id="delete-dialog-title">
+                {dialogTitle}
+            </DialogTitle>
             <DialogContent fullHeight={true}>
-                <Typography variant={"subtitle2"} className={"p-4"}>
-                    {dialogTitle}
-                </Typography>
-
                 {!multipleEntities && <div className={"p-4"}>{content}</div>}
             </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, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } 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";
 
 /**
  *
@@ -14,7 +26,6 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
  * @param size
  * @param toggleEntitySelection
  * @param hideId
- * @constructor
  *
  * @group Collection components
  */
@@ -33,35 +44,32 @@ 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();
 
     const context = useFireCMSContext();
 
     const onCheckedChange = useCallback((checked: boolean) => {
-        selectionController?.toggleEntitySelection(entity);
-    }, [entity, selectionController?.toggleEntitySelection]);
-
-    const onClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        selectionController?.toggleEntitySelection(entity);
+        selectionController?.toggleEntitySelection(entity, checked);
     }, [entity, selectionController?.toggleEntitySelection]);
 
     const hasActions = actions.length > 0;
@@ -69,13 +77,16 @@ 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
-            onClick={onClick}
-            className={cn(
-                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+            className={cls(
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
+            onClick={useCallback((event: any) => {
+                event.stopPropagation();
+            }, [])}
             style={{
                 width,
                 position: frozen ? "sticky" : "initial",
@@ -87,7 +98,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 <div className="w-34 flex justify-center">
 
                     {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index} title={action.name}>
+                        <Tooltip key={index}
+                                 title={action.name}
+                                 asChild={true}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
@@ -100,6 +113,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                         highlightEntity,
                                         unhighlightEntity,
                                         onCollectionChange,
+                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -128,6 +142,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             highlightEntity,
                                             unhighlightEntity,
                                             onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
                                     {action.icon}
@@ -149,16 +164,18 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 </div>}
 
             {!hideId && size !== "xs" && (
-                <div className="w-[138px] text-center overflow-hidden truncate">
-
+                <div
+                    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
-                        ? <Typography
-                            onClick={(event) => {
-                                event.stopPropagation();
-                            }}
-                            className={"font-mono select-all"}
-                            variant={"caption"}
-                            color={"secondary"}> {entity.id} </Typography>
+                        ? entity.id
                         : <Skeleton/>
                     }
                 </div>