@elliemae/ds-data-table 2.2.0-alpha.2 → 2.2.0-next.1

package/esm/parts/HoC/withConditionalDnDColumnContext.js

@@ -1,64 +1,100 @@
-import * as React from "react";
-import React2, { createContext, useCallback, useMemo } from "react";
-import { DndContext, DragOverlay } from "@dnd-kit/core";
-import { useHierarchyDndkitConfig } from "@elliemae/ds-drag-and-drop";
-import { arrayMove } from "@dnd-kit/sortable";
-import { DataTableContext } from "../../DataTableContext";
-import { HeaderCellGroup } from "../Headers/HeaderCellGroup";
-import { DATA_TESTID } from "../../configs/constants";
-const DnDGroupContext = createContext({
-  activeIndex: void 0
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import React, { useMemo, useCallback, createContext } from 'react';
+import { DndContext, DragOverlay } from '@dnd-kit/core';
+import { useHierarchyDndkitConfig } from '@elliemae/ds-drag-and-drop';
+import { arrayMove } from '@dnd-kit/sortable';
+import DataTableContext from '../../DataTableContext.js';
+import { HeaderCellGroup } from '../Headers/HeaderCellGroup.js';
+import { DATA_TESTID } from '../../configs/constants.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DnDGroupContext = /*#__PURE__*/createContext({
+  activeIndex: undefined
 });
