@gravity-ui/dynamic-forms 5.20.0 → 5.22.0

package/build/esm/lib/unstable/kit/form-entities/SelectInput/SelectInput.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Flex, Select, Text } from '@gravity-ui/uikit';
+import isString from 'lodash/isString';
+import { EntityContainer } from '../../components';
+import { getValidationState } from '../../utils';
+export const SelectInput = ({ input, meta, props, schema, }) => {
+    var _a, _b;
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
+    const { enumDescriptions, optionsMeta } = props, restEntityProps = __rest(props, ["enumDescriptions", "optionsMeta"]);
+    const value = React.useMemo(() => (isString(inputValue) ? [inputValue] : undefined), [inputValue]);
+    const onUpdate = React.useCallback((v) => onChange(v[0]), [onChange]);
+    const options = React.useMemo(() => {
+        var _a;
+        return (_a = schema.enum) === null || _a === void 0 ? void 0 : _a.map((value) => {
+            const optionMeta = optionsMeta === null || optionsMeta === void 0 ? void 0 : optionsMeta[value];
+            const text = (enumDescriptions === null || enumDescriptions === void 0 ? void 0 : enumDescriptions[value]) || value;
+            let content = text;
+            if (optionMeta) {
+                content = (React.createElement(Flex, { direction: "column", gap: "0.5" },
+                    React.createElement(Text, null, text),
+                    React.createElement(Text, { color: "secondary" }, optionMeta)));
+            }
+            return { value, text, content, key: value, data: { optionMeta } };
+        });
+    }, [enumDescriptions, optionsMeta, schema.enum]);
+    const renderOption = React.useCallback((option) => (React.createElement(React.Fragment, { key: option.value }, option.content || option.text || option.value)), []);
+    const getOptionHeight = React.useCallback((option) => { var _a; return (((_a = option.data) === null || _a === void 0 ? void 0 : _a.optionMeta) ? 44 : 28); }, []);
+    return (React.createElement(EntityContainer, { stretch: "max" },
+        React.createElement(Select, Object.assign({ width: "max", options: options, filterable: (((_a = schema.enum) === null || _a === void 0 ? void 0 : _a.length) || 0) > 9, renderOption: renderOption, getOptionHeight: getOptionHeight, placeholder: ((_b = schema.examples) === null || _b === void 0 ? void 0 : _b[0]) || '', disabled: schema.readOnly }, restEntityProps, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
+};

package/build/esm/lib/unstable/kit/form-entities/SelectInput/index.d.ts

@@ -0,0 +1 @@
+export { SelectInput, type SelectInputProps } from './SelectInput';

package/build/esm/lib/unstable/kit/form-entities/SelectInput/index.js

@@ -0,0 +1 @@
+export { SelectInput } from './SelectInput';

package/build/esm/lib/unstable/kit/form-entities/SliderInput/SliderInput.d.ts

@@ -0,0 +1,5 @@
+import { type SliderProps } from '@gravity-ui/uikit';
+import type { JsonSchemaNumber, NodeEntity } from '../../../core';
+export interface SliderInputProps extends Omit<SliderProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
+}
+export declare const SliderInput: NodeEntity<JsonSchemaNumber, SliderInputProps>;

package/build/esm/lib/unstable/kit/form-entities/SliderInput/SliderInput.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Slider } from '@gravity-ui/uikit';
+import { EntityContainer } from '../../components';
+import { getValidationState } from '../../utils';
+export const SliderInput = ({ input, meta, props, schema, }) => {
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
+    const value = isNaN(Number(inputValue)) ? undefined : Number(inputValue);
+    const onUpdate = React.useCallback((next) => {
+        if (Array.isArray(next)) {
+            return;
+        }
+        onChange(next);
+    }, [onChange]);
+    return (React.createElement(EntityContainer, { stretch: "max" },
+        React.createElement(Slider, Object.assign({ min: schema.minimum, max: schema.maximum, step: 1, marks: 2, disabled: schema.readOnly, tooltipDisplay: "on" }, props, { value: value, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))));
+};

package/build/esm/lib/unstable/kit/form-entities/SliderInput/index.d.ts

@@ -0,0 +1 @@
+export { SliderInput, type SliderInputProps } from './SliderInput';

package/build/esm/lib/unstable/kit/form-entities/SliderInput/index.js

@@ -0,0 +1 @@
+export { SliderInput } from './SliderInput';

package/build/esm/lib/unstable/kit/form-entities/StringInput/StringInput.css

@@ -0,0 +1,3 @@
+.sr-string-input_error .g-text-input__content {
+  outline: none;
+}

package/build/esm/lib/unstable/kit/form-entities/StringInput/StringInput.d.ts

@@ -0,0 +1,6 @@
+import { type TextInputProps } from '@gravity-ui/uikit';
+import type { JsonSchemaString, NodeEntity } from '../../../core';
+import './StringInput.css';
+export interface StringInputProps extends Omit<TextInputProps, 'type' | 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
+}
+export declare const StringInput: NodeEntity<JsonSchemaString, StringInputProps>;

package/build/esm/lib/unstable/kit/form-entities/StringInput/StringInput.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import { EntityContainer } from '../../components';
+import { block, getBooleanValidationState, getValidationState } from '../../utils';
+import './StringInput.css';
+const b = block('string-input');
+export const StringInput = ({ input, meta, props, schema, }) => {
+    var _a, _b;
+    return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
+        React.createElement(TextInput, Object.assign({ placeholder: (_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0], disabled: schema.readOnly, hasClear: true }, props, { value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: input.name, type: "text" }))));
+};

