@semcore/data-table 16.0.0-prerelease.13 → 16.0.0-prerelease.15

package/lib/cjs/style/data-table.shadow.css

@@ -0,0 +1,394 @@
+SDataTable {
+  position: relative;
+}
+
+SDataTable[compact] {
+  & SColumn,
+  & SCell {
+    padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+  }
+}
+
+SHeadWrapper {
+  position: relative;
+}
+
+SHeadWrapper[animationsDisabled] {
+  SColumn {
+    transition: none;
+  }
+}
+
+SHeadWrapper[sticky] {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+SHead {
+  display: flex;
+  position: relative;
+  flex-direction: row;
+  min-width: fit-content;
+  z-index: 0;
+}
+
+SColumn {
+  display: flex;
+  align-items: flex-start;
+  flex-grow: 1;
+  font-size: var(--intergalactic-fs-100, 12px);
+  line-height: var(--intergalactic-lh-100, 133%);
+  color: var(--intergalactic-text-primary, #191b23);
+  box-sizing: border-box;
+  position: relative;
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, min-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out, max-width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+}
+
+SColumn[hidden] {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}
+
+SColumn[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
+}
+
+SColumn[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+  border-bottom: 1px solid var(--intergalactic-border-table-accent, #a9abb6);
+  background-color: var(--intergalactic-table-th-secondary-cell, #ffffff);
+}
+
+SColumn[group][use] {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: normal;
+  border-bottom: none;
+  padding: 0;
+}
+
+SColumn[groupHead] {
+  justify-content: center;
+  /* for resizable */
+  z-index: 1;
+  border-bottom: none;
+}
+
+SColumn[sortable] {
+  cursor: pointer;
+
+  &[use='primary']:hover, &[use='primary']:focus {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+  }
+
+  &[justifyContent='right']:hover SSortWrapper, &[justifyContent='right']:focus SSortWrapper {
+    position: absolute;
+    flex-basis: 0;
+    right: var(--intergalactic-spacing-3x, 12px);
+  }
+  &[justifyContent='right'][active] SSortWrapper {
+    position: relative;
+    flex-basis: inherit;
+    right: 0;
+  }
+
+  &:hover SSortWrapper, &:focus SSortWrapper, &[active] SSortWrapper {
+    flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+    opacity: 1;
+  }
+
+  &:hover SSortWrapper:before, &:focus SSortWrapper:before, &[active] SSortWrapper:before {
+    display: block;
+    opacity: 1;
+  }
+
+  &:hover SSortIcon, &:focus SSortIcon {
+    display: block;
+    opacity: 1;
+  }
+}
+
+SColumn[use='primary'][active] {
+  background-color: var(--intergalactic-table-th-primary-cell-active, #e0e1e9);
+  width: 100%;
+}
+
+SColumn[active] SSortIcon {
+  display: block;
+  opacity: 1;
+}
+
+SColumn[resizable] {
+  border-right: 1px solid transparent;
+
+  &:hover:after {
+    border-right-color: var(--intergalactic-border-table-accent, #a9abb6);
+  }
+
+  &:after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    right: -1px;
+    height: 100%;
+    width: 5px;
+    background: transparent;
+    cursor: col-resize;
+    border-right: 1px solid transparent;
+  }
+}
+
+SColumn[fixed] {
+  position: sticky;
+  /* because up resizable */
+  z-index: 2;
+}
+
+SColumn[borderLeft],
+SCell[borderLeft] {
+  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SColumn[borderRight],
+SCell[borderRight] {
+  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SSortWrapper {
+  flex-shrink: 1;
+  position: relative;
+  flex-basis: 0;
+  min-height: 16px;
+  opacity: 0;
+  transition: all calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+}
+
+SSortWrapper:before {
+  display: none;
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 20px;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SSortIcon {
+  display: none;
+  fill: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
+  position: absolute;
+  top: calc(1em * 1.25 - 16px);
+  right: 0;
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SColumn[use='primary'] SSortWrapper:before {
+  background: linear-gradient(
+    270deg,
+    var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
+    rgba(224, 225, 233, 0) 105%
+  );
+}
+
+SColumn[use='secondary'] SSortWrapper:before {
+  background: linear-gradient(
+    270deg,
+    var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
+    rgba(255, 255, 255, 0) 105%
+  );
+}
+
+SBodyWrapper {
+  position: relative;
+}
+
+SBody {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  min-width: fit-content;
+}
+
+SRow {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+}
+
+/* DEFAULT THEME */
+SRow[active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow:hover > SCell:not([theme]),
+SRow SCell:hover + SGroupCell SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+}
+
+/* MUTED THEME */
+SRow[theme='muted'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SRow[theme='muted'][active] > SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-active, #e6e7ed);
+}
+
+SRow:hover > SCell[theme='muted'],
+SRow[theme='muted']:hover > SCell:not([theme]),
+SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
+  /* The color is hardcoded because need hex(in figma rgba) */
+  /* disable-tokens-validator */
+  background-color: var(--intergalactic-table-td-cell-hover, #f0f0f4);
+}
+
+/* INFO THEME */
+SRow[theme='info'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SRow[theme='info'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected-active, #c4e5fe);
+}
+
+SRow:hover > SCell[theme='info'],
+SRow[theme='info']:hover > SCell:not([theme]),
+SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-selected-hover, #c4e5fe);
+}
+
+/* SUCCESS THEME */
+SRow[theme='success'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SRow[theme='success'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new-active, #9ef2c9);
+}
+
+SRow:hover > SCell[theme='success'],
+SRow[theme='success']:hover > SCell:not([theme]),
+SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-new-hover, #9ef2c9);
+}
+
+/* WARNING THEME */
+SRow[theme='warning'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SRow[theme='warning'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning-active, #ffdca2);
+}
+
+SRow:hover > SCell[theme='warning'],
+SRow[theme='warning']:hover > SCell:not([theme]),
+SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-warning-hover, #ffdca2);
+}
+
+/* DANGER THEME */
+SRow[theme='danger'] SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SRow[theme='danger'][active] > SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical-active, #ffd7df);
+}
+
+SRow:hover > SCell[theme='danger'],
+SRow[theme='danger']:hover > SCell:not([theme]),
+SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
+  background-color: var(--intergalactic-table-td-cell-critical-hover, #ffd7df);
+}
+
+SRow[positioned] {
+  position: absolute;
+}
+
+SBody[animationsDisabled] SCell {
+  transition: none;
+}
+
+SCell {
+  display: flex;
+  flex: 1;
+  flex-basis: auto;
+  font-size: var(--intergalactic-fs-200, 14px);
+  line-height: var(--intergalactic-lh-200, 142%);
+  color: var(--intergalactic-text-primary, #191b23);
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+  overflow: hidden;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  transition: width calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+  outline: none;
+}
+
+SCell[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+  min-height: 45px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+}
+
+SCell[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+  min-height: 37px;
+  background-color: var(--intergalactic-bg-primary-neutral, #ffffff);
+}
+
+SCell[fixed] {
+  position: sticky;
+  z-index: 1;
+}
+
+SCell[theme='muted'] {
+  background-color: var(--intergalactic-table-td-cell-unread, #f4f5f9);
+}
+
+SCell[theme='info'] {
+  background-color: var(--intergalactic-table-td-cell-selected, #e9f7ff);
+}
+
+SCell[theme='success'] {
+  background-color: var(--intergalactic-table-td-cell-new, #dbfee8);
+}
+
+SCell[theme='warning'] {
+  background-color: var(--intergalactic-table-td-cell-warning, #fff3d9);
+}
+
+SCell[theme='danger'] {
+  background-color: var(--intergalactic-table-td-cell-critical, #fff0f7);
+}
+
+SHeightHold {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  pointer-events: none;
+  /* should be under other layers */
+  z-index: -1;
+}

package/lib/cjs/style/scroll-shadows.shadow.css

@@ -0,0 +1,11 @@
+SScrollArea {
+  width: fit-content;
+}
+
+SShadowHorizontal,
+SShadowVertical {
+  &:before,
+  &:after {
+    z-index: 1;
+  }
+}

package/lib/cjs/translations/__intergalactic-dynamic-locales.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.localizedMessages = void 0;
+var _de = _interopRequireDefault(require("./de.json"));
+var _en = _interopRequireDefault(require("./en.json"));
+var _es = _interopRequireDefault(require("./es.json"));
+var _fr = _interopRequireDefault(require("./fr.json"));
+var _it = _interopRequireDefault(require("./it.json"));
+var _ja = _interopRequireDefault(require("./ja.json"));
+var _ko = _interopRequireDefault(require("./ko.json"));
+var _nl = _interopRequireDefault(require("./nl.json"));
+var _pt = _interopRequireDefault(require("./pt.json"));
+var _tr = _interopRequireDefault(require("./tr.json"));
+var _vi = _interopRequireDefault(require("./vi.json"));
+var _zh = _interopRequireDefault(require("./zh.json"));
+var _pl = _interopRequireDefault(require("./pl.json"));
+var _sv = _interopRequireDefault(require("./sv.json"));
+var localizedMessages = {
+  de: _de["default"],
+  en: _en["default"],
+  es: _es["default"],
+  fr: _fr["default"],
+  it: _it["default"],
+  ja: _ja["default"],
+  ko: _ko["default"],
+  nl: _nl["default"],
+  pt: _pt["default"],
+  tr: _tr["default"],
+  vi: _vi["default"],
+  zh: _zh["default"],
+  pl: _pl["default"],
+  sv: _sv["default"]
+};
+exports.localizedMessages = localizedMessages;
+//# sourceMappingURL=__intergalactic-dynamic-locales.js.map

package/lib/cjs/translations/__intergalactic-dynamic-locales.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["_de","_interopRequireDefault","require","_en","_es","_fr","_it","_ja","_ko","_nl","_pt","_tr","_vi","_zh","_pl","_sv","localizedMessages","de","en","es","fr","it","ja","ko","nl","pt","tr","vi","zh","pl","sv","exports"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\nimport pl from './pl.json';\nimport sv from './sv.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":";;;;;;;AAAA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,GAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,GAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,GAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,GAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,GAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,GAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,GAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,GAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,GAAA,GAAAV,sBAAA,CAAAC,OAAA;AACA,IAAAU,GAAA,GAAAX,sBAAA,CAAAC,OAAA;AACA,IAAAW,GAAA,GAAAZ,sBAAA,CAAAC,OAAA;AACA,IAAAY,GAAA,GAAAb,sBAAA,CAAAC,OAAA;AACA,IAAAa,GAAA,GAAAd,sBAAA,CAAAC,OAAA;AAEO,IAAMc,iBAAiB,GAAG;EAC/BC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA,cAAE;EACFC,EAAE,EAAFA;AACF,CAAC;AAACC,OAAA,CAAAf,iBAAA,GAAAA,iBAAA"}

package/lib/cjs/translations/de.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sortierbar"
+}

package/lib/cjs/translations/en.json

@@ -0,0 +1,5 @@
+{
+  "sortableColumn": "Sortable",
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Show details",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Hide details"
+}

package/lib/cjs/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Ordenable"
+}

package/lib/cjs/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Triable"
+}

package/lib/cjs/translations/it.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Ordinabile"
+}

package/lib/cjs/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "分類可能"
+}

package/lib/cjs/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "정렬 가능"
+}

package/lib/cjs/translations/nl.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sorteerbaar"
+}

package/lib/cjs/translations/pl.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Umożliwia sortowanie"
+}

package/lib/cjs/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Classificável"
+}

package/lib/cjs/translations/sv.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sorterbar"
+}

package/lib/cjs/translations/tr.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sıralanabilir"
+}

package/lib/cjs/translations/vi.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Có thể sắp xếp"
+}

package/lib/cjs/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "可排序"
+}

package/lib/cjs/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+var _DataTable = require("./DataTable");
+//# sourceMappingURL=types.js.map

package/lib/cjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":["_DataTable","require"],"sources":["../../src/types.ts"],"sourcesContent":["import React from 'react';\nimport { ROW_GROUP } from './DataTable';\nimport { Property } from 'csstype';\nimport { FlexProps } from '@semcore/flex-box';\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  varWidth: string;\n  setVar: boolean;\n  data?: unknown;\n  vBorders?: boolean;\n  borderLeft?: boolean;\n  borderRight?: boolean;\n  props: {\n    name: string;\n    ref: React.RefObject<HTMLElement>;\n  } & FlexProps &\n    Partial<{\n      flex: Property.Flex;\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      resizable: boolean;\n      sortable: boolean | SortDirection;\n      sortDirection: SortDirection;\n      vBorders: boolean;\n      borderLeft: Property.BorderLeft;\n      borderRight: Property.BorderLeft;\n      changeSortSize?: boolean;\n      sortSizeRecalculation?: boolean;\n    }> &\n    Props;\n  columns: Column[];\n  parentColumns: Column[];\n};\nexport type Cell = Pick<Column, 'name' | 'fixed' | 'data'> & {\n  cssVar: string | string[];\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\nexport type RowIndex = number;\nexport type ColIndex = number;\n"],"mappings":";;AACA,IAAAA,UAAA,GAAAC,OAAA"}

package/lib/cjs/utils.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScrollOffsetValue = exports.getFixedStyle = exports.flattenColumns = exports.createCssVarForWidth = void 0;
+var getScrollOffsetValue = function getScrollOffsetValue(columns) {
+  return columns.reduce(function (acc, column) {
+    if (column.fixed === 'left') {
+      acc[0] += column.calculatedWidth;
+    }
+    if (column.fixed === 'right') {
+      acc[1] += column.calculatedWidth;
+    }
+    return acc;
+  }, [0, 0]);
+};
+exports.getScrollOffsetValue = getScrollOffsetValue;
+var cssVarReg = /[:;\W]/g;
+var createCssVarForWidth = function createCssVarForWidth(name) {
+  return "--".concat(name.replace(cssVarReg, '_'), "_width");
+};
+
+/**
+ * todo: Remove after v16
+ */
+exports.createCssVarForWidth = createCssVarForWidth;
+var flattenColumns = function flattenColumns(columns) {
+  return columns.reduce(function (acc, column) {
+    var hasNestedColumns = 'columns' in column && column.columns.length > 0;
+    var columns = hasNestedColumns ? flattenColumns(column.columns) : [column];
+    acc = acc.concat(columns);
+    return acc;
+  }, []);
+};
+exports.flattenColumns = flattenColumns;
+var getFixedStyle = function getFixedStyle(cell, columns) {
+  var side = cell.fixed;
+  if (!side) return [undefined, undefined];
+  var names = cell.name.split('/');
+  var nameSideMap = {
+    left: names[0],
+    right: names[names.length - 1]
+  };
+  var name = nameSideMap[side];
+  var index = columns.findIndex(function (column) {
+    return column.name === name;
+  });
+  if (index === -1) return [undefined, undefined];
+  var startIndexSideMap = {
+    left: 0,
+    right: index + 1
+  };
+  var endIndexSideMap = {
+    left: index,
+    right: columns.length
+  };
+  var columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
+  if (columnsFixed.length < 1) return [side, 0];
+  var sum = columnsFixed.reduce(function (acc, column) {
+    return acc + column.calculatedWidth;
+  }, 0);
+  return [side, "".concat(sum, "px")];
+};
+exports.getFixedStyle = getFixedStyle;
+//# sourceMappingURL=utils.js.map

package/lib/cjs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getScrollOffsetValue","columns","reduce","acc","column","fixed","calculatedWidth","exports","cssVarReg","createCssVarForWidth","name","concat","replace","flattenColumns","hasNestedColumns","length","getFixedStyle","cell","side","undefined","names","split","nameSideMap","left","right","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","sum"],"sources":["../../src/utils.ts"],"sourcesContent":["import type { DTColumn } from './components/Head/Column.types';\n\nexport const getScrollOffsetValue = (columns: DTColumn[]) =>\n  columns.reduce(\n    (acc, column) => {\n      if (column.fixed === 'left') {\n        acc[0] += column.calculatedWidth;\n      }\n      if (column.fixed === 'right') {\n        acc[1] += column.calculatedWidth;\n      }\n      return acc;\n    },\n    [0, 0] as [leftOffset: number, rightOffset: number],\n  );\n\nconst cssVarReg = /[:;\\W]/g;\n\nexport const createCssVarForWidth = (name: string) => {\n  return `--${name.replace(cssVarReg, '_')}_width`;\n};\n\n/**\n * todo: Remove after v16\n */\nexport const flattenColumns = (columns: any[]) =>\n  columns.reduce((acc, column) => {\n    const hasNestedColumns = 'columns' in column && column.columns.length > 0;\n    const columns: any[] = hasNestedColumns ? flattenColumns(column.columns) : [column];\n    acc = acc.concat(columns);\n    return acc;\n  }, [] as any[]);\n\nexport const getFixedStyle = (\n  cell: Pick<DTColumn, 'name' | 'fixed'>,\n  columns: DTColumn[],\n): [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined] => {\n  const side = cell.fixed;\n  if (!side) return [undefined, undefined];\n  const names = cell.name.split('/');\n  const nameSideMap = {\n    left: names[0],\n    right: names[names.length - 1],\n  };\n  const name = nameSideMap[side];\n  const index = columns.findIndex((column) => column.name === name);\n\n  if (index === -1) return [undefined, undefined];\n\n  const startIndexSideMap = {\n    left: 0,\n    right: index + 1,\n  };\n  const endIndexSideMap = {\n    left: index,\n    right: columns.length,\n  };\n  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);\n\n  if (columnsFixed.length < 1) return [side, 0];\n\n  const sum = columnsFixed.reduce((acc, column) => acc + column.calculatedWidth, 0);\n  return [side, `${sum}px`];\n};\n"],"mappings":"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"}