[@mantine/spotlight] Add closeOnTrigger prop to SpotlightAction (#2040)

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.

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,
+};

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';

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,
+        },
+      ]}
+    />
   ));

src/mantine-spotlight/src/Spotlight/Spotlight.tsx

@@ -260,7 +260,7 @@ export function Spotlight({
                     onActionHover={setHovered}
                     onActionTrigger={(action) => {
                       action.onTrigger(action);
-                      closeOnActionTrigger && handleClose();
+                      (action.closeOnTrigger ?? closeOnActionTrigger) && handleClose();
                     }}
                     styles={styles}
                     classNames={classNames}

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;
 }