@firecms/core 3.0.0-canary.107 → 3.0.0-canary.109

package/dist/index.umd.js

@@ -4585,25 +4585,33 @@
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible", children: [
-            navigator && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Copy url to clipboard", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.IconButton,
+            navigator && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Tooltip,
               {
-                variant: "filled",
-                size: "small",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  e.preventDefault();
-                  return navigator.clipboard.writeText(url);
-                },
+                asChild: true,
+                title: "Copy url to clipboard",
+                side: "bottom",
                 children: /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.ContentCopyIcon,
+                  ui.IconButton,
                   {
-                    className: "text-gray-700 dark:text-gray-300",
-                    size: "small"
+                    variant: "filled",
+                    size: "small",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                      return navigator.clipboard.writeText(url);
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.ContentCopyIcon,
+                      {
+                        className: "text-gray-700 dark:text-gray-300",
+                        size: "small"
+                      }
+                    )
                   }
                 )
               }
-            ) }),
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.IconButton,
               {
@@ -5226,34 +5234,28 @@
               );
             })
           ] }),
-          entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Tooltip,
+          entity && includeEntityLink && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: `See details for ${entity.id}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+            ui.IconButton,
             {
-              title: `See details for ${entity.id}`,
+              color: "inherit",
+              size: "small",
               className: size !== "smallest" ? "self-start" : "",
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.IconButton,
-                {
-                  color: "inherit",
-                  size: "small",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
-                      path: entity.path,
-                      entityId: entity.id
-                    });
-                    sideEntityController.open({
-                      entityId: entity.id,
-                      path: entity.path,
-                      collection,
-                      updateUrl: true
-                    });
-                  },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" })
-                }
-              )
+              onClick: (e) => {
+                e.stopPropagation();
+                analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
+                  path: entity.path,
+                  entityId: entity.id
+                });
+                sideEntityController.open({
+                  entityId: entity.id,
+                  path: entity.path,
+                  collection,
+                  updateUrl: true
+                });
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, { size: "small" })
             }
-          ),
+          ) }),
           actions
         ]
       }
@@ -6812,7 +6814,14 @@
       )
     ] });
   }
-  function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }) {
+  function EntityTableCellActions({
+    showError,
+    disabled,
+    showExpandIcon,
+    selected,
+    openPopup,
+    children
+  }) {
     const ref = React.useRef(null);
     const doOpenPopup = React.useCallback(() => {
       if (openPopup) {
@@ -6866,14 +6875,22 @@
         ErrorTooltip,
         {
           side: "left",
-          className: "flex items-center justify-center",
-          style: { width: 32, height: 32 },
           title: showError.message,
           children: /* @__PURE__ */ jsxRuntime.jsx(
-            ui.ErrorOutlineIcon,
+            "div",
             {
-              size: "small",
-              color: "error"
+              className: "flex items-center justify-center",
+              style: {
+                width: 32,
+                height: 32
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                ui.ErrorOutlineIcon,
+                {
+                  size: "small",
+                  color: "error"
+                }
+              )
             }
           )
         }
@@ -8263,26 +8280,34 @@
         },
         children: [
           (hasActions || selectionEnabled) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-34 flex justify-center", children: [
-            uncollapsedActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: action.name, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.IconButton,
+            uncollapsedActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Tooltip,
               {
-                onClick: (event) => {
-                  event.stopPropagation();
-                  action.onClick({
-                    entity,
-                    fullPath,
-                    collection,
-                    context,
-                    selectionController,
-                    highlightEntity,
-                    unhighlightEntity,
-                    onCollectionChange
-                  });
-                },
-                size: largeLayout ? "medium" : "small",
-                children: action.icon
-              }
-            ) }, index)),
+                title: action.name,
+                asChild: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.IconButton,
+                  {
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      action.onClick({
+                        entity,
+                        fullPath,
+                        collection,
+                        context,
+                        selectionController,
+                        highlightEntity,
+                        unhighlightEntity,
+                        onCollectionChange
+                      });
+                    },
+                    size: largeLayout ? "medium" : "small",
+                    children: action.icon
+                  }
+                )
+              },
+              index
+            )),
             hasCollapsedActions && /* @__PURE__ */ jsxRuntime.jsx(
               ui.Menu,
               {
@@ -12780,7 +12805,7 @@
     const [openPopup, setOpenPopup] = React.useState(false);
     const [searchString, setSearchString] = React.useState("");
     const sideEntityController = useSideEntityController();
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: !openPopup ? "Find by ID" : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: !openPopup ? "Find by ID" : void 0, asChild: false, children: /* @__PURE__ */ jsxRuntime.jsx(
       ui.Popover,
       {
         open: openPopup,
@@ -12844,6 +12869,54 @@
       }
     );
   }
+  function PropertyIdCopyTooltip({
+    propertyKey,
+    className,
+    children
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Tooltip,
+      {
+        title: /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltipContent, { propertyKey }),
+        delayDuration: 800,
+        side: "top",
+        asChild: false,
+        align: "start",
+        sideOffset: 8,
+        className,
+        children
+      }
+    );
+  }
+  function PropertyIdCopyTooltipContent({ propertyKey }) {
+    const [copied, setCopied] = React.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center justify-center text-white", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Typography,
+          {
+            variant: "caption",
+            className: "min-w-20 text-slate-400",
+            color: "disabled",
+            children: copied ? "Copied" : "Property ID"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-white", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: propertyKey }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.ContentCopyIcon,
+        {
+          size: "smallest",
+          className: "text-white",
+          onClick: React.useCallback(() => {
+            navigator.clipboard.writeText(propertyKey);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 2e3);
+          }, [propertyKey])
+        }
+      ) })
+    ] });
+  }
   function NotFoundPage() {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-full h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -13149,7 +13222,7 @@
                   {
                     variant: "subtitle1",
                     noWrap: true,
-                    className: "ml-2 !font-medium",
+                    className: ui.cls("!font-medium", drawerOpen ? "ml-2" : ""),
                     children: title
                   }
                 ) : title
@@ -13368,7 +13441,13 @@
           {
             className: "flex items-start",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80", children: buildEntry(index, internalId) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80",
+                  children: buildEntry(index, internalId)
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 ArrayItemOptions,
                 {
@@ -13416,7 +13495,10 @@
                 {
                   size: "small",
                   disabled,
-                  onClick: () => setMenuOpen(true),
+                  onClick: (e) => {
+                    e.preventDefault();
+                    setMenuOpen(true);
+                  },
                   onDragStart: (e) => {
                     setMenuOpen(false);
                   },
@@ -13429,7 +13511,7 @@
                 {
                   portalContainer: iconRef.current,
                   open: menuOpen,
-                  trigger: /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+                  trigger: /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: -1 }),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(ui.MenuItem, { dense: true, onClick: (e) => {
                       setMenuOpen(false);
@@ -13634,16 +13716,24 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex max-w-full flex-wrap mt-4", children: icons.map((icon) => {
-        return /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: icon, children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.IconButton,
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
           {
-            shape: "square",
-            toggled: selectedIcon === icon,
-            onClick: onIconSelected ? () => onIconSelected(icon) : void 0,
-            className: "box-content m-1",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey: icon, size: 24 })
-          }
-        ) }, icon);
+            title: icon,
+            asChild: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.IconButton,
+              {
+                shape: "square",
+                toggled: selectedIcon === icon,
+                onClick: onIconSelected ? () => onIconSelected(icon) : void 0,
+                className: "box-content m-1",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Icon, { iconKey: icon, size: 24 })
+              }
+            )
+          },
+          icon
+        );
       }) })
     ] });
   }
@@ -13718,6 +13808,7 @@
         {
           title: property.longDescription,
           side: "bottom",
+          asChild: true,
           children: /* @__PURE__ */ jsxRuntime.jsx(
             ui.IconButton,
             {
@@ -13736,29 +13827,40 @@
       )
     ] });
   }
-  function LabelWithIcon({
-    icon,
-    title,
-    small,
+  const LabelWithIcon = React.forwardRef(
+    ({
+      icon,
+      title,
+      small,
+      className,
+      required
+    }, ref) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: `inline-flex items-center my-0.5 ${small ? "gap-1" : "gap-2"} ${className ?? ""}`,
+          children: [
+            icon,
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`,
+                children: (title ?? "") + (required ? " *" : "")
+              }
+            )
+          ]
+        }
+      );
+    }
+  );
+  LabelWithIcon.displayName = "LabelWithIcon";
+  function LabelWithIconAndTooltip({
+    propertyKey,
     className,
-    required
+    ...props
   }) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        className: `inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`,
