smarthr-ui 89.0.0 → 90.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/lib/_virtual/index.js +4 -4
- package/lib/_virtual/index2.js +4 -4
- package/lib/_virtual/index3.js +4 -4
- package/lib/components/AppHeader/hooks/useAppLauncher.cjs +4 -4
- package/lib/components/AppHeader/hooks/useAppLauncher.cjs.map +1 -1
- package/lib/components/AppHeader/hooks/useAppLauncher.d.ts +1 -1
- package/lib/components/AppHeader/hooks/useAppLauncher.js +4 -4
- package/lib/components/AppHeader/hooks/useAppLauncher.js.map +1 -1
- package/lib/components/AppHeader/types.d.ts +1 -1
- package/lib/components/Combobox/MultiCombobox/MultiCombobox.js +1 -1
- package/lib/components/Combobox/SingleCombobox/SingleCombobox.js +1 -1
- package/lib/components/Combobox/helper.js +1 -1
- package/lib/components/Combobox/useOptions.js +1 -1
- package/lib/components/Dialog/ModelessDialog/ModelessDialog.cjs +54 -48
- package/lib/components/Dialog/ModelessDialog/ModelessDialog.cjs.map +1 -1
- package/lib/components/Dialog/ModelessDialog/ModelessDialog.d.ts +3 -9
- package/lib/components/Dialog/ModelessDialog/ModelessDialog.js +56 -50
- package/lib/components/Dialog/ModelessDialog/ModelessDialog.js.map +1 -1
- package/lib/components/Dropdown/DropdownMenuButton/DropdownMenuButton.js +1 -1
- package/lib/components/Dropdown/FilterDropdown/FilterDropdown.js +1 -1
- package/lib/components/FormControl/FormControl.js +1 -1
- package/lib/components/Heading/PageHeading/PageHeading.js +1 -1
- package/lib/components/Select/Select.cjs +3 -15
- package/lib/components/Select/Select.cjs.map +1 -1
- package/lib/components/Select/Select.d.ts +2 -4
- package/lib/components/Select/Select.js +3 -15
- package/lib/components/Select/Select.js.map +1 -1
- package/lib/components/Tooltip/Tooltip.js +1 -1
- package/lib/intl/locales/en_us.cjs +3 -2
- package/lib/intl/locales/en_us.cjs.map +1 -1
- package/lib/intl/locales/en_us.d.ts +3 -2
- package/lib/intl/locales/en_us.js +3 -2
- package/lib/intl/locales/en_us.js.map +1 -1
- package/lib/intl/locales/id_id.cjs +3 -2
- package/lib/intl/locales/id_id.cjs.map +1 -1
- package/lib/intl/locales/id_id.d.ts +3 -2
- package/lib/intl/locales/id_id.js +3 -2
- package/lib/intl/locales/id_id.js.map +1 -1
- package/lib/intl/locales/ja.cjs +3 -2
- package/lib/intl/locales/ja.cjs.map +1 -1
- package/lib/intl/locales/ja.d.ts +3 -2
- package/lib/intl/locales/ja.js +3 -2
- package/lib/intl/locales/ja.js.map +1 -1
- package/lib/intl/locales/ja_easy.cjs +3 -2
- package/lib/intl/locales/ja_easy.cjs.map +1 -1
- package/lib/intl/locales/ja_easy.d.ts +3 -2
- package/lib/intl/locales/ja_easy.js +3 -2
- package/lib/intl/locales/ja_easy.js.map +1 -1
- package/lib/intl/locales/ko_kr.cjs +3 -2
- package/lib/intl/locales/ko_kr.cjs.map +1 -1
- package/lib/intl/locales/ko_kr.d.ts +3 -2
- package/lib/intl/locales/ko_kr.js +3 -2
- package/lib/intl/locales/ko_kr.js.map +1 -1
- package/lib/intl/locales/pt_br.cjs +3 -2
- package/lib/intl/locales/pt_br.cjs.map +1 -1
- package/lib/intl/locales/pt_br.d.ts +3 -2
- package/lib/intl/locales/pt_br.js +3 -2
- package/lib/intl/locales/pt_br.js.map +1 -1
- package/lib/intl/locales/vi_vn.cjs +3 -2
- package/lib/intl/locales/vi_vn.cjs.map +1 -1
- package/lib/intl/locales/vi_vn.d.ts +3 -2
- package/lib/intl/locales/vi_vn.js +3 -2
- package/lib/intl/locales/vi_vn.js.map +1 -1
- package/lib/intl/locales/zh_hans_cn.cjs +3 -2
- package/lib/intl/locales/zh_hans_cn.cjs.map +1 -1
- package/lib/intl/locales/zh_hans_cn.d.ts +3 -2
- package/lib/intl/locales/zh_hans_cn.js +3 -2
- package/lib/intl/locales/zh_hans_cn.js.map +1 -1
- package/lib/intl/locales/zh_hant_tw.cjs +3 -2
- package/lib/intl/locales/zh_hant_tw.cjs.map +1 -1
- package/lib/intl/locales/zh_hant_tw.d.ts +3 -2
- package/lib/intl/locales/zh_hant_tw.js +3 -2
- package/lib/intl/locales/zh_hant_tw.js.map +1 -1
- package/lib/intl/useIntl.cjs +10 -10
- package/lib/intl/useIntl.cjs.map +1 -1
- package/lib/intl/useIntl.js +10 -10
- package/lib/intl/useIntl.js.map +1 -1
- package/lib/libs/lodash.js +2 -2
- package/metadata.json +1 -1
- package/package.json +1 -1
- package/smarthr-ui.css +31 -4
package/lib/_virtual/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
|
|
2
|
-
import { __require as
|
|
2
|
+
import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var lodash_mergeExports = requireLodash_merge();
|
|
5
|
+
var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { _merge as default };
|
|
8
8
|
//# sourceMappingURL=index.js.map
|
package/lib/_virtual/index2.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
|
|
2
|
-
import { __require as
|
|
2
|
+
import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var lodash_rangeExports = requireLodash_range();
|
|
5
|
+
var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { _range as default };
|
|
8
8
|
//# sourceMappingURL=index2.js.map
|
package/lib/_virtual/index3.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
|
|
2
|
-
import { __require as
|
|
2
|
+
import { __require as requireReactInnertext } from './../vendor/.pnpm/react-innertext@1.1.5_@types_react@18.3.28_react@19.2.4/vendor/react-innertext/index.js';
|
|
3
3
|
|
|
4
|
-
var
|
|
5
|
-
var
|
|
4
|
+
var reactInnertextExports = requireReactInnertext();
|
|
5
|
+
var innerText = /*@__PURE__*/getDefaultExportFromCjs(reactInnertextExports);
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { innerText as default };
|
|
8
8
|
//# sourceMappingURL=index3.js.map
|
|
@@ -57,15 +57,15 @@ const useAppLauncher = (baseFeatures) => {
|
|
|
57
57
|
const sortFeatures = (features, { page, sortType, mode, searchQuery, }) => {
|
|
58
58
|
if (mode !== 'search' && page === 'favorite') {
|
|
59
59
|
const filtered = features.filter((item) => item.favorite);
|
|
60
|
-
// feature の position の数値の順に並び替える。position が null の場合は最後に並べる
|
|
60
|
+
// feature の position の数値の順に並び替える。position が null または undefined の場合は最後に並べる
|
|
61
61
|
return filtered.sort((a, b) => {
|
|
62
|
-
if (a.position === null) {
|
|
63
|
-
if (b.position === null) {
|
|
62
|
+
if (a.position === null || a.position === undefined) {
|
|
63
|
+
if (b.position === null || b.position === undefined) {
|
|
64
64
|
return 0;
|
|
65
65
|
}
|
|
66
66
|
return 1;
|
|
67
67
|
}
|
|
68
|
-
else if (b.position === null) {
|
|
68
|
+
else if (b.position === null || b.position === undefined) {
|
|
69
69
|
return -1;
|
|
70
70
|
}
|
|
71
71
|
return a.position - b.position;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAppLauncher.cjs","sources":["../../../../src/components/AppHeader/hooks/useAppLauncher.ts"],"sourcesContent":["import { type ChangeEvent, useCallback, useEffect, useState } from 'react'\n\nimport type { Launcher } from '../types'\n\nexport const useAppLauncher = (baseFeatures: Array<Launcher['feature']>) => {\n const [page, setPage] = useState<Launcher['page']>('favorite')\n const [mode, setMode] = useState<Launcher['mode']>('default')\n const [sortType, setSortType] = useState<Launcher['sortType']>('default')\n const [searchQuery, setSearchQuery] = useState('')\n const [features, setFeatures] = useState<Array<Launcher['feature']>>(\n sortFeatures(baseFeatures, {\n page,\n mode,\n sortType,\n searchQuery,\n }),\n )\n\n useEffect(() => {\n setFeatures(\n sortFeatures(baseFeatures, {\n page,\n sortType,\n mode,\n searchQuery,\n }),\n )\n }, [baseFeatures, page, mode, sortType, searchQuery])\n\n const changePage = useCallback((newPage: Launcher['page']) => {\n setPage(newPage)\n setMode('default')\n setSearchQuery('')\n }, [])\n\n const changeSearchQuery = useCallback(\n (q: string) => {\n setSearchQuery(q)\n\n if (mode !== 'search') {\n setMode('search')\n } else if (q === '') {\n setMode('default')\n }\n },\n [mode],\n )\n\n const onChangeSearchQuery = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => changeSearchQuery(e.currentTarget.value),\n [changeSearchQuery],\n )\n const onClickClearSearchQuery = useCallback(() => {\n // HINT: 別のスレッドにしないとドロップダウンが閉じてしまう\n requestAnimationFrame(() => {\n changeSearchQuery('')\n })\n }, [changeSearchQuery])\n\n return {\n features,\n page,\n mode,\n sortType,\n searchQuery,\n changePage,\n setSortType,\n onChangeSearchQuery,\n onClickClearSearchQuery,\n }\n}\n\nconst sortFeatures = (\n features: Array<Launcher['feature']>,\n {\n page,\n sortType,\n mode,\n searchQuery,\n }: {\n page: Launcher['page']\n sortType: Launcher['sortType']\n mode: Launcher['mode']\n searchQuery: string\n },\n) => {\n if (mode !== 'search' && page === 'favorite') {\n const filtered = features.filter((item) => item.favorite)\n\n // feature の position の数値の順に並び替える。position が null の場合は最後に並べる\n return filtered.sort((a, b) => {\n if (a.position === null) {\n if (b.position === null) {\n return 0\n }\n\n return 1\n } else if (b.position === null) {\n return -1\n }\n\n return a.position - b.position\n })\n }\n\n const looseSearchQuery = normalize(searchQuery)\n const featuresRes =\n mode === 'search'\n ? features.filter((feature) => looseInclude(looseSearchQuery, feature.name))\n : [...features]\n\n switch (sortType) {\n case 'name/asc':\n return featuresRes.sort((a, b) => a.name.localeCompare(b.name))\n case 'name/desc':\n return featuresRes.sort((a, b) => b.name.localeCompare(a.name))\n }\n\n return featuresRes\n}\n\nexport const looseInclude = (looseSearchQuery: string, featureName: string) =>\n // HINT: normalizeは1文字ずつ変換処理を行う関係で思いため、変換せずにマッチするかどうかを確認する\n featureName.includes(looseSearchQuery) || normalize(featureName).includes(looseSearchQuery)\n\n// アルファベットの大文字小文字は同じものとして扱う。カタカナとひらがなも同じものとして扱う。\nconst normalize = (str: string) =>\n str.toLowerCase().replace(NORMALIZE_REGEX, (c) => String.fromCharCode(c.charCodeAt(0) - 0x60))\n\nconst NORMALIZE_REGEX = /[\\u30a1-\\u30f6]/g\n"],"names":["useState","useEffect","useCallback"],"mappings":";;;;AAIO,MAAM,cAAc,GAAG,CAAC,YAAwC,KAAI;IACzE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAmB,UAAU,CAAC;IAC9D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAmB,SAAS,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAuB,SAAS,CAAC;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CACtC,YAAY,CAAC,YAAY,EAAE;QACzB,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC,CACH;IAEDC,eAAS,CAAC,MAAK;AACb,QAAA,WAAW,CACT,YAAY,CAAC,YAAY,EAAE;YACzB,IAAI;YACJ,QAAQ;YACR,IAAI;YACJ,WAAW;AACZ,SAAA,CAAC,CACH;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAErD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,CAAC,OAAyB,KAAI;QAC3D,OAAO,CAAC,OAAO,CAAC;QAChB,OAAO,CAAC,SAAS,CAAC;QAClB,cAAc,CAAC,EAAE,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CACnC,CAAC,CAAS,KAAI;QACZ,cAAc,CAAC,CAAC,CAAC;AAEjB,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,OAAO,CAAC,QAAQ,CAAC;QACnB;AAAO,aAAA,IAAI,CAAC,KAAK,EAAE,EAAE;YACnB,OAAO,CAAC,SAAS,CAAC;QACpB;AACF,IAAA,CAAC,EACD,CAAC,IAAI,CAAC,CACP;IAED,MAAM,mBAAmB,GAAGA,iBAAW,CACrC,CAAC,CAAgC,KAAK,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAC9E,CAAC,iBAAiB,CAAC,CACpB;AACD,IAAA,MAAM,uBAAuB,GAAGA,iBAAW,CAAC,MAAK;;QAE/C,qBAAqB,CAAC,MAAK;YACzB,iBAAiB,CAAC,EAAE,CAAC;AACvB,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IAEvB,OAAO;QACL,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,WAAW;QACX,UAAU;QACV,WAAW;QACX,mBAAmB;QACnB,uBAAuB;KACxB;AACH;AAEA,MAAM,YAAY,GAAG,CACnB,QAAoC,EACpC,EACE,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,WAAW,GAMZ,KACC;IACF,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE;AAC5C,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC;;QAGzD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"useAppLauncher.cjs","sources":["../../../../src/components/AppHeader/hooks/useAppLauncher.ts"],"sourcesContent":["import { type ChangeEvent, useCallback, useEffect, useState } from 'react'\n\nimport type { Launcher } from '../types'\n\nexport const useAppLauncher = (baseFeatures: Array<Launcher['feature']>) => {\n const [page, setPage] = useState<Launcher['page']>('favorite')\n const [mode, setMode] = useState<Launcher['mode']>('default')\n const [sortType, setSortType] = useState<Launcher['sortType']>('default')\n const [searchQuery, setSearchQuery] = useState('')\n const [features, setFeatures] = useState<Array<Launcher['feature']>>(\n sortFeatures(baseFeatures, {\n page,\n mode,\n sortType,\n searchQuery,\n }),\n )\n\n useEffect(() => {\n setFeatures(\n sortFeatures(baseFeatures, {\n page,\n sortType,\n mode,\n searchQuery,\n }),\n )\n }, [baseFeatures, page, mode, sortType, searchQuery])\n\n const changePage = useCallback((newPage: Launcher['page']) => {\n setPage(newPage)\n setMode('default')\n setSearchQuery('')\n }, [])\n\n const changeSearchQuery = useCallback(\n (q: string) => {\n setSearchQuery(q)\n\n if (mode !== 'search') {\n setMode('search')\n } else if (q === '') {\n setMode('default')\n }\n },\n [mode],\n )\n\n const onChangeSearchQuery = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => changeSearchQuery(e.currentTarget.value),\n [changeSearchQuery],\n )\n const onClickClearSearchQuery = useCallback(() => {\n // HINT: 別のスレッドにしないとドロップダウンが閉じてしまう\n requestAnimationFrame(() => {\n changeSearchQuery('')\n })\n }, [changeSearchQuery])\n\n return {\n features,\n page,\n mode,\n sortType,\n searchQuery,\n changePage,\n setSortType,\n onChangeSearchQuery,\n onClickClearSearchQuery,\n }\n}\n\nconst sortFeatures = (\n features: Array<Launcher['feature']>,\n {\n page,\n sortType,\n mode,\n searchQuery,\n }: {\n page: Launcher['page']\n sortType: Launcher['sortType']\n mode: Launcher['mode']\n searchQuery: string\n },\n) => {\n if (mode !== 'search' && page === 'favorite') {\n const filtered = features.filter((item) => item.favorite)\n\n // feature の position の数値の順に並び替える。position が null または undefined の場合は最後に並べる\n return filtered.sort((a, b) => {\n if (a.position === null || a.position === undefined) {\n if (b.position === null || b.position === undefined) {\n return 0\n }\n\n return 1\n } else if (b.position === null || b.position === undefined) {\n return -1\n }\n\n return a.position - b.position\n })\n }\n\n const looseSearchQuery = normalize(searchQuery)\n const featuresRes =\n mode === 'search'\n ? features.filter((feature) => looseInclude(looseSearchQuery, feature.name))\n : [...features]\n\n switch (sortType) {\n case 'name/asc':\n return featuresRes.sort((a, b) => a.name.localeCompare(b.name))\n case 'name/desc':\n return featuresRes.sort((a, b) => b.name.localeCompare(a.name))\n }\n\n return featuresRes\n}\n\nexport const looseInclude = (looseSearchQuery: string, featureName: string) =>\n // HINT: normalizeは1文字ずつ変換処理を行う関係で思いため、変換せずにマッチするかどうかを確認する\n featureName.includes(looseSearchQuery) || normalize(featureName).includes(looseSearchQuery)\n\n// アルファベットの大文字小文字は同じものとして扱う。カタカナとひらがなも同じものとして扱う。\nconst normalize = (str: string) =>\n str.toLowerCase().replace(NORMALIZE_REGEX, (c) => String.fromCharCode(c.charCodeAt(0) - 0x60))\n\nconst NORMALIZE_REGEX = /[\\u30a1-\\u30f6]/g\n"],"names":["useState","useEffect","useCallback"],"mappings":";;;;AAIO,MAAM,cAAc,GAAG,CAAC,YAAwC,KAAI;IACzE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAmB,UAAU,CAAC;IAC9D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAmB,SAAS,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CAAuB,SAAS,CAAC;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,EAAE,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGA,cAAQ,CACtC,YAAY,CAAC,YAAY,EAAE;QACzB,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC,CACH;IAEDC,eAAS,CAAC,MAAK;AACb,QAAA,WAAW,CACT,YAAY,CAAC,YAAY,EAAE;YACzB,IAAI;YACJ,QAAQ;YACR,IAAI;YACJ,WAAW;AACZ,SAAA,CAAC,CACH;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAErD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,CAAC,OAAyB,KAAI;QAC3D,OAAO,CAAC,OAAO,CAAC;QAChB,OAAO,CAAC,SAAS,CAAC;QAClB,cAAc,CAAC,EAAE,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,iBAAiB,GAAGA,iBAAW,CACnC,CAAC,CAAS,KAAI;QACZ,cAAc,CAAC,CAAC,CAAC;AAEjB,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,OAAO,CAAC,QAAQ,CAAC;QACnB;AAAO,aAAA,IAAI,CAAC,KAAK,EAAE,EAAE;YACnB,OAAO,CAAC,SAAS,CAAC;QACpB;AACF,IAAA,CAAC,EACD,CAAC,IAAI,CAAC,CACP;IAED,MAAM,mBAAmB,GAAGA,iBAAW,CACrC,CAAC,CAAgC,KAAK,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAC9E,CAAC,iBAAiB,CAAC,CACpB;AACD,IAAA,MAAM,uBAAuB,GAAGA,iBAAW,CAAC,MAAK;;QAE/C,qBAAqB,CAAC,MAAK;YACzB,iBAAiB,CAAC,EAAE,CAAC;AACvB,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IAEvB,OAAO;QACL,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,WAAW;QACX,UAAU;QACV,WAAW;QACX,mBAAmB;QACnB,uBAAuB;KACxB;AACH;AAEA,MAAM,YAAY,GAAG,CACnB,QAAoC,EACpC,EACE,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,WAAW,GAMZ,KACC;IACF,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE;AAC5C,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC;;QAGzD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,CAAC,QAAQ,KAAK,SAAS,EAAE;AACnD,gBAAA,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,CAAC,QAAQ,KAAK,SAAS,EAAE;AACnD,oBAAA,OAAO,CAAC;gBACV;AAEA,gBAAA,OAAO,CAAC;YACV;AAAO,iBAAA,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,IAAI,CAAC,CAAC,QAAQ,KAAK,SAAS,EAAE;gBAC1D,OAAO,EAAE;YACX;AAEA,YAAA,OAAO,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,QAAQ;AAChC,QAAA,CAAC,CAAC;IACJ;AAEA,IAAA,MAAM,gBAAgB,GAAG,SAAS,CAAC,WAAW,CAAC;AAC/C,IAAA,MAAM,WAAW,GACf,IAAI,KAAK;AACP,UAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,OAAO,KAAK,YAAY,CAAC,gBAAgB,EAAE,OAAO,CAAC,IAAI,CAAC;AAC3E,UAAE,CAAC,GAAG,QAAQ,CAAC;IAEnB,QAAQ,QAAQ;AACd,QAAA,KAAK,UAAU;YACb,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;AACjE,QAAA,KAAK,WAAW;YACd,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;;AAGnE,IAAA,OAAO,WAAW;AACpB,CAAC;MAEY,YAAY,GAAG,CAAC,gBAAwB,EAAE,WAAmB;AACxE;AACA,WAAW,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,SAAS,CAAC,WAAW,CAAC,CAAC,QAAQ,CAAC,gBAAgB;AAE5F;AACA,MAAM,SAAS,GAAG,CAAC,GAAW,KAC5B,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC,KAAK,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;AAEhG,MAAM,eAAe,GAAG,kBAAkB;;;;;"}
|
|
@@ -55,15 +55,15 @@ const useAppLauncher = (baseFeatures) => {
|
|
|
55
55
|
const sortFeatures = (features, { page, sortType, mode, searchQuery, }) => {
|
|
56
56
|
if (mode !== 'search' && page === 'favorite') {
|
|
57
57
|
const filtered = features.filter((item) => item.favorite);
|
|
58
|
-
// feature の position の数値の順に並び替える。position が null の場合は最後に並べる
|
|
58
|
+
// feature の position の数値の順に並び替える。position が null または undefined の場合は最後に並べる
|
|
59
59
|
return filtered.sort((a, b) => {
|
|
60
|
-
if (a.position === null) {
|
|
61
|
-
if (b.position === null) {
|
|
60
|
+
if (a.position === null || a.position === undefined) {
|
|
61
|
+
if (b.position === null || b.position === undefined) {
|
|
62
62
|
return 0;
|
|
63
63
|
}
|
|
64
64
|
return 1;
|
|
65
65
|
}
|
|
66
|
-
else if (b.position === null) {
|
|
66
|
+
else if (b.position === null || b.position === undefined) {
|
|
67
67
|
return -1;
|
|
68
68
|
}
|
|
69
69
|
return a.position - b.position;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useAppLauncher.js","sources":["../../../../src/components/AppHeader/hooks/useAppLauncher.ts"],"sourcesContent":["import { type ChangeEvent, useCallback, useEffect, useState } from 'react'\n\nimport type { Launcher } from '../types'\n\nexport const useAppLauncher = (baseFeatures: Array<Launcher['feature']>) => {\n const [page, setPage] = useState<Launcher['page']>('favorite')\n const [mode, setMode] = useState<Launcher['mode']>('default')\n const [sortType, setSortType] = useState<Launcher['sortType']>('default')\n const [searchQuery, setSearchQuery] = useState('')\n const [features, setFeatures] = useState<Array<Launcher['feature']>>(\n sortFeatures(baseFeatures, {\n page,\n mode,\n sortType,\n searchQuery,\n }),\n )\n\n useEffect(() => {\n setFeatures(\n sortFeatures(baseFeatures, {\n page,\n sortType,\n mode,\n searchQuery,\n }),\n )\n }, [baseFeatures, page, mode, sortType, searchQuery])\n\n const changePage = useCallback((newPage: Launcher['page']) => {\n setPage(newPage)\n setMode('default')\n setSearchQuery('')\n }, [])\n\n const changeSearchQuery = useCallback(\n (q: string) => {\n setSearchQuery(q)\n\n if (mode !== 'search') {\n setMode('search')\n } else if (q === '') {\n setMode('default')\n }\n },\n [mode],\n )\n\n const onChangeSearchQuery = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => changeSearchQuery(e.currentTarget.value),\n [changeSearchQuery],\n )\n const onClickClearSearchQuery = useCallback(() => {\n // HINT: 別のスレッドにしないとドロップダウンが閉じてしまう\n requestAnimationFrame(() => {\n changeSearchQuery('')\n })\n }, [changeSearchQuery])\n\n return {\n features,\n page,\n mode,\n sortType,\n searchQuery,\n changePage,\n setSortType,\n onChangeSearchQuery,\n onClickClearSearchQuery,\n }\n}\n\nconst sortFeatures = (\n features: Array<Launcher['feature']>,\n {\n page,\n sortType,\n mode,\n searchQuery,\n }: {\n page: Launcher['page']\n sortType: Launcher['sortType']\n mode: Launcher['mode']\n searchQuery: string\n },\n) => {\n if (mode !== 'search' && page === 'favorite') {\n const filtered = features.filter((item) => item.favorite)\n\n // feature の position の数値の順に並び替える。position が null の場合は最後に並べる\n return filtered.sort((a, b) => {\n if (a.position === null) {\n if (b.position === null) {\n return 0\n }\n\n return 1\n } else if (b.position === null) {\n return -1\n }\n\n return a.position - b.position\n })\n }\n\n const looseSearchQuery = normalize(searchQuery)\n const featuresRes =\n mode === 'search'\n ? features.filter((feature) => looseInclude(looseSearchQuery, feature.name))\n : [...features]\n\n switch (sortType) {\n case 'name/asc':\n return featuresRes.sort((a, b) => a.name.localeCompare(b.name))\n case 'name/desc':\n return featuresRes.sort((a, b) => b.name.localeCompare(a.name))\n }\n\n return featuresRes\n}\n\nexport const looseInclude = (looseSearchQuery: string, featureName: string) =>\n // HINT: normalizeは1文字ずつ変換処理を行う関係で思いため、変換せずにマッチするかどうかを確認する\n featureName.includes(looseSearchQuery) || normalize(featureName).includes(looseSearchQuery)\n\n// アルファベットの大文字小文字は同じものとして扱う。カタカナとひらがなも同じものとして扱う。\nconst normalize = (str: string) =>\n str.toLowerCase().replace(NORMALIZE_REGEX, (c) => String.fromCharCode(c.charCodeAt(0) - 0x60))\n\nconst NORMALIZE_REGEX = /[\\u30a1-\\u30f6]/g\n"],"names":[],"mappings":";;AAIO,MAAM,cAAc,GAAG,CAAC,YAAwC,KAAI;IACzE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,UAAU,CAAC;IAC9D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAmB,SAAS,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAuB,SAAS,CAAC;IACzE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,YAAY,CAAC,YAAY,EAAE;QACzB,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,WAAW;AACZ,KAAA,CAAC,CACH;IAED,SAAS,CAAC,MAAK;AACb,QAAA,WAAW,CACT,YAAY,CAAC,YAAY,EAAE;YACzB,IAAI;YACJ,QAAQ;YACR,IAAI;YACJ,WAAW;AACZ,SAAA,CAAC,CACH;AACH,IAAA,CAAC,EAAE,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;AAErD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,OAAyB,KAAI;QAC3D,OAAO,CAAC,OAAO,CAAC;QAChB,OAAO,CAAC,SAAS,CAAC;QAClB,cAAc,CAAC,EAAE,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAS,KAAI;QACZ,cAAc,CAAC,CAAC,CAAC;AAEjB,QAAA,IAAI,IAAI,KAAK,QAAQ,EAAE;YACrB,OAAO,CAAC,QAAQ,CAAC;QACnB;AAAO,aAAA,IAAI,CAAC,KAAK,EAAE,EAAE;YACnB,OAAO,CAAC,SAAS,CAAC;QACpB;AACF,IAAA,CAAC,EACD,CAAC,IAAI,CAAC,CACP;IAED,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,CAAgC,KAAK,iBAAiB,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,EAC9E,CAAC,iBAAiB,CAAC,CACpB;AACD,IAAA,MAAM,uBAAuB,GAAG,WAAW,CAAC,MAAK;;QAE/C,qBAAqB,CAAC,MAAK;YACzB,iBAAiB,CAAC,EAAE,CAAC;AACvB,QAAA,CAAC,CAAC;AACJ,IAAA,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IAEvB,OAAO;QACL,QAAQ;QACR,IAAI;QACJ,IAAI;QACJ,QAAQ;QACR,WAAW;QACX,UAAU;QACV,WAAW;QACX,mBAAmB;QACnB,uBAAuB;KACxB;AACH;AAEA,MAAM,YAAY,GAAG,CACnB,QAAoC,EACpC,EACE,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,WAAW,GAMZ,KACC;IACF,IAAI,IAAI,KAAK,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE;AAC5C,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC;;QAGzD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAI;AAC5B,YAAA,IAAI,CAAC,CAAC,QAAQ,KAAK,IAAI,EAAE;
|
|
1
|
+
{"version":3,"file":"useAppLauncher.js","sources":["../../../../src/components/AppHeader/hooks/useAppLauncher.ts"],"sourcesContent":["import { type ChangeEvent, useCallback, useEffect, useState } from 'react'\n\nimport type { Launcher } from '../types'\n\nexport const useAppLauncher = (baseFeatures: Array<Launcher['feature']>) => {\n const [page, setPage] = useState<Launcher['page']>('favorite')\n const [mode, setMode] = useState<Launcher['mode']>('default')\n const [sortType, setSortType] = useState<Launcher['sortType']>('default')\n const [searchQuery, setSearchQuery] = useState('')\n const [features, setFeatures] = useState<Array<Launcher['feature']>>(\n sortFeatures(baseFeatures, {\n page,\n mode,\n sortType,\n searchQuery,\n }),\n )\n\n useEffect(() => {\n setFeatures(\n sortFeatures(baseFeatures, {\n page,\n sortType,\n mode,\n searchQuery,\n }),\n )\n }, [baseFeatures, page, mode, sortType, searchQuery])\n\n const changePage = useCallback((newPage: Launcher['page']) => {\n setPage(newPage)\n setMode('default')\n setSearchQuery('')\n }, [])\n\n const changeSearchQuery = useCallback(\n (q: string) => {\n setSearchQuery(q)\n\n if (mode !== 'search') {\n setMode('search')\n } else if (q === '') {\n setMode('default')\n }\n },\n [mode],\n )\n\n const onChangeSearchQuery = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => changeSearchQuery(e.currentTarget.value),\n [changeSearchQuery],\n )\n const onClickClearSearchQuery = useCallback(() => {\n // HINT: 別のスレッドにしないとドロップダウンが閉じてしまう\n requestAnimationFrame(() => {\n changeSearchQuery('')\n })\n }, [changeSearchQuery])\n\n return {\n features,\n page,\n mode,\n sortType,\n searchQuery,\n changePage,\n setSortType,\n onChangeSearchQuery,\n onClickClearSearchQuery,\n }\n}\n\nconst sortFeatures = (\n features: Array<Launcher['feature']>,\n {\n page,\n sortType,\n mode,\n searchQuery,\n }: {\n page: Launcher['page']\n sortType: Launcher['sortType']\n mode: Launcher['mode']\n searchQuery: string\n },\n) => {\n if (mode !== 'search' && page === 'favorite') {\n const filtered = features.filter((item) => item.favorite)\n\n // feature の position の数値の順に並び替える。position が null または undefined の場合は最後に並べる\n return filtered.sort((a, b) => {\n if (a.position === null || a.position === undefined) {\n if (b.position === null || b.position === undefined) {\n return 0\n }\n\n return 1\n } else if (b.position === null || b.position === undefined) {\n return -1\n }\n\n return a.position - b.position\n })\n }\n\n const looseSearchQuery = normalize(searchQuery)\n const featuresRes =\n mode === 'search'\n ? features.filter((feature) => looseInclude(looseSearchQuery, feature.name))\n : [...features]\n\n switch (sortType) {\n case 'name/asc':\n return featuresRes.sort((a, b) => a.name.localeCompare(b.name))\n case 'name/desc':\n return featuresRes.sort((a, b) => b.name.localeCompare(a.name))\n }\n\n return featuresRes\n}\n\nexport const looseInclude = (looseSearchQuery: string, featureName: string) =>\n // HINT: normalizeは1文字ずつ変換処理を行う関係で思いため、変換せずにマッチするかどうかを確認する\n featureName.includes(looseSearchQuery) || normalize(featureName).includes(looseSearchQuery)\n\n// アルファベットの大文字小文字は同じものとして扱う。カタカナとひらがなも同じものとして扱う。\nconst normalize = (str: string) =>\n str.toLowerCase().replace(NORMALIZE_REGEX, (c) => String.fromCharCode(c.charCodeAt(0) - 0x60))\n\nconst NORMALIZE_REGEX = /[\\u30a1-\\u30f6]/g\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { memo, useMemo, useRef, useState, useCallback, useImperativeHandle, useEffect, useId } from 'react';
|
|
4
|
-
import innerText from '../../../_virtual/
|
|
4
|
+
import innerText from '../../../_virtual/index3.js';
|
|
5
5
|
import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
|
|
6
6
|
import { useOuterClick } from '../../../hooks/useOuterClick.js';
|
|
7
7
|
import '../../../intl/IntlProvider.js';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
3
3
|
import { useRef, useState, useImperativeHandle, useCallback, useMemo, useEffect } from 'react';
|
|
4
|
-
import innerText from '../../../_virtual/
|
|
4
|
+
import innerText from '../../../_virtual/index3.js';
|
|
5
5
|
import { tv as ce } from './../../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
|
|
6
6
|
import { useClick } from '../../../hooks/useClick.js';
|
|
7
7
|
import { useDecorators } from '../../../hooks/useDecorators.js';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useCallback, useId, useMemo } from 'react';
|
|
2
|
-
import innerText from '../../_virtual/
|
|
2
|
+
import innerText from '../../_virtual/index3.js';
|
|
3
3
|
import { areItemsEqual, convertMatchableString } from './helper.js';
|
|
4
4
|
|
|
5
5
|
const defaultIsItemSelected = (targetItem, selectedItems) => selectedItems.some((item) => areItemsEqual(item, targetItem));
|
|
@@ -10,6 +10,7 @@ require('../../../intl/IntlProvider.cjs');
|
|
|
10
10
|
var intl_useIntl = require('../../../intl/useIntl.cjs');
|
|
11
11
|
require('react-intl');
|
|
12
12
|
require('../../../_virtual/dayjs.min.cjs');
|
|
13
|
+
var libs_debounce = require('../../../libs/debounce.cjs');
|
|
13
14
|
require('../../../themes/tailwind/TailwindConfig.cjs');
|
|
14
15
|
var themes_tailwind_size = require('../../../themes/tailwind/size.cjs');
|
|
15
16
|
var components_Base_Base = require('../../Base/Base.cjs');
|
|
@@ -30,16 +31,17 @@ const classNameGenerator = index.tv({
|
|
|
30
31
|
slots: {
|
|
31
32
|
overlap: 'shr-inset-[unset]',
|
|
32
33
|
wrapper: 'smarthr-ui-ModelessDialog shr-fixed shr-flex shr-flex-col',
|
|
33
|
-
headerEl:
|
|
34
|
-
|
|
35
|
-
'
|
|
36
|
-
|
|
34
|
+
headerEl: [
|
|
35
|
+
'smarthr-ui-ModelessDialog-header shr-border-b-shorthand shr-relative shr-flex shr-cursor-move shr-items-center shr-rounded-tl-l shr-rounded-tr-l shr-pe-1 shr-ps-1.5',
|
|
36
|
+
'hover:shr-bg-white-darken',
|
|
37
|
+
/* DialogHandlerにフォーカスが当たっているときは、headerもフォーカス状態のスタイルにする。 */
|
|
38
|
+
'has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-bg-white-darken has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-transition-colors has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-duration-100 has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-ease-in-out',
|
|
37
39
|
],
|
|
38
|
-
|
|
39
|
-
'shr-
|
|
40
|
-
|
|
41
|
-
'[.smarthr-ui-ModelessDialog-handle:focus-visible_+_&]:shr-relative',
|
|
40
|
+
dialogHandler: [
|
|
41
|
+
'smarthr-ui-ModelessDialog-handle shr-absolute shr-inset-x-0 shr-bottom-0 shr-top-[2px] shr-m-auto shr-flex shr-justify-center shr-rounded-tl-s shr-rounded-tr-s shr-border-none shr-text-grey shr-transition-colors shr-duration-100 shr-ease-in-out',
|
|
42
|
+
'shr-cursor-[inherit] shr-bg-[unset] focus-visible:shr-shadow-outline focus-visible:shr-outline-none',
|
|
42
43
|
],
|
|
44
|
+
headingEl: ['shr-my-1 shr-me-1'],
|
|
43
45
|
closeButtonLayout: [
|
|
44
46
|
'shr-relative' /* DialogHandlerの上に出すためにスタッキングコンテキストを生成 */,
|
|
45
47
|
'shr-ml-auto shr-shrink-0',
|
|
@@ -64,7 +66,7 @@ const classNameGenerator = index.tv({
|
|
|
64
66
|
},
|
|
65
67
|
},
|
|
66
68
|
});
|
|
67
|
-
const ModelessDialog = ({ heading, children, contentBgColor, contentPadding, footer, isOpen, onPressEscape, resizable = false, width, size, height, top, left, right, bottom, portalParent, className,
|
|
69
|
+
const ModelessDialog = ({ heading, children, contentBgColor, contentPadding, footer, isOpen, onPressEscape, resizable = false, width, size, height, top, left, right, bottom, portalParent, className, id, onClickClose, ...rest }) => {
|
|
68
70
|
const labelId = React.useId();
|
|
69
71
|
const lastFocusElementRef = React.useRef(null);
|
|
70
72
|
const { createPortal } = components_Dialog_useDialogPortal.useDialogPortal(portalParent, id);
|
|
@@ -84,47 +86,28 @@ const ModelessDialog = ({ heading, children, contentBgColor, contentPadding, foo
|
|
|
84
86
|
const wrapperRef = React.useRef(null);
|
|
85
87
|
const focusTargetRef = React.useRef(null);
|
|
86
88
|
const [wrapperPosition, setWrapperPosition] = React.useState(undefined);
|
|
89
|
+
const [debouncedLiveRegionText, setDebouncedLiveRegionText] = React.useState('');
|
|
87
90
|
const [centering, setCentering] = React.useState({});
|
|
88
91
|
const [position, setPosition] = React.useState({
|
|
89
92
|
x: 0,
|
|
90
93
|
y: 0,
|
|
91
94
|
});
|
|
92
95
|
const [draggableBounds, setDraggableBounds] = React.useState();
|
|
93
|
-
const
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
dialogHandlerAriaLabel: localize({
|
|
99
|
-
id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaLabel',
|
|
100
|
-
defaultText: 'ダイアログの位置',
|
|
101
|
-
}),
|
|
102
|
-
dialogHandlerAriaValuetext: wrapperPosition
|
|
103
|
-
? localize({
|
|
104
|
-
id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaValuetext',
|
|
105
|
-
defaultText: '上から{top}px、左から{left}px',
|
|
106
|
-
}, {
|
|
107
|
-
top: Math.trunc(wrapperPosition.top).toString(),
|
|
108
|
-
left: Math.trunc(wrapperPosition.left).toString(),
|
|
109
|
-
})
|
|
110
|
-
: '',
|
|
111
|
-
}), [localize, wrapperPosition]);
|
|
112
|
-
const decorated = React.useMemo(() => {
|
|
113
|
-
if (!decorators) {
|
|
114
|
-
return {
|
|
115
|
-
dialogHandlerAriaLabel: decoratorDefaultTexts.dialogHandlerAriaLabel,
|
|
116
|
-
closeButtonIconAlt: decoratorDefaultTexts.closeButtonIconAlt,
|
|
117
|
-
dialogHandlerAriaValuetext: decoratorDefaultTexts.dialogHandlerAriaValuetext,
|
|
118
|
-
};
|
|
96
|
+
const debounceLiveRegionText = React.useMemo(() => libs_debounce.debounce(setDebouncedLiveRegionText, 600), []);
|
|
97
|
+
React.useEffect(() => {
|
|
98
|
+
if (!wrapperPosition) {
|
|
99
|
+
setDebouncedLiveRegionText('');
|
|
100
|
+
return;
|
|
119
101
|
}
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
};
|
|
127
|
-
|
|
102
|
+
const txt = localize({
|
|
103
|
+
id: 'smarthr-ui/ModelessDialog/dialogHandlerLiveRegionText',
|
|
104
|
+
defaultText: '上から{top}px、左から{left}px',
|
|
105
|
+
}, {
|
|
106
|
+
top: Math.trunc(wrapperPosition.top).toString(),
|
|
107
|
+
left: Math.trunc(wrapperPosition.left).toString(),
|
|
108
|
+
});
|
|
109
|
+
debounceLiveRegionText(txt);
|
|
110
|
+
}, [localize, wrapperPosition, debounceLiveRegionText]);
|
|
128
111
|
const positionStyle = React.useMemo(() => ({
|
|
129
112
|
top: centering.top ?? top,
|
|
130
113
|
left: centering.left ?? left,
|
|
@@ -235,12 +218,35 @@ const ModelessDialog = ({ heading, children, contentBgColor, contentPadding, foo
|
|
|
235
218
|
y: prev.y + data.deltaY,
|
|
236
219
|
}));
|
|
237
220
|
}, []);
|
|
238
|
-
return createPortal(jsxRuntime.jsx(components_Dialog_DialogOverlap.DialogOverlap, { isOpen: isOpen, className: classNames.overlap, as: "section", children: jsxRuntime.jsx(cjs, { handle: ".smarthr-ui-ModelessDialog-handle", onStart: onDragStart, onDrag: onDrag, position: position, bounds: draggableBounds, nodeRef: wrapperRef, children: jsxRuntime.jsxs(components_Base_Base.Base, { ...rest, ref: wrapperRef, role: "dialog", "aria-labelledby": labelId, radius: "m", layer: 3, overflow: "auto", className: classNames.wrapper, style: positionStyle, children: [jsxRuntime.jsx("div", { tabIndex: -1, ref: focusTargetRef }), jsxRuntime.jsxs("div", { className: classNames.header, children: [jsxRuntime.jsx(Handler, {
|
|
221
|
+
return createPortal(jsxRuntime.jsx(components_Dialog_DialogOverlap.DialogOverlap, { isOpen: isOpen, className: classNames.overlap, as: "section", children: jsxRuntime.jsx(cjs, { handle: ".smarthr-ui-ModelessDialog-handle", onStart: onDragStart, onDrag: onDrag, position: position, bounds: draggableBounds, nodeRef: wrapperRef, children: jsxRuntime.jsxs(components_Base_Base.Base, { ...rest, ref: wrapperRef, role: "dialog", "aria-labelledby": labelId, radius: "m", layer: 3, overflow: "auto", className: classNames.wrapper, style: positionStyle, children: [jsxRuntime.jsx("div", { tabIndex: -1, ref: focusTargetRef }), jsxRuntime.jsxs("div", { className: classNames.header, children: [jsxRuntime.jsx(Handler, { onArrowKeyDown: handleArrowKey, className: classNames.dialogHandler }), jsxRuntime.jsx("div", { id: labelId, className: classNames.heading, children: jsxRuntime.jsx(components_Heading_Heading.Heading, { children: heading }) }), jsxRuntime.jsx(CloseButton, { onClick: actualOnClickClose, className: classNames.closeButtonLayout })] }), jsxRuntime.jsx(components_Dialog_DialogBody.DialogBody, { contentBgColor: contentBgColor, contentPadding: contentPadding, className: "smarthr-ui-ModelessDialog-content shr-overscroll-contain", children: children }), footer && jsxRuntime.jsx("div", { className: classNames.footer, children: footer }), jsxRuntime.jsx(LiveRegion, { regionText: debouncedLiveRegionText })] }) }) }));
|
|
239
222
|
};
|
|
240
|
-
const Handler = React.memo(({ onArrowKeyDown: onDelegateKeyDown, ...rest }) =>
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
223
|
+
const Handler = React.memo(({ onArrowKeyDown: onDelegateKeyDown, ...rest }) => {
|
|
224
|
+
const { localize } = intl_useIntl.useIntl();
|
|
225
|
+
const accessibleDefaultTexts = React.useMemo(() => ({
|
|
226
|
+
dialogHandlerAriaRoleDescription: localize({
|
|
227
|
+
id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaRoleDescription',
|
|
228
|
+
defaultText: 'ドラッグ可能',
|
|
229
|
+
}),
|
|
230
|
+
dialogHandlerDescription: localize({
|
|
231
|
+
id: 'smarthr-ui/ModelessDialog/dialogHandlerDescription',
|
|
232
|
+
defaultText: '矢印キーを押して上下左右に移動できます',
|
|
233
|
+
}),
|
|
234
|
+
dialogHandlerAriaLabel: localize({
|
|
235
|
+
id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaLabel',
|
|
236
|
+
defaultText: 'ダイアログの位置',
|
|
237
|
+
}),
|
|
238
|
+
}), [localize]);
|
|
239
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { ...rest, type: "button", "aria-label": accessibleDefaultTexts.dialogHandlerAriaLabel, "aria-roledescription": accessibleDefaultTexts.dialogHandlerAriaRoleDescription, "aria-describedby": "handler-description", onKeyDown: onDelegateKeyDown, children: jsxRuntime.jsx(components_Icon_FaIcon.FaGripIcon, {}) }), jsxRuntime.jsx("div", { className: "shr-hidden", id: "handler-description", children: accessibleDefaultTexts.dialogHandlerDescription })] }));
|
|
240
|
+
});
|
|
241
|
+
const LiveRegion = ({ regionText }) => (jsxRuntime.jsx("div", { role: "status", className: "shr-fixed -shr-m-px shr-h-px shr-w-px shr-overflow-hidden shr-whitespace-nowrap", children: regionText }));
|
|
242
|
+
const CloseButton = React.memo(({ onClick, className }) => {
|
|
243
|
+
const { localize } = intl_useIntl.useIntl();
|
|
244
|
+
const closeButtonIconAlt = localize({
|
|
245
|
+
id: 'smarthr-ui/ModelessDialog/closeButtonIconAlt',
|
|
246
|
+
defaultText: '閉じる',
|
|
247
|
+
});
|
|
248
|
+
return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(components_Button_Button.Button, { type: "button", size: "s", onClick: onClick, className: "smarthr-ui-ModelessDialog-closeButton", children: jsxRuntime.jsx(components_Icon_FaIcon.FaXmarkIcon, { alt: closeButtonIconAlt }) }) }));
|
|
249
|
+
});
|
|
244
250
|
|
|
245
251
|
exports.ModelessDialog = ModelessDialog;
|
|
246
252
|
//# sourceMappingURL=ModelessDialog.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModelessDialog.cjs","sources":["../../../../src/components/Dialog/ModelessDialog/ModelessDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentProps,\n type FC,\n type KeyboardEvent,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n type RefObject,\n memo,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport Draggable from 'react-draggable'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../../hooks/useHandleEscape'\nimport { useIntl } from '../../../intl'\nimport { dialogSize } from '../../../themes/tailwind'\nimport { Base, type BaseElementProps } from '../../Base'\nimport { Button } from '../../Button'\nimport { Heading } from '../../Heading'\nimport { FaGripIcon, FaXmarkIcon } from '../../Icon'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogOverlap } from '../DialogOverlap'\nimport { useDialogPortal } from '../useDialogPortal'\n\nimport type { DecoratorsType } from '../../../hooks/useDecorators'\nimport type { DialogSize } from '../types'\n\ntype AbstractProps = PropsWithChildren<{\n /**\n * ダイアログのタイトルの内容\n */\n heading: ReactNode\n /**\n * ダイアログのフッタ部分の内容\n */\n footer?: ReactNode\n /**\n * ダイアログが開かれているかどうかの真偽値\n */\n isOpen: boolean\n /**\n * 閉じるボタンを押下したときのハンドラ\n */\n onClickClose?: (e: MouseEvent<HTMLButtonElement>) => void\n /**\n * ダイアログが開いている状態で Escape キーを押下したときのハンドラ\n */\n onPressEscape?: () => void\n /**\n * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n * ダイアログの幅\n */\n width?: string | number\n /**\n * ダイアログの大きさ\n */\n size?: DialogSize\n /**\n * ダイアログの高さ\n */\n height?: string | number\n /**\n * ダイアログを開いたときの初期 top 位置\n */\n top?: string | number\n /**\n * ダイアログを開いたときの初期 left 位置\n */\n left?: string | number\n /**\n * ダイアログを開いたときの初期 right 位置\n */\n right?: string | number\n /**\n * ダイアログを開いたときの初期 bottom 位置\n */\n bottom?: string | number\n /**\n * ポータルの container となる DOM 要素を追加する親要素\n */\n portalParent?: HTMLElement | RefObject<HTMLElement>\n /** コンポーネント内の文言を変更するための関数を設定 */\n decorators?: DecoratorsType<'closeButtonIconAlt'> & {\n dialogHandlerAriaLabel?: (txt: string) => string\n dialogHandlerAriaValuetext?: (txt: string, data: DOMRect | undefined) => string\n }\n}>\ntype Props = AbstractProps &\n Omit<DialogBodyProps, keyof AbstractProps> &\n Omit<BaseElementProps, keyof AbstractProps> &\n Omit<VariantProps<typeof classNameGenerator>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n slots: {\n overlap: 'shr-inset-[unset]',\n wrapper: 'smarthr-ui-ModelessDialog shr-fixed shr-flex shr-flex-col',\n headerEl:\n 'smarthr-ui-ModelessDialog-header shr-border-b-shorthand shr-relative shr-flex shr-cursor-move shr-items-center shr-rounded-tl-l shr-rounded-tr-l shr-pe-1 shr-ps-1.5 hover:shr-bg-white-darken',\n dialogHandler: [\n 'smarthr-ui-ModelessDialog-handle shr-absolute shr-inset-x-0 shr-bottom-0 shr-top-[2px] shr-m-auto shr-flex shr-justify-center shr-rounded-tl-s shr-rounded-tr-s shr-text-grey shr-transition-colors shr-duration-100 shr-ease-in-out',\n 'focus-visible:shr-bg-white-darken focus-visible:shr-shadow-outline focus-visible:shr-outline-none',\n ],\n headingEl: [\n 'shr-my-1 shr-me-1',\n /* DialogHandlerの上に出すためにスタッキングコンテキストを生成 */\n '[.smarthr-ui-ModelessDialog-handle:focus-visible_+_&]:shr-relative',\n ],\n closeButtonLayout: [\n 'shr-relative' /* DialogHandlerの上に出すためにスタッキングコンテキストを生成 */,\n 'shr-ml-auto shr-shrink-0',\n ],\n footerEl: 'smarthr-ui-ModelessDialog-footer shr-border-t-shorthand',\n },\n variants: {\n size: {\n XS: { wrapper: dialogSize.XS },\n S: { wrapper: dialogSize.S },\n M: { wrapper: dialogSize.M },\n L: { wrapper: dialogSize.L },\n XL: { wrapper: dialogSize.XL },\n XXL: { wrapper: dialogSize.XXL },\n FULL: { wrapper: dialogSize.FULL },\n },\n resizable: {\n true: {\n wrapper: 'shr-resize shr-overflow-auto',\n },\n false: {},\n },\n },\n})\n\nexport const ModelessDialog: FC<Props> = ({\n heading,\n children,\n contentBgColor,\n contentPadding,\n footer,\n isOpen,\n onPressEscape,\n resizable = false,\n width,\n size,\n height,\n top,\n left,\n right,\n bottom,\n portalParent,\n className,\n decorators,\n id,\n onClickClose,\n ...rest\n}) => {\n const labelId = useId()\n const lastFocusElementRef = useRef<HTMLElement | null>(null)\n const { createPortal } = useDialogPortal(portalParent, id)\n const { localize } = useIntl()\n\n const classNames = useMemo(() => {\n const { overlap, wrapper, headerEl, headingEl, dialogHandler, closeButtonLayout, footerEl } =\n classNameGenerator()\n\n return {\n overlap: overlap({ className }),\n wrapper: wrapper({ size, resizable }),\n header: headerEl(),\n heading: headingEl(),\n dialogHandler: dialogHandler(),\n closeButtonLayout: closeButtonLayout(),\n footer: footerEl(),\n }\n }, [className, size, resizable])\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n const focusTargetRef = useRef<HTMLDivElement>(null)\n\n const [wrapperPosition, setWrapperPosition] = useState<DOMRect | undefined>(undefined)\n const [centering, setCentering] = useState<{\n top?: number\n left?: number\n }>({})\n const [position, setPosition] = useState<{ x: number; y: number }>({\n x: 0,\n y: 0,\n })\n const [draggableBounds, setDraggableBounds] =\n useState<ComponentProps<typeof Draggable>['bounds']>()\n\n const decoratorDefaultTexts = useMemo(\n () => ({\n closeButtonIconAlt: localize({\n id: 'smarthr-ui/ModelessDialog/closeButtonIconAlt',\n defaultText: '閉じる',\n }),\n dialogHandlerAriaLabel: localize({\n id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaLabel',\n defaultText: 'ダイアログの位置',\n }),\n dialogHandlerAriaValuetext: wrapperPosition\n ? localize(\n {\n id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaValuetext',\n defaultText: '上から{top}px、左から{left}px',\n },\n {\n top: Math.trunc(wrapperPosition.top).toString(),\n left: Math.trunc(wrapperPosition.left).toString(),\n },\n )\n : '',\n }),\n [localize, wrapperPosition],\n )\n\n const decorated = useMemo(() => {\n if (!decorators) {\n return {\n dialogHandlerAriaLabel: decoratorDefaultTexts.dialogHandlerAriaLabel,\n closeButtonIconAlt: decoratorDefaultTexts.closeButtonIconAlt,\n dialogHandlerAriaValuetext: decoratorDefaultTexts.dialogHandlerAriaValuetext,\n }\n }\n\n return {\n dialogHandlerAriaLabel:\n decorators.dialogHandlerAriaLabel?.(decoratorDefaultTexts.dialogHandlerAriaLabel) ||\n decoratorDefaultTexts.dialogHandlerAriaLabel,\n closeButtonIconAlt:\n decorators.closeButtonIconAlt?.(decoratorDefaultTexts.closeButtonIconAlt) ||\n decoratorDefaultTexts.closeButtonIconAlt,\n dialogHandlerAriaValuetext: decorators.dialogHandlerAriaValuetext?.(\n decoratorDefaultTexts.dialogHandlerAriaValuetext,\n wrapperPosition,\n ),\n }\n }, [decorators, decoratorDefaultTexts, wrapperPosition])\n\n const positionStyle = useMemo(\n () => ({\n top: centering.top ?? top,\n left: centering.left ?? left,\n right,\n bottom,\n width: size ? undefined : width,\n height,\n }),\n [centering, top, left, right, bottom, width, height, size],\n )\n\n const handleArrowKey = useCallback(\n (e: KeyboardEvent) => {\n if (!isOpen || document.activeElement !== e.currentTarget) {\n return\n }\n\n const movingDistance = 20\n\n switch (e.key) {\n case 'ArrowUp':\n setPosition((prev) => ({\n x: prev.x,\n y: prev.y - movingDistance,\n }))\n e.preventDefault()\n break\n case 'ArrowDown':\n setPosition((prev) => ({\n x: prev.x,\n y: prev.y + movingDistance,\n }))\n e.preventDefault()\n break\n case 'ArrowLeft':\n setPosition((prev) => ({\n x: prev.x - movingDistance,\n y: prev.y,\n }))\n e.preventDefault()\n break\n case 'ArrowRight':\n setPosition((prev) => ({\n x: prev.x + movingDistance,\n y: prev.y,\n }))\n e.preventDefault()\n break\n }\n },\n [isOpen],\n )\n\n useEffect(() => {\n if (wrapperRef.current instanceof Element) {\n setWrapperPosition(wrapperRef.current.getBoundingClientRect())\n }\n }, [position])\n\n useEffect(() => {\n // 中央寄せの座標計算を行う\n if (!wrapperRef.current || !isOpen) {\n return\n }\n\n const isXCenter = left === undefined && right === undefined\n const isYCenter = top === undefined && bottom === undefined\n\n if (isXCenter || isYCenter) {\n const rect = wrapperRef.current.getBoundingClientRect()\n\n setCentering({\n top: isYCenter ? window.innerHeight / 2 - rect.height / 2 : undefined,\n left: isXCenter ? window.innerWidth / 2 - rect.width / 2 : undefined,\n })\n }\n }, [bottom, isOpen, left, right, top])\n\n useEffect(() => {\n if (!isOpen) return\n\n if (centering.top) {\n setDraggableBounds({ top: centering.top * -1 })\n\n return\n }\n\n if (wrapperRef.current) {\n const rect = wrapperRef.current.getBoundingClientRect()\n\n setDraggableBounds({ top: rect.top * -1 })\n }\n }, [isOpen, centering.top])\n\n useEffect(() => {\n if (isOpen) {\n setPosition({ x: 0, y: 0 })\n focusTargetRef.current?.focus()\n }\n }, [isOpen])\n\n const actualOnClickClose = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n lastFocusElementRef.current?.focus()\n onClickClose?.(e)\n },\n [onClickClose],\n )\n\n const actualOnPressEscape = useMemo(\n () =>\n onPressEscape\n ? () => {\n lastFocusElementRef.current?.focus()\n onPressEscape()\n }\n : undefined,\n [onPressEscape],\n )\n\n useHandleEscape(\n useMemo(\n () => (actualOnPressEscape && isOpen ? actualOnPressEscape : undefined),\n [isOpen, actualOnPressEscape],\n ),\n )\n\n useEffect(() => {\n const focusHandler = (e: FocusEvent) => {\n // e.target(現在フォーカスがあたっている要素)がModeless dialog外の要素であれば、lastFocusElementRefに代入する\n if (e.target instanceof HTMLElement && !wrapperRef?.current?.contains(e.target)) {\n lastFocusElementRef.current = e.target\n }\n }\n\n document.addEventListener('focus', focusHandler, true)\n\n return () => document.removeEventListener('focus', focusHandler, true)\n }, [])\n\n const onDragStart = useCallback((_: any, data: { x: number; y: number }) => setPosition(data), [])\n const onDrag = useCallback((_: any, data: { deltaX: number; deltaY: number }) => {\n setPosition((prev) => ({\n x: prev.x + data.deltaX,\n y: prev.y + data.deltaY,\n }))\n }, [])\n\n return createPortal(\n <DialogOverlap isOpen={isOpen} className={classNames.overlap} as=\"section\">\n <Draggable\n handle=\".smarthr-ui-ModelessDialog-handle\"\n onStart={onDragStart}\n onDrag={onDrag}\n position={position}\n bounds={draggableBounds}\n nodeRef={wrapperRef}\n >\n <Base\n {...rest}\n ref={wrapperRef}\n role=\"dialog\"\n aria-labelledby={labelId}\n radius=\"m\"\n layer={3}\n overflow=\"auto\"\n className={classNames.wrapper}\n style={positionStyle}\n >\n {/* dummy element for focus management. */}\n <div tabIndex={-1} ref={focusTargetRef} />\n <div className={classNames.header}>\n <Handler\n aria-label={decorated.dialogHandlerAriaLabel}\n aria-valuetext={decorated.dialogHandlerAriaValuetext}\n onArrowKeyDown={handleArrowKey}\n className={classNames.dialogHandler}\n />\n <div id={labelId} className={classNames.heading}>\n {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}\n <Heading>{heading}</Heading>\n </div>\n <CloseButton\n onClick={actualOnClickClose}\n className={classNames.closeButtonLayout}\n iconAlt={decorated.closeButtonIconAlt}\n />\n </div>\n <DialogBody\n contentBgColor={contentBgColor}\n contentPadding={contentPadding}\n className=\"smarthr-ui-ModelessDialog-content shr-overscroll-contain\"\n >\n {children}\n </DialogBody>\n {footer && <div className={classNames.footer}>{footer}</div>}\n </Base>\n </Draggable>\n </DialogOverlap>,\n )\n}\n\nconst Handler = memo<{\n 'aria-label': string\n 'aria-valuetext': string | undefined\n className: string\n onArrowKeyDown: (e: KeyboardEvent) => void\n}>(({ onArrowKeyDown: onDelegateKeyDown, ...rest }) => (\n // eslint-disable-next-line jsx-a11y/role-has-required-aria-props\n <div {...rest} tabIndex={0} role=\"slider\" onKeyDown={onDelegateKeyDown}>\n <FaGripIcon />\n </div>\n))\n\nconst CloseButton = memo<{\n className: string\n iconAlt: ReactNode\n onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ onClick, iconAlt, className }) => (\n <div className={className}>\n <Button\n type=\"button\"\n size=\"s\"\n onClick={onClick}\n className=\"smarthr-ui-ModelessDialog-closeButton\"\n >\n <FaXmarkIcon alt={iconAlt} />\n </Button>\n </div>\n))\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoGA;AACE;AACE;AACA;AACA;AAEA;;;AAGC;AACD;;;;AAIC;AACD;AACE;;AAED;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACD;AACD;AACD;AACF;AACF;AAEM;AAuBL;AACA;;AAEA;AAEA;AACE;;AAIE;;;;;;;;;AAUJ;AACA;;;AAOA;AACE;AACA;AACD;;AAID;;AAGM;AACA;;;AAGA;AACA;;AAEF;;AAGQ;AACA;;;;;AAON;AACH;AAIH;;;;;;;;;;AAYM;;AAGA;;;;AAQN;AAEI;AACA;;;;;AAKD;AAIH;;;;;AAQI;AACE;AACE;;AAEE;AACD;;;AAGH;AACE;;AAEE;AACD;;;AAGH;AACE;AACE;;AAED;;;AAGH;AACE;AACE;;AAED;;;;AAIP;;AAKA;;;AAGF;;;;;;;;AAWE;;AAGE;AACE;AACA;AACD;;AAEL;;AAGE;;AAEA;AACE;;;AAKF;;AAGE;;;;;;AAOA;;AAEJ;AAEA;AAEI;AACA;AACF;AAIF;;AAIU;AACA;;AAEJ;;;AAYJ;;AAEE;AACE;;AAEJ;;AAIA;;AAGF;;AAEE;AACE;AACA;AACD;;;AAuDL;AAEA;AAME;AACAA;AAKF;;"}
|
|
1
|
+
{"version":3,"file":"ModelessDialog.cjs","sources":["../../../../src/components/Dialog/ModelessDialog/ModelessDialog.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ComponentProps,\n type FC,\n type KeyboardEvent,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n type RefObject,\n memo,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react'\nimport Draggable from 'react-draggable'\nimport { type VariantProps, tv } from 'tailwind-variants'\n\nimport { useHandleEscape } from '../../../hooks/useHandleEscape'\nimport { useIntl } from '../../../intl'\nimport { debounce } from '../../../libs/debounce'\nimport { dialogSize } from '../../../themes/tailwind'\nimport { Base, type BaseElementProps } from '../../Base'\nimport { Button } from '../../Button'\nimport { Heading } from '../../Heading'\nimport { FaGripIcon, FaXmarkIcon } from '../../Icon'\nimport { DialogBody, type Props as DialogBodyProps } from '../DialogBody'\nimport { DialogOverlap } from '../DialogOverlap'\nimport { useDialogPortal } from '../useDialogPortal'\n\nimport type { DialogSize } from '../types'\n\ntype AbstractProps = PropsWithChildren<{\n /**\n * ダイアログのタイトルの内容\n */\n heading: ReactNode\n /**\n * ダイアログのフッタ部分の内容\n */\n footer?: ReactNode\n /**\n * ダイアログが開かれているかどうかの真偽値\n */\n isOpen: boolean\n /**\n * 閉じるボタンを押下したときのハンドラ\n */\n onClickClose?: (e: MouseEvent<HTMLButtonElement>) => void\n /**\n * ダイアログが開いている状態で Escape キーを押下したときのハンドラ\n */\n onPressEscape?: () => void\n /**\n * @deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。\n * ダイアログの幅\n */\n width?: string | number\n /**\n * ダイアログの大きさ\n */\n size?: DialogSize\n /**\n * ダイアログの高さ\n */\n height?: string | number\n /**\n * ダイアログを開いたときの初期 top 位置\n */\n top?: string | number\n /**\n * ダイアログを開いたときの初期 left 位置\n */\n left?: string | number\n /**\n * ダイアログを開いたときの初期 right 位置\n */\n right?: string | number\n /**\n * ダイアログを開いたときの初期 bottom 位置\n */\n bottom?: string | number\n /**\n * ポータルの container となる DOM 要素を追加する親要素\n */\n portalParent?: HTMLElement | RefObject<HTMLElement>\n}>\ntype Props = AbstractProps &\n Omit<DialogBodyProps, keyof AbstractProps> &\n Omit<BaseElementProps, keyof AbstractProps> &\n Omit<VariantProps<typeof classNameGenerator>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n slots: {\n overlap: 'shr-inset-[unset]',\n wrapper: 'smarthr-ui-ModelessDialog shr-fixed shr-flex shr-flex-col',\n headerEl: [\n 'smarthr-ui-ModelessDialog-header shr-border-b-shorthand shr-relative shr-flex shr-cursor-move shr-items-center shr-rounded-tl-l shr-rounded-tr-l shr-pe-1 shr-ps-1.5',\n 'hover:shr-bg-white-darken',\n /* DialogHandlerにフォーカスが当たっているときは、headerもフォーカス状態のスタイルにする。 */\n 'has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-bg-white-darken has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-transition-colors has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-duration-100 has-[.smarthr-ui-ModelessDialog-handle:focus-visible]:shr-ease-in-out',\n ],\n dialogHandler: [\n 'smarthr-ui-ModelessDialog-handle shr-absolute shr-inset-x-0 shr-bottom-0 shr-top-[2px] shr-m-auto shr-flex shr-justify-center shr-rounded-tl-s shr-rounded-tr-s shr-border-none shr-text-grey shr-transition-colors shr-duration-100 shr-ease-in-out',\n 'shr-cursor-[inherit] shr-bg-[unset] focus-visible:shr-shadow-outline focus-visible:shr-outline-none',\n ],\n headingEl: ['shr-my-1 shr-me-1'],\n closeButtonLayout: [\n 'shr-relative' /* DialogHandlerの上に出すためにスタッキングコンテキストを生成 */,\n 'shr-ml-auto shr-shrink-0',\n ],\n footerEl: 'smarthr-ui-ModelessDialog-footer shr-border-t-shorthand',\n },\n variants: {\n size: {\n XS: { wrapper: dialogSize.XS },\n S: { wrapper: dialogSize.S },\n M: { wrapper: dialogSize.M },\n L: { wrapper: dialogSize.L },\n XL: { wrapper: dialogSize.XL },\n XXL: { wrapper: dialogSize.XXL },\n FULL: { wrapper: dialogSize.FULL },\n },\n resizable: {\n true: {\n wrapper: 'shr-resize shr-overflow-auto',\n },\n false: {},\n },\n },\n})\n\nexport const ModelessDialog: FC<Props> = ({\n heading,\n children,\n contentBgColor,\n contentPadding,\n footer,\n isOpen,\n onPressEscape,\n resizable = false,\n width,\n size,\n height,\n top,\n left,\n right,\n bottom,\n portalParent,\n className,\n id,\n onClickClose,\n ...rest\n}) => {\n const labelId = useId()\n const lastFocusElementRef = useRef<HTMLElement | null>(null)\n const { createPortal } = useDialogPortal(portalParent, id)\n const { localize } = useIntl()\n\n const classNames = useMemo(() => {\n const { overlap, wrapper, headerEl, headingEl, dialogHandler, closeButtonLayout, footerEl } =\n classNameGenerator()\n\n return {\n overlap: overlap({ className }),\n wrapper: wrapper({ size, resizable }),\n header: headerEl(),\n heading: headingEl(),\n dialogHandler: dialogHandler(),\n closeButtonLayout: closeButtonLayout(),\n footer: footerEl(),\n }\n }, [className, size, resizable])\n\n const wrapperRef = useRef<HTMLDivElement>(null)\n const focusTargetRef = useRef<HTMLDivElement>(null)\n\n const [wrapperPosition, setWrapperPosition] = useState<DOMRect | undefined>(undefined)\n const [debouncedLiveRegionText, setDebouncedLiveRegionText] = useState<string>('')\n const [centering, setCentering] = useState<{\n top?: number\n left?: number\n }>({})\n const [position, setPosition] = useState<{ x: number; y: number }>({\n x: 0,\n y: 0,\n })\n const [draggableBounds, setDraggableBounds] =\n useState<ComponentProps<typeof Draggable>['bounds']>()\n const debounceLiveRegionText = useMemo(() => debounce(setDebouncedLiveRegionText, 600), [])\n\n useEffect(() => {\n if (!wrapperPosition) {\n setDebouncedLiveRegionText('')\n return\n }\n\n const txt = localize(\n {\n id: 'smarthr-ui/ModelessDialog/dialogHandlerLiveRegionText',\n defaultText: '上から{top}px、左から{left}px',\n },\n {\n top: Math.trunc(wrapperPosition.top).toString(),\n left: Math.trunc(wrapperPosition.left).toString(),\n },\n )\n\n debounceLiveRegionText(txt)\n }, [localize, wrapperPosition, debounceLiveRegionText])\n\n const positionStyle = useMemo(\n () => ({\n top: centering.top ?? top,\n left: centering.left ?? left,\n right,\n bottom,\n width: size ? undefined : width,\n height,\n }),\n [centering, top, left, right, bottom, width, height, size],\n )\n\n const handleArrowKey = useCallback(\n (e: KeyboardEvent) => {\n if (!isOpen || document.activeElement !== e.currentTarget) {\n return\n }\n\n const movingDistance = 20\n\n switch (e.key) {\n case 'ArrowUp':\n setPosition((prev) => ({\n x: prev.x,\n y: prev.y - movingDistance,\n }))\n e.preventDefault()\n break\n case 'ArrowDown':\n setPosition((prev) => ({\n x: prev.x,\n y: prev.y + movingDistance,\n }))\n e.preventDefault()\n break\n case 'ArrowLeft':\n setPosition((prev) => ({\n x: prev.x - movingDistance,\n y: prev.y,\n }))\n e.preventDefault()\n break\n case 'ArrowRight':\n setPosition((prev) => ({\n x: prev.x + movingDistance,\n y: prev.y,\n }))\n e.preventDefault()\n break\n }\n },\n [isOpen],\n )\n\n useEffect(() => {\n if (wrapperRef.current instanceof Element) {\n setWrapperPosition(wrapperRef.current.getBoundingClientRect())\n }\n }, [position])\n\n useEffect(() => {\n // 中央寄せの座標計算を行う\n if (!wrapperRef.current || !isOpen) {\n return\n }\n\n const isXCenter = left === undefined && right === undefined\n const isYCenter = top === undefined && bottom === undefined\n\n if (isXCenter || isYCenter) {\n const rect = wrapperRef.current.getBoundingClientRect()\n\n setCentering({\n top: isYCenter ? window.innerHeight / 2 - rect.height / 2 : undefined,\n left: isXCenter ? window.innerWidth / 2 - rect.width / 2 : undefined,\n })\n }\n }, [bottom, isOpen, left, right, top])\n\n useEffect(() => {\n if (!isOpen) return\n\n if (centering.top) {\n setDraggableBounds({ top: centering.top * -1 })\n\n return\n }\n\n if (wrapperRef.current) {\n const rect = wrapperRef.current.getBoundingClientRect()\n\n setDraggableBounds({ top: rect.top * -1 })\n }\n }, [isOpen, centering.top])\n\n useEffect(() => {\n if (isOpen) {\n setPosition({ x: 0, y: 0 })\n focusTargetRef.current?.focus()\n }\n }, [isOpen])\n\n const actualOnClickClose = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n lastFocusElementRef.current?.focus()\n onClickClose?.(e)\n },\n [onClickClose],\n )\n\n const actualOnPressEscape = useMemo(\n () =>\n onPressEscape\n ? () => {\n lastFocusElementRef.current?.focus()\n onPressEscape()\n }\n : undefined,\n [onPressEscape],\n )\n\n useHandleEscape(\n useMemo(\n () => (actualOnPressEscape && isOpen ? actualOnPressEscape : undefined),\n [isOpen, actualOnPressEscape],\n ),\n )\n\n useEffect(() => {\n const focusHandler = (e: FocusEvent) => {\n // e.target(現在フォーカスがあたっている要素)がModeless dialog外の要素であれば、lastFocusElementRefに代入する\n if (e.target instanceof HTMLElement && !wrapperRef?.current?.contains(e.target)) {\n lastFocusElementRef.current = e.target\n }\n }\n\n document.addEventListener('focus', focusHandler, true)\n\n return () => document.removeEventListener('focus', focusHandler, true)\n }, [])\n\n const onDragStart = useCallback((_: any, data: { x: number; y: number }) => setPosition(data), [])\n const onDrag = useCallback((_: any, data: { deltaX: number; deltaY: number }) => {\n setPosition((prev) => ({\n x: prev.x + data.deltaX,\n y: prev.y + data.deltaY,\n }))\n }, [])\n\n return createPortal(\n <DialogOverlap isOpen={isOpen} className={classNames.overlap} as=\"section\">\n <Draggable\n handle=\".smarthr-ui-ModelessDialog-handle\"\n onStart={onDragStart}\n onDrag={onDrag}\n position={position}\n bounds={draggableBounds}\n nodeRef={wrapperRef}\n >\n <Base\n {...rest}\n ref={wrapperRef}\n role=\"dialog\"\n aria-labelledby={labelId}\n radius=\"m\"\n layer={3}\n overflow=\"auto\"\n className={classNames.wrapper}\n style={positionStyle}\n >\n {/* dummy element for focus management. */}\n <div tabIndex={-1} ref={focusTargetRef} />\n <div className={classNames.header}>\n <Handler onArrowKeyDown={handleArrowKey} className={classNames.dialogHandler} />\n <div id={labelId} className={classNames.heading}>\n {/* eslint-disable-next-line smarthr/a11y-heading-in-sectioning-content */}\n <Heading>{heading}</Heading>\n </div>\n <CloseButton onClick={actualOnClickClose} className={classNames.closeButtonLayout} />\n </div>\n <DialogBody\n contentBgColor={contentBgColor}\n contentPadding={contentPadding}\n className=\"smarthr-ui-ModelessDialog-content shr-overscroll-contain\"\n >\n {children}\n </DialogBody>\n {footer && <div className={classNames.footer}>{footer}</div>}\n <LiveRegion regionText={debouncedLiveRegionText} />\n </Base>\n </Draggable>\n </DialogOverlap>,\n )\n}\n\nconst Handler = memo<{\n className: string\n onArrowKeyDown: (e: KeyboardEvent) => void\n}>(({ onArrowKeyDown: onDelegateKeyDown, ...rest }) => {\n const { localize } = useIntl()\n const accessibleDefaultTexts = useMemo(\n () => ({\n dialogHandlerAriaRoleDescription: localize({\n id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaRoleDescription',\n defaultText: 'ドラッグ可能',\n }),\n dialogHandlerDescription: localize({\n id: 'smarthr-ui/ModelessDialog/dialogHandlerDescription',\n defaultText: '矢印キーを押して上下左右に移動できます',\n }),\n dialogHandlerAriaLabel: localize({\n id: 'smarthr-ui/ModelessDialog/dialogHandlerAriaLabel',\n defaultText: 'ダイアログの位置',\n }),\n }),\n [localize],\n )\n\n return (\n <>\n <button\n {...rest}\n type=\"button\"\n aria-label={accessibleDefaultTexts.dialogHandlerAriaLabel}\n aria-roledescription={accessibleDefaultTexts.dialogHandlerAriaRoleDescription}\n aria-describedby=\"handler-description\"\n onKeyDown={onDelegateKeyDown}\n >\n <FaGripIcon />\n </button>\n <div className=\"shr-hidden\" id=\"handler-description\">\n {accessibleDefaultTexts.dialogHandlerDescription}\n </div>\n </>\n )\n})\n\nconst LiveRegion = ({ regionText }: { regionText: string | undefined }) => (\n <div\n role=\"status\"\n className=\"shr-fixed -shr-m-px shr-h-px shr-w-px shr-overflow-hidden shr-whitespace-nowrap\"\n >\n {regionText}\n </div>\n)\n\nconst CloseButton = memo<{\n className: string\n onClick: (e: MouseEvent<HTMLButtonElement>) => void\n}>(({ onClick, className }) => {\n const { localize } = useIntl()\n const closeButtonIconAlt = localize({\n id: 'smarthr-ui/ModelessDialog/closeButtonIconAlt',\n defaultText: '閉じる',\n })\n\n return (\n <div className={className}>\n <Button\n type=\"button\"\n size=\"s\"\n onClick={onClick}\n className=\"smarthr-ui-ModelessDialog-closeButton\"\n >\n <FaXmarkIcon alt={closeButtonIconAlt} />\n </Button>\n </div>\n )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+FA;AACE;AACE;AACA;AACA;;;;;AAKC;AACD;;;AAGC;;AAED;AACE;;AAED;AACD;AACD;AACD;AACE;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACE;AACD;AACD;AACD;AACF;AACF;;AAwBC;AACA;;AAEA;AAEA;AACE;;AAIE;;;;;;;;;AAUJ;AACA;;;;AAQA;AACE;AACA;AACD;;AAGD;;;;;;;AAUM;AACA;;;;AAKD;;;AAML;AAEI;AACA;;;;;AAKD;AAIH;;;;;AAQI;AACE;AACE;;AAEE;AACD;;;AAGH;AACE;;AAEE;AACD;;;AAGH;AACE;AACE;;AAED;;;AAGH;AACE;AACE;;AAED;;;;AAIP;;AAKA;;;AAGF;;;;;;;;AAWE;;AAGE;AACE;AACA;AACD;;AAEL;;AAGE;;AAEA;AACE;;;AAKF;;AAGE;;;;;;AAOA;;AAEJ;AAEA;AAEI;AACA;AACF;AAIF;;AAIU;AACA;;AAEJ;;;AAYJ;;AAEE;AACE;;AAEJ;;AAIA;;AAGF;;AAEE;AACE;AACA;AACD;;;AA+CL;AAEA;AAIE;AACA;;AAGM;AACA;;;AAGA;AACA;;;AAGA;AACA;;AAEH;AAIH;AAiBF;AAEA;AASA;AAIE;;AAEE;AACA;AACD;AAED;AAYF;;"}
|
|
@@ -2,7 +2,6 @@ import { type FC, type MouseEvent, type PropsWithChildren, type ReactNode, type
|
|
|
2
2
|
import { type VariantProps } from 'tailwind-variants';
|
|
3
3
|
import { type BaseElementProps } from '../../Base';
|
|
4
4
|
import { type Props as DialogBodyProps } from '../DialogBody';
|
|
5
|
-
import type { DecoratorsType } from '../../../hooks/useDecorators';
|
|
6
5
|
import type { DialogSize } from '../types';
|
|
7
6
|
type AbstractProps = PropsWithChildren<{
|
|
8
7
|
/**
|
|
@@ -58,11 +57,6 @@ type AbstractProps = PropsWithChildren<{
|
|
|
58
57
|
* ポータルの container となる DOM 要素を追加する親要素
|
|
59
58
|
*/
|
|
60
59
|
portalParent?: HTMLElement | RefObject<HTMLElement>;
|
|
61
|
-
/** コンポーネント内の文言を変更するための関数を設定 */
|
|
62
|
-
decorators?: DecoratorsType<'closeButtonIconAlt'> & {
|
|
63
|
-
dialogHandlerAriaLabel?: (txt: string) => string;
|
|
64
|
-
dialogHandlerAriaValuetext?: (txt: string, data: DOMRect | undefined) => string;
|
|
65
|
-
};
|
|
66
60
|
}>;
|
|
67
61
|
type Props = AbstractProps & Omit<DialogBodyProps, keyof AbstractProps> & Omit<BaseElementProps, keyof AbstractProps> & Omit<VariantProps<typeof classNameGenerator>, keyof AbstractProps>;
|
|
68
62
|
declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
@@ -98,7 +92,7 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
98
92
|
}, {
|
|
99
93
|
overlap: string;
|
|
100
94
|
wrapper: string;
|
|
101
|
-
headerEl: string;
|
|
95
|
+
headerEl: string[];
|
|
102
96
|
dialogHandler: string[];
|
|
103
97
|
headingEl: string[];
|
|
104
98
|
closeButtonLayout: string[];
|
|
@@ -196,7 +190,7 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
196
190
|
}, {
|
|
197
191
|
overlap: string;
|
|
198
192
|
wrapper: string;
|
|
199
|
-
headerEl: string;
|
|
193
|
+
headerEl: string[];
|
|
200
194
|
dialogHandler: string[];
|
|
201
195
|
headingEl: string[];
|
|
202
196
|
closeButtonLayout: string[];
|
|
@@ -234,7 +228,7 @@ declare const classNameGenerator: import("tailwind-variants").TVReturnType<{
|
|
|
234
228
|
}, {
|
|
235
229
|
overlap: string;
|
|
236
230
|
wrapper: string;
|
|
237
|
-
headerEl: string;
|
|
231
|
+
headerEl: string[];
|
|
238
232
|
dialogHandler: string[];
|
|
239
233
|
headingEl: string[];
|
|
240
234
|
closeButtonLayout: string[];
|