@obolnetwork/obol-ui 1.0.25 → 1.0.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/molecules/Table/Table.d.ts +2 -0
- package/dist/index.es.js +24 -11
- package/dist/index.js +24 -11
- package/package.json +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
+
import { CSS } from "../../../stitches.config";
|
|
2
3
|
export declare type RowDef<T> = {
|
|
3
4
|
id: string;
|
|
4
5
|
isRemovable?: boolean;
|
|
@@ -16,6 +17,7 @@ export declare type CellDef = {
|
|
|
16
17
|
export declare type ColumnDef<T> = {
|
|
17
18
|
accessorKey: keyof T;
|
|
18
19
|
header: string | React.ReactNode;
|
|
20
|
+
css?: CSS;
|
|
19
21
|
cell?: CellDef;
|
|
20
22
|
};
|
|
21
23
|
export interface TableProps {
|
package/dist/index.es.js
CHANGED
|
@@ -1134,6 +1134,8 @@ var TeamMemberCard = function (props) { return (jsxs(Box, __assign({ css: {
|
|
|
1134
1134
|
borderRadius: "$3",
|
|
1135
1135
|
backgroundColor: "$bg04",
|
|
1136
1136
|
alignItems: "center",
|
|
1137
|
+
justifyItems: "center",
|
|
1138
|
+
width: "224px",
|
|
1137
1139
|
gap: "$lg",
|
|
1138
1140
|
p: "$xl",
|
|
1139
1141
|
"@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
|
|
@@ -1386,23 +1388,28 @@ var Content$2 = styled(TooltipContent, {
|
|
|
1386
1388
|
fill: "$bg05",
|
|
1387
1389
|
},
|
|
1388
1390
|
});
|
|
1389
|
-
var TextFieldWithCopy = forwardRef(function (
|
|
1390
|
-
var
|
|
1391
|
-
var _b = useState(
|
|
1391
|
+
var TextFieldWithCopy = forwardRef(function (_a, ref) {
|
|
1392
|
+
var value = _a.value, onChange = _a.onChange, props = __rest(_a, ["value", "onChange"]);
|
|
1393
|
+
var _b = useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
|
|
1394
|
+
var _c = useState(false), isCopied = _c[0], setIsCopied = _c[1];
|
|
1392
1395
|
var innerRef = useRef(null);
|
|
1393
1396
|
useImperativeHandle(ref, function () { return innerRef.current; });
|
|
1394
1397
|
var copyToClipBoard = function (content) {
|
|
1395
1398
|
if (content) {
|
|
1396
|
-
navigator.clipboard.writeText(content);
|
|
1399
|
+
navigator.clipboard.writeText(content.toString());
|
|
1397
1400
|
setIsCopied(true);
|
|
1398
1401
|
}
|
|
1399
1402
|
};
|
|
1400
1403
|
useTimeout(function () {
|
|
1401
1404
|
setIsCopied(false);
|
|
1402
1405
|
}, isCopied ? 3000 : null);
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
+
var handleOnChange = function (e) {
|
|
1407
|
+
setInputValue(e.target.value);
|
|
1408
|
+
if (onChange) {
|
|
1409
|
+
onChange(e);
|
|
1410
|
+
}
|
|
1411
|
+
};
|
|
1412
|
+
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, {})] }))] }))] })));
|
|
1406
1413
|
});
|
|
1407
1414
|
TextFieldWithCopy.displayName = "TextFieldWithCopy";
|
|
1408
1415
|
|
|
@@ -1724,11 +1731,11 @@ var Navbar = function (_a) {
|
|
|
1724
1731
|
"@sm": {
|
|
1725
1732
|
pl: "$sm",
|
|
1726
1733
|
},
|
|
1727
|
-
} }, { children: [jsxs(Box, __assign({ css: {
|
|
1734
|
+
} }, { children: [jsxs(Box, __assign({ as: "a", css: {
|
|
1728
1735
|
display: "flex",
|
|
1729
1736
|
alignItems: "center",
|
|
1730
1737
|
"@sm": { display: "none" },
|
|
1731
|
-
} }, { children: [jsx(ObolDarkBgH, {}), logoText && (jsx(Text, __assign({ css: {
|
|
1738
|
+
}, href: "/" }, { children: [jsx(ObolDarkBgH, {}), logoText && (jsx(Text, __assign({ css: {
|
|
1732
1739
|
fontSize: "28px",
|
|
1733
1740
|
color: "$muted",
|
|
1734
1741
|
fontWeight: "bold",
|
|
@@ -2002,7 +2009,10 @@ var AddNewRow = function (_a) {
|
|
|
2002
2009
|
};
|
|
2003
2010
|
var SplitterTable = function (_a) {
|
|
2004
2011
|
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;
|
|
2005
|
-
return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (
|
|
2012
|
+
return (jsxs(StyledTable, { children: [jsx("thead", { children: jsxs("tr", { children: [jsx(Th, {}), columns.map(function (_a, index) {
|
|
2013
|
+
var css = _a.css, column = __rest(_a, ["css"]);
|
|
2014
|
+
return (jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
|
|
2015
|
+
}), jsx(Th, {})] }) }), jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
|
|
2006
2016
|
var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
|
|
2007
2017
|
return (jsxs("tr", { children: [jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
|
|
2008
2018
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -2054,7 +2064,10 @@ var SplitterTable = function (_a) {
|
|
|
2054
2064
|
};
|
|
2055
2065
|
var Table = function (_a) {
|
|
2056
2066
|
var rows = _a.rows, columns = _a.columns;
|
|
2057
|
-
return (jsxs(StyledTable, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (
|
|
2067
|
+
return (jsxs(StyledTable, { children: [jsx("thead", { children: jsx("tr", { children: columns.map(function (_a, index) {
|
|
2068
|
+
var css = _a.css, column = __rest(_a, ["css"]);
|
|
2069
|
+
return (jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
|
|
2070
|
+
}) }) }), jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsx("tr", { children: columns.map(function (column, cellIndex) {
|
|
2058
2071
|
return (jsx(Td, __assign({ css: { color: "$light" } }, { children: row[column.accessorKey] }), "cell ".concat(cellIndex)));
|
|
2059
2072
|
}) }, "row ".concat(rowIndex))); }) })] }));
|
|
2060
2073
|
};
|
package/dist/index.js
CHANGED
|
@@ -1166,6 +1166,8 @@ var TeamMemberCard = function (props) { return (jsxRuntime.jsxs(Box, __assign({
|
|
|
1166
1166
|
borderRadius: "$3",
|
|
1167
1167
|
backgroundColor: "$bg04",
|
|
1168
1168
|
alignItems: "center",
|
|
1169
|
+
justifyItems: "center",
|
|
1170
|
+
width: "224px",
|
|
1169
1171
|
gap: "$lg",
|
|
1170
1172
|
p: "$xl",
|
|
1171
1173
|
"@sm": { gridTemplateColumns: "1fr 2fr", p: "$sm" },
|
|
@@ -1418,23 +1420,28 @@ var Content$2 = styled(TooltipContent, {
|
|
|
1418
1420
|
fill: "$bg05",
|
|
1419
1421
|
},
|
|
1420
1422
|
});
|
|
1421
|
-
var TextFieldWithCopy = React.forwardRef(function (
|
|
1422
|
-
var
|
|
1423
|
-
var _b = React.useState(
|
|
1423
|
+
var TextFieldWithCopy = React.forwardRef(function (_a, ref) {
|
|
1424
|
+
var value = _a.value, onChange = _a.onChange, props = __rest(_a, ["value", "onChange"]);
|
|
1425
|
+
var _b = React.useState(value || ""), inputValue = _b[0], setInputValue = _b[1];
|
|
1426
|
+
var _c = React.useState(false), isCopied = _c[0], setIsCopied = _c[1];
|
|
1424
1427
|
var innerRef = React.useRef(null);
|
|
1425
1428
|
React.useImperativeHandle(ref, function () { return innerRef.current; });
|
|
1426
1429
|
var copyToClipBoard = function (content) {
|
|
1427
1430
|
if (content) {
|
|
1428
|
-
navigator.clipboard.writeText(content);
|
|
1431
|
+
navigator.clipboard.writeText(content.toString());
|
|
1429
1432
|
setIsCopied(true);
|
|
1430
1433
|
}
|
|
1431
1434
|
};
|
|
1432
1435
|
useTimeout(function () {
|
|
1433
1436
|
setIsCopied(false);
|
|
1434
1437
|
}, isCopied ? 3000 : null);
|
|
1435
|
-
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
+
var handleOnChange = function (e) {
|
|
1439
|
+
setInputValue(e.target.value);
|
|
1440
|
+
if (onChange) {
|
|
1441
|
+
onChange(e);
|
|
1442
|
+
}
|
|
1443
|
+
};
|
|
1444
|
+
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, {})] }))] }))] })));
|
|
1438
1445
|
});
|
|
1439
1446
|
TextFieldWithCopy.displayName = "TextFieldWithCopy";
|
|
1440
1447
|
|
|
@@ -1756,11 +1763,11 @@ var Navbar = function (_a) {
|
|
|
1756
1763
|
"@sm": {
|
|
1757
1764
|
pl: "$sm",
|
|
1758
1765
|
},
|
|
1759
|
-
} }, { children: [jsxRuntime.jsxs(Box, __assign({ css: {
|
|
1766
|
+
} }, { children: [jsxRuntime.jsxs(Box, __assign({ as: "a", css: {
|
|
1760
1767
|
display: "flex",
|
|
1761
1768
|
alignItems: "center",
|
|
1762
1769
|
"@sm": { display: "none" },
|
|
1763
|
-
} }, { children: [jsxRuntime.jsx(ObolDarkBgH, {}), logoText && (jsxRuntime.jsx(Text, __assign({ css: {
|
|
1770
|
+
}, href: "/" }, { children: [jsxRuntime.jsx(ObolDarkBgH, {}), logoText && (jsxRuntime.jsx(Text, __assign({ css: {
|
|
1764
1771
|
fontSize: "28px",
|
|
1765
1772
|
color: "$muted",
|
|
1766
1773
|
fontWeight: "bold",
|
|
@@ -2034,7 +2041,10 @@ var AddNewRow = function (_a) {
|
|
|
2034
2041
|
};
|
|
2035
2042
|
var SplitterTable = function (_a) {
|
|
2036
2043
|
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;
|
|
2037
|
-
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (
|
|
2044
|
+
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Th, {}), columns.map(function (_a, index) {
|
|
2045
|
+
var css = _a.css, column = __rest(_a, ["css"]);
|
|
2046
|
+
return (jsxRuntime.jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
|
|
2047
|
+
}), jsxRuntime.jsx(Th, {})] }) }), jsxRuntime.jsxs("tbody", { children: [rows.map(function (_a, rowIndex) {
|
|
2038
2048
|
var _b = _a.isRemovable, isRemovable = _b === void 0 ? true : _b, _c = _a.isEditable, isEditable = _c === void 0 ? true : _c, row = __rest(_a, ["isRemovable", "isEditable"]);
|
|
2039
2049
|
return (jsxRuntime.jsxs("tr", { children: [jsxRuntime.jsx(Td, __assign({ textCenter: true, size: "sm" }, { children: rowIndex + 1 })), columns.map(function (column, cellIndex) {
|
|
2040
2050
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -2086,7 +2096,10 @@ var SplitterTable = function (_a) {
|
|
|
2086
2096
|
};
|
|
2087
2097
|
var Table = function (_a) {
|
|
2088
2098
|
var rows = _a.rows, columns = _a.columns;
|
|
2089
|
-
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: columns.map(function (
|
|
2099
|
+
return (jsxRuntime.jsxs(StyledTable, { children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { children: columns.map(function (_a, index) {
|
|
2100
|
+
var css = _a.css, column = __rest(_a, ["css"]);
|
|
2101
|
+
return (jsxRuntime.jsx(Th, __assign({ css: __assign({ textAlign: "start" }, css) }, { children: column.header }), "header-".concat(index)));
|
|
2102
|
+
}) }) }), jsxRuntime.jsx("tbody", { children: rows.map(function (row, rowIndex) { return (jsxRuntime.jsx("tr", { children: columns.map(function (column, cellIndex) {
|
|
2090
2103
|
return (jsxRuntime.jsx(Td, __assign({ css: { color: "$light" } }, { children: row[column.accessorKey] }), "cell ".concat(cellIndex)));
|
|
2091
2104
|
}) }, "row ".concat(rowIndex))); }) })] }));
|
|
2092
2105
|
};
|