@elliemae/ds-data-table 3.15.0 → 3.16.0-next.10

package/dist/esm/parts/TableContent.js

@@ -1,18 +1,18 @@
 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 {
-    tableProps: { pagination },
     allDataFlattened,
     visibleColumns,
     isShiftPressed,
-    setIsShiftPressed
+    setIsShiftPressed,
+    paginationHelpers: { hasPagination }
   } = useContext(DataTableContext);
   const handleOnKeyDown = useCallback(
     (e) => {
@@ -28,7 +28,7 @@ const TableContent = () => {
       noSelectionAllowed: isShiftPressed,
       onKeyDown: handleOnKeyDown,
       onKeyUp: handleOnKeyUp,
-      rows: pagination ? ["1fr", "auto"] : ["auto"],
+      rows: hasPagination ? ["1fr", "auto"] : ["auto"],
       cols: ["100%"],
       children: [
         /* @__PURE__ */ jsx(
@@ -41,7 +41,7 @@ const TableContent = () => {
             children: /* @__PURE__ */ jsx(VirtualRowsList, {})
           }
         ),
-        pagination ? /* @__PURE__ */ jsx(Pagination, {}) : null
+        hasPagination ? /* @__PURE__ */ jsx(Pagination, {}) : null
       ]
     }
   );

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';\n\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    tableProps: { pagination },\n    allDataFlattened,\n    visibleColumns,\n    isShiftPressed,\n    setIsShiftPressed,\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={pagination ? ['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      {pagination ? <Pagination /> : null}\n    </StyledDataTableContentWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2BnB,SAcI,KAdJ;AA3BJ,SAAgB,YAAY,mBAAmB;AAE/C,SAAS,oBAAoB,qCAAqC;AAClE,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAErB,MAAM,eAAe,MAAM;AAChC,QAAM;AAAA,IACJ,YAAY,EAAE,WAAW;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,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,aAAa,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM;AAAA,MAC5C,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,aAAa,oBAAC,cAAW,IAAK;AAAA;AAAA;AAAA,EACjC;AAEJ;",
+  "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,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,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;

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 '@elliemae/ds-system';\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 }, color?: string) => `\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 ${color ?? 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  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\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%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\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(Grid)<{\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)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\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  grid-auto-flow: column;\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: transparent;\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  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`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\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)<{ backgroundColor?: string }>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 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, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\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  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers/index.js';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig.js';\nimport { ColsLayoutStyle } from './configs/constants.js';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }, color?: string) => `\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 ${color ?? 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  svg {\n    fill: ${(props) => props.theme.colors.brand['800']};\n  }\n`;\n\nexport const StyledDataTableWrapper = styled(Grid)<WidthAndHeight>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n`;\n\nexport const StyledDataTableContentWrapper = styled(Grid)<{ noSelectionAllowed: boolean }>`\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n  width: 100%;\n`;\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%;\n  height: 100%;\n`;\nexport const StyledTableContentWrapper = styled(Grid)<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\n\nexport const StyledVirtualListWrapper = styled(Grid)`\n  overflow: auto;\n  height: 100%;\n  width: 100%;\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(Grid)<{\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)<{ isExpandable: boolean; colsLayoutStyle: ColsLayoutStyle }>`\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  grid-auto-flow: column;\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: transparent;\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  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`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ paddingLeft: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding-left: ${(props) => props.paddingLeft};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\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)<{ backgroundColor?: string }>`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: 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, isDropValid, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme }, isDropValid ? theme.colors.brand[700] : theme.colors.danger[900]);\n  }}\n\n  ${({ shouldDisplayHover, theme, isDisabled }) =>\n    shouldDisplayHover && !isDisabled\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  ${GroupHeaderTitle} {\n    color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.neutral['700'])};\n  }\n  color: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : '#333333')};\n\n  svg {\n    fill: ${(props) => (props.isDisabled ? props.theme.colors.neutral['200'] : props.theme.colors.brand['800'])};\n  }\n`;\n"],
   "mappings": "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",
   "names": []
 }

package/dist/esm/types/props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/types/props.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { MutableRefObject } from 'react';\nimport type React from 'react';\nimport type { useVirtual } from 'react-virtual/types';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { CSSProperties } from 'styled-components';\nimport type { ColsLayoutStyle } from '../configs/constants';\n\nexport type TypescriptGenericFunc = (...args: unknown[]) => unknown;\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\ninterface HeaderComponentProps {\n  ctx: TypescriptContext;\n}\n\nexport type DraggablePropsT =\n  | false\n  | (ReturnType<typeof useSortable> & {\n      dropIndicatorPosition: DropIndicatorPosition;\n      shouldShowDropIndicatorPosition: boolean;\n      isDropValid: boolean;\n    });\n\ninterface CellComponentProps<T = HTMLElement> {\n  ctx: TypescriptContext;\n  isRowSelected: boolean;\n  row: InternalTypescriptRow;\n  cell: TypescriptCell<T>;\n  draggableProps: DraggablePropsT;\n  isDragOverlay: boolean;\n}\n\nexport enum DropIndicatorPosition {\n  None = 0,\n  Before = 1,\n  After = 2,\n  Inside = 3,\n}\n\nexport interface TypescriptColumn<T extends HTMLElement = HTMLElement> {\n  id?: string;\n  Header: string | React.ComponentType<HeaderComponentProps>;\n  accessor?: string;\n  filter?: string;\n  filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n  filterMinWidth?: number | string;\n  Filter?: React.ComponentType<FilterProps>;\n  Cell?: React.ComponentType<CellComponentProps<T>>;\n  editable?: string | TypescriptGenericFunc;\n  disableDnD?: boolean;\n  width?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  padding?: number;\n  columns?: TypescriptColumn[];\n  canSort?: boolean;\n  isSortedDesc?: boolean;\n  canResize?: boolean;\n  isFocuseable?: boolean;\n  textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n  ref?: React.MutableRefObject<HTMLTableColElement>;\n  required?: boolean;\n  cellStyle?: CSSProperties;\n  alwaysDisplayEditIcon?: boolean;\n}\n\nexport interface InternalTypescriptColumn<T extends HTMLElement = HTMLElement> extends TypescriptColumn<T> {\n  id: string;\n  parentId: string | null;\n  depth: number;\n  columns?: InternalTypescriptColumn[];\n}\n\nexport interface TypescriptCell<T = HTMLElement> {\n  column: TypescriptColumn;\n  value: any;\n  render: React.ComponentType<CellComponentProps>;\n  row: InternalTypescriptRow;\n  ref: React.RefObject<T>;\n  id: string;\n}\n\nexport interface TypescriptRow {\n  [key: string]: any;\n  subRows?: TypescriptRow[];\n  tableRowDetails?: React.ComponentType<any>;\n  dimsumHeaderValue?: string;\n}\n\nexport interface InternalTypescriptRow {\n  id: string;\n  uid: string;\n  index: number;\n  realIndex: number;\n  parent: InternalTypescriptRow | null;\n  parentId: string | null;\n  parentIndex: number | null;\n  depth: number;\n  isExpanded: boolean;\n  subRows: TypescriptRow[];\n  childrenCount: number;\n  original: TypescriptRow;\n  cells: TypescriptCell[];\n}\n\nexport type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\nexport type TypescriptRenderRowActionsConfig = {\n  columnWidth: number;\n  renderer: (...args: any[]) => JSX.Element;\n};\n\nexport type TypescriptRenderRowActions = false | TypescriptRenderRowActionsConfig;\n\nexport type TypescriptAppliedFilter = {\n  id: string;\n  type: string;\n  value: any;\n};\n\nexport type TypescriptPagination = {\n  page?: any[];\n  pageIndex?: number;\n  canPreviousPage?: boolean;\n  canNextPage?: boolean;\n  pageSize?: number;\n  dataIsPage?: boolean;\n  showPerPageSelector?: boolean;\n  perPageOptions?: number[];\n  perPageStep?: number;\n  minPerPage?: number;\n  maxPerPage?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  onPreviousPage?: () => void;\n  onNextPage?: () => void;\n  onPageChange?: (page: number) => void;\n  pageCount?: number | string;\n  isLoadingPageCount?: boolean;\n  pageDetails?: string[];\n  pageDetailsTitle?: string;\n};\n\nexport type TypescriptSortBy = {\n  id: string;\n  desc: boolean;\n};\n\nexport type TypescriptSelectionItem = boolean | 'mixed';\n\nexport type TypescriptSelection = Record<string | number, TypescriptSelectionItem>;\n\nexport type UniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string) | undefined;\n\nexport interface ReduxHeader {\n  hideFilterMenu?: boolean;\n  hideFilterButton?: boolean;\n  showDnDHandle?: boolean;\n  withTabStops?: boolean;\n}\n\nexport interface DataTableFilter {\n  id: string;\n  type: string;\n  value: any;\n}\n\ninterface PropsWithDefault {\n  height: string;\n  width: string;\n  renderRowActions: boolean;\n  getRowVariant: (\n    row: TypescriptRow,\n    defaultCellRenderer: React.ComponentType<any>,\n  ) => RowVariant | React.ComponentType<any>;\n  withFilterBar: boolean;\n  isExpandable: boolean;\n  expandedRows: Record<string, boolean>;\n  disabledRows: Record<string, boolean>;\n  isResizeable: boolean;\n  isLoading: boolean;\n  pagination: false | TypescriptPagination;\n  filters: DataTableFilter[];\n  colsLayoutStyle: ColsLayoutStyle;\n  hiddenColumns: string[];\n  noResultsMessage: string;\n  dragAndDropRows: boolean;\n  maxDragAndDropLevel: number;\n  onRowsReorder: (\n    newData: TypescriptRow[],\n    indexes: { targetIndex: number; fromIndex: number },\n    considerExpanding: string | null,\n    extraData: { flattenedData: InternalTypescriptRow[]; allDataFlattened: InternalTypescriptRow[] },\n  ) => void;\n  dragAndDropColumns: boolean;\n  onColumnsReorder: (newData: TypescriptColumn[], indexes: { targetIndex: number; fromIndex: number }) => void;\n  getIsDropValid: (\n    active: InternalTypescriptRow,\n    over: InternalTypescriptRow,\n    dropIndicatorPosition: DropIndicatorPosition,\n  ) => boolean;\n  onColumnResize: (headerId: string, width: number) => void;\n  onColumnSizeChange: (newColumns: TypescriptColumn[], headerId: string, width: number) => void;\n  onRowClick: TypescriptGenericFunc;\n  onRowFocus: TypescriptGenericFunc;\n  noSelectionColumn: boolean;\n  selectSingle: boolean;\n  onSelectionChange: (\n    newSelection: TypescriptSelection,\n    selectedControl: string,\n    event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n  ) => void;\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n  onCellValueChange: (cellChange: { value: any; property: any; rowIndex: number }) => void;\n  onFiltersChange: TypescriptGenericFunc;\n  onPageChanged: TypescriptGenericFunc;\n  onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n  onColumnSortChange: (newSortRequest: { column: any; direction: any }) => void;\n  onColumnSort: (newColumns: TypescriptColumn[], headerId: string, direction: 'ASC' | 'DESC') => void;\n}\n\ninterface PropsRequired {\n  columns: TypescriptColumn[];\n  data: TypescriptRow[];\n}\n\ninterface PropsOptional {\n  uniqueRowAccessor?: UniqueRowAccessorType;\n  cellRendererProps?: Record<string, any>;\n  selection?: TypescriptSelection;\n  groupedRowsRenderHeader?: TypescriptGenericFunc | string;\n  filterBarProps?: {\n    filterBarAddonRenderer?: React.ComponentType<any>;\n    customPillRenderer?: React.ComponentType<any>;\n    extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptGenericFunc }[];\n  };\n  actionRef?: React.RefObject<any>;\n  noResultsSecondaryMessage?: string;\n  noResultsButtonLabel?: string;\n  noResultsPlaceholder?: TypescriptGenericFunc;\n  onNoResultsButtonClick?: TypescriptGenericFunc;\n}\n\nexport interface TypescriptProps extends Partial<PropsWithDefault>, PropsRequired, PropsOptional {}\nexport interface InternalTypescriptProps extends PropsWithDefault, PropsRequired, PropsOptional {}\n\nexport interface FilterProps {\n  column: TypescriptColumn;\n  ctx: TypescriptContext;\n  onFiltersChange?: (filters: DataTableFilter[]) => void;\n  onValueChange: (type: string, value: any) => void;\n  patchHeaderFilterButtonAndMenu: (headerId: string, newState: any) => void;\n  patchHeader: (headerId: string, newHeader: any) => void;\n  filterValue?: any;\n  reduxHeader?: any;\n  innerRef: MutableRefObject<HTMLDivElement | null>;\n}\n\nexport type TypescriptContext = {\n  tableProps: InternalTypescriptProps;\n  columnHeaderRef: React.RefObject<HTMLDivElement>;\n  virtualListRef: React.RefObject<HTMLDivElement>;\n  flattenedData: InternalTypescriptRow[];\n  allDataFlattened: InternalTypescriptRow[];\n  visibleColumns: InternalTypescriptColumn[];\n  virtualListHelpers: ReturnType<typeof useVirtual>;\n  layoutHelpers: {\n    totalColumnsWidth: number | string;\n    gridLayout: string[];\n    setGridLayout: React.Dispatch<React.SetStateAction<string[]>>;\n  };\n  paginationHelpers: TypescriptPagination;\n  drilldownRowId: string | null;\n  setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n  focusedRowId: string | null;\n  setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n  reduxHeaders: Record<string, ReduxHeader>;\n  patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n  patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n  isShiftPressed: boolean;\n  setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n  lastSelected: React.MutableRefObject<number>;\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport type { MutableRefObject } from 'react';\nimport type React from 'react';\nimport type { useVirtual } from 'react-virtual/types';\nimport type { useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { CSSProperties } from 'styled-components';\nimport type { ColsLayoutStyle } from '../configs/constants.js';\n\nexport type TypescriptGenericFunc = (...args: unknown[]) => unknown;\ninterface FilterOptionT {\n  dsId: string;\n  type: string;\n  value: string;\n  label: string;\n}\n\ninterface HeaderComponentProps {\n  ctx: TypescriptContext;\n}\n\nexport type DraggablePropsT =\n  | false\n  | (ReturnType<typeof useSortable> & {\n      dropIndicatorPosition: DropIndicatorPosition;\n      shouldShowDropIndicatorPosition: boolean;\n      isDropValid: boolean;\n    });\n\ninterface CellComponentProps<T = HTMLElement> {\n  ctx: TypescriptContext;\n  isRowSelected: boolean;\n  row: InternalTypescriptRow;\n  cell: TypescriptCell<T>;\n  draggableProps: DraggablePropsT;\n  isDragOverlay: boolean;\n}\n\nexport enum DropIndicatorPosition {\n  None = 0,\n  Before = 1,\n  After = 2,\n  Inside = 3,\n}\n\nexport interface TypescriptColumn<T extends HTMLElement = HTMLElement> {\n  id?: string;\n  Header: string | React.ComponentType<HeaderComponentProps>;\n  accessor?: string;\n  filter?: string;\n  filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);\n  filterMinWidth?: number | string;\n  Filter?: React.ComponentType<FilterProps>;\n  Cell?: React.ComponentType<CellComponentProps<T>>;\n  editable?: string | TypescriptGenericFunc;\n  disableDnD?: boolean;\n  width?: number;\n  minWidth?: number;\n  maxWidth?: number;\n  padding?: number;\n  columns?: TypescriptColumn[];\n  canSort?: boolean;\n  isSortedDesc?: boolean;\n  canResize?: boolean;\n  isFocuseable?: boolean;\n  textWrap?: 'wrap' | 'wrap-all' | 'truncate';\n  ref?: React.MutableRefObject<HTMLTableColElement>;\n  required?: boolean;\n  cellStyle?: CSSProperties;\n  alwaysDisplayEditIcon?: boolean;\n}\n\nexport interface InternalTypescriptColumn<T extends HTMLElement = HTMLElement> extends TypescriptColumn<T> {\n  id: string;\n  parentId: string | null;\n  depth: number;\n  columns?: InternalTypescriptColumn[];\n}\n\nexport interface TypescriptCell<T = HTMLElement> {\n  column: TypescriptColumn;\n  value: any;\n  render: React.ComponentType<CellComponentProps>;\n  row: InternalTypescriptRow;\n  ref: React.RefObject<T>;\n  id: string;\n}\n\nexport interface TypescriptRow {\n  [key: string]: any;\n  subRows?: TypescriptRow[];\n  tableRowDetails?: React.ComponentType<any>;\n  dimsumHeaderValue?: string;\n}\n\nexport interface InternalTypescriptRow {\n  id: string;\n  uid: string;\n  index: number;\n  realIndex: number;\n  parent: InternalTypescriptRow | null;\n  parentId: string | null;\n  parentIndex: number | null;\n  depth: number;\n  isExpanded: boolean;\n  subRows: TypescriptRow[];\n  childrenCount: number;\n  original: TypescriptRow;\n  cells: TypescriptCell[];\n}\n\nexport type RowVariant = 'ds-header-group-row' | 'ds-primary-row' | 'ds-secondary-row';\n\nexport type TypescriptRenderRowActionsConfig = {\n  columnWidth: number;\n  renderer: (...args: any[]) => JSX.Element;\n};\n\nexport type TypescriptRenderRowActions = false | TypescriptRenderRowActionsConfig;\n\nexport type TypescriptAppliedFilter = {\n  id: string;\n  type: string;\n  value: any;\n};\n\nexport type TypescriptPagination = {\n  hasPagination: boolean;\n  page?: any[];\n  pageIndex?: number;\n  canPreviousPage?: boolean;\n  canNextPage?: boolean;\n  pageSize?: number;\n  dataIsPage?: boolean;\n  showPerPageSelector?: boolean;\n  perPageOptions?: number[];\n  perPageStep?: number;\n  minPerPage?: number;\n  maxPerPage?: number;\n  onPageSizeChange?: (pageSize: number) => void;\n  onPreviousPage?: () => void;\n  onNextPage?: () => void;\n  onPageChange?: (page: number) => void;\n  pageCount?: number | string;\n  isLoadingPageCount?: boolean;\n  pageDetails?: string[];\n  pageDetailsTitle?: string;\n};\n\nexport type TypescriptSortBy = {\n  id: string;\n  desc: boolean;\n};\n\nexport type TypescriptSelectionItem = boolean | 'mixed';\n\nexport type TypescriptSelection = Record<string | number, TypescriptSelectionItem>;\n\nexport type UniqueRowAccessorType = string | string[] | ((row: TypescriptRow) => string) | undefined;\n\nexport interface ReduxHeader {\n  hideFilterMenu?: boolean;\n  hideFilterButton?: boolean;\n  showDnDHandle?: boolean;\n  withTabStops?: boolean;\n}\n\nexport interface DataTableFilter {\n  id: string;\n  type: string;\n  value: any;\n}\n\ninterface PropsWithDefault {\n  height: string;\n  width: string;\n  renderRowActions: boolean;\n  getRowVariant: (\n    row: TypescriptRow,\n    defaultCellRenderer: React.ComponentType<any>,\n  ) => RowVariant | React.ComponentType<any>;\n  withFilterBar: boolean;\n  isExpandable: boolean;\n  expandedRows: Record<string, boolean>;\n  disabledRows: Record<string, boolean>;\n  isResizeable: boolean;\n  isLoading: boolean;\n  pagination: false | TypescriptPagination;\n  filters: DataTableFilter[];\n  colsLayoutStyle: ColsLayoutStyle;\n  hiddenColumns: string[];\n  noResultsMessage: string;\n  dragAndDropRows: boolean;\n  maxDragAndDropLevel: number;\n  onRowsReorder: (\n    newData: TypescriptRow[],\n    indexes: { targetIndex: number; fromIndex: number },\n    considerExpanding: string | null,\n    extraData: { flattenedData: InternalTypescriptRow[]; allDataFlattened: InternalTypescriptRow[] },\n  ) => void;\n  dragAndDropColumns: boolean;\n  onColumnsReorder: (newData: TypescriptColumn[], indexes: { targetIndex: number; fromIndex: number }) => void;\n  getIsDropValid: (\n    active: InternalTypescriptRow,\n    over: InternalTypescriptRow,\n    dropIndicatorPosition: DropIndicatorPosition,\n  ) => boolean;\n  onColumnResize: (headerId: string, width: number) => void;\n  onColumnSizeChange: (newColumns: TypescriptColumn[], headerId: string, width: number) => void;\n  onRowClick: TypescriptGenericFunc;\n  onRowFocus: TypescriptGenericFunc;\n  noSelectionColumn: boolean;\n  selectSingle: boolean;\n  onSelectionChange: (\n    newSelection: TypescriptSelection,\n    selectedControl: string,\n    event: React.ChangeEvent | React.MouseEvent | React.KeyboardEvent,\n  ) => void;\n  textWrap: 'wrap' | 'wrap-all' | 'truncate';\n  onCellValueChange: (cellChange: { value: any; property: any; rowIndex: number }) => void;\n  onFiltersChange: TypescriptGenericFunc;\n  onPageChanged: TypescriptGenericFunc;\n  onRowExpand: (expandedRows: Record<string, boolean>, toggledRow: string) => void;\n  onColumnSortChange: (newSortRequest: { column: any; direction: any }) => void;\n  onColumnSort: (newColumns: TypescriptColumn[], headerId: string, direction: 'ASC' | 'DESC') => void;\n}\n\ninterface PropsRequired {\n  columns: TypescriptColumn[];\n  data: TypescriptRow[];\n}\n\ninterface PropsOptional {\n  uniqueRowAccessor?: UniqueRowAccessorType;\n  cellRendererProps?: Record<string, any>;\n  selection?: TypescriptSelection;\n  groupedRowsRenderHeader?: TypescriptGenericFunc | string;\n  filterBarProps?: {\n    filterBarAddonRenderer?: React.ComponentType<any>;\n    customPillRenderer?: React.ComponentType<any>;\n    extraOptions?: { type: string; id: string; label: string; onClick?: TypescriptGenericFunc }[];\n  };\n  actionRef?: React.RefObject<any>;\n  noResultsSecondaryMessage?: string;\n  noResultsButtonLabel?: string;\n  noResultsPlaceholder?: TypescriptGenericFunc;\n  onNoResultsButtonClick?: TypescriptGenericFunc;\n  Pagination?: React.ComponentType<Record<string, never>>;\n}\n\nexport interface TypescriptProps extends Partial<PropsWithDefault>, PropsRequired, PropsOptional {}\nexport interface InternalTypescriptProps extends PropsWithDefault, PropsRequired, PropsOptional {}\n\nexport interface FilterProps {\n  column: TypescriptColumn;\n  ctx: TypescriptContext;\n  onFiltersChange?: (filters: DataTableFilter[]) => void;\n  onValueChange: (type: string, value: any) => void;\n  patchHeaderFilterButtonAndMenu: (headerId: string, newState: any) => void;\n  patchHeader: (headerId: string, newHeader: any) => void;\n  filterValue?: any;\n  reduxHeader?: any;\n  innerRef: MutableRefObject<HTMLDivElement | null>;\n}\n\nexport type TypescriptContext = {\n  tableProps: InternalTypescriptProps;\n  columnHeaderRef: React.RefObject<HTMLDivElement>;\n  virtualListRef: React.RefObject<HTMLDivElement>;\n  flattenedData: InternalTypescriptRow[];\n  allDataFlattened: InternalTypescriptRow[];\n  visibleColumns: InternalTypescriptColumn[];\n  virtualListHelpers: ReturnType<typeof useVirtual>;\n  layoutHelpers: {\n    totalColumnsWidth: number | string;\n    gridLayout: string[];\n    setGridLayout: React.Dispatch<React.SetStateAction<string[]>>;\n  };\n  paginationHelpers: TypescriptPagination;\n  drilldownRowId: string | null;\n  setDrilldownRowId: React.Dispatch<React.SetStateAction<string | null>>;\n  focusedRowId: string | null;\n  setFocusedRowId: React.Dispatch<React.SetStateAction<string | null>>;\n  reduxHeaders: Record<string, ReduxHeader>;\n  patchHeader: (headerId: string, newHeader: ReduxHeader) => void;\n  patchHeaderFilterButtonAndMenu: (headerId: string, value: boolean) => void;\n  isShiftPressed: boolean;\n  setIsShiftPressed: React.Dispatch<React.SetStateAction<boolean>>;\n  lastSelected: React.MutableRefObject<number>;\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACqChB,IAAK,wBAAL,kBAAKA,2BAAL;AACL,EAAAA,8CAAA,UAAO,KAAP;AACA,EAAAA,8CAAA,YAAS,KAAT;AACA,EAAAA,8CAAA,WAAQ,KAAR;AACA,EAAAA,8CAAA,YAAS,KAAT;AAJU,SAAAA;AAAA,GAAA;",
   "names": ["DropIndicatorPosition"]
 }

package/dist/types/DataTable.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TypescriptProps } from './types/props';
+import type { TypescriptProps } from './types/props.js';
 export declare const DataTable: {
     (props: TypescriptProps): JSX.Element;
     propTypes: React.WeakValidationMap<unknown>;
@@ -7,60 +7,60 @@ export declare const DataTable: {
         height?: string | undefined;
         width?: string | undefined;
         renderRowActions?: boolean | undefined;
-        getRowVariant?: ((row: import("./types/props").TypescriptRow, defaultCellRenderer: React.ComponentType<any>) => React.ComponentType<any> | import("./types/props").RowVariant) | undefined;
+        getRowVariant?: ((row: import("./types/props.js").TypescriptRow, defaultCellRenderer: React.ComponentType<any>) => React.ComponentType<any> | import("./types/props.js").RowVariant) | undefined;
         withFilterBar?: boolean | undefined;
         isExpandable?: boolean | undefined;
         expandedRows?: Record<string, boolean> | undefined;
         disabledRows?: Record<string, boolean> | undefined;
         isResizeable?: boolean | undefined;
         isLoading?: boolean | undefined;
-        pagination?: false | import("./types/props").TypescriptPagination | undefined;
-        filters?: import("./types/props").DataTableFilter[] | undefined;
-        colsLayoutStyle?: import("./configs/constants").ColsLayoutStyle | undefined;
+        pagination?: false | import("./types/props.js").TypescriptPagination | undefined;
+        filters?: import("./types/props.js").DataTableFilter[] | undefined;
+        colsLayoutStyle?: import("./configs/constants.js").ColsLayoutStyle | undefined;
         hiddenColumns?: string[] | undefined;
         noResultsMessage?: string | undefined;
         dragAndDropRows?: boolean | undefined;
         maxDragAndDropLevel?: number | undefined;
-        onRowsReorder?: ((newData: import("./types/props").TypescriptRow[], indexes: {
+        onRowsReorder?: ((newData: import("./types/props.js").TypescriptRow[], indexes: {
             targetIndex: number;
             fromIndex: number;
         }, considerExpanding: string | null, extraData: {
-            flattenedData: import("./types/props").InternalTypescriptRow[];
-            allDataFlattened: import("./types/props").InternalTypescriptRow[];
+            flattenedData: import("./types/props.js").InternalTypescriptRow[];
+            allDataFlattened: import("./types/props.js").InternalTypescriptRow[];
         }) => void) | undefined;
         dragAndDropColumns?: boolean | undefined;
-        onColumnsReorder?: ((newData: import("./types/props").TypescriptColumn<HTMLElement>[], indexes: {
+        onColumnsReorder?: ((newData: import("./types/props.js").TypescriptColumn<HTMLElement>[], indexes: {
             targetIndex: number;
             fromIndex: number;
         }) => void) | undefined;
-        getIsDropValid?: ((active: import("./types/props").InternalTypescriptRow, over: import("./types/props").InternalTypescriptRow, dropIndicatorPosition: import("./types/props").DropIndicatorPosition) => boolean) | undefined;
+        getIsDropValid?: ((active: import("./types/props.js").InternalTypescriptRow, over: import("./types/props.js").InternalTypescriptRow, dropIndicatorPosition: import("./types/props.js").DropIndicatorPosition) => boolean) | undefined;
         onColumnResize?: ((headerId: string, width: number) => void) | undefined;
-        onColumnSizeChange?: ((newColumns: import("./types/props").TypescriptColumn<HTMLElement>[], headerId: string, width: number) => void) | undefined;
-        onRowClick?: import("./types/props").TypescriptGenericFunc | undefined;
-        onRowFocus?: import("./types/props").TypescriptGenericFunc | undefined;
+        onColumnSizeChange?: ((newColumns: import("./types/props.js").TypescriptColumn<HTMLElement>[], headerId: string, width: number) => void) | undefined;
+        onRowClick?: import("./types/props.js").TypescriptGenericFunc | undefined;
+        onRowFocus?: import("./types/props.js").TypescriptGenericFunc | undefined;
         noSelectionColumn?: boolean | undefined;
         selectSingle?: boolean | undefined;
-        onSelectionChange?: ((newSelection: import("./types/props").TypescriptSelection, selectedControl: string, event: React.ChangeEvent<Element> | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
+        onSelectionChange?: ((newSelection: import("./types/props.js").TypescriptSelection, selectedControl: string, event: React.ChangeEvent<Element> | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void) | undefined;
         textWrap?: "wrap" | "wrap-all" | "truncate" | undefined;
         onCellValueChange?: ((cellChange: {
             value: any;
             property: any;
             rowIndex: number;
         }) => void) | undefined;
-        onFiltersChange?: import("./types/props").TypescriptGenericFunc | undefined;
-        onPageChanged?: import("./types/props").TypescriptGenericFunc | undefined;
+        onFiltersChange?: import("./types/props.js").TypescriptGenericFunc | undefined;
+        onPageChanged?: import("./types/props.js").TypescriptGenericFunc | undefined;
         onRowExpand?: ((expandedRows: Record<string, boolean>, toggledRow: string) => void) | undefined;
         onColumnSortChange?: ((newSortRequest: {
             column: any;
             direction: any;
         }) => void) | undefined;
-        onColumnSort?: ((newColumns: import("./types/props").TypescriptColumn<HTMLElement>[], headerId: string, direction: "ASC" | "DESC") => void) | undefined;
-        columns?: import("./types/props").TypescriptColumn<HTMLElement>[] | undefined;
-        data?: import("./types/props").TypescriptRow[] | undefined;
-        uniqueRowAccessor?: import("./types/props").UniqueRowAccessorType;
+        onColumnSort?: ((newColumns: import("./types/props.js").TypescriptColumn<HTMLElement>[], headerId: string, direction: "ASC" | "DESC") => void) | undefined;
+        columns?: import("./types/props.js").TypescriptColumn<HTMLElement>[] | undefined;
+        data?: import("./types/props.js").TypescriptRow[] | undefined;
+        uniqueRowAccessor?: import("./types/props.js").UniqueRowAccessorType;
         cellRendererProps?: Record<string, any> | undefined;
-        selection?: import("./types/props").TypescriptSelection | undefined;
-        groupedRowsRenderHeader?: string | import("./types/props").TypescriptGenericFunc | undefined;
+        selection?: import("./types/props.js").TypescriptSelection | undefined;
+        groupedRowsRenderHeader?: string | import("./types/props.js").TypescriptGenericFunc | undefined;
         filterBarProps?: {
             filterBarAddonRenderer?: React.ComponentType<any> | undefined;
             customPillRenderer?: React.ComponentType<any> | undefined;
@@ -68,15 +68,16 @@ export declare const DataTable: {
                 type: string;
                 id: string;
                 label: string;
-                onClick?: import("./types/props").TypescriptGenericFunc | undefined;
+                onClick?: import("./types/props.js").TypescriptGenericFunc | undefined;
             }[] | undefined;
         } | undefined;
         actionRef?: React.RefObject<any> | undefined;
         noResultsSecondaryMessage?: string | undefined;
         noResultsButtonLabel?: string | undefined;
-        noResultsPlaceholder?: import("./types/props").TypescriptGenericFunc | undefined;
-        onNoResultsButtonClick?: import("./types/props").TypescriptGenericFunc | undefined;
+        noResultsPlaceholder?: import("./types/props.js").TypescriptGenericFunc | undefined;
+        onNoResultsButtonClick?: import("./types/props.js").TypescriptGenericFunc | undefined;
+        Pagination?: React.ComponentType<Record<string, never>> | undefined;
     };
     displayName: string;
 };
-export declare const DataTableWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<TypescriptProps>;
+export declare const DataTableWithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<TypescriptProps>;

package/dist/types/DataTableContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { TypescriptContext, TypescriptProps } from './types/props';
+import type { TypescriptContext, TypescriptProps } from './types/props.js';
 export declare const defaultProps: Partial<TypescriptProps>;
 /** Context for cross component communication */
 declare const DataTableContext: import("react").Context<TypescriptContext>;

package/dist/types/addons/Columns/ColumnAction/ColumnAction.d.ts

@@ -1,4 +1,4 @@
-import type { TypescriptColumn, TypescriptRenderRowActionsConfig } from '../../../types/props';
+import type { TypescriptColumn, TypescriptRenderRowActionsConfig } from '../../../types/props.js';
 type ConfigurableColumn = (renderRowActions: TypescriptRenderRowActionsConfig) => TypescriptColumn;
 export declare const actionColumn: ConfigurableColumn;
 export {};

package/dist/types/addons/Columns/ColumnDragHandle/ColumnDragHandle.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props';
+import type { TypescriptColumn } from '../../../types/props.js';
 export declare const dragHandleColumn: TypescriptColumn<HTMLDivElement>;

package/dist/types/addons/Columns/ColumnExpand/ColumnExpand.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props';
+import type { TypescriptColumn } from '../../../types/props.js';
 export declare const expandRowColumn: TypescriptColumn<HTMLSpanElement>;

package/dist/types/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props';
+import type { TypescriptColumn } from '../../../types/props.js';
 export declare const multiSelectColumn: TypescriptColumn<HTMLInputElement>;

package/dist/types/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptColumn } from '../../../types/props';
+import type { TypescriptColumn } from '../../../types/props.js';
 export declare const singleSelectColumn: TypescriptColumn<HTMLInputElement>;

package/dist/types/addons/Columns/index.d.ts

@@ -1,6 +1,6 @@
-export { actionColumn } from './ColumnAction/ColumnAction';
-export { expandRowColumn } from './ColumnExpand/ColumnExpand';
-export { multiSelectColumn } from './ColumnSelectMultiple/ColumnSelectMultiple';
-export { singleSelectColumn } from './ColumnSelectSingle/ColumnSelectSingle';
-export { dragHandleColumn } from './ColumnDragHandle/ColumnDragHandle';
+export { actionColumn } from './ColumnAction/ColumnAction.js';
+export { expandRowColumn } from './ColumnExpand/ColumnExpand.js';
+export { multiSelectColumn } from './ColumnSelectMultiple/ColumnSelectMultiple.js';
+export { singleSelectColumn } from './ColumnSelectSingle/ColumnSelectSingle.js';
+export { dragHandleColumn } from './ColumnDragHandle/ColumnDragHandle.js';
 export declare const INTERNAL_COLUMNS: string[];

package/dist/types/addons/Filters/Components/CurrencyRangeFilter/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const CurrencyRangeFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/DateRangeFilter/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const DateRangeFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/DateSwitcherFilter/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const DateSwitcherFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/NumberRangeFilter/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const NumberRangeFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/SelectFilter/BaseSelectFilter.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 interface FilterOptionT {
     dsId: string;
     type: string;

package/dist/types/addons/Filters/Components/SelectFilter/MultiCreatableFilter.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const MultiCreatableFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/SelectFilter/MultiSelectFilter.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const MultiSelectFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/SelectFilter/SingleCreatableFilter.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const SingleCreatableFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/SelectFilter/SingleSelectFilter.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const SingleSelectFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/SingleDateFilter/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterProps } from '../../../../types/props';
+import type { FilterProps } from '../../../../types/props.js';
 export declare const SingleDateFilter: React.ComponentType<FilterProps>;

package/dist/types/addons/Filters/Components/index.d.ts

@@ -1,9 +1,9 @@
-export * from './DateRangeFilter';
-export * from './DateSwitcherFilter';
-export * from './NumberRangeFilter';
-export * from './CurrencyRangeFilter';
-export * from './SelectFilter/SingleSelectFilter';
-export * from './SelectFilter/MultiSelectFilter';
-export * from './SingleDateFilter';
-export * from './SelectFilter/SingleCreatableFilter';
-export * from './SelectFilter/MultiCreatableFilter';
+export * from './DateRangeFilter/index.js';
+export * from './DateSwitcherFilter/index.js';
+export * from './NumberRangeFilter/index.js';
+export * from './CurrencyRangeFilter/index.js';
+export * from './SelectFilter/SingleSelectFilter.js';
+export * from './SelectFilter/MultiSelectFilter.js';
+export * from './SingleDateFilter/index.js';
+export * from './SelectFilter/SingleCreatableFilter.js';
+export * from './SelectFilter/MultiCreatableFilter.js';

package/dist/types/addons/Filters/index.d.ts

@@ -1 +1 @@
-export * from './Components';
+export * from './Components/index.js';

package/dist/types/addons/Pagination/index.d.ts

@@ -1 +1 @@
-export { Pagination } from './Pagination';
+export { Pagination } from './Pagination.js';

package/dist/types/configs/index.d.ts

@@ -1,5 +1,5 @@
-export * from './constants';
-export * from './fixedSizes';
-export * from './useDatatableConfig';
-export * from './useRowFlattenization';
-export * from './zIndexInternalConfig';
+export * from './constants.js';
+export * from './fixedSizes.js';
+export * from './useDatatableConfig.js';
+export * from './useRowFlattenization.js';
+export * from './zIndexInternalConfig.js';

package/dist/types/configs/useDatatableConfig.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptContext, TypescriptProps } from '../types/props';
+import type { TypescriptContext, TypescriptProps } from '../types/props.js';
 export declare const useDatatableConfig: (props: TypescriptProps) => TypescriptContext;

package/dist/types/configs/useInternalStateConfig.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ReduxHeader } from '../types/props';
+import type { ReduxHeader } from '../types/props.js';
 export declare const useInternalStateConfig: () => {
     drilldownRowId: string | null;
     setDrilldownRowId: import("react").Dispatch<import("react").SetStateAction<string | null>>;

package/dist/types/configs/usePaginationConfig.d.ts

@@ -1,2 +1,2 @@
-import type { TypescriptPagination, TypescriptProps, TypescriptRow } from '../types/props';
+import type { TypescriptPagination, TypescriptProps, TypescriptRow } from '../types/props.js';
 export declare const usePaginationConfig: (props: TypescriptProps, flattenedData: TypescriptRow[]) => [TypescriptRow[] | null, TypescriptPagination];

package/dist/types/configs/useRowFlattenization.d.ts

@@ -1,2 +1,2 @@
-import type { InternalTypescriptRow, TypescriptProps } from '../types/props';
+import type { InternalTypescriptRow, TypescriptProps } from '../types/props.js';
 export declare const useRowFlattenization: (props: TypescriptProps) => [InternalTypescriptRow[], InternalTypescriptRow[]];

package/dist/types/configs/useTableColsWithAddons.d.ts

@@ -1,4 +1,4 @@
-import type { InternalTypescriptColumn, TypescriptProps } from '../types/props';
+import type { InternalTypescriptColumn, TypescriptProps } from '../types/props.js';
 type UseTableColsWithAddonsType = (config: TypescriptProps) => InternalTypescriptColumn[];
 declare const useTableColsWithAddons: UseTableColsWithAddonsType;
 export { useTableColsWithAddons };

package/dist/types/exported-related/FilterBar/index.d.ts

@@ -1 +1 @@
-export * from './FilterBarDropdownMenu';
+export * from './FilterBarDropdownMenu.js';

package/dist/types/exported-related/FilterPopover/index.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FilterPopoverProps } from './types';
+import type { FilterPopoverProps } from './types.js';
 export declare const FilterPopover: React.ComponentType<FilterPopoverProps>;