@alaarab/ogrid-react-material 2.1.3 → 2.1.4

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

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

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

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export type { IOGridProps } from '@alaarab/ogrid-react';
-export declare const OGrid: React.ForwardRefExoticComponent<import("@alaarab/ogrid-react").IOGridProps<unknown> & React.RefAttributes<import("@alaarab/ogrid-react").IOGridApi<unknown>>>;
+export declare const OGrid: React.ForwardRefExoticComponent<import("@alaarab/ogrid-react").IOGridProps<unknown> & React.RefAttributes<import("@alaarab/ogrid-core").IOGridApi<unknown>>>;

package/dist/types/index.d.ts

@@ -4,4 +4,43 @@ export { ColumnChooser, type IColumnChooserProps } from './ColumnChooser/ColumnC
 export { ColumnHeaderFilter, type IColumnHeaderFilterProps } from './ColumnHeaderFilter/ColumnHeaderFilter';
 export { PaginationControls, type IPaginationControlsProps } from './PaginationControls/PaginationControls';
 export { ColumnHeaderMenu, type ColumnHeaderMenuProps } from './ColumnHeaderMenu/ColumnHeaderMenu';
-export * from '@alaarab/ogrid-react';
+export { CHECKBOX_COLUMN_WIDTH, ROW_NUMBER_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, CELL_PADDING, GRID_BORDER_RADIUS, } from '@alaarab/ogrid-react';
+export type { ColumnFilterType, IColumnFilterDef, IColumnMeta, IColumnDef, IColumnGroupDef, IColumnDefinition, ICellValueChangedEvent, ICellEditorProps, CellEditorParams, IValueParserParams, UserLike, UserLikeInput, FilterValue, IFilters, IFetchParams, IPageResult, IDataSource, IGridColumnState, IOGridApi, IOGridDataGridProps, RowSelectionMode, RowId, IRowSelectionChangeEvent, StatusBarPanel, IStatusBarProps, IActiveCell, ISelectionRange, HeaderCell, HeaderRow, SideBarPanelId, ISideBarDef, IDateFilterValue, IVirtualScrollConfig, IColumnReorderConfig, } from '@alaarab/ogrid-react';
+export { toUserLike, isInSelectionRange, normalizeSelectionRange } from '@alaarab/ogrid-react';
+export { useFilterOptions, useOGrid, useActiveCell, useCellEditing, useContextMenu, useCellSelection, useClipboard, useRowSelection, useKeyboardNavigation, useUndoRedo, useDebounce, useFillHandle, useDataGridState, useColumnHeaderFilterState, useTextFilterState, useMultiSelectFilterState, usePeopleFilterState, useDateFilterState, useColumnChooserState, useInlineCellEditorState, useColumnResize, useRichSelectState, useSelectState, useSideBarState, useTableLayout, useColumnReorder, useVirtualScroll, useListVirtualizer, useLatestRef, usePaginationControls, useDataGridTableOrchestration, useColumnMeta, } from '@alaarab/ogrid-react';
+export type { UseFilterOptionsResult, UseOGridResult, UseOGridPagination, UseOGridColumnChooser, UseOGridLayout, UseOGridFilters, ColumnChooserPlacement, UseActiveCellResult, UseCellEditingResult, EditingCell, UseContextMenuResult, ContextMenuPosition, UseCellSelectionResult, UseCellSelectionParams, UseClipboardResult, UseClipboardParams, UseRowSelectionResult, UseRowSelectionParams, UseKeyboardNavigationResult, UseKeyboardNavigationParams, UseUndoRedoResult, UseUndoRedoParams, UseFillHandleResult, UseFillHandleParams, UseDataGridStateParams, UseDataGridStateResult, DataGridLayoutState, DataGridRowSelectionState, DataGridEditingState, DataGridCellInteractionState, DataGridContextMenuState, DataGridViewModelState, DataGridPinningState, UseColumnHeaderFilterStateParams, UseColumnHeaderFilterStateResult, UseTextFilterStateParams, UseTextFilterStateResult, UseMultiSelectFilterStateParams, UseMultiSelectFilterStateResult, UsePeopleFilterStateParams, UsePeopleFilterStateResult, UseDateFilterStateParams, UseDateFilterStateResult, UseColumnChooserStateParams, UseColumnChooserStateResult, UseInlineCellEditorStateParams, UseInlineCellEditorStateResult, InlineCellEditorType, UseColumnResizeParams, UseColumnResizeResult, UseRichSelectStateParams, UseRichSelectStateResult, UseSelectStateParams, UseSelectStateResult, UseSideBarStateParams, UseSideBarStateResult, UseTableLayoutParams, UseTableLayoutResult, UseColumnReorderParams, UseColumnReorderResult, UseVirtualScrollParams, UseVirtualScrollResult, UsePaginationControlsProps, UsePaginationControlsResult, UseDataGridTableOrchestrationParams, UseDataGridTableOrchestrationResult, UseColumnMetaParams, ColumnMetaResult, } from '@alaarab/ogrid-react';
+export { GRID_ROOT_STYLE, CURSOR_CELL_STYLE, POPOVER_ANCHOR_STYLE, PREVENT_DEFAULT, NOOP, STOP_PROPAGATION, } from '@alaarab/ogrid-react';
+export { OGridLayout } from '@alaarab/ogrid-react';
+export type { OGridLayoutProps } from '@alaarab/ogrid-react';
+export { StatusBar } from '@alaarab/ogrid-react';
+export type { StatusBarProps, StatusBarClassNames } from '@alaarab/ogrid-react';
+export { BaseInlineCellEditor, editorWrapperStyle, editorInputStyle, richSelectWrapperStyle, richSelectDropdownStyle, richSelectOptionStyle, richSelectOptionHighlightedStyle, richSelectNoMatchesStyle, selectEditorStyle, selectDisplayStyle, selectChevronStyle, } from '@alaarab/ogrid-react';
+export type { BaseInlineCellEditorProps } from '@alaarab/ogrid-react';
+export { GridContextMenu } from '@alaarab/ogrid-react';
+export type { GridContextMenuProps, GridContextMenuClassNames } from '@alaarab/ogrid-react';
+export { MarchingAntsOverlay } from '@alaarab/ogrid-react';
+export type { MarchingAntsOverlayProps } from '@alaarab/ogrid-react';
+export { SideBar } from '@alaarab/ogrid-react';
+export type { SideBarProps, SideBarFilterColumn } from '@alaarab/ogrid-react';
+export { BaseColumnHeaderMenu } from '@alaarab/ogrid-react';
+export type { BaseColumnHeaderMenuProps, ColumnHeaderMenuClassNames } from '@alaarab/ogrid-react';
+export { createOGrid } from '@alaarab/ogrid-react';
+export type { CreateOGridComponents, GridRowProps, InlineCellEditorProps } from '@alaarab/ogrid-react';
+export { CellErrorBoundary } from '@alaarab/ogrid-react';
+export type { CellErrorBoundaryProps } from '@alaarab/ogrid-react';
+export { EmptyState } from '@alaarab/ogrid-react';
+export type { EmptyStateProps } from '@alaarab/ogrid-react';
+export { BaseEmptyState } from '@alaarab/ogrid-react';
+export type { BaseEmptyStateProps, BaseEmptyStateClassNames } from '@alaarab/ogrid-react';
+export { BaseLoadingOverlay } from '@alaarab/ogrid-react';
+export type { BaseLoadingOverlayProps, BaseLoadingOverlayClassNames } from '@alaarab/ogrid-react';
+export { BaseDropIndicator } from '@alaarab/ogrid-react';
+export type { BaseDropIndicatorProps } from '@alaarab/ogrid-react';
+export { DateFilterContent, getColumnHeaderFilterStateParams, getDateFilterContentProps, } from '@alaarab/ogrid-react';
+export type { IColumnHeaderFilterProps as IColumnHeaderFilterBaseProps, DateFilterContentProps, DateFilterClassNames, } from '@alaarab/ogrid-react';
+export { escapeCsvValue, buildCsvHeader, buildCsvRows, exportToCsv, triggerCsvDownload, getCellValue, flattenColumns, buildHeaderRows, getFilterField, mergeFilter, deriveFilterOptionsFromData, getMultiSelectFilterFields, getStatusBarParts, getDataGridStatusBarConfig, GRID_CONTEXT_MENU_ITEMS, COLUMN_HEADER_MENU_ITEMS, getContextMenuHandlers, getColumnHeaderMenuItems, formatShortcut, getPaginationViewModel, PAGE_SIZE_OPTIONS, MAX_PAGE_BUTTONS, getHeaderFilterConfig, getCellRenderDescriptor, isRowInRange, resolveCellDisplayContent, resolveCellStyle, buildInlineEditorProps, buildPopoverEditorProps, getCellInteractionProps, parseValue, numberParser, currencyParser, dateParser, emailParser, booleanParser, computeAggregations, processClientSideData, areGridRowPropsEqual, findCtrlArrowTarget, computeTabNavigation, rangesEqual, clampSelectionToBounds, computeAutoScrollSpeed, formatCellValueForTsv, formatSelectionAsTsv, parseTsvClipboard, UndoRedoStack, } from '@alaarab/ogrid-react';
+export type { CsvColumn, StatusBarPart, StatusBarPartsInput, GridContextMenuItem, GridContextMenuHandlerProps, PaginationViewModel, HeaderFilterConfigInput, HeaderFilterConfig, CellRenderDescriptorInput, CellRenderDescriptor, CellRenderMode, CellInteractionHandlers, ParseValueResult, AggregationResult, GridRowComparatorProps, IColumnHeaderMenuItem, ColumnHeaderMenuInput, ColumnHeaderMenuHandlers, } from '@alaarab/ogrid-react';
+export { renderFilterContent } from '@alaarab/ogrid-react';
+export type { FilterContentRenderers, MultiSelectRendererProps, TextRendererProps, PeopleRendererProps, DateRendererProps, } from '@alaarab/ogrid-react';
+export type { IColumnChooserProps as IColumnChooserBaseProps } from '@alaarab/ogrid-react';
+export type { IPaginationControlsProps as IPaginationControlsBaseProps } from '@alaarab/ogrid-react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-react-material",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "OGrid React Material implementation – MUI Table–based data grid with sorting, filtering, pagination, column chooser, spreadsheet selection, and CSV export.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -9,11 +9,11 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/esm/index.js",
-      "require": "./dist/esm/index.js"
+      "default": "./dist/esm/index.js"
     }
   },
   "scripts": {
-    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
     "test": "jest",
     "storybook": "storybook dev -p 6007 --no-open",
     "build-storybook": "storybook build"
@@ -39,7 +39,7 @@
     "node": ">=18"
   },
   "dependencies": {
-    "@alaarab/ogrid-react": "2.1.3"
+    "@alaarab/ogrid-react": "2.1.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.0.0",

package/dist/esm/ColumnChooser/ColumnChooser.js

@@ -1,53 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from 'react';
-import { Button, Popover, Checkbox, Box, Typography, FormControlLabel, } from '@mui/material';
-import { ViewColumn as ViewColumnIcon, ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon, } from '@mui/icons-material';
-import { useColumnChooserState } from '@alaarab/ogrid-react';
-export const ColumnChooser = (props) => {
-    const { columns, visibleColumns, onVisibilityChange, onSetVisibleColumns, className } = props;
-    const [anchorEl, setAnchorEl] = useState(null);
-    const buttonRef = useRef(null);
-    const { open: isOpen, setOpen, handleClose, handleCheckboxChange: setColumnVisible, handleSelectAll, handleClearAll, visibleCount, totalCount, } = useColumnChooserState({ columns, visibleColumns, onVisibilityChange, onSetVisibleColumns });
-    const handleToggle = (e) => {
-        if (isOpen) {
-            handleClose();
-            setAnchorEl(null);
-        }
-        else {
-            setAnchorEl(e.currentTarget);
-            setOpen(true);
-        }
-    };
-    const handlePopoverClose = () => {
-        handleClose();
-        setAnchorEl(null);
-    };
-    const handleCheckboxChange = (columnKey) => (ev) => {
-        ev.stopPropagation();
-        setColumnVisible(columnKey)(ev.target.checked);
-    };
-    return (_jsxs(Box, { className: className, sx: { display: 'inline-flex' }, children: [_jsxs(Button, { ref: buttonRef, variant: "outlined", size: "small", color: "inherit", startIcon: _jsx(ViewColumnIcon, {}), endIcon: isOpen ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}), onClick: handleToggle, "aria-expanded": isOpen, "aria-haspopup": "listbox", sx: {
-                    textTransform: 'none',
-                    fontWeight: 600,
-                    borderColor: isOpen ? 'primary.main' : 'divider',
-                }, children: ["Column Visibility (", visibleCount, " of ", totalCount, ")"] }), _jsxs(Popover, { open: isOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'right' }, slotProps: {
-                    paper: {
-                        sx: { mt: 0.5, minWidth: 220 },
-                    },
-                }, children: [_jsx(Box, { sx: {
-                            px: 1.5,
-                            py: 1,
-                            borderBottom: 1,
-                            borderColor: 'divider',
-                            bgcolor: 'action.hover',
-                        }, children: _jsxs(Typography, { variant: "subtitle2", fontWeight: 600, children: ["Select Columns (", visibleCount, " of ", totalCount, ")"] }) }), _jsx(Box, { sx: { maxHeight: 320, overflowY: 'auto', py: 0.5 }, children: columns.map((column) => (_jsx(Box, { sx: { px: 1.5, minHeight: 32, display: 'flex', alignItems: 'center' }, children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: visibleColumns.has(column.columnId), onChange: handleCheckboxChange(column.columnId), disabled: column.required === true }), label: _jsx(Typography, { variant: "body2", children: column.name }), sx: { m: 0 } }) }, column.columnId))) }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            gap: 1,
-                            px: 1.5,
-                            py: 1,
-                            borderTop: 1,
-                            borderColor: 'divider',
-                            bgcolor: 'action.hover',
-                        }, children: [_jsx(Button, { size: "small", onClick: handleClearAll, sx: { textTransform: 'none' }, children: "Clear All" }), _jsx(Button, { size: "small", variant: "contained", onClick: handleSelectAll, sx: { textTransform: 'none' }, children: "Select All" })] })] })] }));
-};

