@elliemae/ds-data-table 2.2.0-alpha.3 → 2.2.0-next.2

package/cjs/parts/Headers/EmptyChildrenGroup.js

@@ -1,42 +1,20 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var EmptyChildrenGroup_exports = {};
-__export(EmptyChildrenGroup_exports, {
-  EmptyChildrenGroup: () => EmptyChildrenGroup
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-const StyledBox = import_styled_components.default.div`
-  height: 24px;
-  margin: 0 ${(props) => props.theme.space.xxs};
-  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};
-`;
-const EmptyChildrenGroup = () => /* @__PURE__ */ import_react.default.createElement(StyledBox, null);
-module.exports = __toCommonJS(EmptyChildrenGroup_exports);
-//# sourceMappingURL=EmptyChildrenGroup.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _StyledBox;
+const StyledBox = /*#__PURE__*/styled__default["default"].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__default["default"](StyledBox, {}));
+
+exports.EmptyChildrenGroup = EmptyChildrenGroup;

package/cjs/parts/Headers/HeaderCell.js

@@ -1,116 +1,156 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var HeaderCell_exports = {};
-__export(HeaderCell_exports, {
-  HeaderCell: () => HeaderCell
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_react_redux = __toESM(require("react-redux"));
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
-var import_reducers = __toESM(require("../../redux/reducers"));
-var import_styled = __toESM(require("../../styled"));
-var import_DataTableContext = __toESM(require("../../DataTableContext"));
-var import_SortByCaret = __toESM(require("../SortByCaret"));
-var import__ = __toESM(require(".."));
-var import_SortableItemContext = __toESM(require("../HoC/SortableItemContext"));
-var import_Filters = __toESM(require("../Filters"));
-var import_HeaderResizer = __toESM(require("./HeaderResizer"));
-var import_useHeaderCellHandlers = __toESM(require("./useHeaderCellHandlers"));
-var import_useHeaderCellConfig = __toESM(require("./useHeaderCellConfig"));
-var import_useRecoverFocusCol = __toESM(require("../../hooks/useRecoverFocusCol"));
-var import_constants = __toESM(require("../../configs/constants"));
-var import_HeaderCellTitle = __toESM(require("./HeaderCellTitle"));
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var reactRedux = require('react-redux');
+var Grid = require('@elliemae/ds-grid');
+require('../../redux/reducers/index.js');
+var styled = require('../../styled.js');
+var DataTableContext = require('../../DataTableContext.js');
+var SortByCaret = require('../SortByCaret.js');
+require('../TableContent.js');
+require('@elliemae/ds-circular-progress-indicator');
+require('styled-components');
+require('@elliemae/ds-icons');
+require('@elliemae/ds-system');
+require('@elliemae/ds-button');
+require('../Row.js');
+require('../Footer.js');
+var DnDHandle = require('../DnDHandle.js');
+var SortableItemContext = require('../HoC/SortableItemContext.js');
+var index = require('../Filters/index.js');
+var HeaderResizer = require('./HeaderResizer.js');
+var useHeaderCellHandlers = require('./useHeaderCellHandlers.js');
+var useHeaderCellConfig = require('./useHeaderCellConfig.js');
+var useRecoverFocusCol = require('../../hooks/useRecoverFocusCol.js');
+var constants = require('../../configs/constants.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('react-virtual');
+require('../../configs/useRowFlattenization.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('@elliemae/ds-form');
+var HeaderCellTitle = require('./HeaderCellTitle.js');
+var useDispatchHeadersActions = require('../../redux/reducers/headersReducers/useDispatchHeadersActions.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+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__default["default"](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" : "";
+  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. ${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) {
+  var _state$headers;
+
   return {
-    reduxHeader: state.headers?.[ownProps.column.id]
+    reduxHeader: (_state$headers = state.headers) === null || _state$headers === void 0 ? void 0 : _state$headers[ownProps.column.id]
   };
 }
-const connector = (0, import_react_redux.connect)(mapStateToProps);
-const HeaderCellComp = (props) => {
-  const { reduxHeader, column, isDragOverlay, colSpan } = props;
-  const ctx = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
+
+const connector = reactRedux.connect(mapStateToProps);
+
+const HeaderCellComp = props => {
+  var _FilterMapItem, _flattenedData$, _flattenedData$$origi;
+
+  const {
+    reduxHeader,
+    column,
+    isDragOverlay,
+    colSpan
+  } = props;
+  const ctx = React.useContext(DataTableContext["default"]);
   const {
-    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },
+    tableProps: {
+      isResizeable,
+      onColumnSortChange,
+      dragAndDropColumns,
+      onFiltersChange,
+      filters,
+      textWrap
+    },
     flattenedData
   } = ctx;
-  const { patchHeader } = (0, import_reducers.useDispatchHeadersActions)();
-  const dragHandleRef = (0, import_react.useRef)(null);
-  const filterIconRef = (0, import_react.useRef)(null);
-  const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
-  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = (0, import_useHeaderCellConfig.useHeaderCellConfig)({
+  const {
+    patchHeader
+  } = useDispatchHeadersActions.useDispatchHeadersActions();
+  const dragHandleRef = React.useRef(null);
+  const filterIconRef = React.useRef(null);
+  const {
+    draggableProps
+  } = React.useContext(SortableItemContext.SortableItemContext);
+  const {
+    hasFilter,
+    hasDnD,
+    hasSortingCaret,
+    hasRightIcons,
+    shouldShowDnD,
+    hCols,
+    isDragging
+  } = useHeaderCellConfig.useHeaderCellConfig({
     column,
     dragAndDropColumns,
     draggableProps,
     reduxHeader,
     isDragOverlay
   });
-  (0, import_useRecoverFocusCol.useRecoverFocusCol)(isDragging, dragHandleRef);
-  const rightIcons = (0, import_react.useMemo)(() => {
-    if (!hasRightIcons)
-      return null;
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledHeaderRightIconsWrapper, null, /* @__PURE__ */ import_react.default.createElement(import_Filters.FilterMapItem, {
-      column,
-      ctx,
-      onFiltersChange,
-      reduxHeader,
+  useRecoverFocusCol.useRecoverFocusCol(isDragging, dragHandleRef);
+  const rightIcons = React.useMemo(() => {
+    if (!hasRightIcons) return null;
+    return /*#__PURE__*/_jsx__default["default"](styled.StyledHeaderRightIconsWrapper, {}, void 0, _FilterMapItem || (_FilterMapItem = /*#__PURE__*/_jsx__default["default"](index.FilterMapItem, {
+      column: column,
+      ctx: ctx,
+      onFiltersChange: onFiltersChange,
+      reduxHeader: reduxHeader,
       filterValue: filters,
       innerRef: filterIconRef
-    }), hasSortingCaret && /* @__PURE__ */ import_react.default.createElement(import_SortByCaret.SortByCaret, {
+    })), hasSortingCaret && /*#__PURE__*/_jsx__default["default"](SortByCaret.SortByCaret, {
       isSortedDesc: column.isSortedDesc
     }));
   }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
-  const DnDHandleComponent = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
+  const DnDHandleComponent = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
     mr: "2px",
     alignItems: "center",
-    style: { position: "relative" }
-  }, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledFocusWithin, {
+    style: {
+      position: 'relative'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledFocusWithin, {
     hideFocus: isDragging
-  }, /* @__PURE__ */ import_react.default.createElement(import__.DnDHandle, {
-    key: column.id,
+  }, void 0, /*#__PURE__*/_jsx__default["default"](DnDHandle, {
     innerRef: dragHandleRef,
-    isReachable: reduxHeader?.withTabStops,
+    isReachable: reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops,
     id: column.id,
-    isDragOverlay
-  }))), [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops]);
-  const handlers = (0, import_useHeaderCellHandlers.useHeaderCellHandlers)({
+    isDragOverlay: isDragOverlay
+  }, column.id))), [column.id, isDragOverlay, isDragging, reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops]);
+  const handlers = useHeaderCellHandlers.useHeaderCellHandlers({
     hasFilter,
     patchHeader,
     column,
@@ -121,36 +161,41 @@ const HeaderCellComp = (props) => {
     filterIconRef,
     headerRef: column.ref
   });
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledHeadTh, {
-    column,
-    ...handlers,
-    role: colSpan === 1 ? "columnheader" : "group",
-    colSpan,
-    "aria-describedby": `${column.id}-instructions`,
-    "aria-sort": hasSortingCaret ? column.isSortedDesc ? "descending" : "ascending" : "none",
-    "data-testid": import_constants.DATA_TESTID.DATA_TABLE_HEADER,
-    isFirstRowGroup: !!flattenedData[0]?.original?.dimsumHeaderValue,
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.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": constants.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: isDragOverlay,
     isDraggingActive: draggableProps && draggableProps.active,
-    shouldShowDnD,
-    ref: column.ref
-  }, /* @__PURE__ */ import_react.default.createElement(import_ds_grid.Grid, {
-    width: "100%",
-    cols: hCols
-  }, shouldShowDnD && DnDHandleComponent, /* @__PURE__ */ import_react.default.createElement(import_HeaderCellTitle.HeaderCellTitle, {
-    column,
-    ctx,
-    draggableProps,
-    textWrap
-  }), rightIcons, isResizeable && column.canResize !== false && /* @__PURE__ */ import_react.default.createElement(import_HeaderResizer.HeaderResizer, {
-    column
-  })), /* @__PURE__ */ import_react.default.createElement("span", {
-    id: `${column.id}-instructions`,
-    style: { display: "none" },
-    "aria-hidden": "false"
-  }, buildScreenReaderInstructions(colSpan, dragAndDropColumns && column.disableDnD !== true, hasFilter, column.canSort)));
+    shouldShowDnD: shouldShowDnD,
+    ref: column.ref,
+    children: [/*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+      width: "100%",
+      cols: hCols
+    }, void 0, shouldShowDnD && DnDHandleComponent, /*#__PURE__*/_jsx__default["default"](HeaderCellTitle.HeaderCellTitle, {
+      column: column,
+      ctx: ctx,
+      draggableProps: draggableProps,
+      textWrap: textWrap
+    }), rightIcons, isResizeable && column.canResize !== false && /*#__PURE__*/_jsx__default["default"](HeaderResizer.HeaderResizer, {
+      column: column
+    })), /*#__PURE__*/_jsx__default["default"]("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);
-module.exports = __toCommonJS(HeaderCell_exports);
-//# sourceMappingURL=HeaderCell.js.map
+
+exports.HeaderCell = HeaderCell;

package/cjs/parts/Headers/HeaderCellGroup.js

@@ -1,101 +1,100 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var HeaderCellGroup_exports = {};
-__export(HeaderCellGroup_exports, {
-  HeaderCellGroup: () => HeaderCellGroup,
-  default: () => HeaderCellGroup_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_prop_types = __toESM(require("prop-types"));
-var import_HeaderCell = __toESM(require("./HeaderCell"));
-var import_SortableItemContext = __toESM(require("../HoC/SortableItemContext"));
-var import_withDnDSortableColumnContext = __toESM(require("../HoC/withDnDSortableColumnContext"));
-var import_DropIndicator = __toESM(require("../DropIndicator"));
-var import_SortableHeaderCell = __toESM(require("../SortableHeaderCell"));
-var import_EmptyChildrenGroup = __toESM(require("./EmptyChildrenGroup"));
-var import_constants = __toESM(require("../../configs/constants"));
-const StyledWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  position: relative;
-  width: ${(props) => props.isDragOverlay ? "fit-content" : "100%"};
-  grid-column: ${(props) => props.gridColumn};
-  background: ${(props) => props.isDragging ? props.theme.colors.neutral["080"] : "white"};
-  opacity: ${(props) => props.isDragging ? 0.8 : 1};
-  box-shadow: 0 2px 4px 0 ${(props) => props.isDragOverlay ? "rgba(0,0,0,0.5)" : "transparent"};
-`;
-const HeaderCellGroupComp = ({
-  header,
-  isDragOverlay,
-  isDraggingParent,
-  isLast
-}) => {
-  const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var React = require('react');
+var Grid = require('@elliemae/ds-grid');
+var styled = require('styled-components');
+var HeaderCell = require('./HeaderCell.js');
+var SortableItemContext = require('../HoC/SortableItemContext.js');
+var withDnDSortableColumnContext = require('../HoC/withDnDSortableColumnContext.js');
+var DropIndicator = require('../DropIndicator.js');
+var SortableHeaderCell = require('../SortableHeaderCell.js');
+var EmptyChildrenGroup = require('./EmptyChildrenGroup.js');
+var constants = require('../../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('react-virtual');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('../../configs/useRowFlattenization.js');
+require('@babel/runtime/helpers/defineProperty');
+require('@elliemae/ds-icons');
+require('../../styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+require('@elliemae/ds-form');
+require('../TableContent.js');
+require('@elliemae/ds-circular-progress-indicator');
+require('@elliemae/ds-system');
+require('@elliemae/ds-button');
+require('../../DataTableContext.js');
+require('../Row.js');
+require('../Footer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var _EmptyChildrenGroup;
+const StyledWrapper = /*#__PURE__*/styled__default["default"](Grid.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
+  } = React.useContext(SortableItemContext.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 ?? 1;
-  return /* @__PURE__ */ import_react.default.createElement(StyledWrapper, {
+  const colSpan = (_children$length = children === null || children === void 0 ? void 0 : children.length) !== null && _children$length !== void 0 ? _children$length : 1;
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledWrapper, {
     ref: draggableProps ? draggableProps.setNodeRef : null,
-    gridColumn: isDragOverlay ? "auto" : `span ${colSpan}`,
-    isDragOverlay,
-    isDragging,
-    cols: ["auto"],
-    "data-testid": isDragOverlay ? import_constants.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0
-  }, /* @__PURE__ */ import_react.default.createElement(import_HeaderCell.HeaderCell, {
-    column: header,
-    isDragOverlay,
-    colSpan
-  }), !!children?.length && !isDragOverlay && /* @__PURE__ */ import_react.default.createElement(import_SortableHeaderCell.SortableHeaderCell, {
-    items: children,
-    isDragOverlay
-  }, children.map((h, index) => /* @__PURE__ */ import_react.default.createElement(ChildGroup, {
-    key: h.id,
-    header: h,
-    isDragOverlay,
-    isDraggingParent: isDragging,
-    isLast: index === children.length - 1
-  }))), children?.length && isDragOverlay && /* @__PURE__ */ import_react.default.createElement(import_EmptyChildrenGroup.EmptyChildrenGroup, null), /* @__PURE__ */ import_react.default.createElement(import_DropIndicator.DropIndicator, {
-    vertical: true,
-    dropIndicatorPosition,
-    isLast: isLast && isDragging
-  }));
-};
-HeaderCellGroupComp.propTypes = {
-  header: import_prop_types.default.any,
-  isDragOverlay: import_prop_types.default.bool,
-  isDraggingParent: import_prop_types.default.bool,
-  isLast: import_prop_types.default.bool
+    gridColumn: isDragOverlay ? 'auto' : "span ".concat(colSpan),
+    isDragOverlay: isDragOverlay,
+    isDragging: isDragging,
+    cols: ['auto'],
+    "data-testid": isDragOverlay ? constants.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined,
+    children: [/*#__PURE__*/_jsx__default["default"](HeaderCell.HeaderCell, {
+      column: header,
+      isDragOverlay: isDragOverlay,
+      colSpan: colSpan
+    }), !!(children !== null && children !== void 0 && children.length) && !isDragOverlay && /*#__PURE__*/_jsx__default["default"](SortableHeaderCell.SortableHeaderCell, {
+      items: children,
+      isDragOverlay: isDragOverlay
+    }, void 0, children.map((h, index) => /*#__PURE__*/_jsx__default["default"](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__default["default"](EmptyChildrenGroup.EmptyChildrenGroup, {}))), /*#__PURE__*/_jsx__default["default"](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 = (0, import_withDnDSortableColumnContext.withDnDSortableColumnContext)(HeaderCellGroupComp);
-var HeaderCellGroup_default = HeaderCellGroupSortable;
-module.exports = __toCommonJS(HeaderCellGroup_exports);
-//# sourceMappingURL=HeaderCellGroup.js.map
+const HeaderCellGroupSortable = withDnDSortableColumnContext.withDnDSortableColumnContext(HeaderCellGroupComp);
+
+exports.HeaderCellGroup = HeaderCellGroup;
+exports["default"] = HeaderCellGroupSortable;