npm - @semcore/data-table - Versions diffs - 3.1.15 → 3.3.0 - Mend

@semcore/data-table 3.1.15 → 3.3.0

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 (16) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,7 +2,18 @@
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
-## [3.1.15] - 2022-10-06
+## [3.3.0] - 2022-10-10
+### Changed
+- Added support for React 18 🔥
+- Extended version range for dependency `@semcore/icons`.
+## [3.2.0] - 2022-10-07
+### Added
+- Added support `ref` for `DataTable.Column` and `DataTable.Cell`.
 ### Changed

package/lib/cjs/Body.js CHANGED Viewed

@@ -71,14 +71,14 @@ var scrollStyles = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SShadowHorizontal_qyxht_gg_:before {\n  left: var(--left_qyxht) !important;\n}\n.___SShadowHorizontal_qyxht_gg_:after {\n  right: var(--right_qyxht) !important;\n}\n"
+".___SShadowHorizontal_2bakh_gg_:before {\n  left: var(--left_2bakh) !important;\n}\n.___SShadowHorizontal_2bakh_gg_:after {\n  right: var(--right_2bakh) !important;\n}\n"
 /*__inner_css_end__*/
-, "qyxht_gg_")
+, "2bakh_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SShadowHorizontal": "___SShadowHorizontal_qyxht_gg_",
-  "--left": "--left_qyxht",
-  "--right": "--right_qyxht"
+  "__SShadowHorizontal": "___SShadowHorizontal_2bakh_gg_",
+  "--left": "--left_2bakh",
+  "--right": "--right_2bakh"
 });
 var testEnv = process.env.NODE_ENV === 'test';

package/lib/cjs/DataTable.js CHANGED Viewed

@@ -69,46 +69,46 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SDataTable_mwxpl_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_mwxpl_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_mwxpl_gg_.__sticky_mwxpl_gg_ {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.___SHead_mwxpl_gg_ {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  z-index: 0;\n}\n\n.___SColumn_mwxpl_gg_ {\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  font-size: 12px;\n  color: #191b23;\n  box-sizing: border-box;\n  position: relative\n}\n\n.___SColumn_mwxpl_gg_:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  }\n\n.___SColumn_mwxpl_gg_.__hidden_mwxpl_gg_ {\n  height: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  border: none !important;\n}\n\n.___SColumn_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  padding: 12px;\n  border-right: 1px solid #e0e1e9;\n  border-bottom: 1px solid #e0e1e9;\n  background-color: #f4f5f9;\n}\n\n.___SColumn_mwxpl_gg_._use_secondary_mwxpl_gg_ {\n  padding: 8px;\n  border-bottom: 1px solid #a9abb6;\n  background-color: #ffffff;\n}\n\n.___SColumn_mwxpl_gg_.__use_mwxpl_gg_:last-child {\n  border-right: none;\n}\n\n.___SColumn_mwxpl_gg_.__group_mwxpl_gg_.__use_mwxpl_gg_ {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  align-items: normal;\n  border-bottom: none;\n  padding: 0;\n}\n\n.___SColumn_mwxpl_gg_.__groupHead_mwxpl_gg_.__use_mwxpl_gg_ {\n  justify-content: center;\n  border-right: none;\n  /* for resizable */\n  z-index: 1;\n}\n\n.___SColumn_mwxpl_gg_.__groupHead_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_mwxpl_gg_.__groupHead_mwxpl_gg_._use_secondary_mwxpl_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_mwxpl_gg_.__sortable_mwxpl_gg_ {\n  cursor: pointer\n}\n\n.___SColumn_mwxpl_gg_.__sortable_mwxpl_gg_._use_primary_mwxpl_gg_:hover {\n    background-color: #e0e1e9;\n  }\n\n.___SColumn_mwxpl_gg_.__active_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  background-color: #e0e1e9;\n}\n\n.___SColumn_mwxpl_gg_.__resizable_mwxpl_gg_:hover:after {\n    background: #e0e1e9;\n  }\n\n.___SColumn_mwxpl_gg_.__resizable_mwxpl_gg_:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    right: -1px;\n    height: 100vh;\n    width: 1px;\n    background: transparent;\n    cursor: col-resize;\n  }\n\n.___SColumn_mwxpl_gg_.__fixed_mwxpl_gg_ {\n  position: sticky;\n  /* because up resizable */\n  z-index: 2;\n}\n\n.___SSortIcon_mwxpl_gg_ {\n  fill: #a9abb6;\n  margin-left: 6px;\n}\n\n.___SSortIcon_mwxpl_gg_.__active_mwxpl_gg_ {\n  fill: #8a8e9b;\n}\n\n.___SBodyWrapper_mwxpl_gg_ {\n  position: relative;\n}\n\n.___SBody_mwxpl_gg_ {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.___SRow_mwxpl_gg_ {\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n/* DEFAULT THEME */\n\n.___SRow_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: rgb(240, 240, 244);\n}\n\n/* MUTED THEME */\n\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #f2f3f4;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_muted_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #f6f7f7;\n}\n\n/* INFO THEME */\n\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #e9f7ff;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_info_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #c4e5fe;\n}\n\n/* SUCCESS THEME */\n\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #dbfee8;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_success_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #9ef2c9;\n}\n\n/* WARNING THEME */\n\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #fff3d9;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_warning_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #ffdca2;\n}\n\n/* DANGER THEME */\n\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #fff0f7;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_danger_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #ffd7df;\n}\n\n.___SRow_mwxpl_gg_.__positioned_mwxpl_gg_ {\n  position: absolute;\n}\n\n.___SCell_mwxpl_gg_ {\n  display: flex;\n  flex: 1;\n  flex-basis: auto;\n  font-size: 14px;\n  line-height: 1.42;\n  color: #191b23;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e0e1e9;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.___SCell_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  padding: 12px;\n  min-height: 45px;\n  background-color: #ffffff;\n}\n\n.___SCell_mwxpl_gg_._use_secondary_mwxpl_gg_ {\n  padding: 8px;\n  min-height: 37px;\n  background-color: #ffffff;\n}\n\n.___SCell_mwxpl_gg_.__fixed_mwxpl_gg_ {\n  position: sticky;\n  z-index: 1;\n}\n\n.___SCell_mwxpl_gg_._theme_muted_mwxpl_gg_ {\n  background-color: #f2f3f4;\n}\n\n.___SCell_mwxpl_gg_._theme_info_mwxpl_gg_ {\n  background-color: #e9f7ff;\n}\n\n.___SCell_mwxpl_gg_._theme_success_mwxpl_gg_ {\n  background-color: #dbfee8;\n}\n\n.___SCell_mwxpl_gg_._theme_warning_mwxpl_gg_ {\n  background-color: #fff3d9;\n}\n\n.___SCell_mwxpl_gg_._theme_danger_mwxpl_gg_ {\n  background-color: #fff0f7;\n}\n\n.___SScrollAreaBar_mwxpl_gg_._orientation_horizontal_mwxpl_gg_ {\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  margin-top: -12px;\n  z-index: 2;\n}\n\n.___SScrollAreaBar_mwxpl_gg_._orientation_vertical_mwxpl_gg_ {\n  width: 12px;\n}\n\n.___SScrollAreaBar_mwxpl_gg_._orientation_horizontal_mwxpl_gg_ {\n  margin-left: calc(var(--left_mwxpl) + 4px);\n  margin-right: calc(var(--right_mwxpl) + 4px);\n  width: calc(100% - var(--offsetSum_mwxpl) - 8px);\n}\n\n.___SHeightHold_mwxpl_gg_ {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  pointer-events: none;\n  /* should be under other layers */\n  z-index: -1;\n}\n"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SDataTable_twkoc_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_twkoc_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_twkoc_gg_.__sticky_twkoc_gg_ {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.___SHead_twkoc_gg_ {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  z-index: 0;\n}\n\n.___SColumn_twkoc_gg_ {\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  font-size: 12px;\n  color: #191b23;\n  box-sizing: border-box;\n  position: relative\n}\n\n.___SColumn_twkoc_gg_:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  }\n\n.___SColumn_twkoc_gg_.__hidden_twkoc_gg_ {\n  height: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  border: none !important;\n}\n\n.___SColumn_twkoc_gg_._use_primary_twkoc_gg_ {\n  padding: 12px;\n  border-right: 1px solid #e0e1e9;\n  border-bottom: 1px solid #e0e1e9;\n  background-color: #f4f5f9;\n}\n\n.___SColumn_twkoc_gg_._use_secondary_twkoc_gg_ {\n  padding: 8px;\n  border-bottom: 1px solid #a9abb6;\n  background-color: #ffffff;\n}\n\n.___SColumn_twkoc_gg_.__use_twkoc_gg_:last-child {\n  border-right: none;\n}\n\n.___SColumn_twkoc_gg_.__group_twkoc_gg_.__use_twkoc_gg_ {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  align-items: normal;\n  border-bottom: none;\n  padding: 0;\n}\n\n.___SColumn_twkoc_gg_.__groupHead_twkoc_gg_.__use_twkoc_gg_ {\n  justify-content: center;\n  border-right: none;\n  /* for resizable */\n  z-index: 1;\n}\n\n.___SColumn_twkoc_gg_.__groupHead_twkoc_gg_._use_primary_twkoc_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_twkoc_gg_.__groupHead_twkoc_gg_._use_secondary_twkoc_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_twkoc_gg_.__sortable_twkoc_gg_ {\n  cursor: pointer\n}\n\n.___SColumn_twkoc_gg_.__sortable_twkoc_gg_._use_primary_twkoc_gg_:hover {\n    background-color: #e0e1e9;\n  }\n\n.___SColumn_twkoc_gg_.__active_twkoc_gg_._use_primary_twkoc_gg_ {\n  background-color: #e0e1e9;\n}\n\n.___SColumn_twkoc_gg_.__resizable_twkoc_gg_:hover:after {\n    background: #e0e1e9;\n  }\n\n.___SColumn_twkoc_gg_.__resizable_twkoc_gg_:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    right: -1px;\n    height: 100vh;\n    width: 1px;\n    background: transparent;\n    cursor: col-resize;\n  }\n\n.___SColumn_twkoc_gg_.__fixed_twkoc_gg_ {\n  position: sticky;\n  /* because up resizable */\n  z-index: 2;\n}\n\n.___SSortIcon_twkoc_gg_ {\n  fill: #a9abb6;\n  margin-left: 6px;\n}\n\n.___SSortIcon_twkoc_gg_.__active_twkoc_gg_ {\n  fill: #8a8e9b;\n}\n\n.___SBodyWrapper_twkoc_gg_ {\n  position: relative;\n}\n\n.___SBody_twkoc_gg_ {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.___SRow_twkoc_gg_ {\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n/* DEFAULT THEME */\n\n.___SRow_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: rgb(240, 240, 244);\n}\n\n/* MUTED THEME */\n\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #f2f3f4;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_muted_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #f6f7f7;\n}\n\n/* INFO THEME */\n\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #e9f7ff;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_info_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #c4e5fe;\n}\n\n/* SUCCESS THEME */\n\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #dbfee8;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_success_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #9ef2c9;\n}\n\n/* WARNING THEME */\n\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #fff3d9;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_warning_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #ffdca2;\n}\n\n/* DANGER THEME */\n\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #fff0f7;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_danger_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #ffd7df;\n}\n\n.___SRow_twkoc_gg_.__positioned_twkoc_gg_ {\n  position: absolute;\n}\n\n.___SCell_twkoc_gg_ {\n  display: flex;\n  flex: 1;\n  flex-basis: auto;\n  font-size: 14px;\n  line-height: 1.42;\n  color: #191b23;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e0e1e9;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.___SCell_twkoc_gg_._use_primary_twkoc_gg_ {\n  padding: 12px;\n  min-height: 45px;\n  background-color: #ffffff;\n}\n\n.___SCell_twkoc_gg_._use_secondary_twkoc_gg_ {\n  padding: 8px;\n  min-height: 37px;\n  background-color: #ffffff;\n}\n\n.___SCell_twkoc_gg_.__fixed_twkoc_gg_ {\n  position: sticky;\n  z-index: 1;\n}\n\n.___SCell_twkoc_gg_._theme_muted_twkoc_gg_ {\n  background-color: #f2f3f4;\n}\n\n.___SCell_twkoc_gg_._theme_info_twkoc_gg_ {\n  background-color: #e9f7ff;\n}\n\n.___SCell_twkoc_gg_._theme_success_twkoc_gg_ {\n  background-color: #dbfee8;\n}\n\n.___SCell_twkoc_gg_._theme_warning_twkoc_gg_ {\n  background-color: #fff3d9;\n}\n\n.___SCell_twkoc_gg_._theme_danger_twkoc_gg_ {\n  background-color: #fff0f7;\n}\n\n.___SScrollAreaBar_twkoc_gg_._orientation_horizontal_twkoc_gg_ {\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  margin-top: -12px;\n  z-index: 2;\n}\n\n.___SScrollAreaBar_twkoc_gg_._orientation_vertical_twkoc_gg_ {\n  width: 12px;\n}\n\n.___SScrollAreaBar_twkoc_gg_._orientation_horizontal_twkoc_gg_ {\n  margin-left: calc(var(--left_twkoc) + 4px);\n  margin-right: calc(var(--right_twkoc) + 4px);\n  width: calc(100% - var(--offsetSum_twkoc) - 8px);\n}\n\n.___SHeightHold_twkoc_gg_ {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  pointer-events: none;\n  /* should be under other layers */\n  z-index: -1;\n}\n"
 /*__inner_css_end__*/
-, "mwxpl_gg_")
+, "twkoc_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SDataTable": "___SDataTable_mwxpl_gg_",
-  "__SHeadWrapper": "___SHeadWrapper_mwxpl_gg_",
-  "_sticky": "__sticky_mwxpl_gg_",
-  "__SHead": "___SHead_mwxpl_gg_",
-  "__SColumn": "___SColumn_mwxpl_gg_",
-  "_hidden": "__hidden_mwxpl_gg_",
-  "_use_primary": "_use_primary_mwxpl_gg_",
-  "_use_secondary": "_use_secondary_mwxpl_gg_",
-  "_use": "__use_mwxpl_gg_",
-  "_group": "__group_mwxpl_gg_",
-  "_groupHead": "__groupHead_mwxpl_gg_",
-  "_sortable": "__sortable_mwxpl_gg_",
-  "_active": "__active_mwxpl_gg_",
-  "_resizable": "__resizable_mwxpl_gg_",
-  "_fixed": "__fixed_mwxpl_gg_",
-  "__SSortIcon": "___SSortIcon_mwxpl_gg_",
-  "__SBodyWrapper": "___SBodyWrapper_mwxpl_gg_",
-  "__SBody": "___SBody_mwxpl_gg_",
-  "__SRow": "___SRow_mwxpl_gg_",
-  "__SCell": "___SCell_mwxpl_gg_",
-  "_theme": "__theme_mwxpl_gg_",
-  "__SGroupCell": "___SGroupCell_mwxpl_gg_",
-  "_theme_muted": "_theme_muted_mwxpl_gg_",
-  "_theme_info": "_theme_info_mwxpl_gg_",
-  "_theme_success": "_theme_success_mwxpl_gg_",
-  "_theme_warning": "_theme_warning_mwxpl_gg_",
-  "_theme_danger": "_theme_danger_mwxpl_gg_",
-  "_positioned": "__positioned_mwxpl_gg_",
-  "__SScrollAreaBar": "___SScrollAreaBar_mwxpl_gg_",
-  "_orientation_horizontal": "_orientation_horizontal_mwxpl_gg_",
-  "_orientation_vertical": "_orientation_vertical_mwxpl_gg_",
-  "--left": "--left_mwxpl",
-  "--right": "--right_mwxpl",
-  "--offsetSum": "--offsetSum_mwxpl",
-  "__SHeightHold": "___SHeightHold_mwxpl_gg_"
+  "__SDataTable": "___SDataTable_twkoc_gg_",
+  "__SHeadWrapper": "___SHeadWrapper_twkoc_gg_",
+  "_sticky": "__sticky_twkoc_gg_",
+  "__SHead": "___SHead_twkoc_gg_",
+  "__SColumn": "___SColumn_twkoc_gg_",
+  "_hidden": "__hidden_twkoc_gg_",
+  "_use_primary": "_use_primary_twkoc_gg_",
+  "_use_secondary": "_use_secondary_twkoc_gg_",
+  "_use": "__use_twkoc_gg_",
+  "_group": "__group_twkoc_gg_",
+  "_groupHead": "__groupHead_twkoc_gg_",
+  "_sortable": "__sortable_twkoc_gg_",
+  "_active": "__active_twkoc_gg_",
+  "_resizable": "__resizable_twkoc_gg_",
+  "_fixed": "__fixed_twkoc_gg_",
+  "__SSortIcon": "___SSortIcon_twkoc_gg_",
+  "__SBodyWrapper": "___SBodyWrapper_twkoc_gg_",
+  "__SBody": "___SBody_twkoc_gg_",
+  "__SRow": "___SRow_twkoc_gg_",
+  "__SCell": "___SCell_twkoc_gg_",
+  "_theme": "__theme_twkoc_gg_",
+  "__SGroupCell": "___SGroupCell_twkoc_gg_",
+  "_theme_muted": "_theme_muted_twkoc_gg_",
+  "_theme_info": "_theme_info_twkoc_gg_",
+  "_theme_success": "_theme_success_twkoc_gg_",
+  "_theme_warning": "_theme_warning_twkoc_gg_",
+  "_theme_danger": "_theme_danger_twkoc_gg_",
+  "_positioned": "__positioned_twkoc_gg_",
+  "__SScrollAreaBar": "___SScrollAreaBar_twkoc_gg_",
+  "_orientation_horizontal": "_orientation_horizontal_twkoc_gg_",
+  "_orientation_vertical": "_orientation_vertical_twkoc_gg_",
+  "--left": "--left_twkoc",
+  "--right": "--right_twkoc",
+  "--offsetSum": "--offsetSum_twkoc",
+  "__SHeightHold": "___SHeightHold_twkoc_gg_"
 });
 var REVERSED_SORT_DIRECTION = {
   desc: 'asc',
@@ -261,11 +261,14 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
           sortable: sortable,
           sortDirection: sort[0] === name ? sort[1] : (column === null || column === void 0 ? void 0 : column.sortDirection) || (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),
           columns: columns,
-          props: _objectSpread({
-            name: name,
-            ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /*#__PURE__*/_react["default"].createRef(),
-            children: children
-          }, props)
+          props: _objectSpread(_objectSpread({
+            name: name
+          }, props), {}, {
+            // @ts-ignore
+            forwardRef: child.ref,
+            children: children,
+            ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /*#__PURE__*/_react["default"].createRef()
+          })
         });
       });