package/dist/esm/ColumnHeaderFilter/ColumnHeaderFilter.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
-import { Popover, Tooltip, IconButton, Box, Typography } from '@mui/material';
-import { FilterList as FilterListIcon, } from '@mui/icons-material';
-import { useColumnHeaderFilterState, getColumnHeaderFilterStateParams, renderFilterContent, } from '@alaarab/ogrid-react';
-import { TextFilterPopover } from './TextFilterPopover';
-import { MultiSelectFilterPopover } from './MultiSelectFilterPopover';
-import { PeopleFilterPopover } from './PeopleFilterPopover';
-const materialRenderers = {
-    renderMultiSelect: (p) => (_jsx(MultiSelectFilterPopover, { searchText: p.searchText, onSearchChange: p.onSearchChange, options: p.options, filteredOptions: p.filteredOptions, selected: p.selected, onOptionToggle: p.onOptionToggle, onSelectAll: p.onSelectAll, onClearSelection: p.onClearSelection, onApply: p.onApply, isLoading: p.isLoading })),
-    renderText: (p) => (_jsx(TextFilterPopover, { value: p.value, onValueChange: p.onValueChange, onApply: p.onApply, onClear: p.onClear })),
-    renderPeople: (p) => (_jsx(PeopleFilterPopover, { selectedUser: p.selectedUser, searchText: p.searchText, onSearchChange: p.onSearchChange, suggestions: p.suggestions, isLoading: p.isLoading, onUserSelect: p.onUserSelect, onClearUser: p.onClearUser, inputRef: p.inputRef })),
-    renderDate: (p) => (_jsxs(Box, { sx: { p: 1.5, display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "From:" }), _jsx("input", { type: "date", value: p.tempDateFrom, onChange: (e) => p.setTempDateFrom(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Typography, { variant: "caption", sx: { minWidth: 36 }, children: "To:" }), _jsx("input", { type: "date", value: p.tempDateTo, onChange: (e) => p.setTempDateTo(e.target.value), style: { flex: 1, padding: '4px 6px' } })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 0.5 }, children: [_jsx("button", { onClick: p.onClear, disabled: !p.tempDateFrom && !p.tempDateTo, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Clear" }), _jsx("button", { onClick: p.onApply, style: { padding: '4px 12px', cursor: 'pointer' }, children: "Apply" })] })] })),
-};
-export const ColumnHeaderFilter = React.memo((props) => {
-    const { columnName, filterType, options = [], isLoadingOptions = false, selectedUser, } = props;
-    const state = useColumnHeaderFilterState(getColumnHeaderFilterStateParams(props));
-    const { headerRef, isFilterOpen, setFilterOpen, hasActiveFilter, popoverPosition, handlers, } = state;
-    return (_jsxs(Box, { ref: headerRef, sx: { display: 'flex', alignItems: 'center', width: '100%', minWidth: 0 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0, overflow: 'hidden' }, children: _jsx(Tooltip, { title: columnName, arrow: true, children: _jsx(Typography, { variant: "body2", fontWeight: 600, noWrap: true, "data-header-label": true, sx: { lineHeight: 1.4 }, children: columnName }) }) }), _jsx(Box, { sx: { display: 'flex', alignItems: 'center', ml: 0.5, flexShrink: 0 }, children: filterType !== 'none' && (_jsxs(IconButton, { size: "small", onClick: handlers.handleFilterIconClick, "aria-label": `Filter ${columnName}`, title: `Filter ${columnName}`, color: hasActiveFilter || isFilterOpen ? 'primary' : 'default', sx: { p: 0.25, position: 'relative' }, children: [_jsx(FilterListIcon, { sx: { fontSize: 16 } }), hasActiveFilter && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 2,
-                                right: 2,
-                                width: 6,
-                                height: 6,
-                                borderRadius: '50%',
-                                bgcolor: 'primary.main',
-                            } }))] })) }), _jsxs(Popover, { open: isFilterOpen && filterType !== 'none', onClose: () => setFilterOpen(false), anchorReference: "anchorPosition", anchorPosition: popoverPosition ?? { top: 0, left: 0 }, anchorOrigin: { vertical: 'bottom', horizontal: 'left' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: {
-                    paper: {
-                        sx: { mt: 0.5, overflow: 'visible' },
-                        onClick: (e) => e.stopPropagation(),
-                    },
-                }, children: [_jsx(Box, { sx: { borderBottom: 1, borderColor: 'divider', px: 1.5, py: 1 }, children: _jsxs(Typography, { variant: "subtitle2", children: ["Filter: ", columnName] }) }), renderFilterContent(filterType, state, options ?? [], isLoadingOptions, selectedUser, materialRenderers)] })] }));
-});
-ColumnHeaderFilter.displayName = 'ColumnHeaderFilter';