package/build/esm/lib/unstable/kit/form-entities/StringInput/index.d.ts

@@ -0,0 +1 @@
+export { StringInput, type StringInputProps } from './StringInput';

package/build/esm/lib/unstable/kit/form-entities/StringInput/index.js

@@ -0,0 +1 @@
+export { StringInput } from './StringInput';

package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.css

@@ -0,0 +1,6 @@
+.sr-string-number-with-scale-input_error .g-text-input__content {
+  outline: none;
+}
+.sr-string-number-with-scale-input__input {
+  flex: 1;
+}

package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.d.ts

@@ -0,0 +1,12 @@
+import { type TextInputProps } from '@gravity-ui/uikit';
+import type { JsonSchemaString, NodeEntity } from '../../../core';
+import './StringNumberWithScaleInput.css';
+export interface StringNumberWithScaleInputProps extends Omit<TextInputProps, 'defaultValue' | 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
+    defaultType?: string;
+    viewType?: string;
+    scale?: Record<string, {
+        title: string;
+        factor: string;
+    }>;
+}
+export declare const StringNumberWithScaleInput: NodeEntity<JsonSchemaString, StringNumberWithScaleInputProps>;

package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/StringNumberWithScaleInput.js

@@ -0,0 +1,78 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { Select, TextInput } from '@gravity-ui/uikit';
+import Decimal from 'decimal.js';
+import { EntityContainer } from '../../components';
+import { block, getBooleanValidationState, getValidationState, isStringNumber } from '../../utils';
+import './StringNumberWithScaleInput.css';
+const b = block('string-number-with-scale-input');
+export const StringNumberWithScaleInput = ({ input, meta, props, schema }) => {
+    var _a;
+    const { name, onBlur, onChange, onFocus, value: inputValue } = input;
+    const { defaultType, viewType, scale } = props, restEntityProps = __rest(props, ["defaultType", "viewType", "scale"]);
+    const scaleKit = React.useMemo(() => {
+        if (scale) {
+            const preparedScale = {};
+            let minScaleLength = 0;
+            Object.entries(scale).forEach(([key, value]) => {
+                if (isStringNumber(value.factor)) {
+                    preparedScale[key] = value;
+                    if ((value.title || key).length * 12 > minScaleLength) {
+                        minScaleLength = (value.title || key).length * 12;
+                    }
+                }
+            });
+            if (defaultType && preparedScale[defaultType]) {
+                return {
+                    scale: preparedScale,
+                    defaultType,
+                    viewType: viewType && preparedScale[viewType] ? [viewType] : [defaultType],
+                    minScaleLength: `${minScaleLength + 42}px`,
+                };
+            }
+        }
+        return null;
+    }, [defaultType, viewType, scale]);
+    const [scaleValue, setScaleValue] = React.useState((scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.viewType) || []);
+    const scaleOptions = React.useMemo(() => {
+        return Object.entries((scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.scale) || {}).map(([key, value]) => ({
+            value: key,
+            content: value.title || key,
+        }));
+    }, [scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.scale]);
+    const preparedInputProps = React.useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const factor = (_b = (_a = scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.scale) === null || _a === void 0 ? void 0 : _a[scaleValue[0]]) === null || _b === void 0 ? void 0 : _b.factor;
+        const result = {
+            max: isStringNumber((_c = schema.stringNumber) === null || _c === void 0 ? void 0 : _c.maximum)
+                ? (_d = schema.stringNumber) === null || _d === void 0 ? void 0 : _d.maximum
+                : undefined,
+            min: isStringNumber((_e = schema.stringNumber) === null || _e === void 0 ? void 0 : _e.minimum)
+                ? (_f = schema.stringNumber) === null || _f === void 0 ? void 0 : _f.minimum
+                : undefined,
+            step: isStringNumber((_g = schema.stringNumber) === null || _g === void 0 ? void 0 : _g.multipleOf)
+                ? (_h = schema.stringNumber) === null || _h === void 0 ? void 0 : _h.multipleOf
+                : '1',
+            defaultValue: isStringNumber(schema.default) ? schema.default : undefined,
+            value: inputValue || '',
+            onUpdate: onChange,
+        };
+        if (factor) {
+            return {
+                max: result.max ? new Decimal(result.max).div(factor).toString() : undefined,
+                min: result.min ? new Decimal(result.min).div(factor).toString() : undefined,
+                step: new Decimal(result.step).div(factor).toString(),
+                value: isStringNumber(result.value)
+                    ? new Decimal(result.value).div(factor).toString()
+                    : result.value,
+                onUpdate: (value) => onChange(isStringNumber(value) ? new Decimal(value).mul(factor).toString() : value),
+            };
+        }
+        return result;
+    }, [inputValue, onChange, scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.scale, scaleValue, schema]);
+    return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }), direction: "row", gap: 2 },
+        React.createElement("div", { className: b('input') },
+            React.createElement(TextInput, Object.assign({ placeholder: `${((_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0]) || ''}`, disabled: schema.readOnly, hasClear: true }, restEntityProps, preparedInputProps, { onBlur: onBlur, onFocus: onFocus, errorMessage: undefined, validationState: getValidationState(meta), qa: name }))),
+        scaleOptions.length ? (React.createElement("div", { style: { width: scaleKit === null || scaleKit === void 0 ? void 0 : scaleKit.minScaleLength } },
+            React.createElement(Select, { width: "max", options: scaleOptions, value: scaleValue, onUpdate: setScaleValue, multiple: false, disabled: schema.readOnly || meta.error, qa: `${name}-scale` }))) : null));
+};

