@gravity-ui/dynamic-forms 5.23.1 → 5.25.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 (142) 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 +25 -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/components.d.ts +3 -13
  7. package/build/cjs/lib/unstable/core/types/schema.d.ts +14 -7
  8. package/build/cjs/lib/unstable/core/types/validation.d.ts +1 -1
  9. package/build/cjs/lib/unstable/core/useSchemaRenderer/types/state.d.ts +3 -0
  10. package/build/cjs/lib/unstable/core/useSchemaRenderer/useSchemaRenderer.js +1 -1
  11. package/build/cjs/lib/unstable/core/utils/definers.d.ts +27 -13
  12. package/build/cjs/lib/unstable/kit/components/HTMLContent/HTMLContent.d.ts +2 -1
  13. package/build/cjs/lib/unstable/kit/components/HTMLContent/HTMLContent.js +12 -2
  14. package/build/cjs/lib/unstable/kit/components/LayoutContainer/LayoutContainer.css +3 -0
  15. package/build/cjs/lib/unstable/kit/components/LayoutContainer/LayoutContainer.d.ts +1 -0
  16. package/build/cjs/lib/unstable/kit/components/LayoutContainer/LayoutContainer.js +2 -2
  17. package/build/cjs/lib/unstable/kit/constants/index.d.ts +1 -0
  18. package/build/cjs/lib/unstable/kit/constants/index.js +3 -1
  19. package/build/cjs/lib/unstable/kit/constants/messages.d.ts +2 -0
  20. package/build/cjs/lib/unstable/kit/constants/messages.js +89 -0
  21. package/build/cjs/lib/unstable/kit/entities/Alert/Alert.css +16 -0
  22. package/build/cjs/lib/unstable/kit/entities/Alert/Alert.js +26 -7
  23. package/build/cjs/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.d.ts +0 -1
  24. package/build/cjs/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.js +4 -2
  25. package/build/cjs/lib/unstable/kit/entities/ArrayTable/ArrayTable.d.ts +0 -1
  26. package/build/cjs/lib/unstable/kit/entities/ArrayTable/ArrayTable.js +7 -5
  27. package/build/cjs/lib/unstable/kit/entities/FewOfNested/FewOfNested.css +3 -0
  28. package/build/cjs/lib/unstable/kit/entities/Label/Label.js +4 -4
  29. package/build/cjs/lib/unstable/kit/entities/Monaco/Monaco.js +3 -1
  30. package/build/cjs/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.d.ts +0 -1
  31. package/build/cjs/lib/unstable/kit/entities/ObjectInline/ObjectInline.d.ts +0 -1
  32. package/build/cjs/lib/unstable/kit/entities/OneOfNested/OneOfNested.css +3 -0
  33. package/build/cjs/lib/unstable/kit/entities/TextContent/TextContent.js +4 -4
  34. package/build/cjs/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.d.ts +0 -1
  35. package/build/cjs/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.js +3 -1
  36. package/build/cjs/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.js +3 -1
  37. package/build/cjs/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.js +3 -1
  38. package/build/cjs/lib/unstable/kit/form-entities/DateInput/DateInput.js +3 -2
  39. package/build/cjs/lib/unstable/kit/form-entities/FileInput/FileInput.js +3 -1
  40. package/build/cjs/lib/unstable/kit/form-entities/MultiSelectInput/MultiSelectInput.js +4 -2
  41. package/build/cjs/lib/unstable/kit/form-entities/NumberInput/NumberInput.js +3 -2
  42. package/build/cjs/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.js +3 -2
  43. package/build/cjs/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.js +3 -2
  44. package/build/cjs/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.js +3 -1
  45. package/build/cjs/lib/unstable/kit/form-entities/RangeSliderInput/RangeSliderInput.js +9 -8
  46. package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.css +4 -0
  47. package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.d.ts +1 -1
  48. package/build/cjs/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js +30 -3
  49. package/build/cjs/lib/unstable/kit/form-entities/SelectInput/SelectInput.d.ts +1 -2
  50. package/build/cjs/lib/unstable/kit/form-entities/SelectInput/SelectInput.js +4 -2
  51. package/build/cjs/lib/unstable/kit/form-entities/SliderInput/SliderInput.js +3 -1
  52. package/build/cjs/lib/unstable/kit/form-entities/StringInput/StringInput.js +3 -2
  53. package/build/cjs/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.js +4 -3
  54. package/build/cjs/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.js +3 -1
  55. package/build/cjs/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.js +3 -2
  56. package/build/cjs/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js +8 -6
  57. package/build/cjs/lib/unstable/kit/form-layouts/FormRow/FormRow.css +3 -0
  58. package/build/cjs/lib/unstable/kit/form-layouts/FormRow/FormRow.js +8 -6
  59. package/build/cjs/lib/unstable/kit/index.d.ts +1 -0
  60. package/build/cjs/lib/unstable/kit/index.js +1 -0
  61. package/build/cjs/lib/unstable/kit/layouts/Accordeon/Accordeon.js +33 -29
  62. package/build/cjs/lib/unstable/kit/layouts/Card/Card.js +8 -6
  63. package/build/cjs/lib/unstable/kit/layouts/Section/Section.js +8 -6
  64. package/build/cjs/lib/unstable/kit/layouts/Transparent/Transparent.js +5 -3
  65. package/build/cjs/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.js +7 -5
  66. package/build/cjs/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.js +7 -5
  67. package/build/cjs/lib/unstable/kit/utils/index.d.ts +1 -1
  68. package/build/cjs/lib/unstable/kit/utils/index.js +1 -7
  69. package/build/cjs/lib/unstable/kit/utils/transformer.d.ts +10 -17
  70. package/build/cjs/lib/unstable/kit/utils/transformer.js +543 -2773
  71. package/build/esm/lib/kit/i18n/en.json +34 -0
  72. package/build/esm/lib/kit/i18n/ru.json +34 -0
  73. package/build/esm/lib/unstable/core/SchemaRendererNode/SchemaRendererNode.js +26 -20
  74. package/build/esm/lib/unstable/core/SchemaRendererNode/utils.d.ts +3 -0
  75. package/build/esm/lib/unstable/core/SchemaRendererNode/utils.js +22 -0
  76. package/build/esm/lib/unstable/core/types/components.d.ts +3 -13
  77. package/build/esm/lib/unstable/core/types/schema.d.ts +14 -7
  78. package/build/esm/lib/unstable/core/types/validation.d.ts +1 -1
  79. package/build/esm/lib/unstable/core/useSchemaRenderer/types/state.d.ts +3 -0
  80. package/build/esm/lib/unstable/core/useSchemaRenderer/useSchemaRenderer.js +1 -1
  81. package/build/esm/lib/unstable/core/utils/definers.d.ts +27 -13
  82. package/build/esm/lib/unstable/kit/components/HTMLContent/HTMLContent.d.ts +2 -1
  83. package/build/esm/lib/unstable/kit/components/HTMLContent/HTMLContent.js +12 -2
  84. package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.css +3 -0
  85. package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.d.ts +1 -0
  86. package/build/esm/lib/unstable/kit/components/LayoutContainer/LayoutContainer.js +2 -2
  87. package/build/esm/lib/unstable/kit/constants/index.d.ts +1 -0
  88. package/build/esm/lib/unstable/kit/constants/index.js +1 -0
  89. package/build/esm/lib/unstable/kit/constants/messages.d.ts +2 -0
  90. package/build/esm/lib/unstable/kit/constants/messages.js +85 -0
  91. package/build/esm/lib/unstable/kit/entities/Alert/Alert.css +16 -0
  92. package/build/esm/lib/unstable/kit/entities/Alert/Alert.d.ts +1 -0
  93. package/build/esm/lib/unstable/kit/entities/Alert/Alert.js +29 -9
  94. package/build/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.d.ts +0 -1
  95. package/build/esm/lib/unstable/kit/entities/ArrayEntity/ArrayEntity.js +4 -2
  96. package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.d.ts +0 -1
  97. package/build/esm/lib/unstable/kit/entities/ArrayTable/ArrayTable.js +7 -5
  98. package/build/esm/lib/unstable/kit/entities/FewOfNested/FewOfNested.css +3 -0
  99. package/build/esm/lib/unstable/kit/entities/Label/Label.js +5 -5
  100. package/build/esm/lib/unstable/kit/entities/Monaco/Monaco.js +3 -1
  101. package/build/esm/lib/unstable/kit/entities/ObjectEntity/ObjectEntity.d.ts +0 -1
  102. package/build/esm/lib/unstable/kit/entities/ObjectInline/ObjectInline.d.ts +0 -1
  103. package/build/esm/lib/unstable/kit/entities/OneOfNested/OneOfNested.css +3 -0
  104. package/build/esm/lib/unstable/kit/entities/TextContent/TextContent.js +5 -5
  105. package/build/esm/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.d.ts +0 -1
  106. package/build/esm/lib/unstable/kit/form-entities/CheckboxGroupInput/CheckboxGroupInput.js +3 -1
  107. package/build/esm/lib/unstable/kit/form-entities/CheckboxInput/CheckboxInput.js +3 -1
  108. package/build/esm/lib/unstable/kit/form-entities/ColorPickerInput/ColorPickerInput.js +3 -1
  109. package/build/esm/lib/unstable/kit/form-entities/DateInput/DateInput.js +3 -2
  110. package/build/esm/lib/unstable/kit/form-entities/FileInput/FileInput.js +3 -1
  111. package/build/esm/lib/unstable/kit/form-entities/MultiSelectInput/MultiSelectInput.js +4 -2
  112. package/build/esm/lib/unstable/kit/form-entities/NumberInput/NumberInput.js +3 -2
  113. package/build/esm/lib/unstable/kit/form-entities/NumberWithScaleInput/NumberWithScaleInput.js +3 -2
  114. package/build/esm/lib/unstable/kit/form-entities/PasswordInput/PasswordInput.js +3 -2
  115. package/build/esm/lib/unstable/kit/form-entities/RadioGroupInput/RadioGroupInput.js +3 -1
  116. package/build/esm/lib/unstable/kit/form-entities/RangeSliderInput/RangeSliderInput.js +9 -8
  117. package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.css +4 -0
  118. package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.d.ts +1 -1
  119. package/build/esm/lib/unstable/kit/form-entities/SegmentedRadioGroupInput/SegmentedRadioGroupInput.js +30 -3
  120. package/build/esm/lib/unstable/kit/form-entities/SelectInput/SelectInput.d.ts +1 -2
  121. package/build/esm/lib/unstable/kit/form-entities/SelectInput/SelectInput.js +4 -2
  122. package/build/esm/lib/unstable/kit/form-entities/SliderInput/SliderInput.js +3 -1
  123. package/build/esm/lib/unstable/kit/form-entities/StringInput/StringInput.js +3 -2
  124. package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.js +4 -3
  125. package/build/esm/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.js +3 -1
  126. package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.js +3 -2
  127. package/build/esm/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js +8 -6
  128. package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.css +3 -0
  129. package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.js +8 -6
  130. package/build/esm/lib/unstable/kit/index.d.ts +1 -0
  131. package/build/esm/lib/unstable/kit/index.js +1 -0
  132. package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.js +33 -29
  133. package/build/esm/lib/unstable/kit/layouts/Card/Card.js +8 -6
  134. package/build/esm/lib/unstable/kit/layouts/Section/Section.js +8 -6
  135. package/build/esm/lib/unstable/kit/layouts/Transparent/Transparent.js +5 -3
  136. package/build/esm/lib/unstable/kit/overview-layouts/OverviewColumn/OverviewColumn.js +7 -5
  137. package/build/esm/lib/unstable/kit/overview-layouts/OverviewRow/OverviewRow.js +7 -5
  138. package/build/esm/lib/unstable/kit/utils/index.d.ts +1 -1
  139. package/build/esm/lib/unstable/kit/utils/index.js +1 -1
  140. package/build/esm/lib/unstable/kit/utils/transformer.d.ts +10 -17
  141. package/build/esm/lib/unstable/kit/utils/transformer.js +544 -2773
  142. package/package.json +1 -1
