@public-ui/mcp 4.1.5-rc.0 → 4.1.5-rc.1
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/dist/data.cjs +2 -1
- package/dist/data.mjs +2 -1
- package/package.json +4 -4
- package/shared/sample-index.json +32 -24
package/dist/data.cjs
CHANGED
|
@@ -65,7 +65,8 @@ function loadSampleData() {
|
|
|
65
65
|
return cachedData;
|
|
66
66
|
} catch (error) {
|
|
67
67
|
throw new Error(
|
|
68
|
-
`Failed to load sample index from shared/sample-index.json. Please run 'pnpm generate-index' to create the index file. Error: ${error instanceof Error ? error.message : String(error)}
|
|
68
|
+
`Failed to load sample index from shared/sample-index.json. Please run 'pnpm generate-index' to create the index file. Error: ${error instanceof Error ? error.message : String(error)}`,
|
|
69
|
+
{ cause: error }
|
|
69
70
|
);
|
|
70
71
|
}
|
|
71
72
|
}
|
package/dist/data.mjs
CHANGED
|
@@ -62,7 +62,8 @@ function loadSampleData() {
|
|
|
62
62
|
return cachedData;
|
|
63
63
|
} catch (error) {
|
|
64
64
|
throw new Error(
|
|
65
|
-
`Failed to load sample index from shared/sample-index.json. Please run 'pnpm generate-index' to create the index file. Error: ${error instanceof Error ? error.message : String(error)}
|
|
65
|
+
`Failed to load sample index from shared/sample-index.json. Please run 'pnpm generate-index' to create the index file. Error: ${error instanceof Error ? error.message : String(error)}`,
|
|
66
|
+
{ cause: error }
|
|
66
67
|
);
|
|
67
68
|
}
|
|
68
69
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@public-ui/mcp",
|
|
3
|
-
"version": "4.1.5-rc.
|
|
3
|
+
"version": "4.1.5-rc.1",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"homepage": "https://public-ui.github.io",
|
|
6
6
|
"repository": {
|
|
@@ -46,19 +46,19 @@
|
|
|
46
46
|
"express": "5.2.1",
|
|
47
47
|
"fuse.js": "7.3.0",
|
|
48
48
|
"zod": "4.4.3",
|
|
49
|
-
"@public-ui/components": "4.1.5-rc.
|
|
49
|
+
"@public-ui/components": "4.1.5-rc.1"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@eslint/js": "9.39.4",
|
|
53
53
|
"@modelcontextprotocol/inspector": "0.21.2",
|
|
54
54
|
"@types/express": "5.0.6",
|
|
55
|
-
"@types/node": "25.6.
|
|
55
|
+
"@types/node": "25.6.2",
|
|
56
56
|
"@typescript-eslint/eslint-plugin": "8.58.2",
|
|
57
57
|
"@typescript-eslint/parser": "8.58.2",
|
|
58
58
|
"eslint": "9.39.4",
|
|
59
59
|
"eslint-plugin-json": "4.0.1",
|
|
60
60
|
"globals": "17.6.0",
|
|
61
|
-
"knip": "
|
|
61
|
+
"knip": "6.12.1",
|
|
62
62
|
"nodemon": "3.1.14",
|
|
63
63
|
"prettier": "3.8.3",
|
|
64
64
|
"prettier-plugin-organize-imports": "4.3.0",
|
package/shared/sample-index.json
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"metadata": {
|
|
3
|
-
"generatedAt": "2026-05-
|
|
3
|
+
"generatedAt": "2026-05-13T17:49:53.769Z",
|
|
4
4
|
"buildMode": "ci",
|
|
5
5
|
"counts": {
|
|
6
|
-
"total":
|
|
6
|
+
"total": 314,
|
|
7
7
|
"totalDocs": 56,
|
|
8
8
|
"totalSpecs": 53,
|
|
9
|
-
"totalSamples":
|
|
9
|
+
"totalSamples": 186,
|
|
10
10
|
"totalScenarios": 19
|
|
11
11
|
},
|
|
12
12
|
"repo": {
|
|
13
|
-
"commit": "
|
|
13
|
+
"commit": "300d9261a7d19c2b10ffcc7f5a01e24cffa10c2a",
|
|
14
14
|
"branch": "develop",
|
|
15
15
|
"repoUrl": "https://github.com/public-ui/kolibri"
|
|
16
16
|
}
|
|
@@ -325,7 +325,7 @@
|
|
|
325
325
|
"group": "docs",
|
|
326
326
|
"name": "CVE_OVERVIEW",
|
|
327
327
|
"path": "docs/CVE_OVERVIEW.md",
|
|
328
|
-
"code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 0 | 0 |\n| high | 0 | 0 | 0 | 4 |\n| moderate | 0 | 0 | 0 | 1 |\n| low | 0 | 0 | 0 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| serialize-javascript | moderate | CVE-2026-34043 | v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 5 | 5 | 5 | 3 |\n| high | 32 | 34 | 49 | 29 |\n| moderate | 26 | 27 | 46 | 8 |\n| low | 5 | 5 | 10 | 1 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | ---------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v4, v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v4, v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| handlebars | critical | CVE-2026-33937 | v4, v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion |\n| locutus | critical | CVE-2026-25521 | v4, v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v4, v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| @angular/core | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @hono/node-server | high | CVE-2026-29087 | v2 | @hono/node-server has authorization bypass for protected static paths via encode |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| axios | high | CVE-2026-42043 | v4, v3, v2 | Axios: Incomplete Fix for CVE-2025-62718 — NO_PROXY Protection Bypassed via RFC |\n| axios | high | CVE-2026-42264 | v4, v3, v2 | Axios has prototype pollution read-side gadgets in HTTP adapter that allow crede |\n| axios | high | CVE-2026-42033 | v4, v3, v2 | Axios: Prototype Pollution Gadgets - Response Tampering, Data Exfiltration, and |\n| axios | high | CVE-2026-42035 | v4, v3, v2 | Axios: Header Injection via Prototype Pollution |\n| basic-ftp | high | GHSA-6v7q-wjvx-w8wg | v4, v3, v2 | basic-ftp: Incomplete CRLF Injection Protection Allows Arbitrary FTP Command Exe |\n| basic-ftp | high | CVE-2026-41324 | v4, v3, v2 | basic-ftp vulnerable to denial of service via unbounded memory consumption in Cl |\n| braces | high | CVE-2024-4068 | v3, v2, v1 | Uncontrolled resource consumption in braces |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| fast-xml-parser | high | CVE-2026-25128 | v4, v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v4, v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| fast-xml-parser | high | CVE-2026-33036 | v4, v3, v2 | fast-xml-parser affected by numeric entity expansion bypassing all entity expans |\n| flatted | high | CVE-2026-32141 | v4, v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| flatted | high | CVE-2026-33228 | v4, v3, v2 | Prototype Pollution via parse() in NodeJS flatted |\n| handlebars | high | CVE-2026-33938 | v4, v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part |\n| handlebars | high | CVE-2026-33940 | v4, v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob |\n| handlebars | high | CVE-2026-33939 | v4, v3, v2, v1 | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C |\n| handlebars | high | CVE-2026-33941 | v4, v3, v2, v1 | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| locutus | high | CVE-2026-29091 | v4, v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash | high | CVE-2026-4800 | v4, v3 | lodash vulnerable to Code Injection via `_.template` imports key names |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v4, v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v4, v3, v2, v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| node-forge | high | CVE-2026-33896 | v2 | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5 |\n| node-forge | high | CVE-2026-33895 | v2 | Forge has signature forgery in Ed25519 due to missing S > L check |\n| node-forge | high | CVE-2026-33891 | v2 | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze |\n| node-forge | high | CVE-2026-33894 | v2 | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field |\n| path-to-regexp | high | CVE-2026-4867 | v4, v3, v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r |\n| path-to-regexp | high | CVE-2026-4926 | v2 | path-to-regexp vulnerable to Denial of Service via sequential optional groups |\n| rollup | high | CVE-2026-27606 | v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2 | semver vulnerable to Regular Expression Denial of Service |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| socket.io-parser | high | CVE-2026-33151 | v3, v2 | socket.io allows an unbounded number of binary attachments |\n| svgo | high | CVE-2026-29074 | v4, v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | v1 | node-tar Symlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| undici | high | CVE-2026-1528 | v4, v3, v2 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v4, v3, v2 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v4, v3, v2 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| vite | high | CVE-2026-39364 | v1 | Vite: `server.fs.deny` bypassed with queries |\n| vite | high | CVE-2026-39363 | v1 | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket |\n| @hono/node-server | moderate | CVE-2026-39406 | v2 | @hono/node-server: Middleware bypass via repeated slashes in serveStatic |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| axios | moderate | CVE-2025-62718 | v4, v3, v2 | Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF |\n| axios | moderate | CVE-2026-40175 | v4, v3, v2 | Axios has Unrestricted Cloud Metadata Exfiltration via Header Injection Chain |\n| axios | moderate | CVE-2026-42041 | v4, v3, v2 | Axios: Authentication Bypass via Prototype Pollution Gadget in `validateStatus` |\n| axios | moderate | CVE-2026-42044 | v4, v3, v2 | Axios: Invisible JSON Response Tampering via Prototype Pollution Gadget in `pars |\n| axios | moderate | CVE-2026-42037 | v4, v3, v2 | Axios: CRLF Injection in multipart/form-data body via unsanitized blob.type in f |\n| axios | moderate | CVE-2026-42038 | v4, v3, v2 | Axios: no_proxy bypass via IP alias allows SSRF |\n| axios | moderate | CVE-2026-42039 | v4, v3, v2 | Axios: unbounded recursion in toFormData causes DoS via deeply nested request da |\n| axios | moderate | CVE-2026-42034 | v4, v3, v2 | Axios' HTTP adapter-streamed uploads bypass maxBodyLength when maxRedirects: 0 |\n| axios | moderate | CVE-2026-42036 | v4, v3, v2 | Axios: HTTP adapter streamed responses bypass maxContentLength |\n| axios | moderate | CVE-2026-42042 | v4, v3, v2 | Axios: XSRF Token Cross-Origin Leakage via Prototype Pollution Gadget in `withXS |\n| brace-expansion | moderate | CVE-2026-33750 | v4, v3, v2 | brace-expansion: Zero-step sequence causes process hang and memory exhaustion |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| fast-xml-parser | moderate | CVE-2026-33349 | v4, v3, v2 | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua |\n| fast-xml-parser | moderate | CVE-2026-41650 | v4, v3, v2 | fast-xml-parser XMLBuilder: XML Comment and CDATA Injection via Unescaped Delimi |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| handlebars | moderate | CVE-2026-33916 | v4, v3, v2, v1 | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In |\n| handlebars | moderate | GHSA-7rx3-28cr-v5wh | v4, v3, v2, v1 | Handlebars.js has a Prototype Method Access Control Gap via Missing \\_\\_lookupSett |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| hono | moderate | GHSA-26pp-8wgv-hjvm | v2 | Hono missing validation of cookie name on write path in setCookie() |\n| hono | moderate | CVE-2026-39410 | v2 | Hono: Non-breaking space prefix bypass in cookie name handling in getCookie() |\n| hono | moderate | CVE-2026-39408 | v2 | Hono: Path traversal in toSSG() allows writing files outside the output director |\n| hono | moderate | CVE-2026-39407 | v2 | Hono: Middleware bypass via repeated slashes in serveStatic |\n| hono | moderate | GHSA-458j-xx4x-4375 | v2 | hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SS |\n| hono | moderate | CVE-2026-39409 | v2 | Hono has incorrect IP matching in ipRestriction() for IPv4-mapped IPv6 addresses |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| locutus | moderate | CVE-2026-33993 | v4, v3, v2, v1 | Locutus has Prototype Pollution via **proto** Key Injection in unserialize() |\n| lodash | moderate | CVE-2026-2950 | v4, v3 | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and |\n| micromatch | moderate | CVE-2024-4067 | v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| path-to-regexp | moderate | CVE-2026-4923 | v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w |\n| postcss | moderate | CVE-2026-41305 | v4, v3, v2 | PostCSS has XSS via Unescaped </style> in its CSS Stringify Output |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| serialize-javascript | moderate | CVE-2026-34043 | v4, v3, v2, v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| smol-toml | moderate | GHSA-v3rj-xjv7-4jmq | v4, v3, v2, v1 | smol-toml: Denial of Service via TOML documents containing thousands of consecut |\n| undici | moderate | CVE-2026-1525 | v4, v3, v2 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v4, v3, v2 | Undici has CRLF Injection in undici via `upgrade` option |\n| vite | moderate | CVE-2026-39365 | v1 | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling |\n| webpack | moderate | CVE-2024-43788 | v2 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| yaml | moderate | CVE-2026-33532 | v4, v3, v2, v1 | yaml is vulnerable to Stack Overflow via deeply nested YAML collections |\n| @tootallnate/once | low | CVE-2026-3449 | v3, v2 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| axios | low | CVE-2026-42040 | v4, v3, v2 | Axios: Null Byte Injection via Reverse-Encoding in AxiosURLSearchParams |\n| diff | low | CVE-2026-24001 | v4, v3, v2 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| fast-xml-parser | low | CVE-2026-27942 | v4, v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| handlebars | low | GHSA-442j-39wm-28r2 | v4, v3, v2, v1 | Handlebars.js has a Property Access Validation Bypass in container.lookup |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| tmp | low | CVE-2025-54798 | v4 | tmp allows arbitrary temporary file / directory write via symbolic link `dir` pa |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n",
|
|
328
|
+
"code": "# CVE Overview\n\n> For more security information, see [SECURITY.md](./SECURITY.md)\n\n## 1. Production Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 0 | 0 | 0 | 0 |\n| high | 0 | 0 | 0 | 4 |\n| moderate | 0 | 0 | 0 | 1 |\n| low | 0 | 0 | 0 | 0 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | --------------------------------------------------------------------------------- |\n| lodash.pick | high | CVE-2020-8203 | v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| serialize-javascript | moderate | CVE-2026-34043 | v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n\n## 2. All Dependencies\n\n### Summary\n\n| Severity | v4 | v3 | v2 | v1 |\n| -------- | --: | --: | --: | --: |\n| critical | 4 | 5 | 5 | 3 |\n| high | 28 | 35 | 50 | 29 |\n| moderate | 24 | 27 | 49 | 8 |\n| low | 4 | 5 | 10 | 1 |\n| info | 0 | 0 | 0 | 0 |\n| unknown | 0 | 0 | 0 | 0 |\n\n### Vulnerabilities\n\n| Package | Severity | CVE | Affected Versions | Description |\n| -------------------- | -------- | ------------------- | ----------------- | ---------------------------------------------------------------------------------- |\n| basic-ftp | critical | CVE-2026-27699 | v4, v3, v2 | Basic FTP has Path Traversal Vulnerability in its downloadToDir() method |\n| fast-xml-parser | critical | CVE-2026-25896 | v4, v3, v2 | fast-xml-parser has an entity encoding bypass via regex injection in DOCTYPE ent |\n| handlebars | critical | CVE-2026-33937 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion |\n| locutus | critical | CVE-2026-25521 | v4, v3, v2, v1 | locutus is vulnerable to Prototype Pollution |\n| locutus | critical | CVE-2026-32304 | v4, v3, v2, v1 | Locutus vulnerable to RCE via unsanitized input in create_function() |\n| @angular/common | high | CVE-2025-66035 | v1 | Angular is Vulnerable to XSRF Token Leakage via Protocol-Relative URLs in Angula |\n| @angular/compiler | high | CVE-2025-66412 | v1 | Angular Stored XSS Vulnerability via SVG Animation, SVG URL and MathML Attribute |\n| @angular/compiler | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/compiler | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @angular/core | high | CVE-2026-22610 | v1 | Angular has XSS Vulnerability via Unsanitized SVG Script Attributes |\n| @angular/core | high | CVE-2026-27970 | v1 | Angular i18n vulnerable to Cross-Site Scripting |\n| @angular/core | high | CVE-2026-32635 | v1 | Angular vulnerable to XSS in i18n attribute bindings |\n| @hono/node-server | high | CVE-2026-29087 | v2 | @hono/node-server has authorization bypass for protected static paths via encode |\n| axios | high | CVE-2026-25639 | v3, v2 | Axios is Vulnerable to Denial of Service via **proto** Key in mergeConfig |\n| axios | high | CVE-2026-42043 | v4, v3, v2 | Axios: Incomplete Fix for CVE-2025-62718 — NO_PROXY Protection Bypassed via RFC |\n| axios | high | CVE-2026-42264 | v4, v3, v2 | Axios has prototype pollution read-side gadgets in HTTP adapter that allow crede |\n| axios | high | CVE-2026-42033 | v4, v3, v2 | Axios: Prototype Pollution Gadgets - Response Tampering, Data Exfiltration, and |\n| axios | high | CVE-2026-42035 | v4, v3, v2 | Axios: Header Injection via Prototype Pollution |\n| basic-ftp | high | GHSA-6v7q-wjvx-w8wg | v4, v3, v2 | basic-ftp: Incomplete CRLF Injection Protection Allows Arbitrary FTP Command Exe |\n| basic-ftp | high | CVE-2026-41324 | v4, v3, v2 | basic-ftp vulnerable to denial of service via unbounded memory consumption in Cl |\n| basic-ftp | high | CVE-2026-44240 | v4, v3, v2 | basic-ftp allows a malicious FTP server to cause client-side denial of service v |\n| braces | high | CVE-2024-4068 | v3, v2, v1 | Uncontrolled resource consumption in braces |\n| express-rate-limit | high | CVE-2026-30827 | v2 | express-rate-limit: IPv4-mapped IPv6 addresses bypass per-client rate limiting o |\n| fast-xml-parser | high | CVE-2026-25128 | v4, v3, v2 | fast-xml-parser has RangeError DoS Numeric Entities Bug |\n| fast-xml-parser | high | CVE-2026-26278 | v4, v3, v2 | fast-xml-parser affected by DoS through entity expansion in DOCTYPE (no expansio |\n| fast-xml-parser | high | CVE-2026-33036 | v4, v3, v2 | fast-xml-parser affected by numeric entity expansion bypassing all entity expans |\n| flatted | high | CVE-2026-32141 | v4, v3, v2 | flatted vulnerable to unbounded recursion DoS in parse() revive phase |\n| flatted | high | CVE-2026-33228 | v4, v3, v2 | Prototype Pollution via parse() in NodeJS flatted |\n| handlebars | high | CVE-2026-33938 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion by tampering @part |\n| handlebars | high | CVE-2026-33940 | v3, v2, v1 | Handlebars.js has JavaScript Injection via AST Type Confusion when passing an ob |\n| handlebars | high | CVE-2026-33939 | v3, v2, v1 | Handlebars.js has Denial of Service via Malformed Decorator Syntax in Template C |\n| handlebars | high | CVE-2026-33941 | v3, v2, v1 | Handlebars.js has JavaScript Injection in CLI Precompiler via Unescaped Names an |\n| hono | high | CVE-2026-29045 | v2 | Hono vulnerable to arbitrary file access via serveStatic vulnerability |\n| immutable | high | CVE-2026-29063 | v2 | Immutable is vulnerable to Prototype Pollution |\n| locutus | high | CVE-2026-29091 | v4, v3, v2, v1 | locutus call_user_func_array vulnerable to Remote Code Execution (RCE) due to Co |\n| lodash | high | CVE-2026-4800 | v4, v3 | lodash vulnerable to Code Injection via `_.template` imports key names |\n| lodash.pick | high | CVE-2020-8203 | v2, v1 | Prototype Pollution in lodash |\n| minimatch | high | CVE-2026-27903 | v4, v3, v2, v1 | minimatch has ReDoS: matchOne() combinatorial backtracking via multiple non-adja |\n| minimatch | high | CVE-2026-27904 | v4, v3, v2, v1 | minimatch ReDoS: nested \\*() extglobs generate catastrophically backtracking regu |\n| minimatch | high | CVE-2026-26996 | v4, v3, v2 | minimatch has a ReDoS via repeated wildcards with non-matching literal in patter |\n| node-forge | high | CVE-2026-33896 | v2 | Forge has a basicConstraints bypass in its certificate chain verification (RFC 5 |\n| node-forge | high | CVE-2026-33895 | v2 | Forge has signature forgery in Ed25519 due to missing S > L check |\n| node-forge | high | CVE-2026-33891 | v2 | Forge has Denial of Service via Infinite Loop in BigInteger.modInverse() with Ze |\n| node-forge | high | CVE-2026-33894 | v2 | Forge has signature forgery in RSA-PKCS due to ASN.1 extra field |\n| path-to-regexp | high | CVE-2026-4867 | v4, v3, v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple r |\n| path-to-regexp | high | CVE-2026-4926 | v2 | path-to-regexp vulnerable to Denial of Service via sequential optional groups |\n| rollup | high | CVE-2026-27606 | v1 | Rollup 4 has Arbitrary File Write via Path Traversal |\n| semver | high | CVE-2022-25883 | v2 | semver vulnerable to Regular Expression Denial of Service |\n| serialize-javascript | high | GHSA-5c6j-r48x-rmvq | v4, v3, v2, v1 | Serialize JavaScript is Vulnerable to RCE via RegExp.flags and Date.prototype.to |\n| socket.io-parser | high | CVE-2026-33151 | v3, v2 | socket.io allows an unbounded number of binary attachments |\n| svgo | high | CVE-2026-29074 | v4, v3, v2, v1 | SVGO DoS through entity expansion in DOCTYPE (Billion Laughs) |\n| tar | high | CVE-2026-24842 | v1 | node-tar Vulnerable to Arbitrary File Creation/Overwrite via Hardlink Path Trave |\n| tar | high | CVE-2026-23745 | v1 | node-tar is Vulnerable to Arbitrary File Overwrite and Symlink Poisoning via Ins |\n| tar | high | CVE-2026-26960 | v1 | Arbitrary File Read/Write via Hardlink Target Escape Through Symlink Chain in no |\n| tar | high | CVE-2026-29786 | v1 | tar has Hardlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-31802 | v1 | node-tar Symlink Path Traversal via Drive-Relative Linkpath |\n| tar | high | CVE-2026-23950 | v1 | Race Condition in node-tar Path Reservations via Unicode Ligature Collisions on |\n| undici | high | CVE-2026-1528 | v4, v3, v2 | Undici: Malicious WebSocket 64-bit length overflows parser and crashes the clien |\n| undici | high | CVE-2026-1526 | v4, v3, v2 | Undici has Unbounded Memory Consumption in WebSocket permessage-deflate Decompre |\n| undici | high | CVE-2026-2229 | v4, v3, v2 | Undici has Unhandled Exception in WebSocket Client Due to Invalid server_max_win |\n| vite | high | CVE-2026-39364 | v1 | Vite: `server.fs.deny` bypassed with queries |\n| vite | high | CVE-2026-39363 | v1 | Vite Vulnerable to Arbitrary File Read via Vite Dev Server WebSocket |\n| @hono/node-server | moderate | CVE-2026-39406 | v2 | @hono/node-server: Middleware bypass via repeated slashes in serveStatic |\n| ajv | moderate | CVE-2025-69873 | v3, v2 | ajv has ReDoS when using `$data` option |\n| axios | moderate | CVE-2025-62718 | v4, v3, v2 | Axios has a NO_PROXY Hostname Normalization Bypass that Leads to SSRF |\n| axios | moderate | CVE-2026-40175 | v4, v3, v2 | Axios has Unrestricted Cloud Metadata Exfiltration via Header Injection Chain |\n| axios | moderate | CVE-2026-42041 | v4, v3, v2 | Axios: Authentication Bypass via Prototype Pollution Gadget in `validateStatus` |\n| axios | moderate | CVE-2026-42044 | v4, v3, v2 | Axios: Invisible JSON Response Tampering via Prototype Pollution Gadget in `pars |\n| axios | moderate | CVE-2026-42037 | v4, v3, v2 | Axios: CRLF Injection in multipart/form-data body via unsanitized blob.type in f |\n| axios | moderate | CVE-2026-42038 | v4, v3, v2 | Axios: no_proxy bypass via IP alias allows SSRF |\n| axios | moderate | CVE-2026-42039 | v4, v3, v2 | Axios: unbounded recursion in toFormData causes DoS via deeply nested request da |\n| axios | moderate | CVE-2026-42034 | v4, v3, v2 | Axios' HTTP adapter-streamed uploads bypass maxBodyLength when maxRedirects: 0 |\n| axios | moderate | CVE-2026-42036 | v4, v3, v2 | Axios: HTTP adapter streamed responses bypass maxContentLength |\n| axios | moderate | CVE-2026-42042 | v4, v3, v2 | Axios: XSRF Token Cross-Origin Leakage via Prototype Pollution Gadget in `withXS |\n| brace-expansion | moderate | CVE-2026-33750 | v4, v3, v2 | brace-expansion: Zero-step sequence causes process hang and memory exhaustion |\n| ejs | moderate | CVE-2024-33883 | v2 | ejs lacks certain pollution protection |\n| esbuild | moderate | GHSA-67mh-4wv8-2f99 | v2 | esbuild enables any website to send any requests to the development server and r |\n| fast-xml-parser | moderate | CVE-2026-33349 | v4, v3, v2 | Entity Expansion Limits Bypassed When Set to Zero Due to JavaScript Falsy Evalua |\n| fast-xml-parser | moderate | CVE-2026-41650 | v4, v3, v2 | fast-xml-parser XMLBuilder: XML Comment and CDATA Injection via Unescaped Delimi |\n| file-type | moderate | CVE-2026-31808 | v4 | file-type affected by infinite loop in ASF parser on malformed input with zero-s |\n| handlebars | moderate | CVE-2026-33916 | v3, v2, v1 | Handlebars.js has Prototype Pollution Leading to XSS through Partial Template In |\n| handlebars | moderate | GHSA-7rx3-28cr-v5wh | v3, v2, v1 | Handlebars.js has a Prototype Method Access Control Gap via Missing \\_\\_lookupSett |\n| hono | moderate | CVE-2026-29086 | v2 | Hono Vulnerable to Cookie Attribute Injection via Unsanitized domain and path in |\n| hono | moderate | CVE-2026-29085 | v2 | Hono Vulnerable to SSE Control Field Injection via CR/LF in writeSSE() |\n| hono | moderate | GHSA-v8w9-8mx6-g223 | v2 | Hono vulnerable to Prototype Pollution possible through **proto** key allowed in |\n| hono | moderate | GHSA-26pp-8wgv-hjvm | v2 | Hono missing validation of cookie name on write path in setCookie() |\n| hono | moderate | CVE-2026-39410 | v2 | Hono: Non-breaking space prefix bypass in cookie name handling in getCookie() |\n| hono | moderate | CVE-2026-39408 | v2 | Hono: Path traversal in toSSG() allows writing files outside the output director |\n| hono | moderate | CVE-2026-39407 | v2 | Hono: Middleware bypass via repeated slashes in serveStatic |\n| hono | moderate | GHSA-458j-xx4x-4375 | v2 | hono Improperly Handles JSX Attribute Names Allows HTML Injection in hono/jsx SS |\n| hono | moderate | CVE-2026-39409 | v2 | Hono has incorrect IP matching in ipRestriction() for IPv4-mapped IPv6 addresses |\n| hono | moderate | CVE-2026-44456 | v2 | Hono: bodyLimit() can be bypassed for chunked / unknown-length requests |\n| hono | moderate | CVE-2026-44455 | v2 | hono/jsx has Unvalidated JSX Tag Names that May Allow HTML Injection |\n| ip-address | moderate | CVE-2026-42338 | v2 | ip-address has XSS in Address6 HTML-emitting methods |\n| js-yaml | moderate | CVE-2025-64718 | v2 | js-yaml has prototype pollution in merge (<<) |\n| locutus | moderate | CVE-2026-33993 | v4, v3, v2, v1 | Locutus has Prototype Pollution via **proto** Key Injection in unserialize() |\n| lodash | moderate | CVE-2026-2950 | v4, v3 | lodash vulnerable to Prototype Pollution via array path bypass in `_.unset` and |\n| micromatch | moderate | CVE-2024-4067 | v3, v2, v1 | Regular Expression Denial of Service (ReDoS) in micromatch |\n| nanoid | moderate | CVE-2024-55565 | v2 | Predictable results in nanoid generation when given non-integer values |\n| path-to-regexp | moderate | CVE-2026-4923 | v2 | path-to-regexp vulnerable to Regular Expression Denial of Service via multiple w |\n| postcss | moderate | CVE-2026-41305 | v4, v3, v2 | PostCSS has XSS via Unescaped </style> in its CSS Stringify Output |\n| qs | moderate | CVE-2025-15284 | v2 | qs's arrayLimit bypass in its bracket notation allows DoS via memory exhaustion |\n| serialize-javascript | moderate | CVE-2026-34043 | v4, v3, v2, v1 | Serialize JavaScript has CPU Exhaustion Denial of Service via crafted array-like |\n| serialize-javascript | moderate | CVE-2024-11831 | v2 | Cross-site Scripting (XSS) in serialize-javascript |\n| smol-toml | moderate | GHSA-v3rj-xjv7-4jmq | v4, v3, v2, v1 | smol-toml: Denial of Service via TOML documents containing thousands of consecut |\n| undici | moderate | CVE-2026-1525 | v4, v3, v2 | Undici has an HTTP Request/Response Smuggling issue |\n| undici | moderate | CVE-2026-1527 | v4, v3, v2 | Undici has CRLF Injection in undici via `upgrade` option |\n| vite | moderate | CVE-2026-39365 | v1 | Vite Vulnerable to Path Traversal in Optimized Deps `.map` Handling |\n| webpack | moderate | CVE-2024-43788 | v2 | Webpack's AutoPublicPathRuntimeModule has a DOM Clobbering Gadget that leads to |\n| webpack-dev-server | moderate | CVE-2025-30360 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| webpack-dev-server | moderate | CVE-2025-30359 | v2 | webpack-dev-server users' source code may be stolen when they access a malicious |\n| yaml | moderate | CVE-2026-33532 | v4, v3, v2, v1 | yaml is vulnerable to Stack Overflow via deeply nested YAML collections |\n| @tootallnate/once | low | CVE-2026-3449 | v3, v2 | @tootallnate/once vulnerable to Incorrect Control Flow Scoping |\n| axios | low | CVE-2026-42040 | v4, v3, v2 | Axios: Null Byte Injection via Reverse-Encoding in AxiosURLSearchParams |\n| diff | low | CVE-2026-24001 | v4, v3, v2 | jsdiff has a Denial of Service vulnerability in parsePatch and applyPatch |\n| fast-xml-parser | low | CVE-2026-27942 | v4, v3, v2 | fast-xml-parser has stack overflow in XMLBuilder with preserveOrder |\n| handlebars | low | GHSA-442j-39wm-28r2 | v3, v2, v1 | Handlebars.js has a Property Access Validation Bypass in container.lookup |\n| hono | low | GHSA-gq3j-xvxp-8hrf | v2 | Hono added timing comparison hardening in basicAuth and bearerAuth |\n| qs | low | CVE-2026-2391 | v2 | qs's arrayLimit bypass in comma parsing allows denial of service |\n| tmp | low | CVE-2025-54798 | v4 | tmp allows arbitrary temporary file / directory write via symbolic link `dir` pa |\n| webpack | low | CVE-2025-68458 | v2 | webpack buildHttp: allowedUris allow-list bypass via URL userinfo (@) leading to |\n| webpack | low | CVE-2025-68157 | v2 | webpack buildHttp HttpUriPlugin allowedUris bypass via HTTP redirects → SSRF + c |\n",
|
|
329
329
|
"kind": "doc"
|
|
330
330
|
},
|
|
331
331
|
{
|
|
@@ -725,7 +725,7 @@
|
|
|
725
725
|
"group": "combobox",
|
|
726
726
|
"name": "lazy-loaded",
|
|
727
727
|
"path": "packages/samples/react/src/components/combobox/lazy-loaded.tsx",
|
|
728
|
-
"code": "import { SuggestionsPropType } from '@public-ui/components';\nimport { KolCombobox, KolSpin } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { COUNTRY_SUGGESTIONS } from '../../shares/country';\nimport { SampleDescription } from '../SampleDescription';\n\nconst LoadingOverlayFC: FC<{\n\tshow: boolean;\n}> = ({ show }) => {\n\tif (show) {\n\t\treturn (\n\t\t\t<div className=\"loading-overlay\">\n\t\t\t\t<KolSpin\n\t\t\t\t\t_label=\"loading\"\n\t\t\t\t\t_show={show}\n\t\t\t\t\t_variant=\"cycle\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const ComboboxLazyLoaded: FC = () => {\n\tconst [suggestions, setSuggestions] = useState<SuggestionsPropType>([]);\n\tconst [loading, setLoading] = useState<boolean>(false);\n\n\tfunction loadCountries() {\n\t\tif (suggestions.length > 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetLoading(true);\n\t\tsetTimeout(() => {\n\t\t\tsetSuggestions(COUNTRY_SUGGESTIONS);\n\t\t\tsetLoading(false);\n\t\t}, 5000);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This combobox loads its list of countries 5 seconds after the first input of the user to simulate a call to the server.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full relative p-3\">\n\t\t\t\t<KolCombobox _label=\"Lazy loaded countries\" _suggestions={suggestions} onInput={() => loadCountries()} />\n\t\t\t\t<LoadingOverlayFC show={loading} />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
|
|
728
|
+
"code": "import type { SuggestionsPropType } from '@public-ui/components';\nimport { KolCombobox, KolSpin } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useState } from 'react';\nimport { COUNTRY_SUGGESTIONS } from '../../shares/country';\nimport { SampleDescription } from '../SampleDescription';\n\nconst LoadingOverlayFC: FC<{\n\tshow: boolean;\n}> = ({ show }) => {\n\tif (show) {\n\t\treturn (\n\t\t\t<div className=\"loading-overlay\">\n\t\t\t\t<KolSpin\n\t\t\t\t\t_label=\"loading\"\n\t\t\t\t\t_show={show}\n\t\t\t\t\t_variant=\"cycle\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: 'transparent',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else {\n\t\treturn null;\n\t}\n};\n\nexport const ComboboxLazyLoaded: FC = () => {\n\tconst [suggestions, setSuggestions] = useState<SuggestionsPropType>([]);\n\tconst [loading, setLoading] = useState<boolean>(false);\n\n\tfunction loadCountries() {\n\t\tif (suggestions.length > 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetLoading(true);\n\t\tsetTimeout(() => {\n\t\t\tsetSuggestions(COUNTRY_SUGGESTIONS);\n\t\t\tsetLoading(false);\n\t\t}, 5000);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This combobox loads its list of countries 5 seconds after the first input of the user to simulate a call to the server.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full relative p-3\">\n\t\t\t\t<KolCombobox _label=\"Lazy loaded countries\" _suggestions={suggestions} onInput={() => loadCountries()} />\n\t\t\t\t<LoadingOverlayFC show={loading} />\n\t\t\t</section>\n\t\t</>\n\t);\n};\n",
|
|
729
729
|
"kind": "sample"
|
|
730
730
|
},
|
|
731
731
|
{
|
|
@@ -749,7 +749,7 @@
|
|
|
749
749
|
"group": "drawer",
|
|
750
750
|
"name": "basic",
|
|
751
751
|
"path": "packages/samples/react/src/components/drawer/basic.tsx",
|
|
752
|
-
"code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { DrawerRadioAlign } from './partials/align';\nexport const DrawerBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultAlign = searchParams.get('align') as AlignPropType;\n\tconst defaultCloser = searchParams.get('closer') === 'true';\n\tconst drawerElement = useRef<HTMLKolDrawerElement>(null);\n\n\tconst [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');\n\tconst [hasCloser, setHasCloser] = useState<boolean>(defaultCloser);\n\n\tuseEffect(() => {\n\t\tif (defaultAlign) {\n\t\t\tdrawerElement.current?.showModal();\n\t\t}\n\t}, [defaultAlign]);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\n\t\t\t<KolInputCheckbox\n\t\t\t\t_label=\"Drawer has closer\"\n\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t_checked={hasCloser}\n\t\t\t\t_on={{\n\t\t\t\t\tonInput: (_, value) => {\n\t\t\t\t\t\tsetHasCloser((value as null | boolean) === true);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer\n\t\t\t\t\tref={drawerElement}\n\t\t\t\t\t_label=\"I am a drawer\"\n\t\t\t\t\t_align={align}\n\t\t\t\t\t_hasCloser={hasCloser}\n\t\t\t\t\t_on={{ onClose: () => console.log('Drawer onClose triggered!') }}\n\t\t\t\t>\n\t\t\t\t\t<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>\n\t\t\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\t\t\t\t<KolButton _label=\"Open drawer\" _on={{ onClick: () => drawerElement.current?.showModal() }} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
752
|
+
"code": "import type { FC } from 'react';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport type { AlignPropType } from '@public-ui/components';\nimport { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport { DrawerRadioAlign } from './partials/align';\nexport const DrawerBasic: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst defaultAlign = searchParams.get('align') as AlignPropType;\n\tconst defaultCloser = searchParams.get('closer') === 'true';\n\tconst drawerElement = useRef<HTMLKolDrawerElement>(null);\n\n\tconst [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');\n\tconst [hasCloser, setHasCloser] = useState<boolean>(defaultCloser);\n\n\tuseEffect(() => {\n\t\tif (defaultAlign) {\n\t\t\tdrawerElement.current?.showModal();\n\t\t}\n\t}, [defaultAlign]);\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />\n\n\t\t\t<KolInputCheckbox\n\t\t\t\t_label=\"Drawer has closer\"\n\t\t\t\tclassName=\"mb-4\"\n\t\t\t\t_checked={hasCloser}\n\t\t\t\t_on={{\n\t\t\t\t\tonInput: (_, value) => {\n\t\t\t\t\t\tsetHasCloser((value as null | boolean) === true);\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t/>\n\n\t\t\t<div className=\"flex flex-wrap gap-4\">\n\t\t\t\t<KolDrawer\n\t\t\t\t\tref={drawerElement}\n\t\t\t\t\t_label=\"I am a drawer\"\n\t\t\t\t\t_align={align}\n\t\t\t\t\t_hasCloser={hasCloser}\n\t\t\t\t\t_on={{ onClose: () => console.log('Drawer onClose triggered!'), onToggle: (open) => console.log('Drawer onToggle triggered!', open) }}\n\t\t\t\t>\n\t\t\t\t\t<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>\n\t\t\t\t\t\t<p className=\"mt-0\">\n\t\t\t\t\t\t\tLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam\n\t\t\t\t\t\t\tvoluptua.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<KolButton _label=\"Close drawer\" _on={{ onClick: () => drawerElement.current?.close() }} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolDrawer>\n\t\t\t\t<KolButton _label=\"Open drawer\" _on={{ onClick: () => drawerElement.current?.showModal() }} />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
753
753
|
"kind": "sample"
|
|
754
754
|
},
|
|
755
755
|
{
|
|
@@ -849,11 +849,11 @@
|
|
|
849
849
|
"kind": "sample"
|
|
850
850
|
},
|
|
851
851
|
{
|
|
852
|
-
"id": "sample/icon/font
|
|
852
|
+
"id": "sample/icon/font",
|
|
853
853
|
"group": "icon",
|
|
854
|
-
"name": "font
|
|
855
|
-
"path": "packages/samples/react/src/components/icon/font
|
|
856
|
-
"code": "import React from 'react';\n\nimport { KolIcon, KolInputText } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const
|
|
854
|
+
"name": "font",
|
|
855
|
+
"path": "packages/samples/react/src/components/icon/font.tsx",
|
|
856
|
+
"code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport { KolButton, KolIcon, KolInputText } from '@public-ui/react-v19';\n\nimport type { FC } from 'react';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nexport const IconFont: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst iconVariants = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariants') : []), [theme]);\n\tconst iconVariantsButton = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsButton') : []), [theme]);\n\tconst iconVariantsInput = useMemo(() => (theme ? fetchVariantData(theme, 'iconVariantsInput') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>KolIcon renders different icon fonts depending on your theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariants) || iconVariants.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4\" key={element}>\n\t\t\t\t\t\t\t\t<KolIcon _label=\"\" _icons={element} />\n\t\t\t\t\t\t\t\t<span><KolIcon _icons='{element}' _label=\"\" /></span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"grid grid-cols-2 gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariantsButton) || iconVariantsButton.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons in buttons.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsButton.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolButton _icons={element} _label=\"Button\" _variant=\"primary\" />\n\t\t\t\t\t\t\t\t<span><KolButton _icons='{element}' _label=\"Button\" _variant=\"primary\" /></span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div className=\"grid gap-8 p-8\">\n\t\t\t\t{!Array.isArray(iconVariantsInput) || iconVariantsInput.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for icons in inputs.</p>\n\t\t\t\t) : (\n\t\t\t\t\ticonVariantsInput.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<div className=\"flex gap-4 items-center\" key={element}>\n\t\t\t\t\t\t\t\t<KolInputText _icons={element} _label=\"Input with Icon\" />\n\t\t\t\t\t\t\t\t<span><KolInputText _icons='{element}' _label=\"Input with Icon\" /></span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
857
857
|
"kind": "sample"
|
|
858
858
|
},
|
|
859
859
|
{
|
|
@@ -1005,7 +1005,7 @@
|
|
|
1005
1005
|
"group": "input-number",
|
|
1006
1006
|
"name": "number-formatter",
|
|
1007
1007
|
"path": "packages/samples/react/src/components/input-number/number-formatter.tsx",
|
|
1008
|
-
"code": "import { KolForm, KolInputNumber, KolInputText } from '@public-ui/react-v19';\nimport React, { type BaseSyntheticEvent } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { NumericFormat, type NumberFormatValues, type NumericFormatProps } from 'react-number-format';\n\nimport { SampleDescription } from '../SampleDescription';\n\ntype KolInputTextEvents = {\n\tonBlur?: (event: Event) => void;\n\tonChange?: (event: Event, value: unknown) => void;\n\tonFocus?: (event: Event) => void;\n\tonInput?: (event: Event, value: unknown) => void;\n};\n\nclass NumberFormatter {\n\tpublic parse(value: unknown): string {\n\t\tif (value === undefined || value === null || value === '') {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst stringValue = String(value);\n\t\treturn stringValue.replace(/[eE.,]/g, '').replace(/\\d[+-]/g, '');\n\t}\n}\n\nconst disallowedCharactersPattern = /[.,+eE]/;\n\nconst preventInvalidKeyDown = (event: KeyboardEvent) => {\n\tif (event.key.length === 1 && !event.ctrlKey && !event.metaKey && disallowedCharactersPattern.test(event.key)) {\n\t\tevent.preventDefault();\n\t}\n};\n\ntype KolNumericFormatControllerProps = {\n\t_label: string;\n\t_msg?: React.ComponentProps<typeof KolInputText>['_msg'];\n\t_touched?: boolean;\n\t_on?: React.ComponentProps<typeof KolInputText>['_on'];\n\t_required?: boolean;\n\tvalue?: number;\n} & Omit<NumericFormatProps, 'customInput' | 'value' | 'onBlur' | 'onValueChange'>;\n\nfunction KolNumericFormat({\n\t_label,\n\t_msg,\n\t_touched,\n\t_on,\n\t_required,\n\tvalue,\n\tthousandSeparator = true,\n\tsuffix = '€',\n\t...props\n}: KolNumericFormatControllerProps) {\n\tconst normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;\n\n\treturn (\n\t\t<NumericFormat\n\t\t\t{...(props as any)}\n\t\t\tvalue={value}\n\t\t\tsuffix={suffix}\n\t\t\tthousandSeparator={thousandSeparator}\n\t\t\tvalueIsNumericString={false}\n\t\t\tcustomInput={(inputProps: any) => {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-
|
|
1008
|
+
"code": "import { KolForm, KolInputNumber, KolInputText } from '@public-ui/react-v19';\nimport React, { type BaseSyntheticEvent } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { NumericFormat, type NumberFormatValues, type NumericFormatProps } from 'react-number-format';\n\nimport { SampleDescription } from '../SampleDescription';\n\ntype KolInputTextEvents = {\n\tonBlur?: (event: Event) => void;\n\tonChange?: (event: Event, value: unknown) => void;\n\tonFocus?: (event: Event) => void;\n\tonInput?: (event: Event, value: unknown) => void;\n};\n\nclass NumberFormatter {\n\tpublic parse(value: unknown): string {\n\t\tif (value === undefined || value === null || value === '') {\n\t\t\treturn '';\n\t\t}\n\n\t\tconst stringValue = String(value);\n\t\treturn stringValue.replace(/[eE.,]/g, '').replace(/\\d[+-]/g, '');\n\t}\n}\n\nconst disallowedCharactersPattern = /[.,+eE]/;\n\nconst preventInvalidKeyDown = (event: KeyboardEvent) => {\n\tif (event.key.length === 1 && !event.ctrlKey && !event.metaKey && disallowedCharactersPattern.test(event.key)) {\n\t\tevent.preventDefault();\n\t}\n};\n\ntype KolNumericFormatControllerProps = {\n\t_label: string;\n\t_msg?: React.ComponentProps<typeof KolInputText>['_msg'];\n\t_touched?: boolean;\n\t_on?: React.ComponentProps<typeof KolInputText>['_on'];\n\t_required?: boolean;\n\tvalue?: number;\n} & Omit<NumericFormatProps, 'customInput' | 'value' | 'onBlur' | 'onValueChange'>;\n\nfunction KolNumericFormat({\n\t_label,\n\t_msg,\n\t_touched,\n\t_on,\n\t_required,\n\tvalue,\n\tthousandSeparator = true,\n\tsuffix = '€',\n\t...props\n}: KolNumericFormatControllerProps) {\n\tconst normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;\n\n\treturn (\n\t\t<NumericFormat\n\t\t\t{...(props as any)}\n\t\t\tvalue={value}\n\t\t\tsuffix={suffix}\n\t\t\tthousandSeparator={thousandSeparator}\n\t\t\tvalueIsNumericString={false}\n\t\t\tcustomInput={(inputProps: any) => {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\tconst inputValue = inputProps.value;\n\t\t\t\treturn (\n\t\t\t\t\t<KolInputText\n\t\t\t\t\t\t{...inputProps}\n\t\t\t\t\t\t_value={inputValue}\n\t\t\t\t\t\t_label={_label}\n\t\t\t\t\t\t_msg={_msg}\n\t\t\t\t\t\t_touched={_touched}\n\t\t\t\t\t\t_required={_required}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonBlur: inputProps.onBlur as ((event: Event) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonChange: inputProps.onChange as ((event: Event, value: unknown) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonFocus: inputProps.onFocus as ((event: Event) => void) | undefined,\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\t\t\t\tonInput: inputProps.onInput as ((event: Event, value: unknown) => void) | undefined,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}}\n\t\t\tonValueChange={(numericValue: NumberFormatValues) => {\n\t\t\t\tconst fakeEvent = new Event('input');\n\t\t\t\tnormalizedOn?.onInput?.(fakeEvent, numericValue.floatValue);\n\t\t\t}}\n\t\t\tonBlur={(event) => {\n\t\t\t\tnormalizedOn?.onBlur?.(event.nativeEvent);\n\t\t\t}}\n\t\t/>\n\t);\n}\n\nfunction KolNumericFormatController(props: any) {\n\tconst { name, control, rules, defaultValue, shouldUnregister, disabled, _label, _required, ...componentProps } = props;\n\treturn (\n\t\t<Controller\n\t\t\tname={name}\n\t\t\tcontrol={control}\n\t\t\trules={rules}\n\t\t\tdefaultValue={defaultValue}\n\t\t\tshouldUnregister={shouldUnregister}\n\t\t\tdisabled={disabled}\n\t\t\trender={({ field, fieldState }) => {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n\t\t\t\tconst userHandlers = componentProps._on as KolInputTextEvents | undefined;\n\t\t\t\treturn (\n\t\t\t\t\t<KolNumericFormat\n\t\t\t\t\t\t{...(componentProps as any)}\n\t\t\t\t\t\t_label={_label}\n\t\t\t\t\t\t_required={_required}\n\t\t\t\t\t\tvalue={field.value}\n\t\t\t\t\t\t_touched={fieldState.isTouched}\n\t\t\t\t\t\t_msg={\n\t\t\t\t\t\t\tfieldState.error\n\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t_type: 'error' as const,\n\t\t\t\t\t\t\t\t\t\t_description: fieldState.error.message || String(fieldState.error),\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonInput: (event: Event, value: unknown) => {\n\t\t\t\t\t\t\t\tfield.onChange(value);\n\t\t\t\t\t\t\t\tuserHandlers?.onInput?.(event, value);\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tonBlur: () => field.onBlur(),\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}}\n\t\t/>\n\t);\n}\n\ntype CurrencyExampleFormValues = {\n\tcurrency: number;\n};\n\nexport function InputNumberNumberFormatter() {\n\tconst formatter = new NumberFormatter();\n\tconst [displayValue, setDisplayValue] = React.useState<number | undefined>(undefined);\n\tconst [value, setValue] = React.useState<number | undefined>(-128);\n\tconst [touched, setTouched] = React.useState(false);\n\n\tconst initialCurrencyExampleValues: CurrencyExampleFormValues = {\n\t\tcurrency: 1000000,\n\t};\n\n\tconst currencyForm = useForm<CurrencyExampleFormValues>({\n\t\tdefaultValues: initialCurrencyExampleValues,\n\t\tmode: 'onTouched',\n\t});\n\n\tconst currencyValues = currencyForm.watch();\n\n\tconst handleCurrencySubmit = (event: Event) => {\n\t\tvoid currencyForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis example demonstrates formatting number input. The first example shows whole number formatting where decimal separators (. and ,) and scientific\n\t\t\t\t\tnotation (e) are automatically removed on input. The second example shows currency formatting with react-number-format in a react-hook-form context.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\t\t\t<section className=\"w-full grid gap-4\">\n\t\t\t\t<div>\n\t\t\t\t\t<KolForm>\n\t\t\t\t\t\t<KolInputNumber\n\t\t\t\t\t\t\t_label=\"Whole number\"\n\t\t\t\t\t\t\t_step={1}\n\t\t\t\t\t\t\t_value={displayValue ?? value}\n\t\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\t\tonKeyDown: preventInvalidKeyDown,\n\t\t\t\t\t\t\t\tonBlur: () => {\n\t\t\t\t\t\t\t\t\tsetTouched(true);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\tonInput: (_event: Event, inputValue: unknown) => {\n\t\t\t\t\t\t\t\t\tconst cleaned = formatter.parse(inputValue);\n\t\t\t\t\t\t\t\t\tconst numValue = cleaned === '' ? undefined : Number(cleaned);\n\n\t\t\t\t\t\t\t\t\tsetDisplayValue(numValue);\n\t\t\t\t\t\t\t\t\tsetValue(numValue);\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</KolForm>\n\t\t\t\t\t<pre className=\"text-base mt-2\">{JSON.stringify({ value, touched }, null, 2)}</pre>\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<KolForm _on={{ onSubmit: handleCurrencySubmit }}>\n\t\t\t\t\t\t<KolNumericFormatController\n\t\t\t\t\t\t\tcontrol={currencyForm.control as any}\n\t\t\t\t\t\t\tname=\"currency\"\n\t\t\t\t\t\t\tdecimalScale={2}\n\t\t\t\t\t\t\tdisplayType=\"input\"\n\t\t\t\t\t\t\trules={{ required: 'Please enter a currency amount.' }}\n\t\t\t\t\t\t\t_label=\"Currency\"\n\t\t\t\t\t\t\t_required\n\t\t\t\t\t\t/>\n\t\t\t\t\t</KolForm>\n\t\t\t\t\t<pre className=\"text-base mt-2\">{JSON.stringify(currencyValues, null, 2)}</pre>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t</>\n\t);\n}\n",
|
|
1009
1009
|
"kind": "sample"
|
|
1010
1010
|
},
|
|
1011
1011
|
{
|
|
@@ -1277,7 +1277,7 @@
|
|
|
1277
1277
|
"group": "link",
|
|
1278
1278
|
"name": "link-variant",
|
|
1279
1279
|
"path": "packages/samples/react/src/components/link/variant.tsx",
|
|
1280
|
-
"code": "import
|
|
1280
|
+
"code": "import React, { useMemo } from 'react';\nimport { useSearchParams } from 'react-router-dom';\n\nimport { KolLink } from '@public-ui/react-v19';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const LinkVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst data = useMemo(() => (theme ? fetchVariantData(theme, 'linkVariants') : []), [theme]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows the theme specific variants of KolLink.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-4\">\n\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"Normal link without a variant\" />\n\t\t\t\t{!Array.isArray(data) || data.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for this component.</p>\n\t\t\t\t) : (\n\t\t\t\t\tdata.map((element) => {\n\t\t\t\t\t\treturn <KolLink _href=\"#/back-page\" _label={`Theme exclusive variant: ${element}`} _variant={element} key={element} />;\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1281
1281
|
"kind": "sample"
|
|
1282
1282
|
},
|
|
1283
1283
|
{
|
|
@@ -1557,7 +1557,7 @@
|
|
|
1557
1557
|
"group": "split-button",
|
|
1558
1558
|
"name": "with-context",
|
|
1559
1559
|
"path": "packages/samples/react/src/components/split-button/with-context.tsx",
|
|
1560
|
-
"code": "
|
|
1560
|
+
"code": "import * as React from 'react';\n\nimport { KolButton, KolInputText, KolSplitButton } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\n\nimport type { FC } from 'react';\n\nexport const SplitButtonWithContext: FC = () => {\n\tconst splitButtonRef = React.useRef<HTMLKolSplitButtonElement & { closePopup: any }>(null);\n\n\tconst handleCloseClick = () => {\n\t\tsplitButtonRef.current?.closePopup();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"flex gap-4\">\n\t\t\t\t<KolSplitButton ref={splitButtonRef as any} _label=\"Only the arrow opens\">\n\t\t\t\t\t<div style={{ width: 300, padding: 16, border: '1px solid #ccc' }} onClick={(e) => e.stopPropagation()}>\n\t\t\t\t\t\t<p>SplitButton renders a button with an additional context-menu, that can be opened by clicking the arrow icon.</p>\n\t\t\t\t\t\t<div style={{ gap: 16, display: 'flex', flexDirection: 'column' }}>\n\t\t\t\t\t\t\t<KolInputText _label=\"User\" />\n\t\t\t\t\t\t\t<KolInputText _label=\"Role\" />\n\t\t\t\t\t\t\t<KolButton _label=\"Close\" _on={{ onClick: handleCloseClick }} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</KolSplitButton>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1561
1561
|
"kind": "sample"
|
|
1562
1562
|
},
|
|
1563
1563
|
{
|
|
@@ -1589,7 +1589,7 @@
|
|
|
1589
1589
|
"group": "table",
|
|
1590
1590
|
"name": "big",
|
|
1591
1591
|
"path": "packages/samples/react/src/components/table/big-table.tsx",
|
|
1592
|
-
"code": "import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\n\nimport type { KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA
|
|
1592
|
+
"code": "import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\n\nimport type { KoliBriTableHeaderCellWithLogic, KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { useSearchParams } from 'react-router';\nimport { SampleDescription } from '../SampleDescription';\nimport type { COMPLEX_DATA } from './test-complex-data';\nimport { configurableData } from './test-complex-data';\n\ntype Data = (typeof COMPLEX_DATA)[0];\n\nconst selection: KoliBriTableSelection = {\n\tlabel: (row) => `Selection for ${(row as Data).common_name}`,\n\tmultiple: true,\n\tkeyPropertyName: 'id',\n};\n\nconst defaultHeaders: KoliBriTableHeaderCellWithLogic[] = [\n\t{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },\n\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 250 },\n\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 400 },\n\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 250 },\n\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 400 },\n\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 200 },\n\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 300 },\n];\n\nexport const TableBig: FC = () => {\n\tconst [searchParams, setSearchParams] = useSearchParams();\n\tconst [rows, setRows] = useState<number>(50);\n\tconst [fixedCols, setFixedCols] = useState<[number, number]>([0, 0]);\n\tvar loaded = false;\n\n\tconst [headers, setHeaders] = useState<KoliBriTableHeaderCellWithLogic[]>(defaultHeaders);\n\n\tconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\t\thorizontal: [headers],\n\t};\n\n\tfunction defineTable() {\n\t\tif (loaded) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst rows = searchParams.get('rows');\n\t\tif (rows) {\n\t\t\tif (+rows < 5000) {\n\t\t\t\tsetRows(+rows);\n\t\t\t}\n\t\t} else {\n\t\t\tsetSearchParams((searchParams) => {\n\t\t\t\tsearchParams.append('rows', '50');\n\t\t\t\treturn searchParams;\n\t\t\t});\n\t\t}\n\n\t\tconst addCols = searchParams.get('addCols');\n\t\tif (addCols) {\n\t\t\tif (+addCols < 200) {\n\t\t\t\tconst h = [...defaultHeaders];\n\t\t\t\tfor (let index = 0; index < +addCols; index++) {\n\t\t\t\t\th.push({ label: 'label' + index, key: 'key' + index, textAlign: 'left', width: 100 });\n\t\t\t\t}\n\t\t\t\tsetHeaders(h);\n\t\t\t}\n\t\t} else {\n\t\t\tsetSearchParams((searchParams) => {\n\t\t\t\tsearchParams.append('addCols', '0');\n\t\t\t\treturn searchParams;\n\t\t\t});\n\t\t}\n\n\t\tconst fixedCols = searchParams.get('fixedCols');\n\t\tif (fixedCols) {\n\t\t\tconst strings = fixedCols.split('.');\n\t\t\tsetFixedCols([+strings[0], +strings[1]]);\n\t\t} else {\n\t\t\tsetSearchParams((searchParams) => {\n\t\t\t\tsearchParams.append('fixedCols', '0.0');\n\t\t\t\treturn searchParams;\n\t\t\t});\n\t\t}\n\n\t\tloaded = true;\n\t}\n\n\tuseEffect(() => defineTable(), [searchParams]);\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>You can change what this examples shows with query parameters. Change the values as you like:</p>\n\t\t\t\t<ul>\n\t\t\t\t\t<li>rows=400 - loads 400 rows</li>\n\t\t\t\t\t<li>addCols=10 - adds 10 empty columns to the end</li>\n\t\t\t\t\t<li>fixedCols=2.1 - makes the first two and the last column sticky</li>\n\t\t\t\t</ul>\n\t\t\t</SampleDescription>\n\n\t\t\t<KolHeading _level={2} _label=\"Configurable table\" />\n\t\t\t<KolTableStateful\n\t\t\t\t_label=\"Animal species overview\"\n\t\t\t\t_data={configurableData(rows)}\n\t\t\t\t_headers={HEADERS_HORIZONTAL}\n\t\t\t\tclassName=\"block\"\n\t\t\t\t_selection={selection}\n\t\t\t\t_fixedCols={fixedCols}\n\t\t\t/>\n\t\t</>\n\t);\n};\n",
|
|
1593
1593
|
"kind": "sample"
|
|
1594
1594
|
},
|
|
1595
1595
|
{
|
|
@@ -1661,7 +1661,7 @@
|
|
|
1661
1661
|
"group": "table",
|
|
1662
1662
|
"name": "pagination-position",
|
|
1663
1663
|
"path": "packages/samples/react/src/components/table/pagination-position.tsx",
|
|
1664
|
-
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\n\nexport const PaginationPosition: FC = () => (\n\t<div className=\"w-full grid gap-14\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with different pagination positions. All paginations hide the first and last buttons.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-14\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: true,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the top.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the top\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 2,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: true,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: true,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"top\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at both top and bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at both top and bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 3,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"both\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t</section>\n\t</div>\n);\n",
|
|
1664
|
+
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\n\nexport const PaginationPosition: FC = () => (\n\t<div className=\"w-full grid gap-14\">\n\t\t<SampleDescription>\n\t\t\t<p>This sample shows KolTableStateful with different pagination positions. All paginations hide the first and last buttons.</p>\n\t\t</SampleDescription>\n\n\t\t<section className=\"w-full flex flex-col gap-14\">\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: true,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: true,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t\t_variant=\"small\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at the top.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at the top\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 2,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: true,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: true,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"top\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t<KolHeading _level={2} _label=\"Table with pagination at both top and bottom.\"></KolHeading>\n\t\t\t\t<KolTableStateful\n\t\t\t\t\t_label=\"Sample table with pagination at both top and bottom\"\n\t\t\t\t\t_data={DATA}\n\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t_page: 3,\n\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\tnext: false,\n\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\tprevious: false,\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\t_paginationPosition=\"both\"\n\t\t\t\t></KolTableStateful>\n\t\t\t</section>\n\t\t</section>\n\t</div>\n);\n",
|
|
1665
1665
|
"kind": "sample"
|
|
1666
1666
|
},
|
|
1667
1667
|
{
|
|
@@ -1784,6 +1784,14 @@
|
|
|
1784
1784
|
"code": "import type { FC } from 'react';\nimport React from 'react';\n\nimport type { KoliBriTableHeaders, KoliBriTableSelection } from '@public-ui/components';\nimport { KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport { SampleDescription } from '../SampleDescription';\nimport { COMPLEX_DATA } from './test-complex-data';\n\ntype Data = (typeof COMPLEX_DATA)[0];\n\nconst selection: KoliBriTableSelection = {\n\tlabel: (row) => `Selection for ${(row as Data).common_name}`,\n\tmultiple: false,\n\tkeyPropertyName: 'internalIdentifier',\n};\n\nconst HEADERS_HORIZONTAL: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'ID', key: 'id', textAlign: 'right', width: 60 },\n\t\t\t{ label: 'Common name', key: 'common_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Scientific name', key: 'scientific_name', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Conservation status', key: 'conservation_status', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Habitat', key: 'habitat', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Diet', key: 'diet', textAlign: 'left', width: 160 },\n\t\t\t{ label: 'Geographic range', key: 'geographic_range', textAlign: 'left', width: 160 },\n\t\t],\n\t],\n};\n\nexport const TableStickyHeader: FC = () => (\n\t<>\n\t\t<SampleDescription>\n\t\t\t<p>\n\t\t\t\tThis sample shows KolTableStateful with vertical scrollbar. It should be focusable and scrollable with the keyboard. The table headline should be sticky\n\t\t\t\tat the top of the table. The data lists animal species with conservation-focused details.\n\t\t\t</p>\n\t\t</SampleDescription>\n\n\t\t<KolHeading _level={2} _label=\"Sticky headers\" />\n\t\t<KolTableStateful _label=\"Animal species overview\" _data={COMPLEX_DATA} _headers={HEADERS_HORIZONTAL} className=\"block\" _selection={selection} />\n\t</>\n);\n",
|
|
1785
1785
|
"kind": "sample"
|
|
1786
1786
|
},
|
|
1787
|
+
{
|
|
1788
|
+
"id": "sample/table/variant",
|
|
1789
|
+
"group": "table",
|
|
1790
|
+
"name": "variant",
|
|
1791
|
+
"path": "packages/samples/react/src/components/table/variant.tsx",
|
|
1792
|
+
"code": "import type { FC } from 'react';\nimport React, { useMemo } from 'react';\n\nimport { KolTableStateful } from '@public-ui/react-v19';\n\nimport { SampleDescription } from '../SampleDescription';\nimport { DATE_FORMATTER } from './formatter';\nimport type { Data } from './test-data';\nimport { DATA } from './test-data';\n\nimport type { KoliBriTableHeaders } from '@public-ui/components';\nimport { useSearchParams } from 'react-router';\nimport { fetchVariantData } from '../../shares/fetchVariantData';\nimport { getCustomThemes } from '../../shares/store';\n\nconst HEADERS: KoliBriTableHeaders = {\n\thorizontal: [\n\t\t[\n\t\t\t{ label: 'Order', key: 'order', width: 160 },\n\t\t\t{ label: 'Date', key: 'date', width: 160, render: (_el, _cell, tupel) => DATE_FORMATTER.format((tupel as unknown as Data).date) },\n\t\t],\n\t],\n};\n\nexport const TableVariant: FC = () => {\n\tconst [searchParams] = useSearchParams();\n\tconst theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;\n\tconst tableVariants = useMemo(() => (theme ? fetchVariantData(theme, 'tableVariants') : []), [theme]);\n\n\treturn (\n\t\t<div className=\"w-full grid gap-14\">\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This sample shows KolTableStateful with different variants controlled by the theme.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<section className=\"w-full flex flex-col gap-14\">\n\t\t\t\t{!Array.isArray(tableVariants) || tableVariants.length === 0 ? (\n\t\t\t\t\t<p>This theme has no variants for tables.</p>\n\t\t\t\t) : (\n\t\t\t\t\ttableVariants.map((element) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t\t\t_label={'Table with variant: ' + element}\n\t\t\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t\t\t\t_hasButtons: {\n\t\t\t\t\t\t\t\t\t\tfirst: false,\n\t\t\t\t\t\t\t\t\t\tnext: true,\n\t\t\t\t\t\t\t\t\t\tlast: false,\n\t\t\t\t\t\t\t\t\t\tprevious: true,\n\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t_paginationPosition=\"bottom\"\n\t\t\t\t\t\t\t\t_variant={element}\n\t\t\t\t\t\t\t></KolTableStateful>\n\t\t\t\t\t\t);\n\t\t\t\t\t})\n\t\t\t\t)}\n\t\t\t</section>\n\t\t</div>\n\t);\n};\n",
|
|
1793
|
+
"kind": "sample"
|
|
1794
|
+
},
|
|
1787
1795
|
{
|
|
1788
1796
|
"id": "sample/table/with-footer",
|
|
1789
1797
|
"group": "table",
|
|
@@ -1957,7 +1965,7 @@
|
|
|
1957
1965
|
"group": "scenarios",
|
|
1958
1966
|
"name": "button-shortkey-table",
|
|
1959
1967
|
"path": "packages/samples/react/src/scenarios/button-shortkey-table.tsx",
|
|
1960
|
-
"code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.focus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.focus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t
|
|
1968
|
+
"code": "import type { KoliBriTableHeaders } from '@public-ui/components';\nimport { ToasterService } from '@public-ui/components';\nimport { createReactRenderElement, KolButton, KolHeading, KolTableStateful } from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React, { useRef } from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { getRoot } from '../shares/react-roots';\n\nconst RowActions: FC<{ label: string }> = ({ label }) => {\n\tconst toaster = ToasterService.getInstance(document);\n\tconst editButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\tconst deleteButtonRef = useRef<HTMLKolButtonElement | null>(null);\n\n\tconst handleEditClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Edit clicked',\n\t\t\tdescription: `The button \"edit\" has been clicked for ${label}`,\n\t\t\ttype: 'info',\n\t\t});\n\t};\n\n\tconst handleDeleteClick = () => {\n\t\ttoaster.enqueue({\n\t\t\tlabel: 'Delete clicked',\n\t\t\tdescription: `The button \"delete\" has been clicked for ${label}`,\n\t\t\ttype: 'warning',\n\t\t});\n\t};\n\n\tconst handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tswitch (event.code) {\n\t\t\tcase 'KeyE':\n\t\t\t\tvoid editButtonRef.current?.focus();\n\t\t\t\thandleEditClick();\n\t\t\t\treturn;\n\t\t\tcase 'KeyD':\n\t\t\t\tvoid deleteButtonRef.current?.focus();\n\t\t\t\thandleDeleteClick();\n\t\t\t\treturn;\n\t\t}\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tgap: 'calc(10rem / var(--kolibri-root-font-size, 16))',\n\t\t\t}}\n\t\t\tonKeyUp={handleKeyUp}\n\t\t>\n\t\t\t<KolButton ref={editButtonRef} _label={'Edit'} _shortKey={'e'} _on={{ onClick: handleEditClick }} />\n\t\t\t<KolButton ref={deleteButtonRef} _label={'Delete'} _shortKey={'d'} _variant={'danger'} _on={{ onClick: handleDeleteClick }} />\n\t\t</div>\n\t);\n};\n\nexport const ButtonShortkeyTable: FC = () => {\n\ttype Data = {\n\t\tlabel: string;\n\t};\n\tconst DATA: Data[] = [\n\t\t{\n\t\t\tlabel: 'Row 1',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 2',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 3',\n\t\t},\n\t\t{\n\t\t\tlabel: 'Row 4',\n\t\t},\n\t];\n\n\tconst HEADERS: KoliBriTableHeaders = {\n\t\thorizontal: [\n\t\t\t[\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Label',\n\t\t\t\t\tkey: 'label',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 200,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: 'Actions',\n\t\t\t\t\tkey: 'actions',\n\t\t\t\t\ttextAlign: 'left',\n\t\t\t\t\twidth: 150,\n\t\t\t\t\trender: (el, cell) => {\n\t\t\t\t\t\tconst data = cell.data as Data | undefined;\n\t\t\t\t\t\tif (!data?.label) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tgetRoot(createReactRenderElement(el)).render(<RowActions label={data.label} />);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t],\n\t\t],\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>\n\t\t\t\t\tThis scenario demonstrates an interactive table where each row contains buttons with shortcut keys. The shortcut keys provide visual keyboard\n\t\t\t\t\tindicators and are also functionally implemented.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\t<strong>How to use:</strong> Move focus within one of the "Actions" cells and press "e" to edit or "d" to delete the\n\t\t\t\t\tcorresponding row.\n\t\t\t\t</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"grid gap-8\">\n\t\t\t\t<section className=\"grid gap-4\">\n\t\t\t\t\t<KolHeading _level={2} _label=\"Interactive Table with Button Shortkeys\" />\n\t\t\t\t\t<KolTableStateful\n\t\t\t\t\t\t_label={`Interactive table with shortkey buttons in each row`}\n\t\t\t\t\t\t_data={DATA}\n\t\t\t\t\t\t_headers={HEADERS}\n\t\t\t\t\t\t_pagination={{\n\t\t\t\t\t\t\t_page: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</section>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1961
1969
|
"kind": "scenario"
|
|
1962
1970
|
},
|
|
1963
1971
|
{
|
|
@@ -1965,7 +1973,7 @@
|
|
|
1965
1973
|
"group": "scenarios",
|
|
1966
1974
|
"name": "change-tabindex",
|
|
1967
1975
|
"path": "packages/samples/react/src/scenarios/change-tabindex.tsx",
|
|
1968
|
-
"code": "/* eslint-disable jsx-a11y/tabindex-no-positive */\n\nimport type { Option, StencilUnknown } from '@public-ui/components';\nimport {\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolCombobox,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSingleSelect,\n\tKolSplitButton,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { ERROR_MSG, HINT_MSG } from '../shares/constants';\nimport { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';\n\nexport const ChangeTabindex: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example show how different components works with tabIndex.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButton _label=\"Button 1, Tabindex 4\" _variant=\"primary\" tabIndex={4} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Button 2, Tabindex 3\" _variant=\"primary\" tabIndex={3} />\n\t\t\t\t\t\t<KolButton _label=\"Button 3, Tabindex 2\" _variant=\"primary\" tabIndex={2} />\n\t\t\t\t\t\t<KolButton _label=\"Button 4, Tabindex 1\" _variant=\"primary\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"ButtonLink 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Combobox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 1, Tabindex 4\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />\n\t\t\t\t\t\t<KolCombobox _disabled _hint={HINT_MSG} _label=\"Combobox 2, Tabindex 3\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />\n\t\t\t\t\t\t<KolCombobox\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_hint={HINT_MSG}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_label=\"Combobox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_suggestions={COUNTRY_SUGGESTIONS}\n\t\t\t\t\t\t\t_value={'Deutschland'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 4, Tabindex 1\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputCheckbox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 4, Tabindex 1\" _value={false} tabIndex={4} />\n\t\t\t\t\t\t<KolInputCheckbox _disabled _label=\"InputCheckbox 3, Tabindex 2\" _value={false} tabIndex={3} />\n\t\t\t\t\t\t<KolInputCheckbox _touched _label=\"InputCheckbox 2, Tabindex 3\" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 1, Tabindex 4\" _value={false} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputColor\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputColor _disabled _value=\"#f08080\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputColor _touched _value=\"#f08080\" _label=\"InputCheckbox 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputDate\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputDate _disabled _type=\"datetime-local\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputDate\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_type=\"datetime-local\"\n\t\t\t\t\t\t\t_label=\"InputCheckbox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputEmail\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputEmail _disabled _label=\"InputEmail 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputEmail _touched _label=\"InputEmail 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputFile\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputFile _disabled _label=\"InputFile 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputFile _touched _label=\"InputFile 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputNumber\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputNumber _disabled _label=\"InputNumber 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputNumber _touched _label=\"InputNumber 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputPassword\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputPassword _disabled _label=\"InputPassword 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputPassword _touched _label=\"InputPassword 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRadio\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 1, Tabindex 4\"\n\t\t\t\t\t\t\ttabIndex={4}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 2, Tabindex 3\"\n\t\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t\ttabIndex={3}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 4, Tabindex 1\"\n\t\t\t\t\t\t\ttabIndex={1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRange\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 1, Tabindex 4\" _min={0} _max={50} tabIndex={4} />\n\t\t\t\t\t\t<KolInputRange _disabled _label=\"InputRange 2, Tabindex 3\" _min={0} _max={50} tabIndex={3} />\n\t\t\t\t\t\t<KolInputRange _touched _label=\"InputRange 3, Tabindex 2\" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 4, Tabindex 1\" _min={0} _max={50} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputText\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputText _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputText _disabled _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputText _touched _label=\"InputText 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputText _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 1, Tabindex 4\" _variant=\"primary\" tabIndex={4}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _disabled _href={'#/back-page'} _label=\"InputText 2, Tabindex 3\" _variant=\"primary\" tabIndex={3}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 3, Tabindex 2\" _variant=\"primary\" tabIndex={2}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 4, Tabindex 1\" _variant=\"primary\" tabIndex={1}></KolLinkButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#/back-page\" _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SingleSelect\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 1, Tabindex 4\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />\n\t\t\t\t\t\t<KolSingleSelect _disabled _label=\"InputText 2, Tabindex 3\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />\n\t\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"InputText 3, Tabindex 2\"\n\t\t\t\t\t\t\t_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_value={'de'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 4, Tabindex 1\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SplitButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 1, Tabindex 4\" tabIndex={4}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 2, Tabindex 3\" tabIndex={3} _disabled>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 3, Tabindex 2\" tabIndex={2}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 4, Tabindex 1\" tabIndex={1}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Textarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 1, Tabindex 4\" _rows={3} _placeholder=\"Placeholder\" tabIndex={4} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Textarea 2, Tabindex 3\" _rows={3} _placeholder=\"Placeholder\" tabIndex={3} />\n\t\t\t\t\t\t<KolTextarea\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"Textarea 3, Tabindex 2\"\n\t\t\t\t\t\t\t_rows={3}\n\t\t\t\t\t\t\t_placeholder=\"Placeholder\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 4, Tabindex 1\" _rows={3} _placeholder=\"Placeholder\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1976
|
+
"code": "import type { Option, StencilUnknown } from '@public-ui/components';\nimport {\n\tKolButton,\n\tKolButtonLink,\n\tKolCard,\n\tKolCombobox,\n\tKolInputCheckbox,\n\tKolInputColor,\n\tKolInputDate,\n\tKolInputEmail,\n\tKolInputFile,\n\tKolInputNumber,\n\tKolInputPassword,\n\tKolInputRadio,\n\tKolInputRange,\n\tKolInputText,\n\tKolLink,\n\tKolLinkButton,\n\tKolSingleSelect,\n\tKolSplitButton,\n\tKolTextarea,\n} from '@public-ui/react-v19';\nimport type { FC } from 'react';\nimport React from 'react';\nimport { SampleDescription } from '../components/SampleDescription';\nimport { ERROR_MSG, HINT_MSG } from '../shares/constants';\nimport { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';\n\nexport const ChangeTabindex: FC = () => {\n\treturn (\n\t\t<>\n\t\t\t<SampleDescription>\n\t\t\t\t<p>This example show how different components works with tabIndex.</p>\n\t\t\t</SampleDescription>\n\n\t\t\t<div className=\"w-full grid gap-4\">\n\t\t\t\t<KolCard _label=\"Button\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButton _label=\"Button 1, Tabindex 4\" _variant=\"primary\" tabIndex={4} />\n\t\t\t\t\t\t<KolButton _disabled _label=\"Button 2, Tabindex 3\" _variant=\"primary\" tabIndex={3} />\n\t\t\t\t\t\t<KolButton _label=\"Button 3, Tabindex 2\" _variant=\"primary\" tabIndex={2} />\n\t\t\t\t\t\t<KolButton _label=\"Button 4, Tabindex 1\" _variant=\"primary\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"ButtonLink\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolButtonLink _disabled _label=\"ButtonLink 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolButtonLink _label=\"ButtonLink 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Combobox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 1, Tabindex 4\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />\n\t\t\t\t\t\t<KolCombobox _disabled _hint={HINT_MSG} _label=\"Combobox 2, Tabindex 3\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />\n\t\t\t\t\t\t<KolCombobox\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_hint={HINT_MSG}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_label=\"Combobox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_suggestions={COUNTRY_SUGGESTIONS}\n\t\t\t\t\t\t\t_value={'Deutschland'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolCombobox _hint={HINT_MSG} _label=\"Combobox 4, Tabindex 1\" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputCheckbox\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 4, Tabindex 1\" _value={false} tabIndex={4} />\n\t\t\t\t\t\t<KolInputCheckbox _disabled _label=\"InputCheckbox 3, Tabindex 2\" _value={false} tabIndex={3} />\n\t\t\t\t\t\t<KolInputCheckbox _touched _label=\"InputCheckbox 2, Tabindex 3\" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />\n\t\t\t\t\t\t<KolInputCheckbox _label=\"InputCheckbox 1, Tabindex 4\" _value={false} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputColor\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputColor _disabled _value=\"#f08080\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputColor _touched _value=\"#f08080\" _label=\"InputCheckbox 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputColor _value=\"#f08080\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputDate\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputDate _disabled _type=\"datetime-local\" _label=\"InputCheckbox 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputDate\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_type=\"datetime-local\"\n\t\t\t\t\t\t\t_label=\"InputCheckbox 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputDate _type=\"datetime-local\" _label=\"InputCheckbox 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputEmail\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputEmail _disabled _label=\"InputEmail 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputEmail _touched _label=\"InputEmail 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputEmail _label=\"InputEmail 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputFile\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputFile _disabled _label=\"InputFile 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputFile _touched _label=\"InputFile 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputFile _label=\"InputFile 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputNumber\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputNumber _disabled _label=\"InputNumber 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputNumber _touched _label=\"InputNumber 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputNumber _label=\"InputNumber 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputPassword\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputPassword _disabled _label=\"InputPassword 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputPassword _touched _label=\"InputPassword 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputPassword _label=\"InputPassword 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRadio\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 1, Tabindex 4\"\n\t\t\t\t\t\t\ttabIndex={4}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 2, Tabindex 3\"\n\t\t\t\t\t\t\t_disabled\n\t\t\t\t\t\t\ttabIndex={3}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 3, Tabindex 2\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolInputRadio\n\t\t\t\t\t\t\t_options=\"[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]\"\n\t\t\t\t\t\t\t_label=\"InputRadio 4, Tabindex 1\"\n\t\t\t\t\t\t\ttabIndex={1}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputRange\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 1, Tabindex 4\" _min={0} _max={50} tabIndex={4} />\n\t\t\t\t\t\t<KolInputRange _disabled _label=\"InputRange 2, Tabindex 3\" _min={0} _max={50} tabIndex={3} />\n\t\t\t\t\t\t<KolInputRange _touched _label=\"InputRange 3, Tabindex 2\" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputRange _label=\"InputRange 4, Tabindex 1\" _min={0} _max={50} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"InputText\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolInputText _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolInputText _disabled _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolInputText _touched _label=\"InputText 3, Tabindex 2\" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />\n\t\t\t\t\t\t<KolInputText _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"LinkButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 1, Tabindex 4\" _variant=\"primary\" tabIndex={4}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _disabled _href={'#/back-page'} _label=\"InputText 2, Tabindex 3\" _variant=\"primary\" tabIndex={3}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 3, Tabindex 2\" _variant=\"primary\" tabIndex={2}></KolLinkButton>\n\t\t\t\t\t\t<KolLinkButton _href={'#/back-page'} _label=\"InputText 4, Tabindex 1\" _variant=\"primary\" tabIndex={1}></KolLinkButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Link\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 1, Tabindex 4\" tabIndex={4} />\n\t\t\t\t\t\t<KolLink _disabled _href=\"#/back-page\" _label=\"InputText 2, Tabindex 3\" tabIndex={3} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 3, Tabindex 2\" tabIndex={2} />\n\t\t\t\t\t\t<KolLink _href=\"#/back-page\" _label=\"InputText 4, Tabindex 1\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SingleSelect\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 1, Tabindex 4\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />\n\t\t\t\t\t\t<KolSingleSelect _disabled _label=\"InputText 2, Tabindex 3\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />\n\t\t\t\t\t\t<KolSingleSelect\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"InputText 3, Tabindex 2\"\n\t\t\t\t\t\t\t_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\t_value={'de'}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolSingleSelect _label=\"InputText 4, Tabindex 1\" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"SplitButton\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 1, Tabindex 4\" tabIndex={4}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 2, Tabindex 3\" tabIndex={3} _disabled>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 3, Tabindex 2\" tabIndex={2}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t\t<KolSplitButton _label=\"InputText 4, Tabindex 1\" tabIndex={1}>\n\t\t\t\t\t\t\tDropdown-Inhalt\n\t\t\t\t\t\t</KolSplitButton>\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\n\t\t\t\t<KolCard _label=\"Textarea\" _level={0}>\n\t\t\t\t\t<div className=\"grid sm:flex flex-wrap gap-4 items-end\">\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 1, Tabindex 4\" _rows={3} _placeholder=\"Placeholder\" tabIndex={4} />\n\t\t\t\t\t\t<KolTextarea _disabled _label=\"Textarea 2, Tabindex 3\" _rows={3} _placeholder=\"Placeholder\" tabIndex={3} />\n\t\t\t\t\t\t<KolTextarea\n\t\t\t\t\t\t\t_touched\n\t\t\t\t\t\t\t_label=\"Textarea 3, Tabindex 2\"\n\t\t\t\t\t\t\t_rows={3}\n\t\t\t\t\t\t\t_placeholder=\"Placeholder\"\n\t\t\t\t\t\t\t_msg={{ _type: 'error', _description: ERROR_MSG }}\n\t\t\t\t\t\t\ttabIndex={2}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<KolTextarea _label=\"Textarea 4, Tabindex 1\" _rows={3} _placeholder=\"Placeholder\" tabIndex={1} />\n\t\t\t\t\t</div>\n\t\t\t\t</KolCard>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n",
|
|
1969
1977
|
"kind": "scenario"
|
|
1970
1978
|
},
|
|
1971
1979
|
{
|
|
@@ -2117,7 +2125,7 @@
|
|
|
2117
2125
|
"group": "spec",
|
|
2118
2126
|
"name": "accordion",
|
|
2119
2127
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/accordion.md",
|
|
2120
|
-
"code": "# kol-accordion\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n\n## Properties\n\n| Property | Attribute | Description | Type
|
|
2128
|
+
"code": "# kol-accordion\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_disabled` | `_disabled` | Makes the element not focusable and ignore all events. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Gibt die EventCallback-Funktionen an. | `undefined \\| { onClick?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; onToggle?: EventValueOrEventCallback<MouseEvent, boolean> \\| undefined; }` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `false` |\n\n\n## Methods\n\n### `click() => Promise<void>`\n\nTriggers a click on the trigger button of the first section.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `focus() => Promise<void>`\n\nSets focus on the internal element.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------------------------------------------------------------- |\n| | Allows arbitrary HTML to be inserted into the content area of the accordion. |\n\n\n----------------------------------------------\n\n\n",
|
|
2121
2129
|
"kind": "spec"
|
|
2122
2130
|
},
|
|
2123
2131
|
{
|
|
@@ -2205,7 +2213,7 @@
|
|
|
2205
2213
|
"group": "spec",
|
|
2206
2214
|
"name": "dialog",
|
|
2207
2215
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/dialog.md",
|
|
2208
|
-
"code": "# kol-dialog\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type
|
|
2216
|
+
"code": "# kol-dialog\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Defines the modal callback functions. | `undefined \\| ({ onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines the variant of the modal. | `\"blank\" \\| \"card\" \\| undefined` | `'blank'` |\n| `_width` | `_width` | Defines the width of the modal. (max-width: 100%) | `string \\| undefined` | `'100%'` |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closeModal() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\n<span style=\"color:red\">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the dialog. Pass true to open as a modal dialog.\n\n#### Parameters\n\n| Name | Type | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the dialog as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------- |\n| | The dialog's contents. |\n\n\n----------------------------------------------\n\n\n",
|
|
2209
2217
|
"kind": "spec"
|
|
2210
2218
|
},
|
|
2211
2219
|
{
|
|
@@ -2213,7 +2221,7 @@
|
|
|
2213
2221
|
"group": "spec",
|
|
2214
2222
|
"name": "drawer",
|
|
2215
2223
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/drawer.md",
|
|
2216
|
-
"code": "# kol-drawer\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type
|
|
2224
|
+
"code": "# kol-drawer\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_align` | `_align` | Defines the visual orientation of the component. | `\"bottom\" \\| \"left\" \\| \"right\" \\| \"top\" \\| undefined` | `undefined` |\n| `_hasCloser` | `_has-closer` | Defines whether the element can be closed. | `boolean \\| undefined` | `false` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_level` | `_level` | Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text. | `0 \\| 1 \\| 2 \\| 3 \\| 4 \\| 5 \\| 6 \\| undefined` | `0` |\n| `_on` | -- | Specifies the EventCallback function to be called when the drawer is closing. | `undefined \\| ({ onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_open` | `_open` | Opens/expands the element when truthy, closes/collapses when falsy. | `boolean \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the drawer.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `open() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use show() or showModal() instead.<br/><br/>Opens the drawer.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the drawer. Pass true to open as a modal drawer.\n\n#### Parameters\n\n| Name | Type | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the drawer as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | ---------------------- |\n| | The Content of drawer. |\n\n\n----------------------------------------------\n\n\n",
|
|
2217
2225
|
"kind": "spec"
|
|
2218
2226
|
},
|
|
2219
2227
|
{
|
|
@@ -2365,7 +2373,7 @@
|
|
|
2365
2373
|
"group": "spec",
|
|
2366
2374
|
"name": "modal",
|
|
2367
2375
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/modal.md",
|
|
2368
|
-
"code": "# kol-modal\n\n\n\n<!-- Auto Generated Below -->\n\n\n> **[DEPRECATED]** Use `kol-dialog` instead.\n\n## Overview\n\nThe **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility.\n\n## Properties\n\n| Property | Attribute | Description | Type
|
|
2376
|
+
"code": "# kol-modal\n\n\n\n<!-- Auto Generated Below -->\n\n\n> **[DEPRECATED]** Use `kol-dialog` instead.\n\n## Overview\n\nThe **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the modal callback functions. | `undefined \\| ({ onClose?: (() => void) \\| undefined; onToggle?: ((open: boolean) => void) \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines the variant of the modal. | `\"blank\" \\| \"card\" \\| undefined` | `'blank'` |\n| `_width` | `_width` | Defines the width of the modal. (max-width: 100%) | `string \\| undefined` | `'100%'` |\n\n\n## Methods\n\n### `close() => Promise<void>`\n\nCloses the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `closeModal() => Promise<void>`\n\n<span class=\"text-red-500\">**[DEPRECATED]**</span> Use close() instead.<br/><br/>Closes the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `openModal() => Promise<void>`\n\n<span style=\"color:red\">**[DEPRECATED]**</span> Use showModal() instead.<br/><br/>Opens the modal dialog.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `show(modal?: boolean) => Promise<void>`\n\nOpens the dialog. Pass true to open as a modal dialog.\n\n#### Parameters\n\n| Name | Type | Description |\n| ------- | --------- | ----------- |\n| `modal` | `boolean` | |\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n### `showModal() => Promise<void>`\n\nOpens the dialog as a modal.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n## Slots\n\n| Slot | Description |\n| ---- | --------------------- |\n| | The modal's contents. |\n\n\n----------------------------------------------\n\n\n",
|
|
2369
2377
|
"kind": "spec"
|
|
2370
2378
|
},
|
|
2371
2379
|
{
|
|
@@ -2461,7 +2469,7 @@
|
|
|
2461
2469
|
"group": "spec",
|
|
2462
2470
|
"name": "table-stateful",
|
|
2463
2471
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateful.md",
|
|
2464
|
-
"code": "# kol-table-stateful\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean \\| undefined` | `undefined` |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }` | `undefined` |\n| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition` | `_pagination-position` | Controls the position of the pagination. | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType[] | null>`\n\n\n\n### `resetSort() => Promise<void>`\n\nResets the sort state to the default values defined in the `_headers` prop.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
|
|
2472
|
+
"code": "# kol-table-stateful\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Overview\n\nThe **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination.\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| ----------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_allowMultiSort` | `_allow-multi-sort` | Defines whether to allow multi sort. | `boolean \\| undefined` | `undefined` |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headers` _(required)_ | `_headers` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; vertical?: KoliBriTableHeaderCellWithLogic[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSelectionChange?: EventValueOrEventCallback<Event, StatefulSelectionChangeEventPayload> \\| undefined; }` | `undefined` |\n| `_pagination` | `_pagination` | Defines whether to show the data distributed over multiple pages. | `boolean \\| string \\| undefined \\| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \\| undefined; _page?: number \\| undefined; _max?: number \\| undefined; _boundaryCount?: number \\| undefined; _hasButtons?: boolean \\| Stringified<PaginationHasButton> \\| undefined; _pageSize?: number \\| undefined; _pageSizeOptions?: Stringified<number[]> \\| undefined; _siblingCount?: number \\| undefined; _customClass?: string \\| undefined; _label?: string \\| undefined; _tooltipAlign?: AlignPropType \\| undefined; }` | `undefined` |\n| `_paginationPosition` | `_pagination-position` | Controls the position of the pagination. | `\"both\" \\| \"bottom\" \\| \"top\" \\| undefined` | `'bottom'` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n## Methods\n\n### `getSelection() => Promise<KoliBriTableDataType[] | null>`\n\nReturns the selected rows.\n\n#### Returns\n\nType: `Promise<KoliBriTableDataType[] | null>`\n\n\n\n### `resetSort() => Promise<void>`\n\nResets the sort state to the default values defined in the `_headers` prop.\n\n#### Returns\n\nType: `Promise<void>`\n\n\n\n\n----------------------------------------------\n\n\n",
|
|
2465
2473
|
"kind": "spec"
|
|
2466
2474
|
},
|
|
2467
2475
|
{
|
|
@@ -2469,7 +2477,7 @@
|
|
|
2469
2477
|
"group": "spec",
|
|
2470
2478
|
"name": "table-stateless",
|
|
2471
2479
|
"path": "packages/tools/mcp/node_modules/@public-ui/components/doc/table-stateless.md",
|
|
2472
|
-
"code": "# kol-table-stateless\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
|
|
2480
|
+
"code": "# kol-table-stateless\n\n\n\n<!-- Auto Generated Below -->\n\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| --------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |\n| `_data` _(required)_ | `_data` | Defines the primary table data. | `KoliBriTableDataType[] \\| string` | `undefined` |\n| `_dataFoot` | `_data-foot` | Defines the data for the table footer. | `KoliBriTableDataType[] \\| string \\| undefined` | `undefined` |\n| `_fixedCols` | -- | Defines the fixed number of columns from start and end of the table | `[number, number] \\| undefined` | `undefined` |\n| `_hasSettingsMenu` | `_has-settings-menu` | Enables the settings menu if true (default: false). | `boolean \\| undefined` | `undefined` |\n| `_headerCells` _(required)_ | `_header-cells` | Defines the horizontal and vertical table headers. | `string \\| { horizontal?: KoliBriTableHeaderCell[][] \\| undefined; vertical?: KoliBriTableHeaderCell[][] \\| undefined; }` | `undefined` |\n| `_label` _(required)_ | `_label` | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |\n| `_on` | -- | Defines the callback functions for table events. | `undefined \\| { onSort?: EventValueOrEventCallback<MouseEvent, SortEventPayload> \\| undefined; onSelectionChange?: EventValueOrEventCallback<Event, KoliBriTableSelectionKeys> \\| undefined; onChangeHeaderCells?: EventValueOrEventCallback<Event, TableHeaderCells> \\| undefined; }` | `undefined` |\n| `_selection` | `_selection` | Defines how rows can be selected and the current selection. | `string \\| undefined \\| ({ disabledKeys?: KoliBriTableSelectionKeys \\| undefined; keyPropertyName?: string \\| undefined; label: (row: KoliBriTableDataType) => string; multiple?: boolean \\| undefined; selectedKeys?: KoliBriTableSelectionKeys \\| undefined; })` | `undefined` |\n| `_variant` | `_variant` | Defines which variant should be used for presentation. | `string \\| undefined` | `undefined` |\n\n\n----------------------------------------------\n\n\n",
|
|
2473
2481
|
"kind": "spec"
|
|
2474
2482
|
},
|
|
2475
2483
|
{
|