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

package/esm/plugins/pagination/PaginationPlugin.js

@@ -1,63 +1,96 @@
-import * as React from "react";
-import React2, { useMemo } from "react";
-import { mergeRefs } from "@elliemae/ds-utilities";
-import { FocusGrid } from "@elliemae/ds-shared/FocusGroup/FocusGrid";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { paginate } from "./helper";
-import { usePaginationState } from "./usePaginationState";
-import { NoResults } from "../../components/NoResults";
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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.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 React, { useMemo } from 'react';
+import { mergeRefs } from '@elliemae/ds-utilities';
+import FocusGridManager from '@elliemae/ds-shared/FocusGroup/FocusGrid';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import paginate from './helper.js';
+import { usePaginationState } from './usePaginationState.js';
+import NoResults from '../../components/NoResults.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["component", "rows", "rowRenderer", "noResultsPlaceholder", "innerRef", "innerBodyRef", "isPlaceholderActive"];
+
+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 composeRows = (rows, grid) => {
   const {
-    state: { pagination },
-    props: { groupedRows }
+    state: {
+      pagination
+    },
+    props: {
+      groupedRows
+    }
   } = grid.getInstance();
-  if (groupedRows)
-    return rows;
+  if (groupedRows) return rows; // disable pagination with grouping
+
   if (groupedRows) {
-    const filterIds = rows.map((r) => r.id);
-    return paginate(rows.filter((c) => filterIds.includes(c.id)).map((r) => ({
-      ...r,
+    const filterIds = rows.map(r => r.id);
+    return paginate(rows.filter(c => filterIds.includes(c.id)).map(r => _objectSpread(_objectSpread({}, r), {}, {
       _isGroup: r.isGroup
     })), pagination);
   }
+
   return paginate(rows, pagination);
 };
-const Body = React2.memo(({
-  component: Component,
-  rows,
-  rowRenderer,
-  noResultsPlaceholder,
-  innerRef,
-  innerBodyRef,
-  isPlaceholderActive = false,
-  ...otherBodyProps
-}) => /* @__PURE__ */ React2.createElement(Component, {
-  ...otherBodyProps,
-  innerRef: mergeRefs(innerRef)
-}, !isPlaceholderActive ? rows.map((row, index) => rowRenderer(row, { index, rowIndex: index }, {})) : /* @__PURE__ */ React2.createElement(NoResults, {
-  innerRef,
-  rowRenderer
-}, noResultsPlaceholder)));
+
+const Body = /*#__PURE__*/React.memo(_ref => {
+  let {
+    component: Component,
+    rows,
+    rowRenderer,
+    noResultsPlaceholder,
+    innerRef,
+    innerBodyRef,
+    // depends on body-header-scroll-sync
+    isPlaceholderActive = false
+  } = _ref,
+      otherBodyProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, otherBodyProps), {}, {
+    innerRef: mergeRefs(innerRef),
+    children: !isPlaceholderActive ? rows.map((row, index) => rowRenderer(row, {
+      index,
+      rowIndex: index
+    }, {})) : /*#__PURE__*/_jsx(NoResults, {
+      innerRef: innerRef,
+      rowRenderer: rowRenderer
+    }, void 0, noResultsPlaceholder)
+  }));
+});
+
 const decorateRenderers = (renderers, grid) => {
   const BodyWrapper = renderers.body.wrapper;
-  renderers.body.wrapper = useMemo(() => (props) => {
-    const { hotKeys, shouldRefocus, state } = grid.getInstance();
-    return /* @__PURE__ */ React2.createElement(FocusGrid, {
+  renderers.body.wrapper = useMemo(() => props => {
+    const {
       hotKeys,
+      shouldRefocus,
+      state
+    } = grid.getInstance();
+    return /*#__PURE__*/_jsx(FocusGridManager, {
+      hotKeys: hotKeys,
       shouldRefocus: false
-    }, /* @__PURE__ */ React2.createElement(Body, {
-      ...props,
+    }, void 0, /*#__PURE__*/jsx(Body, _objectSpread(_objectSpread({}, props), {}, {
       component: BodyWrapper
-    }));
+    })));
   }, []);
   return renderers;
 };
-const PaginationPlugin = createInstancePlugin("pagination", {
+
+const PaginationPlugin = createInstancePlugin('pagination', {
   registerStateHook: usePaginationState,
   decorateRenderers,
   composeRows
 });
-export {
-  PaginationPlugin
-};
-//# sourceMappingURL=PaginationPlugin.js.map
+
+export { PaginationPlugin };

package/esm/plugins/pagination/components/Pagination.js

@@ -1,34 +1,36 @@
-import * as React from "react";
-import React2 from "react";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { Paginator } from "./Paginator";
-import { PerPageDropdown } from "./PerPageDropdown";
-const PaginationControls = aggregatedClasses("div")("data-grid", "controls-pagination");
-const Pagination = ({
-  paginated,
-  pagination = {},
-  onPerPage,
-  onPageSelect,
-  paginationStep = 5,
-  maxPerPage = 10,
-  minPerPage = 5
-}) => {
-  const { perPage } = pagination;
-  if (pagination && pagination.conditionalPagination === true && paginated.amount === 1)
-    return null;
-  return paginated.amount > 0 ? /* @__PURE__ */ React2.createElement(PaginationControls, null, /* @__PURE__ */ React2.createElement(PerPageDropdown, {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import Paginator from './Paginator.js';
+import PerPageDropdown from './PerPageDropdown.js';
+
+const PaginationControls = aggregatedClasses('div')('data-grid', 'controls-pagination');
+
+const Pagination = _ref => {
+  let {
+    paginated,
+    pagination = {},
+    onPerPage,
+    onPageSelect,
+    paginationStep = 5,
+    maxPerPage = 10,
+    minPerPage = 5
+  } = _ref;
+  const {
+    perPage
+  } = pagination;
+  if (pagination && pagination.conditionalPagination === true && paginated.amount === 1) return null;
+  return paginated.amount > 0 ? /*#__PURE__*/_jsx(PaginationControls, {}, void 0, /*#__PURE__*/_jsx(PerPageDropdown, {
     max: maxPerPage,
     min: minPerPage,
     onChange: onPerPage,
     step: paginationStep,
     value: perPage
-  }), /* @__PURE__ */ React2.createElement(Paginator, {
+  }), /*#__PURE__*/_jsx(Paginator, {
     onSelect: onPageSelect,
     pages: paginated.amount,
-    pagination
+    pagination: pagination
   })) : null;
 };
-export {
-  Pagination
-};
-//# sourceMappingURL=Pagination.js.map
+
+export { Pagination };

package/esm/plugins/pagination/components/Paginator.js

@@ -1,16 +1,26 @@
-import * as React from "react";
-import React2 from "react";
-import ReactPagify from "react-pagify";
-import segmentize from "segmentize";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-const blockName = "data-grid";
-const PaginationContainer = aggregatedClasses("div")(blockName, "pagination");
-const PagifyContext = aggregatedClasses(ReactPagify?.Context)(blockName, "pagify-pagination");
-const Paginator = ({ pagination, pages, onSelect, labelPrevious = "Previous", labelNext = "Next" }) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import ReactPagify from 'react-pagify';
+import segmentize from 'segmentize';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+
+var _ReactPagify$Segment, _ReactPagify$Ellipsis, _ReactPagify$Segment2, _ReactPagify$Segment3, _ReactPagify$Segment4, _ReactPagify$Ellipsis2, _ReactPagify$Segment5;
+const blockName = 'data-grid';
+const PaginationContainer = aggregatedClasses('div')(blockName, 'pagination');
+const PagifyContext = aggregatedClasses(ReactPagify === null || ReactPagify === void 0 ? void 0 : ReactPagify.Context)(blockName, 'pagify-pagination');
+
+const Paginator = _ref => {
+  let {
+    pagination,
+    pages,
+    onSelect,
+    labelPrevious = 'Previous',
+    labelNext = 'Next'
+  } = _ref;
   const prevPage = pagination.page - 1;
   const nextPage = pagination.page + 1;
-  return /* @__PURE__ */ React2.createElement(PaginationContainer, null, /* @__PURE__ */ React2.createElement(PagifyContext, {
-    onSelect: (page) => page !== pagination.page && onSelect(page),
+  return /*#__PURE__*/_jsx(PaginationContainer, {}, void 0, /*#__PURE__*/_jsx(PagifyContext, {
+    onSelect: page => page !== pagination.page && onSelect(page),
     segments: segmentize({
       page: pagination.page,
       pages,
@@ -18,36 +28,32 @@ const Paginator = ({ pagination, pages, onSelect, labelPrevious = "Previous", la
       endPages: 1,
       sidePages: 1
     })
-  }, /* @__PURE__ */ React2.createElement(ReactPagify.Button, {
-    className: pagination.page <= 1 ? "button-disabled" : "",
+  }, void 0, /*#__PURE__*/_jsx(ReactPagify.Button, {
+    className: pagination.page <= 1 ? 'button-disabled' : '',
     page: prevPage
-  }, labelPrevious), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+  }, void 0, labelPrevious), _ReactPagify$Segment || (_ReactPagify$Segment = /*#__PURE__*/_jsx(ReactPagify.Segment, {
     field: "beginPages"
-  }), /* @__PURE__ */ React2.createElement(ReactPagify.Ellipsis, {
+  })), _ReactPagify$Ellipsis || (_ReactPagify$Ellipsis = /*#__PURE__*/_jsx(ReactPagify.Ellipsis, {
     className: "ellipsis",
     nextField: "previousPages",
     previousField: "beginPages"
-  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+  })), _ReactPagify$Segment2 || (_ReactPagify$Segment2 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
     field: "previousPages"
-  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+  })), _ReactPagify$Segment3 || (_ReactPagify$Segment3 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
     className: "selected",
     field: "centerPage"
-  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+  })), _ReactPagify$Segment4 || (_ReactPagify$Segment4 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
     field: "nextPages"
-  }), /* @__PURE__ */ React2.createElement(ReactPagify.Ellipsis, {
+  })), _ReactPagify$Ellipsis2 || (_ReactPagify$Ellipsis2 = /*#__PURE__*/_jsx(ReactPagify.Ellipsis, {
     className: "ellipsis",
     nextField: "endPages",
     previousField: "nextPages"
-  }), /* @__PURE__ */ React2.createElement(ReactPagify.Segment, {
+  })), _ReactPagify$Segment5 || (_ReactPagify$Segment5 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
     field: "endPages"
-  }), /* @__PURE__ */ React2.createElement(ReactPagify.Button, {
-    className: pagination.page >= pages ? "button-disabled" : "",
+  })), /*#__PURE__*/_jsx(ReactPagify.Button, {
+    className: pagination.page >= pages ? 'button-disabled' : '',
     page: nextPage
-  }, labelNext)));
+  }, void 0, labelNext)));
 };
-var Paginator_default = Paginator;
-export {
-  Paginator,
-  Paginator_default as default
-};
-//# sourceMappingURL=Paginator.js.map
+
+export { Paginator as default };

package/esm/plugins/pagination/components/PerPageDropdown.js

@@ -1,39 +1,71 @@
-import * as React from "react";
-import React2 from "react";
-import memoize from "memoize-one";
-import { range } from "@elliemae/ds-utilities";
-import { DSComboBox, components } from "@elliemae/ds-form";
-const SingleValue = ({ children, ...props }) => /* @__PURE__ */ React2.createElement(components.SingleValue, {
-  ...props
-}, children, " ", /* @__PURE__ */ React2.createElement("span", null, "per page"));
-const generateOption = (value) => ({
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'react';
+import memoizeOne from 'memoize-one';
+import { range } from '@elliemae/ds-utilities';
+import { DSComboBox, components } from '@elliemae/ds-form';
+import { jsxs } from 'react/jsx-runtime';
+
+var _span;
+
+const _excluded = ["children"];
+
+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 SingleValue = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsxs(components.SingleValue, _objectSpread(_objectSpread({}, props), {}, {
+    children: [children, " ", _span || (_span = /*#__PURE__*/_jsx("span", {}, void 0, "per page"))]
+  }));
+};
+
+const generateOption = value => ({
   value,
   label: value
 });
-const getOptions = memoize((step, min, max) => {
+
+const getOptions = memoizeOne((step, min, max) => {
   const options = range(min, max + step, step).map(generateOption);
   return min === 0 ? options.slice(1, options.length) : options;
 });
-function PerPageDropdown({ min = 0, max = 100, step = 5, value = 0, onChange = () => null }) {
+
+function PerPageDropdown(_ref2) {
+  let {
+    min = 0,
+    max = 100,
+    step = 5,
+    value = 0,
+    onChange = () => null
+  } = _ref2;
   const options = getOptions(step, min, max);
-  return /* @__PURE__ */ React2.createElement(DSComboBox, {
+  return /*#__PURE__*/_jsx(DSComboBox, {
     className: "per-page-dropdown",
     components: {
       SingleValue
     },
     containerProps: {
-      "data-testid": "per-page-dropdown"
+      'data-testid': 'per-page-dropdown'
     },
     maxOptions: 10,
-    onChange,
-    options,
+    onChange: onChange,
+    options: options,
     searchable: false,
-    value
+    value: value
   });
 }
-var PerPageDropdown_default = PerPageDropdown;
-export {
-  PerPageDropdown,
-  PerPageDropdown_default as default
-};
-//# sourceMappingURL=PerPageDropdown.js.map
+
+export { PerPageDropdown as default };

package/esm/plugins/pagination/helper.js

@@ -1,19 +1,27 @@
-import * as React from "react";
-const parsePerPageNumber = (number, max, min = 1) => {
-  if (number > max)
-    return max;
-  if (number < min)
-    return min;
+const parsePerPageNumber = function (number, max) {
+  let min = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+  if (number > max) return max;
+  if (number < min) return min;
   return number;
 };
-const paginate = (rows, { page, perPage = 1, amountOfPages: amount, totalRows }) => {
+function paginate(rows, _ref) {
+  let {
+    page,
+    perPage = 1,
+    amountOfPages: amount,
+    totalRows
+  } = _ref;
+
+  // return if pagination state is controlled
   if (amount && totalRows) {
     return {
       amount,
       rows,
       page
     };
-  }
+  } // adapt to zero indexed logic
+
+
   const p = page - 1 || 0;
   const amountOfPages = perPage ? Math.ceil(rows.length / (perPage > 0 ? perPage : 1)) : 1;
   const startPage = p < amountOfPages ? p : 0;
@@ -23,11 +31,6 @@ const paginate = (rows, { page, perPage = 1, amountOfPages: amount, totalRows })
     allRows: rows,
     page: startPage
   };
-};
-var helper_default = paginate;
-export {
-  helper_default as default,
-  paginate,
-  parsePerPageNumber
-};
-//# sourceMappingURL=helper.js.map
+}
+
+export { paginate as default, parsePerPageNumber };

package/esm/plugins/pagination/index.js

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

package/esm/plugins/pagination/usePaginationState.js

@@ -1,6 +1,16 @@
-import * as React from "react";
-import { useDerivedStateFromProps } from "@elliemae/ds-utilities";
-import { parsePerPageNumber } from "./helper";
+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 { useDerivedStateFromProps } from '@elliemae/ds-utilities';
+import { parsePerPageNumber } from './helper.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 usePaginationState(grid) {
   const {
     minPerPage = 0,
@@ -13,12 +23,16 @@ function usePaginationState(grid) {
     },
     groupedRows
   } = grid.props;
-  const { composedRows, rows } = grid.getInstance();
+  const {
+    composedRows,
+    rows
+  } = grid.getInstance();
   const [pagination, setPagination] = useDerivedStateFromProps(paginationProp);
-  const onPerPage = (perPageNumber) => {
+
+  const onPerPage = perPageNumber => {
     const parsedPerPageNumber = parsePerPageNumber(perPageNumber, maxPerPage, minPerPage);
     const actualNumber = parsedPerPageNumber ? parseInt(parsedPerPageNumber, 10) : 0;
-    setPagination((prevPagination) => {
+    setPagination(prevPagination => {
       onPerPageChange(actualNumber);
       return {
         page: prevPagination.page,
@@ -26,17 +40,18 @@ function usePaginationState(grid) {
       };
     });
   };
-  const onPageSelect = (page) => {
+
+  const onPageSelect = page => {
     const length = groupedRows ? composedRows.length : rows.length;
-    setPagination((prevPagination) => {
+    setPagination(prevPagination => {
       const pages = Math.ceil(length / prevPagination.perPage);
       onPageChange(page);
-      return {
-        ...prevPagination,
+      return _objectSpread(_objectSpread({}, prevPagination), {}, {
         page: Math.min(Math.max(page, 1), pages)
-      };
+      });
     });
   };
+
   return {
     state: {
       pagination
@@ -47,7 +62,5 @@ function usePaginationState(grid) {
     }
   };
 }
-export {
-  usePaginationState
-};
-//# sourceMappingURL=usePaginationState.js.map
+
+export { usePaginationState };

package/esm/plugins/resizable/ResizablePlugin.js

@@ -1,55 +1,80 @@
-import * as React from "react";
-import { runAll } from "@elliemae/ds-utilities";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { addResizableToColumn, resizableFormatter } from "./decorateResizable";
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import { runAll } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { addResizableToColumn, resizableFormatter } from './decorateResizable.js';
+
 const noop = () => null;
-const DELTA_LAST_COLUMN = 25;
+
+const DELTA_LAST_COLUMN = 25; // eslint-disable-next-line no-unused-vars
+
 const decorateColumn = (column, grid, index) => {
   const {
     onResizeEnd = noop,
     onResizeStart = noop,
     minColumnWidth = 90,
-    isColumnResizeActive = (col) => col.resizable && !col.expandableColumn,
+    isColumnResizeActive = col => col.resizable && !col.expandableColumn,
     onColumnResize
   } = grid.props;
-  const { decoratedColumns } = grid.getInstance();
-  const colIndex = decoratedColumns.findIndex((col) => col.property === column.property);
+  const {
+    decoratedColumns
+  } = grid.getInstance(); // need to do this because the decorated columns which the index in the function call
+  // could be different from the final decorated columns because a plugin could add a
+  // column afterwards
+
+  const colIndex = decoratedColumns.findIndex(col => col.property === column.property);
   const isLast = colIndex === decoratedColumns.length - 1;
-  if (!isColumnResizeActive(column))
-    return column;
+  if (!isColumnResizeActive(column)) return column;
   return addResizableToColumn(column, resizableFormatter({
     onDragStart: () => {
       grid.isDragging.current = true;
       grid.disableEvents();
       onResizeStart();
-      onColumnResize("onResizeStart", { column });
+      onColumnResize('onResizeStart', {
+        column
+      });
     },
     onDrag: (width, increasing) => {
-      const { resizedColumns, refs } = grid.getInstance();
+      const {
+        resizedColumns,
+        refs
+      } = grid.getInstance();
+
       if (isLast && increasing) {
         const thisCol = resizedColumns.current[column.uuid] || 0;
         width = Math.max(thisCol + DELTA_LAST_COLUMN, width);
       }
+
       column.updateBodyHeaderWidth(width, width);
       grid.updateRowWidth();
+
       if (isLast && increasing) {
+        // TODO: Move this to packages/ds-shared/src/ScrollSync/ScrollSync.js
+        // It isn't watching the scrollLeft so you have to move both at the same time
         refs.header.current.scrollLeft += DELTA_LAST_COLUMN;
         refs.body.current.scrollLeft += DELTA_LAST_COLUMN;
       }
     },
     onDragEnd: (width, increasing, extraData) => {
-      const { resizedColumns } = grid.getInstance();
+      const {
+        resizedColumns
+      } = grid.getInstance();
+
       if (isLast && increasing) {
         const thisCol = resizedColumns.current[column.uuid] || 0;
         width = Math.max(thisCol + DELTA_LAST_COLUMN, width);
       }
+
       resizedColumns.current[column.uuid] = width;
       grid.isDragging.current = false;
       grid.enableEvents();
+
       try {
         const total = grid.getInstance().refs.body.current.scrollWidth;
         const sum = Object.keys(grid.resizedColumns.current).reduce((p, n) => grid.resizedColumns.current[n] + p, 0);
         const lastKey = grid.decoratedColumns[grid.columns.length - 1].uuid;
+
         if (sum < total) {
           const lastCol = grid.getInstance().columnSizeService.columns[lastKey];
           lastCol.updateWidth(grid.resizedColumns.current[lastKey] + total - sum);
@@ -57,9 +82,10 @@ const decorateColumn = (column, grid, index) => {
           grid.getInstance().columnSizeService.updateMissingWidths(total);
         }
       } catch (error) {
-        console.error("Unexpected error in the addResizableToColumn trying to use the remaining grid space to the last column", error);
+        console.error('Unexpected error in the addResizableToColumn trying to use the remaining grid space to the last column', error);
       }
-      onColumnResize("onResizeEnd", {
+
+      onColumnResize('onResizeEnd', {
         column,
         width,
         extraData
@@ -71,10 +97,9 @@ const decorateColumn = (column, grid, index) => {
     isLast
   }));
 };
-const ResizablePlugin = createInstancePlugin("resizable", {
+
+const ResizablePlugin = createInstancePlugin('resizable', {
   decorateColumn
 });
-export {
-  ResizablePlugin
-};
-//# sourceMappingURL=ResizablePlugin.js.map
+
+export { ResizablePlugin };