JavaGolangJavaScriptSwiftAndroidRustMiddleware
1 hours ago
dockview
mathuo

v7.0.2

For more details visit https://dockview.dev/docs/overview/whats-new-v7. For migration from v6 visit https://dockview.dev/docs/overview/migrating-to-v7.

What's Changed

Full Changelog: https://github.com/mathuo/dockview/compare/v6.6.1...v7.0.2

5 hours ago
mantine
mantinedev

9.4.0 🥵

View changelog with demos on mantine.dev website

Support Mantine development

You can now sponsor Mantine development with OpenCollective. All funds are used to improve Mantine and create new features and components.

ComboboxPopover component

New ComboboxPopover component allows adding a combobox dropdown with selectable options to any button element. Unlike Select and MultiSelect, it does not render an input – you provide your own target element via ComboboxPopover.Target. Supports single and multiple selection modes with the same data format as Select.

import { useState } from 'react';
import { Button, ComboboxPopover } from '@mantine/core';

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

  return (
    <ComboboxPopover
      data={['React', 'Angular', 'Vue', 'Svelte']}
      value={value}
      onChange={setValue}
    >
      <ComboboxPopover.Target>
        <Button variant="default" miw={200}>{value || 'Select framework'}</Button>
      </ComboboxPopover.Target>
    </ComboboxPopover>
  );
}

DataList component

New DataList component displays label-value pairs as a semantic description list using dl, dt, and dd HTML elements. Supports vertical and horizontal orientations, dividers between items, and all standard Mantine features like Styles API and size prop.

import { DataList } from '@mantine/core';

const data = [
  { label: 'Name', value: 'John Doe' },
  { label: 'Email', value: 'john@example.com' },
  { label: 'Role', value: 'Software Engineer' },
  { label: 'Location', value: 'San Francisco, CA' },
];

function Demo() {
  return (
    <DataList size="md" orientation="vertical" withDivider={false}>
      {data.map((item) => (
        <DataList.Item key={item.label}>
          <DataList.ItemLabel>{item.label}</DataList.ItemLabel>
          <DataList.ItemValue>{item.value}</DataList.ItemValue>
        </DataList.Item>
      ))}
    </DataList>
  );
}

EmptyState component

New EmptyState component displays a placeholder for "no data" situations: empty search results, empty tables and lists, first-run states or error illustrations with an optional call to action. It can be used with icon, title and description shorthand props or with EmptyState.Indicator, EmptyState.Title, EmptyState.Description and EmptyState.Actions compound components for full control.

import { Button, EmptyState } from '@mantine/core';
import { MagnifyingGlassIcon } from '@phosphor-icons/react';

function Demo() {
  return (
    <EmptyState>
      <EmptyState.Indicator>
        <MagnifyingGlassIcon />
      </EmptyState.Indicator>
      <EmptyState.Title>No results found</EmptyState.Title>
      <EmptyState.Description>
        We couldn't find anything matching your search. Try adjusting your filters or searching with
        different keywords to see more results.
      </EmptyState.Description>
      <EmptyState.Actions>
        <Button variant="default">Reset filters</Button>
        <Button variant="default">Create new</Button>
      </EmptyState.Actions>
    </EmptyState>
  );
}

Menubar component

New Menubar component adds a desktop-application style menu bar: a horizontal row of top-level menu triggers (File, Edit, View, …) where each trigger opens a dropdown. Arrow keys move between the top-level menus, and once one menu is opened, moving to a sibling opens it immediately. Menubar is built on top of Menu and follows the WAI-ARIA menubar pattern.

import { Menu, Menubar, Text } from '@mantine/core';

