Merge branch 'devel' into CB-5811-incorrect-highlighting-of-a-non-edi…

…table-field

webapp/packages/core-app/src/AppScreen/RightArea.tsx

@@ -40,8 +40,12 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
 
   const toolsDisabled = appScreenService.rightAreaBottom.getDisplayed({}).length === 0;
 
+  function close() {
+    optionsPanelService.close();
+  }
+
   return (
-    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true }, className)}>
+    <SlideBox open={optionsPanelService.active} className={s(styles, { slideBox: true }, className)} onClose={close}>
       <SlideElement>
         <Loader className={s(styles, { loader: true })} suspense>
           <OptionsPanel />
@@ -61,7 +65,7 @@ export const RightArea = observer<Props>(function RightArea({ className }) {
             </Loader>
           </Pane>
         </Split>
-        <SlideOverlay onClick={() => optionsPanelService.close()} />
+        <SlideOverlay onClick={close} />
       </SlideElement>
     </SlideBox>
   );

webapp/packages/core-blocks/package.json

@@ -34,6 +34,7 @@
     "mobx": "^6",
     "mobx-react-lite": "^4",
     "react": "^18",
+    "react-hotkeys-hook": "^4",
     "reakit": "^1",
     "reakit-utils": "^0"
   },

webapp/packages/core-blocks/src/Slide/SlideBox.tsx

@@ -8,7 +8,7 @@
 import { observer } from 'mobx-react-lite';
 import { useEffect, useRef } from 'react';
 
-import { s, useS } from '../index.js';
+import { s, useHotkeys, useMergeRefs, useS } from '../index.js';
 import SlideBoxStyles from './SlideBox.module.css';
 import SlideBoxElementStyles from './SlideElement.module.css';
 import SlideBoxOverlayStyles from './SlideOverlay.module.css';
@@ -17,13 +17,17 @@ interface Props {
   className?: string;
   children?: React.ReactNode;
   open?: boolean;
+  onClose?: () => void;
 }
 
-export const SlideBox = observer<Props>(function SlideBox({ children, open, className }) {
+export const SlideBox = observer<Props>(function SlideBox({ children, open, className, onClose }) {
   const slideBoxStyles = useS(SlideBoxStyles);
   const slideBoxElementStyles = useS(SlideBoxElementStyles);
   const slideBoxOverlayStyles = useS(SlideBoxOverlayStyles);
+
   const divRef = useRef<HTMLDivElement>(null);
+  const ref = useHotkeys('escape', () => onClose?.(), { enabled: open });
+  const mergedRefs = useMergeRefs(ref, divRef);
 
   useEffect(() => {
     const div = divRef.current;
@@ -48,7 +52,7 @@ export const SlideBox = observer<Props>(function SlideBox({ children, open, clas
 
   return (
     <div
-      ref={divRef}
+      ref={mergedRefs}
       className={s(slideBoxStyles, { slideBox: true }, s(slideBoxElementStyles, { open }), s(slideBoxOverlayStyles, { open }), className)}
     >
       {children}

webapp/packages/core-blocks/src/Slide/SlideElement.module.css

@@ -11,11 +11,11 @@
   display: inline-block;
   vertical-align: top;
   white-space: normal;
-  transition: transform ease-in-out 0.4s;
+  transition: transform ease-in-out 0.3s;
   transform: translateX(-100%);
 
   &:first-child {
-    transition: width ease-in-out 0.4s;
+    transition: width ease-in-out 0.3s;
     width: 100%;
   }
 }

webapp/packages/core-blocks/src/Slide/SlideOverlay.module.css

@@ -16,7 +16,7 @@
   top: 0;
   left: 0;
   background: rgb(0 0 0 / 0%);
-  transition: background cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
+  transition: background ease-in-out 0.3s;
 }
 
 .iconBtn {

webapp/packages/core-blocks/src/index.ts

@@ -5,6 +5,8 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
+export { useHotkeys } from 'react-hotkeys-hook';
+
 export * from './CommonDialog/CommonDialog/CommonDialogBody.js';
 export * from './CommonDialog/CommonDialog/CommonDialogFooter.js';
 export * from './CommonDialog/CommonDialog/CommonDialogHeader.js';

webapp/packages/core-view/package.json

@@ -26,8 +26,7 @@
     "@cloudbeaver/core-utils": "^0",
     "mobx": "^6",
     "mobx-react-lite": "^4",
-    "react": "^18",
-    "react-hotkeys-hook": "^4"
+    "react": "^18"
   },
   "peerDependencies": {},
   "devDependencies": {

webapp/packages/core-view/src/View/CaptureView.tsx

@@ -7,9 +7,8 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 
-import { s, useFocus, useS } from '@cloudbeaver/core-blocks';
+import { s, useFocus, useHotkeys, useS } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { isObjectsEqual } from '@cloudbeaver/core-utils';
 

webapp/packages/plugin-administration/src/Administration/Administration.tsx

@@ -100,6 +100,10 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
     contentRef.current?.scrollTo({ top: 0, left: 0 });
   }, [activeScreen?.item]);
 
+  function close() {
+    optionsPanelService.close();
+  }
+
   return (
     <CaptureView view={administrationViewService} className={s(styles, { captureView: true })}>
       <AdministrationCaptureViewContext />
@@ -120,7 +124,7 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
         <div ref={contentRef} className={s(styles, { contentContainer: true })}>
           {children}
           <SContext registry={adminPageRegistry}>
-            <SlideBox className={s(styles, { slideBox: true })} open={optionsPanelService.active}>
+            <SlideBox className={s(styles, { slideBox: true })} open={optionsPanelService.active} onClose={close}>
               <SlideElement className={s(styles, { slideElement: true })}>
                 <Loader className={s(styles, { loader: true })} suspense>
                   <div className={s(styles, { content: true })}>
@@ -132,7 +136,7 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
                 <div className={s(styles, { content: true })}>
                   <ItemContent activeScreen={activeScreen} configurationWizard={configurationWizard} />
                 </div>
-                <SlideOverlay onClick={() => optionsPanelService.close()} />
+                <SlideOverlay onClick={close} />
               </SlideElement>
             </SlideBox>
           </SContext>

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.module.css

@@ -10,7 +10,6 @@
   display: flex;
   overflow: hidden;
   box-sizing: border-box;
-  position: relative;
 }
 
 .container {
@@ -28,8 +27,3 @@
     display: none;
   }
 }
-
-.cellMenu {
-  width: 25px;
-  height: 100%;
-}

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/CellFormatter.tsx

@@ -59,7 +59,6 @@ export const CellFormatter = observer<Props>(function CellFormatter({ className,
             spreadsheetActions={spreadsheetActions}
             resultIndex={context.resultIndex}
             simple={context.simple}
-            className={s(styles, { cellMenu: true })}
             onStateSwitch={setMenuVisible}
           />
         </div>

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/Formatters/Menu/CellMenu.module.css

@@ -18,10 +18,15 @@
   position: absolute;
   top: 0px;
   right: 0px;
+  height: 100%;
 }
+
 .menuTrigger {
   padding: 1px 2px;
+  display: flex;
+  align-items: center;
   height: 100%;
+  justify-content: center;
 
   &:hover {
     background: none;