package/dist/esm/ColumnHeaderFilter/MultiSelectFilterPopover.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextField, Checkbox, CircularProgress, Button, Box, Typography, InputAdornment, FormControlLabel, } from '@mui/material';
-import { Search as SearchIcon } from '@mui/icons-material';
-import { useListVirtualizer } from '@alaarab/ogrid-react';
-const ITEM_HEIGHT = 40;
-export const MultiSelectFilterPopover = ({ searchText, onSearchChange, options, filteredOptions, selected, onOptionToggle, onSelectAll, onClearSelection, onApply, isLoading, }) => {
-    const virt = useListVirtualizer({ count: filteredOptions.length, itemHeight: ITEM_HEIGHT, containerHeight: 240 });
-    return (_jsxs(Box, { sx: { width: 280 }, children: [_jsxs(Box, { sx: { p: 1.5, pb: 0.5 }, children: [_jsx(TextField, { placeholder: "Search...", value: searchText, onChange: (e) => onSearchChange(e.target.value), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", size: "small", fullWidth: true, slotProps: {
-                            input: {
-                                startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
-                            },
-                        } }), _jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5, display: 'block' }, children: [filteredOptions.length, " of ", options.length, " options"] })] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', px: 1.5, py: 0.5 }, children: [_jsxs(Button, { size: "small", onClick: onSelectAll, children: ["Select All (", filteredOptions.length, ")"] }), _jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" })] }), _jsx(Box, { ref: virt.containerRef, onScroll: virt.onScroll, sx: { maxHeight: 240, overflowY: 'auto', px: 0.5 }, children: isLoading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 2 }, children: _jsx(CircularProgress, { size: 24 }) })) : filteredOptions.length === 0 ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "No options found" })) : (_jsx(Box, { sx: { height: virt.totalHeight, position: 'relative' }, children: virt.visibleItems.map(({ index, offsetTop }) => {
-                        const option = filteredOptions[index];
-                        return (_jsx(FormControlLabel, { control: _jsx(Checkbox, { size: "small", checked: selected.has(option), onChange: (e) => onOptionToggle(option, e.target.checked) }), label: _jsx(Typography, { variant: "body2", children: option }), sx: { position: 'absolute', top: offsetTop, width: '100%', height: ITEM_HEIGHT, boxSizing: 'border-box', display: 'flex', alignItems: 'center', mx: 0, '& .MuiFormControlLabel-label': { flex: 1, minWidth: 0 } } }, option));
-                    }) })) }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, p: 1.5, pt: 1, borderTop: 1, borderColor: 'divider' }, children: [_jsx(Button, { size: "small", onClick: onClearSelection, children: "Clear" }), _jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })] })] }));
-};
-MultiSelectFilterPopover.displayName = 'MultiSelectFilterPopover';

