material-react-table 0.7.0-alpha.5 → 0.7.0-alpha.8

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

@@ -98,6 +98,7 @@ var MRT_DefaultLocalization_EN = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   rowActions: 'Row Actions',
+  rowNumber: '#',
   rowNumbers: 'Row Numbers',
   save: 'Save',
   search: 'Search',
@@ -912,7 +913,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       EditIcon = _tableInstance$option.icons.EditIcon,
-      enableRowEditing = _tableInstance$option.enableRowEditing,
+      enableEditing = _tableInstance$option.enableEditing,
       localization = _tableInstance$option.localization,
       renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems;
 
@@ -928,7 +929,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     MenuListProps: {
       dense: isDensePadding
     }
-  }, enableRowEditing && React.createElement(MenuItem, {
+  }, enableEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
@@ -951,7 +952,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       CancelIcon = _tableInstance$option2.CancelIcon,
       SaveIcon = _tableInstance$option2.SaveIcon,
       localization = _tableInstance$option.localization,
-      onRowEditSubmit = _tableInstance$option.onRowEditSubmit,
+      onEditSubmit = _tableInstance$option.onEditSubmit,
       setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
 
   var _getState = getState(),
@@ -965,7 +966,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   };
 
   var handleSave = function handleSave() {
-    onRowEditSubmit == null ? void 0 : onRowEditSubmit({
+    onEditSubmit == null ? void 0 : onEditSubmit({
       row: currentEditingRow != null ? currentEditingRow : row,
       tableInstance: tableInstance
     });
@@ -1008,7 +1009,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableRowEditing = _tableInstance$option.enableRowEditing,
+      enableEditing = _tableInstance$option.enableEditing,
       _tableInstance$option2 = _tableInstance$option.icons,
       EditIcon = _tableInstance$option2.EditIcon,
       MoreHorizIcon = _tableInstance$option2.MoreHorizIcon,
@@ -1030,7 +1031,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     setAnchorEl(event.currentTarget);
   };
 
-  var handleEdit = function handleEdit() {
+  var handleStartEditMode = function handleStartEditMode() {
     setCurrentEditingRow(_extends({}, row));
     setAnchorEl(null);
   };
@@ -1041,13 +1042,13 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
     row: row,
     tableInstance: tableInstance
-  }) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
+  }) : !renderRowActionMenuItems && enableEditing ? React.createElement(Tooltip, {
     placement: "right",
     arrow: true,
     title: localization.edit
   }, React.createElement(IconButton, {
     sx: commonIconButtonStyles,
-    onClick: handleEdit
+    onClick: handleStartEditMode
   }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -1060,7 +1061,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     sx: commonIconButtonStyles
   }, React.createElement(MoreHorizIcon, null))), React.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
-    handleEdit: handleEdit,
+    handleEdit: handleStartEditMode,
     row: row,
     setAnchorEl: setAnchorEl,
     tableInstance: tableInstance
@@ -2145,19 +2146,33 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableRowEditing = _tableInstance$option.enableRowEditing,
-      muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps;
+      enableEditing = _tableInstance$option.enableEditing,
+      muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
+      setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
+
+  var _useState = useState(cell.value),
+      value = _useState[0],
+      setValue = _useState[1];
+
   var column = cell.column,
       row = cell.row;
 
   var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+    column.onCellEditChange == null ? void 0 : column.onCellEditChange({
+      event: event,
+      cell: cell,
+      tableInstance: tableInstance
+    });
+  };
+
+  var handleBlur = function handleBlur(event) {
     if (getState().currentEditingRow) {
-      row.values[column.id] = event.target.value; // setCurrentEditingRow({
-      //   ...getState().currentEditingRow,
-      // });
+      row.values[column.id] = value;
+      setCurrentEditingRow(_extends({}, getState().currentEditingRow));
     }
 
-    column.onCellEditChange == null ? void 0 : column.onCellEditChange({
+    column.onCellEditBlur == null ? void 0 : column.onCellEditBlur({
       event: event,
       cell: cell,
       tableInstance: tableInstance
@@ -2175,7 +2190,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
 
-  if (enableRowEditing && column.enableEditing !== false && column.Edit) {
+  if (enableEditing && column.enableEditing !== false && column.Edit) {
     return React.createElement(React.Fragment, null, column.Edit == null ? void 0 : column.Edit({
       cell: cell,
       tableInstance: tableInstance
@@ -2184,12 +2199,13 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   return React.createElement(TextField, Object.assign({
     margin: "dense",
+    onBlur: handleBlur,
     onChange: handleChange,
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
     placeholder: column.header,
-    value: cell.value,
+    value: value,
     variant: "standard"
   }, textFieldProps));
 };
@@ -2255,7 +2271,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _row$subRows, _row$subRows2;
+  var _row$subRows, _cell$column$Cell, _cell$column, _row$subRows2;
 
   var cell = _ref.cell,
       tableInstance = _ref.tableInstance;
@@ -2264,6 +2280,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       _tableInstance$option = tableInstance.options,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
       enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      enableEditing = _tableInstance$option.enableEditing,
       isLoading = _tableInstance$option.isLoading,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
@@ -2308,16 +2325,16 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.Cell == null ? void 0 : column.Cell({
+  }, muiTableBodyCellSkeletonProps)) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : enableEditing && column.enableEditing !== false && (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id ? React.createElement(MRT_EditCellTextField, {
     cell: cell,
     tableInstance: tableInstance
-  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : column.enableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id ? React.createElement(MRT_EditCellTextField, {
+  }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
+  }, cell.renderCell()), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_cell$column$Cell = (_cell$column = cell.column) == null ? void 0 : _cell$column.Cell == null ? void 0 : _cell$column.Cell({
     cell: cell,
     tableInstance: tableInstance
-  }, cell.renderCell()), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")")));
+  })) != null ? _cell$column$Cell : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")")));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
@@ -2817,9 +2834,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     return createTable();
   }, []);
   var displayColumns = useMemo(function () {
-    var _props$localization, _props$localization2, _props$localization3, _props$localization4;
+    var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [(props.enableRowActions || props.enableRowEditing) && createDisplayColumn(table, {
+    return [(props.enableRowActions || props.enableEditing) && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React.createElement(MRT_ToggleRowActionMenuButton, {
@@ -2872,15 +2889,17 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         return cell.row.index + 1;
       },
       Header: function Header() {
-        return '#';
+        var _props$localization4;
+
+        return (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.rowNumber;
       },
-      header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.rowNumbers,
+      header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
       id: 'mrt-row-numbers',
       maxWidth: 40,
       width: 40,
       minWidth: 40
     })].filter(Boolean);
-  }, [props.enableExpandAll, props.enableExpanded, props.enableRowActions, props.enableRowEditing, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization]);
+  }, [table, props.enableExpandAll, props.enableExpanded, props.enableRowActions, props.enableGrouping, props.enableEditing, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization]);
   var columns = useMemo(function () {
     return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterTypes) : createDataColumn(table, column, currentFilterTypes);
@@ -2944,7 +2963,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
 var _excluded$5 = ["enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 
-window.performance = window.performance || {
+global.performance = global.performance || {
   now: function now() {
     return new Date().getTime();
   }