Merge branch 'master' into add-app-header

kufu · Dec 23, 2024 · ad7d867 · ad7d867
2 parents c15e29d + bca802b
commit ad7d867
Show file tree

Hide file tree

Showing 25 changed files with 544 additions and 168 deletions.
diff --git a/.github/workflows/publishRelease.yml b/.github/workflows/publishRelease.yml
@@ -37,11 +37,11 @@ jobs:
       - run: pnpm publish --filter smarthr-ui --no-git-checks
         if: ${{ env.IS_PRERELEASE == 'false' }}
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.KUFU_NPM_RELEASE_TOKEN }}
       - run: pnpm publish --filter smarthr-ui --tag prerelease --no-git-checks
         if: ${{ env.IS_PRERELEASE == 'true' }}
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.KUFU_NPM_RELEASE_TOKEN }}
       - run: echo NEW_TAG=$(git describe) >> $GITHUB_ENV
       - run: git push origin $NEW_TAG
       - run: npx ts-node ./packages/smarthr-ui/scripts/getLatestChangelog.ts > ${{ env.CHANGELOG_PATH }}
@@ -73,5 +73,6 @@ jobs:
         uses: slackapi/[email protected]
         with:
           webhook: ${{ secrets.SLACK_WEBHOOK_URL }}
+          webhook-type: webhook-trigger
           payload: |
             text: "<!subteam^S01RJL6PHJ8> npm publish が完了しました。Release Pull Request を手動でマージしたらリリース完了です。"
diff --git a/.github/workflows/startRelease.yml b/.github/workflows/startRelease.yml
@@ -74,6 +74,4 @@ jobs:
         with:
           method: chat.postMessage
           token: ${{ secrets.SLACK_BOT_TOKEN }}
