@elliemae/ds-datagrids 2.3.0-alpha.8 → 2.3.0-next.2

package/esm/plugins/body-header-scroll-sync/BodyHeaderScrollSyncPlugin.js

@@ -0,0 +1,132 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo, useRef, useEffect } from 'react';
+import { mergeRefs } from '@elliemae/ds-utilities';
+import { ScrollSync, ScrollSyncPane } from '@elliemae/ds-shared/ScrollSync';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { getScrollbarWidth } from '../../utilities/getScrollbarSize.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["children", "classProps", "columns", "getContainer", "helperClass", "innerBodyRef", "innerRef", "isPlaceholderActive", "listProps", "lockAxis", "noResultsPlaceholder", "numRowsVisible", "onSortEnd", "onSortOver", "onSortStart", "rowKey", "rowRenderer", "rows", "useDragHandle", "className", "listComponent"];
+
+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; }
+getScrollbarWidth(2);
+
+const HeaderSyncHoc = Component => props => /*#__PURE__*/_jsx(ScrollSyncPane, {}, void 0, _ref => {
+  let {
+    registerPane
+  } = _ref;
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+    innerRef: mergeRefs(props.innerRef, registerPane)
+  }));
+});
+
+const BodySyncHoc = (Component, notPaginated, grid) => _ref2 => {
+  let {
+    children,
+    classProps,
+    columns,
+    getContainer,
+    helperClass,
+    innerBodyRef,
+    innerRef,
+    isPlaceholderActive,
+    listProps,
+    lockAxis,
+    noResultsPlaceholder,
+    numRowsVisible,
+    onSortEnd,
+    onSortOver,
+    onSortStart,
+    rowKey,
+    rowRenderer,
+    rows,
+    useDragHandle,
+    className,
+    listComponent
+  } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  const t = useRef();
+
+  const repositionToolbarBasedOnBodyScrollPosition = SCROLLBAR_WIDTH => () => {
+    grid.refs.body.current.style.setProperty('--toolbar-scroll', "".concat(grid.refs.body.current.offsetWidth + grid.refs.body.current.scrollLeft - 15, "px"));
+    grid.refs.body.current.style.setProperty('--toolbar-scroll-paginated', "".concat(grid.refs.body.current.offsetWidth + grid.refs.body.current.scrollLeft - 19, "px"));
+  };
+
+  useEffect(() => {
+    setTimeout(repositionToolbarBasedOnBodyScrollPosition(), 300);
+  }, []);
+  useEffect(() => {
+    window.addEventListener('resize', repositionToolbarBasedOnBodyScrollPosition());
+    return () => {
+      window.removeEventListener('resize', repositionToolbarBasedOnBodyScrollPosition());
+    };
+  });
+  return /*#__PURE__*/_jsx(ScrollSyncPane, {
+    notPaginated: notPaginated
+  }, void 0, _ref3 => {
+    let {
+      registerPane
+    } = _ref3;
+    return /*#__PURE__*/jsx(Component, _objectSpread({
+      ref: t,
+      classProps: classProps,
+      className: className,
+      listComponent: listComponent,
+      columns: columns,
+      getContainer: getContainer,
+      helperClass: helperClass,
+      innerBodyRef: innerBodyRef // innerRef={innerRef}
+      ,
+      isPlaceholderActive: isPlaceholderActive,
+      listProps: listProps,
+      lockAxis: lockAxis,
+      noResultsPlaceholder: noResultsPlaceholder,
+      numRowsVisible: numRowsVisible,
+      onSortEnd: onSortEnd,
+      onSortOver: onSortOver,
+      onSortStart: onSortStart,
+      rowKey: rowKey,
+      rowRenderer: rowRenderer,
+      rows: rows,
+      useDragHandle: useDragHandle,
+      innerRef: mergeRefs(innerRef, registerPane, t)
+    }, rest));
+  });
+};
+
+const TableSyncHoc = Component => props => /*#__PURE__*/_jsx(ScrollSync, {
+  proportional: false,
+  onScroll: e => {
+    e.target.style.setProperty('--toolbar-scroll', "".concat(e.target.offsetWidth + e.target.scrollLeft - 15, "px"));
+    e.target.style.setProperty('--toolbar-scroll-paginated', "".concat(e.target.offsetWidth + e.target.scrollLeft - 19, "px"));
+  }
+}, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
+
+const decorateRenderers = (renderers, grid) => {
+  const HeaderWrapper = renderers.header.wrapper;
+  const BodyWrapper = renderers.body.wrapper;
+  const Table = renderers.table;
+  const {
+    paginated
+  } = grid.props;
+  renderers.table = useMemo(() => TableSyncHoc(Table), []);
+  renderers.header.wrapper = useMemo(() => HeaderSyncHoc(HeaderWrapper), []);
+  renderers.body.wrapper = useMemo(() => BodySyncHoc(BodyWrapper, !paginated, grid), []);
+  return renderers;
+};
+
+const BodyHeaderScrollSyncPlugin = createInstancePlugin('body-header-scroll-sync', {
+  decorateRenderers
+});
+
+export { BodyHeaderScrollSyncPlugin };

package/esm/plugins/body-header-scroll-sync/index.js

@@ -0,0 +1 @@
+export { BodyHeaderScrollSyncPlugin } from './BodyHeaderScrollSyncPlugin.js';

package/esm/plugins/column-dnd/DndColumnsPlugin.js

@@ -0,0 +1,125 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useRef, useEffect, useMemo } from 'react';
+import { SortableContainer, SortableElement } from 'react-sortable-hoc';
+import { mergeRefs, omit, arrayMove } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { addDragAndDropToColumn } from './decorateGridWithDndColumns.js';
+import { jsx } from 'react/jsx-runtime';
+
+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 keysToOmit = ['axis', 'contentWindow', 'disableAutoscroll', 'distance', 'getContainer', 'getHelperDimensions', 'helperClass', 'helperContainer', 'hideSortableGhost', 'keyboardSortingTransitionDuration', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'onSortEnd', 'onSortMove', 'onSortOver', 'onSortStart', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'transitionDuration', 'updateBeforeSortStart', 'useDragHandle', 'useWindowAsScrollContainer'];
+
+const decorateColumn = (column, grid) => column.isUserColumn ? addDragAndDropToColumn(grid, column) : column;
+
+const getHeaderRowProps = (props, grid) => {
+  const {
+    onMoveColumnStart,
+    onMoveColumnEnd,
+    onMoveColumnOver
+  } = grid.props;
+  const headerRowRef = useRef();
+  const columnDraggingOffset = useRef(0);
+  const sortedColumns = useRef(grid.getInstance().decoratedColumns);
+  const nodeRef = useRef();
+  useEffect(() => {
+    sortedColumns.current = grid.getInstance().decoratedColumns;
+  });
+
+  const onSortOver = params => {
+    const {
+      index,
+      newIndex,
+      oldIndex
+    } = params;
+    const oldColumn = sortedColumns.current[oldIndex];
+    const newColumn = sortedColumns.current[newIndex];
+    if (!newColumn.isUserColumn || !oldColumn.isUserColumn) return;
+    const columnWidth = nodeRef.current.offsetWidth;
+    const newColumnWidth = headerRowRef.current.childNodes.item(newColumn.index).offsetWidth;
+    const forward = newIndex > oldIndex; // eslint-disable-next-line no-nested-ternary
+
+    const columnTranslate = forward ? newIndex > index ? columnWidth * -1 : 0 : newIndex < index ? columnWidth : 0;
+    columnDraggingOffset.current += forward ? newColumnWidth : newColumnWidth * -1;
+    newColumn.updateStyle({
+      transitionDuration: '300ms',
+      transform: "translate3d(".concat(columnTranslate, "px, 0, 0)")
+    });
+    oldColumn.updateStyle({
+      transitionDuration: '300ms',
+      transform: "translate3d(".concat(columnDraggingOffset.current, "px, 0, 0)")
+    });
+    sortedColumns.current = arrayMove(sortedColumns.current, oldIndex, newIndex);
+    onMoveColumnOver(params);
+  };
+
+  const onSortStart = params => {
+    const {
+      node
+    } = params;
+    grid.disableEvents();
+    nodeRef.current = node;
+    onMoveColumnStart(params);
+  };
+
+  const onSortEnd = params => {
+    const {
+      oldIndex,
+      newIndex
+    } = params;
+    grid.enableEvents();
+    columnDraggingOffset.current = 0;
+    sortedColumns.current = grid.decoratedColumns;
+    grid.decoratedColumns.forEach(column => {
+      if (!column.updateStyle) return;
+      column.updateStyle({
+        transitionDuration: null,
+        transform: null
+      });
+    });
+    const originalOldColumnIndex = grid.columns.findIndex(column => column.property === grid.decoratedColumns[oldIndex].property);
+    const originalNewColumnIndex = grid.columns.findIndex(column => column.property === grid.decoratedColumns[newIndex].property);
+    onMoveColumnEnd({
+      newIndex: originalNewColumnIndex,
+      oldIndex: originalOldColumnIndex
+    });
+  };
+
+  return {
+    axis: 'x',
+    helperClass: 'header-dnd-column',
+    innerRef: mergeRefs(props.innerRef, headerRowRef),
+    lockAxis: 'x',
+    onSortEnd,
+    onSortOver,
+    onSortStart,
+    useDragHandle: true
+  };
+};
+
+const decorateRenderers = renderers => {
+  const RowComponent = renderers.header.row;
+  const CellComponent = renderers.header.cell;
+  const Row = useMemo(() => SortableContainer(props => /*#__PURE__*/jsx(RowComponent, _objectSpread({}, omit(props, keysToOmit)))), []);
+  const Cell = useMemo(() => SortableElement(CellComponent), []);
+  return _objectSpread(_objectSpread({}, renderers), {}, {
+    header: _objectSpread(_objectSpread({}, renderers.header), {}, {
+      row: Row,
+      cell: Cell
+    })
+  });
+};
+
+const DndColumnsPlugin = createInstancePlugin('dnd-columns', {
+  getHeaderRowProps,
+  decorateColumn,
+  decorateRenderers
+});
+
+export { DndColumnsPlugin };

