@elliemae/ds-datagrids 2.3.0-alpha.9 → 2.3.0-next.0

package/cjs/components/renderers/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var defaultClassedRenderers = require('./defaultClassedRenderers.js');
+var renderRowsLoader = require('./renderRowsLoader.js');
+
+const defaultRenderers = {
+  table: defaultClassedRenderers.TableWrapper,
+  header: {
+    wrapper: defaultClassedRenderers.HeaderWrapper,
+    row: defaultClassedRenderers.HeaderRow,
+    cell: defaultClassedRenderers.HeaderCell
+  },
+  body: {
+    wrapper: defaultClassedRenderers.BodyWrapper,
+    row: defaultClassedRenderers.BodyRow,
+    cell: defaultClassedRenderers.BodyCell
+  }
+};
+
+exports.renderRowsLoader = renderRowsLoader.renderRowsLoader;
+exports.defaultRenderers = defaultRenderers;

package/cjs/components/renderers/renderRowsLoader.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var RowsLoader = require('../RowsLoader.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _RowsLoader;
+function renderRowsLoader() {
+  return _RowsLoader || (_RowsLoader = /*#__PURE__*/_jsx__default["default"](RowsLoader, {}));
+}
+
+exports.renderRowsLoader = renderRowsLoader;

package/cjs/components/tableContext.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const TableContext = /*#__PURE__*/React__default["default"].createContext();
+
+exports.TableContext = TableContext;

package/cjs/defaultPlugins.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BodyHeaderScrollSyncPlugin = require('./plugins/body-header-scroll-sync/BodyHeaderScrollSyncPlugin.js');
+var ResizablePlugin = require('./plugins/resizable/ResizablePlugin.js');
+var CustomRendererPlugin = require('./plugins/custom-cell-renderer/CustomRendererPlugin.js');
+var ColumnSizingPlugin = require('./plugins/column-sizing/ColumnSizingPlugin.js');
+
+const defaultPlugins = [BodyHeaderScrollSyncPlugin.BodyHeaderScrollSyncPlugin, ResizablePlugin.ResizablePlugin, CustomRendererPlugin.CustomRendererPlugin, ColumnSizingPlugin.ColumnSizingPlugin];
+
+exports.defaultPlugins = defaultPlugins;

package/cjs/index.js

@@ -0,0 +1,67 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSDataGrid = require('./DSDataGrid.js');
+var ColumnsOptionsMenuSection = require('./components/ColumnsOptionsMenuSection.js');
+var ColumnVisibilityMenuOption = require('./components/ColumnVisibilityMenuOption.js');
+var EmptyState = require('./components/EmptyState.js');
+var IconColumn = require('./columns/IconColumn.js');
+var BodyHeaderScrollSyncPlugin = require('./plugins/body-header-scroll-sync/BodyHeaderScrollSyncPlugin.js');
+var DndColumnsPlugin = require('./plugins/column-dnd/DndColumnsPlugin.js');
+var ColumnSizingPlugin = require('./plugins/column-sizing/ColumnSizingPlugin.js');
+var CustomRendererPlugin = require('./plugins/custom-cell-renderer/CustomRendererPlugin.js');
+var EditablePlugin = require('./plugins/editable/EditablePlugin.js');
+var ComboBox = require('./plugins/editable/EditableComponents/ComboBox.js');
+var TextBox = require('./plugins/editable/EditableComponents/TextBox.js');
+var ExpandablePlugin = require('./plugins/expandable-grid/ExpandablePlugin.js');
+var ExpandableColumn = require('./plugins/expandable-grid/ExpandableColumn.js');
+var FilterablePlugin = require('./plugins/filterable/FilterablePlugin.js');
+var InfiniteScrollPlugin = require('./plugins/infinite-scrolling/InfiniteScrollPlugin.js');
+var PaginationPlugin = require('./plugins/pagination/PaginationPlugin.js');
+var ResizablePlugin = require('./plugins/resizable/ResizablePlugin.js');
+var DndRowsPlugin = require('./plugins/row-dnd/DndRowsPlugin.js');
+var SelectablePlugin = require('./plugins/selectable/SelectablePlugin.js');
+var SortablePlugin = require('./plugins/sortable/SortablePlugin.js');
+var ToolbarPlugin = require('./plugins/toolbar/ToolbarPlugin.js');
+var ExportDataPlugin = require('./plugins/export-data/ExportDataPlugin.js');
+var VirtualizationPlugin = require('./plugins/virtualization/VirtualizationPlugin.js');
+var rowSizes = require('./rowSizes.js');
+var CellWithAddons = require('./renders/CellWithAddons.js');
+var styled = require('./renders/styled.js');
+
+
+
+exports.DSDataGrid = DSDataGrid["default"];
+exports.DSDataGridsWithSchema = DSDataGrid.DSDataGridsWithSchema;
+exports.ColumnsOptionsMenuSection = ColumnsOptionsMenuSection;
+exports.getColumnVisibilityMenuOption = ColumnVisibilityMenuOption.getColumnVisibilityMenuOption;
+exports.EmptyState = EmptyState.EmptyState;
+exports.IconColumn = IconColumn;
+exports.BodyHeaderScrollSyncPlugin = BodyHeaderScrollSyncPlugin.BodyHeaderScrollSyncPlugin;
+exports.DndColumnsPlugin = DndColumnsPlugin.DndColumnsPlugin;
+exports.ColumnSizingPlugin = ColumnSizingPlugin.ColumnSizingPlugin;
+exports.CustomRendererPlugin = CustomRendererPlugin.CustomRendererPlugin;
+exports.EditablePlugin = EditablePlugin.EditablePlugin;
+exports.ComboBox = ComboBox;
+exports.TextBox = TextBox;
+exports.ExpandablePlugin = ExpandablePlugin.ExpandablePlugin;
+exports.ExpandableColumn = ExpandableColumn;
+exports.FilterablePlugin = FilterablePlugin.FilterablePlugin;
+exports.InfiniteScrollPlugin = InfiniteScrollPlugin.InfiniteScrollPlugin;
+exports.PaginationPlugin = PaginationPlugin.PaginationPlugin;
+exports.ResizablePlugin = ResizablePlugin.ResizablePlugin;
+exports.DndRowsPlugin = DndRowsPlugin.DndRowsPlugin;
+exports.SelectablePlugin = SelectablePlugin.SelectablePlugin;
+exports.SortablePlugin = SortablePlugin.SortablePlugin;
+exports.ToolbarPlugin = ToolbarPlugin.ToolbarPlugin;
+exports.ExportDataPlugin = ExportDataPlugin.ExportDataPlugin;
+exports.getColumnValue = ExportDataPlugin.getColumnValue;
+exports.getExportedData = ExportDataPlugin.getExportedData;
+exports.getVisibleRowData = ExportDataPlugin.getVisibleRowData;
+exports.VirtualizationPlugin = VirtualizationPlugin.VirtualizationPlugin;
+exports.RowSizes = rowSizes.RowSizes;
+exports.RowSizesOptions = rowSizes.RowSizesOptions;
+exports.RowSizesOptionsArr = rowSizes.RowSizesOptionsArr;
+exports.CellWithAddons = CellWithAddons.CellWithAddons;
+exports.CellContainer = styled.CellContainer;

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

@@ -0,0 +1,143 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var ScrollSync = require('@elliemae/ds-shared/ScrollSync');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var getScrollbarSize = require('../../utilities/getScrollbarSize.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+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__default["default"](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; }
+getScrollbarSize.getScrollbarWidth(2);
+
+const HeaderSyncHoc = Component => props => /*#__PURE__*/_jsx__default["default"](ScrollSync.ScrollSyncPane, {}, void 0, _ref => {
+  let {
+    registerPane
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+    innerRef: dsUtilities.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__default["default"](_ref2, _excluded);
+
+  const t = React.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"));
+  };
+
+  React.useEffect(() => {
+    setTimeout(repositionToolbarBasedOnBodyScrollPosition(), 300);
+  }, []);
+  React.useEffect(() => {
+    window.addEventListener('resize', repositionToolbarBasedOnBodyScrollPosition());
+    return () => {
+      window.removeEventListener('resize', repositionToolbarBasedOnBodyScrollPosition());
+    };
+  });
+  return /*#__PURE__*/_jsx__default["default"](ScrollSync.ScrollSyncPane, {
+    notPaginated: notPaginated
+  }, void 0, _ref3 => {
+    let {
+      registerPane
+    } = _ref3;
+    return /*#__PURE__*/jsxRuntime.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: dsUtilities.mergeRefs(innerRef, registerPane, t)
+    }, rest));
+  });
+};
+
+const TableSyncHoc = Component => props => /*#__PURE__*/_jsx__default["default"](ScrollSync.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__*/jsxRuntime.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 = React.useMemo(() => TableSyncHoc(Table), []);
+  renderers.header.wrapper = React.useMemo(() => HeaderSyncHoc(HeaderWrapper), []);
+  renderers.body.wrapper = React.useMemo(() => BodySyncHoc(BodyWrapper, !paginated, grid), []);
+  return renderers;
+};
+
+const BodyHeaderScrollSyncPlugin = createInstancePlugin__default["default"]('body-header-scroll-sync', {
+  decorateRenderers
+});
+
+exports.BodyHeaderScrollSyncPlugin = BodyHeaderScrollSyncPlugin;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BodyHeaderScrollSyncPlugin = require('./BodyHeaderScrollSyncPlugin.js');
+
+
+
+exports.BodyHeaderScrollSyncPlugin = BodyHeaderScrollSyncPlugin.BodyHeaderScrollSyncPlugin;

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

