@alaarab/ogrid-js 2.3.0 → 2.4.1

package/dist/types/OGrid.d.ts

@@ -120,6 +120,13 @@ export declare class OGrid<T> {
     private cellEditor;
     private contextMenu;
     private layoutState;
+    private formulaEngine;
+    private formulaBar;
+    private formulaBarContainer;
+    /** Tracks the text currently displayed/edited in the formula bar. */
+    private formulaBarText;
+    /** Whether the formula bar input is currently in editing mode. */
+    private formulaBarEditing;
     private events;
     private unsubscribes;
     private containerEl;
@@ -145,6 +152,11 @@ export declare class OGrid<T> {
     private startCellEdit;
     private buildFilterConfigs;
     private handleFilterIconClick;
+    /** Build a grid data accessor for the formula engine from current state. */
+    private buildFormulaAccessor;
+    private handleFormulaBarCommit;
+    private handleFormulaBarCancel;
+    private handleFormulaBarStartEditing;
     /** Subscribe to grid events. */
     on<K extends keyof OGridEvents<T>>(event: K, handler: (data: OGridEvents<T>[K]) => void): void;
     /** Unsubscribe from grid events. */

package/dist/types/components/FormulaBar.d.ts

@@ -0,0 +1,37 @@
+/**
+ * FormulaBar — DOM-based Excel-style formula bar for the vanilla JS grid.
+ *
+ * Layout: [Name Box] [fx] [Formula Input]
+ *
+ * Uses --ogrid-* CSS variables for theming. Matches the React FormulaBar
+ * component behavior exactly.
+ */
+export interface FormulaBarCallbacks {
+    /** Called when the user presses Enter to commit the formula/value. */
+    onCommit: () => void;
+    /** Called when the user presses Escape to cancel editing. */
+    onCancel: () => void;
+    /** Called when the input text changes. */
+    onInputChange: (text: string) => void;
+    /** Called when the user clicks the input to start editing. */
+    onStartEditing: () => void;
+}
+export declare class FormulaBar {
+    private el;
+    private nameBoxEl;
+    private inputEl;
+    private isEditing;
+    private callbacks;
+    constructor(callbacks: FormulaBarCallbacks);
+    /** Create the formula bar DOM and append it to the given container. */
+    mount(container: HTMLElement): void;
+    /** Update the formula bar display with the current active cell ref and formula text. */
+    update(cellRef: string | null, formulaText: string): void;
+    /** Set editing state. When true, the input becomes editable and receives focus. */
+    setEditing(editing: boolean): void;
+    /** Remove the formula bar from the DOM and clean up event listeners. */
+    destroy(): void;
+    private handleKeyDown;
+    private handleInput;
+    private handleClick;
+}

package/dist/types/index.d.ts

@@ -34,3 +34,5 @@ export { FormulaEngineState } from './state/FormulaEngineState';
 export type { FormulaEngineStateOptions } from './state/FormulaEngineState';
 export { SideBar } from './components/SideBar';
 export { HeaderFilter } from './components/HeaderFilter';
+export { FormulaBar } from './components/FormulaBar';
+export type { FormulaBarCallbacks } from './components/FormulaBar';

package/dist/types/renderer/TableRenderer.d.ts

@@ -3,6 +3,7 @@ import type { IActiveCell, ISelectionRange } from '@alaarab/ogrid-core';
 import type { GridState } from '../state/GridState';
 import type { HeaderFilterState, HeaderFilterConfig } from '../state/HeaderFilterState';
 import type { VirtualScrollState } from '../state/VirtualScrollState';
+import type { FormulaEngineState } from '../state/FormulaEngineState';
 export interface TableRendererInteractionState {
     activeCell: IActiveCell | null;
     selectionRange: ISelectionRange | null;
@@ -68,7 +69,9 @@ export declare class TableRenderer<T> {
     private lastPinnedColumns;
     private lastAllSelected;
     private lastSomeSelected;
+    private formulaEngine;
     constructor(container: HTMLElement, state: GridState<T>);
+    setFormulaEngine(engine: FormulaEngineState): void;
     setVirtualScrollState(vs: VirtualScrollState): void;
     setHeaderFilterState(state: HeaderFilterState, configs: Map<string, HeaderFilterConfig>): void;
     setOnFilterIconClick(handler: (columnId: string, headerEl: HTMLElement) => void): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-js",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "OGrid vanilla JS – framework-free data grid with sorting, filtering, pagination, and spreadsheet-style editing.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-core": "2.3.0"
+    "@alaarab/ogrid-core": "2.4.1"
   },
   "sideEffects": [
     "**/*.css"