@gravity-ui/dynamic-forms 5.24.0 → 5.26.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/build/cjs/lib/kit/i18n/en.json +34 -0
  2. package/build/cjs/lib/kit/i18n/ru.json +34 -0
  3. package/build/cjs/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.js +23 -19
  4. package/build/cjs/lib/unstable/core/SchemaRendererNode/utils.d.ts +3 -0
  5. package/build/cjs/lib/unstable/core/SchemaRendererNode/utils.js +25 -1
  6. package/build/cjs/lib/unstable/core/types/validation.d.ts +1 -1
  7. package/build/cjs/lib/unstable/core/useSchemaRenderer/useSchemaRenderer.js +6 -2
  8. package/build/cjs/lib/unstable/core/useSchemaRenderer/utils/get-validate.js +1 -1
  9. package/build/cjs/lib/unstable/kit/components/EntityError/EntityError.js +1 -1
  10. package/build/cjs/lib/unstable/kit/constants/index.d.ts +1 -0
  11. package/build/cjs/lib/unstable/kit/constants/index.js +3 -1
  12. package/build/cjs/lib/unstable/kit/constants/messages.d.ts +2 -0
  13. package/build/cjs/lib/unstable/kit/constants/messages.js +89 -0
  14. package/build/cjs/lib/unstable/kit/entities/Alert/Alert.js +3 -3
  15. package/build/cjs/lib/unstable/kit/entities/ArrayTable/ArrayTable.js +2 -2
  16. package/build/cjs/lib/unstable/kit/entities/FewOfNested/FewOfNested.js +6 -1
  17. package/build/cjs/lib/unstable/kit/entities/OneOfNested/OneOfNested.js +3 -1
  18. package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.css +4 -0
  19. package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.d.ts +1 -1
  20. package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js +30 -5
  21. package/build/cjs/lib/unstable/kit/form-entities/SelectInput/SelectInput.d.ts +1 -2
  22. package/build/cjs/lib/unstable/kit/form-layouts/FormRow/FormRow.css +3 -0
  23. package/build/cjs/lib/unstable/kit/layouts/Accordeon/Accordeon.js +29 -27
  24. package/build/cjs/lib/unstable/kit/utils/transformer.d.ts +3 -3
  25. package/build/cjs/lib/unstable/kit/utils/transformer.js +16 -10
  26. package/build/esm/lib/kit/i18n/en.json +34 -0
  27. package/build/esm/lib/kit/i18n/ru.json +34 -0
  28. package/build/esm/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.js +24 -20
  29. package/build/esm/lib/unstable/core/SchemaRendererNode/utils.d.ts +3 -0
  30. package/build/esm/lib/unstable/core/SchemaRendererNode/utils.js +22 -0
  31. package/build/esm/lib/unstable/core/types/validation.d.ts +1 -1
  32. package/build/esm/lib/unstable/core/useSchemaRenderer/useSchemaRenderer.js +6 -2
  33. package/build/esm/lib/unstable/core/useSchemaRenderer/utils/get-validate.js +1 -1
  34. package/build/esm/lib/unstable/kit/components/EntityError/EntityError.js +1 -1
  35. package/build/esm/lib/unstable/kit/constants/index.d.ts +1 -0
  36. package/build/esm/lib/unstable/kit/constants/index.js +1 -0
  37. package/build/esm/lib/unstable/kit/constants/messages.d.ts +2 -0
  38. package/build/esm/lib/unstable/kit/constants/messages.js +85 -0
  39. package/build/esm/lib/unstable/kit/entities/Alert/Alert.js +3 -3
  40. package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.js +2 -2
  41. package/build/esm/lib/unstable/kit/entities/FewOfNested/FewOfNested.js +6 -1
  42. package/build/esm/lib/unstable/kit/entities/OneOfNested/OneOfNested.js +3 -1
  43. package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.css +4 -0
  44. package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.d.ts +1 -1
  45. package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js +30 -5
  46. package/build/esm/lib/unstable/kit/form-entities/SelectInput/SelectInput.d.ts +1 -2
  47. package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.css +3 -0
  48. package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.js +29 -27
  49. package/build/esm/lib/unstable/kit/utils/transformer.d.ts +3 -3
  50. package/build/esm/lib/unstable/kit/utils/transformer.js +16 -10
  51. package/package.json +1 -1
@@ -35,6 +35,40 @@
35
35
  "Value can't be longer than {{count}} items",
36
36
  "Value can't be longer than {{count}} items"
37
37
  ],
