@elliemae/ds-data-table 3.16.0 → 3.16.2

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

@@ -10,9 +10,9 @@ import {
   restrictToFirstScrollableAncestor
 } from "@elliemae/ds-drag-and-drop";
 import { createPortal } from "react-dom";
-import { DataTableContext } from "../../DataTableContext";
-import { Row } from "../Row";
-import { DnDTreeContext } from "./DnDTreeContext";
+import { DataTableContext } from "../../DataTableContext.js";
+import { Row } from "../Row.js";
+import { DnDTreeContext } from "./DnDTreeContext.js";
 const withConditionalDnDRowContext = (Component) => (props) => {
   const {
     tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n  restrictToFirstScrollableAncestor,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { Row } from '../Row';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport type { TypescriptRow } from '../../types/props';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n    flattenedData,\n    allDataFlattened,\n  } = React.useContext(DataTableContext);\n\n  const onReorder: DnDKitTree.OnReorder<TypescriptRow> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<string, TypescriptRow> = {};\n      movedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as TypescriptRow[];\n      movedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n    },\n    [allDataFlattened, flattenedData, onRowsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: allDataFlattened,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid: getIsDropValid,\n  });\n\n  const visibleItems = useMemo(() => {\n    if (!active) return flattenedData;\n    return removeChildrenOf(flattenedData, active.id);\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={flattenedData.find((row) => row.uid === active.id)} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+EjB,SAGM,KAHN;AA9EN,OAAOA,UAAS,aAAa,eAAe;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AAErC,QAAM,YAAiD;AAAA,IACrD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AAErE,YAAM,QAAuC,CAAC;AAC9C,gBAAU,QAAQ,CAAC,QAAQ;AACzB,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,OAAO,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,gBAAU,QAAQ,CAAC,QAAQ;AAGzB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI;AAC7B,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,IAAI,oBAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,WAAO,iBAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,mBAAiB,GAAG,sBACnB,8BAAC,eAAe,UAAf,EAAwB,OAAO,KAC9B,8BAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,MACC;AAAA,QACC,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,iCAAiC,GACjF,mBAAS,oBAAC,OAAI,KAAK,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,GAAG,eAAa,MAAC,IAAK,MAC7F;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  removeChildrenOf,\n  restrictToFirstScrollableAncestor,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { TypescriptRow } from 'types/props';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel, getIsDropValid },\n    flattenedData,\n    allDataFlattened,\n  } = React.useContext(DataTableContext);\n\n  const onReorder: DnDKitTree.OnReorder<TypescriptRow> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      // Pull the row's original data into an object\n      const nodes: Record<string, TypescriptRow> = {};\n      movedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as TypescriptRow[];\n      movedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n    },\n    [allDataFlattened, flattenedData, onRowsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: allDataFlattened,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid: getIsDropValid,\n  });\n\n  const visibleItems = useMemo(() => {\n    if (!active) return flattenedData;\n    return removeChildrenOf(flattenedData, active.id);\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={flattenedData.find((row) => row.uid === active.id)} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC+EjB,SAGM,KAHN;AA9EN,OAAOA,UAAS,aAAa,eAAe;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AAErC,QAAM,YAAiD;AAAA,IACrD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AAErE,YAAM,QAAuC,CAAC;AAC9C,gBAAU,QAAQ,CAAC,QAAQ;AACzB,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,gBAAU,QAAQ,CAAC,QAAQ;AAGzB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,IAAI,oBAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,WAAO,iBAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,mBAAiB,GAAG,sBACnB,8BAAC,eAAe,UAAf,EAAwB,OAAO,KAC9B,8BAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,MACC;AAAA,QACC,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,iCAAiC,GACjF,mBAAS,oBAAC,OAAI,KAAK,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,GAAG,eAAa,MAAC,IAAK,MAC7F;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": ["React"]
 }

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

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { horizontalListSortingStrategy, SortableContext } from "@elliemae/ds-drag-and-drop";
 import { useContext } from "react";
-import { DataTableContext } from "../../DataTableContext";
+import { DataTableContext } from "../../DataTableContext.js";
 const withConditionalDnDSortableContext = (items, isDragOverlay = false) => (Component) => (props) => {
   const {
     tableProps: { dragAndDropColumns }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDSortableContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { horizontalListSortingStrategy, SortableContext } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext } from 'react';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport type { TypescriptColumn } from '../../types/props';\n\nexport const withConditionalDnDSortableContext =\n  (items: TypescriptColumn[], isDragOverlay = false): FunctionalHOC =>\n  (Component) =>\n  (props) => {\n    const {\n      tableProps: { dragAndDropColumns },\n    } = useContext(DataTableContext);\n\n    // Only add the context if it's not a dragOverlay and dnd for cols was requested\n    // It's important that drag overlays DO NOT have any sortable functionality!\n    if (!isDragOverlay && dragAndDropColumns)\n      return (\n        <SortableContext items={items.map((item) => item.id)} strategy={horizontalListSortingStrategy}>\n          <Component {...props} />\n        </SortableContext>\n      );\n\n    return <Component {...props} />;\n  };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { horizontalListSortingStrategy, SortableContext } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext } from 'react';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport type { TypescriptColumn } from '../../types/props.js';\n\nexport const withConditionalDnDSortableContext =\n  (items: TypescriptColumn[], isDragOverlay = false): FunctionalHOC =>\n  (Component) =>\n  (props) => {\n    const {\n      tableProps: { dragAndDropColumns },\n    } = useContext(DataTableContext);\n\n    // Only add the context if it's not a dragOverlay and dnd for cols was requested\n    // It's important that drag overlays DO NOT have any sortable functionality!\n    if (!isDragOverlay && dragAndDropColumns)\n      return (\n        <SortableContext items={items.map((item) => item.id)} strategy={horizontalListSortingStrategy}>\n          <Component {...props} />\n        </SortableContext>\n      );\n\n    return <Component {...props} />;\n  };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACmBb;AAnBV,SAAS,+BAA+B,uBAAuB;AAC/D,SAAgB,kBAAkB;AAClC,SAAS,wBAAwB;AAI1B,MAAM,oCACX,CAAC,OAA2B,gBAAgB,UAC5C,CAAC,cACD,CAAC,UAAU;AACT,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,EACnC,IAAI,WAAW,gBAAgB;AAI/B,MAAI,CAAC,iBAAiB;AACpB,WACE,oBAAC,mBAAgB,OAAO,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,GAAG,UAAU,+BAC9D,8BAAC,aAAW,GAAG,OAAO,GACxB;AAGJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

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

@@ -2,10 +2,10 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
-import { DataTableContext } from "../../DataTableContext";
-import { DropIndicatorPosition } from "../../types/props";
-import { DnDGroupContext } from "./withConditionalDnDColumnContext";
-import { SortableItemContext } from "./SortableItemContext";
+import { DataTableContext } from "../../DataTableContext.js";
+import { DropIndicatorPosition } from "../../types/props.js";
+import { DnDGroupContext } from "./withConditionalDnDColumnContext.js";
+import { SortableItemContext } from "./SortableItemContext.js";
 const withDnDSortableColumnContext = (Component) => function(props) {
   const {
     tableProps: { dragAndDropColumns }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withDnDSortableColumnContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DropIndicatorPosition } from '../../types/props';\nimport { DnDGroupContext } from './withConditionalDnDColumnContext';\nimport type { SortableItemContextType } from './SortableItemContext';\nimport { SortableItemContext } from './SortableItemContext';\n\nexport const withDnDSortableColumnContext: FunctionalHOC = (Component) =>\n  function (props: any) {\n    const {\n      tableProps: { dragAndDropColumns },\n    } = useContext(DataTableContext);\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition: index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { DropIndicatorPosition } from '../../types/props.js';\nimport { DnDGroupContext } from './withConditionalDnDColumnContext.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\n\nexport const withDnDSortableColumnContext: FunctionalHOC = (Component) =>\n  function (props: any) {\n    const {\n      tableProps: { dragAndDropColumns },\n    } = useContext(DataTableContext);\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition: index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACkDf;AAlDR,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAEjC,SAAS,6BAA6B;AACtC,SAAS,uBAAuB;AAEhC,SAAS,2BAA2B;AAE7B,MAAM,+BAA8C,CAAC,cAC1D,SAAU,OAAY;AACpB,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,EACnC,IAAI,WAAW,gBAAgB;AAC/B,QAAM,EAAE,YAAY,IAAI,WAAW,eAAe;AAGlD,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAGvD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAoB,aAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBAAuB,QAAQ,cAAc,sBAAsB,QAAQ,sBAAsB;AAAA,IACnG;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

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

@@ -2,9 +2,9 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useContext, useMemo } from "react";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
-import { DataTableContext } from "../../DataTableContext";
-import { DnDTreeContext } from "./DnDTreeContext";
-import { SortableItemContext } from "./SortableItemContext";
+import { DataTableContext } from "../../DataTableContext.js";
+import { DnDTreeContext } from "./DnDTreeContext.js";
+import { SortableItemContext } from "./SortableItemContext.js";
 const withDnDSortableRowContext = (Component) => function(props) {
   const {
     tableProps: { dragAndDropRows }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withDnDSortableRowContext.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext';\nimport { DnDTreeContext } from './DnDTreeContext';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC';\nimport type { SortableItemContextType } from './SortableItemContext';\nimport { SortableItemContext } from './SortableItemContext';\n\nexport const withDnDSortableRowContext: FunctionalHOC = (Component) =>\n  function (props: any) {\n    const {\n      tableProps: { dragAndDropRows },\n    } = useContext(DataTableContext);\n    const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.row.uid,\n      }),\n      [props.row],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropRows) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index,\n        dropIndicatorPosition,\n        isDropValid,\n      };\n    }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition]);\n\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DataTableContext } from '../../DataTableContext.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\n\nexport const withDnDSortableRowContext: FunctionalHOC = (Component) =>\n  function (props: any) {\n    const {\n      tableProps: { dragAndDropRows },\n    } = useContext(DataTableContext);\n    const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.row.uid,\n      }),\n      [props.row],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropRows) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index,\n        dropIndicatorPosition,\n        isDropValid,\n      };\n    }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition]);\n\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n"],
   "mappings": "AAAA,YAAY,WAAW;ACmDf;AAnDR,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,sBAAsB;AAG/B,SAAS,2BAA2B;AAE7B,MAAM,4BAA2C,CAAC,cACvD,SAAU,OAAY;AACpB,QAAM;AAAA,IACJ,YAAY,EAAE,gBAAgB;AAAA,EAChC,IAAI,WAAW,gBAAgB;AAC/B,QAAM,EAAE,uBAAuB,YAAY,IAAI,WAAW,cAAc;AAGxE,QAAM,mBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,IAAI;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,GAAG;AAAA,EACZ;AAEA,QAAM,qBAAqB,YAAY,gBAAgB;AAGvD,QAAM,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC;AAAiB,aAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,qBAAqB,CAAC;AAK/D,QAAM,MAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,KACnC,8BAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Row.js

