v0.5.1

Compare Source

Patch Changes

• Updated dependencies [84a4a1b]:
  • @​changesets/types@​6.1.0

v4.20250224.0

Compare Source

v4.20250214.0

Compare Source

v7.17.0: 🌶️

Compare Source

View changelog with demos on mantine.dev website

Last 7.x minor release

This is the last minor release in the 7.x series. The next release will be 8.0 with breaking changes and new features.

You are welcome to review the changelog/code and provide feedback and bug reports in Discord or GitHub discussions:

• Changelog – https://alpha.mantine.dev/changelog/8-0-0/
• Source code – https://github.com/mantinedev/mantine/tree/8.0

How to update your project dependencies to the new alpha version:

• Open your package.json
• Find all @mantine/ packages
• Update version of all @mantine/ packages to 8.0.0-alpha.0
• Install dependencies with your package manager, for example, yarn or npm install

Important notes:

• 8.0 release is scheduled for May 5th. Until then you can influence the included breaking changes by proving feedback using Discord or GitHub discussions.
• Currently most of planned breaking changes are implemented – it is not planned to introduce other significant breaking changes (unless new versions of recharts or tiptap are released before May 5th).
• You can find the updated source code in 8.0 branch on GitHub
• Since the changes to codebase are not that significant compared to previous major releases, it is not planned to deprecate 7.x version as soon as 8.0 is release. 7.17.x patches are planned to be released for some time – if you are not ready to migrate to 8.x, you will still be able to receive bug fixes for 7.x (no new features though).

Portal reuseTargetNode prop

Portal component now supports reuseTargetNode prop which allows to reuse the same target node for all instances.
This option is more performant than the previous behavior, it is recommended to be enabled.
This option will be enabled by default in the 8.0 major release.

To enable reuseTargetNode option in all components that depend on Portal, add the following code
to your theme:

import { createTheme, Portal } from '@​mantine/core';

export const theme = createTheme({
  components: {
    Portal: Portal.extend({
      defaultProps: {
        reuseTargetNode: true,
      },
    }),
  },
});

Example usage. In the following example, all three paragraphs will be rendered in the same target node:

import { Portal } from '@​mantine/core';

function Demo() {
  return (
    <>
      <Portal reuseTargetNode>
        <p>First</p>
      </Portal>

      <Portal reuseTargetNode>
        <p>Second</p>
      </Portal>

      <Portal reuseTargetNode>
        <p>Third</p>
      </Portal>
    </>
  );
}

use-form formRootRule

formRootRule is a special rule path that can be used to validate objects and arrays
alongside with their nested fields. For example, it is useful when you want to capture
a list of values, validate each value individually and then validate the list itself
to not be empty:

import { IconTrash } from '@​tabler/icons-react';
import { ActionIcon, Button, Group, Switch, Text, TextInput } from '@​mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@​mantine/form';
import { randomId } from '@​mantine/hooks';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      employees: [{ name: '', active: false, key: randomId() }],
    },
    validate: {
      employees: {
        [formRootRule]: isNotEmpty('At least one employee is required'),
        name: isNotEmpty('Name is required'),
      },
    },
  });

  const fields = form.getValues().employees.map((item, index) => (
    <Group key={item.key} mt="xs">
      <TextInput
        placeholder="John Doe"
        withAsterisk
        style={{ flex: 1 }}
        key={form.key(`employees.${index}.name`)}
        {...form.getInputProps(`employees.${index}.name`)}
      />
      <Switch
        label="Active"
        key={form.key(`employees.${index}.active`)}
        {...form.getInputProps(`employees.${index}.active`, { type: 'checkbox' })}
      />
      <ActionIcon color="red" onClick={() => form.removeListItem('employees', index)}>
        <IconTrash size={16} />
      </ActionIcon>
    </Group>
  ));

  return (
    <form onSubmit={form.onSubmit(() => {})}>
      {fields.length > 0 ? (
        <Group mb="xs">
          <Text fw={500} size="sm" style={{ flex: 1 }}>
            Name
          </Text>
          <Text fw={500} size="sm" pr={90}>
            Status
          </Text>
        </Group>
      ) : (
        <Text c="dimmed" ta="center">
          No one here...
        </Text>
      )}

      {fields}

      {form.errors.employees && (
        <Text c="red" size="sm" mt="sm">
          {form.errors.employees}
        </Text>
      )}

      <Group justify="space-between" mt="md">
        <Button
          variant="default"
          onClick={() => {
            form.insertListItem('employees', { name: '', active: false, key: randomId() });
            form.clearFieldError('employees');
          }}
        >
          Add employee
        </Button>
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

Another example is to validate an object fields combination:

import { Button, Text, TextInput } from '@​mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@​mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      user: {
        firstName: '',
        lastName: '',
      },
    },

    validate: {
      user: {
        [formRootRule]: (value) =>
          value.firstName.trim().length > 0 && value.firstName === value.lastName
            ? 'First name and last name cannot be the same'
            : null,
        firstName: isNotEmpty('First name is required'),
        lastName: isNotEmpty('Last name is required'),
      },
    },
  });

  return (
    <form onSubmit={form.onSubmit(() => {})}>
      <TextInput
        label="First name"
        placeholder="First name"
        {...form.getInputProps('user.firstName')}
      />
      <TextInput
        label="Last name"
        placeholder="Last name"
        mt="md"
        {...form.getInputProps('user.lastName')}
      />
      {form.errors.user && (
        <Text c="red" mt={5} fz="sm">
          {form.errors.user}
        </Text>
      )}
      <Button type="submit" mt="lg">
        Submit
      </Button>
    </form>
  );
}

