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

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

@@ -0,0 +1,180 @@
+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='wide'] {
+  SColumn:first-child {
+    padding-left: var(--intergalactic-spacing-5x, 20px);
+  }
+  SColumn:last-child {
+    padding-right: var(--intergalactic-spacing-5x, 20px);
+  }
+}
+
+SHeadCheckboxCol {
+  cursor: pointer;
+}

package/lib/esm/index.mjs

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

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

@@ -0,0 +1,47 @@
+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);
+    }
+    &[leftScrollPadding] {
+      scroll-padding-left: var(--leftScrollPadding);
+    }
+    &[rightScrollPadding] {
+      scroll-padding-right: var(--rightScrollPadding);
+    }
+  }
+
+  SShadowVertical {
+    &:before {
+      display: none;
+    }
+    &:after {
+      z-index: 2;
+    }
+  }
+  SShadowHorizontal {
+    &:before,
+    &:after {
+      z-index: 2;
+    }
+  }
+}

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

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

@@ -1,7 +1,8 @@
-const o = "Sortierbar", t = {
-  sortableColumn: o
+const sortableColumn = "Sortierbar";
+const de = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  de as default,
+  sortableColumn
 };

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

@@ -1,7 +1,13 @@
-const o = "Sortable", t = {
-  sortableColumn: o
+const sortableColumn = "Sortable";
+const en = {
+  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 {
-  t as default,
-  o as sortableColumn
+  en as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const e = "Ordenable", o = {
-  sortableColumn: e
+const sortableColumn = "Ordenable";
+const es = {
+  sortableColumn
 };
 export {
-  o as default,
-  e as sortableColumn
+  es as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "Triable", l = {
-  sortableColumn: o
+const sortableColumn = "Triable";
+const fr = {
+  sortableColumn
 };
 export {
-  l as default,
-  o as sortableColumn
+  fr as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "Ordinabile", t = {
-  sortableColumn: o
+const sortableColumn = "Ordinabile";
+const it = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  it as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "分類可能", t = {
-  sortableColumn: o
+const sortableColumn = "分類可能";
+const ja = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  ja as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "정렬 가능", t = {
-  sortableColumn: o
+const sortableColumn = "정렬 가능";
+const ko = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  ko as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "Sorteerbaar", t = {
-  sortableColumn: o
+const sortableColumn = "Sorteerbaar";
+const nl = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  nl as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "Umożliwia sortowanie", l = {
-  sortableColumn: o
+const sortableColumn = "Umożliwia sortowanie";
+const pl = {
+  sortableColumn
 };
 export {
-  l as default,
-  o as sortableColumn
+  pl as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const l = "Classificável", o = {
-  sortableColumn: l
+const sortableColumn = "Classificável";
+const pt = {
+  sortableColumn
 };
 export {
-  o as default,
-  l as sortableColumn
+  pt as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "Sorterbar", t = {
-  sortableColumn: o
+const sortableColumn = "Sorterbar";
+const sv = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  sv as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const a = "Sıralanabilir", l = {
-  sortableColumn: a
+const sortableColumn = "Sıralanabilir";
+const tr = {
+  sortableColumn
 };
 export {
-  l as default,
-  a as sortableColumn
+  tr as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "Có thể sắp xếp", t = {
-  sortableColumn: o
+const sortableColumn = "Có thể sắp xếp";
+const vi = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  vi as default,
+  sortableColumn
 };

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

@@ -1,7 +1,8 @@
-const o = "可排序", t = {
-  sortableColumn: o
+const sortableColumn = "可排序";
+const zh = {
+  sortableColumn
 };
 export {
-  t as default,
-  o as sortableColumn
+  zh as default,
+  sortableColumn
 };

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,57 @@
+/// <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?: 'wide';
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
+};

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,43 @@
+/// <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?: 'wide';
+    getFixedStyle: (cell: Pick<DTColumn, 'name' | 'fixed'>) => [side: 'left' | 'right', style: string | number] | [side: undefined, style: undefined];
+};