material-react-table 0.7.0-alpha.11 → 0.7.0-alpha.12

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

@@ -511,7 +511,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      onColumnHide = tableInstance.options.onColumnHide;
+      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
 
   var _getState = getState(),
       columnVisibility = _getState.columnVisibility;
@@ -531,7 +531,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       column.toggleVisibility();
     }
 
-    onColumnHide == null ? void 0 : onColumnHide({
+    onToggleColumnVisibility == null ? void 0 : onToggleColumnVisibility({
       column: column,
       columnVisibility: columnVisibility,
       tableInstance: tableInstance
@@ -1156,7 +1156,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
-      showSearch = _getState.showSearch;
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -1189,7 +1189,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     tableInstance: tableInstance
   }) : muiSearchTextFieldProps;
   return React.createElement(Collapse, {
-    "in": showSearch,
+    "in": showGlobalFilter,
     orientation: "horizontal"
   }, React.createElement(TextField, Object.assign({
     id: "mrt-" + idPrefix + "-search-text-field",
@@ -1251,19 +1251,27 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _tableInstance$option2.FullscreenExitIcon,
       FullscreenIcon = _tableInstance$option2.FullscreenIcon,
       localization = _tableInstance$option.localization,
+      onToggleFullScreen = _tableInstance$option.onToggleFullScreen,
       setIsFullScreen = tableInstance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var handleToggleFullScreen = function handleToggleFullScreen(event) {
+    onToggleFullScreen == null ? void 0 : onToggleFullScreen({
+      event: event,
+      isFullScreen: !isFullScreen,
+      tableInstance: tableInstance
+    });
+    setIsFullScreen(!isFullScreen);
+  };
+
   return React.createElement(Tooltip, {
     arrow: true,
     title: localization.toggleFullScreen
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: function onClick() {
-      return setIsFullScreen(!isFullScreen);
-    },
+    onClick: handleToggleFullScreen,
     size: "small"
   }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
 };
@@ -1310,19 +1318,27 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _tableInstance$option2.DensityMediumIcon,
       DensitySmallIcon = _tableInstance$option2.DensitySmallIcon,
       localization = _tableInstance$option.localization,
+      onToggleDensePadding = _tableInstance$option.onToggleDensePadding,
       setIsDensePadding = tableInstance.setIsDensePadding;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
+  var handleToggleDensePadding = function handleToggleDensePadding(event) {
+    onToggleDensePadding == null ? void 0 : onToggleDensePadding({
+      event: event,
+      isDensePadding: !isDensePadding,
+      tableInstance: tableInstance
+    });
+    setIsDensePadding(!isDensePadding);
+  };
+
   return React.createElement(Tooltip, {
     arrow: true,
     title: localization.toggleDensePadding
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.toggleDensePadding,
-    onClick: function onClick() {
-      return setIsDensePadding(!isDensePadding);
-    },
+    onClick: handleToggleDensePadding,
     size: "small"
   }, rest), isDensePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
 };
@@ -1338,25 +1354,33 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _tableInstance$option2.FilterListIcon,
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       localization = _tableInstance$option.localization,
+      onToggleShowFilters = _tableInstance$option.onToggleShowFilters,
       setShowFilters = tableInstance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
+  var handleToggleShowFilters = function handleToggleShowFilters(event) {
+    onToggleShowFilters == null ? void 0 : onToggleShowFilters({
+      event: event,
+      showFilters: !showFilters,
+      tableInstance: tableInstance
+    });
+    setShowFilters(!showFilters);
+  };
+
   return React.createElement(Tooltip, {
     arrow: true,
     title: localization.showHideFilters
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: function onClick() {
-      return setShowFilters(!showFilters);
-    },
+    onClick: handleToggleShowFilters,
     size: "small"
   }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
 };
 
 var _excluded$4 = ["tableInstance"];
-var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
+var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   var tableInstance = _ref.tableInstance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
@@ -1368,17 +1392,23 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      setShowSearch = tableInstance.setShowSearch;
+      onToggleShowGlobalFilter = _tableInstance$option.onToggleShowGlobalFilter,
+      setShowGlobalFilter = tableInstance.setShowGlobalFilter;
 
   var _getState = getState(),
-      showSearch = _getState.showSearch;
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
     tableInstance: tableInstance
   }) : muiSearchTextFieldProps;
 
-  var handleToggleSearch = function handleToggleSearch() {
-    setShowSearch(!showSearch);
+  var handleToggleSearch = function handleToggleSearch(event) {
+    onToggleShowGlobalFilter == null ? void 0 : onToggleShowGlobalFilter({
+      event: event,
+      showGlobalFilter: !showGlobalFilter,
+      tableInstance: tableInstance
+    });
+    setShowGlobalFilter(!showGlobalFilter);
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
 
@@ -1392,7 +1422,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
   }, React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleToggleSearch
-  }, rest), showSearch ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
+  }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
@@ -1412,7 +1442,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
       MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
       MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
+      MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
       tableInstance: tableInstance
     }));
   }
@@ -1424,7 +1454,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       alignItems: 'center',
       p: '0 0.5rem'
     }
-  }, enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleSearchButton, {
+  }, enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
     tableInstance: tableInstance
@@ -2811,9 +2841,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showFilters = _useState4[0],
       setShowFilters = _useState4[1];
 
-  var _useState5 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearch) != null ? _props$initialState$s2 : false),
-      showSearch = _useState5[0],
-      setShowSearch = _useState5[1];
+  var _useState5 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showGlobalFilter) != null ? _props$initialState$s2 : false),
+      showGlobalFilter = _useState5[0],
+      setShowGlobalFilter = _useState5[1];
 
   var _useState6 = useState({
     pageIndex: (_props$initialState$p = (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.pagination) == null ? void 0 : _props$initialState5$.pageIndex) != null ? _props$initialState$p : 0,
@@ -2954,7 +2984,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       //@ts-ignore
       pagination: pagination,
       showFilters: showFilters,
-      showSearch: showSearch
+      showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
     setCurrentEditingRow: setCurrentEditingRow,
@@ -2963,7 +2993,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setIsDensePadding: setIsDensePadding,
     setIsFullScreen: setIsFullScreen,
     setShowFilters: setShowFilters,
-    setShowSearch: setShowSearch
+    setShowGlobalFilter: setShowGlobalFilter
   });
 
   return React.createElement(MRT_TablePaper, {