⬆️(dependencies) update js dependencies by renovate[bot] · Pull Request #2229 · suitenumerique/docs

renovate · 2026-04-20T05:55:24Z

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package	Change	Age	Confidence
@ai-sdk/openai (source)	`3.0.47` → `3.0.53`
@blocknote/code-block (source)	`0.47.3` → `0.48.1`
@blocknote/core (source)	`0.47.3` → `0.48.1`
@blocknote/mantine (source)	`0.47.3` → `0.48.1`
@blocknote/react (source)	`0.47.3` → `0.48.1`
@blocknote/server-util (source)	`0.47.3` → `0.48.1`
@blocknote/xl-ai (source)	`0.47.3` → `0.48.1`
@blocknote/xl-docx-exporter (source)	`0.47.3` → `0.48.1`
@blocknote/xl-multi-column (source)	`0.47.3` → `0.48.1`
@blocknote/xl-odt-exporter (source)	`0.47.3` → `0.48.1`
@blocknote/xl-pdf-exporter (source)	`0.47.3` → `0.48.1`
@fontsource-variable/material-symbols-outlined (source)	`5.2.38` → `5.2.42`
@gouvfr-lasuite/cunningham-react	`4.2.0` → `4.3.0`
@gouvfr-lasuite/ui-kit	`0.19.10` → `0.20.1`
@mantine/core (source)	`8.3.18` → `9.0.2`
@mantine/hooks (source)	`8.3.18` → `9.0.2`
@next/eslint-plugin-next (source)	`16.2.1` → `16.2.4`
@playwright/test (source)	`1.58.2` → `1.59.1`
@react-aria/live-announcer	`3.4.4` → `3.5.0`
@sentry/nextjs (source)	`10.45.0` → `10.49.0`
@sentry/node (source)	`10.45.0` → `10.49.0`
@sentry/profiling-node (source)	`10.45.0` → `10.49.0`
@tanstack/eslint-plugin-query (source)	`5.95.0` → `5.99.2`
@tanstack/react-query (source)	`5.95.0` → `5.99.2`
@tanstack/react-query-devtools (source)	`5.95.0` → `5.99.2`
@tiptap/extensions (source)	`3.20.4` → `3.22.4`
@types/node (source)	`24.12.0` → `24.12.2`
@typescript-eslint/eslint-plugin (source)	`8.57.1` → `8.58.2`
@typescript-eslint/parser (source)	`8.57.1` → `8.58.2`
@typescript-eslint/utils (source)	`8.57.1` → `8.58.2`
@vitest/eslint-plugin	`1.6.13` → `1.6.16`
ai (source)	`6.0.134` → `6.0.168`
axios (source)	`1.15.0` → `1.15.1`
crisp-sdk-web	`1.0.27` → `1.1.0`
dotenv	`17.3.1` → `17.4.2`
eslint (source)	`10.1.0` → `10.2.1`
eslint-config-next (source)	`16.2.1` → `16.2.4`
eslint-plugin-jest	`29.15.0` → `29.15.2`
eslint-plugin-playwright	`2.10.1` → `2.10.2`
eslint-plugin-react-hooks (source)	`7.0.1` → `7.1.1`
eslint-plugin-testing-library	`7.16.1` → `7.16.2`
i18next (source)	`25.10.4` → `26.0.6`
jsdom	`29.0.1` → `29.0.2`
minimatch	`10.2.4` → `10.2.5`
mjml (source)	`4.18.0` → `5.0.1`
next (source)	`16.2.3` → `16.2.4`
posthog-js (source)	`1.363.1` → `1.369.3`
prettier (source)	`3.8.1` → `3.8.3`
prosemirror-view	`1.41.7` → `1.41.8`
react (source)	`19.2.4` → `19.2.5`
react-aria-components	`1.16.0` → `1.17.0`
react-dom (source)	`19.2.4` → `19.2.5`
react-i18next	`16.6.1` → `17.0.4`
styled-components (source)	`6.3.12` → `6.4.0`
ts-jest (source)	`29.4.6` → `29.4.9`
typescript (source)	`5.9.3` → `6.0.3`
use-debounce	`10.1.0` → `10.1.1`
vitest (source)	`4.1.0` → `4.1.4`
vitest-mock-extended	`3.1.0` → `4.0.0`
webpack	`5.105.4` → `5.106.2`

