From 8066d24a7193ba6c28bc473dad1fbdc56cd39f06 Mon Sep 17 00:00:00 2001
From: sangwook <bnbt3@naver.com>
Date: Tue, 20 May 2025 21:20:36 +0900
Subject: [PATCH]  [@mantine/core] Refactor AngleSlider keyboard interaction
 logic and add support for mark restrictions

---
 .../components/AngleSlider/AngleSlider.tsx    | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/@mantine/core/src/components/AngleSlider/AngleSlider.tsx b/packages/@mantine/core/src/components/AngleSlider/AngleSlider.tsx
index d0f256e0283..976c1c5bde0 100644
--- a/packages/@mantine/core/src/components/AngleSlider/AngleSlider.tsx
+++ b/packages/@mantine/core/src/components/AngleSlider/AngleSlider.tsx
@@ -168,27 +168,43 @@ export const AngleSlider = factory<AngleSliderFactory>((_props, ref) => {
       return;
     }
 
+    let newValue = _value;
+
     if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
-      const normalized = normalizeRadialValue(_value - step!, step!);
-      setValue(normalized);
-      onChangeEnd?.(normalized);
+      newValue = normalizeRadialValue(_value - step!, step!);
     }
 
     if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
-      const normalized = normalizeRadialValue(_value + step!, step!);
-      setValue(normalized);
-      onChangeEnd?.(normalized);
+      newValue = normalizeRadialValue(_value + step!, step!);
     }
 
     if (event.key === 'Home') {
-      setValue(0);
-      onChangeEnd?.(0);
+      newValue = 0;
     }
 
     if (event.key === 'End') {
-      setValue(359);
-      onChangeEnd?.(359);
+      newValue = 359;
+    }
+
+    if (restrictToMarks && Array.isArray(marks)) {
+      const markValues = marks.map((mark) => mark.value);
+      const currentIndex = markValues.indexOf(_value);
+
+      if (currentIndex !== -1) {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+          newValue = markValues[Math.max(0, currentIndex - 1)];
+        } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+          newValue = markValues[Math.min(markValues.length - 1, currentIndex + 1)];
+        } else {
+          newValue = findClosestNumber(newValue, markValues);
+        }
+      } else {
+        newValue = findClosestNumber(newValue, markValues);
+      }
     }
+
+    setValue(newValue);
+    onChangeEnd?.(newValue);
   };
 
   const marksItems = marks?.map((mark, index) => (