Merge branch 'refs/heads/master' into HEAD

.circleci/config.yml

@@ -3,19 +3,19 @@ version: 2.1
 executors:
   node-maintenance:
     docker:
-      - image: cimg/node:22.6.0
+      - image: cimg/node:18.20.4
         auth:
           username: smarthrinc
           password: $DOCKER_HUB_ACCESS_TOKEN
   node-active-lts:
     docker:
-      - image: cimg/node:22.6.0
+      - image: cimg/node:20.17.0
         auth:
           username: smarthrinc
           password: $DOCKER_HUB_ACCESS_TOKEN
   node-active-lts-browsers:
     docker:
-      - image: cimg/node:22.6.0-browsers
+      - image: cimg/node:20.17.0-browsers
         auth:
           username: smarthrinc
           password: $DOCKER_HUB_ACCESS_TOKEN

.github/workflows/publishRelease.yml

@@ -70,7 +70,7 @@ jobs:
           branch: 'merge-release-${{ env.NEW_TAG }}'
           labels: release candidate
       - name: Send message to Slack
-        uses: slackapi/slack-github-action@v1.26.0
+        uses: slackapi/slack-github-action@v1.27.0
         with:
           payload: |
             {

.github/workflows/startRelease.yml

@@ -70,7 +70,7 @@ jobs:
           labels: ${{ env.ISSUE_LABELS }}
       - name: Send GitHub Action trigger data to Slack
         if: ${{ github.event.client_payload.channel_id != null }}
-        uses: slackapi/slack-github-action@v1.26.0
+        uses: slackapi/slack-github-action@v1.27.0
         with:
           channel-id: ${{ github.event.client_payload.channel_id }}
           payload: ${{ github.event.client_payload.say }}

package.json

@@ -4,13 +4,13 @@
   "description": "SmartHR ui components built with React.",
   "author": "SmartHR-UI Team",
   "devDependencies": {
-    "@commitlint/cli": "^19.4.0",
+    "@commitlint/cli": "^19.4.1",
     "@commitlint/config-conventional": "^19.2.2",
     "eslint": "^8.57.0",
     "eslint-config-smarthr": "^6.33.0",
     "eslint-plugin-storybook": "^0.8.0",
-    "husky": "^9.1.4",
-    "lint-staged": "^15.2.9",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "prettier-config-smarthr": "^1.0.0",
     "prettier-plugin-tailwindcss": "^0.6.6",

packages/smarthr-ui/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<style>
+  /* for https://github.com/kufu/smarthr-ui/pull/4859 */
+  code {
+    font-family: 'Courier New', Courier, monospace;
+  }
+</style>

packages/smarthr-ui/package.json

@@ -5,23 +5,20 @@
   "author": "SmartHR-UI Team",
   "dependencies": {
     "@smarthr/wareki": "^1.2.0",
-    "css-loader": "^7.1.2",
     "dayjs": "^1.11.13",
     "lodash.merge": "^4.6.2",
     "lodash.range": "^3.2.0",
     "polished": "^4.3.0",
-    "postcss-loader": "^8.1.1",
     "react-draggable": "^4.4.6",
     "react-icons": "^5.3.0",
     "react-innertext": "^1.1.5",
     "react-transition-group": "^4.4.5",
-    "style-loader": "^4.0.0",
     "tailwind-variants": "^0.2.1",
     "tailwindcss": "^3.4.10"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@storybook/addon-a11y": "^8.2.9",
@@ -42,23 +39,24 @@
     "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
     "@storybook/theming": "^8.2.9",
-    "@swc/core": "^1.7.12",
+    "@swc/core": "^1.7.22",
     "@swc/jest": "^0.2.36",
-    "@testing-library/react": "^16.0.0",
+    "@testing-library/react": "^16.0.1",
     "@types/jest": "^29.5.12",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/node": "^20.14.15",
-    "@types/react": "^18.3.3",
+    "@types/node": "^20.16.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^17.0.9",
     "@types/react-transition-group": "^4.4.11",
     "@types/styled-components": "^5.1.34",
     "autoprefixer": "^10.4.20",
-    "axe-playwright": "^2.0.1",
+    "axe-playwright": "^2.0.2",
     "babel-loader": "^9.1.3",
     "babel-plugin-polyfill-corejs2": "^0.4.11",
     "babel-plugin-polyfill-regenerator": "^0.6.2",
+    "css-loader": "^7.1.2",
     "chromatic": "^11.7.1",
     "ecma-version-validator-webpack-plugin": "^1.2.1",
     "fs-extra": "^11.2.0",
@@ -70,7 +68,8 @@
     "memory-fs": "^0.5.0",
     "npm-run-all": "^4.1.5",
     "playwright": "^1.46.1",
-    "postcss": "^8.4.41",
+    "postcss": "^8.4.43",
+    "postcss-loader": "^8.1.1",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-syntax": "^0.36.2",
     "react": "^18.3.1",
@@ -81,8 +80,9 @@
     "rimraf": "^6.0.1",
     "standard-version": "^9.3.2",
     "storybook": "^8.2.9",
-    "storybook-addon-pseudo-states": "^3.1.1",
+    "storybook-addon-pseudo-states": "^4.0.0",
     "styled-components": "^5.3.11",
+    "style-loader": "^4.0.0",
     "testcafe": "3.6.2",
     "ts-loader": "^9.5.1",
     "ttypescript": "^1.5.15",

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

@@ -13,7 +13,7 @@ import { VariantProps, tv } from 'tailwind-variants'
 
 import { BaseColumn } from '../Base'
 import { Button } from '../Button'
-import { FaFolderOpenIcon, FaTrashAltIcon } from '../Icon'
+import { FaFolderOpenIcon, FaTrashCanIcon } from '../Icon'
 import { Stack } from '../Layout'
 
 import type { DecoratorsType } from '../../types'
@@ -161,7 +161,7 @@ export const InputFile = forwardRef<HTMLInputElement, Props & ElementProps>(
                 <span className="smarthr-ui-InputFile-fileName">{file.name}</span>
                 <Button
                   variant="text"
-                  prefix={<FaTrashAltIcon />}
+                  prefix={<FaTrashCanIcon />}
                   onClick={() => handleDelete(index)}
                   className="smarthr-ui-InputFile-deleteButton"
                 >

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

@@ -21,9 +21,15 @@ const SectioningContent = forwardRef<HTMLElement, SectioningContentProps>(
 type Props = Omit<React.ComponentProps<typeof SectioningContent>, 'as'>
 
 export const Section: FC<Props> = SectioningContent
-export const Article: FC<Props> = (props) => <SectioningContent {...props} as="article" />
-export const Aside: FC<Props> = (props) => <SectioningContent {...props} as="aside" />
-export const Nav: FC<Props> = (props) => <SectioningContent {...props} as="nav" />
+export const Article: FC<Props> = forwardRef<HTMLElement, Props>((props, ref) => (
+  <SectioningContent {...props} ref={ref} as="article" />
+))
+export const Aside: FC<Props> = forwardRef<HTMLElement, Props>((props, ref) => (
+  <SectioningContent {...props} ref={ref} as="aside" />
+))
+export const Nav: FC<Props> = forwardRef<HTMLElement, Props>((props, ref) => (
+  <SectioningContent {...props} ref={ref} as="nav" />
+))
 
 export const SectioningFragment: FC<PropsWithChildren<{ baseLevel?: number }>> = ({
   children,

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

@@ -16,7 +16,7 @@ const timePicker = tv({
       'focus-within:shr-focus-indicator',
     ],
     inner: [
-      'shr-border-none shr-text-base shr-bg-transparent shr-text-black shr-outline-none shr-outline-0 shr-p-[unset] shr-py-0.75 shr-h-[theme(fontSize.base)] shr-tabular-nums',
+      'shr-border-none shr-text-base disabled:shr-text-disabled shr-bg-transparent shr-text-black shr-outline-none shr-outline-0 shr-p-[unset] shr-py-0.75 shr-h-[theme(fontSize.base)] shr-tabular-nums',
     ],
   },
   variants: {