package/dist/esm/ColumnHeaderFilter/PeopleFilterPopover.js

@@ -1,17 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextField, CircularProgress, Button, Box, Typography, InputAdornment, Avatar, IconButton, } from '@mui/material';
-import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
-export const PeopleFilterPopover = ({ selectedUser, searchText, onSearchChange, suggestions, isLoading, onUserSelect, onClearUser, inputRef, }) => (_jsxs(Box, { sx: { width: 300 }, children: [selectedUser && (_jsxs(Box, { sx: { p: 1.5, pb: 1, borderBottom: 1, borderColor: 'divider' }, children: [_jsx(Typography, { variant: "caption", color: "text.secondary", children: "Currently filtered by:" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mt: 0.5 }, children: [_jsx(Avatar, { src: selectedUser.photo, alt: selectedUser.displayName, sx: { width: 32, height: 32 }, children: selectedUser.displayName?.[0] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { variant: "body2", noWrap: true, children: selectedUser.displayName }), _jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: selectedUser.email })] }), _jsx(IconButton, { size: "small", onClick: onClearUser, "aria-label": "Remove filter", children: _jsx(ClearIcon, { fontSize: "small" }) })] })] })), _jsx(Box, { sx: { p: 1.5, pb: 0.5 }, children: _jsx(TextField, { inputRef: inputRef, placeholder: "Search for a person...", value: searchText, onChange: (e) => onSearchChange(e.target.value), onKeyDown: (e) => e.stopPropagation(), autoComplete: "off", size: "small", fullWidth: true, slotProps: {
-                    input: {
-                        startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
-                    },
-                } }) }), _jsx(Box, { sx: { maxHeight: 240, overflowY: 'auto' }, children: isLoading && searchText.trim() ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 2 }, children: _jsx(CircularProgress, { size: 24 }) })) : suggestions.length === 0 && searchText.trim() ? (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "No results found" })) : searchText.trim() ? (suggestions.map((user) => (_jsxs(Box, { onClick: () => onUserSelect(user), sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 1,
-                    px: 1.5,
-                    py: 1,
-                    cursor: 'pointer',
-                    '&:hover': { bgcolor: 'action.hover' },
-                }, children: [_jsx(Avatar, { src: user.photo, alt: user.displayName, sx: { width: 32, height: 32 }, children: user.displayName?.[0] }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Typography, { variant: "body2", noWrap: true, children: user.displayName }), _jsx(Typography, { variant: "caption", color: "text.secondary", noWrap: true, children: user.email })] })] }, user.id || user.email || user.displayName)))) : (_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { py: 2, textAlign: 'center' }, children: "Type to search..." })) }), selectedUser && (_jsx(Box, { sx: { p: 1.5, pt: 1, borderTop: 1, borderColor: 'divider' }, children: _jsx(Button, { size: "small", fullWidth: true, onClick: onClearUser, children: "Clear Filter" }) }))] }));
-PeopleFilterPopover.displayName = 'PeopleFilterPopover';

