harshhhdev / kmenu Goto Github PK

Describe the bug
When using kmenu in unit tests, with Testing Library and jest/vitest, the tests fail because scrollIntoView is not available.
I've identified that the cause is that the function isn't implemented by jsdom.

To Reproduce
Steps to reproduce the behavior:

1. Create a project with kmenu
2. Create a unit test using testing library
3. Create a test that renders the kmenu
4. Ensure that the kmenu renders (open the menu by default for example)
5. See error "scrollIntoView is not available"

Expected behavior
The component should render it's content inside the test runner.

Screenshots

TypeError: _bottomRef$current.scrollIntoView is not a function
 ❯ node_modules/kmenu/src/Command.tsx:25:26
 ❯ commitHookEffectListMount node_modules/react-dom/cjs/react-dom.development.js:23150:26
 ❯ commitPassiveMountOnFiber node_modules/react-dom/cjs/react-dom.development.js:24931:11
 ❯ commitPassiveMountEffects_complete node_modules/react-dom/cjs/react-dom.development.js:24891:9
 ❯ commitPassiveMountEffects_begin node_modules/react-dom/cjs/react-dom.development.js:24878:7
 ❯ commitPassiveMountEffects node_modules/react-dom/cjs/react-dom.development.js:24866:3
 ❯ flushPassiveEffectsImpl node_modules/react-dom/cjs/react-dom.development.js:27039:3
 ❯ flushPassiveEffects node_modules/react-dom/cjs/react-dom.development.js:26984:14
 ❯ node_modules/react-dom/cjs/react-dom.development.js:26769:9
 ❯ flushActQueue node_modules/react/cjs/react.development.js:2667:24

Desktop (please complete the following information):

• OS: osx
• Browser: Tauri

Additional context
This can be fixed by adding the missing function without any implementation.

window.HTMLElement.prototype.scrollIntoView = () => { };

Is your feature request related to a problem? Please describe.

I'm adding a command to the command palette, named "Focus Search Bar", that, when used, would focus a third-party search bar text box in the DOM (using a ref). It works well when I just use the keyboard and press enter on the option, the command palette closes automatically, and the text box remains focused. But, when I use the mouse, the command palette does not close on pressing on the command element, and though the search input is focused, the command palette is still open and upon closing, the focus from the text box is lost 😢.

Describe the solution you'd like

Though this could be achieved using the setOpen hook, it becomes repetitive in case we need the closing behaviors through mouse click in multiple commands, and I think this would be a very typical use case where this would option need to be customized.

I could think of a config option to implement this:

• Providing a boolean option in the config to automatically close the palette upon clicking on a palette command using the cursor, just like how it closes on using a command through the keyboard enter key.

Describe alternatives you've considered

The only alternative I could try is to wait or maybe edit the kmenu code 🙂

Additional context

None

1. Go to the documentation website from here
2. Click on 'Try it out!'
3. Click on the link in the opened menu.
4. Observe the error where a new tab is opened twice.

Screenshots

Is your feature request related to a problem? Please describe.
Currently, results are <5 then the bar uses a height of fit-content which isn't something we can animate.

Describe the solution you'd like
Mathematically compute the height of the bar factoring in things like the headers.

Describe alternatives you've considered
Leave it as it is, a single animation doesn't matter awfully much.

Additional context
None.

Describe the bug
When the user is at a menu with index n with n > 2, the expectation is that clicking the delete or backspace key gets the user to the immediately preceding menu, so n - 1. Instead, the root menu n === 1 is called.

To Reproduce
Steps to reproduce the behavior:

1. Create 3 or more menus, e.g.

  <CommandMenu commands={menuMain} index={1} placeholder='Type a command or search...' />
  <CommandMenu commands={menuTask} index={2} placeholder='Describe your task' />
  <CommandMenu commands={menuFilter} index={3} placeholder='Filter...' />

2. Navigate to the third menu, with the placeholder “Filter...”
3. Press the delete button.
4. You get taken back to the main menu with the placeholder “Type a command or search...”.

