@semcore/data-table 4.51.0-prerelease.1 → 4.51.0-prerelease.5

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

@@ -1,413 +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, oklch(0.1 0.03 137 / 0.899));
-  box-sizing: border-box;
-  position: relative;
-
-  &:focus-visible {
-    outline: none;
-    box-shadow: inset var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
-  }
-
-  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, oklch(0.176 0.033 175.7 / 0.07));
-  background-color: var(--intergalactic-table-th-primary-cell, oklch(0.98 0.001 180));
-}
-
-SColumn[use='secondary'] {
-  padding: var(--intergalactic-spacing-2x, 8px);
-  border-bottom: 1px solid var(--intergalactic-border-table-accent, oklch(0.137 0.026 175.7 / 0.161));
-  background-color: var(--intergalactic-table-th-secondary-cell, oklch(1 0 0));
-}
-
-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, oklch(0.94 0.002 180));
-  }
-
-  &[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, oklch(0.94 0.002 180));
-  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, oklch(0.137 0.026 175.7 / 0.161));
-  }
-
-  &: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, oklch(0.176 0.033 175.7 / 0.07));
-}
-
-SColumn[borderRight],
-SCell[borderRight] {
-  border-right: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
-}
-
-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, oklch(0.1 0.023 159.1 / 0.433));
-  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, oklch(0.94 0.002 180)) 67.5%,
-    rgba(224, 225, 233, 0) 105%
-  );
-}
-
-SColumn[use='secondary'] SSortWrapper:before {
-  background: linear-gradient(
-    270deg,
-    var(--intergalactic-table-th-secondary-cell, oklch(1 0 0)) 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, oklch(0.98 0.001 180));
-}
-
-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, oklch(0.98 0.008 278.4));
-}
-
-SRow[theme='info'][active] > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-selected-active, oklch(0.94 0.023 278.4));
-}
-
-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, oklch(0.96 0.015 278.4));
-}
-
-/* SUCCESS THEME */
-SRow[theme='success'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-new, oklch(0.977 0.036 184));
-}
-
-SRow[theme='success'][active] > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-new-active, oklch(0.94 0.074 178.1));
-}
-
-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, oklch(0.96 0.057 179.7));
-}
-
-/* WARNING THEME */
-SRow[theme='warning'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-warning, oklch(0.979 0.03 88.1));
-}
-
-SRow[theme='warning'][active] > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-warning-active, oklch(0.939 0.069 79.8));
-}
-
-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, oklch(0.96 0.05 83.1));
-}
-
-/* DANGER THEME */
-SRow[theme='danger'] SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-critical, oklch(0.977 0.016 1.8));
-}
-
-SRow[theme='danger'][active] > SCell:not([theme]) {
-  background-color: var(--intergalactic-table-td-cell-critical-active, oklch(0.938 0.042 8.4));
-}
-
-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, oklch(0.958 0.029 5.7));
-}
-
-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, oklch(0.1 0.03 137 / 0.899));
-  box-sizing: border-box;
-  border-bottom: 1px solid var(--intergalactic-border-secondary, oklch(0.176 0.033 175.7 / 0.07));
-  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, oklch(1 0 0));
-}
-
-SCell[use='secondary'] {
-  padding: var(--intergalactic-spacing-2x, 8px);
-  min-height: 37px;
-  background-color: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
-}
-
-SCell[fixed] {
-  position: sticky;
-  z-index: 1;
-}
-
-SCell[theme='muted'] {
-  background-color: var(--intergalactic-table-td-cell-unread, oklch(0.98 0.001 180));
-}
-
-SCell[theme='info'] {
-  background-color: var(--intergalactic-table-td-cell-selected, oklch(0.98 0.008 278.4));
-}
-
-SCell[theme='success'] {
-  background-color: var(--intergalactic-table-td-cell-new, oklch(0.977 0.036 184));
-}
-
-SCell[theme='warning'] {
-  background-color: var(--intergalactic-table-td-cell-warning, oklch(0.979 0.03 88.1));
-}
-
-SCell[theme='danger'] {
-  background-color: var(--intergalactic-table-td-cell-critical, oklch(0.977 0.016 1.8));
-}
-
-SCell:focus-visible:not([fixed]) {
-  position: relative;
-}
-
-SCell:focus-visible::after {
-  position: absolute;
-  display: block;
-  content: '';
-  inset: 3px;
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px oklch(0.376 0.247 264.2 / 0.441));
-  pointer-events: none;
-}
-
-SHeightHold {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  pointer-events: none;
-  /* should be under other layers */
-  z-index: -1;
-}

