@dragonmastery/zinia-forms-core 0.3.11 → 0.3.13

package/dist/index.js

@@ -58,14 +58,16 @@ function createBaseComponents(schema, styleName) {
   };
 }
 
-// src/components/createTypedSelectField.ts
-function createTypedSelectField(baseSelectField, fieldPath) {
-  return (props, context) => {
-    const fullProps = {
-      ...props,
-      name: fieldPath
-    };
-    return baseSelectField(fullProps, context || { attrs: {} });
+// src/components/createBaseDisplayComponents.ts
+function createBaseDisplayComponents(schema, styleName) {
+  const styleToUse = styleName || getDefaultStyle();
+  const styleCreators = getRegisteredStyle(styleToUse);
+  if (!styleCreators) {
+    throw new Error(`Render style "${styleToUse}" is not registered. Make sure to register it with the ZiniaPlugin.`);
+  }
+  const ZiniaDisplay = styleCreators.createDisplay();
+  return {
+    ZiniaDisplay
   };
 }
 
@@ -124,6 +126,28 @@ function createTypedArrayField(baseArrayField, fieldPath, metadata) {
   return TypedArrayField;
 }
 
+// src/components/createTypedComboboxField.ts
+function createTypedComboboxField(baseComboboxField, fieldPath) {
+  return (props, context) => {
+    const fullProps = {
+      ...props,
+      name: fieldPath
+    };
+    return baseComboboxField(fullProps, context || { attrs: {} });
+  };
+}
+
+// src/components/createTypedSelectField.ts
+function createTypedSelectField(baseSelectField, fieldPath) {
+  return (props, context) => {
+    const fullProps = {
+      ...props,
+      name: fieldPath
+    };
+    return baseSelectField(fullProps, context || { attrs: {} });
+  };
+}
+
 // src/metadata/createMetadataProps.ts
 function createMetadataProps(metadata) {
   return {
@@ -160,6 +184,79 @@ function pathToPascalCase(path) {
   return convertToPascalCase(path);
 }
 
+// src/components/generateDisplayComponents.ts
+function generateDisplayComponents(schema, fieldsMetadata, styleName) {
+  const styleToUse = styleName || getDefaultStyle();
+  const styleCreators = getRegisteredStyle(styleToUse);
+  if (!styleCreators) {
+    throw new Error(
+      `Render style "${styleToUse}" is not registered. Make sure to register it with the ZiniaPlugin.`
+    );
+  }
+  const DisplayField = styleCreators.createDisplayField();
+  const fields = {};
+  const components = {};
+  const typedComponents = components;
+  Object.entries(fieldsMetadata).forEach(([path, metadata]) => {
+    const fieldMeta = metadata;
+    const typedPath = path;
+    const componentName = pathToPascalCase(typedPath).replace("Field", "Display");
+    const displayFieldComponent = (props, context) => {
+      const metadataProps = createMetadataProps(fieldMeta);
+      let defaultFormat = props.format || "default";
+      if (!props.format) {
+        if (fieldMeta.inputType === "email") defaultFormat = "email";
+        else if (fieldMeta.inputType === "url") defaultFormat = "url";
+        else if (fieldMeta.inputType === "tel") defaultFormat = "phone";
+        else if (fieldMeta.inputType === "date") defaultFormat = "date";
+        else if (fieldMeta.inputType === "currency") defaultFormat = "currency";
+        else if (fieldMeta.inputType === "number") defaultFormat = "number";
+        else if (fieldMeta.type === "boolean") defaultFormat = "boolean";
+        else if (fieldMeta.type === "date") defaultFormat = "date";
+        else if (fieldMeta.type === "number") defaultFormat = "number";
+      }
+      let valueToLabel = props.valueToLabel;
+      if (fieldMeta.type === "enum" && fieldMeta.options && !valueToLabel) {
+        valueToLabel = {};
+        fieldMeta.options.forEach((option) => {
+          if (typeof option === "object" && option.value && option.label) {
+            valueToLabel[option.value] = option.label;
+          } else if (typeof option === "string") {
+            valueToLabel[option] = option;
+          }
+        });
+      }
+      return DisplayField(
+        {
+          ...metadataProps,
+          ...props,
+          name: props.name || typedPath,
+          format: defaultFormat,
+          valueToLabel
+        },
+        context || { attrs: {} }
+      );
+    };
+    fields[typedPath] = displayFieldComponent;
+    components[componentName] = displayFieldComponent;
+  });
+  const field = (path) => {
+    return fields[path];
+  };
+  const returnObj = {
+    // Original display field component
+    DisplayField,
+    // Dictionary of pre-generated display field components
+    fields,
+    // Helper function for cleaner syntax
+    field
+  };
+  return {
+    generic: returnObj,
+    typed: typedComponents
+  };
+}
+
 // src/components/generateFieldComponents.ts
 function generateFieldComponents(schema, fieldsMetadata, styleName) {
   const styleToUse = styleName || getDefaultStyle();
@@ -196,6 +293,9 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
   const typedSelectFieldFactory = (fieldPath) => {
     return createTypedSelectField(baseSelectField, fieldPath);
   };
+  const typedComboboxFieldFactory = (fieldPath) => {
+    return createTypedComboboxField(ComboboxField, fieldPath);
+  };
   const typedArrayFieldFactory = (fieldPath, metadata) => {
     return createTypedArrayField(ArrayField, fieldPath, metadata);
   };
@@ -277,10 +377,7 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
           return;
         // Skip the type-based switch below
         case "combobox":
-          const comboboxFieldComponent = (props, context) => {
-            const metadataProps = createMetadataProps(fieldMeta);
-            return ComboboxField({ ...metadataProps, ...props, name: typedPath }, context || { attrs: {} });
-          };
+          const comboboxFieldComponent = typedComboboxFieldFactory(typedPath);
           fields[typedPath] = comboboxFieldComponent;
           components[componentName] = comboboxFieldComponent;
           return;
@@ -406,92 +503,6 @@ function generateFieldComponents(schema, fieldsMetadata, styleName) {
   };
 }
 
-// src/components/createBaseDisplayComponents.ts
-function createBaseDisplayComponents(schema, styleName) {
-  const styleToUse = styleName || getDefaultStyle();
-  const styleCreators = getRegisteredStyle(styleToUse);
-  if (!styleCreators) {
-    throw new Error(`Render style "${styleToUse}" is not registered. Make sure to register it with the ZiniaPlugin.`);
-  }
-  const ZiniaDisplay = styleCreators.createDisplay();
-  return {
-    ZiniaDisplay
-  };
-}
-
-// src/components/generateDisplayComponents.ts
-function generateDisplayComponents(schema, fieldsMetadata, styleName) {
-  const styleToUse = styleName || getDefaultStyle();
-  const styleCreators = getRegisteredStyle(styleToUse);
-  if (!styleCreators) {
-    throw new Error(
-      `Render style "${styleToUse}" is not registered. Make sure to register it with the ZiniaPlugin.`
-    );
-  }
-  const DisplayField = styleCreators.createDisplayField();
-  const fields = {};
-  const components = {};
-  const typedComponents = components;
-  Object.entries(fieldsMetadata).forEach(([path, metadata]) => {
-    const fieldMeta = metadata;
-    const typedPath = path;
-    const componentName = pathToPascalCase(typedPath).replace("Field", "Display");
-    const displayFieldComponent = (props, context) => {
-      const metadataProps = createMetadataProps(fieldMeta);
-      let defaultFormat = props.format || "default";
-      if (!props.format) {
-        if (fieldMeta.inputType === "email") defaultFormat = "email";
-        else if (fieldMeta.inputType === "url") defaultFormat = "url";
-        else if (fieldMeta.inputType === "tel") defaultFormat = "phone";
-        else if (fieldMeta.inputType === "date") defaultFormat = "date";
-        else if (fieldMeta.inputType === "currency") defaultFormat = "currency";
-        else if (fieldMeta.inputType === "number") defaultFormat = "number";
-        else if (fieldMeta.type === "boolean") defaultFormat = "boolean";
-        else if (fieldMeta.type === "date") defaultFormat = "date";
-        else if (fieldMeta.type === "number") defaultFormat = "number";
-      }
-      let valueToLabel = props.valueToLabel;
-      if (fieldMeta.type === "enum" && fieldMeta.options && !valueToLabel) {
-        valueToLabel = {};
-        fieldMeta.options.forEach((option) => {
-          if (typeof option === "object" && option.value && option.label) {
-            valueToLabel[option.value] = option.label;
-          } else if (typeof option === "string") {
-            valueToLabel[option] = option;
-          }
-        });
-      }
-      return DisplayField(
-        {
-          ...metadataProps,
-          ...props,
-          name: props.name || typedPath,
-          format: defaultFormat,
-          valueToLabel
-        },
-        context || { attrs: {} }
-      );
-    };
-    fields[typedPath] = displayFieldComponent;
-    components[componentName] = displayFieldComponent;
-  });
-  const field = (path) => {
-    return fields[path];
-  };
-  const returnObj = {
-    // Original display field component
-    DisplayField,
-    // Dictionary of pre-generated display field components
-    fields,
-    // Helper function for cleaner syntax
-    field
-  };
-  return {
-    generic: returnObj,
-    typed: typedComponents
-  };
-}
-
 // src/utils/objectPath.ts
 function getValueByPath(obj, path) {
   const segments = path.split(".");
@@ -4661,24 +4672,6 @@ function createDaisyUICheckboxField() {
   return DaisyUICheckboxField;
 }
 
-// src/fields/types/ComboboxFieldProps.ts
-var COMBOBOX_FIELD_PROP_NAMES = [
-  "name",
-  "options",
-  "placeholder",
-  "disabled",
-  "readonly",
-  "class",
-  "label",
-  "hideLabel",
-  "description",
-  "required",
-  "size",
-  "variant",
-  "allowCreate",
-  "filterFn"
-];
-
 // src/utils/propNormalization.ts
 function camelToKebab(str) {
   return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
@@ -4721,6 +4714,29 @@ function normalizePropsFromAttrs(props, propsDefinition, attrs) {
   }
   return normalized;
 }
+
+// src/fields/types/ComboboxFieldProps.ts
+var COMBOBOX_FIELD_PROP_NAMES = [
+  "name",
+  "selectOptions",
+  "placeholder",
+  "disabled",
+  "readonly",
+  "class",
+  "label",
+  "hideLabel",
+  "description",
+  "required",
+  "size",
+  "variant",
+  "valueToLabel",
+  "useSchemaOptions",
+  "dependsOn",
+  "optionFilterFn",
+  "autoReset",
+  "allowCreate",
+  "filterFn"
+];
 function createDaisyUIComboboxField() {
   const propsDefinition = [...COMBOBOX_FIELD_PROP_NAMES];
   const DaisyUIComboboxField = (props, { attrs }) => {
@@ -4731,15 +4747,13 @@ function createDaisyUIComboboxField() {
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const normalizedProps = normalizePropsFromAttrs(props, propsDefinition, attrs);
-    const normalizeOption = (option) => {
-      if (typeof option === "string") {
-        return { label: option, value: option };
-      }
-      return option;
-    };
+    const allowCreate = computed(() => normalizedProps.allowCreate === true);
     const getOptions = computed(() => {
-      if (normalizedProps.options) {
-        return normalizedProps.options.map(normalizeOption);
+      if (normalizedProps.selectOptions) {
+        return normalizedProps.selectOptions;
+      }
+      if (normalizedProps.useSchemaOptions === false) {
+        return [];
       }
       const schemaOptions = fieldMetadata?.options || [];
       return schemaOptions.map((opt) => ({
@@ -4753,16 +4767,12 @@ function createDaisyUIComboboxField() {
         return getOptions.value;
       }
       const filterFn = normalizedProps.filterFn || ((q, opt) => {
-        const normalized = normalizeOption(opt);
-        return normalized.label.toLowerCase().includes(q.toLowerCase()) || normalized.value.toLowerCase().includes(q.toLowerCase());
-      });
-      return getOptions.value.filter((opt) => {
-        const originalOpt = opt.label === opt.value ? opt.label : opt;
-        return filterFn(query, originalOpt);
+        return opt.label.toLowerCase().includes(q.toLowerCase()) || opt.value.toLowerCase().includes(q.toLowerCase());
       });
+      return getOptions.value.filter((opt) => filterFn(query, opt));
     });
     const isNewValue = computed(() => {
-      if (!normalizedProps.allowCreate) return false;
+      if (!allowCreate.value) return false;
       const currentText = String(displayText.value || "").trim().toLowerCase();
       if (!currentText) return false;
       return !getOptions.value.some(
@@ -4797,7 +4807,7 @@ function createDaisyUIComboboxField() {
     const showDropdown = computed(() => {
       if (!isFocused.value) return false;
       if (getOptions.value.length > 0) return true;
-      if (normalizedProps.allowCreate) {
+      if (allowCreate.value) {
         return String(formState.getValue(props.name) || "").trim().length > 0;
       }
       return false;
@@ -4838,7 +4848,7 @@ function createDaisyUIComboboxField() {
         if (matchingOption) {
           formState.setValue(props.name, matchingOption.value);
           displayText.value = matchingOption.label;
-        } else if (normalizedProps.allowCreate && displayValue) {
+        } else if (allowCreate.value && displayValue) {
           formState.setValue(props.name, displayValue);
           displayText.value = displayValue;
         } else if (!displayValue) {
@@ -4849,6 +4859,23 @@ function createDaisyUIComboboxField() {
         }
         formState.touchField(props.name);
         formState.validateField(props.name);
+        if (!allowCreate.value && displayValue) {
+          const currentValue = formState.getValue(props.name);
+          const isValidOption = getOptions.value.some(
+            (opt) => opt.value === currentValue || opt.label === currentValue || opt.value.toLowerCase() === String(currentValue).toLowerCase() || opt.label.toLowerCase() === String(currentValue).toLowerCase()
+          );
+          if (!isValidOption) {
+            formState.errors[props.name] = `"${displayValue}" is not a valid option. Please select from the list.`;
+          } else {
+            if (formState.errors[props.name]?.includes("is not a valid option")) {
+              delete formState.errors[props.name];
+            }
+          }
+        } else if (allowCreate.value || !displayValue) {
+          if (formState.errors[props.name]?.includes("is not a valid option")) {
+            delete formState.errors[props.name];
+          }
+        }
         formState.setFocus(props.name, false);
       },
       onFocus: () => {
@@ -4981,6 +5008,9 @@ function createDaisyUIComboboxField() {
               displayText.value = option.label;
               formState.touchField(props.name);
               formState.validateField(props.name);
+              if (formState.errors[props.name]?.includes("is not a valid option")) {
+                delete formState.errors[props.name];
+              }
               formState.setSelectedIndex(props.name, -1);
               formState.setFocus(props.name, false);
             } else if (selectedIndex.value === filteredOptions.value.length && isNewValue.value) {
@@ -4988,6 +5018,18 @@ function createDaisyUIComboboxField() {
               formState.setValue(props.name, displayValue);
               formState.touchField(props.name);
               formState.validateField(props.name);
+              if (!allowCreate.value) {
+                const isValidOption = getOptions.value.some(
+                  (opt) => opt.value === displayValue || opt.label === displayValue || opt.value.toLowerCase() === displayValue.toLowerCase() || opt.label.toLowerCase() === displayValue.toLowerCase()
+                );
+                if (!isValidOption) {
+                  formState.errors[props.name] = `"${displayValue}" is not a valid option. Please select from the list.`;
+                }
+              } else {
+                if (formState.errors[props.name]?.includes("is not a valid option")) {
+                  delete formState.errors[props.name];
+                }
+              }
               formState.setSelectedIndex(props.name, -1);
               formState.setFocus(props.name, false);
             } else if (isNewValue.value && selectedIndex.value < 0) {
@@ -4995,6 +5037,18 @@ function createDaisyUIComboboxField() {
               formState.setValue(props.name, displayValue);
               formState.touchField(props.name);
               formState.validateField(props.name);
+              if (!allowCreate.value) {
+                const isValidOption = getOptions.value.some(
+                  (opt) => opt.value === displayValue || opt.label === displayValue || opt.value.toLowerCase() === displayValue.toLowerCase() || opt.label.toLowerCase() === displayValue.toLowerCase()
+                );
+                if (!isValidOption) {
+                  formState.errors[props.name] = `"${displayValue}" is not a valid option. Please select from the list.`;
+                }
+              } else {
+                if (formState.errors[props.name]?.includes("is not a valid option")) {
+                  delete formState.errors[props.name];
+                }
+              }
               formState.setSelectedIndex(props.name, -1);
               formState.setFocus(props.name, false);
             }
@@ -5012,108 +5066,132 @@ function createDaisyUIComboboxField() {
         props.label || fieldMetadata.label,
         fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
       ] }),
-      /* @__PURE__ */ jsxs("div", { class: "relative inline-block max-w-full", style: "min-width: clamp(3rem, 20rem, 100%);", role: "combobox", "aria-expanded": showDropdown.value, "aria-haspopup": "listbox", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputElement,
-            class: inputClass,
-            placeholder: props.placeholder || "Search or type new value",
-            disabled: props.disabled,
-            autocomplete: "off",
-            "data-testid": `${formState.storeName}-combobox-field-${String(props.name)}`,
-            ...inputProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            xmlns: "http://www.w3.org/2000/svg",
-            class: "h-5 w-5 text-base-content/50",
-            fill: "none",
-            viewBox: "0 0 24 24",
-            stroke: "currentColor",
-            "stroke-width": "2",
-            children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
-          }
-        ) }),
-        showDropdown.value && /* @__PURE__ */ jsx("div", { ref: dropdownPanel, class: "absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto", style: "min-width: 100%;", children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
-          filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
-            "li",
-            {
-              id: `option-${index}`,
-              role: "option",
-              "aria-selected": index === selectedIndex.value,
-              children: /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: "#",
-                  class: `w-full ${index === selectedIndex.value ? "menu-focus" : ""}`,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    formState.setValue(props.name, option.value);
-                    displayText.value = option.label;
-                    formState.touchField(props.name);
-                    formState.validateField(props.name);
-                    formState.setSelectedIndex(props.name, -1);
-                    formState.setFocus(props.name, false);
-                  },
-                  children: option.label
-                }
-              )
-            },
-            option.value
-          )),
-          isNewValue.value && /* @__PURE__ */ jsx(
-            "li",
-            {
-              id: `option-new`,
-              role: "option",
-              "aria-selected": selectedIndex.value === filteredOptions.value.length,
-              children: /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: "#",
-                  class: `w-full ${selectedIndex.value === filteredOptions.value.length ? "menu-focus" : ""}`,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    const displayValue = String(displayText.value || "").trim();
-                    formState.setValue(props.name, displayValue);
-                    formState.touchField(props.name);
-                    formState.validateField(props.name);
-                    formState.setSelectedIndex(props.name, -1);
-                    formState.setFocus(props.name, false);
-                  },
-                  children: /* @__PURE__ */ jsxs("div", { class: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        class: "h-5 w-5 text-success mt-0.5 flex-shrink-0",
-                        fill: "none",
-                        viewBox: "0 0 24 24",
-                        stroke: "currentColor",
-                        "stroke-width": "2",
-                        children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 4v16m8-8H4" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxs("div", { class: "text-sm", children: [
-                      /* @__PURE__ */ jsx("p", { class: "font-medium text-success", children: "New value" }),
-                      /* @__PURE__ */ jsxs("p", { class: "text-base-content/70", children: [
-                        '"',
-                        displayText.value,
-                        '" will be saved.'
-                      ] })
-                    ] })
-                  ] })
-                }
-              )
-            }
-          )
-        ] }) : null })
-      ] }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          class: "relative inline-block max-w-full",
+          style: "min-width: clamp(3rem, 20rem, 100%);",
+          role: "combobox",
+          "aria-expanded": showDropdown.value,
+          "aria-haspopup": "listbox",
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputElement,
+                class: inputClass,
+                placeholder: props.placeholder || "Search or type new value",
+                disabled: props.disabled,
+                autocomplete: "off",
+                "data-testid": `${formState.storeName}-combobox-field-${String(props.name)}`,
+                ...inputProps
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { class: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                class: "h-5 w-5 text-base-content/50",
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
+              }
+            ) }),
+            showDropdown.value && /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: dropdownPanel,
+                class: "absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto",
+                style: "min-width: 100%;",
+                children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
+                  filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      id: `option-${index}`,
+                      role: "option",
+                      "aria-selected": index === selectedIndex.value,
+                      children: /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: "#",
+                          class: `w-full ${index === selectedIndex.value ? "menu-focus" : ""}`,
+                          onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            formState.setValue(props.name, option.value);
+                            displayText.value = option.label;
+                            if (formState.errors[props.name]) {
+                              delete formState.errors[props.name];
+                            }
+                            formState.touchField(props.name);
+                            formState.validateField(props.name);
+                            formState.setSelectedIndex(props.name, -1);
+                            formState.setFocus(props.name, false);
+                          },
+                          children: option.label
+                        }
+                      )
+                    },
+                    option.value
+                  )),
+                  isNewValue.value && allowCreate.value && /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      id: `option-new`,
+                      role: "option",
+                      "aria-selected": selectedIndex.value === filteredOptions.value.length,
+                      children: /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: "#",
+                          class: `w-full ${selectedIndex.value === filteredOptions.value.length ? "menu-focus" : ""}`,
+                          onClick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            const displayValue = String(displayText.value || "").trim();
+                            formState.setValue(props.name, displayValue);
+                            if (formState.errors[props.name]) {
+                              delete formState.errors[props.name];
+                            }
+                            formState.touchField(props.name);
+                            formState.validateField(props.name);
+                            formState.setSelectedIndex(props.name, -1);
+                            formState.setFocus(props.name, false);
+                          },
+                          children: /* @__PURE__ */ jsxs("div", { class: "flex items-start gap-2", children: [
+                            /* @__PURE__ */ jsx(
+                              "svg",
+                              {
+                                xmlns: "http://www.w3.org/2000/svg",
+                                class: "h-5 w-5 text-success mt-0.5 flex-shrink-0",
+                                fill: "none",
+                                viewBox: "0 0 24 24",
+                                stroke: "currentColor",
+                                "stroke-width": "2",
+                                children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 4v16m8-8H4" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxs("div", { class: "text-sm", children: [
+                              /* @__PURE__ */ jsx("p", { class: "font-medium text-success", children: "New value" }),
+                              /* @__PURE__ */ jsxs("p", { class: "text-base-content/70", children: [
+                                '"',
+                                displayText.value,
+                                '" will be saved.'
+                              ] })
+                            ] })
+                          ] })
+                        }
+                      )
+                    }
+                  )
+                ] }) : null
+              }
+            )
+          ]
+        }
+      ),
       props.description && /* @__PURE__ */ jsx("p", { class: "text-sm mt-1", children: props.description }),
       isTouched2 && hasErrors && /* @__PURE__ */ jsx("p", { class: "text-error text-xs", children: formState.getError(props.name) }),
       isNewValue.value && displayText.value && !hasErrors && /* @__PURE__ */ jsxs("p", { class: "text-success text-xs", children: [
@@ -9964,6 +10042,6 @@ var ActionIcons = {
   dotsHorizontal: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>`
 };
 
-export { ActionIcons, COMBOBOX_FIELD_PROP_NAMES, DEBUG_CONFIG, ErrorDisplay, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, SELECT_FIELD_PROP_NAMES, ZINIA_DATA_TABLE_ACTIONS_KEY, ZINIA_DATA_TABLE_COLUMNS_KEY, ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, ZINIA_DATA_TABLE_KEY, ZINIA_DATA_TABLE_NAME_KEY, ZINIA_DATA_TABLE_OPTIONS_KEY, ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY, ZINIA_DELETE_MODAL_FIELDS_KEY, ZINIA_DELETE_MODAL_KEY, ZINIA_DELETE_MODAL_SCHEMA_KEY, ZINIA_DISPLAY_FIELDS_GENERIC_KEY, ZINIA_DISPLAY_FIELDS_KEY, ZINIA_DISPLAY_KEY, ZINIA_DISPLAY_SCHEMA_KEY, ZINIA_FIELDS_GENERIC_KEY, ZINIA_FIELDS_KEY, ZINIA_FORM_KEY, ZINIA_FORM_SCHEMA_KEY, ZiniaPlugin, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, isDebugEnabled, mergeStyles, plainStyle, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };
+export { ActionIcons, COMBOBOX_FIELD_PROP_NAMES, DEBUG_CONFIG, ErrorDisplay, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, SELECT_FIELD_PROP_NAMES, ZINIA_DATA_TABLE_ACTIONS_KEY, ZINIA_DATA_TABLE_COLUMNS_KEY, ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, ZINIA_DATA_TABLE_KEY, ZINIA_DATA_TABLE_NAME_KEY, ZINIA_DATA_TABLE_OPTIONS_KEY, ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY, ZINIA_DELETE_MODAL_FIELDS_KEY, ZINIA_DELETE_MODAL_KEY, ZINIA_DELETE_MODAL_SCHEMA_KEY, ZINIA_DISPLAY_FIELDS_GENERIC_KEY, ZINIA_DISPLAY_FIELDS_KEY, ZINIA_DISPLAY_KEY, ZINIA_DISPLAY_SCHEMA_KEY, ZINIA_FIELDS_GENERIC_KEY, ZINIA_FIELDS_KEY, ZINIA_FORM_KEY, ZINIA_FORM_SCHEMA_KEY, ZiniaPlugin, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedComboboxField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, isDebugEnabled, mergeStyles, plainStyle, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map