@dragonmastery/zinia-forms-core 0.5.5 → 0.5.7

package/dist/index.js

@@ -1252,18 +1252,24 @@ function extractFieldMetadata(schema, path = "", parentSchema, schemaId) {
         metadata.inputType = "textarea";
       }
       if (customMetadata.valueToLabel && metadata.type === "enum" && metadata.options) {
-        metadata.options = metadata.options.map((option) => ({
-          value: option.value,
-          label: customMetadata.valueToLabel?.[option.value] || option.label
-        }));
+        const valueType = customMetadata.valueType;
+        metadata.options = metadata.options.map((option) => {
+          const rawValue = option.value;
+          const value = valueType === "number" ? Number(rawValue) : rawValue;
+          return {
+            value,
+            label: String(customMetadata.valueToLabel?.[rawValue] ?? option.label)
+          };
+        });
       }
       if (customMetadata.inputType === "select") {
         metadata.type = "enum";
         if (!metadata.options || metadata.options.length === 0) {
           if (customMetadata.valueToLabel) {
+            const valueType = customMetadata.valueType;
             metadata.options = Object.entries(customMetadata.valueToLabel).map(([value, label]) => ({
-              value,
-              label
+              value: valueType === "number" ? Number(value) : value,
+              label: String(label)
             }));
           } else if (customMetadata.options) {
             metadata.options = customMetadata.options;
@@ -5053,7 +5059,7 @@ function createDaisyUISelectField() {
         const valueToLabel = normalizedProps.valueToLabel;
         return schemaOptions.map((option) => ({
           value: option.value,
-          label: typeof valueToLabel === "function" ? valueToLabel(option.value) : valueToLabel[option.value] || option.value
+          label: typeof valueToLabel === "function" ? valueToLabel(option.value) : valueToLabel[option.value] ?? option.value
         }));
       }
       return schemaOptions;
@@ -5112,7 +5118,9 @@ function createDaisyUISelectField() {
       value: formState.getValue(props.name),
       onChange: (event) => {
         const target = event.target;
-        formState.setValue(props.name, target.value);
+        const rawValue = target.value;
+        const value = fieldMetadata?.valueType === "number" && rawValue !== "" ? Number(rawValue) : rawValue;
+        formState.setValue(props.name, value);
         formState.touchField(props.name);
         formState.validateField(props.name);
       },
@@ -8555,6 +8563,9 @@ var EnumMultiSelectFilter = (props) => {
     }
     return String(a) === String(b);
   };
+  const sanitizeTestId = (value) => {
+    return String(value).replace(/\s+/g, "-").replace(/[^a-zA-Z0-9-]/g, "").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  };
   const selectedOptions = computed(() => {
     return selectedValues.map((val) => {
       const option = props.options.find((opt) => valuesEqual(opt.value, val));
@@ -8562,11 +8573,17 @@ var EnumMultiSelectFilter = (props) => {
     }).filter((opt) => Boolean(opt));
   });
   const filteredOptions = computed(() => {
+    const uniqueOptions = props.options.filter((opt, index, self) => {
+      return index === self.findIndex((o) => valuesEqual(o.value, opt.value));
+    });
+    if (props.searchable === false) {
+      return uniqueOptions;
+    }
     const query = state.searchQuery.trim().toLowerCase();
     if (!query) {
-      return props.options;
+      return uniqueOptions;
     }
-    return props.options.filter((opt) => opt.label.toLowerCase().includes(query));
+    return uniqueOptions.filter((opt) => opt.label.toLowerCase().includes(query));
   });
   const updateDropdownPosition = () => {
     const container = document.querySelector(`[data-enum-multiselect-container="${props.field}"]`);
@@ -8674,8 +8691,11 @@ var EnumMultiSelectFilter = (props) => {
     if (state.cleanupFns.length > 0) return;
     window.addEventListener("scroll", handleScrollOrResize, true);
     window.addEventListener("resize", handleScrollOrResize);
-    document.addEventListener("click", handleClickOutside, true);
+    const clickTimeout = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside, true);
+    }, 0);
     state.cleanupFns.push(() => {
+      clearTimeout(clickTimeout);
       window.removeEventListener("scroll", handleScrollOrResize, true);
       window.removeEventListener("resize", handleScrollOrResize);
       document.removeEventListener("click", handleClickOutside, true);
@@ -8688,6 +8708,10 @@ var EnumMultiSelectFilter = (props) => {
     }
   };
   const handleFocus = () => {
+    if (state.blurTimeoutId) {
+      clearTimeout(state.blurTimeoutId);
+      state.blurTimeoutId = void 0;
+    }
     if (state.pendingValues === void 0) {
       state.pendingValues = Array.isArray(props.value) ? [...props.value] : props.value ? [props.value] : [];
     }
@@ -8696,15 +8720,28 @@ var EnumMultiSelectFilter = (props) => {
     setupEventListeners();
   };
   const handleBlur = (e) => {
-    setTimeout(() => {
-      const relatedTarget = e.relatedTarget || document.activeElement;
+    if (state.blurTimeoutId) {
+      clearTimeout(state.blurTimeoutId);
+    }
+    state.blurTimeoutId = setTimeout(() => {
+      state.blurTimeoutId = void 0;
+      const activeElement = document.activeElement;
       const container = document.querySelector(
         `[data-enum-multiselect-container="${props.field}"]`
       );
       const dropdown = document.querySelector(`[data-enum-multiselect-dropdown="${props.field}"]`);
-      if (container && container.contains(relatedTarget) || dropdown && dropdown.contains(relatedTarget)) {
+      if (container && container.contains(activeElement)) {
+        return;
+      }
+      if (dropdown && dropdown.contains(activeElement)) {
         return;
       }
+      const relatedTarget = e.relatedTarget;
+      if (relatedTarget) {
+        if (container && container.contains(relatedTarget) || dropdown && dropdown.contains(relatedTarget)) {
+          return;
+        }
+      }
       if (state.isOpen) {
         applyPendingFilter();
         state.isOpen = false;
@@ -8712,7 +8749,7 @@ var EnumMultiSelectFilter = (props) => {
         state.selectedIndex = -1;
         cleanupEventListeners();
       }
-    }, 100);
+    }, 150);
   };
   const handleKeyDown = (e) => {
     if (e.key === "Escape") {
@@ -8805,7 +8842,7 @@ var EnumMultiSelectFilter = (props) => {
       "div",
       {
         class: "badge badge-primary badge-sm gap-1.5 pr-1 max-w-full",
-        "data-testid": `datatable-filter-${props.field}-chip-${option.value}`,
+        "data-testid": `datatable-filter-${props.field}-chip-${sanitizeTestId(option.value)}`,
         children: [
           /* @__PURE__ */ jsx("span", { class: "truncate max-w-[120px] sm:max-w-[200px]", title: option.label, children: option.label }),
           /* @__PURE__ */ jsx(
@@ -8842,42 +8879,83 @@ var EnumMultiSelectFilter = (props) => {
       String(option.value)
     )) }),
     /* @__PURE__ */ jsxs("div", { class: "relative", "data-enum-multiselect-container": props.field, children: [
-      /* @__PURE__ */ jsx(
-        "input",
+      props.searchable !== false ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: state.searchQuery,
+            onInput: (e) => {
+              const value = e.target.value;
+              state.searchQuery = value;
+              state.isOpen = true;
+              state.selectedIndex = -1;
+              updateDropdownPosition();
+              if (!state.cleanupFns || state.cleanupFns.length === 0) {
+                setupEventListeners();
+              }
+            },
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onKeydown: handleKeyDown,
+            placeholder: props.isOptionsLoading ? "Loading options..." : selectedOptions.value.length > 0 ? `Search ${props.label}...` : `Select ${props.label}...`,
+            class: "input input-bordered input-sm w-full pr-8",
+            disabled: props.isLoading || props.isOptionsLoading,
+            "data-testid": `datatable-filter-${props.field}-input`
+          }
+        ),
+        /* @__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-4 w-4 text-base-content/50 transition-transform ${state.isOpen ? "rotate-180" : ""}`,
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19 9l-7 7-7-7" })
+          }
+        ) })
+      ] }) : /* @__PURE__ */ jsxs(
+        "button",
         {
-          type: "text",
-          value: state.searchQuery,
-          onInput: (e) => {
-            const value = e.target.value;
-            state.searchQuery = value;
-            state.isOpen = true;
-            state.selectedIndex = -1;
-            updateDropdownPosition();
-            if (!state.cleanupFns || state.cleanupFns.length === 0) {
+          type: "button",
+          onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            if (state.isOpen) {
+              closeDropdown();
+            } else {
+              if (state.pendingValues === void 0) {
+                state.pendingValues = Array.isArray(props.value) ? [...props.value] : props.value ? [props.value] : [];
+              }
+              state.isOpen = true;
+              updateDropdownPosition();
               setupEventListeners();
             }
           },
-          onFocus: handleFocus,
           onBlur: handleBlur,
           onKeydown: handleKeyDown,
-          placeholder: props.isOptionsLoading ? "Loading options..." : selectedOptions.value.length > 0 ? `Search ${props.label}...` : `Select ${props.label}...`,
-          class: "input input-bordered input-sm w-full pr-8",
+          class: "select select-bordered select-sm w-full pr-8 text-left cursor-pointer",
           disabled: props.isLoading || props.isOptionsLoading,
-          "data-testid": `datatable-filter-${props.field}-input`
+          "data-testid": `datatable-filter-${props.field}-input`,
+          children: [
+            /* @__PURE__ */ jsx("span", { class: "truncate block", children: props.isOptionsLoading ? "Loading options..." : selectedOptions.value.length > 0 ? `${selectedOptions.value.length} selected` : `Select ${props.label}...` }),
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                class: `absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-base-content/50 transition-transform pointer-events-none ${state.isOpen ? "rotate-180" : ""}`,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "stroke-width": "2",
+                children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19 9l-7 7-7-7" })
+              }
+            )
+          ]
         }
       ),
-      /* @__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-4 w-4 text-base-content/50 transition-transform ${state.isOpen ? "rotate-180" : ""}`,
-          fill: "none",
-          viewBox: "0 0 24 24",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19 9l-7 7-7-7" })
-        }
-      ) }),
       state.isOpen && /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsxs(
         "div",
         {
@@ -8949,7 +9027,7 @@ var EnumMultiSelectFilter = (props) => {
                             checked: isSelected,
                             onChange: () => toggleOption(option),
                             class: "checkbox checkbox-sm checkbox-primary",
-                            "data-testid": `datatable-filter-${props.field}-option-${option.value}`,
+                            "data-testid": `datatable-filter-${props.field}-option-${sanitizeTestId(option.value)}`,
                             tabindex: -1
                           }
                         ),
@@ -8969,9 +9047,10 @@ var EnumMultiSelectFilter = (props) => {
   ] });
 };
 var SelectFilter = (props) => {
-  const currentOperator = props.operator || OPERATORS.IS_ONE_OF;
+  const defaultOp = props.defaultOperator || OPERATORS.IS_ONE_OF;
+  const currentOperator = props.operator || defaultOp;
   const isArrayOperator = currentOperator === OPERATORS.IS_ONE_OF || currentOperator === OPERATORS.IS_NOT_ONE_OF;
-  const isDefaultOperator = currentOperator === OPERATORS.IS_ONE_OF;
+  const isDefaultOperator = currentOperator === defaultOp;
   const showOperatorSelect = !isDefaultOperator;
   const selectedValues = Array.isArray(props.value) ? props.value : props.value ? [props.value] : [];
   const handleValueChange = (value) => {
@@ -9028,6 +9107,7 @@ var SelectFilter = (props) => {
           isLoading: props.isLoading,
           isOptionsLoading: props.isOptionsLoading,
           operator: currentOperator,
+          searchable: props.searchable,
           onFilterChange: props.onFilterChange,
           onClearFilter: props.onClearFilter
         }
@@ -9386,7 +9466,8 @@ var ComboboxFilter = (props) => {
     comboboxState[props.field] = {
       isOpen: false,
       selectedIndex: -1,
-      position: { top: 0, left: 0, width: 0, openUpward: false }
+      position: { top: 0, left: 0, width: 0, openUpward: false },
+      isFocused: false
     };
   }
   const state = comboboxState[props.field];
@@ -9590,6 +9671,7 @@ var ComboboxFilter = (props) => {
     }
   };
   const handleFocus = () => {
+    state.isFocused = true;
     state.isOpen = true;
     updateDropdownPosition();
     setupEventListeners();
@@ -9610,6 +9692,19 @@ var ComboboxFilter = (props) => {
       container.scrollTop = elementTop + elementHeight - containerHeight;
     }
   };
+  const handleClear = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    props.filterInputValues.value[props.field] = "";
+    state.isOpen = true;
+    updateDropdownPosition();
+    nextTick(() => {
+      const input = document.querySelector(`[data-combobox-input="${props.field}"]`);
+      if (input) {
+        input.focus();
+      }
+    });
+  };
   const handleBlur = (e) => {
     const relatedTarget = e.relatedTarget || document.activeElement;
     const container = document.querySelector(`[data-combobox-container="${props.field}"]`);
@@ -9617,6 +9712,7 @@ var ComboboxFilter = (props) => {
     if (container && container.contains(relatedTarget) || dropdown && dropdown.contains(relatedTarget)) {
       return;
     }
+    state.isFocused = false;
     state.isOpen = false;
     cleanupEventListeners();
     const currentQuery = searchQuery.value.trim();
@@ -9693,7 +9789,7 @@ var ComboboxFilter = (props) => {
         onFocus: handleFocus,
         onBlur: handleBlur,
         placeholder: props.isOptionsLoading ? "Loading options..." : `Search ${props.label}`,
-        class: "input input-bordered input-sm w-full",
+        class: "input input-bordered input-sm w-full pr-8",
         disabled: props.isLoading || props.isOptionsLoading,
         "data-testid": `datatable-filter-${props.field}-input`,
         "data-combobox-input": props.field
@@ -9711,117 +9807,152 @@ var ComboboxFilter = (props) => {
         children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
       }
     ) }),
-    state.isOpen && /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsx(
+    state.isOpen && /* @__PURE__ */ jsx(Teleport, { to: "body", children: /* @__PURE__ */ jsxs(
       "div",
       {
         "data-combobox-dropdown": props.field,
-        class: "bg-base-100 border border-base-300 rounded-box shadow-lg overflow-auto",
+        class: "bg-base-100 border border-base-300 rounded-box shadow-lg overflow-auto flex flex-col",
         style: dropdownStyle.value,
         onMousedown: (e) => {
           e.preventDefault();
         },
-        children: /* @__PURE__ */ jsx("ul", { class: "menu w-full", role: "listbox", id: `combobox-listbox-${props.field}`, children: props.isOptionsLoading ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70 p-2", children: "Loading options..." }) }) : filteredOptions.value.length === 0 && !isNewValue.value && !isInvalidValue.value ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70 p-2", children: "No options available" }) }) : isInvalidValue.value ? /* @__PURE__ */ jsx("li", { class: "bg-error/10 border-l-4 border-error", children: /* @__PURE__ */ jsx("div", { class: "p-2", children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              xmlns: "http://www.w3.org/2000/svg",
-              class: "h-4 w-4 text-error 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { class: "text-sm", children: [
-            /* @__PURE__ */ jsx("p", { class: "font-medium text-error", children: "Invalid value" }),
-            /* @__PURE__ */ jsxs("p", { class: "text-error/80", children: [
-              '"',
-              searchQuery.value,
-              '" is not a valid option. Please select from the list.'
+        children: [
+          searchQuery.value && /* @__PURE__ */ jsxs("div", { class: "flex items-center justify-between p-2 border-b border-base-300 flex-shrink-0", children: [
+            /* @__PURE__ */ jsx("span", { class: "text-xs font-semibold text-base-content/70", children: props.label }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleClear(e);
+                },
+                onMousedown: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                class: "btn btn-ghost btn-xs p-0 h-5 w-5 min-h-0 rounded hover:bg-base-300",
+                title: "Clear text",
+                "data-testid": `datatable-filter-${props.field}-clear`,
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    class: "h-4 w-4",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    "stroke-width": "2",
+                    children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M6 18L18 6M6 6l12 12" })
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("ul", { class: "menu w-full flex-1", role: "listbox", id: `combobox-listbox-${props.field}`, children: props.isOptionsLoading ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70 p-2", children: "Loading options..." }) }) : filteredOptions.value.length === 0 && !isNewValue.value && !isInvalidValue.value ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("span", { class: "text-sm text-base-content/70 p-2", children: "No options available" }) }) : isInvalidValue.value ? /* @__PURE__ */ jsx("li", { class: "bg-error/10 border-l-4 border-error", children: /* @__PURE__ */ jsx("div", { class: "p-2", children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                class: "h-4 w-4 text-error 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 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { class: "text-sm", children: [
+              /* @__PURE__ */ jsx("p", { class: "font-medium text-error", children: "Invalid value" }),
+              /* @__PURE__ */ jsxs("p", { class: "text-error/80", children: [
+                '"',
+                searchQuery.value,
+                '" is not a valid option. Please select from the list.'
+              ] })
             ] })
-          ] })
-        ] }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
-            "li",
-            {
-              id: `option-${index}`,
-              role: "option",
-              "aria-selected": index === state.selectedIndex,
-              class: index === state.selectedIndex ? "bg-base-200" : "",
-              children: /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: "#",
-                  tabindex: 0,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleSelectOption(option);
-                  },
-                  onMousedown: (e) => {
-                    e.preventDefault();
-                  },
-                  class: "w-full",
-                  children: option.label
-                }
-              )
-            },
-            option.value
-          )),
-          isNewValue.value && props.allowCreate && /* @__PURE__ */ jsx(
-            "li",
-            {
-              id: "option-new",
-              role: "option",
-              "aria-selected": state.selectedIndex === filteredOptions.value.length,
-              class: state.selectedIndex === filteredOptions.value.length ? "bg-base-200" : "",
-              children: /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: "#",
-                  tabindex: 0,
-                  onClick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    handleSelectNewValue();
-                  },
-                  onMousedown: (e) => {
-                    e.preventDefault();
-                  },
-                  class: "w-full",
-                  children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        class: "h-4 w-4 text-success",
-                        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("span", { class: "text-sm", children: [
-                      /* @__PURE__ */ jsx("span", { class: "font-medium text-success", children: "New value:" }),
-                      ' "',
-                      searchQuery.value,
-                      '"'
+          ] }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
+              "li",
+              {
+                id: `option-${index}`,
+                role: "option",
+                "aria-selected": index === state.selectedIndex,
+                class: index === state.selectedIndex ? "bg-base-200" : "",
+                children: /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "#",
+                    tabindex: 0,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelectOption(option);
+                    },
+                    onMousedown: (e) => {
+                      e.preventDefault();
+                    },
+                    class: "w-full",
+                    children: option.label
+                  }
+                )
+              },
+              option.value
+            )),
+            isNewValue.value && props.allowCreate && /* @__PURE__ */ jsx(
+              "li",
+              {
+                id: "option-new",
+                role: "option",
+                "aria-selected": state.selectedIndex === filteredOptions.value.length,
+                class: state.selectedIndex === filteredOptions.value.length ? "bg-base-200" : "",
+                children: /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "#",
+                    tabindex: 0,
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleSelectNewValue();
+                    },
+                    onMousedown: (e) => {
+                      e.preventDefault();
+                    },
+                    class: "w-full",
+                    children: /* @__PURE__ */ jsxs("div", { class: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          xmlns: "http://www.w3.org/2000/svg",
+                          class: "h-4 w-4 text-success",
+                          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("span", { class: "text-sm", children: [
+                        /* @__PURE__ */ jsx("span", { class: "font-medium text-success", children: "New value:" }),
+                        ' "',
+                        searchQuery.value,
+                        '"'
+                      ] })
                     ] })
-                  ] })
-                }
-              )
-            }
-          )
-        ] }) })
+                  }
+                )
+              }
+            )
+          ] }) })
+        ]
       }
     ) })
   ] });
@@ -10237,6 +10368,8 @@ var FilterDrawer = (props) => {
                           isOptionsLoading: filterOptionsLoading?.value?.[field] ?? false,
                           allOptionText: column.filterAllOptionText,
                           showAllOption: column.filterShowAllOption,
+                          searchable: column.filterSearchable,
+                          defaultOperator: column.filterDefaultOperator,
                           operator: isEnumOperator(currentFilter?.operator) ? currentFilter?.operator : void 0,
                           fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "enum"),
                           onFilterChange: props.onFilterChange,
@@ -10307,7 +10440,8 @@ var FilterDrawer = (props) => {
                           filterOperators: props.filterOperators,
                           caseSensitive: props.caseSensitive || { value: {} },
                           fieldType: convertToDataType(props.fieldsMetadata[field]?.type || "string"),
-                          onFilterChange: props.onFilterChange
+                          onFilterChange: props.onFilterChange,
+                          onClearFilter: props.onClearFilter
                         }
                       ),
                       filterType === "date" && /* @__PURE__ */ jsx(