38
+ "label-sr_error-additional-items": "Maximum allowed number of items is {{count}}",
39
+ "label-sr_error-additional-properties": "Maximum allowed number of properties is {{count}}",
40
+ "label-sr_error-any-of": "Incorrect value in field",
41
+ "label-sr_error-const": "Value must be {{expected}}",
42
+ "label-sr_error-contains": "At least one item must be added",
43
+ "label-sr_error-contains-min": "At least one item matching the condition must be added",
44
+ "label-sr_error-dependencies": "Field \"{{property}}\" is required",
45
+ "label-sr_error-enum": "Value {{value}} cannot be used",
46
+ "label-sr_error-exclusive-maximum": "Value must be less than {{count}}",
47
+ "label-sr_error-exclusive-minimum": "Value must be greater than {{count}}",
48
+ "label-sr_error-max-items": "Maximum allowed number of items is {{count}}",
49
+ "label-sr_error-max-length": "Maximum allowed number of characters is {{count}}",
50
+ "label-sr_error-max-properties": "Maximum allowed number of properties is {{count}}",
51
+ "label-sr_error-maximum": "Value must be less than or equal to {{count}}",
52
+ "label-sr_error-min-items": "Minimum allowed number of items is {{count}}",
53
+ "label-sr_error-min-length": "Minimum allowed number of characters is {{count}}",
54
+ "label-sr_error-min-properties": "Minimum allowed number of properties is {{count}}",
55
+ "label-sr_error-minimum": "Value must be greater than or equal to {{count}}",
56
+ "label-sr_error-multiple-of": "Value must be a multiple of {{count}}",
57
+ "label-sr_error-not": "Value cannot be used",
58
+ "label-sr_error-one-of": "Incorrect value in field",
59
+ "label-sr_error-pattern": "Value must match the pattern - {{pattern}}",
60
+ "label-sr_error-property-names": "Invalid property name \"{{property}}\"",
61
+ "label-sr_error-required": "Empty field",
62
+ "label-sr_error-type": "Value must be {{expected}}",
63
+ "label-sr_error-type-or": " or {{type}}",
64
+ "label-sr_error-unique-items": "Values must be unique",
65
+ "label-sr_type-array": "an array",
66
+ "label-sr_type-boolean": "a boolean",
67
+ "label-sr_type-integer": "an integer",
68
+ "label-sr_type-null": "null",
69
+ "label-sr_type-number": "a number",
70
+ "label-sr_type-object": "an object",
71
+ "label-sr_type-string": "a string",
38
72
  "label_error-min-number": "Value must be an integer no less than {{count}}",
39
73
  "label_error-max-number": "Value must not be greater than {{count}}",
40
74
  "label_error-min-number-with-scale": "Value must be no less than {{count}} {{scale}}",
@@ -35,6 +35,40 @@
35
35
  "Значение не может быть длиннее {{count}} элементов",
36
36
  "Значение не может быть длиннее {{count}} элементов"
37
37
  ],
38
+ "label-sr_error-additional-items": "Максимальное допустимое количество элементов: {{count}}",
39
+ "label-sr_error-additional-properties": "Максимальное допустимое количество свойств: {{count}}",
40
+ "label-sr_error-any-of": "Поле заполнено неправильно",
41
+ "label-sr_error-const": "Значение должно быть равно {{expected}}",
42
+ "label-sr_error-contains": "Необходимо добавить хотя бы один элемент",
43
+ "label-sr_error-contains-min": "Необходимо добавить хотя бы один элемент, удовлетворяющий условию",
44
+ "label-sr_error-dependencies": "Необходимо заполнить поле \"{{property}}\"",
45
+ "label-sr_error-enum": "Значение {{value}} не допустимо к использованию",
46
+ "label-sr_error-exclusive-maximum": "Значение должно быть меньше {{count}}",
47
+ "label-sr_error-exclusive-minimum": "Значение должно быть больше {{count}}",
48
+ "label-sr_error-max-items": "Максимальное допустимое количество элементов: {{count}}",
49
+ "label-sr_error-max-length": "Максимальное допустимое количество символов: {{count}}",
50
+ "label-sr_error-max-properties": "Максимальное допустимое количество свойств: {{count}}",
51
+ "label-sr_error-maximum": "Значение должно быть меньше или равно {{count}}",
52
+ "label-sr_error-min-items": "Минимальное допустимое количество элементов: {{count}}",
53
+ "label-sr_error-min-length": "Минимальное допустимое количество символов: {{count}}",
54
+ "label-sr_error-min-properties": "Минимальное допустимое количество свойств: {{count}}",
55
+ "label-sr_error-minimum": "Значение должно быть больше или равно {{count}}",
56
+ "label-sr_error-multiple-of": "Значение должно быть кратно {{count}}",
57
+ "label-sr_error-not": "Значение не допустимо к использованию",
58
+ "label-sr_error-one-of": "Поле заполнено неправильно",
59
+ "label-sr_error-pattern": "Значение должно удовлетворять шаблону - {{pattern}}",
60
+ "label-sr_error-property-names": "Недопустимое имя свойства \"{{property}}\"",
61
+ "label-sr_error-required": "Поле не заполнено",
62
+ "label-sr_error-type": "Значение должно быть {{expected}}",
63
+ "label-sr_error-type-or": " или {{type}}",
64
+ "label-sr_error-unique-items": "Значения должны быть уникальными",
65
+ "label-sr_type-array": "массивом",
66
+ "label-sr_type-boolean": "булевым значением",
67
+ "label-sr_type-integer": "целым числом",
68
+ "label-sr_type-null": "null",
69
+ "label-sr_type-number": "числом",
70
+ "label-sr_type-object": "объектом",
71
+ "label-sr_type-string": "строкой",
38
72
  "label_error-min-number": "Значение должно быть числом не меньше {{count}}",
39
73
  "label_error-max-number": "Значение должно быть числом не больше {{count}}",
40
74
  "label_error-min-number-with-scale": "Значение должно быть не меньше {{count}} {{scale}}",