function Demo() {
  return (
    <Menubar>
      <Menubar.Menu width={220}>
        <Menubar.Target>File</Menubar.Target>
        <Menubar.Dropdown>
          <Menu.Item rightSection={<Text size="xs" c="dimmed">⌘N</Text>}>New file</Menu.Item>
          <Menu.Item rightSection={<Text size="xs" c="dimmed">⌘⇧N</Text>}>New window</Menu.Item>
          <Menu.Sub>
            <Menu.Sub.Target>
              <Menu.Sub.Item>Open recent</Menu.Sub.Item>
            </Menu.Sub.Target>
            <Menu.Sub.Dropdown>
              <Menu.Item>project-alpha</Menu.Item>
              <Menu.Item>project-beta</Menu.Item>
              <Menu.Item>project-gamma</Menu.Item>
            </Menu.Sub.Dropdown>
          </Menu.Sub>
          <Menu.Divider />
          <Menu.Item rightSection={<Text size="xs" c="dimmed">⌘S</Text>}>Save</Menu.Item>
          <Menu.Item>Save as…</Menu.Item>
        </Menubar.Dropdown>
      </Menubar.Menu>

      <Menubar.Menu width={220}>
        <Menubar.Target>Edit</Menubar.Target>
        <Menubar.Dropdown>
          <Menu.Item rightSection={<Text size="xs" c="dimmed">⌘Z</Text>}>Undo</Menu.Item>
          <Menu.Item rightSection={<Text size="xs" c="dimmed">⌘⇧Z</Text>}>Redo</Menu.Item>
          <Menu.Divider />
          <Menu.Item>Cut</Menu.Item>
          <Menu.Item>Copy</Menu.Item>
          <Menu.Item>Paste</Menu.Item>
        </Menubar.Dropdown>
      </Menubar.Menu>

      <Menubar.Menu width={220}>
        <Menubar.Target>Help</Menubar.Target>
        <Menubar.Dropdown>
          <Menu.Item>Documentation</Menu.Item>
          <Menu.Item>Keyboard shortcuts</Menu.Item>
          <Menu.Item>About</Menu.Item>
        </Menubar.Dropdown>
      </Menubar.Menu>
    </Menubar>
  );
}

ResourcesDayView component

New ResourcesDayView component displays resources as rows and time slots as columns. Each row represents a resource (conference room, person, equipment) and shows events assigned to that resource. Supports drag and drop across resources, business hours highlighting, and slot drag select.

// Demo.tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesDayView } from '@mantine/schedule';
import { events, resources } from './data';

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

  return (
    <ResourcesDayView
      date={date}
      onDateChange={setDate}
      resources={resources}
      events={events}
      startTime="08:00:00"
      endTime="18:00:00"
    />
  );
}

// data.ts
import dayjs from 'dayjs';
import { ScheduleResourceData } from '@mantine/schedule';

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

const resources: ScheduleResourceData[] = [
  { id: 'tokyo', label: 'Meeting room: Tokyo' },
  { id: 'paris', label: 'Meeting room: Paris' },
  { id: 'new-york', label: 'Meeting room: New York' },
  { id: 'london', label: 'Meeting room: London' },
];

