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

package/dist/index.umd.js

@@ -2804,40 +2804,6 @@
     }
     return updatedProperty;
   }
-  function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      ui.SelectItem,
-      {
-        value,
-        disabled: optionDisabled,
-        className: "flex flex-row items-center",
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: ui.cls(
-              "flex flex-row items-center text-base min-h-[48px]",
-              optionDisabled ? "w-full" : ""
-            ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyConfig.name }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  ui.Typography,
-                  {
-                    variant: "caption",
-                    color: "disabled",
-                    className: "max-w-sm",
-                    children: existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description
-                  }
-                )
-              ] })
-            ]
-          }
-        )
-      }
-    );
-  }
   function UrlPropertyField({
     disabled,
     showErrors
@@ -3054,6 +3020,7 @@
         property,
         onPropertyChanged,
         onPropertyChangedImmediate = true,
+        onDismiss,
         onDelete,
         onError,
         initialErrors,
@@ -3160,6 +3127,7 @@
           includeIdAndTitle: includeIdAndName,
           propertyNamespace,
           onError,
+          onDismiss,
           showErrors: forceShowErrors || formexController.submitCount > 0,
           existing: existingProperty,
           autoUpdateId,
@@ -3210,6 +3178,7 @@
                 PropertyForm,
                 {
                   ...formProps,
+                  onDismiss: onCancel,
                   onPropertyChanged: (params) => {
                     onPropertyChanged?.(params);
                     onOkClicked?.();
@@ -3259,6 +3228,7 @@
     onPropertyChanged,
     onDelete,
     propertyNamespace,
+    onDismiss,
     onError,
     showErrors,
     disabled,
@@ -3271,8 +3241,6 @@
     const [selectOpen, setSelectOpen] = React.useState(autoOpenTypeSelect);
     const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = React.useState(values?.dataType ? core.getFieldId(values) : void 0);
-    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
-    const displayedWidgets = inArray ? allSupportedFields.filter(([_, propertyConfig]) => !core.isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array") : allSupportedFields;
     const deferredValues = React.useDeferredValue(values);
     const nameFieldRef = React.useRef(null);
     const lastSubmittedProperty = React.useRef(values);
@@ -3453,72 +3421,23 @@
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex mt-2 justify-between", children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-2", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Select,
+            WidgetSelectView,
             {
-              error: Boolean(selectedWidgetError),
-              value: selectedFieldConfigId ?? "",
-              placeholder: "Select a property widget",
+              initialProperty: values,
+              value: selectedFieldConfigId,
+              onValueChange: (value) => onWidgetSelectChanged(value),
               open: selectOpen,
-              onOpenChange: setSelectOpen,
-              position: "item-aligned",
-              disabled,
-              renderValue: (value) => {
-                if (!value) {
-                  return /* @__PURE__ */ jsxRuntime.jsx("em", { children: "Select a property widget" });
+              onOpenChange: (open, hasValue) => {
+                if (!hasValue) {
+                  onDismiss?.();
                 }
-                const key = value;
-                const propertyConfig = core.DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
-                const baseProperty = propertyConfig.property;
-                const baseFieldConfig = baseProperty && !core.isPropertyBuilder(baseProperty) ? core.getFieldConfig(baseProperty, propertyConfigs) : void 0;
-                const optionDisabled = core.isPropertyBuilder(baseProperty) || existing && baseProperty.dataType !== values?.dataType;
-                const computedFieldConfig = baseFieldConfig ? core.mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    onClick: (e) => {
-                      if (optionDisabled) {
-                        e.stopPropagation();
-                        e.preventDefault();
-                      }
-                    },
-                    className: ui.cls(
-                      "flex items-center",
-                      optionDisabled ? "w-full pointer-events-none opacity-50" : ""
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig: computedFieldConfig }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start text-base text-left", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("div", { children: computedFieldConfig.name }),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          ui.Typography,
-                          {
-                            variant: "caption",
-                            color: "disabled",
-                            children: optionDisabled ? "You can only switch to widgets that use the same data type" : computedFieldConfig.description
-                          }
-                        )
-                      ] })
-                    ]
-                  }
-                );
-              },
-              onValueChange: (value) => {
-                onWidgetSelectChanged(value);
+                setSelectOpen(open);
               },
-              children: displayedWidgets.map(([key, propertyConfig]) => {
-                const baseProperty = propertyConfig.property;
-                const optionDisabled = existing && !core.isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  PropertySelectItem,
-                  {
-                    value: key,
-                    optionDisabled,
-                    propertyConfig,
-                    existing
-                  },
-                  key
-                );
-              })
+              disabled,
+              showError: Boolean(selectedWidgetError),
+              existing,
+              propertyConfigs,
+              inArray
             }
           ),
           selectedWidgetError && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3594,6 +3513,196 @@
     }
     return error;
   }