Expected behavior
User should be taken back to the immediately preceding menu. In the example above, the menu with the placeholder “Describe your task”.

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: [email protected]

Describe the bug
In some SPECIAL CASES, when I click cmdk to toggle the bar it doesn't close properly.

To Reproduce
I'm not sure what exactly is causing this bug, because the command menu on kmenu.hxrsh.in and the one in the example directory both work fine. However on the StackBlitz example that I've created doesn't close the menu properly. While it does make the opacity zero, it doesn't close the menu.

I've also tried console logging values but no luck there either.

Expected behavior
I'd expect the opacity to become zero as well as having the bar out of sight.

Screenshots

Desktop (please complete the following information):

• OS: Linux
• Browser: Chromium/Brave
• Version: 0.2.25-dev

Additional context
None

Is your feature request related to a problem? Please describe.

While implementing features like full-text search, where I had to match conditionally to show commands, a way to extract the current input from the command palette would be the only way possible. Currently, this could be done in a hack-y way, but having a hook for this would be awesome.

Describe the solution you'd like

I'd like to have a hook with a similar functionality:

import { useState, useMemo } from "react";
import { Palette, Command } from "kmenu";
import "kmenu/dist/index.css";
import { usePaletteCommands, usePaletteConfig } from "./config";
import { useTheme } from "next-themes";

const Cmd = () => {
  const [open, setOpen] = useState(0);
  const { theme } = useTheme();

  // 👇 This is what I'd want to extract
  const { inputText } = useKMenu()

  const commands = [(myTextContent.includes(inputText) && {
	text: myTextContent.title,
	// Since kmenu doesn't support isAlwaysShown property or something, 
	// so the line below ensures this command is always visible
	keywords: ` ${inputText} `
	icon: <Search />,
	category: 'Search Results'
  })]

  const config = usePaletteConfig();

  const categories: string[] = ["Utility", "Links"];

  return (
    <Palette
      open={open}
      setOpen={setOpen}
      index={1}
      commands={commands}
      config={config}
      categories={categories}
      main
    />
  );
};

export default Cmd;

Describe alternatives you've considered

I've considered targeting the text-field element using selectors, but it is, obviously, a hack-y way to do it and may break in future

Additional context

None

Describe the bug
dimensions which can be passed as prop to MenuProvider has no type import from kmenu. Its got a type Partial<Dimensions>

Expected behavior
dimensions has type Partial<Dimensions>. I don't see this type being exported. I'm not sure if there's any other way to use it, but exporting its type as MenuDimension similar to whats done for config as MenuConfig would be convenient.

import { Config } from './types';
import './styles/index.css';

export { CommandMenu } from './CommandMenu';
export { CommandWrapper } from './CommandWrapper';
export declare type MenuConfig = Partial<Config>;
export declare type MenuDimension = Partial<Dimensions>;

export { Command, MenuProps } from './types';
export { useShortcut } from './hooks/useShortcut';
export { useCommands } from './hooks/useCommands';
export { useKmenu } from './hooks/useKmenu';
export { MenuProvider } from './MenuProvider';

Additional context
Let me know if there's any other way this can be done.

Currently, the commands are hard-coded onto a single object which is passed onto the palette.

A suggestion by @marco_ancona2 on the Product Hunt page was that instead of this, we should add a way to dynamically compute commands on-the-fly rather than just coding them into a single list.

The fix for this would be replacing the current commands with a hook called useCommands that does this.

Many users don’t know what “meta” means. Any chance we can show keyboard shortcut icons instead?

Using node 20. Just yarn install root project then in the example dir and then yarn start

opening the url on localhost:3000 gives:

Compiled with problems:X

ERROR

[eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app » /Users/theo/projects/kmenu/example/node_modules/eslint-config-react-app/base.js" and "BaseConfig » /Users/theo/projects/kmenu/node_modules/eslint-config-react-app/base.js".

I am getting an error while running add kmenu using yarn

yarn add v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
warning Lockfile has incorrect entry for "microbundle-crl@^0.15.1". Ignoring it.
Couldn't find any versions for "microbundle-crl" that matches "^0.15.1"
? Please choose a version of "microbundle-crl" from this list: 0.13.11
warning microbundle-crl > [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
warning " > [email protected]" has incorrect peer dependency "react@^16.0.0".
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 21 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @rollup/[email protected]
├─ @rollup/[email protected]
├─ @rollup/[email protected]
├─ @svgr/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
$ run-s build
yarn run v1.22.19
$ microbundle-crl --no-compress --format modern,cjs --css-modules false
(rpt2 plugin) Error: /home/mhanuel/devel/React/kmenu/src/CommandMenu.tsx(219,6): semantic error TS2559: Type '{ children: false | Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.
Error: /home/mhanuel/devel/React/kmenu/src/CommandMenu.tsx(219,6): semantic error TS2559: Type '{ children: false | Element; }' has no properties in common with type 'IntrinsicAttributes & AnimatePresenceProps'.
    at error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:5400:30)
    at throwPluginError (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:11878:12)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12912:24)
    at Object.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup/dist/shared/node-entry.js:12081:38)
    at RollupContext.error (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:17194:30)
    at /home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24958:23
    at arrayEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:534:11)
    at forEach (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:9360:14)
    at printDiagnostics (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:24931:5)
    at Object.transform (/home/mhanuel/devel/React/kmenu/node_modules/rollup-plugin-typescript2/dist/rollup-plugin-typescript2.cjs.js:27374:17)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "build" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

I do have node 18 .

Can you advice please?

Describe the bug
I have a list of commands that change based on user input. Example: filters.

In this example, when user clicks “Critical”:

It’s supposed to change the icon, and the text to read “Showing critical tasks”.

Currently this can only be achieved by adding a setTimeout(() => setOpen(index), 100) to the perform function. This causes the command menu to close and reopen quickly, and thus re-renders the commands correctly.

However, this clearly is an antipattern, and also doesn’t lead to a good UX. Is there a way you can re-render commands as they change?

To Reproduce
Steps to reproduce the behavior:

1. Create a command in a useEffect:

useEffect(() => {
    setCommandsFilter([
      {
        category: 'Task Priority',
        commands: [
          ...(!filterImportant || !filterTimeSensitive
            ? [
                {
                  icon: <RocketLaunchIconOutline />,
                  keywords: 'task, critical, urgent, important',
                  perform: () => {
                    setFilterImportant(true)

                    setFilterTimeSensitive(true)

                    setTimeout(() => setOpen(4), 100)
                  },
                  text: 'Critical'
                }
              ]
            : [
                {
                  icon: <RocketLaunchIconSolid />,
                  keywords: 'task, critical, urgent, important',
                  perform: () => {
                    setFilterImportant(null)

                    setFilterTimeSensitive(null)

                    setTimeout(() => setOpen(4), 100)
                  },
                  text: 'Showing critical tasks'
                }
              ])
        ]
      }
    ])
  }, [filterImportant, filterTimeSensitive])

And feed these into the <CommandMenu /> component:

<CommandMenu
  commands={menuFilterTasks}
  index={4}
  placeholder='Filter tasks...'
/>

Expected behavior
I expect the commands to rerender and display correctly as they get changed.

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version 1.4.32

Describe the bug

For some reason, the font looks very off in the text-box... as if it were the default font

To Reproduce
Steps to reproduce the behavior:

1. Just follow the setup instructions in the docs
2. Open the command palette and start typing to notice it

Expected behavior

Actual Behaviour

Desktop (please complete the following information):

• OS: macOs
• Browser Chrome
• Version: Chrome: 103.0, macOs 12.4

Is your feature request related to a problem? Please describe.

Currently, kmenu only supports exact searches through and keyword detection. However, when users type something like "bercel" instead of "vercel" (which is like so common that the people over at vercel bought the domain), so an existing, lightweight algorithm for fuzzy search using JavaScript would be awesome. Also, a way to control the strictness of the match, like most fuzzy search algoithms give on a 0-1 float number basis, would be an awesome addition.

