@elliemae/ds-data-table 2.3.2 → 2.4.0-rc.1

package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -22,10 +22,8 @@ require('core-js/modules/esnext.set.reduce.js');
 require('core-js/modules/esnext.set.some.js');
 require('core-js/modules/esnext.set.symmetric-difference.js');
 require('core-js/modules/esnext.set.union.js');
-require('core-js/modules/esnext.async-iterator.find.js');
-require('core-js/modules/esnext.iterator.constructor.js');
-require('core-js/modules/esnext.iterator.find.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');
 var React = require('react');
 var Grid = require('@elliemae/ds-grid');
@@ -65,11 +63,9 @@ var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 var _SearchXsmall;
 const BaseSelectFilter = props => {
-  var _column$ref$current$o, _column$ref, _column$ref$current;
-
   const {
     isMulti = false,
-    selectedItems,
+    selectedItems = null,
     column,
     type,
     column: {
@@ -104,19 +100,7 @@ const BaseSelectFilter = props => {
   }, [data, id, userFilterOptions]);
 
   const handleOnChange = value => {
-    if (isMulti) {
-      const multiSelectedItem = selectedItems;
-      const isFound = multiSelectedItem.find(item => item.dsId === value.dsId);
-
-      if (isFound) {
-        onValueChange(type, multiSelectedItem.filter(item => item.dsId !== value.dsId));
-      } else {
-        onValueChange(type, [...multiSelectedItem, value]);
-      }
-    } else {
-      const singleSelectedItem = selectedItems;
-      onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
-    }
+    onValueChange(type, value);
   };
 
   const [filters, setFilteredOptions] = React.useState(filterOptions);
@@ -157,9 +141,7 @@ const BaseSelectFilter = props => {
     innerRef: innerRef,
     ariaLabel: "Open Selection Filter",
     onClickOutsideMenu: handleOnClickOutside,
-    customStyles: {
-      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
-    }
+    customStyles: {}
   });
 };
 

package/cjs/exported-related/FilterPopover.js

@@ -90,6 +90,19 @@ const FilterPopover = _ref2 => {
     if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);
   };
 
