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

package/dist/cjs/parts/Headers/HeaderCellGroup.js

@@ -41,22 +41,29 @@ var import_withDnDSortableColumnContext = require("../HoC/withDnDSortableColumnC
 var import_DropIndicator = require("../DropIndicator");
 var import_SortableHeaderCell = require("../SortableHeaderCell");
 var import_EmptyChildrenGroup = require("./EmptyChildrenGroup");
-var import_constants = require("../../configs/constants");
+var import_configs = require("../../configs");
+var import_DataTableContext = __toESM(require("../../DataTableContext"));
 const StyledWrapper = (0, import_styled_components.default)(import_ds_grid.Grid)`
   position: relative;
+  ${({ shouldDropOneLevel }) => shouldDropOneLevel ? `top: 50%; height: 50%;` : ""}
   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"};
+  border-left: ${({ isFirst }) => isFirst ? "0px" : "1px"} solid ${(props) => props.theme.colors.neutral["080"]};
 `;
 const HeaderCellGroupComp = ({
   header,
   isDragOverlay,
   isDraggingParent,
-  isLast
+  isLast,
+  isFirst,
+  level = 0
 }) => {
+  const { visibleColumns } = (0, import_react.useContext)(import_DataTableContext.default);
   const { draggableProps } = (0, import_react.useContext)(import_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;
@@ -68,7 +75,9 @@ const HeaderCellGroupComp = ({
     isDragOverlay,
     isDragging,
     cols: ["auto"],
-    "data-testid": isDragOverlay ? import_constants.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0
+    "data-testid": isDragOverlay ? import_configs.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0,
+    isFirst,
+    shouldDropOneLevel: isMultiLevel && level === 0 && !children
   }, /* @__PURE__ */ import_react.default.createElement(import_HeaderCell.HeaderCell, {
     column: header,
     isDragOverlay,
@@ -81,7 +90,9 @@ const HeaderCellGroupComp = ({
     header: h,
     isDragOverlay,
     isDraggingParent: isDragging,
-    isLast: index === children.length - 1
+    isLast: index === children.length - 1,
+    isFirst: index === 0,
+    level: level + 1
   }))), children?.length && isDragOverlay && /* @__PURE__ */ import_react.default.createElement(import_EmptyChildrenGroup.EmptyChildrenGroup, null), /* @__PURE__ */ import_react.default.createElement(import_DropIndicator.DropIndicator, {
     vertical: true,
     dropIndicatorPosition,
@@ -92,7 +103,9 @@ 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
+  isLast: import_prop_types.default.bool,
+  isFirst: import_prop_types.default.bool,
+  level: import_prop_types.default.number
 };
 const HeaderCellGroup = HeaderCellGroupComp;
 const HeaderCellGroupSortable = (0, import_withDnDSortableColumnContext.withDnDSortableColumnContext)(HeaderCellGroupComp);

package/dist/cjs/parts/Headers/HeaderCellGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/HeaderCellGroup.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst StyledWrapper = styled(Grid)`\n  position: relative;\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: TypescriptColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n}) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} />\n    </StyledWrapper>\n  );\n};\n\nHeaderCellGroupComp.propTypes = {\n  header: PropTypes.any,\n  isDragOverlay: PropTypes.bool,\n  isDraggingParent: PropTypes.bool,\n  isLast: PropTypes.bool,\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nconst HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n\nexport default HeaderCellGroupSortable;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,qBAAqB;AACrB,+BAAmB;AACnB,wBAAsB;AACtB,wBAA2B;AAC3B,iCAAoC;AACpC,0CAA6C;AAC7C,2BAA8B;AAC9B,gCAAmC;AAEnC,gCAAmC;AACnC,uBAA4B;AAE5B,MAAM,gBAAgB,sCAAO;AAAA;AAAA,WAElB,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA;AAUlF,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,mDAAC,eAAD;AAAA,IACE,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC;AAAA,IACP,eAAa,gBAAgB,6BAAY,iCAAiC;AAAA,KAE1E,mDAAC,8BAAD;AAAA,IAAY,QAAQ;AAAA,IAAQ;AAAA,IAA8B;AAAA,MACzD,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,mDAAC,8CAAD;AAAA,IAAoB,OAAO;AAAA,IAAU;AAAA,KAClC,SAAS,IAAI,CAAC,GAAG,UAChB,mDAAC,YAAD;AAAA,IACE,KAAK,EAAE;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,QAK3C,UAAU,UAAU,iBAAiB,mDAAC,8CAAD,OACtC,mDAAC,oCAAD;AAAA,IAAe,UAAQ;AAAA,IAAC;AAAA,IAA8C,QAAQ,UAAU;AAAA;AAAA;AAK9F,oBAAoB,YAAY;AAAA,EAC9B,QAAQ,0BAAU;AAAA,EAClB,eAAe,0BAAU;AAAA,EACzB,kBAAkB,0BAAU;AAAA,EAC5B,QAAQ,0BAAU;AAAA;AAKb,MAAM,kBAAkB;AAE/B,MAAM,0BAA0B,sEAA6B;AAE7D,IAAO,0BAAQ;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs';\nimport DataTableContext from '../../DataTableContext';\n\nconst StyledWrapper = styled(Grid)`\n  position: relative;\n  ${({ shouldDropOneLevel }) => (shouldDropOneLevel ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: TypescriptColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} />\n    </StyledWrapper>\n  );\n};\n\nHeaderCellGroupComp.propTypes = {\n  header: PropTypes.any,\n  isDragOverlay: PropTypes.bool,\n  isDraggingParent: PropTypes.bool,\n  isLast: PropTypes.bool,\n  isFirst: PropTypes.bool,\n  level: PropTypes.number,\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nconst HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n\nexport default HeaderCellGroupSortable;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAkC;AAClC,qBAAqB;AACrB,+BAAmB;AACnB,wBAAsB;AACtB,wBAA2B;AAC3B,iCAAoC;AACpC,0CAA6C;AAC7C,2BAA8B;AAC9B,gCAAmC;AAEnC,gCAAmC;AACnC,qBAA4B;AAC5B,8BAA6B;AAE7B,MAAM,gBAAgB,sCAAO;AAAA;AAAA,IAEzB,CAAC,EAAE,yBAA0B,qBAAqB,2BAA2B;AAAA,WACtE,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,cAAe,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAY3G,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,MACJ;AACJ,QAAM,EAAE,mBAAmB,6BAAW;AACtC,QAAM,EAAE,mBAAmB,6BAAW;AAEtC,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI;AAExD,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,mDAAC,eAAD;AAAA,IACE,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC;AAAA,IACP,eAAa,gBAAgB,2BAAY,iCAAiC;AAAA,IAC1E;AAAA,IACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,KAEpD,mDAAC,8BAAD;AAAA,IAAY,QAAQ;AAAA,IAAQ;AAAA,IAA8B;AAAA,MACzD,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,mDAAC,8CAAD;AAAA,IAAoB,OAAO;AAAA,IAAU;AAAA,KAClC,SAAS,IAAI,CAAC,GAAG,UAChB,mDAAC,YAAD;AAAA,IACE,KAAK,EAAE;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,IACpC,SAAS,UAAU;AAAA,IACnB,OAAO,QAAQ;AAAA,QAKtB,UAAU,UAAU,iBAAiB,mDAAC,8CAAD,OACtC,mDAAC,oCAAD;AAAA,IAAe,UAAQ;AAAA,IAAC;AAAA,IAA8C,QAAQ,UAAU;AAAA;AAAA;AAK9F,oBAAoB,YAAY;AAAA,EAC9B,QAAQ,0BAAU;AAAA,EAClB,eAAe,0BAAU;AAAA,EACzB,kBAAkB,0BAAU;AAAA,EAC5B,QAAQ,0BAAU;AAAA,EAClB,SAAS,0BAAU;AAAA,EACnB,OAAO,0BAAU;AAAA;AAKZ,MAAM,kBAAkB;AAE/B,MAAM,0BAA0B,sEAA6B;AAE7D,IAAO,0BAAQ;",
   "names": []
 }

package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -52,6 +52,7 @@ var import_sortable = require("@dnd-kit/sortable");
 var import_DataTableContext = require("../../DataTableContext");
 var import_HeaderCellGroup = require("../Headers/HeaderCellGroup");
 var import_constants = require("../../configs/constants");
+var import_Columns = require("../../addons/Columns");
 const DnDGroupContext = (0, import_react.createContext)({
   activeIndex: void 0
 });
@@ -81,6 +82,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
     });
     const newData = [];
     newFlattenedData.forEach(([dndData, colData]) => {
+      if (import_Columns.INTERNAL_COLUMNS.includes(dndData.id)) {
+        return;
+      }
       if (dndData.parentId) {
         const parentNode = nodes[dndData.parentId];
         if (parentNode.columns)

package/dist/cjs/parts/HoC/withConditionalDnDColumnContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\n\ntype DnDGroupContextType = {\n  activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n  const flattened = [];\n  const flatten = (col: TypescriptColumn, index, parentId = null) => {\n    const { id } = col;\n    flattened.push([{ id, parentId, index }, col]);\n    if (col.columns)\n      col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropColumns, onColumnsReorder },\n    visibleColumns,\n  } = React.useContext(DataTableContext);\n\n  const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n  const onReorder = useCallback(\n    (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n      // Send from index to target index\n      const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n      // Pull the cols's data into an object\n      const nodes = {};\n      newFlattenedData.forEach(([dndData, colData]) => {\n        delete colData.columns;\n        nodes[dndData.id] = colData;\n      });\n      const newData = [];\n      newFlattenedData.forEach(([dndData, colData]) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (dndData.parentId) {\n          const parentNode = nodes[dndData.parentId];\n          if (parentNode.columns) parentNode.columns.push(colData);\n          else parentNode.columns = [colData];\n        } else newData.push(colData);\n      });\n      onColumnsReorder(newData, indexes);\n    },\n    [flattenedItems, onColumnsReorder],\n  );\n\n  const onPreviewResetState = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) el.onscroll = () => null;\n  }, []);\n\n  const onPreviewDragStart = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) {\n      const y = el.scrollTop;\n      el.onscroll = () => el.scrollTo(0, y);\n    }\n  }, []);\n\n  const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n    flattenedItems,\n    dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n    isHorizontalDnD: true,\n    onReorder,\n    onPreviewResetState,\n    onPreviewDragStart,\n  });\n\n  if (dragAndDropColumns)\n    return (\n      <DndContext {...dndContextProps}>\n        <DnDGroupContext.Provider value={{ activeIndex }}>\n          <Component {...props} />\n        </DnDGroupContext.Provider>\n        <DragOverlay>\n          {activeId ? (\n            <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA2D;AAC3D,kBAAwC;AACxC,8BAAyC;AACzC,sBAA0B;AAE1B,8BAAiC;AAGjC,6BAAgC;AAChC,uBAA4B;AAMrB,MAAM,kBAAkB,gCAAmC;AAAA,EAChE,aAAa;AAAA;AAGf,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY;AAClB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,SAAS;AACzC,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY;AAAA;AAE5G,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK;AAC1C,SAAO;AAAA;AAIF,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,qBAAM,WAAW;AAErB,QAAM,iBAAiB,0BAAQ,MAAM,eAAe,iBAAiB,CAAC;AAEtE,QAAM,YAAY,8BAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,+BAAU,gBAAgB,QAAQ,WAAW,QAAQ;AAE9E,UAAM,QAAQ;AACd,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA;AAEtB,UAAM,UAAU;AAChB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAG/C,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK;AAAA;AAC3C,qBAAW,UAAU,CAAC;AAAA;AACtB,gBAAQ,KAAK;AAAA;AAEtB,qBAAiB,SAAS;AAAA,KAE5B,CAAC,gBAAgB;AAGnB,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY;AAE/B,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,KAC3B;AAEH,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY;AAE/B,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,GAAG,SAAS,GAAG;AAAA;AAAA,KAEpC;AAEH,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,sDAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,6BAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA;AAGF,MAAI;AACF,WACE,mDAAC,wBAAD,mBAAgB,kBACd,mDAAC,gBAAgB,UAAjB;AAAA,MAA0B,OAAO,EAAE;AAAA,OACjC,mDAAC,WAAD,mBAAe,UAEjB,mDAAC,yBAAD,MACG,WACC,mDAAC,wCAAD;AAAA,MAAiB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,UAAU;AAAA,MAAI,eAAa;AAAA,SAC9F;AAIZ,SAAO,mDAAC,WAAD,mBAAe;AAAA;",
+  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n  activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n  const flattened = [];\n  const flatten = (col: TypescriptColumn, index, parentId = null) => {\n    const { id } = col;\n    flattened.push([{ id, parentId, index }, col]);\n    if (col.columns)\n      col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropColumns, onColumnsReorder },\n    visibleColumns,\n  } = React.useContext(DataTableContext);\n\n  const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n  const onReorder = useCallback(\n    (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n      // Send from index to target index\n      const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n      // Pull the cols's data into an object\n      const nodes = {};\n      newFlattenedData.forEach(([dndData, colData]) => {\n        delete colData.columns;\n        nodes[dndData.id] = colData;\n      });\n      const newData = [];\n      newFlattenedData.forEach(([dndData, colData]) => {\n        // Don't send internal columns to the user\n        if (INTERNAL_COLUMNS.includes(dndData.id)) {\n          return;\n        }\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (dndData.parentId) {\n          const parentNode = nodes[dndData.parentId];\n          if (parentNode.columns) parentNode.columns.push(colData);\n          else parentNode.columns = [colData];\n        } else newData.push(colData);\n      });\n      onColumnsReorder(newData, indexes);\n    },\n    [flattenedItems, onColumnsReorder],\n  );\n\n  const onPreviewResetState = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) el.onscroll = () => null;\n  }, []);\n\n  const onPreviewDragStart = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) {\n      const y = el.scrollTop;\n      el.onscroll = () => el.scrollTo(0, y);\n    }\n  }, []);\n\n  const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n    flattenedItems,\n    dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n    isHorizontalDnD: true,\n    onReorder,\n    onPreviewResetState,\n    onPreviewDragStart,\n  });\n\n  if (dragAndDropColumns)\n    return (\n      <DndContext {...dndContextProps}>\n        <DnDGroupContext.Provider value={{ activeIndex }}>\n          <Component {...props} />\n        </DnDGroupContext.Provider>\n        <DragOverlay>\n          {activeId ? (\n            <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA2D;AAC3D,kBAAwC;AACxC,8BAAyC;AACzC,sBAA0B;AAE1B,8BAAiC;AAGjC,6BAAgC;AAChC,uBAA4B;AAC5B,qBAAiC;AAM1B,MAAM,kBAAkB,gCAAmC;AAAA,EAChE,aAAa;AAAA;AAGf,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY;AAClB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,SAAS;AACzC,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY;AAAA;AAE5G,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK;AAC1C,SAAO;AAAA;AAIF,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,qBAAM,WAAW;AAErB,QAAM,iBAAiB,0BAAQ,MAAM,eAAe,iBAAiB,CAAC;AAEtE,QAAM,YAAY,8BAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,+BAAU,gBAAgB,QAAQ,WAAW,QAAQ;AAE9E,UAAM,QAAQ;AACd,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA;AAEtB,UAAM,UAAU;AAChB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,gCAAiB,SAAS,QAAQ,KAAK;AACzC;AAAA;AAIF,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK;AAAA;AAC3C,qBAAW,UAAU,CAAC;AAAA;AACtB,gBAAQ,KAAK;AAAA;AAEtB,qBAAiB,SAAS;AAAA,KAE5B,CAAC,gBAAgB;AAGnB,QAAM,sBAAsB,8BAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY;AAE/B,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,KAC3B;AAEH,QAAM,qBAAqB,8BAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,6BAAY;AAE/B,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,GAAG,SAAS,GAAG;AAAA;AAAA,KAEpC;AAEH,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,sDAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,6BAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA;AAGF,MAAI;AACF,WACE,mDAAC,wBAAD,mBAAgB,kBACd,mDAAC,gBAAgB,UAAjB;AAAA,MAA0B,OAAO,EAAE;AAAA,OACjC,mDAAC,WAAD,mBAAe,UAEjB,mDAAC,yBAAD,MACG,WACC,mDAAC,wCAAD;AAAA,MAAiB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,UAAU;AAAA,MAAI,eAAa;AAAA,SAC9F;AAIZ,SAAO,mDAAC,WAAD,mBAAe;AAAA;",
   "names": []
 }

package/dist/cjs/styled.js

@@ -127,6 +127,8 @@ const StyledHeadTr = (0, import_styled_components.default)(import_ds_grid.Grid)`
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 })};
+  border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral["080"]};
 `;
 const getStyledHeadTHBorderColor = (props) => {
   if (props.dragOverlay)
@@ -145,16 +147,27 @@ const StyledHeadTh = import_styled_components.default.div`
   ${import_helpers.columnPadding}
   color: #353c46;
   min-height: 1.84615rem;
-  position: relative;
   position: sticky;
-  top: 0;
   z-index: ${import_zIndexInternalConfig.ZIndexDataTable.HEADER_ROW};
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
-  border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
-  border-bottom: 1px solid ${getStyledHeadTHBorderColor};
   outline: none;
+  ${(props) => props.isDraggingActive ? "" : `:hover {
+          &:after {
+            display: block;
+            content: ' ';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-bottom: 1px solid ${props.theme.colors.brand[700]};
+            pointer-events: none;
+            z-index: ${import_zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
+          }
+          cursor: pointer;
+        }`}
 
   :focus {
     &:after {
@@ -163,18 +176,13 @@ const StyledHeadTh = import_styled_components.default.div`
       position: absolute;
       top: 0;
       left: 0;
-      right: -1px;
-      bottom: -1px;
+      right: 0;
+      bottom: 0;
       border: 2px solid ${(props) => props.theme.colors.brand[700]};
       pointer-events: none;
       z-index: ${import_zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
     }
   }
-
-  ${(props) => props.isDraggingActive ? "" : `:hover {
-    border-bottom: 1px solid ${props.isDragOverlay ? "transparent" : props.theme.colors.brand[800]};
-    cursor: pointer;
-  }`}
 `;
 const StyledHeaderRightIconsWrapper = import_styled_components.default.div`
   height: 100%;

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n`;\n\nexport const StyledDataTableWrapper = styled.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n`;\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  ${({ width = '100%', height = '100%' }) => `\n  width: ${sizeToCss(width)};\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  ${({ height = 'auto', width = '100%' }) => `\n  height: ${sizeToCss(height)};\n  width: ${sizeToCss(width)};\n  `}\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n  if (props.dragOverlay) return 'transparent';\n  if (props.isFirstRowGroup) return 'transparent';\n  return props.theme.colors.neutral['080'];\n};\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: relative;\n  position: sticky;\n  top: 0;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${getStyledHeadTHBorderColor};\n  outline: none;\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: -1px;\n      bottom: -1px;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n    border-bottom: 1px solid ${props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800]};\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: ${({ isResizing, theme }) => (isResizing ? theme.colors.brand[600] : theme.colors.brand[400])};\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  /* border-bottom: 1px solid #ebedf0; */\n  /* box-sizing: border-box; */\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n  /* width: ${(props) =>\n    props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding: 0 ${(props) => props.padding};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n  grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme });\n  }}\n\n  ${({ shouldDisplayHover, theme }) =>\n    shouldDisplayHover\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n`;\n\nexport const StyledDataTableWrapper = styled.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n`;\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  ${({ width = '100%', height = '100%' }) => `\n  width: ${sizeToCss(width)};\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  ${({ height = 'auto', width = '100%' }) => `\n  height: ${sizeToCss(height)};\n  width: ${sizeToCss(width)};\n  `}\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n  if (props.dragOverlay) return 'transparent';\n  if (props.isFirstRowGroup) return 'transparent';\n  return props.theme.colors.neutral['080'];\n};\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `: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 ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: ${({ isResizing, theme }) => (isResizing ? theme.colors.brand[600] : theme.colors.brand[400])};\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  /* border-bottom: 1px solid #ebedf0; */\n  /* box-sizing: border-box; */\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n  /* width: ${(props) =>\n    props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding: 0 ${(props) => props.padding};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n  grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme });\n  }}\n\n  ${({ shouldDisplayHover, theme }) =>\n    shouldDisplayHover\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/Headers/HeaderCellGroup.js

@@ -9,22 +9,29 @@ import { withDnDSortableColumnContext } from "../HoC/withDnDSortableColumnContex
 import { DropIndicator } from "../DropIndicator";
 import { SortableHeaderCell } from "../SortableHeaderCell";
 import { EmptyChildrenGroup } from "./EmptyChildrenGroup";
-import { DATA_TESTID } from "../../configs/constants";
+import { DATA_TESTID } from "../../configs";
+import DataTableContext from "../../DataTableContext";
 const StyledWrapper = styled(Grid)`
   position: relative;
+  ${({ shouldDropOneLevel }) => shouldDropOneLevel ? `top: 50%; height: 50%;` : ""}
   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"};
+  border-left: ${({ isFirst }) => isFirst ? "0px" : "1px"} solid ${(props) => props.theme.colors.neutral["080"]};
 `;
 const HeaderCellGroupComp = ({
   header,
   isDragOverlay,
   isDraggingParent,
-  isLast
+  isLast,
+  isFirst,
+  level = 0
 }) => {
+  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;
@@ -36,7 +43,9 @@ const HeaderCellGroupComp = ({
     isDragOverlay,
     isDragging,
     cols: ["auto"],
-    "data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0
+    "data-testid": isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : void 0,
+    isFirst,
+    shouldDropOneLevel: isMultiLevel && level === 0 && !children
   }, /* @__PURE__ */ React2.createElement(HeaderCell, {
     column: header,
     isDragOverlay,
@@ -49,7 +58,9 @@ const HeaderCellGroupComp = ({
     header: h,
     isDragOverlay,
     isDraggingParent: isDragging,
-    isLast: index === children.length - 1
+    isLast: index === children.length - 1,
+    isFirst: index === 0,
+    level: level + 1
   }))), children?.length && isDragOverlay && /* @__PURE__ */ React2.createElement(EmptyChildrenGroup, null), /* @__PURE__ */ React2.createElement(DropIndicator, {
     vertical: true,
     dropIndicatorPosition,
@@ -60,7 +71,9 @@ HeaderCellGroupComp.propTypes = {
   header: PropTypes.any,
   isDragOverlay: PropTypes.bool,
   isDraggingParent: PropTypes.bool,
-  isLast: PropTypes.bool
+  isLast: PropTypes.bool,
+  isFirst: PropTypes.bool,
+  level: PropTypes.number
 };
 const HeaderCellGroup = HeaderCellGroupComp;
 const HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);

package/dist/esm/parts/Headers/HeaderCellGroup.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCellGroup.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst StyledWrapper = styled(Grid)`\n  position: relative;\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: TypescriptColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n}) => {\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} />\n    </StyledWrapper>\n  );\n};\n\nHeaderCellGroupComp.propTypes = {\n  header: PropTypes.any,\n  isDragOverlay: PropTypes.bool,\n  isDraggingParent: PropTypes.bool,\n  isLast: PropTypes.bool,\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nconst HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n\nexport default HeaderCellGroupSortable;\n"],
-  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA,WAElB,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA;AAUlF,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,mBAAmB,WAAW;AAEtC,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,qCAAC,eAAD;AAAA,IACE,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC;AAAA,IACP,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,KAE1E,qCAAC,YAAD;AAAA,IAAY,QAAQ;AAAA,IAAQ;AAAA,IAA8B;AAAA,MACzD,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,qCAAC,oBAAD;AAAA,IAAoB,OAAO;AAAA,IAAU;AAAA,KAClC,SAAS,IAAI,CAAC,GAAG,UAChB,qCAAC,YAAD;AAAA,IACE,KAAK,EAAE;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,QAK3C,UAAU,UAAU,iBAAiB,qCAAC,oBAAD,OACtC,qCAAC,eAAD;AAAA,IAAe,UAAQ;AAAA,IAAC;AAAA,IAA8C,QAAQ,UAAU;AAAA;AAAA;AAK9F,oBAAoB,YAAY;AAAA,EAC9B,QAAQ,UAAU;AAAA,EAClB,eAAe,UAAU;AAAA,EACzB,kBAAkB,UAAU;AAAA,EAC5B,QAAQ,UAAU;AAAA;AAKb,MAAM,kBAAkB;AAE/B,MAAM,0BAA0B,6BAA6B;AAE7D,IAAO,0BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useContext } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { HeaderCell } from './HeaderCell';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { withDnDSortableColumnContext } from '../HoC/withDnDSortableColumnContext';\nimport { DropIndicator } from '../DropIndicator';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\nimport { EmptyChildrenGroup } from './EmptyChildrenGroup';\nimport { DATA_TESTID } from '../../configs';\nimport DataTableContext from '../../DataTableContext';\n\nconst StyledWrapper = styled(Grid)`\n  position: relative;\n  ${({ shouldDropOneLevel }) => (shouldDropOneLevel ? `top: 50%; height: 50%;` : '')}\n  width: ${(props) => (props.isDragOverlay ? 'fit-content' : '100%')};\n  grid-column: ${(props) => props.gridColumn};\n  background: ${(props) => (props.isDragging ? props.theme.colors.neutral['080'] : 'white')};\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n  border-left: ${({ isFirst }) => (isFirst ? '0px' : '1px')} solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\ninterface HeaderCellGroupCompProps {\n  header: TypescriptColumn;\n  isDragOverlay?: boolean;\n  isDraggingParent?: boolean;\n  isLast?: boolean;\n  isFirst?: boolean;\n  level?: number;\n}\n\nconst HeaderCellGroupComp: React.ComponentType<HeaderCellGroupCompProps> = ({\n  header,\n  isDragOverlay,\n  isDraggingParent,\n  isLast,\n  isFirst,\n  level = 0,\n}) => {\n  const { visibleColumns } = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const isMultiLevel = visibleColumns.some((col) => !!col.columns);\n\n  const children = header.columns;\n\n  const isDragging = (draggableProps && draggableProps.isDragging) || isDraggingParent;\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;\n\n  const colSpan = children?.length ?? 1;\n  return (\n    <StyledWrapper\n      ref={draggableProps ? draggableProps.setNodeRef : null}\n      gridColumn={isDragOverlay ? 'auto' : `span ${colSpan}`}\n      isDragOverlay={isDragOverlay}\n      isDragging={isDragging}\n      cols={['auto']}\n      data-testid={isDragOverlay ? DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY : undefined}\n      isFirst={isFirst}\n      shouldDropOneLevel={isMultiLevel && level === 0 && !children}\n    >\n      <HeaderCell column={header} isDragOverlay={isDragOverlay} colSpan={colSpan} />\n      {!!children?.length && !isDragOverlay && (\n        <SortableHeaderCell items={children} isDragOverlay={isDragOverlay}>\n          {children.map((h, index) => (\n            <ChildGroup\n              key={h.id}\n              header={h}\n              isDragOverlay={isDragOverlay}\n              isDraggingParent={isDragging}\n              isLast={index === children.length - 1}\n              isFirst={index === 0}\n              level={level + 1}\n            />\n          ))}\n        </SortableHeaderCell>\n      )}\n      {children?.length && isDragOverlay && <EmptyChildrenGroup />}\n      <DropIndicator vertical dropIndicatorPosition={dropIndicatorPosition} isLast={isLast && isDragging} />\n    </StyledWrapper>\n  );\n};\n\nHeaderCellGroupComp.propTypes = {\n  header: PropTypes.any,\n  isDragOverlay: PropTypes.bool,\n  isDraggingParent: PropTypes.bool,\n  isLast: PropTypes.bool,\n  isFirst: PropTypes.bool,\n  level: PropTypes.number,\n};\n\n// We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function\n\nexport const HeaderCellGroup = HeaderCellGroupComp;\n\nconst HeaderCellGroupSortable = withDnDSortableColumnContext(HeaderCellGroupComp);\n\nexport default HeaderCellGroupSortable;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA,MAAM,gBAAgB,OAAO;AAAA;AAAA,IAEzB,CAAC,EAAE,yBAA0B,qBAAqB,2BAA2B;AAAA,WACtE,CAAC,UAAW,MAAM,gBAAgB,gBAAgB;AAAA,iBAC5C,CAAC,UAAU,MAAM;AAAA,gBAClB,CAAC,UAAW,MAAM,aAAa,MAAM,MAAM,OAAO,QAAQ,SAAS;AAAA,aACtE,CAAC,UAAW,MAAM,aAAa,MAAM;AAAA,4BACtB,CAAC,UAAW,MAAM,gBAAgB,oBAAoB;AAAA,iBACjE,CAAC,EAAE,cAAe,UAAU,QAAQ,eAAgB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAY3G,MAAM,sBAAqE,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,MACJ;AACJ,QAAM,EAAE,mBAAmB,WAAW;AACtC,QAAM,EAAE,mBAAmB,WAAW;AAEtC,QAAM,eAAe,eAAe,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI;AAExD,QAAM,WAAW,OAAO;AAExB,QAAM,aAAc,kBAAkB,eAAe,cAAe;AACpE,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,QAAM,aAAa,gBAAgB,kBAAkB;AAErD,QAAM,UAAU,UAAU,UAAU;AACpC,SACE,qCAAC,eAAD;AAAA,IACE,KAAK,iBAAiB,eAAe,aAAa;AAAA,IAClD,YAAY,gBAAgB,SAAS,QAAQ;AAAA,IAC7C;AAAA,IACA;AAAA,IACA,MAAM,CAAC;AAAA,IACP,eAAa,gBAAgB,YAAY,iCAAiC;AAAA,IAC1E;AAAA,IACA,oBAAoB,gBAAgB,UAAU,KAAK,CAAC;AAAA,KAEpD,qCAAC,YAAD;AAAA,IAAY,QAAQ;AAAA,IAAQ;AAAA,IAA8B;AAAA,MACzD,CAAC,CAAC,UAAU,UAAU,CAAC,iBACtB,qCAAC,oBAAD;AAAA,IAAoB,OAAO;AAAA,IAAU;AAAA,KAClC,SAAS,IAAI,CAAC,GAAG,UAChB,qCAAC,YAAD;AAAA,IACE,KAAK,EAAE;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,kBAAkB;AAAA,IAClB,QAAQ,UAAU,SAAS,SAAS;AAAA,IACpC,SAAS,UAAU;AAAA,IACnB,OAAO,QAAQ;AAAA,QAKtB,UAAU,UAAU,iBAAiB,qCAAC,oBAAD,OACtC,qCAAC,eAAD;AAAA,IAAe,UAAQ;AAAA,IAAC;AAAA,IAA8C,QAAQ,UAAU;AAAA;AAAA;AAK9F,oBAAoB,YAAY;AAAA,EAC9B,QAAQ,UAAU;AAAA,EAClB,eAAe,UAAU;AAAA,EACzB,kBAAkB,UAAU;AAAA,EAC5B,QAAQ,UAAU;AAAA,EAClB,SAAS,UAAU;AAAA,EACnB,OAAO,UAAU;AAAA;AAKZ,MAAM,kBAAkB;AAE/B,MAAM,0BAA0B,6BAA6B;AAE7D,IAAO,0BAAQ;",
   "names": []
 }

package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js

@@ -22,6 +22,7 @@ import { arrayMove } from "@dnd-kit/sortable";
 import { DataTableContext } from "../../DataTableContext";
 import { HeaderCellGroup } from "../Headers/HeaderCellGroup";
 import { DATA_TESTID } from "../../configs/constants";
+import { INTERNAL_COLUMNS } from "../../addons/Columns";
 const DnDGroupContext = createContext({
   activeIndex: void 0
 });
@@ -51,6 +52,9 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
     });
     const newData = [];
     newFlattenedData.forEach(([dndData, colData]) => {
+      if (INTERNAL_COLUMNS.includes(dndData.id)) {
+        return;
+      }
       if (dndData.parentId) {
         const parentNode = nodes[dndData.parentId];
         if (parentNode.columns)

package/dist/esm/parts/HoC/withConditionalDnDColumnContext.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\n\ntype DnDGroupContextType = {\n  activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n  const flattened = [];\n  const flatten = (col: TypescriptColumn, index, parentId = null) => {\n    const { id } = col;\n    flattened.push([{ id, parentId, index }, col]);\n    if (col.columns)\n      col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropColumns, onColumnsReorder },\n    visibleColumns,\n  } = React.useContext(DataTableContext);\n\n  const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n  const onReorder = useCallback(\n    (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n      // Send from index to target index\n      const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n      // Pull the cols's data into an object\n      const nodes = {};\n      newFlattenedData.forEach(([dndData, colData]) => {\n        delete colData.columns;\n        nodes[dndData.id] = colData;\n      });\n      const newData = [];\n      newFlattenedData.forEach(([dndData, colData]) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (dndData.parentId) {\n          const parentNode = nodes[dndData.parentId];\n          if (parentNode.columns) parentNode.columns.push(colData);\n          else parentNode.columns = [colData];\n        } else newData.push(colData);\n      });\n      onColumnsReorder(newData, indexes);\n    },\n    [flattenedItems, onColumnsReorder],\n  );\n\n  const onPreviewResetState = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) el.onscroll = () => null;\n  }, []);\n\n  const onPreviewDragStart = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) {\n      const y = el.scrollTop;\n      el.onscroll = () => el.scrollTo(0, y);\n    }\n  }, []);\n\n  const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n    flattenedItems,\n    dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n    isHorizontalDnD: true,\n    onReorder,\n    onPreviewResetState,\n    onPreviewDragStart,\n  });\n\n  if (dragAndDropColumns)\n    return (\n      <DndContext {...dndContextProps}>\n        <DnDGroupContext.Provider value={{ activeIndex }}>\n          <Component {...props} />\n        </DnDGroupContext.Provider>\n        <DragOverlay>\n          {activeId ? (\n            <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AAAA;AAGf,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY;AAClB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,SAAS;AACzC,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY;AAAA;AAE5G,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK;AAC1C,SAAO;AAAA;AAIF,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW;AAErB,QAAM,iBAAiB,QAAQ,MAAM,eAAe,iBAAiB,CAAC;AAEtE,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ;AAE9E,UAAM,QAAQ;AACd,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA;AAEtB,UAAM,UAAU;AAChB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAG/C,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK;AAAA;AAC3C,qBAAW,UAAU,CAAC;AAAA;AACtB,gBAAQ,KAAK;AAAA;AAEtB,qBAAiB,SAAS;AAAA,KAE5B,CAAC,gBAAgB;AAGnB,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY;AAE/B,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,KAC3B;AAEH,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY;AAE/B,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,GAAG,SAAS,GAAG;AAAA;AAAA,KAEpC;AAEH,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,yBAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,YAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA;AAGF,MAAI;AACF,WACE,qCAAC,YAAD,mBAAgB,kBACd,qCAAC,gBAAgB,UAAjB;AAAA,MAA0B,OAAO,EAAE;AAAA,OACjC,qCAAC,WAAD,mBAAe,UAEjB,qCAAC,aAAD,MACG,WACC,qCAAC,iBAAD;AAAA,MAAiB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,UAAU;AAAA,MAAI,eAAa;AAAA,SAC9F;AAIZ,SAAO,qCAAC,WAAD,mBAAe;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { arrayMove } from '@dnd-kit/sortable';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n  activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n  const flattened = [];\n  const flatten = (col: TypescriptColumn, index, parentId = null) => {\n    const { id } = col;\n    flattened.push([{ id, parentId, index }, col]);\n    if (col.columns)\n      col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropColumns, onColumnsReorder },\n    visibleColumns,\n  } = React.useContext(DataTableContext);\n\n  const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n  const onReorder = useCallback(\n    (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\n      // Send from index to target index\n      const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n      // Pull the cols's data into an object\n      const nodes = {};\n      newFlattenedData.forEach(([dndData, colData]) => {\n        delete colData.columns;\n        nodes[dndData.id] = colData;\n      });\n      const newData = [];\n      newFlattenedData.forEach(([dndData, colData]) => {\n        // Don't send internal columns to the user\n        if (INTERNAL_COLUMNS.includes(dndData.id)) {\n          return;\n        }\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (dndData.parentId) {\n          const parentNode = nodes[dndData.parentId];\n          if (parentNode.columns) parentNode.columns.push(colData);\n          else parentNode.columns = [colData];\n        } else newData.push(colData);\n      });\n      onColumnsReorder(newData, indexes);\n    },\n    [flattenedItems, onColumnsReorder],\n  );\n\n  const onPreviewResetState = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) el.onscroll = () => null;\n  }, []);\n\n  const onPreviewDragStart = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) {\n      const y = el.scrollTop;\n      el.onscroll = () => el.scrollTo(0, y);\n    }\n  }, []);\n\n  const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n    flattenedItems,\n    dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n    isHorizontalDnD: true,\n    onReorder,\n    onPreviewResetState,\n    onPreviewDragStart,\n  });\n\n  if (dragAndDropColumns)\n    return (\n      <DndContext {...dndContextProps}>\n        <DnDGroupContext.Provider value={{ activeIndex }}>\n          <Component {...props} />\n        </DnDGroupContext.Provider>\n        <DragOverlay>\n          {activeId ? (\n            <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AAEA;AAGA;AACA;AACA;AAMO,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AAAA;AAGf,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY;AAClB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,OAAO;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,SAAS;AACzC,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY;AAAA;AAE5G,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK;AAC1C,SAAO;AAAA;AAIF,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB;AAAA,IAClC;AAAA,MACE,OAAM,WAAW;AAErB,QAAM,iBAAiB,QAAQ,MAAM,eAAe,iBAAiB,CAAC;AAEtE,QAAM,YAAY,YAChB,CAAC,WAAiB,YAAwD;AAExE,UAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ;AAE9E,UAAM,QAAQ;AACd,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAC/C,aAAO,QAAQ;AACf,YAAM,QAAQ,MAAM;AAAA;AAEtB,UAAM,UAAU;AAChB,qBAAiB,QAAQ,CAAC,CAAC,SAAS,aAAa;AAE/C,UAAI,iBAAiB,SAAS,QAAQ,KAAK;AACzC;AAAA;AAIF,UAAI,QAAQ,UAAU;AACpB,cAAM,aAAa,MAAM,QAAQ;AACjC,YAAI,WAAW;AAAS,qBAAW,QAAQ,KAAK;AAAA;AAC3C,qBAAW,UAAU,CAAC;AAAA;AACtB,gBAAQ,KAAK;AAAA;AAEtB,qBAAiB,SAAS;AAAA,KAE5B,CAAC,gBAAgB;AAGnB,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY;AAE/B,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,KAC3B;AAEH,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK,cAC9C,iBAAiB,YAAY;AAE/B,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM,GAAG,SAAS,GAAG;AAAA;AAAA,KAEpC;AAEH,QAAM,EAAE,iBAAiB,UAAU,gBAAgB,yBAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,YAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA;AAGF,MAAI;AACF,WACE,qCAAC,YAAD,mBAAgB,kBACd,qCAAC,gBAAgB,UAAjB;AAAA,MAA0B,OAAO,EAAE;AAAA,OACjC,qCAAC,WAAD,mBAAe,UAEjB,qCAAC,aAAD,MACG,WACC,qCAAC,iBAAD;AAAA,MAAiB,QAAQ,eAAe,KAAK,CAAC,CAAC,UAAU,KAAK,OAAO,UAAU;AAAA,MAAI,eAAa;AAAA,SAC9F;AAIZ,SAAO,qCAAC,WAAD,mBAAe;AAAA;",
   "names": []
 }

package/dist/esm/styled.js

@@ -78,6 +78,8 @@ const StyledHeadTr = styled(Grid)`
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 })};
+  border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral["080"]};
 `;
 const getStyledHeadTHBorderColor = (props) => {
   if (props.dragOverlay)
@@ -96,16 +98,27 @@ const StyledHeadTh = styled.div`
   ${columnPadding}
   color: #353c46;
   min-height: 1.84615rem;
