@obolnetwork/obol-ui 1.0.24 → 1.0.27

package/dist/components/molecules/Table/Table.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { CSS } from "../../../stitches.config";
 export declare type RowDef<T> = {
     id: string;
     isRemovable?: boolean;
@@ -16,6 +17,7 @@ export declare type CellDef = {
 export declare type ColumnDef<T> = {
     accessorKey: keyof T;
     header: string | React.ReactNode;
+    css?: CSS;
     cell?: CellDef;
 };
 export interface TableProps {

package/dist/index.es.js

@@ -2,7 +2,7 @@ import { createStitches } from '@stitches/react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import React, { forwardRef, useState, useRef, useEffect, useLayoutEffect } from 'react';
+import React, { forwardRef, useState, useRef, useImperativeHandle, useEffect, useLayoutEffect } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -1386,22 +1386,28 @@ var Content$2 = styled(TooltipContent, {
         fill: "$bg05",
     },
 });
-var TextFieldWithCopy = forwardRef(function (props) {
-    var _a = useState(), inputValue = _a[0], setInputValue = _a[1];
-    var _b = useState(false), isCopied = _b[0], setIsCopied = _b[1];
-    var ref = useRef(null);
+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: ref, 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(ref && ref.current && ref.current.value);
-                            } }, { 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";
 
@@ -2001,7 +2007,10 @@ var AddNewRow = function (_a) {
 };
 var SplitterTable = function (_a) {
     var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
-    return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (column, index) { return (jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Th, {})] }) }), jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
+    return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (_a, index) {
+                            var css = _a.css, column = __rest(_a, ["css"]);
+                            return (jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
+                        }), jsx(Th, {})] }) }), jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
                         var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
                         return (jsxs("tr", { children: [jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
                                     var _a, _b, _c, _d, _e, _f, _g;
@@ -2053,7 +2062,10 @@ var SplitterTable = function (_a) {
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
-    return (jsxs(StyledTable, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (column, index) { return (jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }) }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
+    return (jsxs(StyledTable, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (_a, index) {
+                        var css = _a.css, column = __rest(_a, ["css"]);
+                        return (jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
+                    }) }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
                         return (jsx(Td, __assign({ css: { color: "$light" } }, { children: row[column.accessorKey] }), "cell ".concat(cellIndex)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
@@ -2066,11 +2078,11 @@ var Advisory = function (_a) {
     var handleOnAccept = function (value) {
         onUpdateState(value);
     };
-    return (jsxs(Box, __assign({ css: {
+    return (jsxs(Box, __assign({ className: "advisory-container", css: {
             display: "flex",
             border: "2px solid $bg04",
             borderRadius: "$3",
-            height: "752px",
+            minHeight: "752px",
         } }, { children: [jsx(Box, __assign({ css: {
                     display: "flex",
                     fd: "column",

package/dist/index.js

@@ -1418,22 +1418,28 @@ var Content$2 = styled(TooltipContent, {
         fill: "$bg05",
     },
 });
-var TextFieldWithCopy = React.forwardRef(function (props) {
-    var _a = React.useState(), inputValue = _a[0], setInputValue = _a[1];
-    var _b = React.useState(false), isCopied = _b[0], setIsCopied = _b[1];
-    var ref = React.useRef(null);
+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: ref, 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(ref && ref.current && ref.current.value);
-                            } }, { 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";
 
@@ -2033,7 +2039,10 @@ var AddNewRow = function (_a) {
 };
 var SplitterTable = function (_a) {
     var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.totalSplitFooter, totalSplitFooter = _b === void 0 ? 100 : _b;
-    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Th, {})] }) }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
+    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (_a, index) {
+                            var css = _a.css, column = __rest(_a, ["css"]);
+                            return (jsxRuntime.jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
+                        }), jsxRuntime.jsx(Th, {})] }) }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
                         var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
                         return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
                                     var _a, _b, _c, _d, _e, _f, _g;
@@ -2085,7 +2094,10 @@ var SplitterTable = function (_a) {
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
-    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Th, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }) }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: columns.map(function (column, cellIndex) {
+    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: columns.map(function (_a, index) {
+                        var css = _a.css, column = __rest(_a, ["css"]);
+                        return (jsxRuntime.jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
+                    }) }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: columns.map(function (column, cellIndex) {
                         return (jsxRuntime.jsx(Td, __assign({ css: { color: "$light" } }, { children: row[column.accessorKey] }), "cell ".concat(cellIndex)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
@@ -2098,11 +2110,11 @@ var Advisory = function (_a) {
     var handleOnAccept = function (value) {
         onUpdateState(value);
     };
-    return (jsxRuntime.jsxs(Box, __assign({ css: {
+    return (jsxRuntime.jsxs(Box, __assign({ className: "advisory-container", css: {
             display: "flex",
             border: "2px solid $bg04",
             borderRadius: "$3",
-            height: "752px",
+            minHeight: "752px",
         } }, { children: [jsxRuntime.jsx(Box, __assign({ css: {
                     display: "flex",
                     fd: "column",

package/package.json

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