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

package/dist/index.es.js

@@ -3,7 +3,7 @@ import { FieldCaption, SearchIconsView, toSnakeCase, singular, IconForView, Arra
 import * as React from "react";
 import React__default, { useContext, useState, useEffect, useMemo, useRef, useDeferredValue, useCallback } from "react";
 import equal from "react-fast-compare";
-import { useAutoComplete, Container, Typography, Tooltip, IconButton, Chip, TextField, cls, DebouncedTextField, Autocomplete, AutocompleteItem, ExpandablePanel, SettingsIcon, ClearIcon, Select, SelectItem, BooleanSwitchWithLabel, Dialog, AutoAwesomeIcon, Badge, ListIcon, Button, CircularProgress, Paper, DialogContent, DialogActions, RuleIcon, FileUploadIcon, MultiSelect, MultiSelectItem, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, RemoveCircleIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, InfoLabel, DeleteIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, Card, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, DoneIcon, Menu, MoreVertIcon, MenuItem, SaveIcon, UndoIcon } from "@firecms/ui";
+import { useAutoComplete, Container, Typography, Tooltip, IconButton, Chip, TextField, cls, DebouncedTextField, Autocomplete, AutocompleteItem, ExpandablePanel, SettingsIcon, ClearIcon, Select, SelectItem, BooleanSwitchWithLabel, Dialog, AutoAwesomeIcon, Badge, ListIcon, Button, CircularProgress, Paper, DialogContent, DialogActions, RuleIcon, FileUploadIcon, MultiSelect, MultiSelectItem, cardMixin, cardClickableMixin, cardSelectedMixin, FunctionsIcon, RemoveCircleIcon, defaultBorderMixin, RemoveIcon, DragHandleIcon, AddIcon, SelectGroup, InfoLabel, DeleteIcon, fieldBackgroundMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, DialogTitle, Card, WarningOffIcon, ContentCopyIcon, CodeIcon, Table, TableBody, TableRow, TableCell, Alert, Icon, coolIconKeys, Tabs, Tab, ArrowBackIcon, LoadingButton, DoneIcon, Menu, MoreVertIcon, MenuItem, SaveIcon, UndoIcon } from "@firecms/ui";
 import * as Yup from "yup";
 import { useFormex, Field, getIn, useCreateFormex, Formex } from "@firecms/formex";
 import { extractEnumFromValues, buildPropertyFromData, buildEntityPropertiesFromData } from "@firecms/schema_inference";
@@ -2796,40 +2796,6 @@ function updatePropertyFromWidget(propertyData, selectedWidgetId, propertyConfig
   }
   return updatedProperty;
 }
