@channel.io/bezier-react 2.0.6 → 2.0.8

package/src/components/Help/__snapshots__/Help.test.tsx.snap

@@ -2,13 +2,13 @@
 
 exports[`Help > Snapshot > 1`] = `
 <svg
-  class="Icon margin Icon"
+  class="Icon size-xs margin Icon"
   data-testid="bezier-help"
   fill="none"
-  height="16"
+  height="1em"
   style="--b-icon-color: var(--txt-black-dark);"
   viewBox="0 0 24 24"
-  width="16"
+  width="1em"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path

package/src/components/Icon/Icon.module.scss

@@ -1,7 +1,25 @@
+@use '../../styles/mixins/dimension';
+
+$size-map: (
+  xxxs: 10,
+  xxs: 12,
+  xs: 16,
+  s: 20,
+  m: 24,
+  l: 36,
+  xl: 44,
+);
+
 .Icon {
   --b-icon-color: initial;
 
   flex: 0 0 auto;
   color: var(--b-icon-color);
   transition: color var(--transition-s);
+
+  @each $size, $value in $size-map {
+    &:where(.size-#{$size}) {
+      @include dimension.square(#{$value}px);
+    }
+  }
 }

package/src/components/Icon/Icon.tsx

@@ -5,25 +5,12 @@ import classNames from 'classnames'
 import { getMarginStyles, splitByMarginProps } from '~/src/types/props-helpers'
 import { tokenCssVar } from '~/src/utils/style'
 
-import { type IconProps, type IconSize } from './Icon.types'
+import { type IconProps } from './Icon.types'
 
 import styles from './Icon.module.scss'
 
 export const ICON_TEST_ID = 'bezier-icon'
 
-const getSizeValue = (size: IconSize) =>
-  (
-    ({
-      xl: 44,
-      l: 36,
-      m: 24,
-      s: 20,
-      xs: 16,
-      xxs: 12,
-      xxxs: 10,
-    }) satisfies Record<IconSize, number>
-  )[size]
-
 export const Icon = memo(
   forwardRef<SVGSVGElement, IconProps>(function Icon(props, forwardedRef) {
     const [marginProps, marginRest] = splitByMarginProps(props)
@@ -48,9 +35,12 @@ export const Icon = memo(
             ...style,
           } as React.CSSProperties
         }
-        className={classNames(styles.Icon, marginStyles.className, className)}
-        width={getSizeValue(size)}
-        height={getSizeValue(size)}
+        className={classNames(
+          styles.Icon,
+          styles[`size-${size}`],
+          marginStyles.className,
+          className
+        )}
         data-testid={ICON_TEST_ID}
         {...rest}
       />

package/src/components/Icon/Icon.types.ts

@@ -12,7 +12,7 @@ export type IconSize = 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs' | 'xxxs'
 interface IconOwnProps {
   /**
    * Controls which icon should be rendered.
-   * Inject the icon component from the @channel.io/bezier-icons package into this prop.
+   * Inject the icon component from the `@channel.io/bezier-icons` package into this prop.
    * @example
    * ```tsx
    * import { HeartFilledIcon } from '@channel.io/bezier-icons'

package/src/components/NavGroup/__snapshots__/NavGroup.test.tsx.snap

@@ -13,13 +13,13 @@ exports[`NavGroup Test > Snapshot > Active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-group-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-blue-normal);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -40,13 +40,13 @@ exports[`NavGroup Test > Snapshot > Active 1`] = `
     class="RightContentWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-xs margin"
       data-testid="bezier-icon"
       fill="none"
-      height="16"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-orange-normal);"
       viewBox="0 0 24 24"
-      width="16"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -73,13 +73,13 @@ exports[`NavGroup Test > Snapshot > Not active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-group-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--txt-black-dark);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -100,13 +100,13 @@ exports[`NavGroup Test > Snapshot > Not active 1`] = `
     class="RightContentWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-xs margin"
       data-testid="bezier-icon"
       fill="none"
-      height="16"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-orange-normal);"
       viewBox="0 0 24 24"