-        children: [
-          icon,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: `text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`,
-              children: (title ?? "") + (required ? " *" : "")
-            }
-          )
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, className, children: /* @__PURE__ */ jsxRuntime.jsx(LabelWithIcon, { ...props }) });
   }
   function SelectFieldBinding({
     propertyKey,
@@ -13785,7 +13887,7 @@
       setValue(null);
     }, [setValue]);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Select,
         {
           size: size === "medium" ? "medium" : "small",
@@ -13841,7 +13943,7 @@
             );
           })
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         FieldHelperText,
         {
@@ -13926,8 +14028,9 @@
           value: validValue ? value.map((v) => v.toString()) : [],
           disabled,
           label: /* @__PURE__ */ jsxRuntime.jsx(
-            LabelWithIcon,
+            LabelWithIconAndTooltip,
             {
+              propertyKey,
               icon: getIconForProperty(property, "small"),
               required: property.validation?.required,
               title: property.name,
@@ -14029,8 +14132,9 @@
     }, [ofProperty.path, ofProperty.previewProperties, value]);
     const title = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        LabelWithIcon,
+        LabelWithIconAndTooltip,
         {
+          propertyKey,
           icon: getIconForProperty(property, "small"),
           required: property.validation?.required,
           title: property.name,
@@ -14126,6 +14230,7 @@
           children: /* @__PURE__ */ jsxRuntime.jsx(
             ui.Tooltip,
             {
+              asChild: true,
               title: "Remove",
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 ui.IconButton,
@@ -14211,8 +14316,9 @@
     });
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(
-        LabelWithIcon,
+        LabelWithIconAndTooltip,
         {
+          propertyKey,
           icon: getIconForProperty(property, "small"),
           required: property.validation?.required,
           title: property.name,
@@ -14568,7 +14674,7 @@
     const isMultiline = Boolean(multiline);
     const inputType = property.dataType === "number" ? "number" : void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.TextField,
         {
           size,
@@ -14596,7 +14702,7 @@
           error: showError ? error : void 0,
           inputClassName: error ? "text-red-500 dark:text-red-600" : ""
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         FieldHelperText,
         {
@@ -14642,7 +14748,7 @@
       setValue
     });
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.BooleanSwitchWithLabel,
         {
           value,
@@ -14660,7 +14766,7 @@
           autoFocus,
           size
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         FieldHelperText,
         {
@@ -14693,7 +14799,7 @@
       setValue
     });
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.DateTimeField,
         {
           value: internalValue,
@@ -14713,7 +14819,7 @@
             }
           )
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsxRuntime.jsx(
         FieldHelperText,
         {
@@ -14740,8 +14846,9 @@
       throw new Error("ReadOnlyFieldBinding: Entity id is null");
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(
-        LabelWithIcon,
+        LabelWithIconAndTooltip,
         {
+          propertyKey,
           icon: getIconForProperty(property, "small"),
           required: property.validation?.required,
           title: property.name,
@@ -14781,6 +14888,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(ReferenceFieldBindingInternal, { ...props });
   }
   function ReferenceFieldBindingInternal({
+    propertyKey,
     value,
     setValue,
     error,
@@ -14829,8 +14937,9 @@
     }, [referenceDialogController]);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !minimalistView && /* @__PURE__ */ jsxRuntime.jsx(
-        LabelWithIcon,
+        LabelWithIconAndTooltip,
         {
+          propertyKey,
           icon: getIconForProperty(property, "small"),
           required: property.validation?.required,
           title: property.name,
@@ -15163,8 +15272,9 @@
       }
     ) }) });
     const title = /* @__PURE__ */ jsxRuntime.jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -15224,8 +15334,9 @@
       }
     );
     const title = /* @__PURE__ */ jsxRuntime.jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -15877,12 +15988,13 @@
     );
     const title = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        LabelWithIcon,
