@elliemae/ds-data-table 3.5.0-rc.9 → 3.6.0-next.0

package/dist/esm/parts/Headers/RequiredDot.js

@@ -1,15 +1,16 @@
 import * as React from "react";
-import React2 from "react";
-const RequiredDot = () => /* @__PURE__ */ React2.createElement("svg", {
+import { jsx } from "react/jsx-runtime";
+const RequiredDot = () => /* @__PURE__ */ jsx("svg", {
   height: "4",
   width: "4",
-  style: { marginBottom: "6px", marginLeft: "4px" }
-}, /* @__PURE__ */ React2.createElement("circle", {
-  cx: "2",
-  cy: "2",
-  r: "2",
-  fill: "red"
-}));
+  style: { marginBottom: "6px", marginLeft: "4px" },
+  children: /* @__PURE__ */ jsx("circle", {
+    cx: "2",
+    cy: "2",
+    r: "2",
+    fill: "red"
+  })
+});
 export {
   RequiredDot
 };

package/dist/esm/parts/Headers/RequiredDot.js.map

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/RequiredDot.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\n\nexport const RequiredDot: React.ComponentType = () => (\n  <svg height=\"4\" width=\"4\" style={{ marginBottom: '6px', marginLeft: '4px' }}>\n    <circle cx=\"2\" cy=\"2\" r=\"2\" fill=\"red\" />\n  </svg>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAEX,MAAM,cAAmC,MAC9C,gBAAAA,OAAA,cAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI,OAAO,EAAE,cAAc,OAAO,YAAY,MAAM;AAAA,GACxE,gBAAAA,OAAA,cAAC;AAAA,EAAO,IAAG;AAAA,EAAI,IAAG;AAAA,EAAI,GAAE;AAAA,EAAI,MAAK;AAAA,CAAM,CACzC;",
-  "names": ["React"]
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEO,MAAM,cAAmC,MAC9C,oBAAC;AAAA,EAAI,QAAO;AAAA,EAAI,OAAM;AAAA,EAAI,OAAO,EAAE,cAAc,OAAO,YAAY,MAAM;AAAA,EACxE,8BAAC;AAAA,IAAO,IAAG;AAAA,IAAI,IAAG;AAAA,IAAI,GAAE;AAAA,IAAI,MAAK;AAAA,GAAM;AAAA,CACzC;",
+  "names": []
 }

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import { StyledHeadWrapper, StyledHeadTr } from "../../styled";
 import { DataTableContext } from "../../DataTableContext";
 import { withConditionalDnDColumnContext } from "../HoC/withConditionalDnDColumnContext";
