@gravity-ui/dynamic-forms 4.5.0 → 4.6.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/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/index.js

@@ -5,6 +5,7 @@ tslib_1.__exportStar(require("./ArrayBase"), exports);
 tslib_1.__exportStar(require("./CardOneOf"), exports);
 tslib_1.__exportStar(require("./Checkbox"), 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);

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/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/index.js

@@ -15,3 +15,4 @@ 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("./DateView"), exports);

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

@@ -94,6 +94,7 @@ exports.dynamicConfig = {
             select: { Component: components_1.Select },
             base: { Component: components_1.Text },
             file_input: { Component: components_1.FileInput },
+            date_input: { Component: components_1.DateInput },
             number_with_scale: { Component: components_1.NumberWithScale },
             monaco_input: { Component: components_1.MonacoInput },
             text_content: { Component: components_1.TextContent, independent: true },
@@ -193,6 +194,7 @@ exports.dynamicViewConfig = {
             textarea: { Component: components_1.TextAreaView },
             select: { Component: components_1.BaseView },
             base: { Component: components_1.BaseView },
+            date_input: { Component: components_1.DateView },
             file_input: { Component: components_1.FileInputView },
             number_with_scale: { Component: components_1.NumberWithScaleView },
             monaco_input: { Component: components_1.MonacoView },

package/build/esm/lib/core/components/View/DynamicView.d.ts

@@ -11,5 +11,6 @@ export interface DynamicViewProps {
         link: Spec['viewSpec']['link'];
     }>;
     Monaco?: React.ComponentType<MonacoEditorProps>;
+    showLayoutDescription?: boolean;
 }
-export declare const DynamicView: ({ value, spec, config, Link, Monaco }: DynamicViewProps) => JSX.Element | null;
+export declare const DynamicView: ({ value, spec, config, Link, Monaco, showLayoutDescription, }: DynamicViewProps) => JSX.Element | null;

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

@@ -4,9 +4,15 @@ import { isCorrectSpec } from '../../helpers';
 import { ViewController } from './ViewController';
 import { isCorrectViewConfig } from './helpers';
 import { useCreateContext } from './hooks';
-export const DynamicView = ({ value, spec, config, Link, Monaco }) => {
+export const DynamicView = ({ value, spec, config, Link, Monaco, showLayoutDescription, }) => {
     const DynamicFormsCtx = useCreateContext();
-    const context = React.useMemo(() => ({ config, value, Link, Monaco: isValidElementType(Monaco) ? Monaco : undefined }), [config, value, Link, Monaco]);
+    const context = React.useMemo(() => ({
+        config,
+        value,
+        showLayoutDescription,
+        Link,
+        Monaco: isValidElementType(Monaco) ? Monaco : undefined,
+    }), [config, value, Link, Monaco, showLayoutDescription]);
     if (isCorrectSpec(spec) && isCorrectViewConfig(config)) {
         return (React.createElement(DynamicFormsCtx.Provider, { value: context },
             React.createElement(ViewController, { spec: spec, name: "" })));

package/build/esm/lib/core/components/View/index.d.ts

@@ -2,3 +2,4 @@ export * from './DynamicView';
 export * from './ViewController';
 export * from './helpers';
 export * from './types';
+export { useDynamicFormsCtx } from './hooks';

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

@@ -2,3 +2,4 @@ export * from './DynamicView';
 export * from './ViewController';
 export * from './helpers';
 export * from './types';
+export { useDynamicFormsCtx } from './hooks';

package/build/esm/lib/core/components/View/types/context.d.ts

@@ -5,6 +5,7 @@ import { DynamicViewConfig } from './';
 export interface DynamicViewContext {
     config: DynamicViewConfig;
     value: FormValue;
+    showLayoutDescription?: boolean;
     Link?: React.ComponentType<{
         value: FormValue;
         link: Spec['viewSpec']['link'];

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

@@ -24,6 +24,7 @@ export interface ArraySpec<LinkType = any, InputComponentProps extends Record<st
         table?: {
             label: string;
             property: string;
+            description?: string;
         }[];
         link?: LinkType;
         placeholder?: string;
@@ -150,6 +151,10 @@ export interface StringSpec<LinkType = any, InputComponentProps extends Record<s
             readAsMethod?: ReadAsMethod;
             ignoreText?: boolean;
         };
+        dateInput?: {
+            outputFormat?: string;
+            printFormat?: string;
+        };
         copy?: boolean;
         selectParams?: {
             filterPlaceholder?: string;

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DatePickerProps } from '@gravity-ui/date-components';
+import { StringInputProps } from '../../../../core';
+import './DateInput.css';
+export declare const DEFAULT_DATE_FORMAT = "DD-MM-YYYY";
+export interface DateProps extends Omit<DatePickerProps, 'value' | 'disabled' | 'placeholder' | 'qa'> {
+}
+export declare const DateInput: React.FC<StringInputProps<DateProps>>;
+export default DateInput;

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

@@ -0,0 +1,46 @@
+import React, { useCallback } from 'react';
+import { DatePicker } from '@gravity-ui/date-components';
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import { block } from '../../../utils';
+import './DateInput.css';
+export const DEFAULT_DATE_FORMAT = 'DD-MM-YYYY';
+const b = block('date-input');
+export 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 = 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) || DEFAULT_DATE_FORMAT }, inputProps), { onBlur: onBlur, onFocus: onFocus, value: value
+            ? dateTimeParse(value.seconds ? value.seconds * 1000 : value) || null
+            : null, onUpdate, disabled: spec.viewSpec.disabled, placeholder: spec.viewSpec.placeholder });
+    return React.createElement(DatePicker, Object.assign({ className: b(), "data-qa": name }, props));
+};
+export default DateInput;

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

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

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

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

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Plus, TrashBin } from '@gravity-ui/icons';
-import { Button, Icon, Table } from '@gravity-ui/uikit';
+import { Button, Flex, Icon, Table } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
 import noop from 'lodash/noop';
 import set from 'lodash/set';
 import { Controller, OBJECT_ARRAY_CNT, OBJECT_ARRAY_FLAG, isArraySpec, isBooleanSpec, isObjectSpec, transformArrIn, } from '../../../../core';