package/lib/cjs/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","names":["REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","RootDefinitionTable","props","React","createRef","event","column","columns","find","fire","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","syncScroll","scrollBodyRef","scrollHeadRef","Array","isArray","cssVar","style","setProperty","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","isGroup","childrenToColumns","flattenColumns","map","join","length","toArray","filter","push","ref","getBoundingClientRect","use","$onSortClick","callAllEventHandlers","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","uniqueKey","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","flatRowData","setVarStyle","SDataTable","Box","styles","sstyled","Component","ComponentDefinition","createComponent","Head","Body"],"sources":["../../src/DataTable.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, PropGetterFn, Root, sstyled } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n Column,\n NestedCells,\n PropsLayer,\n PseudoChildPropsGetter,\n RowData,\n SortDirection,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n desc: 'asc',\n asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n use: 'primary' \| 'secondary';\n sort: SortDirection[];\n data: RowData[];\n uniqueKey: string;\n};\n\ntype HeadAsProps = {\n children: React.ReactChild;\n};\ntype BodyAsProps = {\n children: React.ReactChild;\n};\n\n/* utils type /\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) \| React.ReactNode;\n};\ntype ReturnEl = React.ReactElement \| null;\ntype ChildRenderFn<Props> = Props & {\n children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/ utils type /\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' \| 'asc'];\nexport type DataTableTheme = 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger';\nexport type DataTableUse = 'primary' \| 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n /* Name of column /\n name: string;\n /* Data of column /\n data: React.ReactNode;\n [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n /* Theme for table\n * @default primary\n * /\n use?: DataTableUse;\n /* Data for table /\n data?: DataTableData[];\n /* Active sort object /\n sort?: DataTableSort;\n /* Handler call when will request change sort /\n onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n /* Field name in one data entity that is unique accross all set of data\n * @default id\n /\n uniqueKey?: string;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n /* Sticky header table\n * @deprecated\n * /\n sticky?: boolean;\n\n /* Hidden header /\n hidden?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n /* Unique name column /\n name?: string;\n /* Enable sort for column also if you pass string you can set default sort /\n sortable?: boolean \| 'desc' \| 'asc';\n /* Enable resize for column\n * @ignore /\n resizable?: boolean;\n /* Fixed column on the left/right /\n fixed?: 'left' \| 'right';\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n /* Rows table /\n rows?: DataTableRow[];\n /* When enabled, only visually acessable rows are rendered.\n * `tollerance` property controls how many rows outside of viewport are render.\n * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.\n * @default { tollerance: 2 }\n /\n virtualScroll?: boolean \| { tollerance?: number; rowHeight?: number };\n /\n Called every time user scrolls area\n /\n onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n /* Theme for row /\n theme?: DataTableTheme;\n /* Displays row as active/hover /\n active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n /* Unique name column or columns separated by / /\n name: string;\n /* Theme for cell */\n theme?: DataTableTheme;\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n static displayName = 'DefinitionTable';\n\n static style = style;\n\n static defaultProps = {\n use: 'primary',\n uniqueKey: 'id',\n sort: [],\n data: [],\n } as AsProps;\n\n columns: Column[] = [];\n\n tableRef = React.createRef<HTMLElement>();\n scrollBodyRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n scrollHeadRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n\n constructor(props: AsProps) {\n super(props);\n\n const createRef = syncScroll();\n // first create body ref for master scroll\n this.scrollBodyRef = createRef('body');\n this.scrollHeadRef = createRef('head');\n }\n\n handlerSortClick = (name: string, event: React.MouseEvent) => {\n const column = this.columns.find((column) => column.name === name)!;\n return fire(\n this,\n 'onSortChange',\n [\n column.name,\n column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n ],\n event,\n );\n };\n\n handlerResize = () => {\n this.forceUpdate();\n };\n\n scrollToUp = () => {\n this.tableRef?.current?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n });\n };\n\n setVarStyle(columns: Column[]) {\n for (const column of columns) {\n if (Array.isArray(column.cssVar)) {\n for (const cssVar of column.cssVar) {\n this.tableRef.current?.style.setProperty(cssVar, `${column.width}px`);\n }\n } else {\n this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);\n }\n }\n }\n\n childrenToColumns(\n children: React.ReactNode,\n options: { fixed?: 'left' \| 'right' } = { fixed: undefined },\n ) {\n const { sort } = this.asProps;\n const columnsChildren: Column[] = [];\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type !== DefinitionTable.Column) return;\n\n let {\n children,\n name,\n fixed = options.fixed,\n resizable,\n sortable,\n ...props\n } = child.props as Column['props'];\n const isGroup = !name;\n let columns: Column[] = [];\n\n if (isGroup) {\n columns = this.childrenToColumns(children, { fixed });\n name = flattenColumns(columns)\n .map(({ name }) => name)\n .join('/');\n if (!columns.length) return;\n children = React.Children.toArray(children).filter(\n (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n );\n }\n\n const column = this.columns.find((column) => column.name === name);\n columnsChildren.push({\n get width() {\n return this.props.ref.current?.getBoundingClientRect().width \|\| 0;\n },\n name,\n cssVar: createCssVarForWidth(name),\n fixed,\n resizable,\n active: sort[0] === name,\n sortable,\n sortDirection:\n sort[0] === name\n ? sort[1]\n : column?.sortDirection \|\|\n (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n columns,\n props: {\n name,\n ref: column?.props?.ref \|\| React.createRef(),\n children,\n ...props,\n },\n });\n });\n return columnsChildren;\n }\n\n getHeadProps(props: HeadAsProps) {\n const { use } = this.asProps;\n const columnsChildren = this.childrenToColumns(props.children);\n this.columns = flattenColumns(columnsChildren);\n return {\n $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n columnsChildren,\n use,\n onResize: this.handlerResize,\n $scrollRef: this.scrollHeadRef,\n };\n }\n\n getBodyProps(props: BodyAsProps) {\n const { data, use, uniqueKey } = this.asProps;\n\n const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n const rowPropsLayers: PropsLayer[] = [];\n\n React.Children.forEach(props.children, (child) => {\n if (React.isValidElement(child)) {\n const { name, children, ...other } = child.props as {\n name?: string;\n children?: PseudoChildPropsGetter;\n } & { [propName: string]: unknown };\n if (child.type === DefinitionTable.Cell && name) {\n name.split('/').forEach((name) => {\n cellPropsLayers[name] = cellPropsLayers[name] \|\| [];\n cellPropsLayers[name].push({\n ...other,\n childrenPropsGetter: children,\n });\n });\n }\n if (child.type === DefinitionTable.Row) {\n rowPropsLayers.push({\n ...other,\n childrenPropsGetter: children,\n });\n }\n }\n });\n\n return {\n columns: this.columns,\n rows: this.dataToRows(data, cellPropsLayers),\n uniqueKey,\n use,\n rowPropsLayers,\n $scrollRef: this.scrollBodyRef,\n };\n }\n\n dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n data.map((row) => {\n const groupByName: {\n [columnName: string]: {\n groupedColumns: string[];\n groupData: { [columnName: string]: unknown };\n };\n } = {};\n const groupedColumns: { [columnname: string]: true } = {};\n const ungroupedColumns: { [columnname: string]: true } = {};\n for (const rowKey in row) {\n const columnNames = rowKey.split('/');\n if (columnNames.length >= 2) {\n for (const column of columnNames) {\n groupByName[column] = {\n groupedColumns: columnNames,\n groupData: row[rowKey] as { [columnName: string]: unknown },\n };\n groupedColumns[rowKey] = true;\n }\n } else {\n ungroupedColumns[rowKey] = true;\n }\n }\n const rowsGroup = row[ROW_GROUP] \|\| [];\n const rowsGroupedNames = Object.fromEntries(\n rowsGroup\n .map((subRow) => Object.keys(subRow))\n .flat()\n .map((key) => [key, true]),\n );\n\n let isGroup = false;\n\n const cells: NestedCells = this.columns\n .map((column) => {\n if (groupByName[column.name]) {\n const { groupedColumns, groupData } = groupByName[column.name];\n if (groupedColumns[0] === column.name) {\n return {\n name: groupedColumns.join('/'),\n cssVar: groupedColumns.map(createCssVarForWidth),\n fixed: column.fixed,\n data: groupData,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n } else if (column.name in row) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: row[column.name],\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n } else if (!isGroup && rowsGroupedNames[column.name]) {\n // TODO: make it work not only with first group\n isGroup = true;\n return parseData(rowsGroup, {\n ...ungroupedColumns,\n ...groupedColumns,\n });\n } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: null,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n })\n .filter((column) => column !== undefined)\n .map((column) => column!);\n\n cells.flatRowData = row;\n return cells;\n });\n\n return parseData(data, {});\n }\n\n componentDidUpdate() {\n this.setVarStyle(this.columns);\n }\n\n render() {\n const SDataTable = Root;\n const { Children, styles, data } = this.asProps;\n\n return sstyled(styles)(\n <SDataTable\n render={Box}\n __excludeProps={['data']}\n ref={this.tableRef}\n role=\"table\"\n aria-rowcount={(data ?? []).length}\n >\n <Children />\n </SDataTable>,\n );\n }\n}\n\ninterface IDataTableCtx {\n getHeadProps: PropGetterFn;\n getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n return null;\n}\n\nconst DefinitionTable = createComponent(\n RootDefinitionTable,\n {\n Head,\n Body,\n Column: ComponentDefinition,\n Cell: ComponentDefinition,\n Row: ComponentDefinition,\n },\n {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","names":["REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","RootDefinitionTable","props","React","createRef","event","column","columns","find","fire","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","syncScroll","scrollBodyRef","scrollHeadRef","Array","isArray","cssVar","style","setProperty","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","isGroup","childrenToColumns","flattenColumns","map","join","length","toArray","filter","push","ref","getBoundingClientRect","forwardRef","use","$onSortClick","callAllEventHandlers","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","uniqueKey","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","flatRowData","setVarStyle","SDataTable","Box","styles","sstyled","Component","ComponentDefinition","createComponent","Head","Body"],"sources":["../../src/DataTable.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, PropGetterFn, Root, sstyled } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n Column,\n NestedCells,\n PropsLayer,\n PseudoChildPropsGetter,\n RowData,\n SortDirection,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n desc: 'asc',\n asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n use: 'primary' \| 'secondary';\n sort: SortDirection[];\n data: RowData[];\n uniqueKey: string;\n};\n\ntype HeadAsProps = {\n children: React.ReactChild;\n};\ntype BodyAsProps = {\n children: React.ReactChild;\n};\n\n/* utils type /\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) \| React.ReactNode;\n};\ntype ReturnEl = React.ReactElement \| null;\ntype ChildRenderFn<Props> = Props & {\n children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/ utils type /\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' \| 'asc'];\nexport type DataTableTheme = 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger';\nexport type DataTableUse = 'primary' \| 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n /* Name of column /\n name: string;\n /* Data of column /\n data: React.ReactNode;\n [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n /* Theme for table\n * @default primary\n * /\n use?: DataTableUse;\n /* Data for table /\n data?: DataTableData[];\n /* Active sort object /\n sort?: DataTableSort;\n /* Handler call when will request change sort /\n onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n /* Field name in one data entity that is unique accross all set of data\n * @default id\n /\n uniqueKey?: string;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n /* Sticky header table\n * @deprecated\n * /\n sticky?: boolean;\n\n /* Hidden header /\n hidden?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n /* Unique name column /\n name?: string;\n /* Enable sort for column also if you pass string you can set default sort /\n sortable?: boolean \| 'desc' \| 'asc';\n /* Enable resize for column\n * @ignore /\n resizable?: boolean;\n /* Fixed column on the left/right /\n fixed?: 'left' \| 'right';\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n /* Rows table /\n rows?: DataTableRow[];\n /* When enabled, only visually acessable rows are rendered.\n * `tollerance` property controls how many rows outside of viewport are render.\n * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.\n * @default { tollerance: 2 }\n /\n virtualScroll?: boolean \| { tollerance?: number; rowHeight?: number };\n /\n Called every time user scrolls area\n /\n onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n /* Theme for row /\n theme?: DataTableTheme;\n /* Displays row as active/hover /\n active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n /* Unique name column or columns separated by / /\n name: string;\n /* Theme for cell */\n theme?: DataTableTheme;\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n static displayName = 'DefinitionTable';\n\n static style = style;\n\n static defaultProps = {\n use: 'primary',\n uniqueKey: 'id',\n sort: [],\n data: [],\n } as AsProps;\n\n columns: Column[] = [];\n\n tableRef = React.createRef<HTMLElement>();\n scrollBodyRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n scrollHeadRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n\n constructor(props: AsProps) {\n super(props);\n\n const createRef = syncScroll();\n // first create body ref for master scroll\n this.scrollBodyRef = createRef('body');\n this.scrollHeadRef = createRef('head');\n }\n\n handlerSortClick = (name: string, event: React.MouseEvent) => {\n const column = this.columns.find((column) => column.name === name)!;\n return fire(\n this,\n 'onSortChange',\n [\n column.name,\n column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n ],\n event,\n );\n };\n\n handlerResize = () => {\n this.forceUpdate();\n };\n\n scrollToUp = () => {\n this.tableRef?.current?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n });\n };\n\n setVarStyle(columns: Column[]) {\n for (const column of columns) {\n if (Array.isArray(column.cssVar)) {\n for (const cssVar of column.cssVar) {\n this.tableRef.current?.style.setProperty(cssVar, `${column.width}px`);\n }\n } else {\n this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);\n }\n }\n }\n\n childrenToColumns(\n children: React.ReactNode,\n options: { fixed?: 'left' \| 'right' } = { fixed: undefined },\n ) {\n const { sort } = this.asProps;\n const columnsChildren: Column[] = [];\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type !== DefinitionTable.Column) return;\n\n let {\n children,\n name,\n fixed = options.fixed,\n resizable,\n sortable,\n ...props\n } = child.props as Column['props'];\n const isGroup = !name;\n let columns: Column[] = [];\n\n if (isGroup) {\n columns = this.childrenToColumns(children, { fixed });\n name = flattenColumns(columns)\n .map(({ name }) => name)\n .join('/');\n if (!columns.length) return;\n children = React.Children.toArray(children).filter(\n (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n );\n }\n\n const column = this.columns.find((column) => column.name === name);\n columnsChildren.push({\n get width() {\n return this.props.ref.current?.getBoundingClientRect().width \|\| 0;\n },\n name,\n cssVar: createCssVarForWidth(name),\n fixed,\n resizable,\n active: sort[0] === name,\n sortable,\n sortDirection:\n sort[0] === name\n ? sort[1]\n : column?.sortDirection \|\|\n (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n columns,\n props: {\n name,\n ...props,\n // @ts-ignore\n forwardRef: child.ref,\n children,\n ref: column?.props?.ref \|\| React.createRef(),\n },\n });\n });\n return columnsChildren;\n }\n\n getHeadProps(props: HeadAsProps) {\n const { use } = this.asProps;\n const columnsChildren = this.childrenToColumns(props.children);\n this.columns = flattenColumns(columnsChildren);\n return {\n $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n columnsChildren,\n use,\n onResize: this.handlerResize,\n $scrollRef: this.scrollHeadRef,\n };\n }\n\n getBodyProps(props: BodyAsProps) {\n const { data, use, uniqueKey } = this.asProps;\n\n const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n const rowPropsLayers: PropsLayer[] = [];\n\n React.Children.forEach(props.children, (child) => {\n if (React.isValidElement(child)) {\n const { name, children, ...other } = child.props as {\n name?: string;\n children?: PseudoChildPropsGetter;\n } & { [propName: string]: unknown };\n if (child.type === DefinitionTable.Cell && name) {\n name.split('/').forEach((name) => {\n cellPropsLayers[name] = cellPropsLayers[name] \|\| [];\n cellPropsLayers[name].push({\n ...other,\n childrenPropsGetter: children,\n });\n });\n }\n if (child.type === DefinitionTable.Row) {\n rowPropsLayers.push({\n ...other,\n childrenPropsGetter: children,\n });\n }\n }\n });\n\n return {\n columns: this.columns,\n rows: this.dataToRows(data, cellPropsLayers),\n uniqueKey,\n use,\n rowPropsLayers,\n $scrollRef: this.scrollBodyRef,\n };\n }\n\n dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n data.map((row) => {\n const groupByName: {\n [columnName: string]: {\n groupedColumns: string[];\n groupData: { [columnName: string]: unknown };\n };\n } = {};\n const groupedColumns: { [columnname: string]: true } = {};\n const ungroupedColumns: { [columnname: string]: true } = {};\n for (const rowKey in row) {\n const columnNames = rowKey.split('/');\n if (columnNames.length >= 2) {\n for (const column of columnNames) {\n groupByName[column] = {\n groupedColumns: columnNames,\n groupData: row[rowKey] as { [columnName: string]: unknown },\n };\n groupedColumns[rowKey] = true;\n }\n } else {\n ungroupedColumns[rowKey] = true;\n }\n }\n const rowsGroup = row[ROW_GROUP] \|\| [];\n const rowsGroupedNames = Object.fromEntries(\n rowsGroup\n .map((subRow) => Object.keys(subRow))\n .flat()\n .map((key) => [key, true]),\n );\n\n let isGroup = false;\n\n const cells: NestedCells = this.columns\n .map((column) => {\n if (groupByName[column.name]) {\n const { groupedColumns, groupData } = groupByName[column.name];\n if (groupedColumns[0] === column.name) {\n return {\n name: groupedColumns.join('/'),\n cssVar: groupedColumns.map(createCssVarForWidth),\n fixed: column.fixed,\n data: groupData,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n } else if (column.name in row) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: row[column.name],\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n } else if (!isGroup && rowsGroupedNames[column.name]) {\n // TODO: make it work not only with first group\n isGroup = true;\n return parseData(rowsGroup, {\n ...ungroupedColumns,\n ...groupedColumns,\n });\n } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: null,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n })\n .filter((column) => column !== undefined)\n .map((column) => column!);\n\n cells.flatRowData = row;\n return cells;\n });\n\n return parseData(data, {});\n }\n\n componentDidUpdate() {\n this.setVarStyle(this.columns);\n }\n\n render() {\n const SDataTable = Root;\n const { Children, styles, data } = this.asProps;\n\n return sstyled(styles)(\n <SDataTable\n render={Box}\n __excludeProps={['data']}\n ref={this.tableRef}\n role=\"table\"\n aria-rowcount={(data ?? []).length}\n >\n <Children />\n </SDataTable>,\n );\n }\n}\n\ninterface IDataTableCtx {\n getHeadProps: PropGetterFn;\n getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n return null;\n}\n\nconst DefinitionTable = createComponent(\n RootDefinitionTable,\n {\n Head,\n Body,\n Column: ComponentDefinition,\n Cell: ComponentDefinition,\n Row: ComponentDefinition,\n },\n {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"mappings":"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"}

package/lib/cjs/Head.js CHANGED Viewed

@@ -41,6 +41,8 @@ var _utils = require("./utils");
 var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
+var _ref4 = require("@semcore/utils/lib/ref");
 require("resize-observer-polyfill");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -56,14 +58,14 @@ var scrollStyles = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SShadowHorizontal_qyxht_gg_:before {\n  left: var(--left_qyxht) !important;\n}\n.___SShadowHorizontal_qyxht_gg_:after {\n  right: var(--right_qyxht) !important;\n}\n"
+".___SShadowHorizontal_2bakh_gg_:before {\n  left: var(--left_2bakh) !important;\n}\n.___SShadowHorizontal_2bakh_gg_:after {\n  right: var(--right_2bakh) !important;\n}\n"
 /*__inner_css_end__*/
-, "qyxht_gg_")
+, "2bakh_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SShadowHorizontal": "___SShadowHorizontal_qyxht_gg_",
-  "--left": "--left_qyxht",
-  "--right": "--right_qyxht"
+  "__SShadowHorizontal": "___SShadowHorizontal_2bakh_gg_",
+  "--left": "--left_2bakh",
+  "--right": "--right_2bakh"
 });
 var SORTING_ICON = {
   desc: _m["default"],
@@ -102,6 +104,15 @@ var Head = /*#__PURE__*/function (_Component) {
         }
       };
     });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "refColumn", function (props) {
+      return function (ref) {
+        (0, _ref4.setRef)(props.ref, ref);
+        if (props.forwardRef) {
+          (0, _ref4.setRef)(props.forwardRef, ref);
+        }
+      };
+    });
     return _this;
   }
