@veeqo/ui 9.9.0 → 9.9.2

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css"],"sourcesContent":[".headerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  height: var(--sizes-6);\n  align-items: center;\n  gap: var(--sizes-small);\n  white-space: nowrap;\n\n  padding: var(--density);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,6gDAA6gD,CAAC;AAC9gD,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;AACd,MAAC,aAAa,GAAG;AACjB,MAAC,cAAc,GAAG;;;;;;"}
+{"version":3,"file":"HeaderCell.module.css.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css"],"sourcesContent":[".headerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  height: var(--sizes-6);\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  composes: headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}"],"names":[],"mappings":";;AACA,MAAM,WAAW,GAAG,CAAC;AACrB,q+FAAq+F,CAAC;AACt+F,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;AACd,MAAC,aAAa,GAAG;AACjB,MAAC,cAAc,GAAG;AAClB,MAAC,sBAAsB,GAAG;AAC1B,MAAC,QAAQ,GAAG;;;;;;;;"}

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

@@ -1,11 +1,13 @@
-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';
 
-export { headerCell, headerContent, headerOverflow };
+export { clickableHeaderContent, headerCell, headerContent, headerOverflow, sortIcon };
 //# sourceMappingURL=HeaderCell.module.css.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css"],"sourcesContent":[".headerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  height: var(--sizes-6);\n  align-items: center;\n  gap: var(--sizes-small);\n  white-space: nowrap;\n\n  padding: var(--density);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,6gDAA6gD,CAAC;AAC9gD,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;AACd,MAAC,aAAa,GAAG;AACjB,MAAC,cAAc,GAAG;;;;"}