+        LabelWithIconAndTooltip,
         {
+          propertyKey,
           icon: getIconForProperty(property, "small"),
           required: property.validation?.required,
           title: property.name,
-          className: "flex-grow text-text-secondary dark:text-text-secondary-dark"
+          className: "flex flex-grow text-text-secondary dark:text-text-secondary-dark"
         }
       ),
       Array.isArray(value) && /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "px-4", children: [
@@ -15955,8 +16067,9 @@
       );
     }, [context, lastAddedId, property.oneOf, propertyKey, value]);
     const title = /* @__PURE__ */ jsxRuntime.jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -16200,15 +16313,16 @@
       return editor$1;
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        LabelWithIcon,
+        LabelWithIconAndTooltip,
         {
+          propertyKey,
           icon: getIconForProperty(property, "small"),
           required: property.validation?.required,
           title: property.name,
           className: "text-text-secondary dark:text-text-secondary-dark ml-3.5"
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Paper, { children: editor$1 }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("rounded-md", ui.fieldBackgroundMixin, ui.fieldBackgroundHoverMixin), children: editor$1 }),
       /* @__PURE__ */ jsxRuntime.jsx(
         FieldHelperText,
         {
@@ -16244,8 +16358,9 @@
     });
     const title = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        LabelWithIcon,