@@ -154,6 +165,7 @@ var Head = /*#__PURE__*/function (_Component) {
         "group": isGroup,
         "tabIndex": column.sortable && 0
       }, column.props), {}, {
+        "ref": this.refColumn(column.props),
         "onClick": (0, _assignProps2.callAllEventHandlers)(column.props.onClick, column.sortable ? this.bindHandlerSortClick(column.name) : undefined),
         "onKeyDown": (0, _assignProps2.callAllEventHandlers)(column.props.onKeyDown, column.sortable ? this.bindHandlerKeyDown(column.name) : undefined),
         "style": style,

package/lib/cjs/Head.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Head.js","names":["SORTING_ICON","desc","SortDesc","asc","SortAsc","ariaSort","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","Flex","SHead","Box","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","length","cSize","flattenColumns","getFixedStyle","value","style","flexBasis","~~props","~~flex","sstyled","fixed","resizable","callAllEventHandlers","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","SHeadWrapper","Children","columnsChildren","onResize","$scrollRef","sticky","getScrollOffsetValue","offsetLeftSum","offsetRightSum","logger","warn","displayName","scrollStyles","origin","Component"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n desc: SortDesc,\n asc: SortAsc,\n} as const;\nconst ariaSort = {\n desc: 'descending',\n asc: 'ascending',\n} as const;\n\ntype AsProps = {\n $onSortClick: (name: string, event: React.MouseEvent \| React.KeyboardEvent) => void;\n $scrollRef: (instance: unknown) => void;\n use: 'primary' \| 'secondary';\n columnsChildren: Column[];\n onResize: ResizeObserverCallback;\n sticky: boolean;\n ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n columns: Column[] = [];\n\n static displayName: string;\n\n bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n this.asProps.$onSortClick(name, event);\n };\n\n bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n if (event.code === 'Enter') {\n this.asProps.$onSortClick(name, event);\n }\n };\n\n renderColumns(columns: Column[], width: number) {\n return columns.map((column) => this.renderColumn(column, width));\n }\n\n renderColumn(column: Column, width: number) {\n const { styles, use, hidden } = this.asProps;\n const SColumn = Flex;\n const SHead = Box;\n const SSortIcon = SORTING_ICON[column.sortDirection];\n const ariaSortValue =\n column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n const isGroup = column.columns?.length > 0;\n const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n const [name, value] = getFixedStyle(column, this.columns);\n\n const style = {\n flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n ...column.props.style,\n };\n\n if (name !== undefined && value !== undefined) {\n style[name] = value;\n }\n\n return sstyled(styles)(\n <SColumn\n role={isGroup ? undefined : 'columnheader'}\n key={column.name}\n use={use}\n fixed={column.fixed}\n resizable={column.resizable}\n sortable={column.sortable}\n active={column.active}\n group={isGroup}\n tabIndex={column.sortable && 0}\n {...column.props}\n onClick={callAllEventHandlers(\n column.props.onClick,\n column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n )}\n onKeyDown={callAllEventHandlers(\n column.props.onKeyDown,\n column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n )}\n style={style}\n hidden={hidden}\n aria-sort={ariaSortValue}\n >\n {isGroup ? (\n <>\n <SColumn role=\"columnheader\" groupHead use={use}>\n <div>{column.props.children}</div>\n </SColumn>\n <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n </>\n ) : (\n <>\n <div>{column.props.children}</div>\n {column.sortable ? <SSortIcon active={column.active} /> : null}\n </>\n )}\n </SColumn>,\n );\n }\n\n render() {\n const SHead = Root;\n const SHeadWrapper = Box;\n const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n\n this.columns = flattenColumns(columnsChildren);\n\n const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n logger.warn(\n sticky,\n \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n this.asProps['data-ui-name'] \|\| Head.displayName,\n );\n\n return sstyled(styles)(\n <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n <ScrollArea\n styles={scrollStyles}\n use:left={`${offsetLeftSum}px`}\n use:right={`${offsetRightSum}px`}\n shadow\n onResize={onResize}\n >\n <ScrollArea.Container ref={$scrollRef}>\n <SHead render={Box} role=\"row\">\n {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n </SHead>\n </ScrollArea.Container>\n </ScrollArea>\n {Children.origin}\n </SHeadWrapper>,\n );\n }\n}\n\nexport default Head;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAMA,YAAY,GAAG;EACnBC,IAAI,EAAEC,aADa;EAEnBC,GAAG,EAAEC;AAFc,CAArB;AAIA,IAAMC,QAAQ,GAAG;EACfJ,IAAI,EAAE,YADS;EAEfE,GAAG,EAAE;AAFU,CAAjB;;IAeMG,I;;;;;;;;;;;;;;;gGACgB,E;6GAIG,UAACC,IAAD;MAAA,OAAkB,UAACC,KAAD,EAA6B;QACpE,MAAKC,OAAL,CAAaC,YAAb,CAA0BH,IAA1B,EAAgCC,KAAhC;MACD,CAFsB;IAAA,C;2GAIF,UAACD,IAAD;MAAA,OAAkB,UAACC,KAAD,EAAgC;QACrE,IAAIA,KAAK,CAACG,IAAN,KAAe,OAAnB,EAA4B;UAC1B,MAAKF,OAAL,CAAaC,YAAb,CAA0BH,IAA1B,EAAgCC,KAAhC;QACD;MACF,CAJoB;IAAA,C;;;;;;~~WAMrB~~,~~uBAAcI~~,OAAd,EAAiCC,KAAjC,EAAgD;MAAA;;MAC9C,OAAOD,OAAO,CAACE,GAAR,CAAY,UAACC,MAAD;QAAA,OAAY,MAAI,CAACC,YAAL,CAAkBD,MAAlB,EAA0BF,KAA1B,CAAZ;MAAA,CAAZ,CAAP;IACD;;;WAED,sBAAaE,MAAb,EAA6BF,KAA7B,EAA4C;MAAA;;MAC1C,oBAAgC,~~KAAKJ~~,OAArC;MAAA,~~IAAQQ~~,MAAR,iBAAQA,MAAR;MAAA,IAAgBC,GAAhB,iBAAgBA,GAAhB;MAAA,IAAqBC,MAArB,iBAAqBA,MAArB;MACA,IAAMC,OAAO,GAAGC,aAAhB;MACA,IAAMC,KAAK,GAAGC,YAAd;MACA,IAAMC,SAAS,~~GAAGxB~~,YAAY,~~CAACe~~,MAAM,CAACU,aAAR,CAA9B;MACA,IAAMC,aAAa,GACjBX,MAAM,CAACY,QAAP,IAAmBZ,MAAM,CAACa,MAA1B,~~GAAmCvB~~,QAAQ,~~CAACU~~,MAAM,CAACU,aAAR,CAA3C,GAAoEI,SADtE;MAEA,IAAMC,OAAO,GAAG,oBAAAf,MAAM,CAACH,OAAP,oEAAgBmB,MAAhB,IAAyB,CAAzC;MACA,IAAMC,KAAK,GAAGF,OAAO,GAAG,IAAAG,qBAAA,EAAelB,MAAM,CAACH,OAAtB,EAA+BmB,MAAlC,GAA2C,CAAhE;;MACA,qBAAsB,IAAAG,oBAAA,EAAcnB,MAAd,EAAsB,KAAKH,OAA3B,CAAtB;MAAA;MAAA,~~IAAOL~~,IAAP;MAAA,~~IAAa4B~~,KAAb;;MAEA,IAAMC,KAAK;QACTC,SAAS,EAAEtB,MAAM,~~CAACuB~~,KAAP,~~CAAaC~~,IAAb,~~KAAsBV~~,SAAtB,cAAsChB,KAAK,GAAGmB,KAA9C;MADF,GAENjB,MAAM,~~CAACuB~~,KAAP,~~CAAaF~~,KAFP,CAAX;;MAKA,~~IAAI7B~~,IAAI,~~KAAKsB~~,SAAT,IAAsBM,KAAK,KAAKN,SAApC,EAA+C;QAC7CO,KAAK,~~CAAC7B~~,IAAD,CAAL,~~GAAc4B~~,KAAd;MACD;;MAED,eAAO,~~IAAAK~~,aAAA,~~EAAQvB~~,MAAR,CAAP,eACE,gCAAC,OAAD;QAAA,QACQa,OAAO,GAAGD,SAAH,GAAe,cAD9B;QAAA,OAEOd,MAAM,~~CAACR~~,IAFd;QAAA,~~OAGOW~~,GAHP;QAAA,SAISH,MAAM,~~CAAC0B~~,KAJhB;QAAA,~~aAKa1B~~,MAAM,~~CAAC2B~~,SALpB;QAAA,~~YAMY3B~~,MAAM,CAACY,QANnB;QAAA,UAOUZ,MAAM,CAACa,MAPjB;QAAA,SAQSE,OART;QAAA,YASYf,MAAM,CAACY,QAAP,IAAmB;MAT/B,GAUMZ,MAAM,~~CAACuB~~,KAVb;QAAA,~~WAWW~~,~~IAAAK~~,kCAAA,EACP5B,MAAM,~~CAACuB~~,KAAP,~~CAAaM~~,OADN,EAEP7B,MAAM,CAACY,QAAP,GAAkB,KAAKkB,oBAAL,CAA0B9B,MAAM,~~CAACR~~,IAAjC,CAAlB,~~GAA2DsB~~,SAFpD,~~CAXX~~;QAAA,~~aAea~~,IAAAc,kCAAA,EACT5B,MAAM,~~CAACuB~~,KAAP,~~CAAaQ~~,SADJ,EAET/B,MAAM,CAACY,QAAP,GAAkB,KAAKoB,kBAAL,CAAwBhC,MAAM,~~CAACR~~,IAA/B,CAAlB,~~GAAyDsB~~,SAFhD,~~CAfb~~;QAAA,~~SAmBSO~~,~~KAnBT~~;QAAA,~~UAoBUjB~~,~~MApBV~~;QAAA,~~aAqBaO~~;~~MArBb~~,~~KAuBGI~~,OAAO,gBACN,+EACE,gCAAC,OAAD;QAAA,QAAc,cAAd;QAAA;QAAA,OAA4CZ;MAA5C,iBACE,4DAAMH,MAAM,~~CAACuB~~,KAAP,~~CAAaU~~,QAAnB,CADF,CADF,eAIE,gCAAC,KAAD,yBAAQ,KAAKC,aAAL,CAAmBlC,MAAM,CAACH,OAA1B,EAAmC,MAAMoB,KAAzC,CAAR,CAJF,CADM,gBAQN,+EACE,4DAAMjB,MAAM,~~CAACuB~~,KAAP,~~CAAaU~~,QAAnB,CADF,EAEGjC,MAAM,CAACY,QAAP,gBAAkB,gCAAC,SAAD;QAAA,UAAmBZ,MAAM,CAACa;MAA1B,GAAlB,GAAyD,IAF5D,~~CA/BJ~~,CADF;~~IAuCD~~;;;WAED,kBAAS;MAAA;MAAA;;MACP,IAAMN,KAAK,GAwBYC,YAxBvB;MACA,IAAM2B,YAAY,GAAG3B,YAArB;MACA,qBAA4E,~~KAAKd~~,OAAjF;MAAA,~~IAAQ0C~~,QAAR,kBAAQA,QAAR;MAAA,IAAkBlC,MAAlB,kBAAkBA,MAAlB;MAAA,IAA0BmC,eAA1B,kBAA0BA,eAA1B;MAAA,IAA2CC,QAA3C,kBAA2CA,QAA3C;MAAA,IAAqDC,UAArD,kBAAqDA,UAArD;MAAA,IAAiEC,MAAjE,kBAAiEA,MAAjE;MAEA,KAAK3C,OAAL,GAAe,IAAAqB,qBAAA,EAAemB,eAAf,CAAf;;MAEA,4BAAwC,IAAAI,2BAAA,EAAqB,KAAK5C,OAA1B,CAAxC;MAAA;MAAA,IAAO6C,aAAP;MAAA,IAAsBC,cAAtB;;MAEAC,kBAAA,CAAOC,IAAP,CACEL,MADF,EAEE,0DAFF,EAGE,~~KAAK9C~~,OAAL,CAAa,cAAb,KAAgCH,IAAI,~~CAACuD~~,WAHvC;;MAMA,eAAO,~~IAAArB~~,aAAA,~~EAAQvB~~,MAAR,CAAP,eACE,gCAAC,YAAD;QAAA,UAAsBsC,MAAtB;QAAA,QAAmC;MAAnC,iBACE,gCAAC,sBAAD;QAAA,UACUO,YADV;QAAA,sBAEeL,aAFf;QAAA,uBAGgBC,cAHhB;QAAA;QAAA,YAKYL;MALZ,iBAOE,gCAAC,sBAAD,CAAY,SAAZ;QAAsB,GAAG,EAAEC;MAA3B,gBACE,gCAAC,KAAD;QAAA,QAAyB;MAAzB,YACG,KAAKL,aAAL,CAAmBG,eAAnB,EAAoC,MAAM,KAAKxC,OAAL,CAAamB,MAAvD,CADH,CADF,CAPF,CADF,EAcGoB,QAAQ,CAACY,MAdZ,CADF;IAkBD;;;~~EAjHgBC~~,e;;~~iCAAb1D~~,I;~~eAoHSA~~,I"}
1	+ {"version":3,"file":"Head.js","names":["SORTING_ICON","desc","SortDesc","asc","SortAsc","ariaSort","Head","name","event","asProps","$onSortClick","code","props","ref","setRef","forwardRef","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","Flex","SHead","Box","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","length","cSize","flattenColumns","getFixedStyle","value","style","flexBasis","flex","sstyled","fixed","resizable","refColumn","callAllEventHandlers","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","SHeadWrapper","Children","columnsChildren","onResize","$scrollRef","sticky","getScrollOffsetValue","offsetLeftSum","offsetRightSum","logger","warn","displayName","scrollStyles","origin","Component"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport { setRef } from '@semcore/utils/lib/ref';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n desc: SortDesc,\n asc: SortAsc,\n} as const;\nconst ariaSort = {\n desc: 'descending',\n asc: 'ascending',\n} as const;\n\ntype AsProps = {\n $onSortClick: (name: string, event: React.MouseEvent \| React.KeyboardEvent) => void;\n $scrollRef: (instance: unknown) => void;\n use: 'primary' \| 'secondary';\n columnsChildren: Column[];\n onResize: ResizeObserverCallback;\n sticky: boolean;\n ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n columns: Column[] = [];\n\n static displayName: string;\n\n bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n this.asProps.$onSortClick(name, event);\n };\n\n bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n if (event.code === 'Enter') {\n this.asProps.$onSortClick(name, event);\n }\n };\n\n refColumn = (props: Column['props']) => (ref: HTMLElement) => {\n setRef(props.ref, ref);\n if (props.forwardRef) {\n setRef(props.forwardRef, ref);\n }\n };\n\n renderColumns(columns: Column[], width: number) {\n return columns.map((column) => this.renderColumn(column, width));\n }\n\n renderColumn(column: Column, width: number) {\n const { styles, use, hidden } = this.asProps;\n const SColumn = Flex;\n const SHead = Box;\n const SSortIcon = SORTING_ICON[column.sortDirection];\n const ariaSortValue =\n column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n const isGroup = column.columns?.length > 0;\n const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n const [name, value] = getFixedStyle(column, this.columns);\n\n const style = {\n flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n ...column.props.style,\n };\n\n if (name !== undefined && value !== undefined) {\n style[name] = value;\n }\n\n return sstyled(styles)(\n <SColumn\n role={isGroup ? undefined : 'columnheader'}\n key={column.name}\n use={use}\n fixed={column.fixed}\n resizable={column.resizable}\n sortable={column.sortable}\n active={column.active}\n group={isGroup}\n tabIndex={column.sortable && 0}\n {...column.props}\n ref={this.refColumn(column.props)}\n onClick={callAllEventHandlers(\n column.props.onClick,\n column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n )}\n onKeyDown={callAllEventHandlers(\n column.props.onKeyDown,\n column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n )}\n style={style}\n hidden={hidden}\n aria-sort={ariaSortValue}\n >\n {isGroup ? (\n <>\n <SColumn role=\"columnheader\" groupHead use={use}>\n <div>{column.props.children}</div>\n </SColumn>\n <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n </>\n ) : (\n <>\n <div>{column.props.children}</div>\n {column.sortable ? <SSortIcon active={column.active} /> : null}\n </>\n )}\n </SColumn>,\n );\n }\n\n render() {\n const SHead = Root;\n const SHeadWrapper = Box;\n const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n\n this.columns = flattenColumns(columnsChildren);\n\n const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n logger.warn(\n sticky,\n \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n this.asProps['data-ui-name'] \|\| Head.displayName,\n );\n\n return sstyled(styles)(\n <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n <ScrollArea\n styles={scrollStyles}\n use:left={`${offsetLeftSum}px`}\n use:right={`${offsetRightSum}px`}\n shadow\n onResize={onResize}\n >\n <ScrollArea.Container ref={$scrollRef}>\n <SHead render={Box} role=\"row\">\n {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n </SHead>\n </ScrollArea.Container>\n </ScrollArea>\n {Children.origin}\n </SHeadWrapper>,\n );\n }\n}\n\nexport default Head;\n"],"mappings":"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"}

package/lib/cjs/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":[],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\n\nexport type PseudoChildPropsGetter = (\n props: { [propName: string]: unknown },\n rowData: { [columnName: string]: unknown },\n index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n childrenPropsGetter?: PseudoChildPropsGetter;\n [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' \| 'desc';\nexport type Column<\n Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n name: string;\n active: boolean;\n width: number;\n fixed?: 'left' \| 'right';\n resizable?: boolean;\n sortable?: boolean \| SortDirection;\n sortDirection: SortDirection;\n cssVar: string \| string[];\n data?: unknown;\n props: {\n name: string;\n } & Partial<{\n onClick: (event: React.MouseEvent) => void;\n onKeyDown: (event: React.KeyboardEvent) => void;\n ~~ref~~: React.~~RefObject~~<HTMLElement>;\n style: React.CSSProperties;\n fixed: 'left' \| 'right';\n children: React.ReactNode[];\n resizable: boolean;\n sortable: boolean \| SortDirection;\n sortDirection: SortDirection;\n }> &\n Props;\n columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' \| 'cssVar' \| 'fixed' \| 'data'> & {\n cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n Partial<{\n name: string;\n [ROW_GROUP]: RowData[];\n }>;\nexport type NestedCells = (Cell \| NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":";;AACA"}
1	+ {"version":3,"file":"types.js","names":[],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\n\nexport type PseudoChildPropsGetter = (\n props: { [propName: string]: unknown },\n rowData: { [columnName: string]: unknown },\n index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n childrenPropsGetter?: PseudoChildPropsGetter;\n [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' \| 'desc';\nexport type Column<\n Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n name: string;\n active: boolean;\n width: number;\n fixed?: 'left' \| 'right';\n resizable?: boolean;\n sortable?: boolean \| SortDirection;\n sortDirection: SortDirection;\n cssVar: string \| string[];\n data?: unknown;\n props: {\n name: string;\n ref: React.RefObject<HTMLElement>;\n } & Partial<{\n onClick: (event: React.MouseEvent) => void;\n onKeyDown: (event: React.KeyboardEvent) => void;\n forwardRef: React.Ref<HTMLElement>;\n style: React.CSSProperties;\n fixed: 'left' \| 'right';\n children: React.ReactNode[];\n resizable: boolean;\n sortable: boolean \| SortDirection;\n sortDirection: SortDirection;\n }> &\n Props;\n columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' \| 'cssVar' \| 'fixed' \| 'data'> & {\n cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n Partial<{\n name: string;\n [ROW_GROUP]: RowData[];\n }>;\nexport type NestedCells = (Cell \| NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":";;AACA"}

package/lib/es6/Body.js CHANGED Viewed

@@ -40,14 +40,14 @@ var scrollStyles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SShadowHorizontal_qyxht_gg_:before {\n  left: var(--left_qyxht) !important;\n}\n.___SShadowHorizontal_qyxht_gg_:after {\n  right: var(--right_qyxht) !important;\n}\n"
+".___SShadowHorizontal_2bakh_gg_:before {\n  left: var(--left_2bakh) !important;\n}\n.___SShadowHorizontal_2bakh_gg_:after {\n  right: var(--right_2bakh) !important;\n}\n"
 /*__inner_css_end__*/
-, "qyxht_gg_")
+, "2bakh_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SShadowHorizontal": "___SShadowHorizontal_qyxht_gg_",
-  "--left": "--left_qyxht",
-  "--right": "--right_qyxht"
+  "__SShadowHorizontal": "___SShadowHorizontal_2bakh_gg_",
+  "--left": "--left_2bakh",
+  "--right": "--right_2bakh"
 });
 import trottle from '@semcore/utils/lib/rafTrottle';
 var testEnv = process.env.NODE_ENV === 'test';

package/lib/es6/DataTable.js CHANGED Viewed

@@ -40,46 +40,46 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SDataTable_mwxpl_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_mwxpl_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_mwxpl_gg_.__sticky_mwxpl_gg_ {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.___SHead_mwxpl_gg_ {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  z-index: 0;\n}\n\n.___SColumn_mwxpl_gg_ {\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  font-size: 12px;\n  color: #191b23;\n  box-sizing: border-box;\n  position: relative\n}\n\n.___SColumn_mwxpl_gg_:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  }\n\n.___SColumn_mwxpl_gg_.__hidden_mwxpl_gg_ {\n  height: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  border: none !important;\n}\n\n.___SColumn_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  padding: 12px;\n  border-right: 1px solid #e0e1e9;\n  border-bottom: 1px solid #e0e1e9;\n  background-color: #f4f5f9;\n}\n\n.___SColumn_mwxpl_gg_._use_secondary_mwxpl_gg_ {\n  padding: 8px;\n  border-bottom: 1px solid #a9abb6;\n  background-color: #ffffff;\n}\n\n.___SColumn_mwxpl_gg_.__use_mwxpl_gg_:last-child {\n  border-right: none;\n}\n\n.___SColumn_mwxpl_gg_.__group_mwxpl_gg_.__use_mwxpl_gg_ {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  align-items: normal;\n  border-bottom: none;\n  padding: 0;\n}\n\n.___SColumn_mwxpl_gg_.__groupHead_mwxpl_gg_.__use_mwxpl_gg_ {\n  justify-content: center;\n  border-right: none;\n  /* for resizable */\n  z-index: 1;\n}\n\n.___SColumn_mwxpl_gg_.__groupHead_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_mwxpl_gg_.__groupHead_mwxpl_gg_._use_secondary_mwxpl_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_mwxpl_gg_.__sortable_mwxpl_gg_ {\n  cursor: pointer\n}\n\n.___SColumn_mwxpl_gg_.__sortable_mwxpl_gg_._use_primary_mwxpl_gg_:hover {\n    background-color: #e0e1e9;\n  }\n\n.___SColumn_mwxpl_gg_.__active_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  background-color: #e0e1e9;\n}\n\n.___SColumn_mwxpl_gg_.__resizable_mwxpl_gg_:hover:after {\n    background: #e0e1e9;\n  }\n\n.___SColumn_mwxpl_gg_.__resizable_mwxpl_gg_:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    right: -1px;\n    height: 100vh;\n    width: 1px;\n    background: transparent;\n    cursor: col-resize;\n  }\n\n.___SColumn_mwxpl_gg_.__fixed_mwxpl_gg_ {\n  position: sticky;\n  /* because up resizable */\n  z-index: 2;\n}\n\n.___SSortIcon_mwxpl_gg_ {\n  fill: #a9abb6;\n  margin-left: 6px;\n}\n\n.___SSortIcon_mwxpl_gg_.__active_mwxpl_gg_ {\n  fill: #8a8e9b;\n}\n\n.___SBodyWrapper_mwxpl_gg_ {\n  position: relative;\n}\n\n.___SBody_mwxpl_gg_ {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.___SRow_mwxpl_gg_ {\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n/* DEFAULT THEME */\n\n.___SRow_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: rgb(240, 240, 244);\n}\n\n/* MUTED THEME */\n\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #f2f3f4;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_muted_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_muted_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #f6f7f7;\n}\n\n/* INFO THEME */\n\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #e9f7ff;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_info_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_info_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #c4e5fe;\n}\n\n/* SUCCESS THEME */\n\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #dbfee8;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_success_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_success_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #9ef2c9;\n}\n\n/* WARNING THEME */\n\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #fff3d9;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_warning_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_warning_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #ffdca2;\n}\n\n/* DANGER THEME */\n\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #fff0f7;\n}\n\n.___SRow_mwxpl_gg_:hover > .___SCell_mwxpl_gg_._theme_danger_mwxpl_gg_,\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_.__active_mwxpl_gg_ > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_:hover > .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_),\n.___SRow_mwxpl_gg_._theme_danger_mwxpl_gg_ .___SCell_mwxpl_gg_:hover + .___SGroupCell_mwxpl_gg_ .___SCell_mwxpl_gg_:not(.__theme_mwxpl_gg_) {\n  background-color: #ffd7df;\n}\n\n.___SRow_mwxpl_gg_.__positioned_mwxpl_gg_ {\n  position: absolute;\n}\n\n.___SCell_mwxpl_gg_ {\n  display: flex;\n  flex: 1;\n  flex-basis: auto;\n  font-size: 14px;\n  line-height: 1.42;\n  color: #191b23;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e0e1e9;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.___SCell_mwxpl_gg_._use_primary_mwxpl_gg_ {\n  padding: 12px;\n  min-height: 45px;\n  background-color: #ffffff;\n}\n\n.___SCell_mwxpl_gg_._use_secondary_mwxpl_gg_ {\n  padding: 8px;\n  min-height: 37px;\n  background-color: #ffffff;\n}\n\n.___SCell_mwxpl_gg_.__fixed_mwxpl_gg_ {\n  position: sticky;\n  z-index: 1;\n}\n\n.___SCell_mwxpl_gg_._theme_muted_mwxpl_gg_ {\n  background-color: #f2f3f4;\n}\n\n.___SCell_mwxpl_gg_._theme_info_mwxpl_gg_ {\n  background-color: #e9f7ff;\n}\n\n.___SCell_mwxpl_gg_._theme_success_mwxpl_gg_ {\n  background-color: #dbfee8;\n}\n\n.___SCell_mwxpl_gg_._theme_warning_mwxpl_gg_ {\n  background-color: #fff3d9;\n}\n\n.___SCell_mwxpl_gg_._theme_danger_mwxpl_gg_ {\n  background-color: #fff0f7;\n}\n\n.___SScrollAreaBar_mwxpl_gg_._orientation_horizontal_mwxpl_gg_ {\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  margin-top: -12px;\n  z-index: 2;\n}\n\n.___SScrollAreaBar_mwxpl_gg_._orientation_vertical_mwxpl_gg_ {\n  width: 12px;\n}\n\n.___SScrollAreaBar_mwxpl_gg_._orientation_horizontal_mwxpl_gg_ {\n  margin-left: calc(var(--left_mwxpl) + 4px);\n  margin-right: calc(var(--right_mwxpl) + 4px);\n  width: calc(100% - var(--offsetSum_mwxpl) - 8px);\n}\n\n.___SHeightHold_mwxpl_gg_ {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  pointer-events: none;\n  /* should be under other layers */\n  z-index: -1;\n}\n"
+":root {\n\n  /* DEPRECATED START\n     Deprecated variables should never be used in\n     components styles but preserved for backward\n     compatibility if they used in projects\n     like `<Badge bg=\"red\">alpha</Badge>`\n  */\n  /* DEPRECATED END */\n}\n\n.___SDataTable_twkoc_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_twkoc_gg_ {\n  position: relative;\n}\n\n.___SHeadWrapper_twkoc_gg_.__sticky_twkoc_gg_ {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n\n.___SHead_twkoc_gg_ {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n  z-index: 0;\n}\n\n.___SColumn_twkoc_gg_ {\n  display: flex;\n  align-items: center;\n  flex-grow: 1;\n  font-size: 12px;\n  color: #191b23;\n  box-sizing: border-box;\n  position: relative\n}\n\n.___SColumn_twkoc_gg_:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px rgba(0, 143, 248, 0.2);\n  }\n\n.___SColumn_twkoc_gg_.__hidden_twkoc_gg_ {\n  height: 0 !important;\n  padding: 0 !important;\n  overflow: hidden !important;\n  border: none !important;\n}\n\n.___SColumn_twkoc_gg_._use_primary_twkoc_gg_ {\n  padding: 12px;\n  border-right: 1px solid #e0e1e9;\n  border-bottom: 1px solid #e0e1e9;\n  background-color: #f4f5f9;\n}\n\n.___SColumn_twkoc_gg_._use_secondary_twkoc_gg_ {\n  padding: 8px;\n  border-bottom: 1px solid #a9abb6;\n  background-color: #ffffff;\n}\n\n.___SColumn_twkoc_gg_.__use_twkoc_gg_:last-child {\n  border-right: none;\n}\n\n.___SColumn_twkoc_gg_.__group_twkoc_gg_.__use_twkoc_gg_ {\n  display: flex;\n  flex-wrap: wrap;\n  flex-direction: column;\n  align-items: normal;\n  border-bottom: none;\n  padding: 0;\n}\n\n.___SColumn_twkoc_gg_.__groupHead_twkoc_gg_.__use_twkoc_gg_ {\n  justify-content: center;\n  border-right: none;\n  /* for resizable */\n  z-index: 1;\n}\n\n.___SColumn_twkoc_gg_.__groupHead_twkoc_gg_._use_primary_twkoc_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_twkoc_gg_.__groupHead_twkoc_gg_._use_secondary_twkoc_gg_ {\n  border-bottom: 1px solid #e0e1e9;\n}\n\n.___SColumn_twkoc_gg_.__sortable_twkoc_gg_ {\n  cursor: pointer\n}\n\n.___SColumn_twkoc_gg_.__sortable_twkoc_gg_._use_primary_twkoc_gg_:hover {\n    background-color: #e0e1e9;\n  }\n\n.___SColumn_twkoc_gg_.__active_twkoc_gg_._use_primary_twkoc_gg_ {\n  background-color: #e0e1e9;\n}\n\n.___SColumn_twkoc_gg_.__resizable_twkoc_gg_:hover:after {\n    background: #e0e1e9;\n  }\n\n.___SColumn_twkoc_gg_.__resizable_twkoc_gg_:after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    right: -1px;\n    height: 100vh;\n    width: 1px;\n    background: transparent;\n    cursor: col-resize;\n  }\n\n.___SColumn_twkoc_gg_.__fixed_twkoc_gg_ {\n  position: sticky;\n  /* because up resizable */\n  z-index: 2;\n}\n\n.___SSortIcon_twkoc_gg_ {\n  fill: #a9abb6;\n  margin-left: 6px;\n}\n\n.___SSortIcon_twkoc_gg_.__active_twkoc_gg_ {\n  fill: #8a8e9b;\n}\n\n.___SBodyWrapper_twkoc_gg_ {\n  position: relative;\n}\n\n.___SBody_twkoc_gg_ {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  min-width: -moz-fit-content;\n  min-width: fit-content;\n}\n\n.___SRow_twkoc_gg_ {\n  display: flex;\n  flex-direction: row;\n  position: relative;\n}\n\n/* DEFAULT THEME */\n\n.___SRow_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: rgb(240, 240, 244);\n}\n\n/* MUTED THEME */\n\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #f2f3f4;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_muted_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_muted_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #f6f7f7;\n}\n\n/* INFO THEME */\n\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #e9f7ff;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_info_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_info_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #c4e5fe;\n}\n\n/* SUCCESS THEME */\n\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #dbfee8;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_success_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_success_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #9ef2c9;\n}\n\n/* WARNING THEME */\n\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #fff3d9;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_warning_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_warning_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #ffdca2;\n}\n\n/* DANGER THEME */\n\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #fff0f7;\n}\n\n.___SRow_twkoc_gg_:hover > .___SCell_twkoc_gg_._theme_danger_twkoc_gg_,\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_.__active_twkoc_gg_ > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_:hover > .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_),\n.___SRow_twkoc_gg_._theme_danger_twkoc_gg_ .___SCell_twkoc_gg_:hover + .___SGroupCell_twkoc_gg_ .___SCell_twkoc_gg_:not(.__theme_twkoc_gg_) {\n  background-color: #ffd7df;\n}\n\n.___SRow_twkoc_gg_.__positioned_twkoc_gg_ {\n  position: absolute;\n}\n\n.___SCell_twkoc_gg_ {\n  display: flex;\n  flex: 1;\n  flex-basis: auto;\n  font-size: 14px;\n  line-height: 1.42;\n  color: #191b23;\n  box-sizing: border-box;\n  border-bottom: 1px solid #e0e1e9;\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.___SCell_twkoc_gg_._use_primary_twkoc_gg_ {\n  padding: 12px;\n  min-height: 45px;\n  background-color: #ffffff;\n}\n\n.___SCell_twkoc_gg_._use_secondary_twkoc_gg_ {\n  padding: 8px;\n  min-height: 37px;\n  background-color: #ffffff;\n}\n\n.___SCell_twkoc_gg_.__fixed_twkoc_gg_ {\n  position: sticky;\n  z-index: 1;\n}\n\n.___SCell_twkoc_gg_._theme_muted_twkoc_gg_ {\n  background-color: #f2f3f4;\n}\n\n.___SCell_twkoc_gg_._theme_info_twkoc_gg_ {\n  background-color: #e9f7ff;\n}\n\n.___SCell_twkoc_gg_._theme_success_twkoc_gg_ {\n  background-color: #dbfee8;\n}\n\n.___SCell_twkoc_gg_._theme_warning_twkoc_gg_ {\n  background-color: #fff3d9;\n}\n\n.___SCell_twkoc_gg_._theme_danger_twkoc_gg_ {\n  background-color: #fff0f7;\n}\n\n.___SScrollAreaBar_twkoc_gg_._orientation_horizontal_twkoc_gg_ {\n  position: sticky;\n  bottom: 0;\n  left: 0;\n  margin-top: -12px;\n  z-index: 2;\n}\n\n.___SScrollAreaBar_twkoc_gg_._orientation_vertical_twkoc_gg_ {\n  width: 12px;\n}\n\n.___SScrollAreaBar_twkoc_gg_._orientation_horizontal_twkoc_gg_ {\n  margin-left: calc(var(--left_twkoc) + 4px);\n  margin-right: calc(var(--right_twkoc) + 4px);\n  width: calc(100% - var(--offsetSum_twkoc) - 8px);\n}\n\n.___SHeightHold_twkoc_gg_ {\n  position: absolute;\n  top: 0;\n  width: 100%;\n  pointer-events: none;\n  /* should be under other layers */\n  z-index: -1;\n}\n"
 /*__inner_css_end__*/
-, "mwxpl_gg_")
+, "twkoc_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SDataTable": "___SDataTable_mwxpl_gg_",
-  "__SHeadWrapper": "___SHeadWrapper_mwxpl_gg_",
-  "_sticky": "__sticky_mwxpl_gg_",
-  "__SHead": "___SHead_mwxpl_gg_",
-  "__SColumn": "___SColumn_mwxpl_gg_",
-  "_hidden": "__hidden_mwxpl_gg_",
-  "_use_primary": "_use_primary_mwxpl_gg_",
-  "_use_secondary": "_use_secondary_mwxpl_gg_",
-  "_use": "__use_mwxpl_gg_",
-  "_group": "__group_mwxpl_gg_",
-  "_groupHead": "__groupHead_mwxpl_gg_",
-  "_sortable": "__sortable_mwxpl_gg_",
-  "_active": "__active_mwxpl_gg_",
-  "_resizable": "__resizable_mwxpl_gg_",
-  "_fixed": "__fixed_mwxpl_gg_",
-  "__SSortIcon": "___SSortIcon_mwxpl_gg_",
-  "__SBodyWrapper": "___SBodyWrapper_mwxpl_gg_",
-  "__SBody": "___SBody_mwxpl_gg_",
-  "__SRow": "___SRow_mwxpl_gg_",
-  "__SCell": "___SCell_mwxpl_gg_",
-  "_theme": "__theme_mwxpl_gg_",
-  "__SGroupCell": "___SGroupCell_mwxpl_gg_",
-  "_theme_muted": "_theme_muted_mwxpl_gg_",
-  "_theme_info": "_theme_info_mwxpl_gg_",
-  "_theme_success": "_theme_success_mwxpl_gg_",
-  "_theme_warning": "_theme_warning_mwxpl_gg_",
-  "_theme_danger": "_theme_danger_mwxpl_gg_",
-  "_positioned": "__positioned_mwxpl_gg_",
-  "__SScrollAreaBar": "___SScrollAreaBar_mwxpl_gg_",
-  "_orientation_horizontal": "_orientation_horizontal_mwxpl_gg_",
-  "_orientation_vertical": "_orientation_vertical_mwxpl_gg_",
-  "--left": "--left_mwxpl",
-  "--right": "--right_mwxpl",
-  "--offsetSum": "--offsetSum_mwxpl",
-  "__SHeightHold": "___SHeightHold_mwxpl_gg_"
+  "__SDataTable": "___SDataTable_twkoc_gg_",
+  "__SHeadWrapper": "___SHeadWrapper_twkoc_gg_",
+  "_sticky": "__sticky_twkoc_gg_",
+  "__SHead": "___SHead_twkoc_gg_",
+  "__SColumn": "___SColumn_twkoc_gg_",
+  "_hidden": "__hidden_twkoc_gg_",
+  "_use_primary": "_use_primary_twkoc_gg_",
+  "_use_secondary": "_use_secondary_twkoc_gg_",
+  "_use": "__use_twkoc_gg_",
+  "_group": "__group_twkoc_gg_",
+  "_groupHead": "__groupHead_twkoc_gg_",
+  "_sortable": "__sortable_twkoc_gg_",
+  "_active": "__active_twkoc_gg_",
+  "_resizable": "__resizable_twkoc_gg_",
+  "_fixed": "__fixed_twkoc_gg_",
+  "__SSortIcon": "___SSortIcon_twkoc_gg_",
+  "__SBodyWrapper": "___SBodyWrapper_twkoc_gg_",
+  "__SBody": "___SBody_twkoc_gg_",
+  "__SRow": "___SRow_twkoc_gg_",
+  "__SCell": "___SCell_twkoc_gg_",
+  "_theme": "__theme_twkoc_gg_",
+  "__SGroupCell": "___SGroupCell_twkoc_gg_",
+  "_theme_muted": "_theme_muted_twkoc_gg_",
+  "_theme_info": "_theme_info_twkoc_gg_",
+  "_theme_success": "_theme_success_twkoc_gg_",
+  "_theme_warning": "_theme_warning_twkoc_gg_",
+  "_theme_danger": "_theme_danger_twkoc_gg_",
+  "_positioned": "__positioned_twkoc_gg_",
+  "__SScrollAreaBar": "___SScrollAreaBar_twkoc_gg_",
+  "_orientation_horizontal": "_orientation_horizontal_twkoc_gg_",
+  "_orientation_vertical": "_orientation_vertical_twkoc_gg_",
+  "--left": "--left_twkoc",
+  "--right": "--right_twkoc",
+  "--offsetSum": "--offsetSum_twkoc",
+  "__SHeightHold": "___SHeightHold_twkoc_gg_"
 });
 var REVERSED_SORT_DIRECTION = {
   desc: 'asc',
@@ -241,11 +241,14 @@ var RootDefinitionTable = /*#__PURE__*/function (_Component) {
           sortable: sortable,
           sortDirection: sort[0] === name ? sort[1] : (column === null || column === void 0 ? void 0 : column.sortDirection) || (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),
           columns: columns,
-          props: _objectSpread({
-            name: name,
-            ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /*#__PURE__*/React.createRef(),
-            children: children
-          }, props)
+          props: _objectSpread(_objectSpread({
+            name: name
+          }, props), {}, {
+            // @ts-ignore
+            forwardRef: child.ref,
+            children: children,
+            ref: (column === null || column === void 0 ? void 0 : (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.ref) || /*#__PURE__*/React.createRef()
+          })
         });
       });
       return columnsChildren;

package/lib/es6/DataTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.js","names":["React","createComponent","Component","Root","sstyled","Box","syncScroll","callAllEventHandlers","fire","flattenColumns","Head","Body","REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","RootDefinitionTable","props","createRef","event","column","columns","find","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","scrollBodyRef","scrollHeadRef","Array","isArray","cssVar","style","setProperty","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","isGroup","childrenToColumns","map","join","length","toArray","filter","push","ref","getBoundingClientRect","use","$onSortClick","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","uniqueKey","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","flatRowData","setVarStyle","SDataTable","styles","ComponentDefinition"],"sources":["../../src/DataTable.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, PropGetterFn, Root, sstyled } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n Column,\n NestedCells,\n PropsLayer,\n PseudoChildPropsGetter,\n RowData,\n SortDirection,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n desc: 'asc',\n asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n use: 'primary' \| 'secondary';\n sort: SortDirection[];\n data: RowData[];\n uniqueKey: string;\n};\n\ntype HeadAsProps = {\n children: React.ReactChild;\n};\ntype BodyAsProps = {\n children: React.ReactChild;\n};\n\n/* utils type /\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) \| React.ReactNode;\n};\ntype ReturnEl = React.ReactElement \| null;\ntype ChildRenderFn<Props> = Props & {\n children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/ utils type /\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' \| 'asc'];\nexport type DataTableTheme = 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger';\nexport type DataTableUse = 'primary' \| 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n /* Name of column /\n name: string;\n /* Data of column /\n data: React.ReactNode;\n [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n /* Theme for table\n * @default primary\n * /\n use?: DataTableUse;\n /* Data for table /\n data?: DataTableData[];\n /* Active sort object /\n sort?: DataTableSort;\n /* Handler call when will request change sort /\n onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n /* Field name in one data entity that is unique accross all set of data\n * @default id\n /\n uniqueKey?: string;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n /* Sticky header table\n * @deprecated\n * /\n sticky?: boolean;\n\n /* Hidden header /\n hidden?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n /* Unique name column /\n name?: string;\n /* Enable sort for column also if you pass string you can set default sort /\n sortable?: boolean \| 'desc' \| 'asc';\n /* Enable resize for column\n * @ignore /\n resizable?: boolean;\n /* Fixed column on the left/right /\n fixed?: 'left' \| 'right';\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n /* Rows table /\n rows?: DataTableRow[];\n /* When enabled, only visually acessable rows are rendered.\n * `tollerance` property controls how many rows outside of viewport are render.\n * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.\n * @default { tollerance: 2 }\n /\n virtualScroll?: boolean \| { tollerance?: number; rowHeight?: number };\n /\n Called every time user scrolls area\n /\n onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n /* Theme for row /\n theme?: DataTableTheme;\n /* Displays row as active/hover /\n active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n /* Unique name column or columns separated by / /\n name: string;\n /* Theme for cell */\n theme?: DataTableTheme;\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n static displayName = 'DefinitionTable';\n\n static style = style;\n\n static defaultProps = {\n use: 'primary',\n uniqueKey: 'id',\n sort: [],\n data: [],\n } as AsProps;\n\n columns: Column[] = [];\n\n tableRef = React.createRef<HTMLElement>();\n scrollBodyRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n scrollHeadRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n\n constructor(props: AsProps) {\n super(props);\n\n const createRef = syncScroll();\n // first create body ref for master scroll\n this.scrollBodyRef = createRef('body');\n this.scrollHeadRef = createRef('head');\n }\n\n handlerSortClick = (name: string, event: React.MouseEvent) => {\n const column = this.columns.find((column) => column.name === name)!;\n return fire(\n this,\n 'onSortChange',\n [\n column.name,\n column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n ],\n event,\n );\n };\n\n handlerResize = () => {\n this.forceUpdate();\n };\n\n scrollToUp = () => {\n this.tableRef?.current?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n });\n };\n\n setVarStyle(columns: Column[]) {\n for (const column of columns) {\n if (Array.isArray(column.cssVar)) {\n for (const cssVar of column.cssVar) {\n this.tableRef.current?.style.setProperty(cssVar, `${column.width}px`);\n }\n } else {\n this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);\n }\n }\n }\n\n childrenToColumns(\n children: React.ReactNode,\n options: { fixed?: 'left' \| 'right' } = { fixed: undefined },\n ) {\n const { sort } = this.asProps;\n const columnsChildren: Column[] = [];\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type !== DefinitionTable.Column) return;\n\n let {\n children,\n name,\n fixed = options.fixed,\n resizable,\n sortable,\n ...props\n } = child.props as Column['props'];\n const isGroup = !name;\n let columns: Column[] = [];\n\n if (isGroup) {\n columns = this.childrenToColumns(children, { fixed });\n name = flattenColumns(columns)\n .map(({ name }) => name)\n .join('/');\n if (!columns.length) return;\n children = React.Children.toArray(children).filter(\n (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n );\n }\n\n const column = this.columns.find((column) => column.name === name);\n columnsChildren.push({\n get width() {\n return this.props.ref.current?.getBoundingClientRect().width \|\| 0;\n },\n name,\n cssVar: createCssVarForWidth(name),\n fixed,\n resizable,\n active: sort[0] === name,\n sortable,\n sortDirection:\n sort[0] === name\n ? sort[1]\n : column?.sortDirection \|\|\n (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n columns,\n props: {\n name,\n ref: column?.props?.ref \|\| React.createRef(),\n children,\n ...props,\n },\n });\n });\n return columnsChildren;\n }\n\n getHeadProps(props: HeadAsProps) {\n const { use } = this.asProps;\n const columnsChildren = this.childrenToColumns(props.children);\n this.columns = flattenColumns(columnsChildren);\n return {\n $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n columnsChildren,\n use,\n onResize: this.handlerResize,\n $scrollRef: this.scrollHeadRef,\n };\n }\n\n getBodyProps(props: BodyAsProps) {\n const { data, use, uniqueKey } = this.asProps;\n\n const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n const rowPropsLayers: PropsLayer[] = [];\n\n React.Children.forEach(props.children, (child) => {\n if (React.isValidElement(child)) {\n const { name, children, ...other } = child.props as {\n name?: string;\n children?: PseudoChildPropsGetter;\n } & { [propName: string]: unknown };\n if (child.type === DefinitionTable.Cell && name) {\n name.split('/').forEach((name) => {\n cellPropsLayers[name] = cellPropsLayers[name] \|\| [];\n cellPropsLayers[name].push({\n ...other,\n childrenPropsGetter: children,\n });\n });\n }\n if (child.type === DefinitionTable.Row) {\n rowPropsLayers.push({\n ...other,\n childrenPropsGetter: children,\n });\n }\n }\n });\n\n return {\n columns: this.columns,\n rows: this.dataToRows(data, cellPropsLayers),\n uniqueKey,\n use,\n rowPropsLayers,\n $scrollRef: this.scrollBodyRef,\n };\n }\n\n dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n data.map((row) => {\n const groupByName: {\n [columnName: string]: {\n groupedColumns: string[];\n groupData: { [columnName: string]: unknown };\n };\n } = {};\n const groupedColumns: { [columnname: string]: true } = {};\n const ungroupedColumns: { [columnname: string]: true } = {};\n for (const rowKey in row) {\n const columnNames = rowKey.split('/');\n if (columnNames.length >= 2) {\n for (const column of columnNames) {\n groupByName[column] = {\n groupedColumns: columnNames,\n groupData: row[rowKey] as { [columnName: string]: unknown },\n };\n groupedColumns[rowKey] = true;\n }\n } else {\n ungroupedColumns[rowKey] = true;\n }\n }\n const rowsGroup = row[ROW_GROUP] \|\| [];\n const rowsGroupedNames = Object.fromEntries(\n rowsGroup\n .map((subRow) => Object.keys(subRow))\n .flat()\n .map((key) => [key, true]),\n );\n\n let isGroup = false;\n\n const cells: NestedCells = this.columns\n .map((column) => {\n if (groupByName[column.name]) {\n const { groupedColumns, groupData } = groupByName[column.name];\n if (groupedColumns[0] === column.name) {\n return {\n name: groupedColumns.join('/'),\n cssVar: groupedColumns.map(createCssVarForWidth),\n fixed: column.fixed,\n data: groupData,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n } else if (column.name in row) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: row[column.name],\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n } else if (!isGroup && rowsGroupedNames[column.name]) {\n // TODO: make it work not only with first group\n isGroup = true;\n return parseData(rowsGroup, {\n ...ungroupedColumns,\n ...groupedColumns,\n });\n } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: null,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n })\n .filter((column) => column !== undefined)\n .map((column) => column!);\n\n cells.flatRowData = row;\n return cells;\n });\n\n return parseData(data, {});\n }\n\n componentDidUpdate() {\n this.setVarStyle(this.columns);\n }\n\n render() {\n const SDataTable = Root;\n const { Children, styles, data } = this.asProps;\n\n return sstyled(styles)(\n <SDataTable\n render={Box}\n __excludeProps={['data']}\n ref={this.tableRef}\n role=\"table\"\n aria-rowcount={(data ?? []).length}\n >\n <Children />\n </SDataTable>,\n );\n }\n}\n\ninterface IDataTableCtx {\n getHeadProps: PropGetterFn;\n getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n return null;\n}\n\nconst DefinitionTable = createComponent(\n RootDefinitionTable,\n {\n Head,\n Body,\n Column: ComponentDefinition,\n Cell: ComponentDefinition,\n Row: ComponentDefinition,\n },\n {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable.js","names":["React","createComponent","Component","Root","sstyled","Box","syncScroll","callAllEventHandlers","fire","flattenColumns","Head","Body","REVERSED_SORT_DIRECTION","desc","asc","DEFAULT_SORT_DIRECTION","ROW_GROUP","Symbol","cssVarReg","createCssVarForWidth","name","replace","RootDefinitionTable","props","createRef","event","column","columns","find","active","sortDirection","forceUpdate","tableRef","current","scrollIntoView","block","inline","behavior","scrollBodyRef","scrollHeadRef","Array","isArray","cssVar","style","setProperty","width","children","options","fixed","undefined","sort","asProps","columnsChildren","Children","forEach","child","isValidElement","type","DefinitionTable","Column","resizable","sortable","isGroup","childrenToColumns","map","join","length","toArray","filter","push","ref","getBoundingClientRect","forwardRef","use","$onSortClick","handlerSortClick","scrollToUp","onResize","handlerResize","$scrollRef","data","uniqueKey","cellPropsLayers","rowPropsLayers","other","Cell","split","childrenPropsGetter","Row","rows","dataToRows","parseData","exclude","row","groupByName","groupedColumns","ungroupedColumns","rowKey","columnNames","groupData","rowsGroup","rowsGroupedNames","Object","fromEntries","subRow","keys","flat","key","cells","flatRowData","setVarStyle","SDataTable","styles","ComponentDefinition"],"sources":["../../src/DataTable.tsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, PropGetterFn, Root, sstyled } from '@semcore/core';\nimport { Box, IBoxProps, IFlexProps } from '@semcore/flex-box';\nimport syncScroll from '@semcore/utils/lib/syncScroll';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport fire from '@semcore/utils/lib/fire';\nimport { flattenColumns } from './utils';\nimport type {\n Column,\n NestedCells,\n PropsLayer,\n PseudoChildPropsGetter,\n RowData,\n SortDirection,\n} from './types';\nimport Head from './Head';\nimport Body from './Body';\n\nimport style from './style/data-table.shadow.css';\n\nconst REVERSED_SORT_DIRECTION: { [direction in SortDirection]: SortDirection } = {\n desc: 'asc',\n asc: 'desc',\n};\nconst DEFAULT_SORT_DIRECTION: SortDirection = 'desc';\n\nconst ROW_GROUP = Symbol('ROW_GROUP');\n\nconst cssVarReg = /[:;]/g;\n\nconst createCssVarForWidth = (name: string) => {\n return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\ntype AsProps = {\n use: 'primary' \| 'secondary';\n sort: SortDirection[];\n data: RowData[];\n uniqueKey: string;\n};\n\ntype HeadAsProps = {\n children: React.ReactChild;\n};\ntype BodyAsProps = {\n children: React.ReactChild;\n};\n\n/* utils type /\ntype CProps<Props, Ctx = {}, UCProps = {}> = Props & {\n children?: ((props: Props & Ctx, handlers: UCProps) => React.ReactNode) \| React.ReactNode;\n};\ntype ReturnEl = React.ReactElement \| null;\ntype ChildRenderFn<Props> = Props & {\n children?: (props: Props, column: DataTableData, index: number) => { [key: string]: unknown };\n};\n/ utils type /\n\nexport type DataTableData = { [key: string]: unknown };\nexport type DataTableSort = [string, 'desc' \| 'asc'];\nexport type DataTableTheme = 'muted' \| 'info' \| 'success' \| 'warning' \| 'danger';\nexport type DataTableUse = 'primary' \| 'secondary';\nexport type DataTableRow = DataTableCell[];\nexport type DataTableCell = {\n /* Name of column /\n name: string;\n /* Data of column /\n data: React.ReactNode;\n [key: string]: unknown;\n};\n\nexport interface IDataTableProps extends IBoxProps {\n /* Theme for table\n * @default primary\n * /\n use?: DataTableUse;\n /* Data for table /\n data?: DataTableData[];\n /* Active sort object /\n sort?: DataTableSort;\n /* Handler call when will request change sort /\n onSortChange?: (sort: DataTableSort, e?: React.SyntheticEvent) => void;\n /* Field name in one data entity that is unique accross all set of data\n * @default id\n /\n uniqueKey?: string;\n}\n\nexport interface IDataTableHeadProps extends IBoxProps {\n /* Sticky header table\n * @deprecated\n * /\n sticky?: boolean;\n\n /* Hidden header /\n hidden?: boolean;\n}\n\nexport interface IDataTableColumnProps extends IFlexProps {\n /* Unique name column /\n name?: string;\n /* Enable sort for column also if you pass string you can set default sort /\n sortable?: boolean \| 'desc' \| 'asc';\n /* Enable resize for column\n * @ignore /\n resizable?: boolean;\n /* Fixed column on the left/right /\n fixed?: 'left' \| 'right';\n}\n\nexport interface IDataTableBodyProps extends IBoxProps {\n /* Rows table /\n rows?: DataTableRow[];\n /* When enabled, only visually acessable rows are rendered.\n * `tollerance` property controls how many rows outside of viewport are render.\n * `rowHeight` fixes the rows height if it known. If not provided, first row node height is measured.\n * @default { tollerance: 2 }\n /\n virtualScroll?: boolean \| { tollerance?: number; rowHeight?: number };\n /\n Called every time user scrolls area\n /\n onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;\n}\n\nexport interface IDataTableRowProps extends IBoxProps {\n /* Theme for row /\n theme?: DataTableTheme;\n /* Displays row as active/hover /\n active?: boolean;\n}\n\nexport interface IDataTableCellProps extends IFlexProps {\n /* Unique name column or columns separated by / /\n name: string;\n /* Theme for cell */\n theme?: DataTableTheme;\n}\n\nclass RootDefinitionTable extends Component<AsProps> {\n static displayName = 'DefinitionTable';\n\n static style = style;\n\n static defaultProps = {\n use: 'primary',\n uniqueKey: 'id',\n sort: [],\n data: [],\n } as AsProps;\n\n columns: Column[] = [];\n\n tableRef = React.createRef<HTMLElement>();\n scrollBodyRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n scrollHeadRef: null \| ReturnType<ReturnType<typeof syncScroll>> = null;\n\n constructor(props: AsProps) {\n super(props);\n\n const createRef = syncScroll();\n // first create body ref for master scroll\n this.scrollBodyRef = createRef('body');\n this.scrollHeadRef = createRef('head');\n }\n\n handlerSortClick = (name: string, event: React.MouseEvent) => {\n const column = this.columns.find((column) => column.name === name)!;\n return fire(\n this,\n 'onSortChange',\n [\n column.name,\n column.active ? REVERSED_SORT_DIRECTION[column.sortDirection] : column.sortDirection,\n ],\n event,\n );\n };\n\n handlerResize = () => {\n this.forceUpdate();\n };\n\n scrollToUp = () => {\n this.tableRef?.current?.scrollIntoView({\n block: 'nearest',\n inline: 'nearest',\n behavior: 'smooth',\n });\n };\n\n setVarStyle(columns: Column[]) {\n for (const column of columns) {\n if (Array.isArray(column.cssVar)) {\n for (const cssVar of column.cssVar) {\n this.tableRef.current?.style.setProperty(cssVar, `${column.width}px`);\n }\n } else {\n this.tableRef.current?.style.setProperty(column.cssVar, `${column.width}px`);\n }\n }\n }\n\n childrenToColumns(\n children: React.ReactNode,\n options: { fixed?: 'left' \| 'right' } = { fixed: undefined },\n ) {\n const { sort } = this.asProps;\n const columnsChildren: Column[] = [];\n React.Children.forEach(children, (child) => {\n if (!React.isValidElement(child)) return;\n if (child.type !== DefinitionTable.Column) return;\n\n let {\n children,\n name,\n fixed = options.fixed,\n resizable,\n sortable,\n ...props\n } = child.props as Column['props'];\n const isGroup = !name;\n let columns: Column[] = [];\n\n if (isGroup) {\n columns = this.childrenToColumns(children, { fixed });\n name = flattenColumns(columns)\n .map(({ name }) => name)\n .join('/');\n if (!columns.length) return;\n children = React.Children.toArray(children).filter(\n (child) => !(React.isValidElement(child) && child.type === DefinitionTable.Column),\n );\n }\n\n const column = this.columns.find((column) => column.name === name);\n columnsChildren.push({\n get width() {\n return this.props.ref.current?.getBoundingClientRect().width \|\| 0;\n },\n name,\n cssVar: createCssVarForWidth(name),\n fixed,\n resizable,\n active: sort[0] === name,\n sortable,\n sortDirection:\n sort[0] === name\n ? sort[1]\n : column?.sortDirection \|\|\n (typeof sortable == 'string' ? sortable : DEFAULT_SORT_DIRECTION),\n columns,\n props: {\n name,\n ...props,\n // @ts-ignore\n forwardRef: child.ref,\n children,\n ref: column?.props?.ref \|\| React.createRef(),\n },\n });\n });\n return columnsChildren;\n }\n\n getHeadProps(props: HeadAsProps) {\n const { use } = this.asProps;\n const columnsChildren = this.childrenToColumns(props.children);\n this.columns = flattenColumns(columnsChildren);\n return {\n $onSortClick: callAllEventHandlers(this.handlerSortClick, this.scrollToUp),\n columnsChildren,\n use,\n onResize: this.handlerResize,\n $scrollRef: this.scrollHeadRef,\n };\n }\n\n getBodyProps(props: BodyAsProps) {\n const { data, use, uniqueKey } = this.asProps;\n\n const cellPropsLayers: { [columnName: string]: PropsLayer[] } = {};\n const rowPropsLayers: PropsLayer[] = [];\n\n React.Children.forEach(props.children, (child) => {\n if (React.isValidElement(child)) {\n const { name, children, ...other } = child.props as {\n name?: string;\n children?: PseudoChildPropsGetter;\n } & { [propName: string]: unknown };\n if (child.type === DefinitionTable.Cell && name) {\n name.split('/').forEach((name) => {\n cellPropsLayers[name] = cellPropsLayers[name] \|\| [];\n cellPropsLayers[name].push({\n ...other,\n childrenPropsGetter: children,\n });\n });\n }\n if (child.type === DefinitionTable.Row) {\n rowPropsLayers.push({\n ...other,\n childrenPropsGetter: children,\n });\n }\n }\n });\n\n return {\n columns: this.columns,\n rows: this.dataToRows(data, cellPropsLayers),\n uniqueKey,\n use,\n rowPropsLayers,\n $scrollRef: this.scrollBodyRef,\n };\n }\n\n dataToRows(data: RowData[], cellPropsLayers: { [columnName: string]: PropsLayer[] }) {\n const parseData = (data: RowData[], exclude: { [columnName: string]: true }) =>\n data.map((row) => {\n const groupByName: {\n [columnName: string]: {\n groupedColumns: string[];\n groupData: { [columnName: string]: unknown };\n };\n } = {};\n const groupedColumns: { [columnname: string]: true } = {};\n const ungroupedColumns: { [columnname: string]: true } = {};\n for (const rowKey in row) {\n const columnNames = rowKey.split('/');\n if (columnNames.length >= 2) {\n for (const column of columnNames) {\n groupByName[column] = {\n groupedColumns: columnNames,\n groupData: row[rowKey] as { [columnName: string]: unknown },\n };\n groupedColumns[rowKey] = true;\n }\n } else {\n ungroupedColumns[rowKey] = true;\n }\n }\n const rowsGroup = row[ROW_GROUP] \|\| [];\n const rowsGroupedNames = Object.fromEntries(\n rowsGroup\n .map((subRow) => Object.keys(subRow))\n .flat()\n .map((key) => [key, true]),\n );\n\n let isGroup = false;\n\n const cells: NestedCells = this.columns\n .map((column) => {\n if (groupByName[column.name]) {\n const { groupedColumns, groupData } = groupByName[column.name];\n if (groupedColumns[0] === column.name) {\n return {\n name: groupedColumns.join('/'),\n cssVar: groupedColumns.map(createCssVarForWidth),\n fixed: column.fixed,\n data: groupData,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n } else if (column.name in row) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: row[column.name],\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n } else if (!isGroup && rowsGroupedNames[column.name]) {\n // TODO: make it work not only with first group\n isGroup = true;\n return parseData(rowsGroup, {\n ...ungroupedColumns,\n ...groupedColumns,\n });\n } else if (!exclude[column.name] && !rowsGroupedNames[column.name]) {\n return {\n name: column.name,\n cssVar: column.cssVar,\n fixed: column.fixed,\n data: null,\n cellPropsLayers: cellPropsLayers[column.name] \|\| [],\n };\n }\n })\n .filter((column) => column !== undefined)\n .map((column) => column!);\n\n cells.flatRowData = row;\n return cells;\n });\n\n return parseData(data, {});\n }\n\n componentDidUpdate() {\n this.setVarStyle(this.columns);\n }\n\n render() {\n const SDataTable = Root;\n const { Children, styles, data } = this.asProps;\n\n return sstyled(styles)(\n <SDataTable\n render={Box}\n __excludeProps={['data']}\n ref={this.tableRef}\n role=\"table\"\n aria-rowcount={(data ?? []).length}\n >\n <Children />\n </SDataTable>,\n );\n }\n}\n\ninterface IDataTableCtx {\n getHeadProps: PropGetterFn;\n getBodyProps: PropGetterFn;\n}\n\nfunction ComponentDefinition() {\n return null;\n}\n\nconst DefinitionTable = createComponent(\n RootDefinitionTable,\n {\n Head,\n Body,\n Column: ComponentDefinition,\n Cell: ComponentDefinition,\n Row: ComponentDefinition,\n },\n {},\n) as (<T>(props: CProps<IDataTableProps & T, IDataTableCtx>) => ReturnEl) & {\n Head: <T>(props: IDataTableHeadProps & T) => ReturnEl;\n Body: <T>(props: IDataTableBodyProps & T) => ReturnEl;\n Column: <T>(props: IDataTableColumnProps & T) => ReturnEl;\n Cell: <T>(props: ChildRenderFn<IDataTableCellProps & T>) => ReturnEl;\n Row: <T>(props: ChildRenderFn<IDataTableRowProps & T>) => ReturnEl;\n};\n\nexport { ROW_GROUP };\nexport default DefinitionTable;\n"],"mappings":"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"}

package/lib/es6/Head.js CHANGED Viewed

@@ -26,6 +26,7 @@ import SortAsc from '@semcore/icon/SortAsc/m';
 import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 import { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';
 import logger from '@semcore/utils/lib/logger';
+import { setRef } from '@semcore/utils/lib/ref';
 import 'resize-observer-polyfill';
 /*__reshadow-styles__:"./style/scroll-area.shadow.css"*/
@@ -33,14 +34,14 @@ var scrollStyles = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SShadowHorizontal_qyxht_gg_:before {\n  left: var(--left_qyxht) !important;\n}\n.___SShadowHorizontal_qyxht_gg_:after {\n  right: var(--right_qyxht) !important;\n}\n"
+".___SShadowHorizontal_2bakh_gg_:before {\n  left: var(--left_2bakh) !important;\n}\n.___SShadowHorizontal_2bakh_gg_:after {\n  right: var(--right_2bakh) !important;\n}\n"
 /*__inner_css_end__*/
-, "qyxht_gg_")
+, "2bakh_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SShadowHorizontal": "___SShadowHorizontal_qyxht_gg_",
-  "--left": "--left_qyxht",
-  "--right": "--right_qyxht"
+  "__SShadowHorizontal": "___SShadowHorizontal_2bakh_gg_",
+  "--left": "--left_2bakh",
+  "--right": "--right_2bakh"
 });
 var SORTING_ICON = {
   desc: SortDesc,
@@ -83,6 +84,16 @@ var Head = /*#__PURE__*/function (_Component) {
       };
     });
