@elliemae/ds-datagrids 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/plugins/column-sizing/ColumnSizingPlugin.js

@@ -1,21 +1,32 @@
-import * as React from "react";
-import { useRef } from "react";
-import { cx } from "@elliemae/ds-utilities";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { useStylesheetHelpers } from "./useStylesheetHelpers";
-import { useColumnSizeService } from "./useColumnSizeService";
-import { getTableProps } from "./ext-points/getTableProps";
-import { decorateColumn } from "./ext-points/decorateColumn";
-const getHeaderRowProps = (rowProps, { rowsStylesheet }) => {
-  rowProps.className = `${rowsStylesheet.getRowClassName()}-header`;
+import { useRef } from 'react';
+import { cx } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { useStylesheetHelpers } from './useStylesheetHelpers.js';
+import useColumnSizeService from './useColumnSizeService.js';
+import { getTableProps } from './ext-points/getTableProps.js';
+import { decorateColumn } from './ext-points/decorateColumn.js';
+
+/* eslint-disable no-param-reassign */
+
+const getHeaderRowProps = (rowProps, _ref) => {
+  let {
+    rowsStylesheet
+  } = _ref;
+  rowProps.className = "".concat(rowsStylesheet.getRowClassName(), "-header");
   return rowProps;
 };
-const getRowProps = (rowProps, { rowsStylesheet }) => {
+
+const getRowProps = (rowProps, _ref2) => {
+  let {
+    rowsStylesheet
+  } = _ref2;
   rowProps.className = cx(rowProps.className, rowsStylesheet.getRowClassName());
   return rowProps;
 };
+
 const decorateColumns = (columns, grid) => grid.columnsStylesheet.decorateColumns(columns, grid);
-const decorateGrid = (grid) => {
+
+const decorateGrid = grid => {
   const isDragging = useRef(false);
   const tableRef = useRef();
   const resizedColumns = useRef({});
@@ -23,20 +34,27 @@ const decorateGrid = (grid) => {
   const bodyWidth = useRef();
   const allColumnsHaveBeenFixed = useRef(false);
   const columnSizeService = useColumnSizeService(grid);
-  const { columnsStylesheet, rowsStylesheet } = useStylesheetHelpers(grid);
-  const updateRowWidth = (width) => {
+  const {
+    columnsStylesheet,
+    rowsStylesheet
+  } = useStylesheetHelpers(grid); // row size side-effect
+
+  const updateRowWidth = width => {
     const gridWidth = width || tableRef.current.offsetWidth;
     const columnsTotalSize = columnSizeService.computeColumnsTotalSize();
+
     if (columnsTotalSize > gridWidth + 5) {
       if (!allColumnsHaveBeenFixed.current && isDragging.current) {
         columnSizeService.setActualColumnsSizesFixed();
         allColumnsHaveBeenFixed.current = true;
       }
+
       rowsStylesheet.update(columnsTotalSize);
     } else {
-      rowsStylesheet.update(void 0);
+      rowsStylesheet.update(undefined);
     }
   };
+
   return {
     isDragging,
     tableRef,
@@ -49,7 +67,8 @@ const decorateGrid = (grid) => {
     updateRowWidth
   };
 };
-const ColumnSizingPlugin = createInstancePlugin("column-sizing", {
+
+const ColumnSizingPlugin = createInstancePlugin('column-sizing', {
   decorateGrid,
   decorateColumn,
   getRowProps,
@@ -57,7 +76,5 @@ const ColumnSizingPlugin = createInstancePlugin("column-sizing", {
   getTableProps,
   decorateColumns
 });
-export {
-  ColumnSizingPlugin
-};
-//# sourceMappingURL=ColumnSizingPlugin.js.map
+
+export { ColumnSizingPlugin };

package/esm/plugins/column-sizing/columnMeasurerTransformer.js

@@ -1,27 +1,56 @@
-import * as React from "react";
-import { useLayoutEffect, useRef } from "react";
-import { mergeRefs } from "@elliemae/ds-utilities";
-const columnMeasurerTransformer = (columnSizeService) => (value, { column, grid }, props = {}) => {
-  const { registerColumn } = columnSizeService;
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useRef, useLayoutEffect } from 'react';
+import { mergeRefs } from '@elliemae/ds-utilities';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const columnMeasurerTransformer = columnSizeService => function (value, _ref) {
+  let {
+    column,
+    grid
+  } = _ref;
+  let props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    registerColumn
+  } = columnSizeService;
   const cellRef = useRef();
   useLayoutEffect(() => {
-    const { columns, expandedToContentColumns } = columnSizeService;
     const {
-      props: { minColumnWidth },
+      columns,
+      expandedToContentColumns
+    } = columnSizeService;
+    const {
+      props: {
+        minColumnWidth
+      },
       resizedColumns
     } = grid.getInstance();
+
     if (cellRef.current) {
+      // FIX: merge
+      // if (column.width && column.width !== 'string' && !initialUsedSpace[column.property]) {
+      //   increaseUsedSpace(getColumnWidthSize(column.width, minColumnWidth, column), column.property)
+      // }
       if (column.expandWidthToContent && !expandedToContentColumns[column.uuid]) {
+        // measure the content and reset to flex
         const originalWidth = cellRef.current.offsetWidth;
-        cellRef.current.style.flex = "initial";
-        cellRef.current.style.minWidth = "initial";
+        cellRef.current.style.flex = 'initial';
+        cellRef.current.style.minWidth = 'initial';
         const calcWidth = cellRef.current.offsetWidth + 20;
+
         if (originalWidth + 20 <= calcWidth) {
           resizedColumns.current[column.uuid] = calcWidth;
           columns[column.uuid].minWidth = calcWidth;
         } else {
           columns[column.uuid].minWidth = originalWidth;
         }
+
         expandedToContentColumns[column.uuid] = true;
         cellRef.current.style.minWidth = null;
         cellRef.current.style.flex = 1;
@@ -29,12 +58,9 @@ const columnMeasurerTransformer = (columnSizeService) => (value, { column, grid
       }
     }
   });
-  return {
-    ...props,
+  return _objectSpread(_objectSpread({}, props), {}, {
     innerRef: mergeRefs(cellRef, props.innerRef, registerColumn(column))
-  };
-};
-export {
-  columnMeasurerTransformer
+  });
 };
-//# sourceMappingURL=columnMeasurerTransformer.js.map
+
+export { columnMeasurerTransformer };

package/esm/plugins/column-sizing/ext-points/decorateColumn.js

@@ -1,15 +1,13 @@
-import * as React from "react";
-import { get, set } from "@elliemae/ds-utilities";
-import { columnMeasurerTransformer } from "../columnMeasurerTransformer";
+import { get, set } from '@elliemae/ds-utilities';
+import { columnMeasurerTransformer } from '../columnMeasurerTransformer.js';
+
 function decorateColumn(column, grid, index) {
-  const transformsPath = ["header", "transforms"];
+  const transformsPath = ['header', 'transforms'];
   const transforms = get(column, transformsPath, []);
-  transforms.push(columnMeasurerTransformer(grid.columnSizeService, grid));
+  transforms.push(columnMeasurerTransformer(grid.columnSizeService));
   column.index = index;
   set(column, transformsPath, transforms);
   return column;
 }
-export {
-  decorateColumn
-};
-//# sourceMappingURL=decorateColumn.js.map
+
+export { decorateColumn };

package/esm/plugins/column-sizing/ext-points/getTableProps.js

@@ -1,18 +1,41 @@
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { useResizeObserver, mergeRefs } from "@elliemae/ds-utilities";
-import { getScrollbarSizeFromHeaderAndBody } from "../utils";
-function getTableProps(tableProps, { refs, tableRef, bodyWidth, scrollbarWidth, isDragging, columnSizeService, updateRowWidth, columns }) {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useEffect } from 'react';
+import { useResizeObserver, mergeRefs } from '@elliemae/ds-utilities';
+import { getScrollbarSizeFromHeaderAndBody } from '../utils.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function getTableProps(tableProps, _ref) {
+  let {
+    refs,
+    tableRef,
+    bodyWidth,
+    scrollbarWidth,
+    isDragging,
+    columnSizeService,
+    updateRowWidth,
+    columns
+  } = _ref;
   const [tableNode, tableRefCallback] = useState();
-  useResizeObserver(({ width }) => {
-    if (!refs.header.current)
-      return;
-    if (typeof scrollbarWidth.current !== "number")
-      scrollbarWidth.current = getScrollbarSizeFromHeaderAndBody(refs, width);
-    if (typeof bodyWidth.current !== "number")
-      bodyWidth.current = refs.body.offsetWidth;
-    if (isDragging.current)
-      return;
+  useResizeObserver(_ref2 => {
+    let {
+      width
+    } = _ref2;
+    if (!refs.header.current) return;
+    if (typeof scrollbarWidth.current !== 'number') scrollbarWidth.current = getScrollbarSizeFromHeaderAndBody(refs);
+    if (typeof bodyWidth.current !== 'number') bodyWidth.current = refs.body.offsetWidth; // DataGrid: header with width 0 after redirect from details page (https://jira.elliemae.io/browse/PUI-2162)
+    // if (scrollbarWidth.current !== 0 && width - scrollbarWidth.current > 0) {
+    //   refs.header.current.style.width = `${width - scrollbarWidth.current}px`
+    // }
+
+    if (isDragging.current) return;
     columnSizeService.updateMissingWidths(width);
     updateRowWidth(width);
   }, tableNode);
@@ -21,15 +44,12 @@ function getTableProps(tableProps, { refs, tableRef, bodyWidth, scrollbarWidth,
       columnSizeService.updateMissingWidths(tableNode.clientWidth);
       updateRowWidth(tableNode.clientWidth);
     }
-    if (typeof bodyWidth.current !== "number")
-      bodyWidth.current = refs.body.clientWidth;
+
+    if (typeof bodyWidth.current !== 'number') bodyWidth.current = refs.body.clientWidth;
   }, [columns, tableNode]);
-  return {
-    ...tableProps,
+  return _objectSpread(_objectSpread({}, tableProps), {}, {
     innerRef: mergeRefs(tableRefCallback, tableProps.innerRef, tableRef)
-  };
+  });
 }
-export {
-  getTableProps
-};
-//# sourceMappingURL=getTableProps.js.map
+
+export { getTableProps };

package/esm/plugins/column-sizing/getColumnNameFromProperty.js

@@ -1,8 +1,7 @@
-import * as React from "react";
-const getColumnNameFromProperty = (property) => property && property.replace(/\./g, "-");
-var getColumnNameFromProperty_default = getColumnNameFromProperty;
-export {
-  getColumnNameFromProperty_default as default,
-  getColumnNameFromProperty
-};
-//# sourceMappingURL=getColumnNameFromProperty.js.map
+import 'core-js/modules/es.string.replace.js';
+
+function getColumnFromProperty(property) {
+  return property && property.replace(/\./g, '-');
+}
+
+export { getColumnFromProperty as default };

package/esm/plugins/column-sizing/index.js

@@ -1,6 +1 @@
-import * as React from "react";
-import { ColumnSizingPlugin } from "./ColumnSizingPlugin";
-export {
-  ColumnSizingPlugin
-};
-//# sourceMappingURL=index.js.map
+export { ColumnSizingPlugin } from './ColumnSizingPlugin.js';

package/esm/plugins/column-sizing/useColumnSizeService.js

@@ -1,7 +1,21 @@
-import * as React from "react";
-import { useRef, useState, useLayoutEffect } from "react";
-import { getColumnWidthSize, getPercentageValue } from "./utils";
-const useColumnSizeService = (instance) => {
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import { useRef, useState, useLayoutEffect } from 'react';
+import { getColumnWidthSize, getPercentageValue } from './utils.js';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function useColumnSizeService(instance) {
   const columns = useRef({});
   const [expandableGridDetailWidth, setExpandableGridDetailWidth] = useState(0);
   const [expandableColumnWidth, setExpandableColumnWidth] = useState(0);
@@ -12,91 +26,118 @@ const useColumnSizeService = (instance) => {
     amount: 0,
     percentage: 0
   });
+
   const increaseUsedSpace = (space, columnUuid) => {
-    if (typeof space === "number") {
+    if (typeof space === 'number') {
       initialUsedSpace.current.space += space;
-    } else if (space && space.endsWith("%")) {
+    } else if (space && space.endsWith('%')) {
       initialUsedSpace.current.percentage += Number(space.slice(0, -1));
     }
+
     initialUsedSpace.current.amount += 1;
     initialUsedSpace.current[columnUuid] = true;
-  };
-  const registerColumn = (column) => (node) => columns.current[column.uuid] = { ...column, node };
-  const unregisterColumn = (column) => {
+  }; // eslint-disable-next-line no-return-assign
+
+
+  const registerColumn = column => node => columns.current[column.uuid] = _objectSpread(_objectSpread({}, column), {}, {
+    node
+  });
+
+  const unregisterColumn = column => {
     delete columns.current[column.property];
   };
+
   const setActualColumnsSizesFixed = () => {
     const columnsArray = Object.values(columns.current);
-    columnsArray.forEach((column) => {
+    columnsArray.forEach(column => {
       const columnOffsetWidth = column.node.offsetWidth;
-      column.updateBodyHeaderWidth(`${columnOffsetWidth}px`, `${columnOffsetWidth}px`);
+      column.updateBodyHeaderWidth("".concat(columnOffsetWidth, "px"), "".concat(columnOffsetWidth, "px"));
     });
   };
-  const updateMissingWidths = (totalWidth) => {
+
+  const updateMissingWidths = totalWidth => {
     if (totalWidth) {
       previousTotalWidth.current = totalWidth;
     }
+
     const gridWidth = previousTotalWidth.current - 4;
     const {
-      props: { minColumnWidth, expandable },
+      props: {
+        minColumnWidth,
+        expandable
+      },
       resizedColumns,
       decoratedColumns: columnDefinitions
     } = instance.getInstance();
-    if (!initialUsedSpace.current)
-      return;
-    const columnUuids = columnDefinitions.map((c) => c.uuid);
-    const columnsArray = Object.values(columns.current).filter((c) => columnUuids.includes(c.uuid));
-    initialUsedSpace.current = { space: 0, amount: 0, percentage: 0 };
-    columnsArray.forEach((column) => {
-      if (column.width && column.width !== "string" && !initialUsedSpace[column.uuid]) {
+    if (!initialUsedSpace.current) return;
+    const columnUuids = columnDefinitions.map(c => c.uuid);
+    const columnsArray = Object.values(columns.current).filter(c => columnUuids.includes(c.uuid)); // reset the initial space to the last columns
+
+    initialUsedSpace.current = {
+      space: 0,
+      amount: 0,
+      percentage: 0
+    };
+    columnsArray.forEach(column => {
+      if (column.width && column.width !== 'string' && !initialUsedSpace[column.uuid]) {
         increaseUsedSpace(getColumnWidthSize(column.width, minColumnWidth, column), column.uuid);
       }
     });
-    const nextColumnDict = {};
-    columnsArray.forEach((column) => {
-      if (typeof column.width === "number") {
+    const nextColumnDict = {}; // eslint-disable-next-line max-statements
+
+    columnsArray.forEach(column => {
+      if (typeof column.width === 'number') {
         nextColumnDict[column.uuid] = column;
         return;
       }
+
       if (resizedColumns.current[column.uuid]) {
         nextColumnDict[column.uuid] = column;
         return;
       }
+
       const {
         space: usedSpace,
         amount: usedAmount,
         percentage: usedPercentage
       } = initialUsedSpace.current;
-      const percentValue = getPercentageValue(column.width);
+      const percentValue = getPercentageValue(column.width); // check if is percentage value
+
       if (percentValue) {
         const pxs = gridWidth * percentValue / 100;
-        const pxWidths = `${getColumnWidthSize(pxs, minColumnWidth, column)}px`;
+        const pxWidths = "".concat(getColumnWidthSize(pxs, minColumnWidth, column), "px");
         column.updateBodyHeaderWidth(pxWidths, pxWidths);
         columns.current[column.uuid].computedWidth = pxs;
+
         if (expandable && column.expandableColumn) {
           setExpandableColumnWidth(pxs);
         }
       } else {
+        // otherwise the values are auto calculated from the total size
         const columnFixWidth = (gridWidth * (1 - usedPercentage / 100) - usedSpace) / (columnsArray.length - usedAmount);
         const percentWidth = columnFixWidth / gridWidth * 100;
         const pxs = gridWidth * percentWidth / 100;
         const actualWidthAfterChecks = getColumnWidthSize(pxs, minColumnWidth, column);
-        column.updateBodyHeaderWidth(`${actualWidthAfterChecks}px`, column.minWidth || minColumnWidth ? `${column.minWidth || minColumnWidth}px` : `${pxs}px`);
+        column.updateBodyHeaderWidth("".concat(actualWidthAfterChecks, "px"), column.minWidth || minColumnWidth ? "".concat(column.minWidth || minColumnWidth, "px") : "".concat(pxs, "px"));
         resizedColumns.current[column.uuid] = actualWidthAfterChecks;
         columns.current[column.uuid].computedWidth = actualWidthAfterChecks;
       }
+
       nextColumnDict[column.uuid] = column;
     });
     columns.current = nextColumnDict;
   };
+
   useLayoutEffect(() => {
     const totalWidth = computeColumnsTotalSize();
     setExpandableGridDetailWidth(totalWidth - expandableColumnWidth);
-  }, [expandableColumnWidth]);
+  }, [expandableColumnWidth]); // todo: make this incremental
+
   const computeColumnsTotalSize = () => {
     const columnsArray = Object.values(columns.current);
     return columnsArray.reduce((totalSize, column) => totalSize + column.node.offsetWidth, 0);
   };
+
   return {
     columns: columns.current,
     expandedToContentColumns: expandedToContentColumns.current,
@@ -110,10 +151,6 @@ const useColumnSizeService = (instance) => {
     expandableGridDetailWidth,
     expandableColumnWidth
   };
-};
-var useColumnSizeService_default = useColumnSizeService;
-export {
-  useColumnSizeService_default as default,
-  useColumnSizeService
-};
-//# sourceMappingURL=useColumnSizeService.js.map
+}
+
+export { useColumnSizeService as default };