@@ -1,23 +1,43 @@
1
1
  import { __rest } from "tslib";
2
2
  import React from 'react';
3
3
  import * as icons from '@gravity-ui/icons';
4
- import { Icon, Alert as UIKitAlert, } from '@gravity-ui/uikit';
5
- import { EntityContainer } from '../../components';
6
- export const Alert = ({ props, schema }) => {
7
- const { iconName, iconProps, message } = props, entityRestProps = __rest(props, ["iconName", "iconProps", "message"]);
4
+ import { Flex, Icon, Alert as UIKitAlert, } from '@gravity-ui/uikit';
5
+ import { EntityContainer, HTMLContent } from '../../components';
6
+ import { block } from '../../utils';
7
+ import './Alert.css';
8
+ const b = block('alert');
9
+ export const Alert = ({ headName, props, schema }) => {
10
+ var _a;
11
+ const { iconName, iconProps, message, title: titleProp } = props, entityRestProps = __rest(props, ["iconName", "iconProps", "message", "title"]);
12
+ const { open = true } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
13
+ const [expanded, setExpanded] = React.useState(open);
8
14
  const icon = React.useMemo(() => iconName && icons[iconName] ? (React.createElement(Icon, Object.assign({ data: icons[iconName] }, iconProps))) : undefined, [iconName, iconProps]);
15
+ const title = React.useMemo(() => {
16
+ if (titleProp && typeof titleProp !== 'string') {
17
+ return titleProp;
18
+ }
19
+ const title = typeof titleProp === 'string' ? titleProp : schema.title;
20
+ if (title) {
21
+ return (React.createElement(Flex, { className: b('title'), alignItems: "center", gap: "2", onClick: () => setExpanded(!expanded) },
22
+ React.createElement(HTMLContent, { content: title, headName: headName, variant: "subheader-2" }),
23
+ React.createElement(Icon, { data: expanded ? icons.ChevronUp : icons.ChevronDown, size: 16 })));
24
+ }
25
+ return null;
26
+ }, [headName, schema.title, titleProp, expanded]);
9
27
  const msg = React.useMemo(() => {
10
28
  if (message) {
11
29
  if (typeof message === 'string') {
12
- return React.createElement("span", { dangerouslySetInnerHTML: { __html: message } });
30
+ return (React.createElement("div", { className: b('message', { expanded }) },
31
+ React.createElement(HTMLContent, { content: message, headName: headName })));
13
32
  }
14
33
  return message;
15
34
  }
16
35
  if (schema.description) {
17
- return React.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
36
+ return (React.createElement("div", { className: b('message', { expanded }) },
37
+ React.createElement(HTMLContent, { content: schema.description, headName: headName })));
18
38
  }
19
39
  return undefined;
20
- }, [message, schema.description]);
21
- return (React.createElement(EntityContainer, { stretch: "fit", fill: "populated" },
22
- React.createElement(UIKitAlert, Object.assign({ icon: icon, message: msg }, entityRestProps))));
40
+ }, [expanded, headName, message, schema.description]);
41
+ return (React.createElement(EntityContainer, { className: b({ expanded }), stretch: "fit", fill: "populated" },
42
+ React.createElement(UIKitAlert, Object.assign({ icon: icon, message: msg, title: title }, entityRestProps))));
23
43
  };