+  React.useEffect(() => {
+    const closeMenu = () => {
+      patchHeaderFilterButtonAndMenu(columnId, true);
+    };
+
+    window.addEventListener('blur', closeMenu);
+    window.addEventListener('resize', closeMenu);
+    return () => {
+      window.removeEventListener('blur', closeMenu);
+      window.removeEventListener('resize', closeMenu);
+    };
+  }, [columnId, patchHeaderFilterButtonAndMenu]);
+
   const handleTriggerClick = e => {
     onTriggerClick(columnId, e);
     patchHeaderFilterButtonAndMenu(columnId, false);

package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -36,7 +36,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const DetailsWrapper = props =>
 /*#__PURE__*/
 // This can be further customized
-// eslint-disable-next-line react/prop-types
 // eslint-disable-next-line jsx-a11y/no-static-element-interactions
 _jsx__default["default"]("div", {
   "data-role": "detail-view",
@@ -80,9 +79,9 @@ const DefaultRowContentRenderer = props => {
   const isDragging = draggableProps && draggableProps.isDragging;
   React.useLayoutEffect(() => {
     if (row.uid === focusedRowId) {
-      rowRef.current.focus({
-        preventScroll: true
-      });
+      var _rowRef$current;
+
+      (_rowRef$current = rowRef.current) === null || _rowRef$current === void 0 ? void 0 : _rowRef$current.focus();
     }
   }, [focusedRowId, row.uid]);
   const gridTemplateColProps = React.useMemo(() => ({

package/cjs/parts/Headers/HeaderCellGroup.js

@@ -3,6 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.some.js');
 require('core-js/modules/esnext.async-iterator.map.js');
 require('core-js/modules/esnext.iterator.map.js');
 var React = require('react');
@@ -16,7 +19,6 @@ 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');
@@ -34,7 +36,7 @@ require('../TableContent.js');
 require('@elliemae/ds-circular-progress-indicator');
 require('@elliemae/ds-system');
 require('@elliemae/ds-button');
-require('../../DataTableContext.js');
+var DataTableContext = require('../../DataTableContext.js');
 require('../Row.js');
 require('../Footer.js');
 
@@ -46,20 +48,36 @@ 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');
+})(["position:relative;", " width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";border-left:", " solid ", ";"], _ref => {
+  let {
+    shouldDropOneLevel
+  } = _ref;
+  return shouldDropOneLevel ? "top: 50%; height: 50%;" : '';
+}, 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', _ref2 => {
+  let {
+    isFirst
+  } = _ref2;
+  return isFirst ? '0px' : '1px';
+}, props => props.theme.colors.neutral['080']);
 
-const HeaderCellGroupComp = _ref => {
+const HeaderCellGroupComp = _ref3 => {
   var _children$length;
 
   let {
     header,
     isDragOverlay,
     isDraggingParent,
-    isLast
-  } = _ref;
+    isLast,
+    isFirst,
+    level = 0
+  } = _ref3;
+  const {
+    visibleColumns
+  } = React.useContext(DataTableContext["default"]);
   const {
     draggableProps
   } = React.useContext(SortableItemContext.SortableItemContext);
+  const isMultiLevel = visibleColumns.some(col => !!col.columns);
   const children = header.columns;
   const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
@@ -72,6 +90,8 @@ const HeaderCellGroupComp = _ref => {
     isDragging: isDragging,
     cols: ['auto'],
     "data-testid": isDragOverlay ? constants.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined,
+    isFirst: isFirst,
+    shouldDropOneLevel: isMultiLevel && level === 0 && !children,
     children: [/*#__PURE__*/_jsx__default["default"](HeaderCell.HeaderCell, {
       column: header,
       isDragOverlay: isDragOverlay,
@@ -83,7 +103,9 @@ const HeaderCellGroupComp = _ref => {
       header: h,
       isDragOverlay: isDragOverlay,
       isDraggingParent: isDragging,
-      isLast: index === children.length - 1
+      isLast: index === children.length - 1,
+      isFirst: index === 0,
+      level: level + 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,

package/cjs/parts/Headers/HeaderResizer.js

@@ -72,7 +72,9 @@ const HeaderResizer = _ref => {
     setIsResizing(true);
   }, []);
   const onResizeHandler = React.useCallback(e => {
-    const delta = e.clientX - ref.current.getBoundingClientRect().x; // delta in pixels
+    var _ref$current$getBound, _ref$current;
+
+    const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - ((_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().x) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0); // delta in pixels
 
     const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
     const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
@@ -82,9 +84,9 @@ const HeaderResizer = _ref => {
     e.stopPropagation();
   }, [column.id, nextWidth, visibleColumnsCopy]);
   const onResizeEnd = React.useCallback(() => {
-    setIsResizing(false);
     onColumnResize(column.id, nextWidth);
     setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, constants.ColsLayoutStyle.Fixed));
+    setIsResizing(false);
   }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
   React.useEffect(() => {
     const debouncedResizeHandler = onResizeHandler;
@@ -116,7 +118,8 @@ const HeaderResizer = _ref => {
     onMouseDown: onResizeStart,
     onTouchStart: onResizeStart,
     onMouseUp: onResizeEnd,
-    onTouchEnd: onResizeEnd
+    onTouchEnd: onResizeEnd,
+    onClick: e => e.stopPropagation()
   });
 };
 

package/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -19,6 +19,7 @@ var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
 var HeaderCellGroup = require('../Headers/HeaderCellGroup.js');
 var constants = require('../../configs/constants.js');
+var index = require('../../addons/Columns/index.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -78,8 +79,13 @@ const withConditionalDnDColumnContext = Component => props => {
     newFlattenedData.forEach(_ref2 => {
       let [dndData, colData] = _ref2;
 
-      // If row has parent, insert it to it's subrows
+      // Don't send internal columns to the user
+      if (index.INTERNAL_COLUMNS.includes(dndData.id)) {
+        return;
+      } // If row has parent, insert it to it's subrows
       // otherwise append it to the new user data
+
+
       if (dndData.parentId) {
         const parentNode = nodes[dndData.parentId];
         if (parentNode.columns) parentNode.columns.push(colData);else parentNode.columns = [colData];

package/cjs/styled.js

@@ -116,21 +116,15 @@ const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig
 })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%');
 const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-6"
-})(["", ";", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
+})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
-}));
-
-const getStyledHeadTHBorderColor = props => {
-  if (props.dragOverlay) return 'transparent';
-  if (props.isFirstRowGroup) return 'transparent';
-  return props.theme.colors.neutral['080'];
-};
+}), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
 
 const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-7"
-})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], getStyledHeadTHBorderColor, props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : ":hover {\n    border-bottom: 1px solid ".concat(props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800], ";\n    cursor: pointer;\n  }"));
+})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : ":hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ".concat(props.theme.colors.brand[700], ";\n            pointer-events: none;\n            z-index: ").concat(zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, ";\n          }\n          cursor: pointer;\n        }"), props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER);
 const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-8"
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);