Release Notes

vercel/ai (@ai-sdk/openai)

`v3.0.53`

Compare Source

Patch Changes

89caf28: fix(openai-compat): decode base64 string data

`v3.0.52`

Compare Source

Patch Changes

d42076d: Add AI Gateway hint to provider READMEs

`v3.0.51`

Compare Source

Patch Changes

64a8fae: chore: remove obsolete model IDs for Anthropic, Google, OpenAI, xAI

`v3.0.50`

Compare Source

Patch Changes

Updated dependencies [0469aed]
- @ai-sdk/provider-utils@4.0.22

`v3.0.49`

Patch Changes

bc01093: fix(openai): support file-url parts in tool output content

`v3.0.48`

Patch Changes

35c46d1: feat(provider/google): support multimodal content parts in embedding provider options

TypeCellOS/BlockNote (@blocknote/code-block)

`v0.48.1`

Compare Source

🩹 Fixes

make CustomChange compatible with prosemirror-changeset 2.4.1 (#2647)
deps: upgrade nx to 22.6.5 to resolve axios security vulnerability (CVE-2025-62718) (c1ef3018a)
deps: upgrade nx to 22.6.5 to resolve axios security vulnerability (#2653)
docx-exporter: omit w:lang when no locale provided instead of defaulting to en-US (#2651)

❤️ Thank You

Claude Opus 4.6 (1M context)
Nick Perez
Nick the Sick
Stephan Meijer @StephanMeijer

`v0.48.0`

Compare Source

🚀 Features

upgrade shiki to v4 and prosemirror-highlight to v0.15.1 (#2625)
upgrade nx to 22.6.4 and liveblocks to 3.17.0 (#2627)

🩹 Fixes

Image block selection clears on mouse leave in Safari (#2613)
Backspace bug when current block is empty and previous block's last child is empty (#2610)
allow using latest @tiptap/extension-link version (1ae8de713)
restore depth guard in getParentBlockInfo to prevent RangeError (blo-1103) (#2585)
pin better-auth to ~1.4.x to fix docs build (bda30458a)
hide side menu on scroll instead of overflow hacks (#2630, #2043)
disable default UI when no components context is found (#2611)
add .js extension to fast-deep-equal ESM import (#2641)
placeholder when overflowing now wraps (#2291)
core: fix unnesting blocks with siblings (BLO-1017) (#2601)
core: backspace mid-text next to columnList moves block BLO-1126 (#2629)

🔥 Performance

optimize plugin traversals for large documents BLO-1111 (#2600)

❤️ Thank You

Claude Opus 4.6
Claude Opus 4.6 (1M context)
hedi-ghodhbane @hedi-ghodhbane
Matthew Lipski @matthewlipski
Nick Perez
Nick the Sick @nperez0111
Yousef

fontsource/font-files (@fontsource-variable/material-symbols-outlined)

mantinedev/mantine (@mantine/core)

`v9.0.2`

Compare Source

What's Changed

[@mantine/schedule] Change default events border-radius to sm
[@mantine/dates] DateTimePicker: Fix formatting not working with withSeconds set on timePickerProps only
[@mantine/core] Textarea: Fix error thrown on resize in some cases
[@mantine/modals] Fix modals.closeAll() called from comtext modal causing infinite rerendering
[@mantine/tiptap] RichTextEditor: Fix invisible caret in empty task list items
[@mantine/schedule] Fix rrule package imports bot being compatible with esm only bundlers
[@mantine/schedule] Fix onEventClick called when event is resizing
[@mantine/core] Fix incorrect default colors resolver for custom colors in light variant

New Contributors

@dkpark10 made their first contribution in #8807
@sdelpercio made their first contribution in #8826

Full Changelog: mantinedev/mantine@9.0.1...9.0.2

`v9.0.1`

Compare Source

What's Changed

[@mantine/core] LoadingOverlay: Fix double overlay visible with dark color scheme (#8811)
[@mantine/core] RingProgress: Add missing viewBox (#8806)
[@mantine/core] Input: Add rootRef prop support
[@mantine/core] Combobox: Fix refProp not working on Combobox.Target (#8798)
[@mantine/mcp-server] Fix stdio transport to comply with MCP spec (#8792)
[@mantine/core] Input: Fix aria-invalid="false" attribute being set (#8785)
[@mantine/core] Slider: Fix incorrect orientation inheritance from the parent markup (#8791)
[@mantine/core] Fix incorrect default placeholder size in PasswordInput and other components (#8793)
[@mantine/core] Badge: Fix text being cut off with some fonts (#8788)
[@mantine/hooks] use-scroller: Fix element dynamic resizing not being handled correctly (#8800)
[@mantine/core] Fix Checkbox.Group, Switch.Group, Radio.Group and Chip.Group not working with generic primitive values (#8801)
[@mantine/core] Popover: Fix missing withProps (#8802)
[@mantine/core] Accordion: Fix focus ring being cut off (#8797)
[@mantine/charts] Add option to fully customize reference lines label (#8790)
[@mantine/core] Fix loading prop not being handled correctly in TagsInput and MultiSelect (#8803)

Full Changelog: mantinedev/mantine@9.0.0...9.0.1

`v9.0.0`: 🤩

Compare Source

View changelog with demos on mantine.dev website

Migration guide

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

Peer dependencies requirements updates

Starting from Mantine 9.0, the following dependencies are required:

React 19.2+ for all @mantine/* packages
Tiptap 3+ for @mantine/tiptap (migration guide)
Recharts 3+ for @mantine/charts (no migration required)

New @mantine/schedule package

New @mantine/schedule package provides a complete set of
calendar scheduling components for React applications. It includes multiple view levels,
drag-and-drop event management, and extensive customization options.

Schedule

Schedule is a unified container component that combines all views with built-in navigation and view switching. Drag events to reschedule them:

import { useState } from 'react';
import dayjs from 'dayjs';
import { Schedule, ScheduleEventData } from '@&#8203;mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');
const tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD');

const initialEvents: ScheduleEventData[] = [
  {
    id: 1,
    title: 'Morning Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Team Meeting',
    start: `${today} 10:00:00`,
    end: `${today} 11:30:00`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Lunch Break',
    start: `${today} 12:00:00`,
    end: `${today} 13:00:00`,
    color: 'orange',
  },
  {
    id: 4,
    title: 'Code Review',
    start: `${tomorrow} 14:00:00`,
    end: `${tomorrow} 15:00:00`,
    color: 'violet',
  },
  {
    id: 5,
    title: 'Client Call',
    start: `${tomorrow} 15:30:00`,
    end: `${tomorrow} 16:30:00`,
    color: 'cyan',
  },
  {
    id: 6,
    title: 'All Day Conference',
    start: `${today} 00:00:00`,
    end: dayjs(today).add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'red',
  },
];

function Demo() {
  const [events, setEvents] = useState(initialEvents);

  const handleEventDrop = ({ eventId, newStart, newEnd }: { eventId: string | number; newStart: string; newEnd: string }) => {
    setEvents((prev) =>
      prev.map((event) =>
        event.id === eventId ? { ...event, start: newStart, end: newEnd } : event
      )
    );
  };

  return (
    <Schedule
      events={events}
      withEventsDragAndDrop
      onEventDrop={handleEventDrop}
    />
  );
}

DayView

DayView displays a single day with configurable time slots, all-day event section, current time indicator, and business hours highlighting. Drag events to reschedule them:

import { useState } from 'react';
import dayjs from 'dayjs';
import { DayView, ScheduleEventData } from '@&#8203;mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');

const initialEvents: ScheduleEventData[] = [
  {
    id: 1,
    title: 'Morning Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Team Meeting',
    start: `${today} 11:00:00`,
    end: `${today} 12:00:00`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Code Review',
    start: `${today} 14:00:00`,
    end: `${today} 15:00:00`,
    color: 'violet',
  },
];

function Demo() {
  const [events, setEvents] = useState(initialEvents);

  const handleEventDrop = ({ eventId, newStart, newEnd }: { eventId: string | number; newStart: string; newEnd: string }) => {
    setEvents((prev) =>
      prev.map((event) =>
        event.id === eventId ? { ...event, start: newStart, end: newEnd } : event
      )
    );
  };

  return (
    <DayView
      date={new Date()}
      events={events}
      startTime="08:00:00"
      endTime="18:00:00"
      withEventsDragAndDrop
      onEventDrop={handleEventDrop}
    />
  );
}

WeekView

WeekView shows a weekly calendar grid with time slots, week numbers, weekend day toggling, and multi-day event spanning. Drag events across days and time slots:

import { useState } from 'react';
import dayjs from 'dayjs';
import { WeekView, ScheduleEventData } from '@&#8203;mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');
const tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD');

const initialEvents: ScheduleEventData[] = [
  {
    id: 1,
    title: 'Morning Standup',
    start: `${today} 09:00:00`,
    end: `${today} 09:30:00`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Team Meeting',
    start: `${tomorrow} 11:00:00`,
    end: `${tomorrow} 12:00:00`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Code Review',
    start: `${today} 14:00:00`,
    end: `${today} 15:00:00`,
    color: 'violet',
  },
  {
    id: 4,
    title: 'Company Holiday',
    start: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 })).format('YYYY-MM-DD HH:mm:ss'),
    end: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 }))
      .add(2, 'day')
      .format('YYYY-MM-DD HH:mm:ss'),
    color: 'red',
  },
  {
    id: 5,
    title: 'Release Day',
    start: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 })).format('YYYY-MM-DD HH:mm:ss'),
    end: dayjs(getStartOfWeek({ date: today, firstDayOfWeek: 1 }))
      .add(2, 'day')
      .format('YYYY-MM-DD HH:mm:ss'),
    color: 'orange',
  },
];

function Demo() {
  const [events, setEvents] = useState(initialEvents);

  const handleEventDrop = ({ eventId, newStart, newEnd }: { eventId: string | number; newStart: string; newEnd: string }) => {
    setEvents((prev) =>
      prev.map((event) =>
        event.id === eventId ? { ...event, start: newStart, end: newEnd } : event
      )
    );
  };

  return (
    <WeekView
      date={new Date()}
      events={events}
      startTime="08:00:00"
      endTime="18:00:00"
      withEventsDragAndDrop
      onEventDrop={handleEventDrop}
    />
  );
}

MonthView

MonthView displays a monthly calendar grid with event overflow handling, outside days display, and week numbers. Drag events to different days:

import { useState } from 'react';
import dayjs from 'dayjs';
import { MonthView, ScheduleEventData } from '@&#8203;mantine/schedule';

const today = dayjs().format('YYYY-MM-DD');

const initialEvents: ScheduleEventData[] = [
  {
    id: 1,
    title: 'Team Meeting',
    start: `${today} 09:00:00`,
    end: `${today} 10:30:00`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Project Deadline',
    start: dayjs().add(5, 'day').format('YYYY-MM-DD 00:00:00'),
    end: dayjs().add(6, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'red',
  },
];

function Demo() {
  const [events, setEvents] = useState(initialEvents);

  const handleEventDrop = ({ eventId, newStart, newEnd }: { eventId: string | number; newStart: string; newEnd: string }) => {
    setEvents((prev) =>
      prev.map((event) =>
        event.id === eventId ? { ...event, start: newStart, end: newEnd } : event
      )
    );
  };

  return <MonthView date={new Date()} events={events} withEventsDragAndDrop onEventDrop={handleEventDrop} />;
}

YearView

YearView provides a 12-month year overview organized by quarters with day-level event indicators:

// Demo.tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { YearView } from '@&#8203;mantine/schedule';
import { events } from './data';

function Demo() {
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));

  return (
    <YearView
      date={date}
      onDateChange={setDate}
      events={events}
    />
  );
}

// data.ts
import dayjs from 'dayjs';

const thisYear = dayjs().format('YYYY');

const events = [
  {
    id: 1,
    title: 'New Year',
    start: \\\`\\\${thisYear}-01-01 00:00:00\\\`,
    end: dayjs(\\\`\\\${thisYear}-01-01\\\`).add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'blue',
  },
  {
    id: 2,
    title: 'Spring Event',
    start: \\\`\\\${thisYear}-03-15 00:00:00\\\`,
    end: dayjs(\\\`\\\${thisYear}-03-15\\\`).add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'green',
  },
];

MobileMonthView

MobileMonthView is a mobile-optimized month view with event details panel for the selected day:

// Demo.tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { MobileMonthView } from '@&#8203;mantine/schedule';
import { events } from './data';

function Demo() {
  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
  const [selectedDate, setSelectedDate] = useState<string | null>(dayjs().format('YYYY-MM-DD'));

  return (
    <MobileMonthView
      date={date}
      onDateChange={setDate}
      selectedDate={selectedDate}
      onSelectedDateChange={setSelectedDate}
      events={regularEvents}
    />
  );
}

// data.ts
import dayjs from 'dayjs';

const thisMonth = dayjs().format('YYYY-MM');

export const events = [
  {
    id: 1,
    title: 'Team Meeting',
    start: \`\${thisMonth}-05 09:00:00\`,
    end: \`\${thisMonth}-05 10:00:00\`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Project Review',
    start: \`\${thisMonth}-05 14:00:00\`,
    end: \`\${thisMonth}-05 15:30:00\`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Conference',
    start: \`\${thisMonth}-10 00:00:00\`,
    end: \`\${thisMonth}-12 00:00:00\`,
    color: 'violet',
  },
  // ... more events
];

To get started, follow the getting started guide.

Collapse horizontal orientation

Collapse component now supports horizontal orientation:

import { Button, Collapse, Stack, Typography } from '@&#8203;mantine/core';
import { useDisclosure } from '@&#8203;mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);

  return (
    <Stack h={240} align="flex-start">
      <Button onClick={handlers.toggle} w="fit-content">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <Collapse expanded={expanded} orientation="horizontal">
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md" w={200}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </Typography>
      </Collapse>
    </Stack>
  );
}

use-collapse and use-horizontal-collapse hooks

New use-collapse hook is the hook version of Collapse component.
It allows animation of height from 0 to auto and vice versa.

import { Button, Typography } from '@&#8203;mantine/core';
import { useCollapse, useDisclosure } from '@&#8203;mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);
  const getCollapseProps = useCollapse({ expanded });

  return (
    <>
      <Button onClick={handlers.toggle} mb="md">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <div {...getCollapseProps()}>
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
          ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </Typography>
      </div>
    </>
  );
}

use-horizontal-collapse works the same way as use-collapse but animates width instead of height:

import { Button, Stack, Typography } from '@&#8203;mantine/core';
import { useDisclosure, useHorizontalCollapse } from '@&#8203;mantine/hooks';

function Demo() {
  const [expanded, handlers] = useDisclosure(false);
  const { getCollapseProps } = useHorizontalCollapse({ expanded });

  return (
    <Stack h={240}>
      <Button onClick={handlers.toggle} w="fit-content">
        {expanded ? 'Collapse' : 'Expand'}
      </Button>

      <div {...getCollapseProps({ style: { width: 200 } })}>
        <Typography bg="var(--mantine-color-blue-light)" p="xs" bdrs="md" w={200}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua.
        </Typography>
      </div>
    </Stack>
  );
}

use-floating-window hook

New use-floating-window hook allows creating floating draggable
elements:

import { Button, CloseButton, Group, Paper, Portal, Text } from '@&#8203;mantine/core';
import { useDisclosure, useFloatingWindow } from '@&#8203;mantine/hooks';

function Demo() {
  const [visible, handlers] = useDisclosure();
  const floatingWindow = useFloatingWindow({
    constrainToViewport: true,
    constrainOffset: 20,
    excludeDragHandleSelector: 'button',
    initialPosition: { top: 300, left: 20 },
  });

  return (
    <>
      <Button onClick={handlers.toggle} variant="default">
        {visible ? 'Hide' : 'Show'} floating window
      </Button>

      {visible && (
        <Portal>
          <Paper
            w={280}
            p="md"
            withBorder
            pos="fixed"
            style={{ cursor: 'move', transition: 'box-shadow 70ms ease', zIndex: 400 }}
            shadow={floatingWindow.isDragging ? 'md' : undefined}
            ref={floatingWindow.ref}
          >
            <Group justify="space-between" mb="md">
              <Text>Usage demo</Text>
              <CloseButton onClick={handlers.close} />
            </Group>
            <Text fz="sm">This is a floating window. You can drag it around.</Text>
          </Paper>
        </Portal>
      )}
    </>
  );
}

FloatingWindow component

FloatingWindow provides component API for use-floating-window hook:

import { Button, CloseButton, FloatingWindow, Group, Text } from '@&#8203;mantine/core';
import { useDisclosure } from '@&#8203;mantine/hooks';

function Demo() {
  const [visible, handlers] = useDisclosure();

  return (
    <>
      <Button onClick={handlers.toggle} variant="default">
        {visible ? 'Hide' : 'Show'} floating window
      </Button>

      {visible && (
        <FloatingWindow
          w={280}
          p="md"
          withBorder
          excludeDragHandleSelector="button"
          initialPosition={{ top: 300, left: 20 }}
          style={{ cursor: 'move' }}
        >
          <Group justify="space-between" mb="md">
            <Text>Usage demo</Text>
            <CloseButton onClick={handlers.close} />
          </Group>
          <Text fz="sm">This is a floating window. You can drag it around.</Text>
        </FloatingWindow>
      )}
    </>
  );
}

OverflowList component

New OverflowList component displays list of items and collapses the overflowing items into a single element:

// OverflowListDemo.tsx
import { Badge, OverflowList } from '@&#8203;mantine/core';
import { data } from './data';

function Demo() {
  return (
    <div style={{ resize: 'horizontal', overflow: 'auto', maxWidth: '100%' }}>
      <OverflowList
        data={data}
        gap={4}
        renderOverflow={(items) => <Badge>+{items.length} more</Badge>}
        renderItem={(item, index) => <Badge key={index}>{item}</Badge>}
      />
    </div>
  );
}

// data.ts
export const data = [
  'Apple',
  'Banana',
  'Cherry',
  'Date',
  'Elderberry',
  'Fig',
  'Grape',
  'Honeydew',
  'Indian Fig',
  'Jackfruit',
  'Kiwi',
  'Lemon',
  'Mango',
  'Nectarine',
  'Orange',
  'Papaya',
];

Marquee component

New Marquee component creates continuous scrolling animation for content:

import { Marquee } from '@&#8203;mantine/core';
import { MantineLogo } from '@&#8203;mantinex/mantine-logo';

function Demo() {
  return (
    <Marquee gap="lg">
      <MantineLogo width={80} type="full" color="blue" />
      <MantineLogo width={80} type="full" color="cyan" />
      <MantineLogo width={80} type="full" color="teal" />
      <MantineLogo width={80} type="full" color="green" />
      <MantineLogo width={80} type="full" color="lime" />
      <MantineLogo width={80} type="full" color="yellow" />
      <MantineLogo width={80} type="full" color="orange" />
      <MantineLogo width={80} type="full" color="red" />
    </Marquee>
  );
}

Scroller component

New Scroller component displays horizontally scrollable content with navigation controls.
It supports native scrolling via trackpad, shift + mouse wheel, touch gestures, and mouse drag:

import { Badge, Group, Scroller } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Scroller>
      <Group gap="xs" wrap="nowrap">
        {Array.from({ length: 20 }).map((_, index) => (
          <Badge key={index} variant="light" size="lg">
            Badge {index + 1}
          </Badge>
        ))}
      </Group>
    </Scroller>
  );
}

use-scroller hook

New use-scroller hook provides logic for creating custom scrollable containers with navigation controls:

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

function Demo() {
  const scroller = useScroller();

  return (
    <Box>
      <Group mb="md">
        <Button
          onClick={scroller.scrollStart}
          disabled={!scroller.canScrollStart}
          variant="default"
          size="xs"
        >
          ← Scroll left
        </Button>
        <Button
          onClick={scroller.scrollEnd}
          disabled={!scroller.canScrollEnd}
          variant="default"
          size="xs"
        >
          Scroll right →
        </Button>
      </Group>

      <div
        ref={scroller.ref}
        {...scroller.dragHandlers}
        style={{
          overflow: 'auto',
          cursor: scroller.isDragging ? 'grabbing' : 'grab',
        }}
      >
        <Group wrap="nowrap" gap="md">
          {Array.from({ length: 20 }).map((_, index) => (
            <Box
              key={index}
              style={{
                minWidth: 100,
                height: 80,
                backgroundColor: 'var(--mantine-color-blue-filled)',
                borderRadius: 'var(--mantine-radius-md)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: 'white',
                fontWeight: 500,
              }}
            >
              {index + 1}
            </Box>
          ))}
        </Group>
      </div>
    </Box>
  );
}

BarsList component

New BarsList component displays a list of horizontal bars with names and values.
It supports custom colors, auto contrast, value formatting, and custom bar rendering:

// Demo.tsx
import { BarsList } from '@&#8203;mantine/charts';
import { data } from './data';

function Demo() {
  return <BarsList data={data} />;
}

// data.ts
export const data = ${JSON.stringify(data, null, 2)};

Card horizontal orientation

Card component now supports horizontal orientation:

import { Box, Card, Group, RingProgress, Text } from '@&#8203;mantine/core';

const completed = 1887;
const total = 2334;
const stats = [
  { value: 447, label: 'Remaining' },

</details>

---

### Configuration

📅 **Schedule**: (UTC)

- Branch creation
  - "before 7am on monday"
- 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](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired.

---

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

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/suitenumerique/docs).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0My4xMjMuOCIsInVwZGF0ZWRJblZlciI6IjQzLjE0MS4zIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJhdXRvbWF0ZWQiLCJkZXBlbmRlbmNpZXMiLCJub0NoYW5nZUxvZyJdfQ==-->

renovate Bot added automated Pull request created automatically dependencies Pull requests that update a dependency file noChangeLog labels Apr 20, 2026

AntoLC self-assigned this Apr 20, 2026

renovate Bot force-pushed the renovate/js-dependencies branch from b8eb36f to 113ced7 Compare April 27, 2026 02:16

⬆️(dependencies) update js dependencies

80f6378

renovate Bot force-pushed the renovate/js-dependencies branch from 113ced7 to 80f6378 Compare April 27, 2026 04:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

⬆️(dependencies) update js dependencies#2229

⬆️(dependencies) update js dependencies#2229
renovate[bot] wants to merge 1 commit intomainfrom
renovate/js-dependencies

renovate Bot commented Apr 20, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

renovate Bot commented Apr 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Notes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

Patch Changes

🩹 Fixes

❤️ Thank You

🚀 Features

🩹 Fixes

🔥 Performance

❤️ Thank You

What's Changed

New Contributors

What's Changed

v9.0.0: 🤩

Migration guide

Peer dependencies requirements updates

New @​mantine/schedule package

Schedule

DayView

WeekView

MonthView

YearView

MobileMonthView

Collapse horizontal orientation

use-collapse and use-horizontal-collapse hooks

use-floating-window hook

FloatingWindow component

OverflowList component

Marquee component

Scroller component

use-scroller hook

BarsList component

Card horizontal orientation

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

renovate Bot commented Apr 20, 2026 •

edited

Loading

`v9.0.0`: 🤩

New @mantine/schedule package