release v2.0.0-alpha.16

KevinVandy · Feb 7, 2024 · 75d30a0 · 75d30a0
1 parent b5bad43
commit 75d30a0
Show file tree

Hide file tree

Showing 15 changed files with 82 additions and 82 deletions.
diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-alpha.15",
+  "version": "2.0.0-alpha.16",
   "license": "MIT",
   "name": "mantine-react-table",
   "description": "A fully featured Mantine implementation of TanStack React Table V8, written from the ground up in TypeScript.",

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -216,12 +216,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       {...tableCellProps}
       __vars={{
         '--mrt-align':
-          tableCellProps.align ??
-          (columnDefType === 'group'
-            ? 'center'
-            : direction.dir === 'rtl'
-              ? 'right'
-              : 'left'),
+          tableCellProps.align ?? (direction.dir === 'rtl' ? 'right' : 'left'),
         '--mrt-table-cell-left':
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}`

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx b/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx
@@ -101,7 +101,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
           row.getIsExpanded() && classes['inner-expanded'],
           virtualRow && classes['inner-virtual'],
         )}
-        p={row.getIsExpanded() ? 'md' : 0}
+        p={row.getIsExpanded() && DetailPanel ? 'md' : 0}
       >
         {enableRowVirtualization ? (
           row.getIsExpanded() && DetailPanel

diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.module.css b/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.module.css
@@ -3,6 +3,7 @@
   &:disabled {
     background-color: transparent;
     border: none;
+    opacity: 0.3;
   }
   &:hover {
     opacity: 1;

diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx
@@ -45,6 +45,8 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
   const canExpand = row.getCanExpand();
   const isExpanded = row.getIsExpanded();
 
+  const DetailPanel = !!renderDetailPanel?.({ row, table });
+
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     row.toggleExpanded();
@@ -55,7 +57,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
 
   return (
     <Tooltip
-      disabled={!canExpand && !renderDetailPanel}
+      disabled={!canExpand && !DetailPanel}
       label={
         actionIconProps?.title ?? isExpanded
           ? localization.collapse
@@ -67,7 +69,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
       <ActionIcon
         aria-label={localization.expand}
         color="gray"
-        disabled={!canExpand && !renderDetailPanel}
+        disabled={!canExpand && !DetailPanel}
         variant="subtle"
         {...actionIconProps}
         __vars={{

diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx
@@ -61,10 +61,11 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
         <Tooltip label={edit} openDelay={1000} position="right" withinPortal>
           <ActionIcon
             aria-label={edit}
+            color="gray"
             disabled={!!editingRow && editingRow.id !== row.id}
             onClick={handleStartEditMode}
             size="md"
-            variant="default"
+            variant="subtle"
           >
             <IconEdit />
           </ActionIcon>

diff --git a/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css b/packages/mantine-react-table/src/components/head/MRT_TableHeadCell.module.css
@@ -13,13 +13,17 @@
   background-clip: padding-box;
   font-weight: bold;
   overflow: visible;
-  padding-bottom: calc(var(--mrt-table-head-cell-padding) * 2 / 3 * 1px);
   padding: calc(var(--mrt-table-head-cell-padding) * 1px);
+  padding-bottom: calc(var(--mrt-table-head-cell-padding) * 2 / 3 * 1px);
   position: relative;
   transition: padding 150ms ease-in-out;
   vertical-align: top;
   z-index: 1;
 
+  &:active {
+    z-index: 3;
+  }
+
   &[data-column-pinned] {
     background-color: light-dark(
       var(--mantine-color-white),
@@ -49,7 +53,6 @@
   }
 
   &[data-resizing] {
-    z-index: 3;
     &[data-resizing='ltr'] {
       border-right: var(--resize-thickness) solid var(--resize-border-color);
     }

diff --git a/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx b/packages/mantine-react-table/src/components/inputs/MRT_EditCellTextInput.tsx
@@ -1,9 +1,5 @@
 import { type FocusEvent, type KeyboardEvent, useState } from 'react';
-import {
-  Select,
-  TextInput,
-  type TextInputProps,
-} from '@mantine/core';
+import { Select, TextInput, type TextInputProps } from '@mantine/core';
 import {
   type MRT_Cell,
   type MRT_CellValue,

diff --git a/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx b/packages/mantine-react-table/src/components/inputs/MRT_FilterCheckbox.tsx
@@ -9,7 +9,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData, TValue = MRT_CellValue> extends CheckboxProps {
+interface Props<TData extends MRT_RowData, TValue = MRT_CellValue>
+  extends CheckboxProps {
   column: MRT_Column<TData, TValue>;
   table: MRT_TableInstance<TData>;
 }

diff --git a/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx b/packages/mantine-react-table/src/components/toolbar/MRT_ToolbarAlertBanner.tsx
@@ -41,7 +41,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
       renderToolbarAlertBannerContent,
       rowCount,
     },
-    refs: { lastSelectedRowId}
+    refs: { lastSelectedRowId },
   } = table;
   const { density, grouping, rowSelection, showAlertBanner } = getState();
 
@@ -95,11 +95,12 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
               className={classes['alert-badge']}
               rightSection={
                 <ActionIcon
+                  color="white"
                   onClick={() => table.getColumn(columnId).toggleGrouping()}
                   size="xs"
                   variant="subtle"
                 >
-                  <IconX />
+                  <IconX style={{ transform: 'scale(0.8)' }} />
                 </ActionIcon>
               }
               variant="filled"
@@ -152,11 +153,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
               )}
             <Stack>
               {alertProps?.children}
-              {alertProps?.children && (selectedAlert || groupedAlert) && (
-                <br />
-              )}
               {selectedAlert}
-              {selectedAlert && groupedAlert && <br />}
               {groupedAlert}
             </Stack>
           </Flex>

diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx
@@ -5,9 +5,7 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,

diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx
@@ -7,9 +7,7 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
@@ -60,7 +58,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
     Header: enableExpandAll
       ? ({ table }) => {
           return (
-            <>
+            <Flex align="center">
               <MRT_ExpandAllButton table={table} />
               {groupedColumnMode === 'remove' &&
                 grouping
@@ -69,7 +67,7 @@ export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
                       table.getColumn(groupedColumnId).columnDef.header,
                   )
                   ?.join(', ')}
-            </>
+            </Flex>
           );
         }
       : undefined,

diff --git a/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx b/packages/mantine-react-table/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx
@@ -4,9 +4,7 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,

diff --git a/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx b/packages/mantine-react-table/stories/features/ColumnGrouping.stories.tsx
@@ -291,7 +291,6 @@ export const GroupingColumnsSetState = () => {
       columns={columns}
       data={data}
       enableGrouping
-      state={{ columnOrder: columns.map((c) => c.accessorKey as string) }}
     />
   );
 };

diff --git a/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx b/packages/mantine-react-table/stories/features/ColumnResizing.stories.tsx
@@ -1,3 +1,4 @@
+import { DirectionProvider } from '@mantine/core';
 import { type MRT_ColumnDef, MantineReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
 import { type Meta } from '@storybook/react';
@@ -50,14 +51,16 @@ export const ColumnResizingEnabledDefaultOnChange = () => (
 );
 
 export const ColumnResizingEnabledDefaultOnChangeRTL = () => (
-  <div style={{ direction: 'rtl' }}>
-    <MantineReactTable
-      columnResizeDirection="rtl"
-      columns={columns}
-      data={data}
-      enableColumnResizing
-    />
-  </div>
+  <DirectionProvider initialDirection="rtl">
+    <div style={{ direction: 'rtl' }}>
+      <MantineReactTable
+        columnResizeDirection="rtl"
+        columns={columns}
+        data={data}
+        enableColumnResizing
+      />
+    </div>
+  </DirectionProvider>
 );
 
 export const ColumnResizingEnabledDefaultOnChangeGrid = () => (
@@ -94,15 +97,17 @@ export const ColumnResizingDefaultOnChangeGridWithIndividualShrink = () => (
 );
 
 export const ColumnResizingEnabledDefaultOnChangeGridRTL = () => (
-  <div style={{ direction: 'rtl' }}>
-    <MantineReactTable
-      columnResizeDirection="rtl"
-      columns={columns}
-      data={data}
-      enableColumnResizing
-      layoutMode="grid"
-    />
-  </div>
+  <DirectionProvider initialDirection="rtl">
+    <div style={{ direction: 'rtl' }}>
+      <MantineReactTable
+        columnResizeDirection="rtl"
+        columns={columns}
+        data={data}
+        enableColumnResizing
+        layoutMode="grid"
+      />
+    </div>
+  </DirectionProvider>
 );
 
 export const ColumnResizingEnabledDefaultOnChangeSemantic = () => (
@@ -115,15 +120,17 @@ export const ColumnResizingEnabledDefaultOnChangeSemantic = () => (
 );
 
 export const ColumnResizingEnabledDefaultOnChangeSemanticRTL = () => (
-  <div style={{ direction: 'rtl' }}>
-    <MantineReactTable
-      columnResizeDirection="rtl"
-      columns={columns}
-      data={data}
-      enableColumnResizing
-      layoutMode="semantic"
-    />
-  </div>
+  <DirectionProvider initialDirection="rtl">
+    <div style={{ direction: 'rtl' }}>
+      <MantineReactTable
+        columnResizeDirection="rtl"
+        columns={columns}
+        data={data}
+        enableColumnResizing
+        layoutMode="semantic"
+      />
+    </div>
+  </DirectionProvider>
 );
 
 export const ColumnResizingEnabledNoColumnActions = () => (
@@ -179,15 +186,17 @@ export const ColumnResizingEnabledOnEnd = () => (
 );
 
 export const ColumnResizingEnabledOnEndRTL = () => (
-  <div style={{ direction: 'rtl' }}>
-    <MantineReactTable
-      columnResizeDirection="rtl"
-      columnResizeMode="onEnd"
-      columns={columns}
-      data={data}
-      enableColumnResizing
-    />
-  </div>
+  <DirectionProvider initialDirection="rtl">
+    <div style={{ direction: 'rtl' }}>
+      <MantineReactTable
+        columnResizeDirection="rtl"
+        columnResizeMode="onEnd"
+        columns={columns}
+        data={data}
+        enableColumnResizing
+      />
+    </div>
+  </DirectionProvider>
 );
 
 export const ColumnResizingCustomDefaultWidths = () => (
@@ -316,14 +325,16 @@ export const ColumnResizingLayoutGridGrow = () => (
 );
 
 export const ColumnResizingLayoutGridGrowRTL = () => (
-  <div style={{ direction: 'rtl' }}>
-    <MantineReactTable
-      columnResizeDirection="rtl"
-      columns={columns.slice(0, 3)}
-      data={data}
-      enableColumnResizing
-      enableRowSelection
-      layoutMode="grid"
-    />
-  </div>
+  <DirectionProvider initialDirection="rtl">
+    <div style={{ direction: 'rtl' }}>
+      <MantineReactTable
+        columnResizeDirection="rtl"
+        columns={columns.slice(0, 3)}
+        data={data}
+        enableColumnResizing
+        enableRowSelection
+        layoutMode="grid"
+      />
+    </div>
+  </DirectionProvider>
 );