@ctlyst.id/internal-ui 5.6.2 → 5.6.4

package/dist/index.js

@@ -1466,6 +1466,10 @@ var getCommonPinningStyles = (column, paddingRowX) => {
     } : {}
   };
 };
+var fadeIn = import_react30.keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
 var useDataTable = ({
   columns,
   dataSource = [],
@@ -1677,24 +1681,25 @@ var DataTable = React5.forwardRef((props, ref) => {
       ...((_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_react30.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.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_react30.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.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_react30.Tr, { ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react30.Th,
           {
             colSpan: header.colSpan,
-            width: `${header.getSize()}px`,
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
             ...styles == null ? void 0 : styles.tableColumnHeader,
+            ...getTableHeaderSize(header, index, headerGroup.headers.length),
             children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Flex, { "data-test-id": "CT_component_data-table_loader", align: "center", gap: 2, children: (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()) })
           },
           header.id
         )) }, headerGroup.id)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tr, { mx: "2", children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: [...Array(5)].map((num) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           import_react30.Td,
           {
-            width: 210,
+            width: "100%",
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
+            ...styles == null ? void 0 : styles.tableCell,
             children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Skeleton, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i)
           },
           i
@@ -1752,7 +1757,7 @@ var DataTable = React5.forwardRef((props, ref) => {
             }) }, headerGroup.id))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react30.Tbody, { ...styles == null ? void 0 : styles.tableBody, animation: `${fadeIn} 0.15s ease-out`, children: table.getRowModel().rows.map((row, index) => {
           const isDisabledRow = disabledRow && disabledRow(row.original);
           const isHighlightedRow = Object.keys(selectedRow != null ? selectedRow : {}).filter((key) => selectedRow == null ? void 0 : selectedRow[key]).includes(row.id) || highlightedRow && highlightedRow(row.original);
           return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(