+{"version":3,"file":"HeaderCell.module.css.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.css"],"sourcesContent":[".headerCell {\n  composes: baseCell from '../../../DataGrid.module.css';\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  height: var(--sizes-6);\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  composes: headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}"],"names":[],"mappings":"AACA,MAAM,WAAW,GAAG,CAAC;AACrB,q+FAAq+F,CAAC;AACt+F,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;AACd,MAAC,aAAa,GAAG;AACjB,MAAC,cAAc,GAAG;AAClB,MAAC,sBAAsB,GAAG;AAC1B,MAAC,QAAQ,GAAG;;;;"}

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

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var index = require('../../../../../../theme/index.cjs');
+var ArrowDownIcon = require('../../../../../../tempIcons/ArrowDownIcon.cjs');
+var ArrowUpIcon = require('../../../../../../tempIcons/ArrowUpIcon.cjs');
+var DoubleArrowIcon = require('../../../../../../tempIcons/DoubleArrowIcon.cjs');
+require('../../../../../../theme/modules/sizes.cjs');
+var HeaderCell_module = require('../HeaderCell.module.css.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+/**
+ * Sort icon for a column header.
+ */
+const SortIcon = ({ isSorted }) => {
+    const icon = React.useMemo(() => {
+        if (!isSorted) {
+            return React__default.default.createElement(DoubleArrowIcon.DoubleArrowIcon, { size: 5 });
+        }
+        return isSorted === 'asc' ? (React__default.default.createElement(ArrowUpIcon.ArrowUpIcon, { color: index.theme.colors.neutral.ink.dark, size: 5 })) : (React__default.default.createElement(ArrowDownIcon.ArrowDownIcon, { color: index.theme.colors.neutral.ink.dark, size: 5 }));
+    }, [isSorted]);
+    return React__default.default.createElement("span", { className: HeaderCell_module.sortIcon }, icon);
+};
+
+exports.SortIcon = SortIcon;
+//# sourceMappingURL=SortIcon.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortIcon.cjs","sources":["../../../../../../../src/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { SortDirection } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\n\nimport { ArrowDownIcon, ArrowUpIcon, DoubleArrowIcon } from '../../../../../../tempIcons';\nimport { sortIcon } from '../HeaderCell.module.css';\n\ntype SortIconProps = {\n  isSorted?: boolean | SortDirection;\n};\n\n/**\n * Sort icon for a column header.\n */\nexport const SortIcon = ({ isSorted }: SortIconProps) => {\n  const icon = useMemo(() => {\n    if (!isSorted) {\n      return <DoubleArrowIcon size={5} />;\n    }\n\n    return isSorted === 'asc' ? (\n      <ArrowUpIcon color={theme.colors.neutral.ink.dark} size={5} />\n    ) : (\n      <ArrowDownIcon color={theme.colors.neutral.ink.dark} size={5} />\n    );\n  }, [isSorted]);\n\n  return <span className={sortIcon}>{icon}</span>;\n};\n"],"names":["useMemo","React","DoubleArrowIcon","ArrowUpIcon","theme","ArrowDownIcon","sortIcon"],"mappings":";;;;;;;;;;;;;;AAaA;;AAEG;MACU,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAiB,KAAI;AACtD,IAAA,MAAM,IAAI,GAAGA,aAAO,CAAC,MAAK;QACxB,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAOC,qCAACC,+BAAe,EAAA,EAAC,IAAI,EAAE,CAAC,GAAI;AACpC;QAED,OAAO,QAAQ,KAAK,KAAK,IACvBD,sBAAC,CAAA,aAAA,CAAAE,uBAAW,EAAC,EAAA,KAAK,EAAEC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,KAE9DH,sBAAA,CAAA,aAAA,CAACI,2BAAa,EAAC,EAAA,KAAK,EAAED,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAI,CAAA,CACjE;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,OAAOH,+CAAM,SAAS,EAAEK,0BAAQ,EAAG,EAAA,IAAI,CAAQ;AACjD;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SortDirection } from '@tanstack/react-table';
+type SortIconProps = {
+    isSorted?: boolean | SortDirection;
+};
+/**
+ * Sort icon for a column header.
+ */
+export declare const SortIcon: ({ isSorted }: SortIconProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import React__default, { useMemo } from 'react';
+import { theme } from '../../../../../../theme/index.js';
+import { ArrowDownIcon } from '../../../../../../tempIcons/ArrowDownIcon.js';
+import { ArrowUpIcon } from '../../../../../../tempIcons/ArrowUpIcon.js';
+import { DoubleArrowIcon } from '../../../../../../tempIcons/DoubleArrowIcon.js';
+import '../../../../../../theme/modules/sizes.js';
+import { sortIcon } from '../HeaderCell.module.css.js';
+
+/**
+ * Sort icon for a column header.
+ */
+const SortIcon = ({ isSorted }) => {
+    const icon = useMemo(() => {
+        if (!isSorted) {
+            return React__default.createElement(DoubleArrowIcon, { size: 5 });
+        }
+        return isSorted === 'asc' ? (React__default.createElement(ArrowUpIcon, { color: theme.colors.neutral.ink.dark, size: 5 })) : (React__default.createElement(ArrowDownIcon, { color: theme.colors.neutral.ink.dark, size: 5 }));
+    }, [isSorted]);
+    return React__default.createElement("span", { className: sortIcon }, icon);
+};
+
+export { SortIcon };
+//# sourceMappingURL=SortIcon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortIcon.js","sources":["../../../../../../../src/components/DataGrid/components/Header/HeaderCell/SortIcon/SortIcon.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\nimport { SortDirection } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\n\nimport { ArrowDownIcon, ArrowUpIcon, DoubleArrowIcon } from '../../../../../../tempIcons';\nimport { sortIcon } from '../HeaderCell.module.css';\n\ntype SortIconProps = {\n  isSorted?: boolean | SortDirection;\n};\n\n/**\n * Sort icon for a column header.\n */\nexport const SortIcon = ({ isSorted }: SortIconProps) => {\n  const icon = useMemo(() => {\n    if (!isSorted) {\n      return <DoubleArrowIcon size={5} />;\n    }\n\n    return isSorted === 'asc' ? (\n      <ArrowUpIcon color={theme.colors.neutral.ink.dark} size={5} />\n    ) : (\n      <ArrowDownIcon color={theme.colors.neutral.ink.dark} size={5} />\n    );\n  }, [isSorted]);\n\n  return <span className={sortIcon}>{icon}</span>;\n};\n"],"names":["React"],"mappings":";;;;;;;;AAaA;;AAEG;MACU,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAiB,KAAI;AACtD,IAAA,MAAM,IAAI,GAAG,OAAO,CAAC,MAAK;QACxB,IAAI,CAAC,QAAQ,EAAE;AACb,YAAA,OAAOA,6BAAC,eAAe,EAAA,EAAC,IAAI,EAAE,CAAC,GAAI;AACpC;QAED,OAAO,QAAQ,KAAK,KAAK,IACvBA,cAAC,CAAA,aAAA,CAAA,WAAW,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,GAAI,KAE9DA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAC,EAAA,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,CAAC,EAAI,CAAA,CACjE;AACH,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,OAAOA,uCAAM,SAAS,EAAE,QAAQ,EAAG,EAAA,IAAI,CAAQ;AACjD;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/SortIcon/index.d.ts

@@ -0,0 +1 @@
+export { SortIcon } from './SortIcon';

package/dist/components/DataGrid/constants.cjs

@@ -4,9 +4,11 @@ const DEFAULT_COLUMN_WIDTH = 200;
 const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;
 const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;
 const DEFAULT_CELL_ALIGN = 'left';
+const SELECTION_COLUMN_ID = 'selection';
 
 exports.DEFAULT_CELL_ALIGN = DEFAULT_CELL_ALIGN;
 exports.DEFAULT_COLUMN_MAXIMUM_WIDTH = DEFAULT_COLUMN_MAXIMUM_WIDTH;
 exports.DEFAULT_COLUMN_MINIMUM_WIDTH = DEFAULT_COLUMN_MINIMUM_WIDTH;
 exports.DEFAULT_COLUMN_WIDTH = DEFAULT_COLUMN_WIDTH;
+exports.SELECTION_COLUMN_ID = SELECTION_COLUMN_ID;
 //# sourceMappingURL=constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n"],"names":[],"mappings":";;AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG;;;;;;;"}
+{"version":3,"file":"constants.cjs","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n\nexport const SELECTION_COLUMN_ID = 'selection';\n"],"names":[],"mappings":";;AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG;AAE3B,MAAM,mBAAmB,GAAG;;;;;;;;"}

package/dist/components/DataGrid/constants.d.ts

@@ -2,3 +2,4 @@ export declare const DEFAULT_COLUMN_WIDTH = 200;
 export declare const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;
 export declare const DEFAULT_COLUMN_MAXIMUM_WIDTH: number;
 export declare const DEFAULT_CELL_ALIGN = "left";
+export declare const SELECTION_COLUMN_ID = "selection";

package/dist/components/DataGrid/constants.js

@@ -2,6 +2,7 @@ const DEFAULT_COLUMN_WIDTH = 200;
 const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;
 const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;
 const DEFAULT_CELL_ALIGN = 'left';
+const SELECTION_COLUMN_ID = 'selection';
 
-export { DEFAULT_CELL_ALIGN, DEFAULT_COLUMN_MAXIMUM_WIDTH, DEFAULT_COLUMN_MINIMUM_WIDTH, DEFAULT_COLUMN_WIDTH };
+export { DEFAULT_CELL_ALIGN, DEFAULT_COLUMN_MAXIMUM_WIDTH, DEFAULT_COLUMN_MINIMUM_WIDTH, DEFAULT_COLUMN_WIDTH, SELECTION_COLUMN_ID };
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n"],"names":[],"mappings":"AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG;;;;"}
+{"version":3,"file":"constants.js","sources":["../../../src/components/DataGrid/constants.ts"],"sourcesContent":["export const DEFAULT_COLUMN_WIDTH = 200;\nexport const DEFAULT_COLUMN_MINIMUM_WIDTH = 120;\nexport const DEFAULT_COLUMN_MAXIMUM_WIDTH = Number.MAX_SAFE_INTEGER;\n\nexport const DEFAULT_CELL_ALIGN = 'left';\n\nexport const SELECTION_COLUMN_ID = 'selection';\n"],"names":[],"mappings":"AAAO,MAAM,oBAAoB,GAAG;AAC7B,MAAM,4BAA4B,GAAG;AAC/B,MAAA,4BAA4B,GAAG,MAAM,CAAC;AAE5C,MAAM,kBAAkB,GAAG;AAE3B,MAAM,mBAAmB,GAAG;;;;"}

package/dist/components/DataGrid/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useSortingState } from './useSortingState';
+export { usePinnedColumnStyles } from './usePinnedColumnStyles';
+export { usePinnedColumnLayout } from './usePinnedColumnLayout';

