npm - @elliemae/ds-data-table - Versions diffs - 3.51.0-next.0 → 3.51.0-next.11 - Mend

@elliemae/ds-data-table 3.51.0-next.0 → 3.51.0-next.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (231) hide show

package/dist/cjs/parts/Headers/index.js CHANGED Viewed

@@ -39,15 +39,15 @@ var import_withConditionalDnDColumnContext = require("../HoC/withConditionalDnDC
 var import_HeaderCellGroup = require("./HeaderCellGroup.js");
 var import_SortableHeaderCell = require("../SortableHeaderCell.js");
 var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const HeadersComp = () => {
-  const isExpandable = (0, import_useStore.usePropsStore)((state) => state.isExpandable);
-  const isSkeleton = (0, import_useStore.usePropsStore)((state) => state.isSkeleton);
-  const colsLayoutStyle = (0, import_useStore.usePropsStore)((state) => state.colsLayoutStyle);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const columnHeaderRef = (0, import_useStore.usePropsStore)((state) => state.columnHeaderRef);
-  const virtualListRef = (0, import_useStore.usePropsStore)((state) => state.virtualListRef);
-  const getOwnerProps = (0, import_useStore.usePropsStore)((store) => store.get);
+  const isExpandable = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isExpandable);
+  const isSkeleton = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isSkeleton);
+  const colsLayoutStyle = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.colsLayoutStyle);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const columnHeaderRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.columnHeaderRef);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
+  const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
   (0, import_react.useEffect)(() => {
     (0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumns, true);
   }, [virtualListRef, visibleColumns]);

package/dist/cjs/parts/Headers/index.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst HeadersComp = () => {\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const columnHeaderRef = usePropsStore((state) => state.columnHeaderRef);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  if (visibleColumns.length === 0 && isSkeleton) {\n    return null;\n  }\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} innerRef={columnHeaderRef} getOwnerProps={getOwnerProps}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr\n          role=\"row\"\n          colsLayoutStyle={colsLayoutStyle}\n          isExpandable={isExpandable}\n          getOwnerProps={getOwnerProps}\n        >\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCX;AAnCZ,mBAAiC;AACjC,oBAAgD;AAChD,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AACnC,+BAAwC;AACxC,sBAA8B;AAE9B,MAAM,cAAc,MAAM;AACxB,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,iBAAa,+BAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,sBAAkB,+BAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,sBAAkB,+BAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,+BAAc,CAAC,UAAU,MAAM,GAAG;AAExD,8BAAU,MAAM;AAEd,0DAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE,4CAAC,mCAAkB,iBAAkC,UAAU,iBAAiB,eAC9E,sDAAC,gDAAmB,OAAO,gBACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
+  "sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled.js';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext.js';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup.js';\nimport { SortableHeaderCell } from '../SortableHeaderCell.js';\nimport { setSubColumnsGridLayout } from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst HeadersComp = () => {\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const isSkeleton = usePropsStore((state) => state.isSkeleton);\n  const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const columnHeaderRef = usePropsStore((state) => state.columnHeaderRef);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n  const getOwnerProps = usePropsStore((store) => store.get);\n\n  useEffect(() => {\n    // TODO: remove this, for further info see the comment on setSubColumnsGridLayout\n    setSubColumnsGridLayout(virtualListRef.current, visibleColumns, true);\n  }, [virtualListRef, visibleColumns]);\n\n  if (visibleColumns.length === 0 && isSkeleton) {\n    return null;\n  }\n  return (\n    <StyledHeadWrapper colsLayoutStyle={colsLayoutStyle} innerRef={columnHeaderRef} getOwnerProps={getOwnerProps}>\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr\n          role=\"row\"\n          colsLayoutStyle={colsLayoutStyle}\n          isExpandable={isExpandable}\n          getOwnerProps={getOwnerProps}\n        >\n          {visibleColumns.map((h, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    </StyledHeadWrapper>\n  );\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADmCX;AAnCZ,mBAAiC;AACjC,oBAAgD;AAChD,6CAAgD;AAChD,6BAAwC;AACxC,gCAAmC;AACnC,+BAAwC;AACxC,2CAA8B;AAE9B,MAAM,cAAc,MAAM;AACxB,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,8BAAU,MAAM;AAEd,0DAAwB,eAAe,SAAS,gBAAgB,IAAI;AAAA,EACtE,GAAG,CAAC,gBAAgB,cAAc,CAAC;AAEnC,MAAI,eAAe,WAAW,KAAK,YAAY;AAC7C,WAAO;AAAA,EACT;AACA,SACE,4CAAC,mCAAkB,iBAAkC,UAAU,iBAAiB,eAC9E,sDAAC,gDAAmB,OAAO,gBACzB;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MAEC,yBAAe,IAAI,CAAC,GAAG,UACtB,4CAAC,kDAAwB,QAAQ,GAAc,QAAQ,UAAU,eAAe,SAAS,KAAhD,EAAE,EAAiD,CAC7F;AAAA;AAAA,EACH,GACF,GACF;AAEJ;AAEO,MAAM,cAAU,wEAAgC,WAAW;",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderCellConfig.js CHANGED Viewed

