@object-ui/fields 3.1.3 → 3.1.4

package/src/widgets/LookupField.tsx

@@ -1,17 +1,19 @@
 import React, { useState, useEffect, useCallback, useRef, useContext, useMemo } from 'react';
 import { 
   Button, 
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
   Input,
-  Badge
+  Badge,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
 } from '@object-ui/components';
-import { Search, X, Loader2, AlertCircle, Plus } from 'lucide-react';
+import { Search, X, Loader2, AlertCircle, Plus, TableProperties } from 'lucide-react';
 import { FieldWidgetProps } from './types';
-import type { DataSource, QueryParams } from '@object-ui/types';
+import type { DataSource, QueryParams, LookupColumnDef } from '@object-ui/types';
+import { RecordPickerDialog } from './RecordPickerDialog';
+import type { RecordPickerFilterColumn } from './RecordPickerDialog';
+import { getCellRendererResolver } from './_cell-renderer-bridge';
+import { SchemaRendererContext as ImportedSchemaRendererContext } from '@object-ui/react';
 
 export interface LookupOption {
   value: string | number;
@@ -20,25 +22,14 @@ export interface LookupOption {
   [key: string]: any;
 }
 
-/** Default page size for lookup data fetching */
+/** Page size for the quick-select popover typeahead */
 const LOOKUP_PAGE_SIZE = 50;
 
 /**
- * Resolve SchemaRendererContext from @object-ui/react at runtime.
- * Uses the same dynamic-require fallback that plugin-view uses to avoid
- * a hard dependency on @object-ui/react (which would create a cycle).
+ * SchemaRendererContext is created by @object-ui/react.
+ * Using a static import to be compatible with Next.js Turbopack SSR.
  */
-const FallbackContext = React.createContext<any>(null);
-let SchemaRendererContext: React.Context<any> = FallbackContext;
-try {
-  // eslint-disable-next-line @typescript-eslint/no-require-imports
-  const mod = require('@object-ui/react');
-  if (mod.SchemaRendererContext) {
-    SchemaRendererContext = mod.SchemaRendererContext;
-  }
-} catch {
-  // @object-ui/react not available — dataSource must be passed via props
-}
+const SchemaRendererContext: React.Context<any> = ImportedSchemaRendererContext;
 
 /**
  * Map a raw record to a LookupOption using a display field and an id field.
@@ -55,6 +46,27 @@ function recordToOption(
   return { value: val, label: String(label), description, ...record };
 }
 
+/**
+ * Map a LookupColumnDef.type to a filter input type for the filter bar.
+ * Returns undefined if the field type is not filterable.
+ */
+function mapFieldTypeToFilterType(
+  fieldType: string,
+): RecordPickerFilterColumn['type'] | undefined {
+  const mapping: Record<string, RecordPickerFilterColumn['type']> = {
+    text: 'text',
+    number: 'number',
+    currency: 'number',
+    percent: 'number',
+    select: 'select',
+    status: 'select',
+    date: 'date',
+    datetime: 'date',
+    boolean: 'boolean',
+  };
+  return mapping[fieldType];
+}
+
 /**
  * Lookup field for selecting related records.
  * Supports single and multi-select with search.
@@ -75,6 +87,11 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   const [totalCount, setTotalCount] = useState(0);
   const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  // Records selected via RecordPickerDialog (Level 2).
+  // Stored as LookupOption so that findOption can resolve display labels
+  // even when the record wasn't part of the Level 1 popover fetch.
+  const [pickerResolvedRecords, setPickerResolvedRecords] = useState<LookupOption[]>([]);
+
   // Arrow-key active index (-1 = none)
   const [activeIndex, setActiveIndex] = useState(-1);
   const listRef = useRef<HTMLDivElement>(null);
@@ -99,6 +116,30 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   // ObjectStack convention uses `reference`; types define `reference_to` — support both
   const referenceTo: string | undefined = fieldMeta?.reference_to || fieldMeta?.reference;
 
+  // Enterprise Record Picker configuration
+  const lookupColumns: Array<string | LookupColumnDef> | undefined = fieldMeta?.lookup_columns;
+  const lookupPageSize: number | undefined = fieldMeta?.lookup_page_size;
+  const lookupFilters: import('@object-ui/types').LookupFilterDef[] | undefined = fieldMeta?.lookup_filters;
+
+  // Derive filter columns from lookup_columns that have type info
+  const filterColumns = useMemo<RecordPickerFilterColumn[] | undefined>(() => {
+    if (!lookupColumns) return undefined;
+    const cols: RecordPickerFilterColumn[] = [];
+    for (const c of lookupColumns) {
+      if (typeof c === 'object' && c.type) {
+        const filterType = mapFieldTypeToFilterType(c.type);
+        if (filterType) {
+          cols.push({
+            field: c.field,
+            label: c.label,
+            type: filterType,
+          });
+        }
+      }
+    }
+    return cols.length > 0 ? cols : undefined;
+  }, [lookupColumns]);
+
   // Resolve DataSource: explicit prop > field-level > wrapper field > SchemaRendererContext > none
   const ctx = useContext(SchemaRendererContext);
   const contextDataSource = ctx?.dataSource ?? null;
@@ -111,6 +152,9 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
   const onCreateNew: ((searchQuery: string) => void) | undefined =
     (props as any).onCreateNew ?? lookupField?.onCreateNew;
 
+  // State for the full Record Picker dialog (Level 2)
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
   // Determine which options to display
   const allOptions = hasDataSource ? fetchedOptions : staticOptions;
 
@@ -206,15 +250,16 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
     };
   }, []);
 
-  // Get selected option(s) — check both static and fetched options
+  // Get selected option(s) — check static, fetched, and picker-resolved options
   const findOption = useCallback(
     (v: any): LookupOption | undefined => {
       return (
         staticOptions.find(opt => opt.value === v) ??
-        fetchedOptions.find(opt => opt.value === v)
+        fetchedOptions.find(opt => opt.value === v) ??
+        pickerResolvedRecords.find(opt => opt.value === v)
       );
     },
-    [staticOptions, fetchedOptions],
+    [staticOptions, fetchedOptions, pickerResolvedRecords],
   );
 
   const selectedOptions = multiple
@@ -249,6 +294,16 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
     }
   };
 
+  // Callback from RecordPickerDialog — caches selected records so that
+  // findOption can resolve display labels after the dialog closes.
+  const handlePickerSelectRecords = useCallback(
+    (records: any[]) => {
+      const mapped = records.map(r => recordToOption(r, displayField, idField, descriptionField));
+      setPickerResolvedRecords(mapped);
+    },
+    [displayField, idField, descriptionField],
+  );
+
   // Keyboard handler for the search input — arrow keys + Enter
   const handleSearchKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
@@ -327,12 +382,13 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
         </div>
       )}
 
-      {/* Lookup dialog trigger */}
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogTrigger asChild>
+      {/* Level 1: Quick-select Popover (inline typeahead) */}
+      <div className="flex items-center gap-1.5">
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger asChild>
           <Button 
             variant="outline" 
