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

package/esm/plugins/pagination/PaginationPlugin.js

@@ -0,0 +1,96 @@
+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
+    }
+  } = grid.getInstance();
+  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 => _objectSpread(_objectSpread({}, r), {}, {
+      _isGroup: r.isGroup
+    })), pagination);
+  }
+
+  return paginate(rows, pagination);
+};
+
+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__*/_jsx(FocusGridManager, {
+      hotKeys: hotKeys,
+      shouldRefocus: false
+    }, void 0, /*#__PURE__*/jsx(Body, _objectSpread(_objectSpread({}, props), {}, {
+      component: BodyWrapper
+    })));
+  }, []);
+  return renderers;
+};
+
+const PaginationPlugin = createInstancePlugin('pagination', {
+  registerStateHook: usePaginationState,
+  decorateRenderers,
+  composeRows
+});
+
+export { PaginationPlugin };

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

@@ -0,0 +1,36 @@
+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__*/_jsx(Paginator, {
+    onSelect: onPageSelect,
+    pages: paginated.amount,
+    pagination: pagination
+  })) : null;
+};
+
+export { Pagination };

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

@@ -0,0 +1,59 @@
+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__*/_jsx(PaginationContainer, {}, void 0, /*#__PURE__*/_jsx(PagifyContext, {
+    onSelect: page => page !== pagination.page && onSelect(page),
+    segments: segmentize({
+      page: pagination.page,
+      pages,
+      beginPages: 1,
+      endPages: 1,
+      sidePages: 1
+    })
+  }, void 0, /*#__PURE__*/_jsx(ReactPagify.Button, {
+    className: pagination.page <= 1 ? 'button-disabled' : '',
+    page: prevPage
+  }, void 0, labelPrevious), _ReactPagify$Segment || (_ReactPagify$Segment = /*#__PURE__*/_jsx(ReactPagify.Segment, {
+    field: "beginPages"
+  })), _ReactPagify$Ellipsis || (_ReactPagify$Ellipsis = /*#__PURE__*/_jsx(ReactPagify.Ellipsis, {
+    className: "ellipsis",
+    nextField: "previousPages",
+    previousField: "beginPages"
+  })), _ReactPagify$Segment2 || (_ReactPagify$Segment2 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
+    field: "previousPages"
+  })), _ReactPagify$Segment3 || (_ReactPagify$Segment3 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
+    className: "selected",
+    field: "centerPage"
+  })), _ReactPagify$Segment4 || (_ReactPagify$Segment4 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
+    field: "nextPages"
+  })), _ReactPagify$Ellipsis2 || (_ReactPagify$Ellipsis2 = /*#__PURE__*/_jsx(ReactPagify.Ellipsis, {
+    className: "ellipsis",
+    nextField: "endPages",
+    previousField: "nextPages"
+  })), _ReactPagify$Segment5 || (_ReactPagify$Segment5 = /*#__PURE__*/_jsx(ReactPagify.Segment, {
+    field: "endPages"
+  })), /*#__PURE__*/_jsx(ReactPagify.Button, {
+    className: pagination.page >= pages ? 'button-disabled' : '',
+    page: nextPage
+  }, void 0, labelNext)));
+};
+
+export { Paginator as default };

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

@@ -0,0 +1,71 @@
+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 = memoizeOne((step, min, max) => {
+  const options = range(min, max + step, step).map(generateOption);
+  return min === 0 ? options.slice(1, options.length) : options;
+});
+
+function PerPageDropdown(_ref2) {
+  let {
+    min = 0,
+    max = 100,
+    step = 5,
+    value = 0,
+    onChange = () => null
+  } = _ref2;
+  const options = getOptions(step, min, max);
+  return /*#__PURE__*/_jsx(DSComboBox, {
+    className: "per-page-dropdown",
+    components: {
+      SingleValue
+    },
+    containerProps: {
+      'data-testid': 'per-page-dropdown'
+    },
+    maxOptions: 10,
+    onChange: onChange,
+    options: options,
+    searchable: false,
+    value: value
+  });
+}
+
+export { PerPageDropdown as default };

package/esm/plugins/pagination/helper.js

@@ -0,0 +1,36 @@
+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;
+};
+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;
+  return {
+    amount: amountOfPages,
+    rows: perPage ? rows.slice(startPage * perPage, startPage * perPage + perPage) : rows,
+    allRows: rows,
+    page: startPage
+  };
+}
+
+export { paginate as default, parsePerPageNumber };

package/esm/plugins/pagination/index.js

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

package/esm/plugins/pagination/usePaginationState.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 '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,
+    maxPerPage = 50,
+    onPerPageChange = () => null,
+    onPageChange = () => null,
+    pagination: paginationProp = {
+      page: 1,
+      perPage: 10
+    },
+    groupedRows
+  } = grid.props;
+  const {
+    composedRows,
+    rows
+  } = grid.getInstance();
+  const [pagination, setPagination] = useDerivedStateFromProps(paginationProp);
+
+  const onPerPage = perPageNumber => {
+    const parsedPerPageNumber = parsePerPageNumber(perPageNumber, maxPerPage, minPerPage);
+    const actualNumber = parsedPerPageNumber ? parseInt(parsedPerPageNumber, 10) : 0;
+    setPagination(prevPagination => {
+      onPerPageChange(actualNumber);
+      return {
+        page: prevPagination.page,
+        perPage: actualNumber
+      };
+    });
+  };
+
+  const onPageSelect = page => {
+    const length = groupedRows ? composedRows.length : rows.length;
+    setPagination(prevPagination => {
+      const pages = Math.ceil(length / prevPagination.perPage);
+      onPageChange(page);
+      return _objectSpread(_objectSpread({}, prevPagination), {}, {
+        page: Math.min(Math.max(page, 1), pages)
+      });
+    });
+  };
+
+  return {
+    state: {
+      pagination
+    },
+    actions: {
+      onPerPage,
+      onPageSelect
+    }
+  };
+}
+
+export { usePaginationState };

