fix a couple bugs in my own v2 changes (#167)

get rid of MRT_ActionIcon
KevinVandy · Oct 11, 2023 · a90ee08 · a90ee08
1 parent f1c0920
commit a90ee08
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 63 deletions.
diff --git a/packages/mantine-react-table/src/buttons/MRT_ActionIcon.tsx b/packages/mantine-react-table/src/buttons/MRT_ActionIcon.tsx
diff --git a/packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.tsx b/packages/mantine-react-table/src/buttons/MRT_ColumnPinningButtons.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
-import { Flex, Tooltip } from '@mantine/core';
+import { ActionIcon, Flex, Tooltip } from '@mantine/core';
 
 import { type MRT_Column, type MRT_TableInstance } from '../types';
-import { MRT_ActionIcon } from './MRT_ActionIcon';
 
 import classes from './MRT_ColumnPinningButtons.module.css';
 
@@ -26,21 +25,36 @@ export const MRT_ColumnPinningButtons = <
     <Flex className={clsx('mrt-column-pinning-buttons', classes.root)}>
       {column.getIsPinned() ? (
         <Tooltip withinPortal label={localization.unpin}>
-          <MRT_ActionIcon onClick={() => column.pin(false)} size="md">
+          <ActionIcon
+            onClick={() => column.pin(false)}
+            color="gray"
+            variant="default"
+            size="md"
+          >
             <IconPinnedOff />
-          </MRT_ActionIcon>
+          </ActionIcon>
         </Tooltip>
       ) : (
         <>
           <Tooltip withinPortal label={localization.pinToLeft}>
-            <MRT_ActionIcon onClick={() => column.pin('left')} size="md">
+            <ActionIcon
+              onClick={() => column.pin('left')}
+              color="gray"
+              variant="default"
+              size="md"
+            >
               <IconPinned className={classes.left} />
-            </MRT_ActionIcon>
+            </ActionIcon>
           </Tooltip>
           <Tooltip withinPortal label={localization.pinToRight}>
-            <MRT_ActionIcon onClick={() => column.pin('right')} size="md">
+            <ActionIcon
+              onClick={() => column.pin('right')}
+              color="gray"
+              variant="default"
+              size="md"
+            >
               <IconPinned className={classes.right} />
-            </MRT_ActionIcon>
+            </ActionIcon>
           </Tooltip>
         </>
       )}

diff --git a/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css b/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.module.css
@@ -1,4 +1,18 @@
 .root {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  background-color: transparent;
+  transition: all 100ms ease;
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+    background: light-dark(
+      var(--mantine-color-gray-1),
+      var(--mantine-color-dark-6)
+    );
+  }
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
   cursor: grab;
   &:active {
     cursor: grabbing;

diff --git a/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.tsx b/packages/mantine-react-table/src/buttons/MRT_GrabHandleButton.tsx
@@ -1,8 +1,7 @@
 import clsx from 'clsx';
 import { type DragEventHandler } from 'react';
-import { type ActionIconProps, Tooltip } from '@mantine/core';
+import { type ActionIconProps, Tooltip, ActionIcon } from '@mantine/core';
 import { type HTMLPropsRef, type MRT_TableInstance } from '../types';
-import { MRT_ActionIcon } from './MRT_ActionIcon';
 
 import classes from './MRT_GrabHandleButton.module.css';
 
@@ -30,7 +29,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
       openDelay={1000}
       label={actionIconProps?.title ?? move}
     >
-      <MRT_ActionIcon
+      <ActionIcon
         aria-label={actionIconProps?.title ?? move}
         draggable
         {...actionIconProps}
@@ -48,7 +47,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
         title={undefined}
       >
         <IconGripHorizontal />
-      </MRT_ActionIcon>
+      </ActionIcon>
     </Tooltip>
   );
 };
diff --git a/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx b/packages/mantine-react-table/src/buttons/MRT_ToggleRowActionMenuButton.tsx
@@ -1,12 +1,10 @@
 import { type MouseEvent } from 'react';
-import { Tooltip } from '@mantine/core';
+import { ActionIcon, Tooltip } from '@mantine/core';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
 
