@jmruthers/pace-core 0.5.105 → 0.5.107

package/src/components/DataTable/components/UnifiedTableBody.tsx

@@ -21,7 +21,7 @@ import { ActionButtons } from './ActionButtons';
 import { EditableRow } from './EditableRow';
 import { getTableCellClasses, getTableHeadClasses, getTableRowClasses } from '../styles';
 import { Input } from '../../Input/Input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectGroup, SelectLabel, SelectSeparator } from '../../Select/Select';
 import type {
   AggregateConfig,
   DataRecord,
@@ -120,6 +120,165 @@ interface UnifiedTableBodyProps<TData extends DataRecord> {
   };
 }
 
+// Component for select fields with searchable and creatable support
+function SelectEditField<TData extends DataRecord>({
+  columnDef,
+  accessorKey,
+  currentValue,
+  placeholder,
+  onChange,
+}: {
+  columnDef: EditableColumnDef<TData>;
+  accessorKey: string;
+  currentValue: CellValue;
+  placeholder?: string;
+  onChange: (value: CellValue) => void;
+}) {
+  const isSearchable = columnDef.selectSearchable !== false; // Default to true for better UX
+  const isCreatable = columnDef.creatable === true;
+  const selectRef = React.useRef<HTMLFormElement>(null);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [showCreateOption, setShowCreateOption] = React.useState(false);
+
+  // Monitor search input value via DOM events to detect when user types
+  React.useEffect(() => {
+    if (!isOpen || !isSearchable || !isCreatable || !selectRef.current) return;
+    
+    const searchInput = selectRef.current.querySelector<HTMLInputElement>('[data-testid="select-search-input"]');
+    if (!searchInput) return;
+
+    const handleInput = (e: Event) => {
+      const target = e.target as HTMLInputElement;
+      const currentSearch = target.value;
+      setSearchTerm(currentSearch);
+      
+      // Check if search doesn't match any option (including items in groups)
+      if (currentSearch.trim()) {
+        const searchLower = currentSearch.toLowerCase().trim();
+        
+        // Helper to check if an option matches
+        // Use explicit union type instead of typeof to avoid Babel parsing issues
+        type FieldOption = 
+          | { value: string | number; label: string }
+          | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }
+          | { type: 'separator' };
+        
+        const checkMatch = (opt: FieldOption): boolean => {
+          // Simple option
+          if ('value' in opt && !('type' in opt)) {
+            return opt.label.toLowerCase().includes(searchLower);
+          }
+          // Group - check items within the group
+          if ('type' in opt && opt.type === 'group') {
+            return (opt as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> }).items.some((item: { value: string | number; label: string }) => item.label.toLowerCase().includes(searchLower));
+          }
+          // Separator - doesn't match
+          return false;
+        };
+        
+        const hasMatch = (columnDef.fieldOptions || []).some(checkMatch);
+        setShowCreateOption(!hasMatch);
+      } else {
+        setShowCreateOption(false);
+      }
+    };
+
+    searchInput.addEventListener('input', handleInput);
+    
+    return () => {
+      searchInput.removeEventListener('input', handleInput);
+    };
+  }, [isOpen, isSearchable, isCreatable, columnDef.fieldOptions]);
+
+  const handleCreateNew = React.useCallback(async () => {
+    if (!isCreatable || !columnDef.onCreateNew || !searchTerm.trim()) return;
+    
+    try {
+      const newValue = await columnDef.onCreateNew(searchTerm.trim());
+      onChange(newValue);
+      setSearchTerm('');
+      setShowCreateOption(false);
+    } catch (error) {
+      console.error('Error creating new item:', error);
+    }
+  }, [isCreatable, columnDef.onCreateNew, searchTerm, onChange]);
+
+  return (
+    <Select
+      ref={selectRef}
+      value={String(currentValue)}
+      onValueChange={(newValue) => {
+        if (newValue.startsWith('__create_new__')) {
+          handleCreateNew();
+        } else {
+          onChange(newValue as CellValue);
+        }
+      }}
+      onOpenChange={(open) => {
+        setIsOpen(open);
+        if (!open) {
+          setSearchTerm('');
+          setShowCreateOption(false);
+        }
+      }}
+    >
+      <SelectTrigger className="h-8">
+        <SelectValue placeholder={placeholder || `Select ${columnDef.header || 'option'}...`} />
+      </SelectTrigger>
+      <SelectContent 
+        searchable={isSearchable}
+        searchPlaceholder={`Search ${columnDef.header || 'options'}...`}
+        maxHeight={columnDef.selectMaxHeight}
+        className={columnDef.selectContentClassName}
+        style={columnDef.selectContentStyle}
+      >
+        {columnDef.fieldOptions?.map((option, index) => {
+          // Simple option item
+          if ('value' in option && !('type' in option)) {
+            return (
+              <SelectItem key={`${option.value}-${index}`} value={String(option.value)}>
+                {option.label}
+              </SelectItem>
+            );
+          }
+          
+          // Separator
+          if ('type' in option && option.type === 'separator') {
+            return <SelectSeparator key={`separator-${index}`} />;
+          }
+          
+          // Group with label
+          if ('type' in option && option.type === 'group') {
+            const groupOption = option as { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> };
+            return (
+              <SelectGroup key={`group-${groupOption.label}-${index}`}>
+                <SelectLabel>{groupOption.label}</SelectLabel>
+                {groupOption.items.map((item: { value: string | number; label: string }) => (
+                  <SelectItem key={`${item.value}-${index}`} value={String(item.value)}>
+                    {item.label}
+                  </SelectItem>
+                ))}
+              </SelectGroup>
+            );
+          }
+          
+          return null;
+        })}
+        {showCreateOption && isCreatable && searchTerm.trim() && (
+          <SelectItem 
+            key="__create_new__" 
+            value={`__create_new__${searchTerm}`}
+            className="bg-main-100 font-medium border-t border-main-200"
+          >
+            Create "{searchTerm}"
+          </SelectItem>
+        )}
+      </SelectContent>
+    </Select>
+  );
+}
+
 // Helper function to render the appropriate input type based on column configuration
 const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
