@nestledjs/data-browser 0.1.7 → 0.1.9

package/lib/components/filters/RelationComponents.js

@@ -1,265 +1,147 @@
-import { jsxDEV as e } from "react/jsx-dev-runtime";
-import { getItemDisplayName as a } from "../../utils/string-utils.js";
-function f({
-  currentItem: t,
-  relatedModelName: s,
-  isOpen: n,
-  onClick: l
+import { getItemDisplayName } from "../../utils/string-utils.js";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx";
+function RelationDropdownButton({
+  currentItem,
+  relatedModelName,
+  isOpen,
+  onClick
 }) {
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: l,
-      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__ */ e("span", { className: t ? "text-gray-900" : "text-gray-500", children: t ? a(t) : `Select ${s.toLowerCase()}...` }, void 0, !1, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 21,
-          columnNumber: 11
-        }, this),
-        /* @__PURE__ */ e(
-          "svg",
-          {
-            className: `w-4 h-4 text-gray-400 transition-transform ${n ? "rotate-180" : ""}`,
-            fill: "none",
-            stroke: "currentColor",
-            viewBox: "0 0 24 24",
-            children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }, void 0, !1, {
-              fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-              lineNumber: 30,
-              columnNumber: 13
-            }, this)
-          },
-          void 0,
-          !1,
-          {
-            fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-            lineNumber: 24,
-            columnNumber: 7
-          },
-          this
-        )
-      ]
-    },
-    void 0,
-    !0,
-    {
-      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 d({
-  searchTerm: t,
-  onSearchChange: s,
-  relatedModelName: n
+function RelationSearchInput({
+  searchTerm,
+  onSearchChange,
+  relatedModelName
 }) {
-  return /* @__PURE__ */ e("div", { className: "p-2", children: /* @__PURE__ */ e(
-    "input",
-    {
-      type: "text",
-      placeholder: `Search ${n.toLowerCase()}...`,
-      value: t,
-      onChange: (l) => s(l.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: !0
-    },
-    void 0,
-    !1,
-    {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 48,
-      columnNumber: 15
-    },
-    this
-  ) }, void 0, !1, {
-    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 c({
-  item: t,
-  onSelect: s
+function RelationItem({
+  item,
+  onSelect
 }) {
-  return /* @__PURE__ */ e(
-    "button",
-    {
-      type: "button",
-      onClick: () => s(t),
-      className: "w-full px-3 py-2 text-left text-sm hover:bg-gray-100 focus:bg-gray-100 transition-colors",
-      children: a(t)
-    },
-    void 0,
-    !1,
-    {
-      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 u({
-  items: t,
-  loading: s,
-  error: n,
-  onSelect: l,
-  onClear: o
+function RelationItemList({
+  items,
+  loading,
+  error,
+  onSelect,
+  onClear
 }) {
-  return /* @__PURE__ */ e("div", { className: "max-h-48 overflow-y-auto", children: [
-    /* @__PURE__ */ e(
-      "button",
-      {
-        type: "button",
-        onClick: o,
-        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,
-      !1,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 95,
-        columnNumber: 15
-      },
-      this
-    ),
-    n ? /* @__PURE__ */ e("div", { className: "px-3 py-2 text-sm text-red-600", children: [
-      /* @__PURE__ */ e("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ e("svg", { className: "w-4 h-4 mr-2", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ e("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, !1, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 107,
-          columnNumber: 15
-        }, this) }, void 0, !1, {
-          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, !0, {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 105,
-        columnNumber: 11
-      }, this),
-      /* @__PURE__ */ e("div", { className: "text-xs text-gray-500 mt-1", children: n.networkError ? "Network error" : "Please try again" }, void 0, !1, {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 111,
-        columnNumber: 11
-      }, this)
-    ] }, void 0, !0, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 104,
-      columnNumber: 9
-    }, this) : s ? /* @__PURE__ */ e("div", { className: "px-3 py-2 text-sm text-gray-500", children: /* @__PURE__ */ e("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ e("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__ */ e("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }, void 0, !1, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 119,
-          columnNumber: 15
-        }, this),
-        /* @__PURE__ */ e("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, !1, {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-          lineNumber: 120,
-          columnNumber: 15
-        }, this)
-      ] }, void 0, !0, {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 118,
-        columnNumber: 13
-      }, this),
-      "Loading..."
-    ] }, void 0, !0, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 117,
-      columnNumber: 11
-    }, this) }, void 0, !1, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 116,
-      columnNumber: 9
-    }, this) : t.length === 0 ? /* @__PURE__ */ e("div", { className: "px-3 py-2 text-sm text-gray-500", children: "No items found" }, void 0, !1, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-      lineNumber: 126,
-      columnNumber: 17
-    }, this) : t.map((i) => /* @__PURE__ */ e(
-      c,
-      {
-        item: i,
-        onSelect: l
-      },
-      i.id,
-      !1,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 129,
-        columnNumber: 11
-      },
-      this
-    ))
-  ] }, void 0, !0, {
-    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")) : loading ? /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 text-sm text-gray-500", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 116,
+    columnNumber: 9
+  } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 117,
+    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: 118,
+    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: 119,
+    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: 120,
+    columnNumber: 15
+  } })), "Loading...")) : items.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 text-sm text-gray-500", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 126,
+    columnNumber: 17
+  } }, "No items found") : items.map((item) => /* @__PURE__ */ React.createElement(RelationItem, { key: item.id, item, onSelect, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 129,
+    columnNumber: 11
+  } })));
 }
