@gravity-ui/dynamic-forms 4.17.0 → 5.0.0-beta.0

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

@@ -3,7 +3,7 @@ import isObjectLike from 'lodash/isObjectLike';
 import { Card, ViewRow } from '../';
 import { ViewController } from '../../../core';
 export const CardOneOfView = (props) => {
-    const { value = {}, spec, name, Layout } = props;
+    const { value = {}, spec, name } = props;
     const [open, setOpen] = React.useState(true);
     const onToggle = React.useCallback(() => setOpen((f) => !f), [setOpen]);
     const specProperties = React.useMemo(() => (isObjectLike(spec.properties) ? spec.properties : {}), [spec.properties]);
@@ -14,18 +14,8 @@ export const CardOneOfView = (props) => {
             ((_b = specProperties[valueKey]) === null || _b === void 0 ? void 0 : _b.viewSpec.layoutTitle) ||
             valueKey);
     }, [valueKey, spec.description, specProperties]);
-    const title = React.useMemo(() => {
-        const titleProps = {
-            spec: spec,
-            value: valueName,
-            name: name,
-            children: React.createElement(React.Fragment, null, valueName),
-        };
-        if (Layout) {
-            return React.createElement(Layout, Object.assign({}, titleProps));
-        }
-        return React.createElement(ViewRow, Object.assign({}, titleProps));
-    }, [spec, name, valueName, Layout]);
+    const title = React.useMemo(() => (React.createElement(ViewRow, { spec: spec, value: valueName, name: name },
+        React.createElement(React.Fragment, null, valueName))), [spec, name, valueName]);
     if (!value || !Object.keys(value).length) {
         return null;
     }

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

@@ -30,16 +30,18 @@
 .df-checkbox-group-view_vertical > *:not(:last-child) {
   margin: var(--df-checkbox-group-view-vertical-child-margin, var(--g-spacing-0) var(--g-spacing-0) 6px);
 }
-.df-checkbox-group-view__tooltip {
+.df-checkbox-group-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-checkbox-group-view__tooltip-container {
-  max-width: var(--df-tooltip-container-max-width, 100%);
+.df-checkbox-group-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
+  margin-bottom: var(--df-popover-item-margin-bottom, 6px);
 }
-.df-checkbox-group-view__tooltip-container:last-child {
+.df-checkbox-group-view__item:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import { block } from '../../../utils';
 import './CheckboxGroupView.css';
@@ -9,7 +9,8 @@ export const CheckboxGroupView = ({ spec, value = [] }) => {
     const _value = value;
     const items = React.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.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.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (React.createElement(Popover, { placement: 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)))));
+    return (React.createElement("div", { className: b({ vertical: verticalPlacement }) }, items.map((item, idx) => (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), key: item, hasArrow: true, disabled: item.length < 51 },
+        React.createElement(Text, { className: b('item') },
+            item,
+            !verticalPlacement && idx !== items.length - 1 ? ', ' : null))))));
 };

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

@@ -17,17 +17,19 @@
 }
 */
 /* Border-radius */
