fix(deps): update mantine monorepo to v6 (major) #151

renovate · 2023-03-02T12:36:55Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	`4.2.12` -> `6.0.0`
@mantine/hooks (source)	`4.2.12` -> `6.0.0`
@mantine/next (source)	`4.2.12` -> `6.0.0`

Release Notes

mantinedev/mantine

`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 "@&#8203;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.red[8] }),
                },
              }),

              success: (theme) => ({
                root: {
                  backgroundImage: theme.fn.linearGradient(
                    45,
                    theme.colors.cyan[theme.fn.primaryShade()],
                    theme.colors.teal[theme.fn.primaryShade()],
                    theme.colors.green[theme.fn.primaryShade()]
                  ),
                  color: theme.white,
                },
              }),
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button variant="danger">Danger variant</Button>
        <Button variant="success">Success variant</Button>
      </Group>
    </MantineProvider>
  );
}

Sizes:

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

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Button: {
            sizes: {
              xxxs: () => ({
                root: {
                  height: "1.25rem",
                  padding: "0.3125rem",
                  fontSize: "0.5rem",
                },
              }),

              xxl: (theme) => ({
                root: {
                  fontSize: "1.75rem",
                  height: "5rem",
                  padding: theme.spacing.xl,
                },
              }),
            },
          },
        },
      }}
    >
      <Group position="center">
        <Button size="xxxs">XXXS button</Button>
        <Button size="xxl">XXL button</Button>
      </Group>
    </MantineProvider>
  );
}

Updated @mantine/dates package

@mantine/dates package was rebuilt from scratch, it now includes new components to
pick year, month
and dates. All new pickers support type prop that can be:

default – Date | null – user can pick one date
multiple – Date[] – user can pick any number of dates
range – [Date | null, Date | null] – user can pick a range of two dates

type="default" example with DatePickerInput component:

import { useState } from "react";
import { DatePickerInput } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DatePickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

type="multiple" example with MonthPickerInput component:

import { useState } from "react";
import { MonthPickerInput } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date[]>([]);
  return (
    <MonthPickerInput
      type="multiple"
      label="Pick dates"
      placeholder="Pick dates"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

type="range" example with YearPickerInput component:

import { useState } from "react";
import { YearPickerInput } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
  return (
    <YearPickerInput
      type="range"
      label="Pick dates range"
      placeholder="Pick dates range"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

DateTimePicker component

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

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      maw={400}
      mx="auto"
    />
  );
}

DateInput

import { useState } from "react";
import { DateInput } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <DateInput
      value={value}
      onChange={setValue}
      label="Date input"
      placeholder="Date input"
      maw={400}
      mx="auto"
    />
  );
}

YearPicker component

import { useState } from "react";
import { Group } from "@&#8203;mantine/core";
import { YearPicker } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <Group position="center">
      <YearPicker value={value} onChange={setValue} />
    </Group>
  );
}

YearPickerInput

import { useState } from "react";
import { YearPickerInput } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <YearPickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

MonthPicker

import { useState } from "react";
import { Group } from "@&#8203;mantine/core";
import { MonthPicker } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <Group position="center">
      <MonthPicker value={value} onChange={setValue} />
    </Group>
  );
}

MonthPickerInput

import { useState } from "react";
import { MonthPickerInput } from "@&#8203;mantine/dates";

function Demo() {
  const [value, setValue] = useState<Date | null>(null);
  return (
    <MonthPickerInput
      label="Pick date"
      placeholder="Pick date"
      value={value}
      onChange={setValue}
      mx="auto"
      maw={400}
    />
  );
}

Calendar

Calendar component can now be used as a base for date pickers with custom logic.
For example, you can build week picker component with it:

import { useState } from "react";
import { Group } from "@&#8203;mantine/core";
import { Calendar } from "@&#8203;mantine/dates";
import dayjs from "dayjs";

function getDay(date: Date) {
  const day = date.getDay();
  return day === 0 ? 6 : day - 1;
}

function startOfWeek(date: Date) {
  return new Date(
    date.getFullYear(),
    date.getMonth(),
    date.getDate() - getDay(date) - 1
  );
}

function endOfWeek(date: Date) {
  return dayjs(
    new Date(
      date.getFullYear(),
      date.getMonth(),
      date.getDate() + (6 - getDay(date))
    )
  )
    .endOf("date")
    .toDate();
}

function isInWeekRange(date: Date, value: Date | null) {
  return (
    value &&
    dayjs(date).isBefore(endOfWeek(value)) &&
    dayjs(date).isAfter(startOfWeek(value))
  );
}

function Demo() {
  const [hovered, setHovered] = useState<Date | null>(null);
  const [value, setValue] = useState<Date | null>(null);

  return (
    <Group position="center">
      <Calendar
        withCellSpacing={false}
        getDayProps={(date) => {
          const isHovered = isInWeekRange(date, hovered);
          const isSelected = isInWeekRange(date, value);
          const isInRange = isHovered || isSelected;
          return {
            onMouseEnter: () => setHovered(date),
            onMouseLeave: () => setHovered(null),
            inRange: isInRange,
            firstInRange: isInRange && date.getDay() === 1,
            lastInRange: isInRange && date.getDay() === 0,
            selected: isSelected,
            onClick: () => setValue(date),
          };
        }}
      />
    </Group>
  );
}

DatesProvider

DatesProvider component lets you set various settings that are shared across all
components exported from @mantine/dates package:

import "dayjs/locale/ru";
import {
  DatesProvider,
  MonthPickerInput,
  DatePickerInput,
} from "@&#8203;mantine/dates";

function Demo() {
  return (
    <DatesProvider
      settings={{ locale: "ru", firstDayOfWeek: 0, weekendDays: [0] }}
    >
      <MonthPickerInput label="Pick month" placeholder="Pick month" />
      <DatePickerInput mt="md" label="Pick date" placeholder="Pick date" />
    </DatesProvider>
  );
}

New PinInput component

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

function Demo() {
  return (
    <Group position="center">
      <PinInput />
    </Group>
  );
}

Overlay component improvements

Overlay component now supports the following new features:

You can now render children inside Overlay
When center prop is set overlay children will be centered vertically and horizontally
New fixed prop controls position, when it is set position: fixed, when it is not set position: absolute

import { useState } from "react";
import { Button, Overlay, Image, AspectRatio } from "@&#8203;mantine/core";

function Demo() {
  const [visible, setVisible] = useState(false);

  return (
    <AspectRatio ratio={16 / 9} maw={400} mx="auto">
      <Image
        src="https://images.unsplash.com/photo-1546527868-ccb7ee7dfa6a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80"
        onClick={() => setVisible(false)}
      />
      {!visible && (
        <Overlay blur={15} center>
          <Button color="red" radius="xl" onClick={() => setVisible(true)}>
            NSFW, click to reveal
          </Button>
        </Overlay>
      )}
    </AspectRatio>
  );
}

Modal and Drawer components improvements

Modular components

Modal and Drawer components
now expose modular components that can be used to build custom modals and drawers. This feature
allows you to have full control over the component rendering. Previous approach with single
Modal/Drawer component will still work the same way as before.

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

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Modal.Root opened={opened} onClose={close}>
        <Modal.Overlay />
        <Modal.Content>
          <Modal.Header>
            <Modal.Title>Modal title</Modal.Title>
            <Modal.CloseButton />
          </Modal.Header>
          <Modal.Body>Modal content</Modal.Body>
        </Modal.Content>
      </Modal.Root>

      <Group position="center">
        <Button onClick={open}>Open modal</Button>
      </Group>
    </>
  );
}

Built in ScrollArea

Modal and Drawer components
now use ScrollArea component to handle scroll:

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

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  const content = Array(100)
    .fill(0)
    .map((_, index) => <p key={index}>Modal with scroll</p>);

  return (
    <>
      <Modal opened={opened} onClose={close} title="Header is sticky">
        {content}
      </Modal>

      <Group position="center">
        <Button onClick={open}>Open modal</Button>
      </Group>
    </>
  );
}

Modal offset

Modal component now supports xOffset and yOffset props
to control vertical and horizontal offsets of the modal content:

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

function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Modal
        opened={opened}
        onClose={close}
        title="Authentication"
        yOffset="1vh"
        xOffset={0}
      >
        <AuthenticationForm noShadow noPadding />
      </Modal>

      <Group position="center">
        <Button onClick={open}>Open modal</Button>
      </Group>
    </>
  );
}

keepMounted prop

Components that use Transition now support keepMounted.
When keepMounted prop is set component will not be unmounted from the DOM and instead it will
be hidden with display: none styles.

keepMounted prop is supported by the following components:

Pagination component improvements

Pagination component now supports changing icons with props and modular components:

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

function Demo() {
  return (
    <Pagination.Root total={10}>
      <Group spacing={5} position="center">
        <Pagination.First />
        <Pagination.Previous />
        <Pagination.Items />
        <Pagination.Next />
        <Pagination.Last />
      </Group>
    </Pagination.Root>
  );
}

@mantine/spotlight improvements

Controlled actions

You can now fully control actions state:

import { useState } from "react";
import { Group, Button } from "@&#8203;mantine/core";
import { SpotlightProvider, spotlight } from "@&#8203;mantine/spotlight";
import { IconAlien, IconSearch } from "@&#8203;tabler/icons-react";

function SpotlightControls() {
  const [registered, setRegistered] = useState(false);

  return (
    <Group position="center">
      <Button onClick={spotlight.open}>Open spotlight</Button>
      {registered ? (
        <Button
          variant="outline"
          color="red"
          onClick={() => {
            setRegistered(false);
            spotlight.removeActions(["secret-action-1", "secret-action-2"]);
          }}
        >
          Remove extra actions
        </Button>
      ) : (
        <Button
          variant="outline"
          onClick={() => {
            setRegistered(true);
            spotlight.registerActions([
              {
                id: "secret-action-1",
                title: "Secret action",
                description: "It was registered with a button click",
                icon: <IconAlien size="1.2rem" />,
                onTrigger: () => console.log("Secret"),
              },
              {
                id: "secret-action-2",
                title: "Another secret action",
                description:
                  "You can register multiple actions with just one command",
                icon: <IconAlien size="1.2rem" />,
                onTrigger: () => console.log("Secret"),
              },
            ]);
          }}
        >
          Register extra actions
        </Button>
      )}
    </Group>
  );
}

export function Demo() {
  // It is required to store actions in state for register/remove functions to work
  const [actions, setActions] = useState([
    /* ... see in previous demos */
  ]);

  return (
    <SpotlightProvider
      actions={actions}
      onActionChange={setActions}
      searchIcon={<IconSearch size="1.2rem" />}
      searchPlaceholder="Search..."
      shortcut="mod + shift + C"
    >
      <SpotlightControls />
    </SpotlightProvider>
  );
}

Controlled search query

You can now fully control search query:

import { useState } from "react";
import { Button, Group } from "@&#8203;mantine/core";
import {
  SpotlightProvider,
  spotlight,
  SpotlightAction,
} from "@&#8203;mantine/spotlight";

function SpotlightControl() {
  return (
    <Group position="center">
      <Button onClick={spotlight.open}>Open spotlight</Button>
    </Group>
  );
}

function Demo() {
  const [query, setQuery] = useState("");
  const actions: SpotlightAction[] =
    query !== "%%secret%%"
      ? [
          {
            title: "Reveal secret actions",
            description: "Click this action to reveal secret actions",
            onTrigger: () => setQuery("%%secret%%"),
            closeOnTrigger: false,
          },
        ]
      : [
          {
            title: "Super secret action",
            keywords: "%%secret%%",
            onTrigger: () => {},
          },
          {
            title: "Rick roll",
            description: "Do not click",
            keywords: "%%secret%%",
            onTrigger: () => {
              window.location.href =
                "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
            },
          },
        ];

  return (
    <SpotlightProvider
      actions={actions}
      query={query}
      onQueryChange={setQuery}
      searchIcon={<IconSearch size="1.2rem" />}
      searchPlaceholder="Search..."
      shortcut="mod + shift + 1"
      nothingFoundMessage="Nothing found..."
    >
      <SpotlightControl />
    </SpotlightProvider>
  );
}

Other changes

rightSection of all inputs is now based on size prop by default (previously it was a static value)
Chip component now supports filled, outline and light variants
theme.headings.fontFamily now fallbacks to theme.fontFamily if value is not defined on MantineProvider
@mantine/notifications package now exports notifications object that includes functions to show, update, hide, clean and clean queue
@mantine/nprogress, @mantine/modals and @mantine/spotlight packages now exports nprogress, modals and spotlight objects with all package methods
use-os hook now sets initial value in useLayoutEffect by default (configurable with option) to avoid hydration mismatches
use-id hook now always generate random id when component is mounted to replace id generated by React.useId hook. This change prevents browser from showing incorrect autocomplete suggestions for inputs.
Timeline component now supports root Styles API selector
SegmentedControl component now supports readOnly prop
Kbd component now supports size prop
use-form now supports form.getTransformedValues handler
Tooltip now has better color contrast with dark color scheme
Highlight component now supports changing styles per highlighted substring
JsonInput component now supports serialize and deserialize props to allow custom JSON formats
Modals manager now supports type safe context modals
@mantine/form now exports new matchesField validator
form.getInputProps withError parameter is now true by default for all inputs
New use-headroom hook

Previous documentation versions

`v5.10.5`

Compare Source

What's Changed

[@mantine/dates] Fix inputWrapperOrder not supported by TimeInput and TimeInputRange components (#3520)
[@mantine/core] Fix AppShell, Dialog, Drawer and Modal components incorrect style props type
[@mantine/modals] Fix centered modal jumping when closed (#3570)
[@mantine/core] Popover: Fix dropdown not following target element inside scrollable container when withinPortal is set (#3576)
[@mantine/core] Tooltip: Fix incorrect disabled prop behavior in Tooltip.Floating (#3611)
[@mantine/core] Table: Fix incorrect th styles inside tbody (#3556)
[@mantine/core] Add ColSpan type exports (#3564)
[@mantine/core] PasswordInput: Fix typo in selector (#3553)

New Contributors

@7MinutesDead-Git made their first contribution in https://github.com/mantinedev/mantine/pull/3561
@Songkeys made their first contribution in https://github.com/mantinedev/mantine/pull/3562
@KyleSmith0905 made their first contribution in https://github.com/mantinedev/mantine/pull/3585
@sgrobert made their first contribution in https://github.com/mantinedev/mantine/pull/3603
@maradney made their first contribution in https://github.com/mantinedev/mantine/pull/3576
@yosafatkesuma made their first contribution in https://github.com/mantinedev/mantine/pull/3520

Full Changelog: mantinedev/mantine@5.10.4...5.10.5

`v5.10.4`

Compare Source

What's Changed

[@mantine/core] PasswordInput: Hide native browser password reveal button in Edge
[@mantine/core] Notification: Fix content overflow with very large children (#3540)
[@mantine/core] Make useInputProps hook strongly typed (#3486)
[@mantine/core] MultiSelect: Add missing default value for dropdownPosition (#3490)
[@mantine/core] Table: Fix styles for th elements not working inside tbody (#3504)
[@mantine/modals] Fix multiple closeModal issues (#3498)
[@mantine/hooks] use-disclosure: Memoize functions (#3513)
[@mantine/hooks] use-focus-trap: Fix aria-hidden not being removed from the body when target element changes (#3526)
[@mantine/core] Allow usage of read only arrays in Select and MulstiSelect components (#3542)
[@mantine/core] Text: Add option to truncate text from the start (#3550)

New Contributors

@DanB-dev made their first contribution in https://github.com/mantinedev/mantine/pull/3526
@cyantree made their first contribution in https://github.com/mantinedev/mantine/pull/3498
@dejurin made their first contribution in https://github.com/mantinedev/mantine/pull/3504
@jasonjmcghee made their first contribution in https://github.com/mantinedev/mantine/pull/3490
@desmaraisp made their first contribution in https://github.com/mantinedev/mantine/pull/3499

Full Changelog: mantinedev/mantine@5.10.3...5.10.4

`v5.10.3`

Compare Source

What's Changed

[@mantine/core] Add option to pass additional props to file input in FileButton and FileInput components
[@mantine/form] Fix onBlur missing in getInputProps type
[@mantine/form] Improve isEmail validation logic (#3443)
[@mantine/core] SimpleGrid: Fix zero spacing and vertical spacing nor working in breakpoints (#3453)
[@mantine/dropzone] Add avif image mime type (#3166)
[@mantine/dates] DateRangePicker: Fix incorrect openDropdownOnClear behavior (#3299)
[@mantine/hooks] use-hotkeys: Add additional configuration to allow hook usage with content editable elements (#3410)
[@mantine/core] Add hoverOnSearchChange prop to Autocomplete, Select and MultiSelect (#3102)
[@mantine/styles] Fix incorrect useComponentDefaultProps type (#3484)
[@mantine/core] MultiSelect: Allow to disable selected items filtering from the dropdown items list (#3104)
[@mantine/form] Fix zodResolver not being type safe with older versions of TypeScript (#3431)
[@mantine/carousel] Fix carousel with vertical orientation working incorrectly with RTL direction (#3438)
[@mantine/core] Fix dropdown position not being updated after Select, MultiSelect and Autocomplete dropdown was flipped and user started searching (#3439)
[@mantine/core] Pagination: Fix spacing={0} not working (#3456)
[@mantine/core] Dependency: migrate @floating-ui/react-dom-interactions to @floating-ui/react (#3471)
[@mantine/core] Skeleton: Allow overflow when children are visible (#3475)
[@mantine/core] TransferList: add transferAllMatchingFilter prop (#3436)

New Contributors

@omerfarukdogan made their first contribution in https://github.com/mantinedev/mantine/pull/3475
@genffy made their first contribution in https://github.com/mantinedev/mantine/pull/3471
@c-nicol made their first contribution in https://github.com/mantinedev/mantine/pull/3456
@hassanzohdy made their first contribution in https://github.com/mantinedev/mantine/pull/3438
@echoghi made their first contribution in https://github.com/mantinedev/mantine/pull/3466
@maixiu made their first contribution in https://github.com/mantinedev/mantine/pull/3299

Full Changelog: mantinedev/mantine@5.10.2...5.10.3

`v5.10.2`

Compare Source

What's Changed

[@mantine/modals] Fix modals closing issues (#3300)
[@mantine/tiptap] Update @tabler/icons installation instructions (#3415)

New Contributors

@kelvinabella made their first contribution in https://github.com/mantinedev/mantine/pull/3401

Full Changelog: mantinedev/mantine@5.10.1...5.10.2

`v5.10.1`

Compare Source

What's Changed

[@mantine/core] HoverCard: Add missing types for classNames, styles and unstyled props (#3257)
[@mantine/modals] Fix incorrect close modal logic (#3300)
[@mantine/hooks] use-set-state: Make setState fucntion stable across renders (#3357)
[@mantine/tiptap] Fix incorrect styles on placeholder component (#3382)
[@mantine/hooks] use-local-storage: Fix value not updated when local storage value is cleared (#3298)
[@mantine/core] Fix unexpected extra space added at the bottom of Switch, Radio and Checkbox components (#3303)
[@mantine/hooks] use-full-screen: Fix hook not working on iOS (#3327)
[@mantine/core] Stepper: Fix allowStepSelect not working on Stepper.Step component (#3340)
[@mantine/form] Fix useForm initialDirty stops form.isDirty from working as expected (#3372)
[@mantine/core] Stack: Fix incorrect default justify prop (#3293)

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

function Demo() {
  return (
    <MantineProvider
      inherit
      theme={{
        components: {
          Button: {
            defaultProps: (theme) => ({
              color: theme.colorScheme === 'dark' ? 'orange' : 'cyan',
            }),
          },
        },
      }}
    >
      <Button>Demo button</Button>
    </MantineProvider>
  );
}

@mantine/form validators

@mantine/form package now exports isNotEmpty, isEmail, matches, isInRange and hasLength functions
to simplify validation of common fields types:

import { useForm, isNotEmpty, isEmail, isInRange, hasLength, matches } from '@&#8203;mantine/form';
import { Button, Group, TextInput, NumberInput, Box } from '@&#8203;mantine/core';

function Demo() {
  const form = useForm({
    initialValues: {
      name: '',
      job: '',
      email: '',
      favoriteColor: '',
      age: 18,
    },

    validate: {
      name: hasLength({ min: 2, max: 10 }, 'Name must be 2-22 characters long'),
      job: isNotEmpty('Enter your current job'),
      email: isEmail('Invalid email'),
      favoriteColor: matches(/^#([0-9a-f]{3}){1,2}$/, 'Enter a valid hex color'),
      age: isInRange({ min: 18, max: 99 }, 'You must be 18-99 years old to register'),
    },
  });

  return (
    <Box component="form" maw={400} mx="auto" onSubmit={form.onSubmit(() => {})}>
      <TextInput label="Name" placeholder="Name" withAsterisk {...form.getInputProps('name')} />
      <TextInput
        label="Your job"
        placeholder="Your job"
        withAsterisk
        mt="md"
        {...form.getInputProps('job')}
      />
      <TextInput
        label="Your email"
        placeholder="Your email"
        withAsterisk
        mt="md"
        {...form.getInputProps('email')}
      />
      <TextInput
        label="Your favorite color"
        placeholder="Your favorite color"
        withAsterisk
        mt="md"
        {...form.getInputProps('favoriteColor')}
      />
      <NumberInput
        label="Your age"
        placeholder="Your age"
        withAsterisk
        mt="md"
        {...form.getInputProps('age')}
      />

      <Group position="right" mt="md">
        <Button type="submit">Submit</Button>
      </Group>
    </Box>
  );
}

Flagpack extension

New mantine-flagpack extension. It is a set of 4x3 flags as React components based on flagpack.
The package is tree shakable – all unused components are not included in the production bundle.
All flag components support style props.

Other changes

ColorPicker component now supports onColorSwatchClick prop
ColorInput now supports closeOnColorSwatchClick prop
ColorInput now shows eye dropper in all supported browsers by default
@mantine/form now exports TransformedValues type to get type of transformed values from the form object
RingProgress now supports changing root segment color with rootColor prop
Text component now supports truncate prop
Stepper component now supports allowSelectNextSteps prop
@mantine/form now exports superstructResolver to allow schema based validation with superstruct
FileInput and FileButton components now support capture prop

New Contributors

@sctape made their first contribution in https://github.com/mantinedev/mantine/pull/3098
@paulm17 made their first contribution in https://github.com/mantinedev/mantine/pull/3151
@ahmedDev20 made their first contribution in https://github.com/mantinedev/mantine/pull/3202
@dmshvetsov made their first contribution in https://github.com/mantinedev/mantine/pull/2957

Full Changelog: mantinedev/mantine@5.9.6...5.10.0

`v5.9.6`

Compare Source

What's Changed

[@mantine/spotlight] Allow overriding search input size (#3181)
[@mantine/core] Tooltip: Fix incorrect Tooltip.Floating Styles API name
[@mantine/core] ScrollArea: Add viewportProps support
[@mantine/core] Title: Remove span prop

New Contributors

@bissbr01 made their first contribution in https://github.com/mantinedev/mantine/pull/3233
@marvin-j97 made their first contribution in https://github.com/mantinedev/mantine/pull/3262
@Strajk made their first contribution in https://github.com/mantinedev/mantine/pull/3181

Full Changelog: mantinedev/mantine@5.9.5...5.9.6

`v5.9.5`

Compare Source

What's Changed

[@mantine/tiptap] Fix LinkControl not supporting custom icon (#3196)
[@mantine/hooks] use-network: Fix incorrect initial online/offline state detection (#3178)
[@mantine/core] Space: Add responsive values support to w and h props
[@mantine/core] FileInput: Fix value overflow when selected value name is too large

New Contributors

@tuliren made their first contribution in https://github.com/mantinedev/mantine/pull/3191

Full Changelog: mantinedev/mantine@5.9.4...5.9.5

`v5.9.4`

Compare Source

What's Changed

[@mantine/core] Switch: Fix incorrect alignment (#3082)
[@mantine/dates] Fix DateRangePicker and DatePicker components not supporting

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 has been generated by Mend Renovate. View repository job log here.

vercel · 2023-03-02T12:36:59Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
clhs-scoreboard	❌ Failed (Inspect)			Mar 2, 2023 at 0:37AM (UTC)

renovate · 2023-03-04T11:48:45Z

Renovate Ignore Notification

Because you closed this PR without merging, Renovate will ignore this update. You will not get PRs for any future 6.x releases. But if you manually upgrade to 6.x then Renovate will re-enable minor and patch updates automatically.

If you accidentally closed this PR, or if you changed your mind: rename this PR to get a fresh replacement PR.

fix(deps): update mantine monorepo to v6

2e97251

vercel bot had a problem deploying to Preview March 2, 2023 12:37 Failure

BWsix closed this Mar 4, 2023

renovate bot deleted the renovate/major-mantine-monorepo branch March 4, 2023 11:48

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(deps): update mantine monorepo to v6 (major) #151

fix(deps): update mantine monorepo to v6 (major) #151

renovate bot commented Mar 2, 2023 •

edited

vercel bot commented Mar 2, 2023 •

edited

renovate bot commented Mar 4, 2023 •

edited

fix(deps): update mantine monorepo to v6 (major) #151

fix(deps): update mantine monorepo to v6 (major) #151

Conversation

renovate bot commented Mar 2, 2023 • edited

Release Notes

Breaking changes

Migration to rem/em units

Automatic px to rem conversion

createStyles breaking changes

@​mantine/notifications breaking changes

@​mantine/rte package deprecation

@​mantine/dates breaking changes

Theme object changes

Modal and Drawer breaking changes

NumberInput breaking changes

Pagination breaking changes

@​mantine/spotlight breaking changes

Other breaking changes

Variants and sizes on MantineProvider

Updated @​mantine/dates package

New PinInput component

Overlay component improvements

Modal and Drawer components improvements

Modular components

Built in ScrollArea

Modal offset

keepMounted prop

Pagination component improvements

@​mantine/spotlight improvements

Controlled actions

Controlled search query

Other changes

Previous documentation versions

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

Theme based default props

@​mantine/form validators

Flagpack extension

Other changes

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

Configuration

vercel bot commented Mar 2, 2023 • edited

renovate bot commented Mar 4, 2023 • edited

Renovate Ignore Notification

renovate bot commented Mar 2, 2023 •

edited

@mantine/notifications breaking changes

@mantine/rte package deprecation

@mantine/dates breaking changes

@mantine/spotlight breaking changes

Updated @mantine/dates package

@mantine/spotlight improvements

@mantine/form validators

vercel bot commented Mar 2, 2023 •

edited

renovate bot commented Mar 4, 2023 •

edited