@alaarab/ogrid-react-fluent 2.0.11 → 2.0.13

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/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/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.11",
-  "description": "OGrid Fluent UI implementation – DataGrid-powered data table with sorting, filtering, pagination, column chooser, and CSV export.",
+  "version": "2.0.13",
+  "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.11"
+    "@alaarab/ogrid-react": "2.0.13"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.0.0",

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';