feat: Added a conflict resolution dialog and a Conflicts view for easier management of conflicts (#2337)

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -1,14 +1,15 @@
 import { useDocumentRect } from '@/Hooks/useDocumentRect'
 import { useAutoElementRect } from '@/Hooks/useElementRect'
 import { classNames } from '@standardnotes/utils'
-import { useCallback, useLayoutEffect, useState } from 'react'
+import { CSSProperties, useCallback, useLayoutEffect, useState } from 'react'
 import Portal from '../Portal/Portal'
-import { getPositionedPopoverStyles } from './GetPositionedPopoverStyles'
+import { PopoverCSSProperties, getPositionedPopoverStyles } from './GetPositionedPopoverStyles'
 import { PopoverContentProps } from './Types'
 import { usePopoverCloseOnClickOutside } from './Utils/usePopoverCloseOnClickOutside'
 import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobile'
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { KeyboardKey } from '@standardnotes/ui-services'
+import { getAdjustedStylesForNonPortalPopover } from './Utils/getAdjustedStylesForNonPortal'
 
 const PositionedPopoverContent = ({
   align = 'end',
@@ -25,6 +26,8 @@ const PositionedPopoverContent = ({
   disableMobileFullscreenTakeover,
   maxHeight,
   portal = true,
+  offset,
+  hideOnClickInModal = false,
 }: PopoverContentProps) => {
   const [popoverElement, setPopoverElement] = useState<HTMLDivElement | null>(null)
   const popoverRect = useAutoElementRect(popoverElement)
@@ -47,13 +50,21 @@ const PositionedPopoverContent = ({
     side,
     disableMobileFullscreenTakeover: disableMobileFullscreenTakeover,
     maxHeightFunction: maxHeight,
+    offset,
   })
 
+  let adjustedStyles: PopoverCSSProperties | undefined = undefined
+
+  if (!portal && popoverElement && styles) {
+    adjustedStyles = getAdjustedStylesForNonPortalPopover(popoverElement, styles)
+  }
+
   usePopoverCloseOnClickOutside({
     popoverElement,
     anchorElement,
     togglePopover,
     childPopovers,
+    hideOnClickInModal,
     disabled: disableClickOutside,
   })
 
@@ -83,9 +94,12 @@ const PositionedPopoverContent = ({
           isDesktopScreen || disableMobileFullscreenTakeover ? 'invisible' : '',
           className,
         )}
-        style={{
-          ...styles,
-        }}
+        style={
+          {
+            ...styles,
+            ...adjustedStyles,
+          } as CSSProperties
+        }
         ref={setPopoverElement}
         data-popover={id}
         onKeyDown={(event) => {