-const flattenColumns = (cols) => {
+
+const flattenColumns = cols => {
   const flattened = [];
-  const flatten = (col, index, parentId = null) => {
-    const { id } = col;
-    flattened.push([{ id, parentId, index }, col]);
-    if (col.columns)
-      col.columns.forEach((subColumn, childIndex) => flatten(subColumn, childIndex, id));
+
+  const flatten = function (col, index) {
+    let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    const {
+      id
+    } = col;
+    flattened.push([{
+      id,
+      parentId,
+      index
+    }, col]);
+    if (col.columns) col.columns.forEach((subColumn, childIndex) => flatten(subColumn, childIndex, id));
   };
+
   cols.forEach((col, index) => flatten(col, index));
   return flattened;
-};
-const withConditionalDnDColumnContext = (Component) => (props) => {
+}; // only wraps in "DnDContext" and "DnDGroupContext" if any Drag and Drop functionality is requested
+
+
+const withConditionalDnDColumnContext = Component => props => {
   const {
-    tableProps: { dragAndDropColumns, onColumnsReorder },
+    tableProps: {
+      dragAndDropColumns,
+      onColumnsReorder
+    },
     visibleColumns
-  } = React2.useContext(DataTableContext);
+  } = React.useContext(DataTableContext);
   const flattenedItems = useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);
   const onReorder = useCallback((movedItem, indexes) => {
-    const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex);
+    // Send from index to target index
+    const newFlattenedData = arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex); // Pull the cols's data into an object
+
     const nodes = {};
-    newFlattenedData.forEach(([dndData, colData]) => {
+    newFlattenedData.forEach(_ref => {
+      let [dndData, colData] = _ref;
       delete colData.columns;
       nodes[dndData.id] = colData;
     });
     const newData = [];
-    newFlattenedData.forEach(([dndData, colData]) => {
+    newFlattenedData.forEach(_ref2 => {
+      let [dndData, colData] = _ref2;
+
+      // If row has parent, insert it to it's subrows
+      // otherwise append it to the new user data
       if (dndData.parentId) {
         const parentNode = nodes[dndData.parentId];
-        if (parentNode.columns)
-          parentNode.columns.push(colData);
-        else
-          parentNode.columns = [colData];
-      } else
-        newData.push(colData);
+        if (parentNode.columns) parentNode.columns.push(colData);else parentNode.columns = [colData];
+      } else newData.push(colData);
     });
     onColumnsReorder(newData, indexes);
   }, [flattenedItems, onColumnsReorder]);
   const onPreviewResetState = useCallback(() => {
-    const el = document.body.querySelector(`[data-testid="${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
-    if (el)
-      el.onscroll = () => null;
+    const el = document.body.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+    if (el) el.onscroll = () => null;
   }, []);
   const onPreviewDragStart = useCallback(() => {
-    const el = document.body.querySelector(`[data-testid="${DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER}"]`);
+    const el = document.body.querySelector("[data-testid=\"".concat(DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+
     if (el) {
       const y = el.scrollTop;
+
       el.onscroll = () => el.scrollTo(0, y);
     }
   }, []);
-  const { dndContextProps, activeId, activeIndex } = useHierarchyDndkitConfig({
+  const {
+    dndContextProps,
+    activeId,
+    activeIndex
+  } = useHierarchyDndkitConfig({
     flattenedItems,
     dragOverlayDataTestid: DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,
     isHorizontalDnD: true,
@@ -66,23 +102,20 @@ const withConditionalDnDColumnContext = (Component) => (props) => {
     onPreviewResetState,
     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],
+  if (dragAndDropColumns) return /*#__PURE__*/jsxs(DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
+    children: [/*#__PURE__*/_jsx(DnDGroupContext.Provider, {
+      value: {
+        activeIndex
+      }
+    }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props))), /*#__PURE__*/_jsx(DragOverlay, {}, void 0, activeId ? /*#__PURE__*/_jsx(HeaderCellGroup, {
+      header: flattenedItems.find(_ref3 => {
+        let [item] = _ref3;
+        return item.id === activeId;
+      })[1],
       isDragOverlay: true
-    }) : null));
-  return /* @__PURE__ */ React2.createElement(Component, {
-    ...props
-  });
-};
-export {
-  DnDGroupContext,
-  withConditionalDnDColumnContext
+    }) : null)]
+  }));
+  return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 };
-//# sourceMappingURL=withConditionalDnDColumnContext.js.map
+
+export { DnDGroupContext, withConditionalDnDColumnContext };

package/esm/parts/HoC/withConditionalDnDRowContext.js

@@ -1,46 +1,74 @@
-import * as React from "react";
-import React2, { createContext, useCallback } from "react";
-import { DndContext, DragOverlay } from "@dnd-kit/core";
-import { SortableContext } from "@dnd-kit/sortable";
-import { DataTableContext } from "../../DataTableContext";
-import { useTreeDndkitConfig } from "@elliemae/ds-drag-and-drop";
-import { DropIndicatorPosition } from "./SortableItemContext";
-import { Row } from "../Row";
-const DnDTreeContext = createContext({
-  depth: void 0,
-  activeIndex: void 0,
-  visibleItems: void 0,
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import React, { createContext, useCallback } from 'react';
+import { DndContext, DragOverlay } from '@dnd-kit/core';
+import { SortableContext } from '@dnd-kit/sortable';
+import DataTableContext from '../../DataTableContext.js';
+import { useTreeDndkitConfig } from '@elliemae/ds-drag-and-drop';
+import { DropIndicatorPosition } from './SortableItemContext.js';
+import { Row } from '../Row.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const DnDTreeContext = /*#__PURE__*/createContext({
+  depth: undefined,
+  activeIndex: undefined,
+  visibleItems: undefined,
   dropIndicatorPosition: DropIndicatorPosition.None,
-  lastActiveId: void 0,
-  setLastActiveId: void 0
-});
-const withConditionalDnDRowContext = (Component) => (props) => {
+  lastActiveId: undefined,
+  setLastActiveId: undefined
+}); // only wraps in "DnDContext" and "DnDTreeContext" if any Drag and Drop functionality is requested
+
+const withConditionalDnDRowContext = Component => props => {
   const {
-    tableProps: { dragAndDropRows, isExpandable, onRowsReorder, maxDragAndDropLevel },
+    tableProps: {
+      dragAndDropRows,
+      isExpandable,
+      onRowsReorder,
+      maxDragAndDropLevel
+    },
     flattenedData,
     allDataFlattened
-  } = React2.useContext(DataTableContext);
-  const [lastActiveId, setLastActiveId] = React2.useState(null);
+  } = React.useContext(DataTableContext);
+  const [lastActiveId, setLastActiveId] = React.useState(null);
   const onReorder = useCallback((newData, indexes, considerExpanding) => {
+    // Pull the row's original data into an object
     const nodes = {};
-    newData.forEach((row) => {
+    newData.forEach(row => {
       delete row.original.subRows;
       nodes[row.uid] = row.original;
     });
     const newUserData = [];
-    newData.forEach((row) => {
+    newData.forEach(row => {
+      // If row has parent, insert it to it's subrows
+      // otherwise append it to the new user data
       if (row.parentId) {
         const parentNode = nodes[row.parentId];
-        if (parentNode?.subRows)
-          parentNode.subRows.push(row.original);
-        else
-          parentNode.subRows = [row.original];
-      } else
-        newUserData.push(row.original);
-    });
+        if (parentNode !== null && parentNode !== void 0 && parentNode.subRows) parentNode.subRows.push(row.original);else parentNode.subRows = [row.original];
+      } else newUserData.push(row.original);
+    }); // Tell the user that the order has change, he can chose to commit it or not
+
     onRowsReorder(newUserData, indexes, considerExpanding);
   }, [onRowsReorder]);
-  const { dndContextProps, sortableContextProps, activeId, activeIndex, depth, dropIndicatorPosition, visibleItems } = useTreeDndkitConfig({
+  const {
+    dndContextProps,
+    sortableContextProps,
+    activeId,
+    activeIndex,
+    depth,
+    dropIndicatorPosition,
+    visibleItems
+  } = useTreeDndkitConfig({
     flattenedItems: allDataFlattened,
     visibleItems: flattenedData,
     isHorizontalDnD: false,
@@ -48,36 +76,29 @@ const withConditionalDnDRowContext = (Component) => (props) => {
     onReorder,
     maxDragAndDropLevel
   });
-  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
+  if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
+  if (dragAndDropRows) return /*#__PURE__*/jsxs(DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
+    children: [/*#__PURE__*/jsx(SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
+      children: /*#__PURE__*/_jsx(DnDTreeContext.Provider, {
+        value: {
+          activeIndex,
+          depth,
+          visibleItems,
+          dropIndicatorPosition,
+          lastActiveId,
+          setLastActiveId
+        }
+      }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)))
+    })), /*#__PURE__*/_jsx(DragOverlay, {
+      style: {
+        width: 'auto'
       }
-    }, /* @__PURE__ */ React2.createElement(Component, {
-      ...props
-    }))), /* @__PURE__ */ React2.createElement(DragOverlay, {
-      style: { width: "auto" }
-    }, activeId ? /* @__PURE__ */ React2.createElement(Row, {
-      row: flattenedData.find((row) => row.uid === activeId),
+    }, void 0, activeId ? /*#__PURE__*/_jsx(Row, {
+      row: flattenedData.find(row => row.uid === activeId),
       isDragOverlay: true
-    }) : null));
-  return /* @__PURE__ */ React2.createElement(Component, {
-    ...props
-  });
-};
-export {
-  DnDTreeContext,
-  withConditionalDnDRowContext
+    }) : null)]
+  }));
+  return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
 };
-//# sourceMappingURL=withConditionalDnDRowContext.js.map
+
+export { DnDTreeContext, withConditionalDnDRowContext };

package/esm/parts/HoC/withConditionalDnDSortableContext.js

@@ -1,23 +1,36 @@
-import * as React from "react";
-import { horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
-import React2, { 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, {
-      items: items.map((item) => item.id),
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { useContext } from 'react';
+import DataTableContext from '../../DataTableContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const withConditionalDnDSortableContext = function (items) {
+  let isDragOverlay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  return Component => props => {
+    const {
+      tableProps: {
+        dragAndDropColumns
+      }
+    } = useContext(DataTableContext); // Only add the context if it's not a dragOverlay and dnd for cols was requested
+    // It's important that drag overlays DO NOT have any sortable functionality!
+
+    if (!isDragOverlay && dragAndDropColumns) return /*#__PURE__*/_jsx(SortableContext, {
+      items: items.map(item => item.id),
       strategy: horizontalListSortingStrategy
-    }, /* @__PURE__ */ React2.createElement(Component, {
-      ...props
-    }));
-  return /* @__PURE__ */ React2.createElement(Component, {
-    ...props
-  });
+    }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
+    return /*#__PURE__*/jsx(Component, _objectSpread({}, props));
+  };
 };
-export {
-  withConditionalDnDSortableContext
-};
-//# sourceMappingURL=withConditionalDnDSortableContext.js.map
+
+export { withConditionalDnDSortableContext };

package/esm/parts/HoC/withDnDSortableColumnContext.js

@@ -1,38 +1,56 @@
-import * as React from "react";
-import React2, { useContext, useMemo } from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { DataTableContext } from "../../DataTableContext";
-import { DnDGroupContext } from "./withConditionalDnDColumnContext";
-import { SortableItemContext, DropIndicatorPosition } from "./SortableItemContext";
-const withDnDSortableColumnContext = (Component) => (props) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import DataTableContext from '../../DataTableContext.js';
+import { DnDGroupContext } from './withConditionalDnDColumnContext.js';
+import { DropIndicatorPosition, SortableItemContext } from './SortableItemContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const withDnDSortableColumnContext = Component => props => {
   const {
-    tableProps: { dragAndDropColumns }
+    tableProps: {
+      dragAndDropColumns
+    }
   } = useContext(DataTableContext);
-  const { activeIndex } = useContext(DnDGroupContext);
+  const {
+    activeIndex
+  } = useContext(DnDGroupContext); // onMount generate unique options, so everyting is only ran once
+
   const draggableOptions = useMemo(() => ({
     id: props.header.id
   }), [props.header.id]);
-  const useSortableHelpers = useSortable(draggableOptions);
+  const useSortableHelpers = useSortable(draggableOptions); // calculate all the "useSortable" values as per required
+
   const draggableProps = useMemo(() => {
-    if (!dragAndDropColumns)
-      return false;
-    const { index, overIndex } = useSortableHelpers;
-    return {
-      ...useSortableHelpers,
+    if (!dragAndDropColumns) return false;
+    const {
+      index,
+      overIndex
+    } = useSortableHelpers;
+    return _objectSpread(_objectSpread({}, useSortableHelpers), {}, {
       shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,
       dropIndicatorPosition: index > activeIndex ? DropIndicatorPosition.After : DropIndicatorPosition.Before
-    };
-  }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
+    });
+  }, [useSortableHelpers, dragAndDropColumns, activeIndex]); // we use a context so we can easly access information wherever without bubbling down
+  // this context is all Memoized so as long as component is not re-mounted,
+  // the context won't trigger un-required renders per-se...
+
   const ctx = useMemo(() => ({
     draggableProps
-  }), [draggableProps]);
-  return /* @__PURE__ */ React2.createElement(SortableItemContext.Provider, {
+  }), [draggableProps]); // we always add the context, if draggableProps===false we don't have the DnD enabled.
+
+  return /*#__PURE__*/_jsx(SortableItemContext.Provider, {
     value: ctx
-  }, /* @__PURE__ */ React2.createElement(Component, {
-    ...props
-  }));
-};
-export {
-  withDnDSortableColumnContext
+  }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
 };
-//# sourceMappingURL=withDnDSortableColumnContext.js.map
+
+export { withDnDSortableColumnContext };

package/esm/parts/HoC/withDnDSortableRowContext.js

@@ -1,40 +1,60 @@
-import * as React from "react";
-import React2, { useContext, useMemo } from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { DataTableContext } from "../../DataTableContext";
-import { DnDTreeContext } from "./withConditionalDnDRowContext";
-import { SortableItemContext } from "./SortableItemContext";
-const withDnDSortableRowContext = (Component) => (props) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useContext, useMemo } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import DataTableContext from '../../DataTableContext.js';
+import { DnDTreeContext } from './withConditionalDnDRowContext.js';
+import { SortableItemContext } from './SortableItemContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const withDnDSortableRowContext = Component => props => {
   const {
-    tableProps: { dragAndDropRows }
+    tableProps: {
+      dragAndDropRows
+    }
   } = useContext(DataTableContext);
-  const { dropIndicatorPosition, lastActiveId, setLastActiveId } = useContext(DnDTreeContext);
+  const {
+    dropIndicatorPosition,
+    lastActiveId,
+    setLastActiveId
+  } = useContext(DnDTreeContext); // onMount generate unique options, so everyting is only ran once
+
   const draggableOptions = useMemo(() => ({
     id: props.row.uid
   }), [props.row]);
-  const useSortableHelpers = useSortable(draggableOptions);
+  const useSortableHelpers = useSortable(draggableOptions); // calculate all the "useSortable" values as per required
+
   const draggableProps = useMemo(() => {
-    if (!dragAndDropRows)
-      return false;
-    const { index, overIndex } = useSortableHelpers;
-    return {
-      ...useSortableHelpers,
+    if (!dragAndDropRows) return false;
+    const {
+      index,
+      overIndex
+    } = useSortableHelpers;
+    return _objectSpread(_objectSpread({}, useSortableHelpers), {}, {
       shouldShowDropIndicatorPosition: overIndex === index,
       dropIndicatorPosition,
       lastActiveId,
       setLastActiveId
-    };
-  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId]);
+    });
+  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId]); // we use a context so we can easly access information wherever without bubbling down
+  // this context is all Memoized so as long as component is not re-mounted,
+  // the context won't trigger un-required renders per-se...
+
   const ctx = useMemo(() => ({
     draggableProps
-  }), [draggableProps]);
-  return /* @__PURE__ */ React2.createElement(SortableItemContext.Provider, {
+  }), [draggableProps]); // we always add the context, if draggableProps===false we don't have the DnD enabled.
+
+  return /*#__PURE__*/_jsx(SortableItemContext.Provider, {
     value: ctx
-  }, /* @__PURE__ */ React2.createElement(Component, {
-    ...props
-  }));
-};
-export {
-  withDnDSortableRowContext
+  }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
 };
-//# sourceMappingURL=withDnDSortableRowContext.js.map
+
+export { withDnDSortableRowContext };

package/esm/parts/Loader.js

@@ -1,27 +1,28 @@
-import * as React from "react";
-import React2, { memo } from "react";
-import { Grid } from "@elliemae/ds-grid";
-import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
-import styled from "styled-components";
-const StyledLoaderWrapper = styled(Grid)`
-  place-items: center;
-  z-index: 0;
-  background-color: white;
-`;
-const Loader = () => /* @__PURE__ */ React2.createElement(StyledLoaderWrapper, {
-  style: { height: "100%", maxHeight: "500px" },
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { memo } from 'react';
+import Grid from '@elliemae/ds-grid';
+import { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';
+import styled from 'styled-components';
+
+var _DSCircularProgressIn;
+const StyledLoaderWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-pol5j9-0"
+})(["place-items:center;z-index:0;background-color:white;"]);
+
+const Loader = () => /*#__PURE__*/_jsx(StyledLoaderWrapper, {
+  style: {
+    height: '100%',
+    maxHeight: '500px'
+  },
   "aria-live": "polite"
-}, /* @__PURE__ */ React2.createElement(DSCircularProgressIndicator, {
+}, void 0, _DSCircularProgressIn || (_DSCircularProgressIn = /*#__PURE__*/_jsx(DSCircularProgressIndicator, {
   size: "xl",
   loading: true,
   showLabel: true,
   waiting: false,
   showTooltip: false
-}));
-const MemoizedLoader = memo(Loader);
-var Loader_default = MemoizedLoader;
-export {
-  MemoizedLoader,
-  Loader_default as default
-};
-//# sourceMappingURL=Loader.js.map
+})));
+
+var Loader$1 = /*#__PURE__*/memo(Loader);
+
+export { Loader$1 as default };