@gravity-ui/dynamic-forms 4.7.1 → 4.7.3

package/build/cjs/lib/kit/components/CopyButton/CopyButton.css

@@ -1,4 +1,11 @@
 .df-copy-button {
+  width: 20px;
   display: none;
-  margin: 2px 0 0 5px;
+  position: relative;
+  margin: -1px 0 0 5px;
+}
+.df-copy-button__button {
+  position: absolute;
+  top: 0;
+  left: 0;
 }

package/build/cjs/lib/kit/components/CopyButton/CopyButton.js

@@ -13,7 +13,8 @@ const b = (0, utils_1.block)('copy-button');
  */
 const CopyButton = ({ spec, value }) => {
     if (((0, core_1.isStringSpec)(spec) || (0, core_1.isNumberSpec)(spec)) && spec.viewSpec.copy) {
-        return react_1.default.createElement(uikit_1.ClipboardButton, { className: b(), text: `${value}`, size: "s" });
+        return (react_1.default.createElement("div", { className: b() },
+            react_1.default.createElement(uikit_1.ClipboardButton, { className: b('button'), text: `${value}`, size: "xs" })));
     }
     return null;
 };

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

@@ -1,12 +1,15 @@
 .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;
 }
 .df-long-value_long:hover {
   color: var(--g-color-text-secondary);
-}
-.df-long-value__container {
-  display: flex;
 }

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

@@ -3,29 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LongValue = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
+const once_1 = tslib_1.__importDefault(require("lodash/once"));
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('long-value');
-const LongValue = ({ value, className }) => {
-    const prevValue = react_1.default.useRef(null);
+const LongValue = (_a) => {
+    var { value, className } = _a, restProps = tslib_1.__rest(_a, ["value", "className"]);
     const ref = react_1.default.useRef(null);
     const [open, setOpen] = react_1.default.useState(false);
     const [long, setLong] = react_1.default.useState(false);
     const handleClick = react_1.default.useCallback(() => setOpen((f) => !f), [setOpen]);
-    const currentTextProperies = react_1.default.useMemo(() => {
-        let wordBreak;
-        let whiteSpace;
-        if (open) {
-            wordBreak = 'break-all';
-            whiteSpace = 'break-spaces';
-        }
-        return { wordBreak, whiteSpace };
-    }, [open]);
     react_1.default.useEffect(() => {
         if (ref.current) {
-            if (value !== prevValue.current) {
-                const { offsetWidth, scrollWidth } = ref.current;
-                if (offsetWidth < scrollWidth) {
+            const { offsetWidth, scrollWidth } = ref.current;
+            const setFlags = (0, once_1.default)((offsetW, scrollW) => {
+                if (offsetW < scrollW) {
                     if (!long) {
                         setLong(true);
                     }
@@ -38,11 +30,29 @@ const LongValue = ({ value, className }) => {
                         setOpen(false);
                     }
                 }
-                prevValue.current = value;
+            });
+            // element has been rendered, but is not displayed on the page
+            if (offsetWidth === 0 && scrollWidth === 0) {
+                const observer = new IntersectionObserver((entries) => {
+                    const entry = entries.find((e) => e.target === ref.current);
+                    if (entry && entry.isIntersecting) {
+                        const target = entry.target;
+                        setFlags(target.offsetWidth, target.scrollWidth);
+                    }
+                });
+                observer.observe(ref.current);
+                return () => {
+                    observer.disconnect();
+                };
+            }
+            else {
+                setFlags(offsetWidth, scrollWidth);
             }
         }
-    });
-    return (react_1.default.createElement("div", { className: b('container'), ref: ref, onClick: long ? handleClick : undefined },
-        react_1.default.createElement(uikit_1.Text, Object.assign({ className: b({ long }, className), ellipsis: true }, currentTextProperies), value)));
+        return;
+    }, [value]);
+    return (react_1.default.createElement(uikit_1.Text, Object.assign({ as: "div" }, restProps, { ref: ref, className: b({ open, long }, className), 
+        // @ts-ignore
+        onClick: long ? handleClick : undefined }), value));
 };
 exports.LongValue = LongValue;

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

@@ -1,4 +1,11 @@
 .df-copy-button {
+  width: 20px;
   display: none;
-  margin: 2px 0 0 5px;
+  position: relative;
+  margin: -1px 0 0 5px;
+}
+.df-copy-button__button {
+  position: absolute;
+  top: 0;
+  left: 0;
 }

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

@@ -10,7 +10,8 @@ const b = block('copy-button');
  */
 export const CopyButton = ({ spec, value }) => {
     if ((isStringSpec(spec) || isNumberSpec(spec)) && spec.viewSpec.copy) {
-        return React.createElement(ClipboardButton, { className: b(), text: `${value}`, size: "s" });
+        return (React.createElement("div", { className: b() },
+            React.createElement(ClipboardButton, { className: b('button'), text: `${value}`, size: "xs" })));
     }
     return null;
 };

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

@@ -1,12 +1,15 @@
 .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;
 }
 .df-long-value_long:hover {
   color: var(--g-color-text-secondary);
-}
-.df-long-value__container {
-  display: flex;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
+import { type TextProps } from '@gravity-ui/uikit';
 import './LongValue.css';
-export interface LongValueProps {
+export interface LongValueProps extends TextProps {
     value?: string | number | boolean;
-    className?: string;
 }
 export declare const LongValue: React.FC<LongValueProps>;

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

@@ -1,28 +1,21 @@
+import { __rest } from "tslib";
 import React from 'react';
+import once from 'lodash/once';
 import { Text } from '@gravity-ui/uikit';
 import { block } from '../../utils';
 import './LongValue.css';
 const b = block('long-value');
-export const LongValue = ({ value, className }) => {
-    const prevValue = React.useRef(null);
+export const LongValue = (_a) => {
+    var { value, className } = _a, restProps = __rest(_a, ["value", "className"]);
     const ref = React.useRef(null);
     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) {
-                const { offsetWidth, scrollWidth } = ref.current;
-                if (offsetWidth < scrollWidth) {
+            const { offsetWidth, scrollWidth } = ref.current;
+            const setFlags = once((offsetW, scrollW) => {
+                if (offsetW < scrollW) {
                     if (!long) {
                         setLong(true);
                     }
@@ -35,10 +28,28 @@ export const LongValue = ({ value, className }) => {
                         setOpen(false);
                     }
                 }
-                prevValue.current = value;
+            });
+            // element has been rendered, but is not displayed on the page
+            if (offsetWidth === 0 && scrollWidth === 0) {
+                const observer = new IntersectionObserver((entries) => {
+                    const entry = entries.find((e) => e.target === ref.current);
+                    if (entry && entry.isIntersecting) {
+                        const target = entry.target;
+                        setFlags(target.offsetWidth, target.scrollWidth);
+                    }
+                });
+                observer.observe(ref.current);
+                return () => {
+                    observer.disconnect();
+                };
+            }
+            else {
+                setFlags(offsetWidth, scrollWidth);
             }
         }
-    });
-    return (React.createElement("div", { className: b('container'), ref: ref, onClick: long ? handleClick : undefined },
-        React.createElement(Text, Object.assign({ className: b({ long }, className), ellipsis: true }, currentTextProperies), value)));
+        return;
+    }, [value]);
+    return (React.createElement(Text, Object.assign({ as: "div" }, restProps, { ref: ref, className: b({ open, long }, className), 
+        // @ts-ignore
+        onClick: long ? handleClick : undefined }), value));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dynamic-forms",
-  "version": "4.7.1",
+  "version": "4.7.3",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",