@firecms/core 3.0.0-canary.288 → 3.0.0-canary.289

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { c } from "react-compiler-runtime";
 import * as React from "react";
 import React__default, { useRef, useEffect, useContext, useCallback, useMemo, useState, createElement, createRef, createContext, forwardRef, useLayoutEffect } from "react";
-import { getColorSchemeForSeed, CHIP_COLORS, FunctionsIcon, CircleIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, AccountCircleIcon, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MenuItem, MoreVertIcon, CircularProgress, SearchBar, Badge, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, StarIcon, Collapse, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, Container, LoadingButton, WarningIcon, KeyboardArrowDownIcon, VisibilityIcon, CheckIcon, CancelIcon, Alert, NotesIcon, InfoIcon, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ViewStreamIcon, RepeatIcon, BallotIcon, ScheduleIcon, AddLinkIcon, LinkIcon, DriveFolderUploadIcon, UploadFileIcon, FormatListNumberedIcon, NumbersIcon, PersonIcon, ListAltIcon, ListIcon, FlagIcon, MailIcon, HttpIcon, FormatQuoteIcon, SubjectIcon, ShortTextIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
+import { getColorSchemeForSeed, CHIP_COLORS, FunctionsIcon, CircleIcon, iconKeys, coolIconKeys, Icon, Tooltip, ErrorIcon, Typography, IconButton, ContentCopyIcon, OpenInNewIcon, DescriptionIcon, cls, Skeleton, Chip, defaultBorderMixin, KeyboardTabIcon, Checkbox, AccountCircleIcon, Markdown, TextareaAutosize, focusedDisabled, MultiSelect, MultiSelectItem, Select, SelectItem, BooleanSwitch, DateTimeField, paperMixin, EditIcon, DoNotDisturbOnIcon, Menu, MenuItem, MoreVertIcon, Badge, CircularProgress, SearchBar, ArrowUpwardIcon, Popover, FilterListIcon, Button, CenteredView, AssignmentIcon, Label, CloseIcon, TextField, BooleanSwitchWithLabel, useOutsideAlerter, Dialog, DialogTitle, DialogContent, DialogActions, FileCopyIcon, DeleteIcon, AddIcon, StarIcon, Collapse, ExpandablePanel, ArrowForwardIcon, Card, cardMixin, cardClickableMixin, Container, LoadingButton, WarningIcon, KeyboardArrowDownIcon, VisibilityIcon, CheckIcon, CancelIcon, Alert, NotesIcon, InfoIcon, fieldBackgroundMixin, RemoveIcon, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, ArrowDropDownIcon, FilterListOffIcon, SearchIcon, Avatar, DarkModeIcon, LightModeIcon, BrightnessMediumIcon, LogoutIcon, HandleIcon, KeyboardArrowUpIcon, debounce, Sheet, Tab, Tabs, CodeIcon, OpenInFullIcon, ViewStreamIcon, RepeatIcon, BallotIcon, ScheduleIcon, AddLinkIcon, LinkIcon, DriveFolderUploadIcon, UploadFileIcon, FormatListNumberedIcon, NumbersIcon, PersonIcon, ListAltIcon, ListIcon, FlagIcon, MailIcon, HttpIcon, FormatQuoteIcon, SubjectIcon, ShortTextIcon, MenuIcon, ChevronLeftIcon } from "@firecms/ui";
 import { SnackbarProvider as SnackbarProvider$1, useSnackbar } from "notistack";
 import hash from "object-hash";
 import { getIn, useFormex, setIn, useCreateFormex, Formex, Field } from "@firecms/formex";
@@ -6672,7 +6672,7 @@ function MapPropertyPreview(t0) {
       const isArrayOrMap = childProperty.dataType === "map" || childProperty === "array";
       return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: childProperty.name }) }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "break-words font-semibold", color: "secondary", children: childProperty.name }) }),
           /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: /* @__PURE__ */ jsx(ErrorBoundary, { children: !isArrayOrMap && /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) }) })
         ] }),
         isArrayOrMap && /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "border-l pl-4 ml-2 my-2"), children: /* @__PURE__ */ jsx(PropertyPreview, { propertyKey: key_0, value: value[key_0], property: childProperty, size }) })
@@ -6728,7 +6728,7 @@ function _temp$o(t0) {
   const [key, childValue] = t0;
   return /* @__PURE__ */ jsxs("div", { className: cls(defaultBorderMixin, "last:border-b-0 border-b"), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-row pt-0.5 pb-0.5 gap-2", children: [
-      /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-mono break-words", color: "secondary", children: key }) }, `table-cell-title-${key}-${key}`),
+      /* @__PURE__ */ jsx("div", { className: "min-w-[140px] w-[25%] py-1", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "font-semibold break-words", color: "secondary", children: key }) }, `table-cell-title-${key}-${key}`),
       /* @__PURE__ */ jsx("div", { className: "flex-grow max-w-[75%]", children: childValue && typeof childValue !== "object" && /* @__PURE__ */ jsx(Typography, { children: /* @__PURE__ */ jsx(ErrorBoundary, { children: childValue.toString() }) }) })
     ] }),
     typeof childValue === "object" && /* @__PURE__ */ jsx("div", { className: cls(defaultBorderMixin, "border-l pl-4"), children: /* @__PURE__ */ jsx(KeyValuePreview, { value: childValue }) })
