@lotte-innovate/ui-component-test 0.0.130 → 0.0.132

package/dist/lib/components/Grid/NumberingPagination.mjs

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as n}from"react";import{IconButton as a}from"../IconButton/index.mjs";import{DoubleArrowLeftIcon as o,ChevronLeftIcon as i,ChevronRightIcon as r,DoubleArrowRightIcon as g}from"@radix-ui/react-icons";import c from"../Select/index.mjs";import{MAIN_COLOR as l}from"../../color/constants.mjs";import{Button as d}from"../Button/index.mjs";import s from"../TextField/index.mjs";import u from"../../Typography/Text/index.mjs";function p(p){var m,h=p.table,f=n("1"),P=f[0],x=f[1],C=null!==(m=h.options.color)&&void 0!==m?m:l;return e("div",{children:[e("div",{className:"flex items-center justify-center gap-2",children:[e(c.Root,{color:C,value:String(h.getState().pagination.pageSize),defaultValue:String(h.getState().pagination.pageSize),onValueChange:function(e){h.setPageSize(Number(e)),x("1"),h.setPageIndex(0)},children:[t(c.Trigger,{}),t(c.Content,{children:[10,20,30,50,100].map((function(e){return t(c.Item,{value:String(e),children:e},e)}))})]}),e("div",{className:"flex gap-2",children:[t(a,{className:"rounded border p-1",color:C,onClick:function(){h.firstPage(),x("1")},disabled:!h.getCanPreviousPage(),children:t(o,{})}),t(a,{className:"rounded border p-1",color:C,onClick:function(){h.previousPage(),x(String(h.getState().pagination.pageIndex))},disabled:!h.getCanPreviousPage(),children:t(i,{})})]}),t("div",{children:function(){for(var e=[],n=h.getState().pagination.pageIndex,a=function(n){e.push(t(d,{appearance:"ghost",onClick:function(){h.setPageIndex(n),x(String(n+1))},color:h.getState().pagination.pageIndex===n?C:"slate",children:n+1},n))},o=0;o<h.getPageCount();o++)a(o);return e.length>10&&(n-3>0&&n+3<h.getPageCount()?((e=e.slice(n-2,n+3)).unshift(t(d,{appearance:"ghost",onClick:function(){h.setPageIndex(0),x("1")},color:0===h.getState().pagination.pageIndex?C:"slate",children:1},0),t(d,{appearance:"ghost",disabled:!0,children:"..."})),e.push(t(d,{appearance:"ghost",disabled:!0,children:"..."}),t(d,{appearance:"ghost",onClick:function(){h.setPageIndex(h.getPageCount()-1),x(String(h.getPageCount()))},color:h.getState().pagination.pageIndex===h.getPageCount()-1?C:"slate",children:h.getPageCount()},h.getPageCount()-1))):n-3<=0?(e=e.slice(0,7)).push(t(d,{appearance:"ghost",disabled:!0,children:"..."}),t(d,{appearance:"ghost",onClick:function(){h.setPageIndex(h.getPageCount()-1),x(String(h.getPageCount()))},color:h.getState().pagination.pageIndex===h.getPageCount()-1?C:"slate",children:h.getPageCount()},h.getPageCount()-1)):(e=e.slice(h.getPageCount()-7,h.getPageCount())).unshift(t(d,{appearance:"ghost",onClick:function(){h.setPageIndex(0),x("1")},color:0===h.getState().pagination.pageIndex?C:"slate",children:1},0),t(d,{appearance:"ghost",disabled:!0,children:"..."}))),e}()}),e("div",{className:"flex gap-2",children:[t(a,{className:"rounded border p-1",color:C,onClick:function(){h.nextPage(),x(String(h.getState().pagination.pageIndex+2))},disabled:!h.getCanNextPage(),children:t(r,{})}),t(a,{className:"rounded border p-1",color:C,onClick:function(){h.lastPage(),x(String(h.getPageCount()))},disabled:!h.getCanNextPage(),children:t(g,{})})]})]}),e("div",{className:"mt-4 flex items-center justify-center gap-2",children:[t(s.Root,{type:"number",color:C,min:"1",max:h.getPageCount(),value:P,onChange:function(e){x(e.target.value)},className:"w-[50px] rounded border"}),e(u,{children:["/ ",h.getPageCount()]}),t(d,{onClick:function(){return h.setPageIndex(P?Number(P)-1:0)},children:"이동"})]})]})}export{p as default};
+//# sourceMappingURL=NumberingPagination.mjs.map

