Commonize modifiers for right align of dropdown menu

https://youtrack.weseek.co.jp/issue/GW-7947
- Create interfaces for popper data and modifier
- Create reactstrap-modifiers file and move modifiers to modifiersForRightAlign
- Export and implement modifiersForRightAlign in PageItemControl
- Update z-index value of CopyDropdown component

apps/app/src/components/Common/Dropdown/PageItemControl.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 
+import { modifiersForRightAlign } from '@growi/ui/dist/utils';
 import { useTranslation } from 'next-i18next';
 import {
   Dropdown, DropdownMenu, DropdownToggle, DropdownItem,
@@ -245,49 +246,11 @@ const PageItemControlDropdownMenu = React.memo((props: DropdownMenuProps): JSX.E
     );
   }
 
-  // Conditional modifiers
-  // To prevent flickering. only happened when `right` is true and persist props should be enabled
-  let modifiers = {};
-  if (alignRight) {
-    modifiers = {
-      applyStyle: {
-        enabled: true,
-      },
-      computeStyle: {
-        enabled: true,
-        fn: (data) => {
-          const popperRect = data.offsets.popper;
-          // Calculate transform styles
-          const newTransform = `translate3d(${popperRect.left - window.innerWidth + popperRect.width}px, ${popperRect.top}px, 0px)`;
-          const styles = {
-            transform: newTransform,
-            top: '0px',
-            right: '0px',
-            willChange: 'transform',
-          };
-          data.styles = styles;
-          return data;
-        },
-      },
-      preventOverflow: {
-        boundariesElement: 'viewport',
-      },
-    };
-  }
-  else {
-    modifiers = {
-      preventOverflow: {
-        boundariesElement: 'viewport',
-      },
-    };
-  }
-
-
   return (
     <DropdownMenu
       data-testid="page-item-control-menu"
       right={alignRight}
-      modifiers={modifiers}
+      modifiers={modifiersForRightAlign}
       container="body"
       persist={!!alignRight}
       style={{ zIndex: 1055 }} /* make it larger than $zindex-modal of bootstrap */

apps/app/src/components/Page/CopyDropdown.jsx

@@ -118,8 +118,11 @@ const CopyDropdown = (props) => {
           <span id={dropdownToggleId}>{children}</span>
         </DropdownToggle>
 
-        <DropdownMenu positionFixed modifiers={{ preventOverflow: { boundariesElement: 'viewport' } }} style={{ zIndex: 1055 }}>
-
+        <DropdownMenu
+          positionFixed
+          modifiers={{ preventOverflow: { boundariesElement: 'viewport' } }}
+          style={{ zIndex: 1016 }} /* zIndex: 1016 // larger than z-index value of grw-subnav-fixed-container in GrowiSubNavigationSwitcher.module.scss */
+        >
           <div className="d-flex align-items-center justify-content-between">
             <DropdownItem header className="px-3">
               { t('copy_to_clipboard.Copy to clipboard') }

packages/ui/src/interfaces/popper-data.ts

@@ -0,0 +1,28 @@
+interface Rect {
+  top: number
+  left: number
+  width: number
+  height: number
+}
+
+export interface PopperData {
+  styles: Partial<CSSStyleDeclaration>;
+  offsets: {
+    popper: Rect;
+    reference: Rect;
+    arrow: { top: number; left: number };
+  };
+}
+
+export interface Modifiers {
+  applyStyle: {
+    enabled: boolean
+  }
+  computeStyle: {
+    enabled: boolean,
+    fn: (data: PopperData) => PopperData
+  }
+  preventOverflow: {
+    boundariesElement: string
+  }
+}

packages/ui/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from './browser-utils';
 export * from './use-fullscreen';
+export * from './reactstrap-modifiers';

packages/ui/src/utils/reactstrap-modifiers.ts

@@ -0,0 +1,26 @@
+import { PopperData, Modifiers } from '~/interfaces/popper-data';
+
+// Conditional modifiers
+// To prevent flickering. only happened when `right` is true and persist props should be enabled
+export const modifiersForRightAlign: Modifiers = {
+  applyStyle: {
+    enabled: true,
+  },
+  computeStyle: {
+    enabled: true,
+    fn: (data: PopperData): PopperData => {
+      const popperRect = data.offsets.popper;
+      // Calculate transform styles
+      const newTransform = `translate3d(${popperRect.left - window.innerWidth + popperRect.width}px, ${popperRect.top}px, 0px)`;
+      const styles = {
+        top: '0px',
+        right: '0px',
+        willChange: 'transform',
+        transform: newTransform,
+      };
+      data.styles = { ...data.styles, ...styles };
+      return data;
+    },
+  },
+  preventOverflow: { boundariesElement: 'viewport' },
+};