add local hook, useRef for handler and keyCode

Author: emma-boardman

.storybook/main.js

@@ -79,12 +79,6 @@ module.exports = {
       ...extraRules,
     ];
 
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto',
-    });
-
     config.resolve.alias = {
       ...config.resolve.alias,
       '@shopify/polaris': path.resolve(__dirname, '..', 'src'),

package.json

@@ -81,7 +81,6 @@
     "@shopify/polaris-tokens": "^3.0.0",
     "@types/react": "^16.9.12",
     "@types/react-dom": "^16.9.4",
-    "@shopify/react-hooks": "^1.13.0",
     "@types/react-transition-group": "^4.4.0",
     "focus-visible": "^5.2.0",
     "lodash": "^4.17.4",

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useLayoutEffect, useCallback} from 'react';
+import React, {useState, useEffect, useCallback} from 'react';
 
 import {useUniqueId} from '../../../../utilities/unique-id';
 import {useToggle} from '../../../../utilities/use-toggle';
@@ -8,7 +8,7 @@ import {Popover, PopoverProps} from '../../../Popover';
 import {ActionListItemDescriptor, Key} from '../../../../types';
 import {KeypressListener} from '../../../KeypressListener';
 import {EventListener} from '../../../EventListener';
-import {isServer} from '../../../../utilities/target';
+import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
 
 import {ComboBoxContext} from './context';
 import styles from './ComboBox.scss';
@@ -71,8 +71,6 @@ export function ComboBox({
     setFalse: forcePopoverActiveFalse,
   } = useToggle(false);
 
-  const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;
-
   const id = useUniqueId('ComboBox', idProp);
 
   const getActionsWithIds = useCallback(

src/components/KeypressListener/KeypressListener.tsx

@@ -1,6 +1,6 @@
 import {useCallback, useEffect, useRef} from 'react';
-import {useIsomorphicLayoutEffect} from '@shopify/react-hooks';
 
+import {useIsomorphicLayoutEffect} from '../../utilities/use-isomorphic-layout-effect';
 import type {Key} from '../../types';
 
 export interface KeypressListenerProps {
@@ -16,20 +16,18 @@ export function KeypressListener({
   handler,
   keyEvent = 'keyup',
 }: KeypressListenerProps) {
-  const handlerRef = useRef(handler);
+  const tracked = useRef({handler, keyCode});
 
-  const handleKeyEvent = useCallback(
-    (event: KeyboardEvent) => {
-      if (event.keyCode === keyCode) {
-        handlerRef.current(event);
-      }
-    },
-    [keyCode],
-  );
+  const handleKeyEvent = useCallback((event: KeyboardEvent) => {
+    const {handler, keyCode} = tracked.current;
+    if (event.keyCode === keyCode) {
+      handler(event);
+    }
+  }, []);
 
   useIsomorphicLayoutEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
+    tracked.current = {handler, keyCode};
+  }, [handler, keyCode]);
 
   useEffect(() => {
     document.addEventListener(keyEvent, handleKeyEvent);

src/utilities/use-isomorphic-layout-effect.ts

@@ -0,0 +1,5 @@
+import {useEffect, useLayoutEffect} from 'react';
+
+import {isServer} from './target';
+
+export const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect;

yarn.lock

@@ -2380,7 +2380,7 @@
   dependencies:
     tslib "^1.14.1"
 
-"@shopify/react-hooks@^1.11.2", "@shopify/react-hooks@^1.13.0":
+"@shopify/react-hooks@^1.11.2":
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/@shopify/react-hooks/-/react-hooks-1.13.1.tgz#0756205f29e5320920f9dcaae8b057bb34f0e21f"
   integrity sha512-i1/HKdpsuNXRi5MoZp2nciw0UtqAWEmV25Moq689X8GrfQLAGuxu97HV1V0TUx9PODlyfJsfuHyepEG+TRSjNA==