package/esm/plugins/resizable/ResizablePlugin.js

@@ -0,0 +1,105 @@
+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; // 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,
+    onColumnResize
+  } = grid.props;
+  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;
+  return addResizableToColumn(column, resizableFormatter({
+    onDragStart: () => {
+      grid.isDragging.current = true;
+      grid.disableEvents();
+      onResizeStart();
+      onColumnResize('onResizeStart', {
+        column
+      });
+    },
+    onDrag: (width, increasing) => {
+      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();
+
+      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);
+          lastCol.updateBodyHeaderWidth(grid.resizedColumns.current[lastKey] + total - sum);
+          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);
+      }
+
+      onColumnResize('onResizeEnd', {
+        column,
+        width,
+        extraData
+      });
+      runAll(onResizeEnd)(width, extraData);
+      grid.updateRowWidth();
+    },
+    minWidth: (column.minWidth || minColumnWidth) - (isLast ? DELTA_LAST_COLUMN : 0),
+    isLast
+  }));
+};
+
+const ResizablePlugin = createInstancePlugin('resizable', {
+  decorateColumn
+});
+
+export { ResizablePlugin };

package/esm/plugins/resizable/decorateResizable.js

@@ -0,0 +1,49 @@
+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 React from 'react';
+import { appendHeaderFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import { useResizeHandle } from './useResizeHandle.js';
+import { jsx, jsxs } 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 addResizableToColumn = (column, formatter) => appendHeaderFormatter(formatter, column);
+
+const ResizableWrapper = /*#__PURE__*/React.memo(_ref => {
+  let {
+    value,
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    minWidth,
+    handleClassName
+  } = _ref;
+  const {
+    containerRef,
+    Handle
+  } = useResizeHandle({
+    onDrag,
+    onDragEnd,
+    onDragStart,
+    minWidth,
+    handleClassName
+  });
+  return /*#__PURE__*/jsxs("div", {
+    ref: containerRef,
+    className: "resize-container",
+    children: [value, /*#__PURE__*/_jsx(Handle, {})]
+  });
+}); // eslint-disable-next-line react/display-name
+
+const resizableFormatter = options => value => /*#__PURE__*/jsx(ResizableWrapper, _objectSpread(_objectSpread({}, options), {}, {
+  value: value
+}));
+
+export { addResizableToColumn, resizableFormatter };

package/esm/plugins/resizable/index.js

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

package/esm/plugins/resizable/useResizeHandle.js

@@ -0,0 +1,65 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef } from 'react';
+
+const useResizeHandle = _ref => {
+  let {
+    onDragStart,
+    onDrag,
+    onDragEnd,
+    minWidth = 10,
+    isLast = false
+  } = _ref;
+  const startX = useRef();
+  const startWidth = useRef();
+  const containerRef = useRef();
+
+  const triggerMove = (handler, event) => {
+    const increasing = startX.current - event.clientX < 0;
+    handler(Math.max(startWidth.current - startX.current + event.clientX, minWidth), increasing, {});
+  };
+
+  const onMouseMove = event => {
+    event.stopPropagation();
+    event.preventDefault();
+    triggerMove(onDrag, event);
+  };
+
+  const onMouseUp = event => {
+    event.stopPropagation();
+    event.preventDefault();
+    triggerMove(onDragEnd, event);
+    document.removeEventListener('mousemove', onMouseMove);
+    document.removeEventListener('mouseup', onMouseUp);
+  };
+
+  const onMouseDown = event => {
+    event.stopPropagation();
+    event.preventDefault();
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    startX.current = event.clientX;
+    startWidth.current = containerRef.current.offsetWidth;
+    triggerMove(onDragStart, event);
+  };
+
+  const HandleComponent = _ref2 => {
+    let {
+      className = 'resize-handle'
+    } = _ref2;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      _jsx("div", {
+        className: className,
+        onMouseDown: onMouseDown
+      })
+    );
+  };
+
+  return {
+    containerRef,
+    Handle: HandleComponent
+  };
+};
+
+export { useResizeHandle };

package/esm/plugins/resizable/utils.js

@@ -0,0 +1,23 @@
+import 'core-js/modules/es.string.replace.js';
+import { parseInt } from '@elliemae/ds-utilities';
+import memoizeOne from 'memoize-one';
+
+const isPercentNumber = stringNumber => typeof stringNumber === 'string' && stringNumber.indexOf('%') !== -1;
+const isPxNumber = stringNumber => typeof stringNumber === 'string' && stringNumber.indexOf('px') !== -1;
+const translatePercentageToPx = memoizeOne(function (totalWidth, percentage) {
+  let minWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  const parsedPercentatge = parseInt(percentage.replace('%', ''));
+  const width = totalWidth * parsedPercentatge / 100;
+  return width > minWidth ? width : minWidth;
+});
+const translateStringPxToNumberPx = memoizeOne(pxNumber => parseInt(pxNumber.replace('%', '')));
+memoizeOne((totalWidth, pxWidth) => "".concat(pxWidth / totalWidth * 100, "%"));
+memoizeOne(function (gridWidth) {
+  let width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  let minWidth = arguments.length > 2 ? arguments[2] : undefined;
+  if (isPercentNumber(width)) return translatePercentageToPx(gridWidth, width, minWidth);
+  if (isPxNumber(width)) return translateStringPxToNumberPx(width);
+  return width;
+});
+
+export { isPercentNumber, isPxNumber, translatePercentageToPx };