npm - @veeqo/ui - Versions diffs - 13.15.1 → 13.15.2 - Mend

@veeqo/ui 13.15.1 → 13.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/dist/components/DataGrid/DataGrid.module.scss.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
-___$insertStyle("._baseCell_19atg_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_19atg_1:focus, ._baseCell_19atg_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_19atg_10::after, ._pinnedColumnRight_19atg_10::after, ._pinnedColumnLeft_19atg_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_19atg_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_19atg_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}");
-var styles = {"baseCell":"_baseCell_19atg_1","pinnedColumnBase":"_pinnedColumnBase_19atg_10","pinnedColumnRight":"_pinnedColumnRight_19atg_10","pinnedColumnLeft":"_pinnedColumnLeft_19atg_10"};
+___$insertStyle("._baseCell_gr4t3_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_gr4t3_1:focus, ._baseCell_gr4t3_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_gr4t3_10::after, ._pinnedColumnRight_gr4t3_10::after, ._pinnedColumnLeft_gr4t3_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_gr4t3_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_gr4t3_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}");
+var styles = {"baseCell":"_baseCell_gr4t3_1","pinnedColumnBase":"_pinnedColumnBase_gr4t3_10","pinnedColumnRight":"_pinnedColumnRight_gr4t3_10","pinnedColumnLeft":"_pinnedColumnLeft_gr4t3_10"};
 module.exports = styles;
 //# sourceMappingURL=DataGrid.module.scss.cjs.map

