From 7c745ea9c7739cf6069ddfa851ccc9daf95c71b4 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Mon, 8 Aug 2022 20:58:54 +0200
Subject: [PATCH] [@mantine/spotlight] Add closeOnTrigger prop to
 SpotlightAction (#2040) (#2050)

---
 docs/src/docs/others/spotlight.mdx            |  7 +++
 .../Spotlight.demo.actionsCloseOnTrigger.tsx  | 43 +++++++++++++++++++
 .../src/demos/spotlight/index.ts              |  1 +
 src/mantine-spotlight/src/Spotlight.story.tsx | 17 ++++++++
 .../src/Spotlight/Spotlight.tsx               |  2 +-
 src/mantine-spotlight/src/types.ts            |  3 ++
 6 files changed, 72 insertions(+), 1 deletion(-)
 create mode 100644 src/mantine-demos/src/demos/spotlight/Spotlight.demo.actionsCloseOnTrigger.tsx

diff --git a/docs/src/docs/others/spotlight.mdx b/docs/src/docs/others/spotlight.mdx
index a1bba503b84..7a3507147b7 100644
--- a/docs/src/docs/others/spotlight.mdx
+++ b/docs/src/docs/others/spotlight.mdx
@@ -296,6 +296,13 @@ To change this behavior set `closeOnActionTrigger={false}` prop on `SpotlightPro
 
 <Demo data={SpotlightDemos.closeOnTrigger} />
 
+## Close spotlight on specific action trigger
+
+Other than with the global `closeOnActionTrigger` property, the `closeOnTrigger` property can be defined
+for specific actions. The action will then ignore the closeOnActionTrigger property and use its own definition.
+
+<Demo data={SpotlightDemos.actionsCloseOnTrigger} />
+
 ## Highlight query
 
 Default action component supports highlighting search query with [Highlight](/core/highlight/) component.
diff --git a/src/mantine-demos/src/demos/spotlight/Spotlight.demo.actionsCloseOnTrigger.tsx b/src/mantine-demos/src/demos/spotlight/Spotlight.demo.actionsCloseOnTrigger.tsx
new file mode 100644
index 00000000000..495c5216f0d
--- /dev/null
+++ b/src/mantine-demos/src/demos/spotlight/Spotlight.demo.actionsCloseOnTrigger.tsx
@@ -0,0 +1,43 @@
+import { SpotlightAction } from '@mantine/spotlight';
+import React from 'react';
+import { Wrapper } from './_wrapper';
+
+const code = `
+import { SpotlightProvider, SpotlightAction } from '@mantine/spotlight';
+
+const onTrigger = () => {};
+
+const actions: SpotlightAction[] = [
+  { title: 'Will stay open', onTrigger, closeOnTrigger: false },
+  { title: 'Will close', onTrigger, closeOnTrigger: true },
+];
+
+function Demo() {
+  return (
+    <SpotlightProvider
+      actions={actions}
+      searchPlaceholder="Search..."
+      shortcut="mod + shift + 5"
+    >
+      <App />
+    </SpotlightProvider>
+  );
+}
+`;
+
+const onTrigger = () => {};
+
+const actions: SpotlightAction[] = [
+  { title: 'Will stay open', onTrigger, closeOnTrigger: false },
+  { title: 'Will close', onTrigger, closeOnTrigger: true },
+];
+
+function Demo() {
+  return <Wrapper actions={actions} searchPlaceholder="Search..." shortcut="mod + shift + 5" />;
+}
+
+export const actionsCloseOnTrigger: MantineDemo = {
+  type: 'demo',
+  component: Demo,
+  code,
+};
diff --git a/src/mantine-demos/src/demos/spotlight/index.ts b/src/mantine-demos/src/demos/spotlight/index.ts
index f7eaf7b3abf..8894f76371c 100644
--- a/src/mantine-demos/src/demos/spotlight/index.ts
+++ b/src/mantine-demos/src/demos/spotlight/index.ts
@@ -3,6 +3,7 @@ export { transitionNone } from './Spotlight.demo.transitionNone';
 export { customTransition } from './Spotlight.demo.customTransition';
 export { large } from './Spotlight.demo.large';
 export { closeOnTrigger } from './Spotlight.demo.closeOnTrigger';
+export { actionsCloseOnTrigger } from './Spotlight.demo.actionsCloseOnTrigger';
 export { register } from './Spotlight.demo.register';
 export { groups } from './Spotlight.demo.groups';
 export { actionComponent } from './Spotlight.demo.actionComponent';
diff --git a/src/mantine-spotlight/src/Spotlight.story.tsx b/src/mantine-spotlight/src/Spotlight.story.tsx
index e7832c18418..dbf8e356a2b 100644
--- a/src/mantine-spotlight/src/Spotlight.story.tsx
+++ b/src/mantine-spotlight/src/Spotlight.story.tsx
@@ -214,4 +214,21 @@ storiesOf('Spotlight', module)
     <Wrapper {...defaultProps}>
       <RegisterInEffect />
     </Wrapper>
+  ))
+  .add('Actions with closeOnTrigger', () => (
+    <Wrapper
+      {...defaultProps}
+      actions={[
+        {
+          title: 'Should stay open',
+          onTrigger: () => console.log('Should stay open'),
+          closeOnTrigger: false,
+        },
+        {
+          title: 'Should close',
+          onTrigger: () => console.log('Should close'),
+          closeOnTrigger: true,
+        },
+      ]}
+    />
   ));
diff --git a/src/mantine-spotlight/src/Spotlight/Spotlight.tsx b/src/mantine-spotlight/src/Spotlight/Spotlight.tsx
index 67249b397df..e132a969854 100644
--- a/src/mantine-spotlight/src/Spotlight/Spotlight.tsx
+++ b/src/mantine-spotlight/src/Spotlight/Spotlight.tsx
@@ -266,7 +266,7 @@ export function Spotlight({
                     onActionHover={setHovered}
                     onActionTrigger={(action) => {
                       action.onTrigger(action);
-                      closeOnActionTrigger && handleClose();
+                      (action.closeOnTrigger ?? closeOnActionTrigger) && handleClose();
                     }}
                     styles={styles}
                     classNames={classNames}
diff --git a/src/mantine-spotlight/src/types.ts b/src/mantine-spotlight/src/types.ts
index 3dcc2339354..7c2cd70ac59 100644
--- a/src/mantine-spotlight/src/types.ts
+++ b/src/mantine-spotlight/src/types.ts
@@ -22,6 +22,9 @@ export interface SpotlightAction {
   /** Function that is called when action is triggered */
   onTrigger(action: SpotlightAction): void;
 
+  /** If the spotlight is closed after clicking on this action */
+  closeOnTrigger?: boolean;
+
   /** Any other properties that will be consumed by SpotlightProvider */
   [key: string]: any;
 }