{"version":3,"file":"PageHeading.cjs","sources":["../../../../src/components/Heading/PageHeading/PageHeading.tsx"],"sourcesContent":["'use client'\n\nimport { type PropsWithChildren, memo, useEffect, useId, useMemo } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { IS_NEXT_JS } from '../../../libs/nextjs'\nimport { STYLE_TYPE_MAP, Text, type TextProps } from '../../Text'\nimport { VisuallyHiddenText, visuallyHiddenTextClassName } from '../../VisuallyHiddenText'\n\nimport type { ElementProps } from '../Heading'\n\nexport type AbstractProps = PropsWithChildren<{\n  /**\n   * テキストのサイズ\n   *\n   * @default 'XL'\n   */\n  size?: Extract<TextProps['size'], 'XXL' | 'XL' | 'L'>\n  /** 視覚的に非表示にするフラグ */\n  visuallyHidden?: boolean\n  /**\n   * title要素の自動生成フラグ\n   *\n   * Next.js 環境ではこの値にかかわらずtitleは自動生成されません。metadataなどの方法を利用してください。\n   */\n  autoPageTitle?: boolean\n  /** title要素のprefix */\n  pageTitle?: string\n  /** title要素のsuffix */\n  pageTitleSuffix?: string\n}>\ntype Props = AbstractProps & Omit<ElementProps, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  base: 'smarthr-ui-Heading smarthr-ui-PageHeading',\n  variants: {\n    visuallyHidden: {\n      false: 'shr-m-[unset]',\n    },\n  },\n  defaultVariants: {\n    visuallyHidden: false,\n  },\n})\n\nexport const PageHeading = memo<Props>(\n  ({\n    size,\n    className,\n    visuallyHidden,\n    autoPageTitle = true,\n    pageTitleSuffix = 'SmartHR（スマートHR）',\n    pageTitle,\n    children,\n    ...rest\n  }) => {\n    const actualClassName = useMemo(\n      () => classNameGenerator({ visuallyHidden, className }),\n      [className, visuallyHidden],\n    )\n    const actualTypography = useMemo(() => {\n      const defaultTypography = STYLE_TYPE_MAP.screenTitle\n\n      if (size) {\n        return { ...defaultTypography, size }\n      }\n\n      return defaultTypography\n    }, [size])\n\n    const pseudoTitleId = useId()\n\n    const autoTitleText = useMemo(\n      () =>\n        autoPageTitle && !IS_NEXT_JS\n          ? `${pageTitle || innerText(children)}｜${pageTitleSuffix}`\n          : '',\n      [children, pageTitle, pageTitleSuffix, autoPageTitle],\n    )\n\n    useEffect(() => {\n      if (autoTitleText) {\n        document.title = autoTitleText\n\n        // HINT: SPAで遷移する場合などの対策としてbody直下にaria-liveを仕込む\n        // head内はスクリーンリーダーの変更検知のチェック対象外のため、title要素にaria-liveは設定しない\n        const pseudoTitle: HTMLDivElement = (document.getElementById(pseudoTitleId) ||\n          document.createElement('div')) as HTMLDivElement\n\n        pseudoTitle.setAttribute('id', pseudoTitleId)\n        pseudoTitle.setAttribute('class', visuallyHiddenTextClassName)\n        pseudoTitle.setAttribute('aria-live', 'polite')\n        document.body.prepend(pseudoTitle)\n\n        requestAnimationFrame(() => {\n          pseudoTitle.textContent = autoTitleText\n        })\n\n        return () => {\n          pseudoTitle.remove()\n        }\n      }\n\n      return undefined\n    }, [autoTitleText, pseudoTitleId])\n\n    const Component = visuallyHidden ? VisuallyHiddenText : Text\n\n    return (\n      <Component {...rest} {...actualTypography} as=\"h1\" className={actualClassName}>\n        {children}\n      </Component>\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;;;;AAkCA;AACE;AACA;AACE;AACE;AACD;AACF;AACD;AACE;AACD;AACF;AAEM;;AAeH;AACE;;AAGE;;AAGF;AACF;AAEA;;;AAMM;;;AAMF;;;;AAKE;AAEF;AACA;AACA;AACA;;AAGE;AACF;AAEA;;AAEA;;AAGF;AACF;;AAIA;AAKF;;"}