mantine

A fully featured React components library

MIT License

Downloads
13.1M
Stars
26.4K
Committers
574
View Code on GitHub Visit Website View on X
Ecosystems: React, TypeScript, Next, Gatsby

Bot releases are hidden (Show)

mantine - 5.7.2

Published by rtivital almost 2 years ago

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

mantine - 5.7.1

Published by rtivital almost 2 years ago

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

mantine - 5.7.0

Published by rtivital almost 2 years ago

View changelog with demos on mantine.dev website

Style props

All Mantine components now support responsive style props:

import { Box } from '@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 '@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 '@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

mantine - 5.6.4

Published by rtivital almost 2 years ago

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

mantine - 5.6.3

Published by rtivital almost 2 years ago

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

mantine - 5.6.2

Published by rtivital almost 2 years ago

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

mantine - 5.6.1

Published by rtivital almost 2 years ago

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

mantine - 5.6.0

Published by rtivital almost 2 years ago

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 '@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 '@mantine/hooks';
import { Group, Button } from '@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 '@mantine/form';
import { NumberInput, TextInput, Button } from '@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+@\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 '@mantine/form';
import { TextInput, Button, Box, Code } from '@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

mantine - 5.5.6

Published by rtivital about 2 years ago

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

mantine - 5.5.5

Published by rtivital about 2 years ago

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

mantine - 5.5.4

Published by rtivital about 2 years ago

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

mantine - 5.5.2

Published by rtivital about 2 years ago

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

mantine - 5.5.1

Published by rtivital about 2 years ago

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

mantine - 5.5.0

Published by rtivital about 2 years ago

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

mantine - 5.4.2

Published by rtivital about 2 years ago

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

mantine - 5.4.1

Published by rtivital about 2 years ago

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

mantine - 5.4.0

Published by rtivital about 2 years ago

View changelog with demos on mantine.dev website

validateInputOnBlur

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

import { useForm } from '@mantine/form';
import { NumberInput, TextInput, Button } from '@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+@\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 '@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 '@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 '@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 '@mantine/hooks';
import { PasswordInput, Stack } from '@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

mantine - 5.3.3

Published by rtivital about 2 years ago

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

mantine - 5.3.2

Published by rtivital about 2 years ago

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

mantine - 5.3.1

Published by rtivital about 2 years ago

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

Package Rankings
Top 0.48% on Npmjs.org
Badges
Extracted from project README
NPM GitHub contributors npm npm Help wanted Discord X Follow
Related Projects
digital-garden

An open source blog (digital garden) template for developers

14 Jun 2023 257
easyreadme

Easyreadme helps you simplify README creation and generate visually stunning ones with the help o...

03 Sep 2023 168