@semcore/data-table 16.3.2 → 16.4.0-prerelease.3

package/lib/esm/enhancers/focusableCell.mjs

@@ -0,0 +1,59 @@
+import { getFocusableIn } from "@semcore/core/lib/utils/focus-lock/getFocusableIn";
+function handleFocusCell(lockedCell, target, currentTarget) {
+  if (target instanceof HTMLElement && currentTarget instanceof HTMLElement && target === currentTarget && target.matches(":focus-visible")) {
+    target.scrollIntoView({
+      behavior: "smooth",
+      block: "center",
+      inline: "center"
+    });
+    var focusableChildren = Array.from(currentTarget.children).flatMap(function(node) {
+      return getFocusableIn(node);
+    });
+    if (focusableChildren.length === 1) {
+      focusableChildren[0].focus();
+    } else if (focusableChildren.length > 1) {
+      lockedCell[0] = currentTarget;
+      lockedCell[1] = false;
+    }
+  }
+}
+function handleKeydownFocusCell(lockedCell, e) {
+  if (e.currentTarget === lockedCell[0]) {
+    var focusableChildren = Array.from(lockedCell[0].children).flatMap(function(node) {
+      return getFocusableIn(node);
+    });
+    if (lockedCell[1]) {
+      if (e.key === "Escape") {
+        var _lockedCell$;
+        (_lockedCell$ = lockedCell[0]) === null || _lockedCell$ === void 0 || _lockedCell$.focus();
+        lockedCell[1] = false;
+      }
+      if (e.key.startsWith("Arrow")) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+      if (e.key === "Tab") {
+        if (e.target === focusableChildren[0] && e.shiftKey) {
+          var _focusableChildren;
+          (_focusableChildren = focusableChildren[focusableChildren.length - 1]) === null || _focusableChildren === void 0 || _focusableChildren.focus();
+          e.preventDefault();
+        } else if (e.target === focusableChildren[focusableChildren.length - 1] && !e.shiftKey) {
+          var _focusableChildren$;
+          (_focusableChildren$ = focusableChildren[0]) === null || _focusableChildren$ === void 0 || _focusableChildren$.focus();
+          e.preventDefault();
+        }
+        e.stopPropagation();
+      }
+    } else if (e.key === "Enter") {
+      var _focusableChildren$2;
+      e.preventDefault();
+      e.stopPropagation();
+      lockedCell[1] = true;
+      (_focusableChildren$2 = focusableChildren[0]) === null || _focusableChildren$2 === void 0 || _focusableChildren$2.focus();
+    }
+  }
+}
+export {
+  handleFocusCell,
+  handleKeydownFocusCell
+};

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

@@ -78,7 +78,8 @@ export type BodyPropsInner<Data extends DataTableData, UniqKeyType> = DataTableB
     accordionMode?: DataTableProps<any, any, any>['accordionMode'];
     shadowVertical?: '' | 'end' | 'start' | 'median';
     renderCellOverlay?: () => React.ReactNode;
-    totalRows?: number;
+    limit?: DataTableProps<any, any, any>['limit'];
     variant?: DataTableProps<any, any, any>['variant'];
+    totalRows?: number;
 };
 export type DataTableBodyType = (<Data extends DataTableData, UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableBodyProps<Data, UniqKeyType>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableBodyProps<any, any>>;

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

@@ -0,0 +1,17 @@
+import { type Intergalactic } from '@semcore/core';
+import * as React from 'react';
+import type { DTRow, DTRows } from './Row.types';
+import type { DataTableProps } from '../DataTable/DataTable.types';
+import type { DTColumn } from '../Head/Column.types';
+type LimitOverlayProps<UniqKeyType> = {
+    columns: DTColumn[];
+    rows: DTRows<UniqKeyType>;
+    limit: Exclude<DataTableProps<any, any, any>['limit'], undefined>;
+    flatRows: DTRow<UniqKeyType>[];
+    hasGroups: boolean;
+    tableRef: React.RefObject<HTMLDivElement>;
+    scrollAreaRef: React.RefObject<HTMLDivElement>;
+};
+type LimitOverlayType = (<UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', LimitOverlayProps<UniqKeyType>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', LimitOverlayProps<any>>;
+export declare const LimitOverlay: LimitOverlayType;
+export {};

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

@@ -37,6 +37,7 @@ export declare class RowRoot<Data extends DataTableData, UniqKeyType> extends Co
         rowIndex: number;
     }) => void;
     getCellProps(props: DataTableCellProps<UniqKeyType>): Record<string, any>;