package/dist/components/DataGrid/hooks/usePinnedColumnLayout.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var React = require('react');
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables
+ * to be applied to the table element.
+ *
+ * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and
+ * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).
+ */
+const usePinnedColumnLayout = ({ table }) => {
+    const pinnedColumnLayoutStyles = React.useMemo(() => {
+        if (!table.getIsSomeColumnsPinned()) {
+            return {};
+        }
+        const pinnedColumns = [
+            ...table.getLeftVisibleLeafColumns(),
+            ...table.getRightVisibleLeafColumns(),
+        ];
+        return pinnedColumns.reduce((styleObj, column) => {
+            const pinLocation = column.getIsPinned();
+            return {
+                ...styleObj,
+                [`--${column.id}-start`]: pinLocation === 'left' ? `${column.getStart('left')}px` : undefined,
+                [`--${column.id}-after`]: pinLocation === 'right' ? `${column.getAfter('right')}px` : undefined,
+            };
+        }, {});
+    }, [
+        table.getState().columnSizing,
+        table.getState().columnSizingInfo,
+        table.getState().columnPinning,
+    ]);
+    return { pinnedColumnLayoutStyles };
+};
+
+exports.usePinnedColumnLayout = usePinnedColumnLayout;
+//# sourceMappingURL=usePinnedColumnLayout.cjs.map

package/dist/components/DataGrid/hooks/usePinnedColumnLayout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnLayout.cjs","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnLayout.ts"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n\nimport { useMemo } from 'react';\n\nimport { Table } from '@tanstack/react-table';\n\ntype UsePinnedColumnLayoutProps = {\n  table: Table<any>;\n};\n\n/**\n * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables\n * to be applied to the table element.\n *\n * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and\n * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).\n */\nexport const usePinnedColumnLayout = ({ table }: UsePinnedColumnLayoutProps) => {\n  const pinnedColumnLayoutStyles = useMemo(() => {\n    if (!table.getIsSomeColumnsPinned()) {\n      return {};\n    }\n\n    const pinnedColumns = [\n      ...table.getLeftVisibleLeafColumns(),\n      ...table.getRightVisibleLeafColumns(),\n    ];\n\n    return pinnedColumns.reduce((styleObj, column) => {\n      const pinLocation = column.getIsPinned();\n\n      return {\n        ...styleObj,\n        [`--${column.id}-start`]:\n          pinLocation === 'left' ? `${column.getStart('left')}px` : undefined,\n        [`--${column.id}-after`]:\n          pinLocation === 'right' ? `${column.getAfter('right')}px` : undefined,\n      };\n    }, {});\n  }, [\n    table.getState().columnSizing,\n    table.getState().columnSizingInfo,\n    table.getState().columnPinning,\n  ]);\n\n  return { pinnedColumnLayoutStyles };\n};\n"],"names":["useMemo"],"mappings":";;;;AAAA;AAUA;;;;;;AAMG;MACU,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAA8B,KAAI;AAC7E,IAAA,MAAM,wBAAwB,GAAGA,aAAO,CAAC,MAAK;AAC5C,QAAA,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE;AACnC,YAAA,OAAO,EAAE;AACV;AAED,QAAA,MAAM,aAAa,GAAG;YACpB,GAAG,KAAK,CAAC,yBAAyB,EAAE;YACpC,GAAG,KAAK,CAAC,0BAA0B,EAAE;SACtC;QAED,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAI;AAC/C,YAAA,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE;YAExC,OAAO;AACL,gBAAA,GAAG,QAAQ;gBACX,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,MAAM,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;gBACrE,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,OAAO,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;aACxE;SACF,EAAE,EAAE,CAAC;AACR,KAAC,EAAE;AACD,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY;AAC7B,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB;AACjC,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,aAAa;AAC/B,KAAA,CAAC;IAEF,OAAO,EAAE,wBAAwB,EAAE;AACrC;;;;"}

package/dist/components/DataGrid/hooks/usePinnedColumnLayout.d.ts

@@ -0,0 +1,15 @@
+import { Table } from '@tanstack/react-table';
+type UsePinnedColumnLayoutProps = {
+    table: Table<any>;
+};
+/**
+ * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables
+ * to be applied to the table element.
+ *
+ * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and
+ * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).
+ */
+export declare const usePinnedColumnLayout: ({ table }: UsePinnedColumnLayoutProps) => {
+    pinnedColumnLayoutStyles: {};
+};
+export {};

