@gravity-ui/dynamic-forms 4.5.0 → 4.7.0

package/build/cjs/lib/core/components/View/DynamicView.js

@@ -8,9 +8,15 @@ const helpers_1 = require("../../helpers");
 const ViewController_1 = require("./ViewController");
 const helpers_2 = require("./helpers");
 const hooks_1 = require("./hooks");
-const DynamicView = ({ value, spec, config, Link, Monaco }) => {
+const DynamicView = ({ value, spec, config, Link, Monaco, showLayoutDescription, }) => {
     const DynamicFormsCtx = (0, hooks_1.useCreateContext)();
-    const context = react_1.default.useMemo(() => ({ config, value, Link, Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
+    const context = react_1.default.useMemo(() => ({
+        config,
+        value,
+        showLayoutDescription,
+        Link,
+        Monaco: (0, react_is_1.isValidElementType)(Monaco) ? Monaco : undefined,
+    }), [config, value, Link, Monaco, showLayoutDescription]);
     if ((0, helpers_1.isCorrectSpec)(spec) && (0, helpers_2.isCorrectViewConfig)(config)) {
         return (react_1.default.createElement(DynamicFormsCtx.Provider, { value: context },
             react_1.default.createElement(ViewController_1.ViewController, { spec: spec, name: "" })));

package/build/cjs/lib/core/components/View/index.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDynamicFormsCtx = void 0;
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./DynamicView"), exports);
 tslib_1.__exportStar(require("./ViewController"), exports);
 tslib_1.__exportStar(require("./helpers"), exports);
 tslib_1.__exportStar(require("./types"), exports);
+var hooks_1 = require("./hooks");
+Object.defineProperty(exports, "useDynamicFormsCtx", { enumerable: true, get: function () { return hooks_1.useDynamicFormsCtx; } });

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

@@ -0,0 +1,18 @@
+.df-checkbox-group {
+  display: flex;
+  align-items: center;
+  height: 28px;
+}
+.df-checkbox-group > *:not(:last-child) {
+  margin-right: 6px;
+}
+.df-checkbox-group_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 8px;
+  height: auto;
+}
+.df-checkbox-group_vertical > *:not(:last-child) {
+  margin-right: 0px;
+  margin-bottom: 6px;
+}

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroup = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const core_1 = require("../../../../core");
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('checkbox-group');
+const CheckboxGroup = ({ name, input, spec, inputProps }) => {
+    var _a;
+    const { value, onBlur, onChange, onFocus } = input;
+    const _value = react_1.default.useMemo(() => (0, core_1.transformArrOut)(value), [value]);
+    const options = react_1.default.useMemo(() => {
+        var _a;
+        return (_a = spec.enum) === null || _a === void 0 ? void 0 : _a.map((id) => {
+            var _a;
+            return ({
+                value: id,
+                text: ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[id]) || id,
+            });
+        });
+    }, [spec.enum, spec.description]);
+    const handleUpdate = react_1.default.useCallback((optionValue, selected) => {
+        let newValue = _value || [];
+        if (selected) {
+            newValue.push(optionValue);
+        }
+        else {
+            newValue = newValue.filter((id) => id !== optionValue);
+        }
+        onChange((0, core_1.transformArrIn)(newValue));
+    }, [_value, onChange]);
+    return (react_1.default.createElement("div", { className: b({ vertical: ((_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement) === 'vertical' }), "data-qa": name }, options === null || options === void 0 ? void 0 : options.map(({ value: optionValue, text }) => {
+        var _a, _b;
+        return (react_1.default.createElement(uikit_1.Checkbox, Object.assign({}, inputProps, { qa: name && `${name}-${optionValue}`, key: optionValue, checked: _value === null || _value === void 0 ? void 0 : _value.includes(optionValue), onUpdate: (selected) => handleUpdate(optionValue, selected), disabled: spec.viewSpec.disabled ||
+                ((_b = (_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.disabled) === null || _b === void 0 ? void 0 : _b[optionValue]), content: text, onBlur: onBlur, onFocus: onFocus })));
+    })));
+};
+exports.CheckboxGroup = CheckboxGroup;

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

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

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

@@ -0,0 +1,3 @@
+.df-date-input {
+  width: 100%;
+}

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

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateInput = exports.DEFAULT_DATE_FORMAT = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const date_components_1 = require("@gravity-ui/date-components");
+const date_utils_1 = require("@gravity-ui/date-utils");
+const utils_1 = require("../../../utils");
+exports.DEFAULT_DATE_FORMAT = 'DD-MM-YYYY';
+const b = (0, utils_1.block)('date-input');
+const DateInput = ({ name, input, spec, inputProps, }) => {
+    const { value, onChange, onBlur, onFocus } = input;
+    const dateInput = spec.viewSpec.dateInput;
+    const outputFormat = dateInput === null || dateInput === void 0 ? void 0 : dateInput.outputFormat;
+    const onUpdate = (0, react_1.useCallback)((date) => {
+        if (!date) {
+            onChange(undefined);
+        }
+        else {
+            switch (outputFormat) {
+                case 'date_time':
+                    onChange(date);
+                    break;
+                case 'date':
+                    onChange(date.toDate());
+                    break;
+                case 'timestamp':
+                    onChange({
+                        seconds: Math.floor((date === null || date === void 0 ? void 0 : date.toDate().getTime()) / 1000),
+                        nanos: 0,
+                    });
+                    break;
+                case 'string':
+                case undefined:
+                case '':
+                    onChange(date.toISOString());
+                    break;
+                default:
+                    onChange(date.format(outputFormat));
+                    break;
+            }
+        }
+    }, [outputFormat]);
+    const props = Object.assign(Object.assign({ hasClear: true, format: (dateInput === null || dateInput === void 0 ? void 0 : dateInput.printFormat) || exports.DEFAULT_DATE_FORMAT }, inputProps), { onBlur: onBlur, onFocus: onFocus, value: value
+            ? (0, date_utils_1.dateTimeParse)(value.seconds ? value.seconds * 1000 : value) || null
+            : null, onUpdate, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder });
+    return react_1.default.createElement(date_components_1.DatePicker, Object.assign({ className: b(), "data-qa": name }, props));
+};
+exports.DateInput = DateInput;
+exports.default = exports.DateInput;

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

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

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

@@ -5,6 +5,7 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const icons_1 = require("@gravity-ui/icons");
 const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("@gravity-ui/components");
 const noop_1 = tslib_1.__importDefault(require("lodash/noop"));
 const set_1 = tslib_1.__importDefault(require("lodash/set"));
 const core_1 = require("../../../../core");
@@ -45,9 +46,13 @@ const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             template: ({ key }) => (react_1.default.createElement(uikit_1.Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
                 react_1.default.createElement(uikit_1.Icon, { data: icons_1.TrashBin, size: 16 }))),
         };
-        const columns = table.map(({ property, label }) => ({
+        const columns = table.map(({ property, label, description }) => ({
             id: property,
-            name: label,
+            name: !description
+                ? label
+                : () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center" },
+                    label,
+                    react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] }))),
             template: ({ key, }, idx) => {
                 var _a, _b, _c;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];

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

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeSelector = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const set_1 = tslib_1.__importDefault(require("lodash/set"));
+const core_1 = require("../../../../core");
+const common_1 = require("../../../constants/common");
+const components_1 = require("./components");
+const utils_1 = require("./utils");
+const TimeRangeSelector = (props) => {
+    var _a, _b;
+    const { spec, input, name, Layout } = props;
+    const [startTimeSpec, endTimeSpec] = react_1.default.useMemo(() => [common_1.START_TIME, common_1.END_TIME].map((key) => {
+        var _a, _b;
+        return (0, core_1.isStringSpec)((_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 { initialStartTimeOptions, initialEndTimeOptions, canBeFiltered } = react_1.default.useMemo(() => {
+        const [initialStartTimeOptions, initialEndTimeOptions] = [startTimeSpec, endTimeSpec].map((spec) => {
+            if (spec && spec.enum) {
+                return spec.enum.map((id) => {
+                    var _a, _b, _c, _d;
+                    return ({
+                        id,
+                        value: id,
+                        content: ((_b = (_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b[id]) ? (react_1.default.createElement("div", { key: id },
+                            react_1.default.createElement(uikit_1.Text, null, ((_c = spec.description) === null || _c === void 0 ? void 0 : _c[id]) || id),
+                            react_1.default.createElement(uikit_1.Text, { color: "secondary", as: "div" }, spec.viewSpec.selectParams.meta[id]))) : (((_d = spec.description) === null || _d === void 0 ? void 0 : _d[id]) || id),
+                        key: id,
+                    });
+                });
+            }
+            return undefined;
+        });
+        const canBeFiltered = initialStartTimeOptions &&
+            initialEndTimeOptions &&
+            (0, utils_1.validateArray)(initialStartTimeOptions) &&
+            (0, utils_1.validateArray)(initialEndTimeOptions);
+        return {
+            initialStartTimeOptions,
+            initialEndTimeOptions,
+            canBeFiltered,
+        };
+    }, [endTimeSpec, startTimeSpec]);
+    const { startTimeOptions, endTimeOptions } = react_1.default.useMemo(() => {
+        let startTimeOptions = initialStartTimeOptions;
+        let endTimeOptions = initialEndTimeOptions;
+        [common_1.START_TIME, common_1.END_TIME].forEach((key) => {
+            var _a;
+            const time = (_a = input.value) === null || _a === void 0 ? void 0 : _a[key];
+            if ((0, isString_1.default)(time) &&
+                canBeFiltered &&
+                initialEndTimeOptions &&
+                initialStartTimeOptions) {
+                if (common_1.START_TIME === key) {
+                    endTimeOptions = (0, utils_1.filterTimeArray)(initialEndTimeOptions, time, 'greater');
+                }
+                else {
+                    startTimeOptions = (0, utils_1.filterTimeArray)(initialStartTimeOptions, time, 'less');
+                }
+            }
+        });
+        return { startTimeOptions, endTimeOptions };
+    }, [canBeFiltered, initialEndTimeOptions, initialStartTimeOptions, input.value]);
+    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]);
+    if (!startTimeSpec || !endTimeSpec || !startTimeOptions || !endTimeOptions) {
+        return null;
+    }
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(components_1.TimeRangeSelect, { spec: startTimeSpec, name: `${name}.${common_1.START_TIME}`, options: startTimeOptions, value: (_a = input.value) === null || _a === void 0 ? void 0 : _a[common_1.START_TIME], handleChange: (value) => parentOnChange(common_1.START_TIME, value[0]), props: props }),
+        react_1.default.createElement(components_1.TimeRangeSelect, { spec: endTimeSpec, name: `${name}.${common_1.END_TIME}`, options: endTimeOptions, value: (_b = input.value) === null || _b === void 0 ? void 0 : _b[common_1.END_TIME], handleChange: (value) => parentOnChange(common_1.END_TIME, value[0]), props: props })));
+    if (Layout) {
+        return react_1.default.createElement(Layout, Object.assign({}, props), content);
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
+};
+exports.TimeRangeSelector = TimeRangeSelector;

package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.css

@@ -0,0 +1,6 @@
+.df-time-range-select__select {
+  min-width: 100px;
+}
+.df-time-range-select__select-popup {
+  max-height: 250px;
+}

package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/components/TimeRangeSelect/TimeRangeSelect.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeSelect = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const isString_1 = tslib_1.__importDefault(require("lodash/isString"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../../../../utils");
+const Row_1 = require("../../../../Layouts/Row");
+const b = (0, utils_1.block)('time-range-select');
+const TimeRangeSelect = ({ name, spec, options, value, props, handleChange, }) => {
+    var _a, _b;
+    const filterable = react_1.default.useMemo(() => ((options === null || options === void 0 ? void 0 : options.length) || 0) > 9, [options === null || options === void 0 ? void 0 : options.length]);
+    const _value = react_1.default.useMemo(() => {
+        if ((0, isString_1.default)(value)) {
+            return [value];
+        }
+        return undefined;
+    }, [value]);
+    const renderOption = react_1.default.useCallback((option) => {
+        return react_1.default.createElement(react_1.default.Fragment, { key: option.value }, option.content || option.value);
+    }, []);
+    const getOptionHeight = react_1.default.useCallback(() => {
+        var _a;
+        if ((_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta) {
+            return 44;
+        }
+        return 28;
+    }, [(_a = spec.viewSpec.selectParams) === null || _a === void 0 ? void 0 : _a.meta]);
+    return (react_1.default.createElement(Row_1.Row, Object.assign({}, Object.assign(Object.assign({}, props), { spec })),
+        react_1.default.createElement(uikit_1.Select, { className: b('select'), filterable: filterable, value: _value, options: options, onUpdate: handleChange, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder, filterPlaceholder: (_b = spec.viewSpec.selectParams) === null || _b === void 0 ? void 0 : _b.filterPlaceholder, renderOption: renderOption, getOptionHeight: getOptionHeight, qa: name, popupClassName: b('select-popup') })));
+};
+exports.TimeRangeSelect = TimeRangeSelect;

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

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

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

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

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

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

package/build/cjs/lib/kit/components/Inputs/TimeRangeSelector/utils.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateArray = exports.filterTimeArray = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const filterTimeArray = (times, cutoff, direction) => {
+    const isTimeFormat = (value) => /^\d{1,2}:\d{2}$/.test(value);
+    const compareValues = (a, b) => {
+        if (isTimeFormat(a) && isTimeFormat(b)) {
+            return direction === 'less' ? a >= b : a <= b;
+        }
+        else {
+            const aNum = parseInt(a, 10);
+            const bNum = parseInt(b, 10);
+            return direction === 'less' ? aNum >= bNum : aNum <= bNum;
+        }
+    };
+    return times.map((time) => {
+        const disabled = compareValues(time.value, cutoff);
+        return Object.assign(Object.assign({}, time), { content: disabled ? react_1.default.createElement(uikit_1.Text, { color: "secondary" }, time.content) : time.content, disabled });
+    });
+};
+exports.filterTimeArray = filterTimeArray;
+const validateArray = (arr) => arr.every((obj) => /^(\d+|\d{1,2}:\d{1,2})$/.test(obj.value));
+exports.validateArray = validateArray;

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

@@ -4,7 +4,9 @@ const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBase"), exports);
 tslib_1.__exportStar(require("./CardOneOf"), exports);
 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("./MonacoInput"), exports);
 tslib_1.__exportStar(require("./MultiOneOf"), exports);
 tslib_1.__exportStar(require("./MultiSelect"), exports);
@@ -20,3 +22,4 @@ tslib_1.__exportStar(require("./Text"), exports);
 tslib_1.__exportStar(require("./TextArea"), exports);
 tslib_1.__exportStar(require("./TextContent"), exports);
 tslib_1.__exportStar(require("./TextLink"), exports);
+tslib_1.__exportStar(require("./TimeRangeSelector"), exports);

package/build/cjs/lib/kit/components/ViewLayouts/ViewAccordeon/ViewAccordeon.js

@@ -4,13 +4,17 @@ exports.ViewAccordeon = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const isBoolean_1 = tslib_1.__importDefault(require("lodash/isBoolean"));
+const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
 const SimpleVerticalAccordeon_1 = require("../../SimpleVerticalAccordeon");
 const ViewAccordeon = ({ name, value, spec, children, }) => {
+    const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
     const [open, setOpen] = react_1.default.useState((0, isBoolean_1.default)(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }
-    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+    return (react_1.default.createElement(SimpleVerticalAccordeon_1.SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', note: showLayoutDescription && spec.viewSpec.layoutDescription
+            ? spec.viewSpec.layoutDescription
+            : undefined, open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
 };
 exports.ViewAccordeon = ViewAccordeon;

package/build/cjs/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -14,6 +14,9 @@
   align-items: baseline;
   overflow: hidden;
 }
+.df-view-row__note {
+  margin-inline-start: var(--g-spacing-half);
+}
 .df-view-row__dots {
   min-width: 40px;
   flex-grow: 1;

package/build/cjs/lib/kit/components/ViewLayouts/ViewRow/ViewRow.js

@@ -4,16 +4,20 @@ exports.ViewRow = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
+const components_1 = require("@gravity-ui/components");
+const core_1 = require("../../../../core");
 const kit_1 = require("../../../../kit");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('view-row');
 const ViewRow = ({ value, spec, children, }) => {
+    const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
     if (!(0, utils_1.isNotEmptyValue)(value, spec)) {
         return null;
     }
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('left') },
             react_1.default.createElement(uikit_1.Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (react_1.default.createElement(components_1.HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null,
             react_1.default.createElement("div", { className: b('dots') })),
         react_1.default.createElement("div", { className: b('right') }, children),
         react_1.default.createElement(kit_1.CopyButton, { spec: spec, value: value })));

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

@@ -0,0 +1,27 @@
+.df-checkbox-group-view {
+  display: flex;
+}
+.df-checkbox-group-view > *:not(:last-child) {
+  margin-right: 6px;
+}
+.df-checkbox-group-view_vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
+.df-checkbox-group-view_vertical > *:not(:last-child) {
+  margin-right: 0px;
+  margin-bottom: 6px;
+}
+.df-checkbox-group-view__tooltip {
+  overflow-wrap: break-word;
+}
+.df-checkbox-group-view__tooltip-container {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+  margin-bottom: 6px;
+}
+.df-checkbox-group-view__tooltip-container:last-child {
+  margin-bottom: 0;
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxGroupView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const common_1 = require("../../../constants/common");
+const utils_1 = require("../../../utils");
+const b = (0, utils_1.block)('checkbox-group-view');
+const CheckboxGroupView = ({ spec, value = [] }) => {
+    var _a;
+    const _value = value;
+    const items = react_1.default.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
+    const verticalPlacement = react_1.default.useMemo(() => { var _a; return ((_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement) === 'vertical'; }, [(_a = spec.viewSpec.checkboxGroupParams) === null || _a === void 0 ? void 0 : _a.placement]);
+    return (react_1.default.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (react_1.default.createElement(uikit_1.Popover, { placement: common_1.COMMON_POPOVER_PLACEMENT, key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 },
+        item,
+        !verticalPlacement && idx !== items.length - 1 ? ', ' : null)))));
+};
+exports.CheckboxGroupView = CheckboxGroupView;

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

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

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DateView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const components_1 = require("../../../components");
+const date_utils_1 = require("@gravity-ui/date-utils");
+const isObject_1 = tslib_1.__importDefault(require("lodash/isObject"));
+const DateView = (_a) => {
+    var _b, _c, _d;
+    var { value, spec } = _a, restProps = tslib_1.__rest(_a, ["value", "spec"]);
+    let formatedValue = value && (0, isObject_1.default)(value) && value.seconds
+        ? (value === null || value === void 0 ? void 0 : value.seconds) * 1000
+        : value;
+    const localSpec = spec.viewSpec;
+    const format = ((_b = localSpec.inputProps) === null || _b === void 0 ? void 0 : _b.format) || ((_c = localSpec.dateInput) === null || _c === void 0 ? void 0 : _c.printFormat) || components_1.DEFAULT_DATE_FORMAT;
+    if (formatedValue && format) {
+        formatedValue = ((_d = (0, date_utils_1.dateTimeParse)(formatedValue)) === null || _d === void 0 ? void 0 : _d.format(format)) || formatedValue;
+    }
+    return react_1.default.createElement(components_1.BaseView, Object.assign({ spec: spec, value: String(formatedValue) }, restProps));
+};
+exports.DateView = DateView;

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

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

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

@@ -6,8 +6,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const core_1 = require("../../../../core");
 const utils_1 = require("../../../utils");
+const components_1 = require("@gravity-ui/components");
 const b = (0, utils_1.block)('table-array-view');
 const TableArrayView = ({ value = [], spec, name }) => {
+    const { showLayoutDescription } = (0, core_1.useDynamicFormsCtx)();
     const columns = react_1.default.useMemo(() => {
         const { items, viewSpec: { table }, } = spec;
         if (!(table === null || table === void 0 ? void 0 : table.length) || !(0, core_1.isObjectSpec)(items)) {
@@ -19,9 +21,13 @@ const TableArrayView = ({ value = [], spec, name }) => {
             sticky: 'left',
             template: (__, idx) => (react_1.default.createElement("div", { className: b('idx'), key: `idx-${idx}` }, idx + 1)),
         };
-        const columns = table.map(({ property, label }) => ({
+        const columns = table.map(({ property, label, description }) => ({
             id: property,
-            name: label,
+            name: description && showLayoutDescription
+                ? () => (react_1.default.createElement(uikit_1.Flex, { gap: 0.5, alignItems: "center" },
+                    label,
+                    react_1.default.createElement(components_1.HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })))
+                : label,
             template: (_, idx) => {
                 var _a;
                 const entitySpec = (_a = items === null || items === void 0 ? void 0 : items.properties) === null || _a === void 0 ? void 0 : _a[property];
@@ -37,7 +43,7 @@ const TableArrayView = ({ value = [], spec, name }) => {
             },
         }));
         return [idxColumn, ...columns];
-    }, [name, spec]);
+    }, [name, spec, showLayoutDescription]);
     if (!columns) {
         return null;
     }

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeSelectorView = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const cloneDeep_1 = tslib_1.__importDefault(require("lodash/cloneDeep"));
+const core_1 = require("../../../../core");
+const common_1 = require("../../../constants/common");
+const TimeRangeSelectorView = (_a) => {
+    var { value, spec, name, Layout } = _a, restProps = tslib_1.__rest(_a, ["value", "spec", "name", "Layout"]);
+    const { startTimeSpec, endTimeSpec } = react_1.default.useMemo(() => {
+        const [startTimeSpec, endTimeSpec] = [common_1.START_TIME, common_1.END_TIME].map((key) => {
+            var _a;
+            if (((_a = spec.properties) === null || _a === void 0 ? void 0 : _a[key]) && (0, core_1.isStringSpec)(spec.properties[key])) {
+                const _spec = (0, cloneDeep_1.default)(spec.properties[key]);
+                _spec.viewSpec.layout = 'row';
+                return _spec;
+            }
+            return undefined;
+        });
+        return { startTimeSpec, endTimeSpec };
+    }, [spec.properties]);
+    if (!startTimeSpec || !endTimeSpec) {
+        return null;
+    }
+    const content = (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(core_1.ViewController, { spec: startTimeSpec, name: `${name ? name + '.' : ''}${common_1.START_TIME}` }),
+        react_1.default.createElement(core_1.ViewController, { spec: endTimeSpec, name: `${name ? name + '.' : ''}${common_1.END_TIME}` })));
+    if (Layout) {
+        return (react_1.default.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
+    }
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
+};
+exports.TimeRangeSelectorView = TimeRangeSelectorView;

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

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

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ArrayBaseView"), exports);
 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("./MonacoInputView"), exports);
@@ -15,3 +16,5 @@ tslib_1.__exportStar(require("./OneOfView"), exports);
 tslib_1.__exportStar(require("./TableArrayView"), exports);
 tslib_1.__exportStar(require("./TextAreaView"), exports);
 tslib_1.__exportStar(require("./TextLinkView"), exports);
+tslib_1.__exportStar(require("./TimeRangeSelectorView"), exports);
+tslib_1.__exportStar(require("./DateView"), exports);

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

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OBJECT_VALUE_PROPERTY_NAME = exports.COMMON_TITLE_MAX_WIDTH = exports.COMMON_POPOVER_PLACEMENT = void 0;
+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 = 533;
 exports.OBJECT_VALUE_PROPERTY_NAME = 'value';
+exports.START_TIME = 'start';
+exports.END_TIME = 'end';