@semcore/data-table 3.1.0 → 3.1.3

package/src/style/data-table.shadow.css

@@ -1,295 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SDataTable {
-  position: relative;
-}
-
-SHeadWrapper {
-  position: relative;
-}
-
-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: center;
-  flex-grow: 1;
-  font-size: var(--fs-100);
-  color: var(--gray-800);
-  box-sizing: border-box;
-  position: relative;
-
-  &:focus {
-    outline: none;
-    box-shadow: var(--keyboard-focus);
-  }
-}
-
-SColumn[hidden] {
-  height: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  border: none !important;
-}
-
-SColumn[use='primary'] {
-  padding: 12px;
-  border-right: 1px solid var(--gray-100);
-  border-bottom: 1px solid var(--gray-100);
-  background-color: var(--gray-50);
-}
-
-SColumn[use='secondary'] {
-  padding: 8px;
-  border-bottom: 1px solid var(--gray-300);
-  background-color: var(--white);
-}
-
-SColumn[use]:last-child {
-  border-right: none;
-}
-
-SColumn[group][use] {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-  align-items: normal;
-  border-bottom: none;
-  padding: 0;
-}
-
-SColumn[groupHead][use] {
-  justify-content: center;
-  border-right: none;
-  /* for resizable */
-  z-index: 1;
-}
-
-SColumn[groupHead][use='primary'] {
-  border-bottom: 1px solid var(--gray-100);
-}
-
-SColumn[groupHead][use='secondary'] {
-  border-bottom: 1px solid var(--gray-100);
-}
-
-SColumn[sortable] {
-  cursor: pointer;
-
-  &[use='primary']:hover {
-    background-color: var(--gray-100);
-  }
-}
-
-SColumn[active][use='primary'] {
-  background-color: var(--gray-100);
-}
-
-SColumn[resizable] {
-  &:hover:after {
-    background: var(--gray-100);
-  }
-
-  &:after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    right: -1px;
-    height: 100vh;
-    width: 1px;
-    background: transparent;
-    cursor: col-resize;
-  }
-}
-
-SColumn[fixed] {
-  position: sticky;
-  /* because up resizable */
-  z-index: 2;
-}
-
-SSortIcon {
-  fill: var(--gray-300);
-  margin-left: 6px;
-}
-
-SSortIcon[active] {
-  fill: var(--gray-400);
-}
-
-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]),
-SRow:hover > SCell:not([theme]),
-SRow SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
-}
-
-/* MUTED THEME */
-SRow[theme='muted'] SCell:not([theme]) {
-  background-color: #f2f3f4;
-}
-
-SRow:hover > SCell[theme='muted'],
-SRow[theme='muted'][active] > SCell:not([theme]),
-SRow[theme='muted']:hover > SCell:not([theme]),
-SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: #f6f7f7;
-}
-
-/* INFO THEME */
-SRow[theme='info'] SCell:not([theme]) {
-  background-color: var(--blue-50);
-}
-
-SRow:hover > SCell[theme='info'],
-SRow[theme='info'][active] > SCell:not([theme]),
-SRow[theme='info']:hover > SCell:not([theme]),
-SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--blue-100);
-}
-
-/* SUCCESS THEME */
-SRow[theme='success'] SCell:not([theme]) {
-  background-color: var(--green-50);
-}
-
-SRow:hover > SCell[theme='success'],
-SRow[theme='success'][active] > SCell:not([theme]),
-SRow[theme='success']:hover > SCell:not([theme]),
-SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--green-100);
-}
-
-/* WARNING THEME */
-SRow[theme='warning'] SCell:not([theme]) {
-  background-color: var(--orange-50);
-}
-
-SRow:hover > SCell[theme='warning'],
-SRow[theme='warning'][active] > SCell:not([theme]),
-SRow[theme='warning']:hover > SCell:not([theme]),
-SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--orange-100);
-}
-
-/* DANGER THEME */
-SRow[theme='danger'] SCell:not([theme]) {
-  background-color: var(--red-50);
-}
-
-SRow:hover > SCell[theme='danger'],
-SRow[theme='danger'][active] > SCell:not([theme]),
-SRow[theme='danger']:hover > SCell:not([theme]),
-SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
-  background-color: var(--red-100);
-}
-
-SRow[positioned] {
-  position: absolute;
-}
-
-SCell {
-  display: flex;
-  flex: 1;
-  flex-basis: auto;
-  font-size: var(--fs-200);
-  line-height: var(--lh-200);
-  color: var(--gray-800);
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--gray-100);
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-SCell[use='primary'] {
-  padding: 12px;
-  min-height: 45px;
-  background-color: var(--white);
-}
-
-SCell[use='secondary'] {
-  padding: 8px;
-  min-height: 37px;
-  background-color: var(--white);
-}
-
-SCell[fixed] {
-  position: sticky;
-  z-index: 1;
-}
-
-SCell[theme='muted'] {
-  background-color: #f2f3f4;
-}
-
-SCell[theme='info'] {
-  background-color: var(--blue-50);
-}
-
-SCell[theme='success'] {
-  background-color: var(--green-50);
-}
-
-SCell[theme='warning'] {
-  background-color: var(--orange-50);
-}
-
-SCell[theme='danger'] {
-  background-color: var(--red-50);
-}
-
-SScrollAreaBar[orientation='horizontal'] {
-  position: sticky;
-  bottom: 0;
-  left: 0;
-  margin-top: -12px;
-  z-index: 2;
-}
-
-SScrollAreaBar[orientation='vertical'] {
-  width: 12px;
-}
-
-SScrollAreaBar[orientation='horizontal'] {
-  margin-left: calc(var(--left) + 4px);
-  margin-right: calc(var(--right) + 4px);
-  width: calc(100% - var(--offsetSum) - 8px);
-}
-
-SHeightHold {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  pointer-events: none;
-  /* should be under other layers */
-  z-index: -1;
-}