package/dist/components/DataGrid/hooks/usePinnedColumnLayout.js

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+
+/* eslint-disable react-hooks/exhaustive-deps */
+/**
+ * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables
+ * to be applied to the table element.
+ *
+ * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and
+ * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).
+ */
+const usePinnedColumnLayout = ({ table }) => {
+    const pinnedColumnLayoutStyles = useMemo(() => {
+        if (!table.getIsSomeColumnsPinned()) {
+            return {};
+        }
+        const pinnedColumns = [
+            ...table.getLeftVisibleLeafColumns(),
+            ...table.getRightVisibleLeafColumns(),
+        ];
+        return pinnedColumns.reduce((styleObj, column) => {
+            const pinLocation = column.getIsPinned();
+            return {
+                ...styleObj,
+                [`--${column.id}-start`]: pinLocation === 'left' ? `${column.getStart('left')}px` : undefined,
+                [`--${column.id}-after`]: pinLocation === 'right' ? `${column.getAfter('right')}px` : undefined,
+            };
+        }, {});
+    }, [
+        table.getState().columnSizing,
+        table.getState().columnSizingInfo,
+        table.getState().columnPinning,
+    ]);
+    return { pinnedColumnLayoutStyles };
+};
+
+export { usePinnedColumnLayout };
+//# sourceMappingURL=usePinnedColumnLayout.js.map

package/dist/components/DataGrid/hooks/usePinnedColumnLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnLayout.js","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnLayout.ts"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n\nimport { useMemo } from 'react';\n\nimport { Table } from '@tanstack/react-table';\n\ntype UsePinnedColumnLayoutProps = {\n  table: Table<any>;\n};\n\n/**\n * Hook which computes left and right positions for laying out pinned columns, which are then returned as CSS variables\n * to be applied to the table element.\n *\n * We do this so that pinned columns can be resized correctly, whilst avoiding having to re-render the table body and\n * header (since left/right properties must be applied to the <th> and <td> elements rather than the <col>).\n */\nexport const usePinnedColumnLayout = ({ table }: UsePinnedColumnLayoutProps) => {\n  const pinnedColumnLayoutStyles = useMemo(() => {\n    if (!table.getIsSomeColumnsPinned()) {\n      return {};\n    }\n\n    const pinnedColumns = [\n      ...table.getLeftVisibleLeafColumns(),\n      ...table.getRightVisibleLeafColumns(),\n    ];\n\n    return pinnedColumns.reduce((styleObj, column) => {\n      const pinLocation = column.getIsPinned();\n\n      return {\n        ...styleObj,\n        [`--${column.id}-start`]:\n          pinLocation === 'left' ? `${column.getStart('left')}px` : undefined,\n        [`--${column.id}-after`]:\n          pinLocation === 'right' ? `${column.getAfter('right')}px` : undefined,\n      };\n    }, {});\n  }, [\n    table.getState().columnSizing,\n    table.getState().columnSizingInfo,\n    table.getState().columnPinning,\n  ]);\n\n  return { pinnedColumnLayoutStyles };\n};\n"],"names":[],"mappings":";;AAAA;AAUA;;;;;;AAMG;MACU,qBAAqB,GAAG,CAAC,EAAE,KAAK,EAA8B,KAAI;AAC7E,IAAA,MAAM,wBAAwB,GAAG,OAAO,CAAC,MAAK;AAC5C,QAAA,IAAI,CAAC,KAAK,CAAC,sBAAsB,EAAE,EAAE;AACnC,YAAA,OAAO,EAAE;AACV;AAED,QAAA,MAAM,aAAa,GAAG;YACpB,GAAG,KAAK,CAAC,yBAAyB,EAAE;YACpC,GAAG,KAAK,CAAC,0BAA0B,EAAE;SACtC;QAED,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAI;AAC/C,YAAA,MAAM,WAAW,GAAG,MAAM,CAAC,WAAW,EAAE;YAExC,OAAO;AACL,gBAAA,GAAG,QAAQ;gBACX,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,MAAM,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;gBACrE,CAAC,CAAA,EAAA,EAAK,MAAM,CAAC,EAAE,CAAA,MAAA,CAAQ,GACrB,WAAW,KAAK,OAAO,GAAG,CAAG,EAAA,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAI,EAAA,CAAA,GAAG,SAAS;aACxE;SACF,EAAE,EAAE,CAAC;AACR,KAAC,EAAE;AACD,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,YAAY;AAC7B,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,gBAAgB;AACjC,QAAA,KAAK,CAAC,QAAQ,EAAE,CAAC,aAAa;AAC/B,KAAA,CAAC;IAEF,OAAO,EAAE,wBAAwB,EAAE;AACrC;;;;"}

package/dist/components/DataGrid/hooks/usePinnedColumnStyles.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+var pinnedColumnUtils = require('../utils/pinnedColumnUtils.cjs');
+
+/**
+ * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.
+ */
+const usePinnedColumnStyles = ({ column }) => {
+    if (!column.getIsPinned()) {
+        return {
+            pinnedCellClassName: '',
+            pinnedCellStyles: {},
+        };
+    }
+    return {
+        pinnedCellClassName: pinnedColumnUtils.getPinnedColumnClassNames(column),
+        pinnedCellStyles: pinnedColumnUtils.getPinnedColumnStyles(column),
+    };
+};
+
+exports.usePinnedColumnStyles = usePinnedColumnStyles;
+//# sourceMappingURL=usePinnedColumnStyles.cjs.map

package/dist/components/DataGrid/hooks/usePinnedColumnStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnStyles.cjs","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnStyles.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\n\nimport { getPinnedColumnClassNames, getPinnedColumnStyles } from '../utils/pinnedColumnUtils';\n\ntype UsePinnedColumnStylesProps = {\n  column: Column<any, any>;\n};\n\n/**\n * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.\n */\nexport const usePinnedColumnStyles = ({ column }: UsePinnedColumnStylesProps) => {\n  if (!column.getIsPinned()) {\n    return {\n      pinnedCellClassName: '',\n      pinnedCellStyles: {},\n    };\n  }\n\n  return {\n    pinnedCellClassName: getPinnedColumnClassNames(column),\n    pinnedCellStyles: getPinnedColumnStyles(column),\n  };\n};\n"],"names":["getPinnedColumnClassNames","getPinnedColumnStyles"],"mappings":";;;;AAQA;;AAEG;MACU,qBAAqB,GAAG,CAAC,EAAE,MAAM,EAA8B,KAAI;AAC9E,IAAA,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE;QACzB,OAAO;AACL,YAAA,mBAAmB,EAAE,EAAE;AACvB,YAAA,gBAAgB,EAAE,EAAE;SACrB;AACF;IAED,OAAO;AACL,QAAA,mBAAmB,EAAEA,2CAAyB,CAAC,MAAM,CAAC;AACtD,QAAA,gBAAgB,EAAEC,uCAAqB,CAAC,MAAM,CAAC;KAChD;AACH;;;;"}

