fix(deps): update mantine monorepo to v7.16.1 #203

renovate · 2025-01-13T01:50:02Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@mantine/core (source)	`7.15.2` -> `7.16.1`
@mantine/hooks (source)	`7.15.2` -> `7.16.1`
@mantine/notifications (source)	`7.15.2` -> `7.16.1`

Release Notes

mantinedev/mantine (@mantine/core)

`v7.16.1`

Compare Source

What's Changed

[@mantine/core] Menu: Add withInitialFocusPlaceholder prop support
[@mantine/core] Slider: Fix onChangeEnd being called when disabled prop is set
[@mantine/core] Add option to customize chevron color with chevronColor prop in Select and MultiSelect components
[@mantine/core] Fix incorrect styles of nested tables (#7354)
[@mantine/core]: NumberInput: Fix onChange being called in onBlur if the value has not been changed (#7383)
[@mantine/core] Menu: Add data-disabled prop handling to Menu.Item component (#7377)
[@mantine/form] Fix incorrect values handling in form.resetDirty (#7373)
[@mantine/chart] AreaChart: Fix gridColor and textColor props being passed as attributes to the DOM node (#7378)
[@mantine/hooks] use-in-viewport: Fix tracking being stopped when used with a dnd library (#7359)
[@mantine/core] MantineProvider: Fix jest tests not running in case there is incorrect window.matchMedia polyfill implementation (#7360)
[@mantine/core] Modal: Fix Escape key not working in old Safari versions (#7358)

New Contributors

@kidonng made their first contribution in https://github.com/mantinedev/mantine/pull/7364
@Benjaminsson made their first contribution in https://github.com/mantinedev/mantine/pull/7360
@cameronrdecker made their first contribution in https://github.com/mantinedev/mantine/pull/7380
@tomrehnstrom made their first contribution in https://github.com/mantinedev/mantine/pull/7373

Full Changelog: mantinedev/mantine@7.16.0...7.16.1

`v7.16.0`: 🌶️

Compare Source

View changelog with demos on mantine.dev website

use-scroll-spy hook

New use-scroll-spy hook tracks scroll position and returns index of the
element that is currently in the viewport. It is useful for creating
table of contents components (like in mantine.dev sidebar on the right side)
and similar features.

import { Text, UnstyledButton } from '@&#8203;mantine/core';
import { useScrollSpy } from '@&#8203;mantine/hooks';

function Demo() {
  const spy = useScrollSpy({
    selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
  });

  const headings = spy.data.map((heading, index) => (
    <li
      key={heading.id}
      style={{
        listStylePosition: 'inside',
        paddingInlineStart: heading.depth * 20,
        background: index === spy.active ? 'var(--mantine-color-blue-light)' : undefined,
      }}
    >
      <UnstyledButton onClick={() => heading.getNode().scrollIntoView()}>
        {heading.value}
      </UnstyledButton>
    </li>
  ));

  return (
    <div>
      <Text>Scroll to heading:</Text>
      <ul style={{ margin: 0, padding: 0 }}>{headings}</ul>
    </div>
  );
}

TableOfContents component

New TableOfContents component is built on top of use-scroll-spy hook
and can be used to create table of contents components like the one on the right side of mantine.dev
documentation sidebar:

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

function Demo() {
  return (
    <TableOfContents
      variant="filled"
      color="blue"
      size="sm"
      radius="sm"
      scrollSpyOptions={{
        selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
      }}
      getControlProps={({ data }) => ({
        onClick: () => data.getNode().scrollIntoView(),
        children: data.value,
      })}
    />
  );
}

Input.ClearButton component

New Input.ClearButton component can be used to add clear button to custom inputs
based on Input component. size of the clear button is automatically
inherited from the input:

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

function Demo() {
  const [value, setValue] = useState('clearable');

  return (
    <Input
      placeholder="Clearable input"
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
      rightSection={value !== '' ? <Input.ClearButton onClick={() => setValue('')} /> : undefined}
      rightSectionPointerEvents="auto"
      size="sm"
    />
  );
}

Popover with overlay

Popover and other components based on it now support withOverlay prop:

import { Anchor, Avatar, Group, Popover, Stack, Text } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Popover
      width={320}
      shadow="md"
      withArrow
      withOverlay
      overlayProps={{ zIndex: 10000, blur: '8px' }}
      zIndex={10001}
    >
      <Popover.Target>
        <UnstyledButton style={{ zIndex: 10001, position: 'relative' }}>
          <Avatar src="https://avatars.githubusercontent.com/u/79146003?s=200&v=4" radius="xl" />
        </UnstyledButton>
      </Popover.Target>
      <Popover.Dropdown>
        <Group>
          <Avatar src="https://avatars.githubusercontent.com/u/79146003?s=200&v=4" radius="xl" />
          <Stack gap={5}>
            <Text size="sm" fw={700} style={{ lineHeight: 1 }}>
              Mantine
            </Text>
            <Anchor href="https://x.com/mantinedev" c="dimmed" size="xs" style={{ lineHeight: 1 }}>
              @&#8203;mantinedev
            </Anchor>
          </Stack>
        </Group>

        <Text size="sm" mt="md">
          Customizable React components and hooks library with focus on usability, accessibility and
          developer experience
        </Text>

        <Group mt="md" gap="xl">
          <Text size="sm">
            <b>0</b> Following
          </Text>
          <Text size="sm">
            <b>1,174</b> Followers
          </Text>
        </Group>
      </Popover.Dropdown>
    </Popover>
  );
}

Container queries in Carousel

You can now use container queries
in Carousel component. With container queries, all responsive values
are adjusted based on the container width, not the viewport width.

Example of using container queries. To see how the grid changes, resize the root element
of the demo with the resize handle located at the bottom right corner of the demo:

import { Carousel } from '@&#8203;mantine/carousel';

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only,
    // It is not required in real projects
    <div
      style={{
        resize: 'horizontal',
        overflow: 'hidden',
        maxWidth: '100%',
        minWidth: 250,
        padding: 10,
      }}
    >
      <Carousel
        withIndicators
        height={200}
        type="container"
        slideSize={{ base: '100%', '300px': '50%', '500px': '33.333333%' }}
        slideGap={{ base: 0, '300px': 'md', '500px': 'lg' }}
        loop
        align="start"
      >
        <Carousel.Slide>1</Carousel.Slide>
        <Carousel.Slide>2</Carousel.Slide>
        <Carousel.Slide>3</Carousel.Slide>
        {/* ...other slides */}
      </Carousel>
    </div>
  );
}

RangeSlider restrictToMarks

RangeSlider component now supports restrictToMarks prop:

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

function Demo() {
  return (
    <Stack>
      <Slider
        restrictToMarks
        defaultValue={25}
        marks={Array.from({ length: 5 }).map((_, index) => ({ value: index * 25 }))}
      />

      <RangeSlider
        restrictToMarks
        defaultValue={[5, 15]}
        marks={[
          { value: 5 },
          { value: 15 },
          { value: 25 },
          { value: 35 },
          { value: 70 },
          { value: 80 },
          { value: 90 },
        ]}
      />
    </Stack>
  );
}

Pagination withPages prop

Pagination component now supports withPages prop which allows hiding pages
controls and displaying only previous and next buttons:

import { useState } from 'react';
import { Group, Pagination, Text } from '@&#8203;mantine/core';

const limit = 10;
const total = 145;
const totalPages = Math.ceil(total / limit);

function Demo() {
  const [page, setPage] = useState(1);
  const message = `Showing ${limit * (page - 1) + 1} – ${Math.min(total, limit * page)} of ${total}`;

  return (
    <Group justify="flex-end">
      <Text size="sm">{message}</Text>
      <Pagination total={totalPages} value={page} onChange={setPage} />
    </Group>
  );
}

useForm touchTrigger option

use-form hook now supports touchTrigger option that allows customizing events that change touched state.
It accepts two options:

change (default) – field will be considered touched when its value changes or it has been focused
focus – field will be considered touched only when it has been focused

Example of using focus trigger:

import { useForm } from '@&#8203;mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { a: 1 },
  touchTrigger: 'focus',
});

form.isTouched('a'); // -> false
form.setFieldValue('a', 2);
form.isTouched('a'); // -> false

// onFocus is called automatically when the user focuses the field
form.getInputProps('a').onFocus();
form.isTouched('a'); // -> true

Help Center updates

Other changes

Autocomplete now supports clearable prop
where-* mixins documentation has been added
use-local-storage hook now supports sync option which allows disabling synchronization between browser tabs

`v7.15.3`

Compare Source

What's Changed

[@mantine/charts] BarChart: Fix textColor prop being passed down as attribute to the DOM node
[@mantine/core] TypographyStylesProvider: Fix incorrect top and bottom margins of first and last elements (#7334)
[@mantine/core] Transition: Fix some transitions being incompatible with headless mode (#7306)
[@mantine/dates] DateTimePicker: Set milliseconds to 0 on the result date object (#7328)
[@mantine/dates] Fix hasNextLevel prop type leak to DateTimePicker component (#7319)
[@mantine/core] Avatar: Change initials function to use the full name to generate color (#7322)
[@mantine/hooks] use-merged-ref: Add support for ref cleanup function in React 19 (#7304)
[@mantine/hooks] use-debounced-callback: Add flush method to returned callback (#7272)
[@mantine/dates] Improve compatibility with dayjs plugins in all components (#7302)
[@mantine/core] Update peer dependencies to support React 19 (#7321)

New Contributors

@baravak made their first contribution in https://github.com/mantinedev/mantine/pull/7302
@scamden made their first contribution in https://github.com/mantinedev/mantine/pull/7272
@YukiKoNeko made their first contribution in https://github.com/mantinedev/mantine/pull/7322
@yuki0410-dev made their first contribution in https://github.com/mantinedev/mantine/pull/7319
@zoubingwu made their first contribution in https://github.com/mantinedev/mantine/pull/7323
@clarknova made their first contribution in https://github.com/mantinedev/mantine/pull/7328

Full Changelog: mantinedev/mantine@7.15.2...7.15.3

Configuration

📅 Schedule: Branch creation - "* 1 * * 1" (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 these updates again.

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

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

renovate bot added the renovate label Jan 13, 2025

renovate bot force-pushed the renovate/mantine-monorepo branch from cb08f4b to cd7e1a4 Compare January 19, 2025 13:40

renovate bot changed the title ~~fix(deps): update mantine monorepo to v7.15.3~~ fix(deps): update mantine monorepo to v7.16.0 Jan 19, 2025

fix(deps): update mantine monorepo to v7.16.1

0ab6d0b

renovate bot force-pushed the renovate/mantine-monorepo branch from cd7e1a4 to 0ab6d0b Compare January 24, 2025 13:28

renovate bot changed the title ~~fix(deps): update mantine monorepo to v7.16.0~~ fix(deps): update mantine monorepo to v7.16.1 Jan 24, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(deps): update mantine monorepo to v7.16.1 #203

fix(deps): update mantine monorepo to v7.16.1 #203

renovate bot commented Jan 13, 2025 •

edited

Loading

fix(deps): update mantine monorepo to v7.16.1 #203

Are you sure you want to change the base?

fix(deps): update mantine monorepo to v7.16.1 #203

Conversation

renovate bot commented Jan 13, 2025 • edited Loading

Release Notes

v7.16.1

What's Changed

New Contributors

v7.16.0: 🌶️

use-scroll-spy hook

TableOfContents component

Input.ClearButton component

Popover with overlay

Container queries in Carousel

RangeSlider restrictToMarks

Pagination withPages prop

useForm touchTrigger option

Help Center updates

Other changes

v7.15.3

What's Changed

New Contributors

Configuration

renovate bot commented Jan 13, 2025 •

edited

Loading

`v7.16.1`

`v7.16.0`: 🌶️

`v7.15.3`