-function N({
-  searchTerm: t,
-  onSearchChange: s,
-  relatedModelName: n,
-  items: l,
-  loading: o,
-  error: i,
-  onSelect: r,
-  onClear: m
+function RelationDropdownContent({
+  searchTerm,
+  onSearchChange,
+  relatedModelName,
+  items,
+  loading,
+  error,
+  onSelect,
+  onClear
 }) {
-  return /* @__PURE__ */ e("div", { className: "absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg", children: [
-    /* @__PURE__ */ e(
-      d,
-      {
-        searchTerm: t,
-        onSearchChange: s,
-        relatedModelName: n
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 162,
-        columnNumber: 7
-      },
-      this
-    ),
-    /* @__PURE__ */ e(
-      u,
-      {
-        items: l,
-        loading: o,
-        error: i,
-        onSelect: r,
-        onClear: m
-      },
-      void 0,
-      !1,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
-        lineNumber: 167,
-        columnNumber: 7
-      },
-      this
-    )
-  ] }, void 0, !0, {
-    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx",
+  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: 161,
     columnNumber: 5
-  }, this);
+  } }, /* @__PURE__ */ React.createElement(RelationSearchInput, { searchTerm, onSearchChange, relatedModelName, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 162,
+    columnNumber: 7
+  } }), /* @__PURE__ */ React.createElement(RelationItemList, { items, loading, error, onSelect, onClear, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 167,
+    columnNumber: 7
+  } }));
 }
 export {
-  f as RelationDropdownButton,
-  N as RelationDropdownContent,
-  c as RelationItem,
-  u as RelationItemList,
-  d as RelationSearchInput
+  RelationDropdownButton,
+  RelationDropdownContent,
+  RelationItem,
+  RelationItemList,
+  RelationSearchInput
 };

package/lib/components/filters/RelationFilterField.js

