@open-mercato/ui 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/dist/backend/custom-fields/FieldDefinitionsEditor.js

@@ -4,6 +4,13 @@ import * as React from "react";
 import { Cog, GripVertical, Languages, Pencil, Plus, Trash2 } from "lucide-react";
 import { Button } from "../../primitives/button.js";
 import { IconButton } from "../../primitives/icon-button.js";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../primitives/select.js";
 import { CUSTOM_FIELD_KINDS } from "@open-mercato/shared/modules/entities/kinds";
 import { FieldRegistry } from "../fields/registry.js";
 import { slugify } from "@open-mercato/shared/lib/slugify";
@@ -225,14 +232,13 @@ function FieldDefinitionsEditor({
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx("label", { className: "text-xs font-medium text-muted-foreground", children: "Fieldset" }),
             /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
-                className: "border rounded px-2 py-1 text-sm",
-                value: resolvedActiveFieldset ?? "",
-                onChange: (event) => handleActiveFieldsetChange(event.target.value),
+                value: resolvedActiveFieldset || void 0,
+                onValueChange: (value) => handleActiveFieldsetChange(value ?? ""),
                 children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "Unassigned fields" }),
-                  fieldsets.map((fs) => /* @__PURE__ */ jsx("option", { value: fs.code, children: fs.label || fs.code }, fs.code))
+                  /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", className: "w-auto min-w-[10rem]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Unassigned fields" }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: fieldsets.map((fs) => /* @__PURE__ */ jsx(SelectItem, { value: fs.code, children: fs.label || fs.code }, fs.code)) })
                 ]
               }
             ),
