@semcore/data-table 16.0.0-prerelease.2 → 16.0.0-prerelease.21

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

@@ -1,394 +0,0 @@
-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/types.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getScrollOffsetValue = exports.getFixedStyle = exports.flattenColumns = void 0;
-var getScrollOffsetValue = function getScrollOffsetValue(columns) {
-  return columns.reduce(function (acc, column) {
-    if (column.fixed === 'left') {
-      acc[0] += column.width;
-    }
-    if (column.fixed === 'right') {
-      acc[1] += column.width;
-    }
-    return acc;
-  }, [0, 0]);
-};
-exports.getScrollOffsetValue = getScrollOffsetValue;
-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 vars = columnsFixed.map(function (column) {
-    return "var(--".concat(column.name, "_width)");
-  });
-  return [side, vars.length === 1 ? vars[0] : "calc(".concat(vars.join(' + '), ")")];
-};
-exports.getFixedStyle = getFixedStyle;
-//# sourceMappingURL=utils.js.map

package/lib/cjs/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","names":["getScrollOffsetValue","columns","reduce","acc","column","fixed","width","exports","flattenColumns","hasNestedColumns","length","concat","getFixedStyle","cell","side","undefined","names","name","split","nameSideMap","left","right","index","findIndex","startIndexSideMap","endIndexSideMap","columnsFixed","slice","vars","map","join"],"sources":["../../src/utils.ts"],"sourcesContent":["import type { Column } from './types';\n\nexport const getScrollOffsetValue = (columns: Column[]) =>\n  columns.reduce(\n    (acc, column) => {\n      if (column.fixed === 'left') {\n        acc[0] += column.width;\n      }\n      if (column.fixed === 'right') {\n        acc[1] += column.width;\n      }\n      return acc;\n    },\n    [0, 0] as [leftOffset: number, rightOffset: number],\n  );\n\nexport const flattenColumns = (columns: Column[]) =>\n  columns.reduce((acc, column) => {\n    const hasNestedColumns = 'columns' in column && column.columns.length > 0;\n    const columns: Column[] = hasNestedColumns ? flattenColumns(column.columns) : [column];\n    acc = acc.concat(columns);\n    return acc;\n  }, [] as Column[]);\n\nexport const getFixedStyle = (\n  cell: Pick<Column, 'name' | 'fixed'>,\n  columns: Column[],\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 vars = columnsFixed.map((column) => `var(--${column.name}_width)`);\n  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];\n};\n"],"mappings":"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"}