address findings

chili-publish · Jan 6, 2025 · dff5c83 · dff5c83
1 parent 51e5000
commit dff5c83
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 7 deletions.
diff --git 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;
@@ -19,7 +19,7 @@ export const VariablesListContainer = styled.div<{ hidden: boolean }>`
 
 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
@@ -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;