From 0a514ad9f1d6cdf36d2c5fd928b7a513a20b2ca0 Mon Sep 17 00:00:00 2001
From: Navin <navin007.a@gmail.com>
Date: Mon, 12 Oct 2020 12:33:26 +0530
Subject: [PATCH] =?UTF-8?q?feat(time-picker):=20=E2=9C=A8=20=20add=20keybo?=
 =?UTF-8?q?ard=20navigation=20to=20the=20column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/timepicker/TimePickerColumn.ts  |  9 -------
 src/timepicker/TimePickerContent.ts | 37 +++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/src/timepicker/TimePickerColumn.ts b/src/timepicker/TimePickerColumn.ts
index 412483e6f..25901e023 100644
--- a/src/timepicker/TimePickerColumn.ts
+++ b/src/timepicker/TimePickerColumn.ts
@@ -21,15 +21,6 @@ export const useTimePickerColumn = createHook<
   name: "TimePickerColumn",
   compose: useComposite,
   keys: TIME_PICKER_COLUMN_KEYS,
-
-  useProps(options, htmlProps) {
-    return {
-      onKeyDown: (e: React.KeyboardEvent) => {
-        // console.log("%c e", "color: #0088cc", e);
-      },
-      ...htmlProps,
-    };
-  },
 });
 
 export const TimePickerColumn = createComponent({
diff --git a/src/timepicker/TimePickerContent.ts b/src/timepicker/TimePickerContent.ts
index 3bbe06615..3978874e4 100644
--- a/src/timepicker/TimePickerContent.ts
+++ b/src/timepicker/TimePickerContent.ts
@@ -1,4 +1,7 @@
+import * as React from "react";
 import { createComponent, createHook } from "reakit-system";
+import { createOnKeyDown, useForkRef } from "reakit-utils";
+import { focus, getNextTabbable, getPreviousTabbable } from "@chakra-ui/utils";
 
 import {
   PickerBaseContentHTMLProps,
@@ -21,6 +24,40 @@ export const useTimePickerContent = createHook<
   name: "TimePickerContent",
   compose: usePickerBaseContent,
   keys: TIME_PICKER_CONTENT_KEYS,
+
+  useProps(_, { ref: htmlRef, onKeyDown: htmlOnKeyDown, ...htmlProps }) {
+    const ref = React.useRef<HTMLElement>(null);
+
+    const onKeyDown = React.useMemo(() => {
+      return createOnKeyDown({
+        onKeyDown: htmlOnKeyDown,
+        keyMap: () => {
+          return {
+            ArrowRight: () => {
+              if (ref.current) {
+                const nextTabbableElement = getNextTabbable(ref.current);
+                if (nextTabbableElement) {
+                  focus(nextTabbableElement);
+                }
+              }
+            },
+            ArrowLeft: () => {
+              if (ref.current) {
+                const previousTabbableElement = getPreviousTabbable(
+                  ref.current,
+                );
+                if (previousTabbableElement) {
+                  focus(previousTabbableElement);
+                }
+              }
+            },
+          };
+        },
+      });
+    }, [htmlOnKeyDown]);
+
+    return { ref: useForkRef(ref, htmlRef), onKeyDown, ...htmlProps };
+  },
 });
 
 export const TimePickerContent = createComponent({