chore: Buttonの内部処理を整理する

packages/smarthr-ui/src/components/Browser/Browser.tsx

@@ -1,7 +1,7 @@
 import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { DecoratorsType } from '../../types'
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { Text } from '../Text'
 
 import { BrowserColumn } from './BrowserColumn'

packages/smarthr-ui/src/components/Button/AnchorButton.tsx

@@ -12,7 +12,6 @@ import { tv } from 'tailwind-variants'
 
 import { ElementRef, ElementRefProps } from '../../types'
 
-import { ButtonInner } from './ButtonInner'
 import { ButtonWrapper } from './ButtonWrapper'
 import { DisabledDetail } from './DisabledDetail'
 import { BaseProps } from './types'
@@ -50,11 +49,7 @@ const AnchorButton = forwardRef(
     }: PropsWithoutRef<Props<T>> & ElementProps<T>,
     ref: Ref<ElementRef<T>>,
   ): ReactElement => {
-    const styles = useMemo(() => anchorButton({ className }), [className])
-    const actualRel = useMemo(
-      () => (rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel),
-      [rel, target],
-    )
+    const style = useMemo(() => anchorButton({ className }), [className])
 
     const button = (
       <ButtonWrapper
@@ -63,16 +58,16 @@ const AnchorButton = forwardRef(
         square={square}
         wide={wide}
         variant={variant}
-        className={styles}
+        className={style}
         target={target}
-        rel={actualRel}
+        rel={rel === undefined && target === '_blank' ? 'noopener noreferrer' : rel}
         isAnchor
         anchorRef={ref}
         elementAs={elementAs}
+        prefix={prefix}
+        suffix={suffix}
       >
-        <ButtonInner prefix={prefix} suffix={suffix} size={size}>
-          {children}
-        </ButtonInner>
+        {children}
       </ButtonWrapper>
     )
 

packages/smarthr-ui/src/components/Button/Button.tsx

@@ -1,14 +1,13 @@
 'use client'
 
-import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react'
+import React, { ButtonHTMLAttributes, PropsWithChildren, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType, useDecorators } from '../../hooks/useDecorators'
 import { usePortal } from '../../hooks/usePortal'
-import { DecoratorsType } from '../../types'
 import { Loader } from '../Loader'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import { ButtonInner } from './ButtonInner'
 import { ButtonWrapper } from './ButtonWrapper'
 import { DisabledDetail } from './DisabledDetail'
 import { BaseProps } from './types'
@@ -39,10 +38,13 @@ const buttonStyle = tv({
 })
 
 export type Props = {
-  decorators?: DecoratorsType<'loading'>
+  decorators?: DecoratorsType<DecoratorKeyTypes>
 }
 
-const LOADING_TEXT = '処理中'
+const DECORATOR_DEFAULT_TEXTS = {
+  loading: '処理中',
+} as const
+type DecoratorKeyTypes = keyof typeof DECORATOR_DEFAULT_TEXTS
 
 export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & Props>(
   (
@@ -64,24 +66,34 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
     },
     ref,
   ) => {
-    const { wrapper, loader: loaderSlot } = buttonStyle()
-    const wrapperStyle = useMemo(() => wrapper({ className }), [className, wrapper])
-    const loaderStyle = useMemo(
-      () => loaderSlot({ isSecondary: variant === 'secondary' }),
-      [loaderSlot, variant],
-    )
-    const { createPortal } = usePortal()
+    const styles = useMemo(() => {
+      const { wrapper, loader } = buttonStyle()
+
+      return {
+        wrapper: wrapper({ className }),
+        loader: loader({ isSecondary: variant === 'secondary' }),
+      }
+    }, [variant, className])
+
+    let actualPrefix = prefix
+    let actualSuffix = suffix
+    let disabledOnLoading = disabled
+    let actualChildren = children
 
-    const loader = <Loader size="s" className={loaderStyle} role="presentation" />
-    const actualPrefix = !loading && prefix
-    const actualSuffix = loading && !square ? loader : suffix
-    const disabledOnLoading = loading || disabled
-    const actualChildren = loading && square ? loader : children
+    if (loading) {
+      actualPrefix = undefined
+      disabledOnLoading = true
+
+      const loader = <Loader size="s" className={styles.loader} role="presentation" />
+
+      if (square) {
+        actualChildren = loader
+      } else {
+        actualSuffix = loader
+      }
+    }
 
-    const statusText = useMemo(() => {
-      const loadingText = decorators?.loading?.(LOADING_TEXT) ?? LOADING_TEXT
-      return loading ? loadingText : ''
-    }, [decorators, loading])
+    const decorated = useDecorators<DecoratorKeyTypes>(DECORATOR_DEFAULT_TEXTS, decorators)
 
     const button = (
       <ButtonWrapper
@@ -91,18 +103,15 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
         square={square}
         wide={wide}
         variant={variant}
-        className={wrapperStyle}
+        className={styles.wrapper}
         buttonRef={ref}
         disabled={disabledOnLoading}
         $loading={loading}
+        prefix={actualPrefix}
+        suffix={actualSuffix}
       >
-        {
-          // `button` 要素内で live region を使うことはできないので、`role="status"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558
-          createPortal(<VisuallyHiddenText role="status">{statusText}</VisuallyHiddenText>)
-        }
-        <ButtonInner prefix={actualPrefix} suffix={actualSuffix} size={size}>
-          {actualChildren}
-        </ButtonInner>
+        <LoadingStatus loading={loading}>{decorated.loading}</LoadingStatus>
+        {actualChildren}
       </ButtonWrapper>
     )
 
@@ -115,3 +124,14 @@ export const Button = forwardRef<HTMLButtonElement, BaseProps & ElementProps & P
 )
 // BottomFixedArea での判定に用いるために displayName を明示的に設定する
 Button.displayName = 'Button'
+
+const LoadingStatus = React.memo<PropsWithChildren<{ loading: boolean }>>(
+  ({ loading, children }) => {
+    const { createPortal } = usePortal()
+
+    // `button` 要素内で live region を使うことはできないので、`role="status"` を持つ要素を外側に配置している。 https://github.com/kufu/smarthr-ui/pull/4558
+    return createPortal(
+      <VisuallyHiddenText role="status">{loading && children}</VisuallyHiddenText>,
+    )
+  },
+)