feat(time-picker): ✨ add keyboard navigation to the column

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({

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({