A web-app built with next.js that can automatically install mods into a new Minecraft or MultiMC Launcher Profile using the File System Access API

Overview

Mod Installer

This is a Next.js App which automatically installs fabric mods on your PC and creates a Minecraft Launcher Profile for you.

Idea & Inspiration

This Project was highly inspired by the Innit.gg Installer made by Cubxity

Features

  • Configure multiple profiles with different mods as admin
  • Install mods in new Launcher Profile (with different gameDir)
  • copy options.txt and servers.dat into new gameDir
  • Make server list of created profile configurable
  • Manual install
  • MultiMC Support
  • Configurable Minecraft Version (and fetch fabric libraries from api)
  • Configure and show incompatible mods
  • Configure and show when a mod requires another mod
  • Admin Panel
  • User owned mod-lists (Thank you for the idea Marie)

I'm welcome to add stuff to this list (DM me on discord or create an issue)

Comments
  • Update Node.js to v19

    Update Node.js to v19

    Mend Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | node | final | major | 18-alpine -> 19-alpine | | node | stage | major | 18-alpine -> 19-alpine |


    Release Notes

    nodejs/node

    v19

    Moved to doc/changelogs/CHANGELOG_IOJS.md#​1.6.0.


    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.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 1
  • Update dependency @mantine/dropzone to v5.9.2 - autoclosed

    Update dependency @mantine/dropzone to v5.9.2 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/dropzone (source) | 5.5.5 -> 5.9.2 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.2

    Compare Source

    What's Changed
    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed
    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@​mantine/core';
    import { IconColorPicker } from '@​tabler/icons';
    import { useEyeDropper } from '@​mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    

    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    

    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    

    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    

    Other changes

    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed

    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed

    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed

    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    

    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed

    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed

    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    

    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    

    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    

    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    

    Other changes

    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed

    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed

    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    

    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    

    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    

    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    

    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed

    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6


    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.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


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

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency @mantine/notifications to v5 - autoclosed

    Update dependency @mantine/notifications to v5 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/notifications (source) | 4.2.12 -> 5.9.2 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.2

    Compare Source

    What's Changed

    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed

    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
    import { IconColorPicker } from '@&#8203;tabler/icons';
    import { useEyeDropper } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    

    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    

    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    

    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    

    Other changes

    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed
    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed
    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed

    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    

    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed

    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed

    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    

    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    

    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    

    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    

    Other changes

    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed

    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed
    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    
    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    
    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    
    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    
    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    
    Other changes
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed

    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6

    v5.5.5

    Compare Source

    What's Changed

    • [@mantine/core] NumberInput: Fix removeTrailingZeros prop not working for initial value (#​2638)
    • [@mantine/core] Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#​2669)
    • [@mantine/styles] Fix incorrect params handling in DefaultProps type in strict mode
    • [@mantine/core] Select: Fix component scrolling page when it is focused without any data or nothing found message (#​2628)
    • [@mantine/core] Fix Avatar and ThemeIcon components not respecting theme.defaultGradient (#​2649)
    • [@mantine/dates] Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
    • [@mantine/core] Menu: Close menu when target changes (#​2646)
    • [@mantine/hooks] use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5

    v5.5.4

    What was changed

    • [@mantine/core] ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
    • [@mantine/core] List: Fix styles params not being inherited by List.Item (#​2495)
    • [@mantine/core] Grid: Fix incorrect responsive offsets handling (#​2556)
    • [@mantine/core] Popover: Add option to configure focus returning logic with returnFocus prop
    • [@mantine/core] Popover: Fix onKeydownCapture prop overriding Escape key handler

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4

    v5.5.2

    Compare Source

    What's Changed
    • [@mantine/core] List: Fix incorrect list items styles (#​2624)
    • [@mantine/core] NumberInput: Fix incorrect removeTrailingZeros default prop value (#​2621)
    • [@mantine/core] ScrollArea: Fix incorrect thumb hover area (#​2610)
    • [@mantine/hooks] use-focus-trap: Fix incorrect focus trapping logic when setRef is called with null (#​2623)
    • [@mantine/core] Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
    • [@mantine/core] Remove unexpected styles from Checkbox, Radio and Switch components

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2

    v5.5.1

    Compare Source

    What's Changed
    • [@mantine/core] Fix incorrect selectors used to style Radio, Checkbox and Switch components
    • [@mantine/core] Input: Fix size not being applied when set from error props and descriptionProps (#​2603)
    • [@mantine/core] Fix incorrect loading state styles in Button and ActionIcon components (#​2618)
    • [@mantine/core] Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
    • [@mantine/core] Revert Collapse axis prop to avoid issues with regular Collapse
    • [@mantine/core] Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
    • [@mantine/core] MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#​2602)
    • [@mantine/core] Select: Fix incorrect dropdown opened state when input is clicked (#​2605)
    • [@mantine/core] List: Fix incorrect indentation for nested list items (#​2606)
    • [@mantine/core] SegmentedControl: Fix error with hook call order (#​2608)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1

    v5.5.0

    Compare Source

    View changelog with demos on mantine.dev website

    Global styles on theme

    You can now add global styles with theme.globalStyles, this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

    import { MantineProvider } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            globalStyles: (theme) => ({
              '*, *::before, *::after': {
                boxSizing: 'border-box',
              },
    
              body: {
                ...theme.fn.fontStyles(),
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
                lineHeight: theme.lineHeight,
              },
    
              '.your-class': {
                backgroundColor: 'red',
              },
    
              '#your-id > [data-active]': {
                backgroundColor: 'pink',
              },
            }),
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    
    form.setValues partial

    form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
    
    form.setValues({ name: 'John', age: 21 });
    form.values; // -> { name: 'John', email: '', age: 21 }
    
    Documentation updates
    Other changes
    • Checkbox indeterminate state now has separate styles for checked and unchecked states
    • Modal component now supports size="auto"
    • Checkbox, Radio and Switch components now support error, description and labelPosition props
    • Tooltip and Popover components now can be used with inline elements
    • Slider and RangeSlider components now support inverted prop
    • Collapse component now supports axis prop
    • Table component now supports withBorder and withColumnBorders props
    • NumberInput component now supports removeTrailingZeros prop
    • Popover and Menu components now support disabled prop
    • nprogress now supports new completeNavigationProgress handler
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.2...5.5.0

    v5.4.2

    Compare Source

    What's Changed

    • [@mantine/form] Add options argument support to joiResolver (#​2562)
    • [@mantine/carousel] Fix incorrect slidesToScroll type (#​2548)
    • [@mantine/carousel] Fix wrong carousel size calculation (#​2572)
    • [@mantine/core] Image: Allow src attribute to be null
    • [@mantine/core] Image: Fix race condition between hydration and image load event (#​629)
    • Fix incorrect types for static components (Navbar.Section, Tabs.Tab, etc.) for older versions of TypeScript

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.1...5.4.2

    v5.4.1

    Compare Source

    What's Changed

    • [@mantine/core] Grid: Fix offset={0} not working (#​2346)
    • [@mantine/core] SegmentedControl: Fix colors index reference not working
    • [@mantine/dropzone] Fix incorrect ref handling
    • [@mantine/core] Integrate Floating UI tooltip middleware in Tooltip, Popover and other components that are based on Popover (#​2521)
    • [@mantine/core] Fix missing ref type in components with static parts (#​2505)
    • [@mantine/core] Add data-disabled + change color when disabled on label to Switch and Checkbox components (#​2508)
    • [@mantine/nprogress] Add option to add aria-label (#​2526)
    • [@mantine/rte] Fix issue with ImageUploader index null error (#​2529)
    • [@mantine/hooks] use-local-storage: Fix incorrect method called when item is removed from local storage (#​2490)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.0...5.4.1

    v5.4.0

    Compare Source

    View changelog with demos on mantine.dev website

    validateInputOnBlur

    use-form now supports validateInputOnBlur option, it works similar to validateInputOnChange:

    import { useForm } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnBlur: ['name', 'email'],
        initialValues: { name: '', email: '', age: 0 },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
        },
      });
    
      return (
        <form onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Na
    
    </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.
    
    🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
    
    ---
    
     - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
    
    ---
    
    This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/StckOverflw/mod-installer).
    <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4yMzcuMCIsInVwZGF0ZWRJblZlciI6IjM0LjQ4LjQifQ==-->
    
    opened by renovate[bot] 0
  • Update dependency @mantine/next to v5 - autoclosed

    Update dependency @mantine/next to v5 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/next (source) | 4.2.12 -> 5.9.2 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.2

    Compare Source

    What's Changed
    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed
    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
    import { IconColorPicker } from '@&#8203;tabler/icons';
    import { useEyeDropper } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    
    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    
    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    
    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    
    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    
    Other changes
    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed

    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed

    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed

    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    
    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed

    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed

    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    

    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    

    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    

    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    

    Other changes

    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed

    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed

    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    

    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    

    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    

    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    

    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed
    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6

    v5.5.5

    Compare Source

    What's Changed

    • [@mantine/core] NumberInput: Fix removeTrailingZeros prop not working for initial value (#​2638)
    • [@mantine/core] Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#​2669)
    • [@mantine/styles] Fix incorrect params handling in DefaultProps type in strict mode
    • [@mantine/core] Select: Fix component scrolling page when it is focused without any data or nothing found message (#​2628)
    • [@mantine/core] Fix Avatar and ThemeIcon components not respecting theme.defaultGradient (#​2649)
    • [@mantine/dates] Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
    • [@mantine/core] Menu: Close menu when target changes (#​2646)
    • [@mantine/hooks] use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5

    v5.5.4

    What was changed

    • [@mantine/core] ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
    • [@mantine/core] List: Fix styles params not being inherited by List.Item (#​2495)
    • [@mantine/core] Grid: Fix incorrect responsive offsets handling (#​2556)
    • [@mantine/core] Popover: Add option to configure focus returning logic with returnFocus prop
    • [@mantine/core] Popover: Fix onKeydownCapture prop overriding Escape key handler

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4

    v5.5.2

    Compare Source

    What's Changed

    • [@mantine/core] List: Fix incorrect list items styles (#​2624)
    • [@mantine/core] NumberInput: Fix incorrect removeTrailingZeros default prop value (#​2621)
    • [@mantine/core] ScrollArea: Fix incorrect thumb hover area (#​2610)
    • [@mantine/hooks] use-focus-trap: Fix incorrect focus trapping logic when setRef is called with null (#​2623)
    • [@mantine/core] Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
    • [@mantine/core] Remove unexpected styles from Checkbox, Radio and Switch components

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2

    v5.5.1

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect selectors used to style Radio, Checkbox and Switch components
    • [@mantine/core] Input: Fix size not being applied when set from error props and descriptionProps (#​2603)
    • [@mantine/core] Fix incorrect loading state styles in Button and ActionIcon components (#​2618)
    • [@mantine/core] Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
    • [@mantine/core] Revert Collapse axis prop to avoid issues with regular Collapse
    • [@mantine/core] Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
    • [@mantine/core] MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#​2602)
    • [@mantine/core] Select: Fix incorrect dropdown opened state when input is clicked (#​2605)
    • [@mantine/core] List: Fix incorrect indentation for nested list items (#​2606)
    • [@mantine/core] SegmentedControl: Fix error with hook call order (#​2608)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1

    v5.5.0

    Compare Source

    View changelog with demos on mantine.dev website

    Global styles on theme

    You can now add global styles with theme.globalStyles, this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

    import { MantineProvider } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            globalStyles: (theme) => ({
              '*, *::before, *::after': {
                boxSizing: 'border-box',
              },
    
              body: {
                ...theme.fn.fontStyles(),
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
                lineHeight: theme.lineHeight,
              },
    
              '.your-class': {
                backgroundColor: 'red',
              },
    
              '#your-id > [data-active]': {
                backgroundColor: 'pink',
              },
            }),
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    form.setValues partial

    form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
    
    form.setValues({ name: 'John', age: 21 });
    form.values; // -> { name: 'John', email: '', age: 21 }
    

    Documentation updates

    Other changes

    • Checkbox indeterminate state now has separate styles for checked and unchecked states
    • Modal component now supports size="auto"
    • Checkbox, Radio and Switch components now support error, description and labelPosition props
    • Tooltip and Popover components now can be used with inline elements
    • Slider and RangeSlider components now support inverted prop
    • Collapse component now supports axis prop
    • Table component now supports withBorder and withColumnBorders props
    • NumberInput component now supports removeTrailingZeros prop
    • Popover and Menu components now support disabled prop
    • nprogress now supports new completeNavigationProgress handler

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.2...5.5.0

    v5.4.2

    Compare Source

    What's Changed

    • [@mantine/form] Add options argument support to joiResolver (#​2562)
    • [@mantine/carousel] Fix incorrect slidesToScroll type (#​2548)
    • [@mantine/carousel] Fix wrong carousel size calculation (#​2572)
    • [@mantine/core] Image: Allow src attribute to be null
    • [@mantine/core] Image: Fix race condition between hydration and image load event (#​629)
    • Fix incorrect types for static components (Navbar.Section, Tabs.Tab, etc.) for older versions of TypeScript

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.1...5.4.2

    v5.4.1

    Compare Source

    What's Changed

    • [@mantine/core] Grid: Fix offset={0} not working (#​2346)
    • [@mantine/core] SegmentedControl: Fix colors index reference not working
    • [@mantine/dropzone] Fix incorrect ref handling
    • [@mantine/core] Integrate Floating UI tooltip middleware in Tooltip, Popover and other components that are based on Popover (#​2521)
    • [@mantine/core] Fix missing ref type in components with static parts (#​2505)
    • [@mantine/core] Add data-disabled + change color when disabled on label to Switch and Checkbox components (#​2508)
    • [@mantine/nprogress] Add option to add aria-label (#​2526)
    • [@mantine/rte] Fix issue with ImageUploader index null error (#​2529)
    • [@mantine/hooks] use-local-storage: Fix incorrect method called when item is removed from local storage (#​2490)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.0...5.4.1

    v5.4.0

    Compare Source

    View changelog with demos on mantine.dev website

    validateInputOnBlur

    use-form now supports validateInputOnBlur option, it works similar to validateInputOnChange:

    import { useForm } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnBlur: ['name', 'email'],
        initialValues: { name: '', email: '', age: 0 },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
        },
      });
    
      return (
        <form onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" 
    
    </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.
    
    🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
    
    ---
    
     - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
    
    ---
    
    This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/StckOverflw/mod-installer).
    <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4yMzcuMCIsInVwZGF0ZWRJblZlciI6IjM0LjQ4LjQifQ==-->
    
    opened by renovate[bot] 0
  • Update dependency @mantine/modals to v5 - autoclosed

    Update dependency @mantine/modals to v5 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/modals (source) | 4.2.12 -> 5.9.2 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.2

    Compare Source

    What's Changed
    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed
    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
    import { IconColorPicker } from '@&#8203;tabler/icons';
    import { useEyeDropper } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    
    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    
    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    
    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    
    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    
    Other changes
    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed

    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed

    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed

    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    

    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed

    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed
    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    

    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    

    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    

    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    

    Other changes

    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed

    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed

    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    

    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    

    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    

    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    

    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed

    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6

    v5.5.5

    Compare Source

    What's Changed
    • [@mantine/core] NumberInput: Fix removeTrailingZeros prop not working for initial value (#​2638)
    • [@mantine/core] Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#​2669)
    • [@mantine/styles] Fix incorrect params handling in DefaultProps type in strict mode
    • [@mantine/core] Select: Fix component scrolling page when it is focused without any data or nothing found message (#​2628)
    • [@mantine/core] Fix Avatar and ThemeIcon components not respecting theme.defaultGradient (#​2649)
    • [@mantine/dates] Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
    • [@mantine/core] Menu: Close menu when target changes (#​2646)
    • [@mantine/hooks] use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5

    v5.5.4

    What was changed

    • [@mantine/core] ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
    • [@mantine/core] List: Fix styles params not being inherited by List.Item (#​2495)
    • [@mantine/core] Grid: Fix incorrect responsive offsets handling (#​2556)
    • [@mantine/core] Popover: Add option to configure focus returning logic with returnFocus prop
    • [@mantine/core] Popover: Fix onKeydownCapture prop overriding Escape key handler

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4

    v5.5.2

    Compare Source

    What's Changed

    • [@mantine/core] List: Fix incorrect list items styles (#​2624)
    • [@mantine/core] NumberInput: Fix incorrect removeTrailingZeros default prop value (#​2621)
    • [@mantine/core] ScrollArea: Fix incorrect thumb hover area (#​2610)
    • [@mantine/hooks] use-focus-trap: Fix incorrect focus trapping logic when setRef is called with null (#​2623)
    • [@mantine/core] Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
    • [@mantine/core] Remove unexpected styles from Checkbox, Radio and Switch components

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2

    v5.5.1

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect selectors used to style Radio, Checkbox and Switch components
    • [@mantine/core] Input: Fix size not being applied when set from error props and descriptionProps (#​2603)
    • [@mantine/core] Fix incorrect loading state styles in Button and ActionIcon components (#​2618)
    • [@mantine/core] Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
    • [@mantine/core] Revert Collapse axis prop to avoid issues with regular Collapse
    • [@mantine/core] Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
    • [@mantine/core] MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#​2602)
    • [@mantine/core] Select: Fix incorrect dropdown opened state when input is clicked (#​2605)
    • [@mantine/core] List: Fix incorrect indentation for nested list items (#​2606)
    • [@mantine/core] SegmentedControl: Fix error with hook call order (#​2608)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1

    v5.5.0

    Compare Source

    View changelog with demos on mantine.dev website

    Global styles on theme

    You can now add global styles with theme.globalStyles, this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

    import { MantineProvider } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            globalStyles: (theme) => ({
              '*, *::before, *::after': {
                boxSizing: 'border-box',
              },
    
              body: {
                ...theme.fn.fontStyles(),
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
                lineHeight: theme.lineHeight,
              },
    
              '.your-class': {
                backgroundColor: 'red',
              },
    
              '#your-id > [data-active]': {
                backgroundColor: 'pink',
              },
            }),
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    form.setValues partial

    form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
    
    form.setValues({ name: 'John', age: 21 });
    form.values; // -> { name: 'John', email: '', age: 21 }
    

    Documentation updates

    Other changes

    • Checkbox indeterminate state now has separate styles for checked and unchecked states
    • Modal component now supports size="auto"
    • Checkbox, Radio and Switch components now support error, description and labelPosition props
    • Tooltip and Popover components now can be used with inline elements
    • Slider and RangeSlider components now support inverted prop
    • Collapse component now supports axis prop
    • Table component now supports withBorder and withColumnBorders props
    • NumberInput component now supports removeTrailingZeros prop
    • Popover and Menu components now support disabled prop
    • nprogress now supports new completeNavigationProgress handler

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.2...5.5.0

    v5.4.2

    Compare Source

    What's Changed

    • [@mantine/form] Add options argument support to joiResolver (#​2562)
    • [@mantine/carousel] Fix incorrect slidesToScroll type (#​2548)
    • [@mantine/carousel] Fix wrong carousel size calculation (#​2572)
    • [@mantine/core] Image: Allow src attribute to be null
    • [@mantine/core] Image: Fix race condition between hydration and image load event (#​629)
    • Fix incorrect types for static components (Navbar.Section, Tabs.Tab, etc.) for older versions of TypeScript

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.1...5.4.2

    v5.4.1

    Compare Source

    What's Changed

    • [@mantine/core] Grid: Fix offset={0} not working (#​2346)
    • [@mantine/core] SegmentedControl: Fix colors index reference not working
    • [@mantine/dropzone] Fix incorrect ref handling
    • [@mantine/core] Integrate Floating UI tooltip middleware in Tooltip, Popover and other components that are based on Popover (#​2521)
    • [@mantine/core] Fix missing ref type in components with static parts (#​2505)
    • [@mantine/core] Add data-disabled + change color when disabled on label to Switch and Checkbox components (#​2508)
    • [@mantine/nprogress] Add option to add aria-label (#​2526)
    • [@mantine/rte] Fix issue with ImageUploader index null error (#​2529)
    • [@mantine/hooks] use-local-storage: Fix incorrect method called when item is removed from local storage (#​2490)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.0...5.4.1

    v5.4.0

    Compare Source

    View changelog with demos on mantine.dev website

    validateInputOnBlur

    use-form now supports validateInputOnBlur option, it works similar to validateInputOnChange:

    import { useForm } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnBlur: ['name', 'email'],
        initialValues: { name: '', email: '', age: 0 },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
        },
      });
    
      return (
        <form onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInpu
    
    </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.
    
    🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
    
    ---
    
     - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
    
    ---
    
    This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/StckOverflw/mod-installer).
    <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4yMzcuMCIsInVwZGF0ZWRJblZlciI6IjM0LjQ4LjQifQ==-->
    
    opened by renovate[bot] 0
  • Update dependency @mantine/hooks to v5 - autoclosed

    Update dependency @mantine/hooks to v5 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/hooks (source) | 4.2.12 -> 5.9.2 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.2

    Compare Source

    What's Changed

    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed

    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
    import { IconColorPicker } from '@&#8203;tabler/icons';
    import { useEyeDropper } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    

    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    

    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    

    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    

    Other changes

    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed

    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed
    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed
    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    

    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed

    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed
    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    
    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    
    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    
    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    
    Other changes
    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed
    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed
    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed

    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    
    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    
    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    
    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    
    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    
    Other changes
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed
    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6

    v5.5.5

    Compare Source

    What's Changed

    • [@mantine/core] NumberInput: Fix removeTrailingZeros prop not working for initial value (#​2638)
    • [@mantine/core] Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#​2669)
    • [@mantine/styles] Fix incorrect params handling in DefaultProps type in strict mode
    • [@mantine/core] Select: Fix component scrolling page when it is focused without any data or nothing found message (#​2628)
    • [@mantine/core] Fix Avatar and ThemeIcon components not respecting theme.defaultGradient (#​2649)
    • [@mantine/dates] Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
    • [@mantine/core] Menu: Close menu when target changes (#​2646)
    • [@mantine/hooks] use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5

    v5.5.4

    Compare Source

    What was changed

    • [@mantine/core] ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
    • [@mantine/core] List: Fix styles params not being inherited by List.Item (#​2495)
    • [@mantine/core] Grid: Fix incorrect responsive offsets handling (#​2556)
    • [@mantine/core] Popover: Add option to configure focus returning logic with returnFocus prop
    • [@mantine/core] Popover: Fix onKeydownCapture prop overriding Escape key handler

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4

    v5.5.2

    Compare Source

    What's Changed
    • [@mantine/core] List: Fix incorrect list items styles (#​2624)
    • [@mantine/core] NumberInput: Fix incorrect removeTrailingZeros default prop value (#​2621)
    • [@mantine/core] ScrollArea: Fix incorrect thumb hover area (#​2610)
    • [@mantine/hooks] use-focus-trap: Fix incorrect focus trapping logic when setRef is called with null (#​2623)
    • [@mantine/core] Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
    • [@mantine/core] Remove unexpected styles from Checkbox, Radio and Switch components

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2

    v5.5.1

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect selectors used to style Radio, Checkbox and Switch components
    • [@mantine/core] Input: Fix size not being applied when set from error props and descriptionProps (#​2603)
    • [@mantine/core] Fix incorrect loading state styles in Button and ActionIcon components (#​2618)
    • [@mantine/core] Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
    • [@mantine/core] Revert Collapse axis prop to avoid issues with regular Collapse
    • [@mantine/core] Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
    • [@mantine/core] MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#​2602)
    • [@mantine/core] Select: Fix incorrect dropdown opened state when input is clicked (#​2605)
    • [@mantine/core] List: Fix incorrect indentation for nested list items (#​2606)
    • [@mantine/core] SegmentedControl: Fix error with hook call order (#​2608)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1

    v5.5.0

    Compare Source

    View changelog with demos on mantine.dev website

    Global styles on theme

    You can now add global styles with theme.globalStyles, this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

    import { MantineProvider } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            globalStyles: (theme) => ({
              '*, *::before, *::after': {
                boxSizing: 'border-box',
              },
    
              body: {
                ...theme.fn.fontStyles(),
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
                lineHeight: theme.lineHeight,
              },
    
              '.your-class': {
                backgroundColor: 'red',
              },
    
              '#your-id > [data-active]': {
                backgroundColor: 'pink',
              },
            }),
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    form.setValues partial

    form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
    
    form.setValues({ name: 'John', age: 21 });
    form.values; // -> { name: 'John', email: '', age: 21 }
    

    Documentation updates

    Other changes

    • Checkbox indeterminate state now has separate styles for checked and unchecked states
    • Modal component now supports size="auto"
    • Checkbox, Radio and Switch components now support error, description and labelPosition props
    • Tooltip and Popover components now can be used with inline elements
    • Slider and RangeSlider components now support inverted prop
    • Collapse component now supports axis prop
    • Table component now supports withBorder and withColumnBorders props
    • NumberInput component now supports removeTrailingZeros prop
    • Popover and Menu components now support disabled prop
    • nprogress now supports new completeNavigationProgress handler

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.2...5.5.0

    v5.4.2

    Compare Source

    What's Changed
    • [@mantine/form] Add options argument support to joiResolver (#​2562)
    • [@mantine/carousel] Fix incorrect slidesToScroll type (#​2548)
    • [@mantine/carousel] Fix wrong carousel size calculation (#​2572)
    • [@mantine/core] Image: Allow src attribute to be null
    • [@mantine/core] Image: Fix race condition between hydration and image load event (#​629)
    • Fix incorrect types for static components (Navbar.Section, Tabs.Tab, etc.) for older versions of TypeScript
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.1...5.4.2

    v5.4.1

    Compare Source

    What's Changed

    • [@mantine/core] Grid: Fix offset={0} not working (#​2346)
    • [@mantine/core] SegmentedControl: Fix colors index reference not working
    • [@mantine/dropzone] Fix incorrect ref handling
    • [@mantine/core] Integrate Floating UI tooltip middleware in Tooltip, Popover and other components that are based on Popover (#​2521)
    • [@mantine/core] Fix missing ref type in components with static parts (#​2505)
    • [@mantine/core] Add data-disabled + change color when disabled on label to Switch and Checkbox components (#​2508)
    • [@mantine/nprogress] Add option to add aria-label (#​2526)
    • [@mantine/rte] Fix issue with ImageUploader index null error (#​2529)
    • [@mantine/hooks] use-local-storage: Fix incorrect method called when item is removed from local storage (#​2490)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.0...5.4.1

    v5.4.0

    Compare Source

    View changelog with demos on mantine.dev website

    validateInputOnBlur

    use-form now supports validateInputOnBlur option, it works similar to validateInputOnChange:

    import { useForm } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnBlur: ['name', 'email'],
        initialValues: { name: '', email: '', age: 0 },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
        },
      });
    
      return (
        <form onSubmit={form.onSubmit(console.log)}>
          <TextInput label="N
    
    </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.
    
    🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
    
    ---
    
     - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
    
    ---
    
    This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/StckOverflw/mod-installer).
    <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4yMzcuMCIsInVwZGF0ZWRJblZlciI6IjM0LjQ4LjQifQ==-->
    
    opened by renovate[bot] 0
  • Update dependency @mantine/dropzone to v5

    Update dependency @mantine/dropzone to v5

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/dropzone (source) | 4.2.12 -> 5.5.5 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.5.5

    Compare Source

    What's Changed

    • [@mantine/core] NumberInput: Fix removeTrailingZeros prop not working for initial value (#​2638)
    • [@mantine/core] Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#​2669)
    • [@mantine/styles] Fix incorrect params handling in DefaultProps type in strict mode
    • [@mantine/core] Select: Fix component scrolling page when it is focused without any data or nothing found message (#​2628)
    • [@mantine/core] Fix Avatar and ThemeIcon components not respecting theme.defaultGradient (#​2649)
    • [@mantine/dates] Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
    • [@mantine/core] Menu: Close menu when target changes (#​2646)
    • [@mantine/hooks] use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5

    v5.5.4

    What was changed
    • [@mantine/core] ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
    • [@mantine/core] List: Fix styles params not being inherited by List.Item (#​2495)
    • [@mantine/core] Grid: Fix incorrect responsive offsets handling (#​2556)
    • [@mantine/core] Popover: Add option to configure focus returning logic with returnFocus prop
    • [@mantine/core] Popover: Fix onKeydownCapture prop overriding Escape key handler

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4

    v5.5.2

    Compare Source

    What's Changed

    • [@mantine/core] List: Fix incorrect list items styles (#​2624)
    • [@mantine/core] NumberInput: Fix incorrect removeTrailingZeros default prop value (#​2621)
    • [@mantine/core] ScrollArea: Fix incorrect thumb hover area (#​2610)
    • [@mantine/hooks] use-focus-trap: Fix incorrect focus trapping logic when setRef is called with null (#​2623)
    • [@mantine/core] Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
    • [@mantine/core] Remove unexpected styles from Checkbox, Radio and Switch components

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2

    v5.5.1

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect selectors used to style Radio, Checkbox and Switch components
    • [@mantine/core] Input: Fix size not being applied when set from error props and descriptionProps (#​2603)
    • [@mantine/core] Fix incorrect loading state styles in Button and ActionIcon components (#​2618)
    • [@mantine/core] Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
    • [@mantine/core] Revert Collapse axis prop to avoid issues with regular Collapse
    • [@mantine/core] Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
    • [@mantine/core] MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#​2602)
    • [@mantine/core] Select: Fix incorrect dropdown opened state when input is clicked (#​2605)
    • [@mantine/core] List: Fix incorrect indentation for nested list items (#​2606)
    • [@mantine/core] SegmentedControl: Fix error with hook call order (#​2608)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1

    v5.5.0

    Compare Source

    View changelog with demos on mantine.dev website

    Global styles on theme

    You can now add global styles with theme.globalStyles, this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

    import { MantineProvider } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            globalStyles: (theme) => ({
              '*, *::before, *::after': {
                boxSizing: 'border-box',
              },
    
              body: {
                ...theme.fn.fontStyles(),
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
                lineHeight: theme.lineHeight,
              },
    
              '.your-class': {
                backgroundColor: 'red',
              },
    
              '#your-id > [data-active]': {
                backgroundColor: 'pink',
              },
            }),
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    form.setValues partial

    form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
    
    form.setValues({ name: 'John', age: 21 });
    form.values; // -> { name: 'John', email: '', age: 21 }
    

    Documentation updates

    Other changes

    • Checkbox indeterminate state now has separate styles for checked and unchecked states
    • Modal component now supports size="auto"
    • Checkbox, Radio and Switch components now support error, description and labelPosition props
    • Tooltip and Popover components now can be used with inline elements
    • Slider and RangeSlider components now support inverted prop
    • Collapse component now supports axis prop
    • Table component now supports withBorder and withColumnBorders props
    • NumberInput component now supports removeTrailingZeros prop
    • Popover and Menu components now support disabled prop
    • nprogress now supports new completeNavigationProgress handler

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.2...5.5.0

    v5.4.2

    Compare Source

    What's Changed

    • [@mantine/form] Add options argument support to joiResolver (#​2562)
    • [@mantine/carousel] Fix incorrect slidesToScroll type (#​2548)
    • [@mantine/carousel] Fix wrong carousel size calculation (#​2572)
    • [@mantine/core] Image: Allow src attribute to be null
    • [@mantine/core] Image: Fix race condition between hydration and image load event (#​629)
    • Fix incorrect types for static components (Navbar.Section, Tabs.Tab, etc.) for older versions of TypeScript

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.1...5.4.2

    v5.4.1

    Compare Source

    What's Changed

    • [@mantine/core] Grid: Fix offset={0} not working (#​2346)
    • [@mantine/core] SegmentedControl: Fix colors index reference not working
    • [@mantine/dropzone] Fix incorrect ref handling
    • [@mantine/core] Integrate Floating UI tooltip middleware in Tooltip, Popover and other components that are based on Popover (#​2521)
    • [@mantine/core] Fix missing ref type in components with static parts (#​2505)
    • [@mantine/core] Add data-disabled + change color when disabled on label to Switch and Checkbox components (#​2508)
    • [@mantine/nprogress] Add option to add aria-label (#​2526)
    • [@mantine/rte] Fix issue with ImageUploader index null error (#​2529)
    • [@mantine/hooks] use-local-storage: Fix incorrect method called when item is removed from local storage (#​2490)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.0...5.4.1

    v5.4.0

    Compare Source

    View changelog with demos on mantine.dev website

    validateInputOnBlur

    use-form now supports validateInputOnBlur option, it works similar to validateInputOnChange:

    import { useForm } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnBlur: ['name', 'email'],
        initialValues: { name: '', email: '', age: 0 },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
        },
      });
    
      return (
        <form onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    

    Non-linear Slider scale

    Slider and RangeSlider components now support non-linear scale:

    import { RangeSlider, Slider, Stack } from '@&#8203;mantine/core';
    
    function Demo() {
      function valueLabelFormat(value: number) {
        const units = ['KB', 'MB', 'GB', 'TB'];
    
        let unitIndex = 0;
        let scaledValue = value;
    
        while (scaledValue >= 1024 && unitIndex < units.length - 1) {
          unitIndex += 1;
          scaledValue /= 1024;
        }
    
        return `${scaledValue} ${units[unitIndex]}`;
      }
    
      return (
        <Stack spacing="xl" p="xl">
          <Slider
            py="xl"
            scale={(v) => 2 ** v}
            step={1}
            min={2}
            max={30}
            labelAlwaysOn
            defaultValue={10}
            label={valueLabelFormat}
          />
          <RangeSlider
            py="xl"
            scale={(v) => 2 ** v}
            step={1}
            min={2}
            max={30}
            labelAlwaysOn
            defaultValue={[10, 20]}
            label={valueLabelFormat}
          />
        </Stack>
      );
    }
    

    Switch.Group component

    New Switch.Group component lets you organize Switch components the same way as Checkbox.Group and Radio.Group:

    import { Switch } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Switch.Group
          defaultValue={['react']}
          label="Select your favorite framework/library"
          description="This is anonymous"
          withAsterisk
        >
          <Switch value="react" label="React" />
          <Switch value="svelte" label="Svelte" />
          <Switch value="ng" label="Angular" />
          <Switch value="vue" label="Vue" />
        </Switch.Group>
      );
    }
    

    Controlled Select/MultiSelect search value

    Select and MultiSelect search value can now be controlled:

    import { Select } from '@&#8203;mantine/core';
    
    function Demo() {
      const [searchValue, onSearchChange] = useState('');
    
      return (
        <Select
          label="Your favorite framework/library"
          placeholder="Pick one"
          searchable
          onSearchChange={onSearchChange}
          searchValue={searchValue}
          nothingFound="No options"
          data={['React', 'Angular', 'Svelte', 'Vue']}
        />
      );
    }
    

    Controlled PasswordInput visibility

    PasswordInput now supports controlled visibility state with visible and onVisibilityChange props, for example, the props can be used to sync visibility state between two inputs:

    import { useDisclosure } from '@&#8203;mantine/hooks';
    import { PasswordInput, Stack } from '@&#8203;mantine/core';
    
    function Demo() {
      const [visible, { toggle }] = useDisclosure(false);
      return (
        <Stack sx={{ maxWidth: 380 }} mx="auto">
          <PasswordInput
            label="Password"
            defaultValue="secret"
            visible={visible}
            onVisibilityChange={toggle}
          />
          <PasswordInput
            label="Confirm password"
            defaultValue="secret"
            visible={visible}
            onVisibilityChange={toggle}
          />
        </Stack>
      );
    }
    

    New Mantine UI components

    10 new components were added to Mantine UI, view changelog here

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.3...5.4.0

    v5.3.3

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix closeOnClickOutside not working (#​2458)
    • [@mantine/dropzone] Upgrade react-dropzone version to fix mime types issue (#​2476)
    • [@mantine/core] PasswordInput: Fix incorrect selection styles (#​2473)
    • [@mantine/modals] Fix closeModal not working correctly when called inside nested modals (#​2436)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.2...5.3.3

    v5.3.2

    Compare Source

    What's Changed

    • [@mantine/rte] Update react-quill to 2.0.0 to avoid dependencies collisions with React 18 (#​2449)
    • [@mantine/core] SegmetedControl: Fix floating indicator being invisible in uncontrolled component (#​2454)
    • [@mantine/core] Fix Button and ActionIcon not being disabled when rendered inside disabled fieldset (#​2440)
    • [@mantine/core] Modal: Prevent overlay from sitting on top of scrollbar (#​2445)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.1...5.3.2

    v5.3.1

    Compare Source

    What's Changed

    • [@mantine/core] Indicator: Fix incorrect default props that prevented indicator from showing without label
    • [@mantine/Prism] Fix lines highlight color not respecting colorScheme prop (#​2404)
    • [@mantine/core] SegmentedControl: Fix incorrect empty string value handling (#​2400)
    • [@mantine/rte] Fix incorrect props types (#​2420)
    • [@mantine/core] Indicator: Disable processing animation on disabled state (#​2410)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.3.0...5.3.1

    v5.3.0

    Compare Source

    View changelog with demos on mantine.dev

    Form context

    @mantine/form package now exports createFormContext function to create provider component, hook to get form object from context and use-form hook with predefined type:

    import { createFormContext } from '@&#8203;mantine/form';
    import { TextInput } from '@&#8203;mantine/core';
    
    // Definition of form values is required
    interface FormValues {
      age: number;
      name: string;
    }
    
    // createFormContext returns a tuple with 3 items:
    // FormProvider is a component that sets form context
    // useFromContext hook return form object that was previously set in FormProvider
    // useForm hook works the same way as useForm exported from the package but has predefined type
    const [FormProvider, useFormContext, useForm] = createFormContext<FormValues>();
    
    function ContextField() {
      const form = useFormContext();
      return <TextInput label="Your name" {...form.getInputProps('name')} />;
    }
    
    export function Context() {
      // Create form as described in use-form documentation
      const form = useForm({
        initialValues: {
          age: 0,
          name: '',
        },
      });
    
      // Wrap your form with FormProvider
      return (
        <FormProvider form={form}>
          <form onSubmit={form.onSubmit(() => {})}>
            <ContextField />
          </form>
        </FormProvider>
      );
    }
    

    New features

    • Indicator component now includes more features to work with number labels and precessing prop
    • Switch component now supports thumbIcon prop and any React node can now be used on onLabel and offLabel props
    • Grid.Col component now supports setting column span (and other related responsive props) to auto and content:

    use-previous hook

    use-previous hook stores the previous value of a state in a ref, it returns undefined on initial render and the previous value of a state after rerender:

    import { TextInput, Text } from '@&#8203;mantine/core';
    import { usePrevious, useInputState } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [value, setValue] = useInputState('');
      const previousValue = usePrevious(value);
    
      return (
        <div>
          <TextInput
            label="Enter some text here"
            placeholder="Enter some text here"
            id="previous-demo-input"
            value={value}
            onChange={setValue}
          />
          <Text mt="md">Current value: {value}</Text>
          <Text>Previous value: {previousValue}</Text>
        </div>
      );
    }
    

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.7...5.3.0

    v5.2.7

    Compare Source

    What's Changed

    • [@mantine/core] ScrollArea: Fix offsetScrollbarsprop not working for horizontal scrollbars
    • [@mantine/core] Select: Fix Space key causing page to scroll when used to open dropdown
    • [@mantine/hooks] use-focus-trap: Fix scrolling of animated elements (#​1753)
    • [@mantine/carousel] Remove margin from the last slide (#​2336)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.6...5.2.7

    v5.2.6

    Compare Source

    What's Changed

    • [@mantine/core] Drawer: Fix withOverlay={false} not letting click-through (#​2351)
    • [@mantine/core] PasswordInput: Fix inputWrapperOrder prop not working
    • [@mantine/core] Modal: Fix content shifting in full screen modal (#​2348)
    • [@mantine/notifications] Remove unexpected message prop on notification root element (#​2327)
    • [@mantine/styles] Set prepend: true on default emotion cache to fix styles overriding issues

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.5...5.2.6

    v5.2.5

    Compare Source

    What's Changed

    • [@mantine/core] ActionIcon: Fix broken styles for loading state (#​2281)
    • [@mantine/dropzone] Fix Dropzone.Fullscreen not disappearing when mouse is moved slowly outside its wrapper (#​2305)
    • [@mantine/dates] TimeInput: Hide clear button when input is disabled (#​2321)
    • [@mantine/styles] Remove prepend: true from default emotion cache (#​1734)
    • [@mantine/core] Autocomplete: Fix options grouping with dynamic data (#​2297)
    • [@mantine/core] Fix disabled styles for gradient variants of Button and ActionIcon (#​2277)
    • [@mantine/core] Autocomplete: Fix outdated styles api selectors (#​2269)
    • [@mantine/core] Tabs: Add items wrapping to Tabs.List to avoid horizontal scroll
    • [@mantine/carousel] Fix incorrect type in useAnimationOffsetEffect hook

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.4...5.2.5

    v5.2.4

    Compare Source

    What's Changed

    • [@mantine/hooks] use-focus-return: Allow shouldReturnFocus to be dynamic (#​770)
    • [@mantine/core] Tooltip: Remove extra markup from disabled Tooltip.Floating (#​2220)
    • [@mantine/core] TypographyStylesProvider: Fix code tag styles when it is nested within pre tag (#​2219)
    • [@mantine/prism] Fix copy icon interfering with code (#​2171)
    • [@mantine/core] Remove hardcodded padding from Select, MultiSelect and Autocomplete dropdowns (#​2108)
    • [@&#8203;mantine/dropzone]Change onDrop type from File to FileWithPath (#​2250)
    • [@mantine/core] Image: Change fit prop type to include all possible object-fit values (#​2245)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.3...5.2.4

    v5.2.3

    Compare Source

    • Fix broken Grid responsive styles introduced in 5.2.2
    • Fix Grid responsive order prop not being applied

    v5.2.2

    What's Changed

    • [@mantine/hooks] use-focus-within: Fix incorrect useEffect dependencies (#​2178)
    • [@mantine/core] Grid: Fix offset and order responsive props (#​2163)
    • [@mantine/core] Title: Fix inline prop being ignored (#​2182)
    • [@mantine/carousel] Remove strict requirement for embla-carousel-react dependency (#​2200)
    • [@mantine/core] NumberInput: Fix onKeyDown and onKeyUp events not working

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.2.0...5.2.2

    v5.2.0

    Compare Source

    View changelog with demos on documentation website

    Styled components support

    You can now use styled components syntax with @​emotion/styled package:

    • It is fully compatible with Mantine server side rendering (@mantine/next, @mantine/remix and gatsby-plugin-mantine packages)
    • Mantine theme can now be used in component styles with no extra setup
    • Components created with @emotion/styled will use Mantine's emotion cache
    import styled from '@&#8203;emotion/styled';
    
    const StyledComponent = styled.div`
      text-align: center;
      background-color: ${({ theme }) =>
        theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0]};
      padding: 30px;
      border-radius: 5px;
      cursor: pointer;
    
      &:hover {
        background-color: ${({ theme }) =>
          theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]};
      }
    `;
    
    function Demo() {
      return <StyledComponent />;
    }
    

    withAsterisk prop

    All inputs that are based on Input and Input.Wrapper components now support withAsterisk prop, it allows to display required asterisk without adding required attribute to the input element. It is useful when you do not need browser validation in your forms but still want to display the asterisk.

    import { TextInput } from '@&#8203;mantine/core';
    
    // Will display required asterisk and add `required` attribute to the input element
    function RequiredDemo() {
      return <TextInput label="test-label" required />;
    }
    
    // Will only display the asterisk, `required` attribute is not added to the input element
    function AsteriskDemo() {
      return <TextInput label="test-label" withAsterisk />;
    }
    

    Progress and RingProgress tooltips

    Progress and RingProgress components now support floating tooltips in sections:

    import { RingProgress, Text, Group } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Group position="center">
          <RingProgress
            size={170}
            thickness={16}
            label={
              <Text size="xs" align="center" px="xs" sx={{ pointerEvents: 'none' }}>
                Hover sections to see tooltips
              </Text>
            }
            sections={[
              { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },
              { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },
              { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },
            ]}
          />
        </Group>
      );
    }
    

    Title component changes

    Title now supports setting size different from order:

    import { Title } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <>
          <Title order={3} size="h1">
            H3 heading with h1 font-size
          </Title>
          <Title size="h4">H1 heading with h4 font-size</Title>
          <Title size={12}>H1 heading with 12px size</Title>
        </>
      );
    }
    

    It also now supports all Text component props:

    import { Title } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <>
          <Title order={3} weight={100} align="center">
            H3 heading aligned to center with 100 font-weight
          </Title>
          <Title order={4} underline color="blue.5">
            Underlined h4 heading with blue color
          </Title>
          <Title order={5} color="dimmed" italic>
            Italic dimmed h5 heading
          </Title>
        </>
      );
    }
    

    @​mantine/form changes

    New form.isValid handler performs form validation with given validation functions, rules object or schema, but unlike form.validate it does not set form.errors and just returns boolean value that indicates whether form is valid.

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({
      initialValues: { name: '', age: 0 },
      validate: {
        name: (value) => (value.trim().length < 2 ? 'Too short' : null),
        age: (value) => (value < 18 ? 'Too young' : null),
      },
    });
    
    // get validation status of all values
    form.isValid(); // -> false
    
    // get validation status of field
    form.isValid('name'); // -> false
    

    form.resetDirty will now memoize form values and compare all next changes with stored values instead of initialValues:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { a: 1 } });
    
    form.setFieldValue('a', 2);
    form.isDirty(); // -> true
    
    form.setFieldValue('a', 1);
    form.isDirty(); // -> false
    
    form.setFieldValue('a', 3);
    form.resetDirty();
    form.isDirty(); // -> false
    
    form.setFieldValue('a', 3);
    form.isDirty(); // -> true
    

    Form rules now receive rule path as third argument:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({
      initialValues: { a: [{ b: 1 }, { b: 2 }] },
      validate: {
        a: {
          // path can be used to get field position relative to other fields
          b: (value, values, path) => (path === 'a.0.b' ? 'error' : null),
        },
      },
    });
    

    Custom prism themes

    Prism component now supports custom themes with getPrismTheme prop:

    import duotoneDark from 'prism-react-renderer/themes/duotoneDark';
    import duotoneLight from 'prism-react-renderer/themes/duotoneLight';
    import { Prism } from '@&#8203;mantine/prism';
    
    const demoCode = `import { Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Button>Hello</Button>
    }`;
    
    function Demo() {
      return (
        <Prism
          language="tsx"
          getPrismTheme={(_theme, colorScheme) =>
            colorScheme === 'light' ? duotoneLight : duotoneDark
          }
        >
          {demoCode}
        </Prism>
      );
    }
    

    Other changes

    • ActionIcon component now support gradient variant
    • Avatar component now supports variant prop
    • Carousel component now supports height="100%"
    • Grid.Col now supports order prop, it can be used to reorder columns when certain breakpoint is reached
    • Tabs component now supports keepMounted prop. If it is set to false then components rendered inside Tabs.Panel will be unmounted when tab is not active.
    • DatePicker and DateRangePicker components now have withinPortal prop set to false by default to match other components

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.7...5.2.0

    v5.1.7

    Compare Source

    What's Changed

    • [@mantine/core] Add option to not call onChange in creatable Select and MultiSelect when onCreate function returns null or undefined (#​2095)
    • [@mantine/core] Fix incorrect Tooltip and Popover arrow styles for RTL (#​2104)
    • [@mantine/core] Modal: Fix incorrect overflow with fullScreen option (#​2118)
    • [@mantine/core] MultiSelect: Fix incorrect line-height styles (Windows Chrome and Edge) (#​2154)
    • [@mantine/core] MultiSelect: Fix incorrect values maxSelectedValues handling (#​2115)
    • [@mantine/core] Stepper: Fix incorrect styles for vertical lines when step content has large height (#​2106)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.6...5.1.7

    v5.1.6

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix incorrect scrollbar offset on Windows/Linux (#​1721)
    • [@mantine/core] Collapse: Fixed error thrown when using component with reduced motion (#​2116)
    • [@mantine/dates] Add missing yearLabelFormat, nextDecadeLabel, nextYearLabel, previousDecadeLabel and previousYearLabel props forwarding to Calendar component in DatePicker and DateRangePicker components
    • [@mantine/core] AppShell: Fix incorect border styles in Navbar, Header, Footer and Aside components when withBorder is set to false

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.5...5.1.6

    v5.1.5

    Compare Source

    What's Changed

    • [@mantine/hooks] use-viewport-size: Add missing size calculation to useEffect (#​2085)
    • [@mantine/carousel] Add dynamic slides handling (#​2074)
    • [@mantine/core] Fix keys errors in Select and MultiSelect components when items with group are mixed with items without groups (#​2045)
    • [@mantine/core] Fix incorrect creatable item styles calculation and issue with repeated key (#​1662)
    • [@mantine/hooks] use-interval: Ensure that only one running interval can be rutting at a time (#​2093)
    • [@mantine/spotlight] Fix closeOnTrigger with not working correctly with 'Enter' key (#​2066)
    • [@mantine/core] Button: Fix incorrect overlap between buttons in Button.Group for screens with low resolution (#​1979)
    • [@mantine/core] Allow usage of Toolip with Popover.Target, HoverCard.Target and Menu.Target (#​1897)
    • [@mantine/carousel] Add useAnimationOffsetEffect hook to fix issue with incorrect slides offset when Carousel is used in animated container, for example in Modal (#​2041)
    • [@mantine/core] NumberInput: Fix incorrect events handling for composite events (#​1935)
    • [@mantine/hooks] use-hotkeys: Add option to use getHotkeyHandler with .addEventListener events (#​1952)
    • [@mantine/styles] Fix incorrect theme.spacing calculation when it is overridden with 0 values (#​1832)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.4...5.1.5

    v5.1.4

    Compare Source

    • [@mantine/core] Input: Add role="alert" to Input.Error to make it visible for screen readers (#​2023)
    • [@mantine/core] Add withFocusReturn prop support to Modal and Drawer components to allow focus behavior configuration (#​770)
    • [@mantine/utils] Fix custom events not firing in strict mode (#​2081)
    • [@mantine/core] AppShell: Fix Navbar cut off for mobile users with address bar on top (#​1171)
    • [@mantine/core] Alert: Allow usage of close button when title is not set (#​1348)
    • [@mantine/core] Notification: Reduce description styles selector specificity to allow color overriding with Styles API (#​1627)
    • [@mantine/core] Slider: Fix "Unable to preventDefault inside passive event listener invocation" error appearing in console for touch devices (#​1751)
    • [@mantine/hooks] Move initial value calculation to useEffect to avoid hydration mismatches (#​1764) in the following hooks: use-window-scroll, use-viewport-size, use-media-query, use-reduced-motion, use-network, use-local-storage, use-hash, use-document-visibility, use-color-scheme.

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.3...5.1.4

    v5.1.3

    • [@mantine/form] Fix incorrect onChange events in getInputProps for select element
    • [@mantine/form] Fix incorrect dirty state detection when list item is added and then removed
    • [@mantine/notifications] Fix openNotification function not being called in useEffect on component mount
    • [@mantine/spotlight] Fix registerActions function not being called in useEffect on component mount
    • [@mantine/nprogress] Fix resetNavigationProgress function not being called in useEffect on component mount
    • [@mantine/core] FileInput: Fix issue when user was unable to select the same file after the field was cleared
    • [@mantine/core] Indicator: Fix incorrect color applied if color prop is not set

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.1...5.1.3

    v5.1.1

    Compare Source

    What's Changed
    • Loader: Fix incorrect color being applied when color prop is not set (#​2047)
    • Spoiler: Fix incorrect height when used inside Accordion (#​2037)
    • Spotlight: Add closeOnTrigger prop to allow overriding behavior on action level (#​2050)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.1.0...5.1.1

    v5.1.0

    Compare Source

    Colors index reference

    You can now reference colors from theme by index in all components:

    import { Button, Text, Stack } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Stack align="flex-start">
          <Text color="blue.3">Text with theme.colors.blue[3] color</Text>
          <Button color="pink.4">Button with theme.colors.pink[4] color</Button>
        </Stack>
      );
    }
    

    use-form touched and dirty state

    use-form hook now exposes fields touched and dirty state:

    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({ initialValues: { text: 'initial value' } });
    
      return (
        <>
          <TextInput
            {...form.getInputProps('text')}
            label="Touched/dirty demo"
            placeholder="Touched/dirty demo"
          />
    
          <Text size="sm" mt="sm">
            Touched:{' '}
            <Text span color={form.isTouched('text') ? 'blue' : 'red'}>
              {form.isTouched('text') ? 'touched' : 'not touched'}
            </Text>
          </Text>
    
          <Text size="sm">
            Dirty:{' '}
            <Text span color={form.isDirty('text') ? 'blue' : 'red'}>
              {form.isDirty('text') ? 'dirty' : 'not dirty'}
            </Text>
          </Text>
        </>
      );
    }
    

    RichTextEditor formats

    RichTextEditor component now supports formats prop to restrict formats that user can use in the editor. In the following example three formats are enabled: bold, italic and underline, toolbar includes italic and underline controls, bold format can be added with Ctrl + B keyboard shortcut, other formats are not available:

    import { useState } from 'react';
    import { RichTextEditor } from '@&#8203;mantine/rte';
    
    function Demo() {
      const [value, onChange] = useState('<p>Rich text editor content</p>');
      return (
        <RichTextEditor
          value={value}
          onChange={onChange}
          formats={['bold', 'italic', 'underline']}
          controls={[['italic', 'underline']]}
        />
      );
    }
    

    use-text-selection hook

    use-text-selection allows to get current selected text on the page:

    import { useTextSelection } from '@&#8203;mantine/hooks';
    function Demo() {
      const selection = useTextSelection();
      return (
        <>
          <div>Select some text here or anywhere on the page and it will be displayed below</div>
          <div>Selected text: {selection?.toString()}</div>
        </>
      );
    }
    

    use-debounced-state hook

    use-debounced-state is an alternative for use-debounced-value for uncontrolled components:

    import { useDebouncedState } from '@&#8203;mantine/hooks';
    import { TextInput, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [value, setValue] = useDebouncedState('', 200);
    
      return (
        <>
          <TextInput
            label="Enter value to see debounce effect"
            defaultValue={value}
            style={{ flex: 1 }}
            onChange={(event) => setValue(event.currentTarget.value)}
          />
    
          <Text>Debounced value: {value}</Text>
        </>
      );
    }
    

    Minimal Next.js template

    You can now use minimal Next.js template that includes only basic server side rendering setup. It is useful when you want to set up your own tooltip (configuration for Jest, Storybook, ESLint, prettier and other tools is not included).

    Other changes

    • New theme functions: theme.fn.primaryShade and theme.fn.primaryColor
    • Text component now supports strikethrough and italic props to add text-decoration and font-style styles.
    • Text component now supports span prop as a shorthand for component="span".
    • Carousel component now support keyboard events (switching slides with right/left arrows)
    • [Accordion.Con

    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.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency @mantine/core to v5 - autoclosed

    Update dependency @mantine/core to v5 - autoclosed

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/core (source) | 4.2.12 -> 5.9.2 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.2

    Compare Source

    What's Changed

    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed

    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
    import { IconColorPicker } from '@&#8203;tabler/icons';
    import { useEyeDropper } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    

    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    

    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    

    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    

    Other changes

    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed

    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed
    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed
    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    

    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed

    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed

    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    

    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    

    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    

    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    

    Other changes

    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed
    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed

    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    

    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    

    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    

    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    

    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed

    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6

    v5.5.5

    Compare Source

    What's Changed

    • [@mantine/core] NumberInput: Fix removeTrailingZeros prop not working for initial value (#​2638)
    • [@mantine/core] Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#​2669)
    • [@mantine/styles] Fix incorrect params handling in DefaultProps type in strict mode
    • [@mantine/core] Select: Fix component scrolling page when it is focused without any data or nothing found message (#​2628)
    • [@mantine/core] Fix Avatar and ThemeIcon components not respecting theme.defaultGradient (#​2649)
    • [@mantine/dates] Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
    • [@mantine/core] Menu: Close menu when target changes (#​2646)
    • [@mantine/hooks] use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5

    v5.5.4

    Compare Source

    What was changed

    • [@mantine/core] ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
    • [@mantine/core] List: Fix styles params not being inherited by List.Item (#​2495)
    • [@mantine/core] Grid: Fix incorrect responsive offsets handling (#​2556)
    • [@mantine/core] Popover: Add option to configure focus returning logic with returnFocus prop
    • [@mantine/core] Popover: Fix onKeydownCapture prop overriding Escape key handler

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4

    v5.5.2

    Compare Source

    What's Changed

    • [@mantine/core] List: Fix incorrect list items styles (#​2624)
    • [@mantine/core] NumberInput: Fix incorrect removeTrailingZeros default prop value (#​2621)
    • [@mantine/core] ScrollArea: Fix incorrect thumb hover area (#​2610)
    • [@mantine/hooks] use-focus-trap: Fix incorrect focus trapping logic when setRef is called with null (#​2623)
    • [@mantine/core] Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
    • [@mantine/core] Remove unexpected styles from Checkbox, Radio and Switch components

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2

    v5.5.1

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect selectors used to style Radio, Checkbox and Switch components
    • [@mantine/core] Input: Fix size not being applied when set from error props and descriptionProps (#​2603)
    • [@mantine/core] Fix incorrect loading state styles in Button and ActionIcon components (#​2618)
    • [@mantine/core] Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
    • [@mantine/core] Revert Collapse axis prop to avoid issues with regular Collapse
    • [@mantine/core] Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
    • [@mantine/core] MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#​2602)
    • [@mantine/core] Select: Fix incorrect dropdown opened state when input is clicked (#​2605)
    • [@mantine/core] List: Fix incorrect indentation for nested list items (#​2606)
    • [@mantine/core] SegmentedControl: Fix error with hook call order (#​2608)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1

    v5.5.0

    Compare Source

    View changelog with demos on mantine.dev website

    Global styles on theme

    You can now add global styles with theme.globalStyles, this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

    import { MantineProvider } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            globalStyles: (theme) => ({
              '*, *::before, *::after': {
                boxSizing: 'border-box',
              },
    
              body: {
                ...theme.fn.fontStyles(),
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
                lineHeight: theme.lineHeight,
              },
    
              '.your-class': {
                backgroundColor: 'red',
              },
    
              '#your-id > [data-active]': {
                backgroundColor: 'pink',
              },
            }),
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    form.setValues partial

    form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
    
    form.setValues({ name: 'John', age: 21 });
    form.values; // -> { name: 'John', email: '', age: 21 }
    

    Documentation updates

    Other changes

    • Checkbox indeterminate state now has separate styles for checked and unchecked states
    • Modal component now supports size="auto"
    • Checkbox, Radio and Switch components now support error, description and labelPosition props
    • Tooltip and Popover components now can be used with inline elements
    • Slider and RangeSlider components now support inverted prop
    • Collapse component now supports axis prop
    • Table component now supports withBorder and withColumnBorders props
    • NumberInput component now supports removeTrailingZeros prop
    • Popover and Menu components now support disabled prop
    • nprogress now supports new completeNavigationProgress handler

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.2...5.5.0

    v5.4.2

    Compare Source

    What's Changed

    • [@mantine/form] Add options argument support to joiResolver (#​2562)
    • [@mantine/carousel] Fix incorrect slidesToScroll type (#​2548)
    • [@mantine/carousel] Fix wrong carousel size calculation (#​2572)
    • [@mantine/core] Image: Allow src attribute to be null
    • [@mantine/core] Image: Fix race condition between hydration and image load event (#​629)
    • Fix incorrect types for static components (Navbar.Section, Tabs.Tab, etc.) for older versions of TypeScript

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.1...5.4.2

    v5.4.1

    Compare Source

    What's Changed

    • [@mantine/core] Grid: Fix offset={0} not working (#​2346)
    • [@mantine/core] SegmentedControl: Fix colors index reference not working
    • [@mantine/dropzone] Fix incorrect ref handling
    • [@mantine/core] Integrate Floating UI tooltip middleware in Tooltip, Popover and other components that are based on Popover (#​2521)
    • [@mantine/core] Fix missing ref type in components with static parts (#​2505)
    • [@mantine/core] Add data-disabled + change color when disabled on label to Switch and Checkbox components (#​2508)
    • [@mantine/nprogress] Add option to add aria-label (#​2526)
    • [@mantine/rte] Fix issue with ImageUploader index null error (#​2529)
    • [@mantine/hooks] use-local-storage: Fix incorrect method called when item is removed from local storage (#​2490)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.4.0...5.4.1

    v5.4.0

    Compare Source

    View changelog with demos on mantine.dev website

    validateInputOnBlur

    use-form now supports validateInputOnBlur option, it works similar to validateInputOnChange:

    import { useForm } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnBlur: ['name', 'email'],
        initialValues: { name: '', email: '', age: 0 },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
        },
      });
    
      return (
        <form onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...
    
    </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.
    
    🔕 **Ignore**: Close this PR and you won't be reminded about this update again.
    
    ---
    
     - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box
    
    ---
    
    This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://app.renovatebot.com/dashboard#github/StckOverflw/mod-installer).
    <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzMi4yMzcuMCIsInVwZGF0ZWRJblZlciI6IjM0LjQ4LjQifQ==-->
    
    opened by renovate[bot] 0
  • Update Node.js to v18

    Update Node.js to v18

    Mend Renovate

    This PR contains the following updates:

    | Package | Type | Update | Change | |---|---|---|---| | node | final | major | 16-alpine -> 18-alpine | | node | stage | major | 16-alpine -> 18-alpine |


    Release Notes

    nodejs/node

    v18

    Moved to doc/changelogs/CHANGELOG_IOJS.md#​3.1.0.

    v17

    Moved to doc/changelogs/CHANGELOG_V5.md#​5.1.0.


    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.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update react monorepo to v18.2.0

    Update react monorepo to v18.2.0

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | react (source) | 18.1.0 -> 18.2.0 | age | adoption | passing | confidence | | react-dom (source) | 18.1.0 -> 18.2.0 | age | adoption | passing | confidence |


    Release Notes

    facebook/react

    v18.2.0

    Compare Source

    React DOM
    React DOM Server
    Server Components (Experimental)

    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.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update nextjs monorepo to v12.3.1

    Update nextjs monorepo to v12.3.1

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-config-next | 12.1.5 -> 12.3.1 | age | adoption | passing | confidence | | next (source) | 12.1.5 -> 12.3.1 | age | adoption | passing | confidence |


    Release Notes

    vercel/next.js

    v12.3.1

    Compare Source

    Core Changes
    • Update react-server-dom-webpack: #​40356
    • Fix flight manifest to include all chunks: #​40365
    • docs: fix typos: #​40342
    • Fix page url for edge routes in app dir: #​40361
    • Subresource Integrity for App Directory: #​39729
    • Stop build warning about experimental: { esmExternals: 'loose' }: #​40377
    • Add template and error file types: #​39808
    • Bump styled-jsx for showing displayName: #​40411
    • fix(#​40388): next/dynamic should only add default loading without suspense: #​40397
    • Add missing trace for full reload event: #​40393
    • feat(ts): expose AppType: #​40391
    • Update dev watcher to ignore more accurately: #​40412
    • Add failing case for location throw: #​40445
    • Drop legacy RSC handling in client for pages: #​40472
    • fix: eslint no-script-component-in-head error url: #​40422
    • chore: Update swc: #​40292
    • feat(edge): allows configuring Dynamic code execution guard: #​39539
    • Rename allowDynamic to unstable_allowDynamic: #​40496
    • Don't execute prefetches for bot user agents: #​40435
    • Update semver of eslint-plugin-react: #​40246
    • Clean up startTransition in Link: #​40505
    • docs(README): next.js logo with dark mode: #​40223
    • Passing down original sourcemap for flight client loader: #​40508
    • next/script: make onLoad concurrent rendering resilient: #​40191
    • chore: Update swc: #​40520
    • Add missing feature in next-swc: #​40550
    • Mask Flight Parameters from Middleware: #​39939
    • Unwrap promise with experimental_use: #​40575
    • fix(next/router): Prevent query delete in routing when next.config basePath option is truthy: #​40566
    • fix(image): handle image imports with high aspect ratio: #​40563
    • fix: loosen webpack compilation with fallbackNodePolyfills: false: #​40612
    • Adding experimentalAdjustFallback feature to font optimization: #​40185
    • fix: handle notFound: true in / with next export: #​40592
    • refactor: split up CONTRIBUTING.md: #​40515
    • Implement SWC transformer for server and client graphs: #​40603
    • Fix edge wasm handling during deploy: #​40625
    • Client directive: #​40415
    • Remove internal client next api detection: #​40646
    • Attach module trace for RSC related errors: #​40652
    • Use createFromFetch instead of createFromReadableStream to fetch Flight: #​40656
    • Change Flight response content type to application/octet-stream: #​40665
    • Send web vitals to Vercel analytics in app: #​40669
    • Refactor fetchServerResponse: #​40674
    • Port page and layout level API assertions to SWC transform: #​40653
    • Ensure smooth scroll is disabled for navigation in new and existing router: #​40642
    • Upgrade to latest React experimental: #​40672
    • Refine error messages: #​40661
    • Incldue styled-jsx in swc compiling: #​40679
    • misc: update caniuse-lite to latest: #​40680
    • Remove non existed exports and files: #​40685
    • fix(image): preload should respect crossOrigin: #​40676
    • Add handling for static generation in app: #​40561
    • Avoid direct React client API imports in the server graph: #​40686
    • Drop legacy RSC server and client extension: #​40692
    Documentation Changes
    • docs: fix middleware path: #​40340
    • Fix mdx docs: #​40402
    • Update Server Components documentation.: #​40452
    • docs: move swcMinify: true out of "Experimental features" section: #​40394
    • Clarify use of loading property: #​40488
    • docs(errors/large-page-data): how to see data being passed to page: #​40491
    • docs(basic-features/script): update script version history: #​40263
    • Added "negative matcher" documentation: #​40282
    • Fix a typo in docs: #​40501
    Example Changes
    • chore: fix examples: #​40395
    • chore(examples): update turborepo examples link: #​40487
    • update(examples): Emotion modules: #​40242
    • Added comments to middleware-matcher example: #​40273
    • Remove legacy mobx example: #​40304
    • Update cms-makeswift example: #​40560
    • Fixed typo: #​40608
    • Revert "Fixed typo": #​40623
    • chore: Migrate with-prefetching example to typescript: #​40671
    • chore: Refactor active-class-name example: #​40670
    • docs(examples): fix error connection handling: #​40633
    Misc Changes
    • Temporarily disable unstable app test: #​40408
    • docs(middleware): fix broken link
    • chore: use link: instead of file: in CONTRIBUTING.md: #​40510
    • add Balázs as codeowner to /errors/ directory
    • fix(cli): tune filter for extracting example .tar: #​40513
    • Add additional tests for prefetch and trailingSlash: #​40517
    • Wrap parallel routes tests in describe: #​40546
    • fix(#​40025): run next/script beforeInteractive test in both dev & prod: #​40541
    Credits

    Huge thanks to @​huozhi, @​shuding, @​ijjk, @​jasham, @​Kikobeats, @​wyattjoh, @​rubytree33, @​timneutkens, @​balazsorban44, @​andrewrjohn, @​SukkaW, @​hanneslund, @​leerob, @​Djo1e, @​kdy1, @​msafi, @​tknickman, @​feugy, @​cramforce, @​ryparker, @​victorboucher, @​steven-tey, @​JDansercoer, @​janklimo, @​hiro0218, @​HaNdTriX, @​migueloller, @​flex-kyunghwa, @​saalimzafar, @​alxhotel, @​janicklas-ralph, @​feedthejim, and @​chornos13 for helping!

    v12.3.0

    Compare Source

    Core Changes
    • Refactor client entry plugin to separate methods.: #​39162
    • Eliminate path polyfill and incremental-cache from base server: #​39548
    • Remove precopied styled-jsx: #​39520
    • Refactor handling of addPageEntry promise: #​39547
    • Support multiple flush effects: #​39559
    • Eliminate Amp in Edge runtime: #​39560
    • Rename page -> entry in on-demand-entry-handler: #​39564
    • Update .env HMR handling: #​39566
    • Fix failing switchable runtime deploy test: #​39579
    • Fix Edge SSR routes: #​39594
    • Support tsconfig paths without baseurl: #​34926
    • Enable @​typescript-eslint/no-use-before-define for functions: #​39602
    • Remove minify: false for webpack5 bundle: #​39620
    • Next Server code refactoring: #​39591
    • Eliminate path and utils from base server: #​39622
    • Remove webpack4 types: #​39631
    • Enable additional TypeScript ESLint rules: #​39640
    • fix(next/dynamic): handle template literal import path: #​39623
    • Add comment on slash normalizing in server: #​39653
    • Refactor base server: #​39649
    • Add separate entry per layout/page.: #​39611
    • fix(next-server): Fix priority for edge routes : #​39462
    • Add todo for dependsOn: #​39677
    • Improved server CSS handling: #​39664
    • feat(next-swc): Update swc: #​39499
    • fix next-app-loader on windows: #​39657
    • fix(swc/emotion): Correct the SPACE_AROUND_COLON regex: #​39710
    • fix(#​39609): warns about suspense and ssr: #​39676
    • Use realpath when emitting traced package.json: #​39683
    • fix(#​39706): add avif support for node serve static: #​39733
    • fix(next): Do not display message when middleware is removed on dev mode: #​39604
    • refactor(portal): remove useRef from portal component: #​39792
    • refactor(use-intersection): remove useRef usage: #​39791
    • allow Edge Functions to stream a compressed fetch response: #​39608
    • fix meaninglessFileNames type in compiler options schema: #​39698
    • build: upgrade edge-runtime: #​39749
    • Update stalled ensure log to use debug instead: #​39826
    • Skip building /500 in dev mode: #​39828
    • Fix onError handling in next/future/image: #​39824
    • Improve error message on next/future/image when objectFit or objectPosition: #​39614
    • Refactor client CSS imports: #​39758
    • Ensure moduleResolution is written correctly: #​39836
    • Fix disposing active entries in dev compilers: #​39845
    • fix(#​39807): ignore width/height from webpack with "fill": #​39849
    • Add handling for auto installing TypeScript deps and HMRing tsconfig: #​39838
    • Remove eslint warning when no eslint config is present: #​39872
    • feat(next/swc): enable wasm first binding load for the platforms: #​38883
    • Fix next/future/image blur-up placeholder : #​39785
    • Fix runLintCheck during build: #​39883
    • Skip auto-install for missing deps in CI: #​39882
    • Remove un-necessary internal jest-worker error during ts/lint error: #​39886
    • Bump @vercel/[email protected]: #​39906
    • Handle edge runtime for app: #​39910
    • build: upgrade edge-runtime: #​39898
    • HMR for client CSS imports: #​39916
    • fix(ts): use AppProps's generic for pageProps: #​38867
    • Treat non page file as non route under app dir: #​39976
    • Fix next/future/image incorrectly warning for fill + blur: #​39986
    • Ensure prefetch heuristic matches with and without middleware: #​39920
    • feat: add experimental.fallbackNodePolyfills flag: #​39248
    • Fix incorrect build log for moduleResolution: #​39991
    • fix(#​39993): avoid race condition for next/script onReady: #​40002
    • Avoid bundling next/script in the server build by default: #​40013
    • Handle async module for client components: #​39953
    • Upgrade typescript to 4.8.2: #​39979
    • Remove Unused SQLite file: #​40056
    • Update next/future/image to use svg blur placeholder during next dev: #​39992
    • Remove <noscript> from next/future/image: #​40075
    • Fix filePath being wrongly stringified: #​40070
    • Refactor Server Router: #​39902
    • Update to detect GSSP with edge runtime during build: #​40076
    • Fix handling with custom _error and pages/500: #​40110
    • Fix edge rewrite handling: #​40115
    • Error for ssg and ssr exports from client components in build time: #​40106
    • feat(next): Support has match and locale option on middleware config: #​39257
    • Change alt to required in next/future/image: #​40136
    • Allow port 0 in next dev and next start: #​40118
    • Update to stable: next/future/image, remotePatterns, unoptimized: #​40142
    • fix(#​40066): preserve error status code from serveStatic: #​40128
    • fix: detect ESLint config in package.json: #​40158
    • ignore EEXIST errors when creating symlinks for output standalone: #​40150
    • Bump @vercel/[email protected]: #​40164
    • Bump styled-jsx: #​40165
    • Match data fetch and busting cache key when path URI encodes: #​39568
    • Updating the Next.js Logo: #​40181
    • next/script: simplify logic and update tests: #​40026
    • Bypass empty pages folder for layouts: #​40132
    • chore: Update swc: #​39965
    • Fix styled-jsx macro imports: #​40234
    • Ensure path can be specified for clearPreviewData: #​40238
    • fix: apply default export interop to next/config: #​40224
    • Improved route resolution in next-app-loader: #​40109
    • Add prefetch to new router: #​39866
    • Update next/future/image to support only width or only height: #​40278
    • Add experimental proxy timeout option: #​40289
    • Fix static info parsing when export data fetching method as variable: #​40317
    • fix(switchable-runtime): make dev server not break when wrong runtime config is exported: #​40312
    • Revert "Refactor Server Router": #​40328
    • fix(switchable-runtime): Make it possible to switch between edge and server runtime in dev: #​39327
    • Revert "Revert "Refactor Server Router" (#​40328)" : #​40333
    • refactor(next/swc): remove unnecessary field in RemoveConsole: #​40296
    • [edge] fix URLSearchParams lacking data from rewrite: #​40260
    • fix(lint): disable react/no-unknown-property: #​40331
    • Update onLoadingComplete for next/future/image to receive reference to <img>: #​40326
    • Remove warning for swcMinify being enabled: #​40359
    Documentation Changes
    • docs: Rename API middlewares title in sidebar: #​39534
    • [docs] Avoid next config validation warning: #​39554
    • Update strategies count to 4: #​39610
    • Change the React Server Components CTA to the router/layout RFC: #​39724
    • Add section to next/future/image docs about Known Browser Bugs: #​39759
    • Update next.js.configs line number: #​39802
    • Add note about using the /_error page directly to custom error page article: #​39671
    • Typescript Documentation Improvement for Persistent Layouts: #​33659
    • Add clarity in docs for using exportPathMap with getStaticPaths: #​39813
    • Update links to point to more accurate docs: #​39818
    • Update docs next/future/image with details about computed aspect ratio: #​39829
    • Mention router.isPreview on Preview Mode page: #​39830
    • doc: improve a word client side rendering: #​39771
    • Docs: Updated note about using next/head in basic-features/font-optimization: #​39863
    • [docs] Fixed 404 links to Layouts RFC blog post: #​39937
    • Adds note about custom server requirements: #​39931
    • fix hash-link: #​39929
    • Mention largePageDataBytes in warning docs: #​39941
    • Update Font Optimization docs: #​39950
    • [docs] Update UTM params of some links: #​39951
    • Revert "Adds note about custom server requirements": #​39956
    • Update image.md: #​39984
    • Update script.md: #​40017
    • [docs] Add precision about pageExtensions: #​40016
    • Update debugging.md (--dev -> --save-dev for npm): #​39998
    • docs(testing): add JSDoc typing in jest.config.js: #​40090
    • docs(image): Use hook inside of function component: #​40096
    • docs(security-headers): interest-cohort has been replaced by browsing-topics: #​40113
    • [docs] Functional syntax for _document example in Basic Features: Font Optimization: #​40140
    • Fix typo in error/middleware-upgrade-guide.md: #​40176
    • docs: documents middleware matcher: #​40180
    • docs: update get-static-paths.md: #​40205
    • Change image sizes docs to use em instead of px: #​40288
    • Change sizes docs to use max-width in media query: #​40290
    • docs: fix numbering in middleware docs: #​40276
    • Update docs for remotePatterns image config: #​40350
    • docs: fix typo: #​40354
    Example Changes
    • docs(examples): use vercel integration in cms-sanity: #​39323
    • Typo : #​39596
    • Update Convex Example: #​39562
    • Update with-loading example: #​39646
    • [Docs] Update with-slate example: #​39639
    • Tweak Convex example: #​39739
    • examples/with-redux-thunk , update README (#​39555): #​39712
    • [Docs] Update mongodb example: #​39658
    • Convert with-goober example to TS: #​39761
    • [docs] Migrate dynamic routing example to typescript: #​39806
    • Remove unnecessary type reference in Vitest example: #​39819
    • Update cms-makeswift example: #​39834
    • Migrate data-fetch example to typescript: #​39852
    • [Docs] Update examples to favour functional _document: #​39871
    • chore(with-docker): don't copy package.json twice: #​39896
    • Prefer function _app component in examples: #​39967
    • Migrate with-xstate to typescript: #​39974
    • Use Font Optimization in examples: #​39977
    • Add local setup info in the with-supabase-auth-realtime-db example's README: #​40030
    • Remove semi in Convex example: #​40052
    • Refactored the with-supertokens example to use typescript: #​39987
    • Add config types to all examples: #​40083
    • adding with-axiom example: #​38300
    • Update Convex example to convex 0.1.9: #​40162
    • Remove extra "d" in comment: #​40212
    • fix(examples/with-styled-components-babel): list should have unique key: #​40215
    • Migrate image-component example to typescript: #​40204
    • ref(with-sentry example): Explicitly set hideSourceMaps: #​40079
    • Update next-forms example: #​40284
    • Migrate with-context-api example to typescript: #​40297
    • Migrate with-react-jss to typescript: #​40308
    • Update react-remove-properties example: #​40307
    • Migrate using-preact example to typescript: #​40295
    • added type to clientPromise in with-mongodb/lib: #​40339
    • Remove babel from custom-server-typescript example: #​40309
    • Merge with-mobx-state-tree with with-mobx-state-tree-typescript example: #​40306
    • Fix image-component example types: #​40352
    Misc Changes
    • Fix preinstall failed in [email protected] on FreeBSD with [email protected]: #​39529
    • Add edge ssr to pr stats: #​39621
    • Update test failure logging : #​39655
    • Update image tests files from *.js to *.ts: #​39663
    • fix(create-app): support github url has trailing slash: #​39665
    • Update contributing.md : #​39767
    • Update ubuntu CI version due to deprecation: #​39817
    • Leverage VERCEL_CLI_VERSION env for deploy tests: #​39823
    • Update flakey relay analytics test: #​39877
    • Added tests for next/router in app directory: #​39867
    • Fix failing e2e getServerSideProps test: #​39885
    • Add path to export-page: #​39893
    • Fix rsc basic e2e test on deploy: #​39905
    • test: merge edge ssr tests: #​39924
    • chore: check against npm version in issue validator: #​38915
    • Increase test concurrency: #​39922
    • Fix passing VERCEL_CLI_VERSION env for deploy tests: #​39946
    • test: pin typescript version to 4.7: #​39978
    • (next/mdx) set providerImportSource to react by default: #​39954
    • Add test for server CSS imports: #​40019
    • Update docker image for stats action: #​40032
    • Update flakey tsconfig test: #​40105
    • fix: scripts comment typos: #​40207
    • fix(cli): do not throw error when extracting examples in Node 18+: #​40182
    • Update to use specific swc version for PR stats: #​40237
    • fix(cli): delete temp file after extraction: #​40259
    • Fix test hydration check in Safari 10.1: #​40285
    • chore: turn off debug mode on issue validator: #​40301
    • Update README.md
    Credits

    Huge thanks to @​stipsan, @​ijjk, @​timneutkens, @​bennettdams, @​shuding, @​cherniavskii, @​huozhi, @​Brooooooklyn, @​thatbeautifuldream, @​Janpot, @​MoosaSaadat, @​alexcole, @​HaNdTriX, @​magic-akari, @​balazsorban44, @​styfle, @​SukkaW, @​kdy1, @​sokra, @​delbaoliveira, @​puneetkathar1, @​nkzawa, @​Schniz, @​greebl3, @​kasperaamodt, @​chaseignited, @​masad-frost, @​Kikobeats, @​davewelsh, @​MaedahBatool, @​adrianbienias, @​michaeloliverx, @​arthurdenner, @​sumiren, @​migueloller, @​hanneslund, @​wyattjoh, @​kwonoj, @​boredland, @​simongavelin, @​esbenam, @​theMosaad, @​jleclanche, @​leerob, @​AdilAmanat, @​souporserious, @​ykdojo, @​sanjaiyan-dev, @​yoannmoinet, @​thomasballinger, @​titusdmoore, @​jferrettiboke, @​Dueen, @​dunglas, @​KenAKAFrosty, @​wbinnssmith, @​schehata, @​remorses, @​visnup, @​Nutlope, @​yhay81, @​hiro0218, @​avigoldman, @​feugy, @​jeferson-sb, @​lobsterkatie, @​atcastle, @​bcheidemann, @​Will956, @​orionmiz, @​S0UPernova, @​cvbuelow, and @​leonzalion for helping!

    v12.2.6

    Compare Source

    v12.2.5

    Compare Source

    Core Changes
    • Change invalid internal upstream image error code: #​39334
    • Hoist styles for Route Announcer: #​39331
    • fix: wrong reference url for disableStaticImages: #​39362
    • fix: skip resizing image if it's animated: #​39325
    • Fix catchall rewrites for _next/data routes: #​39370
    • Fix next/future/image alt text: #​39366
    • refactor: add named export in next/server: #​39381
    • fix(ts): More strict Redirect type: #​38277
    • fix(next): dev server starting when importing a file using get-projec…: #​38274
    • Add runtime to PageConfig type: #​37453
    • fix: improve logging for _devPagesManifest.json loading failures: #​38046
    • Allow custom path for preview mode cookies: #​38313
    • Fix removing whitespacing in dev overlay: #​28277
    • Fix emotion labelFormat and sourcemap options: #​39389
    • Fix emotion shouldForwardProp options breaks component selectors: #​39390
    • next/image imgix loader can use multiple auto params: #​34808
    • Adds eslint-plugin-eslint-plugin to ensure eslint-plugin-next rules follow ESLint rule best practices along with enforcing some consistency.: #​37920
    • [ESLint] Adds --output-file flag: #​36420
    • Update polyfill for eslint no-unwanted-polyfillio rule: #​33170
    • fix(ts): Middleware type tweaks: #​38625
    • Fix Link generation for SSG pages if locale domains are used: #​36818
    • Setup require hook in next-server for styled-jsx resolving: #​39305
    • fix: ensure trailing slash on registry URL when fetching wasm fallback: #​39427
    • typing: upgrade styled-jsx to remove workaround in build script: #​39408
    • Extract redirect utils into a separate file: #​39433
    • Ensure locale redirects are not applied in minimal mode: #​39436
    • feat(middleware): augments / matcher with /index: #​39397
    • Bump edge-runtime packages: #​39450
    • Ensure default _app is used when falling back to default _error: #​39467
    • Handle rewriting WebSocket requests: #​39463
    • App Build Stats: #​38884
    • Tweak styled-jsx type declarations: #​39474
    • FIX GAUSSIAN BLUR IN FUTURE\IMAGE: #​39190
    • Add hot-reloading for env file changes: #​38483
    • feat(next-swc/modularize_imports): Add Kebab case: #​38583
    • Make dev watch ignore more specific: #​39504
    • Bump styled-jsx and remove manual types creation: #​39506
    • Add position styling to future fill images: #​39438
    • fix: ensure hidden iframe apps render in development mode: #​39514
    • Enable @​typescript-eslint/no-use-before-define variables,enums,typedefs for core files: #​39511
    • Re-add styled-jsx as a normal dependency: #​39518
    Documentation Changes
    • docs: update When section of getStaticProps page: #​39393
    • Update script.md: #​39400
    • API Routes Request Helpers docs.: #​39407
    • Improve description of context.query in getServerSideProps(): #​39422
    • Enhance sizes documentation for next/image: #​39301
    • Add component wrapper in sizes documentation code snippet: #​39437
    • Update router.prefetch documentation to include locale option: #​39442
    • Fix docs path "Invalid getServerSideProps Return Value": #​39443
    • Improve next/future/image Migration docs: #​39421
    Example Changes
    Misc Changes
    • test: ensure default output is correct: #​39358
    • Fix failing escheck test: #​39365
    • Add yarn 2 Setup Files to Valid Files for create-next-app: #​30936
    • Add Object#fromEntries polyfill (with 6 lines of code): #​36426
    • chore: restores removed tests: #​39452
    • Fix next.config.js overwriting on deploy e2e test: #​39476
    • Update contributing.md to recommend corepack: #​39479
    • Fix swc build for freebsd target: #​39478
    Credits

    Huge thanks to @​pthomas931, @​madmed88, @​sanjaiyan-dev, @​balazsorban44, @​DonghyukJacobJang, @​ijjk, @​chaiwattsw, @​styfle, @​dunglas, @​ahkhanjani, @​promer94, @​terrierscript, @​shawncal, @​insik-han, @​QuiiBz, @​ykzts, @​JoshuaKGoldberg, @​lucasassisrosa, @​dikwickley, @​Brooooooklyn, @​sicarius97, @​FourwingsY, @​manovotny, @​SukkaW, @​pepoeverton, @​jdeniau, @​sumiren, @​anthonyshew, @​pekarja5, @​huozhi, @​leerob, @​fediev, @​atcastle, @​shuding, @​feugy, @​jonohewitt, @​zakiego, @​Schniz, @​timneutkens, @​wyattjoh, @​MaedahBatool, @​X7Becka, @​nnnnoel, @​dcdev67, @​alvinometric, @​timothympace, and @​jeferson-sb for helping!

    v12.2.4

    Compare Source

    Core Changes
    • Fix error message typos: #​38894
    • Update to latest version of @​vercel/nft: #​38878
    • fix(#​38090): add missing analyticsId to config schema: #​38911
    • Ensure hash on initial request is preserved in new router: #​38913
    • Remove unnecessary assertions: #​38899
    • Clear unnecessary code: #​38900
    • fix: Impl attachRequestMeta in base server to handle meta differently in edge and node servers: #​38932
    • feat: enhance warning messages about unanalyzable config field: #​38907
    • fix: fix generateEtags type inside schema: #​38936
    • Refactor router reducer: #​38983
    • Add state comparison to router: #​38422
    • update webpack: #​38988
    • Update config schema for empty basePath: #​38998
    • Add handling for prefetching onTouchStart and initial mobile testing : #​38805
    • Add additional comments to new router: #​38986
    • Update config-schema for relay field to be less strict: #​39010
    • Add config for opting out of optimistic client cache behavior: #​38774
    • Fix tracing edge-runtime dependencies: #​39009
    • Ensure dangerouslyAllowSVG is passed correctly: #​39031
    • Handle getStaticPaths error inside worker to avoid serializing: #​39032
    • chore: enable swc externalHelpers when pre-compile: #​38182
    • Update to use HEAD request for On-Demand ISR: #​39038
    • chore: Clean up imports and unused code: #​39044
    • Replace node-sass test dependency with sass: #​39053
    • Add comments in new router reducer: #​39025
    • Add additional comments for reducer/cachenode: #​39065
    • fix: print Request & Response properties: #​38903
    • fix: show asPath on large page data warning: #​39071
    • Remove RSC rendering from render: #​39045
    • Ensure query is updated correctly with shallow and middleware: #​39086
    • Update pre-compiled to fix check: #​39089
    • Fix unhandled rejections with edge runtime: #​39091
    • feat(next-swc): Update swc: #​39055
    • Collect telemetry for next/future/image: #​39046
    • [Script] Adds onReady prop to next/script: #​38849
    • Ensure we hard navigate for failed _next/data with middleware: #​39148
    • Refactor Flight plugins to use types.: #​39136
    • Fix middleware + afterFiles SSG rewrite case: #​39153
    • Update swc minifier: #​39158
    • Fix incorrect component cache for middleware cases: #​39159
    • Add shared dynamic api: #​39163
    • Add exportPathMap config type/schema field: #​39171
    • Fix default error style overrides: #​39169
    • refactor: return single middleware from getMiddleware in dev server: #​39177
    • fix(#​11930): rewritten api routes can correctly handle cors in dev mode: #​38937
    • refactor: simplify middleware execution: #​39192
    • Add missing @​napi-rs/cli devDependency to next-swc: #​39164
    • Fix missing edge routes in dev middleware manifest: [#​39199](https://togithub.co

    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.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


    • [ ] If you want to rebase/retry this PR, click this checkbox.

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update mantine monorepo to v5 (major)

    Update mantine monorepo to v5 (major)

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/core (source) | 4.2.12 -> 5.9.4 | age | adoption | passing | confidence | | @mantine/hooks (source) | 4.2.12 -> 5.9.4 | age | adoption | passing | confidence | | @mantine/modals (source) | 4.2.12 -> 5.9.4 | age | adoption | passing | confidence | | @mantine/next (source) | 4.2.12 -> 5.9.4 | age | adoption | passing | confidence | | @mantine/notifications (source) | 4.2.12 -> 5.9.4 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.4

    Compare Source

    What's Changed
    • [@mantine/core] Switch: Fix incorrect alignment (#​3082)
    • [@mantine/dates] Fix DateRangePicker and DatePicker components not supporting readOnly prop (#​3089)
    • [@mantine/hooks] use-click-outside: Fix incorrect typescript definition for strict mode (#​3119)
    • [@mantine/core] Input: Fix incorrect Input.Error role, connect Input.Description and Input.Error to the input element with aria-describedby (#​3146)
    • [@mantine/tiptap] Fix control styles API working incorrectly for Link and Color control (#​3148)
    • [@mantine/modals] Increase default zIndex to allow usage with Modal component (#​3154)
    • [@mantine/hooks] use-click-outside: Fix incorrect outside clicks detection when click target is html element (#​3143)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.3...5.9.4

    v5.9.3

    Compare Source

    What's Changed
    • [@mantine/core] TypographyStylesProvider: Fix incorrect <code /> styles
    • [@mantine/styles] Allow createStyle to go to the original definition (#​3108)
    • [@mantine/core] Menu: Change hovered item background-color to make it consistent with other components (#​3109)
    • [@mantine/tiptap] Fix incorrect RichTextEditor ref type (#​3142)
    • [@mantine/form] Fix typing issue with nested interfaces in passed type (#​3157)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.2...5.9.3

    v5.9.2

    Compare Source

    What's Changed
    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed
    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
    import { IconColorPicker } from '@&#8203;tabler/icons';
    import { useEyeDropper } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    

    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    

    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    

    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    

    Other changes

    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed

    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed

    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed
    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    

    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed

    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed

    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    

    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    

    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    

    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    

    Other changes

    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed

    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed
    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed

    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    

    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    

    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    

    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    

    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed

    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6

    v5.5.5

    Compare Source

    What's Changed
    • [@mantine/core] NumberInput: Fix removeTrailingZeros prop not working for initial value (#​2638)
    • [@mantine/core] Modal: Fix issue when it was impossible to interact with scrollbars behind overlay (#​2669)
    • [@mantine/styles] Fix incorrect params handling in DefaultProps type in strict mode
    • [@mantine/core] Select: Fix component scrolling page when it is focused without any data or nothing found message (#​2628)
    • [@mantine/core] Fix Avatar and ThemeIcon components not respecting theme.defaultGradient (#​2649)
    • [@mantine/dates] Calendar: Fix error in console when up/down error is pressed and next/previous date is disabled
    • [@mantine/core] Menu: Close menu when target changes (#​2646)
    • [@mantine/hooks] use-focus-return: Add preventScroll: true to avoid scrolling to element when dropdown/modal is closed outside of current viewport
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.4...5.5.5

    v5.5.4

    Compare Source

    What was changed

    • [@mantine/core] ColorInput: Prevent dropdown from opening if withPicker={false} and there are no swatches
    • [@mantine/core] List: Fix styles params not being inherited by List.Item (#​2495)
    • [@mantine/core] Grid: Fix incorrect responsive offsets handling (#​2556)
    • [@mantine/core] Popover: Add option to configure focus returning logic with returnFocus prop
    • [@mantine/core] Popover: Fix onKeydownCapture prop overriding Escape key handler

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.2...5.5.4

    v5.5.2

    Compare Source

    What's Changed
    • [@mantine/core] List: Fix incorrect list items styles (#​2624)
    • [@mantine/core] NumberInput: Fix incorrect removeTrailingZeros default prop value (#​2621)
    • [@mantine/core] ScrollArea: Fix incorrect thumb hover area (#​2610)
    • [@mantine/hooks] use-focus-trap: Fix incorrect focus trapping logic when setRef is called with null (#​2623)
    • [@mantine/core] Fix incorrect cursor type on Checkbox, Radio and Switch when cursorType is set on theme
    • [@mantine/core] Remove unexpected styles from Checkbox, Radio and Switch components

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.1...5.5.2

    v5.5.1

    Compare Source

    What's Changed
    • [@mantine/core] Fix incorrect selectors used to style Radio, Checkbox and Switch components
    • [@mantine/core] Input: Fix size not being applied when set from error props and descriptionProps (#​2603)
    • [@mantine/core] Fix incorrect loading state styles in Button and ActionIcon components (#​2618)
    • [@mantine/core] Fix scrollbar appearing in Select, MultiSelect and Autocomplete dropdown when withNormalizeCSS and withGlobalStyles are not set on MantineProvider
    • [@mantine/core] Revert Collapse axis prop to avoid issues with regular Collapse
    • [@mantine/core] Fix missing font styles in Select, MultiSelect and Autocomplete dropdown when withGlobalStyles is not set on MantineProvider
    • [@mantine/core] MultiSelect: fix dropdown flicker and onDropdownClose/onDropdownOpen handlers being called when dropdown isn't visible (#​2602)
    • [@mantine/core] Select: Fix incorrect dropdown opened state when input is clicked (#​2605)
    • [@mantine/core] List: Fix incorrect indentation for nested list items (#​2606)
    • [@mantine/core] SegmentedControl: Fix error with hook call order (#​2608)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.0...5.5.1

    v5.5.0

    Compare Source

    View changelog with demos on mantine.dev website

    Global styles on theme

    You can now add global styles with theme.globalStyles, this way, you will be able to share these styles between different environments (for example, Next.js application and Storybook):

    import { MantineProvider } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            globalStyles: (theme) => ({
              '*, *::before, *::after': {
                boxSizing: 'border-box',
              },
    
              body: {
                ...theme.fn.fontStyles(),
                backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
                color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.black,
                lineHeight: theme.lineHeight,
              },
    
              '.your-class': {
                backgroundColor: 'red',
              },
    
              '#your-id > [data-active]': {
                backgroundColor: 'pink',
              },
            }),
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    form.setValues partial

    form.setValues can now be used to set multiple values at once, payload will be shallow merged with current values state:

    import { useForm } from '@&#8203;mantine/form';
    
    const form = useForm({ initialValues: { name: '', email: '', age: 0 } });
    
    form.setValues({ name: 'John', age: 21 });
    form.values; // -> { name: 'John', email: '', age: 21 }
    

    Documentation updates

    Other changes

    • Checkbox indeterminate state now has separate styles for checked and unchecked states
    • Modal component now supports size="auto"
    • Checkbox, Radio and Switch components now support error, description and labelPosition props
    • Tooltip and Popover components now can be used with inline elements
    • Slider and RangeSlider components now support inverted prop
    • Collapse component now supports axis prop
    • Table component now supports withBorder and withColumnBorders props
    • NumberInput component now supports removeTrailingZeros prop
    • Popover and Menu components now support disabled prop
    • nprogress now supports new completeNavigationProgress handler

    New Contributors


    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.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


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

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency @types/node to v18

    Update dependency @types/node to v18

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @types/node (source) | 17.0.29 -> 18.11.16 | age | adoption | passing | confidence |


    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.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


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

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency typescript to v4.9.4

    Update dependency typescript to v4.9.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | typescript (source) | 4.8.4 -> 4.9.4 | age | adoption | passing | confidence |


    Release Notes

    Microsoft/TypeScript

    v4.9.4: TypeScript 4.9.4

    Compare Source

    For release notes, check out the release announcement.

    For the complete list of fixed issues, check out the

    Downloads are available on:

    Changes:

    This list of changes was auto generated.

    v4.9.3: TypeScript 4.9

    Compare Source

    For release notes, check out the release announcement.

    Downloads are available on:

    Changes:

    See More

    This list of changes was auto generated.


    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.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


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

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency @mantine/dropzone to v5.9.4

    Update dependency @mantine/dropzone to v5.9.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @mantine/dropzone (source) | 5.5.5 -> 5.9.4 | age | adoption | passing | confidence |


    Release Notes

    mantinedev/mantine

    v5.9.4

    Compare Source

    What's Changed

    • [@mantine/core] Switch: Fix incorrect alignment (#​3082)
    • [@mantine/dates] Fix DateRangePicker and DatePicker components not supporting readOnly prop (#​3089)
    • [@mantine/hooks] use-click-outside: Fix incorrect typescript definition for strict mode (#​3119)
    • [@mantine/core] Input: Fix incorrect Input.Error role, connect Input.Description and Input.Error to the input element with aria-describedby (#​3146)
    • [@mantine/tiptap] Fix control styles API working incorrectly for Link and Color control (#​3148)
    • [@mantine/modals] Increase default zIndex to allow usage with Modal component (#​3154)
    • [@mantine/hooks] use-click-outside: Fix incorrect outside clicks detection when click target is html element (#​3143)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.3...5.9.4

    v5.9.3

    Compare Source

    What's Changed

    • [@mantine/core] TypographyStylesProvider: Fix incorrect <code /> styles
    • [@mantine/styles] Allow createStyle to go to the original definition (#​3108)
    • [@mantine/core] Menu: Change hovered item background-color to make it consistent with other components (#​3109)
    • [@mantine/tiptap] Fix incorrect RichTextEditor ref type (#​3142)
    • [@mantine/form] Fix typing issue with nested interfaces in passed type (#​3157)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.2...5.9.3

    v5.9.2

    Compare Source

    What's Changed
    • [@mantine/form] Fix incorrect values type in validation rules (#​3110)
    • [@mantine/core] ScrollArea: Fix flickering
    • [@mantine/core] AppShell: Fix zIndex prop not being applied to Navbar and Header components
    • [@mantine/dropzone] Fix getFilesFromEvent error when files are droppped (#​3115)
    • [@mantine/core] Collapse: Rollback axis prop as it breaks regular Collapse usage

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.1...5.9.2

    v5.9.1

    Compare Source

    What's Changed
    • [@mantine/styles] Add access to theme in defaultProps (#​2950)
    • [@mantine/hooks] use-hotkeys: Add option to specify tags that should be ignored (#​3045)
    • [@mantine/form] Fix incorrect dirty state of the fields calculation after one of list actions was called (#​3025)
    • [@mantine/core] Select: Fix limit prop not working when current value matches one of the items from data (#​3070)
    • [@mantine/form] Fix incorrect form.isValid behavior when nested field has error (#​3080)
    • [@mantine/hooks] use-hash: Fix unexpected rerendering with hash without # (#​3097)
    • [@mantine/core] Add arrowPosition prop to Tooltip and Popover components to configure how the arrow is position relative to the target element (#​3100)
    • [@mantine/form] Fix implicit any type in validation rules for strict TS mode (#​3101)
    • [@mantine/core] TypographyStylesProvider: Add borderLeft to blockquote to make component look the same way as Blockquote component (#​3103)
    • [@mantine/core] Table: Fix incorrect styles applied to td/th elements with borders and colspan/rowspan (#​3106)
    • [@mantine/spotlight] Fix theme.defaultRadius not being respected
    • [@mantine/core] Select: Fix theme.defaultRadius not being respected by default item component
    • [@mantine/core] Radio: Automatically generate name if it was not provided via prop
    • [@mantine/dropzone] Add the getFilesFromEvent and validator props (#​3053)
    • [@mantine/hooks] use-media-query: Fix given initialValue not being used (#​3085)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.9.0...5.9.1

    v5.9.0

    Compare Source

    View changelog with demos on mantine.dev website

    use-eye-dropper hook

    New use-eye-dropper hook provides an interface to work with EyeDropper API. It allows to pick color from any pixel on the screen. Currently, the API is supported in Chromium based desktop browsers.

    import { useState } from 'react';
    import { ActionIcon, Group, ColorSwatch, Text } from '@&#8203;mantine/core';
    import { IconColorPicker } from '@&#8203;tabler/icons';
    import { useEyeDropper } from '@&#8203;mantine/hooks';
    
    function Demo() {
      const [color, setColor] = useState('');
      const [error, setError] = useState(null);
      const { supported, open } = useEyeDropper();
    
      const pickColor = async () => {
        try {
          const { sRGBHex } = await open();
          setColor(sRGBHex);
        } catch (e) {
          setError(e);
        }
      };
    
      if (!supported) {
        return <Text ta="center">EyeDropper API is not supported in your browser</Text>;
      }
    
      return (
        <Group>
          <ActionIcon variant="default" onClick={pickColor}>
            <IconColorPicker size={16} stroke={1.5} />
          </ActionIcon>
          {color ? (
            <Group spacing="xs">
              <ColorSwatch color={color} />
              <Text>Picked color: {color}</Text>
            </Group>
          ) : (
            <Text>Click the button to pick color</Text>
          )}
          {error && <Text color="red">Error: {error?.message}</Text>}
        </Group>
      );
    }
    

    ColorInput eye dropper

    ColorInput component now supports withEyeDropper prop to display eye dropper icon in the right section. This feature depends on EyeDropper API, the eye dropper will not be rendered if the API is not supported.

    import { ColorInput } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <ColorInput
          withEyeDropper
          placeholder="With eye dropper"
          label="Pick any color from the page"
        />
      );
    }
    

    AppShell alt layout

    AppShell component now supports placing Navbar and Aside components on top of Header and Footer with layout="alt" prop.

    Responsive Grid gutter

    Grid component now supports gutterXs, gutterSm, gutterMd, gutterLg, gutterXl props:

    import { Grid } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Grid gutter={5} gutterXs="md" gutterMd="xl" gutterXl={50}>
          <Grid.Col span={4}>1</Grid.Col>
          <Grid.Col span={4}>2</Grid.Col>
          <Grid.Col span={4}>3</Grid.Col>
        </Grid>
      );
    }
    

    Static components default props

    All static components now support default props on MantineProvider. The following example demonstrates how to add default props to Menu.Item, Tabs.List and RichTextEditor.Toolbar components:

    import { MantineProvider, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <MantineProvider
          theme={{
            components: {
              MenuItem: {
                defaultProps: { color: 'red' },
              },
    
              TabsList: {
                defaultProps: {
                  position: 'right',
                },
              },
    
              RichTextEditorToolbar: {
                defaultProps: {
                  sticky: true,
                  stickyOffset: 60,
                },
              },
            },
          }}
        >
          <App />
        </MantineProvider>
      );
    }
    

    Input.Placeholder component

    Input.Placeholder component can be used to add placeholder to Input and InputBase components that are based on button element or do not support placeholder property natively:

    import { Input } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Input component="button">
          <Input.Placeholder>Placeholder content</Input.Placeholder>
        </Input>
      );
    }
    

    Other changes

    • RangeSlider component now supports maxRange prop
    • Stepper component now supports any CSS color value in color prop
    • use-hotkeys hook now allows to configure whether default behavior should be prevented
    • Input and other components based on it now support any valid CSS size value in rightSectionWidth and iconWidth props

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.4...5.9.0

    v5.8.4

    Compare Source

    What's Changed

    • [@mantine/tiptap] Fix emotion warning produced by placeholder styles :first-child selector usage
    • [@mantine/hooks] use-move: Fix content on the page being selected when cursor moves over the target element (#​3069)
    • [@mantine/core] Drawer: Add missing Styles API selector for body (#​3056)
    • [@mantine/carousel] Carousel: fixed carousel indicator not changing when slidesToScroll value is changed (#​3058)
    • [@mantine/core] Stepper: Fix last item being cut off when used inside flex container (#​3062)
    • [@mantine/core] Fix incorrect arrow position for *-end and *-start positions in Tooltip, Popover, HoverCard and Menu components (#​3065)
    • [@mantine/tiptap] Add ref forwarding (#​3068)

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.3...5.8.4

    v5.8.3

    Compare Source

    What's Changed

    • [@mantine/dropzone] Add onDropAny prop to capture both accepted and rejected files (#​3010)
    • [@mantine/tiptap] Fix incorrect content border-radius
    • [@mantine/tiptap] Fix placeholder extension not working as expected
    • [@mantine/core] Drawer: Add missing aria-describedby and aria-labelledby attributes to the root element (#​3027)
    • [@mantine/core] NumberInput: Fix value not being formatted correctly when precision changes (#​3011)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.2...5.8.3

    v5.8.2

    What's Changed

    • [@mantine/tiptap] Fix incorrect hr control label
    • [@mantine/tiptap] Fix incorrect editor prop type
    • [@mantine/tiptap] Fix typo in strikethrough label (#​3004)
    • [@mantine/prism] Fix colorScheme prop not being passed to Prism from Prism.Panel component
    • [@mantine/core] Pagination: Fix incorrect handling of negative and zero total
    • [@mantine/hooks] use-pagination: Fix incorrect handling of decimal values passed as total (#​2979)
    • [@mantine/core] NumberInput: Fix readOnly prop not working correctly (#​2956)
    • [@mantine/hooks] Allow usage of use-click-outside and use-focus-trap hooks with shadow DOM

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.8.0...5.8.2

    v5.8.0

    Compare Source

    View changelog with demos on mantine.dev website

    Tiptap rich text editor

    New @​mantine/tiptap package is a replacement for @​mantine/rte package. RichTextEditor component is now based on Tiptap, it supports all of Tiptap extensions and provides flexible components API.

    import { RichTextEditor, Link } from '@&#8203;mantine/tiptap';
    import { useEditor } from '@&#8203;tiptap/react';
    import Highlight from '@&#8203;tiptap/extension-highlight';
    import StarterKit from '@&#8203;tiptap/starter-kit';
    import Underline from '@&#8203;tiptap/extension-underline';
    import TextAlign from '@&#8203;tiptap/extension-text-align';
    import Superscript from '@&#8203;tiptap/extension-superscript';
    import SubScript from '@&#8203;tiptap/extension-subscript';
    
    const content =
      '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
    
    function Demo() {
      const editor = useEditor({
        extensions: [
          StarterKit,
          Underline,
          Link,
          Superscript,
          SubScript,
          Highlight,
          TextAlign.configure({ types: ['heading', 'paragraph'] }),
        ],
        content,
      });
    
      return (
        <RichTextEditor editor={editor}>
          <RichTextEditor.Toolbar sticky stickyOffset={60}>
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Bold />
              <RichTextEditor.Italic />
              <RichTextEditor.Underline />
              <RichTextEditor.Strikethrough />
              <RichTextEditor.ClearFormatting />
              <RichTextEditor.Highlight />
              <RichTextEditor.Code />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.H1 />
              <RichTextEditor.H2 />
              <RichTextEditor.H3 />
              <RichTextEditor.H4 />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Blockquote />
              <RichTextEditor.Hr />
              <RichTextEditor.BulletList />
              <RichTextEditor.OrderedList />
              <RichTextEditor.Subscript />
              <RichTextEditor.Superscript />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.Link />
              <RichTextEditor.Unlink />
            </RichTextEditor.ControlsGroup>
    
            <RichTextEditor.ControlsGroup>
              <RichTextEditor.AlignLeft />
              <RichTextEditor.AlignCenter />
              <RichTextEditor.AlignJustify />
              <RichTextEditor.AlignRight />
            </RichTextEditor.ControlsGroup>
          </RichTextEditor.Toolbar>
    
          <RichTextEditor.Content />
        </RichTextEditor>
      );
    }
    

    @​mantine/rte package deprecation

    Quill based RichTextEditor is now deprecated. @mantine/rte package will no longer receive any updates, support for it will be discontinued when 6.0.0 version is released. We recommend to switch to Tiptap based editor as soon as possible.

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.2...5.8.0

    v5.7.2

    Compare Source

    What's Changed
    • [@mantine/core] RangeSlider: Fix incorrect minRange handling for negative values (#​2897)
    • [@mantine/core] Slider: Fix unexpected step behavior when min is set to odd number (#​2855)
    • [@mantine/core] Prevent focus shifting from the input when clear button is pressed in Select and MultiSelect components
    • [@mantine/core] TypographyStylesProvider: Add mark styles
    • [@mantine/core] Image: Do not show placeholder when image is loading to avoid issues with ssr and rapidly changing src prop
    • [@mantine/core] Slider: Fix incorrect marks styles when inverted prop is set (#​2894)
    • [@mantine/core] Fix incorrect label alignment in Checkbox, Radio and Switch components when label is a ReactNode (#​2881)
    • [@mantine/core] Modal: Fix incorrect click outside behavior (#​2896)
    • [@mantine/core] Radio: Fix size prop not being respected when used within Radio.Group (#​2913)
    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.1...5.7.2

    v5.7.1

    Compare Source

    What's Changed

    • [@mantine/hooks] use-window-event: Fix event listener not being updated when event type or function changes
    • [@mantine/spotlight] Allow overriding autoComplete prop with searchInputProps
    • [@mantine/core] Menu: Allow overriding Menu.Item button type
    • [@mantine/hooks] use-scroll-into-view: Fix parameters changes being ignored (#​2866)
    • [@mantine/hooks] use-local-storage: Fix incorrect value returned if defaultValue is not specified (#​2872)
    • [@mantine/styles] Add missing right style prop (#​2887)
    • [@mantine/form] Add missing TransformValues type to createFormContext (#​2893)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.7.0...5.7.1

    v5.7.0

    Compare Source

    View changelog with demos on mantine.dev website

    Style props

    All Mantine components now support responsive style props:

    import { Box } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Box
          w={{ base: 200, sm: 400, lg: 500 }}
          py={{ base: 'xs', sm: 'md', lg: 'xl' }}
          bg="blue.7"
          c="#fff"
          ta="center"
          mx="auto"
        >
          Box with responsive style props
        </Box>
      );
    }
    

    Flex component

    Flex component is an alternative to Group and Stack components. It supports new responsive style props:

    import { Flex, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      return (
        <Flex
          direction={{ base: 'column', sm: 'row' }}
          gap={{ base: 'sm', sm: 'lg' }}
          justify={{ sm: 'center' }}
        >
          <Button>Button 1</Button>
          <Button>Button 2</Button>
          <Button>Button 3</Button>
        </Flex>
      );
    }
    

    Focus ring styles on theme

    You can now customize focus ring styles for all components in MantineProvider:

    function Demo() {
      return (
        <MantineProvider
          inherit
          theme={{
            focusRingStyles: {
              // reset styles are applied to <button /> and <a /> elements
              // in &:focus:not(:focus-visible) selector to mimic
              // default browser behavior for native <button /> and <a /> elements
              resetStyles: () => ({ outline: 'none' }),
    
              // styles applied to all elements expect inputs based on Input component
              // styled are added with &:focus selector
              styles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
    
              // focus styles applied to components that are based on Input
              // styled are added with &:focus selector
              inputStyles: (theme) => ({ outline: `2px solid ${theme.colors.orange[5]}` }),
            },
          }}
        >
          <Group grow>
            <Button>Move focus with tab</Button>
            <TextInput placeholder="Focus input to see styles override" />
          </Group>
        </MantineProvider>
      );
    }
    

    Responsive Header and Footer height

    Header and Footer components now support responsive height:

    import { Header } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Header height={{ base: 50, sm: 60, lg: 70 }} />;
    }
    

    Other changes

    • Collapse component now supports axis prop, it is now possible to animate width
    • Button component now supports loaderPosition="center"
    • Carousel now supports onSlideChange prop
    • MantineProvider now includes theme.primaryColor validation – it will throw an error if primary color was set to an invalid value
    • use-form onSubmit can now be called without form event
    • Carousel now supports withKeyboardEvents prop that allows to disable keyboard events handling

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.4...5.7.0

    v5.6.4

    Compare Source

    What's Changed

    • [@mantine/core] Slider: Fix incorrect min/max values handling (#​2839)
    • [@mantine/core] ScrollArea: Fix incorrect ref usage in demos

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.3...5.6.4

    v5.6.3

    Compare Source

    What's Changed

    • [@mantine/core] Fix incorrect focus ring styles in Chip, SegmentedControl and ColorPicker components (box-shadow was replaced with outline)
    • [@mantine/core] Drawer: Fix transitionDuration not being respected for exit transition (#​2820)
    • [@mantine/core] Pagination: Fix theme.fontFamily not being respected (#​2796)
    • [@mantine/form] Fix required transform value type in UseFormInput (#​2816)
    • [@mantine/styles] Set color-scheme style in html element (#​2808)
    • [@mantine/core] Add data-checked attribute to Checkbox, Radio and Switch when components are used within groups
    • [@mantine/styles] Fix incorrect styles params type in strict ts mode

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.2...5.6.3

    v5.6.2

    Compare Source

    What's Changed

    • [@mantine/core] Modal: Fix modal not being centered because of scrollbars offset
    • [@mantine/core] MultiSelect: Fix poor selected values contrast with light color scheme and filled input variant
    • [@mantine/dropzone] Fix Dropzone.FullScreen opened when the user selects and drags text on the page
    • [@mantine/core] NativeSelect: Fix incorrect defaultValue handing in controlled components
    • [@mantine/rte] Fix theme.defaultRadius not being respected by some controls (#​2781)
    • [@mantine/styles] Improve useComponentDefaultProps types (#​2065)
    • [@mantine/core] Add arrowRadius support to Tooltip and Popover (#​2779)

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.1...5.6.2

    v5.6.1

    Compare Source

    What's Changed

    • [@mantine/core] Popover: Set default width to max-content to reduce position shift in some cases (#​2500)
    • [@mantine/core] Popover: Add position fallback to reduce postion shift (#​2500)
    • [@mantine/core] Slider: Fix incorrect min/max boundaries handling when step is larger than the difference between current value and min/max (#​2656)
    • [@mantine/hooks] use-idle: Improve types for events (#​2704)
    • [@mantine/hooks] use-focus-trap: Fix incorrect aria-hidden handling (#​2735)
    • [@mantine/core] Popover: Fix infinite loop when component is used with Preact (#​2752)
    • [@mantine/core] Tooltip: Add nested tooltips support (#​2768)
    • [@mantine/core] TransferList: Add transferIcon, transferAllIcon props, controlled search and tuple syntax for seachPlaceholder and nothingFound props (#​2769)
    • [@mantine/dropzone] Update react-dropzone to 14.2.3 to fix OS detection issue (#​2746)
    • [@mantine/form] Fix incorrect required second argument in UseFormReturnType (#​2758)
    • [@mantine/core] Rating: Fix count and fractions parameters to accept integers only (#​2763)
    • [@mantine/core] Rating: Fix broken react 17 compatibility

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.6.0...5.6.1

    v5.6.0

    Compare Source

    View changelog with demos on mantine.dev website

    Rating component

    New Rating component:

    import { Rating } from '@&#8203;mantine/core';
    
    function Demo() {
      return <Rating defaultValue={2} />
    }
    

    Progress sections props

    Progress and RingProgress components now support adding props to sections:

    import { useState } from 'react';
    import { Progress, Text } from '@&#8203;mantine/core';
    
    function Demo() {
      const [hovered, setHovered] = useState(-1);
      const reset = () => setHovered(-1);
      return (
        <>
          <Progress
            onMouseLeave={() => setHovered(-1)}
            size="xl"
            sections={[
              { value: 40, color: 'cyan', onMouseEnter: () => setHovered(0), onMouseLeave: reset },
              { value: 20, color: 'blue', onMouseEnter: () => setHovered(1), onMouseLeave: reset },
              { value: 15, color: 'indigo', onMouseEnter: () => setHovered(2), onMouseLeave: reset },
            ]}
          />
          <Text>Hovered section: {hovered === -1 ? 'none' : hovered}</Text>
        </>
      );
    }
    

    use-favicon hook

    New use-favicon hook:

    import { useState } from 'react';
    import { useFavicon } from '@&#8203;mantine/hooks';
    import { Group, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
      const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
      const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
    
      useFavicon(favicon);
    
      return (
        <Group position="center">
          <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
          <Button onClick={setMantineFavicon}>Mantine favicon</Button>
        </Group>
      );
    }
    

    Form index reference in validateInputOnBlur and validateInputOnChange

    You can now use FORM_INDEX in use-form to validate nested array fields with validateInputOnBlur and validateInputOnChange settings:

    import { useForm, FORM_INDEX } from '@&#8203;mantine/form';
    import { NumberInput, TextInput, Button } from '@&#8203;mantine/core';
    
    function Demo() {
      const form = useForm({
        validateInputOnChange: [
          'email',
          'name',
          // use FORM_INDEX to reference fields indices
          `jobs.${FORM_INDEX}.title`,
        ],
        initialValues: { name: '', email: '', age: 0, jobs: [{ title: '' }, { title: '' }] },
    
        // functions will be used to validate values at corresponding key
        validate: {
          name: (value) => (value.length < 2 ? 'Name must have at least 2 letters' : null),
          email: (value) => (/^\S+@&#8203;\S+$/.test(value) ? null : 'Invalid email'),
          age: (value) => (value < 18 ? 'You must be at least 18 to register' : null),
          jobs: {
            title: (value) => (value.length < 2 ? 'Job must have at least 2 letters' : null),
          },
        },
      });
    
      return (
        <form style={{ maxWidth: 320, margin: 'auto' }} onSubmit={form.onSubmit(console.log)}>
          <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
          <TextInput mt="sm" label="Email" placeholder="Email" {...form.getInputProps('email')} />
          <NumberInput
            mt="sm"
            label="Age"
            placeholder="Age"
            min={0}
            max={99}
            {...form.getInputProps('age')}
          />
          <TextInput
            mt="sm"
            label="Job 1"
            placeholder="Job 1"
            {...form.getInputProps('jobs.0.title')}
          />
          <TextInput
            mt="sm"
            label="Job 2"
            placeholder="Job 2"
            {...form.getInputProps('jobs.1.title')}
          />
          <Button type="submit" mt="sm">
            Submit
          </Button>
        </form>
      );
    }
    

    use-form transformValues

    use-form now supports transformValues options, it transforms values before they get submitted in onSubmit handler. For example, it can be used to merge several fields into one or to convert types:

    import { useState } from 'react';
    import { useForm } from '@&#8203;mantine/form';
    import { TextInput, Button, Box, Code } from '@&#8203;mantine/core';
    
    function Demo() {
      const [submittedValues, setSubmittedValues] = useState('');
    
      const form = useForm({
        initialValues: {
          firstName: 'Jane',
          lastName: 'Doe',
          age: '33',
        },
    
        transformValues: (values) => ({
          fullName: `${values.firstName} ${values.lastName}`,
          age: Number(values.age) || 0,
        }),
      });
    
      return (
        <Box sx={{ maxWidth: 400 }} mx="auto">
          <form
            onSubmit={form.onSubmit((values) => setSubmittedValues(JSON.stringify(values, null, 2)))}
          >
            <TextInput
              label="First name"
              placeholder="First name"
              {...form.getInputProps('firstName')}
            />
            <TextInput
              label="Last name"
              placeholder="Last name"
              mt="md"
              {...form.getInputProps('lastName')}
            />
            <TextInput
              type="number"
              label="Age"
              placeholder="Age"
              mt="md"
              {...form.getInputProps('age')}
            />
            <Button type="submit" mt="md">
              Submit
            </Button>
          </form>
    
          {submittedValues && <Code block>{submittedValues}</Code>}
        </Box>
      );
    }
    

    Other changes

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.6...5.6.0

    v5.5.6

    Compare Source

    What's Changed

    • [@mantine/core] Tooltip: Add position fallback to reduce position shift (#​2500)
    • [@mantine/dates] Remove obsolette props from Calendar and DatePicker components (#​2648, #​2714)
    • [@mantine/core] Image: Fix incorrect placeholder size calculation when width/height is not set (#​2675)
    • [@mantine/core] Popover: Fix issue when dropdown could be scrolled pass its target (#​2694)
    • [@mantine/core] Menu: Fix incorrect logic for controlled opened state (#​2701)
    • [@mantine/core] PasswordInput: Fix inputContainer and iconWidth props not working

    New Contributors

    Full Changelog: https://github.com/mantinedev/mantine/compare/5.5.5...5.5.6


    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.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


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

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update nextjs monorepo to v12.3.4

    Update nextjs monorepo to v12.3.4

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | eslint-config-next | 12.3.1 -> 12.3.4 | age | adoption | passing | confidence | | next (source) | 12.3.1 -> 12.3.4 | age | adoption | passing | confidence |


    Release Notes

    vercel/next.js (eslint-config-next)

    v12.3.4

    Compare Source

    v12.3.3

    Compare Source

    v12.3.2

    Compare Source

    vercel/next.js (next)

    v12.3.4

    Compare Source

    v12.3.3

    Compare Source

    v12.3.2

    Compare Source


    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.

    🔕 Ignore: Close this PR and you won't be reminded about these updates again.


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

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
  • Update dependency @types/react to v18.0.26

    Update dependency @types/react to v18.0.26

    Mend Renovate

    This PR contains the following updates:

    | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @types/react (source) | 18.0.21 -> 18.0.26 | age | adoption | passing | confidence |


    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.

    🔕 Ignore: Close this PR and you won't be reminded about this update again.


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

    This PR has been generated by Mend Renovate. View repository job log here.

    opened by renovate[bot] 0
Owner
Emma Böcker
Your average Developer (but better) they/she 🏳️‍🌈
Emma Böcker
Next-multipart - Easy & Simple File Uploads for Next.js

Next-Multipart Next-multipart is a small utility library to ease the process of file uploads with Next.js. It uses formidable under the hood, but with

Tim Raderschad 10 Nov 11, 2022
Notices on a digital platform are quick and easy to access, reduce a lot of paper waste, and one can get notified about the updates and news.

DigitalNoticeBoard - Mobile App - (Still In DEV) An Notice Board App for Students To Stay Connected With The College Updates..! Why a college campus n

Badineni Sai Vardhan 6 Nov 24, 2022
Parcel Next JS - A simple website with Authentication and basic API calls to a backend system.

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Subham Roy 1 Jan 2, 2022
IngredientRecipeFinder - Web app built with react using Edamam API to find any recipe for an ingredient search with nutrition filters (high protein, low carb,etc)

Ingredient Recipe Finder Web app This web app built with the use of Edamam API allows you to find any type of recipe for a specific ingredient you are

null 1 Jan 4, 2022
🌠 just a personal card inspired by Discord's Profile

Discord Profile Card This is a personal card inspired by Discord's Profile. Shows your info and presence activities on real time. Table of contents Di

Leep? 7 Oct 21, 2022
Quizzical is a WebApp that access trivia questions from the Open Trivia Database API and score players based on their answers

Quizzical is a WebApp that access trivia questions from the Open Trivia Database API and score players based on their answers

Anshul Verma 1 Jan 22, 2022
This website was designed to allow viewers complete access to all movie and tv series trailers. It was created using React + MUI

Trailer - Time ?? Demo https://trailer-time.netlify.app/ ?? about This project is a simplified front end clone of some movie webside (like Netflix/Hul

null 9 Aug 24, 2022
Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Edvora App is a web application based on an external API, showing data about different types of products and the user can filter these data by choosing a specific state, city or product name. Build with React.js

Kyrillos Hany 5 Mar 11, 2022
A web app built with Covid-19-API that displays Covid 19 cases, deaths and recovery per country in the entire World

Covid19 Tracker A web app built with Covid-19-API that displays Covid 19 cases, deaths and recovery per country in the entire World Built With HTML, C

Promise Okechukwu 4 Nov 1, 2022
Single Page Application built using React, Context API and OMDb API.

Movie Search App This project is a React application with functions to search for movies and add movies to favorites using OMDb API. Home Page Favorit

Efecan Pınar 24 Sep 6, 2022
The chat app built with microservice architecture, the app using: Lerna, pm2, GraphQL

Microservice Chat App A microservice app! Built With Lerna pm2 Graphql Sequelize Socket.io About The Project Here's why: I want learn socket.io and mi

A.Samet Palitci 26 Aug 27, 2022
This is a minimal Next.js app where you can create birthday wishes and share the link to anyone :)

Happy Birthday Wisher Check out the Live Website This is a simple Next.js project where you can generate a birthday wish for someone. Just enter their

Gourav Khunger 21 Dec 22, 2022
An inventory and financial control system created in Next.js and Redux

An inventory and financial control system created in Next.js and Redux

Marcos Andre 25 Nov 10, 2022
An in-development version of the new CTFGuide. Built with React.js.

In the project directory, you can run: npm start Runs the app in the development mode. Open http://localhost:3000 to view it in your browser. The page

CTFGuide 16 Dec 20, 2022
A system for sharing tests between students. In RepoProvas anyone can look up old tests for their subjects and teachers or send old tests to help other students!

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Rui Neto 6 May 10, 2022
:atom_symbol: React primitive UI components built with styled-system.

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

Rebass 7.9k Dec 31, 2022
Hotel Booking System Built In MERN (MongoDB, ExpressJs, ReactJs, Nodejs) Stack.

Setting Up The Project Please Run The Commands Below to Run the Project git clone https://github.com/yishakdotjs/yishakdotjs-Hotel-Booking-System-Fron

Yishak Abraham 1 Feb 3, 2022
A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Franklin Okolie 4 Jun 5, 2022
React-app - Building volume rendering web app with VTK.js,react & HTML Using datasets provided in vtk examples (head for surface rendering and chest for ray casting)

SBE306 Assignment 4 (VTK) data : Directory containing Head and Ankle datasets Description A 3D medical viewer built with vtk-js Team Team Name : team-

Mustafa Megahed  2 Jul 19, 2022