@nestledjs/data-browser 0.1.12 → 0.1.15

package/index.js

@@ -16,6 +16,7 @@ import { RelationFilterField } from "./lib/components/filters/RelationFilterFiel
 import { AdminBreadcrumbs } from "./lib/components/shared/AdminBreadcrumbs.js";
 import { AdminEmptyState, AdminErrorState, AdminLoadingState } from "./lib/components/shared/AdminErrorStates.js";
 import { AdminStatusDisplay, AdminUserStatus } from "./lib/components/shared/AdminStatusDisplay.js";
+import { RelationFieldWrapper } from "./lib/components/RelationFieldWrapper.js";
 import { buildFormFields, cleanFormInput, getAdminDocuments, getMutationName } from "./lib/utils/graphql-utils.js";
 import { AdminLocalStorage, SecureAdminLocalStorage } from "./lib/utils/secure-storage.js";
 import { formatFieldName, getItemDisplayName, getSmartSearchFields, kebabCase, normalizeModelNameForDocument, spacedWords } from "./lib/utils/string-utils.js";
@@ -40,6 +41,7 @@ export {
   NumberRangeFilter,
   RelationDropdownButton,
   RelationDropdownContent,
+  RelationFieldWrapper,
   RelationFilterField,
   RelationItem,
   RelationItemList,

package/lib/components/RelationFieldWrapper.d.ts

@@ -0,0 +1,9 @@
+interface RelationFieldWrapperProps {
+    readonly children?: React.ReactNode;
+    readonly relationType?: string;
+    readonly initialValue?: string;
+    readonly fieldName?: string;
+    readonly basePath?: string;
+}
+export declare function RelationFieldWrapper({ children, relationType, initialValue, fieldName, basePath }: RelationFieldWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/RelationFieldWrapper.js

@@ -0,0 +1,63 @@
+import { Link } from "react-router";
+import { useState, useEffect } from "react";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/RelationFieldWrapper.tsx";
+const toKebabCase = (str) => {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+};
+function RelationFieldWrapper({
+  children,
+  relationType,
+  initialValue,
+  fieldName,
+  basePath = "/admin/data"
+}) {
+  const [currentValue, setCurrentValue] = useState(initialValue || "");
+  useEffect(() => {
+    if (initialValue && !currentValue) {
+      setCurrentValue(initialValue);
+    }
+    if (fieldName) {
+      const selectElement = document.querySelector(`[name="${fieldName}"]`);
+      if ((selectElement == null ? void 0 : selectElement.value) && selectElement.value !== currentValue) {
+        setCurrentValue(selectElement.value);
+      }
+      if (selectElement) {
+        const handleChange = (event) => {
+          const target = event.target;
+          if (target.value !== currentValue) {
+            setCurrentValue(target.value);
+          }
+        };
+        selectElement.addEventListener("change", handleChange);
+        return () => {
+          selectElement.removeEventListener("change", handleChange);
+        };
+      }
+    }
+  }, [fieldName, currentValue, initialValue]);
+  const showViewLink = !!(relationType && currentValue && currentValue !== "");
+  return /* @__PURE__ */ React.createElement("div", { className: "relative", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 64,
+    columnNumber: 5
+  } }, children, showViewLink && /* @__PURE__ */ React.createElement("div", { className: "mt-1", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 67,
+    columnNumber: 9
+  } }, /* @__PURE__ */ React.createElement(Link, { to: `${basePath}/${toKebabCase(relationType)}/${currentValue}`, className: "inline-flex items-center text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300 hover:underline", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 68,
+    columnNumber: 11
+  } }, /* @__PURE__ */ React.createElement("svg", { className: "h-3 w-3 mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 72,
+    columnNumber: 13
+  } }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z", __self: this, __source: {
+    fileName: _jsxFileName,
+    lineNumber: 79,
+    columnNumber: 15
+  } })), "View ", relationType, " record")));
+}
+export {
+  RelationFieldWrapper
+};

package/lib/components/filters/DateRangeFilter.d.ts