package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/index.d.ts

@@ -0,0 +1 @@
+export { StringNumberWithScaleInput, type StringNumberWithScaleInputProps, } from './StringNumberWithScaleInput';

package/build/esm/lib/unstable/kit/form-entities/StringNumberWithScaleInput/index.js

@@ -0,0 +1 @@
+export { StringNumberWithScaleInput, } from './StringNumberWithScaleInput';

package/build/esm/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.css

@@ -0,0 +1,11 @@
+.sr-switch-input {
+  min-height: 28px;
+}
+.sr-switch-input_error .g-switch .g-switch__indicator:hover::before {
+  border: 1px solid var(--g-color-text-danger);
+  box-sizing: border-box;
+}
+.sr-switch-input_error .g-switch .g-switch__indicator::before {
+  border: 1px solid var(--g-color-text-danger);
+  box-sizing: border-box;
+}

package/build/esm/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.d.ts

@@ -0,0 +1,6 @@
+import { type SwitchProps } from '@gravity-ui/uikit';
+import type { JsonSchemaBoolean, NodeEntity } from '../../../core';
+import './SwitchInput.css';
+export interface SwitchInputProps extends Omit<SwitchProps, 'checked' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'qa'> {
+}
+export declare const SwitchInput: NodeEntity<JsonSchemaBoolean, SwitchInputProps>;

package/build/esm/lib/unstable/kit/form-entities/SwitchInput/SwitchInput.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Switch } from '@gravity-ui/uikit';
+import { EntityContainer } from '../../components';
+import { block, getBooleanValidationState } from '../../utils';
+import './SwitchInput.css';
+const b = block('switch-input');
+export const SwitchInput = ({ input, meta, props, schema, }) => {
+    const { name, onBlur, onChange, onFocus, value } = input;
+    const onUpdate = React.useCallback((value) => {
+        onFocus();
+        onChange(value);
+        onBlur();
+    }, [onBlur, onChange, onFocus]);
+    return (React.createElement(EntityContainer, { stretch: "fit", className: b({ error: getBooleanValidationState(meta) }), justifyContent: "center" },
+        React.createElement(Switch, Object.assign({ disabled: schema.readOnly }, props, { checked: value !== null && value !== void 0 ? value : false, onFocus: onFocus, onBlur: onBlur, onUpdate: onUpdate, qa: name }))));
+};