-            className="w-full justify-start text-left font-normal"
+            className="min-w-0 flex-1 justify-start text-left font-normal"
             type="button"
           >
             <Search className="mr-2 size-4" />
@@ -341,16 +397,10 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
               : multiple ? `${selectedOptions.length} selected` : 'Change selection'
             }
           </Button>
-        </DialogTrigger>
-        <DialogContent className="max-w-md">
-          <DialogHeader>
-            <DialogTitle>
-              {lookupField?.label || 'Select'} {multiple && '(multiple)'}
-            </DialogTitle>
-          </DialogHeader>
-          
+        </PopoverTrigger>
+        <PopoverContent className="w-[var(--radix-popover-trigger-width)] p-0" align="start">
           {/* Search input */}
-          <div className="space-y-4">
+          <div className="p-2">
             <div className="relative">
               <Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
               <Input
@@ -358,7 +408,7 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
                 value={searchQuery}
                 onChange={(e) => handleSearchChange(e.target.value)}
                 onKeyDown={handleSearchKeyDown}
-                className="w-full pl-9"
+                className="w-full pl-9 h-8 text-sm"
               />
               {loading && (
                 <Loader2
@@ -367,121 +417,175 @@ export function LookupField({ value, onChange, field, readonly, ...props }: Fiel
                 />
               )}
             </div>
+          </div>
 
-            {/* Error state */}
-            {error && (
-              <div className="flex flex-col items-center gap-2 py-4" role="alert">
-                <AlertCircle className="size-5 text-destructive" />
-                <p className="text-sm text-destructive">{error}</p>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => fetchLookupData(searchQuery || undefined)}
-                  type="button"
-                >
-                  Retry
-                </Button>
-              </div>
-            )}
-
-            {/* Loading state (initial load only, not search refinement) */}
-            {loading && filteredOptions.length === 0 && !error && (
-              <div className="flex flex-col items-center gap-2 py-6" role="status" aria-live="polite">
-                <Loader2 className="size-6 animate-spin text-muted-foreground" />
-                <p className="text-sm text-muted-foreground">Loading…</p>
-              </div>
-            )}
-
-            {/* Options list */}
-            {!error && !(loading && filteredOptions.length === 0) && (
-              <div ref={listRef} className="max-h-64 overflow-y-auto space-y-1" role="listbox">
-                {filteredOptions.length === 0 ? (
-                  <div className="py-4 text-center">
-                    <p className="text-sm text-muted-foreground">
-                      No options found
-                    </p>
-                    {/* Quick-create entry */}
-                    {onCreateNew && (
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        className="mt-2 gap-1"
-                        type="button"
-                        onClick={() => {
-                          onCreateNew(searchQuery);
-                          setIsOpen(false);
-                        }}
-                      >
-                        <Plus className="size-4" />
-                        Create new
-                      </Button>
-                    )}
-                  </div>
-                ) : (
-                  <>
-                    {filteredOptions.map((option, idx) => {
-                      const isSelected = multiple
-                        ? (Array.isArray(value) ? value : []).includes(option.value)
-                        : value === option.value;
-                      const isActive = idx === activeIndex;
-
-                      return (
-                        <button
-                          key={option.value}
-                          data-lookup-index={idx}
-                          role="option"
-                          aria-selected={isSelected}
-                          onClick={() => handleSelect(option)}
-                          className={`w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center justify-between ${
-                            isActive
-                              ? 'bg-accent text-accent-foreground'
-                              : isSelected
-                                ? 'bg-accent/50 text-accent-foreground'
-                                : ''
-                          }`}
-                          type="button"
-                        >
-                          <div className="min-w-0 flex-1">
-                            <span className="block truncate">{option.label}</span>
-                            {option.description && (
-                              <span className="block truncate text-xs text-muted-foreground">
-                                {option.description}
-                              </span>
-                            )}
-                          </div>
-                          {isSelected && (
-                            <Badge variant="default" className="ml-2 shrink-0">Selected</Badge>
-                          )}
-                        </button>
-                      );
-                    })}
-                    {/* Show total count when fetched from DataSource */}
-                    {hasDataSource && totalCount > filteredOptions.length && (
-                      <p className="text-xs text-muted-foreground text-center py-2">
-                        Showing {filteredOptions.length} of {totalCount} results. Refine your search to find more.
-                      </p>
-                    )}
-                    {/* Quick-create entry (below results) */}
-                    {onCreateNew && (
+          {/* Error state */}
+          {error && (
+            <div className="flex flex-col items-center gap-2 py-4 px-2" role="alert">
+              <AlertCircle className="size-5 text-destructive" />
+              <p className="text-sm text-destructive">{error}</p>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => fetchLookupData(searchQuery || undefined)}
+                type="button"
+              >
+                Retry
+              </Button>
+            </div>
+          )}
+
+          {/* Loading state (initial load only, not search refinement) */}
+          {loading && filteredOptions.length === 0 && !error && (
+            <div className="flex flex-col items-center gap-2 py-6" role="status" aria-live="polite">
+              <Loader2 className="size-6 animate-spin text-muted-foreground" />
+              <p className="text-sm text-muted-foreground">Loading…</p>
+            </div>
+          )}
+
+          {/* Options list */}
+          {!error && !(loading && filteredOptions.length === 0) && (
+            <div ref={listRef} className="max-h-64 overflow-y-auto px-1 pb-1" role="listbox">
+              {filteredOptions.length === 0 ? (
+                <div className="py-4 text-center">
+                  <p className="text-sm text-muted-foreground">
+                    No options found
+                  </p>
+                  {/* Quick-create entry */}
+                  {onCreateNew && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="mt-2 gap-1"
+                      type="button"
+                      onClick={() => {
+                        onCreateNew(searchQuery);
+                        setIsOpen(false);
+                      }}
+                    >
+                      <Plus className="size-4" />
+                      Create new
+                    </Button>
+                  )}
+                </div>
+              ) : (
+                <>
+                  {filteredOptions.map((option, idx) => {
+                    const isSelected = multiple
+                      ? (Array.isArray(value) ? value : []).includes(option.value)
+                      : value === option.value;
+                    const isActive = idx === activeIndex;
+
+                    return (
                       <button
+                        key={option.value}
+                        data-lookup-index={idx}
+                        role="option"
+                        aria-selected={isSelected}
+                        onClick={() => handleSelect(option)}
+                        className={`w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center justify-between ${
+                          isActive
+                            ? 'bg-accent text-accent-foreground'
+                            : isSelected
+                              ? 'bg-accent/50 text-accent-foreground'
+                              : ''
+                        }`}
                         type="button"
-                        className="w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center gap-1.5 text-muted-foreground"
-                        onClick={() => {
-                          onCreateNew(searchQuery);
-                          setIsOpen(false);
-                        }}
                       >
-                        <Plus className="size-3.5" />
-                        Create new{searchQuery ? ` "${searchQuery}"` : ''}
+                        <div className="min-w-0 flex-1">
+                          <span className="block truncate">{option.label}</span>
+                          {option.description && (
+                            <span className="block truncate text-xs text-muted-foreground">
+                              {option.description}
+                            </span>
+                          )}
+                        </div>
+                        {isSelected && (
+                          <Badge variant="default" className="ml-2 shrink-0">Selected</Badge>
+                        )}
                       </button>
-                    )}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        </DialogContent>
-      </Dialog>
+                    );
+                  })}
+                  {/* Show total count when fetched from DataSource */}
+                  {hasDataSource && totalCount > filteredOptions.length && (
+                    <p className="text-xs text-muted-foreground text-center py-2">
+                      Showing {filteredOptions.length} of {totalCount} results.
+                    </p>
+                  )}
+                  {/* "Show All Results" button — opens the full Record Picker (Level 2) */}
+                  {hasDataSource && totalCount > filteredOptions.length && (
+                    <button
+                      type="button"
+                      className="w-full text-center px-3 py-2 rounded-md text-sm font-medium text-primary hover:bg-accent flex items-center justify-center gap-1.5"
+                      onClick={() => {
+                        setIsOpen(false);
+                        setIsPickerOpen(true);
+                      }}
+                      data-testid="show-all-results"
+                    >
+                      <TableProperties className="size-3.5" />
+                      Show All Results ({totalCount})
+                    </button>
+                  )}
+                  {/* Quick-create entry (below results) */}
+                  {onCreateNew && (
+                    <button
+                      type="button"
+                      className="w-full text-left px-3 py-2 rounded-md text-sm hover:bg-accent flex items-center gap-1.5 text-muted-foreground"
+                      onClick={() => {
+                        onCreateNew(searchQuery);
+                        setIsOpen(false);
+                      }}
+                    >
+                      <Plus className="size-3.5" />
+                      Create new{searchQuery ? ` "${searchQuery}"` : ''}
+                    </button>
+                  )}
+                </>
+              )}
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+
+      {/* "Browse All" button — always visible when DataSource is available */}
+      {hasDataSource && (
+        <Button
+          variant="outline"
+          size="icon"
+          className="shrink-0"
+          type="button"
+          onClick={() => setIsPickerOpen(true)}
+          aria-label="Browse all records"
+          title="Browse all records"
+          data-testid="browse-all-records"
+        >
+          <TableProperties className="size-4" />
+        </Button>
+      )}
+      </div>
+
+      {/* Level 2: Full Record Picker Dialog */}
+      {hasDataSource && dataSource && referenceTo && (
+        <RecordPickerDialog
+          open={isPickerOpen}
+          onOpenChange={setIsPickerOpen}
+          title={lookupField?.label || 'Select'}
+          multiple={multiple}
+          dataSource={dataSource}
+          objectName={referenceTo}
+          columns={lookupColumns}
+          displayField={displayField}
+          idField={idField}
+          pageSize={lookupPageSize}
+          value={value}
+          onSelect={onChange}
+          onSelectRecords={handlePickerSelectRecords}
+          lookupFilters={lookupFilters}
+          cellRenderer={getCellRendererResolver()}
+          filterColumns={filterColumns}
+        />
+      )}
     </div>
   );
 }