Mantine v6.0.0 has been released but with lots of breaking changes

[ruslanguns]

Mantine UI. Version 6.0.0 appears to have introduced numerous breaking changes, which could be a challenge for some users, I'm curious, how do you plan to approach this change? For me, It will take me a lot of work to catch up with that version. I'll probably have to leave some legacy behind for a while.

[masterbater]

Mantine UI. Version 6.0.0 appears to have introduced numerous breaking changes, which could be a challenge for some users, I'm curious, how do you plan to approach this change? For me, It will take me a lot of work to catch up with that version. I'll probably have to leave some legacy behind for a while.

#1 (reply in thread)

[masterbater]

Mantine UI. Version 6.0.0 appears to have introduced numerous breaking changes, which could be a challenge for some users, I'm curious, how do you plan to approach this change? For me, It will take me a lot of work to catch up with that version. I'll probably have to leave some legacy behind for a while.

I tried it seems like mantine v6 works with this library

[cetracker-admin]

When Mantine React Table being used inside Mantine's App-Shell, the table is hidden beneath the NavBar.
I assembled a short example on StackBlitz.
Just hope, the link is working.
When using Maninte v5.10.5 with this example it's looking fine:

but when upgrading to v6.0.2 it's looking like this:
The table is spread across the whole window, covering the other content and being partly clipped by the navbar.

Just in case the StackBlitz example isn't available. The main parts to reproduce:

const Content = () => {
  return (
    <>
      <Flex
        mih={50}
        bg="rgba(0, 0, 0, .3)"
        gap="md"
        justify="flex-start"
        align="flex-start"
        direction="row"
        wrap="wrap"
      >
        <Button>Button 1</Button>
        <Button>Button 2</Button>
        <Button>Button 3</Button>
      </Flex>
      <div>
        <TestTable />
      </div>
    </>
  );
};

const content = [
  { name: 'one', value: 'one' },
  { name: 'two', value: 'two' },
];

const TestTable = () => {
  const columns = useMemo(() => [
    {
      accessorKey: 'name',
      header: 'Name',
    },
    {
      accessorKey: 'value',
      header: 'Value',
    },
  ]);

  return (
    <MantineReactTable
      columns={columns}
      data={content}
      mantineTableProps={{
        striped: true,
      }}
    />
  );
};

const theme = {
  // Override any other properties from default theme
  colorScheme: 'light',
  fontFamily: 'Open Sans, sans serif',
  spacing: { xs: 15, sm: 20, md: 25, lg: 30, xl: 40 },
  headings: {
    fontFamily: 'Roboto, sans-serif',
    sizes: {
      h1: { fontSize: 30 },
    },
  },
};

function App() {
  return (
    <MantineProvider theme={theme} withGlobalStyles withNormalizeCSS>
      <AppShell
        padding="md"
        navbar={
          <Navbar width={{ base: 180 }} height={330} p="xs" gap="10">
            <Box sx={{ width: 150 }}>
              <Stack>
                <Button>One</Button>
                <Button>Two</Button>
              </Stack>
            </Box>
          </Navbar>
        }
        header={
          <Header height={60} p="xs">
            Header
          </Header>
        }
        })}
      >
        <Content />
      </AppShell>
  </MantineProvider>
  );

[masterbater]

The table style is correct though. I dont have issue with it with version 6. Use the documentation of mantine 6 for the app shell. Im sure you could figure it out.

[cetracker-admin]

The reason is the theming.
I must have started with v5 where the Theme example has this:

spacing: { xs: 15, sm: 20, md: 25, lg: 30, xl: 40 },

whilst the Theme example of the current version includes this spacing values:

spacing: { xs: '1rem', sm: '1.2rem', md: '1.8rem', lg: '2.2rem', xl: '2.8rem' },

Applying the latter when using v6 or skipping the spacing altogether results in the expected result.
I haven't investigated into the root cause though.

[cetracker-admin]

I just noticed that when using Mantine-React-Table with Mantine 6.0.4 (just the simple table from above as only element of the App) I'm seeing this warning

Warning: React does not recognize the `transitionDuration` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `transitionduration` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

[cetracker-admin]

I assume, it's originated in:

mantine-react-table/packages/mantine-react-table/src/table/MRT_TableRoot.tsx

Line 357 in f069397

transitionDuration={400}

and it's Modal usage:

transitionProps | Partial<Omit<TransitionProps, "mounted">> | Props added to Transition component that used to animate overlay and body, use to configure duration and animation type, { duration: 200, transition: 'pop' } by default

Source: https://mantine.dev/core/modal/?t=props

In comparison to V5 where it was a seperate prop:
https://v5.mantine.dev/core/modal/?t=props

As a side node (the second place within the table code where transitionDuration is being used) is save:

mantine-react-table/packages/mantine-react-table/src/toolbar/MRT_ToolbarAlertBanner.tsx

Line 75 in f069397

transitionDuration={stackAlertBanner ? 200 : 0}

The Collapse still has this prop transitionDuration
https://mantine.dev/core/collapse/?t=props

[KevinVandy]

mantine-react-table v1.0.0-beta.1 has just been released. Most of the compatibility bugs have been addressed.