@jmruthers/pace-core 0.5.105 → 0.5.107

package/docs/implementation-guides/data-tables.md

@@ -1248,6 +1248,396 @@ function UserManagement() {
 }
 ```
 
+## Editable Column Fields
+
+DataTable provides advanced editing capabilities for columns, including searchable and creatable select fields, grouped options, and customizable number inputs.
+
+### Select Fields with Search and Create
+
+Editable select columns support type-to-search functionality and the ability to create new options on-the-fly when needed.
+
+#### Basic Searchable Select
+
+Enable keyboard search in select dropdowns (enabled by default):
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'category',
+    header: 'Category',
+    editable: true,
+    fieldType: 'select',
+    fieldOptions: [
+      { value: 'fruit', label: 'Fruit' },
+      { value: 'vegetable', label: 'Vegetable' },
+      { value: 'grain', label: 'Grain' },
+    ],
+    selectSearchable: true, // Enable type-to-search (default: true)
+  }
+];
+```
+
+When `selectSearchable: true` is enabled (or not specified, as it defaults to true), users can:
+- Type to filter options in the dropdown
+- Navigate filtered results with keyboard arrows
+- See only matching options as they type
+
+#### Creatable Select Fields
+
+Enable creating new options when the desired option doesn't exist:
+
+```tsx
+const [categories, setCategories] = useState([
+  { value: 'fruit', label: 'Fruit' },
+  { value: 'vegetable', label: 'Vegetable' },
+]);
+
+const handleCreateCategory = useCallback(async (inputValue: string): Promise<string> => {
+  // Create the new category (e.g., via API call)
+  const newCategory = {
+    value: inputValue.toLowerCase().replace(/\s+/g, '-'),
+    label: inputValue,
+  };
+  
+  // Update your data source
+  setCategories(prev => [...prev, newCategory]);
+  
+  // Return the new value to be set in the cell
+  return newCategory.value;
+}, []);
+
+const columns = [
+  {
+    accessorKey: 'category',
+    header: 'Category',
+    editable: true,
+    fieldType: 'select',
+    fieldOptions: categories,
+    searchable: true,
+    creatable: true, // Enable creating new options
+    onCreateNew: handleCreateCategory, // Callback to create new item
+  }
+];
+```
+
+**How it works:**
+1. User clicks on a select field in edit mode
+2. User types text that doesn't match any existing option
+3. A "Create '[typed text]'" option appears at the bottom of the dropdown
+4. User clicks the create option
+5. `onCreateNew` callback is executed with the typed text
+6. The callback should create the new item and return its value
+7. The new value is set in the cell
+
+#### Complete Creatable Select Example
+
+```tsx
+import { useState, useCallback, useMemo } from 'react';
+import { DataTable } from '@jmruthers/pace-core';
+
+interface Item {
+  id: string;
+  name: string;
+  category: string;
+}
+
+function ItemsTable() {
+  const [items, setItems] = useState<Item[]>([
+    { id: '1', name: 'Apple', category: 'fruit' },
+    { id: '2', name: 'Banana', category: 'fruit' },
+    { id: '3', name: 'Carrot', category: 'vegetable' },
+  ]);
+
+  const [categories, setCategories] = useState([
+    { value: 'fruit', label: 'Fruit' },
+    { value: 'vegetable', label: 'Vegetable' },
+  ]);
+
+  const handleCreateCategory = useCallback(async (inputValue: string): Promise<string> => {
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    const newCategory = {
+      value: inputValue.toLowerCase().replace(/\s+/g, '-'),
+      label: inputValue,
+    };
+    
+    setCategories(prev => [...prev, newCategory]);
+    console.log(`Created new category: "${inputValue}"`);
+    
+    return newCategory.value;
+  }, []);
+
+  const columns = useMemo(() => [
+    {
+      id: 'name',
+      accessorKey: 'name',
+      header: 'Item Name',
+      sortable: true,
+      editable: true,
+    },
+    {
+      id: 'category',
+      accessorKey: 'category',
+      header: 'Category',
+      sortable: true,
+      editable: true,
+      fieldType: 'select',
+      fieldOptions: categories,
+      selectSearchable: true,
+      creatable: true,
+      onCreateNew: handleCreateCategory,
+    },
+  ], [categories, handleCreateCategory]);
+
+  return (
+    <DataTable
+      data={items}
+      columns={columns}
+      rbac={{ pageName: 'items' }}
+      features={{
+        editing: true,
+        sorting: true,
+      }}
+      onEditRow={(originalRow, newData) => {
+        setItems(prev => prev.map(item =>
+          item.id === originalRow.id ? { ...item, ...newData } : item
+        ));
+      }}
+      getRowId={(row) => row.id}
+    />
+  );
+}
+```
+
+### Grouped Select Options
+
+Organize select options into logical groups with labels and visual separators:
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'item',
+    header: 'Item',
+    editable: true,
+    fieldType: 'select',
+    fieldOptions: [
+      // Simple option
+      { value: 'all', label: 'All Items' },
+      
+      // Separator
+      { type: 'separator' },
+      
+      // Group with label
+      {
+        type: 'group',
+        label: 'Fruits',
+        items: [
+          { value: 'apple', label: 'Apple' },
+          { value: 'banana', label: 'Banana' },
+          { value: 'orange', label: 'Orange' },
+        ]
+      },
+      
+      // Another group
+      {
+        type: 'group',
+        label: 'Vegetables',
+        items: [
+          { value: 'carrot', label: 'Carrot' },
+          { value: 'broccoli', label: 'Broccoli' },
+        ]
+      },
+      
+      // Another separator
+      { type: 'separator' },
+      
+      // More simple options
+      { value: 'other', label: 'Other' },
+    ],
+    selectSearchable: true, // Search works across all groups
+  }
+];
+```
+
+**Features:**
+- **Groups**: Use `{ type: 'group', label: 'Group Name', items: [...] }` to organize related options
+- **Separators**: Use `{ type: 'separator' }` for visual separation between option groups
+- **Search**: Search functionality works across all groups and items
+- **Creatable**: Can be combined with `creatable: true` to allow creating new items
+
+### Select Dropdown Customization
+
+Customize the appearance and behavior of select dropdowns:
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'category',
+    header: 'Category',
+    editable: true,
+    fieldType: 'select',
+    fieldOptions: categories,
+    selectSearchable: true,
+    
+    // Limit dropdown height
+    selectMaxHeight: '12rem',
+    
+    // Add custom CSS classes
+    selectContentClassName: 'custom-select-dropdown',
+    
+    // Add inline styles
+    selectContentStyle: {
+      minWidth: '300px',
+    },
+  }
+];
+```
+
+### Number Input Fields
+
+Control the display of spinner arrows on number input fields:
+
+```tsx
+const columns = [
+  {
+    accessorKey: 'quantity',
+    header: 'Quantity',
+    editable: true,
+    fieldType: 'number',
+    
+    // Hide spinner arrows (default: true for DataTable)
+    hideNumberSpinners: true,
+  },
+  {
+    accessorKey: 'price',
+    header: 'Price',
+    editable: true,
+    fieldType: 'number',
+    
+    // Show spinner arrows
+    hideNumberSpinners: false,
+  }
+];
+```
+
+**Behavior:**
+- **Default**: Spinner arrows are hidden by default (`hideNumberSpinners: true`) for cleaner UX
+- **Show Spinners**: Set `hideNumberSpinners: false` to display native HTML5 number input spinners
+- **Applies to**: All number-related field types (number, currency, percentage)
+
+### Complete Editable Fields Example
+
+```tsx
+import { useState, useCallback, useMemo } from 'react';
+import { DataTable, type DataTableColumn } from '@jmruthers/pace-core';
+
+interface Product {
+  id: string;
+  name: string;
+  category: string;
+  price: number;
+  quantity: number;
+  status: string;
+}
+
+function ProductsTable() {
+  const [products, setProducts] = useState<Product[]>([...]);
+  
+  const [categories, setCategories] = useState([
+    { value: 'electronics', label: 'Electronics' },
+    { value: 'clothing', label: 'Clothing' },
+  ]);
+
+  const handleCreateCategory = useCallback(async (inputValue: string): Promise<string> => {
+    const newCategory = {
+      value: inputValue.toLowerCase().replace(/\s+/g, '-'),
+      label: inputValue,
+    };
+    setCategories(prev => [...prev, newCategory]);
+    return newCategory.value;
+  }, []);
+
+  const columns: DataTableColumn<Product>[] = useMemo(() => [
+    {
+      id: 'name',
+      accessorKey: 'name',
+      header: 'Product Name',
+      sortable: true,
+      editable: true,
+      fieldType: 'text',
+    },
+    {
+      id: 'category',
+      accessorKey: 'category',
+      header: 'Category',
+      sortable: true,
+      editable: true,
+      fieldType: 'select',
+      fieldOptions: [
+        { type: 'separator' },
+        {
+          type: 'group',
+          label: 'Existing Categories',
+          items: categories,
+        },
+      ],
+      selectSearchable: true,
+      creatable: true,
+      onCreateNew: handleCreateCategory,
+      selectMaxHeight: '12rem',
+    },
+    {
+      id: 'price',
+      accessorKey: 'price',
+      header: 'Price',
+      sortable: true,
+      editable: true,
+      fieldType: 'number',
+      hideNumberSpinners: true, // Clean appearance
+    },
+    {
+      id: 'quantity',
+      accessorKey: 'quantity',
+      header: 'Quantity',
+      sortable: true,
+      editable: true,
+      fieldType: 'number',
+      hideNumberSpinners: true,
+    },
+    {
+      id: 'status',
+      accessorKey: 'status',
+      header: 'Status',
+      editable: false, // Not editable
+    },
+  ], [categories, handleCreateCategory]);
+
+  return (
+    <DataTable
+      data={products}
+      columns={columns}
+      rbac={{ pageName: 'products' }}
+      features={{
+        editing: true,
+        sorting: true,
+        creation: true,
+      }}
+      onEditRow={(originalRow, newData) => {
+        setProducts(prev => prev.map(product =>
+          product.id === originalRow.id ? { ...product, ...newData } : product
+        ));
+      }}
+      onCreateRow={async (newData) => {
+        const newProduct = { ...newData, id: String(Date.now()) } as Product;
+        setProducts(prev => [...prev, newProduct]);
+      }}
+      getRowId={(row) => row.id}
+    />
+  );
+}
+```
+
 ## Export and Import
 
 DataTable provides seamless CSV export and import functionality with automatic column mapping and support for reference fields.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.5.105",
