material-react-table 1.1.0 → 1.1.1

package/dist/cjs/index.js

@@ -1364,7 +1364,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(material.Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions },
-            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
+            React__default["default"].createElement(material.IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-0.2rem', opacity: 0.5, transition: 'opacity 150ms', width: '2rem', '&:hover': {
                         opacity: 1,
                     } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
@@ -1539,7 +1539,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     ? '100px'
                     : !filterChipLabel
                         ? '120px'
-                        : 'auto', width: '100%', '& .MuiSelect-icon': {
+                        : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
                     mr: '1.5rem',
                 } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                 ? textFieldProps.sx(theme)
@@ -1698,31 +1698,36 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    return (React__default["default"].createElement(material.Divider, { flexItem: true, orientation: "vertical", onDoubleClick: () => column.resetSize(), sx: (theme) => ({
-            borderRadius: '2px',
-            borderRightWidth: '2px',
+    return (React__default["default"].createElement(material.Box, { onDoubleClick: () => column.resetSize(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
             cursor: 'col-resize',
-            height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
             mr: density === 'compact' ? '-0.5rem' : '-1rem',
-            opacity: 0.8,
             position: 'absolute',
             right: '1px',
-            touchAction: 'none',
-            transition: column.getIsResizing()
-                ? undefined
-                : 'all 150ms ease-in-out',
-            userSelect: 'none',
-            zIndex: 4,
-            '&:active': {
+            px: '4px',
+            '&:active > hr': {
                 backgroundColor: theme.palette.info.main,
                 opacity: 1,
             },
-        }), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+        }), style: {
             transform: column.getIsResizing()
                 ? `translateX(${((_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0) /
                     (columnResizeMode === 'onChange' ? 16 : 1)}px)`
-                : 'none',
-        } }));
+                : undefined,
+        } },
+        React__default["default"].createElement(material.Divider, { flexItem: true, orientation: "vertical", sx: {
+                borderRadius: '2px',
+                borderWidth: '2px',
+                height: showColumnFilters && columnDefType === 'data'
+                    ? '3.5rem'
+                    : '1.75rem',
+                opacity: 0.8,
+                touchAction: 'none',
+                transition: column.getIsResizing()
+                    ? undefined
+                    : 'all 150ms ease-in-out',
+                userSelect: 'none',
+                zIndex: 4,
+            } })));
 };
 
 const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
@@ -2323,7 +2328,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', verticalAlign: 'top' }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
+                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({ column, table, theme, tableCellProps }))) }),
         React__default["default"].createElement(React__default["default"].Fragment, null, footer.isPlaceholder
             ? null
             : (_c = (_b = (columnDef.Footer instanceof Function