remove container prop to Tooltip components and add contentWrapperStyle prop (#1292)

* fix: remove container prop from Tooltip

* feat(tooltip): add contentWrapperStyle prop

* chore(changeset): add changeset

Author: rktguswjd

.changeset/shy-bulldogs-brush.md

@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+Remove `container` property from `Tooltip` component and add `contentWrapperStyle` property.

packages/bezier-react/src/components/Tooltip/Tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import {
   type Meta,
@@ -79,22 +79,15 @@ const Target = styled.div`
   border-radius: 4px;
 `
 
-const Template: Story<TooltipProps> = (props) => {
-  const [container, setContainer] = useState<HTMLDivElement | null>(null)
-
-  return (
-    <div ref={setContainer}>
-      <Tooltip
-        {...props}
-        container={container}
-      >
-        <Target>
-          Target
-        </Target>
-      </Tooltip>
-    </div>
-  )
-}
+const Template: Story<TooltipProps> = (props) => (
+  <Tooltip
+    {...props}
+  >
+    <Target>
+      Target
+    </Target>
+  </Tooltip>
+)
 
 export const Primary = Template.bind({})
 

packages/bezier-react/src/components/Tooltip/Tooltip.tsx

@@ -27,12 +27,12 @@ function Tooltip(
     className,
     contentClassName,
     contentInterpolation,
+    contentWrapperStyle,
     content = null,
     lazy = false, // optional prop 에서 추후 default behavior 를 lazy 하게 바꿀 예정
     placement = TooltipPosition.BottomCenter,
     disabled = false,
     offset = 4,
-    container,
     keepInContainer = false,
     allowHover = false,
     delayShow = 0,
@@ -100,11 +100,11 @@ function Tooltip(
           content={content}
           contentClassName={contentClassName}
           contentInterpolation={contentInterpolation}
+          contentWrapperStyle={contentWrapperStyle}
           disabled={disabled}
           placement={placement}
           offset={offset}
           allowHover={allowHover}
-          container={container}
           keepInContainer={keepInContainer}
           tooltipContainer={tooltipContainerRef.current}
           forwardedRef={forwardedRef}
@@ -121,11 +121,11 @@ function Tooltip(
     content,
     contentClassName,
     contentInterpolation,
+    contentWrapperStyle,
     disabled,
     placement,
     offset,
     allowHover,
-    container,
     keepInContainer,
     forwardedRef,
     contentTestId,

packages/bezier-react/src/components/Tooltip/Tooltip.types.ts

@@ -12,7 +12,6 @@ import {
 interface TooltipOptions {
   placement?: TooltipPosition
   offset?: number
-  container?: HTMLElement | null
   keepInContainer?: boolean
   allowHover?: boolean
   delayShow?: number
@@ -26,22 +25,21 @@ export default interface TooltipProps extends
   ChildrenProps,
   ContentProps,
   DisableProps,
-  AdditionalStylableProps<'content'>,
+  AdditionalStylableProps<'content' | 'contentWrapper'>,
   React.HTMLAttributes<HTMLDivElement>,
   TooltipOptions {
 }
 
 export interface TooltipContentProps extends Pick<
 TooltipOptions,
-'container' |
 'keepInContainer' |
 'placement' |
 'offset' |
 'allowHover'
 >,
   RenderConfigProps,
   ContentProps,
-  AdditionalStylableProps<'content'>,
+  AdditionalStylableProps<'content' | 'contentWrapper'>,
   DisableProps {
   tooltipContainer: HTMLDivElement | null
   forwardedRef: Ref<HTMLDivElement>
@@ -51,7 +49,7 @@ export interface GetTooltipStyle extends Required<Pick<TooltipOptions, 'placemen
   tooltipContainer: HTMLDivElement
 }
 
-export interface GetReplacement extends Required<Pick<TooltipOptions, 'placement' | 'container' | 'keepInContainer'>> {
+export interface GetReplacement extends Required<Pick<TooltipOptions, 'placement' | 'keepInContainer'>> {
   tooltip: HTMLDivElement
 }
 

packages/bezier-react/src/components/Tooltip/TooltipContent.tsx

@@ -82,8 +82,8 @@ const TooltipContent: React.FC<TooltipContentProps> = ({
   content,
   contentClassName,
   contentInterpolation,
+  contentWrapperStyle: givenContentWrapperStyle,
   disabled = false,
-  container: givenContainer,
   keepInContainer = false,
   placement = TooltipPosition.BottomCenter,
   tooltipContainer,
@@ -97,8 +97,6 @@ const TooltipContent: React.FC<TooltipContentProps> = ({
   const mergedRef = useMergeRefs<HTMLDivElement>(tooltipRef, forwardedRef)
   const [replacement, setReplacement] = useState(placement)
 
-  const container = givenContainer || getRootElement()
-
   const handleClickTooltip = useCallback((event: HTMLElementEventMap['click']) => {
     event.stopPropagation()
   }, [])
@@ -109,13 +107,11 @@ const TooltipContent: React.FC<TooltipContentProps> = ({
     if (!tooltipRef.current) { return }
     const newPlacement = getReplacement({
       tooltip: tooltipRef.current,
-      container,
       keepInContainer,
       placement,
     })
     setReplacement(newPlacement)
   }, [
-    container,
     keepInContainer,
     placement,
   ])
@@ -124,17 +120,21 @@ const TooltipContent: React.FC<TooltipContentProps> = ({
 
   const contentWrapperStyle = useMemo(() => {
     if (tooltipContainer) {
-      return getTooltipStyle({
-        tooltipContainer,
-        placement: replacement,
-        offset,
-        allowHover,
-      })
+      return {
+        ...givenContentWrapperStyle,
+        ...getTooltipStyle({
+          tooltipContainer,
+          placement: replacement,
+          offset,
+          allowHover,
+        }),
+      }
     }
 
     return {}
   }, [
     tooltipContainer,
+    givenContentWrapperStyle,
     replacement,
     offset,
     allowHover,
@@ -159,7 +159,7 @@ const TooltipContent: React.FC<TooltipContentProps> = ({
           </EllipsisableContent>
         </Content>
       </ContentWrapper>,
-      container,
+      getRootElement(),
     )
   )
 }

packages/bezier-react/src/components/Tooltip/utils.ts

@@ -1,3 +1,5 @@
+import { getRootElement } from '~/src/utils/domUtils'
+
 import {
   type GetReplacement,
   type GetTooltipStyle,
@@ -6,11 +8,10 @@ import {
 
 export function getReplacement({
   tooltip,
-  container,
   keepInContainer,
   placement,
 }: GetReplacement): TooltipPosition {
-  if (!keepInContainer || !container) {
+  if (!keepInContainer) {
     return placement
   }
 
@@ -26,7 +27,7 @@ export function getReplacement({
     height: rootHeight,
     top: rootTop,
     left: rootLeft,
-  } = container.getBoundingClientRect()
+  } = getRootElement().getBoundingClientRect()
 
   const isOverTop = tooltipTop < rootTop
   const isOverBottom = tooltipTop + tooltipHeight > rootTop + rootHeight