@object-ui/plugin-detail 3.1.1 → 3.1.3

package/src/__tests__/DetailSection.test.tsx

@@ -8,7 +8,7 @@
 
 import { describe, it, expect } from 'vitest';
 import { render, screen } from '@testing-library/react';
-import { DetailSection } from '../DetailSection';
+import { DetailSection, getResponsiveSpanClass } from '../DetailSection';
 
 describe('DetailSection', () => {
   it('should render text fields as plain text', () => {
@@ -317,4 +317,174 @@ describe('DetailSection', () => {
     // Should use 'text' renderer, not 'number'
     expect(screen.getByText('Alice')).toBeInTheDocument();
   });
+
+  it('should use responsive span classes for wide fields in 3-column layout', () => {
+    const section = {
+      title: 'Wide Fields',
+      fields: Array.from({ length: 12 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: i === 5 ? 'textarea' : 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.className).toContain('lg:grid-cols-3');
+    // Wide field (textarea) should have responsive span, not bare col-span-3
+    const fields = container.querySelectorAll('[class*="col-span"]');
+    fields.forEach((field) => {
+      // No bare col-span-3 at base level — must be lg: prefixed
+      const classes = field.className.split(/\s+/);
+      const hasBareSpan3 = classes.some((c: string) => c === 'col-span-3');
+      expect(hasBareSpan3).toBe(false);
+    });
+  });
+
+  it('should use responsive span classes for wide fields in 2-column layout', () => {
+    const section = {
+      title: 'Wide Fields',
+      fields: [
+        { name: 'a', label: 'A', type: 'text' },
+        { name: 'b', label: 'B', type: 'text' },
+        { name: 'c', label: 'C', type: 'text' },
+        { name: 'd', label: 'D', type: 'text' },
+        { name: 'notes', label: 'Notes', type: 'textarea' },
+      ],
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid!.className).toContain('md:grid-cols-2');
+    // Wide field should have md:col-span-2, not bare col-span-2
+    const fields = container.querySelectorAll('[class*="col-span"]');
+    fields.forEach((field) => {
+      const classes = field.className.split(/\s+/);
+      const hasBareSpan2 = classes.some((c: string) => c === 'col-span-2');
+      expect(hasBareSpan2).toBe(false);
+    });
+  });
+
+  it('should not apply col-span at base breakpoint to prevent implicit grid columns on mobile', () => {
+    const section = {
+      title: 'Mobile Safe',
+      fields: Array.from({ length: 15 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: i === 0 ? 'textarea' : 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    // Ensure no bare col-span-N (N>1) classes without responsive prefix
+    const allElements = container.querySelectorAll('*');
+    allElements.forEach((el) => {
+      const classes = el.className?.split?.(/\s+/) || [];
+      classes.forEach((cls: string) => {
+        if (cls.match(/^col-span-[2-9]$/)) {
+          throw new Error(`Found bare "${cls}" class without responsive prefix — would break mobile single-column layout`);
+        }
+      });
+    });
+  });
+
+  it('should initially render a batch when virtualScroll is enabled with many fields', () => {
+    const section = {
+      title: 'Virtual',
+      fields: Array.from({ length: 50 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={{}}
+        virtualScroll={{ enabled: true, batchSize: 10 }}
+      />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    // Initially should render only the batch (10 fields), not all 50
+    const fieldElements = grid!.children;
+    expect(fieldElements.length).toBeLessThanOrEqual(10);
+  });
+
+  it('should render all fields when virtualScroll is disabled', () => {
+    const section = {
+      title: 'No Virtual',
+      fields: Array.from({ length: 50 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection section={section} data={{}} />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.children.length).toBe(50);
+  });
+
+  it('should render all fields when virtualScroll is enabled but field count is below batch size', () => {
+    const section = {
+      title: 'Small',
+      fields: Array.from({ length: 5 }, (_, i) => ({
+        name: `field_${i}`,
+        label: `Field ${i}`,
+        type: 'text',
+      })),
+    };
+    const { container } = render(
+      <DetailSection
+        section={section}
+        data={{}}
+        virtualScroll={{ enabled: true, batchSize: 20 }}
+      />
+    );
+    const grid = container.querySelector('.grid');
+    expect(grid).toBeTruthy();
+    expect(grid!.children.length).toBe(5);
+  });
+});
+
+describe('getResponsiveSpanClass', () => {
+  it('should return empty string for no span', () => {
+    expect(getResponsiveSpanClass(undefined, 2)).toBe('');
+  });
+
+  it('should return empty string for span=1', () => {
+    expect(getResponsiveSpanClass(1, 3)).toBe('');
+  });
+
+  it('should return empty string for 1-column layout', () => {
+    expect(getResponsiveSpanClass(3, 1)).toBe('');
+  });
+
+  it('should return md:col-span-2 for span=2 in 2-column layout', () => {
+    expect(getResponsiveSpanClass(2, 2)).toBe('md:col-span-2');
+  });
+
+  it('should cap span to 2 in 2-column layout', () => {
+    expect(getResponsiveSpanClass(3, 2)).toBe('md:col-span-2');
+    expect(getResponsiveSpanClass(6, 2)).toBe('md:col-span-2');
+  });
+
+  it('should return md:col-span-2 for span=2 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(2, 3)).toBe('md:col-span-2');
+  });
+
+  it('should return responsive classes for span=3 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(3, 3)).toBe('md:col-span-2 lg:col-span-3');
+  });
+
+  it('should cap span to 3 in 3-column layout', () => {
+    expect(getResponsiveSpanClass(6, 3)).toBe('md:col-span-2 lg:col-span-3');
+  });
 });

package/src/__tests__/DetailView.test.tsx

@@ -539,6 +539,37 @@ describe('DetailView', () => {
     expect(onBack).toHaveBeenCalled();
   });
 
+  it('should try fallback with alternate ID when first findOne throws an error', async () => {
+    let callCount = 0;
+    const mockDataSource = {
+      findOne: vi.fn().mockImplementation((_obj: string, id: string) => {
+        callCount++;
+        if (callCount === 1) {
+          // First call throws (simulate server error)
+          return Promise.reject(new Error('Server error'));
+        }
+        // Second call (fallback) succeeds
+        return Promise.resolve({ name: 'Alice' });
+      }),
+    } as any;
+
+    const schema: DetailViewSchema = {
+      type: 'detail-view',
+      title: 'Contact Details',
+      objectName: 'contact',
+      resourceId: 'contact-123',
+      fields: [{ name: 'name', label: 'Name' }],
+    };
+
+    const { findByText } = render(<DetailView schema={schema} dataSource={mockDataSource} />);
+    // The fallback should find the record using the stripped ID
+    expect(await findByText('Alice')).toBeInTheDocument();
+    // findOne should be called twice: first with original ID, then with stripped prefix
+    expect(mockDataSource.findOne).toHaveBeenCalledTimes(2);
+    expect(mockDataSource.findOne).toHaveBeenNthCalledWith(1, 'contact', 'contact-123');
+    expect(mockDataSource.findOne).toHaveBeenNthCalledWith(2, 'contact', '123');
+  });
+
   it('should call findOne with $expand when objectSchema has lookup fields', async () => {
     const mockDataSource = {
       getObjectSchema: vi.fn().mockResolvedValue({

package/src/__tests__/HeaderHighlight.test.tsx

@@ -65,4 +65,149 @@ describe('HeaderHighlight', () => {
     render(<HeaderHighlight fields={fieldsWithIcon} data={{ revenue: '$5M' }} />);
     expect(screen.getByText('💰')).toBeInTheDocument();
   });
+
+  it('should render currency fields with formatted value via CellRenderer', () => {
+    const currencyFields: HighlightField[] = [
+      { name: 'amount', label: 'Amount', type: 'currency' },
+    ];
+    render(<HeaderHighlight fields={currencyFields} data={{ amount: 250000 }} />);
+    // CurrencyCellRenderer should format — should NOT show raw "250000"
+    expect(screen.queryByText('250000')).not.toBeInTheDocument();
+    expect(screen.getByText(/250,000/)).toBeInTheDocument();
+  });
+
+  it('should render select fields as badge via CellRenderer', () => {
+    const selectFields: HighlightField[] = [
+      { name: 'stage', label: 'Stage', type: 'select' },
+    ];
+    render(
+      <HeaderHighlight
+        fields={selectFields}
+        data={{ stage: 'prospecting' }}
+        objectSchema={{
+          fields: {
+            stage: {
+              type: 'select',
+              options: [
+                { value: 'prospecting', label: 'Prospecting', color: 'blue' },
+              ],
+            },
+          },
+        }}
+      />
+    );
+    expect(screen.getByText('Prospecting')).toBeInTheDocument();
+  });
+
+  it('should enrich field type from objectSchema when field.type is not set', () => {
+    const fieldsNoType: HighlightField[] = [
+      { name: 'amount', label: 'Amount' },
+    ];
+    render(
+      <HeaderHighlight
+        fields={fieldsNoType}
+        data={{ amount: 5000 }}
+        objectSchema={{
+          fields: {
+            amount: { type: 'currency', currency: 'USD' },
+          },
+        }}
+      />
+    );
+    // CurrencyCellRenderer should format, not raw String()
+    expect(screen.queryByText('5000')).not.toBeInTheDocument();
+    expect(screen.getByText(/5,000/)).toBeInTheDocument();
+  });
+
+  it('should fall back to text when no type info is available', () => {
+    const fieldsNoType: HighlightField[] = [
+      { name: 'custom', label: 'Custom' },
+    ];
+    render(<HeaderHighlight fields={fieldsNoType} data={{ custom: 'raw-value' }} />);
+    expect(screen.getByText('raw-value')).toBeInTheDocument();
+  });
+
+  it('should safely render object values without crashing (React error #310 guard)', () => {
+    // Simulates MongoDB Decimal128 or expanded reference objects
+    const fieldsWithNumber: HighlightField[] = [
+      { name: 'amount', label: 'Amount' },
+      { name: 'account', label: 'Account' },
+    ];
+    const objectData = {
+      amount: { $numberDecimal: '250000' },
+      account: { id: 'abc', name: 'Acme Corp' },
+    };
+    const objectSchema = {
+      fields: {
+        amount: { type: 'number' },
+        account: { type: 'text' },
+      },
+    };
+    // Should NOT crash — cell renderers coerce values via coerceToSafeValue
+    const { container } = render(
+      <HeaderHighlight
+        fields={fieldsWithNumber}
+        data={objectData}
+        objectSchema={objectSchema}
+      />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // NumberCellRenderer coerces $numberDecimal to number
+    expect(screen.getByText('250,000')).toBeInTheDocument();
+    // TextCellRenderer extracts name from object
+    expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+  });
+
+  it('should safely render lookup object values via LookupCellRenderer', () => {
+    const lookupFields: HighlightField[] = [
+      { name: 'owner', label: 'Owner' },
+    ];
+    const lookupData = {
+      owner: { id: 'u1', name: 'Jane Doe' },
+    };
+    const objectSchema = {
+      fields: {
+        owner: { type: 'lookup' },
+      },
+    };
+    // LookupCellRenderer handles object values natively
+    render(
+      <HeaderHighlight
+        fields={lookupFields}
+        data={lookupData}
+        objectSchema={objectSchema}
+      />
+    );
+    expect(screen.getByText('Jane Doe')).toBeInTheDocument();
+  });
+
+  it('should safely render array values via TextCellRenderer', () => {
+    const arrayFields: HighlightField[] = [
+      { name: 'tags', label: 'Tags' },
+    ];
+    const arrayData = {
+      tags: ['urgent', 'follow-up'],
+    };
+    const { container } = render(
+      <HeaderHighlight fields={arrayFields} data={arrayData} />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // TextCellRenderer coerces arrays to comma-separated string
+    expect(screen.getByText('urgent, follow-up')).toBeInTheDocument();
+  });
+
+  it('should safely render array of objects via TextCellRenderer', () => {
+    const arrayFields: HighlightField[] = [
+      { name: 'contacts', label: 'Contacts' },
+    ];
+    const arrayData = {
+      contacts: [{ name: 'Alice' }, { name: 'Bob' }],
+    };
+    const { container } = render(
+      <HeaderHighlight fields={arrayFields} data={arrayData} />
+    );
+    expect(container.innerHTML).not.toBe('');
+    // TextCellRenderer coerces array of objects to "Alice, Bob"
+    expect(screen.getByText('Alice, Bob')).toBeInTheDocument();
+  });
 });

package/src/__tests__/RecordChatterPanel.test.tsx

@@ -224,4 +224,42 @@ describe('RecordChatterPanel', () => {
       expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
     });
   });
+
+  describe('collapseWhenEmpty', () => {
+    it('should auto-collapse when empty and collapseWhenEmpty is true (inline mode)', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true }}
+          collapseWhenEmpty
+          items={[]}
+        />,
+      );
+      // Should be collapsed because items is empty
+      expect(screen.getByLabelText('Show discussion')).toBeInTheDocument();
+    });
+
+    it('should not auto-collapse when items exist and collapseWhenEmpty is true', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'bottom', collapsible: true }}
+          collapseWhenEmpty
+          items={mockItems}
+        />,
+      );
+      // Should be expanded because there are items
+      expect(screen.getByText('Activity')).toBeInTheDocument();
+    });
+
+    it('should auto-collapse sidebar when empty and collapseWhenEmpty is true', () => {
+      render(
+        <RecordChatterPanel
+          config={{ position: 'right', collapsible: true }}
+          collapseWhenEmpty
+          items={[]}
+        />,
+      );
+      // Should be collapsed
+      expect(screen.getByLabelText('Open discussion panel')).toBeInTheDocument();
+    });
+  });
 });

package/src/__tests__/RelatedList.test.tsx

@@ -71,7 +71,7 @@ describe('RelatedList', () => {
         fields: {
           product: { type: 'string', label: 'Product' },
           quantity: { type: 'number', label: 'Quantity' },
-          _id: { type: 'string', label: 'ID' },
+          id: { type: 'string', label: 'ID' },
         },
       }),
       find: vi.fn(),
@@ -92,12 +92,12 @@ describe('RelatedList', () => {
       expect(mockDataSource.getObjectSchema).toHaveBeenCalledWith('order_item');
     });
 
-    // Verify columns are generated from schema (excluding _id)
+    // Verify columns are generated from schema (excluding id)
     await waitFor(() => {
       expect(screen.getByText('Product')).toBeInTheDocument();
       expect(screen.getByText('Quantity')).toBeInTheDocument();
     });
-    // _id should be filtered out
+    // id should be filtered out
     expect(screen.queryByText('ID')).not.toBeInTheDocument();
   });
 

package/src/__tests__/autoLayout.test.ts

@@ -37,6 +37,33 @@ describe('Detail Auto-Layout', () => {
       expect(inferDetailColumns(15)).toBe(3);
       expect(inferDetailColumns(50)).toBe(3);
     });
+
+    it('should cap to 1 column when containerWidth < 640', () => {
+      expect(inferDetailColumns(15, 500)).toBe(1);
+      expect(inferDetailColumns(5, 639)).toBe(1);
+    });
+
+    it('should cap to 2 columns when containerWidth < 900', () => {
+      expect(inferDetailColumns(15, 800)).toBe(2);
+      expect(inferDetailColumns(15, 640)).toBe(2);
+      expect(inferDetailColumns(5, 899)).toBe(2);
+    });
+
+    it('should not cap columns when containerWidth >= 900', () => {
+      expect(inferDetailColumns(15, 900)).toBe(3);
+      expect(inferDetailColumns(15, 1200)).toBe(3);
+    });
+
+    it('should not cap below field-count inference', () => {
+      // 2 fields → 1 column, containerWidth 800 would cap at 2, but inference says 1
+      expect(inferDetailColumns(2, 800)).toBe(1);
+    });
+
+    it('should still work without containerWidth (backward compatible)', () => {
+      expect(inferDetailColumns(15)).toBe(3);
+      expect(inferDetailColumns(5)).toBe(2);
+      expect(inferDetailColumns(2)).toBe(1);
+    });
   });
 
   describe('isWideFieldType', () => {
@@ -180,5 +207,22 @@ describe('Detail Auto-Layout', () => {
       expect(result.columns).toBe(2);
       expect(result.fields.length).toBe(8);
     });
+
+    it('should cap columns based on containerWidth when provided', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      // Narrow container: should cap to 1
+      const result = applyDetailAutoLayout(fields, undefined, 500);
+      expect(result.columns).toBe(1);
+    });
+
+    it('should still respect explicit schemaColumns regardless of containerWidth', () => {
+      const fields = Array.from({ length: 15 }, (_, i) => ({
+        name: `f${i}`, label: `F${i}`, type: 'text',
+      }));
+      const result = applyDetailAutoLayout(fields, 3, 500);
+      expect(result.columns).toBe(3);
+    });
   });
 });

