getHotkeyHandler typing seems off

[tchapi]

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?

7.5.1

What package has an issue?

@mantine/core

What framework do you use?

create-react-app (CRA)

In which browsers you can reproduce the issue?

All

Describe the bug

Hi 👋🏼

When using the basic example from the useHotkeys documentation here, but just making hotkeys a const in the component and passing it to getHotkeyHandler, like so:

import { TextInput } from "@mantine/core";
import { HotkeyItem, getHotkeyHandler, useHotkeys } from "@mantine/hooks";
import { notifications } from "@mantine/notifications";
import { useState } from "react";

function Demo() {
  const [value, setValue] = useState("I've just used a hotkey to send a message");
  const handleSubmit = () => notifications.show({ title: "Your message", message: value });

  const hotkeys: HotkeyItem[] = [["mod+Enter", handleSubmit]];

  return (
    <TextInput
      label="Press ⌘+Enter or Ctrl+Enter when input has focus to send message"
      value={value}
      onChange={(event) => setValue(event.target.value)}
      onKeyDown={getHotkeyHandler(hotkeys)}
    />
  );
}

.. then the following error is shown: Argument of type 'import("/...node_modules/@mantine/hooks/lib/use-hotkeys/use-hotkeys").HotkeyItem[]' is not assignable to parameter of type 'HotkeyItem[]'.

This looks similar to #4404 but the mitigation doesn't seem to be working, as the official example shows.

I couldn't find a way to make the error disappear, even by trying to type everything correctly (event and the like).

Thanks a lot!

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

No response

Possible fix

It seems HotkeyItem is defined twice, but differently in your code : here, not exported, here and exported, and they seem to be conflicting if I understand correctly?

Self-service

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

[shinnik]

Hi! I had the same issue in my code, but managed to mitigate it using a type derivation directly from getHotkeyHandler:
const hotkeys: Parameters<typeof getHotkeyHandler>[0] = [["mod+Enter", handleSubmit]];

Yeah, it looks weird, but it worked for me :)

[rtivital]

Fixed in 7.5.3