@@ -0,0 +1,134 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var React = require('react');
+var reactSortableHoc = require('react-sortable-hoc');
+var dsUtilities = require('@elliemae/ds-utilities');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var decorateGridWithDndColumns = require('./decorateGridWithDndColumns.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+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__default["default"](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 ? decorateGridWithDndColumns.addDragAndDropToColumn(grid, column) : column;
+
+const getHeaderRowProps = (props, grid) => {
+  const {
+    onMoveColumnStart,
+    onMoveColumnEnd,
+    onMoveColumnOver
+  } = grid.props;
+  const headerRowRef = React.useRef();
+  const columnDraggingOffset = React.useRef(0);
+  const sortedColumns = React.useRef(grid.getInstance().decoratedColumns);
+  const nodeRef = React.useRef();
+  React.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 = dsUtilities.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: dsUtilities.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 = React.useMemo(() => reactSortableHoc.SortableContainer(props => /*#__PURE__*/jsxRuntime.jsx(RowComponent, _objectSpread({}, dsUtilities.omit(props, keysToOmit)))), []);
+  const Cell = React.useMemo(() => reactSortableHoc.SortableElement(CellComponent), []);
+  return _objectSpread(_objectSpread({}, renderers), {}, {
+    header: _objectSpread(_objectSpread({}, renderers.header), {}, {
+      row: Row,
+      cell: Cell
+    })
+  });
+};
+
+const DndColumnsPlugin = createInstancePlugin__default["default"]('dnd-columns', {
+  getHeaderRowProps,
+  decorateColumn,
+  decorateRenderers
+});
+
+exports.DndColumnsPlugin = DndColumnsPlugin;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactSortableHoc = require('react-sortable-hoc');
+var dsIcons = require('@elliemae/ds-icons');
+var initColumnDefinition = require('@elliemae/ds-shared/useDataGrid/initColumnDefinition');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _GripperVertical, _DragHandle;
+const DragHandle = reactSortableHoc.SortableHandle(() => _GripperVertical || (_GripperVertical = /*#__PURE__*/_jsx__default["default"](dsIcons.GripperVertical, {
+  className: "drag-handle"
+})));
+
+const DndHeaderFormatter = value => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  children: [_DragHandle || (_DragHandle = /*#__PURE__*/_jsx__default["default"](DragHandle, {})), value]
+});
+
+const addDragAndDropToColumn = (grid, column) => {
+  column = initColumnDefinition.appendHeaderFormatter(DndHeaderFormatter, column);
+  return initColumnDefinition.mergeClassNameToColumnHeader('with-dnd-column', column);
+};
+
+exports.addDragAndDropToColumn = addDragAndDropToColumn;

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

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DndColumnsPlugin = require('./DndColumnsPlugin.js');
+
+
+
+exports.DndColumnsPlugin = DndColumnsPlugin.DndColumnsPlugin;

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

