@ctlyst.id/internal-ui 5.6.2 → 5.6.4

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 = [],
@@ -1320,24 +1324,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__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
-        /* @__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(
+        /* @__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, { ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
           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__ */ 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, { children: [...Array(5)].map((num) => /* @__PURE__ */ jsx24(Tr, { mx: "2", 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: [...Array(generateColumn().length)].map((i) => /* @__PURE__ */ jsx24(
           Td,
           {
-            width: 210,
+            width: "100%",
             _first: { paddingLeft: `${paddingRowX + 8}px` },
             _last: { paddingRight: `${paddingRowX + 8}px` },
+            ...styles == null ? void 0 : styles.tableCell,
             children: /* @__PURE__ */ jsx24(Skeleton2, { startColor: "neutral.100", endColor: "neutral.200", h: "20px", w: "70%" }, i)
           },
           i
@@ -1395,7 +1400,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(
@@ -7309,8 +7314,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)"
   },