@@ -13,26 +14,28 @@ const HeadersComp = () => {
     visibleColumns
   } = useContext(DataTableContext);
   const HeadersCells = useMemo(
-    () => /* @__PURE__ */ React2.createElement(SortableHeaderCell, {
-      items: visibleColumns
-    }, /* @__PURE__ */ React2.createElement(StyledHeadTr, {
-      role: "row",
-      cols: gridLayout,
-      colsLayoutStyle,
-      isExpandable
-    }, visibleColumns.map((h, index) => /* @__PURE__ */ React2.createElement(HeaderCellGroupSortable, {
-      header: h,
-      key: h.id,
-      isLast: index === visibleColumns.length - 1
-    })))),
+    () => /* @__PURE__ */ jsx(SortableHeaderCell, {
+      items: visibleColumns,
+      children: /* @__PURE__ */ jsx(StyledHeadTr, {
+        role: "row",
+        cols: gridLayout,
+        colsLayoutStyle,
+        isExpandable,
+        children: visibleColumns.map((h, index) => /* @__PURE__ */ jsx(HeaderCellGroupSortable, {
+          header: h,
+          isLast: index === visibleColumns.length - 1
+        }, h.id))
+      })
+    }),
     [isExpandable, visibleColumns, gridLayout, colsLayoutStyle]
   );
   const PureHeaders = useMemo(
-    () => /* @__PURE__ */ React2.createElement(StyledHeadWrapper, {
+    () => /* @__PURE__ */ jsx(StyledHeadWrapper, {
       totalColumnsWidth,
       colsLayoutStyle,
-      ref: columnHeaderRef
-    }, HeadersCells),
+      ref: columnHeaderRef,
+      children: HeadersCells
+    }),
     [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells]
   );
   return PureHeaders;

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/index.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { StyledHeadWrapper, StyledHeadTr } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { withConditionalDnDColumnContext } from '../HoC/withConditionalDnDColumnContext';\nimport { HeaderCellGroupSortable } from './HeaderCellGroup';\nimport { SortableHeaderCell } from '../SortableHeaderCell';\nimport { TypescriptColumn } from '../../types/props';\n\nconst HeadersComp = (): JSX.Element => {\n  const {\n    tableProps: { isExpandable, colsLayoutStyle },\n    layoutHelpers: { gridLayout, totalColumnsWidth },\n    columnHeaderRef,\n    visibleColumns,\n  } = useContext(DataTableContext);\n  const HeadersCells = useMemo(\n    () => (\n      <SortableHeaderCell items={visibleColumns}>\n        <StyledHeadTr role=\"row\" cols={gridLayout} colsLayoutStyle={colsLayoutStyle} isExpandable={isExpandable}>\n          {visibleColumns.map((h: TypescriptColumn, index) => (\n            <HeaderCellGroupSortable header={h} key={h.id} isLast={index === visibleColumns.length - 1} />\n          ))}\n        </StyledHeadTr>\n      </SortableHeaderCell>\n    ),\n    [isExpandable, visibleColumns, gridLayout, colsLayoutStyle],\n  );\n\n  const PureHeaders = useMemo(\n    () => (\n      <StyledHeadWrapper totalColumnsWidth={totalColumnsWidth} colsLayoutStyle={colsLayoutStyle} ref={columnHeaderRef}>\n        {HeadersCells}\n      </StyledHeadWrapper>\n    ),\n    [totalColumnsWidth, colsLayoutStyle, columnHeaderRef, HeadersCells],\n  );\n  return PureHeaders;\n};\n\nexport const Headers = withConditionalDnDColumnContext(HeadersComp);\nexport default Headers;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,YAAY,eAAe;AAC3C,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,wBAAwB;AACjC,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAGnC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,gBAAgB;AAAA,IAC5C,eAAe,EAAE,YAAY,kBAAkB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM,eAAe;AAAA,IACnB,MACE,gBAAAA,OAAA,cAAC;AAAA,MAAmB,OAAO;AAAA,OACzB,gBAAAA,OAAA,cAAC;AAAA,MAAa,MAAK;AAAA,MAAM,MAAM;AAAA,MAAY;AAAA,MAAkC;AAAA,OAC1E,eAAe,IAAI,CAAC,GAAqB,UACxC,gBAAAA,OAAA,cAAC;AAAA,MAAwB,QAAQ;AAAA,MAAG,KAAK,EAAE;AAAA,MAAI,QAAQ,UAAU,eAAe,SAAS;AAAA,KAAG,CAC7F,CACH,CACF;AAAA,IAEF,CAAC,cAAc,gBAAgB,YAAY,eAAe;AAAA,EAC5D;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,gBAAAA,OAAA,cAAC;AAAA,MAAkB;AAAA,MAAsC;AAAA,MAAkC,KAAK;AAAA,OAC7F,YACH;AAAA,IAEF,CAAC,mBAAmB,iBAAiB,iBAAiB,YAAY;AAAA,EACpE;AACA,SAAO;AACT;AAEO,MAAM,UAAU,gCAAgC,WAAW;AAClE,IAAO,kBAAQ;",
-  "names": ["React"]
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB,oBAAoB;AAChD,SAAS,wBAAwB;AACjC,SAAS,uCAAuC;AAChD,SAAS,+BAA+B;AACxC,SAAS,0BAA0B;AAGnC,MAAM,cAAc,MAAmB;AACrC,QAAM;AAAA,IACJ,YAAY,EAAE,cAAc,gBAAgB;AAAA,IAC5C,eAAe,EAAE,YAAY,kBAAkB;AAAA,IAC/C;AAAA,IACA;AAAA,EACF,IAAI,WAAW,gBAAgB;AAC/B,QAAM,eAAe;AAAA,IACnB,MACE,oBAAC;AAAA,MAAmB,OAAO;AAAA,MACzB,8BAAC;AAAA,QAAa,MAAK;AAAA,QAAM,MAAM;AAAA,QAAY;AAAA,QAAkC;AAAA,QAC1E,yBAAe,IAAI,CAAC,GAAqB,UACxC,oBAAC;AAAA,UAAwB,QAAQ;AAAA,UAAc,QAAQ,UAAU,eAAe,SAAS;AAAA,WAAhD,EAAE,EAAiD,CAC7F;AAAA,OACH;AAAA,KACF;AAAA,IAEF,CAAC,cAAc,gBAAgB,YAAY,eAAe;AAAA,EAC5D;AAEA,QAAM,cAAc;AAAA,IAClB,MACE,oBAAC;AAAA,MAAkB;AAAA,MAAsC;AAAA,MAAkC,KAAK;AAAA,MAC7F;AAAA,KACH;AAAA,IAEF,CAAC,mBAAmB,iBAAiB,iBAAiB,YAAY;AAAA,EACpE;AACA,SAAO;AACT;AAEO,MAAM,UAAU,gCAAgC,WAAW;AAClE,IAAO,kBAAQ;",
+  "names": []
 }

package/dist/esm/parts/Headers/useHeaderCellConfig.js

@@ -1,11 +1,14 @@
 import * as React from "react";
-const useHeaderCellConfig = ({
-  column,
-  dragAndDropColumns,
-  draggableProps,
-  reduxHeader,
-  isDragOverlay
-}) => {
+import { useContext, useMemo } from "react";
+import DataTableContext from "../../DataTableContext";
+import { SortableItemContext } from "../HoC/SortableItemContext";
+const useHeaderCellConfig = ({ column, isDragOverlay }) => {
+  const {
+    tableProps: { dragAndDropColumns },
+    reduxHeaders
+  } = useContext(DataTableContext);
+  const { draggableProps } = useContext(SortableItemContext);
+  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);
   const hasFilter = !!(column.filter || column.Filter);
   const hasDnD = dragAndDropColumns && !column.disableDnD;
   const hasSortingCaret = column.canSort && typeof column.isSortedDesc === "boolean";

package/dist/esm/parts/Headers/useHeaderCellConfig.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellConfig.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { TypescriptColumn } from '../../types/props';\nimport { SortableItemContextType } from '../HoC/SortableItemContext';\n\ntype useHeaderCellConfigType = (\n  args: {\n    column: TypescriptColumn;\n    dragAndDropColumns: boolean;\n    reduxHeader: { showDnDHandle: boolean };\n    isDragOverlay: boolean;\n  } & SortableItemContextType,\n) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: useHeaderCellConfigType = ({\n  column,\n  dragAndDropColumns,\n  draggableProps,\n  reduxHeader,\n  isDragOverlay,\n}) => {\n  const hasFilter = !!(column.filter || column.Filter);\n\n  const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n  const hasSortingCaret = column.canSort && typeof column.isSortedDesc === 'boolean';\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  // 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  };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACqBhB,MAAM,sBAA+C,CAAC;AAAA,EAC3D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,OAAO,WAAW,OAAO,OAAO,iBAAiB;AAEzE,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAGJ,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI;AAAe,UAAM,KAAK,aAAa;AAC3C,MAAI;AAAe,UAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { InternalTypescriptColumn } from '../../types/props';\n\ntype UseHeaderCellConfigType = (args: { column: InternalTypescriptColumn; isDragOverlay: boolean }) => {\n  hasFilter: boolean;\n  hasDnD: boolean;\n  hasSortingCaret: boolean;\n  hasRightIcons: boolean;\n  isDragging: boolean;\n  shouldShowDnD: boolean;\n  hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay }) => {\n  const {\n    tableProps: { dragAndDropColumns },\n    reduxHeaders,\n  } = useContext(DataTableContext);\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 = column.canSort && typeof column.isSortedDesc === 'boolean';\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  // 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  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,YAAY,eAAe;AACpC,OAAO,sBAAsB;AAC7B,SAAS,2BAA2B;AAa7B,MAAM,sBAA+C,CAAC,EAAE,QAAQ,cAAc,MAAM;AACzF,QAAM;AAAA,IACJ,YAAY,EAAE,mBAAmB;AAAA,IACjC;AAAA,EACF,IAAI,WAAW,gBAAgB;AAE/B,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,cAAc,QAAQ,MAAM,aAAa,OAAO,KAAK,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,OAAO,WAAW,OAAO,OAAO,iBAAiB;AAEzE,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAGJ,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI;AAAe,UAAM,KAAK,aAAa;AAC3C,MAAI;AAAe,UAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/esm/parts/Headers/useHeaderCellHandlers.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { useCallback } from "react";
+import { useCallback, useContext, useMemo } from "react";
+import DataTableContext from "../../DataTableContext";
 const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, withTabStops = false) => ({
   hideFilterMenu: true,
   ...reduxHeader,
@@ -9,15 +10,36 @@ const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, withTabStops = f
 });
 const useHeaderCellHandlers = ({
   hasFilter,
-  patchHeader,
   column,
-  reduxHeader,
   hasDnD,
-  onColumnSortChange,
   dragHandleRef,
-  filterIconRef,
-  headerRef
+  filterIconRef
 }) => {
+  const {
+    tableProps: { onColumnSortChange, onColumnSort },
+    patchHeader,
+    reduxHeaders,
+    visibleColumns
+  } = useContext(DataTableContext);
+  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);
+  const headerRef = column.ref;
+  const realColumnIndex = useMemo(
+    () => visibleColumns.findIndex((visibleColumn) => visibleColumn.id === column.id),
+    [column.id, visibleColumns]
+  );
+  const getNextSortedVisibleColumns = useCallback(
+    (isSortedDesc) => {
+      const visibleColumnsCopy = visibleColumns.reduce((acc, col) => {
+        if (col.columns) {
+          return [...acc, ...col.columns];
+        }
+        return [...acc, { ...col }];
+      }, []);
+      visibleColumnsCopy[realColumnIndex].isSortedDesc = isSortedDesc;
+      return visibleColumnsCopy;
+    },
+    [realColumnIndex, visibleColumns]
+  );
   const onMouseEnter = useCallback(() => {
     patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
   }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);
@@ -32,8 +54,9 @@ const useHeaderCellHandlers = ({
         column: column.id,
         direction: column.isSortedDesc ? "ASC" : "DESC"
       });
+      onColumnSort(getNextSortedVisibleColumns(!column.isSortedDesc), column.id, column.isSortedDesc ? "ASC" : "DESC");
     }
-  }, [column.canSort, column.id, column.isSortedDesc, onColumnSortChange]);
+  }, [column.canSort, column.id, column.isSortedDesc, getNextSortedVisibleColumns, onColumnSort, onColumnSortChange]);
   const onKeyDown = useCallback(
     (e) => {
       if (e.code === "ArrowDown" && column.canSort) {
@@ -42,12 +65,14 @@ const useHeaderCellHandlers = ({
           column: column.id,
           direction: "DESC"
         });
+        onColumnSort(getNextSortedVisibleColumns(true), column.id, "DESC");
       } else if (e.code === "ArrowUp" && column.canSort) {
         e.preventDefault();
         onColumnSortChange({
           column: column.id,
           direction: "ASC"
         });
+        onColumnSort(getNextSortedVisibleColumns(false), column.id, "ASC");
       } else if (["Enter", "Space"].includes(e.code)) {
         patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, true));
         setTimeout(() => {
@@ -62,6 +87,8 @@ const useHeaderCellHandlers = ({
       column.canSort,
       column.id,
       onColumnSortChange,
+      onColumnSort,
+      getNextSortedVisibleColumns,
       patchHeader,
       reduxHeader,
       hasFilter,

package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellHandlers.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { useCallback } from 'react';\nimport { TypescriptColumn } from '../../types/props';\n\ntype useHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  patchHeader: (headerId: string, newHeader: Record<string, unknown>) => void;\n  column: TypescriptColumn;\n  reduxHeader: Record<string, unknown>;\n  hasDnD: boolean;\n  onColumnSortChange: (newSort: { column: string; direction: 'ASC' | 'DESC' }) => void;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement>;\n  filterIconRef: React.MutableRefObject<HTMLDivElement>;\n  headerRef: React.MutableRefObject<HTMLTableColElement>;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  onClick: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\nconst buildNextHeader = (\n  reduxHeader: Record<string, unknown>,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: 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  withTabStops,\n});\n\nexport const useHeaderCellHandlers: useHeaderCellHandlersType = ({\n  hasFilter,\n  patchHeader,\n  column,\n  reduxHeader,\n  hasDnD,\n  onColumnSortChange,\n  dragHandleRef,\n  filterIconRef,\n  headerRef,\n}) => {\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const onClick: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, onColumnSortChange]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange({\n          column: column.id,\n          direction: 'DESC',\n        });\n      } else if (e.code === 'ArrowUp' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange({\n          column: column.id,\n          direction: 'ASC',\n        });\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, 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        });\n      }\n    },\n    [\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      dragHandleRef,\n      filterIconRef,\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      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n      }\n    },\n    [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader],\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      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    },\n    [dragHandleRef, filterIconRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, onClick, onKeyDown, onBlur, onFocus };\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,mBAAmB;AAsB5B,MAAM,kBAAkB,CACtB,aACA,OACA,WACA,QACA,eAAe,WACX;AAAA,EACJ,gBAAgB;AAAA,EAChB,GAAG;AAAA,EACH,kBAAkB,EAAE,aAAa;AAAA,EACjC,eAAe,UAAU;AAAA,EACzB;AACF;AAEO,MAAM,wBAAmD,CAAC;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAwC,YAAY,MAAM;AAC9D,gBAAY,OAAO,IAAI,gBAAgB,aAAa,MAAM,WAAW,MAAM,CAAC;AAAA,EAC9E,GAAG,CAAC,OAAO,IAAI,QAAQ,WAAW,aAAa,WAAW,CAAC;AAE3D,QAAM,eAAwC,YAAY,MAAM;AAC9D,QAAI,CAAC,WAAW,SAAS,SAAS,SAAS,aAAa,GAAG;AACzD,kBAAY,OAAO,IAAI,gBAAgB,aAAa,OAAO,WAAW,MAAM,CAAC;AAAA,IAC/E;AAAA,EACF,GAAG,CAAC,OAAO,IAAI,QAAQ,WAAW,WAAW,aAAa,WAAW,CAAC;AAEtE,QAAM,UAAmC,YAAY,MAAM;AACzD,QAAI,OAAO,SAAS;AAClB,yBAAmB;AAAA,QACjB,QAAQ,OAAO;AAAA,QACf,WAAW,OAAO,eAAe,QAAQ;AAAA,MAC3C,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,OAAO,SAAS,OAAO,IAAI,OAAO,cAAc,kBAAkB,CAAC;AAEvE,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,eAAe,OAAO,SAAS;AAC5C,UAAE,eAAe;AACjB,2BAAmB;AAAA,UACjB,QAAQ,OAAO;AAAA,UACf,WAAW;AAAA,QACb,CAAC;AAAA,MACH,WAAW,EAAE,SAAS,aAAa,OAAO,SAAS;AACjD,UAAE,eAAe;AACjB,2BAAmB;AAAA,UACjB,QAAQ,OAAO;AAAA,UACf,WAAW;AAAA,QACb,CAAC;AAAA,MACH,WAAW,CAAC,SAAS,OAAO,EAAE,SAAS,EAAE,IAAI,GAAG;AAC9C,oBAAY,OAAO,IAAI,gBAAgB,aAAa,MAAM,WAAW,QAAQ,IAAI,CAAC;AAElF,mBAAW,MAAM;AACf,cAAI,cAAc;AAAS,0BAAc,QAAQ,MAAM;AAAA,mBAC9C,cAAc;AAAS,0BAAc,QAAQ,MAAM;AAAA,QAC9D,CAAC;AAAA,MACH;AAAA,IACF;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAmC;AAAA,IACvC,CAAC,MAAM;AAEL,UAAI,EAAE,WAAW,WAAW,SAAS;AACnC,oBAAY,OAAO,IAAI,gBAAgB,aAAa,MAAM,WAAW,MAAM,CAAC;AAAA,MAC9E;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,QAAQ,WAAW,WAAW,aAAa,WAAW;AAAA,EACpE;AAEA,QAAM,SAAkC;AAAA,IACtC,CAAC,MAAM;AAEL,UAAI,EAAE,kBAAkB,cAAc;AAAS;AAC/C,UAAI,EAAE,kBAAkB,cAAc;AAAS;AAC/C,kBAAY,OAAO,IAAI,gBAAgB,aAAa,OAAO,WAAW,MAAM,CAAC;AAAA,IAC/E;AAAA,IACA,CAAC,eAAe,eAAe,aAAa,OAAO,IAAI,aAAa,WAAW,MAAM;AAAA,EACvF;AAEA,SAAO,EAAE,cAAc,cAAc,SAAS,WAAW,QAAQ,QAAQ;AAC3E;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport { useCallback, useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { InternalTypescriptColumn, ReduxHeader, TypescriptColumn } from '../../types/props';\n\ntype UseHeaderCellHandlersType = (args: {\n  hasFilter: boolean;\n  column: InternalTypescriptColumn;\n  hasDnD: boolean;\n  dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n  filterIconRef: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n  onMouseEnter: React.MouseEventHandler;\n  onMouseLeave: React.MouseEventHandler;\n  onClick: React.MouseEventHandler;\n  onKeyDown: React.KeyboardEventHandler;\n  onFocus: React.FocusEventHandler;\n  onBlur: React.FocusEventHandler;\n};\n\nconst buildNextHeader = (\n  reduxHeader: ReduxHeader,\n  value: boolean,\n  hasFilter: boolean,\n  hasDnD: 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  withTabStops,\n});\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n  hasFilter,\n  column,\n  hasDnD,\n  dragHandleRef,\n  filterIconRef,\n}) => {\n  const {\n    tableProps: { onColumnSortChange, onColumnSort },\n    patchHeader,\n    reduxHeaders,\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n  const headerRef = column.ref;\n\n  const realColumnIndex = useMemo(\n    () => visibleColumns.findIndex((visibleColumn) => visibleColumn.id === column.id),\n    [column.id, visibleColumns],\n  );\n\n  const getNextSortedVisibleColumns = useCallback(\n    (isSortedDesc: boolean) => {\n      const visibleColumnsCopy = visibleColumns.reduce((acc, col) => {\n        if (col.columns) {\n          return [...acc, ...col.columns];\n        }\n        return [...acc, { ...col }];\n      }, [] as TypescriptColumn[]);\n      visibleColumnsCopy[realColumnIndex].isSortedDesc = isSortedDesc;\n      return visibleColumnsCopy;\n    },\n    [realColumnIndex, visibleColumns],\n  );\n\n  const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n    patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n  }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);\n\n  const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n    if (!headerRef?.current?.contains(document.activeElement)) {\n      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    }\n  }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);\n\n  const onClick: React.MouseEventHandler = useCallback(() => {\n    if (column.canSort) {\n      onColumnSortChange({\n        column: column.id,\n        direction: column.isSortedDesc ? 'ASC' : 'DESC',\n      });\n      onColumnSort(getNextSortedVisibleColumns(!column.isSortedDesc), column.id, column.isSortedDesc ? 'ASC' : 'DESC');\n    }\n  }, [column.canSort, column.id, column.isSortedDesc, getNextSortedVisibleColumns, onColumnSort, onColumnSortChange]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'ArrowDown' && column.canSort) {\n        e.preventDefault();\n        onColumnSortChange({\n          column: column.id,\n          direction: 'DESC',\n        });\n        onColumnSort(getNextSortedVisibleColumns(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(false), column.id, 'ASC');\n      } else if (['Enter', 'Space'].includes(e.code)) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, 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        });\n      }\n    },\n    [\n      column.canSort,\n      column.id,\n      onColumnSortChange,\n      onColumnSort,\n      getNextSortedVisibleColumns,\n      patchHeader,\n      reduxHeader,\n      hasFilter,\n      hasDnD,\n      dragHandleRef,\n      filterIconRef,\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      if (e.target === headerRef?.current) {\n        patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));\n      }\n    },\n    [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader],\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      patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));\n    },\n    [dragHandleRef, filterIconRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n  );\n\n  return { onMouseEnter, onMouseLeave, onClick, onKeyDown, onBlur, onFocus };\n};\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { createContext, useCallback, useMemo } from "react";
 import { DndContext, DragOverlay, arrayMove, useHierarchyDndkitConfig } from "@elliemae/ds-drag-and-drop";
 import { DataTableContext } from "../../DataTableContext";
