@alaarab/ogrid-react-fluent 2.0.9 → 2.0.12

package/dist/esm/DataGridTable/DropIndicator.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './DataGridTable.module.css';
+export function DropIndicator({ dropIndicatorX, wrapperLeft }) {
+    return (_jsx("div", { className: styles.dropIndicator, style: { left: dropIndicatorX - wrapperLeft } }));
+}

package/dist/esm/DataGridTable/EmptyState.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './DataGridTable.module.css';
+export function EmptyState({ emptyState }) {
+    return (_jsx("div", { className: styles.emptyStateInGrid, children: _jsx("div", { className: styles.emptyStateInGridMessageSticky, children: emptyState.render ? (emptyState.render()) : (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.emptyStateInGridIcon, "aria-hidden": true, children: '\uD83D\uDCCB' }), _jsx("div", { className: styles.emptyStateInGridTitle, children: "No results found" }), _jsx("div", { className: styles.emptyStateInGridMessage, children: emptyState.message != null ? (emptyState.message) : emptyState.hasActiveFilters ? (_jsxs(_Fragment, { children: ["No items match your current filters. Try adjusting your search or", ' ', _jsx("button", { type: "button", className: styles.emptyStateInGridLink, onClick: emptyState.onClearAll, children: "clear all filters" }), ' ', "to see all items."] })) : ('There are no items available at this time.') })] })) }) }));
+}

package/dist/esm/DataGridTable/GridContextMenu.js

@@ -1,35 +1,13 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { GRID_CONTEXT_MENU_ITEMS, getContextMenuHandlers, formatShortcut } from '@alaarab/ogrid-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { GridContextMenu as BaseGridContextMenu } from '@alaarab/ogrid-react';
 import styles from './DataGridTable.module.css';
+const classNames = {
+    contextMenu: styles.contextMenu,
+    contextMenuItem: styles.contextMenuItem,
+    contextMenuItemLabel: styles.contextMenuItemLabel,
+    contextMenuItemShortcut: styles.contextMenuItemShortcut,
+    contextMenuDivider: styles.contextMenuDivider,
+};
 export function GridContextMenu(props) {
-    const { x, y, hasSelection, canUndo, canRedo, onClose } = props;
-    const ref = React.useRef(null);
-    const handlers = React.useMemo(() => getContextMenuHandlers(props), [props]);
-    const isDisabled = React.useCallback((item) => {
-        if (item.disabledWhenNoSelection && !hasSelection)
-            return true;
-        if (item.id === 'undo' && !canUndo)
-            return true;
-        if (item.id === 'redo' && !canRedo)
-            return true;
-        return false;
-    }, [hasSelection, canUndo, canRedo]);
-    React.useEffect(() => {
-        const handleClickOutside = (e) => {
-            if (ref.current && !ref.current.contains(e.target))
-                onClose();
-        };
-        const handleKeyDown = (e) => {
-            if (e.key === 'Escape')
-                onClose();
-        };
-        document.addEventListener('mousedown', handleClickOutside, true);
-        document.addEventListener('keydown', handleKeyDown, true);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside, true);
-            document.removeEventListener('keydown', handleKeyDown, true);
-        };
-    }, [onClose]);
-    return (_jsx("div", { ref: ref, className: styles.contextMenu, role: "menu", style: { left: x, top: y }, "aria-label": "Grid context menu", children: GRID_CONTEXT_MENU_ITEMS.map((item) => (_jsxs(React.Fragment, { children: [item.dividerBefore && _jsx("div", { className: styles.contextMenuDivider }), _jsxs("button", { type: "button", className: styles.contextMenuItem, onClick: handlers[item.id], disabled: isDisabled(item), children: [_jsx("span", { className: styles.contextMenuItemLabel, children: item.label }), item.shortcut && (_jsx("span", { className: styles.contextMenuItemShortcut, children: formatShortcut(item.shortcut) }))] })] }, item.id))) }));
+    return _jsx(BaseGridContextMenu, { ...props, classNames: classNames });
 }

