@semcore/data-table 4.43.0 → 4.44.0

package/lib/es6/translations/__intergalactic-dynamic-locales.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"__intergalactic-dynamic-locales.js","names":["de","en","es","fr","it","ja","ko","nl","pt","tr","vi","zh","pl","sv","localizedMessages"],"sources":["../../../src/translations/__intergalactic-dynamic-locales.ts"],"sourcesContent":["import de from './de.json';\nimport en from './en.json';\nimport es from './es.json';\nimport fr from './fr.json';\nimport it from './it.json';\nimport ja from './ja.json';\nimport ko from './ko.json';\nimport nl from './nl.json';\nimport pt from './pt.json';\nimport tr from './tr.json';\nimport vi from './vi.json';\nimport zh from './zh.json';\nimport pl from './pl.json';\nimport sv from './sv.json';\n\nexport const localizedMessages = {\n  de,\n  en,\n  es,\n  fr,\n  it,\n  ja,\n  ko,\n  nl,\n  pt,\n  tr,\n  vi,\n  zh,\n  pl,\n  sv,\n};\n"],"mappings":"AAAA,OAAOA,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAC1B,OAAOC,EAAE,MAAM,WAAW;AAE1B,OAAO,IAAMC,iBAAiB,GAAG;EAC/Bd,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA,EAAE;EACFC,EAAE,EAAFA;AACF,CAAC"}

package/lib/es6/translations/de.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sortierbar"
+}

package/lib/es6/translations/en.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sortable"
+}

package/lib/es6/translations/es.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Ordenable"
+}

package/lib/es6/translations/fr.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Triable"
+}

package/lib/es6/translations/it.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Ordinabile"
+}

package/lib/es6/translations/ja.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "分類可能"
+}

package/lib/es6/translations/ko.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "정렬 가능"
+}

package/lib/es6/translations/nl.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sorteerbaar"
+}

package/lib/es6/translations/pl.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Umożliwia sortowanie"
+}

package/lib/es6/translations/pt.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Classificável"
+}

package/lib/es6/translations/sv.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sorterbar"
+}

package/lib/es6/translations/tr.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Sıralanabilir"
+}

package/lib/es6/translations/vi.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "Có thể sắp xếp"
+}

package/lib/es6/translations/zh.json

@@ -0,0 +1,3 @@
+{
+  "sortableColumn": "可排序"
+}

package/lib/es6/types.js.map

@@ -1 +1 @@
-{"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"],"mappings":"AACA,SAASA,SAAS,QAAQ,aAAa"}
+{"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"}

package/lib/types/Body.d.ts

@@ -33,12 +33,15 @@ type State = {
     scrollAreaHeight: undefined | number;
     scrollOffset: number;
 };