package/esm/plugins/column-dnd/decorateGridWithDndColumns.js

@@ -0,0 +1,22 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { SortableHandle } from 'react-sortable-hoc';
+import { GripperVertical } from '@elliemae/ds-icons';
+import { appendHeaderFormatter, mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+var _GripperVertical, _DragHandle;
+const DragHandle = SortableHandle(() => _GripperVertical || (_GripperVertical = /*#__PURE__*/_jsx(GripperVertical, {
+  className: "drag-handle"
+})));
+
+const DndHeaderFormatter = value => /*#__PURE__*/jsxs(Fragment, {
+  children: [_DragHandle || (_DragHandle = /*#__PURE__*/_jsx(DragHandle, {})), value]
+});
+
+const addDragAndDropToColumn = (grid, column) => {
+  column = appendHeaderFormatter(DndHeaderFormatter, column);
+  return mergeClassNameToColumnHeader('with-dnd-column', column);
+};
+
+export { addDragAndDropToColumn };

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

@@ -0,0 +1 @@
+export { DndColumnsPlugin } from './DndColumnsPlugin.js';

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

@@ -0,0 +1,80 @@
+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, _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 isDragging = useRef(false);
+  const tableRef = useRef();
+  const resizedColumns = useRef({});
+  const scrollbarWidth = useRef();
+  const bodyWidth = useRef();
+  const allColumnsHaveBeenFixed = useRef(false);
+  const columnSizeService = useColumnSizeService(grid);
+  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(undefined);
+    }
+  };
+
+  return {
+    isDragging,
+    tableRef,
+    bodyWidth,
+    scrollbarWidth,
+    columnSizeService,
+    rowsStylesheet,
+    columnsStylesheet,
+    resizedColumns,
+    updateRowWidth
+  };
+};
+
+const ColumnSizingPlugin = createInstancePlugin('column-sizing', {
+  decorateGrid,
+  decorateColumn,
+  getRowProps,
+  getHeaderRowProps,
+  getTableProps,
+  decorateColumns
+});
+
+export { ColumnSizingPlugin };

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

