@elliemae/ds-data-table 2.0.0-rc.1 → 2.0.0-rc.13

package/esm/parts/HoC/withDnDSortableRowContext.js

@@ -5,11 +5,10 @@ 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, useEffect, cloneElement } from 'react';
+import { useContext, useMemo } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import DataTableContext from '../../DataTableContext.js';
 import { DnDTreeContext } from './withConditionalDnDRowContext.js';
-import { DragOverlayContext } from './DragOverlayContext.js';
 import { SortableItemContext } from './SortableItemContext.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -22,9 +21,6 @@ const withDnDSortableRowContext = Component => props => {
       dragAndDropRows
     }
   } = useContext(DataTableContext);
-  const {
-    setPureDraggedJSX
-  } = useContext(DragOverlayContext);
   const {
     dropIndicatorPosition,
     lastActiveId,
@@ -34,8 +30,7 @@ const withDnDSortableRowContext = Component => props => {
   const draggableOptions = useMemo(() => ({
     id: props.row.uid
   }), [props.row]);
-  const useSortableHelpers = useSortable(draggableOptions);
-  const PureComponentJSX = useMemo(() => /*#__PURE__*/jsx(Component, _objectSpread({}, props)), [props]); // calculate all the "useSortable" values as per required
+  const useSortableHelpers = useSortable(draggableOptions); // calculate all the "useSortable" values as per required
 
   const draggableProps = useMemo(() => {
     if (!dragAndDropRows) return false;
@@ -49,16 +44,7 @@ const withDnDSortableRowContext = Component => props => {
       lastActiveId,
       setLastActiveId
     });
-  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId]);
-  useEffect(() => {
-    // We assume the structure of the inner element WON'T change during DnD
-    // This is a huge performance boost
-    if (useSortableHelpers.isDragging) {
-      setPureDraggedJSX( /*#__PURE__*/cloneElement(PureComponentJSX, {
-        isDragOverlay: true
-      }));
-    }
-  }, [useSortableHelpers.isDragging, setPureDraggedJSX]); // we use a context so we can easly access information wherever without bubbling down
+  }, [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...
 
@@ -68,7 +54,7 @@ const withDnDSortableRowContext = Component => props => {
 
   return /*#__PURE__*/_jsx(SortableItemContext.Provider, {
     value: ctx
-  }, void 0, PureComponentJSX);
+  }, void 0, /*#__PURE__*/jsx(Component, _objectSpread({}, props)));
 };
 
 export { withDnDSortableRowContext };

package/esm/parts/Row.js

@@ -16,17 +16,17 @@ import { RowVariantMapItem } from './RowVariants/index.js';
 import { jsx } from 'react/jsx-runtime';
 
 const setItemRefs = (measureRef, draggableRef, ref) => {
-  const refsToSet = [measureRef];
+  const refsToSet = [];
+  if (measureRef) refsToSet.push(measureRef);
   if (draggableRef) refsToSet.push(draggableRef);
   setMultipleRefs(...refsToSet)(ref);
 };
 
