Skip to content
This repository was archived by the owner on Dec 14, 2025. It is now read-only.

Update mantine monorepo (major) #709

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

Update mantine monorepo (major) #709

renovate wants to merge 1 commit into from

Conversation

@renovate
Copy link
Contributor

@renovate renovate bot commented Oct 19, 2024 •
edited
Loading

Note: This PR body was truncated due to platform limits.

This PR contains the following updates:

Package Change Age Confidence
@mantine/core (source) 4.2.12 -> 8.3.9 age confidence
@mantine/hooks (source) 4.2.12 -> 8.3.9 age confidence
@mantine/next (source) 4.2.12 -> 6.0.22 age confidence
@mantine/notifications (source) 4.2.12 -> 8.3.9 age confidence

Release Notes

mantinedev/mantine (@​mantine/core)

v8.3.9

Compare Source

What's Changed
  • [@mantine/core] ColorInput: Fix incorrect action icon size (#​8481)
  • [@mantine/form] Fix insertListItem and replaceListItem handlers not being type safe (#​8478)
  • [@mantine/dates] DatePickerInput: Fix placeholder Styles API selector not working (#​8405)
  • [@mantine/core] ColorInput: Fix incorrect font-size if size prop not set explicitly (#​8472)
  • [@mantine/emotion] Add mergeSx utility function (#​8471)
  • [@mantine/core] ActionIcon: Fix incorrect disabled state background-color for gradient variant
  • [@mantine/modals] Fix breaking changes accidentally introduced in the previous patch (#​8476)
  • [@mantine/core] Combobox: Add withAlignedLabels prop support to offset selected check icon in the dropdown options (#​8391)
  • [@mantine/core] Badge: Fix circle prop not working when radius prop is set explicitly (#​8466)
  • [@mantine/core] Checkbox: Fix incorrect indeterminate state calculation (#​8460)
  • [@mantine/core] Radio: Fix Radio.Group switching from uncontrolled to controlled mode when value is explicitly set (#​8453)
New Contributors

Full Changelog: mantinedev/mantine@8.3.8...8.3.9

v8.3.8

Compare Source

What's Changed
  • [@mantine/modals] Improve types of context modals (#​8439)
  • [@mantine/core] Combobox: Fix keyboard interactions not working when used in shadow DOM (#​8438)
  • [@mantine/core] NumberInput: Fix , decimal separator not being converted to . when entering value from mobile keyboard
  • [@mantine/core] NumberInput: Fix incorrect keyboard displayed on iOS 26
  • [@mantine/charts] Add cellProps prop support to DonutChart and PieChart (#​8444)
  • [@mantine/core] Alert: Allow overriding role attribute (#​8447)
  • [@mantine/core] Menu: Add openDelay prop support to Menu.Sub component (#​8437)
New Contributors

Full Changelog: mantinedev/mantine@8.3.7...8.3.8

v8.3.7

Compare Source

What's Changed
  • [@mantine/modals] Add ConfirmModalProps type exports (#​8414)
  • [@mantine/core] AppShell: Fix unexpected Header transition when scrollbar becomes hidden via scroll lock (#​8420)
  • [@mantine/core] Add disabled prop for Radio.Group, Checkbox.Group and Switch.Group (#​8396)
  • [@mantine/core] Fix missing sub Menu components exports (#​8419)
  • [@mantine/tiptap] Fix editor control being overridden by custom onClick handler (#​8421)
  • [@mantine/core] PasswordInput: Add aria-pressed attribute to the visibility toggle (#​8425)
  • [@mantine/tiptap] Fix bubble menu being overlapped by the toolbar (#​8416)
  • [@mantine/core] Chip: Remove iconWrapper if icon is exlicitly disabled
  • [@mantine/charts] Add labelFormatter support to the default tooltip (#​8404)
New Contributors

Full Changelog: mantinedev/mantine@8.3.6...8.3.7

v8.3.6

Compare Source

What's Changed
  • [@mantine/charts] Add options to set curveType per series in LineChart and AreaChart components (#​8403)
  • [@mantine/charts] Heatmap: Fix dates range being affected by the user timezone (#​8371)
  • [@mantine/core] Chip: Allow disabling icon by setting icon={null} (#​8382)
  • [@mantine/core] List: Fix unexpected padding with listStyleType="none" (#​8393)
  • [@mantine/dates] TimePicker: Add option to change placeholders (#​8387)
  • [@mantine/core] Checkbox: Fix data-indeterminate not being set correctly (#​8385)
  • [@mantine/dates] TimePicker: Fix time being clamped incorrectly when only min or max defined
  • [@mantine/core] NumberInput: Fix zero value represented as string being transformed to empty string on blur
  • [@mantine/core] Chip: Fix incorrect size calculations for size="xs" (#​8367)
New Contributors

Full Changelog: mantinedev/mantine@8.3.5...8.3.6

v8.3.5

Compare Source

What's Changed
  • [@mantine/code-highlight] Add option to load custom shiki themes (#​8356)
  • [@mantine/form] Export more types (#​8357)
  • [@mantine/hooks] use-local-storage: Fix value not resetting to the default value when value is cleared from the local storage (#​8361)
  • [@mantine/core] Checkbox: Fix incorrect data-indeterminate attribute removal on state change (#​8363)
  • [@mantine/core] Alert: Fix invalid aria-describedby and arialabelled-by if title or children props are not used (#​8345)
New Contributors

Full Changelog: mantinedev/mantine@8.3.4...8.3.5

v8.3.4

Compare Source

What's Changed

  • [@mantine/core] Select: Allow overriding rightSection with null (#​8328)
  • [@mantine/dates] Calendar: Fix incorrect props types for hasNextLevel (#​8344)
  • [@mantine/core] Transition: Fix some animations being blurry (#​8070, #​8324)
  • [@mantine/dates] TimePicker: Fix custom amPmLabels being truncated in input and dropdown (#​8336)
  • [@mantine/dates] DatePicker: Add missing multiple handling to DatePickerPreset type (#​8341)

Full Changelog: mantinedev/mantine@8.3.3...8.3.4

v8.3.3

Compare Source

What's Changed

  • [@mantine/core] Checkbox: Fix iconColor prop not working as intended in some cases (#​8271)
  • [@mantine/spotlight] Add scrollareaProps to pass props down to the actions list wrapper (#​8300)
  • [@mantine/core] Tabs: Fix aria-controls not being overriden by ...others (#​8248)
  • [@mantine/dates] DateInput: Fix invalid date value crashing component (#​8290)
  • [@mantine/hooks] use-did-update: Fix hook not working in react strict mode (#​8306)
  • [@mantine/core] Popover: Fix excessive dropdown position recalculations (#​8308)
  • [@mantine/core] AppShell: Fix performance issues on first render (#​8287)

New Contributors

Full Changelog: mantinedev/mantine@8.3.2...8.3.3

v8.3.2

Compare Source

What's Changed

  • [@mantine/dates] Fix getDayProps not including types for data-* attributes (#​8275)
  • [@mantine/date] DateInput: Fix allowDeselect not allowing to clear the input value with Backspace key (#​8229)
  • [@mantine/date] DateInput: Fix allowDeselect not allowing to clear the input value with Backspace key
  • [@mantine/charts] Heatmap: Fix months displaying as splitted even if splitMonths is not set
  • [@mantine/hooks] use-click-outside: Pass event object as an argument to the callback function (#​8282)
  • [@mantine/core] NavLink: Fix passed onClick/onKeyDown preventing expand/collapse of child nodes (#​8294)
  • [@mantine/hooks] use-window-scroll: Limit number of state updates with requestAnimationFrame (#​8287)
  • [@mantine/dates] TimePicker: Fix page scrolling to the top on keyboard navigation (#​8237)
  • [@mantine/core] Menu: Add missing onChange type to Menu.Sub (#​8292)
  • [@mantine/core] List: Fix nested list items overflowing parent list container (#​8269)
  • [@mantine/core] Input: Fix alignment of right section with clear button (#​8254)
  • [@mantine/form] Fix nodenext resolutions (#​8260)
  • [@mantine/spotlight] Improve group label encoding logic (#​8264)

New Contributors

Full Changelog: mantinedev/mantine@8.3.1...8.3.2

v8.3.1

Compare Source

What's new

  • [@mantine/hooks] use-scroll-spy: Fix scroll events not being reassigned when scrollHost changes (#​8251)
  • [@mantine/modals] Update updateModal to include types for confirm modal
  • [@mantine/core] Tabs: Allow overriding aria attributes with ...others
  • [@mantine/core] Select: Fix clear button overlaying selected option (#​8249)
  • [@mantine/core] Combobox: Update focusTarget handler to correctly handle missing DOM node (#​8185)
  • [@mantine/core] ColorPicker: Fix unexpected margin-top (#​8247)
  • [@mantine/core] Allow specifying generic component in default props in the theme object (#​8188)
  • [@mantine/form] Fix incorrect type of matchesField validator (#​8201)
  • [@mantine/modals] Fix data-* attributes triggering type error (#​8217)
  • [@mantine/dates] DateInput: Fix allowDeselect prop not working (#​8229)
  • [@mantine/charts] Fix long tooltip names overflowing on the series color swatch in the tooltip (#​8230)

v8.3.0: 🔥

Compare Source

View changelog with demos on mantine.dev website

MiniCalendar component

New MiniCalendar component:

import { useState } from 'react';
import { MiniCalendar } from '@​mantine/dates';

function Demo() {
  const [value, onChange] = useState<string | null>('2025-04-15');
  return <MiniCalendar value={value} onChange={onChange} numberOfDays={6} />;
}

Progress vertical orientation

Progress now supports vertical orientation:

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

function Demo() {
  return (
    <Group>
      <Progress value={80} orientation="vertical" h={200} />
      <Progress value={60} color="orange" size="xl" orientation="vertical" h={200} animated />

      <Progress.Root size="xl" autoContrast orientation="vertical" h={200}>
        <Progress.Section value={40} color="lime.4">
          <Progress.Label>Documents</Progress.Label>
        </Progress.Section>
        <Progress.Section value={20} color="yellow.4">
          <Progress.Label>Apps</Progress.Label>
        </Progress.Section>
        <Progress.Section value={20} color="cyan.7">
          <Progress.Label>Other</Progress.Label>
        </Progress.Section>
      </Progress.Root>
    </Group>
  );
}

Heatmap splitMonths

Heatmap now supports splitMonths prop to visually separate months with a spacer column and render only days that belong to each month in its columns.

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

function Demo() {
  return (
    <Heatmap
      data={data}
      startDate="2024-02-16"
      endDate="2025-02-16"
      withMonthLabels
      splitMonths
    />
  );
}

Improved clearable prop handling

Select, MultiSelect, and other components with
clearable prop now allow displaying the clear button next to the right section:

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

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      data={['React', 'Angular', 'Vue', 'Svelte']}
      defaultValue="React"
      clearable
    />
  );
}

Tiptap 3 support

@​mantine/tiptap now supports Tiptap 3. It is
recommended to update all @tiptap/* packages to version 3.2.0 or later.

Your application might require some modifications related to Tiptap 3.
If you want to update your application to TipTap 3, follow
migration guide.

LLMs.txt

You can now use LLMs.txt file with Cursor and other IDEs.
The file is automatically updated with each release and includes
every demo and documentation page from mantine.dev. It is about 1.8mb.
You can find the latest version of LLMs.txt here
and further documentation here.

Other changes

  • MultiSelect now supports clearSearchOnChange prop to clear search input when an item is selected.
  • Reordering list items example now uses dnd-kit instead of @hello-pangea/dnd
  • TimePicker now supports reverseTimeControlsList prop to reverse the order of time controls in the dropdown. Use this option if you want the order of controls to match keyboard controls (up and down arrow) direction.
  • DirectionProvider now automatically subscribes to the dir attribute mutations of the root element (usually <html />) and updates internal state automatically.
  • Select and MultiSelect now retain references to selected options that are no longer present in data prop.
  • Active color swatch now has check icon in ColorPicker and ColorInput components.

v8.2.8

Compare Source

What's Changed

  • [@mantine/charts] LineChart: Fix gridColor prop being passed down to the root DOM node
  • [@mantine/carousel] Add data-type="next" and data-type="previous" to controls
  • [@mantine/hooks] use-scroll-spy: Add offset prop support (#​8209)
  • [@mantine/core] ScrollArea: Fix incorrect horizontal size calculations in ScrollArea.Autosize (#​8199)
  • [@mantine/core] JsonInput: Fix font-size not scaling with size prop (#​8206)
  • [@mantine/hooks] Fix incorrect ESM exports for nodenext module resolution (#​8211)
  • [@mantine/hooks] use-document-visibility: Fix initial document visibility state not being set (#​8215)
  • [@mantine/dates] DateTimePicker: Fix onDropdownClose not working (#​8212)

New Contributors

Full Changelog: mantinedev/mantine@8.2.7...8.2.8

v8.2.7

Compare Source

  • [@mantine/hooks] use-media-query: Fix hook crashing inside iframe in Safari (#​8189)
  • [@mantine/hooks] use-debounced-value: Make cancel a stable reference (#​8181)
  • [@mantine/core] Combobox: Fix incorrect flipping logic (#​8179, #​8194)
  • [@mantine/core] InputBase: Fix broken padding in multiline inputs (#​8177)

v8.2.6

Compare Source

v8.2.5

Compare Source

What's Changed

  • [@mantine/core] ScrollArea: Fix ScrollArea.Autosize not resizing when width of children changes (#​8160)
  • [@mantine/core] ScrollArea: Fix scrollbars not resizing correctly with dynamic content (#​8162)
  • [@mantine/core] TagsInput: Fix backspace key removing values with readOnly prop set (#​8066)
  • [@mantine/core] NumberInput: Fix incorrect trailing zeros handling for decimal values (#​8089)
  • [@mantine/core] Fix incorrect padding of multiline inputs (#​8156)
  • [@mantine/hooks] use-list-state: Update types to allow state function initializer (#​8157)

New Contributors

Full Changelog: mantinedev/mantine@8.2.4...8.2.5

v8.2.4

Compare Source

What's Changed

  • [@mantine/dates] DateInput: Fix disabled and clearable props collision (#​8098)
  • [@mantine/modals] Fix incorrect confirmProps and cancelProps types (#​8099)
  • [@mantine/dates] TimePicker: Fix controlled incorrect controlled value updates handling (#​8108)
  • [@mantine/core] NumberInput: Fix incorrect value sanitization in onBlur for max value clamping (#​8114)
  • [@mantine/core] Fix MultiSelect and TagsInput pills not being centered (#​8145)
  • [@mantine/core] Table: Fix 1px gap on thead with sticky + withTableBorder combination (#​8109)
  • [@mantine/core] Fix caret being invisible in some inputs (#​8149)
  • [@mantine/tiptap] Fix controls props being overridden by default props (#​8148)
  • [@mantine/code-highlight] Fix aria-label not being set on the copy button (#​8130)
  • [@mantine/code-highlight] Fix incorrect overscroll behavior

New Contributors

Full Changelog: mantinedev/mantine@8.2.3...8.2.4

v8.2.3

Compare Source

What's Changed

  • [@mantine/dates] DatePickerInput: Fix incorrect handling of multiline values (#​8116)
  • [@mantine/code-highlight] Fix gradient of expand button not being visible on mobile Safari
  • [@mantine/core] Combobox: Fix Combobox.Group not having aria-labelledby attribute
  • [@mantine/core] Switch: Fix tap highlight color not being disabled on touch devices
  • [@mantine/core] Remove transition with loader in ActionIcon and Button components if loading prop is not set to improve performance
  • [@mantine/core] Combobox: Fix unexpected closed dropdown position calculation reducing performance
  • [@mantine/charts] Fix tooltip not being aligned for some fonts
  • [@mantine/dates] DatePickerInput: Fix incorrect Styles API selectors
  • [@mantine/core] Table: Fix missing border when rowspan is set (#​8137)
  • [@mantine/hooks] use-move: Fix error dsiplayed in console for touch devices (#​8065)
  • [@mantine/dates] Fix incorrect props assigned to CalendarAriaLables props

New Contributors

Full Changelog: mantinedev/mantine@8.2.2...8.2.3

v8.2.2

Compare Source

What's Changed

  • [@mantine/core] Menu: Fix incorrect overflow handling of submenu (#​8123)
  • [@mantine/hooks] use-merged-ref: Fix incorrect handling of React 19 cleanup ref callback (#​8118)
  • [@mantine/dates] TimePicker: Fix incorrect leading zero handling in 12h format (#​8120)
  • [@mantine/dates] TimePicker: Fix min/max values not being enforced for 12h time format (#​8107)
  • [@mantine/core] HoverCard: Improve outside clicks handling (#​8097)
  • [@mantine/dates] Add month and year switching with keyboard to Calendar-based components (#​7959)
  • [@mantine/core] ScrollArea: Add onOverflowChange prop support to ScrollArea.Autosize (#​7972)
  • [@mantine/core] MultiSelect: Add clearSearchOnChange prop support (#​8068)
  • [@mantine/core] Select: Fix caret being visible in Firefox when the component is read only (#​8063)

New Contributors

Full Changelog: mantinedev/mantine@8.2.0...8.2.2

v8.2.1

Compare Source

v8.2.0: 🔥

Compare Source

View changelog with demos on mantine.dev website

Styles API attributes

You now can pass attributes to inner elements of all components that support Styles API with attributes prop.
For example, it can be used to add data attributes for testing purposes:

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

function Demo() {
  return (
    <Button
      attributes={{
        root: { 'data-test-id': 'root' },
        label: { 'data-test-id': 'label' },
        inner: { 'data-test-id': 'inner' },
      }}
    >
      Button
    </Button>
  );
}

Container grid strategy

Container now supports strategy="grid" prop which enables more
features.

Differences from the default strategy="block":

  • Uses display: grid instead of display: block
  • Does not include default inline padding
  • Does not set max-width on the root element (uses grid template columns instead)

Features supported by strategy="grid":

  • Everything that is supported by strategy="block"
  • Children with data-breakout attribute take the entire width of the container's parent element
  • Children with data-container inside data-breakout have the same width as the main grid column

Example of using breakout feature:

import { Box, Container } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Container strategy="grid" size={500}>
      <Box bg="var(--mantine-color-indigo-light)" h={50}>
        Main content
      </Box>

      <Box data-breakout bg="var(--mantine-color-indigo-light)" mt="xs">
        <div>Breakout</div>

        <Box data-container bg="indigo" c="white" h={50}>
          <div>Container inside breakout</div>
        </Box>
      </Box>
    </Container>
  );
}

Tooltip target

New Tooltip target prop is an alternative to children. It accepts a string (selector),
an HTML element or a ref object with HTML element. Use target prop when you do
not render tooltip target as JSX element.

Example of using target prop with a string selector:

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

function Demo() {
  return (
    <>
      <Tooltip target="#hover-me" label="Tooltip over button" />
      <Button id="hover-me">Hover me to see tooltip</Button>
    </>
  );
}

HoverCard.Group

HoverCard now supports delay synchronization between multiple instances using HoverCard.Group component:

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

function Demo() {
  return (
    <HoverCard.Group openDelay={500} closeDelay={100}>
      <Group justify="center">
        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>First</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">First hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Second</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Second hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>

        <HoverCard shadow="md">
          <HoverCard.Target>
            <Button>Third</Button>
          </HoverCard.Target>
          <HoverCard.Dropdown>
            <Text size="sm">Third hover card content</Text>
          </HoverCard.Dropdown>
        </HoverCard>
      </Group>
    </HoverCard.Group>
  );
}

use-selection hook

New use-selection hook:

import { Checkbox, Table } from '@&#8203;mantine/core';
import { useSelection } from '@&#8203;mantine/hooks';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const positions = useMemo(() => elements.map((element) => element.position), [elements]);

  const [selection, handlers] = useSelection({
    data: positions,
    defaultSelection: [39, 56],
  });

  const rows = elements.map((element) => {
    const isSelected = selection.includes(element.position);
    return (
      <Table.Tr key={element.name} bg={isSelected ? 'var(--mantine-color-blue-light)' : undefined}>
        <Table.Td>
          <Checkbox
            aria-label="Select row"
            checked={isSelected}
            onChange={(event) => {
              if (event.target.checked) {
                handlers.select(element.position);
              } else {
                handlers.deselect(element.position);
              }
            }}
          />
        </Table.Td>
        <Table.Td>{element.position}</Table.Td>
        <Table.Td>{element.name}</Table.Td>
        <Table.Td>{element.symbol}</Table.Td>
        <Table.Td>{element.mass}</Table.Td>
      </Table.Tr>
    );
  });

  return (
    <Table>
      <Table.Thead>
        <Table.Tr>
          <Table.Th>
            <Checkbox
              aria-label="Select deselect all rows"
              indeterminate={handlers.isSomeSelected()}
              checked={handlers.isAllSelected()}
              onChange={() => {
                if (handlers.isAllSelected()) {
                  handlers.resetSelection();
                } else {
                  handlers.setSelection(elements.map((el) => el.position));
                }
              }}
            />
          </Table.Th>
          <Table.Th>Element position</Table.Th>
          <Table.Th>Element name</Table.Th>
          <Table.Th>Symbol</Table.Th>
          <Table.Th>Atomic mass</Table.Th>
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}

autoSelectOnBlur prop

Select and Autocomplete components now support autoSelectOnBlur prop.
Use it to automatically select the highlighted option when the input loses focus.
To see this feature in action: select an option with up/down arrows, then click outside the input:

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

function Demo() {
  return (
    <Select
      label="Your favorite library"
      placeholder="Pick value"
      autoSelectOnBlur
      searchable
      data={['React', 'Angular', 'Vue', 'Svelte']}
    />
  );
}

Source edit mode in RichTextEditor

RichTextEditor now supports source edit mode:

import { useEditor } from '@&#8203;tiptap/react';
import StarterKit from '@&#8203;tiptap/starter-kit';
import { RichTextEditor } from '@&#8203;mantine/tiptap';
import { useState } from 'react';

function Demo() {
  const [isSourceCodeModeActive, onSourceCodeTextSwitch] = useState(false)

  const editor = useEditor({
    extensions: [StarterKit],
    content: '<p>Source code control example</p><p>New line with <strong>bold text</strong></p><p>New line with <em>italic</em> <em>text</em></p>',
  });

  return (
    <RichTextEditor editor={editor} onSourceCodeTextSwitch={onSourceCodeTextSwitch}>
      <RichTextEditor.Toolbar>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.SourceCode icon={BoldIcon} />
        </RichTextEditor.ControlsGroup>
        {!isSourceCodeModeActive && (
          <RichTextEditor.ControlsGroup>
            <RichTextEditor.Blockquote />
            <RichTextEditor.Bold />
            <RichTextEditor.Italic />
            <RichTextEditor.Underline />
            <RichTextEditor.Strikethrough />
            <RichTextEditor.ClearFormatting />
            <RichTextEditor.Highlight />
          </RichTextEditor.ControlsGroup>
        )}
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

Recharts 3 support

You can now use the latest Recharts 3 version with Mantine charts.
@mantine/charts package was validated to work with both Recharts 2 and Recharts 3 versions.
Note that, there might still be some minor issues with Recharts 3, you are welcome to report issues on GitHub.

Other changes

  • Accordion default chevronSize prop value was changed to auto to allow using dynamic icon sizes
  • Accordion now supports chevronIconSize prop to configure size of the default chevron icon
  • AffixPosition type is now exported from @mantine/core package
  • errorProps, labelProps and descriptionProps props of all inputs now have stricter types and better IDE autocomplete
  • TypographyStylesProvider was renamed to just Typography to simplify usage. TypographyStylesProvider name is still available but marked as deprecated – it will be removed in 9.0.0 release.
  • Slider and RangeSlider components now have separate documentation pages

v8.1.3

Compare Source

What's Changed

  • [@mantine/core] Container: Fix base responsive props value not being handled correctly (#​8054)
  • [@mantine/form] Fix type errors with read only array types (#​7950)
  • [@mantine/core] Fix incorrect disabled border color of Checkbox, Radio and Slider (#​8053)
  • [@mantine/core] Combobox: Fix aria-expanded attribute not being assigned correctly to combobox target
  • [@mantine/core] Menu: Fix SubMenu having visual arrow offset when default props are set for Popover on theme (#​8027)
  • [@mantine/form] Fix form.resetField not updating DOM with mode: 'uncontrolled' (#​8050)
  • [@mantine/form] Add option to trigger watch callbacks when nested field value changes (#​8026)
  • [@mantine/hooks] use-move: Fix React 18 compatibility (#​8018)
  • [@mantine/dates] DateTimePicker: Add defaultDate prop support (#​8023)
  • [@mantine/dates] DatePickerInput: Fix size="xs being slightly different from other inputs
  • [@mantine/dates] TimePicker: Fix dropdown being visible even when withDropdown={false} is set
  • [@mantine/core] Popover: Fix onClick not firing on the child of Popover.Target
  • [@mantine/spotlight] Fix incorrect query prop with empty string handling
  • [@mantine/core] Text: Fix autocomplete not working for size prop
  • [@mantine/hooks] use-debounced-callback: Fix incorrect leading behavior (#​8021)
  • [@mantine/core] Collapse: Add keepMounted prop support (#​8013)
  • [@mantine/date] TimePicker: Fix disabled and readOnly props not working (#​8011)

New Contributors

Full Changelog: mantinedev/mantine@8.1.2...8.1.3

v8.1.2

Compare Source

What's Changed

  • [@mantine/dates] DatePickerInput: Fix incorrect presets handling
  • [@mantine/dates] DatePickerInput: Fix onDropdownClose not being called in some cases
  • [@mantine/hooks] use-scroll-spy: Add scrollHost option support (#​8003)
  • [@mantine/core] PinInput: Fix incorrect default size (#​7990)
  • [@mantine/core] Fix bdrs prop not working (#​7996)
  • [@mantine/core] Fix env prop not being available on HeadlessMantineProvider (#​7992)
  • [@mantine/core] Fix placeholder overflowing MultiSelect and TagsInput components
  • [@mantine/core] Popover: fix autoUpdate triggering extra rerenders with keepMounted (#​7983)

New Contributors

Full Changelog: mantinedev/mantine@8.1.1...8.1.2

v8.1.1

Compare Source

What's Changed

  • [@mantine/hooks] use-set: Fix union method not working correctly (#​7981)
  • [@mantine/core] Popover: Fix incorrect position handling (#​7955, #​7953)
  • [@mantine/dates] TimePicker: Fix incorrect empty string handling (#​7927)
  • [@mantine/dates] DatePickerInput: Fix incorrect onChange type (#​7943)
  • [@mantine/dates] TimePicker: Fix incorrect handling of min/max values in some cases (#​7904)
  • [@mantine/hooks] use-hotkeys: Fix Escape key not being handled correctly in some browsers (#​7928)
  • [@mantine/core] Tree: Fix detached DOM nodes memory leak (#​7940)
  • [@mantine/hooks] use-debounced-callback: Add cancel method support (#​7965)
  • [@mantine/dates] DatePicker: Fix incorrect value type for type="range" (#&#8203;7937)
  • [@mantine/dates] DatePicker: Fix className and style props not working when presets prop is set (#​7960)

New Contributors

Full Changelog: mantinedev/mantine@8.1.0...8.1.1

v8.1.0

Compare Source

View changelog with demos on mantine.dev website

DatePicker presets

DatePicker, DatePickerInput and DateTimePicker now support presets prop that allows you to add custom date presets. Presets are displayed next to the calendar:

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

function Demo() {
  const today = dayjs();

  return (
    <DatePicker
      type="range"
      presets={[
        {
          value: [today.subtract(2, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last two days',
        },
        {
          value: [today.subtract(7, 'day').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'Last 7 days',
        },
        {
          value: [today.startOf('month').format('YYYY-MM-DD'), today.format('YYYY-MM-DD')],
          label: 'This month',
        },
        {
          value: [
            today.subtract(1, 'month').startOf('month').format('YYYY-MM-DD'),
            today.subtract(1, 'month').endOf('month').format('YYYY-MM-DD'),
          ],
          label: 'Last month',
        },
        {
          value: [
            today.subtract(1, 'year').startOf('year').format('YYYY-MM-DD'),
            today.subtract(1, 'year').endOf('year').format('YYYY-MM-DD'),
          ],
          label: 'Last year',
        },
      ]}
    />
  );
}

Calendar headerControlsOrder

Calendar and other components based on it now support headerControlsOrder prop.
You can use headerControlsOrder prop to change the order of header controls. The prop accepts an array of
'next' | 'previous' | 'level. Note that each control can be used only once in the array.

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

function Demo() {
  return (
    <DatePicker
      defaultDate="2022-02-01"
      headerControlsOrder={['level', 'previous', 'next']}
      styles={{
        calendarHeaderLevel: {
          justifyContent: 'flex-start',
          paddingInlineStart: 8,
        },
      }}
    />
  );
}

Popover middlewares improvements

Popover component now handles shift and flip Floating UI
differently. Starting from 8.1.0 version, the popover dropdown position is not
changed when the popover is opened. shift and flip middlewares are used only
once to calculate the initial position of the dropdown.

This change fixes incorrect flipping/shifting behavior when there is dynamic content
in the dropdown. For example, searchable Select and DatePickerInput withou

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.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

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

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

@renovate renovate bot added the renovate label Oct 19, 2024
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from c449a97 to 495728a Compare October 23, 2024 18:38
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from 96dd753 to 71a02a3 Compare November 12, 2024 16:18
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 71a02a3 to b67ec42 Compare November 16, 2024 16:08
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from 6a7c8a3 to 49d0022 Compare November 28, 2024 12:37
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from 42709d3 to e58c6d8 Compare December 12, 2024 12:58
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from e58c6d8 to a5d6283 Compare December 23, 2024 11:49
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from a5d6283 to fa7011c Compare January 7, 2025 10:28
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from b9193d2 to 979e267 Compare January 19, 2025 10:37
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 979e267 to 63ca4ca Compare January 26, 2025 14:09
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 63ca4ca to c4d6282 Compare February 8, 2025 14:07
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from c4d6282 to 1d82ee2 Compare February 17, 2025 17:09
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 1d82ee2 to ec9b2a9 Compare March 1, 2025 12:34
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from ec9b2a9 to ecb876b Compare March 14, 2025 09:41
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from ecb876b to 6d07b43 Compare March 27, 2025 13:09
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 6d07b43 to 02f996f Compare April 8, 2025 15:02
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 02f996f to 9b9b784 Compare April 24, 2025 12:39
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from 9f7c3a6 to e56b43f Compare May 5, 2025 13:23
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from e56b43f to 7bdadd0 Compare May 14, 2025 13:44
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 7bdadd0 to 7a59343 Compare May 27, 2025 16:12
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from 579e929 to 4a048d6 Compare June 16, 2025 18:39
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 4a048d6 to 7ebfd0b Compare June 29, 2025 03:46
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 7ebfd0b to f196d94 Compare July 7, 2025 17:46
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from f196d94 to 19f1e59 Compare July 21, 2025 20:56
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 3 times, most recently from 973b29a to b586f98 Compare August 7, 2025 10:04
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from 1e4421a to cd4b0bd Compare August 22, 2025 17:10
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from cd4b0bd to 9f71384 Compare August 31, 2025 13:12
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from d472023 to 3363b52 Compare September 10, 2025 10:48
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 3363b52 to 6078c55 Compare September 23, 2025 22:15
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from 6078c55 to c729fee Compare October 2, 2025 22:06
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch 2 times, most recently from 29cc1ae to e70b9bb Compare October 14, 2025 19:11
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from e70b9bb to c8a949c Compare October 29, 2025 06:04
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from c8a949c to b6ac920 Compare November 20, 2025 00:14
@renovate renovate bot force-pushed the renovate/major-mantine-monorepo branch from b6ac920 to ce21811 Compare November 23, 2025 11:45
github-actions[bot]
github-actions bot reviewed Nov 23, 2025
View reviewed changes
package.json
Copy link

@github-actions github-actions bot Nov 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚫 [eslint] <package-json/order-properties> reported by reviewdog 🐶
Package top-level properties are not ordered in the NPM standard way:

{
"name": "annict2spotify",
"version": "0.1.0",
�[32m+ "license": "MIT",�[39m
"repository": "https://github.com/SlashNephy/annict2spotify",
�[31m- "license": "MIT",�[39m
"scripts": {
�[31m- "build": "next build",�[39m
�[32m+ "start": "next start",�[39m
"dev": "concurrently -n dev: 'yarn:dev:'",
�[32m+ "dev:next": "next dev",�[39m
"dev:migrate": "prisma migrate dev",
�[31m- "dev:next": "next dev",�[39m
�[32m+ "build": "next build",�[39m
�[32m+ "lint": "concurrently -n lint: 'yarn:lint:'",�[39m
�[32m+ "lint:eslint": "next lint",�[39m
�[32m+ "lint:prettier": "prettier --check .",�[39m
"format": "concurrently -n format: 'yarn:format:'",
"format:eslint": "yarn lint:eslint --fix",
"format:prettier": "yarn lint:prettier --write",
"format:prisma": "prisma format",
�[32m+ "introspect": "curl -o graphql/schema.graphql https://raw.githubusercontent.com/kiraka/annict-web/main/app/graphql/beta/schema.graphql",�[39m
"generate": "concurrently -n generate: 'yarn:generate:'",
"generate:graphql": "graphql-codegen --config codegen.yml",
�[31m- "generate:prisma": "prisma generate",�[39m
�[31m- "introspect": "curl -o graphql/schema.graphql https://raw.githubusercontent.com/kiraka/annict-web/main/app/graphql/beta/schema.graphql",�[39m
�[31m- "lint": "concurrently -n lint: 'yarn:lint:*'",�[39m
�[31m- "lint:eslint": "next lint",�[39m
�[31m- "lint:prettier": "prettier --check .",�[39m
�[31m- "start": "next start"�[39m
�[32m+ "generate:prisma": "prisma generate"�[39m
},
�[31m- "eslintConfig": {�[39m
�[31m- "extends": [�[39m
�[31m- "@slashnephy/eslint-config"�[39m
�[31m- ]�[39m
�[31m- },�[39m
"dependencies": {
"@mantine/core": "8.3.9",
"@mantine/hooks": "8.3.9",
"@mantine/next": "6.0.22",
�[35m@@ -66,6 +61,11 @@�[39m
"prettier": "2.8.8",
"prisma": "4.7.1",
"typescript": "5.0.4"
},
�[31m- "packageManager": "[email protected]"�[39m
�[32m+ "packageManager": "[email protected]",�[39m
�[32m+ "eslintConfig": {�[39m
�[32m+ "extends": [�[39m
�[32m+ "@slashnephy/eslint-config"�[39m
�[32m+ ]�[39m
�[32m+ }�[39m
}
\ No newline at end of file

annict2spotify/package.json

Lines 1 to 71 in ce21811

{
"name": "annict2spotify",
"version": "0.1.0",
"license": "MIT",
"repository": "https://github.com/SlashNephy/annict2spotify",
"scripts": {
"start": "next start",
"dev": "concurrently -n dev: 'yarn:dev:*'",
"dev:next": "next dev",
"dev:migrate": "prisma migrate dev",
"build": "next build",
"lint": "concurrently -n lint: 'yarn:lint:*'",
"lint:eslint": "next lint",
"lint:prettier": "prettier --check .",
"format": "concurrently -n format: 'yarn:format:*'",
"format:eslint": "yarn lint:eslint --fix",
"format:prettier": "yarn lint:prettier --write",
"format:prisma": "prisma format",
"introspect": "curl -o graphql/schema.graphql https://raw.githubusercontent.com/kiraka/annict-web/main/app/graphql/beta/schema.graphql",
"generate": "concurrently -n generate: 'yarn:generate:*'",
"generate:graphql": "graphql-codegen --config codegen.yml",
"generate:prisma": "prisma generate"
},
"dependencies": {
"@mantine/core": "8.3.9",
"@mantine/hooks": "8.3.9",
"@mantine/next": "6.0.22",
"@mantine/notifications": "8.3.9",
"@prisma/client": "4.6.1",
"cancelable-promise": "4.3.1",
"date-fns": "2.29.3",
"graphql-request": "4.3.0",
"jsdom": "20.0.3",
"levenshtein-edit-distance": "3.0.1",
"next": "12.3.4",
"next-auth": "4.24.5",
"node-fetch": "3.3.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-query": "3.39.2",
"react-render-if-visible": "2.1.1",
"spotify-web-api-node": "5.0.2",
"tabler-icons-react": "1.55.0"
},
"devDependencies": {
"@graphql-codegen/cli": "3.3.1",
"@graphql-codegen/import-types-preset": "2.2.6",
"@graphql-codegen/typescript": "3.0.4",
"@graphql-codegen/typescript-graphql-request": "4.5.9",
"@graphql-codegen/typescript-operations": "3.0.4",
"@slashnephy/eslint-config": "2.1.3",
"@slashnephy/prettier-config": "1.0.73",
"@types/jsdom": "20.0.1",
"@types/node": "18.16.7",
"@types/react": "18.2.6",
"@types/react-dom": "18.2.4",
"@types/spotify-web-api-node": "5.0.7",
"concurrently": "8.0.1",
"eslint": "8.40.0",
"graphql": "16.8.1",
"prettier": "2.8.8",
"prisma": "4.7.1",
"typescript": "5.0.4"
},
"packageManager": "[email protected]",
"eslintConfig": {
"extends": [
"@slashnephy/eslint-config"
]
}
}

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

1 more reviewer

@github-actions github-actions[bot] github-actions[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

renovate

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

0 participants