@alaarab/ogrid-react-radix 2.0.0-beta

package/dist/esm/DataGridTable/InlineCellEditor.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as Checkbox from '@radix-ui/react-checkbox';
+import { BaseInlineCellEditor, selectEditorStyle } from '@alaarab/ogrid-react';
+const selectWrapperStyle = { width: '100%', height: '100%', display: 'flex', alignItems: 'center', padding: '6px 10px', boxSizing: 'border-box', overflow: 'hidden', minWidth: 0 };
+export function InlineCellEditor(props) {
+    return (_jsx(BaseInlineCellEditor, { ...props, renderCheckbox: (checked, onCommit, onCancel) => (_jsx(Checkbox.Root, { checked: checked, onCheckedChange: (c) => onCommit(c === true), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), children: _jsx(Checkbox.Indicator, { children: "\u2713" }) })), renderSelect: (value, values, onCommit, onCancel) => {
+            return (_jsx("div", { style: selectWrapperStyle, children: _jsx("select", { value: value !== null && value !== undefined ? String(value) : '', onChange: (e) => onCommit(e.target.value), onKeyDown: (e) => e.key === 'Escape' && (e.preventDefault(), onCancel()), autoFocus: true, style: selectEditorStyle, children: values.map((v) => (_jsx("option", { value: String(v), children: String(v) }, String(v)))) }) }));
+        } }));
+}

package/dist/esm/DataGridTable/StatusBar.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getStatusBarParts } from '@alaarab/ogrid-react';
+import styles from './DataGridTable.module.css';
+export function StatusBar(props) {
+    const parts = getStatusBarParts(props);
+    return (_jsx("div", { className: styles.statusBar, role: "status", "aria-live": "polite", children: parts.map((p) => (_jsxs("span", { className: styles.statusBarItem, children: [_jsx("span", { className: styles.statusBarLabel, children: p.label }), _jsx("span", { className: styles.statusBarValue, children: p.value.toLocaleString() })] }, p.key))) }));
+}

package/dist/esm/OGrid/OGrid.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import { forwardRef } from 'react';
+import { DataGridTable } from '../DataGridTable/DataGridTable';
+import { ColumnChooser } from '../ColumnChooser/ColumnChooser';
+import { PaginationControls } from '../PaginationControls/PaginationControls';
+import { useOGrid, OGridLayout, } from '@alaarab/ogrid-react';
+const OGridInner = forwardRef(function OGridInner(props, ref) {
+    const { dataGridProps, pagination, columnChooser, layout } = useOGrid(props, ref);
+    return (_jsx(OGridLayout, { className: layout.className, sideBar: layout.sideBarProps, toolbar: layout.toolbar, toolbarBelow: layout.toolbarBelow, toolbarEnd: columnChooser.placement === 'toolbar' ? (_jsx(ColumnChooser, { columns: columnChooser.columns, visibleColumns: columnChooser.visibleColumns, onVisibilityChange: columnChooser.onVisibilityChange })) : undefined, pagination: _jsx(PaginationControls, { currentPage: pagination.page, pageSize: pagination.pageSize, totalCount: pagination.displayTotalCount, onPageChange: pagination.setPage, onPageSizeChange: (size) => {
+                pagination.setPageSize(size);
+                pagination.setPage(1);
+            }, pageSizeOptions: pagination.pageSizeOptions, entityLabelPlural: pagination.entityLabelPlural }), children: _jsx(DataGridTable, { ...dataGridProps }) }));
+});
+OGridInner.displayName = 'OGrid';
+export const OGrid = React.memo(OGridInner);

