@obolnetwork/obol-ui 1.0.25 → 1.0.26

package/dist/index.es.js

@@ -1386,23 +1386,28 @@ var Content$2 = styled(TooltipContent, {
         fill: "$bg05",
     },
 });
-var TextFieldWithCopy = forwardRef(function (props, ref) {
-    var _a = useState(""), inputValue = _a[0], setInputValue = _a[1];
-    var _b = useState(false), isCopied = _b[0], setIsCopied = _b[1];
+var TextFieldWithCopy = forwardRef(function (_a, ref) {
+    var value = _a.value, onChange = _a.onChange, props = __rest(_a, ["value", "onChange"]);
+    var _b = useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
+    var _c = useState(false), isCopied = _c[0], setIsCopied = _c[1];
     var innerRef = useRef(null);
     useImperativeHandle(ref, function () { return innerRef.current; });
     var copyToClipBoard = function (content) {
         if (content) {
-            navigator.clipboard.writeText(content);
+            navigator.clipboard.writeText(content.toString());
             setIsCopied(true);
         }
     };
     useTimeout(function () {
         setIsCopied(false);
     }, isCopied ? 3000 : null);
-    return (jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsx(TextField, __assign({ withCopy: true, ref: innerRef, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } }, props, { css: { width: "$full" } })), jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsx(IconButton, __assign({ onClick: function () {
-                                return copyToClipBoard(inputValue);
-                            } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
+    var handleOnChange = function (e) {
+        setInputValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsx(TextField, __assign({}, props, { withCopy: true, ref: innerRef, value: inputValue, onChange: handleOnChange, css: { width: "$full" } })), jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsx(IconButton, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 

package/dist/index.js

@@ -1418,23 +1418,28 @@ var Content$2 = styled(TooltipContent, {
         fill: "$bg05",
     },
 });
-var TextFieldWithCopy = React.forwardRef(function (props, ref) {
-    var _a = React.useState(""), inputValue = _a[0], setInputValue = _a[1];
-    var _b = React.useState(false), isCopied = _b[0], setIsCopied = _b[1];
+var TextFieldWithCopy = React.forwardRef(function (_a, ref) {
+    var value = _a.value, onChange = _a.onChange, props = __rest(_a, ["value", "onChange"]);
+    var _b = React.useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
+    var _c = React.useState(false), isCopied = _c[0], setIsCopied = _c[1];
     var innerRef = React.useRef(null);
     React.useImperativeHandle(ref, function () { return innerRef.current; });
     var copyToClipBoard = function (content) {
         if (content) {
-            navigator.clipboard.writeText(content);
+            navigator.clipboard.writeText(content.toString());
             setIsCopied(true);
         }
     };
     useTimeout(function () {
         setIsCopied(false);
     }, isCopied ? 3000 : null);
-    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsxRuntime.jsx(TextField, __assign({ withCopy: true, ref: innerRef, value: inputValue, onChange: function (e) { return setInputValue(e.target.value); } }, props, { css: { width: "$full" } })), jsxRuntime.jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsxRuntime.jsx(IconButton, __assign({ onClick: function () {
-                                return copyToClipBoard(inputValue);
-                            } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
+    var handleOnChange = function (e) {
+        setInputValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", width: "$full" } }, { children: [jsxRuntime.jsx(TextField, __assign({}, props, { withCopy: true, ref: innerRef, value: inputValue, onChange: handleOnChange, css: { width: "$full" } })), jsxRuntime.jsxs(Tooltip, __assign({ open: isCopied }, { children: [jsxRuntime.jsx(TooltipTrigger, __assign({ asChild: true }, { children: jsxRuntime.jsx(IconButton, __assign({ onClick: function () { return copyToClipBoard(inputValue); } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$2, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obolnetwork/obol-ui",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",