-  position: relative;
   position: sticky;
-  top: 0;
   z-index: ${ZIndexDataTable.HEADER_ROW};
   display: flex;
   justify-content: space-between;
   box-sizing: border-box;
-  border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
-  border-bottom: 1px solid ${getStyledHeadTHBorderColor};
   outline: none;
+  ${(props) => props.isDraggingActive ? "" : `:hover {
+          &:after {
+            display: block;
+            content: ' ';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-bottom: 1px solid ${props.theme.colors.brand[700]};
+            pointer-events: none;
+            z-index: ${ZIndexDataTable.FOCUS_BORDER};
+          }
+          cursor: pointer;
+        }`}
 
   :focus {
     &:after {
@@ -114,18 +127,13 @@ const StyledHeadTh = styled.div`
       position: absolute;
       top: 0;
       left: 0;
-      right: -1px;
-      bottom: -1px;
+      right: 0;
+      bottom: 0;
       border: 2px solid ${(props) => props.theme.colors.brand[700]};
       pointer-events: none;
       z-index: ${ZIndexDataTable.FOCUS_BORDER};
     }
   }
-
-  ${(props) => props.isDraggingActive ? "" : `:hover {
-    border-bottom: 1px solid ${props.isDragOverlay ? "transparent" : props.theme.colors.brand[800]};
-    cursor: pointer;
-  }`}
 `;
 const StyledHeaderRightIconsWrapper = styled.div`
   height: 100%;

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n`;\n\nexport const StyledDataTableWrapper = styled.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n`;\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  ${({ width = '100%', height = '100%' }) => `\n  width: ${sizeToCss(width)};\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  ${({ height = 'auto', width = '100%' }) => `\n  height: ${sizeToCss(height)};\n  width: ${sizeToCss(width)};\n  `}\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n  if (props.dragOverlay) return 'transparent';\n  if (props.isFirstRowGroup) return 'transparent';\n  return props.theme.colors.neutral['080'];\n};\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: relative;\n  position: sticky;\n  top: 0;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${getStyledHeadTHBorderColor};\n  outline: none;\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: -1px;\n      bottom: -1px;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n    border-bottom: 1px solid ${props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800]};\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: ${({ isResizing, theme }) => (isResizing ? theme.colors.brand[600] : theme.colors.brand[400])};\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  /* border-bottom: 1px solid #ebedf0; */\n  /* box-sizing: border-box; */\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n  /* width: ${(props) =>\n    props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding: 0 ${(props) => props.padding};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n  grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme });\n  }}\n\n  ${({ shouldDisplayHover, theme }) =>\n    shouldDisplayHover\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n`;\n\nexport const StyledDataTableWrapper = styled.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n`;\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  ${({ width = '100%', height = '100%' }) => `\n  width: ${sizeToCss(width)};\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  ${({ height = 'auto', width = '100%' }) => `\n  height: ${sizeToCss(height)};\n  width: ${sizeToCss(width)};\n  `}\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral['080']};\n`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n  if (props.dragOverlay) return 'transparent';\n  if (props.isFirstRowGroup) return 'transparent';\n  return props.theme.colors.neutral['080'];\n};\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: sticky;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  outline: none;\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `: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 ${props.theme.colors.brand[700]};\n            pointer-events: none;\n            z-index: ${ZIndexDataTable.FOCUS_BORDER};\n          }\n          cursor: pointer;\n        }`}\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: ${({ isResizing, theme }) => (isResizing ? theme.colors.brand[600] : theme.colors.brand[400])};\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  /* border-bottom: 1px solid #ebedf0; */\n  /* box-sizing: border-box; */\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n  /* width: ${(props) =>\n    props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding: 0 ${(props) => props.padding};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n  grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme });\n  }}\n\n  ${({ shouldDisplayHover, theme }) =>\n    shouldDisplayHover\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-next.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -573,24 +573,24 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.3",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "3.0.0-alpha.3",
-    "@elliemae/ds-circular-progress-indicator": "3.0.0-alpha.3",
-    "@elliemae/ds-controlled-form": "3.0.0-alpha.3",
-    "@elliemae/ds-drag-and-drop": "3.0.0-alpha.3",
-    "@elliemae/ds-dropdownmenu": "3.0.0-alpha.3",
-    "@elliemae/ds-form": "3.0.0-alpha.3",
-    "@elliemae/ds-form-layout-blocks": "3.0.0-alpha.3",
-    "@elliemae/ds-grid": "3.0.0-alpha.3",
-    "@elliemae/ds-icons": "3.0.0-alpha.3",
-    "@elliemae/ds-indeterminate-progress-indicator": "3.0.0-alpha.3",
-    "@elliemae/ds-pagination": "3.0.0-alpha.3",
-    "@elliemae/ds-pills": "3.0.0-alpha.3",
-    "@elliemae/ds-popperjs": "3.0.0-alpha.3",
-    "@elliemae/ds-props-helpers": "3.0.0-alpha.3",
-    "@elliemae/ds-system": "3.0.0-alpha.3",
-    "@elliemae/ds-toolbar": "3.0.0-alpha.3",
-    "@elliemae/ds-truncated-tooltip-text": "3.0.0-alpha.3",
-    "@elliemae/ds-utilities": "3.0.0-alpha.3",
+    "@elliemae/ds-button": "3.0.0-next.3",
+    "@elliemae/ds-circular-progress-indicator": "3.0.0-next.3",
+    "@elliemae/ds-controlled-form": "3.0.0-next.3",
+    "@elliemae/ds-drag-and-drop": "3.0.0-next.3",
+    "@elliemae/ds-dropdownmenu": "3.0.0-next.3",
+    "@elliemae/ds-form": "3.0.0-next.3",
+    "@elliemae/ds-form-layout-blocks": "3.0.0-next.3",
+    "@elliemae/ds-grid": "3.0.0-next.3",
+    "@elliemae/ds-icons": "3.0.0-next.3",
+    "@elliemae/ds-indeterminate-progress-indicator": "3.0.0-next.3",
+    "@elliemae/ds-pagination": "3.0.0-next.3",
+    "@elliemae/ds-pills": "3.0.0-next.3",
+    "@elliemae/ds-popperjs": "3.0.0-next.3",
+    "@elliemae/ds-props-helpers": "3.0.0-next.3",
+    "@elliemae/ds-system": "3.0.0-next.3",
+    "@elliemae/ds-toolbar": "3.0.0-next.3",
+    "@elliemae/ds-truncated-tooltip-text": "3.0.0-next.3",
+    "@elliemae/ds-utilities": "3.0.0-next.3",
     "@reduxjs/toolkit": "~1.7.1",
     "csstype": "~3.0.10",
     "moment": "~2.29.1",