Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Jump to bottom

Update dependency @mantine/core to v5.6.2 - autoclosed #4

Closed
wants to merge 1 commit into from
Closed

Update dependency @mantine/core to v5.6.2 - autoclosed #4

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Oct 18, 2022 •
edited

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mantine/core (source) ^5.0.2 -> 5.6.2 age adoption passing confidence

Release Notes

mantinedev/mantine

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: mantinedev/mantine@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: mantinedev/mantine@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 '@​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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@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: mantinedev/mantine@5.1.7...5.2.0

v5.1.7

Compare Source

What's Changed
  • [@mantine/core] Add option to not call onChan

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.

@renovate renovate bot force-pushed the renovate/mantine-core-5.x branch 3 times, most recently from a2fbd8c to 74fa9d2 Compare October 18, 2022 14:51
@renovate renovate bot changed the title Update dependency @mantine/core to v5.5.5 Update dependency @mantine/core to v5.5.6 Oct 18, 2022
@renovate renovate bot force-pushed the renovate/mantine-core-5.x branch 6 times, most recently from ef68c4d to 13e034d Compare October 20, 2022 10:50
@renovate renovate bot changed the title Update dependency @mantine/core to v5.5.6 Update dependency @mantine/core to v5.6.0 Oct 20, 2022
@renovate renovate bot force-pushed the renovate/mantine-core-5.x branch 2 times, most recently from be1de4f to 32f4e66 Compare October 22, 2022 11:31
@renovate renovate bot changed the title Update dependency @mantine/core to v5.6.0 Update dependency @mantine/core to v5.6.1 Oct 22, 2022
@renovate renovate bot force-pushed the renovate/mantine-core-5.x branch from 32f4e66 to ef7cd21 Compare October 22, 2022 22:17
@renovate renovate bot force-pushed the renovate/mantine-core-5.x branch from ef7cd21 to b3318b6 Compare October 24, 2022 17:03
@renovate renovate bot changed the title Update dependency @mantine/core to v5.6.1 Update dependency @mantine/core to v5.6.2 Oct 24, 2022
@renovate renovate bot changed the title Update dependency @mantine/core to v5.6.2 Update dependency @mantine/core to v5.6.2 - autoclosed Oct 26, 2022
@renovate renovate bot closed this Oct 26, 2022
@renovate renovate bot deleted the renovate/mantine-core-5.x branch October 26, 2022 11:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
0 participants