Spotlight.ActionsGroup breaks for labels that contain single quotes, due to missing CSS variable escaping

[juliusv]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

8.0.1

What package has an issue?

@mantine/spotlight

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

I am using a <Spotlight.ActionsGroup> and noticed that when using any label that has single quotes in it (like "What's New"), the group header does not show. This seems to be because of this line of code:

mantine/packages/@mantine/spotlight/src/SpotlightActionsGroup.tsx

Line 48 in 0d25cd4

__vars={{ '--spotlight-label': `'${label}'` }}

This line sets the --spotlight-label CSS variable, but '${label}' does not account for labels that themselves include single quotes, so it produces a broken style tag on the resulting element.

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

I worked around it by doing <Spotlight.ActionsGroup label={myLabel.replace("'", "\\'")}>, which seems to work. Some kind of similar escaping should be done directly in the Mantine code.

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

The fix will be available in 8.0.2 and 7.17.8 releases

[rtivital]

Fixed in 8.0.2