package/src/style/scroll-area.shadow.css

@@ -1,6 +0,0 @@
-SShadowHorizontal:before {
-  left: var(--left) !important;
-}
-SShadowHorizontal:after {
-  right: var(--right) !important;
-}

package/src/types.ts

@@ -1,53 +0,0 @@
-import React from 'react';
-import { ROW_GROUP } from './DataTable';
-
-export type PseudoChildPropsGetter = (
-  props: { [propName: string]: unknown },
-  rowData: { [columnName: string]: unknown },
-  index: number,
-) => { [propName: string]: unknown };
-export type PropsLayer = {
-  childrenPropsGetter?: PseudoChildPropsGetter;
-  [propName: string]: unknown;
-};
-
-export type SortDirection = 'asc' | 'desc';
-export type Column<
-  Props extends { [propName: string]: unknown } = { [propName: string]: unknown },
-> = {
-  name: string;
-  active: boolean;
-  width: number;
-  fixed?: 'left' | 'right';
-  resizable?: boolean;
-  sortable?: boolean | SortDirection;
-  sortDirection: SortDirection;
-  cssVar: string | string[];
-  data?: unknown;
-  props: {
-    name: string;
-  } & Partial<{
-    onClick: (event: React.MouseEvent) => void;
-    onKeyDown: (event: React.KeyboardEvent) => void;
-    ref: React.RefObject<HTMLElement>;
-    style: React.CSSProperties;
-    fixed: 'left' | 'right';
-    children: React.ReactNode[];
-    resizable: boolean;
-    sortable: boolean | SortDirection;
-    sortDirection: SortDirection;
-  }> &
-    Props;
-  columns: Column[];
-};
-export type Cell = Pick<Column, 'name' | 'cssVar' | 'fixed' | 'data'> & {
-  cellPropsLayers: PropsLayer[];
-};
-export type RowData<
-  Data extends { [columnName: string]: unknown } = { [columnName: string]: unknown },
-> = Data &
-  Partial<{
-    name: string;
-    [ROW_GROUP]: RowData[];
-  }>;
-export type NestedCells = (Cell | NestedCells)[] & { flatRowData?: RowData };

package/src/utils.ts

@@ -1,55 +0,0 @@
-import type { Column } from './types';
-
-export const getScrollOffsetValue = (columns: Column[]) =>
-  columns.reduce(
-    (acc, column) => {
-      if (column.fixed === 'left') {
-        acc[0] += column.width;
-      }
-      if (column.fixed === 'right') {
-        acc[1] += column.width;
-      }
-      return acc;
-    },
-    [0, 0] as [leftOffset: number, rightOffset: number],
-  );
-
-export const flattenColumns = (columns: Column[]) =>
-  columns.reduce((acc, column) => {
-    const hasNestedColumns = 'columns' in column && column.columns.length > 0;
-    const columns: Column[] = hasNestedColumns ? flattenColumns(column.columns) : [column];
-    acc = acc.concat(columns);
-    return acc;
-  }, [] as Column[]);
-
-export const getFixedStyle = (
-  cell: Pick<Column, 'name' | 'fixed'>,
-  columns: Column[],
-): [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined] => {
-  const side = cell.fixed;
-  if (!side) return [undefined, undefined];
-  const names = cell.name.split('/');
-  const nameSideMap = {
-    left: names[0],
-    right: names[names.length - 1],
-  };
-  const name = nameSideMap[side];
-  const index = columns.findIndex((column) => column.name === name);
-
-  if (index === -1) return [undefined, undefined];
-
-  const startIndexSideMap = {
-    left: 0,
-    right: index,
-  };
-  const endIndexSideMap = {
-    left: index,
-    right: columns.length - 1,
-  };
-  const columnsFixed = columns.slice(startIndexSideMap[side], endIndexSideMap[side]);
-
-  if (columnsFixed.length < 1) return [side, 0];
-
-  const vars = columnsFixed.map((column) => `var(--${column.name}_width)`);
-  return [side, vars.length === 1 ? vars[0] : `calc(${vars.join(' + ')})`];
-};