-const Row = props => {
+const RowComp = props => {
   const {
     row,
     measureRef,
     itemWrapperStyle,
-    itemIndex,
     isDragOverlay,
     focusedRowId,
     selectedRowId
@@ -41,7 +41,7 @@ const Row = props => {
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx(RowVariantMapItem, {
       row: row,
-      itemIndex: itemIndex,
+      itemIndex: row.realIndex,
       isDragOverlay: isDragOverlay,
       ctx: ctx,
       focusedRowId: focusedRowId,
@@ -50,15 +50,12 @@ const Row = props => {
   });
 };
 
-Row.defaultProps = {
-  itemWrapperStyle: {}
-};
-
 const mapStateToProps = state => ({
   focusedRowId: state.rows.focusedRowId,
   selectedRowId: state.rows.selectedRowId
 });
 
-var Row$1 = withDnDSortableRowContext(connect(mapStateToProps)(Row));
+const Row = connect(mapStateToProps)(RowComp);
+var Row$1 = withDnDSortableRowContext(Row);
 
-export { Row$1 as default };
+export { Row, Row$1 as default };

package/esm/styled.js

@@ -149,22 +149,27 @@ const StyledPencilIcon = /*#__PURE__*/styled(EditPencil).withConfig({
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-14"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, props => props.shouldDisplayEditIcon ? 'block' : 'none', StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  let {
+    shouldDisplayEditIcon
+  } = _ref8;
+  return shouldDisplayEditIcon ? 'block' : 'none';
+}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
 const StyledFullsizeGrid = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-15"
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
 const GroupHeaderContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref8 => {
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
   let {
     theme
-  } = _ref8;
+  } = _ref9;
   return theme.colors.brand[200];
-}, props => props.padding, _ref9 => {
+}, props => props.padding, _ref10 => {
   let {
     theme
-  } = _ref9;
+  } = _ref10;
   return theme.colors.brand[300];
 });
 const GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
@@ -172,32 +177,32 @@ const GroupHeaderTitle = /*#__PURE__*/styled.span.withConfig({
 })(["font-weight:", ";font-size:12px;color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral[700]);
 const StyledCellContainer = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-18"
-})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%', props => getGridTemplateColumnsStyle({
+})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%', props => props.isDragOverlay ? 'width: fit-content;' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), _ref10 => {
+}), _ref11 => {
   let {
     backgroundColor,
     isDragging,
     theme
-  } = _ref10;
+  } = _ref11;
   return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
-}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref11 => {
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
   let {
     isDropIndicatorPositionInside,
     theme
-  } = _ref11;
+  } = _ref12;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, _ref12 => {
+}, _ref13 => {
   let {
     shouldDisplayHover,
     theme
-  } = _ref12;
+  } = _ref13;
   return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
-}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[300], ";\n    "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
+}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[500], ";\n    "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
 
 export { GroupHeaderContainer, GroupHeaderTitle, StyledActionCell, StyledCell, StyledCellContainer, StyledCellContent, StyledDataTableWrapper, StyledEditableContainer, StyledFocusWithin, StyledFullsizeGrid, StyledHeadTh, StyledHeadTr, StyledHeadWrapper, StyledHeaderRightIconsWrapper, StyledPencilIcon, StyledResizer, StyledTableContentWrapper, StyledTableWrapper, StyledVirtualListWrapper };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.13",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -163,10 +163,6 @@
       "import": "./esm/parts/HoC/SortableItemContext.js",
       "require": "./cjs/parts/HoC/SortableItemContext.js"
     },
-    "./parts/HoC/DragOverlayContext": {
-      "import": "./esm/parts/HoC/DragOverlayContext.js",
-      "require": "./cjs/parts/HoC/DragOverlayContext.js"
-    },
     "./parts/Headers/useHeaderCellHandlers": {
       "import": "./esm/parts/Headers/useHeaderCellHandlers.js",
       "require": "./cjs/parts/Headers/useHeaderCellHandlers.js"
@@ -227,10 +223,6 @@
       "import": "./esm/parts/FilterBar/FiltersBar.js",
       "require": "./cjs/parts/FilterBar/FiltersBar.js"
     },
-    "./parts/FilterBar/components/TextPill": {
-      "import": "./esm/parts/FilterBar/components/TextPill.js",
-      "require": "./cjs/parts/FilterBar/components/TextPill.js"
-    },
     "./parts/FilterBar/components/SingleDatePill": {
       "import": "./esm/parts/FilterBar/components/SingleDatePill.js",
       "require": "./cjs/parts/FilterBar/components/SingleDatePill.js"
@@ -307,70 +299,6 @@
       "import": "./esm/helpers/getIdFromUniqueRowAccessor.js",
       "require": "./cjs/helpers/getIdFromUniqueRowAccessor.js"
     },
