material-react-table 2.6.1 → 2.7.0

package/src/hooks/useMRT_Effects.ts

@@ -11,6 +11,7 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
 ) => {
   const {
     getIsSomeRowsPinned,
+    getPrePaginationRowModel,
     getState,
     options: { enablePagination, enableRowPinning, rowCount },
   } = table;
@@ -24,6 +25,8 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
     sorting,
   } = getState();
 
+  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
+
   const rerender = useReducer(() => ({}), {})[1];
   const isMounted = useRef(false);
   const initialBodyHeight = useRef<string>();
@@ -57,13 +60,11 @@ export const useMRT_Effects = <TData extends MRT_RowData>(
   useEffect(() => {
     if (!enablePagination || isLoading || showSkeletons) return;
     const { pageIndex, pageSize } = pagination;
-    const totalRowCount =
-      rowCount ?? table.getPrePaginationRowModel().rows.length;
     const firstVisibleRowIndex = pageIndex * pageSize;
-    if (firstVisibleRowIndex > totalRowCount) {
-      table.setPageIndex(Math.floor(totalRowCount / pageSize));
+    if (firstVisibleRowIndex >= totalRowCount) {
+      table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
     }
-  }, [rowCount, table.getPrePaginationRowModel().rows.length]);
+  }, [totalRowCount]);
 
   //turn off sort when global filter is looking for ranked results
   const appliedSort = useRef<MRT_SortingState>(sorting);

package/src/hooks/useMRT_Rows.ts

@@ -19,6 +19,7 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
     getState,
     getTopRows,
     options: {
+      createDisplayMode,
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowPinning,
@@ -27,11 +28,18 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
       manualGrouping,
       manualPagination,
       manualSorting,
+      positionCreatingRow,
       rowPinningDisplayMode,
     },
   } = table;
-  const { expanded, globalFilter, pagination, rowPinning, sorting } =
-    getState();
+  const {
+    creatingRow,
+    expanded,
+    globalFilter,
+    pagination,
+    rowPinning,
+    sorting,
+  } = getState();
 
   const shouldRankRows = useMemo(
     () =>
@@ -73,14 +81,32 @@ export const useMRT_Rows = <TData extends MRT_RowData>(
         ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
       ];
     }
+    if (
+      positionCreatingRow !== undefined &&
+      creatingRow &&
+      createDisplayMode === 'row'
+    ) {
+      const creatingRowIndex = !isNaN(+positionCreatingRow)
+        ? +positionCreatingRow
+        : positionCreatingRow === 'top'
+          ? 0
+          : rows.length;
+      rows = [
+        ...rows.slice(0, creatingRowIndex),
+        creatingRow,
+        ...rows.slice(creatingRowIndex),
+      ];
+    }
 
     return rows;
   }, [
-    shouldRankRows,
-    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
+    creatingRow,
     pagination.pageIndex,
     pagination.pageSize,
+    positionCreatingRow,
     rowPinning,
+    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
+    shouldRankRows,
   ]);
 
   return rows;

package/src/hooks/useMRT_TableInstance.ts

@@ -29,6 +29,7 @@ import {
   type MRT_DensityState,
   type MRT_FilterOption,
   type MRT_GroupingState,
+  type MRT_PaginationState,
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -62,6 +63,8 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     return initState;
   }, []);
 
+  tableOptions.initialState = initialState;
+
   const [creatingRow, _setCreatingRow] = useState<MRT_Row<TData> | null>(
     initialState.creatingRow ?? null,
   );
@@ -81,7 +84,7 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
         })),
       ),
     );
