Merge branch 'refs/heads/master' into HEAD

.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.27.0
+        uses: slackapi/slack-github-action@v2.0.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.27.0
+        uses: slackapi/slack-github-action@v2.0.0
         with:
           channel-id: ${{ github.event.client_payload.channel_id }}
           payload: ${{ github.event.client_payload.say }}

.github/workflows/titleCheck.yml

@@ -15,7 +15,7 @@ jobs:
         env:
           PR_TITLE: ${{ github.event.pull_request.title }}
         run: |
-          regex="^(feat|fix|docs|chore|style|refactor|perf|test)!?(\([^\)]+\))?:[[:space:]].+"
+          regex="^(feat|fix|docs|chore|style|refactor|perf|test)(\([^\)]+\))?!?:[[:space:]].+"
           if [[ "$PR_TITLE" =~ $regex ]]; then
               echo OK
           else

package.json

@@ -7,8 +7,8 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "eslint": "^8.57.0",
-    "eslint-config-smarthr": "^7.1.0",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-config-smarthr": "^7.2.0",
+    "eslint-plugin-storybook": "^0.11.1",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
@@ -27,15 +27,16 @@
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "prepare": "husky"
   },
-  "packageManager": "pnpm@9.12.3",
+  "packageManager": "pnpm@9.13.2",
   "pnpm": {
     "overrides": {
       "@babel/helper-compilation-targets": "^7.25.9",
       "@types/react": "^18.3.12",
       "minimist": "1.2.8",
       "react": "^18.3.1",
       "react-dom": "^18.3.1",
-      "micromatch@<4.0.8": ">=4.0.8"
+      "micromatch@<4.0.8": ">=4.0.8",
+      "cross-spawn@<7.0.5": ">=7.0.5"
     }
   }
 }

packages/smarthr-ui/package.json

@@ -14,32 +14,32 @@
     "react-innertext": "^1.1.5",
     "react-transition-group": "^4.4.5",
     "tailwind-variants": "^0.3.0",
-    "tailwindcss": "^3.4.14"
+    "tailwindcss": "^3.4.15"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@storybook/addon-a11y": "^8.4.2",
-    "@storybook/addon-actions": "^8.4.2",
-    "@storybook/addon-essentials": "^8.4.2",
-    "@storybook/addon-interactions": "^8.4.2",
-    "@storybook/addon-storysource": "^8.4.2",
+    "@storybook/addon-a11y": "^8.4.4",
+    "@storybook/addon-actions": "^8.4.4",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-storysource": "^8.4.4",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-viewport": "^8.4.2",
+    "@storybook/addon-viewport": "^8.4.4",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.4.2",
-    "@storybook/cli": "^8.4.2",
-    "@storybook/manager-api": "^8.4.2",
-    "@storybook/react": "^8.4.2",
-    "@storybook/react-webpack5": "^8.4.2",
-    "@storybook/source-loader": "^8.4.2",
-    "@storybook/test": "^8.4.2",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/cli": "^8.4.4",
+    "@storybook/manager-api": "^8.4.4",
+    "@storybook/react": "^8.4.4",
+    "@storybook/react-webpack5": "^8.4.4",
+    "@storybook/source-loader": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/theming": "^8.4.2",
-    "@swc/core": "^1.8.0",
+    "@storybook/theming": "^8.4.4",
+    "@swc/core": "^1.9.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@types/lodash.merge": "^4.6.9",
@@ -56,7 +56,7 @@
     "babel-plugin-polyfill-corejs2": "^0.4.12",
     "babel-plugin-polyfill-regenerator": "^0.6.3",
     "css-loader": "^7.1.2",
-    "chromatic": "^11.16.5",
+    "chromatic": "^11.18.1",
     "ecma-version-validator-webpack-plugin": "^1.2.1",
     "fs-extra": "^11.2.0",
     "glob": "11.0.0",
@@ -66,7 +66,7 @@
     "npm-run-all": "^4.1.5",
     "playwright": "^1.48.2",
     "plop": "^4.0.1",
-    "postcss": "^8.4.48",
+    "postcss": "^8.4.49",
     "postcss-loader": "^8.1.1",
     "postcss-styled-syntax": "^0.7.0",
     "postcss-syntax": "^0.36.2",
