feat: add request media (#1811)

packages/spotlight/src/components/actions/children-actions.tsx

@@ -4,14 +4,25 @@ import { ChildrenActionItem } from "./items/children-action-item";
 interface SpotlightChildrenActionsProps {
   childrenOptions: inferSearchInteractionOptions<"children">;
   query: string;
+  setChildrenOptions: (options: inferSearchInteractionOptions<"children">) => void;
 }
 
-export const SpotlightChildrenActions = ({ childrenOptions, query }: SpotlightChildrenActionsProps) => {
+export const SpotlightChildrenActions = ({
+  childrenOptions,
+  query,
+  setChildrenOptions,
+}: SpotlightChildrenActionsProps) => {
   const actions = childrenOptions.useActions(childrenOptions.option, query);
 
   return actions
     .filter((action) => (typeof action.hide === "function" ? !action.hide(childrenOptions.option) : !action.hide))
     .map((action) => (
-      <ChildrenActionItem key={action.key} childrenOptions={childrenOptions} query={query} action={action} />
+      <ChildrenActionItem
+        key={action.key}
+        childrenOptions={childrenOptions}
+        query={query}
+        action={action}
+        setChildrenOptions={setChildrenOptions}
+      />
     ));
 };

packages/spotlight/src/components/actions/items/children-action-item.tsx

@@ -8,9 +8,10 @@ interface ChildrenActionItemProps {
   childrenOptions: inferSearchInteractionOptions<"children">;
   query: string;
   action: ReturnType<inferSearchInteractionOptions<"children">["useActions"]>[number];
+  setChildrenOptions: (options: inferSearchInteractionOptions<"children">) => void;
 }
 
-export const ChildrenActionItem = ({ childrenOptions, action, query }: ChildrenActionItemProps) => {
+export const ChildrenActionItem = ({ childrenOptions, action, query, setChildrenOptions }: ChildrenActionItemProps) => {
   const interaction = action.useInteraction(childrenOptions.option, query);
 
   const renderRoot =
@@ -20,10 +21,20 @@ export const ChildrenActionItem = ({ childrenOptions, action, query }: ChildrenA
         }
       : undefined;
 
-  const onClick = interaction.type === "javaScript" ? interaction.onSelect : undefined;
+  const onClick =
+    interaction.type === "javaScript"
+      ? interaction.onSelect
+      : interaction.type === "children"
+        ? () => setChildrenOptions(interaction)
+        : undefined;
 
   return (
-    <Spotlight.Action renderRoot={renderRoot} onClick={onClick} className={classes.spotlightAction}>
+    <Spotlight.Action
+      renderRoot={renderRoot}
+      onClick={onClick}
+      closeSpotlightOnTrigger={interaction.type !== "children"}
+      className={classes.spotlightAction}
+    >
       <action.Component {...childrenOptions.option} />
     </Spotlight.Action>
   );

packages/spotlight/src/components/spotlight.tsx

@@ -140,7 +140,11 @@ const SpotlightWithActiveMode = ({ modeState, activeMode, defaultMode }: Spotlig
 
       <MantineSpotlight.ActionsList>
         {childrenOptions ? (
-          <SpotlightChildrenActions childrenOptions={childrenOptions} query={query} />
+          <SpotlightChildrenActions
+            childrenOptions={childrenOptions}
+            query={query}
+            setChildrenOptions={setChildrenOptions}
+          />
         ) : (
           <SpotlightActionGroups
             setMode={(mode) => {