@ctlyst.id/internal-ui 5.0.4 → 5.2.0

package/dist/index.d.mts

@@ -248,7 +248,7 @@ interface DataTableProps<T> {
     withSelectedRow?: boolean | undefined;
     selectedRow?: RowSelectionState;
     onRowSelectionChange?: OnChangeFn<RowSelectionState>;
-    onSelectedRow?: (data: T[]) => void;
+    onSelectedRow?: (data: T[], action: string) => void;
     onSort?: (data: SortingState) => void;
     manualSorting?: boolean;
     sortingState?: SortingState;
@@ -260,11 +260,14 @@ interface DataTableProps<T> {
     disabledRow?: (row: T) => boolean;
     highlightedRow?: (row: T) => boolean;
     highlightRowColor?: BackgroundProps['bg'];
+    /** paddingRowX in px */
+    paddingRowX?: number;
 }
 declare const isCellDisabled: (row: DisabledRowData, cellId: string) => boolean;
 type DataTableRefs<T> = Pick<RowSelectionInstance<T>, 'toggleAllRowsSelected'>;
 declare const useDataTable: <T>({ columns, dataSource, withSelectedRow, onSelectedRow, onSort, sortDescFirst, sortingState, manualSorting, selectedRow, disabledRow, onRowSelectionChange, columnPinning, }: DataTableProps<T>) => {
     table: _tanstack_react_table.Table<T>;
+    action: React$1.MutableRefObject<string>;
     toggleAllRowsSelected: (value?: boolean | undefined) => void;
     generateColumn: () => ColumnDef<T>[];
 };

package/dist/index.d.ts

@@ -248,7 +248,7 @@ interface DataTableProps<T> {
     withSelectedRow?: boolean | undefined;
     selectedRow?: RowSelectionState;
     onRowSelectionChange?: OnChangeFn<RowSelectionState>;
-    onSelectedRow?: (data: T[]) => void;
+    onSelectedRow?: (data: T[], action: string) => void;
     onSort?: (data: SortingState) => void;
     manualSorting?: boolean;
     sortingState?: SortingState;
@@ -260,11 +260,14 @@ interface DataTableProps<T> {
     disabledRow?: (row: T) => boolean;
     highlightedRow?: (row: T) => boolean;
     highlightRowColor?: BackgroundProps['bg'];
+    /** paddingRowX in px */
+    paddingRowX?: number;
 }
 declare const isCellDisabled: (row: DisabledRowData, cellId: string) => boolean;
 type DataTableRefs<T> = Pick<RowSelectionInstance<T>, 'toggleAllRowsSelected'>;
 declare const useDataTable: <T>({ columns, dataSource, withSelectedRow, onSelectedRow, onSort, sortDescFirst, sortingState, manualSorting, selectedRow, disabledRow, onRowSelectionChange, columnPinning, }: DataTableProps<T>) => {
     table: _tanstack_react_table.Table<T>;
+    action: React$1.MutableRefObject<string>;
     toggleAllRowsSelected: (value?: boolean | undefined) => void;
     generateColumn: () => ColumnDef<T>[];
 };

package/dist/index.js

@@ -1355,23 +1355,23 @@ var isCellDisabled = (row, cellId) => {
   }
   return false;
 };
-var getCommonPinningStyles = (column) => {
+var getCommonPinningStyles = (column, paddingRowX) => {
   const isPinned = column.getIsPinned();
   const isFirstLeftPinnedColumn = isPinned === "left" && column.getIsFirstColumn("left");
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   const isLastRightPinnedColumn = isPinned === "right" && column.getIsLastColumn("right");
   return {
-    left: isPinned === "left" ? `${column.getStart("left") + (!isFirstLeftPinnedColumn ? 8 : 0)}px` : void 0,
-    right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ? 8 : 0)}px` : void 0,
+    left: isPinned === "left" ? `${column.getStart("left") + (!isFirstLeftPinnedColumn ? paddingRowX : 0)}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right") + (!isLastRightPinnedColumn ? paddingRowX : 0)}px` : void 0,
     position: isPinned ? "sticky" : "relative",
     zIndex: isPinned ? 1 : 0,
     ...isFirstLeftPinnedColumn ? {
-      pl: "16px"
-    } : { pl: "8px" },
+      pl: `${paddingRowX + 8}px`
+    } : {},
     ...isLastRightPinnedColumn ? {
-      pr: "16px"
-    } : { pr: "8px" },
+      pr: `${paddingRowX + 8}px`
+    } : {},
     ...isLastLeftPinnedColumn ? {
       py: "16px",
       pr: "8px",
@@ -1427,6 +1427,7 @@ var useDataTable = ({
   const [isFirstLoad, setIsFirstLoad] = React5.useState(true);
   const [sorting, setSorting] = React5.useState(sortingState != null ? sortingState : []);
   const dataColumns = React5.useMemo(() => columns, [columns]);
+  const action = React5.useRef("");
   const checkboxColumn = React5.useMemo(
     () => [
       {
@@ -1438,9 +1439,10 @@ var useDataTable = ({
             "data-test-id": "select-header-data-table",
             ...{
               isDisabled: table2.getPaginationRowModel().rows.filter((row) => !(disabledRow == null ? void 0 : disabledRow(row.original))).length === 0,
-              isChecked: table2.getIsAllRowsSelected(),
-              isIndeterminate: table2.getIsSomeRowsSelected(),
+              isChecked: table2.getIsAllPageRowsSelected(),
+              isIndeterminate: table2.getIsSomePageRowsSelected(),
               onChange: () => {
+                action.current = "selectAll";
                 if (table2.getIsAllRowsSelected()) {
                   table2.toggleAllRowsSelected();
                 } else if (disabledRow) {
@@ -1470,7 +1472,7 @@ var useDataTable = ({
         ) })
       }
     ],
-    [disabledRow]
+    [dataSource]
   );
   const generateColumn = () => {
     if (withSelectedRow) {
@@ -1500,15 +1502,16 @@ var useDataTable = ({
   });
   const { getSelectedRowModel, toggleAllRowsSelected } = table;
   const { flatRows } = getSelectedRowModel();
-  React5.useEffect(() => {
-    table.setRowSelection(selectedRow != null ? selectedRow : {});
-  }, [selectedRow]);
   React5.useEffect(() => {
     const rowData = flatRows.map((row) => row.original);
     if (onSelectedRow) {
-      onSelectedRow(rowData);
+      onSelectedRow(rowData, action.current);
     }
   }, [flatRows]);
+  React5.useEffect(() => {
+    action.current = "newData";
+    table.setRowSelection(selectedRow != null ? selectedRow : {});
+  }, [selectedRow]);
   React5.useEffect(() => {
     if (onSort && !isFirstLoad) {
       onSort(sorting);
@@ -1519,12 +1522,13 @@ var useDataTable = ({
   }, []);
   return {
     table,
+    action,
     toggleAllRowsSelected,
     generateColumn
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e;
   const {
     isLoading,
     styles,
@@ -1536,10 +1540,11 @@ var DataTable = React5.forwardRef((props, ref) => {
     highlightedRow,
     withSelectedRow,
     highlightRowColor,
-    cellLineClamp = 2
+    cellLineClamp = 2,
+    paddingRowX = 8
   } = props;
   const { clickOrDragged, getDragOrClickProps } = useDragOrClick();
-  const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
+  const { table, action, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   const refTable = React5.useRef(null);
   React5.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
@@ -1583,18 +1588,28 @@ var DataTable = React5.forwardRef((props, ref) => {
     };
   }, []);
   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);
+  const getTableHeaderSize = (header, index, totalColumn) => {
+    if (header.column.getIsFirstColumn("left") || header.column.getIsLastColumn("right")) {
+      return { width: `${header.getSize() + paddingRowX}px` };
+    }
+    if (index === 0) {
+      return { width: `${header.getSize() + paddingRowX}px`, paddingLeft: `${8 + paddingRowX}` };
+    }
+    if (index === totalColumn - 1) {
+      return { width: `${header.getSize() + paddingRowX}px`, paddingRight: `${8 + paddingRowX}` };
+    }
+    return { width: `${header.getSize()}px` };
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_react29.Box,
     {
       overflowX: "auto",
       overflowY: "hidden",
       position: "relative",
-      pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 : 2,
-      pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 2,
       maxW: "100%",
       w: "full",
       ref: refTable,
-      ...((_g = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _g.length) && hasScroll ? { "data-pin-right": true } : {},
+      ...((_e = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _e.length) && hasScroll ? { "data-pin-right": true } : {},
       ...container,
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react29.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react29.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react29.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -1632,8 +1647,10 @@ var DataTable = React5.forwardRef((props, ref) => {
                 import_react29.Th,
                 {
                   colSpan: header.colSpan,
-                  sx: getCommonPinningStyles(header.column),
-                  width: header.column.getIsFirstColumn("left") || header.column.getIsLastColumn("right") ? `${header.getSize() + 8}px` : `${header.getSize()}px`,
+                  _first: { paddingLeft: `${paddingRowX + 8}px` },
+                  _last: { paddingRight: `${paddingRowX + 8}px` },
+                  sx: getCommonPinningStyles(header.column, paddingRowX),
+                  ...getTableHeaderSize(header, index, headerGroup.headers.length),
                   ...styles == null ? void 0 : styles.tableColumnHeader,
                   children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                     import_react29.Flex,
@@ -1669,7 +1686,7 @@ var DataTable = React5.forwardRef((props, ref) => {
             }) }, headerGroup.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react29.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row) => {
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react29.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row, index) => {
           const isDisabledRow = disabledRow && disabledRow(row.original);
           const isHighlightedRow = highlightedRow && highlightedRow(row.original);
           return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -1700,6 +1717,7 @@ var DataTable = React5.forwardRef((props, ref) => {
                   (_a2 = e.currentTarget) == null ? void 0 : _a2.removeAttribute("data-active");
                 },
                 onClick: () => {
+                  action.current = "selectRow";
                   if (withSelectedRow) row.toggleSelected();
                   if (onRowClick) {
                     if (isDisabledRow) return;
@@ -1717,8 +1735,10 @@ var DataTable = React5.forwardRef((props, ref) => {
                   {
                     "data-test-id": `CT_Component_TableCell_${cell.id}`,
                     fontSize: "text.sm",
+                    _first: { paddingLeft: `${paddingRowX + 8}px` },
+                    _last: { paddingRight: `${paddingRowX + 8}px` },
                     sx: {
-                      ...getCommonPinningStyles(cell.column)
+                      ...getCommonPinningStyles(cell.column, paddingRowX)
                     },
                     ...styles == null ? void 0 : styles.tableCell,
                     children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -1730,14 +1750,22 @@ var DataTable = React5.forwardRef((props, ref) => {
                         align: "center",
                         "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
                         opacity: isDisabled ? 0.5 : 1,
-                        ...cellLineClamp > 0 ? {
-                          noOfLines: cellLineClamp,
-                          sx: {
-                            display: "-webkit-inline-box"
-                          }
-                        } : {},
                         sx: { ...meta && meta.columnStyles ? meta.columnStyles : {} },
-                        children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          import_react29.Box,
+                          {
+                            onMouseUp: (e) => {
+                              e.stopPropagation();
+                            },
+                            ...cellLineClamp > 0 ? {
+                              noOfLines: cellLineClamp,
+                              sx: {
+                                display: "-webkit-inline-box"
+                              }
+                            } : {},
+                            children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                          }
+                        )
                       }
                     )
                   },