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

package/lib/esm/components/Head/style.shadow.css

@@ -0,0 +1,176 @@
+SHead, SGroupContainer {
+  display: contents;
+}
+
+SHead[sticky] SColumn, SHead[sticky] SGroup {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+SHead[sticky] SGroupContainer > SColumn {
+  position: sticky;
+  z-index: 2;
+}
+
+SHead[compact] SColumn {
+  padding: var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px);
+}
+
+SGroup, SColumn {
+  display: flex;
+  align-items: flex-start;
+  font-size: var(--intergalactic-fs-100, 12px);
+  color: var(--intergalactic-text-primary, #191b23);
+  box-sizing: border-box;
+  height: 100%;
+  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;
+  overflow: hidden;
+}
+
+SGroup {
+  justify-content: center;
+  text-align: center;
+  background-color: var(--intergalactic-table-th-primary-cell, #f4f5f9);
+}
+
+SGroup[use='primary'] {
+  padding: var(--intergalactic-spacing-3x, 12px);
+
+  &:has(~ SColumn[visibleSort]) {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+  }
+}
+SGroup[use='secondary'] {
+  padding: var(--intergalactic-spacing-2x, 8px);
+}
+
+SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='left'], SColumn[borders='left'] {
+  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+SGroup[borders='both'], SColumn[borders='both'], SGroup[borders='right'], SColumn[borders='right'] {
+  border-right: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
+}
+
+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);
+
+  SSortWrapper::before {
+    background: linear-gradient(
+      270deg,
+      var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,
+      rgba(224, 225, 233, 0) 105%
+    );
+  }
+
+  &[visibleSort] {
+    background-color: var(--intergalactic-table-th-primary-cell-hover, #e0e1e9);
+
+    SSortWrapper {
+      flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+      opacity: 1;
+
+      &::before {
+        display: flex;
+        opacity: 1;
+      }
+    }
+
+    SSortButton {
+      display: flex;
+      opacity: 1;
+    }
+  }
+}
+
+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);
+
+  SSortWrapper::before {
+    background: linear-gradient(
+      270deg,
+      var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,
+      rgba(255, 255, 255, 0) 105%
+    );
+  }
+
+  &[visibleSort] {
+    SSortWrapper {
+      flex-basis: calc(var(--intergalactic-spacing-1x, 4px) + 16px);
+      opacity: 1;
+
+      &::before {
+        display: flex;
+        opacity: 1;
+      }
+    }
+
+    SSortButton {
+      display: flex;
+      opacity: 1;
+    }
+  }
+}
+
+SColumn[gridArea], SGroup[gridArea], SGroupTitle[gridArea] {
+  grid-area: var(--gridArea);
+}
+
+SHead[sticky] SColumn[fixed], SHead SColumn[fixed], SHead[sticky] SGroup, SHead SGroup[fixed] {
+  position: sticky;
+  /* because up resizable */
+  z-index: 3;
+}
+
+SColumn[sortable]:hover {
+  cursor: pointer;
+}
+
+SSortWrapper {
+  align-items: center;
+  display: flex;
+  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;
+}
+
+SSortButton {
+  display: none;
+  fill: var(--intergalactic-icon-secondary-neutral-hover-active, #878992);
+  position: absolute;
+  top: calc(-1 * (1em * 1.25 - 16px));
+  right: 0;
+  margin-left: var(--intergalactic-spacing-1x, 4px);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+SHead[sideIndents='l'] {
+  SColumn:first-child {
+    padding-left: var(--intergalactic-spacing-5x, 20px);
+  }
+  SColumn:last-child {
+    padding-right: var(--intergalactic-spacing-5x, 20px);
+  }
+}

package/lib/esm/index.mjs

@@ -1,8 +1,11 @@
-import { ROW_GROUP, default as default2, wrapDataTable, wrapDataTableCell, wrapDataTableRow } from "./DataTable.mjs";
+import { ACCORDION, DataTable, ROW_GROUP, UNIQ_ROW_KEY } from "./components/DataTable/DataTable.mjs";
+var wrapDataTable = function wrapDataTable2(wrapper) {
+  return wrapper;
+};
 export {
+  ACCORDION,
+  DataTable,
   ROW_GROUP,
-  default2 as default,
-  wrapDataTable,
-  wrapDataTableCell,
-  wrapDataTableRow
+  UNIQ_ROW_KEY,
+  wrapDataTable
 };

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

@@ -0,0 +1,41 @@
+SScrollArea {
+  width: fit-content;
+
+  SContainer {
+    overflow: unset;
+
+    &[scrollDirection='both'] {
+      overflow: auto;
+    }
+    &[scrollDirection='horizontal'] {
+      overflow-x: auto;
+      overflow-y: unset;
+    }
+    &[scrollDirection='vertical'] {
+      overflow-x: unset;
+      overflow-y: auto;
+    }
+    &[loading] {
+      overflow: hidden;
+    }
+
+    &[headerHeight] {
+      scroll-padding-top: var(--headerHeight);
+    }
+  }
+
+  SShadowVertical {
+    &:before {
+      display: none;
+    }
+    &:after {
+      z-index: 2;
+    }
+  }
+  SShadowHorizontal {
+    &:before,
+    &:after {
+      z-index: 2;
+    }
+  }
+}

package/lib/esm/translations/en.json.mjs

@@ -1,6 +1,11 @@
 const sortableColumn = "Sortable";
 const en = {
-  sortableColumn
+  sortableColumn,
+  "DataTable.Cell.AccordionToggle.expand:aria-label": "Show details",
+  "DataTable.Cell.AccordionToggle.collapse:aria-label": "Hide details",
+  "DataTable.Header.selectAllCheckbox:aria-label": "All items",
+  "DataTable.allItemsSelected:aria-live": "All items selected",
+  "DataTable.allItemsDeselected:aria-live": "All items deselected"
 };
 export {
   en as default,

package/lib/esm/utils.mjs

@@ -1,22 +1,14 @@
 var getScrollOffsetValue = function getScrollOffsetValue2(columns) {
   return columns.reduce(function(acc, column) {
     if (column.fixed === "left") {
-      acc[0] += column.width;
+      acc[0] += column.calculatedWidth;
     }
     if (column.fixed === "right") {
-      acc[1] += column.width;
+      acc[1] += column.calculatedWidth;
     }
     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];
@@ -40,13 +32,12 @@ var getFixedStyle = function getFixedStyle2(cell, columns) {
   };
   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(" + "), ")")];
+  var sum = columnsFixed.reduce(function(acc, column) {
+    return acc + column.calculatedWidth;
+  }, 0);
+  return [side, "".concat(sum, "px")];
 };
 export {
-  flattenColumns,
   getFixedStyle,
   getScrollOffsetValue
 };

package/lib/types/components/Body/Body.d.ts

@@ -0,0 +1,8 @@
+import { Component, Intergalactic } from '@semcore/core';
+import { DataTableBodyProps } from './Body.types';
+import { DataTableRowProps } from './Row.types';
+import { DataTableCellProps } from './Cell.types';
+export declare const Body: (<Tag extends Intergalactic.InternalTypings.ComponentTag = "div", Props extends DataTableBodyProps = DataTableBodyProps>(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", Props, {}, never[]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", Intergalactic.InternalTypings.ComponentTag, DataTableBodyProps, {}, never[]> & {
+    Row: Intergalactic.Component<'div', DataTableRowProps>;
+    Cell: Intergalactic.Component<'div', DataTableCellProps>;
+};

package/lib/types/components/Body/Body.types.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { DTRow } from './Row.types';
+import { DTColumn } from '../Head/Column.types';
+import { DTUse, VirtualScroll } from '../DataTable/DataTable.types';
+import { Theme } from './Cell.types';
+export type CellRenderProps = {
+    dataKey: string;
+    row: DTRow;
+    column: DTColumn;
+    rowIndex: number;
+    columnIndex: number;
+    columnName: string;
+    value: string | React.ReactElement;
+    defaultRender: () => React.ReactNode;
+    isMergedRows: boolean;
+    isMergedColumns: boolean;
+};
+export type DataTableBodyProps = {
+    renderCell?: (props: CellRenderProps) => React.ReactNode | (Record<string, any> & {
+        theme?: Theme;
+    });
+    rowProps?: (row: DTRow, rowIndex: number) => (Record<string, any> & {
+        theme?: Theme;
+    }) | undefined;
+};
+export type BodyPropsInner = DataTableBodyProps & {
+    rows: Array<DTRow | DTRow[]>;
+    flatRows: DTRow[];
+    columns: DTColumn[];
+    use: DTUse;
+    compact: boolean;
+    gridTemplateColumns: string[];
+    gridTemplateAreas: string[];
+    loading?: boolean;
+    headerHeight: number;
+    getI18nText: (key: string) => string;
+    expandedRows: Set<string>;
+    onExpandRow: (row: DTRow) => void;
+    spinnerRef: React.RefObject<HTMLDivElement>;
+    tableContainerRef: React.RefObject<HTMLDivElement>;
+    tableRef: React.RefObject<HTMLDivElement>;
+    scrollAreaRef: React.RefObject<HTMLDivElement>;
+    scrollTop: number;
+    scrollDirection: 'down' | 'up';
+    virtualScroll?: VirtualScroll;
+    hasGroups: boolean;
+    uid: string;
+    rowProps?: (row: DTRow, rowIndex: number) => Record<string, any> | undefined;
+    renderCell?: (props: CellRenderProps) => React.ReactNode | Record<string, any>;
+    onBackFromAccordion: (colIndex: number) => void;
+    stickyHeader?: boolean;
+    selectedRows?: number[];
+    onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow, event?: React.SyntheticEvent<HTMLElement>) => void;
+    renderEmptyData: () => React.ReactNode;
+    sideIndents?: 'l';
+};

package/lib/types/components/Body/Cell.d.ts

@@ -0,0 +1,3 @@
+export declare const Cell: import("@semcore/core/lib/coreFactory").ComponentType<unknown, {}, {}, {
+    [key: string]: (arg: unknown) => void;
+}, null>;

package/lib/types/components/Body/Cell.types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { DTRow } from './Row.types';
+import { DTUse } from '../DataTable/DataTable.types';
+import { DTColumn } from '../Head/Column.types';
+export type Theme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
+export type DataTableCellProps = {
+    id: string;
+    accordionId: string;
+    row: DTRow;
+    rowIndex: number;
+    column: DTColumn;
+    columnIndex: number;
+    gridRowIndex: number;
+    children?: React.ReactNode;
+};
+export type CellPropsInner = {
+    use: DTUse;
+    virtualScroll: boolean;
+    tableRef: React.RefObject<HTMLDivElement>;
+};

package/lib/types/components/Body/MergedCells.d.ts

@@ -0,0 +1,14 @@
+export declare class MergedRowsCell {
+    readonly value: any;
+    readonly rowsCount: number;
+    constructor(value: any, rowsCount: number);
+}
+export declare class MergedColumnsCell {
+    readonly value: any;
+    readonly columnsCount: number;
+    readonly dataKey: string;
+    constructor(value: any, options: {
+        size: number;
+        dataKey: string;
+    });
+}

package/lib/types/components/Body/Row.d.ts

@@ -0,0 +1,3 @@
+export declare const Row: import("@semcore/core/lib/coreFactory").ComponentType<unknown, {}, {}, {
+    [key: string]: (arg: unknown) => void;
+}, null>;

package/lib/types/components/Body/Row.types.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { DTValue, DTUse, DataTableData } from '../DataTable/DataTable.types';
+import { DTColumn } from '../Head/Column.types';
+import { MergedColumnsCell, MergedRowsCell } from './MergedCells';
+import { ACCORDION, ROW_INDEX, UNIQ_ROW_KEY } from '../DataTable/DataTable';
+export type DTRow = {
+    [UNIQ_ROW_KEY]: string;
+    [ROW_INDEX]: number;
+    [key: string]: DTValue | MergedRowsCell | MergedColumnsCell;
+    [ACCORDION]?: React.ReactNode | DataTableData | undefined;
+};
+export type DTRows = Array<DTRow | DTRow[]>;
+export type DataTableRowProps = {
+    row: DTRow;
+    offset?: number;
+};
+export type RowPropsInner = JSX.IntrinsicElements['div'] & {
+    use: DTUse;
+    /**
+     * Expanded flag for rows with accordion
+     * @default false
+     */
+    expanded?: boolean;
+    columns: DTColumn[];
+    row: DTRow | DTRow[];
+    rows: DTRows;
+    rowIndex: number;
+    ariaRowIndex: number;
+    gridRowIndex: number;
+    expandedRows: Set<string>;
+    onExpandRow: (expandedRow: DTRow) => void;
+    gridTemplateAreas: string[];
+    gridTemplateColumns: string[];
+    accordionDataGridArea: string;
+    selectedRows?: number[];
+    onSelectRow?: (isSelect: boolean, selectedRowIndex: number, row: DTRow, event?: React.SyntheticEvent<HTMLElement>) => void;
+    inert?: '';
+    onBackFromAccordion: (colIndex: number) => void;
+    scrollAreaRef: React.RefObject<HTMLDivElement>;
+    uid: string;
+    sideIndents?: 'l';
+};

package/lib/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,12 @@
+import { DataTableProps, DataTableData } from './DataTable.types';
+import { Head } from '../Head/Head';
+import { Body } from '../Body/Body';
+export declare const ACCORDION: unique symbol;
+export declare const ROW_GROUP: unique symbol;
+export declare const UNIQ_ROW_KEY: unique symbol;
+export declare const SELECT_ALL: unique symbol;
+export declare const ROW_INDEX: unique symbol;
+export declare const DataTable: (<Data extends DataTableData, Tag extends import("@semcore/core").Intergalactic.InternalTypings.ComponentTag = "div">(props: import("@semcore/core").Intergalactic.InternalTypings.EfficientOmit<import("@semcore/core").Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data>, never, never[]>, "children" | "tag">) => import("@semcore/core").Intergalactic.InternalTypings.ComponentRenderingResults) & import("@semcore/core").Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<any>, {}, {}> & {
+    Head: typeof Head;
+    Body: typeof Body;
+};

package/lib/types/components/DataTable/DataTable.types.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="react" />
+import { Intergalactic } from '@semcore/core';
+import { BoxProps } from '@semcore/base-components';
+import { ACCORDION, ROW_GROUP, UNIQ_ROW_KEY } from './DataTable';
+import { DataTableColumnProps } from '../Head/Column.types';
+import { DataTableBodyProps } from '../Body/Body.types';
+import Tooltip from '@semcore/tooltip';
+import { DTRow } from '../Body/Row.types';
+/**
+ * Datatable must have an accessible name (aria-table-name).
+ * It should describe table content.
+ */
+type DataTableAriaProps = Intergalactic.RequireAtLeastOne<{
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    title?: string;
+}>;
+export type SortDirection = 'asc' | 'desc';
+export type DataTableSort<Column> = [sortBy: Column, sortDirection: SortDirection];
+export type DataTableChangeSort<Column> = (sort: [sortBy: Column, sortDirection: SortDirection], e?: React.SyntheticEvent) => void;
+export type DataRowItem = {
+    [key: string]: DTValue | undefined;
+    [ACCORDION]?: React.ReactNode | DataTableData;
+    [ROW_GROUP]?: DataTableData;
+    [UNIQ_ROW_KEY]?: string;
+};
+export interface DTValue {
+    toString(): string;
+    [ACCORDION]?: React.ReactNode | DataTableData;
+}
+export type DataTableData = DataRowItem[];
+export type DTUse = 'primary' | 'secondary';
+type Sizes = Pick<BoxProps, 'w' | 'wMax' | 'wMin' | 'h' | 'hMax' | 'hMin'>;
+export type DataTableProps<D extends DataTableData> = DataTableAriaProps & Sizes & {
+    /** Data for table */
+    data: D;
+    /** Count of total rows if table using virtual scroll. Needs for accessibility */
+    totalRows?: number;
+    /** Table theme according to visual hierarchy on the page
+     * @default primary
+     * */
+    use?: DTUse;
+    /** Active sort object */
+    sort?: DataTableSort<keyof D[0]>;
+    /** Handler call when request will change sort */
+    onSortChange?: DataTableChangeSort<keyof D[0]>;
+    /**
+     *
+     * @default auto
+     */
+    defaultGridTemplateColumnWidth?: 'auto' | '1fr';
+    /**
+     * Flag for compact view (fewer paddings)
+     */
+    compact?: boolean;
+    /**
+     * Size of paddings for the first and last columns in the table
+     */
+    sideIndents?: 'l';
+    /**
+     * Flag for showing spinner on table body
+     */
+    loading?: boolean;
+    children?: never;
+    /**
+     * Set of expanded rows (uniq id from them)
+     */
+    expandedRows?: Set<string>;
+    virtualScroll?: VirtualScroll;
+    columns: ColumnsConfig;
+    headerProps?: {
+        /**
+         * Sticky header
+         * @default false
+         */
+        sticky?: boolean;
+        /**
+         * offset for sticky header
+         */
+        top?: number;
+        /** Enable scroll bar element in header */
+        withScrollBar?: boolean;
+    };
+    rowProps?: DataTableBodyProps['rowProps'];
+    renderCell?: DataTableBodyProps['renderCell'];
+    /**
+     * List of selected rows (indexes from data array)
+     */
+    selectedRows?: number[];
+    onSelectedRowsChange?: (selectedRows: number[], event?: React.SyntheticEvent<HTMLElement>, opts?: {
+        selectedRowIndex: number;
+        isSelected: boolean;
+        row: DTRow;
+    }) => void;
+    renderEmptyData?: () => React.ReactNode;
+};
+export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
+]>, 'children'> & {
+    children: React.ReactNode | React.FC;
+};
+export type ColumnGroupConfig = {
+    borders?: 'both' | 'left' | 'right';
+    fixed?: 'left' | 'right';
+    children: React.ReactNode;
+    columns: ColumnItemConfig[];
+};
+type ColumnsConfig = Array<ColumnItemConfig | ColumnGroupConfig>;
+export type VirtualScroll = boolean | {
+    rowsBuffer?: number;
+    aproxRowsOnPage?: number;
+} | {
+    rowHeight: number;
+    rowsBuffer?: number;
+};
+export type RowIndex = number;
+export type ColIndex = number;
+export type DataTableType = (<Data extends DataTableData, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableProps<Data>>, 'tag' | 'children'>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableProps<any>>;
+export {};

package/lib/types/components/Head/Column.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { Component } from '@semcore/core';
+import { ColumnPropsInner, DataTableColumnProps } from './Column.types';
+import type { DataTableData, SortDirection } from '../DataTable/DataTable.types';
+type State = {
+    sortVisible: boolean;
+};
+export declare class Column<D extends DataTableData> extends Component<DataTableColumnProps, {}, {}, [
+], ColumnPropsInner<D>> {
+    static displayName: string;
+    static style: {
+        [key: string]: string;
+    };
+    lockedCell: [HTMLElement | null, boolean];
+    columnRef: React.RefObject<HTMLDivElement>;
+    sortWrapperRef: React.RefObject<HTMLDivElement>;
+    state: State;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: DataTableColumnProps & ColumnPropsInner<D>): void;
+    calculateActiveColumnMinWidth: () => number | null;
+    get defaultDirection(): SortDirection;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+    handleBlur: (e: React.FocusEvent<HTMLElement>) => void;
+    handleSortClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    handleFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    render(): React.ReactNode;
+}
+export {};