fix: BIG-165 cashflow account context menu z-index issue.

src/containers/CashFlow/CashFlowAccounts/CashflowAccountsGrid.js

@@ -3,12 +3,11 @@ import { isNull, isEmpty } from 'lodash';
 import { compose, curry } from 'lodash/fp';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
+import { ContextMenu2 } from '@blueprintjs/popover2';
 import { Menu, MenuItem, MenuDivider, Intent } from '@blueprintjs/core';
 import intl from 'react-intl-universal';
-import useContextMenu from 'react-use-context-menu';
 
 import {
-  ContextMenu,
   BankAccountsList,
   BankAccount,
   If,
@@ -58,20 +57,20 @@ function CashflowBankAccount({
 
   account,
 }) {
-  const [
+  // const [
-    bindMenu,
+  //   bindMenu,
-    bindMenuItem,
+  //   bindMenuItem,
-    useContextTrigger,
+  //   useContextTrigger,
-    { coords, setVisible, isVisible },
+  //   { coords, setVisible, isVisible },
-  ] = useContextMenu();
+  // ] = useContextMenu();
 
-  const [bindTrigger] = useContextTrigger({
+  // const [bindTrigger] = useContextTrigger({
-    collect: () => 'Title',
+  //   collect: () => 'Title',
-  });
+  // });
 
-  const handleClose = React.useCallback(() => {
+  // const handleClose = React.useCallback(() => {
-    setVisible(false);
+  //   setVisible(false);
-  }, [setVisible]);
+  // }, [setVisible]);
 
   // Handle view detail account.
   const handleViewClick = () => {
@@ -109,26 +108,8 @@ function CashflowBankAccount({
   };
 
   return (
-    <CashflowBankAccountWrap>
+    <ContextMenu2
-      <CashflowAccountAnchor
+      content={
-        to={`/cashflow-accounts/${account.id}/transactions`}
-      >
-        <BankAccount
-          {...bindTrigger}
-          title={account.name}
-          code={account.code}
-          balance={!isNull(account.amount) ? account.formatted_amount : '-'}
-          type={account.account_type}
-          updatedBeforeText={getUpdatedBeforeText(account.createdAt)}
-        />
-      </CashflowAccountAnchor>
-
-      <ContextMenu
-        bindMenu={bindMenu}
-        isOpen={isVisible}
-        coords={coords}
-        onClosed={handleClose}
-      >
         <CashflowAccountContextMenu
           account={account}
           onViewClick={handleViewClick}
@@ -139,8 +120,21 @@ function CashflowBankAccount({
           onMoneyInClick={handleMoneyInClick}
           onMoneyOutClick={handleMoneyOutClick}
         />
-      </ContextMenu>
+      }
-    </CashflowBankAccountWrap>
+    >
+      <CashflowAccountAnchor
+        to={`/cashflow-accounts/${account.id}/transactions`}
+      >
+        <BankAccount
+          // {...bindTrigger}
+          title={account.name}
+          code={account.code}
+          balance={!isNull(account.amount) ? account.formatted_amount : '-'}
+          type={account.account_type}
+          updatedBeforeText={getUpdatedBeforeText(account.createdAt)}
+        />
+      </CashflowAccountAnchor>
+    </ContextMenu2>
   );
 }
 

src/style/App.scss

@@ -5,7 +5,7 @@
 // Blueprint framework.
 @import '@blueprintjs/core/src/blueprint.scss';
 @import '@blueprintjs/datetime/src/blueprint-datetime.scss';
-@import "@blueprintjs/popover2";
+@import "@blueprintjs/popover2/src/blueprint-popover2.scss";
 
 @import 'basscss';
 
@@ -189,7 +189,7 @@ body.hide-scrollbar .Pane2 {
   box-shadow: 0 0 0;
   background-color: #fbfbfb;
 
-  .dashboard__loading-indicator{
+  .dashboard__loading-indicator {
     margin: auto;
   }
 }
@@ -208,7 +208,9 @@ html[lang^="ar"] {
 }
 
 .bp3-popover2 {
-  box-shadow: 0 0 0;
+  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.02),
+    0 2px 4px rgba(16, 22, 26, 0.1),
+    0 8px 24px rgba(16, 22, 26, 0.1);
 }
 
 .bp3-tooltip2 .bp3-popover2-arrow:before {
@@ -224,21 +226,21 @@ html[lang^="ar"] {
   padding-bottom: 0;
   position: relative;
 
-  .dialog__header-actions{
+  .dialog__header-actions {
     position: absolute;
     right: 50px;
     top: 0;
     z-index: 9999999;
     margin: 6px;
 
-    .bp3-button{
+    .bp3-button {
       border-color: rgba(0, 0, 0, 0.25);
       color: rgb(25, 32, 37);
       min-height: 30px;
       padding-left: 14px;
       padding-right: 14px;
 
-      & + .bp3-button{
+      &+.bp3-button {
         margin-left: 8px;
       }
     }
@@ -247,24 +249,25 @@ html[lang^="ar"] {
   .bp3-dialog {
 
     &-body {
-      
+
-      &:not(.loading){
+      &:not(.loading) {
         margin: 0;
       }
-      > .bp3-spinner {
+
+      >.bp3-spinner {
         margin: 20px 0;
       }
     }
   }
 }
 
-.bp3-drawer{
+.bp3-drawer {
   border-left: 1px solid #00115e;
 }
 
-.drawer-portal{
+.drawer-portal {
 
-  .bp3-overlay-backdrop{
+  .bp3-overlay-backdrop {
     background: rgba(0, 10, 30, 0.05);
   }
 }
@@ -279,10 +282,10 @@ html[lang^="ar"] {
 }
 
 
-.align-right{
+.align-right {
   text-align: right;
 }
 
-.font-bold{
+.font-bold {
   font-weight: 600;
 }

src/utils/styled-components.js

@@ -5,5 +5,5 @@ export const whenRtl = (restCss) => css`
 `;
 
 export const whenLtr = (restCss) => css`
-  ${({ theme }) => !theme.dir === 'ltr' && restCss}
+  ${({ theme }) => theme.dir === 'ltr' && restCss}
 `;