@lotte-innovate/ui-component-test 0.0.124 → 0.0.126

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, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import IconButton from '../IconButton';
 import { ChevronDownIcon, ChevronRightIcon } from '@radix-ui/react-icons';
 import Checkbox from '../Checkbox';
@@ -49,30 +49,34 @@ 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));
     });
-    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() }) }));
-            },
-        });
-    }
+    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, columnsData]);
+    useEffect(function () {
+        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() }) }));
+                },
+            });
+        }
+    }, [props.enableRowSelection, columnsData]);
     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();

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

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