+    _defineProperty(_assertThisInitialized(_this), "refColumn", function (props) {
+      return function (ref) {
+        setRef(props.ref, ref);
+        if (props.forwardRef) {
+          setRef(props.forwardRef, ref);
+        }
+      };
+    });
     return _this;
   }
@@ -135,6 +146,7 @@ var Head = /*#__PURE__*/function (_Component) {
         "group": isGroup,
         "tabIndex": column.sortable && 0
       }, column.props), {}, {
+        "ref": this.refColumn(column.props),
         "onClick": callAllEventHandlers(column.props.onClick, column.sortable ? this.bindHandlerSortClick(column.name) : undefined),
         "onKeyDown": callAllEventHandlers(column.props.onKeyDown, column.sortable ? this.bindHandlerKeyDown(column.name) : undefined),
         "style": style,

package/lib/es6/Head.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Head.js","names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","SORTING_ICON","desc","asc","ariaSort","Head","name","event","asProps","$onSortClick","code","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","length","cSize","value","style","flexBasis","props","flex","fixed","resizable","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","SHeadWrapper","Children","columnsChildren","onResize","$scrollRef","sticky","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n desc: SortDesc,\n asc: SortAsc,\n} as const;\nconst ariaSort = {\n desc: 'descending',\n asc: 'ascending',\n} as const;\n\ntype AsProps = {\n $onSortClick: (name: string, event: React.MouseEvent \| React.KeyboardEvent) => void;\n $scrollRef: (instance: unknown) => void;\n use: 'primary' \| 'secondary';\n columnsChildren: Column[];\n onResize: ResizeObserverCallback;\n sticky: boolean;\n ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n columns: Column[] = [];\n\n static displayName: string;\n\n bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n this.asProps.$onSortClick(name, event);\n };\n\n bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n if (event.code === 'Enter') {\n this.asProps.$onSortClick(name, event);\n }\n };\n\n renderColumns(columns: Column[], width: number) {\n return columns.map((column) => this.renderColumn(column, width));\n }\n\n renderColumn(column: Column, width: number) {\n const { styles, use, hidden } = this.asProps;\n const SColumn = Flex;\n const SHead = Box;\n const SSortIcon = SORTING_ICON[column.sortDirection];\n const ariaSortValue =\n column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n const isGroup = column.columns?.length > 0;\n const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n const [name, value] = getFixedStyle(column, this.columns);\n\n const style = {\n flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n ...column.props.style,\n };\n\n if (name !== undefined && value !== undefined) {\n style[name] = value;\n }\n\n return sstyled(styles)(\n <SColumn\n role={isGroup ? undefined : 'columnheader'}\n key={column.name}\n use={use}\n fixed={column.fixed}\n resizable={column.resizable}\n sortable={column.sortable}\n active={column.active}\n group={isGroup}\n tabIndex={column.sortable && 0}\n {...column.props}\n onClick={callAllEventHandlers(\n column.props.onClick,\n column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n )}\n onKeyDown={callAllEventHandlers(\n column.props.onKeyDown,\n column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n )}\n style={style}\n hidden={hidden}\n aria-sort={ariaSortValue}\n >\n {isGroup ? (\n <>\n <SColumn role=\"columnheader\" groupHead use={use}>\n <div>{column.props.children}</div>\n </SColumn>\n <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n </>\n ) : (\n <>\n <div>{column.props.children}</div>\n {column.sortable ? <SSortIcon active={column.active} /> : null}\n </>\n )}\n </SColumn>,\n );\n }\n\n render() {\n const SHead = Root;\n const SHeadWrapper = Box;\n const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n\n this.columns = flattenColumns(columnsChildren);\n\n const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n logger.warn(\n sticky,\n \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n this.asProps['data-ui-name'] \|\| Head.displayName,\n );\n\n return sstyled(styles)(\n <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n <ScrollArea\n styles={scrollStyles}\n use:left={`${offsetLeftSum}px`}\n use:right={`${offsetRightSum}px`}\n shadow\n onResize={onResize}\n >\n <ScrollArea.Container ref={$scrollRef}>\n <SHead render={Box} role=\"row\">\n {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n </SHead>\n </ScrollArea.Container>\n </ScrollArea>\n {Children.origin}\n </SHeadWrapper>,\n );\n }\n}\n\nexport default Head;\n"],"mappings":"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"}
1	+ {"version":3,"file":"Head.js","names":["React","Component","sstyled","Root","Box","Flex","ScrollArea","SortDesc","SortAsc","callAllEventHandlers","flattenColumns","getFixedStyle","getScrollOffsetValue","logger","setRef","SORTING_ICON","desc","asc","ariaSort","Head","name","event","asProps","$onSortClick","code","props","ref","forwardRef","columns","width","map","column","renderColumn","styles","use","hidden","SColumn","SHead","SSortIcon","sortDirection","ariaSortValue","sortable","active","undefined","isGroup","length","cSize","value","style","flexBasis","flex","fixed","resizable","refColumn","onClick","bindHandlerSortClick","onKeyDown","bindHandlerKeyDown","children","renderColumns","SHeadWrapper","Children","columnsChildren","onResize","$scrollRef","sticky","offsetLeftSum","offsetRightSum","warn","displayName","scrollStyles","origin"],"sources":["../../src/Head.tsx"],"sourcesContent":["import React from 'react';\nimport { Component, sstyled, Root } from '@semcore/core';\nimport { Box, Flex } from '@semcore/flex-box';\nimport ScrollArea from '@semcore/scroll-area';\nimport SortDesc from '@semcore/icon/SortDesc/m';\nimport SortAsc from '@semcore/icon/SortAsc/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport { flattenColumns, getFixedStyle, getScrollOffsetValue } from './utils';\nimport type { Column } from './types';\nimport logger from '@semcore/utils/lib/logger';\nimport { setRef } from '@semcore/utils/lib/ref';\nimport 'resize-observer-polyfill';\n\nimport scrollStyles from './style/scroll-area.shadow.css';\n\nconst SORTING_ICON = {\n desc: SortDesc,\n asc: SortAsc,\n} as const;\nconst ariaSort = {\n desc: 'descending',\n asc: 'ascending',\n} as const;\n\ntype AsProps = {\n $onSortClick: (name: string, event: React.MouseEvent \| React.KeyboardEvent) => void;\n $scrollRef: (instance: unknown) => void;\n use: 'primary' \| 'secondary';\n columnsChildren: Column[];\n onResize: ResizeObserverCallback;\n sticky: boolean;\n ['data-ui-name']: string;\n};\n\nclass Head extends Component<AsProps> {\n columns: Column[] = [];\n\n static displayName: string;\n\n bindHandlerSortClick = (name: string) => (event: React.MouseEvent) => {\n this.asProps.$onSortClick(name, event);\n };\n\n bindHandlerKeyDown = (name: string) => (event: React.KeyboardEvent) => {\n if (event.code === 'Enter') {\n this.asProps.$onSortClick(name, event);\n }\n };\n\n refColumn = (props: Column['props']) => (ref: HTMLElement) => {\n setRef(props.ref, ref);\n if (props.forwardRef) {\n setRef(props.forwardRef, ref);\n }\n };\n\n renderColumns(columns: Column[], width: number) {\n return columns.map((column) => this.renderColumn(column, width));\n }\n\n renderColumn(column: Column, width: number) {\n const { styles, use, hidden } = this.asProps;\n const SColumn = Flex;\n const SHead = Box;\n const SSortIcon = SORTING_ICON[column.sortDirection];\n const ariaSortValue =\n column.sortable && column.active ? ariaSort[column.sortDirection] : undefined;\n const isGroup = column.columns?.length > 0;\n const cSize = isGroup ? flattenColumns(column.columns).length : 1;\n const [name, value] = getFixedStyle(column, this.columns);\n\n const style = {\n flexBasis: column.props.flex === undefined && `${width * cSize}%`,\n ...column.props.style,\n };\n\n if (name !== undefined && value !== undefined) {\n style[name] = value;\n }\n\n return sstyled(styles)(\n <SColumn\n role={isGroup ? undefined : 'columnheader'}\n key={column.name}\n use={use}\n fixed={column.fixed}\n resizable={column.resizable}\n sortable={column.sortable}\n active={column.active}\n group={isGroup}\n tabIndex={column.sortable && 0}\n {...column.props}\n ref={this.refColumn(column.props)}\n onClick={callAllEventHandlers(\n column.props.onClick,\n column.sortable ? this.bindHandlerSortClick(column.name) : undefined,\n )}\n onKeyDown={callAllEventHandlers(\n column.props.onKeyDown,\n column.sortable ? this.bindHandlerKeyDown(column.name) : undefined,\n )}\n style={style}\n hidden={hidden}\n aria-sort={ariaSortValue}\n >\n {isGroup ? (\n <>\n <SColumn role=\"columnheader\" groupHead use={use}>\n <div>{column.props.children}</div>\n </SColumn>\n <SHead>{this.renderColumns(column.columns, 100 / cSize)}</SHead>\n </>\n ) : (\n <>\n <div>{column.props.children}</div>\n {column.sortable ? <SSortIcon active={column.active} /> : null}\n </>\n )}\n </SColumn>,\n );\n }\n\n render() {\n const SHead = Root;\n const SHeadWrapper = Box;\n const { Children, styles, columnsChildren, onResize, $scrollRef, sticky } = this.asProps;\n\n this.columns = flattenColumns(columnsChildren);\n\n const [offsetLeftSum, offsetRightSum] = getScrollOffsetValue(this.columns);\n\n logger.warn(\n sticky,\n \"'sticky' property is deprecated, use '<Sticky/>' wrapper\",\n this.asProps['data-ui-name'] \|\| Head.displayName,\n );\n\n return sstyled(styles)(\n <SHeadWrapper sticky={sticky} role=\"rowgroup\">\n <ScrollArea\n styles={scrollStyles}\n use:left={`${offsetLeftSum}px`}\n use:right={`${offsetRightSum}px`}\n shadow\n onResize={onResize}\n >\n <ScrollArea.Container ref={$scrollRef}>\n <SHead render={Box} role=\"row\">\n {this.renderColumns(columnsChildren, 100 / this.columns.length)}\n </SHead>\n </ScrollArea.Container>\n </ScrollArea>\n {Children.origin}\n </SHeadWrapper>,\n );\n }\n}\n\nexport default Head;\n"],"mappings":"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"}

package/lib/es6/types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"types.js","names":["ROW_GROUP"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\n\nexport type PseudoChildPropsGetter = (\n props: { [propName: string]: unknown },\n rowData: { [columnName: string]: unknown },\n index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n childrenPropsGetter?: PseudoChildPropsGetter;\n [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' \| 'desc';\nexport type Column<\n Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n name: string;\n active: boolean;\n width: number;\n fixed?: 'left' \| 'right';\n resizable?: boolean;\n sortable?: boolean \| SortDirection;\n sortDirection: SortDirection;\n cssVar: string \| string[];\n data?: unknown;\n props: {\n name: string;\n } & Partial<{\n onClick: (event: React.MouseEvent) => void;\n onKeyDown: (event: React.KeyboardEvent) => void;\n ~~ref~~: React.~~RefObject~~<HTMLElement>;\n style: React.CSSProperties;\n fixed: 'left' \| 'right';\n children: React.ReactNode[];\n resizable: boolean;\n sortable: boolean \| SortDirection;\n sortDirection: SortDirection;\n }> &\n Props;\n columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' \| 'cssVar' \| 'fixed' \| 'data'> & {\n cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n Partial<{\n name: string;\n [ROW_GROUP]: RowData[];\n }>;\nexport type NestedCells = (Cell \| NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":"AACA,SAASA,SAAT,QAA0B,aAA1B"}
1	+ {"version":3,"file":"types.js","names":["ROW_GROUP"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\n\nexport type PseudoChildPropsGetter = (\n props: { [propName: string]: unknown },\n rowData: { [columnName: string]: unknown },\n index: number,\n) => { [propName: string]: unknown };\nexport type PropsLayer = {\n childrenPropsGetter?: PseudoChildPropsGetter;\n [propName: string]: unknown;\n};\n\nexport type SortDirection = 'asc' \| 'desc';\nexport type Column<\n Props extends { [propName: string]: unknown } = { [propName: string]: unknown },\n> = {\n name: string;\n active: boolean;\n width: number;\n fixed?: 'left' \| 'right';\n resizable?: boolean;\n sortable?: boolean \| SortDirection;\n sortDirection: SortDirection;\n cssVar: string \| string[];\n data?: unknown;\n props: {\n name: string;\n ref: React.RefObject<HTMLElement>;\n } & Partial<{\n onClick: (event: React.MouseEvent) => void;\n onKeyDown: (event: React.KeyboardEvent) => void;\n forwardRef: React.Ref<HTMLElement>;\n style: React.CSSProperties;\n fixed: 'left' \| 'right';\n children: React.ReactNode[];\n resizable: boolean;\n sortable: boolean \| SortDirection;\n sortDirection: SortDirection;\n }> &\n Props;\n columns: Column[];\n};\nexport type Cell = Pick<Column, 'name' \| 'cssVar' \| 'fixed' \| 'data'> & {\n cellPropsLayers: PropsLayer[];\n};\nexport type RowData<\n Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },\n> = Data &\n Partial<{\n name: string;\n [ROW_GROUP]: RowData[];\n }>;\nexport type NestedCells = (Cell \| NestedCells)[] & { flatRowData?: RowData };\n"],"mappings":"AACA,SAASA,SAAT,QAA0B,aAA1B"}

package/lib/types/Head.d.ts CHANGED Viewed

@@ -16,6 +16,7 @@ declare class Head extends Component<AsProps> {
     static displayName: string;
     bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
     bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => void;
+    refColumn: (props: Column['props']) => (ref: HTMLElement) => void;
     renderColumns(columns: Column[], width: number): React.ReactNode[];
     renderColumn(column: Column, width: number): React.ReactNode;
     render(): React.ReactNode;

package/lib/types/types.d.ts CHANGED Viewed

@@ -28,10 +28,11 @@ export declare type Column<Props extends {
     data?: unknown;
     props: {
         name: string;
+        ref: React.RefObject<HTMLElement>;
     } & Partial<{
         onClick: (event: React.MouseEvent) => void;
         onKeyDown: (event: React.KeyboardEvent) => void;
-        ref: React.RefObject<HTMLElement>;
+        forwardRef: React.Ref<HTMLElement>;
         style: React.CSSProperties;
         fixed: 'left' | 'right';
         children: React.ReactNode[];

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "3.1.15",
+  "version": "3.3.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -10,13 +10,13 @@
   "license": "MIT",
   "dependencies": {
     "@semcore/flex-box": "^4",
-    "@semcore/icon": "^2.16",
+    "@semcore/icon": "2.16 - 3",
     "@semcore/scroll-area": "^4.0.0",
     "@semcore/utils": "^3.22",
     "resize-observer-polyfill": "^1.5"
   },
   "devDependencies": {
-    "@types/react": "16.8 - 17",
+    "@types/react": "18.0.21",
     "@semcore/jest-preset-ui": "1.0.0",
     "@guidepup/playwright": "0.6.1",
     "@playwright/test": "1.25.1",
@@ -29,15 +29,16 @@
     "@semcore/portal": "*",
     "@semcore/progress-bar": "*",
     "@semcore/skeleton": "*",
-    "@semcore/spin": "^4",
+    "@semcore/spin": "*",
     "@semcore/spin-container": "*",
     "@semcore/sticky": "*",
     "@semcore/tooltip": "*",
-    "@types/node": "^17.0.45"
+    "@types/node": "^17.0.45",
+    "jest": "29.0.1"
   },
   "peerDependencies": {
     "@semcore/core": "^1.11",
-    "react": "16.8 - 17"
+    "react": "16.8 - 18"
   },
   "jest": {
     "preset": "@semcore/jest-preset-ui"