package/src/autoLayout.ts

@@ -46,16 +46,31 @@ export function isWideFieldType(type: string): boolean {
 
 /**
  * Infer optimal number of columns for a detail section based on field count.
+ * When containerWidth is provided, limits columns for narrower viewports.
  *
- * Rules:
+ * Rules (field-count based):
  * - 0-3 fields  → 1 column
  * - 4-10 fields → 2 columns
  * - 11+ fields  → 3 columns
+ *
+ * Responsive capping (when containerWidth is supplied):
+ * - containerWidth < 640px  → max 1 column
+ * - containerWidth < 900px  → max 2 columns
+ * - containerWidth >= 900px → no cap
  */
-export function inferDetailColumns(fieldCount: number): number {
-  if (fieldCount <= 3) return 1;
-  if (fieldCount <= 10) return 2;
-  return 3;
+export function inferDetailColumns(fieldCount: number, containerWidth?: number): number {
+  let cols: number;
+  if (fieldCount <= 3) cols = 1;
+  else if (fieldCount <= 10) cols = 2;
+  else cols = 3;
+
+  // Apply responsive capping when container width is known
+  if (containerWidth !== undefined) {
+    if (containerWidth < 640) return Math.min(cols, 1);
+    if (containerWidth < 900) return Math.min(cols, 2);
+  }
+
+  return cols;
 }
 
 /**
@@ -89,11 +104,13 @@ export function applyAutoSpan(
  *
  * @param fields - The section fields
  * @param schemaColumns - User-provided columns (from DetailViewSection or DetailViewSchema)
+ * @param containerWidth - Optional container width in px for responsive column capping
  * @returns Object with processed fields and inferred columns
  */
 export function applyDetailAutoLayout(
   fields: DetailViewField[],
-  schemaColumns: number | undefined
+  schemaColumns: number | undefined,
+  containerWidth?: number
 ): { fields: DetailViewField[]; columns: number } {
   // If user explicitly set columns, respect it but still apply auto span
   if (schemaColumns !== undefined) {
@@ -101,8 +118,8 @@ export function applyDetailAutoLayout(
     return { fields: processed, columns: schemaColumns };
   }
 
-  // Infer columns from field count
-  const columns = inferDetailColumns(fields.length);
+  // Infer columns from field count (with optional container-width capping)
+  const columns = inferDetailColumns(fields.length, containerWidth);
 
   // Apply auto span for wide fields
   const processed = applyAutoSpan(fields, columns);

package/src/index.tsx

@@ -36,7 +36,7 @@ export { SubscriptionToggle } from './SubscriptionToggle';
 export { ReactionPicker } from './ReactionPicker';
 export { ThreadedReplies } from './ThreadedReplies';
 export type { DetailViewProps } from './DetailView';
-export type { DetailSectionProps } from './DetailSection';
+export type { DetailSectionProps, VirtualScrollOptions } from './DetailSection';
 export type { DetailTabsProps } from './DetailTabs';
 export type { RelatedListProps } from './RelatedList';
 export type { SectionGroupProps } from './SectionGroup';

package/dist/LookupField-CsT0QQz2.js

@@ -1,96 +0,0 @@
-import { jsx as l, jsxs as r } from "react/jsx-runtime";
-import { useState as y } from "react";
-import { h as u, X as D, D as j, i as k, B, j as C, k as O, l as F, m as I, I as L } from "./index-qQ1C-yUR.js";
-function R({ value: s, onChange: n, field: x, readonly: g, ...b }) {
-  const [N, f] = y(!1), [h, v] = y(""), c = x || b.schema, o = c?.options || [], i = c.multiple || !1, d = c.display_field || "label", p = o.filter(
-    (e) => e.label.toLowerCase().includes(h.toLowerCase())
-  ), t = i ? (Array.isArray(s) ? s : []).map(
-    (e) => o.find((a) => a.value === e)
-  ).filter(Boolean) : s ? [o.find((e) => e.value === s)].filter(Boolean) : [], w = (e) => {
-    if (i) {
-      const a = Array.isArray(s) ? s : [], m = a.includes(e.value);
-      n(m ? a.filter((A) => A !== e.value) : [...a, e.value]);
-    } else
-      n(e.value), f(!1);
-  }, S = (e) => {
-    if (i) {
-      const a = Array.isArray(s) ? s : [];
-      n(a.filter((m) => m !== e));
-    } else
-      n(null);
-  };
-  return g ? t.length ? i ? /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: t.map((e, a) => /* @__PURE__ */ l(u, { variant: "outline", children: e?.[d] || e?.label }, a)) }) : /* @__PURE__ */ l("span", { className: "text-sm", children: t[0]?.[d] || t[0]?.label }) : /* @__PURE__ */ l("span", { className: "text-sm", children: "-" }) : /* @__PURE__ */ r("div", { className: "space-y-2", children: [
-    t.length > 0 && /* @__PURE__ */ l("div", { className: "flex flex-wrap gap-1", children: t.map((e, a) => /* @__PURE__ */ r(
-      u,
-      {
-        variant: "outline",
-        className: "gap-1",
-        children: [
-          e?.[d] || e?.label,
-          /* @__PURE__ */ l(
-            "button",
-            {
-              onClick: () => S(e?.value),
-              className: "ml-1 hover:text-destructive",
-              type: "button",
-              "aria-label": `Remove ${e?.[d] || e?.label}`,
-              children: /* @__PURE__ */ l(D, { className: "size-3" })
-            }
-          )
-        ]
-      },
-      a
-    )) }),
-    /* @__PURE__ */ r(j, { open: N, onOpenChange: f, children: [
-      /* @__PURE__ */ l(k, { asChild: !0, children: /* @__PURE__ */ r(
-        B,
-        {
-          variant: "outline",
-          className: "w-full justify-start text-left font-normal",
-          type: "button",
-          children: [
-            /* @__PURE__ */ l(C, { className: "mr-2 size-4" }),
-            t.length === 0 ? c?.placeholder || "Select..." : i ? `${t.length} selected` : "Change selection"
-          ]
-        }
-      ) }),
-      /* @__PURE__ */ r(O, { className: "max-w-md", children: [
-        /* @__PURE__ */ l(F, { children: /* @__PURE__ */ r(I, { children: [
-          c?.label || "Select",
-          " ",
-          i && "(multiple)"
-        ] }) }),
-        /* @__PURE__ */ r("div", { className: "space-y-4", children: [
-          /* @__PURE__ */ l(
-            L,
-            {
-              placeholder: "Search...",
-              value: h,
-              onChange: (e) => v(e.target.value),
-              className: "w-full"
-            }
-          ),
-          /* @__PURE__ */ l("div", { className: "max-h-64 overflow-y-auto space-y-1", children: p.length === 0 ? /* @__PURE__ */ l("p", { className: "text-sm text-gray-500 text-center py-4", children: "No options found" }) : p.map((e) => {
-            const a = i ? (Array.isArray(s) ? s : []).includes(e.value) : s === e.value;
-            return /* @__PURE__ */ r(
-              "button",
-              {
-                onClick: () => w(e),
-                className: `w-full text-left px-3 py-2 rounded-md text-sm hover:bg-gray-100 flex items-center justify-between ${a ? "bg-blue-50 text-blue-700" : ""}`,
-                type: "button",
-                children: [
-                  /* @__PURE__ */ l("span", { children: e.label }),
-                  a && /* @__PURE__ */ l(u, { variant: "default", className: "ml-2", children: "Selected" })
-                ]
-              },
-              e.value
-            );
-          }) })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-export {
-  R as LookupField
-};