@elliemae/ds-data-table 3.50.1-next.8 → 3.51.0-beta.1

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, { useCallback, useContext } from 'react';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\n\nconst StyledRow = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.ROW })<{ isDisabled: boolean }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  measureRef?: (el: HTMLElement | null) => void;\n  itemWrapperStyle?: React.CSSProperties;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const focusedRowId = useInternalStore((state) => state.focusedRowId);\n  const drilldownRowId = useInternalStore((state) => state.drilldownRowId);\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      innerRef={mergeRefs(measureRef, draggableRef)}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoCjB;AApCN,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,QAAQ,iBAAiB;AAClC,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,iBAAiB,wBAAwB;AAElD,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,IAAI,CAAC;AAAA,YACzE,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB,QAAS;AAAA;AAGhE,MAAM,MAKR,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AAC3D,QAAM,eAAe,iBAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AAEvE,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,UAAU,UAAU,YAAY,YAAY;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;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 { mergeRefs, styled } from '@elliemae/ds-system';\nimport React, { useCallback, useContext } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { SortableItemContext } from './HoC/SortableItemContext.js';\nimport { withDnDSortableRowContext } from './HoC/withDnDSortableRowContext.js';\nimport { RowVariantMapItem } from './RowVariants/index.js';\n\nconst StyledRow = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.ROW })<{ isDisabled: boolean }>`\n  cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'normal')};\n`;\n\nexport const Row: React.ComponentType<{\n  row: DSDataTableT.InternalRow;\n  measureRef?: (el: HTMLElement | null) => void;\n  itemWrapperStyle?: React.CSSProperties;\n  isDragOverlay: boolean;\n}> = (props) => {\n  const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\n  const getOwnerPropsArguments = useCallback(() => row, [row]);\n  const focusedRowId = useInternalStore((state) => state.focusedRowId);\n  const drilldownRowId = useInternalStore((state) => state.drilldownRowId);\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      innerRef={mergeRefs(measureRef, draggableRef)}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <RowVariantMapItem\n        row={row}\n        itemIndex={row.realIndex}\n        isDragOverlay={isDragOverlay}\n        focusedRowId={focusedRowId}\n        drilldownRowId={drilldownRowId}\n      />\n    </StyledRow>\n  );\n};\n\nconst RowWithContext = withDnDSortableRowContext(Row);\nexport { RowWithContext };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoCjB;AApCN,SAAS,WAAW,cAAc;AAClC,SAAgB,aAAa,kBAAkB;AAC/C,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,iBAAiB,wBAAwB;AAElD,SAAS,2BAA2B;AACpC,SAAS,iCAAiC;AAC1C,SAAS,yBAAyB;AAElC,MAAM,YAAY,OAAO,OAAO,EAAE,MAAM,iBAAiB,MAAM,iBAAiB,IAAI,CAAC;AAAA,YACzE,CAAC,EAAE,WAAW,MAAO,aAAa,gBAAgB,QAAS;AAAA;AAGhE,MAAM,MAKR,CAAC,UAAU;AACd,QAAM,EAAE,KAAK,YAAY,kBAAkB,cAAc,IAAI;AAC7D,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB,YAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AAC3D,QAAM,eAAe,iBAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AAEvE,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,UAAU,UAAU,YAAY,YAAY;AAAA,MAC5C;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,IAAI;AAAA,UACf;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,11 +1,11 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLayoutEffect, useMemo, useRef } from "react";
-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";
-import { usePropsStore } from "../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
+import { RowRenderer } from "../../exported-related/RowRenderer/index.js";
+import { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from "../../styled.js";
 const RowContent = (props) => {
   const { row, backgroundColor = "neutral-000", focusedRowId, drilldownRowId } = props;
   const groupedRowsRenderHeader = usePropsStore((state) => state.groupedRowsRenderHeader);
@@ -50,7 +50,8 @@ const RowContent = (props) => {
           role: "cell",
           getOwnerProps,
           children: [
-            hasExpandCell && expandRowColumn.Cell && /* @__PURE__ */ jsx(
+            hasExpandCell && expandRowColumn.Cell && // @ts-expect-error - typescript for data-table is basically broken
+            /* @__PURE__ */ jsx(
               expandRowColumn.Cell,
               {
                 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/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';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n  const { row, backgroundColor = 'neutral-000', focusedRowId, drilldownRowId } = props;\n\n  const groupedRowsRenderHeader = usePropsStore((state) => state.groupedRowsRenderHeader);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\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      innerRef={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      gridTemplateColumns=\"auto\"\n      getOwnerProps={getOwnerProps}\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        role=\"cell\"\n        getOwnerProps={getOwnerProps}\n      >\n        {hasExpandCell && expandRowColumn.Cell && (\n          <expandRowColumn.Cell\n            row={row}\n            cell={row.cells[0]}\n            column={row.cells[0].column}\n            isRowSelected={drilldownRowId === row.uid}\n          />\n        )}\n        <GroupHeaderTitle getOwnerProps={getOwnerProps}>{titleContent}</GroupHeaderTitle>\n      </GroupHeaderContainer>\n    </StyledCellContainer>\n  );\n};\n\nexport const RowVariantHeader: React.ComponentType<DSDataTableT.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;ACkDjB,SAQI,KARJ;AAlDN,SAAgB,iBAAiB,SAAS,cAAc;AACxD,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB,kBAAkB,2BAA2B;AAE5E,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAE5B,SAAS,qBAAqB;AAE9B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM,EAAE,KAAK,kBAAkB,eAAe,cAAc,eAAe,IAAI;AAE/E,QAAM,0BAA0B,cAAc,CAAC,UAAU,MAAM,uBAAuB;AACtF,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,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,UAAU;AAAA,MACV,WAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,iBAAe,aAAa,SAAS;AAAA,MACrC;AAAA,MACA,eAAa,YAAY;AAAA,MACzB,qBAAoB;AAAA,MACpB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,YAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UACrC,MAAK;AAAA,UACL;AAAA,UAEC;AAAA,6BAAiB,gBAAgB,QAChC;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,MAAM,IAAI,MAAM,CAAC;AAAA,gBACjB,QAAQ,IAAI,MAAM,CAAC,EAAE;AAAA,gBACrB,eAAe,mBAAmB,IAAI;AAAA;AAAA,YACxC;AAAA,YAEF,oBAAC,oBAAiB,eAA+B,wBAAa;AAAA;AAAA;AAAA,MAChE;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,mBAAsE,CAAC;AAAA,EAClF;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 { expandRowColumn } from '../../addons/Columns/index.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { RowRenderer } from '../../exported-related/RowRenderer/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { GroupHeaderContainer, GroupHeaderTitle, StyledCellContainer } from '../../styled.js';\nimport type { RowVariantProps } from './types.js';\n\nconst RowContent: React.ComponentType<RowVariantProps> = (props) => {\n  const { row, backgroundColor = 'neutral-000', focusedRowId, drilldownRowId } = props;\n\n  const groupedRowsRenderHeader = usePropsStore((state) => state.groupedRowsRenderHeader);\n  const disabledRows = usePropsStore((state) => state.disabledRows);\n  const getOwnerProps = usePropsStore((store) => store.get);\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      innerRef={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      gridTemplateColumns=\"auto\"\n      getOwnerProps={getOwnerProps}\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        role=\"cell\"\n        getOwnerProps={getOwnerProps}\n      >\n        {hasExpandCell && expandRowColumn.Cell && (\n          // @ts-expect-error - typescript for data-table is basically broken\n          <expandRowColumn.Cell\n            row={row}\n            cell={row.cells[0]}\n            column={row.cells[0].column}\n            isRowSelected={drilldownRowId === row.uid}\n          />\n        )}\n        <GroupHeaderTitle getOwnerProps={getOwnerProps}>{titleContent}</GroupHeaderTitle>\n      </GroupHeaderContainer>\n    </StyledCellContainer>\n  );\n};\n\nexport const RowVariantHeader: React.ComponentType<DSDataTableT.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;ACkDjB,SASI,KATJ;AAlDN,SAAgB,iBAAiB,SAAS,cAAc;AACxD,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAE5B,SAAS,sBAAsB,kBAAkB,2BAA2B;AAG5E,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM,EAAE,KAAK,kBAAkB,eAAe,cAAc,eAAe,IAAI;AAE/E,QAAM,0BAA0B,cAAc,CAAC,UAAU,MAAM,uBAAuB;AACtF,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,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,UAAU;AAAA,MACV,WAAU;AAAA,MACV,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA,iBAAe,aAAa,SAAS;AAAA,MACrC;AAAA,MACA,eAAa,YAAY;AAAA,MACzB,qBAAoB;AAAA,MACpB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,YAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UACrC,MAAK;AAAA,UACL;AAAA,UAEC;AAAA,6BAAiB,gBAAgB;AAAA,YAEhC;AAAA,cAAC,gBAAgB;AAAA,cAAhB;AAAA,gBACC;AAAA,gBACA,MAAM,IAAI,MAAM,CAAC;AAAA,gBACjB,QAAQ,IAAI,MAAM,CAAC,EAAE;AAAA,gBACrB,eAAe,mBAAmB,IAAI;AAAA;AAAA,YACxC;AAAA,YAEF,oBAAC,oBAAiB,eAA+B,wBAAa;AAAA;AAAA;AAAA,MAChE;AAAA;AAAA,EACF;AAEJ;AAEO,MAAM,mBAAsE,CAAC;AAAA,EAClF;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/index.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
+import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
 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";
-import { usePropsStore } from "../../configs/useStore/useStore.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/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.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 { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst RowVariantMapper: Record<string, React.ComponentType<DSDataTableT.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\nexport const RowVariantMapItem: React.ComponentType<DSDataTableT.RowVariantProps> = (props) => {\n  const { row } = props;\n\n  const getRowVariant = usePropsStore((state) => state.getRowVariant);\n  const variant = getRowVariant(row, Cells);\n\n  let Component: React.ComponentType<DSDataTableT.RowVariantProps>;\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;AACnC,SAAS,qBAAqB;AAE9B,MAAM,mBAAsF;AAAA,EAC1F,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;AAEO,MAAM,oBAAuE,CAAC,UAAU;AAC7F,QAAM,EAAE,IAAI,IAAI;AAEhB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,UAAU,cAAc,KAAK,KAAK;AAExC,MAAI;AAEJ,MAAI,OAAO,YAAY,UAAU;AAC/B,QAAI,EAAE,WAAW,mBAAmB;AAClC,YAAM,IAAI,MAAM,GAAG,OAAO,uCAAuC;AAAA,IACnE;AACA,gBAAY,iBAAiB,OAAO;AAAA,EACtC,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 { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { ROW_VARIANTS } from '../../exported-related/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.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';\n\nconst RowVariantMapper: Record<string, React.ComponentType<DSDataTableT.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\nexport const RowVariantMapItem: React.ComponentType<DSDataTableT.RowVariantProps> = (props) => {\n  const { row } = props;\n\n  const getRowVariant = usePropsStore((state) => state.getRowVariant);\n  const variant = getRowVariant(row, Cells);\n\n  let Component: React.ComponentType<DSDataTableT.RowVariantProps>;\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,qBAAqB;AAC9B,SAAS,oBAAoB;AAE7B,SAAS,aAAa;AACtB,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,2BAA2B;AACpC,SAAS,0BAA0B;AAEnC,MAAM,mBAAsF;AAAA,EAC1F,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;AAEO,MAAM,oBAAuE,CAAC,UAAU;AAC7F,QAAM,EAAE,IAAI,IAAI;AAEhB,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,UAAU,cAAc,KAAK,KAAK;AAExC,MAAI;AAEJ,MAAI,OAAO,YAAY,UAAU;AAC/B,QAAI,EAAE,WAAW,mBAAmB;AAClC,YAAM,IAAI,MAAM,GAAG,OAAO,uCAAuC;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,12 @@
 import * as React from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { createElement } from "react";
 import { useContext } from "react";
-import { RowWithContext as Row } from "./Row.js";
-import { withConditionalDnDRowContext } from "./HoC/withConditionalDnDRowContext.js";
-import { DnDTreeContext } from "./HoC/DnDTreeContext.js";
+import { usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
 import { addCellData } from "../helpers/index.js";
-import { usePropsStore } from "../configs/useStore/useStore.js";
+import { DnDTreeContext } from "./HoC/DnDTreeContext.js";
+import { withConditionalDnDRowContext } from "./HoC/withConditionalDnDRowContext.js";
+import { RowWithContext as Row } from "./Row.js";
 const Rows = () => {
   const { virtualItems } = usePropsStore((state) => state.virtualListHelpers);
   const flattenedData = usePropsStore((state) => state.flattenedData);
@@ -24,7 +25,6 @@ const Rows = () => {
       width: "100%"
     };
     const rowProps = {
-      key: `ds-table-row-${row.uid}`,
       row,
       measureRef,
       index,
@@ -33,7 +33,7 @@ const Rows = () => {
       itemWrapperStyle: style,
       isDragOverlay: false
     };
-    return /* @__PURE__ */ jsx(Row, { ...rowProps });
+    return /* @__PURE__ */ createElement(Row, { ...rowProps, key: `ds-table-row-${row.uid}` });
   }) });
 };
 Rows.propTypes = {};

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", "import React, { useContext } from 'react';\nimport { RowWithContext as Row } from './Row.js';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext.js';\nimport { DnDTreeContext } from './HoC/DnDTreeContext.js';\nimport { addCellData } from '../helpers/index.js';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\n\nconst Rows = (): JSX.Element => {\n  const { virtualItems } = usePropsStore((state) => state.virtualListHelpers);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\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: React.CSSProperties = {\n          position: 'absolute',\n          top: `${start}px`,\n          left: 0,\n          width: '100%',\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          isDragOverlay: false,\n        };\n        return <Row {...rowProps} />;\n      })}\n    </>\n  );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiBnB,mBAqBW,WArBX;AAjBJ,SAAgB,kBAAkB;AAClC,SAAS,kBAAkB,WAAW;AACtC,SAAS,oCAAoC;AAC7C,SAAS,sBAAsB;AAC/B,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,MAAM,OAAO,MAAmB;AAC9B,QAAM,EAAE,aAAa,IAAI,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,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,IAAK,QAAO;AACjB,gBAAY,KAAK,cAAc;AAC/B,UAAM,QAA6B;AAAA,MACjC,UAAU;AAAA,MACV,KAAK,GAAG,KAAK;AAAA,MACb,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf,KAAK,gBAAgB,IAAI,GAAG;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,IACjB;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", "import React, { useContext } from 'react';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { addCellData } from '../helpers/index.js';\nimport { DnDTreeContext } from './HoC/DnDTreeContext.js';\nimport { withConditionalDnDRowContext } from './HoC/withConditionalDnDRowContext.js';\nimport { RowWithContext as Row } from './Row.js';\n\nconst Rows = (): JSX.Element => {\n  const { virtualItems } = usePropsStore((state) => state.virtualListHelpers);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\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: React.CSSProperties = {\n          position: 'absolute',\n          top: `${start}px`,\n          left: 0,\n          width: '100%',\n        };\n        const rowProps = {\n          row,\n          measureRef,\n          index, // this is consumed by the DnD HOC\n          itemIndex: index,\n          itemWrapperStyle: style,\n          isDragOverlay: false,\n        };\n        return <Row {...rowProps} key={`ds-table-row-${row.uid}`} />;\n      })}\n    </>\n  );\n};\n\nRows.propTypes = {};\n\nexport const RowsWithContext = withConditionalDnDRowContext(Rows);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBnB;AAoBW;AArCf,SAAgB,kBAAkB;AAClC,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB;AAC/B,SAAS,oCAAoC;AAC7C,SAAS,kBAAkB,WAAW;AAEtC,MAAM,OAAO,MAAmB;AAC9B,QAAM,EAAE,aAAa,IAAI,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC1E,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,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,IAAK,QAAO;AACjB,gBAAY,KAAK,cAAc;AAC/B,UAAM,QAA6B;AAAA,MACjC,UAAU;AAAA,MACV,KAAK,GAAG,KAAK;AAAA,MACb,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AACA,UAAM,WAAW;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB;AAAA,MAClB,eAAe;AAAA,IACjB;AACA,WAAO,8BAAC,OAAK,GAAG,UAAU,KAAK,gBAAgB,IAAI,GAAG,IAAI;AAAA,EAC5D,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,kBAAkB,6BAA6B,IAAI;",
   "names": []
 }

package/dist/esm/parts/TableContent.js

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
-import { StyledTableWrapper, StyledDataTableContentWrapper, StyledPaginationWrapper } from "../styled.js";
 import { Pagination } from "../addons/Pagination/index.js";
-import { VirtualRowsList } from "./VirtualRowsList.js";
 import { DATA_TESTID } from "../configs/constants.js";
+import { useInternalStore, usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
+import { StyledDataTableContentWrapper, StyledPaginationWrapper, StyledTableWrapper } from "../styled.js";
 import { SkeletonTable } from "./SkeletonTable.js";
-import { useInternalStore, usePropsStore } from "../configs/useStore/useStore.js";
+import { VirtualRowsList } from "./VirtualRowsList.js";
 const TableContent = () => {
   const allDataFlattened = usePropsStore((state) => state.allDataFlattened);
   const visibleColumns = usePropsStore((state) => state.visibleColumns);

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, { useCallback } from 'react';\n\nimport { StyledTableWrapper, StyledDataTableContentWrapper, StyledPaginationWrapper } from '../styled.js';\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { SkeletonTable } from './SkeletonTable.js';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/useStore.js';\nexport const TableContent = () => {\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const { hasPagination } = usePropsStore((state) => state.paginationHelpers);\n  const isLoading = usePropsStore((state) => state.isLoading);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const height = usePropsStore((state) => state.height);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n  const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\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      getOwnerProps={getOwnerProps}\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        aria-busy={isLoading || isSkeleton}\n        getOwnerProps={getOwnerProps}\n      >\n        {isSkeleton ? <SkeletonTable height={height} /> : <VirtualRowsList />}\n      </StyledTableWrapper>\n      {hasPagination ? (\n        <StyledPaginationWrapper onFocus={() => setFocusedRowId(null)} getOwnerProps={getOwnerProps}>\n          <Pagination />\n        </StyledPaginationWrapper>\n      ) : null}\n    </StyledDataTableContentWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC+BnB,SAiBkB,KAjBlB;AA/BJ,SAAgB,mBAAmB;AAEnC,SAAS,oBAAoB,+BAA+B,+BAA+B;AAC3F,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,qBAAqB;AACzC,MAAM,eAAe,MAAM;AAChC,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,cAAc,IAAI,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,SAAS,cAAc,CAAC,UAAU,MAAM,MAAM;AACpD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,oBAAoB,iBAAiB,CAAC,UAAU,MAAM,iBAAiB;AAC7E,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,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,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,YAAY;AAAA,YACzB,aAAW,aAAa;AAAA,YACxB;AAAA,YAEC,uBAAa,oBAAC,iBAAc,QAAgB,IAAK,oBAAC,mBAAgB;AAAA;AAAA,QACrE;AAAA,QACC,gBACC,oBAAC,2BAAwB,SAAS,MAAM,gBAAgB,IAAI,GAAG,eAC7D,8BAAC,cAAW,GACd,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback } from 'react';\n\nimport { Pagination } from '../addons/Pagination/index.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { StyledDataTableContentWrapper, StyledPaginationWrapper, StyledTableWrapper } from '../styled.js';\nimport { SkeletonTable } from './SkeletonTable.js';\nimport { VirtualRowsList } from './VirtualRowsList.js';\n\nexport const TableContent = () => {\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const { hasPagination } = usePropsStore((state) => state.paginationHelpers);\n  const isLoading = usePropsStore((state) => state.isLoading);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const height = usePropsStore((state) => state.height);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const isShiftPressed = useInternalStore((state) => state.isShiftPressed);\n  const setIsShiftPressed = useInternalStore((state) => state.setIsShiftPressed);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\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      getOwnerProps={getOwnerProps}\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        aria-busy={isLoading || isSkeleton}\n        getOwnerProps={getOwnerProps}\n      >\n        {isSkeleton ? <SkeletonTable height={height} /> : <VirtualRowsList />}\n      </StyledTableWrapper>\n      {hasPagination ? (\n        <StyledPaginationWrapper onFocus={() => setFocusedRowId(null)} getOwnerProps={getOwnerProps}>\n          <Pagination />\n        </StyledPaginationWrapper>\n      ) : null}\n    </StyledDataTableContentWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCnB,SAiBkB,KAjBlB;AAhCJ,SAAgB,mBAAmB;AAEnC,SAAS,kBAAkB;AAC3B,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,+BAA+B,yBAAyB,0BAA0B;AAC3F,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;AAEzB,MAAM,eAAe,MAAM;AAChC,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,cAAc,IAAI,cAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,SAAS,cAAc,CAAC,UAAU,MAAM,MAAM;AACpD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,iBAAiB,iBAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,oBAAoB,iBAAiB,CAAC,UAAU,MAAM,iBAAiB;AAC7E,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,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,MACb;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,iBAAe,iBAAiB;AAAA,YAChC,iBAAe,eAAe;AAAA,YAC9B,eAAa,YAAY;AAAA,YACzB,aAAW,aAAa;AAAA,YACxB;AAAA,YAEC,uBAAa,oBAAC,iBAAc,QAAgB,IAAK,oBAAC,mBAAgB;AAAA;AAAA,QACrE;AAAA,QACC,gBACC,oBAAC,2BAAwB,SAAS,MAAM,gBAAgB,IAAI,GAAG,eAC7D,8BAAC,cAAW,GACd,IACE;AAAA;AAAA;AAAA,EACN;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 { useMemo, useCallback } from "react";
+import { useCallback, useMemo } from "react";
+import { useInternalStore, usePropsStore } from "../configs/useStore/createInternalAndPropsContext.js";
+import { DATA_TESTID } from "../configs/constants.js";
+import { StyledTableContentWrapper, StyledVirtualListWrapper } from "../styled.js";
 import { EmptyContent } from "./EmptyContent.js";
-import { RowsWithContext as Rows } from "./Rows.js";
 import { Headers } from "./Headers/index.js";
-import { StyledVirtualListWrapper, StyledTableContentWrapper } from "../styled.js";
 import { MemoizedLoader as Loader } from "./Loader.js";
-import { DATA_TESTID } from "../configs/constants.js";
-import { useInternalStore, usePropsStore } from "../configs/useStore/useStore.js";
+import { RowsWithContext as Rows } from "./Rows.js";
 const VirtualRowsList = () => {
   const isLoading = usePropsStore((state) => state.isLoading);
   const virtualListRef = usePropsStore((state) => state.virtualListRef);

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, { 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 { StyledVirtualListWrapper, StyledTableContentWrapper } from '../styled.js';\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/useStore.js';\n\nexport const VirtualRowsList = () => {\n  const isLoading = usePropsStore((state) => state.isLoading);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n  const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\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      innerRef={virtualListRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n      role=\"rowgroup\"\n      gridLayout={gridLayout}\n      totalColumnsWidth={totalColumnsWidth}\n      aria-busy={isLoading}\n      getOwnerProps={getOwnerProps}\n    >\n      <StyledTableContentWrapper\n        height={tableContentWrapperHeight}\n        rows={['min-content', 'auto']}\n        cols={['100%']}\n        getOwnerProps={getOwnerProps}\n      >\n        <Headers />\n        {isEmptyContent && <EmptyContent />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACkDjB,SAME,KANF;AAlDN,SAAgB,SAAS,mBAAmB;AAC5C,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB,YAAY;AACxC,SAAS,eAAe;AACxB,SAAS,0BAA0B,iCAAiC;AACpE,SAAS,kBAAkB,cAAc;AACzC,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB,qBAAqB;AAEzC,MAAM,kBAAkB,MAAM;AACnC,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,IAAI,cAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,IAAI,cAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,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,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,WAAQ;AAAA,YACR,kBAAkB,oBAAC,gBAAa;AAAA,YAChC,YAAY,oBAAC,UAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,oBAAC,QAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { useInternalStore, usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { StyledTableContentWrapper, StyledVirtualListWrapper } from '../styled.js';\nimport { EmptyContent } from './EmptyContent.js'; // imported this way to avoid circular dependencies\nimport { Headers } from './Headers/index.js'; // imported this way to avoid circular dependencies\nimport { MemoizedLoader as Loader } from './Loader.js';\nimport { RowsWithContext as Rows } from './Rows.js'; // imported this way to avoid circular dependencies\n\nexport const VirtualRowsList = () => {\n  const isLoading = usePropsStore((state) => state.isLoading);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n  const { totalColumnsWidth, gridLayout } = usePropsStore((state) => state.layoutHelpers);\n  const { totalSize, scrollToIndex } = usePropsStore((state) => state.virtualListHelpers);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\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      innerRef={virtualListRef}\n      data-testid={DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\n      onKeyDown={onKeyDown}\n      tabIndex={-1}\n      role=\"rowgroup\"\n      gridLayout={gridLayout}\n      totalColumnsWidth={totalColumnsWidth}\n      aria-busy={isLoading}\n      getOwnerProps={getOwnerProps}\n    >\n      <StyledTableContentWrapper\n        height={tableContentWrapperHeight}\n        rows={['min-content', 'auto']}\n        cols={['100%']}\n        getOwnerProps={getOwnerProps}\n      >\n        <Headers />\n        {isEmptyContent && <EmptyContent />}\n        {isLoading ? <Loader /> : null}\n        {!isLoading && !isEmptyContent && <Rows />}\n      </StyledTableContentWrapper>\n    </StyledVirtualListWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkDjB,SAME,KANF;AAlDN,SAAgB,aAAa,eAAe;AAC5C,SAAS,kBAAkB,qBAAqB;AAChD,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B,gCAAgC;AACpE,SAAS,oBAAoB;AAC7B,SAAS,eAAe;AACxB,SAAS,kBAAkB,cAAc;AACzC,SAAS,mBAAmB,YAAY;AAEjC,MAAM,kBAAkB,MAAM;AACnC,QAAM,YAAY,cAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,IAAI,cAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,IAAI,cAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,kBAAkB,iBAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,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,UAAU;AAAA,MACV,eAAa,YAAY;AAAA,MACzB;AAAA,MACA,UAAU;AAAA,MACV,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,QAAQ;AAAA,UACR,MAAM,CAAC,eAAe,MAAM;AAAA,UAC5B,MAAM,CAAC,MAAM;AAAA,UACb;AAAA,UAEA;AAAA,gCAAC,WAAQ;AAAA,YACR,kBAAkB,oBAAC,gBAAa;AAAA,YAChC,YAAY,oBAAC,UAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,oBAAC,QAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
   "names": []
 }

package/dist/types/DSDataTableDefinitions.d.ts

@@ -1,4 +1,4 @@
-export declare const DSDataTableName = "DSDataTable";
+export declare const DSDataTableName = "DSDatatable";
 export declare const DSDataTableSlots: {
     ROOT: string;
     CONTENT_WRAPPER: string;

package/dist/types/configs/useStore/createInternalAndPropsContext.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { type DSDataTableT } from '../../react-desc-prop-types.js';
+export declare const PropsProvider: ({ createStore, children, }: {
+    createStore: () => import("@elliemae/ds-zustand-helpers").ZustandT.ZustandStore<import("@elliemae/ds-zustand-helpers").ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>>;
+    children: import("react").ReactNode;
+}) => import("react").FunctionComponentElement<import("react").ProviderProps<import("@elliemae/ds-zustand-helpers").ZustandT.ZustandStore<import("@elliemae/ds-zustand-helpers").ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>> | undefined>>, usePropsStore: {
+    (): import("@elliemae/ds-zustand-helpers").ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>;
+    <U>(selector: (state: import("@elliemae/ds-zustand-helpers").ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>) => U, equalityFn?: ((a: U, b: U) => boolean) | undefined): U;
+}, InternalProvider: ({ createStore, children, }: {
+    createStore: () => import("@elliemae/ds-zustand-helpers").ZustandT.ZustandStore<import("@elliemae/ds-zustand-helpers").ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>>;
+    children: import("react").ReactNode;
+}) => import("react").FunctionComponentElement<import("react").ProviderProps<import("@elliemae/ds-zustand-helpers").ZustandT.ZustandStore<import("@elliemae/ds-zustand-helpers").ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>> | undefined>>, useInternalStore: {
+    (): import("@elliemae/ds-zustand-helpers").ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>;
+    <U_1>(selector: (state: import("@elliemae/ds-zustand-helpers").ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>) => U_1, equalityFn?: ((a: U_1, b: U_1) => boolean) | undefined): U_1;
+};

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

@@ -1 +1,2 @@
-export { PropsProvider, usePropsStore, InternalProvider, useInternalStore, useWholeStore, config } from './useStore.js';
+export { useWholeStore, config } from './useStore.js';
+export { PropsProvider, usePropsStore, InternalProvider, useInternalStore } from './createInternalAndPropsContext.js';

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

@@ -1,19 +1,6 @@
 /// <reference types="react" />
 import { type ZustandT } from '@elliemae/ds-zustand-helpers';
 import { type DSDataTableT } from '../../react-desc-prop-types.js';
-export declare const PropsProvider: ({ createStore, children, }: {
-    createStore: () => ZustandT.ZustandStore<ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>>;
-    children: import("react").ReactNode;
-}) => import("react").FunctionComponentElement<import("react").ProviderProps<ZustandT.ZustandStore<ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>> | undefined>>, usePropsStore: {
-    (): ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>;
-    <U>(selector: (state: ZustandT.PropsStore<DSDataTableT.DefaultProps & DSDataTableT.RequiredProps & DSDataTableT.OptionalProps & DSDataTableT.UseAutoCalculatedT>) => U, equalityFn?: ((a: U, b: U) => boolean) | undefined): U;
-}, InternalProvider: ({ createStore, children, }: {
-    createStore: () => ZustandT.ZustandStore<ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>>;
-    children: import("react").ReactNode;
-}) => import("react").FunctionComponentElement<import("react").ProviderProps<ZustandT.ZustandStore<ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>> | undefined>>, useInternalStore: {
-    (): ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>;
-    <U_1>(selector: (state: ZustandT.InternalStore<DSDataTableT.InternalAtoms, DSDataTableT.Selectors, DSDataTableT.Reducers>) => U_1, equalityFn?: ((a: U_1, b: U_1) => boolean) | undefined): U_1;
-};
 export declare const useWholeStore: () => DSDataTableT.Context;
 export declare const config: {
     defaultProps: () => DSDataTableT.InternalProps;

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

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { XstyledProps } from '@elliemae/ds-props-helpers';
+import React from 'react';
 import type { RowVariantProps } from '../../parts/RowVariants/types.js';
 import type { DSDataTableT } from '../../react-desc-prop-types.js';
 interface RowRendererProps {

package/dist/types/parts/Cells/useCellStyle.d.ts

@@ -1,3 +1,3 @@
 import { type CSSProperties } from 'react';
 import type { DSDataTableT } from '../../react-desc-prop-types.js';
-export declare const useCellStyle: (column: DSDataTableT.InternalColumn, shouldAddExpandCell: boolean, cellIsNextToExpander: boolean, row: DSDataTableT.InternalRow) => [string, CSSProperties];
+export declare const useCellStyle: (column: DSDataTableT.InternalColumn, shouldAddExpandCell: boolean, cellIsNextToExpander?: boolean, row?: DSDataTableT.InternalRow) => [string, CSSProperties];

package/dist/types/parts/Headers/index.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const Headers: React.ComponentType<JSX.IntrinsicAttributes>;
+export declare const Headers: React.ComponentType<React.JSX.IntrinsicAttributes>;

package/dist/types/parts/HoC/DnDGroupContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DnDGroupContextType } from './withConditionalDnDColumnContext.js';
+export declare const DnDGroupContext: import("react").Context<DnDGroupContextType>;

package/dist/types/parts/HoC/withConditionalDnDColumnContext.d.ts

@@ -1,8 +1,5 @@
-import React from 'react';
 import type { FunctionalHOC } from '../../types/FunctionalHoC.js';
-type DnDGroupContextType = {
+export type DnDGroupContextType = {
     activeIndex: number | null;
 };
-export declare const DnDGroupContext: React.Context<DnDGroupContextType>;
 export declare const withConditionalDnDColumnContext: FunctionalHOC;
-export {};

package/dist/types/parts/HoC/withConditionalDnDSortableContext.d.ts

@@ -4,5 +4,5 @@ interface Props {
     items: DSDataTableT.InternalColumn[];
     isDragOverlay: boolean;
 }
-export declare const withConditionalDnDSortableContext: <T>(Component: React.ComponentType<T>) => (props: T & JSX.IntrinsicAttributes & Props) => import("react/jsx-runtime.js").JSX.Element;
+export declare const withConditionalDnDSortableContext: <T>(Component: React.ComponentType<T>) => (props: T & React.JSX.IntrinsicAttributes & Props) => import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/types/parts/Loader.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const MemoizedLoader: React.MemoExoticComponent<() => import("react/jsx-runtime.js").JSX.Element>;
+/// <reference types="react" />
+export declare const MemoizedLoader: import("react").MemoExoticComponent<() => import("react/jsx-runtime.js").JSX.Element>;

package/dist/types/parts/MainContent.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const MainContent: () => JSX.Element;

package/dist/types/parts/Rows.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const RowsWithContext: React.ComponentType<JSX.IntrinsicAttributes>;
+export declare const RowsWithContext: React.ComponentType<React.JSX.IntrinsicAttributes>;

package/dist/types/parts/SortableHeaderCell.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DSDataTableT } from '../react-desc-prop-types.js';
 export declare const SortableHeaderCell: ({ items, isDragOverlay, isGroup, colId, ...rest }: {
     items: DSDataTableT.InternalColumn[];

package/dist/types/types/FunctionalHoC.d.ts

@@ -1,2 +1,2 @@
 import type React from 'react';
-export type FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => React.ComponentType<T & JSX.IntrinsicAttributes>;
+export type FunctionalHOC = <T = unknown>(Component: React.ComponentType<T>, ...other: unknown[]) => React.ComponentType<T & React.JSX.IntrinsicAttributes>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "3.50.1-next.8",
+  "version": "3.51.0-beta.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "files": [
@@ -25,8 +25,8 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "pnpm": ">=6",
-    "node": ">=16"
+    "pnpm": ">=9",
+    "node": ">=22"
   },
   "author": "ICE MT",
   "jestSonar": {
@@ -39,44 +39,44 @@
     "react-virtual": "~2.10.4",
     "uid": "~2.0.1",
     "use-onclickoutside": "0.4.1",
-    "@elliemae/ds-button": "3.50.1-next.8",
-    "@elliemae/ds-button-v2": "3.50.1-next.8",
-    "@elliemae/ds-drag-and-drop": "3.50.1-next.8",
-    "@elliemae/ds-circular-progress-indicator": "3.50.1-next.8",
-    "@elliemae/ds-dropdownmenu": "3.50.1-next.8",
-    "@elliemae/ds-form-checkbox": "3.50.1-next.8",
-    "@elliemae/ds-form-combobox": "3.50.1-next.8",
-    "@elliemae/ds-dropdownmenu-v2": "3.50.1-next.8",
-    "@elliemae/ds-form-date-range-picker": "3.50.1-next.8",
-    "@elliemae/ds-form-date-time-picker": "3.50.1-next.8",
-    "@elliemae/ds-form-helpers-mask-hooks": "3.50.1-next.8",
-    "@elliemae/ds-form-input-text": "3.50.1-next.8",
-    "@elliemae/ds-form-layout-blocks": "3.50.1-next.8",
-    "@elliemae/ds-grid": "3.50.1-next.8",
-    "@elliemae/ds-form-radio": "3.50.1-next.8",
-    "@elliemae/ds-pagination": "3.50.1-next.8",
-    "@elliemae/ds-icons": "3.50.1-next.8",
-    "@elliemae/ds-pills-v2": "3.50.1-next.8",
-    "@elliemae/ds-popperjs": "3.50.1-next.8",
-    "@elliemae/ds-props-helpers": "3.50.1-next.8",
-    "@elliemae/ds-skeleton": "3.50.1-next.8",
-    "@elliemae/ds-system": "3.50.1-next.8",
-    "@elliemae/ds-truncated-tooltip-text": "3.50.1-next.8",
-    "@elliemae/ds-typescript-helpers": "3.50.1-next.8",
-    "@elliemae/ds-zustand-helpers": "3.50.1-next.8"
+    "@elliemae/ds-button-v2": "3.51.0-beta.1",
+    "@elliemae/ds-circular-progress-indicator": "3.51.0-beta.1",
+    "@elliemae/ds-drag-and-drop": "3.51.0-beta.1",
+    "@elliemae/ds-dropdownmenu": "3.51.0-beta.1",
+    "@elliemae/ds-dropdownmenu-v2": "3.51.0-beta.1",
+    "@elliemae/ds-form-combobox": "3.51.0-beta.1",
+    "@elliemae/ds-form-checkbox": "3.51.0-beta.1",
+    "@elliemae/ds-form-date-time-picker": "3.51.0-beta.1",
+    "@elliemae/ds-form-helpers-mask-hooks": "3.51.0-beta.1",
+    "@elliemae/ds-form-input-text": "3.51.0-beta.1",
+    "@elliemae/ds-form-date-range-picker": "3.51.0-beta.1",
+    "@elliemae/ds-form-layout-blocks": "3.51.0-beta.1",
+    "@elliemae/ds-form-radio": "3.51.0-beta.1",
+    "@elliemae/ds-pagination": "3.51.0-beta.1",
+    "@elliemae/ds-grid": "3.51.0-beta.1",
+    "@elliemae/ds-icons": "3.51.0-beta.1",
+    "@elliemae/ds-pills-v2": "3.51.0-beta.1",
+    "@elliemae/ds-props-helpers": "3.51.0-beta.1",
+    "@elliemae/ds-skeleton": "3.51.0-beta.1",
+    "@elliemae/ds-system": "3.51.0-beta.1",
+    "@elliemae/ds-truncated-tooltip-text": "3.51.0-beta.1",
+    "@elliemae/ds-typescript-helpers": "3.51.0-beta.1",
+    "@elliemae/ds-popperjs": "3.51.0-beta.1",
+    "@elliemae/ds-zustand-helpers": "3.51.0-beta.1",
+    "@elliemae/ds-button": "3.51.0-beta.1"
   },
   "devDependencies": {
-    "@elliemae/pui-cli": "9.0.0-next.31",
+    "@elliemae/pui-cli": "9.0.0-next.55",
     "jest": "~29.7.0",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5",
-    "@elliemae/ds-monorepo-devops": "3.50.1-next.8",
-    "@elliemae/ds-toolbar-v2": "3.50.1-next.8"
+    "@elliemae/ds-monorepo-devops": "3.51.0-beta.1",
+    "@elliemae/ds-toolbar-v2": "3.51.0-beta.1"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "styled-components": "~5.3.9",
     "styled-system": "^5.1.5"
   },