+    get isRowHidden(): true | undefined;
     render(): React.ReactNode;
     private isReactNode;
     private calculateRowHeight;

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

@@ -65,5 +65,8 @@ export type RowPropsInner<Data extends DataTableData, UniqKeyType> = JSX.Intrins
     componentsMap: Map<UniqKeyType, RowRoot<Data, UniqKeyType>>;
     calculateAriaRowIndex: () => void;
     variant?: DataTableProps<any, any, any>['variant'];
+    limit?: DataTableProps<any, any, any>['limit'];
+    totalRows?: number;
+    hasGroups: boolean;
 };
 export type DataTableRowType = (<Data extends DataTableData, UniqKeyType, Tag extends Intergalactic.Tag = 'div'>(props: Intergalactic.InternalTypings.ComponentProps<Tag, 'div', DataTableRowProps<Data, UniqKeyType>>) => Intergalactic.InternalTypings.ComponentRenderingResults) & Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', DataTableRowProps<any, any>>;

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

@@ -117,11 +117,30 @@ export type DataTableProps<Data extends DataTableData, UniqKey extends keyof Dat
      * Work only with table-in-table accordions. In accordions with custom components use mount/unmount hooks in components.
      */
     onAccordionToggle?: (type: 'open' | 'close', uniqRowKey: UniqKeyType, rowIndex: number) => void;
+    /** Defines a limit configuration */
+    limit?: {
+        /**
+         * Start limit from this row
+         * @default 0
+         */
+        fromRow?: number;
+        /**
+         * Start limit from this column
+         * @default 0
+         */
+        fromColumn?: number;
+        /** Limit overlay */
+        renderOverlay: () => React.ReactNode;
+    };
     /**
      * Visual variant that adapts the table styling to different usage contexts
      * @default 'default'
      */
     variant?: 'default' | 'card';
