@channel.io/bezier-react 1.6.1 → 1.7.0

package/src/components/LegacyTooltip/LegacyTooltip.tsx

@@ -0,0 +1,152 @@
+import React, {
+  type Ref,
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { window } from '~/src/utils/domUtils'
+
+import { type LegacyTooltipProps } from './LegacyTooltip.types'
+import { LegacyTooltipPosition } from './LegacyTooltip.types'
+import { LegacyTooltipContent } from './LegacyTooltipContent'
+
+import { Container } from './LegacyTooltip.styled'
+
+export const TOOLTIP_TEST_ID = 'bezier-react-tooltip'
+export const TOOLTIP_CONTENT_TEST_ID = 'bezier-react-tooltip-content'
+
+export const LegacyTooltip = memo(forwardRef(function LegacyTooltip(
+  {
+    as,
+    testId = TOOLTIP_TEST_ID,
+    contentTestId = TOOLTIP_CONTENT_TEST_ID,
+    className,
+    contentClassName,
+    contentInterpolation,
+    contentWrapperStyle,
+    content = null,
+    lazy = false, // optional prop 에서 추후 default behavior 를 lazy 하게 바꿀 예정
+    placement = LegacyTooltipPosition.BottomCenter,
+    disabled = false,
+    offset = 4,
+    keepInContainer = false,
+    allowHover = false,
+    delayShow = 0,
+    delayHide = 0,
+    children,
+    ...otherProps
+  }: LegacyTooltipProps,
+  forwardedRef: Ref<any>,
+) {
+  const [show, setShow] = useState(false)
+  const [didMount, setDidMount] = useState(show)
+
+  const tooltipContainerRef = useRef<HTMLDivElement>(null)
+  const timerRef = useRef<ReturnType<Window['setTimeout']>>()
+
+  useEffect(function hideTooltipContentWhenDisabled() {
+    if (disabled) {
+      setShow(false)
+    }
+  }, [disabled])
+
+  useEffect(function updateDidMount() {
+    setDidMount((prev) => prev || show)
+  }, [show])
+
+  const handleMouseEnter = useCallback(() => {
+    if (disabled) {
+      return
+    }
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setShow(true)
+    }, delayShow)
+  }, [
+    delayShow,
+    disabled,
+  ])
+
+  const handleMouseLeave = useCallback(() => {
+    if (disabled) {
+      return
+    }
+
+    if (timerRef.current) {
+      clearTimeout(timerRef.current)
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setShow(false)
+    }, delayHide)
+  }, [
+    delayHide,
+    disabled,
+  ])
+
+  const TooltipComponent = useMemo(() => {
+    if (!lazy || didMount) {
+      return (
+        <LegacyTooltipContent
+          as={as}
+          content={content}
+          contentClassName={contentClassName}
+          contentInterpolation={contentInterpolation}
+          contentWrapperStyle={contentWrapperStyle}
+          disabled={disabled}
+          placement={placement}
+          offset={offset}
+          allowHover={allowHover}
+          keepInContainer={keepInContainer}
+          tooltipContainer={tooltipContainerRef.current}
+          forwardedRef={forwardedRef}
+          testId={contentTestId}
+        />
+      )
+    }
+
+    return null
+  }, [
+    lazy,
+    didMount,
+    as,
+    content,
+    contentClassName,
+    contentInterpolation,
+    contentWrapperStyle,
+    disabled,
+    placement,
+    offset,
+    allowHover,
+    keepInContainer,
+    forwardedRef,
+    contentTestId,
+  ])
+
+  if (!children) {
+    return null
+  }
+
+  return (
+    <Container
+      ref={tooltipContainerRef}
+      data-testid={testId}
+      className={className}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...otherProps}
+    >
+      { children }
+      { show && TooltipComponent }
+    </Container>
+  )
+}))

package/src/components/LegacyTooltip/LegacyTooltip.types.ts

