@obolnetwork/obol-ui 1.0.11 → 1.0.14

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

@@ -3,6 +3,7 @@ import * as Stitches from "@stitches/react";
 export declare const IconButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
     ghost?: boolean | "true" | undefined;
     fullWidth?: boolean | "true" | undefined;
+    borderDisabled?: boolean | "true" | undefined;
 }, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
@@ -488,6 +489,7 @@ export declare type IconButtonComponentProps = IconButtonComponentVariants;
 export declare const IconButtonStory: (props: Omit<import("@stitches/react/types/styled-component").TransformProps<{
     ghost?: boolean | "true" | undefined;
     fullWidth?: boolean | "true" | undefined;
+    borderDisabled?: boolean | "true" | undefined;
 }, {
     motion: "(prefers-reduced-motion)";
     hover: "(any-hover: hover)";
@@ -498,9 +500,10 @@ export declare const IconButtonStory: (props: Omit<import("@stitches/react/types
     bp2: "(min-width: 900px)";
     md: "(max-width: 1200px)";
     lg: "(max-width: 1800px)";
-}>, "ghost" | "fullWidth"> & {
+}>, "ghost" | "fullWidth" | "borderDisabled"> & {
     ghost?: boolean | undefined;
     fullWidth?: boolean | undefined;
+    borderDisabled?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
     disabled?: boolean | undefined;

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

@@ -5,15 +5,28 @@ export interface RowItem {
 }
 export declare type RowTableType = Record<string, string | React.ReactNode>;
 export declare type RowsTableType = RowItem[];
+export declare type CellDef = {
+    component: "TextField" | "NumberField";
+    config?: {
+        type: "text" | "number";
+        max: number;
+        min: number;
+    };
+};
+export declare type ColumnDef<T> = {
+    accessorKey: keyof T;
+    header: string;
+    cell?: CellDef;
+};
 export interface TableProps {
-    rows: RowsTableType;
-    columns: string[];
+    rows: any[];
+    columns: ColumnDef<any>[];
 }
 export interface SplitterTableProps extends TableProps {
-    renderComponentValue?: "TextField" | "Text";
-    onAddRow(item: string): void;
+    onAddRow(item?: unknown): void;
     onRemoveRow(item: string | number): void;
-    onUpdateRow(id: string, value: string): void;
+    onUpdateRow(id: string, value: string | number, accessorKey: unknown): void;
+    removeButton?: boolean;
 }
 export declare const SplitterTable: React.FC<SplitterTableProps>;
 export declare const Table: React.FC<TableProps>;

package/dist/index.es.js

@@ -1199,6 +1199,7 @@ var IconButton = styled("button", {
         color: "$muted",
     },
     margin: 0,
+    border: "2px solid transparent",
     variants: {
         ghost: {
             true: {
@@ -1215,6 +1216,11 @@ var IconButton = styled("button", {
                 width: "$full",
             },
         },
+        borderDisabled: {
+            true: {
+                border: "2px solid $bg04",
+            },
+        },
     },
 });
 var IconButtonStory = modifyVariantsForStory(IconButton);
@@ -1357,17 +1363,19 @@ 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 () {
-        if (qty <= min) {
+    var handleOnDec = function (e) {
+        e.preventDefault();
+        if (qty < min) {
             setQty(min);
         }
         else {
             setQty(qty - 1);
         }
     };
-    var handleOnInc = function () {
+    var handleOnInc = function (e) {
+        e.preventDefault();
         if (qty >= max) {
             setQty(max);
         }
@@ -1394,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,
@@ -1425,7 +1434,7 @@ var NumberField = forwardRef(function (_a, ref) {
                 borderRadius: 0,
                 width: "95px",
             },
-        } }, { children: [jsx(IconButton, __assign({ disabled: qty <= min, className: "dec-button", onClick: function () { return handleOnDec(); } }, { 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: function () { return handleOnInc(); } }, { 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";
 
@@ -1749,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" },
 });
@@ -1771,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",
     },
 });
@@ -1784,6 +1793,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1793,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"]);
@@ -1805,7 +1815,7 @@ var StyledTable = styled("table", {
     borderRadius: "2px",
     backgroundColor: "$bg02",
     borderStyle: "hidden",
-    boxShadow: "0 0 0 2px $bg04",
+    boxShadow: "0 0 0 2px $colors$bg04",
     width: "100%",
     "& thead": {
         color: "$body",
@@ -1838,6 +1848,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1865,18 +1876,35 @@ var AddNewRow = function (props) {
 };
 // Components
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, _b = _a.renderComponentValue, renderComponentValue = _b === void 0 ? "TextField" : _b, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow;
-    return (jsxs(StyledTable, { children: [jsxs("thead", { children: [jsx(Td, {}), columns.map(function (column, index) { return (jsx(Td, __assign({ css: { textAlign: "start" } }, { children: column }), "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 })), Object.keys(row).map(function (data, cellIndex) {
-                                if (data === "id")
-                                    return null;
-                                var isTextField = renderComponentValue === "TextField";
-                                return (jsx(Td, __assign({ noPadding: true }, { children: isTextField ? (jsx(TextField, { defaultValue: row.value, onChange: function (e) { return onUpdateRow(row.id, e.target.value); } })) : (row.value) }), "cell ".concat(cellIndex)));
-                            }), 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 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;
+                                var isTextField = !!column.cell;
+                                return (jsx(Td, __assign({ noPadding: true, css: {
+                                        "input::-webkit-inner-spin-button": {
+                                            "-webkit-appearance": "none",
+                                            margin: 0,
+                                        },
+                                        /* Firefox */
+                                        "input[type=number]": {
+                                            "-moz-appearance": "textfield",
+                                        },
+                                    } }, { 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(); } })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
-    return (jsxs(StyledTable, { children: [jsx("thead", { children: columns.map(function (column, index) { return (jsx(Td, { children: column }, "header-".concat(index))); }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: Object.keys(row).map(function (data, cellIndex) {
-                        return (jsx(Td, { children: row.value }, "cell ".concat(cellIndex)));
+    return (jsxs(StyledTable, { children: [jsx("thead", { children: columns.map(function (column, index) { return (jsx(Td, { children: column }, "header-".concat(index))); }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
+                        return (jsx(Td, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 

package/dist/index.js

@@ -1231,6 +1231,7 @@ var IconButton = styled("button", {
         color: "$muted",
     },
     margin: 0,
+    border: "2px solid transparent",
     variants: {
         ghost: {
             true: {
@@ -1247,6 +1248,11 @@ var IconButton = styled("button", {
                 width: "$full",
             },
         },
+        borderDisabled: {
+            true: {
+                border: "2px solid $bg04",
+            },
+        },
     },
 });
 var IconButtonStory = modifyVariantsForStory(IconButton);
@@ -1389,17 +1395,19 @@ 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 () {
-        if (qty <= min) {
+    var handleOnDec = function (e) {
+        e.preventDefault();
+        if (qty < min) {
             setQty(min);
         }
         else {
             setQty(qty - 1);
         }
     };
-    var handleOnInc = function () {
+    var handleOnInc = function (e) {
+        e.preventDefault();
         if (qty >= max) {
             setQty(max);
         }
@@ -1426,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,
@@ -1457,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: function () { return handleOnDec(); } }, { 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: function () { return handleOnInc(); } }, { 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";
 
@@ -1781,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" },
 });
@@ -1803,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",
     },
 });
@@ -1816,6 +1825,7 @@ var RadioGroupRadio = StyledRadio;
 var RadioGroupIndicator = StyledIndicator;
 var RadioGroupItemLabel = styled("label", {
     color: "$textLight",
+    fontWeight: "$bold",
     fontSize: "$3",
     lineHeight: 1,
     userSelect: "none",
@@ -1825,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"]);
@@ -1837,7 +1847,7 @@ var StyledTable = styled("table", {
     borderRadius: "2px",
     backgroundColor: "$bg02",
     borderStyle: "hidden",
-    boxShadow: "0 0 0 2px $bg04",
+    boxShadow: "0 0 0 2px $colors$bg04",
     width: "100%",
     "& thead": {
         color: "$body",
@@ -1870,6 +1880,7 @@ var Td = styled("td", {
         noPadding: {
             true: {
                 p: 0,
+                backgroundColor: "$bg03",
             },
         },
         size: {
@@ -1897,18 +1908,35 @@ var AddNewRow = function (props) {
 };
 // Components
 var SplitterTable = function (_a) {
-    var rows = _a.rows, columns = _a.columns, _b = _a.renderComponentValue, renderComponentValue = _b === void 0 ? "TextField" : _b, onAddRow = _a.onAddRow, onRemoveRow = _a.onRemoveRow, onUpdateRow = _a.onUpdateRow;
-    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-".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 })), Object.keys(row).map(function (data, cellIndex) {
-                                if (data === "id")
-                                    return null;
-                                var isTextField = renderComponentValue === "TextField";
-                                return (jsxRuntime.jsx(Td, __assign({ noPadding: true }, { children: isTextField ? (jsxRuntime.jsx(TextField, { defaultValue: row.value, onChange: function (e) { return onUpdateRow(row.id, e.target.value); } })) : (row.value) }), "cell ".concat(cellIndex)));
-                            }), 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 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;
+                                var isTextField = !!column.cell;
+                                return (jsxRuntime.jsx(Td, __assign({ noPadding: true, css: {
+                                        "input::-webkit-inner-spin-button": {
+                                            "-webkit-appearance": "none",
+                                            margin: 0,
+                                        },
+                                        /* Firefox */
+                                        "input[type=number]": {
+                                            "-moz-appearance": "textfield",
+                                        },
+                                    } }, { 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(); } })] })] }));
 };
 var Table = function (_a) {
     var rows = _a.rows, columns = _a.columns;
-    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "header-".concat(index))); }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: Object.keys(row).map(function (data, cellIndex) {
-                        return (jsxRuntime.jsx(Td, { children: row.value }, "cell ".concat(cellIndex)));
+    return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: columns.map(function (column, index) { return (jsxRuntime.jsx(Td, { children: column }, "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, { children: row[column.accessorKey] }, "cell ".concat(cellIndex)));
                     }) }, "row ".concat(rowIndex))); }) })] }));
 };
 

package/package.json

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