package/dist/esm/ColumnHeaderFilter/TextFilterPopover.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextField, Button, Box, InputAdornment } from '@mui/material';
-import { Search as SearchIcon } from '@mui/icons-material';
-export const TextFilterPopover = ({ value, onValueChange, onApply, onClear, }) => (_jsxs(Box, { sx: { width: 260 }, children: [_jsx(Box, { sx: { p: 1.5 }, children: _jsx(TextField, { placeholder: "Enter search term...", value: value, onChange: (e) => onValueChange(e.target.value), onKeyDown: (e) => {
-                    e.stopPropagation();
-                    if (e.key === 'Enter') {
-                        e.preventDefault();
-                        onApply();
-                    }
-                }, autoComplete: "off", size: "small", fullWidth: true, slotProps: {
-                    input: {
-                        startAdornment: (_jsx(InputAdornment, { position: "start", children: _jsx(SearchIcon, { fontSize: "small" }) })),
-                    },
-                } }) }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, p: 1.5, pt: 0 }, children: [_jsx(Button, { size: "small", disabled: !value, onClick: onClear, children: "Clear" }), _jsx(Button, { size: "small", variant: "contained", onClick: onApply, children: "Apply" })] })] }));
-TextFilterPopover.displayName = 'TextFilterPopover';

