Dash Mantine Components new release 0.15.0

Dash Python
1

:tada: Release 0.15.0 is now available

:warning: Breaking Change Ahead

Don’t worry—it’s just one small update:

:arrow_right: If you’re using DatePicker, simply rename it to DatePickerInput.

Why the change? This renaming keeps us aligned with the upstream Mantine library. Mantine has two components:

  • DatePicker: A standalone calendar.
  • DatePickerInput: An input field with a dropdown calendar (similar to Dash Core Components’ DatePickers).

By making this update, we’re paving the way to add Mantine’s standalone DatePicker in a future release.

That’s it! No other breaking changes in this release. :tada: For more details, check out our Roadmap.

:partying_face: New Features

1. Added Custom Icons to Checkbox

You can now customize the icons in your checkboxes! This feature was extracted from a larger PR that @snehilvj was working on. Thanks, Snehil! :heart:

Here’s a live sample app hosted on PyCafe.

Check out the updated Checkbox docs, which now include several new features like the indeterminate state:

2. Added the debounce Prop to DatePickerInput

The debounce prop can now be set to True, False, or a number of milliseconds for delay before updating. When True, the value updates when the input loses focus. #405

3. Added highlightToday

For date components with a calendar, you can now set highlightToday=True to display today’s date with a border. #405

image
image880×1102 91 KB

Try it out with this example app.

4. Added the position Prop to dmc.Notification Components

This new prop makes it easy to position notifications anywhere on the screen.

Check out the live demo on PyCafe:

5. Updated to Mantine 7.14.1

New features in this Mantine release include:

  • BarChart SVG Pattern Fill
    See the sample app on PyCafe:

  • restrictToMarks Prop for Slider
    This feature is great for sliders with uneven marks, allowing users to select only specific values.

    Check out the sample app:

:hammer_and_wrench: Fixed

  • In MultiSelect, the debounce prop now works when deleting items while the dropdown is closed, and debounce is set to a number. #407
  • Fixed a regression in 0.14.7 where it was not possible to update both the data and value in the same callback for Select and MultiSelect. #412
  • DateInput now updates properly when clearable=True. #405
  • Fixed a console warning in Tooltip components by adding a key to the wrapper Box element. #418
  • Upgrading to Mantine 7.14.1 resolved the issue with TagsInput, where removing items by clicking the “x” on a pill wasn’t working correctly. A huge thanks to @ctdunc for contributing a PR to the upstream Mantine library to fix this! :trophy: #369

:book: New in the Docs

Thanks to @demk0r for their first PR in the dmc-docs!

The current page is now highlighted in the sidebar. The active prop in the NavLink updates automatically based on the URL. Check out the new example in the docs:

Updated Slider Section

The Slider documentation now includes more examples of features and styling:


Updated Styles API Section

The Styles API documentation now includes additional examples and detailed guidance on using the styles and classNames props.

:folded_hands: Thank You, Contributors!

Thanks to everyone who contributed to this release :medal_sports:

If you would like to contribute, please check out our GitHub issues, where we’ve labeled several tasks as Good First Issues.

The docs are also a Dash app built with DMC, so contributing there is straightforward and a great way to get started. You can find the docs repository here.

Join us and help shape the future of Dash Mantine Components!

4 Likes
2

HI,@AnnMarieW ,Dash AG Grid’s custom component DMC_Select fails in dmc0.15.0. What modifications need to be made?

3

@Sylvos, do you have the code how you set up the component? Some Minimal Example would help

4

Hi @Sylvos
I’m assuming you are upgrading from V<=0.14.0, because there shouldn’t be anything breaking in the Select components going from 0.14.0 to 0.15.0

The tricky part about using to dmc>=0.14.0 with Dash AG Grid is the MantineProvider component is required.

@jinnyzor has come up with a cool solution that can handle any Dash component in the grid. You just need to add the the dashAgGridFunctions.js file in the assets folder, then you can define the component and the props in the dash app

Here is a working example of one dcc component and one dmc component.

Note this is experimental and has not been thoroughly tested. If you do try it out, could you please provide some feedback?