const events = [
  {
    id: 1,
    title: 'Team Standup',
    start: \`\${today} 09:00:00\`,
    end: \`\${today} 09:30:00\`,
    color: 'blue',
    resourceId: 'tokyo',
  },
  {
    id: 2,
    title: 'Sprint Planning',
    start: \`\${today} 10:00:00\`,
    end: \`\${today} 11:30:00\`,
    color: 'green',
    resourceId: 'tokyo',
  },
  {
    id: 3,
    title: 'Client Call',
    start: \`\${today} 09:30:00\`,
    end: \`\${today} 10:30:00\`,
    color: 'violet',
    resourceId: 'paris',
  },
  {
    id: 4,
    title: 'Design Review',
    start: \`\${today} 13:00:00\`,
    end: \`\${today} 14:00:00\`,
    color: 'orange',
    resourceId: 'paris',
  },
  {
    id: 5,
    title: '1:1 Meeting',
    start: \`\${today} 11:00:00\`,
    end: \`\${today} 11:30:00\`,
    color: 'cyan',
    resourceId: 'new-york',
  },
  {
    id: 6,
    title: 'Workshop',
    start: \`\${today} 14:00:00\`,
    end: \`\${today} 16:00:00\`,
    color: 'pink',
    resourceId: 'new-york',
  },
  {
    id: 7,
    title: 'Architecture Review',
    start: \`\${today} 10:00:00\`,
    end: \`\${today} 11:00:00\`,
    color: 'red',
    resourceId: 'london',
  },
  {
    id: 8,
    title: 'Retrospective',
    start: \`\${today} 15:00:00\`,
    end: \`\${today} 16:00:00\`,
    color: 'grape',
    resourceId: 'london',
  },
];

ResourcesWeekView component

New ResourcesWeekView component displays resources as rows and a full week of time slots as columns with a two-level header showing day names and time labels. Supports drag and drop, slot selection, business hours, and current time indicator.

// Demo.tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesWeekView } from '@mantine/schedule';
import { events, resources } from './data';

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

  return (
    <ResourcesWeekView
      date={date}
      onDateChange={setDate}
      resources={resources}
      events={events}
      startTime="08:00:00"
      endTime="18:00:00"
      startScrollDateTime={`${today} 08:00:00`}
    />
  );
}

// data.ts
import dayjs from 'dayjs';
import { ScheduleResourceData } from '@mantine/schedule';

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

const resources: ScheduleResourceData[] = [
  { id: 'tokyo', label: 'Meeting room: Tokyo' },
  { id: 'paris', label: 'Meeting room: Paris' },
  { id: 'new-york', label: 'Meeting room: New York' },
  { id: 'london', label: 'Meeting room: London' },
];

const events = [
  {
    id: 1,
    title: 'Team Standup',
    start: \`\${today} 09:00:00\`,
    end: \`\${today} 09:30:00\`,
    color: 'blue',
    resourceId: 'tokyo',
  },
  {
    id: 2,
    title: 'Sprint Planning',
    start: \`\${today} 10:00:00\`,
    end: \`\${today} 11:30:00\`,
    color: 'green',
    resourceId: 'tokyo',
  },
  {
    id: 3,
    title: 'Client Call',
    start: \`\${tomorrow} 09:30:00\`,
    end: \`\${tomorrow} 10:30:00\`,
    color: 'violet',
    resourceId: 'paris',
  },
  {
    id: 4,
    title: 'Design Review',
    start: \`\${today} 13:00:00\`,
    end: \`\${today} 14:00:00\`,
    color: 'orange',
    resourceId: 'paris',
  },
  {
    id: 5,
    title: '1:1 Meeting',
    start: \`\${tomorrow} 11:00:00\`,
    end: \`\${tomorrow} 11:30:00\`,
    color: 'cyan',
    resourceId: 'new-york',
  },
  {
    id: 6,
    title: 'Workshop',
    start: \`\${dayAfter} 14:00:00\`,
    end: \`\${dayAfter} 16:00:00\`,
    color: 'pink',
    resourceId: 'new-york',
  },
  {
    id: 7,
    title: 'Architecture Review',
    start: \`\${tomorrow} 10:00:00\`,
    end: \`\${tomorrow} 11:00:00\`,
    color: 'red',
    resourceId: 'london',
  },
  {
    id: 8,
    title: 'Retrospective',
    start: \`\${today} 15:00:00\`,
    end: \`\${today} 16:00:00\`,
    color: 'grape',
    resourceId: 'london',
  },
  {
    id: 9,
    title: 'Product Demo',
    start: \`\${dayAfter} 09:00:00\`,
    end: \`\${dayAfter} 10:00:00\`,
    color: 'teal',
    resourceId: 'tokyo',
  },
  {
    id: 10,
    title: 'Budget Review',
    start: \`\${dayAfter2} 11:00:00\`,
    end: \`\${dayAfter2} 12:30:00\`,
    color: 'indigo',
    resourceId: 'paris',
  },
];

ResourcesMonthView component

New ResourcesMonthView component displays resources as rows and days of the month as columns. Events are shown as colored indicators within each resource-day cell for easy visualization of resource utilization across the month.

// Demo.tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesMonthView } from '@mantine/schedule';
import { events, resources } from './data';

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

  return (
    <ResourcesMonthView
      date={date}
      onDateChange={setDate}
      resources={resources}
      events={events}
      startScrollDate={dayjs().format('YYYY-MM-DD')}
    />
  );
}

// data.ts
import dayjs from 'dayjs';
import { ScheduleResourceData } from '@mantine/schedule';

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

const resources: ScheduleResourceData[] = [
  { id: 'tokyo', label: 'Meeting room: Tokyo' },
  { id: 'paris', label: 'Meeting room: Paris' },
  { id: 'new-york', label: 'Meeting room: New York' },
];

const events = [
  {
    id: 1,
    title: 'Team Standup',
    start: \`\${today} 09:00:00\`,
    end: \`\${today} 09:30:00\`,
    color: 'blue',
    resourceId: 'tokyo',
  },
  {
    id: 2,
    title: 'Sprint Planning',
    start: \`\${today} 10:00:00\`,
    end: \`\${today} 11:30:00\`,
    color: 'green',
    resourceId: 'paris',
  },
  {
    id: 3,
    title: 'Design Review',
    start: \`\${tomorrow} 13:00:00\`,
    end: \`\${tomorrow} 14:00:00\`,
    color: 'orange',
    resourceId: 'tokyo',
  },
  {
    id: 4,
    title: 'Client Call',
    start: \`\${tomorrow} 09:30:00\`,
    end: \`\${tomorrow} 10:30:00\`,
    color: 'violet',
    resourceId: 'new-york',
  },
  {
    id: 5,
    title: 'Workshop',
    start: \`\${nextWeek} 14:00:00\`,
    end: \`\${nextWeek} 16:00:00\`,
    color: 'pink',
    resourceId: 'paris',
  },
];

ResourcesSchedule component

New ResourcesSchedule wrapper component combines ResourcesDayView, ResourcesWeekView and ResourcesMonthView into a single component with view switching, similar to how Schedule combines day, week, month and year views.

// Demo.tsx
import dayjs from 'dayjs';
import { useState } from 'react';
import { ResourcesSchedule } from '@mantine/schedule';
import { events, resources } from './data';

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

  return (
    <ResourcesSchedule
      date={date}
      onDateChange={setDate}
      resources={resources}
      events={events}
      dayViewProps={{ startTime: '08:00:00', endTime: '18:00:00', startScrollTime: '08:00:00' }}
      weekViewProps={{ startTime: '08:00:00', endTime: '18:00:00', startScrollDateTime: `${today} 08:00:00` }}
      monthViewProps={{ startScrollDate: today }}
    />
  );
}

// data.ts
import dayjs from 'dayjs';
import { ScheduleResourceData } from '@mantine/schedule';

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

const resources: ScheduleResourceData[] = [
  { id: 'tokyo', label: 'Meeting room: Tokyo' },
  { id: 'paris', label: 'Meeting room: Paris' },
  { id: 'new-york', label: 'Meeting room: New York' },
  { id: 'london', label: 'Meeting room: London' },
];

const events = [
  { id: 1, title: 'Team Standup', start: \`\${today} 09:00:00\`, end: \`\${today} 09:30:00\`, color: 'blue', resourceId: 'tokyo' },
  { id: 2, title: 'Sprint Planning', start: \`\${today} 10:00:00\`, end: \`\${today} 11:30:00\`, color: 'green', resourceId: 'tokyo' },
  { id: 3, title: 'Client Call', start: \`\${today} 09:30:00\`, end: \`\${today} 10:30:00\`, color: 'violet', resourceId: 'paris' },
  { id: 4, title: 'Design Review', start: \`\${tomorrow} 13:00:00\`, end: \`\${tomorrow} 14:00:00\`, color: 'orange', resourceId: 'paris' },
  { id: 5, title: '1:1 Meeting', start: \`\${today} 11:00:00\`, end: \`\${today} 11:30:00\`, color: 'cyan', resourceId: 'new-york' },
  { id: 6, title: 'Workshop', start: \`\${nextWeek} 14:00:00\`, end: \`\${nextWeek} 16:00:00\`, color: 'pink', resourceId: 'new-york' },
  { id: 7, title: 'Architecture Review', start: \`\${today} 10:00:00\`, end: \`\${today} 11:00:00\`, color: 'red', resourceId: 'london' },
  { id: 8, title: 'Retrospective', start: \`\${tomorrow} 15:00:00\`, end: \`\${tomorrow} 16:00:00\`, color: 'grape', resourceId: 'london' },
];

AgendaView component

New AgendaView component renders a vertical list of events for a specified time period. Events are grouped by date in chronological order.

import dayjs from 'dayjs';
import { AgendaView } from '@mantine/schedule';

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

const events = [
  {
    id: 'team-meeting',
    title: 'Team Meeting',
    start: `${startOfMonth} 09:00:00`,
    end: `${startOfMonth} 10:30:00`,
    color: 'blue',
  },
  {
    id: 'client-call',
    title: 'Client Call',
    start: `${today} 14:00:00`,
    end: `${today} 15:00:00`,
    color: 'green',
  },
  {
    id: 'daily-sync-series',
    title: 'Daily sync',
    start: `${startOfMonth} 09:30:00`,
    end: `${startOfMonth} 10:00:00`,
    color: 'grape',
    recurrence: {
      rrule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;COUNT=30',
    },
  },
  {
    id: 'weekly-review-series',
    title: 'Weekly review',
    start: `${startOfMonth} 16:00:00`,
    end: `${startOfMonth} 17:00:00`,
    color: 'cyan',
    recurrence: {
      rrule: 'FREQ=WEEKLY;COUNT=8',
    },
  },
];

function Demo() {
  return (
    <AgendaView
      rangeStart={dayjs().startOf('month').format('YYYY-MM-DD')}
      rangeEnd={dayjs().endOf('month').format('YYYY-MM-DD')}
      events={events}
    />
  );
}

withAgenda prop for DayView, WeekView, MonthView and Schedule

DayView, WeekView, MonthView and Schedule components now support withAgenda prop. When enabled, an "Agenda" button is displayed in the header. Clicking it opens an AgendaView for the currently visible date range.

import dayjs from 'dayjs';
import { useState } from 'react';
import { MonthView } from '@mantine/schedule';

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

const events = [
  {
    id: 'team-meeting',
    title: 'Team Meeting',
    start: `${startOfMonth} 09:00:00`,
    end: `${startOfMonth} 10:30:00`,
    color: 'blue',
  },
  {
    id: 'client-call',
    title: 'Client Call',
    start: `${today} 14:00:00`,
    end: `${today} 15:00:00`,
    color: 'green',
  },
  {
    id: 'daily-sync-series',
    title: 'Daily sync',
    start: `${startOfMonth} 09:30:00`,
    end: `${startOfMonth} 10:00:00`,
    color: 'grape',
    recurrence: {
      rrule: 'FREQ=DAILY;BYDAY=MO,TU,WE,TH,FR;COUNT=30',
    },
  },
  {
    id: 'weekly-review-series',
    title: 'Weekly review',
    start: `${startOfMonth} 16:00:00`,
    end: `${startOfMonth} 17:00:00`,
    color: 'orange',
    recurrence: {
      rrule: 'FREQ=WEEKLY;COUNT=8',
    },
  },
];

function Demo() {
  const [date, setDate] = useState(today);

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

MonthView hide weekend days

MonthView now supports withWeekendDays prop. Set it to false to hide weekend days: the grid shrinks to the remaining columns and events that span hidden days are clipped to the visible days. The days that are considered weekend are controlled by the weekendDays prop (or DatesProvider, [0, 6] by default).

// Demo.tsx
import { MonthView } from '@mantine/schedule';
import { events } from './data';

function Demo() {
  return <MonthView date={new Date()} events={events} withWeekendDays={false} />;
}

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

const today = dayjs().format('YYYY-MM-DD');
const startOfMonth = dayjs().startOf('month').format('YYYY-MM-DD');
const midMonth = dayjs().date(15).format('YYYY-MM-DD');
const endOfMonth = dayjs().endOf('month').format('YYYY-MM-DD');

export const events = [
  {
    id: 1,
    title: 'Team Meeting',
    start: \`\${startOfMonth} 09:00:00\`,
    end: \`\${startOfMonth} 10:30:00\`,
    color: 'blue',
  },
  {
    id: 2,
    title: 'Project Deadline',
    start: \`\${midMonth} 00:00:00\`,
    end: dayjs(midMonth).add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'red',
  },
  {
    id: 3,
    title: 'Client Call',
    start: \`\${today} 14:00:00\`,
    end: \`\${today} 15:00:00\`,
    color: 'green',
  },
  {
    id: 4,
    title: 'Monthly Review',
    start: \`\${endOfMonth} 00:00:00\`,
    end: dayjs(endOfMonth).add(1, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss'),
    color: 'violet',
  },
  {
    id: 5,
    title: 'Workshop',
    start: dayjs().add(3, 'day').format('YYYY-MM-DD 10:00:00'),
    end: dayjs().add(3, 'day').format('YYYY-MM-DD 12:00:00'),
    color: 'orange',
  },
  {
    id: 6,
    title: 'Conference',
    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: 'cyan',
  },
];

DayView and WeekView sub-hour grid lines

DayView and WeekView now support withSubHourGridLines prop. When intervalMinutes is smaller than 60, set withSubHourGridLines={false} to display only one grid line per hour while keeping the smaller interval for creating and resizing events. This is useful to achieve a Google Calendar like layout: events snap to 15 or 30 minutes increments, but the grid stays clean with hourly lines.

import { useState } from 'react';
import dayjs from 'dayjs';
import { WeekView, ScheduleEventData } from '@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:15:00`,
    end: `${tomorrow} 12:00:00`,
    color: 'green',
  },
  {
    id: 3,
    title: 'Code Review',
    start: `${today} 14:00:00`,
    end: `${today} 14:45:00`,
    color: 'violet',
  },
];

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

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

  // Events snap to 15 minutes increments, but only one grid line per hour is displayed
  return (
    <WeekView
      date={new Date()}
      events={events}
      startTime="08:00:00"
      endTime="18:00:00"
      intervalMinutes={15}
      withSubHourGridLines
      withEventResize
      onEventResize={handleEventResize}
    />
  );
}