@@ -143,33 +302,26 @@ const renderEditField = <TData extends DataRecord>(
     const currentValue = editingData[accessorKey] ?? value ?? '';
 
     return (
-      <Select
-        value={String(currentValue)}
-        onValueChange={(newValue) => onChange({ [accessorKey]: newValue as CellValue })}
-      >
-        <SelectTrigger className="h-8">
-          <SelectValue placeholder={placeholder || `Select ${columnDef.header || column.id}...`} />
-        </SelectTrigger>
-        <SelectContent>
-          {columnDef.fieldOptions.map(option => (
-            <SelectItem key={option.value} value={String(option.value)}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
+      <SelectEditField
+        columnDef={columnDef}
+        accessorKey={accessorKey}
+        currentValue={currentValue}
+        placeholder={placeholder}
+        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
+      />
     );
   }
   
   // Check for number type
   if (columnDef.fieldType === 'number') {
+    const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
     return (
       <Input
         type="number"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
         placeholder={placeholder || `Enter ${columnDef.header || column.id}...`}
-        className="h-8"
+        className={`h-8 ${hideSpinners ? 'datatable-number-no-spinners' : ''}`}
       />
     );
   }
@@ -709,24 +861,42 @@ export function UnifiedTableBody<TData extends Record<string, any>>({
                 ? header.column.getIsVisible() 
                 : true;
             })
-            ?.filter(header => header.column.id !== 'actions' && header.column.id !== 'select')
-            ?.map((header) => (
-              <td 
-                key={header.column.id} 
-                className={getTableCellClasses({
-                  isCompact: true,
-                  className: "px-3 py-2"
-                })}
-              >
-                {renderEditField(header.column, creationData[header.column.id], (value) => {
-                  if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
-                    onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
-                  } else {
-                    onCreationDataChange({ ...creationData, [header.column.id]: value as CellValue });
-                  }
-                }, creationData)}
-              </td>
-            ))}
+            ?.filter(header => header.column.id !== 'actions') // Only exclude actions column
+            ?.map((header) => {
+              // Handle select column separately - render empty checkbox cell for alignment
+              if (header.column.id === 'select') {
+                return (
+                  <td 
+                    key={header.column.id} 
+                    className={getTableCellClasses({
+                      isCompact: true,
+                      className: "px-3 py-2"
+                    })}
+                  >
+                    {/* Empty cell for selection checkbox to maintain alignment */}
+                  </td>
+                );
+              }
+              
+              // Render edit fields for data columns
+              return (
+                <td 
+                  key={header.column.id} 
+                  className={getTableCellClasses({
+                    isCompact: true,
+                    className: "px-3 py-2"
+                  })}
+                >
+                  {renderEditField(header.column, creationData[header.column.id], (value) => {
+                    if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
+                      onCreationDataChange({ ...creationData, ...(value as Record<string, CellValue>) });
+                    } else {
+                      onCreationDataChange({ ...creationData, [header.column.id]: value as CellValue });
+                    }
+                  }, creationData)}
+                </td>
+              );
+            })}
           <td 
             className={getTableCellClasses({
               isCompact: true,

package/src/components/DataTable/types.ts

@@ -292,8 +292,26 @@ export interface DataTableColumn<TData extends DataRecord = DataRecord> extends
   memoizedCell?: React.ComponentType<{ row: TData }>;
   /** Field type for editing (text, select, date, etc.) */
   fieldType?: 'text' | 'select' | 'date' | 'number' | 'boolean';
-  /** Options for select fields */
-  fieldOptions?: Array<{ value: string | number; label: string }>;
+  /** Options for select fields - can be simple items or grouped with labels and separators */
+  fieldOptions?: Array<
+    | { value: string | number; label: string } // Simple option
+    | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> } // Group with label
+    | { type: 'separator' } // Visual separator
+  >;
+  /** Enable keyboard search/filtering in select dropdowns within editable columns (default: true). When fieldType is 'select', this controls dropdown searchability, not global search. */
+  selectSearchable?: boolean;
+  /** Enable creating new items in select dropdowns (default: false) */
+  creatable?: boolean;
+  /** Callback to create a new item when user types non-matching text in select dropdown */
+  onCreateNew?: (inputValue: string) => Promise<string | number> | string | number;
+  /** Maximum height for select dropdown content (default: "20rem") */
+  selectMaxHeight?: string;
+  /** Custom className for select content dropdown */
+  selectContentClassName?: string;
+  /** Custom style for select content dropdown */
+  selectContentStyle?: React.CSSProperties;
+  /** Hide spinner arrows on number input fields (default: true for DataTable) */
+  hideNumberSpinners?: boolean;
   /** Filter type for column filtering (text, select, number, date) */
   filterType?: 'text' | 'select' | 'number' | 'date';
   /** Options for select filters (alternative to fieldOptions) */
@@ -320,8 +338,20 @@ export interface EditableColumnDef<TData extends DataRecord = DataRecord> extend
   editable?: boolean;
   /** Field type used to determine edit control */
   fieldType?: 'text' | 'select' | 'date' | 'number' | 'boolean';
-  /** Options for select based editors */
-  fieldOptions?: Array<{ value: string | number; label: string }>;
+  /** Options for select based editors - can be simple items or grouped with labels and separators */
+  fieldOptions?: Array<
+    | { value: string | number; label: string } // Simple option
+    | { type: 'group'; label: string; items: Array<{ value: string | number; label: string }> } // Group with label
+    | { type: 'separator' } // Visual separator
+  >;
+  /** Enable keyboard search/filtering in select dropdowns (inherits from DataTableColumn.selectSearchable) */
+  selectSearchable?: boolean;
+  /** Enable creating new items in select dropdowns */
+  creatable?: boolean;
+  /** Callback to create a new item when user types non-matching text */
+  onCreateNew?: (inputValue: string) => Promise<string | number> | string | number;
+  /** Hide spinner arrows on number input fields */
+  hideNumberSpinners?: boolean;
 }
 
 /**