From 356a71254a865f138a24c4971cb2c9e1f355d1af Mon Sep 17 00:00:00 2001
From: sebastian-mereuta <sebastian.mereuta93@gmail.com>
Date: Mon, 6 Jan 2025 15:36:34 +0200
Subject: [PATCH] address findings

---
 .../leftPanel/LeftPanel.styles.tsx            |  9 ++++---
 .../pagesPanel/useAttachArrowKeysListener.ts  | 26 ++++++++++++++++---
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx b/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx
index a3cf6a5f..5302dda5 100644
--- a/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx
+++ b/src/components/layout-panels/leftPanel/LeftPanel.styles.tsx
@@ -1,6 +1,6 @@
 import { ITheme } from '@chili-publish/grafx-shared-components';
 import styled from 'styled-components';
-import { SCROLL_SIZE } from '../../../utils/constants';
+import { BORDER_SIZE, SCROLL_SIZE } from '../../../utils/constants';
 
 export const LeftPanelContainer = styled.div<{ overflowScroll: boolean; panelTheme: ITheme['panel'] }>`
     min-width: 18.75rem;
@@ -13,13 +13,14 @@ export const LeftPanelContainer = styled.div<{ overflowScroll: boolean; panelThe
 
 export const VariablesListContainer = styled.div<{ hidden: boolean }>`
     padding: 0 0 0 1.25rem;
-    width: calc(18.75rem - 1.5625rem - ${SCROLL_SIZE});
+    box-sizing: border-box;
+    width: calc(18.75rem - 1.5625rem - ${SCROLL_SIZE} + 1.25rem);
     ${({ hidden }) => hidden && 'display: none;'};
 `;
 
 export const ImagePanelContainer = styled.div<{ hidden: boolean }>`
     padding: 0 0 0 1.25rem;
-    height: 100%;
-    width: calc(18.75rem - 1.25rem - ${SCROLL_SIZE});
+    height: calc(100% - ${BORDER_SIZE});
+    width: calc(18.75rem - 1.25rem);
     ${({ hidden }) => hidden && 'display: none;'};
 `;
diff --git a/src/components/pagesPanel/useAttachArrowKeysListener.ts b/src/components/pagesPanel/useAttachArrowKeysListener.ts
index 48e38d93..a1acc02d 100644
--- a/src/components/pagesPanel/useAttachArrowKeysListener.ts
+++ b/src/components/pagesPanel/useAttachArrowKeysListener.ts
@@ -4,16 +4,18 @@ import { useCallback, useEffect, useState } from 'react';
 
 export const useAttachArrowKeysListener = ({ pages, activePageId }: { pages: Page[]; activePageId: string | null }) => {
     const iframe = useGetIframeAsync({ containerId: 'studio-ui-chili-editor' })?.contentWindow;
-
+    const [isCalendarPickerOpen, setIsCalendarPickerOpen] = useState(false);
     const [selectedPageIndex, setSelectedPageIndex] = useState<number>(-1);
 
+    const calendarPickerElement = document.getElementsByClassName('react-datepicker-popper');
+
     const handleSelectPage = async (pageId: string) => {
         await window.StudioUISDK.page.select(pageId);
     };
     const handleOnArrowKeyDown = useCallback(
         async (event: KeyboardEvent) => {
             const formElements = ['INPUT', 'TEXTAREA', 'SELECT', 'OPTION'];
-            if (formElements.includes((event.target as HTMLElement).tagName)) {
+            if (formElements.includes((event.target as HTMLElement).tagName) || isCalendarPickerOpen) {
                 return;
             }
             switch (event.key) {
@@ -39,10 +41,25 @@ export const useAttachArrowKeysListener = ({ pages, activePageId }: { pages: Pag
                     break;
             }
         },
-        [selectedPageIndex, pages],
+        [selectedPageIndex, pages, isCalendarPickerOpen],
     );
 
     useEffect(() => {
+        const customObserver = new MutationObserver(() => {
+            if (document.contains(calendarPickerElement[0])) {
+                setIsCalendarPickerOpen(true);
+            } else {
+                setIsCalendarPickerOpen(false);
+            }
+        });
+
+        customObserver.observe(document, {
+            attributes: false,
+            childList: true,
+            characterData: false,
+            subtree: true,
+        });
+
         const addShortcutListeners = () => {
             document.addEventListener('keydown', handleOnArrowKeyDown);
             iframe?.addEventListener('keydown', handleOnArrowKeyDown);
@@ -53,8 +70,9 @@ export const useAttachArrowKeysListener = ({ pages, activePageId }: { pages: Pag
         return () => {
             document.removeEventListener('keydown', handleOnArrowKeyDown);
             iframe?.removeEventListener('keydown', handleOnArrowKeyDown);
+            customObserver.disconnect();
         };
-    }, [handleOnArrowKeyDown, iframe]);
+    }, [handleOnArrowKeyDown, iframe, calendarPickerElement]);
 
     useEffect(() => {
         if (!pages.length || !activePageId) return;