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

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
@@ -61,10 +61,12 @@ export function BlockFieldBinding<T extends Array<any>>({
     }, [context, lastAddedId, property.oneOf, propertyKey, value]);
 
     const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
     );
 
     const firstOneOfKey = Object.keys(property.oneOf.properties)[0];

package/src/form/field_bindings/DateTimeFieldBinding.tsx

@@ -7,6 +7,7 @@ import { useCustomizationController } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { DateTimeField } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type DateTimeFieldProps = FieldProps<Date>;
 
@@ -41,20 +42,22 @@ export function DateTimeFieldBinding({
 
     return (
         <>
-            <DateTimeField
-                value={internalValue}
-                onChange={(dateValue) => setValue(dateValue)}
-                size={"medium"}
-                mode={property.mode}
-                clearable={property.clearable}
-                locale={locale}
-                error={showError}
-                label={<LabelWithIcon
-                    icon={getIconForProperty(property, "small")}
-                    required={property.validation?.required}
-                    className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
-                    title={property.name}/>}
-            />
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <DateTimeField
+                    value={internalValue}
+                    onChange={(dateValue) => setValue(dateValue)}
+                    size={"medium"}
+                    mode={property.mode}
+                    clearable={property.clearable}
+                    locale={locale}
+                    error={showError}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        className={showError ? "text-red-500 dark:text-red-500" : "text-text-secondary dark:text-text-secondary-dark"}
+                        title={property.name}/>}
+                />
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { DataType, FieldProps, GeoPoint } from "../../types";
 
 import { ArrayContainer } from "../../components";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
@@ -62,7 +62,8 @@ export function KeyValueFieldBinding({
                                      initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
-    const title = <LabelWithIcon
+    const title = <LabelWithIconAndTooltip
+        propertyKey={propertyKey}
         icon={getIconForProperty(property, "small")}
         required={property.validation?.required}
         title={property.name}

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,17 +1,9 @@
 import React from "react";
-import {
-    CMSType,
-    FieldProps,
-    FormContext,
-    MapProperty,
-    Properties,
-    ResolvedProperties,
-    ResolvedProperty
-} from "../../types";
+import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
@@ -91,18 +83,20 @@ export function MapFieldBinding({
     </>;
 
     const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
     );
 
     return (
         <ErrorBoundary>
 
             {!minimalistView && !minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
-                                                                 title={title}>{mapFormView}</ExpandablePanel>}
+                                                                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
+                                                                    title={title}>{mapFormView}</ExpandablePanel>}
 
             {(minimalistView || minimalistView) && mapFormView}
 

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -2,11 +2,11 @@ import {
     FieldHelperText,
     FieldProps,
     getIconForProperty,
-    LabelWithIcon,
+    LabelWithIconAndTooltip,
     randomString,
     useStorageSource
 } from "../../index";
-import { Paper } from "@firecms/ui";
+import { cls, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
 import { FireCMSEditor } from "@firecms/editor";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { resolveStorageFilenameString, resolveStoragePathString } from "../../util/storage";
@@ -115,13 +115,15 @@ export function MarkdownEditorFieldBinding({
 
     return (
         <>
-            <LabelWithIcon icon={getIconForProperty(property, "small")}
-                           required={property.validation?.required}
-                           title={property.name}
-                           className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
-            <Paper>
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
                 {editor}
-            </Paper>
+            </div>
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
                              error={error}

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
 import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
@@ -85,10 +85,12 @@ export function MultiSelectBinding({
                 size={size === "medium" ? "medium" : "small"}
                 value={validValue ? value.map((v) => v.toString()) : []}
                 disabled={disabled}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}
-                                      className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                label={<LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
                 renderValue={useCallback((v: string) => renderValue(v, false), [renderValue])}
                 onMultiValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { Entity, FieldProps } from "../../types";
+import { FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { cls, paperMixin } from "@firecms/ui";
@@ -34,10 +34,12 @@ export function ReadOnlyFieldBinding({
 
         <>
 
-            {!minimalistView && <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                               required={property.validation?.required}
-                                               title={property.name}
-                                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
 import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorView } from "../../components";
 import { EmptyValue, ReferencePreview } from "../../preview";
 import { getIconForProperty, getReferenceFrom } from "../../util";
@@ -29,6 +29,7 @@ export function ReferenceFieldBinding<M extends Record<string, any>>(props: Fiel
 }
 
 function ReferenceFieldBindingInternal({
+                                           propertyKey,
                                            value,
                                            setValue,
                                            error,
@@ -84,10 +85,12 @@ function ReferenceFieldBindingInternal({
 
     return (
         <>
-            {!minimalistView && <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                               required={property.validation?.required}
-                                               title={property.name}
-                                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "../../components";
 import { getDefaultValueFor, getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
@@ -77,10 +77,12 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                  newDefaultEntry={getDefaultValueFor(property.of)}/>;
 
     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 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/SelectFieldBinding.tsx

@@ -6,6 +6,7 @@ import { EnumValuesChip } from "../../preview";
 import { getIconForProperty } from "../../util";
 import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
 
@@ -48,47 +49,50 @@ export function SelectFieldBinding<T extends EnumType>({
     return (
         <>
 
-            <Select
-                size={size === "medium" ? "medium" : "small"}
-                value={value !== undefined && value != null ? value.toString() : ""}
-                disabled={disabled}
-                position="item-aligned"
-                inputClassName={cls("w-full")}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}
-                                      className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
-                />}
-                endAdornment={
-                    property.clearable && <IconButton
-                        onClick={handleClearClick}>
-                        <ClearIcon/>
-                    </IconButton>
-                }
-                onValueChange={(updatedValue: string) => {
-                    const newValue = updatedValue
-                        ? (property.dataType === "number" ? parseFloat(updatedValue) : updatedValue)
-                        : null;
-                    return setValue(newValue as T);
-                }}
-                renderValue={(enumKey: any) => {
-                    return <EnumValuesChip
-                        enumKey={enumKey}
-                        enumValues={enumValues}
-                        size={size}/>;
-                }}
-            >
-                {enumValues && enumValues.map((option) => {
-                    return <SelectItem
-                        key={option.id}
-                        value={String(option.id)}>
-                        <EnumValuesChip
-                            enumKey={String(option.id)}
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <Select
+                    size={size === "medium" ? "medium" : "small"}
+                    value={value !== undefined && value != null ? value.toString() : ""}
+                    disabled={disabled}
+                    position="item-aligned"
+                    inputClassName={cls("w-full")}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}
+                        className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
+                    />}
+                    endAdornment={
+                        property.clearable && <IconButton
+                            onClick={handleClearClick}>
+                            <ClearIcon/>
+                        </IconButton>
+                    }
+                    onValueChange={(updatedValue: string) => {
+                        const newValue = updatedValue
+                            ? (property.dataType === "number" ? parseFloat(updatedValue) : updatedValue)
+                            : null;
+                        return setValue(newValue as T);
+                    }}
+                    renderValue={(enumKey: any) => {
+                        return <EnumValuesChip
+                            enumKey={enumKey}
                             enumValues={enumValues}
-                            size={size}/>
-                    </SelectItem>
-                })}
-            </Select>
+                            size={size}/>;
+                    }}
+                >
+                    {enumValues && enumValues.map((option) => {
+                        return <SelectItem
+                            key={option.id}
+                            value={String(option.id)}>
+                            <EnumValuesChip
+                                enumKey={String(option.id)}
+                                enumValues={enumValues}
+                                size={size}/>
+                        </SelectItem>
+                    })}
+                </Select>
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { ArrayProperty, FieldProps, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
 import { getIconForProperty, isReadOnly } from "../../util";
 import { useSnackbarController, useStorageSource } from "../../hooks";
@@ -88,10 +88,12 @@ export function StorageUploadFieldBinding({
         <>
 
             {!minimalistView &&
-                <LabelWithIcon icon={getIconForProperty(property, "small")}
-                               required={property.validation?.required}
-                               title={property.name}
-                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -5,6 +5,7 @@ import { getIconForProperty } from "../../util";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { BooleanSwitchWithLabel } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SwitchFieldProps = FieldProps<boolean>;
 
@@ -37,17 +38,20 @@ export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
     return (
         <>
 
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
             <BooleanSwitchWithLabel
                 value={value}
                 onValueChange={(v) => setValue(v)}
                 error={showError}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
+                label={<LabelWithIcon
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}/>}
                 disabled={disabled}
                 autoFocus={autoFocus}
                 size={size}
             />
+            </PropertyIdCopyTooltip>
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -6,6 +6,7 @@ import { FieldHelperText, LabelWithIcon } from "../components";
 import { getIconForProperty } from "../../util";
 import { PropertyPreview } from "../../preview";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
 
 interface TextFieldBindingProps<T extends string | number> extends FieldProps<T> {
     allowInfinity?: boolean
@@ -68,28 +69,29 @@ export function TextFieldBinding<T extends string | number>({
     const isMultiline = Boolean(multiline);
 
     const inputType = property.dataType === "number" ? "number" : undefined;
-    return (
-        <>
-            <TextField
-                size={size}
-                value={value}
-                onChange={onChange}
-                autoFocus={autoFocus}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}/>}
-                type={inputType}
-                multiline={isMultiline}
-                disabled={disabled}
-                endAdornment={
-                    property.clearable && <IconButton
-                        onClick={handleClearClick}>
-                        <ClearIcon/>
-                    </IconButton>
-                }
-                error={showError ? error : undefined}
-                inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
-
+    return (<>
+            <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                <TextField
+                    size={size}
+                    value={value}
+                    onChange={onChange}
+                    autoFocus={autoFocus}
+                    label={<LabelWithIcon
+                        icon={getIconForProperty(property, "small")}
+                        required={property.validation?.required}
+                        title={property.name}/>}
+                    type={inputType}
+                    multiline={isMultiline}
+                    disabled={disabled}
+                    endAdornment={
+                        property.clearable && <IconButton
+                            onClick={handleClearClick}>
+                            <ClearIcon/>
+                        </IconButton>
+                    }
+                    error={showError ? error : undefined}
+                    inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
+            </PropertyIdCopyTooltip>
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
                              error={error}

package/src/preview/components/ImagePreview.tsx

@@ -58,7 +58,9 @@ export function ImagePreview({
 
 
             <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
-                {navigator && <Tooltip title="Copy url to clipboard" side={"bottom"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title="Copy url to clipboard" side={"bottom"}>
                     <IconButton
                         variant={"filled"}
                         size={"small"}

package/dist/components/PropertyIdCopyTooltipContent.d.ts

@@ -1,3 +0,0 @@
-export declare function PropertyIdCopyTooltipContent({ propertyId }: {
-    propertyId: string;
-}): import("react/jsx-runtime").JSX.Element;

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -1,27 +0,0 @@
-import { ContentCopyIcon, IconButton, Typography } from "@firecms/ui";
-import { useCallback, useState } from "react";
-
-export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: 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>{propertyId}</code></Typography>
-            </div>
-            <IconButton size={"small"}>
-                <ContentCopyIcon size={"smallest"}
-                                  className={"text-white"}
-                                  onClick={useCallback(() => {
-                                      navigator.clipboard.writeText(propertyId);
-                                      setCopied(true);
-                                      setTimeout(() => setCopied(false), 2000);
-                                  }, [propertyId])}
-                />
-            </IconButton>
-        </div>
-    );
-}