@alaarab/ogrid-core 1.6.0 → 1.7.2

package/README.md

@@ -32,14 +32,13 @@ npm install @alaarab/ogrid-core
 
 ### Components
 
-- `OGridLayout` -- Layout structure for OGrid: toolbar row (title, toolbar, columnChooser), grid area, pagination. Accepts `containerComponent` and `gap` so Fluent/Material/Radix supply their Container (div or Box).
+- `OGridLayout` -- Unified bordered layout: toolbar strip (custom content + column chooser), optional secondary toolbar row, sidebar, grid area, and footer strip (pagination).
 
 ### Utilities
 
 - `getPaginationViewModel(...)` -- Page numbers, ellipsis, start/end item for PaginationControls
 - `getHeaderFilterConfig(col, input)` -- ColumnHeaderFilter props from column + filter/sort state
 - `getCellRenderDescriptor(item, col, rowIndex, colIdx, input)` -- Cell mode (editing-inline / editing-popover / display) and flags for DataGridTable
-- `toDataGridFilterProps(filters)` -- Splits `IFilters` into `multiSelectFilters`, `textFilters`, `peopleFilters`
 - `toUserLike(user)` -- Converts a user-like object to `UserLike`
 - `exportToCsv(items, columns, getValue, filename)` -- Full CSV export
 - `buildCsvHeader`, `buildCsvRows`, `triggerCsvDownload`, `escapeCsvValue` -- Low-level CSV helpers

package/dist/esm/components/OGridLayout.js

@@ -11,22 +11,33 @@ const borderedContainerStyle = {
     minHeight: 0,
     background: 'var(--ogrid-bg, #fff)',
 };
-const toolbarStripStyle = {
+const toolbarStripBase = {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
     padding: '6px 12px',
-    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
     background: 'var(--ogrid-header-bg, #f5f5f5)',
     gap: 8,
     flexWrap: 'wrap',
     minHeight: 0,
 };
+/** Toolbar strip with border-bottom (when it's the only toolbar row). */
+const toolbarStripStyle = {
+    ...toolbarStripBase,
+    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+};
+/** Toolbar strip without border-bottom (when toolbarBelow follows — it owns the border). */
+const toolbarStripNoBorderStyle = toolbarStripBase;
 const toolbarSectionStyle = {
     display: 'flex',
     alignItems: 'center',
     gap: 8,
 };
+const toolbarBelowStyle = {
+    padding: '6px 12px',
+    borderBottom: '1px solid var(--ogrid-border, #e0e0e0)',
+    background: 'var(--ogrid-header-bg, #f5f5f5)',
+};
 const footerStripStyle = {
     borderTop: '1px solid var(--ogrid-border, #e0e0e0)',
     background: 'var(--ogrid-header-bg, #f5f5f5)',
@@ -65,7 +76,7 @@ const gridChildStyle = {
  *   └────────────────────────────────────┘
  */
 export function OGridLayout(props) {
-    const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, children, pagination, sideBar, } = props;
+    const { containerComponent: Container = 'div', containerProps = {}, className, toolbar, toolbarEnd, toolbarBelow, children, pagination, sideBar, } = props;
     const hasSideBar = sideBar != null;
     const sideBarPosition = sideBar?.position ?? 'right';
     const hasToolbar = toolbar != null || toolbarEnd != null;
@@ -74,5 +85,5 @@ export function OGridLayout(props) {
         flexDirection: 'column',
         height: '100%',
     };
-    return (_jsx(Container, { className: className, style: rootStyle, ...containerProps, children: _jsxs("div", { style: borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsx("div", { style: toolbarSectionStyle, children: toolbarEnd })] })), hasSideBar ? (_jsxs("div", { style: gridAreaFlexStyle, children: [sideBarPosition === 'left' && _jsx(SideBar, { ...sideBar }), _jsx("div", { style: gridChildStyle, children: children }), sideBarPosition !== 'left' && _jsx(SideBar, { ...sideBar })] })) : (_jsx("div", { style: gridAreaSoloStyle, children: children })), pagination && (_jsx("div", { style: footerStripStyle, children: pagination }))] }) }));
+    return (_jsx(Container, { className: className, style: rootStyle, ...containerProps, children: _jsxs("div", { style: borderedContainerStyle, children: [hasToolbar && (_jsxs("div", { style: toolbarBelow ? toolbarStripNoBorderStyle : toolbarStripStyle, children: [_jsx("div", { style: toolbarSectionStyle, children: toolbar }), _jsx("div", { style: toolbarSectionStyle, children: toolbarEnd })] })), toolbarBelow && (_jsx("div", { style: toolbarBelowStyle, children: toolbarBelow })), hasSideBar ? (_jsxs("div", { style: gridAreaFlexStyle, children: [sideBarPosition === 'left' && _jsx(SideBar, { ...sideBar }), _jsx("div", { style: gridChildStyle, children: children }), sideBarPosition !== 'left' && _jsx(SideBar, { ...sideBar })] })) : (_jsx("div", { style: gridAreaSoloStyle, children: children })), pagination && (_jsx("div", { style: footerStripStyle, children: pagination }))] }) }));
 }

