Merge branch 'refs/heads/master' into HEAD

package.json

@@ -17,7 +17,7 @@
     "stylelint": "^16.6.1",
     "stylelint-config-prettier": "^9.0.5",
     "stylelint-config-smarthr": "^3.0.1",
-    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard": "^36.0.1",
     "stylelint-config-styled-components": "^0.1.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.5"

packages/smarthr-ui/package.json

@@ -42,13 +42,13 @@
     "@storybook/test": "^8.1.10",
     "@storybook/test-runner": "^0.18.2",
     "@storybook/theming": "^8.1.10",
-    "@swc/core": "^1.6.1",
+    "@swc/core": "^1.6.5",
     "@swc/jest": "^0.2.36",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^29.5.12",
     "@types/lodash.merge": "^4.6.9",
     "@types/lodash.range": "^3.2.9",
-    "@types/node": "^20.14.6",
+    "@types/node": "^20.14.8",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-test-renderer": "^17.0.9",
@@ -73,7 +73,7 @@
     "postcss": "^8.4.38",
     "postcss-styled-syntax": "^0.6.4",
     "postcss-syntax": "^0.36.2",
-    "puppeteer": "^22.11.0",
+    "puppeteer": "^22.11.2",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.3.1",
@@ -89,7 +89,7 @@
     "ttypescript": "^1.5.15",
     "typescript-plugin-styled-components": "^3.0.0",
     "wait-on": "^7.2.0",
