smarthr-ui 75.4.1 → 76.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/components/AppHeader/AppHeader.js +3 -7
- package/esm/components/AppHeader/AppHeader.js.map +1 -1
- package/esm/components/AppHeader/components/desktop/DesktopHeader.js +4 -6
- package/esm/components/AppHeader/components/desktop/DesktopHeader.js.map +1 -1
- package/esm/components/AppHeader/components/mobile/LanguageSelector.js +13 -7
- package/esm/components/AppHeader/components/mobile/LanguageSelector.js.map +1 -1
- package/esm/components/AppHeader/components/mobile/MobileHeader.js +1 -3
- package/esm/components/AppHeader/components/mobile/MobileHeader.js.map +1 -1
- package/esm/components/AppHeader/components/mobile/UserInfo.js +3 -5
- package/esm/components/AppHeader/components/mobile/UserInfo.js.map +1 -1
- package/esm/components/AppHeader/stories/args.js +0 -1
- package/esm/components/AppHeader/stories/args.js.map +1 -1
- package/esm/components/AppHeader/types.d.ts +1 -2
- package/esm/components/Header/LanguageSwitcher/LanguageSwitcher.d.ts +2 -2
- package/esm/components/Header/LanguageSwitcher/LanguageSwitcher.js +3 -3
- package/esm/components/Header/LanguageSwitcher/LanguageSwitcher.js.map +1 -1
- package/esm/components/SpreadsheetTable/SpreadsheetTable.js +1 -1
- package/esm/components/SpreadsheetTable/SpreadsheetTable.js.map +1 -1
- package/esm/intl/IntlProvider.d.ts +4 -4
- package/esm/intl/IntlProvider.js +2 -1
- package/esm/intl/IntlProvider.js.map +1 -1
- package/esm/intl/localeMap.d.ts +3 -0
- package/esm/{components/AppHeader/multilingualization → intl}/localeMap.js +3 -2
- package/esm/intl/localeMap.js.map +1 -0
- package/esm/types/index.d.ts +0 -1
- package/lib/components/AppHeader/AppHeader.js +2 -4
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/AppHeader/components/desktop/DesktopHeader.js +4 -6
- package/lib/components/AppHeader/components/desktop/DesktopHeader.js.map +1 -1
- package/lib/components/AppHeader/components/mobile/LanguageSelector.js +11 -7
- package/lib/components/AppHeader/components/mobile/LanguageSelector.js.map +1 -1
- package/lib/components/AppHeader/components/mobile/MobileHeader.js +1 -3
- package/lib/components/AppHeader/components/mobile/MobileHeader.js.map +1 -1
- package/lib/components/AppHeader/components/mobile/UserInfo.js +3 -5
- package/lib/components/AppHeader/components/mobile/UserInfo.js.map +1 -1
- package/lib/components/AppHeader/stories/args.js +0 -1
- package/lib/components/AppHeader/stories/args.js.map +1 -1
- package/lib/components/AppHeader/types.d.ts +1 -2
- package/lib/components/AppHeader/types.js.map +1 -1
- package/lib/components/Header/LanguageSwitcher/LanguageSwitcher.d.ts +2 -2
- package/lib/components/Header/LanguageSwitcher/LanguageSwitcher.js +3 -3
- package/lib/components/Header/LanguageSwitcher/LanguageSwitcher.js.map +1 -1
- package/lib/components/SpreadsheetTable/SpreadsheetTable.js +1 -1
- package/lib/components/SpreadsheetTable/SpreadsheetTable.js.map +1 -1
- package/lib/intl/IntlProvider.d.ts +4 -4
- package/lib/intl/IntlProvider.js +2 -1
- package/lib/intl/IntlProvider.js.map +1 -1
- package/lib/intl/localeMap.d.ts +3 -0
- package/lib/{components/AppHeader/multilingualization → intl}/localeMap.js +3 -2
- package/lib/intl/localeMap.js.map +1 -0
- package/lib/types/index.d.ts +0 -1
- package/lib/types/index.js.map +1 -1
- package/package.json +1 -1
- package/smarthr-ui.css +2 -2
- package/esm/components/AppHeader/hooks/useLocale.d.ts +0 -11
- package/esm/components/AppHeader/hooks/useLocale.js +0 -11
- package/esm/components/AppHeader/hooks/useLocale.js.map +0 -1
- package/esm/components/AppHeader/multilingualization/index.d.ts +0 -2
- package/esm/components/AppHeader/multilingualization/index.js +0 -2
- package/esm/components/AppHeader/multilingualization/index.js.map +0 -1
- package/esm/components/AppHeader/multilingualization/localeMap.d.ts +0 -10
- package/esm/components/AppHeader/multilingualization/localeMap.js.map +0 -1
- package/esm/components/AppHeader/multilingualization/types.d.ts +0 -3
- package/esm/components/AppHeader/multilingualization/types.js +0 -4
- package/esm/components/AppHeader/multilingualization/types.js.map +0 -1
- package/esm/types/Locale.d.ts +0 -3
- package/esm/types/Locale.js +0 -2
- package/esm/types/Locale.js.map +0 -1
- package/lib/components/AppHeader/hooks/useLocale.d.ts +0 -11
- package/lib/components/AppHeader/hooks/useLocale.js +0 -13
- package/lib/components/AppHeader/hooks/useLocale.js.map +0 -1
- package/lib/components/AppHeader/multilingualization/index.d.ts +0 -2
- package/lib/components/AppHeader/multilingualization/index.js +0 -6
- package/lib/components/AppHeader/multilingualization/index.js.map +0 -1
- package/lib/components/AppHeader/multilingualization/localeMap.d.ts +0 -10
- package/lib/components/AppHeader/multilingualization/localeMap.js.map +0 -1
- package/lib/components/AppHeader/multilingualization/types.d.ts +0 -3
- package/lib/components/AppHeader/multilingualization/types.js +0 -5
- package/lib/components/AppHeader/multilingualization/types.js.map +0 -1
- package/lib/types/Locale.d.ts +0 -3
- package/lib/types/Locale.js +0 -3
- package/lib/types/Locale.js.map +0 -1
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import { IntlProvider } from '../../intl/IntlProvider.js';
|
|
4
|
-
import 'react';
|
|
5
|
-
import 'react-intl';
|
|
2
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
6
3
|
import { DesktopHeader } from './components/desktop/DesktopHeader.js';
|
|
7
4
|
import { MobileHeader } from './components/mobile/MobileHeader.js';
|
|
8
|
-
import { LocaleContextProvider } from './hooks/useLocale.js';
|
|
9
5
|
import { useMediaQuery, mediaQuery } from './hooks/useMediaQuery.js';
|
|
10
6
|
|
|
11
|
-
const AppHeader = ({
|
|
7
|
+
const AppHeader = ({ children, ...props }) => {
|
|
12
8
|
// NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、
|
|
13
9
|
// wovn の言語切替カスタム UI の挿入対象となる DOM ("wovn-embedded-widget-anchor" クラスを持った div) が複数描画されていると、
|
|
14
10
|
// wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。
|
|
15
11
|
const isDesktop = useMediaQuery(mediaQuery.desktop);
|
|
16
12
|
// HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています
|
|
17
13
|
// 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです
|
|
18
|
-
return (
|
|
14
|
+
return (jsxs(Fragment, { children: [jsx(DesktopHeader, { ...props, children: isDesktop ? children : undefined }), jsx(MobileHeader, { ...props, children: isDesktop ? undefined : children })] }));
|
|
19
15
|
};
|
|
20
16
|
|
|
21
17
|
export { AppHeader };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client'\n\nimport {
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"sourcesContent":["'use client'\n\nimport { DesktopHeader } from './components/desktop/DesktopHeader'\nimport { MobileHeader } from './components/mobile/MobileHeader'\nimport { mediaQuery, useMediaQuery } from './hooks/useMediaQuery'\n\nimport type { HeaderProps } from './types'\nimport type { FC } from 'react'\n\nexport const AppHeader: FC<HeaderProps> = ({ children, ...props }) => {\n // NOTE: ヘッダーの出し分けは CSS によって行われているので、useMediaQuery による children の出し分けは本来不要ですが、\n // wovn の言語切替カスタム UI の挿入対象となる DOM (\"wovn-embedded-widget-anchor\" クラスを持った div) が複数描画されていると、\n // wovn のスクリプトの仕様上1つ目の DOM にしか UI が挿入されないため、やむを得ず children のみ React のレンダリングレベルでの出し分けをしています。\n const isDesktop = useMediaQuery(mediaQuery.desktop)\n\n // HINT: Desktop,Mobileの両ヘッダーは常にHTML上に存在し、cssでvisibleを切り替えることでSSR環境でのレイアウトシフトが発生しないようにしています\n // 表示切替は画面幅によって決まり、SSR環境では判定出来ないためです\n return (\n <>\n <DesktopHeader {...props}>{isDesktop ? children : undefined}</DesktopHeader>\n <MobileHeader {...props}>{isDesktop ? undefined : children}</MobileHeader>\n </>\n )\n}\n"],"names":[],"mappings":";;;;;;AASO;;;;;;;AAQL;AAMF;;"}
|
|
@@ -4,6 +4,7 @@ import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tai
|
|
|
4
4
|
import '../../../../intl/IntlProvider.js';
|
|
5
5
|
import { useIntl } from '../../../../intl/useIntl.js';
|
|
6
6
|
import 'react-intl';
|
|
7
|
+
import { localeMap } from '../../../../intl/localeMap.js';
|
|
7
8
|
import { Button } from '../../../Button/Button.js';
|
|
8
9
|
import '../../../Button/AnchorButton.js';
|
|
9
10
|
import '../../../Button/UnstyledButton.js';
|
|
@@ -28,8 +29,6 @@ import '../../../Layout/Reel/Reel.js';
|
|
|
28
29
|
import '../../../Layout/Sidebar/Sidebar.js';
|
|
29
30
|
import '../../../Layout/Center/Center.js';
|
|
30
31
|
import '../../../Layout/Container/Container.js';
|
|
31
|
-
import { useLocale } from '../../hooks/useLocale.js';
|
|
32
|
-
import { localeMap } from '../../multilingualization/localeMap.js';
|
|
33
32
|
import { Translate } from '../common/Translate.js';
|
|
34
33
|
import { AppLauncher } from './AppLauncher.js';
|
|
35
34
|
import { Navigation } from './Navigation.js';
|
|
@@ -46,7 +45,7 @@ const classNameGenerator = ce({
|
|
|
46
45
|
],
|
|
47
46
|
},
|
|
48
47
|
});
|
|
49
|
-
const DesktopHeader = ({ enableNew, className = '', appName, tenants, currentTenantId, schoolUrl, helpPageUrl, children, userInfo, desktopAdditionalContent, navigations, desktopNavigationAdditionalContent, releaseNote, features, ...props }) => {
|
|
48
|
+
const DesktopHeader = ({ enableNew, className = '', appName, tenants, currentTenantId, schoolUrl, helpPageUrl, children, userInfo, desktopAdditionalContent, navigations, desktopNavigationAdditionalContent, releaseNote, features, locale: localeProps, ...props }) => {
|
|
50
49
|
const classNames = useMemo(() => {
|
|
51
50
|
const { wrapper, appsButton } = classNameGenerator();
|
|
52
51
|
return {
|
|
@@ -54,8 +53,7 @@ const DesktopHeader = ({ enableNew, className = '', appName, tenants, currentTen
|
|
|
54
53
|
appsButton: appsButton(),
|
|
55
54
|
};
|
|
56
55
|
}, [className]);
|
|
57
|
-
const { locale } =
|
|
58
|
-
const { localize } = useIntl();
|
|
56
|
+
const { localize, locale } = useIntl();
|
|
59
57
|
const translated = useMemo(() => ({
|
|
60
58
|
appLauncherLabel: localize({
|
|
61
59
|
id: 'smarthr-ui/AppHeader/DesktopHeader/appLauncherLabel',
|
|
@@ -64,7 +62,7 @@ const DesktopHeader = ({ enableNew, className = '', appName, tenants, currentTen
|
|
|
64
62
|
school: localize({ id: 'smarthr-ui/AppHeader/school', defaultText: 'スクール' }),
|
|
65
63
|
help: localize({ id: 'smarthr-ui/AppHeader/help', defaultText: 'ヘルプ' }),
|
|
66
64
|
}), [localize]);
|
|
67
|
-
return (jsxs(Fragment, { children: [jsx(Header, { ...props, enableNew: enableNew, className: classNames.wrapper, featureName: appName, tenants: tenants, currentTenantId: currentTenantId, children: jsxs(Cluster, { align: "center", className: "shr--me-0.25", children: [!enableNew && (jsxs(Fragment, { children: [features && features.length > 0 && (jsxs(Dropdown, { children: [jsx(AppLauncherButton, { enableNew: enableNew, className: classNames.appsButton, children: translated.appLauncherLabel }), jsx(DropdownContent, { controllable: true, children: jsx(AppLauncher, { features: features }) })] })), schoolUrl && (jsx(HeaderLink, { href: schoolUrl, prefix: jsx(FaGraduationCapIcon, {}), className: "shr-flex shr-items-center shr-py-0.75 shr-leading-none", children: jsx(Translate, { children: translated.school }) }))] })), helpPageUrl && (jsx(HeaderLink, { href: helpPageUrl, prefix: enableNew ? jsx(FaRegCircleQuestionIcon, {}) : jsx(FaCircleQuestionIcon, {}), className: enableNew ? undefined : 'shr-flex shr-items-center shr-py-0.75 shr-leading-none', enableNew: enableNew, children: jsx(Translate, { children: translated.help }) })),
|
|
65
|
+
return (jsxs(Fragment, { children: [jsx(Header, { ...props, enableNew: enableNew, className: classNames.wrapper, featureName: appName, tenants: tenants, currentTenantId: currentTenantId, children: jsxs(Cluster, { align: "center", className: "shr--me-0.25", children: [!enableNew && (jsxs(Fragment, { children: [features && features.length > 0 && (jsxs(Dropdown, { children: [jsx(AppLauncherButton, { enableNew: enableNew, className: classNames.appsButton, children: translated.appLauncherLabel }), jsx(DropdownContent, { controllable: true, children: jsx(AppLauncher, { features: features }) })] })), schoolUrl && (jsx(HeaderLink, { href: schoolUrl, prefix: jsx(FaGraduationCapIcon, {}), className: "shr-flex shr-items-center shr-py-0.75 shr-leading-none", children: jsx(Translate, { children: translated.school }) }))] })), helpPageUrl && (jsx(HeaderLink, { href: helpPageUrl, prefix: enableNew ? jsx(FaRegCircleQuestionIcon, {}) : jsx(FaCircleQuestionIcon, {}), className: enableNew ? undefined : 'shr-flex shr-items-center shr-py-0.75 shr-leading-none', enableNew: enableNew, children: jsx(Translate, { children: translated.help }) })), localeProps && (jsx(LanguageSwitcher, { localeMap: localeMap, locale: locale, onLanguageSelect: localeProps.onSelectLocale, enableNew: enableNew })), children, userInfo && (jsx(UserInfo, { ...userInfo, tenants: tenants, currentTenantId: currentTenantId, desktopAdditionalContent: desktopAdditionalContent, enableNew: enableNew }))] }) }), navigations && (jsx(Navigation, { appName: appName, navigations: navigations, additionalContent: desktopNavigationAdditionalContent, releaseNote: releaseNote, enableNew: enableNew }))] }));
|
|
68
66
|
};
|
|
69
67
|
const AppLauncherButton = memo(({ enableNew, children, className }) => (jsx(DropdownTrigger, { children: jsx(Button, { prefix: enableNew ?? jsx(FaToolboxIcon, {}), className: className, children: jsx(Translate, { children: children }) }) })));
|
|
70
68
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DesktopHeader.js","sources":["../../../../../src/components/AppHeader/components/desktop/DesktopHeader.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { Header, HeaderLink, LanguageSwitcher } from '../../../Header'\nimport {\n FaCircleQuestionIcon,\n FaGraduationCapIcon,\n FaRegCircleQuestionIcon,\n FaToolboxIcon,\n} from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport {
|
|
1
|
+
{"version":3,"file":"DesktopHeader.js","sources":["../../../../../src/components/AppHeader/components/desktop/DesktopHeader.tsx"],"sourcesContent":["import { type FC, type PropsWithChildren, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { localeMap } from '../../../../intl/localeMap'\nimport { Button } from '../../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { Header, HeaderLink, LanguageSwitcher } from '../../../Header'\nimport {\n FaCircleQuestionIcon,\n FaGraduationCapIcon,\n FaRegCircleQuestionIcon,\n FaToolboxIcon,\n} from '../../../Icon'\nimport { Cluster } from '../../../Layout'\nimport { Translate } from '../common/Translate'\n\nimport { AppLauncher } from './AppLauncher'\nimport { Navigation } from './Navigation'\nimport { UserInfo } from './UserInfo'\n\nimport type { HeaderProps } from '../../types'\n\nconst classNameGenerator = tv({\n slots: {\n wrapper: 'max-[751px]:!shr-hidden',\n appsButton: [\n 'shr-border-none shr-bg-transparent shr-px-0.25 shr-font-normal shr-text-white',\n 'hover:shr-border-transparent hover:shr-bg-transparent',\n 'focus-visible:shr-border-transparent focus-visible:shr-bg-transparent',\n 'forced-colors:shr-border-shorthand',\n ],\n },\n})\n\nexport const DesktopHeader: FC<HeaderProps> = ({\n enableNew,\n className = '',\n appName,\n tenants,\n currentTenantId,\n schoolUrl,\n helpPageUrl,\n children,\n userInfo,\n desktopAdditionalContent,\n navigations,\n desktopNavigationAdditionalContent,\n releaseNote,\n features,\n locale: localeProps,\n ...props\n}) => {\n const classNames = useMemo(() => {\n const { wrapper, appsButton } = classNameGenerator()\n\n return {\n wrapper: wrapper({ className }),\n appsButton: appsButton(),\n }\n }, [className])\n\n const { localize, locale } = useIntl()\n const translated = useMemo(\n () => ({\n appLauncherLabel: localize({\n id: 'smarthr-ui/AppHeader/DesktopHeader/appLauncherLabel',\n defaultText: 'アプリ',\n }),\n school: localize({ id: 'smarthr-ui/AppHeader/school', defaultText: 'スクール' }),\n help: localize({ id: 'smarthr-ui/AppHeader/help', defaultText: 'ヘルプ' }),\n }),\n [localize],\n )\n\n return (\n <>\n <Header\n {...props}\n enableNew={enableNew}\n className={classNames.wrapper}\n featureName={appName}\n tenants={tenants}\n currentTenantId={currentTenantId}\n >\n <Cluster align=\"center\" className=\"shr--me-0.25\">\n {!enableNew && (\n <>\n {features && features.length > 0 && (\n <Dropdown>\n <AppLauncherButton enableNew={enableNew} className={classNames.appsButton}>\n {translated.appLauncherLabel}\n </AppLauncherButton>\n <DropdownContent controllable>\n <AppLauncher features={features} />\n </DropdownContent>\n </Dropdown>\n )}\n\n {schoolUrl && (\n <HeaderLink\n href={schoolUrl}\n prefix={<FaGraduationCapIcon />}\n className=\"shr-flex shr-items-center shr-py-0.75 shr-leading-none\"\n >\n <Translate>{translated.school}</Translate>\n </HeaderLink>\n )}\n </>\n )}\n\n {helpPageUrl && (\n <HeaderLink\n href={helpPageUrl}\n prefix={enableNew ? <FaRegCircleQuestionIcon /> : <FaCircleQuestionIcon />}\n className={\n enableNew ? undefined : 'shr-flex shr-items-center shr-py-0.75 shr-leading-none'\n }\n enableNew={enableNew}\n >\n <Translate>{translated.help}</Translate>\n </HeaderLink>\n )}\n\n {localeProps && (\n <LanguageSwitcher\n localeMap={localeMap}\n locale={locale}\n onLanguageSelect={localeProps.onSelectLocale as (locale: string) => void}\n enableNew={enableNew}\n />\n )}\n\n {children}\n\n {userInfo && (\n <UserInfo\n {...userInfo}\n tenants={tenants}\n currentTenantId={currentTenantId}\n desktopAdditionalContent={desktopAdditionalContent}\n enableNew={enableNew}\n />\n )}\n </Cluster>\n </Header>\n\n {navigations && (\n <Navigation\n appName={appName}\n navigations={navigations}\n additionalContent={desktopNavigationAdditionalContent}\n releaseNote={releaseNote}\n enableNew={enableNew}\n />\n )}\n </>\n )\n}\n\nconst AppLauncherButton = memo<\n Pick<HeaderProps, 'enableNew'> & PropsWithChildren<{ className: string }>\n>(({ enableNew, children, className }) => (\n <DropdownTrigger>\n <Button prefix={enableNew ?? <FaToolboxIcon />} className={className}>\n <Translate>{children}</Translate>\n </Button>\n </DropdownTrigger>\n))\n"],"names":["tv","_jsxs","_Fragment","_jsx"],"mappings":"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"}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { memo, useMemo, useCallback } from 'react';
|
|
3
3
|
import { tv as ce } from './../../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.17_ts-node@10.9.2_@swc_core@1.13.2_@types_node@20.19.9_typescript@5.8.3__/vendor/tailwind-variants/dist/index.js';
|
|
4
|
+
import '../../../../intl/IntlProvider.js';
|
|
5
|
+
import { useIntl } from '../../../../intl/useIntl.js';
|
|
6
|
+
import 'react-intl';
|
|
7
|
+
import { localeMap } from '../../../../intl/localeMap.js';
|
|
4
8
|
import { Button } from '../../../Button/Button.js';
|
|
5
9
|
import '../../../Button/AnchorButton.js';
|
|
6
10
|
import '../../../Button/UnstyledButton.js';
|
|
@@ -9,7 +13,6 @@ import { FaXmarkIcon, FaCheckIcon } from '../../../Icon/Icon.js';
|
|
|
9
13
|
import '../../../Icon/generateIcon.js';
|
|
10
14
|
import { Section } from '../../../SectioningContent/SectioningContent.js';
|
|
11
15
|
import '../../../SectioningContent/levelContext.js';
|
|
12
|
-
import { localeMap } from '../../multilingualization/localeMap.js';
|
|
13
16
|
import { CommonButton } from '../common/CommonButton.js';
|
|
14
17
|
|
|
15
18
|
const classNameGenerator = ce({
|
|
@@ -22,8 +25,11 @@ const classNameGenerator = ce({
|
|
|
22
25
|
button: ['[&&:not(:has(svg))]:shr-ps-2.5'],
|
|
23
26
|
},
|
|
24
27
|
});
|
|
25
|
-
const
|
|
26
|
-
const
|
|
28
|
+
const LanguageSelector = memo(({ locale: localeProps, onClickClose }) => {
|
|
29
|
+
const { locale, availableLocales } = useIntl();
|
|
30
|
+
const { locales } = useMemo(() => ({
|
|
31
|
+
locales: Object.entries(localeMap).filter(([code]) => availableLocales.includes(code)),
|
|
32
|
+
}), [availableLocales]);
|
|
27
33
|
const classNames = useMemo(() => {
|
|
28
34
|
const { header, headerTitle, buttonWrapper, button } = classNameGenerator();
|
|
29
35
|
return {
|
|
@@ -34,12 +40,12 @@ const LanguageSelector = memo(({ locale, onClickClose }) => {
|
|
|
34
40
|
};
|
|
35
41
|
}, []);
|
|
36
42
|
const onClickLocale = useCallback((e) => {
|
|
37
|
-
|
|
38
|
-
}, [
|
|
39
|
-
return (jsxs(Section, { children: [jsx(SelectorHeading, { onClickClose: onClickClose, wrapperClassName: classNames.header, className: classNames.headerTitle }), jsx("div", { className: classNames.buttonWrapper, children:
|
|
43
|
+
localeProps.onSelectLocale(e.currentTarget.value);
|
|
44
|
+
}, [localeProps]);
|
|
45
|
+
return (jsxs(Section, { children: [jsx(SelectorHeading, { onClickClose: onClickClose, wrapperClassName: classNames.header, className: classNames.headerTitle }), jsx("div", { className: classNames.buttonWrapper, children: locales.map(([localeKey, label]) => (jsx(LocaleButton, { value: localeKey, onClick: onClickLocale, selected: localeKey === locale, className: classNames.button, children: label }, localeKey))) })] }));
|
|
40
46
|
});
|
|
41
47
|
const SelectorHeading = memo(({ onClickClose, wrapperClassName, className }) => (jsxs("div", { className: wrapperClassName, children: [jsx(Heading, { className: className, children: "Language" }), jsx(Button, { type: "button", size: "s", onClick: onClickClose, children: jsx(FaXmarkIcon, { alt: "close" }) })] })));
|
|
42
|
-
const LocaleButton = memo(({ value, selected, className, onClick }) => (jsx(CommonButton, { elementAs: "button", type: "button", value: value, onClick: onClick, prefix: selected && jsx(FaCheckIcon, { color: "MAIN" }), className: className, children:
|
|
48
|
+
const LocaleButton = memo(({ value, selected, className, children, onClick }) => (jsx(CommonButton, { elementAs: "button", type: "button", value: value, onClick: onClick, prefix: selected && jsx(FaCheckIcon, { color: "MAIN" }), className: className, children: children })));
|
|
43
49
|
|
|
44
50
|
export { LanguageSelector };
|
|
45
51
|
//# sourceMappingURL=LanguageSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LanguageSelector.js","sources":["../../../../../src/components/AppHeader/components/mobile/LanguageSelector.tsx"],"sourcesContent":["import { type MouseEvent, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport {
|
|
1
|
+
{"version":3,"file":"LanguageSelector.js","sources":["../../../../../src/components/AppHeader/components/mobile/LanguageSelector.tsx"],"sourcesContent":["import { type MouseEvent, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { type Locale, localeMap } from '../../../../intl/localeMap'\nimport { Button } from '../../../Button'\nimport { Heading } from '../../../Heading'\nimport { FaCheckIcon, FaXmarkIcon } from '../../../Icon'\nimport { Section } from '../../../SectioningContent'\nimport { CommonButton } from '../common/CommonButton'\n\nimport type { LocaleProps } from '../../types'\n\nconst classNameGenerator = tv({\n slots: {\n header: [\n 'shr-border-b-shorthand shr-flex shr-items-center shr-justify-between shr-gap-1 shr-px-1 shr-py-0.75',\n ],\n headerTitle: ['shr-font-normal [&&]:shr-text-base'],\n buttonWrapper: ['shr-p-0.5'],\n button: ['[&&:not(:has(svg))]:shr-ps-2.5'],\n },\n})\n\ntype Props = {\n locale: LocaleProps\n onClickClose: () => void\n}\n\nexport const LanguageSelector = memo<Props>(({ locale: localeProps, onClickClose }) => {\n const { locale, availableLocales } = useIntl()\n const { locales } = useMemo(\n () => ({\n locales: Object.entries(localeMap).filter(([code]) => availableLocales.includes(code)),\n }),\n [availableLocales],\n )\n const classNames = useMemo(() => {\n const { header, headerTitle, buttonWrapper, button } = classNameGenerator()\n\n return {\n header: header(),\n headerTitle: headerTitle(),\n buttonWrapper: buttonWrapper(),\n button: button(),\n }\n }, [])\n\n const onClickLocale = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n localeProps.onSelectLocale(e.currentTarget.value as Locale)\n },\n [localeProps],\n )\n\n return (\n <Section>\n <SelectorHeading\n onClickClose={onClickClose}\n wrapperClassName={classNames.header}\n className={classNames.headerTitle}\n />\n <div className={classNames.buttonWrapper}>\n {locales.map(([localeKey, label]) => (\n <LocaleButton\n key={localeKey}\n value={localeKey as Locale}\n onClick={onClickLocale}\n selected={localeKey === locale}\n className={classNames.button}\n >\n {label}\n </LocaleButton>\n ))}\n </div>\n </Section>\n )\n})\n\nconst SelectorHeading = memo<\n Pick<Props, 'onClickClose'> & { wrapperClassName: string; className: string }\n>(({ onClickClose, wrapperClassName, className }) => (\n <div className={wrapperClassName}>\n <Heading className={className}>Language</Heading>\n <Button type=\"button\" size=\"s\" onClick={onClickClose}>\n <FaXmarkIcon alt=\"close\" />\n </Button>\n </div>\n))\n\nconst LocaleButton = memo<{\n value: Locale\n selected: boolean\n className: string\n children: string\n onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ value, selected, className, children, onClick }) => (\n <CommonButton\n elementAs=\"button\"\n type=\"button\"\n value={value}\n onClick={onClick}\n prefix={selected && <FaCheckIcon color=\"MAIN\" />}\n className={className}\n >\n {children}\n </CommonButton>\n))\n"],"names":["tv","_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -5,7 +5,6 @@ import '../../../Header/LanguageSwitcher/LanguageSwitcher.js';
|
|
|
5
5
|
import '../../../Header/HeaderLink.js';
|
|
6
6
|
import '../../../Header/HeaderDropdownMenuButton.js';
|
|
7
7
|
import '../../../Header/AppLauncher/AppLauncher.js';
|
|
8
|
-
import { useLocale } from '../../hooks/useLocale.js';
|
|
9
8
|
import { AppLauncherContext } from './AppLauncherContext.js';
|
|
10
9
|
import { Help } from './Help.js';
|
|
11
10
|
import { Menu } from './Menu.js';
|
|
@@ -14,11 +13,10 @@ import { ReleaseNoteContext } from './ReleaseNoteContext.js';
|
|
|
14
13
|
import { TenantSelector } from './TenantSelector.js';
|
|
15
14
|
import { UserInfo } from './UserInfo.js';
|
|
16
15
|
|
|
17
|
-
const MobileHeader = ({ navigations, features, releaseNote, className = '', tenants, children, helpPageUrl, schoolUrl, userInfo, appName, currentTenantId, onTenantSelect, mobileAdditionalContent, ...props }) => {
|
|
16
|
+
const MobileHeader = ({ navigations, features, releaseNote, className = '', tenants, children, helpPageUrl, schoolUrl, userInfo, appName, currentTenantId, onTenantSelect, mobileAdditionalContent, locale, ...props }) => {
|
|
18
17
|
const [isAppLauncherSelected, setIsAppLauncherSelected] = useState(false);
|
|
19
18
|
const [isReleaseNoteSelected, setIsReleaseNoteSelected] = useState(false);
|
|
20
19
|
const [selectedNavigationGroup, setSelectedNavigationGroup] = useState(null);
|
|
21
|
-
const { locale } = useLocale();
|
|
22
20
|
// navigations の設定をメニューの解放条件とする
|
|
23
21
|
const isMenuAvailable = navigations && navigations.length > 0;
|
|
24
22
|
return (jsx(AppLauncherContext.Provider, { value: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/AppHeader/components/mobile/MobileHeader.tsx"],"sourcesContent":["import { type FC, useState } from 'react'\n\nimport { Header } from '../../../Header'\
|
|
1
|
+
{"version":3,"file":"MobileHeader.js","sources":["../../../../../src/components/AppHeader/components/mobile/MobileHeader.tsx"],"sourcesContent":["import { type FC, useState } from 'react'\n\nimport { Header } from '../../../Header'\n\nimport { AppLauncherContext } from './AppLauncherContext'\nimport { Help } from './Help'\nimport { Menu } from './Menu'\nimport { NavigationContext } from './NavigationContext'\nimport { ReleaseNoteContext } from './ReleaseNoteContext'\nimport { TenantSelector } from './TenantSelector'\nimport { UserInfo } from './UserInfo'\n\nimport type { HeaderProps, NavigationGroup } from '../../types'\n\nexport const MobileHeader: FC<HeaderProps> = ({\n navigations,\n features,\n releaseNote,\n className = '',\n tenants,\n children,\n helpPageUrl,\n schoolUrl,\n userInfo,\n appName,\n currentTenantId,\n onTenantSelect,\n mobileAdditionalContent,\n locale,\n ...props\n}) => {\n const [isAppLauncherSelected, setIsAppLauncherSelected] = useState(false)\n const [isReleaseNoteSelected, setIsReleaseNoteSelected] = useState(false)\n const [selectedNavigationGroup, setSelectedNavigationGroup] = useState<NavigationGroup | null>(\n null,\n )\n\n // navigations の設定をメニューの解放条件とする\n const isMenuAvailable = navigations && navigations.length > 0\n\n return (\n <AppLauncherContext.Provider\n value={{\n features,\n isAppLauncherSelected,\n setIsAppLauncherSelected,\n }}\n >\n <NavigationContext.Provider\n value={{\n navigations: navigations ?? [],\n selectedNavigationGroup,\n setSelectedNavigationGroup,\n }}\n >\n <ReleaseNoteContext.Provider\n value={{\n releaseNote,\n isReleaseNoteSelected,\n setIsReleaseNoteSelected,\n }}\n >\n <Header\n {...props}\n className={`${className} min-[752px]:!shr-hidden`}\n tenants={isMenuAvailable ? undefined : tenants}\n >\n {children}\n\n <Help helpPageUrl={helpPageUrl} schoolUrl={schoolUrl} />\n\n <UserInfo {...userInfo} locale={locale} />\n\n {isMenuAvailable && (\n <Menu\n appName={appName}\n tenantSelector={\n <TenantSelector\n tenants={tenants}\n currentTenantId={currentTenantId}\n onTenantSelect={onTenantSelect}\n />\n }\n additionalContent={mobileAdditionalContent}\n />\n )}\n </Header>\n </ReleaseNoteContext.Provider>\n </NavigationContext.Provider>\n </AppLauncherContext.Provider>\n )\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;AAcO,MAAM,YAAY,GAAoB,CAAC,EAC5C,WAAW,EACX,QAAQ,EACR,WAAW,EACX,SAAS,GAAG,EAAE,EACd,OAAO,EACP,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,EACR,OAAO,EACP,eAAe,EACf,cAAc,EACd,uBAAuB,EACvB,MAAM,EACN,GAAG,KAAK,EACT,KAAI;IACH,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzE,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IACzE,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GAAG,QAAQ,CACpE,IAAI,CACL;;IAGD,MAAM,eAAe,GAAG,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;AAE7D,IAAA,QACEA,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;YACL,QAAQ;YACR,qBAAqB;YACrB,wBAAwB;AACzB,SAAA,EAAA,QAAA,EAEDA,IAAC,iBAAiB,CAAC,QAAQ,EAAA,EACzB,KAAK,EAAE;gBACL,WAAW,EAAE,WAAW,IAAI,EAAE;gBAC9B,uBAAuB;gBACvB,0BAA0B;AAC3B,aAAA,EAAA,QAAA,EAEDA,IAAC,kBAAkB,CAAC,QAAQ,EAAA,EAC1B,KAAK,EAAE;oBACL,WAAW;oBACX,qBAAqB;oBACrB,wBAAwB;AACzB,iBAAA,EAAA,QAAA,EAEDC,KAAC,MAAM,EAAA,EAAA,GACD,KAAK,EACT,SAAS,EAAE,CAAA,EAAG,SAAS,CAAA,wBAAA,CAA0B,EACjD,OAAO,EAAE,eAAe,GAAG,SAAS,GAAG,OAAO,aAE7C,QAAQ,EAETD,IAAC,IAAI,EAAA,EAAC,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAA,CAAI,EAExDA,GAAA,CAAC,QAAQ,OAAK,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,EAEzC,eAAe,KACdA,IAAC,IAAI,EAAA,EACH,OAAO,EAAE,OAAO,EAChB,cAAc,EACZA,GAAA,CAAC,cAAc,IACb,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,eAAe,EAChC,cAAc,EAAE,cAAc,EAAA,CAC9B,EAEJ,iBAAiB,EAAE,uBAAuB,GAC1C,CACH,CAAA,EAAA,CACM,GACmB,EAAA,CACH,EAAA,CACD;AAElC;;;;"}
|
|
@@ -39,7 +39,6 @@ import '../../../Dropdown/DropdownMenuButton/DropdownMenuGroup.js';
|
|
|
39
39
|
import '../../../Dropdown/SortDropdown/SortDropdown.js';
|
|
40
40
|
import { FaUserLargeIcon, FaGlobeIcon, FaGearIcon } from '../../../Icon/Icon.js';
|
|
41
41
|
import '../../../Icon/generateIcon.js';
|
|
42
|
-
import { useLocale } from '../../hooks/useLocale.js';
|
|
43
42
|
import { buildDisplayName } from '../../utils.js';
|
|
44
43
|
import { CommonButton } from '../common/CommonButton.js';
|
|
45
44
|
import { Translate } from '../common/Translate.js';
|
|
@@ -55,7 +54,7 @@ const classNameGenerator = ce({
|
|
|
55
54
|
dropdownButtonArea: ['shr-border-t-shorthand shr-p-0.5'],
|
|
56
55
|
},
|
|
57
56
|
});
|
|
58
|
-
const UserInfo = memo(({ arbitraryDisplayName, email, empCode, firstName, lastName, accountUrl }) => {
|
|
57
|
+
const UserInfo = memo(({ arbitraryDisplayName, email, empCode, firstName, lastName, accountUrl, locale }) => {
|
|
59
58
|
const displayName = useMemo(() => arbitraryDisplayName ??
|
|
60
59
|
buildDisplayName({
|
|
61
60
|
email,
|
|
@@ -63,13 +62,12 @@ const UserInfo = memo(({ arbitraryDisplayName, email, empCode, firstName, lastNa
|
|
|
63
62
|
firstName,
|
|
64
63
|
lastName,
|
|
65
64
|
}), [arbitraryDisplayName, email, empCode, firstName, lastName]);
|
|
66
|
-
return displayName ? jsx(ActualUserInfo, { accountUrl: accountUrl, displayName: displayName }) : null;
|
|
65
|
+
return displayName ? (jsx(ActualUserInfo, { accountUrl: accountUrl, displayName: displayName, locale: locale })) : null;
|
|
67
66
|
});
|
|
68
|
-
const ActualUserInfo = ({ displayName, accountUrl, }) => {
|
|
67
|
+
const ActualUserInfo = ({ displayName, accountUrl, locale, }) => {
|
|
69
68
|
const [languageDialogOpen, setLanguageDialogOpen] = useState(false);
|
|
70
69
|
const dialogOpen = useCallback(() => setLanguageDialogOpen(true), []);
|
|
71
70
|
const dialogClose = useCallback(() => setLanguageDialogOpen(false), []);
|
|
72
|
-
const { locale } = useLocale();
|
|
73
71
|
const { localize } = useIntl();
|
|
74
72
|
const translated = useMemo(() => ({
|
|
75
73
|
account: localize({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UserInfo.js","sources":["../../../../../src/components/AppHeader/components/mobile/UserInfo.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dialog } from '../../../Dialog'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaGearIcon, FaGlobeIcon, FaUserLargeIcon } from '../../../Icon'\nimport {
|
|
1
|
+
{"version":3,"file":"UserInfo.js","sources":["../../../../../src/components/AppHeader/components/mobile/UserInfo.tsx"],"sourcesContent":["import { type FC, memo, useCallback, useMemo, useState } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { useIntl } from '../../../../intl'\nimport { Button } from '../../../Button'\nimport { Dialog } from '../../../Dialog'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../../Dropdown'\nimport { FaGearIcon, FaGlobeIcon, FaUserLargeIcon } from '../../../Icon'\nimport { buildDisplayName } from '../../utils'\nimport { CommonButton } from '../common/CommonButton'\nimport { Translate } from '../common/Translate'\n\nimport { LanguageSelector } from './LanguageSelector'\n\nimport type { HeaderProps, UserInfoProps } from '../../types'\n\nconst classNameGenerator = tv({\n slots: {\n iconButton: ['[&&&]:shr-border-transparent [&&]:shr-p-0.25'],\n iconButtonInner: [\n 'shr-border-shorthand shr-block shr-flex shr-items-center shr-justify-center shr-rounded-full shr-bg-white shr-p-0.25',\n ],\n dropdownUserName: ['shr-box-border shr-min-w-[246px] shr-px-1 shr-py-0.75 shr-text-sm'],\n dropdownButtonArea: ['shr-border-t-shorthand shr-p-0.5'],\n },\n})\n\ntype Props = UserInfoProps & Pick<HeaderProps, 'locale'>\n\nexport const UserInfo = memo<Props>(\n ({ arbitraryDisplayName, email, empCode, firstName, lastName, accountUrl, locale }) => {\n const displayName = useMemo(\n () =>\n arbitraryDisplayName ??\n buildDisplayName({\n email,\n empCode,\n firstName,\n lastName,\n }),\n [arbitraryDisplayName, email, empCode, firstName, lastName],\n )\n\n return displayName ? (\n <ActualUserInfo accountUrl={accountUrl} displayName={displayName} locale={locale} />\n ) : null\n },\n)\n\nconst ActualUserInfo: FC<Pick<Props, 'accountUrl' | 'locale'> & { displayName: string }> = ({\n displayName,\n accountUrl,\n locale,\n}) => {\n const [languageDialogOpen, setLanguageDialogOpen] = useState(false)\n\n const dialogOpen = useCallback(() => setLanguageDialogOpen(true), [])\n const dialogClose = useCallback(() => setLanguageDialogOpen(false), [])\n\n const { localize } = useIntl()\n const translated = useMemo(\n () => ({\n account: localize({\n id: 'smarthr-ui/AppHeader/MobileHeader/account',\n defaultText: 'アカウント',\n }),\n userSetting: localize({\n id: 'smarthr-ui/AppHeader/userSettings',\n defaultText: '個人設定',\n }),\n }),\n [localize],\n )\n\n const classNames = useMemo(() => {\n const { iconButton, iconButtonInner, dropdownUserName, dropdownButtonArea } =\n classNameGenerator()\n\n return {\n iconButton: iconButton(),\n iconButtonInner: iconButtonInner(),\n dropdownUserName: dropdownUserName(),\n dropdownButtonArea: dropdownButtonArea(),\n }\n }, [])\n\n return (\n <>\n <Dropdown>\n <DropdownTrigger>\n <Button variant=\"skeleton\" size=\"s\" className={classNames.iconButton}>\n <span className={classNames.iconButtonInner}>\n <FaUserLargeIcon alt={translated.account} className=\"shr-fill-grey\" />\n </span>\n </Button>\n </DropdownTrigger>\n\n <DropdownContent>\n <div className={classNames.dropdownUserName}>\n <p>{displayName}</p>\n </div>\n\n {(locale || accountUrl) && (\n <div className={classNames.dropdownButtonArea}>\n {locale && (\n <CommonButton\n elementAs=\"button\"\n type=\"button\"\n onClick={dialogOpen}\n prefix={<FaGlobeIcon />}\n >\n Language\n </CommonButton>\n )}\n\n {accountUrl && (\n <CommonButton\n elementAs=\"a\"\n href={accountUrl}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n prefix={<FaGearIcon />}\n >\n <Translate>{translated.userSetting}</Translate>\n </CommonButton>\n )}\n </div>\n )}\n </DropdownContent>\n </Dropdown>\n\n {locale && (\n <Dialog isOpen={languageDialogOpen} onClickOverlay={dialogClose} width={246}>\n <LanguageSelector locale={locale} onClickClose={dialogClose} />\n </Dialog>\n )}\n </>\n )\n}\n"],"names":["tv","_jsx","_jsxs","_Fragment"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;QACL,UAAU,EAAE,CAAC,8CAA8C,CAAC;AAC5D,QAAA,eAAe,EAAE;YACf,sHAAsH;AACvH,SAAA;QACD,gBAAgB,EAAE,CAAC,mEAAmE,CAAC;QACvF,kBAAkB,EAAE,CAAC,kCAAkC,CAAC;AACzD,KAAA;AACF,CAAA,CAAC;MAIW,QAAQ,GAAG,IAAI,CAC1B,CAAC,EAAE,oBAAoB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,KAAI;AACpF,IAAA,MAAM,WAAW,GAAG,OAAO,CACzB,MACE,oBAAoB;AACpB,QAAA,gBAAgB,CAAC;YACf,KAAK;YACL,OAAO;YACP,SAAS;YACT,QAAQ;AACT,SAAA,CAAC,EACJ,CAAC,oBAAoB,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,CAAC,CAC5D;IAED,OAAO,WAAW,IAChBC,IAAC,cAAc,EAAA,EAAC,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAA,CAAI,IAClF,IAAI;AACV,CAAC;AAGH,MAAM,cAAc,GAAuE,CAAC,EAC1F,WAAW,EACX,UAAU,EACV,MAAM,GACP,KAAI;IACH,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAEnE,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,qBAAqB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;AACrE,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAM,qBAAqB,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC;AAEvE,IAAA,MAAM,EAAE,QAAQ,EAAE,GAAG,OAAO,EAAE;AAC9B,IAAA,MAAM,UAAU,GAAG,OAAO,CACxB,OAAO;QACL,OAAO,EAAE,QAAQ,CAAC;AAChB,YAAA,EAAE,EAAE,2CAA2C;AAC/C,YAAA,WAAW,EAAE,OAAO;SACrB,CAAC;QACF,WAAW,EAAE,QAAQ,CAAC;AACpB,YAAA,EAAE,EAAE,mCAAmC;AACvC,YAAA,WAAW,EAAE,MAAM;SACpB,CAAC;AACH,KAAA,CAAC,EACF,CAAC,QAAQ,CAAC,CACX;AAED,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,UAAU,EAAE,eAAe,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,GACzE,kBAAkB,EAAE;QAEtB,OAAO;YACL,UAAU,EAAE,UAAU,EAAE;YACxB,eAAe,EAAE,eAAe,EAAE;YAClC,gBAAgB,EAAE,gBAAgB,EAAE;YACpC,kBAAkB,EAAE,kBAAkB,EAAE;SACzC;IACH,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACED,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACPD,GAAA,CAAC,eAAe,EAAA,EAAA,QAAA,EACdA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,GAAG,EAAC,SAAS,EAAE,UAAU,CAAC,UAAU,EAAA,QAAA,EAClEA,cAAM,SAAS,EAAE,UAAU,CAAC,eAAe,YACzCA,GAAA,CAAC,eAAe,IAAC,GAAG,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,EAAC,eAAe,EAAA,CAAG,GACjE,EAAA,CACA,EAAA,CACO,EAElBC,IAAA,CAAC,eAAe,eACdD,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAA,QAAA,EACzCA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,WAAW,EAAA,CAAK,EAAA,CAChB,EAEL,CAAC,MAAM,IAAI,UAAU,MACpBC,cAAK,SAAS,EAAE,UAAU,CAAC,kBAAkB,aAC1C,MAAM,KACLD,GAAA,CAAC,YAAY,IACX,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,UAAU,EACnB,MAAM,EAAEA,GAAA,CAAC,WAAW,KAAG,EAAA,QAAA,EAAA,UAAA,EAAA,CAGV,CAChB,EAEA,UAAU,KACTA,GAAA,CAAC,YAAY,IACX,SAAS,EAAC,GAAG,EACb,IAAI,EAAE,UAAU,EAChB,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,EACzB,MAAM,EAAEA,GAAA,CAAC,UAAU,EAAA,EAAA,CAAG,EAAA,QAAA,EAEtBA,IAAC,SAAS,EAAA,EAAA,QAAA,EAAE,UAAU,CAAC,WAAW,EAAA,CAAa,EAAA,CAClC,CAChB,CAAA,EAAA,CACG,CACP,IACe,CAAA,EAAA,CACT,EAEV,MAAM,KACLA,IAAC,MAAM,EAAA,EAAC,MAAM,EAAE,kBAAkB,EAAE,cAAc,EAAE,WAAW,EAAE,KAAK,EAAE,GAAG,YACzEA,GAAA,CAAC,gBAAgB,IAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,WAAW,EAAA,CAAI,GACxD,CACV,CAAA,EAAA,CACA;AAEP,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"args.js","sources":["../../../../src/components/AppHeader/stories/args.tsx"],"sourcesContent":["import { action } from 'storybook/actions'\n\nimport type { AppHeader } from '../AppHeader'\nimport type { ComponentProps, FC, PropsWithChildren } from 'react'\n\nconst CustomLink: FC<PropsWithChildren<{ to: string; className?: string }>> = (props) => (\n <a {...props} href={props.to} className={props.className ?? ''}>\n {props.children}\n </a>\n)\n\nconst AdditionalContent: FC<PropsWithChildren> = ({ children }) => (\n <div style={{ background: 'rgb(242 242 242)', padding: '4px 8px' }}>{children}</div>\n)\n\nconst buildFeature = (index: number, name: string, favorite: boolean, position?: number) => ({\n id: `feature-${index}`,\n url: 'https://example.com',\n name,\n favorite,\n position: position ?? null,\n})\n\nexport const args: ComponentProps<typeof AppHeader> = {\n children: <AdditionalContent>children</AdditionalContent>,\n appName: '勤怠管理',\n tenants: [\n {\n id: 'tenant-1',\n name: '株式会社テストテナント壱',\n },\n {\n id: 'tenant-2',\n name: '株式会社テストテナント弐',\n },\n ],\n currentTenantId: 'tenant-1',\n onTenantSelect: action('テナント選択'),\n schoolUrl: 'https://example.com',\n helpPageUrl: 'https://example.com',\n locale: {\n
|
|
1
|
+
{"version":3,"file":"args.js","sources":["../../../../src/components/AppHeader/stories/args.tsx"],"sourcesContent":["import { action } from 'storybook/actions'\n\nimport type { AppHeader } from '../AppHeader'\nimport type { ComponentProps, FC, PropsWithChildren } from 'react'\n\nconst CustomLink: FC<PropsWithChildren<{ to: string; className?: string }>> = (props) => (\n <a {...props} href={props.to} className={props.className ?? ''}>\n {props.children}\n </a>\n)\n\nconst AdditionalContent: FC<PropsWithChildren> = ({ children }) => (\n <div style={{ background: 'rgb(242 242 242)', padding: '4px 8px' }}>{children}</div>\n)\n\nconst buildFeature = (index: number, name: string, favorite: boolean, position?: number) => ({\n id: `feature-${index}`,\n url: 'https://example.com',\n name,\n favorite,\n position: position ?? null,\n})\n\nexport const args: ComponentProps<typeof AppHeader> = {\n children: <AdditionalContent>children</AdditionalContent>,\n appName: '勤怠管理',\n tenants: [\n {\n id: 'tenant-1',\n name: '株式会社テストテナント壱',\n },\n {\n id: 'tenant-2',\n name: '株式会社テストテナント弐',\n },\n ],\n currentTenantId: 'tenant-1',\n onTenantSelect: action('テナント選択'),\n schoolUrl: 'https://example.com',\n helpPageUrl: 'https://example.com',\n locale: {\n onSelectLocale: action('locale'),\n },\n userInfo: {\n email: 'smarthr@example.com',\n empCode: '001',\n firstName: '須磨',\n lastName: '栄子',\n accountUrl: 'https://example.com',\n },\n desktopAdditionalContent: <AdditionalContent>desktopAdditionalContent</AdditionalContent>,\n navigations: [\n {\n children: 'aタグ',\n href: 'https://example.com',\n },\n {\n children: 'カスタムタグ',\n elementAs: CustomLink,\n to: 'https://example.com',\n },\n {\n children: 'ボタン',\n onClick: action('AppNavボタンクリック'),\n },\n {\n children: 'ドロップダウン',\n childNavigations: [\n {\n children: 'aタグ',\n href: 'https://example.com',\n },\n {\n children: 'カスタムタグ',\n elementAs: CustomLink,\n to: 'https://example.com',\n },\n {\n children: 'ボタン',\n onClick: action('ボタンクリック'),\n },\n ],\n },\n {\n children: 'グループ',\n childNavigations: [\n {\n title: 'グループ1',\n childNavigations: [\n {\n children: 'グループ1_アイテム1',\n href: 'https://example.com',\n current: true,\n },\n {\n children: 'グループ1_アイテム2',\n href: 'https://example.com',\n },\n ],\n },\n {\n title: 'グループ2',\n childNavigations: [\n {\n children: 'グループ2_アイテム1',\n href: 'https://example.com',\n },\n {\n children: 'グループ2_アイテム2',\n href: 'https://example.com',\n },\n ],\n },\n ],\n },\n ],\n desktopNavigationAdditionalContent: (\n <AdditionalContent>desktopNavigationAdditionalContent</AdditionalContent>\n ),\n releaseNote: {\n links: [\n {\n title: 'リリースノート1',\n url: 'https://example.com',\n },\n {\n title: 'リリースノート2',\n url: 'https://example.com',\n },\n {\n title: 'リリースノート3',\n url: 'https://example.com',\n },\n ],\n indexUrl: 'https://example.com',\n },\n features: [\n buildFeature(1, '従業員リスト', false),\n buildFeature(2, '共通設定', true, 4),\n buildFeature(3, 'お知らせ管理', true, 3),\n buildFeature(4, '給与明細', true, 1),\n buildFeature(5, '申請', false),\n buildFeature(6, '給与明細管理', false),\n buildFeature(7, 'マイナンバー管理', false),\n buildFeature(8, '源泉徴収票管理', false),\n buildFeature(9, '手続き', false),\n buildFeature(10, '手続きToDo', false),\n buildFeature(11, '文書配付', false),\n buildFeature(12, 'IdP', true, 2),\n ],\n mobileAdditionalContent: <AdditionalContent>mobileAdditionalContent</AdditionalContent>,\n}\n"],"names":["_jsx","action"],"mappings":";;;AAKA,MAAM,UAAU,GAA8D,CAAC,KAAK,MAClFA,GAAA,CAAA,GAAA,EAAA,EAAA,GAAO,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,SAAS,IAAI,EAAE,EAAA,QAAA,EAC3D,KAAK,CAAC,QAAQ,EAAA,CACb,CACL;AAED,MAAM,iBAAiB,GAA0B,CAAC,EAAE,QAAQ,EAAE,MAC5DA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,UAAU,EAAE,kBAAkB,EAAE,OAAO,EAAE,SAAS,EAAE,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAO,CACrF;AAED,MAAM,YAAY,GAAG,CAAC,KAAa,EAAE,IAAY,EAAE,QAAiB,EAAE,QAAiB,MAAM;IAC3F,EAAE,EAAE,CAAA,QAAA,EAAW,KAAK,CAAA,CAAE;AACtB,IAAA,GAAG,EAAE,qBAAqB;IAC1B,IAAI;IACJ,QAAQ;IACR,QAAQ,EAAE,QAAQ,IAAI,IAAI;AAC3B,CAAA,CAAC;AAEK,MAAM,IAAI,GAAqC;IACpD,QAAQ,EAAEA,GAAA,CAAC,iBAAiB,EAAA,EAAA,QAAA,EAAA,UAAA,EAAA,CAA6B;AACzD,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,OAAO,EAAE;AACP,QAAA;AACE,YAAA,EAAE,EAAE,UAAU;AACd,YAAA,IAAI,EAAE,cAAc;AACrB,SAAA;AACD,QAAA;AACE,YAAA,EAAE,EAAE,UAAU;AACd,YAAA,IAAI,EAAE,cAAc;AACrB,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE,UAAU;AAC3B,IAAA,cAAc,EAAEC,CAAM,CAAC,QAAQ,CAAC;AAChC,IAAA,SAAS,EAAE,qBAAqB;AAChC,IAAA,WAAW,EAAE,qBAAqB;AAClC,IAAA,MAAM,EAAE;AACN,QAAA,cAAc,EAAEA,CAAM,CAAC,QAAQ,CAAC;AACjC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,qBAAqB;AAC5B,QAAA,OAAO,EAAE,KAAK;AACd,QAAA,SAAS,EAAE,IAAI;AACf,QAAA,QAAQ,EAAE,IAAI;AACd,QAAA,UAAU,EAAE,qBAAqB;AAClC,KAAA;IACD,wBAAwB,EAAED,GAAA,CAAC,iBAAiB,EAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,CAA6C;AACzF,IAAA,WAAW,EAAE;AACX,QAAA;AACE,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,IAAI,EAAE,qBAAqB;AAC5B,SAAA;AACD,QAAA;AACE,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,SAAS,EAAE,UAAU;AACrB,YAAA,EAAE,EAAE,qBAAqB;AAC1B,SAAA;AACD,QAAA;AACE,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,OAAO,EAAEC,CAAM,CAAC,eAAe,CAAC;AACjC,SAAA;AACD,QAAA;AACE,YAAA,QAAQ,EAAE,SAAS;AACnB,YAAA,gBAAgB,EAAE;AAChB,gBAAA;AACE,oBAAA,QAAQ,EAAE,KAAK;AACf,oBAAA,IAAI,EAAE,qBAAqB;AAC5B,iBAAA;AACD,gBAAA;AACE,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,SAAS,EAAE,UAAU;AACrB,oBAAA,EAAE,EAAE,qBAAqB;AAC1B,iBAAA;AACD,gBAAA;AACE,oBAAA,QAAQ,EAAE,KAAK;AACf,oBAAA,OAAO,EAAEA,CAAM,CAAC,SAAS,CAAC;AAC3B,iBAAA;AACF,aAAA;AACF,SAAA;AACD,QAAA;AACE,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,gBAAgB,EAAE;AAChB,gBAAA;AACE,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE;AAChB,wBAAA;AACE,4BAAA,QAAQ,EAAE,aAAa;AACvB,4BAAA,IAAI,EAAE,qBAAqB;AAC3B,4BAAA,OAAO,EAAE,IAAI;AACd,yBAAA;AACD,wBAAA;AACE,4BAAA,QAAQ,EAAE,aAAa;AACvB,4BAAA,IAAI,EAAE,qBAAqB;AAC5B,yBAAA;AACF,qBAAA;AACF,iBAAA;AACD,gBAAA;AACE,oBAAA,KAAK,EAAE,OAAO;AACd,oBAAA,gBAAgB,EAAE;AAChB,wBAAA;AACE,4BAAA,QAAQ,EAAE,aAAa;AACvB,4BAAA,IAAI,EAAE,qBAAqB;AAC5B,yBAAA;AACD,wBAAA;AACE,4BAAA,QAAQ,EAAE,aAAa;AACvB,4BAAA,IAAI,EAAE,qBAAqB;AAC5B,yBAAA;AACF,qBAAA;AACF,iBAAA;AACF,aAAA;AACF,SAAA;AACF,KAAA;AACD,IAAA,kCAAkC,GAChCD,GAAA,CAAC,iBAAiB,qDAAuD,CAC1E;AACD,IAAA,WAAW,EAAE;AACX,QAAA,KAAK,EAAE;AACL,YAAA;AACE,gBAAA,KAAK,EAAE,UAAU;AACjB,gBAAA,GAAG,EAAE,qBAAqB;AAC3B,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,UAAU;AACjB,gBAAA,GAAG,EAAE,qBAAqB;AAC3B,aAAA;AACD,YAAA;AACE,gBAAA,KAAK,EAAE,UAAU;AACjB,gBAAA,GAAG,EAAE,qBAAqB;AAC3B,aAAA;AACF,SAAA;AACD,QAAA,QAAQ,EAAE,qBAAqB;AAChC,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC;QAChC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QAChC,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QAClC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;AAChC,QAAA,YAAY,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,CAAC;AAC5B,QAAA,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC;AAChC,QAAA,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,KAAK,CAAC;AAClC,QAAA,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,CAAC;AACjC,QAAA,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC;AAC7B,QAAA,YAAY,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC;AAClC,QAAA,YAAY,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC;QAC/B,YAAY,CAAC,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AACjC,KAAA;IACD,uBAAuB,EAAEA,GAAA,CAAC,iBAAiB,EAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,CAA4C;;;;;"}
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
+
import type { Locale } from '../../intl/localeMap';
|
|
1
2
|
import type { Header } from '../Header';
|
|
2
3
|
import type { ComponentProps, ComponentType, MouseEvent, ReactElement, ReactNode } from 'react';
|
|
3
|
-
type Locale = 'ja' | 'en-us' | 'id-id' | 'pt' | 'vi' | 'ko' | 'zh-cn' | 'zh-tw';
|
|
4
4
|
export type LocaleProps = {
|
|
5
|
-
selectedLocale: Locale;
|
|
6
5
|
onSelectLocale: (locale: Locale) => void;
|
|
7
6
|
};
|
|
8
7
|
export type UserInfoProps = {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { type FC, type HTMLAttributes } from 'react';
|
|
2
2
|
import { type VariantProps } from 'tailwind-variants';
|
|
3
3
|
import { type DecoratorsType } from '../../../hooks/useDecorators';
|
|
4
|
-
import type {
|
|
4
|
+
import type { Locale } from '../../../intl/localeMap';
|
|
5
5
|
export type Props = {
|
|
6
6
|
narrow?: boolean;
|
|
7
|
-
localeMap:
|
|
7
|
+
localeMap: Partial<Record<Locale, string>>;
|
|
8
8
|
locale?: string;
|
|
9
9
|
defaultLocale?: string;
|
|
10
10
|
/** コンポーネント内の文言を変更するための関数を設定 */
|
|
@@ -79,11 +79,11 @@ const classNameGenerator = ce({
|
|
|
79
79
|
},
|
|
80
80
|
});
|
|
81
81
|
const LanguageSwitcher = ({ narrow, enableNew, invert = enableNew, decorators, localeMap, locale, defaultLocale, onLanguageSelect, ...rest }) => {
|
|
82
|
-
const { localize } = useIntl();
|
|
82
|
+
const { localize, availableLocales } = useIntl();
|
|
83
83
|
const { locales, defaultCurrentLang } = useMemo(() => ({
|
|
84
|
-
locales: Object.entries(localeMap),
|
|
84
|
+
locales: Object.entries(localeMap).filter(([code]) => availableLocales.includes(code)),
|
|
85
85
|
defaultCurrentLang: Object.keys(localeMap)[0],
|
|
86
|
-
}), [localeMap]);
|
|
86
|
+
}), [localeMap, availableLocales]);
|
|
87
87
|
const decoratorDefaultTexts = useMemo(() => ({
|
|
88
88
|
triggerLabel: DECORATOR_DEFAULT_TEXTS.triggerLabel,
|
|
89
89
|
checkIconAlt: localize({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LanguageSwitcher.js","sources":["../../../../src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["'use client'\n\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\nimport { useIntl } from '../../../intl'\nimport { tabbable } from '../../../libs/tabbable'\nimport { Button } from '../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon, LanguageIcon } from '../../Icon'\n\nimport type {
|
|
1
|
+
{"version":3,"file":"LanguageSwitcher.js","sources":["../../../../src/components/Header/LanguageSwitcher/LanguageSwitcher.tsx"],"sourcesContent":["'use client'\n\nimport {\n type FC,\n type HTMLAttributes,\n type KeyboardEvent,\n type MouseEvent,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { type DecoratorsType, useDecorators } from '../../../hooks/useDecorators'\nimport { useIntl } from '../../../intl'\nimport { tabbable } from '../../../libs/tabbable'\nimport { Button } from '../../Button'\nimport { Dropdown, DropdownContent, DropdownTrigger } from '../../Dropdown'\nimport { FaCaretDownIcon, FaCheckIcon, FaGlobeIcon, LanguageIcon } from '../../Icon'\n\nimport type { Locale } from '../../../intl/localeMap'\n\nexport type Props = {\n narrow?: boolean\n localeMap: Partial<Record<Locale, string>>\n locale?: string\n defaultLocale?: string\n /** コンポーネント内の文言を変更するための関数を設定 */\n decorators?: DecoratorsType<DecoratorKeyTypes>\n /** 言語切替UIで言語を選択した時に発火するコールバック関数 */\n onLanguageSelect?: (code: string) => void\n} & VariantProps<typeof classNameGenerator>\n\ntype ElementProps = Omit<HTMLAttributes<HTMLElement>, keyof Props>\n\n// トリガーはどの言語でも英語のままLanguageと表示するのが好ましいため、intlにはおかない。decoratorは一旦そのままにしている。\nconst DECORATOR_DEFAULT_TEXTS = {\n triggerLabel: 'Language',\n} as const\n\ntype DecoratorKeyTypes = 'checkIconAlt' | keyof typeof DECORATOR_DEFAULT_TEXTS\n\nconst ARROW_KEY_REGEX = /^Arrow(Up|Down|Left|Right)$/\nconst ARROW_UPS_REGEX = /^Arrow(Up|Left)$/\n\nconst onKeyDownContent = (e: KeyboardEvent<HTMLDivElement>) => {\n if (!ARROW_KEY_REGEX.test(e.key)) {\n return\n }\n\n e.preventDefault()\n\n const buttons = tabbable(e.currentTarget)\n const i = buttons.indexOf(e.target as HTMLElement)\n let buttonAt = 0\n\n if (ARROW_UPS_REGEX.test(e.key)) {\n buttonAt = i - 1\n } else if (i + 1 === buttons.length) {\n buttonAt = i + 1\n }\n\n buttons.at(buttonAt)?.focus()\n}\n\nconst classNameGenerator = tv({\n slots: {\n switchButton: [\n 'shr-border-none shr-bg-transparent shr-px-0.25 shr-font-normal shr-text-white shr-transition-transform shr-duration-100',\n 'hover:shr-border-transparent hover:shr-bg-transparent',\n 'focus-visible:shr-border-transparent focus-visible:shr-bg-transparent',\n 'forced-colors:shr-border-shorthand',\n '[&_.smarthr-ui-Icon]:aria-expanded:shr-rotate-180',\n ],\n languageItemsList: ['shr-p-0.5'],\n languageItem: ['shr-flex shr-items-center'],\n languageButton: [\n 'shr-justify-start shr-border-transparent shr-px-0.5 shr-font-normal',\n '[&:not(:has(svg))]:shr-ps-2',\n 'hover:shr-border-transparent',\n ],\n },\n variants: {\n invert: {\n true: {\n switchButton: [\n 'shr-text-black',\n 'hover:shr-bg-white-darken',\n 'focus-visible:shr-bg-white-darken',\n ],\n },\n },\n enableNew: {\n true: {\n switchButton: 'shr-px-0.5',\n },\n },\n },\n})\n\nexport const LanguageSwitcher: FC<Props & ElementProps> = ({\n narrow,\n enableNew,\n invert = enableNew,\n decorators,\n localeMap,\n locale,\n defaultLocale,\n onLanguageSelect,\n ...rest\n}) => {\n const { localize, availableLocales } = useIntl()\n const { locales, defaultCurrentLang } = useMemo(\n () => ({\n locales: Object.entries(localeMap).filter(([code]) => availableLocales.includes(code)),\n defaultCurrentLang: Object.keys(localeMap)[0],\n }),\n [localeMap, availableLocales],\n )\n\n const decoratorDefaultTexts = useMemo(\n () => ({\n triggerLabel: DECORATOR_DEFAULT_TEXTS.triggerLabel,\n checkIconAlt: localize({\n id: 'smarthr-ui/LanguageSwitcher/checkIconAlt',\n defaultText: '選択中',\n }),\n }),\n [localize],\n )\n\n const decorated = useDecorators<DecoratorKeyTypes>(decoratorDefaultTexts, decorators)\n const currentLang = locale || defaultLocale || defaultCurrentLang\n const classNames = useMemo(() => {\n const { languageButton, languageItemsList, languageItem, switchButton } = classNameGenerator()\n\n return {\n languageButton: languageButton(),\n languageItemsList: languageItemsList(),\n languageItem: languageItem(),\n switchButton: switchButton({ invert, enableNew }),\n }\n }, [enableNew, invert])\n\n const onClickLanguageSelect = useMemo(\n () =>\n onLanguageSelect\n ? (e: MouseEvent<HTMLButtonElement>) => {\n onLanguageSelect(e.currentTarget.value)\n }\n : undefined,\n [onLanguageSelect],\n )\n\n return (\n <Dropdown {...rest}>\n <MemoizedDropdownTrigger\n narrow={narrow}\n invert={invert}\n className={classNames.switchButton}\n label={decorated.triggerLabel}\n />\n <DropdownContent role=\"presentation\" onKeyDown={onKeyDownContent}>\n <ul className={classNames.languageItemsList}>\n {locales.map(([code, label]) => (\n <LanguageListItemButton\n key={code}\n code={code}\n className={classNames.languageItem}\n buttonStyle={classNames.languageButton}\n current={currentLang === code}\n onClick={onClickLanguageSelect}\n iconAlt={decorated.checkIconAlt}\n >\n {label}\n </LanguageListItemButton>\n ))}\n </ul>\n </DropdownContent>\n </Dropdown>\n )\n}\n\nconst LanguageListItemButton = memo<{\n code: string\n children: string\n className: string\n buttonStyle: string\n current: boolean\n iconAlt: ReactNode\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ code, children, buttonStyle, className, current, iconAlt, onClick }) => (\n <li key={code} className={className} aria-current={current} lang={code}>\n <Button\n value={code}\n onClick={onClick}\n wide\n prefix={current ? <FaCheckIcon color=\"MAIN\" alt={iconAlt} /> : null}\n className={buttonStyle}\n >\n {children}\n </Button>\n </li>\n))\n\nconst MemoizedDropdownTrigger = memo<\n Pick<Props, 'narrow' | 'invert'> & { className: string; label: ReactNode }\n>(({ narrow, invert, className, label }) => (\n <DropdownTrigger>\n {narrow ? (\n <Button suffix={<FaCaretDownIcon />} className={className}>\n {invert ? <LanguageIcon alt={label} /> : <FaGlobeIcon alt={label} />}\n </Button>\n ) : (\n <Button\n prefix={invert ? <LanguageIcon /> : <FaGlobeIcon />}\n suffix={<FaCaretDownIcon />}\n className={className}\n >\n {label}\n </Button>\n )}\n </DropdownTrigger>\n))\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA;AACA;AACE;;AAKF;AACA;AAEA;;;;;;;;;AAYI;;;AAEA;;;AAIJ;AAEA;AACE;AACE;;;;;;AAMC;;;AAGD;;;;AAIC;AACF;AACD;AACE;AACE;AACE;;;;AAIC;AACF;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACF;AAEM;;;;;AAgBF;AAIH;;;AAIM;AACA;;AAEH;;AAKH;AACA;AACE;;;;;;;AAQF;AAEA;AAGM;AACI;;AAEJ;;AA+BR;AAEA;AAsBA;;"}
|
|
@@ -7,7 +7,7 @@ const classNameGenerator = ce({
|
|
|
7
7
|
base: [
|
|
8
8
|
'smarthr-ui-SpreadsheetTable shr-border-shorthand shr-border-collapse shr-bg-head',
|
|
9
9
|
// th
|
|
10
|
-
'[&_th]:shr-p-0.25 [&_th]:shr-text-sm [&_th]:shr-font-normal [&_th]:shr-text-
|
|
10
|
+
'[&_th]:shr-p-0.25 [&_th]:shr-text-sm [&_th]:shr-font-normal [&_th]:shr-text-black',
|
|
11
11
|
// th + th
|
|
12
12
|
'[&_th_+_th]:shr-border-l-shorthand [&_th_+_th]:shr-border-[theme(backgroundColor[head-darken])]',
|
|
13
13
|
// 左上の角: tr:first-child th:first-child
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SpreadsheetTable.js","sources":["../../../src/components/SpreadsheetTable/SpreadsheetTable.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type FC,\n type PropsWithChildren,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { SpreadsheetTableCorner } from './SpreadsheetTableCorner'\n\ntype Props = PropsWithChildren<{\n data?: ReactNode[][]\n}>\ntype ElementProps = Omit<ComponentPropsWithoutRef<'table'>, keyof Props>\n\nconst classNameGenerator = tv({\n base: [\n 'smarthr-ui-SpreadsheetTable shr-border-shorthand shr-border-collapse shr-bg-head',\n // th\n '[&_th]:shr-p-0.25 [&_th]:shr-text-sm [&_th]:shr-font-normal [&_th]:shr-text-
|
|
1
|
+
{"version":3,"file":"SpreadsheetTable.js","sources":["../../../src/components/SpreadsheetTable/SpreadsheetTable.tsx"],"sourcesContent":["import {\n type ComponentPropsWithoutRef,\n type FC,\n type PropsWithChildren,\n type ReactNode,\n memo,\n useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { SpreadsheetTableCorner } from './SpreadsheetTableCorner'\n\ntype Props = PropsWithChildren<{\n data?: ReactNode[][]\n}>\ntype ElementProps = Omit<ComponentPropsWithoutRef<'table'>, keyof Props>\n\nconst classNameGenerator = tv({\n base: [\n 'smarthr-ui-SpreadsheetTable shr-border-shorthand shr-border-collapse shr-bg-head',\n // th\n '[&_th]:shr-p-0.25 [&_th]:shr-text-sm [&_th]:shr-font-normal [&_th]:shr-text-black',\n // th + th\n '[&_th_+_th]:shr-border-l-shorthand [&_th_+_th]:shr-border-[theme(backgroundColor[head-darken])]',\n // 左上の角: tr:first-child th:first-child\n '[&_tr:first-child_th:first-child]:shr-w-[calc(1em_*_theme(lineHeight.normal))]',\n // tr + tr th\n '[&_tr_+_tr_th]:shr-border-t-shorthand [&_tr_+_tr_th]:shr-border-[theme(backgroundColor[head-darken])]',\n // td\n '[&_td]:shr-border-shorthand [&_td]:shr-bg-white [&_td]:shr-p-0.25 [&_td]:shr-text-sm',\n ],\n})\n\nexport const SpreadsheetTable: FC<Props & ElementProps> = ({\n data,\n className,\n children,\n ...props\n}) => {\n const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n return (\n <table {...props} className={actualClassName}>\n {data && (\n <>\n <MemoizedThead cols={data[0].length} />\n <tbody>\n {data.map((row, i) => (\n <tr key={i}>\n <th>{i + 1}</th>\n {row.map((cell, j) => (\n <td key={`${i}-${j}`}>{cell}</td>\n ))}\n </tr>\n ))}\n </tbody>\n </>\n )}\n {children}\n </table>\n )\n}\n\nconst MemoizedThead = memo<{ cols: number }>(({ cols }) => {\n const columns: ReactNode[] = []\n\n for (let i = 0; i < cols; i++) {\n columns.push(\n <th key={i}>\n {\n // アルファベットを A から自動挿入\n String.fromCharCode(65 + i)\n }\n </th>,\n )\n }\n\n return (\n <thead>\n <tr>\n <SpreadsheetTableCorner />\n {columns}\n </tr>\n </thead>\n )\n})\n"],"names":["tv","_jsxs","_Fragment","_jsx"],"mappings":";;;;;AAiBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,kFAAkF;;QAElF,mFAAmF;;QAEnF,iGAAiG;;QAEjG,gFAAgF;;QAEhF,uGAAuG;;QAEvG,sFAAsF;AACvF,KAAA;AACF,CAAA,CAAC;AAEK,MAAM,gBAAgB,GAA6B,CAAC,EACzD,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,KAAI;AACH,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAErF,IAAA,QACEC,IAAA,CAAA,OAAA,EAAA,EAAA,GAAW,KAAK,EAAE,SAAS,EAAE,eAAe,EAAA,QAAA,EAAA,CACzC,IAAI,KACHA,IAAA,CAAAC,QAAA,EAAA,EAAA,QAAA,EAAA,CACEC,GAAA,CAAC,aAAa,EAAA,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,EAAA,CAAI,EACvCA,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EACG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,MACfF,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CACEE,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAK,CAAC,GAAG,CAAC,EAAA,CAAM,EACf,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,MACfA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAuB,IAAI,EAAA,EAAlB,CAAA,EAAG,CAAC,CAAA,CAAA,EAAI,CAAC,CAAA,CAAE,CAAa,CAClC,CAAC,KAJK,CAAC,CAKL,CACN,CAAC,GACI,CAAA,EAAA,CACP,CACJ,EACA,QAAQ,CAAA,EAAA,CACH;AAEZ;AAEA,MAAM,aAAa,GAAG,IAAI,CAAmB,CAAC,EAAE,IAAI,EAAE,KAAI;IACxD,MAAM,OAAO,GAAgB,EAAE;AAE/B,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,EAAE,EAAE;QAC7B,OAAO,CAAC,IAAI,CACVA,GAAA,CAAA,IAAA,EAAA,EAAA,QAAA;;YAGI,MAAM,CAAC,YAAY,CAAC,EAAE,GAAG,CAAC,CAAC,EAAA,EAHtB,CAAC,CAKL,CACN;IACH;IAEA,QACEA,GAAA,CAAA,OAAA,EAAA,EAAA,QAAA,EACEF,IAAA,CAAA,IAAA,EAAA,EAAA,QAAA,EAAA,CACEE,GAAA,CAAC,sBAAsB,EAAA,EAAA,CAAG,EACzB,OAAO,CAAA,EAAA,CACL,EAAA,CACC;AAEZ,CAAC,CAAC;;;;"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { type FC, type PropsWithChildren } from 'react';
|
|
2
|
-
import
|
|
3
|
-
declare const allLocaleKeys:
|
|
4
|
-
type Props<AvailableLocales extends
|
|
2
|
+
import { type Locale } from './localeMap';
|
|
3
|
+
declare const allLocaleKeys: Locale[];
|
|
4
|
+
type Props<AvailableLocales extends Locale[] = typeof allLocaleKeys> = PropsWithChildren<{
|
|
5
5
|
locale: AvailableLocales[number];
|
|
6
6
|
availableLocales?: AvailableLocales;
|
|
7
7
|
}>;
|
|
8
8
|
export declare const useAvailableLocales: () => ("pt" | "ja" | "ja-easy" | "en-us" | "ko" | "vi" | "zh-cn" | "zh-tw" | "id-id")[];
|
|
9
|
-
export declare const IntlProvider: <AvailableLocales extends
|
|
9
|
+
export declare const IntlProvider: <AvailableLocales extends Locale[] = typeof allLocaleKeys>({ availableLocales, locale, children, }: Props<AvailableLocales>) => ReturnType<FC>;
|
|
10
10
|
export {};
|
package/esm/intl/IntlProvider.js
CHANGED
|
@@ -2,10 +2,11 @@
|
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { createContext, useContext, useMemo } from 'react';
|
|
4
4
|
import { IntlContext, IntlProvider as IntlProvider$1 } from 'react-intl';
|
|
5
|
+
import { localeMap } from './localeMap.js';
|
|
5
6
|
import * as intl_locales_index from './locales/index.js';
|
|
6
7
|
|
|
7
8
|
// Object.keys は常に string[] を返却するが、locales は実行時に変更されないため、as 型キャストを使用することは自明に安全なので使用している
|
|
8
|
-
const allLocaleKeys = Object.keys(
|
|
9
|
+
const allLocaleKeys = Object.keys(localeMap);
|
|
9
10
|
const AvailableLocalesContext = createContext(allLocaleKeys);
|
|
10
11
|
const useAvailableLocales = () => useContext(AvailableLocalesContext);
|
|
11
12
|
const IntlProvider = ({ availableLocales, locale, children, }) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IntlProvider.js","sources":["../../src/intl/IntlProvider.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, createContext, useContext, useMemo } from 'react'\nimport { IntlContext, IntlProvider as ReactIntlProvider } from 'react-intl'\n\nimport * as locales from './locales'\n\n// Object.keys は常に string[] を返却するが、locales は実行時に変更されないため、as 型キャストを使用することは自明に安全なので使用している\nconst allLocaleKeys = Object.keys(
|
|
1
|
+
{"version":3,"file":"IntlProvider.js","sources":["../../src/intl/IntlProvider.tsx"],"sourcesContent":["'use client'\n\nimport { type FC, type PropsWithChildren, createContext, useContext, useMemo } from 'react'\nimport { IntlContext, IntlProvider as ReactIntlProvider } from 'react-intl'\n\nimport { type Locale, localeMap } from './localeMap'\nimport * as locales from './locales'\n\n// Object.keys は常に string[] を返却するが、locales は実行時に変更されないため、as 型キャストを使用することは自明に安全なので使用している\nconst allLocaleKeys = Object.keys(localeMap) as Locale[]\n\ntype Props<AvailableLocales extends Locale[] = typeof allLocaleKeys> = PropsWithChildren<{\n locale: AvailableLocales[number]\n availableLocales?: AvailableLocales\n}>\n\nconst AvailableLocalesContext = createContext<Locale[]>(allLocaleKeys)\n\nexport const useAvailableLocales = () => useContext(AvailableLocalesContext)\n\nexport const IntlProvider = <AvailableLocales extends Locale[] = typeof allLocaleKeys>({\n availableLocales,\n locale,\n children,\n}: Props<AvailableLocales>): ReturnType<FC> => {\n // プロダクト側でIntlProviderを使っている場合、プロダクト側のmessagesとマージして提供するためにContextから取得している\n const intl = useContext(IntlContext)\n const actualMessages = useMemo(() => ({ ...intl?.messages, ...locales[locale] }), [intl, locale])\n\n return (\n <AvailableLocalesContext.Provider value={availableLocales ?? allLocaleKeys}>\n <ReactIntlProvider locale={locale} messages={actualMessages}>\n {children}\n </ReactIntlProvider>\n </AvailableLocalesContext.Provider>\n )\n}\n"],"names":[],"mappings":";;;;;;;AAQA;AACA;AAOA;AAEO;AAEA;;AAML;AACA;;AASF;;"}
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
const localeMap = {
|
|
2
2
|
ja: '日本語',
|
|
3
|
-
'
|
|
3
|
+
'ja-easy': 'やさしい日本語',
|
|
4
4
|
'en-us': 'English',
|
|
5
|
+
ko: '한국어',
|
|
5
6
|
pt: 'Português',
|
|
6
7
|
vi: 'Tiếng Việt',
|
|
7
|
-
ko: '한국어',
|
|
8
8
|
'zh-cn': '简体中文',
|
|
9
9
|
'zh-tw': '繁體中文',
|
|
10
|
+
'id-id': 'Bahasa Indonesia',
|
|
10
11
|
};
|
|
11
12
|
|
|
12
13
|
export { localeMap };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"localeMap.js","sources":["../../src/intl/localeMap.ts"],"sourcesContent":["import type * as locales from './locales'\n\nexport type Locale = keyof typeof locales\n\nexport const localeMap: Record<Locale, string> = {\n ja: '日本語',\n 'ja-easy': 'やさしい日本語',\n 'en-us': 'English',\n ko: '한국어',\n pt: 'Português',\n vi: 'Tiếng Việt',\n 'zh-cn': '简体中文',\n 'zh-tw': '繁體中文',\n 'id-id': 'Bahasa Indonesia',\n}\n"],"names":[],"mappings":"AAIO,MAAM,SAAS,GAA2B;AAC/C,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,SAAS,EAAE,SAAS;AACpB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,EAAE,EAAE,KAAK;AACT,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,OAAO,EAAE,MAAM;AACf,IAAA,OAAO,EAAE,kBAAkB;;;;;"}
|