chore: Dialog周辺コンポーネントのロジックを整理する

packages/smarthr-ui/src/components/Dialog/DialogBody.tsx

@@ -1,4 +1,4 @@
-import React, { type PropsWithChildren } from 'react'
+import React, { type PropsWithChildren, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
 import type { Gap } from '../../types'
@@ -81,13 +81,25 @@ const dialogBody = tv({
 
 export const DialogBody: React.FC<Props> = ({
   contentBgColor,
-  contentPadding = 1.5,
+  contentPadding,
   className,
   ...rest
 }) => {
-  const paddingBlock = contentPadding instanceof Object ? contentPadding.block : contentPadding
-  const paddingInline = contentPadding instanceof Object ? contentPadding.inline : contentPadding
+  const actualPaddings = useMemo(() => {
+    const initialized = contentPadding === undefined ? 1.5 : contentPadding
+
+    return initialized instanceof Object ? initialized : { block: initialized, inline: initialized }
+  }, [contentPadding])
+  const style = useMemo(
+    () =>
+      dialogBody({
+        contentBgColor,
+        paddingBlock: actualPaddings.block,
+        paddingInline: actualPaddings.inline,
+        className,
+      }),
+    [actualPaddings.block, actualPaddings.inline, contentBgColor, className],
+  )
 
-  const style = dialogBody({ contentBgColor, paddingBlock, paddingInline, className })
   return <div {...rest} className={style} />
 }

packages/smarthr-ui/src/components/Dialog/DialogContentInner.tsx

@@ -1,14 +1,6 @@
 'use client'
 
-import React, {
-  ComponentProps,
-  FC,
-  PropsWithChildren,
-  RefObject,
-  useCallback,
-  useMemo,
-  useRef,
-} from 'react'
+import React, { ComponentProps, FC, PropsWithChildren, RefObject, useMemo, useRef } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { useHandleEscape } from '../../hooks/useHandleEscape'
@@ -68,9 +60,7 @@ const dialogContentInner = tv({
 
 export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
   onClickOverlay,
-  onPressEscape = () => {
-    /* noop */
-  },
+  onPressEscape,
   isOpen,
   id,
   width,
@@ -81,44 +71,39 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
   className,
   ...rest
 }) => {
-  const { layoutStyleProps, innerStyle, backgroundStyle } = useMemo(() => {
+  const { layoutStyle, innerStyle, backgroundStyle } = useMemo(() => {
     const { layout, inner, background } = dialogContentInner()
-    const actualWidth = typeof width === 'number' ? `${width}px` : width
+
     return {
-      layoutStyleProps: {
-        className: layout(),
-        style: {
-          width: actualWidth ?? undefined,
-        },
-      },
+      layoutStyle: layout(),
       innerStyle: inner({ className }),
       backgroundStyle: background(),
     }
-  }, [className, width])
+  }, [className])
+  const styleAttr = useMemo(() => {
+    const actualWidth = typeof width === 'number' ? `${width}px` : width
+
+    if (!actualWidth) {
+      return undefined
+    }
+
+    return {
+      width: actualWidth,
+    }
+  }, [width])
 
   const innerRef = useRef<HTMLDivElement>(null)
+
   useHandleEscape(
-    useCallback(() => {
-      if (!isOpen) {
-        return
-      }
-      onPressEscape()
-    }, [isOpen, onPressEscape]),
+    useMemo(() => (onPressEscape && isOpen ? onPressEscape : undefined), [isOpen, onPressEscape]),
   )
 
-  const handleClickOverlay = useCallback(() => {
-    if (isOpen && onClickOverlay) {
-      onClickOverlay()
-    }
-  }, [isOpen, onClickOverlay])
-
   useBodyScrollLock(isOpen)
 
   return (
     <DialogOverlap isOpen={isOpen}>
-      <div {...layoutStyleProps} id={id}>
-        {/* eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation */}
-        <div onClick={handleClickOverlay} className={backgroundStyle} role="presentation" />
+      <div id={id} className={layoutStyle} style={styleAttr}>
+        <Overlay isOpen={isOpen} onClickOverlay={onClickOverlay} className={backgroundStyle} />
         <div
           {...rest}
           ref={innerRef}
@@ -134,3 +119,15 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
     </DialogOverlap>
   )
 }
+
+const Overlay = React.memo<
+  Pick<DialogContentInnerProps, 'onClickOverlay' | 'isOpen'> & { className: string }
+>(({ onClickOverlay, isOpen, className }) => {
+  const handleClickOverlay = useMemo(
+    () => (onClickOverlay && isOpen ? onClickOverlay : undefined),
+    [isOpen, onClickOverlay],
+  )
+
+  // eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation
+  return <div onClick={handleClickOverlay} className={className} role="presentation" />
+})

packages/smarthr-ui/src/components/Dialog/DialogHeader.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Heading, HeadingTagTypes } from '../Heading'
@@ -25,8 +25,9 @@ const dialogHeader = tv({
   ],
 })
 
-export const DialogHeader: React.FC<Props> = ({ title, subtitle, titleTag, titleId }) => {
-  const style = dialogHeader()
+export const DialogHeader = React.memo<Props>(({ title, subtitle, titleTag, titleId }) => {
+  const style = useMemo(() => dialogHeader(), [])
+
   return (
     // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
     <Heading tag={titleTag} className={style}>
@@ -42,4 +43,4 @@ export const DialogHeader: React.FC<Props> = ({ title, subtitle, titleTag, title
       </Stack>
     </Heading>
   )
-}
+})

packages/smarthr-ui/src/components/Dialog/DialogTrigger.tsx

@@ -6,6 +6,7 @@ import { DialogContext } from './DialogWrapper'
 
 export const DialogTrigger: React.FC<PropsWithChildren> = (props) => {
   const { onClickTrigger } = useContext(DialogContext)
+
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,smarthr/a11y-delegate-element-has-role-presentation
     <div {...props} onClick={onClickTrigger} aria-haspopup="dialog" className="shr-inline-block" />

packages/smarthr-ui/src/components/Dialog/DialogWrapper.tsx

@@ -1,32 +1,32 @@
 'use client'
 
-import React, { PropsWithChildren, createContext, useState } from 'react'
+import React, { PropsWithChildren, createContext, useCallback, useState } from 'react'
 
 type DialogContextType = {
   onClickTrigger: () => void
   onClickClose: () => void
   active: boolean
 }
 
+const noop = () => undefined
 export const DialogContext = createContext<DialogContextType>({
-  onClickTrigger: () => {
-    /* noop */
-  },
-  onClickClose: () => {
-    /* noop */
-  },
+  onClickTrigger: noop,
+  onClickClose: noop,
   active: false,
 })
 
 export const DialogWrapper: React.FC<PropsWithChildren> = (props) => {
   const [active, setActive] = useState(false)
 
+  const onClickTrigger = useCallback(() => setActive(true), [])
+  const onClickClose = useCallback(() => setActive(false), [])
+
   return (
     <DialogContext.Provider
       {...props}
       value={{
-        onClickTrigger: () => setActive(true),
-        onClickClose: () => setActive(false),
+        onClickTrigger,
+        onClickClose,
         active,
       }}
     />

packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx

@@ -318,13 +318,22 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
     [props],
   )
 
+  const actualOnPressEscape = useMemo(
+    () =>
+      onPressEscape
+        ? () => {
+            lastFocusElementRef.current?.focus()
+            onPressEscape()
+          }
+        : undefined,
+    [onPressEscape],
+  )
+
   useHandleEscape(
-    useCallback(() => {
-      if (isOpen && onPressEscape) {
-        lastFocusElementRef.current?.focus()
-        onPressEscape()
-      }
-    }, [isOpen, onPressEscape]),
+    useMemo(
+      () => (actualOnPressEscape && isOpen ? actualOnPressEscape : undefined),
+      [isOpen, actualOnPressEscape],
+    ),
   )
 
   useEffect(() => {

packages/smarthr-ui/src/hooks/useHandleEscape.ts

@@ -1,18 +1,29 @@
-import { useCallback, useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 
-export const useHandleEscape = (cb: () => void) => {
-  const handleKeyPress = useCallback(
-    (e: KeyboardEvent) => {
-      // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
-      // Esc is a IE/Edge specific value
-      if (e.key === 'Escape' || e.key === 'Esc') {
-        cb()
-      }
-    },
+const ESCAPE_KEY_REGEX = /^Esc(ape)?$/
+
+export const useHandleEscape = (cb?: () => void) => {
+  const handleKeyPress = useMemo(
+    () =>
+      cb
+        ? (e: KeyboardEvent) => {
+            // https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key
+            // Esc is a IE/Edge specific value
+            if (ESCAPE_KEY_REGEX.test(e.key)) {
+              cb()
+            }
+          }
+        : null,
     [cb],
   )
+
   useEffect(() => {
+    if (!handleKeyPress) {
+      return
+    }
+
     document.addEventListener('keydown', handleKeyPress)
+
     return () => document.removeEventListener('keydown', handleKeyPress)
   }, [handleKeyPress])
 }