@epam/ai-dial-builder-form 1.2.0-dev.284 → 1.2.0-dev.287

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.
Files changed (2) hide show
  1. package/index.js +133 -133
  2. package/package.json +2 -2
package/index.js CHANGED
@@ -1,15 +1,15 @@
1
1
  import { ENTITY_DESCRIPTION_MAX_LENGTH as e, ENTITY_NAME_MAX_LENGTH as t, RESIZABLE_TEXTAREA_CLASS_NAME as n, TAG_INPUT_TAG_CLASS_NAME as r, buildCssVars as i, exceedsMaxLength as a, hasControlCharacters as o, mergeClasses as s } from "@epam/ai-dial-chat-shared";
2
- import { ButtonAppearance as c, ButtonVariant as l, DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, DangerIconButton as f, ElementSize as p, GhostIconButton as m, Input as h, Label as g, LinkButton as _, NeutralButton as v, Popup as y, PrimaryButton as b, Select as x, Spinner as S, TagInput as C, Textarea as w, TextareaResize as ee } from "@epam/ai-dial-ui-kit";
2
+ import { ButtonAppearance as c, ButtonVariant as l, DIAL_ICON_SIZE as u, DIAL_KIT_ICON_STROKE as d, DangerIconButton as f, ElementSize as p, GhostButton as m, GhostIconButton as h, Input as g, Label as _, LinkButton as v, NeutralButton as y, Popup as b, PrimaryButton as x, Select as S, Spinner as C, TagInput as w, Textarea as ee, TextareaResize as te } from "@epam/ai-dial-ui-kit";
3
3
  import { Fragment as T, jsx as E, jsxs as D } from "react/jsx-runtime";
4
4
  import { IconArrowLeft as O, IconArrowNarrowLeft as k, IconPhoto as A, IconPlus as j, IconTrashX as M } from "@tabler/icons-react";
5
- import { Suspense as N, memo as P, useCallback as F, useEffect as te, useId as ne, useLayoutEffect as re, useMemo as I, useRef as L, useState as R } from "react";
5
+ import { Suspense as N, memo as P, useCallback as F, useEffect as ne, useId as re, useLayoutEffect as I, useMemo as L, useRef as R, useState as z } from "react";
6
6
  //#region src/components/BuilderFormActions/BuilderFormActions.tsx
7
- var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: o }) => /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(v, {
7
+ var B = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubmitDisabled: i = !1, isSubmitting: a = !1, buttonClassName: o }) => /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(y, {
8
8
  label: e.cancelButtonLabel,
9
9
  onClick: t,
10
10
  disabled: r,
11
11
  className: o
12
- }), /* @__PURE__ */ E(b, {
12
+ }), /* @__PURE__ */ E(x, {
13
13
  label: e.submitButtonLabel,
14
14
  onClick: n,
15
15
  disabled: i,
@@ -17,20 +17,20 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
17
17
  className: o,
18
18
  iconBefore: a ? /* @__PURE__ */ E("span", {
19
19
  "aria-hidden": !0,
20
- children: /* @__PURE__ */ E(S, { size: u.SM })
20
+ children: /* @__PURE__ */ E(C, { size: u.SM })
21
21
  }) : void 0
22
- })] }), B = {
22
+ })] }), V = {
23
23
  body: "_body_1xd7h_2",
24
24
  sideColumn: "_sideColumn_1xd7h_6",
25
25
  reservedColumn: "_reservedColumn_1xd7h_10"
26
- }, V = s("flex flex-col desktop:min-h-0 desktop:overflow-y-auto", B.sideColumn), H = ({ left: e, children: t, metadata: n, layout: r }) => {
26
+ }, H = s("flex flex-col desktop:min-h-0 desktop:overflow-y-auto", V.sideColumn), ie = ({ left: e, children: t, metadata: n, layout: r }) => {
27
27
  let i = e != null && n == null && r?.reserveEndColumn !== !1, a = r ? { "--bfb-side-column-width": r.sideColumnWidth ?? "400px" } : void 0, o = r ? { columnGap: r.columnGap ?? "0px" } : void 0;
28
28
  return /* @__PURE__ */ D("div", {
29
- className: s("flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden", B.body),
29
+ className: s("flex min-h-0 min-w-0 flex-1 flex-col overflow-y-auto desktop:flex-row desktop:overflow-hidden", V.body),
30
30
  style: o,
31
31
  children: [
32
32
  e != null && /* @__PURE__ */ E("div", {
33
- className: V,
33
+ className: H,
34
34
  style: a,
35
35
  children: e
36
36
  }),
@@ -39,14 +39,14 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
39
39
  children: t
40
40
  }),
41
41
  n != null && /* @__PURE__ */ E("div", {
42
- className: V,
42
+ className: H,
43
43
  style: a,
44
44
  children: n
45
45
  }),
46
46
  i && /* @__PURE__ */ E("div", {
47
47
  "aria-hidden": !0,
48
48
  style: a,
49
- className: s(B.reservedColumn, B.sideColumn)
49
+ className: s(V.reservedColumn, V.sideColumn)
50
50
  })
51
51
  ]
52
52
  });
@@ -54,18 +54,18 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
54
54
  header: "_header_lon83_4",
55
55
  actions: "_actions_lon83_18",
56
56
  title: "_title_lon83_27"
