@gravity-ui/dynamic-forms 5.15.0 → 5.17.1

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const unstable_1 = require("@gravity-ui/uikit/unstable");
+const ColorPicker = ({ input, spec, inputProps }) => {
+    const { value, onChange, onBlur, onFocus } = input;
+    const handleOpenChange = react_1.default.useCallback((open) => {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, open);
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [inputProps, onBlur, onFocus]);
+    return (react_1.default.createElement(unstable_1.unstable_ColorPicker, Object.assign({}, inputProps, { value: value || '', onUpdate: onChange, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled })));
+};
+exports.ColorPicker = ColorPicker;

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

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

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

@@ -7,6 +7,7 @@ tslib_1.__exportStar(require("./Checkbox"), exports);
 tslib_1.__exportStar(require("./CheckboxGroup"), exports);
 tslib_1.__exportStar(require("./FileInput"), exports);
 tslib_1.__exportStar(require("./DateInput"), exports);
+tslib_1.__exportStar(require("./ColorPicker"), exports);
 tslib_1.__exportStar(require("./MonacoInput"), exports);
 tslib_1.__exportStar(require("./MultiOneOf"), exports);
 tslib_1.__exportStar(require("./MultiSelect"), exports);

package/build/cjs/lib/kit/components/Views/ColorPickerView/ColorPickerView.css

