@firecms/core 3.0.0-canary.169 → 3.0.0-canary.170

package/dist/types/dialogs_controller.d.ts

@@ -12,7 +12,7 @@ export interface DialogsController {
      * Open a dialog
      * @param props
      */
-    open: (props: DialogControllerEntryProps) => {
+    open: <T extends object = object>(props: DialogControllerEntryProps<T>) => {
         closeDialog: () => void;
     };
 }
@@ -20,7 +20,7 @@ export interface DialogsController {
  * Props used to open a side dialog
  * @group Hooks and utilities
  */
-export interface DialogControllerEntryProps {
+export interface DialogControllerEntryProps<T extends object = object> {
     key: string;
     /**
      * The component type that will be rendered
@@ -28,5 +28,9 @@ export interface DialogControllerEntryProps {
     Component: React.ComponentType<{
         open: boolean;
         closeDialog: () => void;
-    }>;
+    } & T>;
+    /**
+     * Props to pass to the dialog component
+     */
+    props?: T;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.169",
+  "version": "3.0.0-canary.170",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.169",
-    "@firecms/formex": "^3.0.0-canary.169",
-    "@firecms/ui": "^3.0.0-canary.169",
+    "@firecms/editor": "^3.0.0-canary.170",
+    "@firecms/formex": "^3.0.0-canary.170",
+    "@firecms/ui": "^3.0.0-canary.170",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.2",
     "clsx": "^2.1.1",
@@ -71,7 +71,6 @@
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "firebase": "^10.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^6.28.0",
@@ -91,7 +90,6 @@
     "babel-plugin-react-compiler": "beta",
     "cross-env": "^7.0.3",
     "eslint-plugin-react-compiler": "beta",
-    "firebase": "^10.14.1",
     "jest": "^29.7.0",
     "npm-run-all": "^4.1.5",
     "react-router": "^6.28.0",
@@ -106,7 +104,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "8c086883fc1cb08a74d4bd66ef2f952affa9fdb9",
+  "gitHead": "21c8b5f6236a1824f5896b69bb4810c05326c5c7",
   "publishConfig": {
     "access": "public"
   },

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,
@@ -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/contexts/DialogsProvider.tsx

@@ -8,7 +8,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
     const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
     const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
 
-    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps<any>[]) => {
         dialogEntriesRef.current = newPanels;
         setDialogEntries(newPanels);
     };
@@ -23,7 +23,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
 
     }, [dialogEntries]);
 
-    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
+    const open = useCallback(<T extends object = object>(dialogEntry: DialogControllerEntryProps<T>) => {
 
         const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
@@ -46,6 +46,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
                 key={`dialog_${i}`}
                 open={true}
                 closeDialog={close}
+                {...entry.props}
             />)}
         </DialogsControllerContext.Provider>
     );

package/src/core/DefaultDrawer.tsx

@@ -175,7 +175,7 @@ export function DrawerLogo({ logo }: {
                 {logo
                     ? <img src={logo}
                            alt="Logo"
-                           className={cls("max-w-full max-h-full transition-all",
+                           className={cls("max-w-full max-h-full transition-all object-contain",
                                drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
                     : <FireCMSLogo/>}
 

package/src/hooks/useBuildNavigationController.tsx

@@ -414,6 +414,7 @@ function encodePath(input: string) {
 
 function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[], authController: AuthController<User>): EntityCollection[] {
     return resolvedCollections
+        .filter((c) => Boolean(c.path))
         .filter((c) => {
             if (!c.permissions) return true;
             const resolvedPermissions = resolvePermissions(c, authController, c.path, null);

package/src/internal/useBuildSideDialogsController.tsx

@@ -90,7 +90,6 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
     const replace = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
 
-        console.log("replace", panelProps);
         const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
         newPanels.forEach((panel) => {
             routesStore.current[panel.key] = panel;

package/src/types/dialogs_controller.tsx

@@ -15,19 +15,23 @@ export interface DialogsController {
      * Open a dialog
      * @param props
      */
-    open: (props: DialogControllerEntryProps) => { closeDialog: () => void };
+    open: <T extends object = object>(props: DialogControllerEntryProps<T>) => { closeDialog: () => void };
 }
 
 /**
  * Props used to open a side dialog
  * @group Hooks and utilities
  */
-export interface DialogControllerEntryProps {
+export interface DialogControllerEntryProps<T extends object = object> {
 
     key: string;
     /**
      * The component type that will be rendered
      */
-    Component: React.ComponentType<{ open: boolean, closeDialog: () => void }>;
+    Component: React.ComponentType<{ open: boolean, closeDialog: () => void } & T>;
+    /**
+     * Props to pass to the dialog component
+     */
+    props?: T;
 
 }