+        LabelWithIconAndTooltip,
         {
+          propertyKey,
           icon: getIconForProperty(property, "small"),
           required: property.validation?.required,
           title: property.name,
@@ -17012,26 +17127,40 @@
       name: "id",
       value: (entity && status === "existing" ? entity.id : entityId) ?? "",
       endAdornment: loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) : entity ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Copy", children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.IconButton,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
           {
-            onClick: (e) => copy(entity.id),
-            "aria-label": "copy-id",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.ContentCopyIcon, { size: "small" })
+            title: "Copy",
+            asChild: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.IconButton,
+              {
+                onClick: (e) => copy(entity.id),
+                "aria-label": "copy-id",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.ContentCopyIcon, { size: "small" })
+              }
+            )
           }
-        ) }),
-        customizationController?.entityLinkBuilder && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Open in the console", children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.IconButton,
+        ),
+        customizationController?.entityLinkBuilder && /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Tooltip,
           {
-            component: "a",
-            href: customizationController.entityLinkBuilder({ entity }),
-            rel: "noopener noreferrer",
-            target: "_blank",
-            onClick: (e) => e.stopPropagation(),
-            "aria-label": "go-to-datasource",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ui.OpenInNewIcon, { size: "small" })
+            title: "Open in the console",
+            asChild: true,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.IconButton,
+              {
+                component: "a",
+                href: customizationController.entityLinkBuilder({ entity }),
+                rel: "noopener noreferrer",
+                target: "_blank",
+                onClick: (e) => e.stopPropagation(),
+                "aria-label": "go-to-datasource",
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.OpenInNewIcon, { size: "small" })
+              }
+            )
           }
-        ) })
+        )
       ] }) : void 0
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -17121,35 +17250,6 @@
   const getScrollableParent = (ele) => {
     return !ele || ele === document.body ? document.body : isScrollable(ele) ? ele : getScrollableParent(ele.parentNode);
   };