package/build/esm/lib/unstable/kit/form-entities/SwitchInput/index.d.ts

@@ -0,0 +1 @@
+export { SwitchInput, type SwitchInputProps } from './SwitchInput';

package/build/esm/lib/unstable/kit/form-entities/SwitchInput/index.js

@@ -0,0 +1 @@
+export { SwitchInput } from './SwitchInput';

package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.css

@@ -0,0 +1,3 @@
+.sr-text-area-input_error .g-text-area__content {
+  outline: none;
+}

package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.d.ts

@@ -0,0 +1,6 @@
+import { type TextAreaProps } from '@gravity-ui/uikit';
+import { type JsonSchemaString, type NodeEntity } from '../../../core';
+import './TextAreaInput.css';
+export interface TextAreaInputProps extends Omit<TextAreaProps, 'value' | 'onFocus' | 'onBlur' | 'onChange' | 'onUpdate' | 'errorMessage' | 'validationState' | 'qa'> {
+}
+export declare const TextAreaInput: NodeEntity<JsonSchemaString, TextAreaInputProps>;

package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/TextAreaInput.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { TextArea } from '@gravity-ui/uikit';
+import { EntityContainer } from '../../components';
+import { block, getBooleanValidationState, getValidationState } from '../../utils';
+import './TextAreaInput.css';
+const b = block('text-area-input');
+export const TextAreaInput = ({ input, meta, props, schema, }) => {
+    var _a, _b;
+    return (React.createElement(EntityContainer, { stretch: "max", className: b({ error: getBooleanValidationState(meta) }) },
+        React.createElement(TextArea, Object.assign({ maxRows: 20, minRows: 0, placeholder: (_a = schema.examples) === null || _a === void 0 ? void 0 : _a[0], disabled: schema.readOnly, hasClear: true }, props, { value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onFocus: input.onFocus, onBlur: input.onBlur, onUpdate: input.onChange, errorMessage: undefined, validationState: getValidationState(meta), qa: input.name }))));
+};

package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/index.d.ts

@@ -0,0 +1 @@
+export { TextAreaInput, type TextAreaInputProps } from './TextAreaInput';

package/build/esm/lib/unstable/kit/form-entities/TextAreaInput/index.js

@@ -0,0 +1 @@
+export { TextAreaInput } from './TextAreaInput';

package/build/esm/lib/unstable/kit/form-entities/index.d.ts

@@ -0,0 +1,19 @@
+export { CheckboxInput, type CheckboxInputProps } from './CheckboxInput';
+export { CheckboxGroupInput, type CheckboxGroupInputProps } from './CheckboxGroupInput';
+export { ColorPickerInput, type ColorPickerInputProps } from './ColorPickerInput';
+export { DateInput, type DateInputProps } from './DateInput';
+export { FileInput, type FileInputProps } from './FileInput';
+export { MultiSelectInput, type MultiSelectInputProps } from './MultiSelectInput';
+export { NumberInput, type NumberInputProps } from './NumberInput';
+export { NumberWithScaleInput, type NumberWithScaleInputProps } from './NumberWithScaleInput';
+export { PasswordInput, type PasswordInputProps } from './PasswordInput';
+export { RadioGroupInput, type RadioGroupInputProps } from './RadioGroupInput';
+export { RangeInput, type RangeInputProps } from './RangeInput';
+export { RangeSliderInput, type RangeSliderInputProps } from './RangeSliderInput';
+export { SelectInput, type SelectInputProps } from './SelectInput';
+export { SegmentedRadioGroupInput, type SegmentedRadioGroupInputProps, } from './SegmentedRadioGroupInput';
+export { SliderInput, type SliderInputProps } from './SliderInput';
+export { StringInput, type StringInputProps } from './StringInput';
+export { StringNumberWithScaleInput, type StringNumberWithScaleInputProps, } from './StringNumberWithScaleInput';
+export { SwitchInput, type SwitchInputProps } from './SwitchInput';
+export { TextAreaInput, type TextAreaInputProps } from './TextAreaInput';

package/build/esm/lib/unstable/kit/form-entities/index.js

