@ctlyst.id/internal-ui 5.6.3 → 5.6.5

package/dist/index.mjs

@@ -965,7 +965,7 @@ var counter_default = Counter;
 
 // src/components/data-table/components/data-table.tsx
 import { ChevronDownIcon, ChevronUpIcon, UpDownIcon } from "@chakra-ui/icons";
-import { Box as Box11, Flex as Flex2, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
+import { Box as Box11, Flex as Flex2, keyframes, Skeleton as Skeleton2, Table, Tbody, Td, Th, Thead, Tr, useColorModeValue } from "@chakra-ui/react";
 import { css } from "@emotion/react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import * as React5 from "react";
@@ -1109,6 +1109,10 @@ var getCommonPinningStyles = (column, paddingRowX) => {
     } : {}
   };
 };
+var fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
 var useDataTable = ({
   columns,
   dataSource = [],
@@ -1326,22 +1330,24 @@ var DataTable = React5.forwardRef((props, ref) => {
             colSpan: header.colSpan,
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
+            sx: getCommonPinningStyles(header.column, paddingRowX),
             ...styles == null ? void 0 : styles.tableColumnHeader,
             ...getTableHeaderSize(header, index, headerGroup.headers.length),
             children: /* @__PURE__ */ jsx24(Flex2, { "data-test-id": "CT_component_data-table_loader", align: "center", gap: 2, children: flexRender(header.column.columnDef.header, header.getContext()) })
           },
           header.id
         )) }, headerGroup.id)) }),
-        /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx24(
           Td,
           {
             width: "100%",
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
+            sx: getCommonPinningStyles(column, paddingRowX),
             ...styles == null ? void 0 : styles.tableCell,
-            children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i)
+            children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" })
           },
-          i
+          column.id
         )) }, num)) })
       ] }) : /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, children: [
         /* @__PURE__ */ jsx24(
@@ -1396,7 +1402,7 @@ var DataTable = React5.forwardRef((props, ref) => {
             }) }, headerGroup.id))
           }
         ),
-        /* @__PURE__ */ jsx24(Tbody, { ...styles == null ? void 0 : styles.tableBody, children: table.getRowModel().rows.map((row, index) => {
+        /* @__PURE__ */ jsx24(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__ */ jsx24(
@@ -7310,8 +7316,8 @@ var input_default = Input4;
 
 // src/config/theme/components/loader.ts
 import { defineStyleConfig as defineStyleConfig4 } from "@chakra-ui/styled-system";
-import { keyframes } from "@emotion/react";
-var rotate = keyframes({
+import { keyframes as keyframes2 } from "@emotion/react";
+var rotate = keyframes2({
   "0%": {
     transform: "rotate(0deg)"
   },