🐛 Fix floating components in dialog (#2970)

* hook to detect if el is in dialog * implement new hook in tooltip * Menu: implement useIsInDialog * Autocomplete: implement useIsInDialog * dialog: remove overflow hidden * utils: update changelog and bump for dev release * popover: implement useIsInDialog * dialog: update snapshot * accidentally pushed setting change
equinor · Jul 14, 2023 · 0ddbdc7 · 0ddbdc7
1 parent 0cff13b
commit 0ddbdc7
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 64 deletions.
diff --git a/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx b/packages/eds-core-react/src/components/Autocomplete/Autocomplete.tsx
@@ -33,6 +33,7 @@ import {
   useToken,
   bordersTemplate,
   useIsomorphicLayoutEffect,
+  useIsInDialog,
 } from '@equinor/eds-utils'
 import { AutocompleteOption } from './Option'
 import {
@@ -589,6 +590,9 @@ function AutocompleteInner<T>(
     [selectedItems, getLabel],
   )
 
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  const inDialog = useIsInDialog(refs.domReference.current)
+
   const optionsList = (
     <div
       {...getFloatingProps({
@@ -728,7 +732,7 @@ function AutocompleteInner<T>(
             {...other}
           />
         </Container>
-        {disablePortal ? (
+        {disablePortal || inDialog ? (
           optionsList
         ) : (
           <FloatingPortal id="eds-autocomplete-container">

diff --git a/packages/eds-core-react/src/components/Dialog/Dialog.tsx b/packages/eds-core-react/src/components/Dialog/Dialog.tsx
@@ -31,7 +31,6 @@ const StyledDialog = styled(Paper).attrs<DialogProps>({
     ${typographyTemplate(theme.typography)};
     ${bordersTemplate(theme.border)};
     grid-gap: ${theme.spacings.bottom};
-    overflow: hidden;
   `
 })
 

diff --git a/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/eds-core-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -20,7 +20,6 @@ exports[`Dialog Matches snapshot 1`] = `
   text-align: left;
   border-radius: 4px;
   grid-gap: 16px;
-  overflow: hidden;
 }
 
 .c4 {

diff --git a/packages/eds-core-react/src/components/Menu/Menu.tsx b/packages/eds-core-react/src/components/Menu/Menu.tsx
@@ -9,6 +9,7 @@ import {
   useToken,
   bordersTemplate,
   useIsomorphicLayoutEffect,
+  useIsInDialog,
 } from '@equinor/eds-utils'
 import { menu as tokens } from './Menu.tokens'
 import { useEds } from '../EdsProvider'
@@ -206,29 +207,38 @@ export const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
     open,
   }
 
+  //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+  const inDialog = useIsInDialog(anchorEl)
+
+  const menuElement = (
+    <ThemeProvider theme={token}>
+      <MenuPaper
+        elevation="raised"
+        {...props}
+        {...getFloatingProps({
+          ref: popoverRef,
+          style: {
+            ...style,
+            position: strategy,
+            top: y || 0,
+            left: x || 0,
+          },
+        })}
+      >
+        <MenuProvider>
+          <MenuContainer {...menuProps} ref={ref} />
+        </MenuProvider>
+      </MenuPaper>
+    </ThemeProvider>
+  )
+
   return (
     <>
-      <FloatingPortal id="eds-menu-container">
-        <ThemeProvider theme={token}>
-          <MenuPaper
-            elevation="raised"
-            {...props}
-            {...getFloatingProps({
-              ref: popoverRef,
-              style: {
-                ...style,
-                position: strategy,
-                top: y || 0,
-                left: x || 0,
-              },
-            })}
-          >
-            <MenuProvider>
-              <MenuContainer {...menuProps} ref={ref} />
-            </MenuProvider>
-          </MenuPaper>
-        </ThemeProvider>
-      </FloatingPortal>
+      {inDialog ? (
+        menuElement
+      ) : (
+        <FloatingPortal id="eds-menu-container">{menuElement}</FloatingPortal>
+      )}
     </>
   )
 })
diff --git a/packages/eds-core-react/src/components/Popover/Popover.stories.tsx b/packages/eds-core-react/src/components/Popover/Popover.stories.tsx
@@ -109,21 +109,7 @@ export const Introduction: StoryFn<PopoverProps> = (args) => {
           </Button>
         </Popover.Header>
         <Popover.Content>
-          <div>
-            <div>First-First</div>
-            <div>First-Last</div>
-          </div>
-          <div>
-            <div>Mid-First</div>
-            <div>Mid-Last</div>
-          </div>
-          <div>Last-First</div>
-          <div>
-            <div>Last-Mid-First</div>
-            <div>Last-Mid-Mid</div>
-            <div>Last-Mid-Last</div>
-          </div>
-          <div>Last-Last</div>
+          <Typography variant="body_short">Popover content</Typography>
         </Popover.Content>
       </Popover>
     </>

diff --git a/packages/eds-core-react/src/components/Popover/Popover.tsx b/packages/eds-core-react/src/components/Popover/Popover.tsx
@@ -14,6 +14,7 @@ import {
   mergeRefs,
   useToken,
   outlineTemplate,
+  useIsInDialog,
 } from '@equinor/eds-utils'
 import { popover as popoverToken } from './Popover.tokens'
 import { useEds } from '../EdsProvider'
@@ -189,6 +190,9 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     const { density } = useEds()
     const token = useToken({ density }, popoverToken)
 
+    //temporary fix when inside dialog. Should be replaced by popover api when it is ready
+    const inDialog = useIsInDialog(anchorEl)
+
     const popover = (
       <ThemeProvider theme={token}>
         <PopoverPaper
@@ -216,7 +220,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
 
     return (
       <>
-        {withinPortal ? (
+        {withinPortal && !inDialog ? (
           <FloatingPortal id="eds-popover-container">
             {open && trapFocus
               ? open && (

diff --git a/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx b/packages/eds-core-react/src/components/Tooltip/Tooltip.tsx
@@ -14,6 +14,7 @@ import {
   typographyTemplate,
   bordersTemplate,
   mergeRefs,
+  useIsInDialog,
 } from '@equinor/eds-utils'
 import { tooltip as tokens } from './Tooltip.tokens'
 import {
@@ -170,31 +171,40 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
       }),
     })
 
+    //temporary fix for tooltip inside dialog. Should be replaced by popover api when it is ready
+    const inDialog = useIsInDialog(refs.domReference.current)
+
+    const TooltipEl = (
+      <StyledTooltip
+        {...rest}
+        {...getFloatingProps({
+          ref: tooltipRef,
+          style: {
+            ...style,
+            position: strategy,
+            top: y || 0,
+            left: x || 0,
+          },
+        })}
+      >
+        {title}
+        <ArrowWrapper ref={arrowRef}>
+          <TooltipArrow className="arrowSvg">
+            <path d="M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z" />
+          </TooltipArrow>
+        </ArrowWrapper>
+      </StyledTooltip>
+    )
+
     return (
       <>
-        <FloatingPortal id="eds-tooltip-container">
-          {shouldOpen && open && (
-            <StyledTooltip
-              {...rest}
-              {...getFloatingProps({
-                ref: tooltipRef,
-                style: {
-                  ...style,
-                  position: strategy,
-                  top: y || 0,
-                  left: x || 0,
-                },
-              })}
-            >
-              {title}
-              <ArrowWrapper ref={arrowRef}>
-                <TooltipArrow className="arrowSvg">
-                  <path d="M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z" />
-                </TooltipArrow>
-              </ArrowWrapper>
-            </StyledTooltip>
-          )}
-        </FloatingPortal>
+        {inDialog ? (
+          <>{shouldOpen && open && TooltipEl}</>
+        ) : (
+          <FloatingPortal id="eds-tooltip-container">
+            {shouldOpen && open && TooltipEl}
+          </FloatingPortal>
+        )}
         {updatedChildren}
       </>
     )

diff --git a/packages/eds-utils/CHANGELOG.md b/packages/eds-utils/CHANGELOG.md
@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.8.1] - 2023-07-14
+
+### Added
+
+- ✨ `useIsInDialog`: new hook to detect if an element is inside a `dialog` @oddvernes in https://github.com/equinor/design-system/pull/2970
+
 ## [0.8.0] - 2023-07-10
 
 ### Changed

diff --git a/packages/eds-utils/package.json b/packages/eds-utils/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-utils",
-  "version": "0.8.0",
+  "version": "0.8.1dev20230714",
   "description": "Utility functions and hooks for the Equinor Design System",
   "sideEffects": false,
   "type": "module",

diff --git a/packages/eds-utils/src/hooks/index.ts b/packages/eds-utils/src/hooks/index.ts
@@ -6,3 +6,4 @@ export { useAutoResize } from './useAutoResize'
 export * from './useToken'
 export { useHideBodyScroll } from './useHideBodyScroll'
 export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
+export { useIsInDialog } from './useIsInDialog'
diff --git a/packages/eds-utils/src/hooks/useIsInDialog.ts b/packages/eds-utils/src/hooks/useIsInDialog.ts
@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react'
+
+export const useIsInDialog = (el: Element): boolean => {
+  const [inDialog, setInDialog] = useState<boolean>(null)
+  useEffect(() => {
+    if (el && inDialog === null) {
+      setInDialog(!!el.closest('dialog'))
+    }
+  }, [el])
+  return inDialog
+}