@@ -0,0 +1,88 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+var createInstancePlugin = require('@elliemae/ds-shared/createDataInstance/createInstancePlugin');
+var useStylesheetHelpers = require('./useStylesheetHelpers.js');
+var useColumnSizeService = require('./useColumnSizeService.js');
+var getTableProps = require('./ext-points/getTableProps.js');
+var decorateColumn = require('./ext-points/decorateColumn.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var createInstancePlugin__default = /*#__PURE__*/_interopDefaultLegacy(createInstancePlugin);
+
+/* 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 = dsUtilities.cx(rowProps.className, rowsStylesheet.getRowClassName());
+  return rowProps;
+};
+
+const decorateColumns = (columns, grid) => grid.columnsStylesheet.decorateColumns(columns, grid);
+
+const decorateGrid = grid => {
+  const isDragging = React.useRef(false);
+  const tableRef = React.useRef();
+  const resizedColumns = React.useRef({});
+  const scrollbarWidth = React.useRef();
+  const bodyWidth = React.useRef();
+  const allColumnsHaveBeenFixed = React.useRef(false);
+  const columnSizeService = useColumnSizeService(grid);
+  const {
+    columnsStylesheet,
+    rowsStylesheet
+  } = useStylesheetHelpers.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__default["default"]('column-sizing', {
+  decorateGrid,
+  decorateColumn: decorateColumn.decorateColumn,
+  getRowProps,
+  getHeaderRowProps,
+  getTableProps: getTableProps.getTableProps,
+  decorateColumns
+});
+
+exports.ColumnSizingPlugin = ColumnSizingPlugin;

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

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var React = require('react');
+var dsUtilities = require('@elliemae/ds-utilities');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+
+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__default["default"](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 = React.useRef();
+  React.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: dsUtilities.mergeRefs(cellRef, props.innerRef, registerColumn(column))
+  });
+};
+
+exports.columnMeasurerTransformer = columnMeasurerTransformer;

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsUtilities = require('@elliemae/ds-utilities');
+var columnMeasurerTransformer = require('../columnMeasurerTransformer.js');
+
+function decorateColumn(column, grid, index) {
+  const transformsPath = ['header', 'transforms'];
+  const transforms = dsUtilities.get(column, transformsPath, []);
+  transforms.push(columnMeasurerTransformer.columnMeasurerTransformer(grid.columnSizeService));
+  column.index = index;
+  dsUtilities.set(column, transformsPath, transforms);
+  return column;
+}
+
+exports.decorateColumn = decorateColumn;