@elliemae/ds-data-table 2.3.0-alpha.8 → 2.3.0-next.2

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

@@ -0,0 +1,48 @@
+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 { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
+
+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 = multiSelectedValue.filter(val => val.dsId !== valToRemove.dsId);
+
+    if (newFilters[filterIndex].value.length === 0) {
+      var _nextRef$current;
+
+      if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.focus();
+      newFilters.splice(filterIndex, 1);
+    }
+
+    onFiltersChange(newFilters);
+  }, [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
+  }), 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

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

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

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

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

@@ -0,0 +1,37 @@
+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 { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
+
+const SingleDatePill = _ref => {
+  let {
+    columnHeader,
+    column,
+    value,
+    filters,
+    onFiltersChange,
+    prevRef,
+    innerRef,
+    nextRef
+  } = _ref;
+  const handleOnRemove = useCallback(() => {
+    var _nextRef$current;
+
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.focus();
+    onFiltersChange(filters.filter(filter => filter.id !== column));
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
+    type: "label",
+    label: columnHeader
+  }), /*#__PURE__*/_jsx(DSPillV2, {
+    type: "removable",
+    label: value.replace(/-/g, '/'),
+    onRemove: handleOnRemove,
+    innerRef: innerRef
+  })) : null;
+};
+
+export { SingleDatePill };

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

@@ -0,0 +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';

package/esm/parts/FilterBar/index.js

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

package/esm/parts/FilterBar/styled.js

@@ -0,0 +1,12 @@
+import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
+import Grid from '@elliemae/ds-grid';
+import styled from 'styled-components';
+
+const StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-10txld7-0"
+})(["display:flex;flex-wrap:wrap;width:", ";align-items:center;min-height:33px;padding:0 ", ";"], props => props.width, props => props.theme.space.xxxs);
+const StyledDropdownMenu = /*#__PURE__*/styled(DSDropdownMenu).withConfig({
+  componentId: "sc-10txld7-1"
+})(["margin-left:auto;"]);
+
+export { StyledDropdownMenu, StyledWrapper };

package/esm/parts/FilterBar/types.js

@@ -0,0 +1 @@
+

package/esm/parts/Filters/index.js

@@ -0,0 +1,123 @@
+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 '@babel/runtime/helpers/esm/jsx';
+import '@elliemae/ds-button';
+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 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-icons';
+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-system';
+import '../../DataTableContext.js';
+import '../Row.js';
+import '../Footer.js';
+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 '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); 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 FilterMapper = {
+  [FILTER_TYPES.SELECT]: SingleSelectFilter,
+  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,
+  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,
+  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,
+  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,
+  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,
+  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter
+};
+const FilterMapItem = props => {
+  const {
+    column,
+    filterValue: filters,
+    onFiltersChange
+  } = props;
+  const {
+    patchHeaderFilterButtonAndMenu,
+    patchHeader
+  } = useDispatchHeadersActions();
+  const filterValue = filters.find(filter => filter.id === column.id);
+  const onValueChange = useCallback((type, newValue) => {
+    const filterIndex = filters.findIndex(filter => filter.id === column.id);
+
+    if (newValue === undefined) {
+      const newFilters = filters.filter(filter => filter.id !== column.id);
+      onFiltersChange(newFilters);
+    } else if (filterIndex === -1) {
+      onFiltersChange([...filters, {
+        id: column.id,
+        type,
+        value: newValue
+      }]);
+    } else {
+      const newFilters = [...filters];
+      newFilters[filterIndex].type = type;
+      newFilters[filterIndex].value = newValue;
+      onFiltersChange(newFilters);
+    }
+  }, [column.id, filters, onFiltersChange]);
+
+  const filterProps = _objectSpread(_objectSpread({}, props), {}, {
+    filterValue: filterValue === null || filterValue === void 0 ? void 0 : filterValue.value,
+    onValueChange,
+    patchHeader,
+    patchHeaderFilterButtonAndMenu
+  });
+
+  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 ".concat(column));
+    }
+
+    const FilterComp = FilterMapper[column.filter];
+    return /*#__PURE__*/jsx(FilterComp, _objectSpread({}, filterProps));
+  }
+
+  if (column.Filter) {
+    if (typeof column.Filter !== 'function') {
+      throw new Error("column.Filter must be a component");
+    }
+
+    const FilterComp = column.Filter;
+    return /*#__PURE__*/jsx(FilterComp, _objectSpread({}, filterProps));
+  } // Column doesn't have any filters
+
+
+  return null;
+};
+
+export { FilterMapItem };

package/esm/parts/Footer.js

@@ -0,0 +1,18 @@
+import 'react';
+import PropTypes from 'prop-types';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+const Footer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
+};
+
+Footer.propTypes = {
+  children: PropTypes.node
+};
+
+export { Footer as default };

package/esm/parts/Headers/EmptyChildrenGroup.js

@@ -0,0 +1,11 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import styled from 'styled-components';
+
+var _StyledBox;
+const StyledBox = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1dcayi9-0"
+})(["height:24px;margin:0 ", ";border-top:1px solid ", ";"], props => props.theme.space.xxs, props => props.theme.colors.neutral[200]);
+const EmptyChildrenGroup = () => _StyledBox || (_StyledBox = /*#__PURE__*/_jsx(StyledBox, {}));
+
+export { EmptyChildrenGroup };

package/esm/parts/Headers/HeaderCell.js

