release v2.0.0-alpha.11

KevinVandy · Jan 22, 2024 · 120b6d2 · 120b6d2
1 parent 6fcd2a1
commit 120b6d2
Show file tree

Hide file tree

Showing 13 changed files with 572 additions and 114 deletions.
diff --git a/apps/mantine-react-table-docs/examples/advanced/sandbox/src/TS.tsx b/apps/mantine-react-table-docs/examples/advanced/sandbox/src/TS.tsx
@@ -1,5 +1,4 @@
 import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root (once)
-import 'mantine-react-table/styles.css'; //make sure MRT styles were imported in your app root
 import { useMemo } from 'react';
 import {
   MantineReactTable,

diff --git a/apps/mantine-react-table-docs/public/sitemap-0.xml b/apps/mantine-react-table-docs/public/sitemap-0.xml
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.10",
+  "version": "2.0.0-alpha.11",
   "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.module.css b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css
@@ -96,10 +96,6 @@
     ) inset;
 }
 
-.root-expand-depth {
-  padding-left: calc(calc(var(--mrt-row-depth, 0) + 1) * 1rem);
-}
-
 .resizing-ltr {
   border-right: var(--resize-thickness) solid var(--resize-border-color);
 }

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -55,8 +55,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   const {
     getState,
     options: {
-      columnResizeMode,
       columnResizeDirection,
+      columnResizeMode,
       createDisplayMode,
       editDisplayMode,
       enableClickToCopy,
@@ -181,8 +181,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       }}
       {...tableCellProps}
       __vars={{
-        '--mrt-row-depth':
-          column.id === 'mrt-row-expand' ? `${row.depth}` : undefined,
         '--mrt-table-cell-justify': layoutMode?.startsWith('grid')
           ? tableCellProps.align === 'left'
             ? 'flex-start'

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
@@ -7,10 +7,27 @@
   &:hover {
     opacity: 1;
   }
+}
+
+.root-ltr {
+  margin-left: calc(calc(var(--mrt-row-depth, 0)) * 16px);
+  .chevron {
+    transition: transform 200ms;
+    &.right {
+      transform: rotate(270deg);
+    }
+    &.up {
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.root-rtl {
+  margin-right: calc(calc(var(--mrt-row-depth, 0)) * 16px);
   .chevron {
-    transition: transform 100ms;
+    transition: transform 200ms;
     &.right {
-      transform: rotate(-90deg);
+      transform: rotate(-270deg);
     }
     &.up {
       transform: rotate(180deg);

diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ExpandButton.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import classes from './MRT_ExpandButton.module.css';
 import { type MouseEvent } from 'react';
-import { ActionIcon, Tooltip } from '@mantine/core';
+import { ActionIcon, Tooltip, useDirection } from '@mantine/core';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -18,11 +18,13 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
   table,
 }: Props<TData>) => {
+  const direction = useDirection();
   const {
     options: {
       icons: { IconChevronDown },
       localization,
       mantineExpandButtonProps,
+      positionExpandColumn,
       renderDetailPanel,
     },
   } = table;
@@ -40,6 +42,8 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
     actionIconProps?.onClick?.(event);
   };
 
+  const rtl = direction.dir === 'rtl' || positionExpandColumn === 'last';
+
   return (
     <Tooltip
       disabled={!canExpand && !renderDetailPanel}
@@ -57,9 +61,13 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
         disabled={!canExpand && !renderDetailPanel}
         variant="subtle"
         {...actionIconProps}
+        __vars={{
+          '--mrt-row-depth': `${row.depth}`,
+        }}
         className={clsx(
           'mrt-expand-button',
           classes.root,
+          classes[`root-${rtl ? 'rtl' : 'ltr'}`],
           actionIconProps?.className,
         )}
         onClick={handleToggleExpand}

diff --git a/packages/mantine-react-table/src/components/table/MRT_TableContainer.module.css b/packages/mantine-react-table/src/components/table/MRT_TableContainer.module.css
@@ -13,5 +13,7 @@
 }
 
 .root-fullscreen {
-  max-height: calc(100vh - calc(var(--mrt-top-toolbar-height) * 1px));
+  max-height: calc(
+    100vh - calc(var(--mrt-top-toolbar-height) * 1px)
+  ) !important;
 }
diff --git a/packages/mantine-react-table/src/components/table/MRT_TablePaper.tsx b/packages/mantine-react-table/src/components/table/MRT_TablePaper.tsx
@@ -48,6 +48,8 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
       }}
       // rare case where we should use inline styles to guarantee highest specificity
       style={(theme) => ({
+        zIndex: isFullScreen ? 100 : undefined,
+        ...parseFromValuesOrFunc(tablePaperProps?.style, theme),
         ...(isFullScreen
           ? {
               bottom: 0,
@@ -61,10 +63,8 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
               right: 0,
               top: 0,
               width: '100vw',
-              zIndex: 100,
             }
           : null),
-        ...(parseFromValuesOrFunc(tablePaperProps?.style, theme) as any),
       })}
     >
       {enableTopToolbar &&

diff --git a/packages/mantine-react-table/src/locales/he.ts b/packages/mantine-react-table/src/locales/he.ts
@@ -0,0 +1,94 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_HE: MRT_Localization = {
+  actions: 'פעולות',
+  and: 'ו',
+  cancel: 'ביטול',
+  changeFilterMode: 'שינוי מצב סינון',
+  changeSearchMode: 'שינוי מצב חיפוש',
+  clearFilter: 'נקה סינון',
+  clearSearch: 'נקה חיפוש',
+  clearSort: 'נקה מיון',
+  clickToCopy: 'לחץ להעתקה',
+  collapse: 'צמצום',
+  collapseAll: 'צמצום הכל',
+  columnActions: 'פעולות עמודה',
+  copiedToClipboard: 'הועתק ללוח',
+  dropToGroupBy: 'גרור לקיבוץ לפי {column}',
+  edit: 'ערוך',
+  expand: 'הרחב',
+  expandAll: 'הרחב הכל',
+  filterArrIncludes: 'כולל',
+  filterArrIncludesAll: 'כולל הכל',
+  filterArrIncludesSome: 'כולל',
+  filterBetween: 'בין',
+  filterBetweenInclusive: 'בין כולל',
+  filterByColumn: 'סנן לפי {column}',
+  filterContains: 'מכיל',
+  filterEmpty: 'ריק',
+  filterEndsWith: 'מסתיים ב',
+  filterEquals: 'שווה',
+  filterEqualsString: 'שווה',
+  filterFuzzy: 'פעיל',
+  filterGreaterThan: 'גדול מ',
+  filterGreaterThanOrEqualTo: 'גדול או שווה ל',
+  filterInNumberRange: 'בין',
+  filterIncludesString: 'מכיל',
+  filterIncludesStringSensitive: 'מכיל',
+  filterLessThan: 'קטן מ',
+  filterLessThanOrEqualTo: 'קטן או שווה ל',
+  filterMode: 'מצב סינון: {filterType}',
+  filterNotEmpty: 'לא ריק',
+  filterNotEquals: 'לא שווה',
+  filterStartsWith: 'מתחיל ב',
+  filterWeakEquals: 'שווה',
+  filteringByColumn: 'מסנן לפי {column} - {filterType} {filterValue}',
+  goToFirstPage: 'לדף הראשון',
+  goToLastPage: 'לדף האחרון',
+  goToNextPage: 'לדף הבא',
+  goToPreviousPage: 'לדף הקודם',
+  grab: 'תפוס',
+  groupByColumn: 'קיבוץ לפי {column}',
+  groupedBy: 'קובץ לפי',
+  hideAll: 'הסתר הכל',
+  hideColumn: 'הסתר עמודה {column}',
+  max: 'מקסימום',
+  min: 'מינימום',
+  move: 'הזז',
+  noRecordsToDisplay: 'אין רשומות להצגה',
+  noResultsFound: 'לא נמצאו תוצאות',
+  of: 'מתוך',
+  or: 'או',
+  pin: 'נעץ',
+  pinToLeft: 'נעץ לשמאל',
+  pinToRight: 'נעץ לימין',
+  resetColumnSize: 'איפוס גודל עמודה',
+  resetOrder: 'איפוס סדר',
+  rowActions: 'פעולות שורה',
+  rowNumber: '#',
+  rowNumbers: 'מספרי שורות',
+  rowsPerPage: 'שורות לעמוד',
+  save: 'שמור',
+  search: 'חיפוש',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} מתוך {rowCount} שורות נבחרו',
+  select: 'בחר',
+  showAll: 'הצג הכל',
+  showAllColumns: 'הצג את כל העמודות',
+  showHideColumns: 'הצג/הסתר עמודות',
+  showHideFilters: 'הצג/הסתר סינונים',
+  showHideSearch: 'הצג/הסתר חיפוש',
+  sortByColumnAsc: 'מיין לפי {column} בסדר עולה',
+  sortByColumnDesc: 'מיין לפי {column} בסדר יורד',
+  sortedByColumnAsc: 'ממוין לפי {column} בסדר עולה',
+  sortedByColumnDesc: 'ממוין לפי {column} בסדר יורד',
+  thenBy: ', ואז לפי ',
+  toggleDensity: 'שנה צפיפות',
+  toggleFullScreen: 'מסך מלא',
+  toggleSelectAll: 'בחר/בטל בחירת הכל',
+  toggleSelectRow: 'בחר/בטל בחירת שורה',
+  toggleVisibility: 'הצג/הסתר',
+  ungroupByColumn: 'בטל קיבוץ לפי {column}',
+  unpin: 'בטל נעיצה',
+  unpinAll: 'בטל נעיצת הכל',
+};
diff --git a/packages/mantine-react-table/stories/features/DetailPanel.stories.tsx b/packages/mantine-react-table/stories/features/DetailPanel.stories.tsx
@@ -72,8 +72,8 @@ export const CustomExpandRotation = () => (
     enableExpandAll={false}
     mantineExpandButtonProps={({ row }) => ({
       style: {
-        transform: row.getIsExpanded() ? 'rotate(0deg)' : 'rotate(-90deg)',
-        transition: 'transform 0.2s',
+        transform: row.getIsExpanded() ? 'rotate(-180deg)' : 'rotate(270deg)',
+        transition: 'transform 0s',
       },
     })}
     renderDetailPanel={({ row }) => (

diff --git a/packages/mantine-react-table/stories/features/SubRowTree.stories.tsx b/packages/mantine-react-table/stories/features/SubRowTree.stories.tsx
@@ -1,4 +1,6 @@
+import { DirectionProvider } from '@mantine/core';
 import { type MRT_ColumnDef, MantineReactTable } from '../../src';
+import { MRT_Localization_HE } from '../../src/locales/he';
 import { faker } from '@faker-js/faker';
 import { type Meta } from '@storybook/react';
 
@@ -64,6 +66,76 @@ export const SubRowTreeEnabledDefault = () => (
   <MantineReactTable columns={columns} data={data} enableExpanding />
 );
 
+export const SubRowTreeLayoutGrid = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    displayColumnDefOptions={{
+      'mrt-row-expand': {
+        // size: 100,
+      },
+    }}
+    enableExpanding
+    initialState={{ expanded: true }}
+    layoutMode="grid"
+  />
+);
+
+export const SubRowTreeLayoutGridNoGrow = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    displayColumnDefOptions={{
+      'mrt-row-expand': {
+        // size: 100,
+      },
+    }}
+    enableExpanding
+    initialState={{ expanded: true }}
+    layoutMode="grid-no-grow"
+  />
+);
+
+export const SubRowTreeEnabledPositionLast = () => (
+  <MantineReactTable
+    columns={columns}
+    data={data}
+    enableExpanding
+    positionExpandColumn="last"
+  />
+);
+
+export const SubRowTreeEnabledDefaultRTL = () => {
+  return (
+    <DirectionProvider initialDirection="rtl">
+      <div style={{ direction: 'rtl' }}>
+        <MantineReactTable
+          columns={columns}
+          data={data}
+          enableExpanding
+          localization={MRT_Localization_HE}
+        />
+      </div>
+    </DirectionProvider>
+  );
+};
+
+export const SubRowTreeEnabledDefaultRTLAndPositionLast = () => {
+  return (
+    <DirectionProvider initialDirection="rtl">
+      <div style={{ direction: 'rtl' }}>
+        <MantineReactTable
+          columns={columns}
+          data={data}
+          enableExpanding
+          localization={MRT_Localization_HE}
+          positionActionsColumn="last"
+        />
+      </div>
+    </DirectionProvider>
+  );
+};
+
 export const SubRowTreeDisableExpandAll = () => (
   <MantineReactTable
     columns={columns}