package/dist/esm/DataGridTable/LoadingOverlay.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from '@fluentui/react-components';
+import styles from './DataGridTable.module.css';
+export function LoadingOverlay({ message }) {
+    return (_jsx("div", { className: styles.loadingOverlay, "aria-live": "polite", children: _jsxs("div", { className: styles.loadingOverlayContent, children: [_jsx(Spinner, { size: "small" }), _jsx("span", { className: styles.loadingOverlayText, children: message })] }) }));
+}

package/dist/esm/{FluentDataTable/FluentDataTable.js → OGrid/OGrid.js}

@@ -14,5 +14,3 @@ const OGridInner = forwardRef(function OGridInner(props, ref) {
 });
 OGridInner.displayName = 'OGrid';
 export const OGrid = React.memo(OGridInner);
-/** @deprecated Use `OGrid` instead. Backward-compat alias. */
-export const FluentDataTable = OGrid;

package/dist/esm/OGrid/index.js

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

package/dist/esm/PaginationControls/PaginationControls.js

@@ -1,20 +1,26 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
-import { useMemo, useCallback } from 'react';
 import { Button, Select } from '@fluentui/react-components';
 import { ChevronLeftRegular, ChevronRightRegular, ChevronDoubleLeftRegular, ChevronDoubleRightRegular, } from '@fluentui/react-icons';
-import { getPaginationViewModel } from '@alaarab/ogrid-react';
+import { usePaginationControls } from '@alaarab/ogrid-react';
 import styles from './PaginationControls.module.css';
 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, data) => {
-        onPageSizeChange(Number(data.value));
-    }, [onPageSizeChange]);
+    const { labelPlural, vm, handlePageSizeChange } = usePaginationControls({
+        currentPage,
+        pageSize,
+        totalCount,
+        onPageChange,
+        onPageSizeChange,
+        pageSizeOptions,
+        entityLabelPlural,
+    });
+    const handlePageSizeChangeEvent = (_e, data) => {
+        handlePageSizeChange(Number(data.value));
+    };
     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, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleLeftRegular, {}), onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronLeftRegular, {}), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", className: styles.navBtn }), _jsxs("div", { className: styles.pageNumbers, children: [showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(1), "aria-label": "Page 1", className: styles.pageBtn, children: "1" }), _jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { appearance: currentPage === pageNum ? 'primary' : 'outline', size: "small", shape: "rounded", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, className: styles.pageBtn, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, className: styles.pageBtn, children: totalPages })] }))] }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronRightRegular, {}), onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleRightRegular, {}), onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", className: styles.navBtn })] }), _jsxs("div", { className: styles.pageSizeSelector, children: [_jsx("span", { className: styles.pageSizeLabel, children: "Rows" }), _jsx(Select, { value: String(pageSize), onChange: handlePageSizeChange, size: "small", appearance: "outline", "aria-label": "Rows per page", className: styles.pageSizeSelect, children: vm.pageSizeOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })] }));
+    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, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleLeftRegular, {}), onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "First page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronLeftRegular, {}), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, "aria-label": "Previous page", className: styles.navBtn }), _jsxs("div", { className: styles.pageNumbers, children: [showStartEllipsis && (_jsxs(_Fragment, { children: [_jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(1), "aria-label": "Page 1", className: styles.pageBtn, children: "1" }), _jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" })] })), pageNumbers.map((pageNum) => (_jsx(Button, { appearance: currentPage === pageNum ? 'primary' : 'outline', size: "small", shape: "rounded", onClick: () => onPageChange(pageNum), "aria-label": `Page ${pageNum}`, "aria-current": currentPage === pageNum ? 'page' : undefined, className: styles.pageBtn, children: pageNum }, pageNum))), showEndEllipsis && (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.ellipsis, "aria-hidden": true, children: "\u2026" }), _jsx(Button, { appearance: "outline", size: "small", shape: "rounded", onClick: () => onPageChange(totalPages), "aria-label": `Page ${totalPages}`, className: styles.pageBtn, children: totalPages })] }))] }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronRightRegular, {}), onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= totalPages, "aria-label": "Next page", className: styles.navBtn }), _jsx(Button, { appearance: "outline", shape: "circular", size: "small", icon: _jsx(ChevronDoubleRightRegular, {}), onClick: () => onPageChange(totalPages), disabled: currentPage >= totalPages, "aria-label": "Last page", className: styles.navBtn })] }), _jsxs("div", { className: styles.pageSizeSelector, children: [_jsx("span", { className: styles.pageSizeLabel, children: "Rows" }), _jsx(Select, { value: String(pageSize), onChange: handlePageSizeChangeEvent, size: "small", appearance: "outline", "aria-label": "Rows per page", className: styles.pageSizeSelect, children: vm.pageSizeOptions.map((n) => (_jsx("option", { value: n, children: n }, n))) })] })] }));
 });

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 // Components
-export { OGrid, FluentDataTable } from './FluentDataTable';
+export { OGrid } from './OGrid';
 export { DataGridTable } from './DataGridTable/DataGridTable';
 export { ColumnChooser } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter } from './ColumnHeaderFilter/ColumnHeaderFilter';

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

