@obolnetwork/obol-ui 1.0.13 → 1.0.14

package/dist/components/atoms/NumberField/NumberField.d.ts

@@ -1,9 +1,11 @@
-/// <reference types="react" />
+import { FocusEventHandler } from "react";
 interface NumberFieldProps {
-    value?: number;
-    onChangeValue?(value: number): void;
     max?: number;
     min?: number;
+    value?: number;
+    onChangeValue?(value: number): void;
+    onBlur?: FocusEventHandler<HTMLInputElement> | undefined;
+    name?: string;
 }
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -23,9 +23,9 @@ export interface TableProps {
     columns: ColumnDef<any>[];
 }
 export interface SplitterTableProps extends TableProps {
-    onAddRow(item: string): void;
+    onAddRow(item?: unknown): void;
     onRemoveRow(item: string | number): void;
-    onUpdateRow(id: string, value: string, accessorKey: unknown): void;
+    onUpdateRow(id: string, value: string | number, accessorKey: unknown): void;
     removeButton?: boolean;
 }
 export declare const SplitterTable: React.FC<SplitterTableProps>;

package/dist/index.es.js

@@ -1363,11 +1363,11 @@ var TextFieldWithCopy = forwardRef(function (props, ref) {
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
 var NumberField = forwardRef(function (_a, ref) {
-    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c, value = _a.value, onChangeValue = _a.onChangeValue;
+    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 0 : _c, value = _a.value, onChangeValue = _a.onChangeValue, onBlur = _a.onBlur, name = _a.name;
     var _d = useState(value || min), qty = _d[0], setQty = _d[1];
     var handleOnDec = function (e) {
         e.preventDefault();
-        if (qty <= min) {
+        if (qty < min) {
             setQty(min);
         }
         else {
@@ -1384,7 +1384,7 @@ var NumberField = forwardRef(function (_a, ref) {
         }
     };
     var handleOnChange = function (e) {
-        var value = e.target;
+        var value = e.target.value;
         if (value > max) {
             setQty(max);
         }
@@ -1402,6 +1402,7 @@ var NumberField = forwardRef(function (_a, ref) {
     }, [qty, onChangeValue]);
     return (jsxs(Box, __assign({ css: {
             display: "flex",
+            maxHeight: "$3xl",
             "input::-webkit-inner-spin-button": {
                 "-webkit-appearance": "none",
                 margin: 0,
@@ -1433,7 +1434,7 @@ var NumberField = forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
+        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1757,14 +1758,14 @@ var ProgressTracker = function (props) {
                         display: "flex",
                         justifyContent: "space-between",
                         alignItems: "center",
-                    } }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "javascript:void(0)" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
+                    } }, { children: items.map(function (item, index) { return (jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
 };
 
 var StyledRadio = styled(RadioGroupPrimitive.Item, {
     all: "unset",
     backgroundColor: "$obolGreen",
-    width: 25,
-    height: 25,
+    width: 22,
+    height: 22,
     borderRadius: "100%",
     "&:hover": { filter: "brightness(90%)", cursor: "pointer" },
 });
@@ -1779,10 +1780,10 @@ var StyledIndicator = styled(RadioGroupPrimitive.Indicator, {
         content: '""',
         display: "absolute",
         position: "absolute",
-        width: 11,
-        height: 11,
+        width: 10,
+        height: 10,
         borderRadius: "50%",
-        boxShadow: "0 0 0 4px #0E1E22",
+        boxShadow: "0 0 0 3px #0E1E22",
         backgroundColor: "#2FE4AB",
     },
 });
@@ -1792,6 +1793,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1801,7 +1803,7 @@ var RadioGroupItemLabel = styled("label", {
 var RadioGroupItem = function (_a) {
     var value = _a.value, label = _a.label, _b = _a.index, index = _b === void 0 ? 1 : _b;
     var id = "id-:r".concat(index, ":");
-    return (jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsx(RadioGroupPrimitive.RadioGroupIndicator, {}) })), jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
+    return (jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsx(RadioGroupPrimitive.RadioGroupIndicator, { className: "indicator" }) })), jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
 };
 var RadioGroupComponent = function (_a) {
     var items = _a.items, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["items", "value", "onValueChange"]);
@@ -1846,6 +1848,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1876,7 +1879,6 @@ var SplitterTable = function (_a) {
     var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
     return (jsxs(StyledTable, { children: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsx(Td, {})] }), jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxs("tr", { children: [jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
                                 var _a;
-                                // if (column === "id") return null;
                                 var isTextField = !!column.cell;
                                 return (jsx(Td, __assign({ noPadding: true, css: {
                                         "input::-webkit-inner-spin-button": {
@@ -1887,10 +1889,17 @@ var SplitterTable = function (_a) {
                                         "input[type=number]": {
                                             "-moz-appearance": "textfield",
                                         },
-                                    } }, { children: isTextField ? (jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
-                                            return onUpdateRow(row.id, e.target.value, column.accessorKey);
+                                    } }, { children: isTextField ? (jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onInput: function (e) {
+                                            if (Number(e.target.value) > 100)
+                                                e.target.value = 100;
+                                        }, onChange: function (e) {
+                                            var _a, _b;
+                                            var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
+                                                ? Number(e.target.value)
+                                                : e.target.value;
+                                            onUpdateRow(row.id, value, column.accessorKey);
                                         } }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
-                            }), removeButton && (jsx(Td, __assign({ size: "sm" }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
+                            }), removeButton && (jsx(Td, __assign({ size: "sm" }, { children: jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsx(AddNewRow, { handleOnClick: function () { return onAddRow(); } })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;

package/dist/index.js

@@ -1395,11 +1395,11 @@ var TextFieldWithCopy = React.forwardRef(function (props, ref) {
 TextFieldWithCopy.displayName = "TextFieldWithCopy";
 
 var NumberField = React.forwardRef(function (_a, ref) {
-    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 1 : _c, value = _a.value, onChangeValue = _a.onChangeValue;
+    var _b = _a.max, max = _b === void 0 ? 10 : _b, _c = _a.min, min = _c === void 0 ? 0 : _c, value = _a.value, onChangeValue = _a.onChangeValue, onBlur = _a.onBlur, name = _a.name;
     var _d = React.useState(value || min), qty = _d[0], setQty = _d[1];
     var handleOnDec = function (e) {
         e.preventDefault();
-        if (qty <= min) {
+        if (qty < min) {
             setQty(min);
         }
         else {
@@ -1416,7 +1416,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
         }
     };
     var handleOnChange = function (e) {
-        var value = e.target;
+        var value = e.target.value;
         if (value > max) {
             setQty(max);
         }
@@ -1434,6 +1434,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
     }, [qty, onChangeValue]);
     return (jsxRuntime.jsxs(Box, __assign({ css: {
             display: "flex",
+            maxHeight: "$3xl",
             "input::-webkit-inner-spin-button": {
                 "-webkit-appearance": "none",
                 margin: 0,
@@ -1465,7 +1466,7 @@ var NumberField = React.forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
+        } }, { children: [jsxRuntime.jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: handleOnDec, borderDisabled: qty <= min }, { children: "-" })), jsxRuntime.jsx(TextField, { css: { borderRightStyle: "none", borderLeftStyle: "none" }, type: "number", ref: ref, value: qty, onChange: handleOnChange, onBlur: onBlur, name: name }), jsxRuntime.jsx(IconButton, __assign({ disabled: qty >= max, className: "inc-button", onClick: handleOnInc, borderDisabled: qty >= max }, { children: "+" }))] })));
 });
 NumberField.displayName = "NumberField";
 
@@ -1789,14 +1790,14 @@ var ProgressTracker = function (props) {
                         display: "flex",
                         justifyContent: "space-between",
                         alignItems: "center",
-                    } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "javascript:void(0)" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
+                    } }, { children: items.map(function (item, index) { return (jsxRuntime.jsx(Link, __assign({ disabled: item.status === "incomplete", href: item.status === "incomplete" ? "#" : item.href }, { children: item.title }), ":l".concat(index))); }) }))] })) })));
 };
 
 var StyledRadio = styled(RadioGroupPrimitive__namespace.Item, {
     all: "unset",
     backgroundColor: "$obolGreen",
-    width: 25,
-    height: 25,
+    width: 22,
+    height: 22,
     borderRadius: "100%",
     "&:hover": { filter: "brightness(90%)", cursor: "pointer" },
 });
@@ -1811,10 +1812,10 @@ var StyledIndicator = styled(RadioGroupPrimitive__namespace.Indicator, {
         content: '""',
         display: "absolute",
         position: "absolute",
-        width: 11,
-        height: 11,
+        width: 10,
+        height: 10,
         borderRadius: "50%",
-        boxShadow: "0 0 0 4px #0E1E22",
+        boxShadow: "0 0 0 3px #0E1E22",
         backgroundColor: "#2FE4AB",
     },
 });
@@ -1824,6 +1825,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1833,7 +1835,7 @@ var RadioGroupItemLabel = styled("label", {
 var RadioGroupItem = function (_a) {
     var value = _a.value, label = _a.label, _b = _a.index, index = _b === void 0 ? 1 : _b;
     var id = "id-:r".concat(index, ":");
-    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsxRuntime.jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsxRuntime.jsx(RadioGroupPrimitive__namespace.RadioGroupIndicator, {}) })), jsxRuntime.jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
+    return (jsxRuntime.jsxs(Box, __assign({ css: { display: "flex", margin: "10px 0", alignItems: "center" } }, { children: [jsxRuntime.jsx(RadioGroupRadio, __assign({ value: value, id: id }, { children: jsxRuntime.jsx(RadioGroupPrimitive__namespace.RadioGroupIndicator, { className: "indicator" }) })), jsxRuntime.jsx(RadioGroupItemLabel, __assign({ htmlFor: id }, { children: label }))] })));
 };
 var RadioGroupComponent = function (_a) {
     var items = _a.items, value = _a.value, onValueChange = _a.onValueChange, props = __rest(_a, ["items", "value", "onValueChange"]);
@@ -1878,6 +1880,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1908,7 +1911,6 @@ var SplitterTable = function (_a) {
     var rows = _a.rows, columns = _a.columns, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow, _b = _a.removeButton, removeButton = _b === void 0 ? true : _b;
     return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsxs("thead", { children: [jsxRuntime.jsx(Td, {}), columns.map(function (column, index) { return (jsxRuntime.jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column.header }), "header-".concat(index))); }), jsxRuntime.jsx(Td, {})] }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (row, rowIndex) { return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
                                 var _a;
-                                // if (column === "id") return null;
                                 var isTextField = !!column.cell;
                                 return (jsxRuntime.jsx(Td, __assign({ noPadding: true, css: {
                                         "input::-webkit-inner-spin-button": {
@@ -1919,10 +1921,17 @@ var SplitterTable = function (_a) {
                                         "input[type=number]": {
                                             "-moz-appearance": "textfield",
                                         },
-                                    } }, { children: isTextField ? (jsxRuntime.jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onChange: function (e) {
-                                            return onUpdateRow(row.id, e.target.value, column.accessorKey);
+                                    } }, { children: isTextField ? (jsxRuntime.jsx(TextField, __assign({ defaultValue: row[column.accessorKey], onInput: function (e) {
+                                            if (Number(e.target.value) > 100)
+                                                e.target.value = 100;
+                                        }, onChange: function (e) {
+                                            var _a, _b;
+                                            var value = ((_b = (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.type) === "number"
+                                                ? Number(e.target.value)
+                                                : e.target.value;
+                                            onUpdateRow(row.id, value, column.accessorKey);
                                         } }, (_a = column.cell) === null || _a === void 0 ? void 0 : _a.config))) : (row[column.accessorKey]) }), "cell ".concat(cellIndex)));
-                            }), removeButton && (jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsxRuntime.jsx(AddNewRow, { handleOnClick: function () { return onAddRow(""); } })] })] }));
+                            }), removeButton && (jsxRuntime.jsx(Td, __assign({ size: "sm" }, { children: jsxRuntime.jsx(IconButton, __assign({ ghost: true, onClick: function () { return onRemoveRow(row.id); } }, { children: jsxRuntime.jsx(TrashIcon, {}) })) })))] }, row.id)); }), jsxRuntime.jsx(AddNewRow, { handleOnClick: function () { return onAddRow(); } })] })] }));
 };
 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.13",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "license": "MIT",