From 787143ec340d3dae5aa7745f9e754b433de1c770 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicole=20Miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Thu, 27 Mar 2025 20:24:36 +0100
Subject: [PATCH] pl-fe: update dep
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/package.json                               | 2 +-
 packages/pl-fe/src/components/status.tsx                  | 4 ++--
 packages/pl-fe/src/components/tombstone.tsx               | 6 ++++--
 .../pl-fe/src/features/interaction-requests/index.tsx     | 6 ++++--
 .../features/notifications/components/notification.tsx    | 2 +-
 packages/pl-fe/src/features/status/components/thread.tsx  | 2 +-
 packages/pl-fe/yarn.lock                                  | 8 ++++----
 7 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/pl-fe/package.json b/packages/pl-fe/package.json
index da3297b5b..1db6bdb3e 100644
--- a/packages/pl-fe/package.json
+++ b/packages/pl-fe/package.json
@@ -54,7 +54,7 @@
     "@lexical/rich-text": "^0.29.0",
     "@lexical/selection": "^0.29.0",
     "@lexical/utils": "^0.29.0",
-    "@mkljczk/react-hotkeys": "^1.2.2",
+    "@mkljczk/react-hotkeys": "^1.3.0",
     "@mkljczk/url-purify": "^0.0.2",
     "@reach/combobox": "^0.18.0",
     "@reach/rect": "^0.18.0",
diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index d35c6d3af..8741ca1be 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -311,7 +311,7 @@ const Status: React.FC<IStatus> = (props) => {
     };
 
     return (
-      <HotKeys handlers={minHandlers} attach={node.current || undefined}>
+      <HotKeys handlers={minHandlers} attachRef={node}>
         <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
@@ -348,7 +348,7 @@ const Status: React.FC<IStatus> = (props) => {
   };
 
   return (
-    <HotKeys handlers={handlers} data-testid='status' attach={node.current || undefined}>
+    <HotKeys handlers={handlers} data-testid='status' attachRef={node}>
       <div
         className={clsx('status cursor-pointer', { focusable })}
         tabIndex={focusable && !muted ? 0 : undefined}
diff --git a/packages/pl-fe/src/components/tombstone.tsx b/packages/pl-fe/src/components/tombstone.tsx
index a1b20c460..e8c7e8bfe 100644
--- a/packages/pl-fe/src/components/tombstone.tsx
+++ b/packages/pl-fe/src/components/tombstone.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import Text from 'pl-fe/components/ui/text';
@@ -13,13 +13,15 @@ interface ITombstone {
 
 /** Represents a deleted item. */
 const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown, deleted }) => {
+  const node = useRef<HTMLDivElement>(null);
+
   const handlers = {
     moveUp: () => onMoveUp?.(id),
     moveDown: () => onMoveDown?.(id),
   };
 
   return (
-    <HotKeys handlers={handlers}>
+    <HotKeys handlers={handlers} attachRef={node}>
       <div className='h-16'>
         <div
           className='focusable flex h-[42px] items-center justify-center rounded-lg border-2 border-gray-200 text-center dark:border-gray-800'
diff --git a/packages/pl-fe/src/features/interaction-requests/index.tsx b/packages/pl-fe/src/features/interaction-requests/index.tsx
index 8c15417e1..0c1891e0f 100644
--- a/packages/pl-fe/src/features/interaction-requests/index.tsx
+++ b/packages/pl-fe/src/features/interaction-requests/index.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useRef } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
@@ -96,6 +96,8 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
   const { account: ownAccount } = useOwnAccount();
   const { account } = useAccount(interactionRequest.account_id);
 
+  const node = useRef<HTMLDivElement>(null);
+
   const { mutate: authorize } = useAuthorizeInteractionRequestMutation(interactionRequest.id);
   const { mutate: reject } = useRejectInteractionRequestMutation(interactionRequest.id);
 
@@ -173,7 +175,7 @@ const InteractionRequest: React.FC<IInteractionRequest> = ({
   };
 
   return (
-    <HotKeys handlers={handlers}>
+    <HotKeys handlers={handlers} attachRef={node}>
       <div className='notification focusable' tabIndex={0}>
         <div className='focusable p-4'>
           <Stack space={2}>
diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index 1ae4f09ff..b8d557b78 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -411,7 +411,7 @@ const Notification: React.FC<INotification> = (props) => {
   );
 
   return (
-    <HotKeys handlers={handlers} data-testid='notification' attach={node.current || undefined}>
+    <HotKeys handlers={handlers} data-testid='notification' attachRef={node}>
       <div
         className='notification focusable'
         tabIndex={0}
diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index e9109bde0..48e0fd886 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -346,7 +346,7 @@ const Thread: React.FC<IThread> = ({
       {status.deleted ? (
         <Tombstone id={status.id} onMoveUp={handleMoveUp} onMoveDown={handleMoveDown} deleted />
       ) : (
-        <HotKeys handlers={handlers} attach={statusRef.current || undefined}>
+        <HotKeys handlers={handlers} attachRef={statusRef}>
           <div
             ref={statusRef}
             className='focusable relative'
diff --git a/packages/pl-fe/yarn.lock b/packages/pl-fe/yarn.lock
index 6e42bf6e6..18309797d 100644
--- a/packages/pl-fe/yarn.lock
+++ b/packages/pl-fe/yarn.lock
@@ -1642,10 +1642,10 @@
   resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.26.tgz#0d1a64cf0a04a29f4283bbc1f5a313f355f9c73d"
   integrity sha512-7NdgdOR7lkzrN70zGSULmrcvKyi/aJjpTJRCbuy8IZuHiLkPTvsr10jW0MJgWzK2l2wTmhdQvegTw6yNU5AVNQ==
 
-"@mkljczk/react-hotkeys@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@mkljczk/react-hotkeys/-/react-hotkeys-1.2.2.tgz#9e27d1f54f6fcc96657643d07534cf71987eba09"
-  integrity sha512-BGGdSdPtpu+XbqvfO3gxzUNHzMJN0ztmQoIuqEEPBsogH6oAzlGdFnfy5VDxExJ+8LufmLHHr3yZ7eiqYqGvog==
+"@mkljczk/react-hotkeys@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@mkljczk/react-hotkeys/-/react-hotkeys-1.3.0.tgz#936069e8462c56dfac7a8e1e4db4ae8d23c1dc69"
+  integrity sha512-xfcYZ/J2YCpakRDEZd0ZdCQ2wx75Pmub9JksyBWX+W56UGDeMbmI8nPedG6V89JhUlgFsijZVVlVeDHIuzG6Hw==
   dependencies:
     lodash "^4.17.21"
     mousetrap "^1.6.5"