Updated for Mantine 8.3.0

[AnnMarieW]

Updates for new features introduced in Mantine 8.3.0

• New MiniCalendar component
• Add orientation="vertical" to Progress
• Add clearSearchOnChange prop to MultiSelect
• Add reverseTimeControlsList to TimePicker
• TipTap 3 support (separate PR)

[AnnMarieW]

Sample app for MiniCalendar

import dash_mantine_components as dmc
from dash import Dash, Input, Output,  callback

app = Dash()

component = dmc.Stack([
    dmc.MiniCalendar(
        defaultDate="2025-01-02",
        value="2025-01-03",
        id="mini-calendar"
    ),
    dmc.Text(id="mini-calendar-date", m="md")
])


app.layout = dmc.MantineProvider(
    component
)

@callback(
    Output("mini-calendar-date", "children"),
    Input("mini-calendar", "value"),
)
def update(d):
    return f"You selected: {d}"


if __name__ == "__main__":
    app.run(debug=True)

Other features:

import dash_mantine_components as dmc
from dash import Dash

scripts = [
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/dayjs.min.js",      # dayjs
    "https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.8/locale/fr.min.js",  # french locale
]

app = Dash(external_scripts=scripts)

component1 = dmc.MiniCalendar(numberOfDays=10)

component2 = dmc.MiniCalendar(
    numberOfDays=6,
    defaultDate="2025-04-13",
    minDate = "2025-04-14",
    maxDate = "2025-04-24",
)

component3 = dmc.MiniCalendar(
    numberOfDays=8,
    getDayProps={"function":"weekendRed"}
)

component4 = dmc.DatesProvider(
    dmc.MiniCalendar(locale="fr", defaultDate="2025-04-01"),
    settings={"locale": "fr"}
)


component5 = dmc.MiniCalendar(locale="fr", defaultDate="2025-04-01")


app.layout = dmc.MantineProvider([
    dmc.Text("Number of days = 10", mt="lg"),
    component1,
    dmc.Text("Min and Max dates", mt="lg"),
    component2,
    dmc.Text("Format days with getDayProp function", mt="lg"),
    component3,
    dmc.Text("Locale French", mt="lg"),
    component4,
])

if __name__ == "__main__":
    app.run(debug=True)


"""

var dmcfuncs = window.dashMantineFunctions = window.dashMantineFunctions || {};
var dayjs = window.dayjs;

dmcfuncs.weekendRed = function (dateStr) {
  const d = dayjs(dateStr);

  if ([0, 6].includes(d.day())) {
    return {
      style: {
        color: 'var(--mantine-color-red-8)',
      },
    };
  }

  return {};
};


"""

[AnnMarieW]

Vertical Progress

import dash_mantine_components as dmc
from dash import Dash

app = Dash()

import dash_mantine_components as dmc


component = dmc.Group([
        dmc.Progress(value=80, orientation="vertical", h=200),

        dmc.Progress(
            value=60,
            color="orange",
            size="xl",
            orientation="vertical",
            h=200,
            animated=True
        ),

        dmc.ProgressRoot(
            size="xl",
            autoContrast=True,
            orientation="vertical",
            h=200,
            children=[
                dmc.ProgressSection(
                    value=40,
                    color="lime.4",
                    children=dmc.ProgressLabel("Documents")
                ),
                dmc.ProgressSection(
                    value=20,
                    color="yellow.4",
                    children=dmc.ProgressLabel("Apps")
                ),
                dmc.ProgressSection(
                    value=20,
                    color="cyan.7",
                    children=dmc.ProgressLabel("Other")
                )
            ]
        )
    ], m="lg")

app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

[AnnMarieW]

clearSearchOnChange in MultiSelect

This is cool - when clearSearchOnChange=False allows you to select multiple values based on the same search term. Dropdown options stay open while selecting.

import dash_mantine_components as dmc
from dash import Dash

app = Dash()

component = dmc.MultiSelect(
    data=["aa", "ab", "ac"],
    value=["aa"],
    searchable=True,
    clearSearchOnChange=False
)


app.layout = dmc.MantineProvider(
    component
)

if __name__ == "__main__":
    app.run(debug=True)

[alexcjohnson]

💃 Looks good 😎