@equinor/eds-data-grid-react 0.7.3 → 0.7.4

package/dist/eds-data-grid-react.cjs

@@ -8,6 +8,7 @@ var styled = require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
 var edsTokens = require('@equinor/eds-tokens');
+var edsUtils = require('@equinor/eds-utils');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -535,7 +536,7 @@ function logDevelopmentWarningOfPropUse(deprecatedProps) {
 }
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-function EdsDataGrid({
+function EdsDataGridInner({
   rows,
   columns,
   columnResizeMode,
@@ -593,7 +594,7 @@ function EdsDataGrid({
   enableFooter,
   enableSortingRemoval,
   ...rest
-}) {
+}, ref) {
   logDevelopmentWarningOfPropUse({
     virtualHeight: {
       value: virtualHeight,
@@ -824,6 +825,7 @@ function EdsDataGrid({
     };
   }
   const parentRef = react.useRef(null);
+  const combinedRef = react.useMemo(() => edsUtils.mergeRefs(parentRef, ref), [parentRef, ref]);
 
   /**
    * Virtualization setup
@@ -872,7 +874,7 @@ function EdsDataGrid({
         ...rest.style,
         ...tableWrapperStyle
       },
-      ref: parentRef,
+      ref: combinedRef,
       $height: height,
       $width: width,
       $scrollbarHorizontal: scrollbarHorizontal,
@@ -982,6 +984,7 @@ const TableWrapper = styled__default.default.div.withConfig({
   $height,
   $width
 }) => Boolean($height) && Boolean($width) ? 'strict' : 'unset');
+const EdsDataGrid = /*#__PURE__*/react.forwardRef(EdsDataGridInner);
 
 Object.defineProperty(exports, "createColumnHelper", {
   enumerable: true,

package/dist/esm/EdsDataGrid.js

@@ -1,17 +1,18 @@
 import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
 import { getExpandedRowModel, getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { forwardRef, useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import { TableProvider } from './EdsDataGridContext.js';
 import { TableHeaderRow } from './components/TableHeaderRow.js';
 import { TableFooterRow } from './components/TableFooterRow.js';
 import { TableRow } from './components/TableRow.js';
 import { addPxSuffixIfInputHasNoPrefix, logDevelopmentWarningOfPropUse } from './utils.js';
+import { mergeRefs } from '@equinor/eds-utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-function EdsDataGrid({
+function EdsDataGridInner({
   rows,
   columns,
   columnResizeMode,
@@ -69,7 +70,7 @@ function EdsDataGrid({
   enableFooter,
   enableSortingRemoval,
   ...rest
-}) {
+}, ref) {
   logDevelopmentWarningOfPropUse({
     virtualHeight: {
       value: virtualHeight,
@@ -300,6 +301,7 @@ function EdsDataGrid({
     };
   }
   const parentRef = useRef(null);
+  const combinedRef = useMemo(() => mergeRefs(parentRef, ref), [parentRef, ref]);
 
   /**
    * Virtualization setup
@@ -348,7 +350,7 @@ function EdsDataGrid({
         ...rest.style,
         ...tableWrapperStyle
       },
-      ref: parentRef,
+      ref: combinedRef,
       $height: height,
       $width: width,
       $scrollbarHorizontal: scrollbarHorizontal,
@@ -458,5 +460,6 @@ const TableWrapper = styled.div.withConfig({
   $height,
   $width
 }) => Boolean($height) && Boolean($width) ? 'strict' : 'unset');
+const EdsDataGrid = /*#__PURE__*/forwardRef(EdsDataGridInner);
 
 export { EdsDataGrid };

package/dist/types/EdsDataGrid.d.ts

@@ -1,3 +1,7 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ForwardedRef } from 'react';
 import { EdsDataGridProps } from './EdsDataGridProps';
-export declare function EdsDataGrid<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, selectedRows, rowSelectionState, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, stickyFooter, onSelectRow, onRowSelectionChange, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, footerClass, footerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, tableInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, onRowContextMenu, onRowClick, onCellClick, enableFooter, enableSortingRemoval, ...rest }: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function EdsDataGridInner<T>({ rows, columns, columnResizeMode, pageSize, rowSelection, enableRowSelection, enableMultiRowSelection, enableSubRowSelection, selectedRows, rowSelectionState, enableColumnFiltering, debug, enablePagination, enableSorting, stickyHeader, stickyFooter, onSelectRow, onRowSelectionChange, caption, enableVirtual, virtualHeight, columnVisibility, columnVisibilityChange, emptyMessage, columnOrder, cellClass, cellStyle, rowClass, rowStyle, headerClass, headerStyle, footerClass, footerStyle, externalPaginator, onSortingChange, manualSorting, sortingState, columnPinState, scrollbarHorizontal, width, minWidth, height, getRowId, rowVirtualizerInstanceRef, tableInstanceRef, columnSizing, onColumnResize, expansionState, setExpansionState, getSubRows, defaultColumn, onRowContextMenu, onRowClick, onCellClick, enableFooter, enableSortingRemoval, ...rest }: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement>, ref: ForwardedRef<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare const EdsDataGrid: <T>(props: EdsDataGridProps<T> & HTMLAttributes<HTMLDivElement> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReturnType<typeof EdsDataGridInner>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-data-grid-react",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "A feature-rich data-grid written in React, implementing the Equinor Design System",
   "license": "MIT",
   "types": "dist/types/index.d.ts",