package/dist/esm/PaginationControls/PaginationControls.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { useMemo, useCallback } from 'react';
+import { getPaginationViewModel } from '@alaarab/ogrid-react';
+import styles from './PaginationControls.module.css';
+function ChevronLeft() {
+    return _jsx("span", { "aria-hidden": true, children: "\u2039" });
+}
+function ChevronRight() {
+    return _jsx("span", { "aria-hidden": true, children: "\u203A" });
+}
+function ChevronDoubleLeft() {
+    return _jsx("span", { "aria-hidden": true, children: "\u00AB" });
+}
+function ChevronDoubleRight() {
+    return _jsx("span", { "aria-hidden": true, children: "\u00BB" });
+}
+export const PaginationControls = React.memo((props) => {
+    const { currentPage, pageSize, totalCount, onPageChange, onPageSizeChange, pageSizeOptions, entityLabelPlural, className } = props;
+    const labelPlural = entityLabelPlural ?? 'items';
+    const vm = useMemo(() => getPaginationViewModel(currentPage, pageSize, totalCount, pageSizeOptions ? { pageSizeOptions } : undefined), [currentPage, pageSize, totalCount, pageSizeOptions]);
+    const handlePageSizeChange = useCallback((e) => {
+        onPageSizeChange(Number(e.target.value));
+    }, [onPageSizeChange]);
+    if (!vm) {
+        return null;
+    }
+    const { pageNumbers, showStartEllipsis, showEndEllipsis, totalPages, startItem, endItem } = vm;
+    return (_jsxs("div", { className: `${styles.pagination} ${className || ''}`, role: "navigation", "aria-label": "Pagination", children: [_jsxs("div", { className: styles.paginationInfo, children: ["Showing ", startItem, " to ", endItem, " of ", totalCount.toLocaleString(), " ", labelPlural] }), _jsxs("div", { className: styles.paginationControls, children: [_jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", children: _jsx(ChevronDoubleLeft, {}) }), _jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", children: _jsx(ChevronLeft, {}) }), _jsxs("div", { className: styles.pageNumbers, children: [showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: styles.pageBtn, onClick: () => onPageChange(1), "aria-label": "Page 1", children: "1" }), _jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx("button", { type: "button", className: `${styles.pageBtn} ${currentPage === pageNum ? styles.active : ''}`, onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" }), _jsx("button", { type: "button", className: styles.pageBtn, onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, children: totalPages })] }))] }), _jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", children: _jsx(ChevronRight, {}) }), _jsx("button", { type: "button", className: styles.navBtn, onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", children: _jsx(ChevronDoubleRight, {}) })] }), _jsxs("div", { className: styles.pageSizeSelector, children: [_jsx("span", { className: styles.pageSizeLabel, children: "Rows" }), _jsx("select", { className: styles.pageSizeSelect, value: String(pageSize), onChange: handlePageSizeChange, "aria-label": "Rows per page", children: vm.pageSizeOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })] }));
+});
+PaginationControls.displayName = 'PaginationControls';

package/dist/esm/PaginationControls/PaginationControls.module.css

@@ -0,0 +1,110 @@
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px 24px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+.paginationInfo {
+  font-size: 13px;
+  color: var(--ogrid-muted, #606060);
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.paginationControls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-wrap: wrap;
+  flex: 1 1 auto;
+  justify-content: center;
+  min-width: 0;
+}
+
+.navBtn {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 4px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 50%;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg, #333);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+}
+.navBtn:hover:not(:disabled) {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+  border-color: var(--ogrid-border-hover, #999);
+}
+.navBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pageNumbers {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 8px;
+}
+
+.pageBtn {
+  min-width: 28px;
+  min-height: 28px;
+  padding: 4px 8px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  color: var(--ogrid-fg, #333);
+  cursor: pointer;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+.pageBtn:hover {
+  background: var(--ogrid-bg-hover, #f5f5f5);
+}
+.pageBtn.active {
+  background: var(--ogrid-primary, #0066cc);
+  border-color: var(--ogrid-primary, #0066cc);
+  color: var(--ogrid-primary-fg, #fff);
+}
+
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  font-size: 12px;
+  color: var(--ogrid-muted, #888);
+  user-select: none;
+}
+
+.pageSizeSelector {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.pageSizeSelector .pageSizeLabel {
+  font-size: 13px;
+  color: var(--ogrid-muted, #606060);
+  user-select: none;
+  white-space: nowrap;
+}
+.pageSizeSelector .pageSizeSelect {
+  min-width: 72px;
+  padding: 4px 8px;
+  border: 1px solid var(--ogrid-border, #ccc);
+  border-radius: 4px;
+  background: var(--ogrid-bg, #fff);
+  font-size: 13px;
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+// Components
+export { OGrid } from './OGrid/OGrid';
+export { DataGridTable } from './DataGridTable/DataGridTable';
+export { ColumnChooser } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls } from './PaginationControls/PaginationControls';
+// Re-export everything from core
+export * from '@alaarab/ogrid-react';

package/dist/types/ColumnChooser/ColumnChooser.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { IColumnDefinition } from '@alaarab/ogrid-react';
+export type { IColumnDefinition };
+export interface IColumnChooserProps {
+    columns: IColumnDefinition[];
+    visibleColumns: Set<string>;
+    onVisibilityChange: (columnKey: string, visible: boolean) => void;
+    className?: string;
+}
+export declare const ColumnChooser: React.FC<IColumnChooserProps>;

package/dist/types/ColumnHeaderFilter/ColumnHeaderFilter.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { UserLike, ColumnFilterType, IDateFilterValue } from '@alaarab/ogrid-react';
+export interface IColumnHeaderFilterProps {
+    columnKey: string;
+    columnName: string;
+    filterType: ColumnFilterType;
+    isSorted?: boolean;
+    isSortedDescending?: boolean;
+    onSort?: () => void;
+    selectedValues?: string[];
+    onFilterChange?: (values: string[]) => void;
+    options?: string[];
+    isLoadingOptions?: boolean;
+    textValue?: string;
+    onTextChange?: (value: string) => void;
+    selectedUser?: UserLike;
+    onUserChange?: (user: UserLike | undefined) => void;
+    peopleSearch?: (query: string) => Promise<UserLike[]>;
+    dateValue?: IDateFilterValue;
+    onDateChange?: (value: IDateFilterValue | undefined) => void;
+}
+export declare const ColumnHeaderFilter: React.FC<IColumnHeaderFilterProps>;

package/dist/types/ColumnHeaderFilter/MultiSelectFilterPopover.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export interface MultiSelectFilterPopoverProps {
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    options: string[];
+    filteredOptions: string[];
+    selected: Set<string>;
+    onOptionToggle: (option: string, checked: boolean) => void;
+    onSelectAll: () => void;
+    onClearSelection: () => void;
+    onApply: () => void;
+    isLoading: boolean;
+}
+export declare const MultiSelectFilterPopover: React.FC<MultiSelectFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/PeopleFilterPopover.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import type { UserLike } from '@alaarab/ogrid-react';
+export interface PeopleFilterPopoverProps {
+    selectedUser: UserLike | undefined;
+    searchText: string;
+    onSearchChange: (value: string) => void;
+    suggestions: UserLike[];
+    isLoading: boolean;
+    onUserSelect: (user: UserLike) => void;
+    onClearUser: () => void;
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+}
+export declare const PeopleFilterPopover: React.FC<PeopleFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/TextFilterPopover.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export interface TextFilterPopoverProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+}
+export declare const TextFilterPopover: React.FC<TextFilterPopoverProps>;

package/dist/types/ColumnHeaderFilter/index.d.ts

@@ -0,0 +1 @@
+export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter';

package/dist/types/DataGridTable/DataGridTable.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { IOGridDataGridProps } from '@alaarab/ogrid-react';
+declare function DataGridTableInner<T>(props: IOGridDataGridProps<T>): React.ReactElement;
+export declare const DataGridTable: typeof DataGridTableInner;
+export {};

package/dist/types/DataGridTable/GridContextMenu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { GridContextMenuHandlerProps } from '@alaarab/ogrid-react';
+export interface GridContextMenuProps extends GridContextMenuHandlerProps {
+    x: number;
+    y: number;
+    hasSelection: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+}
+export declare function GridContextMenu(props: GridContextMenuProps): React.ReactElement;

package/dist/types/DataGridTable/InlineCellEditor.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { IColumnDef } from '@alaarab/ogrid-react';
+export interface InlineCellEditorProps<T> {
+    value: unknown;
+    item: T;
+    column: IColumnDef<T>;
+    rowIndex: number;
+    editorType: 'text' | 'select' | 'checkbox' | 'richSelect' | 'date';
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+}
+export declare function InlineCellEditor<T>(props: InlineCellEditorProps<T>): React.ReactElement;

package/dist/types/DataGridTable/StatusBar.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface StatusBarProps {
+    totalCount: number;
+    filteredCount?: number;
+    selectedCount?: number;
+    selectedCellCount?: number;
+    aggregation?: {
+        sum: number;
+        avg: number;
+        min: number;
+        max: number;
+        count: number;
+    } | null;
+    suppressRowCount?: boolean;
+}
+export declare function StatusBar(props: StatusBarProps): React.ReactElement;

package/dist/types/OGrid/OGrid.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { type IOGridProps, type IOGridApi } from '@alaarab/ogrid-react';
+export type { IOGridProps } from '@alaarab/ogrid-react';
+declare const OGridInner: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;
+export declare const OGrid: typeof OGridInner;

package/dist/types/PaginationControls/PaginationControls.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface IPaginationControlsProps {
+    currentPage: number;
+    pageSize: number;
+    totalCount: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+    pageSizeOptions?: number[];
+    entityLabelPlural?: string;
+    className?: string;
+}
+export declare const PaginationControls: React.FC<IPaginationControlsProps>;

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+export { OGrid, type IOGridProps } from './OGrid/OGrid';
+export { DataGridTable } from './DataGridTable/DataGridTable';
+export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnChooser';
+export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';
+export { PaginationControls, type IPaginationControlsProps } from './PaginationControls/PaginationControls';
+export * from '@alaarab/ogrid-react';

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@alaarab/ogrid-react-radix",
+  "version": "2.0.0-beta",
+  "description": "OGrid default (Radix) – Data grid with sorting, filtering, pagination, column chooser, and CSV export. Packed with Radix UI; no Fluent or Material required.",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && tsc -p tsconfig.build.json && node scripts/compile-styles.js",
+    "test": "jest",
+    "storybook": "storybook dev -p 6008 --no-open",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "ogrid",
+    "radix",
+    "datatable",
+    "react",
+    "typescript",
+    "grid",
+    "headless"
+  ],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@alaarab/ogrid-react": "2.0.0-beta",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "10.2.8",
+    "eslint-plugin-storybook": "10.2.8",
+    "sass": "^1.83.4",
+    "storybook": "10.2.8",
+    "vite": "^7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}