@@ -3,5 +3,5 @@ interface DateRangeFilterProps {
     currentValue: any;
     onChange: (value: any) => void;
 }
-export declare function DateRangeFilter({ fieldName, currentValue, onChange }: DateRangeFilterProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangeFilter({ fieldName, currentValue, onChange }: Readonly<DateRangeFilterProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/filters/DateRangeFilter.js

@@ -1,5 +1,5 @@
 import { formatFieldName } from "../../utils/string-utils.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/DateRangeFilter.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/filters/DateRangeFilter.tsx";
 function DateRangeFilter({
   fieldName,
   currentValue,
@@ -55,29 +55,29 @@ function DateRangeFilter({
     fileName: _jsxFileName,
     lineNumber: 60,
     columnNumber: 9
-  } }, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
+  } }, /* @__PURE__ */ React.createElement("label", { htmlFor: `${fieldName}-from`, className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
     fileName: _jsxFileName,
     lineNumber: 61,
     columnNumber: 11
-  } }, "From"), /* @__PURE__ */ React.createElement("input", { type: "date", value: fromDate, onChange: (e) => handleFromChange(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
+  } }, "From"), /* @__PURE__ */ React.createElement("input", { id: `${fieldName}-from`, type: "date", value: fromDate, onChange: (e) => handleFromChange(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
     fileName: _jsxFileName,
     lineNumber: 62,
     columnNumber: 11
   } })), /* @__PURE__ */ React.createElement("div", { __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 69,
+    lineNumber: 70,
     columnNumber: 9
-  } }, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
+  } }, /* @__PURE__ */ React.createElement("label", { htmlFor: `${fieldName}-to`, className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 70,
+    lineNumber: 71,
     columnNumber: 11
-  } }, "To"), /* @__PURE__ */ React.createElement("input", { type: "date", value: toDate, onChange: (e) => handleToChange(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
+  } }, "To"), /* @__PURE__ */ React.createElement("input", { id: `${fieldName}-to`, type: "date", value: toDate, onChange: (e) => handleToChange(e.target.value), className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 71,
+    lineNumber: 72,
     columnNumber: 11
   } }))), (fromDate || toDate) && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 80,
+    lineNumber: 82,
     columnNumber: 9
   } }, fromDate && toDate && `${fromDate} to ${toDate}`, fromDate && !toDate && `From ${fromDate}`, !fromDate && toDate && `Until ${toDate}`));
 }

package/lib/components/filters/NumberRangeFilter.js

