Merge branch 'master' of https://github.com/kufu/smarthr-ui into chor…

…e-refactoring-AppHeader

package.json

@@ -27,7 +27,7 @@
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "prepare": "husky"
   },
-  "packageManager": "pnpm@9.15.4",
+  "packageManager": "pnpm@10.3.0",
   "pnpm": {
     "overrides": {
       "@babel/helper-compilation-targets": "^7.26.5",
@@ -36,7 +36,7 @@
       "react": "^19.0.0",
       "react-dom": "^19.0.0",
       "micromatch@<4.0.8": ">=4.0.8",
-      "cross-spawn@<7.0.5": ">=7.0.5",
+      "cross-spawn@<7.0.5": ">=7.0.6",
       "nanoid": "3.3.8"
     }
   }

packages/smarthr-ui/CHANGELOG.md

@@ -2,6 +2,27 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [65.1.0](https://github.com/kufu/smarthr-ui/compare/v65.0.1...v65.1.0) (2025-02-12)
+
+
+### Features
+
+* **DropdownTrigger:** Dropdown triggerでtooltipを表示できるようにする ([#5291](https://github.com/kufu/smarthr-ui/issues/5291)) ([6279377](https://github.com/kufu/smarthr-ui/commit/6279377f402d11579f55285be62f84cb3a71c184))
+
+
+### Bug Fixes
+
+* **ActionDialog,FormDialog:** スクロールできない問題を修正 ([#5367](https://github.com/kufu/smarthr-ui/issues/5367)) ([35b79ab](https://github.com/kufu/smarthr-ui/commit/35b79abfedb683516ec52a02c17af4e890aac096))
+* **MultiComboBox:** item.labelがReactNodeだった場合のitemの比較を内部の文字列によって行うように ([#5191](https://github.com/kufu/smarthr-ui/issues/5191)) ([547d2e5](https://github.com/kufu/smarthr-ui/commit/547d2e50640cb37ac55e4061b4024f30b211b951))
+
+### [65.0.1](https://github.com/kufu/smarthr-ui/compare/v65.0.0...v65.0.1) (2025-02-04)
+
+
+### Bug Fixes
+
+* aria-describedbyがinputに紐づいている場合もFormControlのaria-describedbyを設定する ([#5344](https://github.com/kufu/smarthr-ui/issues/5344)) ([3c636f1](https://github.com/kufu/smarthr-ui/commit/3c636f109f9a93ba3e02663442a065d749473e2f))
+* SegmentedControl内の選択済み項目でButton[variant=primary]を利用する ([#5310](https://github.com/kufu/smarthr-ui/issues/5310)) ([d286b90](https://github.com/kufu/smarthr-ui/commit/d286b9061bb232c23560b5700b6c8a1960ea1053))
+
 ## [65.0.0](https://github.com/kufu/smarthr-ui/compare/v64.0.1...v65.0.0) (2025-01-28)
 
 

packages/smarthr-ui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "smarthr-ui",
   "description": "SmartHR ui components built with React.",
-  "version": "65.0.0",
+  "version": "65.1.0",
   "author": "SmartHR-UI Team",
   "dependencies": {
     "@smarthr/wareki": "^1.3.0",
@@ -17,8 +17,8 @@
     "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.7",
-    "@babel/preset-env": "^7.26.7",
+    "@babel/core": "^7.26.8",
+    "@babel/preset-env": "^7.26.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
     "@storybook/addon-a11y": "^8.4.7",
@@ -39,12 +39,12 @@
     "@storybook/test": "^8.4.7",
     "@storybook/test-runner": "^0.21.0",
     "@storybook/theming": "^8.4.7",
-    "@swc/core": "^1.10.12",
+    "@swc/core": "^1.10.15",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/node": "^20.17.16",
+    "@types/node": "^20.17.17",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^19.0.3",
     "@types/react-test-renderer": "^19.0.0",
@@ -66,7 +66,7 @@
     "npm-run-all2": "^7.0.2",
     "playwright": "^1.49.1",
     "plop": "^4.0.1",
-    "postcss": "^8.4.49",
+    "postcss": "^8.5.1",
     "postcss-loader": "^8.1.1",
     "postcss-styled-syntax": "^0.7.1",
     "postcss-syntax": "^0.36.2",
@@ -84,7 +84,7 @@
     "ts-loader": "^9.5.2",
     "ttypescript": "^1.5.15",
     "typescript-plugin-styled-components": "^3.0.0",
-    "vitest": "^3.0.4",
+    "vitest": "^3.0.5",
     "wait-on": "^8.0.2",
     "webpack": "^5.97.1"
   },

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/Button.tsx

@@ -3,8 +3,8 @@
 import React, { ButtonHTMLAttributes, forwardRef, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { usePortal } from '../../hooks/usePortal'
-import { DecoratorsType } from '../../types'
 import { Loader } from '../Loader'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 

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

@@ -15,18 +15,19 @@ import { useId } from 'react'
 import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { useOuterClick } from '../../../hooks/useOuterClick'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { FaCaretDownIcon } from '../../Icon'
+import { areComboBoxItemsEqual } from '../comboBoxHelper'
 import { useFocusControl } from '../useFocusControl'
 import { useListBox } from '../useListBox'
 import { useOptions } from '../useOptions'
 
 import { MultiSelectedItem } from './MultiSelectedItem'
 import { hasParentElementByClassName } from './multiComboBoxHelper'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {
@@ -198,9 +199,7 @@ const ActualMultiComboBox = <T,>(
         if (onDelete) onDelete(item)
         if (onChangeSelected)
           onChangeSelected(
-            selectedItems.filter(
-              (selected) => selected.label !== item.label || selected.value !== item.value,
-            ),
+            selectedItems.filter((selected) => !areComboBoxItemsEqual(selected, item)),
           )
       })
     },
@@ -211,8 +210,8 @@ const ActualMultiComboBox = <T,>(
       // HINT: Dropdown系コンポーネント内でComboBoxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
       // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
       requestAnimationFrame(() => {
-        const matchedSelectedItem = selectedItems.find(
-          (item) => item.label === selected.label && item.value === selected.value,
+        const matchedSelectedItem = selectedItems.find((item) =>
+          areComboBoxItemsEqual(item, selected),
         )
         if (matchedSelectedItem !== undefined) {
           if (matchedSelectedItem.deletable !== false) {
@@ -468,7 +467,7 @@ const ActualMultiComboBox = <T,>(
           className={selectedListStyle}
         >
           {selectedItems.map((selectedItem, i) => (
-            <li key={`${selectedItem.label}-${selectedItem.value}`}>
+            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>
               <MultiSelectedItem
                 item={selectedItem}
                 disabled={disabled}

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

@@ -17,6 +17,7 @@ import innerText from 'react-innertext'
 import { tv } from 'tailwind-variants'
 
 import { useClick } from '../../../hooks/useClick'
+import { type DecoratorsType } from '../../../hooks/useDecorators'
 import { genericsForwardRef } from '../../../libs/util'
 import { textColor } from '../../../themes'
 import { UnstyledButton } from '../../Button'
@@ -25,7 +26,6 @@ import { Input } from '../../Input'
 import { useListBox } from '../useListBox'
 import { useOptions } from '../useOptions'
 
-import type { DecoratorsType } from '../../../types'
 import type { BaseProps, ComboBoxItem } from '../types'
 
 type Props<T> = BaseProps<T> & {

packages/smarthr-ui/src/components/ComboBox/__tests__/useOptions.test.tsx

@@ -234,7 +234,7 @@ describe('useOptions', () => {
         expect(options[0].item).toEqual({ label: labelElement3, value: 'value3' })
       })
 
-      it('isItemSelectedが渡されていなくてoptionのインスタンスが違うとき、selectedにならないこと', () => {
+      it('isItemSelectedが渡されていなくてvalueが同じかつlabelのインスタンスが違うとき、selectedになること', () => {
         const newLabelElement1 = (
           <div>
             label<span>1</span>
@@ -250,7 +250,7 @@ describe('useOptions', () => {
 
         expect(options.length).toBe(1)
         expect(options[0].item).toEqual({ label: labelElement1, value: 'value1' })
-        expect(options[0].selected).toBeFalsy()
+        expect(options[0].selected).toBeTruthy()
         expect(options[0].isNew).toBeFalsy()
       })
     })

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

@@ -1,3 +1,7 @@
+import innerText from 'react-innertext'
+
+import { ComboBoxItem } from './types'
+
 export function convertMatchableString(original: string) {
   return (
     original
@@ -13,3 +17,7 @@ export function convertMatchableString(original: string) {
       .toLowerCase()
   )
 }
+
+export function areComboBoxItemsEqual<T>(a: ComboBoxItem<T>, b: ComboBoxItem<T>) {
+  return a.value === b.value && innerText(a.label) === innerText(b.label)
+}

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

@@ -11,6 +11,7 @@ import React, {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
+import { type DecoratorsType } from '../../hooks/useDecorators'
 import { useEnhancedEffect } from '../../hooks/useEnhancedEffect'
 import { usePortal } from '../../hooks/usePortal'
 import { spacing } from '../../themes'
@@ -23,8 +24,6 @@ import { ComboBoxItem, ComboBoxOption } from './types'
 import { useActiveOption } from './useActiveOption'
 import { usePartialRendering } from './usePartialRendering'
 
-import type { DecoratorsType } from '../../types'
-
 type Props<T> = {
   options: Array<ComboBoxOption<T>>
   dropdownHelpMessage?: ReactNode

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

@@ -1,17 +1,13 @@
 import { useCallback, useId, useMemo } from 'react'
 import innerText from 'react-innertext'
 
-import { convertMatchableString } from './comboBoxHelper'
+import { areComboBoxItemsEqual, convertMatchableString } from './comboBoxHelper'
 import { ComboBoxItem, ComboBoxOption } from './types'
 
 const defaultIsItemSelected = <T>(
   targetItem: ComboBoxItem<T>,
   selectedItems: Array<ComboBoxItem<T>>,
-) =>
-  selectedItems.find(
-    (selectedItem) =>
-      selectedItem.label === targetItem.label && selectedItem.value === targetItem.value,
-  ) !== undefined
+) => selectedItems.some((item) => areComboBoxItemsEqual(item, targetItem))
 
 export function useOptions<T>({
   items,
@@ -45,7 +41,7 @@ export function useOptions<T>({
       if (Array.isArray(selected)) {
         return isItemSelected(item, selected)
       } else {
-        return selected !== null && selected.label === item.label
+        return selected !== null && areComboBoxItemsEqual(selected, item)
       }
     },
     [isItemSelected, selected],