@@ -78,17 +79,24 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
     onPreviewDragStart
   });
   if (dragAndDropColumns)
-    return /* @__PURE__ */ React2.createElement(DndContext, {
-      ...dndContextProps
-    }, /* @__PURE__ */ React2.createElement(DnDGroupContext.Provider, {
-      value: { activeIndex }
-    }, /* @__PURE__ */ React2.createElement(Component, {
-      ...props
-    })), /* @__PURE__ */ React2.createElement(DragOverlay, null, activeId ? /* @__PURE__ */ React2.createElement(HeaderCellGroup, {
-      header: flattenedItems.find(([item]) => item.id === activeId)[1],
-      isDragOverlay: true
-    }) : null));
-  return /* @__PURE__ */ React2.createElement(Component, {
+    return /* @__PURE__ */ jsxs(DndContext, {
+      ...dndContextProps,
+      children: [
+        /* @__PURE__ */ jsx(DnDGroupContext.Provider, {
+          value: { activeIndex },
+          children: /* @__PURE__ */ jsx(Component, {
+            ...props
+          })
+        }),
+        /* @__PURE__ */ jsx(DragOverlay, {
+          children: activeId ? /* @__PURE__ */ jsx(HeaderCellGroup, {
+            header: flattenedItems.find(([item]) => item.id === activeId)[1],
+            isDragOverlay: true
+          }) : null
+        })
+      ]
+    });
+  return /* @__PURE__ */ jsx(Component, {
     ...props
   });
 };

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDColumnContext.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-underscore-dangle */\n/* eslint-disable max-params */\nimport React, { createContext, useCallback, useMemo } from 'react';\nimport { DndContext, DragOverlay, arrayMove, useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DataTableContext } from '../../DataTableContext';\nimport { Item } from '../../helpers/dndkit/hierarchy/types';\nimport { TypescriptColumn } from '../../types/props';\nimport { HeaderCellGroup } from '../internal';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { INTERNAL_COLUMNS } from '../../addons/Columns';\n\ntype DnDGroupContextType = {\n  activeIndex: number;\n};\n\nexport const DnDGroupContext = createContext<DnDGroupContextType>({\n  activeIndex: undefined,\n});\n\nconst flattenColumns = (cols: TypescriptColumn[]) => {\n  const flattened = [];\n  const flatten = (col: TypescriptColumn, index, parentId = null) => {\n    const { id } = col;\n    flattened.push([{ id, parentId, index }, col]);\n    if (col.columns)\n      col.columns.forEach((subColumn: TypescriptColumn, childIndex: number) => flatten(subColumn, childIndex, id));\n  };\n  cols.forEach((col, index) => flatten(col, index));\n  return flattened;\n};\n\n// only wraps in \"DnDContext\" and \"DnDGroupContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDColumnContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropColumns, onColumnsReorder },\n    visibleColumns,\n  } = React.useContext(DataTableContext);\n\n  const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);\n\n  const onReorder = useCallback(\n    (movedItem: Item, indexes: { targetIndex: number; fromIndex: number }) => {\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 = {};\n      newFlattenedData.forEach(([dndData, colData]) => {\n        delete colData.columns;\n        nodes[dndData.id] = colData;\n      });\n      const newData = [];\n      newFlattenedData.forEach(([dndData, colData]) => {\n        // Don't send internal columns to the user\n        if (INTERNAL_COLUMNS.includes(dndData.id)) {\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 onPreviewResetState = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) el.onscroll = () => null;\n  }, []);\n\n  const onPreviewDragStart = useCallback(() => {\n    const el: HTMLDivElement | null = document.body.querySelector(\n      `[data-testid=\"${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}\"]`,\n    );\n    if (el) {\n      const y = el.scrollTop;\n      el.onscroll = () => {\n        el.scrollTo({ top: y });\n      };\n    }\n  }, []);\n\n  const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({\n    flattenedItems,\n    dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,\n    isHorizontalDnD: true,\n    onReorder,\n    onPreviewResetState,\n    onPreviewDragStart,\n  });\n\n  if (dragAndDropColumns)\n    return (\n      <DndContext {...dndContextProps}>\n        <DnDGroupContext.Provider value={{ activeIndex }}>\n          <Component {...props} />\n        </DnDGroupContext.Provider>\n        <DragOverlay>\n          {activeId ? (\n            <HeaderCellGroup header={flattenedItems.find(([item]) => item.id === activeId)[1]} isDragOverlay />\n          ) : null}\n        </DragOverlay>\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
-  "mappings": "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",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAEA,OAAOA,UAAS,eAAe,aAAa,eAAe;AAC3D,SAAS,YAAY,aAAa,WAAW,gCAAgC;AAE7E,SAAS,wBAAwB;AAGjC,SAAS,uBAAuB;AAChC,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AAM1B,MAAM,kBAAkB,cAAmC;AAAA,EAChE,aAAa;AACf,CAAC;AAED,MAAM,iBAAiB,CAAC,SAA6B;AACnD,QAAM,YAAY,CAAC;AACnB,QAAM,UAAU,CAAC,KAAuB,OAAO,WAAW,SAAS;AACjE,UAAM,EAAE,GAAG,IAAI;AACf,cAAU,KAAK,CAAC,EAAE,IAAI,UAAU,MAAM,GAAG,GAAG,CAAC;AAC7C,QAAI,IAAI;AACN,UAAI,QAAQ,QAAQ,CAAC,WAA6B,eAAuB,QAAQ,WAAW,YAAY,EAAE,CAAC;AAAA,EAC/G;AACA,OAAK,QAAQ,CAAC,KAAK,UAAU,QAAQ,KAAK,KAAK,CAAC;AAChD,SAAO;AACT;AAGO,MAAM,kCAAiD,CAAC,cAAc,CAAC,UAAU;AACtF,QAAM;AAAA,IACJ,YAAY,EAAE,oBAAoB,iBAAiB;AAAA,IACnD;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AAErC,QAAM,iBAAiB,QAAQ,MAAM,eAAe,cAAc,GAAG,CAAC,cAAc,CAAC;AAErF,QAAM,YAAY;AAAA,IAChB,CAAC,WAAiB,YAAwD;AAExE,YAAM,mBAAmB,UAAU,gBAAgB,QAAQ,WAAW,QAAQ,WAAW;AAEzF,YAAM,QAAQ,CAAC;AACf,uBAAiB,QAAQ,CAAC,CAAC,SAAS,OAAO,MAAM;AAC/C,eAAO,QAAQ;AACf,cAAM,QAAQ,MAAM;AAAA,MACtB,CAAC;AACD,YAAM,UAAU,CAAC;AACjB,uBAAiB,QAAQ,CAAC,CAAC,SAAS,OAAO,MAAM;AAE/C,YAAI,iBAAiB,SAAS,QAAQ,EAAE,GAAG;AACzC;AAAA,QACF;AAGA,YAAI,QAAQ,UAAU;AACpB,gBAAM,aAAa,MAAM,QAAQ;AACjC,cAAI,WAAW;AAAS,uBAAW,QAAQ,KAAK,OAAO;AAAA;AAClD,uBAAW,UAAU,CAAC,OAAO;AAAA,QACpC;AAAO,kBAAQ,KAAK,OAAO;AAAA,MAC7B,CAAC;AACD,uBAAiB,SAAS,OAAO;AAAA,IACnC;AAAA,IACA,CAAC,gBAAgB,gBAAgB;AAAA,EACnC;AAEA,QAAM,sBAAsB,YAAY,MAAM;AAC5C,UAAM,KAA4B,SAAS,KAAK;AAAA,MAC9C,iBAAiB,YAAY;AAAA,IAC/B;AACA,QAAI;AAAI,SAAG,WAAW,MAAM;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,MAAM;AAC3C,UAAM,KAA4B,SAAS,KAAK;AAAA,MAC9C,iBAAiB,YAAY;AAAA,IAC/B;AACA,QAAI,IAAI;AACN,YAAM,IAAI,GAAG;AACb,SAAG,WAAW,MAAM;AAClB,WAAG,SAAS,EAAE,KAAK,EAAE,CAAC;AAAA,MACxB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,EAAE,iBAAiB,UAAU,YAAY,IAAI,yBAAyB;AAAA,IAC1E;AAAA,IACA,uBAAuB,YAAY;AAAA,IACnC,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,MAAI;AACF,WACE,qBAAC;AAAA,MAAY,GAAG;AAAA,MACd;AAAA,4BAAC,gBAAgB,UAAhB;AAAA,UAAyB,OAAO,EAAE,YAAY;AAAA,UAC7C,8BAAC;AAAA,YAAW,GAAG;AAAA,WAAO;AAAA,SACxB;AAAA,QACA,oBAAC;AAAA,UACE,qBACC,oBAAC;AAAA,YAAgB,QAAQ,eAAe,KAAK,CAAC,CAAC,IAAI,MAAM,KAAK,OAAO,QAAQ,EAAE;AAAA,YAAI,eAAa;AAAA,WAAC,IAC/F;AAAA,SACN;AAAA;AAAA,KACF;AAEJ,SAAO,oBAAC;AAAA,IAAW,GAAG;AAAA,GAAO;AAC/B;",
   "names": ["React"]
 }

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { createContext, useCallback } from "react";
 import { DataTableContext } from "../../DataTableContext";
 import { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
@@ -53,31 +54,38 @@ const withConditionalDnDRowContext = (Component) => (props) => {
   if (lastActiveId !== activeId && activeId)
     setLastActiveId(activeId);
   if (dragAndDropRows)
-    return /* @__PURE__ */ React2.createElement(DndContext, {
-      ...dndContextProps
-    }, /* @__PURE__ */ React2.createElement(SortableContext, {
-      ...sortableContextProps
-    }, /* @__PURE__ */ React2.createElement(DnDTreeContext.Provider, {
-      value: {
-        activeIndex,
-        depth,
-        visibleItems,
-        dropIndicatorPosition,
-        lastActiveId,
-        setLastActiveId
-      }
-    }, /* @__PURE__ */ React2.createElement(Component, {
-      ...props
-    }))), createPortal(
-      /* @__PURE__ */ React2.createElement(DragOverlay, {
-        style: { width: "auto" }
-      }, activeId ? /* @__PURE__ */ React2.createElement(Row, {
-        row: flattenedData.find((row) => row.uid === activeId),
-        isDragOverlay: true
-      }) : null),
-      document.body
-    ));
-  return /* @__PURE__ */ React2.createElement(Component, {
+    return /* @__PURE__ */ jsxs(DndContext, {
+      ...dndContextProps,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, {
+          ...sortableContextProps,
+          children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, {
+            value: {
+              activeIndex,
+              depth,
+              visibleItems,
+              dropIndicatorPosition,
+              lastActiveId,
+              setLastActiveId
+            },
+            children: /* @__PURE__ */ jsx(Component, {
+              ...props
+            })
+          })
+        }),
+        createPortal(
+          /* @__PURE__ */ jsx(DragOverlay, {
+            style: { width: "auto" },
+            children: activeId ? /* @__PURE__ */ jsx(Row, {
+              row: flattenedData.find((row) => row.uid === activeId),
+              isDragOverlay: true
+            }) : null
+          }),
+          document.body
+        )
+      ]
+    });
+  return /* @__PURE__ */ jsx(Component, {
     ...props
   });
 };

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

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { createContext, useCallback } from 'react';\nimport { DataTableContext } from '../../DataTableContext';\nimport { FunctionalHOC } from '../../types/FunctionalHoC';\nimport { DndContext, DragOverlay, SortableContext, useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';\nimport { Item } from '../../helpers/dndkit/tree/types';\nimport { Row } from '../Row';\nimport { createPortal } from 'react-dom';\nimport { DropIndicatorPosition } from '../../types/props';\n\ntype DnDTreeContextType = {\n  depth: number;\n  activeIndex: number;\n  visibleItems: unknown[];\n  dropIndicatorPosition: DropIndicatorPosition;\n  lastActiveId: string;\n  setLastActiveId: React.Dispatch<React.SetStateAction<string>>;\n};\n\nexport const DnDTreeContext = createContext<DnDTreeContextType>({\n  depth: undefined,\n  activeIndex: undefined,\n  visibleItems: undefined,\n  dropIndicatorPosition: DropIndicatorPosition.None,\n  lastActiveId: undefined,\n  setLastActiveId: undefined,\n});\n\n// only wraps in \"DnDContext\" and \"DnDTreeContext\" if any Drag and Drop functionality is requested\nexport const withConditionalDnDRowContext: FunctionalHOC = (Component) => (props) => {\n  const {\n    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel },\n    flattenedData,\n    allDataFlattened,\n  } = React.useContext(DataTableContext);\n\n  const [lastActiveId, setLastActiveId] = React.useState<string>(null);\n\n  const onReorder = useCallback(\n    (newData: Item[], indexes: { targetIndex: number; fromIndex: number }, considerExpanding: string) => {\n      // Pull the row's original data into an object\n      const nodes = {};\n      newData.forEach((row) => {\n        delete row.original.subRows;\n        nodes[row.uid] = row.original;\n      });\n      const newUserData = [];\n      newData.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, indexes, considerExpanding);\n    },\n    [onRowsReorder],\n  );\n\n  const { dndContextProps, sortableContextProps, activeId, activeIndex, depth, dropIndicatorPosition, visibleItems } =\n    useTreeDndkitConfig({\n      flattenedItems: allDataFlattened,\n      visibleItems: flattenedData,\n      isHorizontalDnD: false,\n      isExpandable,\n      onReorder,\n      maxDragAndDropLevel,\n    });\n\n  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);\n\n  if (dragAndDropRows)\n    return (\n      <DndContext {...dndContextProps}>\n        <SortableContext {...sortableContextProps}>\n          <DnDTreeContext.Provider\n            value={{\n              activeIndex,\n              depth,\n              visibleItems,\n              dropIndicatorPosition,\n              lastActiveId,\n              setLastActiveId,\n            }}\n          >\n            <Component {...props} />\n          </DnDTreeContext.Provider>\n        </SortableContext>\n        {createPortal(\n          <DragOverlay style={{ width: 'auto' }}>\n            {activeId ? <Row row={flattenedData.find((row) => row.uid === activeId)} isDragOverlay /> : null}\n          </DragOverlay>,\n          document.body,\n        )}\n      </DndContext>\n    );\n  return <Component {...props} />;\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,eAAe,mBAAmB;AAClD,SAAS,wBAAwB;AAEjC,SAAS,YAAY,aAAa,iBAAiB,2BAA2B;AAE9E,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AAW/B,MAAM,iBAAiB,cAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,sBAAsB;AAAA,EAC7C,cAAc;AAAA,EACd,iBAAiB;AACnB,CAAC;AAGM,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,oBAAoB;AAAA,IAChF;AAAA,IACA;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AAErC,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAiB,IAAI;AAEnE,QAAM,YAAY;AAAA,IAChB,CAAC,SAAiB,SAAqD,sBAA8B;AAEnG,YAAM,QAAQ,CAAC;AACf,cAAQ,QAAQ,CAAC,QAAQ;AACvB,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,OAAO,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,cAAQ,QAAQ,CAAC,QAAQ;AAGvB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI;AAC7B,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,SAAS,iBAAiB;AAAA,IACvD;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,UAAU,aAAa,OAAO,uBAAuB,aAAa,IAC/G,oBAAoB;AAAA,IAClB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,MAAI,iBAAiB,YAAY;AAAU,oBAAgB,QAAQ;AAEnE,MAAI;AACF,WACE,gBAAAA,OAAA,cAAC;AAAA,MAAY,GAAG;AAAA,OACd,gBAAAA,OAAA,cAAC;AAAA,MAAiB,GAAG;AAAA,OACnB,gBAAAA,OAAA,cAAC,eAAe,UAAf;AAAA,MACC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,OAEA,gBAAAA,OAAA,cAAC;AAAA,MAAW,GAAG;AAAA,KAAO,CACxB,CACF,GACC;AAAA,MACC,gBAAAA,OAAA,cAAC;AAAA,QAAY,OAAO,EAAE,OAAO,OAAO;AAAA,SACjC,WAAW,gBAAAA,OAAA,cAAC;AAAA,QAAI,KAAK,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,QAAQ;AAAA,QAAG,eAAa;AAAA,OAAC,IAAK,IAC9F;AAAA,MACA,SAAS;AAAA,IACX,CACF;AAEJ,SAAO,gBAAAA,OAAA,cAAC;AAAA,IAAW,GAAG;AAAA,GAAO;AAC/B;",
+  "mappings": "AAAA,YAAY,WAAW;ACAvB;AAAA,OAAOA,UAAS,eAAe,mBAAmB;AAClD,SAAS,wBAAwB;AAEjC,SAAS,YAAY,aAAa,iBAAiB,2BAA2B;AAE9E,SAAS,WAAW;AACpB,SAAS,oBAAoB;AAC7B,SAAS,6BAA6B;AAW/B,MAAM,iBAAiB,cAAkC;AAAA,EAC9D,OAAO;AAAA,EACP,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB,sBAAsB;AAAA,EAC7C,cAAc;AAAA,EACd,iBAAiB;AACnB,CAAC;AAGM,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,oBAAoB;AAAA,IAChF;AAAA,IACA;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AAErC,QAAM,CAAC,cAAc,eAAe,IAAIA,OAAM,SAAiB,IAAI;AAEnE,QAAM,YAAY;AAAA,IAChB,CAAC,SAAiB,SAAqD,sBAA8B;AAEnG,YAAM,QAAQ,CAAC;AACf,cAAQ,QAAQ,CAAC,QAAQ;AACvB,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,OAAO,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,cAAQ,QAAQ,CAAC,QAAQ;AAGvB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI;AAC7B,cAAI,YAAY;AAAS,uBAAW,QAAQ,KAAK,IAAI,QAAQ;AAAA;AACxD,uBAAW,UAAU,CAAC,IAAI,QAAQ;AAAA,QACzC;AAAO,sBAAY,KAAK,IAAI,QAAQ;AAAA,MACtC,CAAC;AAED,oBAAc,aAAa,SAAS,iBAAiB;AAAA,IACvD;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,UAAU,aAAa,OAAO,uBAAuB,aAAa,IAC/G,oBAAoB;AAAA,IAClB,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAEH,MAAI,iBAAiB,YAAY;AAAU,oBAAgB,QAAQ;AAEnE,MAAI;AACF,WACE,qBAAC;AAAA,MAAY,GAAG;AAAA,MACd;AAAA,4BAAC;AAAA,UAAiB,GAAG;AAAA,UACnB,8BAAC,eAAe,UAAf;AAAA,YACC,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YACF;AAAA,YAEA,8BAAC;AAAA,cAAW,GAAG;AAAA,aAAO;AAAA,WACxB;AAAA,SACF;AAAA,QACC;AAAA,UACC,oBAAC;AAAA,YAAY,OAAO,EAAE,OAAO,OAAO;AAAA,YACjC,qBAAW,oBAAC;AAAA,cAAI,KAAK,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,QAAQ;AAAA,cAAG,eAAa;AAAA,aAAC,IAAK;AAAA,WAC9F;AAAA,UACA,SAAS;AAAA,QACX;AAAA;AAAA,KACF;AAEJ,SAAO,oBAAC;AAAA,IAAW,GAAG;AAAA,GAAO;AAC/B;",
   "names": ["React"]
 }

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