-function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }) {
-  return /* @__PURE__ */ jsx(
-    SelectItem,
-    {
-      value,
-      disabled: optionDisabled,
-      className: "flex flex-row items-center",
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cls(
-            "flex flex-row items-center text-base min-h-[48px]",
-            optionDisabled ? "w-full" : ""
-          ),
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig }) }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { children: propertyConfig.name }),
-              /* @__PURE__ */ jsx(
-                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
@@ -3046,6 +3012,7 @@ const PropertyForm = React__default.memo(
       property,
       onPropertyChanged,
       onPropertyChangedImmediate = true,
+      onDismiss,
       onDelete,
       onError,
       initialErrors,
@@ -3152,6 +3119,7 @@ const PropertyForm = React__default.memo(
         includeIdAndTitle: includeIdAndName,
         propertyNamespace,
         onError,
+        onDismiss,
         showErrors: forceShowErrors || formexController.submitCount > 0,
         existing: existingProperty,
         autoUpdateId,
@@ -3202,6 +3170,7 @@ function PropertyFormDialog({
               PropertyForm,
               {
                 ...formProps,
+                onDismiss: onCancel,
                 onPropertyChanged: (params) => {
                   onPropertyChanged?.(params);
                   onOkClicked?.();
@@ -3251,6 +3220,7 @@ function PropertyEditFormFields({
   onPropertyChanged,
   onDelete,
   propertyNamespace,
+  onDismiss,
   onError,
   showErrors,
   disabled,
@@ -3263,8 +3233,6 @@ function PropertyEditFormFields({
   const [selectOpen, setSelectOpen] = useState(autoOpenTypeSelect);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [selectedFieldConfigId, setSelectedFieldConfigId] = useState(values?.dataType ? getFieldId(values) : void 0);
-  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(null);
   const lastSubmittedProperty = useRef(values);
@@ -3445,72 +3413,23 @@ function PropertyEditFormFields({
     /* @__PURE__ */ jsxs("div", { className: "flex mt-2 justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx(
-          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__ */ jsx("em", { children: "Select a property widget" });
+            onOpenChange: (open, hasValue) => {
+              if (!hasValue) {
+                onDismiss?.();
               }
-              const key = value;
-              const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
-              const baseProperty = propertyConfig.property;
-              const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : void 0;
-              const optionDisabled = isPropertyBuilder(baseProperty) || existing && baseProperty.dataType !== values?.dataType;
-              const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
-              return /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  onClick: (e) => {
-                    if (optionDisabled) {
-                      e.stopPropagation();
-                      e.preventDefault();
-                    }
-                  },
-                  className: cls(
-                    "flex items-center",
-                    optionDisabled ? "w-full pointer-events-none opacity-50" : ""
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: computedFieldConfig }) }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start text-base text-left", children: [
-                      /* @__PURE__ */ jsx("div", { children: computedFieldConfig.name }),
-                      /* @__PURE__ */ jsx(
-                        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 && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
-              return /* @__PURE__ */ jsx(
-                PropertySelectItem,
-                {
-                  value: key,
-                  optionDisabled,
-                  propertyConfig,
-                  existing
-                },
-                key
-              );
-            })
+            disabled,
+            showError: Boolean(selectedWidgetError),
+            existing,
+            propertyConfigs,
+            inArray
           }
         ),
         selectedWidgetError && /* @__PURE__ */ jsx(
@@ -3586,6 +3505,196 @@ function validateName(value) {
   }
   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]) => !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 ? DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key] : void 0;
+  const baseProperty = propertyConfig?.property;
+  const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : void 0;
+  const computedFieldConfig = baseFieldConfig && propertyConfig ? 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "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"
+        ),
+        children: [
+          !value && /* @__PURE__ */ jsx("em", { children: "Select a property widget" }),
+          value && computedFieldConfig && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cls(
+                "flex items-center"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig: computedFieldConfig }) }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start text-base text-left", children: [
+                  /* @__PURE__ */ jsx("div", { children: computedFieldConfig.name }),
+                  /* @__PURE__ */ jsx(
+                    Typography,
+                    {
+                      variant: "caption",
+                      color: "secondary",
+                      children: computedFieldConfig.description
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open,
+        onOpenChange: (open2) => onOpenChange(open2, Boolean(value)),
+        maxWidth: "4xl",
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { children: "Select a property widget" }),
+          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx("div", { children: groups.map((group) => {
+            return /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "label", children: group }),
+              /* @__PURE__ */ 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__ */ 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 && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== initialProperty?.dataType;
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      onClick,
+      className: "flex flex-row items-center px-4 py-2",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cls(
+            "flex flex-row items-center text-base min-h-[48px]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig, disabled: shouldWarnChangingDataType }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-2 items-center", children: [
+                shouldWarnChangingDataType && /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    title: "This widget uses a different data type than the initially selected widget. This can cause errors with existing data.",
+                    children: /* @__PURE__ */ jsx(WarningOffIcon, { size: "smallest", className: "w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Typography,
+                  {
+                    color: shouldWarnChangingDataType ? "secondary" : void 0,
+                    children: propertyConfig.name
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                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) => {
@@ -4078,6 +4187,7 @@ function CollectionPropertiesEditorForm({
         getData,
         propertyConfigs,
         collectionEditable,
+        onCancel: closePropertyDialog,
         onOkClicked: asDialog ? closePropertyDialog : void 0
       },
       `edit_view_${selectedPropertyIndex}`
@@ -5218,6 +5328,40 @@ function PropertySelect({
     }
   );
 }
+function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }) {
+  return /* @__PURE__ */ jsx(
+    SelectItem,
+    {
+      value,
+      disabled: optionDisabled,
+      className: "flex flex-row items-center",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cls(
+            "flex flex-row items-center text-base min-h-[48px]",
+            optionDisabled ? "w-full" : ""
+          ),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "mr-8", children: /* @__PURE__ */ jsx(PropertyConfigBadge, { propertyConfig }) }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { children: propertyConfig.name }),
+              /* @__PURE__ */ jsx(
+                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,