Skip to content

fix(deps): update mantine (major) #245

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(deps): update mantine (major) #245

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented May 21, 2023 •
edited
Loading

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mantine/core (source) 4.2.12 -> 8.0.1 age adoption passing confidence
@mantine/hooks (source) 4.2.12 -> 8.0.1 age adoption passing confidence
@mantine/prism (source) 4.2.12 -> 6.0.22 age adoption passing confidence
gatsby-plugin-mantine (source) 4.0.0 -> 5.0.0 age adoption passing confidence

Release Notes

mantinedev/mantine (@​mantine/core)

v8.0.1

Compare Source

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

Full Changelog: mantinedev/mantine@8.0.0...8.0.1

v8.0.0: 🌶️

Compare Source

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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;mantine/core';
import { TimeValue } from '@&#8203;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 '@&#8203;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 '@&#8203;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.

CodeHighlight with shiki

You can now use CodeHighlight component with shiki.

Shiki library provides the most advanced syntax highlighting
for TypeScript and CSS/Sass code. It uses textmate grammars to highlight code (same as in VSCode).
Shiki adapter is recommended if you need to highlight advanced TypeScript (generics, jsx nested in props) or CSS code (custom syntaxes, newest features).
Shiki adapter is used for all code highlighting in Mantine documentation.

To use shiki adapter, you need to install shiki package:

yarn add shiki

Then wrap your app with CodeHighlightAdapterProvider and provide createShikiAdapter as adapter prop:

import { MantineProvider } from '@&#8203;mantine/core';
import { CodeHighlightAdapterProvider, createShikiAdapter } from '@&#8203;mantine/code-highlight';

// Shiki requires async code to load the highlighter
async function loadShiki() {
  const { createHighlighter } = await import('shiki');
  const shiki = await createHighlighter({
    langs: ['tsx', 'scss', 'html', 'bash', 'json'],
    themes: [],
  });

  return shiki;
}

const shikiAdapter = createShikiAdapter(loadShiki);

function App() {
  return (
    <MantineProvider>
      <CodeHighlightAdapterProvider adapter={shikiAdapter}>
        {/* Your app here */}
      </CodeHighlightAdapterProvider>
    </MantineProvider>
  );
}

After that, you can use CodeHighlight component in your application:

import { CodeHighlight } from '@&#8203;mantine/code-highlight';

const exampleCode = `
type FilterPropsRes<T extends Record<string, any>> = {
  [Key in keyof T]-?: T[Key] extends undefined ? never : T[Key];
};

export function filterProps<T extends Record<string, any>>(props: T) {
  return Object.keys(props).reduce<FilterPropsRes<T>>((acc, key: keyof T) => {
    if (props[key] !== undefined) {
      acc[key] = props[key];
    }
    return acc;
  }, {} as FilterPropsRes<T>);
}
`;

function Demo() {
  return <CodeHighlight code={exampleCode} language="tsx" radius="md" />;
}
Carousel changes

@​mantine/carousel package was updated to use the latest version of
embla-carousel-react package. This update includes breaking changes:

  • speed and draggable props were removed – they are no longer supported by embla-carousel-react
  • It is now required to install both embla-carousel and embla-carousel-react packages explicitly
  • useAnimationOffsetEffect hook was removed – the issue it addressed was fixed in embla-carousel-react
  • Embla type export was removed, you should use EmblaCarouselType from embla-carousel instead
  • Props that were previously passed to embla are now grouped under emblaOptions prop

Follow the 7.x → 8.x migration guide to update your application to use the latest version of @mantine/carousel.

Switch withThumbIndicator

Switch component styles were updated to include indicator inside the thumb.
You can change it by setting withThumbIndicator prop:

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

function Demo() {
  return (
    <Switch
      defaultChecked
      label="I agree to sell my privacy"
    />
  );
}
Theme types augmentation

You can now augment spacing, radius, breakpoints, fontSizes, lineHeights,
and shadows types. To learn more about this feature, follow this guide.

Example of types augmentation for spacing and radius:

import {
  DefaultMantineSize,
  MantineThemeSizesOverride,
} from '@&#8203;mantine/core';

type ExtendedCustomSpacing =
  | 'xxl'
  | 'xxxs'
  | DefaultMantineSize;

type ExtendedCustomRadius =
  | 'xxs'
  | DefaultMantineSize;

declare module '@&#8203;mantine/core' {
  export interface MantineThemeSizesOverride {
    spacing: Record<ExtendedCustomSpacing, string>;
    radius: Record<ExtendedCustomRadius, string>;
  }
}
Other changes
  • Kbd component now supports size prop
  • DateInput component no longer supports preserveTime prop, use different component to capture time values
  • ScrollArea component no longer has forced display: table styles on the wrapper element of the content. It also now supports content Styles API selector to apply styles to the content element.
  • Image component no longer includes flex: 0 styles by default
  • SegmentedControl default height values were changed to match sizes of Input components
  • Type of wrapperProps prop in all components that support it (Checkbox, Radio, Chip, most inputs) was changed to more strict type
  • Portal component now has reuseTargetNode prop enabled by default
  • use-form setFieldValue handler types are now stricter
  • Menu.Item no longer has data-hovered attribute, use :hover and :focus selectors instead to apply styles
  • use-os now supports Chrome OS detection, its return type now includes chromeos value in the union
  • The default eye dropper icon of ColorInput component was updated
  • The default spacing of Notification component was increased