@@ -77,14 +77,14 @@
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "standard-version": "^9.3.2",
-    "storybook": "^8.4.2",
+    "storybook": "^8.4.4",
     "storybook-addon-pseudo-states": "^4.0.2",
     "style-loader": "^4.0.0",
     "styled-components": "^5.3.11",
     "ts-loader": "^9.5.1",
     "ttypescript": "^1.5.15",
     "typescript-plugin-styled-components": "^3.0.0",
-    "vitest": "^2.1.4",
+    "vitest": "^2.1.5",
     "wait-on": "^8.0.1",
     "webpack": "^5.96.1"
   },

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

@@ -1,3 +1,5 @@
+'use client'
+
 import React, { ComponentPropsWithRef, PropsWithChildren, forwardRef, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 

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

@@ -8,36 +8,8 @@ import { Cluster } from '../Layout'
 import { ResponseMessage } from '../ResponseMessage'
 
 const floatArea = tv({
-  base: 'smarthr-ui-FloatArea shr-z-fixed-menu',
+  base: 'smarthr-ui-FloatArea shr-z-fixed-menu shr-sticky -shr-mx-0.5',
   variants: {
-    fixed: {
-      true: 'shr-fixed',
-      false: 'shr-sticky',
-    },
-    top: {
-      0: 'shr-top-0',
-      0.25: 'shr-top-0.25',
-      0.5: 'shr-top-0.5',
-      0.75: 'shr-top-0.75',
-      1: 'shr-top-1',
-      1.25: 'shr-top-1.25',
-      1.5: 'shr-top-1.5',
-      2: 'shr-top-2',
-      2.5: 'shr-top-2.5',
-      3: 'shr-top-3',
-      3.5: 'shr-top-3.5',
-      4: 'shr-top-4',
-      8: 'shr-top-8',
-      X3S: 'shr-top-0.25',
-      XXS: 'shr-top-0.5',
-      XS: 'shr-top-1',
-      S: 'shr-top-1.5',
-      M: 'shr-top-2',
-      L: 'shr-top-2.5',
-      XL: 'shr-top-3',
-      XXL: 'shr-top-3.5',
-      X3L: 'shr-top-4',
-    } as { [key in Gap]: string },
     bottom: {
       0: 'shr-bottom-0',
       0.25: 'shr-bottom-0.25',
@@ -63,11 +35,12 @@ const floatArea = tv({
       X3L: 'shr-bottom-4',
     } as { [key in Gap]: string },
   },
+  defaultVariants: {
+    bottom: 1.5,
+  },
 })
 
 type StyleProps = {
-  /** コンポーネントの上端から、包含ブロックの上端までの間隔（基準フォントサイズの相対値または抽象値） */
-  top?: CharRelativeSize | AbstractSize
   /** コンポーネントの下端から、包含ブロックの下端までの間隔（基準フォントサイズの相対値または抽象値） */
   bottom?: CharRelativeSize | AbstractSize
   /** コンポーネントの `z-index` 値 */
@@ -82,10 +55,6 @@ type Props = StyleProps & {
   tertiaryButton?: ReactNode
   /** 操作に対するフィードバックメッセージ */
   responseMessage?: ResponseMessageType
-  /** 上下の位置を固定するかどうか */
-  fixed?: boolean
-  /** コンポーネントの幅 */
-  width?: string
 }
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>
 
@@ -94,29 +63,27 @@ export const FloatArea: FC<Props & ElementProps> = ({
   secondaryButton,
   tertiaryButton,
   responseMessage,
-  fixed = false,
-  className,
-  top,
   bottom,
-  width,
   zIndex,
+  style,
+  className,
   ...rest
 }) => {
   const styleProps = useMemo(
     () => ({
-      className: floatArea({
-        fixed,
-        top,
-        bottom,
-        className,
-      }),
-      style: { width, zIndex },
+      style: { ...style, zIndex },
     }),
-    [className, bottom, fixed, top, width, zIndex],
+    [style, zIndex],
   )
 
   return (
-    <Base {...styleProps} {...rest} layer={3} padding={1}>
+    <Base
+      {...styleProps}
+      {...rest}
+      className={floatArea({ bottom, className })}
+      layer={3}
+      padding={1}
+    >
       <Cluster gap={1}>
         {tertiaryButton}
         <div className="shr-ms-auto">