-    "./helpers/dndkit/utilities": {
-      "import": "./esm/helpers/dndkit/utilities.js",
-      "require": "./cjs/helpers/dndkit/utilities.js"
-    },
-    "./helpers/dndkit/types": {
-      "import": "./esm/helpers/dndkit/types.js",
-      "require": "./cjs/helpers/dndkit/types.js"
-    },
-    "./helpers/dndkit/tree/useTreePreviewHandlers": {
-      "import": "./esm/helpers/dndkit/tree/useTreePreviewHandlers.js",
-      "require": "./cjs/helpers/dndkit/tree/useTreePreviewHandlers.js"
-    },
-    "./helpers/dndkit/tree/useTreeDndkitConfig": {
-      "import": "./esm/helpers/dndkit/tree/useTreeDndkitConfig.js",
-      "require": "./cjs/helpers/dndkit/tree/useTreeDndkitConfig.js"
-    },
-    "./helpers/dndkit/tree/useTreeAnnouncements": {
-      "import": "./esm/helpers/dndkit/tree/useTreeAnnouncements.js",
-      "require": "./cjs/helpers/dndkit/tree/useTreeAnnouncements.js"
-    },
-    "./helpers/dndkit/tree/useTreeActionHandlers": {
-      "import": "./esm/helpers/dndkit/tree/useTreeActionHandlers.js",
-      "require": "./cjs/helpers/dndkit/tree/useTreeActionHandlers.js"
-    },
-    "./helpers/dndkit/tree/types": {
-      "import": "./esm/helpers/dndkit/tree/types.js",
-      "require": "./cjs/helpers/dndkit/tree/types.js"
-    },
-    "./helpers/dndkit/tree/getTreeKeyboardCoordinates": {
-      "import": "./esm/helpers/dndkit/tree/getTreeKeyboardCoordinates.js",
-      "require": "./cjs/helpers/dndkit/tree/getTreeKeyboardCoordinates.js"
-    },
-    "./helpers/dndkit/tree/customCollisionDetection": {
-      "import": "./esm/helpers/dndkit/tree/customCollisionDetection.js",
-      "require": "./cjs/helpers/dndkit/tree/customCollisionDetection.js"
-    },
-    "./helpers/dndkit/hierarchy/useHierarchyPreviewHandlers": {
-      "import": "./esm/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js",
-      "require": "./cjs/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js"
-    },
-    "./helpers/dndkit/hierarchy/useHierarchyDndkitConfig": {
-      "import": "./esm/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js",
-      "require": "./cjs/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js"
-    },
-    "./helpers/dndkit/hierarchy/useHierarchyAnnouncements": {
-      "import": "./esm/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js",
-      "require": "./cjs/helpers/dndkit/hierarchy/useHierarchyAnnouncements.js"
-    },
-    "./helpers/dndkit/hierarchy/useHierarchyActionHandlers": {
-      "import": "./esm/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js",
-      "require": "./cjs/helpers/dndkit/hierarchy/useHierarchyActionHandlers.js"
-    },
-    "./helpers/dndkit/hierarchy/types": {
-      "import": "./esm/helpers/dndkit/hierarchy/types.js",
-      "require": "./cjs/helpers/dndkit/hierarchy/types.js"
-    },
-    "./helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates": {
-      "import": "./esm/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js",
-      "require": "./cjs/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js"
-    },
-    "./helpers/dndkit/hierarchy/customCollisionDetection": {
-      "import": "./esm/helpers/dndkit/hierarchy/customCollisionDetection.js",
-      "require": "./cjs/helpers/dndkit/hierarchy/customCollisionDetection.js"
-    },
     "./helpers/columnsToGrid": {
       "import": "./esm/helpers/columnsToGrid.js",
       "require": "./cjs/helpers/columnsToGrid.js"
@@ -431,10 +359,6 @@
       "import": "./esm/exported-related/Filters/types.js",
       "require": "./cjs/exported-related/Filters/types.js"
     },
