@equinor/eds-data-grid-react 0.1.0-beta.3 → 0.3.0-rc

package/dist/esm/EdsDataGrid.js

@@ -1,156 +1,170 @@
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { Typography, useEds, Table, Pagination } from '@equinor/eds-core-react';
 import { getCoreRowModel, getSortedRowModel, getFacetedRowModel, getFacetedUniqueValues, getFacetedMinMaxValues, getFilteredRowModel, getPaginationRowModel, useReactTable } from '@tanstack/react-table';
-import { useEds, Table, Pagination } from '@equinor/eds-core-react';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
 import { TableHeaderRow } from './components/TableHeaderRow.js';
 import { TableRow } from './components/TableRow.js';
 import { TableProvider } from './EdsDataGridContext.js';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
-function EdsDataGrid(_ref) {
-  var rows = _ref.rows,
-    columns = _ref.columns,
-    columnResizeMode = _ref.columnResizeMode,
-    pageSize = _ref.pageSize,
-    rowSelection = _ref.rowSelection,
-    selectedRows = _ref.selectedRows,
-    enableColumnFiltering = _ref.enableColumnFiltering,
-    debug = _ref.debug,
-    enablePagination = _ref.enablePagination,
-    enableSorting = _ref.enableSorting,
-    stickyHeader = _ref.stickyHeader,
-    onSelectRow = _ref.onSelectRow,
-    caption = _ref.caption,
-    enableVirtual = _ref.enableVirtual,
-    virtualHeight = _ref.virtualHeight,
-    columnVisibility = _ref.columnVisibility,
-    columnVisibilityChange = _ref.columnVisibilityChange,
-    emptyMessage = _ref.emptyMessage,
-    columnOrder = _ref.columnOrder,
-    cellClass = _ref.cellClass,
-    cellStyle = _ref.cellStyle,
-    rowClass = _ref.rowClass,
-    rowStyle = _ref.rowStyle,
-    headerClass = _ref.headerClass,
-    headerStyle = _ref.headerStyle;
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    sorting = _useState2[0],
-    setSorting = _useState2[1];
-  var _useState3 = useState(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {}),
-    _useState4 = _slicedToArray(_useState3, 2),
-    selection = _useState4[0],
-    setSelection = _useState4[1];
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    columnFilters = _useState6[0],
-    setColumnFilters = _useState6[1];
-  var _useState7 = useState(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {}),
-    _useState8 = _slicedToArray(_useState7, 2),
-    visible = _useState8[0],
-    setVisible = _useState8[1];
-  var _useState9 = useState(''),
-    _useState10 = _slicedToArray(_useState9, 2),
-    globalFilter = _useState10[0],
-    setGlobalFilter = _useState10[1];
-  var _useState11 = useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    columnOrderState = _useState12[0],
-    setColumnOrderState = _useState12[1];
-  var _useState13 = useState({
-      pageIndex: 0,
-      pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
-    }),
-    _useState14 = _slicedToArray(_useState13, 2),
-    page = _useState14[0],
-    setPage = _useState14[1];
-  useEffect(function () {
-    setVisible(columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {});
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+function EdsDataGrid({
+  rows,
+  columns,
+  columnResizeMode,
+  pageSize,
+  rowSelection,
+  selectedRows,
+  enableColumnFiltering,
+  debug,
+  enablePagination,
+  enableSorting,
+  stickyHeader,
+  onSelectRow,
+  caption,
+  enableVirtual,
+  virtualHeight,
+  columnVisibility,
+  columnVisibilityChange,
+  emptyMessage,
+  columnOrder,
+  cellClass,
+  cellStyle,
+  rowClass,
+  rowStyle,
+  headerClass,
+  headerStyle,
+  externalPaginator,
+  onSortingChange,
+  manualSorting,
+  sortingState,
+  columnPinState,
+  scrollbarHorizontal,
+  width,
+  minWidth,
+  height,
+  getRowId,
+  rowVirtualizerInstanceRef
+}) {
+  const [sorting, setSorting] = useState(sortingState ?? []);
+  const [selection, setSelection] = useState(selectedRows ?? {});
+  const [columnPin, setColumnPin] = useState(columnPinState ?? {});
+  const [columnFilters, setColumnFilters] = useState([]);
+  const [visible, setVisible] = useState(columnVisibility ?? {});
+  const [globalFilter, setGlobalFilter] = useState('');
+  const [columnOrderState, setColumnOrderState] = useState([]);
+  const [page, setPage] = useState({
+    pageIndex: 0,
+    pageSize: pageSize ?? 25
+  });
+  useEffect(() => {
+    setVisible(columnVisibility ?? {});
   }, [columnVisibility, setVisible]);
-  useEffect(function () {
-    setSelection(selectedRows !== null && selectedRows !== void 0 ? selectedRows : {});
+  useEffect(() => {
+    setColumnPin(s => columnPinState ?? s);
+  }, [columnPinState]);
+  useEffect(() => {
+    setSorting(sortingState);
+  }, [sortingState]);
+  useEffect(() => {
+    setSelection(selectedRows ?? {});
   }, [selectedRows]);
 
   /**
    * By default, the filter-function accepts single-value filters. This adds multi-filter functionality out of the box.
    */
-  var _columns = useMemo(function () {
-    return columns.map(function (column) {
+  const _columns = useMemo(() => {
+    return columns.map(column => {
       if (column.filterFn || column.enableColumnFilter === false) {
         return column;
       }
       /* istanbul ignore next */
-      return _objectSpread(_objectSpread({}, column), {}, {
-        filterFn: function filterFn(row, columnId, filterValue) {
-          var _row$getValue;
+      return {
+        ...column,
+        filterFn: (row, columnId, filterValue) => {
           if (debug) {
             console.log('filterFn', row, columnId, filterValue);
           }
           if (!filterValue || (Array.isArray(filterValue) || typeof filterValue === 'string') && filterValue.length === 0) {
             return true;
           }
-          var value = (_row$getValue = row.getValue(columnId)) !== null && _row$getValue !== void 0 ? _row$getValue : 'NULL_OR_UNDEFINED';
+          const value = row.getValue(columnId) ?? 'NULL_OR_UNDEFINED';
           if (Array.isArray(filterValue)) {
-            var numeric = filterValue.some(function (v) {
-              return typeof v === 'number';
-            });
+            const numeric = filterValue.some(v => typeof v === 'number');
             if (numeric) {
-              var _ref2 = filterValue,
-                _ref3 = _slicedToArray(_ref2, 2),
-                start = _ref3[0],
-                end = _ref3[1];
+              const [start, end] = filterValue;
               return Number(value) >= (isNaN(start) ? 0 : start) && Number(value) <= (!end || isNaN(end) ? Infinity : end);
             } else {
-              var validFilterValue = filterValue.filter(function (v) {
-                return !!v;
-              });
+              const validFilterValue = filterValue.filter(v => !!v);
               if (validFilterValue.length === 0) return true;
               return filterValue.includes(value);
             }
           }
           return value === filterValue;
         }
-      });
+      };
     });
   }, [debug, columns]);
 
   /**
    * Set up default table options
    */
-  var options = {
+  const options = {
     data: rows,
     columns: _columns,
+    defaultColumn: {
+      cell: context => {
+        return /*#__PURE__*/jsx(Typography, {
+          style: {
+            overflow: 'hidden',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis'
+          },
+          group: "table",
+          variant: "cell_text",
+          children: String(context.getValue() ?? '')
+        });
+      }
+    },
     columnResizeMode: columnResizeMode,
     state: {
-      sorting: sorting,
+      sorting,
+      columnPinning: columnPin,
       rowSelection: selection,
       columnOrder: columnOrderState
     },
-    onSortingChange: setSorting,
+    onSortingChange: changes => {
+      if (onSortingChange) {
+        onSortingChange(changes);
+      }
+      setSorting(changes);
+    },
     enableColumnFilters: !!enableColumnFiltering,
     enableFilters: !!enableColumnFiltering,
-    enableSorting: enableSorting !== null && enableSorting !== void 0 ? enableSorting : false,
+    enableSorting: enableSorting ?? false,
+    manualSorting: manualSorting ?? false,
     enableColumnResizing: !!columnResizeMode,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     debugTable: debug,
     debugHeaders: debug,
     debugColumns: debug,
-    enableRowSelection: rowSelection !== null && rowSelection !== void 0 ? rowSelection : false
+    enableRowSelection: rowSelection ?? false,
+    enableColumnPinning: true,
+    enablePinning: true,
+    getRowId
   };
-  useEffect(function () {
+  useEffect(() => {
     if (columnOrder && columnOrder.length > 0) {
-      setColumnOrderState(columnOrder !== null && columnOrder !== void 0 ? columnOrder : []);
+      setColumnOrderState(columnOrder ?? []);
     }
   }, [columnOrder]);
 
   /**
    * Set up handlers for rowSelection
    */
-  if (rowSelection !== null && rowSelection !== void 0 ? rowSelection : false) {
-    options.onRowSelectionChange = function (updaterOrValue) {
+  if (rowSelection ?? false) {
+    options.onRowSelectionChange = updaterOrValue => {
       if (onSelectRow) {
         onSelectRow(updaterOrValue);
       }
@@ -175,7 +189,7 @@ function EdsDataGrid(_ref) {
   /**
    * Set up config for pagination
    */
-  if (enablePagination !== null && enablePagination !== void 0 ? enablePagination : false) {
+  if (enablePagination ?? false) {
     options.state.pagination = page;
     options.getPaginationRowModel = getPaginationRowModel();
   }
@@ -185,8 +199,8 @@ function EdsDataGrid(_ref) {
    */
   if (columnVisibility) {
     options.state.columnVisibility = visible;
-    options.onColumnVisibilityChange = function (vis) {
-      var updated;
+    options.onColumnVisibilityChange = vis => {
+      let updated;
       if (typeof vis === 'function') {
         updated = vis(visible);
       } else {
@@ -196,15 +210,14 @@ function EdsDataGrid(_ref) {
       setVisible(updated);
     };
   }
-  useEffect(function () {
-    setPage(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        pageSize: pageSize !== null && pageSize !== void 0 ? pageSize : 25
-      });
-    });
+  useEffect(() => {
+    setPage(prev => ({
+      ...prev,
+      pageSize: pageSize ?? 25
+    }));
   }, [pageSize]);
-  var table = useReactTable(options);
-  var parentRefStyle = {};
+  const table = useReactTable(options);
+  let parentRefStyle = {};
 
   /**
    * Style the parent container to enable virtualization.
@@ -212,34 +225,34 @@ function EdsDataGrid(_ref) {
    */
   if (enableVirtual) {
     parentRefStyle = {
-      height: virtualHeight !== null && virtualHeight !== void 0 ? virtualHeight : 500,
+      height: height ?? virtualHeight ?? 500,
       overflow: 'auto',
       position: 'relative'
     };
   }
-  var parentRef = useRef(null);
+  const parentRef = useRef(null);
 
   /**
    * Virtualization setup
    */
-  var _useEds = useEds(),
-    density = _useEds.density;
-  var estimateSize = useCallback(function () {
+  const {
+    density
+  } = useEds();
+  const estimateSize = useCallback(() => {
     return density === 'compact' ? 32 : 48;
   }, [density]);
-  var virtualizer = useVirtualizer({
+  const virtualizer = useVirtualizer({
     count: table.getRowModel().rows.length,
-    getScrollElement: function getScrollElement() {
-      return parentRef.current;
-    },
-    estimateSize: estimateSize
+    getScrollElement: () => parentRef.current,
+    estimateSize
   });
-  var virtualRows = virtualizer.getVirtualItems();
-  var paddingTop = virtualRows.length ? virtualRows[0].start : 0;
-  var paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+  if (rowVirtualizerInstanceRef) rowVirtualizerInstanceRef.current = virtualizer;
+  const virtualRows = virtualizer.getVirtualItems();
+  const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
 
   // These classes are primarily used to allow for feature-detection in the test-suite
-  var classList = {
+  const classList = {
     'sticky-header': !!stickyHeader,
     virtual: !!enableVirtual,
     paging: !!enablePagination
@@ -257,82 +270,82 @@ function EdsDataGrid(_ref) {
     stickyHeader: !!stickyHeader,
     children: [/*#__PURE__*/jsxs("div", {
       className: "table-wrapper",
-      style: parentRefStyle,
+      style: {
+        height: height ?? 'auto',
+        ...parentRefStyle,
+        width: scrollbarHorizontal ? width ?? '100%' : 'auto',
+        overflow: 'auto',
+        contain: 'layout paint style'
+      },
       ref: parentRef,
       children: [/*#__PURE__*/jsxs(Table, {
-        className: Object.entries(classList).filter(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-            k = _ref5[1];
-          return k;
-        }).map(function (_ref6) {
-          var _ref7 = _slicedToArray(_ref6, 1),
-            k = _ref7[0];
-          return k;
-        }).join(' '),
+        className: Object.entries(classList).filter(([, k]) => k).map(([k]) => k).join(' '),
         style: {
-          width: table.getTotalSize()
+          tableLayout: scrollbarHorizontal ? 'fixed' : 'auto',
+          width: table.getTotalSize(),
+          minWidth: scrollbarHorizontal ? minWidth : 'auto'
         },
         children: [caption && /*#__PURE__*/jsx(Table.Caption, {
           children: caption
         }), /*#__PURE__*/jsx(Table.Head, {
           sticky: stickyHeader,
-          children: table.getHeaderGroups().map(function (headerGroup) {
-            return /*#__PURE__*/jsx(TableHeaderRow, {
-              table: table,
-              headerGroup: headerGroup,
-              columnResizeMode: columnResizeMode,
-              deltaOffset: table.getState().columnSizingInfo.deltaOffset
-            }, headerGroup.id);
-          })
+          children: table.getHeaderGroups().map(headerGroup => /*#__PURE__*/jsx(TableHeaderRow, {
+            table: table,
+            headerGroup: headerGroup,
+            columnResizeMode: columnResizeMode,
+            deltaOffset: table.getState().columnSizingInfo.deltaOffset
+          }, headerGroup.id))
         }), /*#__PURE__*/jsxs(Table.Body, {
+          style: {
+            backgroundColor: 'inherit'
+          },
           children: [table.getRowModel().rows.length === 0 && emptyMessage && /*#__PURE__*/jsx(Table.Row, {
             children: /*#__PURE__*/jsx(Table.Cell, {
-              colSpan: table.getHeaderGroups().length,
+              colSpan: table.getFlatHeaders().length,
               children: emptyMessage
             })
           }), enableVirtual && /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx(Table.Row, {
+            children: [paddingTop > 0 && /*#__PURE__*/jsx(Table.Row, {
               "data-testid": "virtual-padding-top",
               className: 'virtual-padding-top',
+              style: {
+                pointerEvents: 'none'
+              },
               children: /*#__PURE__*/jsx(Table.Cell, {
                 style: {
-                  height: "".concat(paddingTop, "px")
+                  height: `${paddingTop}px`
                 }
               })
-            }), virtualRows.map(function (row) {
-              return /*#__PURE__*/jsx(TableRow, {
-                row: table.getRowModel().rows[row.index]
-              }, row.index);
-            }), /*#__PURE__*/jsx(Table.Row, {
+            }), virtualRows.map(row => /*#__PURE__*/jsx(TableRow, {
+              row: table.getRowModel().rows[row.index]
+            }, row.index)), paddingBottom > 0 && /*#__PURE__*/jsx(Table.Row, {
               "data-testid": "virtual-padding-bottom",
               className: 'virtual-padding-bottom',
+              style: {
+                pointerEvents: 'none'
+              },
               children: /*#__PURE__*/jsx(Table.Cell, {
                 style: {
-                  height: "".concat(paddingBottom, "px")
+                  height: `${paddingBottom}px`
                 }
               })
             })]
-          }), !enableVirtual && table.getRowModel().rows.map(function (row) {
-            return /*#__PURE__*/jsx(TableRow, {
-              row: row
-            }, row.id);
-          })]
+          }), !enableVirtual && table.getRowModel().rows.map(row => /*#__PURE__*/jsx(TableRow, {
+            row: row
+          }, row.id))]
         })]
-      }), enablePagination && /*#__PURE__*/jsx("div", {
+      }), externalPaginator ? externalPaginator : enablePagination && /*#__PURE__*/jsx("div", {
         style: {
-          maxWidth: "".concat(table.getTotalSize(), "px")
+          maxWidth: `${table.getTotalSize()}px`
         },
         children: /*#__PURE__*/jsx(Pagination, {
           totalItems: table.getFilteredRowModel().rows.length,
           withItemIndicator: true,
           itemsPerPage: page.pageSize,
-          onChange: function onChange(e, p) {
-            return setPage(function (s) {
-              return _objectSpread(_objectSpread({}, s), {}, {
-                pageIndex: p - 1
-              });
-            });
-          },
+          onChange: (e, p) => setPage(s => ({
+            ...s,
+            pageIndex: p - 1
+          })),
           defaultPage: 1
         })
       })]

package/dist/esm/EdsDataGridContext.js

@@ -1,25 +1,22 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { createContext, useContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children"];
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-var EdsDataGridContext = /*#__PURE__*/createContext({
+const EdsDataGridContext = /*#__PURE__*/createContext({
   enableSorting: false,
   stickyHeader: false,
   enableColumnFiltering: false,
   table: null
 });
-function TableProvider(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
+function TableProvider({
+  children,
+  ...props
+}) {
   return /*#__PURE__*/jsx(EdsDataGridContext.Provider, {
     value: props,
     children: children
   });
 }
-var useTableContext = function useTableContext() {
-  return useContext(EdsDataGridContext);
-};
+const useTableContext = () => useContext(EdsDataGridContext);
 
 export { EdsDataGridContext, TableProvider, useTableContext };

package/dist/esm/components/DebouncedInput.js

@@ -1,59 +1,71 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useState, useEffect } from 'react';
-import { EdsProvider, Input, Autocomplete } from '@equinor/eds-core-react';
-import { jsx } from 'react/jsx-runtime';
+import { InputWrapper, Input, Autocomplete, Chip } from '@equinor/eds-core-react';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["value", "values", "onChange", "debounce"];
+/* istanbul ignore file */
 // File ignored, as relevant actions are covered via Filter.test.tsx
-function DebouncedInput(_ref) {
-  var _props$placeholder, _props$placeholder2;
-  var initialValue = _ref.value,
-    values = _ref.values,
-    onChange = _ref.onChange,
-    _ref$debounce = _ref.debounce,
-    debounce = _ref$debounce === void 0 ? 500 : _ref$debounce,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(initialValue),
-    _useState2 = _slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
-  useEffect(function () {
+function DebouncedInput({
+  value: initialValue,
+  values,
+  onChange,
+  debounce = 500,
+  label,
+  ...props
+}) {
+  const [value, setValue] = useState(initialValue);
+  useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
-  useEffect(function () {
-    var timeout = setTimeout(function () {
+  useEffect(() => {
+    const timeout = setTimeout(() => {
       onChange(value);
     }, debounce);
-    return function () {
-      return clearTimeout(timeout);
-    };
+    return () => clearTimeout(timeout);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
-  return /*#__PURE__*/jsx(EdsProvider, {
-    density: "compact",
-    children: props.type === 'number' ? /*#__PURE__*/jsx(Input, {
-      type: 'number',
-      placeholder: (_props$placeholder = props.placeholder) !== null && _props$placeholder !== void 0 ? _props$placeholder : 'Search',
-      value: value,
-      onChange: function onChange(e) {
-        return setValue(e.target.valueAsNumber);
-      }
-    }) : /*#__PURE__*/jsx(Autocomplete, {
-      options: values,
-      multiple: true,
-      optionComponent: function optionComponent(opt) {
-        return opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt;
-      },
-      "data-testid": 'autocomplete'
-      /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */
-      // @ts-ignore
-      ,
-      label: null,
-      placeholder: (_props$placeholder2 = props.placeholder) !== null && _props$placeholder2 !== void 0 ? _props$placeholder2 : 'Search',
-      onOptionsChange: function onOptionsChange(c) {
-        return setValue(c.selectedItems);
-      }
+  return /*#__PURE__*/jsx(Fragment, {
+    children: props.type === 'number' ? /*#__PURE__*/jsx(InputWrapper, {
+      label: props.placeholder,
+      children: /*#__PURE__*/jsx(Input, {
+        type: 'number',
+        placeholder: '0',
+        value: value,
+        onChange: e => setValue(e.target.valueAsNumber)
+      })
+    }) : /*#__PURE__*/jsxs(Fragment, {
+      children: [/*#__PURE__*/jsx(Autocomplete, {
+        options: values,
+        autoWidth: true,
+        multiple: true,
+        optionComponent: opt => opt === 'NULL_OR_UNDEFINED' ? '<Blank>' : opt,
+        "data-testid": 'autocomplete'
+        /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */,
+        label: `Select ${label ?? ''}`,
+        placeholder: props.placeholder ?? 'Search',
+        disablePortal: false /*TODO: Check with Oddbjørn re. sizing/position*/,
+        selectedOptions: value,
+        onOptionsChange: c => setValue(c.selectedItems),
+        multiline: true
+      }), /*#__PURE__*/jsx("div", {
+        style: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          marginTop: '8px'
+        },
+        children: value.map(v => /*#__PURE__*/jsxs(Chip, {
+          title: v,
+          onKeyDownCapture: event => {
+            if (['Backspace', 'Delete'].includes(event.key)) {
+              onChange(value.filter(item => item !== v));
+            }
+          },
+          style: {
+            margin: '4px'
+          },
+          onDelete: () => onChange(value.filter(item => item !== v)),
+          children: [v.slice(0, 20), v.length > 20 ? '...' : '']
+        }, v))
+      })]
     })
   });
 }