@@ -290,16 +296,15 @@ function FieldDefinitionsEditor({
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("label", { className: "text-xs", children: "Icon" }),
               /* @__PURE__ */ jsxs(
-                "select",
+                Select,
                 {
-                  className: "border rounded w-full px-2 py-1 text-sm",
-                  value: activeFieldsetConfig.icon ?? "",
-                  onChange: (event) => handleFieldsetPatch(activeFieldsetConfig.code, {
-                    icon: event.target.value || void 0
+                  value: activeFieldsetConfig.icon || void 0,
+                  onValueChange: (value) => handleFieldsetPatch(activeFieldsetConfig.code, {
+                    icon: value || void 0
                   }),
                   children: [
-                    /* @__PURE__ */ jsx("option", { value: "", children: "Default" }),
-                    FIELDSET_ICON_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+                    /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Default" }) }),
+                    /* @__PURE__ */ jsx(SelectContent, { children: FIELDSET_ICON_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
                   ]
                 }
               )
@@ -677,15 +682,17 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard2({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "md:col-span-6", children: [
           /* @__PURE__ */ jsx("label", { className: "text-xs", children: "Kind" }),
-          /* @__PURE__ */ jsx(
-            "select",
+          /* @__PURE__ */ jsxs(
+            Select,
             {
-              className: `rounded w-full px-2 py-1 text-sm ${error?.kind ? "border-red-500 border" : "border"}`,
-              value: local.kind,
-              onChange: (event) => {
-                apply({ kind: event.target.value }, true);
+              value: local.kind || void 0,
+              onValueChange: (value) => {
+                apply({ kind: value ?? "" }, true);
               },
-              children: kindOptions.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { className: error?.kind ? "border-destructive" : void 0, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: kindOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+              ]
             }
           ),
           error?.kind ? /* @__PURE__ */ jsx("div", { className: "text-xs text-red-600 mt-1", children: error.kind }) : null
@@ -695,14 +702,13 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard2({
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("label", { className: "text-xs", children: "Assign to fieldset" }),
           /* @__PURE__ */ jsxs(
-            "select",
+            Select,
             {
-              className: "border rounded w-full px-2 py-1 text-sm",
-              value: currentFieldsetValue,
-              onChange: (event) => handleFieldsetSelect(event.target.value),
+              value: currentFieldsetValue || void 0,
+              onValueChange: (value) => handleFieldsetSelect(value ?? ""),
               children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: "Unassigned" }),
-                (fieldsets || []).map((fs) => /* @__PURE__ */ jsx("option", { value: fs.code, children: fs.label || fs.code }, fs.code))
+                /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Unassigned" }) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: (fieldsets || []).map((fs) => /* @__PURE__ */ jsx(SelectItem, { value: fs.code, children: fs.label || fs.code }, fs.code)) })
               ]
             }
           )
@@ -711,14 +717,13 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard2({
           /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsx("label", { className: "text-xs", children: "Group" }) }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
             /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
-                className: "flex-1 border rounded px-2 py-1 text-sm",
-                value: currentGroup?.code ?? "",
-                onChange: (event) => handleGroupSelect(event.target.value),
+                value: currentGroup?.code || void 0,
+                onValueChange: (value) => handleGroupSelect(value ?? ""),
                 children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "No group" }),
-                  groupOptions.map((group) => /* @__PURE__ */ jsx("option", { value: group.code, children: group.title || group.code }, group.code))
+                  /* @__PURE__ */ jsx(SelectTrigger, { className: "flex-1", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "No group" }) }),
+                  /* @__PURE__ */ jsx(SelectContent, { children: groupOptions.map((group) => /* @__PURE__ */ jsx(SelectItem, { value: group.code, children: group.title || group.code }, group.code)) })
                 ]
               }
             ),
@@ -774,18 +779,19 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard2({
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx("label", { className: "text-xs", children: "Editor" }),
             /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
-                className: "border rounded w-full px-2 py-1 text-sm",
-                value: typeof local.configJson?.editor === "string" ? local.configJson.editor : "",
-                onChange: (event) => {
-                  apply({ configJson: { ...local.configJson || {}, editor: event.target.value || void 0 } }, true);
+                value: typeof local.configJson?.editor === "string" && local.configJson.editor ? local.configJson.editor : void 0,
+                onValueChange: (value) => {
+                  apply({ configJson: { ...local.configJson || {}, editor: value || void 0 } }, true);
                 },
                 children: [
-                  /* @__PURE__ */ jsx("option", { value: "", children: "Default" }),
-                  /* @__PURE__ */ jsx("option", { value: "markdown", children: "Markdown (UIW)" }),
-                  /* @__PURE__ */ jsx("option", { value: "simpleMarkdown", children: "Simple Markdown" }),
-                  /* @__PURE__ */ jsx("option", { value: "htmlRichText", children: "HTML Rich Text" })
+                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Default" }) }),
+                  /* @__PURE__ */ jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsx(SelectItem, { value: "markdown", children: "Markdown (UIW)" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "simpleMarkdown", children: "Simple Markdown" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "htmlRichText", children: "HTML Rich Text" })
+                  ] })
                 ]
               }
             )
@@ -800,20 +806,21 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard2({
             !!local.configJson?.multi && /* @__PURE__ */ jsxs("div", { className: "md:col-span-2", children: [
               /* @__PURE__ */ jsx("label", { className: "text-xs", children: "Multi-select input style" }),
               /* @__PURE__ */ jsxs(
-                "select",
+                Select,
                 {
-                  className: "border rounded w-full px-2 py-1 text-sm",
                   value: local.configJson?.input === "listbox" ? "listbox" : "default",
-                  onChange: (event) => {
-                    const { value } = event.target;
+                  onValueChange: (value) => {
                     const nextConfig = { ...local.configJson || {} };
                     if (value === "listbox") nextConfig.input = "listbox";
                     else delete nextConfig.input;
                     apply({ configJson: nextConfig }, true);
                   },
                   children: [
-                    /* @__PURE__ */ jsx("option", { value: "default", children: "Default" }),
-                    /* @__PURE__ */ jsx("option", { value: "listbox", children: "Listbox (searchable)" })
+                    /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                    /* @__PURE__ */ jsxs(SelectContent, { children: [
+                      /* @__PURE__ */ jsx(SelectItem, { value: "default", children: "Default" }),
+                      /* @__PURE__ */ jsx(SelectItem, { value: "listbox", children: "Listbox (searchable)" })
+                    ] })
                   ]
                 }
               )
@@ -942,12 +949,11 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard2({
         /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           (Array.isArray(local.configJson?.validation) ? local.configJson.validation : []).map((rule, index) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-12 gap-2 items-center", children: [
             /* @__PURE__ */ jsx("div", { className: "md:col-span-3", children: /* @__PURE__ */ jsxs(
-              "select",
+              Select,
               {
-                className: "border rounded w-full px-2 py-1 text-sm",
                 value: rule?.rule || "required",
-                onChange: (event) => {
-                  const nextRule = event.target.value;
+                onValueChange: (value) => {
+                  const nextRule = value;
                   apply((current) => {
                     const list = Array.isArray(current.configJson?.validation) ? [...current.configJson.validation] : [];
                     const existing = list[index] || {};
@@ -956,17 +962,20 @@ const FieldDefinitionCard = React.memo(function FieldDefinitionCard2({
                   }, true);
                 },
                 children: [
-                  /* @__PURE__ */ jsx("option", { value: "required", children: "required" }),
-                  /* @__PURE__ */ jsx("option", { value: "date", children: "date" }),
-                  /* @__PURE__ */ jsx("option", { value: "integer", children: "integer" }),
-                  /* @__PURE__ */ jsx("option", { value: "float", children: "float" }),
-                  /* @__PURE__ */ jsx("option", { value: "lt", children: "lt" }),
-                  /* @__PURE__ */ jsx("option", { value: "lte", children: "lte" }),
-                  /* @__PURE__ */ jsx("option", { value: "gt", children: "gt" }),
-                  /* @__PURE__ */ jsx("option", { value: "gte", children: "gte" }),
-                  /* @__PURE__ */ jsx("option", { value: "eq", children: "eq" }),
-                  /* @__PURE__ */ jsx("option", { value: "ne", children: "ne" }),
-                  /* @__PURE__ */ jsx("option", { value: "regex", children: "regex" })
+                  /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                  /* @__PURE__ */ jsxs(SelectContent, { children: [
+                    /* @__PURE__ */ jsx(SelectItem, { value: "required", children: "required" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "date", children: "date" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "integer", children: "integer" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "float", children: "float" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "lt", children: "lt" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "lte", children: "lte" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "gt", children: "gt" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "gte", children: "gte" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "eq", children: "eq" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "ne", children: "ne" }),
+                    /* @__PURE__ */ jsx(SelectItem, { value: "regex", children: "regex" })
+                  ] })
                 ]
               }
             ) }),