@gravity-ui/dynamic-forms 3.4.0 → 3.5.0

package/build/esm/lib/kit/components/LongValue/LongValue.css

@@ -1,11 +1,5 @@
 .df-long-value {
   max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-long-value_open {
-  white-space: pre-wrap;
-  word-wrap: break-word;
 }
 .df-long-value_long {
   cursor: pointer;

package/build/esm/lib/kit/components/LongValue/LongValue.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from '@gravity-ui/uikit';
 import { block } from '../../utils';
 import './LongValue.css';
 const b = block('long-value');
@@ -8,6 +9,15 @@ export const LongValue = ({ value, className }) => {
     const [open, setOpen] = React.useState(false);
     const [long, setLong] = React.useState(false);
     const handleClick = React.useCallback(() => setOpen((f) => !f), [setOpen]);
+    const currentTextProperies = React.useMemo(() => {
+        let wordBreak;
+        let whiteSpace;
+        if (open) {
+            wordBreak = 'break-all';
+            whiteSpace = 'break-spaces';
+        }
+        return { wordBreak, whiteSpace };
+    }, [open]);
     React.useEffect(() => {
         if (ref.current) {
             if (value !== prevValue.current) {
@@ -29,5 +39,6 @@ export const LongValue = ({ value, className }) => {
             }
         }
     });
-    return (React.createElement("div", { ref: ref, className: b({ open, long }, className), onClick: long ? handleClick : undefined }, value));
+    return (React.createElement("div", { ref: ref, onClick: long ? handleClick : undefined },
+        React.createElement(Text, Object.assign({ className: b({ long }, className), ellipsis: true }, currentTextProperies), value)));
 };

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -17,21 +17,6 @@
   margin-left: -13px;
   max-width: 533px;
 }
-.df-simple-vertical-accordeon__title {
-  font-weight: 500;
-}
-.df-simple-vertical-accordeon__title_size_s {
-  margin-bottom: 0;
-  font-size: var(--g-text-body-1-font-size);
-}
-.df-simple-vertical-accordeon__title_size_m {
-  margin-bottom: 1px;
-  font-size: var(--g-text-body2-font-size);
-}
-.df-simple-vertical-accordeon__title_size_l {
-  margin-bottom: 2px;
-  font-size: var(--g-text-body3-font-size);
-}
 .df-simple-vertical-accordeon__tooltip {
   margin: 0px 5px;
 }

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.d.ts

@@ -37,6 +37,7 @@ export declare class SimpleVerticalAccordeon extends React.Component<SimpleVerti
     checkVisibility: () => void;
     private handleClick;
     private getTitle;
+    private getCurrentTitleVariant;
     private getTooltip;
 }
 export {};

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { HelpPopover } from '@gravity-ui/components';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Button, Icon, Popover } from '@gravity-ui/uikit';
+import { Button, Icon, Popover, Text } from '@gravity-ui/uikit';
 import { COMMON_POPOVER_PLACEMENT } from '../../constants/common';
 import { block } from '../../utils';
 import './SimpleVerticalAccordeon.css';
@@ -49,7 +49,7 @@ export class SimpleVerticalAccordeon extends React.Component {
     }
     render() {
         var _a;
-        const { titleSize, children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
+        const { children, headerActionsTemplate, className, contentClassName, buttonClassName, hideInsteadOfDestroy, withBranchView, viewLayout, name, } = this.props;
         const { open, hidden, isFirstRender } = this.state;
         const content = hideInsteadOfDestroy ? (React.createElement("div", { ref: this.componentRef, className: b('body', { hidden: !open }) }, children)) : (open && (React.createElement("div", { ref: this.componentRef, className: b('body', contentClassName) }, children)));
         if (viewLayout && !isFirstRender && hidden) {
@@ -57,11 +57,12 @@ export class SimpleVerticalAccordeon extends React.Component {
         }
         const title = this.getTitle();
         const titlePopoverDisabled = (((_a = this.titleRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0) <= TITLE_TEXT_MAX_WIDTH;
+        const currentTitleVariant = this.getCurrentTitleVariant();
         return (Boolean(React.Children.count(children)) && (React.createElement("div", { className: b({ branch: withBranchView, view: viewLayout }, className) },
             React.createElement("div", { className: b('header') },
                 React.createElement(Popover, { content: title, disabled: titlePopoverDisabled, placement: COMMON_POPOVER_PLACEMENT },
                     React.createElement(Button, { view: "flat", className: b('header-inner', buttonClassName), onClick: this.handleClick, qa: `${name}-accordeon-toggler`, width: "auto" },
-                        React.createElement("b", { ref: this.titleRef, className: b('title', { size: titleSize }) }, title),
+                        React.createElement(Text, { variant: currentTitleVariant }, title),
                         React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open }), size: 16 }))),
                 this.getTooltip(),
                 headerActionsTemplate ? headerActionsTemplate : null),
@@ -74,9 +75,19 @@ export class SimpleVerticalAccordeon extends React.Component {
         }
         return this.state.open ? openTitle : title;
     }
+    getCurrentTitleVariant() {
+        const { titleSize } = this.props;
+        if (titleSize === 'm') {
+            return 'body-2';
+        }
+        if (titleSize === 'l') {
+            return 'body-3';
+        }
+        return 'body-1';
+    }
     getTooltip() {
         const { note } = this.props;
-        return note ? (React.createElement("span", { className: b('tooltip') },
+        return note ? (React.createElement(Text, { className: b('tooltip') },
             React.createElement(HelpPopover, { htmlContent: note, placement: ['bottom', 'top'] }))) : null;
     }
 }

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

@@ -14,12 +14,6 @@
   align-items: baseline;
   overflow: hidden;
 }
-.df-view-row__title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--g-color-text-secondary);
-}
 .df-view-row__dots {
   min-width: 40px;
   flex-grow: 1;

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from '@gravity-ui/uikit';
 import { CopyButton } from '../../../../kit';
 import { block, isNotEmptyValue } from '../../../utils';
 import './ViewRow.css';
@@ -9,7 +10,7 @@ export const ViewRow = ({ value, spec, children, }) => {
     }
     return (React.createElement("div", { className: b() },
         React.createElement("div", { className: b('left') },
-            React.createElement("div", { className: b('title'), title: spec.viewSpec.layoutTitle }, spec.viewSpec.layoutTitle),
+            React.createElement(Text, { whiteSpace: "nowrap", color: "secondary", ellipsis: true }, spec.viewSpec.layoutTitle),
             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/CardOneOfView.js

@@ -19,5 +19,5 @@ export const CardOneOfView = (props) => {
     if (!value || !Object.keys(value).length) {
         return null;
     }
-    return (React.createElement(Card, { name: name, title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` })) : null));
+    return (React.createElement(Card, { name: name, title: title, open: open, onToggle: onToggle, disableHeaderToggle: true, checkEmptyBody: true }, specProperties[valueKey] ? (React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name ? name + '.' : ''}${valueKey}`, key: `${name ? name + '.' : ''}${valueKey}` })) : null));
 };

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

@@ -33,6 +33,6 @@ export const MultiOneOfView = (props) => {
     return (React.createElement(React.Fragment, null,
         selectView,
         React.createElement("div", { className: b('content', { flat: withoutIndent, 'multiple-values': items.length > 1 }) },
-            React.createElement(GroupIndent, null, values.map((value) => (React.createElement(React.Fragment, { key: value }, specProperties && specProperties[value] ? (React.createElement(ViewController, { name: `${name}.${value}`, spec: specProperties[value] })) : null)))))));
+            React.createElement(GroupIndent, null, values.map((value) => (React.createElement(React.Fragment, { key: value }, specProperties && specProperties[value] ? (React.createElement(ViewController, { name: `${name ? name + '.' : ''}${value}`, spec: specProperties[value] })) : null)))))));
 };
 export const MultiOneOfFlatView = (props) => (React.createElement(MultiOneOfView, Object.assign({}, props, { withoutIndent: true })));

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Popover } from '@gravity-ui/uikit';
+import { Popover, Text } from '@gravity-ui/uikit';
 import { block, isCorrectSizeParams } from '../../../utils';
 import { useInitial } from '../../Inputs/NumberWithScale/useInitial';
 import './NumberWithScaleView.css';
