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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.108",
+    "version": "3.0.0-canary.109",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.108",
-        "@firecms/formex": "^3.0.0-canary.108",
-        "@firecms/ui": "^3.0.0-canary.108",
+        "@firecms/editor": "^3.0.0-canary.109",
+        "@firecms/formex": "^3.0.0-canary.109",
+        "@firecms/ui": "^3.0.0-canary.109",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "1e73e3d81ee4168288b90bf29ad8822ce5f20dd1",
+    "gitHead": "ad45014069302bfff4dfc61065f1d193742ac0ca",
     "publishConfig": {
         "access": "public"
     },

package/src/app/Scaffold.tsx

@@ -166,17 +166,20 @@ function DrawerWrapper(props: {
             <Tooltip 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}
             >
-                <IconButton
-                    color="inherit"
-                    aria-label="Open menu"
-                    className="sticky top-2 left-3 "
-                    onClick={() => props.setDrawerOpen(true)}
-                    size="large"
-                >
-                    <MenuIcon/>
-                </IconButton>
+                <div
+                    className="fixed top-2 left-3 !bg-gray-50 dark:!bg-gray-900 rounded-full w-fit z-20">
+                    <IconButton
+                        color="inherit"
+                        aria-label="Open menu"
+                        className="sticky top-2 left-3 "
+                        onClick={() => props.setDrawerOpen(true)}
+                        size="large"
+                    >
+                        <MenuIcon/>
+                    </IconButton>
+                </div>
             </Tooltip>
         )}
 

package/src/components/ArrayContainer.tsx

