chore: pipe browser event to

example/src/App.tsx

@@ -20,6 +20,7 @@ import {
   createAction,
   useMatches,
   ActionImpl,
+  Action,
 } from "../../src";
 import useThemeActions from "./hooks/useThemeActions";
 
@@ -54,7 +55,7 @@ const groupNameStyle = {
 const App = () => {
   useAnalytics();
   const history = useHistory();
-  const initialActions = [
+  const initialActions: Action[] = [
     {
       id: "homeAction",
       name: "Home",
@@ -71,7 +72,11 @@ const App = () => {
       shortcut: ["g", "d"],
       keywords: "help",
       section: "Navigation",
-      perform: () => history.push("/docs"),
+      perform: (action, event) => {
+        console.log({ action, event });
+
+        history.push("/docs");
+      },
     },
     {
       id: "contactAction",
@@ -176,7 +181,7 @@ const ResultItem = React.forwardRef(
     }: {
       action: ActionImpl;
       active: boolean;
-      currentRootActionId: ActionId;
+      currentRootActionId?: ActionId | null;
     },
     ref: React.Ref<HTMLDivElement>
   ) => {

src/InternalEvents.tsx

@@ -204,7 +204,7 @@ function useShortcuts() {
           query.toggle();
           options.callbacks?.onOpen?.();
         } else {
-          action.command?.perform();
+          action.command?.perform(action, event);
           options.callbacks?.onSelectAction?.(action);
         }
       });

src/KBarResults.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { useVirtual } from "react-virtual";
+import { KBarEvent } from ".";
 import { ActionImpl } from "./action/ActionImpl";
 import { getListboxItemId, KBAR_LISTBOX } from "./KBarSearch";
 import { useKBar } from "./useKBar";
@@ -108,10 +109,10 @@ export const KBarResults: React.FC<KBarResultsProps> = (props) => {
   }, [search, currentRootActionId, props.items, query]);
 
   const execute = React.useCallback(
-    (item: RenderParams["item"]) => {
+    (item: RenderParams["item"], event: KBarEvent) => {
       if (typeof item === "string") return;
       if (item.command) {
-        item.command.perform(item);
+        item.command.perform(item, event);
         query.toggle();
       } else {
         query.setSearch("");
@@ -149,7 +150,7 @@ export const KBarResults: React.FC<KBarResultsProps> = (props) => {
               activeIndex !== virtualRow.index &&
               query.setActiveIndex(virtualRow.index),
             onPointerDown: () => query.setActiveIndex(virtualRow.index),
-            onClick: () => execute(item),
+            onClick: (event) => execute(item, event),
           };
           const active = virtualRow.index === activeIndex;
 

src/action/ActionImpl.ts

@@ -49,7 +49,7 @@ export class ActionImpl implements Action {
       perform &&
       new Command(
         {
-          perform: () => perform(this),
+          perform: (...args) => perform(...args),
         },
         {
           history: options.history,

src/action/Command.ts

@@ -1,11 +1,11 @@
-import { HistoryItem } from "..";
+import { ActionImpl, HistoryItem, KBarEvent } from "..";
 import type { History } from "../types";
 
 interface CommandOptions {
   history?: History;
 }
 export class Command {
-  perform: (...args: any) => any;
+  perform: (actionImpl: ActionImpl, event: KBarEvent) => any;
 
   private historyItem?: HistoryItem;
 
@@ -18,8 +18,10 @@ export class Command {
     command: { perform: Command["perform"] },
     options: CommandOptions = {}
   ) {
-    this.perform = () => {
-      const negate = command.perform();
+    this.perform = (...args) => {
+      console.log("args", args);
+
+      const negate = command.perform(...args);
       // no need for history if non negatable
       if (typeof negate !== "function") return;
       // return if no history enabled
@@ -31,7 +33,7 @@ export class Command {
         history.remove(this.historyItem);
       }
       this.historyItem = history.add({
-        perform: command.perform,
+        perform: () => command.perform(...args),
         negate,
       });
 

src/types.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ActionImpl } from "./action/ActionImpl";
+import { Command } from "./action/Command";
 
 export type ActionId = string;
 
@@ -20,7 +21,7 @@ export type Action = {
   section?: ActionSection;
   icon?: string | React.ReactElement | React.ReactNode;
   subtitle?: string;
-  perform?: (currentActionImpl: ActionImpl) => any;
+  perform?: (currentActionImpl: ActionImpl, event: KBarEvent) => any;
   parent?: ActionId;
   priority?: Priority;
 };
@@ -113,7 +114,7 @@ export enum VisualState {
 }
 
 export interface HistoryItem {
-  perform: () => any;
+  perform: Command["perform"];
   negate: () => any;
 }
 
@@ -126,3 +127,5 @@ export interface History {
   redo: (item?: HistoryItem) => void;
   reset: () => void;
 }
+
+export type KBarEvent = KeyboardEvent | MouseEvent | PointerEvent;