fix(deps): update mantine to v8 (major) by renovate[bot] · Pull Request #71 · Samuel-Lewis/design-system

renovate · 2025-05-05T18:43:46Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	`^7.6.2` -> `^7.6.2 \|\| ^8.0.0`
@mantine/core (source)	`^7.17.7` -> `^8.0.1`
@mantine/form (source)	`^7.17.7` -> `^8.0.1`
@mantine/hooks (source)	`^7.6.2` -> `^7.6.2 \|\| ^8.0.0`
@mantine/hooks (source)	`^7.17.7` -> `^8.0.1`

Release Notes

mantinedev/mantine (@mantine/core)

`v8.0.1`

Compare Source

What's Changed

[@mantine/hooks] use-debounced-callback: Add leading: true option support (#7841)
[@mantine/core] Tabs: Fix incorrect Tabs.List styles with grow prop enabled
[@mantine/core] MutltiSelect: Fix onPaste prop not being passed to the input element (#7838)
[@mantine/dates] TimePicker: Fix up/down arrows not working correctly with step prop (#7784)
[@mantine/core] Button: Fix FileButton breaking Button.Group styles (#7835)
[@mantine/core] Modal Fix incorrect header styles with ScrollArea (#7832)
[@mantine/dropzone] Fix status being stuck in rejected state when a file with incorrect mime type is dropped
[@mantine/core] Switch: Fix incorrect thumb position in RTL layouts (#7822)
[@mantine/core] AngleSlider: Fix incorrect thumb position in RTL layouts (#7822)
[@mantine/core] Menu: Fix default props not working in Menu.Sub (#7820)
[@mantine/core] Disable scaling explicit rem units in rem function (#7821)
[@mantine/core] Slider: Fix incorrect track width (#7464)
[@mantine/dates] TimeInput: Fix step prop not working (#7811)
[@mantine/core] Select: Fix onSearchChange being triggered when controlled search value is updated (#7814)
[@mantine/dropzone] Migrate back to react-dropzone from react-dropzone-esm
[@mantine/code-highlight] Fix tooltip being cut off in components with 1-2 lines of code (#7816)
[@mantine/core] Fix inconsistent disabled styles in some components, add CSS variables for disabled colors (#7805)
[@mantine/dates] DatePicker: Add selected date highlight in year and month picker for type="default" (#7799)
[@mantine/core] Table: Add scrollAreaProps support to Table.ScrollContainer (#7798)
[@mantine/core] Fix boolean value not being included in data-* attributes types (#7810)
[@mantine/dates] DateInput: Fix incorrect onChange value type (#7796)
[@mantine/core] Stepper: Fix unexpected bottom spacing in vertical orientation (#7794)
[@mantine/core] PasswordInput: Fix aria-describedby not pointing to error and description elements (#7793)
[@mantine/core] Switch: Fix div element used inside label (#7776)
[@mantine/dates] Add empty string handling as empty value (#7780)
[@mantine/core] Collapse: Fix children with scale animations not working correctly when collapse is opened (#7774)
[@mantine/core] Transition: Fix exitDuration not working correctly for rapid changes (#7773)
[@mantine/dates] TimePicker: Fix 00 in dropdown not being reachable with arrow keys when it is outside scroll position (#7788)
[@mantine/core] Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)
[@mantine/core] Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)

New Contributors

@mikkurogue made their first contribution in https://github.com/mantinedev/mantine/pull/7780
@kawarimidoll made their first contribution in https://github.com/mantinedev/mantine/pull/7807
@codjix made their first contribution in https://github.com/mantinedev/mantine/pull/7804
@GermainBergeron made their first contribution in https://github.com/mantinedev/mantine/pull/7805
@kaareal made their first contribution in https://github.com/mantinedev/mantine/pull/7814
@Bvngee made their first contribution in https://github.com/mantinedev/mantine/pull/7464
@russellbanks made their first contribution in https://github.com/mantinedev/mantine/pull/7820
@jonjomckay made their first contribution in https://github.com/mantinedev/mantine/pull/7841

Full Changelog: mantinedev/mantine@8.0.0...8.0.1

`v8.0.0`: 🌶️

Compare Source

View changelog with demos on mantine.dev website

Migration guide

This changelog covers breaking changes and new features in Mantine 8.0.
To migrate your application to Mantine 8.0, follow 7.x → 8.x migration guide.

Granular global styles exports

Global styles are now splitted between 3 files:

baseline.css – a minimal CSS reset, sets box-sizing: border-box and changes font properties
default-css-variables.css – contains all CSS variables generated from the default theme
global.css – global classes used in Mantine components

If you previously imported individual styles from @mantine/core package, you need to update imports
to use new files:

import '@&#8203;mantine/core/styles/baseline.css';
import '@&#8203;mantine/core/styles/default-css-variables.css';
import '@&#8203;mantine/core/styles/global.css';

If you imported @mantine/core/styles.css, no changes are required –
all new files are already included in styles.css.

Menu with submenus

Menu component now supports submenus:

import { Button, Menu } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Menu width={200} position="bottom-start">
      <Menu.Target>
        <Button>Toggle Menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Item>Dashboard</Menu.Item>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Products</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>All products</Menu.Item>
            <Menu.Item>Categories</Menu.Item>
            <Menu.Item>Tags</Menu.Item>
            <Menu.Item>Attributes</Menu.Item>
            <Menu.Item>Shipping classes</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Orders</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Open</Menu.Item>
            <Menu.Item>Completed</Menu.Item>
            <Menu.Item>Cancelled</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Settings</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Profile</Menu.Item>
            <Menu.Item>Security</Menu.Item>
            <Menu.Item>Notifications</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>
      </Menu.Dropdown>
    </Menu>
  );
}

Popover hideDetached

Popover component now supports hideDetached prop to configure how the dropdown behaves when the target
element is hidden with styles (display: none, visibility: hidden, etc.),
removed from the DOM, or when the target element is scrolled out of the viewport.

By default, hideDetached is enabled – the dropdown is hidden with the target element.
You can change this behavior with hideDetached={false}. To see the difference, try to scroll
the root element of the following demo:

import { Box, Button, Group, Popover } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Box
      bd="1px solid var(--mantine-color-dimmed)"
      p="xl"
      w={400}
      h={200}
      style={{ overflow: 'auto' }}
    >
      <Box w={1000} h={400}>
        <Group>
          <Popover width="target" position="bottom" opened>
            <Popover.Target>
              <Button>Toggle popover</Button>
            </Popover.Target>
            <Popover.Dropdown>This popover dropdown is hidden when detached</Popover.Dropdown>
          </Popover>

          <Popover width="target" position="bottom" opened hideDetached={false}>
            <Popover.Target>
              <Button>Toggle popover</Button>
            </Popover.Target>
            <Popover.Dropdown>This popover dropdown is visible when detached</Popover.Dropdown>
          </Popover>
        </Group>
      </Box>
    </Box>
  );
}

Date values as strings

All @mantine/dates components now use date strings in YYYY-MM-DD or YYYY-MM-DD HH:mm:ss
format instead of Date objects. This change was made to resolve issues related to timezones
– now the output of all @mantine/dates components does not include any timezone-specific information.
Follow 7.x → 8.x migration guide to learn how to update the code to use new string values.

Example of using DatePicker component with string values:

import { useState } from 'react';
import { DatePicker } from '@&#8203;mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return <DatePicker value={value} onChange={setValue} />;
}

DatesProvider timezone

DatesProvider component no longer supports timezone option – all @mantine/dates
components now use strings in YYYY-MM-DD HH:mm:ss format as values and do not contain
timezone information.

If you need to handle timezones in your application, you can use a dedicated dates library
(dayjs, luxon, date-fns)
to update timezone values.

Example of using Mantine components with dayjs:

import dayjs from 'dayjs';
import { DatePicker } from '@&#8203;mantine/dates';

function Demo() {
  const [value, setValue] = useState<string | null>('2022-08-21');

  // Mantine components use strings as values, you can pass these
  // strings to a dates library of your choice to assign timezone
  const dateWithTimeZone = dayjs(value).tz("America/Toronto").toDate();

  return <DatePicker value={value} onChange={setValue} />;
}

TimePicker component

New TimePicker component is an alternative to
TimeInput that offers more features. It supports 24-hour and 12-hour formats,
dropdown with hours, minutes and seconds, and more.

import { TimePicker } from '@&#8203;mantine/dates';

function Demo() {
  return (
    <>
      <TimePicker label="Enter time (24h format)" withSeconds withDropdown />
      <TimePicker label="Enter time (12h format)" withSeconds withDropdown format="12h" mt="md" />
    </>
  );
}

DateTimePicker component changes

DateTimePicker component now uses TimePicker under
the hood instead of TimeInput. You can now use all TimePicker
features with DateTimePicker component.

Prop timeInputProps is no longer available, to pass props down to the underlying TimePicker
you need to use timePickerProps prop.

Example of enabling dropdown and setting 12h format for time picker:

import { DateTimePicker } from '@&#8203;mantine/dates';

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      timePickerProps={{
        withDropdown: true,
        popoverProps: { withinPortal: false },
        format: '12h',
      }}
    />
  );
}

TimeValue component

New TimeValue component can be used to display a formatted time string
with similar formatting options to TimePicker component.

import { Text } from '@&#8203;mantine/core';
import { TimeValue } from '@&#8203;mantine/dates';

function Demo() {
  return (
    <div>
      <Text>
        24h format: <TimeValue value="18:45:34" />
      </Text>
      <Text>
        12h format: <TimeValue value="18:45:34" format="12h" />
      </Text>
    </div>
  );
}

TimeGrid component

New TimeGrid component allows to capture time value from the user with a
predefined set of time slots:

import { getTimeRange, TimeGrid } from '@&#8203;mantine/dates';

function Demo() {
  return (
    <TimeGrid
      data={getTimeRange({ startTime: '10:00', endTime: '21:00', interval: '01:00' })}
      simpleGridProps={{
        type: 'container',
        cols: { base: 1, '180px': 2, '320px': 3 },
        spacing: 'xs',
      }}
      withSeconds={false}
    />
  );
}

Heatmap component

New Heatmap component allows to display data in a calendar heatmap format:

import dayjs from 'dayjs';
import { Heatmap } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <Heatmap
      data={data}
      startDate="2024-02-16"
      endDate="2025-02-16"
      withTooltip
      withWeekdayLabels
      withMonthLabels
      getTooltipLabel={({ date, value }) =>
        `${dayjs(date).format('DD MMM, YYYY')} – ${value === null || value === 0 ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
      }
    />
  );
}

CodeHighlight changes

@mantine/code-highlight package no longer depends on
highlight.js. Instead, it now provides a new API based
on adapters that allows using any syntax highlighter of your choice. Out of the box,
@mantine/code-highlight provides adapters for shiki and
highlight.js.

To learn about the migration process and how to use the new adapters API, check the
updated CodeHighlight documentation and 7.x → 8.x migration guide.

CodeHighlight with shiki

You can now use CodeHighlight component with shiki.

Shiki library provides the most advanced syntax highlighting
for TypeScript and CSS/Sass code. It uses textmate grammars to highlight code (same as in VSCode).
Shiki adapter is recommended if you need to highlight advanced TypeScript (generics, jsx nested in props) or CSS code (custom syntaxes, newest features).
Shiki adapter is used for all code highlighting in Mantine documentation.

To use shiki adapter, you need to install shiki package:

yarn add shiki

Then wrap your app with CodeHighlightAdapterProvider and provide createShikiAdapter as adapter prop:

import { MantineProvider } from '@&#8203;mantine/core';
import { CodeHighlightAdapterProvider, createShikiAdapter } from '@&#8203;mantine/code-highlight';

// Shiki requires async code to load the highlighter
async function loadShiki() {
  const { createHighlighter } = await import('shiki');
  const shiki = await createHighlighter({
    langs: ['tsx', 'scss', 'html', 'bash', 'json'],
    themes: [],
  });

  return shiki;
}

const shikiAdapter = createShikiAdapter(loadShiki);

function App() {
  return (
    <MantineProvider>
      <CodeHighlightAdapterProvider adapter={shikiAdapter}>
        {/* Your app here */}
      </CodeHighlightAdapterProvider>
    </MantineProvider>
  );
}

After that, you can use CodeHighlight component in your application:

import { CodeHighlight } from '@&#8203;mantine/code-highlight';

const exampleCode = `
type FilterPropsRes<T extends Record<string, any>> = {
  [Key in keyof T]-?: T[Key] extends undefined ? never : T[Key];
};

export function filterProps<T extends Record<string, any>>(props: T) {
  return Object.keys(props).reduce<FilterPropsRes<T>>((acc, key: keyof T) => {
    if (props[key] !== undefined) {
      acc[key] = props[key];
    }
    return acc;
  }, {} as FilterPropsRes<T>);
}
`;

function Demo() {
  return <CodeHighlight code={exampleCode} language="tsx" radius="md" />;
}

Carousel changes

@mantine/carousel package was updated to use the latest version of
embla-carousel-react package. This update includes breaking changes:

speed and draggable props were removed – they are no longer supported by embla-carousel-react
It is now required to install both embla-carousel and embla-carousel-react packages explicitly
useAnimationOffsetEffect hook was removed – the issue it addressed was fixed in embla-carousel-react
Embla type export was removed, you should use EmblaCarouselType from embla-carousel instead
Props that were previously passed to embla are now grouped under emblaOptions prop

Follow the 7.x → 8.x migration guide to update your application to use the latest version of @mantine/carousel.

Switch withThumbIndicator

Switch component styles were updated to include indicator inside the thumb.
You can change it by setting withThumbIndicator prop:

import { Switch } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Switch
      defaultChecked
      label="I agree to sell my privacy"
    />
  );
}

Theme types augmentation

You can now augment spacing, radius, breakpoints, fontSizes, lineHeights,
and shadows types. To learn more about this feature, follow this guide.

Example of types augmentation for spacing and radius:

import {
  DefaultMantineSize,
  MantineThemeSizesOverride,
} from '@&#8203;mantine/core';

type ExtendedCustomSpacing =
  | 'xxl'
  | 'xxxs'
  | DefaultMantineSize;

type ExtendedCustomRadius =
  | 'xxs'
  | DefaultMantineSize;

declare module '@&#8203;mantine/core' {
  export interface MantineThemeSizesOverride {
    spacing: Record<ExtendedCustomSpacing, string>;
    radius: Record<ExtendedCustomRadius, string>;
  }
}

Other changes

Kbd component now supports size prop
DateInput component no longer supports preserveTime prop, use different component to capture time values
ScrollArea component no longer has forced display: table styles on the wrapper element of the content. It also now supports content Styles API selector to apply styles to the content element.
Image component no longer includes flex: 0 styles by default
SegmentedControl default height values were changed to match sizes of Input components
Type of wrapperProps prop in all components that support it (Checkbox, Radio, Chip, most inputs) was changed to more strict type
Portal component now has reuseTargetNode prop enabled by default
use-form setFieldValue handler types are now stricter
Menu.Item no longer has data-hovered attribute, use :hover and :focus selectors instead to apply styles
use-os now supports Chrome OS detection, its return type now includes chromeos value in the union
The default eye dropper icon of ColorInput component was updated
The default spacing of Notification component was increased

New Contributors

@mlshvdv made their first contribution in https://github.com/mantinedev/mantine/pull/7703

Full Changelog: mantinedev/mantine@7.17.6...8.0.0

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

fix(deps): update mantine to v8

61f677e

renovate bot force-pushed the renovate/major-8-mantine branch from 47f2b60 to 61f677e Compare May 14, 2025 19:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(deps): update mantine to v8 (major)#71

fix(deps): update mantine to v8 (major)#71
renovate[bot] wants to merge 1 commit intomainfrom
renovate/major-8-mantine

renovate bot commented May 5, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

Conversation

renovate bot commented May 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

v8.0.1

What's Changed

New Contributors

v8.0.0: 🌶️

Migration guide

Granular global styles exports

Menu with submenus

Popover hideDetached

Date values as strings

DatesProvider timezone

TimePicker component

DateTimePicker component changes

TimeValue component

TimeGrid component

Heatmap component

CodeHighlight changes

CodeHighlight with shiki

Carousel changes

Switch withThumbIndicator

Theme types augmentation

Other changes

New Contributors

Configuration

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

0 participants

renovate bot commented May 5, 2025 •

edited

Loading

`v8.0.1`

`v8.0.0`: 🌶️