@elliemae/ds-data-table 2.0.0-alpha.1 → 2.0.0-alpha.13

package/esm/parts/FilterBar/components/MultiSelectPill.js

@@ -1,26 +1,46 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.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.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
-const MultiSelectPill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const MultiSelectPill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
+  const multiSelectedValue = value;
   const handleOnRemove = useCallback(valToRemove => {
     const newFilters = [...filters];
     const filterIndex = newFilters.findIndex(filter => filter.id === column);
-    newFilters[filterIndex].value = value.filter(val => val !== valToRemove);
+    newFilters[filterIndex].value = multiSelectedValue.filter(val => val.dsId !== valToRemove.dsId);
+
+    if (newFilters[filterIndex].value.length === 0) {
+      if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
+      newFilters.splice(filterIndex, 1);
+    }
+
     onFiltersChange(newFilters);
-  }, [filters, value, onFiltersChange, column]);
-  return value !== null && value !== void 0 && value.length ? /*#__PURE__*/_jsx(LabeledPills, {
+  }, [filters, multiSelectedValue, onFiltersChange, column, prevRef, nextRef]);
+  return multiSelectedValue !== null && multiSelectedValue !== void 0 && multiSelectedValue.length ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, value.map(val => /*#__PURE__*/_jsx(RemovablePill, {
-    label: val,
-    onRemove: () => handleOnRemove(val)
-  }, val))) : null;
+  }), multiSelectedValue.map((val, index) => /*#__PURE__*/_jsx(DSPillV2, {
+    type: "removable",
+    label: val.label,
+    onRemove: () => handleOnRemove(val),
+    innerRef: index === multiSelectedValue.length - 1 ? innerRef : {}
+  }, val.dsId))) : null;
 };
 
 export { MultiSelectPill };

package/esm/parts/FilterBar/components/NumberRangePill.js