Also, since kmenu can be used in commercial software as well, where performance is critical and users would love to use their own in-house algorithms for text search, a custom search logic (preferably through hooks) would be cool to have.

Describe the solution you'd like

1. For the built-in fuzzy search, a config option, like fuzziness: int, that has possible values from 0-1 and 0 by default, which means only exact searches would be matched.

2. For the out-sourced matching logic, since users could already get the text from the input box in the kmenu, but only an option to conditionally render blocks is missing, a clever and out-of-the-box solution would be to have a variable like filterAutomatically: boolean or something similar, and when that's disabled, any text in the search bar wouldn't affect the command menu at all (basically like disconnecting the input-box from the command menu), and users could conditionally render the commands, like

// Get the input from the kmenu textbox
const { input } = useKmenu();

const config = { filterAutomatically: false };

const allCommands = [
  {
    name: "help",
    description: "Displays this message.",
  },
];

const main = [
  {
    category: "main",
    // Conditionally render the commands
    commands: allCommands.filter(
      command.keywords.include(input) || commands.name.include(input)
    ),
  },
];

Describe alternatives you've considered

The same as above, but haven't been able to turn off the searchAutomatically parameter yet.

Thanks!

The animation is lovely. It just needs to be a bit faster, a bit snappier, especially for command menus that have a longer list of items. Is there any way we can set it ourselves?

Current animation:

Example of snappier animation: (Linear)

Is your feature request related to a problem? Please describe.
It would be a better UX for my users to be able to switch the placeholder text when clicking into a nested menu.

Describe the solution you'd like
Add an option to override the placeholder on a CommandMenu.

Describe alternatives you've considered
I've considered trying to write JS to detect when someone goes into a nested menu and update the placeholder, but that seemed dirty.

Additional context
None

Description

Add a built in way to handle shortcuts with the bar. In several bars, there are single-key shortcuts that users can press to use certain commands.

Currently, there's only the useShortcut hooks which developers can use to manually add commands, which isn't ALWAYS practical.

Suggested Fix

Add a field to the Command type called shortcuts of type Array<string>, and inside of it type shortcuts for the function which the user can use for the application.

Trying out kmenu for a small personal project, awesome work!

Describe the bug
Trying to run the example project, as well as import into my own, gives the following error:

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes & Pick<MenuContext, "config" | "dimensions">'.  TS2559

     8 | const App = () => {
     9 |   return (
  > 10 |     <MenuProvider>
       |      ^
    11 |       <main className={styles.main}>
    12 |         <h1 className={styles.title}>Hello, World!</h1>
    13 |         <p className={styles.description}>

Simple fix:
Update type definition for MenuProvider in kmenu/dist/types.d.ts to:

export declare type MenuProviderProps = Pick<MenuContext, 'config' | 'dimensions'> & {children: JSX.Element};

To Reproduce
Steps to reproduce the behavior:

1. Clone this repo.
2. cd example
3. yarn install && yarn start
4. Node version: 14.18.1, Typescript version 3.9.10

Out-of-context query

Is there a better way to style the menu other than using the random class names? Appreciate any help!

Hey @harshhhdev! 🚀 great work! I just sponsored you (via HyperisAi) as a thank you for this command bar. It’s so easy to use and work with ✨

Is your feature request related to a problem? Please describe.
I have one problem: the command bar we’re building should have checkboxes built in (for a filtering function). Is that something you could build?

Describe the solution you'd like
Here’s a great example from Linear:

Is your feature request related to a problem? Please describe.

Currently, it's not very easy to style the palette if you're using solutions like next-themes with also work on the root level of your application.

Describe the solution you'd like
A clear and concise description of what you want to happen.

In the Menu provider, we could automatically check whether or not the user's screen is in dark mode and pass in the proper menu configuration.

Describe alternatives you've considered
None.

Additional context
None.