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

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

@@ -33,13 +33,13 @@ __export(withDnDSortableRowContext_exports, {
 module.exports = __toCommonJS(withDnDSortableRowContext_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
+var import_react = require("react");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_DnDTreeContext = require("./DnDTreeContext.js");
 var import_SortableItemContext = require("./SortableItemContext.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
 const withDnDSortableRowContext = (Component) => function(props) {
-  const dragAndDropRows = (0, import_useStore.usePropsStore)((state) => state.dragAndDropRows);
+  const dragAndDropRows = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropRows);
   const { dropIndicatorPosition, isDropValid } = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
   const draggableOptions = (0, import_react.useMemo)(
     () => ({

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withDnDSortableRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nexport const withDnDSortableRowContext = <T extends { row: DSDataTableT.InternalRow }>(\n  Component: React.ComponentType<T>,\n) =>\n  function (props: T) {\n    const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n    const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.row.uid,\n      }),\n      [props.row],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropRows) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index,\n        dropIndicatorPosition,\n        isDropValid,\n      };\n    }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, isDropValid]);\n\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmDf;AAnDR,mBAA2C;AAC3C,8BAA4B;AAC5B,4BAA+B;AAE/B,iCAAoC;AAEpC,sBAA8B;AAEvB,MAAM,4BAA4B,CACvC,cAEA,SAAU,OAAU;AAClB,QAAM,sBAAkB,+BAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,EAAE,uBAAuB,YAAY,QAAI,yBAAW,oCAAc;AAGxE,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,IAAI;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,GAAG;AAAA,EACZ;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,CAAC,gBAAiB,QAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,uBAAuB,WAAW,CAAC;AAK5E,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
+  "sourcesContent": ["/* eslint-disable func-names */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useMemo } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\n\nexport const withDnDSortableRowContext = <T extends { row: DSDataTableT.InternalRow }>(\n  Component: React.ComponentType<T>,\n) =>\n  function (props: T) {\n    const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n    const { dropIndicatorPosition, isDropValid } = useContext(DnDTreeContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.row.uid,\n      }),\n      [props.row],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps = useMemo(() => {\n      if (!dragAndDropRows) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index,\n        dropIndicatorPosition,\n        isDropValid,\n      };\n    }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, isDropValid]);\n\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDf;AAnDR,8BAA4B;AAC5B,mBAA2C;AAC3C,2CAA8B;AAE9B,4BAA+B;AAE/B,iCAAoC;AAE7B,MAAM,4BAA4B,CACvC,cAEA,SAAU,OAAU;AAClB,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,EAAE,uBAAuB,YAAY,QAAI,yBAAW,oCAAc;AAGxE,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,IAAI;AAAA,IAChB;AAAA,IACA,CAAC,MAAM,GAAG;AAAA,EACZ;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAAiB,sBAAQ,MAAM;AACnC,QAAI,CAAC,gBAAiB,QAAO;AAE7B,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc;AAAA,MAC/C;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,iBAAiB,oBAAoB,uBAAuB,WAAW,CAAC;AAK5E,QAAM,UAA+B;AAAA,IACnC,OAAO;AAAA,MACL;AAAA,IACF;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE,4CAAC,+CAAoB,UAApB,EAA6B,OAAO,KACnC,sDAAC,aAAW,GAAG,OAAO,GACxB;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Loader.js

@@ -33,19 +33,19 @@ __export(Loader_exports, {
 module.exports = __toCommonJS(Loader_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_circular_progress_indicator = require("@elliemae/ds-circular-progress-indicator");
+var import_ds_grid = require("@elliemae/ds-grid");
 var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
 var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
-var import_useStore = require("../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
 const StyledLoaderWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.LOADER_WRAPPER })`
   place-items: center;
   z-index: 0;
   background-color: white;
 `;
 const Loader = () => {
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledLoaderWrapper, { role: "row", "aria-live": "polite", getOwnerProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { role: "cell", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_circular_progress_indicator.DSCircularProgressIndicator, { size: "xl", loading: true, showLabel: true, waiting: false, showTooltip: false }) }) });
 };
 const MemoizedLoader = (0, import_react.memo)(Loader);

package/dist/cjs/parts/Loader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Loader.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { memo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { styled } from '@elliemae/ds-system';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.LOADER_WRAPPER })`\n  place-items: center;\n  z-index: 0;\n  background-color: white;\n`;\n\n/**\n * we need to keep the semantic table structure\n * @returns Loader\n */\nconst Loader = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  return (\n    <StyledLoaderWrapper role=\"row\" aria-live=\"polite\" getOwnerProps={getOwnerProps}>\n      <div role=\"cell\">\n        <DSCircularProgressIndicator size=\"xl\" loading showLabel waiting={false} showTooltip={false} />\n      </div>\n    </StyledLoaderWrapper>\n  );\n};\nexport const MemoizedLoader = memo(Loader);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBf;AAtBR,mBAA4B;AAC5B,qBAAqB;AACrB,4CAA4C;AAC5C,uBAAuB;AACvB,oCAAkD;AAClD,sBAA8B;AAE9B,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAUzG,MAAM,SAAS,MAAM;AACnB,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SACE,4CAAC,uBAAoB,MAAK,OAAM,aAAU,UAAS,eACjD,sDAAC,SAAI,MAAK,QACR,sDAAC,qEAA4B,MAAK,MAAK,SAAO,MAAC,WAAS,MAAC,SAAS,OAAO,aAAa,OAAO,GAC/F,GACF;AAEJ;AACO,MAAM,qBAAiB,mBAAK,MAAM;",
+  "sourcesContent": ["import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { Grid } from '@elliemae/ds-grid';\nimport { styled } from '@elliemae/ds-system';\nimport { memo } from 'react';\nimport { DSDataTableName, DSDataTableSlots } from '../DSDataTableDefinitions.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\n\nconst StyledLoaderWrapper = styled(Grid, { name: DSDataTableName, slot: DSDataTableSlots.LOADER_WRAPPER })`\n  place-items: center;\n  z-index: 0;\n  background-color: white;\n`;\n\n/**\n * we need to keep the semantic table structure\n * @returns Loader\n */\nconst Loader = () => {\n  const getOwnerProps = usePropsStore((store) => store.get);\n  return (\n    <StyledLoaderWrapper role=\"row\" aria-live=\"polite\" getOwnerProps={getOwnerProps}>\n      <div role=\"cell\">\n        <DSCircularProgressIndicator size=\"xl\" loading showLabel waiting={false} showTooltip={false} />\n      </div>\n    </StyledLoaderWrapper>\n  );\n};\nexport const MemoizedLoader = memo(Loader);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsBf;AAtBR,4CAA4C;AAC5C,qBAAqB;AACrB,uBAAuB;AACvB,mBAAqB;AACrB,oCAAkD;AAClD,2CAA8B;AAE9B,MAAM,0BAAsB,yBAAO,qBAAM,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAUzG,MAAM,SAAS,MAAM;AACnB,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,SACE,4CAAC,uBAAoB,MAAK,OAAM,aAAU,UAAS,eACjD,sDAAC,SAAI,MAAK,QACR,sDAAC,qEAA4B,MAAK,MAAK,SAAO,MAAC,WAAS,MAAC,SAAS,OAAO,aAAa,OAAO,GAC/F,GACF;AAEJ;AACO,MAAM,qBAAiB,mBAAK,MAAM;",
   "names": []
 }

package/dist/cjs/parts/MainContent.js

@@ -37,12 +37,12 @@ var import_TableContent = require("./TableContent.js");
 var import_constants = require("../configs/constants.js");
 var import_FiltersBar = require("./FilterBar/FiltersBar.js");
 var import_styled = require("../styled.js");
-var import_useStore = require("../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
 const MainContent = () => {
-  const height = (0, import_useStore.usePropsStore)((state) => state.height);
-  const width = (0, import_useStore.usePropsStore)((state) => state.width);
-  const withFilterBar = (0, import_useStore.usePropsStore)((state) => state.withFilterBar);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const height = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.height);
+  const width = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.width);
+  const withFilterBar = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.withFilterBar);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_styled.StyledDataTableWrapper,
     {

package/dist/cjs/parts/MainContent.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MainContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { TableContent } from './TableContent.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { FiltersBar } from './FilterBar/FiltersBar.js';\nimport { StyledDataTableWrapper } from '../styled.js';\nimport { usePropsStore } from '../configs/useStore/useStore.js';\n\nexport const MainContent = (): JSX.Element => {\n  const height = usePropsStore((state) => state.height);\n  const width = usePropsStore((state) => state.width);\n  const withFilterBar = usePropsStore((state) => state.withFilterBar);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  return (\n    <StyledDataTableWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n      height={height}\n      width={width}\n      cols={['100%']}\n      rows={withFilterBar ? ['auto', '1fr'] : ['1fr']}\n      getOwnerProps={getOwnerProps}\n    >\n      {withFilterBar ? <FiltersBar /> : null}\n      <TableContent />\n    </StyledDataTableWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAbJ,0BAA6B;AAC7B,uBAA4B;AAC5B,wBAA2B;AAC3B,oBAAuC;AACvC,sBAA8B;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM,aAAS,+BAAc,CAAC,UAAU,MAAM,MAAM;AACpD,QAAM,YAAQ,+BAAc,CAAC,UAAU,MAAM,KAAK;AAClD,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,MAAM,gBAAgB,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;AAAA,MAC9C;AAAA,MAEC;AAAA,wBAAgB,4CAAC,gCAAW,IAAK;AAAA,QAClC,4CAAC,oCAAa;AAAA;AAAA;AAAA,EAChB;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { TableContent } from './TableContent.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nimport { FiltersBar } from './FilterBar/FiltersBar.js';\nimport { StyledDataTableWrapper } from '../styled.js';\nimport { usePropsStore } from '../configs/useStore/createInternalAndPropsContext.js';\n\nexport const MainContent = (): JSX.Element => {\n  const height = usePropsStore((state) => state.height);\n  const width = usePropsStore((state) => state.width);\n  const withFilterBar = usePropsStore((state) => state.withFilterBar);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  return (\n    <StyledDataTableWrapper\n      data-testid={DATA_TESTID.DATA_TABLE_WRAPPER}\n      height={height}\n      width={width}\n      cols={['100%']}\n      rows={withFilterBar ? ['auto', '1fr'] : ['1fr']}\n      getOwnerProps={getOwnerProps}\n    >\n      {withFilterBar ? <FiltersBar /> : null}\n      <TableContent />\n    </StyledDataTableWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcnB;AAbJ,0BAA6B;AAC7B,uBAA4B;AAC5B,wBAA2B;AAC3B,oBAAuC;AACvC,2CAA8B;AAEvB,MAAM,cAAc,MAAmB;AAC5C,QAAM,aAAS,oDAAc,CAAC,UAAU,MAAM,MAAM;AACpD,QAAM,YAAQ,oDAAc,CAAC,UAAU,MAAM,KAAK;AAClD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;AAAA,MACzB;AAAA,MACA;AAAA,MACA,MAAM,CAAC,MAAM;AAAA,MACb,MAAM,gBAAgB,CAAC,QAAQ,KAAK,IAAI,CAAC,KAAK;AAAA,MAC9C;AAAA,MAEC;AAAA,wBAAgB,4CAAC,gCAAW,IAAK;AAAA,QAClC,4CAAC,oCAAa;AAAA;AAAA;AAAA,EAChB;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Row.js

@@ -34,23 +34,23 @@ __export(Row_exports, {
 module.exports = __toCommonJS(Row_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_ds_system = require("@elliemae/ds-system");
+var import_react = require("react");
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
+var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
 var import_SortableItemContext = require("./HoC/SortableItemContext.js");
 var import_withDnDSortableRowContext = require("./HoC/withDnDSortableRowContext.js");
 var import_RowVariants = require("./RowVariants/index.js");
-var import_useStore = require("../configs/useStore/useStore.js");
-var import_DSDataTableDefinitions = require("../DSDataTableDefinitions.js");
 const StyledRow = (0, import_ds_system.styled)("div", { name: import_DSDataTableDefinitions.DSDataTableName, slot: import_DSDataTableDefinitions.DSDataTableSlots.ROW })`
   cursor: ${({ isDisabled }) => isDisabled ? "not-allowed" : "normal"};
 `;
 const Row = (props) => {
   const { row, measureRef, itemWrapperStyle, isDragOverlay } = props;
-  const disabledRows = (0, import_useStore.usePropsStore)((state) => state.disabledRows);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const disabledRows = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.disabledRows);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   const getOwnerPropsArguments = (0, import_react.useCallback)(() => row, [row]);
-  const focusedRowId = (0, import_useStore.useInternalStore)((state) => state.focusedRowId);
-  const drilldownRowId = (0, import_useStore.useInternalStore)((state) => state.drilldownRowId);
+  const focusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.focusedRowId);
+  const drilldownRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.drilldownRowId);
   const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
   const draggableRef = draggableProps && draggableProps.setNodeRef;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Row.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCjB;AApCN,mBAA+C;AAC/C,uBAAkC;AAClC,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAElC,sBAAgD;AAChD,oCAAkD;AAElD,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,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,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AAC3D,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,qBAAiB,kCAAiB,CAAC,UAAU,MAAM,cAAc;AAEvE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;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,cAAU,4BAAU,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,qBAAiB,4DAA0B,GAAG;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoCjB;AApCN,uBAAkC;AAClC,mBAA+C;AAC/C,2CAAgD;AAChD,oCAAkD;AAElD,iCAAoC;AACpC,uCAA0C;AAC1C,yBAAkC;AAElC,MAAM,gBAAY,yBAAO,OAAO,EAAE,MAAM,+CAAiB,MAAM,+CAAiB,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,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB,0BAAY,MAAM,KAAK,CAAC,GAAG,CAAC;AAC3D,QAAM,mBAAe,uDAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,qBAAiB,uDAAiB,CAAC,UAAU,MAAM,cAAc;AAEvE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;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,cAAU,4BAAU,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,qBAAiB,4DAA0B,GAAG;",
   "names": []
 }

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

@@ -34,16 +34,16 @@ module.exports = __toCommonJS(RowVariantHeader_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_RowRenderer = require("../../exported-related/RowRenderer/index.js");
-var import_styled = require("../../styled.js");
 var import_Columns = require("../../addons/Columns/index.js");
 var import_constants = require("../../configs/constants.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
+var import_RowRenderer = require("../../exported-related/RowRenderer/index.js");
+var import_styled = require("../../styled.js");
 const RowContent = (props) => {
   const { row, backgroundColor = "neutral-000", focusedRowId, drilldownRowId } = props;
-  const groupedRowsRenderHeader = (0, import_useStore.usePropsStore)((state) => state.groupedRowsRenderHeader);
-  const disabledRows = (0, import_useStore.usePropsStore)((state) => state.disabledRows);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const groupedRowsRenderHeader = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.groupedRowsRenderHeader);
+  const disabledRows = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.disabledRows);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   const rowRef = (0, import_react.useRef)(null);
   const hasExpandCell = (0, import_react.useMemo)(
     () => row.original.subRows && row.cells.find((cell) => cell.column.accessor === "expandRowColumn"),
@@ -83,7 +83,8 @@ const RowContent = (props) => {
           role: "cell",
           getOwnerProps,
           children: [
-            hasExpandCell && import_Columns.expandRowColumn.Cell && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            hasExpandCell && import_Columns.expandRowColumn.Cell && // @ts-expect-error - typescript for data-table is basically broken
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_Columns.expandRowColumn.Cell,
               {
                 row,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/RowVariants/RowVariantHeader.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDjB;AAlDN,mBAAwD;AACxD,yBAA4B;AAC5B,oBAA4E;AAE5E,qBAAgC;AAChC,uBAA4B;AAE5B,sBAA8B;AAE9B,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM,EAAE,KAAK,kBAAkB,eAAe,cAAc,eAAe,IAAI;AAE/E,QAAM,8BAA0B,+BAAc,CAAC,UAAU,MAAM,uBAAuB;AACtF,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,aAAS,qBAAuB,IAAI;AAE1C,QAAM,oBAAgB;AAAA,IACpB,MAAM,IAAI,SAAS,WAAW,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,aAAa,iBAAiB;AAAA,IACjG,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,mBAAe,sBAAQ,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,oCAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,iBAAa,sBAAQ,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,6BAAY;AAAA,MACzB,qBAAoB;AAAA,MACpB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,6BAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UACrC,MAAK;AAAA,UACL;AAAA,UAEC;AAAA,6BAAiB,+BAAgB,QAChC;AAAA,cAAC,+BAAgB;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,4CAAC,kCAAiB,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 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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDjB;AAlDN,mBAAwD;AACxD,qBAAgC;AAChC,uBAA4B;AAC5B,2CAA8B;AAC9B,yBAA4B;AAE5B,oBAA4E;AAG5E,MAAM,aAAmD,CAAC,UAAU;AAClE,QAAM,EAAE,KAAK,kBAAkB,eAAe,cAAc,eAAe,IAAI;AAE/E,QAAM,8BAA0B,oDAAc,CAAC,UAAU,MAAM,uBAAuB;AACtF,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,aAAS,qBAAuB,IAAI;AAE1C,QAAM,oBAAgB;AAAA,IACpB,MAAM,IAAI,SAAS,WAAW,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,OAAO,aAAa,iBAAiB;AAAA,IACjG,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,mBAAe,sBAAQ,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,oCAAgB,MAAM;AACpB,QAAI,IAAI,QAAQ,cAAc;AAC5B,aAAO,SAAS,MAAM;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,cAAc,IAAI,GAAG,CAAC;AAE1B,QAAM,iBAAa,sBAAQ,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,6BAAY;AAAA,MACzB,qBAAoB;AAAA,MACpB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,eAAa,6BAAY;AAAA,UACzB,MAAM,gBAAgB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AAAA,UACvD,aAAa,gBAAgB,QAAQ;AAAA,UACrC,MAAK;AAAA,UACL;AAAA,UAEC;AAAA,6BAAiB,+BAAgB;AAAA,YAEhC;AAAA,cAAC,+BAAgB;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,4CAAC,kCAAiB,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/cjs/parts/RowVariants/index.js

@@ -33,13 +33,13 @@ __export(RowVariants_exports, {
 module.exports = __toCommonJS(RowVariants_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_exported_related = require("../../exported-related/index.js");
 var import_Cells = require("../Cells/index.js");
 var import_RowVariantHeader = require("./RowVariantHeader.js");
 var import_RowVariantPrimary = require("./RowVariantPrimary.js");
 var import_RowVariantSecondary = require("./RowVariantSecondary.js");
 var import_RowVariantSkeleton = require("./RowVariantSkeleton.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
 const RowVariantMapper = {
   [import_exported_related.ROW_VARIANTS.HEADER_GROUP]: import_RowVariantHeader.RowVariantHeader,
   [import_exported_related.ROW_VARIANTS.PRIMARY]: import_RowVariantPrimary.RowVariantPrimary,
@@ -50,7 +50,7 @@ const RowVariantMapper = {
 };
 const RowVariantMapItem = (props) => {
   const { row } = props;
-  const getRowVariant = (0, import_useStore.usePropsStore)((state) => state.getRowVariant);
+  const getRowVariant = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.getRowVariant);
   const variant = getRowVariant(row, import_Cells.Cells);
   let Component;
   if (typeof variant === "string") {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/RowVariants/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcsB;AAb7C,8BAA6B;AAE7B,mBAAsB;AACtB,8BAAiC;AACjC,+BAAkC;AAClC,iCAAoC;AACpC,gCAAmC;AACnC,sBAA8B;AAE9B,MAAM,mBAAsF;AAAA,EAC1F,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,OAAO,GAAG;AAAA,EACxB,CAAC,qCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,qCAAa,eAAe,GAAG,CAAC,UAAU,4CAAC,8CAAkB,SAAO,MAAE,GAAG,OAAO;AAAA,EACjF,CAAC,qCAAa,iBAAiB,GAAG,CAAC,UAAU,4CAAC,kDAAoB,SAAO,MAAE,GAAG,OAAO;AAAA,EACrF,CAAC,qCAAa,QAAQ,GAAG;AAC3B;AAEO,MAAM,oBAAuE,CAAC,UAAU;AAC7F,QAAM,EAAE,IAAI,IAAI;AAEhB,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,UAAU,cAAc,KAAK,kBAAK;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,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADcsB;AAb7C,2CAA8B;AAC9B,8BAA6B;AAE7B,mBAAsB;AACtB,8BAAiC;AACjC,+BAAkC;AAClC,iCAAoC;AACpC,gCAAmC;AAEnC,MAAM,mBAAsF;AAAA,EAC1F,CAAC,qCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,qCAAa,OAAO,GAAG;AAAA,EACxB,CAAC,qCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,qCAAa,eAAe,GAAG,CAAC,UAAU,4CAAC,8CAAkB,SAAO,MAAE,GAAG,OAAO;AAAA,EACjF,CAAC,qCAAa,iBAAiB,GAAG,CAAC,UAAU,4CAAC,kDAAoB,SAAO,MAAE,GAAG,OAAO;AAAA,EACrF,CAAC,qCAAa,QAAQ,GAAG;AAC3B;AAEO,MAAM,oBAAuE,CAAC,UAAU;AAC7F,QAAM,EAAE,IAAI,IAAI;AAEhB,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,UAAU,cAAc,KAAK,kBAAK;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,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/cjs/parts/Rows.js

@@ -34,16 +34,17 @@ module.exports = __toCommonJS(Rows_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_Row = require("./Row.js");
-var import_withConditionalDnDRowContext = require("./HoC/withConditionalDnDRowContext.js");
-var import_DnDTreeContext = require("./HoC/DnDTreeContext.js");
+var import_react2 = require("react");
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
 var import_helpers = require("../helpers/index.js");
-var import_useStore = require("../configs/useStore/useStore.js");
+var import_DnDTreeContext = require("./HoC/DnDTreeContext.js");
+var import_withConditionalDnDRowContext = require("./HoC/withConditionalDnDRowContext.js");
+var import_Row = require("./Row.js");
 const Rows = () => {
-  const { virtualItems } = (0, import_useStore.usePropsStore)((state) => state.virtualListHelpers);
-  const flattenedData = (0, import_useStore.usePropsStore)((state) => state.flattenedData);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const ctx = (0, import_react.useContext)(import_DnDTreeContext.DnDTreeContext);
+  const { virtualItems } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListHelpers);
+  const flattenedData = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.flattenedData);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const ctx = (0, import_react2.useContext)(import_DnDTreeContext.DnDTreeContext);
   const items = ctx?.visibleItems || flattenedData;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: virtualItems.map((virtualItem) => {
     const { index, measureRef, start } = virtualItem;
@@ -57,7 +58,6 @@ const Rows = () => {
       width: "100%"
     };
     const rowProps = {
-      key: `ds-table-row-${row.uid}`,
       row,
       measureRef,
       index,
@@ -66,7 +66,7 @@ const Rows = () => {
       itemWrapperStyle: style,
       isDragOverlay: false
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.RowWithContext, { ...rowProps });
+    return /* @__PURE__ */ (0, import_react.createElement)(import_Row.RowWithContext, { ...rowProps, key: `ds-table-row-${row.uid}` });
   }) });
 };
 Rows.propTypes = {};

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Rows.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAjBJ,mBAAkC;AAClC,iBAAsC;AACtC,0CAA6C;AAC7C,4BAA+B;AAC/B,qBAA4B;AAC5B,sBAA8B;AAE9B,MAAM,OAAO,MAAmB;AAC9B,QAAM,EAAE,aAAa,QAAI,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC1E,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,UAAM,yBAAW,oCAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,2EACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM,KAAK;AACvB,QAAI,CAAC,IAAK,QAAO;AACjB,oCAAY,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,4CAAC,WAAAA,gBAAA,EAAK,GAAG,UAAU;AAAA,EAC5B,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,sBAAkB,kEAA6B,IAAI;",
-  "names": ["Row"]
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBnB;AAoBW;AArCf,IAAAA,gBAAkC;AAClC,2CAA8B;AAC9B,qBAA4B;AAC5B,4BAA+B;AAC/B,0CAA6C;AAC7C,iBAAsC;AAEtC,MAAM,OAAO,MAAmB;AAC9B,QAAM,EAAE,aAAa,QAAI,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC1E,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,UAAM,0BAAW,oCAAc;AAErC,QAAM,QAAQ,KAAK,gBAAgB;AAEnC,SACE,2EACG,uBAAa,IAAI,CAAC,gBAAgB;AACjC,UAAM,EAAE,OAAO,YAAY,MAAM,IAAI;AACrC,UAAM,MAAM,MAAM,KAAK;AACvB,QAAI,CAAC,IAAK,QAAO;AACjB,oCAAY,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,gDAAC,WAAAC,gBAAA,EAAK,GAAG,UAAU,KAAK,gBAAgB,IAAI,GAAG,IAAI;AAAA,EAC5D,CAAC,GACH;AAEJ;AAEA,KAAK,YAAY,CAAC;AAEX,MAAM,sBAAkB,kEAA6B,IAAI;",
+  "names": ["import_react", "Row"]
 }

package/dist/cjs/parts/TableContent.js

@@ -34,23 +34,23 @@ module.exports = __toCommonJS(TableContent_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_styled = require("../styled.js");
 var import_Pagination = require("../addons/Pagination/index.js");
-var import_VirtualRowsList = require("./VirtualRowsList.js");
 var import_constants = require("../configs/constants.js");
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
+var import_styled = require("../styled.js");
 var import_SkeletonTable = require("./SkeletonTable.js");
-var import_useStore = require("../configs/useStore/useStore.js");
+var import_VirtualRowsList = require("./VirtualRowsList.js");
 const TableContent = () => {
-  const allDataFlattened = (0, import_useStore.usePropsStore)((state) => state.allDataFlattened);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const { hasPagination } = (0, import_useStore.usePropsStore)((state) => state.paginationHelpers);
-  const isLoading = (0, import_useStore.usePropsStore)((state) => state.isLoading);
-  const isSkeleton = (0, import_useStore.usePropsStore)((state) => state.isSkeleton);
-  const height = (0, import_useStore.usePropsStore)((state) => state.height);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
-  const isShiftPressed = (0, import_useStore.useInternalStore)((state) => state.isShiftPressed);
-  const setIsShiftPressed = (0, import_useStore.useInternalStore)((state) => state.setIsShiftPressed);
-  const setFocusedRowId = (0, import_useStore.useInternalStore)((state) => state.setFocusedRowId);
+  const allDataFlattened = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.allDataFlattened);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const { hasPagination } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.paginationHelpers);
+  const isLoading = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isLoading);
+  const isSkeleton = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isSkeleton);
+  const height = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.height);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const isShiftPressed = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.isShiftPressed);
+  const setIsShiftPressed = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setIsShiftPressed);
+  const setFocusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setFocusedRowId);
   const handleOnKeyDown = (0, import_react.useCallback)(
     (e) => {
       setIsShiftPressed(e.shiftKey);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/TableContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AAEnC,oBAA2F;AAC3F,wBAA2B;AAC3B,6BAAgC;AAChC,uBAA4B;AAC5B,2BAA8B;AAC9B,sBAAgD;AACzC,MAAM,eAAe,MAAM;AAChC,QAAM,uBAAmB,+BAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,cAAc,QAAI,+BAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAY,+BAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,iBAAa,+BAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,aAAS,+BAAc,CAAC,UAAU,MAAM,MAAM;AACpD,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,qBAAiB,kCAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,wBAAoB,kCAAiB,CAAC,UAAU,MAAM,iBAAiB;AAC7E,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;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,6BAAY;AAAA,YACzB,aAAW,aAAa;AAAA,YACxB;AAAA,YAEC,uBAAa,4CAAC,sCAAc,QAAgB,IAAK,4CAAC,0CAAgB;AAAA;AAAA,QACrE;AAAA,QACC,gBACC,4CAAC,yCAAwB,SAAS,MAAM,gBAAgB,IAAI,GAAG,eAC7D,sDAAC,gCAAW,GACd,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgCnB;AAhCJ,mBAAmC;AAEnC,wBAA2B;AAC3B,uBAA4B;AAC5B,2CAAgD;AAChD,oBAA2F;AAC3F,2BAA8B;AAC9B,6BAAgC;AAEzB,MAAM,eAAe,MAAM;AAChC,QAAM,uBAAmB,oDAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,cAAc,QAAI,oDAAc,CAAC,UAAU,MAAM,iBAAiB;AAC1E,QAAM,gBAAY,oDAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,aAAS,oDAAc,CAAC,UAAU,MAAM,MAAM;AACpD,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,qBAAiB,uDAAiB,CAAC,UAAU,MAAM,cAAc;AACvE,QAAM,wBAAoB,uDAAiB,CAAC,UAAU,MAAM,iBAAiB;AAC7E,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,sBAA8C;AAAA,IAClD,CAAC,MAAM;AACL,wBAAkB,EAAE,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,iBAAiB;AAAA,EACpB;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,KAAK,GAAG,CAAC,iBAAiB,CAAC;AAErF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa,6BAAY;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,6BAAY;AAAA,YACzB,aAAW,aAAa;AAAA,YACxB;AAAA,YAEC,uBAAa,4CAAC,sCAAc,QAAgB,IAAK,4CAAC,0CAAgB;AAAA;AAAA,QACrE;AAAA,QACC,gBACC,4CAAC,yCAAwB,SAAS,MAAM,gBAAgB,IAAI,GAAG,eAC7D,sDAAC,gCAAW,GACd,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/VirtualRowsList.js

@@ -34,22 +34,22 @@ module.exports = __toCommonJS(VirtualRowsList_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_createInternalAndPropsContext = require("../configs/useStore/createInternalAndPropsContext.js");
+var import_constants = require("../configs/constants.js");
+var import_styled = require("../styled.js");
 var import_EmptyContent = require("./EmptyContent.js");
-var import_Rows = require("./Rows.js");
 var import_Headers = require("./Headers/index.js");
-var import_styled = require("../styled.js");
 var import_Loader = require("./Loader.js");
-var import_constants = require("../configs/constants.js");
-var import_useStore = require("../configs/useStore/useStore.js");
+var import_Rows = require("./Rows.js");
 const VirtualRowsList = () => {
-  const isLoading = (0, import_useStore.usePropsStore)((state) => state.isLoading);
-  const virtualListRef = (0, import_useStore.usePropsStore)((state) => state.virtualListRef);
-  const flattenedData = (0, import_useStore.usePropsStore)((state) => state.flattenedData);
-  const isEmptyContent = (0, import_useStore.usePropsStore)((state) => state.isEmptyContent);
-  const { totalColumnsWidth, gridLayout } = (0, import_useStore.usePropsStore)((state) => state.layoutHelpers);
-  const { totalSize, scrollToIndex } = (0, import_useStore.usePropsStore)((state) => state.virtualListHelpers);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
-  const setFocusedRowId = (0, import_useStore.useInternalStore)((state) => state.setFocusedRowId);
+  const isLoading = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isLoading);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
+  const flattenedData = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.flattenedData);
+  const isEmptyContent = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isEmptyContent);
+  const { totalColumnsWidth, gridLayout } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.layoutHelpers);
+  const { totalSize, scrollToIndex } = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListHelpers);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
+  const setFocusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setFocusedRowId);
   const onKeyDown = (0, import_react.useCallback)(
     (e) => {
       if (e.ctrlKey && e.code === "End") {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/VirtualRowsList.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDjB;AAlDN,mBAA4C;AAC5C,0BAA6B;AAC7B,kBAAwC;AACxC,qBAAwB;AACxB,oBAAoE;AACpE,oBAAyC;AACzC,uBAA4B;AAC5B,sBAAgD;AAEzC,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAY,+BAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,QAAI,+BAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,QAAI,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAAkB,kCAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,gBAAY;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,gCAA4B;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,6BAAY;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,wDAAC,0BAAQ;AAAA,YACR,kBAAkB,4CAAC,oCAAa;AAAA,YAChC,YAAY,4CAAC,cAAAA,gBAAA,EAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,4CAAC,YAAAC,iBAAA,EAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkDjB;AAlDN,mBAA4C;AAC5C,2CAAgD;AAChD,uBAA4B;AAC5B,oBAAoE;AACpE,0BAA6B;AAC7B,qBAAwB;AACxB,oBAAyC;AACzC,kBAAwC;AAEjC,MAAM,kBAAkB,MAAM;AACnC,QAAM,gBAAY,oDAAc,CAAC,UAAU,MAAM,SAAS;AAC1D,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,aAAa;AAClE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,EAAE,mBAAmB,WAAW,QAAI,oDAAc,CAAC,UAAU,MAAM,aAAa;AACtF,QAAM,EAAE,WAAW,cAAc,QAAI,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AACtF,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AAEzE,QAAM,gBAAY;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,gCAA4B;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,6BAAY;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,wDAAC,0BAAQ;AAAA,YACR,kBAAkB,4CAAC,oCAAa;AAAA,YAChC,YAAY,4CAAC,cAAAA,gBAAA,EAAO,IAAK;AAAA,YACzB,CAAC,aAAa,CAAC,kBAAkB,4CAAC,YAAAC,iBAAA,EAAK;AAAA;AAAA;AAAA,MAC1C;AAAA;AAAA,EACF;AAEJ;",
   "names": ["Loader", "Rows"]
 }

package/dist/cjs/types/FunctionalHoC.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/types/FunctionalHoC.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import type React from 'react';\n\nexport type FunctionalHOC = <T = unknown>(\n  Component: React.ComponentType<T>,\n  ...other: unknown[]\n) => React.ComponentType<T & JSX.IntrinsicAttributes>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\n\nexport type FunctionalHOC = <T = unknown>(\n  Component: React.ComponentType<T>,\n  ...other: unknown[]\n) => React.ComponentType<T & React.JSX.IntrinsicAttributes>;\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/DSDataTableDefinitions.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-const DSDataTableName = "DSDataTable";
+const DSDataTableName = "DSDatatable";
 const DSDataTableSlots = {
   ROOT: "root",
   CONTENT_WRAPPER: "content-wrapper",

package/dist/esm/DSDataTableDefinitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSDataTableDefinitions.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSDataTableName = 'DSDataTable';\n\nexport const DSDataTableSlots = {\n  ROOT: 'root',\n  CONTENT_WRAPPER: 'content-wrapper',\n  TABLE_WRAPPER: 'table-wrapper',\n  PAGINATION_WRAPPER: 'pagination-wrapper',\n  TABLE_CONTENT_WRAPPER: 'table-content-wrapper',\n  VIRTUAL_LIST_WRAPPER: 'virtual-list-wrapper',\n  HEAD_WRAPPER: 'head-wrapper',\n  HEAD_TR: 'head-tr',\n  HEAD_TH: 'head-th',\n  HEAD_RIGHT_ICONS_WRAPPER: 'head-right-icons-wrapper',\n  HEADER_CELL_WRAPPER: 'header-cell-wrapper',\n  EMPTY_HEADER: 'empty-header',\n  RESIZER: 'resizer',\n  ACTION_CELL: 'action-cell',\n  EXPAND_CELL_CONTAINER: 'expand-cell-container',\n  SINGLE_CELL_CONTAINER: 'single-cell-container',\n  DRAG_AND_DROP_GRIPPER: 'drag-and-drop-gripper',\n  TEXT_EDITABLE_CELL_INPUT: 'text-editable-cell-input',\n  FILTER_POPOVER_BUTTON: 'filter-popover-button',\n  FILTER_POPOVER_CONTENT: 'filter-popover-content',\n  DROP_INDICATOR: 'drop-indicator',\n  CELL: 'cell',\n  CELL_CONTENT: 'cell-content',\n  PENCIL_ICON: 'pencil-icon',\n  EDITABLE_CONTAINER: 'editable-container',\n  FULLSIZE_GRID: 'fullsize-grid',\n  ROW: 'row',\n  GROUP_HEADER_CONTAINER: 'group-header-container',\n  GROUP_HEADER_TITLE: 'header-title',\n  CELL_CONTAINER: 'cell-container',\n  TOOLBAR_WRAPPER: 'toolbar-wrapper',\n  TOOLBAR_BUTTONS_WRAPPER: 'toolbar-buttons-wrapper',\n  TOOLBAR_BUTTON: 'toolbar-button',\n  TOOLBAR_POSITION: 'toolbar-position',\n  EMPTY_STATE_WRAPPER: 'empty-state-wrapper',\n  WARNING_ICON: 'warning-icon',\n  EMPTY_PRIMARY_MESSAGE: 'empty-primary-message',\n  EMPTY_SECONDARY_MESSAGE: 'empty-secondary-message',\n  EMPTY_BUTTON: 'empty-button',\n  CENTER_CONTENT_FLEX_WRAPPER: 'center-content-flex-wrapper',\n  LOADER_WRAPPER: 'loader-wrapper',\n  FILTER_BAR_WRAPPER: 'filter-bar-wrapper',\n};\n"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const DSDataTableName = 'DSDatatable';\n\nexport const DSDataTableSlots = {\n  ROOT: 'root',\n  CONTENT_WRAPPER: 'content-wrapper',\n  TABLE_WRAPPER: 'table-wrapper',\n  PAGINATION_WRAPPER: 'pagination-wrapper',\n  TABLE_CONTENT_WRAPPER: 'table-content-wrapper',\n  VIRTUAL_LIST_WRAPPER: 'virtual-list-wrapper',\n  HEAD_WRAPPER: 'head-wrapper',\n  HEAD_TR: 'head-tr',\n  HEAD_TH: 'head-th',\n  HEAD_RIGHT_ICONS_WRAPPER: 'head-right-icons-wrapper',\n  HEADER_CELL_WRAPPER: 'header-cell-wrapper',\n  EMPTY_HEADER: 'empty-header',\n  RESIZER: 'resizer',\n  ACTION_CELL: 'action-cell',\n  EXPAND_CELL_CONTAINER: 'expand-cell-container',\n  SINGLE_CELL_CONTAINER: 'single-cell-container',\n  DRAG_AND_DROP_GRIPPER: 'drag-and-drop-gripper',\n  TEXT_EDITABLE_CELL_INPUT: 'text-editable-cell-input',\n  FILTER_POPOVER_BUTTON: 'filter-popover-button',\n  FILTER_POPOVER_CONTENT: 'filter-popover-content',\n  DROP_INDICATOR: 'drop-indicator',\n  CELL: 'cell',\n  CELL_CONTENT: 'cell-content',\n  PENCIL_ICON: 'pencil-icon',\n  EDITABLE_CONTAINER: 'editable-container',\n  FULLSIZE_GRID: 'fullsize-grid',\n  ROW: 'row',\n  GROUP_HEADER_CONTAINER: 'group-header-container',\n  GROUP_HEADER_TITLE: 'header-title',\n  CELL_CONTAINER: 'cell-container',\n  TOOLBAR_WRAPPER: 'toolbar-wrapper',\n  TOOLBAR_BUTTONS_WRAPPER: 'toolbar-buttons-wrapper',\n  TOOLBAR_BUTTON: 'toolbar-button',\n  TOOLBAR_POSITION: 'toolbar-position',\n  EMPTY_STATE_WRAPPER: 'empty-state-wrapper',\n  WARNING_ICON: 'warning-icon',\n  EMPTY_PRIMARY_MESSAGE: 'empty-primary-message',\n  EMPTY_SECONDARY_MESSAGE: 'empty-secondary-message',\n  EMPTY_BUTTON: 'empty-button',\n  CENTER_CONTENT_FLEX_WRAPPER: 'center-content-flex-wrapper',\n  LOADER_WRAPPER: 'loader-wrapper',\n  FILTER_BAR_WRAPPER: 'filter-bar-wrapper',\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,kBAAkB;AAExB,MAAM,mBAAmB;AAAA,EAC9B,MAAM;AAAA,EACN,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB,uBAAuB;AAAA,EACvB,sBAAsB;AAAA,EACtB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,SAAS;AAAA,EACT,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,SAAS;AAAA,EACT,aAAa;AAAA,EACb,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,0BAA0B;AAAA,EAC1B,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,cAAc;AAAA,EACd,aAAa;AAAA,EACb,oBAAoB;AAAA,EACpB,eAAe;AAAA,EACf,KAAK;AAAA,EACL,wBAAwB;AAAA,EACxB,oBAAoB;AAAA,EACpB,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,yBAAyB;AAAA,EACzB,gBAAgB;AAAA,EAChB,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,yBAAyB;AAAA,EACzB,cAAc;AAAA,EACd,6BAA6B;AAAA,EAC7B,gBAAgB;AAAA,EAChB,oBAAoB;AACtB;",
   "names": []
 }

package/dist/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -5,7 +5,7 @@ import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from "@elliemae/ds-ic
 import { styled, css } from "@elliemae/ds-system";
 import { StyledFocusWithin } from "../../../styled.js";
 import { DATA_TESTID } from "../../../configs/constants.js";
-import { usePropsStore } from "../../../configs/useStore/useStore.js";
+import { usePropsStore } from "../../../configs/useStore/createInternalAndPropsContext.js";
 import { DSDataTableName, DSDataTableSlots } from "../../../DSDataTableDefinitions.js";
 const disabledCaret = css`
   cursor: not-allowed;