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.3.0

Published by rtivital about 2 years ago

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 '@mantine/form';
import { TextInput } from '@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 '@mantine/core';
import { usePrevious, useInputState } from '@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

mantine - 5.2.7

Published by rtivital about 2 years ago

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

mantine - 5.2.6

Published by rtivital about 2 years ago

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

mantine - 5.2.5

Published by rtivital about 2 years ago

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

mantine - 5.2.4

Published by rtivital about 2 years ago

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)
  • [@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

mantine - 5.2.3

Published by rtivital about 2 years ago

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

Published by rtivital about 2 years ago

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

mantine - 5.2.0

Published by rtivital about 2 years ago

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 '@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 '@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 '@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 '@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 '@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 '@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 '@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 '@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 '@mantine/prism';

const demoCode = `import { Button } from '@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

mantine - 5.1.7

Published by rtivital about 2 years ago

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

mantine - 5.1.6

Published by rtivital about 2 years ago

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

mantine - 5.1.5

Published by rtivital about 2 years ago

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

mantine - 5.1.4

Published by rtivital about 2 years ago

  • [@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

mantine - 5.1.3

Published by rtivital about 2 years ago

  • [@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

mantine - 5.1.1

Published by rtivital about 2 years ago

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

mantine - 5.1.0

Published by rtivital about 2 years ago

Colors index reference

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

import { Button, Text, Stack } from '@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 '@mantine/form';
import { TextInput, Text } from '@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 '@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 '@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 '@mantine/hooks';
import { TextInput, Text } from '@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.Control component now has data-active attribute when Accordion.Item is expanded
  • RichTextEditor now uses value instead of defaultValue to manage state, note that component does not support react strict mode
  • Spotlight now supports disabled prop to prevent spotlight rendering when the prop is set to true
  • Select and MultiSelect components now support readOnly prop
  • use-toggle hook can now be called without options, it will use boolean values by default
  • Spotlight now supports searchInputProps prop that spreads props to search input
  • Popover.Dropdown now has data-position attribute with current position

New Contributors

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

mantine - 5.0.3

Published by rtivital about 2 years ago

What's Changed

  • Fix unexpected background-image property in Button (#1850)
  • Remove replaceAll to support server side rendering with Node.js 14
  • DatePicker is no longer opened on clear by default
  • Fix unexpected NaN value appearing when up and down keys are pressed with empty value in NumberInput component
  • Fix broken "Save" button styles in RichTextEditor when used within Collapse or Accordion
  • Fix incosistent controls and inputs colors in RichTextEditor
  • Fix poor NumberInput performance in Safari and issues with parser/formatter cursor position (#1968)
  • Fix incorrect color prop type in Burger component
  • Fix incorrect unknown values handling in MultiSelect component
  • Add yearLabelFormat prop to Calendar component to allow overriding years format in year and month pickers
  • Fix incorrect unstyled prop handling in Input.Description component
  • Fix incorrect Image component placeholder styles when Image is used with fixed width and height and container is smaller than image size
  • Fix incorrect height calculation when children have top or bottom margin in Spoiler component
  • Fix incorrect hex values conversion in ColorPicker component for swatches used in ColorPicker component which resulted in slightly modiflied color being selected when color swatch was clicked
  • Update embla packages to version 7.0.0 (React 18 peer dependency support)
  • Set height: 'auto' in Divider component to simplify usage with flexbox containers (#1991)
  • Fix unexpected modalId on modal div element in @mantine/modals package
  • Fix incorrect mentions styles in RichTextEditor component (#1950)
  • Add withBorder prop to Header, Navbar, Aside and Footer components (#1939)
  • Add role="separator" attribute to Divider component (#1933)
  • Fix incorrect Skeleton border-radius in Safari
  • Fix incorrect ActionIcon background for disabled state in transparent variant

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.0.2...5.0.3

mantine - 5.0.2

Published by rtivital about 2 years ago

What's Changed

  • Add offset prop to configure spacing between inputs and label in Checkbox.Group and Radio.Group components
  • Improve type definition for effect callback in use-did-update hook
  • Add DateRangePickerValue type export to @mantine/dates package
  • Fix broken Styles API in Switch component
  • Change use-uncontrolled hook logic to call onChange handler even if state is uncontrolled
  • Fix incorrect disabled Radio styles applied when disabled={false}
  • Fix FileInput component submitting form when clicked
  • Disable user-select in Slider thumb and tooltip
  • Fix incorrect disabled prop handling in uncontrolled Select and MultiSelect components
  • Fix onClose function not being called when Menu is closed with outside click or with escape key
  • Allow overriding Menu dropdown padding with classNames and styles props
  • Forward className in Tooltip component to target element to allow usage with Group and MediaQuery components
  • Fix incorrect cancelation handling in FileButton component when there was previously picked file (#1854)
  • Disable years before 100 in Calendar component to avoid Date object collisions (#1758)
  • Preserve cursor position on format/parse in NumberInput component (#1908)
  • Add translate="no" attribute to Prism and Prism.Tabs components to avoid browser translations of code (#1891)
  • Add resetOnExit option to use-mouse hook (#1893)
  • Add better types inferring to use-toggle hook with as const (#1892)
  • Fix incorrect value formatting for locales in which month name starts with lowercase letter in DatePicker component (#1845)
  • Fix incorrect disabled state handling for clearable Select component (#1843)
  • Fix incorrect MultiSelect placeholder color in Firefox
  • Migrate @mantine/form from lodash.clonedeep to klona to decrease bundle size
  • Fix incorrect nested lists validation logic in @mantine/form (#1861)
  • Clear list errors when list item is removed to avoid stale errors in @mantine/form
  • Add option to set visibility toggle button aria-label in PasswordInput component
  • Fix missing Prism props forwarding in Prism.Panel component
  • Rename id option to modalId to avoid errors with React 18 in @mantine/modals package

New Contributors

Full Changelog: https://github.com/mantinedev/mantine/compare/5.0.0...5.0.2

mantine - 5.0.0

Published by rtivital about 2 years ago

View changelog with demos on Mantine website

Components API changes

Tabs

Tabs and associated Prism.Tabs components now have new API.
New API provides the following enhancements:

  • Tabs are now more accessible
  • Tabs content no longer unmounts on tab change, it is hidden with display: none
  • It is now easier to manage controlled tabs state with string value instead of index
  • With new component structure it is now easier to modify styles of each part with sx or classname props

Tabs component now supports the following new props:

  • radius prop (defaults to theme.defaultRadius)
  • inverted prop allows to display panels before controls
  • loop prop control arrow keys behavior (allows to go from first to last and vice versa)
  • activateTabWithKeyboard prop controls how tabs respond to arrows and Home/End key presses
  • allowTabDeactivation prop allows user to deactivate current active tab

Accordion

Accordion component now has new API with the following new props:

  • variant prop controls visuals, Accordion now has 4 variants
  • radius prop (defaults to theme.defaultRadius) controls border-radius for all variants except default
  • loop prop control arrow keys behavior (allows to go from first to last and vice versa)
  • disabled prop allows to disable items
  • icon prop adds icon to the opposite side of chevron

Tooltip

Tooltip now requires children to be an element or a component,
string, numbers, fragments and multiple elements are no longer supported. In addition to that Tooltip no longer wraps target
element with div tag, events are added directly to target element.

import { Tooltip, Badge } from '@mantine/core';

function Demo() {
  return (
    <>
      <Tooltip label="OK">
        <button>Native button – ok</button>
      </Tooltip>

      <Tooltip label="OK">
        <Badge>Mantine component – ok</Badge>
      </Tooltip>

      <Tooltip label="Throws">Raw string, NOT OK – will throw error</Tooltip>

      {/* Number, NOT OK – will throw error */}
      <Tooltip label="Throws">{2}</Tooltip>

      <Tooltip label="Throws">
        <>Fragment, NOT OK, will throw error</>
      </Tooltip>

      <Tooltip label="Throws">
        <div>More that one node</div>
        <div>NOT OK, will throw error</div>
      </Tooltip>
    </>
  );
}

Popover

Popover component now has new API with the following breaking changes:

  • placement prop is no longer supported, Popover side and alignment is now controlled with position prop
  • Default value for trapFocus and withinPortal props is now false
  • Close button and title are no longer supported, if you need these parts – add them on your side in Popover.Dropdown component

Popover now supports the following new features:

  • Uncontrolled and controlled mode
  • width="target" prop will make popover width the same as target element
  • Popover.Dropdown can now be styled with system props (sx, className, padding props, etc.)

Menu

Menu component now uses Popover component under the hood and thus its API was changed in the same way:

  • Menu no longer provides default control, it should now be added with Menu.Target
  • Menu.Item component should now be used within Menu.Dropdown component
  • trapFocus prop was removed – now it is managed automatically based on trigger prop
  • closeOnScroll prop was removed – if you need this feature you will need to implement this logic on your side

Avatar

AvatarsGroup component is no longer exported from @mantine/core package, instead you can now use
Avatar.Group component which can be combined with Tooltip or Popover to display additional information.

InputWrapper

InputWrapper component is no longer exported from @mantine/core package, instead you can now use
Input.Wrapper component.

Dropzone

Dropzone component was migrated to context, it no longer supports
function as children. Instead, you can use Dropzone.Accept, Dropzone.Reject and Dropzone.Idle components
to display content based on current status.

Other Dropzone changes:

  • FullScreenDropzone component is no loner exported from the @mantine/dropzone package, use Dropzone.FullScreen component instead
  • Dropzone.FullScreen now supports all props from Dropzone component
  • Dropzone now uses data-* attributes instead of classes to change styles of root element based on current status
  • Dropzone and Dropzone.FullScreen components now supports the following new props: maxFiles, autoFocus, activateOnClick, activateOnDrag, activateOnKeyboard, dragEventsBubbling, onDragEnter, onDragLeave, onDragOver, onFileDialogCancel, onFileDialogOpen, preventDropOnDocument

Migration to Floating UI

All components that have dropdowns (DatePicker, Popover, Select, etc.)
were migrated to Floating UI from popper.js:

  • position and placement props were merged into position prop, for example, position="top-start"
  • Popper component is no longer exported from @mantine/core package

MantineProvider changes

defaultProps, styles and classNames props

MantineProvider no longer supports styles, classNames and defaultProps props.
Instead of separate props these values should be added to the theme. This change allows to store
all components in one object and share it across multiple environments. For example, it is now much easier
to share theme between application and Storybook:

import { MantineProvider } from '@mantine/core';

function Demo() {
  return (
    <MantineProvider
      theme={{
        components: {
          Tabs: {
            defaultProps: { color: 'red' },
            classNames: { root: 'tabs-root' },
            styles: (theme) => ({
              tab: {
                '&[data-active]': { backgroundColor: theme.colors.red[5] },
              },
            }),
          },
        },
      }}
    >
      <App />
    </MantineProvider>
  );
}

emotionCache prop

MantineProvider no longer supports emotionOptions
prop, instead you will need to create emotion cache on your side and provide it with emotionCache prop.
This change was made to enable custom cache to be used during ssr and support more options for emotion
usage, for example with shadow dom or with iframe.

import { MantineProvider, createEmotionCache } from '@mantine/core';

const myCache = createEmotionCache({ key: 'mantine' });

function Demo() {
  return (
    <MantineProvider emotionCache={myCache} withGlobalStyles withNormalizeCSS>
      <App />
    </MantineProvider>
  );
}

Emotion packages as peer dependencies

@emotion/react and @emotion/server packages are now not installed automatically (see related issue) –
you will need to install them manually:

yarn add @emotion/react @emotion/server

Styles API changes

data- attributes

Most of components state were migrated to data- attributes. This allows to override styles
more predictably without using !important and reduces complexity of components Styles API.

Inputs styles API

You can use Input and Input.Wrapper Styles API
on MantineProvider to add styles to all Inputs.

Polymorphic components changes

Because of internal changes polymorphic components props types exported from @mantine/core package are no longer generic types.
Now if you want to extend these types you need to provide associated element types on your side.
You can find updated polymorphic components guide here.

import type { ButtonProps } from '@mantine/core';

// Previously, no longer supported
type MyButtonProps = ButtonProps<'button'> & { label: string };

// Convert to
type MyButtonProps = ButtonProps & React.ComponentPropsWithoutRef<'button'> & { label: string };

@mantine/form changes

use-form no longer exports formList function, you can now
manage lists with just regular arrays. Other changes:

  • You can now use objects and lists with any level of nesting
  • useForm hook now supports clearInputErrorOnChange option to disable error clearing when input value changes and validateInputOnChange option that adds support for live fields validation
  • form.onSubmit handler now accepts second argument – a function that will be called with errors object when validation fails
  • form.addListItem was renamed to form.insertListItem, it now supports inserting items add given index

Other breaking changes

  • Select and MultiSelect component now require returning created item from onCreate handler
  • Portal component no longer accepts position and zIndex props – it is now required to add these styles to Portal children
  • Modal component no longer supports size="full", use size="100%" instead
  • FloatingTooltip component was renamed to Tooltip.Floating
  • Most components with dropdowns (Tooltip, Popover, ColorPicker, DatePicker, Select, etc.) are no longer using Portal by default, it is now required to set withinPortal if you need this feature
  • Input no longer supports headless variant, use unstyled prop instead
  • AppShell fixed prop is now true by default
  • CheckboxGroup, RadioGroup and Chips components are no longer exported from @mantine/core, use Checkbox.Group, Radio.Group and Chip.Group components instead
  • @mantine/hooks package no longer exports old use-form hook, use @mantine/form package instead
  • Group component no longer supports direction prop, use Stack component instead for vertical stacks
  • use-uncontrolled hook logic was changed, it no longer supports rule parameter
  • use-id hook now supports React 18 useId hook with a fallback for older React versions, generateId function is no longer supported
  • @mantine/hooks package no longer exports useBooleanToggle hook, use useDisclosure hook instead
  • use-toggle hook API was changed, it no longer accepts initial value as first argument
  • use-intersection hook API was changed to keep API consistent across all hooks
  • use-focus-return hook no longer supports transitionDuration prop due to changes in use-focus-trap hook
  • use-notifications hook from @mantine/notifications package no longer has showNotification, hideNotification and other functions, use separate functions exported from the package for that

@mantine/carousel package

New @mantine/carousel package based on embla carousel.

@mantine/nprogress package

New @mantine/nprogress package displays navigation
progress bar at the top of the page, it can be easily integrated with Next.js and other similar
frameworks.

React 18 support

All Mantine components now support React 18, all known issues related to React 18 migration
were fixed:

  • ColorPicker and ColorInput components no longer throw error on value change
  • Issue with stale Dropzone status was fixed
  • Multiple issues with types were fixed (mostly related to children prop changes)
  • The entire Mantine codebase was migrate to React 18 (documentation website, Mantine UI, all packages)

Unstyled components

All components now support unstyled prop which removes all non-essential Mantine styles
from the component. This is useful when you want to style some component from scratch
without overwriting any styles.

New theme properties

  • theme.activeStyles lets you override styles added to buttons with :active pseudo-class
  • theme.headings now has an option to set fontWeight for each heading individually:
  • theme.defaultGradient defines default gradient value for components that support variant="gradient" (Button, ThemeIcon, etc.).
  • theme.respectReduceMotion allows to disregard user OS settings and play animations as usual:
  • theme.cursorType determines which cursor type will native controls have.
    If it is set to pointer then Checkbox,
    Radio, NativeSelect
    and other native elements will have cursor: pointer style.

New components

New features

  • New ScrollArea.Autosize component lets you use ScrollArea with maxHeight
  • New Tooltip.Group component can be used to sync open and close delays for multiple tooltips
  • New Button.Group component merges borders of adjacent buttons
  • Modal component now supports fullScreen prop
  • All inputs that use Input.Wrapper component under the hood (TextInput, Autocomplete, DatePicker, etc.) now support inputContainer prop. This prop let you add additional elements before/after input element or add floating elements that will be positioned relative to the input. Example with Tooltip.
  • New inputWrapperOrder prop allows to define the order of Input.Wrapper parts.
  • Input component now exposes Input.Label, Input.Error and Input.Description, that were previously the parts of InputWrapper component. You can use these components to create custom form layouts if default Input.Wrapper layout does not fit your requirements.
  • Card.Section now supports the following props to simplify customizations: withBorder prop will add top and bottom border to Card.Section depending on its position relative to other content and sections; inheritPadding prop will add the same left and right padding to Card.Section as set in Card component
  • Slider and RangeSlider components now support thumbSize prop to configure thumbs width and height from prop.

New hooks

Other changes

  • Affix now supports withinPortal prop
  • Burger now supports transitionDuration prop
  • Collapse now support ref prop
  • NumberInput has new increment/decrement controls
  • ThemeIcon now support any CSS color value in color prop
  • Text now supports numbers in size prop to set size in px
  • RichTextEditor now uses tabler icons instead of Radix icons
  • LoadingOverlay now supports overlayBlur prop
  • Slider now supports Home and End keys
  • Modals manager now supports event based functions, it is now the primary way to work with the package
  • Prism now supports radius prop
  • DatePicker now supports modalProps to spread props to inner Modal component
  • Anchor and Text components will now inherit font-size from parent if size prop is not set
  • ScrollArea now supports type="never" to hide scrollbars

Documentation updates

mantine - 4.2.12

Published by rtivital over 2 years ago

  • Fix unexpected browser autocomplete appearing in Spotlight component in Chrome
  • Fix incorrect keyboard navigation for disabled initial days in DatePicker and Calendar components (#1704)
  • Add dynamic functions support to use-interval hook (#1702)
  • Fix issues with Japanese IME in Spotlight and Autocomplete components (#1705)
  • Fix incorrect keyboard keys holding handling when hold is set to true in NumberInput component (#1725)
mantine - 4.2.11

Published by rtivital over 2 years ago

  • Fix type="auto" leaving space for bottom horizontal scrollbar in ScrollArea component (#1654)
  • Fix incorrect weekendDays prop handling in DatePicker and Calendar components
  • Fix incorrect border-radius styles for input[type="search"]
  • Add filter handler to use-list-state hook (#1678)
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