package/dist/components/DataGrid/hooks/usePinnedColumnStyles.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Column } from '@tanstack/react-table';
+type UsePinnedColumnStylesProps = {
+    column: Column<any, any>;
+};
+/**
+ * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.
+ */
+export declare const usePinnedColumnStyles: ({ column }: UsePinnedColumnStylesProps) => {
+    pinnedCellClassName: any;
+    pinnedCellStyles: import("react").CSSProperties;
+};
+export {};

package/dist/components/DataGrid/hooks/usePinnedColumnStyles.js

@@ -0,0 +1,20 @@
+import { getPinnedColumnClassNames, getPinnedColumnStyles } from '../utils/pinnedColumnUtils.js';
+
+/**
+ * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.
+ */
+const usePinnedColumnStyles = ({ column }) => {
+    if (!column.getIsPinned()) {
+        return {
+            pinnedCellClassName: '',
+            pinnedCellStyles: {},
+        };
+    }
+    return {
+        pinnedCellClassName: getPinnedColumnClassNames(column),
+        pinnedCellStyles: getPinnedColumnStyles(column),
+    };
+};
+
+export { usePinnedColumnStyles };
+//# sourceMappingURL=usePinnedColumnStyles.js.map

package/dist/components/DataGrid/hooks/usePinnedColumnStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePinnedColumnStyles.js","sources":["../../../../src/components/DataGrid/hooks/usePinnedColumnStyles.ts"],"sourcesContent":["import { Column } from '@tanstack/react-table';\n\nimport { getPinnedColumnClassNames, getPinnedColumnStyles } from '../utils/pinnedColumnUtils';\n\ntype UsePinnedColumnStylesProps = {\n  column: Column<any, any>;\n};\n\n/**\n * Hook which returns class names, and styles that need to be computed on-the-fly, for pinned column cells.\n */\nexport const usePinnedColumnStyles = ({ column }: UsePinnedColumnStylesProps) => {\n  if (!column.getIsPinned()) {\n    return {\n      pinnedCellClassName: '',\n      pinnedCellStyles: {},\n    };\n  }\n\n  return {\n    pinnedCellClassName: getPinnedColumnClassNames(column),\n    pinnedCellStyles: getPinnedColumnStyles(column),\n  };\n};\n"],"names":[],"mappings":";;AAQA;;AAEG;MACU,qBAAqB,GAAG,CAAC,EAAE,MAAM,EAA8B,KAAI;AAC9E,IAAA,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,EAAE;QACzB,OAAO;AACL,YAAA,mBAAmB,EAAE,EAAE;AACvB,YAAA,gBAAgB,EAAE,EAAE;SACrB;AACF;IAED,OAAO;AACL,QAAA,mBAAmB,EAAE,yBAAyB,CAAC,MAAM,CAAC;AACtD,QAAA,gBAAgB,EAAE,qBAAqB,CAAC,MAAM,CAAC;KAChD;AACH;;;;"}

package/dist/components/DataGrid/hooks/useSelectionState.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
+    const internalSelectionState = React.useMemo(() => {
+        if (!selectedRows || !onSelectionChanged)
+            return {};
+        return selectedRows.reduce((acc, rowId) => ({
+            ...acc,
+            [rowId]: true,
+        }), {});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRows]);
+    const setInternalSelectionState = React.useCallback((onUpdate) => {
+        if (!onSelectionChanged)
+            return;
+        const newSelectionState = typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;
+        const rowIds = Object.entries(newSelectionState)
+            .filter(([, selected]) => selected)
+            .map(([rowId]) => rowId);
+        onSelectionChanged(rowIds);
+    }, [onSelectionChanged, internalSelectionState]);
+    // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table
+    // to consider every row "un-selectable". Otherwise, we defer to whether or not a row is present within the
+    // array of disabled row ID's.
+    const enableRowSelection = React.useMemo(() => {
+        if (selectedRows === undefined || onSelectionChanged === undefined) {
+            return false;
+        }
+        return (row) => !(disabledRows === null || disabledRows === undefined ? undefined : disabledRows.includes(row.id));
+    }, [selectedRows, onSelectionChanged, disabledRows]);
+    const enableMultiRowSelection = React.useMemo(() => {
+        if (!enableRowSelection) {
+            return false;
+        }
+        return selectionMode === 'multiple';
+    }, [enableRowSelection, selectionMode]);
+    return {
+        enableRowSelection,
+        enableMultiRowSelection,
+        rowSelection: internalSelectionState,
+        onRowSelectionChange: setInternalSelectionState,
+    };
+};
+
+exports.useSelectionState = useSelectionState;
+//# sourceMappingURL=useSelectionState.cjs.map

