@alaarab/ogrid-react-fluent 2.0.0-beta

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

@@ -0,0 +1,74 @@
+.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(--colorNeutralForeground2, #605e5c);
+  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;
+}
+
+.pageNumbers {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0 8px;
+}
+
+.pageBtn {
+  min-width: 28px;
+  min-height: 28px;
+  font-variant-numeric: tabular-nums;
+}
+
+.ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 24px;
+  font-size: 12px;
+  color: var(--colorNeutralForeground3, #8a8886);
+  user-select: none;
+  pointer-events: none;
+  letter-spacing: 0.02em;
+}
+
+.pageSizeSelector {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.pageSizeSelector .pageSizeLabel {
+  font-size: 13px;
+  color: var(--colorNeutralForeground2, #605e5c);
+  user-select: none;
+  white-space: nowrap;
+}
+.pageSizeSelector .pageSizeSelect {
+  min-width: 72px;
+}

package/dist/esm/index.js

@@ -0,0 +1,8 @@
+// Components
+export { OGrid, FluentDataTable } from './FluentDataTable';
+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,19 @@
+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;
+    onPopoverClick: (e: React.MouseEvent) => void;
+    onInputFocus: (e: React.FocusEvent) => void;
+    onInputMouseDown: (e: React.MouseEvent) => void;
+    onInputClick: (e: React.MouseEvent) => void;
+    onInputKeyDown: (e: React.KeyboardEvent) => void;
+}
+export declare const MultiSelectFilterPopover: React.FC<MultiSelectFilterPopoverProps>;

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

@@ -0,0 +1,14 @@
+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;
+    onPopoverClick: (e: React.MouseEvent) => void;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+export declare const PeopleFilterPopover: React.FC<PeopleFilterPopoverProps>;

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface TextFilterPopoverProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onApply: () => void;
+    onClear: () => void;
+    onPopoverClick: (e: React.MouseEvent) => void;
+    onInputFocus: (e: React.FocusEvent) => void;
+    onInputMouseDown: (e: React.MouseEvent) => void;
+    onInputClick: (e: React.MouseEvent) => void;
+    onInputKeyDown: (e: React.KeyboardEvent) => void;
+}
+export declare const TextFilterPopover: React.FC<TextFilterPopoverProps>;

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

@@ -0,0 +1 @@
+export { ColumnHeaderFilter } 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/FluentDataTable/FluentDataTable.d.ts

@@ -0,0 +1,7 @@
+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;
+/** @deprecated Use `OGrid` instead. Backward-compat alias. */
+export declare const FluentDataTable: React.ForwardRefExoticComponent<IOGridProps<unknown> & React.RefAttributes<IOGridApi<unknown>>>;

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

@@ -0,0 +1 @@
+export { OGrid, FluentDataTable, type IOGridProps } from './FluentDataTable';

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, FluentDataTable, type IOGridProps } from './FluentDataTable';
+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,64 @@
+{
+  "name": "@alaarab/ogrid-react-fluent",
+  "version": "2.0.0-beta",
+  "description": "OGrid Fluent UI implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
+  "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 6006 --no-open",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "ogrid",
+    "fluentui",
+    "datatable",
+    "react",
+    "typescript",
+    "grid"
+  ],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@alaarab/ogrid-react": "2.0.0-beta"
+  },
+  "peerDependencies": {
+    "@fluentui/react-components": "^9.0.0",
+    "@fluentui/react-icons": "^2.0.0",
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@fluentui/react-components": "^9.72.10",
+    "@fluentui/react-icons": "^2.0.317",
+    "@storybook/react-vite": "10.2.8",
+    "sass": "^1.83.4",
+    "scheduler": "^0.27.0",
+    "storybook": "10.2.8",
+    "eslint-plugin-storybook": "10.2.8",
+    "vite": "^7.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}