Input success state

All inputs based on Input and Input.Wrapper now support a success prop. When set, it changes the input border color to green (--mantine-color-success). You can also pass a React node to display a success message below the input. If both error and success props are set, error takes precedence.

New --mantine-color-success CSS variable has been added (resolves to teal-6 in light mode and teal-8 in dark mode).

import { TextInput } from '@mantine/core';

function Demo() {
  return (
    <>
      <TextInput placeholder="Success as boolean" label="Success as boolean" success />
      <TextInput
        mt="md"
        placeholder="Success as react node"
        label="Success as react node"
        success="Username is available"
      />
    </>
  );
}

Splitter CSS units

Splitter.Pane defaultSize, min and max props now accept CSS units in addition to plain numbers. A plain number or % string is a flexible size that shares the leftover space, while a px or rem string is a fixed size that keeps its pixel size when the container is resized. This makes it possible to mix a fixed-width sidebar with a fluid content pane:

import { Splitter } from '@mantine/core';

function Demo() {
  return (
    <Splitter h={200}>
      <Splitter.Pane defaultSize="240px" min="160px" max="50%" bg="blue">
        Fixed 240px sidebar
      </Splitter.Pane>
      <Splitter.Pane defaultSize={100} bg="teal">
        Flexible content
      </Splitter.Pane>
    </Splitter>
  );
}