package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -18,10 +18,8 @@ import 'core-js/modules/esnext.set.reduce.js';
 import 'core-js/modules/esnext.set.some.js';
 import 'core-js/modules/esnext.set.symmetric-difference.js';
 import 'core-js/modules/esnext.set.union.js';
-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.constructor.js';
 import 'core-js/modules/esnext.iterator.filter.js';
 import { useMemo, useState, useEffect, useCallback } from 'react';
 import { Grid } from '@elliemae/ds-grid';
@@ -57,11 +55,9 @@ import 'core-js/modules/esnext.iterator.some.js';
 
 var _SearchXsmall;
 const BaseSelectFilter = props => {
-  var _column$ref$current$o, _column$ref, _column$ref$current;
-
   const {
     isMulti = false,
-    selectedItems,
+    selectedItems = null,
     column,
     type,
     column: {
@@ -96,19 +92,7 @@ const BaseSelectFilter = props => {
   }, [data, id, userFilterOptions]);
 
   const handleOnChange = value => {
-    if (isMulti) {
-      const multiSelectedItem = selectedItems;
-      const isFound = multiSelectedItem.find(item => item.dsId === value.dsId);
-
-      if (isFound) {
-        onValueChange(type, multiSelectedItem.filter(item => item.dsId !== value.dsId));
-      } else {
-        onValueChange(type, [...multiSelectedItem, value]);
-      }
-    } else {
-      const singleSelectedItem = selectedItems;
-      onValueChange(type, (singleSelectedItem === null || singleSelectedItem === void 0 ? void 0 : singleSelectedItem.dsId) !== value.dsId ? value : null);
-    }
+    onValueChange(type, value);
   };
 
   const [filters, setFilteredOptions] = useState(filterOptions);
@@ -149,9 +133,7 @@ const BaseSelectFilter = props => {
     innerRef: innerRef,
     ariaLabel: "Open Selection Filter",
     onClickOutsideMenu: handleOnClickOutside,
-    customStyles: {
-      width: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
-    }
+    customStyles: {}
   });
 };
 

package/esm/exported-related/FilterPopover.js

@@ -6,7 +6,7 @@ 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 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState } from 'react';
+import { useRef, useEffect, useState } from 'react';
 import DSButton from '@elliemae/ds-button';
 import { DSPopperJS } from '@elliemae/ds-popperjs';
 import styled from 'styled-components';
@@ -79,6 +79,19 @@ const FilterPopover = _ref2 => {
     if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);
   };
 