@@ -13,8 +13,7 @@ const utils_2 = require("./utils");
13
13
  const SchemaRendererNodeComponent = ({ headName, modeOverride, name, schemaOverride, schemaPath, }) => {
14
14
  var _a;
15
15
  const form = (0, react_final_form_1.useForm)();
16
- const firstRenderRef = react_1.default.useRef(true);
17
- const pendingTicksRef = react_1.default.useRef({ input: 0, meta: 0 });
16
+ const compareValuesRef = react_1.default.useRef((0, utils_2.getCompareValues)());
18
17
  const fieldRef = react_1.default.useRef(null);
19
18
  const unsubscribeRef = react_1.default.useRef(null);
20
19
  const [ticks, setTicks] = react_1.default.useState({ input: 0, meta: 0 });
@@ -39,6 +38,17 @@ const SchemaRendererNodeComponent = ({ headName, modeOverride, name, schemaOverr
39
38
  const kit = react_1.default.useMemo(() => (0, utils_2.getRenderKit)({ config: srState === null || srState === void 0 ? void 0 : srState.config, schema }), [schema, srState === null || srState === void 0 ? void 0 : srState.config]);
40
39
  react_1.default.useMemo(() => {
41
40
  var _a;
41
+ if (compareValuesRef.current({
42
+ form,
43
+ jsonDefaultValues,
44
+ headName,
45
+ name,
46
+ default: schema === null || schema === void 0 ? void 0 : schema.default,
47
+ type: schema === null || schema === void 0 ? void 0 : schema.type,
48
+ schemaPath,
49
+ })) {
50
+ return;
51
+ }
42
52
  (_a = unsubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribeRef);
43
53
  const initialState = { schemaPath };
44
54
  let defaultValue = schema === null || schema === void 0 ? void 0 : schema.default;
@@ -48,7 +58,7 @@ const SchemaRendererNodeComponent = ({ headName, modeOverride, name, schemaOverr
48
58
  }
49
59
  catch (_b) { }
50
60
  }
51
- unsubscribeRef.current = form.registerField(name, (f) => {
61
+ const unsubscribe = form.registerField(name, (f) => {
52
62
  const prevF = fieldRef.current;
53
63
  if (prevF) {
54
64
  let inputTick = 0;
@@ -62,23 +72,24 @@ const SchemaRendererNodeComponent = ({ headName, modeOverride, name, schemaOverr
62
72
  metaTick = 1;
63
73
  }
64
74
  if (inputTick + metaTick) {
65
- if (firstRenderRef.current) {
66
- pendingTicksRef.current = { input: inputTick, meta: metaTick };
67
- }
68
- else {
69
- setTicks((t) => ({
70
- input: t.input + inputTick,
71
- meta: t.meta + metaTick,
72
- }));
73
- }
75
+ setTicks((t) => ({
76
+ input: t.input + inputTick,
77
+ meta: t.meta + metaTick,
78
+ }));
74
79
  }
75
80
  }
76
81
  fieldRef.current = f;
77
82
  }, { submitFailed: true, touched: true, validating: true, value: true }, {
78
83
  data: { state: initialState },
79
84
  defaultValue,
85
+ silent: true,
80
86
  validateFields: [(0, utils_1.getServiceFieldName)(useSchemaRenderer_1.SCHEMA_RENDERER_SERVICE_FIELD, headName)],
81
87
  });
88
+ (0, utils_2.scheduleFlush)(form);
89
+ unsubscribeRef.current = () => {
90
+ unsubscribe();
91
+ (0, utils_2.scheduleFlush)(form);
92
+ };
82
93
  }, [form, jsonDefaultValues, headName, name, schema === null || schema === void 0 ? void 0 : schema.default, schema === null || schema === void 0 ? void 0 : schema.type, schemaPath]);
83
94
  const input = react_1.default.useMemo(() => {
84
95
  var _a;
@@ -103,13 +114,6 @@ const SchemaRendererNodeComponent = ({ headName, modeOverride, name, schemaOverr
103
114
  };
104
115
  }, [error, form, name, ticks.meta]);
105
116
  react_1.default.useEffect(() => {
106
- firstRenderRef.current = false;
107
- if (pendingTicksRef.current.input || pendingTicksRef.current.meta) {
108
- setTicks((t) => ({
109
- input: t.input + pendingTicksRef.current.input,
110
- meta: t.meta + pendingTicksRef.current.meta,
111
- }));
112
- }
113
117
  return () => {
114
118
  var _a;
115
119
  (_a = unsubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribeRef);
@@ -1,3 +1,4 @@
1
+ import type { FormApi } from 'final-form';
1
2
  import { SchemaRendererMode } from '../constants';
2
3
  import type { JsonSchema, NodeEntity, NodeLayout, NodesConfig } from '../types';
3
4
  type GetRenderKitParams<Schema extends JsonSchema> = {
@@ -22,4 +23,6 @@ type GetRenderKitReturn<Schema extends JsonSchema> = {
22
23
  };
23
24
  export declare const getRenderKit: <Schema extends JsonSchema>({ config, schema, }: GetRenderKitParams<Schema>) => GetRenderKitReturn<Schema>;
24
25
  export declare const getAccumulatedSchema: (schemaPath: string, rootSchema?: JsonSchema, override?: JsonSchema, collectedPaths?: Set<string>) => JsonSchema;
26
+ export declare const scheduleFlush: (form: FormApi) => void;
27
+ export declare const getCompareValues: () => (currentValues: Record<string, unknown>) => boolean;
25
28
  export {};
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getAccumulatedSchema = exports.getRenderKit = void 0;
3
+ exports.getCompareValues = exports.scheduleFlush = exports.getAccumulatedSchema = exports.getRenderKit = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const get_1 = tslib_1.__importDefault(require("lodash/get"));
6
6
  const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
@@ -160,3 +160,27 @@ const getAccumulatedSchema = (schemaPath, rootSchema, override, collectedPaths =
160
160
  return accumulatedSchema;
161
161
  };
162
162
  exports.getAccumulatedSchema = getAccumulatedSchema;
163
+ const flushes = new WeakMap();
164
+ const scheduleFlush = (form) => {
165
+ if (flushes.get(form)) {
166
+ return;
167
+ }
168
+ flushes.set(form, true);
169
+ queueMicrotask(() => {
170
+ flushes.delete(form);
171
+ form.batch(() => { });
172
+ });
173
+ };
174
+ exports.scheduleFlush = scheduleFlush;
175
+ const getCompareValues = () => {
176
+ let cachedValues;
177
+ return (currentValues) => {
178
+ if (!cachedValues ||
179
+ [...Object.keys(cachedValues), ...Object.keys(currentValues)].some((key) => cachedValues[key] !== currentValues[key])) {
180
+ cachedValues = Object.assign({}, currentValues);
181
+ return false;
182
+ }
183
+ return true;
184
+ };
185
+ };
186
+ exports.getCompareValues = getCompareValues;
@@ -12,7 +12,7 @@ export interface ErrorMessages {
12
12
  additionalProperties?: ((e: JSLErrors.AdditionalProperties) => string) | string;
13
13
  anyOf?: ((e: JSLErrors.AnyOf) => string) | string;
14
14
  const?: ((e: JSLErrors.Const) => string) | string;
15
- contains?: ((e: JSLErrors.ContainsAny) => string) | string;
15
+ contains?: ((e: JSLErrors.ContainsAny | JSLErrors.ContainsMin) => string) | string;
16
16
  dependencies?: ((e: JSLErrors.Dependencies) => string) | string;
17
17
  enum?: ((e: JSLErrors.Enum) => string) | string;
18
18
  exclusiveMaximum?: ((e: JSLErrors.ExclusiveMaximum) => string) | string;
@@ -19,7 +19,7 @@ const useSchemaRenderer = ({ config, connectValidate = true, errorMessages, json
19
19
  const dispatchEvent = react_1.default.useMemo(() => (0, utils_2.getDispatch)(form, headName), [form, headName]);
20
20
  const runValidate = react_1.default.useMemo(() => (0, utils_2.getRunValidate)(form, headName, validateOnBlur), [form, headName, validateOnBlur]);
21
21
  const validate = react_1.default.useMemo(() => (0, utils_2.getValidate)(form, headName), [form, headName]);
22
- react_1.default.useMemo(() => {
22
+ const unsubscribeField = react_1.default.useMemo(() => {
23
23
  var _a;
24
24
  (_a = unsubscribeRef.current) === null || _a === void 0 ? void 0 : _a.call(unsubscribeRef);
25
25
  const prevParams = prevParamsRef.current;
@@ -72,7 +72,7 @@ const useSchemaRenderer = ({ config, connectValidate = true, errorMessages, json
72
72
  state.dispatchEvent(initialEvents);
73
73
  initialEvents = [];
74
74
  }
75
- }, { data: true }, { data: { state: initialState }, getValidator, validateFields: [headName] });
75
+ }, { data: true }, { data: { state: initialState }, getValidator, silent: true, validateFields: [headName] });
76
76
  prevParamsRef.current = {
77
77
  config,
78
78
  errorMessages,
@@ -84,6 +84,7 @@ const useSchemaRenderer = ({ config, connectValidate = true, errorMessages, json
84
84
  validateOnBlur,
85
85
  };
86
86
  stateRef.current = initialState;
87
+ return unsubscribeRef.current;
87
88
  }, [
88
89
  config,
89
90
  connectValidate,
@@ -101,6 +102,9 @@ const useSchemaRenderer = ({ config, connectValidate = true, errorMessages, json
101
102
  validateOnBlur,
102
103
  userContext,
103
104
  ]);
105
+ react_1.default.useEffect(() => {
106
+ runValidate();
107
+ }, [unsubscribeField]);
104
108
  react_1.default.useEffect(() => {
105
109
  return () => {
106
110
  var _a;
@@ -70,9 +70,9 @@ const getValidate = (form, headName) => {
70
70
  Object.keys(Object.assign(Object.assign({}, srState.errors), allErrors)).forEach((key) => {
71
71
  if (srState.errors[key] !== allErrors[key]) {
72
72
  newErrors[key] = allErrors[key];
73
+ srState.errors[key] = allErrors[key];
73
74
  }
74
75
  });
75
- srState.errors = allErrors;
76
76
  srState.waiters = Object.assign(Object.assign({}, srState.waiters), waiters);
77
77
  if (Object.values(newErrors).length) {
78
78
  srState.dispatchEvent([
@@ -8,7 +8,7 @@ const utils_1 = require("../../utils");
8
8
  const b = (0, utils_1.block)('entity-error');
9
9
  const EntityError = ({ errorMessage, validationState }) => {
10
10
  if (validationState === 'invalid' && errorMessage) {
11
- return (react_1.default.createElement(uikit_1.Text, { className: b(), color: "danger" }, errorMessage));
11
+ return (react_1.default.createElement(uikit_1.Text, { className: b(), color: "danger", "data-sr-error": "true" }, errorMessage));
12
12
  }
13
13
  return null;
14
14
  };
@@ -1,2 +1,3 @@
1
1
  export { DASH, DEFAULT_DATE_FORMAT } from './common';
2
2
  export { config, untypedConfig } from './config';
3
+ export { errorMessages } from './messages';
@@ -1,9 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.untypedConfig = exports.config = exports.DEFAULT_DATE_FORMAT = exports.DASH = void 0;
3
+ exports.errorMessages = exports.untypedConfig = exports.config = exports.DEFAULT_DATE_FORMAT = exports.DASH = void 0;
4
4
  var common_1 = require("./common");
5
5
  Object.defineProperty(exports, "DASH", { enumerable: true, get: function () { return common_1.DASH; } });
6
6
  Object.defineProperty(exports, "DEFAULT_DATE_FORMAT", { enumerable: true, get: function () { return common_1.DEFAULT_DATE_FORMAT; } });
7
7
  var config_1 = require("./config");
8
8
  Object.defineProperty(exports, "config", { enumerable: true, get: function () { return config_1.config; } });
9
9
  Object.defineProperty(exports, "untypedConfig", { enumerable: true, get: function () { return config_1.untypedConfig; } });
10
+ var messages_1 = require("./messages");
11
+ Object.defineProperty(exports, "errorMessages", { enumerable: true, get: function () { return messages_1.errorMessages; } });
@@ -0,0 +1,2 @@
1
+ import type { ErrorMessages } from '../../core';
2
+ export declare let errorMessages: Required<ErrorMessages>;
@@ -0,0 +1,89 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.errorMessages = void 0;
4
+ const tslib_1 = require("tslib");
5
+ const get_1 = tslib_1.__importDefault(require("lodash/get"));
6
+ const i18n_1 = tslib_1.__importDefault(require("../../../kit/i18n"));
7
+ const configure_1 = require("../../../kit/i18n/configure");
8
+ const TYPE_I18N_KEYS = {
9
+ array: 'label-sr_type-array',
10
+ boolean: 'label-sr_type-boolean',
11
+ integer: 'label-sr_type-integer',
12
+ null: 'label-sr_type-null',
13
+ number: 'label-sr_type-number',
14
+ object: 'label-sr_type-object',
15
+ string: 'label-sr_type-string',
16
+ };
17
+ const getErrorMessages = () => ({
18
+ additionalItems: (e) => {
19
+ const schema = e.data.schema;
20
+ if (Array.isArray(schema.items)) {
21
+ return (0, i18n_1.default)('label-sr_error-additional-items', { count: schema.items.length });
22
+ }
23
+ return e.message;
24
+ },
25
+ additionalProperties: (e) => {
26
+ const schema = e.data.schema;
27
+ if (schema.properties) {
28
+ return (0, i18n_1.default)('label-sr_error-additional-properties', {
29
+ count: Object.keys(schema.properties).length,
30
+ });
31
+ }
32
+ return e.message;
33
+ },
34
+ anyOf: (0, i18n_1.default)('label-sr_error-any-of'),
35
+ const: (e) => (0, i18n_1.default)('label-sr_error-const', { expected: JSON.stringify(e.data.expected) }),
36
+ contains: (e) => e.code === 'contains-min-error'
37
+ ? (0, i18n_1.default)('label-sr_error-contains-min')
38
+ : (0, i18n_1.default)('label-sr_error-contains'),
39
+ dependencies: (e) => {
40
+ let property = e.data.missingProperty;
41
+ const title = (0, get_1.default)(e, `data.schema.properties.${property}.title`);
42
+ if (typeof title === 'string') {
43
+ property = title;
44
+ }
45
+ return (0, i18n_1.default)('label-sr_error-dependencies', { property });
46
+ },
47
+ enum: (e) => (0, i18n_1.default)('label-sr_error-enum', { value: JSON.stringify(e.data.value) }),
48
+ exclusiveMaximum: (e) => (0, i18n_1.default)('label-sr_error-exclusive-maximum', { count: e.data.maximum }),
49
+ exclusiveMinimum: (e) => (0, i18n_1.default)('label-sr_error-exclusive-minimum', { count: e.data.minimum }),
50
+ maxItems: (e) => (0, i18n_1.default)('label-sr_error-max-items', { count: e.data.maximum }),
51
+ maxLength: (e) => (0, i18n_1.default)('label-sr_error-max-length', { count: e.data.maxLength }),
52
+ maxProperties: (e) => (0, i18n_1.default)('label-sr_error-max-properties', { count: e.data.maxProperties }),
53
+ maximum: (e) => (0, i18n_1.default)('label-sr_error-maximum', { count: e.data.maximum }),
54
+ minItems: (e) => (0, i18n_1.default)('label-sr_error-min-items', { count: e.data.minItems }),
55
+ minLength: (e) => (0, i18n_1.default)('label-sr_error-min-length', { count: e.data.minLength }),
56
+ minProperties: (e) => (0, i18n_1.default)('label-sr_error-min-properties', { count: e.data.minProperties }),
57
+ minimum: (e) => (0, i18n_1.default)('label-sr_error-minimum', { count: e.data.minimum }),
58
+ multipleOf: (e) => (0, i18n_1.default)('label-sr_error-multiple-of', { count: e.data.multipleOf }),
59
+ not: (0, i18n_1.default)('label-sr_error-not'),
60
+ oneOf: (0, i18n_1.default)('label-sr_error-one-of'),
61
+ pattern: (e) => (0, i18n_1.default)('label-sr_error-pattern', { pattern: e.data.pattern }),
62
+ propertyNames: (e) => (0, i18n_1.default)('label-sr_error-property-names', { property: e.data.property }),
63
+ required: (0, i18n_1.default)('label-sr_error-required'),
64
+ type: (e) => {
65
+ const types = e.data.expected.split(',');
66
+ let expected = '';
67
+ types.forEach((t, i, arr) => {
68
+ let type = t.trim();
69
+ if (TYPE_I18N_KEYS[type]) {
70
+ type = (0, i18n_1.default)(TYPE_I18N_KEYS[type]);
71
+ }
72
+ if (i === 0) {
73
+ expected += type;
74
+ }
75
+ else if (i === arr.length - 1) {
76
+ expected += (0, i18n_1.default)('label-sr_error-type-or', { type });
77
+ }
78
+ else {
79
+ expected += `, ${type}`;
80
+ }
81
+ });
82
+ return (0, i18n_1.default)('label-sr_error-type', { expected });
83
+ },
84
+ uniqueItems: (0, i18n_1.default)('label-sr_error-unique-items'),
85
+ });
86
+ exports.errorMessages = getErrorMessages();
87
+ (0, configure_1.subscribeConfigure)(() => {
88
+ exports.errorMessages = getErrorMessages();
89
+ });
@@ -29,17 +29,17 @@ const Alert = ({ headName, props, schema }) => {
29
29
  const msg = react_1.default.useMemo(() => {
30
30
  if (message) {
31
31
  if (typeof message === 'string') {
32
- return (react_1.default.createElement("div", { className: b('message', { expanded }) },
32
+ return (react_1.default.createElement("div", { className: b('message', { expanded: expanded || !title }) },
33
33
  react_1.default.createElement(components_1.HTMLContent, { content: message, headName: headName })));
34
34
  }
35
35
  return message;
36
36
  }
37
37
  if (schema.description) {
38
- return (react_1.default.createElement("div", { className: b('message', { expanded }) },
38
+ return (react_1.default.createElement("div", { className: b('message', { expanded: expanded || !title }) },
39
39
  react_1.default.createElement(components_1.HTMLContent, { content: schema.description, headName: headName })));
40
40
  }
41
41
  return undefined;
42
- }, [expanded, headName, message, schema.description]);
42
+ }, [expanded, headName, message, schema.description, title]);
43
43
  return (react_1.default.createElement(components_1.EntityContainer, { className: b({ expanded }), stretch: "fit", fill: "populated" },
44
44
  react_1.default.createElement(uikit_1.Alert, Object.assign({ icon: icon, message: msg, title: title }, entityRestProps))));
45
45
  };
@@ -60,7 +60,7 @@ const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
60
60
  }, [props.order, schema.items]);
61
61
  const { head, rows } = react_1.default.useMemo(() => {
62
62
  let tupleItems = false;
63
- let rowsCount = value === null || value === void 0 ? void 0 : value.length;
63
+ let rowsCount = (value === null || value === void 0 ? void 0 : value.length) || 0;
64
64
  let withRemoveButton = true;
65
65
  const getItemName = (index, property) => `${name}[${index}]${property === undefined ? '' : `.${property}`}`;
66
66
  const getItemSchemaPath = (index, property) => `${schemaPath}/items${tupleItems ? `/${index}` : ''}${property === undefined ? '' : `/properties/${property}`}`;
@@ -97,7 +97,7 @@ const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
97
97
  }
98
98
  return (react_1.default.createElement(components_1.EntityContainer, { stretch: "by-child", gap: 2, fill: "by-child" },
99
99
  react_1.default.createElement("div", null,
100
- head,
100
+ rows.length ? head : null,
101
101
  rows),
102
102
  addButton));
103
103
  };
@@ -31,7 +31,12 @@ const FewOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props,
31
31
  const { Entity, Layout, entityProps, independent, layoutProps } = renderKit[mode];
32
32
  const togglerInput = Object.assign(Object.assign({}, input), { name: togglerArrayRemoveButton ? name : `${name}._____toggler`, value: togglerValues, onChange: (value) => {
33
33
  if (Array.isArray(value)) {
34
- setTogglerValues(value.filter(isString_1.default));
34
+ const nextTogglerValues = value.filter(isString_1.default);
35
+ setTogglerValues(nextTogglerValues);
36
+ input.onChange(nextTogglerValues.reduce((acc, togglerValue) => {
37
+ var _a;
38
+ return (Object.assign(Object.assign({}, acc), { [togglerValue]: (_a = input.value) === null || _a === void 0 ? void 0 : _a[togglerValue] }));
39
+ }, {}));
35
40
  }
36
41
  } });
37
42
  const togglerMeta = Object.assign(Object.assign({}, meta), { error: undefined });
@@ -27,7 +27,9 @@ const OneOfNested = ({ Layout, headName, input, layoutProps, meta, mode, props,
27
27
  ? booleanToKey.true === togglerValue
28
28
  : togglerValue, onChange: (value) => {
29
29
  const nextValue = `${value}`;
30
- setTogglerValue((booleanToKey === null || booleanToKey === void 0 ? void 0 : booleanToKey[nextValue]) || nextValue);
30
+ const nextTogglerValue = (booleanToKey === null || booleanToKey === void 0 ? void 0 : booleanToKey[nextValue]) || nextValue;
31
+ setTogglerValue(nextTogglerValue);
32
+ input.onChange({ [nextTogglerValue]: undefined });
31
33
  } });
32
34
  const togglerMeta = Object.assign(Object.assign({}, meta), { error: undefined });
33
35
  if (Entity) {
@@ -3,4 +3,8 @@
3
3
  }
4
4
  .sr-segmented-radio-group-input_error .g-segmented-radio-group .g-segmented-radio-group__option_checked::after {
5
5
  border: 1px solid var(--g-color-text-danger);
6
+ }
7
+ .sr-segmented-radio-group-input_overflowed {
8
+ height: 0;
9
+ opacity: 0;
6
10
  }
@@ -1,6 +1,6 @@
1
1
  import { type SegmentedRadioGroupProps } from '@gravity-ui/uikit';
2
2
  import type { JsonSchemaString, NodeEntity } from '../../../core';
3
- export interface SegmentedRadioGroupInputProps extends Omit<SegmentedRadioGroupProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
3
+ export interface SegmentedRadioGroupInputProps extends Omit<SegmentedRadioGroupProps, 'children' | 'defaultValue' | 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
4
4
  enumDescriptions?: Record<string, string>;
5
5
  optionsDisabled?: Record<string, boolean>;
6
6
  }
@@ -6,12 +6,16 @@ const react_1 = tslib_1.__importDefault(require("react"));
6
6
  const uikit_1 = require("@gravity-ui/uikit");
7
7
  const components_1 = require("../../components");
8
8
  const utils_1 = require("../../utils");
9
+ const SelectInput_1 = require("../SelectInput");
9
10
  const b = (0, utils_1.block)('segmented-radio-group-input');
10
- const SegmentedRadioGroupInput = ({ input, meta, props, schema }) => {
11
- var _a;
11
+ const SegmentedRadioGroupInput = (_a) => {
12
+ var _b;
13
+ var { input, meta, props, schema } = _a, restProps = tslib_1.__rest(_a, ["input", "meta", "props", "schema"]);
12
14
  const { name, onBlur, onChange, onFocus, value } = input;
13
15
  const { enumDescriptions, optionsDisabled } = props, restEntityProps = tslib_1.__rest(props, ["enumDescriptions", "optionsDisabled"]);
14
- const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
16
+ const { disabled } = ((_b = schema.nodeParameters) === null || _b === void 0 ? void 0 : _b.flags) || {};
17
+ const ref = react_1.default.useRef(null);
18
+ const [overflowed, setOverflowed] = react_1.default.useState(false);
15
19
  const options = react_1.default.useMemo(() => {
16
20
  var _a;
17
21
  return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => ({
@@ -25,7 +29,28 @@ const SegmentedRadioGroupInput = ({ input, meta, props, schema }) => {
25
29
  onChange(value);
26
30
  onBlur();
27
31
  }, [onBlur, onChange, onFocus]);
28
- return (react_1.default.createElement(components_1.EntityContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta) }) },
29
- react_1.default.createElement(uikit_1.SegmentedRadioGroup, Object.assign({ width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
32
+ react_1.default.useLayoutEffect(() => {
33
+ const root = ref.current;
34
+ if (!root) {
35
+ return;
36
+ }
37
+ const measure = () => {
38
+ const texts = root.querySelectorAll('.g-segmented-radio-group__option-text');
39
+ setOverflowed(Array.from(texts).some((node) => {
40
+ if (node.offsetWidth === 0 && node.scrollWidth === 0) {
41
+ return false;
42
+ }
43
+ return node.scrollWidth > node.clientWidth;
44
+ }));
45
+ };
46
+ measure();
47
+ const observer = new ResizeObserver(measure);
48
+ observer.observe(root);
49
+ return () => observer.disconnect();
50
+ }, [options]);
51
+ return (react_1.default.createElement(components_1.EntityContainer, { stretch: "max" },
52
+ overflowed ? (react_1.default.createElement(SelectInput_1.SelectInput, Object.assign({ input: input, meta: meta, props: props, schema: schema }, restProps))) : null,
53
+ react_1.default.createElement(components_1.EntityContainer, { stretch: "max", className: b({ error: (0, utils_1.getBooleanValidationState)(meta), overflowed }) },
54
+ react_1.default.createElement(uikit_1.SegmentedRadioGroup, Object.assign({ ref: ref, width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name })))));
30
55
  };
31
56
  exports.SegmentedRadioGroupInput = SegmentedRadioGroupInput;
@@ -1,8 +1,7 @@
1
1
  import { type SelectProps } from '@gravity-ui/uikit';
2
2
  import type { JsonSchemaString, NodeEntity } from '../../../core';
3
- export interface SelectInputProps extends Omit<SelectProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'multiple' | 'errorMessage' | 'validationState' | 'qa'> {
3
+ export interface SelectInputProps extends Omit<SelectProps, 'defaultValue' | 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'multiple' | 'errorMessage' | 'validationState' | 'qa'> {
4
4
  enumDescriptions?: Record<string, string>;
5
5
  optionsMeta?: Record<string, string>;
6
- options?: SelectProps['options'];
7
6
  }
8
7
  export declare const SelectInput: NodeEntity<JsonSchemaString, SelectInputProps>;
@@ -22,4 +22,7 @@
22
22
  }
23
23
  .sr-form-row__help-mark {
24
24
  margin-top: 1.5px;
25
+ }
26
+ .sr-form-row__right {
27
+ max-width: calc(100% - 180px - var(--g-spacing-base) * 2);
25
28
  }
@@ -14,34 +14,36 @@ const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) =>
14
14
  const { titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = tslib_1.__rest(props, ["titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
15
15
  const { copy, required, hidden, open } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
16
16
  const overviewFlag = mode === core_1.SchemaRendererMode.Overview;
17
- const summary = react_1.default.useMemo(() => {
18
- const stopPropagation = (event) => {
19
- event.stopPropagation();
20
- };
21
- return (react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2 },
22
- withDefaultSummary ? (react_1.default.createElement(uikit_1.Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)) : (react_1.default.createElement(uikit_1.Disclosure.Summary, null, (props) => (react_1.default.createElement(uikit_1.Button, Object.assign({}, togglerProps, { className: b('toggler', togglerProps === null || togglerProps === void 0 ? void 0 : togglerProps.className) }),
23
- react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2, height: "100%" },
24
- react_1.default.createElement(uikit_1.Icon, { data: props.expanded ? icons_1.ChevronUp : icons_1.ChevronDown }),
25
- react_1.default.createElement(uikit_1.Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)))))),
26
- schema.description ? (react_1.default.createElement(uikit_1.HelpMark, { onClick: stopPropagation },
27
- react_1.default.createElement(components_1.HTMLContent, { content: schema.description, headName: headName }))) : null,
28
- overviewFlag ? (react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
29
- overviewFlag ? null : (react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName, onClick: stopPropagation }))));
30
- }, [
31
- copy,
32
- headName,
33
- input.name,
34
- input.value,
35
- overviewFlag,
36
- required,
37
- schema.title,
38
- schema.description,
39
- titleProps,
40
- togglerProps,
41
- withDefaultSummary,
42
- ]);
17
+ const summary = react_1.default.useMemo(() => (react_1.default.createElement(uikit_1.Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)), [overviewFlag, required, schema.title, titleProps]);
18
+ const helpMark = react_1.default.useMemo(() => {
19
+ if (schema.description) {
20
+ return (react_1.default.createElement(uikit_1.HelpMark, null,
21
+ react_1.default.createElement(components_1.HTMLContent, { content: schema.description, headName: headName })));
22
+ }
23
+ return null;
24
+ }, [schema.description, headName]);
25
+ const copyButton = react_1.default.useMemo(() => {
26
+ if (overviewFlag) {
27
+ return react_1.default.createElement(components_1.CopyButton, { className: b('copy-button'), copy: copy, value: input.value });
28
+ }
29
+ return null;
30
+ }, [overviewFlag, copy, input.value]);
31
+ const removeButton = react_1.default.useMemo(() => {
32
+ if (overviewFlag) {
33
+ return null;
34
+ }
35
+ return react_1.default.createElement(components_1.ArrayRemoveButton, { name: input.name, headName: headName });
36
+ }, [overviewFlag, input.name, headName]);
43
37
  return (react_1.default.createElement(components_1.LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag, hidden: hidden },
44
- react_1.default.createElement(uikit_1.Disclosure, Object.assign({ summary: summary, defaultExpanded: open }, restLayoutProps),
38
+ react_1.default.createElement(uikit_1.Disclosure, Object.assign({ defaultExpanded: open, summary: summary }, restLayoutProps),
39
+ react_1.default.createElement(uikit_1.Disclosure.Summary, null, ({ expanded, onClick }, defaultSummary) => (react_1.default.createElement(uikit_1.Flex, { minHeight: "28px", alignItems: "center", gap: 2 },
40
+ withDefaultSummary ? (defaultSummary) : (react_1.default.createElement(uikit_1.Button, Object.assign({}, togglerProps, { onClick: onClick, className: b('toggler', togglerProps === null || togglerProps === void 0 ? void 0 : togglerProps.className) }),
41
+ react_1.default.createElement(uikit_1.Flex, { alignItems: "center", gap: 2, height: "100%" },
42
+ react_1.default.createElement(uikit_1.Icon, { data: expanded ? icons_1.ChevronUp : icons_1.ChevronDown }),
43
+ summary))),
44
+ helpMark,
45
+ copyButton,
46
+ removeButton))),
45
47
  react_1.default.createElement(uikit_1.Flex, { direction: "column", gap: 0.5, grow: 1 },
46
48
  react_1.default.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children),
47
49
  overviewFlag ? null : (react_1.default.createElement(components_1.EntityError, { errorMessage: meta.error, validationState: (0, utils_1.getValidationState)(meta) }))))));