@@ -2,6 +2,5 @@ import { type JsonSchemaArray, type NodeEntity } from '../../../core';
2
2
  import './ArrayEntity.css';
3
3
  export interface ArrayEntityProps {
4
4
  addButtonText?: string;
5
- disabled?: boolean;
6
5
  }
7
6
  export declare const ArrayEntity: NodeEntity<JsonSchemaArray, ArrayEntityProps>;
@@ -7,7 +7,9 @@ import { block } from '../../utils';
7
7
  import './ArrayEntity.css';
8
8
  const b = block('array-entity');
9
9
  export const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath, }) => {
10
+ var _a;
10
11
  const { name, onBlur, onChange, onFocus, value } = input;
12
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
11
13
  const overviewFlag = mode === SchemaRendererMode.Overview;
12
14
  const addButton = React.useMemo(() => {
13
15
  const itemsSchema = schema.items;
@@ -19,12 +21,12 @@ export const ArrayEntity = ({ headName, input, mode, props, schema, schemaPath,
19
21
  onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
20
22
  onBlur();
21
23
  };
22
- return (React.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: props.disabled || schema.readOnly, qa: `${name}-add-button` },
24
+ return (React.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-add-button` },
23
25
  React.createElement(Icon, { data: Plus, size: 14 }),
24
26
  props.addButtonText || null));
25
27
  }, [
26
28
  props.addButtonText,
27
- props.disabled,
29
+ disabled,
28
30
  name,
29
31
  onBlur,
30
32
  onChange,
@@ -3,6 +3,5 @@ import './ArrayTable.css';
3
3
  export interface ArrayTableProps {
4
4
  order?: string[];
5
5
  addButtonText?: string;
6
- disabled?: boolean;
7
6
  }
8
7
  export declare const ArrayTable: NodeEntity<JsonSchemaArray, ArrayTableProps>;
@@ -7,7 +7,9 @@ import { block } from '../../utils';
7
7
  import './ArrayTable.css';
8
8
  const b = block('array-table');
9
9
  export const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }) => {
10
+ var _a;
10
11
  const { name, onBlur, onChange, onFocus, value } = input;
12
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
11
13
  const overviewFlag = mode === SchemaRendererMode.Overview;
12
14
  const addButton = React.useMemo(() => {
13
15
  const itemsSchema = schema.items;
@@ -19,12 +21,12 @@ export const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }
19
21
  onChange([...(value || []), itemsSchema === null || itemsSchema === void 0 ? void 0 : itemsSchema.default]);
20
22
  onBlur();
21
23
  };
22
- return (React.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: props.disabled || schema.readOnly, qa: `${name}-add-button` },
24
+ return (React.createElement(Button, { className: b('add-button'), onClick: onClick, disabled: disabled || schema.readOnly, qa: `${name}-add-button` },
23
25
  React.createElement(Icon, { data: Plus, size: 14 }),
24
26
  props.addButtonText || null));
25
27
  }, [
26
28
  props.addButtonText,
27
- props.disabled,
29
+ disabled,
28
30
  name,
29
31
  onBlur,
30
32
  onChange,
@@ -55,7 +57,7 @@ export const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }
55
57
  }, [props.order, schema.items]);
56
58
  const { head, rows } = React.useMemo(() => {
57
59
  let tupleItems = false;
58
- let rowsCount = value === null || value === void 0 ? void 0 : value.length;
60
+ let rowsCount = (value === null || value === void 0 ? void 0 : value.length) || 0;
59
61
  let withRemoveButton = true;
60
62
  const getItemName = (index, property) => `${name}[${index}]${property === undefined ? '' : `.${property}`}`;
61
63
  const getItemSchemaPath = (index, property) => `${schemaPath}/items${tupleItems ? `/${index}` : ''}${property === undefined ? '' : `/properties/${property}`}`;
@@ -76,7 +78,7 @@ export const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }
76
78
  React.createElement("div", { className: b('column-title') }, (_a = column.schema.title) === null || _a === void 0 ? void 0 : _a.split(' ').map((word, wIndex, array) => (React.createElement("div", { className: b('column-title-word'), key: word },
77
79
  React.createElement(Text, { variant: "subheader-1" }, word),
78
80
  wIndex + 1 === array.length && column.schema.description ? (React.createElement(HelpMark, null,
79
- React.createElement(HTMLContent, { html: column.schema.description }))) : null))))));
81
+ React.createElement(HTMLContent, { content: column.schema.description, headName: headName }))) : null))))));
80
82
  })));
81
83
  const rows = new Array(rowsCount).fill(null).map((_, rIndex) => (React.createElement("div", { className: b('row', { 'with-remove-button': withRemoveButton }), style: { '--columns-count': columns.length }, key: rIndex },
82
84
  React.createElement("div", { className: b('cell') },
@@ -92,7 +94,7 @@ export const ArrayTable = ({ headName, input, mode, props, schema, schemaPath, }
92
94
  }
93
95
  return (React.createElement(EntityContainer, { stretch: "by-child", gap: 2, fill: "by-child" },
94
96
  React.createElement("div", null,
95
- head,
97
+ rows.length ? head : null,
96
98
  rows),
97
99
  addButton));
98
100
  };
@@ -1,6 +1,9 @@
1
1
  .sr-few-of-nested__content {
2
2
  margin-top: calc(var(--g-spacing-base) * 4);
3
3
  }
4
+ .sr-few-of-nested__content:empty {
5
+ display: none;
6
+ }
4
7
  .sr-few-of-nested__content_with-indent {
5
8
  position: relative;
6
9
  padding-left: calc(var(--g-spacing-base) * 7);
@@ -3,8 +3,8 @@ import React from 'react';
3
3
  import * as icons from '@gravity-ui/icons';
4
4
  import { Icon, Label as UIKitLabel, } from '@gravity-ui/uikit';
5
5
  import { SchemaRendererMode } from '../../../core';
6
- import { EntityContainer } from '../../components';
7
- export const Label = ({ input, mode, props, schema }) => {
6
+ import { EntityContainer, HTMLContent } from '../../components';
7
+ export const Label = ({ headName, input, mode, props, schema, }) => {
8
8
  const { value } = input;
9
9
  const { iconName, iconProps, title } = props, restEntityProps = __rest(props, ["iconName", "iconProps", "title"]);
10
10
  const overviewFlag = mode === SchemaRendererMode.Overview;
@@ -12,15 +12,15 @@ export const Label = ({ input, mode, props, schema }) => {
12
12
  const content = React.useMemo(() => {
13
13
  if (title) {
14
14
  if (typeof title === 'string') {
15
- return React.createElement("span", { dangerouslySetInnerHTML: { __html: title } });
15
+ return React.createElement(HTMLContent, { content: title, headName: headName });
16
16
  }
17
17
  return title;
18
18
  }
19
19
  if (schema.description) {
20
- return React.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
20
+ return React.createElement(HTMLContent, { content: schema.description, headName: headName });
21
21
  }
22
22
  return undefined;
23
- }, [title, schema.description]);
23
+ }, [headName, title, schema.description]);
24
24
  return (React.createElement(EntityContainer, { stretch: "fit", fill: "populated" },
25
25
  React.createElement(UIKitLabel, Object.assign({ size: overviewFlag ? 'xs' : 'm', value: value, icon: icon }, restEntityProps), content)));
26
26
  };
@@ -7,7 +7,9 @@ import { block, getBooleanValidationState } from '../../utils';
7
7
  import './Monaco.css';
8
8
  const b = block('monaco');
9
9
  export const Monaco = ({ headName, input, meta, mode, props, schema, }) => {
10
+ var _a;
10
11
  const { name, onBlur, onChange, onFocus, value } = input;
12
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
11
13
  const overviewFlag = mode === SchemaRendererMode.Overview;
12
14
  const { language = 'plaintext', options: optionsProps, withDialog = true, ignoreMonacoErrors = false, width = '100%', height = 350 } = props, restEntityProps = __rest(props, ["language", "options", "withDialog", "ignoreMonacoErrors", "width", "height"]);
13
15
  const srState = useSchemaRendererState({
@@ -20,7 +22,7 @@ export const Monaco = ({ headName, input, meta, mode, props, schema, }) => {
20
22
  const innerErrorRef = React.useRef(null);
21
23
  const [dialogOpen, setDialogOpen] = React.useState(false);
22
24
  const toggleDialogOpen = React.useCallback(() => setDialogOpen((f) => !f), []);
23
- const options = React.useMemo(() => (Object.assign({ fontSize: 12, readOnly: overviewFlag || schema.readOnly, formatOnPaste: true, formatOnType: true, contextmenu: false, minimap: { enabled: false }, autoClosingBrackets: 'languageDefined', automaticLayout: true }, optionsProps)), [optionsProps, overviewFlag, schema.readOnly]);
25
+ const options = React.useMemo(() => (Object.assign({ fontSize: 12, readOnly: overviewFlag || disabled || schema.readOnly, formatOnPaste: true, formatOnType: true, contextmenu: false, minimap: { enabled: false }, autoClosingBrackets: 'languageDefined', automaticLayout: true }, optionsProps)), [disabled, optionsProps, overviewFlag, schema.readOnly]);
24
26
  const onUpdate = React.useCallback((value) => {
25
27
  onFocus();
26
28
  onChange(value);
@@ -1,6 +1,5 @@
1
1
  import { type JsonSchemaObject, type NodeEntity } from '../../../core';
2
2
  export interface ObjectEntityProps {
3
- disabled?: boolean;
4
3
  order?: string[];
5
4
  }
6
5
  export declare const ObjectEntity: NodeEntity<JsonSchemaObject, ObjectEntityProps>;
@@ -2,7 +2,6 @@ import { type JsonSchemaObject, type NodeEntity } from '../../../core';
2
2
  import './ObjectInline.css';
3
3
  export interface ObjectInlineProps {
4
4
  delimiter?: string | Record<string, string>;
5
- disabled?: boolean;
6
5
  order?: string[];
7
6
  }
8
7
  export declare const ObjectInline: NodeEntity<JsonSchemaObject, ObjectInlineProps>;
@@ -1,6 +1,9 @@
1
1
  .sr-one-of-nested__content {
2
2
  margin-top: calc(var(--g-spacing-base) * 4);
3
3
  }
4
+ .sr-one-of-nested__content:empty {
5
+ display: none;
6
+ }
4
7
  .sr-one-of-nested__content_with-indent {
5
8
  position: relative;
6
9
  padding-left: calc(var(--g-spacing-base) * 7);
@@ -3,26 +3,26 @@ import React from 'react';
3
3
  import * as icons from '@gravity-ui/icons';
4
4
  import { Icon, Label as UIKitLabel, } from '@gravity-ui/uikit';
5
5
  import { SchemaRendererMode } from '../../../core';
6
- import { EntityContainer } from '../../components';
6
+ import { EntityContainer, HTMLContent } from '../../components';
7
7
  import { block } from '../../utils';
8
8
  import './TextContent.css';
9
9
  const b = block('text-content');
10
- export const TextContent = ({ input, mode, props, schema, }) => {
10
+ export const TextContent = ({ headName, input, mode, props, schema, }) => {
11
11
  const { className, iconName, iconProps, title: titleProp } = props, restEntityProps = __rest(props, ["className", "iconName", "iconProps", "title"]);
12
12
  const overviewFlag = mode === SchemaRendererMode.Overview;
13
13
  const icon = React.useMemo(() => iconName && icons[iconName] ? (React.createElement(Icon, Object.assign({ data: icons[iconName] }, iconProps))) : undefined, [iconName, iconProps]);
14
14
  const content = React.useMemo(() => {
15
15
  if (titleProp) {
16
16
  if (typeof titleProp === 'string') {
17
- return React.createElement("span", { dangerouslySetInnerHTML: { __html: titleProp } });
17
+ return React.createElement(HTMLContent, { content: titleProp, headName: headName });
18
18
  }
19
19
  return titleProp;
20
20
  }
21
21
  if (schema.description) {
22
- return React.createElement("span", { dangerouslySetInnerHTML: { __html: schema.description } });
22
+ return React.createElement(HTMLContent, { content: schema.description, headName: headName });
23
23
  }
24
24
  return undefined;
25
- }, [titleProp, schema.description]);
25
+ }, [headName, titleProp, schema.description]);
26
26
  return (React.createElement(EntityContainer, { stretch: "fit", fill: "populated" },
27
27
  React.createElement(UIKitLabel, Object.assign({ size: overviewFlag ? 'xs' : 'm', value: input.value, icon: icon, className: b(null, className) }, restEntityProps, { theme: "clear" }), content)));
28
28
  };
@@ -4,6 +4,5 @@ export interface CheckboxGroupInputProps {
4
4
  enumDescriptions?: Record<string, string>;
5
5
  optionsDisabled?: Record<string, boolean>;
6
6
  direction?: 'row' | 'column';
7
- disabled?: boolean;
8
7
  }
9
8
  export declare const CheckboxGroupInput: NodeEntity<JsonSchemaArray, CheckboxGroupInputProps>;
@@ -5,8 +5,10 @@ import { block, getBooleanValidationState } from '../../utils';
5
5
  import './CheckboxGroupInput.css';
6
6
  const b = block('checkbox-group-input');
7
7
  export const CheckboxGroupInput = ({ input, props, meta, schema, }) => {
8
+ var _a;
8
9
  const { name, onBlur, onChange, onFocus, value: inputValue } = input;
9
- const { enumDescriptions, direction = 'row', disabled, optionsDisabled } = props;
10
+ const { enumDescriptions, direction = 'row', optionsDisabled } = props;
11
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
10
12
  const value = React.useMemo(() => (Array.isArray(inputValue) ? inputValue : []), [inputValue]);
11
13
  const options = React.useMemo(() => {
12
14
  var _a, _b;
@@ -5,12 +5,14 @@ import { block, getBooleanValidationState } from '../../utils';
5
5
  import './CheckboxInput.css';
6
6
  const b = block('checkbox-input');
7
7
  export const CheckboxInput = ({ input, props, meta, schema, }) => {
8
+ var _a;
8
9
  const { name, onBlur, onChange, onFocus, value } = input;
10
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
9
11
  const onUpdate = React.useCallback((value) => {
10
12
  onFocus();
11
13
  onChange(value);
12
14
  onBlur();
13
15
  }, [onBlur, onChange, onFocus]);
14
16
  return (React.createElement(EntityContainer, { stretch: "fit", className: b({ error: getBooleanValidationState(meta) }) },
15
- React.createElement(Checkbox, Object.assign({ disabled: schema.readOnly }, props, { checked: value !== null && value !== void 0 ? value : false, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
17
+ React.createElement(Checkbox, Object.assign({ disabled: disabled || schema.readOnly }, props, { checked: value !== null && value !== void 0 ? value : false, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
16
18
  };
@@ -6,8 +6,10 @@ import { block, getBooleanValidationState } from '../../utils';
6
6
  import './ColorPickerInput.css';
7
7
  const b = block('color-picker-input');
8
8
  export const ColorPickerInput = ({ input, props, meta, schema, }) => {
9
+ var _a;
9
10
  const { name, onBlur, onChange, onFocus, value } = input;
10
11
  const { onOpenChange: onOpenChangeProps } = props, restEntityProps = __rest(props, ["onOpenChange"]);
12
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
11
13
  const onOpenChange = React.useCallback((open) => {
12
14
  onOpenChangeProps === null || onOpenChangeProps === void 0 ? void 0 : onOpenChangeProps(open);
13
15
  if (open) {
@@ -18,5 +20,5 @@ export const ColorPickerInput = ({ input, props, meta, schema, }) => {
18
20
  }
19
21
  }, [onBlur, onFocus, onOpenChangeProps]);
20
22
  return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
21
- React.createElement(ColorPicker, Object.assign({ disabled: schema.readOnly }, restEntityProps, { value: value !== null && value !== void 0 ? value : '', onUpdate: onChange, onOpenChange: onOpenChange, "data-qa": name }))));
23
+ React.createElement(ColorPicker, Object.assign({ disabled: disabled || schema.readOnly }, restEntityProps, { value: value !== null && value !== void 0 ? value : '', onUpdate: onChange, onOpenChange: onOpenChange, "data-qa": name }))));
22
24
  };
@@ -8,9 +8,10 @@ import { block, getBooleanValidationState, parseDate } from '../../utils';
8
8
  import './DateInput.css';
9
9
  const b = block('date-input');
10
10
  export const DateInput = ({ input, meta, props, schema, }) => {
11
- var _a;
11
+ var _a, _b;
12
12
  const { name, onBlur, onChange, onFocus, value: inputValue } = input;
13
13
  const { format = DEFAULT_DATE_FORMAT, outputFormat, timeZone: timeZoneProp } = props, restEntityProps = __rest(props, ["format", "outputFormat", "timeZone"]);
14
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
14
15
  const timeZone = timeZoneProp && isValidTimeZone(timeZoneProp) ? timeZoneProp : undefined;
15
16
  const onUpdate = React.useCallback((date) => {
16
17
  if (!date) {
@@ -40,5 +41,5 @@ export const DateInput = ({ input, meta, props, schema, }) => {
40
41
  }, [outputFormat, onChange]);
41
42
  const value = React.useMemo(() => parseDate(inputValue, outputFormat, timeZone), [inputValue, outputFormat, timeZone]);
42
43
  return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
43
- React.createElement(DatePicker, Object.assign({ format: format, popupPlacement: "bottom-start", placeholder: `${((_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) || ''}`, disabled: schema.readOnly, hasClear: true }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, timeZone: timeZone, errorMessage: undefined, validationState: undefined, "data-qa": name }))));
44
+ React.createElement(DatePicker, Object.assign({ format: format, popupPlacement: "bottom-start", placeholder: `${((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: disabled || schema.readOnly, hasClear: true }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, timeZone: timeZone, errorMessage: undefined, validationState: undefined, "data-qa": name }))));
44
45
  };
@@ -6,8 +6,10 @@ import { unstable_FileDropZone as FileDropZone, } from '@gravity-ui/uikit/unstab
6
6
  import { EntityContainer } from '../../components';
7
7
  import { getValidationState } from '../../utils';
8
8
  export const FileInput = ({ input, meta, props, schema, }) => {
9
+ var _a;
9
10
  const { onBlur, onChange, onFocus } = input;
10
11
  const { readAsMethod = 'readAsBinaryString' } = props, restEntityProps = __rest(props, ["readAsMethod"]);
12
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
11
13
  const counterRef = React.useRef(0);
12
14
  const [file, setFile] = React.useState(null);
13
15
  const actions = React.useMemo(() => [
@@ -45,5 +47,5 @@ export const FileInput = ({ input, meta, props, schema, }) => {
45
47
  React.createElement(FilePreview, { file: file, actions: actions })));
46
48
  }
47
49
  return (React.createElement(EntityContainer, { stretch: "max" },
48
- React.createElement(FileDropZone, Object.assign({ disabled: schema.readOnly, accept: [] }, restEntityProps, { onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), multiple: false }))));
50
+ React.createElement(FileDropZone, Object.assign({ disabled: disabled || schema.readOnly, accept: [] }, restEntityProps, { onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), multiple: false }))));
49
51
  };
