chore: 独自実装の useId を削除する

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

@@ -1,8 +1,15 @@
 import dayjs from 'dayjs'
-import React, { ComponentProps, MouseEvent, forwardRef, useEffect, useMemo, useState } from 'react'
+import React, {
+  ComponentProps,
+  MouseEvent,
+  forwardRef,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { Button } from '../Button'
 import { FaCaretDownIcon, FaCaretUpIcon, FaChevronLeftIcon, FaChevronRightIcon } from '../Icon'
 import { Cluster } from '../Layout'

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

@@ -5,13 +5,13 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { FaCheckIcon, FaMinusIcon } from '../Icon'
 
 export type Props = PropsWithChildren<
@@ -119,7 +119,8 @@ export const CheckBox = forwardRef<HTMLInputElement, Props>(
       }
     }, [checked, mixed])
 
-    const checkBoxId = useId(props.id)
+    const defaultId = useId()
+    const checkBoxId = props.id || defaultId
 
     return (
       <span className={wrapperStyle}>

packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx

@@ -9,10 +9,10 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { useOuterClick } from '../../hooks/useOuterClick'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { genericsForwardRef } from '../../libs/util'

packages/smarthr-ui/src/components/ComboBox/useListBox.tsx

@@ -4,14 +4,14 @@ import React, {
   RefObject,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
-import { useId } from '../../hooks/useId'
 import { usePortal } from '../../hooks/usePortal'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { FaInfoCircleIcon } from '../Icon'

packages/smarthr-ui/src/components/ComboBox/useOptions.ts

@@ -1,8 +1,6 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useId, useMemo } from 'react'
 import innerText from 'react-innertext'
 
-import { useId } from '../../hooks/useId'
-
 import { convertMatchableString } from './comboBoxHelper'
 import { ComboBoxItem, ComboBoxOption } from './types'
 

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

@@ -5,14 +5,14 @@ import React, {
   forwardRef,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { useOuterClick } from '../../hooks/useOuterClick'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { Calendar } from '../Calendar'

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

@@ -1,6 +1,5 @@
-import React, { ComponentProps, useCallback } from 'react'
+import React, { ComponentProps, useCallback, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogProps } from '../types'
 import { useDialogPortal } from '../useDialogPortal'

packages/smarthr-ui/src/components/Dialog/ActionDialog/ActionDialogContent.tsx

@@ -1,6 +1,5 @@
-import React, { HTMLAttributes, useCallback, useContext } from 'react'
+import React, { HTMLAttributes, useCallback, useContext, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogContext } from '../DialogWrapper'
 import { UncontrolledDialogProps } from '../types'

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

@@ -1,6 +1,5 @@
-import React, { ReactElement, cloneElement, useCallback, useMemo, useState } from 'react'
+import React, { ReactElement, cloneElement, useCallback, useId, useMemo, useState } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { ActionDialog } from '../ActionDialog'
 
 type ToggleModalActionType = () => void

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

@@ -1,6 +1,5 @@
-import React, { ComponentProps, FormEvent, useCallback } from 'react'
+import React, { ComponentProps, FormEvent, useCallback, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogProps } from '../types'
 import { useDialogPortal } from '../useDialogPortal'

packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContent.tsx

@@ -1,6 +1,5 @@
-import React, { FormEvent, HTMLAttributes, useCallback, useContext } from 'react'
+import React, { FormEvent, HTMLAttributes, useCallback, useContext, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogContext } from '../DialogWrapper'
 import { UncontrolledDialogProps } from '../types'

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

@@ -1,6 +1,5 @@
-import React, { ComponentProps, useCallback } from 'react'
+import React, { ComponentProps, useCallback, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogProps } from '../types'
 import { useDialogPortal } from '../useDialogPortal'

packages/smarthr-ui/src/components/Dialog/MessageDialog/MessageDialogContent.tsx

@@ -1,6 +1,5 @@
-import React, { ComponentProps, useCallback, useContext } from 'react'
+import React, { ComponentProps, useCallback, useContext, useId } from 'react'
 
-import { useId } from '../../../hooks/useId'
 import { DialogContentInner } from '../DialogContentInner'
 import { DialogContext } from '../DialogWrapper'
 import { UncontrolledDialogProps } from '../types'

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

@@ -7,6 +7,7 @@ import React, {
   RefObject,
   useCallback,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -15,7 +16,6 @@ import Draggable from 'react-draggable'
 import { VariantProps, tv } from 'tailwind-variants'
 
 import { useHandleEscape } from '../../hooks/useHandleEscape'
-import { useId } from '../../hooks/useId'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'

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

@@ -6,12 +6,12 @@ import React, {
   createContext,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useRef,
   useState,
 } from 'react'
 
-import { useId } from '../../hooks/useId'
 import { usePortal } from '../../hooks/usePortal'
 
 import { Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'

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

@@ -8,10 +8,10 @@ import React, {
   useMemo,
   useRef,
 } from 'react'
+import { useId } from 'react'
 import { isStyledComponent } from 'styled-components'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { MultiComboBox, SingleComboBox } from '../ComboBox'
 import { DatePicker } from '../DatePicker'
 import { DropZone } from '../DropZone'
@@ -146,8 +146,10 @@ export const ActualFormControl: React.FC<Props & ElementProps> = ({
   children,
   ...props
 }) => {
-  const managedHtmlFor = useId(htmlFor)
-  const managedLabelId = useId(labelId)
+  const defaultHtmlFor = useId()
+  const defaultLabelId = useId()
+  const managedHtmlFor = htmlFor || defaultHtmlFor
+  const managedLabelId = labelId || defaultLabelId
   const inputWrapperRef = useRef<HTMLDivElement>(null)
   const isRoleGroup = as === 'fieldset'
   const statusLabelList = Array.isArray(statusLabelProps) ? statusLabelProps : [statusLabelProps]

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

@@ -1,7 +1,14 @@
-import React, { FC, PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react'
+import React, {
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+} from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { Base, BaseElementProps } from '../Base'
 import { Button } from '../Button'
 import { Heading, HeadingTagTypes } from '../Heading'

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

@@ -4,11 +4,11 @@ import React, {
   PropsWithChildren,
   forwardRef,
   useCallback,
+  useId,
   useMemo,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { isIOS } from '../../libs/ua'
 
 type Props = PropsWithChildren<ComponentPropsWithRef<'input'>>
@@ -72,7 +72,8 @@ export const RadioButton = forwardRef<HTMLInputElement, Props>(
       [onChange],
     )
 
-    const radioButtonId = useId(props.id)
+    const defaultId = useId()
+    const radioButtonId = defaultId || props.id
 
     return (
       <span className={wrapperStyle}>

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

@@ -1,7 +1,6 @@
-import React, { InputHTMLAttributes, ReactNode, forwardRef, useMemo } from 'react'
+import React, { InputHTMLAttributes, ReactNode, forwardRef, useId, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { FaCheckIcon } from '../Icon'
 import { Cluster } from '../Layout'
 import { Text } from '../Text'
@@ -56,7 +55,8 @@ export const Switch = forwardRef<HTMLInputElement, Props>(
   ({ children, dangerouslyLabelHidden, className, id, ...props }, ref) => {
     const { wrapper, input, icon, iconWrapper } = useMemo(() => switchStyle(), [])
     const ActualLabelComponent = dangerouslyLabelHidden ? VisuallyHiddenText : Text
-    const inputId = useId(id)
+    const defaultId = useId()
+    const inputId = id || defaultId
 
     return (
       <Cluster align="center">

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

@@ -4,14 +4,14 @@ import React, {
   startTransition,
   useCallback,
   useEffect,
+  useId,
   useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useId } from '../../hooks/useId'
 import { useTheme } from '../../hooks/useTailwindTheme'
 import { debounce } from '../../libs/debounce'
 import { defaultHtmlFontSize } from '../../themes/createFontSize'

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

@@ -5,6 +5,7 @@ import React, {
   ReactElement,
   ReactNode,
   useCallback,
+  useId,
   useMemo,
   useRef,
   useState,
@@ -15,7 +16,6 @@ import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
-import { useId } from '../../hooks/useId'
 import { Props as BalloonProps } from '../Balloon'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'