isJSONString and isNotEmptyHTML form validators

New isJSONString and isNotEmptyHTML form validators:

• isNotEmptyHTML checks that form value is not an empty HTML string. Empty string, string with only HTML tags and whitespace are considered to be empty.
• isJSONString checks that form value is a valid JSON string.

import { isJSONString, useForm } from '@​mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: {
    json: '',
    html: '',
  },

  validate: {
    json: isJSONString('Invalid JSON string'),
    html: isNotEmptyHTML('HTML cannot be empty'),
  },
});

Popover onDismiss

Popover now supports onDismiss prop, which makes it easier
to subscribe to outside clicks and escape key presses to close popover:

import { useState } from 'react';
import { Button, Popover } from '@​mantine/core';

function Demo() {
  const [opened, setOpened] = useState(false);
  return (
    <Popover opened={opened} onDismiss={() => setOpened(false)}>
      <Popover.Target>
        <Button onClick={() => setOpened((o) => !o)}>Toggle popover</Button>
      </Popover.Target>

      <Popover.Dropdown>Dropdown</Popover.Dropdown>
    </Popover>
  );
}

MantineProvider env

MantineProvider component now supports env prop.
It can be used in test environment to disable some features that
might impact tests and/or make it harder to test components:

• transitions that mount/unmount child component with delay
• portals that render child component in a different part of the DOM

To enable test environment, set env to test:

import { MantineProvider } from '@​mantine/core';

function Demo() {
  return <MantineProvider env="test">{/* Your app here */}</MantineProvider>;
}

use-file-dialog hook

New use-file-dialog allows capturing one or more files from the user
without file input element:

import { Button, Group, List } from '@​mantine/core';
import { useFileDialog } from '@​mantine/hooks';

function Demo() {
  const fileDialog = useFileDialog();

  const pickedFiles = Array.from(fileDialog.files || []).map((file) => (
    <List.Item key={file.name}>{file.name}</List.Item>
  ));

  return (
    <div>
      <Group>
        <Button onClick={fileDialog.open}>Pick files</Button>
        {pickedFiles.length > 0 && (
          <Button variant="default" onClick={fileDialog.reset}>
            Reset
          </Button>
        )}
      </Group>
      {pickedFiles.length > 0 && <List mt="lg">{pickedFiles}</List>}
    </div>
  );
}

Remix deprecation

Remix is deprecated, the documentation related to Remix integration
was removed, use React Router instead. To simplify maintenance,
Remix/React Router templates were archived and will not be updated.

Help center updates

• I get hydration warning about data-mantine-color-scheme attribute, what does it mean? question
• How can I apply styles to all Mantine components? question

Other changes

• Tooltip now supports customizing middlewares
• ScrollArea now supports overscrollBehavior prop
• Affix now supports theme.spacing values for position prop
• Anchor now supports underline="not-hover" option to display underline only when the link is not hovered

v6.4.1

Compare Source

Today, we are issuing the 6.4.1 patch release. It fixes a few issues with the NPS survey and makes it respect the --no-hints CLI flag.

Fixes

Prisma CLI

• https://github.com/prisma/prisma/issues/26364

v6.4.0

Compare Source

Today, we are excited to share the 6.4.0 stable release 🎉

🌟 Help us spread the word about Prisma by starring the repo ☝️ or tweeting about the release. 🌟

Highlights

TypeScript-based configuration with prisma.config.ts (Early Access)

In this release, we're introducing an Early Access version of a TypeScript-based configuration file for Prisma ORM: prisma.config.ts.

This file will serve as a central configuration point for Prisma ORM:

import path from 'node:path'

export default {
  earlyAccess: true, // required while in Early Access

  schema: {
    kind: 'single', // use 'multi' if you're using the `prismaSchemaFolder` preview feature
    filePath: path.join('custom', 'prisma', 'schema.prisma')
  }
  
})

With this file you are able to run any arbitrary code needed to get values required by Prisma ORM, such as database URLs from a secret store or fine-grained control of settings. It needs to live in the current working directory from where you're executing Prisma CLI commands (typically, the root of your project).

