@semcore/data-table 16.0.0-prerelease.9 → 16.0.0

package/lib/es6/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/es6/types.js

@@ -1,2 +0,0 @@
-import { ROW_GROUP } from './DataTable';
-//# sourceMappingURL=types.js.map

package/lib/es6/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","names":["ROW_GROUP"],"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,SAASA,SAAS,QAAQ,aAAa"}