Notifications priority

Notifications now support a priority property. When the number of active notifications exceeds the limit, notifications with a higher priority take the visible slots and lower priority ones are pushed into the queue. Notifications with equal priority keep insertion order (FIFO), so the default behavior is unchanged (priority defaults to 0).

import { Button, Group } from '@mantine/core';
import { createNotificationsStore, notifications, Notifications } from '@mantine/notifications';

// Dedicated store with limit={1} so the priority behavior is easy to see
const store = createNotificationsStore();

function Demo() {
  return (
    <>
      <Notifications store={store} limit={1} position="top-center" />

      <Group justify="center">
        <Button
          color="gray"
          onClick={() =>
            notifications.show(
              {
                title: 'Low priority',
                message: 'I am pushed to the queue when an urgent notification arrives',
                autoClose: false,
                priority: 0,
              },
              store
            )
          }
        >
          Show low priority
        </Button>

        <Button
          color="red"
          onClick={() =>
            notifications.show(
              {
                title: 'High priority',
                message: 'I take the visible slot even when the limit is reached',
                color: 'red',
                autoClose: false,
                priority: 10,
              },
              store
            )
          }
        >
          Show high priority
        </Button>
      </Group>
    </>
  );
}

Legend support for PieChart, DonutChart and FunnelChart

