@gravity-ui/dynamic-forms 4.7.0 → 4.7.2

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

@@ -12,15 +12,6 @@ const LongValue = ({ value, className }) => {
     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) {
@@ -42,7 +33,8 @@ const LongValue = ({ value, className }) => {
             }
         }
     });
-    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 (react_1.default.createElement(uikit_1.Text, { as: "div", 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.js

@@ -9,15 +9,6 @@ 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) {
@@ -39,6 +30,7 @@ export const LongValue = ({ value, className }) => {
             }
         }
     });
-    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 (React.createElement(Text, { as: "div", 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.0",
+  "version": "4.7.2",
   "description": "",
   "license": "MIT",
   "main": "build/cjs/index.js",
@@ -45,8 +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/date-components": "^2.4.0",
+    "@gravity-ui/date-utils": "^2.4.0",
     "@gravity-ui/i18n": "^1.2.0",
     "@gravity-ui/icons": "^2.8.1",
     "lodash": "^4.17.20"