@@ -34,11 +34,11 @@ module.exports = __toCommonJS(useHeaderCellConfig_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
 var import_SortableItemContext = require("../HoC/SortableItemContext.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
-  const dragAndDropColumns = (0, import_useStore.usePropsStore)((state) => state.dragAndDropColumns);
-  const isResizeable = (0, import_useStore.usePropsStore)((state) => state.isResizeable);
-  const reduxHeaders = (0, import_useStore.useInternalStore)((state) => state.reduxHeaders);
+  const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
+  const isResizeable = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isResizeable);
+  const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
   const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const hasFilter = !!(column.filter || column.Filter);

package/dist/cjs/parts/Headers/useHeaderCellConfig.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderCellConfig.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  shouldShowResize: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const isResizeable = usePropsStore((state) => state.isResizeable);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = Boolean(column.canSort);\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n  const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n    shouldShowResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,iCAAoC;AAEpC,sBAAgD;AAazC,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO;AAE9C,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAEJ,QAAM,YAAY,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO;AAExE,QAAM,mBAAmB,aAAa,CAAC,iBAAiB,CAAC;AAGzD,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI,cAAe,OAAM,KAAK,aAAa;AAC3C,MAAI,cAAe,OAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  shouldShowResize: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n  const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n  const isResizeable = usePropsStore((state) => state.isResizeable);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = Boolean(column.canSort);\n\n  const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n  const isDragging = draggableProps && draggableProps.isDragging;\n\n  const shouldShowDnD =\n    hasDnD &&\n    ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n      (draggableProps && draggableProps.isDragging) ||\n      isDragOverlay);\n\n  const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n  const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n  // Column definition\n  const hCols = ['auto'];\n  if (hasRightIcons) hCols.push('min-content');\n  if (shouldShowDnD) hCols.unshift('min-content');\n\n  return {\n    hasFilter,\n    hasDnD,\n    hasSortingCaret,\n    hasRightIcons,\n    isDragging,\n    hCols,\n    shouldShowDnD,\n    shouldShowResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,iCAAoC;AAEpC,2CAAgD;AAazC,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,mBAAe,uDAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO;AAE9C,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAEJ,QAAM,YAAY,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO;AAExE,QAAM,mBAAmB,aAAa,CAAC,iBAAiB,CAAC;AAGzD,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI,cAAe,OAAM,KAAK,aAAa;AAC3C,MAAI,cAAe,OAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js CHANGED Viewed

