An animated and accessible command menu

Harsh Singh

Last update: Jan 4, 2023

Overview

kmenu

🌈 Animated and accessible cmdk interface

Demo · NPM · Product Hunt · StackBlitz · CodeSandbox

🚀 Quickstart

Having trouble? Unsure of something? Feel free to ask away in the discussions.

Install the npm package:

yarn add kmenu

Using the Provider

After you install, you must wrap your application around the MenuProvider component. Want to learn how you can customise your menu configuration? Check out the MenuConfig section.

Inside the MenuProvider, you can pass in the theme configuration which all of the menus will use. All props are optional, and you can also pass in props if your commands or sections have extra margin between them. Here's a look:

Parameter	Description	Type	Optional
config	The config file passed onto the palette	Config	✅
dimensions	The values of the height of the palettes (px)	Dimension	✅

Now, here's a look at the dimensions object:

Parameter	Description	Type	Default	Optional
commandHeight	The height of each command in the palette (px)	number	54	✅
sectionHeight	The height of each category/section in the palette (px)	number	31	✅

Below is an example:

import { MenuProvider, MenuConfig } from 'kmenu'

const App = () => {
  const config: MenuConfig = { /* ... */ }
  
  return (
    <MenuProvider config={config}>
       {/* ... */}
    </MenuProvider>
  )
}

Adding commands

After you've installed the package, you can now begin adding commands onto the command menu.

The commands are broken up into two arrays. One array contains the different categories of the commands, and another array contains the commands itself. Here's a look at how you can define categories:

Parameter	Description	Type	Optional
category	The name of the category the command will be displayed in	string	❌
commands	An array of commands passed onto the category	Command	❌

Awesome. Now here's a look at how you can create commands:

Parameter	Description	Type	Optional
icon	The icon displayed next to the command	ReactElement	✅
text	The text displayed on the command	String	❌
perform	The action to perform	void	✅
href	The link to open	void	✅
newTab	Whether or not the link should open in a new tab	boolean	✅
keywords	Search keywords for the command	string	✅
shorcuts	The keyboard shortcuts to activate this command	Shortcut	✅
closeOnComplete	Whether the menu should close when the command is run (default: false)	boolean	✅

As you might notice, the commands give you the ability to define custom shortcuts.

Each shortcut can have two target keys and a modifier that would be used in conjunction with a single target key. Note that if you're using a modifier, you can only use a SINGLE target key. Here's a look at how you can create shortcuts:

Parameter	Description	Type	Optional
modifier	The modifier key used in conjunction with the target key	enum (shift/alt/ctrl/meta)	✅
keys	The target keys for this command	Tuple [string, string?]	❌

After you've created all your commands, you must pass them into the useCommands hook, which returns a getter and a setter for the commands. For a reference, check out the section on the useCommands hook.

Anyways, now that you have an underlying idea of how commands work, here's an example of how to create the commands (using TypeScript):

import {
  Search,
  Copy,
  Globe,
  GitHub,
  AlertCircle,
  GitPullRequest,
  Zap,
  Edit2,
  Plus,
  Settings,
  Code,
  Command as Cmd,
  Terminal
} from 'react-feather'

const main: Command[] = [
  {
    category: 'Socials',
    commands: [
      {
        icon: <FiGlobe />,
        text: 'Website',
        href: 'https://hxrsh.in',
        newTab: true,
        keywords: 'home'
      },

      {
        icon: <FiTwitter />,
        text: 'Twitter',
        href: 'https://twitter.com/harshhhdev',
        newTab: true,
        shortcuts: { modifier: 'alt', keys: ['t'] }
      },
      {
        icon: <FiGithub />,
        text: 'GitHub',
        href: 'https://github.com/harshhhdev',
        newTab: true,
        shortcuts: { keys: ['g', 'h'] }
      },
      {
        text: 'Dribbble',
        href: 'https://dribbble.com/harshhhdev',
        newTab: true
      },
      {
        icon: <FiLinkedin />,
        text: 'Linkedin',
        href: 'https://linkedin.com/in/harshhhdev',
        newTab: true
      }
    ]
  }
]