@@ -1,21 +1,21 @@
 import { formatFieldName } from "../../utils/string-utils.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/NumberRangeFilter.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/filters/NumberRangeFilter.tsx";
 function NumberRangeFilter({
   fieldName,
   fieldType,
   currentValue,
   onChange
 }) {
-  const minValue = (currentValue == null ? void 0 : currentValue.gte) !== void 0 ? currentValue.gte.toString() : "";
-  const maxValue = (currentValue == null ? void 0 : currentValue.lte) !== void 0 ? currentValue.lte.toString() : "";
+  const minValue = (currentValue == null ? void 0 : currentValue.gte) === void 0 ? "" : currentValue.gte.toString();
+  const maxValue = (currentValue == null ? void 0 : currentValue.lte) === void 0 ? "" : currentValue.lte.toString();
   const parseNumber = (value) => {
     if (!value) return void 0;
     if (fieldType === "int" || fieldType === "bigint") {
-      const parsed = parseInt(value, 10);
-      return isNaN(parsed) ? void 0 : parsed;
+      const parsed = Number.parseInt(value, 10);
+      return Number.isNaN(parsed) ? void 0 : parsed;
     } else if (fieldType === "float" || fieldType === "decimal") {
-      const parsed = parseFloat(value);
-      return isNaN(parsed) ? void 0 : parsed;
+      const parsed = Number.parseFloat(value);
+      return Number.isNaN(parsed) ? void 0 : parsed;
     }
     return void 0;
   };
@@ -24,10 +24,10 @@ function NumberRangeFilter({
       ...currentValue
     };
     const parsedValue = parseNumber(value);
-    if (parsedValue !== void 0) {
-      newValue.gte = parsedValue;
-    } else {
+    if (parsedValue === void 0) {
       delete newValue.gte;
+    } else {
+      newValue.gte = parsedValue;
     }
     if (newValue.gte === void 0 && newValue.lte === void 0) {
       onChange(void 0);
@@ -40,10 +40,10 @@ function NumberRangeFilter({
       ...currentValue
     };
     const parsedValue = parseNumber(value);
-    if (parsedValue !== void 0) {
-      newValue.lte = parsedValue;
-    } else {
+    if (parsedValue === void 0) {
       delete newValue.lte;
+    } else {
+      newValue.lte = parsedValue;
     }
     if (newValue.gte === void 0 && newValue.lte === void 0) {
       onChange(void 0);
@@ -68,29 +68,29 @@ function NumberRangeFilter({
     fileName: _jsxFileName,
     lineNumber: 79,
     columnNumber: 9
-  } }, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
+  } }, /* @__PURE__ */ React.createElement("label", { htmlFor: `${fieldName}-min`, className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
     fileName: _jsxFileName,
     lineNumber: 80,
     columnNumber: 11
-  } }, "Min"), /* @__PURE__ */ React.createElement("input", { type: "number", step, value: minValue, onChange: (e) => handleMinChange(e.target.value), placeholder: "No minimum", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
+  } }, "Min"), /* @__PURE__ */ React.createElement("input", { id: `${fieldName}-min`, type: "number", step, value: minValue, onChange: (e) => handleMinChange(e.target.value), placeholder: "No minimum", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
     fileName: _jsxFileName,
     lineNumber: 81,
     columnNumber: 11
   } })), /* @__PURE__ */ React.createElement("div", { __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 90,
+    lineNumber: 91,
     columnNumber: 9
-  } }, /* @__PURE__ */ React.createElement("label", { className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
+  } }, /* @__PURE__ */ React.createElement("label", { htmlFor: `${fieldName}-max`, className: "block text-xs text-gray-500 mb-1", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 91,
+    lineNumber: 92,
     columnNumber: 11
-  } }, "Max"), /* @__PURE__ */ React.createElement("input", { type: "number", step, value: maxValue, onChange: (e) => handleMaxChange(e.target.value), placeholder: "No maximum", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
+  } }, "Max"), /* @__PURE__ */ React.createElement("input", { id: `${fieldName}-max`, type: "number", step, value: maxValue, onChange: (e) => handleMaxChange(e.target.value), placeholder: "No maximum", className: "w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-green-web focus:border-green-web", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 92,
+    lineNumber: 93,
     columnNumber: 11
   } }))), (minValue || maxValue) && /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 103,
+    lineNumber: 105,
     columnNumber: 9
   } }, minValue && maxValue && `${minValue} to ${maxValue}`, minValue && !maxValue && `≥ ${minValue}`, !minValue && maxValue && `≤ ${maxValue}`));
 }

package/lib/components/filters/RelationComponents.d.ts

