@gravity-ui/dynamic-forms 5.13.2 → 5.14.0

package/build/cjs/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.css

@@ -0,0 +1,42 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-range-input-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+  width: 100%;
+}
+.df-range-input-picker__slider {
+  padding: 0 var(--g-spacing-2);
+}
+.df-range-input-picker__inputs {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.df-range-input-picker__input {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.df-range-input-picker__separator {
+  flex: 0 0 auto;
+  color: var(--g-color-text-secondary);
+}

package/build/cjs/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeInputPicker = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const isNil_1 = tslib_1.__importDefault(require("lodash/isNil"));
+const set_1 = tslib_1.__importDefault(require("lodash/set"));
+const core_1 = require("../../../../core");
+const common_1 = require("../../../constants/common");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('range-input-picker');
+const RangeInputPicker = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { spec, input, name } = props;
+    const { disabled, inputProps } = spec.viewSpec;
+    const sliderParams = inputProps === null || inputProps === void 0 ? void 0 : inputProps.sliderParams;
+    const showSlider = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showSlider) !== null && _a !== void 0 ? _a : true;
+    const showInputs = (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showInputs) !== null && _b !== void 0 ? _b : true;
+    const [fromSpec, toSpec] = react_1.default.useMemo(() => [common_1.FROM, common_1.TO].map((key) => {
+        var _a, _b;
+        return (0, core_1.isNumberSpec)((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key])
+            ? (_b = spec.properties) === null || _b === void 0 ? void 0 : _b[key]
+            : undefined;
+    }), [spec.properties]);
+    const sliderMin = (0, utils_1.resolveRangeInputPickerBound)(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.min, fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.minimum, common_1.RANGE_INPUT_PICKER_DEFAULT_MIN);
+    const sliderMax = (0, utils_1.resolveRangeInputPickerBound)(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.max, toSpec === null || toSpec === void 0 ? void 0 : toSpec.maximum, common_1.RANGE_INPUT_PICKER_DEFAULT_MAX);
+    const sliderStep = (_c = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.step) !== null && _c !== void 0 ? _c : common_1.RANGE_INPUT_PICKER_DEFAULT_STEP;
+    const sliderMarks = (_d = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.marks) !== null && _d !== void 0 ? _d : common_1.RANGE_INPUT_PICKER_DEFAULT_MARKS;
+    const value = (_e = input.value) !== null && _e !== void 0 ? _e : {};
+    const fromValue = (0, isNil_1.default)(value.from) ? undefined : Number(value.from);
+    const toValue = (0, isNil_1.default)(value.to) ? undefined : Number(value.to);
+    const sliderValue = [
+        (0, isNil_1.default)(fromValue) ? sliderMin : fromValue,
+        (0, isNil_1.default)(toValue) ? sliderMax : toValue,
+    ];
+    const parentOnChange = react_1.default.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => (0, set_1.default)(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input, name]);
+    const handleSliderUpdate = react_1.default.useCallback((next) => {
+        if (!Array.isArray(next)) {
+            return;
+        }
+        input.onChange(() => (Object.assign(Object.assign({}, value), { [common_1.FROM]: next[0], [common_1.TO]: next[1] })));
+    }, [input, value]);
+    const handleFromUpdate = react_1.default.useCallback((next) => {
+        const safe = next === null
+            ? undefined
+            : (0, utils_1.clampRangeInputPickerValue)(next, sliderMin, (0, isNil_1.default)(toValue) ? sliderMax : toValue);
+        parentOnChange(`${name}.${common_1.FROM}`, safe);
+    }, [name, parentOnChange, sliderMin, sliderMax, toValue]);
+    const handleToUpdate = react_1.default.useCallback((next) => {
+        const safe = next === null
+            ? undefined
+            : (0, utils_1.clampRangeInputPickerValue)(next, (0, isNil_1.default)(fromValue) ? sliderMin : fromValue, sliderMax);
+        parentOnChange(`${name}.${common_1.TO}`, safe);
+    }, [name, parentOnChange, sliderMin, sliderMax, fromValue]);
+    return (react_1.default.createElement("div", { className: b() },
+        showSlider ? (react_1.default.createElement("div", { className: b('slider') },
+            react_1.default.createElement(uikit_1.Slider, { value: sliderValue, min: sliderMin, max: sliderMax, step: sliderStep, marks: sliderMarks, disabled: disabled, onUpdate: handleSliderUpdate, onBlur: input.onBlur, onFocus: input.onFocus, qa: `${name}-slider`, tooltipDisplay: "off" }))) : null,
+        showInputs ? (react_1.default.createElement("div", { className: b('inputs') },
+            react_1.default.createElement(uikit_1.NumberInput, { className: b('input'), value: (0, isNil_1.default)(fromValue) ? null : fromValue, min: sliderMin, max: sliderMax, step: sliderStep, disabled: disabled || (fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.viewSpec.disabled), placeholder: fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.viewSpec.placeholder, onUpdate: handleFromUpdate, onBlur: input.onBlur, onFocus: input.onFocus, hasClear: true, allowDecimal: true, qa: `${name}-from` }),
+            react_1.default.createElement("span", { className: b('separator') }, (_f = inputProps === null || inputProps === void 0 ? void 0 : inputProps.separator) !== null && _f !== void 0 ? _f : common_1.RANGE_INPUT_PICKER_DEFAULT_SEPARATOR),
+            react_1.default.createElement(uikit_1.NumberInput, { className: b('input'), value: (0, isNil_1.default)(toValue) ? null : toValue, min: sliderMin, max: sliderMax, step: sliderStep, disabled: disabled || (toSpec === null || toSpec === void 0 ? void 0 : toSpec.viewSpec.disabled), placeholder: toSpec === null || toSpec === void 0 ? void 0 : toSpec.viewSpec.placeholder, onUpdate: handleToUpdate, onBlur: input.onBlur, onFocus: input.onFocus, hasClear: true, allowDecimal: true, qa: `${name}-to` }))) : null));
+};
+exports.RangeInputPicker = RangeInputPicker;

