acinguiux-ds-react-framework 0.1.18 → 0.1.20

package/build/cjs/components/Table/Table.styles.js

@@ -1,47 +1,47 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("styled-components"),a=require("../../react-base/src/consts/index.js"),t=require("../../react-base/src/components/Table/Table.consts.js"),p=require("../../react-base/src/theme/types/layer.js"),r=require("../../react-base/src/utils/sizesUtils.js"),l=require("./components/TableElements/TableElements.js"),c=require("../Flexbox/Flexbox.styles.js"),g=require("../../react-base/src/consts/classes.js"),h={[a.Sizes.XSmall]:4,[a.Sizes.Small]:6,[a.Sizes.Medium]:8,[a.Sizes.Large]:10},b=n.styled.table(({theme:o,$size:e=`${a.Sizes.Medium}`,$alignment:s,$empty:i})=>{const d=o.layer({foundation:"surface"});return n.css`
-      --table-header-cell-height: ${t.consts[e].headerCell.height}px;
-      --table-header-cell-padding-top: ${t.consts[e].headerCell.padding.top??0}px;
-      --table-header-cell-padding-bottom: ${t.consts[e].headerCell.padding.bottom??0}px;
-      --table-header-cell-padding-left: ${t.consts[e].headerCell.padding.left??0}px;
-      --table-header-cell-padding-right: ${t.consts[e].headerCell.padding.right??0}px;
-      --table-header-cell-gap: ${t.consts[e].headerCell.gap}px;
-      --table-cell-height: ${t.consts[e].cell.height}px;
-      --table-cell-padding-top: ${t.consts[e].cell.padding.top??0}px;
-      --table-cell-padding-bottom: ${t.consts[e].cell.padding.bottom??0}px;
-      --table-cell-padding-left: ${t.consts[e].cell.padding.left??0}px;
-      --table-cell-padding-right: ${t.consts[e].cell.padding.right??0}px;
-      --table-cell-gap: ${t.consts[e].cell.gap}px;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("styled-components"),a=require("../../react-base/src/consts/index.js"),l=require("../../react-base/src/components/Table/Table.consts.js"),p=require("../../react-base/src/theme/types/layer.js"),d=require("../../react-base/src/utils/sizesUtils.js"),t=require("./components/TableElements/TableElements.js"),c=require("../Flexbox/Flexbox.styles.js"),i=require("../../react-base/src/consts/classes.js"),h={[a.Sizes.XSmall]:4,[a.Sizes.Small]:6,[a.Sizes.Medium]:8,[a.Sizes.Large]:10},b=r.styled.table(({theme:o,$size:e=`${a.Sizes.Medium}`,$alignment:s,$empty:g})=>{const n=o.layer({foundation:"surface"});return r.css`
+      --table-header-cell-height: ${l.consts[e].headerCell.height}px;
+      --table-header-cell-padding-top: ${l.consts[e].headerCell.padding.top??0}px;
+      --table-header-cell-padding-bottom: ${l.consts[e].headerCell.padding.bottom??0}px;
+      --table-header-cell-padding-left: ${l.consts[e].headerCell.padding.left??0}px;
+      --table-header-cell-padding-right: ${l.consts[e].headerCell.padding.right??0}px;
+      --table-header-cell-gap: ${l.consts[e].headerCell.gap}px;
+      --table-cell-height: ${l.consts[e].cell.height}px;
+      --table-cell-padding-top: ${l.consts[e].cell.padding.top??0}px;
+      --table-cell-padding-bottom: ${l.consts[e].cell.padding.bottom??0}px;
+      --table-cell-padding-left: ${l.consts[e].cell.padding.left??0}px;
+      --table-cell-padding-right: ${l.consts[e].cell.padding.right??0}px;
+      --table-cell-gap: ${l.consts[e].cell.gap}px;
       --table-row-group-spacing-height: ${h[e]}px;
 
       /* We define the typography here to avoid the need to set it in each cell; enforcing the typography sizes */
-      ${l.StyledTh}, ${l.StyledTh}:has(.${g.BUTTON_CLASS}) * {
-        color: ${d[p.Variables.TextOnFoundationStrong]};
-        ${o.typography("label",r.getLabelTypographySize(e),"strong")};
+      ${t.StyledTh}, ${t.StyledTh}:has(.${i.BUTTON_CLASS}) * {
+        color: ${n[p.Variables.TextOnFoundationStrong]};
+        ${o.typography("label",d.getLabelTypographySize(e),"strong")};
 
-        span.${g.TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS} {
-          color: ${d[p.Variables.TextOnFoundationSubtle]};
-          ${o.typography("label",r.getLabelTypographySize(r.getSmallerSize(e)))};
+        span.${i.TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS} {
+          color: ${n[p.Variables.TextOnFoundationSubtle]};
+          ${o.typography("label",d.getLabelTypographySize(d.getSmallerSize(e)))};
         }
       }
 
-      ${l.StyledTd} {
-        ${o.typography("paragraph",r.getParagraphTypographySize(e))};
+      ${t.StyledTd} {
+        ${o.typography("label",d.getLabelTypographySize(e))};
       }
 
       width: 100%;
       min-height: var(--table-cell-height);
       border-collapse: separate;
       border-spacing: 0;
-      background-color: ${d[p.Variables.BackgroundFoundation]};
+      background-color: ${n[p.Variables.BackgroundFoundation]};
 
-      > * > ${l.StyledTr} > ${l.StyledTh} > ${c.Flexbox}, > * > ${l.StyledTr} > ${l.StyledTd} > ${c.Flexbox} {
+      > * > ${t.StyledTr} > ${t.StyledTh} > ${c.Flexbox}, > * > ${t.StyledTr} > ${t.StyledTd} > ${c.Flexbox} {
         justify-content: ${s};
       }
 
       tbody td {
         text-align: ${s};
 
-        ${i&&n.css`
+        ${g&&r.css`
           padding: unset;
         `};
       }

package/build/cjs/components/Table/Table.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.styles.js","sources":["../../../../src/components/Table/Table.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { BUTTON_CLASS, Sizes, TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { TableConsts, type TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport {\n  getLabelTypographySize,\n  getParagraphTypographySize,\n  getSmallerSize,\n} from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { ITableProps } from './Table.types';\nimport { StyledTd, StyledTh, StyledTr } from './components/TableElements/TableElements';\nimport { Flexbox } from '../Flexbox/Flexbox.styles';\n\nconst SpacingTRHeight: { [key in TableTypes.Size]: number } = {\n  [Sizes.XSmall]: 4,\n  [Sizes.Small]: 6,\n  [Sizes.Medium]: 8,\n  [Sizes.Large]: 10,\n} as const;\n\nconst Table = styled.table<PickTransient<ITableProps, 'empty' | 'size' | 'alignment'>>(\n  ({ theme, $size = `${Sizes.Medium}`, $alignment, $empty }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      --table-header-cell-height: ${TableConsts.consts[$size].headerCell.height}px;\n      --table-header-cell-padding-top: ${TableConsts.consts[$size].headerCell.padding.top ?? 0}px;\n      --table-header-cell-padding-bottom: ${TableConsts.consts[$size].headerCell.padding.bottom ?? 0}px;\n      --table-header-cell-padding-left: ${TableConsts.consts[$size].headerCell.padding.left ?? 0}px;\n      --table-header-cell-padding-right: ${TableConsts.consts[$size].headerCell.padding.right ?? 0}px;\n      --table-header-cell-gap: ${TableConsts.consts[$size].headerCell.gap}px;\n      --table-cell-height: ${TableConsts.consts[$size].cell.height}px;\n      --table-cell-padding-top: ${TableConsts.consts[$size].cell.padding.top ?? 0}px;\n      --table-cell-padding-bottom: ${TableConsts.consts[$size].cell.padding.bottom ?? 0}px;\n      --table-cell-padding-left: ${TableConsts.consts[$size].cell.padding.left ?? 0}px;\n      --table-cell-padding-right: ${TableConsts.consts[$size].cell.padding.right ?? 0}px;\n      --table-cell-gap: ${TableConsts.consts[$size].cell.gap}px;\n      --table-row-group-spacing-height: ${SpacingTRHeight[$size]}px;\n\n      /* We define the typography here to avoid the need to set it in each cell; enforcing the typography sizes */\n      ${StyledTh}, ${StyledTh}:has(.${BUTTON_CLASS}) * {\n        color: ${layer[Variables.TextOnFoundationStrong]};\n        ${theme.typography('label', getLabelTypographySize($size), 'strong')};\n\n        span.${TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS} {\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n          ${theme.typography('label', getLabelTypographySize(getSmallerSize($size)))};\n        }\n      }\n\n      ${StyledTd} {\n        ${theme.typography('paragraph', getParagraphTypographySize($size))};\n      }\n\n      width: 100%;\n      min-height: var(--table-cell-height);\n      border-collapse: separate;\n      border-spacing: 0;\n      background-color: ${layer[Variables.BackgroundFoundation]};\n\n      > * > ${StyledTr} > ${StyledTh} > ${Flexbox}, > * > ${StyledTr} > ${StyledTd} > ${Flexbox} {\n        justify-content: ${$alignment};\n      }\n\n      tbody td {\n        text-align: ${$alignment};\n\n        ${$empty &&\n        css`\n          padding: unset;\n        `};\n      }\n\n      tfoot th {\n        text-align: left;\n      }\n    `;\n  },\n);\n\nexport { Table };\n"],"names":["SpacingTRHeight","Sizes","Table","styled","theme","$size","$alignment","$empty","layer","css","TableConsts.consts","StyledTh","BUTTON_CLASS","Variables","getLabelTypographySize","TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS","getSmallerSize","StyledTd","getParagraphTypographySize","StyledTr","Flexbox"],"mappings":"0gBAeMA,EAAwD,CAC5D,CAACC,EAAAA,MAAM,MAAM,EAAG,EAChB,CAACA,EAAAA,MAAM,KAAK,EAAG,EACf,CAACA,EAAAA,MAAM,MAAM,EAAG,EAChB,CAACA,EAAAA,MAAM,KAAK,EAAG,EACjB,EAEMC,EAAQC,EAAAA,OAAO,MACnB,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAQ,GAAGJ,EAAAA,MAAM,MAAM,GAAI,WAAAK,EAAY,OAAAC,KAAa,CAC5D,MAAMC,EAAQJ,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOK,EAAAA;AAAAA,oCACyBC,SAAmBL,CAAK,EAAE,WAAW,MAAM;AAAA,yCACtCK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,KAAO,CAAC;AAAA,4CAClDK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,QAAU,CAAC;AAAA,0CAC1DK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,MAAQ,CAAC;AAAA,2CACrDK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,OAAS,CAAC;AAAA,iCACjEK,SAAmBL,CAAK,EAAE,WAAW,GAAG;AAAA,6BAC5CK,SAAmBL,CAAK,EAAE,KAAK,MAAM;AAAA,kCAChCK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,KAAO,CAAC;AAAA,qCAC5CK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,QAAU,CAAC;AAAA,mCACpDK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,MAAQ,CAAC;AAAA,oCAC/CK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,OAAS,CAAC;AAAA,0BAC3DK,SAAmBL,CAAK,EAAE,KAAK,GAAG;AAAA,0CAClBL,EAAgBK,CAAK,CAAC;AAAA;AAAA;AAAA,QAGxDM,EAAAA,QAAQ,KAAKA,UAAQ,SAASC,EAAAA,YAAY;AAAA,iBACjCJ,EAAMK,YAAU,sBAAsB,CAAC;AAAA,UAC9CT,EAAM,WAAW,QAASU,EAAAA,uBAAuBT,CAAK,EAAG,QAAQ,CAAC;AAAA;AAAA,eAE7DU,yCAAuC;AAAA,mBACnCP,EAAMK,YAAU,sBAAsB,CAAC;AAAA,YAC9CT,EAAM,WAAW,QAASU,EAAAA,uBAAuBE,iBAAeX,CAAK,CAAC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,QAI5EY,UAAQ;AAAA,UACNb,EAAM,WAAW,YAAac,EAAAA,2BAA2Bb,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOhDG,EAAMK,YAAU,oBAAoB,CAAC;AAAA;AAAA,cAEjDM,UAAQ,MAAMR,EAAAA,QAAQ,MAAMS,EAAAA,OAAO,WAAWD,EAAAA,QAAQ,MAAMF,UAAQ,MAAMG,EAAAA,OAAO;AAAA,2BACpEd,CAAU;AAAA;AAAA;AAAA;AAAA,sBAIfA,CAAU;AAAA;AAAA,UAEtBC,GACFE,EAAAA;AAAAA;AAAAA,SAEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOP,CACF"}
+{"version":3,"file":"Table.styles.js","sources":["../../../../src/components/Table/Table.styles.ts"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { BUTTON_CLASS, Sizes, TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS } from 'acinguiux-ds-react-base/consts';\nimport type { PickTransient } from 'acinguiux-ds-react-base/types';\nimport { TableConsts, type TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { getLabelTypographySize, getSmallerSize } from 'acinguiux-ds-react-base/utils/sizesUtils';\n\nimport type { ITableProps } from './Table.types';\nimport { StyledTd, StyledTh, StyledTr } from './components/TableElements/TableElements';\nimport { Flexbox } from '../Flexbox/Flexbox.styles';\n\nconst SpacingTRHeight: { [key in TableTypes.Size]: number } = {\n  [Sizes.XSmall]: 4,\n  [Sizes.Small]: 6,\n  [Sizes.Medium]: 8,\n  [Sizes.Large]: 10,\n} as const;\n\nconst Table = styled.table<PickTransient<ITableProps, 'empty' | 'size' | 'alignment'>>(\n  ({ theme, $size = `${Sizes.Medium}`, $alignment, $empty }) => {\n    const layer = theme.layer({ foundation: 'surface' });\n\n    return css`\n      --table-header-cell-height: ${TableConsts.consts[$size].headerCell.height}px;\n      --table-header-cell-padding-top: ${TableConsts.consts[$size].headerCell.padding.top ?? 0}px;\n      --table-header-cell-padding-bottom: ${TableConsts.consts[$size].headerCell.padding.bottom ?? 0}px;\n      --table-header-cell-padding-left: ${TableConsts.consts[$size].headerCell.padding.left ?? 0}px;\n      --table-header-cell-padding-right: ${TableConsts.consts[$size].headerCell.padding.right ?? 0}px;\n      --table-header-cell-gap: ${TableConsts.consts[$size].headerCell.gap}px;\n      --table-cell-height: ${TableConsts.consts[$size].cell.height}px;\n      --table-cell-padding-top: ${TableConsts.consts[$size].cell.padding.top ?? 0}px;\n      --table-cell-padding-bottom: ${TableConsts.consts[$size].cell.padding.bottom ?? 0}px;\n      --table-cell-padding-left: ${TableConsts.consts[$size].cell.padding.left ?? 0}px;\n      --table-cell-padding-right: ${TableConsts.consts[$size].cell.padding.right ?? 0}px;\n      --table-cell-gap: ${TableConsts.consts[$size].cell.gap}px;\n      --table-row-group-spacing-height: ${SpacingTRHeight[$size]}px;\n\n      /* We define the typography here to avoid the need to set it in each cell; enforcing the typography sizes */\n      ${StyledTh}, ${StyledTh}:has(.${BUTTON_CLASS}) * {\n        color: ${layer[Variables.TextOnFoundationStrong]};\n        ${theme.typography('label', getLabelTypographySize($size), 'strong')};\n\n        span.${TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS} {\n          color: ${layer[Variables.TextOnFoundationSubtle]};\n          ${theme.typography('label', getLabelTypographySize(getSmallerSize($size)))};\n        }\n      }\n\n      ${StyledTd} {\n        ${theme.typography('label', getLabelTypographySize($size))};\n      }\n\n      width: 100%;\n      min-height: var(--table-cell-height);\n      border-collapse: separate;\n      border-spacing: 0;\n      background-color: ${layer[Variables.BackgroundFoundation]};\n\n      > * > ${StyledTr} > ${StyledTh} > ${Flexbox}, > * > ${StyledTr} > ${StyledTd} > ${Flexbox} {\n        justify-content: ${$alignment};\n      }\n\n      tbody td {\n        text-align: ${$alignment};\n\n        ${$empty &&\n        css`\n          padding: unset;\n        `};\n      }\n\n      tfoot th {\n        text-align: left;\n      }\n    `;\n  },\n);\n\nexport { Table };\n"],"names":["SpacingTRHeight","Sizes","Table","styled","theme","$size","$alignment","$empty","layer","css","TableConsts.consts","StyledTh","BUTTON_CLASS","Variables","getLabelTypographySize","TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS","getSmallerSize","StyledTd","StyledTr","Flexbox"],"mappings":"0gBAWMA,EAAwD,CAC5D,CAACC,EAAAA,MAAM,MAAM,EAAG,EAChB,CAACA,EAAAA,MAAM,KAAK,EAAG,EACf,CAACA,EAAAA,MAAM,MAAM,EAAG,EAChB,CAACA,EAAAA,MAAM,KAAK,EAAG,EACjB,EAEMC,EAAQC,EAAAA,OAAO,MACnB,CAAC,CAAE,MAAAC,EAAO,MAAAC,EAAQ,GAAGJ,EAAAA,MAAM,MAAM,GAAI,WAAAK,EAAY,OAAAC,KAAa,CAC5D,MAAMC,EAAQJ,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,OAAOK,EAAAA;AAAAA,oCACyBC,SAAmBL,CAAK,EAAE,WAAW,MAAM;AAAA,yCACtCK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,KAAO,CAAC;AAAA,4CAClDK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,QAAU,CAAC;AAAA,0CAC1DK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,MAAQ,CAAC;AAAA,2CACrDK,EAAAA,OAAmBL,CAAK,EAAE,WAAW,QAAQ,OAAS,CAAC;AAAA,iCACjEK,SAAmBL,CAAK,EAAE,WAAW,GAAG;AAAA,6BAC5CK,SAAmBL,CAAK,EAAE,KAAK,MAAM;AAAA,kCAChCK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,KAAO,CAAC;AAAA,qCAC5CK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,QAAU,CAAC;AAAA,mCACpDK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,MAAQ,CAAC;AAAA,oCAC/CK,EAAAA,OAAmBL,CAAK,EAAE,KAAK,QAAQ,OAAS,CAAC;AAAA,0BAC3DK,SAAmBL,CAAK,EAAE,KAAK,GAAG;AAAA,0CAClBL,EAAgBK,CAAK,CAAC;AAAA;AAAA;AAAA,QAGxDM,EAAAA,QAAQ,KAAKA,UAAQ,SAASC,EAAAA,YAAY;AAAA,iBACjCJ,EAAMK,YAAU,sBAAsB,CAAC;AAAA,UAC9CT,EAAM,WAAW,QAASU,EAAAA,uBAAuBT,CAAK,EAAG,QAAQ,CAAC;AAAA;AAAA,eAE7DU,yCAAuC;AAAA,mBACnCP,EAAMK,YAAU,sBAAsB,CAAC;AAAA,YAC9CT,EAAM,WAAW,QAASU,EAAAA,uBAAuBE,iBAAeX,CAAK,CAAC,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA,QAI5EY,UAAQ;AAAA,UACNb,EAAM,WAAW,QAASU,EAAAA,uBAAuBT,CAAK,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAOxCG,EAAMK,YAAU,oBAAoB,CAAC;AAAA;AAAA,cAEjDK,UAAQ,MAAMP,EAAAA,QAAQ,MAAMQ,EAAAA,OAAO,WAAWD,EAAAA,QAAQ,MAAMD,UAAQ,MAAME,EAAAA,OAAO;AAAA,2BACpEb,CAAU;AAAA;AAAA;AAAA;AAAA,sBAIfA,CAAU;AAAA;AAAA,UAEtBC,GACFE,EAAAA;AAAAA;AAAAA,SAEC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOP,CACF"}

package/build/cjs/components/Table/components/BaseTable/BaseTable.js

@@ -1,2 +1,2 @@
-"use strict";const c=require("react/jsx-runtime"),C=require("react"),y=require("@tanstack/react-table"),T=require("../../../../react-base/src/consts/index.js"),V=require("../../Table.js"),o=require("../TableElements/ColumnVisibilityFilters.js"),A=require("./TableHeader.js"),E=require("./TableBody.js"),_=require("./TableFooter.js"),v=require("../TableElements/TableWrapper.js"),$=require("../../../Pictogram/components/BarChartTypeColourTint.js"),K=require("./BaseTablePagination.js"),L=require("../../features/sized.js"),N=require("../../consts/drag.js"),i=require("../../utils/isDraggable.js"),G=require("../../../../react-base/src/consts/classes.js"),I=[],J=({data:m=I,columns:S,tableOptions:r,emptyStateProps:H,size:R=T.Sizes.Medium,...q})=>{const[x,j]=C.useState(()=>R),[F,k]=C.useState(()=>{var d;return((d=r==null?void 0:r.state)==null?void 0:d.columnOrder)??S.map(g=>g.id)}),{useDraggable:n=N.NO_DRAG,...w}=q,M=C.useCallback(d=>{var g;k(d),(g=r==null?void 0:r.onColumnOrderChange)==null||g.call(r,d)},[r]),W=C.useCallback(d=>{var g;j(d),(g=r==null?void 0:r.onSizeChange)==null||g.call(r,d)},[r]),u=y.useReactTable({_features:[L.SizedFeature],data:m,columns:S,getCoreRowModel:y.getCoreRowModel(),defaultColumn:{minSize:50},enableRowSelection:!1,...r,state:{...r==null?void 0:r.state,columnOrder:F,size:x},onColumnOrderChange:M,onSizeChange:W}),e={noHeader:r==null?void 0:r.noHeader,noFooter:r==null?void 0:r.noFooter,maxWidth:r==null?void 0:r.maxWidth,maxHeight:r==null?void 0:r.maxHeight,columnSized:(r==null?void 0:r.columnSized)||(r==null?void 0:r.useColumnsSizing),stickyHeader:r==null?void 0:r.stickyHeader,stickyFooter:r==null?void 0:r.stickyFooter,numericTypes:r==null?void 0:r.numericTypes,highlight:r==null?void 0:r.highlight,paginationKind:r==null?void 0:r.paginationKind,pinningOptions:r==null?void 0:r.pinningOptions,disableRowHover:r==null?void 0:r.disableRowHover,columnPinning:r==null?void 0:r.enableColumnPinning,pagination:!!(r!=null&&r.getPaginationRowModel),columnResizing:r==null?void 0:r.enableColumnResizing,columnVisibility:!!(r!=null&&r.onColumnVisibilityChange),columnResizingMinWidth:r==null?void 0:r.columnResizingMinWidth,sorting:(r==null?void 0:r.enableSorting)&&!!(r!=null&&r.getSortedRowModel)},h=n(u,m),P=H??{pictogram:c.jsx($,{}),title:"Title here",description:"This should be a clear and concise description."},B=C.useMemo(()=>{const d=u.getFlatHeaders(),g={};return d.forEach(z=>{g[`--header-${z.id}-size`]=z.getSize(),g[`--col-${z.column.id}-size`]=z.column.getSize()}),g},[u.getState().columnSizingInfo,u.getState().columnSizing]),D={...e.maxHeight&&{maxHeight:e.maxHeight},...e.maxWidth&&{maxWidth:e.maxWidth},...(e.stickyHeader||e.stickyFooter)&&{stickyRows:e.stickyHeader||e.stickyFooter}},f=u.getRowCount()===0;return c.jsxs(c.Fragment,{children:[!!(e!=null&&e.columnVisibility)&&c.jsx(o.ColumnVisibilityFilters,{table:u}),c.jsxs(v.TableWrapper,{className:G.BASE_TABLE_CLASS,...D,children:[c.jsx(h.Components.Provider,{children:c.jsxs(V,{...w,empty:f,size:x,style:{width:r!=null&&r.columnSized?u.getTotalSize():"100%",...B},children:[c.jsx(A,{...i.isColumnDraggable(h.draggable)?h.Components:{},table:u,options:e}),c.jsx(E,{table:u,options:e,...i.isRowDraggable(h.draggable)?h.Components:{},emptyStateProps:P}),c.jsx(_,{table:u,options:e})]})}),c.jsx(K,{table:u,options:e})]})]})},Q=({size:m=T.Sizes.Medium,...S})=>c.jsx(J,{size:m,...S},`base-table-${m}`);module.exports=Q;
+"use strict";const n=require("react/jsx-runtime"),a=require("react"),d=require("@tanstack/react-table"),h=require("../../../../react-base/src/consts/index.js"),b=require("../../Table.js"),M=require("../TableElements/ColumnVisibilityFilters.js"),W=require("./TableHeader.js"),B=require("./TableBody.js"),D=require("./TableFooter.js"),f=require("../TableElements/TableWrapper.js"),V=require("../../../Pictogram/components/BarChartTypeColourTint.js"),p=require("./BaseTablePagination.js"),A=require("../../features/sized.js"),E=require("../../consts/drag.js"),m=require("../../utils/isDraggable.js"),_=require("../../../../react-base/src/consts/classes.js"),v=[],$=({data:s=v,columns:c,tableOptions:e,emptyStateProps:C,size:S=h.Sizes.Medium,...z})=>{const[g,x]=a.useState(()=>S),[y,T]=a.useState(()=>e?.state?.columnOrder??c.map(r=>r.id)),{useDraggable:H=E.NO_DRAG,...R}=z,q=a.useCallback(r=>{T(r),e?.onColumnOrderChange?.(r)},[e]),k=a.useCallback(r=>{x(r),e?.onSizeChange?.(r)},[e]),o=d.useReactTable({_features:[A.SizedFeature],data:s,columns:c,getCoreRowModel:d.getCoreRowModel(),defaultColumn:{minSize:50},enableRowSelection:!1,...e,state:{...e?.state,columnOrder:y,size:g},onColumnOrderChange:q,onSizeChange:k}),i={noHeader:e?.noHeader,noFooter:e?.noFooter,maxWidth:e?.maxWidth,maxHeight:e?.maxHeight,columnSized:e?.columnSized||e?.useColumnsSizing,stickyHeader:e?.stickyHeader,stickyFooter:e?.stickyFooter,stickyPagination:e?.stickyPagination,numericTypes:e?.numericTypes,highlight:e?.highlight,paginationKind:e?.paginationKind,pinningOptions:e?.pinningOptions,disableRowHover:e?.disableRowHover,columnPinning:e?.enableColumnPinning,pagination:!!e?.getPaginationRowModel,columnResizing:e?.enableColumnResizing,columnVisibility:!!e?.onColumnVisibilityChange,columnResizingMinWidth:e?.columnResizingMinWidth,sorting:e?.enableSorting&&!!e?.getSortedRowModel},t=H(o,s),j=C??{pictogram:n.jsx(V,{}),title:"Title here",description:"This should be a clear and concise description."},F=a.useMemo(()=>{const r=o.getFlatHeaders(),u={};return r.forEach(l=>{u[`--header-${l.id}-size`]=l.getSize(),u[`--col-${l.column.id}-size`]=l.column.getSize()}),u},[o.getState().columnSizingInfo,o.getState().columnSizing]),w={...i.maxHeight&&{maxHeight:i.maxHeight},...i.maxWidth&&{maxWidth:i.maxWidth},...(i.stickyHeader||i.stickyFooter)&&{stickyRows:i.stickyHeader||i.stickyFooter}},P=o.getRowCount()===0;return n.jsxs(n.Fragment,{children:[!!i?.columnVisibility&&n.jsx(M.ColumnVisibilityFilters,{table:o}),n.jsxs(f.TableWrapper,{className:_.BASE_TABLE_CLASS,...w,children:[n.jsx(t.Components.Provider,{children:n.jsxs(b,{...R,empty:P,size:g,style:e?.columnSized?{width:o.getTotalSize(),...F}:{width:"100%"},children:[n.jsx(W,{...m.isColumnDraggable(t.draggable)?t.Components:{},table:o,options:i}),n.jsx(B,{table:o,options:i,...m.isRowDraggable(t.draggable)?t.Components:{},emptyStateProps:j}),n.jsx(D,{table:o,options:i})]})}),n.jsx(p,{table:o,options:i})]})]})},K=({size:s=h.Sizes.Medium,...c})=>n.jsx($,{size:s,...c},`base-table-${s}`);module.exports=K;
 //# sourceMappingURL=BaseTable.js.map

package/build/cjs/components/Table/components/BaseTable/BaseTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTable.js","sources":["../../../../../../src/components/Table/components/BaseTable/BaseTable.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nimport { useReactTable, getCoreRowModel, RowData, ColumnOrderState, Updater } from '@tanstack/react-table';\nimport { BASE_TABLE_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { TableTypes } from 'acinguiux-ds-react-base/components/Table';\n\nimport Table from '../../Table';\nimport type { IBaseTableProps, IInternalBaseTableProps } from './BaseTable.types';\nimport { ColumnVisibilityFilters } from '../TableElements/ColumnVisibilityFilters';\nimport TableHeader from './TableHeader';\nimport TableBody from './TableBody';\nimport TableFooter from './TableFooter';\nimport { TableWrapper } from '../TableElements/TableWrapper';\nimport BarChartTypeColourTint from '../../../Pictogram/components/BarChartTypeColourTint';\nimport BaseTablePagination from './BaseTablePagination';\nimport { SizedFeature } from '../../features/sized';\nimport { NO_DRAG } from '../../consts/drag';\nimport { isColumnDraggable, isRowDraggable } from '../../utils/isDraggable';\n\nconst defaultData = [] as never[];\n\nconst BaseTableComponent = <TData extends RowData, TValue = unknown>({\n  data = defaultData,\n  columns,\n  tableOptions,\n  emptyStateProps,\n  size = Sizes.Medium,\n  ...props\n}: IBaseTableProps<TData, TValue>) => {\n  const [tableSize, setTableSize] = useState<TableTypes.Size>(() => size);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    () => tableOptions?.state?.columnOrder ?? columns.map((col) => col.id!),\n  );\n  const { useDraggable = NO_DRAG, ...rest } = props as IInternalBaseTableProps<TData, TValue>;\n\n  const onColumnOrderChangeHandler = useCallback(\n    (newColumnOrder: Updater<ColumnOrderState>) => {\n      setColumnOrder(newColumnOrder);\n      tableOptions?.onColumnOrderChange?.(newColumnOrder);\n    },\n    [tableOptions],\n  );\n\n  const onSizeChangeHandler = useCallback(\n    (newSize: Updater<TableTypes.Size>) => {\n      setTableSize(newSize);\n      tableOptions?.onSizeChange?.(newSize);\n    },\n    [tableOptions],\n  );\n\n  const table = useReactTable({\n    _features: [SizedFeature],\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    defaultColumn: {\n      minSize: 50,\n    },\n    // tanstack enables rows selection by default\n    enableRowSelection: false,\n    ...tableOptions,\n    state: {\n      ...tableOptions?.state,\n      columnOrder,\n      size: tableSize,\n    },\n    onColumnOrderChange: onColumnOrderChangeHandler,\n    onSizeChange: onSizeChangeHandler,\n  });\n\n  const options = {\n    noHeader: tableOptions?.noHeader,\n    noFooter: tableOptions?.noFooter,\n    maxWidth: tableOptions?.maxWidth,\n    maxHeight: tableOptions?.maxHeight,\n    columnSized: tableOptions?.columnSized || tableOptions?.useColumnsSizing,\n    stickyHeader: tableOptions?.stickyHeader,\n    stickyFooter: tableOptions?.stickyFooter,\n    numericTypes: tableOptions?.numericTypes,\n    highlight: tableOptions?.highlight,\n    paginationKind: tableOptions?.paginationKind,\n    pinningOptions: tableOptions?.pinningOptions,\n    disableRowHover: tableOptions?.disableRowHover,\n    columnPinning: tableOptions?.enableColumnPinning,\n    pagination: !!tableOptions?.getPaginationRowModel,\n    columnResizing: tableOptions?.enableColumnResizing,\n    columnVisibility: !!tableOptions?.onColumnVisibilityChange,\n    columnResizingMinWidth: tableOptions?.columnResizingMinWidth,\n    sorting: tableOptions?.enableSorting && !!tableOptions?.getSortedRowModel,\n  };\n\n  const DraggableCtx = useDraggable(table, data);\n\n  const emptyStateProperties = emptyStateProps ?? {\n    pictogram: <BarChartTypeColourTint />,\n    title: 'Title here',\n    description: 'This should be a clear and concise description.',\n  };\n\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders();\n    const colSizes: { [key: string]: number } = {};\n    headers.forEach((header) => {\n      colSizes[`--header-${header.id}-size`] = header.getSize();\n      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n    });\n\n    return colSizes;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n  const wrapperProps = {\n    ...(options.maxHeight && { maxHeight: options.maxHeight }),\n    ...(options.maxWidth && { maxWidth: options.maxWidth }),\n    ...((options.stickyHeader || options.stickyFooter) && {\n      stickyRows: options.stickyHeader || options.stickyFooter,\n    }),\n  };\n\n  const isEmpty = table.getRowCount() === 0;\n\n  return (\n    <>\n      {!!options?.columnVisibility && <ColumnVisibilityFilters table={table} />}\n      <TableWrapper className={BASE_TABLE_CLASS} {...wrapperProps}>\n        <DraggableCtx.Components.Provider>\n          <Table\n            {...rest}\n            empty={isEmpty}\n            size={tableSize}\n            style={{ width: tableOptions?.columnSized ? table.getTotalSize() : '100%', ...columnSizeVars }}\n          >\n            <TableHeader\n              {...(isColumnDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              table={table}\n              options={options}\n            />\n            <TableBody\n              table={table}\n              options={options}\n              {...(isRowDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              emptyStateProps={emptyStateProperties}\n            />\n            <TableFooter table={table} options={options} />\n          </Table>\n        </DraggableCtx.Components.Provider>\n        <BaseTablePagination table={table} options={options} />\n      </TableWrapper>\n    </>\n  );\n};\n\nconst BaseTable = <TData extends RowData, TValue = unknown>({\n  size = Sizes.Medium,\n  ...props\n}: IBaseTableProps<TData, TValue>) => <BaseTableComponent key={`base-table-${size}`} size={size} {...props} />;\n\nexport default BaseTable;\n"],"names":["defaultData","BaseTableComponent","data","columns","tableOptions","emptyStateProps","size","Sizes","props","tableSize","setTableSize","useState","columnOrder","setColumnOrder","_a","col","useDraggable","NO_DRAG","rest","onColumnOrderChangeHandler","useCallback","newColumnOrder","onSizeChangeHandler","newSize","table","useReactTable","SizedFeature","getCoreRowModel","options","DraggableCtx","emptyStateProperties","BarChartTypeColourTint","columnSizeVars","useMemo","headers","colSizes","header","wrapperProps","isEmpty","jsxs","Fragment","jsx","ColumnVisibilityFilters","TableWrapper","BASE_TABLE_CLASS","Table","TableHeader","isColumnDraggable","TableBody","isRowDraggable","TableFooter","BaseTablePagination","BaseTable"],"mappings":"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"}
+{"version":3,"file":"BaseTable.js","sources":["../../../../../../src/components/Table/components/BaseTable/BaseTable.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nimport { useReactTable, getCoreRowModel, RowData, ColumnOrderState, Updater } from '@tanstack/react-table';\nimport { BASE_TABLE_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { TableTypes } from 'acinguiux-ds-react-base/components/Table';\n\nimport Table from '../../Table';\nimport type { IBaseTableProps, IInternalBaseTableProps } from './BaseTable.types';\nimport { ColumnVisibilityFilters } from '../TableElements/ColumnVisibilityFilters';\nimport TableHeader from './TableHeader';\nimport TableBody from './TableBody';\nimport TableFooter from './TableFooter';\nimport { TableWrapper } from '../TableElements/TableWrapper';\nimport BarChartTypeColourTint from '../../../Pictogram/components/BarChartTypeColourTint';\nimport BaseTablePagination from './BaseTablePagination';\nimport { SizedFeature } from '../../features/sized';\nimport { NO_DRAG } from '../../consts/drag';\nimport { isColumnDraggable, isRowDraggable } from '../../utils/isDraggable';\n\nconst defaultData = [] as never[];\n\nconst BaseTableComponent = <TData extends RowData, TValue = unknown>({\n  data = defaultData,\n  columns,\n  tableOptions,\n  emptyStateProps,\n  size = Sizes.Medium,\n  ...props\n}: IBaseTableProps<TData, TValue>) => {\n  const [tableSize, setTableSize] = useState<TableTypes.Size>(() => size);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    () => tableOptions?.state?.columnOrder ?? columns.map((col) => col.id!),\n  );\n  const { useDraggable = NO_DRAG, ...rest } = props as IInternalBaseTableProps<TData, TValue>;\n\n  const onColumnOrderChangeHandler = useCallback(\n    (newColumnOrder: Updater<ColumnOrderState>) => {\n      setColumnOrder(newColumnOrder);\n      tableOptions?.onColumnOrderChange?.(newColumnOrder);\n    },\n    [tableOptions],\n  );\n\n  const onSizeChangeHandler = useCallback(\n    (newSize: Updater<TableTypes.Size>) => {\n      setTableSize(newSize);\n      tableOptions?.onSizeChange?.(newSize);\n    },\n    [tableOptions],\n  );\n\n  const table = useReactTable({\n    _features: [SizedFeature],\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    defaultColumn: {\n      minSize: 50,\n    },\n    // tanstack enables rows selection by default\n    enableRowSelection: false,\n    ...tableOptions,\n    state: {\n      ...tableOptions?.state,\n      columnOrder,\n      size: tableSize,\n    },\n    onColumnOrderChange: onColumnOrderChangeHandler,\n    onSizeChange: onSizeChangeHandler,\n  });\n\n  const options = {\n    noHeader: tableOptions?.noHeader,\n    noFooter: tableOptions?.noFooter,\n    maxWidth: tableOptions?.maxWidth,\n    maxHeight: tableOptions?.maxHeight,\n    columnSized: tableOptions?.columnSized || tableOptions?.useColumnsSizing,\n    stickyHeader: tableOptions?.stickyHeader,\n    stickyFooter: tableOptions?.stickyFooter,\n    stickyPagination: tableOptions?.stickyPagination,\n    numericTypes: tableOptions?.numericTypes,\n    highlight: tableOptions?.highlight,\n    paginationKind: tableOptions?.paginationKind,\n    pinningOptions: tableOptions?.pinningOptions,\n    disableRowHover: tableOptions?.disableRowHover,\n    columnPinning: tableOptions?.enableColumnPinning,\n    pagination: !!tableOptions?.getPaginationRowModel,\n    columnResizing: tableOptions?.enableColumnResizing,\n    columnVisibility: !!tableOptions?.onColumnVisibilityChange,\n    columnResizingMinWidth: tableOptions?.columnResizingMinWidth,\n    sorting: tableOptions?.enableSorting && !!tableOptions?.getSortedRowModel,\n  };\n\n  const DraggableCtx = useDraggable(table, data);\n\n  const emptyStateProperties = emptyStateProps ?? {\n    pictogram: <BarChartTypeColourTint />,\n    title: 'Title here',\n    description: 'This should be a clear and concise description.',\n  };\n\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders();\n    const colSizes: { [key: string]: number } = {};\n    headers.forEach((header) => {\n      colSizes[`--header-${header.id}-size`] = header.getSize();\n      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n    });\n\n    return colSizes;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n  const wrapperProps = {\n    ...(options.maxHeight && { maxHeight: options.maxHeight }),\n    ...(options.maxWidth && { maxWidth: options.maxWidth }),\n    ...((options.stickyHeader || options.stickyFooter) && {\n      stickyRows: options.stickyHeader || options.stickyFooter,\n    }),\n  };\n\n  const isEmpty = table.getRowCount() === 0;\n\n  return (\n    <>\n      {!!options?.columnVisibility && <ColumnVisibilityFilters table={table} />}\n      <TableWrapper className={BASE_TABLE_CLASS} {...wrapperProps}>\n        <DraggableCtx.Components.Provider>\n          <Table\n            {...rest}\n            empty={isEmpty}\n            size={tableSize}\n            style={tableOptions?.columnSized ? { width: table.getTotalSize(), ...columnSizeVars } : { width: '100%' }}\n          >\n            <TableHeader\n              {...(isColumnDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              table={table}\n              options={options}\n            />\n            <TableBody\n              table={table}\n              options={options}\n              {...(isRowDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              emptyStateProps={emptyStateProperties}\n            />\n            <TableFooter table={table} options={options} />\n          </Table>\n        </DraggableCtx.Components.Provider>\n        <BaseTablePagination table={table} options={options} />\n      </TableWrapper>\n    </>\n  );\n};\n\nconst BaseTable = <TData extends RowData, TValue = unknown>({\n  size = Sizes.Medium,\n  ...props\n}: IBaseTableProps<TData, TValue>) => <BaseTableComponent key={`base-table-${size}`} size={size} {...props} />;\n\nexport default BaseTable;\n"],"names":["defaultData","BaseTableComponent","data","columns","tableOptions","emptyStateProps","size","Sizes","props","tableSize","setTableSize","useState","columnOrder","setColumnOrder","col","useDraggable","NO_DRAG","rest","onColumnOrderChangeHandler","useCallback","newColumnOrder","onSizeChangeHandler","newSize","table","useReactTable","SizedFeature","getCoreRowModel","options","DraggableCtx","emptyStateProperties","BarChartTypeColourTint","columnSizeVars","useMemo","headers","colSizes","header","wrapperProps","isEmpty","jsxs","Fragment","jsx","ColumnVisibilityFilters","TableWrapper","BASE_TABLE_CLASS","Table","TableHeader","isColumnDraggable","TableBody","isRowDraggable","TableFooter","BaseTablePagination","BaseTable"],"mappings":"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"}

package/build/cjs/components/Table/components/BaseTable/BaseTablePagination.js

@@ -1,17 +1,18 @@
-"use strict";const o=require("react/jsx-runtime"),g=require("../../../../react-base/src/consts/classes.js"),i=require("../../../../react-base/src/components/Table/Table.consts.js"),r=require("styled-components"),a=require("../../../../react-base/src/theme/types/layer.js"),u=require("../../../Pagination/DefaultPagination.js"),p=require("../../../Pagination/SimplePagination.js"),c=10,d=20,l=50,P=[c,d,l],S=t=>({size:t.getState().size,current:t.getState().pagination.pageIndex+1,total:Math.ceil(t.getRowCount()/t.getState().pagination.pageSize),quickJumper:!1,startEndButtons:!0,onPageChange:n=>t.setPageIndex(n-1)}),I=t=>({size:t.getState().size,current:t.getState().pagination.pageIndex+1,totalItems:t.getRowCount(),quickJumper:!1,startEndButtons:!0,onPageChange:n=>t.setPageIndex(n-1),pageSize:t.getState().pagination.pageSize,onPageSizeChange:n=>t.setPagination(e=>({...e,pageSize:n})),showTotalItems:!0,moreButton:!0,allowedPageSizes:P}),A=r.styled.div(({size:t,theme:n})=>{const e=n.layer({foundation:"surface"});return`
-      position: sticky;
+"use strict";const a=require("react/jsx-runtime"),g=require("../../../../react-base/src/consts/classes.js"),o=require("../../../../react-base/src/components/Table/Table.consts.js"),r=require("styled-components"),s=require("../../../../react-base/src/theme/types/layer.js"),u=require("../../../Pagination/DefaultPagination.js"),c=require("../../../Pagination/SimplePagination.js"),p=10,d=20,l=50,P=[p,d,l],S=t=>({size:t.getState().size,current:t.getState().pagination.pageIndex+1,total:Math.ceil(t.getRowCount()/t.getState().pagination.pageSize),quickJumper:!1,startEndButtons:!0,onPageChange:n=>t.setPageIndex(n-1)}),I=t=>({size:t.getState().size,current:t.getState().pagination.pageIndex+1,totalItems:t.getRowCount(),quickJumper:!1,startEndButtons:!0,onPageChange:n=>t.setPageIndex(n-1),pageSize:t.getState().pagination.pageSize,onPageSizeChange:n=>t.setPagination(e=>({...e,pageSize:n})),showTotalItems:!0,moreButton:!0,allowedPageSizes:P}),A=r.styled.div(({$size:t,$sticky:n,theme:e})=>{const i=e.layer({foundation:"surface"});return`
+      position: ${n?"sticky":"relative"};
       z-index: 2;
       bottom: 0;
+      margin-top: auto;
       margin-bottom: 0;
       left: 0;
       right: 0;
       height: fit-content;
-      padding: ${i.consts[t].paginationCell.padding.top??0}px ${i.consts[t].paginationCell.padding.left??0}px ${i.consts[t].paginationCell.padding.bottom??0}px ${i.consts[t].paginationCell.padding.right??0}px;
-      background: ${e[a.Variables.BackgroundFoundation]};
-      border-top: 1px solid ${e[a.Variables.BorderOnFoundationSubtle]};
+      padding: ${o.consts[t].paginationCell.padding.top??0}px ${o.consts[t].paginationCell.padding.left??0}px ${o.consts[t].paginationCell.padding.bottom??0}px ${o.consts[t].paginationCell.padding.right??0}px;
+      background: ${i[s.Variables.BackgroundFoundation]};
+      border-top: 1px solid ${i[s.Variables.BorderOnFoundationSubtle]};
       > .${g.PAGINATION_CLASS} {
         margin: 0;
         width: 100%;
       }
-    `}),m={},_=({table:t,options:n=m})=>{const{paginationKind:e="default",pagination:s}=n;return s&&t.getIsSomeColumnsVisible()?o.jsx(A,{size:t.getState().size,children:e==="simple"?o.jsx(p,{...S(t)}):o.jsx(u,{...I(t)})}):null};module.exports=_;
+    `}),m={},_=({table:t,options:n=m})=>{const{paginationKind:e="default",pagination:i}=n;return i&&t.getIsSomeColumnsVisible()?a.jsx(A,{$size:t.getState().size,$sticky:!!n.stickyPagination,children:e==="simple"?a.jsx(c,{...S(t)}):a.jsx(u,{...I(t)})}):null};module.exports=_;
 //# sourceMappingURL=BaseTablePagination.js.map

package/build/cjs/components/Table/components/BaseTable/BaseTablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTablePagination.js","sources":["../../../../../../src/components/Table/components/BaseTable/BaseTablePagination.tsx"],"sourcesContent":["import { PAGINATION_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { TableConsts, type TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport { styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { RowData, Table } from '@tanstack/react-table';\n\nimport type { IDefaultPaginationProps, ISimplePaginationProps } from '../../../Pagination/Pagination.types';\nimport type { IBaseTablePaginationProps } from './BaseTable.types';\nimport DefaultPagination from '../../../Pagination/DefaultPagination';\nimport SimplePagination from '../../../Pagination/SimplePagination';\n\nconst DEFAULT_PAGINATION_PAGE_SIZE_SMALL = 10;\nconst DEFAULT_PAGINATION_PAGE_SIZE_MEDIUM = 20;\nconst DEFAULT_PAGINATION_PAGE_SIZE_LARGE = 50;\nconst DEFAULT_PAGINATION_PAGE_SIZES = [\n  DEFAULT_PAGINATION_PAGE_SIZE_SMALL,\n  DEFAULT_PAGINATION_PAGE_SIZE_MEDIUM,\n  DEFAULT_PAGINATION_PAGE_SIZE_LARGE,\n];\n\nconst simplePaginationProps = <TData extends RowData>(table: Table<TData>): ISimplePaginationProps => ({\n  size: table.getState().size,\n  current: table.getState().pagination.pageIndex + 1,\n  total: Math.ceil(table.getRowCount() / table.getState().pagination.pageSize),\n  quickJumper: false,\n  startEndButtons: true,\n  onPageChange: (current: number) => table.setPageIndex(current - 1),\n});\n\nconst defaultPaginationProps = <TData extends RowData>(table: Table<TData>): IDefaultPaginationProps => ({\n  size: table.getState().size,\n  current: table.getState().pagination.pageIndex + 1,\n  totalItems: table.getRowCount(),\n  quickJumper: false,\n  startEndButtons: true,\n  onPageChange: (current: number) => table.setPageIndex(current - 1),\n  pageSize: table.getState().pagination.pageSize,\n  onPageSizeChange: (pageSize) => table.setPagination((state) => ({ ...state, pageSize })),\n  showTotalItems: true,\n  moreButton: true,\n  allowedPageSizes: DEFAULT_PAGINATION_PAGE_SIZES,\n});\n\nconst PaginationContainer = styled.div<{ size: TableTypes.Size }>(({ size, theme }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return `\n      position: sticky;\n      z-index: 2;\n      bottom: 0;\n      margin-bottom: 0;\n      left: 0;\n      right: 0;\n      height: fit-content;\n      padding: ${TableConsts.consts[size].paginationCell.padding.top ?? 0}px ${TableConsts.consts[size].paginationCell.padding.left ?? 0}px ${TableConsts.consts[size].paginationCell.padding.bottom ?? 0}px ${TableConsts.consts[size].paginationCell.padding.right ?? 0}px;\n      background: ${layer[Variables.BackgroundFoundation]};\n      border-top: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n      > .${PAGINATION_CLASS} {\n        margin: 0;\n        width: 100%;\n      }\n    `;\n});\n\nconst defaultOptions = {};\n\nconst BaseTablePagination = <TData extends RowData>({\n  table,\n  options = defaultOptions,\n}: IBaseTablePaginationProps<TData>) => {\n  const { paginationKind = 'default', pagination } = options;\n  const withPagination = pagination && table.getIsSomeColumnsVisible();\n\n  if (!withPagination) {\n    return null;\n  }\n\n  return (\n    <PaginationContainer size={table.getState().size}>\n      {paginationKind === 'simple' ? (\n        <SimplePagination {...simplePaginationProps(table)} />\n      ) : (\n        <DefaultPagination {...defaultPaginationProps(table)} />\n      )}\n    </PaginationContainer>\n  );\n};\n\nexport default BaseTablePagination;\n"],"names":["DEFAULT_PAGINATION_PAGE_SIZE_SMALL","DEFAULT_PAGINATION_PAGE_SIZE_MEDIUM","DEFAULT_PAGINATION_PAGE_SIZE_LARGE","DEFAULT_PAGINATION_PAGE_SIZES","simplePaginationProps","table","current","defaultPaginationProps","pageSize","state","PaginationContainer","styled","size","theme","layer","TableConsts.consts","Variables","PAGINATION_CLASS","defaultOptions","BaseTablePagination","options","paginationKind","pagination","jsx","SimplePagination","DefaultPagination"],"mappings":"4XAWMA,EAAqC,GACrCC,EAAsC,GACtCC,EAAqC,GACrCC,EAAgC,CACpCH,EACAC,EACAC,CACF,EAEME,EAAgDC,IAAiD,CACrG,KAAMA,EAAM,SAAA,EAAW,KACvB,QAASA,EAAM,SAAA,EAAW,WAAW,UAAY,EACjD,MAAO,KAAK,KAAKA,EAAM,cAAgBA,EAAM,SAAA,EAAW,WAAW,QAAQ,EAC3E,YAAa,GACb,gBAAiB,GACjB,aAAeC,GAAoBD,EAAM,aAAaC,EAAU,CAAC,CACnE,GAEMC,EAAiDF,IAAkD,CACvG,KAAMA,EAAM,SAAA,EAAW,KACvB,QAASA,EAAM,SAAA,EAAW,WAAW,UAAY,EACjD,WAAYA,EAAM,YAAA,EAClB,YAAa,GACb,gBAAiB,GACjB,aAAeC,GAAoBD,EAAM,aAAaC,EAAU,CAAC,EACjE,SAAUD,EAAM,SAAA,EAAW,WAAW,SACtC,iBAAmBG,GAAaH,EAAM,cAAeI,IAAW,CAAE,GAAGA,EAAO,SAAAD,CAAA,EAAW,EACvF,eAAgB,GAChB,WAAY,GACZ,iBAAkBL,CACpB,GAEMO,EAAsBC,EAAAA,OAAO,IAA+B,CAAC,CAAE,KAAAC,EAAM,MAAAC,KAAY,CACrF,MAAMC,EAAQD,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQQE,EAAAA,OAAmBH,CAAI,EAAE,eAAe,QAAQ,KAAO,CAAC,MAAMG,EAAAA,OAAmBH,CAAI,EAAE,eAAe,QAAQ,MAAQ,CAAC,MAAMG,EAAAA,OAAmBH,CAAI,EAAE,eAAe,QAAQ,QAAU,CAAC,MAAMG,EAAAA,OAAmBH,CAAI,EAAE,eAAe,QAAQ,OAAS,CAAC;AAAA,oBACrPE,EAAME,YAAU,oBAAoB,CAAC;AAAA,8BAC3BF,EAAME,YAAU,wBAAwB,CAAC;AAAA,WAC5DC,kBAAgB;AAAA;AAAA;AAAA;AAAA,KAK3B,CAAC,EAEKC,EAAiB,CAAA,EAEjBC,EAAsB,CAAwB,CAClD,MAAAd,EACA,QAAAe,EAAUF,CACZ,IAAwC,CACtC,KAAM,CAAE,eAAAG,EAAiB,UAAW,WAAAC,CAAA,EAAeF,EAGnD,OAFuBE,GAAcjB,EAAM,wBAAA,EAOzCkB,MAACb,GAAoB,KAAML,EAAM,WAAW,KACzC,SAAAgB,IAAmB,SAClBE,EAAAA,IAACC,EAAA,CAAkB,GAAGpB,EAAsBC,CAAK,EAAG,EAEpDkB,EAAAA,IAACE,GAAmB,GAAGlB,EAAuBF,CAAK,CAAA,CAAG,CAAA,CAE1D,EAVO,IAYX"}
+{"version":3,"file":"BaseTablePagination.js","sources":["../../../../../../src/components/Table/components/BaseTable/BaseTablePagination.tsx"],"sourcesContent":["import { PAGINATION_CLASS } from 'acinguiux-ds-react-base/consts';\nimport { TableConsts, type TableTypes } from 'acinguiux-ds-react-base/components/Table';\nimport { styled } from 'styled-components';\nimport { Variables } from 'acinguiux-ds-react-base/theme';\nimport { RowData, Table } from '@tanstack/react-table';\n\nimport type { IDefaultPaginationProps, ISimplePaginationProps } from '../../../Pagination/Pagination.types';\nimport type { IBaseTablePaginationProps } from './BaseTable.types';\nimport DefaultPagination from '../../../Pagination/DefaultPagination';\nimport SimplePagination from '../../../Pagination/SimplePagination';\n\nconst DEFAULT_PAGINATION_PAGE_SIZE_SMALL = 10;\nconst DEFAULT_PAGINATION_PAGE_SIZE_MEDIUM = 20;\nconst DEFAULT_PAGINATION_PAGE_SIZE_LARGE = 50;\nconst DEFAULT_PAGINATION_PAGE_SIZES = [\n  DEFAULT_PAGINATION_PAGE_SIZE_SMALL,\n  DEFAULT_PAGINATION_PAGE_SIZE_MEDIUM,\n  DEFAULT_PAGINATION_PAGE_SIZE_LARGE,\n];\n\nconst simplePaginationProps = <TData extends RowData>(table: Table<TData>): ISimplePaginationProps => ({\n  size: table.getState().size,\n  current: table.getState().pagination.pageIndex + 1,\n  total: Math.ceil(table.getRowCount() / table.getState().pagination.pageSize),\n  quickJumper: false,\n  startEndButtons: true,\n  onPageChange: (current: number) => table.setPageIndex(current - 1),\n});\n\nconst defaultPaginationProps = <TData extends RowData>(table: Table<TData>): IDefaultPaginationProps => ({\n  size: table.getState().size,\n  current: table.getState().pagination.pageIndex + 1,\n  totalItems: table.getRowCount(),\n  quickJumper: false,\n  startEndButtons: true,\n  onPageChange: (current: number) => table.setPageIndex(current - 1),\n  pageSize: table.getState().pagination.pageSize,\n  onPageSizeChange: (pageSize) => table.setPagination((state) => ({ ...state, pageSize })),\n  showTotalItems: true,\n  moreButton: true,\n  allowedPageSizes: DEFAULT_PAGINATION_PAGE_SIZES,\n});\n\nconst PaginationContainer = styled.div<{ $size: TableTypes.Size; $sticky: boolean }>(({ $size, $sticky, theme }) => {\n  const layer = theme.layer({ foundation: 'surface' });\n\n  return `\n      position: ${$sticky ? 'sticky' : 'relative'};\n      z-index: 2;\n      bottom: 0;\n      margin-top: auto;\n      margin-bottom: 0;\n      left: 0;\n      right: 0;\n      height: fit-content;\n      padding: ${TableConsts.consts[$size].paginationCell.padding.top ?? 0}px ${TableConsts.consts[$size].paginationCell.padding.left ?? 0}px ${TableConsts.consts[$size].paginationCell.padding.bottom ?? 0}px ${TableConsts.consts[$size].paginationCell.padding.right ?? 0}px;\n      background: ${layer[Variables.BackgroundFoundation]};\n      border-top: 1px solid ${layer[Variables.BorderOnFoundationSubtle]};\n      > .${PAGINATION_CLASS} {\n        margin: 0;\n        width: 100%;\n      }\n    `;\n});\n\nconst defaultOptions = {};\n\nconst BaseTablePagination = <TData extends RowData>({\n  table,\n  options = defaultOptions,\n}: IBaseTablePaginationProps<TData>) => {\n  const { paginationKind = 'default', pagination } = options;\n  const withPagination = pagination && table.getIsSomeColumnsVisible();\n\n  if (!withPagination) {\n    return null;\n  }\n\n  return (\n    <PaginationContainer $size={table.getState().size} $sticky={Boolean(options.stickyPagination)}>\n      {paginationKind === 'simple' ? (\n        <SimplePagination {...simplePaginationProps(table)} />\n      ) : (\n        <DefaultPagination {...defaultPaginationProps(table)} />\n      )}\n    </PaginationContainer>\n  );\n};\n\nexport default BaseTablePagination;\n"],"names":["DEFAULT_PAGINATION_PAGE_SIZE_SMALL","DEFAULT_PAGINATION_PAGE_SIZE_MEDIUM","DEFAULT_PAGINATION_PAGE_SIZE_LARGE","DEFAULT_PAGINATION_PAGE_SIZES","simplePaginationProps","table","current","defaultPaginationProps","pageSize","state","PaginationContainer","styled","$size","$sticky","theme","layer","TableConsts.consts","Variables","PAGINATION_CLASS","defaultOptions","BaseTablePagination","options","paginationKind","pagination","jsx","SimplePagination","DefaultPagination"],"mappings":"4XAWMA,EAAqC,GACrCC,EAAsC,GACtCC,EAAqC,GACrCC,EAAgC,CACpCH,EACAC,EACAC,CACF,EAEME,EAAgDC,IAAiD,CACrG,KAAMA,EAAM,SAAA,EAAW,KACvB,QAASA,EAAM,SAAA,EAAW,WAAW,UAAY,EACjD,MAAO,KAAK,KAAKA,EAAM,cAAgBA,EAAM,SAAA,EAAW,WAAW,QAAQ,EAC3E,YAAa,GACb,gBAAiB,GACjB,aAAeC,GAAoBD,EAAM,aAAaC,EAAU,CAAC,CACnE,GAEMC,EAAiDF,IAAkD,CACvG,KAAMA,EAAM,SAAA,EAAW,KACvB,QAASA,EAAM,SAAA,EAAW,WAAW,UAAY,EACjD,WAAYA,EAAM,YAAA,EAClB,YAAa,GACb,gBAAiB,GACjB,aAAeC,GAAoBD,EAAM,aAAaC,EAAU,CAAC,EACjE,SAAUD,EAAM,SAAA,EAAW,WAAW,SACtC,iBAAmBG,GAAaH,EAAM,cAAeI,IAAW,CAAE,GAAGA,EAAO,SAAAD,CAAA,EAAW,EACvF,eAAgB,GAChB,WAAY,GACZ,iBAAkBL,CACpB,GAEMO,EAAsBC,EAAAA,OAAO,IAAkD,CAAC,CAAE,MAAAC,EAAO,QAAAC,EAAS,MAAAC,KAAY,CAClH,MAAMC,EAAQD,EAAM,MAAM,CAAE,WAAY,UAAW,EAEnD,MAAO;AAAA,kBACSD,EAAU,SAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQhCG,EAAAA,OAAmBJ,CAAK,EAAE,eAAe,QAAQ,KAAO,CAAC,MAAMI,EAAAA,OAAmBJ,CAAK,EAAE,eAAe,QAAQ,MAAQ,CAAC,MAAMI,EAAAA,OAAmBJ,CAAK,EAAE,eAAe,QAAQ,QAAU,CAAC,MAAMI,EAAAA,OAAmBJ,CAAK,EAAE,eAAe,QAAQ,OAAS,CAAC;AAAA,oBACzPG,EAAME,YAAU,oBAAoB,CAAC;AAAA,8BAC3BF,EAAME,YAAU,wBAAwB,CAAC;AAAA,WAC5DC,kBAAgB;AAAA;AAAA;AAAA;AAAA,KAK3B,CAAC,EAEKC,EAAiB,CAAA,EAEjBC,EAAsB,CAAwB,CAClD,MAAAf,EACA,QAAAgB,EAAUF,CACZ,IAAwC,CACtC,KAAM,CAAE,eAAAG,EAAiB,UAAW,WAAAC,CAAA,EAAeF,EAGnD,OAFuBE,GAAclB,EAAM,wBAAA,EAOzCmB,EAAAA,IAACd,EAAA,CAAoB,MAAOL,EAAM,SAAA,EAAW,KAAM,QAAS,EAAQgB,EAAQ,iBACzE,SAAAC,IAAmB,SAClBE,EAAAA,IAACC,EAAA,CAAkB,GAAGrB,EAAsBC,CAAK,CAAA,CAAG,EAEpDmB,MAACE,EAAA,CAAmB,GAAGnB,EAAuBF,CAAK,CAAA,CAAG,CAAA,CAE1D,EAVO,IAYX"}

package/build/cjs/components/Table/components/BaseTable/BaseTableVirtualised.js

@@ -1,2 +1,2 @@
-"use strict";const g=require("react/jsx-runtime"),h=require("react"),x=require("@tanstack/react-table"),E=require("../../../../react-base/src/consts/index.js"),_=require("../../Table.js"),K=require("../TableElements/ColumnVisibilityFilters.js"),L=require("./TableHeader.js"),N=require("./TableFooter.js"),$=require("../TableElements/TableWrapper.js"),G=require("../../../Pictogram/components/BarChartTypeColourTint.js"),I=require("./BaseTablePagination.js"),J=require("../../features/sized.js"),Q=require("../../hooks/useVirtualized.js"),U=require("./TableBodyVirtualised.js"),X=require("../../consts/drag.js"),y=require("../../utils/isDraggable.js"),Y=require("../../../../react-base/src/consts/classes.js"),Z=[],s=({data:C=Z,columns:S,tableOptions:r,emptyStateProps:T,size:z=E.Sizes.Medium,...R})=>{const[q,H]=h.useState(()=>z),[n,w]=h.useState(()=>{var d;return((d=r==null?void 0:r.state)==null?void 0:d.columnOrder)??S.map(u=>u.id)}),{useDraggable:F=X.NO_DRAG,...j}=R,k=h.useCallback(d=>{var u;w(d),(u=r==null?void 0:r.onColumnOrderChange)==null||u.call(r,d)},[r]),V=h.useCallback(d=>{var u;H(d),(u=r==null?void 0:r.onSizeChange)==null||u.call(r,d)},[r]),c=x.useReactTable({_features:[J.SizedFeature],data:C,columns:S,getCoreRowModel:x.getCoreRowModel(),defaultColumn:{minSize:50},enableRowSelection:!1,...r,state:{...r==null?void 0:r.state,columnOrder:n,size:q},onColumnOrderChange:k,onSizeChange:V}),{tableContainerRef:o,virtualRows:W,rows:f,paddingTop:M,paddingBottom:P}=Q.useVirtualized(c),e={noHeader:r==null?void 0:r.noHeader,noFooter:r==null?void 0:r.noFooter,maxWidth:r==null?void 0:r.maxWidth,maxHeight:r==null?void 0:r.maxHeight,columnSized:(r==null?void 0:r.columnSized)||(r==null?void 0:r.useColumnsSizing),stickyHeader:r==null?void 0:r.stickyHeader,stickyFooter:r==null?void 0:r.stickyFooter,numericTypes:r==null?void 0:r.numericTypes,highlight:r==null?void 0:r.highlight,paginationKind:r==null?void 0:r.paginationKind,pinningOptions:r==null?void 0:r.pinningOptions,disableRowHover:r==null?void 0:r.disableRowHover,columnPinning:r==null?void 0:r.enableColumnPinning,pagination:!!(r!=null&&r.getPaginationRowModel),columnResizing:r==null?void 0:r.enableColumnResizing,columnVisibility:!!(r!=null&&r.onColumnVisibilityChange),columnResizingMinWidth:r==null?void 0:r.columnResizingMinWidth,sorting:(r==null?void 0:r.enableSorting)&&!!(r!=null&&r.getSortedRowModel)},m=F(c,C),B=T??{pictogram:g.jsx(G,{}),title:"Title here",description:"This should be a clear and concise description."},D=h.useMemo(()=>{const d=c.getFlatHeaders(),u={};return d.forEach(i=>{u[`--header-${i.id}-size`]=i.getSize(),u[`--col-${i.column.id}-size`]=i.column.getSize()}),u},[c.getState().columnSizingInfo,c.getState().columnSizing]),v={...e.maxHeight&&{maxHeight:e.maxHeight},...e.maxWidth&&{maxWidth:e.maxWidth},...(e.stickyHeader||e.stickyFooter)&&{stickyRows:e.stickyHeader||e.stickyFooter}},A=c.getRowCount()===0;return g.jsxs(g.Fragment,{children:[!!(e!=null&&e.columnVisibility)&&g.jsx(K.ColumnVisibilityFilters,{table:c}),g.jsxs($.TableWrapper,{className:Y.BASE_TABLE_CLASS,...v,ref:o,children:[g.jsx(m.Components.Provider,{children:g.jsxs(_,{...j,empty:A,size:z,style:{width:r!=null&&r.columnSized?c.getTotalSize():"100%",...D},children:[g.jsx(L,{...y.isColumnDraggable(m.draggable)?m.Components:{},table:c,options:e}),g.jsx(U,{paddingTop:M,paddingBottom:P,virtualRows:W,rows:f,...y.isRowDraggable(m.draggable)?m.Components:{},table:c,options:e,emptyStateProps:B}),g.jsx(N,{table:c,options:e})]})}),g.jsx(I,{table:c,options:e})]})]})};module.exports=s;
+"use strict";const n=require("react/jsx-runtime"),s=require("react"),d=require("@tanstack/react-table"),M=require("../../../../react-base/src/consts/index.js"),P=require("../../Table.js"),B=require("../TableElements/ColumnVisibilityFilters.js"),D=require("./TableHeader.js"),v=require("./TableFooter.js"),A=require("../TableElements/TableWrapper.js"),E=require("../../../Pictogram/components/BarChartTypeColourTint.js"),_=require("./BaseTablePagination.js"),K=require("../../features/sized.js"),L=require("../../hooks/useVirtualized.js"),N=require("./TableBodyVirtualised.js"),$=require("../../consts/drag.js"),m=require("../../utils/isDraggable.js"),G=require("../../../../react-base/src/consts/classes.js"),I=[],J=({data:u=I,columns:l,tableOptions:e,emptyStateProps:h,size:g=M.Sizes.Medium,...C})=>{const[S,z]=s.useState(()=>g),[x,y]=s.useState(()=>e?.state?.columnOrder??l.map(o=>o.id)),{useDraggable:T=$.NO_DRAG,...R}=C,q=s.useCallback(o=>{y(o),e?.onColumnOrderChange?.(o)},[e]),H=s.useCallback(o=>{z(o),e?.onSizeChange?.(o)},[e]),r=d.useReactTable({_features:[K.SizedFeature],data:u,columns:l,getCoreRowModel:d.getCoreRowModel(),defaultColumn:{minSize:50},enableRowSelection:!1,...e,state:{...e?.state,columnOrder:x,size:S},onColumnOrderChange:q,onSizeChange:H}),{tableContainerRef:w,virtualRows:F,rows:j,paddingTop:k,paddingBottom:V}=L.useVirtualized(r),i={noHeader:e?.noHeader,noFooter:e?.noFooter,maxWidth:e?.maxWidth,maxHeight:e?.maxHeight,columnSized:e?.columnSized||e?.useColumnsSizing,stickyHeader:e?.stickyHeader,stickyFooter:e?.stickyFooter,numericTypes:e?.numericTypes,highlight:e?.highlight,paginationKind:e?.paginationKind,pinningOptions:e?.pinningOptions,disableRowHover:e?.disableRowHover,columnPinning:e?.enableColumnPinning,pagination:!!e?.getPaginationRowModel,columnResizing:e?.enableColumnResizing,columnVisibility:!!e?.onColumnVisibilityChange,columnResizingMinWidth:e?.columnResizingMinWidth,sorting:e?.enableSorting&&!!e?.getSortedRowModel},t=T(r,u),W=h??{pictogram:n.jsx(E,{}),title:"Title here",description:"This should be a clear and concise description."},b=s.useMemo(()=>{const o=r.getFlatHeaders(),c={};return o.forEach(a=>{c[`--header-${a.id}-size`]=a.getSize(),c[`--col-${a.column.id}-size`]=a.column.getSize()}),c},[r.getState().columnSizingInfo,r.getState().columnSizing]),f={...i.maxHeight&&{maxHeight:i.maxHeight},...i.maxWidth&&{maxWidth:i.maxWidth},...(i.stickyHeader||i.stickyFooter)&&{stickyRows:i.stickyHeader||i.stickyFooter}},p=r.getRowCount()===0;return n.jsxs(n.Fragment,{children:[!!i?.columnVisibility&&n.jsx(B.ColumnVisibilityFilters,{table:r}),n.jsxs(A.TableWrapper,{className:G.BASE_TABLE_CLASS,...f,ref:w,children:[n.jsx(t.Components.Provider,{children:n.jsxs(P,{...R,empty:p,size:g,style:{width:e?.columnSized?r.getTotalSize():"100%",...b},children:[n.jsx(D,{...m.isColumnDraggable(t.draggable)?t.Components:{},table:r,options:i}),n.jsx(N,{paddingTop:k,paddingBottom:V,virtualRows:F,rows:j,...m.isRowDraggable(t.draggable)?t.Components:{},table:r,options:i,emptyStateProps:W}),n.jsx(v,{table:r,options:i})]})}),n.jsx(_,{table:r,options:i})]})]})};module.exports=J;
 //# sourceMappingURL=BaseTableVirtualised.js.map

package/build/cjs/components/Table/components/BaseTable/BaseTableVirtualised.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTableVirtualised.js","sources":["../../../../../../src/components/Table/components/BaseTable/BaseTableVirtualised.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nimport { useReactTable, getCoreRowModel, RowData, ColumnOrderState, Updater } from '@tanstack/react-table';\nimport { BASE_TABLE_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { TableTypes } from 'acinguiux-ds-react-base/components/Table';\n\nimport Table from '../../Table';\nimport type { IBaseTableProps, IInternalBaseTableProps } from './BaseTable.types';\nimport { ColumnVisibilityFilters } from '../TableElements/ColumnVisibilityFilters';\nimport TableHeader from './TableHeader';\nimport TableFooter from './TableFooter';\nimport { TableWrapper } from '../TableElements/TableWrapper';\nimport BarChartTypeColourTint from '../../../Pictogram/components/BarChartTypeColourTint';\nimport BaseTablePagination from './BaseTablePagination';\nimport { SizedFeature } from '../../features/sized';\nimport { useVirtualized } from '../../hooks/useVirtualized';\nimport TableBodyVirtualised from './TableBodyVirtualised';\nimport { NO_DRAG } from '../../consts/drag';\nimport { isColumnDraggable, isRowDraggable } from '../../utils/isDraggable';\n\nconst defaultData = [] as never[];\n\nconst BaseTableVirtualised = <TData extends RowData, TValue = unknown>({\n  data = defaultData,\n  columns,\n  tableOptions,\n  emptyStateProps,\n  size = Sizes.Medium,\n  ...props\n}: IBaseTableProps<TData, TValue>) => {\n  const [tableSize, setTableSize] = useState<TableTypes.Size>(() => size);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    () => tableOptions?.state?.columnOrder ?? columns.map((col) => col.id!),\n  );\n  const { useDraggable = NO_DRAG, ...rest } = props as IInternalBaseTableProps<TData, TValue>;\n\n  const onColumnOrderChangeHandler = useCallback(\n    (newColumnOrder: Updater<ColumnOrderState>) => {\n      setColumnOrder(newColumnOrder);\n      tableOptions?.onColumnOrderChange?.(newColumnOrder);\n    },\n    [tableOptions],\n  );\n\n  const onSizeChangeHandler = useCallback(\n    (newSize: Updater<TableTypes.Size>) => {\n      setTableSize(newSize);\n      tableOptions?.onSizeChange?.(newSize);\n    },\n    [tableOptions],\n  );\n\n  const table = useReactTable({\n    _features: [SizedFeature],\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    defaultColumn: {\n      minSize: 50,\n    },\n    // tanstack enables rows selection by default\n    enableRowSelection: false,\n    ...tableOptions,\n    state: {\n      ...tableOptions?.state,\n      columnOrder,\n      size: tableSize,\n    },\n    onColumnOrderChange: onColumnOrderChangeHandler,\n    onSizeChange: onSizeChangeHandler,\n  });\n\n  const { tableContainerRef, virtualRows, rows, paddingTop, paddingBottom } = useVirtualized(table);\n\n  const options = {\n    noHeader: tableOptions?.noHeader,\n    noFooter: tableOptions?.noFooter,\n    maxWidth: tableOptions?.maxWidth,\n    maxHeight: tableOptions?.maxHeight,\n    columnSized: tableOptions?.columnSized || tableOptions?.useColumnsSizing,\n    stickyHeader: tableOptions?.stickyHeader,\n    stickyFooter: tableOptions?.stickyFooter,\n    numericTypes: tableOptions?.numericTypes,\n    highlight: tableOptions?.highlight,\n    paginationKind: tableOptions?.paginationKind,\n    pinningOptions: tableOptions?.pinningOptions,\n    disableRowHover: tableOptions?.disableRowHover,\n    columnPinning: tableOptions?.enableColumnPinning,\n    pagination: !!tableOptions?.getPaginationRowModel,\n    columnResizing: tableOptions?.enableColumnResizing,\n    columnVisibility: !!tableOptions?.onColumnVisibilityChange,\n    columnResizingMinWidth: tableOptions?.columnResizingMinWidth,\n    sorting: tableOptions?.enableSorting && !!tableOptions?.getSortedRowModel,\n  };\n\n  const DraggableCtx = useDraggable(table, data);\n\n  const emptyStateProperties = emptyStateProps ?? {\n    pictogram: <BarChartTypeColourTint />,\n    title: 'Title here',\n    description: 'This should be a clear and concise description.',\n  };\n\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders();\n    const colSizes: { [key: string]: number } = {};\n    headers.forEach((header) => {\n      colSizes[`--header-${header.id}-size`] = header.getSize();\n      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n    });\n\n    return colSizes;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n  const wrapperProps = {\n    ...(options.maxHeight && { maxHeight: options.maxHeight }),\n    ...(options.maxWidth && { maxWidth: options.maxWidth }),\n    ...((options.stickyHeader || options.stickyFooter) && {\n      stickyRows: options.stickyHeader || options.stickyFooter,\n    }),\n  };\n\n  const isEmpty = table.getRowCount() === 0;\n\n  return (\n    <>\n      {!!options?.columnVisibility && <ColumnVisibilityFilters table={table} />}\n      <TableWrapper className={BASE_TABLE_CLASS} {...wrapperProps} ref={tableContainerRef}>\n        <DraggableCtx.Components.Provider>\n          <Table\n            {...rest}\n            empty={isEmpty}\n            size={size}\n            style={{ width: tableOptions?.columnSized ? table.getTotalSize() : '100%', ...columnSizeVars }}\n          >\n            <TableHeader\n              {...(isColumnDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              table={table}\n              options={options}\n            />\n            <TableBodyVirtualised\n              paddingTop={paddingTop}\n              paddingBottom={paddingBottom}\n              virtualRows={virtualRows}\n              rows={rows}\n              {...(isRowDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              table={table}\n              options={options}\n              emptyStateProps={emptyStateProperties}\n            />\n            <TableFooter table={table} options={options} />\n          </Table>\n        </DraggableCtx.Components.Provider>\n        <BaseTablePagination table={table} options={options} />\n      </TableWrapper>\n    </>\n  );\n};\n\nexport default BaseTableVirtualised;\n"],"names":["defaultData","BaseTableVirtualised","data","columns","tableOptions","emptyStateProps","size","Sizes","props","tableSize","setTableSize","useState","columnOrder","setColumnOrder","_a","col","useDraggable","NO_DRAG","rest","onColumnOrderChangeHandler","useCallback","newColumnOrder","onSizeChangeHandler","newSize","table","useReactTable","SizedFeature","getCoreRowModel","tableContainerRef","virtualRows","rows","paddingTop","paddingBottom","useVirtualized","options","DraggableCtx","emptyStateProperties","BarChartTypeColourTint","columnSizeVars","useMemo","headers","colSizes","header","wrapperProps","isEmpty","jsxs","Fragment","jsx","ColumnVisibilityFilters","TableWrapper","BASE_TABLE_CLASS","Table","TableHeader","isColumnDraggable","TableBodyVirtualised","isRowDraggable","TableFooter","BaseTablePagination"],"mappings":"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"}
+{"version":3,"file":"BaseTableVirtualised.js","sources":["../../../../../../src/components/Table/components/BaseTable/BaseTableVirtualised.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\n\nimport { useReactTable, getCoreRowModel, RowData, ColumnOrderState, Updater } from '@tanstack/react-table';\nimport { BASE_TABLE_CLASS, Sizes } from 'acinguiux-ds-react-base/consts';\nimport type { TableTypes } from 'acinguiux-ds-react-base/components/Table';\n\nimport Table from '../../Table';\nimport type { IBaseTableProps, IInternalBaseTableProps } from './BaseTable.types';\nimport { ColumnVisibilityFilters } from '../TableElements/ColumnVisibilityFilters';\nimport TableHeader from './TableHeader';\nimport TableFooter from './TableFooter';\nimport { TableWrapper } from '../TableElements/TableWrapper';\nimport BarChartTypeColourTint from '../../../Pictogram/components/BarChartTypeColourTint';\nimport BaseTablePagination from './BaseTablePagination';\nimport { SizedFeature } from '../../features/sized';\nimport { useVirtualized } from '../../hooks/useVirtualized';\nimport TableBodyVirtualised from './TableBodyVirtualised';\nimport { NO_DRAG } from '../../consts/drag';\nimport { isColumnDraggable, isRowDraggable } from '../../utils/isDraggable';\n\nconst defaultData = [] as never[];\n\nconst BaseTableVirtualised = <TData extends RowData, TValue = unknown>({\n  data = defaultData,\n  columns,\n  tableOptions,\n  emptyStateProps,\n  size = Sizes.Medium,\n  ...props\n}: IBaseTableProps<TData, TValue>) => {\n  const [tableSize, setTableSize] = useState<TableTypes.Size>(() => size);\n  const [columnOrder, setColumnOrder] = useState<string[]>(\n    () => tableOptions?.state?.columnOrder ?? columns.map((col) => col.id!),\n  );\n  const { useDraggable = NO_DRAG, ...rest } = props as IInternalBaseTableProps<TData, TValue>;\n\n  const onColumnOrderChangeHandler = useCallback(\n    (newColumnOrder: Updater<ColumnOrderState>) => {\n      setColumnOrder(newColumnOrder);\n      tableOptions?.onColumnOrderChange?.(newColumnOrder);\n    },\n    [tableOptions],\n  );\n\n  const onSizeChangeHandler = useCallback(\n    (newSize: Updater<TableTypes.Size>) => {\n      setTableSize(newSize);\n      tableOptions?.onSizeChange?.(newSize);\n    },\n    [tableOptions],\n  );\n\n  const table = useReactTable({\n    _features: [SizedFeature],\n    data,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    defaultColumn: {\n      minSize: 50,\n    },\n    // tanstack enables rows selection by default\n    enableRowSelection: false,\n    ...tableOptions,\n    state: {\n      ...tableOptions?.state,\n      columnOrder,\n      size: tableSize,\n    },\n    onColumnOrderChange: onColumnOrderChangeHandler,\n    onSizeChange: onSizeChangeHandler,\n  });\n\n  const { tableContainerRef, virtualRows, rows, paddingTop, paddingBottom } = useVirtualized(table);\n\n  const options = {\n    noHeader: tableOptions?.noHeader,\n    noFooter: tableOptions?.noFooter,\n    maxWidth: tableOptions?.maxWidth,\n    maxHeight: tableOptions?.maxHeight,\n    columnSized: tableOptions?.columnSized || tableOptions?.useColumnsSizing,\n    stickyHeader: tableOptions?.stickyHeader,\n    stickyFooter: tableOptions?.stickyFooter,\n    numericTypes: tableOptions?.numericTypes,\n    highlight: tableOptions?.highlight,\n    paginationKind: tableOptions?.paginationKind,\n    pinningOptions: tableOptions?.pinningOptions,\n    disableRowHover: tableOptions?.disableRowHover,\n    columnPinning: tableOptions?.enableColumnPinning,\n    pagination: !!tableOptions?.getPaginationRowModel,\n    columnResizing: tableOptions?.enableColumnResizing,\n    columnVisibility: !!tableOptions?.onColumnVisibilityChange,\n    columnResizingMinWidth: tableOptions?.columnResizingMinWidth,\n    sorting: tableOptions?.enableSorting && !!tableOptions?.getSortedRowModel,\n  };\n\n  const DraggableCtx = useDraggable(table, data);\n\n  const emptyStateProperties = emptyStateProps ?? {\n    pictogram: <BarChartTypeColourTint />,\n    title: 'Title here',\n    description: 'This should be a clear and concise description.',\n  };\n\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders();\n    const colSizes: { [key: string]: number } = {};\n    headers.forEach((header) => {\n      colSizes[`--header-${header.id}-size`] = header.getSize();\n      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();\n    });\n\n    return colSizes;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [table.getState().columnSizingInfo, table.getState().columnSizing]);\n\n  const wrapperProps = {\n    ...(options.maxHeight && { maxHeight: options.maxHeight }),\n    ...(options.maxWidth && { maxWidth: options.maxWidth }),\n    ...((options.stickyHeader || options.stickyFooter) && {\n      stickyRows: options.stickyHeader || options.stickyFooter,\n    }),\n  };\n\n  const isEmpty = table.getRowCount() === 0;\n\n  return (\n    <>\n      {!!options?.columnVisibility && <ColumnVisibilityFilters table={table} />}\n      <TableWrapper className={BASE_TABLE_CLASS} {...wrapperProps} ref={tableContainerRef}>\n        <DraggableCtx.Components.Provider>\n          <Table\n            {...rest}\n            empty={isEmpty}\n            size={size}\n            style={{ width: tableOptions?.columnSized ? table.getTotalSize() : '100%', ...columnSizeVars }}\n          >\n            <TableHeader\n              {...(isColumnDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              table={table}\n              options={options}\n            />\n            <TableBodyVirtualised\n              paddingTop={paddingTop}\n              paddingBottom={paddingBottom}\n              virtualRows={virtualRows}\n              rows={rows}\n              {...(isRowDraggable(DraggableCtx.draggable) ? DraggableCtx.Components : {})}\n              table={table}\n              options={options}\n              emptyStateProps={emptyStateProperties}\n            />\n            <TableFooter table={table} options={options} />\n          </Table>\n        </DraggableCtx.Components.Provider>\n        <BaseTablePagination table={table} options={options} />\n      </TableWrapper>\n    </>\n  );\n};\n\nexport default BaseTableVirtualised;\n"],"names":["defaultData","BaseTableVirtualised","data","columns","tableOptions","emptyStateProps","size","Sizes","props","tableSize","setTableSize","useState","columnOrder","setColumnOrder","col","useDraggable","NO_DRAG","rest","onColumnOrderChangeHandler","useCallback","newColumnOrder","onSizeChangeHandler","newSize","table","useReactTable","SizedFeature","getCoreRowModel","tableContainerRef","virtualRows","rows","paddingTop","paddingBottom","useVirtualized","options","DraggableCtx","emptyStateProperties","BarChartTypeColourTint","columnSizeVars","useMemo","headers","colSizes","header","wrapperProps","isEmpty","jsxs","Fragment","jsx","ColumnVisibilityFilters","TableWrapper","BASE_TABLE_CLASS","Table","TableHeader","isColumnDraggable","TableBodyVirtualised","isRowDraggable","TableFooter","BaseTablePagination"],"mappings":"qsBAoBMA,EAAc,CAAA,EAEdC,EAAuB,CAA0C,CACrE,KAAAC,EAAOF,EACP,QAAAG,EACA,aAAAC,EACA,gBAAAC,EACA,KAAAC,EAAOC,EAAAA,MAAM,OACb,GAAGC,CACL,IAAsC,CACpC,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAA0B,IAAML,CAAI,EAChE,CAACM,EAAaC,CAAc,EAAIF,EAAAA,SACpC,IAAMP,GAAc,OAAO,aAAeD,EAAQ,IAAKW,GAAQA,EAAI,EAAG,CAAA,EAElE,CAAE,aAAAC,EAAeC,EAAAA,QAAS,GAAGC,GAAST,EAEtCU,EAA6BC,EAAAA,YAChCC,GAA8C,CAC7CP,EAAeO,CAAc,EAC7BhB,GAAc,sBAAsBgB,CAAc,CACpD,EACA,CAAChB,CAAY,CAAA,EAGTiB,EAAsBF,EAAAA,YACzBG,GAAsC,CACrCZ,EAAaY,CAAO,EACpBlB,GAAc,eAAekB,CAAO,CACtC,EACA,CAAClB,CAAY,CAAA,EAGTmB,EAAQC,EAAAA,cAAc,CAC1B,UAAW,CAACC,EAAAA,YAAY,EACxB,KAAAvB,EACA,QAAAC,EACA,gBAAiBuB,EAAAA,gBAAA,EACjB,cAAe,CACb,QAAS,EAAA,EAGX,mBAAoB,GACpB,GAAGtB,EACH,MAAO,CACL,GAAGA,GAAc,MACjB,YAAAQ,EACA,KAAMH,CAAA,EAER,oBAAqBS,EACrB,aAAcG,CAAA,CACf,EAEK,CAAE,kBAAAM,EAAmB,YAAAC,EAAa,KAAAC,EAAM,WAAAC,EAAY,cAAAC,CAAA,EAAkBC,EAAAA,eAAeT,CAAK,EAE1FU,EAAU,CACd,SAAU7B,GAAc,SACxB,SAAUA,GAAc,SACxB,SAAUA,GAAc,SACxB,UAAWA,GAAc,UACzB,YAAaA,GAAc,aAAeA,GAAc,iBACxD,aAAcA,GAAc,aAC5B,aAAcA,GAAc,aAC5B,aAAcA,GAAc,aAC5B,UAAWA,GAAc,UACzB,eAAgBA,GAAc,eAC9B,eAAgBA,GAAc,eAC9B,gBAAiBA,GAAc,gBAC/B,cAAeA,GAAc,oBAC7B,WAAY,CAAC,CAACA,GAAc,sBAC5B,eAAgBA,GAAc,qBAC9B,iBAAkB,CAAC,CAACA,GAAc,yBAClC,uBAAwBA,GAAc,uBACtC,QAASA,GAAc,eAAiB,CAAC,CAACA,GAAc,iBAAA,EAGpD8B,EAAenB,EAAaQ,EAAOrB,CAAI,EAEvCiC,EAAuB9B,GAAmB,CAC9C,gBAAY+B,EAAA,EAAuB,EACnC,MAAO,aACP,YAAa,iDAAA,EAGTC,EAAiBC,EAAAA,QAAQ,IAAM,CACnC,MAAMC,EAAUhB,EAAM,eAAA,EAChBiB,EAAsC,CAAA,EAC5C,OAAAD,EAAQ,QAASE,GAAW,CAC1BD,EAAS,YAAYC,EAAO,EAAE,OAAO,EAAIA,EAAO,QAAA,EAChDD,EAAS,SAASC,EAAO,OAAO,EAAE,OAAO,EAAIA,EAAO,OAAO,QAAA,CAC7D,CAAC,EAEMD,CAET,EAAG,CAACjB,EAAM,SAAA,EAAW,iBAAkBA,EAAM,WAAW,YAAY,CAAC,EAE/DmB,EAAe,CACnB,GAAIT,EAAQ,WAAa,CAAE,UAAWA,EAAQ,SAAA,EAC9C,GAAIA,EAAQ,UAAY,CAAE,SAAUA,EAAQ,QAAA,EAC5C,IAAKA,EAAQ,cAAgBA,EAAQ,eAAiB,CACpD,WAAYA,EAAQ,cAAgBA,EAAQ,YAAA,CAC9C,EAGIU,EAAUpB,EAAM,YAAA,IAAkB,EAExC,OACEqB,EAAAA,KAAAC,WAAA,CACG,SAAA,CAAA,CAAC,CAACZ,GAAS,kBAAoBa,EAAAA,IAACC,EAAAA,yBAAwB,MAAAxB,EAAc,SACtEyB,EAAAA,aAAA,CAAa,UAAWC,EAAAA,iBAAmB,GAAGP,EAAc,IAAKf,EAChE,SAAA,CAAAmB,EAAAA,IAACZ,EAAa,WAAW,SAAxB,CACC,SAAAU,EAAAA,KAACM,EAAA,CACE,GAAGjC,EACJ,MAAO0B,EACP,KAAArC,EACA,MAAO,CAAE,MAAOF,GAAc,YAAcmB,EAAM,aAAA,EAAiB,OAAQ,GAAGc,CAAA,EAE9E,SAAA,CAAAS,EAAAA,IAACK,EAAA,CACE,GAAIC,EAAAA,kBAAkBlB,EAAa,SAAS,EAAIA,EAAa,WAAa,CAAA,EAC3E,MAAAX,EACA,QAAAU,CAAA,CAAA,EAEFa,EAAAA,IAACO,EAAA,CACC,WAAAvB,EACA,cAAAC,EACA,YAAAH,EACA,KAAAC,EACC,GAAIyB,EAAAA,eAAepB,EAAa,SAAS,EAAIA,EAAa,WAAa,CAAA,EACxE,MAAAX,EACA,QAAAU,EACA,gBAAiBE,CAAA,CAAA,EAEnBW,EAAAA,IAACS,EAAA,CAAY,MAAAhC,EAAc,QAAAU,CAAA,CAAkB,CAAA,CAAA,CAAA,EAEjD,EACAa,EAAAA,IAACU,EAAA,CAAoB,MAAAjC,EAAc,QAAAU,CAAA,CAAkB,CAAA,CAAA,CACvD,CAAA,EACF,CAEJ"}

package/build/cjs/components/Table/components/BaseTable/Cell.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),d=require("@tanstack/react-table"),a=require("../TableElements/TableElements.js"),x=require("../../utils/baseTableUtils.js"),g=require("../TableElements/NumericCell.js"),m=require("../TableElements/SelectionCheckbox.js"),s=require("../../../Flexbox/Flexbox.js"),b=require("../TableElements/Expander.js"),C=({cell:e,options:c,row:n,table:l,prefix:i})=>{var r;const o=d.flexRender(e.column.columnDef.cell,e.getContext()),{alignment:u}=e.column.columnDef;return t.jsx(a.Td,{...x.bodyCellProps(e),children:t.jsxs(s,{alignItems:"center",flexGrow:1,children:[l.options.enableRowSelection===!0&&n.getCanSelect()&&e.column.getIndex()===0&&t.jsx(m.SelectionCheckbox,{checked:n.getIsSelected(),onChange:n.getToggleSelectedHandler()}),i,t.jsx(b.Expander,{expandable:!!(e.column.getIndex()===0&&(n.getCanExpand()||n.getIsGrouped()||n.parentId)),row:n,children:t.jsx(s,{flexGrow:1,alignItems:"center",justifyContent:u??"space-between",children:(r=c.numericTypes)!=null&&r.includes(e==null?void 0:e.column.id)?t.jsx(g.NumericCell,{children:o}):o})})]})})};exports.Cell=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),a=require("react"),d=require("@tanstack/react-table"),x=require("../TableElements/TableElements.js"),m=require("../../utils/baseTableUtils.js"),g=require("../TableElements/NumericCell.js"),C=require("../TableElements/SelectionCheckbox.js"),l=require("../../../Flexbox/Flexbox.js"),b=require("../TableElements/Expander.js"),p=({cell:e,options:r,row:t,table:o,prefix:s})=>{const c=d.flexRender(e.column.columnDef.cell,e.getContext()),{alignment:i}=e.column.columnDef,u=a.useMemo(()=>o.getCanSomeRowsExpand(),[o]);return n.jsx(x.Td,{...m.bodyCellProps(e),children:n.jsxs(l,{alignItems:"center",flexGrow:1,children:[o.options.enableRowSelection===!0&&t.getCanSelect()&&e.column.getIndex()===0&&n.jsx(C.SelectionCheckbox,{checked:t.getIsSelected(),onChange:t.getToggleSelectedHandler()}),s,n.jsx(b.Expander,{expandable:e.column.getIndex()===0&&u,row:t,children:n.jsx(l,{flexGrow:1,alignItems:"center",justifyContent:i??"space-between",children:r.numericTypes?.includes(e?.column.id)?n.jsx(g.NumericCell,{children:c}):c})})]})})};exports.Cell=p;
 //# sourceMappingURL=Cell.js.map

package/build/cjs/components/Table/components/BaseTable/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../../../src/components/Table/components/BaseTable/Cell.tsx"],"sourcesContent":["import { flexRender, type RowData } from '@tanstack/react-table';\n\nimport type { FlexboxJustifyContent } from 'components/Flexbox/Flexbox.types';\n\nimport type { ICellElementProps } from './BaseTable.types';\nimport { Td } from '../TableElements/TableElements';\nimport { bodyCellProps } from '../../utils/baseTableUtils';\nimport { NumericCell } from '../TableElements/NumericCell';\nimport { SelectionCheckbox } from '../TableElements/SelectionCheckbox';\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { Expander } from '../TableElements/Expander';\n\nexport const Cell = <TData extends RowData, TValue = unknown>({\n  cell,\n  options,\n  row,\n  table,\n  prefix,\n}: ICellElementProps<TData, TValue> & {\n  prefix?: React.ReactNode;\n}) => {\n  const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());\n  const { alignment } = cell.column.columnDef;\n\n  return (\n    <Td {...bodyCellProps(cell)}>\n      <Flexbox alignItems=\"center\" flexGrow={1}>\n        {table.options.enableRowSelection === true && row.getCanSelect() && cell.column.getIndex() === 0 && (\n          <SelectionCheckbox checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />\n        )}\n        {prefix}\n        <Expander\n          expandable={Boolean(\n            cell.column.getIndex() === 0 && (row.getCanExpand() || row.getIsGrouped() || row.parentId),\n          )}\n          row={row}\n        >\n          <Flexbox\n            flexGrow={1}\n            alignItems=\"center\"\n            justifyContent={(alignment as FlexboxJustifyContent) ?? 'space-between'}\n          >\n            {options.numericTypes?.includes(cell?.column.id as keyof TData) ? (\n              <NumericCell>{cellContent}</NumericCell>\n            ) : (\n              cellContent\n            )}\n          </Flexbox>\n        </Expander>\n      </Flexbox>\n    </Td>\n  );\n};\n"],"names":["Cell","cell","options","row","table","prefix","cellContent","flexRender","alignment","jsx","Td","bodyCellProps","jsxs","Flexbox","SelectionCheckbox","Expander","_a","NumericCell"],"mappings":"icAYaA,EAAO,CAA0C,CAC5D,KAAAC,EACA,QAAAC,EACA,IAAAC,EACA,MAAAC,EACA,OAAAC,CACF,IAEM,OACJ,MAAMC,EAAcC,EAAAA,WAAWN,EAAK,OAAO,UAAU,KAAMA,EAAK,YAAY,EACtE,CAAE,UAAAO,CAAA,EAAcP,EAAK,OAAO,UAElC,OACEQ,EAAAA,IAACC,EAAAA,GAAA,CAAI,GAAGC,EAAAA,cAAcV,CAAI,EACxB,SAAAW,EAAAA,KAACC,EAAA,CAAQ,WAAW,SAAS,SAAU,EACpC,SAAA,CAAAT,EAAM,QAAQ,qBAAuB,IAAQD,EAAI,gBAAkBF,EAAK,OAAO,SAAA,IAAe,GAC7FQ,MAACK,EAAAA,kBAAA,CAAkB,QAASX,EAAI,cAAA,EAAiB,SAAUA,EAAI,2BAA4B,EAE5FE,EACDI,EAAAA,IAACM,EAAAA,SAAA,CACC,WAAY,GACVd,EAAK,OAAO,SAAA,IAAe,IAAME,EAAI,aAAA,GAAkBA,EAAI,aAAA,GAAkBA,EAAI,WAEnF,IAAAA,EAEA,SAAAM,EAAAA,IAACI,EAAA,CACC,SAAU,EACV,WAAW,SACX,eAAiBL,GAAuC,gBAEvD,UAAAQ,EAAAd,EAAQ,eAAR,MAAAc,EAAsB,SAASf,GAAA,YAAAA,EAAM,OAAO,IAC3CQ,EAAAA,IAACQ,EAAAA,YAAA,CAAa,SAAAX,CAAA,CAAY,EAE1BA,CAAA,CAAA,CAEJ,CAAA,CACF,CAAA,CACF,CAAA,CACF,CAEJ"}
+{"version":3,"file":"Cell.js","sources":["../../../../../../src/components/Table/components/BaseTable/Cell.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { flexRender, type RowData } from '@tanstack/react-table';\n\nimport type { FlexboxJustifyContent } from 'components/Flexbox/Flexbox.types';\n\nimport type { ICellElementProps } from './BaseTable.types';\nimport { Td } from '../TableElements/TableElements';\nimport { bodyCellProps } from '../../utils/baseTableUtils';\nimport { NumericCell } from '../TableElements/NumericCell';\nimport { SelectionCheckbox } from '../TableElements/SelectionCheckbox';\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { Expander } from '../TableElements/Expander';\n\nexport const Cell = <TData extends RowData, TValue = unknown>({\n  cell,\n  options,\n  row,\n  table,\n  prefix,\n}: ICellElementProps<TData, TValue> & {\n  prefix?: React.ReactNode;\n}) => {\n  const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());\n  const { alignment } = cell.column.columnDef;\n\n  const isAnyRowsExpandable = useMemo(() => table.getCanSomeRowsExpand(), [table]);\n\n  return (\n    <Td {...bodyCellProps(cell)}>\n      <Flexbox alignItems=\"center\" flexGrow={1}>\n        {table.options.enableRowSelection === true && row.getCanSelect() && cell.column.getIndex() === 0 && (\n          <SelectionCheckbox checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />\n        )}\n        {prefix}\n        <Expander expandable={Boolean(cell.column.getIndex() === 0) && isAnyRowsExpandable} row={row}>\n          <Flexbox\n            flexGrow={1}\n            alignItems=\"center\"\n            justifyContent={(alignment as FlexboxJustifyContent) ?? 'space-between'}\n          >\n            {options.numericTypes?.includes(cell?.column.id as keyof TData) ? (\n              <NumericCell>{cellContent}</NumericCell>\n            ) : (\n              cellContent\n            )}\n          </Flexbox>\n        </Expander>\n      </Flexbox>\n    </Td>\n  );\n};\n"],"names":["Cell","cell","options","row","table","prefix","cellContent","flexRender","alignment","isAnyRowsExpandable","useMemo","jsx","Td","bodyCellProps","jsxs","Flexbox","SelectionCheckbox","Expander","NumericCell"],"mappings":"odAcaA,EAAO,CAA0C,CAC5D,KAAAC,EACA,QAAAC,EACA,IAAAC,EACA,MAAAC,EACA,OAAAC,CACF,IAEM,CACJ,MAAMC,EAAcC,EAAAA,WAAWN,EAAK,OAAO,UAAU,KAAMA,EAAK,YAAY,EACtE,CAAE,UAAAO,CAAA,EAAcP,EAAK,OAAO,UAE5BQ,EAAsBC,EAAAA,QAAQ,IAAMN,EAAM,uBAAwB,CAACA,CAAK,CAAC,EAE/E,OACEO,EAAAA,IAACC,EAAAA,GAAA,CAAI,GAAGC,EAAAA,cAAcZ,CAAI,EACxB,SAAAa,EAAAA,KAACC,EAAA,CAAQ,WAAW,SAAS,SAAU,EACpC,SAAA,CAAAX,EAAM,QAAQ,qBAAuB,IAAQD,EAAI,gBAAkBF,EAAK,OAAO,SAAA,IAAe,GAC7FU,MAACK,EAAAA,kBAAA,CAAkB,QAASb,EAAI,cAAA,EAAiB,SAAUA,EAAI,2BAA4B,EAE5FE,EACDM,EAAAA,IAACM,EAAAA,SAAA,CAAS,WAAoBhB,EAAK,OAAO,SAAA,IAAe,GAAMQ,EAAqB,IAAAN,EAClF,SAAAQ,EAAAA,IAACI,EAAA,CACC,SAAU,EACV,WAAW,SACX,eAAiBP,GAAuC,gBAEvD,SAAAN,EAAQ,cAAc,SAASD,GAAM,OAAO,EAAiB,EAC5DU,EAAAA,IAACO,EAAAA,YAAA,CAAa,SAAAZ,CAAA,CAAY,EAE1BA,CAAA,CAAA,CAEJ,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAEJ"}

package/build/cjs/components/Table/components/BaseTable/TableFooter.js

@@ -1,2 +1,2 @@
-"use strict";const c=require("react/jsx-runtime"),n=require("react"),d=require("@tanstack/react-table"),t=require("../TableElements/TableElements.js"),h=require("../../hooks/useTable.js"),u=require("../../utils/baseTableUtils.js"),T=({table:s,options:e})=>{const{empty:a}=h.useTable(),i=n.useMemo(()=>u.hasFooter(s,e),[s,e]),m=n.useMemo(()=>(e==null?void 0:e.pagination)&&s.getIsSomeColumnsVisible(),[s,e]);return a||!i&&!m?null:c.jsx(t.TFoot,{"data-sticky":e==null?void 0:e.stickyFooter,children:s.getFooterGroups().filter(l=>l.headers.some(r=>!!r.column.columnDef.footer)).map(l=>c.jsx(t.Tr,{depth:l.depth,disableRowHover:!0,children:l==null?void 0:l.headers.map(r=>c.jsx(t.Th,{...u.headerCellProps(r),children:r.isPlaceholder?null:d.flexRender(r.column.columnDef.footer,r.getContext())},r.id))},l.id))})};module.exports=T;
+"use strict";const o=require("react/jsx-runtime"),l=require("react"),m=require("@tanstack/react-table"),n=require("../TableElements/TableElements.js"),d=require("../../hooks/useTable.js"),i=require("../../utils/baseTableUtils.js"),h=({table:t,options:r})=>{const{empty:c}=d.useTable(),u=l.useMemo(()=>i.hasFooter(t,r),[t,r]),a=l.useMemo(()=>r?.pagination&&t.getIsSomeColumnsVisible(),[t,r]);return c||!u&&!a?null:o.jsx(n.TFoot,{"data-sticky":r?.stickyFooter,children:t.getFooterGroups().filter(s=>s.headers.some(e=>!!e.column.columnDef.footer)).map(s=>o.jsx(n.Tr,{depth:s.depth,disableRowHover:!0,children:s?.headers.map(e=>o.jsx(n.Th,{...i.headerCellProps(e),children:e.isPlaceholder?null:m.flexRender(e.column.columnDef.footer,e.getContext())},e.id))},s.id))})};module.exports=h;
 //# sourceMappingURL=TableFooter.js.map

package/build/cjs/components/Table/components/BaseTable/TableFooter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","sources":["../../../../../../src/components/Table/components/BaseTable/TableFooter.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { flexRender, RowData } from '@tanstack/react-table';\n\nimport type { IBaseTableElementProps } from './BaseTable.types';\nimport { Tr, Th, TFoot } from '../TableElements/TableElements';\nimport { useTable } from '../../hooks/useTable';\nimport { hasFooter, headerCellProps } from '../../utils/baseTableUtils';\n\nconst Footer = <TData extends RowData>({ table, options }: IBaseTableElementProps<TData>) => {\n  const { empty } = useTable();\n  const withTableFooter = useMemo(() => hasFooter(table, options), [table, options]);\n  const withPagination = useMemo(() => options?.pagination && table.getIsSomeColumnsVisible(), [table, options]);\n\n  if (empty || (!withTableFooter && !withPagination)) {\n    return null;\n  }\n\n  return (\n    <TFoot data-sticky={options?.stickyFooter}>\n      {table\n        .getFooterGroups()\n        .filter((footerGroup) => footerGroup.headers.some((header) => Boolean(header.column.columnDef.footer)))\n        .map((footerGroup) => (\n          <Tr key={footerGroup.id} depth={footerGroup.depth} disableRowHover={true}>\n            {footerGroup?.headers.map((header) => (\n              <Th key={header.id} {...headerCellProps(header)}>\n                {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())}\n              </Th>\n            ))}\n          </Tr>\n        ))}\n    </TFoot>\n  );\n};\n\nexport default Footer;\n"],"names":["Footer","table","options","empty","useTable","withTableFooter","useMemo","hasFooter","withPagination","jsx","TFoot","footerGroup","header","Tr","Th","headerCellProps","flexRender"],"mappings":"uOASMA,EAAS,CAAwB,CAAE,MAAAC,EAAO,QAAAC,KAA6C,CAC3F,KAAM,CAAE,MAAAC,CAAA,EAAUC,WAAA,EACZC,EAAkBC,UAAQ,IAAMC,YAAUN,EAAOC,CAAO,EAAG,CAACD,EAAOC,CAAO,CAAC,EAC3EM,EAAiBF,EAAAA,QAAQ,KAAMJ,GAAA,YAAAA,EAAS,aAAcD,EAAM,0BAA2B,CAACA,EAAOC,CAAO,CAAC,EAE7G,OAAIC,GAAU,CAACE,GAAmB,CAACG,EAC1B,KAIPC,EAAAA,IAACC,EAAAA,MAAA,CAAM,cAAaR,GAAA,YAAAA,EAAS,aAC1B,SAAAD,EACE,gBAAA,EACA,OAAQU,GAAgBA,EAAY,QAAQ,KAAMC,GAAW,EAAQA,EAAO,OAAO,UAAU,MAAO,CAAC,EACrG,IAAKD,GACJF,EAAAA,IAACI,EAAAA,GAAA,CAAwB,MAAOF,EAAY,MAAO,gBAAiB,GACjE,SAAAA,GAAA,YAAAA,EAAa,QAAQ,IAAKC,GACzBH,EAAAA,IAACK,EAAAA,GAAA,CAAoB,GAAGC,EAAAA,gBAAgBH,CAAM,EAC3C,SAAAA,EAAO,cAAgB,KAAOI,EAAAA,WAAWJ,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,CAAA,EADtFA,EAAO,EAEhB,EACD,EALMD,EAAY,EAMrB,CACD,EACL,CAEJ"}
+{"version":3,"file":"TableFooter.js","sources":["../../../../../../src/components/Table/components/BaseTable/TableFooter.tsx"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { flexRender, RowData } from '@tanstack/react-table';\n\nimport type { IBaseTableElementProps } from './BaseTable.types';\nimport { Tr, Th, TFoot } from '../TableElements/TableElements';\nimport { useTable } from '../../hooks/useTable';\nimport { hasFooter, headerCellProps } from '../../utils/baseTableUtils';\n\nconst Footer = <TData extends RowData>({ table, options }: IBaseTableElementProps<TData>) => {\n  const { empty } = useTable();\n  const withTableFooter = useMemo(() => hasFooter(table, options), [table, options]);\n  const withPagination = useMemo(() => options?.pagination && table.getIsSomeColumnsVisible(), [table, options]);\n\n  if (empty || (!withTableFooter && !withPagination)) {\n    return null;\n  }\n\n  return (\n    <TFoot data-sticky={options?.stickyFooter}>\n      {table\n        .getFooterGroups()\n        .filter((footerGroup) => footerGroup.headers.some((header) => Boolean(header.column.columnDef.footer)))\n        .map((footerGroup) => (\n          <Tr key={footerGroup.id} depth={footerGroup.depth} disableRowHover={true}>\n            {footerGroup?.headers.map((header) => (\n              <Th key={header.id} {...headerCellProps(header)}>\n                {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())}\n              </Th>\n            ))}\n          </Tr>\n        ))}\n    </TFoot>\n  );\n};\n\nexport default Footer;\n"],"names":["Footer","table","options","empty","useTable","withTableFooter","useMemo","hasFooter","withPagination","jsx","TFoot","footerGroup","header","Tr","Th","headerCellProps","flexRender"],"mappings":"uOASMA,EAAS,CAAwB,CAAE,MAAAC,EAAO,QAAAC,KAA6C,CAC3F,KAAM,CAAE,MAAAC,CAAA,EAAUC,WAAA,EACZC,EAAkBC,UAAQ,IAAMC,YAAUN,EAAOC,CAAO,EAAG,CAACD,EAAOC,CAAO,CAAC,EAC3EM,EAAiBF,EAAAA,QAAQ,IAAMJ,GAAS,YAAcD,EAAM,0BAA2B,CAACA,EAAOC,CAAO,CAAC,EAE7G,OAAIC,GAAU,CAACE,GAAmB,CAACG,EAC1B,KAIPC,EAAAA,IAACC,EAAAA,MAAA,CAAM,cAAaR,GAAS,aAC1B,SAAAD,EACE,gBAAA,EACA,OAAQU,GAAgBA,EAAY,QAAQ,KAAMC,GAAW,EAAQA,EAAO,OAAO,UAAU,MAAO,CAAC,EACrG,IAAKD,GACJF,EAAAA,IAACI,EAAAA,GAAA,CAAwB,MAAOF,EAAY,MAAO,gBAAiB,GACjE,SAAAA,GAAa,QAAQ,IAAKC,GACzBH,EAAAA,IAACK,EAAAA,GAAA,CAAoB,GAAGC,EAAAA,gBAAgBH,CAAM,EAC3C,SAAAA,EAAO,cAAgB,KAAOI,EAAAA,WAAWJ,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,CAAA,EADtFA,EAAO,EAEhB,CACD,CAAA,EALMD,EAAY,EAMrB,CACD,EACL,CAEJ"}

package/build/cjs/components/Table/components/BaseTable/TableHeader.js

@@ -1,2 +1,2 @@
-"use strict";const s=require("react/jsx-runtime"),H=require("react"),x=require("../../../../react-base/src/consts/index.js"),t=require("../TableElements/TableElements.js"),u=require("../../utils/baseTableUtils.js"),T=require("../../hooks/useTable.js"),h=require("../TableElements/HeaderCell.js"),j=({header:r,table:e,options:a})=>s.jsx(t.Th,{...u.headerCellProps(r),children:s.jsx(h.HeaderCell,{options:a,table:e,header:r})}),q=({table:r,options:e,HeaderProvider:a=x.NOOP_COMPONENT,Header:i=j})=>{const{empty:n}=T.useTable(),c=H.useMemo(()=>u.hasHeader(r,e),[r,e]);return n||!c?null:s.jsx(t.THead,{"data-sticky":e==null?void 0:e.stickyHeader,children:!!c&&r.getHeaderGroups().map(d=>s.jsx(t.Tr,{depth:d.depth,disableRowHover:!0,children:s.jsx(a,{children:d.headers.map(l=>s.jsx(i,{header:l,table:r,options:e},l.id))})},d.id))})};module.exports=q;
+"use strict";const s=require("react/jsx-runtime"),H=require("react"),o=require("../../../../react-base/src/consts/index.js"),d=require("../TableElements/TableElements.js"),l=require("../../utils/baseTableUtils.js"),x=require("../../hooks/useTable.js"),T=require("../TableElements/HeaderCell.js"),h=({header:e,table:r,options:t})=>s.jsx(d.Th,{...l.headerCellProps(e),children:s.jsx(T.HeaderCell,{options:t,table:r,header:e})}),j=({table:e,options:r,HeaderProvider:t=o.NOOP_COMPONENT,Header:n=h})=>{const{empty:u}=x.useTable(),c=H.useMemo(()=>l.hasHeader(e,r),[e,r]);return u||!c?null:s.jsx(d.THead,{"data-sticky":r?.stickyHeader,children:!!c&&e.getHeaderGroups().map(a=>s.jsx(d.Tr,{depth:a.depth,disableRowHover:!0,children:s.jsx(t,{children:a.headers.map(i=>s.jsx(n,{header:i,table:e,options:r},i.id))})},a.id))})};module.exports=j;
 //# sourceMappingURL=TableHeader.js.map

package/build/cjs/components/Table/components/BaseTable/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../../../src/components/Table/components/BaseTable/TableHeader.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from 'react';\n\nimport { type RowData, type Header as HeaderType } from '@tanstack/react-table';\nimport { NOOP_COMPONENT } from 'acinguiux-ds-react-base/consts';\n\nimport { Tr, Th, THead } from '../TableElements/TableElements';\nimport type { IBaseTableElementProps, IHeaderCellProps } from './BaseTable.types';\nimport { hasHeader, headerCellProps } from '../../utils/baseTableUtils';\nimport { useTable } from '../../hooks/useTable';\nimport { HeaderCell } from '../TableElements/HeaderCell';\n\nconst DefaultHeader = <TData extends RowData, TValue = unknown>({\n  header,\n  table,\n  options,\n}: IHeaderCellProps<TData, TValue>) => (\n  <Th {...headerCellProps(header)}>\n    <HeaderCell options={options} table={table} header={header} />\n  </Th>\n);\n\nconst Header = <TData extends RowData, TValue = unknown>({\n  table,\n  options,\n  HeaderProvider = NOOP_COMPONENT,\n  Header: HeaderComponent = DefaultHeader,\n}: IBaseTableElementProps<TData> & {\n  HeaderProvider?: React.ComponentType<PropsWithChildren>;\n  Header?: React.ComponentType<IHeaderCellProps<TData, TValue>>;\n}) => {\n  const { empty } = useTable();\n  const withTableHeader = useMemo(() => hasHeader(table, options), [table, options]);\n\n  if (empty || !withTableHeader) {\n    return null;\n  }\n\n  return (\n    <THead data-sticky={options?.stickyHeader}>\n      {!!withTableHeader &&\n        table.getHeaderGroups().map((headerGroup) => (\n          <Tr key={headerGroup.id} depth={headerGroup.depth} disableRowHover={true}>\n            <HeaderProvider>\n              {headerGroup.headers.map((hgHeader) => (\n                <HeaderComponent\n                  key={hgHeader.id}\n                  header={hgHeader as HeaderType<TData, TValue>}\n                  table={table}\n                  options={options}\n                />\n              ))}\n            </HeaderProvider>\n          </Tr>\n        ))}\n    </THead>\n  );\n};\n\nexport default Header;\n"],"names":["DefaultHeader","header","table","options","jsx","Th","headerCellProps","HeaderCell","Header","HeaderProvider","NOOP_COMPONENT","HeaderComponent","empty","useTable","withTableHeader","useMemo","hasHeader","THead","headerGroup","Tr","hgHeader"],"mappings":"wSAWMA,EAAgB,CAA0C,CAC9D,OAAAC,EACA,MAAAC,EACA,QAAAC,CACF,IACEC,EAAAA,IAACC,EAAAA,GAAA,CAAI,GAAGC,EAAAA,gBAAgBL,CAAM,EAC5B,SAAAG,EAAAA,IAACG,EAAAA,WAAA,CAAW,QAAAJ,EAAkB,MAAAD,EAAc,OAAAD,CAAA,CAAgB,CAAA,CAC9D,EAGIO,EAAS,CAA0C,CACvD,MAAAN,EACA,QAAAC,EACA,eAAAM,EAAiBC,EAAAA,eACjB,OAAQC,EAAkBX,CAC5B,IAGM,CACJ,KAAM,CAAE,MAAAY,CAAA,EAAUC,WAAA,EACZC,EAAkBC,UAAQ,IAAMC,YAAUd,EAAOC,CAAO,EAAG,CAACD,EAAOC,CAAO,CAAC,EAEjF,OAAIS,GAAS,CAACE,EACL,KAIPV,EAAAA,IAACa,EAAAA,MAAA,CAAM,cAAad,GAAA,YAAAA,EAAS,aAC1B,SAAA,CAAC,CAACW,GACDZ,EAAM,gBAAA,EAAkB,IAAKgB,GAC3Bd,EAAAA,IAACe,EAAAA,GAAA,CAAwB,MAAOD,EAAY,MAAO,gBAAiB,GAClE,SAAAd,EAAAA,IAACK,EAAA,CACE,SAAAS,EAAY,QAAQ,IAAKE,GACxBhB,EAAAA,IAACO,EAAA,CAEC,OAAQS,EACR,MAAAlB,EACA,QAAAC,CAAA,EAHKiB,EAAS,EAAA,CAKjB,CAAA,CACH,CAAA,EAVOF,EAAY,EAWrB,CACD,CAAA,CACL,CAEJ"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../../../src/components/Table/components/BaseTable/TableHeader.tsx"],"sourcesContent":["import { type PropsWithChildren, useMemo } from 'react';\n\nimport { type RowData, type Header as HeaderType } from '@tanstack/react-table';\nimport { NOOP_COMPONENT } from 'acinguiux-ds-react-base/consts';\n\nimport { Tr, Th, THead } from '../TableElements/TableElements';\nimport type { IBaseTableElementProps, IHeaderCellProps } from './BaseTable.types';\nimport { hasHeader, headerCellProps } from '../../utils/baseTableUtils';\nimport { useTable } from '../../hooks/useTable';\nimport { HeaderCell } from '../TableElements/HeaderCell';\n\nconst DefaultHeader = <TData extends RowData, TValue = unknown>({\n  header,\n  table,\n  options,\n}: IHeaderCellProps<TData, TValue>) => (\n  <Th {...headerCellProps(header)}>\n    <HeaderCell options={options} table={table} header={header} />\n  </Th>\n);\n\nconst Header = <TData extends RowData, TValue = unknown>({\n  table,\n  options,\n  HeaderProvider = NOOP_COMPONENT,\n  Header: HeaderComponent = DefaultHeader,\n}: IBaseTableElementProps<TData> & {\n  HeaderProvider?: React.ComponentType<PropsWithChildren>;\n  Header?: React.ComponentType<IHeaderCellProps<TData, TValue>>;\n}) => {\n  const { empty } = useTable();\n  const withTableHeader = useMemo(() => hasHeader(table, options), [table, options]);\n\n  if (empty || !withTableHeader) {\n    return null;\n  }\n\n  return (\n    <THead data-sticky={options?.stickyHeader}>\n      {!!withTableHeader &&\n        table.getHeaderGroups().map((headerGroup) => (\n          <Tr key={headerGroup.id} depth={headerGroup.depth} disableRowHover={true}>\n            <HeaderProvider>\n              {headerGroup.headers.map((hgHeader) => (\n                <HeaderComponent\n                  key={hgHeader.id}\n                  header={hgHeader as HeaderType<TData, TValue>}\n                  table={table}\n                  options={options}\n                />\n              ))}\n            </HeaderProvider>\n          </Tr>\n        ))}\n    </THead>\n  );\n};\n\nexport default Header;\n"],"names":["DefaultHeader","header","table","options","jsx","Th","headerCellProps","HeaderCell","Header","HeaderProvider","NOOP_COMPONENT","HeaderComponent","empty","useTable","withTableHeader","useMemo","hasHeader","THead","headerGroup","Tr","hgHeader"],"mappings":"wSAWMA,EAAgB,CAA0C,CAC9D,OAAAC,EACA,MAAAC,EACA,QAAAC,CACF,IACEC,EAAAA,IAACC,EAAAA,GAAA,CAAI,GAAGC,EAAAA,gBAAgBL,CAAM,EAC5B,SAAAG,EAAAA,IAACG,EAAAA,WAAA,CAAW,QAAAJ,EAAkB,MAAAD,EAAc,OAAAD,CAAA,CAAgB,CAAA,CAC9D,EAGIO,EAAS,CAA0C,CACvD,MAAAN,EACA,QAAAC,EACA,eAAAM,EAAiBC,EAAAA,eACjB,OAAQC,EAAkBX,CAC5B,IAGM,CACJ,KAAM,CAAE,MAAAY,CAAA,EAAUC,WAAA,EACZC,EAAkBC,UAAQ,IAAMC,YAAUd,EAAOC,CAAO,EAAG,CAACD,EAAOC,CAAO,CAAC,EAEjF,OAAIS,GAAS,CAACE,EACL,KAIPV,EAAAA,IAACa,EAAAA,MAAA,CAAM,cAAad,GAAS,aAC1B,SAAA,CAAC,CAACW,GACDZ,EAAM,gBAAA,EAAkB,IAAKgB,GAC3Bd,EAAAA,IAACe,EAAAA,GAAA,CAAwB,MAAOD,EAAY,MAAO,gBAAiB,GAClE,SAAAd,EAAAA,IAACK,EAAA,CACE,SAAAS,EAAY,QAAQ,IAAKE,GACxBhB,EAAAA,IAACO,EAAA,CAEC,OAAQS,EACR,MAAAlB,EACA,QAAAC,CAAA,EAHKiB,EAAS,EAAA,CAKjB,CAAA,CACH,CAAA,EAVOF,EAAY,EAWrB,CACD,CAAA,CACL,CAEJ"}

package/build/cjs/components/Table/components/TableElements/Expander.js

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("styled-components"),r=require("../../../../react-base/src/consts/index.js"),o=require("../../../../react-base/src/components/Button/Button.consts.js"),p=require("../../hooks/useTable.js"),c=require("./ExpanderButton.js"),a=40,i=s.styled.div(({$size:e,$depth:t,$lastChild:n})=>s.css`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("react/jsx-runtime"),s=require("styled-components"),l=require("../../../../react-base/src/consts/index.js"),o=require("../../../../react-base/src/components/Button/Button.consts.js"),p=require("../../hooks/useTable.js"),c=require("./ExpanderButton.js"),u=require("../../utils/tableUtils.js"),i=40,a=s.styled.div(({$size:e,$depth:t,$lastChild:n})=>s.css`
     position: relative;
     display: flex;
     align-items: center;
     gap: 8px;
-    padding-left: ${t*a}px;
+    padding-left: ${t*i}px;
 
     ${n&&s.css`
-      padding-left: calc(${t*a}px + ${o.consts[e].height});
+      padding-left: calc(${t*i}px + ${o.consts[u.getExpanderPaddingSize(e)].height});
     `}
-  `),u=({row:e,expandable:t,children:n})=>{const{size:l=r.Sizes.Medium}=p.useTable();return t===!1?n:d.jsxs(i,{$size:l,$depth:e.depth,$lastChild:!e.getCanExpand(),children:[e.getCanExpand()&&d.jsx(c.ExpanderButton,{expanded:e.getIsExpanded(),onClick:e.getToggleExpandedHandler()}),n]})};exports.Expander=u;exports.StyledExpander=i;
+  `),x=({row:e,expandable:t,children:n})=>{const{size:r=l.Sizes.Medium}=p.useTable();return t===!1?n:d.jsxs(a,{$size:r,$depth:e.depth,$lastChild:!e.getCanExpand(),children:[e.getCanExpand()&&d.jsx(c.ExpanderButton,{expanded:e.getIsExpanded(),onClick:e.getToggleExpandedHandler()}),n]})};exports.Expander=x;exports.StyledExpander=a;
 //# sourceMappingURL=Expander.js.map

package/build/cjs/components/Table/components/TableElements/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../../../../../../src/components/Table/components/TableElements/Expander.tsx"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\nimport { ButtonConsts } from 'acinguiux-ds-react-base/components/Button';\nimport { TransientAll } from 'acinguiux-ds-react-base/types';\n\nimport { useTable } from '../../hooks/useTable';\nimport type { ITableCellExpanderContainerProps, IExpanderProps } from './TableElements.types';\nimport { ExpanderButton } from './ExpanderButton';\n\nconst EXPAND_OFFSET = 40;\n\nexport const StyledExpander = styled.div<Required<TransientAll<ITableCellExpanderContainerProps>>>(\n  ({ $size, $depth, $lastChild }) => css`\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-left: ${$depth * EXPAND_OFFSET}px;\n\n    ${$lastChild &&\n    css`\n      padding-left: calc(${$depth * EXPAND_OFFSET}px + ${ButtonConsts.consts[$size].height});\n    `}\n  `,\n);\n\nexport const Expander = <T,>({ row, expandable, children }: IExpanderProps<T>) => {\n  const { size = Sizes.Medium } = useTable();\n\n  return expandable === false ? (\n    children\n  ) : (\n    <StyledExpander $size={size} $depth={row.depth} $lastChild={!row.getCanExpand()}>\n      {row.getCanExpand() && (\n        <ExpanderButton\n          expanded={row.getIsExpanded()}\n          {...{\n            onClick: row.getToggleExpandedHandler(),\n          }}\n        />\n      )}\n      {children}\n    </StyledExpander>\n  );\n};\n"],"names":["EXPAND_OFFSET","StyledExpander","styled","$size","$depth","$lastChild","css","ButtonConsts.consts","Expander","row","expandable","children","size","Sizes","useTable","jsxs","jsx","ExpanderButton"],"mappings":"yXASMA,EAAgB,GAETC,EAAiBC,EAAAA,OAAO,IACnC,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,WAAAC,KAAiBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,oBAKjBF,EAASJ,CAAa;AAAA;AAAA,MAEpCK,GACFC,EAAAA;AAAAA,2BACuBF,EAASJ,CAAa,QAAQO,EAAAA,OAAoBJ,CAAK,EAAE,MAAM;AAAA,KACrF;AAAA,GAEL,EAEaK,EAAW,CAAK,CAAE,IAAAC,EAAK,WAAAC,EAAY,SAAAC,KAAkC,CAChF,KAAM,CAAE,KAAAC,EAAOC,EAAAA,MAAM,MAAA,EAAWC,EAAAA,SAAA,EAEhC,OAAOJ,IAAe,GACpBC,EAEAI,EAAAA,KAACd,GAAe,MAAOW,EAAM,OAAQH,EAAI,MAAO,WAAY,CAACA,EAAI,eAC9D,SAAA,CAAAA,EAAI,gBACHO,EAAAA,IAACC,EAAAA,eAAA,CACC,SAAUR,EAAI,cAAA,EAEZ,QAASA,EAAI,yBAAA,CACf,CAAA,EAGHE,CAAA,EACH,CAEJ"}
+{"version":3,"file":"Expander.js","sources":["../../../../../../src/components/Table/components/TableElements/Expander.tsx"],"sourcesContent":["import { styled, css } from 'styled-components';\nimport { Sizes } from 'acinguiux-ds-react-base/consts';\nimport { ButtonConsts } from 'acinguiux-ds-react-base/components/Button';\nimport { TransientAll } from 'acinguiux-ds-react-base/types';\n\nimport { useTable } from '../../hooks/useTable';\nimport type { ITableCellExpanderContainerProps, IExpanderProps } from './TableElements.types';\nimport { ExpanderButton } from './ExpanderButton';\nimport { getExpanderPaddingSize } from '../../utils/tableUtils';\n\nconst EXPAND_OFFSET = 40;\n\nexport const StyledExpander = styled.div<Required<TransientAll<ITableCellExpanderContainerProps>>>(\n  ({ $size, $depth, $lastChild }) => css`\n    position: relative;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding-left: ${$depth * EXPAND_OFFSET}px;\n\n    ${$lastChild &&\n    css`\n      padding-left: calc(${$depth * EXPAND_OFFSET}px + ${ButtonConsts.consts[getExpanderPaddingSize($size)].height});\n    `}\n  `,\n);\n\nexport const Expander = <T,>({ row, expandable, children }: IExpanderProps<T>) => {\n  const { size = Sizes.Medium } = useTable();\n\n  return expandable === false ? (\n    children\n  ) : (\n    <StyledExpander $size={size} $depth={row.depth} $lastChild={!row.getCanExpand()}>\n      {row.getCanExpand() && (\n        <ExpanderButton\n          expanded={row.getIsExpanded()}\n          {...{\n            onClick: row.getToggleExpandedHandler(),\n          }}\n        />\n      )}\n      {children}\n    </StyledExpander>\n  );\n};\n"],"names":["EXPAND_OFFSET","StyledExpander","styled","$size","$depth","$lastChild","css","ButtonConsts.consts","getExpanderPaddingSize","Expander","row","expandable","children","size","Sizes","useTable","jsxs","jsx","ExpanderButton"],"mappings":"gaAUMA,EAAgB,GAETC,EAAiBC,EAAAA,OAAO,IACnC,CAAC,CAAE,MAAAC,EAAO,OAAAC,EAAQ,WAAAC,KAAiBC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,oBAKjBF,EAASJ,CAAa;AAAA;AAAA,MAEpCK,GACFC,EAAAA;AAAAA,2BACuBF,EAASJ,CAAa,QAAQO,EAAAA,OAAoBC,EAAAA,uBAAuBL,CAAK,CAAC,EAAE,MAAM;AAAA,KAC7G;AAAA,GAEL,EAEaM,EAAW,CAAK,CAAE,IAAAC,EAAK,WAAAC,EAAY,SAAAC,KAAkC,CAChF,KAAM,CAAE,KAAAC,EAAOC,EAAAA,MAAM,MAAA,EAAWC,EAAAA,SAAA,EAEhC,OAAOJ,IAAe,GACpBC,EAEAI,EAAAA,KAACf,GAAe,MAAOY,EAAM,OAAQH,EAAI,MAAO,WAAY,CAACA,EAAI,eAC9D,SAAA,CAAAA,EAAI,gBACHO,EAAAA,IAACC,EAAAA,eAAA,CACC,SAAUR,EAAI,cAAA,EAEZ,QAASA,EAAI,yBAAA,CACf,CAAA,EAGHE,CAAA,EACH,CAEJ"}

package/build/cjs/components/Table/components/TableElements/HeaderCell.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),x=require("@tanstack/react-table"),o=require("../../../../react-base/src/consts/classes.js"),S=require("../../../Icon/components/EllipsisVertical.js"),T=require("../../../Icon/components/Pin.js"),l=require("../../../Flexbox/Flexbox.js"),j=require("./SorterButton.js"),H=require("./Resizer.js"),_=require("./SelectionCheckbox.js"),i=require("./HeaderCellMenu.js"),R=require("../../utils/baseTableUtils.js"),g=({headerText:e,header:s})=>{const{icon:t,subHead:r}=s.column.columnDef;return n.jsxs(l,{className:o.TABLE_HEADER_HEAD_CONTENT_CLASS,alignItems:"center",justifyContent:"flex-start",children:[t,n.jsxs(l,{flexDirection:"column",alignItems:"flex-start",gap:"0px",children:[e,r&&n.jsx("span",{className:o.TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS,children:x.flexRender(r,s.getContext())})]})]})},A=({header:e,table:s,options:t,prefix:r})=>{const m=(t==null?void 0:t.columnResizing)&&!e.isPlaceholder&&e.column.getCanResize(),a=(t==null?void 0:t.sorting)&&e.column.getCanSort(),u=i.useHeaderCellMenuItems(e,t),d=i.useHeaderCellMenuKind(e,t),{alignment:C}=R.headerCellProps(e),c=e.isPlaceholder?null:x.flexRender(e.column.columnDef.header,e.getContext());return n.jsxs(l,{alignItems:"center",flexGrow:1,children:[e.getLeafHeaders().length===1&&(s==null?void 0:s.options.enableRowSelection)&&e.column.getIndex()===0&&!!s&&n.jsx(_.SelectionCheckbox,{checked:s.getIsAllRowsSelected(),indeterminate:s.getIsSomeRowsSelected(),onChange:s.getToggleAllRowsSelectedHandler()}),n.jsxs(l,{alignItems:"center",flexGrow:1,justifyContent:C,children:[r,a?n.jsx(j.SorterButton,{sortDirection:e.column.getIsSorted()||void 0,onClick:e.column.getToggleSortingHandler(),children:!!c&&n.jsx(g,{headerText:c,header:e})}):!!c&&n.jsx(g,{headerText:c,header:e})]}),u.length>0&&n.jsx(l,{alignItems:"flex-end",children:n.jsx(i.HeaderCellMenu,{triggerOptions:d==="pin-only"?{icon:n.jsx(T,{}),className:o.TABLE_PIN_BUTTON_CLASS}:{icon:n.jsx(S,{}),className:o.TABLE_MENU_BUTTON_CLASS},menuItems:u})}),n.jsx(H.Resizer,{...m?{onMouseDown:e.getResizeHandler(),onTouchStart:e.getResizeHandler()}:{}})]})};exports.HeaderCell=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),a=require("@tanstack/react-table"),c=require("../../../../react-base/src/consts/classes.js"),S=require("../../../Icon/components/EllipsisVertical.js"),T=require("../../../Icon/components/Pin.js"),l=require("../../../Flexbox/Flexbox.js"),j=require("./SorterButton.js"),H=require("./Resizer.js"),_=require("./SelectionCheckbox.js"),i=require("./HeaderCellMenu.js"),R=require("../../utils/baseTableUtils.js"),g=({headerText:e,header:t})=>{const{icon:s,subHead:o}=t.column.columnDef;return n.jsxs(l,{className:c.TABLE_HEADER_HEAD_CONTENT_CLASS,alignItems:"center",justifyContent:"flex-start",children:[s,n.jsxs(l,{flexDirection:"column",alignItems:"flex-start",gap:"0px",children:[e,o&&n.jsx("span",{className:c.TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS,children:a.flexRender(o,t.getContext())})]})]})},A=({header:e,table:t,options:s,prefix:o})=>{const x=s?.columnResizing&&!e.isPlaceholder&&e.column.getCanResize(),m=s?.sorting&&e.column.getCanSort(),u=i.useHeaderCellMenuItems(e,s),d=i.useHeaderCellMenuKind(e,s),{alignment:C}=R.headerCellProps(e),r=e.isPlaceholder?null:a.flexRender(e.column.columnDef.header,e.getContext());return n.jsxs(l,{alignItems:"center",flexGrow:1,children:[e.getLeafHeaders().length===1&&t?.options.enableRowSelection&&e.column.getIndex()===0&&!!t&&n.jsx(_.SelectionCheckbox,{checked:t.getIsAllRowsSelected(),indeterminate:t.getIsSomeRowsSelected(),onChange:t.getToggleAllRowsSelectedHandler()}),n.jsxs(l,{alignItems:"center",flexGrow:1,justifyContent:C,children:[o,m?n.jsx(j.SorterButton,{sortDirection:e.column.getIsSorted()||void 0,onClick:e.column.getToggleSortingHandler(),children:!!r&&n.jsx(g,{headerText:r,header:e})}):!!r&&n.jsx(g,{headerText:r,header:e})]}),u.length>0&&n.jsx(l,{alignItems:"flex-end",children:n.jsx(i.HeaderCellMenu,{triggerOptions:d==="pin-only"?{icon:n.jsx(T,{}),className:c.TABLE_PIN_BUTTON_CLASS}:{icon:n.jsx(S,{}),className:c.TABLE_MENU_BUTTON_CLASS},menuItems:u})}),n.jsx(H.Resizer,{...x?{onMouseDown:e.getResizeHandler(),onTouchStart:e.getResizeHandler()}:{}})]})};exports.HeaderCell=A;
 //# sourceMappingURL=HeaderCell.js.map

package/build/cjs/components/Table/components/TableElements/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/Table/components/TableElements/HeaderCell.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { flexRender, type Header, type RowData } from '@tanstack/react-table';\nimport {\n  TABLE_HEADER_HEAD_CONTENT_CLASS,\n  TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS,\n  TABLE_MENU_BUTTON_CLASS,\n  TABLE_PIN_BUTTON_CLASS,\n} from 'acinguiux-ds-react-base/consts';\n\nimport type { FlexboxJustifyContent } from '../../../Flexbox/Flexbox.types';\nimport EllipsisVertical from '../../../Icon/components/EllipsisVertical';\nimport Pin from '../../../Icon/components/Pin';\nimport type { IHeaderCellProps } from '../BaseTable/BaseTable.types';\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { SorterButton } from './SorterButton';\nimport { Resizer } from './Resizer';\nimport { SelectionCheckbox } from './SelectionCheckbox';\nimport { HeaderCellMenu, useHeaderCellMenuItems, useHeaderCellMenuKind } from './HeaderCellMenu';\nimport { headerCellProps } from '../../utils/baseTableUtils';\n\nconst HeaderContent = <TData extends RowData, TValue = unknown>({\n  headerText,\n  header,\n}: {\n  headerText: ReactNode;\n  header: Header<TData, TValue>;\n}) => {\n  const { icon, subHead } = header.column.columnDef;\n\n  return (\n    <Flexbox className={TABLE_HEADER_HEAD_CONTENT_CLASS} alignItems=\"center\" justifyContent=\"flex-start\">\n      {icon}\n      <Flexbox flexDirection=\"column\" alignItems=\"flex-start\" gap=\"0px\">\n        {headerText}\n        {subHead && (\n          <span className={TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS}>{flexRender(subHead, header.getContext())}</span>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nexport const HeaderCell = <TData extends RowData, TValue = unknown>({\n  header,\n  table,\n  options,\n  prefix,\n}: IHeaderCellProps<TData, TValue> & { prefix?: ReactNode }) => {\n  const showColumnResizingOptions = options?.columnResizing && !header.isPlaceholder && header.column.getCanResize();\n  const showSortingOptions = options?.sorting && header.column.getCanSort();\n  const headerCellMenuItems = useHeaderCellMenuItems(header, options);\n  const headerKind = useHeaderCellMenuKind(header, options);\n  const { alignment } = headerCellProps(header);\n\n  const headerText = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());\n\n  return (\n    <Flexbox alignItems=\"center\" flexGrow={1}>\n      {header.getLeafHeaders().length === 1 &&\n        table?.options.enableRowSelection &&\n        header.column.getIndex() === 0 &&\n        !!table && (\n          <SelectionCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n          />\n        )}\n      <Flexbox alignItems=\"center\" flexGrow={1} justifyContent={alignment as FlexboxJustifyContent}>\n        {prefix}\n        {showSortingOptions ? (\n          <SorterButton\n            sortDirection={header.column.getIsSorted() || undefined}\n            onClick={header.column.getToggleSortingHandler()}\n          >\n            {!!headerText && <HeaderContent headerText={headerText} header={header} />}\n          </SorterButton>\n        ) : (\n          !!headerText && <HeaderContent headerText={headerText} header={header} />\n        )}\n      </Flexbox>\n      {headerCellMenuItems.length > 0 && (\n        <Flexbox alignItems=\"flex-end\">\n          <HeaderCellMenu\n            triggerOptions={\n              headerKind === 'pin-only'\n                ? { icon: <Pin />, className: TABLE_PIN_BUTTON_CLASS }\n                : { icon: <EllipsisVertical />, className: TABLE_MENU_BUTTON_CLASS }\n            }\n            menuItems={headerCellMenuItems}\n          />\n        </Flexbox>\n      )}\n      <Resizer\n        {...(showColumnResizingOptions\n          ? { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() }\n          : {})}\n      />\n    </Flexbox>\n  );\n};\n"],"names":["HeaderContent","headerText","header","icon","subHead","Flexbox","TABLE_HEADER_HEAD_CONTENT_CLASS","jsx","TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS","HeaderCell","table","options","prefix","showColumnResizingOptions","showSortingOptions","headerCellMenuItems","useHeaderCellMenuItems","headerKind","useHeaderCellMenuKind","alignment","headerCellProps","flexRender","jsxs","SelectionCheckbox","SorterButton","HeaderCellMenu","Pin","TABLE_PIN_BUTTON_CLASS","EllipsisVertical","TABLE_MENU_BUTTON_CLASS","Resizer"],"mappings":"uiBAqBMA,EAAgB,CAA0C,CAC9D,WAAAC,EACA,OAAAC,CACF,IAGM,CACJ,KAAM,CAAE,KAAAC,EAAM,QAAAC,CAAA,EAAYF,EAAO,OAAO,UAExC,cACGG,EAAA,CAAQ,UAAWC,EAAAA,gCAAiC,WAAW,SAAS,eAAe,aACrF,SAAA,CAAAH,SACAE,EAAA,CAAQ,cAAc,SAAS,WAAW,aAAa,IAAI,MACzD,SAAA,CAAAJ,EACAG,GACCG,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,wCAA0C,sBAAWJ,EAASF,EAAO,WAAA,CAAY,CAAA,CAAE,CAAA,CAAA,CAExG,CAAA,EACF,CAEJ,EAEaO,EAAa,CAA0C,CAClE,OAAAP,EACA,MAAAQ,EACA,QAAAC,EACA,OAAAC,CACF,IAAgE,CAC9D,MAAMC,GAA4BF,GAAA,YAAAA,EAAS,iBAAkB,CAACT,EAAO,eAAiBA,EAAO,OAAO,aAAA,EAC9FY,GAAqBH,GAAA,YAAAA,EAAS,UAAWT,EAAO,OAAO,WAAA,EACvDa,EAAsBC,EAAAA,uBAAuBd,EAAQS,CAAO,EAC5DM,EAAaC,EAAAA,sBAAsBhB,EAAQS,CAAO,EAClD,CAAE,UAAAQ,CAAA,EAAcC,EAAAA,gBAAgBlB,CAAM,EAEtCD,EAAaC,EAAO,cAAgB,KAAOmB,EAAAA,WAAWnB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,EAE/G,OACEoB,EAAAA,KAACjB,EAAA,CAAQ,WAAW,SAAS,SAAU,EACpC,SAAA,CAAAH,EAAO,eAAA,EAAiB,SAAW,IAClCQ,GAAA,YAAAA,EAAO,QAAQ,qBACfR,EAAO,OAAO,SAAA,IAAe,GAC7B,CAAC,CAACQ,GACAH,EAAAA,IAACgB,EAAAA,kBAAA,CACC,QAASb,EAAM,qBAAA,EACf,cAAeA,EAAM,sBAAA,EACrB,SAAUA,EAAM,gCAAA,CAAgC,CAAA,SAGrDL,EAAA,CAAQ,WAAW,SAAS,SAAU,EAAG,eAAgBc,EACvD,SAAA,CAAAP,EACAE,EACCP,EAAAA,IAACiB,EAAAA,aAAA,CACC,cAAetB,EAAO,OAAO,YAAA,GAAiB,OAC9C,QAASA,EAAO,OAAO,wBAAA,EAEtB,UAAC,CAACD,GAAcM,EAAAA,IAACP,EAAA,CAAc,WAAAC,EAAwB,OAAAC,CAAA,CAAgB,CAAA,CAAA,EAG1E,CAAC,CAACD,GAAcM,EAAAA,IAACP,EAAA,CAAc,WAAAC,EAAwB,OAAAC,CAAA,CAAgB,CAAA,EAE3E,EACCa,EAAoB,OAAS,GAC5BR,EAAAA,IAACF,EAAA,CAAQ,WAAW,WAClB,SAAAE,EAAAA,IAACkB,EAAAA,eAAA,CACC,eACER,IAAe,WACX,CAAE,WAAOS,EAAA,CAAA,CAAI,EAAI,UAAWC,EAAAA,sBAAA,EAC5B,CAAE,WAAOC,EAAA,EAAiB,EAAI,UAAWC,yBAAA,EAE/C,UAAWd,CAAA,CAAA,EAEf,EAEFR,EAAAA,IAACuB,EAAAA,QAAA,CACE,GAAIjB,EACD,CAAE,YAAaX,EAAO,iBAAA,EAAoB,aAAcA,EAAO,iBAAA,GAC/D,CAAA,CAAC,CAAA,CACP,EACF,CAEJ"}
+{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/Table/components/TableElements/HeaderCell.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { flexRender, type Header, type RowData } from '@tanstack/react-table';\nimport {\n  TABLE_HEADER_HEAD_CONTENT_CLASS,\n  TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS,\n  TABLE_MENU_BUTTON_CLASS,\n  TABLE_PIN_BUTTON_CLASS,\n} from 'acinguiux-ds-react-base/consts';\n\nimport type { FlexboxJustifyContent } from '../../../Flexbox/Flexbox.types';\nimport EllipsisVertical from '../../../Icon/components/EllipsisVertical';\nimport Pin from '../../../Icon/components/Pin';\nimport type { IHeaderCellProps } from '../BaseTable/BaseTable.types';\nimport Flexbox from '../../../Flexbox/Flexbox';\nimport { SorterButton } from './SorterButton';\nimport { Resizer } from './Resizer';\nimport { SelectionCheckbox } from './SelectionCheckbox';\nimport { HeaderCellMenu, useHeaderCellMenuItems, useHeaderCellMenuKind } from './HeaderCellMenu';\nimport { headerCellProps } from '../../utils/baseTableUtils';\n\nconst HeaderContent = <TData extends RowData, TValue = unknown>({\n  headerText,\n  header,\n}: {\n  headerText: ReactNode;\n  header: Header<TData, TValue>;\n}) => {\n  const { icon, subHead } = header.column.columnDef;\n\n  return (\n    <Flexbox className={TABLE_HEADER_HEAD_CONTENT_CLASS} alignItems=\"center\" justifyContent=\"flex-start\">\n      {icon}\n      <Flexbox flexDirection=\"column\" alignItems=\"flex-start\" gap=\"0px\">\n        {headerText}\n        {subHead && (\n          <span className={TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS}>{flexRender(subHead, header.getContext())}</span>\n        )}\n      </Flexbox>\n    </Flexbox>\n  );\n};\n\nexport const HeaderCell = <TData extends RowData, TValue = unknown>({\n  header,\n  table,\n  options,\n  prefix,\n}: IHeaderCellProps<TData, TValue> & { prefix?: ReactNode }) => {\n  const showColumnResizingOptions = options?.columnResizing && !header.isPlaceholder && header.column.getCanResize();\n  const showSortingOptions = options?.sorting && header.column.getCanSort();\n  const headerCellMenuItems = useHeaderCellMenuItems(header, options);\n  const headerKind = useHeaderCellMenuKind(header, options);\n  const { alignment } = headerCellProps(header);\n\n  const headerText = header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext());\n\n  return (\n    <Flexbox alignItems=\"center\" flexGrow={1}>\n      {header.getLeafHeaders().length === 1 &&\n        table?.options.enableRowSelection &&\n        header.column.getIndex() === 0 &&\n        !!table && (\n          <SelectionCheckbox\n            checked={table.getIsAllRowsSelected()}\n            indeterminate={table.getIsSomeRowsSelected()}\n            onChange={table.getToggleAllRowsSelectedHandler()}\n          />\n        )}\n      <Flexbox alignItems=\"center\" flexGrow={1} justifyContent={alignment as FlexboxJustifyContent}>\n        {prefix}\n        {showSortingOptions ? (\n          <SorterButton\n            sortDirection={header.column.getIsSorted() || undefined}\n            onClick={header.column.getToggleSortingHandler()}\n          >\n            {!!headerText && <HeaderContent headerText={headerText} header={header} />}\n          </SorterButton>\n        ) : (\n          !!headerText && <HeaderContent headerText={headerText} header={header} />\n        )}\n      </Flexbox>\n      {headerCellMenuItems.length > 0 && (\n        <Flexbox alignItems=\"flex-end\">\n          <HeaderCellMenu\n            triggerOptions={\n              headerKind === 'pin-only'\n                ? { icon: <Pin />, className: TABLE_PIN_BUTTON_CLASS }\n                : { icon: <EllipsisVertical />, className: TABLE_MENU_BUTTON_CLASS }\n            }\n            menuItems={headerCellMenuItems}\n          />\n        </Flexbox>\n      )}\n      <Resizer\n        {...(showColumnResizingOptions\n          ? { onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() }\n          : {})}\n      />\n    </Flexbox>\n  );\n};\n"],"names":["HeaderContent","headerText","header","icon","subHead","Flexbox","TABLE_HEADER_HEAD_CONTENT_CLASS","jsx","TABLE_HEADER_HEAD_CONTENT_SUBHEAD_CLASS","HeaderCell","table","options","prefix","showColumnResizingOptions","showSortingOptions","headerCellMenuItems","useHeaderCellMenuItems","headerKind","useHeaderCellMenuKind","alignment","headerCellProps","flexRender","jsxs","SelectionCheckbox","SorterButton","HeaderCellMenu","Pin","TABLE_PIN_BUTTON_CLASS","EllipsisVertical","TABLE_MENU_BUTTON_CLASS","Resizer"],"mappings":"uiBAqBMA,EAAgB,CAA0C,CAC9D,WAAAC,EACA,OAAAC,CACF,IAGM,CACJ,KAAM,CAAE,KAAAC,EAAM,QAAAC,CAAA,EAAYF,EAAO,OAAO,UAExC,cACGG,EAAA,CAAQ,UAAWC,EAAAA,gCAAiC,WAAW,SAAS,eAAe,aACrF,SAAA,CAAAH,SACAE,EAAA,CAAQ,cAAc,SAAS,WAAW,aAAa,IAAI,MACzD,SAAA,CAAAJ,EACAG,GACCG,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,wCAA0C,sBAAWJ,EAASF,EAAO,WAAA,CAAY,CAAA,CAAE,CAAA,CAAA,CAExG,CAAA,EACF,CAEJ,EAEaO,EAAa,CAA0C,CAClE,OAAAP,EACA,MAAAQ,EACA,QAAAC,EACA,OAAAC,CACF,IAAgE,CAC9D,MAAMC,EAA4BF,GAAS,gBAAkB,CAACT,EAAO,eAAiBA,EAAO,OAAO,aAAA,EAC9FY,EAAqBH,GAAS,SAAWT,EAAO,OAAO,WAAA,EACvDa,EAAsBC,EAAAA,uBAAuBd,EAAQS,CAAO,EAC5DM,EAAaC,EAAAA,sBAAsBhB,EAAQS,CAAO,EAClD,CAAE,UAAAQ,CAAA,EAAcC,EAAAA,gBAAgBlB,CAAM,EAEtCD,EAAaC,EAAO,cAAgB,KAAOmB,EAAAA,WAAWnB,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAA,CAAY,EAE/G,OACEoB,EAAAA,KAACjB,EAAA,CAAQ,WAAW,SAAS,SAAU,EACpC,SAAA,CAAAH,EAAO,eAAA,EAAiB,SAAW,GAClCQ,GAAO,QAAQ,oBACfR,EAAO,OAAO,SAAA,IAAe,GAC7B,CAAC,CAACQ,GACAH,EAAAA,IAACgB,EAAAA,kBAAA,CACC,QAASb,EAAM,qBAAA,EACf,cAAeA,EAAM,sBAAA,EACrB,SAAUA,EAAM,gCAAA,CAAgC,CAAA,SAGrDL,EAAA,CAAQ,WAAW,SAAS,SAAU,EAAG,eAAgBc,EACvD,SAAA,CAAAP,EACAE,EACCP,EAAAA,IAACiB,EAAAA,aAAA,CACC,cAAetB,EAAO,OAAO,YAAA,GAAiB,OAC9C,QAASA,EAAO,OAAO,wBAAA,EAEtB,UAAC,CAACD,GAAcM,EAAAA,IAACP,EAAA,CAAc,WAAAC,EAAwB,OAAAC,CAAA,CAAgB,CAAA,CAAA,EAG1E,CAAC,CAACD,GAAcM,EAAAA,IAACP,EAAA,CAAc,WAAAC,EAAwB,OAAAC,CAAA,CAAgB,CAAA,EAE3E,EACCa,EAAoB,OAAS,GAC5BR,EAAAA,IAACF,EAAA,CAAQ,WAAW,WAClB,SAAAE,EAAAA,IAACkB,EAAAA,eAAA,CACC,eACER,IAAe,WACX,CAAE,WAAOS,EAAA,CAAA,CAAI,EAAI,UAAWC,EAAAA,sBAAA,EAC5B,CAAE,WAAOC,EAAA,EAAiB,EAAI,UAAWC,yBAAA,EAE/C,UAAWd,CAAA,CAAA,EAEf,EAEFR,EAAAA,IAACuB,EAAAA,QAAA,CACE,GAAIjB,EACD,CAAE,YAAaX,EAAO,iBAAA,EAAoB,aAAcA,EAAO,iBAAA,GAC/D,CAAA,CAAC,CAAA,CACP,EACF,CAEJ"}

package/build/cjs/components/Table/components/TableElements/HeaderCellMenu.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("react"),r=require("../../../../react-base/src/consts/index.js"),x=require("../../hooks/useTable.js"),M=require("../../utils/tableUtils.js"),S=require("../../../Flexbox/Flexbox.js"),f=require("../../../Popover/Popover.js"),b=require("../../../Menu/Menu.js"),y=require("../../../Icon/components/ArrowDown.js"),j=require("../../../Icon/components/ArrowLeft.js"),q=require("../../../Icon/components/ArrowRight.js"),I=require("../../../Icon/components/ArrowUp.js"),k=require("../../../Icon/components/ChevronUpDown.js"),v=require("../../../Icon/components/PinRemove.js"),O=({triggerOptions:n,menuItems:o})=>{const{size:s=r.Sizes.Medium}=x.useTable(),[i,c]=t.useState(!1),l=t.useCallback(()=>c(!1),[]);return e.jsx(S,{alignItems:"center",flexGrow:"1",justifyContent:"flex-end",children:e.jsxs(f.Popover,{open:i,onOpenChange:c,children:[e.jsx(f.PopoverTrigger,{buttonProps:{...n,iconOnly:!0,variant:r.Variants.Transparent,size:M.getSize(s)},children:"Options"}),e.jsx(f.PopoverContent,{padding:!1,children:e.jsx(b,{items:o,onSelect:l})})]})})},w=n=>({label:"Pin left",key:"pin-left",itemIcon:e.jsx(j,{}),onClick:()=>n.column.pin(r.Positions.Left)}),H=n=>({label:"Pin right",key:"pin-right",itemIcon:e.jsx(q,{}),onClick:()=>n.column.pin(r.Positions.Right)}),R=n=>({label:"Unpin",key:"unpin",itemIcon:e.jsx(v,{}),onClick:()=>n.column.pin(!1)}),A=n=>({label:"Sort ascending",key:"sort-asc",itemIcon:e.jsx(I,{}),onClick:()=>n.column.toggleSorting(!1)}),D=n=>({label:"Sort descending",key:"sort-desc",itemIcon:e.jsx(y,{}),onClick:()=>n.column.toggleSorting(!0)}),T=n=>({label:"Unsort",key:"unsort",itemIcon:e.jsx(k,{}),onClick:()=>n.column.clearSorting()}),U=(n,o={})=>t.useMemo(()=>{const{sorting:s,columnPinning:i,pinningOptions:c=!0}=o,{isPlaceholder:l,column:{getCanPin:u,getCanSort:d,getIsPinned:m,getIsSorted:g}}=n,{menuItems:p}=n.column.columnDef,a=typeof p=="function"?p(n):p,P=i&&c&&!l&&u(),C=s&&d();return[...P?[...m()!==!1?[R(n)]:[],...m()!==r.Positions.Left?[w(n)]:[],...m()!==r.Positions.Right?[H(n)]:[]]:[],...C?[...P?[{type:"divider"}]:[],...g()!=="asc"?[A(n)]:[],...g()!=="desc"?[D(n)]:[],...g()!==!1?[T(n)]:[]]:[],...a&&a.length>0?[...P||C?[{type:"divider"}]:[],...a]:[]]},[o,n]),z=(n,o={})=>{const s=t.useMemo(()=>n.column.columnDef.menuItems,[n]),i=t.useMemo(()=>typeof s=="function"?s(n):s,[s,n]),c=t.useMemo(()=>o.columnPinning&&o.pinningOptions&&!n.isPlaceholder&&n.column.getCanPin(),[o,n]),l=t.useMemo(()=>o.sorting&&n.column.getCanSort(),[o,n]),u=t.useMemo(()=>((i==null?void 0:i.length)??0)>0,[i]);return t.useMemo(()=>c&&!l&&!u?"pin-only":"any",[c,l,u])};exports.HeaderCellMenu=O;exports.useHeaderCellMenuItems=U;exports.useHeaderCellMenuKind=z;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react/jsx-runtime"),t=require("react"),r=require("../../../../react-base/src/consts/index.js"),M=require("../../hooks/useTable.js"),x=require("../../utils/tableUtils.js"),I=require("../../../Flexbox/Flexbox.js"),f=require("../../../Popover/Popover.js"),S=require("../../../Menu/Menu.js"),b=require("../../../Icon/components/ArrowDown.js"),y=require("../../../Icon/components/ArrowLeft.js"),j=require("../../../Icon/components/ArrowRight.js"),q=require("../../../Icon/components/ArrowUp.js"),k=require("../../../Icon/components/ChevronUpDown.js"),v=require("../../../Icon/components/PinRemove.js"),O=({triggerOptions:e,menuItems:o})=>{const{size:s=r.Sizes.Medium}=M.useTable(),[c,i]=t.useState(!1),l=t.useCallback(()=>i(!1),[]);return n.jsx(I,{alignItems:"center",flexGrow:"1",justifyContent:"flex-end",children:n.jsxs(f.Popover,{open:c,onOpenChange:i,children:[n.jsx(f.PopoverTrigger,{buttonProps:{...e,iconOnly:!0,variant:r.Variants.Transparent,size:x.getSize(s)},children:"Options"}),n.jsx(f.PopoverContent,{padding:!1,children:n.jsx(S,{items:o,onSelect:l})})]})})},w=e=>({label:"Pin left",key:"pin-left",itemIcon:n.jsx(y,{}),onClick:()=>e.column.pin(r.Positions.Left)}),H=e=>({label:"Pin right",key:"pin-right",itemIcon:n.jsx(j,{}),onClick:()=>e.column.pin(r.Positions.Right)}),R=e=>({label:"Unpin",key:"unpin",itemIcon:n.jsx(v,{}),onClick:()=>e.column.pin(!1)}),h=e=>({label:"Sort ascending",key:"sort-asc",itemIcon:n.jsx(q,{}),onClick:()=>e.column.toggleSorting(!1)}),A=e=>({label:"Sort descending",key:"sort-desc",itemIcon:n.jsx(b,{}),onClick:()=>e.column.toggleSorting(!0)}),D=e=>({label:"Unsort",key:"unsort",itemIcon:n.jsx(k,{}),onClick:()=>e.column.clearSorting()}),T=(e,o={})=>t.useMemo(()=>{const{sorting:s,columnPinning:c,pinningOptions:i=!0}=o,{isPlaceholder:l,column:{getCanPin:u,getCanSort:d,getIsPinned:m,getIsSorted:g}}=e,{menuItems:a}=e.column.columnDef,p=typeof a=="function"?a(e):a,P=c&&i&&!l&&u(),C=s&&d();return[...P?[...m()!==!1?[R(e)]:[],...m()!==r.Positions.Left?[w(e)]:[],...m()!==r.Positions.Right?[H(e)]:[]]:[],...C?[...P?[{type:"divider"}]:[],...g()!=="asc"?[h(e)]:[],...g()!=="desc"?[A(e)]:[],...g()!==!1?[D(e)]:[]]:[],...p&&p.length>0?[...P||C?[{type:"divider"}]:[],...p]:[]]},[o,e]),U=(e,o={})=>{const s=t.useMemo(()=>e.column.columnDef.menuItems,[e]),c=t.useMemo(()=>typeof s=="function"?s(e):s,[s,e]),i=t.useMemo(()=>o.columnPinning&&o.pinningOptions&&!e.isPlaceholder&&e.column.getCanPin(),[o,e]),l=t.useMemo(()=>o.sorting&&e.column.getCanSort(),[o,e]),u=t.useMemo(()=>(c?.length??0)>0,[c]);return t.useMemo(()=>i&&!l&&!u?"pin-only":"any",[i,l,u])};exports.HeaderCellMenu=O;exports.useHeaderCellMenuItems=T;exports.useHeaderCellMenuKind=U;
 //# sourceMappingURL=HeaderCellMenu.js.map