@@ -0,0 +1,19 @@
+export { CheckboxInput } from './CheckboxInput';
+export { CheckboxGroupInput } from './CheckboxGroupInput';
+export { ColorPickerInput } from './ColorPickerInput';
+export { DateInput } from './DateInput';
+export { FileInput } from './FileInput';
+export { MultiSelectInput } from './MultiSelectInput';
+export { NumberInput } from './NumberInput';
+export { NumberWithScaleInput } from './NumberWithScaleInput';
+export { PasswordInput } from './PasswordInput';
+export { RadioGroupInput } from './RadioGroupInput';
+export { RangeInput } from './RangeInput';
+export { RangeSliderInput } from './RangeSliderInput';
+export { SelectInput } from './SelectInput';
+export { SegmentedRadioGroupInput, } from './SegmentedRadioGroupInput';
+export { SliderInput } from './SliderInput';
+export { StringInput } from './StringInput';
+export { StringNumberWithScaleInput, } from './StringNumberWithScaleInput';
+export { SwitchInput } from './SwitchInput';
+export { TextAreaInput } from './TextAreaInput';

package/build/esm/lib/unstable/kit/form-layouts/FormColumn/FormColumn.css

@@ -0,0 +1,21 @@
+.sr-form-column {
+  margin-bottom: calc(var(--g-spacing-base) * 4);
+}
+.sr-form-column:last-child {
+  margin-bottom: 0;
+}
+.sr-form-column__top {
+  display: inline;
+}
+.sr-form-column__title {
+  min-height: 18px;
+  margin-right: calc(var(--g-spacing-base) * 1);
+}
+.sr-form-column__title_required::after {
+  content: "*";
+  margin-left: calc(var(--g-spacing-base) * 1);
+  color: var(--g-color-text-danger);
+}
+.sr-form-column__help-mark {
+  margin-top: 1.5px;
+}

package/build/esm/lib/unstable/kit/form-layouts/FormColumn/FormColumn.d.ts

@@ -0,0 +1,6 @@
+import type { JsonSchema, NodeLayout } from '../../../core';
+import './FormColumn.css';
+export interface FormColumnProps {
+    descriptionType?: 'tooltip' | 'bottom';
+}
+export declare const FormColumn: NodeLayout<JsonSchema, FormColumnProps>;

package/build/esm/lib/unstable/kit/form-layouts/FormColumn/FormColumn.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
+import { ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer } from '../../components';
+import { block, getValidationState } from '../../utils';
+import './FormColumn.css';
+const b = block('form-column');
+export const FormColumn = ({ children, headName, input, meta, schema, props, }) => {
+    const tooltip = React.useMemo(() => {
+        if (!schema.description || props.descriptionType === 'bottom') {
+            return null;
+        }
+        return (React.createElement(HelpMark, { className: b('help-mark') },
+            React.createElement(HTMLContent, { html: schema.description })));
+    }, [schema.description, props.descriptionType]);
+    const bottomDescription = React.useMemo(() => {
+        if (!schema.description || props.descriptionType !== 'bottom') {
+            return null;
+        }
+        return React.createElement(HTMLContent, { html: schema.description, color: "secondary" });
+    }, [schema.description, props.descriptionType]);
+    return (React.createElement(LayoutContainer, { className: b(), gap: 2 },
+        React.createElement(Flex, { direction: "column", gap: 0.5 },
+            React.createElement("div", { className: b('top') },
+                React.createElement(Text, { className: b('title', { required: props.required }), wordBreak: "break-word" }, schema.title),
+                tooltip,
+                React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
+            bottomDescription),
+        React.createElement(Flex, { className: b('bottom'), direction: "column", gap: 0.5 },
+            children,
+            React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))));
+};

package/build/esm/lib/unstable/kit/form-layouts/FormColumn/index.d.ts

@@ -0,0 +1 @@
+export { FormColumn, type FormColumnProps } from './FormColumn';

package/build/esm/lib/unstable/kit/form-layouts/FormColumn/index.js

@@ -0,0 +1 @@
+export { FormColumn } from './FormColumn';

package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.css