@@ -10265,6 +10265,7 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
   const uncollapsedActions = actions.filter((a_1) => a_1.collapsed === false);
   const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
   const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+  const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
   return /* @__PURE__ */ jsxs("div", { 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) => {
     event.stopPropagation();
   }, []), style: {
@@ -10274,23 +10275,31 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
     contain: "strict"
   }, children: [
     (hasActions || selectionEnabled) && /* @__PURE__ */ jsxs("div", { className: "w-34 flex justify-center", children: [
-      uncollapsedActions.map((action, index) => /* @__PURE__ */ jsx(Tooltip, { title: action.name, asChild: true, children: /* @__PURE__ */ jsx(IconButton, { onClick: (event_0) => {
-        event_0.stopPropagation();
-        action.onClick({
-          view: "collection",
-          entity,
-          fullPath,
-          fullIdPath,
-          collection,
-          context,
-          selectionController,
-          highlightEntity,
-          unhighlightEntity,
-          onCollectionChange,
-          openEntityMode: openEntityMode ?? collection?.openEntityMode
-        });
-      }, size: largeLayout ? "medium" : "small", children: action.icon }) }, index)),
-      hasCollapsedActions && /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { size: largeLayout ? "medium" : "small", children: /* @__PURE__ */ jsx(MoreVertIcon, {}) }), children: collapsedActions.map((action_0, index_0) => /* @__PURE__ */ jsxs(MenuItem, { onClick: (e) => {
+      uncollapsedActions.map((action, index) => {
+        const isEditAction = action.key === "edit";
+        const tooltip = isEditAction && hasDraft ? "Local unsaved changes" : action.name;
+        let iconButton = /* @__PURE__ */ jsx(IconButton, { onClick: (event_0) => {
+          event_0.stopPropagation();
+          action.onClick({
+            view: "collection",
+            entity,
+            fullPath,
+            fullIdPath,
+            collection,
+            context,
+            selectionController,
+            highlightEntity,
+            unhighlightEntity,
+            onCollectionChange,
+            openEntityMode: openEntityMode ?? collection?.openEntityMode
+          });
+        }, size: iconSize, children: action.icon });
+        if (isEditAction && hasDraft) {
+          iconButton = /* @__PURE__ */ jsx(Badge, { color: "warning", children: iconButton });
+        }
+        return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, asChild: true, children: iconButton }, index);
+      }),
+      hasCollapsedActions && /* @__PURE__ */ jsx(Menu, { trigger: /* @__PURE__ */ jsx(IconButton, { size: iconSize, children: /* @__PURE__ */ jsx(MoreVertIcon, {}) }), children: collapsedActions.map((action_0, index_0) => /* @__PURE__ */ jsxs(MenuItem, { onClick: (e) => {
         e.stopPropagation();
         action_0.onClick({
           view: "collection",
@@ -10309,14 +10318,11 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
         action_0.icon,
         action_0.name
       ] }, index_0)) }),
-      selectionEnabled && /* @__PURE__ */ jsx(Tooltip, { title: `Select ${entity.id}`, children: /* @__PURE__ */ jsx(Checkbox, { size: largeLayout ? "medium" : "small", checked: Boolean(isSelected), onCheckedChange }) })
+      selectionEnabled && /* @__PURE__ */ jsx(Tooltip, { title: `Select ${entity.id}`, children: /* @__PURE__ */ jsx(Checkbox, { size: iconSize, checked: Boolean(isSelected), onCheckedChange }) })
     ] }),
-    !hideId && size !== "xs" && /* @__PURE__ */ jsxs("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 justify-center flex items-center gap-1", onClick: (event_1) => {
+    !hideId && size !== "xs" && /* @__PURE__ */ jsx("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 justify-center flex items-center gap-1", onClick: (event_1) => {
       event_1.stopPropagation();
-    }, children: [
-      hasDraft && /* @__PURE__ */ jsx(Tooltip, { title: "Local unsaved changes", className: "inline", children: /* @__PURE__ */ jsx(Chip, { colorScheme: "orangeDarker", className: "p-0.5", children: /* @__PURE__ */ jsx(EditIcon, { size: 12 }) }) }),
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-center", children: entity ? entity.id : /* @__PURE__ */ jsx(Skeleton, {}) })
-    ] })
+    }, children: /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-center", children: entity ? entity.id : /* @__PURE__ */ jsx(Skeleton, {}) }) })
   ] });
 };
 function CollectionTableToolbar(t0) {