@@ -9,10 +9,10 @@ export declare function RelationSearchInput({ searchTerm, onSearchChange, relate
     onSearchChange: (value: string) => void;
     relatedModelName: string;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationItem({ item, onSelect }: {
+export declare function RelationItem({ item, onSelect }: Readonly<{
     item: any;
     onSelect: (item: any) => void;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 export declare function RelationItemList({ items, loading, error, onSelect, onClear }: Readonly<{
     items: any[];
     loading: boolean;
@@ -20,7 +20,7 @@ export declare function RelationItemList({ items, loading, error, onSelect, onCl
     onSelect: (item: any) => void;
     onClear: () => void;
 }>): import("react/jsx-runtime").JSX.Element;
-export declare function RelationDropdownContent({ searchTerm, onSearchChange, relatedModelName, items, loading, error, onSelect, onClear }: {
+export declare function RelationDropdownContent({ searchTerm, onSearchChange, relatedModelName, items, loading, error, onSelect, onClear }: Readonly<{
     searchTerm: string;
     onSearchChange: (value: string) => void;
     relatedModelName: string;
@@ -29,4 +29,4 @@ export declare function RelationDropdownContent({ searchTerm, onSearchChange, re
     error?: any;
     onSelect: (item: any) => void;
     onClear: () => void;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;

package/lib/components/filters/RelationComponents.js

@@ -1,5 +1,5 @@
 import { getItemDisplayName } from "../../utils/string-utils.js";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/filters/RelationComponents.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/filters/RelationComponents.tsx";
 function RelationDropdownButton({
   currentItem,
   relatedModelName,
@@ -64,7 +64,7 @@ function RelationItemList({
     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: {
+  } }, "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
@@ -84,33 +84,33 @@ function RelationItemList({
     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: {
+  } }, 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: 116,
+    lineNumber: 117,
     columnNumber: 9
   } }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 117,
+    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: 118,
+    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: 119,
+    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: 120,
+    lineNumber: 121,
     columnNumber: 15
-  } })), "Loading...")) : items.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 text-sm text-gray-500", __self: this, __source: {
+  } })), "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: 126,
-    columnNumber: 17
-  } }, "No items found") : items.map((item) => /* @__PURE__ */ React.createElement(RelationItem, { key: item.id, item, onSelect, __self: this, __source: {
+    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: 129,
+    lineNumber: 132,
     columnNumber: 11
   } })));
 }
@@ -126,15 +126,15 @@ function RelationDropdownContent({
 }) {
   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,
+    lineNumber: 164,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement(RelationSearchInput, { searchTerm, onSearchChange, relatedModelName, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 162,
+    lineNumber: 165,
     columnNumber: 7
   } }), /* @__PURE__ */ React.createElement(RelationItemList, { items, loading, error, onSelect, onClear, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 167,
+    lineNumber: 170,
     columnNumber: 7
   } }));
 }

package/lib/components/filters/RelationFilterField.js

@@ -3,7 +3,7 @@ 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";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/filters/RelationFilterField.tsx";
 function RelationFilterField({
   fieldName,
   relatedModelName,
@@ -22,7 +22,13 @@ function RelationFilterField({
     loading,
     error: relationError,
     hasDocument
-  } = useRelationData(relatedModelName, searchTerm, isOpen);
+  } = 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({
@@ -45,39 +51,39 @@ function RelationFilterField({
   if (!hasDocument) {
     return /* @__PURE__ */ React.createElement("div", { className: "space-y-1", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 63,
+      lineNumber: 68,
       columnNumber: 7
     } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
       fileName: _jsxFileName,
-      lineNumber: 64,
+      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: 67,
+      lineNumber: 72,
       columnNumber: 9
     } }));
   }
   return /* @__PURE__ */ React.createElement("div", { className: "space-y-1", ref: dropdownRef, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 79,
+    lineNumber: 84,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("label", { className: "block text-sm font-medium text-gray-700", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 80,
+    lineNumber: 85,
     columnNumber: 7
   } }, formatFieldName(fieldName)), /* @__PURE__ */ React.createElement("div", { className: "relative", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 83,
+    lineNumber: 88,
     columnNumber: 7
   } }, /* @__PURE__ */ React.createElement(RelationDropdownButton, { currentItem, relatedModelName, isOpen, onClick: handleToggleOpen, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 84,
+    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: 92,
+    lineNumber: 97,
     columnNumber: 11
   } })));
 }

package/lib/components/index.d.ts

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

