@cypress-design/react-modal 1.0.2 → 1.1.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/.turbo/turbo-build.log +3 -3
- package/CHANGELOG.md +6 -0
- package/Modal.tsx +14 -7
- package/ModalReact.cy.tsx +1 -1
- package/dist/Modal.d.ts +2 -0
- package/dist/Modal.d.ts.map +1 -1
- package/dist/index.es.mjs +6 -7
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +6 -7
- package/dist/index.umd.js.map +1 -1
- package/package.json +2 -2
- package/rollup.config.mjs +2 -2
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
yarn run v1.22.22
|
|
1
2
|
$ yarn build:module && yarn build:types
|
|
2
3
|
$ rollup -c ./rollup.config.mjs
|
|
3
|
-
(node:4106) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
|
|
4
|
-
(Use `node --trace-warnings ...` to show where the warning was created)
|
|
5
4
|
[36m
|
|
6
5
|
[1m./index.ts[22m → [1m./dist/index.umd.js, ./dist/index.es.mjs[22m...[39m
|
|
7
|
-
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [
|
|
6
|
+
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [1m14.4s[22m[39m
|
|
8
7
|
$ tsc --project ./tsconfig.build.json
|
|
8
|
+
Done in 28.92s.
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @cypress-design/react-modal
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#649](https://github.com/cypress-io/cypress-design/pull/649) [`9a3f284`](https://github.com/cypress-io/cypress-design/commit/9a3f2841da0a2b7f9ac0804f3895f6d19ef3ba49) Thanks [@mabela416](https://github.com/mabela416)! - Add className and closeIcon properties to React Modal component
|
|
8
|
+
|
|
3
9
|
## 1.0.2
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
package/Modal.tsx
CHANGED
|
@@ -26,6 +26,8 @@ export interface ModalProps {
|
|
|
26
26
|
show?: boolean
|
|
27
27
|
onClose?: () => void
|
|
28
28
|
fullscreen?: boolean
|
|
29
|
+
className?: string
|
|
30
|
+
closeIcon?: React.ReactNode
|
|
29
31
|
}
|
|
30
32
|
|
|
31
33
|
export const Modal: React.FC<ModalProps> = ({
|
|
@@ -35,6 +37,8 @@ export const Modal: React.FC<ModalProps> = ({
|
|
|
35
37
|
onClose,
|
|
36
38
|
children,
|
|
37
39
|
fullscreen = false,
|
|
40
|
+
className,
|
|
41
|
+
closeIcon,
|
|
38
42
|
}) => {
|
|
39
43
|
const dialogRef = React.useRef<HTMLDialogElement>(null)
|
|
40
44
|
|
|
@@ -83,6 +87,7 @@ export const Modal: React.FC<ModalProps> = ({
|
|
|
83
87
|
fullscreen
|
|
84
88
|
? ClassModalFullscreenDimensions
|
|
85
89
|
: ClassModalStandardDimensions,
|
|
90
|
+
className,
|
|
86
91
|
)}
|
|
87
92
|
onClick={closeOnClickBackdrop}
|
|
88
93
|
>
|
|
@@ -105,15 +110,17 @@ export const Modal: React.FC<ModalProps> = ({
|
|
|
105
110
|
<div className="grow" />
|
|
106
111
|
<button
|
|
107
112
|
aria-label="Close"
|
|
108
|
-
className={ClassCloseButton}
|
|
113
|
+
className={`${ClassCloseButton} group`}
|
|
109
114
|
onClick={() => onClose?.()}
|
|
110
115
|
>
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
116
|
+
{closeIcon ?? (
|
|
117
|
+
<IconActionDelete
|
|
118
|
+
className="children:transition-all"
|
|
119
|
+
stroke-color="gray-400"
|
|
120
|
+
hover-stroke-color="gray-700"
|
|
121
|
+
interactiveColorsOnGroup
|
|
122
|
+
/>
|
|
123
|
+
)}
|
|
117
124
|
</button>
|
|
118
125
|
</div>
|
|
119
126
|
<div className={ClassContent}>{children}</div>
|
package/ModalReact.cy.tsx
CHANGED
package/dist/Modal.d.ts
CHANGED
package/dist/Modal.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"./","sources":["Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,UAAU;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkGtC,CAAA;AAED,eAAe,KAAK,CAAA"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -26,15 +26,15 @@ function freeBodyScroll() {
|
|
|
26
26
|
const ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';
|
|
27
27
|
const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';
|
|
28
28
|
const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
|
|
29
|
-
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px]
|
|
29
|
+
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px]';
|
|
30
30
|
const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
|
|
31
31
|
const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
|
|
32
32
|
const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';
|
|
33
|
-
const ClassCloseButton = '
|
|
33
|
+
const ClassCloseButton = 'rounded-full border-transparent p-[4px] outline-none';
|
|
34
34
|
const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
|
|
35
35
|
|
|
36
36
|
var Modal = function (_a) {
|
|
37
|
-
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
|
|
37
|
+
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c, className = _a.className, closeIcon = _a.closeIcon;
|
|
38
38
|
var dialogRef = React.useRef(null);
|
|
39
39
|
React.useEffect(function () {
|
|
40
40
|
var _a, _b;
|
|
@@ -66,7 +66,7 @@ var Modal = function (_a) {
|
|
|
66
66
|
return (show &&
|
|
67
67
|
createPortal(React.createElement("dialog", { ref: dialogRef, className: clsx(show ? ClassModal : null, fullscreen
|
|
68
68
|
? ClassModalFullscreenDimensions
|
|
69
|
-
: ClassModalStandardDimensions), onClick: closeOnClickBackdrop },
|
|
69
|
+
: ClassModalStandardDimensions, className), onClick: closeOnClickBackdrop },
|
|
70
70
|
React.createElement("div", { className: ClassTitleBox },
|
|
71
71
|
React.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
|
|
72
72
|
helpLink ? React.createElement("div", { className: ClassHelpLinkDash }) : null,
|
|
@@ -74,12 +74,11 @@ var Modal = function (_a) {
|
|
|
74
74
|
"Need help",
|
|
75
75
|
React.createElement(IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
|
|
76
76
|
React.createElement("div", { className: "grow" }),
|
|
77
|
-
React.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
|
|
78
|
-
React.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
|
|
77
|
+
React.createElement("button", { "aria-label": "Close", className: "".concat(ClassCloseButton, " group"), onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }, closeIcon !== null && closeIcon !== void 0 ? closeIcon : (React.createElement(IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true })))),
|
|
79
78
|
React.createElement("div", { className: ClassContent }, children)), document.body));
|
|
80
79
|
};
|
|
81
80
|
|
|
82
81
|
export { Modal as default };
|
|
83
82
|
//# sourceMappingURL=index.es.mjs.map
|
|
84
83
|
|
|
85
|
-
/* <wind-keep class="ml-[4px] grow
|
|
84
|
+
/* <wind-keep class="ml-[4px] grow"> */
|
package/dist/index.es.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/
|
|
1
|
+
{"version":3,"file":"index.es.mjs","sources":["../../constants/dist/index.es.mjs","../Modal.tsx"],"sourcesContent":["const ATTR_DATA_MODAL_SCROLL_TOP = 'data-modal-scroll-top';\nconst CY_MODAL_CLASS = 'cy-modal-overflow-hidden';\nfunction disableBodyScroll() {\n document.body.setAttribute(ATTR_DATA_MODAL_SCROLL_TOP, `${window.scrollY}`);\n if (document.documentElement.clientWidth > window.innerWidth) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-x');\n }\n if (document.documentElement.clientHeight > window.innerHeight) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-y');\n }\n document.body.classList.add(CY_MODAL_CLASS);\n}\nfunction freeBodyScroll() {\n const scrollY = parseInt(document.body.getAttribute(ATTR_DATA_MODAL_SCROLL_TOP) || '0');\n document.body.classList.remove(CY_MODAL_CLASS);\n document.documentElement.classList.remove('cy-modal-overflow-scroll-x');\n document.documentElement.classList.remove('cy-modal-overflow-scroll-y');\n window.scrollTo({ top: scrollY });\n}\n\nconst ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';\nconst ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';\nconst ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';\nconst ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px]';\nconst ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';\nconst ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';\nconst ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';\nconst ClassCloseButton = 'rounded-full border-transparent p-[4px] outline-none';\nconst ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';\n\nexport { ClassCloseButton, ClassContent, ClassHelpLink, ClassHelpLinkDash, ClassModal, ClassModalFullscreenDimensions, ClassModalStandardDimensions, ClassTitle, ClassTitleBox, disableBodyScroll, freeBodyScroll };\n//# sourceMappingURL=index.es.mjs.map\n",null],"names":[],"mappings":"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"}
|
package/dist/index.umd.js
CHANGED
|
@@ -47,15 +47,15 @@ function freeBodyScroll() {
|
|
|
47
47
|
const ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';
|
|
48
48
|
const ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';
|
|
49
49
|
const ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';
|
|
50
|
-
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px]
|
|
50
|
+
const ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px]';
|
|
51
51
|
const ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';
|
|
52
52
|
const ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';
|
|
53
53
|
const ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';
|
|
54
|
-
const ClassCloseButton = '
|
|
54
|
+
const ClassCloseButton = 'rounded-full border-transparent p-[4px] outline-none';
|
|
55
55
|
const ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';
|
|
56
56
|
|
|
57
57
|
var Modal = function (_a) {
|
|
58
|
-
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c;
|
|
58
|
+
var _b = _a.show, show = _b === void 0 ? false : _b, title = _a.title, helpLink = _a.helpLink, onClose = _a.onClose, children = _a.children, _c = _a.fullscreen, fullscreen = _c === void 0 ? false : _c, className = _a.className, closeIcon = _a.closeIcon;
|
|
59
59
|
var dialogRef = React__namespace.useRef(null);
|
|
60
60
|
React__namespace.useEffect(function () {
|
|
61
61
|
var _a, _b;
|
|
@@ -87,7 +87,7 @@ var Modal = function (_a) {
|
|
|
87
87
|
return (show &&
|
|
88
88
|
reactDom.createPortal(React__namespace.createElement("dialog", { ref: dialogRef, className: clsx(show ? ClassModal : null, fullscreen
|
|
89
89
|
? ClassModalFullscreenDimensions
|
|
90
|
-
: ClassModalStandardDimensions), onClick: closeOnClickBackdrop },
|
|
90
|
+
: ClassModalStandardDimensions, className), onClick: closeOnClickBackdrop },
|
|
91
91
|
React__namespace.createElement("div", { className: ClassTitleBox },
|
|
92
92
|
React__namespace.createElement("div", { id: "cy_modal_label", className: ClassTitle }, title),
|
|
93
93
|
helpLink ? React__namespace.createElement("div", { className: ClassHelpLinkDash }) : null,
|
|
@@ -95,12 +95,11 @@ var Modal = function (_a) {
|
|
|
95
95
|
"Need help",
|
|
96
96
|
React__namespace.createElement(reactIcon.IconActionQuestionMarkCircle, { className: "ml-[4px]", "stroke-color": "indigo-500", "fill-color": "indigo-100" }))) : null,
|
|
97
97
|
React__namespace.createElement("div", { className: "grow" }),
|
|
98
|
-
React__namespace.createElement("button", { "aria-label": "Close", className: ClassCloseButton, onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } },
|
|
99
|
-
React__namespace.createElement(reactIcon.IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true }))),
|
|
98
|
+
React__namespace.createElement("button", { "aria-label": "Close", className: "".concat(ClassCloseButton, " group"), onClick: function () { return onClose === null || onClose === void 0 ? void 0 : onClose(); } }, closeIcon !== null && closeIcon !== void 0 ? closeIcon : (React__namespace.createElement(reactIcon.IconActionDelete, { className: "children:transition-all", "stroke-color": "gray-400", "hover-stroke-color": "gray-700", interactiveColorsOnGroup: true })))),
|
|
100
99
|
React__namespace.createElement("div", { className: ClassContent }, children)), document.body));
|
|
101
100
|
};
|
|
102
101
|
|
|
103
102
|
module.exports = Modal;
|
|
104
103
|
//# sourceMappingURL=index.umd.js.map
|
|
105
104
|
|
|
106
|
-
/* <wind-keep class="ml-[4px] grow
|
|
105
|
+
/* <wind-keep class="ml-[4px] grow"> */
|
package/dist/index.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/
|
|
1
|
+
{"version":3,"file":"index.umd.js","sources":["../../constants/dist/index.es.mjs","../Modal.tsx"],"sourcesContent":["const ATTR_DATA_MODAL_SCROLL_TOP = 'data-modal-scroll-top';\nconst CY_MODAL_CLASS = 'cy-modal-overflow-hidden';\nfunction disableBodyScroll() {\n document.body.setAttribute(ATTR_DATA_MODAL_SCROLL_TOP, `${window.scrollY}`);\n if (document.documentElement.clientWidth > window.innerWidth) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-x');\n }\n if (document.documentElement.clientHeight > window.innerHeight) {\n document.documentElement.classList.add('cy-modal-overflow-scroll-y');\n }\n document.body.classList.add(CY_MODAL_CLASS);\n}\nfunction freeBodyScroll() {\n const scrollY = parseInt(document.body.getAttribute(ATTR_DATA_MODAL_SCROLL_TOP) || '0');\n document.body.classList.remove(CY_MODAL_CLASS);\n document.documentElement.classList.remove('cy-modal-overflow-scroll-x');\n document.documentElement.classList.remove('cy-modal-overflow-scroll-y');\n window.scrollTo({ top: scrollY });\n}\n\nconst ClassModal = 'pointer-events-auto fixed flex flex-col rounded outline outline-4 outline-gray-500/[.40] bg-white backdrop:bg-gray-900/[.80] backdrop:backdrop-blur-sm';\nconst ClassModalStandardDimensions = 'max-h-[80vh] min-w-[200px] sm:min-w-[390px] max-w-[calc(100vw-32px)] sm:max-w-[70vw] shrink-0';\nconst ClassModalFullscreenDimensions = 'h-[calc(100vh-32px)] sm:w-[calc(100vw-32px)]';\nconst ClassTitleBox = 'flex shrink-0 items-center justify-between rounded-t-md border-b border-gray-100 p-[16px] sm:px-[24px]';\nconst ClassTitle = 'text-[18px] font-medium leading-[28px] text-gray-900';\nconst ClassHelpLinkDash = 'mx-[8px] h-[1px] w-[32px] bg-gray-100';\nconst ClassHelpLink = 'flex items-center text-[16px] font-normal leading-[24px] text-indigo-500';\nconst ClassCloseButton = 'rounded-full border-transparent p-[4px] outline-none';\nconst ClassContent = 'overflow-y-auto p-[16px] sm:px-[24px]';\n\nexport { ClassCloseButton, ClassContent, ClassHelpLink, ClassHelpLinkDash, ClassModal, ClassModalFullscreenDimensions, ClassModalStandardDimensions, ClassTitle, ClassTitleBox, disableBodyScroll, freeBodyScroll };\n//# sourceMappingURL=index.es.mjs.map\n",null],"names":["React","createPortal","IconActionQuestionMarkCircle","IconActionDelete"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cypress-design/react-modal",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"files": [
|
|
5
5
|
"*"
|
|
6
6
|
],
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"build:types": "tsc --project ./tsconfig.build.json"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@cypress-design/react-icon": "^1.
|
|
22
|
+
"@cypress-design/react-icon": "^1.39.0",
|
|
23
23
|
"clsx": "^2.1.1"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
package/rollup.config.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import rootRollupConfig from '../../
|
|
2
|
-
import pkg from './package.json'
|
|
1
|
+
import rootRollupConfig from '../../react.rollup.config.mjs'
|
|
2
|
+
import pkg from './package.json' with { type: 'json' }
|
|
3
3
|
|
|
4
4
|
export default rootRollupConfig({
|
|
5
5
|
input: './index.ts',
|