@elliemae/ds-data-table 3.21.0-next.8 → 3.21.0-next.9

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.
@@ -47,15 +47,16 @@ const withConditionalDnDRowContext = (Component) => (props) => {
47
47
  } = import_react.default.useContext(import_DataTableContext.DataTableContext);
48
48
  const onReorder = (0, import_react.useCallback)(
49
49
  (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {
50
+ const rootMovedData = movedData.root;
50
51
  const nodes = {};
51
- movedData.forEach((row) => {
52
+ rootMovedData.forEach((row) => {
52
53
  if (row.original.subRows)
53
54
  delete row.original.subRows;
54
55
  delete row.original.subRows;
55
56
  nodes[row.uid] = row.original;
56
57
  });
57
58
  const newUserData = [];
58
- movedData.forEach((row) => {
59
+ rootMovedData.forEach((row) => {
59
60
  if (row.parentId) {
60
61
  const parentNode = nodes[row.parentId];
61
62
  if (parentNode?.subRows)
@@ -80,6 +81,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
80
81
  maxDragAndDropLevel,
81
82
  getIsDropValid
82
83
  });
84
+ const containerSortableContextProps = sortableContextProps["root"];
83
85
  const visibleItems = (0, import_react.useMemo)(() => {
84
86
  if (!active)
85
87
  return flattenedData;
@@ -99,7 +101,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
99
101
  );
100
102
  if (dragAndDropRows)
101
103
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ds_drag_and_drop.DndContext, { ...dndContextProps, children: [
102
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...sortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDTreeContext.DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }) }),
104
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DnDTreeContext.DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props }) }) }),
103
105
  (0, import_react_dom.createPortal)(
104
106
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_drag_and_drop.DragOverlay, { style: { width: "auto" }, modifiers: [import_ds_drag_and_drop.restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Row.Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),
105
107
  document.body
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/HoC/withConditionalDnDRowContext.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\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';\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, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n movedData.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 movedData.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 },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: allDataFlattened,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const visibleItems = useMemo(() => {\n if (!active) return flattenedData;\n return removeChildrenOf(flattenedData, active.id) as DSDataTableT.InternalRow[];\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 {...sortableContextProps}>\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"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoFjB;AAnFN,mBAA4C;AAC5C,8BAQO;AACP,uBAA6B;AAC7B,8BAAiC;AAEjC,iBAAoB;AACpB,4BAA+B;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AAErC,QAAM,gBAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AAErE,YAAM,QAA0C,CAAC;AACjD,gBAAU,QAAQ,CAAC,QAAQ;AACzB,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,gBAAU,QAAQ,CAAC,QAAQ;AAGzB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,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,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QAAI,6CAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,eAAO,0CAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,qBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,sBACnB,sDAAC,qCAAe,UAAf,EAAwB,OAAO,KAC9B,sDAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,yDAAiC,GACjF,mBAAS,4CAAC,kBAAI,KAAK,gBAA4C,eAAa,MAAC,IAAK,MACrF;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
4
+ "sourcesContent": ["/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\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';\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, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\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 },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: allDataFlattened,\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 if (!active) return flattenedData;\n return removeChildrenOf(flattenedData, active.id) as DSDataTableT.InternalRow[];\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"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADsFjB;AArFN,mBAA4C;AAC5C,8BAQO;AACP,uBAA6B;AAC7B,8BAAiC;AAEjC,iBAAoB;AACpB,4BAA+B;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAI,aAAAA,QAAM,WAAW,wCAAgB;AACrC,QAAM,gBAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AACrE,YAAM,gBAAgB,UAAU;AAEhC,YAAM,QAA0C,CAAC;AACjD,oBAAc,QAAQ,CAAC,QAAQ;AAC7B,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,oBAAc,QAAQ,CAAC,QAAQ;AAG7B,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,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,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,QAAI,6CAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gCAAgC,qBAAqB,MAAM;AAEjE,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,eAAO,0CAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,UAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,qBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,6CAAC,sCAAY,GAAG,iBACd;AAAA,kDAAC,2CAAiB,GAAG,+BACnB,sDAAC,qCAAe,UAAf,EAAwB,OAAO,KAC9B,sDAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,UACC;AAAA,QACC,4CAAC,uCAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,yDAAiC,GACjF,mBAAS,4CAAC,kBAAI,KAAK,gBAA4C,eAAa,MAAC,IAAK,MACrF;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,4CAAC,aAAW,GAAG,OAAO;AAC/B;",
6
6
  "names": ["React"]
7
7
  }
@@ -21,15 +21,16 @@ const withConditionalDnDRowContext = (Component) => (props) => {
21
21
  } = React2.useContext(DataTableContext);
22
22
  const onReorder = useCallback(
23
23
  (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {
24
+ const rootMovedData = movedData.root;
24
25
  const nodes = {};
25
- movedData.forEach((row) => {
26
+ rootMovedData.forEach((row) => {
26
27
  if (row.original.subRows)
27
28
  delete row.original.subRows;
28
29
  delete row.original.subRows;
29
30
  nodes[row.uid] = row.original;
30
31
  });
31
32
  const newUserData = [];
32
- movedData.forEach((row) => {
33
+ rootMovedData.forEach((row) => {
33
34
  if (row.parentId) {
34
35
  const parentNode = nodes[row.parentId];
35
36
  if (parentNode?.subRows)
@@ -54,6 +55,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
54
55
  maxDragAndDropLevel,
55
56
  getIsDropValid
56
57
  });
58
+ const containerSortableContextProps = sortableContextProps["root"];
57
59
  const visibleItems = useMemo(() => {
58
60
  if (!active)
59
61
  return flattenedData;
@@ -73,7 +75,7 @@ const withConditionalDnDRowContext = (Component) => (props) => {
73
75
  );
74
76
  if (dragAndDropRows)
75
77
  return /* @__PURE__ */ jsxs(DndContext, { ...dndContextProps, children: [
76
- /* @__PURE__ */ jsx(SortableContext, { ...sortableContextProps, children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Component, { ...props }) }) }),
78
+ /* @__PURE__ */ jsx(SortableContext, { ...containerSortableContextProps, children: /* @__PURE__ */ jsx(DnDTreeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(Component, { ...props }) }) }),
77
79
  createPortal(
78
80
  /* @__PURE__ */ jsx(DragOverlay, { style: { width: "auto" }, modifiers: [restrictToFirstScrollableAncestor], children: active ? /* @__PURE__ */ jsx(Row, { row: dragOverlayRow, isDragOverlay: true }) : null }),
79
81
  document.body
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/HoC/withConditionalDnDRowContext.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\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';\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, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\n\n const onReorder: DnDKitTree.OnReorder<DSDataTableT.Row> = useCallback(\n (_active, targetIndex, { movedData, fromIndex, considerExpanding }) => {\n // Pull the row's original data into an object\n const nodes: Record<string, DSDataTableT.Row> = {};\n movedData.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 movedData.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 },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: allDataFlattened,\n isHorizontalDnD: false,\n isExpandable,\n onReorder,\n maxDragAndDropLevel,\n getIsDropValid: getIsDropValid,\n });\n\n const visibleItems = useMemo(() => {\n if (!active) return flattenedData;\n return removeChildrenOf(flattenedData, active.id) as DSDataTableT.InternalRow[];\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 {...sortableContextProps}>\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"],
5
- "mappings": "AAAA,YAAY,WAAW;ACoFjB,SAGM,KAHN;AAnFN,OAAOA,UAAS,aAAa,eAAe;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AAErC,QAAM,YAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AAErE,YAAM,QAA0C,CAAC;AACjD,gBAAU,QAAQ,CAAC,QAAQ;AACzB,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,gBAAU,QAAQ,CAAC,QAAQ;AAGzB,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,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,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,IAAI,oBAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,WAAO,iBAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,mBAAiB,GAAG,sBACnB,8BAAC,eAAe,UAAf,EAAwB,OAAO,KAC9B,8BAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,MACC;AAAA,QACC,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,iCAAiC,GACjF,mBAAS,oBAAC,OAAI,KAAK,gBAA4C,eAAa,MAAC,IAAK,MACrF;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/function-component-definition */\nimport React, { useCallback, useMemo } from 'react';\nimport {\n DndContext,\n DragOverlay,\n SortableContext,\n useTreeDndkitConfig,\n removeChildrenOf,\n restrictToFirstScrollableAncestor,\n type DnDKitTree,\n} from '@elliemae/ds-drag-and-drop';\nimport { createPortal } from 'react-dom';\nimport { DataTableContext } from '../../DataTableContext.js';\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';\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, getIsDropValid },\n flattenedData,\n allDataFlattened,\n } = React.useContext(DataTableContext);\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 },\n [allDataFlattened, flattenedData, onRowsReorder],\n );\n\n const { dndContextProps, sortableContextProps, active, dropIndicatorPosition, isDropValid } = useTreeDndkitConfig({\n flattenedItems: allDataFlattened,\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 if (!active) return flattenedData;\n return removeChildrenOf(flattenedData, active.id) as DSDataTableT.InternalRow[];\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"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACsFjB,SAGM,KAHN;AArFN,OAAOA,UAAS,aAAa,eAAe;AAC5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,oBAAoB;AAC7B,SAAS,wBAAwB;AAEjC,SAAS,WAAW;AACpB,SAAS,sBAAsB;AAIxB,MAAM,+BAA8C,CAAC,cAAc,CAAC,UAAU;AACnF,QAAM;AAAA,IACJ,YAAY,EAAE,iBAAiB,cAAc,eAAe,qBAAqB,eAAe;AAAA,IAChG;AAAA,IACA;AAAA,EACF,IAAIA,OAAM,WAAW,gBAAgB;AACrC,QAAM,YAAoD;AAAA,IACxD,CAAC,SAAS,aAAa,EAAE,WAAW,WAAW,kBAAkB,MAAM;AACrE,YAAM,gBAAgB,UAAU;AAEhC,YAAM,QAA0C,CAAC;AACjD,oBAAc,QAAQ,CAAC,QAAQ;AAC7B,YAAI,IAAI,SAAS;AAAS,iBAAO,IAAI,SAAS;AAC9C,eAAO,IAAI,SAAS;AACpB,cAAM,IAAI,GAAG,IAAI,IAAI;AAAA,MACvB,CAAC;AACD,YAAM,cAAc,CAAC;AACrB,oBAAc,QAAQ,CAAC,QAAQ;AAG7B,YAAI,IAAI,UAAU;AAChB,gBAAM,aAAa,MAAM,IAAI,QAAQ;AACrC,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,EAAE,aAAa,UAAU,GAAG,mBAAoC;AAAA,QACzF;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IACA,CAAC,kBAAkB,eAAe,aAAa;AAAA,EACjD;AAEA,QAAM,EAAE,iBAAiB,sBAAsB,QAAQ,uBAAuB,YAAY,IAAI,oBAAoB;AAAA,IAChH,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,gCAAgC,qBAAqB,MAAM;AAEjE,QAAM,eAAe,QAAQ,MAAM;AACjC,QAAI,CAAC;AAAQ,aAAO;AACpB,WAAO,iBAAiB,eAAe,OAAO,EAAE;AAAA,EAClD,GAAG,CAAC,QAAQ,aAAa,CAAC;AAE1B,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,cAAc,uBAAuB,WAAW;AAAA,EACnD;AAEA,QAAM,iBAAiB;AAAA,IACrB,MAAO,SAAS,cAAc,KAAK,CAAC,QAAQ,IAAI,QAAQ,OAAO,EAAE,IAAI;AAAA,IACrE,CAAC,QAAQ,aAAa;AAAA,EACxB;AAEA,MAAI;AACF,WACE,qBAAC,cAAY,GAAG,iBACd;AAAA,0BAAC,mBAAiB,GAAG,+BACnB,8BAAC,eAAe,UAAf,EAAwB,OAAO,KAC9B,8BAAC,aAAW,GAAG,OAAO,GACxB,GACF;AAAA,MACC;AAAA,QACC,oBAAC,eAAY,OAAO,EAAE,OAAO,OAAO,GAAG,WAAW,CAAC,iCAAiC,GACjF,mBAAS,oBAAC,OAAI,KAAK,gBAA4C,eAAa,MAAC,IAAK,MACrF;AAAA,QACA,SAAS;AAAA,MACX;AAAA,OACF;AAEJ,SAAO,oBAAC,aAAW,GAAG,OAAO;AAC/B;",
6
6
  "names": ["React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "3.21.0-next.8",
3
+ "version": "3.21.0-next.9",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "files": [
@@ -573,30 +573,30 @@
573
573
  "dependencies": {
574
574
  "react-virtual": "~2.10.4",
575
575
  "uid": "~2.0.1",
576
- "@elliemae/ds-button": "3.21.0-next.8",
577
- "@elliemae/ds-button-v2": "3.21.0-next.8",
578
- "@elliemae/ds-circular-progress-indicator": "3.21.0-next.8",
579
- "@elliemae/ds-drag-and-drop": "3.21.0-next.8",
580
- "@elliemae/ds-dropdownmenu": "3.21.0-next.8",
581
- "@elliemae/ds-form-checkbox": "3.21.0-next.8",
582
- "@elliemae/ds-form-combobox": "3.21.0-next.8",
583
- "@elliemae/ds-form-date-range-picker": "3.21.0-next.8",
584
- "@elliemae/ds-form-date-time-picker": "3.21.0-next.8",
585
- "@elliemae/ds-form-input-text": "3.21.0-next.8",
586
- "@elliemae/ds-form-layout-blocks": "3.21.0-next.8",
587
- "@elliemae/ds-form-helpers-mask-hooks": "3.21.0-next.8",
588
- "@elliemae/ds-form-radio": "3.21.0-next.8",
589
- "@elliemae/ds-grid": "3.21.0-next.8",
590
- "@elliemae/ds-pagination": "3.21.0-next.8",
591
- "@elliemae/ds-icons": "3.21.0-next.8",
592
- "@elliemae/ds-popperjs": "3.21.0-next.8",
593
- "@elliemae/ds-pills": "3.21.0-next.8",
594
- "@elliemae/ds-props-helpers": "3.21.0-next.8",
595
- "@elliemae/ds-skeleton": "3.21.0-next.8",
596
- "@elliemae/ds-toolbar": "3.21.0-next.8",
597
- "@elliemae/ds-truncated-tooltip-text": "3.21.0-next.8",
598
- "@elliemae/ds-system": "3.21.0-next.8",
599
- "@elliemae/ds-utilities": "3.21.0-next.8"
576
+ "@elliemae/ds-button-v2": "3.21.0-next.9",
577
+ "@elliemae/ds-button": "3.21.0-next.9",
578
+ "@elliemae/ds-circular-progress-indicator": "3.21.0-next.9",
579
+ "@elliemae/ds-dropdownmenu": "3.21.0-next.9",
580
+ "@elliemae/ds-form-checkbox": "3.21.0-next.9",
581
+ "@elliemae/ds-drag-and-drop": "3.21.0-next.9",
582
+ "@elliemae/ds-form-combobox": "3.21.0-next.9",
583
+ "@elliemae/ds-form-date-range-picker": "3.21.0-next.9",
584
+ "@elliemae/ds-form-date-time-picker": "3.21.0-next.9",
585
+ "@elliemae/ds-form-helpers-mask-hooks": "3.21.0-next.9",
586
+ "@elliemae/ds-form-layout-blocks": "3.21.0-next.9",
587
+ "@elliemae/ds-grid": "3.21.0-next.9",
588
+ "@elliemae/ds-form-input-text": "3.21.0-next.9",
589
+ "@elliemae/ds-pagination": "3.21.0-next.9",
590
+ "@elliemae/ds-icons": "3.21.0-next.9",
591
+ "@elliemae/ds-form-radio": "3.21.0-next.9",
592
+ "@elliemae/ds-pills": "3.21.0-next.9",
593
+ "@elliemae/ds-popperjs": "3.21.0-next.9",
594
+ "@elliemae/ds-props-helpers": "3.21.0-next.9",
595
+ "@elliemae/ds-skeleton": "3.21.0-next.9",
596
+ "@elliemae/ds-system": "3.21.0-next.9",
597
+ "@elliemae/ds-toolbar": "3.21.0-next.9",
598
+ "@elliemae/ds-truncated-tooltip-text": "3.21.0-next.9",
599
+ "@elliemae/ds-utilities": "3.21.0-next.9"
600
600
  },
601
601
  "devDependencies": {
602
602
  "@testing-library/react": "~12.1.3",