@@ -42,9 +43,13 @@ export const TableArrayInput = ({ spec, name, arrayInput, input }) => {
             template: ({ key }) => (React.createElement(Button, { view: "flat-secondary", onClick: () => onItemRemove(key), key: `remove-${key}`, qa: `${name}-item-remove-${key}` },
                 React.createElement(Icon, { data: TrashBin, size: 16 }))),
         };
-        const columns = table.map(({ property, label }) => ({
+        const columns = table.map(({ property, label, description }) => ({
             id: property,
-            name: label,
+            name: !description
+                ? label
+                : () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
+                    label,
+                    React.createElement(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/esm/lib/kit/components/Inputs/index.d.ts

@@ -2,6 +2,7 @@ export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
 export * from './FileInput';
+export * from './DateInput';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';

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

@@ -2,6 +2,7 @@ export * from './ArrayBase';
 export * from './CardOneOf';
 export * from './Checkbox';
 export * from './FileInput';
+export * from './DateInput';
 export * from './MonacoInput';
 export * from './MultiOneOf';
 export * from './MultiSelect';

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

@@ -1,11 +1,15 @@
 import React from 'react';
 import isBoolean from 'lodash/isBoolean';
+import { useDynamicFormsCtx } from '../../../../core';
 import { isNotEmptyValue } from '../../../utils';
 import { SimpleVerticalAccordeon } from '../../SimpleVerticalAccordeon';
 export const ViewAccordeon = ({ name, value, spec, children, }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
     const [open, setOpen] = React.useState(isBoolean(spec.viewSpec.layoutOpen) ? spec.viewSpec.layoutOpen : true);
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
-    return (React.createElement(SimpleVerticalAccordeon, { name: name, title: spec.viewSpec.layoutTitle || '', open: open, onOpenChange: setOpen, hideInsteadOfDestroy: true, withBranchView: true, viewLayout: true }, children));
+    return (React.createElement(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));
 };

package/build/esm/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/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.js

@@ -1,16 +1,20 @@
 import React from 'react';
 import { Text } from '@gravity-ui/uikit';
+import { HelpPopover } from '@gravity-ui/components';
+import { useDynamicFormsCtx } from '../../../../core';
 import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewRow.css';
 const b = block('view-row');
 export const ViewRow = ({ value, spec, children, }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
             React.createElement(Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
+            showLayoutDescription && spec.viewSpec.layoutDescription ? (React.createElement(HelpPopover, { className: b('note'), htmlContent: spec.viewSpec.layoutDescription, placement: ['bottom', 'top'] })) : null,
             React.createElement("div", { className: b('dots') })),
         React.createElement("div", { className: b('right') }, children),
         React.createElement(CopyButton, { spec: spec, value: value })));

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { StringViewProps } from '../../../../core';
+export declare const DateView: React.FC<StringViewProps>;

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

@@ -0,0 +1,18 @@
+import { __rest } from "tslib";
+import React from 'react';
+import { BaseView, DEFAULT_DATE_FORMAT } from '../../../components';
+import { dateTimeParse } from '@gravity-ui/date-utils';
+import isObject from 'lodash/isObject';
+export const DateView = (_a) => {
+    var _b, _c, _d;
+    var { value, spec } = _a, restProps = __rest(_a, ["value", "spec"]);
+    let formatedValue = value && isObject(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) || DEFAULT_DATE_FORMAT;
+    if (formatedValue && format) {
+        formatedValue = ((_d = dateTimeParse(formatedValue)) === null || _d === void 0 ? void 0 : _d.format(format)) || formatedValue;
+    }
+    return React.createElement(BaseView, Object.assign({ spec: spec, value: String(formatedValue) }, restProps));
+};

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

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

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

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

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Table } from '@gravity-ui/uikit';
-import { ViewController, isArraySpec, isBooleanSpec, isObjectSpec, } from '../../../../core';
+import { Flex, Table } from '@gravity-ui/uikit';
+import { ViewController, isArraySpec, isBooleanSpec, isObjectSpec, useDynamicFormsCtx, } from '../../../../core';
 import { block } from '../../../utils';
 import './TableArrayView.css';
+import { HelpPopover } from '@gravity-ui/components';
 const b = block('table-array-view');
 export const TableArrayView = ({ value = [], spec, name }) => {
+    const { showLayoutDescription } = useDynamicFormsCtx();
     const columns = React.useMemo(() => {
         const { items, viewSpec: { table }, } = spec;
         if (!(table === null || table === void 0 ? void 0 : table.length) || !isObjectSpec(items)) {
@@ -16,9 +18,13 @@ export const TableArrayView = ({ value = [], spec, name }) => {
             sticky: 'left',
             template: (__, idx) => (React.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.createElement(Flex, { gap: 0.5, alignItems: "center" },
+                    label,
+                    React.createElement(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];
@@ -34,7 +40,7 @@ export const TableArrayView = ({ value = [], spec, name }) => {
             },
         }));
         return [idxColumn, ...columns];
-    }, [name, spec]);
+    }, [name, spec, showLayoutDescription]);
     if (!columns) {
         return null;
     }

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

@@ -12,3 +12,4 @@ export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextLinkView';
+export * from './DateView';

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

@@ -12,3 +12,4 @@ export * from './OneOfView';
 export * from './TableArrayView';
 export * from './TextAreaView';
 export * from './TextLinkView';
+export * from './DateView';

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

@@ -1,4 +1,4 @@
-import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
+import { Accordeon, AccordeonCardForm, ArrayBase, ArrayBaseView, BaseView, CardAccordeon, CardOneOf, CardOneOfView, CardSection, Checkbox, DateInput, DateView, FileInput, FileInputView, Group, Group2, MonacoInput, MonacoView, MultiOneOf, MultiOneOfFlat, MultiOneOfFlatView, MultiOneOfView, MultiSelect, MultiSelectView, NumberWithScale, NumberWithScaleView, ObjectBase, ObjectBaseView, ObjectInline, ObjectInlineView, ObjectValueInput, ObjectValueInputView, OneOf, OneOfFlat, OneOfFlatView, OneOfView, Row, RowVerbose, Secret, Section, Section2, Select, Switch, TableArrayInput, TableArrayView, TableCell, Text, TextArea, TextAreaView, TextContent, TextLink, TextLinkView, Transparent, ViewAccordeon, ViewAccordeonCard, ViewCardAccordeon, ViewCardSection, ViewGroup, ViewGroup2, ViewRow, ViewSection, ViewSection2, ViewTableCell, ViewTransparent, } from '../components';
 import { getArrayValidator, getBooleanValidator, getNumberValidator, getObjectValidator, getStringValidator, } from '../validators';
 export const dynamicConfig = {
     array: {
@@ -91,6 +91,7 @@ export const dynamicConfig = {
             select: { Component: Select },
             base: { Component: Text },
             file_input: { Component: FileInput },
+            date_input: { Component: DateInput },
             number_with_scale: { Component: NumberWithScale },
             monaco_input: { Component: MonacoInput },
             text_content: { Component: TextContent, independent: true },
@@ -190,6 +191,7 @@ export const dynamicViewConfig = {
             textarea: { Component: TextAreaView },
             select: { Component: BaseView },
             base: { Component: BaseView },
+            date_input: { Component: DateView },
             file_input: { Component: FileInputView },
             number_with_scale: { Component: NumberWithScaleView },
             monaco_input: { Component: MonacoView },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -45,6 +45,8 @@
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
     "@gravity-ui/components": "^3.0.0",
+    "@gravity-ui/date-components": "^2.5.0",
+    "@gravity-ui/date-utils": "^2.5.3",
     "@gravity-ui/i18n": "^1.2.0",
     "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.20"