const Component = () => {
  const [commands, setCommands] = useCommands(main)
  
  /* ... */
}

useKmenu Hook

useKmenu is a utility hook that gives you some useful functions and information about the current status of the menu. You can use these for a multitude of different things such as nested routes on the command menu or for toggling the menu through a button on your UI.

Here's a list of all the information it provides:

Parameter	Description	Type
input	The current text in the search bar of the menu that is currently open	string
setInput	The setter function to change the open state	Dispatch
open	The index of the menu is currently open	number
setOpen	The setter function to change the open state	Dispatch
toggle	The function for toggling the main menu open/close	void

With that, here's also a code example of how you could use this hook!

NOTE: YOU MUST WRAP YOUR COMPONENT INSIDE THE MenuProvider TO USE THIS HOOK

import { useKmenu } from 'kmenu'

const Component = () => {
  const [input, setInput, open, setOpen, toggle] = useKmenu()
  
  return (
    <div>
      <p>The current text on the search bar is: {input}</p>
      <p>The index of the menu which is currently open is: {open}</p>
      <button onClick={toggle}>Toggle Menu</button>
    </div>
  )
}

useCommands Hook

With kmenu v1, you can now dynamically compute and define commands.

When commands are inputted into the useCommands hook, they're returned into an object of command-menu parsable commands, and they require an initial value of the commands you'd like to pass in.

NOTE: YOU CANNOT USE SetCommands DIRECTLY INSIDE OF A useEffect HOOK AT RENDER

Here's an example of the hook live in action:

import { CommandMenu, Command, useCommands } from 'kmenu'

const Component = () => {
  const main: Command[] = [ /* ... */ ]
  
  const [commands, setCommands] = useCommands(main)
  
  return 
    <CommandMenu commands={commands} index={1} main />
}

Customising the menu

You can easily customise the colours on your command menu as well. Here's a list of properties that are customisable:

NOTE: ALL PROPERTIES ARE OPTIONAL

Parameter	Description	Type	Default
backdropColor	The colour of the backdrop (include opacity)	string	#FFFFFF90
backdropBlur	The backround blur of the backdrop (px)	number	2px
backgroundColor	The background colour of the menu	string	#FFFFFF
borderWidth	Width of the border surrounding the menu	number	1px
borderColor	The colour of the border surrounding the menu	string	#3F3F3F
borderRadius	The radius of the menu (px)	number	10px
boxShadow	The shadow of the menu	string	0px 0px 60px 10px #00000020
inputBorder	The colour of the border below the search bar	string	#E9ECEF
inputColor	The colour of the text in the search bar	string	#000000
placeholderText	The placeholder input text in the search bar	string	'What do you need?'
headingColor	The colour of the command category headings	string	#777777
commandInactive	The colour of the icon and text when the command is inactive	string	#828282
commandActive	The colour of the icon and text when the command is active	string	#343434
barBackground	The background colour of the active bar (include opacity)	string	#FFFFFF20
shortcutBackground	The background colour of the keyboard shortcut	string	#82828220

Setting up the menu

Here are all the options available on the menu:

Parameter	Description	Type	Optional
commands	The commands for this menu to display	Command[]	❌
index	The index of this menu	number	❌
main	Whether or not this is the first menu that'll be displayed	boolean	✅
placeholder	The placeholder text on this particular menu	string	✅
preventSearch	The placeholder text on this particular menu	boolean	✅

Once you have added commands to the menu and configured it to you likings, you can add it into your application. Add in the CSS file for styling. Optionally, if you'd like to FULLY customise the styles on the menu to your likings then you can copy the index.css file from the repository and import that instead. You'll also need to create a useState hook for handling the state.

NOTE: YOU MUST WRAP YOUR MENU INSIDE OF THE MenuProvider FOR IT TO WORK

import { useState } from 'react'
import { CommandMenu, Command, MenuConfig } from 'kmenu'
import 'kmenu/dist/index.css'

