@optilogic/core 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@optilogic/core",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Core UI components for Optilogic - A professional React component library",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/combobox.tsx

@@ -0,0 +1,340 @@
+import * as React from "react";
+import { Check, ChevronDown, X } from "lucide-react";
+
+import { cn } from "../utils/cn";
+import { Popover, PopoverAnchor, PopoverContent } from "./popover";
+import type { AutocompleteOption } from "./autocomplete";
+
+export interface ComboboxProps {
+  /** Array of options to display */
+  options: AutocompleteOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Callback when selection changes */
+  onChange?: (value: string | undefined) => void;
+  /** Callback when the input text changes (for controlled/async filtering) */
+  onInputChange?: (input: string) => void;
+  /** Placeholder text when empty */
+  placeholder?: string;
+  /** Text to show when no options match */
+  emptyText?: string;
+  /** Whether the combobox is disabled */
+  disabled?: boolean;
+  /** Additional class name for the trigger */
+  className?: string;
+  /** Whether to allow clearing the selection */
+  clearable?: boolean;
+  /** Whether to allow custom values not in the options list */
+  allowCustomValue?: boolean;
+}
+
+/**
+ * Combobox component - a searchable input that also allows custom values
+ *
+ * Unlike Autocomplete (button trigger, select-only), Combobox uses an
+ * inline text input as the trigger. Users can type to filter options
+ * AND optionally commit custom values not in the list.
+ *
+ * Features:
+ * - Inline text input trigger
+ * - Dropdown opens on focus/typing
+ * - Grouped options with descriptions
+ * - Custom value support (allowCustomValue)
+ * - Clearable selection
+ * - Async filtering via onInputChange
+ *
+ * @example
+ * <Combobox
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Type or select..."
+ *   allowCustomValue
+ * />
+ */
+export function Combobox({
+  options,
+  value,
+  onChange,
+  onInputChange,
+  placeholder = "Type or select...",
+  emptyText = "No options found.",
+  disabled = false,
+  className,
+  clearable = false,
+  allowCustomValue = true,
+}: ComboboxProps) {
+  const [open, setOpen] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState("");
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const wrapperRef = React.useRef<HTMLDivElement>(null);
+
+  // Sync input display with selected value
+  const selectedOption = React.useMemo(
+    () => options.find((opt) => opt.value === value),
+    [options, value]
+  );
+
+  // When value changes externally, update input display
+  React.useEffect(() => {
+    if (!open) {
+      setInputValue(selectedOption?.label ?? value ?? "");
+    }
+  }, [value, selectedOption, open]);
+
+  // Filter options based on input
+  const filteredOptions = React.useMemo(() => {
+    if (!inputValue.trim()) return options;
+    const searchLower = inputValue.toLowerCase();
+    return options.filter(
+      (opt) =>
+        opt.label.toLowerCase().includes(searchLower) ||
+        opt.description?.toLowerCase().includes(searchLower)
+    );
+  }, [options, inputValue]);
+
+  // Group options
+  const groupedOptions = React.useMemo(() => {
+    const groups: Record<string, AutocompleteOption[]> = {};
+    const ungrouped: AutocompleteOption[] = [];
+
+    filteredOptions.forEach((opt) => {
+      if (opt.group) {
+        if (!groups[opt.group]) groups[opt.group] = [];
+        groups[opt.group]!.push(opt);
+      } else {
+        ungrouped.push(opt);
+      }
+    });
+
+    return { groups, ungrouped };
+  }, [filteredOptions]);
+
+  const hasGroups = Object.keys(groupedOptions.groups).length > 0;
+
+  const handleInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      onInputChange?.(newValue);
+      if (!open) setOpen(true);
+    },
+    [onInputChange, open]
+  );
+
+  const handleSelect = React.useCallback(
+    (optionValue: string) => {
+      const option = options.find((o) => o.value === optionValue);
+      onChange?.(optionValue);
+      setInputValue(option?.label ?? optionValue);
+      setOpen(false);
+    },
+    [onChange, options]
+  );
+
+  const handleClear = React.useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      onChange?.(undefined);
+      setInputValue("");
+      inputRef.current?.focus();
+    },
+    [onChange]
+  );
+
+  const handleFocus = React.useCallback(() => {
+    setOpen(true);
+    // Select all text on focus for easy replacement
+    inputRef.current?.select();
+  }, []);
+
+  const handleBlur = React.useCallback(() => {
+    // Delay to allow click events on options to fire
+    setTimeout(() => {
+      // If focus moved outside the wrapper entirely, close
+      if (!wrapperRef.current?.contains(document.activeElement)) {
+        setOpen(false);
+      }
+
+      if (allowCustomValue && inputValue.trim()) {
+        // Check if input matches an existing option label
+        const matchingOption = options.find(
+          (opt) => opt.label.toLowerCase() === inputValue.toLowerCase()
+        );
+        if (matchingOption) {
+          onChange?.(matchingOption.value);
+          setInputValue(matchingOption.label);
+        } else {
+          // Commit custom value
+          onChange?.(inputValue.trim());
+        }
+      } else if (!allowCustomValue) {
+        // Reset to selected option or clear
+        setInputValue(selectedOption?.label ?? "");
+      }
+    }, 200);
+  }, [allowCustomValue, inputValue, options, onChange, selectedOption]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        setInputValue(selectedOption?.label ?? value ?? "");
+        inputRef.current?.blur();
+      } else if (e.key === "Enter" && open) {
+        e.preventDefault();
+        // If there's exactly one filtered option, select it
+        if (filteredOptions.length === 1) {
+          handleSelect(filteredOptions[0]!.value);
+        } else if (allowCustomValue && inputValue.trim()) {
+          // Check for exact match first
+          const exactMatch = filteredOptions.find(
+            (opt) => opt.label.toLowerCase() === inputValue.toLowerCase()
+          );
+          if (exactMatch) {
+            handleSelect(exactMatch.value);
+          } else {
+            onChange?.(inputValue.trim());
+            setOpen(false);
+          }
+        }
+      }
+    },
+    [
+      open,
+      filteredOptions,
+      handleSelect,
+      allowCustomValue,
+      inputValue,
+      onChange,
+      selectedOption,
+      value,
+    ]
+  );
+
+  const renderOption = (option: AutocompleteOption) => (
+    <button
+      key={option.value}
+      type="button"
+      disabled={option.disabled}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={() => handleSelect(option.value)}
+      className={cn(
+        "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm px-2 py-1.5 text-sm outline-none",
+        "hover:bg-accent hover:text-accent-foreground",
+        "focus:bg-accent focus:text-accent-foreground",
+        option.disabled && "pointer-events-none opacity-50",
+        value === option.value && "bg-accent/50"
+      )}
+    >
+      <span className="flex h-4 w-4 items-center justify-center flex-shrink-0 mt-0.5">
+        {value === option.value && <Check className="h-4 w-4" />}
+      </span>
+      <div className="flex-1 min-w-0">
+        <div className="truncate">{option.label}</div>
+        {option.description && (
+          <div className="text-xs text-muted-foreground truncate">
+            {option.description}
+          </div>
+        )}
+      </div>
+    </button>
+  );
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverAnchor asChild>
+        <div
+          ref={wrapperRef}
+          className={cn(
+            "flex h-9 w-full items-center gap-2 rounded-md border border-input bg-transparent px-3 text-sm shadow-sm ring-offset-background",
+            "hover:border-input-hover",
+            "focus-within:outline-none focus-within:ring-1 focus-within:ring-ring",
+            disabled &&
+              "cursor-not-allowed opacity-50 hover:border-input",
+            className
+          )}
+        >
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={handleInputChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            className="flex-1 min-w-0 bg-transparent py-2 outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+            role="combobox"
+            aria-expanded={open}
+            aria-haspopup="listbox"
+            aria-autocomplete="list"
+          />
+          <div className="flex items-center gap-1 flex-shrink-0">
+            {clearable && value && (
+              <span
+                role="button"
+                tabIndex={-1}
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={handleClear}
+                className="rounded-sm hover:bg-muted p-0.5"
+              >
+                <X className="h-3.5 w-3.5 text-muted-foreground" />
+              </span>
+            )}
+            <ChevronDown className="h-4 w-4 opacity-50" />
+          </div>
+        </div>
+      </PopoverAnchor>
+      <PopoverContent
+        className="p-0"
+        style={{ width: wrapperRef.current?.offsetWidth }}
+        align="start"
+        sideOffset={4}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+        onFocusOutside={(e) => {
+          if (wrapperRef.current?.contains(e.target as Node)) {
+            e.preventDefault();
+          }
+        }}
+        onInteractOutside={(e) => {
+          if (wrapperRef.current?.contains(e.target as Node)) {
+            e.preventDefault();
+          }
+        }}
+      >
+        {/* Options list */}
+        <div className="max-h-[300px] overflow-y-auto p-1">
+          {filteredOptions.length === 0 ? (
+            <div className="py-6 text-center text-sm text-muted-foreground">
+              {emptyText}
+            </div>
+          ) : hasGroups ? (
+            <>
+              {groupedOptions.ungrouped.map(renderOption)}
+              {Object.entries(groupedOptions.groups).map(([group, opts]) => (
+                <div key={group}>
+                  <div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                    {group}
+                  </div>
+                  {opts.map(renderOption)}
+                </div>
+              ))}
+            </>
+          ) : (
+            filteredOptions.map(renderOption)
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+Combobox.displayName = "Combobox";
+
+export default Combobox;

package/src/components/data-grid/DataGrid.tsx

@@ -89,6 +89,7 @@ export function DataGrid<T = Record<string, CellValue>>({
   tooltipMinLength = 30,
   enableKeyboardNavigation = true,
   showColumnBorders = true,
+  fillWidth,
   enableInternalSorting = true,
   enableInternalFiltering = true,
 
@@ -163,6 +164,19 @@ export function DataGrid<T = Record<string, CellValue>>({
     y: number;
   } | null>(null);
 
+  // Measure container width for fillWidth mode
+  const [containerWidth, setContainerWidth] = React.useState(0);
+
+  React.useLayoutEffect(() => {
+    if (!fillWidth || !parentRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setContainerWidth(w);
+    });
+    observer.observe(parentRef.current);
+    return () => observer.disconnect();
+  }, [fillWidth]);
+
   // Filter visible columns
   const visibleColumns = React.useMemo(
     () => columns.filter((col) => !col.hidden),
@@ -232,16 +246,6 @@ export function DataGrid<T = Record<string, CellValue>>({
   // Keep the state hook's ref in sync so editing resolves the correct row
   processedDataRef.current = processedData;
 
-  // Use column resize manager
-  const { resizingColumn, getResizeProps } = useColumnResizeManager({
-    columns: visibleColumns,
-    columnWidths: state.columnWidths,
-    resizableColumns,
-    onColumnResize: actions.setColumnWidth,
-    onColumnResizeStart,
-    onColumnResizeEnd,
-  });
-
   // Auto-enable virtualization for large datasets
   const shouldVirtualize = virtualized ?? processedData.length > 100;
 
@@ -261,13 +265,47 @@ export function DataGrid<T = Record<string, CellValue>>({
     enabled: shouldVirtualize,
   });
 
-  // Calculate table width - prefer explicit widths, fall back to estimated width from header
-  const tableWidth = React.useMemo(() => {
-    return visibleColumns.reduce((acc, col) => {
-      const width = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
-      return acc + width;
-    }, 0);
-  }, [visibleColumns, state.columnWidths]);
+  // Calculate table width and effective column widths (with fillWidth scaling)
+  const { tableWidth, effectiveColumnWidths } = React.useMemo(() => {
+    // 1. Collect raw widths
+    const rawWidths: Record<string, number> = {};
+    let rawTotal = 0;
+    for (const col of visibleColumns) {
+      const w = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
+      rawWidths[col.key] = w;
+      rawTotal += w;
+    }
+
+    // 2. If fillWidth off or container not measured, use raw widths
+    if (!fillWidth || !containerWidth || rawTotal >= containerWidth) {
+      return { tableWidth: rawTotal, effectiveColumnWidths: rawWidths };
+    }
+
+    // 3. Scale proportionally to fill container, respecting minWidth/maxWidth
+    const scale = containerWidth / rawTotal;
+    const scaled: Record<string, number> = {};
+    for (const col of visibleColumns) {
+      let w = Math.floor(rawWidths[col.key] * scale);
+      if (col.minWidth) w = Math.max(w, col.minWidth);
+      if (col.maxWidth) w = Math.min(w, col.maxWidth);
+      scaled[col.key] = w;
+    }
+
+    return { tableWidth: containerWidth, effectiveColumnWidths: scaled };
+  }, [visibleColumns, state.columnWidths, fillWidth, containerWidth]);
+
+  // Use column resize manager
+  const { resizingColumn, getResizeProps } = useColumnResizeManager({
+    columns: visibleColumns,
+    columnWidths: state.columnWidths,
+    resizableColumns,
+    onColumnResize: actions.setColumnWidth,
+    onColumnResizeStart,
+    onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths,
+  });
 
   // Get visible row count for keyboard navigation
   const visibleRowCount = React.useMemo(() => {
@@ -577,7 +615,7 @@ export function DataGrid<T = Record<string, CellValue>>({
               role="row"
             >
               {visibleColumns.map((column, colIndex) => {
-                const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                const width = effectiveColumnWidths[column.key];
                 const resizeProps = getResizeProps(column.key);
 
                 return (
@@ -591,6 +629,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                     isResizable={
                       resizableColumns && column.resizable !== false
                     }
+                    fillWidth={fillWidth}
                     onSort={() => handleSort(column.key)}
                     onFilterChange={(filter) =>
                       handleFilterChange(column.key, filter)
@@ -646,7 +685,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                 >
                   {visibleColumns.map((column, colIndex) => {
                     const width =
-                      state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                      effectiveColumnWidths[column.key];
                     const isEditingThisCell =
                       state.editingCell?.rowIndex === virtualRow.index &&
                       state.editingCell?.columnKey === column.key;
@@ -671,7 +710,8 @@ export function DataGrid<T = Record<string, CellValue>>({
                         <div
                           key={column.key}
                           className={cn(
-                            "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                            "px-3 py-2 text-sm overflow-hidden",
+                            !fillWidth && "flex-shrink-0",
                             showColumnBorders && "border-r border-border last:border-r-0",
                             isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                             isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",
@@ -799,7 +839,7 @@ export function DataGrid<T = Record<string, CellValue>>({
         </div>
       )}
 
-      <div className="flex-1 overflow-auto min-h-0">
+      <div ref={parentRef} className="flex-1 overflow-auto min-h-0">
         {/* Header row using HeaderCell for consistent features */}
         <div
           className={cn(
@@ -810,7 +850,7 @@ export function DataGrid<T = Record<string, CellValue>>({
           role="row"
         >
           {visibleColumns.map((column, colIndex) => {
-            const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+            const width = effectiveColumnWidths[column.key];
             const resizeProps = getResizeProps(column.key);
 
             return (
@@ -822,6 +862,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                 sorting={getColumnSort(column.key)}
                 filter={getColumnFilter(column.key)}
                 isResizable={resizableColumns && column.resizable !== false}
+                fillWidth={fillWidth}
                 onSort={() => handleSort(column.key)}
                 onFilterChange={(filter) => handleFilterChange(column.key, filter)}
                 onResizeMouseDown={resizeProps.handleMouseDown}
@@ -853,7 +894,7 @@ export function DataGrid<T = Record<string, CellValue>>({
                 role="row"
               >
                 {visibleColumns.map((column) => {
-                  const width = state.columnWidths[column.key] || column.width || estimateColumnWidth(column);
+                  const width = effectiveColumnWidths[column.key];
                   const isEditingThisCell =
                     state.editingCell?.rowIndex === rowIndex &&
                     state.editingCell?.columnKey === column.key;
@@ -865,7 +906,8 @@ export function DataGrid<T = Record<string, CellValue>>({
                     <div
                       key={column.key}
                       className={cn(
-                        "flex-shrink-0 px-3 py-2 text-sm overflow-hidden",
+                        "px-3 py-2 text-sm overflow-hidden",
+                        !fillWidth && "flex-shrink-0",
                         showColumnBorders && "border-r border-border last:border-r-0",
                         isFocused && !isEditingThisCell && "ring-2 ring-inset ring-primary",
                         isEditingThisCell && "ring-2 ring-inset ring-primary bg-background",

package/src/components/data-grid/components/HeaderCell.tsx

@@ -28,6 +28,8 @@ export interface HeaderCellProps<T = any> {
   filter?: FilterConfig;
   /** Whether this column is resizable */
   isResizable: boolean;
+  /** Whether fillWidth mode is active */
+  fillWidth?: boolean;
   /** Callback when sort is toggled */
   onSort?: () => void;
   /** Callback when filter changes */
@@ -50,6 +52,7 @@ export function HeaderCell<T = any>({
   sorting,
   filter,
   isResizable,
+  fillWidth,
   onSort,
   onFilterChange,
   onResizeMouseDown,
@@ -101,7 +104,8 @@ export function HeaderCell<T = any>({
   return (
     <div
       className={cn(
-        "relative flex-shrink-0 border-r border-border last:border-r-0",
+        "relative border-r border-border last:border-r-0",
+        !fillWidth && "flex-shrink-0",
         "bg-muted select-none",
         isResizing && "bg-accent/20"
       )}

package/src/components/data-grid/hooks/useColumnResize.ts

@@ -212,6 +212,12 @@ export interface UseColumnResizeManagerOptions<T = any> {
   onColumnResizeStart?: (columnKey: string) => void;
   /** Callback when resize ends */
   onColumnResizeEnd?: (columnKey: string, width: number) => void;
+  /** Whether fillWidth mode is active */
+  fillWidth?: boolean;
+  /** Measured container width for fillWidth redistribution */
+  containerWidth?: number;
+  /** Effective column widths (after fillWidth scaling) */
+  effectiveColumnWidths?: Record<string, number>;
 }
 
 export interface UseColumnResizeManagerReturn {
@@ -238,11 +244,15 @@ export function useColumnResizeManager<T = any>(
     onColumnResize,
     onColumnResizeStart,
     onColumnResizeEnd,
+    fillWidth,
+    containerWidth,
+    effectiveColumnWidths,
   } = options;
 
   const [resizingColumn, setResizingColumn] = useState<string | null>(null);
   const startXRef = useRef(0);
   const startWidthRef = useRef(0);
+  const startEffectiveWidthsRef = useRef<Record<string, number>>({});
 
   /**
    * Get column by key
@@ -280,9 +290,22 @@ export function useColumnResizeManager<T = any>(
         startWidthRef.current + deltaX
       );
 
+      if (fillWidth && containerWidth) {
+        const otherCols = columns.filter(c => c.key !== resizingColumn);
+        const startEffective = startEffectiveWidthsRef.current;
+        const otherTotal = otherCols.reduce((s, c) => s + (startEffective[c.key] || 0), 0);
+        const remaining = containerWidth - newWidth;
+
+        for (const col of otherCols) {
+          const proportion = (startEffective[col.key] || 0) / otherTotal;
+          const adjusted = clampWidth(col.key, Math.floor(remaining * proportion));
+          onColumnResize(col.key, adjusted);
+        }
+      }
+
       onColumnResize(resizingColumn, newWidth);
     },
-    [resizingColumn, clampWidth, onColumnResize]
+    [resizingColumn, clampWidth, onColumnResize, fillWidth, containerWidth, columns]
   );
 
   /**
@@ -336,6 +359,10 @@ export function useColumnResizeManager<T = any>(
         document.body.style.cursor = "col-resize";
 
         onColumnResizeStart?.(columnKey);
+
+        if (fillWidth && effectiveColumnWidths) {
+          startEffectiveWidthsRef.current = { ...effectiveColumnWidths };
+        }
       };
 
       const handleDoubleClick = (event: React.MouseEvent) => {
@@ -368,6 +395,8 @@ export function useColumnResizeManager<T = any>(
       onColumnResize,
       onColumnResizeStart,
       onColumnResizeEnd,
+      fillWidth,
+      effectiveColumnWidths,
     ]
   );
 

package/src/components/data-grid/types.ts

@@ -282,6 +282,10 @@ export interface DataGridProps<T = Record<string, CellValue>> {
   tooltipMinLength?: number;
   /** Show column dividing borders between cells (default: true) */
   showColumnBorders?: boolean;
+  /** When true, columns scale proportionally to fill the container width.
+   *  Columns shrink/grow to keep total width = container width.
+   *  Horizontal scroll only kicks in if columns hit their minWidth constraints. */
+  fillWidth?: boolean;
   /** Enable internal sorting when in uncontrolled mode (default: true) */
   enableInternalSorting?: boolean;
   /** Enable internal filtering when in uncontrolled mode (default: true) */
@@ -436,6 +440,7 @@ export interface HeaderCellProps<T = Record<string, CellValue>> {
   sorting?: SortConfig;
   filter?: FilterConfig;
   isResizable: boolean;
+  fillWidth?: boolean;
   onSort?: () => void;
   onFilterChange?: (filter: FilterConfig | null) => void;
   onResize?: (width: number) => void;