@@ -1,19 +1,21 @@
 import * as React from "react";
+import { jsx } from "react/jsx-runtime";
 import { horizontalListSortingStrategy, SortableContext } from "@elliemae/ds-drag-and-drop";
-import React2, { useContext } from "react";
+import { useContext } from "react";
 import { DataTableContext } from "../../DataTableContext";
 const withConditionalDnDSortableContext = (items, isDragOverlay = false) => (Component) => (props) => {
   const {
     tableProps: { dragAndDropColumns }
   } = useContext(DataTableContext);
   if (!isDragOverlay && dragAndDropColumns)
-    return /* @__PURE__ */ React2.createElement(SortableContext, {
+    return /* @__PURE__ */ jsx(SortableContext, {
       items: items.map((item) => item.id),
-      strategy: horizontalListSortingStrategy
-    }, /* @__PURE__ */ React2.createElement(Component, {
-      ...props
-    }));
-  return /* @__PURE__ */ React2.createElement(Component, {
+      strategy: horizontalListSortingStrategy,
+      children: /* @__PURE__ */ jsx(Component, {
+        ...props
+      })
+    });
+  return /* @__PURE__ */ jsx(Component, {
     ...props
   });
 };

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

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

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
 import { DataTableContext } from "../../DataTableContext";
 import { DropIndicatorPosition } from "../../types/props";
@@ -33,11 +34,12 @@ const withDnDSortableColumnContext = (Component) => (props) => {
     }),
     [draggableProps]
   );