package/build/cjs/lib/kit/components/Inputs/RangeInputPicker/RangeInputPickerNumber.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeInputPickerNumber = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const isNil_1 = tslib_1.__importDefault(require("lodash/isNil"));
+const common_1 = require("../../../constants/common");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('range-input-picker');
+const RangeInputPickerNumber = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
+    var _a, _b, _c, _d;
+    const { disabled, placeholder, inputProps } = spec.viewSpec;
+    const sliderParams = inputProps === null || inputProps === void 0 ? void 0 : inputProps.sliderParams;
+    const showSlider = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showSlider) !== null && _a !== void 0 ? _a : true;
+    const showInputs = (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showInputs) !== null && _b !== void 0 ? _b : true;
+    const sliderMin = (0, utils_1.resolveRangeInputPickerBound)(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.min, spec.minimum, common_1.RANGE_INPUT_PICKER_DEFAULT_MIN);
+    const sliderMax = (0, utils_1.resolveRangeInputPickerBound)(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.max, spec.maximum, common_1.RANGE_INPUT_PICKER_DEFAULT_MAX);
+    const sliderStep = (_c = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.step) !== null && _c !== void 0 ? _c : common_1.RANGE_INPUT_PICKER_DEFAULT_STEP;
+    const sliderMarks = (_d = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.marks) !== null && _d !== void 0 ? _d : common_1.RANGE_INPUT_PICKER_DEFAULT_MARKS;
+    const numericValue = (0, isNil_1.default)(value) ? undefined : Number(value);
+    const sliderValue = (0, isNil_1.default)(numericValue) ? sliderMin : numericValue;
+    const onChangeAllowUndefined = onChange;
+    const handleSliderUpdate = react_1.default.useCallback((next) => {
+        if (Array.isArray(next)) {
+            return;
+        }
+        onChangeAllowUndefined(next);
+    }, [onChangeAllowUndefined]);
+    const handleInputUpdate = react_1.default.useCallback((next) => {
+        if (next === null) {
+            onChangeAllowUndefined(undefined);
+            return;
+        }
+        onChangeAllowUndefined((0, utils_1.clampRangeInputPickerValue)(next, sliderMin, sliderMax));
+    }, [onChangeAllowUndefined, sliderMin, sliderMax]);
+    return (react_1.default.createElement("div", { className: b() },
+        showSlider ? (react_1.default.createElement("div", { className: b('slider') },
+            react_1.default.createElement(uikit_1.Slider, { value: sliderValue, min: sliderMin, max: sliderMax, step: sliderStep, marks: sliderMarks, disabled: disabled, onUpdate: handleSliderUpdate, onBlur: onBlur, onFocus: onFocus, qa: `${name}-slider`, tooltipDisplay: "off" }))) : null,
+        showInputs ? (react_1.default.createElement("div", { className: b('inputs') },
+            react_1.default.createElement(uikit_1.NumberInput, { className: b('input'), value: (0, isNil_1.default)(numericValue) ? null : numericValue, min: sliderMin, max: sliderMax, step: sliderStep, disabled: disabled, placeholder: placeholder, onUpdate: handleInputUpdate, onBlur: onBlur, onFocus: onFocus, hasClear: true, allowDecimal: true, qa: name }))) : null));
+};
+exports.RangeInputPickerNumber = RangeInputPickerNumber;