@@ -0,0 +1,191 @@
+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';
+import { connect } from 'react-redux';
+import Grid from '@elliemae/ds-grid';
+import '../../redux/reducers/index.js';
+import { StyledHeaderRightIconsWrapper, StyledFocusWithin, StyledHeadTh } from '../../styled.js';
+import DataTableContext from '../../DataTableContext.js';
+import { SortByCaret } from '../SortByCaret.js';
+import '../TableContent.js';
+import '@elliemae/ds-circular-progress-indicator';
+import 'styled-components';
+import '@elliemae/ds-icons';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../Row.js';
+import '../Footer.js';
+import DragHandle from '../DnDHandle.js';
+import { SortableItemContext } from '../HoC/SortableItemContext.js';
+import { FilterMapItem } from '../Filters/index.js';
+import { HeaderResizer } from './HeaderResizer.js';
+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 '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';
+import { HeaderCellTitle } from './HeaderCellTitle.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); 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 buildScreenReaderInstructions = (colSpan, draggable, filterable, sortable) => {
+  const preffix = colSpan === 1 ? '' : 'Column Group. ';
+  if (!draggable && !filterable && !sortable) return preffix;
+  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. ".concat(message);
+  } else if (draggable || filterable) {
+    message = "This column is ".concat(draggable ? 'draggable' : 'filterable', ". To enable this interaction press the enter key. ").concat(message);
+  }
+
+  return "".concat(preffix).concat(message);
+};
+
+function mapStateToProps(state, ownProps) {
+  var _state$headers;
+
+  return {
+    reduxHeader: (_state$headers = state.headers) === null || _state$headers === void 0 ? void 0 : _state$headers[ownProps.column.id]
+  };
+}
+
+const connector = connect(mapStateToProps);
+
+const HeaderCellComp = props => {
+  var _FilterMapItem, _flattenedData$, _flattenedData$$origi;
+
+  const {
+    reduxHeader,
+    column,
+    isDragOverlay,
+    colSpan
+  } = props;
+  const ctx = useContext(DataTableContext);
+  const {
+    tableProps: {
+      isResizeable,
+      onColumnSortChange,
+      dragAndDropColumns,
+      onFiltersChange,
+      filters,
+      textWrap
+    },
+    flattenedData
+  } = ctx;
+  const {
+    patchHeader
+  } = useDispatchHeadersActions();
+  const dragHandleRef = useRef(null);
+  const filterIconRef = useRef(null);
+  const {
+    draggableProps
+  } = useContext(SortableItemContext);
+  const {
+    hasFilter,
+    hasDnD,
+    hasSortingCaret,
+    hasRightIcons,
+    shouldShowDnD,
+    hCols,
+    isDragging
+  } = useHeaderCellConfig({
+    column,
+    dragAndDropColumns,
+    draggableProps,
+    reduxHeader,
+    isDragOverlay
+  });
+  useRecoverFocusCol(isDragging, dragHandleRef);
+  const rightIcons = useMemo(() => {
+    if (!hasRightIcons) return null;
+    return /*#__PURE__*/_jsx(StyledHeaderRightIconsWrapper, {}, void 0, _FilterMapItem || (_FilterMapItem = /*#__PURE__*/_jsx(FilterMapItem, {
+      column: column,
+      ctx: ctx,
+      onFiltersChange: onFiltersChange,
+      reduxHeader: reduxHeader,
+      filterValue: filters,
+      innerRef: filterIconRef
+    })), hasSortingCaret && /*#__PURE__*/_jsx(SortByCaret, {
+      isSortedDesc: column.isSortedDesc
+    }));
+  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
+  const DnDHandleComponent = useMemo(() => /*#__PURE__*/_jsx(Grid, {
+    mr: "2px",
+    alignItems: "center",
+    style: {
+      position: 'relative'
+    }
+  }, void 0, /*#__PURE__*/_jsx(StyledFocusWithin, {
+    hideFocus: isDragging
+  }, void 0, /*#__PURE__*/_jsx(DragHandle, {
+    innerRef: dragHandleRef,
+    isReachable: reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops,
+    id: column.id,
+    isDragOverlay: isDragOverlay
+  }, column.id))), [column.id, isDragOverlay, isDragging, reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops]);
+  const handlers = useHeaderCellHandlers({
+    hasFilter,
+    patchHeader,
+    column,
+    reduxHeader,
+    hasDnD,
+    onColumnSortChange,
+    dragHandleRef,
+    filterIconRef,
+    headerRef: column.ref
+  });
+  return /*#__PURE__*/jsxs(StyledHeadTh, _objectSpread(_objectSpread({
+    column: column
+  }, handlers), {}, {
+    role: colSpan === 1 ? 'columnheader' : 'group',
+    colSpan: colSpan,
+    "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: column.ref,
+    children: [/*#__PURE__*/_jsx(Grid, {
+      width: "100%",
+      cols: hCols
+    }, void 0, shouldShowDnD && DnDHandleComponent, /*#__PURE__*/_jsx(HeaderCellTitle, {
+      column: column,
+      ctx: ctx,
+      draggableProps: draggableProps,
+      textWrap: textWrap
+    }), rightIcons, isResizeable && column.canResize !== false && /*#__PURE__*/_jsx(HeaderResizer, {
+      column: column
+    })), /*#__PURE__*/_jsx("span", {
+      id: "".concat(column.id, "-instructions"),
+      style: {
+        display: 'none'
+      },
+      "aria-hidden": "false"
+    }, void 0, buildScreenReaderInstructions(colSpan, dragAndDropColumns && column.disableDnD !== true, hasFilter, column.canSort))]
+  }));
+};
+
+const HeaderCell = connector(HeaderCellComp);
+
+export { HeaderCell };

package/esm/parts/Headers/HeaderCellGroup.js

@@ -0,0 +1,90 @@
+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/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 '@elliemae/ds-system';
+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 };