-  return /* @__PURE__ */ React2.createElement(SortableItemContext.Provider, {
-    value: ctx
-  }, /* @__PURE__ */ React2.createElement(Component, {
-    ...props
-  }));
+  return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(Component, {
+      ...props
+    })
+  });
 };
 export {
   withDnDSortableColumnContext

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

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

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

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
 import { useSortable } from "@elliemae/ds-drag-and-drop";
 import { DataTableContext } from "../../DataTableContext";
 import { DnDTreeContext } from "./withConditionalDnDRowContext";
@@ -34,11 +35,12 @@ const withDnDSortableRowContext = (Component) => (props) => {
     }),
     [draggableProps]
   );
-  return /* @__PURE__ */ React2.createElement(SortableItemContext.Provider, {
-    value: ctx
-  }, /* @__PURE__ */ React2.createElement(Component, {
-    ...props
-  }));
+  return /* @__PURE__ */ jsx(SortableItemContext.Provider, {
+    value: ctx,
+    children: /* @__PURE__ */ jsx(Component, {
+      ...props
+    })
+  });
 };
 export {
   withDnDSortableRowContext

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

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

package/dist/esm/parts/Loader.js

@@ -1,5 +1,6 @@
 import * as React from "react";
-import React2, { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { memo } from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
 import { styled } from "@elliemae/ds-system";
@@ -8,16 +9,17 @@ const StyledLoaderWrapper = styled(Grid)`
   z-index: 0;
   background-color: white;
 `;
-const Loader = () => /* @__PURE__ */ React2.createElement(StyledLoaderWrapper, {
+const Loader = () => /* @__PURE__ */ jsx(StyledLoaderWrapper, {
   style: { height: "100%", maxHeight: "500px" },
-  "aria-live": "polite"
-}, /* @__PURE__ */ React2.createElement(DSCircularProgressIndicator, {
-  size: "xl",
-  loading: true,
-  showLabel: true,
-  waiting: false,
-  showTooltip: false
-}));
+  "aria-live": "polite",
+  children: /* @__PURE__ */ jsx(DSCircularProgressIndicator, {
+    size: "xl",
+    loading: true,
+    showLabel: true,
+    waiting: false,
+    showTooltip: false
+  })
+});
 const MemoizedLoader = memo(Loader);
 var Loader_default = MemoizedLoader;
 export {