const Component = () => {
  const commands: Command[] = [ /* ... */ ]
  const config: MenuConfig = { /* ... */ }
  const categories: string[] = [ /* ... */ ]

  return (
    <MenuProvider config={config}>
      /* ... */
      <CommandMenu
        commands={commands}
        index={1}
        main
      />
      /* ... */
    </MenuProvider>
  )
}
/* ... */
export default Component

That's about all the configuration you'll need to do in order to get a basic command menu to work!

Nested Menus

This library also provides support for nested menus and commands. Here's an example to help you out:

import { useState } from 'react'
import { Menu, Command, useKmenu, useCommands } from 'kmenu'
import 'kmenu/dist/index.css'

const Component = () => {  
  const main: Command[] = [
    {
      icon: <FiGlobe />,
      text: 'Website',
      href: 'https://hxrsh.in',
      newTab: true,
      keywords: 'home',
      category: 'Socials'
    },
    {
      icon: <FiArrowRight />,
      text: 'Nested Example...',
      perform: () => setOpen(2),
      category: 'Utility'
    },
  ]

  const nested: Command[] = [
    {
      icon: <FiGlobe />,
      text: 'Demo',
      href: 'https://kmenu.hxrsh.in',
      newTab: true,
      keywords: 'home',
      category: 'Resources'
    },
    {
      icon: <FiGlobe />,
      text: 'GitHub',
      href: 'https://github.com/harshhhdev/kmenu',
      newTab: true,
      keywords: 'source',
      category: 'Resources'
    },
  ]
  
  const [input, open, setOpen, toggle] = useKmenu()
  const [mainCommands, setMainCommands] = useCommands(main)
  const [nestedCommands, setNestedCommands] = useCommands(nested)
  
  return (
    {/* ... */}
    <CommandMenu
      commands={mainCommands}
      index={1}
      main
    />
    <CommandMenu
      commands={nestedCommands}
      index={2}
    />
    {/* ... */}
  )
}
/* ... */
export default Component

If this isn't enough, there's also an example directory which you can clone and experiment around with to build nested routes!

useShortcut hook

This library also ships with a custom React hook called useShortcut which you can use to define your own shortcuts within your application.

Parameter	Description	Type	Optional
targetKey	The key that the shortcut is listening for	string (must be valid key)	❌
modifier	The modifier key which can will activate the shortcut	enum (shift/alt/ctrl/meta)	✅

Here's an example:

import { useShortcut } from 'kmenu'

const Shortcut = () => {
  const shiftS = useShortcut({ targetKey: 's', modifier: 'shift' })

  /* ... */
}

export default Shortcut

The example below will run when someone uses the keyboard shortcut shift+s.

💻 Development

Run the project locally

git clone https://github.com/harshhhdev/kmenu.git

Setting up the project

cd kmenu
yarn

# Setup example directory
cd example 
yarn

Next, start the development server:

yarn start

This should compile an instance of your project to the dist folder. It should re-build everytime you save a new change.

Using the package

You can test the built package locally by running the example repository:

cd example

# Start development server
yarn start

Awesome. Your React development server should now be running on port 3000.

🔧 Tools Used

🤞 Contributing

After setting up the project, and making changes:

git add .
git commit -m "commit message"
git push YOUR_REPO_URL YOUR_BRANCH

This codebase is well-documented and has comments explaining just about everything in here. All contributions are welcome! Anything from fixing a typo in the documentation to opening an issue to fix a bug or add an enhancement are welcome.

Inspirations

Comments

[BUG] Type definitions prevent children for MenuProvider
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:

Clone this repo.

cd example

yarn install && yarn start

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!
bug
opened by hrishioa 6
[FEATURE] Change default behavior for closing on clicking a command through the mouse
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
enhancement
opened by Just-Moh-it 5
[BUG] Bar blocks elements behind it even when it's closed
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
bug help wanted
opened by harshhhdev 4
[BUG] Input box font?
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:

Just follow the setup instructions in the docs

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

bug
opened by Just-Moh-it 3
[FEATURE] Add ability to have different placeholders on nested menus

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
enhancement