-declare class Body extends Component<AsProps, State> {
+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;

package/lib/types/DataTable.d.ts

@@ -7,10 +7,7 @@ declare const ROW_GROUP: unique symbol;
 export type DataTableData = {
     [key: string]: unknown;
 };
-export type DataTableSort<Columns extends string | number | symbol = string> = [
-    sortBy: Columns,
-    sortDirection: 'desc' | 'asc'
-];
+export type DataTableSort<Column = string> = [sortBy: Column, sortDirection: 'desc' | 'asc'];
 export type DataTableTheme = 'muted' | 'info' | 'success' | 'warning' | 'danger';
 export type DataTableUse = 'primary' | 'secondary';
 export type DataTableRow = DataTableCell[];
@@ -21,10 +18,19 @@ export type DataTableCell = {
     data: React.ReactNode;
     [key: string]: unknown;
 };
+/**
+ * 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;
+}>;
 /** @deprecated */
 export interface IDataTableProps<DataTableData extends {
     [key: string]: any;
-}[] = UnknownProperties[]> extends DataTableProps<DataTableData> {
+}[] = UnknownProperties[]> extends Omit<DataTableProps<DataTableData>, keyof DataTableAriaProps> {
 }
 export type DataTableProps<DataTableData extends {
     [key: string]: any;
@@ -45,7 +51,9 @@ export type DataTableProps<DataTableData extends {
     uniqueKey?: keyof DataTableData[0];
     /** Make cells compact by changing left and right paddings to smaller ones*/
     compact?: boolean;
-};
+    /** Count of total rows if table using virtual scroll. Needs for accessibility */
+    totalRows?: number;
+} & DataTableAriaProps;
 /** @deprecated */
 export interface IDataTableHeadProps extends DataTableHeadProps, UnknownProperties {
 }
@@ -174,58 +182,7 @@ type IntergalacticDataTableCellComponent<PropsExtending extends {} = {}> = (<Dat
     row: Data[0],
     index: number
 ]>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableCellProps>;
-declare const DefinitionTable: (<Data extends DataTableData[], Tag extends Intergalactic.InternalTypings.ComponentTag = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", import("@semcore/core").StyledProps & {
-    display?: Property.Display | undefined;
-    inline?: boolean | undefined;
-    boxSizing?: boolean | "border-box" | undefined;
-    flex?: Property.Flex<string> | undefined;
-    m?: string | number | undefined;
-    mt?: string | number | undefined;
-    mr?: string | number | undefined;
-    mb?: string | number | undefined;
-    ml?: string | number | undefined;
-    mx?: string | number | undefined;
-    my?: string | number | undefined;
-    p?: string | number | undefined;
-    pt?: string | number | undefined;
-    pr?: string | number | undefined;
-    pb?: string | number | undefined;
-    pl?: string | number | undefined;
-    px?: string | number | undefined;
-    py?: string | number | undefined;
-    w?: string | number | undefined;
-    wMin?: string | number | undefined;
-    wMax?: string | number | undefined;
-    h?: string | number | undefined;
-    hMin?: string | number | undefined;
-    hMax?: string | number | undefined;
-    scaleIndent?: number | undefined;
-    css?: React.CSSProperties | undefined;
-    position?: Property.Position | undefined;
-    top?: string | number | undefined;
-    left?: string | number | undefined;
-    bottom?: string | number | undefined;
-    right?: string | number | undefined;
-    zIndex?: number | undefined;
-    children?: React.ReactNode;
-} & {
-    /** Table theme according to visual hierarchy on the page
-     * @default primary
-     * */
-    use?: DataTableUse | undefined;
-    /** Data for table */
-    data?: Data | undefined;
-    /** Active sort object */
-    sort?: DataTableSort<keyof Data[0]> | undefined;
-    /** Handler call when request will change sort */
-    onSortChange?: ((sort: DataTableSort<keyof Data[0]>, e?: React.SyntheticEvent) => void) | undefined;
-    /** Field name in one data entity that is unique accross all dataset
-     * @default id
-     */
-    uniqueKey?: keyof Data[0] | undefined;
-    /** Make cells compact by changing left and right paddings to smaller ones*/
-    compact?: boolean | undefined;
-}, DataTableCtx, never>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<UnknownProperties[]>, {}, {}> & {
+declare const DefinitionTable: (<Data extends DataTableData[], Tag extends Intergalactic.InternalTypings.ComponentTag = "div">(props: Intergalactic.InternalTypings.ComponentProps<Tag, "div", DataTableProps<Data> & {}, DataTableCtx, never>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<"div", "div", DataTableProps<UnknownProperties[]>, {}, {}> & {
     Head: Intergalactic.Component<'div', DataTableHeadProps>;
     Body: Intergalactic.Component<'div', DataTableBodyProps>;
     Column: Intergalactic.Component<'div', DataTableColumnProps>;

package/lib/types/Head.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Component } from '@semcore/core';
-import type { Column } from './types';
+import { Column } from './types';
 export declare const SORT_ICON_WIDTH = 20;
 type AsProps = {
     $onSortClick: (name: string, event: React.MouseEvent | React.KeyboardEvent) => void;
@@ -13,10 +13,13 @@ type AsProps = {
     uid?: string;
     withScrollBar?: boolean;
     animationsDisabled?: boolean;
+    getI18nText?: (str: string) => string;
 };
 declare class Head extends Component<AsProps> {
     columns: Column[];
     static displayName: string;
+    headCellMap: Map<number, HTMLElement | null>;
+    lockedCell: [HTMLElement | null, boolean];
     sortWrapperRefs: Map<Node, boolean>;
     defaultWidths: Map<HTMLElement, {
         minWidth: number;
@@ -24,10 +27,13 @@ declare class Head extends Component<AsProps> {
         computedWidth: number;
         useForRecalculation: boolean;
     }>;
+    sortableColumnDescribeId(): string;
+    handleKeyDown: (e: React.KeyboardEvent) => void;
+    onFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
     bindHandlerSortClick: (name: string) => (event: React.MouseEvent) => void;
     bindHandlerKeyDown: (name: string) => (event: React.KeyboardEvent) => void;
     makeSortRefHandler: (active: boolean) => (ref: HTMLElement | null) => void;
-    makeColumnRefHandler: (column: Column) => (ref: HTMLElement | null) => void;
+    makeColumnRefHandler: (column: Column, index: number) => (ref: HTMLElement | null) => void;
     componentDidUpdate(): void;
     changeMaxNodeWidth: (diff: number, exceptNode: HTMLElement) => void;
     backToColumnDefaults: (node: HTMLElement) => void;

package/lib/types/translations/__intergalactic-dynamic-locales.d.ts

@@ -0,0 +1,44 @@
+export declare const localizedMessages: {
+    de: {
+        sortableColumn: string;
+    };
+    en: {
+        sortableColumn: string;
+    };
+    es: {
+        sortableColumn: string;
+    };
+    fr: {
+        sortableColumn: string;
+    };
+    it: {
+        sortableColumn: string;
+    };
+    ja: {
+        sortableColumn: string;
+    };
+    ko: {
+        sortableColumn: string;
+    };
+    nl: {
+        sortableColumn: string;
+    };
+    pt: {
+        sortableColumn: string;
+    };
+    tr: {
+        sortableColumn: string;
+    };
+    vi: {
+        sortableColumn: string;
+    };
+    zh: {
+        sortableColumn: string;
+    };
+    pl: {
+        sortableColumn: string;
+    };
+    sv: {
+        sortableColumn: string;
+    };
+};

package/lib/types/types.d.ts

@@ -69,3 +69,5 @@ export type RowData<Data extends {
 export type NestedCells = (Cell | NestedCells)[] & {
     flatRowData?: RowData;
 };
+export type RowIndex = number;
+export type ColIndex = number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "4.43.0",
+  "version": "4.44.0",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,10 +9,10 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/flex-box": "5.32.0",
-    "@semcore/icon": "4.44.1",
-    "@semcore/scroll-area": "5.36.0",
-    "@semcore/utils": "4.35.0"
+    "@semcore/flex-box": "5.33.0",
+    "@semcore/icon": "4.45.0",
+    "@semcore/scroll-area": "5.37.0",
+    "@semcore/utils": "4.36.0"
   },
   "devDependencies": {
     "@types/react": "18.0.21",