@@ -1,22 +1,35 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+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 { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
-const NumberRangePill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const NumberRangePill = _ref => {
+  var _value$from, _value$to;
+
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
   const handleOnRemove = useCallback(() => {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(filter => filter.id !== column));
-  }, [onFiltersChange, filters, column]);
-  return value !== null && value !== void 0 && value.from && value !== null && value !== void 0 && value.to ? /*#__PURE__*/_jsx(LabeledPills, {
+  }, [onFiltersChange, filters, column, prevRef, nextRef]);
+  return ((_value$from = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from !== void 0 ? _value$from : '') !== '' && ((_value$to = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to !== void 0 ? _value$to : '') !== '' ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx(RemovablePill, {
-    label: `${value.from} - ${value.to}`,
-    onRemove: handleOnRemove
+  }), /*#__PURE__*/_jsx(DSPillV2, {
+    type: "removable",
+    label: "".concat(value.from, " - ").concat(value.to),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/parts/FilterBar/components/SelectPill.js

@@ -1,22 +1,33 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+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 { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
-const SelectPill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const SelectPill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
   const handleOnRemove = useCallback(() => {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(filter => filter.id !== column));
-  }, [onFiltersChange, filters, column]);
-  return value ? /*#__PURE__*/_jsx(LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx(RemovablePill, {
-    label: value,
-    onRemove: handleOnRemove
+  }), /*#__PURE__*/_jsx(DSPillV2, {
+    type: "removable",
+    label: value.label,
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/parts/FilterBar/components/SingleDatePill.js

@@ -1,23 +1,34 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+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/es.string.replace.js';
 import { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
-const SingleDatePill = ({
-  columnHeader,
-  column,
-  value,
-  filters,
-  onFiltersChange
-}) => {
+const SingleDatePill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
   const handleOnRemove = useCallback(() => {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(filter => filter.id !== column));
-  }, [onFiltersChange, filters, column]);
-  return value ? /*#__PURE__*/_jsx(LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, void 0, /*#__PURE__*/_jsx(RemovablePill, {
+  }), /*#__PURE__*/_jsx(DSPillV2, {
+    type: "removable",
     label: value.replace(/-/g, '/'),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/parts/FilterBar/components/index.js

@@ -1,6 +1,6 @@
 export { DateRangePill } from './DateRangePill.js';
+export { DateSwitcherPill } from './DateSwitcherPill.js';
 export { MultiSelectPill } from './MultiSelectPill.js';
 export { NumberRangePill } from './NumberRangePill.js';
 export { SelectPill } from './SelectPill.js';
 export { SingleDatePill } from './SingleDatePill.js';
-export { TextPill } from './TextPill.js';

package/esm/parts/Filters/index.js

@@ -1,40 +1,51 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.filter.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.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import { useCallback } from 'react';
 import { DateRangeFilter } from '../../addons/Filters/Components/DateRangeFilter/index.js';
+import { DateSwitcherFilter } from '../../addons/Filters/Components/DateSwitcherFilter/index.js';
 import { NumberRangeFilter } from '../../addons/Filters/Components/NumberRangeFilter/index.js';
+import { CurrencyRangeFilter } from '../../addons/Filters/Components/CurrencyRangeFilter/index.js';
 import { SingleSelectFilter } from '../../addons/Filters/Components/SelectFilter/SingleSelectFilter.js';
 import { MultiSelectFilter } from '../../addons/Filters/Components/SelectFilter/MultiSelectFilter.js';
 import { SingleDateFilter } from '../../addons/Filters/Components/SingleDateFilter/index.js';
-import { TextInputFilter } from '../../addons/Filters/Components/TextInputFilter/index.js';
-import '../../exported-related/FilterPopover.js';
 import '@babel/runtime/helpers/esm/jsx';
-import '../../styled.js';
-import '../../DataTableContext.js';
-import { jsx } from 'react/jsx-runtime';
-import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../redux/reducers/index.js';
 import '../../configs/constants.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import '@elliemae/ds-icons';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import '../../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 '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
+import '../../DataTableContext.js';
 import '../Row.js';
 import '../Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../HoC/SortableItemContext.js';
+import '@elliemae/ds-utilities';
 import 'uid';
 import { FILTER_TYPES } from '../../exported-related/FilterTypes.js';
 import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
-import '../../redux/reducers/index.js';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 import { useDispatchHeadersActions } from '../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
 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; }
@@ -43,10 +54,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const FilterMapper = {
   [FILTER_TYPES.SELECT]: SingleSelectFilter,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,
-  [FILTER_TYPES.TEXT]: TextInputFilter,
   [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,
   [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,
-  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter
+  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,
+  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,
+  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter
 };
 const FilterMapItem = props => {
   const {
@@ -88,7 +100,7 @@ const FilterMapItem = props => {
 
   if (typeof column.filter === 'string') {
     if (!(column.filter in FilterMapper)) {
-      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column}`);
+      throw new Error("column.filter must be a supported out-of-the-box filter in ".concat(column));
     }
 
     const FilterComp = FilterMapper[column.filter];
@@ -97,7 +109,7 @@ const FilterMapItem = props => {
 
   if (column.Filter) {
     if (typeof column.Filter !== 'function') {
-      throw new Error(`column.Filter must be a component`);
+      throw new Error("column.Filter must be a component");
     }
 
     const FilterComp = column.Filter;

package/esm/parts/Footer.js

@@ -2,11 +2,14 @@ import 'react';
 import PropTypes from 'prop-types';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
-const Footer = ({
-  children
-}) => /*#__PURE__*/jsx(Fragment, {
-  children: children
-});
+const Footer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+};
 
 Footer.propTypes = {
   children: PropTypes.node

package/esm/parts/Headers/HeaderCell.js

@@ -1,3 +1,8 @@
+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 { useContext, useRef, useMemo } from 'react';
@@ -10,7 +15,7 @@ import { SortByCaret } from '../SortByCaret.js';
 import '../TableContent.js';
 import '@elliemae/ds-circular-progress-indicator';
 import 'styled-components';
-import '@elliemae/ds-icons/WarningTriangle';
+import '@elliemae/ds-icons';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../Row.js';
@@ -23,13 +28,15 @@ import { useHeaderCellHandlers } from './useHeaderCellHandlers.js';
 import { useHeaderCellConfig } from './useHeaderCellConfig.js';
 import { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol.js';
 import { DATA_TESTID } from '../../configs/constants.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 '../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import '@elliemae/ds-icons';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import { jsxs } from 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import '@elliemae/ds-form';
 import { HeaderCellTitle } from './HeaderCellTitle.js';
 import { useDispatchHeadersActions } from '../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
@@ -43,12 +50,12 @@ const buildScreenReaderInstructions = (colSpan, draggable, filterable, sortable)
   let message = sortable ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so' : '';
 
   if (draggable && filterable) {
-    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;
+    message = "This column is draggable and filterable. To enable these interactions press the enter key. ".concat(message);
   } else if (draggable || filterable) {
-    message = `This column is ${draggable ? 'draggable' : 'filterable'}. To enable this interaction press the enter key. ${message}`;
+    message = "This column is ".concat(draggable ? 'draggable' : 'filterable', ". To enable this interaction press the enter key. ").concat(message);
   }
 
-  return `${preffix}${message}`;
+  return "".concat(preffix).concat(message);
 };
 
 function mapStateToProps(state, ownProps) {
@@ -62,7 +69,7 @@ function mapStateToProps(state, ownProps) {
 const connector = connect(mapStateToProps);
 
 const HeaderCellComp = props => {
-  var _FilterMapItem;
+  var _FilterMapItem, _flattenedData$, _flattenedData$$origi;
 
   const {
     reduxHeader,
@@ -79,14 +86,14 @@ const HeaderCellComp = props => {
       onFiltersChange,
       filters,
       textWrap
-    }
+    },
+    flattenedData
   } = ctx;
   const {
     patchHeader
   } = useDispatchHeadersActions();
   const dragHandleRef = useRef(null);
   const filterIconRef = useRef(null);
-  const headerRef = useRef(null);
   const {
     draggableProps
   } = useContext(SortableItemContext);
@@ -142,22 +149,23 @@ const HeaderCellComp = props => {
     onColumnSortChange,
     dragHandleRef,
     filterIconRef,
-    headerRef
+    headerRef: column.ref
   });
   return /*#__PURE__*/jsxs(StyledHeadTh, _objectSpread(_objectSpread({
     column: column
   }, handlers), {}, {
     role: colSpan === 1 ? 'columnheader' : 'group',
     colSpan: colSpan,
-    "aria-describedby": `${column.id}-instructions` // eslint-disable-next-line no-nested-ternary
+    "aria-describedby": "".concat(column.id, "-instructions") // eslint-disable-next-line no-nested-ternary
     ,
     "aria-sort": hasSortingCaret ? column.isSortedDesc ? 'descending' : 'ascending' : 'none',
     "data-testid": DATA_TESTID.DATA_TABLE_HEADER,
+    isFirstRowGroup: !!((_flattenedData$ = flattenedData[0]) !== null && _flattenedData$ !== void 0 && (_flattenedData$$origi = _flattenedData$.original) !== null && _flattenedData$$origi !== void 0 && _flattenedData$$origi.dimsumHeaderValue),
     tabIndex: column.isFocuseable === false ? -1 : 0,
     isDragOverlay: isDragOverlay,
     isDraggingActive: draggableProps && draggableProps.active,
     shouldShowDnD: shouldShowDnD,
-    ref: headerRef,
+    ref: column.ref,
     children: [/*#__PURE__*/_jsx(Grid, {
       width: "100%",
       cols: hCols
@@ -169,7 +177,7 @@ const HeaderCellComp = props => {
     }), rightIcons, isResizeable && column.canResize !== false && /*#__PURE__*/_jsx(HeaderResizer, {
       column: column
     })), /*#__PURE__*/_jsx("span", {
-      id: `${column.id}-instructions`,
+      id: "".concat(column.id, "-instructions"),
       style: {
         display: 'none'
       },

package/esm/parts/Headers/HeaderCellGroup.js

@@ -1,4 +1,6 @@
 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';
@@ -9,47 +11,54 @@ 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/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../styled.js';
 import { jsxs } from 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import '@elliemae/ds-form';
 import '../TableContent.js';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../../DataTableContext.js';
 import '../Row.js';
 import '../Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 
 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 = ({
-  header,
-  isDragOverlay,
-  isDraggingParent,
-  isLast
-}) => {
+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 ? NotSortableHeaderCellGroup : HeaderCellGroup;
-  const colSpan = (children === null || children === void 0 ? void 0 : children.length) ?? 1;
+  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 ${colSpan}`,
+    gridColumn: isDragOverlay ? 'auto' : "span ".concat(colSpan),
     isDragOverlay: isDragOverlay,
     isDragging: isDragging,
     cols: ['auto'],
@@ -75,7 +84,7 @@ const HeaderCellGroupComp = ({
 };
 
 // We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function
-const NotSortableHeaderCellGroup = HeaderCellGroupComp;
-const HeaderCellGroup = withDnDSortableColumnContext(HeaderCellGroupComp);
+const HeaderCellGroup = HeaderCellGroupComp;
+const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);
 
-export { HeaderCellGroup };
+export { HeaderCellGroup, HeaderCellGroupSortable as default };

package/esm/parts/Headers/HeaderCellTitle.js

@@ -2,36 +2,70 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 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/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';
+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 '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../DataTableContext.js';
+import '../Row.js';
+import '../Footer.js';
+import '../HoC/SortableItemContext.js';
 
 var _RequiredDot;
 
-const StringTitle = ({
-  column,
-  textWrap
-}) => (column.textWrap || textWrap) === 'truncate' ? /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
-  value: column.Header
-}) : /*#__PURE__*/jsx(Fragment, {
-  children: column.Header
-});
+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 = ({
-  column,
-  ctx,
-  draggableProps,
-  textWrap
-}) => /*#__PURE__*/_jsx("div", {
-  style: {
-    display: 'flex',
-    alignItems: 'center'
-  }
-}, 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, {}))));
+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 };