+  const WIDGET_TYPE_MAP = {
+    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
+  }) {
+    const allSupportedFields = Object.entries(supportedFields).concat(Object.entries(propertyConfigs));
+    const displayedWidgets = (inArray ? allSupportedFields.filter(([_, propertyConfig2]) => !core.isPropertyBuilder(propertyConfig2.property) && propertyConfig2.property?.dataType !== "array") : allSupportedFields).map(([key2, propertyConfig2]) => ({
+      [key2]: propertyConfig2
+    })).reduce((a, b) => {
+      return {
+        ...a,
+        ...b
+      };
+    }, {});
+    const key = value;
+    const propertyConfig = key ? core.DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key] : void 0;
+    const baseProperty = propertyConfig?.property;
+    const baseFieldConfig = baseProperty && !core.isPropertyBuilder(baseProperty) ? core.getFieldConfig(baseProperty, propertyConfigs) : void 0;
+    const computedFieldConfig = baseFieldConfig && propertyConfig ? core.mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
+    const groups = [...new Set(Object.keys(displayedWidgets).map((key2) => {
+      const group = WIDGET_TYPE_MAP[key2];
+      if (group) {
+        return group;
+      }
+      return "Custom/Other";
+    }))];
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          onClick: () => {
+            if (!disabled) {
+              onOpenChange(!open, Boolean(value));
+            }
+          },
+          className: ui.cls(
+            "select-none rounded-md text-sm p-4",
+            ui.fieldBackgroundMixin,
+            disabled ? ui.fieldBackgroundDisabledMixin : ui.fieldBackgroundHoverMixin,
+            "relative flex items-center"
+          ),
+          children: [
+            !value && /* @__PURE__ */ jsxRuntime.jsx("em", { children: "Select a property widget" }),
+            value && computedFieldConfig && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: ui.cls(
+                  "flex items-center"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig: computedFieldConfig }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start text-base text-left", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { children: computedFieldConfig.name }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Typography,
+                      {
+                        variant: "caption",
+                        color: "secondary",
+                        children: computedFieldConfig.description
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Dialog,
+        {
+          open,
+          onOpenChange: (open2) => onOpenChange(open2, Boolean(value)),
+          maxWidth: "4xl",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { children: "Select a property widget" }),
+            /* @__PURE__ */ jsxRuntime.jsx(ui.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: groups.map((group) => {
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "label", children: group }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-2 mt-4", children: Object.entries(displayedWidgets).map(([key2, propertyConfig2]) => {
+                  const groupKey = WIDGET_TYPE_MAP[key2];
+                  if (groupKey === group) {
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      WidgetSelectViewItem,
+                      {
+                        initialProperty,
+                        onClick: () => {
+                          onValueChange(key2);
+                          onOpenChange(false, true);
+                        },
+                        propertyConfig: propertyConfig2,
+                        existing
+                      },
+                      key2
+                    );
+                  }
+                  return null;
+                }) })
+              ] }, group);
+            }) }) })
+          ]
+        }
+      )
+    ] });
+  }
+  function WidgetSelectViewItem({
+    onClick,
+    initialProperty,
+    // optionDisabled,
+    propertyConfig,
+    existing
+  }) {
+    const baseProperty = propertyConfig.property;
+    const shouldWarnChangingDataType = existing && !core.isPropertyBuilder(baseProperty) && baseProperty.dataType !== initialProperty?.dataType;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Card,
+      {
+        onClick,
+        className: "flex flex-row items-center px-4 py-2",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: ui.cls(
+              "flex flex-row items-center text-base min-h-[48px]"
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig, disabled: shouldWarnChangingDataType }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row gap-2 items-center", children: [
+                  shouldWarnChangingDataType && /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Tooltip,
+                    {
+                      title: "This widget uses a different data type than the initially selected widget. This can cause errors with existing data.",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(ui.WarningOffIcon, { size: "smallest", className: "w-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Typography,
+                    {
+                      color: shouldWarnChangingDataType ? "secondary" : void 0,
+                      children: propertyConfig.name
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Typography,
+                  {
+                    variant: "caption",
+                    color: "secondary",
+                    className: "max-w-sm",
+                    children: propertyConfig.description
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
   function camelCase(str) {
     if (!str) return "";
     return (str.slice(0, 1).toLowerCase() + str.slice(1)).replace(/([-_ ]){1,}/g, " ").split(/[-_ ]/).reduce((cur, acc) => {
@@ -4086,6 +4195,7 @@
           getData,
           propertyConfigs,
           collectionEditable,
+          onCancel: closePropertyDialog,
           onOkClicked: asDialog ? closePropertyDialog : void 0
         },
         `edit_view_${selectedPropertyIndex}`
@@ -5226,6 +5336,40 @@
       }
     );
   }
+  function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.SelectItem,
+      {
+        value,
+        disabled: optionDisabled,
+        className: "flex flex-row items-center",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: ui.cls(
+              "flex flex-row items-center text-base min-h-[48px]",
+              optionDisabled ? "w-full" : ""
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsxRuntime.jsx(core.PropertyConfigBadge, { propertyConfig }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyConfig.name }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Typography,
+                  {
+                    variant: "caption",
+                    color: "disabled",
+                    className: "max-w-sm",
+                    children: existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
   function CollectionEditorImportDataPreview({
     importConfig,
     properties,