@ctlyst.id/internal-ui 5.1.0 → 5.2.0
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/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +46 -23
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +46 -23
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -1007,23 +1007,23 @@ var isCellDisabled = (row, cellId) => {
|
|
1007
1007
|
}
|
1008
1008
|
return false;
|
1009
1009
|
};
|
1010
|
-
var getCommonPinningStyles = (column) => {
|
1010
|
+
var getCommonPinningStyles = (column, paddingRowX) => {
|
1011
1011
|
const isPinned = column.getIsPinned();
|
1012
1012
|
const isFirstLeftPinnedColumn = isPinned === "left" && column.getIsFirstColumn("left");
|
1013
1013
|
const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
|
1014
1014
|
const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
|
1015
1015
|
const isLastRightPinnedColumn = isPinned === "right" && column.getIsLastColumn("right");
|
1016
1016
|
return {
|
1017
|
-
left: isPinned === "left" ? `${column.getStart("left") + (!isFirstLeftPinnedColumn ?
|
1018
|
-
right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ?
|
1017
|
+
left: isPinned === "left" ? `${column.getStart("left") + (!isFirstLeftPinnedColumn ? paddingRowX : 0)}px` : void 0,
|
1018
|
+
right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ? paddingRowX : 0)}px` : void 0,
|
1019
1019
|
position: isPinned ? "sticky" : "relative",
|
1020
1020
|
zIndex: isPinned ? 1 : 0,
|
1021
1021
|
...isFirstLeftPinnedColumn ? {
|
1022
|
-
pl:
|
1023
|
-
} : {
|
1022
|
+
pl: `${paddingRowX + 8}px`
|
1023
|
+
} : {},
|
1024
1024
|
...isLastRightPinnedColumn ? {
|
1025
|
-
pr:
|
1026
|
-
} : {
|
1025
|
+
pr: `${paddingRowX + 8}px`
|
1026
|
+
} : {},
|
1027
1027
|
...isLastLeftPinnedColumn ? {
|
1028
1028
|
py: "16px",
|
1029
1029
|
pr: "8px",
|
@@ -1180,7 +1180,7 @@ var useDataTable = ({
|
|
1180
1180
|
};
|
1181
1181
|
};
|
1182
1182
|
var DataTable = React5.forwardRef((props, ref) => {
|
1183
|
-
var _a, _b, _c, _d, _e
|
1183
|
+
var _a, _b, _c, _d, _e;
|
1184
1184
|
const {
|
1185
1185
|
isLoading,
|
1186
1186
|
styles,
|
@@ -1192,7 +1192,8 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1192
1192
|
highlightedRow,
|
1193
1193
|
withSelectedRow,
|
1194
1194
|
highlightRowColor,
|
1195
|
-
cellLineClamp = 2
|
1195
|
+
cellLineClamp = 2,
|
1196
|
+
paddingRowX = 8
|
1196
1197
|
} = props;
|
1197
1198
|
const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
|
1198
1199
|
const { table, action, toggleAllRowsSelected, generateColumn } = useDataTable(props);
|
@@ -1239,18 +1240,28 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1239
1240
|
};
|
1240
1241
|
}, []);
|
1241
1242
|
const hasScroll = ((_a = refTable == null ? void 0 : refTable.current) == null ? void 0 : _a.offsetWidth) && ((_b = refTable == null ? void 0 : refTable.current) == null ? void 0 : _b.scrollWidth) && ((_c = refTable == null ? void 0 : refTable.current) == null ? void 0 : _c.offsetWidth) < ((_d = refTable == null ? void 0 : refTable.current) == null ? void 0 : _d.scrollWidth);
|
1243
|
+
const getTableHeaderSize = (header, index, totalColumn) => {
|
1244
|
+
if (header.column.getIsFirstColumn("left") || header.column.getIsLastColumn("right")) {
|
1245
|
+
return { width: `${header.getSize() + paddingRowX}px` };
|
1246
|
+
}
|
1247
|
+
if (index === 0) {
|
1248
|
+
return { width: `${header.getSize() + paddingRowX}px`, paddingLeft: `${8 + paddingRowX}` };
|
1249
|
+
}
|
1250
|
+
if (index === totalColumn - 1) {
|
1251
|
+
return { width: `${header.getSize() + paddingRowX}px`, paddingRight: `${8 + paddingRowX}` };
|
1252
|
+
}
|
1253
|
+
return { width: `${header.getSize()}px` };
|
1254
|
+
};
|
1242
1255
|
return /* @__PURE__ */ jsx24(
|
1243
1256
|
Box11,
|
1244
1257
|
{
|
1245
1258
|
overflowX: "auto",
|
1246
1259
|
overflowY: "hidden",
|
1247
1260
|
position: "relative",
|
1248
|
-
pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 : 2,
|
1249
|
-
pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 2,
|
1250
1261
|
maxW: "100%",
|
1251
1262
|
w: "full",
|
1252
1263
|
ref: refTable,
|
1253
|
-
...((
|
1264
|
+
...((_e = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _e.length) && hasScroll ? { "data-pin-right": true } : {},
|
1254
1265
|
...container,
|
1255
1266
|
children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
|
1256
1267
|
/* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
|
@@ -1288,8 +1299,10 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1288
1299
|
Th,
|
1289
1300
|
{
|
1290
1301
|
colSpan: header.colSpan,
|
1291
|
-
|
1292
|
-
|
1302
|
+
_first: { paddingLeft: `${paddingRowX + 8}px` },
|
1303
|
+
_last: { paddingRight: `${paddingRowX + 8}px` },
|
1304
|
+
sx: getCommonPinningStyles(header.column, paddingRowX),
|
1305
|
+
...getTableHeaderSize(header, index, headerGroup.headers.length),
|
1293
1306
|
...styles == null ? void 0 : styles.tableColumnHeader,
|
1294
1307
|
children: /* @__PURE__ */ jsxs8(
|
1295
1308
|
Flex2,
|
@@ -1325,7 +1338,7 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1325
1338
|
}) }, headerGroup.id))
|
1326
1339
|
}
|
1327
1340
|
),
|
1328
|
-
/* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
|
1341
|
+
/* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row, index) => {
|
1329
1342
|
const isDisabledRow = disabledRow && disabledRow(row.original);
|
1330
1343
|
const isHighlightedRow = highlightedRow && highlightedRow(row.original);
|
1331
1344
|
return /* @__PURE__ */ jsx24(
|
@@ -1374,8 +1387,10 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1374
1387
|
{
|
1375
1388
|
"data-test-id": `CT_Component_TableCell_${cell.id}`,
|
1376
1389
|
fontSize: "text.sm",
|
1390
|
+
_first: { paddingLeft: `${paddingRowX + 8}px` },
|
1391
|
+
_last: { paddingRight: `${paddingRowX + 8}px` },
|
1377
1392
|
sx: {
|
1378
|
-
...getCommonPinningStyles(cell.column)
|
1393
|
+
...getCommonPinningStyles(cell.column, paddingRowX)
|
1379
1394
|
},
|
1380
1395
|
...styles == null ? void 0 : styles.tableCell,
|
1381
1396
|
children: /* @__PURE__ */ jsx24(
|
@@ -1387,14 +1402,22 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1387
1402
|
align: "center",
|
1388
1403
|
"data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
|
1389
1404
|
opacity: isDisabled ? 0.5 : 1,
|
1390
|
-
...cellLineClamp > 0 ? {
|
1391
|
-
noOfLines: cellLineClamp,
|
1392
|
-
sx: {
|
1393
|
-
display: "-webkit-inline-box"
|
1394
|
-
}
|
1395
|
-
} : {},
|
1396
1405
|
sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
|
1397
|
-
children:
|
1406
|
+
children: /* @__PURE__ */ jsx24(
|
1407
|
+
Box11,
|
1408
|
+
{
|
1409
|
+
onMouseUp: (e) => {
|
1410
|
+
e.stopPropagation();
|
1411
|
+
},
|
1412
|
+
...cellLineClamp > 0 ? {
|
1413
|
+
noOfLines: cellLineClamp,
|
1414
|
+
sx: {
|
1415
|
+
display: "-webkit-inline-box"
|
1416
|
+
}
|
1417
|
+
} : {},
|
1418
|
+
children: flexRender(cell.column.columnDef.cell, cell.getContext())
|
1419
|
+
}
|
1420
|
+
)
|
1398
1421
|
}
|
1399
1422
|
)
|
1400
1423
|
},
|