@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.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 ? 8 : 0)}px` : void 0,
1018
- right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ? 8 : 0)}px` : void 0,
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: "16px"
1023
- } : { pl: "8px" },
1022
+ pl: `${paddingRowX + 8}px`
1023
+ } : {},
1024
1024
  ...isLastRightPinnedColumn ? {
1025
- pr: "16px"
1026
- } : { pr: "8px" },
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, _f, _g;
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
- ...((_g = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _g.length) && hasScroll ? { "data-pin-right": true } : {},
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
- sx: getCommonPinningStyles(header.column),
1292
- width: header.column.getIsFirstColumn("left") || header.column.getIsLastColumn("right") ? `${header.getSize() + 8}px` : `${header.getSize()}px`,
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: flexRender(cell.column.columnDef.cell, cell.getContext())
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
  },