-  const [columnOrder, setColumnOrder] = useState<MRT_ColumnOrderState>(
+  const [columnOrder, onColumnOrderChange] = useState<MRT_ColumnOrderState>(
     initialState.columnOrder ?? [],
   );
   const [density, setDensity] = useState<MRT_DensityState>(
@@ -101,7 +104,7 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
   const [globalFilterFn, setGlobalFilterFn] = useState<MRT_FilterOption>(
     initialState.globalFilterFn ?? 'fuzzy',
   );
-  const [grouping, setGrouping] = useState<MRT_GroupingState>(
+  const [grouping, onGroupingChange] = useState<MRT_GroupingState>(
     initialState.grouping ?? [],
   );
   const [hoveredColumn, setHoveredColumn] = useState<Partial<
@@ -113,6 +116,9 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
   const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
   );
+  const [pagination, onPaginationChange] = useState<MRT_PaginationState>(
+    initialState?.pagination ?? { pageIndex: 0, pageSize: 10 },
+  );
   const [showAlertBanner, setShowAlertBanner] = useState<boolean>(
     tableOptions.initialState?.showAlertBanner ?? false,
   );
@@ -126,32 +132,40 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     initialState?.showToolbarDropZone ?? false,
   );
 
-  const displayColumns = useMRT_DisplayColumns({
+  tableOptions.state = {
+    columnFilterFns,
     columnOrder,
     creatingRow,
+    density,
+    draggingColumn,
+    draggingRow,
+    editingCell,
+    editingRow,
+    globalFilterFn,
     grouping,
-    tableOptions,
-  });
+    hoveredColumn,
+    hoveredRow,
+    isFullScreen,
+    pagination,
+    showAlertBanner,
+    showColumnFilters,
+    showGlobalFilter,
+    showToolbarDropZone,
+    ...tableOptions.state,
+  };
+
+  const displayColumns = useMRT_DisplayColumns(tableOptions);
 
-  const columnDefs = useMemo(
+  tableOptions.columns = useMemo(
     () =>
       prepareColumns({
-        aggregationFns: tableOptions.aggregationFns as any,
         columnDefs: [...displayColumns, ...tableOptions.columns],
-        columnFilterFns: tableOptions.state?.columnFilterFns ?? columnFilterFns,
-        defaultDisplayColumn: tableOptions.defaultDisplayColumn ?? {},
-        filterFns: tableOptions.filterFns as any,
-        sortingFns: tableOptions.sortingFns as any,
+        tableOptions,
       }),
-    [
-      columnFilterFns,
-      displayColumns,
-      tableOptions.columns,
-      tableOptions.state?.columnFilterFns,
-    ],
+    [displayColumns, tableOptions.columns],
   );
 
-  const data: TData[] = useMemo(
+  tableOptions.data = useMemo(
     () =>
       (tableOptions.state?.isLoading || tableOptions.state?.showSkeletons) &&
       !tableOptions.data.length
@@ -209,58 +223,35 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
       ? getSortedRowModel()
       : undefined,
     getSubRows: (row) => row?.subRows,
-    onColumnOrderChange: setColumnOrder,
-    onGroupingChange: setGrouping,
+    onColumnOrderChange,
+    onGroupingChange,
+    onPaginationChange,
     ...tableOptions,
-    //@ts-ignore
-    columns: columnDefs,
-    data,
     globalFilterFn: tableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
-    initialState,
-    state: {
-      columnFilterFns,
-      columnOrder,
-      creatingRow,
-      density,
-      draggingColumn,
-      draggingRow,
-      editingCell,
-      editingRow,
-      globalFilterFn,
-      grouping,
-      hoveredColumn,
-      hoveredRow,
-      isFullScreen,
-      showAlertBanner,
-      showColumnFilters,
-      showGlobalFilter,
-      showToolbarDropZone,
-      ...tableOptions.state,
-    },
   }) as MRT_TableInstance<TData>;
 
-  // @ts-ignore
+  //@ts-ignore
   table.refs = {
-    // @ts-ignore
+    //@ts-ignore
     bottomToolbarRef,
     editInputRefs,
     filterInputRefs,
-    // @ts-ignore
+    //@ts-ignore
     searchInputRef,
-    // @ts-ignore
+    //@ts-ignore
     tableContainerRef,
-    // @ts-ignore
+    //@ts-ignore
     tableFooterRef,
     tableHeadCellRefs,
-    // @ts-ignore
+    //@ts-ignore
     tableHeadRef,
-    // @ts-ignore
+    //@ts-ignore
     tablePaperRef,
-    // @ts-ignore
+    //@ts-ignore
     topToolbarRef,
   };
 
-  const setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+  table.setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
     let _row = row;
     if (row === true) {
       _row = createRow(table);
@@ -268,8 +259,6 @@ export const useMRT_TableInstance: <TData extends MRT_RowData>(
     tableOptions?.onCreatingRowChange?.(_row as MRT_Row<TData> | null) ??
       _setCreatingRow(_row as MRT_Row<TData> | null);
   };
-
-  table.setCreatingRow = setCreatingRow;
   table.setColumnFilterFns =
     tableOptions.onColumnFilterFnsChange ?? setColumnFilterFns;
   table.setDensity = tableOptions.onDensityChange ?? setDensity;

package/src/hooks/useMRT_TableOptions.ts

@@ -83,6 +83,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   manualSorting,
   paginationDisplayMode = 'default',
   positionActionsColumn = 'first',
+  positionCreatingRow = 'top',
   positionExpandColumn = 'first',
   positionGlobalFilter = 'right',
   positionPagination = 'bottom',
@@ -197,6 +198,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     manualSorting,
     paginationDisplayMode,
     positionActionsColumn,
+    positionCreatingRow,
     positionExpandColumn,
     positionGlobalFilter,
     positionPagination,

package/src/icons.ts

@@ -32,43 +32,7 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
-export interface MRT_Icons {
-  ArrowDownwardIcon: any;
-  ArrowRightIcon: any;
-  CancelIcon: any;
-  ChevronLeftIcon: any;
-  ChevronRightIcon: any;
-  ClearAllIcon: any;
-  CloseIcon: any;
-  DensityLargeIcon: any;
-  DensityMediumIcon: any;
-  DensitySmallIcon: any;
-  DragHandleIcon: any;
-  DynamicFeedIcon: any;
-  EditIcon: any;
-  ExpandMoreIcon: any;
-  FilterAltIcon: any;
-  FilterListIcon: any;
-  FilterListOffIcon: any;
-  FirstPageIcon?: any;
-  FullscreenExitIcon: any;
-  FullscreenIcon: any;
-  KeyboardDoubleArrowDownIcon: any;
-  LastPageIcon?: any;
-  MoreHorizIcon: any;
-  MoreVertIcon: any;
-  PushPinIcon: any;
-  RestartAltIcon: any;
-  SaveIcon: any;
-  SearchIcon: any;
-  SearchOffIcon: any;
-  SortIcon: any;
-  SyncAltIcon?: any;
-  ViewColumnIcon: any;
-  VisibilityOffIcon: any;
-}
-
-export const MRT_Default_Icons: MRT_Icons = {
+export const MRT_Default_Icons = {
   ArrowDownwardIcon,
   ArrowRightIcon,
   CancelIcon,
@@ -102,4 +66,6 @@ export const MRT_Default_Icons: MRT_Icons = {
   SyncAltIcon,
   ViewColumnIcon,
   VisibilityOffIcon,
-};
+} as const;
+
+export type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;

package/src/index.ts

@@ -1,18 +1,92 @@
+//root
 export * from './MaterialReactTable';
 export * from './aggregationFns';
-export * from './body';
-export * from './buttons';
 export * from './column.utils';
 export * from './filterFns';
-export * from './footer';
-export * from './head';
-export * from './hooks';
-export * from './inputs';
-export * from './menus';
-export * from './modals';
 export * from './sortingFns';
 export * from './style.utils';
-export * from './table';
-export * from './toolbar';
 export * from './types';
 export * from './useMaterialReactTable';
+
+//hooks
+export * from './hooks/useMRT_ColumnVirtualizer';
+export * from './hooks/useMRT_DisplayColumns';
+export * from './hooks/useMRT_Effects';
+export * from './hooks/useMRT_RowVirtualizer';
+export * from './hooks/useMRT_Rows';
+export * from './hooks/useMRT_TableInstance';
+export * from './hooks/useMRT_TableOptions';
+
+//body
+export * from './body/MRT_TableBody';
+export * from './body/MRT_TableBodyCell';
+export * from './body/MRT_TableBodyCellValue';
+export * from './body/MRT_TableBodyRow';
+export * from './body/MRT_TableBodyRowGrabHandle';
+export * from './body/MRT_TableBodyRowPinButton';
+export * from './body/MRT_TableDetailPanel';
+
+//buttons
+export * from './buttons/MRT_ColumnPinningButtons';
+export * from './buttons/MRT_CopyButton';
+export * from './buttons/MRT_EditActionButtons';
+export * from './buttons/MRT_ExpandAllButton';
+export * from './buttons/MRT_ExpandButton';
+export * from './buttons/MRT_GrabHandleButton';
+export * from './buttons/MRT_RowPinButton';
+export * from './buttons/MRT_ShowHideColumnsButton';
+export * from './buttons/MRT_ToggleDensePaddingButton';
+export * from './buttons/MRT_ToggleFiltersButton';
+export * from './buttons/MRT_ToggleFullScreenButton';
+export * from './buttons/MRT_ToggleGlobalFilterButton';
+export * from './buttons/MRT_ToggleRowActionMenuButton';
+
+//footer
+export * from './footer/MRT_TableFooter';
+export * from './footer/MRT_TableFooterCell';
+export * from './footer/MRT_TableFooterRow';
+
+//head
+export * from './head/MRT_TableHead';
+export * from './head/MRT_TableHeadCell';
+export * from './head/MRT_TableHeadCellColumnActionsButton';
+export * from './head/MRT_TableHeadCellFilterContainer';
+export * from './head/MRT_TableHeadCellFilterLabel';
+export * from './head/MRT_TableHeadCellGrabHandle';
+export * from './head/MRT_TableHeadCellResizeHandle';
+export * from './head/MRT_TableHeadCellSortLabel';
+export * from './head/MRT_TableHeadRow';
+
+//inputs
+export * from './inputs/MRT_EditCellTextField';
+export * from './inputs/MRT_FilterCheckbox';
+export * from './inputs/MRT_FilterRangeFields';
+export * from './inputs/MRT_FilterRangeSlider';
+export * from './inputs/MRT_FilterTextField';
+export * from './inputs/MRT_GlobalFilterTextField';
+export * from './inputs/MRT_SelectCheckbox';
+
+//menus
+export * from './menus/MRT_ColumnActionMenu';
+export * from './menus/MRT_FilterOptionMenu';
+export * from './menus/MRT_RowActionMenu';
+export * from './menus/MRT_ShowHideColumnsMenu';
+export * from './menus/MRT_ShowHideColumnsMenuItems';
+
+//modals
+export * from './modals/MRT_EditRowModal';
+
+//table
+export * from './table/MRT_Table';
+export * from './table/MRT_TableContainer';
+export * from './table/MRT_TableLoadingOverlay';
+export * from './table/MRT_TablePaper';
+
+//toolbar
+export * from './toolbar/MRT_BottomToolbar';
+export * from './toolbar/MRT_LinearProgressBar';
+export * from './toolbar/MRT_TablePagination';
+export * from './toolbar/MRT_ToolbarAlertBanner';
+export * from './toolbar/MRT_ToolbarDropZone';
+export * from './toolbar/MRT_ToolbarInternalButtons';
+export * from './toolbar/MRT_TopToolbar';

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -2,6 +2,7 @@ import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getCommonTooltipProps } from '../style.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
@@ -44,8 +45,7 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      enterDelay={1000}
-      enterNextDelay={1000}
+      {...getCommonTooltipProps()}
       title={checkboxProps?.title ?? filterLabel}
     >
       <FormControlLabel

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -4,6 +4,7 @@ import Radio, { type RadioProps } from '@mui/material/Radio';
 import Tooltip from '@mui/material/Tooltip';
 import { type Theme } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getCommonTooltipProps } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -124,8 +125,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      enterDelay={1000}
-      enterNextDelay={1000}
+      {...getCommonTooltipProps()}
       title={
         checkboxProps?.title ??
         (selectAll

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -5,7 +5,9 @@ import IconButton from '@mui/material/IconButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { useTheme } from '@mui/material/styles';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
@@ -396,11 +398,17 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       : []),
   ].filter(Boolean);
 
+  const theme = useTheme();
+  const { menuBackgroundColor } = getMRTTheme(table, theme);
+
   return (
     <Menu
-      MenuListProps={{
-        dense: density === 'compact',
-      }}
+    MenuListProps={{
+      dense: density === 'compact',
+      sx: {
+        backgroundColor: menuBackgroundColor,
+      },
+    }}
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -2,6 +2,8 @@ import { useMemo } from 'react';
 import Box from '@mui/material/Box';
 import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { useTheme } from '@mui/material/styles';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_FilterOption,
   type MRT_Header,
@@ -237,10 +239,16 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   const filterOption =
     !!header && columnDef ? columnDef._filterFn : globalFilterFn;
 
+  const theme = useTheme();
+  const { menuBackgroundColor } = getMRTTheme(table, theme);
+
   return (
     <Menu
       MenuListProps={{
         dense: density === 'compact',
+        sx: {
+          backgroundColor: menuBackgroundColor,
+        },
       }}
       anchorEl={anchorEl}
       anchorOrigin={{ horizontal: 'right', vertical: 'center' }}

package/src/menus/MRT_RowActionMenu.tsx

@@ -3,11 +3,13 @@ import Box from '@mui/material/Box';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+import { useTheme } from '@mui/material/styles';
 import {
   commonListItemStyles,
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -19,6 +21,7 @@ interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   handleEdit: (event: MouseEvent) => void;
   row: MRT_Row<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
@@ -27,6 +30,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   handleEdit,
   row,
   setAnchorEl,
+  staticRowIndex,
   table,
   ...rest
 }: Props<TData>) => {
@@ -42,11 +46,17 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   } = table;
   const { density } = getState();
 
+  const theme = useTheme();
+  const { menuBackgroundColor } = getMRTTheme(table, theme);
+
   return (
     <Menu
-      MenuListProps={{
-        dense: density === 'compact',
-      }}
+    MenuListProps={{
+      dense: density === 'compact',
+      sx: {
+        backgroundColor: menuBackgroundColor,
+      },
+    }}
       anchorEl={anchorEl}
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
@@ -67,6 +77,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
       {renderRowActionMenuItems?.({
         closeMenu: () => setAnchorEl(null),
         row,
+        staticRowIndex,
         table,
       })}
     </Menu>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,10 +1,12 @@
 import { useMemo, useState } from 'react';
+import { useTheme } from '@mui/material';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Menu, { type MenuProps } from '@mui/material/Menu';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import { getDefaultColumnOrderIds } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
@@ -77,10 +79,16 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     null,
   );
 
+  const theme = useTheme();
+  const { menuBackgroundColor } = getMRTTheme(table, theme);
+
   return (
     <Menu
       MenuListProps={{
         dense: density === 'compact',
+        sx: {
+          backgroundColor: menuBackgroundColor,
+        },
       }}
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -14,7 +14,7 @@ import Typography from '@mui/material/Typography';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
-import { getMRTTheme } from '../style.utils';
+import { getCommonTooltipProps, getMRTTheme } from '../style.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
@@ -160,8 +160,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
               }}
               control={
                 <Tooltip
-                  enterDelay={1000}
-                  enterNextDelay={1000}
+                  {...getCommonTooltipProps()}
                   title={localization.toggleVisibility}
                 >
                   <Switch />