@@ -33,7 +33,7 @@ __export(useHeaderCellHandlers_exports, {
 module.exports = __toCommonJS(useHeaderCellHandlers_exports);
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, hasSortingCaret, withTabStops = false) => ({
   hideFilterMenu: true,
   // Do this to overwrite it if it exists
@@ -69,12 +69,12 @@ const useHeaderCellHandlers = ({
   isDragOverlay,
   draggableProps
 }) => {
-  const onColumnSortChange = (0, import_useStore.usePropsStore)((state) => state.onColumnSortChange);
-  const onColumnSort = (0, import_useStore.usePropsStore)((state) => state.onColumnSort);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const setFocusedRowId = (0, import_useStore.useInternalStore)((state) => state.setFocusedRowId);
-  const patchHeader = (0, import_useStore.useInternalStore)((state) => state.patchHeader);
-  const reduxHeaders = (0, import_useStore.useInternalStore)((state) => state.reduxHeaders);
+  const onColumnSortChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSortChange);
+  const onColumnSort = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSort);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const setFocusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setFocusedRowId);
+  const patchHeader = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.patchHeader);
+  const reduxHeaders = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.reduxHeaders);
   const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const headerRef = column.ref;
   const onMouseEnter = (0, import_react.useCallback)(() => {

package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderCellHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: DSDataTableT.InternalColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n  resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n  hasSortingCaret: boolean;\n  isDragOverlay?: boolean;\n  draggableProps: DSDataTableT.DraggablePropsT;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  handleSort: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n  reduxHeader: DSDataTableT.ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: boolean,\n  hasSortingCaret: boolean,\n  withTabStops = false,\n) => ({\n  hideFilterMenu: true, // Do this to overwrite it if it exists\n  ...reduxHeader,\n  hideFilterButton: !(hasFilter && value),\n  showDnDHandle: hasDnD && value,\n  showSortCaret: hasSortingCaret,\n  withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n  visibleColumns: DSDataTableT.InternalColumn[],\n  columnId: string,\n  isSortedDesc: boolean,\n) => {\n  const doit = (columns: DSDataTableT.InternalColumn[]) =>\n    columns.map((col) => {\n      const newCol = { ...col };\n      delete newCol.isSortedDesc;\n      if (col.id === columnId) {\n        newCol.isSortedDesc = isSortedDesc;\n      }\n      if (newCol.columns) {\n        newCol.columns = doit(newCol.columns);\n      }\n      return newCol;\n    });\n  return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n  sortRef,\n  resizeHandlerRef,\n  hasSortingCaret,\n  isDragOverlay,\n  draggableProps,\n}) => {\n  const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n  const onColumnSort = usePropsStore((state) => state.onColumnSort);\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n  const patchHeader = useInternalStore((state) => state.patchHeader);\n  const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const handleSort: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange?.({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(\n        getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n        column.id,\n        column.isSortedDesc ? 'ASC' : 'DESC',\n      );\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // we do the same as the draggable rows.\n      // we stop the event if the overlay is active\n      // main reason is the tab key\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n      }\n\n      if (e.currentTarget !== e.target) return;\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange?.({\n          column: column.id,\n          direction: 'ASC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n        // Elements don't not yet exist\n        setTimeout(() => {\n          if (dragHandleRef.current) dragHandleRef.current.focus();\n          else if (filterIconRef.current) filterIconRef.current.focus();\n          else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n          else if (sortRef?.current) sortRef.current.focus();\n        });\n      }\n    },\n    [\n      isDragOverlay,\n      isActive,\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      visibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      hasSortingCaret,\n      dragHandleRef,\n      filterIconRef,\n      resizeHandlerRef,\n      sortRef,\n    ],\n  );\n\n  const onFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if focus wasn't placed in the element (bubling issues)\n      const possibleTargets: (HTMLElement | null)[] = [\n        dragHandleRef.current,\n        filterIconRef.current,\n        resizeHandlerRef.current,\n      ];\n      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n        setFocusedRowId(null);\n      }\n\n      if (possibleTargets.includes(e.target as HTMLElement | null)) {\n        patchHeader(column.id, {\n          hideFilterButton: !hasFilter,\n          showDnDHandle: hasDnD,\n          withTabStops: true,\n        });\n        setFocusedRowId(null);\n      }\n    },\n    [\n      column.id,\n      dragHandleRef,\n      filterIconRef,\n      hasDnD,\n      hasFilter,\n      headerRef,\n      patchHeader,\n      reduxHeader,\n      resizeHandlerRef,\n      setFocusedRowId,\n      hasSortingCaret,\n    ],\n  );\n\n  const onBlur: React.FocusEventHandler = useCallback(\n    (e) => {\n      // Don't do anything if blur was caused by going to a child\n      if (e.relatedTarget === dragHandleRef.current) return;\n      if (e.relatedTarget === filterIconRef.current) return;\n      if (e.relatedTarget === resizeHandlerRef.current) return;\n      if (e.relatedTarget === sortRef?.current) return;\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n    },\n    [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/Headers/useHeaderResizer.js CHANGED Viewed

@@ -32,10 +32,10 @@ __export(useHeaderResizer_exports, {
 });
 module.exports = __toCommonJS(useHeaderResizer_exports);
 var React = __toESM(require("react"));
-var import_react = require("react");
 var import_lodash = require("lodash");
+var import_react = require("react");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
 const narrow = (value, min, max) => Math.min(Math.max(value, min ?? 30), max ?? Infinity);
 const getCorrectDelta = (e) => {
   let multiplier = 1;
@@ -53,10 +53,10 @@ const useHeaderResizer = ({
   columnId,
   innerRef
 }) => {
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
-  const onColumnResize = (0, import_useStore.usePropsStore)((state) => state.onColumnResize);
-  const onColumnSizeChange = (0, import_useStore.usePropsStore)((state) => state.onColumnSizeChange);
-  const virtualListRef = (0, import_useStore.usePropsStore)((state) => state.virtualListRef);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
+  const onColumnResize = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnResize);
+  const onColumnSizeChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSizeChange);
+  const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
   const [isResizing, setIsResizing] = (0, import_react.useState)(false);
   const visibleColumnsCopy = (0, import_react.useMemo)(() => (0, import_lodash.cloneDeep)(visibleColumns), [visibleColumns]);
   const visibleColumnsOnGridLayout = (0, import_react.useMemo)(
@@ -91,7 +91,7 @@ const useHeaderResizer = ({
   }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);
   const onResizeHandler = (0, import_react.useCallback)(
     (e) => {
-      if (realColumnIndex == -1) return;
+      if (realColumnIndex === -1) return;
       const delta = ("clientX" in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0);
       const originalWidth = (0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndex];
       const widthWithDelta = narrow(
@@ -108,7 +108,7 @@ const useHeaderResizer = ({
   );
   const handleKeyboardResize = (0, import_react.useCallback)(
     (e) => {
-      if (realColumnIndex == -1) return;
+      if (realColumnIndex === -1) return;
       if (e.key === "Enter") {
         e.stopPropagation();
       }

package/dist/cjs/parts/Headers/useHeaderResizer.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/Headers/useHeaderResizer.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { useCallback, useMemo, useState } from 'react';\nimport { cloneDeep } from 'lodash';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport {\n  getGridLayout,\n  changeGridLayout,\n  removeGridLayout,\n  setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n  let multiplier = 1;\n\n  if (e.shiftKey) multiplier *= 5;\n  if (e.altKey) multiplier *= 10;\n\n  if (e.code === 'ArrowLeft') {\n    return -multiplier;\n  }\n  if (e.code === 'ArrowRight') {\n    return multiplier;\n  }\n  return 0;\n};\n\nexport const useHeaderResizer = ({\n  columnId,\n  innerRef,\n}: {\n  columnId: string;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const onColumnResize = usePropsStore((state) => state.onColumnResize);\n  const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n  const visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\n  );\n\n  // Notifies the user of the change in the column size\n  const pushColumnSizeChange = useCallback(\n    (nextWidth: number) => {\n      // PUI-12695: Avoid unnecessary calls to onColumnResize\n      // Avoid calling onColumnResize if the width of the column has not changed\n      // unnecessary calls to onColumnResize can cause performance issues (next resizes were not working)\n      if (nextWidth === visibleColumnsCopy[realColumnIndex].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy\n      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndex == -1) return;\n\n      const delta =\n        ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      // We will notify the user of the change in the column size only when the user releases the mouse button\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndex == -1) return;\n\n      if (e.key === 'Enter') {\n        e.stopPropagation();\n      }\n\n      if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n        e.preventDefault();\n      }\n\n      const delta = getCorrectDelta(e);\n\n      if (delta === 0) return;\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { cloneDeep } from 'lodash';\nimport { useCallback, useMemo, useState } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport {\n  changeGridLayout,\n  getGridLayout,\n  removeGridLayout,\n  setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n  Math.min(Math.max(value, min ?? 30), max ?? Infinity);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n  let multiplier = 1;\n\n  if (e.shiftKey) multiplier *= 5;\n  if (e.altKey) multiplier *= 10;\n\n  if (e.code === 'ArrowLeft') {\n    return -multiplier;\n  }\n  if (e.code === 'ArrowRight') {\n    return multiplier;\n  }\n  return 0;\n};\n\nexport const useHeaderResizer = ({\n  columnId,\n  innerRef,\n}: {\n  columnId: string;\n  innerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const visibleColumns = usePropsStore((state) => state.visibleColumns);\n  const onColumnResize = usePropsStore((state) => state.onColumnResize);\n  const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);\n  const virtualListRef = usePropsStore((state) => state.virtualListRef);\n\n  const [isResizing, setIsResizing] = useState(false);\n\n  const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n  const visibleColumnsOnGridLayout = useMemo(\n    () =>\n      visibleColumnsCopy.reduce((acc, cur) => {\n        if (cur.columns) {\n          return acc.concat(cur.columns);\n        }\n        return acc.concat(cur);\n      }, [] as DSDataTableT.InternalColumn[]),\n    [visibleColumnsCopy],\n  );\n\n  const realColumnIndex = useMemo(\n    () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n    [columnId, visibleColumnsOnGridLayout],\n  );\n\n  // Notifies the user of the change in the column size\n  const pushColumnSizeChange = useCallback(\n    (nextWidth: number) => {\n      // PUI-12695: Avoid unnecessary calls to onColumnResize\n      // Avoid calling onColumnResize if the width of the column has not changed\n      // unnecessary calls to onColumnResize can cause performance issues (next resizes were not working)\n      if (nextWidth === visibleColumnsCopy[realColumnIndex].width) return;\n      onColumnResize?.(columnId, nextWidth);\n      // this next line is updating also the visibleColumnsCopy\n      visibleColumnsOnGridLayout[realColumnIndex].width = nextWidth;\n      onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n    },\n    [columnId, onColumnResize, onColumnSizeChange, realColumnIndex, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  const onResizeStart = useCallback(() => {\n    setIsResizing(true);\n  }, []);\n\n  const onResizeEnd = useCallback(() => {\n    setIsResizing(false);\n    pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex]);\n    removeGridLayout(virtualListRef.current);\n  }, [pushColumnSizeChange, virtualListRef, realColumnIndex]);\n\n  // Mouse resize\n  const onResizeHandler = useCallback(\n    (e: MouseEvent | TouchEvent) => {\n      if (realColumnIndex === -1) return;\n\n      const delta =\n        ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      // We will notify the user of the change in the column size only when the user releases the mouse button\n\n      // To prevent text selection\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    [realColumnIndex, innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  // Keyboard resize\n  const handleKeyboardResize = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (realColumnIndex === -1) return;\n\n      if (e.key === 'Enter') {\n        e.stopPropagation();\n      }\n\n      if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n        e.preventDefault();\n      }\n\n      const delta = getCorrectDelta(e);\n\n      if (delta === 0) return;\n\n      const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndex];\n\n      const widthWithDelta = narrow(\n        originalWidth + delta,\n        visibleColumnsOnGridLayout[realColumnIndex].minWidth,\n        visibleColumnsOnGridLayout[realColumnIndex].maxWidth,\n      );\n\n      changeGridLayout(virtualListRef.current, realColumnIndex, widthWithDelta);\n      setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n\n      pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndex] + delta);\n      removeGridLayout(virtualListRef.current);\n    },\n    [pushColumnSizeChange, realColumnIndex, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n  );\n\n  return {\n    isResizing,\n    onResizeStart,\n    onResizeEnd,\n    onResizeHandler,\n    handleKeyboardResize,\n  };\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/HoC/DnDGroupContext.js ADDED Viewed

@@ -0,0 +1,39 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var DnDGroupContext_exports = {};
+__export(DnDGroupContext_exports, {
+  DnDGroupContext: () => DnDGroupContext
+});
+module.exports = __toCommonJS(DnDGroupContext_exports);
+var React = __toESM(require("react"));
+var import_react = require("react");
+const DnDGroupContext = (0, import_react.createContext)({
+  activeIndex: null
+});
+//# sourceMappingURL=DnDGroupContext.js.map

package/dist/cjs/parts/HoC/DnDGroupContext.js.map ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/parts/HoC/DnDGroupContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { createContext } from 'react';\nimport type { DnDGroupContextType } from './withConditionalDnDColumnContext.js';\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: null,\n});\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA8B;AAGvB,MAAM,sBAAkB,4BAAmC;AAAA,EAChE,aAAa;AACf,CAAC;",
+  "names": []
+}

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

@@ -28,20 +28,17 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var withConditionalDnDColumnContext_exports = {};
 __export(withConditionalDnDColumnContext_exports, {
-  DnDGroupContext: () => DnDGroupContext,
   withConditionalDnDColumnContext: () => withConditionalDnDColumnContext
 });
 module.exports = __toCommonJS(withConditionalDnDColumnContext_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_internal = require("../internal.js");
+var import_react = require("react");
 var import_Columns = require("../../addons/Columns/index.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
-const DnDGroupContext = (0, import_react.createContext)({
-  activeIndex: null
-});
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
+var import_HeaderCellGroup = require("../Headers/HeaderCellGroup.js");
+var import_DnDGroupContext = require("./DnDGroupContext.js");
 const flattenColumns = (cols) => {
   const augmentedColumns = [];
   const flatten = (col, index, parentId = null) => {
@@ -56,9 +53,9 @@ const flattenColumns = (cols) => {
   return augmentedColumns;
 };
 const withConditionalDnDColumnContext = (Component) => function(props) {
-  const dragAndDropColumns = (0, import_useStore.usePropsStore)((state) => state.dragAndDropColumns);
-  const onColumnsReorder = (0, import_useStore.usePropsStore)((state) => state.onColumnsReorder);
-  const visibleColumns = (0, import_useStore.usePropsStore)((state) => state.visibleColumns);
+  const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
+  const onColumnsReorder = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnsReorder);
+  const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
   const flattenedItems = (0, import_react.useMemo)(() => flattenColumns(visibleColumns), [visibleColumns]);
   const onReorder = (0, import_react.useCallback)(
     (movedItem, indexes) => {
@@ -92,10 +89,11 @@ const withConditionalDnDColumnContext = (Component) => function(props) {
     () => activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null,
     [activeId, flattenedItems]
   );
+  const DnDGroupContextVal = (0, import_react.useMemo)(() => ({ activeIndex }), [activeIndex]);
   if (dragAndDropColumns)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DnDGroupContext.Provider, { value: { activeIndex }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_internal.HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDGroupContext.DnDGroupContext.Provider, { value: DnDGroupContextVal, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: activeId ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderCellGroup.HeaderCellGroup, { header: dragOverlayCol, isDragOverlay: true }) : null })
     ] });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props });
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport {\n  restrictToFirstScrollableAncestor,\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { HeaderCellGroup } from '../internal.js';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\ntype DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: null,\n});\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={{ activeIndex }}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0Ff;AAxFR,mBAA2D;AAC3D,8BAOO;AAGP,sBAAgC;AAChC,qBAAiC;AACjC,sBAA8B;AAMvB,MAAM,sBAAkB,4BAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,uBAAmB,+BAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,qBAAiB,+BAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,qBAAiB,sBAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,gBAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,uBAAmB,mCAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,gCAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,QAAI,kDAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,qBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,YAAY,GAC7C,sDAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,4CAAC,uCAAY,WAAW,CAAC,yDAAiC,GACvD,qBAAW,4CAAC,mCAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport {\n  DndContext,\n  DragOverlay,\n  arrayMove,\n  restrictToFirstScrollableAncestor,\n  useHierarchyDndkitConfig,\n  type DnDKitHierarchy,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns/index.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport type DnDGroupContextType = {\n  activeIndex: number | null;\n};\n\nconst flattenColumns = (cols: DSDataTableT.InternalColumn[]): DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[] => {\n  const augmentedColumns = [] as DnDKitHierarchy.Item<DSDataTableT.InternalColumn>[];\n  const flatten = (col: DSDataTableT.InternalColumn, index: number, parentId: string | null = null) => {\n    const { id } = col;\n    augmentedColumns.push({ uid: id, parentId, realIndex: index, original: col });\n    if (col.columns)\n      col.columns.forEach((subColumn: DSDataTableT.InternalColumn, childIndex: number) =>\n        flatten(subColumn, childIndex, id),\n      );\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return augmentedColumns;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) =>\n  function (props) {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const onColumnsReorder = usePropsStore((state) => state.onColumnsReorder);\n    const visibleColumns = usePropsStore((state) => state.visibleColumns);\n\n    const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n    const onReorder: DnDKitHierarchy.OnReorder<DSDataTableT.InternalColumn> = useCallback(\n      (movedItem, indexes) => {\n        // Send from index to target index\n        const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);\n        // Pull the cols's data into an object\n        const nodes: Record<string, DSDataTableT.InternalColumn> = {};\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          delete colData.columns;\n          nodes[dndData.uid] = colData;\n        });\n        const newData = [] as DSDataTableT.Column[];\n        newFlattenedData.forEach(({ original: colData, ...dndData }) => {\n          // Don't send internal columns to the user\n          if (INTERNAL_COLUMNS.includes(dndData.uid as string)) {\n            return;\n          }\n          // If row has parent, insert it to it's subrows\n          // otherwise append it to the new user data\n          if (dndData.parentId) {\n            const parentNode = nodes[dndData.parentId];\n            if (parentNode.columns) parentNode.columns.push(colData);\n            else parentNode.columns = [colData];\n          } else newData.push(colData);\n        });\n        onColumnsReorder(newData, indexes);\n      },\n      [flattenedItems, onColumnsReorder],\n    );\n\n    const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n      flattenedItems,\n      isHorizontalDnD: true,\n      onReorder,\n    });\n\n    const dragOverlayCol = useMemo(\n      () => (activeId ? flattenedItems.find((item) => item.uid === activeId)?.original : null),\n      [activeId, flattenedItems],\n    );\n    const DnDGroupContextVal = useMemo(() => ({ activeIndex }), [activeIndex]);\n\n    if (dragAndDropColumns)\n      return (\n        <DndContext {...dndContextProps}>\n          <DnDGroupContext.Provider value={DnDGroupContextVal}>\n            <Component {...props} />\n          </DnDGroupContext.Provider>\n          <DragOverlay modifiers={[restrictToFirstScrollableAncestor]}>\n            {activeId ? <HeaderCellGroup header={dragOverlayCol as DSDataTableT.InternalColumn} isDragOverlay /> : null}\n          </DragOverlay>\n        </DndContext>\n      );\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwFf;AAtFR,8BAOO;AACP,mBAAqC;AACrC,qBAAiC;AACjC,2CAA8B;AAG9B,6BAAgC;AAChC,6BAAgC;AAMhC,MAAM,iBAAiB,CAAC,SAA6F;AACnH,QAAM,mBAAmB,CAAC;AAC1B,QAAM,UAAU,CAAC,KAAkC,OAAe,WAA0B,SAAS;AACnG,UAAM,EAAE,GAAG,IAAI;AACf,qBAAiB,KAAK,EAAE,KAAK,IAAI,UAAU,WAAW,OAAO,UAAU,IAAI,CAAC;AAC5E,QAAI,IAAI;AACN,UAAI,QAAQ;AAAA,QAAQ,CAAC,WAAwC,eAC3D,QAAQ,WAAW,YAAY,EAAE;AAAA,MACnC;AAAA,EACJ;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAC7D,SAAU,OAAO;AACf,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,uBAAmB,oDAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AAEpE,QAAM,qBAAiB,sBAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,gBAAoE;AAAA,IACxE,CAAC,WAAW,YAAY;AAEtB,YAAM,uBAAmB,mCAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAqD,CAAC;AAC5D,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAC9D,eAAO,QAAQ;AACf,cAAM,QAAQ,GAAG,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,EAAE,UAAU,SAAS,GAAG,QAAQ,MAAM;AAE9D,YAAI,gCAAiB,SAAS,QAAQ,GAAa,GAAG;AACpD;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ,QAAQ;AACzC,cAAI,WAAW,QAAS,YAAW,QAAQ,KAAK,OAAO;AAAA,cAClD,YAAW,UAAU,CAAC,OAAO;AAAA,QACpC,MAAO,SAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,EAAE,iBAAiB,UAAU,YAAY,QAAI,kDAAyB;AAAA,IAC1E;AAAA,IACA,iBAAiB;AAAA,IACjB;AAAA,EACF,CAAC;AAED,QAAM,qBAAiB;AAAA,IACrB,MAAO,WAAW,eAAe,KAAK,CAAC,SAAS,KAAK,QAAQ,QAAQ,GAAG,WAAW;AAAA,IACnF,CAAC,UAAU,cAAc;AAAA,EAC3B;AACA,QAAM,yBAAqB,sBAAQ,OAAO,EAAE,YAAY,IAAI,CAAC,WAAW,CAAC;AAEzE,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,uCAAgB,UAAhB,EAAyB,OAAO,oBAC/B,sDAAC,aAAW,GAAG,OAAO,GACxB;AAAA,MACA,4CAAC,uCAAY,WAAW,CAAC,yDAAiC,GACvD,qBAAW,4CAAC,0CAAgB,QAAQ,gBAA+C,eAAa,MAAC,IAAK,MACzG;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js CHANGED Viewed

@@ -33,21 +33,21 @@ __export(withConditionalDnDRowContext_exports, {
 module.exports = __toCommonJS(withConditionalDnDRowContext_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_react_dom = require("react-dom");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 var import_Row = require("../Row.js");
 var import_DnDTreeContext = require("./DnDTreeContext.js");
-var import_useStore = require("../../configs/useStore/useStore.js");
 const withConditionalDnDRowContext = (Component) => (props) => {
-  const dragAndDropRows = (0, import_useStore.usePropsStore)((state) => state.dragAndDropRows);
-  const isExpandable = (0, import_useStore.usePropsStore)((state) => state.isExpandable);
-  const onRowsReorder = (0, import_useStore.usePropsStore)((state) => state.onRowsReorder);
-  const maxDragAndDropLevel = (0, import_useStore.usePropsStore)((state) => state.maxDragAndDropLevel);
-  const getIsDropValid = (0, import_useStore.usePropsStore)((state) => state.getIsDropValid);
-  const flattenedData = (0, import_useStore.usePropsStore)((state) => state.flattenedData);
-  const allDataFlattened = (0, import_useStore.usePropsStore)((state) => state.allDataFlattened);
-  const setDrilldownRowId = (0, import_useStore.useInternalStore)((state) => state.setDrilldownRowId);
+  const dragAndDropRows = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropRows);
+  const isExpandable = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.isExpandable);
+  const onRowsReorder = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onRowsReorder);
+  const maxDragAndDropLevel = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.maxDragAndDropLevel);
+  const getIsDropValid = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.getIsDropValid);
+  const flattenedData = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.flattenedData);
+  const allDataFlattened = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.allDataFlattened);
+  const setDrilldownRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setDrilldownRowId);
   const onReorder = (0, import_react.useCallback)(
     (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {
       const rootMovedData = movedData.root;

package/dist/cjs/parts/HoC/withConditionalDnDRowContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  useTreeDndkitConfig,\n  restrictToFirstScrollableAncestor,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore, useInternalStore } from '../../configs/useStore/useStore.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n  const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n  const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      const rootMovedData = movedData.root;\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      rootMovedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      rootMovedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n      setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n    },\n    [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n  );\n\n  const theFlattenedItems = useMemo(\n    () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n    [allDataFlattened],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: theFlattenedItems,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid: getIsDropValid,\n  });\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  const visibleItems = useMemo(() => {\n    // active in this case is the row that is being dragged\n    // if no drag is happening, return the flattened data as is\n    if (!active) return flattenedData;\n    // if a drag is happening, exclude the children of the dragged row\n    //  this is a design choice, this way the user can't drag a parent row into one of it's children.\n    const excludeParentIds = [active.id];\n    return flattenedData.filter((datum) => {\n      const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n      if (isParentExcluded) {\n        excludeParentIds.push(datum.uid);\n        return false;\n      }\n      return true;\n    });\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...containerSortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport {\n  DndContext,\n  DragOverlay,\n  SortableContext,\n  restrictToFirstScrollableAncestor,\n  useTreeDndkitConfig,\n  type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { useCallback, useMemo } from 'react';\nimport { createPortal } from 'react-dom';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { FunctionalHOC } from '../../types/FunctionalHoC.js';\nimport { Row } from '../Row.js';\nimport { DnDTreeContext } from './DnDTreeContext.js';\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const dragAndDropRows = usePropsStore((state) => state.dragAndDropRows);\n  const isExpandable = usePropsStore((state) => state.isExpandable);\n  const onRowsReorder = usePropsStore((state) => state.onRowsReorder);\n  const maxDragAndDropLevel = usePropsStore((state) => state.maxDragAndDropLevel);\n  const getIsDropValid = usePropsStore((state) => state.getIsDropValid);\n  const flattenedData = usePropsStore((state) => state.flattenedData);\n  const allDataFlattened = usePropsStore((state) => state.allDataFlattened);\n  const setDrilldownRowId = useInternalStore((state) => state.setDrilldownRowId);\n\n  const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n    (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n      const rootMovedData = movedData.root;\n      // Pull the row's original data into an object\n      const nodes: Record<string, DSDataTableT.Row> = {};\n      rootMovedData.forEach((row) => {\n        if (row.original.subRows) delete row.original.subRows;\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [] as DSDataTableT.Row[];\n      rootMovedData.forEach((row) => {\n        // If row has parent, insert it to it's subrows\n        // otherwise append it to the new user data\n        if (row.parentId) {\n          const parentNode = nodes[row.parentId];\n          if (parentNode?.subRows) parentNode.subRows.push(row.original);\n          else parentNode.subRows = [row.original];\n        } else newUserData.push(row.original);\n      });\n      // Tell the user that the order has change, he can chose to commit it or not\n      onRowsReorder(newUserData, { targetIndex, fromIndex }, considerExpanding as string | null, {\n        flattenedData,\n        allDataFlattened,\n      });\n      setDrilldownRowId(_active.uid.toString()); // we restore the drilldown row id which was set null during the blur event on dragging\n    },\n    [allDataFlattened, flattenedData, onRowsReorder, setDrilldownRowId],\n  );\n\n  const theFlattenedItems = useMemo(\n    () => allDataFlattened.map((datum) => ({ ...datum, collapsed: !datum.isExpanded, subitems: [] })),\n    [allDataFlattened],\n  );\n\n  const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n    flattenedItems: theFlattenedItems,\n    isHorizontalDnD: false,\n    isExpandable,\n    onReorder,\n    maxDragAndDropLevel,\n    getIsDropValid,\n  });\n\n  const containerSortableContextProps = sortableContextProps.root;\n\n  const visibleItems = useMemo(() => {\n    // active in this case is the row that is being dragged\n    // if no drag is happening, return the flattened data as is\n    if (!active) return flattenedData;\n    // if a drag is happening, exclude the children of the dragged row\n    //  this is a design choice, this way the user can't drag a parent row into one of it's children.\n    const excludeParentIds = [active.id];\n    return flattenedData.filter((datum) => {\n      const isParentExcluded = datum.parentId !== null && excludeParentIds.includes(datum.parentId);\n      if (isParentExcluded) {\n        excludeParentIds.push(datum.uid);\n        return false;\n      }\n      return true;\n    });\n  }, [active, flattenedData]);\n\n  const ctx = useMemo(\n    () => ({\n      visibleItems,\n      dropIndicatorPosition,\n      isDropValid,\n    }),\n    [visibleItems, dropIndicatorPosition, isDropValid],\n  );\n\n  const dragOverlayRow = useMemo(\n    () => (active ? flattenedData.find((row) => row.uid === active.id) : null),\n    [active, flattenedData],\n  );\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...containerSortableContextProps}>\n          <DnDTreeContext.Provider value={ctx}>\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }} modifiers={[restrictToFirstScrollableAncestor]}>\n            {active ? <Row row={dragOverlayRow as DSDataTableT.InternalRow} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/cjs/parts/HoC/withConditionalDnDSortableContext.js CHANGED Viewed

@@ -34,9 +34,9 @@ module.exports = __toCommonJS(withConditionalDnDSortableContext_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_drag_and_drop = require("@elliemae/ds-drag-and-drop");
-var import_useStore = require("../../configs/useStore/useStore.js");
+var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
 const withConditionalDnDSortableContext = (Component) => (props) => {
-  const dragAndDropColumns = (0, import_useStore.usePropsStore)((state) => state.dragAndDropColumns);
+  const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
   const { isDragOverlay, items } = props;
   if (!isDragOverlay && dragAndDropColumns)
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { items: items.map((item) => item.id), strategy: import_ds_drag_and_drop.horizontalListSortingStrategy, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) });

package/dist/cjs/parts/HoC/withConditionalDnDSortableContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withConditionalDnDSortableContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { horizontalListSortingStrategy, SortableContext } from '@elliemae/ds-drag-and-drop';\nimport React from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\ninterface Props {\n  items: DSDataTableT.InternalColumn[];\n  isDragOverlay: boolean;\n}\n\nexport const withConditionalDnDSortableContext =\n  <T,>(Component: React.ComponentType<T>) =>\n  (props: T & JSX.IntrinsicAttributes & Props) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n\n    const { isDragOverlay, items } = props;\n\n    // Only add the context if it's not a dragOverlay and dnd for cols was requested\n    // It's important that drag overlays DO NOT have any sortable functionality!\n    if (!isDragOverlay && dragAndDropColumns)\n      return (\n        <SortableContext items={items.map((item) => item.id)} strategy={horizontalListSortingStrategy}>\n          <Component {...props} />\n        </SortableContext>\n      );\n\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBb;AAtBV,8BAA+D;AAG/D,sBAA8B;AAOvB,MAAM,oCACX,CAAK,cACL,CAAC,UAA+C;AAC9C,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAE5E,QAAM,EAAE,eAAe,MAAM,IAAI;AAIjC,MAAI,CAAC,iBAAiB;AACpB,WACE,4CAAC,2CAAgB,OAAO,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,GAAG,UAAU,uDAC9D,sDAAC,aAAW,GAAG,OAAO,GACxB;AAGJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
+  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport { horizontalListSortingStrategy, SortableContext } from '@elliemae/ds-drag-and-drop';\nimport React from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\ninterface Props {\n  items: DSDataTableT.InternalColumn[];\n  isDragOverlay: boolean;\n}\n\nexport const withConditionalDnDSortableContext =\n  <T,>(Component: React.ComponentType<T>) =>\n  (props: T & React.JSX.IntrinsicAttributes & Props) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n\n    const { isDragOverlay, items } = props;\n\n    // Only add the context if it's not a dragOverlay and dnd for cols was requested\n    // It's important that drag overlays DO NOT have any sortable functionality!\n    if (!isDragOverlay && dragAndDropColumns)\n      return (\n        <SortableContext items={items.map((item) => item.id)} strategy={horizontalListSortingStrategy}>\n          <Component {...props} />\n        </SortableContext>\n      );\n\n    return <Component {...props} />;\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuBb;AAtBV,8BAA+D;AAE/D,2CAA8B;AAQvB,MAAM,oCACX,CAAK,cACL,CAAC,UAAqD;AACpD,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAE5E,QAAM,EAAE,eAAe,MAAM,IAAI;AAIjC,MAAI,CAAC,iBAAiB;AACpB,WACE,4CAAC,2CAAgB,OAAO,MAAM,IAAI,CAAC,SAAS,KAAK,EAAE,GAAG,UAAU,uDAC9D,sDAAC,aAAW,GAAG,OAAO,GACxB;AAGJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
   "names": []
 }

package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js CHANGED Viewed

@@ -33,15 +33,15 @@ __export(withDnDSortableColumnContext_exports, {
 module.exports = __toCommonJS(withDnDSortableColumnContext_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_withConditionalDnDColumnContext = require("./withConditionalDnDColumnContext.js");
-var import_SortableItemContext = require("./SortableItemContext.js");
+var import_react = require("react");
 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_SortableItemContext = require("./SortableItemContext.js");
+var import_DnDGroupContext = require("./DnDGroupContext.js");
 const withDnDSortableColumnContext = (Component) => (props) => {
-  const dragAndDropColumns = (0, import_useStore.usePropsStore)((state) => state.dragAndDropColumns);
-  const { activeIndex } = (0, import_react.useContext)(import_withConditionalDnDColumnContext.DnDGroupContext);
+  const dragAndDropColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.dragAndDropColumns);
+  const { activeIndex } = (0, import_react.useContext)(import_DnDGroupContext.DnDGroupContext);
   const draggableOptions = (0, import_react.useMemo)(
     () => ({
       id: props.header.id

package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/parts/HoC/withDnDSortableColumnContext.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useContext, useMemo } from 'react';\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { DnDGroupContext } from './withConditionalDnDColumnContext.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/useStore.js';\n\nexport const withDnDSortableColumnContext =\n  <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n  (props: T) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition:\n          activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n        isDropValid: true,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDf;AAnDR,mBAA2C;AAC3C,8BAA4B;AAE5B,6CAAgC;AAEhC,iCAAoC;AACpC,uBAAsC;AACtC,sBAA8B;AAEvB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,EAAE,YAAY,QAAI,yBAAW,sDAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAA+C,sBAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,uCAAsB,QAAQ,uCAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,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 react/function-component-definition */\nimport { useSortable } from '@elliemae/ds-drag-and-drop';\nimport React, { useContext, useMemo } from 'react';\nimport { DropIndicatorPosition } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport type { SortableItemContextType } from './SortableItemContext.js';\nimport { SortableItemContext } from './SortableItemContext.js';\nimport { DnDGroupContext } from './DnDGroupContext.js';\n\nexport const withDnDSortableColumnContext =\n  <T extends { header: DSDataTableT.InternalColumn }>(Component: React.ComponentType<T>) =>\n  (props: T) => {\n    const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n    const { activeIndex } = useContext(DnDGroupContext);\n\n    // onMount generate unique options, so everyting is only ran once\n    const draggableOptions = useMemo(\n      () => ({\n        id: props.header.id,\n      }),\n      [props.header.id],\n    );\n\n    const useSortableHelpers = useSortable(draggableOptions);\n\n    // calculate all the \"useSortable\" values as per required\n    const draggableProps: DSDataTableT.DraggablePropsT = useMemo(() => {\n      if (!dragAndDropColumns) return false;\n\n      const { index, overIndex } = useSortableHelpers;\n\n      return {\n        ...useSortableHelpers,\n        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,\n        dropIndicatorPosition:\n          activeIndex && index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before,\n        isDropValid: true,\n      };\n    }, [useSortableHelpers, dragAndDropColumns, activeIndex]);\n    // we use a context so we can easly access information wherever without bubbling down\n    // this context is all Memoized so as long as component is not re-mounted,\n    // the context won't trigger un-required renders per-se...\n    const ctx: SortableItemContextType = useMemo(\n      () => ({\n        draggableProps,\n      }),\n      [draggableProps],\n    );\n    // we always add the context, if draggableProps===false we don't have the DnD enabled.\n    return (\n      <SortableItemContext.Provider value={ctx}>\n        <Component {...props} />\n      </SortableItemContext.Provider>\n    );\n  };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoDf;AAnDR,8BAA4B;AAC5B,mBAA2C;AAC3C,uBAAsC;AACtC,2CAA8B;AAG9B,iCAAoC;AACpC,6BAAgC;AAEzB,MAAM,+BACX,CAAoD,cACpD,CAAC,UAAa;AACZ,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,EAAE,YAAY,QAAI,yBAAW,sCAAe;AAGlD,QAAM,uBAAmB;AAAA,IACvB,OAAO;AAAA,MACL,IAAI,MAAM,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,MAAM,OAAO,EAAE;AAAA,EAClB;AAEA,QAAM,yBAAqB,qCAAY,gBAAgB;AAGvD,QAAM,qBAA+C,sBAAQ,MAAM;AACjE,QAAI,CAAC,mBAAoB,QAAO;AAEhC,UAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,WAAO;AAAA,MACL,GAAG;AAAA,MACH,iCAAiC,cAAc,SAAS,cAAc;AAAA,MACtE,uBACE,eAAe,QAAQ,cAAc,uCAAsB,QAAQ,uCAAsB;AAAA,MAC3F,aAAa;AAAA,IACf;AAAA,EACF,GAAG,CAAC,oBAAoB,oBAAoB,WAAW,CAAC;AAIxD,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": []
 }