@@ -7,7 +7,8 @@ import {
     AddIcon,
     Button,
     ContentCopyIcon,
-    fieldBackgroundHoverMixin, HandleIcon,
+    fieldBackgroundHoverMixin,
+    HandleIcon,
     IconButton,
     Menu,
     MenuItem,
@@ -240,7 +241,8 @@ export function ArrayContainerItem({
     >
         <div
             className="flex items-start">
-            <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">
+            <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">
                 {buildEntry(index, internalId)}
             </div>
             <ArrayItemOptions direction={size === "small" ? "row" : "column"}
@@ -253,7 +255,6 @@ export function ArrayContainerItem({
     </div>;
 }
 
-
 export function ArrayItemOptions({
                                      direction,
                                      disabled,
@@ -283,11 +284,13 @@ export function ArrayItemOptions({
             open={menuOpen ? false : undefined}
             side={direction === "column" ? "left" : undefined}
             title="Drag to move. Click for more options">
-
             <IconButton
                 size="small"
                 disabled={disabled}
-                onClick={() => setMenuOpen(true)}
+                onClick={(e) => {
+                    e.preventDefault();
+                    setMenuOpen(true);
+                }}
                 onDragStart={(e: any) => {
                     setMenuOpen(false);
                 }}
@@ -298,7 +301,7 @@ export function ArrayItemOptions({
             <Menu
                 portalContainer={iconRef.current}
                 open={menuOpen}
-                trigger={<div/>}>
+                trigger={<div tabIndex={-1}/>}>
 
                 <MenuItem dense onClick={(e) => {
                     setMenuOpen(false);
@@ -316,7 +319,6 @@ export function ArrayItemOptions({
                 </MenuItem>
 
             </Menu>
-
         </Tooltip>
 
     </div>;

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -80,7 +80,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 <div className="w-34 flex justify-center">
 
                     {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index} title={action.name}>
+                        <Tooltip key={index}
+                                 title={action.name}
+                                 asChild={true}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -237,7 +237,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
 
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
-                        <Tooltip title={disabledTooltip}>
+                        <Tooltip title={disabledTooltip} >
                             <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-gray-500"}/>
                         </Tooltip>
                     </div>}

package/src/components/EntityCollectionTable/internal/EntityTableCellActions.tsx

@@ -11,7 +11,14 @@ export interface EntityTableCellActionsProps {
     children?: React.ReactNode;
 }
 
-export function EntityTableCellActions({ showError, disabled, showExpandIcon, selected, openPopup, children }: EntityTableCellActionsProps) {
+export function EntityTableCellActions({
+                                           showError,
+                                           disabled,
+                                           showExpandIcon,
+                                           selected,
+                                           openPopup,
+                                           children
+                                       }: EntityTableCellActionsProps) {
 
     const ref = useRef<HTMLDivElement>(null);
     const doOpenPopup = useCallback(() => {
@@ -54,13 +61,18 @@ export function EntityTableCellActions({ showError, disabled, showExpandIcon, se
 
                 {showError && <ErrorTooltip
                     side={"left"}
-                    className={"flex items-center justify-center"}
-                    style={{ width: 32, height: 32 }}
                     title={showError.message}>
-                    <ErrorOutlineIcon
-                        size={"small"}
-                        color={"error"}
-                    />
+                    <div
+                        className={"flex items-center justify-center"}
+                        style={{
+                            width: 32,
+                            height: 32
+                        }}>
+                        <ErrorOutlineIcon
+                            size={"small"}
+                            color={"error"}
+                        />
+                    </div>
                 </ErrorTooltip>
                 }
 

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -781,7 +781,7 @@ function EntityIdHeaderWidget({
     const [searchString, setSearchString] = React.useState("");
     const sideEntityController = useSideEntityController();
     return (
-        <Tooltip title={!openPopup ? "Find by ID" : undefined}>
+        <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}

package/src/components/EntityPreview.tsx

@@ -143,11 +143,11 @@ export function EntityPreview({
         </div>
 
         {entity && includeEntityLink &&
-            <Tooltip title={`See details for ${entity.id}`}
-                     className={size !== "smallest" ? "self-start" : ""}>
+            <Tooltip title={`See details for ${entity.id}`}>
                 <IconButton
                     color={"inherit"}
                     size={"small"}
+                    className={size !== "smallest" ? "self-start" : ""}
                     onClick={(e) => {
                         e.stopPropagation();
                         analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {

package/src/components/PropertyIdCopyTooltip.tsx

@@ -0,0 +1,48 @@
+import { ContentCopyIcon, IconButton, Tooltip, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltip({
+                                          propertyKey,
+                                          className,
+                                          children
+                                      }: {
+    propertyKey: string,
+    className?: string,
+    children: React.ReactNode
+}) {
+    return <Tooltip title={<PropertyIdCopyTooltipContent propertyKey={propertyKey}/>}
+                    delayDuration={800}
+                    side={"top"}
+                    asChild={false}
+                    align={"start"}
+                    sideOffset={8}
+                    className={className}>
+        {children}
+    </Tooltip>
+
+}
+
+export function PropertyIdCopyTooltipContent({ propertyKey }: { propertyKey: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyKey}</code></Typography>
+            </div>
+            <IconButton size={"small"}>
+                <ContentCopyIcon size={"smallest"}
+                                 className={"text-white"}
+                                 onClick={useCallback(() => {
+                                     navigator.clipboard.writeText(propertyKey);
+                                     setCopied(true);
+                                     setTimeout(() => setCopied(false), 2000);
+                                 }, [propertyKey])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/SearchIconsView.tsx

@@ -60,7 +60,8 @@ export function SearchIconsView({
             <div className={"flex max-w-full flex-wrap mt-4"}>
                 {icons.map((icon: string) => {
                     return (
-                        <Tooltip title={icon} key={icon}>
+                        <Tooltip title={icon} key={icon}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 toggled={selectedIcon === icon}

package/src/components/index.tsx

@@ -19,6 +19,7 @@ export * from "./EntityCollectionView/EntityCollectionViewActions";
 export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
+export * from "./PropertyIdCopyTooltip";
 
 export * from "./EntityCollectionTable";
 export * from "./NotFoundPage";

package/src/core/DefaultAppBar.tsx

@@ -124,7 +124,7 @@ export const DefaultAppBar = function DefaultAppBar({
                             {typeof title === "string"
                                 ? <Typography variant="subtitle1"
                                               noWrap
-                                              className={"ml-2 !font-medium"}>
+                                              className={cls("!font-medium", drawerOpen ? "ml-2" : "")}>
                                     {title}
                                 </Typography>
                                 : title}

package/src/core/DrawerNavigationItem.tsx

@@ -24,34 +24,36 @@ export function DrawerNavigationItem({
         {icon}
     </div>;
 
-    const listItem = <NavLink
-        onClick={onClick}
-        style={{
-            width: !drawerOpen ? "72px" : "280px",
-            transition: drawerOpen ? "width 150ms ease-in" : undefined
-        }}
-        className={({ isActive }: any) => cls("rounded-r-lg truncate",
-            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-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-8 h-12" : "pl-6 h-11",
-            "font-medium text-sm",
-            isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
-        )}
-        to={url}
-    >
+    const listItem = <div>
+        <NavLink
+            onClick={onClick}
+            style={{
+                width: !drawerOpen ? "72px" : "280px",
+                transition: drawerOpen ? "width 150ms ease-in" : undefined
+            }}
+            className={({ isActive }: any) => cls("rounded-r-lg truncate",
+                "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-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-8 h-12" : "pl-6 h-11",
+                "font-medium text-sm",
+                isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
+            )}
+            to={url}
+        >
 
-        {iconWrap}
+            {iconWrap}
 
-        <div
-            className={cls(
-                drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                "ml-4 font-inherit text-inherit"
-            )}>
-            {name.toUpperCase()}
-        </div>
-    </NavLink>;
+            <div
+                className={cls(
+                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                    "ml-4 font-inherit text-inherit"
+                )}>
+                {name.toUpperCase()}
+            </div>
+        </NavLink>
+    </div>;
 
     return <Tooltip
         open={drawerOpen ? false : tooltipsOpen}

package/src/core/EntityEditView.tsx

@@ -64,7 +64,6 @@ import {
     paperMixin,
     Tab,
     Tabs,
-    Tooltip,
     Typography
 } from "@firecms/ui";
 import { useSideDialogContext } from "./index";
@@ -73,8 +72,7 @@ import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { CustomIdField } from "../form/components/CustomIdField";
 import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
 import { ErrorFocus } from "../form/components/ErrorFocus";
-import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
-import { LabelWithIcon, PropertyFieldBinding } from "../form";
+import { LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
@@ -764,13 +762,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             <div id={`form_field_${key}`}
                                  key={`field_${resolvedCollection.name}_${key}`}>
                                 <ErrorBoundary>
-                                    <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
-                                             delayDuration={800}
-                                             side={"left"}
-                                             align={"start"}
-                                             sideOffset={16}>
-                                        <PropertyFieldBinding {...cmsFormFieldProps}/>
-                                    </Tooltip>
+                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
                                 </ErrorBoundary>
                             </div>
                         );
@@ -791,9 +783,11 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             })}</>;
                         return (
                             <div>
-                                <LabelWithIcon icon={<NotesIcon size={"small"}/>}
-                                               title={additionalField.name}
-                                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                                <LabelWithIconAndTooltip
+                                    propertyKey={key}
+                                    icon={<NotesIcon size={"small"}/>}
+                                    title={additionalField.name}
+                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
                                 <div
                                     className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 

package/src/form/components/CustomIdField.tsx

@@ -68,7 +68,8 @@ export function CustomIdField<M extends Record<string, any>>({
                 ? (
                     <>
 
-                        <Tooltip title={"Copy"}>
+                        <Tooltip title={"Copy"}
+                                 asChild={true}>
                             <IconButton onClick={(e) => copy(entity.id)}
                                         aria-label="copy-id">
                                 <ContentCopyIcon size={"small"}/>
@@ -76,7 +77,8 @@ export function CustomIdField<M extends Record<string, any>>({
                         </Tooltip>
 
                         {customizationController?.entityLinkBuilder &&
-                            <Tooltip title={"Open in the console"}>
+                            <Tooltip title={"Open in the console"}
+                                     asChild={true}>
                                 <IconButton component={"a"}
                                             href={customizationController.entityLinkBuilder({ entity })}
                                             rel="noopener noreferrer"

package/src/form/components/FieldHelperText.tsx

@@ -44,7 +44,7 @@ export function FieldHelperText({
         {property.longDescription &&
             <Tooltip title={property.longDescription}
                      side="bottom"
-            >
+                     asChild={true}>
                 <IconButton
                     size={"small"}
                     className="self-start">

package/src/form/components/LabelWithIcon.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { forwardRef } from "react";
 
 interface LabelWithIconProps {
     icon: React.ReactNode;
@@ -12,22 +12,30 @@ interface LabelWithIconProps {
  * Render the label of with an icon and the title of a property
  * @group Form custom fields
  */
-export function LabelWithIcon({
-                                  icon,
-                                  title,
-                                  small,
-                                  className,
-                                  required
-                              }: LabelWithIconProps) {
-    return (
-        <span
-            className={`inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}>
-
-            {icon}
-
-            <span
-                className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
-
+export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
+    ({
+         icon,
+         title,
+         small,
+         className,
+         required
+     }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={`inline-flex items-center my-0.5 ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}
+            >
+        {icon}
+                <span
+                    className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${
+                        small ? "translate-x-2 scale-75" : ""
+                    }`}
+                >
+          {(title ?? "") + (required ? " *" : "")}
         </span>
-    );
-}
+      </div>
+        );
+    }
+);
+
+LabelWithIcon.displayName = "LabelWithIcon";

package/src/form/components/LabelWithIconAndTooltip.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { LabelWithIcon } from "./LabelWithIcon";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+
+interface LabelWithIconAndTooltip {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+    propertyKey: string
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIconAndTooltip({
+                                            propertyKey,
+                                            className,
+                                            ...props
+                                        }: LabelWithIconAndTooltip) {
+    return (
+        <PropertyIdCopyTooltip propertyKey={propertyKey} className={className}>
+            <LabelWithIcon {...props}/>
+        </PropertyIdCopyTooltip>
+    );
+}

package/src/form/components/StorageItemPreview.tsx

@@ -39,6 +39,7 @@ export function StorageItemPreview({
                     className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
 
                     <Tooltip
+                        asChild={true}
                         title="Remove">
                         <IconButton
                             size={"small"}

package/src/form/components/StorageUploadProgress.tsx

@@ -4,7 +4,6 @@ import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
 import { cls, paperMixin, Skeleton } from "@firecms/ui";
-import { EntityCollection, StorageSource } from "../../types";
 
 export interface StorageUploadItemProps {
     storagePath: string;

package/src/form/components/index.tsx

@@ -1,3 +1,4 @@
 export * from "./FormikArrayContainer";
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
+export * from "./LabelWithIconAndTooltip";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { getIconForProperty } from "../../util";
@@ -40,10 +40,12 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
     });
 
     const title = (<>
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
@@ -80,25 +80,27 @@ export function ArrayOfReferencesFieldBinding({
         if (!entryValue)
             return <div>Internal ERROR</div>;
         return (
-                <ReferencePreview
-                    key={internalId}
-                    disabled={!ofProperty.path}
-                    previewProperties={ofProperty.previewProperties}
-                    size={"medium"}
-                    onClick={onEntryClick}
-                    hover={!disabled}
-                    reference={entryValue}
-                    includeId={ofProperty.includeId}
-                    includeEntityLink={ofProperty.includeEntityLink}
-                />
+            <ReferencePreview
+                key={internalId}
+                disabled={!ofProperty.path}
+                previewProperties={ofProperty.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                reference={entryValue}
+                includeId={ofProperty.includeId}
+                includeEntityLink={ofProperty.includeEntityLink}
+            />
         );
     }, [ofProperty.path, ofProperty.previewProperties, value]);
 
     const title = (<>
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);