@elliemae/ds-data-table 1.61.0 → 2.0.0-alpha.12

package/esm/parts/Headers/HeaderCellGroup.js

@@ -1,93 +1,90 @@
-import 'react';
-import '@elliemae/ds-grid';
-import 'styled-components';
-import 'prop-types';
-export { V as HeaderCellGroup } from '../../styled-f76a0cd1.js';
-import '../HoC/SortableItemContext.js';
-import '../DropIndicator.js';
-import '../SortableHeaderCell.js';
-import './EmptyChildrenGroup.js';
-import '../../configs/constants.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { useContext } from 'react';
+import { Grid } from '@elliemae/ds-grid';
+import styled from 'styled-components';
+import { HeaderCell } from './HeaderCell.js';
+import { SortableItemContext } from '../HoC/SortableItemContext.js';
+import { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext.js';
+import DropIndicator from '../DropIndicator.js';
+import { SortableHeaderCell } from '../SortableHeaderCell.js';
+import { EmptyChildrenGroup } from './EmptyChildrenGroup.js';
+import { DATA_TESTID } from '../../configs/constants.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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '../../configs/useRowFlattenization.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@elliemae/ds-icons';
+import '../../styled.js';
+import { jsxs } from 'react/jsx-runtime';
 import '@elliemae/ds-form';
+import '../TableContent.js';
 import '@elliemae/ds-circular-progress-indicator';
-import '../EmptyContent.js';
-import '../Footer.js';
-import '@babel/runtime/helpers/esm/extends';
-import '../../helpers/sizeToCss.js';
-import '../../helpers/cellPadding.js';
-import 'react-redux';
-import '../../DataTableContext.js';
-import '../../addons/Pagination/Pagination.js';
-import '@elliemae/ds-pagination';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import '../../helpers/refs-helpers.js';
-import '../HoC/withDnDSortableRowContext.js';
-import '@dnd-kit/sortable';
-import '../HoC/withConditionalDnDRowContext.js';
-import '@dnd-kit/core';
-import '../../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import '../../helpers/dndkit/tree/useTreePreviewHandlers.js';
-import '../../helpers/dndkit/tree/getTreeKeyboardCoordinates.js';
-import '../../helpers/dndkit/utilities.js';
-import '../../helpers/dndkit/tree/useTreeActionHandlers.js';
-import 'lodash';
-import '../../helpers/dndkit/tree/customCollisionDetection.js';
-import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
-import '../HoC/DragOverlayContext.js';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popperjs';
-import '../../redux/reducers/index.js';
-import 'redux';
-import '../../redux/reducers/headersReducers/headersReducers.js';
-import '@reduxjs/toolkit';
-import '../../redux/reducers/headersReducers/logic.js';
-import '../../redux/reducers/headersReducers/defaults.js';
-import '../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import '../../redux/reducers/rowsReducers/rowsReducer.js';
-import '../../redux/reducers/rowsReducers/logic.js';
-import '../../redux/reducers/rowsReducers/defaults.js';
-import '../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import '../../exported-related/RowVariants.js';
-import '../../exported-related/Filters/singleSelectFilterFn.js';
-import '../../exported-related/Filters/multiSelectFilterFn.js';
-import '../../exported-related/Filters/textFilterFn.js';
-import 'moment';
-import '../../exported-related/Filters/numberRangeFilterFn.js';
-import '../../exported-related/Filters/currencyRangeFilterFn.js';
-import '../../exported-related/FilterTypes.js';
-import '../../addons/Columns/ColumnAction/ColumnAction.js';
-import '../../hooks/useRecoverFocusRow.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../../prop-types.js';
-import '../Cells/useCellStyle.js';
-import '../../exported-related/RowRenderer/useRowRendererProperties.js';
-import '../../exported-related/RowRenderer/useRowStyle.js';
-import '../../helpers/addCellData.js';
-import '../../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import '../../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import '../SortByCaret.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import '../../helpers/columnsToGrid.js';
-import './useHeaderCellHandlers.js';
-import './useHeaderCellConfig.js';
-import '../../hooks/useRecoverFocusCol.js';
-import './RequiredDot.js';
-import '../../configs/fixedSizes.js';
-import '../Loader.js';
-import '../../configs/zIndexInternalConfig.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../HoC/withConditionalDnDSortableContext.js';
-import '../../helpers/getIdFromUniqueRowAccessor.js';
 import '@elliemae/ds-system';
-//# sourceMappingURL=HeaderCellGroup.js.map
+import '@elliemae/ds-button';
+import '../../DataTableContext.js';
+import '../Row.js';
+import '../Footer.js';
+
+var _EmptyChildrenGroup;
+const StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1dqaj8a-0"
+})(["position:relative;width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";"], props => props.isDragOverlay ? 'fit-content' : '100%', props => props.gridColumn, props => props.isDragging ? props.theme.colors.neutral['080'] : 'white', props => props.isDragging ? 0.8 : 1, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent');
+
+const HeaderCellGroupComp = _ref => {
+  var _children$length;
+
+  let {
+    header,
+    isDragOverlay,
+    isDraggingParent,
+    isLast
+  } = _ref;
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const children = header.columns;
+  const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
+  const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
+  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;
+  const colSpan = (_children$length = children === null || children === void 0 ? void 0 : children.length) !== null && _children$length !== void 0 ? _children$length : 1;
+  return /*#__PURE__*/jsxs(StyledWrapper, {
+    ref: draggableProps ? draggableProps.setNodeRef : null,
+    gridColumn: isDragOverlay ? 'auto' : "span ".concat(colSpan),
+    isDragOverlay: isDragOverlay,
+    isDragging: isDragging,
+    cols: ['auto'],
+    "data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined,
+    children: [/*#__PURE__*/_jsx(HeaderCell, {
+      column: header,
+      isDragOverlay: isDragOverlay,
+      colSpan: colSpan
+    }), !!(children !== null && children !== void 0 && children.length) && !isDragOverlay && /*#__PURE__*/_jsx(SortableHeaderCell, {
+      items: children,
+      isDragOverlay: isDragOverlay
+    }, void 0, children.map((h, index) => /*#__PURE__*/_jsx(ChildGroup, {
+      header: h,
+      isDragOverlay: isDragOverlay,
+      isDraggingParent: isDragging,
+      isLast: index === children.length - 1
+    }, h.id))), (children === null || children === void 0 ? void 0 : children.length) && isDragOverlay && (_EmptyChildrenGroup || (_EmptyChildrenGroup = /*#__PURE__*/_jsx(EmptyChildrenGroup, {}))), /*#__PURE__*/_jsx(DropIndicator, {
+      vertical: true,
+      dropIndicatorPosition: dropIndicatorPosition,
+      isLast: isLast && isDragging
+    })]
+  });
+};
+
+// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function
+const HeaderCellGroup = HeaderCellGroupComp;
+const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);
+
+export { HeaderCellGroup, HeaderCellGroupSortable as default };

package/esm/parts/Headers/HeaderCellTitle.js

@@ -1,93 +1,71 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
-import '@elliemae/ds-truncated-tooltip-text';
-import './RequiredDot.js';
-import '../../configs/constants.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
+import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
+import { RequiredDot } from './RequiredDot.js';
+import { DATA_TESTID } from '../../configs/constants.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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '../../configs/useRowFlattenization.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
 import '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import '@elliemae/ds-icons';
 import 'styled-components';
-export { P as HeaderCellTitle } from '../../styled-f76a0cd1.js';
+import '../../styled.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
 import '@elliemae/ds-form';
+import '../TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '../EmptyContent.js';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../DataTableContext.js';
+import '../Row.js';
 import '../Footer.js';
-import '@babel/runtime/helpers/esm/extends';
 import '../HoC/SortableItemContext.js';
-import '../../helpers/getIdFromUniqueRowAccessor.js';
-import '../../helpers/sizeToCss.js';
-import '../../helpers/cellPadding.js';
-import 'react-redux';
-import '../../DataTableContext.js';
-import '../../addons/Pagination/Pagination.js';
-import '@elliemae/ds-pagination';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import 'prop-types';
-import '../../helpers/refs-helpers.js';
-import '../HoC/withDnDSortableRowContext.js';
-import '@dnd-kit/sortable';
-import '../HoC/withConditionalDnDRowContext.js';
-import '@dnd-kit/core';
-import '../../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import '../../helpers/dndkit/tree/useTreePreviewHandlers.js';
-import '../../helpers/dndkit/tree/getTreeKeyboardCoordinates.js';
-import '../../helpers/dndkit/utilities.js';
-import '../../helpers/dndkit/tree/useTreeActionHandlers.js';
-import 'lodash';
-import '../../helpers/dndkit/tree/customCollisionDetection.js';
-import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
-import '../HoC/DragOverlayContext.js';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popperjs';
-import '../../redux/reducers/index.js';
-import 'redux';
-import '../../redux/reducers/headersReducers/headersReducers.js';
-import '@reduxjs/toolkit';
-import '../../redux/reducers/headersReducers/logic.js';
-import '../../redux/reducers/headersReducers/defaults.js';
-import '../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import '../../redux/reducers/rowsReducers/rowsReducer.js';
-import '../../redux/reducers/rowsReducers/logic.js';
-import '../../redux/reducers/rowsReducers/defaults.js';
-import '../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import '../../exported-related/RowVariants.js';
-import '../../exported-related/Filters/singleSelectFilterFn.js';
-import '../../exported-related/Filters/multiSelectFilterFn.js';
-import '../../exported-related/Filters/textFilterFn.js';
-import 'moment';
-import '../../exported-related/Filters/numberRangeFilterFn.js';
-import '../../exported-related/Filters/currencyRangeFilterFn.js';
-import '../../exported-related/FilterTypes.js';
-import '../../addons/Columns/ColumnAction/ColumnAction.js';
-import '../../hooks/useRecoverFocusRow.js';
-import '../../prop-types.js';
-import '../Cells/useCellStyle.js';
-import '../../exported-related/RowRenderer/useRowRendererProperties.js';
-import '../../exported-related/RowRenderer/useRowStyle.js';
-import '../DropIndicator.js';
-import '../../configs/zIndexInternalConfig.js';
-import '../../helpers/addCellData.js';
-import '../../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import '../../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import '../SortByCaret.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import '../../helpers/columnsToGrid.js';
-import './useHeaderCellHandlers.js';
-import './useHeaderCellConfig.js';
-import '../../hooks/useRecoverFocusCol.js';
-import '../SortableHeaderCell.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../HoC/withConditionalDnDSortableContext.js';
-import './EmptyChildrenGroup.js';
-import '../../configs/fixedSizes.js';
-import '../Loader.js';
-import '@elliemae/ds-system';
-//# sourceMappingURL=HeaderCellTitle.js.map
+
+var _RequiredDot;
+
+const StringTitle = _ref => {
+  let {
+    column,
+    textWrap
+  } = _ref;
+  return (column.textWrap || textWrap) === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
+    value: column.Header
+  }) : /*#__PURE__*/jsx(Fragment, {
+    children: column.Header
+  });
+};
+
+const HeaderCellTitle = _ref2 => {
+  let {
+    column,
+    ctx,
+    draggableProps,
+    textWrap
+  } = _ref2;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE
+  }, void 0, typeof column.Header === 'string' ? /*#__PURE__*/_jsx(StringTitle, {
+    column: column,
+    textWrap: textWrap
+  }) : /*#__PURE__*/_jsx(column.Header, {
+    column: column,
+    ctx: ctx,
+    draggableProps: draggableProps
+  }), column.required && (_RequiredDot || (_RequiredDot = /*#__PURE__*/_jsx(RequiredDot, {}))));
+};
+
+export { HeaderCellTitle };