@@ -0,0 +1,25 @@
+.sr-form-row {
+  margin-bottom: calc(var(--g-spacing-base) * 4);
+}
+.sr-form-row:last-child {
+  margin-bottom: 0;
+}
+.sr-form-row__left {
+  display: inline;
+  min-width: 180px;
+  width: 180px;
+  min-height: 28px;
+  padding-top: 4.5px;
+}
+.sr-form-row__title {
+  min-height: 18px;
+  margin-right: calc(var(--g-spacing-base) * 1);
+}
+.sr-form-row__title_required::after {
+  content: "*";
+  margin-left: calc(var(--g-spacing-base) * 1);
+  color: var(--g-color-text-danger);
+}
+.sr-form-row__help-mark {
+  margin-top: 1.5px;
+}

package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.d.ts

@@ -0,0 +1,6 @@
+import type { JsonSchema, NodeLayout } from '../../../core';
+import './FormRow.css';
+export interface FormRowProps {
+    descriptionType?: 'tooltip' | 'bottom';
+}
+export declare const FormRow: NodeLayout<JsonSchema, FormRowProps>;

package/build/esm/lib/unstable/kit/form-layouts/FormRow/FormRow.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Flex, HelpMark, Text } from '@gravity-ui/uikit';
+import { ArrayRemoveButton, EntityError, HTMLContent, LayoutContainer } from '../../components';
+import { block, getValidationState } from '../../utils';
+import './FormRow.css';
+const b = block('form-row');
+export const FormRow = ({ children, headName, input, meta, schema, props, }) => {
+    const tooltip = React.useMemo(() => {
+        if (!schema.description || props.descriptionType === 'bottom') {
+            return null;
+        }
+        return (React.createElement(HelpMark, { className: b('help-mark') },
+            React.createElement(HTMLContent, { html: schema.description })));
+    }, [schema.description, props.descriptionType]);
+    const bottomDescription = React.useMemo(() => {
+        if (!schema.description || props.descriptionType !== 'bottom') {
+            return null;
+        }
+        return React.createElement(HTMLContent, { html: schema.description, color: "secondary" });
+    }, [schema.description, props.descriptionType]);
+    return (React.createElement(LayoutContainer, { className: b(), direction: "row", alignItems: "flex-start", gap: 2 },
+        React.createElement("div", { className: b('left') },
+            React.createElement(Text, { className: b('title', { required: props.required }), wordBreak: "break-word" }, schema.title),
+            tooltip),
+        React.createElement(Flex, { className: b('right'), direction: "column", gap: 0.5, grow: 1 },
+            React.createElement(Flex, { grow: 1, gap: 2 },
+                children,
+                React.createElement(ArrayRemoveButton, { name: input.name, headName: headName })),
+            bottomDescription,
+            React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))));
+};

package/build/esm/lib/unstable/kit/form-layouts/FormRow/index.d.ts

@@ -0,0 +1 @@
+export { FormRow, type FormRowProps } from './FormRow';

package/build/esm/lib/unstable/kit/form-layouts/FormRow/index.js

@@ -0,0 +1 @@
+export { FormRow } from './FormRow';

package/build/esm/lib/unstable/kit/form-layouts/index.d.ts

@@ -0,0 +1,2 @@
+export { FormColumn, type FormColumnProps } from './FormColumn';
+export { FormRow, type FormRowProps } from './FormRow';

package/build/esm/lib/unstable/kit/form-layouts/index.js

@@ -0,0 +1,2 @@
+export { FormColumn } from './FormColumn';
+export { FormRow } from './FormRow';

package/build/esm/lib/unstable/kit/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './constants';
+export * from './entities';
+export * from './form-entities';
+export * from './form-layouts';
+export * from './overview-entities';
+export * from './overview-layouts';
+export * from './utils/common';
+export * from './utils/transformer';

package/build/esm/lib/unstable/kit/index.js

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './constants';
+export * from './entities';
+export * from './form-entities';
+export * from './form-layouts';
+export * from './overview-entities';
+export * from './overview-layouts';
+export * from './utils/common';
+export * from './utils/transformer';

package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.css

