@firecms/core 3.0.0-canary.147 → 3.0.0-canary.149

package/dist/components/ArrayContainer.d.ts

@@ -34,18 +34,20 @@ type ArrayContainerItemProps = {
     buildEntry: ArrayEntryBuilder;
     remove: (index: number) => void;
     copy: (index: number) => void;
+    addInIndex?: (index: number) => void;
     isDragging: boolean;
     storedProps?: object;
     updateItemCustomProps: (internalId: number, props: object) => void;
 };
-export declare function ArrayContainerItem({ provided, index, internalId, size, disabled, buildEntry, remove, copy, isDragging, storedProps, updateItemCustomProps }: ArrayContainerItemProps): import("react/jsx-runtime").JSX.Element;
-export declare function ArrayItemOptions({ direction, disabled, remove, index, provided, copy, }: {
+export declare function ArrayContainerItem({ provided, index, internalId, size, disabled, buildEntry, remove, addInIndex, copy, isDragging, storedProps, updateItemCustomProps }: ArrayContainerItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function ArrayItemOptions({ direction, disabled, remove, index, provided, copy, addInIndex }: {
     direction?: "row" | "column";
     disabled: boolean;
     remove: (index: number) => void;
     index: number;
     provided: any;
     copy: (index: number) => void;
+    addInIndex?: (index: number) => void;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function getRandomId(): number;
 export {};

package/dist/index.es.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useState, useCallback, useRef, useEffect, useContext, useMemo, createRef, createContext, useLayoutEffect, createElement } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, Typography, Tooltip, IconButton, InfoIcon, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, cls, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, ErrorOutlineIcon, EditIcon, KeyboardTabIcon, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, Checkbox, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, Markdown, ArrowForwardIcon, cardMixin, cardClickableMixin, StarIcon, StarBorderIcon, Collapse, Chip, Container, NotesIcon, Tab, CloseIcon, Tabs, Alert, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, Typography, Tooltip, IconButton, InfoIcon, ContentCopyIcon, CircleIcon, FunctionsIcon, iconKeys, coolIconKeys, Icon, ErrorIcon, cls, defaultBorderMixin, OpenInNewIcon, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, Skeleton, paperMixin, ErrorOutlineIcon, EditIcon, KeyboardTabIcon, RemoveCircleIcon, Menu, MoreVertIcon, MenuItem, Checkbox, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, TextField, ClearIcon, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogContent, DialogActions, FileCopyIcon, ArchiveIcon, DeleteIcon, AddIcon, ExpandablePanel, Card, Markdown, ArrowForwardIcon, cardMixin, cardClickableMixin, StarIcon, StarBorderIcon, Collapse, Chip, Container, NotesIcon, Tab, CloseIcon, Tabs, Alert, FilterListOffIcon, SearchIcon, LoadingButton, Avatar, DarkModeIcon, LightModeIcon, LogoutIcon, HandleIcon, RemoveIcon, KeyboardArrowUpIcon, KeyboardArrowDownIcon, debounce, DescriptionIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, ShortTextIcon, SubjectIcon, FormatQuoteIcon, HttpIcon, EmailIcon, FlagIcon, ListIcon, ListAltIcon, NumbersIcon, FormatListNumberedIcon, UploadFileIcon, DriveFolderUploadIcon, LinkIcon, AddLinkIcon, ScheduleIcon, BallotIcon, RepeatIcon, ViewStreamIcon, Sheet, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { useFormex, setIn, getIn, useCreateFormex, Formex, Field } from "@firecms/formex";
@@ -4017,8 +4017,8 @@ function ErrorView({
     {
       className: "flex items-center m-2",
       children: [
-        /* @__PURE__ */ jsx(ErrorIcon, { size: "small", color: "error" }),
-        /* @__PURE__ */ jsxs("div", { className: "pl-2", children: [
+        /* @__PURE__ */ jsx(ErrorIcon, { className: "mx-2", size: "small", color: "error" }),
+        /* @__PURE__ */ jsxs("div", { className: "pl-4", children: [
           title && /* @__PURE__ */ jsx(
             Typography,
             {
@@ -10919,7 +10919,7 @@ function EntityEditViewInner({
               onValueChange: (value) => {
                 onSideTabClick(value);
               },
-              className: "pl-4 pr-4 pt-0",
+              innerClassName: "pl-4 pr-4 pt-0",
               children: [
                 /* @__PURE__ */ jsx(
                   Tab,
@@ -12476,6 +12476,18 @@ function ArrayContainer({
     setInternalIds(newIds);
     onValueChange([...value.slice(0, index + 1), copyingItem, ...value.slice(index + 1)]);
   };
+  const addInIndex = (index) => {
+    const id = getRandomId$1();
+    const newIds = [
+      ...internalIds.splice(0, index),
+      id,
+      ...internalIds.slice(index)
+    ];
+    if (onInternalIdAdded)
+      onInternalIdAdded(id);
+    setInternalIds(newIds);
+    onValueChange([...value.slice(0, index), newDefaultEntry, ...value.slice(index)]);
+  };
   const onDragEnd = (result) => {
     if (!result.destination) {
       return;
@@ -12509,7 +12521,8 @@ function ArrayContainer({
             copy,
             isDragging: snapshot.isDragging,
             storedProps: itemCustomPropsRef.current[internalId],
-            updateItemCustomProps
+            updateItemCustomProps,
+            addInIndex
           }
         );
       },
@@ -12540,7 +12553,8 @@ function ArrayContainer({
                       copy,
                       isDragging: snapshot.isDragging,
                       storedProps: itemCustomPropsRef.current[internalId],
-                      updateItemCustomProps
+                      updateItemCustomProps,
+                      addInIndex
                     }
                   )
                 },
@@ -12574,6 +12588,7 @@ function ArrayContainerItem({
   disabled,
   buildEntry,
   remove,
+  addInIndex,
   copy,
   isDragging,
   storedProps,
@@ -12612,6 +12627,7 @@ function ArrayContainerItem({
                 remove,
                 index,
                 provided,
+                addInIndex,
                 copy
               }
             )
@@ -12627,7 +12643,8 @@ function ArrayItemOptions({
   remove,
   index,
   provided,
-  copy
+  copy,
+  addInIndex
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const iconRef = React__default.useRef(null);
@@ -12682,7 +12699,35 @@ function ArrayItemOptions({
                   }, children: [
                     /* @__PURE__ */ jsx(ContentCopyIcon, { size: "small" }),
                     "Copy"
-                  ] })
+                  ] }),
+                  addInIndex && /* @__PURE__ */ jsxs(
+                    MenuItem,
+                    {
+                      dense: true,
+                      onClick: () => {
+                        setMenuOpen(false);
+                        addInIndex(index);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(KeyboardArrowUpIcon, { size: "small" }),
+                        "Add on top"
+                      ]
+                    }
+                  ),
+                  addInIndex && /* @__PURE__ */ jsxs(
+                    MenuItem,
+                    {
+                      dense: true,
+                      onClick: () => {
+                        setMenuOpen(false);
+                        addInIndex(index + 1);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { size: "small" }),
+                        "Add below"
+                      ]
+                    }
+                  )
                 ]
               }
             )
@@ -19443,7 +19488,7 @@ function DrawerWrapper(props) {
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: "ml-2 fixed top-1 left-2 sm:top-2 sm:left-3 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20",
+                className: "ml-2 fixed top-1 left-2 sm:top-2 sm:left-2 !bg-surface-50 dark:!bg-surface-900 rounded-full w-fit z-20",
                 children: /* @__PURE__ */ jsx(
                   IconButton,
                   {
@@ -19488,7 +19533,7 @@ function DrawerWrapper(props) {
           "aria-label": "Open drawer",
           onClick: () => props.setDrawerOpen(true),
           size: "large",
-          className: "absolute sm:top-2 sm:left-5 top-1 left-2",
+          className: "absolute sm:top-2 sm:left-4 top-1 left-2",
           children: /* @__PURE__ */ jsx(MenuIcon, {})
         }
       ),
@@ -19499,7 +19544,7 @@ function DrawerWrapper(props) {
           transparent: true,
           open: props.open,
           onOpenChange: props.setDrawerOpen,
-          title: "Navigaion drawer",
+          title: "Navigation drawer",
           overlayClassName: "bg-white bg-opacity-80",
           children: innerDrawer
         }
@@ -19547,12 +19592,12 @@ function DrawerNavigationItem({
       },
       className: ({ isActive }) => cls(
         "rounded-lg truncate",
-        "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-secondary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+        "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
         "flex flex-row items-center mr-8",
         // "transition-all ease-in-out delay-100 duration-300",
         // drawerOpen ? "w-full" : "w-18",
         drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
-        "font-medium text-sm",
+        "font-semibold text-xs",
         isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
       ),
       to: url,
@@ -19641,7 +19686,7 @@ function DefaultDrawer({
         children: groupsWithoutAdmin.map((group) => /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-4",
+            className: "bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1",
             children: [
               buildGroupHeader(group),
               Object.values(navigationEntries).filter((e) => e.group === group).map((view, index) => /* @__PURE__ */ jsx(
@@ -19726,7 +19771,7 @@ function DrawerLogo({ logo }) {
         transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
         padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
       },
-      className: cls("cursor-pointer ml-4"),
+      className: cls("cursor-pointer ml-3 mr-1"),
       children: /* @__PURE__ */ jsx(
         Tooltip,
         {