PieChart, DonutChart and FunnelChart now support the withLegend prop. When enabled, a legend with the name and color of each segment is displayed. Hovering over a legend item highlights the corresponding segment. Use the legendProps prop to pass props down to the underlying recharts Legend component.

// Demo.tsx
import { PieChart } from '@mantine/charts';
import { data } from './data';

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

// data.ts
export const data = [
  { name: 'USA', value: 400, color: 'indigo.6' },
  { name: 'India', value: 300, color: 'yellow.6' },
  { name: 'Japan', value: 300, color: 'teal.6' },
  { name: 'Other', value: 200, color: 'gray.6' },
];

autoContrast support for virtual colors

Virtual colors now support autoContrast. Previously, filled components with a virtual color always used white text because the underlying color could not be resolved on the JavaScript side. The contrast color is now calculated separately for each color scheme based on the resolved background color, so text stays readable when the virtual color resolves to a light color in one scheme and a dark color in another. Switch between light and dark color schemes (Ctrl + J) to see the text color adjust:

// App.tsx
import { Button, colorsTuple, createTheme, MantineProvider, virtualColor } from '@mantine/core';
import { Demo } from './Demo';

const theme = createTheme({
  colors: {
    white: colorsTuple('#FFFFFF'),
    black: colorsTuple('#000000'),
    adaptive: virtualColor({
      name: 'adaptive',
      dark: 'white',
      light: 'black',
    }),
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      <Demo />
    </MantineProvider>
  );
}

// Demo.tsx
import { Button } from '@mantine/core';

export function Demo() {
  return (
    <Button color="adaptive" autoContrast>
      Button
    </Button>
  );
}

Other changes

  • Splitter now supports resetOnDoubleClick prop. When enabled, double-clicking a resize handle restores the adjacent panes to their default ratio.
  • TimePicker now supports closeDropdownOnPresetSelect prop. When set, the dropdown is closed once a value is selected from the presets list.
  • useLongPress hook now handles onTouchCancel events: the returned handlers include an onTouchCancel callback so that a long press is correctly canceled when the touch is interrupted by the system (incoming call, browser gesture, etc.).
6 hours ago
swc
swc-project

v1.15.43

7 hours ago
anime
juliangarnier

v4.5.0

New Features

  • Adapters
  • Three.js adapter
    • New built-in three.js adapter, imported as a side-effect from animejs/adapters/three, to animate Object3D, materials, lights, cameras, audio nodes, UniformNode (TSL) and instanced meshes (learn more: https://animejs.com/documentation/adapters/three)
  • Stagger
    • Auto-grid mode now supports 3D layouts, using {x, y, z} coordinates or an explicit grid: [columns, rows, depth] triplet
    • The from parameter now accepts [x, y, z] normalized coordinates and axis now accepts 'z' for 3D grid origins
    • New jitter parameter to add a random offset to staggered values, either a single number or a [start, end] range
    • New seed parameter to make jitter and from: 'random' reproducible

Bug Fixes and improvements

  • Color
    • Color animations now blend RGB channels in pseudo-linear space for smoother, more even transitions (intermediate colors differ slightly from previous versions)
  • Render
    • Fix a flicker that could appear randomly between iterations of reversed loops
    • Fix a flicker that could appear randomly on alternate loops when using non-integer duration values
  • Timeline
    • Fix a backward seek leaving a timeline child stuck at its end value when all its properties share the same delay
    • Fix a timeline child whose delay is longer than its duration overwriting a later sibling's value on a forward seek
    • Fix stale values when seeking a timeline whose children animate the same property through delayed tweens, most visible with staggered jitter delays
    • Fix an implicit from value resolving to a stale value when an overridden tween sits earlier in the chain
    • Improve performance when building large timelines with many overlapping .add() calls on the same property, and fix a case where such a timeline could cancel itself
  • Keyframes
    • Fix a floating point precision issue producing incorrect intermediate values in keyframe arrays
    • Fix scrubbing backward past the start of a keyframe sequence not restoring the first keyframe's from value
    • Fix scrubbing forward past the end of a keyframe sequence leaving the target stuck on a previous keyframe's value
    • Fix sequential keyframes occasionally detected as overlapping because of floating point drift, leaving the target stuck on the wrong value when scrubbing
  • Animation
    • Fix function-based and CSS variable from values in object form ({ from, to }) not re-resolving on refresh()
    • Fix stretch() not correctly scaling animations that use keyframes
  • Scroll
    • Fix a getBoundingClientRect crash that could happen when a scroll container resized before its target was ready
  • Engine
    • More accurate frame scheduling that no longer drops frames arriving slightly early because of requestAnimationFrame jitter
    • Faster engine.speed and engine.timeUnit updates that skip unnecessary work when the value does not actually change
8 hours ago
swc
swc-project

v1.15.43-nightly-20260622.1

9 hours ago
react-flow
wbkd

@xyflow/system@0.0.78

Patch Changes

  • #5806 ceb8604 - Reduce allocations in getNodesInside by testing nodes against the viewport without building a Rect per node

  • #5815 87da45c - Fix FinalConnectionState type so it preserves the discriminated union.

9 hours ago
xyflow
wbkd

@xyflow/react@12.11.1

Patch Changes

  • #5815 87da45c - Fix FinalConnectionState type so it preserves the discriminated union.

  • #5823 a6afc91 - Update attribution link

  • #5824 6b1dac5 - Do not fire on pane click when connection ends on pane

  • #5818 4ddc2d8 - Provide the shared handle config (connectOnClick, noPanClassName, rfId) through context instead of subscribing to the store in every Handle, so a store update no longer runs a selector once per handle

  • #5817 8df250b - Reduce per-handle work on store updates by returning a shared connection state while no connection is in progress.

  • #5822 a6249de - Return stable reference for edge position when connected node gets deleted

  • Updated dependencies [ceb8604, 87da45c]:

    • @xyflow/system@0.0.78
9 hours ago
react-flow
wbkd

@xyflow/svelte@1.6.1

Patch Changes

  • #5815 87da45c - Fix FinalConnectionState type so it preserves the discriminated union.

  • #5823 a6afc91 - Update attribution link

  • #5824 6b1dac5 - Do not fire on pane click when connection ends on pane

  • Updated dependencies [ceb8604, 87da45c]:

    • @xyflow/system@0.0.78
9 hours ago
react-flow
wbkd

@xyflow/react@12.11.1

Patch Changes

  • #5815 87da45c - Fix FinalConnectionState type so it preserves the discriminated union.

  • #5823 a6afc91 - Update attribution link

  • #5824 6b1dac5 - Do not fire on pane click when connection ends on pane

  • #5818 4ddc2d8 - Provide the shared handle config (connectOnClick, noPanClassName, rfId) through context instead of subscribing to the store in every Handle, so a store update no longer runs a selector once per handle

  • #5817 8df250b - Reduce per-handle work on store updates by returning a shared connection state while no connection is in progress.

  • #5822 a6249de - Return stable reference for edge position when connected node gets deleted

  • Updated dependencies [ceb8604, 87da45c]:

    • @xyflow/system@0.0.78
9 hours ago
xyflow
wbkd

@xyflow/system@0.0.78

Patch Changes

  • #5806 ceb8604 - Reduce allocations in getNodesInside by testing nodes against the viewport without building a Rect per node

  • #5815 87da45c - Fix FinalConnectionState type so it preserves the discriminated union.