@epam/ai-dial-ui-kit 0.15.0-dev.7 → 0.15.0-dev.9
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/README.md +1 -0
- package/dist/CHANGELOG.md +2 -0
- package/dist/{DateCellRenderer-4iMidqal.cjs → DateCellRenderer-Bu40QyHE.cjs} +1 -1
- package/dist/{DateCellRenderer-CTTAnQjB.cjs → DateCellRenderer-C3e61i75.cjs} +1 -1
- package/dist/JsonEditor-qv1Z0dLX.cjs +1 -0
- package/dist/{MarkdownEditor-C9-ZMRVi.cjs → MarkdownEditor-DHn2pYOJ.cjs} +1 -1
- package/dist/{MarkdownEditor-BzEbdj7R.cjs → MarkdownEditor-jQ8nDJfx.cjs} +1 -1
- package/dist/MarkdownEditorContainer-Bzcnoemw.cjs +1 -0
- package/dist/components/MarkdownEditor/MarkdownEditorContainer.js +16 -18
- package/dist/components/New/FilterChips/FilterChips.js +43 -0
- package/dist/components/New/FilterChips/constants.js +5 -0
- package/dist/components/SchemaRenderer/components/SchemaAdditionalPropertiesEditor.js +46 -31
- package/dist/components/SchemaRenderer/components/SchemaKeyValueEditor.js +223 -135
- package/dist/components/SchemaRenderer/types.js +19 -8
- package/dist/components/SchemaRenderer/utils.js +121 -96
- package/dist/components-manifest.json +81 -3
- package/dist/constants/public-class-names.js +5 -0
- package/dist/dial-ui-kit.cjs +2 -2
- package/dist/dial-ui-kit.js +84 -82
- package/dist/editors.cjs +1 -1
- package/dist/file-manager.cjs +1 -1
- package/dist/grid.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/lazy-tfN4sKhq.cjs +1 -0
- package/dist/src/components/New/FilterChips/FilterChips.d.ts +69 -0
- package/dist/src/components/New/FilterChips/constants.d.ts +13 -0
- package/dist/src/components/SchemaRenderer/types.d.ts +11 -0
- package/dist/src/components/SchemaRenderer/utils.d.ts +5 -1
- package/dist/src/constants/public-class-names.d.ts +5 -0
- package/dist/src/index.d.ts +2 -0
- package/dist/{use-file-manager-tabs-DKmWaOlC.cjs → use-file-manager-tabs-9DWkp9IJ.cjs} +1 -1
- package/package.json +1 -1
- package/dist/JsonEditor-D2jSlRFi.cjs +0 -1
- package/dist/MarkdownEditorContainer-BvwJjkiZ.cjs +0 -1
- package/dist/editor-_174x-qy.cjs +0 -1
- package/dist/lazy-DM-7dL0Y.cjs +0 -1
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
import { JsonSchemaType as
|
|
2
|
-
function
|
|
1
|
+
import { JsonSchemaType as f } from "./types.js";
|
|
2
|
+
function $(r, n) {
|
|
3
3
|
const i = { ...r, ...n };
|
|
4
4
|
return (r.properties || n.properties) && (i.properties = { ...r.properties, ...n.properties }), (r.required || n.required) && (i.required = Array.from(
|
|
5
5
|
/* @__PURE__ */ new Set([...r.required ?? [], ...n.required ?? []])
|
|
6
6
|
)), i;
|
|
7
7
|
}
|
|
8
|
-
function
|
|
8
|
+
function p(r, n, i = 0) {
|
|
9
9
|
if (i > 10) return r;
|
|
10
10
|
let t = r;
|
|
11
11
|
if (t.$ref) {
|
|
12
12
|
const e = t.$ref.replace(/^#\//, "").split("/");
|
|
13
13
|
let o = n;
|
|
14
|
-
for (const
|
|
15
|
-
o = o?.[
|
|
14
|
+
for (const u of e)
|
|
15
|
+
o = o?.[u];
|
|
16
16
|
if (!o || typeof o != "object") return r;
|
|
17
|
-
const { $ref:
|
|
18
|
-
t = { ...
|
|
17
|
+
const { $ref: s, ...y } = t, d = o;
|
|
18
|
+
t = { ...d.$ref ? p(d, n, i + 1) : d, ...y };
|
|
19
19
|
}
|
|
20
20
|
if (t.allOf && t.allOf.length > 0) {
|
|
21
21
|
const { allOf: e, ...o } = t;
|
|
22
|
-
let
|
|
22
|
+
let s = {};
|
|
23
23
|
for (const y of e)
|
|
24
|
-
|
|
25
|
-
t =
|
|
24
|
+
s = $(s, p(y, n, i + 1));
|
|
25
|
+
t = $(s, o);
|
|
26
26
|
}
|
|
27
27
|
return t;
|
|
28
28
|
}
|
|
29
|
-
function
|
|
29
|
+
function x(r) {
|
|
30
30
|
return r.map((n, i) => ({ entry: n, index: i })).sort((n, i) => {
|
|
31
31
|
const t = n.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0, e = i.entry[1]["dial:meta"]?.["dial:propertyOrder"] ?? 1 / 0;
|
|
32
32
|
return t !== e ? t - e : n.index - i.index;
|
|
33
33
|
}).map(({ entry: n }) => n);
|
|
34
34
|
}
|
|
35
|
-
function
|
|
35
|
+
function j(r) {
|
|
36
36
|
return r == null || r === "";
|
|
37
37
|
}
|
|
38
38
|
function O(r) {
|
|
39
|
-
return r.type ===
|
|
39
|
+
return r.type === f.Object || r.properties != null && r.oneOf == null && r.anyOf == null && r.type == null;
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function N(r) {
|
|
42
42
|
return r.replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2").replace(/\b\w/g, (n) => n.toUpperCase());
|
|
43
43
|
}
|
|
44
|
-
function
|
|
45
|
-
return r.type ===
|
|
44
|
+
function T(r, n) {
|
|
45
|
+
return r.type === f.Null ? "null" : r.$ref ? p(r, n).title ?? r.$ref.split("/").pop() ?? "Option" : r.title ? r.title : r.type ? Array.isArray(r.type) ? r.type.join(" | ") : r.type : r.discriminator ? Object.keys(r.discriminator.mapping).join(" | ") : r.const != null ? String(r.const) : r.oneOf ? "One of options" : "Option";
|
|
46
46
|
}
|
|
47
|
-
function
|
|
47
|
+
function A(r, n, i = 0) {
|
|
48
48
|
if (i > 15) return;
|
|
49
|
-
const t =
|
|
49
|
+
const t = p(r, n);
|
|
50
50
|
if ("default" in t)
|
|
51
51
|
return t.default;
|
|
52
52
|
if (t.discriminator && t.oneOf) {
|
|
53
53
|
const e = Object.keys(t.discriminator.mapping)[0];
|
|
54
54
|
if (e) {
|
|
55
|
-
const o =
|
|
55
|
+
const o = p(
|
|
56
56
|
{ $ref: t.discriminator.mapping[e] },
|
|
57
57
|
n
|
|
58
58
|
);
|
|
59
59
|
return {
|
|
60
|
-
...
|
|
60
|
+
...A(o, n, i + 1) ?? {},
|
|
61
61
|
[t.discriminator.propertyName]: e
|
|
62
62
|
};
|
|
63
63
|
}
|
|
@@ -66,9 +66,9 @@ function j(r, n, i = 0) {
|
|
|
66
66
|
if (t.properties) {
|
|
67
67
|
const e = {};
|
|
68
68
|
let o = !1;
|
|
69
|
-
for (const [
|
|
70
|
-
const
|
|
71
|
-
|
|
69
|
+
for (const [s, y] of Object.entries(t.properties)) {
|
|
70
|
+
const d = A(y, n, i + 1);
|
|
71
|
+
d !== void 0 && (e[s] = d, o = !0);
|
|
72
72
|
}
|
|
73
73
|
return o ? e : void 0;
|
|
74
74
|
}
|
|
@@ -76,26 +76,26 @@ function j(r, n, i = 0) {
|
|
|
76
76
|
return {};
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
function
|
|
79
|
+
function b(r, n, i, t = "", e = 0) {
|
|
80
80
|
if (e > 15) return [];
|
|
81
|
-
const o = [],
|
|
82
|
-
if (
|
|
83
|
-
const
|
|
84
|
-
(
|
|
81
|
+
const o = [], s = p(n, i);
|
|
82
|
+
if (s.anyOf) {
|
|
83
|
+
const l = s.anyOf.filter(
|
|
84
|
+
(u) => u.type !== f.Null
|
|
85
85
|
);
|
|
86
|
-
return r != null &&
|
|
86
|
+
return r != null && l.length === 1 ? b(
|
|
87
87
|
r,
|
|
88
|
-
|
|
88
|
+
l[0],
|
|
89
89
|
i,
|
|
90
90
|
t,
|
|
91
91
|
e + 1
|
|
92
92
|
) : o;
|
|
93
93
|
}
|
|
94
|
-
if (
|
|
95
|
-
const
|
|
96
|
-
if (
|
|
97
|
-
const a = { $ref:
|
|
98
|
-
return
|
|
94
|
+
if (s.oneOf && s.discriminator) {
|
|
95
|
+
const l = s.discriminator.propertyName, u = r?.[l];
|
|
96
|
+
if (u && s.discriminator.mapping[u]) {
|
|
97
|
+
const a = { $ref: s.discriminator.mapping[u] }, c = p(a, i);
|
|
98
|
+
return b(
|
|
99
99
|
r,
|
|
100
100
|
c,
|
|
101
101
|
i,
|
|
@@ -105,41 +105,41 @@ function $(r, n, i, t = "", e = 0) {
|
|
|
105
105
|
}
|
|
106
106
|
return o;
|
|
107
107
|
}
|
|
108
|
-
if (
|
|
109
|
-
if (Array.isArray(r) &&
|
|
110
|
-
for (let
|
|
111
|
-
const
|
|
112
|
-
r[
|
|
113
|
-
|
|
108
|
+
if (s.type === f.Array || !s.type && Array.isArray(r)) {
|
|
109
|
+
if (Array.isArray(r) && s.items)
|
|
110
|
+
for (let l = 0; l < r.length; l++) {
|
|
111
|
+
const u = b(
|
|
112
|
+
r[l],
|
|
113
|
+
s.items,
|
|
114
114
|
i,
|
|
115
|
-
`${t}[${
|
|
115
|
+
`${t}[${l}]`,
|
|
116
116
|
e + 1
|
|
117
117
|
);
|
|
118
|
-
o.push(...
|
|
118
|
+
o.push(...u);
|
|
119
119
|
}
|
|
120
120
|
return o;
|
|
121
121
|
}
|
|
122
|
-
if (!O(
|
|
123
|
-
const y =
|
|
124
|
-
for (const
|
|
125
|
-
const
|
|
126
|
-
if (
|
|
122
|
+
if (!O(s)) return o;
|
|
123
|
+
const y = s.required ?? [], d = r;
|
|
124
|
+
for (const l of y) {
|
|
125
|
+
const u = s.properties?.[l];
|
|
126
|
+
if (u && p(u, i).isHidden)
|
|
127
127
|
continue;
|
|
128
|
-
const a = t ? `${t}.${
|
|
129
|
-
if (
|
|
130
|
-
const g =
|
|
128
|
+
const a = t ? `${t}.${l}` : l, c = d?.[l];
|
|
129
|
+
if (j(c)) {
|
|
130
|
+
const g = u?.title ?? N(l);
|
|
131
131
|
o.push({ path: a, message: `${g} is required` });
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
|
-
if (
|
|
135
|
-
for (const [
|
|
136
|
-
if (u
|
|
134
|
+
if (d && s.properties)
|
|
135
|
+
for (const [l, u] of Object.entries(s.properties)) {
|
|
136
|
+
if (p(u, i).isHidden)
|
|
137
137
|
continue;
|
|
138
|
-
const a = t ? `${t}.${
|
|
138
|
+
const a = t ? `${t}.${l}` : l, c = d[l];
|
|
139
139
|
if (c != null) {
|
|
140
|
-
const g =
|
|
140
|
+
const g = b(
|
|
141
141
|
c,
|
|
142
|
-
|
|
142
|
+
u,
|
|
143
143
|
i,
|
|
144
144
|
a,
|
|
145
145
|
e + 1
|
|
@@ -147,12 +147,12 @@ function $(r, n, i, t = "", e = 0) {
|
|
|
147
147
|
o.push(...g);
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
|
-
if (
|
|
151
|
-
const
|
|
152
|
-
for (const [
|
|
153
|
-
const c = t ? `${t}.${
|
|
150
|
+
if (d && s.additionalProperties != null && s.additionalProperties !== !1 && typeof s.additionalProperties == "object") {
|
|
151
|
+
const l = s.additionalProperties;
|
|
152
|
+
for (const [u, a] of Object.entries(d)) {
|
|
153
|
+
const c = t ? `${t}.${u}` : u, g = b(
|
|
154
154
|
a,
|
|
155
|
-
|
|
155
|
+
l,
|
|
156
156
|
i,
|
|
157
157
|
c,
|
|
158
158
|
e + 1
|
|
@@ -162,61 +162,61 @@ function $(r, n, i, t = "", e = 0) {
|
|
|
162
162
|
}
|
|
163
163
|
return o;
|
|
164
164
|
}
|
|
165
|
-
function
|
|
166
|
-
const t =
|
|
165
|
+
function E(r, n, i) {
|
|
166
|
+
const t = p(n, i);
|
|
167
167
|
if (Array.isArray(r))
|
|
168
168
|
return `${r.length} item${r.length !== 1 ? "s" : ""}`;
|
|
169
169
|
if (O(t) && t.properties) {
|
|
170
170
|
const e = Object.entries(t.properties).filter(
|
|
171
|
-
([,
|
|
172
|
-
), o = e.length,
|
|
173
|
-
return `${e.filter(([
|
|
174
|
-
const
|
|
175
|
-
return
|
|
171
|
+
([, d]) => !p(d, i).isHidden
|
|
172
|
+
), o = e.length, s = r;
|
|
173
|
+
return `${e.filter(([d]) => {
|
|
174
|
+
const l = s?.[d];
|
|
175
|
+
return l != null && l !== "";
|
|
176
176
|
}).length}/${o} fields`;
|
|
177
177
|
}
|
|
178
178
|
return "";
|
|
179
179
|
}
|
|
180
|
-
function
|
|
180
|
+
function q(r, n, i) {
|
|
181
181
|
if (r == null) {
|
|
182
|
-
const t = n.findIndex((e) => e.type ===
|
|
182
|
+
const t = n.findIndex((e) => e.type === f.Null);
|
|
183
183
|
return t >= 0 ? t : 0;
|
|
184
184
|
}
|
|
185
185
|
if (Array.isArray(r)) {
|
|
186
|
-
const t = n.findIndex((e) =>
|
|
186
|
+
const t = n.findIndex((e) => p(e, i).type === f.Array);
|
|
187
187
|
return t >= 0 ? t : 0;
|
|
188
188
|
}
|
|
189
189
|
if (typeof r == "boolean") {
|
|
190
|
-
const t = n.findIndex((e) =>
|
|
190
|
+
const t = n.findIndex((e) => p(e, i).type === f.Boolean);
|
|
191
191
|
return t >= 0 ? t : 0;
|
|
192
192
|
}
|
|
193
193
|
if (typeof r == "number") {
|
|
194
194
|
const t = n.findIndex((e) => {
|
|
195
|
-
const o =
|
|
196
|
-
return o.type ===
|
|
195
|
+
const o = p(e, i);
|
|
196
|
+
return o.type === f.Number || o.type === f.Integer;
|
|
197
197
|
});
|
|
198
198
|
return t >= 0 ? t : 0;
|
|
199
199
|
}
|
|
200
200
|
if (typeof r == "string") {
|
|
201
|
-
const t = n.findIndex((e) =>
|
|
201
|
+
const t = n.findIndex((e) => p(e, i).type === f.String);
|
|
202
202
|
return t >= 0 ? t : 0;
|
|
203
203
|
}
|
|
204
204
|
if (typeof r == "object") {
|
|
205
205
|
const t = r;
|
|
206
206
|
for (let e = 0; e < n.length; e++) {
|
|
207
|
-
const o =
|
|
207
|
+
const o = p(n[e], i);
|
|
208
208
|
if (o.discriminator && o.discriminator.propertyName in t)
|
|
209
209
|
return e;
|
|
210
210
|
}
|
|
211
211
|
for (let e = 0; e < n.length; e++) {
|
|
212
|
-
const o =
|
|
212
|
+
const o = p(n[e], i);
|
|
213
213
|
if (O(o) || o.oneOf) return e;
|
|
214
214
|
}
|
|
215
215
|
return 0;
|
|
216
216
|
}
|
|
217
217
|
return 0;
|
|
218
218
|
}
|
|
219
|
-
function
|
|
219
|
+
function R(r, n, i) {
|
|
220
220
|
if (n && typeof r == "object" && r !== null) {
|
|
221
221
|
const t = r[n];
|
|
222
222
|
if (t) return `Item ${i + 1}: ${t}`;
|
|
@@ -227,32 +227,57 @@ function V(r, n, i) {
|
|
|
227
227
|
}
|
|
228
228
|
return `Item ${i + 1}`;
|
|
229
229
|
}
|
|
230
|
-
function
|
|
230
|
+
function B(r) {
|
|
231
231
|
switch (Array.isArray(r.type) ? r.type[0] : r.type) {
|
|
232
|
-
case
|
|
232
|
+
case f.String:
|
|
233
233
|
return "";
|
|
234
|
-
case
|
|
234
|
+
case f.Boolean:
|
|
235
235
|
return !1;
|
|
236
|
-
case
|
|
236
|
+
case f.Array:
|
|
237
237
|
return [];
|
|
238
|
-
case
|
|
239
|
-
case
|
|
238
|
+
case f.Integer:
|
|
239
|
+
case f.Number:
|
|
240
240
|
return;
|
|
241
241
|
default:
|
|
242
242
|
return {};
|
|
243
243
|
}
|
|
244
244
|
}
|
|
245
|
+
const D = [
|
|
246
|
+
f.String,
|
|
247
|
+
f.Number,
|
|
248
|
+
f.Boolean,
|
|
249
|
+
f.Null,
|
|
250
|
+
f.Object,
|
|
251
|
+
f.Array
|
|
252
|
+
];
|
|
253
|
+
function V(r) {
|
|
254
|
+
return Array.isArray(r) ? f.Array : typeof r == "object" && r !== null ? f.Object : typeof r == "boolean" ? f.Boolean : typeof r == "number" ? f.Number : r === null ? f.Null : f.String;
|
|
255
|
+
}
|
|
256
|
+
const I = {
|
|
257
|
+
[f.String]: "",
|
|
258
|
+
[f.Number]: 0,
|
|
259
|
+
[f.Boolean]: !1,
|
|
260
|
+
[f.Null]: null,
|
|
261
|
+
[f.Object]: {},
|
|
262
|
+
[f.Array]: []
|
|
263
|
+
};
|
|
264
|
+
function k(r) {
|
|
265
|
+
return I[r];
|
|
266
|
+
}
|
|
245
267
|
export {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
268
|
+
D as ENTRY_TYPE_OPTIONS,
|
|
269
|
+
E as buildSummary,
|
|
270
|
+
q as detectAnyOfVariant,
|
|
271
|
+
A as extractDefaults,
|
|
272
|
+
k as getEntryTypeDefault,
|
|
273
|
+
R as getItemTitle,
|
|
274
|
+
T as getOptionLabel,
|
|
275
|
+
B as getSchemaDefault,
|
|
276
|
+
V as inferEntryType,
|
|
277
|
+
j as isMissingRequiredValue,
|
|
253
278
|
O as isObjectType,
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
279
|
+
p as resolveRef,
|
|
280
|
+
x as sortByPropertyOrder,
|
|
281
|
+
N as toFieldLabel,
|
|
282
|
+
b as validateRequired
|
|
258
283
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.15.0-dev.
|
|
3
|
-
"generatedAt": "2026-09-
|
|
2
|
+
"version": "0.15.0-dev.9",
|
|
3
|
+
"generatedAt": "2026-09-18T14:40:00.960Z",
|
|
4
4
|
"kit": {
|
|
5
5
|
"name": "@epam/ai-dial-ui-kit",
|
|
6
6
|
"description": "A modern UI kit for building AI DIAL interfaces with React",
|
|
@@ -2898,6 +2898,65 @@
|
|
|
2898
2898
|
],
|
|
2899
2899
|
"sourceFile": "components/New/Tabs/Tabs.tsx"
|
|
2900
2900
|
},
|
|
2901
|
+
{
|
|
2902
|
+
"name": "FilterChips",
|
|
2903
|
+
"category": "Components_2_0",
|
|
2904
|
+
"generation": "2.0",
|
|
2905
|
+
"description": "A row of filter chips that picks one value out of a few.\naliases: FilterChipRow|ChipTabs|TagTabs|FilterTabs\nDesign system 2.0\n\nThe chip-shaped sibling of the kit's other single-select rows, and the one to\nreach for when the options label a *subset of a list* — \"All\", \"Shared\",\n\"Mine\" above a history panel. `Tabs` underlines the active option and reads\nas navigation between panels; `SegmentedControl` sinks equal segments into a\ntrack and reads as a view switch. This one draws `TagAppearance.Selectable`\nchips: no fill until selected, and a semibold label once it is. Selecting a\nchip therefore widens it by the difference between the regular and semibold\nlabel — give the row `stretch`, or the chips a width, if that shift matters.\n\nEach chip is a toggle button carrying its state on `aria-pressed`, wrapped in\na named `role=\"group\"` — the pattern `Tag` is built for. That makes every\nchip its own tab stop, which is what a filter row wants: unlike a\n`radiogroup`, arrowing onto a chip never changes the filter by accident.\nName the group through `aria-label` or `aria-labelledby`, or the chips are\nannounced as a handful of unrelated toggles.\n\nThere is no disabled chip. An option the user must not pick is left out of\n`items` — a chip that renders but cannot be activated is a label and nothing\nelse, and `Tag` drops its button role when disabled, so it would not even\nannounce as unavailable.\n\nLabels are the caller's to translate — the component ships no English\ndefaults.",
|
|
2906
|
+
"props": [
|
|
2907
|
+
{
|
|
2908
|
+
"name": "items",
|
|
2909
|
+
"type": "FilterChipItem<T>[]",
|
|
2910
|
+
"required": true,
|
|
2911
|
+
"description": "Chips to render, in order; each needs a unique `value` and a `label`"
|
|
2912
|
+
},
|
|
2913
|
+
{
|
|
2914
|
+
"name": "value",
|
|
2915
|
+
"type": "T",
|
|
2916
|
+
"required": true,
|
|
2917
|
+
"description": "The `value` of the selected chip"
|
|
2918
|
+
},
|
|
2919
|
+
{
|
|
2920
|
+
"name": "onChange",
|
|
2921
|
+
"type": "(value: T) => void",
|
|
2922
|
+
"required": true,
|
|
2923
|
+
"description": "Called with the `value` of the chip the user picked. A click on the already-selected chip fires it again, so a row that clears back to a default handles that itself"
|
|
2924
|
+
},
|
|
2925
|
+
{
|
|
2926
|
+
"name": "stretch",
|
|
2927
|
+
"type": "boolean",
|
|
2928
|
+
"required": false,
|
|
2929
|
+
"defaultValue": "false",
|
|
2930
|
+
"description": "Grows the chips to share the row width equally instead of hugging their labels"
|
|
2931
|
+
},
|
|
2932
|
+
{
|
|
2933
|
+
"name": "className",
|
|
2934
|
+
"type": "string",
|
|
2935
|
+
"required": false,
|
|
2936
|
+
"description": "Additional classes for the row, e.g. its padding or `flex-wrap`"
|
|
2937
|
+
},
|
|
2938
|
+
{
|
|
2939
|
+
"name": "chipClassName",
|
|
2940
|
+
"type": "string",
|
|
2941
|
+
"required": false,
|
|
2942
|
+
"description": "Additional classes for every chip. A panel too narrow for the chips' default padding can tighten it here"
|
|
2943
|
+
},
|
|
2944
|
+
{
|
|
2945
|
+
"name": "'aria-label'",
|
|
2946
|
+
"type": "string",
|
|
2947
|
+
"required": false
|
|
2948
|
+
},
|
|
2949
|
+
{
|
|
2950
|
+
"name": "'aria-labelledby'",
|
|
2951
|
+
"type": "string",
|
|
2952
|
+
"required": false
|
|
2953
|
+
}
|
|
2954
|
+
],
|
|
2955
|
+
"examples": [
|
|
2956
|
+
"<FilterChips\n aria-label={t('Filter chats')}\n value={tab}\n onChange={setTab}\n items={[\n { value: 'all', label: t('All') },\n { value: 'mine', label: t('My chats') },\n { value: 'shared', label: t('Shared') },\n ]}\n/>"
|
|
2957
|
+
],
|
|
2958
|
+
"sourceFile": "components/New/FilterChips/FilterChips.tsx"
|
|
2959
|
+
},
|
|
2901
2960
|
{
|
|
2902
2961
|
"name": "FileDropzone",
|
|
2903
2962
|
"category": "Components_2_0",
|
|
@@ -10493,6 +10552,25 @@
|
|
|
10493
10552
|
"sourceFile": "components/New/Tabs/Tabs.tsx",
|
|
10494
10553
|
"description": "A single tab entry rendered by ."
|
|
10495
10554
|
},
|
|
10555
|
+
{
|
|
10556
|
+
"name": "FilterChipItem",
|
|
10557
|
+
"kind": "interface",
|
|
10558
|
+
"members": [
|
|
10559
|
+
{
|
|
10560
|
+
"name": "value",
|
|
10561
|
+
"value": "T"
|
|
10562
|
+
},
|
|
10563
|
+
{
|
|
10564
|
+
"name": "label",
|
|
10565
|
+
"value": "string"
|
|
10566
|
+
},
|
|
10567
|
+
{
|
|
10568
|
+
"name": "icon?",
|
|
10569
|
+
"value": "ReactNode"
|
|
10570
|
+
}
|
|
10571
|
+
],
|
|
10572
|
+
"sourceFile": "components/New/FilterChips/FilterChips.tsx"
|
|
10573
|
+
},
|
|
10496
10574
|
{
|
|
10497
10575
|
"name": "TagAppearance",
|
|
10498
10576
|
"kind": "enum",
|
|
@@ -10765,7 +10843,7 @@
|
|
|
10765
10843
|
{
|
|
10766
10844
|
"name": "DIAL_KIT_CLASS",
|
|
10767
10845
|
"sourceFile": "constants/public-class-names.ts",
|
|
10768
|
-
"signature": "DIAL_KIT_CLASS = {\n /* ── Feedback and status ───────────────────────────────────────────────── */\n /** The `role=\"status\"` root of a `Spinner`. */\n spinner: 'dial-kit-spinner',\n /**\n * The outermost element of a `ProgressBar`: the box wrapping its label,\n * track and readout — or the track itself, which is the root when the bar\n * has neither.\n */\n progressBar: 'dial-kit-progress-bar',\n /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n skeleton: 'dial-kit-skeleton',\n /**\n * The `Notification` surface. Present on every wrapper too — the toast and\n * section-message variants of error, info, success, warning, loading and\n * general all render this component.\n */\n notification: 'dial-kit-notification',\n /** The empty-state root of `NoDataContent`. */\n noDataContent: 'dial-kit-no-data-content',\n\n /* ── Text ──────────────────────────────────────────────────────────────── */\n /** The text element of a `Highlight`, which renders the matched query. */\n highlight: 'dial-kit-highlight',\n /** The caption line under a field, rendered by `CaptionText`. */\n captionText: 'dial-kit-caption-text',\n /**\n * A caption in its error variant — what `ErrorText` renders. Additive to\n * `captionText`, since one component draws both.\n */\n errorText: 'dial-kit-error-text',\n /** The `Label` root, which wraps the `label` element and its info button. */\n label: 'dial-kit-label',\n\n /* ── Containers ────────────────────────────────────────────────────────── */\n /** The `article` element of a `CardShell`. */\n cardShell: 'dial-kit-card-shell',\n /** The `aside` element of a `CollapsibleSidebar`. */\n collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n /** The content box inside a `ResizableContainer`'s resize frame. */\n resizableContainer: 'dial-kit-resizable-container',\n /**\n * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n * `overlayClassName`.\n */\n popup: 'dial-kit-popup',\n /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n confirmationPopup: 'dial-kit-confirmation-popup',\n /** The root of an `Accordion`. */\n accordion: 'dial-kit-accordion',\n /** The breadcrumb root of a `FolderPath`. */\n folderPath: 'dial-kit-folder-path',\n\n /* ── Menus and overlays ────────────────────────────────────────────────── */\n /**\n * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n * `listClassName`.\n */\n dropdown: 'dial-kit-dropdown',\n /**\n * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n * the rows and owns their vertical padding. Present in both generations, and\n * on a submenu's own list. It is *not* the floating panel.\n */\n dropdownList: 'dial-kit-dropdown-list',\n /**\n * One row of a floating overlay: a dropdown item, a `Select` option, a\n * submenu trigger, or a submenu child. It sits on the element that draws the\n * row box — so on the wrapper, not the inner button, for a row that has a\n * `rightControl` beside it.\n */\n menuItem: 'dial-kit-menuitem',\n /**\n * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n * state.\n */\n menuItemCheck: 'dial-kit-menuitem-check',\n /** The primary icon of a `DialDropdownIcon` trigger. */\n dropdownIcon: 'dial-kit-dropdown-icon',\n /**\n * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n * chevron sits on. Absent when `showCaret` is `false`.\n */\n dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n tooltip: 'dial-kit-tooltip',\n /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n interactiveTooltip: 'dial-kit-interactive-tooltip',\n /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n /* ── Fields ────────────────────────────────────────────────────────────── */\n /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n search: 'dial-kit-search',\n /** The `PasswordInput` field, additive to `dial-kit-input`. */\n passwordInput: 'dial-kit-password-input',\n /** The `NumberInput` field, additive to `dial-kit-input`. */\n numberInput: 'dial-kit-number-input',\n /** The `TagInput` field, additive to `dial-kit-input`. */\n tagInput: 'dial-kit-tag-input',\n /** The root of a `Select`, wrapping its label, field and caption. */\n select: 'dial-kit-select',\n /** The trigger button of an `InlineSelect`. */\n inlineSelect: 'dial-kit-inline-select',\n /** The root of a `Calendar`, wrapping its label and date field. */\n calendar: 'dial-kit-calendar',\n /** The drop area of a `FileDropzone`. */\n fileDropzone: 'dial-kit-file-dropzone',\n\n /* ── Controls ──────────────────────────────────────────────────────────── */\n /** The row of a `Switch`: the control and its label. */\n switch: 'dial-kit-switch',\n /** The row of a `Checkbox`: the box and its label. */\n checkbox: 'dial-kit-checkbox',\n /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n checkboxBox: 'dial-kit-checkbox-box',\n /** The row of a `Radio`: the circle and its label. */\n radio: 'dial-kit-radio',\n /** The root of a `RadioGroup`, wrapping its label and its radios. */\n radioGroup: 'dial-kit-radio-group',\n /**\n * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n * field that opens the group.\n */\n radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n segmentedControl: 'dial-kit-segmented-control',\n /** One segment of a `SegmentedControl`. */\n segmentedControlItem: 'dial-kit-segmented-control-item',\n /** The `role=\"tablist\"` root of `Tabs`. */\n tabs: 'dial-kit-tabs',\n /**\n * One tab inside `Tabs`. The selected tab's underline keeps its own\n * `dial-kit-tab-selected-underline`.\n */\n tab: 'dial-kit-tab',\n /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n tag: 'dial-kit-tag',\n /**\n * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n * already carries.\n */\n toggleIconButton: 'dial-kit-toggle-icon-button',\n /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n closeButton: 'dial-kit-close-button',\n /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n infoButton: 'dial-kit-info-button',\n /**\n * The wrapper of a `ButtonDropdown` — its trigger carries\n * `dial-kit-base-button`.\n */\n buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
|
|
10846
|
+
"signature": "DIAL_KIT_CLASS = {\n /* ── Feedback and status ───────────────────────────────────────────────── */\n /** The `role=\"status\"` root of a `Spinner`. */\n spinner: 'dial-kit-spinner',\n /**\n * The outermost element of a `ProgressBar`: the box wrapping its label,\n * track and readout — or the track itself, which is the root when the bar\n * has neither.\n */\n progressBar: 'dial-kit-progress-bar',\n /** The root of a `Skeleton`, wrapping its avatar and text rows. */\n skeleton: 'dial-kit-skeleton',\n /**\n * The `Notification` surface. Present on every wrapper too — the toast and\n * section-message variants of error, info, success, warning, loading and\n * general all render this component.\n */\n notification: 'dial-kit-notification',\n /** The empty-state root of `NoDataContent`. */\n noDataContent: 'dial-kit-no-data-content',\n\n /* ── Text ──────────────────────────────────────────────────────────────── */\n /** The text element of a `Highlight`, which renders the matched query. */\n highlight: 'dial-kit-highlight',\n /** The caption line under a field, rendered by `CaptionText`. */\n captionText: 'dial-kit-caption-text',\n /**\n * A caption in its error variant — what `ErrorText` renders. Additive to\n * `captionText`, since one component draws both.\n */\n errorText: 'dial-kit-error-text',\n /** The `Label` root, which wraps the `label` element and its info button. */\n label: 'dial-kit-label',\n\n /* ── Containers ────────────────────────────────────────────────────────── */\n /** The `article` element of a `CardShell`. */\n cardShell: 'dial-kit-card-shell',\n /** The `aside` element of a `CollapsibleSidebar`. */\n collapsibleSidebar: 'dial-kit-collapsible-sidebar',\n /** The content box inside a `ResizableContainer`'s resize frame. */\n resizableContainer: 'dial-kit-resizable-container',\n /**\n * The `role=\"dialog\"` panel of a `Popup`. Its backdrop is reached through\n * `overlayClassName`.\n */\n popup: 'dial-kit-popup',\n /** The `Popup` panel of a `ConfirmationPopup`, additive to `popup`. */\n confirmationPopup: 'dial-kit-confirmation-popup',\n /** The root of an `Accordion`. */\n accordion: 'dial-kit-accordion',\n /** The breadcrumb root of a `FolderPath`. */\n folderPath: 'dial-kit-folder-path',\n\n /* ── Menus and overlays ────────────────────────────────────────────────── */\n /**\n * The trigger wrapper of a `Dropdown`. Its floating panel is reached through\n * `listClassName`.\n */\n dropdown: 'dial-kit-dropdown',\n /**\n * The `role=\"none\"` item list inside a dropdown overlay — the box that holds\n * the rows and owns their vertical padding. Present in both generations, and\n * on a submenu's own list. It is *not* the floating panel.\n */\n dropdownList: 'dial-kit-dropdown-list',\n /**\n * One row of a floating overlay: a dropdown item, a `Select` option, a\n * submenu trigger, or a submenu child. It sits on the element that draws the\n * row box — so on the wrapper, not the inner button, for a row that has a\n * `rightControl` beside it.\n */\n menuItem: 'dial-kit-menuitem',\n /**\n * The trailing check of a chosen `MenuItemMark.Check` row. Decorative, like\n * the glyph itself — the row's `aria-checked` / `aria-selected` carries the\n * state.\n */\n menuItemCheck: 'dial-kit-menuitem-check',\n /** The primary icon of a `DialDropdownIcon` trigger. */\n dropdownIcon: 'dial-kit-dropdown-icon',\n /**\n * The caret badge of a `DialDropdownIcon` trigger — the round plate the\n * chevron sits on. Absent when `showCaret` is `false`.\n */\n dropdownIconCaret: 'dial-kit-dropdown-icon-caret',\n /** The bubble of a `Tooltip`, rendered by `TooltipContent` into a portal. */\n tooltip: 'dial-kit-tooltip',\n /** The panel of an `InteractiveTooltip` — the one whose content takes focus. */\n interactiveTooltip: 'dial-kit-interactive-tooltip',\n /** The text element of an `EllipsisTooltip`, which is also its trigger. */\n ellipsisTooltip: 'dial-kit-ellipsis-tooltip',\n\n /* ── Fields ────────────────────────────────────────────────────────────── */\n /** The `Search` field, additive to the `dial-kit-input` its `Input` carries. */\n search: 'dial-kit-search',\n /** The `PasswordInput` field, additive to `dial-kit-input`. */\n passwordInput: 'dial-kit-password-input',\n /** The `NumberInput` field, additive to `dial-kit-input`. */\n numberInput: 'dial-kit-number-input',\n /** The `TagInput` field, additive to `dial-kit-input`. */\n tagInput: 'dial-kit-tag-input',\n /** The root of a `Select`, wrapping its label, field and caption. */\n select: 'dial-kit-select',\n /** The trigger button of an `InlineSelect`. */\n inlineSelect: 'dial-kit-inline-select',\n /** The root of a `Calendar`, wrapping its label and date field. */\n calendar: 'dial-kit-calendar',\n /** The drop area of a `FileDropzone`. */\n fileDropzone: 'dial-kit-file-dropzone',\n\n /* ── Controls ──────────────────────────────────────────────────────────── */\n /** The row of a `Switch`: the control and its label. */\n switch: 'dial-kit-switch',\n /** The row of a `Checkbox`: the box and its label. */\n checkbox: 'dial-kit-checkbox',\n /** The decorative box a `CheckboxBox` draws, in a checkbox or a menu row. */\n checkboxBox: 'dial-kit-checkbox-box',\n /** The row of a `Radio`: the circle and its label. */\n radio: 'dial-kit-radio',\n /** The root of a `RadioGroup`, wrapping its label and its radios. */\n radioGroup: 'dial-kit-radio-group',\n /**\n * The root of a `RadioGroupPopupField`, wrapping its label and the collapsed\n * field that opens the group.\n */\n radioGroupPopupField: 'dial-kit-radio-group-popup-field',\n /** The `role=\"radiogroup\"` track of a `SegmentedControl`. */\n segmentedControl: 'dial-kit-segmented-control',\n /** One segment of a `SegmentedControl`. */\n segmentedControlItem: 'dial-kit-segmented-control-item',\n /** The `role=\"tablist\"` root of `Tabs`. */\n tabs: 'dial-kit-tabs',\n /**\n * One tab inside `Tabs`. The selected tab's underline keeps its own\n * `dial-kit-tab-selected-underline`.\n */\n tab: 'dial-kit-tab',\n /**\n * The `role=\"group\"` row of a `FilterChips`. Its chips are `Tag` pills, so\n * they carry `dial-kit-tag` and have no entry of their own.\n */\n filterChips: 'dial-kit-filter-chips',\n /** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */\n tag: 'dial-kit-tag',\n /**\n * A `ToggleIconButton`, additive to the `dial-kit-base-icon-button` it\n * already carries.\n */\n toggleIconButton: 'dial-kit-toggle-icon-button',\n /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */\n closeButton: 'dial-kit-close-button',\n /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */\n infoButton: 'dial-kit-info-button',\n /**\n * The wrapper of a `ButtonDropdown` — its trigger carries\n * `dial-kit-base-button`.\n */\n buttonDropdown: 'dial-kit-button-dropdown',\n} as const"
|
|
10769
10847
|
}
|
|
10770
10848
|
]
|
|
10771
10849
|
}
|
|
@@ -130,6 +130,11 @@ const i = {
|
|
|
130
130
|
* `dial-kit-tab-selected-underline`.
|
|
131
131
|
*/
|
|
132
132
|
tab: "dial-kit-tab",
|
|
133
|
+
/**
|
|
134
|
+
* The `role="group"` row of a `FilterChips`. Its chips are `Tag` pills, so
|
|
135
|
+
* they carry `dial-kit-tag` and have no entry of their own.
|
|
136
|
+
*/
|
|
137
|
+
filterChips: "dial-kit-filter-chips",
|
|
133
138
|
/** A `Tag` pill, wherever it is rendered — including a `TagInput`'s rows. */
|
|
134
139
|
tag: "dial-kit-tag",
|
|
135
140
|
/**
|