From bd62b1c5f05fcda6a97aa1ffd7263db536e9c650 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 14 Jan 2025 10:00:31 +0900
Subject: [PATCH 1/2] =?UTF-8?q?chore:=20RadioButtonPanel=E3=81=AEhandleOut?=
 =?UTF-8?q?erClick=E3=82=92useCallback?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/RadioButtonPanel/RadioButtonPanel.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx b/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
index a694693fbe..65ae53ff26 100644
--- a/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
+++ b/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ComponentProps, useMemo, useRef } from 'react'
+import React, { ComponentProps, useCallback, useMemo, useRef } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { Base } from '../Base'
@@ -32,14 +32,14 @@ const radioButtonPanel = tv({
 export const RadioButtonPanel: React.FC<Props> = ({ onClick, as, className, ...props }) => {
   const styles = useMemo(
     () => radioButtonPanel({ disabled: !!props.disabled, className }),
-    [className, props.disabled],
+    [props.disabled, className],
   )
 
   // 外側の装飾を押しても内側のラジオボタンが押せるようにする
   const innerRef = useRef<HTMLInputElement>(null)
-  const handleOuterClick = () => {
+  const handleOuterClick = useCallback(() => {
     innerRef.current?.click()
-  }
+  }, [innerRef.current])
 
   return (
     // eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation

From d21ea532201b5bf8cda9e94b200ebfa647634d71 Mon Sep 17 00:00:00 2001
From: AtsushiM <at.mizoue@gmail.com>
Date: Tue, 14 Jan 2025 10:03:52 +0900
Subject: [PATCH 2/2] =?UTF-8?q?chore:=20RadioButtonPanel=E3=81=AErole?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E3=82=92memo=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RadioButtonPanel/RadioButtonPanel.tsx          | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx b/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
index 65ae53ff26..0243cdd944 100644
--- a/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
+++ b/packages/smarthr-ui/src/components/RadioButtonPanel/RadioButtonPanel.tsx
@@ -10,7 +10,7 @@ type Props = ComponentProps<typeof RadioButton> & {
   as?: string | React.ComponentType<any>
 }
 
-const MEANLESS_TAG_NAMES = ['div', 'span']
+const MEANLESS_TAG_NAME_REGEX = /^(div|span)$/
 
 const radioButtonPanel = tv({
   base: [
@@ -34,6 +34,10 @@ export const RadioButtonPanel: React.FC<Props> = ({ onClick, as, className, ...p
     () => radioButtonPanel({ disabled: !!props.disabled, className }),
     [props.disabled, className],
   )
+  const role = useMemo(
+    () => (MEANLESS_TAG_NAME_REGEX.test(as ? `${as}` : '') ? 'presentation' : undefined),
+    [as],
+  )
 
   // 外側の装飾を押しても内側のラジオボタンが押せるようにする
   const innerRef = useRef<HTMLInputElement>(null)
@@ -43,13 +47,7 @@ export const RadioButtonPanel: React.FC<Props> = ({ onClick, as, className, ...p
 
   return (
     // eslint-disable-next-line smarthr/a11y-delegate-element-has-role-presentation
-    <Base
-      padding={1}
-      role={MEANLESS_TAG_NAMES.includes(`${as || ''}`) ? 'presentation' : undefined}
-      onClick={handleOuterClick}
-      as={as}
-      className={styles}
-    >
+    <Base padding={1} role={role} onClick={handleOuterClick} as={as} className={styles}>
       <RadioButton {...props} ref={innerRef} />
     </Base>
   )