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

package/dist/index.es.js

@@ -4581,25 +4581,33 @@ function ImagePreview({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible", children: [
-          navigator && /* @__PURE__ */ jsx(Tooltip, { title: "Copy url to clipboard", side: "bottom", children: /* @__PURE__ */ jsx(
-            IconButton,
+          navigator && /* @__PURE__ */ jsx(
+            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__ */ jsx(
-                ContentCopyIcon,
+                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__ */ jsx(
+                    ContentCopyIcon,
+                    {
+                      className: "text-gray-700 dark:text-gray-300",
+                      size: "small"
+                    }
+                  )
                 }
               )
             }
-          ) }),
+          ),
           /* @__PURE__ */ jsx(Tooltip, { title: "Open image in new tab", side: "bottom", children: /* @__PURE__ */ jsx(
             IconButton,
             {
@@ -5222,34 +5230,28 @@ function EntityPreview({
             );
           })
         ] }),
-        entity && includeEntityLink && /* @__PURE__ */ jsx(
-          Tooltip,
+        entity && includeEntityLink && /* @__PURE__ */ jsx(Tooltip, { title: `See details for ${entity.id}`, children: /* @__PURE__ */ jsx(
+          IconButton,
           {
-            title: `See details for ${entity.id}`,
+            color: "inherit",
+            size: "small",
             className: size !== "smallest" ? "self-start" : "",
-            children: /* @__PURE__ */ jsx(
-              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__ */ jsx(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__ */ jsx(KeyboardTabIcon, { size: "small" })
           }
-        ),
+        ) }),
         actions
       ]
     }
@@ -6808,7 +6810,14 @@ function StorageUploadProgress({
     )
   ] });
 }
