@channel.io/bezier-react 1.7.1 → 1.7.2

package/src/components/Forms/Slider/Slider.test.tsx

@@ -1,6 +1,9 @@
 import React from 'react'
 
-import { isInaccessible } from '@testing-library/react'
+import {
+  isInaccessible,
+  waitFor,
+} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { render } from '~/src/utils/testUtils'
@@ -217,7 +220,9 @@ describe('Slider', () => {
       const { getByRole, getAllByText } = renderSlider({ defaultValue: [0] })
       const sliderThumb = getByRole('slider')
       await user.hover(sliderThumb)
-      expect(getAllByText('0')[0]).toBeInTheDocument()
+      await waitFor(() => {
+        expect(getAllByText('0')[0]).toBeInTheDocument()
+      }, { timeout: 10000 })
     })
 
     it('should show tooltip when user focuses on the thumb', async () => {
@@ -230,8 +235,10 @@ describe('Slider', () => {
       const { getByRole, getAllByText } = renderSlider({ defaultValue: [0] })
       const sliderThumb = getByRole('slider')
       await user.click(sliderThumb)
-      expect(getByRole('tooltip')).toBeInTheDocument()
-      expect(getAllByText('0')[0]).toBeInTheDocument()
+      await waitFor(() => {
+        expect(getByRole('tooltip')).toBeInTheDocument()
+        expect(getAllByText('0')[0]).toBeInTheDocument()
+      }, { timeout: 10000 })
     })
 
     it('should not show tooltip when disableTooltip is true', async () => {

package/src/components/Forms/index.ts

@@ -1,6 +1,5 @@
 import type { FormComponentProps } from './Form.types'
 import FormFieldSize from './FormFieldSize'
-import useFormControlContext from './useFormControlContext'
 import useFormFieldProps from './useFormFieldProps'
 import useKeyboardActionLockerWhileComposing from './useKeyboardActionLockerWhileComposing'
 
@@ -8,7 +7,6 @@ export type { FormComponentProps }
 export * from './Inputs/constants/CommonImeControlKeys'
 export {
   FormFieldSize,
-  useFormControlContext,
   useFormFieldProps,
   useKeyboardActionLockerWhileComposing,
 }

package/src/components/Forms/useFormFieldProps.ts

@@ -3,8 +3,7 @@ import { useMemo } from 'react'
 import { ariaAttr } from '~/src/utils/domUtils'
 
 import type { FormComponentProps } from '~/src/components/Forms/Form.types'
-
-import useFormControlContext from './useFormControlContext'
+import { useFormControlContext } from '~/src/components/Forms/FormControl'
 
 // TODO: 테스트 추가
 function useFormFieldProps<Props extends FormComponentProps>(props?: Props) {

package/src/components/KeyValueListItem/KeyValueListItem.test.tsx

@@ -4,6 +4,7 @@ import {
   AppleIcon,
   BadgeIcon,
 } from '@channel.io/bezier-icons'
+import { waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 import { render } from '~/src/utils/testUtils'
@@ -176,7 +177,9 @@ describe('KeyValueListItem', () => {
         const actionItemIcon = actionItemIconWrapper?.firstChild
 
         await user.hover(actionItemIcon as HTMLElement)
-        expect(getByRole('tooltip')).toBeInTheDocument()
+        await waitFor(() => {
+          expect(getByRole('tooltip')).toBeInTheDocument()
+        }, { timeout: 10000 })
       })
     })
 

package/src/components/Modals/Modal/Modal.stories.tsx

@@ -85,7 +85,7 @@ function ModalComposition({
 
         <ModalBody>
           <FormControl labelPosition="left">
-            <FormLabel>Name</FormLabel>
+            <FormLabel help="Lorem Ipsum">Name</FormLabel>
             <Select text="Lorem Ipsum">
               { Array.from({ length: 20 }).map((_, index) => (
                 <ListItem

package/src/components/Modals/Modal/Modal.tsx

@@ -52,4 +52,3 @@ export function Modal({
     </DialogPrimitive.Root>
   )
 }
-

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

@@ -134,4 +134,4 @@ export interface ModalCloseProps extends
   ChildrenProps<React.ReactElement> {}
 
 export interface ModalContentContextValue extends
-  NonNullable<Pick<ModalContentOptions, 'showCloseIcon'>> {}
+  Required<Pick<ModalContentOptions, 'showCloseIcon'>> {}

package/src/components/Modals/Modal/ModalContent.tsx

@@ -13,7 +13,7 @@ import {
   type ModalContentContextValue,
   type ModalContentProps,
 } from './Modal.types'
-import ModalContentContext from './ModalContentContext'
+import { ModalContentContextProvider } from './ModalContentContext'
 import { ModalClose } from './ModalHelpers'
 
 import * as Styled from './Modal.styled'
@@ -67,9 +67,9 @@ export const ModalContent = forwardRef(function ModalContent({
             {...rest}
           >
             <Styled.Section>
-              <ModalContentContext.Provider value={contextValue}>
+              <ModalContentContextProvider value={contextValue}>
                 { children }
-              </ModalContentContext.Provider>
+              </ModalContentContextProvider>
 
               { /* NOTE: To prevent focusing first on the close button when opening the modal, place the close button behind. */ }
               { showCloseIcon && (

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

@@ -1,9 +1,10 @@
-import React from 'react'
+import { createContext } from '~/src/utils/reactUtils'
 
 import { type ModalContentContextValue } from './Modal.types'
 
-const ModalContentContext = React.createContext<ModalContentContextValue>({
+export const [
+  ModalContentContextProvider,
+  useModalContentContext,
+] = createContext<ModalContentContextValue>({
   showCloseIcon: false,
 })
-
-export default ModalContentContext

package/src/components/Modals/Modal/ModalHeader.tsx

@@ -1,7 +1,4 @@
-import React, {
-  forwardRef,
-  useContext,
-} from 'react'
+import React, { forwardRef } from 'react'
 
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 
@@ -14,7 +11,7 @@ import {
   type ModalHeaderProps,
   ModalTitleSize,
 } from './Modal.types'
-import ModalContentContext from './ModalContentContext'
+import { useModalContentContext } from './ModalContentContext'
 
 import * as Styled from './Modal.styled'
 
@@ -82,7 +79,7 @@ export const ModalHeader = forwardRef(function ModalHeader({
   hidden = false,
   ...rest
 }: ModalHeaderProps, forwardedRef: React.Ref<HTMLElement>) {
-  const { showCloseIcon } = useContext(ModalContentContext)
+  const { showCloseIcon } = useModalContentContext()
   const hasTitleArea = title || showCloseIcon
   const Hidden = hidden ? VisuallyHidden : React.Fragment
 

package/src/components/OutlineItem/OutlineItem.tsx

@@ -19,8 +19,10 @@ import { isNil } from '~/src/utils/typeUtils'
 import { IconSize } from '~/src/components/Icon'
 
 import type OutlineItemProps from './OutlineItem.types'
-import { OutlineItemContext } from './OutlineItemContext'
-import useOutlineItemContext from './useOutlineItemContext'
+import {
+  OutlineItemContextProvider,
+  useOutlineItemContext,
+} from './OutlineItemContext'
 
 import {
   ChevronWrapper,
@@ -250,9 +252,9 @@ function OutlineItem(
       }
 
       return (
-        <OutlineItemContext.Provider value={passedContext}>
+        <OutlineItemContextProvider value={passedContext}>
           { element }
-        </OutlineItemContext.Provider>
+        </OutlineItemContextProvider>
       )
     })
   ), [

package/src/components/OutlineItem/OutlineItemContext.ts

@@ -1,23 +1,23 @@
 import type React from 'react'
-import { createContext } from 'react'
 
 import { noop } from '~/src/utils/functionUtils'
+import { createContext } from '~/src/utils/reactUtils'
 
-export interface OutlineItemContextProps {
+interface OutlineItemContextProps {
   depth: number
   paddingLeft: number
   active: boolean
   onClick: (event?: React.MouseEvent<Element>, name?: string) => void
 }
 
-export const defaultOutlineItemContext = {
+const defaultOutlineItemContext = {
   depth: 0,
   paddingLeft: 0,
   active: false,
   onClick: noop,
 }
 
-export function mergeOutlineItemContexts(
+function mergeOutlineItemContexts(
   inherited: OutlineItemContextProps,
   props: Partial<Omit<OutlineItemContextProps, 'depth'>>,
   indent: number,
@@ -33,4 +33,15 @@ export function mergeOutlineItemContexts(
   }
 }
 
-export const OutlineItemContext = createContext<OutlineItemContextProps>(defaultOutlineItemContext)
+const [
+  OutlineItemContextProvider,
+  useOutlineItemContextBase,
+] = createContext<OutlineItemContextProps>(defaultOutlineItemContext)
+
+export { OutlineItemContextProvider }
+
+export const useOutlineItemContext = (props: Partial<Omit<OutlineItemContextProps, 'depth'>>, indent: number) => {
+  const inheritedContext = useOutlineItemContextBase() ?? defaultOutlineItemContext
+  const context = mergeOutlineItemContexts(inheritedContext, props, indent)
+  return context
+}

package/src/components/Tabs/TabAction.tsx

@@ -1,7 +1,4 @@
-import React, {
-  forwardRef,
-  useContext,
-} from 'react'
+import React, { forwardRef } from 'react'
 
 import { OpenInNewIcon } from '@channel.io/bezier-icons'
 
@@ -12,7 +9,7 @@ import { isNil } from '~/src/utils/typeUtils'
 import { IconSize } from '~/src/components/Icon'
 import { Text } from '~/src/components/Text'
 
-import TabListContext from './TabListContext'
+import { useTabListContext } from './TabListContext'
 import {
   type TabActionElement,
   type TabActionProps,
@@ -52,7 +49,7 @@ export const TabAction = forwardRef(function TabAction<Link extends string | und
   ...rest
 }: TabActionProps<Link>, forwardedRef: React.Ref<TabActionElement<Link>>,
 ) {
-  const { size } = useContext(TabListContext)
+  const { size } = useTabListContext()
 
   return (
     isNil(href) ? (

package/src/components/Tabs/TabItem.tsx

@@ -1,7 +1,4 @@
-import React, {
-  forwardRef,
-  useContext,
-} from 'react'
+import React, { forwardRef } from 'react'
 
 import * as Tabs from '@radix-ui/react-tabs'
 
@@ -11,7 +8,7 @@ import {
   ButtonStyleVariant,
 } from '~/src/components/Button'
 
-import TabListContext from './TabListContext'
+import { useTabListContext } from './TabListContext'
 import {
   type TabItemProps,
   TabSize,
@@ -40,7 +37,7 @@ export const TabItem = forwardRef(function TabItem({
   children,
   ...rest
 }: TabItemProps, forwardedRef: React.Ref<HTMLButtonElement>) {
-  const { size } = useContext(TabListContext)
+  const { size } = useTabListContext()
 
   if (typeof children !== 'string') {
     return null

package/src/components/Tabs/TabList.tsx

@@ -3,7 +3,7 @@ import React, {
   useMemo,
 } from 'react'
 
-import TabListContext from './TabListContext'
+import { TabListContextProvider } from './TabListContext'
 import {
   type TabListProps,
   TabSize,
@@ -36,7 +36,7 @@ export const TabList = forwardRef(function TabList({
   }), [size])
 
   return (
-    <TabListContext.Provider value={heightContextValue}>
+    <TabListContextProvider value={heightContextValue}>
       <Styled.TabList
         size={size}
         ref={forwardedRef}
@@ -47,6 +47,6 @@ export const TabList = forwardRef(function TabList({
       >
         { children }
       </Styled.TabList>
-    </TabListContext.Provider>
+    </TabListContextProvider>
   )
 })

package/src/components/Tabs/TabListContext.ts

@@ -1,12 +1,13 @@
-import { createContext } from 'react'
+import { createContext } from '~/src/utils/reactUtils'
 
 import {
   type TabListContextValue,
   TabSize,
 } from './Tabs.types'
 
-const TabListContext = createContext<TabListContextValue>({
+export const [
+  TabListContextProvider,
+  useTabListContext,
+] = createContext<TabListContextValue>({
   size: TabSize.M,
 })
-
-export default TabListContext

package/src/components/Toast/ToastContext.ts

@@ -1,10 +1,12 @@
-import { createContext } from 'react'
-
 import { noop } from '~/src/utils/functionUtils'
+import { createContext } from '~/src/utils/reactUtils'
 
 import { type ToastContextType } from './Toast.types'
 
-const ToastContext = createContext<ToastContextType>({
+export const [
+  ToastContextProvider,
+  useToastContext,
+] = createContext<ToastContextType>({
   add: () => '',
   update: () => '',
   remove: noop,
@@ -12,5 +14,3 @@ const ToastContext = createContext<ToastContextType>({
   leftToasts: [],
   rightToasts: [],
 })
-
-export default ToastContext

package/src/components/Toast/ToastProvider.tsx

@@ -15,13 +15,11 @@ import {
   type ToastType,
 } from './Toast.types'
 import ToastContainer from './ToastContainer'
-import ToastContext from './ToastContext'
+import { ToastContextProvider } from './ToastContext'
 import ToastController from './ToastController'
 import ToastElement from './ToastElement'
 import useToastProviderValues from './useToastContextValues'
 
-const { Provider } = ToastContext
-
 function ToastProvider({
   autoDismissTimeout = 3000,
   children = [],
@@ -77,7 +75,7 @@ function ToastProvider({
   ])
 
   return (
-    <Provider value={toastContextValue}>
+    <ToastContextProvider value={toastContextValue}>
       { children }
       { createPortal(
         [
@@ -86,7 +84,7 @@ function ToastProvider({
         ],
         getRootElement(),
       ) }
-    </Provider>
+    </ToastContextProvider>
   )
 }
 

package/src/components/Toast/useToast.ts

@@ -1,12 +1,10 @@
-import { useContext } from 'react'
-
-import ToastContext from './ToastContext'
+import { useToastContext } from './ToastContext'
 
 export default function useToast() {
-  const context = useContext(ToastContext)
+  const context = useToastContext()
 
   if (!context) {
-    throw Error('ToastProvider가 필요합니다.')
+    throw Error('\'useToast\' must be used within \'ToastProvider\'')
   }
 
   return {

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -57,8 +57,8 @@ Primary.args = {
   disabled: false,
   keepInContainer: true,
   allowHover: false,
-  delayShow: 0,
-  delayHide: 0,
+  delayShow: undefined,
+  delayHide: undefined,
   children: (<Button text="Button" />),
   content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.',
   description: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',

package/src/components/Tooltip/Tooltip.styled.ts

@@ -1,10 +1,7 @@
 import {
   LineHeightAbsoluteNumber,
-  TransitionDuration,
   Typography,
-  css,
   ellipsis,
-  keyframes,
   styled,
 } from '~/src/foundation'
 
@@ -19,64 +16,6 @@ import { Text } from '~/src/components/Text'
 
 import { type TooltipProps } from './Tooltip.types'
 
-const fadeIn = keyframes`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`
-
-const SLIDE_OFFSET = 2
-
-const slideUp = keyframes`
-  from {
-    transform: translateY(${SLIDE_OFFSET}px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`
-
-const slideRight = keyframes`
-  from {
-    transform: translateX(-${SLIDE_OFFSET}px);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-`
-
-const slideDown = keyframes`
-  from {
-    transform: translateY(-${SLIDE_OFFSET}px);
-  }
-
-  to {
-    transform: translateY(0);
-  }
-`
-
-const slideLeft = keyframes`
-  from {
-    transform: translateX(${SLIDE_OFFSET}px);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-`
-
-const getSlideAnimation = (frames: ReturnType<typeof keyframes>) => css`
-  animation-name: ${() => frames}, ${() => fadeIn};
-  animation-duration: ${TransitionDuration.M}ms;
-  animation-timing-function: cubic-bezier(0.3, 0, 0, 1);
-`
-
 export const TooltipContent = styled(AlphaStack).attrs({
   direction: 'horizontal',
   spacing: 4,
@@ -94,22 +33,6 @@ export const TooltipContent = styled(AlphaStack).attrs({
   ${({ foundation }) => foundation?.elevation?.ev3(true)};
   ${({ foundation }) => foundation?.rounding?.round8};
 
-  &[data-side="top"] {
-    ${getSlideAnimation(slideUp)}
-  }
-
-  &[data-side="right"] {
-    ${getSlideAnimation(slideRight)}
-  }
-
-  &[data-side="bottom"] {
-    ${getSlideAnimation(slideDown)}
-  }
-
-  &[data-side="left"] {
-    ${getSlideAnimation(slideLeft)}
-  }
-
   ${({ interpolation }) => interpolation}
 `
 

package/src/components/Tooltip/Tooltip.test.tsx

@@ -22,7 +22,10 @@ describe('Tooltip', () => {
     children,
     ...rest
   }: TooltipProps = {}) => render(
-    <Tooltip {...rest}>
+    <Tooltip
+      delayShow={0}
+      {...rest}
+    >
       <button type="button">
         Trigger
       </button>
@@ -127,7 +130,10 @@ describe('TooltipProvider', () => {
     children,
     ...rest
   }: TooltipProviderProps = {}) => render(
-    <TooltipProvider {...rest}>
+    <TooltipProvider
+      delayShow={0}
+      {...rest}
+    >
       <Tooltip>
         <button type="button">
           Trigger

package/src/components/Tooltip/Tooltip.tsx

@@ -10,6 +10,7 @@ import React, {
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
 import { document } from '~/src/utils/domUtils'
+import { createContext } from '~/src/utils/reactUtils'
 import { isBoolean } from '~/src/utils/typeUtils'
 
 import {
@@ -20,30 +21,6 @@ import {
 
 import * as Styled from './Tooltip.styled'
 
-// TODO: (@ed) Evolve it into a commonly reusable function
-// FIXME: duplicate
-function createContext<ContextValue>(
-  providerName: string,
-  defaultValue: ContextValue,
-) {
-  const Context = React.createContext<ContextValue>(defaultValue)
-
-  function useContext(consumerName: string) {
-    const contextValue = React.useContext(Context)
-
-    if (!contextValue) {
-      throw new Error(`'${consumerName}' must be used within '${providerName}'`)
-    }
-
-    return contextValue
-  }
-
-  return [
-    Context.Provider,
-    useContext,
-  ] as const
-}
-
 function getSideAndAlign(
   placement: TooltipPosition,
 ): Pick<TooltipPrimitive.TooltipContentProps, 'side' | 'align'> {
@@ -123,7 +100,7 @@ const [
    */
   TooltipGlobalContextProvider,
   useTooltipGlobalContext,
-] = createContext<Required<Pick<TooltipProviderProps, 'delayHide'>> | null>('TooltipProvider', null)
+] = createContext<Required<Pick<TooltipProviderProps, 'delayHide'>> | null>(null, 'TooltipProvider')
 
 /**
  * `TooltipProvider` is used to globally provide props to child tooltips.
@@ -139,9 +116,9 @@ const [
 export function TooltipProvider({
   children,
   allowHover = false,
-  delayShow = 0,
+  delayShow = 300,
   delayHide = 0,
-  skipDelayShow = 0,
+  skipDelayShow = 500,
 }: TooltipProviderProps) {
   const contextValue = useMemo(() => ({
     delayHide,

package/src/components/Tooltip/Tooltip.types.ts

@@ -33,7 +33,7 @@ interface TooltipProviderOptions {
   allowHover?: boolean
   /**
    * The delay from when the mouse enters a tooltip trigger until the tooltip opens.
-   * @default 0
+   * @default 300
    */
   delayShow?: number
   /**
@@ -43,7 +43,7 @@ interface TooltipProviderOptions {
   delayHide?: number
   /**
    * How much time a user has to enter another trigger without incurring a delay again.
-   * @default 0
+   * @default 500
    */
   skipDelayShow?: number
 }
@@ -91,7 +91,7 @@ interface TooltipOptions {
   /**
    * The delay from when the mouse enters a tooltip trigger until the tooltip opens.
    * Inherits from the nearest `TooltipProvider`.
-   * @default 0
+   * @default 300
    */
   delayShow?: number
   /**

package/src/components/Tooltip/index.ts

@@ -9,4 +9,3 @@ export type {
   TooltipProps,
   TooltipProviderProps,
 } from './Tooltip.types'
-