refactor: rewrite internal keyboard utils in typescript (#18707)

Author: adamalston

packages/react/src/components/FileUploader/FileUploader.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -242,12 +242,7 @@ const FileUploader = React.forwardRef(
                       iconDescription={iconDescription}
                       status={filenameStatus}
                       onKeyDown={(evt) => {
-                        if (
-                          matches(evt as unknown as Event, [
-                            keys.Enter,
-                            keys.Space,
-                          ])
-                        ) {
+                        if (matches(evt, [keys.Enter, keys.Space])) {
                           handleClick(evt, { index, filenameStatus });
                         }
                       }}

packages/react/src/components/FileUploader/FileUploaderDropContainer.tsx

@@ -204,7 +204,7 @@ function FileUploaderDropContainer({
         className={dropareaClasses}
         ref={innerRef}
         onKeyDown={(evt) => {
-          if (matches(evt as unknown as Event, [keys.Enter, keys.Space])) {
+          if (matches(evt, [keys.Enter, keys.Space])) {
             evt.preventDefault();
             inputRef.current?.click();
           }

packages/react/src/components/FileUploader/FileUploaderItem.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -156,7 +156,7 @@ function FileUploaderItem({
                 : undefined
             }
             onKeyDown={(evt) => {
-              if (matches(evt as unknown as Event, [keys.Enter, keys.Space])) {
+              if (matches(evt, [keys.Enter, keys.Space])) {
                 if (status === 'edit') {
                   evt.preventDefault();
                   onDelete(evt, { uuid: id });

packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx

@@ -680,7 +680,10 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect<
     event?: KeyboardEvent<Element> | MouseEvent<HTMLButtonElement>
   ) {
     const value = textInput.current?.value;
-    if (value?.length === 1 || (event && match(event, keys.Escape))) {
+    if (
+      value?.length === 1 ||
+      (event && 'key' in event && match(event, keys.Escape))
+    ) {
       setInputValue('');
     } else {
       setInputValue(value ?? '');

packages/react/src/components/Tabs/Tabs.tsx

@@ -21,7 +21,6 @@ import React, {
   type ReactNode,
   type MouseEvent,
   type KeyboardEvent,
-  type SyntheticEvent,
   type HTMLAttributes,
   type RefObject,
   type ComponentType,
@@ -306,7 +305,7 @@ TabsVertical.propTypes = {
  * given a count of the total items and the current index
  */
 function getNextIndex(
-  event: SyntheticEvent,
+  event: KeyboardEvent,
   total: number,
   index: number
 ): number {
@@ -333,7 +332,7 @@ function getNextIndex(
  * given a count of the total items and the current index
  */
 function getNextIndexVertical(
-  event: SyntheticEvent,
+  event: KeyboardEvent,
   total: number,
   index: number
 ): number {

packages/react/src/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -168,7 +168,7 @@ const Tooltip: TooltipComponent = React.forwardRef(
     }
 
     const onKeyDown = useCallback(
-      (event: React.SyntheticEvent | Event) => {
+      (event: KeyboardEvent) => {
         if (open && match(event, keys.Escape)) {
           event.stopPropagation();
           setOpen(false);

packages/react/src/components/UIShell/SideNav.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -211,7 +211,7 @@ function SideNavRenderFunction(
     };
   }
 
-  useWindowEvent('keydown', (event: Event) => {
+  useWindowEvent('keydown', (event) => {
     const focusedElement = document.activeElement;
 
     if (

packages/react/src/internal/keyboard/index.js renamed to packages/react/src/internal/keyboard/index.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 export * as keys from './keys';
-export { match, matches, getCharacterFor } from './match';
-export { getNextIndex } from './navigation';
+export * from './match';
+export * from './navigation';

packages/react/src/internal/keyboard/keys.js renamed to packages/react/src/internal/keyboard/keys.ts

@@ -1,25 +1,31 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-export const Tab = {
+import { KeyboardEvent } from 'react';
+
+export type Key = Pick<KeyboardEvent, 'which' | 'keyCode' | 'code'> & {
+  key?: string | string[];
+};
+
+export const Tab: Key = {
   key: 'Tab',
   which: 9,
   keyCode: 9,
   code: 'Tab',
 };
 
-export const Enter = {
+export const Enter: Key = {
   key: 'Enter',
   which: 13,
   keyCode: 13,
   code: 'Enter',
 };
 
-export const Escape = {
+export const Escape: Key = {
   key: [
     'Escape',
     // IE11 Escape
@@ -30,72 +36,72 @@ export const Escape = {
   code: 'Esc',
 };
 
-export const Space = {
+export const Space: Key = {
   key: ' ',
   which: 32,
   keyCode: 32,
   code: 'Space',
 };
 
-export const PageUp = {
+export const PageUp: Key = {
   key: 'PageUp',
   which: 33,
   keyCode: 33,
   code: 'Numpad9',
 };
 
-export const PageDown = {
+export const PageDown: Key = {
   key: 'PageDown',
   which: 34,
   keyCode: 34,
   code: 'Numpad3',
 };
 
-export const End = {
+export const End: Key = {
   key: 'End',
   which: 35,
   keyCode: 35,
   code: 'Numpad1',
 };
 
-export const Home = {
+export const Home: Key = {
   key: 'Home',
   which: 36,
   keyCode: 36,
   code: 'Numpad7',
 };
 
-export const ArrowLeft = {
+export const ArrowLeft: Key = {
   key: 'ArrowLeft',
   which: 37,
   keyCode: 37,
   code: 'ArrowLeft',
 };
 
-export const ArrowUp = {
+export const ArrowUp: Key = {
   key: 'ArrowUp',
   which: 38,
   keyCode: 38,
   code: 'ArrowUp',
 };
 
-export const ArrowRight = {
+export const ArrowRight: Key = {
   key: 'ArrowRight',
   which: 39,
   keyCode: 39,
   code: 'ArrowRight',
 };
 
-export const ArrowDown = {
+export const ArrowDown: Key = {
   key: 'ArrowDown',
   which: 40,
   keyCode: 40,
   code: 'ArrowDown',
 };
 
-export const Delete = {
+export const Delete: Key = {
   key: 'Delete',
-  which: 8 || 46,
-  keyCode: 8 || 46,
+  which: 8,
+  keyCode: 8,
   code: 'ArrowDecimal',
 };