Merge pull request #8341 from weseek/feat/137235-specify-a-class-for-the-color-of-search-memu-item-when-it-is-active

feat: Specify a class for the color of search memu item when it is active

apps/app/src/features/search/client/components/SearchMenuItem.module.scss

@@ -0,0 +1,34 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+@use '~/styles/variables' as var;
+
+.search-menu-item :global {
+  li {
+    cursor: pointer;
+  }
+}
+
+// == Colors
+@include bs.color-mode(light) {
+  .search-menu-item :global {
+    li.active {
+      background-color: var(--grw-primary-100)
+    }
+
+    li:hover {
+      background-color: bs.$gray-200;
+    }
+  }
+}
+
+@include bs.color-mode(dark) {
+  .search-menu-item :global {
+    li.active {
+      background-color: var(--grw-primary-800)
+    }
+
+    li:hover {
+      background-color: bs.$gray-800;
+    }
+  }
+}

apps/app/src/features/search/client/components/SearchMenuItem.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { GetItemProps } from '../interfaces/downshift';
 
+import styles from './SearchMenuItem.module.scss';
+
 type Props = {
   url: string
   index: number
@@ -19,15 +21,15 @@ export const SearchMenuItem = (props: Props): JSX.Element => {
     getItemProps({
       index,
       item: { url },
-      // TOOD: https://redmine.weseek.co.jp/issues/137235
-      style: { backgroundColor: isActive ? 'lightblue' : 'white', cursor: 'pointer' },
-      className: 'text-muted d-flex p-1',
+      className: `d-flex p-1 text-muted ${isActive ? 'active' : ''}`,
     })
   );
 
   return (
-    <li {...itemMenuOptions}>
-      { children }
-    </li>
+    <div className={`search-menu-item ${styles['search-menu-item']}`}>
+      <li {...itemMenuOptions}>
+        { children }
+      </li>
+    </div>
   );
 };

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -3,7 +3,7 @@ import React, {
   useState, useCallback, useEffect,
 } from 'react';
 
-import Downshift from 'downshift';
+import Downshift, { type DownshiftState, type StateChangeOptions } from 'downshift';
 import { useRouter } from 'next/router';
 import { Modal, ModalBody } from 'reactstrap';
 
@@ -36,6 +36,18 @@ const SearchModal = (): JSX.Element => {
     closeSearchModal();
   }, [closeSearchModal, router, searchKeyword]);
 
+  const stateReducer = (state: DownshiftState<DownshiftItem>, changes: StateChangeOptions<DownshiftItem>) => {
+    // Do not update highlightedIndex on mouse hover
+    if (changes.type === Downshift.stateChangeTypes.itemMouseEnter) {
+      return {
+        ...changes,
+        highlightedIndex: state.highlightedIndex,
+      };
+    }
+
+    return changes;
+  };
+
   useEffect(() => {
     if (!searchModalData?.isOpened) {
       setSearchKeyword('');
@@ -47,6 +59,7 @@ const SearchModal = (): JSX.Element => {
       <ModalBody>
         <Downshift
           onSelect={selectSearchMenuItemHandler}
+          stateReducer={stateReducer}
           defaultIsOpen
         >
           {({
@@ -55,7 +68,6 @@ const SearchModal = (): JSX.Element => {
             getItemProps,
             getMenuProps,
             highlightedIndex,
-            setHighlightedIndex,
           }) => (
             <div {...getRootProps({}, { suppressRefError: true })}>
               <div className="text-muted d-flex justify-content-center align-items-center p-1">
@@ -75,8 +87,7 @@ const SearchModal = (): JSX.Element => {
                 </button>
               </div>
 
-              {/* see: https://github.com/downshift-js/downshift/issues/582#issuecomment-423592531 */}
-              <ul {...getMenuProps({ onMouseLeave: () => { setHighlightedIndex(-1) } })} className="list-unstyled">
+              <ul {...getMenuProps()} className="list-unstyled">
                 <div className="border-top mt-3 mb-2" />
                 <SearchMethodMenuItem
                   activeIndex={highlightedIndex}

apps/app/src/features/search/client/components/SearchResultMenuItem.tsx

@@ -62,7 +62,7 @@ export const SearchResultMenuItem = (props: Props): JSX.Element => {
               <PagePathLabel path={item.data.path} />
             </span>
 
-            <span className="ms-2 text-muted d-flex justify-content-center align-items-center">
+            <span className="ms-2 d-flex justify-content-center align-items-center">
               <span className="material-symbols-outlined fs-5">footprint</span>
               <span>{item.data.seenUsers.length}</span>
             </span>