package/dist/components/DataGrid/hooks/useSelectionState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionState.cjs","sources":["../../../../src/components/DataGrid/hooks/useSelectionState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';\nimport { SelectionMode } from '../types/enums';\n\ntype UseSelectionProps = {\n  selectionMode?: SelectionMode;\n  selectedRows?: string[];\n  disabledRows?: string[];\n  onSelectionChanged?: (rowIds: string[]) => void;\n};\n\n/**\n * Hook which manages interop between selection props and the internal TanStack selection state.\n */\nexport const useSelectionState = ({\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n}: UseSelectionProps) => {\n  const internalSelectionState: RowSelectionState = useMemo(() => {\n    if (!selectedRows || !onSelectionChanged) return {};\n\n    return selectedRows.reduce(\n      (acc, rowId) => ({\n        ...acc,\n        [rowId]: true,\n      }),\n      {},\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedRows]);\n\n  const setInternalSelectionState: OnChangeFn<RowSelectionState> = useCallback(\n    (onUpdate) => {\n      if (!onSelectionChanged) return;\n\n      const newSelectionState =\n        typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;\n\n      const rowIds = Object.entries(newSelectionState)\n        .filter(([, selected]) => selected)\n        .map(([rowId]) => rowId);\n\n      onSelectionChanged(rowIds);\n    },\n    [onSelectionChanged, internalSelectionState],\n  );\n\n  // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table\n  // to consider every row \"un-selectable\". Otherwise, we defer to whether or not a row is present within the\n  // array of disabled row ID's.\n  const enableRowSelection = useMemo(() => {\n    if (selectedRows === undefined || onSelectionChanged === undefined) {\n      return false;\n    }\n\n    return (row: Row<any>) => !disabledRows?.includes(row.id);\n  }, [selectedRows, onSelectionChanged, disabledRows]);\n\n  const enableMultiRowSelection = useMemo(() => {\n    if (!enableRowSelection) {\n      return false;\n    }\n    return selectionMode === 'multiple';\n  }, [enableRowSelection, selectionMode]);\n\n  return {\n    enableRowSelection,\n    enableMultiRowSelection,\n    rowSelection: internalSelectionState,\n    onRowSelectionChange: setInternalSelectionState,\n  };\n};\n"],"names":["useMemo","useCallback"],"mappings":";;;;AAYA;;AAEG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACA,KAAI;AACtB,IAAA,MAAM,sBAAsB,GAAsBA,aAAO,CAAC,MAAK;AAC7D,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,kBAAkB;AAAE,YAAA,OAAO,EAAE;QAEnD,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,KAAK,MAAM;AACf,YAAA,GAAG,GAAG;YACN,CAAC,KAAK,GAAG,IAAI;SACd,CAAC,EACF,EAAE,CACH;;AAEH,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,yBAAyB,GAAkCC,iBAAW,CAC1E,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,kBAAkB;YAAE;AAEzB,QAAA,MAAM,iBAAiB,GACrB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,sBAAsB,CAAC,GAAG,QAAQ;AAE9E,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB;aAC5C,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,QAAQ;aACjC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAE1B,kBAAkB,CAAC,MAAM,CAAC;AAC5B,KAAC,EACD,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAC7C;;;;AAKD,IAAA,MAAM,kBAAkB,GAAGD,aAAO,CAAC,MAAK;AACtC,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS,EAAE;AAClE,YAAA,OAAO,KAAK;AACb;QAED,OAAO,CAAC,GAAa,KAAK,EAAC,YAAY,KAAZ,IAAA,IAAA,YAAY,6BAAZ,YAAY,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAC1D,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;AAEpD,IAAA,MAAM,uBAAuB,GAAGA,aAAO,CAAC,MAAK;QAC3C,IAAI,CAAC,kBAAkB,EAAE;AACvB,YAAA,OAAO,KAAK;AACb;QACD,OAAO,aAAa,KAAK,UAAU;AACrC,KAAC,EAAE,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;IAEvC,OAAO;QACL,kBAAkB;QAClB,uBAAuB;AACvB,QAAA,YAAY,EAAE,sBAAsB;AACpC,QAAA,oBAAoB,EAAE,yBAAyB;KAChD;AACH;;;;"}

package/dist/components/DataGrid/hooks/useSelectionState.d.ts

@@ -0,0 +1,18 @@
+import { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';
+import { SelectionMode } from '../types/enums';
+type UseSelectionProps = {
+    selectionMode?: SelectionMode;
+    selectedRows?: string[];
+    disabledRows?: string[];
+    onSelectionChanged?: (rowIds: string[]) => void;
+};
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+export declare const useSelectionState: ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }: UseSelectionProps) => {
+    enableRowSelection: boolean | ((row: Row<any>) => boolean);
+    enableMultiRowSelection: boolean;
+    rowSelection: RowSelectionState;
+    onRowSelectionChange: OnChangeFn<RowSelectionState>;
+};
+export {};

package/dist/components/DataGrid/hooks/useSelectionState.js