-    "webpack": "^5.92.0"
+    "webpack": "^5.92.1"
   },
   "peerDependencies": {
     "react": "16.13.0 || ^17.0.1 || ^18.0.0",

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx

@@ -9,17 +9,18 @@ import React, {
 import { tv } from 'tailwind-variants'
 
 import { getIsInclude, mapToKeyArray } from '../../libs/map'
-import { Heading, HeadingTagTypes, HeadingTypes } from '../Heading'
+import { Heading, HeadingTagTypes } from '../Heading'
 import { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'
 import { Cluster } from '../Layout'
+import { TextProps } from '../Text'
 
 import { AccordionPanelContext } from './AccordionPanel'
 import { AccordionPanelItemContext } from './AccordionPanelItem'
 import { getNewExpandedItems } from './accordionPanelHelper'
 
 type Props = PropsWithChildren<{
   /** ヘッダ部分のテキストのスタイル */
-  headingType?: HeadingTypes
+  headingType?: TextProps['styleType']
   /**
    * @deprecated headingTag属性は非推奨です
    */

packages/smarthr-ui/src/components/ComboBox/VRTMultiCombobox.stories.tsx

@@ -44,6 +44,8 @@ const playMulti = async ({ canvasElement }: { canvasElement: HTMLElement }) => {
   const option2 = await within(body).findByText('option 2')
   await userEvent.click(option2)
   await waitForRAF()
+  const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。')
+  await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する
 }
 VRTMultiCombobox.play = playMulti
 

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

@@ -16,6 +16,11 @@ import { usePortal } from '../../hooks/usePortal'
 
 import { Rect, getFirstTabbable, isEventFromChild } from './dropdownHelper'
 
+type Props = {
+  onOpen?: () => void
+  onClose?: () => void
+}
+
 type DropdownContextType = {
   active: boolean
   triggerRect: Rect
@@ -44,7 +49,7 @@ export const DropdownContext = createContext<DropdownContextType>({
   contentId: '',
 })
 
-export const Dropdown: FC<PropsWithChildren> = ({ children }) => {
+export const Dropdown: FC<PropsWithChildren<Props>> = ({ onOpen, onClose, children }) => {
   const [active, setActive] = useState(false)
   const [triggerRect, setTriggerRect] = useState<Rect>(initialRect)
 
@@ -82,6 +87,15 @@ export const Dropdown: FC<PropsWithChildren> = ({ children }) => {
     },
     [active, createPortal, isPortalRootMounted],
   )
+
+  useEffect(() => {
+    if (isPortalRootMounted()) {
+      if (active) onOpen?.()
+      else onClose?.()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [active])
+
   // set the displayName explicit for DevTools
   DropdownContentRoot.displayName = 'DropdownContentRoot'
 

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

@@ -49,6 +49,8 @@ export const Render: React.FC = () => {
               setValue('hoge')
               setText('')
             }}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             isFiltered={isFiltered}
           >
             <Fieldset
@@ -96,6 +98,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered2}
             onApply={() => setIsFiltered2(true)}
             onReset={() => setIsFiltered2(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
           >
             <p>You can change border color of the trigger button by setting `isFiltered`.</p>
           </FilterDropdown>
@@ -106,6 +110,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered3}
             onApply={() => setIsFiltered3(true)}
             onReset={() => setIsFiltered3(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             hasStatusText
           >
             <p>
@@ -122,6 +128,8 @@ export const Render: React.FC = () => {
               setValue('hoge')
               setText('')
             }}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             isFiltered={isFiltered}
             disabled
           >
@@ -134,6 +142,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered4}
             onApply={() => setIsFiltered4(true)}
             onReset={() => setIsFiltered4(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             hasStatusText
             decorators={{
               status: (txt) => <span data-wovn-enable="true">{`filtered.(${txt})`}</span>,
@@ -154,6 +164,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered4}
             onApply={() => setIsFiltered4(true)}
             onReset={() => setIsFiltered4(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             responseMessage={responseMessage}
           >
             <Stack gap={1}>
@@ -193,6 +205,8 @@ export const Render: React.FC = () => {
             isFiltered={isFiltered2}
             onApply={() => setIsFiltered2(true)}
             onReset={() => setIsFiltered2(false)}
+            onOpen={action('onOpen')}
+            onClose={action('onClose')}
             triggerSize="s"
           >
             <p>You can change border color of the trigger button by setting `isFiltered`.</p>

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

@@ -19,6 +19,8 @@ type Props = {
   onApply: React.MouseEventHandler<HTMLButtonElement>
   onCancel?: React.MouseEventHandler<HTMLButtonElement>
   onReset?: React.MouseEventHandler<HTMLButtonElement>
+  onOpen?: () => void
+  onClose?: () => void
   children: ReactNode
   hasStatusText?: boolean
   decorators?: DecoratorsType<
@@ -73,6 +75,8 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
   onApply,
   onCancel,
   onReset,
+  onOpen,
+  onClose,
   children,
   hasStatusText,
   decorators,
@@ -140,7 +144,7 @@ export const FilterDropdown: FC<Props & ElementProps> = ({
   }, [isFiltered, triggerSize])
 
   return (
-    <Dropdown>
+    <Dropdown onOpen={onOpen} onClose={onClose}>
       <DropdownTrigger>
         <Button
           {...props}

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

@@ -13,14 +13,13 @@ import { useId } from '../../hooks/useId'
 import { MultiComboBox, SingleComboBox } from '../ComboBox'
 import { DatePicker } from '../DatePicker'
 import { DropZone } from '../DropZone'
-import { HeadingTypes } from '../Heading'
 import { FaCircleExclamationIcon } from '../Icon'
 import { CurrencyInput, Input } from '../Input'
 import { InputFile } from '../InputFile'
 import { Cluster, Stack } from '../Layout'
 import { Select } from '../Select'
 import { StatusLabel } from '../StatusLabel'
-import { Text } from '../Text'
+import { Text, TextProps } from '../Text'
 import { Textarea } from '../Textarea'
 import { visuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText'
 
@@ -31,7 +30,7 @@ type Props = PropsWithChildren<{
   /** グループのタイトル名 */
   title: ReactNode
   /** タイトルの見出しのタイプ */
-  titleType?: HeadingTypes
+  titleType?: TextProps['styleType']
   /** タイトルの見出しを視覚的に隠すかどうか */
   dangerouslyTitleHidden?: boolean
   /** label 要素に適用する `htmlFor` 値 */

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

@@ -2,12 +2,12 @@ import React, { ComponentProps, FC, PropsWithChildren, useContext, useMemo } fro
 import { tv } from 'tailwind-variants'
 
 import { LevelContext } from '../SectioningContent'
-import { Text, TextProps } from '../Text'
+import { STYLE_TYPE_MAP, Text, TextProps } from '../Text'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
 export type Props = PropsWithChildren<{
   /** テキストのスタイル */
-  type?: HeadingTypes
+  type?: TextProps['styleType']
   /**
    * @deprecated SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定してください
    */
@@ -16,50 +16,13 @@ export type Props = PropsWithChildren<{
   visuallyHidden?: boolean
 }>
 
-export type HeadingTypes =
-  | 'screenTitle'
-  | 'sectionTitle'
-  | 'blockTitle'
-  | 'subBlockTitle'
-  | 'subSubBlockTitle'
-
 export type HeadingTagTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
 type ElementProps = Omit<
   ComponentProps<'h1'>,
   keyof Props | keyof TextProps | 'role' | 'aria-level'
 >
 
-export const MAPPER_SIZE_AND_WEIGHT: { [key in HeadingTypes]: TextProps } = {
-  screenTitle: {
-    size: 'XL',
-    leading: 'TIGHT',
-    weight: 'normal',
-  },
-  sectionTitle: {
-    size: 'L',
-    leading: 'TIGHT',
-    weight: 'normal',
-  },
-  blockTitle: {
-    size: 'M',
-    leading: 'TIGHT',
-    weight: 'bold',
-  },
-  subBlockTitle: {
-    size: 'M',
-    leading: 'TIGHT',
-    weight: 'bold',
-    color: 'TEXT_GREY',
-  },
-  subSubBlockTitle: {
-    size: 'S',
-    leading: 'TIGHT',
-    weight: 'bold',
-    color: 'TEXT_GREY',
-  },
-}
-
 const generateTagProps = (level: number, tag?: HeadingTagTypes) => {
   let role = undefined
   let ariaLevel = undefined
@@ -101,7 +64,7 @@ export const Heading: FC<Props & ElementProps> = ({
   const styles = useMemo(() => heading({ visuallyHidden, className }), [className, visuallyHidden])
   const actualProps = {
     ...props,
-    ...MAPPER_SIZE_AND_WEIGHT[type],
+    ...STYLE_TYPE_MAP[type],
     ...tagProps,
     className: styles,
   }

packages/smarthr-ui/src/components/Heading/index.ts

@@ -1,2 +1,2 @@
 export { PageHeading, Heading } from './Heading'
-export type { Props, HeadingTypes, HeadingTagTypes } from './Heading'
+export type { Props, HeadingTagTypes } from './Heading'

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

@@ -160,6 +160,7 @@ import {
   FaTableList,
   FaTag,
   FaTags,
+  FaThumbtack,
   FaToolbox,
   FaTrash,
   FaTrashCan,
@@ -348,6 +349,7 @@ export const FaTableIcon = /*#__PURE__*/ createIcon(FaTable)
 export const FaTableListIcon = /*#__PURE__*/ createIcon(FaTableList)
 export const FaTagIcon = /*#__PURE__*/ createIcon(FaTag)
 export const FaTagsIcon = /*#__PURE__*/ createIcon(FaTags)
+export const FaThumbtackIcon = /*#__PURE__*/ createIcon(FaThumbtack)
 export const FaToolboxIcon = /*#__PURE__*/ createIcon(FaToolbox)
 export const FaTrashCanIcon = /*#__PURE__*/ createIcon(FaTrashCan)
 export const FaTrashIcon = /*#__PURE__*/ createIcon(FaTrash)

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

@@ -1,7 +1,42 @@
 import React, { ComponentProps, PropsWithChildren, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { HeadingTypes, MAPPER_SIZE_AND_WEIGHT } from '../Heading/Heading'
+type StyleType =
+  | 'screenTitle'
+  | 'sectionTitle'
+  | 'blockTitle'
+  | 'subBlockTitle'
+  | 'subSubBlockTitle'
+
+export const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof text> } = {
+  screenTitle: {
+    size: 'XL',
+    leading: 'TIGHT',
+    weight: 'normal',
+  },
+  sectionTitle: {
+    size: 'L',
+    leading: 'TIGHT',
+    weight: 'normal',
+  },
+  blockTitle: {
+    size: 'M',
+    leading: 'TIGHT',
+    weight: 'bold',
+  },
+  subBlockTitle: {
+    size: 'M',
+    leading: 'TIGHT',
+    weight: 'bold',
+    color: 'TEXT_GREY',
+  },
+  subSubBlockTitle: {
+    size: 'S',
+    leading: 'TIGHT',
+    weight: 'bold',
+    color: 'TEXT_GREY',
+  },
+}
 
 const text = tv({
   variants: {
@@ -51,8 +86,8 @@ export type TextProps = VariantProps<typeof text> & {
   as?: string | React.ComponentType<any> | undefined
   /** 強調するかどうかの真偽値。指定すると em 要素になる */
   emphasis?: boolean
-  /** 見た目の種類。Heading の種類と同じ */
-  styleType?: HeadingTypes
+  /** 見た目の種類 */
+  styleType?: StyleType
 }
 
 export const Text: React.FC<PropsWithChildren<TextProps & ComponentProps<'span'>>> = ({
@@ -63,7 +98,7 @@ export const Text: React.FC<PropsWithChildren<TextProps & ComponentProps<'span'>
   ...props
 }) => {
   const { size, italic, color, leading, whiteSpace, className, ...others } = props
-  const styleTypeValues = styleType ? MAPPER_SIZE_AND_WEIGHT[styleType] : null
+  const styleTypeValues = styleType ? STYLE_TYPE_MAP[styleType] : null
 
   const styles = useMemo(
     () =>

packages/smarthr-ui/src/components/Text/index.ts

@@ -1,3 +1,3 @@
-export { Text } from './Text'
+export { Text, STYLE_TYPE_MAP } from './Text'
 export { RangeSeparator } from './RangeSeparator'
 export type { TextProps } from './Text'