dashdot icon indicating copy to clipboard operation
dashdot copied to clipboard

Published 20 hours ago • verified publisher icon MauriceNino

chore(deps): upgrade @mantine/hooks to v5.5.5

Open renovate[bot] opened this issue 3 years ago • 1 comments

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mantine/hooks (source) 5.3.3 -> 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

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 '@​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

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[bot] avatar Sep 19 '22 12:09 renovate[bot]

Nx Cloud Report

CI is running for commit f5cac78665ed7458249d77967af03b61090e9c2f.

📂 Click to track the progress, see the status, the terminal output, and the build insights.

Sent with 💌 from NxCloud.

nx-cloud[bot] avatar Sep 19 '22 12:09 nx-cloud[bot]