@@ -0,0 +1,66 @@
+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
+      },
+      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';
+        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;
+        column.node = cellRef.current;
+      }
+    }
+  });
+  return _objectSpread(_objectSpread({}, props), {}, {
+    innerRef: mergeRefs(cellRef, props.innerRef, registerColumn(column))
+  });
+};
+
+export { columnMeasurerTransformer };

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

@@ -0,0 +1,13 @@
+import { get, set } from '@elliemae/ds-utilities';
+import { columnMeasurerTransformer } from '../columnMeasurerTransformer.js';
+
+function decorateColumn(column, grid, index) {
+  const transformsPath = ['header', 'transforms'];
+  const transforms = get(column, transformsPath, []);
+  transforms.push(columnMeasurerTransformer(grid.columnSizeService));
+  column.index = index;
+  set(column, transformsPath, transforms);
+  return column;
+}
+
+export { decorateColumn };

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

@@ -0,0 +1,55 @@
+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(_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);
+  useEffect(() => {
+    if (tableNode) {
+      columnSizeService.updateMissingWidths(tableNode.clientWidth);
+      updateRowWidth(tableNode.clientWidth);
+    }
+
+    if (typeof bodyWidth.current !== 'number') bodyWidth.current = refs.body.clientWidth;
+  }, [columns, tableNode]);
+  return _objectSpread(_objectSpread({}, tableProps), {}, {
+    innerRef: mergeRefs(tableRefCallback, tableProps.innerRef, tableRef)
+  });
+}
+
+export { getTableProps };

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

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1 @@
+export { ColumnSizingPlugin } from './ColumnSizingPlugin.js';

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

