fix: .

Author: Aslam97

packages/react-fancy-switch/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@omit/react-fancy-switch",
   "private": false,
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "description": "A fancy switch component",

packages/react-fancy-switch/src/components/fancy-switch.tsx

@@ -106,6 +106,20 @@ export const FancySwitch = React.forwardRef<HTMLDivElement, FancySwitchProps>(
       }
     }, [activeIndex, highlighterIncludeMargin])
 
+    const getNextOption = React.useCallback(
+      (currentIndex: number) => {
+        return (currentIndex + 1) % options.length
+      },
+      [options.length]
+    )
+
+    const getPreviousOption = React.useCallback(
+      (currentIndex: number) => {
+        return (currentIndex - 1 + options.length) % options.length
+      },
+      [options.length]
+    )
+
     const handleChange = React.useCallback(
       (index: number) => {
         radioRefs.current[index]?.focus()
@@ -115,33 +129,25 @@ export const FancySwitch = React.forwardRef<HTMLDivElement, FancySwitchProps>(
       [memoizedOptions, onChange]
     )
 
-    const handleKeyDown = (
-      event: React.KeyboardEvent<HTMLDivElement>,
-      index: number
-    ) => {
-      switch (event.key) {
-        case 'ArrowDown':
-        case 'ArrowRight':
-          event.preventDefault()
-          handleChange(getNextOption(index))
-          break
-        case 'ArrowUp':
-        case 'ArrowLeft':
-          event.preventDefault()
-          handleChange(getPreviousOption(index))
-          break
-        default:
-          break
-      }
-    }
-
-    const getNextOption = (currentIndex: number) => {
-      return (currentIndex + 1) % options.length
-    }
-
-    const getPreviousOption = (currentIndex: number) => {
-      return (currentIndex - 1 + options.length) % options.length
-    }
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>, index: number) => {
+        switch (event.key) {
+          case 'ArrowDown':
+          case 'ArrowRight':
+            event.preventDefault()
+            handleChange(getNextOption(index))
+            break
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            event.preventDefault()
+            handleChange(getPreviousOption(index))
+            break
+          default:
+            break
+        }
+      },
+      [handleChange, getNextOption, getPreviousOption]
+    )
 
     React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement)
 

website/src/App.tsx

@@ -12,11 +12,12 @@ import {
 } from '@/components/ui/form'
 import { cn } from './lib/utils'
 import { FancySwitch } from '@/components/custom/fancy-switch'
+import { useEffect } from 'react'
 
 const orderTypes: OptionValue[] = ['Delivery', 'Pickup', 'Shipping']
-const options: { label: string; value: number }[] = [
-  { label: 'Publish', value: 1 },
-  { label: 'Draft', value: 0 }
+const options = [
+  { label: 'Publish', value: 1, test: 'H' },
+  { label: 'Draft', value: 0, test: 'U' }
 ]
 const pets: { text: string; id: number }[] = [
   { text: 'Car, (AKA Cat)', id: 1 },
@@ -48,6 +49,17 @@ function App() {
     console.log(data)
   }
 
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        console.log('ArrowUp/ArrowDown')
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [])
+
   return (
     <div className="flex min-h-screen place-items-center justify-center p-4">
       <div className="mx-auto max-w-4xl">