+  useEffect(() => {
+    const closeMenu = () => {
+      patchHeaderFilterButtonAndMenu(columnId, true);
+    };
+
+    window.addEventListener('blur', closeMenu);
+    window.addEventListener('resize', closeMenu);
+    return () => {
+      window.removeEventListener('blur', closeMenu);
+      window.removeEventListener('resize', closeMenu);
+    };
+  }, [columnId, patchHeaderFilterButtonAndMenu]);
+
   const handleTriggerClick = e => {
     onTriggerClick(columnId, e);
     patchHeaderFilterButtonAndMenu(columnId, false);

package/esm/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -27,7 +27,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const DetailsWrapper = props =>
 /*#__PURE__*/
 // This can be further customized
-// eslint-disable-next-line react/prop-types
 // eslint-disable-next-line jsx-a11y/no-static-element-interactions
 _jsx("div", {
   "data-role": "detail-view",
@@ -71,9 +70,9 @@ const DefaultRowContentRenderer = props => {
   const isDragging = draggableProps && draggableProps.isDragging;
   useLayoutEffect(() => {
     if (row.uid === focusedRowId) {
-      rowRef.current.focus({
-        preventScroll: true
-      });
+      var _rowRef$current;
+
+      (_rowRef$current = rowRef.current) === null || _rowRef$current === void 0 ? void 0 : _rowRef$current.focus();
     }
   }, [focusedRowId, row.uid]);
   const gridTemplateColProps = useMemo(() => ({

package/esm/parts/Headers/HeaderCellGroup.js

@@ -1,4 +1,7 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
 import 'core-js/modules/esnext.async-iterator.map.js';
 import 'core-js/modules/esnext.iterator.map.js';
 import { useContext } from 'react';
@@ -12,7 +15,6 @@ 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';
@@ -30,27 +32,43 @@ import '../TableContent.js';
 import '@elliemae/ds-circular-progress-indicator';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
-import '../../DataTableContext.js';
+import DataTableContext from '../../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');
+})(["position:relative;", " width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";border-left:", " solid ", ";"], _ref => {
+  let {
+    shouldDropOneLevel
+  } = _ref;
+  return shouldDropOneLevel ? "top: 50%; height: 50%;" : '';
+}, 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', _ref2 => {
+  let {
+    isFirst
+  } = _ref2;
+  return isFirst ? '0px' : '1px';
+}, props => props.theme.colors.neutral['080']);
 
-const HeaderCellGroupComp = _ref => {
+const HeaderCellGroupComp = _ref3 => {
   var _children$length;
 
   let {
     header,
     isDragOverlay,
     isDraggingParent,
-    isLast
-  } = _ref;
+    isLast,
+    isFirst,
+    level = 0
+  } = _ref3;
+  const {
+    visibleColumns
+  } = useContext(DataTableContext);
   const {
     draggableProps
   } = useContext(SortableItemContext);
+  const isMultiLevel = visibleColumns.some(col => !!col.columns);
   const children = header.columns;
   const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
@@ -63,6 +81,8 @@ const HeaderCellGroupComp = _ref => {
     isDragging: isDragging,
     cols: ['auto'],
     "data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined,
+    isFirst: isFirst,
+    shouldDropOneLevel: isMultiLevel && level === 0 && !children,
     children: [/*#__PURE__*/_jsx(HeaderCell, {
       column: header,
       isDragOverlay: isDragOverlay,
@@ -74,7 +94,9 @@ const HeaderCellGroupComp = _ref => {
       header: h,
       isDragOverlay: isDragOverlay,
       isDraggingParent: isDragging,
-      isLast: index === children.length - 1
+      isLast: index === children.length - 1,
+      isFirst: index === 0,
+      level: level + 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,

package/esm/parts/Headers/HeaderResizer.js

@@ -64,7 +64,9 @@ const HeaderResizer = _ref => {
     setIsResizing(true);
   }, []);
   const onResizeHandler = useCallback(e => {
-    const delta = e.clientX - ref.current.getBoundingClientRect().x; // delta in pixels
+    var _ref$current$getBound, _ref$current;
+
+    const delta = ('clientX' in e ? e.clientX : e.touches[0].clientX) - ((_ref$current$getBound = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.getBoundingClientRect().x) !== null && _ref$current$getBound !== void 0 ? _ref$current$getBound : 0); // delta in pixels
 
     const realColumnIndex = visibleColumnsCopy.findIndex(visibleColumn => visibleColumn.id === column.id);
     const widthWithDelta = narrow(nextWidth + delta, visibleColumnsCopy[realColumnIndex].minWidth, visibleColumnsCopy[realColumnIndex].maxWidth);
@@ -74,9 +76,9 @@ const HeaderResizer = _ref => {
     e.stopPropagation();
   }, [column.id, nextWidth, visibleColumnsCopy]);
   const onResizeEnd = useCallback(() => {
-    setIsResizing(false);
     onColumnResize(column.id, nextWidth);
     setGridLayout(columnsToGrid(visibleColumns, ColsLayoutStyle.Fixed));
+    setIsResizing(false);
   }, [onColumnResize, column.id, nextWidth, setGridLayout, visibleColumns]);
   useEffect(() => {
     const debouncedResizeHandler = onResizeHandler;
@@ -108,7 +110,8 @@ const HeaderResizer = _ref => {
     onMouseDown: onResizeStart,
     onTouchStart: onResizeStart,
     onMouseUp: onResizeEnd,
-    onTouchEnd: onResizeEnd
+    onTouchEnd: onResizeEnd,
+    onClick: e => e.stopPropagation()
   });
 };
 

package/esm/parts/HoC/withConditionalDnDColumnContext.js

@@ -15,6 +15,7 @@ import { arrayMove } from '@dnd-kit/sortable';
 import DataTableContext from '../../DataTableContext.js';
 import { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';
 import { DATA_TESTID } from '../../configs/constants.js';
+import { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 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; }
@@ -68,8 +69,13 @@ const withConditionalDnDColumnContext = Component => props => {
     newFlattenedData.forEach(_ref2 => {
       let [dndData, colData] = _ref2;
 
-      // If row has parent, insert it to it's subrows
+      // Don't send internal columns to the user
+      if (INTERNAL_COLUMNS.includes(dndData.id)) {
+        return;
+      } // If row has parent, insert it to it's subrows
       // otherwise append it to the new user data
+
+
       if (dndData.parentId) {
         const parentNode = nodes[dndData.parentId];
         if (parentNode.columns) parentNode.columns.push(colData);else parentNode.columns = [colData];

package/esm/styled.js

@@ -107,21 +107,15 @@ const StyledHeadWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%');
 const StyledHeadTr = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-6"
-})(["", ";", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
+})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
-}));
-
-const getStyledHeadTHBorderColor = props => {
-  if (props.dragOverlay) return 'transparent';
-  if (props.isFirstRowGroup) return 'transparent';
-  return props.theme.colors.neutral['080'];
-};
+}), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
 
 const StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-7"
-})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], columnPadding, ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], getStyledHeadTHBorderColor, props => props.theme.colors.brand[700], ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : ":hover {\n    border-bottom: 1px solid ".concat(props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800], ";\n    cursor: pointer;\n  }"));
+})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], columnPadding, ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : ":hover {\n          &:after {\n            display: block;\n            content: ' ';\n            position: absolute;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            border-bottom: 1px solid ".concat(props.theme.colors.brand[700], ";\n            pointer-events: none;\n            z-index: ").concat(ZIndexDataTable.FOCUS_BORDER, ";\n          }\n          cursor: pointer;\n        }"), props => props.theme.colors.brand[700], ZIndexDataTable.FOCUS_BORDER);
 const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-8"
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.3.2",
+  "version": "2.4.0-rc.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -570,24 +570,24 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.3.2",
-    "@elliemae/ds-circular-progress-indicator": "2.3.2",
-    "@elliemae/ds-controlled-form": "2.3.2",
-    "@elliemae/ds-drag-and-drop": "2.3.2",
-    "@elliemae/ds-dropdownmenu": "2.3.2",
-    "@elliemae/ds-form": "2.3.2",
-    "@elliemae/ds-form-layout-blocks": "2.3.2",
-    "@elliemae/ds-grid": "2.3.2",
-    "@elliemae/ds-icons": "2.3.2",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.3.2",
-    "@elliemae/ds-pagination": "2.3.2",
-    "@elliemae/ds-pills": "2.3.2",
-    "@elliemae/ds-popperjs": "2.3.2",
-    "@elliemae/ds-props-helpers": "2.3.2",
-    "@elliemae/ds-system": "2.3.2",
-    "@elliemae/ds-toolbar": "2.3.2",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.2",
-    "@elliemae/ds-utilities": "2.3.2",
+    "@elliemae/ds-button": "2.4.0-rc.1",
+    "@elliemae/ds-circular-progress-indicator": "2.4.0-rc.1",
+    "@elliemae/ds-controlled-form": "2.4.0-rc.1",
+    "@elliemae/ds-drag-and-drop": "2.4.0-rc.1",
+    "@elliemae/ds-dropdownmenu": "2.4.0-rc.1",
+    "@elliemae/ds-form": "2.4.0-rc.1",
+    "@elliemae/ds-form-layout-blocks": "2.4.0-rc.1",
+    "@elliemae/ds-grid": "2.4.0-rc.1",
+    "@elliemae/ds-icons": "2.4.0-rc.1",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.4.0-rc.1",
+    "@elliemae/ds-pagination": "2.4.0-rc.1",
+    "@elliemae/ds-pills": "2.4.0-rc.1",
+    "@elliemae/ds-popperjs": "2.4.0-rc.1",
+    "@elliemae/ds-props-helpers": "2.4.0-rc.1",
+    "@elliemae/ds-system": "2.4.0-rc.1",
+    "@elliemae/ds-toolbar": "2.4.0-rc.1",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.0-rc.1",
+    "@elliemae/ds-utilities": "2.4.0-rc.1",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",

