8.0.1

What's Changed

• [@mantine/hooks] use-debounced-callback: Add leading: true option support (#7841)
• [@mantine/core] Tabs: Fix incorrect Tabs.List styles with grow prop enabled
• [@mantine/core] MutltiSelect: Fix onPaste prop not being passed to the input element (#7838)
• [@mantine/dates] TimePicker: Fix up/down arrows not working correctly with step prop (#7784)
• [@mantine/core] Button: Fix FileButton breaking Button.Group styles (#7835)
• [@mantine/core] Modal Fix incorrect header styles with ScrollArea (#7832)
• [@mantine/dropzone] Fix status being stuck in rejected state when a file with incorrect mime type is dropped
• [@mantine/core] Switch: Fix incorrect thumb position in RTL layouts (#7822)
• [@mantine/core] AngleSlider: Fix incorrect thumb position in RTL layouts (#7822)
• [@mantine/core] Menu: Fix default props not working in Menu.Sub (#7820)
• [@mantine/core] Disable scaling explicit rem units in rem function (#7821)
• [@mantine/core] Slider: Fix incorrect track width (#7464)
• [@mantine/dates] TimeInput: Fix step prop not working (#7811)
• [@mantine/core] Select: Fix onSearchChange being triggered when controlled search value is updated (#7814)
• [@mantine/dropzone] Migrate back to react-dropzone from react-dropzone-esm
• [@mantine/code-highlight] Fix tooltip being cut off in components with 1-2 lines of code (#7816)
• [@mantine/core] Fix inconsistent disabled styles in some components, add CSS variables for disabled colors (#7805)
• [@mantine/dates] DatePicker: Add selected date highlight in year and month picker for type="default" (#7799)
• [@mantine/core] Table: Add scrollAreaProps support to Table.ScrollContainer (#7798)
• [@mantine/core] Fix boolean value not being included in data-* attributes types (#7810)
• [@mantine/dates] DateInput: Fix incorrect onChange value type (#7796)
• [@mantine/core] Stepper: Fix unexpected bottom spacing in vertical orientation (#7794)
• [@mantine/core] PasswordInput: Fix aria-describedby not pointing to error and description elements (#7793)
• [@mantine/core] Switch: Fix div element used inside label (#7776)
• [@mantine/dates] Add empty string handling as empty value (#7780)
• [@mantine/core] Collapse: Fix children with scale animations not working correctly when collapse is opened (#7774)
• [@mantine/core] Transition: Fix exitDuration not working correctly for rapid changes (#7773)
• [@mantine/dates] TimePicker: Fix 00 in dropdown not being reachable with arrow keys when it is outside scroll position (#7788)
• [@mantine/core] Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)
• [@mantine/core] Stepper: Fix inconsistent border color in horizontal/vertical orientation (#7795)

New Contributors

• @mikkurogue made their first contribution in #7780
• @kawarimidoll made their first contribution in #7807
• @codjix made their first contribution in #7804
• @GermainBergeron made their first contribution in #7805
• @kaareal made their first contribution in #7814
• @Bvngee made their first contribution in #7464
• @russellbanks made their first contribution in #7820
• @jonjomckay made their first contribution in #7841

Full Changelog: 8.0.0...8.0.1

8.0.0 🌶️

View changelog with demos on mantine.dev website

Migration guide

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

Granular global styles exports

Global styles are now splitted between 3 files:

• baseline.css – a minimal CSS reset, sets box-sizing: border-box and changes font properties
• default-css-variables.css – contains all CSS variables generated from the default theme
• global.css – global classes used in Mantine components

If you previously imported individual styles from @mantine/core package, you need to update imports
to use new files:

import '@mantine/core/styles/baseline.css';
import '@mantine/core/styles/default-css-variables.css';
import '@mantine/core/styles/global.css';

If you imported @mantine/core/styles.css, no changes are required –
all new files are already included in styles.css.

Menu with submenus

Menu component now supports submenus:

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

function Demo() {
  return (
    <Menu width={200} position="bottom-start">
      <Menu.Target>
        <Button>Toggle Menu</Button>
      </Menu.Target>

      <Menu.Dropdown>
        <Menu.Item>Dashboard</Menu.Item>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Products</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>All products</Menu.Item>
            <Menu.Item>Categories</Menu.Item>
            <Menu.Item>Tags</Menu.Item>
            <Menu.Item>Attributes</Menu.Item>
            <Menu.Item>Shipping classes</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Orders</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Open</Menu.Item>
            <Menu.Item>Completed</Menu.Item>
            <Menu.Item>Cancelled</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>

        <Menu.Sub>
          <Menu.Sub.Target>
            <Menu.Sub.Item>Settings</Menu.Sub.Item>
          </Menu.Sub.Target>

          <Menu.Sub.Dropdown>
            <Menu.Item>Profile</Menu.Item>
            <Menu.Item>Security</Menu.Item>
            <Menu.Item>Notifications</Menu.Item>
          </Menu.Sub.Dropdown>
        </Menu.Sub>
      </Menu.Dropdown>
    </Menu>
  );
}

Popover hideDetached

Popover component now supports hideDetached prop to configure how the dropdown behaves when the target
element is hidden with styles (display: none, visibility: hidden, etc.),
removed from the DOM, or when the target element is scrolled out of the viewport.

By default, hideDetached is enabled – the dropdown is hidden with the target element.
You can change this behavior with hideDetached={false}. To see the difference, try to scroll
the root element of the following demo:

import { Box, Button, Group, Popover } from '@mantine/core';

function Demo() {
  return (
    <Box
      bd="1px solid var(--mantine-color-dimmed)"
      p="xl"
      w={400}
      h={200}
      style={{ overflow: 'auto' }}
    >
      <Box w={1000} h={400}>
        <Group>
          <Popover width="target" position="bottom" opened>
            <Popover.Target>
              <Button>Toggle popover</Button>
            </Popover.Target>
            <Popover.Dropdown>This popover dropdown is hidden when detached</Popover.Dropdown>
          </Popover>

          <Popover width="target" position="bottom" opened hideDetached={false}>
            <Popover.Target>
              <Button>Toggle popover</Button>
            </Popover.Target>
            <Popover.Dropdown>This popover dropdown is visible when detached</Popover.Dropdown>
          </Popover>
        </Group>
      </Box>
    </Box>
  );
}

Date values as strings

All @mantine/dates components now use date strings in YYYY-MM-DD or YYYY-MM-DD HH:mm:ss
format instead of Date objects. This change was made to resolve issues related to timezones
– now the output of all @mantine/dates components does not include any timezone-specific information.
Follow 7.x → 8.x migration guide to learn how to update the code to use new string values.

Example of using DatePicker component with string values:

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

function Demo() {
  const [value, setValue] = useState<string | null>(null);
  return <DatePicker value={value} onChange={setValue} />;
}

DatesProvider timezone

DatesProvider component no longer supports timezone option – all @mantine/dates
components now use strings in YYYY-MM-DD HH:mm:ss format as values and do not contain
timezone information.

If you need to handle timezones in your application, you can use a dedicated dates library
(dayjs, luxon, date-fns)
to update timezone values.

Example of using Mantine components with dayjs:

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

function Demo() {
  const [value, setValue] = useState<string | null>('2022-08-21');

  // Mantine components use strings as values, you can pass these
  // strings to a dates library of your choice to assign timezone
  const dateWithTimeZone = dayjs(value).tz("America/Toronto").toDate();

  return <DatePicker value={value} onChange={setValue} />;
}

TimePicker component

New TimePicker component is an alternative to
TimeInput that offers more features. It supports 24-hour and 12-hour formats,
dropdown with hours, minutes and seconds, and more.

import { TimePicker } from '@mantine/dates';

function Demo() {
  return (
    <>
      <TimePicker label="Enter time (24h format)" withSeconds withDropdown />
      <TimePicker label="Enter time (12h format)" withSeconds withDropdown format="12h" mt="md" />
    </>
  );
}

DateTimePicker component changes

DateTimePicker component now uses TimePicker under
the hood instead of TimeInput. You can now use all TimePicker
features with DateTimePicker component.

Prop timeInputProps is no longer available, to pass props down to the underlying TimePicker
you need to use timePickerProps prop.

Example of enabling dropdown and setting 12h format for time picker:

import { DateTimePicker } from '@mantine/dates';

function Demo() {
  return (
    <DateTimePicker
      label="Pick date and time"
      placeholder="Pick date and time"
      timePickerProps={{
        withDropdown: true,
        popoverProps: { withinPortal: false },
        format: '12h',
      }}
    />
  );
}

TimeValue component

New TimeValue component can be used to display a formatted time string
with similar formatting options to TimePicker component.

import { Text } from '@mantine/core';
import { TimeValue } from '@mantine/dates';

function Demo() {
  return (
    <div>
      <Text>
        24h format: <TimeValue value="18:45:34" />
      </Text>
      <Text>
        12h format: <TimeValue value="18:45:34" format="12h" />
      </Text>
    </div>
  );
}

TimeGrid component

New TimeGrid component allows to capture time value from the user with a
predefined set of time slots:

import { getTimeRange, TimeGrid } from '@mantine/dates';

function Demo() {
  return (
    <TimeGrid
      data={getTimeRange({ startTime: '10:00', endTime: '21:00', interval: '01:00' })}
      simpleGridProps={{
        type: 'container',
        cols: { base: 1, '180px': 2, '320px': 3 },
        spacing: 'xs',
      }}
      withSeconds={false}
    />
  );
}

Heatmap component

New Heatmap component allows to display data in a calendar heatmap format:

import dayjs from 'dayjs';
import { Heatmap } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <Heatmap
      data={data}
      startDate="2024-02-16"
      endDate="2025-02-16"
      withTooltip
      withWeekdayLabels
      withMonthLabels
      getTooltipLabel={({ date, value }) =>
        `${dayjs(date).format('DD MMM, YYYY')} – ${value === null || value === 0 ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
      }
    />
  );
}

CodeHighlight changes

@mantine/code-highlight package no longer depends on
highlight.js. Instead, it now provides a new API based
on adapters that allows using any syntax highlighter of your choice. Out of the box,
@mantine/code-highlight provides adapters for shiki and
highlight.js.

To learn about the migration process and how to use the new adapters API, check the
updated CodeHighlight documentation and [7.x → 8.x migration guide](...

7.17.7

What's Changed

• [@mantine/core] Table: Fix stickyHeader prop having impact on th selector specificity (#7767)
• [@mantine.core] NumberInput: Fix max prop not reseting value on blur if the value is larger than Number.MAX_SAFE_INTEGER (#7766)
• [@mantine.hook] use-resize-observer: Fix width/height not being calculated correctly for elements with box-sizing: content-box (#7764)
• [@mantine/core] NavLink: Fix rightSection={null} not disabling chevron
• [@mantine.hook] use-hotkeys: Fix usePhysicalKeys option not working with spacial keys (#7761)
• [@mantine/core] Modal: Fix scrollarea used inside the modal affecting the position of the close button (#7738)
• [@mantine/core] Select: Fix defined defaultValue being ignored with data updates (#7742)
• [@mantine/core] ScrollArea: Fix content overflowing the viewport in some cases (#7748)
• [@mantine/charts] RadarChart: Add tooltip and dots support (#7749)
• [@mantine/modals] Fix confirmProps not available in updateModal function (#7750)
• [@mantine/hooks] use-debounced-callback: Fix flushOnUnmount not working (#7745)
• [@mantine/core] Table: Add missing TableScrollContainerProps export

New Contributors

• @gfazioli made their first contribution in #7740
• @LilyStilson made their first contribution in #7749

Full Changelog: 7.17.5...7.17.6

7.17.5

What's Changed

• [@mantine/form] Add form.getInitialValues handler
• [@mantine/core] RangeSlider: Fix first thumb not being focused when the component root is clicked (#7731)
• [@mantine/core] PillsInput: Remove lefover multiline prop types (#7727)
• [@mantine/charts] CompositeChart: Fix type="stacked" being confused with BarChart behavior
• [@mantine/core] Notification: Allow changing role attribute on the root element (#7682)
• [@mantine/hooks] use-idle: Fix wheel event not being tracked (#7669)
• [@mantine/core] Table: Add maxHeight prop support to Table.ScrollContainer (#7713)
• [@mantine/core] Modal: Fix incorrect Escape key handling during IME composition (#7700)
• [@mantine/form] Add defaultChecked to form.getInputProps return type (#7702)
• [@mantine/hooks] use-hotkeys: Update matching logic to include both physical and layout keys (#7708)
• [@mantine/dates] Fix day.js isSame function not working correctly for non-Gregorian calendars (#7712)
• [@mantine.core] SegmentedControl: Fix animation not working with controlled value (#7721)

New Contributors

• @danielytics made their first contribution in #7708
• @tvandoren made their first contribution in #7702
• @AliAkrem made their first contribution in #7669
• @scato3 made their first contribution in #7739

Full Changelog: 7.17.4...7.17.5

7.17.4

What's Changed

• [@mantine/hooks] use-orientation: Add option to customize initial values (#7657)
• [@mantine/core] Fix selectFirstOptionOnChange not working correctly (#7583)
• [@mantine/core] Fix error thrown when Textarea was used on cloudflare workers (#7637)
• [@mantine/core] Allow spacing, radius and font-size types augmentation (#7644)
• [@mantine/core] ScrollArea: Fix scrollbars being invisible when offsetScrollbars='present' is not set (#7647)
• [@mantine/core] TypographyStylesProvider: Fix headings font-family not matching the value defined on the theme (#7651)
• [@mantine/core] Paper: Add CSS variable for border-color for easier overrides (#7654)
• [@mantine/core] Table: Fix stickyHeader prop affecting border rendering (#7658)
• [@mantine/core] Slider: Fix onChangeEnd using stale external state (#7660)

New Contributors

• @Han5991 made their first contribution in #7660
• @WojakGra made their first contribution in #7658
• @drew-r made their first contribution in #7651
• @mark-night made their first contribution in #7644
• @Odonno made their first contribution in #7636

Full Changelog: 7.17.3...7.17.4

7.17.3

What's Changed

• [@mantine/core] Pill: Fix incorrect removeButtonProps type
• [@mantine/modals] Fix data-* attributes not being included in types for confirm and cancel button props
• [@mantine/core] Fix incorrect selected option position handling when search changes in Select, MultiSelect, Autocomplete and TagsInput (#7583)
• [@mantine/core] SegmentedControl: Fix incorrect indicator position when data is updated (#7615)
• [@mantine/core] ScrollArea: Fix scrollbars being revealed on hover when hidden with offsetScrollbars="present" (#7599)
• [@mantine/core] AppShell: Fix disabled prop not removing aside and footer margins (#7609)
• [@mantine/modals] Fix incorrect esm exports paths (#7603)
• [@mantine/core] Checkbox: Set indeterminate attribute on the DOM node (#7608, #7613)

New Contributors

• @andrewborstein made their first contribution in #7613
• @connorads made their first contribution in #7603
• @ofk made their first contribution in #7609

Full Changelog: 7.17.2...7.17.3

7.17.2

What's Changed

• [@mantine/core] Menu: Fix missing withProps function
• [@mantine/core] Transition: Fix 1px child elements shift in Chrome for animations with scaling
• [@mantine/core] ScrollArea: Add offsetScrollbars="present" option support (#7527)
• [@mantine/core] Notification: Add loaderProps to pass props down to Loader component (#7577)
• [@mantine/core] Tooltip: Fix ref prop not working correctly on the child element of the tooltip (#7578)
• [@mantine/core] Select: Fix dropdown not openning in Firefox (#7539)

New Contributors

• @yushihang made their first contribution in #7579

Full Changelog: 7.17.1...7.17.2

7.17.1

What's Changed

• [@mantine/core] Select: Fix caret displayed when the readonly input is clicked (#7476)
• [@mantine/charts] Fix incorrect types of classNames prop of PieChart and DonutChart components (#7475)
• [@mantine/charts] BubbleChart: Fix broken layout when label prop is used with React 19
• [@mantine/form] Fix missing isJSONString export (#7508)
• [@mantine/core] Fix MultiSelect and TagsInputs dropdowns still being opened on click when components were used inside disabled fieldset (#7528)
• [@mantine/code-highlight] Fallback unsupported code to plaintext (#7497)
• [@mantine/emotion] Improve "Go to definition" support for createStyles classes (#7526)

New Contributors

• @kino90 made their first contribution in #7513
• @tranhl made their first contribution in #7526
• @imcvampire made their first contribution in #7497
• @ched-dev made their first contribution in #7480
• @ysalo made their first contribution in #7508

Full Changelog: 7.17.0...7.17.1

7.17.0 🌶️

View changelog with demos on mantine.dev website

Last 7.x minor release

This is the last minor release in the 7.x series. The next release will be 8.0 with breaking changes and new features.

You are welcome to review the changelog/code and provide feedback and bug reports in Discord or GitHub discussions:

• Changelog – https://alpha.mantine.dev/changelog/8-0-0/
• Source code – https://github.com/mantinedev/mantine/tree/8.0

How to update your project dependencies to the new alpha version:

• Open your package.json
• Find all @mantine/ packages
• Update version of all @mantine/ packages to 8.0.0-alpha.0
• Install dependencies with your package manager, for example, yarn or npm install

Important notes:

• 8.0 release is scheduled for May 5th. Until then you can influence the included breaking changes by proving feedback using Discord or GitHub discussions.
• Currently most of planned breaking changes are implemented – it is not planned to introduce other significant breaking changes (unless new versions of recharts or tiptap are released before May 5th).
• You can find the updated source code in 8.0 branch on GitHub
• Since the changes to codebase are not that significant compared to previous major releases, it is not planned to deprecate 7.x version as soon as 8.0 is release. 7.17.x patches are planned to be released for some time – if you are not ready to migrate to 8.x, you will still be able to receive bug fixes for 7.x (no new features though).

---

Portal reuseTargetNode prop

Portal component now supports reuseTargetNode prop which allows to reuse the same target node for all instances.
This option is more performant than the previous behavior, it is recommended to be enabled.
This option will be enabled by default in the 8.0 major release.

To enable reuseTargetNode option in all components that depend on Portal, add the following code
to your theme:

import { createTheme, Portal } from '@mantine/core';

export const theme = createTheme({
  components: {
    Portal: Portal.extend({
      defaultProps: {
        reuseTargetNode: true,
      },
    }),
  },
});

Example usage. In the following example, all three paragraphs will be rendered in the same target node:

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

function Demo() {
  return (
    <>
      <Portal reuseTargetNode>
        <p>First</p>
      </Portal>

      <Portal reuseTargetNode>
        <p>Second</p>
      </Portal>

      <Portal reuseTargetNode>
        <p>Third</p>
      </Portal>
    </>
  );
}

use-form formRootRule

formRootRule is a special rule path that can be used to validate objects and arrays
alongside with their nested fields. For example, it is useful when you want to capture
a list of values, validate each value individually and then validate the list itself
to not be empty:

import { IconTrash } from '@tabler/icons-react';
import { ActionIcon, Button, Group, Switch, Text, TextInput } from '@mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@mantine/form';
import { randomId } from '@mantine/hooks';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      employees: [{ name: '', active: false, key: randomId() }],
    },
    validate: {
      employees: {
        [formRootRule]: isNotEmpty('At least one employee is required'),
        name: isNotEmpty('Name is required'),
      },
    },
  });

  const fields = form.getValues().employees.map((item, index) => (
    <Group key={item.key} mt="xs">
      <TextInput
        placeholder="John Doe"
        withAsterisk
        style={{ flex: 1 }}
        key={form.key(`employees.${index}.name`)}
        {...form.getInputProps(`employees.${index}.name`)}
      />
      <Switch
        label="Active"
        key={form.key(`employees.${index}.active`)}
        {...form.getInputProps(`employees.${index}.active`, { type: 'checkbox' })}
      />
      <ActionIcon color="red" onClick={() => form.removeListItem('employees', index)}>
        <IconTrash size={16} />
      </ActionIcon>
    </Group>
  ));

  return (
    <form onSubmit={form.onSubmit(() => {})}>
      {fields.length > 0 ? (
        <Group mb="xs">
          <Text fw={500} size="sm" style={{ flex: 1 }}>
            Name
          </Text>
          <Text fw={500} size="sm" pr={90}>
            Status
          </Text>
        </Group>
      ) : (
        <Text c="dimmed" ta="center">
          No one here...
        </Text>
      )}

      {fields}

      {form.errors.employees && (
        <Text c="red" size="sm" mt="sm">
          {form.errors.employees}
        </Text>
      )}

      <Group justify="space-between" mt="md">
        <Button
          variant="default"
          onClick={() => {
            form.insertListItem('employees', { name: '', active: false, key: randomId() });
            form.clearFieldError('employees');
          }}
        >
          Add employee
        </Button>
        <Button type="submit">Submit</Button>
      </Group>
    </form>
  );
}

Another example is to validate an object fields combination:

import { Button, Text, TextInput } from '@mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      user: {
        firstName: '',
        lastName: '',
      },
    },

    validate: {
      user: {
        [formRootRule]: (value) =>
          value.firstName.trim().length > 0 && value.firstName === value.lastName
            ? 'First name and last name cannot be the same'
            : null,
        firstName: isNotEmpty('First name is required'),
        lastName: isNotEmpty('Last name is required'),
      },
    },
  });

  return (
    <form onSubmit={form.onSubmit(() => {})}>
      <TextInput
        label="First name"
        placeholder="First name"
        {...form.getInputProps('user.firstName')}
      />
      <TextInput
        label="Last name"
        placeholder="Last name"
        mt="md"
        {...form.getInputProps('user.lastName')}
      />
      {form.errors.user && (
        <Text c="red" mt={5} fz="sm">
          {form.errors.user}
        </Text>
      )}
      <Button type="submit" mt="lg">
        Submit
      </Button>
    </form>
  );
}

isJSONString and isNotEmptyHTML form validators

New isJSONString and isNotEmptyHTML form validators:

• isNotEmptyHTML checks that form value is not an empty HTML string. Empty string, string with only HTML tags and whitespace are considered to be empty.
• isJSONString checks that form value is a valid JSON string.

import { isJSONString, useForm } from '@mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: {
    json: '',
    html: '',
  },

  validate: {
    json: isJSONString('Invalid JSON string'),
    html: isNotEmptyHTML('HTML cannot be empty'),
  },
});

Popover onDismiss

Popover now supports onDismiss prop, which makes it easier
to subscribe to outside clicks and escape key presses to close popover:

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

function Demo() {
  const [opened, setOpened] = useState(false);
  return (
    <Popover opened={opened} onDismiss={() => setOpened(false)}>
      <Popover.Target>
        <Button onClick={() => setOpened((o) => !o)}>Toggle popover</Button>
      </Popover.Target>

      <Popover.Dropdown>Dropdown</Popover.Dropdown>
    </Popover>
  );
}

MantineProvider env

MantineProvider component now supports env prop.
It can be used in test environment to disable some features that
might impact tests and/or make it harder to test components:

• transitions that mount/unmount child component with delay
• portals that render child component in a different part of the DOM

To enable test environment, set env to test:

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

function Demo() {
  return <MantineProvider env="test">{/* Your app here */}</MantineProvider>;
}

use-file-dialog hook

New use-file-dialog allows capturing one or more files from the user
without file input element:

import { Button, Group, List } from '@mantine/core';
import { useFileDialog } from '@mantine/hooks';

function Demo() {
  const fileDialog = useFileDialog();

  const pickedFiles = Array.from(fileDialog.files || []).map((file) => (
    <List.Item key={file.name}>{file.name}</List.Item>
  ));

  return (
    <div>
      <Group>
        <Button onClick={fileDialog.open}>Pick files</Button>
        {pickedFiles.length > 0 && (
          <Button variant="default" onClick={fileDialog.reset}>
            Reset
          </Button>
        )}
      </Group>
      {pickedFiles.length > 0 && <List mt="lg">{pickedFiles}</List>}
    </div>
  );
}

Remix deprecation

Remix is deprecated, the documentation related to Remix integration
was removed, use React Router instead. To simplify maintenance,
Remix/React Router templates were archived and will not be updated.

Help center updates

• I get hydration warning about data-mantine-color-scheme attribute, what does it mean? question
• [...

7.16.3

What's Changed

• [@mantine/core] Remove use client from isLightColor function
• [@mantine/core] TextInput: Fix autocomplete for variant prop not working
• [@mantine/carousel] Fix aria-hidden warning displayed in Chrome console when indicator is clicked (#7414)
• [@mantine/core] Fix clear button overlaying input content in Autocomplete and other similar components (#7431)
• [@mantine/core] Combobox: Fix incorrect dropdown padding when used with ScrollArea (#7450)
• [@mantine/core] Fix 0 gradient deg value not working correctly (#7444)
• [@mantine/core] ScrollArea: Fix user-select being left as none after interaction with scrollbar in some edge cases (#7423)
• [@mantine/dates] DateInput: Fix infinite loop in Safari (#7442)

New Contributors

• @kingflamez made their first contribution in #7442
• @webkonstantin made their first contribution in #7423
• @marcinlukanus made their first contribution in #7444

Full Changelog: 7.16.2...7.16.3