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

package/esm/parts/Filters/index.js

@@ -1,93 +1,123 @@
-import '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'react';
-export { L as FilterMapItem } from '../../styled-f76a0cd1.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
+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 '../EmptyContent.js';
+import '@elliemae/ds-system';
+import '../../DataTableContext.js';
+import '../Row.js';
 import '../Footer.js';
-import '@babel/runtime/helpers/esm/extends';
 import '../HoC/SortableItemContext.js';
 import '@elliemae/ds-utilities';
 import 'uid';
-import '../../exported-related/FilterTypes.js';
+import { FILTER_TYPES } from '../../exported-related/FilterTypes.js';
+import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
-import '../../redux/reducers/headersReducers/useDispatchHeadersActions.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 '../../exported-related/RowVariants.js';
-import '../../exported-related/Filters/singleSelectFilterFn.js';
-import '../../exported-related/Filters/multiSelectFilterFn.js';
-import '../../exported-related/Filters/textFilterFn.js';
-import '../../exported-related/Filters/numberRangeFilterFn.js';
-import '../../exported-related/Filters/currencyRangeFilterFn.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 '../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '../../redux/reducers/rowsReducers/rowsReducer.js';
-import '@reduxjs/toolkit';
-import '../../redux/reducers/rowsReducers/logic.js';
-import '../../redux/reducers/rowsReducers/defaults.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 '../Headers/useHeaderCellHandlers.js';
-import '../Headers/useHeaderCellConfig.js';
-import '../../hooks/useRecoverFocusCol.js';
-import '../Headers/RequiredDot.js';
-import '../SortableHeaderCell.js';
-import '@babel/runtime/helpers/esm/objectWithoutProperties';
-import '../HoC/withConditionalDnDSortableContext.js';
-import '../Headers/EmptyChildrenGroup.js';
-import '../../configs/fixedSizes.js';
-import '../Loader.js';
-import 'redux';
-import '../../redux/reducers/headersReducers/headersReducers.js';
-import '../../redux/reducers/headersReducers/logic.js';
-import '../../redux/reducers/headersReducers/defaults.js';
-import '../../helpers/getIdFromUniqueRowAccessor.js';
-import '@elliemae/ds-system';
-//# sourceMappingURL=index.js.map
+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; }
+
+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 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

@@ -1,9 +1,14 @@
-import React from 'react';
+import 'react';
 import PropTypes from 'prop-types';
+import { jsx, Fragment } from 'react/jsx-runtime';
 
-var Footer = function Footer(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+const Footer = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
 };
 
 Footer.propTypes = {
@@ -11,4 +16,3 @@ Footer.propTypes = {
 };
 
 export { Footer as default };
-//# sourceMappingURL=Footer.js.map

package/esm/parts/Headers/EmptyChildrenGroup.js

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

package/esm/parts/Headers/HeaderCell.js

@@ -1,93 +1,191 @@
-import '@babel/runtime/helpers/esm/extends';
-import 'react';
-import 'react-redux';
-import '@elliemae/ds-grid';
+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';
-export { Q as HeaderCell } from '../../styled-f76a0cd1.js';
-import '../../DataTableContext.js';
-import '../SortByCaret.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 '../EmptyContent.js';
+import '@elliemae/ds-icons';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../Row.js';
 import '../Footer.js';
-import '../HoC/SortableItemContext.js';
-import './useHeaderCellHandlers.js';
-import './useHeaderCellConfig.js';
-import '../../hooks/useRecoverFocusCol.js';
-import '../../configs/constants.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
+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 '@babel/runtime/helpers/esm/toConsumableArray';
-import '@babel/runtime/helpers/esm/defineProperty';
-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';
-import '../../redux/reducers/headersReducers/useDispatchHeadersActions.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/rowsReducers/rowsReducer.js';
-import '../../redux/reducers/rowsReducers/logic.js';
-import '../../redux/reducers/rowsReducers/defaults.js';
-import '../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-import '../../helpers/sizeToCss.js';
-import '../../helpers/cellPadding.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 '@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 '@elliemae/ds-controlled-form';
-import '@elliemae/ds-form-layout-blocks';
-import '@elliemae/ds-grid/';
-import '@elliemae/ds-form/ComboBox';
-import '../../helpers/columnsToGrid.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';
-import '../../helpers/getIdFromUniqueRowAccessor.js';
-//# sourceMappingURL=HeaderCell.js.map
+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); 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 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 };