package/types/DataTable.d.ts

@@ -55,7 +55,7 @@ export declare const DataTable: {
         renderRowActions?: import("./types/props").TypescriptRenderRowActions | undefined;
         getRowVariant?: ((row: import("./types/props").TypescriptRow, defaultCellsRenderer: React.ComponentType<any>) => React.ComponentType<any> | import("./types/props").RowVariant) | undefined;
         isExpandable?: boolean | undefined;
-        uniqueRowAccessor?: import("./types/props").uniqueRowAccessorType | undefined;
+        uniqueRowAccessor?: import("./types/props").UniqueRowAccessorType | undefined;
         disabledRows?: Record<string, boolean> | undefined;
         expandedRows?: Record<string, boolean> | undefined;
         cellRendererProps?: Record<string, any> | undefined;

package/types/helpers/getIdFromUniqueRowAccessor.d.ts

@@ -1,2 +1,2 @@
-import { TypescriptRow, uniqueRowAccessorType } from '../types/props';
+import { TypescriptRow } from '../types/props';
 export declare const getIdFromUniqueRowAccessor: (uniqueRowAccessor: uniqueRowAccessorType, row: Partial<TypescriptRow>) => string;

package/types/parts/FilterBar/styled.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../../../../../shared/typings/react-desc.d.ts" />
 /// <reference types="react" />
-export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDropdownMenu: import("styled-components").StyledComponent<{
     ({ containerProps, className, contentStyle, options, onSelectMenuItem, onOpenMenu, onClickOutsideMenu, preventOverflow, placement, interactionType, triggerComponent, customMenu, isOpen, selection, menuProps, referenceNode, focusOnOpen, onClose, itemsRenderer, responsiveHeight, singleGroupSelection, onSelectChange, minWidth, maxWidth, zIndex, type, loading, hideIfNotVisible, }: {
         containerProps?: {} | undefined;

package/types/parts/Headers/HeaderCellGroup.d.ts

@@ -5,6 +5,8 @@ interface HeaderCellGroupCompProps {
     isDragOverlay?: boolean;
     isDraggingParent?: boolean;
     isLast?: boolean;
+    isFirst?: boolean;
+    level?: number;
 }
 export declare const HeaderCellGroup: React.FunctionComponent<HeaderCellGroupCompProps>;
 declare const HeaderCellGroupSortable: (props: HeaderCellGroupCompProps) => JSX.Element;

package/types/styled.d.ts

@@ -3,7 +3,7 @@ interface WidthAndHeight {
     width?: string | number;
     height?: string | number;
 }
-export declare const StyledFocusWithin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledFocusWithin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledDataTableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, WidthAndHeight & {
     noSelectionAllowed: boolean;
 }, never>;
@@ -14,7 +14,7 @@ export declare const StyledHeadWrapper: import("styled-components").StyledCompon
     colsLayoutStyle: string;
     totalColumnsWidth: number | string;
 }, never>;
-export declare const StyledHeadTr: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledHeadTr: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledHeadTh: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
 export declare const StyledHeaderRightIconsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledResizer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
@@ -27,13 +27,13 @@ export declare const StyledCell: import("styled-components").StyledComponent<"di
 }, never>;
 export declare const StyledCellContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledPencilIcon: import("styled-components").StyledComponent<(rest: any) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledEditableContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
+export declare const StyledEditableContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     shouldDisplayEditIcon: string;
 }, never>;
-export declare const StyledFullsizeGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const GroupHeaderContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
+export declare const StyledFullsizeGrid: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const GroupHeaderContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {
     padding: string;
 }, never>;
 export declare const GroupHeaderTitle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledCellContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/types").GridPropsT & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCellContainer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/types/react-desc-prop-types").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("styled-components").DefaultTheme, {}, never>;
 export {};

package/types/types/props.d.ts

@@ -74,7 +74,7 @@ export declare type TypescriptSortBy = {
 };
 export declare type TypescriptSelectionItem = true | 'mixed' | false;
 export declare type TypescriptSelection = Record<string | number, TypescriptSelectionItem>;
-export declare type uniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string);
+export declare type UniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string);
 export declare type TypescriptProps = {
     columns: TypescriptColumn[];
     data: TypescriptRow[];
@@ -83,7 +83,7 @@ export declare type TypescriptProps = {
     renderRowActions?: TypescriptRenderRowActions;
     getRowVariant?: (row: TypescriptRow, defaultCellsRenderer: React.ComponentType<any>) => RowVariant | React.ComponentType<any>;
     isExpandable?: boolean;
-    uniqueRowAccessor?: uniqueRowAccessorType;
+    uniqueRowAccessor?: UniqueRowAccessorType;
     disabledRows?: Record<string, boolean>;
     expandedRows?: Record<string, boolean>;
     cellRendererProps?: Record<string, any>;