package/lib/esm/utils.mjs

@@ -1,52 +0,0 @@
-var getScrollOffsetValue = function getScrollOffsetValue2(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]);
-};
-var flattenColumns = function flattenColumns2(columns) {
-  return columns.reduce(function(acc, column) {
-    var hasNestedColumns = "columns" in column && column.columns.length > 0;
-    var columns2 = hasNestedColumns ? flattenColumns2(column.columns) : [column];
-    acc = acc.concat(columns2);
-    return acc;
-  }, []);
-};
-var getFixedStyle = function getFixedStyle2(cell, columns) {
-  var side = cell.fixed;
-  if (!side) return [void 0, void 0];
-  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 [void 0, void 0];
-  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(" + "), ")")];
-};
-export {
-  flattenColumns,
-  getFixedStyle,
-  getScrollOffsetValue
-};

package/lib/types/Body.d.ts

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Component } from '@semcore/core';
-import { RowData, Column, NestedCells, PropsLayer, Cell } from './types';
-import syncScroll from '@semcore/utils/lib/syncScroll';
-type AsProps = {
-    rows: NestedCells[][];
-    columns: Column[];
-    $scrollRef: ReturnType<ReturnType<typeof syncScroll>>;
-    onResize: ResizeObserverCallback;
-    onScroll?: (event: React.SyntheticEvent<HTMLElement>) => void;
-    rowPropsLayers: PropsLayer[];
-    use: 'primary' | 'secondary';
-    uniqueKey: string;
-    virtualScroll?: boolean | {
-        tollerance?: number;
-        rowHeight?: number;
-    };
-    renderRows?: (props: {
-        rows: NestedCells[][];
-        columns: Column[];
-        renderRow: (row: Cell[], details: {
-            dataIndex: number;
-            nested: boolean;
-        }) => React.ReactNode;
-    }) => React.ReactNode;
-    disabledScroll?: boolean;
-    uid?: string;
-    animationsDisabled?: boolean;
-    scrollContainerRef: React.Ref<HTMLDivElement>;
-};
-type State = {
-    rowHeight: number | undefined;
-    scrollAreaHeight: undefined | number;
-    scrollOffset: number;
-};
-declare class Body extends Component<AsProps, {}, State> {
-    state: State;
-    scrollContainerRef: React.RefObject<HTMLDivElement>;
-    firstRowRef: React.RefObject<HTMLDivElement>;
-    firstRowResizeObserver: ResizeObserver | null;
-    lockedCell: [HTMLElement | null, boolean];
-    getRowHeight: () => number | undefined;
-    handleKeyDown: (e: React.KeyboardEvent) => void;
-    onFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
-    renderCells(cells: NestedCells, rowData: RowData, dataIndex: number): React.ReactNode[];
-    renderRow(cells: NestedCells, { dataIndex, topOffset, nested, }: {
-        dataIndex: number;
-        topOffset?: number;
-        nested: boolean;
-    }): React.ReactNode;
-    renderRows(rows: NestedCells[], nested?: boolean): React.ReactNode[];
-    renderVirtualizedRows(rows: NestedCells[]): React.ReactNode[];
-    handleFirstRowResize: (entries: ResizeObserverEntry[]) => void;
-    handleScrollAreaResize: (entries: ResizeObserverEntry[]) => void;
-    handleScrollAreaScroll: (event: React.SyntheticEvent<HTMLElement>) => void;
-    setupRowSizeObserver: () => void;
-    handleBodyTransitionEnd: () => void;
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-}
-export default Body;