Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(deps): update dependency @mantine/next to v6 #342

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(deps): update dependency @mantine/next to v6 #342

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Mar 4, 2023 •
edited

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mantine/next (source) ^5.10.2 -> ^6.0.0 age adoption passing confidence

Release Notes

mantinedev/mantine (@​mantine/next)

v6.0.21

Compare Source

Last 6.x patch

This is the last patch for 6.x (at least for a while), next version that will be released is 7.0.0. If you haven't checked v7 yet, you can review it here – https://v7.mantine.dev/

What's Changed
  • [@mantine/core] Fix Radio and Checkbox components do not receive padding when a value of 0 is passed into the label prop (#​4755)
  • [@mantine/dates] Fix incorrect accessible name set on DatePickerInput and other similar components (#​4750)
New Contributors

Full Changelog: mantinedev/mantine@6.0.20...6.0.21

v6.0.20

Compare Source

What's Changed

  • [@mantine/dates] Calendar: Fix incorrect hasNextLevel prop type (#​4682)
  • [@mantine/core] PasswordInput: Set autocomplete="off" to prevent passwords logging in console (#​4564)
  • [@mantine/core] BackgroundImage: Fix image not loading if given image url contains whitespace (#​4715)
  • [@mantine/dates] Fix: DatePickerInput and DateTimePicker label click does not focusing the input (#​4634)
  • [@mantine/core] PinInput: Fix OTP paste not working from Google Keyboard on Android (#​4641)
  • [@mantine/core] Grid: Fix id prop not being passed to the root element (#​4666)
  • [@mantine/tiptap] Fix incorrect color displayed in ColorPickerControl (#​4667)
  • [@mantine/core] Anchor: Fix incorrect inherited types from Text (#​4695)

New Contributors

Full Changelog: mantinedev/mantine@6.0.19...6.0.20

v6.0.19

Compare Source

What's Changed

  • [@mantine/dates] DateTimePicker: Add option to get time input ref with timeInputProps
  • [@mantine/hooks] Fix unexpected breaking change introduced in useResizeObserver in the previous patch (#​4632)
  • [@mantine/dates] Fix incorrect Calendar prop types definition (#​4638)

New Contributors

Full Changelog: mantinedev/mantine@6.0.18...6.0.19

v6.0.18

Compare Source

What's Changed

  • [@mantine/core] Spoiler: Fix control button flickering on rerender (#​4512)
  • [@mantine/tiptap] Fix incorrect color displayed in color control in dark color scheme (#​4560)
  • [@mantine/core] Pagination: Fix incorrect disabled styles when control node is changed to link (#​4578)
  • [@mantine/core] Modal: Make body's zIndex same as overlay's to allow modals stacking (#​4587)
  • [@mantine/core] Avatar: Fix incorrect placeholder icon dimensions (#​4600)
  • [@mantine/dates] Fix defaultDate overriding value prop (#​4624)

New Contributors

Full Changelog: mantinedev/mantine@6.0.17...6.0.18

v6.0.17

Compare Source

What's Changed

  • [@mantine/carousel] Remove x.clickAllowed to support embla 8.x (#​4357, #​4174)
  • [@mantine/core] PasswordInput: Remove rightSection associated props to avoid confusion (#​4436)
  • [@mantine/core] Menu: Fix up and down keys not working when first Menu.Item is disabled (#​4411)
  • [@mantine/spotlight] Fix target prop not working (#​4494)
  • [@mantine/core] Switch: Fix incorrect label styles in RTL (#​4515)
  • [@mantine/core] Slider: Fix decimal step without precision prop not working (#​4538)
  • [@mantine/core] Rating: Fix readOnly prop not working with defaultValue (#​4525)
  • [@mantine/core] Modal: Migrate to dvh units to fix incorrect styles in mobile Safari (#​4517)
  • [@mantine/dates] DateInput: Decouple clearable and allowDeselect logic, allow disabling allowDeselect if clearable is set (#​4527)
  • [@mantine/dates] DatePickerInput: Fix defaultDate prop not working (#​4532)

New Contributors

Full Changelog: mantinedev/mantine@6.0.16...6.0.17

v6.0.16

Compare Source

What's Changed

  • [@mantine/dates] DatePicker: Fix onMonthSelect not passed down to Calendar component (#​4441)
  • [@mantine/prism] Fix unexpected code margin when used within TypographyStylesProvider (#​4452)
  • [@mantine/dates] DateTimePicker: Fix onClick function from submitButtonProps overriding default behavior (#​4465)
  • [@mantine/dates] Fix date pickers placeholders not having correct color when parent input has error (#​4469)
  • [@mantine/core] MultiSelect: Fix portalProps prop not working (#​4485)
  • [@mantine/core] Fix rem units errors with svg elements in all components (#​4491)
  • [@mantine/dates] DateInput: Fix stale calendar UI after clear button was clicked (#​4486)
  • [@mantine/core] Slider: Fix onChange prop updates being ignored (#​4497)

New Contributors

Full Changelog: mantinedev/mantine@6.0.15...6.0.16

v6.0.15

Compare Source

What's Changed

  • [@mantine/core] Alert: Fix incorrect close button styles in filled variant
  • [@mantine/core] Fix incorrect Slider and RangeSlider precision with keyboard events
  • [@mantine/core] PinInput: Fix incorrect focus behavior when Backspace key is pressed (#​4438)
  • [@mantine/core] Table: Fix withColumnBorders prop not working (#​4443)
  • [@mantine/spotlight] Improve search performance for large actions lists (#​4457)

New Contributors

Full Changelog: mantinedev/mantine@6.0.14...6.0.15

v6.0.14

Compare Source

What's Changed

  • [@mantine/hooks] use-window-event: Improve events type (#​4423)
  • [@mantine/core] MultiSelect: Fix hoverOnSearchChange not working correctly when creatable prop is set (#​4344)
  • [@mantine/tiptap] Add option to configure initial state of external link control (#​4373)
  • [@mantine/core] PinInput: Fix incorrect Backspace key handling (#​4379)
  • [@mantine/core] Table: Fix table styles applied to the nested table elements, for example in dropdowns (#​4393)
  • [@mantine/core] Image: Fix image alt overflow in Firefox (#​4410)

New Contributors

Full Changelog: mantinedev/mantine@6.0.13...6.0.14

v6.0.13

What's Changed

  • [@mantine/dates] Fix nextIcon and previousIcon props not passed to Calendar component (#​4273)
  • [@mantine/core] AppShell: Fix wrong padding when navbarOffsetBreakpoint and asideOffsetBreakpoint have the same value (#​4281)
  • [@mantine/core] Select: Fix unexpected horizontal scrollbar in items with long text (#​4296)
  • [@mantine/core] NumberInput: Fix missing disabled controls styles (#​4314)
  • [@mantine/core] Fix Select/MultiSelect scrolling page when transitionProps are set (#​4327)
  • [@mantine/core] Chip: Fix unexpected line break when children are not a plain string (#​4328)

New Contributors

Full Changelog: mantinedev/mantine@6.0.11...6.0.13

v6.0.11

Compare Source

What's Changed

  • [@mantine/core] Improve inputs disabled styles handling inside fieldset elements (#​4152)
  • [@mantine/core] Badge: Expose BadgeVariant type (#​4215)
  • [@mantine/core] ThemeIcon: Expose ThemeIconVariant type (#​4216)
  • [@mantine/core] ColorInput: Add option to set eye dropper aria-label though prop (#​4227)
  • [@mantine/core] ColorPicker: Fix inaccurate numbers rounding in rgba and hex colors converters (#​4238)
  • [@mantine/core] MultiSelect: Fix layout shifts in Safari when input is focused (#​4249)
  • [@mantine/core] Rating: Add CSS color values support in color prop (#​4251)
  • [@mantine/dates] Add missing nextIcon/previousIcon types to all components (#​4180)

New Contributors

Full Changelog: mantinedev/mantine@6.0.10...6.0.11

v6.0.10

Compare Source

What's Changed

  • [@mantine/core] Remove invalid autocomplete attribute from JsonInput and ColorInput (#​4140)
  • [@mantine/core] Tabs: Fix aria-controls set to id of panel that does not exist (#​4142)
  • [@mantine/core] Input: Add icon offset to unstyled input variant (#​4119)
  • [@mantine/core] Popover: Fix incorrect closeOnClickOutside logic (#​4148)
  • [@mantine/dates] Add callback function support to weekdayFormat prop (#​4156)
  • [@mantine/core] MultiSelect: Fix incorrect hovered item index when disableSelectedItemFiltering is set and last item is selected (#​4168)

New Contributors

Full Changelog: mantinedev/mantine@6.0.9...6.0.10

v6.0.9

Compare Source

What's Changed

  • [@mantine/core] MutiSelect: Fix error placeholder not respecting theme.primaryShade (#​4113)
  • [@mantine/core] Preserve whitespace in Select, MultiSelect and Autocomplete items (#​4094)
  • [@mantine/core] Menu: Fix incorrect click outside logic (#​4114)
  • [@mantine/core] Slider: Fix incorrect trackContainer height (#​4116)
  • [@mantine/hooks] use-focus-trap: Fix aria hider not being released when multiple focus traps being used at the same time (#​4118)
  • [@mantine/dates] Fix nextIcon and previousIcon props not working in Calendar based components (#​4126)
  • [@mantine/hooks] use-local-storage: Add dynamic local storage key support (#​4127)

New Contributors

Full Changelog: mantinedev/mantine@6.0.8...6.0.9

v6.0.8

Compare Source

What's Changed

  • [@mantine/core] Accordion: Fix chevron width being defined in px instead of rem (#​3935)
  • [@mantine/core] Modal: Add missing sx prop (#​4058)
  • [@mantine/core] Dialog: Fix viewport overflowing on small screens (#​4090)
  • [@mantine/core] MultiSelect: Add option to get value index in ValueCopmonent (#​3928)
  • [@mantine/dates] DatePickerInput: Fix withCellSpacing not working (#​3993)
  • [@mantine/core] Menu: Fix incorrect logic for onChange, onOpen and onClose callbacks (#​4030)
  • [@mantine/core] Sort theme.breakpoints during theme override merging on MantineProvider (#​4051)
  • [@mantine/core] Notification: Fix incorrect border styles (#​4054)
  • [@mantine/dropzone] Reexport FileRejection type from react-dropzone (#​4065)
  • [@mantine/core] Slider: Fix slider track not respecting parent container width (#​4083)

New Contributors

Full Changelog: mantinedev/mantine@6.0.7...6.0.8

v6.0.7

Compare Source

What's Changed

  • [@mantine/core] Fix portalProps types and override order in all components (#​4009)
  • [@mantine/core] ColorInput: Fix onChange() executed after onBlur() (#​4012)
  • [@mantine/dates] DatePickerInput: fix type field always displaying generic value in autocomplete (#​4017)
  • [@mantine/core] Notification: Add withBorder prop (#​4022)
  • [@mantine/dates] Fix dates range displayed incorrectly when given dates have time that is close to the next day (#​4028)
  • [@mantine/core] ColorInput: Fix onChangeEnd not being called when color is picked with eyedropper (#​4031)
  • [@mantine/core] Slider: Fix incorrect marks click behavior (#​4000)

New Contributors

Full Changelog: mantinedev/mantine@6.0.6...6.0.7

v6.0.6

Compare Source

What's Changed

  • [@mantine/core] MultiSelect: Fix incorrect default value max-width (#​3958)
  • [@mantine/dates] Fix onNextDecade, onPreviousDecade and similar handlers not working on some components (#​3946)
  • [@mantine/core] Modal: Fix incorrect close button position when there is no title (#​3939)
  • [@mantine/core] Image: Fix imageProps overrding component props (#​3985)
  • [@mantine/form] Rollback form.reset type change (#​3956)
  • [@mantine/dates] Fix page scrolling on ArrowUp/ArrowDown keyboard navigation (#​3925)
  • [@mantine/dates] DateInput: Fix defaultDate not working (#​3950)
  • [@mantine/dates] Add missing props from DatePicker (#​3951)
  • [@mantine/dates] Fix weekday labeling when dayjs.locale is used (#​3954)
  • [@mantine/core] MultiSelect: Fix broken styles in Safari (#​3980)
  • [@mantine/core] NumberInput: Fix onChange not being called correctly (#​3984)
  • [@mantine/dates] DatePicker: Fix component throwing error when type changes (#​3989)
  • [@mantine/core] NumberInput: Add thousandsSeparator (#​3990)
  • [@mantine/core] ColorPicker: Fix color picker state not being updated when component is uncontrolled and color swatch is clicked

New Contributors

Full Changelog: mantinedev/mantine@6.0.5...6.0.6

v6.0.5

What's Changed

  • [@mantine/core] Change Modal and Drawer to use native scrollbars by default, remove excessive markup (#​3854)
  • [@mantine/core] Drawer: Fix styles api on MantineProvider not working
  • [@mantine/core] Button: Fix hover styles not overwritten with &:hover selector (#​3920)
  • [@mantine/dates] Change tab order behavior to match native date pickers (#​3876)
  • [@mantine/dates] Fix tab order with hideOutsideDates prop (#​3849)
  • [@mantine/form] Fix incorrect form errors behavior with form.resorderListItem and form.insertListItem handlers (#​3828)
  • [@mantine/core] Popover: Add option to change offset for each axis individually (#​3775)
  • [@mantine/core] MultiSelect: Fix disableSelectedItemFiltering prop not working with searchable option (#​3894)
  • [@mantine/core] Autocomplete: Fix incorrect aria- attributes on input element (#​3900)
  • [@mantine/core] TypographyStylesProvider: Fix incorrect breakpoints used in styles (#​3902)
  • [@mantine/form] Allow to specify values partial in form.resetDirty (#​3906)
  • [@mantine/core] Slider: Fix incorrect behavior when slider is disabled and marks are clicked (#​3856)

New Contributors

Full Changelog: mantinedev/mantine@6.0.3...6.0.5

v6.0.3: 6.0.4

Compare Source

What's Changed

  • [@mantine/dates] Calendar: Improve tab navigation order in decade/year/month views (#​3728)
  • [@mantine/core] Fix NumberInput precision formatting (#​3756)
  • [@mantine/hooks] use-timeout: Memoize clear and start functions (#​3801)
  • [@mantine/core] Modal: Fix unexpected attributes added to root dom node (#​3802)
  • [@mantine/dates] DatePickerInput: Fix unexpected attribute valueFormat being added to root dom node (#​3804)
  • [@mantine/form] Fix some object being incorrectly cloned in form.setFieldValue handler (#​3805)
  • [@mantine/tiptap] Update installation instructions to include tiptap/pm package (#​3806)
  • [@mantine/core] Accordion: Fix parts of lowercase letters being cut off by overflow: hidden (#​3812)
  • [@mantine/styles] Expose theme breakpoints as css variables (#​3824)
  • [@mantine/core] Fix Modal/Drawer content scrolling over header (#​3829)
  • [@mantine/core] Pagination: Fix incorrect chevron icons in RTL (#​3809)
  • [@mantine/core] Select: Fix shadow prop not working (#​3807)
  • [@mantine/core] Pagination: Fix spacing={0} nor working
  • [@mantine/form] Make isEmail validation simpler to allow usage of dots and plus signs

New Contributors

Full Changelog: mantinedev/mantine@6.0.2...6.0.3

v6.0.2

Compare Source

What's Changed

  • [@mantine/hooks] use-hash: Fix incorrect hash set from hashchange event (#​3773)
  • [@mantine/core] PinInput: Fix onComplete prop firing incorrectly (#​3715)
  • [@mantine/core] Popover: Add onClose and onOpen events supports for uncontrolled popovers (#​3716)
  • [@mantine/core] Select: Fix focus loss when pressing tab inside input element (#​3744)
  • [@mantine/core] Anchor: Fix undelrine prop not working for hover state (#​3748)
  • [@mantine/core] Switch: Fix body scrolling when input is focused (#​3752)
  • [@mantine/core] Popover: Fix incorrect dropdown position when position prop changes (#​3753)
  • [@mantine/core] ScrollArea: Add missing viewportProps prop to ScrollArea.Autosize (#​3760)
  • [@mantine/core] JsonInput: Fix incorrect serialization logic (#​3769)
  • [@mantine/core] Drawer: Fix incorrect static selector (#​3730)

New Contributors

Full Changelog: mantinedev/mantine@6.0.1...6.0.2

v6.0.1

Compare Source

What's Changed

  • [@mantine/core] SegmentedControl: Fix incorrect border styles in vertical orientation (#​3670)
  • [@mantine/core] Fix incorrect error messages in Popover, HoverCard and Menu components (#​3638)
  • [@mantine/core] Button: Fix incorrect Button.Group styles that contain only one Button (#​3667)
  • [@mantine/dates] Remove disabled level change button from tab order (#​3648)
  • [@mantine/core] Transition: Fix exit duration not working (#​3664)
  • [@mantine/core] Anchor: Fix dimmed color not working (#​3668)
  • [@mantine/core] Alert: Fix content overlap with no title and with close button (#​3681)
  • [@mantine/core] AppShell: Fix incorrect CSS variables (#​3687)
  • [@mantine/notifications] Add static methods to Notifications (#​3689)
  • [@mantine/core] Title: Fix Text props not working (#​3690)
  • [@mantine/styles] Fix incorrect CSS variables parsing in theme functions (#​3695)
  • [@mantine/dates] DateTimePicker: Fix TimeInput now showing when dropdown was closed with month/year picker (#​3710)
  • [@mantine/core] Portal: Add portalProps prop support (#​3696)
  • [@mantine/core] Tooltip: Fix incorrect arrow border styles (#​3693)

New Contributors

Full Changelog: mantinedev/mantine@6.0.0...6.0.1

v6.0.0

Compare Source

View changelog with demos on mantine.dev website

Breaking changes

The following changes are breaking. Note that although
we've tried to include all breaking changes with migration guides in the list you still may
experience undocumented changes. If you think that these changes worth including in this list,
let us know by opening an issue on GitHub.

Migration to rem/em units

All Mantine components now use rem units. 1rem is considered to be 16px
with medium text size selected by user, all components will scale based on settings specified in browser.
theme.spacing, theme.radius, theme.fontSizes and other theme properties overrides
are now expected to be defined in rem. theme.breakpoints are expected to be defined in em units:

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

function Demo() {
  return (
    <MantineProvider
      theme={{
        spacing: { xs: "1rem", sm: "1.5rem" /* ... */ },
        fontSizes: { xs: "0.8rem", sm: "1.2rem" /* ... */ },
        radius: { xs: "0.1rem", sm: "0.3rem" /* ... */ },
        breakpoints: { xs: "20em", sm: "36em" /* ... */ },
      }}
    >
      <App />
    </MantineProvider>
  );
}

You can no longer use addition, subtraction, division, multiplication and other math operations
with theme values in createStyles and sx prop,
use calc instead:

import { createStyles, rem } from '@&#8203;mantine/core':

// 5.x expressions that will no longer work in 6.x
createStyles((theme) => ({
  demo: {
    // Values cannot longer be prepended with minus sign
    margin: -theme.spacing.xs,

    // addition, subtraction, division, multiplication
    // and other math operations are no longer available
    paddingLeft: theme.spacing.md + 5,
    paddingRight: theme.spacing.sm / 2,
    paddingTop: theme.spacing.lg * 1.5,
    paddingBottom: theme.spacing.xl - theme.spacing.md,

    // theme values used in sting templates
    // will no longer work with px suffix
    margin: `${theme.spacing.xs}px ${theme.spacing.md}px`
  }
}));

// In 6.0 use calc
createStyles((theme) => ({
  demo: {
    // Use calc to negate theme value
    margin: `calc(${theme.spacing.xs} * -1)`,

    // Use calc and rem function for
    // addition, subtraction, division, multiplication
    paddingLeft: `calc(${theme.spacing.md} + ${rem(5)})`,
    paddingRight: `calc(${theme.spacing.sm} / 2)`,
    paddingTop: `calc(${theme.spacing.lg} * 1.5)`,
    paddingBottom: `calc(${theme.spacing.xl} - ${theme.spacing.md})`,

    // Omit px suffix when using theme values
    margin: `${theme.spacing.xs} ${theme.spacing.md}`
  }
}));
Automatic px to rem conversion

If you use numbers in Mantine components props, they will be treated as px and converted to rem,
for example:

import { ColorSwatch } from "@&#8203;mantine/core";

function DemoPx() {
  // Specify ColorSwatch size in px, it will be automatically converted to rem
  // Width and height of ColorSwatch in this case will be 32px / 16 = 2rem
  return <ColorSwatch color="#&#8203;000" size={32} />;
}

function DemoRem() {
  // This demo will have the same size as previous one
  return <ColorSwatch color="#&#8203;000" size="2rem" />;
}

The same logic is applied to style props available
in every component:

import { Box } from "@&#8203;mantine/core";

function Demo() {
  // width: 2rem, height: 1rem
  // margin-left: 1rem
  // @&#8203;media (min-width: theme.breakpoints.sm) -> margin-left: 2rem
  return <Box w={32} h={16} ml={{ base: 16, sm: 32 }} />;
}
createStyles breaking changes

createStyles function no longer receives getRef
as a third argument. Use getStylesRef exported from @mantine/core package instead:

// in 5.x, will not work in 6.x
import { createStyles } from '@&#8203;mantine/core';

createStyles((theme, params, getRef) => {
  child: { ref: getRef('child') },
  parent: { [`& .${getRef('child')}`]: { color: 'red' } },
});

// in 6.x use getStylesRef function
import { createStyles, getStylesRef } from '@&#8203;mantine/core';

createStyles((theme, params) => {
  child: { ref: getStylesRef('child') },
  parent: { [`& .${getStylesRef('child')}`]: { color: 'red' } },
});
@​mantine/notifications breaking changes

@​mantine/notifications package no longer exports
NotificationsProvider component. Instead you should add Notifications component to any
part of your application. This change allows to avoid unnecessary rerenders of child components
when notifications state change. Also useNotifications hook is no longer exported from the package.

import { MantineProvider } from "@&#8203;mantine/core";
import { Notifications } from "@&#8203;mantine/notifications";

function Demo() {
  return (
    <MantineProvider withNormalizeCSS withGlobalStyles>
      <Notifications />
      <App />
    </MantineProvider>
  );
}
@​mantine/rte package deprecation

@mantine/rte package is deprecated – it will no longer receive updates (last version will remain 5.x)
and it may no longer be compatible with @mantine/core and @mantine/hooks packages (6.x and later versions).
Migrate to @​mantine/tiptap as soon as possible.

@​mantine/dates breaking changes

All components from @mantine/dates package were rebuilt from scratch.
Note that the following list is not full as it is difficult to include all breaking changes
after a full package revamp – follow documentation of component that you use to find out about
all breaking changes.

  • Styles API selectors of components were changed
  • DatePicker component was renamed to DatePickerInput
  • Calendar component was renamed to DatePicker
  • TimeInput component was migrated to native input[type="time"] as it provides better UX in most browsers
  • TimeRangeInput component was removed – it is no longer exported from the package
  • DateRangePicker and RangeCalendar components were removed – you can now setup dates range picking in DatePicker and DatePickerInput
  • amountOfMonths prop was renamed to numberOfColumns in all components
  • DatePickerInput (previously DatePicker) component no longer supports allowFreeInput prop – use DateInput component instead
  • DatePicker (previously Calendar) component no longer supports dayClassName and dayStyle props – use getDayProps instead
Theme object changes

You can no longer define dateFormat and datesLocale in theme,
use components prop to specify format instead:

// 5.x, will not work in 6.x
import { MantineProvider } from "@&#8203;mantine/core";

function Demo() {
  return (
    <MantineProvider theme={{ dateFormat: "MMMM DD YYYY", datesLocale: "es" }}>
      <App />
    </MantineProvider>
  );
}

// 6.x – use components props
import { DatePickerInput } from "@&#8203;mantine/dates";

function Demo() {
  return <DatePickerInput valueFormat="MMMM D, YYYY" locale="es" />;
}
Modal and Drawer breaking changes

Modal and Drawer components
props were renamed:

  • withFocusReturn → returnFocus
  • overflow → scrollAreaComponent (scroll now is always handled inside modal/drawer)
  • overlayBlur → overlayProps.blur
  • overlayColor → overlayProps.color
  • overlayOpacity → overlayProps.opacity
  • exitTransitionDuration → transitionProps.exitDuration
  • transition → transitionProps.transition
  • transitionDuration → transitionProps.duration
  • transitionTimingFunction → transitionProps.timingFunction

Modal styles API changes:

  • modal selector was renamed to content

Drawer styles API changes:

  • drawer selector was renamed to content
NumberInput breaking changes

NumberInput component types for value, defaultValue
and onChange props were changed. It now expects value to be number | '' (number or empty string) instead
of number | undefined. This change was made to address multiple bugs that happened because it was
not possible to differentiate controlled and uncontrolled NumberInput.

import { useState } from "react";
import { NumberInput } from "@&#8203;mantine/core";

function Demo() {
  const [value, setValue] = useState<number | "">(0);
  return <NumberInput value={value} onChange={setValue} />;
}
Pagination breaking changes
  • Styles API selectors were changed
  • Renamed/removed props:
    • itemComponent – removed, use getItemProps or static components instead
    • getItemAriaLabel – removed, use getItemProps prop instead
    • initialPage → defaultValue
    • page → value
@​mantine/spotlight breaking changes

Spotlight component was migrated to use Modal
under the hood. Its Styles API selectors and some props names were changed – it now supports all Modal component props.

Renamed props:

  • overlayBlur → overlayProps.blur
  • overlayColor → overlayProps.color
  • overlayOpacity → overlayProps.opacity
  • exitTransitionDuration → transitionProps.exitDuration
  • transition → transitionProps.transition
  • transitionDuration → transitionProps.transition
  • transitionTimingFunction → transitionProps.timingFunction

Spotlight actions are now fully controlled:

  • actions prop no longer accept a callback function, only a list of actions
  • To make register/remove features to work you will need to store actions in state
Other breaking changes
  • Text no longer supports variant="link", use Anchor instead
  • Input Styles API was changed – disabled, invalid and withIcon selectors are no longer available, they were migrated to data-disabled, data-invalid and data-with-icon attributes
  • PasswordInput Styles API was changed – invalid and withIcon selectors are no longer available, use data-invalid and data-with-icon attributes with innerInput selector
  • invalid prop was renamed to error in Input component
  • FileInput, Select and MultiSelect components no longer support clearButtonLabel and clearButtonTabIndex props, use clearButtonProps instead to add any extra props to the clear button
  • @mantine/next package no longer exports NextLink component
  • Checkbox.Group, Switch.Group and Radio.Group components no longer include Group – orientation, offset and spacing props are no longer supported. This change gives you more freedom on how to organize inputs layout.
  • Chip.Group no longer includes Group – you need to manage layout on your side
  • List component Styles API was changed, it no longer has withIcon selector, use data-with-icon attribute instead
  • withFocusReturn prop was renamed to returnFocus in Modal and Drawer components
  • Card component now uses padding prop instead of p to offset Card.Section components
  • RichTextEditor now depends on @tabler/icons-react (>=2.1.0) package instead of @tabler/icons
  • @mantine/core package no longer exports GroupedTransition component, use multiple Transition components instead
  • use-scroll-lock hook is deprecated, all Mantine components now use react-remove-scroll
  • ScrollArea.Autosize component prop maxHeight is removed, it is replaced with mah style prop
  • SegmentedControl component Styles API was changed – labelActive and disabled selectors were removed (replaced with data-active and data-disabled attributes on label selector), active selector was renamed to indicator
  • Notification component prop disallowClose prop was renamed to withCloseButton, it also was changed in notifications system
  • Tooltip component props transition and transitionDuration were renamed to transitionProps
  • Popover, HoverCard, Menu, Select, MultiSelect, ColorInput and Autocomplete components transition, transitionDuration and exitTransitionDuration props were renamed to transitionProps
  • Indicator component no longer has the props dot, showZero and overflowCount. Use disabled and label instead to recreate the previous behavior.

Variants and sizes on MantineProvider

You can now use MantineProvider to add variants to all Mantine components that support Styles API
and sizes to components that support size prop.

Variants:

import { MantineProvider, Button, Group } from "@&#8203;mantine/core";

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            variants: {
              danger: (theme) => ({
                root: {
                  backgroundColor: theme.colors.red[9],
                  color: theme.colors.red[0],
                  ...theme.fn.hover({ backgroundColor: theme.colors.

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "every weekend" (UTC), 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 this update again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/KoichiKiyokawa/react-sandbox).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNC4xNTQuNiIsInVwZGF0ZWRJblZlciI6IjM3LjgxLjMiLCJ0YXJnZXRCcmFuY2giOiJtYWluIn0=-->

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
0 participants