@@ -1,10 +1,4 @@
 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;
-}
+import type { IColumnChooserProps } from '@alaarab/ogrid-react';
+export type { IColumnChooserProps };
 export declare const ColumnChooser: React.FC<IColumnChooserProps>;

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

@@ -1,22 +1,4 @@
 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;
-}
+import type { IColumnHeaderFilterProps } from '@alaarab/ogrid-react';
+export type { IColumnHeaderFilterProps };
 export declare const ColumnHeaderFilter: React.FC<IColumnHeaderFilterProps>;

package/dist/types/ColumnHeaderMenu/ColumnHeaderMenu.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface ColumnHeaderMenuProps {
     isOpen: boolean;
     anchorElement: HTMLElement | null;
@@ -6,8 +6,20 @@ export interface ColumnHeaderMenuProps {
     onPinLeft: () => void;
     onPinRight: () => void;
     onUnpin: () => void;
+    onSortAsc: () => void;
+    onSortDesc: () => void;
+    onClearSort: () => void;
+    onAutosizeThis: () => void;
+    onAutosizeAll: () => void;
     canPinLeft: boolean;
     canPinRight: boolean;
     canUnpin: boolean;
+    currentSort: 'asc' | 'desc' | null;
+    isSortable: boolean;
+    isResizable: boolean;
 }
-export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): React.ReactElement | null;
+/**
+ * Column header dropdown menu for pin/sort/autosize actions.
+ * Uses positioned div with portal rendering.
+ */
+export declare function ColumnHeaderMenu(props: ColumnHeaderMenuProps): React.ReactPortal | null;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+interface DropIndicatorProps {
+    dropIndicatorX: number;
+    wrapperLeft: number;
+}
+export declare function DropIndicator({ dropIndicatorX, wrapperLeft }: DropIndicatorProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface EmptyStateProps {
+    emptyState: {
+        render?: () => React.ReactNode;
+        message?: React.ReactNode;
+        hasActiveFilters?: boolean;
+        onClearAll?: () => void;
+    };
+}
+export declare function EmptyState({ emptyState }: EmptyStateProps): React.ReactElement;
+export {};

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+interface LoadingOverlayProps {
+    message: string;
+}
+export declare function LoadingOverlay({ message }: LoadingOverlayProps): React.ReactElement;
+export {};

package/dist/types/{FluentDataTable/FluentDataTable.d.ts → OGrid/OGrid.d.ts}

@@ -3,5 +3,3 @@ 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/OGrid/index.d.ts

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

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

@@ -1,12 +1,4 @@
 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;
-}
+import type { IPaginationControlsProps } from '@alaarab/ogrid-react';
+export type { IPaginationControlsProps };
 export declare const PaginationControls: React.FC<IPaginationControlsProps>;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { OGrid, FluentDataTable, type IOGridProps } from './FluentDataTable';
+export { OGrid, type IOGridProps } from './OGrid';
 export { DataGridTable } from './DataGridTable/DataGridTable';
 export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnChooser';
 export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alaarab/ogrid-react-fluent",
-  "version": "2.0.9",
-  "description": "OGrid Fluent UI implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
+  "version": "2.0.12",
+  "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",
   "types": "dist/types/index.d.ts",
@@ -40,7 +40,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.0.9"
+    "@alaarab/ogrid-react": "2.0.12"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",
@@ -55,8 +55,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "eslint-plugin-storybook": "10.2.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

package/dist/esm/FluentDataTable/index.js

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

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

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