-function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }) {
+function EntityTableCellActions({
+  showError,
+  disabled,
+  showExpandIcon,
+  selected,
+  openPopup,
+  children
+}) {
   const ref = useRef(null);
   const doOpenPopup = useCallback(() => {
     if (openPopup) {
@@ -6862,14 +6871,22 @@ function EntityTableCellActions({ showError, disabled, showExpandIcon, selected,
       ErrorTooltip,
       {
         side: "left",
-        className: "flex items-center justify-center",
-        style: { width: 32, height: 32 },
         title: showError.message,
         children: /* @__PURE__ */ jsx(
-          ErrorOutlineIcon,
+          "div",
           {
-            size: "small",
-            color: "error"
+            className: "flex items-center justify-center",
+            style: {
+              width: 32,
+              height: 32
+            },
+            children: /* @__PURE__ */ jsx(
+              ErrorOutlineIcon,
+              {
+                size: "small",
+                color: "error"
+              }
+            )
           }
         )
       }
@@ -8259,26 +8276,34 @@ const EntityCollectionRowActions = function EntityCollectionRowActions2({
       },
       children: [
         (hasActions || selectionEnabled) && /* @__PURE__ */ jsxs("div", { className: "w-34 flex justify-center", children: [
-          uncollapsedActions.map((action, index) => /* @__PURE__ */ jsx(Tooltip, { title: action.name, children: /* @__PURE__ */ jsx(
-            IconButton,
+          uncollapsedActions.map((action, index) => /* @__PURE__ */ jsx(
+            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__ */ jsx(
+                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__ */ jsx(
             Menu,
             {
@@ -12776,7 +12801,7 @@ function EntityIdHeaderWidget({
   const [openPopup, setOpenPopup] = React__default.useState(false);
   const [searchString, setSearchString] = React__default.useState("");
   const sideEntityController = useSideEntityController();
-  return /* @__PURE__ */ jsx(Tooltip, { title: !openPopup ? "Find by ID" : void 0, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(Tooltip, { title: !openPopup ? "Find by ID" : void 0, asChild: false, children: /* @__PURE__ */ jsx(
     Popover,
     {
       open: openPopup,
@@ -12840,6 +12865,54 @@ function PropertyConfigBadge({ propertyConfig }) {
     }
   );
 }
+function PropertyIdCopyTooltip({
+  propertyKey,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      title: /* @__PURE__ */ jsx(PropertyIdCopyTooltipContent, { propertyKey }),
+      delayDuration: 800,
+      side: "top",
+      asChild: false,
+      align: "start",
+      sideOffset: 8,
+      className,
+      children
+    }
+  );
+}
+function PropertyIdCopyTooltipContent({ propertyKey }) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center justify-center text-white", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "caption",
+          className: "min-w-20 text-slate-400",
+          color: "disabled",
+          children: copied ? "Copied" : "Property ID"
+        }
+      ),
+      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-white", children: /* @__PURE__ */ jsx("code", { children: propertyKey }) })
+    ] }),
+    /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(
+      ContentCopyIcon,
+      {
+        size: "smallest",
+        className: "text-white",
+        onClick: useCallback(() => {
+          navigator.clipboard.writeText(propertyKey);
+          setCopied(true);
+          setTimeout(() => setCopied(false), 2e3);
+        }, [propertyKey])
+      }
+    ) })
+  ] });
+}
 function NotFoundPage() {
   return /* @__PURE__ */ jsx("div", { className: "flex w-full h-full", children: /* @__PURE__ */ jsxs(
     "div",
@@ -13145,7 +13218,7 @@ const DefaultAppBar = function DefaultAppBar2({
                 {
                   variant: "subtitle1",
                   noWrap: true,
-                  className: "ml-2 !font-medium",
+                  className: cls("!font-medium", drawerOpen ? "ml-2" : ""),
                   children: title
                 }
               ) : title
@@ -13364,7 +13437,13 @@ function ArrayContainerItem({
         {
           className: "flex items-start",
           children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsx(
               ArrayItemOptions,
               {
@@ -13412,7 +13491,10 @@ function ArrayItemOptions({
               {
                 size: "small",
                 disabled,
-                onClick: () => setMenuOpen(true),
+                onClick: (e) => {
+                  e.preventDefault();
+                  setMenuOpen(true);
+                },
                 onDragStart: (e) => {
                   setMenuOpen(false);
                 },
@@ -13425,7 +13507,7 @@ function ArrayItemOptions({
               {
                 portalContainer: iconRef.current,
                 open: menuOpen,
-                trigger: /* @__PURE__ */ jsx("div", {}),
+                trigger: /* @__PURE__ */ jsx("div", { tabIndex: -1 }),
                 children: [
                   /* @__PURE__ */ jsxs(MenuItem, { dense: true, onClick: (e) => {
                     setMenuOpen(false);
@@ -13630,16 +13712,24 @@ function SearchIconsView({
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "flex max-w-full flex-wrap mt-4", children: icons.map((icon) => {
-      return /* @__PURE__ */ jsx(Tooltip, { title: icon, children: /* @__PURE__ */ jsx(
-        IconButton,
+      return /* @__PURE__ */ jsx(
+        Tooltip,
         {
-          shape: "square",
-          toggled: selectedIcon === icon,
-          onClick: onIconSelected ? () => onIconSelected(icon) : void 0,
-          className: "box-content m-1",
-          children: /* @__PURE__ */ jsx(Icon, { iconKey: icon, size: 24 })
-        }
-      ) }, icon);
+          title: icon,
+          asChild: true,
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              shape: "square",
+              toggled: selectedIcon === icon,
+              onClick: onIconSelected ? () => onIconSelected(icon) : void 0,
+              className: "box-content m-1",
+              children: /* @__PURE__ */ jsx(Icon, { iconKey: icon, size: 24 })
+            }
+          )
+        },
+        icon
+      );
     }) })
   ] });
 }
@@ -13714,6 +13804,7 @@ function FieldHelperText({
       {
         title: property.longDescription,
         side: "bottom",
+        asChild: true,
         children: /* @__PURE__ */ jsx(
           IconButton,
           {
@@ -13732,29 +13823,40 @@ function FieldHelperText({
     )
   ] });
 }
-function LabelWithIcon({
-  icon,
-  title,
-  small,
+const LabelWithIcon = forwardRef(
+  ({
+    icon,
+    title,
+    small,
+    className,
+    required
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: `inline-flex items-center my-0.5 ${small ? "gap-1" : "gap-2"} ${className ?? ""}`,
+        children: [
+          icon,
+          /* @__PURE__ */ 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__ */ jsxs(
-    "span",
-    {
-      className: `inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`,
-      children: [
-        icon,
-        /* @__PURE__ */ 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__ */ jsx(PropertyIdCopyTooltip, { propertyKey, className, children: /* @__PURE__ */ jsx(LabelWithIcon, { ...props }) });
 }
 function SelectFieldBinding({
   propertyKey,
@@ -13781,7 +13883,7 @@ function SelectFieldBinding({
     setValue(null);
   }, [setValue]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsx(
       Select,
       {
         size: size === "medium" ? "medium" : "small",
@@ -13837,7 +13939,7 @@ function SelectFieldBinding({
           );
         })
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       FieldHelperText,
       {
@@ -13922,8 +14024,9 @@ function MultiSelectBinding({
         value: validValue ? value.map((v) => v.toString()) : [],
         disabled,
         label: /* @__PURE__ */ jsx(
-          LabelWithIcon,
+          LabelWithIconAndTooltip,
           {
+            propertyKey,
             icon: getIconForProperty(property, "small"),
             required: property.validation?.required,
             title: property.name,
@@ -14025,8 +14128,9 @@ function ArrayOfReferencesFieldBinding({
   }, [ofProperty.path, ofProperty.previewProperties, value]);
   const title = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -14122,6 +14226,7 @@ function StorageItemPreview({
         children: /* @__PURE__ */ jsx(
           Tooltip,
           {
+            asChild: true,
             title: "Remove",
             children: /* @__PURE__ */ jsx(
               IconButton,
@@ -14207,8 +14312,9 @@ function StorageUploadFieldBinding({
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !minimalistView && /* @__PURE__ */ jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -14564,7 +14670,7 @@ function TextFieldBinding({
   const isMultiline = Boolean(multiline);
   const inputType = property.dataType === "number" ? "number" : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsx(
       TextField,
       {
         size,
@@ -14592,7 +14698,7 @@ function TextFieldBinding({
         error: showError ? error : void 0,
         inputClassName: error ? "text-red-500 dark:text-red-600" : ""
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       FieldHelperText,
       {
@@ -14638,7 +14744,7 @@ const SwitchFieldBinding = React__default.forwardRef(function SwitchFieldBinding
     setValue
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsx(
       BooleanSwitchWithLabel,
       {
         value,
@@ -14656,7 +14762,7 @@ const SwitchFieldBinding = React__default.forwardRef(function SwitchFieldBinding
         autoFocus,
         size
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       FieldHelperText,
       {
@@ -14689,7 +14795,7 @@ function DateTimeFieldBinding({
     setValue
   });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(PropertyIdCopyTooltip, { propertyKey, children: /* @__PURE__ */ jsx(
       DateTimeField,
       {
         value: internalValue,
@@ -14709,7 +14815,7 @@ function DateTimeFieldBinding({
           }
         )
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(
       FieldHelperText,
       {
@@ -14736,8 +14842,9 @@ function ReadOnlyFieldBinding({
     throw new Error("ReadOnlyFieldBinding: Entity id is null");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !minimalistView && /* @__PURE__ */ jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -14777,6 +14884,7 @@ function ReferenceFieldBinding(props) {
   return /* @__PURE__ */ jsx(ReferenceFieldBindingInternal, { ...props });
 }
 function ReferenceFieldBindingInternal({
+  propertyKey,
   value,
   setValue,
   error,
@@ -14825,8 +14933,9 @@ function ReferenceFieldBindingInternal({
   }, [referenceDialogController]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !minimalistView && /* @__PURE__ */ jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -15159,8 +15268,9 @@ function MapFieldBinding({
     }
   ) }) });
   const title = /* @__PURE__ */ jsx(
-    LabelWithIcon,
+    LabelWithIconAndTooltip,
     {
+      propertyKey,
       icon: getIconForProperty(property, "small"),
       required: property.validation?.required,
       title: property.name,
@@ -15220,8 +15330,9 @@ function KeyValueFieldBinding({
     }
   );
   const title = /* @__PURE__ */ jsx(
-    LabelWithIcon,
+    LabelWithIconAndTooltip,
     {
+      propertyKey,
       icon: getIconForProperty(property, "small"),
       required: property.validation?.required,
       title: property.name,
@@ -15873,12 +15984,13 @@ function RepeatFieldBinding({
   );
   const title = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ 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__ */ jsxs(Typography, { variant: "caption", className: "px-4", children: [
@@ -15951,8 +16063,9 @@ function BlockFieldBinding({
     );
   }, [context, lastAddedId, property.oneOf, propertyKey, value]);
   const title = /* @__PURE__ */ jsx(
-    LabelWithIcon,
+    LabelWithIconAndTooltip,
     {
+      propertyKey,
       icon: getIconForProperty(property, "small"),
       required: property.validation?.required,
       title: property.name,
@@ -16196,8 +16309,9 @@ function MarkdownEditorFieldBinding({
     return editor;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -16240,8 +16354,9 @@ function ArrayCustomShapedFieldBinding({
   });
   const title = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
-      LabelWithIcon,
+      LabelWithIconAndTooltip,
       {
+        propertyKey,
         icon: getIconForProperty(property, "small"),
         required: property.validation?.required,
         title: property.name,
@@ -17008,26 +17123,40 @@ function CustomIdField({
     name: "id",
     value: (entity && status === "existing" ? entity.id : entityId) ?? "",
     endAdornment: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : entity ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Tooltip, { title: "Copy", children: /* @__PURE__ */ jsx(
-        IconButton,
+      /* @__PURE__ */ jsx(
+        Tooltip,
         {
-          onClick: (e) => copy(entity.id),
-          "aria-label": "copy-id",
-          children: /* @__PURE__ */ jsx(ContentCopyIcon, { size: "small" })
+          title: "Copy",
+          asChild: true,
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              onClick: (e) => copy(entity.id),
+              "aria-label": "copy-id",
+              children: /* @__PURE__ */ jsx(ContentCopyIcon, { size: "small" })
+            }
+          )
         }
-      ) }),
-      customizationController?.entityLinkBuilder && /* @__PURE__ */ jsx(Tooltip, { title: "Open in the console", children: /* @__PURE__ */ jsx(
-        IconButton,
+      ),
+      customizationController?.entityLinkBuilder && /* @__PURE__ */ jsx(
+        Tooltip,
         {
-          component: "a",
-          href: customizationController.entityLinkBuilder({ entity }),
-          rel: "noopener noreferrer",
-          target: "_blank",
-          onClick: (e) => e.stopPropagation(),
-          "aria-label": "go-to-datasource",
-          children: /* @__PURE__ */ jsx(OpenInNewIcon, { size: "small" })
+          title: "Open in the console",
+          asChild: true,
+          children: /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              component: "a",
+              href: customizationController.entityLinkBuilder({ entity }),
+              rel: "noopener noreferrer",
+              target: "_blank",
+              onClick: (e) => e.stopPropagation(),
+              "aria-label": "go-to-datasource",
+              children: /* @__PURE__ */ jsx(OpenInNewIcon, { size: "small" })
+            }
+          )
         }
-      ) })
+      )
     ] }) : void 0
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -17117,35 +17246,6 @@ const isScrollable = (ele) => {
 const getScrollableParent = (ele) => {
   return !ele || ele === document.body ? document.body : isScrollable(ele) ? ele : getScrollableParent(ele.parentNode);
 };
-function PropertyIdCopyTooltipContent({ propertyId }) {
-  const [copied, setCopied] = useState(false);
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center justify-center text-white", children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(
-        Typography,
-        {
-          variant: "caption",
-          className: "min-w-20 text-slate-400",
-          color: "disabled",
-          children: copied ? "Copied" : "Property ID"
-        }
-      ),
-      /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-white", children: /* @__PURE__ */ jsx("code", { children: propertyId }) })
-    ] }),
-    /* @__PURE__ */ jsx(IconButton, { size: "small", children: /* @__PURE__ */ jsx(
-      ContentCopyIcon,
-      {
-        size: "smallest",
-        className: "text-white",
-        onClick: useCallback(() => {
-          navigator.clipboard.writeText(propertyId);
-          setCopied(true);
-          setTimeout(() => setCopied(false), 2e3);
-        }, [propertyId])
-      }
-    ) })
-  ] });
-}
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 function EntityEditView({
   entityId,
@@ -17672,17 +17772,7 @@ function EntityEditViewInner({
         "div",
         {
           id: `form_field_${key}`,
-          children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              title: /* @__PURE__ */ jsx(PropertyIdCopyTooltipContent, { propertyId: key }),
-              delayDuration: 800,
-              side: "left",
-              align: "start",
-              sideOffset: 16,
-              children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps })
-            }
-          ) })
+          children: /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(PropertyFieldBinding, { ...cmsFormFieldProps }) })
         },
         `field_${resolvedCollection.name}_${key}`
       );
@@ -17699,8 +17789,9 @@ function EntityEditViewInner({
       }) });
       return /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(
-          LabelWithIcon,
+          LabelWithIconAndTooltip,
           {
+            propertyKey: key,
             icon: /* @__PURE__ */ jsx(NotesIcon, { size: "small" }),
             title: additionalField.name,
             className: "text-text-secondary dark:text-text-secondary-dark ml-3.5"
@@ -19109,16 +19200,22 @@ function DrawerWrapper(props) {
             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__ */ jsx(
-              IconButton,
+              "div",
               {
-                color: "inherit",
-                "aria-label": "Open menu",
-                className: "sticky top-2 left-3 ",
-                onClick: () => props.setDrawerOpen(true),
-                size: "large",
-                children: /* @__PURE__ */ jsx(MenuIcon, {})
+                className: "fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20",
+                children: /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    color: "inherit",
+                    "aria-label": "Open menu",
+                    className: "sticky top-2 left-3 ",
+                    onClick: () => props.setDrawerOpen(true),
+                    size: "large",
+                    children: /* @__PURE__ */ jsx(MenuIcon, {})
+                  }
+                )
               }
             )
           }
@@ -19201,7 +19298,7 @@ function DrawerNavigationItem({
       children: icon
     }
   );
-  const listItem = /* @__PURE__ */ jsxs(
+  const listItem = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(
     NavLink,
     {
       onClick,
@@ -19234,7 +19331,7 @@ function DrawerNavigationItem({
         )
       ]
     }
-  );
+  ) });
   return /* @__PURE__ */ jsx(
     Tooltip,
     {
@@ -19563,6 +19660,7 @@ export {
   KeyValueFieldBinding,
   KeyValuePreview,
   LabelWithIcon,
+  LabelWithIconAndTooltip,
   MapFieldBinding,
   MapPropertyPreview,
   MarkdownEditorFieldBinding,
@@ -19577,6 +19675,8 @@ export {
   NumberPropertyPreview,
   PropertyConfigBadge,
   PropertyFieldBinding,
+  PropertyIdCopyTooltip,
+  PropertyIdCopyTooltipContent,
   PropertyPreview,
   PropertyTableCell,
   ReadOnlyFieldBinding,