@@ -0,0 +1,69 @@
+import { type Ref } from 'react'
+
+import {
+  type AdditionalStylableProps,
+  type BezierComponentProps,
+  type ChildrenProps,
+  type ContentProps,
+  type DisableProps,
+  type RenderConfigProps,
+} from '~/src/types/ComponentProps'
+
+interface LegacyTooltipOptions {
+  placement?: LegacyTooltipPosition
+  offset?: number
+  keepInContainer?: boolean
+  allowHover?: boolean
+  delayShow?: number
+  delayHide?: number
+  contentTestId?: string
+  lazy?: boolean
+}
+
+export interface LegacyTooltipProps extends
+  BezierComponentProps,
+  ChildrenProps,
+  ContentProps,
+  DisableProps,
+  AdditionalStylableProps<'content' | 'contentWrapper'>,
+  Omit<React.HTMLAttributes<HTMLDivElement>, keyof ContentProps>,
+  LegacyTooltipOptions {
+}
+
+export interface LegacyTooltipContentProps extends Pick<
+LegacyTooltipOptions,
+'keepInContainer' |
+'placement' |
+'offset' |
+'allowHover'
+>,
+  RenderConfigProps,
+  ContentProps,
+  AdditionalStylableProps<'content' | 'contentWrapper'>,
+  DisableProps {
+  tooltipContainer: HTMLDivElement | null
+  forwardedRef: Ref<HTMLDivElement>
+}
+
+export interface GetTooltipStyle extends Required<Pick<LegacyTooltipOptions, 'placement' | 'offset' | 'allowHover'>> {
+  tooltipContainer: HTMLDivElement
+}
+
+export interface GetReplacement extends Required<Pick<LegacyTooltipOptions, 'placement' | 'keepInContainer'>> {
+  tooltip: HTMLDivElement
+}
+
+export enum LegacyTooltipPosition {
+  TopCenter = 'topCenter',
+  TopLeft = 'topLeft',
+  TopRight = 'topRight',
+  RightCenter = 'rightCenter',
+  RightTop = 'rightTop',
+  RightBottom = 'rightBottom',
+  BottomCenter = 'bottomCenter',
+  BottomLeft = 'bottomLeft',
+  BottomRight = 'bottomRight',
+  LeftCenter = 'leftCenter',
+  LeftTop = 'leftTop',
+  LeftBottom = 'leftBottom',
+}

package/src/components/{Tooltip/TooltipContent.test.tsx → LegacyTooltip/LegacyTooltipContent.test.tsx}

@@ -5,20 +5,21 @@ import { act } from '@testing-library/react'
 
 import { render } from '~/src/utils/testUtils'
 
-import Tooltip, {
+import {
+  LegacyTooltip,
   TOOLTIP_CONTENT_TEST_ID,
   TOOLTIP_TEST_ID,
-} from './Tooltip'
-import type TooltipProps from './Tooltip.types'
+} from './LegacyTooltip'
+import { type LegacyTooltipProps } from './LegacyTooltip.types'
 
