docusaurus-theme-openapi-docs 0.0.0-1295 → 0.0.0-1310
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/theme/ApiExplorer/ApiCodeBlock/Container/index.js +4 -2
- package/lib/theme/ApiExplorer/ApiCodeBlock/Content/String.js +9 -6
- package/lib/theme/ApiExplorer/ApiCodeBlock/Line/index.d.ts +1 -1
- package/lib/theme/ApiExplorer/ApiCodeBlock/index.d.ts +1 -1
- package/lib/theme/ApiExplorer/CodeTabs/index.d.ts +1 -1
- package/lib/theme/ApiExplorer/CodeTabs/index.js +6 -5
- package/lib/theme/ApiTabs/index.d.ts +1 -1
- package/lib/theme/ApiTabs/index.js +6 -5
- package/lib/theme/DiscriminatorTabs/index.d.ts +1 -1
- package/lib/theme/DiscriminatorTabs/index.js +6 -5
- package/lib/theme/MimeTabs/index.d.ts +1 -1
- package/lib/theme/MimeTabs/index.js +6 -5
- package/lib/theme/OperationTabs/index.d.ts +1 -1
- package/lib/theme/OperationTabs/index.js +6 -5
- package/lib/theme/SchemaTabs/index.d.ts +1 -1
- package/lib/theme/SchemaTabs/index.js +6 -5
- package/lib/theme/TabItem/index.d.ts +5 -0
- package/lib/theme/TabItem/index.js +51 -0
- package/lib/theme/TabItem/styles.module.css +3 -0
- package/lib/theme/Tabs/index.d.ts +5 -0
- package/lib/theme/Tabs/index.js +148 -0
- package/lib/theme/Tabs/styles.module.css +7 -0
- package/lib/theme/utils/codeBlockUtils.d.ts +28 -0
- package/lib/theme/utils/codeBlockUtils.js +223 -0
- package/lib/theme/utils/reactUtils.d.ts +1 -0
- package/lib/theme/utils/reactUtils.js +23 -0
- package/lib/theme/utils/scrollUtils.d.ts +7 -0
- package/lib/theme/utils/scrollUtils.js +175 -0
- package/lib/theme/utils/tabsUtils.d.ts +47 -0
- package/lib/theme/utils/tabsUtils.js +299 -0
- package/lib/theme/utils/useCodeWordWrap.d.ts +8 -0
- package/lib/theme/utils/useCodeWordWrap.js +84 -0
- package/lib/theme/utils/useMutationObserver.d.ts +3 -0
- package/lib/theme/utils/useMutationObserver.js +34 -0
- package/package.json +4 -4
- package/src/theme/ApiExplorer/ApiCodeBlock/Container/index.tsx +2 -1
- package/src/theme/ApiExplorer/ApiCodeBlock/Content/String.tsx +8 -7
- package/src/theme/ApiExplorer/ApiCodeBlock/Line/index.tsx +1 -1
- package/src/theme/ApiExplorer/ApiCodeBlock/index.tsx +1 -1
- package/src/theme/ApiExplorer/CodeTabs/index.tsx +5 -5
- package/src/theme/ApiTabs/index.tsx +7 -6
- package/src/theme/DiscriminatorTabs/index.tsx +6 -5
- package/src/theme/MimeTabs/index.tsx +9 -8
- package/src/theme/OperationTabs/index.tsx +5 -4
- package/src/theme/SchemaTabs/index.tsx +6 -5
- package/src/theme/TabItem/index.tsx +61 -0
- package/src/theme/TabItem/styles.module.css +3 -0
- package/src/theme/Tabs/index.tsx +164 -0
- package/src/theme/Tabs/styles.module.css +7 -0
- package/src/theme/utils/codeBlockUtils.ts +296 -0
- package/src/theme/utils/reactUtils.ts +22 -0
- package/src/theme/utils/scrollUtils.tsx +153 -0
- package/src/theme/utils/tabsUtils.tsx +329 -0
- package/src/theme/utils/useCodeWordWrap.ts +110 -0
- package/src/theme/utils/useMutationObserver.ts +43 -0
- package/src/theme-classic.d.ts +0 -96
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/* ============================================================================
|
|
3
|
+
* Portions Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
4
|
+
* Portions Copyright (c) Palo Alto Networks
|
|
5
|
+
*
|
|
6
|
+
* Vendored subset of @docusaurus/theme-common/src/utils/codeBlockUtils.tsx (MIT)
|
|
7
|
+
* to remove the dependency on @docusaurus/theme-common/internal.
|
|
8
|
+
* See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the MIT license found in the
|
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
|
12
|
+
* ========================================================================== */
|
|
13
|
+
var __importDefault =
|
|
14
|
+
(this && this.__importDefault) ||
|
|
15
|
+
function (mod) {
|
|
16
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
17
|
+
};
|
|
18
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
19
|
+
exports.parseCodeBlockTitle = parseCodeBlockTitle;
|
|
20
|
+
exports.containsLineNumbers = containsLineNumbers;
|
|
21
|
+
exports.parseLines = parseLines;
|
|
22
|
+
exports.parseLanguage = parseClassNameLanguage;
|
|
23
|
+
exports.getPrismCssVariables = getPrismCssVariables;
|
|
24
|
+
const parse_numeric_range_1 = __importDefault(require("parse-numeric-range"));
|
|
25
|
+
const codeBlockTitleRegex = /title=(?<quote>["'])(?<title>.*?)\1/;
|
|
26
|
+
const metastringLinesRangeRegex = /\{(?<range>[\d,-]+)\}/;
|
|
27
|
+
const popularCommentPatterns = {
|
|
28
|
+
js: { start: "\\/\\/", end: "" },
|
|
29
|
+
jsBlock: { start: "\\/\\*", end: "\\*\\/" },
|
|
30
|
+
jsx: { start: "\\{\\s*\\/\\*", end: "\\*\\/\\s*\\}" },
|
|
31
|
+
bash: { start: "#", end: "" },
|
|
32
|
+
html: { start: "<!--", end: "-->" },
|
|
33
|
+
};
|
|
34
|
+
const commentPatterns = {
|
|
35
|
+
...popularCommentPatterns,
|
|
36
|
+
lua: { start: "--", end: "" },
|
|
37
|
+
wasm: { start: "\\;\\;", end: "" },
|
|
38
|
+
tex: { start: "%", end: "" },
|
|
39
|
+
vb: { start: "['‘’]", end: "" },
|
|
40
|
+
vbnet: { start: "(?:_\\s*)?['‘’]", end: "" },
|
|
41
|
+
rem: { start: "[Rr][Ee][Mm]\\b", end: "" },
|
|
42
|
+
f90: { start: "!", end: "" },
|
|
43
|
+
ml: { start: "\\(\\*", end: "\\*\\)" },
|
|
44
|
+
cobol: { start: "\\*>", end: "" },
|
|
45
|
+
};
|
|
46
|
+
const popularCommentTypes = Object.keys(popularCommentPatterns);
|
|
47
|
+
function getCommentPattern(languages, magicCommentDirectives) {
|
|
48
|
+
const commentPattern = languages
|
|
49
|
+
.map((lang) => {
|
|
50
|
+
const { start, end } = commentPatterns[lang];
|
|
51
|
+
return `(?:${start}\\s*(${magicCommentDirectives
|
|
52
|
+
.flatMap((d) => [d.line, d.block?.start, d.block?.end].filter(Boolean))
|
|
53
|
+
.join("|")})\\s*${end})`;
|
|
54
|
+
})
|
|
55
|
+
.join("|");
|
|
56
|
+
return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
|
|
57
|
+
}
|
|
58
|
+
function getAllMagicCommentDirectiveStyles(lang, magicCommentDirectives) {
|
|
59
|
+
switch (lang) {
|
|
60
|
+
case "js":
|
|
61
|
+
case "javascript":
|
|
62
|
+
case "ts":
|
|
63
|
+
case "typescript":
|
|
64
|
+
return getCommentPattern(["js", "jsBlock"], magicCommentDirectives);
|
|
65
|
+
case "jsx":
|
|
66
|
+
case "tsx":
|
|
67
|
+
return getCommentPattern(
|
|
68
|
+
["js", "jsBlock", "jsx"],
|
|
69
|
+
magicCommentDirectives
|
|
70
|
+
);
|
|
71
|
+
case "html":
|
|
72
|
+
return getCommentPattern(
|
|
73
|
+
["js", "jsBlock", "html"],
|
|
74
|
+
magicCommentDirectives
|
|
75
|
+
);
|
|
76
|
+
case "python":
|
|
77
|
+
case "py":
|
|
78
|
+
case "bash":
|
|
79
|
+
return getCommentPattern(["bash"], magicCommentDirectives);
|
|
80
|
+
case "markdown":
|
|
81
|
+
case "md":
|
|
82
|
+
return getCommentPattern(["html", "jsx", "bash"], magicCommentDirectives);
|
|
83
|
+
case "tex":
|
|
84
|
+
case "latex":
|
|
85
|
+
case "matlab":
|
|
86
|
+
return getCommentPattern(["tex"], magicCommentDirectives);
|
|
87
|
+
case "lua":
|
|
88
|
+
case "haskell":
|
|
89
|
+
return getCommentPattern(["lua"], magicCommentDirectives);
|
|
90
|
+
case "sql":
|
|
91
|
+
return getCommentPattern(["lua", "jsBlock"], magicCommentDirectives);
|
|
92
|
+
case "wasm":
|
|
93
|
+
return getCommentPattern(["wasm"], magicCommentDirectives);
|
|
94
|
+
case "vb":
|
|
95
|
+
case "vba":
|
|
96
|
+
case "visual-basic":
|
|
97
|
+
return getCommentPattern(["vb", "rem"], magicCommentDirectives);
|
|
98
|
+
case "vbnet":
|
|
99
|
+
return getCommentPattern(["vbnet", "rem"], magicCommentDirectives);
|
|
100
|
+
case "batch":
|
|
101
|
+
return getCommentPattern(["rem"], magicCommentDirectives);
|
|
102
|
+
case "basic":
|
|
103
|
+
return getCommentPattern(["rem", "f90"], magicCommentDirectives);
|
|
104
|
+
case "fsharp":
|
|
105
|
+
return getCommentPattern(["js", "ml"], magicCommentDirectives);
|
|
106
|
+
case "ocaml":
|
|
107
|
+
case "sml":
|
|
108
|
+
return getCommentPattern(["ml"], magicCommentDirectives);
|
|
109
|
+
case "fortran":
|
|
110
|
+
return getCommentPattern(["f90"], magicCommentDirectives);
|
|
111
|
+
case "cobol":
|
|
112
|
+
return getCommentPattern(["cobol"], magicCommentDirectives);
|
|
113
|
+
default:
|
|
114
|
+
return getCommentPattern(popularCommentTypes, magicCommentDirectives);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
function parseCodeBlockTitle(metastring) {
|
|
118
|
+
return metastring?.match(codeBlockTitleRegex)?.groups.title ?? "";
|
|
119
|
+
}
|
|
120
|
+
function containsLineNumbers(metastring) {
|
|
121
|
+
return Boolean(metastring?.includes("showLineNumbers"));
|
|
122
|
+
}
|
|
123
|
+
function parseCodeLinesFromMetastring(code, { metastring, magicComments }) {
|
|
124
|
+
if (metastring && metastringLinesRangeRegex.test(metastring)) {
|
|
125
|
+
const linesRange = metastring.match(metastringLinesRangeRegex).groups.range;
|
|
126
|
+
if (magicComments.length === 0) {
|
|
127
|
+
throw new Error(
|
|
128
|
+
`A highlight range has been given in code block's metastring (\`\`\` ${metastring}), but no magic comment config is available. Docusaurus applies the first magic comment entry's className for metastring ranges.`
|
|
129
|
+
);
|
|
130
|
+
}
|
|
131
|
+
const metastringRangeClassName = magicComments[0].className;
|
|
132
|
+
const lines = (0, parse_numeric_range_1.default)(linesRange)
|
|
133
|
+
.filter((n) => n > 0)
|
|
134
|
+
.map((n) => [n - 1, [metastringRangeClassName]]);
|
|
135
|
+
return { lineClassNames: Object.fromEntries(lines), code };
|
|
136
|
+
}
|
|
137
|
+
return null;
|
|
138
|
+
}
|
|
139
|
+
function parseCodeLinesFromContent(code, params) {
|
|
140
|
+
const { language, magicComments } = params;
|
|
141
|
+
if (language === undefined) {
|
|
142
|
+
return { lineClassNames: {}, code };
|
|
143
|
+
}
|
|
144
|
+
const directiveRegex = getAllMagicCommentDirectiveStyles(
|
|
145
|
+
language,
|
|
146
|
+
magicComments
|
|
147
|
+
);
|
|
148
|
+
const lines = code.split(/\r?\n/);
|
|
149
|
+
const blocks = Object.fromEntries(
|
|
150
|
+
magicComments.map((d) => [d.className, { start: 0, range: "" }])
|
|
151
|
+
);
|
|
152
|
+
const lineToClassName = Object.fromEntries(
|
|
153
|
+
magicComments
|
|
154
|
+
.filter((d) => d.line)
|
|
155
|
+
.map(({ className, line }) => [line, className])
|
|
156
|
+
);
|
|
157
|
+
const blockStartToClassName = Object.fromEntries(
|
|
158
|
+
magicComments
|
|
159
|
+
.filter((d) => d.block)
|
|
160
|
+
.map(({ className, block }) => [block.start, className])
|
|
161
|
+
);
|
|
162
|
+
const blockEndToClassName = Object.fromEntries(
|
|
163
|
+
magicComments
|
|
164
|
+
.filter((d) => d.block)
|
|
165
|
+
.map(({ className, block }) => [block.end, className])
|
|
166
|
+
);
|
|
167
|
+
for (let lineNumber = 0; lineNumber < lines.length; ) {
|
|
168
|
+
const line = lines[lineNumber];
|
|
169
|
+
const match = line.match(directiveRegex);
|
|
170
|
+
if (!match) {
|
|
171
|
+
lineNumber += 1;
|
|
172
|
+
continue;
|
|
173
|
+
}
|
|
174
|
+
const directive = match.slice(1).find((item) => item !== undefined);
|
|
175
|
+
if (lineToClassName[directive]) {
|
|
176
|
+
blocks[lineToClassName[directive]].range += `${lineNumber},`;
|
|
177
|
+
} else if (blockStartToClassName[directive]) {
|
|
178
|
+
blocks[blockStartToClassName[directive]].start = lineNumber;
|
|
179
|
+
} else if (blockEndToClassName[directive]) {
|
|
180
|
+
blocks[blockEndToClassName[directive]].range +=
|
|
181
|
+
`${blocks[blockEndToClassName[directive]].start}-${lineNumber - 1},`;
|
|
182
|
+
}
|
|
183
|
+
lines.splice(lineNumber, 1);
|
|
184
|
+
}
|
|
185
|
+
const lineClassNames = {};
|
|
186
|
+
Object.entries(blocks).forEach(([className, { range }]) => {
|
|
187
|
+
(0, parse_numeric_range_1.default)(range).forEach((l) => {
|
|
188
|
+
lineClassNames[l] ??= [];
|
|
189
|
+
lineClassNames[l].push(className);
|
|
190
|
+
});
|
|
191
|
+
});
|
|
192
|
+
return { code: lines.join("\n"), lineClassNames };
|
|
193
|
+
}
|
|
194
|
+
function parseLines(code, params) {
|
|
195
|
+
const newCode = code.replace(/\r?\n$/, "");
|
|
196
|
+
return (
|
|
197
|
+
parseCodeLinesFromMetastring(newCode, { ...params }) ??
|
|
198
|
+
parseCodeLinesFromContent(newCode, { ...params })
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
function parseClassNameLanguage(className) {
|
|
202
|
+
if (!className) {
|
|
203
|
+
return undefined;
|
|
204
|
+
}
|
|
205
|
+
const languageClassName = className
|
|
206
|
+
.split(" ")
|
|
207
|
+
.find((str) => str.startsWith("language-"));
|
|
208
|
+
return languageClassName?.replace(/language-/, "");
|
|
209
|
+
}
|
|
210
|
+
function getPrismCssVariables(prismTheme) {
|
|
211
|
+
const mapping = {
|
|
212
|
+
color: "--prism-color",
|
|
213
|
+
backgroundColor: "--prism-background-color",
|
|
214
|
+
};
|
|
215
|
+
const properties = {};
|
|
216
|
+
Object.entries(prismTheme.plain).forEach(([key, value]) => {
|
|
217
|
+
const varName = mapping[key];
|
|
218
|
+
if (varName && typeof value === "string") {
|
|
219
|
+
properties[varName] = value;
|
|
220
|
+
}
|
|
221
|
+
});
|
|
222
|
+
return properties;
|
|
223
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useShallowMemoObject<O extends object>(obj: O): O;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/* ============================================================================
|
|
3
|
+
* Portions Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
4
|
+
* Portions Copyright (c) Palo Alto Networks
|
|
5
|
+
*
|
|
6
|
+
* Vendored from @docusaurus/theme-common/src/utils/reactUtils.tsx (MIT).
|
|
7
|
+
* Only useShallowMemoObject is kept here — it is not re-exported by
|
|
8
|
+
* @docusaurus/theme-common (public or /internal). useEvent and
|
|
9
|
+
* ReactContextError are public APIs imported directly from the package.
|
|
10
|
+
* See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
|
|
11
|
+
*
|
|
12
|
+
* This source code is licensed under the MIT license found in the
|
|
13
|
+
* LICENSE file in the root directory of this source tree.
|
|
14
|
+
* ========================================================================== */
|
|
15
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
+
exports.useShallowMemoObject = useShallowMemoObject;
|
|
17
|
+
const react_1 = require("react");
|
|
18
|
+
function useShallowMemoObject(obj) {
|
|
19
|
+
const deps = Object.entries(obj);
|
|
20
|
+
deps.sort((a, b) => a[0].localeCompare(b[0]));
|
|
21
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
22
|
+
return (0, react_1.useMemo)(() => obj, deps.flat());
|
|
23
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
export declare function ScrollControllerProvider({ children, }: {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}): ReactNode;
|
|
5
|
+
export declare function useScrollPositionBlocker(): {
|
|
6
|
+
blockElementScrollPositionUntilNextRender: (el: HTMLElement) => void;
|
|
7
|
+
};
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
/* ============================================================================
|
|
3
|
+
* Portions Copyright (c) Meta Platforms, Inc. and affiliates.
|
|
4
|
+
* Portions Copyright (c) Palo Alto Networks
|
|
5
|
+
*
|
|
6
|
+
* Vendored subset of @docusaurus/theme-common/src/utils/scrollUtils.tsx (MIT)
|
|
7
|
+
* to remove the dependency on @docusaurus/theme-common/internal. Only the
|
|
8
|
+
* ScrollControllerProvider + useScrollPositionBlocker surface is kept, since
|
|
9
|
+
* that's all our tab renderers need. The ScrollControllerProvider must be
|
|
10
|
+
* mounted in the React tree above any consumer of useScrollPositionBlocker
|
|
11
|
+
* (see ApiItem/index.tsx).
|
|
12
|
+
* See: https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/1140
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the MIT license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
* ========================================================================== */
|
|
17
|
+
var __createBinding =
|
|
18
|
+
(this && this.__createBinding) ||
|
|
19
|
+
(Object.create
|
|
20
|
+
? function (o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
23
|
+
if (
|
|
24
|
+
!desc ||
|
|
25
|
+
("get" in desc ? !m.__esModule : desc.writable || desc.configurable)
|
|
26
|
+
) {
|
|
27
|
+
desc = {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function () {
|
|
30
|
+
return m[k];
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
Object.defineProperty(o, k2, desc);
|
|
35
|
+
}
|
|
36
|
+
: function (o, m, k, k2) {
|
|
37
|
+
if (k2 === undefined) k2 = k;
|
|
38
|
+
o[k2] = m[k];
|
|
39
|
+
});
|
|
40
|
+
var __setModuleDefault =
|
|
41
|
+
(this && this.__setModuleDefault) ||
|
|
42
|
+
(Object.create
|
|
43
|
+
? function (o, v) {
|
|
44
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
45
|
+
}
|
|
46
|
+
: function (o, v) {
|
|
47
|
+
o["default"] = v;
|
|
48
|
+
});
|
|
49
|
+
var __importStar =
|
|
50
|
+
(this && this.__importStar) ||
|
|
51
|
+
(function () {
|
|
52
|
+
var ownKeys = function (o) {
|
|
53
|
+
ownKeys =
|
|
54
|
+
Object.getOwnPropertyNames ||
|
|
55
|
+
function (o) {
|
|
56
|
+
var ar = [];
|
|
57
|
+
for (var k in o)
|
|
58
|
+
if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
59
|
+
return ar;
|
|
60
|
+
};
|
|
61
|
+
return ownKeys(o);
|
|
62
|
+
};
|
|
63
|
+
return function (mod) {
|
|
64
|
+
if (mod && mod.__esModule) return mod;
|
|
65
|
+
var result = {};
|
|
66
|
+
if (mod != null)
|
|
67
|
+
for (var k = ownKeys(mod), i = 0; i < k.length; i++)
|
|
68
|
+
if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
69
|
+
__setModuleDefault(result, mod);
|
|
70
|
+
return result;
|
|
71
|
+
};
|
|
72
|
+
})();
|
|
73
|
+
var __importDefault =
|
|
74
|
+
(this && this.__importDefault) ||
|
|
75
|
+
function (mod) {
|
|
76
|
+
return mod && mod.__esModule ? mod : { default: mod };
|
|
77
|
+
};
|
|
78
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
79
|
+
exports.ScrollControllerProvider = ScrollControllerProvider;
|
|
80
|
+
exports.useScrollPositionBlocker = useScrollPositionBlocker;
|
|
81
|
+
const react_1 = __importStar(require("react"));
|
|
82
|
+
const useIsomorphicLayoutEffect_1 = __importDefault(
|
|
83
|
+
require("@docusaurus/useIsomorphicLayoutEffect")
|
|
84
|
+
);
|
|
85
|
+
const theme_common_1 = require("@docusaurus/theme-common");
|
|
86
|
+
function useScrollControllerContextValue() {
|
|
87
|
+
const scrollEventsEnabledRef = (0, react_1.useRef)(true);
|
|
88
|
+
return (0, react_1.useMemo)(
|
|
89
|
+
() => ({
|
|
90
|
+
scrollEventsEnabledRef,
|
|
91
|
+
enableScrollEvents: () => {
|
|
92
|
+
scrollEventsEnabledRef.current = true;
|
|
93
|
+
},
|
|
94
|
+
disableScrollEvents: () => {
|
|
95
|
+
scrollEventsEnabledRef.current = false;
|
|
96
|
+
},
|
|
97
|
+
}),
|
|
98
|
+
[]
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
const ScrollMonitorContext = react_1.default.createContext(undefined);
|
|
102
|
+
function ScrollControllerProvider({ children }) {
|
|
103
|
+
const value = useScrollControllerContextValue();
|
|
104
|
+
return react_1.default.createElement(
|
|
105
|
+
ScrollMonitorContext.Provider,
|
|
106
|
+
{ value: value },
|
|
107
|
+
children
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
function useScrollController() {
|
|
111
|
+
const context = (0, react_1.useContext)(ScrollMonitorContext);
|
|
112
|
+
if (context == null) {
|
|
113
|
+
throw new theme_common_1.ReactContextError("ScrollControllerProvider");
|
|
114
|
+
}
|
|
115
|
+
return context;
|
|
116
|
+
}
|
|
117
|
+
function useScrollPositionSaver() {
|
|
118
|
+
const lastElementRef = (0, react_1.useRef)({
|
|
119
|
+
elem: null,
|
|
120
|
+
top: 0,
|
|
121
|
+
});
|
|
122
|
+
const save = (0, react_1.useCallback)((elem) => {
|
|
123
|
+
lastElementRef.current = {
|
|
124
|
+
elem,
|
|
125
|
+
top: elem.getBoundingClientRect().top,
|
|
126
|
+
};
|
|
127
|
+
}, []);
|
|
128
|
+
const restore = (0, react_1.useCallback)(() => {
|
|
129
|
+
const {
|
|
130
|
+
current: { elem, top },
|
|
131
|
+
} = lastElementRef;
|
|
132
|
+
if (!elem) {
|
|
133
|
+
return { restored: false };
|
|
134
|
+
}
|
|
135
|
+
const newTop = elem.getBoundingClientRect().top;
|
|
136
|
+
const heightDiff = newTop - top;
|
|
137
|
+
if (heightDiff) {
|
|
138
|
+
window.scrollBy({ left: 0, top: heightDiff });
|
|
139
|
+
}
|
|
140
|
+
lastElementRef.current = { elem: null, top: 0 };
|
|
141
|
+
return { restored: heightDiff !== 0 };
|
|
142
|
+
}, []);
|
|
143
|
+
return (0, react_1.useMemo)(() => ({ save, restore }), [restore, save]);
|
|
144
|
+
}
|
|
145
|
+
function useScrollPositionBlocker() {
|
|
146
|
+
const scrollController = useScrollController();
|
|
147
|
+
const scrollPositionSaver = useScrollPositionSaver();
|
|
148
|
+
const nextLayoutEffectCallbackRef = (0, react_1.useRef)(undefined);
|
|
149
|
+
const blockElementScrollPositionUntilNextRender = (0, react_1.useCallback)(
|
|
150
|
+
(el) => {
|
|
151
|
+
scrollPositionSaver.save(el);
|
|
152
|
+
scrollController.disableScrollEvents();
|
|
153
|
+
nextLayoutEffectCallbackRef.current = () => {
|
|
154
|
+
const { restored } = scrollPositionSaver.restore();
|
|
155
|
+
nextLayoutEffectCallbackRef.current = undefined;
|
|
156
|
+
if (restored) {
|
|
157
|
+
const handleScrollRestoreEvent = () => {
|
|
158
|
+
scrollController.enableScrollEvents();
|
|
159
|
+
window.removeEventListener("scroll", handleScrollRestoreEvent);
|
|
160
|
+
};
|
|
161
|
+
window.addEventListener("scroll", handleScrollRestoreEvent);
|
|
162
|
+
} else {
|
|
163
|
+
scrollController.enableScrollEvents();
|
|
164
|
+
}
|
|
165
|
+
};
|
|
166
|
+
},
|
|
167
|
+
[scrollController, scrollPositionSaver]
|
|
168
|
+
);
|
|
169
|
+
(0, useIsomorphicLayoutEffect_1.default)(() => {
|
|
170
|
+
queueMicrotask(() => nextLayoutEffectCallbackRef.current?.());
|
|
171
|
+
});
|
|
172
|
+
return {
|
|
173
|
+
blockElementScrollPositionUntilNextRender,
|
|
174
|
+
};
|
|
175
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
export interface TabValue {
|
|
3
|
+
readonly value: string;
|
|
4
|
+
readonly label?: string;
|
|
5
|
+
readonly attributes?: {
|
|
6
|
+
[key: string]: unknown;
|
|
7
|
+
};
|
|
8
|
+
readonly default?: boolean;
|
|
9
|
+
}
|
|
10
|
+
export interface TabsProps {
|
|
11
|
+
readonly lazy?: boolean;
|
|
12
|
+
readonly block?: boolean;
|
|
13
|
+
readonly children: ReactNode;
|
|
14
|
+
readonly defaultValue?: string | null;
|
|
15
|
+
readonly values?: readonly TabValue[];
|
|
16
|
+
readonly groupId?: string;
|
|
17
|
+
readonly className?: string;
|
|
18
|
+
readonly queryString?: string | boolean;
|
|
19
|
+
}
|
|
20
|
+
export interface TabProps extends TabsProps {
|
|
21
|
+
length?: number;
|
|
22
|
+
}
|
|
23
|
+
export interface TabItemProps {
|
|
24
|
+
readonly children: ReactNode;
|
|
25
|
+
readonly value: string;
|
|
26
|
+
readonly default?: boolean;
|
|
27
|
+
readonly label?: string;
|
|
28
|
+
readonly className?: string;
|
|
29
|
+
readonly attributes?: {
|
|
30
|
+
[key: string]: unknown;
|
|
31
|
+
};
|
|
32
|
+
}
|
|
33
|
+
export declare function sanitizeTabsChildren(children: ReactNode): ReactNode;
|
|
34
|
+
type TabsContextValue = {
|
|
35
|
+
selectedValue: string;
|
|
36
|
+
selectValue: (value: string) => void;
|
|
37
|
+
tabValues: readonly TabValue[];
|
|
38
|
+
lazy: boolean;
|
|
39
|
+
block: boolean;
|
|
40
|
+
};
|
|
41
|
+
export declare function useTabsContextValue(props: TabsProps): TabsContextValue;
|
|
42
|
+
export declare function useTabs(): TabsContextValue;
|
|
43
|
+
export declare function TabsProvider(props: {
|
|
44
|
+
children: ReactNode;
|
|
45
|
+
value: TabsContextValue;
|
|
46
|
+
}): ReactNode;
|
|
47
|
+
export {};
|