@@ -0,0 +1,31 @@
+/*
+@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-color-picker-view {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.df-color-picker-view__preview {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-xs);
+}

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPickerView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../../components");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('color-picker-view');
+const ColorPickerView = ({ value = '' }) => (react_1.default.createElement("div", { className: b() },
+    value ? react_1.default.createElement("div", { className: b('preview'), style: { backgroundColor: value } }) : null,
+    react_1.default.createElement(components_1.LongValue, { value: value })));
+exports.ColorPickerView = ColorPickerView;

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

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

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

@@ -6,6 +6,7 @@ tslib_1.__exportStar(require("./BaseView"), exports);
 tslib_1.__exportStar(require("./CheckboxGroupView"), exports);
 tslib_1.__exportStar(require("./CardOneOfView"), exports);
 tslib_1.__exportStar(require("./FileInputView"), exports);
+tslib_1.__exportStar(require("./ColorPickerView"), exports);
 tslib_1.__exportStar(require("./MonacoInputView"), exports);
 tslib_1.__exportStar(require("./MultiOneOfView"), exports);
 tslib_1.__exportStar(require("./MultiSelectView"), exports);

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

@@ -103,6 +103,7 @@ exports.dynamicConfig = {
             base: { Component: components_1.Text },
             file_input: { Component: components_1.FileInput },
             date_input: { Component: components_1.DateInput },
+            color_picker: { Component: components_1.ColorPicker },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -123,6 +124,7 @@ exports.dynamicConfig = {
         validators: {
             base: (0, validators_1.getStringValidator)(),
             number: (0, validators_1.getNumberValidator)(),
+            number_with_scale: (0, validators_1.getNumberWithScaleValidator)(),
         },
     },
 };
@@ -213,6 +215,7 @@ exports.dynamicViewConfig = {
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
             date_input: { Component: components_1.DateView },
+            color_picker: { Component: components_1.ColorPickerView },
             file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },

package/build/cjs/lib/kit/i18n/en.json

@@ -37,6 +37,8 @@
   ],
   "label_error-min-number": "Value must be an integer no less than {{count}}",
   "label_error-max-number": "Value must not be greater than {{count}}",
+  "label_error-min-number-with-scale": "Value must be no less than {{count}} {{scale}}",
+  "label_error-max-number-with-scale": "Value must not be greater than {{count}} {{scale}}",
   "label_error-space-end": "Value must not end with a space",
   "label_error-space-start": "Value must not start with a space",
   "label_error-zero-start": "Value must not start with a zero",

package/build/cjs/lib/kit/i18n/ru.json

@@ -37,6 +37,8 @@
   ],
   "label_error-min-number": "Значение должно быть числом не меньше {{count}}",
   "label_error-max-number": "Значение должно быть числом не больше {{count}}",
+  "label_error-min-number-with-scale": "Значение должно быть не меньше {{count}} {{scale}}",
+  "label_error-max-number-with-scale": "Значение должно быть не больше {{count}} {{scale}}",
   "label_error-space-end": "Значение не должно заканчиваться пробелом",
   "label_error-space-start": "Значение не должно начинаться с пробела",
   "label_error-zero-start": "Значение не должно начинаться с нуля",

package/build/cjs/lib/kit/validators/helpers.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isFloat = exports.isInt = void 0;
+exports.getScaledLimit = exports.isFloat = exports.isInt = void 0;
+const utils_1 = require("../utils");
 const isInt = (value) => {
     const regex = /^(?:[-+]?(?:0|[1-9]\d*))$/;
     return regex.test(value);
@@ -11,3 +12,71 @@ const isFloat = (value) => {
     return regex.test(value);
 };
 exports.isFloat = isFloat;
+const scaleValue = (value, scaleFactor, defaultFactor) => {
+    if (defaultFactor === scaleFactor) {
+        return String(value);
+    }
+    const valueStr = String(value);
+    try {
+        if (BigInt(scaleFactor) > BigInt(defaultFactor)) {
+            const ratio = (0, utils_1.divide)(scaleFactor, defaultFactor);
+            return ratio ? (0, utils_1.divide)(valueStr, ratio, 6) : null;
+        }
+        const ratio = (0, utils_1.divide)(defaultFactor, scaleFactor);
+        return ratio ? (0, utils_1.multiply)(valueStr, ratio, 6) : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const isReadable = (numStr) => {
+    if (numStr === null) {
+        return false;
+    }
+    // Math.abs does not support BigInt
+    const intPart = numStr.split('.')[0].replace('-', '');
+    try {
+        return BigInt(intPart) >= BigInt(1);
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const getMostAppropriateScale = (sizeParams, value) => {
+    const { defaultType, scale } = sizeParams;
+    const valueStr = String(value);
+    const defaultFactor = scale[defaultType].factor;
+    let bestType = defaultType;
+    Object.keys(scale).forEach((key) => {
+        if (BigInt(scale[key].factor) > BigInt(scale[bestType].factor)) {
+            const ratio = (0, utils_1.divide)(scale[key].factor, defaultFactor);
+            if (!ratio) {
+                return;
+            }
+            if (!isReadable((0, utils_1.divide)(valueStr, ratio, 2))) {
+                return;
+            }
+            bestType = key;
+        }
+    });
+    return bestType;
+};
+const getScaledLimit = (spec, limit) => {
+    var _a;
+    const sizeParams = (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.sizeParams;
+    if (!sizeParams) {
+        return undefined;
+    }
+    const mostAppropriateScale = getMostAppropriateScale(sizeParams, limit);
+    const scaleEntry = sizeParams.scale[mostAppropriateScale];
+    const defaultEntry = sizeParams.scale[sizeParams.defaultType];
+    if (!scaleEntry || !defaultEntry) {
+        return undefined;
+    }
+    const count = scaleValue(limit, scaleEntry.factor, defaultEntry.factor);
+    if (count === null) {
+        return undefined;
+    }
+    return { count, scaleTitle: scaleEntry.title };
+};
+exports.getScaledLimit = getScaledLimit;

package/build/cjs/lib/kit/validators/messages.js

@@ -27,6 +27,12 @@ const getErrorMessages = () => ({
     maxNumber(count) {
         return (0, i18n_1.default)('label_error-max-number', { count });
     },
+    minNumberWithScale(count, scale) {
+        return (0, i18n_1.default)('label_error-min-number-with-scale', { count, scale });
+    },
+    maxNumberWithScale(count, scale) {
+        return (0, i18n_1.default)('label_error-max-number-with-scale', { count, scale });
+    },
     SPACE_START: (0, i18n_1.default)('label_error-space-start'),
     SPACE_END: (0, i18n_1.default)('label_error-space-end'),
     DOT_END: (0, i18n_1.default)('label_error-dot-end'),

package/build/cjs/lib/kit/validators/validators.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStringValidator = exports.getObjectValidator = exports.getNumberValidator = exports.getBooleanValidator = exports.getArrayValidator = void 0;
+exports.getStringValidator = exports.getObjectValidator = exports.getNumberWithScaleValidator = exports.getNumberValidator = exports.getBooleanValidator = exports.getArrayValidator = void 0;
 const tslib_1 = require("tslib");
 const isArray_1 = tslib_1.__importDefault(require("lodash/isArray"));
 const isNumber_1 = tslib_1.__importDefault(require("lodash/isNumber"));
@@ -101,6 +101,73 @@ const getNumberValidator = (params = {}) => {
     };
 };
 exports.getNumberValidator = getNumberValidator;
+const getNumberWithScaleValidator = (params = {}) => {
+    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, ignoreInvalidZeroFormat, ignoreZeroEnd, customErrorMessages, } = params;
+    // eslint-disable-next-line complexity
+    return (spec, value = '') => {
+        const errorMessages = Object.assign(Object.assign({}, validators_1.ErrorMessages), customErrorMessages);
+        const stringValue = String(value);
+        if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
+            return errorMessages.REQUIRED;
+        }
+        if (stringValue.length) {
+            if (!ignoreSpaceStartCheck && !stringValue[0].trim()) {
+                return errorMessages.SPACE_START;
+            }
+            if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
+                return errorMessages.SPACE_END;
+            }
+            if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
+                return errorMessages.DOT_END;
+            }
+            if (!ignoreNumberCheck && !(0, helpers_1.isFloat)(stringValue)) {
+                return errorMessages.NUMBER;
+            }
+            if (!ignoreZeroStart &&
+                ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
+                    (stringValue.length > 2 &&
+                        stringValue.substring(0, 2) === '-0' &&
+                        stringValue[2] !== '.'))) {
+                return errorMessages.ZERO_START;
+            }
+            if (!ignoreInvalidZeroFormat &&
+                stringValue.trim().length > 1 &&
+                Number(stringValue.trim()) === 0) {
+                return errorMessages.INVALID_ZERO_FORMAT;
+            }
+            if (!ignoreZeroEnd &&
+                !(0, helpers_1.isInt)(stringValue) &&
+                stringValue[stringValue.length - 1] === '0') {
+                return errorMessages.ZERO_END;
+            }
+        }
+        if (!ignoreMaximumCheck &&
+            (0, isNumber_1.default)(spec.maximum) &&
+            stringValue.length &&
+            Number(stringValue) > spec.maximum) {
+            const scaled = (0, helpers_1.getScaledLimit)(spec, spec.maximum);
+            return scaled
+                ? errorMessages.maxNumberWithScale(scaled.count, scaled.scaleTitle)
+                : errorMessages.maxNumber(spec.maximum);
+        }
+        if (!ignoreMinimumCheck &&
+            (0, isNumber_1.default)(spec.minimum) &&
+            stringValue.length &&
+            spec.minimum > Number(stringValue)) {
+            const scaled = (0, helpers_1.getScaledLimit)(spec, spec.minimum);
+            return scaled
+                ? errorMessages.minNumberWithScale(scaled.count, scaled.scaleTitle)
+                : errorMessages.minNumber(spec.minimum);
+        }
+        if ((0, isString_1.default)(spec.format) && stringValue.length) {
+            if (!ignoreIntCheck && spec.format === 'int64' && !(0, helpers_1.isInt)(stringValue)) {
+                return errorMessages.INT;
+            }
+        }
+        return false;
+    };
+};
+exports.getNumberWithScaleValidator = getNumberWithScaleValidator;
 const getObjectValidator = (params = {}) => {
     const { ignoreRequiredCheck, customErrorMessages } = params;
     return (spec, value) => {

package/build/esm/lib/core/types/specs.d.ts

@@ -186,4 +186,9 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
         generateRandomValueButton?: boolean;
     };
 }
+export interface NumberWithScaleSpec extends StringSpec {
+    minimum?: number;
+    maximum?: number;
+    format?: 'float' | 'int64';
+}
 export type Spec<LinkType = any, InputComponentProps extends Record<string, any> | undefined = undefined, LayoutComponentProps extends Record<string, any> | undefined = undefined> = ArraySpec<LinkType, InputComponentProps, LayoutComponentProps> | BooleanSpec<LinkType, InputComponentProps, LayoutComponentProps> | NumberSpec<LinkType, InputComponentProps, LayoutComponentProps> | ObjectSpec<LinkType, InputComponentProps, LayoutComponentProps> | StringSpec<LinkType, InputComponentProps, LayoutComponentProps>;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { unstable_ColorPicker as ColorPickerBase } from '@gravity-ui/uikit/unstable';
+import type { StringInput } from '../../../../core';
+export interface ColorPickerProps extends Omit<React.ComponentProps<typeof ColorPickerBase>, 'value' | 'onUpdate' | 'disabled'> {
+}
+export declare const ColorPicker: StringInput<ColorPickerProps>;

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { unstable_ColorPicker as ColorPickerBase } from '@gravity-ui/uikit/unstable';
+export const ColorPicker = ({ input, spec, inputProps }) => {
+    const { value, onChange, onBlur, onFocus } = input;
+    const handleOpenChange = React.useCallback((open) => {
+        var _a;
+        (_a = inputProps === null || inputProps === void 0 ? void 0 : inputProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, open);
+        if (open) {
+            onFocus();
+        }
+        else {
+            onBlur();
+        }
+    }, [inputProps, onBlur, onFocus]);
+    return (React.createElement(ColorPickerBase, Object.assign({}, inputProps, { value: value || '', onUpdate: onChange, onOpenChange: handleOpenChange, disabled: spec.viewSpec.disabled })));
+};

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

@@ -0,0 +1 @@
+export * from './ColorPicker';

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

@@ -0,0 +1 @@
+export * from './ColorPicker';

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

@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './FileInput';
 export * from './DateInput';
+export * from './ColorPicker';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';

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

@@ -4,6 +4,7 @@ export * from './Checkbox';
 export * from './CheckboxGroup';
 export * from './FileInput';
 export * from './DateInput';
+export * from './ColorPicker';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';

package/build/esm/lib/kit/components/Views/ColorPickerView/ColorPickerView.css

@@ -0,0 +1,31 @@
+/*
+@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-color-picker-view {
+  display: flex;
+  align-items: center;
+  gap: var(--g-spacing-2);
+}
+.df-color-picker-view__preview {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-xs);
+}

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

@@ -0,0 +1,3 @@
+import type { StringView } from '../../../../core';
+import './ColorPickerView.css';
+export declare const ColorPickerView: StringView;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LongValue } from '../../../components';
+import { block } from '../../../utils';
+import './ColorPickerView.css';
+const b = block('color-picker-view');
+export const ColorPickerView = ({ value = '' }) => (React.createElement("div", { className: b() },
+    value ? React.createElement("div", { className: b('preview'), style: { backgroundColor: value } }) : null,
+    React.createElement(LongValue, { value: value })));

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

@@ -0,0 +1 @@
+export * from './ColorPickerView';

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

@@ -0,0 +1 @@
+export * from './ColorPickerView';

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

@@ -3,6 +3,7 @@ export * from './BaseView';
 export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
+export * from './ColorPickerView';
 export * from './MonacoInputView';
 export * from './MultiOneOfView';
 export * from './MultiSelectView';

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

@@ -3,6 +3,7 @@ export * from './BaseView';
 export * from './CheckboxGroupView';
 export * from './CardOneOfView';
 export * from './FileInputView';
+export * from './ColorPickerView';
 export * from './MonacoInputView';
 export * from './MultiOneOfView';
 export * from './MultiSelectView';

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

@@ -1,5 +1,5 @@
-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';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, CheckboxGroup, CheckboxGroupView, ColorPicker, ColorPickerView, 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, getNumberWithScaleValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
         inputs: {
@@ -100,6 +100,7 @@ export const dynamicConfig = {
             base: { Component: Text },
             file_input: { Component: FileInput },
             date_input: { Component: DateInput },
+            color_picker: { Component: ColorPicker },
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInput },
             text_content: { Component: TextContent, independent: true },
@@ -120,6 +121,7 @@ export const dynamicConfig = {
         validators: {
             base: getStringValidator(),
             number: getNumberValidator(),
+            number_with_scale: getNumberWithScaleValidator(),
         },
     },
 };
@@ -210,6 +212,7 @@ export const dynamicViewConfig = {
             select: { Component: BaseView },
             base: { Component: BaseView },
             date_input: { Component: DateView },
+            color_picker: { Component: ColorPickerView },
             file_input: { Component: FileInputView },
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },

package/build/esm/lib/kit/i18n/en.json

@@ -37,6 +37,8 @@
   ],
   "label_error-min-number": "Value must be an integer no less than {{count}}",
   "label_error-max-number": "Value must not be greater than {{count}}",
+  "label_error-min-number-with-scale": "Value must be no less than {{count}} {{scale}}",
+  "label_error-max-number-with-scale": "Value must not be greater than {{count}} {{scale}}",
   "label_error-space-end": "Value must not end with a space",
   "label_error-space-start": "Value must not start with a space",
   "label_error-zero-start": "Value must not start with a zero",

package/build/esm/lib/kit/i18n/ru.json

@@ -37,6 +37,8 @@
   ],
   "label_error-min-number": "Значение должно быть числом не меньше {{count}}",
   "label_error-max-number": "Значение должно быть числом не больше {{count}}",
+  "label_error-min-number-with-scale": "Значение должно быть не меньше {{count}} {{scale}}",
+  "label_error-max-number-with-scale": "Значение должно быть не больше {{count}} {{scale}}",
   "label_error-space-end": "Значение не должно заканчиваться пробелом",
   "label_error-space-start": "Значение не должно начинаться с пробела",
   "label_error-zero-start": "Значение не должно начинаться с нуля",

package/build/esm/lib/kit/validators/helpers.d.ts

@@ -1,2 +1,7 @@
+import type { StringSpec } from 'src/lib/core';
 export declare const isInt: (value: string) => boolean;
 export declare const isFloat: (value: string) => boolean;
+export declare const getScaledLimit: (spec: StringSpec, limit: number) => {
+    count: string;
+    scaleTitle: string;
+} | undefined;

package/build/esm/lib/kit/validators/helpers.js

@@ -1,3 +1,4 @@
+import { divide, multiply } from '../utils';
 export const isInt = (value) => {
     const regex = /^(?:[-+]?(?:0|[1-9]\d*))$/;
     return regex.test(value);
@@ -6,3 +7,70 @@ export const isFloat = (value) => {
     const regex = /^(?:[-+]?(?:\d+))?(?:\.\d*)?(?:[eE][+-]?(?:\d+))?$/;
     return regex.test(value);
 };
+const scaleValue = (value, scaleFactor, defaultFactor) => {
+    if (defaultFactor === scaleFactor) {
+        return String(value);
+    }
+    const valueStr = String(value);
+    try {
+        if (BigInt(scaleFactor) > BigInt(defaultFactor)) {
+            const ratio = divide(scaleFactor, defaultFactor);
+            return ratio ? divide(valueStr, ratio, 6) : null;
+        }
+        const ratio = divide(defaultFactor, scaleFactor);
+        return ratio ? multiply(valueStr, ratio, 6) : null;
+    }
+    catch (_a) {
+        return null;
+    }
+};
+const isReadable = (numStr) => {
+    if (numStr === null) {
+        return false;
+    }
+    // Math.abs does not support BigInt
+    const intPart = numStr.split('.')[0].replace('-', '');
+    try {
+        return BigInt(intPart) >= BigInt(1);
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const getMostAppropriateScale = (sizeParams, value) => {
+    const { defaultType, scale } = sizeParams;
+    const valueStr = String(value);
+    const defaultFactor = scale[defaultType].factor;
+    let bestType = defaultType;
+    Object.keys(scale).forEach((key) => {
+        if (BigInt(scale[key].factor) > BigInt(scale[bestType].factor)) {
+            const ratio = divide(scale[key].factor, defaultFactor);
+            if (!ratio) {
+                return;
+            }
+            if (!isReadable(divide(valueStr, ratio, 2))) {
+                return;
+            }
+            bestType = key;
+        }
+    });
+    return bestType;
+};
+export const getScaledLimit = (spec, limit) => {
+    var _a;
+    const sizeParams = (_a = spec.viewSpec) === null || _a === void 0 ? void 0 : _a.sizeParams;
+    if (!sizeParams) {
+        return undefined;
+    }
+    const mostAppropriateScale = getMostAppropriateScale(sizeParams, limit);
+    const scaleEntry = sizeParams.scale[mostAppropriateScale];
+    const defaultEntry = sizeParams.scale[sizeParams.defaultType];
+    if (!scaleEntry || !defaultEntry) {
+        return undefined;
+    }
+    const count = scaleValue(limit, scaleEntry.factor, defaultEntry.factor);
+    if (count === null) {
+        return undefined;
+    }
+    return { count, scaleTitle: scaleEntry.title };
+};

package/build/esm/lib/kit/validators/messages.js

@@ -23,6 +23,12 @@ const getErrorMessages = () => ({
     maxNumber(count) {
         return i18n('label_error-max-number', { count });
     },
+    minNumberWithScale(count, scale) {
+        return i18n('label_error-min-number-with-scale', { count, scale });
+    },
+    maxNumberWithScale(count, scale) {
+        return i18n('label_error-max-number-with-scale', { count, scale });
+    },
     SPACE_START: i18n('label_error-space-start'),
     SPACE_END: i18n('label_error-space-end'),
     DOT_END: i18n('label_error-dot-end'),

package/build/esm/lib/kit/validators/types.d.ts

@@ -9,6 +9,8 @@ export interface ErrorMessagesType {
     maxLengthArr: (count: number | bigint) => string;
     minNumber: (count: number | bigint) => string;
     maxNumber: (count: number | bigint) => string;
+    minNumberWithScale: (count: number | bigint | string, scale: string) => string;
+    maxNumberWithScale: (count: number | bigint | string, scale: string) => string;
     SPACE_START: string;
     SPACE_END: string;
     DOT_END: string;

package/build/esm/lib/kit/validators/validators.d.ts

@@ -1,4 +1,4 @@
-import type { ArraySpec, ArrayValue, BooleanSpec, NumberSpec, ObjectSpec, ObjectValue, StringSpec } from '../../core';
+import type { ArraySpec, ArrayValue, BooleanSpec, NumberSpec, NumberWithScaleSpec, ObjectSpec, ObjectValue, StringSpec } from '../../core';
 import type { ErrorMessagesType } from './types';
 interface CommonValidatorParams {
     ignoreRequiredCheck?: boolean;
@@ -25,6 +25,9 @@ export interface GetNumberValidatorParams extends CommonValidatorParams {
     ignoreZeroEnd?: boolean;
 }
 export declare const getNumberValidator: (params?: GetNumberValidatorParams) => (spec: NumberSpec, value?: string | number) => string | false;
+export interface GetNumberWithScaleValidatorParams extends GetNumberValidatorParams {
+}
+export declare const getNumberWithScaleValidator: (params?: GetNumberWithScaleValidatorParams) => (spec: NumberWithScaleSpec, value?: string) => string | false;
 export interface GetObjectValidatorParams extends CommonValidatorParams {
 }
 export declare const getObjectValidator: (params?: GetObjectValidatorParams) => (spec: ObjectSpec, value?: ObjectValue) => string | false;

package/build/esm/lib/kit/validators/validators.js

@@ -2,7 +2,7 @@ import isArray from 'lodash/isArray';
 import isNumber from 'lodash/isNumber';
 import isString from 'lodash/isString';
 import { ErrorMessages } from '../validators';
-import { isFloat, isInt } from './helpers';
+import { getScaledLimit, isFloat, isInt } from './helpers';
 export const getArrayValidator = (params = {}) => {
     const { ignoreRequiredCheck, ignoreMaxLengthCheck, ignoreMinLengthCheck, customErrorMessages } = params;
     return (spec, value) => {
@@ -94,6 +94,72 @@ export const getNumberValidator = (params = {}) => {
         return false;
     };
 };
+export const getNumberWithScaleValidator = (params = {}) => {
+    const { ignoreRequiredCheck, ignoreSpaceStartCheck, ignoreSpaceEndCheck, ignoreNumberCheck, ignoreMaximumCheck, ignoreMinimumCheck, ignoreIntCheck, ignoreDotEnd, ignoreZeroStart, ignoreInvalidZeroFormat, ignoreZeroEnd, customErrorMessages, } = params;
+    // eslint-disable-next-line complexity
+    return (spec, value = '') => {
+        const errorMessages = Object.assign(Object.assign({}, ErrorMessages), customErrorMessages);
+        const stringValue = String(value);
+        if (!ignoreRequiredCheck && spec.required && !stringValue.length) {
+            return errorMessages.REQUIRED;
+        }
+        if (stringValue.length) {
+            if (!ignoreSpaceStartCheck && !stringValue[0].trim()) {
+                return errorMessages.SPACE_START;
+            }
+            if (!ignoreSpaceEndCheck && !stringValue[stringValue.length - 1].trim()) {
+                return errorMessages.SPACE_END;
+            }
+            if (!ignoreDotEnd && stringValue[stringValue.length - 1] === '.') {
+                return errorMessages.DOT_END;
+            }
+            if (!ignoreNumberCheck && !isFloat(stringValue)) {
+                return errorMessages.NUMBER;
+            }
+            if (!ignoreZeroStart &&
+                ((stringValue.length > 1 && stringValue[0] === '0' && stringValue[1] !== '.') ||
+                    (stringValue.length > 2 &&
+                        stringValue.substring(0, 2) === '-0' &&
+                        stringValue[2] !== '.'))) {
+                return errorMessages.ZERO_START;
+            }
+            if (!ignoreInvalidZeroFormat &&
+                stringValue.trim().length > 1 &&
+                Number(stringValue.trim()) === 0) {
+                return errorMessages.INVALID_ZERO_FORMAT;
+            }
+            if (!ignoreZeroEnd &&
+                !isInt(stringValue) &&
+                stringValue[stringValue.length - 1] === '0') {
+                return errorMessages.ZERO_END;
+            }
+        }
+        if (!ignoreMaximumCheck &&
+            isNumber(spec.maximum) &&
+            stringValue.length &&
+            Number(stringValue) > spec.maximum) {
+            const scaled = getScaledLimit(spec, spec.maximum);
+            return scaled
+                ? errorMessages.maxNumberWithScale(scaled.count, scaled.scaleTitle)
+                : errorMessages.maxNumber(spec.maximum);
+        }
+        if (!ignoreMinimumCheck &&
+            isNumber(spec.minimum) &&
+            stringValue.length &&
+            spec.minimum > Number(stringValue)) {
+            const scaled = getScaledLimit(spec, spec.minimum);
+            return scaled
+                ? errorMessages.minNumberWithScale(scaled.count, scaled.scaleTitle)
+                : errorMessages.minNumber(spec.minimum);
+        }
+        if (isString(spec.format) && stringValue.length) {
+            if (!ignoreIntCheck && spec.format === 'int64' && !isInt(stringValue)) {
+                return errorMessages.INT;
+            }
+        }
+        return false;
+    };
+};
 export const getObjectValidator = (params = {}) => {
     const { ignoreRequiredCheck, customErrorMessages } = params;
     return (spec, value) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "5.15.0",
+  "version": "5.17.1",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -60,7 +60,7 @@
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
-    "@gravity-ui/uikit": "^7.25.0",
+    "@gravity-ui/uikit": "^7.41.0",
     "@playwright/experimental-ct-react": "^1.40.0",
     "@playwright/test": "^1.40.0",
     "@storybook/addon-essentials": "^8.6.4",