opened by julesbravo 2

[FEATURE] Extract input text from kmenu search textbox

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

enhancement help wanted

opened by Just-Moh-it 2

Bump @typescript-eslint/eslint-plugin from 5.46.0 to 5.46.1
Bumps @typescript-eslint/eslint-plugin from 5.46.0 to 5.46.1.

Release notes

Sourced from @typescript-eslint/eslint-plugin's releases.

v5.46.1

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/typescript-eslint

Changelog

Sourced from @typescript-eslint/eslint-plugin's changelog.

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/eslint-plugin

Commits

c943b84 chore: publish v5.46.1

47241bb docs: overhaul branding and add new logo (#6147)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
Bump @typescript-eslint/parser from 5.46.0 to 5.46.1
Bumps @typescript-eslint/parser from 5.46.0 to 5.46.1.

Release notes

Sourced from @typescript-eslint/parser's releases.

v5.46.1

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/typescript-eslint

Changelog

Sourced from @typescript-eslint/parser's changelog.

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/parser

Commits

c943b84 chore: publish v5.46.1

47241bb docs: overhaul branding and add new logo (#6147)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
Bump framer-motion from 7.6.19 to 7.10.2
Bumps framer-motion from 7.6.19 to 7.10.2.

Changelog

Sourced from framer-motion's changelog.

[7.10.2] 2022-12-16

Fixed

Adding support for all easing functions with WAAPI.

[7.10.1] 2022-12-16

Fixed

Fixed type inference of useMotionValueEvent.

[7.10.0] 2022-12-15

Added

.on() event method to MotionValue.

"animationStart", "animationComplete", "animationCancel" and "change" events for MotionValue.

useMotionValueEvent helper method for adding events.

[7.9.1] 2022-12-14

Fixed

Fixing mapping Framer Motion easing names to WAAPI.

[7.9.0] 2022-12-14

Added

Hardware-accelerated opacity animations.

[7.8.1] 2022-12-14

Changed

Refactored animation pipeline to better accomodate WAAPI.

[7.9.0] 2022-12-14

Added

Hardware-accelerated opacity animations.

[7.8.1] 2022-12-14

Changed

Refactored animation pipeline to better accommodate WAAPI.

... (truncated)

Commits

340e892 v7.10.2

4fc0790 Adding support for all easing types with WAAPI (#1830)

721ec8e Updating lockfile

554ad8c v7.10.1

67aed66 updating changelog

57ece83 Merge pull request #1833 from framer/fix/event-type

d59d3a1 Updating event type inference

177ab68 adding deep links to readme

ccebb86 Updating changelog

82e357f Updating changelog:

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
Bump @typescript-eslint/parser from 5.44.0 to 5.46.0
Bumps @typescript-eslint/parser from 5.44.0 to 5.46.0.

Release notes

Sourced from @typescript-eslint/parser's releases.

v5.46.0

5.46.0 (2022-12-08)

Bug Fixes

eslint-plugin: [ban-types] update message to suggest object instead of Record<string, unknown> (#6079) (d91a5fc)

Features

eslint-plugin: [prefer-nullish-coalescing] logic and test for strict null checks (#6174) (8a91cbd)

v5.45.1

5.45.1 (2022-12-05)

Bug Fixes

eslint-plugin: [keyword-spacing] unexpected space before/after in import type (#6095) (98caa92)

eslint-plugin: [no-shadow] add call and method signatures to ignoreFunctionTypeParameterNameValueShadow (#6129) (9d58b6b)

eslint-plugin: [prefer-optional-chain] collect MetaProperty type (#6083) (d7114d3)

eslint-plugin: [sort-type-constituents, sort-type-union-intersection-members] handle some required parentheses cases in the fixer (#6118) (5d49d5d)

parser: remove the jsx option requirement for automatic jsx pragma resolution (#6134) (e777f5e)

v5.45.0

5.45.0 (2022-11-28)

Bug Fixes

eslint-plugin: [array-type] --fix flag removes parentheses from type (#5997) (42b33af)

eslint-plugin: [keyword-spacing] prevent crash on no options (#6073) (1f19998)

eslint-plugin: [member-ordering] support private fields (#5859) (f02761a)

eslint-plugin: [prefer-readonly] report if a member's property is reassigned (#6043) (6e079eb)

scope-manager: add support for TS4.9 satisfies expression (#6059) (44027db)

typescript-estree: stub out ts.SatisfiesExpression on old TS versions (#6076) (1302b30)

Features

eslint-plugin: [member-ordering] add a required option for required vs. optional member ordering (#5965) (2abadc6)

support Auto Accessor syntax (#5926) (becd1f8)

Changelog

Sourced from @typescript-eslint/parser's changelog.

5.46.0 (2022-12-08)

Note: Version bump only for package @typescript-eslint/parser

5.45.1 (2022-12-05)

Bug Fixes

parser: remove the jsx option requirement for automatic jsx pragma resolution (#6134) (e777f5e)

5.45.0 (2022-11-28)

Note: Version bump only for package @typescript-eslint/parser

Commits

1e1573a chore: publish v5.46.0

2d0a883 chore: publish v5.45.1

46c14cd chore: use short form for nx project names (#6160)

0b37822 chore: bump Nx to 15 (#6140)

e777f5e fix(parser): remove the jsx option requirement for automatic jsx pragma resol...

0af822a docs: move remaining docs files into website (#6138)

267da4e chore: publish v5.45.0

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
Bump typescript from 4.9.3 to 4.9.4
Bumps typescript from 4.9.3 to 4.9.4.

Release notes

Sourced from typescript's releases.

TypeScript 4.9.4

For release notes, check out the release announcement.

For the complete list of fixed issues, check out the

fixed issues query for Typescript v4.9.4.

Downloads are available on:

npm

NuGet package

Changes:

e2868216f637e875a74c675845625eb15dcfe9a2 Bump version to 4.9.4 and LKG.

eb5419fc8d980859b98553586dfb5f40d811a745 Cherry-pick #51704 to release 4.9 (#51712)

b4d382b9b12460adf2da4cc0d1429cf19f8dc8be Cherry-pick changes for narrowing to tagged literal types.

e7a02f43fce47e1a39259ada5460bcc33c8e98b5 Port of #51626 and #51689 to release-4.9 (#51627)

1727912f0437a7f367d90040fc4b0b4f3efd017a Cherry-pick fix around visitEachChild to release-4.9. (#51544)

This list of changes was auto generated.

Commits

e286821 Bump version to 4.9.4 and LKG.

eb5419f Cherry-pick #51704 to release 4.9 (#51712)

b4d382b Cherry-pick changes for narrowing to tagged literal types.

e7a02f4 Port of #51626 and #51689 to release-4.9 (#51627)

1727912 Cherry-pick fix around visitEachChild to release-4.9. (#51544)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump framer-motion from 7.6.19 to 8.0.2
Bumps framer-motion from 7.6.19 to 8.0.2.

Changelog

Sourced from framer-motion's changelog.

[8.0.2] 2022-12-23

Fixed

Fixing defaults for hardware-accelerated animations.

[8.0.1] 2022-12-21

Added

Warning for unhydrated refs passed to useScroll() options.

[8.0.0] 2022-12-21

Removed

Removed polyfilled support for mouse/touch events.

Removed drag pointerup patch for Safari over <select /> elements.

Changed

DragControls.start now accepts PointerEvent only.

[7.10.3] 2022-12-20

Changed

Firing animateChanges in useLayoutEffect rather than useEffect to ensure optimised appear animations are handed off before paint.

[7.10.2] 2022-12-16

Fixed

Adding support for all easing functions with WAAPI.

[7.10.1] 2022-12-16

Fixed

Fixed type inference of useMotionValueEvent.

[7.10.0] 2022-12-15

Added

.on() event method to MotionValue.

"animationStart", "animationComplete", "animationCancel" and "change" events for MotionValue.

useMotionValueEvent helper method for adding events.

[7.9.1] 2022-12-14

... (truncated)

Commits

5566c24 v8.0.2

b88b081 Fixing defaults for hardware-accelerated animations (#1845)

2eb37fc v8.0.1

3e37acd Updating changelog

90d4f4f Adding warning for non-hydrated refs (#1841)

f58fea8 Moving pointer filtering to helper function

117d3cc Updating version

68d94fa v7.10.4

64d338f Updating

2a3c406 Merge pull request #1750 from framer/fix/pointer-events

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump @types/node from 18.11.13 to 18.11.17
Bumps @types/node from 18.11.13 to 18.11.17.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump @typescript-eslint/eslint-plugin from 5.46.0 to 5.47.0
Bumps @typescript-eslint/eslint-plugin from 5.46.0 to 5.47.0.

Release notes

Sourced from @typescript-eslint/eslint-plugin's releases.

v5.47.0

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

v5.46.1

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/typescript-eslint

Changelog

Sourced from @typescript-eslint/eslint-plugin's changelog.

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/eslint-plugin

Commits

a2c08ba chore: publish v5.47.0

9e35ef9 feat(eslint-plugin): [no-floating-promises] add suggestion fixer to add an 'a...

6b3ed1d docs: fixed typo "foo.property" (#6180)

c943b84 chore: publish v5.46.1

47241bb docs: overhaul branding and add new logo (#6147)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump @typescript-eslint/parser from 5.46.0 to 5.47.0
Bumps @typescript-eslint/parser from 5.46.0 to 5.47.0.

Release notes

Sourced from @typescript-eslint/parser's releases.

v5.47.0

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

v5.46.1

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/typescript-eslint

Changelog

Sourced from @typescript-eslint/parser's changelog.

5.47.0 (2022-12-19)

Note: Version bump only for package @typescript-eslint/parser

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/parser

Commits

a2c08ba chore: publish v5.47.0

c943b84 chore: publish v5.46.1

47241bb docs: overhaul branding and add new logo (#6147)

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Bump eslint from 8.29.0 to 8.30.0
Bumps eslint from 8.29.0 to 8.30.0.

Release notes

Sourced from eslint's releases.

v8.30.0

Features

075ef2c feat: add suggestion for no-return-await (#16637) (Daniel Bartholomae)

7190d98 feat: update globals (#16654) (Sébastien Règne)

Bug Fixes

1a327aa fix: Ensure flat config unignores work consistently like eslintrc (#16579) (Nicholas C. Zakas)

9b8bb72 fix: autofix recursive functions in no-var (#16611) (Milos Djermanovic)

Documentation

6a8cd94 docs: Clarify Discord info in issue template config (#16663) (Nicholas C. Zakas)

ad44344 docs: CLI documentation standardization (#16563) (Ben Perlmutter)

293573e docs: fix broken line numbers (#16606) (Sam Chen)

fa2c64b docs: use relative links for internal links (#16631) (Percy Ma)

75276c9 docs: reorder options in no-unused-vars (#16625) (Milos Djermanovic)

7276fe5 docs: Fix anchor in URL (#16628) (Karl Horky)

6bef135 docs: don't apply layouts to html formatter example (#16591) (Tanuj Kanti)

dfc7ec1 docs: Formatters page updates (#16566) (Ben Perlmutter)

8ba124c docs: update the prefer-const example (#16607) (Pavel)

e6cb05a docs: fix css leaking (#16603) (Sam Chen)

Chores

f2c4737 chore: upgrade @eslint/eslintrc@1.4.0 (#16675) (Milos Djermanovic)

ba74253 chore: standardize npm script names per #14827 (#16315) (Patrick McElhaney)

0d9af4c ci: fix npm v9 problem with file: (#16664) (Milos Djermanovic)

90c9219 refactor: migrate off deprecated function-style rules in all tests (#16618) (Bryan Mishkin)

Changelog

Sourced from eslint's changelog.

v8.30.0 - December 16, 2022

f2c4737 chore: upgrade @eslint/eslintrc@1.4.0 (#16675) (Milos Djermanovic)

1a327aa fix: Ensure flat config unignores work consistently like eslintrc (#16579) (Nicholas C. Zakas)

075ef2c feat: add suggestion for no-return-await (#16637) (Daniel Bartholomae)

ba74253 chore: standardize npm script names per #14827 (#16315) (Patrick McElhaney)

6a8cd94 docs: Clarify Discord info in issue template config (#16663) (Nicholas C. Zakas)

0d9af4c ci: fix npm v9 problem with file: (#16664) (Milos Djermanovic)

7190d98 feat: update globals (#16654) (Sébastien Règne)

ad44344 docs: CLI documentation standardization (#16563) (Ben Perlmutter)

90c9219 refactor: migrate off deprecated function-style rules in all tests (#16618) (Bryan Mishkin)

9b8bb72 fix: autofix recursive functions in no-var (#16611) (Milos Djermanovic)

293573e docs: fix broken line numbers (#16606) (Sam Chen)

fa2c64b docs: use relative links for internal links (#16631) (Percy Ma)

75276c9 docs: reorder options in no-unused-vars (#16625) (Milos Djermanovic)

7276fe5 docs: Fix anchor in URL (#16628) (Karl Horky)

6bef135 docs: don't apply layouts to html formatter example (#16591) (Tanuj Kanti)

dfc7ec1 docs: Formatters page updates (#16566) (Ben Perlmutter)

8ba124c docs: update the prefer-const example (#16607) (Pavel)

e6cb05a docs: fix css leaking (#16603) (Sam Chen)

Commits

6151d9e 8.30.0

12a2972 Build: changelog update for 8.30.0

f2c4737 chore: upgrade @eslint/eslintrc@1.4.0 (#16675)

1a327aa fix: Ensure flat config unignores work consistently like eslintrc (#16579)

075ef2c feat: add suggestion for no-return-await (#16637)

ba74253 chore: standardize npm script names per #14827 (#16315)

6a8cd94 docs: Clarify Discord info in issue template config (#16663)

0d9af4c ci: fix npm v9 problem with file: (#16664)

7190d98 feat: update globals (#16654)

ad44344 docs: CLI documentation standardization (#16563)

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 0
Remove Framer Motion as a dependency

Framer Motion makes up the bulk of this package dependency. Nobody wants to add a 75kB package if they don't have to. This update should reduce the minified size to ~16.2mB.

opened by harshhhdev 0

Releases(v1-beta-git)

v1-beta-git(Aug 14, 2022)
This release contains some minor additions along with some fixes from the kmenu v1 beta.

💫

Make class names easier to style.

Fix bug with default background blur.

Added transitions for the command colours.

Removed default styling for non-module scoped SVGs.

Fix bug with children on the MenuProvider component.

Fix issues with UI elements not being interactive after closing/opening the menu in dev.

If you're on the beta, I would highly recommend that you upgrade onto this today.
Source code(tar.gz)
Source code(zip)
v1-beta(Aug 6, 2022)
The official beta for kmenu v1! I had officially released this on Product Hunt a while ago, and I saw a lot of crucial features lacking. This launch adds more enhanced functionality to the menu and improves DX.

💫

useCommands hook for sorting and dynamically updating commands

useKmenu hook for getting useful information such as states out the component

The MenuProvider component

Added default shortcuts for commands on the menu

Improved menu styling

Added new and useful types to define commands

Palette height dynamically adjusts for the commands, reducing unnecessary scroll

Better screen reader accessibility

Changed defaults of the menu theme configuration

Breaking changes

Commands have a completely different type now. They're organised into an array of categories, and each individual category has it's own array of commands. Check the documentation for more insight.

You do not need to define hooks anymore to handle the state of your component

Categories are no longer passed into the palettes. The new command type takes care of that automatically.

Individual config files are no longer passable onto the components. Pass them into the MenuProvider directly.

The PaletteConfig type has been renamed to MenuConfig

The main Palette has been renamed to CommandMenu

This is still a beta release! I would like to recieve some community feedback and fix some bugs before I release this :confetti_ball:
Source code(tar.gz)
Source code(zip)