@alaarab/ogrid-react-fluent 2.0.15 → 2.0.16

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo, useEffect, useState, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { getColumnHeaderMenuItems } from '@alaarab/ogrid-core';
+import { getColumnHeaderMenuItems } from '@alaarab/ogrid-react';
 import styles from './ColumnHeaderMenu.module.css';
 /**
  * Column header dropdown menu for pin/sort/autosize actions.

package/dist/esm/DataGridTable/DataGridTable.js

@@ -84,7 +84,7 @@ function DataGridTableInner(props) {
         const rowId = getRowId(item);
         let content;
         if (descriptor.mode === 'editing-inline') {
-            content = _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) });
+            content = (_jsx("div", { className: styles.editingCellContent, children: _jsx(InlineCellEditor, { ...buildInlineEditorProps(item, col, descriptor, editCallbacks) }) }));
         }
         else if (descriptor.mode === 'editing-popover' && typeof col.cellEditor === 'function') {
             const editorProps = buildPopoverEditorProps(item, col, descriptor, pendingEditorValueRef.current, editCallbacks);

package/dist/esm/DataGridTable/DataGridTable.module.css

@@ -192,6 +192,21 @@
   background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
 }
 
+.editingCellContent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  outline: 2px solid var(--ogrid-selection-color, #217346);
+  outline-offset: -1px;
+  z-index: 2;
+  position: relative;
+  background: var(--ogrid-bg, #fff);
+  overflow: visible;
+  padding: 0;
+}
+
 .cellInRange {
   background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12)) !important;
 }

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Select, Checkbox } from '@fluentui/react-components';
-import { BaseInlineCellEditor, editorWrapperStyle } from '@alaarab/ogrid-react';
+import { Checkbox } from '@fluentui/react-components';
+import { BaseInlineCellEditor } from '@alaarab/ogrid-react';
 export function InlineCellEditor(props) {
-    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox, { checked: checked, onChange: (_, data) => onCommit(!!data.checked), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()) })), renderSelect: (value, values, onCommit, onCancel) => (_jsx("div", { style: editorWrapperStyle, children: _jsx(Select, { value: value !== null && value !== undefined ? String(value) : '', onChange: (_, data) => onCommit(data.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), children: values.map((v) => (_jsx("option", { value: String(v), children: String(v) }, String(v)))) }) })) }));
+    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox, { checked: checked, onChange: (_, data) => onCommit(!!data.checked), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()) })) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "description": "OGrid React Fluent implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",