@@ -9,8 +9,6 @@ const NumberWithScaleViewBase = ({ 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("span", { className: b('size') },
-            " ",
-            scale[initialType].title)));
+        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/OneOfView/OneOfView.js

@@ -28,7 +28,7 @@ const OneOfViewComponent = (props) => {
     return (React.createElement("div", { className: b({ flat: props.withoutIndent }) },
         wrappedValue,
         specProperties[valueKey] ? (React.createElement(GroupIndent, null,
-            React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name}.${valueKey}`, key: `${name}.${valueKey}` }))) : null));
+            React.createElement(ViewController, { spec: specProperties[valueKey], name: `${name ? name + '.' : ''}${valueKey}`, key: `${name ? name + '.' : ''}${valueKey}` }))) : null));
 };
 export const OneOfView = OneOfViewComponent;
 export const OneOfFlatView = (props) => (React.createElement(OneOfViewComponent, Object.assign({}, props, { withoutIndent: true })));

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

@@ -4,14 +4,6 @@
 .df-text-area-view_active {
   cursor: pointer;
 }
-.df-text-area-view__text-view {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.df-text-area-view__text-view_open {
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-}
 .df-text-area-view__chevron {
   margin: 3px;
 }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ChevronDown } from '@gravity-ui/icons';
-import { Icon } from '@gravity-ui/uikit';
+import { Icon, Text } from '@gravity-ui/uikit';
 import { block } from '../../../utils';
 import './TextAreaView.css';
 const b = block('text-area-view');
@@ -11,7 +11,7 @@ export const TextAreaView = ({ value = '' }) => {
         setIsOpen(!isOpen);
     }, [isOpen]);
     return (React.createElement("div", { className: b({ active: isValueLong }), onClick: isValueLong ? handleClick : undefined },
-        React.createElement("div", { className: b('text-view', { open: isOpen }) }, value),
+        React.createElement(Text, { ellipsis: true, whiteSpace: isOpen ? 'break-spaces' : undefined }, value),
         isValueLong ? (React.createElement("div", null,
             React.createElement(Icon, { data: ChevronDown, className: b('chevron', { open: isOpen }), size: 16 }))) : null));
 };

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

@@ -19,7 +19,7 @@ export const TextLinkView = (_a) => {
     if (!childSpec || !(value === null || value === void 0 ? void 0 : value.text)) {
         return null;
     }
-    const content = React.createElement(ViewController, { spec: childSpec, name: `${name}.${TEXT_LINK_PROPERTY_NAME}` });
+    const content = (React.createElement(ViewController, { spec: childSpec, name: `${name ? name + '.' : ''}${TEXT_LINK_PROPERTY_NAME}` }));
     if (Layout) {
         return (React.createElement(Layout, Object.assign({ spec: spec, name: name, value: value }, restProps), content));
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -38,8 +38,9 @@
     "playwright:install": "playwright install --with-deps",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
-    "playwright:docker": "docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx  playwright install && npm run playwright'",
-    "playwright:docker:update": " docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm ci && npx  playwright install && npm run playwright:update'"
+    "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
+    "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
+    "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache"
   },
   "dependencies": {
     "@bem-react/classname": "^1.6.0",