@@ -0,0 +1,156 @@
+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);
+  const expandedToContentColumns = useRef({});
+  const previousTotalWidth = useRef(0);
+  const initialUsedSpace = useRef({
+    space: 0,
+    amount: 0,
+    percentage: 0
+  });
+
+  const increaseUsedSpace = (space, columnUuid) => {
+    if (typeof space === 'number') {
+      initialUsedSpace.current.space += space;
+    } else if (space && space.endsWith('%')) {
+      initialUsedSpace.current.percentage += Number(space.slice(0, -1));
+    }
+
+    initialUsedSpace.current.amount += 1;
+    initialUsedSpace.current[columnUuid] = true;
+  }; // 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 => {
+      const columnOffsetWidth = column.node.offsetWidth;
+      column.updateBodyHeaderWidth("".concat(columnOffsetWidth, "px"), "".concat(columnOffsetWidth, "px"));
+    });
+  };
+
+  const updateMissingWidths = totalWidth => {
+    if (totalWidth) {
+      previousTotalWidth.current = totalWidth;
+    }
+
+    const gridWidth = previousTotalWidth.current - 4;
+    const {
+      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)); // 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 = {}; // 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); // check if is percentage value
+
+      if (percentValue) {
+        const pxs = gridWidth * percentValue / 100;
+        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("".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]); // 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,
+    initialUsedSpace: initialUsedSpace.current,
+    increaseUsedSpace,
+    registerColumn,
+    unregisterColumn,
+    updateMissingWidths,
+    computeColumnsTotalSize,
+    setActualColumnsSizesFixed,
+    expandableGridDetailWidth,
+    expandableColumnWidth
+  };
+}
+
+export { useColumnSizeService as default };