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

package/dist/index.d.ts

@@ -390,6 +390,8 @@ interface RichTextProps {
 
 declare const RichText: React.FC<RichTextProps>
 
+declare type PaginationPositionType = 'left' | 'center' | 'right'
+
 declare module '@tanstack/table-core' {
   interface ColumnMeta<TData extends RowData, TValue> {
     action: boolean
@@ -413,6 +415,7 @@ interface TableProps<DataModel extends RowData> {
   headerColumnStyle?: CSSObject
   bodyRowStyle?: CSSObject
   bodyColumnStyle?: CSSObject
+  sortColumnStyle?: CSSObject
   footerRowStyle?: CSSObject
   footerColumnStyle?: CSSObject
   styleWrapper?: CSSProperties
@@ -430,13 +433,17 @@ interface TableProps<DataModel extends RowData> {
   descendingIconProps?: IconProps
   onDataSortingChange?: (sorting: SortingState) => void
   isPaginationEnabled?: boolean
+  paginationPosition?: PaginationPositionType
   totalPage?: number
   paginationProps?: Omit<PaginationProps, 'current' | 'total' | 'pageSize' | 'onChange' | 'style'>
   paginationStyle?: PaginationProps['style']
   onPaginationChange?: (pagination: PaginationState) => void
 }
 interface TableRowProps<DataModel extends RowData>
-  extends Pick<TableProps<DataModel>, 'isRowSortable' | 'bodyRowStyle' | 'bodyColumnStyle'> {
+  extends Pick<
+    TableProps<DataModel>,
+    'isRowSortable' | 'isColumnResizeable' | 'bodyRowStyle' | 'bodyColumnStyle' | 'sortColumnStyle'
+  > {
   row: Row$1<DataModel>
 }
 interface TableHeaderProps<DataModel extends RowData>
@@ -463,6 +470,7 @@ declare const TableInner: <DataModel>(
     headerColumnStyle,
     bodyRowStyle,
     bodyColumnStyle,
+    sortColumnStyle,
     footerRowStyle,
     footerColumnStyle,
     isColumnResizeable,
@@ -477,6 +485,7 @@ declare const TableInner: <DataModel>(
     descendingIconProps,
     onDataSortingChange,
     isPaginationEnabled,
+    paginationPosition,
     totalPage,
     paginationProps,
     paginationStyle,

package/dist/index.esm.js

@@ -115,7 +115,6 @@ import{jsx as av,jsxs as aw}from"react/jsx-runtime";import a,{useMemo as ax,useS
   cursor: ${a=>a.canSort?"pointer":null};
   border: 1px solid #000;
   position: relative;
-  transition-property: width 0.1 linear;
 
   &.j-table__thead-th--dragging {
     opacity: 0.5;
@@ -130,12 +129,11 @@ import{jsx as av,jsxs as aw}from"react/jsx-runtime";import a,{useMemo as ax,useS
   }
 `,cq=b.td`
   border: 1px solid #000;
-  transition-property: width 0.1 linear;
-`;b.div`
-  && {
-    ${a=>a.style}
-  }
-`;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`
+  ${a=>a.isSortColumn?{textAlign:"center"}:void 0}
+`,cr=b.div`
+  display: flex;
+  justify-content: ${a=>a.paginationPosition};
+`,cs=({header:a,isColumnResizeable:b,isColumnSortable:k,isDataSortable:d,ascendingIconProps:i,descendingIconProps:j,headerColumnStyle:e})=>{var f,g;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})},h=ax(()=>{var b;return k&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(f=a.column.columnDef.meta)|| void 0===f?void 0:f.action,k]),q=h?m:void 0,r=h?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:{...e,...p,width:b?a.getSize():null==e?void 0:e.width},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()),h?av(G,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(g=({asc:i?av(G,{...i}):" \u{1F53C}",desc:j?av(G,{...j}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==g?g:null:void 0,b?av(cm,{className:"j-table__resizer",isResizing:a.column.getIsResizing(),onMouseDown:a.getResizeHandler(),onTouchStart:a.getResizeHandler()}):void 0]},a.id)},ct=({row:a,isRowSortable:c,isColumnResizeable:l,bodyRowStyle:d,bodyColumnStyle:e,sortColumnStyle:f})=>{let{attributes:g,listeners:h,transform:b,isDragging:i,setNodeRef:j}=br({id:a.id}),k={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:j,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${i?"j-table__tbody-tr--dragging":""}`,style:{...d,...k},children:[c?av(cq,{isSortColumn:!0,style:{...e,...f},...h,...g,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:l?a.column.getSize():null==e?void 0:e.width},children:bm(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},as=({className:i,data:j,columns:k,actions:l=[],style:m,tableStyle:c,headerRowStyle:C,headerColumnStyle:D,bodyRowStyle:E,bodyColumnStyle:F,sortColumnStyle:G,footerRowStyle:H,footerColumnStyle:I,isColumnResizeable:e,isHeaderVisible:n=!0,isFooterVisible:o,isColumnSortable:J,onColumnSortingChange:K,isRowSortable:L,onRowSortingChange:M,isDataSortable:f,ascendingIconProps:N,descendingIconProps:O,onDataSortingChange:p,isPaginationEnabled:b,paginationPosition:q,totalPage:g,paginationProps:r,paginationStyle:s,onPaginationChange:t},u)=>{let[h,v]=ay([]),[d,w]=ay({pageIndex:0,pageSize:10}),x=ax(()=>k.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})),[k]),y=ax(()=>l.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[l]),a=bk({data:j,columns:[...x,...y],columnResizeMode:e?"onChange":void 0,pageCount:g,state:{sorting:f?h:void 0,pagination:b?d:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:bl(),onPaginationChange:b?w:void 0,onSortingChange:f?v:void 0}),z=bs(bt(bu),bt(bv),bt(bw),bt(bx,{coordinateGetter:bn}));aD(()=>{p&&p(h)},[p,h]),aD(()=>{t&&t(d)},[t,d]);let A=(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}},B=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 aw(cl,{style:m,className:i,children:[aw(cn,{ref:u,className:"j-table",style:{...c,width:e?a.getCenterTotalSize():null==c?void 0:c.width},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:C,children:[L?av(cp,{style:D}):void 0,av(by,{sensors:z,collisionDetection:bz,modifiers:[bA,bB,bC],onDragEnd:Q,children:av(bo,{items:a.headers,strategy:bp,children:a.headers.map(a=>av(cs,{header:a,isColumnResizeable:e,isColumnSortable:J,isDataSortable:f,ascendingIconProps:N,descendingIconProps:O,headerColumnStyle:D},a.id))})})]},a.id))}):void 0,av("tbody",{className:"j-table__tbody",children:av(by,{sensors:z,collisionDetection:bz,modifiers:[bA,bD,bC],onDragEnd:B,children:av(bo,{items:a.getRowModel().rows,strategy:bq,children:a.getRowModel().rows.map(a=>av(ct,{row:a,isRowSortable:L,bodyRowStyle:E,bodyColumnStyle:F,sortColumnStyle:G},a.id))})})}),o?av("tfoot",{children:a.getFooterGroups().map(a=>aw(co,{style:H,children:[L?av(cp,{style:I}):void 0,a.headers.map(a=>av(cp,{colSpan:a.colSpan,style:I,children:bm(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?av(cr,{paginationPosition:q||"right",children:av(aS,{...r,style:s,current:d.pageIndex+1,total:g,onChange:A})}):void 0]})},at=a.forwardRef(as),cu=b.div`
   .otp-cell {
     margin-right: 16px;
 
@@ -143,4 +141,4 @@ import{jsx as av,jsxs as aw}from"react/jsx-runtime";import a,{useMemo as ax,useS
       margin-right: 0;
     }
   }
-`;!function(a){a.Box="box",a.Underline="underline"}(g||(g={}));let au=a.forwardRef((h,i)=>{let{isPreview:j,responsiveVisibility:k,className:l,pinCount:m=4,autoFocus:n,errorMessage:c,style:o={justifyContent:"center"},cellTextStyle:a={},cellStyle:b={},otpInputType:p="box",...q}=h,{theme:d}=al(),e={};p===g.Underline&&(e={borderLeft:"unset",borderRight:"unset",borderTop:"unset"});let f={...e,width:"100%",height:"100%",fontSize:"1rem",borderRadius:4,border:`${d.borderWidthBase} solid ${d.borderColorBase}`};bJ(b)&&bJ(a)&&(f={...b,...a});let{classNames:r}=bG({className:l,responsiveVisibility:k});return aw(ct,{className:r,ref:i,children:[av(bF,{isDisabled:j,...q,numInputs:m,shouldAutoFocus:n,containerStyle:o,inputStyle:f,className:bK("otp-cell",b,a)}),!!c&&av(R,{type:"danger",children:c})]})});export{C as Box,H as Button,aj as Carousel,ae as Checkbox,I as Col,J as Content,ag as DateTimePicker,ai as Divider,K as Footer,M as Form,e as HamburgerDrawerPlacementEnum,ah as HamburgerMenu,N as Header,G as Icon,S as IconSet,O as Image,af as ImagePicker,U as Input,V as Layout,ab as List,W as Menu,c as MenuIconPosition,X as MenuItem,an as Modal,f as ModalPositionEnum,au as OTPInput,g as OTPInputType,Z as Page,d as PickerEnum,ac as Radio,ar as RichText,$ as Row,aa as Select,_ as Sider,Y as SubMenu,ak as Tab,at as Table,R as Text,ad as TextArea,T as TextTypeEnum,am as ThemeProvider,E as assertUnreachable,i as defaultTheme,D as getIconComponent,F as getIconSet,al as useTheme}
+`;!function(a){a.Box="box",a.Underline="underline"}(g||(g={}));let au=a.forwardRef((h,i)=>{let{isPreview:j,responsiveVisibility:k,className:l,pinCount:m=4,autoFocus:n,errorMessage:c,style:o={justifyContent:"center"},cellTextStyle:a={},cellStyle:b={},otpInputType:p="box",...q}=h,{theme:d}=al(),e={};p===g.Underline&&(e={borderLeft:"unset",borderRight:"unset",borderTop:"unset"});let f={...e,width:"100%",height:"100%",fontSize:"1rem",borderRadius:4,border:`${d.borderWidthBase} solid ${d.borderColorBase}`};bJ(b)&&bJ(a)&&(f={...b,...a});let{classNames:r}=bG({className:l,responsiveVisibility:k});return aw(cu,{className:r,ref:i,children:[av(bF,{isDisabled:j,...q,numInputs:m,shouldAutoFocus:n,containerStyle:o,inputStyle:f,className:bK("otp-cell",b,a)}),!!c&&av(R,{type:"danger",children:c})]})});export{C as Box,H as Button,aj as Carousel,ae as Checkbox,I as Col,J as Content,ag as DateTimePicker,ai as Divider,K as Footer,M as Form,e as HamburgerDrawerPlacementEnum,ah as HamburgerMenu,N as Header,G as Icon,S as IconSet,O as Image,af as ImagePicker,U as Input,V as Layout,ab as List,W as Menu,c as MenuIconPosition,X as MenuItem,an as Modal,f as ModalPositionEnum,au as OTPInput,g as OTPInputType,Z as Page,d as PickerEnum,ac as Radio,ar as RichText,$ as Row,aa as Select,_ as Sider,Y as SubMenu,ak as Tab,at as Table,R as Text,ad as TextArea,T as TextTypeEnum,am as ThemeProvider,E as assertUnreachable,i as defaultTheme,D as getIconComponent,F as getIconSet,al as useTheme}

package/dist/index.js

@@ -115,7 +115,6 @@
   cursor: ${a=>a.canSort?"pointer":null};
   border: 1px solid #000;
   position: relative;
-  transition-property: width 0.1 linear;
 
   &.j-table__thead-th--dragging {
     opacity: 0.5;
@@ -130,12 +129,11 @@
   }
 `,bJ=b.default.td`
   border: 1px solid #000;
-  transition-property: width 0.1 linear;
-`;b.default.div`
-  && {
-    ${a=>a.style}
-  }
-`;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`
+  ${a=>a.isSortColumn?{textAlign:"center"}:void 0}
+`,bK=b.default.div`
+  display: flex;
+  justify-content: ${a=>a.paginationPosition};
+`,bL=({header:a,isColumnResizeable:b,isColumnSortable:l,isDataSortable:d,ascendingIconProps:j,descendingIconProps:k,headerColumnStyle:e})=>{var f,h;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})},i=g.useMemo(()=>{var b;return l&&!(null===(b=a.column.columnDef.meta)|| void 0===b?void 0:b.action)},[null===(f=a.column.columnDef.meta)|| void 0===f?void 0:f.action,l]),r=i?n:void 0,s=i?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:{...e,...q,width:b?a.getSize():null==e?void 0:e.width},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()),i?az.jsx(M,{className:"j-table__thead-th-drag",iconName:"MdDragIndicator"}):void 0,d?null!==(h=({asc:j?az.jsx(M,{...j}):" \u{1F53C}",desc:k?az.jsx(M,{...k}):" \u{1F53D}"})[a.column.getIsSorted()])&& void 0!==h?h: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)},bM=({row:a,isRowSortable:c,isColumnResizeable:l,bodyRowStyle:d,bodyColumnStyle:e,sortColumnStyle:f})=>{let{attributes:g,listeners:h,transform:b,isDragging:i,setNodeRef:j}=aI.useSortable({id:a.id}),k={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:j,className:`j-table__tbody-tr j-table__tbody-tr--${a.id} ${i?"j-table__tbody-tr--dragging":""}`,style:{...d,...k},children:[c?az.jsx(bJ,{isSortColumn:!0,style:{...e,...f},...h,...g,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:l?a.column.getSize():null==e?void 0:e.width},children:aH.flexRender(a.column.columnDef.cell,a.getContext())},a.id))]},a.id)},aw=({className:k,data:l,columns:m,actions:n=[],style:o,tableStyle:c,headerRowStyle:E,headerColumnStyle:F,bodyRowStyle:G,bodyColumnStyle:H,sortColumnStyle:I,footerRowStyle:J,footerColumnStyle:K,isColumnResizeable:f,isHeaderVisible:p=!0,isFooterVisible:q,isColumnSortable:L,onColumnSortingChange:M,isRowSortable:N,onRowSortingChange:O,isDataSortable:h,ascendingIconProps:P,descendingIconProps:Q,onDataSortingChange:r,isPaginationEnabled:b,paginationPosition:s,totalPage:i,paginationProps:t,paginationStyle:u,onPaginationChange:v},w)=>{let[j,x]=g.useState([]),[d,y]=g.useState({pageIndex:0,pageSize:10}),z=g.useMemo(()=>m.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})),[m]),A=g.useMemo(()=>n.map(a=>({meta:{action:!0},header:a.name,footer:a.name,cell:a.renderColumn,enableSorting:!1})),[n]),a=aH.useReactTable({data:l,columns:[...z,...A],columnResizeMode:f?"onChange":void 0,pageCount:i,state:{sorting:h?j:void 0,pagination:b?d:void 0},manualPagination:b,manualSorting:!0,getCoreRowModel:aH.getCoreRowModel(),onPaginationChange:b?y:void 0,onSortingChange:h?x:void 0}),B=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(j)},[r,j]),g.useEffect(()=>{v&&v(d)},[v,d]);let C=(b,c)=>{a.setPageIndex(b-1),a.setPageSize(c)},R=({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}},D=a=>{let{currentIndex:b,newIndex:c}=R(a);O&&O(b,c)},S=a=>{let{currentIndex:b,newIndex:c}=R(a);M&&M(b,c)};return az.jsxs(bE,{style:o,className:k,children:[az.jsxs(bG,{ref:w,className:"j-table",style:{...c,width:f?a.getCenterTotalSize():null==c?void 0:c.width},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:E,children:[N?az.jsx(bI,{style:F}):void 0,az.jsx(aJ.DndContext,{sensors:B,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToHorizontalAxis,aK.restrictToParentElement],onDragEnd:S,children:az.jsx(aI.SortableContext,{items:a.headers,strategy:aI.horizontalListSortingStrategy,children:a.headers.map(a=>az.jsx(bL,{header:a,isColumnResizeable:f,isColumnSortable:L,isDataSortable:h,ascendingIconProps:P,descendingIconProps:Q,headerColumnStyle:F},a.id))})})]},a.id))}):void 0,az.jsx("tbody",{className:"j-table__tbody",children:az.jsx(aJ.DndContext,{sensors:B,collisionDetection:aJ.closestCenter,modifiers:[aK.restrictToFirstScrollableAncestor,aK.restrictToVerticalAxis,aK.restrictToParentElement],onDragEnd:D,children:az.jsx(aI.SortableContext,{items:a.getRowModel().rows,strategy:aI.verticalListSortingStrategy,children:a.getRowModel().rows.map(a=>az.jsx(bM,{row:a,isRowSortable:N,bodyRowStyle:G,bodyColumnStyle:H,sortColumnStyle:I},a.id))})})}),q?az.jsx("tfoot",{children:a.getFooterGroups().map(a=>az.jsxs(bH,{style:J,children:[N?az.jsx(bI,{style:K}):void 0,a.headers.map(a=>az.jsx(bI,{colSpan:a.colSpan,style:K,children:aH.flexRender(a.column.columnDef.footer,a.getContext())},a.id))]},a.id))}):void 0]}),b?az.jsx(bK,{paginationPosition:s||"right",children:az.jsx(e.Pagination,{...t,style:u,current:d.pageIndex+1,total:i,onChange:C})}):void 0]})},ax=a.default.forwardRef(aw),bN=b.default.div`
   .otp-cell {
     margin-right: 16px;
 
@@ -143,4 +141,4 @@
       margin-right: 0;
     }
   }
-`;exports.OTPInputType=void 0,function(a){a.Box="box",a.Underline="underline"}(exports.OTPInputType||(exports.OTPInputType={}));const ay=a.default.forwardRef((g,h)=>{let{isPreview:i,responsiveVisibility:j,className:k,pinCount:l=4,autoFocus:m,errorMessage:c,style:n={justifyContent:"center"},cellTextStyle:a={},cellStyle:b={},otpInputType:o="box",...p}=g,{theme:d}=ap(),e={};o===exports.OTPInputType.Underline&&(e={borderLeft:"unset",borderRight:"unset",borderTop:"unset"});let f={...e,width:"100%",height:"100%",fontSize:"1rem",borderRadius:4,border:`${d.borderWidthBase} solid ${d.borderColorBase}`};a0(b)&&a0(a)&&(f={...b,...a});let{classNames:q}=aZ({className:k,responsiveVisibility:j});return az.jsxs(bM,{className:q,ref:h,children:[az.jsx(aY.default,{isDisabled:i,...p,numInputs:l,shouldAutoFocus:m,containerStyle:n,inputStyle:f,className:a1("otp-cell",b,a)}),!!c&&az.jsx(X,{type:"danger",children:c})]})});Object.defineProperty(exports,"createColumnHelper",{enumerable:!0,get:function(){return aH.createColumnHelper}}),Object.defineProperty(exports,"arrayMove",{enumerable:!0,get:function(){return aI.arrayMove}}),exports.Box=I,exports.Button=N,exports.Carousel=an,exports.Checkbox=ai,exports.Col=O,exports.Content=P,exports.DateTimePicker=ak,exports.Divider=am,exports.Footer=Q,exports.Form=S,exports.HamburgerMenu=al,exports.Header=T,exports.Icon=M,exports.Image=U,exports.ImagePicker=aj,exports.Input=Y,exports.Layout=Z,exports.List=af,exports.Menu=$,exports.MenuItem=_,exports.Modal=ar,exports.OTPInput=ay,exports.Page=ab,exports.Radio=ag,exports.RichText=av,exports.Row=ac,exports.Select=ae,exports.Sider=ad,exports.SubMenu=aa,exports.Tab=ao,exports.Table=ax,exports.Text=X,exports.TextArea=ah,exports.ThemeProvider=aq,exports.assertUnreachable=K,exports.defaultTheme=l,exports.getIconComponent=J,exports.getIconSet=L,exports.useTheme=ap
+`;exports.OTPInputType=void 0,function(a){a.Box="box",a.Underline="underline"}(exports.OTPInputType||(exports.OTPInputType={}));const ay=a.default.forwardRef((g,h)=>{let{isPreview:i,responsiveVisibility:j,className:k,pinCount:l=4,autoFocus:m,errorMessage:c,style:n={justifyContent:"center"},cellTextStyle:a={},cellStyle:b={},otpInputType:o="box",...p}=g,{theme:d}=ap(),e={};o===exports.OTPInputType.Underline&&(e={borderLeft:"unset",borderRight:"unset",borderTop:"unset"});let f={...e,width:"100%",height:"100%",fontSize:"1rem",borderRadius:4,border:`${d.borderWidthBase} solid ${d.borderColorBase}`};a0(b)&&a0(a)&&(f={...b,...a});let{classNames:q}=aZ({className:k,responsiveVisibility:j});return az.jsxs(bN,{className:q,ref:h,children:[az.jsx(aY.default,{isDisabled:i,...p,numInputs:l,shouldAutoFocus:m,containerStyle:n,inputStyle:f,className:a1("otp-cell",b,a)}),!!c&&az.jsx(X,{type:"danger",children:c})]})});Object.defineProperty(exports,"createColumnHelper",{enumerable:!0,get:function(){return aH.createColumnHelper}}),Object.defineProperty(exports,"arrayMove",{enumerable:!0,get:function(){return aI.arrayMove}}),exports.Box=I,exports.Button=N,exports.Carousel=an,exports.Checkbox=ai,exports.Col=O,exports.Content=P,exports.DateTimePicker=ak,exports.Divider=am,exports.Footer=Q,exports.Form=S,exports.HamburgerMenu=al,exports.Header=T,exports.Icon=M,exports.Image=U,exports.ImagePicker=aj,exports.Input=Y,exports.Layout=Z,exports.List=af,exports.Menu=$,exports.MenuItem=_,exports.Modal=ar,exports.OTPInput=ay,exports.Page=ab,exports.Radio=ag,exports.RichText=av,exports.Row=ac,exports.Select=ae,exports.Sider=ad,exports.SubMenu=aa,exports.Tab=ao,exports.Table=ax,exports.Text=X,exports.TextArea=ah,exports.ThemeProvider=aq,exports.assertUnreachable=K,exports.defaultTheme=l,exports.getIconComponent=J,exports.getIconSet=L,exports.useTheme=ap

package/package.json

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