@@ -1,116 +1,86 @@
-import { jsxDEV as t } from "react/jsx-dev-runtime";
-import { useState as b, useRef as R, useCallback as a, useMemo as I } from "react";
-import { useClickOutside as g } from "../../hooks/useClickOutside.js";
-import { useRelationData as D } from "../../hooks/useRelationData.js";
-import { formatFieldName as p } from "../../utils/string-utils.js";
-import { RelationDropdownButton as P, RelationDropdownContent as U } from "./RelationComponents.js";
-function E({
-  fieldName: m,
-  relatedModelName: r,
-  currentValue: e,
-  onChange: l
+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/admin-data/src/lib/components/filters/RelationFilterField.tsx";
+function RelationFilterField({
+  fieldName,
+  relatedModelName,
+  currentValue,
+  onChange
 }) {
-  const [c, n] = b(""), [i, o] = b(!1), f = R(null), u = a(() => {
-    o(!1);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const handleCloseDropdown = useCallback(() => {
+    setIsOpen(false);
   }, []);
-  g(f, u, i);
-  const { relatedItems: d, loading: h, error: N, hasDocument: F } = D(r, c, i), j = I(
-    () => e != null && e.id ? d.find((s) => s.id === e.id) : null,
-    [e == null ? void 0 : e.id, d]
-  ), v = a((s) => {
-    l({ id: s.id }), o(!1), n("");
-  }, [l]), x = a(() => {
-    l(void 0), o(!1), n("");
-  }, [l]), y = a(() => {
-    o(!i), i || n("");
-  }, [i]);
-  return F ? /* @__PURE__ */ t("div", { className: "space-y-1", ref: f, children: [
-    /* @__PURE__ */ t("label", { className: "block text-sm font-medium text-gray-700", children: p(m) }, void 0, !1, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-      lineNumber: 80,
+  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 handleSelect = useCallback((item) => {
+    onChange({
+      id: item.id
+    });
+    setIsOpen(false);
+    setSearchTerm("");
+  }, [onChange]);
+  const handleClear = useCallback(() => {
+    onChange(void 0);
+    setIsOpen(false);
+    setSearchTerm("");
+  }, [onChange]);
+  const handleToggleOpen = useCallback(() => {
+    setIsOpen(!isOpen);
+    if (!isOpen) {
+      setSearchTerm("");
+    }
+  }, [isOpen]);
+  if (!hasDocument) {
+    return /* @__PURE__ */ React.createElement("div", { className: "space-y-1", __self: this, __source: {
+      fileName: _jsxFileName,
+      lineNumber: 63,
       columnNumber: 7
-    }, this),
-    /* @__PURE__ */ t("div", { className: "relative", children: [
-      /* @__PURE__ */ t(
-        P,
-        {
-          currentItem: j,
-          relatedModelName: r,
-          isOpen: i,
-          onClick: y
-        },
-        void 0,
-        !1,
-        {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-          lineNumber: 84,
-          columnNumber: 9
-        },
-        this
-      ),
-      i && /* @__PURE__ */ t(
-        U,
-        {
-          searchTerm: c,
-          onSearchChange: n,
-          relatedModelName: r,
-          items: d,
-          loading: h,
-          error: N,
-          onSelect: v,
-          onClear: x
-        },
-        void 0,
-        !1,
-        {
-          fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-          lineNumber: 92,
-          columnNumber: 11
-        },
-        this
-      )
-    ] }, void 0, !0, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-      lineNumber: 83,
-      columnNumber: 7
-    }, this)
-  ] }, void 0, !0, {
-    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-    lineNumber: 79,
-    columnNumber: 5
-  }, this) : /* @__PURE__ */ t("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ t("label", { className: "block text-sm font-medium text-gray-700", children: [
-      p(m),
-      " ID"
-    ] }, void 0, !0, {
-      fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
+    } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
+      fileName: _jsxFileName,
       lineNumber: 64,
       columnNumber: 9
-    }, this),
-    /* @__PURE__ */ t(
-      "input",
-      {
-        type: "text",
-        value: (e == null ? void 0 : e.id) || "",
-        onChange: (s) => l(s.target.value ? { id: s.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,
-      !1,
-      {
-        fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-        lineNumber: 67,
-        columnNumber: 9
-      },
-      this
-    )
-  ] }, void 0, !0, {
-    fileName: "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationFilterField.tsx",
-    lineNumber: 63,
+    } }, 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: 67,
+      columnNumber: 9
+    } }));
+  }
+  return /* @__PURE__ */ React.createElement("div", { className: "space-y-1", ref: dropdownRef, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 79,
+    columnNumber: 5
+  } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 80,
+    columnNumber: 7
+  } }, formatFieldName(fieldName)), /* @__PURE__ */ React.createElement("div", { className: "relative", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 83,
     columnNumber: 7
-  }, this);
+  } }, /* @__PURE__ */ React.createElement(RelationDropdownButton, { currentItem, relatedModelName, isOpen, onClick: handleToggleOpen, __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 84,
+    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: 92,
+    columnNumber: 11
+  } })));
 }
 export {
-  E as RelationFilterField
+  RelationFilterField
 };