-          payload: |
-            channel: ${{ github.event.client_payload.channel_id }}
-            text: ${{ github.event.client_payload.say }}
+          payload: ${{ github.event.client_payload.say }}
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
   "pnpm": {
     "overrides": {
       "@babel/helper-compilation-targets": "^7.25.9",
-      "@types/react": "^18.3.16",
+      "@types/react": "^18.3.17",
       "minimist": "1.2.8",
       "react": "^19.0.0",
       "react-dom": "^19.0.0",

diff --git a/packages/smarthr-ui/CHANGELOG.md b/packages/smarthr-ui/CHANGELOG.md
@@ -2,6 +2,30 @@
 
 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.
 
+### [62.2.3](https://github.com/kufu/smarthr-ui/compare/v62.2.2...v62.2.3) (2024-12-18)
+
+
+### Bug Fixes
+
+* **FormDialog:** コンテンツがスクロールできるよう修正 ([#5192](https://github.com/kufu/smarthr-ui/issues/5192)) ([2af1c20](https://github.com/kufu/smarthr-ui/commit/2af1c20cf5cbab08e58caa0917ad546b62ba49ed))
+* **ModelessDialog:** modeless dialog閉じたときのフォーカス処理修正 ([#5177](https://github.com/kufu/smarthr-ui/issues/5177)) ([1590159](https://github.com/kufu/smarthr-ui/commit/15901594157eb4ecea0667dc492a5f0292bb3abe))
+* **Textarea:** 最大文字数を超えたエラーを色以外でも表現する ([#5084](https://github.com/kufu/smarthr-ui/issues/5084)) ([0cc1ab4](https://github.com/kufu/smarthr-ui/commit/0cc1ab4813f7c7c363d568e225d335619d207779))
+
+### [62.2.2](https://github.com/kufu/smarthr-ui/compare/v62.2.1...v62.2.2) (2024-12-18)
+
+
+### Bug Fixes
+
+* **Th:** ソートアイコンが左寄せになっていたのを修正 ([#5205](https://github.com/kufu/smarthr-ui/issues/5205)) ([85a29ec](https://github.com/kufu/smarthr-ui/commit/85a29ece8ad4ec522f01eee27414aaada7c93fe7))
+
+### [62.2.1](https://github.com/kufu/smarthr-ui/compare/v62.2.0...v62.2.1) (2024-12-17)
+
+
+### Bug Fixes
+
+* **EmptyTableBody:** 文字列が中央揃えになるよう修正 ([#5186](https://github.com/kufu/smarthr-ui/issues/5186)) ([d10d1be](https://github.com/kufu/smarthr-ui/commit/d10d1be73b794ac04939ab9d3a6efd89b97fdc43))
+* nanoidのバージョンを3.3.8にあげる ([#5187](https://github.com/kufu/smarthr-ui/issues/5187)) ([1af0bff](https://github.com/kufu/smarthr-ui/commit/1af0bff2446b09d84eac98974ecb2489c02fd0c4))
+
 ## [62.2.0](https://github.com/kufu/smarthr-ui/compare/v62.1.1...v62.2.0) (2024-12-10)
 
 

diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "smarthr-ui",
   "description": "SmartHR ui components built with React.",
-  "version": "62.2.0",
+  "version": "62.2.3",
   "author": "SmartHR-UI Team",
   "dependencies": {
     "@smarthr/wareki": "^1.3.0",
@@ -14,7 +14,7 @@
     "react-innertext": "^1.1.5",
     "react-transition-group": "^4.4.5",
     "tailwind-variants": "^0.3.0",
-    "tailwindcss": "^3.4.16"
+    "tailwindcss": "^3.4.17"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",
@@ -45,7 +45,7 @@
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
     "@types/node": "^20.17.10",
-    "@types/react": "^18.3.16",
+    "@types/react": "^18.3.18",
     "@types/react-dom": "^19.0.2",
     "@types/react-test-renderer": "^19.0.0",
     "@types/react-transition-group": "^4.4.12",
@@ -63,7 +63,7 @@
     "http-server": "^14.1.1",
     "jsdom": "^25.0.1",
     "memory-fs": "^0.5.0",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^7.0.2",
     "playwright": "^1.49.1",
     "plop": "^4.0.1",
     "postcss": "^8.4.49",

diff --git a/packages/smarthr-ui/public/exports/smarthr-ui-props.json b/packages/smarthr-ui/public/exports/smarthr-ui-props.json
diff --git a/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx b/packages/smarthr-ui/src/components/DatePicker/DatePicker.tsx
@@ -76,6 +76,7 @@ const datePicker = tv({
   },
 })
 
+/** @deprecated DatePicker は非推奨です。Input[type=date] を使ってください。 */
 export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
   (
     {

diff --git a/packages/smarthr-ui/src/components/DatePicker/stories/DatePicker.stories.tsx b/packages/smarthr-ui/src/components/DatePicker/stories/DatePicker.stories.tsx
@@ -8,7 +8,7 @@ import { DatePicker } from '../DatePicker'
 import type { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Forms（フォーム）/DatePicker',
+  title: 'Forms（フォーム）/DatePicker（非推奨）',
   component: DatePicker,
   render: (args) => <DatePicker {...args} />,
   args: {},
@@ -20,6 +20,7 @@ export default {
   parameters: {
     chromatic: { disableSnapshot: true },
   },
+  tags: ['skip-test-runner'],
 } satisfies Meta<typeof DatePicker>
 
 export const Playground: StoryObj<typeof DatePicker> = {

diff --git a/packages/smarthr-ui/src/components/DatePicker/stories/VRTDatePicker.stories.tsx b/packages/smarthr-ui/src/components/DatePicker/stories/VRTDatePicker.stories.tsx
@@ -11,7 +11,7 @@ import { DatePicker } from '../DatePicker'
 import type { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Forms（フォーム）/DatePicker/VRT',
+  title: 'Forms（フォーム）/DatePicker（非推奨）/VRT',
   component: DatePicker,
   render: (args) => {
     const value = '2024/11/06'
@@ -55,7 +55,7 @@ export default {
   parameters: {
     chromatic: { disableSnapshot: false },
   },
-  tags: ['!autodocs'],
+  tags: ['!autodocs', 'skip-test-runner'],
 } satisfies Meta<typeof DatePicker>
 
 export const VRT = {}

diff --git a/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx b/packages/smarthr-ui/src/components/Dialog/FormDialog/FormDialogContentInner.tsx
@@ -5,6 +5,7 @@ import React, {
   type ReactNode,
   useCallback,
 } from 'react'
+import { tv } from 'tailwind-variants'
 
 import { Button } from '../../Button'
 import { Cluster, Stack } from '../../Layout'
@@ -46,6 +47,17 @@ export type FormDialogContentInnerProps = BaseProps & {
 
 const CLOSE_BUTTON_LABEL = 'キャンセル'
 
+const formDialogContentInner = tv({
+  extend: dialogContentInner,
+  slots: {
+    // 領域を狭くしたときにwrapperも縮むようにflexを使用
+    wrapper: 'shr-flex shr-flex-col',
+    // 領域を狭くしたときにwrapperも縮むようにflexを使用
+    form: 'shr-overflow-y-auto shr-flex-auto shr-flex shr-flex-col',
+    contentWrapper: 'shr-overflow-y-auto shr-flex-auto',
+  },
+})
+
 export const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({
   children,
   title,
@@ -76,48 +88,49 @@ export const FormDialogContentInner: FC<FormDialogContentInnerProps> = ({
   )
   const isRequestProcessing = responseMessage && responseMessage.status === 'processing'
 
-  const { wrapper, actionArea, buttonArea, message } = dialogContentInner()
+  const { form, contentWrapper, wrapper, actionArea, buttonArea, message } =
+    formDialogContentInner()
 
   return (
     // eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content, smarthr/a11y-prohibit-sectioning-content-in-form
-    <Section>
+    <Section className={wrapper()}>
       <DialogHeader title={title} subtitle={subtitle} titleTag={titleTag} titleId={titleId} />
-      <form onSubmit={handleSubmitAction}>
-        <div className={wrapper()}>
+      <form onSubmit={handleSubmitAction} className={form()}>
+        <div className={contentWrapper()}>
           <DialogBody contentPadding={contentPadding} contentBgColor={contentBgColor}>
             {children}
           </DialogBody>
-          <Stack gap={0.5} className={actionArea()}>
-            <Cluster justify="space-between">
-              {subActionArea}
-              <Cluster gap={{ row: 0.5, column: 1 }} className={buttonArea()}>
-                <Button
-                  onClick={onClickClose}
-                  disabled={closeDisabled || isRequestProcessing}
-                  className="smarthr-ui-Dialog-closeButton"
-                >
-                  {decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL}
-                </Button>
-                <Button
-                  type="submit"
-                  variant={actionTheme}
-                  disabled={actionDisabled}
-                  loading={isRequestProcessing}
-                  className="smarthr-ui-Dialog-actionButton"
-                >
-                  {actionText}
-                </Button>
-              </Cluster>
-            </Cluster>
-            {(responseMessage?.status === 'success' || responseMessage?.status === 'error') && (
-              <div className={message()}>
-                <ResponseMessage type={responseMessage.status} role="alert">
-                  {responseMessage.text}
-                </ResponseMessage>
-              </div>
-            )}
-          </Stack>
         </div>
+        <Stack gap={0.5} className={actionArea()}>
+          <Cluster justify="space-between">
+            {subActionArea}
+            <Cluster gap={{ row: 0.5, column: 1 }} className={buttonArea()}>
+              <Button
+                onClick={onClickClose}
+                disabled={closeDisabled || isRequestProcessing}
+                className="smarthr-ui-Dialog-closeButton"
+              >
+                {decorators?.closeButtonLabel?.(CLOSE_BUTTON_LABEL) || CLOSE_BUTTON_LABEL}
+              </Button>
+              <Button
+                type="submit"
+                variant={actionTheme}
+                disabled={actionDisabled}
+                loading={isRequestProcessing}
+                className="smarthr-ui-Dialog-actionButton"
+              >
+                {actionText}
+              </Button>
+            </Cluster>
+          </Cluster>
+          {(responseMessage?.status === 'success' || responseMessage?.status === 'error') && (
+            <div className={message()}>
+              <ResponseMessage type={responseMessage.status} role="alert">
+                {responseMessage.text}
+              </ResponseMessage>
+            </div>
+          )}
+        </Stack>
       </form>
     </Section>
   )

diff --git a/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx b/packages/smarthr-ui/src/components/Dialog/ModelessDialog.tsx
@@ -127,7 +127,6 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
   contentPadding,
   footer,
   isOpen,
-  onClickClose,
   onPressEscape,
   resizable = false,
   width,
@@ -143,6 +142,7 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
   ...props
 }) => {
   const labelId = useId()
+  const lastFocusElementRef = useRef<HTMLElement | null>(null)
   const { createPortal } = useDialogPortal(portalParent, id)
 
   const {
@@ -310,14 +310,39 @@ export const ModelessDialog: FC<Props & BaseElementProps & VariantProps<typeof m
     }
   }, [isOpen])
 
+  const onClickClose = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      lastFocusElementRef.current?.focus()
+      props.onClickClose?.(e)
+    },
+    [props],
+  )
+
   useHandleEscape(
     useCallback(() => {
       if (isOpen && onPressEscape) {
+        lastFocusElementRef.current?.focus()
         onPressEscape()
       }
     }, [isOpen, onPressEscape]),
   )
 
+  useEffect(() => {
+    const focusHandler = (e: FocusEvent) => {
+      if (!(e.target instanceof HTMLElement)) return
+
+      // e.target(現在フォーカスがあたっている要素)がModeless dialogの中の要素であれば、lastFocusElementRefに代入しない
+      if (wrapperRef?.current?.contains(e.target)) {
+        return
+      }
+
+      lastFocusElementRef.current = e.target
+    }
+
+    document.addEventListener('focus', focusHandler, true)
+    return () => document.removeEventListener('focus', focusHandler, true)
+  }, [])
+
   return createPortal(
     <DialogOverlap isOpen={isOpen} className={overlapStyle}>
       <Draggable

diff --git a/packages/smarthr-ui/src/components/Input/stories/Input.stories.tsx b/packages/smarthr-ui/src/components/Input/stories/Input.stories.tsx
@@ -49,10 +49,15 @@ export const Type: StoryObj<typeof Input> = {
   name: 'type',
   render: (args) => (
     <Stack>
-      {[undefined, 'text', 'number', 'password'].map((type) => (
-        // eslint-disable-next-line smarthr/a11y-input-in-form-control
-        <Input {...args} type={type} key={type} />
-      ))}
+      {[undefined, 'text', 'number', 'password', 'date', 'datetime-local', 'time', 'month'].map(
+        (type) => (
+          <label key={type}>
+            {`${type ?? '未指定'}： `}
+            {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
+            <Input {...args} type={type} key={type} />
+          </label>
+        ),
+      )}
     </Stack>
   ),
 }

diff --git a/packages/smarthr-ui/src/components/Picker/DatetimeLocalPicker.tsx b/packages/smarthr-ui/src/components/Picker/DatetimeLocalPicker.tsx
@@ -8,6 +8,7 @@ type Props = {
   error?: boolean
 }
 
+/** @deprecated DatetimeLocalPicker は非推奨です。Input[type="datetime-local"] を使ってください。 */
 export const DatetimeLocalPicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
   ({ disabled, error, readOnly, className, ...rest }, ref) => {
     const { wrapperStyle, innerStyle } = useMemo(() => {

diff --git a/packages/smarthr-ui/src/components/Picker/MonthPicker.tsx b/packages/smarthr-ui/src/components/Picker/MonthPicker.tsx
@@ -8,6 +8,7 @@ type Props = {
   error?: boolean
 }
 
+/** @deprecated MonthPicker は非推奨です。Input[type="month"] を使ってください。 */
 export const MonthPicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
   ({ disabled, error, readOnly, className, ...rest }, ref) => {
     const { wrapperStyle, innerStyle } = useMemo(() => {

diff --git a/packages/smarthr-ui/src/components/Picker/TimePicker.tsx b/packages/smarthr-ui/src/components/Picker/TimePicker.tsx
@@ -8,6 +8,7 @@ type Props = {
   error?: boolean
 }
 
+/** @deprecated TimePicker は非推奨です。Input[type="time"] を使ってください。 */
 export const TimePicker = forwardRef<HTMLInputElement, PickerProps<Props>>(
   ({ disabled, error, readOnly, className, ...rest }, ref) => {
     const { wrapperStyle, innerStyle } = useMemo(() => {

diff --git a/packages/smarthr-ui/src/components/Table/Th.tsx b/packages/smarthr-ui/src/components/Table/Th.tsx
@@ -148,10 +148,10 @@ export const Th: FC<Props & ElementProps> = ({
 }
 
 const sortButton = tv({
-  base: '-shr-mx-1 -shr-my-0.75 shr-inline-flex shr-w-full shr-gap-x-0.5 shr-px-1 shr-py-0.75 shr-font-bold shr-items-center',
+  base: '-shr-mx-1 -shr-my-0.75 shr-inline-flex shr-w-full shr-gap-x-0.5 shr-px-1 shr-py-0.75 shr-font-bold shr-items-center shr-justify-between',
   variants: {
     align: {
-      left: 'shr-justify-between',
+      left: '',
       right: 'shr-justify-end',
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -76,6 +76,7 @@ const datePicker = tv({ @@
       },
     })
+    /** @deprecated DatePicker は非推奨です。Input[type=date] を使ってください。 */
     export const DatePicker = forwardRef<HTMLInputElement, Props & InputAttributes>(
       (
         {
@@ Expand Down @@