@firecms/collection_editor 3.0.0-canary.136 → 3.0.0-canary.138

package/dist/ui/collection_editor/PropertyEditView.d.ts

@@ -21,6 +21,7 @@ export type PropertyFormProps = {
     property?: Property;
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onPropertyChangedImmediate?: boolean;
+    onDismiss?: () => void;
     onDelete?: (id?: string, namespace?: string) => void;
     onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
     initialErrors?: Record<string, any>;
@@ -38,3 +39,10 @@ export declare function PropertyFormDialog({ open, onCancel, onOkClicked, onProp
     onOkClicked?: () => void;
     onCancel?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
+export interface PropertySelectItemProps {
+    onClick?: () => void;
+    initialProperty?: PropertyWithId;
+    propertyConfig: PropertyConfig;
+    existing: boolean;
+}
+export declare function WidgetSelectViewItem({ onClick, initialProperty, propertyConfig, existing }: PropertySelectItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/import/CollectionEditorImportMapping.d.ts

@@ -5,3 +5,10 @@ export declare function CollectionEditorImportMapping({ importConfig, propertyCo
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 }): import("react/jsx-runtime").JSX.Element;
+export interface PropertySelectItemProps {
+    value: string;
+    optionDisabled: boolean;
+    propertyConfig: PropertyConfig;
+    existing: boolean;
+}
+export declare function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-canary.136",
+  "version": "3.0.0-canary.138",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-canary.136",
-    "@firecms/data_import": "^3.0.0-canary.136",
-    "@firecms/data_import_export": "^3.0.0-canary.136",
-    "@firecms/formex": "^3.0.0-canary.136",
-    "@firecms/schema_inference": "^3.0.0-canary.136",
-    "@firecms/ui": "^3.0.0-canary.136",
+    "@firecms/data_export": "^3.0.0-canary.138",
+    "@firecms/data_import": "^3.0.0-canary.138",
+    "@firecms/data_import_export": "^3.0.0-canary.138",
+    "@firecms/formex": "^3.0.0-canary.138",
+    "@firecms/schema_inference": "^3.0.0-canary.138",
+    "@firecms/ui": "^3.0.0-canary.138",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.0"
   },
@@ -67,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "10606ac1472f57203a5571b7b5433b2625aafdb9"
+  "gitHead": "055055d2b116aa0a4dfd6252cd3f0e9da323770a"
 }

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -474,6 +474,7 @@ export function CollectionPropertiesEditorForm({
                 getData={getData}
                 propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
+                onCancel={closePropertyDialog}
                 onOkClicked={asDialog
                     ? closePropertyDialog
                     : undefined

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -3,8 +3,8 @@ import equal from "react-fast-compare"
 
 import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/formex";
 import {
-    DEFAULT_FIELD_CONFIGS,
     ConfirmationDialog,
+    DEFAULT_FIELD_CONFIGS,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -17,15 +17,21 @@ import {
 } from "@firecms/core";
 import {
     Button,
+    Card,
     cls,
     DeleteIcon,
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
     IconButton,
     InfoLabel,
-    Select,
-    Typography
+    Tooltip,
+    Typography,
+    WarningOffIcon
 } from "@firecms/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
@@ -42,7 +48,6 @@ import { AdvancedPropertyValidation } from "./properties/advanced/AdvancedProper
 import { editableProperty } from "../../utils/entities";
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
-import { PropertySelectItem } from "./PropertySelectItem";
 import { UrlPropertyField } from "./properties/UrlPropertyField";
 import { supportedFields } from "./utils/supported_fields";
 import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
@@ -69,6 +74,7 @@ export type PropertyFormProps = {
     property?: Property;
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onPropertyChangedImmediate?: boolean;
+    onDismiss?: () => void;
     onDelete?: (id?: string, namespace?: string) => void;
     onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
     initialErrors?: Record<string, any>;
@@ -96,6 +102,7 @@ export const PropertyForm = React.memo(
             property,
             onPropertyChanged,
             onPropertyChangedImmediate = true,
+            onDismiss,
             onDelete,
             onError,
             initialErrors,
@@ -213,6 +220,7 @@ export const PropertyForm = React.memo(
                 includeIdAndTitle={includeIdAndName}
                 propertyNamespace={propertyNamespace}
                 onError={onError}
+                onDismiss={onDismiss}
                 showErrors={forceShowErrors || formexController.submitCount > 0}
                 existing={existingProperty}
                 autoUpdateId={autoUpdateId}
@@ -268,6 +276,7 @@ export function PropertyFormDialog({
               }}>
             <DialogContent>
                 <PropertyForm {...formProps}
+                              onDismiss={onCancel}
                               onPropertyChanged={(params) => {
                                   onPropertyChanged?.(params);
                                   onOkClicked?.();
@@ -312,6 +321,7 @@ function PropertyEditFormFields({
                                     onPropertyChanged,
                                     onDelete,
                                     propertyNamespace,
+                                    onDismiss,
                                     onError,
                                     showErrors,
                                     disabled,
@@ -326,6 +336,7 @@ function PropertyEditFormFields({
     autoUpdateId?: boolean;
     autoOpenTypeSelect: boolean;
     propertyNamespace?: string;
+    onDismiss?: () => void;
     onPropertyChanged?: (params: OnPropertyChangedParams) => void;
     onDelete?: (id?: string, namespace?: string) => void;
     onError?: (id: string, namespace?: string, error?: Record<string, any>) => void;
@@ -342,12 +353,6 @@ function PropertyEditFormFields({
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.dataType ? getFieldId(values) : undefined);
 
-    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
-
-    const displayedWidgets = inArray
-        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
-        : allSupportedFields;
-
     const deferredValues = useDeferredValue(values);
     const nameFieldRef = useRef<HTMLInputElement>(null);
 
@@ -489,62 +494,22 @@ function PropertyEditFormFields({
 
             <div className="flex mt-2 justify-between">
                 <div className={"w-full flex flex-col gap-2"}>
-                    <Select
-                        // className={"w-full"}
-                        error={Boolean(selectedWidgetError)}
-                        value={selectedFieldConfigId ?? ""}
-                        placeholder={"Select a property widget"}
+                    <WidgetSelectView
+                        initialProperty={values}
+                        value={selectedFieldConfigId as PropertyConfigId}
+                        onValueChange={(value) => onWidgetSelectChanged(value as PropertyConfigId)}
                         open={selectOpen}
-                        onOpenChange={setSelectOpen}
-                        position={"item-aligned"}
-                        disabled={disabled}
-                        renderValue={(value) => {
-                            if (!value) {
-                                return <em>Select a property
-                                    widget</em>;
+                        onOpenChange={(open, hasValue) => {
+                            if (!hasValue) {
+                                onDismiss?.();
                             }
-                            const key = value as PropertyConfigId;
-                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
-                            const baseProperty = propertyConfig.property;
-                            const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
-                            const optionDisabled = isPropertyBuilder(baseProperty) || (existing && baseProperty.dataType !== values?.dataType);
-                            const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
-                            return <div
-                                onClick={(e) => {
-                                    if (optionDisabled) {
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                    }
-                                }}
-                                className={cls(
-                                    "flex items-center",
-                                    optionDisabled ? "w-full pointer-events-none opacity-50" : "")}>
-                                <div className={"mr-8"}>
-                                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
-                                </div>
-                                <div className={"flex flex-col items-start text-base text-left"}>
-                                    <div>{computedFieldConfig.name}</div>
-                                    <Typography variant={"caption"}
-                                                color={"disabled"}>
-                                        {optionDisabled ? "You can only switch to widgets that use the same data type" : computedFieldConfig.description}
-                                    </Typography>
-                                </div>
-                            </div>
+                            setSelectOpen(open);
                         }}
-                        onValueChange={(value) => {
-                            onWidgetSelectChanged(value as PropertyConfigId);
-                        }}>
-                        {displayedWidgets.map(([key, propertyConfig]) => {
-                            const baseProperty = propertyConfig.property;
-                            const optionDisabled = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
-                            return <PropertySelectItem
-                                key={key}
-                                value={key}
-                                optionDisabled={optionDisabled}
-                                propertyConfig={propertyConfig}
-                                existing={existing}/>;
-                        })}
-                    </Select>
+                        disabled={disabled}
+                        showError={Boolean(selectedWidgetError)}
+                        existing={existing}
+                        propertyConfigs={propertyConfigs}
+                        inArray={inArray}/>
 
                     {selectedWidgetError &&
                         <Typography variant="caption"
@@ -588,10 +553,10 @@ function PropertyEditFormFields({
                                     onCancel={() => setDeleteDialogOpen(false)}
                                     title={<div>Delete this property?</div>}
                                     body={
-                                              <div> This will <b>not delete any
-                                                  data</b>, only modify the
-                                                  collection.</div>
-                                          }/>}
+                                        <div> This will <b>not delete any
+                                            data</b>, only modify the
+                                            collection.</div>
+                                    }/>}
 
         </>
     );
@@ -621,3 +586,204 @@ function validateName(value: string) {
     }
     return error;
 }
+
+const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
+    text_field: "Text",
+    multiline: "Text",
+    markdown: "Text",
+    url: "Text",
+    email: "Text",
+    switch: "Boolean",
+    select: "Select",
+    multi_select: "Select",
+    number_input: "Number",
+    number_select: "Select",
+    multi_number_select: "Select",
+    file_upload: "File",
+    multi_file_upload: "File",
+    reference: "Reference",
+    multi_references: "Reference",
+    date_time: "Date",
+    group: "Group",
+    key_value: "Group",
+    repeat: "Array",
+    custom_array: "Array",
+    block: "Group"
+};
+
+function WidgetSelectView({
+                              initialProperty,
+                              value,
+                              onValueChange,
+                              open,
+                              onOpenChange,
+                              disabled,
+                              showError,
+                              existing,
+                              propertyConfigs,
+                              inArray
+                          }: {
+    initialProperty?: PropertyWithId,
+    value?: PropertyConfigId,
+    onValueChange: (value: string) => void,
+    showError: boolean,
+    open: boolean,
+    onOpenChange: (open: boolean, hasValue: boolean) => void,
+    disabled: boolean,
+    existing: boolean,
+    propertyConfigs: Record<string, PropertyConfig>,
+    inArray?: boolean
+}) {
+
+    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
+
+    const displayedWidgets = (inArray
+        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
+        : allSupportedFields)
+        .map(([key, propertyConfig]) => ({
+            [key]: propertyConfig
+        }))
+        .reduce((a, b) => {
+            return {
+                ...a,
+                ...b
+            }
+        }, {});
+
+    const key = value;
+    const propertyConfig = key ? (DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key]) : undefined;
+    const baseProperty = propertyConfig?.property;
+    const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
+    const computedFieldConfig = baseFieldConfig && propertyConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
+
+    const groups: string[] = [...new Set(Object.keys(displayedWidgets).map(key => {
+        const group = WIDGET_TYPE_MAP[key as PropertyConfigId];
+        if (group) {
+            return group;
+        }
+        return "Custom/Other"
+    }))];
+
+    return <>
+        <div
+            onClick={() => {
+                if (!disabled) {
+                    onOpenChange(!open, Boolean(value));
+                }
+            }}
+            className={cls(
+                "select-none rounded-md text-sm p-4",
+                fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                "relative flex items-center",
+            )}>
+            {!value && <em>Select a property widget</em>}
+            {value && computedFieldConfig && <div
+                className={cls(
+                    "flex items-center")}>
+                <div className={"mr-8"}>
+                    <PropertyConfigBadge propertyConfig={computedFieldConfig}/>
+                </div>
+                <div className={"flex flex-col items-start text-base text-left"}>
+                    <div>{computedFieldConfig.name}</div>
+                    <Typography variant={"caption"}
+                                color={"secondary"}>
+                        {computedFieldConfig.description}
+                    </Typography>
+                </div>
+            </div>}
+        </div>
+        <Dialog open={open}
+                onOpenChange={(open) => onOpenChange(open, Boolean(value))}
+                maxWidth={"4xl"}>
+            <DialogTitle>
+                Select a property widget
+            </DialogTitle>
+            <DialogContent>
+                <div>
+                    {groups.map(group => {
+                        return <div key={group} className={"mt-4"}>
+                            <Typography variant={"label"}>{group}</Typography>
+                            <div className={"grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4"}>
+                                {Object.entries(displayedWidgets).map(([key, propertyConfig]) => {
+                                    const groupKey = WIDGET_TYPE_MAP[key as PropertyConfigId];
+                                    if (groupKey === group) {
+                                        return <WidgetSelectViewItem
+                                            key={key}
+                                            initialProperty={initialProperty}
+                                            onClick={() => {
+                                                onValueChange(key);
+                                                onOpenChange(false, true);
+                                            }}
+                                            propertyConfig={propertyConfig}
+                                            existing={existing}/>;
+                                    }
+                                    return null;
+                                })}
+                            </div>
+                        </div>;
+                    })}
+                    {/*{displayedWidgets.map(([key, propertyConfig]) => {*/}
+                    {/*    return <WidgetSelectViewItem*/}
+                    {/*        key={key}*/}
+                    {/*        initialProperty={initialProperty}*/}
+                    {/*        onClick={() => {*/}
+                    {/*            onValueChange(key);*/}
+                    {/*            onOpenChange(false);*/}
+                    {/*        }}*/}
+                    {/*        propertyConfig={propertyConfig}*/}
+                    {/*        existing={existing}/>;*/}
+                    {/*})}*/}
+                </div>
+            </DialogContent>
+        </Dialog>
+    </>;
+}
+
+export interface PropertySelectItemProps {
+    onClick?: () => void;
+    initialProperty?: PropertyWithId;
+    propertyConfig: PropertyConfig;
+    existing: boolean;
+}
+
+export function WidgetSelectViewItem({
+                                         onClick,
+                                         initialProperty,
+                                         // optionDisabled,
+                                         propertyConfig,
+                                         existing
+                                     }: PropertySelectItemProps) {
+    const baseProperty = propertyConfig.property;
+    const shouldWarnChangingDataType = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== initialProperty?.dataType;
+
+    return <Card
+        onClick={onClick}
+        className={"flex flex-row items-center px-4 py-2"}>
+        <div
+            className={cls(
+                "flex flex-row items-center text-base min-h-[48px]",
+            )}>
+            <div className={"mr-8"}>
+                <PropertyConfigBadge propertyConfig={propertyConfig} disabled={shouldWarnChangingDataType}/>
+            </div>
+            <div>
+                <div className={"flex flex-row gap-2 items-center"}>
+                    {shouldWarnChangingDataType && <Tooltip
+                        title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
+                        <WarningOffIcon size="smallest" className={"w-4"}/>
+                    </Tooltip>}
+                    <Typography
+                        color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>
+                </div>
+
+                <Typography variant={"caption"}
+                            color={"secondary"}
+                            className={"max-w-sm"}>
+                    {propertyConfig.description}
+                </Typography>
+
+            </div>
+        </div>
+    </Card>
+}

package/src/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -7,13 +7,12 @@ import {
 import { getIn, useFormex } from "@firecms/formex";
 
 import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
-import { Container, Select, Tooltip, Typography } from "@firecms/ui";
+import { cls, Container, Select, SelectItem, Tooltip, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
 import { PersistedCollection } from "../../../types/persisted_collection";
 import { updatePropertyFromWidget } from "../utils/update_property_for_widget";
-import { PropertySelectItem } from "../PropertySelectItem";
 import { supportedFields } from "../utils/supported_fields";
 import { buildPropertyFromData } from "@firecms/schema_inference";
 
@@ -268,3 +267,33 @@ function PropertySelect({
         </Select>
     </Tooltip>;
 }
+
+export interface PropertySelectItemProps {
+    value: string;
+    optionDisabled: boolean;
+    propertyConfig: PropertyConfig;
+    existing: boolean;
+}
+
+export function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps) {
+    return <SelectItem value={value}
+                       disabled={optionDisabled}
+                       className={"flex flex-row items-center"}>
+        <div
+            className={cls(
+                "flex flex-row items-center text-base min-h-[48px]",
+                optionDisabled ? "w-full" : "")}>
+            <div className={"mr-8"}>
+                <PropertyConfigBadge propertyConfig={propertyConfig}/>
+            </div>
+            <div>
+                <div>{propertyConfig.name}</div>
+                <Typography variant={"caption"}
+                            color={"disabled"}
+                            className={"max-w-sm"}>
+                    {existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description}
+                </Typography>
+            </div>
+        </div>
+    </SelectItem>
+}

package/dist/ui/collection_editor/PropertySelectItem.d.ts

@@ -1,8 +0,0 @@
-import { PropertyConfig } from "@firecms/core";
-export interface PropertySelectItemProps {
-    value: string;
-    optionDisabled: boolean;
-    propertyConfig: PropertyConfig;
-    existing: boolean;
-}
-export declare function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps): import("react/jsx-runtime").JSX.Element;

package/src/ui/collection_editor/PropertySelectItem.tsx

@@ -1,32 +0,0 @@
-import { PropertyConfigBadge, PropertyConfig } from "@firecms/core";
-import { cls, SelectItem, Typography } from "@firecms/ui";
-
-export interface PropertySelectItemProps {
-    value: string;
-    optionDisabled: boolean;
-    propertyConfig: PropertyConfig;
-    existing: boolean;
-}
-
-export function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps) {
-    return <SelectItem value={value}
-                       disabled={optionDisabled}
-                       className={"flex flex-row items-center"}>
-        <div
-            className={cls(
-                "flex flex-row items-center text-base min-h-[48px]",
-                optionDisabled ? "w-full" : "")}>
-            <div className={"mr-8"}>
-                <PropertyConfigBadge propertyConfig={propertyConfig}/>
-            </div>
-            <div>
-                <div>{propertyConfig.name}</div>
-                <Typography variant={"caption"}
-                            color={"disabled"}
-                            className={"max-w-sm"}>
-                    {existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description}
-                </Typography>
-            </div>
-        </div>
-    </SelectItem>
-}