New Contributors

Full Changelog: mantinedev/mantine@7.17.6...8.0.0

v7.17.7

Compare Source

v7.17.6: 7.17.7

Compare Source

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

Full Changelog: mantinedev/mantine@7.17.5...7.17.6

v7.17.5

Compare Source

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

Full Changelog: mantinedev/mantine@7.17.4...7.17.5

v7.17.4

Compare Source

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

Full Changelog: mantinedev/mantine@7.17.3...7.17.4

v7.17.3

Compare Source

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

Full Changelog: mantinedev/mantine@7.17.2...7.17.3

v7.17.2

Compare Source

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

Full Changelog: mantinedev/mantine@7.17.1...7.17.2

v7.17.1

Compare Source

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

Full Changelog: mantinedev/mantine@7.17.0...7.17.1

v7.17.0: 🌶️

Compare Source

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:

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 '@&#8203;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 '@&#8203;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 '@&#8203;tabler/icons-react';
import { ActionIcon, Button, Group, Switch, Text, TextInput } from '@&#8203;mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@&#8203;mantine/form';
import { randomId } from '@&#8203;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 '@&#8203;mantine/core';
import { formRootRule, isNotEmpty, useForm } from '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;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 '@&#8203;mantine/core';
import { useFileDialog } from '@&#8203;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
Other changes
  • Tooltip now supports customizing middlewares
  • ScrollArea now supports overscrollBehavior prop
  • Affix now supports theme.spacing values for position prop
  • Anchor now supports underline="not-hover" option to display underline only when the link is not hovered

v7.16.3

Compare Source

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

Full Changelog: mantinedev/mantine@7.16.2...7.16.3

v7.16.2

Compare Source

What's Changed
  • [@mantine/core] Tooltip: Migrate from deprecated useDelayGroupContext hook to useDelayGroup
  • [@mantine/core] Tabs: Fix tabIndex={0} set on Tabs.Tab being ignored (#​7407)
  • [@mantine/core] Fix chevron icon not being clickable in Select and MultiSelect components (#​7395)
  • [@mantine/dates] MonthPicker: Fix infinite useEffect with use-form in some cases (#​7389)
  • [@mantine/hooks] use-hotkeys: Add better support for non-QUERTY keyboards (#​7390)
  • [@mantine/dates] DateTimePicker: Fix timezone conversion being applied twice (#​7400)
  • [@mantine/hooks] Fix potential dangerous access of ref value in useEffect cleanup (#​7404)
New Contributors

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

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

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({
    sel

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](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/operate-first/operate-first.github.io).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNS45Ny4wIiwidXBkYXRlZEluVmVyIjoiNDAuMTYuMCIsInRhcmdldEJyYW5jaCI6Im1haW4ifQ==-->

@netlify
Copy link

netlify bot commented May 21, 2023 •
edited
Loading

❌ Deploy Preview for operate-first-cloud failed.

Name Link
🔨 Latest commit b6994c9
🔍 Latest deploy log https://app.netlify.com/sites/operate-first-cloud/deploys/6479ca645be95300085ff6ba

@op1st-prow
Copy link

op1st-prow bot commented May 21, 2023

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign schwesig for approval. For more information see the Kubernetes Code Review Process.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

@op1st-prow op1st-prow bot added the size/XL Denotes a PR that changes 500-999 lines, ignoring generated files. label May 21, 2023
@renovate
Update mantine
b6994c9 
Signed-off-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
@renovate renovate bot force-pushed the renovate/major-mantine branch from 1573ddf to b6994c9 Compare June 2, 2023 10:54
@renovate
Copy link
Contributor Author

renovate bot commented Sep 21, 2023 •
edited
Loading

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from @mantine/[email protected]
npm ERR! node_modules/@mantine/hooks
npm ERR!   @mantine/hooks@"7.9.0" from the root project
npm ERR!   peer @mantine/hooks@"7.9.0" from @mantine/[email protected]
npm ERR!   node_modules/@mantine/core
npm ERR!     @mantine/core@"7.9.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /tmp/renovate/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/renovate/cache/others/npm/_logs/2024-05-09T06_46_39_016Z-debug-0.log

@renovate renovate bot changed the title Update mantine (major) fix(deps): update mantine (major) Nov 6, 2023
@renovate Renovate
Copy link
Contributor Author

renovate bot commented May 9, 2024 •
edited
Loading

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"17.0.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.x || ^19.x" from @mantine/[email protected]
npm ERR! node_modules/@mantine/hooks
npm ERR!   @mantine/hooks@"8.0.1" from the root project
npm ERR!   peer @mantine/hooks@"8.0.1" from @mantine/[email protected]
npm ERR!   node_modules/@mantine/core
npm ERR!     @mantine/core@"8.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /runner/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /runner/cache/others/npm/_logs/2025-05-23T13_11_49_135Z-debug-0.log

@renovate renovate bot changed the title fix(deps): update mantine (major) fix(deps): update dependency @mantine/prism to v6 Dec 8, 2024
@renovate renovate bot changed the title fix(deps): update dependency @mantine/prism to v6 fix(deps): update mantine (major) Dec 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
size/XL Denotes a PR that changes 500-999 lines, ignoring generated files.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants