material-react-table 0.40.2 → 0.40.3

package/dist/cjs/menus/MRT_RowActionMenu.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, MouseEvent } from 'react';
 import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
-    handleEdit: () => void;
+    handleEdit: (event: MouseEvent) => void;
     row: MRT_Row;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     table: MRT_TableInstance;

package/dist/esm/material-react-table.esm.js

@@ -274,12 +274,15 @@ const MRT_ExpandButton = ({ row, table }) => {
     const iconButtonProps = muiExpandButtonProps instanceof Function
         ? muiExpandButtonProps({ table, row })
         : muiExpandButtonProps;
-    const handleToggleExpand = () => {
+    const handleToggleExpand = (event) => {
+        var _a;
+        event.stopPropagation();
         row.toggleExpanded();
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
     return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expand },
         React.createElement("span", null,
-            React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel, onClick: handleToggleExpand }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
                     ? iconButtonProps.sx(theme)
                     : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
                 React.createElement(ExpandMoreIcon, { style: {
@@ -458,7 +461,11 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.move },
-        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
+        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
+            }, sx: (theme) => (Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
                 }, '&:active': {
@@ -909,7 +916,7 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
             values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
         });
     };
-    return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
+    return (React.createElement(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' } }, variant === 'icon' ? (React.createElement(React.Fragment, null,
         React.createElement(Tooltip, { arrow: true, title: localization.cancel },
             React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
                 React.createElement(CancelIcon, null))),
@@ -930,7 +937,7 @@ const commonIconButtonStyles = {
         opacity: 1,
     },
 };
-const MRT_ToggleRowActionMenuButton = ({ cell, row, table }) => {
+const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
     const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { editingRow } = getState();
     const [anchorEl, setAnchorEl] = useState(null);
@@ -939,7 +946,8 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table }) => {
         event.preventDefault();
         setAnchorEl(event.currentTarget);
     };
-    const handleStartEditMode = () => {
+    const handleStartEditMode = (event) => {
+        event.stopPropagation();
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
@@ -971,7 +979,11 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
                 ? selectAllMode === 'all'
                     ? table.getToggleAllRowsSelectedHandler()
                     : table.getToggleAllPageRowsSelectedHandler()
-                : row.getToggleSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
+                : row.getToggleSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+            }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
                 ? checkboxProps.sx(theme)
                 : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
 };
@@ -1831,7 +1843,11 @@ const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
+        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
+        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown })));
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -1839,7 +1855,8 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
     const { column, row } = cell;
     const { columnDef } = column;
     const [copied, setCopied] = useState(false);
-    const handleCopy = (text) => {
+    const handleCopy = (event, text) => {
+        event.stopPropagation();
         navigator.clipboard.writeText(text);
         setCopied(true);
         setTimeout(() => setCopied(false), 4000);
@@ -1855,7 +1872,7 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         : columnDef.muiTableBodyCellCopyButtonProps;
     const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
     return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: copied ? localization.copiedToClipboard : localization.clickToCopy },
-        React.createElement(Button, Object.assign({ onClick: () => handleCopy(cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
+        React.createElement(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
                 ? buttonProps.sx(theme)
                 : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))) }), children)));
 };