Release 0.15.2

[AnnMarieW]

📣 Dash Mantine Components 0.15.2 Release

We’re thrilled to announce Dash Mantine Components 0.15.2! This release is packed with new components, documentation updates, and fantastic contributions from the community.

Let’s dive into the highlights! 🚀

---

🎉 Key Updates in Mantine 7.16.1

This release now uses Mantine 7.16.1, unlocking the latest features and enhancements from Mantine's powerful design system.

---

🎨 New Components

🌳 Tree Component

Display hierarchical data with the new Tree component. A huge shoutout to @Godisemo for contributing this component! 🏆

📖 Explore the Tree Component Documentation

Highlights:

• Customizable Expand/Collapse Icons

• Selectable Items with Checkboxes

---

💡 InlineCodeHighlight Component

Highlight inline code snippets with the new InlineCodeHighlight component. Thanks again to @Godisemo for this contribution! 🏆

📖 Check out the InlineCodeHighlight Documentation

---

🛠️ Additional Component Props

We’ve added new props across several components to enhance their functionality and flexibility. Here are the highlights:

🔄 New Props at a Glance

• disabled prop for individual options on SegmentedControl thanks to first time contributor @petefine
• type and breakpoints props for Grid and type prop to SimpleGrid thanks to @namakshenas
• inline prop for Center
• allowedInitialsColors for Avatar
• defaultExpanded for CodeHighlightTabs
• autoComplete for PasswordInput
• withOverlay and overlayProps for Popover
• withPages for Pagination
• type for Carousel
• restrictToMarks for RangeSlider

---

🔧 Prop Examples

Disable prop on SegmentControl

Thanks @petefine for adding this feature and for updating the docs! 🏆

📖 SegmentedControl Documentation

Container Queries

Set type="container" in the SimpleGrid, Grid, and Carousel components to adjust responsive values based on container width rather than viewport width.

Thank you @namakshenas for making this possible! 🏆

---

Align Icons with Text

Use dmc.Center(inline=True) to align icons and text seamlessly.

📖 Center Component Documentation

---

Restrict Initial Colors for Avatar

The allowedInitialsColors prop lets you limit the colors for initials in Avatar components.

📖 Avatar Documentation

Example: Restrict to blue and red.

---

Popover with Overlay

Add an overlay behind the dropdown using the withOverlay prop. Customize it further with overlayProps.

📖 Popover Documentation

---

Pagination Controls

Hide page controls using withPages=False for a cleaner UI.

📖 Pagination Documentation

Here is the standard Pagination withPages=True

---

RangeSlider: Restrict to Marks

Enable restrictToMarks=True to limit user selections to specific marks.

📖 Slider Documentation

---

CodeHighlight with Tabs and Default Expanded

The defaultExpanded prop can be used to set the initial expanded or collapsed state to CodeHighlightTabs component.

📖 See this example in the CodeHighlight documentation.

---

🛠️ Fixes and Improvements

🌟 Mantine Themed Plotly Templates

See more information on Plotly figure templates with a Mantine theme in new theme section of the docs.

This release updates the range slider button styling in the mantine_dark template for improved readability.

See this example on PyCafe

template="mantine_dark"

template="mantine_light"

---

📚 Documentation Enhancements

We’ve revamped the Themes section in the documentation:

• Mantine API Overview
• Theme Object Guide
• Styles API

See this Dash Forum Post for an introduction on how to set themes globally using the theme prop in the MantineProvider.

Explore the new DMC Theme Builder app for an interactive demo:

---

🎉 New Tips & Tricks

Discover new Tips & Tricks in the GitHub Discussions section, including FAQs and minimal examples.

---

New on DMC PyCafe account

Browse lots of complete, minimal examples you can run and edit in your browser. https://py.cafe/dash.mantine.components

---

🙌 Thank You, Contributors!

🎖️ New Contributors:

• @petefine made their first contribution in disabled SegmentedControl options #451
• @Godisemo made their first contribution in Add InlineCodeHighlight component #483

🌟 Returning Contributors

• @BSd3v Thanks for setting up the PyCafe Test Environment making it easier for contributors and reviewers to try out new features live on PyCafe in Updating Test Flow #350
• @namakshenas Thanks for enabling the container query feature on Grid and SimpleGrid

Thanks you also to @alexcjohnson for reviewing all the pull requests and providing invaluable feedback 🙂