@@ -3,10 +3,10 @@ import { jsx } from "react/jsx-runtime";
 import { useContext } from "react";
 import { mergeRefs } from "@elliemae/ds-utilities";
 import { styled } from "@elliemae/ds-system";
-import { DataTableContext } from "../DataTableContext";
-import { SortableItemContext } from "./HoC/SortableItemContext";
-import { withDnDSortableRowContext } from "./HoC/withDnDSortableRowContext";
-import { RowVariantMapItem } from "./RowVariants";
+import { DataTableContext } from "../DataTableContext.js";
+import { SortableItemContext } from "./HoC/SortableItemContext.js";
+import { withDnDSortableRowContext } from "./HoC/withDnDSortableRowContext.js";
+import { RowVariantMapItem } from "./RowVariants/index.js";
 const StyledRow = styled("div")`
   cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "normal"};
 `;

package/dist/esm/parts/Row.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Row.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { DataTableContext } from '../DataTableContext';\nimport { SortableItemContext } from './HoC/SortableItemContext';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext';\nimport { RowVariantMapItem } from './RowVariants';\n\nconst StyledRow = styled('div')`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\n\n  const { draggableProps } = useContext(SortableItemContext);\n  const draggableRef = draggableProps && draggableProps.setNodeRef;\n  return (\n    <StyledRow\n      isDisabled={disabledRows[row.uid]}\n      style={!isDragOverlay ? itemWrapperStyle : {}}\n      ref={mergeRefs(measureRef, draggableRef)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC6BjB;AA7BN,SAAgB,kBAAkB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI;AAAA,MAC7B,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,UAAU,YAAY,YAAY;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,0BAA0B,GAAG;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext } from 'react';\nimport { mergeRefs } from '@elliemae/ds-utilities';\nimport { styled } from '@elliemae/ds-system';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\n\nconst StyledRow = styled('div')`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { disabledRows },\n    focusedRowId,\n    drilldownRowId,\n  } = ctx;\n\n  const { draggableProps } = useContext(SortableItemContext);\n  const draggableRef = draggableProps && draggableProps.setNodeRef;\n  return (\n    <StyledRow\n      isDisabled={disabledRows[row.uid]}\n      style={!isDragOverlay ? itemWrapperStyle : {}}\n      ref={mergeRefs(measureRef, draggableRef)}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        ctx={ctx}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6BjB;AA7BN,SAAgB,kBAAkB;AAClC,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,MAAM,YAAY,OAAO,KAAK;AAAA,YAClB,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB;AAAA;AAGvD,MAAM,MAAM,CAAC,UAAU;AAC5B,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,MAAM,WAAW,gBAAgB;AACvC,QAAM;AAAA,IACJ,YAAY,EAAE,aAAa;AAAA,IAC3B;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AACzD,QAAM,eAAe,kBAAkB,eAAe;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAY,aAAa,IAAI,GAAG;AAAA,MAChC,OAAO,CAAC,gBAAgB,mBAAmB,CAAC;AAAA,MAC5C,KAAK,UAAU,YAAY,YAAY;AAAA,MAEvC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,iBAAiB,0BAA0B,GAAG;",
   "names": []
 }