-.df-multi-oneof-view__tooltip {
+.df-multi-oneof-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-multi-oneof-view__tooltip-container {
-  max-width: var(--df-tooltip-container-max-width, 100%);
+.df-multi-oneof-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
+  margin-bottom: var(--df-popover-item-margin-bottom, 6px);
 }
-.df-multi-oneof-view__tooltip-container:last-child {
+.df-multi-oneof-view__item:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-multi-oneof-view__content_multiple-values > .df-group-indent {

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import isObjectLike from 'lodash/isObjectLike';
 import { ViewController } from '../../../../core';
 import { block } from '../../../utils';
 import { GroupIndent } from '../../GroupIndent';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './MultiOneOfView.css';
 const b = block('multi-oneof-view');
 export const MultiOneOfView = (props) => {
@@ -20,7 +21,8 @@ export const MultiOneOfView = (props) => {
     }), [spec.description, specProperties, values]);
     const selectView = React.useMemo(() => {
         const selectView = (React.createElement(React.Fragment, null, items.map((item) => {
-            return (React.createElement(Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item));
+            return (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), disabled: item.length < 51, hasArrow: true, key: item },
+                React.createElement(Text, { className: b('item') }, item)));
         })));
         if (Layout) {
             return (React.createElement(Layout, Object.assign({}, props, { value: values }), selectView));

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

@@ -17,16 +17,18 @@
 }
 */
 /* Border-radius */
-.df-multiselect-view__tooltip {
+.df-multiselect-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-multiselect-view__tooltip-container {
-  max-width: var(--df-tooltip-container-max-width, 100%);
+.df-multiselect-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
-  margin-bottom: var(--df-tooltip-container-margin-bottom, 6px);
+  margin-bottom: var(--df-popover-item-margin-bottom, 6px);
 }
-.df-multiselect-view__tooltip-container:last-child {
+.df-multiselect-view__item:last-child {
   margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }

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

@@ -1,10 +1,12 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './MultiSelectView.css';
 const b = block('multiselect-view');
 export const MultiSelectView = ({ spec, value = [] }) => {
     const _value = value;
     const items = React.useMemo(() => _value.map((item) => { var _a; return ((_a = spec.description) === null || _a === void 0 ? void 0 : _a[item]) || item; }), [spec.description, _value]);
-    return (React.createElement(React.Fragment, null, items.map((item) => (React.createElement(Popover, { placement: ['bottom', 'top'], key: item, content: item, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: item.length < 51 }, item)))));
+    return (React.createElement(React.Fragment, null, items.map((item) => (React.createElement(Popover, { placement: COMMON_POPOVER_PLACEMENT, content: item, className: b('popover'), disabled: item.length < 51, hasArrow: true, key: item },
+        React.createElement(Text, { className: b('item') }, item))))));
 };

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

@@ -20,14 +20,16 @@
 .df-number-with-scale-view {
   display: flex;
 }
-.df-number-with-scale-view__tooltip {
+.df-number-with-scale-view__popover {
+  padding: var(--g-spacing-2);
   overflow-wrap: break-word;
+  max-width: 300px;
 }
-.df-number-with-scale-view__tooltip-container {
-  white-space: nowrap;
+.df-number-with-scale-view__item {
+  max-width: var(--df-popover-item-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: var(--df-tooltip-container-max-width, 100%);
+  display: block;
 }
 .df-number-with-scale-view__size {
   margin-left: var(--df-number-with-scale-view-size-margin-left, var(--g-spacing-half));

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

@@ -8,7 +8,8 @@ const NumberWithScaleViewBase = ({ spec, value }) => {
     const { initialValue, initialType } = useInitial(value || '', spec, [value]);
     const { scale } = spec.viewSpec.sizeParams;
     return (React.createElement("div", { className: b() },
-        React.createElement(Popover, { placement: ['bottom', 'top'], content: initialValue, className: b('tooltip-container'), contentClassName: b('tooltip'), disabled: initialValue.length < 26 }, initialValue),
+        React.createElement(Popover, { placement: ['bottom', 'top'], content: initialValue, className: b('popover'), disabled: initialValue.length < 26, hasArrow: true },
+            React.createElement(Text, { className: b('item') }, initialValue)),
         React.createElement(Text, { className: b('size') }, scale[initialType].title)));
 };
 export const NumberWithScaleView = (props) => isCorrectSizeParams(props.spec) && props.value ? React.createElement(NumberWithScaleViewBase, Object.assign({}, props)) : null;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { Flex, Table } from '@gravity-ui/uikit';
+import { Flex, HelpMark, Table } from '@gravity-ui/uikit';
 import { ViewController, isArraySpec, isBooleanSpec, isObjectSpec, useDynamicFormsCtx, } from '../../../../core';
 import { block } from '../../../utils';
+import { COMMON_POPOVER_PLACEMENT } from '../../../constants/common';
 import './TableArrayView.css';
-import { HelpPopover } from '@gravity-ui/components';
 const b = block('table-array-view');
 export const TableArrayView = ({ value = [], spec, name }) => {
     const { showLayoutDescription } = useDynamicFormsCtx();
@@ -23,7 +23,9 @@ export const TableArrayView = ({ value = [], spec, name }) => {
             name: description && showLayoutDescription
                 ? () => (React.createElement(Flex, { gap: 0.5, alignItems: "center" },
                     label,
-                    React.createElement(HelpPopover, { htmlContent: description, placement: ['bottom', 'top'] })))
+                    React.createElement(HelpMark, { popoverProps: {
+                            placement: COMMON_POPOVER_PLACEMENT,
+                        } }, description)))
                 : label,
             template: (_, idx) => {
                 var _a;

package/build/esm/lib/kit/hooks/useOneOf/useOneOf.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Checkbox, RadioButton, Select } from '@gravity-ui/uikit';
+import { Checkbox, SegmentedRadioGroup, Select } from '@gravity-ui/uikit';
 import isObjectLike from 'lodash/isObjectLike';
 import some from 'lodash/some';
 import { TogglerCard } from '../../components';
@@ -96,7 +96,7 @@ export const useOneOf = ({ props, onTogglerChange }) => {
             return (React.createElement("div", { className: b('checkbox') },
                 React.createElement(Checkbox, { checked: checkboxValue, onUpdate: onCheckboxChange, disabled: spec.viewSpec.disabled, qa: name })));
         }
-        return (React.createElement(RadioButton, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(RadioButton.Option, { key: option.value, value: option.value }, option.title)))));
+        return (React.createElement(SegmentedRadioGroup, { value: oneOfValue, onChange: (event) => onOneOfChange([event.target.value]), disabled: spec.viewSpec.disabled, qa: name }, options.map((option) => (React.createElement(SegmentedRadioGroup.Option, { key: option.value, value: option.value }, option.title)))));
     }, [
         togglerType,
         oneOfValue,

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

@@ -37,7 +37,7 @@ export const isNotEmptyValue = (value, spec) => {
     return true;
 };
 export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     if (isObjectLike(spec)) {
         const result = cloneDeep(spec);
         if (isString(result.type)) {
@@ -49,7 +49,7 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
                 try {
                     _defaultValue = JSON.parse(result.defaultValue);
                 }
-                catch (_m) {
+                catch (_l) {
                     _defaultValue = undefined;
                 }
             }
@@ -70,21 +70,20 @@ export const prepareSpec = (spec, parseJsonDefaultValue, overridePatternError) =
         if (isString((_c = result.viewSpec) === null || _c === void 0 ? void 0 : _c.addButtonPosition)) {
             result.viewSpec.addButtonPosition = result.viewSpec.addButtonPosition.toLowerCase();
         }
-        if (isString((_e = (_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.oneOfParams) === null || _e === void 0 ? void 0 : _e.toggler)) {
+        if (isString((_d = result.viewSpec) === null || _d === void 0 ? void 0 : _d.themeLabel)) {
+            result.viewSpec.textContentParams = Object.assign(Object.assign({}, result.viewSpec.textContentParams), { themeLabel: result.viewSpec.themeLabel.toLowerCase() });
+        }
+        if (isString((_f = (_e = result.viewSpec) === null || _e === void 0 ? void 0 : _e.oneOfParams) === null || _f === void 0 ? void 0 : _f.toggler)) {
             result.viewSpec.oneOfParams.toggler = result.viewSpec.oneOfParams.toggler.toLowerCase();
         }
-        if (isString((_g = (_f = result.viewSpec) === null || _f === void 0 ? void 0 : _f.textContentParams) === null || _g === void 0 ? void 0 : _g.themeLabel)) {
+        if (isString((_h = (_g = result.viewSpec) === null || _g === void 0 ? void 0 : _g.textContentParams) === null || _h === void 0 ? void 0 : _h.themeLabel)) {
             result.viewSpec.textContentParams.themeLabel =
                 result.viewSpec.textContentParams.themeLabel.toLowerCase();
         }
-        if (isString((_j = (_h = result.viewSpec) === null || _h === void 0 ? void 0 : _h.textContentParams) === null || _j === void 0 ? void 0 : _j.themeAlert)) {
+        if (isString((_k = (_j = result.viewSpec) === null || _j === void 0 ? void 0 : _j.textContentParams) === null || _k === void 0 ? void 0 : _k.themeAlert)) {
             result.viewSpec.textContentParams.themeAlert =
                 result.viewSpec.textContentParams.themeAlert.toLowerCase();
         }
-        if (isString((_l = (_k = result.viewSpec) === null || _k === void 0 ? void 0 : _k.textContentParams) === null || _l === void 0 ? void 0 : _l.viewAlert)) {
-            result.viewSpec.textContentParams.viewAlert =
-                result.viewSpec.textContentParams.viewAlert.toLowerCase();
-        }
         if (isString(result.validator)) {
             result.validator = result.validator.toLowerCase();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.17.0",
+  "version": "5.0.0-beta.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -45,11 +45,10 @@
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",
-    "@gravity-ui/components": "^3.0.0",
-    "@gravity-ui/date-components": "^2.10.3",
+    "@gravity-ui/date-components": "^3.0.0-beta.0",
     "@gravity-ui/date-utils": "^2.5.5",
     "@gravity-ui/i18n": "^1.2.0",
-    "@gravity-ui/icons": "^2.8.1",
+    "@gravity-ui/icons": "^2.12.0",
     "lodash": "^4.17.20"
   },
   "devDependencies": {
@@ -61,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": "^6.0.0",
+    "@gravity-ui/uikit": "^7.0.0-beta.5",
     "@playwright/experimental-ct-react": "^1.40.0",
     "@playwright/test": "^1.40.0",
     "@storybook/addon-essentials": "^7.0.27",
@@ -115,7 +114,7 @@
     "uuid": "^9.0.1"
   },
   "peerDependencies": {
-    "@gravity-ui/uikit": "^6.0.0",
+    "@gravity-ui/uikit": "^7.0.0-beta.5",
     "final-form": "^4.20.2",
     "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0",