@nestledjs/data-browser 0.1.11 → 0.1.13

package/lib/components/filters/RelationComponents.js

@@ -1,107 +1,53 @@
-import { jsxDEV } from "react/jsx-dev-runtime";
 import { getItemDisplayName } from "../../utils/string-utils.js";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/filters/RelationComponents.tsx";
 function RelationDropdownButton({
   currentItem,
   relatedModelName,
   isOpen,
   onClick
 }) {
-  return /* @__PURE__ */ jsxDEV(
-    "button",
-    {
-      type: "button",
-      onClick,
-      className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm text-left bg-white flex items-center justify-between",
-      children: [
-        /* @__PURE__ */ jsxDEV("span", { className: currentItem ? "text-gray-900" : "text-gray-500", children: currentItem ? getItemDisplayName(currentItem) : `Select ${relatedModelName.toLowerCase()}...` }, void 0, false, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 21,
-          columnNumber: 11
-        }, this),
-        /* @__PURE__ */ jsxDEV(
-          "svg",
-          {
-            className: `w-4 h-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`,
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ jsxDEV("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }, void 0, false, {
-              fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-              lineNumber: 30,
-              columnNumber: 13
-            }, this)
-          },
-          void 0,
-          false,
-          {
-            fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-            lineNumber: 24,
-            columnNumber: 7
-          },
-          this
-        )
-      ]
-    },
-    void 0,
-    true,
-    {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 16,
-      columnNumber: 9
-    },
-    this
-  );
+  return /* @__PURE__ */ React.createElement("button", { type: "button", onClick, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm text-left bg-white flex items-center justify-between", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 16,
+    columnNumber: 9
+  } }, /* @__PURE__ */ React.createElement("span", { className: currentItem ? "text-gray-900" : "text-gray-500", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 21,
+    columnNumber: 11
+  } }, currentItem ? getItemDisplayName(currentItem) : `Select ${relatedModelName.toLowerCase()}...`), /* @__PURE__ */ React.createElement("svg", { className: `w-4 h-4 text-gray-400 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 24,
+    columnNumber: 7
+  } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 30,
+    columnNumber: 13
+  } })));
 }
 function RelationSearchInput({
   searchTerm,
   onSearchChange,
   relatedModelName
 }) {
-  return /* @__PURE__ */ jsxDEV("div", { className: "p-2", children: /* @__PURE__ */ jsxDEV(
-    "input",
-    {
-      type: "text",
-      placeholder: `Search ${relatedModelName.toLowerCase()}...`,
-      value: searchTerm,
-      onChange: (e) => onSearchChange(e.target.value),
-      className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-green-web",
-      autoFocus: true
-    },
-    void 0,
-    false,
-    {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 48,
-      columnNumber: 15
-    },
-    this
-  ) }, void 0, false, {
-    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
+  return /* @__PURE__ */ React.createElement("div", { className: "p-2", __self: this, __source: {
+    fileName: _jsxFileName,
     lineNumber: 47,
     columnNumber: 13
-  }, this);
+  } }, /* @__PURE__ */ React.createElement("input", { type: "text", placeholder: `Search ${relatedModelName.toLowerCase()}...`, value: searchTerm, onChange: (e) => onSearchChange(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-green-web", autoFocus: true, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 48,
+    columnNumber: 15
+  } }));
 }
 function RelationItem({
   item,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxDEV(
-    "button",
-    {
-      type: "button",
-      onClick: () => onSelect(item),
-      className: "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:bg-gray-100 transition-colors",
-      children: getItemDisplayName(item)
-    },
-    void 0,
-    false,
-    {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 69,
-      columnNumber: 5
-    },
-    this
-  );
+  return /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => onSelect(item), className: "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:bg-gray-100 transition-colors", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 69,
+    columnNumber: 5
+  } }, getItemDisplayName(item));
 }
 function RelationItemList({
   items,
@@ -110,100 +56,63 @@ function RelationItemList({
   onSelect,
   onClear
 }) {
-  return /* @__PURE__ */ jsxDEV("div", { className: "max-h-48 overflow-y-auto", children: [
-    /* @__PURE__ */ jsxDEV(
-      "button",
-      {
-        type: "button",
-        onClick: onClear,
-        className: "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 text-gray-500 border-b border-gray-200",
-        children: "Clear selection"
-      },
-      void 0,
-      false,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 95,
-        columnNumber: 15
-      },
-      this
-    ),
-    error ? /* @__PURE__ */ jsxDEV("div", { className: "px-3 py-2 text-sm text-red-600", children: [
-      /* @__PURE__ */ jsxDEV("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsxDEV("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxDEV("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, void 0, false, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 107,
-          columnNumber: 15
-        }, this) }, void 0, false, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 106,
-          columnNumber: 13
-        }, this),
-        "Failed to load options"
-      ] }, void 0, true, {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 105,
-        columnNumber: 11
-      }, this),
-      /* @__PURE__ */ jsxDEV("div", { className: "text-xs text-gray-500 mt-1", children: error.networkError ? "Network error" : "Please try again" }, void 0, false, {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 111,
-        columnNumber: 11
-      }, this)
-    ] }, void 0, true, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 104,
-      columnNumber: 9
-    }, this) : loading ? /* @__PURE__ */ jsxDEV("div", { className: "px-3 py-2 text-sm text-gray-500", children: /* @__PURE__ */ jsxDEV("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ jsxDEV("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-        /* @__PURE__ */ jsxDEV("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }, void 0, false, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 119,
-          columnNumber: 15
-        }, this),
-        /* @__PURE__ */ jsxDEV("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }, void 0, false, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 120,
-          columnNumber: 15
-        }, this)
-      ] }, void 0, true, {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 118,
-        columnNumber: 13
-      }, this),
-      "Loading..."
-    ] }, void 0, true, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 117,
-      columnNumber: 11
-    }, this) }, void 0, false, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 116,
-      columnNumber: 9
-    }, this) : items.length === 0 ? /* @__PURE__ */ jsxDEV("div", { className: "px-3 py-2 text-sm text-gray-500", children: "No items found" }, void 0, false, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 126,
-      columnNumber: 17
-    }, this) : items.map((item) => /* @__PURE__ */ jsxDEV(
-      RelationItem,
-      {
-        item,
-        onSelect
-      },
-      item.id,
-      false,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 129,
-        columnNumber: 11
-      },
-      this
-    ))
-  ] }, void 0, true, {
-    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
+  return /* @__PURE__ */ React.createElement("div", { className: "max-h-48 overflow-y-auto", __self: this, __source: {
+    fileName: _jsxFileName,
     lineNumber: 94,
     columnNumber: 13
-  }, this);
+  } }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: onClear, className: "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 text-gray-500 border-b border-gray-200", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 95,
+    columnNumber: 15
+  } }, "Clear selection"), error && /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 text-sm text-red-600", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 104,
+    columnNumber: 9
+  } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 105,
+    columnNumber: 11
+  } }, /* @__PURE__ */ React.createElement("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 106,
+    columnNumber: 13
+  } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 107,
+    columnNumber: 15
+  } })), "Failed to load options"), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500 mt-1", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 111,
+    columnNumber: 11
+  } }, error.networkError ? "Network error" : "Please try again")), !error && loading && /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 text-sm text-gray-500", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 117,
+    columnNumber: 9
+  } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 118,
+    columnNumber: 11
+  } }, /* @__PURE__ */ React.createElement("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4 text-gray-500", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 119,
+    columnNumber: 13
+  } }, /* @__PURE__ */ React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 120,
+    columnNumber: 15
+  } }), /* @__PURE__ */ React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 121,
+    columnNumber: 15
+  } })), "Loading...")), !error && !loading && items.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 text-sm text-gray-500", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 128,
+    columnNumber: 9
+  } }, "No items found"), !error && !loading && items.length > 0 && items.map((item) => /* @__PURE__ */ React.createElement(RelationItem, { key: item.id, item, onSelect, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 132,
+    columnNumber: 11
+  } })));
 }
 function RelationDropdownContent({
   searchTerm,
@@ -215,46 +124,19 @@ function RelationDropdownContent({
   onSelect,
   onClear
 }) {
-  return /* @__PURE__ */ jsxDEV("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg", children: [
-    /* @__PURE__ */ jsxDEV(
-      RelationSearchInput,
-      {
-        searchTerm,
-        onSearchChange,
-        relatedModelName
-      },
-      void 0,
-      false,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 162,
-        columnNumber: 7
-      },
-      this
-    ),
-    /* @__PURE__ */ jsxDEV(
-      RelationItemList,
-      {
-        items,
-        loading,
-        error,
-        onSelect,
-        onClear
-      },
-      void 0,
-      false,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 167,
-        columnNumber: 7
-      },
-      this
-    )
-  ] }, void 0, true, {
-    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-    lineNumber: 161,
+  return /* @__PURE__ */ React.createElement("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 164,
     columnNumber: 5
-  }, this);
+  } }, /* @__PURE__ */ React.createElement(RelationSearchInput, { searchTerm, onSearchChange, relatedModelName, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 165,
+    columnNumber: 7
+  } }), /* @__PURE__ */ React.createElement(RelationItemList, { items, loading, error, onSelect, onClear, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 170,
+    columnNumber: 7
+  } }));
 }
 export {
   RelationDropdownButton,

package/lib/components/filters/RelationFilterField.js

@@ -1,9 +1,9 @@
-import { jsxDEV } from "react/jsx-dev-runtime";
 import { useState, useRef, useCallback, useMemo } from "react";
 import { useClickOutside } from "../../hooks/useClickOutside.js";
 import { useRelationData } from "../../hooks/useRelationData.js";
 import { formatFieldName } from "../../utils/string-utils.js";
 import { RelationDropdownButton, RelationDropdownContent } from "./RelationComponents.js";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/filters/RelationFilterField.tsx";
 function RelationFilterField({
   fieldName,
   relatedModelName,
@@ -17,13 +17,23 @@ function RelationFilterField({
     setIsOpen(false);
   }, []);
   useClickOutside(dropdownRef, handleCloseDropdown, isOpen);
-  const { relatedItems, loading, error: relationError, hasDocument } = useRelationData(relatedModelName, searchTerm, isOpen);
-  const currentItem = useMemo(
-    () => (currentValue == null ? void 0 : currentValue.id) ? relatedItems.find((item) => item.id === currentValue.id) : null,
-    [currentValue == null ? void 0 : currentValue.id, relatedItems]
+  const {
+    relatedItems,
+    loading,
+    error: relationError,
+    hasDocument
+  } = useRelationData(
+    relatedModelName,
+    searchTerm,
+    isOpen,
+    currentValue == null ? void 0 : currentValue.id
+    // Pass current value ID so it can be loaded even when dropdown is closed
   );
+  const currentItem = useMemo(() => (currentValue == null ? void 0 : currentValue.id) ? relatedItems.find((item) => item.id === currentValue.id) : null, [currentValue == null ? void 0 : currentValue.id, relatedItems]);
   const handleSelect = useCallback((item) => {
-    onChange({ id: item.id });
+    onChange({
+      id: item.id
+    });
     setIsOpen(false);
     setSearchTerm("");
   }, [onChange]);
@@ -39,94 +49,43 @@ function RelationFilterField({
     }
   }, [isOpen]);
   if (!hasDocument) {
-    return /* @__PURE__ */ jsxDEV("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsxDEV("label", { className: "block text-sm font-medium text-gray-700", children: [
-        formatFieldName(fieldName),
-        " ID"
-      ] }, void 0, true, {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-        lineNumber: 64,
-        columnNumber: 9
-      }, this),
-      /* @__PURE__ */ jsxDEV(
-        "input",
-        {
-          type: "text",
-          value: (currentValue == null ? void 0 : currentValue.id) || "",
-          onChange: (e) => onChange(e.target.value ? { id: e.target.value } : void 0),
-          placeholder: "Enter ID...",
-          className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm"
-        },
-        void 0,
-        false,
-        {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-          lineNumber: 67,
-          columnNumber: 9
-        },
-        this
-      )
-    ] }, void 0, true, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-      lineNumber: 63,
+    return /* @__PURE__ */ React.createElement("div", { className: "space-y-1", __self: this, __source: {
+      fileName: _jsxFileName,
+      lineNumber: 68,
       columnNumber: 7
-    }, this);
+    } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
+      fileName: _jsxFileName,
+      lineNumber: 69,
+      columnNumber: 9
+    } }, formatFieldName(fieldName), " ID"), /* @__PURE__ */ React.createElement("input", { type: "text", value: (currentValue == null ? void 0 : currentValue.id) || "", onChange: (e) => onChange(e.target.value ? {
+      id: e.target.value
+    } : void 0), placeholder: "Enter ID...", className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-green-web focus:border-green-web text-sm", __self: this, __source: {
+      fileName: _jsxFileName,
+      lineNumber: 72,
+      columnNumber: 9
+    } }));
   }
-  return /* @__PURE__ */ jsxDEV("div", { className: "space-y-1", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxDEV("label", { className: "block text-sm font-medium text-gray-700", children: formatFieldName(fieldName) }, void 0, false, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-      lineNumber: 80,
-      columnNumber: 7
-    }, this),
-    /* @__PURE__ */ jsxDEV("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxDEV(
-        RelationDropdownButton,
-        {
-          currentItem,
-          relatedModelName,
-          isOpen,
-          onClick: handleToggleOpen
-        },
-        void 0,
-        false,
-        {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-          lineNumber: 84,
-          columnNumber: 9
-        },
-        this
-      ),
-      isOpen && /* @__PURE__ */ jsxDEV(
-        RelationDropdownContent,
-        {
-          searchTerm,
-          onSearchChange: setSearchTerm,
-          relatedModelName,
-          items: relatedItems,
-          loading,
-          error: relationError,
-          onSelect: handleSelect,
-          onClear: handleClear
-        },
-        void 0,
-        false,
-        {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-          lineNumber: 92,
-          columnNumber: 11
-        },
-        this
-      )
-    ] }, void 0, true, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-      lineNumber: 83,
-      columnNumber: 7
-    }, this)
-  ] }, void 0, true, {
-    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-    lineNumber: 79,
+  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1", ref: dropdownRef, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 84,
     columnNumber: 5
-  }, this);
+  } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 85,
+    columnNumber: 7
+  } }, formatFieldName(fieldName)), /* @__PURE__ */ React.createElement("div", { className: "relative", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 88,
+    columnNumber: 7
+  } }, /* @__PURE__ */ React.createElement(RelationDropdownButton, { currentItem, relatedModelName, isOpen, onClick: handleToggleOpen, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 89,
+    columnNumber: 9
+  } }), isOpen && /* @__PURE__ */ React.createElement(RelationDropdownContent, { searchTerm, onSearchChange: setSearchTerm, relatedModelName, items: relatedItems, loading, error: relationError, onSelect: handleSelect, onClear: handleClear, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 97,
+    columnNumber: 11
+  } })));
 }
 export {
   RelationFilterField

package/lib/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './filters';
 export * from './shared';
+export * from './RelationFieldWrapper';