fixes issue with stepper being duplicate and memoizes to reduce rerenders

[BSd3v]

fixes #543

[AnnMarieW]

This looks fantastic @BSd3v

Here's a sample app that I used to check the changes. It's now possible to go forward and back so it fixes 543. Plus the input component on the second step doesn't reset/re-render when changing steps.

from dash_iconify import DashIconify
import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, Input, Output, State, callback, ctx
_dash_renderer._set_react_version("18.2.0")

app = Dash(external_stylesheets=dmc.styles.ALL)

min_step = 0
max_step = 3
active = 1


def get_icon(icon):
    return DashIconify(icon=icon, height=20)


component = dmc.Container(
    [
        dmc.Stepper(
            id="stepper-custom-icons",
            active=active,
            children=[
                dmc.StepperStep(
                     label="First step",
                     description="Create an account",
                    icon=get_icon(icon="material-symbols:account-circle"),
                ),
                dmc.StepperStep(
                    label="Second step",
                    description=dmc.Box(["verify email", dmc.TextInput("Go", id="btn")]),
                    icon=get_icon(icon="ic:outline-email"),
                    progressIcon=get_icon(icon="ic:outline-email"),
                    completedIcon=get_icon(
                        icon="material-symbols:mark-email-read-rounded"
                    ),
                    children=[dmc.Text("Step 2 content: Verify email", ta="center")],
                ),
                dmc.StepperStep(
                    label="Final step",
                    description="Get full access",
                    icon=get_icon(icon="material-symbols:lock-outline"),
                    progressIcon=get_icon(icon="material-symbols:lock-outline"),
                    completedIcon=get_icon(icon="material-symbols:lock-open-outline"),
                    children=[dmc.Text("Step 3 content: Get full access", ta="center")],
                ),
                dmc.StepperCompleted(
                    children=[
                        dmc.Text(
                            "Completed, click back button to get to previous step",
                            ta="center",
                        )
                    ]
                ),
            ],
        ),
        dmc.Group(
            justify="center",
            mt="xl",
            children=[
                dmc.Button("Back", id="back-custom-icons", variant="default"),
                dmc.Button("Next step", id="next-custom-icons"),
            ],
        ),
        dmc.Box(id="out")
    ]
)


@callback(
    Output("stepper-custom-icons", "active"),
    Input("back-custom-icons", "n_clicks"),
    Input("next-custom-icons", "n_clicks"),
    State("stepper-custom-icons", "active"),
    prevent_initial_call=True,
)
def update_with_icons(back, next_, current):
    button_id = ctx.triggered_id
    step = current if current is not None else active
    if button_id == "back-custom-icons":
        step = step - 1 if step > min_step else step
    else:
        step = step + 1 if step < max_step else step
    return step


@callback(
    Output("out", "children"),
    Input("btn", "value")
)
def update(n):
    return f"n={n}"

app.layout = dmc.MantineProvider(
    component
)

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

[AnnMarieW]

Thanks @alexcjohnson