-    "./exported-related/Filters/textFilterFn": {
-      "import": "./esm/exported-related/Filters/textFilterFn.js",
-      "require": "./cjs/exported-related/Filters/textFilterFn.js"
-    },
     "./exported-related/Filters/singleSelectFilterFn": {
       "import": "./esm/exported-related/Filters/singleSelectFilterFn.js",
       "require": "./cjs/exported-related/Filters/singleSelectFilterFn.js"
@@ -535,10 +459,6 @@
       "import": "./esm/addons/Filters/index.js",
       "require": "./cjs/addons/Filters/index.js"
     },
-    "./addons/Filters/Components/TextInputFilter": {
-      "import": "./esm/addons/Filters/Components/TextInputFilter/index.js",
-      "require": "./cjs/addons/Filters/Components/TextInputFilter/index.js"
-    },
     "./addons/Filters/Components/SingleDateFilter": {
       "import": "./esm/addons/Filters/Components/SingleDateFilter/index.js",
       "require": "./cjs/addons/Filters/Components/SingleDateFilter/index.js"
@@ -648,45 +568,48 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@dnd-kit/core": "~3.1.1",
-    "@dnd-kit/sortable": "~3.1.0",
-    "@elliemae/ds-basic": "2.0.0-rc.1",
-    "@elliemae/ds-button": "2.0.0-rc.1",
-    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.1",
-    "@elliemae/ds-controlled-form": "2.0.0-rc.1",
-    "@elliemae/ds-dropdownmenu": "2.0.0-rc.1",
-    "@elliemae/ds-form": "2.0.0-rc.1",
-    "@elliemae/ds-grid": "2.0.0-rc.1",
-    "@elliemae/ds-icons": "2.0.0-rc.1",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.1",
-    "@elliemae/ds-pagination": "2.0.0-rc.1",
-    "@elliemae/ds-pills": "2.0.0-rc.1",
-    "@elliemae/ds-system": "2.0.0-rc.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.1",
-    "@elliemae/ds-utilities": "2.0.0-rc.1",
-    "@popperjs/core": "~2.10.2",
+    "@dnd-kit/core": "~4.0.1",
+    "@dnd-kit/sortable": "~5.0.0",
+    "@elliemae/ds-button": "2.0.0-rc.13",
+    "@elliemae/ds-circular-progress-indicator": "2.0.0-rc.13",
+    "@elliemae/ds-controlled-form": "2.0.0-rc.13",
+    "@elliemae/ds-drag-and-drop": "2.0.0-rc.13",
+    "@elliemae/ds-dropdownmenu": "2.0.0-rc.13",
+    "@elliemae/ds-form": "2.0.0-rc.13",
+    "@elliemae/ds-form-layout-blocks": "2.0.0-rc.13",
+    "@elliemae/ds-grid": "2.0.0-rc.13",
+    "@elliemae/ds-icons": "2.0.0-rc.13",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.0.0-rc.13",
+    "@elliemae/ds-pagination": "2.0.0-rc.13",
+    "@elliemae/ds-pills": "2.0.0-rc.13",
+    "@elliemae/ds-popperjs": "2.0.0-rc.13",
+    "@elliemae/ds-system": "2.0.0-rc.13",
+    "@elliemae/ds-toolbar": "2.0.0-rc.13",
+    "@elliemae/ds-truncated-tooltip-text": "2.0.0-rc.13",
+    "@elliemae/ds-utilities": "2.0.0-rc.13",
     "@reduxjs/toolkit": "~1.6.2",
-    "array-move": "~3.0.1",
     "csstype": "~3.0.9",
-    "memoize-one": "~5.1.1",
     "moment": "~2.29.1",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",
-    "react-popper": "~2.2.5",
     "react-redux": "~7.2.6",
     "react-virtual": "~2.8.2",
     "redux": "~4.1.2",
     "uid": "~2.0.0"
   },
   "devDependencies": {
+    "@testing-library/react": "~12.1.2",
+    "@testing-library/user-event": "~13.5.0",
     "@types/styled-components": "~5.1.15",
-    "styled-components": "~5.3.3"
+    "styled-components": "~5.3.3",
+    "styled-system": "~5.1.5"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",
     "react": "~17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.3",
+    "styled-system": "^5.1.5"
   },
   "publishConfig": {
     "access": "public",