package/esm/parts/Headers/HeaderResizer.js

@@ -1,93 +1,115 @@
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import '../../configs/constants.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.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.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 { useContext, useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { ColsLayoutStyle } from '../../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
-import '../../helpers/columnsToGrid.js';
+import { columnsToGrid } from '../../helpers/columnsToGrid.js';
 import '../../configs/useRowFlattenization.js';
-import '@babel/runtime/helpers/esm/toConsumableArray';
+import '@babel/runtime/helpers/esm/jsx';
 import '@elliemae/ds-icons';
 import 'styled-components';
-export { O as HeaderResizer } from '../../styled-f76a0cd1.js';
+import { StyledResizer } from '../../styled.js';
+import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-form';
+import '../TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '../EmptyContent.js';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import DataTableContext from '../../DataTableContext.js';
+import '../Row.js';
 import '../Footer.js';
-import '@babel/runtime/helpers/esm/extends';
 import '../HoC/SortableItemContext.js';
-import '../../DataTableContext.js';
-import '../../helpers/sizeToCss.js';
-import '../../helpers/getIdFromUniqueRowAccessor.js';
-import '../../helpers/cellPadding.js';
-import 'react-redux';
-import '../../addons/Pagination/Pagination.js';
-import '@elliemae/ds-pagination';
-import '@elliemae/ds-indeterminate-progress-indicator';
-import 'prop-types';
-import '../../helpers/refs-helpers.js';
-import '../HoC/withDnDSortableRowContext.js';
-import '@dnd-kit/sortable';
-import '../HoC/withConditionalDnDRowContext.js';
-import '@dnd-kit/core';
-import '../../helpers/dndkit/tree/useTreeDndkitConfig.js';
-import '../../helpers/dndkit/tree/useTreePreviewHandlers.js';
-import '../../helpers/dndkit/tree/getTreeKeyboardCoordinates.js';
-import '../../helpers/dndkit/utilities.js';
-import '../../helpers/dndkit/tree/useTreeActionHandlers.js';
-import 'lodash';
-import '../../helpers/dndkit/tree/customCollisionDetection.js';
-import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
-import '../HoC/DragOverlayContext.js';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popperjs';
-import '../../redux/reducers/index.js';
-import 'redux';
-import '../../redux/reducers/headersReducers/headersReducers.js';
-import '@reduxjs/toolkit';
-import '../../redux/reducers/headersReducers/logic.js';
-import '../../redux/reducers/headersReducers/defaults.js';
-import '../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-import '../../redux/reducers/rowsReducers/rowsReducer.js';
-import '../../redux/reducers/rowsReducers/logic.js';
-import '../../redux/reducers/rowsReducers/defaults.js';
-import '../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import '../../exported-related/RowVariants.js';
-import '../../exported-related/Filters/singleSelectFilterFn.js';
-import '../../exported-related/Filters/multiSelectFilterFn.js';
-import '../../exported-related/Filters/textFilterFn.js';
-import 'moment';
-import '../../exported-related/Filters/numberRangeFilterFn.js';
-import '../../exported-related/Filters/currencyRangeFilterFn.js';
-import '../../exported-related/FilterTypes.js';
-import '../../addons/Columns/ColumnAction/ColumnAction.js';
-import '../../hooks/useRecoverFocusRow.js';
-import '@elliemae/ds-truncated-tooltip-text';
-import '../../prop-types.js';
-import '../Cells/useCellStyle.js';
-import '../../exported-related/RowRenderer/useRowRendererProperties.js';
-import '../../exported-related/RowRenderer/useRowStyle.js';
-import '../DropIndicator.js';
-import '../../configs/zIndexInternalConfig.js';
-import '../../helpers/addCellData.js';
-import '../../helpers/dndkit/hierarchy/useHierarchyActionHandlers.js';
-import '../../helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
-import '../SortByCaret.js';
-import '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import './useHeaderCellHandlers.js';
-import './useHeaderCellConfig.js';
-import '../../hooks/useRecoverFocusCol.js';
-import './RequiredDot.js';
-import '../SortableHeaderCell.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../HoC/withConditionalDnDSortableContext.js';
-import './EmptyChildrenGroup.js';
-import '../../configs/fixedSizes.js';
-import '../Loader.js';
-import '@elliemae/ds-system';
-//# sourceMappingURL=HeaderResizer.js.map
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+const narrow = (value, min, max) => Math.min(Math.max(value, min !== null && min !== void 0 ? min : 30), max !== null && max !== void 0 ? max : Infinity);
+
+const HeaderResizer = _ref => {
+  var _column$width;
+
+  let {
+    column
+  } = _ref;
+  const {
+    layoutHelpers: {
+      setGridLayout
+    },
+    visibleColumns,
+    tableProps: {
+      onColumnResize
+    }
+  } = useContext(DataTableContext);
+  const [isResizing, setIsResizing] = useState(false);
+  const [nextWidth, setNextWidth] = useState((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : 150);
+  const visibleColumnsCopy = useMemo(() => visibleColumns.map(col => _objectSpread({}, col)), [visibleColumns]);
+  useEffect(() => {
+    const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
+    visibleColumnsCopy[realColumnIndex].width = nextWidth;
+    setGridLayout(columnsToGrid(visibleColumnsCopy, ColsLayoutStyle.Fixed));
+  }, [column.id, nextWidth, setGridLayout, visibleColumnsCopy]);
+  const ref = useRef(null);
+  const onResizeStart = useCallback(() => {
+    setIsResizing(true);
+  }, []);
+  const onResizeHandler = useCallback(e => {
+    const delta = e.clientX - ref.current.getBoundingClientRect().x; // delta in pixels
+
+    const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
+    const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
+    setNextWidth(widthWithDelta); // To prevent text selection
+
+    e.preventDefault();
+    e.stopPropagation();
+  }, [column.id, nextWidth, visibleColumnsCopy]);
+  const onResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    onColumnResize(column.id, nextWidth);
+    setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
+  }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
+  useEffect(() => {
+    const debouncedResizeHandler = onResizeHandler;
+    const debouncedResizeEnd = onResizeEnd;
+
+    const addEvents = () => {
+      document.addEventListener('mousemove', debouncedResizeHandler);
+      document.addEventListener('touchmove', debouncedResizeHandler);
+      document.addEventListener('mouseup', debouncedResizeEnd);
+      document.addEventListener('touchend', debouncedResizeEnd);
+    };
+
+    const removeEvents = () => {
+      document.removeEventListener('mousemove', debouncedResizeHandler);
+      document.removeEventListener('touchmove', debouncedResizeHandler);
+      document.removeEventListener('mouseup', debouncedResizeEnd);
+      document.removeEventListener('touchend', debouncedResizeEnd);
+    };
+
+    if (isResizing) addEvents();else removeEvents(); // just in case the component is unmounted
+
+    return removeEvents;
+  }, [isResizing, onResizeHandler, onResizeEnd]);
+  return /*#__PURE__*/jsx(StyledResizer, {
+    ref: ref,
+    role: "separator",
+    draggable: false,
+    isResizing: isResizing,
+    onMouseDown: onResizeStart,
+    onTouchStart: onResizeStart,
+    onMouseUp: onResizeEnd,
+    onTouchEnd: onResizeEnd
+  });
+};
+
+export { HeaderResizer };

package/esm/parts/Headers/RequiredDot.js

@@ -1,20 +1,19 @@
-import React from 'react';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 
-var RequiredDot = function RequiredDot() {
-  return /*#__PURE__*/React.createElement("svg", {
-    height: "4",
-    width: "4",
-    style: {
-      marginBottom: '6px',
-      marginLeft: '4px'
-    }
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "2",
-    cy: "2",
-    r: "2",
-    fill: "red"
-  }));
-};
+var _circle;
+const RequiredDot = () => /*#__PURE__*/_jsx("svg", {
+  height: "4",
+  width: "4",
+  style: {
+    marginBottom: '6px',
+    marginLeft: '4px'
+  }
+}, void 0, _circle || (_circle = /*#__PURE__*/_jsx("circle", {
+  cx: "2",
+  cy: "2",
+  r: "2",
+  fill: "red"
+})));
 
 export { RequiredDot };
-//# sourceMappingURL=RequiredDot.js.map