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 [
-    bindMenu,
-    bindMenuItem,
-    useContextTrigger,
-    { coords, setVisible, isVisible },
-  ] = useContextMenu();
+  // const [
+  //   bindMenu,
+  //   bindMenuItem,
+  //   useContextTrigger,
+  //   { coords, setVisible, isVisible },
+  // ] = useContextMenu();
 
-  const [bindTrigger] = useContextTrigger({
-    collect: () => 'Title',
-  });
+  // const [bindTrigger] = useContextTrigger({
+  //   collect: () => 'Title',
+  // });
 
-  const handleClose = React.useCallback(() => {
-    setVisible(false);
-  }, [setVisible]);
+  // const handleClose = React.useCallback(() => {
+  //   setVisible(false);
+  // }, [setVisible]);
 
   // Handle view detail account.
   const handleViewClick = () => {
@@ -109,26 +108,8 @@ function CashflowBankAccount({
   };
 
   return (
-    <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>
-
-      <ContextMenu
-        bindMenu={bindMenu}
-        isOpen={isVisible}
-        coords={coords}
-        onClosed={handleClose}
-      >
+    <ContextMenu2
+      content={
         <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';
 
@@ -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 {
@@ -251,6 +253,7 @@ html[lang^="ar"] {
       &:not(.loading) {
         margin: 0;
       }
+
       >.bp3-spinner {
         margin: 20px 0;
       }

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}
 `;