package/build/cjs/lib/kit/components/Inputs/RangeInputPicker/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RangeInputPicker"), exports);
+tslib_1.__exportStar(require("./RangeInputPickerNumber"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/build/cjs/lib/kit/components/Inputs/RangeInputPicker/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/cjs/lib/kit/components/Inputs/index.js

@@ -15,6 +15,7 @@ tslib_1.__exportStar(require("./ObjectBase"), exports);
 tslib_1.__exportStar(require("./ObjectValueInput"), exports);
 tslib_1.__exportStar(require("./OneOf"), exports);
 tslib_1.__exportStar(require("./RadioGroup"), exports);
+tslib_1.__exportStar(require("./RangeInputPicker"), exports);
 tslib_1.__exportStar(require("./Secret"), exports);
 tslib_1.__exportStar(require("./Select"), exports);
 tslib_1.__exportStar(require("./Switch"), exports);

package/build/cjs/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerNumberView.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeInputPickerNumberView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const isNil_1 = tslib_1.__importDefault(require("lodash/isNil"));
+const RangeInputPickerNumberView = ({ value }) => {
+    if ((0, isNil_1.default)(value)) {
+        return null;
+    }
+    return react_1.default.createElement(uikit_1.Text, null, String(value));
+};
+exports.RangeInputPickerNumberView = RangeInputPickerNumberView;

package/build/cjs/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerView.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeInputPickerView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const isNil_1 = tslib_1.__importDefault(require("lodash/isNil"));
+const common_1 = require("../../../constants/common");
+const RangeInputPickerView = ({ value, spec }) => {
+    var _a, _b;
+    const separator = (_b = (_a = spec.viewSpec.inputProps) === null || _a === void 0 ? void 0 : _a.separator) !== null && _b !== void 0 ? _b : common_1.RANGE_INPUT_PICKER_DEFAULT_SEPARATOR;
+    const from = value === null || value === void 0 ? void 0 : value.from;
+    const to = value === null || value === void 0 ? void 0 : value.to;
+    const formatted = (() => {
+        if ((0, isNil_1.default)(from) && (0, isNil_1.default)(to)) {
+            return '';
+        }
+        if ((0, isNil_1.default)(from)) {
+            return `${separator} ${to}`;
+        }
+        if ((0, isNil_1.default)(to)) {
+            return `${from} ${separator}`;
+        }
+        return `${from} ${separator} ${to}`;
+    })();
+    return react_1.default.createElement(uikit_1.Text, null, formatted);
+};
+exports.RangeInputPickerView = RangeInputPickerView;

package/build/cjs/lib/kit/components/Views/RangeInputPickerView/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./RangeInputPickerNumberView"), exports);
+tslib_1.__exportStar(require("./RangeInputPickerView"), exports);

package/build/cjs/lib/kit/components/Views/index.js

@@ -13,6 +13,7 @@ tslib_1.__exportStar(require("./NumberWithScaleView"), exports);
 tslib_1.__exportStar(require("./ObjectBaseView"), exports);
 tslib_1.__exportStar(require("./ObjectValueInputView"), exports);
 tslib_1.__exportStar(require("./OneOfView"), exports);
+tslib_1.__exportStar(require("./RangeInputPickerView"), exports);
 tslib_1.__exportStar(require("./TableArrayView"), exports);
 tslib_1.__exportStar(require("./TextAreaView"), exports);
 tslib_1.__exportStar(require("./TextContentView"), exports);

package/build/cjs/lib/kit/constants/common.js

@@ -1,8 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.END_TIME = exports.START_TIME = exports.OBJECT_VALUE_PROPERTY_NAME = exports.COMMON_TITLE_MAX_WIDTH = exports.COMMON_POPOVER_PLACEMENT = void 0;
+exports.RANGE_INPUT_PICKER_DEFAULT_SEPARATOR = exports.RANGE_INPUT_PICKER_DEFAULT_MARKS = exports.RANGE_INPUT_PICKER_DEFAULT_STEP = exports.RANGE_INPUT_PICKER_DEFAULT_MAX = exports.RANGE_INPUT_PICKER_DEFAULT_MIN = exports.TO = exports.FROM = exports.END_TIME = exports.START_TIME = exports.OBJECT_VALUE_PROPERTY_NAME = exports.COMMON_TITLE_MAX_WIDTH = exports.COMMON_POPOVER_PLACEMENT = void 0;
 exports.COMMON_POPOVER_PLACEMENT = ['bottom', 'top'];
 exports.COMMON_TITLE_MAX_WIDTH = 523;
 exports.OBJECT_VALUE_PROPERTY_NAME = 'value';
 exports.START_TIME = 'start';
 exports.END_TIME = 'end';
+exports.FROM = 'from';
+exports.TO = 'to';
+exports.RANGE_INPUT_PICKER_DEFAULT_MIN = 0;
+exports.RANGE_INPUT_PICKER_DEFAULT_MAX = 100;
+exports.RANGE_INPUT_PICKER_DEFAULT_STEP = 1;
+exports.RANGE_INPUT_PICKER_DEFAULT_MARKS = 2;
+exports.RANGE_INPUT_PICKER_DEFAULT_SEPARATOR = '–';

package/build/cjs/lib/kit/constants/config.js

@@ -49,6 +49,7 @@ exports.dynamicConfig = {
     number: {
         inputs: {
             base: { Component: components_1.NumInput },
+            range_input_picker: { Component: components_1.RangeInputPickerNumber },
         },
         layouts: {
             row: components_1.Row,
@@ -74,6 +75,7 @@ exports.dynamicConfig = {
             multi_oneof_flat: { Component: components_1.MultiOneOfFlat, independent: true },
             inline: { Component: components_1.ObjectInline, independent: true },
             time_range_selector: { Component: components_1.TimeRangeSelector, independent: true },
+            range_input_picker: { Component: components_1.RangeInputPicker },
         },
         layouts: {
             row: components_1.Row,
@@ -164,6 +166,7 @@ exports.dynamicViewConfig = {
     number: {
         views: {
             base: { Component: components_1.BaseView },
+            range_input_picker: { Component: components_1.RangeInputPickerNumberView },
         },
         layouts: {
             row: components_1.ViewRow,
@@ -186,6 +189,7 @@ exports.dynamicViewConfig = {
             multi_oneof_flat: { Component: components_1.MultiOneOfFlatView, independent: true },
             inline: { Component: components_1.ObjectInlineView, independent: true },
             time_range_selector: { Component: components_1.TimeRangeSelectorView, independent: true },
+            range_input_picker: { Component: components_1.RangeInputPickerView },
         },
         layouts: {
             row: components_1.ViewRow,

package/build/cjs/lib/kit/utils/common.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isCorrectSizeParams = exports.prepareSpec = exports.isNotEmptyValue = void 0;
+exports.isCorrectSizeParams = exports.resolveRangeInputPickerBound = exports.clampRangeInputPickerValue = exports.prepareSpec = exports.isNotEmptyValue = void 0;
 const tslib_1 = require("tslib");
 const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
 const isArray_1 = tslib_1.__importDefault(require("lodash/isArray"));
@@ -141,6 +141,18 @@ const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
     return spec;
 };
 exports.prepareSpec = prepareSpec;
+const clampRangeInputPickerValue = (value, min, max) => Math.min(Math.max(value, min), max);
+exports.clampRangeInputPickerValue = clampRangeInputPickerValue;
+const resolveRangeInputPickerBound = (inputBound, specBound, fallback) => {
+    if (!(0, isNil_1.default)(inputBound)) {
+        return inputBound;
+    }
+    if (!(0, isNil_1.default)(specBound)) {
+        return specBound;
+    }
+    return fallback;
+};
+exports.resolveRangeInputPickerBound = resolveRangeInputPickerBound;
 const isCorrectSizeParams = (spec) => {
     const { sizeParams } = spec.viewSpec;
     if (!sizeParams ||

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.css

@@ -0,0 +1,42 @@
+/*
+@mixin variables {
+    --g-spacing-base: 4px;
+
+    --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px
+    --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px
+    --g-spacing-1: var(--g-spacing-base); // 4px
+    --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px
+    --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px
+    --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px
+    --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px
+    --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px
+    --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px
+    --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px
+    --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px
+    --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px
+}
+*/
+/* Border-radius */
+.df-range-input-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--g-spacing-3);
+  width: 100%;
+}
+.df-range-input-picker__slider {
+  padding: 0 var(--g-spacing-2);
+}
+.df-range-input-picker__inputs {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.df-range-input-picker__input {
+  flex: 1 1 0;
+  min-width: 0;
+}
+.df-range-input-picker__separator {
+  flex: 0 0 auto;
+  color: var(--g-color-text-secondary);
+}

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { ObjectInputProps } from '../../../../core';
+import type { RangeInputPickerInputProps } from './types';
+import './RangeInputPicker.css';
+export declare const RangeInputPicker: (props: ObjectInputProps<RangeInputPickerInputProps>) => React.JSX.Element;

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/RangeInputPicker.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { NumberInput, Slider } from '@gravity-ui/uikit';
+import isNil from 'lodash/isNil';
+import set from 'lodash/set';
+import { isNumberSpec } from '../../../../core';
+import { FROM, RANGE_INPUT_PICKER_DEFAULT_MARKS, RANGE_INPUT_PICKER_DEFAULT_MAX, RANGE_INPUT_PICKER_DEFAULT_MIN, RANGE_INPUT_PICKER_DEFAULT_SEPARATOR, RANGE_INPUT_PICKER_DEFAULT_STEP, TO, } from '../../../constants/common';
+import { block, clampRangeInputPickerValue, resolveRangeInputPickerBound } from '../../../utils';
+import './RangeInputPicker.css';
+const b = block('range-input-picker');
+export const RangeInputPicker = (props) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { spec, input, name } = props;
+    const { disabled, inputProps } = spec.viewSpec;
+    const sliderParams = inputProps === null || inputProps === void 0 ? void 0 : inputProps.sliderParams;
+    const showSlider = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showSlider) !== null && _a !== void 0 ? _a : true;
+    const showInputs = (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showInputs) !== null && _b !== void 0 ? _b : true;
+    const [fromSpec, toSpec] = React.useMemo(() => [FROM, TO].map((key) => {
+        var _a, _b;
+        return isNumberSpec((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key])
+            ? (_b = spec.properties) === null || _b === void 0 ? void 0 : _b[key]
+            : undefined;
+    }), [spec.properties]);
+    const sliderMin = resolveRangeInputPickerBound(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.min, fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.minimum, RANGE_INPUT_PICKER_DEFAULT_MIN);
+    const sliderMax = resolveRangeInputPickerBound(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.max, toSpec === null || toSpec === void 0 ? void 0 : toSpec.maximum, RANGE_INPUT_PICKER_DEFAULT_MAX);
+    const sliderStep = (_c = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.step) !== null && _c !== void 0 ? _c : RANGE_INPUT_PICKER_DEFAULT_STEP;
+    const sliderMarks = (_d = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.marks) !== null && _d !== void 0 ? _d : RANGE_INPUT_PICKER_DEFAULT_MARKS;
+    const value = (_e = input.value) !== null && _e !== void 0 ? _e : {};
+    const fromValue = isNil(value.from) ? undefined : Number(value.from);
+    const toValue = isNil(value.to) ? undefined : Number(value.to);
+    const sliderValue = [
+        isNil(fromValue) ? sliderMin : fromValue,
+        isNil(toValue) ? sliderMax : toValue,
+    ];
+    const parentOnChange = React.useCallback((childName, childValue, childErrors) => input.onChange((currentValue) => set(Object.assign({}, currentValue), childName.split(`${name}.`).join(''), childValue), childErrors), [input, name]);
+    const handleSliderUpdate = React.useCallback((next) => {
+        if (!Array.isArray(next)) {
+            return;
+        }
+        input.onChange(() => (Object.assign(Object.assign({}, value), { [FROM]: next[0], [TO]: next[1] })));
+    }, [input, value]);
+    const handleFromUpdate = React.useCallback((next) => {
+        const safe = next === null
+            ? undefined
+            : clampRangeInputPickerValue(next, sliderMin, isNil(toValue) ? sliderMax : toValue);
+        parentOnChange(`${name}.${FROM}`, safe);
+    }, [name, parentOnChange, sliderMin, sliderMax, toValue]);
+    const handleToUpdate = React.useCallback((next) => {
+        const safe = next === null
+            ? undefined
+            : clampRangeInputPickerValue(next, isNil(fromValue) ? sliderMin : fromValue, sliderMax);
+        parentOnChange(`${name}.${TO}`, safe);
+    }, [name, parentOnChange, sliderMin, sliderMax, fromValue]);
+    return (React.createElement("div", { className: b() },
+        showSlider ? (React.createElement("div", { className: b('slider') },
+            React.createElement(Slider, { value: sliderValue, min: sliderMin, max: sliderMax, step: sliderStep, marks: sliderMarks, disabled: disabled, onUpdate: handleSliderUpdate, onBlur: input.onBlur, onFocus: input.onFocus, qa: `${name}-slider`, tooltipDisplay: "off" }))) : null,
+        showInputs ? (React.createElement("div", { className: b('inputs') },
+            React.createElement(NumberInput, { className: b('input'), value: isNil(fromValue) ? null : fromValue, min: sliderMin, max: sliderMax, step: sliderStep, disabled: disabled || (fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.viewSpec.disabled), placeholder: fromSpec === null || fromSpec === void 0 ? void 0 : fromSpec.viewSpec.placeholder, onUpdate: handleFromUpdate, onBlur: input.onBlur, onFocus: input.onFocus, hasClear: true, allowDecimal: true, qa: `${name}-from` }),
+            React.createElement("span", { className: b('separator') }, (_f = inputProps === null || inputProps === void 0 ? void 0 : inputProps.separator) !== null && _f !== void 0 ? _f : RANGE_INPUT_PICKER_DEFAULT_SEPARATOR),
+            React.createElement(NumberInput, { className: b('input'), value: isNil(toValue) ? null : toValue, min: sliderMin, max: sliderMax, step: sliderStep, disabled: disabled || (toSpec === null || toSpec === void 0 ? void 0 : toSpec.viewSpec.disabled), placeholder: toSpec === null || toSpec === void 0 ? void 0 : toSpec.viewSpec.placeholder, onUpdate: handleToUpdate, onBlur: input.onBlur, onFocus: input.onFocus, hasClear: true, allowDecimal: true, qa: `${name}-to` }))) : null));
+};

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/RangeInputPickerNumber.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { NumberInputProps } from '../../../../core';
+import type { RangeInputPickerInputProps } from './types';
+import './RangeInputPicker.css';
+export declare const RangeInputPickerNumber: ({ name, input: { value, onBlur, onChange, onFocus }, spec, }: NumberInputProps<RangeInputPickerInputProps>) => React.JSX.Element;

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/RangeInputPickerNumber.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { NumberInput, Slider } from '@gravity-ui/uikit';
+import isNil from 'lodash/isNil';
+import { RANGE_INPUT_PICKER_DEFAULT_MARKS, RANGE_INPUT_PICKER_DEFAULT_MAX, RANGE_INPUT_PICKER_DEFAULT_MIN, RANGE_INPUT_PICKER_DEFAULT_STEP, } from '../../../constants/common';
+import { block, clampRangeInputPickerValue, resolveRangeInputPickerBound } from '../../../utils';
+import './RangeInputPicker.css';
+const b = block('range-input-picker');
+export const RangeInputPickerNumber = ({ name, input: { value, onBlur, onChange, onFocus }, spec, }) => {
+    var _a, _b, _c, _d;
+    const { disabled, placeholder, inputProps } = spec.viewSpec;
+    const sliderParams = inputProps === null || inputProps === void 0 ? void 0 : inputProps.sliderParams;
+    const showSlider = (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showSlider) !== null && _a !== void 0 ? _a : true;
+    const showInputs = (_b = inputProps === null || inputProps === void 0 ? void 0 : inputProps.showInputs) !== null && _b !== void 0 ? _b : true;
+    const sliderMin = resolveRangeInputPickerBound(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.min, spec.minimum, RANGE_INPUT_PICKER_DEFAULT_MIN);
+    const sliderMax = resolveRangeInputPickerBound(sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.max, spec.maximum, RANGE_INPUT_PICKER_DEFAULT_MAX);
+    const sliderStep = (_c = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.step) !== null && _c !== void 0 ? _c : RANGE_INPUT_PICKER_DEFAULT_STEP;
+    const sliderMarks = (_d = sliderParams === null || sliderParams === void 0 ? void 0 : sliderParams.marks) !== null && _d !== void 0 ? _d : RANGE_INPUT_PICKER_DEFAULT_MARKS;
+    const numericValue = isNil(value) ? undefined : Number(value);
+    const sliderValue = isNil(numericValue) ? sliderMin : numericValue;
+    const onChangeAllowUndefined = onChange;
+    const handleSliderUpdate = React.useCallback((next) => {
+        if (Array.isArray(next)) {
+            return;
+        }
+        onChangeAllowUndefined(next);
+    }, [onChangeAllowUndefined]);
+    const handleInputUpdate = React.useCallback((next) => {
+        if (next === null) {
+            onChangeAllowUndefined(undefined);
+            return;
+        }
+        onChangeAllowUndefined(clampRangeInputPickerValue(next, sliderMin, sliderMax));
+    }, [onChangeAllowUndefined, sliderMin, sliderMax]);
+    return (React.createElement("div", { className: b() },
+        showSlider ? (React.createElement("div", { className: b('slider') },
+            React.createElement(Slider, { value: sliderValue, min: sliderMin, max: sliderMax, step: sliderStep, marks: sliderMarks, disabled: disabled, onUpdate: handleSliderUpdate, onBlur: onBlur, onFocus: onFocus, qa: `${name}-slider`, tooltipDisplay: "off" }))) : null,
+        showInputs ? (React.createElement("div", { className: b('inputs') },
+            React.createElement(NumberInput, { className: b('input'), value: isNil(numericValue) ? null : numericValue, min: sliderMin, max: sliderMax, step: sliderStep, disabled: disabled, placeholder: placeholder, onUpdate: handleInputUpdate, onBlur: onBlur, onFocus: onFocus, hasClear: true, allowDecimal: true, qa: name }))) : null));
+};

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RangeInputPicker';
+export * from './RangeInputPickerNumber';
+export * from './types';

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/index.js

@@ -0,0 +1,3 @@
+export * from './RangeInputPicker';
+export * from './RangeInputPickerNumber';
+export * from './types';

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/types.d.ts

@@ -0,0 +1,15 @@
+export interface RangeInputPickerInputProps {
+    sliderParams?: {
+        min: number;
+        max: number;
+        step?: number;
+        marks?: number | number[];
+    };
+    showSlider?: boolean;
+    showInputs?: boolean;
+    separator?: string;
+}
+export interface RangeInputPickerValue {
+    from?: number;
+    to?: number;
+}

package/build/esm/lib/kit/components/Inputs/RangeInputPicker/types.js

@@ -0,0 +1 @@
+export {};

package/build/esm/lib/kit/components/Inputs/index.d.ts

@@ -12,6 +12,7 @@ export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
 export * from './RadioGroup';
+export * from './RangeInputPicker';
 export * from './Secret';
 export * from './Select';
 export * from './Switch';

package/build/esm/lib/kit/components/Inputs/index.js

@@ -12,6 +12,7 @@ export * from './ObjectBase';
 export * from './ObjectValueInput';
 export * from './OneOf';
 export * from './RadioGroup';
+export * from './RangeInputPicker';
 export * from './Secret';
 export * from './Select';
 export * from './Switch';

package/build/esm/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerNumberView.d.ts

@@ -0,0 +1,2 @@
+import type { NumberView } from '../../../../core';
+export declare const RangeInputPickerNumberView: NumberView;

package/build/esm/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerNumberView.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import isNil from 'lodash/isNil';
+export const RangeInputPickerNumberView = ({ value }) => {
+    if (isNil(value)) {
+        return null;
+    }
+    return React.createElement(Text, null, String(value));
+};

package/build/esm/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerView.d.ts

@@ -0,0 +1,2 @@
+import type { ObjectView } from '../../../../core';
+export declare const RangeInputPickerView: ObjectView;

package/build/esm/lib/kit/components/Views/RangeInputPickerView/RangeInputPickerView.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text } from '@gravity-ui/uikit';
+import isNil from 'lodash/isNil';
+import { RANGE_INPUT_PICKER_DEFAULT_SEPARATOR } from '../../../constants/common';
+export const RangeInputPickerView = ({ value, spec }) => {
+    var _a, _b;
+    const separator = (_b = (_a = spec.viewSpec.inputProps) === null || _a === void 0 ? void 0 : _a.separator) !== null && _b !== void 0 ? _b : RANGE_INPUT_PICKER_DEFAULT_SEPARATOR;
+    const from = value === null || value === void 0 ? void 0 : value.from;
+    const to = value === null || value === void 0 ? void 0 : value.to;
+    const formatted = (() => {
+        if (isNil(from) && isNil(to)) {
+            return '';
+        }
+        if (isNil(from)) {
+            return `${separator} ${to}`;
+        }
+        if (isNil(to)) {
+            return `${from} ${separator}`;
+        }
+        return `${from} ${separator} ${to}`;
+    })();
+    return React.createElement(Text, null, formatted);
+};

package/build/esm/lib/kit/components/Views/RangeInputPickerView/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RangeInputPickerNumberView';
+export * from './RangeInputPickerView';

package/build/esm/lib/kit/components/Views/RangeInputPickerView/index.js

@@ -0,0 +1,2 @@
+export * from './RangeInputPickerNumberView';
+export * from './RangeInputPickerView';

package/build/esm/lib/kit/components/Views/index.d.ts

@@ -10,6 +10,7 @@ export * from './NumberWithScaleView';
 export * from './ObjectBaseView';
 export * from './ObjectValueInputView';
 export * from './OneOfView';
+export * from './RangeInputPickerView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextContentView';

package/build/esm/lib/kit/components/Views/index.js

@@ -10,6 +10,7 @@ export * from './NumberWithScaleView';
 export * from './ObjectBaseView';
 export * from './ObjectValueInputView';
 export * from './OneOfView';
+export * from './RangeInputPickerView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextContentView';

package/build/esm/lib/kit/constants/common.d.ts

@@ -4,3 +4,10 @@ export declare const COMMON_TITLE_MAX_WIDTH = 523;
 export declare const OBJECT_VALUE_PROPERTY_NAME = "value";
 export declare const START_TIME = "start";
 export declare const END_TIME = "end";
+export declare const FROM = "from";
+export declare const TO = "to";
+export declare const RANGE_INPUT_PICKER_DEFAULT_MIN = 0;
+export declare const RANGE_INPUT_PICKER_DEFAULT_MAX = 100;
+export declare const RANGE_INPUT_PICKER_DEFAULT_STEP = 1;
+export declare const RANGE_INPUT_PICKER_DEFAULT_MARKS = 2;
+export declare const RANGE_INPUT_PICKER_DEFAULT_SEPARATOR = "\u2013";

package/build/esm/lib/kit/constants/common.js

@@ -3,3 +3,10 @@ export const COMMON_TITLE_MAX_WIDTH = 523;
 export const OBJECT_VALUE_PROPERTY_NAME = 'value';
 export const START_TIME = 'start';
 export const END_TIME = 'end';
+export const FROM = 'from';
+export const TO = 'to';
+export const RANGE_INPUT_PICKER_DEFAULT_MIN = 0;
+export const RANGE_INPUT_PICKER_DEFAULT_MAX = 100;
+export const RANGE_INPUT_PICKER_DEFAULT_STEP = 1;
+export const RANGE_INPUT_PICKER_DEFAULT_MARKS = 2;
+export const RANGE_INPUT_PICKER_DEFAULT_SEPARATOR = '–';

package/build/esm/lib/kit/constants/config.js

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumInput, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, RadioGroup, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, Column, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumInput, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, RadioGroup, RangeInputPicker, RangeInputPickerNumber, RangeInputPickerNumberView, RangeInputPickerView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextContentView, TextLink, TextLinkView, TimeRangeSelector, TimeRangeSelectorView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewColumn, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -46,6 +46,7 @@ export const dynamicConfig = {
     number: {
         inputs: {
             base: { Component: NumInput },
+            range_input_picker: { Component: RangeInputPickerNumber },
         },
         layouts: {
             row: Row,
@@ -71,6 +72,7 @@ export const dynamicConfig = {
             multi_oneof_flat: { Component: MultiOneOfFlat, independent: true },
             inline: { Component: ObjectInline, independent: true },
             time_range_selector: { Component: TimeRangeSelector, independent: true },
+            range_input_picker: { Component: RangeInputPicker },
         },
         layouts: {
             row: Row,
@@ -161,6 +163,7 @@ export const dynamicViewConfig = {
     number: {
         views: {
             base: { Component: BaseView },
+            range_input_picker: { Component: RangeInputPickerNumberView },
         },
         layouts: {
             row: ViewRow,
@@ -183,6 +186,7 @@ export const dynamicViewConfig = {
             multi_oneof_flat: { Component: MultiOneOfFlatView, independent: true },
             inline: { Component: ObjectInlineView, independent: true },
             time_range_selector: { Component: TimeRangeSelectorView, independent: true },
+            range_input_picker: { Component: RangeInputPickerView },
         },
         layouts: {
             row: ViewRow,

package/build/esm/lib/kit/utils/common.d.ts

@@ -1,4 +1,6 @@
 import type { FormValue, Spec, StringSpec } from '../../core';
 export declare const isNotEmptyValue: (value: FormValue | undefined, spec: Spec | undefined) => boolean;
 export declare const prepareSpec: <Type extends Spec>(spec: Type, parseJsonDefaultValue?: boolean, overridePatternError?: (pattern?: string) => string) => Type;
+export declare const clampRangeInputPickerValue: (value: number, min: number, max: number) => number;
+export declare const resolveRangeInputPickerBound: (inputBound: number | undefined, specBound: number | undefined, fallback: number) => number;
 export declare const isCorrectSizeParams: (spec: StringSpec) => boolean;

package/build/esm/lib/kit/utils/common.js

@@ -135,6 +135,16 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
     }
     return spec;
 };
+export const clampRangeInputPickerValue = (value, min, max) => Math.min(Math.max(value, min), max);
+export const resolveRangeInputPickerBound = (inputBound, specBound, fallback) => {
+    if (!isNil(inputBound)) {
+        return inputBound;
+    }
+    if (!isNil(specBound)) {
+        return specBound;
+    }
+    return fallback;
+};
 export const isCorrectSizeParams = (spec) => {
     const { sizeParams } = spec.viewSpec;
     if (!sizeParams ||

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.13.2",
+  "version": "5.14.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",