@@ -0,0 +1,46 @@
+.sr-accordeon {
+  margin-bottom: calc(var(--g-spacing-base) * 4);
+}
+.sr-accordeon:last-child {
+  margin-bottom: 0;
+}
+.sr-accordeon:hover .sr-accordeon__copy-button {
+  display: block;
+}
+.sr-accordeon .g-disclosure__trigger {
+  padding-left: 6.5px;
+}
+.sr-accordeon_without-default-summary .g-disclosure__trigger {
+  padding-left: 0;
+}
+.sr-accordeon_without-default-summary .g-disclosure__trigger .g-arrow-toggle {
+  display: none;
+}
+.sr-accordeon__toggler {
+  padding-left: 6px;
+}
+.sr-accordeon__title_required::after {
+  content: "*";
+  margin-left: calc(var(--g-spacing-base) * 1);
+  color: var(--g-color-text-danger);
+}
+.sr-accordeon__content {
+  margin-top: calc(var(--g-spacing-base) * 4);
+}
+.sr-accordeon__content_with-indent {
+  position: relative;
+  padding-left: calc(var(--g-spacing-base) * 7);
+}
+.sr-accordeon__content_with-indent:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: calc(100% + var(--g-spacing-base) * 2);
+  background-color: var(--g-color-line-generic);
+  position: absolute;
+  left: calc(var(--g-spacing-base) * 3 + 1.5px);
+  bottom: 0;
+}
+.sr-accordeon__copy-button {
+  display: none;
+}

package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonProps, type DisclosureProps, type TextProps } from '@gravity-ui/uikit';
+import { type JsonSchema, type NodeLayout } from '../../../core';
+import './Accordeon.css';
+export interface AccordeonProps extends DisclosureProps {
+    titleProps?: TextProps;
+    togglerProps?: ButtonProps;
+    withDefaultSummary?: boolean;
+    withIndent?: boolean;
+}
+export declare const Accordeon: NodeLayout<JsonSchema, AccordeonProps>;

package/build/esm/lib/unstable/kit/layouts/Accordeon/Accordeon.js

@@ -0,0 +1,44 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
+import { Button, Disclosure, Flex, HelpMark, Icon, Text, } from '@gravity-ui/uikit';
+import { SchemaRendererMode } from '../../../core';
+import { ArrayRemoveButton, CopyButton, EntityError, HTMLContent, LayoutContainer, } from '../../components';
+import { block, getValidationState } from '../../utils';
+import './Accordeon.css';
+const b = block('accordeon');
+export const Accordeon = ({ children, headName, input, meta, mode, schema, props, }) => {
+    const { copy, required, titleProps, togglerProps, withIndent = false, withDefaultSummary = false } = props, restLayoutProps = __rest(props, ["copy", "required", "titleProps", "togglerProps", "withIndent", "withDefaultSummary"]);
+    const overviewFlag = mode === SchemaRendererMode.Overview;
+    const summary = React.useMemo(() => {
+        const stopPropagation = (event) => {
+            event.stopPropagation();
+        };
+        return (React.createElement(Flex, { alignItems: "center", gap: 2 },
+            withDefaultSummary ? (React.createElement(Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)) : (React.createElement(Disclosure.Summary, null, (props) => (React.createElement(Button, Object.assign({}, togglerProps, { className: b('toggler', togglerProps === null || togglerProps === void 0 ? void 0 : togglerProps.className) }),
+                React.createElement(Flex, { alignItems: "center", gap: 2, height: "100%" },
+                    React.createElement(Icon, { data: props.expanded ? ChevronUp : ChevronDown }),
+                    React.createElement(Text, Object.assign({}, titleProps, { className: b('title', { required: required && !overviewFlag }, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className) }), schema.title)))))),
+            schema.description ? (React.createElement(HelpMark, { onClick: stopPropagation },
+                React.createElement(HTMLContent, { html: schema.description }))) : null,
+            overviewFlag ? (React.createElement(CopyButton, { className: b('copy-button'), copy: copy, value: input.value })) : null,
+            overviewFlag ? null : (React.createElement(ArrayRemoveButton, { name: input.name, headName: headName, onClick: stopPropagation }))));
+    }, [
+        copy,
+        headName,
+        input.name,
+        input.value,
+        overviewFlag,
+        required,
+        schema.title,
+        schema.description,
+        titleProps,
+        togglerProps,
+        withDefaultSummary,
+    ]);
+    return (React.createElement(LayoutContainer, { className: b({ 'without-default-summary': !withDefaultSummary }), hideEmpty: overviewFlag },
+        React.createElement(Disclosure, Object.assign({ summary: summary, defaultExpanded: true }, restLayoutProps),
+            React.createElement(Flex, { direction: "column", gap: 0.5, grow: 1 },
+                React.createElement("div", { className: b('content', { 'with-indent': withIndent }) }, children),
+                overviewFlag ? null : (React.createElement(EntityError, { errorMessage: meta.error, validationState: getValidationState(meta) }))))));
+};