57
- }, W = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, styles: f }) => {
58
- let { colors: p, typography: h } = f ?? {}, g = h?.fontClassName ?? "dial-h1-text", _ = !!h?.fontClassName;
57
+ }, ae = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, styles: f }) => {
58
+ let { colors: p, typography: m } = f ?? {}, g = m?.fontClassName ?? "dial-h1-text", _ = !!m?.fontClassName;
59
59
  return /* @__PURE__ */ D("div", {
60
60
  style: i({
61
61
  "--bfh-border": p?.borderColor,
62
- "--bfh-font-family": _ ? void 0 : h?.fontFamily
62
+ "--bfh-font-family": _ ? void 0 : m?.fontFamily
63
63
  }),
64
64
  className: s("flex min-h-16 shrink-0 items-center justify-between gap-2 px-4 py-2 desktop:h-16 desktop:flex-nowrap desktop:px-8 desktop:py-0", U.header),
65
65
  children: [
66
66
  /* @__PURE__ */ D("div", {
67
67
  className: "flex min-w-0 flex-1 items-center gap-2",
68
- children: [/* @__PURE__ */ E(m, {
68
+ children: [/* @__PURE__ */ E(h, {
69
69
  icon: l === void 0 ? /* @__PURE__ */ E(O, {
70
70
  size: u.LG,
71
71
  className: "rtl:scale-x-[-1]",
@@ -81,7 +81,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
81
81
  }),
82
82
  /* @__PURE__ */ E("div", {
83
83
  className: s("items-center gap-2", U.actions),
84
- children: /* @__PURE__ */ E(z, {
84
+ children: /* @__PURE__ */ E(B, {
85
85
  labels: e,
86
86
  onCancel: n,
87
87
  onSubmit: r,
@@ -98,19 +98,19 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
98
98
  })
99
99
  ]
100
100
  });
101
- }, G = {
101
+ }, W = {
102
102
  container: "_container_k1awi_1",
103
103
  footer: "_footer_k1awi_10"
104
- }, ie = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, className: u, left: d, children: f, metadata: p, layout: m, styles: h }) => {
104
+ }, G = ({ labels: e, onBack: t, onCancel: n, onSubmit: r, isCancelDisabled: a = !1, isSubmitDisabled: o = !1, isSubmitting: c = !1, backIcon: l, className: u, left: d, children: f, metadata: p, layout: m, styles: h }) => {
105
105
  let { colors: g, header: _, cssVars: v } = h ?? {};
106
106
  return /* @__PURE__ */ D("div", {
107
107
  style: {
108
108
  ...i({ "--bfc-bg": g?.background }),
109
109
  ...v
110
110
  },
111
- className: s("flex h-full min-h-0 w-full flex-col overflow-hidden", u, G.container),
111
+ className: s("flex h-full min-h-0 w-full flex-col overflow-hidden", u, W.container),
112
112
  children: [
113
- /* @__PURE__ */ E(W, {
113
+ /* @__PURE__ */ E(ae, {
114
114
  labels: e,
115
115
  onBack: t,
116
116
  onCancel: n,
@@ -121,15 +121,15 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
121
121
  backIcon: l,
122
122
  styles: _
123
123
  }),
124
- /* @__PURE__ */ E(H, {
124
+ /* @__PURE__ */ E(ie, {
125
125
  left: d,
126
126
  metadata: p,
127
127
  layout: m,
128
128
  children: f
129
129
  }),
130
130
  /* @__PURE__ */ E("div", {
131
- className: s("sticky bottom-0 z-10 items-center gap-2 p-3", G.footer),
132
- children: /* @__PURE__ */ E(z, {
131
+ className: s("sticky bottom-0 z-10 items-center gap-2 p-3", W.footer),
132
+ children: /* @__PURE__ */ E(B, {
133
133
  labels: e,
134
134
  onCancel: n,
135
135
  onSubmit: r,
@@ -166,8 +166,8 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
166
166
  headerBorder: "_headerBorder_1kidu_1",
167
167
  footerBorder: "_footerBorder_1kidu_5",
168
168
  sidebarBorder: "_sidebarBorder_1kidu_9"
169
- }, ae = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: a, rightContent: o, isSaving: c = !1, labels: l, styles: f, dir: p }) => {
170
- let h = ne(), g = c ? l?.savingStatusLabel ?? "Saving" : "", _ = i({
169
+ }, oe = ({ title: e, onBack: t, backAriaLabel: n = "Back", actions: r, leftContent: a, rightContent: o, isSaving: c = !1, labels: l, styles: f, dir: p }) => {
170
+ let m = re(), g = c ? l?.savingStatusLabel ?? "Saving" : "", _ = i({
171
171
  "--el-header-border-color": f?.colors?.headerBorderColor,
172
172
  "--el-sidebar-border-color": f?.colors?.sidebarBorderColor
173
173
  });
@@ -180,14 +180,14 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
180
180
  role: "status",
181
181
  "aria-live": "polite",
182
182
  className: "sr-only",
183
- id: h,
183
+ id: m,
184
184
  children: g
185
185
  }),
186
186
  /* @__PURE__ */ D("div", {
187
187
  className: s("flex items-center justify-between gap-2 border-b px-4 py-2 desktop:px-8 desktop:pb-3 desktop:pt-3", Y.headerBorder),
188
188
  children: [/* @__PURE__ */ D("div", {
189
189
  className: "flex min-w-0 flex-1 items-center gap-2",
190
- children: [/* @__PURE__ */ E(m, {
190
+ children: [/* @__PURE__ */ E(h, {
191
191
  icon: /* @__PURE__ */ E(k, {
192
192
  size: u.LG,
193
193
  stroke: d,
@@ -225,7 +225,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
225
225
  box: "_box_c9as8_1",
226
226
  icon: "_icon_c9as8_6",
227
227
  caption: "_caption_c9as8_10"
228
- }, oe = ({ label: e, avatarUrl: t, avatarAlt: n = "", addAvatarLabel: r = "Add avatar", captionText: a = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: o, styles: c, className: l }) => {
228
+ }, se = ({ label: e, avatarUrl: t, avatarAlt: n = "", addAvatarLabel: r = "Add avatar", captionText: a = "PNG, JPG or SVG (max 1 MB)", onAddAvatarClick: o, styles: c, className: l }) => {
229
229
  let f = i({
230
230
  "--aa-box-bg": c?.colors?.boxBackgroundColor,
231
231
  "--aa-box-border": c?.colors?.boxBorderColor,
@@ -235,7 +235,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
235
235
  return /* @__PURE__ */ D("div", {
236
236
  className: s("flex flex-col gap-2", l),
237
237
  style: f,
238
- children: [/* @__PURE__ */ E(g, { label: e }), /* @__PURE__ */ D("div", {
238
+ children: [/* @__PURE__ */ E(_, { label: e }), /* @__PURE__ */ D("div", {
239
239
  className: "flex items-start gap-3",
240
240
  children: [/* @__PURE__ */ E("div", {
241
241
  className: s("flex h-16 w-16 shrink-0 items-center justify-center overflow-hidden rounded-lg border", X.box),
@@ -251,7 +251,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
251
251
  })
252
252
  }), /* @__PURE__ */ D("div", {
253
253
  className: "flex flex-col gap-3",
254
- children: [/* @__PURE__ */ E(_, {
254
+ children: [/* @__PURE__ */ E(m, {
255
255
  size: p.Small,
256
256
  iconBefore: /* @__PURE__ */ E(j, {
257
257
  size: u.SM,
@@ -268,7 +268,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
268
268
  })]
269
269
  })]
270
270
  });
271
- }, se = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
271
+ }, ce = ({ isOpen: e, onClose: t, onAttach: n, bucket: r, FileManagerModal: i, allowedMimeTypes: a, maxFileSizeBytes: o, labels: s }) => {
272
272
  let c = F((e) => e.length === 1 ? s.deleteConfirmTitleSingle : s.deleteConfirmTitleMultiple, [s.deleteConfirmTitleSingle, s.deleteConfirmTitleMultiple]), l = F((e) => /* @__PURE__ */ E("div", {
273
273
  className: "dial-small-text px-6 py-3",
274
274
  children: /* @__PURE__ */ E("p", {
@@ -337,69 +337,69 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
337
337
  });
338
338
  }, Z = /* @__PURE__ */ function(e) {
339
339
  return e.Avatar = "avatar", e.Name = "name", e.Version = "version", e.Description = "description", e.Locales = "locales", e.Tags = "tags", e;
340
- }({}), ce = [
340
+ }({}), le = [
341
341
  "avatar",
342
342
  "name",
343
343
  "version",
344
344
  "description",
345
345
  "locales",
346
346
  "tags"
347
- ], le = (e, t, n) => ({
347
+ ], ue = (e, t, n) => ({
348
348
  id: e,
349
349
  language: n.find((e) => !t.has(e.code))?.code ?? "",
350
350
  name: "",
351
351
  description: ""
352
- }), ue = ({ value: e, onChange: t, availableLocaleOptions: r = [], labels: i, className: a, summaryClassName: o = "dial-body-text text-secondary", rowLabelClassName: m = "dial-tiny-lead-text text-secondary" }) => {
353
- let { summaryLabel: g, addLabel: v, editLabel: b, popupTitle: S, addLocaleLabel: C, localeRowLabel: T = "Locale", languageLabel: O, nameLabel: k, namePlaceholder: A, descriptionLabel: N, descriptionPlaceholder: P, deleteAriaLabel: F, cancelLabel: ne = "Cancel", saveLabel: re = "Save" } = i, [I, z] = R(!1), [B, V] = R([]), H = L(0);
354
- te(() => {
355
- I && V(e.length > 0 ? e : [le(`locale-row-${++H.current}`, /* @__PURE__ */ new Set(), r)]);
352
+ }), de = ({ value: e, onChange: t, availableLocaleOptions: r = [], labels: i, className: a, summaryClassName: o = "dial-body-text text-secondary", rowLabelClassName: m = "dial-tiny-lead-text text-secondary" }) => {
353
+ let { summaryLabel: h, addLabel: _, editLabel: y, popupTitle: x, addLocaleLabel: C, localeRowLabel: w = "Locale", languageLabel: T, nameLabel: O, namePlaceholder: k, descriptionLabel: A, descriptionPlaceholder: N, deleteAriaLabel: P, cancelLabel: F = "Cancel", saveLabel: re = "Save" } = i, [I, L] = z(!1), [B, V] = z([]), H = R(0);
354
+ ne(() => {
355
+ I && V(e.length > 0 ? e : [ue(`locale-row-${++H.current}`, /* @__PURE__ */ new Set(), r)]);
356
356
  }, [
357
357
  I,
358
358
  e,
359
359
  r
360
360
  ]);
361
- let U = () => z(!0), W = () => z(!1), G = () => {
362
- t(B.filter((e) => e.language && e.name)), z(!1);
363
- }, ie = () => {
361
+ let ie = () => L(!0), U = () => L(!1), ae = () => {
362
+ t(B.filter((e) => e.language && e.name)), L(!1);
363
+ }, W = () => {
364
364
  let e = new Set(B.map((e) => e.language).filter(Boolean));
365
- V((t) => [...t, le(`locale-row-${++H.current}`, e, r)]);
366
- }, K = (e, t) => {
365
+ V((t) => [...t, ue(`locale-row-${++H.current}`, e, r)]);
366
+ }, G = (e, t) => {
367
367
  V((n) => n.map((n) => n.id === e ? {
368
368
  ...n,
369
369
  ...t
370
370
  } : n));
371
- }, q = (e) => {
371
+ }, K = (e) => {
372
372
  V((t) => t.filter((t) => t.id !== e));
373
- }, J = (e) => r.find((t) => t.code === e)?.label ?? e.toUpperCase(), Y = B.some((e) => !e.language || !e.name);
373
+ }, q = (e) => r.find((t) => t.code === e)?.label ?? e.toUpperCase(), J = B.some((e) => !e.language || !e.name);
374
374
  return r.length === 0 ? null : /* @__PURE__ */ D("div", {
375
375
  className: s("flex items-center gap-2", a),
376
376
  children: [
377
377
  e.length > 0 && /* @__PURE__ */ E("span", {
378
378
  className: o,
379
- children: `${g}: ${e.map((e) => `[${J(e.language)}]`).join(", ")}`
379
+ children: `${h}: ${e.map((e) => `[${q(e.language)}]`).join(", ")}`
380
380
  }),
381
- /* @__PURE__ */ E(_, {
382
- label: e.length > 0 ? b : v,
381
+ /* @__PURE__ */ E(v, {
382
+ label: e.length > 0 ? y : _,
383
383
  iconBefore: /* @__PURE__ */ E(j, {
384
384
  size: u.SM,
385
385
  "aria-hidden": !0,
386
386
  stroke: d
387
387
  }),
388
388
  className: "!px-0",
389
- onClick: U
389
+ onClick: ie
390
390
  }),
391
- /* @__PURE__ */ E(y, {
391
+ /* @__PURE__ */ E(b, {
392
392
  open: I,
393
- header: S,
394
- onClose: W,
393
+ header: x,
394
+ onClose: U,
395
395
  mainButtons: [{
396
- label: ne,
397
- onClick: W
396
+ label: F,
397
+ onClick: U
398
398
  }, {
399
399
  label: re,
400
400
  variant: l.Primary,
401
- disabled: Y,
402
- onClick: G
401
+ disabled: J,
402
+ onClick: ae
403
403
  }],
404
404
  children: /* @__PURE__ */ D("div", {
405
405
  className: "flex flex-col gap-8 px-6 py-3",
@@ -412,7 +412,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
412
412
  children: [/* @__PURE__ */ D("span", {
413
413
  className: m,
414
414
  children: [
415
- T,
415
+ w,
416
416
  " ",
417
417
  t + 1
418
418
  ]
@@ -424,19 +424,19 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
424
424
  "aria-hidden": !0,
425
425
  stroke: d
426
426
  }),
427
- "aria-label": `${F} ${t + 1}`,
428
- onClick: () => q(e.id)
427
+ "aria-label": `${P} ${t + 1}`,
428
+ onClick: () => K(e.id)
429
429
  })]
430
430
  }), /* @__PURE__ */ D("div", {
431
431
  role: "group",
432
- "aria-label": `${T} ${t + 1}`,
432
+ "aria-label": `${w} ${t + 1}`,
433
433
  className: "flex flex-col gap-5",
434
434
  children: [/* @__PURE__ */ D("div", {
435
435
  className: "flex flex-col gap-5 desktop:flex-row desktop:items-start",
436
- children: [/* @__PURE__ */ E(x, {
436
+ children: [/* @__PURE__ */ E(S, {
437
437
  id: `${e.id}-language`,
438
438
  labelProps: {
439
- label: O,
439
+ label: T,
440
440
  required: !0
441
441
  },
442
442
  className: "desktop:shrink-0 desktop:basis-40",
@@ -446,31 +446,31 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
446
446
  disabled: i.has(e.code)
447
447
  })),
448
448
  value: e.language,
449
- onChange: (t) => K(e.id, { language: t })
450
- }), /* @__PURE__ */ E(h, {
449
+ onChange: (t) => G(e.id, { language: t })
450
+ }), /* @__PURE__ */ E(g, {
451
451
  id: `${e.id}-name`,
452
452
  containerClassName: "min-w-0 flex-1",
453
453
  required: !0,
454
454
  value: e.name,
455
- onChange: (t) => K(e.id, { name: t ?? "" }),
455
+ onChange: (t) => G(e.id, { name: t ?? "" }),
456
456
  labelProps: {
457
- label: k,
457
+ label: O,
458
458
  required: !0
459
459
  },
460
- placeholder: A
460
+ placeholder: k
461
461
  })]
462
- }), /* @__PURE__ */ E(w, {
462
+ }), /* @__PURE__ */ E(ee, {
463
463
  id: `${e.id}-description`,
464
464
  className: n,
465
- resize: ee.Vertical,
465
+ resize: te.Vertical,
466
466
  value: e.description,
467
- onChange: (t) => K(e.id, { description: t }),
468
- labelProps: { label: N },
469
- placeholder: P
467
+ onChange: (t) => G(e.id, { description: t }),
468
+ labelProps: { label: A },
469
+ placeholder: N
470
470
  })]
471
471
  })]
472
472
  }, e.id);
473
- }), /* @__PURE__ */ E(_, {
473
+ }), /* @__PURE__ */ E(v, {
474
474
  label: C,
475
475
  iconBefore: /* @__PURE__ */ E(j, {
476
476
  size: u.SM,
@@ -478,33 +478,33 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
478
478
  stroke: d
479
479
  }),
480
480
  className: "self-start",
481
- onClick: ie,
481
+ onClick: W,
482
482
  disabled: B.length >= r.length
483
483
  })]
484
484
  })
485
485
  })
486
486
  ]
487
487
  });
488
- }, de = "Add tags, comma separated", fe = "deployment-creation-form-description", pe = ({ values: e, errors: t, onChange: i, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], fields: p = ce, isNameReadOnly: m = !1, nameCaption: g, isDescriptionRequired: _ = !1, renderDescription: v, focusRequestKey: y }) => {
489
- let b = L(null), x = L(null), S = L(null), T = L(!1), O = (e) => p.includes(e), k = O(Z.Name), A = O(Z.Version), j = !!(t.name || t.version || t.description), M = L(y);
490
- te(() => {
488
+ }, fe = "Add tags, comma separated", pe = "deployment-creation-form-description", me = ({ values: e, errors: t, onChange: i, onNameBlur: a, onVersionBlur: o, iconPreviewUrl: c, onAddAvatarClick: l, labels: u, styles: d, availableLocaleOptions: f = [], fields: p = le, isNameReadOnly: m = !1, nameCaption: h, isDescriptionRequired: _ = !1, renderDescription: v, focusRequestKey: y }) => {
489
+ let b = R(null), x = R(null), S = R(null), C = R(!1), T = (e) => p.includes(e), O = T(Z.Name), k = T(Z.Version), A = !!(t.name || t.version || t.description), j = R(y);
490
+ ne(() => {
491
491
  let e = () => {
492
492
  t.name ? b.current?.focus() : t.version ? x.current?.focus() : t.description && S.current?.focus();
493
493
  };
494
494
  if (y !== void 0) {
495
- y !== M.current && (M.current = y, e());
495
+ y !== j.current && (j.current = y, e());
496
496
  return;
497
497
  }
498
- j && !T.current && e(), T.current = j;
498
+ A && !C.current && e(), C.current = A;
499
499
  }, [
500
500
  y,
501
- j,
501
+ A,
502
502
  t.name,
503
503
  t.version,
504
504
  t.description
505
505
  ]);
506
- let N = /* @__PURE__ */ E(w, {
507
- id: fe,
506
+ let M = /* @__PURE__ */ E(ee, {
507
+ id: pe,
508
508
  ref: S,
509
509
  value: e.description,
510
510
  onChange: (e) => i({ description: e }),
@@ -518,14 +518,14 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
518
518
  invalid: !!t.description,
519
519
  containerClassName: v ? void 0 : d?.field,
520
520
  className: n,
521
- resize: ee.Vertical
521
+ resize: te.Vertical
522
522
  });
523
523
  return /* @__PURE__ */ D("div", {
524
524
  role: u.ariaLabel ? "group" : void 0,
525
525
  "aria-label": u.ariaLabel,
526
526
  className: s("flex flex-col gap-4", d?.root),
527
527
  children: [
528
- O(Z.Avatar) && /* @__PURE__ */ E(oe, {
528
+ T(Z.Avatar) && /* @__PURE__ */ E(se, {
529
529
  label: u.iconUrl.label,
530
530
  avatarUrl: c,
531
531
  addAvatarLabel: u.iconUrl.addAvatarLabel,
@@ -533,9 +533,9 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
533
533
  onAddAvatarClick: l,
534
534
  className: d?.field
535
535
  }),
536
- (k || A) && /* @__PURE__ */ D("div", {
536
+ (O || k) && /* @__PURE__ */ D("div", {
537
537
  className: s("flex items-start gap-4", d?.field),
538
- children: [k && /* @__PURE__ */ E(h, {
538
+ children: [O && /* @__PURE__ */ E(g, {
539
539
  id: "deployment-creation-form-name",
540
540
  inputRef: b,
541
541
  value: e.name,
@@ -547,11 +547,11 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
547
547
  required: !0
548
548
  },
549
549
  placeholder: u.name.placeholder,
550
- caption: g,
550
+ caption: h,
551
551
  error: t.name || void 0,
552
552
  invalid: !!t.name,
553
- containerClassName: A ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
554
- }), A && /* @__PURE__ */ E(h, {
553
+ containerClassName: k ? "min-w-0 basis-0 grow-[2]" : "min-w-0 flex-1"
554
+ }), k && /* @__PURE__ */ E(g, {
555
555
  id: "deployment-creation-form-version",
556
556
  inputRef: x,
557
557
  value: e.version,
@@ -561,26 +561,26 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
561
561
  placeholder: u.version.placeholder,
562
562
  error: t.version || void 0,
563
563
  invalid: !!t.version,
564
- containerClassName: k ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
564
+ containerClassName: O ? "min-w-0 basis-0 grow-[1]" : "min-w-0 flex-1"
565
565
  })]
566
566
  }),
567
- O(Z.Description) && (v ? /* @__PURE__ */ E("div", {
567
+ T(Z.Description) && (v ? /* @__PURE__ */ E("div", {
568
568
  className: d?.field,
569
- children: v(N, fe)
570
- }) : N),
571
- O(Z.Locales) && /* @__PURE__ */ E(ue, {
569
+ children: v(M, pe)
570
+ }) : M),
571
+ T(Z.Locales) && /* @__PURE__ */ E(de, {
572
572
  value: e.otherLocales,
573
573
  onChange: (e) => i({ otherLocales: e }),
574
574
  availableLocaleOptions: f,
575
575
  labels: u.otherLocales,
576
576
  className: d?.field
577
577
  }),
578
- O(Z.Tags) && /* @__PURE__ */ E("div", {
578
+ T(Z.Tags) && /* @__PURE__ */ E("div", {
579
579
  className: d?.field,
580
- children: /* @__PURE__ */ E(C, {
580
+ children: /* @__PURE__ */ E(w, {
581
581
  id: "deployment-creation-form-topics",
582
582
  labelProps: { label: u.topics.label },
583
- placeholder: u.topics.placeholder ?? de,
583
+ placeholder: u.topics.placeholder ?? fe,
584
584
  value: e.topics,
585
585
  onChange: (e) => i({ topics: e }),
586
586
  tagClassName: r
@@ -588,25 +588,25 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
588
588
  })
589
589
  ]
590
590
  });
591
- }, me = "border-0 p-4 desktop:p-6", he = "desktop:flex-1", ge = "px-4 pt-4 desktop:px-6 desktop:pt-6", _e = P(({ title: e, onBack: t, onCancel: n, onSubmit: r, submitLabel: i, isSubmitting: a = !1, isSubmitDisabled: o = !1, extraActions: c, hideStandardActions: l = !1, metadata: u, metadataTitle: d, metadataFooter: f, setup: p, setupTitle: m, alert: h, metadataSectionClassName: g, setupSectionClassName: _, labels: y, styles: x, dir: S }) => {
591
+ }, he = "border-0 p-4 desktop:p-6", ge = "desktop:flex-1", _e = "px-4 pt-4 desktop:px-6 desktop:pt-6", ve = P(({ title: e, onBack: t, onCancel: n, onSubmit: r, submitLabel: i, isSubmitting: a = !1, isSubmitDisabled: o = !1, extraActions: c, hideStandardActions: l = !1, metadata: u, metadataTitle: d, metadataFooter: f, setup: p, setupTitle: m, alert: h, metadataSectionClassName: g, setupSectionClassName: _, labels: v, styles: b, dir: S }) => {
592
592
  let C = h == null ? null : /* @__PURE__ */ E("div", {
593
593
  role: "alert",
594
- className: ge,
594
+ className: _e,
595
595
  children: h
596
596
  }), w = p != null;
597
- return /* @__PURE__ */ E(ae, {
597
+ return /* @__PURE__ */ E(oe, {
598
598
  title: e,
599
599
  onBack: t,
600
- backAriaLabel: y?.backAriaLabel ?? "Back",
600
+ backAriaLabel: v?.backAriaLabel ?? "Back",
601
601
  isSaving: a,
602
- labels: { savingStatusLabel: y?.savingStatusLabel ?? "Saving" },
603
- styles: x?.layout,
602
+ labels: { savingStatusLabel: v?.savingStatusLabel ?? "Saving" },
603
+ styles: b?.layout,
604
604
  dir: S,
605
- actions: /* @__PURE__ */ D(T, { children: [c, !l && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(v, {
606
- label: y?.cancelLabel ?? "Cancel",
605
+ actions: /* @__PURE__ */ D(T, { children: [c, !l && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(y, {
606
+ label: v?.cancelLabel ?? "Cancel",
607
607
  disabled: a,
608
608
  onClick: n
609
- }), /* @__PURE__ */ E(b, {
609
+ }), /* @__PURE__ */ E(x, {
610
610
  label: i,
611
611
  disabled: a || o,
612
612
  onClick: r
@@ -614,21 +614,21 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
614
614
  leftContent: /* @__PURE__ */ D(T, { children: [
615
615
  !w && C,
616
616
  /* @__PURE__ */ E(J, {
617
- title: d === null ? void 0 : d ?? y?.metadataTitle ?? "Metadata",
618
- styles: x?.section,
619
- className: s(me, g, K.metadataSection),
617
+ title: d === null ? void 0 : d ?? v?.metadataTitle ?? "Metadata",
618
+ styles: b?.section,
619
+ className: s(he, g, K.metadataSection),
620
620
  children: u
621
621
  }),
622
622
  f
623
623
  ] }),
624
624
  rightContent: w ? /* @__PURE__ */ D(T, { children: [C, /* @__PURE__ */ E(J, {
625
- title: m ?? y?.setupTitle ?? "Setup",
626
- styles: x?.section,
627
- className: s(me, he, _, K.setupSection),
625
+ title: m ?? v?.setupTitle ?? "Setup",
626
+ styles: b?.section,
627
+ className: s(he, ge, _, K.setupSection),
628
628
  children: p
629
629
  })] }) : void 0
630
630
  });
631
- }), ve = {
631
+ }), ye = {
632
632
  name: {
633
633
  label: "Name",
634
634
  placeholder: "Enter name"
@@ -667,7 +667,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
667
667
  saveLabel: "Save"
668
668
  },
669
669
  ariaLabel: "Metadata"
670
- }, ye = {
670
+ }, be = {
671
671
  title: "Add avatar",
672
672
  attachLabel: "Attach",
673
673
  emptyTitle: "This folder is empty",
@@ -691,12 +691,12 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
691
691
  deleteConfirmItemsLabel: "items?",
692
692
  deleteConfirmLabel: "Delete",
693
693
  deleteCancelLabel: "Cancel"
694
- }, be = P(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, fields: s = ce, isNameReadOnly: c, nameCaption: l, isDescriptionRequired: u, renderDescription: d, focusRequestKey: f, labels: p }) => {
695
- let [m, h] = R(!1), g = I(() => a ? s : s.filter((e) => e !== Z.Avatar), [a, s]), _ = e.iconUrl, v = a?.resolveIconUrl, y = I(() => v ? v(_) : void 0, [_, v]), b = F(() => h(!0), []), x = F(() => h(!1), []), S = a?.resolveAttachedIconUrl, C = F((e) => {
694
+ }, xe = P(({ values: e, errors: t, onChange: n, onNameBlur: r, onVersionBlur: i, avatarPicker: a, availableLocaleOptions: o, fields: s = le, isNameReadOnly: c, nameCaption: l, isDescriptionRequired: u, renderDescription: d, focusRequestKey: f, labels: p }) => {
695
+ let [m, h] = z(!1), g = L(() => a ? s : s.filter((e) => e !== Z.Avatar), [a, s]), _ = e.iconUrl, v = a?.resolveIconUrl, y = L(() => v ? v(_) : void 0, [_, v]), b = F(() => h(!0), []), x = F(() => h(!1), []), S = a?.resolveAttachedIconUrl, C = F((e) => {
696
696
  let t = S?.(e);
697
697
  t && n({ iconUrl: t }), h(!1);
698
698
  }, [n, S]);
699
- return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(pe, {
699
+ return /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ E(me, {
700
700
  values: e,
701
701
  errors: t,
702
702
  onChange: n,
@@ -704,7 +704,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
704
704
  onVersionBlur: i,
705
705
  iconPreviewUrl: y,
706
706
  onAddAvatarClick: b,
707
- labels: p?.form ?? ve,
707
+ labels: p?.form ?? ye,
708
708
  availableLocaleOptions: o,
709
709
  fields: g,
710
710
  isNameReadOnly: c,
@@ -712,7 +712,7 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
712
712
  isDescriptionRequired: u,
713
713
  renderDescription: d,
714
714
  focusRequestKey: f
715
- }), a && /* @__PURE__ */ E(se, {
715
+ }), a && /* @__PURE__ */ E(ce, {
716
716
  isOpen: m,
717
717
  onClose: x,
718
718
  onAttach: C,
@@ -720,35 +720,35 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
720
720
  FileManagerModal: a.FileManagerModal,
721
721
  allowedMimeTypes: a.allowedMimeTypes,
722
722
  maxFileSizeBytes: a.maxFileSizeBytes,
723
- labels: p?.avatarPicker ?? ye
723
+ labels: p?.avatarPicker ?? be
724
724
  })] });
725
725
  }), Q = /* @__PURE__ */ function(e) {
726
726
  return e.Required = "required", e.InvalidFormat = "invalid-format", e.TooLong = "too-long", e.ControlCharacters = "control-characters", e;
727
- }({}), xe = (e, t) => e.length === t.length && e.every((e, n) => e.id === t[n].id && e.language === t[n].language && e.name === t[n].name && e.description === t[n].description), Se = (e, t) => e.name === t.name && e.description === t.description && e.iconUrl === t.iconUrl && e.version === t.version && e.topics.length === t.topics.length && e.topics.every((e, n) => e === t.topics[n]) && xe(e.otherLocales, t.otherLocales), Ce = (e) => Object.values(e).every((e) => e == null), we = /^[a-zA-Z0-9 _.-]+$/, Te = /^[a-zA-Z0-9._-]+$/, Ee = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*)?(?:\+[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*)?$/, De = (n, r = {}) => {
727
+ }({}), Se = (e, t) => e.length === t.length && e.every((e, n) => e.id === t[n].id && e.language === t[n].language && e.name === t[n].name && e.description === t[n].description), Ce = (e, t) => e.name === t.name && e.description === t.description && e.iconUrl === t.iconUrl && e.version === t.version && e.topics.length === t.topics.length && e.topics.every((e, n) => e === t.topics[n]) && Se(e.otherLocales, t.otherLocales), we = (e) => Object.values(e).every((e) => e == null), Te = /^[a-zA-Z0-9 _.-]+$/, Ee = /^[a-zA-Z0-9._-]+$/, De = /^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*)(?:\.(?:0|[1-9]\d*|\d*[a-zA-Z-][0-9a-zA-Z-]*))*)?(?:\+[0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*)?$/, Oe = (n, r = {}) => {
728
728
  let i = {}, s = n.name.trim();
729
- s ? a(s, t) ? i.name = Q.TooLong : r.validateNamePattern && !we.test(s) ? i.name = Q.InvalidFormat : o(s) && (i.name = Q.ControlCharacters) : i.name = Q.Required, a(n.description, e) && (i.description = Q.TooLong);
729
+ s ? a(s, t) ? i.name = Q.TooLong : r.validateNamePattern && !Te.test(s) ? i.name = Q.InvalidFormat : o(s) && (i.name = Q.ControlCharacters) : i.name = Q.Required, a(n.description, e) && (i.description = Q.TooLong);
730
730
  let c = n.version.trim();
731
- return r.validateVersionPattern && c && ((r.validateVersionPattern instanceof RegExp ? r.validateVersionPattern : Te).test(c) || (i.version = Q.InvalidFormat)), i;
732
- }, Oe = new Set([Q.TooLong, Q.ControlCharacters]), $ = (e, t) => ({
731
+ return r.validateVersionPattern && c && ((r.validateVersionPattern instanceof RegExp ? r.validateVersionPattern : Ee).test(c) || (i.version = Q.InvalidFormat)), i;
732
+ }, ke = new Set([Q.TooLong, Q.ControlCharacters]), $ = (e, t) => ({
733
733
  reseedKey: t,
734
734
  values: e,
735
735
  baseline: e,
736
736
  touched: {},
737
737
  hasAttemptedSubmit: !1,
738
738
  submitAttemptCount: 0
739
- }), ke = ({ initialValues: e, validationOptions: t, reseedKey: n }) => {
740
- let [r, i] = R(() => $(e, n));
739
+ }), Ae = ({ initialValues: e, validationOptions: t, reseedKey: n }) => {
740
+ let [r, i] = z(() => $(e, n));
741
741
  r.reseedKey !== n && i($(e, n));
742
- let a = t?.validateNamePattern, o = t?.validateVersionPattern, s = I(() => De(r.values, {
742
+ let a = t?.validateNamePattern, o = t?.validateVersionPattern, s = L(() => Oe(r.values, {
743
743
  validateNamePattern: a,
744
744
  validateVersionPattern: o
745
745
  }), [
746
746
  r.values,
747
747
  a,
748
748
  o
749
- ]), c = I(() => {
749
+ ]), c = L(() => {
750
750
  if (r.hasAttemptedSubmit) return s;
751
- let e = (e, t) => e && (t || Oe.has(e)) ? e : void 0;
751
+ let e = (e, t) => e && (t || ke.has(e)) ? e : void 0;
752
752
  return {
753
753
  name: e(s.name, r.touched[Z.Name]),
754
754
  version: e(s.version, r.touched[Z.Version]),
@@ -758,8 +758,8 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
758
758
  s,
759
759
  r.hasAttemptedSubmit,
760
760
  r.touched
761
- ]), l = L(s), u = L(e);
762
- re(() => {
761
+ ]), l = R(s), u = R(e);
762
+ I(() => {
763
763
  l.current = s, u.current = e;
764
764
  });
765
765
  let d = F((e) => i((t) => ({
@@ -778,8 +778,8 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
778
778
  ...e,
779
779
  hasAttemptedSubmit: !0,
780
780
  submitAttemptCount: e.submitAttemptCount + 1
781
- })), Ce(l.current)), []), m = F((e) => i((t) => $(e ?? u.current, t.reseedKey)), []), h = I(() => !Se(r.values, r.baseline), [r.values, r.baseline]);
782
- return I(() => ({
781
+ })), we(l.current)), []), m = F((e) => i((t) => $(e ?? u.current, t.reseedKey)), []), h = L(() => !Ce(r.values, r.baseline), [r.values, r.baseline]);
782
+ return L(() => ({
783
783
  values: r.values,
784
784
  setValues: d,
785
785
  touched: r.touched,
@@ -804,4 +804,4 @@ var z = ({ labels: e, onCancel: t, onSubmit: n, isCancelDisabled: r = !1, isSubm
804
804
  ]);
805
805
  };
806
806
  //#endregion
807
- export { oe as AddAvatar, se as AvatarPickerModal, K as BUILDER_FORM_CLASS, ie as BuilderFormContainer, ve as DEFAULT_METADATA_FORM_LABELS, Q as DeploymentCreationFieldErrorCode, pe as DeploymentCreationForm, ue as DeploymentLocalesField, ae as EditorLayout, J as EditorSection, _e as EntityEditor, Z as MetadataField, be as MetadataForm, we as NAME_PATTERN, Ee as SEMVER_VERSION_PATTERN, Te as VERSION_PATTERN, ke as useMetadataForm, De as validateDeploymentCreationFields };
807
+ export { se as AddAvatar, ce as AvatarPickerModal, K as BUILDER_FORM_CLASS, G as BuilderFormContainer, ye as DEFAULT_METADATA_FORM_LABELS, Q as DeploymentCreationFieldErrorCode, me as DeploymentCreationForm, de as DeploymentLocalesField, oe as EditorLayout, J as EditorSection, ve as EntityEditor, Z as MetadataField, xe as MetadataForm, Te as NAME_PATTERN, De as SEMVER_VERSION_PATTERN, Ee as VERSION_PATTERN, Ae as useMetadataForm, Oe as validateDeploymentCreationFields };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-builder-form",
3
3
  "description": "Presentational builder form shells, editor layouts, and shared deployment field sets for composing and editing DIAL entities",
4
- "version": "1.2.0-dev.284",
4
+ "version": "1.2.0-dev.287",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",
@@ -20,7 +20,7 @@
20
20
  "@tabler/icons-react": "^3.44.0"
21
21
  },
22
22
  "peerDependencies": {
23
- "@epam/ai-dial-chat-shared": "1.2.0-dev.284",
23
+ "@epam/ai-dial-chat-shared": "1.2.0-dev.287",
24
24
  "@epam/ai-dial-ui-kit": "^0.15.0-dev.36",
25
25
  "react": "^19.2.8"
26
26
  },