@obolnetwork/obol-ui 1.0.36 → 1.0.38

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

@@ -29,6 +29,7 @@ export interface SplitterTableProps extends TableProps {
     onRemoveRow?(item: string | number): void;
     onUpdateRow?(id: string, value: string | number, accessorKey: unknown): void;
     totalSplitFooter?: number;
+    addText?: string;
 }
 export declare const SplitterTable: React.FC<SplitterTableProps>;
 export declare const Table: React.FC<TableProps>;

package/dist/index.es.js

@@ -1424,7 +1424,10 @@ var TextFieldWithCopy = forwardRef(function (_a, ref) {
             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$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
+    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 (e) {
+                                e.preventDefault();
+                                copyToClipBoard(inputValue);
+                            } }, { children: !isCopied ? jsx(CopyIcon, {}) : jsx(CheckIcon, {}) })) })), jsxs(Content$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -2063,10 +2066,10 @@ var Td = styled("td", {
         borderRadius: 0,
         width: "100%",
     },
-    textOverflow: 'ellipsis',
+    textOverflow: "ellipsis",
     maxWidth: 0,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
+    whiteSpace: "nowrap",
+    overflow: "hidden",
     variants: {
         splitter: {
             true: {
@@ -2089,6 +2092,7 @@ var Td = styled("td", {
 });
 var Th = styled("th", {
     border: "2px solid $bg04",
+    minWidth: "20px",
     py: "$sm",
     px: "$sm",
     textAlign: "center",
@@ -2111,8 +2115,12 @@ var BoxBorderTop = styled(Box, {
     px: "$sm",
 });
 var AddNewRow = function (_a) {
-    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
-    return (jsxs(Tr, { children: [jsx(Td, __assign({ splitter: true }, { children: jsx(BoxBorderTop, {}) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: onAddRow && (jsx(Button, __assign({ type: "button", css: {
+    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter, _b = _a.addText, addText = _b === void 0 ? "+ Add Recipient" : _b;
+    return (jsxs(Tr, { children: [jsx(Td, __assign({ splitter: true }, { children: jsx(BoxBorderTop, {}) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, __assign({ css: {
+                        "@xs": {
+                            px: "$2",
+                        },
+                    } }, { children: onAddRow && (jsxs(Button, __assign({ type: "button", css: {
                             color: "$obolGreen",
                             justifyContent: "start",
                             borderRadius: 0,
@@ -2122,13 +2130,16 @@ var AddNewRow = function (_a) {
                             "&:disabled": {
                                 borderColor: "transparent",
                             },
+                            "@xs": {
+                                px: "$1",
+                            },
                         }, fullWidth: true, ghost: true, onClick: function (e) {
                             e.preventDefault();
                             onAddRow();
-                        }, disabled: totalSplitFooter === 100 }, { children: "+ Add Signer" }))) }) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
+                        }, disabled: totalSplitFooter === 100 }, { children: [jsx(Box, __assign({ css: { display: "none", "@xs": { display: "inline-block" } } }, { children: "+ Recipient" })), " ", jsx(Box, __assign({ css: { "@xs": { display: "none" } } }, { children: addText }))] }))) })) })), jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsx(BoxBorderTop, { children: jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
 };
 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;
+    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, addText = _a.addText;
     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)));
@@ -2180,7 +2191,7 @@ var SplitterTable = function (_a) {
                                                     onUpdateRow(row.id, value, column.accessorKey);
                                             }, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
                                 }), onRemoveRow && isRemovable && (jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id));
-                    }), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
+                    }), jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter, addText: addText })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;

package/dist/index.js

@@ -1458,7 +1458,10 @@ var TextFieldWithCopy = React.forwardRef(function (_a, ref) {
             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$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
+    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 (e) {
+                                e.preventDefault();
+                                copyToClipBoard(inputValue);
+                            } }, { children: !isCopied ? jsxRuntime.jsx(CopyIcon, {}) : jsxRuntime.jsx(CheckIcon, {}) })) })), jsxRuntime.jsxs(Content$3, __assign({ side: "bottom", sideOffset: 5 }, { children: ["Copied!", jsxRuntime.jsx(TooltipArrow, {})] }))] }))] })));
 });
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
@@ -2097,10 +2100,10 @@ var Td = styled("td", {
         borderRadius: 0,
         width: "100%",
     },
-    textOverflow: 'ellipsis',
+    textOverflow: "ellipsis",
     maxWidth: 0,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
+    whiteSpace: "nowrap",
+    overflow: "hidden",
     variants: {
         splitter: {
             true: {
@@ -2123,6 +2126,7 @@ var Td = styled("td", {
 });
 var Th = styled("th", {
     border: "2px solid $bg04",
+    minWidth: "20px",
     py: "$sm",
     px: "$sm",
     textAlign: "center",
@@ -2145,8 +2149,12 @@ var BoxBorderTop = styled(Box, {
     px: "$sm",
 });
 var AddNewRow = function (_a) {
-    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter;
-    return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ splitter: true }, { children: jsxRuntime.jsx(BoxBorderTop, {}) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: onAddRow && (jsxRuntime.jsx(Button, __assign({ type: "button", css: {
+    var onAddRow = _a.onAddRow, totalSplitFooter = _a.totalSplitFooter, _b = _a.addText, addText = _b === void 0 ? "+ Add Recipient" : _b;
+    return (jsxRuntime.jsxs(Tr, { children: [jsxRuntime.jsx(Td, __assign({ splitter: true }, { children: jsxRuntime.jsx(BoxBorderTop, {}) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, __assign({ css: {
+                        "@xs": {
+                            px: "$2",
+                        },
+                    } }, { children: onAddRow && (jsxRuntime.jsxs(Button, __assign({ type: "button", css: {
                             color: "$obolGreen",
                             justifyContent: "start",
                             borderRadius: 0,
@@ -2156,13 +2164,16 @@ var AddNewRow = function (_a) {
                             "&:disabled": {
                                 borderColor: "transparent",
                             },
+                            "@xs": {
+                                px: "$1",
+                            },
                         }, fullWidth: true, ghost: true, onClick: function (e) {
                             e.preventDefault();
                             onAddRow();
-                        }, disabled: totalSplitFooter === 100 }, { children: "+ Add Signer" }))) }) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
+                        }, disabled: totalSplitFooter === 100 }, { children: [jsxRuntime.jsx(Box, __assign({ css: { display: "none", "@xs": { display: "inline-block" } } }, { children: "+ Recipient" })), " ", jsxRuntime.jsx(Box, __assign({ css: { "@xs": { display: "none" } } }, { children: addText }))] }))) })) })), jsxRuntime.jsx(Td, __assign({ splitter: true, css: { backgroundColor: "$bg03" } }, { children: jsxRuntime.jsx(BoxBorderTop, { children: jsxRuntime.jsx(Box, { children: totalSplitFooter && "".concat(totalSplitFooter, "%") }) }) }))] }));
 };
 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;
+    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, addText = _a.addText;
     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)));
@@ -2214,7 +2225,7 @@ var SplitterTable = function (_a) {
                                                     onUpdateRow(row.id, value, column.accessorKey);
                                             }, min: (_c = (_b = column.cell) === null || _b === void 0 ? void 0 : _b.config) === null || _c === void 0 ? void 0 : _c.min, max: (_e = (_d = column.cell) === null || _d === void 0 ? void 0 : _d.config) === null || _e === void 0 ? void 0 : _e.max, type: (_g = (_f = column.cell) === null || _f === void 0 ? void 0 : _f.config) === null || _g === void 0 ? void 0 : _g.type, readOnly: !isEditable })) }), "cell ".concat(cellIndex)));
                                 }), onRemoveRow && isRemovable && (jsxRuntime.jsx(Td, __assign({ splitter: true, size: "sm", css: { p: "$2" } }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id));
-                    }), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter })] })] }));
+                    }), jsxRuntime.jsx(AddNewRow, { onAddRow: onAddRow, totalSplitFooter: totalSplitFooter, addText: addText })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;

package/package.json

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