fix: eslintのwarningを解消する

packages/smarthr-ui/.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 esm
 lib
+*.stories.tsx

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

@@ -20,21 +20,23 @@ describe('SingleComboBox', () => {
   const deleteButtons = () => screen.getAllByRole('button', { name: '削除' })
 
   const template = (args: Partial<ComponentProps<typeof MultiComboBox>>) => (
-    <FormControl title="コンボボックス">
-      <MultiComboBox
-        name="default"
-        items={[
-          { label: 'option 1', value: 'value-1' },
-          { label: 'option 2', value: 'value-2' },
-          { label: 'option 3', value: 'value-3' },
-          { label: 'option 4', value: 'value-4' },
-          { label: 'option 5', value: 'value-5' },
-        ]}
-        selectedItems={[{ label: 'option 1', value: 'value-1' }]}
-        // eslint-disable-next-line smarthr/jsx-start-with-spread-attributes
-        {...args}
-      />
-    </FormControl>
+    <form>
+      <FormControl title="コンボボックス">
+        <MultiComboBox
+          name="default"
+          items={[
+            { label: 'option 1', value: 'value-1' },
+            { label: 'option 2', value: 'value-2' },
+            { label: 'option 3', value: 'value-3' },
+            { label: 'option 4', value: 'value-4' },
+            { label: 'option 5', value: 'value-5' },
+          ]}
+          selectedItems={[{ label: 'option 1', value: 'value-1' }]}
+          // eslint-disable-next-line smarthr/jsx-start-with-spread-attributes
+          {...args}
+        />
+      </FormControl>
+    </form>
   )
 
   it('アイテムを選択できること', async () => {

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

@@ -268,7 +268,7 @@ const ActualMultiComboBox = <T,>(
     if (isFocused) return textColor.black
     if (disabled) return textColor.disabled
     return textColor.grey
-  }, [disabled, isFocused, textColor.black, textColor.disabled, textColor.grey])
+  }, [disabled, isFocused])
 
   useOuterClick([outerRef, listBoxRef], blur)
 
@@ -335,6 +335,10 @@ const ActualMultiComboBox = <T,>(
       isComposing,
       isFocused,
       resetDeletionButtonFocus,
+      handleDelete,
+      inputValue,
+      selectedItems,
+      setInputValueIfUncontrolled,
     ],
   )
 

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