@@ -0,0 +1,49 @@
+import { useMemo, useCallback } from 'react';
+
+/**
+ * Hook which manages interop between selection props and the internal TanStack selection state.
+ */
+const useSelectionState = ({ selectionMode, selectedRows, disabledRows, onSelectionChanged, }) => {
+    const internalSelectionState = useMemo(() => {
+        if (!selectedRows || !onSelectionChanged)
+            return {};
+        return selectedRows.reduce((acc, rowId) => ({
+            ...acc,
+            [rowId]: true,
+        }), {});
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [selectedRows]);
+    const setInternalSelectionState = useCallback((onUpdate) => {
+        if (!onSelectionChanged)
+            return;
+        const newSelectionState = typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;
+        const rowIds = Object.entries(newSelectionState)
+            .filter(([, selected]) => selected)
+            .map(([rowId]) => rowId);
+        onSelectionChanged(rowIds);
+    }, [onSelectionChanged, internalSelectionState]);
+    // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table
+    // to consider every row "un-selectable". Otherwise, we defer to whether or not a row is present within the
+    // array of disabled row ID's.
+    const enableRowSelection = useMemo(() => {
+        if (selectedRows === undefined || onSelectionChanged === undefined) {
+            return false;
+        }
+        return (row) => !(disabledRows === null || disabledRows === undefined ? undefined : disabledRows.includes(row.id));
+    }, [selectedRows, onSelectionChanged, disabledRows]);
+    const enableMultiRowSelection = useMemo(() => {
+        if (!enableRowSelection) {
+            return false;
+        }
+        return selectionMode === 'multiple';
+    }, [enableRowSelection, selectionMode]);
+    return {
+        enableRowSelection,
+        enableMultiRowSelection,
+        rowSelection: internalSelectionState,
+        onRowSelectionChange: setInternalSelectionState,
+    };
+};
+
+export { useSelectionState };
+//# sourceMappingURL=useSelectionState.js.map

package/dist/components/DataGrid/hooks/useSelectionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionState.js","sources":["../../../../src/components/DataGrid/hooks/useSelectionState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, Row, RowSelectionState } from '@tanstack/react-table';\nimport { SelectionMode } from '../types/enums';\n\ntype UseSelectionProps = {\n  selectionMode?: SelectionMode;\n  selectedRows?: string[];\n  disabledRows?: string[];\n  onSelectionChanged?: (rowIds: string[]) => void;\n};\n\n/**\n * Hook which manages interop between selection props and the internal TanStack selection state.\n */\nexport const useSelectionState = ({\n  selectionMode,\n  selectedRows,\n  disabledRows,\n  onSelectionChanged,\n}: UseSelectionProps) => {\n  const internalSelectionState: RowSelectionState = useMemo(() => {\n    if (!selectedRows || !onSelectionChanged) return {};\n\n    return selectedRows.reduce(\n      (acc, rowId) => ({\n        ...acc,\n        [rowId]: true,\n      }),\n      {},\n    );\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [selectedRows]);\n\n  const setInternalSelectionState: OnChangeFn<RowSelectionState> = useCallback(\n    (onUpdate) => {\n      if (!onSelectionChanged) return;\n\n      const newSelectionState =\n        typeof onUpdate === 'function' ? onUpdate(internalSelectionState) : onUpdate;\n\n      const rowIds = Object.entries(newSelectionState)\n        .filter(([, selected]) => selected)\n        .map(([rowId]) => rowId);\n\n      onSelectionChanged(rowIds);\n    },\n    [onSelectionChanged, internalSelectionState],\n  );\n\n  // Controls whether a given row can be selected or not. If selection is disabled, we tell the TanStack table\n  // to consider every row \"un-selectable\". Otherwise, we defer to whether or not a row is present within the\n  // array of disabled row ID's.\n  const enableRowSelection = useMemo(() => {\n    if (selectedRows === undefined || onSelectionChanged === undefined) {\n      return false;\n    }\n\n    return (row: Row<any>) => !disabledRows?.includes(row.id);\n  }, [selectedRows, onSelectionChanged, disabledRows]);\n\n  const enableMultiRowSelection = useMemo(() => {\n    if (!enableRowSelection) {\n      return false;\n    }\n    return selectionMode === 'multiple';\n  }, [enableRowSelection, selectionMode]);\n\n  return {\n    enableRowSelection,\n    enableMultiRowSelection,\n    rowSelection: internalSelectionState,\n    onRowSelectionChange: setInternalSelectionState,\n  };\n};\n"],"names":[],"mappings":";;AAYA;;AAEG;AACI,MAAM,iBAAiB,GAAG,CAAC,EAChC,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACA,KAAI;AACtB,IAAA,MAAM,sBAAsB,GAAsB,OAAO,CAAC,MAAK;AAC7D,QAAA,IAAI,CAAC,YAAY,IAAI,CAAC,kBAAkB;AAAE,YAAA,OAAO,EAAE;QAEnD,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,GAAG,EAAE,KAAK,MAAM;AACf,YAAA,GAAG,GAAG;YACN,CAAC,KAAK,GAAG,IAAI;SACd,CAAC,EACF,EAAE,CACH;;AAEH,KAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AAElB,IAAA,MAAM,yBAAyB,GAAkC,WAAW,CAC1E,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,kBAAkB;YAAE;AAEzB,QAAA,MAAM,iBAAiB,GACrB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,sBAAsB,CAAC,GAAG,QAAQ;AAE9E,QAAA,MAAM,MAAM,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB;aAC5C,MAAM,CAAC,CAAC,GAAG,QAAQ,CAAC,KAAK,QAAQ;aACjC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC;QAE1B,kBAAkB,CAAC,MAAM,CAAC;AAC5B,KAAC,EACD,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,CAC7C;;;;AAKD,IAAA,MAAM,kBAAkB,GAAG,OAAO,CAAC,MAAK;AACtC,QAAA,IAAI,YAAY,KAAK,SAAS,IAAI,kBAAkB,KAAK,SAAS,EAAE;AAClE,YAAA,OAAO,KAAK;AACb;QAED,OAAO,CAAC,GAAa,KAAK,EAAC,YAAY,KAAZ,IAAA,IAAA,YAAY,6BAAZ,YAAY,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC,CAAA;KAC1D,EAAE,CAAC,YAAY,EAAE,kBAAkB,EAAE,YAAY,CAAC,CAAC;AAEpD,IAAA,MAAM,uBAAuB,GAAG,OAAO,CAAC,MAAK;QAC3C,IAAI,CAAC,kBAAkB,EAAE;AACvB,YAAA,OAAO,KAAK;AACb;QACD,OAAO,aAAa,KAAK,UAAU;AACrC,KAAC,EAAE,CAAC,kBAAkB,EAAE,aAAa,CAAC,CAAC;IAEvC,OAAO;QACL,kBAAkB;QAClB,uBAAuB;AACvB,QAAA,YAAY,EAAE,sBAAsB;AACpC,QAAA,oBAAoB,EAAE,yBAAyB;KAChD;AACH;;;;"}

package/dist/components/DataGrid/hooks/useSortingState.cjs

@@ -0,0 +1,40 @@
+'use strict';
+
+var React = require('react');
+
+/**
+ * Hook which manages interop between sorting props and the internal TanStack sorting state.
+ */
+const useSortingState = ({ columns, sortState, onSortChanged }) => {
+    const internalSortState = React.useMemo(() => {
+        if (!sortState || !onSortChanged)
+            return undefined;
+        return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sortState]);
+    const setInternalSortState = React.useCallback((onUpdate) => {
+        if (!onSortChanged)
+            return;
+        // TanStack can either pass us a functional updater method, or the new sort object directly.
+        const newSortState = typeof onUpdate === 'function' ? onUpdate(internalSortState) : onUpdate;
+        if (!newSortState || newSortState.length === 0)
+            return;
+        const [{ id, desc }] = newSortState;
+        onSortChanged({
+            columnId: id,
+            direction: desc ? 'desc' : 'asc',
+        });
+    }, [onSortChanged, internalSortState]);
+    const enableSorting = React.useMemo(() => onSortChanged !== undefined && columns.some((column) => column.sortable), [columns, onSortChanged]);
+    return {
+        enableSorting,
+        sorting: internalSortState,
+        onSortingChange: setInternalSortState,
+        manualSorting: true,
+        enableSortingRemoval: false,
+        enableMultiRemove: false,
+    };
+};
+
+exports.useSortingState = useSortingState;
+//# sourceMappingURL=useSortingState.cjs.map

package/dist/components/DataGrid/hooks/useSortingState.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortingState.cjs","sources":["../../../../src/components/DataGrid/hooks/useSortingState.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\nimport { OnChangeFn, SortingState } from '@tanstack/react-table';\n\nimport { ColumnDefinition } from '../types';\nimport { SortState } from '../types/SortState';\n\ntype UseSortingStateProps = {\n  columns: ColumnDefinition<any>[];\n\n  sortState?: SortState;\n  onSortChanged?: (sortState: SortState) => void;\n};\n\n/**\n * Hook which manages interop between sorting props and the internal TanStack sorting state.\n */\nexport const useSortingState = ({ columns, sortState, onSortChanged }: UseSortingStateProps) => {\n  const internalSortState = useMemo(() => {\n    if (!sortState || !onSortChanged) return undefined;\n\n    return [{ id: sortState.columnId, desc: sortState.direction === 'desc' }];\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [sortState]);\n\n  const setInternalSortState: OnChangeFn<SortingState> = useCallback(\n    (onUpdate) => {\n      if (!onSortChanged) return;\n\n      // TanStack can either pass us a functional updater method, or the new sort object directly.\n      const newSortState =\n        typeof onUpdate === 'function' ? onUpdate(internalSortState as SortingState) : onUpdate;\n\n      if (!newSortState || newSortState.length === 0) return;\n\n      const [{ id, desc }] = newSortState;\n\n      onSortChanged({\n        columnId: id,\n        direction: desc ? 'desc' : 'asc',\n      });\n    },\n    [onSortChanged, internalSortState],\n  );\n\n  const enableSorting = useMemo(\n    () => onSortChanged !== undefined && columns.some((column) => column.sortable),\n    [columns, onSortChanged],\n  );\n\n  return {\n    enableSorting,\n    sorting: internalSortState,\n    onSortingChange: setInternalSortState,\n\n    manualSorting: true,\n    enableSortingRemoval: false,\n    enableMultiRemove: false,\n  };\n};\n"],"names":["useMemo","useCallback"],"mappings":";;;;AAcA;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAwB,KAAI;AAC7F,IAAA,MAAM,iBAAiB,GAAGA,aAAO,CAAC,MAAK;AACrC,QAAA,IAAI,CAAC,SAAS,IAAI,CAAC,aAAa;AAAE,YAAA,OAAO,SAAS;AAElD,QAAA,OAAO,CAAC,EAAE,EAAE,EAAE,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,SAAS,CAAC,SAAS,KAAK,MAAM,EAAE,CAAC;;AAE3E,KAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAEf,IAAA,MAAM,oBAAoB,GAA6BC,iBAAW,CAChE,CAAC,QAAQ,KAAI;AACX,QAAA,IAAI,CAAC,aAAa;YAAE;;AAGpB,QAAA,MAAM,YAAY,GAChB,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,iBAAiC,CAAC,GAAG,QAAQ;AAEzF,QAAA,IAAI,CAAC,YAAY,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC;YAAE;QAEhD,MAAM,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,GAAG,YAAY;AAEnC,QAAA,aAAa,CAAC;AACZ,YAAA,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK;AACjC,SAAA,CAAC;AACJ,KAAC,EACD,CAAC,aAAa,EAAE,iBAAiB,CAAC,CACnC;AAED,IAAA,MAAM,aAAa,GAAGD,aAAO,CAC3B,MAAM,aAAa,KAAK,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,EAC9E,CAAC,OAAO,EAAE,aAAa,CAAC,CACzB;IAED,OAAO;QACL,aAAa;AACb,QAAA,OAAO,EAAE,iBAAiB;AAC1B,QAAA,eAAe,EAAE,oBAAoB;AAErC,QAAA,aAAa,EAAE,IAAI;AACnB,QAAA,oBAAoB,EAAE,KAAK;AAC3B,QAAA,iBAAiB,EAAE,KAAK;KACzB;AACH;;;;"}

package/dist/components/DataGrid/hooks/useSortingState.d.ts

@@ -0,0 +1,23 @@
+import { OnChangeFn, SortingState } from '@tanstack/react-table';
+import { ColumnDefinition } from '../types';
+import { SortState } from '../types/SortState';
+type UseSortingStateProps = {
+    columns: ColumnDefinition<any>[];
+    sortState?: SortState;
+    onSortChanged?: (sortState: SortState) => void;
+};
+/**
+ * Hook which manages interop between sorting props and the internal TanStack sorting state.
+ */
+export declare const useSortingState: ({ columns, sortState, onSortChanged }: UseSortingStateProps) => {
+    enableSorting: boolean;
+    sorting: {
+        id: string;
+        desc: boolean;
+    }[] | undefined;
+    onSortingChange: OnChangeFn<SortingState>;
+    manualSorting: boolean;
+    enableSortingRemoval: boolean;
+    enableMultiRemove: boolean;
+};
+export {};