package/dist/esm/hooks/useDataGridState.js

@@ -99,6 +99,8 @@ export function useDataGridState(params) {
         endBatch: undoRedo.endBatch,
     });
     const handleCellMouseDown = useCallback((e, rowIndex, globalColIndex) => {
+        if (e.button !== 0)
+            return;
         wrapperRef.current?.focus();
         clearClipboardRanges();
         handleCellMouseDownBase(e, rowIndex, globalColIndex);

package/dist/esm/hooks/useOGrid.js

@@ -5,7 +5,7 @@ import { useFilterOptions } from './useFilterOptions';
 import { useSideBarState } from './useSideBarState';
 const DEFAULT_PAGE_SIZE = 25;
 export function useOGrid(props, ref) {
-    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
+    const { columns: columnsProp, getRowId, data, dataSource, page: controlledPage, pageSize: controlledPageSize, sort: controlledSort, filters: controlledFilters, visibleColumns: controlledVisibleColumns, isLoading: controlledLoading, onPageChange, onPageSizeChange, onSortChange, onFiltersChange, onVisibleColumnsChange, columnOrder, onColumnOrderChange, onColumnResized, onColumnPinned, freezeRows, freezeCols, defaultPageSize = DEFAULT_PAGE_SIZE, defaultSortBy, defaultSortDirection = 'asc', toolbar, toolbarBelow, emptyState, entityLabelPlural = 'items', className, layoutMode = 'fill', suppressHorizontalScroll, editable, cellSelection, onCellValueChanged, onUndo, onRedo, canUndo, canRedo, rowSelection = 'none', selectedRows, onSelectionChange, statusBar, pageSizeOptions, sideBar, onFirstDataRendered, onError, columnChooser: columnChooserProp, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, } = props;
     // Resolve column chooser placement
     const columnChooserPlacement = columnChooserProp === false ? 'none'
         : columnChooserProp === 'sidebar' ? 'sidebar'
@@ -402,6 +402,7 @@ export function useOGrid(props, ref) {
         handleVisibilityChange,
         columnChooserPlacement,
         toolbar,
+        toolbarBelow,
         className,
         entityLabelPlural,
         emptyState,

package/dist/esm/hooks/useRowSelection.js

@@ -55,8 +55,8 @@ export function useRowSelection(params) {
             updateSelection(new Set());
         }
     }, [items, getRowId, updateSelection]);
-    const allSelected = items.length > 0 && items.every((item) => selectedRowIds.has(getRowId(item)));
-    const someSelected = !allSelected && items.some((item) => selectedRowIds.has(getRowId(item)));
+    const allSelected = useMemo(() => items.length > 0 && items.every((item) => selectedRowIds.has(getRowId(item))), [items, selectedRowIds, getRowId]);
+    const someSelected = useMemo(() => !allSelected && items.some((item) => selectedRowIds.has(getRowId(item))), [allSelected, items, selectedRowIds, getRowId]);
     return {
         selectedRowIds,
         updateSelection,

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

@@ -15,6 +15,8 @@ export interface OGridLayoutProps {
     toolbar?: React.ReactNode;
     /** Built-in toolbar items rendered on the right side (column chooser, etc.). */
     toolbarEnd?: React.ReactNode;
+    /** Secondary toolbar row below the primary toolbar (e.g. active filter chips). Full width. */
+    toolbarBelow?: React.ReactNode;
     /** Grid content (DataGridTable). */
     children: React.ReactNode;
     /** Pagination controls (rendered in footer strip inside the bordered container). */

package/dist/types/hooks/useOGrid.d.ts

@@ -16,6 +16,7 @@ export interface UseOGridResult<T> {
     /** Resolved placement of the column chooser. */
     columnChooserPlacement: ColumnChooserPlacement;
     toolbar: React.ReactNode;
+    toolbarBelow: React.ReactNode;
     className?: string;
     entityLabelPlural: string;
     emptyState?: {

package/dist/types/types/dataGridTypes.d.ts

@@ -197,6 +197,8 @@ export interface IOGridProps<T> {
     defaultSortBy?: string;
     defaultSortDirection?: 'asc' | 'desc';
     toolbar?: ReactNode;
+    /** Secondary toolbar row rendered below the primary toolbar (e.g. active filter chips). */
+    toolbarBelow?: ReactNode;
     emptyState?: {
         message?: ReactNode;
         render?: () => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-core",
-  "version": "1.6.0",
+  "version": "1.7.2",
   "description": "OGrid core – framework-agnostic types, hooks, and utilities for OGrid data tables.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",