package/dist/esm/ColumnHeaderFilter/index.js

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

package/dist/esm/ColumnHeaderMenu/ColumnHeaderMenu.js

@@ -1,61 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useEffect, useState } from 'react';
-import { Menu, MenuItem, Divider } from '@mui/material';
-import { getColumnHeaderMenuItems } from '@alaarab/ogrid-react';
-/**
- * Column header dropdown menu for pin/sort/autosize actions.
- * Uses Material UI Menu component with anchor position.
- */
-export function ColumnHeaderMenu(props) {
-    const { isOpen, anchorElement, onClose, onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll, canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable, } = props;
-    const [anchorPosition, setAnchorPosition] = useState(undefined);
-    useEffect(() => {
-        if (isOpen && anchorElement) {
-            const rect = anchorElement.getBoundingClientRect();
-            setAnchorPosition({
-                top: rect.bottom + 4,
-                left: rect.left,
-            });
-        }
-        else {
-            setAnchorPosition(undefined);
-        }
-    }, [isOpen, anchorElement]);
-    const menuInput = useMemo(() => ({
-        canPinLeft,
-        canPinRight,
-        canUnpin,
-        currentSort,
-        isSortable,
-        isResizable,
-    }), [canPinLeft, canPinRight, canUnpin, currentSort, isSortable, isResizable]);
-    const items = useMemo(() => getColumnHeaderMenuItems(menuInput), [menuInput]);
-    const handlers = useMemo(() => ({
-        pinLeft: onPinLeft,
-        pinRight: onPinRight,
-        unpin: onUnpin,
-        sortAsc: onSortAsc,
-        sortDesc: onSortDesc,
-        clearSort: onClearSort,
-        autosizeThis: onAutosizeThis,
-        autosizeAll: onAutosizeAll,
-    }), [onPinLeft, onPinRight, onUnpin, onSortAsc, onSortDesc, onClearSort, onAutosizeThis, onAutosizeAll]);
-    return (_jsx(Menu, { open: isOpen && !!anchorPosition, onClose: onClose, anchorReference: "anchorPosition", anchorPosition: anchorPosition, slotProps: {
-            paper: {
-                sx: {
-                    minWidth: 140,
-                },
-            },
-        }, children: items.flatMap((item, idx) => {
-            const elements = [
-                _jsx(MenuItem, { disabled: item.disabled, onClick: () => {
-                        handlers[item.id]();
-                        onClose();
-                    }, children: item.label }, item.id),
-            ];
-            if (item.divider && idx < items.length - 1) {
-                elements.push(_jsx(Divider, {}, `${item.id}-divider`));
-            }
-            return elements;
-        }) }));
-}

package/dist/esm/ColumnHeaderMenu/index.js

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