material-react-table 2.0.6 → 2.1.0

package/dist/index.esm.js

@@ -22,7 +22,7 @@ import Collapse from '@mui/material/Collapse';
 import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
 import TableFooter from '@mui/material/TableFooter';
 import TableHead from '@mui/material/TableHead';
-import { alpha as alpha$1 } from '@mui/material';
+import { alpha as alpha$1, useTheme as useTheme$1 } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import Checkbox from '@mui/material/Checkbox';
@@ -595,7 +595,9 @@ const MRT_EditCellTextField = (_a) => {
             ? columnDef.header
             : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
-            : undefined, select: isSelectEdit, size: "small", value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), { sx: (theme) => {
+            : undefined, select: isSelectEdit, size: "small", value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign(Object.assign({}, (textFieldProps.variant !== 'outlined'
+            ? { disableUnderline: editDisplayMode === 'table' }
+            : {})), textFieldProps.InputProps), { sx: (theme) => {
                 var _a;
                 return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
             } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
@@ -617,7 +619,7 @@ const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
     var { cell, measureElement, numRows, rowIndex, rowRef, table, virtualIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowIndex", "rowRef", "table", "virtualIndex"]);
     const theme = useTheme();
-    const { getState, options: { columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberDisplayMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberDisplayMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -648,23 +650,23 @@ const MRT_TableBodyCell = (_a) => {
         const isFirstColumn = getIsFirstColumn(column, table);
         const isLastColumn = getIsLastColumn(column, table);
         const isLastRow = numRows && rowIndex === numRows - 1;
-        const showResizeBorder = columnSizingInfo.isResizingColumn === column.id &&
-            columnResizeMode === 'onChange';
+        const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
+        const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
         const borderStyle = showResizeBorder
             ? `2px solid ${draggingBorderColor} !important`
             : isDraggingColumn || isDraggingRow
                 ? `1px dashed ${theme.palette.grey[500]} !important`
-                : isHoveredColumn ||
-                    isHoveredRow ||
-                    columnSizingInfo.isResizingColumn === column.id
+                : isHoveredColumn || isHoveredRow || isResizingColumn
                     ? `2px dashed ${draggingBorderColor} !important`
                     : undefined;
         if (showResizeBorder) {
-            return { borderRight: borderStyle };
+            return columnResizeDirection === 'ltr'
+                ? { borderRight: borderStyle }
+                : { borderLeft: borderStyle };
         }
         return borderStyle
             ? {
-                borderBottom: isDraggingRow || isHoveredRow || isLastRow
+                borderBottom: isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
                     ? borderStyle
                     : undefined,
                 borderLeft: isDraggingColumn ||
@@ -1644,7 +1646,7 @@ const MRT_FilterTextField = (_a) => {
                 lineHeight: '0.8rem',
                 whiteSpace: 'nowrap',
             },
-        }, InputProps: endAdornment //hack because mui looks for presense of endAdornment key instead of undefined
+        }, InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
             ? { endAdornment, startAdornment }
             : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsx("label", { children: localization.filterMode.replace('{filterType}', 
             // @ts-ignore
@@ -1888,15 +1890,22 @@ const MRT_TableHeadCellGrabHandle = (_a) => {
 const MRT_TableHeadCellResizeHandle = (_a) => {
     var _b;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
-    const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
     const { column } = header;
+    const mx = density === 'compact'
+        ? '-8px'
+        : density === 'comfortable'
+            ? '-16px'
+            : '-24px';
+    const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
     return (jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
             setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
             column.resetSize();
         }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
             transform: column.getIsResizing() && columnResizeMode === 'onEnd'
-                ? `translateX(${(_b = getState().columnSizingInfo.deltaOffset) !== null && _b !== void 0 ? _b : 0}px)`
+                ? `translateX(${(columnResizeDirection === 'rtl' ? -1 : 1) *
+                    ((_b = getState().columnSizingInfo.deltaOffset) !== null && _b !== void 0 ? _b : 0)}px)`
                 : undefined,
         }, sx: (theme) => ({
             '&:active > hr': {
@@ -1904,14 +1913,12 @@ const MRT_TableHeadCellResizeHandle = (_a) => {
                 opacity: header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
             },
             cursor: 'col-resize',
-            mr: density === 'compact'
-                ? '-8px'
-                : density === 'comfortable'
-                    ? '-16px'
-                    : '-24px',
+            left: columnResizeDirection === 'rtl' ? lr : undefined,
+            ml: columnResizeDirection === 'rtl' ? mx : undefined,
+            mr: columnResizeDirection === 'ltr' ? mx : undefined,
             position: 'absolute',
             px: '4px',
-            right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
+            right: columnResizeDirection === 'ltr' ? lr : undefined,
         }), children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: (theme) => (Object.assign({ borderRadius: '2px', borderWidth: '2px', height: '24px', touchAction: 'none', transform: 'translateX(4px)', transition: column.getIsResizing()
                     ? undefined
                     : 'all 150ms ease-in-out', userSelect: 'none', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) }) }));
@@ -1955,7 +1962,7 @@ const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnFilterDisplayMode, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -1996,7 +2003,9 @@ const MRT_TableHeadCell = (_a) => {
                     ? `2px dashed ${draggingBorderColor}`
                     : undefined;
         if (showResizeBorder) {
-            return { borderRight: borderStyle };
+            return columnResizeDirection === 'ltr'
+                ? { borderRight: borderStyle }
+                : { borderLeft: borderStyle };
         }
         const draggingBorders = borderStyle
             ? {
@@ -3573,7 +3582,8 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    const theme = useTheme$1();
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
@@ -3581,6 +3591,9 @@ const useMRT_TableOptions = (_a) => {
     const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
     const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
+    if (!columnResizeDirection) {
+        columnResizeDirection = theme.direction || 'ltr';
+    }
     layoutMode =
         layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
     if (layoutMode === 'semantic' &&
@@ -3601,6 +3614,7 @@ const useMRT_TableOptions = (_a) => {
     }
     return Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded,
         columnFilterDisplayMode,
+        columnResizeDirection,
         columnResizeMode,
         createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editDisplayMode,
         enableBottomToolbar,