@veeqo/ui 9.9.0 → 9.9.2

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.css"],"sourcesContent":[".bodyCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,64CAA64C,CAAC;AAC94C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,QAAQ,GAAG;;;;"}
+{"version":3,"file":"BodyCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.css"],"sourcesContent":[".bodyCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,ijDAAijD,CAAC;AACljD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,QAAQ,GAAG;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.js

@@ -1,9 +1,9 @@
-const cssContents = `._baseCell_1w2bt_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._bodyCell_w9phy_1{background-color:#fff;color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-size:var(--text-body-small-font-size);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}.data-grid-row.striped:nth-of-type(odd)>._bodyCell_w9phy_1{background-color:var(--colors-neutral-grey-lightest)}.data-grid-row.selected>._bodyCell_w9phy_1{background-color:var(--colors-brand-blue-lightest)}.data-grid-row+.data-grid-row>._bodyCell_w9phy_1{border-top:1px solid var(--colors-neutral-grey-base)}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiQm9keUNlbGwubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBQSxzQkFBQSxrQkFBQSx3QkFBQSwySEFBQSwwQkFBQSxDQUFBLEFDQUEsbUJBR0UscUJBQXVCLENBRXZCLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsMENBQTJDLENBQzNDLDhDQUErQyxDQUMvQyw4Q0FDRixDQUVBLDJEQUNFLG9EQUNGLENBRUEsMkNBQ0Usa0RBQ0YsQ0FFQSxpREFDRSxvREFDRiIsImZpbGUiOiJCb2R5Q2VsbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCIuYm9keUNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtYm9keS1zbWFsbC1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWJvZHktc21hbGwtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtYm9keS1zbWFsbC1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG59XG5cbjpnbG9iYWwoLmRhdGEtZ3JpZC1yb3cuc3RyaXBlZDpudGgtb2YtdHlwZShvZGQpKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHRlc3QpO1xufVxuXG46Z2xvYmFsKC5kYXRhLWdyaWQtcm93LnNlbGVjdGVkKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1icmFuZC1ibHVlLWxpZ2h0ZXN0KTtcbn1cblxuOmdsb2JhbCguZGF0YS1ncmlkLXJvdyArIC5kYXRhLWdyaWQtcm93KSA+IC5ib2R5Q2VsbCB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWJhc2UpO1xufVxuIl19 */`;
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}._bodyCell_w9phy_1{background-color:#fff;color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-size:var(--text-body-small-font-size);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}.data-grid-row.striped:nth-of-type(odd)>._bodyCell_w9phy_1{background-color:var(--colors-neutral-grey-lightest)}.data-grid-row.selected>._bodyCell_w9phy_1{background-color:var(--colors-brand-blue-lightest)}.data-grid-row+.data-grid-row>._bodyCell_w9phy_1{border-top:1px solid var(--colors-neutral-grey-base)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiQm9keUNlbGwubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBQSxzQkFBQSxrQkFBQSx3QkFBQSwySEFBQSwwQkFBQSxDQUFBLDRCQUFBLFFBQUEsWUFBQSxzQkFBQSxXQUFBLG9CQUFBLGtCQUFBLHNCQUFBLFdBQUEsQ0FBQSw0QkFBQSxRQUFBLGtEQUFBLHdCQUFBLDBCQUFBLENBQUEsNkJBQUEsUUFBQSxtREFBQSx1QkFBQSwyQkFBQSxDQUFBLEFDQUEsbUJBR0UscUJBQXVCLENBRXZCLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsMENBQTJDLENBQzNDLDhDQUErQyxDQUMvQyw4Q0FDRixDQUVBLDJEQUNFLG9EQUNGLENBRUEsMkNBQ0Usa0RBQ0YsQ0FFQSxpREFDRSxvREFDRiIsImZpbGUiOiJCb2R5Q2VsbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCIuYm9keUNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtYm9keS1zbWFsbC1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWJvZHktc21hbGwtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtYm9keS1zbWFsbC1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG59XG5cbjpnbG9iYWwoLmRhdGEtZ3JpZC1yb3cuc3RyaXBlZDpudGgtb2YtdHlwZShvZGQpKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHRlc3QpO1xufVxuXG46Z2xvYmFsKC5kYXRhLWdyaWQtcm93LnNlbGVjdGVkKSA+IC5ib2R5Q2VsbCB7XG4gIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1icmFuZC1ibHVlLWxpZ2h0ZXN0KTtcbn1cblxuOmdsb2JhbCguZGF0YS1ncmlkLXJvdyArIC5kYXRhLWdyaWQtcm93KSA+IC5ib2R5Q2VsbCB7XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWJhc2UpO1xufVxuIl19 */`;
 const style = document.createElement('style');
 style.innerHTML = cssContents;
 document.head.appendChild(style);
-const bodyCell = '_bodyCell_w9phy_1 _baseCell_1w2bt_1';
+const bodyCell = '_bodyCell_w9phy_1 _baseCell_13swz_1';
 
 export { bodyCell };
 //# sourceMappingURL=BodyCell.module.css.js.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.css"],"sourcesContent":[".bodyCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,64CAA64C,CAAC;AAC94C,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,QAAQ,GAAG;;;;"}
+{"version":3,"file":"BodyCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.css"],"sourcesContent":[".bodyCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n\n:global(.data-grid-row.striped:nth-of-type(odd)) > .bodyCell {\n  background-color: var(--colors-neutral-grey-lightest);\n}\n\n:global(.data-grid-row.selected) > .bodyCell {\n  background-color: var(--colors-brand-blue-lightest);\n}\n\n:global(.data-grid-row + .data-grid-row) > .bodyCell {\n  border-top: 1px solid var(--colors-neutral-grey-base);\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,ijDAAijD,CAAC;AACljD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,QAAQ,GAAG;;;;"}

package/dist/components/DataGrid/components/CellContent/CellContent.module.css.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const cssContents = `._cellContent_16ovo_1{align-items:center;display:flex;gap:var(--sizes-small);padding:var(--density)}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNlbGxDb250ZW50Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsc0JBR0Usa0JBQW1CLENBRm5CLFlBQWEsQ0FHYixzQkFBdUIsQ0FGdkIsc0JBR0YiLCJmaWxlIjoiQ2VsbENvbnRlbnQubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jZWxsQ29udGVudCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBhZGRpbmc6IHZhcigtLWRlbnNpdHkpO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IHZhcigtLXNpemVzLXNtYWxsKTtcbn1cbiJdfQ== */`;
+const cssContents = `._cellContent_gaxlz_1{align-items:center;display:flex;gap:var(--sizes-sm);padding:var(--density)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNlbGxDb250ZW50Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsc0JBR0Usa0JBQW1CLENBRm5CLFlBQWEsQ0FHYixtQkFBb0IsQ0FGcEIsc0JBR0YiLCJmaWxlIjoiQ2VsbENvbnRlbnQubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jZWxsQ29udGVudCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBhZGRpbmc6IHZhcigtLWRlbnNpdHkpO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IHZhcigtLXNpemVzLXNtKTtcbn1cbiJdfQ== */`;
 const style = document.createElement('style');
 style.innerHTML = cssContents;
 document.head.appendChild(style);
-const cellContent = '_cellContent_16ovo_1';
+const cellContent = '_cellContent_gaxlz_1';
 
 exports.cellContent = cellContent;
 //# sourceMappingURL=CellContent.module.css.cjs.map

package/dist/components/DataGrid/components/CellContent/CellContent.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CellContent.module.css.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.css"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-small);\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,qcAAqc,CAAC;AACtc,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,WAAW,GAAG;;;;"}
+{"version":3,"file":"CellContent.module.css.cjs","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.css"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,icAAic,CAAC;AAClc,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,WAAW,GAAG;;;;"}

package/dist/components/DataGrid/components/CellContent/CellContent.module.css.js

@@ -1,9 +1,9 @@
-const cssContents = `._cellContent_16ovo_1{align-items:center;display:flex;gap:var(--sizes-small);padding:var(--density)}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNlbGxDb250ZW50Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsc0JBR0Usa0JBQW1CLENBRm5CLFlBQWEsQ0FHYixzQkFBdUIsQ0FGdkIsc0JBR0YiLCJmaWxlIjoiQ2VsbENvbnRlbnQubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jZWxsQ29udGVudCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBhZGRpbmc6IHZhcigtLWRlbnNpdHkpO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IHZhcigtLXNpemVzLXNtYWxsKTtcbn1cbiJdfQ== */`;
+const cssContents = `._cellContent_gaxlz_1{align-items:center;display:flex;gap:var(--sizes-sm);padding:var(--density)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkNlbGxDb250ZW50Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsc0JBR0Usa0JBQW1CLENBRm5CLFlBQWEsQ0FHYixtQkFBb0IsQ0FGcEIsc0JBR0YiLCJmaWxlIjoiQ2VsbENvbnRlbnQubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5jZWxsQ29udGVudCB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIHBhZGRpbmc6IHZhcigtLWRlbnNpdHkpO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IHZhcigtLXNpemVzLXNtKTtcbn1cbiJdfQ== */`;
 const style = document.createElement('style');
 style.innerHTML = cssContents;
 document.head.appendChild(style);
-const cellContent = '_cellContent_16ovo_1';
+const cellContent = '_cellContent_gaxlz_1';
 
 export { cellContent };
 //# sourceMappingURL=CellContent.module.css.js.map

package/dist/components/DataGrid/components/CellContent/CellContent.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CellContent.module.css.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.css"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-small);\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,qcAAqc,CAAC;AACtc,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,WAAW,GAAG;;;;"}
+{"version":3,"file":"CellContent.module.css.js","sources":["../../../../../src/components/DataGrid/components/CellContent/CellContent.module.css"],"sourcesContent":[".cellContent {\n  display: flex;\n  padding: var(--density);\n  align-items: center;\n  gap: var(--sizes-sm);\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,icAAic,CAAC;AAClc,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,WAAW,GAAG;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs

@@ -4,6 +4,7 @@ var React = require('react');
 var reactTable = require('@tanstack/react-table');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
+var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
 var CellContent = require('../../CellContent/CellContent.cjs');
 var FooterCell_module = require('./FooterCell.module.css.cjs');
 
@@ -11,13 +12,20 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const footerCellClassname = buildClassnames.buildClassnames([FooterCell_module.footerCell, 'data-grid-footer-cell']);
 /**
  * Renders a footer cell element, and its content, for a given column.
  */
 const FooterCell = ({ header, ariaRoles }) => {
     const { justifyContent, textAlign } = header.column.columnDef.meta;
-    return (React__default.default.createElement("th", { scope: "row", role: ariaRoles.cell, "aria-colindex": header.column.getIndex() + 1, className: footerCellClassname },
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({
+        column: header.column,
+    });
+    const footerCellClassname = buildClassnames.buildClassnames([
+        FooterCell_module.footerCell,
+        pinnedCellClassName,
+        'data-grid-footer-cell',
+    ]);
+    return (React__default.default.createElement("th", { scope: "row", role: ariaRoles.cell, "aria-colindex": header.column.getIndex() + 1, className: footerCellClassname, style: pinnedCellStyles },
         React__default.default.createElement(CellContent.CellContent, { contentStyle: { justifyContent, textAlign } }, reactTable.flexRender(header.column.columnDef.footer, header.getContext()))));
 };
 

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nconst footerCellClassname = buildClassnames([footerCell, 'data-grid-footer-cell']);\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["buildClassnames","footerCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;AAuBA,MAAM,mBAAmB,GAAGA,+BAAe,CAAC,CAACC,4BAAU,EAAE,uBAAuB,CAAC,CAAC;AAElF;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAEnE,QACEC,6CACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,mBACL,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAAA;AAE9B,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5EC,qBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
+{"version":3,"file":"FooterCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["usePinnedColumnStyles","buildClassnames","footerCell","React","CellContent","flexRender"],"mappings":";;;;;;;;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAGA,2CAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAGC,+BAAe,CAAC;QAC1CC,4BAAU;QACV,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEC,sBACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,sBAAA,CAAA,aAAA,CAACC,uBAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5EC,qBAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js

@@ -2,16 +2,24 @@ import React__default from 'react';
 import { flexRender } from '@tanstack/react-table';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
+import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
 import { CellContent } from '../../CellContent/CellContent.js';
 import { footerCell } from './FooterCell.module.css.js';
 
-const footerCellClassname = buildClassnames([footerCell, 'data-grid-footer-cell']);
 /**
  * Renders a footer cell element, and its content, for a given column.
  */
 const FooterCell = ({ header, ariaRoles }) => {
     const { justifyContent, textAlign } = header.column.columnDef.meta;
-    return (React__default.createElement("th", { scope: "row", role: ariaRoles.cell, "aria-colindex": header.column.getIndex() + 1, className: footerCellClassname },
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({
+        column: header.column,
+    });
+    const footerCellClassname = buildClassnames([
+        footerCell,
+        pinnedCellClassName,
+        'data-grid-footer-cell',
+    ]);
+    return (React__default.createElement("th", { scope: "row", role: ariaRoles.cell, "aria-colindex": header.column.getIndex() + 1, className: footerCellClassname, style: pinnedCellStyles },
         React__default.createElement(CellContent, { contentStyle: { justifyContent, textAlign } }, flexRender(header.column.columnDef.footer, header.getContext()))));
 };
 

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\nconst footerCellClassname = buildClassnames([footerCell, 'data-grid-footer-cell']);\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AAuBA,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,UAAU,EAAE,uBAAuB,CAAC,CAAC;AAElF;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IAEnE,QACEA,qCACE,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,mBACL,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAAA;AAE9B,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5E,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}
+{"version":3,"file":"FooterCell.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { flexRender, Header } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles';\n\nimport { AriaRoles } from '../../../types';\nimport { CellContent } from '../../CellContent';\n\nimport { footerCell } from './FooterCell.module.css';\n\ntype FooterCellProps = {\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n};\n\n/**\n * Renders a footer cell element, and its content, for a given column.\n */\nexport const FooterCell = ({ header, ariaRoles }: FooterCellProps) => {\n  const { justifyContent, textAlign } = header.column.columnDef.meta!;\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const footerCellClassname = buildClassnames([\n    footerCell,\n    pinnedCellClassName,\n    'data-grid-footer-cell',\n  ]);\n\n  return (\n    <th\n      scope=\"row\"\n      role={ariaRoles.cell}\n      aria-colindex={header.column.getIndex() + 1}\n      className={footerCellClassname}\n      style={pinnedCellStyles}\n    >\n      <CellContent contentStyle={{ justifyContent, textAlign } as React.CSSProperties}>\n        {flexRender(header.column.columnDef.footer, header.getContext())}\n      </CellContent>\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAyBA;;AAEG;AACU,MAAA,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,SAAS,EAAmB,KAAI;AACnE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;AAEnE,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;QAC1C,UAAU;QACV,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,QACEA,cACE,CAAA,aAAA,CAAA,IAAA,EAAA,EAAA,KAAK,EAAC,KAAK,EACX,IAAI,EAAE,SAAS,CAAC,IAAI,EACL,eAAA,EAAA,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,CAAC,EAC3C,SAAS,EAAE,mBAAmB,EAC9B,KAAK,EAAE,gBAAgB,EAAA;AAEvB,QAAAA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,YAAY,EAAE,EAAE,cAAc,EAAE,SAAS,EAAyB,EAAA,EAC5E,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,CACpD,CACX;AAET;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const cssContents = `._baseCell_1w2bt_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._footerCell_1jfhd_1{background-color:var(--colors-neutral-grey-lightest);border-top:var(--sizes-line) solid var(--colors-secondary-blue-base);color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-style:var(--text-body-small-font-style);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiRm9vdGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsQUNBQSxxQkFVRSxvREFBcUQsQ0FEckQsb0VBQXFFLENBTnJFLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsNENBQTZDLENBQzdDLDhDQUErQyxDQUMvQyw4Q0FJRiIsImZpbGUiOiJGb290ZXJDZWxsLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6W251bGwsIi5mb290ZXJDZWxsIHtcbiAgY29tcG9zZXM6IGJhc2VDZWxsIGZyb20gJy4uLy4uLy4uL0RhdGFHcmlkLm1vZHVsZS5jc3MnO1xuXG4gIGNvbG9yOiB2YXIoLS10ZXh0LWJvZHktc21hbGwtY29sb3IpO1xuICBmb250LWZhbWlseTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtZmFtaWx5KTtcbiAgZm9udC1zdHlsZTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtc3R5bGUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG5cbiAgYm9yZGVyLXRvcDogdmFyKC0tc2l6ZXMtbGluZSkgc29saWQgdmFyKC0tY29sb3JzLXNlY29uZGFyeS1ibHVlLWJhc2UpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWxpZ2h0ZXN0KTtcbn1cbiJdfQ== */`;
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}._footerCell_1jfhd_1{background-color:var(--colors-neutral-grey-lightest);border-top:var(--sizes-line) solid var(--colors-secondary-blue-base);color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-style:var(--text-body-small-font-style);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiRm9vdGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsNEJBQUEsUUFBQSxZQUFBLHNCQUFBLFdBQUEsb0JBQUEsa0JBQUEsc0JBQUEsV0FBQSxDQUFBLDRCQUFBLFFBQUEsa0RBQUEsd0JBQUEsMEJBQUEsQ0FBQSw2QkFBQSxRQUFBLG1EQUFBLHVCQUFBLDJCQUFBLENBQUEsQUNBQSxxQkFVRSxvREFBcUQsQ0FEckQsb0VBQXFFLENBTnJFLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsNENBQTZDLENBQzdDLDhDQUErQyxDQUMvQyw4Q0FJRiIsImZpbGUiOiJGb290ZXJDZWxsLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6W251bGwsIi5mb290ZXJDZWxsIHtcbiAgY29tcG9zZXM6IGJhc2VDZWxsIGZyb20gJy4uLy4uLy4uL0RhdGFHcmlkLm1vZHVsZS5jc3MnO1xuXG4gIGNvbG9yOiB2YXIoLS10ZXh0LWJvZHktc21hbGwtY29sb3IpO1xuICBmb250LWZhbWlseTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtZmFtaWx5KTtcbiAgZm9udC1zdHlsZTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtc3R5bGUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG5cbiAgYm9yZGVyLXRvcDogdmFyKC0tc2l6ZXMtbGluZSkgc29saWQgdmFyKC0tY29sb3JzLXNlY29uZGFyeS1ibHVlLWJhc2UpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWxpZ2h0ZXN0KTtcbn1cbiJdfQ== */`;
 const style = document.createElement('style');
 style.innerHTML = cssContents;
 document.head.appendChild(style);
-const footerCell = '_footerCell_1jfhd_1 _baseCell_1w2bt_1';
+const footerCell = '_footerCell_1jfhd_1 _baseCell_13swz_1';
 
 exports.footerCell = footerCell;
 //# sourceMappingURL=FooterCell.module.css.cjs.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css"],"sourcesContent":[".footerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,yhCAAyhC,CAAC;AAC1hC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,UAAU,GAAG;;;;"}
+{"version":3,"file":"FooterCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css"],"sourcesContent":[".footerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,6rCAA6rC,CAAC;AAC9rC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,UAAU,GAAG;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.js

@@ -1,9 +1,9 @@
-const cssContents = `._baseCell_1w2bt_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._footerCell_1jfhd_1{background-color:var(--colors-neutral-grey-lightest);border-top:var(--sizes-line) solid var(--colors-secondary-blue-base);color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-style:var(--text-body-small-font-style);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiRm9vdGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsQUNBQSxxQkFVRSxvREFBcUQsQ0FEckQsb0VBQXFFLENBTnJFLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsNENBQTZDLENBQzdDLDhDQUErQyxDQUMvQyw4Q0FJRiIsImZpbGUiOiJGb290ZXJDZWxsLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6W251bGwsIi5mb290ZXJDZWxsIHtcbiAgY29tcG9zZXM6IGJhc2VDZWxsIGZyb20gJy4uLy4uLy4uL0RhdGFHcmlkLm1vZHVsZS5jc3MnO1xuXG4gIGNvbG9yOiB2YXIoLS10ZXh0LWJvZHktc21hbGwtY29sb3IpO1xuICBmb250LWZhbWlseTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtZmFtaWx5KTtcbiAgZm9udC1zdHlsZTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtc3R5bGUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG5cbiAgYm9yZGVyLXRvcDogdmFyKC0tc2l6ZXMtbGluZSkgc29saWQgdmFyKC0tY29sb3JzLXNlY29uZGFyeS1ibHVlLWJhc2UpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWxpZ2h0ZXN0KTtcbn1cbiJdfQ== */`;
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}._footerCell_1jfhd_1{background-color:var(--colors-neutral-grey-lightest);border-top:var(--sizes-line) solid var(--colors-secondary-blue-base);color:var(--text-body-small-color);font-family:var(--text-body-small-font-family);font-style:var(--text-body-small-font-style);font-weight:var(--text-body-small-font-weight);line-height:var(--text-body-small-line-height)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiRm9vdGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsNEJBQUEsUUFBQSxZQUFBLHNCQUFBLFdBQUEsb0JBQUEsa0JBQUEsc0JBQUEsV0FBQSxDQUFBLDRCQUFBLFFBQUEsa0RBQUEsd0JBQUEsMEJBQUEsQ0FBQSw2QkFBQSxRQUFBLG1EQUFBLHVCQUFBLDJCQUFBLENBQUEsQUNBQSxxQkFVRSxvREFBcUQsQ0FEckQsb0VBQXFFLENBTnJFLGtDQUFtQyxDQUNuQyw4Q0FBK0MsQ0FDL0MsNENBQTZDLENBQzdDLDhDQUErQyxDQUMvQyw4Q0FJRiIsImZpbGUiOiJGb290ZXJDZWxsLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6W251bGwsIi5mb290ZXJDZWxsIHtcbiAgY29tcG9zZXM6IGJhc2VDZWxsIGZyb20gJy4uLy4uLy4uL0RhdGFHcmlkLm1vZHVsZS5jc3MnO1xuXG4gIGNvbG9yOiB2YXIoLS10ZXh0LWJvZHktc21hbGwtY29sb3IpO1xuICBmb250LWZhbWlseTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtZmFtaWx5KTtcbiAgZm9udC1zdHlsZTogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtc3R5bGUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1ib2R5LXNtYWxsLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtYm9keS1zbWFsbC1saW5lLWhlaWdodCk7XG5cbiAgYm9yZGVyLXRvcDogdmFyKC0tc2l6ZXMtbGluZSkgc29saWQgdmFyKC0tY29sb3JzLXNlY29uZGFyeS1ibHVlLWJhc2UpO1xuICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1jb2xvcnMtbmV1dHJhbC1ncmV5LWxpZ2h0ZXN0KTtcbn1cbiJdfQ== */`;
 const style = document.createElement('style');
 style.innerHTML = cssContents;
 document.head.appendChild(style);
-const footerCell = '_footerCell_1jfhd_1 _baseCell_1w2bt_1';
+const footerCell = '_footerCell_1jfhd_1 _baseCell_13swz_1';
 
 export { footerCell };
 //# sourceMappingURL=FooterCell.module.css.js.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css"],"sourcesContent":[".footerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,yhCAAyhC,CAAC;AAC1hC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,UAAU,GAAG;;;;"}
+{"version":3,"file":"FooterCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.css"],"sourcesContent":[".footerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,6rCAA6rC,CAAC;AAC9rC,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC;AAC7C,KAAK,CAAC,SAAS,GAAG,WAAW;AAC7B,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;AAC3B,MAAC,UAAU,GAAG;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs

@@ -5,6 +5,7 @@ var index = require('../../../../theme/index.cjs');
 var buildClassnames = require('../../../../utils/buildClassnames.cjs');
 var Container = require('./Container/Container.cjs');
 var GridContainer_module = require('./GridContainer.module.css.cjs');
+var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -15,11 +16,15 @@ const gridContainerClassname = buildClassnames.buildClassnames([GridContainer_mo
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
-    React__default.default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
-            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
-            '--density': index.theme.sizes[density],
-        }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => {
+    const { pinnedColumnLayoutStyles } = usePinnedColumnLayout.usePinnedColumnLayout({ table });
+    return (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
+        React__default.default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
+                tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
+                '--density': index.theme.sizes[density],
+                ...pinnedColumnLayoutStyles,
+            }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
+};
 
 exports.GridContainer = GridContainer;
 //# sourceMappingURL=GridContainer.cjs.map

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport { dataGridStyle } from './GridContainer.module.css';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => (\n  <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n    <table\n      ref={tableRef}\n      className={gridContainerClassname}\n      role={ariaRoles.table}\n      style={\n        {\n          tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n          '--density': theme.sizes[density],\n        } as CSSProperties\n      }\n      aria-colcount={table.getFlatHeaders().length}\n      aria-rowcount={table.getRowCount()}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </table>\n  </Container>\n);\n"],"names":["buildClassnames","dataGridStyle","React","Container","theme"],"mappings":";;;;;;;;;;;;AA6DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,kCAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;AAGG;MACU,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,MACnBC,sBAAC,CAAA,aAAA,CAAAC,mBAAS,IAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,IAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;YACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,YAAA,WAAW,EAAEE,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjB,SAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;;;;"}
+{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport { dataGridStyle } from './GridContainer.module.css';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","dataGridStyle","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;AA8DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,kCAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAD,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEE,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.js

@@ -3,17 +3,22 @@ import { theme } from '../../../../theme/index.js';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
 import { Container } from './Container/Container.js';
 import { dataGridStyle } from './GridContainer.module.css.js';
+import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
 
 const gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);
 /**
  * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies
  * styling and sets table-specific CSS variables (such as density).
  */
-const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
-    React__default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
-            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
-            '--density': theme.sizes[density],
-        }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
+const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, 'aria-label': ariaLabel, }) => {
+    const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });
+    return (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
+        React__default.createElement("table", { ref: tableRef, className: gridContainerClassname, role: ariaRoles.table, style: {
+                tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
+                '--density': theme.sizes[density],
+                ...pinnedColumnLayoutStyles,
+            }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
+};
 
 export { GridContainer };
 //# sourceMappingURL=GridContainer.js.map

package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport { dataGridStyle } from './GridContainer.module.css';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => (\n  <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n    <table\n      ref={tableRef}\n      className={gridContainerClassname}\n      role={ariaRoles.table}\n      style={\n        {\n          tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n          '--density': theme.sizes[density],\n        } as CSSProperties\n      }\n      aria-colcount={table.getFlatHeaders().length}\n      aria-rowcount={table.getRowCount()}\n      aria-label={ariaLabel}\n    >\n      {children}\n    </table>\n  </Container>\n);\n"],"names":["React"],"mappings":";;;;;;AA6DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;AAGG;MACU,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,MACnBA,cAAC,CAAA,aAAA,CAAA,SAAS,IAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,IAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;YACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,YAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjB,SAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;;;;"}
+{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport { dataGridStyle } from './GridContainer.module.css';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> & {\n  /**\n   * Reference to be used for the outer container element.\n   */\n  containerRef?: RefObject<HTMLDivElement>;\n\n  /**\n   * Reference to be used for the table element.\n   */\n  tableRef?: RefObject<HTMLTableElement>;\n\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  containerStyles?: CSSProperties;\n\n  /**\n   * ARIA roles used in the grid.\n   */\n  ariaRoles: AriaRoles;\n\n  /**\n   * Whether resizeable columns are enabled or not.\n   */\n  enableResizeableColumns: boolean;\n\n  /**\n   * Density of the grid.\n   */\n  density: keyof SizeScale;\n\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * Child elements (table contents).\n   */\n  children: ReactNode;\n};\n\nconst gridContainerClassname = buildClassnames([dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        ref={tableRef}\n        className={gridContainerClassname}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;AA8DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAE5E;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;AAC1E,QAAAA,cAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,sBAAsB,EACjC,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs

@@ -5,15 +5,21 @@ var reactTable = require('@tanstack/react-table');
 var buildClassnames = require('../../../../../utils/buildClassnames.cjs');
 require('uid/secure');
 var isLastColumn = require('../../../utils/isLastColumn.cjs');
+var usePinnedColumnStyles = require('../../../hooks/usePinnedColumnStyles.cjs');
 var Resizer = require('../Resizer/Resizer.cjs');
 var HeaderCell_module = require('./HeaderCell.module.css.cjs');
+var SortIcon = require('./SortIcon/SortIcon.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const headerCellClassname = buildClassnames.buildClassnames([HeaderCell_module.headerCell, 'data-grid-row-header']);
-const headerContentClassname = buildClassnames.buildClassnames([HeaderCell_module.headerContent, 'data-grid-header-content']);
+const getAriaSort = (sortDirection) => {
+    if (!sortDirection) {
+        return undefined;
+    }
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+};
 /**
  * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,
  * if resizing is enabled.
@@ -21,16 +27,34 @@ const headerContentClassname = buildClassnames.buildClassnames([HeaderCell_modul
 const HeaderCell = ({ table, header, index }) => {
     const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta;
     const headerRenderer = header.column.columnDef.header;
+    const sortable = table.options.enableSorting && header.column.getCanSort();
+    const isSorted = header.column.getIsSorted();
+    const ariaSort = getAriaSort(isSorted);
     const resizeable = table.options.enableColumnResizing &&
         header.column.getCanResize() &&
         !isLastColumn.isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles.usePinnedColumnStyles({
+        column: header.column,
+    });
+    const headerCellClassname = buildClassnames.buildClassnames([
+        HeaderCell_module.headerCell,
+        pinnedCellClassName,
+        'data-grid-header-cell',
+    ]);
+    const HeaderContents = reactTable.flexRender(headerRenderer, header.getContext());
+    const HeaderContentComponent = sortable ? 'button' : 'div';
+    const headerContentClassname = buildClassnames.buildClassnames([
+        sortable ? HeaderCell_module.clickableHeaderContent : HeaderCell_module.headerContent,
+        'data-grid-header-content',
+    ]);
     const headerContentProps = {
         justifyContent,
         textAlign,
     };
-    const HeaderContents = reactTable.flexRender(headerRenderer, header.getContext());
-    return (React__default.default.createElement("th", { className: headerCellClassname, role: "columnheader", scope: "col", "aria-colindex": index + 1, "aria-label": getAriaLabel === null || getAriaLabel === undefined ? undefined : getAriaLabel() },
-        React__default.default.createElement("div", { className: headerContentClassname, style: headerContentProps }, typeof headerRenderer === 'string' ? (React__default.default.createElement("span", { className: HeaderCell_module.headerOverflow }, HeaderContents)) : (HeaderContents)),
+    return (React__default.default.createElement("th", { className: headerCellClassname, role: "columnheader", scope: "col", "aria-colindex": index + 1, "aria-label": getAriaLabel === null || getAriaLabel === undefined ? undefined : getAriaLabel(), style: pinnedCellStyles, "aria-sort": ariaSort },
+        React__default.default.createElement(HeaderContentComponent, { className: headerContentClassname, style: headerContentProps, onClick: sortable ? header.column.getToggleSortingHandler() : undefined },
+            typeof headerRenderer === 'string' ? (React__default.default.createElement("span", { className: HeaderCell_module.headerOverflow }, HeaderContents)) : (HeaderContents),
+            sortable && React__default.default.createElement(SortIcon.SortIcon, { isSorted: isSorted })),
         resizeable && (React__default.default.createElement(Resizer.Resizer, { getIsResizing: header.column.getIsResizing, getResizeHandler: header.getResizeHandler(), resetSize: header.column.resetSize, deltaOffset: table.options.columnResizeMode === 'onChange'
                 ? null
                 : table.getState().columnSizingInfo.deltaOffset }))));

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport { headerCell, headerContent, headerOverflow } from './HeaderCell.module.css';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst headerCellClassname = buildClassnames([headerCell, 'data-grid-row-header']);\nconst headerContentClassname = buildClassnames([headerContent, 'data-grid-header-content']);\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n    >\n      {/* Header content */}\n      <div className={headerContentClassname} style={headerContentProps}>\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n      </div>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["buildClassnames","headerCell","headerContent","isLastColumn","flexRender","React","headerOverflow","Resizer"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAM,mBAAmB,GAAGA,+BAAe,CAAC,CAACC,4BAAU,EAAE,sBAAsB,CAAC,CAAC;AACjF,MAAM,sBAAsB,GAAGD,+BAAe,CAAC,CAACE,+BAAa,EAAE,0BAA0B,CAAC,CAAC;AAE3F;;;AAGG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAmB,KAAI;AACtE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IACjF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;AAErD,IAAA,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,oBAAoB;AAClC,QAAA,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;QAC5B,CAACC,yBAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,MAAM,kBAAkB,GAAG;QACzB,cAAc;QACd,SAAS;KACO;IAElB,MAAM,cAAc,GAAGC,qBAAU,CAAC,cAAc,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC;IAEtE,QACEC,6CACE,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,KAAK,EAAA,eAAA,EACI,KAAK,GAAG,CAAC,EAAA,YAAA,EACZ,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI,EAAA;AAG5B,QAAAA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,sBAAsB,EAAE,KAAK,EAAE,kBAAkB,EAAA,EAE9D,OAAO,cAAc,KAAK,QAAQ,IACjCA,sBAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAEC,gCAAc,EAAA,EAAG,cAAc,CAAQ,KAExD,cAAc,CACf,CACG;AAGL,QAAA,UAAU,KACTD,sBAAA,CAAA,aAAA,CAACE,eAAO,EAAA,EACN,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,EAC1C,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,EAClC,WAAW,EACT,KAAK,CAAC,OAAO,CAAC,gBAAgB,KAAK;AACjC,kBAAE;AACF,kBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAA,CAEnD,CACH,CACE;AAET;;;;"}
+{"version":3,"file":"HeaderCell.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { isLastColumn } from '../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport {\n  headerCell,\n  headerContent,\n  headerOverflow,\n  clickableHeaderContent,\n} from './HeaderCell.module.css';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n  if (!sortDirection) {\n    return undefined;\n  }\n\n  return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const sortable = table.options.enableSorting && header.column.getCanSort();\n  const isSorted = header.column.getIsSorted();\n  const ariaSort = getAriaSort(isSorted);\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const headerCellClassname = buildClassnames([\n    headerCell,\n    pinnedCellClassName,\n    'data-grid-header-cell',\n  ]);\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n  const HeaderContentComponent = sortable ? 'button' : 'div';\n  const headerContentClassname = buildClassnames([\n    sortable ? clickableHeaderContent : headerContent,\n    'data-grid-header-content',\n  ]);\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n      style={pinnedCellStyles}\n      aria-sort={ariaSort}\n    >\n      {/* Header content */}\n      <HeaderContentComponent\n        className={headerContentClassname}\n        style={headerContentProps}\n        onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n      >\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n\n        {sortable && <SortIcon isSorted={isSorted} />}\n      </HeaderContentComponent>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["isLastColumn","usePinnedColumnStyles","buildClassnames","headerCell","flexRender","clickableHeaderContent","headerContent","React","headerOverflow","SortIcon","Resizer"],"mappings":"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"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js

@@ -3,11 +3,17 @@ import { flexRender } from '@tanstack/react-table';
 import { buildClassnames } from '../../../../../utils/buildClassnames.js';
 import 'uid/secure';
 import { isLastColumn } from '../../../utils/isLastColumn.js';
+import { usePinnedColumnStyles } from '../../../hooks/usePinnedColumnStyles.js';
 import { Resizer } from '../Resizer/Resizer.js';
-import { headerCell, headerContent, headerOverflow } from './HeaderCell.module.css.js';
+import { headerCell, clickableHeaderContent, headerContent, headerOverflow } from './HeaderCell.module.css.js';
+import { SortIcon } from './SortIcon/SortIcon.js';
 
-const headerCellClassname = buildClassnames([headerCell, 'data-grid-row-header']);
-const headerContentClassname = buildClassnames([headerContent, 'data-grid-header-content']);
+const getAriaSort = (sortDirection) => {
+    if (!sortDirection) {
+        return undefined;
+    }
+    return sortDirection === 'asc' ? 'ascending' : 'descending';
+};
 /**
  * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,
  * if resizing is enabled.
@@ -15,16 +21,34 @@ const headerContentClassname = buildClassnames([headerContent, 'data-grid-header
 const HeaderCell = ({ table, header, index }) => {
     const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta;
     const headerRenderer = header.column.columnDef.header;
+    const sortable = table.options.enableSorting && header.column.getCanSort();
+    const isSorted = header.column.getIsSorted();
+    const ariaSort = getAriaSort(isSorted);
     const resizeable = table.options.enableColumnResizing &&
         header.column.getCanResize() &&
         !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.
+    const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({
+        column: header.column,
+    });
+    const headerCellClassname = buildClassnames([
+        headerCell,
+        pinnedCellClassName,
+        'data-grid-header-cell',
+    ]);
+    const HeaderContents = flexRender(headerRenderer, header.getContext());
+    const HeaderContentComponent = sortable ? 'button' : 'div';
+    const headerContentClassname = buildClassnames([
+        sortable ? clickableHeaderContent : headerContent,
+        'data-grid-header-content',
+    ]);
     const headerContentProps = {
         justifyContent,
         textAlign,
     };
-    const HeaderContents = flexRender(headerRenderer, header.getContext());
-    return (React__default.createElement("th", { className: headerCellClassname, role: "columnheader", scope: "col", "aria-colindex": index + 1, "aria-label": getAriaLabel === null || getAriaLabel === undefined ? undefined : getAriaLabel() },
-        React__default.createElement("div", { className: headerContentClassname, style: headerContentProps }, typeof headerRenderer === 'string' ? (React__default.createElement("span", { className: headerOverflow }, HeaderContents)) : (HeaderContents)),
+    return (React__default.createElement("th", { className: headerCellClassname, role: "columnheader", scope: "col", "aria-colindex": index + 1, "aria-label": getAriaLabel === null || getAriaLabel === undefined ? undefined : getAriaLabel(), style: pinnedCellStyles, "aria-sort": ariaSort },
+        React__default.createElement(HeaderContentComponent, { className: headerContentClassname, style: headerContentProps, onClick: sortable ? header.column.getToggleSortingHandler() : undefined },
+            typeof headerRenderer === 'string' ? (React__default.createElement("span", { className: headerOverflow }, HeaderContents)) : (HeaderContents),
+            sortable && React__default.createElement(SortIcon, { isSorted: isSorted })),
         resizeable && (React__default.createElement(Resizer, { getIsResizing: header.column.getIsResizing, getResizeHandler: header.getResizeHandler(), resetSize: header.column.resetSize, deltaOffset: table.options.columnResizeMode === 'onChange'
                 ? null
                 : table.getState().columnSizingInfo.deltaOffset }))));

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { isLastColumn } from '../../../utils';\n\nimport { Resizer } from '../Resizer';\nimport { headerCell, headerContent, headerOverflow } from './HeaderCell.module.css';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst headerCellClassname = buildClassnames([headerCell, 'data-grid-row-header']);\nconst headerContentClassname = buildClassnames([headerContent, 'data-grid-header-content']);\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n    >\n      {/* Header content */}\n      <div className={headerContentClassname} style={headerContentProps}>\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n      </div>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AA2BA,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,UAAU,EAAE,sBAAsB,CAAC,CAAC;AACjF,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,aAAa,EAAE,0BAA0B,CAAC,CAAC;AAE3F;;;AAGG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAmB,KAAI;AACtE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IACjF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;AAErD,IAAA,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,oBAAoB;AAClC,QAAA,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;QAC5B,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,MAAM,kBAAkB,GAAG;QACzB,cAAc;QACd,SAAS;KACO;IAElB,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC;IAEtE,QACEA,qCACE,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,KAAK,EAAA,eAAA,EACI,KAAK,GAAG,CAAC,EAAA,YAAA,EACZ,YAAY,KAAZ,IAAA,IAAA,YAAY,KAAZ,SAAA,GAAA,SAAA,GAAA,YAAY,EAAI,EAAA;AAG5B,QAAAA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,sBAAsB,EAAE,KAAK,EAAE,kBAAkB,EAAA,EAE9D,OAAO,cAAc,KAAK,QAAQ,IACjCA,cAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,cAAc,EAAA,EAAG,cAAc,CAAQ,KAExD,cAAc,CACf,CACG;AAGL,QAAA,UAAU,KACTA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,EAC1C,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,EAClC,WAAW,EACT,KAAK,CAAC,OAAO,CAAC,gBAAgB,KAAK;AACjC,kBAAE;AACF,kBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAA,CAEnD,CACH,CACE;AAET;;;;"}
+{"version":3,"file":"HeaderCell.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.tsx"],"sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { flexRender, Header, SortDirection, Table } from '@tanstack/react-table';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { isLastColumn } from '../../../utils';\n\nimport { usePinnedColumnStyles } from '../../../hooks';\n\nimport { Resizer } from '../Resizer';\nimport {\n  headerCell,\n  headerContent,\n  headerOverflow,\n  clickableHeaderContent,\n} from './HeaderCell.module.css';\n\nimport { SortIcon } from './SortIcon';\n\ntype HeaderCellProps = {\n  /**\n   * The TanStack Table instance.\n   */\n  table: Table<any>;\n\n  /**\n   * The Header within the TanStack Table instance.\n   */\n  header: Header<any, any>;\n\n  /**\n   * The index of this header in the grid.\n   */\n  index: number;\n};\n\nconst getAriaSort = (sortDirection: false | SortDirection) => {\n  if (!sortDirection) {\n    return undefined;\n  }\n\n  return sortDirection === 'asc' ? 'ascending' : 'descending';\n};\n\n/**\n * A header cell within the DataGrid component. Responsible for rendering the column header and resize bar,\n * if resizing is enabled.\n */\nexport const HeaderCell = ({ table, header, index }: HeaderCellProps) => {\n  const { justifyContent, textAlign, getAriaLabel } = header.column.columnDef.meta!;\n  const headerRenderer = header.column.columnDef.header;\n\n  const sortable = table.options.enableSorting && header.column.getCanSort();\n  const isSorted = header.column.getIsSorted();\n  const ariaSort = getAriaSort(isSorted);\n\n  const resizeable =\n    table.options.enableColumnResizing &&\n    header.column.getCanResize() &&\n    !isLastColumn(table, header.column); // Last column can't be resized since it occupies all remaining space.\n\n  const { pinnedCellClassName, pinnedCellStyles } = usePinnedColumnStyles({\n    column: header.column,\n  });\n\n  const headerCellClassname = buildClassnames([\n    headerCell,\n    pinnedCellClassName,\n    'data-grid-header-cell',\n  ]);\n\n  const HeaderContents = flexRender(headerRenderer, header.getContext());\n  const HeaderContentComponent = sortable ? 'button' : 'div';\n  const headerContentClassname = buildClassnames([\n    sortable ? clickableHeaderContent : headerContent,\n    'data-grid-header-content',\n  ]);\n  const headerContentProps = {\n    justifyContent,\n    textAlign,\n  } as CSSProperties;\n\n  return (\n    <th\n      className={headerCellClassname}\n      role=\"columnheader\"\n      scope=\"col\"\n      aria-colindex={index + 1}\n      aria-label={getAriaLabel?.()}\n      style={pinnedCellStyles}\n      aria-sort={ariaSort}\n    >\n      {/* Header content */}\n      <HeaderContentComponent\n        className={headerContentClassname}\n        style={headerContentProps}\n        onClick={sortable ? header.column.getToggleSortingHandler() : undefined}\n      >\n        {/* If we've been given just text to render, apply styles for text overflow */}\n        {typeof headerRenderer === 'string' ? (\n          <span className={headerOverflow}>{HeaderContents}</span>\n        ) : (\n          HeaderContents\n        )}\n\n        {sortable && <SortIcon isSorted={isSorted} />}\n      </HeaderContentComponent>\n\n      {/* Column resizer */}\n      {resizeable && (\n        <Resizer\n          getIsResizing={header.column.getIsResizing}\n          getResizeHandler={header.getResizeHandler()}\n          resetSize={header.column.resetSize}\n          deltaOffset={\n            table.options.columnResizeMode === 'onChange'\n              ? null\n              : table.getState().columnSizingInfo.deltaOffset\n          }\n        />\n      )}\n    </th>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAoCA,MAAM,WAAW,GAAG,CAAC,aAAoC,KAAI;IAC3D,IAAI,CAAC,aAAa,EAAE;AAClB,QAAA,OAAO,SAAS;AACjB;IAED,OAAO,aAAa,KAAK,KAAK,GAAG,WAAW,GAAG,YAAY;AAC7D,CAAC;AAED;;;AAGG;AACI,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAmB,KAAI;AACtE,IAAA,MAAM,EAAE,cAAc,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAK;IACjF,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;AAErD,IAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,aAAa,IAAI,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;IAC1E,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;AAC5C,IAAA,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,CAAC;AAEtC,IAAA,MAAM,UAAU,GACd,KAAK,CAAC,OAAO,CAAC,oBAAoB;AAClC,QAAA,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;QAC5B,CAAC,YAAY,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,MAAM,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,GAAG,qBAAqB,CAAC;QACtE,MAAM,EAAE,MAAM,CAAC,MAAM;AACtB,KAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,eAAe,CAAC;QAC1C,UAAU;QACV,mBAAmB;QACnB,uBAAuB;AACxB,KAAA,CAAC;IAEF,MAAM,cAAc,GAAG,UAAU,CAAC,cAAc,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC;IACtE,MAAM,sBAAsB,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK;IAC1D,MAAM,sBAAsB,GAAG,eAAe,CAAC;AAC7C,QAAA,QAAQ,GAAG,sBAAsB,GAAG,aAAa;QACjD,0BAA0B;AAC3B,KAAA,CAAC;AACF,IAAA,MAAM,kBAAkB,GAAG;QACzB,cAAc;QACd,SAAS;KACO;AAElB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EACE,SAAS,EAAE,mBAAmB,EAC9B,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,KAAK,EAAA,eAAA,EACI,KAAK,GAAG,CAAC,EAAA,YAAA,EACZ,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,EAAI,EAC5B,KAAK,EAAE,gBAAgB,eACZ,QAAQ,EAAA;QAGnBA,cAAC,CAAA,aAAA,CAAA,sBAAsB,EACrB,EAAA,SAAS,EAAE,sBAAsB,EACjC,KAAK,EAAE,kBAAkB,EACzB,OAAO,EAAE,QAAQ,GAAG,MAAM,CAAC,MAAM,CAAC,uBAAuB,EAAE,GAAG,SAAS,EAAA;YAGtE,OAAO,cAAc,KAAK,QAAQ,IACjCA,uCAAM,SAAS,EAAE,cAAc,EAAG,EAAA,cAAc,CAAQ,KAExD,cAAc,CACf;YAEA,QAAQ,IAAIA,6BAAC,QAAQ,EAAA,EAAC,QAAQ,EAAE,QAAQ,GAAI,CACtB;AAGxB,QAAA,UAAU,KACTA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EACN,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,aAAa,EAC1C,gBAAgB,EAAE,MAAM,CAAC,gBAAgB,EAAE,EAC3C,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,SAAS,EAClC,WAAW,EACT,KAAK,CAAC,OAAO,CAAC,gBAAgB,KAAK;AACjC,kBAAE;AACF,kBAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,WAAW,EAAA,CAEnD,CACH,CACE;AAET;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css.cjs

@@ -1,15 +1,19 @@
 'use strict';
 
-const cssContents = `._baseCell_1w2bt_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._headerCell_1khpx_1{background-color:#fff;border-bottom:var(--sizes-line) solid var(--colors-neutral-grey-base)}._headerContent_1khpx_8{align-items:center;color:var(--text-heading-table-color);display:flex;font-family:var(--text-heading-table-font-family);font-size:var(--text-heading-table-font-size);font-weight:var(--text-heading-table-font-weight);gap:var(--sizes-small);height:var(--sizes-6);line-height:var(--text-heading-table-line-height);padding:var(--density);white-space:nowrap}._headerOverflow_1khpx_24{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiSGVhZGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsQUNBQSxxQkFHRSxxQkFBdUIsQ0FDdkIscUVBQ0YsQ0FFQSx3QkFHRSxrQkFBbUIsQ0FNbkIscUNBQXNDLENBUnRDLFlBQWEsQ0FTYixpREFBa0QsQ0FDbEQsNkNBQThDLENBQzlDLGlEQUFrRCxDQVJsRCxzQkFBdUIsQ0FGdkIscUJBQXNCLENBV3RCLGlEQUFrRCxDQU5sRCxzQkFBdUIsQ0FGdkIsa0JBU0YsQ0FFQSwwQkFDRSxlQUFnQixDQUNoQixzQkFBdUIsQ0FDdkIsa0JBQ0YiLCJmaWxlIjoiSGVhZGVyQ2VsbC5tb2R1bGUuY3NzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCIuaGVhZGVyQ2VsbCB7XG4gIGNvbXBvc2VzOiBiYXNlQ2VsbCBmcm9tICcuLi8uLi8uLi9EYXRhR3JpZC5tb2R1bGUuY3NzJztcblxuICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTtcbiAgYm9yZGVyLWJvdHRvbTogdmFyKC0tc2l6ZXMtbGluZSkgc29saWQgdmFyKC0tY29sb3JzLW5ldXRyYWwtZ3JleS1iYXNlKTtcbn1cblxuLmhlYWRlckNvbnRlbnQge1xuICBkaXNwbGF5OiBmbGV4O1xuICBoZWlnaHQ6IHZhcigtLXNpemVzLTYpO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBnYXA6IHZhcigtLXNpemVzLXNtYWxsKTtcbiAgd2hpdGUtc3BhY2U6IG5vd3JhcDtcblxuICBwYWRkaW5nOiB2YXIoLS1kZW5zaXR5KTtcblxuICBjb2xvcjogdmFyKC0tdGV4dC1oZWFkaW5nLXRhYmxlLWNvbG9yKTtcbiAgZm9udC1mYW1pbHk6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1mb250LWZhbWlseSk7XG4gIGZvbnQtc2l6ZTogdmFyKC0tdGV4dC1oZWFkaW5nLXRhYmxlLWZvbnQtc2l6ZSk7XG4gIGZvbnQtd2VpZ2h0OiB2YXIoLS10ZXh0LWhlYWRpbmctdGFibGUtZm9udC13ZWlnaHQpO1xuICBsaW5lLWhlaWdodDogdmFyKC0tdGV4dC1oZWFkaW5nLXRhYmxlLWxpbmUtaGVpZ2h0KTtcbn1cblxuLmhlYWRlck92ZXJmbG93IHtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgdGV4dC1vdmVyZmxvdzogZWxsaXBzaXM7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG59XG4iXX0= */`;
+const cssContents = `._baseCell_13swz_1{box-sizing:border-box;position:relative;&:focus,&:focus-visible{box-shadow:inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);outline:var(--sizes-none)}}._pinnedColumnBase_13swz_12{&:after{bottom:-1px;box-sizing:border-box;content:"";pointer-events:none;position:absolute;top:var(--sizes-none);width:30px}}._pinnedColumnLeft_13swz_27{&:after{box-shadow:inset 10px 0 10px -8px rgba(0,0,0,.25);right:var(--sizes-none);transform:translate(100%)}}._pinnedColumnRight_13swz_39{&:after{box-shadow:inset -10px 0 10px -8px rgba(0,0,0,.25);left:var(--sizes-none);transform:translate(-100%)}}._headerCell_42pod_1{background-color:#fff;border-bottom:var(--sizes-line) solid var(--colors-neutral-grey-base)}._headerContent_42pod_8{align-items:center;color:var(--text-heading-table-color);display:flex;font-family:var(--text-heading-table-font-family);font-size:var(--text-heading-table-font-size);font-weight:var(--text-heading-table-font-weight);gap:var(--sizes-sm);height:var(--sizes-6);line-height:var(--text-heading-table-line-height);padding:var(--density);white-space:nowrap}._headerOverflow_42pod_24{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._clickableHeaderContent_42pod_30{appearance:none;background-color:transparent;border:var(--sizes-none);border-radius:var(--sizes-sm);cursor:pointer;width:100%;&:focus-visible{box-shadow:var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);outline:var(--sizes-none)}&:hover{._sortIcon_42pod_47{background-color:var(--colors-neutral-grey-light);color:var(--colors-neutral-ink-base)}}}._sortIcon_42pod_47{align-items:center;background-color:#fff;color:var(--colors-neutral-ink-lightest);display:flex;height:var(--sizes-4);justify-content:center;width:var(--sizes-4)}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIjxubyBzb3VyY2U+IiwiSGVhZGVyQ2VsbC5tb2R1bGUuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLG1CQUFBLHNCQUFBLGtCQUFBLHdCQUFBLDJIQUFBLDBCQUFBLENBQUEsNEJBQUEsUUFBQSxZQUFBLHNCQUFBLFdBQUEsb0JBQUEsa0JBQUEsc0JBQUEsV0FBQSxDQUFBLDRCQUFBLFFBQUEsa0RBQUEsd0JBQUEsMEJBQUEsQ0FBQSw2QkFBQSxRQUFBLG1EQUFBLHVCQUFBLDJCQUFBLENBQUEsQUNBQSxxQkFHRSxxQkFBdUIsQ0FDdkIscUVBQ0YsQ0FFQSx3QkFHRSxrQkFBbUIsQ0FNbkIscUNBQXNDLENBUnRDLFlBQWEsQ0FTYixpREFBa0QsQ0FDbEQsNkNBQThDLENBQzlDLGlEQUFrRCxDQVJsRCxtQkFBb0IsQ0FGcEIscUJBQXNCLENBV3RCLGlEQUFrRCxDQU5sRCxzQkFBdUIsQ0FGdkIsa0JBU0YsQ0FFQSwwQkFDRSxlQUFnQixDQUNoQixzQkFBdUIsQ0FDdkIsa0JBQ0YsQ0FFQSxrQ0FHRSxlQUFnQixDQUNoQiw0QkFBNkIsQ0FHN0Isd0JBQXlCLENBQ3pCLDZCQUE4QixDQUg5QixjQUFlLENBSWYsVUFBVyxDQUVYLGdCQUVFLHVHQUF3RyxDQUR4Ryx5QkFFRixDQUVBLFFBQ0Usb0JBQ0UsaURBQWtELENBQ2xELG9DQUNGLENBQ0YsQ0FDRixDQUVBLG9CQUtFLGtCQUFtQixDQUduQixxQkFBdUIsQ0FDdkIsd0NBQXlDLENBTHpDLFlBQWEsQ0FGYixxQkFBc0IsQ0FJdEIsc0JBQXVCLENBTHZCLG9CQVNGIiwiZmlsZSI6IkhlYWRlckNlbGwubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbbnVsbCwiLmhlYWRlckNlbGwge1xuICBjb21wb3NlczogYmFzZUNlbGwgZnJvbSAnLi4vLi4vLi4vRGF0YUdyaWQubW9kdWxlLmNzcyc7XG5cbiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7XG4gIGJvcmRlci1ib3R0b206IHZhcigtLXNpemVzLWxpbmUpIHNvbGlkIHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktYmFzZSk7XG59XG5cbi5oZWFkZXJDb250ZW50IHtcbiAgZGlzcGxheTogZmxleDtcbiAgaGVpZ2h0OiB2YXIoLS1zaXplcy02KTtcbiAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgZ2FwOiB2YXIoLS1zaXplcy1zbSk7XG4gIHdoaXRlLXNwYWNlOiBub3dyYXA7XG5cbiAgcGFkZGluZzogdmFyKC0tZGVuc2l0eSk7XG5cbiAgY29sb3I6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1jb2xvcik7XG4gIGZvbnQtZmFtaWx5OiB2YXIoLS10ZXh0LWhlYWRpbmctdGFibGUtZm9udC1mYW1pbHkpO1xuICBmb250LXNpemU6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1mb250LXNpemUpO1xuICBmb250LXdlaWdodDogdmFyKC0tdGV4dC1oZWFkaW5nLXRhYmxlLWZvbnQtd2VpZ2h0KTtcbiAgbGluZS1oZWlnaHQ6IHZhcigtLXRleHQtaGVhZGluZy10YWJsZS1saW5lLWhlaWdodCk7XG59XG5cbi5oZWFkZXJPdmVyZmxvdyB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuICB3aGl0ZS1zcGFjZTogbm93cmFwO1xufVxuXG4uY2xpY2thYmxlSGVhZGVyQ29udGVudCB7XG4gIGNvbXBvc2VzOiBoZWFkZXJDb250ZW50O1xuXG4gIGFwcGVhcmFuY2U6IG5vbmU7XG4gIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50O1xuICBjdXJzb3I6IHBvaW50ZXI7XG5cbiAgYm9yZGVyOiB2YXIoLS1zaXplcy1ub25lKTtcbiAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2l6ZXMtc20pO1xuICB3aWR0aDogMTAwJTtcblxuICAmOmZvY3VzLXZpc2libGUge1xuICAgIG91dGxpbmU6IHZhcigtLXNpemVzLW5vbmUpO1xuICAgIGJveC1zaGFkb3c6IHZhcigtLXNpemVzLW5vbmUpIHZhcigtLXNpemVzLW5vbmUpIHZhcigtLXNpemVzLW5vbmUpIDJweCB2YXIoLS1jb2xvcnMtc2Vjb25kYXJ5LWJsdWUtbGlnaHQpO1xuICB9XG5cbiAgJjpob3ZlciB7XG4gICAgLnNvcnRJY29uIHtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWdyZXktbGlnaHQpO1xuICAgICAgY29sb3I6IHZhcigtLWNvbG9ycy1uZXV0cmFsLWluay1iYXNlKTtcbiAgICB9XG4gIH1cbn1cblxuLnNvcnRJY29uIHtcbiAgd2lkdGg6IHZhcigtLXNpemVzLTQpO1xuICBoZWlnaHQ6IHZhcigtLXNpemVzLTQpO1xuXG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuXG4gIGJhY2tncm91bmQtY29sb3I6IHdoaXRlO1xuICBjb2xvcjogdmFyKC0tY29sb3JzLW5ldXRyYWwtaW5rLWxpZ2h0ZXN0KTtcbn0iXX0= */`;
 const style = document.createElement('style');
 style.innerHTML = cssContents;
 document.head.appendChild(style);
-const headerCell = '_headerCell_1khpx_1 _baseCell_1w2bt_1';
-const headerContent = '_headerContent_1khpx_8';
-const headerOverflow = '_headerOverflow_1khpx_24';
+const headerCell = '_headerCell_42pod_1 _baseCell_13swz_1';
+const headerContent = '_headerContent_42pod_8';
+const headerOverflow = '_headerOverflow_42pod_24';
+const clickableHeaderContent = '_clickableHeaderContent_42pod_30 _headerContent_42pod_8';
+const sortIcon = '_sortIcon_42pod_47';
 
+exports.clickableHeaderContent = clickableHeaderContent;
 exports.headerCell = headerCell;
 exports.headerContent = headerContent;
 exports.headerOverflow = headerOverflow;
+exports.sortIcon = sortIcon;
 //# sourceMappingURL=HeaderCell.module.css.cjs.map