package/dist/components/DataGrid/DataGrid.module.scss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity 0.3s;\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-left-shadow-opacity, 1);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-right-shadow-opacity, 1);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,~~ogCAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
1	+ {"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-left-shadow-opacity, 1);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-right-shadow-opacity, 1);\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/DataGrid.module.scss.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
-insertStyle("._baseCell_19atg_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_19atg_1:focus, ._baseCell_19atg_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_19atg_10::after, ._pinnedColumnRight_19atg_10::after, ._pinnedColumnLeft_19atg_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_19atg_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_19atg_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}");
-var styles = {"baseCell":"_baseCell_19atg_1","pinnedColumnBase":"_pinnedColumnBase_19atg_10","pinnedColumnRight":"_pinnedColumnRight_19atg_10","pinnedColumnLeft":"_pinnedColumnLeft_19atg_10"};
+insertStyle("._baseCell_gr4t3_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_gr4t3_1:focus, ._baseCell_gr4t3_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_gr4t3_10::after, ._pinnedColumnRight_gr4t3_10::after, ._pinnedColumnLeft_gr4t3_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_gr4t3_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_gr4t3_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}");
+var styles = {"baseCell":"_baseCell_gr4t3_1","pinnedColumnBase":"_pinnedColumnBase_gr4t3_10","pinnedColumnRight":"_pinnedColumnRight_gr4t3_10","pinnedColumnLeft":"_pinnedColumnLeft_gr4t3_10"};
 export { styles as default };
 //# sourceMappingURL=DataGrid.module.scss.js.map

package/dist/components/DataGrid/DataGrid.module.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity 0.3s;\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-left-shadow-opacity, 1);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-right-shadow-opacity, 1);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,~~ogCAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
1	+ {"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n position: relative;\n box-sizing: border-box;\n\n &:focus,\n &:focus-visible {\n outline: var(--sizes-none);\n box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n var(--colors-secondary-blue-base);\n }\n}\n\n.pinnedColumnBase {\n &::after {\n position: absolute;\n\n top: var(--sizes-none);\n bottom: -1px;\n width: 30px;\n\n content: '';\n pointer-events: none;\n\n box-sizing: border-box;\n transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n }\n}\n\n.pinnedColumnLeft {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(100%);\n\n right: var(--sizes-none);\n\n box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-left-shadow-opacity, 1);\n }\n}\n\n.pinnedColumnRight {\n @extend .pinnedColumnBase;\n\n &::after {\n transform: translate(-100%);\n\n left: var(--sizes-none);\n\n box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n opacity: var(--pinned-right-shadow-opacity, 1);\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,8iCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
-___$insertStyle("._baseCell_msj6c_1, ._bodyCell_msj6c_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_msj6c_1:focus, ._bodyCell_msj6c_1:focus, ._baseCell_msj6c_1:focus-visible, ._bodyCell_msj6c_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_msj6c_10::after, ._pinnedColumnRight_msj6c_10::after, ._pinnedColumnLeft_msj6c_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_msj6c_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_msj6c_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._bodyCell_msj6c_1 {\n  background-color: white;\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}");
-var styles = {"baseCell":"_baseCell_msj6c_1","bodyCell":"_bodyCell_msj6c_1","pinnedColumnBase":"_pinnedColumnBase_msj6c_10","pinnedColumnRight":"_pinnedColumnRight_msj6c_10","pinnedColumnLeft":"_pinnedColumnLeft_msj6c_10"};
+___$insertStyle("._baseCell_qtj45_1, ._bodyCell_qtj45_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_qtj45_1:focus, ._bodyCell_qtj45_1:focus, ._baseCell_qtj45_1:focus-visible, ._bodyCell_qtj45_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_qtj45_10::after, ._pinnedColumnRight_qtj45_10::after, ._pinnedColumnLeft_qtj45_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_qtj45_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_qtj45_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._bodyCell_qtj45_1 {\n  background-color: white;\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}");
+var styles = {"baseCell":"_baseCell_qtj45_1","bodyCell":"_bodyCell_qtj45_1","pinnedColumnBase":"_pinnedColumnBase_qtj45_10","pinnedColumnRight":"_pinnedColumnRight_qtj45_10","pinnedColumnLeft":"_pinnedColumnLeft_qtj45_10"};
 module.exports = styles;
 //# sourceMappingURL=BodyCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n @extend .baseCell;\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"],"names":[],"mappings":";;;;AACE,eAAA,CAAA~~,+3CAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
1	+ {"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n @extend .baseCell;\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"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,y6CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
-insertStyle("._baseCell_msj6c_1, ._bodyCell_msj6c_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_msj6c_1:focus, ._bodyCell_msj6c_1:focus, ._baseCell_msj6c_1:focus-visible, ._bodyCell_msj6c_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_msj6c_10::after, ._pinnedColumnRight_msj6c_10::after, ._pinnedColumnLeft_msj6c_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_msj6c_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_msj6c_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._bodyCell_msj6c_1 {\n  background-color: white;\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}");
-var styles = {"baseCell":"_baseCell_msj6c_1","bodyCell":"_bodyCell_msj6c_1","pinnedColumnBase":"_pinnedColumnBase_msj6c_10","pinnedColumnRight":"_pinnedColumnRight_msj6c_10","pinnedColumnLeft":"_pinnedColumnLeft_msj6c_10"};
+insertStyle("._baseCell_qtj45_1, ._bodyCell_qtj45_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_qtj45_1:focus, ._bodyCell_qtj45_1:focus, ._baseCell_qtj45_1:focus-visible, ._bodyCell_qtj45_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_qtj45_10::after, ._pinnedColumnRight_qtj45_10::after, ._pinnedColumnLeft_qtj45_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_qtj45_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_qtj45_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._bodyCell_qtj45_1 {\n  background-color: white;\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}");
+var styles = {"baseCell":"_baseCell_qtj45_1","bodyCell":"_bodyCell_qtj45_1","pinnedColumnBase":"_pinnedColumnBase_qtj45_10","pinnedColumnRight":"_pinnedColumnRight_qtj45_10","pinnedColumnLeft":"_pinnedColumnLeft_qtj45_10"};
 export { styles as default };
 //# sourceMappingURL=BodyCell.module.scss.js.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n @extend .baseCell;\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"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA~~,+3CAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
1	+ {"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n @extend .baseCell;\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"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,y6CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
-___$insertStyle("._baseCell_1lipn_1, ._footerCell_1lipn_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1lipn_1:focus, ._footerCell_1lipn_1:focus, ._baseCell_1lipn_1:focus-visible, ._footerCell_1lipn_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1lipn_10::after, ._pinnedColumnRight_1lipn_10::after, ._pinnedColumnLeft_1lipn_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1lipn_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1lipn_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._footerCell_1lipn_1 {\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  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
-var styles = {"baseCell":"_baseCell_1lipn_1","footerCell":"_footerCell_1lipn_1","pinnedColumnBase":"_pinnedColumnBase_1lipn_10","pinnedColumnRight":"_pinnedColumnRight_1lipn_10","pinnedColumnLeft":"_pinnedColumnLeft_1lipn_10"};
+___$insertStyle("._baseCell_16r02_1, ._footerCell_16r02_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_16r02_1:focus, ._footerCell_16r02_1:focus, ._baseCell_16r02_1:focus-visible, ._footerCell_16r02_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_16r02_10::after, ._pinnedColumnRight_16r02_10::after, ._pinnedColumnLeft_16r02_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_16r02_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_16r02_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._footerCell_16r02_1 {\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  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_16r02_1","footerCell":"_footerCell_16r02_1","pinnedColumnBase":"_pinnedColumnBase_16r02_10","pinnedColumnRight":"_pinnedColumnRight_16r02_10","pinnedColumnLeft":"_pinnedColumnLeft_16r02_10"};
 module.exports = styles;
 //# sourceMappingURL=FooterCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FooterCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n @extend .baseCell;\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":";;;;AACE,eAAA,CAAA,~~i/CAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
1	+ {"version":3,"file":"FooterCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n @extend .baseCell;\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":";;;;AACE,eAAA,CAAA,2hDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
-insertStyle("._baseCell_1lipn_1, ._footerCell_1lipn_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1lipn_1:focus, ._footerCell_1lipn_1:focus, ._baseCell_1lipn_1:focus-visible, ._footerCell_1lipn_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1lipn_10::after, ._pinnedColumnRight_1lipn_10::after, ._pinnedColumnLeft_1lipn_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1lipn_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1lipn_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._footerCell_1lipn_1 {\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  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
-var styles = {"baseCell":"_baseCell_1lipn_1","footerCell":"_footerCell_1lipn_1","pinnedColumnBase":"_pinnedColumnBase_1lipn_10","pinnedColumnRight":"_pinnedColumnRight_1lipn_10","pinnedColumnLeft":"_pinnedColumnLeft_1lipn_10"};
+insertStyle("._baseCell_16r02_1, ._footerCell_16r02_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_16r02_1:focus, ._footerCell_16r02_1:focus, ._baseCell_16r02_1:focus-visible, ._footerCell_16r02_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_16r02_10::after, ._pinnedColumnRight_16r02_10::after, ._pinnedColumnLeft_16r02_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_16r02_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_16r02_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._footerCell_16r02_1 {\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  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_16r02_1","footerCell":"_footerCell_16r02_1","pinnedColumnBase":"_pinnedColumnBase_16r02_10","pinnedColumnRight":"_pinnedColumnRight_16r02_10","pinnedColumnLeft":"_pinnedColumnLeft_16r02_10"};
 export { styles as default };
 //# sourceMappingURL=FooterCell.module.scss.js.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FooterCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n @extend .baseCell;\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":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,~~i/CAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
1	+ {"version":3,"file":"FooterCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n @extend .baseCell;\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":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,2hDAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

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

@@ -28,11 +28,13 @@ const gridContainerClassname = buildClassnames.buildClassnames([GridContainer_mo
  */
 const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout.usePinnedColumnLayout({ table });
-    const { scrollPosition, onScroll } = useScrollPosition.useScrollPosition({ containerRef });
+    const { scrollPosition, onScroll, enableTransition } = useScrollPosition.useScrollPosition({ containerRef });
     // CSS variables to control pinned column shadow visibility
+    const hideShadows = !scrollPosition || scrollPosition === 'none';
     const shadowVisibility = {
-        '--pinned-left-shadow-opacity': scrollPosition === 'start' || scrollPosition === 'none' ? 0 : 1,
-        '--pinned-right-shadow-opacity': scrollPosition === 'end' || scrollPosition === 'none' ? 0 : 1,
+        '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,
+        '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,
+        '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',
     };
     return (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles, onScroll: onScroll },
         React__default.default.createElement("table", { id: id, ref: tableRef, className: buildClassnames.buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {

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

	@@ -1 +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 { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> & {\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([styles.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 id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': ~~scrollPosition~~ ~~=== 'start'~~ \|\| scrollPosition === '~~none~~' ? 0 : 1,\n '--pinned-right-shadow-opacity': scrollPosition === 'end' \|\| ~~scrollPosition~~ ~~===~~ '~~none~~' ? 0 : 1,\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\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","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;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,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;~~AAGxE~~,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,~~cAAc~~,~~KAAK,OAAO,~~IAAI,cAAc,KAAK,~~MAAM~~,GAAG,CAAC,GAAG,CAAC;~~AAC/F~~,QAAA,+BAA+B,EAAE,~~cAAc~~,~~KAAK,KAAK,~~IAAI,cAAc,KAAK,~~MAAM~~,GAAG,CAAC,GAAG,CAAC;~~KAC/F~~;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
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 { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> & {\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([styles.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 id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition \|\| scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows \|\| scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows \|\| scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\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","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;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,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,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 CHANGED Viewed

@@ -22,11 +22,13 @@ const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid
  */
 const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });
-    const { scrollPosition, onScroll } = useScrollPosition({ containerRef });
+    const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });
     // CSS variables to control pinned column shadow visibility
+    const hideShadows = !scrollPosition || scrollPosition === 'none';
     const shadowVisibility = {
-        '--pinned-left-shadow-opacity': scrollPosition === 'start' || scrollPosition === 'none' ? 0 : 1,
-        '--pinned-right-shadow-opacity': scrollPosition === 'end' || scrollPosition === 'none' ? 0 : 1,
+        '--pinned-left-shadow-opacity': hideShadows || scrollPosition === 'start' ? 0 : 1,
+        '--pinned-right-shadow-opacity': hideShadows || scrollPosition === 'end' ? 0 : 1,
+        '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',
     };
     return (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles, onScroll: onScroll },
         React__default.createElement("table", { id: id, ref: tableRef, className: buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {

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

	@@ -1 +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 { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> & {\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([styles.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 id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': ~~scrollPosition~~ ~~=== 'start'~~ \|\| scrollPosition === '~~none~~' ? 0 : 1,\n '--pinned-right-shadow-opacity': scrollPosition === 'end' \|\| ~~scrollPosition~~ ~~===~~ '~~none~~' ? 0 : 1,\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\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":";;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;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,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;~~AAGxE~~,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,~~cAAc~~,~~KAAK,OAAO,~~IAAI,cAAc,KAAK,~~MAAM~~,GAAG,CAAC,GAAG,CAAC;~~AAC/F~~,QAAA,+BAA+B,EAAE,~~cAAc~~,~~KAAK,KAAK,~~IAAI,cAAc,KAAK,~~MAAM~~,GAAG,CAAC,GAAG,CAAC;~~KAC/F~~;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,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;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
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 { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n Pick<React.HTMLAttributes<HTMLTableElement>, 'id' \| 'className'> & {\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([styles.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 id,\n className,\n 'aria-label': ariaLabel,\n}: GridContainerProps) => {\n const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({ containerRef });\n\n // CSS variables to control pinned column shadow visibility\n const hideShadows = !scrollPosition \|\| scrollPosition === 'none';\n const shadowVisibility = {\n '--pinned-left-shadow-opacity': hideShadows \|\| scrollPosition === 'start' ? 0 : 1,\n '--pinned-right-shadow-opacity': hideShadows \|\| scrollPosition === 'end' ? 0 : 1,\n '--pinned-shadow-transition-duration': enableTransition ? '0.3s' : '0s',\n };\n\n return (\n <Container\n ref={containerRef}\n borderMode={borderMode}\n style={containerStyles}\n onScroll={onScroll}\n >\n <table\n id={id}\n ref={tableRef}\n className={buildClassnames([gridContainerClassname, className])}\n role={ariaRoles.table}\n style={\n {\n tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n '--density': theme.sizes[density],\n ...pinnedColumnLayoutStyles,\n ...shadowVisibility,\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":";;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;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,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;IAG1F,MAAM,WAAW,GAAG,CAAC,cAAc,IAAI,cAAc,KAAK,MAAM;AAChE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,WAAW,IAAI,cAAc,KAAK,OAAO,GAAG,CAAC,GAAG,CAAC;AACjF,QAAA,+BAA+B,EAAE,WAAW,IAAI,cAAc,KAAK,KAAK,GAAG,CAAC,GAAG,CAAC;QAChF,qCAAqC,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI;KACxE;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,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;AAC3B,gBAAA,GAAG,gBAAgB;AACH,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.module.scss.cjs CHANGED Viewed

@@ -2,8 +2,8 @@
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
-___$insertStyle("._baseCell_1xd7o_1, ._headerCell_1xd7o_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1xd7o_1:focus, ._headerCell_1xd7o_1:focus, ._baseCell_1xd7o_1:focus-visible, ._headerCell_1xd7o_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1xd7o_10::after, ._pinnedColumnRight_1xd7o_10::after, ._pinnedColumnLeft_1xd7o_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1xd7o_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1xd7o_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._headerCell_1xd7o_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_1xd7o_40, ._clickableHeaderContent_1xd7o_40 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\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_1xd7o_53 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_1xd7o_40 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_1xd7o_40: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._clickableHeaderContent_1xd7o_40:hover ._sortIcon_1xd7o_71 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_1xd7o_71 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
-var styles = {"baseCell":"_baseCell_1xd7o_1","headerCell":"_headerCell_1xd7o_1","pinnedColumnBase":"_pinnedColumnBase_1xd7o_10","pinnedColumnRight":"_pinnedColumnRight_1xd7o_10","pinnedColumnLeft":"_pinnedColumnLeft_1xd7o_10","headerContent":"_headerContent_1xd7o_40","clickableHeaderContent":"_clickableHeaderContent_1xd7o_40","headerOverflow":"_headerOverflow_1xd7o_53","sortIcon":"_sortIcon_1xd7o_71"};
+___$insertStyle("._baseCell_uzq5d_1, ._headerCell_uzq5d_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_uzq5d_1:focus, ._headerCell_uzq5d_1:focus, ._baseCell_uzq5d_1:focus-visible, ._headerCell_uzq5d_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_uzq5d_10::after, ._pinnedColumnRight_uzq5d_10::after, ._pinnedColumnLeft_uzq5d_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_uzq5d_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_uzq5d_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._headerCell_uzq5d_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_uzq5d_40, ._clickableHeaderContent_uzq5d_40 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\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_uzq5d_53 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_uzq5d_40 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_uzq5d_40: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._clickableHeaderContent_uzq5d_40:hover ._sortIcon_uzq5d_71 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_uzq5d_71 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"baseCell":"_baseCell_uzq5d_1","headerCell":"_headerCell_uzq5d_1","pinnedColumnBase":"_pinnedColumnBase_uzq5d_10","pinnedColumnRight":"_pinnedColumnRight_uzq5d_10","pinnedColumnLeft":"_pinnedColumnLeft_uzq5d_10","headerContent":"_headerContent_uzq5d_40","clickableHeaderContent":"_clickableHeaderContent_uzq5d_40","headerOverflow":"_headerOverflow_uzq5d_53","sortIcon":"_sortIcon_uzq5d_71"};
 module.exports = styles;
 //# sourceMappingURL=HeaderCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n @extend .baseCell;\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 align-items: center;\n gap: var(--sizes-sm);\n white-space: nowrap;\n\n padding: var(--density) var(--sizes-2);\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 @extend .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\n 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}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,~~kiFAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
1	+ {"version":3,"file":"HeaderCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n @extend .baseCell;\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 align-items: center;\n gap: var(--sizes-sm);\n white-space: nowrap;\n\n padding: var(--density) var(--sizes-2);\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 @extend .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\n 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}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,4kFAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
-insertStyle("._baseCell_1xd7o_1, ._headerCell_1xd7o_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1xd7o_1:focus, ._headerCell_1xd7o_1:focus, ._baseCell_1xd7o_1:focus-visible, ._headerCell_1xd7o_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1xd7o_10::after, ._pinnedColumnRight_1xd7o_10::after, ._pinnedColumnLeft_1xd7o_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1xd7o_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1xd7o_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._headerCell_1xd7o_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_1xd7o_40, ._clickableHeaderContent_1xd7o_40 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\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_1xd7o_53 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_1xd7o_40 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_1xd7o_40: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._clickableHeaderContent_1xd7o_40:hover ._sortIcon_1xd7o_71 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_1xd7o_71 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
-var styles = {"baseCell":"_baseCell_1xd7o_1","headerCell":"_headerCell_1xd7o_1","pinnedColumnBase":"_pinnedColumnBase_1xd7o_10","pinnedColumnRight":"_pinnedColumnRight_1xd7o_10","pinnedColumnLeft":"_pinnedColumnLeft_1xd7o_10","headerContent":"_headerContent_1xd7o_40","clickableHeaderContent":"_clickableHeaderContent_1xd7o_40","headerOverflow":"_headerOverflow_1xd7o_53","sortIcon":"_sortIcon_1xd7o_71"};
+insertStyle("._baseCell_uzq5d_1, ._headerCell_uzq5d_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_uzq5d_1:focus, ._headerCell_uzq5d_1:focus, ._baseCell_uzq5d_1:focus-visible, ._headerCell_uzq5d_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_uzq5d_10::after, ._pinnedColumnRight_uzq5d_10::after, ._pinnedColumnLeft_uzq5d_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity var(--pinned-shadow-transition-duration, 0.3s);\n}\n\n._pinnedColumnLeft_uzq5d_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_uzq5d_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._headerCell_uzq5d_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_uzq5d_40, ._clickableHeaderContent_uzq5d_40 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\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_uzq5d_53 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_uzq5d_40 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_uzq5d_40: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._clickableHeaderContent_uzq5d_40:hover ._sortIcon_uzq5d_71 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_uzq5d_71 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"baseCell":"_baseCell_uzq5d_1","headerCell":"_headerCell_uzq5d_1","pinnedColumnBase":"_pinnedColumnBase_uzq5d_10","pinnedColumnRight":"_pinnedColumnRight_uzq5d_10","pinnedColumnLeft":"_pinnedColumnLeft_uzq5d_10","headerContent":"_headerContent_uzq5d_40","clickableHeaderContent":"_clickableHeaderContent_uzq5d_40","headerOverflow":"_headerOverflow_uzq5d_53","sortIcon":"_sortIcon_uzq5d_71"};
 export { styles as default };
 //# sourceMappingURL=HeaderCell.module.scss.js.map

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"HeaderCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n @extend .baseCell;\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 align-items: center;\n gap: var(--sizes-sm);\n white-space: nowrap;\n\n padding: var(--density) var(--sizes-2);\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 @extend .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\n 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}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,~~kiFAAA~~;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
1	+ {"version":3,"file":"HeaderCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n @extend .baseCell;\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 align-items: center;\n gap: var(--sizes-sm);\n white-space: nowrap;\n\n padding: var(--density) var(--sizes-2);\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 @extend .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\n 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}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,4kFAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/DataTable/DataTable.cjs CHANGED Viewed

@@ -76,7 +76,9 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
         ? visible.map((col, i) => Number.isNaN(calcColumnWidths[col.id] || '') ? cellWidths[i] : calcColumnWidths[col.id])
         : cellWidths;
     // Generate styles
-    const { scrollPosition, onScroll } = useScrollPosition.useScrollPosition({ containerRef: scrollContainerRef });
+    const { scrollPosition, onScroll, enableTransition } = useScrollPosition.useScrollPosition({
+        containerRef: scrollContainerRef,
+    });
     const tableCss = generateTableCss.generateTableCss({
         pinnedLeft,
         pinnedRight,
@@ -85,6 +87,7 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
         columnWidths: calcColumnWidths,
         columns: visible,
         stripingMode,
+        enableTransition,
     });
     // Render states
     if (loading) {

package/dist/components/DataTable/DataTable.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.cjs","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles /\n\nimport React, { useRef } from 'react';\nimport { Stack } from '../Stack';\nimport { Text } from '../Text';\n\nimport { useDragToScroll, useScrollPosition } from '../../hooks';\n\nimport { generateTableCss } from './utils';\nimport { DataTableProps, CustomState, TableRow } from './types';\n\nimport { useCellWidths, useColumns, useSelection } from './hooks';\n\nimport {\n renderCell,\n renderFooter,\n renderHeader,\n renderLoadingCell,\n renderNestedCell,\n} from './renderers';\n\nimport { ActionBar } from './components/ActionBar';\nimport { Cell } from './components/Cell';\nimport { ColumnMenu } from './components/ColumnMenu';\nimport { EmptyBodyContent, EmptyBodyGlyphWrapper } from './components/EmptyBodyContent';\nimport { Header } from './components/Header';\nimport { NoWrap } from './components/NoWrap';\nimport { Row } from './components/Row';\nimport { ScrollContainer } from './components/ScrollContainer';\nimport { TableGrid } from './components/TableGrid';\nimport { Truncate } from './components/Truncate';\nimport { Wrapper } from './components/Wrapper';\nimport { SelectionCell } from './components/SelectionCell';\nimport { SelectionHeader } from './components/SelectionHeader';\nimport { StickyHead } from './components/StickyHead';\n\nimport { getRowState } from './utils/getRowState';\nimport { InfoIcon } from '../../icons';\n\nconst defaultEmptyState: CustomState = {\n iconSlot: <InfoIcon width={48} height={48} />,\n heading: 'No results',\n};\n\nconst emptyAction = () => {};\n\nexport const DataTable = ({\n actionBarSlot,\n borderMode,\n columns: initialColumns,\n emptyState = defaultEmptyState,\n expandedRowIds,\n loading,\n loadingRowCount,\n onChangeSort,\n rows,\n disabledRowIds,\n selectionMode,\n selectionState,\n setExpanded,\n sortState,\n stripingMode,\n enableStickyHeader,\n resizeableColumns,\n onResizeColumns,\n columnWidths,\n stickyHeaderTop,\n}: DataTableProps) => {\n // Refs\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const intersectionTargetRef = useRef<HTMLDivElement>(null);\n\n useDragToScroll({ targetRef: scrollContainerRef, ignoreClassName: 'th-divider' });\n\n // Configure row selection\n\n const enabledRowIds = rows.map((row) => row.id).filter((id) => !disabledRowIds?.includes(id));\n\n const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection({\n selectionMode,\n selectionState,\n enabledRowIds,\n });\n\n // Assign actions\n\n const actions = {\n setSelected: setSelected \|\| emptyAction,\n setExpanded: setExpanded \|\| emptyAction,\n };\n\n // Process columns\n\n const columnsWithSelection = [selectionColumn, ...initialColumns];\n const allColumns = selectionEnabled ? columnsWithSelection : initialColumns;\n\n const cellWidths = useCellWidths(tableRef, scrollContainerRef);\n const {\n visible,\n pinnedLeft,\n pinnedRight,\n setColumnWidth,\n columnWidths: calcColumnWidths,\n } = useColumns(allColumns, tableRef, onResizeColumns, columnWidths);\n const adjustedCellWidths =\n cellWidths.length === visible.length\n ? (visible.map((col, i) =>\n Number.isNaN(calcColumnWidths[col.id] \|\| '') ? cellWidths[i] : calcColumnWidths[col.id],\n ) as number[])\n : cellWidths;\n\n // Generate styles\n const { scrollPosition, onScroll } = useScrollPosition({ containerRef: scrollContainerRef });\n const tableCss = generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths: adjustedCellWidths,\n scrollPosition,\n columnWidths: calcColumnWidths,\n columns: visible,\n stripingMode,\n });\n\n // Render states\n\n if (loading) {\n const loadingRows: Array<TableRow> = new Array(loadingRowCount).fill(true).map(() => ({\n // generate random ID forcing all rows to re-render avoid animation de-sync\n id: Math.random() 1000,\n data: null,\n }));\n\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n {loadingRows.map((row) => (\n <Row key={row.id}>{visible.map((col) => renderLoadingCell(row, col))}</Row>\n ))}\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n if (rows.length === 0) {\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n <EmptyBodyContent columnCount={visible.length}>\n <EmptyBodyGlyphWrapper>\n {/* Should be 48x48px */}\n {emptyState.iconSlot}\n </EmptyBodyGlyphWrapper>\n <Stack spacing=\"sm\" alignX=\"center\">\n <Text variant=\"headingMedium\">{emptyState.heading}</Text>\n {emptyState.subheading && (\n <Text variant=\"subheadingMedium\">{emptyState.subheading}</Text>\n )}\n </Stack>\n </EmptyBodyContent>\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n const renderRow = (row: TableRow) => {\n const { e2eClassName = '', accentColor } = row;\n const rowState = getRowState(row.id, { selectedRowIds, expandedRowIds, disabledRowIds });\n\n return (\n <Row role=\"row\" key={row.id} accentColor={accentColor} className={e2eClassName} {...rowState}>\n {visible.map((col) => renderCell(row, col, actions, rowState))}\n </Row>\n );\n };\n\n const renderNestedRow = (nestedRow: TableRow, rowId: TableRow['id']) => {\n const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row;\n const rowState = getRowState(rowId, { selectedRowIds, expandedRowIds, disabledRowIds });\n return (\n <Row role=\"row\" key={nestedRow.id} className={nestedRowE2eClassName}>\n {visible.map((col) => renderNestedCell(nestedRow, col, rowState))}\n </Row>\n );\n };\n\n const renderSection = (row: TableRow) => {\n const isExpanded = expandedRowIds?.includes(row.id);\n return (\n <tbody role=\"rowgroup\" key={row.id}>\n {renderRow(row)}\n {isExpanded && row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))}\n </tbody>\n );\n };\n\n const renderBody = () => {\n const hasNestedRows = !!expandedRowIds;\n const hasMultipleSections = hasNestedRows && stripingMode === 'nested';\n\n if (hasMultipleSections) {\n return rows.map(renderSection);\n }\n\n if (hasNestedRows) {\n return (\n <tbody role=\"rowgroup\">\n {rows.map((row) => {\n const rowElement = renderRow(row);\n const isExpanded = expandedRowIds?.includes(row.id);\n const nestedRowElements =\n (isExpanded &&\n row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))) \|\|\n [];\n return [rowElement, ...nestedRowElements];\n })}\n </tbody>\n );\n }\n\n return <tbody role=\"rowgroup\">{rows.map(renderRow)}</tbody>;\n };\n\n const headersMarkup = (\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n );\n\n const shouldRenderFooter = initialColumns.some((column) => !!column.renderFooter);\n const shouldRenderActionBar = selectedRowIds.length > 0 && !!actionBarSlot;\n\n return (\n <Wrapper borderMode={borderMode}>\n {shouldRenderActionBar && (\n <ActionBar\n selectionColumn={selectionColumn}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n >\n {actionBarSlot}\n </ActionBar>\n )}\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n {enableStickyHeader && (\n <StickyHead\n tableCss={tableCss}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n cellWidths={adjustedCellWidths}\n stickyHeaderTop={stickyHeaderTop}\n >\n {headersMarkup}\n </StickyHead>\n )}\n <div ref={intersectionTargetRef} style={{ height: 0 }} />\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">{headersMarkup}</thead>\n {renderBody()}\n {shouldRenderFooter && (\n <tfoot role=\"rowgroup\">\n <Row role=\"row\">{visible.map((column) => renderFooter({ column }))}</Row>\n </tfoot>\n )}\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n};\n\nDataTable.defaultProps = {\n loading: false,\n loadingRowCount: 5,\n selectionMode: 'multiple',\n stripingMode: 'row',\n enableStickyHeader: true,\n};\n\nDataTable.Cell = Cell;\nDataTable.ColumnMenu = ColumnMenu;\nDataTable.SelectionCell = SelectionCell;\nDataTable.SelectionHeader = SelectionHeader;\nDataTable.Header = Header;\nDataTable.Truncate = Truncate;\nDataTable.NoWrap = NoWrap;\n"],"names":["React","InfoIcon","useRef","useDragToScroll","useSelection","useCellWidths","useColumns","useScrollPosition","generateTableCss","Wrapper","ScrollContainer","TableGrid","Row","renderHeader","renderLoadingCell","EmptyBodyContent","EmptyBodyGlyphWrapper","Stack","Text","getRowState","renderCell","renderNestedCell","ActionBar","StickyHead","renderFooter","Cell","ColumnMenu","SelectionCell","SelectionHeader","Header","Truncate","NoWrap"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAuCA,MAAM,iBAAiB,GAAgB;IACrC,QAAQ,EAAEA,sBAAC,CAAA,aAAA,CAAAC,uBAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAI,CAAA;AAC7C,IAAA,OAAO,EAAE,YAAY;CACtB;AAED,MAAM,WAAW,GAAG,MAAK,GAAG;MAEf,SAAS,GAAG,CAAC,EACxB,aAAa,EACb,UAAU,EACV,OAAO,EAAE,cAAc,EACvB,UAAU,GAAG,iBAAiB,EAC9B,cAAc,EACd,OAAO,EACP,eAAe,EACf,YAAY,EACZ,IAAI,EACJ,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,EACX,SAAS,EACT,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,YAAY,EACZ,eAAe,GACA,KAAI;;AAGnB,IAAA,MAAM,kBAAkB,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACvD,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAmB,IAAI,CAAC;AAC/C,IAAA,MAAM,qBAAqB,GAAGA,YAAM,CAAiB,IAAI,CAAC;IAE1DC,+BAAe,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC;;AAIjF,IAAA,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,KAAK,EAAC,cAAc,KAAd,IAAA,IAAA,cAAc,KAAd,SAAA,GAAA,SAAA,GAAA,cAAc,CAAE,QAAQ,CAAC,EAAE,CAAC,CAAA,CAAC;IAE7F,MAAM,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,WAAW,EAAE,GAAGC,yBAAY,CAAC;QACtF,aAAa;QACb,cAAc;QACd,aAAa;AACd,KAAA,CAAC;;AAIF,IAAA,MAAM,OAAO,GAAG;QACd,WAAW,EAAE,WAAW,IAAI,WAAW;QACvC,WAAW,EAAE,WAAW,IAAI,WAAW;KACxC;;IAID,MAAM,oBAAoB,GAAG,CAAC,eAAe,EAAE,GAAG,cAAc,CAAC;IACjE,MAAM,UAAU,GAAG,gBAAgB,GAAG,oBAAoB,GAAG,cAAc;IAE3E,MAAM,UAAU,GAAGC,2BAAa,CAAC,QAAQ,EAAE,kBAAkB,CAAC;IAC9D,MAAM,EACJ,OAAO,EACP,UAAU,EACV,WAAW,EACX,cAAc,EACd,YAAY,EAAE,gBAAgB,GAC/B,GAAGC,qBAAU,CAAC,UAAU,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,CAAC;IACnE,MAAM,kBAAkB,GACtB,UAAU,CAAC,MAAM,KAAK,OAAO,CAAC;AAC5B,UAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAClB,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,CAAC,EAAE,CAAC;UAEzF,UAAU;;AAGhB,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,kBAAkB,EAAE,CAAC;IAC5F,MAAM,QAAQ,GAAGC,iCAAgB,CAAC;QAChC,UAAU;QACV,WAAW;AACX,QAAA,UAAU,EAAE,kBAAkB;QAC9B,cAAc;AACd,QAAA,YAAY,EAAE,gBAAgB;AAC9B,QAAA,OAAO,EAAE,OAAO;QAChB,YAAY;AACb,KAAA,CAAC;;AAIF,IAAA,IAAI,OAAO,EAAE;AACX,QAAA,MAAM,WAAW,GAAoB,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,OAAO;;AAEpF,YAAA,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI;AACxB,YAAA,IAAI,EAAE,IAAI;AACX,SAAA,CAAC,CAAC;AAEH,QAAA,QACER,sBAAC,CAAA,aAAA,CAAAS,eAAO,EAAC,EAAA,UAAU,EAAE,UAAU,EAAA;YAC7BT,sBAAC,CAAA,aAAA,CAAAU,+BAAe,IAAC,GAAG,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC1D,gBAAAV,sBAAA,CAAA,aAAA,CAACW,mBAAS,EAAA,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,EAAA;oBACnDX,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAA;AACpB,wBAAAA,sBAAA,CAAA,aAAA,CAACY,OAAG,EAAC,EAAA,IAAI,EAAC,KAAK,EAAA,EACZ,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KACrBC,yBAAY,CAAC;4BACX,MAAM;4BACN,SAAS;4BACT,YAAY;4BACZ,iBAAiB;4BACjB,cAAc;4BACd,WAAW,EAAE,OAAO,CAAC,MAAM;AAC3B,4BAAA,OAAO,EAAE,CAAC;yBACX,CAAC,CACH,CACG,CACA;oBACRb,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAA,EACnB,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,MACnBA,sBAAC,CAAA,aAAA,CAAAY,OAAG,IAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA,EAAG,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,KAAKE,mCAAiB,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,CAAO,CAC5E,CAAC,CACI,CACE,CACI,CACV;AAEb;AAED,IAAA,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE;AACrB,QAAA,QACEd,sBAAC,CAAA,aAAA,CAAAS,eAAO,EAAC,EAAA,UAAU,EAAE,UAAU,EAAA;YAC7BT,sBAAC,CAAA,aAAA,CAAAU,+BAAe,IAAC,GAAG,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAA;AAC1D,gBAAAV,sBAAA,CAAA,aAAA,CAACW,mBAAS,EAAA,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,EAAA;oBACnDX,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAA;AACpB,wBAAAA,sBAAA,CAAA,aAAA,CAACY,OAAG,EAAC,EAAA,IAAI,EAAC,KAAK,EAAA,EACZ,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KACrBC,yBAAY,CAAC;4BACX,MAAM;4BACN,SAAS;4BACT,YAAY;4BACZ,iBAAiB;4BACjB,cAAc;4BACd,WAAW,EAAE,OAAO,CAAC,MAAM;AAC3B,4BAAA,OAAO,EAAE,CAAC;yBACX,CAAC,CACH,CACG,CACA;oBACRb,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAA;AACpB,wBAAAA,sBAAA,CAAA,aAAA,CAACe,iCAAgB,EAAC,EAAA,WAAW,EAAE,OAAO,CAAC,MAAM,EAAA;AAC3C,4BAAAf,sBAAA,CAAA,aAAA,CAACgB,sCAAqB,EAAA,IAAA,EAEnB,UAAU,CAAC,QAAQ,CACE;4BACxBhB,sBAAC,CAAA,aAAA,CAAAiB,WAAK,IAAC,OAAO,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAA;gCACjCjB,sBAAC,CAAA,aAAA,CAAAkB,SAAI,IAAC,OAAO,EAAC,eAAe,EAAE,EAAA,UAAU,CAAC,OAAO,CAAQ;gCACxD,UAAU,CAAC,UAAU,KACpBlB,qCAACkB,SAAI,EAAA,EAAC,OAAO,EAAC,kBAAkB,EAAA,EAAE,UAAU,CAAC,UAAU,CAAQ,CAChE,CACK,CACS,CACb,CACE,CACI,CACV;AAEb;AAED,IAAA,MAAM,SAAS,GAAG,CAAC,GAAa,KAAI;QAClC,MAAM,EAAE,YAAY,GAAG,EAAE,EAAE,WAAW,EAAE,GAAG,GAAG;AAC9C,QAAA,MAAM,QAAQ,GAAGC,uBAAW,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC;QAExF,QACEnB,qCAACY,OAAG,EAAA,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAM,GAAA,QAAQ,IACzF,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,KAAKQ,qBAAU,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAC1D;AAEV,KAAC;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,SAAmB,EAAE,KAAqB,KAAI;;AACrE,QAAA,MAAM,qBAAqB,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,SAAS,KAAT,IAAA,IAAA,SAAS,KAAT,SAAA,GAAA,SAAA,GAAA,SAAS,CAAE,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,aAAa,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,GAAG;AACjE,QAAA,MAAM,QAAQ,GAAGD,uBAAW,CAAC,KAAK,EAAE,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,CAAC;AACvF,QAAA,QACEnB,sBAAC,CAAA,aAAA,CAAAY,OAAG,EAAC,EAAA,IAAI,EAAC,KAAK,EAAC,GAAG,EAAE,SAAS,CAAC,EAAE,EAAE,SAAS,EAAE,qBAAqB,EAChE,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,KAAKS,iCAAgB,CAAC,SAAS,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAC7D;AAEV,KAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,GAAa,KAAI;;AACtC,QAAA,MAAM,UAAU,GAAG,cAAc,KAAA,IAAA,IAAd,cAAc,KAAd,SAAA,GAAA,SAAA,GAAA,cAAc,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QACnD,QACErB,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAC,GAAG,EAAE,GAAG,CAAC,EAAE,EAAA;YAC/B,SAAS,CAAC,GAAG,CAAC;YACd,UAAU,KAAI,CAAA,EAAA,GAAA,GAAG,CAAC,UAAU,gDAAE,GAAG,CAAC,CAAC,SAAS,KAAK,eAAe,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA,CAC/E;AAEZ,KAAC;IAED,MAAM,UAAU,GAAG,MAAK;AACtB,QAAA,MAAM,aAAa,GAAG,CAAC,CAAC,cAAc;AACtC,QAAA,MAAM,mBAAmB,GAAG,aAAa,IAAI,YAAY,KAAK,QAAQ;AAEtE,QAAA,IAAI,mBAAmB,EAAE;AACvB,YAAA,OAAO,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC;AAC/B;AAED,QAAA,IAAI,aAAa,EAAE;AACjB,YAAA,QACEA,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,UAAU,EAAA,EACnB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,KAAI;;AAChB,gBAAA,MAAM,UAAU,GAAG,SAAS,CAAC,GAAG,CAAC;AACjC,gBAAA,MAAM,UAAU,GAAG,cAAc,KAAA,IAAA,IAAd,cAAc,KAAd,SAAA,GAAA,SAAA,GAAA,cAAc,CAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;gBACnD,MAAM,iBAAiB,GACrB,CAAC,UAAU;qBACT,CAAA,EAAA,GAAA,GAAG,CAAC,UAAU,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,GAAG,CAAC,CAAC,SAAS,KAAK,eAAe,CAAC,SAAS,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAA;AACxE,oBAAA,EAAE;AACJ,gBAAA,OAAO,CAAC,UAAU,EAAE,GAAG,iBAAiB,CAAC;aAC1C,CAAC,CACI;AAEX;AAED,QAAA,OAAOA,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAE,EAAA,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,CAAS;AAC7D,KAAC;IAED,MAAM,aAAa,IACjBA,sBAAA,CAAA,aAAA,CAACY,OAAG,EAAC,EAAA,IAAI,EAAC,KAAK,EACZ,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KACrBC,yBAAY,CAAC;QACX,MAAM;QACN,SAAS;QACT,YAAY;QACZ,iBAAiB;QACjB,cAAc;QACd,WAAW,EAAE,OAAO,CAAC,MAAM;AAC3B,QAAA,OAAO,EAAE,CAAC;KACX,CAAC,CACH,CACG,CACP;AAED,IAAA,MAAM,kBAAkB,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC;IACjF,MAAM,qBAAqB,GAAG,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,aAAa;AAE1E,IAAA,QACEb,sBAAC,CAAA,aAAA,CAAAS,eAAO,EAAC,EAAA,UAAU,EAAE,UAAU,EAAA;AAC5B,QAAA,qBAAqB,KACpBT,sBAAA,CAAA,aAAA,CAACsB,mBAAS,EACR,EAAA,eAAe,EAAE,eAAe,EAChC,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,kBAAkB,EAE/B,EAAA,aAAa,CACJ,CACb;QACDtB,sBAAC,CAAA,aAAA,CAAAU,+BAAe,IAAC,GAAG,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAA;YACzD,kBAAkB,KACjBV,sBAAA,CAAA,aAAA,CAACuB,qBAAU,EAAA,EACT,QAAQ,EAAE,QAAQ,EAClB,qBAAqB,EAAE,qBAAqB,EAC5C,YAAY,EAAE,kBAAkB,EAChC,UAAU,EAAE,kBAAkB,EAC9B,eAAe,EAAE,eAAe,EAAA,EAE/B,aAAa,CACH,CACd;YACDvB,sBAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,qBAAqB,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EAAI,CAAA;AACzD,YAAAA,sBAAA,CAAA,aAAA,CAACW,mBAAS,EAAA,EAAC,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAC,OAAO,EAAA;AACnD,gBAAAX,sBAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,IAAI,EAAC,UAAU,EAAA,EAAE,aAAa,CAAS;AAC7C,gBAAA,UAAU,EAAE;AACZ,gBAAA,kBAAkB,KACjBA,sBAAO,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,IAAI,EAAC,UAAU,EAAA;AACpB,oBAAAA,sBAAA,CAAA,aAAA,CAACY,OAAG,EAAA,EAAC,IAAI,EAAC,KAAK,EAAA,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAKY,yBAAY,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAO,CACnE,CACT,CACS,CACI,CACV;AAEd;AAEA,SAAS,CAAC,YAAY,GAAG;AACvB,IAAA,OAAO,EAAE,KAAK;AACd,IAAA,eAAe,EAAE,CAAC;AAClB,IAAA,aAAa,EAAE,UAAU;AACzB,IAAA,YAAY,EAAE,KAAK;AACnB,IAAA,kBAAkB,EAAE,IAAI;CACzB;AAED,SAAS,CAAC,IAAI,GAAGC,SAAI;AACrB,SAAS,CAAC,UAAU,GAAGC,qBAAU;AACjC,SAAS,CAAC,aAAa,GAAGC,2BAAa;AACvC,SAAS,CAAC,eAAe,GAAGC,+BAAe;AAC3C,SAAS,CAAC,MAAM,GAAGC,aAAM;AACzB,SAAS,CAAC,QAAQ,GAAGC,iBAAQ;AAC7B,SAAS,CAAC,MAAM,GAAGC,aAAM;;;;"}
1	+ {"version":3,"file":"DataTable.cjs","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles /\n\nimport React, { useRef } from 'react';\nimport { Stack } from '../Stack';\nimport { Text } from '../Text';\n\nimport { useDragToScroll, useScrollPosition } from '../../hooks';\n\nimport { generateTableCss } from './utils';\nimport { DataTableProps, CustomState, TableRow } from './types';\n\nimport { useCellWidths, useColumns, useSelection } from './hooks';\n\nimport {\n renderCell,\n renderFooter,\n renderHeader,\n renderLoadingCell,\n renderNestedCell,\n} from './renderers';\n\nimport { ActionBar } from './components/ActionBar';\nimport { Cell } from './components/Cell';\nimport { ColumnMenu } from './components/ColumnMenu';\nimport { EmptyBodyContent, EmptyBodyGlyphWrapper } from './components/EmptyBodyContent';\nimport { Header } from './components/Header';\nimport { NoWrap } from './components/NoWrap';\nimport { Row } from './components/Row';\nimport { ScrollContainer } from './components/ScrollContainer';\nimport { TableGrid } from './components/TableGrid';\nimport { Truncate } from './components/Truncate';\nimport { Wrapper } from './components/Wrapper';\nimport { SelectionCell } from './components/SelectionCell';\nimport { SelectionHeader } from './components/SelectionHeader';\nimport { StickyHead } from './components/StickyHead';\n\nimport { getRowState } from './utils/getRowState';\nimport { InfoIcon } from '../../icons';\n\nconst defaultEmptyState: CustomState = {\n iconSlot: <InfoIcon width={48} height={48} />,\n heading: 'No results',\n};\n\nconst emptyAction = () => {};\n\nexport const DataTable = ({\n actionBarSlot,\n borderMode,\n columns: initialColumns,\n emptyState = defaultEmptyState,\n expandedRowIds,\n loading,\n loadingRowCount,\n onChangeSort,\n rows,\n disabledRowIds,\n selectionMode,\n selectionState,\n setExpanded,\n sortState,\n stripingMode,\n enableStickyHeader,\n resizeableColumns,\n onResizeColumns,\n columnWidths,\n stickyHeaderTop,\n}: DataTableProps) => {\n // Refs\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const intersectionTargetRef = useRef<HTMLDivElement>(null);\n\n useDragToScroll({ targetRef: scrollContainerRef, ignoreClassName: 'th-divider' });\n\n // Configure row selection\n\n const enabledRowIds = rows.map((row) => row.id).filter((id) => !disabledRowIds?.includes(id));\n\n const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection({\n selectionMode,\n selectionState,\n enabledRowIds,\n });\n\n // Assign actions\n\n const actions = {\n setSelected: setSelected \|\| emptyAction,\n setExpanded: setExpanded \|\| emptyAction,\n };\n\n // Process columns\n\n const columnsWithSelection = [selectionColumn, ...initialColumns];\n const allColumns = selectionEnabled ? columnsWithSelection : initialColumns;\n\n const cellWidths = useCellWidths(tableRef, scrollContainerRef);\n const {\n visible,\n pinnedLeft,\n pinnedRight,\n setColumnWidth,\n columnWidths: calcColumnWidths,\n } = useColumns(allColumns, tableRef, onResizeColumns, columnWidths);\n const adjustedCellWidths =\n cellWidths.length === visible.length\n ? (visible.map((col, i) =>\n Number.isNaN(calcColumnWidths[col.id] \|\| '') ? cellWidths[i] : calcColumnWidths[col.id],\n ) as number[])\n : cellWidths;\n\n // Generate styles\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({\n containerRef: scrollContainerRef,\n });\n const tableCss = generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths: adjustedCellWidths,\n scrollPosition,\n columnWidths: calcColumnWidths,\n columns: visible,\n stripingMode,\n enableTransition,\n });\n\n // Render states\n\n if (loading) {\n const loadingRows: Array<TableRow> = new Array(loadingRowCount).fill(true).map(() => ({\n // generate random ID forcing all rows to re-render avoid animation de-sync\n id: Math.random() 1000,\n data: null,\n }));\n\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n {loadingRows.map((row) => (\n <Row key={row.id}>{visible.map((col) => renderLoadingCell(row, col))}</Row>\n ))}\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n if (rows.length === 0) {\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n <EmptyBodyContent columnCount={visible.length}>\n <EmptyBodyGlyphWrapper>\n {/* Should be 48x48px */}\n {emptyState.iconSlot}\n </EmptyBodyGlyphWrapper>\n <Stack spacing=\"sm\" alignX=\"center\">\n <Text variant=\"headingMedium\">{emptyState.heading}</Text>\n {emptyState.subheading && (\n <Text variant=\"subheadingMedium\">{emptyState.subheading}</Text>\n )}\n </Stack>\n </EmptyBodyContent>\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n const renderRow = (row: TableRow) => {\n const { e2eClassName = '', accentColor } = row;\n const rowState = getRowState(row.id, { selectedRowIds, expandedRowIds, disabledRowIds });\n\n return (\n <Row role=\"row\" key={row.id} accentColor={accentColor} className={e2eClassName} {...rowState}>\n {visible.map((col) => renderCell(row, col, actions, rowState))}\n </Row>\n );\n };\n\n const renderNestedRow = (nestedRow: TableRow, rowId: TableRow['id']) => {\n const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row;\n const rowState = getRowState(rowId, { selectedRowIds, expandedRowIds, disabledRowIds });\n return (\n <Row role=\"row\" key={nestedRow.id} className={nestedRowE2eClassName}>\n {visible.map((col) => renderNestedCell(nestedRow, col, rowState))}\n </Row>\n );\n };\n\n const renderSection = (row: TableRow) => {\n const isExpanded = expandedRowIds?.includes(row.id);\n return (\n <tbody role=\"rowgroup\" key={row.id}>\n {renderRow(row)}\n {isExpanded && row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))}\n </tbody>\n );\n };\n\n const renderBody = () => {\n const hasNestedRows = !!expandedRowIds;\n const hasMultipleSections = hasNestedRows && stripingMode === 'nested';\n\n if (hasMultipleSections) {\n return rows.map(renderSection);\n }\n\n if (hasNestedRows) {\n return (\n <tbody role=\"rowgroup\">\n {rows.map((row) => {\n const rowElement = renderRow(row);\n const isExpanded = expandedRowIds?.includes(row.id);\n const nestedRowElements =\n (isExpanded &&\n row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))) \|\|\n [];\n return [rowElement, ...nestedRowElements];\n })}\n </tbody>\n );\n }\n\n return <tbody role=\"rowgroup\">{rows.map(renderRow)}</tbody>;\n };\n\n const headersMarkup = (\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n );\n\n const shouldRenderFooter = initialColumns.some((column) => !!column.renderFooter);\n const shouldRenderActionBar = selectedRowIds.length > 0 && !!actionBarSlot;\n\n return (\n <Wrapper borderMode={borderMode}>\n {shouldRenderActionBar && (\n <ActionBar\n selectionColumn={selectionColumn}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n >\n {actionBarSlot}\n </ActionBar>\n )}\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n {enableStickyHeader && (\n <StickyHead\n tableCss={tableCss}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n cellWidths={adjustedCellWidths}\n stickyHeaderTop={stickyHeaderTop}\n >\n {headersMarkup}\n </StickyHead>\n )}\n <div ref={intersectionTargetRef} style={{ height: 0 }} />\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">{headersMarkup}</thead>\n {renderBody()}\n {shouldRenderFooter && (\n <tfoot role=\"rowgroup\">\n <Row role=\"row\">{visible.map((column) => renderFooter({ column }))}</Row>\n </tfoot>\n )}\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n};\n\nDataTable.defaultProps = {\n loading: false,\n loadingRowCount: 5,\n selectionMode: 'multiple',\n stripingMode: 'row',\n enableStickyHeader: true,\n};\n\nDataTable.Cell = Cell;\nDataTable.ColumnMenu = ColumnMenu;\nDataTable.SelectionCell = SelectionCell;\nDataTable.SelectionHeader = SelectionHeader;\nDataTable.Header = Header;\nDataTable.Truncate = Truncate;\nDataTable.NoWrap = NoWrap;\n"],"names":["React","InfoIcon","useRef","useDragToScroll","useSelection","useCellWidths","useColumns","useScrollPosition","generateTableCss","Wrapper","ScrollContainer","TableGrid","Row","renderHeader","renderLoadingCell","EmptyBodyContent","EmptyBodyGlyphWrapper","Stack","Text","getRowState","renderCell","renderNestedCell","ActionBar","StickyHead","renderFooter","Cell","ColumnMenu","SelectionCell","SelectionHeader","Header","Truncate","NoWrap"],"mappings":"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"}

package/dist/components/DataTable/DataTable.js CHANGED Viewed

@@ -70,7 +70,9 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
         ? visible.map((col, i) => Number.isNaN(calcColumnWidths[col.id] || '') ? cellWidths[i] : calcColumnWidths[col.id])
         : cellWidths;
     // Generate styles
-    const { scrollPosition, onScroll } = useScrollPosition({ containerRef: scrollContainerRef });
+    const { scrollPosition, onScroll, enableTransition } = useScrollPosition({
+        containerRef: scrollContainerRef,
+    });
     const tableCss = generateTableCss({
         pinnedLeft,
         pinnedRight,
@@ -79,6 +81,7 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
         columnWidths: calcColumnWidths,
         columns: visible,
         stripingMode,
+        enableTransition,
     });
     // Render states
     if (loading) {

package/dist/components/DataTable/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles /\n\nimport React, { useRef } from 'react';\nimport { Stack } from '../Stack';\nimport { Text } from '../Text';\n\nimport { useDragToScroll, useScrollPosition } from '../../hooks';\n\nimport { generateTableCss } from './utils';\nimport { DataTableProps, CustomState, TableRow } from './types';\n\nimport { useCellWidths, useColumns, useSelection } from './hooks';\n\nimport {\n renderCell,\n renderFooter,\n renderHeader,\n renderLoadingCell,\n renderNestedCell,\n} from './renderers';\n\nimport { ActionBar } from './components/ActionBar';\nimport { Cell } from './components/Cell';\nimport { ColumnMenu } from './components/ColumnMenu';\nimport { EmptyBodyContent, EmptyBodyGlyphWrapper } from './components/EmptyBodyContent';\nimport { Header } from './components/Header';\nimport { NoWrap } from './components/NoWrap';\nimport { Row } from './components/Row';\nimport { ScrollContainer } from './components/ScrollContainer';\nimport { TableGrid } from './components/TableGrid';\nimport { Truncate } from './components/Truncate';\nimport { Wrapper } from './components/Wrapper';\nimport { SelectionCell } from './components/SelectionCell';\nimport { SelectionHeader } from './components/SelectionHeader';\nimport { StickyHead } from './components/StickyHead';\n\nimport { getRowState } from './utils/getRowState';\nimport { InfoIcon } from '../../icons';\n\nconst defaultEmptyState: CustomState = {\n iconSlot: <InfoIcon width={48} height={48} />,\n heading: 'No results',\n};\n\nconst emptyAction = () => {};\n\nexport const DataTable = ({\n actionBarSlot,\n borderMode,\n columns: initialColumns,\n emptyState = defaultEmptyState,\n expandedRowIds,\n loading,\n loadingRowCount,\n onChangeSort,\n rows,\n disabledRowIds,\n selectionMode,\n selectionState,\n setExpanded,\n sortState,\n stripingMode,\n enableStickyHeader,\n resizeableColumns,\n onResizeColumns,\n columnWidths,\n stickyHeaderTop,\n}: DataTableProps) => {\n // Refs\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const intersectionTargetRef = useRef<HTMLDivElement>(null);\n\n useDragToScroll({ targetRef: scrollContainerRef, ignoreClassName: 'th-divider' });\n\n // Configure row selection\n\n const enabledRowIds = rows.map((row) => row.id).filter((id) => !disabledRowIds?.includes(id));\n\n const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection({\n selectionMode,\n selectionState,\n enabledRowIds,\n });\n\n // Assign actions\n\n const actions = {\n setSelected: setSelected \|\| emptyAction,\n setExpanded: setExpanded \|\| emptyAction,\n };\n\n // Process columns\n\n const columnsWithSelection = [selectionColumn, ...initialColumns];\n const allColumns = selectionEnabled ? columnsWithSelection : initialColumns;\n\n const cellWidths = useCellWidths(tableRef, scrollContainerRef);\n const {\n visible,\n pinnedLeft,\n pinnedRight,\n setColumnWidth,\n columnWidths: calcColumnWidths,\n } = useColumns(allColumns, tableRef, onResizeColumns, columnWidths);\n const adjustedCellWidths =\n cellWidths.length === visible.length\n ? (visible.map((col, i) =>\n Number.isNaN(calcColumnWidths[col.id] \|\| '') ? cellWidths[i] : calcColumnWidths[col.id],\n ) as number[])\n : cellWidths;\n\n // Generate styles\n const { scrollPosition, onScroll } = useScrollPosition({ containerRef: scrollContainerRef });\n const tableCss = generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths: adjustedCellWidths,\n scrollPosition,\n columnWidths: calcColumnWidths,\n columns: visible,\n stripingMode,\n });\n\n // Render states\n\n if (loading) {\n const loadingRows: Array<TableRow> = new Array(loadingRowCount).fill(true).map(() => ({\n // generate random ID forcing all rows to re-render avoid animation de-sync\n id: Math.random() 1000,\n data: null,\n }));\n\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n {loadingRows.map((row) => (\n <Row key={row.id}>{visible.map((col) => renderLoadingCell(row, col))}</Row>\n ))}\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n if (rows.length === 0) {\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n <EmptyBodyContent columnCount={visible.length}>\n <EmptyBodyGlyphWrapper>\n {/* Should be 48x48px */}\n {emptyState.iconSlot}\n </EmptyBodyGlyphWrapper>\n <Stack spacing=\"sm\" alignX=\"center\">\n <Text variant=\"headingMedium\">{emptyState.heading}</Text>\n {emptyState.subheading && (\n <Text variant=\"subheadingMedium\">{emptyState.subheading}</Text>\n )}\n </Stack>\n </EmptyBodyContent>\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n const renderRow = (row: TableRow) => {\n const { e2eClassName = '', accentColor } = row;\n const rowState = getRowState(row.id, { selectedRowIds, expandedRowIds, disabledRowIds });\n\n return (\n <Row role=\"row\" key={row.id} accentColor={accentColor} className={e2eClassName} {...rowState}>\n {visible.map((col) => renderCell(row, col, actions, rowState))}\n </Row>\n );\n };\n\n const renderNestedRow = (nestedRow: TableRow, rowId: TableRow['id']) => {\n const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row;\n const rowState = getRowState(rowId, { selectedRowIds, expandedRowIds, disabledRowIds });\n return (\n <Row role=\"row\" key={nestedRow.id} className={nestedRowE2eClassName}>\n {visible.map((col) => renderNestedCell(nestedRow, col, rowState))}\n </Row>\n );\n };\n\n const renderSection = (row: TableRow) => {\n const isExpanded = expandedRowIds?.includes(row.id);\n return (\n <tbody role=\"rowgroup\" key={row.id}>\n {renderRow(row)}\n {isExpanded && row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))}\n </tbody>\n );\n };\n\n const renderBody = () => {\n const hasNestedRows = !!expandedRowIds;\n const hasMultipleSections = hasNestedRows && stripingMode === 'nested';\n\n if (hasMultipleSections) {\n return rows.map(renderSection);\n }\n\n if (hasNestedRows) {\n return (\n <tbody role=\"rowgroup\">\n {rows.map((row) => {\n const rowElement = renderRow(row);\n const isExpanded = expandedRowIds?.includes(row.id);\n const nestedRowElements =\n (isExpanded &&\n row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))) \|\|\n [];\n return [rowElement, ...nestedRowElements];\n })}\n </tbody>\n );\n }\n\n return <tbody role=\"rowgroup\">{rows.map(renderRow)}</tbody>;\n };\n\n const headersMarkup = (\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n );\n\n const shouldRenderFooter = initialColumns.some((column) => !!column.renderFooter);\n const shouldRenderActionBar = selectedRowIds.length > 0 && !!actionBarSlot;\n\n return (\n <Wrapper borderMode={borderMode}>\n {shouldRenderActionBar && (\n <ActionBar\n selectionColumn={selectionColumn}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n >\n {actionBarSlot}\n </ActionBar>\n )}\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n {enableStickyHeader && (\n <StickyHead\n tableCss={tableCss}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n cellWidths={adjustedCellWidths}\n stickyHeaderTop={stickyHeaderTop}\n >\n {headersMarkup}\n </StickyHead>\n )}\n <div ref={intersectionTargetRef} style={{ height: 0 }} />\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">{headersMarkup}</thead>\n {renderBody()}\n {shouldRenderFooter && (\n <tfoot role=\"rowgroup\">\n <Row role=\"row\">{visible.map((column) => renderFooter({ column }))}</Row>\n </tfoot>\n )}\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n};\n\nDataTable.defaultProps = {\n loading: false,\n loadingRowCount: 5,\n selectionMode: 'multiple',\n stripingMode: 'row',\n enableStickyHeader: true,\n};\n\nDataTable.Cell = Cell;\nDataTable.ColumnMenu = ColumnMenu;\nDataTable.SelectionCell = SelectionCell;\nDataTable.SelectionHeader = SelectionHeader;\nDataTable.Header = Header;\nDataTable.Truncate = Truncate;\nDataTable.NoWrap = NoWrap;\n"],"names":["React"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/no-redundant-roles /\n\nimport React, { useRef } from 'react';\nimport { Stack } from '../Stack';\nimport { Text } from '../Text';\n\nimport { useDragToScroll, useScrollPosition } from '../../hooks';\n\nimport { generateTableCss } from './utils';\nimport { DataTableProps, CustomState, TableRow } from './types';\n\nimport { useCellWidths, useColumns, useSelection } from './hooks';\n\nimport {\n renderCell,\n renderFooter,\n renderHeader,\n renderLoadingCell,\n renderNestedCell,\n} from './renderers';\n\nimport { ActionBar } from './components/ActionBar';\nimport { Cell } from './components/Cell';\nimport { ColumnMenu } from './components/ColumnMenu';\nimport { EmptyBodyContent, EmptyBodyGlyphWrapper } from './components/EmptyBodyContent';\nimport { Header } from './components/Header';\nimport { NoWrap } from './components/NoWrap';\nimport { Row } from './components/Row';\nimport { ScrollContainer } from './components/ScrollContainer';\nimport { TableGrid } from './components/TableGrid';\nimport { Truncate } from './components/Truncate';\nimport { Wrapper } from './components/Wrapper';\nimport { SelectionCell } from './components/SelectionCell';\nimport { SelectionHeader } from './components/SelectionHeader';\nimport { StickyHead } from './components/StickyHead';\n\nimport { getRowState } from './utils/getRowState';\nimport { InfoIcon } from '../../icons';\n\nconst defaultEmptyState: CustomState = {\n iconSlot: <InfoIcon width={48} height={48} />,\n heading: 'No results',\n};\n\nconst emptyAction = () => {};\n\nexport const DataTable = ({\n actionBarSlot,\n borderMode,\n columns: initialColumns,\n emptyState = defaultEmptyState,\n expandedRowIds,\n loading,\n loadingRowCount,\n onChangeSort,\n rows,\n disabledRowIds,\n selectionMode,\n selectionState,\n setExpanded,\n sortState,\n stripingMode,\n enableStickyHeader,\n resizeableColumns,\n onResizeColumns,\n columnWidths,\n stickyHeaderTop,\n}: DataTableProps) => {\n // Refs\n\n const scrollContainerRef = useRef<HTMLDivElement>(null);\n const tableRef = useRef<HTMLTableElement>(null);\n const intersectionTargetRef = useRef<HTMLDivElement>(null);\n\n useDragToScroll({ targetRef: scrollContainerRef, ignoreClassName: 'th-divider' });\n\n // Configure row selection\n\n const enabledRowIds = rows.map((row) => row.id).filter((id) => !disabledRowIds?.includes(id));\n\n const { selectionEnabled, selectedRowIds, selectionColumn, setSelected } = useSelection({\n selectionMode,\n selectionState,\n enabledRowIds,\n });\n\n // Assign actions\n\n const actions = {\n setSelected: setSelected \|\| emptyAction,\n setExpanded: setExpanded \|\| emptyAction,\n };\n\n // Process columns\n\n const columnsWithSelection = [selectionColumn, ...initialColumns];\n const allColumns = selectionEnabled ? columnsWithSelection : initialColumns;\n\n const cellWidths = useCellWidths(tableRef, scrollContainerRef);\n const {\n visible,\n pinnedLeft,\n pinnedRight,\n setColumnWidth,\n columnWidths: calcColumnWidths,\n } = useColumns(allColumns, tableRef, onResizeColumns, columnWidths);\n const adjustedCellWidths =\n cellWidths.length === visible.length\n ? (visible.map((col, i) =>\n Number.isNaN(calcColumnWidths[col.id] \|\| '') ? cellWidths[i] : calcColumnWidths[col.id],\n ) as number[])\n : cellWidths;\n\n // Generate styles\n const { scrollPosition, onScroll, enableTransition } = useScrollPosition({\n containerRef: scrollContainerRef,\n });\n const tableCss = generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths: adjustedCellWidths,\n scrollPosition,\n columnWidths: calcColumnWidths,\n columns: visible,\n stripingMode,\n enableTransition,\n });\n\n // Render states\n\n if (loading) {\n const loadingRows: Array<TableRow> = new Array(loadingRowCount).fill(true).map(() => ({\n // generate random ID forcing all rows to re-render avoid animation de-sync\n id: Math.random() 1000,\n data: null,\n }));\n\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n {loadingRows.map((row) => (\n <Row key={row.id}>{visible.map((col) => renderLoadingCell(row, col))}</Row>\n ))}\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n if (rows.length === 0) {\n return (\n <Wrapper borderMode={borderMode}>\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n </thead>\n <tbody role=\"rowgroup\">\n <EmptyBodyContent columnCount={visible.length}>\n <EmptyBodyGlyphWrapper>\n {/* Should be 48x48px */}\n {emptyState.iconSlot}\n </EmptyBodyGlyphWrapper>\n <Stack spacing=\"sm\" alignX=\"center\">\n <Text variant=\"headingMedium\">{emptyState.heading}</Text>\n {emptyState.subheading && (\n <Text variant=\"subheadingMedium\">{emptyState.subheading}</Text>\n )}\n </Stack>\n </EmptyBodyContent>\n </tbody>\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n }\n\n const renderRow = (row: TableRow) => {\n const { e2eClassName = '', accentColor } = row;\n const rowState = getRowState(row.id, { selectedRowIds, expandedRowIds, disabledRowIds });\n\n return (\n <Row role=\"row\" key={row.id} accentColor={accentColor} className={e2eClassName} {...rowState}>\n {visible.map((col) => renderCell(row, col, actions, rowState))}\n </Row>\n );\n };\n\n const renderNestedRow = (nestedRow: TableRow, rowId: TableRow['id']) => {\n const nestedRowE2eClassName = nestedRow?.data?.e2eClassNames?.row;\n const rowState = getRowState(rowId, { selectedRowIds, expandedRowIds, disabledRowIds });\n return (\n <Row role=\"row\" key={nestedRow.id} className={nestedRowE2eClassName}>\n {visible.map((col) => renderNestedCell(nestedRow, col, rowState))}\n </Row>\n );\n };\n\n const renderSection = (row: TableRow) => {\n const isExpanded = expandedRowIds?.includes(row.id);\n return (\n <tbody role=\"rowgroup\" key={row.id}>\n {renderRow(row)}\n {isExpanded && row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))}\n </tbody>\n );\n };\n\n const renderBody = () => {\n const hasNestedRows = !!expandedRowIds;\n const hasMultipleSections = hasNestedRows && stripingMode === 'nested';\n\n if (hasMultipleSections) {\n return rows.map(renderSection);\n }\n\n if (hasNestedRows) {\n return (\n <tbody role=\"rowgroup\">\n {rows.map((row) => {\n const rowElement = renderRow(row);\n const isExpanded = expandedRowIds?.includes(row.id);\n const nestedRowElements =\n (isExpanded &&\n row.nestedRows?.map((nestedRow) => renderNestedRow(nestedRow, row.id))) \|\|\n [];\n return [rowElement, ...nestedRowElements];\n })}\n </tbody>\n );\n }\n\n return <tbody role=\"rowgroup\">{rows.map(renderRow)}</tbody>;\n };\n\n const headersMarkup = (\n <Row role=\"row\">\n {visible.map((column, i) =>\n renderHeader({\n column,\n sortState,\n onChangeSort,\n resizeableColumns,\n setColumnWidth,\n columnCount: visible.length,\n columnI: i,\n }),\n )}\n </Row>\n );\n\n const shouldRenderFooter = initialColumns.some((column) => !!column.renderFooter);\n const shouldRenderActionBar = selectedRowIds.length > 0 && !!actionBarSlot;\n\n return (\n <Wrapper borderMode={borderMode}>\n {shouldRenderActionBar && (\n <ActionBar\n selectionColumn={selectionColumn}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n >\n {actionBarSlot}\n </ActionBar>\n )}\n <ScrollContainer ref={scrollContainerRef} onScroll={onScroll}>\n {enableStickyHeader && (\n <StickyHead\n tableCss={tableCss}\n intersectionTargetRef={intersectionTargetRef}\n containerRef={scrollContainerRef}\n cellWidths={adjustedCellWidths}\n stickyHeaderTop={stickyHeaderTop}\n >\n {headersMarkup}\n </StickyHead>\n )}\n <div ref={intersectionTargetRef} style={{ height: 0 }} />\n <TableGrid css={tableCss} ref={tableRef} role=\"table\">\n <thead role=\"rowgroup\">{headersMarkup}</thead>\n {renderBody()}\n {shouldRenderFooter && (\n <tfoot role=\"rowgroup\">\n <Row role=\"row\">{visible.map((column) => renderFooter({ column }))}</Row>\n </tfoot>\n )}\n </TableGrid>\n </ScrollContainer>\n </Wrapper>\n );\n};\n\nDataTable.defaultProps = {\n loading: false,\n loadingRowCount: 5,\n selectionMode: 'multiple',\n stripingMode: 'row',\n enableStickyHeader: true,\n};\n\nDataTable.Cell = Cell;\nDataTable.ColumnMenu = ColumnMenu;\nDataTable.SelectionCell = SelectionCell;\nDataTable.SelectionHeader = SelectionHeader;\nDataTable.Header = Header;\nDataTable.Truncate = Truncate;\nDataTable.NoWrap = NoWrap;\n"],"names":["React"],"mappings":"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"}

package/dist/components/DataTable/types.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.cjs","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ~~ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type~~ RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":["SortDirection"],"mappings":";;~~AAkDA~~;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}
1	+ {"version":3,"file":"types.cjs","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":["SortDirection"],"mappings":";;AAgDA;AAEYA;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHWA,qBAAa,KAAbA,qBAAa,GAGxB,EAAA,CAAA,CAAA;;"}

package/dist/components/DataTable/types.d.ts CHANGED Viewed

@@ -1,7 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { Size } from '../Stack/types';
 export type BorderType = 'all' | 'vertical' | 'none';
-export type ScrollPosition = 'none' | 'start' | 'middle' | 'end';
 export type RowState = {
     selected: boolean;
     expanded: boolean;

package/dist/components/DataTable/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type ~~ScrollPosition = 'none' \| 'start' \| 'middle' \| 'end';\n\nexport type~~ RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":[],"mappings":"~~AAkDA~~;IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}
1	+ {"version":3,"file":"types.js","sources":["../../../src/components/DataTable/types.ts"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\nimport { Size } from '../Stack/types';\n\nexport type BorderType = 'all' \| 'vertical' \| 'none';\n\nexport type RowState = {\n selected: boolean;\n expanded: boolean;\n disabled: boolean;\n};\n\n/* Columns /\n\nexport type ColumnId = string \| number;\nexport type ColumnAlignment = 'left' \| 'center' \| 'right';\nexport type ColumnOverflow = 'none' \| 'wrap' \| 'truncate';\nexport type ColumnPinned = 'left' \| 'right' \| 'none';\nexport type ColumnSpacing = Size;\nexport type ColumnWidth = number \| string;\nexport type ColumnWidthFixed = ColumnWidth;\n\nexport type ColumnWidthBounded = {\n min?: ColumnWidth;\n max?: ColumnWidth;\n};\n\nexport type ColumnConfig = {\n id: ColumnId;\n // Options\n align?: ColumnAlignment;\n hidden?: boolean;\n iconSlot?: ReactElement; // Size[5]\n pinned?: ColumnPinned;\n sortable?: boolean;\n spacing?: ColumnSpacing;\n span?: number;\n title?: string;\n tooltip?: string;\n width?: ColumnWidthFixed \| ColumnWidthBounded;\n resizeMinWidth?: number;\n // Renderers\n renderCell: CellRenderer;\n renderFooter?: FooterRenderer;\n renderHeader?: HeaderRenderer;\n renderNestedCell?: NestedCellRenderer;\n};\nexport type ColumnConfigs = Array<ColumnConfig>;\n\n/ Sorting /\n\nexport enum SortDirection {\n ascending = 'ascending',\n descending = 'descending',\n}\n\nexport type SortDirectionType = keyof typeof SortDirection;\n\nexport type SortState = {\n columnId: ColumnId;\n direction: SortDirection;\n};\n\nexport type SortChangeHandler = (sortState: SortState) => void;\n\nexport type ColumnWidthState = {\n columnId: ColumnId;\n width: number \| string;\n};\n\nexport type ColumnWidthHandler = (columnWidthState: ColumnWidthState) => ColumnWidthsType \| void;\n\n/ Data /\n\nexport type RowId = number \| string;\n\nexport interface NestedTableRow {\n id: RowId;\n data: any;\n}\n\nexport type NestedTableRows = Array<NestedTableRow>;\n\nexport interface TableRow {\n id: RowId;\n data: any;\n nestedRows?: NestedTableRows;\n accentColor?: string;\n e2eClassName?: string;\n}\nexport type TableRows = Array<TableRow>;\n\n/ Header Props /\n\nexport interface HeaderProps extends React.HtmlHTMLAttributes<HTMLTableCellElement> {\n id: string;\n align?: ColumnAlignment;\n spacing?: ColumnSpacing;\n span?: number;\n zIndex?: number;\n}\n\nexport interface RendererHeaderProps extends HeaderProps {\n key: string;\n 'data-columnid'?: string;\n}\nexport interface SelectionHeaderProps extends Omit<HeaderProps, 'onChange'> {\n selected: boolean;\n indeterminate: boolean;\n onChange: (selected: boolean, value: RowId \| undefined) => void;\n selectionMode: SelectionMode;\n}\n\n/ Renderers /\n\nexport type HeaderRenderer = (column: ColumnConfig, headerProps: RendererHeaderProps) => ReactNode;\nexport type FooterRenderer = (column: ColumnConfig, footerProps: object) => ReactNode;\n\nexport type CellRenderer = (\n row: TableRow,\n cellProps: object,\n actions: TableActions,\n rowState: RowState,\n) => ReactNode;\n\ntype ParentRowState = RowState;\nexport type NestedCellRenderer = (\n nestedRow: NestedTableRow,\n cellProps: object,\n parentRowState: ParentRowState,\n) => ReactNode;\n\n/ Actions /\n\nexport type SetSelectedAction = (\n selected: boolean,\n rowId: RowId \| undefined,\n options?: { shiftKey?: boolean },\n) => void;\nexport type SetExpandedAction = (expanded: boolean, rowId: RowId \| undefined) => void;\n\nexport type TableActions = {\n setSelected: SetSelectedAction;\n setExpanded: SetExpandedAction;\n};\n\n/ Props /\n\nexport type BorderMode = 'full' \| 'vertical' \| 'none';\n\nexport type CustomState = {\n iconSlot: ReactElement;\n heading: string;\n subheading?: string;\n};\n\nexport type SelectionMode = 'single' \| 'multiple';\n\nexport type SelectionIntent = 'range' \| 'single' \| 'add' \| 'remove';\n\nexport type SelectionState = [RowId[], (rowIds: RowId[]) => void];\n\nexport type StripingMode = 'row' \| 'nested';\n\nexport interface DataTableProps {\n /* slot for the action bar above the table /\n actionBarSlot?: ReactNode;\n /* Type of border for the table /\n borderMode?: BorderMode;\n /* Columns for the table /\n columns: ColumnConfigs;\n /* Disable specific rows of the table /\n disabledRowIds?: Array<RowId>;\n /* Enable sticky header /\n enableStickyHeader?: boolean;\n /* Render a custom empty state for the table /\n emptyState?: CustomState;\n /* The rows that can be expanded to show more information /\n expandedRowIds?: Array<RowId>;\n /* Renders a loading indicator inside the table /\n loading?: boolean;\n /* Number of rows to display when loading /\n loadingRowCount?: number;\n /* OnChange handler for sorting functionality /\n onChangeSort?: SortChangeHandler;\n /* Rows of data to be displayed in the table /\n rows: TableRows;\n /* Decide how many rows can be selected /\n selectionMode?: SelectionMode;\n /* The current selected rows /\n selectionState?: SelectionState;\n /* Handler to expand specific row /\n setExpanded?: SetExpandedAction;\n /* State of each column's sorting /\n sortState?: SortState;\n /* Renders alternate row a slightly different colour /\n stripingMode?: StripingMode;\n /* Enable column resizing /\n resizeableColumns?: boolean;\n /* Callback for when columns are resized */\n onResizeColumns?: (columnWidths: ResizeColumnData) => void;\n columnWidths?: ColumnWidthsType;\n\n stickyHeaderTop?: number;\n}\n\nexport type ColumnWidthsType = {\n [key: ColumnId]: ColumnWidthType;\n};\n\nexport type ColumnWidthType = ColumnWidthFixed \| ColumnWidthBounded \| undefined;\n\nexport type ResizeColumnData = ColumnWidthsType;\n"],"names":[],"mappings":"AAgDA;IAEY;AAAZ,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,WAAA,CAAA,GAAA,WAAuB;AACvB,IAAA,aAAA,CAAA,YAAA,CAAA,GAAA,YAAyB;AAC3B,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA;;;;"}

package/dist/components/DataTable/utils/generateTableCss.cjs CHANGED Viewed

@@ -4,7 +4,7 @@ var index = require('../../../theme/index.cjs');
 var parseWidth = require('./parseWidth.cjs');
 var sumAll = require('./sumAll.cjs');
-function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, }) {
+function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
     const pinnedLeftStyles = pinnedLeft.map((_, index) => `
     th:nth-child(${index + 1}),
     td:nth-child(${index + 1}) {
@@ -20,7 +20,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       right: ${cellWidths ? sumAll.sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
     }
   `);
-    const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';
+    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
     const leftShadow = `
     th:nth-child(${pinnedLeft.length})::after,
     td:nth-child(${pinnedLeft.length})::after {
@@ -36,7 +36,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
     }
   `;
-    const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';
+    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
     const rightShadow = `
     th:nth-last-child(${pinnedRight.length})::after,
     td:nth-last-child(${pinnedRight.length})::after {
@@ -74,7 +74,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
     grid-template-columns: ${columns.map((column) => { var _a; return parseWidth.parseWidth((_a = columnWidths[column.id]) !== null && _a !== undefined ? _a : column.width); }).join(' ')};
     th::after, td::after {
-      transition: box-shadow .3s;
+      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
     }
     ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}

package/dist/components/DataTable/utils/generateTableCss.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, ~~ScrollPosition,~~ StripingMode } from '../types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow .3s;\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":";;;;;;~~SAgBgB~~,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,~~GACc~~,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAGA,wBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAGC,uBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;~~IAED~~,MAAM,mBAAmB,~~GAAG~~,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;~~AACnF~~,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;~~IAED~~,MAAM,oBAAoB,~~GAAG~~,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;~~AAClF~~,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAAC,qBAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA~~;;;;;;MAM7G~~,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}
1	+ {"version":3,"file":"generateTableCss.cjs","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n enableTransition = true,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible =\n !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible =\n !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":["sumAllBeforeIndex","sumAllAfterIndex","theme","parseWidth"],"mappings":";;;;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAGA,wBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAGC,uBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAAC,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAAC,qBAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}

package/dist/components/DataTable/utils/generateTableCss.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import { ColumnConfigs, ColumnWidthsType, ScrollPosition, StripingMode } from '../types';
+import { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';
+import { ScrollPosition } from '../../../hooks/useScrollPosition/types';
 export type GenerateTableCssArgs = {
     pinnedLeft: ColumnConfigs;
     pinnedRight: ColumnConfigs;
@@ -7,5 +8,6 @@ export type GenerateTableCssArgs = {
     stripingMode?: StripingMode;
     columnWidths: ColumnWidthsType;
     columns: ColumnConfigs;
+    enableTransition?: boolean;
 };
-export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, }: GenerateTableCssArgs): string;
+export declare function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition, }: GenerateTableCssArgs): string;

package/dist/components/DataTable/utils/generateTableCss.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { theme } from '../../../theme/index.js';
 import { parseWidth } from './parseWidth.js';
 import { sumAllBeforeIndex, sumAllAfterIndex } from './sumAll.js';
-function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, }) {
+function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition, stripingMode, columnWidths, columns, enableTransition = true, }) {
     const pinnedLeftStyles = pinnedLeft.map((_, index) => `
     th:nth-child(${index + 1}),
     td:nth-child(${index + 1}) {
@@ -18,7 +18,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;
     }
   `);
-    const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';
+    const isLeftShadowVisible = !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';
     const leftShadow = `
     th:nth-child(${pinnedLeft.length})::after,
     td:nth-child(${pinnedLeft.length})::after {
@@ -34,7 +34,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
       box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};
     }
   `;
-    const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';
+    const isRightShadowVisible = !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';
     const rightShadow = `
     th:nth-last-child(${pinnedRight.length})::after,
     td:nth-last-child(${pinnedRight.length})::after {
@@ -72,7 +72,7 @@ function generateTableCss({ pinnedLeft, pinnedRight, cellWidths, scrollPosition,
     grid-template-columns: ${columns.map((column) => { var _a; return parseWidth((_a = columnWidths[column.id]) !== null && _a !== undefined ? _a : column.width); }).join(' ')};
     th::after, td::after {
-      transition: box-shadow .3s;
+      transition: box-shadow ${enableTransition ? '.3s' : '0s'};
     }
     ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}

package/dist/components/DataTable/utils/generateTableCss.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, ~~ScrollPosition,~~ StripingMode } from '../types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible = scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible = scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow .3s;\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":[],"mappings":";;;;~~SAgBgB~~,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,~~GACc~~,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;~~IAED~~,MAAM,mBAAmB,~~GAAG~~,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;~~AACnF~~,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;~~IAED~~,MAAM,oBAAoB,~~GAAG~~,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;~~AAClF~~,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA~~;;;;;;MAM7G~~,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}
1	+ {"version":3,"file":"generateTableCss.js","sources":["../../../../src/components/DataTable/utils/generateTableCss.ts"],"sourcesContent":["import { theme } from '../../../theme';\nimport { parseWidth } from './parseWidth';\nimport { sumAllAfterIndex, sumAllBeforeIndex } from './sumAll';\n\nimport { ColumnConfigs, ColumnWidthsType, StripingMode } from '../types';\nimport { ScrollPosition } from '../../../hooks/useScrollPosition/types';\n\nexport type GenerateTableCssArgs = {\n pinnedLeft: ColumnConfigs;\n pinnedRight: ColumnConfigs;\n cellWidths: Array<number>;\n scrollPosition: ScrollPosition;\n stripingMode?: StripingMode;\n columnWidths: ColumnWidthsType;\n columns: ColumnConfigs;\n enableTransition?: boolean;\n};\n\nexport function generateTableCss({\n pinnedLeft,\n pinnedRight,\n cellWidths,\n scrollPosition,\n stripingMode,\n columnWidths,\n columns,\n enableTransition = true,\n}: GenerateTableCssArgs) {\n const pinnedLeftStyles = pinnedLeft.map(\n (_: any, index: number) => `\n th:nth-child(${index + 1}),\n td:nth-child(${index + 1}) {\n position: sticky;\n left: ${cellWidths ? sumAllBeforeIndex(cellWidths, index + 1) : 0}px;\n z-index: 2;\n }\n `,\n );\n\n const pinnedRightStyles = pinnedRight.map(\n (_: any, index: number) => `\n th:nth-last-child(${index + 1}),\n td:nth-last-child(${index + 1}) {\n position: sticky;\n right: ${cellWidths ? sumAllAfterIndex(cellWidths, cellWidths.length - index) : 0}px;\n }\n `,\n );\n\n const isLeftShadowVisible =\n !!scrollPosition && scrollPosition !== 'start' && scrollPosition !== 'none';\n const leftShadow = `\n th:nth-child(${pinnedLeft.length})::after,\n td:nth-child(${pinnedLeft.length})::after {\n position: absolute;\n transform: translate(100%);\n top: 0;\n right: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isLeftShadowVisible ? 'inset 10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const isRightShadowVisible =\n !!scrollPosition && scrollPosition !== 'end' && scrollPosition !== 'none';\n const rightShadow = `\n th:nth-last-child(${pinnedRight.length})::after,\n td:nth-last-child(${pinnedRight.length})::after {\n position: absolute;\n transform: translate(-100%);\n top: 0;\n left: 0;\n bottom: -1px;\n width: 30px;\n content: \"\";\n pointer-events: none;\n box-sizing: border-box;\n box-shadow: ${isRightShadowVisible ? 'inset -10px 0 10px -8px rgb(0 0 0 / 25%)' : 'none'};\n }\n `;\n\n const stripingRow = `\n tr:nth-child(odd) > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tr + tr > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n const stripingNested = `\n tbody:nth-of-type(odd) > tr > td {\n background-color: ${theme.colors.neutral.grey.lightest};\n }\n\n tbody + tbody > tr:first-child > td {\n border-top: 1px solid ${theme.colors.neutral.grey.base};\n }\n `;\n\n return `\n grid-template-columns: ${columns.map((column) => parseWidth(columnWidths[column.id] ?? column.width)).join(' ')};\n\n th::after, td::after {\n transition: box-shadow ${enableTransition ? '.3s' : '0s'};\n }\n\n ${pinnedLeft.length > 0 ? pinnedLeftStyles : ''}\n ${pinnedRight.length > 0 ? pinnedRightStyles : ''}\n\n ${leftShadow}\n ${rightShadow}\n\n ${stripingMode === 'nested' ? stripingNested : stripingRow}\n `;\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,gBAAgB,CAAC,EAC/B,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,gBAAgB,GAAG,IAAI,GACF,EAAA;AACrB,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,GAAG,CACrC,CAAC,CAAM,EAAE,KAAa,KAAK;AACZ,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,iBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAEd,YAAA,EAAA,UAAU,GAAG,iBAAiB,CAAC,UAAU,EAAE,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;AAGpE,EAAA,CAAA,CACA;AAED,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,CACvC,CAAC,CAAM,EAAE,KAAa,KAAK;AACP,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;AACT,sBAAA,EAAA,KAAK,GAAG,CAAC,CAAA;;AAElB,aAAA,EAAA,UAAU,GAAG,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;;AAEpF,EAAA,CAAA,CACA;AAED,IAAA,MAAM,mBAAmB,GACvB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM;AAC7E,IAAA,MAAM,UAAU,GAAG;AACF,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;AACjB,iBAAA,EAAA,UAAU,CAAC,MAAM,CAAA;;;;;;;;;;AAUhB,kBAAA,EAAA,mBAAmB,GAAG,yCAAyC,GAAG,MAAM,CAAA;;GAEzF;AAED,IAAA,MAAM,oBAAoB,GACxB,CAAC,CAAC,cAAc,IAAI,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM;AAC3E,IAAA,MAAM,WAAW,GAAG;AACE,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;AAClB,sBAAA,EAAA,WAAW,CAAC,MAAM,CAAA;;;;;;;;;;AAUtB,kBAAA,EAAA,oBAAoB,GAAG,0CAA0C,GAAG,MAAM,CAAA;;GAE3F;AAED,IAAA,MAAM,WAAW,GAAG;;AAEI,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;AAED,IAAA,MAAM,cAAc,GAAG;;AAEC,wBAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAA;;;;AAI9B,4BAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAA;;GAEzD;IAED,OAAO;AACoB,2BAAA,EAAA,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,KAAI,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,UAAU,CAAC,CAAA,EAAA,GAAA,YAAY,CAAC,MAAM,CAAC,EAAE,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,MAAM,CAAC,KAAK,CAAC,CAAA,EAAA,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;;;AAGpF,6BAAA,EAAA,gBAAgB,GAAG,KAAK,GAAG,IAAI,CAAA;;;MAGxD,UAAU,CAAC,MAAM,GAAG,CAAC,GAAG,gBAAgB,GAAG,EAAE;MAC7C,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,iBAAiB,GAAG,EAAE;;MAE/C,UAAU;MACV,WAAW;;MAEX,YAAY,KAAK,QAAQ,GAAG,cAAc,GAAG,WAAW;GAC3D;AACH;;;;"}

package/dist/hooks/useScrollPosition/types.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-export type ScrollPosition = 'none' | 'start' | 'middle' | 'end';
+export type ScrollPosition = 'none' | 'start' | 'middle' | 'end' | undefined;
 export type GetScrollPositionProps = {
     container: HTMLElement;
 };

package/dist/hooks/useScrollPosition/useScrollPosition.cjs CHANGED Viewed

@@ -14,26 +14,40 @@ var throttle__default = /*#__PURE__*/_interopDefaultCompat(throttle);
  * Hook to track the horizontal scroll position of a scrollable container.
  */
 const useScrollPosition = ({ containerRef }) => {
-    const [scrollPosition, setScrollPosition] = React.useState('none');
+    const [scrollPosition, setScrollPosition] = React.useState(undefined);
+    const [enableTransition, setEnableTransition] = React.useState(false);
+    const prevScrollPositionRef = React.useRef(undefined);
     const updatePosition = React.useCallback((container) => {
         if (!container)
             return;
         setScrollPosition(utils.getScrollPosition({ container }));
     }, []);
     const throttledUpdate = React.useMemo(() => throttle__default.default(updatePosition, constants.THROTTLE_MS), [updatePosition]);
-    const onScroll = React.useCallback((e) => {
-        throttledUpdate(e.currentTarget);
-    }, [throttledUpdate]);
+    const onScroll = (e) => throttledUpdate(e.currentTarget);
+    // Clean up throttled function on unmount
     React.useEffect(() => {
         return () => throttledUpdate.cancel();
     }, [throttledUpdate]);
+    // Calculate initial scroll position synchronously before paint
+    React.useLayoutEffect(() => {
+        var _a;
+        updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null);
+    }, [containerRef, updatePosition]);
+    // Enable transitions only after a real scroll change (not the initial calculation)
+    React.useEffect(() => {
+        const hasPositionChanged = prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;
+        if (hasPositionChanged) {
+            setEnableTransition(true);
+        }
+        prevScrollPositionRef.current = scrollPosition;
+    }, [scrollPosition]);
     // Recalculate scroll position when the container size changes
     useResizeObserver.useResizeObserver({
         targetRef: containerRef,
         resizeHandler: () => { var _a; return updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null); },
         throttleMs: constants.THROTTLE_MS,
     });
-    return { scrollPosition, onScroll };
+    return { scrollPosition, onScroll, enableTransition };
 };
 exports.useScrollPosition = useScrollPosition;

package/dist/hooks/useScrollPosition/useScrollPosition.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollPosition.cjs","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import { useMemo, useCallback~~, useState, useEffect, UIEvent,~~ RefObject } from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(~~'none'~~);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = ~~useCallback~~(~~\n (~~e: UIEvent<HTMLElement>) => ~~{\n~~ throttledUpdate(e.currentTarget);\n }~~,\n~~ [throttledUpdate]~~,\n~~ );\n\n ~~useEffect~~(() => {\n ~~return~~ () => ~~throttledUpdate~~.~~cancel~~();\n }, [~~throttledUpdate~~]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll };\n};\n"],"names":["useState","useCallback","getScrollPosition","useMemo","throttle","THROTTLE_MS","useEffect","useResizeObserver"],"mappings":";;;;;;;;;;;;~~AAOA~~;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAiB,MAAM,CAAC;~~AAE5E~~,IAAA,MAAM,cAAc,GAAGC,iBAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAACC,uBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAMC,yBAAQ,CAAC,cAAc,EAAEC,qBAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,~~GAAGJ~~,~~iBAAW~~,~~CAC1B~~,CAAC,~~CAAuB~~,~~KAAI~~;~~AAC1B~~,QAAA,eAAe,CAAC,CAAC,CAAC,~~aAAa~~,CAAC;~~AAClC~~,KAAC,~~EACD~~,CAAC,~~eAAe~~,CAAC,~~CAClB;IAEDK~~,eAAS,CAAC,MAAK;~~AACb~~,~~QAAA~~,OAAO,~~MAAM~~,~~eAAe~~,CAAC,~~MAAM~~,EAAE;~~AACvC~~,KAAC,EAAE,CAAC,~~eAAe~~,CAAC,CAAC;;~~AAGrB~~,~~IAAAC~~,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,~~EAAEF~~,qBAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE;~~AACrC~~;;;;"}
1	+ {"version":3,"file":"useScrollPosition.cjs","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import {\n useState,\n useLayoutEffect,\n useEffect,\n useRef,\n useMemo,\n useCallback,\n RefObject,\n} from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(undefined);\n const [enableTransition, setEnableTransition] = useState(false);\n const prevScrollPositionRef = useRef<ScrollPosition>(undefined);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = (e: React.UIEvent<HTMLElement>) => throttledUpdate(e.currentTarget);\n\n // Clean up throttled function on unmount\n useEffect(() => {\n return () => throttledUpdate.cancel();\n }, [throttledUpdate]);\n\n // Calculate initial scroll position synchronously before paint\n useLayoutEffect(() => {\n updatePosition(containerRef?.current ?? null);\n }, [containerRef, updatePosition]);\n\n // Enable transitions only after a real scroll change (not the initial calculation)\n useEffect(() => {\n const hasPositionChanged =\n prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;\n\n if (hasPositionChanged) {\n setEnableTransition(true);\n }\n prevScrollPositionRef.current = scrollPosition;\n }, [scrollPosition]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll, enableTransition };\n};\n"],"names":["useState","useRef","useCallback","getScrollPosition","useMemo","throttle","THROTTLE_MS","useEffect","useLayoutEffect","useResizeObserver"],"mappings":";;;;;;;;;;;;AAeA;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAGA,cAAQ,CAAiB,SAAS,CAAC;IAC/E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AAC/D,IAAA,MAAM,qBAAqB,GAAGC,YAAM,CAAiB,SAAS,CAAC;AAE/D,IAAA,MAAM,cAAc,GAAGC,iBAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAACC,uBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAMC,yBAAQ,CAAC,cAAc,EAAEC,qBAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,GAAG,CAAC,CAA6B,KAAK,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;;IAGpFC,eAAS,CAAC,MAAK;AACb,QAAA,OAAO,MAAM,eAAe,CAAC,MAAM,EAAE;AACvC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC;;IAGrBC,qBAAe,CAAC,MAAK;;AACnB,QAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,IAAI,CAAC;AAC/C,KAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;;IAGlCD,eAAS,CAAC,MAAK;QACb,MAAM,kBAAkB,GACtB,qBAAqB,CAAC,OAAO,IAAI,cAAc,KAAK,qBAAqB,CAAC,OAAO;AAEnF,QAAA,IAAI,kBAAkB,EAAE;YACtB,mBAAmB,CAAC,IAAI,CAAC;AAC1B;AACD,QAAA,qBAAqB,CAAC,OAAO,GAAG,cAAc;AAChD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;;AAGpB,IAAAE,mCAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,EAAEH,qBAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE;AACvD;;;;"}

package/dist/hooks/useScrollPosition/useScrollPosition.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
-import { UIEvent } from 'react';
 import { ScrollPosition, UseScrollPositionProps } from './types';
 /**
  * Hook to track the horizontal scroll position of a scrollable container.
  */
 export declare const useScrollPosition: ({ containerRef }: UseScrollPositionProps) => {
     scrollPosition: ScrollPosition;
-    onScroll: (e: UIEvent<HTMLElement>) => void;
+    onScroll: (e: React.UIEvent<HTMLElement>) => void | undefined;
+    enableTransition: boolean;
 };

package/dist/hooks/useScrollPosition/useScrollPosition.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useRef, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 import throttle from 'lodash.throttle';
 import { useResizeObserver } from '../useResizeObserver.js';
 import { THROTTLE_MS } from './constants.js';
@@ -8,26 +8,40 @@ import { getScrollPosition } from './utils.js';
  * Hook to track the horizontal scroll position of a scrollable container.
  */
 const useScrollPosition = ({ containerRef }) => {
-    const [scrollPosition, setScrollPosition] = useState('none');
+    const [scrollPosition, setScrollPosition] = useState(undefined);
+    const [enableTransition, setEnableTransition] = useState(false);
+    const prevScrollPositionRef = useRef(undefined);
     const updatePosition = useCallback((container) => {
         if (!container)
             return;
         setScrollPosition(getScrollPosition({ container }));
     }, []);
     const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);
-    const onScroll = useCallback((e) => {
-        throttledUpdate(e.currentTarget);
-    }, [throttledUpdate]);
+    const onScroll = (e) => throttledUpdate(e.currentTarget);
+    // Clean up throttled function on unmount
     useEffect(() => {
         return () => throttledUpdate.cancel();
     }, [throttledUpdate]);
+    // Calculate initial scroll position synchronously before paint
+    useLayoutEffect(() => {
+        var _a;
+        updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null);
+    }, [containerRef, updatePosition]);
+    // Enable transitions only after a real scroll change (not the initial calculation)
+    useEffect(() => {
+        const hasPositionChanged = prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;
+        if (hasPositionChanged) {
+            setEnableTransition(true);
+        }
+        prevScrollPositionRef.current = scrollPosition;
+    }, [scrollPosition]);
     // Recalculate scroll position when the container size changes
     useResizeObserver({
         targetRef: containerRef,
         resizeHandler: () => { var _a; return updatePosition((_a = containerRef === null || containerRef === undefined ? undefined : containerRef.current) !== null && _a !== undefined ? _a : null); },
         throttleMs: THROTTLE_MS,
     });
-    return { scrollPosition, onScroll };
+    return { scrollPosition, onScroll, enableTransition };
 };
 export { useScrollPosition };

package/dist/hooks/useScrollPosition/useScrollPosition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useScrollPosition.js","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import { useMemo, useCallback~~, useState, useEffect, UIEvent,~~ RefObject } from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(~~'none'~~);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = ~~useCallback~~(~~\n (~~e: UIEvent<HTMLElement>) => ~~{\n~~ throttledUpdate(e.currentTarget);\n }~~,\n~~ [throttledUpdate]~~,\n~~ );\n\n ~~useEffect~~(() => {\n ~~return~~ () => ~~throttledUpdate~~.~~cancel~~();\n }, [~~throttledUpdate~~]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll };\n};\n"],"names":[],"mappings":";;;;;;~~AAOA~~;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,MAAM,CAAC;~~AAE5E~~,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAAC,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,GAAG,~~WAAW~~,~~CAC1B~~,CAAC,~~CAAuB~~,~~KAAI~~;~~AAC1B~~,QAAA,eAAe,CAAC,CAAC,CAAC,~~aAAa~~,CAAC;~~AAClC~~,KAAC,~~EACD~~,CAAC,~~eAAe~~,CAAC,~~CAClB;IAED~~,SAAS,CAAC,MAAK;~~AACb~~,~~QAAA~~,OAAO,~~MAAM~~,~~eAAe~~,CAAC,~~MAAM~~,EAAE;~~AACvC~~,KAAC,EAAE,CAAC,~~eAAe~~,CAAC,CAAC;;~~AAGrB~~,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE;~~AACrC~~;;;;"}
1	+ {"version":3,"file":"useScrollPosition.js","sources":["../../../src/hooks/useScrollPosition/useScrollPosition.ts"],"sourcesContent":["import {\n useState,\n useLayoutEffect,\n useEffect,\n useRef,\n useMemo,\n useCallback,\n RefObject,\n} from 'react';\nimport throttle from 'lodash.throttle';\nimport { useResizeObserver } from '../useResizeObserver';\nimport { THROTTLE_MS } from './constants';\nimport { ScrollPosition, UseScrollPositionProps } from './types';\nimport { getScrollPosition } from './utils';\n\n/*\n Hook to track the horizontal scroll position of a scrollable container.\n */\nexport const useScrollPosition = ({ containerRef }: UseScrollPositionProps) => {\n const [scrollPosition, setScrollPosition] = useState<ScrollPosition>(undefined);\n const [enableTransition, setEnableTransition] = useState(false);\n const prevScrollPositionRef = useRef<ScrollPosition>(undefined);\n\n const updatePosition = useCallback((container: HTMLElement \| null) => {\n if (!container) return;\n setScrollPosition(getScrollPosition({ container }));\n }, []);\n\n const throttledUpdate = useMemo(() => throttle(updatePosition, THROTTLE_MS), [updatePosition]);\n\n const onScroll = (e: React.UIEvent<HTMLElement>) => throttledUpdate(e.currentTarget);\n\n // Clean up throttled function on unmount\n useEffect(() => {\n return () => throttledUpdate.cancel();\n }, [throttledUpdate]);\n\n // Calculate initial scroll position synchronously before paint\n useLayoutEffect(() => {\n updatePosition(containerRef?.current ?? null);\n }, [containerRef, updatePosition]);\n\n // Enable transitions only after a real scroll change (not the initial calculation)\n useEffect(() => {\n const hasPositionChanged =\n prevScrollPositionRef.current && scrollPosition !== prevScrollPositionRef.current;\n\n if (hasPositionChanged) {\n setEnableTransition(true);\n }\n prevScrollPositionRef.current = scrollPosition;\n }, [scrollPosition]);\n\n // Recalculate scroll position when the container size changes\n useResizeObserver({\n targetRef: containerRef as RefObject<HTMLElement \| null>,\n resizeHandler: () => updatePosition(containerRef?.current ?? null),\n throttleMs: THROTTLE_MS,\n });\n\n return { scrollPosition, onScroll, enableTransition };\n};\n"],"names":[],"mappings":";;;;;;AAeA;;AAEG;MACU,iBAAiB,GAAG,CAAC,EAAE,YAAY,EAA0B,KAAI;IAC5E,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAiB,SAAS,CAAC;IAC/E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC/D,IAAA,MAAM,qBAAqB,GAAG,MAAM,CAAiB,SAAS,CAAC;AAE/D,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,SAA6B,KAAI;AACnE,QAAA,IAAI,CAAC,SAAS;YAAE;QAChB,iBAAiB,CAAC,iBAAiB,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;KACpD,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,QAAQ,CAAC,cAAc,EAAE,WAAW,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC;AAE9F,IAAA,MAAM,QAAQ,GAAG,CAAC,CAA6B,KAAK,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;;IAGpF,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,MAAM,eAAe,CAAC,MAAM,EAAE;AACvC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC;;IAGrB,eAAe,CAAC,MAAK;;AACnB,QAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,EAAA,GAAI,IAAI,CAAC;AAC/C,KAAC,EAAE,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;;IAGlC,SAAS,CAAC,MAAK;QACb,MAAM,kBAAkB,GACtB,qBAAqB,CAAC,OAAO,IAAI,cAAc,KAAK,qBAAqB,CAAC,OAAO;AAEnF,QAAA,IAAI,kBAAkB,EAAE;YACtB,mBAAmB,CAAC,IAAI,CAAC;AAC1B;AACD,QAAA,qBAAqB,CAAC,OAAO,GAAG,cAAc;AAChD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;;AAGpB,IAAA,iBAAiB,CAAC;AAChB,QAAA,SAAS,EAAE,YAA6C;AACxD,QAAA,aAAa,EAAE,gBAAM,OAAA,cAAc,CAAC,CAAA,EAAA,GAAA,YAAY,aAAZ,YAAY,KAAA,SAAA,GAAA,SAAA,GAAZ,YAAY,CAAE,OAAO,sCAAI,IAAI,CAAC,CAAA,EAAA;AAClE,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA,CAAC;AAEF,IAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,gBAAgB,EAAE;AACvD;;;;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "13.15.1",
+  "version": "13.15.2",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "ISC",