@jitera/jitera-web-ui-library 1.38.0 → 1.39.1

package/dist/index.d.ts

@@ -410,8 +410,11 @@ interface TableProps<DataModel extends RowData> {
   style?: CSSObject
   tableStyle?: CSSObject
   headerRowStyle?: CSSObject
+  headerColumnStyle?: CSSObject
   bodyRowStyle?: CSSObject
+  bodyColumnStyle?: CSSObject
   footerRowStyle?: CSSObject
+  footerColumnStyle?: CSSObject
   styleWrapper?: CSSProperties
   styleTable?: CSSProperties
   styleThead?: CSSProperties
@@ -433,7 +436,7 @@ interface TableProps<DataModel extends RowData> {
   onPaginationChange?: (pagination: PaginationState) => void
 }
 interface TableRowProps<DataModel extends RowData>
-  extends Pick<TableProps<DataModel>, 'isRowSortable' | 'bodyRowStyle'> {
+  extends Pick<TableProps<DataModel>, 'isRowSortable' | 'bodyRowStyle' | 'bodyColumnStyle'> {
   row: Row$1<DataModel>
 }
 interface TableHeaderProps<DataModel extends RowData>
@@ -444,6 +447,7 @@ interface TableHeaderProps<DataModel extends RowData>
     | 'isDataSortable'
     | 'ascendingIconProps'
     | 'descendingIconProps'
+    | 'headerColumnStyle'
   > {
   header: Header$1<DataModel, unknown>
 }
@@ -456,8 +460,11 @@ declare const TableInner: <DataModel>(
     style,
     tableStyle,
     headerRowStyle,
+    headerColumnStyle,
     bodyRowStyle,
+    bodyColumnStyle,
     footerRowStyle,
+    footerColumnStyle,
     isColumnResizeable,
     isHeaderVisible,
     isFooterVisible,

package/dist/index.esm.js

@@ -135,7 +135,7 @@ import{jsx as av,jsxs as aw}from"react/jsx-runtime";import a,{useMemo as ax,useS
   && {
     ${a=>a.style}
   }
-`;let cr=({header:a,isColumnResizeable:b,isColumnSortable:j,isDataSortable:d,ascendingIconProps:h,descendingIconProps:i})=>{var e,f;let{attributes:k,listeners:l,transform:c,isDragging:m,setNodeRef:n}=br({id:a.id}),o={transform:bE.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},g=ax(()=>{var b;return j&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(e=a.column.columnDef.meta)|| void 0===e?void 0:e.action,j]),p=g?l:void 0,q=g?k:void 0;return aw(cp,{ref:n,className:`j-table__thead-th j-table__thead-th--${a.id} ${m?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...o,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...p,...q,children:[bm(a.column.columnDef.header,a.getContext()),g?av(G,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(f=({asc:h?av(G,{...h}):" \u{1F53C}",desc:i?av(G,{...i}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==f?f:null:void 0,b?av(cm,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},cs=({row:a,isRowSortable:c,bodyRowStyle:d})=>{let{attributes:e,listeners:f,transform:b,isDragging:g,setNodeRef:h}=br({id:a.id}),i={transform:bE.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return aw(co,{ref:h,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${g?"j-table__tbody-tr--dragging":""}`,style:{...d,...i},children:[c?av(cq,{...f,...e,children:av(G,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>av(cq,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{width:a.column.getSize()},children:bm(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},as=({className:h,data:i,columns:j,actions:k=[],style:l,tableStyle:m,headerRowStyle:B,bodyRowStyle:C,footerRowStyle:D,isColumnResizeable:d,isHeaderVisible:n=!0,isFooterVisible:o,isColumnSortable:E,onColumnSortingChange:F,isRowSortable:G,onRowSortingChange:H,isDataSortable:e,ascendingIconProps:I,descendingIconProps:J,onDataSortingChange:p,isPaginationEnabled:b,totalPage:f,paginationProps:q,paginationStyle:r,onPaginationChange:s},t)=>{let[g,u]=ay([]),[c,v]=ay({pageIndex:0,pageSize:10}),w=ax(()=>j.map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[j]),x=ax(()=>k.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[k]),a=bk({data:i,columns:[...w,...x],columnResizeMode:d?"onChange":void 0,pageCount:f,state:{sorting:e?g:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:bl(),onPaginationChange:b?v:void 0,onSortingChange:e?u:void 0}),y=bs(bt(bu),bt(bv),bt(bw),bt(bx,{coordinateGetter:bn}));aD(()=>{p&&p(g)},[p,g]),aD(()=>{s&&s(c)},[s,c]);let z=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},K=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},A=a=>{let{currentIndex:b,newIndex:c}=K(a);H&&H(b,c)},L=a=>{let{currentIndex:b,newIndex:c}=K(a);F&&F(b,c)};return aw(cl,{style:l,className:h,children:[aw(cn,{ref:t,className:"j-table",style:{...m,width:d?a.getCenterTotalSize():void 0},children:[n?av("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>aw(co,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,style:B,children:[G?av(cp,{}):void 0,av(by,{sensors:y,collisionDetection:bz,modifiers:[bA,bB,bC],onDragEnd:L,children:av(bo,{items:a.headers,strategy:bp,children:a.headers.map(a=>av(cr,{header:a,isColumnResizeable:d,isColumnSortable:E,isDataSortable:e,ascendingIconProps:I,descendingIconProps:J},a.id))})})]},a.id))}):void 0,av("tbody",{className:"j-table__tbody",children:av(by,{sensors:y,collisionDetection:bz,modifiers:[bA,bD,bC],onDragEnd:A,children:av(bo,{items:a.getRowModel().rows,strategy:bq,children:a.getRowModel().rows.map(a=>av(cs,{row:a,isRowSortable:G,bodyRowStyle:C},a.id))})})}),o?av("tfoot",{children:a.getFooterGroups().map(a=>aw(co,{style:D,children:[G?av(cp,{}):void 0,a.headers.map(a=>av(cp,{colSpan:a.colSpan,children:bm(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?av(aS,{...q,style:r,current:c.pageIndex+1,total:f,onChange:z}):void 0]})},at=a.forwardRef(as),ct=b.div`
+`;let cr=({header:a,isColumnResizeable:b,isColumnSortable:j,isDataSortable:d,ascendingIconProps:h,descendingIconProps:i,headerColumnStyle:k})=>{var e,f;let{attributes:l,listeners:m,transform:c,isDragging:n,setNodeRef:o}=br({id:a.id}),p={transform:bE.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},g=ax(()=>{var b;return j&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(e=a.column.columnDef.meta)|| void 0===e?void 0:e.action,j]),q=g?m:void 0,r=g?l:void 0;return aw(cp,{ref:o,className:`j-table__thead-th j-table__thead-th--${a.id} ${n?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...k,...p,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...q,...r,children:[bm(a.column.columnDef.header,a.getContext()),g?av(G,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(f=({asc:h?av(G,{...h}):" \u{1F53C}",desc:i?av(G,{...i}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==f?f:null:void 0,b?av(cm,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},cs=({row:a,isRowSortable:c,bodyRowStyle:d,bodyColumnStyle:e})=>{let{attributes:f,listeners:g,transform:b,isDragging:h,setNodeRef:i}=br({id:a.id}),j={transform:bE.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return aw(co,{ref:i,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${h?"j-table__tbody-tr--dragging":""}`,style:{...d,...j},children:[c?av(cq,{style:e,...g,...f,children:av(G,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>av(cq,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{...e,width:a.column.getSize()},children:bm(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},as=({className:h,data:i,columns:j,actions:k=[],style:l,tableStyle:m,headerRowStyle:B,headerColumnStyle:C,bodyRowStyle:D,bodyColumnStyle:E,footerRowStyle:F,footerColumnStyle:G,isColumnResizeable:d,isHeaderVisible:n=!0,isFooterVisible:o,isColumnSortable:H,onColumnSortingChange:I,isRowSortable:J,onRowSortingChange:K,isDataSortable:e,ascendingIconProps:L,descendingIconProps:M,onDataSortingChange:p,isPaginationEnabled:b,totalPage:f,paginationProps:q,paginationStyle:r,onPaginationChange:s},t)=>{let[g,u]=ay([]),[c,v]=ay({pageIndex:0,pageSize:10}),w=ax(()=>j.map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[j]),x=ax(()=>k.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[k]),a=bk({data:i,columns:[...w,...x],columnResizeMode:d?"onChange":void 0,pageCount:f,state:{sorting:e?g:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:bl(),onPaginationChange:b?v:void 0,onSortingChange:e?u:void 0}),y=bs(bt(bu),bt(bv),bt(bw),bt(bx,{coordinateGetter:bn}));aD(()=>{p&&p(g)},[p,g]),aD(()=>{s&&s(c)},[s,c]);let z=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},N=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},A=a=>{let{currentIndex:b,newIndex:c}=N(a);K&&K(b,c)},O=a=>{let{currentIndex:b,newIndex:c}=N(a);I&&I(b,c)};return aw(cl,{style:l,className:h,children:[aw(cn,{ref:t,className:"j-table",style:{...m,width:d?a.getCenterTotalSize():void 0},children:[n?av("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>aw(co,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,style:B,children:[J?av(cp,{style:C}):void 0,av(by,{sensors:y,collisionDetection:bz,modifiers:[bA,bB,bC],onDragEnd:O,children:av(bo,{items:a.headers,strategy:bp,children:a.headers.map(a=>av(cr,{header:a,isColumnResizeable:d,isColumnSortable:H,isDataSortable:e,ascendingIconProps:L,descendingIconProps:M,headerColumnStyle:C},a.id))})})]},a.id))}):void 0,av("tbody",{className:"j-table__tbody",children:av(by,{sensors:y,collisionDetection:bz,modifiers:[bA,bD,bC],onDragEnd:A,children:av(bo,{items:a.getRowModel().rows,strategy:bq,children:a.getRowModel().rows.map(a=>av(cs,{row:a,isRowSortable:J,bodyRowStyle:D,bodyColumnStyle:E},a.id))})})}),o?av("tfoot",{children:a.getFooterGroups().map(a=>aw(co,{style:F,children:[J?av(cp,{style:G}):void 0,a.headers.map(a=>av(cp,{colSpan:a.colSpan,style:G,children:bm(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?av(aS,{...q,style:r,current:c.pageIndex+1,total:f,onChange:z}):void 0]})},at=a.forwardRef(as),ct=b.div`
   .otp-cell {
     margin-right: 16px;
 

package/dist/index.js

@@ -135,7 +135,7 @@
   && {
     ${a=>a.style}
   }
-`;const bK=({header:a,isColumnResizeable:b,isColumnSortable:k,isDataSortable:d,ascendingIconProps:i,descendingIconProps:j})=>{var e,f;let{attributes:l,listeners:m,transform:c,isDragging:n,setNodeRef:o}=aI.useSortable({id:a.id}),p={transform:aL.CSS.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},h=g.useMemo(()=>{var b;return k&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(e=a.column.columnDef.meta)|| void 0===e?void 0:e.action,k]),q=h?m:void 0,r=h?l:void 0;return az.jsxs(bI,{ref:o,className:`j-table__thead-th j-table__thead-th--${a.id} ${n?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...p,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...q,...r,children:[aH.flexRender(a.column.columnDef.header,a.getContext()),h?az.jsx(M,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(f=({asc:i?az.jsx(M,{...i}):" \u{1F53C}",desc:j?az.jsx(M,{...j}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==f?f:null:void 0,b?az.jsx(bF,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},bL=({row:a,isRowSortable:c,bodyRowStyle:d})=>{let{attributes:e,listeners:f,transform:b,isDragging:g,setNodeRef:h}=aI.useSortable({id:a.id}),i={transform:aL.CSS.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return az.jsxs(bH,{ref:h,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${g?"j-table__tbody-tr--dragging":""}`,style:{...d,...i},children:[c?az.jsx(bJ,{...f,...e,children:az.jsx(M,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>az.jsx(bJ,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{width:a.column.getSize()},children:aH.flexRender(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},aw=({className:j,data:k,columns:l,actions:m=[],style:n,tableStyle:o,headerRowStyle:D,bodyRowStyle:E,footerRowStyle:F,isColumnResizeable:d,isHeaderVisible:p=!0,isFooterVisible:q,isColumnSortable:G,onColumnSortingChange:H,isRowSortable:I,onRowSortingChange:J,isDataSortable:f,ascendingIconProps:K,descendingIconProps:L,onDataSortingChange:r,isPaginationEnabled:b,totalPage:h,paginationProps:s,paginationStyle:t,onPaginationChange:u},v)=>{let[i,w]=g.useState([]),[c,x]=g.useState({pageIndex:0,pageSize:10}),y=g.useMemo(()=>l.map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[l]),z=g.useMemo(()=>m.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[m]),a=aH.useReactTable({data:k,columns:[...y,...z],columnResizeMode:d?"onChange":void 0,pageCount:h,state:{sorting:f?i:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:aH.getCoreRowModel(),onPaginationChange:b?x:void 0,onSortingChange:f?w:void 0}),A=aJ.useSensors(aJ.useSensor(aJ.PointerSensor),aJ.useSensor(aJ.MouseSensor),aJ.useSensor(aJ.TouchSensor),aJ.useSensor(aJ.KeyboardSensor,{coordinateGetter:aI.sortableKeyboardCoordinates}));g.useEffect(()=>{r&&r(i)},[r,i]),g.useEffect(()=>{u&&u(c)},[u,c]);let B=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},M=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},C=a=>{let{currentIndex:b,newIndex:c}=M(a);J&&J(b,c)},N=a=>{let{currentIndex:b,newIndex:c}=M(a);H&&H(b,c)};return az.jsxs(bE,{style:n,className:j,children:[az.jsxs(bG,{ref:v,className:"j-table",style:{...o,width:d?a.getCenterTotalSize():void 0},children:[p?az.jsx("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>az.jsxs(bH,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,style:D,children:[I?az.jsx(bI,{}):void 0,az.jsx(aJ.DndContext,{sensors:A,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToHorizontalAxis,aK.restrictToParentElement],onDragEnd:N,children:az.jsx(aI.SortableContext,{items:a.headers,strategy:aI.horizontalListSortingStrategy,children:a.headers.map(a=>az.jsx(bK,{header:a,isColumnResizeable:d,isColumnSortable:G,isDataSortable:f,ascendingIconProps:K,descendingIconProps:L},a.id))})})]},a.id))}):void 0,az.jsx("tbody",{className:"j-table__tbody",children:az.jsx(aJ.DndContext,{sensors:A,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToVerticalAxis,aK.restrictToParentElement],onDragEnd:C,children:az.jsx(aI.SortableContext,{items:a.getRowModel().rows,strategy:aI.verticalListSortingStrategy,children:a.getRowModel().rows.map(a=>az.jsx(bL,{row:a,isRowSortable:I,bodyRowStyle:E},a.id))})})}),q?az.jsx("tfoot",{children:a.getFooterGroups().map(a=>az.jsxs(bH,{style:F,children:[I?az.jsx(bI,{}):void 0,a.headers.map(a=>az.jsx(bI,{colSpan:a.colSpan,children:aH.flexRender(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?az.jsx(e.Pagination,{...s,style:t,current:c.pageIndex+1,total:h,onChange:B}):void 0]})},ax=a.default.forwardRef(aw),bM=b.default.div`
+`;const bK=({header:a,isColumnResizeable:b,isColumnSortable:k,isDataSortable:d,ascendingIconProps:i,descendingIconProps:j,headerColumnStyle:l})=>{var e,f;let{attributes:m,listeners:n,transform:c,isDragging:o,setNodeRef:p}=aI.useSortable({id:a.id}),q={transform:aL.CSS.Transform.toString({x:(null==c?void 0:c.x)||0,y:(null==c?void 0:c.y)||0,scaleX:1,scaleY:1})},h=g.useMemo(()=>{var b;return k&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(e=a.column.columnDef.meta)|| void 0===e?void 0:e.action,k]),r=h?n:void 0,s=h?m:void 0;return az.jsxs(bI,{ref:p,className:`j-table__thead-th j-table__thead-th--${a.id} ${o?"j-table__thead-th--dragging":""}`,colSpan:a.colSpan,canSort:d?a.column.getCanSort():void 0,style:{...l,...q,width:b?a.getSize():void 0},onClick:d?a.column.getToggleSortingHandler():void 0,onMouseDown:b?a.getResizeHandler():void 0,onTouchStart:b?a.getResizeHandler():void 0,...r,...s,children:[aH.flexRender(a.column.columnDef.header,a.getContext()),h?az.jsx(M,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(f=({asc:i?az.jsx(M,{...i}):" \u{1F53C}",desc:j?az.jsx(M,{...j}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==f?f:null:void 0,b?az.jsx(bF,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},bL=({row:a,isRowSortable:c,bodyRowStyle:d,bodyColumnStyle:e})=>{let{attributes:f,listeners:g,transform:b,isDragging:h,setNodeRef:i}=aI.useSortable({id:a.id}),j={transform:aL.CSS.Transform.toString({x:(null==b?void 0:b.x)||0,y:(null==b?void 0:b.y)||0,scaleX:1,scaleY:1})};return az.jsxs(bH,{ref:i,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${h?"j-table__tbody-tr--dragging":""}`,style:{...d,...j},children:[c?az.jsx(bJ,{style:e,...g,...f,children:az.jsx(M,{className:"j-table__tbody-td-drag",iconName:"MdDragIndicator"})}):void 0,a.getVisibleCells().map(a=>az.jsx(bJ,{className:`j-table__tbody-td j-table__tbody-td--${a.id}`,style:{...e,width:a.column.getSize()},children:aH.flexRender(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},aw=({className:j,data:k,columns:l,actions:m=[],style:n,tableStyle:o,headerRowStyle:D,headerColumnStyle:E,bodyRowStyle:F,bodyColumnStyle:G,footerRowStyle:H,footerColumnStyle:I,isColumnResizeable:d,isHeaderVisible:p=!0,isFooterVisible:q,isColumnSortable:J,onColumnSortingChange:K,isRowSortable:L,onRowSortingChange:M,isDataSortable:f,ascendingIconProps:N,descendingIconProps:O,onDataSortingChange:r,isPaginationEnabled:b,totalPage:h,paginationProps:s,paginationStyle:t,onPaginationChange:u},v)=>{let[i,w]=g.useState([]),[c,x]=g.useState({pageIndex:0,pageSize:10}),y=g.useMemo(()=>l.map(a=>({accessorKey:a.renderColumn?void 0:a.path,header:a.name,footer:a.name,cell:a.renderColumn?a.renderColumn:a=>a.getValue(),enableSorting:a.sortable})),[l]),z=g.useMemo(()=>m.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[m]),a=aH.useReactTable({data:k,columns:[...y,...z],columnResizeMode:d?"onChange":void 0,pageCount:h,state:{sorting:f?i:void 0,pagination:b?c:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:aH.getCoreRowModel(),onPaginationChange:b?x:void 0,onSortingChange:f?w:void 0}),A=aJ.useSensors(aJ.useSensor(aJ.PointerSensor),aJ.useSensor(aJ.MouseSensor),aJ.useSensor(aJ.TouchSensor),aJ.useSensor(aJ.KeyboardSensor,{coordinateGetter:aI.sortableKeyboardCoordinates}));g.useEffect(()=>{r&&r(i)},[r,i]),g.useEffect(()=>{u&&u(c)},[u,c]);let B=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},P=({active:d,over:c})=>{var a,b;let e=null===(a=d.data.current)|| void 0===a?void 0:a.sortable.index,f=null===(b=null==c?void 0:c.data.current)|| void 0===b?void 0:b.sortable.index;return{currentIndex:e,newIndex:f}},C=a=>{let{currentIndex:b,newIndex:c}=P(a);M&&M(b,c)},Q=a=>{let{currentIndex:b,newIndex:c}=P(a);K&&K(b,c)};return az.jsxs(bE,{style:n,className:j,children:[az.jsxs(bG,{ref:v,className:"j-table",style:{...o,width:d?a.getCenterTotalSize():void 0},children:[p?az.jsx("thead",{className:"j-table__thead",children:a.getHeaderGroups().map(a=>az.jsxs(bH,{className:`j-table__thead-tr j-table__thead-tr--${a.id}`,style:D,children:[L?az.jsx(bI,{style:E}):void 0,az.jsx(aJ.DndContext,{sensors:A,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToHorizontalAxis,aK.restrictToParentElement],onDragEnd:Q,children:az.jsx(aI.SortableContext,{items:a.headers,strategy:aI.horizontalListSortingStrategy,children:a.headers.map(a=>az.jsx(bK,{header:a,isColumnResizeable:d,isColumnSortable:J,isDataSortable:f,ascendingIconProps:N,descendingIconProps:O,headerColumnStyle:E},a.id))})})]},a.id))}):void 0,az.jsx("tbody",{className:"j-table__tbody",children:az.jsx(aJ.DndContext,{sensors:A,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToVerticalAxis,aK.restrictToParentElement],onDragEnd:C,children:az.jsx(aI.SortableContext,{items:a.getRowModel().rows,strategy:aI.verticalListSortingStrategy,children:a.getRowModel().rows.map(a=>az.jsx(bL,{row:a,isRowSortable:L,bodyRowStyle:F,bodyColumnStyle:G},a.id))})})}),q?az.jsx("tfoot",{children:a.getFooterGroups().map(a=>az.jsxs(bH,{style:H,children:[L?az.jsx(bI,{style:I}):void 0,a.headers.map(a=>az.jsx(bI,{colSpan:a.colSpan,style:I,children:aH.flexRender(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?az.jsx(e.Pagination,{...s,style:t,current:c.pageIndex+1,total:h,onChange:B}):void 0]})},ax=a.default.forwardRef(aw),bM=b.default.div`
   .otp-cell {
     margin-right: 16px;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jitera/jitera-web-ui-library",
-  "version": "1.38.0",
+  "version": "1.39.1",
   "description": "atoms and component for web project",
   "sideEffects": [
     "*.css"