package/lib/components/shared/AdminBreadcrumbs.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Link } from "react-router";
 import { HomeIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminBreadcrumbs.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/shared/AdminBreadcrumbs.tsx";
 function AdminBreadcrumbs({
   items,
   showHome = true,
@@ -46,11 +46,11 @@ function AdminBreadcrumbs({
   };
   return /* @__PURE__ */ React.createElement("nav", { className: `flex ${className}`, "aria-label": "Breadcrumb", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 78,
+    lineNumber: 74,
     columnNumber: 5
   } }, /* @__PURE__ */ React.createElement("ol", { className: "flex items-center space-x-4", __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 79,
+    lineNumber: 75,
     columnNumber: 7
   } }, renderHomeLink(), items.map((item, index) => {
     index === items.length - 1;

package/lib/components/shared/AdminErrorStates.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { XCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon } from "@heroicons/react/24/outline";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminErrorStates.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/shared/AdminErrorStates.tsx";
 const getSeverityConfig = (severity) => {
   const configs = {
     warning: {

package/lib/components/shared/AdminStatusDisplay.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { QuestionMarkCircleIcon, PauseCircleIcon, CheckCircleIcon, XCircleIcon, ExclamationTriangleIcon, ClockIcon } from "@heroicons/react/24/solid";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/components/shared/AdminStatusDisplay.tsx";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/components/shared/AdminStatusDisplay.tsx";
 const getStatusConfig = (status) => {
   const configs = {
     active: {

package/lib/context/AdminDataContext.d.ts

@@ -39,7 +39,7 @@ export interface AdminDataProviderProps {
  * </AdminDataProvider>
  * ```
  */
-export declare function AdminDataProvider({ children, sdk, databaseModels, basePath, formTheme }: AdminDataProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminDataProvider({ children, sdk, databaseModels, basePath, formTheme }: Readonly<AdminDataProviderProps>): import("react/jsx-runtime").JSX.Element;
 /**
  * Hook to access the admin data context
  * @throws Error if used outside of AdminDataProvider

package/lib/context/AdminDataContext.js

@@ -1,5 +1,5 @@
-import React, { createContext, useContext } from "react";
-var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/admin-data/src/lib/context/AdminDataContext.tsx";
+import React, { createContext, useMemo, useContext } from "react";
+var _jsxFileName = "/Users/justinhandley/IdeaProjects/nestled_template/libs/data-browser/src/lib/context/AdminDataContext.tsx";
 const AdminDataContext = createContext(null);
 function AdminDataProvider({
   children,
@@ -8,14 +8,15 @@ function AdminDataProvider({
   basePath = "/admin/data",
   formTheme
 }) {
-  return /* @__PURE__ */ React.createElement(AdminDataContext.Provider, { value: {
+  const value = useMemo(() => ({
     sdk,
     databaseModels,
     basePath,
     formTheme
-  }, __self: this, __source: {
+  }), [sdk, databaseModels, basePath, formTheme]);
+  return /* @__PURE__ */ React.createElement(AdminDataContext.Provider, { value, __self: this, __source: {
     fileName: _jsxFileName,
-    lineNumber: 55,
+    lineNumber: 60,
     columnNumber: 5
   } }, children);
 }

package/lib/hooks/useRelationData.d.ts

@@ -1,4 +1,4 @@
-export declare function useRelationData(relatedModelName: string, searchTerm: string, isOpen: boolean): {
+export declare function useRelationData(relatedModelName: string, searchTerm: string, isOpen: boolean, currentValueId?: string): {
     relatedModel: any;
     relatedItems: any[];
     loading: boolean;

package/lib/hooks/useRelationData.js

@@ -4,7 +4,7 @@ import { useAdminDataContext } from "../context/AdminDataContext.js";
 import { getAdminDocuments } from "../utils/graphql-utils.js";
 import { getSmartSearchFields } from "../utils/string-utils.js";
 import { useDebounce } from "./useDebounce.js";
-function useRelationData(relatedModelName, searchTerm, isOpen) {
+function useRelationData(relatedModelName, searchTerm, isOpen, currentValueId) {
   const { sdk, databaseModels } = useAdminDataContext();
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
   const relatedModel = useMemo(
@@ -45,7 +45,8 @@ function useRelationData(relatedModelName, searchTerm, isOpen) {
     error: relationError
   } = useQuery(relatedDocuments.listQuery, {
     variables: queryVariables,
-    skip: !relatedDocuments.listQuery || !isOpen,
+    // Don't skip if we have a currentValueId to display, even if dropdown is closed
+    skip: !relatedDocuments.listQuery || !isOpen && !currentValueId,
     errorPolicy: "all",
     // Continue processing even if there are GraphQL errors
     notifyOnNetworkStatusChange: true,