-const RootTooltip: React.FC<TooltipProps> = ({ children, ...rests }) => (
-  <Tooltip {...rests}>
+const RootTooltip: React.FC<LegacyTooltipProps> = ({ children, ...rests }) => (
+  <LegacyTooltip {...rests}>
     { children }
-  </Tooltip>
+  </LegacyTooltip>
 )
 
 describe('TooltipContent test >', () => {
-  let props: TooltipProps
+  let props: LegacyTooltipProps
 
   const PLAIN_TEXT_CONTENT = 'plain text content'
 
@@ -44,7 +45,7 @@ describe('TooltipContent test >', () => {
     jest.useRealTimers()
   })
 
-  const renderTooltip = (optionProps?: TooltipProps) => render(
+  const renderTooltip = (optionProps?: LegacyTooltipProps) => render(
     <RootTooltip {...props} {...optionProps} />,
   )
 

package/src/components/{Tooltip/TooltipContent.tsx → LegacyTooltip/LegacyTooltipContent.tsx}

@@ -22,9 +22,9 @@ import {
 import { Text } from '~/src/components/Text'
 
 import {
-  type TooltipContentProps,
-  TooltipPosition,
-} from './Tooltip.types'
+  type LegacyTooltipContentProps,
+  LegacyTooltipPosition,
+} from './LegacyTooltip.types'
 import {
   getReplacement,
   getTooltipStyle,
@@ -34,7 +34,7 @@ import {
   Content,
   ContentWrapper,
   EllipsisableContent,
-} from './Tooltip.styled'
+} from './LegacyTooltip.styled'
 
 function getNewLineComponent(strContent: string) {
   return (
@@ -77,7 +77,7 @@ function getContentComponent(content?: React.ReactNode) {
   return content
 }
 
-const TooltipContent: React.FC<TooltipContentProps> = ({
+export const LegacyTooltipContent: React.FC<LegacyTooltipContentProps> = ({
   as,
   content,
   contentClassName,
@@ -85,7 +85,7 @@ const TooltipContent: React.FC<TooltipContentProps> = ({
   contentWrapperStyle: givenContentWrapperStyle,
   disabled = false,
   keepInContainer = false,
-  placement = TooltipPosition.BottomCenter,
+  placement = LegacyTooltipPosition.BottomCenter,
   tooltipContainer,
   offset = 4,
   allowHover = false,
@@ -164,4 +164,3 @@ const TooltipContent: React.FC<TooltipContentProps> = ({
   )
 }
 
-export default TooltipContent

package/src/components/LegacyTooltip/index.ts

@@ -0,0 +1,5 @@
+export { LegacyTooltip } from './LegacyTooltip'
+
+export { LegacyTooltipPosition } from './LegacyTooltip.types'
+
+export type { LegacyTooltipProps } from './LegacyTooltip.types'

package/src/components/{Tooltip → LegacyTooltip}/utils.ts

@@ -3,14 +3,14 @@ import { getRootElement } from '~/src/utils/domUtils'
 import {
   type GetReplacement,
   type GetTooltipStyle,
-  TooltipPosition,
-} from './Tooltip.types'
+  LegacyTooltipPosition,
+} from './LegacyTooltip.types'
 
 export function getReplacement({
   tooltip,
   keepInContainer,
   placement,
-}: GetReplacement): TooltipPosition {
+}: GetReplacement): LegacyTooltipPosition {
   if (!keepInContainer) {
     return placement
   }
@@ -36,42 +36,42 @@ export function getReplacement({
 
   if (isOverTop) {
     if (isOverLeft) {
-      return TooltipPosition.BottomLeft
+      return LegacyTooltipPosition.BottomLeft
     }
     if (isOverRight) {
-      return TooltipPosition.BottomRight
+      return LegacyTooltipPosition.BottomRight
     }
-    return TooltipPosition.BottomCenter
+    return LegacyTooltipPosition.BottomCenter
   }
 
   if (isOverBottom) {
     if (isOverLeft) {
-      return TooltipPosition.TopLeft
+      return LegacyTooltipPosition.TopLeft
     }
     if (isOverRight) {
-      return TooltipPosition.TopRight
+      return LegacyTooltipPosition.TopRight
     }
-    return TooltipPosition.TopCenter
+    return LegacyTooltipPosition.TopCenter
   }
 
   if (isOverLeft) {
     if (isOverTop) {
-      return TooltipPosition.RightTop
+      return LegacyTooltipPosition.RightTop
     }
     if (isOverBottom) {
-      return TooltipPosition.RightBottom
+      return LegacyTooltipPosition.RightBottom
     }
-    return TooltipPosition.RightCenter
+    return LegacyTooltipPosition.RightCenter
   }
 
   if (isOverRight) {
     if (isOverTop) {
-      return TooltipPosition.LeftTop
+      return LegacyTooltipPosition.LeftTop
     }
     if (isOverBottom) {
-      return TooltipPosition.LeftBottom
+      return LegacyTooltipPosition.LeftBottom
     }
-    return TooltipPosition.LeftCenter
+    return LegacyTooltipPosition.LeftCenter
   }
 
   return placement
@@ -102,50 +102,50 @@ export function getTooltipStyle({
   let offsetStyle = {}
 
   switch (placement) {
-    case TooltipPosition.TopCenter:
-    case TooltipPosition.TopLeft:
-    case TooltipPosition.TopRight:
+    case LegacyTooltipPosition.TopCenter:
+    case LegacyTooltipPosition.TopLeft:
+    case LegacyTooltipPosition.TopRight:
       translateY = -100
       offsetBottom = offset
       break
-    case TooltipPosition.RightCenter:
-    case TooltipPosition.RightTop:
-    case TooltipPosition.RightBottom:
+    case LegacyTooltipPosition.RightCenter:
+    case LegacyTooltipPosition.RightTop:
+    case LegacyTooltipPosition.RightBottom:
       left += containerWidth
       offsetLeft = offset
       break
-    case TooltipPosition.BottomCenter:
-    case TooltipPosition.BottomLeft:
-    case TooltipPosition.BottomRight:
+    case LegacyTooltipPosition.BottomCenter:
+    case LegacyTooltipPosition.BottomLeft:
+    case LegacyTooltipPosition.BottomRight:
       top += containerHeight
       offsetTop = offset
       break
-    case TooltipPosition.LeftCenter:
-    case TooltipPosition.LeftTop:
-    case TooltipPosition.LeftBottom:
+    case LegacyTooltipPosition.LeftCenter:
+    case LegacyTooltipPosition.LeftTop:
+    case LegacyTooltipPosition.LeftBottom:
       translateX = -100
       offsetRight = offset
       break
   }
 
   switch (placement) {
-    case TooltipPosition.TopCenter:
-    case TooltipPosition.BottomCenter:
+    case LegacyTooltipPosition.TopCenter:
+    case LegacyTooltipPosition.BottomCenter:
       translateX = -50
       left += (containerWidth / 2)
       break
-    case TooltipPosition.TopRight:
-    case TooltipPosition.BottomRight:
+    case LegacyTooltipPosition.TopRight:
+    case LegacyTooltipPosition.BottomRight:
       translateX = -100
       left += containerWidth
       break
-    case TooltipPosition.RightCenter:
-    case TooltipPosition.LeftCenter:
+    case LegacyTooltipPosition.RightCenter:
+    case LegacyTooltipPosition.LeftCenter:
       translateY = -50
       top += (containerHeight / 2)
       break
-    case TooltipPosition.RightBottom:
-    case TooltipPosition.LeftBottom:
+    case LegacyTooltipPosition.RightBottom:
+    case LegacyTooltipPosition.LeftBottom:
       translateY = -100
       top += containerHeight
       break

package/src/components/ListMenuTitle/ListMenuTitle.tsx

@@ -1,4 +1,7 @@
-import React, { useCallback } from 'react'
+import React, {
+  forwardRef,
+  useCallback,
+} from 'react'
 
 import { noop } from '~/src/utils/functionUtils'
 import { isNil } from '~/src/utils/typeUtils'
@@ -12,17 +15,17 @@ import {
 
 export const SIDEBAR_MENU_TITLE_TEST_ID = 'bezier-react-sidebar-menu-title'
 
-function ListMenuTitle({
+const ListMenuTitle = forwardRef<HTMLDivElement, ListMenuTitleProps>(function ListMenuTitle({
   as,
   testId = SIDEBAR_MENU_TITLE_TEST_ID,
   content,
   hide = false,
   rightAction = null,
-  onClick = noop,
   onClickAction = noop,
   style,
   className,
-}: ListMenuTitleProps) {
+  ...rest
+}, forwardedRef) {
   const handleClickAction = useCallback((ev: React.MouseEvent<HTMLDivElement>) => {
     ev.stopPropagation()
     onClickAction()
@@ -34,11 +37,12 @@ function ListMenuTitle({
 
   return (
     <Wrapper
+      {...rest}
+      ref={forwardedRef}
       data-testid={testId}
       as={as}
       style={style}
       className={className}
-      onClick={onClick}
     >
       <TitleWrapper>
         { content }
@@ -54,6 +58,6 @@ function ListMenuTitle({
       }
     </Wrapper>
   )
-}
+})
 
 export default ListMenuTitle

package/src/components/ListMenuTitle/ListMenuTitle.types.ts

@@ -8,13 +8,13 @@ import {
 interface ListMenuTitleOptions {
   rightAction?: React.ReactNode
   hide?: boolean
-  onClick?: React.MouseEventHandler
   onClickAction?: () => void
 }
 
 export default interface ListMenuTitleProps extends
   BezierComponentProps,
   ContentProps,
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'content'>,
   ListMenuTitleOptions {}
 
 export interface StyledWrapperProps extends BezierComponentProps {}

package/src/components/Modals/Modal/Modal.types.ts

@@ -128,10 +128,10 @@ export interface ModalFooterProps extends
   ModalFooterOptions {}
 
 export interface ModalTriggerProps extends
-  ChildrenProps {}
+  ChildrenProps<React.ReactElement> {}
 
 export interface ModalCloseProps extends
-  ChildrenProps {}
+  ChildrenProps<React.ReactElement> {}
 
 export interface ModalContentContextValue extends
   NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}

package/src/components/Navigator/NavGroup/NavGroup.stories.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 
-import { DotIcon } from '@channel.io/bezier-icons'
+import {
+  DotIcon,
+  SettingsIcon,
+} from '@channel.io/bezier-icons'
 import {
   type Meta,
   type Story,
@@ -54,6 +57,6 @@ Primary.args = {
   active: false,
   name: 'general',
   content: '일반 설정',
-  leftIcon: 'settings',
+  leftIcon: SettingsIcon,
   rightContent: <Icon source={DotIcon} size={IconSize.XS} color="bgtxt-orange-normal" />,
 }

package/src/components/Navigator/NavGroup/NavGroup.test.tsx

@@ -22,7 +22,7 @@ describe('NavGroup Test >', () => {
 
   beforeEach(() => {
     props = {
-      leftIcon: 'dot',
+      leftIcon: DotIcon,
       name: 'general',
       content: 'test-content',
       rightContent: <Icon source={DotIcon} size={IconSize.XS} color="bgtxt-orange-normal" />,

package/src/components/Navigator/NavGroup/NavGroup.tsx

@@ -1,4 +1,5 @@
 import React, {
+  forwardRef,
   memo,
   useCallback,
 } from 'react'
@@ -17,10 +18,6 @@ import {
   Icon,
   IconSize,
 } from '~/src/components/Icon'
-import {
-  LegacyIcon,
-  isIconName,
-} from '~/src/components/LegacyIcon'
 import { Text } from '~/src/components/Text'
 
 import type NavGroupProps from './NavGroup.types'
@@ -37,7 +34,7 @@ import {
 export const NAV_GROUP_TEST_ID = 'bezier-react-nav-group'
 export const NAV_GROUP_LEFT_ICON_TEST_ID = 'bezier-react-nav-group-left-icon'
 
-function NavGroup({
+const NavGroup = forwardRef<HTMLButtonElement, NavGroupProps>(function NavGroup({
   as,
   testId = NAV_GROUP_TEST_ID,
   name,
@@ -51,7 +48,8 @@ function NavGroup({
   open,
   active,
   onClick = noop,
-}: NavGroupProps) {
+  ...rest
+}, forwardedRef) {
   const handleClickItem = useCallback((e?: React.MouseEvent) => {
     onClick(e, name)
   }, [
@@ -61,12 +59,13 @@ function NavGroup({
 
   const hasChildren = !isNil(children)
   const chevronIconSource = open ? ChevronSmallDownIcon : ChevronSmallRightIcon
-  const showLeftIcon = isIconName(leftIcon)
   const ariaName = `${name}Menu`
 
   return (
     <Wrapper role="none">
       <Item
+        {...rest}
+        ref={forwardedRef}
         as={as}
         active={active}
         style={style}
@@ -80,14 +79,12 @@ function NavGroup({
         aria-controls={ariaName}
       >
         <LeftIconWrapper>
-          { showLeftIcon && (
-            <LegacyIcon
-              testId={NAV_GROUP_LEFT_ICON_TEST_ID}
-              name={leftIcon}
-              size={IconSize.S}
-              color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}
-            />
-          ) }
+          <Icon
+            testId={NAV_GROUP_LEFT_ICON_TEST_ID}
+            source={leftIcon}
+            size={IconSize.S}
+            color={active ? 'bgtxt-blue-normal' : 'txt-black-dark'}
+          />
         </LeftIconWrapper>
 
         <Text typo={Typography.Size14} truncated>
@@ -121,6 +118,6 @@ function NavGroup({
       ) }
     </Wrapper>
   )
-}
+})
 
 export default memo(NavGroup)

package/src/components/Navigator/NavGroup/NavGroup.types.ts

@@ -1,4 +1,4 @@
-import { type IconName } from '@channel.io/bezier-icons'
+import { type BezierIcon } from '@channel.io/bezier-icons'
 
 import type {
   ActivatableProps,
@@ -10,7 +10,7 @@ import type {
 
 interface NavGroupOptions {
   open?: boolean
-  leftIcon: IconName
+  leftIcon: BezierIcon
   name: string
   onClick?: (e?: React.MouseEvent, name?: string) => void
 }
@@ -21,4 +21,5 @@ export default interface NavGroupProps extends
   ContentProps,
   Pick<SideContentProps, 'rightContent'>,
   Pick<ActivatableProps, 'active'>,
+  Omit<React.HTMLAttributes<HTMLButtonElement>, 'onClick' | 'content'>,
   NavGroupOptions {}

package/src/components/Navigator/NavItem/NavItem.test.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
 
+import { DotIcon } from '@channel.io/bezier-icons'
+
 import { LightTheme } from '~/src/foundation/Colors/Theme'
 
 import { render } from '~/src/utils/testUtils'
@@ -15,7 +17,7 @@ describe('NavItem Test >', () => {
 
   beforeEach(() => {
     props = {
-      leftIcon: 'dot',
+      leftIcon: DotIcon,
       name: 'general',
       content: 'test-content',
     }