@elliemae/ds-data-table 2.3.1 → 2.3.2-next.0

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/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/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/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.1",
+  "version": "2.3.2-next.0",
   "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.1",
-    "@elliemae/ds-circular-progress-indicator": "2.3.1",
-    "@elliemae/ds-controlled-form": "2.3.1",
-    "@elliemae/ds-drag-and-drop": "2.3.1",
-    "@elliemae/ds-dropdownmenu": "2.3.1",
-    "@elliemae/ds-form": "2.3.1",
-    "@elliemae/ds-form-layout-blocks": "2.3.1",
-    "@elliemae/ds-grid": "2.3.1",
-    "@elliemae/ds-icons": "2.3.1",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.3.1",
-    "@elliemae/ds-pagination": "2.3.1",
-    "@elliemae/ds-pills": "2.3.1",
-    "@elliemae/ds-popperjs": "2.3.1",
-    "@elliemae/ds-props-helpers": "2.3.1",
-    "@elliemae/ds-system": "2.3.1",
-    "@elliemae/ds-toolbar": "2.3.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.1",
-    "@elliemae/ds-utilities": "2.3.1",
+    "@elliemae/ds-button": "2.3.2-next.0",
+    "@elliemae/ds-circular-progress-indicator": "2.3.2-next.0",
+    "@elliemae/ds-controlled-form": "2.3.2-next.0",
+    "@elliemae/ds-drag-and-drop": "2.3.2-next.0",
+    "@elliemae/ds-dropdownmenu": "2.3.2-next.0",
+    "@elliemae/ds-form": "2.3.2-next.0",
+    "@elliemae/ds-form-layout-blocks": "2.3.2-next.0",
+    "@elliemae/ds-grid": "2.3.2-next.0",
+    "@elliemae/ds-icons": "2.3.2-next.0",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.3.2-next.0",
+    "@elliemae/ds-pagination": "2.3.2-next.0",
+    "@elliemae/ds-pills": "2.3.2-next.0",
+    "@elliemae/ds-popperjs": "2.3.2-next.0",
+    "@elliemae/ds-props-helpers": "2.3.2-next.0",
+    "@elliemae/ds-system": "2.3.2-next.0",
+    "@elliemae/ds-toolbar": "2.3.2-next.0",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.2-next.0",
+    "@elliemae/ds-utilities": "2.3.2-next.0",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",

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 {};