package/dist/lib/components/Grid/NumberingPagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberingPagination.mjs","sources":["../../../lib/components/Grid/NumberingPagination.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useState } from 'react';\nimport IconButton from '../IconButton';\nimport { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from '@radix-ui/react-icons';\nimport Select from '../Select';\nimport { MAIN_COLOR } from '../../../lib/color/constants';\nimport Button from '../Button';\nimport TextField from '../TextField';\nimport Text from '../../Typography/Text';\nfunction NumberingPagination(_a) {\n    var _b;\n    var table = _a.table;\n    var _c = useState('1'), nowPage = _c[0], setNowPage = _c[1];\n    var color = (_b = table.options.color) !== null && _b !== void 0 ? _b : MAIN_COLOR;\n    var renderPageNumbers = function () {\n        var pageNumbers = [];\n        var currentInx = table.getState().pagination.pageIndex;\n        var _loop_1 = function (i) {\n            pageNumbers.push(_jsx(Button, { appearance: \"ghost\", onClick: function () {\n                    table.setPageIndex(i);\n                    setNowPage(String(i + 1));\n                }, color: table.getState().pagination.pageIndex === i ? color : 'slate', children: i + 1 }, i));\n        };\n        for (var i = 0; i < table.getPageCount(); i++) {\n            _loop_1(i);\n        }\n        if (pageNumbers.length > 10) {\n            if (currentInx - 3 > 0 && currentInx + 3 < table.getPageCount()) {\n                pageNumbers = pageNumbers.slice(currentInx - 2, currentInx + 3);\n                pageNumbers.unshift(_jsx(Button, { appearance: \"ghost\", onClick: function () {\n                        table.setPageIndex(0);\n                        setNowPage('1');\n                    }, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }));\n                pageNumbers.push(_jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }), _jsx(Button, { appearance: \"ghost\", onClick: function () {\n                        table.setPageIndex(table.getPageCount() - 1);\n                        setNowPage(String(table.getPageCount()));\n                    }, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));\n            }\n            else if (currentInx - 3 <= 0) {\n                pageNumbers = pageNumbers.slice(0, 7);\n                pageNumbers.push(_jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }), _jsx(Button, { appearance: \"ghost\", onClick: function () {\n                        table.setPageIndex(table.getPageCount() - 1);\n                        setNowPage(String(table.getPageCount()));\n                    }, color: table.getState().pagination.pageIndex === table.getPageCount() - 1 ? color : 'slate', children: table.getPageCount() }, table.getPageCount() - 1));\n            }\n            else {\n                pageNumbers = pageNumbers.slice(table.getPageCount() - 7, table.getPageCount());\n                pageNumbers.unshift(_jsx(Button, { appearance: \"ghost\", onClick: function () {\n                        table.setPageIndex(0);\n                        setNowPage('1');\n                    }, color: table.getState().pagination.pageIndex === 0 ? color : 'slate', children: 1 }, 0), _jsx(Button, { appearance: \"ghost\", disabled: true, children: \"...\" }));\n            }\n        }\n        return pageNumbers;\n    };\n    return (_jsxs(\"div\", { children: [_jsxs(\"div\", { className: \"flex items-center justify-center gap-2\", children: [_jsxs(Select.Root, { color: color, value: String(table.getState().pagination.pageSize), defaultValue: String(table.getState().pagination.pageSize), onValueChange: function (e) {\n                            table.setPageSize(Number(e));\n                            setNowPage('1');\n                            table.setPageIndex(0);\n                        }, children: [_jsx(Select.Trigger, {}), _jsx(Select.Content, { children: [10, 20, 30, 50, 100].map(function (pageSize) { return (_jsx(Select.Item, { value: String(pageSize), children: pageSize }, pageSize)); }) })] }), _jsxs(\"div\", { className: \"flex gap-2\", children: [_jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n                                    table.firstPage();\n                                    setNowPage('1');\n                                }, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, {}) }), _jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n                                    table.previousPage();\n                                    setNowPage(String(table.getState().pagination.pageIndex));\n                                }, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, {}) })] }), _jsx(\"div\", { children: renderPageNumbers() }), _jsxs(\"div\", { className: \"flex gap-2\", children: [_jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n                                    table.nextPage();\n                                    setNowPage(String(table.getState().pagination.pageIndex + 2));\n                                }, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, {}) }), _jsx(IconButton, { className: \"rounded border p-1\", color: color, onClick: function () {\n                                    table.lastPage();\n                                    setNowPage(String(table.getPageCount()));\n                                }, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, {}) })] })] }), _jsxs(\"div\", { className: \"mt-4 flex items-center justify-center gap-2\", children: [_jsx(TextField.Root, { type: \"number\", color: color, min: \"1\", max: table.getPageCount(), value: nowPage, onChange: function (e) {\n                            setNowPage(e.target.value);\n                        }, className: \"w-[50px] rounded border\" }), _jsxs(Text, { children: [\"/ \", table.getPageCount()] }), _jsx(Button, { onClick: function () { return table.setPageIndex(nowPage ? Number(nowPage) - 1 : 0); }, children: \"\\uC774\\uB3D9\" })] })] }));\n}\nexport default NumberingPagination;\n"],"names":["NumberingPagination","_a","_b","table","_c","useState","nowPage","setNowPage","color","options","MAIN_COLOR","_jsxs","children","className","Select","Root","value","String","getState","pagination","pageSize","defaultValue","onValueChange","e","setPageSize","Number","setPageIndex","_jsx","Trigger","Content","map","Item","IconButton","onClick","firstPage","disabled","getCanPreviousPage","DoubleArrowLeftIcon","previousPage","pageIndex","ChevronLeftIcon","pageNumbers","currentInx","_loop_1","i","push","Button","appearance","getPageCount","length","slice","unshift","renderPageNumbers","nextPage","getCanNextPage","ChevronRightIcon","lastPage","DoubleArrowRightIcon","TextField","type","min","max","onChange","target","Text"],"mappings":"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"}

package/dist/lib/components/Grid/index.js

@@ -7,7 +7,7 @@ import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import { cn } from '../../../lib/utils/utils';
 import { bgColorStyle } from '../../../lib/constants';
 import { cva } from 'class-variance-authority';
-import Pagination from './Pagination';
+import NumberingPagination from './NumberingPagination';
 export var GridVariants = cva("", {
     variants: {
         color: bgColorStyle(),
@@ -19,6 +19,7 @@ export var GridVariants = cva("", {
 function Grid(_a) {
     var _b, _c, _d;
     var table = _a.table;
+    console.log('table');
     return (_jsx("div", { style: { direction: table.options.columnResizeDirection }, children: _jsxs("div", { className: "overflow-x-auto", children: [_jsxs(Table.Root, { style: {
                     // width: table.getCenterTotalSize(),
                     }, appearance: (_b = table.options) === null || _b === void 0 ? void 0 : _b.appearance, radius: (_c = table.options) === null || _c === void 0 ? void 0 : _c.radius, children: [_jsx(Table.Header, { children: table
@@ -52,8 +53,8 @@ function Grid(_a) {
                                     }) }, headerGroup.id));
                             }) }), _jsx(Table.Body, { children: table
                                 .getRowModel()
-                                .rows.map(function (row) { return (_jsx(Table.Row, { children: row.getVisibleCells().map(function (cell) { return (_jsx(Table.Cell, { style: {
+                                .rows.map(function (row) { return (_jsx(Table.Row, { onClick: function () { return table.options.onRowClick && table.options.onRowClick(row); }, children: row.getVisibleCells().map(function (cell) { return (_jsx(Table.Cell, { style: {
                                         width: cell.column.getSize(),
-                                    }, className: "h-[30px]", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); }) })] }), _jsx("div", { className: "h-2" }), ((_d = table.options) === null || _d === void 0 ? void 0 : _d.enableRowPagination) && _jsx(Pagination, { table: table })] }) }));
+                                    }, className: "h-[30px]", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); }) })] }), _jsx("div", { className: "h-2" }), ((_d = table.options) === null || _d === void 0 ? void 0 : _d.enableRowPagination) && _jsx(NumberingPagination, { table: table })] }) }));
 }
 export default Grid;

package/dist/lib/components/Grid/index.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import{flexRender as t}from"@tanstack/react-table";import n from"../Table/index.mjs";import{ChevronUpIcon as i,ChevronDownIcon as r}from"@radix-ui/react-icons";import{cn as l}from"../../utils/utils.mjs";import{bgColorStyle as a}from"../../constants.mjs";import{cva as c}from"class-variance-authority";import s from"./Pagination.mjs";var d=c("",{variants:{color:a()},defaultVariants:{color:"red"}});function u(a){var c,u,m,p=a.table;return e("div",{style:{direction:p.options.columnResizeDirection},children:o("div",{className:"overflow-x-auto",children:[o(n.Root,{style:{},appearance:null===(c=p.options)||void 0===c?void 0:c.appearance,radius:null===(u=p.options)||void 0===u?void 0:u.radius,children:[e(n.Header,{children:p.getHeaderGroups().map((function(a){return e(n.Row,{children:a.headers.map((function(a){var c;return o(n.ColumnHeaderCell,{colSpan:a.colSpan,style:{width:a.getSize()},children:[a.isPlaceholder?null:o("div",{className:a.column.getCanSort()?"flex cursor-pointer select-none":"",onClick:a.column.getToggleSortingHandler(),title:a.column.getCanSort()?"asc"===a.column.getNextSortingOrder()?"Sort ascending":"desc"===a.column.getNextSortingOrder()?"Sort descending":"Clear sort":void 0,children:[t(a.column.columnDef.header,a.getContext()),"asc"==a.column.getIsSorted()?e(i,{}):"desc"==a.column.getIsSorted()?e(r,{}):null]}),e("div",{onDoubleClick:function(){return a.column.resetSize()},onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler(),className:l("absolute top-0 h-full w-[3px] bg-slateA-3 cursor-col-resize select-none touch-none right-0 opacity-0 hover:opacity-100",p.options.columnResizeDirection,a.column.getIsResizing()?d({color:p.options.color}):""),style:{transform:a.column.getIsResizing()?"translateX(".concat(("rtl"===p.options.columnResizeDirection?-1:1)*(null!==(c=p.getState().columnSizingInfo.deltaOffset)&&void 0!==c?c:0),"px)"):""}})]},a.id)}))},a.id)}))}),e(n.Body,{children:p.getRowModel().rows.map((function(o){return e(n.Row,{children:o.getVisibleCells().map((function(o){return e(n.Cell,{style:{width:o.column.getSize()},className:"h-[30px]",children:t(o.column.columnDef.cell,o.getContext())},o.id)}))},o.id)}))})]}),e("div",{className:"h-2"}),(null===(m=p.options)||void 0===m?void 0:m.enableRowPagination)&&e(s,{table:p})]})})}export{d as GridVariants,u as default};
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{flexRender as n}from"@tanstack/react-table";import t from"../Table/index.mjs";import{ChevronUpIcon as i,ChevronDownIcon as r}from"@radix-ui/react-icons";import{cn as l}from"../../utils/utils.mjs";import{bgColorStyle as c}from"../../constants.mjs";import{cva as a}from"class-variance-authority";import s from"./NumberingPagination.mjs";var u=a("",{variants:{color:c()},defaultVariants:{color:"red"}});function d(c){var a,d,m,p=c.table;return console.log("table"),e("div",{style:{direction:p.options.columnResizeDirection},children:o("div",{className:"overflow-x-auto",children:[o(t.Root,{style:{},appearance:null===(a=p.options)||void 0===a?void 0:a.appearance,radius:null===(d=p.options)||void 0===d?void 0:d.radius,children:[e(t.Header,{children:p.getHeaderGroups().map((function(c){return e(t.Row,{children:c.headers.map((function(c){var a;return o(t.ColumnHeaderCell,{colSpan:c.colSpan,style:{width:c.getSize()},children:[c.isPlaceholder?null:o("div",{className:c.column.getCanSort()?"flex cursor-pointer select-none":"",onClick:c.column.getToggleSortingHandler(),title:c.column.getCanSort()?"asc"===c.column.getNextSortingOrder()?"Sort ascending":"desc"===c.column.getNextSortingOrder()?"Sort descending":"Clear sort":void 0,children:[n(c.column.columnDef.header,c.getContext()),"asc"==c.column.getIsSorted()?e(i,{}):"desc"==c.column.getIsSorted()?e(r,{}):null]}),e("div",{onDoubleClick:function(){return c.column.resetSize()},onMouseDown:c.getResizeHandler(),onTouchStart:c.getResizeHandler(),className:l("absolute top-0 h-full w-[3px] bg-slateA-3 cursor-col-resize select-none touch-none right-0 opacity-0 hover:opacity-100",p.options.columnResizeDirection,c.column.getIsResizing()?u({color:p.options.color}):""),style:{transform:c.column.getIsResizing()?"translateX(".concat(("rtl"===p.options.columnResizeDirection?-1:1)*(null!==(a=p.getState().columnSizingInfo.deltaOffset)&&void 0!==a?a:0),"px)"):""}})]},c.id)}))},c.id)}))}),e(t.Body,{children:p.getRowModel().rows.map((function(o){return e(t.Row,{onClick:function(){return p.options.onRowClick&&p.options.onRowClick(o)},children:o.getVisibleCells().map((function(o){return e(t.Cell,{style:{width:o.column.getSize()},className:"h-[30px]",children:n(o.column.columnDef.cell,o.getContext())},o.id)}))},o.id)}))})]}),e("div",{className:"h-2"}),(null===(m=p.options)||void 0===m?void 0:m.enableRowPagination)&&e(s,{table:p})]})})}export{u as GridVariants,d as default};
 //# sourceMappingURL=index.mjs.map

package/dist/lib/components/Grid/useGrid.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createColumnHelper, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import IconButton from '../IconButton';
 import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import Checkbox from '../Checkbox';
@@ -49,48 +49,31 @@ export var useGrid = function (_a) {
     var columnsData = (_b = props === null || props === void 0 ? void 0 : props.columns) === null || _b === void 0 ? void 0 : _b.map(function (el) {
         return columnHelper.accessor(el.id, __assign({}, el));
     });
-    useEffect(function () {
-        if (props.enableExpanding) {
-            var firstcell_1 = columnsData[0].cell;
-            columnsData[0] = __assign(__assign({}, columnsData[0]), { cell: function (props) {
-                    var _a;
-                    return (_jsxs("div", { className: "flex", style: { paddingLeft: "".concat(props.row.depth * 10, "px") }, children: [props.row.getCanExpand() ? (_jsx(IconButton, { onClick: props.row.getToggleExpandedHandler(), appearance: "ghost", className: "h-3 w-3", color: (_a = props.color) !== null && _a !== void 0 ? _a : theme.themeColor, children: props.row.getIsExpanded() ? _jsx(ChevronDownIcon, {}) : _jsx(ChevronRightIcon, {}) })) : (_jsx(_Fragment, {})), _jsx("div", { children: firstcell_1 ? firstcell_1(props) : props.getValue() })] }));
-                } });
-        }
-    }, [props.enableExpanding]);
-    // useEffect(() => {
-    //   if (props.enableRowSelection) {
-    //     columnsData?.unshift({
-    //       id: 'select',
-    //       header: ({ table }: any) => (
-    //         <div className="header-checkbox">
-    //           <IndeterminateCheckbox
-    //             {...{
-    //               checked: table.getIsAllRowsSelected() || table.getIsSomeRowsSelected(),
-    //               indeterminate: table.getIsSomeRowsSelected(),
-    //               onChange: table.getToggleAllRowsSelectedHandler(),
-    //             }}
-    //           />
-    //         </div>
-    //       ),
-    //       cell: ({ row }: any) => (
-    //         <div className="px-1" style={{ paddingLeft: `${row.depth * 10}px` }}>
-    //           <IndeterminateCheckbox
-    //             {...{
-    //               checked:
-    //                 row.getIsSelected() || row.getIsSomeSelected() || row.getIsAllSubRowsSelected(),
-    //               indeterminate: row.getIsSomeSelected() && !row.getIsAllSubRowsSelected(),
-    //               onChange: row.getToggleSelectedHandler(),
-    //             }}
-    //           />
-    //         </div>
-    //       ),
-    //     });
-    //   }
-    // }, [props.enableRowSelection]);
-    var reactTableProps = __assign(__assign({ state: { sorting: sorting, rowSelection: rowSelection, expanded: expanded } }, props), { data: props.data, columns: columnsData, color: (_c = props.color) !== null && _c !== void 0 ? _c : theme.themeColor, paginateExpandedRows: true, enableExpanding: !!props.enableExpanding, getSubRows: function (row) { return row.subRows; }, onExpandedChange: setExpanded, onSortingChange: setSorting, onRowSelectionChange: setRowSelection, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel() });
-    if (props.enableRowPagination) {
-        reactTableProps['getPaginationRowModel'] = getPaginationRowModel();
+    console.log('useGrid');
+    if (props.enableExpanding) {
+        var firstcell_1 = columnsData[0].cell;
+        columnsData[0] = __assign(__assign({}, columnsData[0]), { cell: function (props) {
+                var _a;
+                return (_jsxs("div", { className: "flex", style: { paddingLeft: "".concat(props.row.depth * 10, "px") }, children: [props.row.getCanExpand() ? (_jsx(IconButton, { onClick: props.row.getToggleExpandedHandler(), appearance: "ghost", className: "h-3 w-3", color: (_a = props.color) !== null && _a !== void 0 ? _a : theme.themeColor, children: props.row.getIsExpanded() ? _jsx(ChevronDownIcon, {}) : _jsx(ChevronRightIcon, {}) })) : (_jsx(_Fragment, {})), _jsx("div", { children: firstcell_1 ? firstcell_1(props) : props.getValue() })] }));
+            } });
+    }
+    if (props.enableRowSelection) {
+        columnsData === null || columnsData === void 0 ? void 0 : columnsData.unshift({
+            id: 'select',
+            header: function (_a) {
+                var table = _a.table;
+                return (_jsx("div", { className: "header-checkbox", children: _jsx(IndeterminateCheckbox, { checked: table.getIsAllRowsSelected() || table.getIsSomeRowsSelected(),
+                        indeterminate: table.getIsSomeRowsSelected(),
+                        onChange: table.getToggleAllRowsSelectedHandler() }) }));
+            },
+            cell: function (_a) {
+                var row = _a.row;
+                return (_jsx("div", { className: "px-1", style: { paddingLeft: "".concat(row.depth * 10, "px") }, children: _jsx(IndeterminateCheckbox, { checked: row.getIsSelected() || row.getIsSomeSelected() || row.getIsAllSubRowsSelected(),
+                        indeterminate: row.getIsSomeSelected() && !row.getIsAllSubRowsSelected(),
+                        onChange: row.getToggleSelectedHandler() }) }));
+            },
+        });
     }
+    var reactTableProps = __assign(__assign({ state: { sorting: sorting, rowSelection: rowSelection, expanded: expanded } }, props), { data: props.data, columns: columnsData, color: (_c = props.color) !== null && _c !== void 0 ? _c : theme.themeColor, paginateExpandedRows: true, enableExpanding: !!props.enableExpanding, getSubRows: function (row) { return row.subRows; }, onExpandedChange: setExpanded, onSortingChange: setSorting, onRowSelectionChange: setRowSelection, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getPaginationRowModel: getPaginationRowModel() });
     return useReactTable(reactTableProps);
 };

package/dist/lib/components/Grid/useGrid.mjs

@@ -1,3 +1,3 @@
 "use client";
-import{jsxs as e,jsx as o,Fragment as n}from"react/jsx-runtime";import{createColumnHelper as t,getSortedRowModel as r,getCoreRowModel as a,getExpandedRowModel as i,getPaginationRowModel as l,useReactTable as c}from"@tanstack/react-table";import d,{useEffect as p}from"react";import{IconButton as s}from"../IconButton/index.mjs";import{ChevronDownIcon as u,ChevronRightIcon as g}from"@radix-ui/react-icons";import"../Checkbox/index.mjs";import{useTheme as m}from"../../theme/ThemeProvider.mjs";var f=function(){return f=Object.assign||function(e){for(var o,n=1,t=arguments.length;n<t;n++)for(var r in o=arguments[n])Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r]);return e},f.apply(this,arguments)},x=function(e,o){var n={};for(var t in e)Object.prototype.hasOwnProperty.call(e,t)&&o.indexOf(t)<0&&(n[t]=e[t]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(t=Object.getOwnPropertySymbols(e);r<t.length;r++)o.indexOf(t[r])<0&&Object.prototype.propertyIsEnumerable.call(e,t[r])&&(n[t[r]]=e[t[r]])}return n},h=function(h){var w,b,v=x(h,[]),y=m().theme,O=d.useState([]),E=O[0],j=O[1],S=d.useState({}),C=S[0],R=S[1],P=d.useState({}),M=P[0],k=P[1],I=t(),N=null===(w=null==v?void 0:v.columns)||void 0===w?void 0:w.map((function(e){return I.accessor(e.id,f({},e))}));p((function(){if(v.enableExpanding){var t=N[0].cell;N[0]=f(f({},N[0]),{cell:function(r){var a;return e("div",{className:"flex",style:{paddingLeft:"".concat(10*r.row.depth,"px")},children:[r.row.getCanExpand()?o(s,{onClick:r.row.getToggleExpandedHandler(),appearance:"ghost",className:"h-3 w-3",color:null!==(a=r.color)&&void 0!==a?a:y.themeColor,children:r.row.getIsExpanded()?o(u,{}):o(g,{})}):o(n,{}),o("div",{children:t?t(r):r.getValue()})]})}})}}),[v.enableExpanding]);var T=f(f({state:{sorting:E,rowSelection:M,expanded:C}},v),{data:v.data,columns:N,color:null!==(b=v.color)&&void 0!==b?b:y.themeColor,paginateExpandedRows:!0,enableExpanding:!!v.enableExpanding,getSubRows:function(e){return e.subRows},onExpandedChange:R,onSortingChange:j,onRowSelectionChange:k,getSortedRowModel:r(),getCoreRowModel:a(),getExpandedRowModel:i()});return v.enableRowPagination&&(T.getPaginationRowModel=l()),c(T)};export{h as useGrid};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{createColumnHelper as o,getSortedRowModel as r,getCoreRowModel as a,getExpandedRowModel as l,getPaginationRowModel as c,useReactTable as d}from"@tanstack/react-table";import i,{useRef as s}from"react";import{IconButton as g}from"../IconButton/index.mjs";import{ChevronDownIcon as u,ChevronRightIcon as p}from"@radix-ui/react-icons";import{Checkbox as m}from"../Checkbox/index.mjs";import{useTheme as f}from"../../theme/ThemeProvider.mjs";var h=function(){return h=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},h.apply(this,arguments)},S=function(e,t){var n={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(n[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(o=Object.getOwnPropertySymbols(e);r<o.length;r++)t.indexOf(o[r])<0&&Object.prototype.propertyIsEnumerable.call(e,o[r])&&(n[o[r]]=e[o[r]])}return n};function w(e){var n=e.indeterminate,o=e.checked,r=e.disabled,a=e.onChange,l=s();return i.useEffect((function(){"boolean"==typeof n&&(l.current.indeterminate=o&&n)}),[l,n]),t(m,{ref:l,id:"checkbox",checked:o,disabled:r,onCheckedChange:function(e){return a&&a({target:{value:e}})},indeterminate:n})}var b=function(s){var m,b,v=S(s,[]),x=f().theme,y=i.useState([]),R=y[0],C=y[1],O=i.useState({}),E=O[0],I=O[1],j=i.useState({}),k=j[0],P=j[1],A=o(),M=null===(m=null==v?void 0:v.columns)||void 0===m?void 0:m.map((function(e){return A.accessor(e.id,h({},e))}));if(console.log("useGrid"),v.enableExpanding){var N=M[0].cell;M[0]=h(h({},M[0]),{cell:function(o){var r;return e("div",{className:"flex",style:{paddingLeft:"".concat(10*o.row.depth,"px")},children:[o.row.getCanExpand()?t(g,{onClick:o.row.getToggleExpandedHandler(),appearance:"ghost",className:"h-3 w-3",color:null!==(r=o.color)&&void 0!==r?r:x.themeColor,children:o.row.getIsExpanded()?t(u,{}):t(p,{})}):t(n,{}),t("div",{children:N?N(o):o.getValue()})]})}})}v.enableRowSelection&&(null==M||M.unshift({id:"select",header:function(e){var n=e.table;return t("div",{className:"header-checkbox",children:t(w,{checked:n.getIsAllRowsSelected()||n.getIsSomeRowsSelected(),indeterminate:n.getIsSomeRowsSelected(),onChange:n.getToggleAllRowsSelectedHandler()})})},cell:function(e){var n=e.row;return t("div",{className:"px-1",style:{paddingLeft:"".concat(10*n.depth,"px")},children:t(w,{checked:n.getIsSelected()||n.getIsSomeSelected()||n.getIsAllSubRowsSelected(),indeterminate:n.getIsSomeSelected()&&!n.getIsAllSubRowsSelected(),onChange:n.getToggleSelectedHandler()})})}}));var T=h(h({state:{sorting:R,rowSelection:k,expanded:E}},v),{data:v.data,columns:M,color:null!==(b=v.color)&&void 0!==b?b:x.themeColor,paginateExpandedRows:!0,enableExpanding:!!v.enableExpanding,getSubRows:function(e){return e.subRows},onExpandedChange:I,onSortingChange:C,onRowSelectionChange:P,getSortedRowModel:r(),getCoreRowModel:a(),getExpandedRowModel:l(),getPaginationRowModel:c()});return d(T)};export{b as useGrid};
 //# sourceMappingURL=useGrid.mjs.map