@@ -3,11 +3,13 @@ import React from 'react';
3
3
  import { Flex, Select, Text } from '@gravity-ui/uikit';
4
4
  import isString from 'lodash/isString';
5
5
  import { EntityContainer } from '../../components';
6
+ import { DASH } from '../../constants';
6
7
  import { getValidationState } from '../../utils';
7
8
  export const MultiSelectInput = ({ input, meta, props, schema, }) => {
8
- var _a, _b;
9
+ var _a, _b, _c;
9
10
  const { name, onBlur, onChange, onFocus, value: inputValue } = input;
10
11
  const { enumDescriptions, optionsMeta } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsMeta"]);
12
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
11
13
  const value = React.useMemo(() => (Array.isArray(inputValue) && inputValue.every(isString) ? inputValue : undefined), [inputValue]);
12
14
  const enumValues = schema.items && 'enum' in schema.items ? schema.items.enum : undefined;
13
15
  const options = React.useMemo(() => {
@@ -30,5 +32,5 @@ export const MultiSelectInput = ({ input, meta, props, schema, }) => {
30
32
  const renderOption = React.useCallback((option) => (React.createElement(React.Fragment, { key: option.value }, option.content || option.text || option.value)), []);
31
33
  const getOptionHeight = React.useCallback((option) => { var _a; return (((_a = option.data) === null || _a === void 0 ? void 0 : _a.optionMeta) ? 44 : 28); }, []);
32
34
  return (React.createElement(EntityContainer, { stretch: "max" },
33
- React.createElement(Select, Object.assign({ width: "max", options: options, filterable: ((enumValues === null || enumValues === void 0 ? void 0 : enumValues.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: `${((_b = (_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), multiple: true, qa: name }))));
35
+ React.createElement(Select, Object.assign({ width: "max", options: options, filterable: ((enumValues === null || enumValues === void 0 ? void 0 : enumValues.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: `${((_c = (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[0]) || DASH}`, disabled: disabled || schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), multiple: true, qa: name }))));
34
36
  };
@@ -5,8 +5,9 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
5
5
  import './NumberInput.css';
6
6
  const b = block('number-input');
7
7
  export const NumberInput = ({ input, meta, props, schema, }) => {
8
- var _a;
8
+ var _a, _b;
9
9
  const { name, onBlur, onChange, onFocus, value } = input;
10
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
10
11
  return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
11
- React.createElement(UIKitNumberInput, Object.assign({ min: schema.minimum, max: schema.maximum, step: schema.multipleOf || 1, placeholder: `${((_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) || ''}`, disabled: schema.readOnly, allowDecimal: true, hasClear: true }, props, { value: value === undefined ? null : value, defaultValue: schema.default, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
12
+ React.createElement(UIKitNumberInput, Object.assign({ min: schema.minimum, max: schema.maximum, step: schema.multipleOf || 1, placeholder: `${((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: disabled || schema.readOnly, allowDecimal: true, hasClear: true }, props, { value: value === undefined ? null : value, defaultValue: schema.default, onBlur: onBlur, onFocus: onFocus, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
12
13
  };
@@ -7,9 +7,10 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
7
7
  import './NumberWithScaleInput.css';
8
8
  const b = block('number-with-scale-input');
9
9
  export const NumberWithScaleInput = ({ input, meta, props, schema, }) => {
10
- var _a;
10
+ var _a, _b;
11
11
  const { name, onBlur, onChange, onFocus, value: inputValue } = input;
12
12
  const { defaultType, viewType, scale, max, min, step } = props, restEntityProps = __rest(props, ["defaultType", "viewType", "scale", "max", "min", "step"]);
13
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
13
14
  const scaleKit = React.useMemo(() => {
14
15
  if (scale) {
15
16
  const preparedScale = {};
@@ -67,7 +68,7 @@ export const NumberWithScaleInput = ({ input, meta, props, schema, }) => {
67
68
  }, [max, min, step, inputValue, onChange, scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.scale, scaleValue, schema]);
68
69
  return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }), direction: "row", gap: 2 },
69
70
  React.createElement("div", { className: b('input') },
70
- React.createElement(NumberInput, Object.assign({ placeholder: `${((_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) || ''}`, disabled: schema.readOnly, allowDecimal: true, hasClear: true }, restEntityProps, preparedInputProps, { onBlur: onBlur, onFocus: onFocus, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))),
71
+ React.createElement(NumberInput, Object.assign({ placeholder: `${((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || ''}`, disabled: disabled || schema.readOnly, allowDecimal: true, hasClear: true }, restEntityProps, preparedInputProps, { onBlur: onBlur, onFocus: onFocus, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))),
71
72
  scaleOptions.length ? (React.createElement("div", { style: { width: scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.minScaleLength } },
72
73
  React.createElement(Select, { width: "max", options: scaleOptions, value: scaleValue, onUpdate: setScaleValue, multiple: false }))) : null));
73
74
  };
@@ -5,8 +5,9 @@ import { block, getBooleanValidationState, getValidationState } from '../../util
5
5
  import './PasswordInput.css';
6
6
  const b = block('password-input');
7
7
  export const PasswordInput = ({ input, meta, props, schema, }) => {
8
- var _a;
8
+ var _a, _b;
9
9
  const { name, onBlur, onChange, onFocus, value } = input;
10
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
10
11
  return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
11
- React.createElement(UIKitPasswordInput, Object.assign({ autoComplete: "new-password", placeholder: (_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0], disabled: schema.readOnly, hasClear: true }, props, { value: value !== null && value !== void 0 ? value : '', onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
12
+ React.createElement(UIKitPasswordInput, Object.assign({ autoComplete: "new-password", placeholder: (_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0], disabled: disabled || schema.readOnly, hasClear: true }, props, { value: value !== null && value !== void 0 ? value : '', onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
12
13
  };
@@ -6,8 +6,10 @@ import { block, getBooleanValidationState } from '../../utils';
6
6
  import './RadioGroupInput.css';
7
7
  const b = block('radio-group-input');
8
8
  export const RadioGroupInput = ({ input, meta, props, schema, }) => {
9
+ var _a;
9
10
  const { name, onBlur, onChange, onFocus, value } = input;
10
11
  const { enumDescriptions, optionsDisabled, direction = 'horizontal' } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsDisabled", "direction"]);
12
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
11
13
  const options = React.useMemo(() => {
12
14
  var _a;
13
15
  return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => ({
@@ -17,5 +19,5 @@ export const RadioGroupInput = ({ input, meta, props, schema, }) => {
17
19
  }));
18
20
  }, [enumDescriptions, optionsDisabled, schema.enum]);
19
21
  return (React.createElement(EntityContainer, { stretch: "fit", className: b({ error: getBooleanValidationState(meta), direction }), justifyContent: "center" },
20
- React.createElement(RadioGroup, Object.assign({ options: options, disabled: schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, direction: direction, qa: name }))));
22
+ React.createElement(RadioGroup, Object.assign({ options: options, disabled: disabled || schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onChange, direction: direction, qa: name }))));
21
23
  };
@@ -4,22 +4,23 @@ import { Slider } from '@gravity-ui/uikit';
4
4
  import { EntityContainer } from '../../components';
5
5
  import { getValidationState } from '../../utils';
6
6
  export const RangeSliderInput = ({ input, meta, props, schema, }) => {
7
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
7
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
8
8
  const { name, onBlur, onChange, onFocus, value: inputValue } = input;
9
9
  const { propertyKeys } = props, restEntityProps = __rest(props, ["propertyKeys"]);
10
+ const { disabled } = ((_a = schema.nodeParameters) === null || _a === void 0 ? void 0 : _a.flags) || {};
10
11
  const [fromKey, toKey] = propertyKeys || ['from', 'to'];
11
- const min = ((_a = schema.properties) === null || _a === void 0 ? void 0 : _a[fromKey]) && 'minimum' in schema.properties[fromKey]
12
- ? (_c = (_b = schema.properties) === null || _b === void 0 ? void 0 : _b[fromKey]) === null || _c === void 0 ? void 0 : _c.minimum
12
+ const min = ((_b = schema.properties) === null || _b === void 0 ? void 0 : _b[fromKey]) && 'minimum' in schema.properties[fromKey]
13
+ ? (_d = (_c = schema.properties) === null || _c === void 0 ? void 0 : _c[fromKey]) === null || _d === void 0 ? void 0 : _d.minimum
13
14
  : undefined;
14
- const max = ((_d = schema.properties) === null || _d === void 0 ? void 0 : _d[toKey]) && 'maximum' in schema.properties[toKey]
15
- ? (_f = (_e = schema.properties) === null || _e === void 0 ? void 0 : _e[toKey]) === null || _f === void 0 ? void 0 : _f.maximum
15
+ const max = ((_e = schema.properties) === null || _e === void 0 ? void 0 : _e[toKey]) && 'maximum' in schema.properties[toKey]
16
+ ? (_g = (_f = schema.properties) === null || _f === void 0 ? void 0 : _f[toKey]) === null || _g === void 0 ? void 0 : _g.maximum
16
17
  : undefined;
17
18
  const value = isNaN(Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey])) || isNaN(Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey]))
18
19
  ? undefined
19
20
  : [Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[fromKey]), Number(inputValue === null || inputValue === void 0 ? void 0 : inputValue[toKey])];
20
- const defaultValue = isNaN(Number((_g = schema.default) === null || _g === void 0 ? void 0 : _g[fromKey])) || isNaN(Number((_h = schema.default) === null || _h === void 0 ? void 0 : _h[toKey]))
21
+ const defaultValue = isNaN(Number((_h = schema.default) === null || _h === void 0 ? void 0 : _h[fromKey])) || isNaN(Number((_j = schema.default) === null || _j === void 0 ? void 0 : _j[toKey]))
21
22
  ? undefined
22
- : [Number((_j = schema.default) === null || _j === void 0 ? void 0 : _j[fromKey]), Number((_k = schema.default) === null || _k === void 0 ? void 0 : _k[toKey])];
23
+ : [Number((_k = schema.default) === null || _k === void 0 ? void 0 : _k[fromKey]), Number((_l = schema.default) === null || _l === void 0 ? void 0 : _l[toKey])];
23
24
  const onUpdate = React.useCallback((next) => {
24
25
  if (!Array.isArray(next)) {
25
26
  return;
@@ -27,5 +28,5 @@ export const RangeSliderInput = ({ input, meta, props, schema, }) => {
27
28
  onChange({ [fromKey]: next[0], [toKey]: next[1] });
28
29
  }, [fromKey, toKey, onChange]);
29
30
  return (React.createElement(EntityContainer, { stretch: "max" },
30
- React.createElement(Slider, Object.assign({ min: min, max: max, step: 1, marks: 2, disabled: schema.readOnly, tooltipDisplay: "on" }, restEntityProps, { defaultValue: defaultValue, value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
31
+ React.createElement(Slider, Object.assign({ min: min, max: max, step: 1, marks: 2, disabled: disabled || schema.readOnly, tooltipDisplay: "on" }, restEntityProps, { defaultValue: defaultValue, value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
31
32
  };
@@ -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,7 +1,7 @@
1
1
  import { type SegmentedRadioGroupProps } from '@gravity-ui/uikit';
2
2
  import type { JsonSchemaString, NodeEntity } from '../../../core';
3
3
  import './SegmentedRadioGroupInput.css';
4
- export interface SegmentedRadioGroupInputProps extends Omit<SegmentedRadioGroupProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
4
+ export interface SegmentedRadioGroupInputProps extends Omit<SegmentedRadioGroupProps, 'children' | 'defaultValue' | 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
5
5
  enumDescriptions?: Record<string, string>;
6
6
  optionsDisabled?: Record<string, boolean>;
7
7
  }
@@ -3,11 +3,17 @@ import React from 'react';
3
3
  import { SegmentedRadioGroup } from '@gravity-ui/uikit';
4
4
  import { EntityContainer } from '../../components';
5
5
  import { block, getBooleanValidationState } from '../../utils';
6
+ import { SelectInput } from '../SelectInput';
6
7
  import './SegmentedRadioGroupInput.css';
7
8
  const b = block('segmented-radio-group-input');
8
- export const SegmentedRadioGroupInput = ({ input, meta, props, schema }) => {
9
+ export const SegmentedRadioGroupInput = (_a) => {
10
+ var _b;
11
+ var { input, meta, props, schema } = _a, restProps = __rest(_a, ["input", "meta", "props", "schema"]);
9
12
  const { name, onBlur, onChange, onFocus, value } = input;
10
13
  const { enumDescriptions, optionsDisabled } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsDisabled"]);
14
+ const { disabled } = ((_b = schema.nodeParameters) === null || _b === void 0 ? void 0 : _b.flags) || {};
15
+ const ref = React.useRef(null);
16
+ const [overflowed, setOverflowed] = React.useState(false);
11
17
  const options = React.useMemo(() => {
12
18
  var _a;
13
19
  return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => ({
@@ -21,6 +27,27 @@ export const SegmentedRadioGroupInput = ({ input, meta, props, schema }) => {
21
27
  onChange(value);
22
28
  onBlur();
23
29
  }, [onBlur, onChange, onFocus]);
24
- return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
25
- React.createElement(SegmentedRadioGroup, Object.assign({ width: "max", disabled: schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
30
+ React.useLayoutEffect(() => {
31
+ const root = ref.current;
32
+ if (!root) {
33
+ return;
34
+ }
35
+ const measure = () => {
36
+ const texts = root.querySelectorAll('.g-segmented-radio-group__option-text');
37
+ setOverflowed(Array.from(texts).some((node) => {
38
+ if (node.offsetWidth === 0 && node.scrollWidth === 0) {
39
+ return false;
40
+ }
41
+ return node.scrollWidth > node.clientWidth;
42
+ }));
43
+ };
44
+ measure();
45
+ const observer = new ResizeObserver(measure);
46
+ observer.observe(root);
47
+ return () => observer.disconnect();
48
+ }, [options]);
49
+ return (React.createElement(EntityContainer, { stretch: "max" },
50
+ overflowed ? (React.createElement(SelectInput, Object.assign({ input: input, meta: meta, props: props, schema: schema }, restProps))) : null,
51
+ React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta), overflowed }) },
52
+ React.createElement(SegmentedRadioGroup, Object.assign({ ref: ref, width: "max", disabled: disabled || schema.readOnly, options: options }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name })))));
26
53
  };
@@ -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>;