package/dist/esm/parts/RowVariants/RowVariantHeader.js

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef } from "react";
-import { RowRenderer } from "../../exported-related/RowRenderer";
-import { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from "../../styled";
-import { expandRowColumn } from "../../addons/Columns";
-import { DATA_TESTID } from "../../configs/constants";
+import { RowRenderer } from "../../exported-related/RowRenderer/index.js";
+import { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from "../../styled.js";
+import { expandRowColumn } from "../../addons/Columns/index.js";
+import { DATA_TESTID } from "../../configs/constants.js";
 const RowContent = (props) => {
   const {
     row,

package/dist/esm/parts/RowVariants/RowVariantHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/RowVariants/RowVariantHeader.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useMemo, useRef } from 'react';\nimport { RowRenderer } from '../../exported-related/RowRenderer';\nimport { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from '../../styled';\nimport type { RowVariantProps } from './types';\nimport { expandRowColumn } from '../../addons/Columns';\nimport { DATA_TESTID } from '../../configs/constants';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx,\n    ctx: {\n      tableProps: { groupedRowsRenderHeader, disabledRows },\n    },\n    backgroundColor = 'white',\n    focusedRowId,\n    drilldownRowId,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const hasExpandCell = useMemo(\n    () => row.original.subRows && row.cells.find((cell) => cell.column.accessor === 'expandRowColumn'),\n    [row],\n  );\n\n  const titleContent = useMemo(() => {\n    if (typeof groupedRowsRenderHeader === 'function') {\n      return groupedRowsRenderHeader(row.original.dimsumHeaderValue, row.original.subRows);\n    }\n    return row.original.dimsumHeaderValue;\n  }, [groupedRowsRenderHeader, row]);\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const isDisabled = useMemo(() => disabledRows[row.uid] !== undefined, [disabledRows, row]);\n  return (\n    <StyledCellContainer\n      ref={rowRef}\n      minHeight=\"0px\"\n      tabIndex={0}\n      role=\"row\"\n      backgroundColor={backgroundColor}\n      aria-disabled={isDisabled ? 'true' : 'false'}\n      isDisabled={isDisabled}\n      data-testid={DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT}\n    >\n      <GroupHeaderContainer\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_GROUP_HEADER}\n        cols={hasExpandCell ? ['min-content', 'auto'] : ['auto']}\n        paddingLeft={hasExpandCell ? '2px' : '8px'}\n      >\n        {hasExpandCell && (\n          <expandRowColumn.Cell\n            row={row}\n            cell={row.cells[0]}\n            isRowSelected={drilldownRowId === row.uid}\n            ctx={ctx}\n            draggableProps={{}}\n          />\n        )}\n        <GroupHeaderTitle>{titleContent}</GroupHeaderTitle>\n      </GroupHeaderContainer>\n    </StyledCellContainer>\n  );\n};\n\nexport const RowVariantHeader: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => (\n  <RowRenderer\n    row={row}\n    itemIndex={itemIndex}\n    isDragOverlay={isDragOverlay}\n    minHeight=\"0px\"\n    height=\"24px\"\n    CustomRowContentRenderer={RowContent}\n    focusedRowId={focusedRowId}\n    drilldownRowId={drilldownRowId}\n  />\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACmDjB,SAMI,KANJ;AAnDN,SAAgB,iBAAiB,SAAS,cAAc;AACxD,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB,kBAAkB,2BAA2B;AAE5E,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,yBAAyB,aAAa;AAAA,IACtD;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,OAAuB,IAAI;AAE1C,QAAM,gBAAgB;AAAA,IACpB,MAAM,IAAI,SAAS,WAAW,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,aAAa,iBAAiB;AAAA,IACjG,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,OAAO,4BAA4B,YAAY;AACjD,aAAO,wBAAwB,IAAI,SAAS,mBAAmB,IAAI,SAAS,OAAO;AAAA,IACrF;AACA,WAAO,IAAI,SAAS;AAAA,EACtB,GAAG,CAAC,yBAAyB,GAAG,CAAC;AAEjC,kBAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,aAAa,QAAQ,MAAM,aAAa,IAAI,SAAS,QAAW,CAAC,cAAc,GAAG,CAAC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,iBAAe,aAAa,SAAS;AAAA,MACrC;AAAA,MACA,eAAa,YAAY;AAAA,MAEzB;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,YAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UAEpC;AAAA,6BACC;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,MAAM,IAAI,MAAM;AAAA,gBAChB,eAAe,mBAAmB,IAAI;AAAA,gBACtC;AAAA,gBACA,gBAAgB,CAAC;AAAA;AAAA,YACnB;AAAA,YAEF,oBAAC,oBAAkB,wBAAa;AAAA;AAAA;AAAA,MAClC;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,mBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAU;AAAA,IACV,QAAO;AAAA,IACP,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useLayoutEffect, useMemo, useRef } from 'react';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from '../../styled.js';\nimport type { RowVariantProps } from './types.js';\nimport { expandRowColumn } from '../../addons/Columns/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n  const {\n    row,\n    ctx,\n    ctx: {\n      tableProps: { groupedRowsRenderHeader, disabledRows },\n    },\n    backgroundColor = 'white',\n    focusedRowId,\n    drilldownRowId,\n  } = props;\n\n  const rowRef = useRef<HTMLDivElement>(null);\n\n  const hasExpandCell = useMemo(\n    () => row.original.subRows && row.cells.find((cell) => cell.column.accessor === 'expandRowColumn'),\n    [row],\n  );\n\n  const titleContent = useMemo(() => {\n    if (typeof groupedRowsRenderHeader === 'function') {\n      return groupedRowsRenderHeader(row.original.dimsumHeaderValue, row.original.subRows);\n    }\n    return row.original.dimsumHeaderValue;\n  }, [groupedRowsRenderHeader, row]);\n\n  useLayoutEffect(() => {\n    if (row.uid === focusedRowId) {\n      rowRef.current?.focus();\n    }\n  }, [focusedRowId, row.uid]);\n\n  const isDisabled = useMemo(() => disabledRows[row.uid] !== undefined, [disabledRows, row]);\n  return (\n    <StyledCellContainer\n      ref={rowRef}\n      minHeight=\"0px\"\n      tabIndex={0}\n      role=\"row\"\n      backgroundColor={backgroundColor}\n      aria-disabled={isDisabled ? 'true' : 'false'}\n      isDisabled={isDisabled}\n      data-testid={DATA_TESTID.DATA_TABLE_ROW_HEADER_CONTENT}\n    >\n      <GroupHeaderContainer\n        data-testid={DATA_TESTID.DATA_TABLE_ROW_GROUP_HEADER}\n        cols={hasExpandCell ? ['min-content', 'auto'] : ['auto']}\n        paddingLeft={hasExpandCell ? '2px' : '8px'}\n      >\n        {hasExpandCell && (\n          <expandRowColumn.Cell\n            row={row}\n            cell={row.cells[0]}\n            isRowSelected={drilldownRowId === row.uid}\n            ctx={ctx}\n            draggableProps={{}}\n          />\n        )}\n        <GroupHeaderTitle>{titleContent}</GroupHeaderTitle>\n      </GroupHeaderContainer>\n    </StyledCellContainer>\n  );\n};\n\nexport const RowVariantHeader: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => (\n  <RowRenderer\n    row={row}\n    itemIndex={itemIndex}\n    isDragOverlay={isDragOverlay}\n    minHeight=\"0px\"\n    height=\"24px\"\n    CustomRowContentRenderer={RowContent}\n    focusedRowId={focusedRowId}\n    drilldownRowId={drilldownRowId}\n  />\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmDjB,SAMI,KANJ;AAnDN,SAAgB,iBAAiB,SAAS,cAAc;AACxD,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB,kBAAkB,2BAA2B;AAE5E,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,yBAAyB,aAAa;AAAA,IACtD;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,SAAS,OAAuB,IAAI;AAE1C,QAAM,gBAAgB;AAAA,IACpB,MAAM,IAAI,SAAS,WAAW,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,aAAa,iBAAiB;AAAA,IACjG,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,OAAO,4BAA4B,YAAY;AACjD,aAAO,wBAAwB,IAAI,SAAS,mBAAmB,IAAI,SAAS,OAAO;AAAA,IACrF;AACA,WAAO,IAAI,SAAS;AAAA,EACtB,GAAG,CAAC,yBAAyB,GAAG,CAAC;AAEjC,kBAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,aAAa,QAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,QAAW,CAAC,cAAc,GAAG,CAAC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,iBAAe,aAAa,SAAS;AAAA,MACrC;AAAA,MACA,eAAa,YAAY;AAAA,MAEzB;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,YAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UAEpC;AAAA,6BACC;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,MAAM,IAAI,MAAM,CAAC;AAAA,gBACjB,eAAe,mBAAmB,IAAI;AAAA,gBACtC;AAAA,gBACA,gBAAgB,CAAC;AAAA;AAAA,YACnB;AAAA,YAEF,oBAAC,oBAAkB,wBAAa;AAAA;AAAA;AAAA,MAClC;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,mBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAU;AAAA,IACV,QAAO;AAAA,IACP,0BAA0B;AAAA,IAC1B;AAAA,IACA;AAAA;AACF;",
   "names": []
 }

package/dist/esm/parts/RowVariants/RowVariantPrimary.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { RowRenderer } from "../../exported-related/RowRenderer";
+import { RowRenderer } from "../../exported-related/RowRenderer/index.js";
 const RowVariantPrimary = ({
   row,
   itemIndex,

package/dist/esm/parts/RowVariants/RowVariantPrimary.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/RowVariants/RowVariantPrimary.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { RowVariantProps } from './types';\nimport { RowRenderer } from '../../exported-related/RowRenderer';\n\nexport const RowVariantPrimary: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  ctx,\n  focusedRowId,\n  drilldownRowId,\n  compact,\n}) => {\n  const {\n    layoutHelpers: { gridLayout },\n  } = ctx;\n\n  return (\n    <RowRenderer\n      row={row}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      compact={compact}\n      height={compact ? '24px' : 'auto'}\n      minHeight={compact ? '24px' : '36px'}\n      colsLayout={row.isExpanded ? undefined : gridLayout}\n      rowsLayout={row.isExpanded ? ['auto', 'auto'] : [1]}\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { RowVariantProps } from './types.js';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\n\nexport const RowVariantPrimary: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  ctx,\n  focusedRowId,\n  drilldownRowId,\n  compact,\n}) => {\n  const {\n    layoutHelpers: { gridLayout },\n  } = ctx;\n\n  return (\n    <RowRenderer\n      row={row}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      compact={compact}\n      height={compact ? '24px' : 'auto'}\n      minHeight={compact ? '24px' : '36px'}\n      colsLayout={row.isExpanded ? undefined : gridLayout}\n      rowsLayout={row.isExpanded ? ['auto', 'auto'] : [1]}\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACkBnB;AAhBJ,SAAS,mBAAmB;AAErB,MAAM,oBAA0D,CAAC;AAAA,EACtE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ,eAAe,EAAE,WAAW;AAAA,EAC9B,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,UAAU,SAAS;AAAA,MAC3B,WAAW,UAAU,SAAS;AAAA,MAC9B,YAAY,IAAI,aAAa,SAAY;AAAA,MACzC,YAAY,IAAI,aAAa,CAAC,QAAQ,MAAM,IAAI,CAAC,CAAC;AAAA,MAClD;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/RowVariants/RowVariantSecondary.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { RowRenderer } from "../../exported-related/RowRenderer";
+import { RowRenderer } from "../../exported-related/RowRenderer/index.js";
 const RowVariantSecondary = ({
   row,
   itemIndex,

package/dist/esm/parts/RowVariants/RowVariantSecondary.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/RowVariants/RowVariantSecondary.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { RowVariantProps } from './types';\nimport { RowRenderer } from '../../exported-related/RowRenderer';\n\nexport const RowVariantSecondary: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  ctx,\n  focusedRowId,\n  drilldownRowId,\n  compact,\n}) => {\n  const {\n    layoutHelpers: { gridLayout },\n  } = ctx;\n\n  return (\n    <RowRenderer\n      row={row}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      compact={compact}\n      height={compact ? '24px' : 'auto'}\n      minHeight={compact ? '24px' : '36px'}\n      colsLayout={row.isExpanded ? undefined : gridLayout}\n      rowsLayout={row.isExpanded ? ['auto', 'auto'] : [1]}\n      backgroundColor=\"#F6F7F9\"\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { RowVariantProps } from './types.js';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\n\nexport const RowVariantSecondary: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  ctx,\n  focusedRowId,\n  drilldownRowId,\n  compact,\n}) => {\n  const {\n    layoutHelpers: { gridLayout },\n  } = ctx;\n\n  return (\n    <RowRenderer\n      row={row}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      compact={compact}\n      height={compact ? '24px' : 'auto'}\n      minHeight={compact ? '24px' : '36px'}\n      colsLayout={row.isExpanded ? undefined : gridLayout}\n      rowsLayout={row.isExpanded ? ['auto', 'auto'] : [1]}\n      backgroundColor=\"#F6F7F9\"\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACkBnB;AAhBJ,SAAS,mBAAmB;AAErB,MAAM,sBAA4D,CAAC;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM;AAAA,IACJ,eAAe,EAAE,WAAW;AAAA,EAC9B,IAAI;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,UAAU,SAAS;AAAA,MAC3B,WAAW,UAAU,SAAS;AAAA,MAC9B,YAAY,IAAI,aAAa,SAAY;AAAA,MACzC,YAAY,IAAI,aAAa,CAAC,QAAQ,MAAM,IAAI,CAAC,CAAC;AAAA,MAClD,iBAAgB;AAAA,MAChB;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/RowVariants/RowVariantSkeleton.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { DSSkeleton } from "@elliemae/ds-skeleton";
-import { RowRenderer } from "../../exported-related/RowRenderer";
+import { RowRenderer } from "../../exported-related/RowRenderer/index.js";
 const RandomSkeleton = () => {
   const randomPercentage = useMemo(() => Math.floor(Math.random() * 70 + 30), []);
   return /* @__PURE__ */ jsx(DSSkeleton, { w: `${randomPercentage}%`, h: "90%" });

package/dist/esm/parts/RowVariants/RowVariantSkeleton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/RowVariants/RowVariantSkeleton.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { RowRenderer } from '../../exported-related/RowRenderer';\nimport type { RowVariantProps } from './types';\n\nconst RandomSkeleton = () => {\n  const randomPercentage = useMemo(() => Math.floor(Math.random() * 70 + 30), []);\n  return <DSSkeleton w={`${randomPercentage}%`} h=\"90%\" />;\n};\n\nexport const RowVariantSkeleton: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => {\n  const newCells = row.cells.map((cell) => ({\n    ...cell,\n    render: RandomSkeleton,\n  }));\n\n  return (\n    <RowRenderer\n      row={{ ...row, cells: newCells }}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      minHeight=\"0px\"\n      height=\"36px\"\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo } from 'react';\nimport { DSSkeleton } from '@elliemae/ds-skeleton';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport type { RowVariantProps } from './types.js';\n\nconst RandomSkeleton = () => {\n  const randomPercentage = useMemo(() => Math.floor(Math.random() * 70 + 30), []);\n  return <DSSkeleton w={`${randomPercentage}%`} h=\"90%\" />;\n};\n\nexport const RowVariantSkeleton: React.ComponentType<RowVariantProps> = ({\n  row,\n  itemIndex,\n  isDragOverlay,\n  focusedRowId,\n  drilldownRowId,\n}) => {\n  const newCells = row.cells.map((cell) => ({\n    ...cell,\n    render: RandomSkeleton,\n  }));\n\n  return (\n    <RowRenderer\n      row={{ ...row, cells: newCells }}\n      itemIndex={itemIndex}\n      isDragOverlay={isDragOverlay}\n      minHeight=\"0px\"\n      height=\"36px\"\n      focusedRowId={focusedRowId}\n      drilldownRowId={drilldownRowId}\n    />\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACOd;AAPT,SAAgB,eAAe;AAC/B,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAG5B,MAAM,iBAAiB,MAAM;AAC3B,QAAM,mBAAmB,QAAQ,MAAM,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,EAAE,GAAG,CAAC,CAAC;AAC9E,SAAO,oBAAC,cAAW,GAAG,GAAG,qBAAqB,GAAE,OAAM;AACxD;AAEO,MAAM,qBAA2D,CAAC;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,WAAW,IAAI,MAAM,IAAI,CAAC,UAAU;AAAA,IACxC,GAAG;AAAA,IACH,QAAQ;AAAA,EACV,EAAE;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK,EAAE,GAAG,KAAK,OAAO,SAAS;AAAA,MAC/B;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,QAAO;AAAA,MACP;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/RowVariants/index.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { ROW_VARIANTS } from "../../exported-related";
-import { Cells } from "../Cells";
-import { RowVariantHeader } from "./RowVariantHeader";
-import { RowVariantPrimary } from "./RowVariantPrimary";
-import { RowVariantSecondary } from "./RowVariantSecondary";
-import { RowVariantSkeleton } from "./RowVariantSkeleton";
+import { ROW_VARIANTS } from "../../exported-related/index.js";
+import { Cells } from "../Cells/index.js";
+import { RowVariantHeader } from "./RowVariantHeader.js";
+import { RowVariantPrimary } from "./RowVariantPrimary.js";
+import { RowVariantSecondary } from "./RowVariantSecondary.js";
+import { RowVariantSkeleton } from "./RowVariantSkeleton.js";
 const RowVariantMapper = {
   [ROW_VARIANTS.HEADER_GROUP]: RowVariantHeader,
   [ROW_VARIANTS.PRIMARY]: RowVariantPrimary,

package/dist/esm/parts/RowVariants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/RowVariants/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ROW_VARIANTS } from '../../exported-related';\nimport type { TypescriptContext, TypescriptRow } from '../../types/props';\nimport { Cells } from '../Cells';\nimport { RowVariantHeader } from './RowVariantHeader';\nimport { RowVariantPrimary } from './RowVariantPrimary';\nimport { RowVariantSecondary } from './RowVariantSecondary';\nimport { RowVariantSkeleton } from './RowVariantSkeleton';\nimport type { RowVariantProps } from './types';\n\nconst RowVariantMapper: Record<string, React.ComponentType<RowVariantProps>> = {\n  [ROW_VARIANTS.HEADER_GROUP]: RowVariantHeader,\n  [ROW_VARIANTS.PRIMARY]: RowVariantPrimary,\n  [ROW_VARIANTS.SECONDARY]: RowVariantSecondary,\n  [ROW_VARIANTS.COMPACT_PRIMARY]: (props) => <RowVariantPrimary compact {...props} />,\n  [ROW_VARIANTS.COMPACT_SECONDARY]: (props) => <RowVariantSecondary compact {...props} />,\n  [ROW_VARIANTS.SKELETON]: RowVariantSkeleton,\n};\n\ninterface RowVariantMapItemProps {\n  row: TypescriptRow;\n  itemIndex: number;\n  isDragOverlay: boolean;\n  ctx: TypescriptContext;\n  focusedRowId: string | null;\n  drilldownRowId: string | null;\n}\n\nexport const RowVariantMapItem: React.ComponentType<RowVariantMapItemProps> = (props) => {\n  const {\n    row,\n    ctx: {\n      tableProps: { getRowVariant },\n    },\n  } = props;\n\n  const variant = getRowVariant(row, Cells);\n\n  let Component: React.ComponentType<any>;\n\n  if (typeof variant === 'string') {\n    if (!(variant in RowVariantMapper)) {\n      throw new Error(`${variant} is not an out-of-the-box row variant`);\n    }\n    Component = RowVariantMapper[variant];\n  } else {\n    Component = variant;\n  }\n\n  return <Component {...props} />;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACcsB;AAb7C,SAAS,oBAAoB;AAE7B,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAGnC,MAAM,mBAAyE;AAAA,EAC7E,CAAC,aAAa,eAAe;AAAA,EAC7B,CAAC,aAAa,UAAU;AAAA,EACxB,CAAC,aAAa,YAAY;AAAA,EAC1B,CAAC,aAAa,kBAAkB,CAAC,UAAU,oBAAC,qBAAkB,SAAO,MAAE,GAAG,OAAO;AAAA,EACjF,CAAC,aAAa,oBAAoB,CAAC,UAAU,oBAAC,uBAAoB,SAAO,MAAE,GAAG,OAAO;AAAA,EACrF,CAAC,aAAa,WAAW;AAC3B;AAWO,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,cAAc;AAAA,IAC9B;AAAA,EACF,IAAI;AAEJ,QAAM,UAAU,cAAc,KAAK,KAAK;AAExC,MAAI;AAEJ,MAAI,OAAO,YAAY,UAAU;AAC/B,QAAI,EAAE,WAAW,mBAAmB;AAClC,YAAM,IAAI,MAAM,GAAG,8CAA8C;AAAA,IACnE;AACA,gBAAY,iBAAiB;AAAA,EAC/B,OAAO;AACL,gBAAY;AAAA,EACd;AAEA,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { ROW_VARIANTS } from '../../exported-related/index.js';\nimport type { TypescriptContext, TypescriptRow } from '../../types/props.js';\nimport { Cells } from '../Cells/index.js';\nimport { RowVariantHeader } from './RowVariantHeader.js';\nimport { RowVariantPrimary } from './RowVariantPrimary.js';\nimport { RowVariantSecondary } from './RowVariantSecondary.js';\nimport { RowVariantSkeleton } from './RowVariantSkeleton.js';\nimport type { RowVariantProps } from './types.js';\n\nconst RowVariantMapper: Record<string, React.ComponentType<RowVariantProps>> = {\n  [ROW_VARIANTS.HEADER_GROUP]: RowVariantHeader,\n  [ROW_VARIANTS.PRIMARY]: RowVariantPrimary,\n  [ROW_VARIANTS.SECONDARY]: RowVariantSecondary,\n  [ROW_VARIANTS.COMPACT_PRIMARY]: (props) => <RowVariantPrimary compact {...props} />,\n  [ROW_VARIANTS.COMPACT_SECONDARY]: (props) => <RowVariantSecondary compact {...props} />,\n  [ROW_VARIANTS.SKELETON]: RowVariantSkeleton,\n};\n\ninterface RowVariantMapItemProps {\n  row: TypescriptRow;\n  itemIndex: number;\n  isDragOverlay: boolean;\n  ctx: TypescriptContext;\n  focusedRowId: string | null;\n  drilldownRowId: string | null;\n}\n\nexport const RowVariantMapItem: React.ComponentType<RowVariantMapItemProps> = (props) => {\n  const {\n    row,\n    ctx: {\n      tableProps: { getRowVariant },\n    },\n  } = props;\n\n  const variant = getRowVariant(row, Cells);\n\n  let Component: React.ComponentType<any>;\n\n  if (typeof variant === 'string') {\n    if (!(variant in RowVariantMapper)) {\n      throw new Error(`${variant} is not an out-of-the-box row variant`);\n    }\n    Component = RowVariantMapper[variant];\n  } else {\n    Component = variant;\n  }\n\n  return <Component {...props} />;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcsB;AAb7C,SAAS,oBAAoB;AAE7B,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAGnC,MAAM,mBAAyE;AAAA,EAC7E,CAAC,aAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,aAAa,OAAO,GAAG;AAAA,EACxB,CAAC,aAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,aAAa,eAAe,GAAG,CAAC,UAAU,oBAAC,qBAAkB,SAAO,MAAE,GAAG,OAAO;AAAA,EACjF,CAAC,aAAa,iBAAiB,GAAG,CAAC,UAAU,oBAAC,uBAAoB,SAAO,MAAE,GAAG,OAAO;AAAA,EACrF,CAAC,aAAa,QAAQ,GAAG;AAC3B;AAWO,MAAM,oBAAiE,CAAC,UAAU;AACvF,QAAM;AAAA,IACJ;AAAA,IACA,KAAK;AAAA,MACH,YAAY,EAAE,cAAc;AAAA,IAC9B;AAAA,EACF,IAAI;AAEJ,QAAM,UAAU,cAAc,KAAK,KAAK;AAExC,MAAI;AAEJ,MAAI,OAAO,YAAY,UAAU;AAC/B,QAAI,EAAE,WAAW,mBAAmB;AAClC,YAAM,IAAI,MAAM,GAAG,8CAA8C;AAAA,IACnE;AACA,gBAAY,iBAAiB,OAAO;AAAA,EACtC,OAAO;AACL,gBAAY;AAAA,EACd;AAEA,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/esm/parts/Rows.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { useContext } from "react";
-import { RowWithContext as Row } from "./Row";
-import { DataTableContext } from "../DataTableContext";
-import { withConditionalDnDRowContext } from "./HoC/withConditionalDnDRowContext";
-import { DnDTreeContext } from "./HoC/DnDTreeContext";
-import { addCellData } from "../helpers";
+import { RowWithContext as Row } from "./Row.js";
+import { DataTableContext } from "../DataTableContext.js";
+import { withConditionalDnDRowContext } from "./HoC/withConditionalDnDRowContext.js";
+import { DnDTreeContext } from "./HoC/DnDTreeContext.js";
+import { addCellData } from "../helpers/index.js";
 const Rows = () => {
   const {
     virtualListHelpers: { virtualItems },
@@ -32,6 +32,7 @@ const Rows = () => {
       row,
       measureRef,
       index,
+      // this is consumed by the DnD HOC
       itemIndex: index,
       itemWrapperStyle: style
     };

package/dist/esm/parts/Rows.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Rows.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\nimport { RowWithContext as Row } from './Row';\nimport { DataTableContext } from '../DataTableContext';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext';\nimport { DnDTreeContext } from './HoC/DnDTreeContext';\nimport { addCellData } from '../helpers';\n\nconst Rows = (): JSX.Element => {\n  const {\n    virtualListHelpers: { virtualItems },\n    flattenedData,\n    visibleColumns,\n    layoutHelpers: { totalColumnsWidth },\n  } = useContext(DataTableContext);\n\n  const ctx = useContext(DnDTreeContext);\n\n  const items = ctx?.visibleItems || flattenedData;\n\n  return (\n    <>\n      {virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = items[index];\n        if (!row) return null;\n        addCellData(row, visibleColumns);\n        const style = {\n          position: 'absolute',\n          top: `${start}px`,\n          left: 0,\n          width: totalColumnsWidth,\n        };\n        const rowProps = {\n          key: `ds-table-row-${row.uid}`,\n          row,\n          measureRef,\n          index, // this is consumed by the DnD HOC\n          itemIndex: index,\n          itemWrapperStyle: style,\n        };\n        return <Row {...rowProps} />;\n      })}\n    </>\n  );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBnB,mBAoBW,WApBX;AApBJ,SAAgB,kBAA2B;AAC3C,SAAS,kBAAkB,WAAW;AACtC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC;AAAA,IACA;AAAA,IACA,eAAe,EAAE,kBAAkB;AAAA,EACrC,IAAI,WAAW,gBAAgB;AAE/B,QAAM,MAAM,WAAW,cAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,gCACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM;AAClB,QAAI,CAAC;AAAK,aAAO;AACjB,gBAAY,KAAK,cAAc;AAC/B,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf,KAAK,gBAAgB,IAAI;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,IACpB;AACA,WAAO,oBAAC,OAAK,GAAG,UAAU;AAAA,EAC5B,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,kBAAkB,6BAA6B,IAAI;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\nimport React, { useContext, useMemo } from 'react';\nimport { RowWithContext as Row } from './Row.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext.js';\nimport { DnDTreeContext } from './HoC/DnDTreeContext.js';\nimport { addCellData } from '../helpers/index.js';\n\nconst Rows = (): JSX.Element => {\n  const {\n    virtualListHelpers: { virtualItems },\n    flattenedData,\n    visibleColumns,\n    layoutHelpers: { totalColumnsWidth },\n  } = useContext(DataTableContext);\n\n  const ctx = useContext(DnDTreeContext);\n\n  const items = ctx?.visibleItems || flattenedData;\n\n  return (\n    <>\n      {virtualItems.map((virtualItem) => {\n        const { index, measureRef, start } = virtualItem;\n        const row = items[index];\n        if (!row) return null;\n        addCellData(row, visibleColumns);\n        const style = {\n          position: 'absolute',\n          top: `${start}px`,\n          left: 0,\n          width: totalColumnsWidth,\n        };\n        const rowProps = {\n          key: `ds-table-row-${row.uid}`,\n          row,\n          measureRef,\n          index, // this is consumed by the DnD HOC\n          itemIndex: index,\n          itemWrapperStyle: style,\n        };\n        return <Row {...rowProps} />;\n      })}\n    </>\n  );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBnB,mBAoBW,WApBX;AApBJ,SAAgB,kBAA2B;AAC3C,SAAS,kBAAkB,WAAW;AACtC,SAAS,wBAAwB;AACjC,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAE5B,MAAM,OAAO,MAAmB;AAC9B,QAAM;AAAA,IACJ,oBAAoB,EAAE,aAAa;AAAA,IACnC;AAAA,IACA;AAAA,IACA,eAAe,EAAE,kBAAkB;AAAA,EACrC,IAAI,WAAW,gBAAgB;AAE/B,QAAM,MAAM,WAAW,cAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,gCACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM,KAAK;AACvB,QAAI,CAAC;AAAK,aAAO;AACjB,gBAAY,KAAK,cAAc;AAC/B,UAAM,QAAQ;AAAA,MACZ,UAAU;AAAA,MACV,KAAK,GAAG;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf,KAAK,gBAAgB,IAAI;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,IACpB;AACA,WAAO,oBAAC,OAAK,GAAG,UAAU;AAAA,EAC5B,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,kBAAkB,6BAA6B,IAAI;",
   "names": []
 }

package/dist/esm/parts/SortableHeaderCell.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
-import { withConditionalDnDSortableContext } from "./HoC/withConditionalDnDSortableContext";
-import { sizeToCss } from "../helpers";
+import { withConditionalDnDSortableContext } from "./HoC/withConditionalDnDSortableContext.js";
+import { sizeToCss } from "../helpers/index.js";
 const SortableHeaderCell = ({
   items,
   isDragOverlay = false,

package/dist/esm/parts/SortableHeaderCell.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/SortableHeaderCell.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport type { TypescriptColumn } from '../types/props';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext';\nimport { sizeToCss } from '../helpers';\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  isGroup = false,\n  ...rest\n}: {\n  items: TypescriptColumn[];\n  isDragOverlay?: boolean;\n  isGroup?: boolean;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element =>\n  withConditionalDnDSortableContext(items, isDragOverlay)(Grid)({\n    ...rest,\n    cols: isGroup ? items.map((col) => sizeToCss(col.width ?? 150)) : undefined,\n    style: isGroup\n      ? {\n          gridAutoFlow: 'column',\n        }\n      : { display: 'flex' },\n  });\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AAErB,SAAS,yCAAyC;AAClD,SAAS,iBAAiB;AAEnB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,KACP;AACL,MAME,kCAAkC,OAAO,aAAa,EAAE,IAAI,EAAE;AAAA,EAC5D,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,IAAI,CAAC,QAAQ,UAAU,IAAI,SAAS,GAAG,CAAC,IAAI;AAAA,EAClE,OAAO,UACH;AAAA,IACE,cAAc;AAAA,EAChB,IACA,EAAE,SAAS,OAAO;AACxB,CAAC;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport type { TypescriptColumn } from '../types/props.js';\nimport { withConditionalDnDSortableContext } from './HoC/withConditionalDnDSortableContext.js';\nimport { sizeToCss } from '../helpers/index.js';\n\nexport const SortableHeaderCell = ({\n  items,\n  isDragOverlay = false,\n  isGroup = false,\n  ...rest\n}: {\n  items: TypescriptColumn[];\n  isDragOverlay?: boolean;\n  isGroup?: boolean;\n  children: JSX.Element | JSX.Element[];\n}): JSX.Element =>\n  withConditionalDnDSortableContext(items, isDragOverlay)(Grid)({\n    ...rest,\n    cols: isGroup ? items.map((col) => sizeToCss(col.width ?? 150)) : undefined,\n    style: isGroup\n      ? {\n          gridAutoFlow: 'column',\n        }\n      : { display: 'flex' },\n  });\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AAErB,SAAS,yCAAyC;AAClD,SAAS,iBAAiB;AAEnB,MAAM,qBAAqB,CAAC;AAAA,EACjC;AAAA,EACA,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,GAAG;AACL,MAME,kCAAkC,OAAO,aAAa,EAAE,IAAI,EAAE;AAAA,EAC5D,GAAG;AAAA,EACH,MAAM,UAAU,MAAM,IAAI,CAAC,QAAQ,UAAU,IAAI,SAAS,GAAG,CAAC,IAAI;AAAA,EAClE,OAAO,UACH;AAAA,IACE,cAAc;AAAA,EAChB,IACA,EAAE,SAAS,OAAO;AACxB,CAAC;",
   "names": []
 }

package/dist/esm/parts/TableContent.js

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useCallback } from "react";
-import { StyledTableWrapper, StyledDataTableContentWrapper } from "../styled";
-import { DataTableContext } from "../DataTableContext";
-import { Pagination } from "../addons/Pagination";
-import { VirtualRowsList } from "./VirtualRowsList";
-import { DATA_TESTID } from "../configs/constants";
+import { StyledTableWrapper, StyledDataTableContentWrapper } from "../styled.js";
+import { DataTableContext } from "../DataTableContext.js";
+import { Pagination } from "../addons/Pagination/index.js";
+import { VirtualRowsList } from "./VirtualRowsList.js";
+import { DATA_TESTID } from "../configs/constants.js";
 const TableContent = () => {
   const {
     allDataFlattened,

package/dist/esm/parts/TableContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/TableContent.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled';\nimport { DataTableContext } from '../DataTableContext';\nimport { Pagination } from '../addons/Pagination';\nimport { VirtualRowsList } from './VirtualRowsList';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const TableContent = () => {\n  const {\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n    paginationHelpers: { hasPagination },\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  return (\n    <StyledDataTableContentWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n      noSelectionAllowed={isShiftPressed}\n      onKeyDown={handleOnKeyDown}\n      onKeyUp={handleOnKeyUp}\n      rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n      cols={['100%']}\n    >\n      <StyledTableWrapper\n        role=\"table\"\n        aria-rowcount={allDataFlattened.length}\n        aria-colcount={visibleColumns.length}\n        data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n      >\n        <VirtualRowsList />\n      </StyledTableWrapper>\n      {hasPagination ? <Pagination /> : null}\n    </StyledDataTableContentWrapper>\n  );\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useCallback } from 'react';\nimport { StyledTableWrapper, StyledDataTableContentWrapper } from '../styled.js';\nimport { DataTableContext } from '../DataTableContext.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\n\nexport const TableContent = () => {\n  const {\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\n    paginationHelpers: { hasPagination },\n  } = useContext(DataTableContext);\n\n  const handleOnKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      setIsShiftPressed(e.shiftKey);\n    },\n    [setIsShiftPressed],\n  );\n\n  const handleOnKeyUp = useCallback(() => setIsShiftPressed(false), [setIsShiftPressed]);\n\n  return (\n    <StyledDataTableContentWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER}\n      noSelectionAllowed={isShiftPressed}\n      onKeyDown={handleOnKeyDown}\n      onKeyUp={handleOnKeyUp}\n      rows={hasPagination ? ['1fr', 'auto'] : ['auto']}\n      cols={['100%']}\n    >\n      <StyledTableWrapper\n        role=\"table\"\n        aria-rowcount={allDataFlattened.length}\n        aria-colcount={visibleColumns.length}\n        data-testid={DATA_TESTID.DATA_TABLE_TABLE}\n      >\n        <VirtualRowsList />\n      </StyledTableWrapper>\n      {hasPagination ? <Pagination /> : null}\n    </StyledDataTableContentWrapper>\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;AC0BnB,SAcI,KAdJ;AA1BJ,SAAgB,YAAY,mBAAmB;AAC/C,SAAS,oBAAoB,qCAAqC;AAClE,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,EAAE,cAAc;AAAA,EACrC,IAAI,WAAW,gBAAgB;AAE/B,QAAM,kBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,gBAAgB,YAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,YAAY;AAAA,MACzB,oBAAoB;AAAA,MACpB,WAAW;AAAA,MACX,SAAS;AAAA,MACT,MAAM,gBAAgB,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC/C,MAAM,CAAC,MAAM;AAAA,MAEb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,YAAY;AAAA,YAEzB,8BAAC,mBAAgB;AAAA;AAAA,QACnB;AAAA,QACC,gBAAgB,oBAAC,cAAW,IAAK;AAAA;AAAA;AAAA,EACpC;AAEJ;",
   "names": []
 }

package/dist/esm/parts/VirtualRowsList.js

@@ -1,13 +1,13 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext, useMemo, useCallback } from "react";
-import { EmptyContent } from "./EmptyContent";
-import { RowsWithContext as Rows } from "./Rows";
-import { Headers } from "./Headers";
-import { DataTableContext } from "../DataTableContext";
-import { StyledVirtualListWrapper, StyledTableContentWrapper } from "../styled";
-import { MemoizedLoader as Loader } from "./Loader";
-import { DATA_TESTID } from "../configs/constants";
+import { EmptyContent } from "./EmptyContent.js";
+import { RowsWithContext as Rows } from "./Rows.js";
+import { Headers } from "./Headers/index.js";
+import { DataTableContext } from "../DataTableContext.js";
+import { StyledVirtualListWrapper, StyledTableContentWrapper } from "../styled.js";
+import { MemoizedLoader as Loader } from "./Loader.js";
+import { DATA_TESTID } from "../configs/constants.js";
 const VirtualRowsList = () => {
   const {
     virtualListRef,
@@ -42,7 +42,8 @@ const VirtualRowsList = () => {
       "data-testid": DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER,
       onKeyDown,
       tabIndex: -1,
-      children: /* @__PURE__ */ jsxs(StyledTableContentWrapper, { role: "rowgroup", height: tableContentWrapperHeight, rows: ["min-content", "auto"], children: [
+      role: "rowgroup",
+      children: /* @__PURE__ */ jsxs(StyledTableContentWrapper, { height: tableContentWrapperHeight, rows: ["min-content", "auto"], children: [
         /* @__PURE__ */ jsx(Headers, {}),
         isEmptyContent && /* @__PURE__ */ jsx(EmptyContent, { width: totalColumnsWidth }),
         isLoading ? /* @__PURE__ */ jsx(Loader, {}) : null,

package/dist/esm/parts/VirtualRowsList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/VirtualRowsList.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { EmptyContent } from './EmptyContent'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled';\nimport { MemoizedLoader as Loader } from './Loader';\nimport { DATA_TESTID } from '../configs/constants';\n\nexport const VirtualRowsList = () => {\n  const {\n    virtualListRef,\n    tableProps: { isLoading },\n    virtualListHelpers,\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    setFocusedRowId,\n  } = useContext(DataTableContext);\n  const { totalSize, scrollToIndex } = virtualListHelpers;\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  const tableContentWrapperHeight = useMemo(\n    () => (isEmptyContent || isLoading ? '100%' : totalSize),\n    [isEmptyContent, isLoading, totalSize],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      ref={virtualListRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n    >\n      <StyledTableContentWrapper role=\"rowgroup\" height={tableContentWrapperHeight} rows={['min-content', 'auto']}>\n        <Headers />\n        {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+CjB,SACE,KADF;AA/CN,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB,YAAY;AACxC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,0BAA0B,iCAAiC;AACpE,SAAS,kBAAkB,cAAc;AACzC,SAAS,mBAAmB;AAErB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE,UAAU;AAAA,IACxB;AAAA,IACA,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM,EAAE,WAAW,cAAc,IAAI;AAErC,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,YAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,GAAG,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,GAAG,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,4BAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa,YAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MAEV,+BAAC,6BAA0B,MAAK,YAAW,QAAQ,2BAA2B,MAAM,CAAC,eAAe,MAAM,GACxG;AAAA,4BAAC,WAAQ;AAAA,QACR,kBAAkB,oBAAC,gBAAa,OAAO,mBAAmB;AAAA,QAC1D,YAAY,oBAAC,UAAO,IAAK;AAAA,QACzB,CAAC,aAAa,CAAC,kBAAkB,oBAAC,QAAK;AAAA,SAC1C;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo, useCallback } from 'react';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { DataTableContext } from '../DataTableContext.js';\nimport { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled.js';\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { DATA_TESTID } from '../configs/constants.js';\n\nexport const VirtualRowsList = () => {\n  const {\n    virtualListRef,\n    tableProps: { isLoading },\n    virtualListHelpers,\n    layoutHelpers: { totalColumnsWidth },\n    flattenedData,\n    setFocusedRowId,\n  } = useContext(DataTableContext);\n  const { totalSize, scrollToIndex } = virtualListHelpers;\n\n  const isEmptyContent = useMemo(() => !isLoading && flattenedData.length === 0, [isLoading, flattenedData.length]);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.ctrlKey && e.code === 'End') {\n        scrollToIndex(flattenedData.length - 1);\n        setFocusedRowId(flattenedData[flattenedData.length - 1].uid);\n      } else if (e.ctrlKey && e.code === 'Home') {\n        scrollToIndex(0, { align: 'center' });\n        setFocusedRowId(flattenedData[0].uid);\n      }\n    },\n    [scrollToIndex, setFocusedRowId, flattenedData],\n  );\n\n  const tableContentWrapperHeight = useMemo(\n    () => (isEmptyContent || isLoading ? '100%' : totalSize),\n    [isEmptyContent, isLoading, totalSize],\n  );\n\n  return (\n    <StyledVirtualListWrapper\n      ref={virtualListRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n      role=\"rowgroup\"\n    >\n      <StyledTableContentWrapper height={tableContentWrapperHeight} rows={['min-content', 'auto']}>\n        <Headers />\n        {isEmptyContent && <EmptyContent width={totalColumnsWidth} />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDjB,SACE,KADF;AAhDN,SAAgB,YAAY,SAAS,mBAAmB;AACxD,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB,YAAY;AACxC,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,0BAA0B,iCAAiC;AACpE,SAAS,kBAAkB,cAAc;AACzC,SAAS,mBAAmB;AAErB,MAAM,kBAAkB,MAAM;AACnC,QAAM;AAAA,IACJ;AAAA,IACA,YAAY,EAAE,UAAU;AAAA,IACxB;AAAA,IACA,eAAe,EAAE,kBAAkB;AAAA,IACnC;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM,EAAE,WAAW,cAAc,IAAI;AAErC,QAAM,iBAAiB,QAAQ,MAAM,CAAC,aAAa,cAAc,WAAW,GAAG,CAAC,WAAW,cAAc,MAAM,CAAC;AAEhH,QAAM,YAAY;AAAA,IAChB,CAAC,MAA2B;AAC1B,UAAI,EAAE,WAAW,EAAE,SAAS,OAAO;AACjC,sBAAc,cAAc,SAAS,CAAC;AACtC,wBAAgB,cAAc,cAAc,SAAS,CAAC,EAAE,GAAG;AAAA,MAC7D,WAAW,EAAE,WAAW,EAAE,SAAS,QAAQ;AACzC,sBAAc,GAAG,EAAE,OAAO,SAAS,CAAC;AACpC,wBAAgB,cAAc,CAAC,EAAE,GAAG;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,eAAe,iBAAiB,aAAa;AAAA,EAChD;AAEA,QAAM,4BAA4B;AAAA,IAChC,MAAO,kBAAkB,YAAY,SAAS;AAAA,IAC9C,CAAC,gBAAgB,WAAW,SAAS;AAAA,EACvC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,eAAa,YAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MAEL,+BAAC,6BAA0B,QAAQ,2BAA2B,MAAM,CAAC,eAAe,MAAM,GACxF;AAAA,4BAAC,WAAQ;AAAA,QACR,kBAAkB,oBAAC,gBAAa,OAAO,mBAAmB;AAAA,QAC1D,YAAY,oBAAC,UAAO,IAAK;AAAA,QACzB,CAAC,aAAa,CAAC,kBAAkB,oBAAC,QAAK;AAAA,SAC1C;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/esm/parts/internal.js

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { withDnDSortableColumnContext } from "./HoC/withDnDSortableColumnContext";
-import { HeaderCellGroup } from "./Headers/HeaderCellGroup";
+import { withDnDSortableColumnContext } from "./HoC/withDnDSortableColumnContext.js";
+import { HeaderCellGroup } from "./Headers/HeaderCellGroup.js";
 export {
   HeaderCellGroup,
   withDnDSortableColumnContext

package/dist/esm/parts/internal.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/internal.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { withDnDSortableColumnContext } from './HoC/withDnDSortableColumnContext';\nexport { HeaderCellGroup } from './Headers/HeaderCellGroup';\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { withDnDSortableColumnContext } from './HoC/withDnDSortableColumnContext.js';\nexport { HeaderCellGroup } from './Headers/HeaderCellGroup.js';\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oCAAoC;AAC7C,SAAS,uBAAuB;",
   "names": []
 }

package/dist/esm/styled.js

@@ -2,9 +2,9 @@ import * as React from "react";
 import { styled } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { EditPencil } from "@elliemae/ds-icons";
-import { sizeToCss, cellPadding, columnPadding } from "./helpers";
-import { ZIndexDataTable } from "./configs/zIndexInternalConfig";
-import { ColsLayoutStyle } from "./configs/constants";
+import { sizeToCss, cellPadding, columnPadding } from "./helpers/index.js";
+import { ZIndexDataTable } from "./configs/zIndexInternalConfig.js";
+import { ColsLayoutStyle } from "./configs/constants.js";
 const styledFocusCss = ({ theme }, color) => `
 &:after {
   display: block;