Note: If you're using prisma.config.ts, the Prisma CLI will not load environment variables from .env files. If you want to use a .env file with prisma.config.ts, you'll need to load the environment variables manually using the dotenv package (see here).

Learn more about the new prisma.config.ts file in the docs.

Case-insensitive mode in JSON filters

You can now do case-insensitive filtering on JSON data.

Just use the new mode option when filtering using string_contains, string_starts_with or string_ends_with in a JSON object and set it to "insensitive":

await prisma.user.findMany({
  where: {
    pets: {
      path: ['favorites', 'catBreed'],
      string_contains: 'Van',
      mode: "insensitive",
    },
  },
});

The above query returns all users where the favorites.catBreed value contains "Van" or "van".

Thanks to @​lubosmato who implemented this feature 🎉

Improved CockroachDB migration speed

In this release we found some inefficiencies in our migration engine that was impacting CockroachDB migrations. In 6.4.0, CockroachDB migrations should be significantly faster.

Calling all devs: Give us your feedback!

Prisma ORM's community keeps us going. To make sure that we're focused on what the community needs, we would like to get your feedback via our online feedback form.

Credits

Huge thanks to @​lubosmato, @​notomo, @​Mayureshd-18, @​mydea, @​omar-dulaimi and @​Hazmi35 for helping out with this release!

v7.2.0

Compare Source

Patch Changes

• Updated dependencies:
  • [email protected]

v7.2.0

Compare Source

Minor Changes

• Generate a "SPA fallback" HTML file for scenarios where applications are prerendering the / route with ssr:false (#​12948)

  • If you specify ssr:false without a prerender config, this is considered "SPA Mode" and the generated index.html file will only render down to the root route and will be able to hydrate for any valid application path
  • If you specify ssr:false with a prerender config but do not include the / path (i.e., prerender: ['/blog/post']), then we still generate a "SPA Mode" index.html file that can hydrate for any path in the application
  • However, previously if you specified ssr:false and included the / path in your prerender config, we would prerender the / route into index.html as a non-SPA page
    • The generated HTML would include the root index route which prevented hydration for any other paths
    • With this change, we now generate a "SPA Mode" file in __spa-fallback.html that will allow you to hydrate for any non-prerendered paths
    • You can serve this file from your static file server for any paths that would otherwise 404 if you only want to pre-render some routes in your ssr:false app and serve the others as a SPA
    • npx sirv-cli build/client --single __spa-fallback.html

• Allow a loader in the root route in SPA mode because it can be called/server-rendered at build time (#​12948)

  • Route.HydrateFallbackProps now also receives loaderData
    • This will be defined so long as the HydrateFallback is rendering while children routes are loading
    • This will be undefined if the HydrateFallback is rendering because the route has it's own hydrating clientLoader
    • In SPA mode, this will allow you to render loader root data into the SPA index.html

• New type-safe href utility that guarantees links point to actual paths in your app (#​13012)

  import { href } from "react-router";
  
  export default function Component() {
    const link = href("/blog/:slug", { slug: "my-first-post" });
    return (
      <main>
        <Link to={href("/products/:id", { id: "asdf" })} />
        <NavLink to={href("/:lang?/about", { lang: "en" })} />
      </main>
    );
  }

Patch Changes

• Handle custom envDir in Vite config (#​12969)

• Fix typegen for repeated params (#​13012)

  In React Router, path parameters are keyed by their name.
  So for a path pattern like /a/:id/b/:id?/c/:id, the last :id will set the value for id in useParams and the params prop.
  For example, /a/1/b/2/c/3 will result in the value { id: 3 } at runtime.

  Previously, generated types for params incorrectly modeled repeated params with an array.
  So /a/1/b/2/c/3 generated a type like { id: [1,2,3] }.

  To be consistent with runtime behavior, the generated types now correctly model the "last one wins" semantics of path parameters.
  So /a/1/b/2/c/3 now generates a type like { id: 3 }.

• Fix CLI parsing to allow argumentless npx react-router usage (#​12925)

• Fix ArgError: unknown or unexpected option: --version when running react-router --version (#​13012)

• Skip action-only resource routes when using prerender:true (#​13004)

• Enhance invalid export detection when using ssr:false (#​12948)

  • headers/action are prohibited in all routes with ssr:false because there will be no runtime server on which to run them
  • loader functions are more nuanced and depend on whether a given route is prerendered
    • When using ssr:false without a prerender config, only the root route can have a loader
      • This is "SPA mode" which generates a single index.html file with the root route HydrateFallback so it is capable of hydrating for any path in your application - therefore we can only call a root route loader at build time
    • When using ssr:false with a prerender config, you can export a loader from routes matched by one of the prerender paths because those routes will be server rendered at build time
      • Exporting a loader from a route that is never matched by a prerender path will throw a build time error because there will be no runtime server to ever run the loader

• Limit prerendered resource route .data files to only the target route (#​13004)

• Add unstable support for splitting route modules in framework mode via `fut