fix(SW-1446): do not close modal on clear history

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/Results/index.tsx

@@ -12,7 +12,6 @@ import {
 } from "react-aria-components"
 import { useIntl } from "react-intl"
 
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./results.module.css"
@@ -77,19 +76,15 @@ export function Results({
                       href={item.url}
                       className={styles.item}
                       textValue={item.displayName}
+                      // @ts-expect-error: pending https://github.com/adobe/react-spectrum/pull/8035
+                      closeOnSelect={item.closesModal}
                     >
-                      {item.id === "clearHistory" ? (
+                      <>
-                        <>
+                        {item.icon ? item.icon : null}
-                          <MaterialIcon icon="delete" color="CurrentColor" />
+                        <Typography variant="Body/Supporting text (caption)/smBold">
-                          <Typography variant="Body/Supporting text (caption)/smBold">
+                          <Text slot="label">{item.displayName}</Text>
-                            <Text slot="label">
+                        </Typography>
-                              {intl.formatMessage({
+                      </>
-                                id: "Clear searches",
-                              })}
-                            </Text>
-                          </Typography>
-                        </>
-                      ) : null}
                     </MenuItem>
                   )}
                 </Collection>

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/JumpTo/Client/index.tsx

@@ -4,6 +4,8 @@ import { useCallback, useMemo, useState } from "react"
 import { useIntl } from "react-intl"
 import { useIsMounted, useMediaQuery } from "usehooks-ts"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
 import { isDefined } from "@/server/utils"
 
 import { ClientInline } from "./ClientInline"
@@ -132,7 +134,7 @@ export function JumpToClient<T extends JumpToData>({
     [data]
   )
 
-  const latest: LocationMatchResults = useMemo(() => {
+  const latest = useMemo(() => {
     if (data && history && history.length) {
       const children = history
         .map((v) => {
@@ -141,7 +143,7 @@ export function JumpToClient<T extends JumpToData>({
         .filter(isDefined)
         .slice(0, 5) // Only show five items
 
-      return [
+      const results: LocationMatchResults = [
         {
           id: "latestSearches",
           name: "Latest searches",
@@ -154,11 +156,15 @@ export function JumpToClient<T extends JumpToData>({
             {
               id: "clearHistory",
               type: "clearHistory",
+              closesModal: false,
+              icon: <MaterialIcon icon="delete" color="CurrentColor" />,
               displayName: intl.formatMessage({ id: "Clear searches" }),
             },
           ],
         },
       ]
+
+      return results
     }
     return []
   }, [data, history, intl])

apps/scandic-web/types/components/destinationOverviewPage/jumpTo/index.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react"
 import type { Key } from "react-aria-components"
 
 export type JumpToDataItem = {
@@ -30,6 +31,8 @@ export type LocationMatch = {
   type: string
   description?: string
   url?: string
+  closesModal?: boolean
+  icon?: ReactNode
 }
 
 export type ScoringMatch = LocationMatch & {