minecraft-inventory 0.1.27 → 0.1.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "minecraft-inventory",
-  "version": "0.1.27",
+  "version": "0.1.28",
   "type": "module",
   "license": "MIT",
   "release": {

package/src/components/InventoryOverlay/InventoryOverlay.tsx

@@ -326,7 +326,7 @@ export function InventoryOverlay({
               lineHeight: 1,
             }}
           >
-            INV 0.1.27
+            INV 0.1.28
           </a>
         )}
 

package/src/components/InventoryWindow/AnvilInput.tsx

@@ -1,8 +1,11 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react'
+import { useFocusInputShortcut } from '../../hooks/useFocusInputShortcut'
 import { useScale } from '../../context/ScaleContext'
 import { useTextures } from '../../context/TextureContext'
 import { useInventoryContext } from '../../context/InventoryContext'
 
+const ANVIL_FOCUS_KEYS = ['KeyE'] as const
+
 interface AnvilInputProps {
   x: number
   y: number
@@ -21,6 +24,8 @@ export function AnvilInput({ x, y, width, height }: AnvilInputProps) {
 
   const hasInputItem = windowState?.slots.some((s) => s.index === 0 && s.item !== null) ?? false
 
+  useFocusInputShortcut(inputRef, ANVIL_FOCUS_KEYS, hasInputItem)
+
   const textFieldUrl = textures.getGuiTextureUrl(
     hasInputItem
       ? '1.21.11/textures/gui/sprites/container/anvil/text_field.png'

package/src/components/JEI/JEI.tsx

@@ -2,6 +2,7 @@ import React, { useState, useMemo, useCallback, useEffect, useLayoutEffect, useR
 import type { ItemStack, RecipeGuide, RecipeNavFrame, BlockTextureRender } from '../../types'
 import { useScale } from '../../context/ScaleContext'
 import { useInventoryContext } from '../../context/InventoryContext'
+import { useSlashFocusInput } from '../../hooks/useFocusInputShortcut'
 import { Slot } from '../Slot'
 import { StarIcon } from './StarIcon'
 import styles from './JEI.module.css'
@@ -88,6 +89,8 @@ export function JEI({
   // Self-measured dimensions so the panel can be width:100% and fill its container
   const rootRef = useRef<HTMLDivElement>(null)
   const gridRef = useRef<HTMLDivElement>(null)
+  const searchInputRef = useRef<HTMLInputElement>(null)
+  useSlashFocusInput(searchInputRef, true)
   const [measuredCols, setMeasuredCols] = useState(ITEMS_PER_ROW)
   const [measuredRows, setMeasuredRows] = useState(5)
 
@@ -250,6 +253,7 @@ export function JEI({
         }}
       >
         <input
+          ref={searchInputRef}
           type="text"
           value={search}
           onChange={handleSearchChange}

package/src/hooks/useFocusInputShortcut.ts

@@ -0,0 +1,46 @@
+import { useEffect, useMemo, type RefObject } from 'react'
+
+function isTypingTarget(el: EventTarget | null): boolean {
+  if (!el || !(el instanceof HTMLElement)) return false
+  const tag = el.tagName
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return true
+  if (el.isContentEditable) return true
+  return false
+}
+
+const SLASH_KEYS = ['Slash', 'NumpadDivide'] as const
+
+/**
+ * Focus the input when one of the given keys is pressed; prevents the key from being typed.
+ * Skips when focus is in another input/textarea/select/contenteditable (same idea as useCloseOnWClick).
+ */
+export function useFocusInputShortcut(
+  inputRef: RefObject<HTMLInputElement | null>,
+  keyCodes: readonly string[],
+  enabled = true,
+) {
+  const codesSet = useMemo(() => new Set(keyCodes), [keyCodes])
+
+  useEffect(() => {
+    if (!enabled) return
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (!codesSet.has(e.code)) return
+      if (e.repeat) return
+      if (e.ctrlKey || e.metaKey || e.altKey) return
+      if (isTypingTarget(e.target)) return
+      const el = inputRef.current
+      if (!el || el.disabled) return
+      e.preventDefault()
+      el.focus()
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [enabled, inputRef, codesSet])
+}
+
+/** `/` or numpad `/` — focus JEI search (when JEI is mounted). */
+export function useSlashFocusInput(inputRef: RefObject<HTMLInputElement | null>, enabled = true) {
+  useFocusInputShortcut(inputRef, SLASH_KEYS, enabled)
+}