chore(deps): update dependency @doist/eslint-config to v12 (#1131)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

Author: renovate[bot]

package-lock.json

@@ -80,7 +80,7 @@
         "prosemirror-codemark": "0.4.2"
     },
     "devDependencies": {
-        "@doist/eslint-config": "11.2.1",
+        "@doist/eslint-config": "12.0.0",
         "@doist/prettier-config": "4.0.0",
         "@doist/reactist": "28.7.2",
         "@mdx-js/react": "3.1.1",

package.json

@@ -14,7 +14,7 @@
     width: var(--suggestion-dropdown-width);
     max-height: calc(
         var(--suggestion-dropdown-option-height) * var(--suggestion-dropdown-item-size) +
-            var(--suggestion-dropdown-spacing) * (var(--suggestion-dropdown-item-size) + 1)
+            var(--suggestion-dropdown-spacing) * (var(--suggestion-dropdown-item-size) + 1) + 2px
     );
     padding: var(--suggestion-dropdown-spacing) 0;
     overflow-x: hidden;

stories/typist-editor/extensions/suggestions/base-suggestion-dropdown.module.css

@@ -1,4 +1,4 @@
-import { useEffect, useImperativeHandle, useRef, useState } from 'react'
+import { useImperativeHandle, useRef, useState } from 'react'
 
 import { Box, Inline, Text } from '@doist/reactist'
 
@@ -21,7 +21,8 @@ function BaseSuggestionDropdown<TSuggestionItem extends object>({
     renderItem,
     onItemSelect,
 }: BaseSuggestionDropdownProps<TSuggestionItem>) {
-    const selectedItemRef = useRef<HTMLLIElement>(null)
+    const itemRefs = useRef<Map<number, HTMLLIElement>>(new Map())
+
     const [selectedIndex, setSelectedIndex] = useState(0)
 
     const suggestionDropdownStyle: React.CSSProperties = {
@@ -31,36 +32,23 @@ function BaseSuggestionDropdown<TSuggestionItem extends object>({
     const areSuggestionsLoading = items.length === 1 && 'isLoading' in items[0]
     const areSuggestionsEmpty = items.length === 0
 
-    useEffect(
-        function scrollSelectedItemIntoView() {
-            selectedItemRef.current?.scrollIntoView({
-                block: 'nearest',
-            })
-        },
-        [selectedIndex],
-    )
-
-    useEffect(
-        function autoSelectLastItemIfNeeded() {
-            if (selectedIndex > items.length) {
-                setSelectedIndex(items.length - 1)
-            }
-        },
-        [items, selectedIndex],
-    )
+    function updateSelectedItem(index: number) {
+        setSelectedIndex(index)
+        itemRefs.current.get(index)?.scrollIntoView({ block: 'nearest' })
+    }
 
     useImperativeHandle(
         forwardedRef,
         function exposeKeyboardHandlersToReactRenderer() {
             return {
                 onKeyDown({ event }) {
                     if (event.key === 'ArrowUp') {
-                        setSelectedIndex((selectedIndex + items.length - 1) % items.length)
+                        updateSelectedItem((selectedIndex + items.length - 1) % items.length)
                         return true
                     }
 
                     if (event.key === 'ArrowDown') {
-                        setSelectedIndex((selectedIndex + 1) % items.length)
+                        updateSelectedItem((selectedIndex + 1) % items.length)
                         return true
                     }
 
@@ -125,7 +113,13 @@ function BaseSuggestionDropdown<TSuggestionItem extends object>({
                             alignItems="center"
                             borderRadius="standard"
                             onClick={() => onItemSelect(index)}
-                            ref={index === selectedIndex ? selectedItemRef : null}
+                            ref={(node) => {
+                                if (node) {
+                                    itemRefs.current.set(index, node)
+                                } else {
+                                    itemRefs.current.delete(index)
+                                }
+                            }}
                         >
                             {renderItem(item)}
                         </Box>