-import { MRT_ActionIcon } from './MRT_ActionIcon';
-
 interface Props<TData extends Record<string, any> = {}> {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
@@ -56,15 +54,16 @@ export const MRT_ToggleRowActionMenuButton = <
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
         parseFromValuesOrFunc(enableEditing, row) ? (
-        <Tooltip withinPortal position="right" label={edit}>
-          <MRT_ActionIcon
+        <Tooltip withinPortal openDelay={1000} position="right" label={edit}>
+          <ActionIcon
             aria-label={edit}
             disabled={!!editingRow && editingRow.id !== row.id}
             onClick={handleStartEditMode}
             size="md"
+            variant="default"
           >
             <IconEdit />
-          </MRT_ActionIcon>
+          </ActionIcon>
         </Tooltip>
       ) : renderRowActionMenuItems ? (
         <MRT_RowActionMenu

diff --git a/packages/mantine-react-table/src/filterFns.ts b/packages/mantine-react-table/src/filterFns.ts
@@ -197,6 +197,9 @@ export function localizedFilterOption(
   localization: MRT_Localization,
   option: MRT_FilterOption,
 ) {
+  if (!option) {
+    return '';
+  }
   const key = `filter${option[0].toUpperCase()}${option.slice(1)}`;
   return localization[key as keyof MRT_Localization] ?? '';
 }
diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellSortLabel.module.css b/packages/mantine-react-table/src/head/MRT_TableHeadCellSortLabel.module.css
@@ -1,4 +1,18 @@
-.MRT_TableHeadCellSortLabel {
+.sort-icon {
+  color: light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3));
+  background-color: transparent;
+  transition: all 100ms ease;
+  @mixin hover {
+    color: light-dark(var(--mantine-color-gray-9), var(--mantine-color-dark-0));
+    background: light-dark(
+      var(--mantine-color-gray-1),
+      var(--mantine-color-dark-6)
+    );
+  }
+  &:disabled {
+    background-color: transparent;
+    border: none;
+  }
   &[data-sorted] {
     color: var(--mantine-primary-color-filled);
   }

diff --git a/packages/mantine-react-table/src/head/MRT_TableHeadCellSortLabel.tsx b/packages/mantine-react-table/src/head/MRT_TableHeadCellSortLabel.tsx
@@ -1,7 +1,6 @@
-import { Indicator, Tooltip } from '@mantine/core';
+import { ActionIcon, Indicator, Tooltip } from '@mantine/core';
 
 import { type MRT_Header, type MRT_TableInstance } from '../types';
-import { MRT_ActionIcon } from '../buttons/MRT_ActionIcon';
 import { dataVariable } from '../dataVariable';
 
 import classes from './MRT_TableHeadCellSortLabel.module.css';
@@ -14,7 +13,7 @@ interface Props<TData extends Record<string, any> = {}> {
 export const MRT_TableHeadCellSortLabel = <
   TData extends Record<string, any> = {},
 >({
-  header: { column },
+  header,
   table: {
     getState,
     options: {
@@ -23,6 +22,7 @@ export const MRT_TableHeadCellSortLabel = <
     },
   },
 }: Props<TData>) => {
+  const column = header.column;
   const { columnDef } = column;
   const { sorting } = getState();
   const sorted = column.getIsSorted();
@@ -46,7 +46,7 @@ export const MRT_TableHeadCellSortLabel = <
     );
 
   return (
-    <Tooltip withinPortal label={sortTooltip}>
+    <Tooltip withinPortal openDelay={1000} label={sortTooltip}>
       <Indicator
         color="transparent"
         disabled={sorting.length < 2 || sortIndex === -1}
@@ -55,13 +55,14 @@ export const MRT_TableHeadCellSortLabel = <
         label={sortIndex + 1}
         offset={3}
       >
-        <MRT_ActionIcon
-          className={classes.MRT_TableHeadCellSortLabel}
+        <ActionIcon
+          className={classes['sort-icon']}
           aria-label={sortTooltip}
+          size="sm"
           {...dataVariable('sorted', sorted)}
         >
           {icon}
-        </MRT_ActionIcon>
+        </ActionIcon>
       </Indicator>
     </Tooltip>
   );

diff --git a/packages/mantine-react-table/src/menus/MRT_ColumnActionMenu.tsx b/packages/mantine-react-table/src/menus/MRT_ColumnActionMenu.tsx
@@ -1,8 +1,7 @@
-import { Menu, Tooltip } from '@mantine/core';
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
 
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { MRT_ActionIcon } from '../buttons/MRT_ActionIcon';
 
 import classes from './MRT_ColumnActionMenu.module.css';
 
@@ -253,15 +252,15 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any> = {}>({
         label={actionIconProps?.title ?? localization.columnActions}
       >
         <Menu.Target>
-          {/* without this extra div around the icon, Menu.Target screws up... */}
-          <div>
-            <MRT_ActionIcon
-              aria-label={localization.columnActions}
-              {...actionIconProps}
-            >
-              <IconDotsVertical />
-            </MRT_ActionIcon>
-          </div>
+          <ActionIcon
+            aria-label={localization.columnActions}
+            {...actionIconProps}
+            size="sm"
+            color="gray"
+            variant="transparent"
+          >
+            <IconDotsVertical />
+          </ActionIcon>
         </Menu.Target>
       </Tooltip>
       <Menu.Dropdown>