+  "version": "0.5.107",
   "description": "Clean, modern React component library with Tailwind v4 styling and native utilities",
   "private": false,
   "publishConfig": {

package/src/components/DataTable/DataTable.tsx

@@ -35,6 +35,10 @@
  * - ✅ **Column Visibility** - Show/hide columns dynamically
  * - ✅ **Column Reordering** - Drag and drop column reordering
  * - ✅ **Intelligent Virtual Scrolling** - Automatic performance optimization for large datasets
+ * - ✅ **Searchable Select Fields** - Type-to-search in select dropdowns within editable columns
+ * - ✅ **Creatable Select Fields** - Create new options on-the-fly when they don't exist
+ * - ✅ **Grouped Select Options** - Organize select options into groups with labels and separators
+ * - ✅ **Customizable Number Inputs** - Hide spinner arrows on number input fields for cleaner UX
  * - ✅ **Responsive Design** - Mobile-friendly responsive layout
  * - ✅ **Accessibility** - WCAG 2.1 AA compliant with keyboard navigation
  * - ✅ **TypeScript** - Full TypeScript support with strict typing

package/src/components/DataTable/__tests__/DataTableCore.test.tsx

@@ -688,16 +688,16 @@ describe('DataTableCore Component', () => {
   });
 
   describe('RBAC Integration', () => {
-    it.skip('renders access denied when user lacks permission', () => {
-      // Override the mock to return no read permission
-      mockUseDataTablePermissions.mockReturnValueOnce({
+    it('renders access denied when user lacks permission', () => {
+      // Override the mock to return no read permission (use mockReturnValue for all calls)
+      mockUseDataTablePermissions.mockReturnValue({
         permissions: {
-          canRead: { can: false },
-          canCreate: { can: true },
-          canUpdate: { can: true },
-          canDelete: { can: true },
-          canExport: { can: true },
-          canImport: { can: true },
+          canRead: { can: false, isLoading: false },
+          canCreate: { can: true, isLoading: false },
+          canUpdate: { can: true, isLoading: false },
+          canDelete: { can: true, isLoading: false },
+          canExport: { can: true, isLoading: false },
+          canImport: { can: true, isLoading: false },
         },
         secureFeatures: createFullFeatures(),
         effectivePageId: 'test-page',
@@ -713,7 +713,22 @@ describe('DataTableCore Component', () => {
         />
       );
 
-      expect(screen.getByText('Access Denied')).toBeInTheDocument();
+      // AccessDeniedPage renders "Access Denied" as an h2 heading
+      expect(screen.getByRole('heading', { name: /Access Denied/i })).toBeInTheDocument();
+      
+      // Restore mock after test
+      mockUseDataTablePermissions.mockReturnValue({
+        permissions: {
+          canRead: { can: true },
+          canCreate: { can: true },
+          canUpdate: { can: true },
+          canDelete: { can: true },
+          canExport: { can: true },
+          canImport: { can: true },
+        },
+        secureFeatures: createFullFeatures(),
+        effectivePageId: 'test-page',
+      });
     });
   });
 

package/src/components/DataTable/components/EditableRow.tsx

@@ -10,6 +10,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
+  SelectGroup,
+  SelectLabel,
+  SelectSeparator,
 } from '../../Select/Select';
 import type { CellValue, DataRecord, DataTableAction, EditableColumnDef } from '../types';
 
@@ -25,6 +28,167 @@ interface EditableRowProps<TData extends DataRecord> {
   hierarchical?: boolean;
 }
 
+// Component for select fields with searchable and creatable support
+function SelectEditField<TData extends DataRecord>({
+  columnDef,
+  accessorKey,
+  currentValue,
+  placeholder,
+  onChange,
+  className,
+}: {
+  columnDef: EditableColumnDef<TData>;
+  accessorKey: string;
+  currentValue: CellValue;
+  placeholder?: string;
+  onChange: (value: CellValue) => void;
+  className?: string;
+}) {
+  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={className || "w-full h-7"}>
+        <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>
+  );
+}
+
 const renderEditField = <TData extends DataRecord>(
   column: Column<TData, unknown>,
   value: CellValue,
@@ -44,21 +208,14 @@ const renderEditField = <TData extends DataRecord>(
     const currentValue = editingData[accessorKey] ?? value ?? '';
 
     return (
-      <Select
-        value={String(currentValue)}
-        onValueChange={(newValue) => onChange({ [accessorKey]: newValue as CellValue })}
-      >
-        <SelectTrigger className="w-full h-7">
-          <SelectValue placeholder={`Select ${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 })}
+        className="w-full h-7"
+      />
     );
   }
 
@@ -75,13 +232,14 @@ const renderEditField = <TData extends DataRecord>(
   }
 
   if (columnDef.fieldType === 'number') {
+    const hideSpinners = columnDef.hideNumberSpinners !== false; // Default to true
     return (
       <Input
         ref={inputRef}
         type="number"
         value={String(value ?? '')}
         onChange={(e) => onChange(e.target.value as unknown as CellValue)}
-        className="w-full h-7"
+        className={`w-full h-7 ${hideSpinners ? 'datatable-number-no-spinners' : ''}`}
       />
     );
   }