-      width="16"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/NavItem/__snapshots__/NavItem.test.tsx.snap

@@ -11,13 +11,13 @@ exports[`NavItem Test > Snapshot > Active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-item-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--bgtxt-blue-normal);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
@@ -48,13 +48,13 @@ exports[`NavItem Test > Snapshot > Not active 1`] = `
     class="LeftIconWrapper"
   >
     <svg
-      class="Icon margin"
+      class="Icon size-s margin"
       data-testid="bezier-nav-item-left-icon"
       fill="none"
-      height="20"
+      height="1em"
       style="--b-icon-color: var(--txt-black-dark);"
       viewBox="0 0 24 24"
-      width="20"
+      width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/Overlay/Overlay.tsx

@@ -2,7 +2,6 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useReducer,
   useRef,
   useState,
@@ -12,6 +11,7 @@ import ReactDOM from 'react-dom'
 import classNames from 'classnames'
 
 import useEventHandler from '~/src/hooks/useEventHandler'
+import { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'
 import useMergeRefs from '~/src/hooks/useMergeRefs'
 
 import { useModalContainerContext } from '~/src/components/Modal'
@@ -94,7 +94,7 @@ export const Overlay = forwardRef<HTMLDivElement, OverlayProps>(
       }
     }, [container, hasContainer])
 
-    useLayoutEffect(
+    useIsomorphicLayoutEffect(
       function initContainerRect() {
         if (show) {
           handleContainerRect()
@@ -125,7 +125,7 @@ export const Overlay = forwardRef<HTMLDivElement, OverlayProps>(
       }
     }, [target])
 
-    useLayoutEffect(
+    useIsomorphicLayoutEffect(
       function initTargetRect() {
         if (show) {
           handleTargetRect()

package/src/components/TextArea/TextArea.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef, useLayoutEffect, useRef } from 'react'
+import React, { forwardRef, useRef } from 'react'
 
 import classNames from 'classnames'
 import TextareaAutosize from 'react-textarea-autosize'
 
+import { useIsomorphicLayoutEffect } from '~/src/hooks/useIsomorphicLayoutEffect'
 import {
   COMMON_IME_CONTROL_KEYS,
   useKeyboardActionLockerWhileComposing,
@@ -43,7 +44,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         onKeyUp,
       })
 
-    useLayoutEffect(function initialAutoFocus() {
+    useIsomorphicLayoutEffect(function initialAutoFocus() {
       function setSelectionToEnd() {
         inputRef.current?.setSelectionRange(
           inputRef.current?.value.length,

package/src/components/Toast/Toast.module.scss

@@ -43,7 +43,7 @@
 .ToastContainer {
   pointer-events: none;
 
-  position: absolute;
+  position: fixed;
 
   overflow: hidden;
   display: flex;

package/src/components/Toast/Toast.tsx

@@ -205,9 +205,8 @@ export function ToastProvider({
 
   const createContainer = useCallback(
     (placement: ToastPlacement, toasts: ToastType[]) => (
-      <InvertedThemeProvider>
+      <InvertedThemeProvider key={placement}>
         <div
-          key={placement}
           style={{
             bottom: px(offset?.bottom ?? DEFAULT_OFFSET.bottom),
             ...(placement === 'bottom-right'

package/src/hooks/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,9 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+/**
+ * @description This hook is used to handle the layout effect in a way that is compatible with SSR.
+ * In Server Environments, this hook will use `useEffect` instead of `useLayoutEffect`.
+ * @see https://react.dev/reference/react/useLayoutEffect#troubleshooting
+ */
+export const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect

package/src/index.ts

@@ -12,6 +12,7 @@ export * from '~/src/components/AlphaDialogPrimitive'
 export * from '~/src/components/AlphaFloatingButton'
 export * from '~/src/components/AlphaFloatingIconButton'
 export * from '~/src/components/AlphaIconButton'
+export * from '~/src/components/AlphaSpinner'
 export * from '~/src/components/AlphaTooltipPrimitive'
 export * from '~/src/components/AppProvider'
 export * from '~/src/components/AutoFocus'