@@ -316,7 +316,7 @@ const ActualSingleComboBox = <T,>(
     if (isFocused) return textColor.black
     if (disabled) return textColor.disabled
     return textColor.grey
-  }, [disabled, isFocused, textColor.black, textColor.disabled, textColor.grey])
+  }, [disabled, isFocused])
 
   useClick(
     [outerRef, listBoxRef, clearButtonRef],

packages/smarthr-ui/src/components/ComboBox/SingleCombobox.test.tsx

@@ -19,21 +19,23 @@ describe('SingleComboBox', () => {
   const clearButton = () => screen.getByRole('button', { name: '削除' })
 
   const template = (args: Partial<ComponentProps<typeof SingleComboBox>>) => (
-    <FormControl title="コンボボックス">
-      <SingleComboBox
-        name="default"
-        items={[
-          { label: 'option 1', value: 'value-1' },
-          { label: 'option 2', value: 'value-2' },
-          { label: 'option 3', value: 'value-3' },
-          { label: 'option 4', value: 'value-4' },
-          { label: 'option 5', value: 'value-5' },
-        ]}
-        selectedItem={{ label: 'option 1', value: 'value-1' }}
-        // eslint-disable-next-line smarthr/jsx-start-with-spread-attributes
-        {...args}
-      />
-    </FormControl>
+    <form>
+      <FormControl title="コンボボックス">
+        <SingleComboBox
+          name="default"
+          items={[
+            { label: 'option 1', value: 'value-1' },
+            { label: 'option 2', value: 'value-2' },
+            { label: 'option 3', value: 'value-3' },
+            { label: 'option 4', value: 'value-4' },
+            { label: 'option 5', value: 'value-5' },
+          ]}
+          selectedItem={{ label: 'option 1', value: 'value-1' }}
+          // eslint-disable-next-line smarthr/jsx-start-with-spread-attributes
+          {...args}
+        />
+      </FormControl>
+    </form>
   )
 
   it('アイテムを選択できること', async () => {

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

@@ -103,7 +103,7 @@ export const useListBox = <T,>({
     const rect = triggerRef.current.getBoundingClientRect()
 
     setTriggerWidth(rect.width)
-  }, [triggerRef.current, isExpanded])
+  }, [isExpanded, triggerRef])
 
   const calculateRect = useCallback(() => {
     if (!listBoxRef.current || !triggerRef.current) {
@@ -278,7 +278,6 @@ export const useListBox = <T,>({
     triggerWidth,
     loaderWrapper,
     noItems,
-    spacing,
     wrapper,
   ])
 

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

@@ -16,9 +16,11 @@ describe('DatePicker', () => {
 
   it('カレンダーから日付を選択することができる', async () => {
     render(
-      <FormControl title="DatePicker">
-        <DatePicker value="2024-09-25" name="date" onChangeDate={vi.fn()} />
-      </FormControl>,
+      <form>
+        <FormControl title="DatePicker">
+          <DatePicker value="2024-09-25" name="date" onChangeDate={vi.fn()} />
+        </FormControl>
+      </form>,
     )
     const textbox = screen.getByRole('textbox', { name: 'DatePicker' })
 
@@ -40,9 +42,11 @@ describe('DatePicker', () => {
 
   it('フォーカスを失うときにテキストボックスの内容がフォーマットされること', async () => {
     render(
-      <FormControl title="DatePicker">
-        <DatePicker name="date" onChangeDate={vi.fn()} />
-      </FormControl>,
+      <form>
+        <FormControl title="DatePicker">
+          <DatePicker name="date" onChangeDate={vi.fn()} />
+        </FormControl>
+      </form>,
     )
     const textbox = screen.getByRole('textbox', { name: 'DatePicker' })
     await act(() => userEvent.type(textbox, '平成4年5月29日{tab}'))

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

@@ -287,14 +287,7 @@ export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
       if (isInputFocused || isCalendarShown) return textColor.black
       if (disabled) return textColor.disabled
       return textColor.grey
-    }, [
-      isInputFocused,
-      isCalendarShown,
-      textColor.black,
-      textColor.disabled,
-      textColor.grey,
-      disabled,
-    ])
+    }, [isInputFocused, isCalendarShown, disabled])
 
     return (
       <div

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

@@ -85,8 +85,7 @@ export const Default: StoryFn = () => {
           ariaLabel="Dialog"
           data-test="dialog-content"
         >
-          <Section>
-            <Heading>Dialog</Heading>
+          <Fieldset title="Dialog" titleType="sectionTitle">
             <p>The value of isOpen must be managed by you, but you can customize content freely.</p>
             <DatePicker
               name="dialog_datepicker"
@@ -115,7 +114,7 @@ export const Default: StoryFn = () => {
                 </li>
               </RadioListCluster>
             </Fieldset>
-          </Section>
+          </Fieldset>
           {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}
           <FooterCluster>
             <Button onClick={onClickClose} data-test="dialog-closer">

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

@@ -6,11 +6,9 @@ import { Button } from '../Button'
 import { DatePicker } from '../DatePicker'
 import { Fieldset } from '../Fieldset'
 import { FormControl } from '../FormControl'
-import { Heading } from '../Heading'
 import { Input } from '../Input'
 import { Cluster } from '../Layout'
 import { RadioButton } from '../RadioButton'
-import { Section } from '../SectioningContent'
 
 import { Dialog } from './Dialog'
 
@@ -21,34 +19,37 @@ describe('Dialog', () => {
       <>
         <Button onClick={() => setIsOpen(true)}>Dialog</Button>
         <Dialog isOpen={isOpen} ariaLabel="Dialog">
-          <Section>
-            <Heading>Dialog</Heading>
-            <p>The value of isOpen must be managed by you, but you can customize content freely.</p>
-            <DatePicker
-              name="dialog_datepicker"
-              value={'2021-01-01'}
-              formatDate={(_date) => (_date ? _date.toDateString() : '')}
-              title="dialog_datepicker"
-            />
-            <Fieldset title="Fruits">
-              <Cluster as="ul">
-                <li>
-                  <RadioButton name="Apple" checked>
-                    Apple
-                  </RadioButton>
-                </li>
-                <li>
-                  <RadioButton name="Orange">Orange</RadioButton>
-                </li>
-                <li>
-                  <RadioButton name="Grape">Grape</RadioButton>
-                </li>
-              </Cluster>
+          <form>
+            <Fieldset title="Dialog" titleType="sectionTitle">
+              <p>
+                The value of isOpen must be managed by you, but you can customize content freely.
+              </p>
+              <DatePicker
+                name="dialog_datepicker"
+                value={'2021-01-01'}
+                formatDate={(_date) => (_date ? _date.toDateString() : '')}
+                title="dialog_datepicker"
+              />
+              <Fieldset title="Fruits">
+                <Cluster as="ul">
+                  <li>
+                    <RadioButton name="Apple" checked>
+                      Apple
+                    </RadioButton>
+                  </li>
+                  <li>
+                    <RadioButton name="Orange">Orange</RadioButton>
+                  </li>
+                  <li>
+                    <RadioButton name="Grape">Grape</RadioButton>
+                  </li>
+                </Cluster>
+              </Fieldset>
             </Fieldset>
-          </Section>
-          <div>
-            <Button onClick={() => setIsOpen(false)}>close</Button>
-          </div>
+            <div>
+              <Button onClick={() => setIsOpen(false)}>close</Button>
+            </div>
+          </form>
         </Dialog>
       </>
     )
@@ -122,12 +123,14 @@ describe('Dialog', () => {
           firstFocusTarget={inputRef}
           ariaLabel="特定の要素をフォーカスするダイアログ"
         >
-          <FormControl title="特定の要素をフォーカスするダイアログのInput">
-            <Input ref={inputRef} name="input_focus_target" />
-          </FormControl>
-          <div>
-            <Button onClick={() => setIsOpen(false)}>close</Button>
-          </div>
+          <form>
+            <FormControl title="特定の要素をフォーカスするダイアログのInput">
+              <Input ref={inputRef} name="input_focus_target" />
+            </FormControl>
+            <div>
+              <Button onClick={() => setIsOpen(false)}>close</Button>
+            </div>
+          </form>
         </Dialog>
       </>
     )

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

@@ -79,12 +79,11 @@ export const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({
   const { wrapper, actionArea, buttonArea, message } = dialogContentInner()
 
   return (
-    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content
+    // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content, smarthr/a11y-prohibit-sectioning-content-in-form
     <Section>
+      <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
       <form onSubmit={handleSubmitAction}>
-        {/* eslint-disable-next-line smarthr/best-practice-for-layouts */}
-        <Stack gap={0} className={wrapper()}>
-          <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
+        <div className={wrapper()}>
           <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
             {children}
           </DialogBody>
@@ -118,7 +117,7 @@ export const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({
               </div>
             )}
           </Stack>
-        </Stack>
+        </div>
       </form>
     </Section>
   )

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

@@ -180,7 +180,7 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
       className: wrapperStyle,
       style,
     }
-  }, [wrapperStyle, left, right, spacing, width])
+  }, [wrapperStyle, left, right, width])
 
   const wrapperRef = useRef<HTMLDivElement>(null)
   const focusTargetRef = useRef<HTMLDivElement>(null)

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

@@ -85,7 +85,7 @@ export const Dropdown: FC<PropsWithChildren<Props>> = ({ onOpen, onClose, childr
       if (!active) return null
       return createPortal(props.children)
     },
-    [active, createPortal, isPortalRootMounted],
+    [active, createPortal],
   )
 
   useEffect(() => {