+    /**
+     * Handle change expanded rows
+     */
+    onExpandedRowsChange?: (expandedRows: Set<UniqKeyType>) => void;
 };
 export type ColumnItemConfig = Intergalactic.InternalTypings.EfficientOmit<Intergalactic.InternalTypings.ComponentProps<'div' | typeof Tooltip, 'div', DataTableColumnProps, {}, [
 ]>, 'children'> & {

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

@@ -1,17 +1,18 @@
 import { Component } from '@semcore/core';
 import * as React from 'react';
 import type { ColumnPropsInner, DataTableColumnProps } from './Column.types';
+import type { IFocusableCell, LockedCell } from '../../enhancers/focusableCell';
 import type { DataTableData, SortDirection } from '../DataTable/DataTable.types';
 type State = {
     sortVisible: boolean;
 };
 export declare class Column<Data extends DataTableData, UniqKey extends keyof Data[number], UniqKeyType extends Data[number][UniqKey]> extends Component<DataTableColumnProps, {}, {}, [
-], ColumnPropsInner<Data, UniqKey, UniqKeyType>> {
+], ColumnPropsInner<Data, UniqKey, UniqKeyType>> implements IFocusableCell {
+    lockedCell: LockedCell;
     static displayName: string;
     static style: {
         [key: string]: string;
     };
-    lockedCell: [HTMLElement | null, boolean];
     columnRef: React.RefObject<HTMLDivElement>;
     sortWrapperRef: React.RefObject<HTMLDivElement>;
     state: State;
@@ -24,8 +25,8 @@ export declare class Column<Data extends DataTableData, UniqKey extends keyof Da
     handleMouseLeave: () => void;
     handleBlur: (e: React.FocusEvent<HTMLElement>) => void;
     handleSortClick: (e: React.SyntheticEvent<HTMLElement>) => void;
-    handleKeyDown: (e: React.KeyboardEvent) => void;
-    handleFocusCell: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+    handleFocusableCellKeyDown: (e: React.KeyboardEvent) => void;
+    handleFocusableCellFocus: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
     handleClick: (e: React.SyntheticEvent<HTMLElement>) => void;
     render(): React.ReactNode;
 }

package/lib/types/enhancers/focusableCell.d.ts

@@ -0,0 +1,9 @@
+import type * as React from 'react';
+export type LockedCell = [HTMLElement | null, boolean];
+export declare function handleFocusCell(lockedCell: LockedCell, target: Element, currentTarget: Element): void;
+export declare function handleKeydownFocusCell(lockedCell: LockedCell, e: React.KeyboardEvent): void;
+export interface IFocusableCell {
+    lockedCell: LockedCell;
+    handleFocusableCellKeyDown: (e: React.KeyboardEvent) => void;
+    handleFocusableCellFocus: (e: React.FocusEvent<HTMLElement, HTMLElement>) => void;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/data-table",
   "description": "Semrush DataTable Component",
-  "version": "16.3.2",
+  "version": "16.4.0-prerelease.3",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -14,34 +14,34 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/icon": "16.7.1",
-    "@semcore/button": "16.0.9",
-    "@semcore/checkbox": "16.1.3",
-    "@semcore/flex-box": "16.0.9",
-    "@semcore/scroll-area": "16.0.9",
-    "@semcore/spin": "16.0.9",
-    "@semcore/tooltip": "16.0.9",
-    "@semcore/widget-empty": "16.0.9"
+    "@semcore/icon": "16.5.1-prerelease.3",
+    "@semcore/button": "16.0.10-prerelease.3",
+    "@semcore/checkbox": "16.2.0-prerelease.3",
+    "@semcore/flex-box": "16.0.10-prerelease.3",
+    "@semcore/scroll-area": "16.0.10-prerelease.3",
+    "@semcore/spin": "16.0.10-prerelease.3",
+    "@semcore/tooltip": "16.0.10-prerelease.3",
+    "@semcore/widget-empty": "16.0.10-prerelease.3"
   },
   "devDependencies": {
     "@types/node": "18.16.15",
     "csstype": "3.1.3",
     "@semcore/testing-utils": "1.0.0",
-    "@semcore/dropdown-menu": "16.1.10",
-    "@semcore/base-trigger": "16.4.1",
-    "@semcore/portal": "16.0.9",
-    "@semcore/accordion": "16.6.1",
-    "@semcore/typography": "16.2.3",
-    "@semcore/progress-bar": "16.0.9",
-    "@semcore/spin": "16.0.9",
-    "@semcore/divider": "16.0.9",
-    "@semcore/tooltip": "16.0.9",
-    "@semcore/spin-container": "16.0.9",
-    "@semcore/base-components": "16.2.3",
-    "@semcore/skeleton": "16.0.9"
+    "@semcore/base-trigger": "16.4.2-prerelease.3",
+    "@semcore/dropdown-menu": "16.1.11-prerelease.3",
+    "@semcore/typography": "16.3.0-prerelease.3",
+    "@semcore/accordion": "16.7.0-prerelease.3",
+    "@semcore/divider": "16.0.10-prerelease.3",
+    "@semcore/portal": "16.0.10-prerelease.3",
+    "@semcore/progress-bar": "16.0.10-prerelease.3",
+    "@semcore/spin": "16.0.10-prerelease.3",
+    "@semcore/skeleton": "16.0.10-prerelease.3",
+    "@semcore/spin-container": "16.0.10-prerelease.3",
+    "@semcore/tooltip": "16.0.10-prerelease.3",
+    "@semcore/base-components": "16.4.0-prerelease.3"
   },
   "peerDependencies": {
-    "@semcore/base-components": "^16.0.0"
+    "@semcore/base-components": "^16.4.0-prerelease.3"
   },
   "repository": {
     "type": "git",