-  function PropertyIdCopyTooltipContent({ propertyId }) {
-    const [copied, setCopied] = React.useState(false);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center justify-center text-white", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Typography,
-          {
-            variant: "caption",
-            className: "min-w-20 text-slate-400",
-            color: "disabled",
-            children: copied ? "Copied" : "Property ID"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "text-white", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: propertyId }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
-        ui.ContentCopyIcon,
-        {
-          size: "smallest",
-          className: "text-white",
-          onClick: React.useCallback(() => {
-            navigator.clipboard.writeText(propertyId);
-            setCopied(true);
-            setTimeout(() => setCopied(false), 2e3);
-          }, [propertyId])
-        }
-      ) })
-    ] });
-  }
   const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
   function EntityEditView({
     entityId,
@@ -17676,17 +17776,7 @@
           "div",
           {
             id: `form_field_${key}`,
-            children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Tooltip,
-              {
-                title: /* @__PURE__ */ jsxRuntime.jsx(PropertyIdCopyTooltipContent, { propertyId: key }),
-                delayDuration: 800,
-                side: "left",
-                align: "start",
-                sideOffset: 16,
-                children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...cmsFormFieldProps })
-              }
-            ) })
+            children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) })
           },
           `field_${resolvedCollection.name}_${key}`
         );
@@ -17703,8 +17793,9 @@
         }) });
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            LabelWithIcon,
+            LabelWithIconAndTooltip,
             {
+              propertyKey: key,
               icon: /* @__PURE__ */ jsxRuntime.jsx(ui.NotesIcon, { size: "small" }),
               title: additionalField.name,
               className: "text-text-secondary dark:text-text-secondary-dark ml-3.5"
@@ -19113,16 +19204,22 @@
               title: "Open menu",
               side: "right",
               sideOffset: 12,
-              className: "fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20",
+              asChild: true,
               children: /* @__PURE__ */ jsxRuntime.jsx(
-                ui.IconButton,
+                "div",
                 {
-                  color: "inherit",
-                  "aria-label": "Open menu",
-                  className: "sticky top-2 left-3 ",
-                  onClick: () => props.setDrawerOpen(true),
-                  size: "large",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuIcon, {})
+                  className: "fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.IconButton,
+                    {
+                      color: "inherit",
+                      "aria-label": "Open menu",
+                      className: "sticky top-2 left-3 ",
+                      onClick: () => props.setDrawerOpen(true),
+                      size: "large",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuIcon, {})
+                    }
+                  )
                 }
               )
             }
@@ -19205,7 +19302,7 @@
         children: icon
       }
     );
-    const listItem = /* @__PURE__ */ jsxRuntime.jsxs(
+    const listItem = /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(
       reactRouterDom.NavLink,
       {
         onClick,
@@ -19238,7 +19335,7 @@
           )
         ]
       }
-    );
+    ) });
     return /* @__PURE__ */ jsxRuntime.jsx(
       ui.Tooltip,
       {
@@ -19566,6 +19663,7 @@
   exports2.KeyValueFieldBinding = KeyValueFieldBinding;
   exports2.KeyValuePreview = KeyValuePreview;
   exports2.LabelWithIcon = LabelWithIcon;
+  exports2.LabelWithIconAndTooltip = LabelWithIconAndTooltip;
   exports2.MapFieldBinding = MapFieldBinding;
   exports2.MapPropertyPreview = MapPropertyPreview;
   exports2.MarkdownEditorFieldBinding = MarkdownEditorFieldBinding;
@@ -19580,6 +19678,8 @@
   exports2.NumberPropertyPreview = NumberPropertyPreview;
   exports2.PropertyConfigBadge = PropertyConfigBadge;
   exports2.PropertyFieldBinding = PropertyFieldBinding;
+  exports2.PropertyIdCopyTooltip = PropertyIdCopyTooltip;
+  exports2.PropertyIdCopyTooltipContent = PropertyIdCopyTooltipContent;
   exports2.PropertyPreview = PropertyPreview;
   exports2.PropertyTableCell = PropertyTableCell;
   exports2.ReadOnlyFieldBinding = ReadOnlyFieldBinding;