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

package/cjs/parts/HoC/withConditionalDnDColumnContext.js

@@ -8,14 +8,17 @@ require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var core = require('@dnd-kit/core');
+var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
 var sortable = require('@dnd-kit/sortable');
-var DragOverlayContext = require('./DragOverlayContext.js');
-var useHierarchyDndkitConfig = require('../../helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js');
 var DataTableContext = require('../../DataTableContext.js');
+var HeaderCellGroup = require('../Headers/HeaderCellGroup.js');
+var constants = require('../../configs/constants.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,7 +39,9 @@ const flattenColumns = cols => {
 
   const flatten = function (col, index) {
     let parentId = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-    const id = col.Header;
+    const {
+      id
+    } = col;
     flattened.push([{
       id,
       parentId,
@@ -54,13 +59,11 @@ const withConditionalDnDColumnContext = Component => props => {
   const {
     tableProps: {
       dragAndDropColumns,
-      columns,
       onColumnsReorder
-    }
+    },
+    visibleColumns
   } = React__default["default"].useContext(DataTableContext["default"]);
-  const [PureDraggedJSX, setPureDraggedJSX] = React__default["default"].useState(null); // todo: check if this can be done via portal
-
-  const flattenedItems = React.useMemo(() => flattenColumns(columns), [columns]);
+  const flattenedItems = React.useMemo(() => flattenColumns(visibleColumns), [visibleColumns]);
   const onReorder = React.useCallback((movedItem, indexes) => {
     // Send from index to target index
     const newFlattenedData = sortable.arrayMove(flattenedItems, indexes.fromIndex, indexes.targetIndex); // Pull the cols's data into an object
@@ -84,25 +87,43 @@ const withConditionalDnDColumnContext = Component => props => {
     });
     onColumnsReorder(newData, indexes);
   }, [flattenedItems, onColumnsReorder]);
+  const onPreviewResetState = React.useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+    if (el) el.onscroll = () => null;
+  }, []);
+  const onPreviewDragStart = React.useCallback(() => {
+    const el = document.body.querySelector("[data-testid=\"".concat(constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER, "\"]"));
+
+    if (el) {
+      const y = el.scrollTop;
+
+      el.onscroll = () => el.scrollTo(0, y);
+    }
+  }, []);
   const {
     dndContextProps,
     activeId,
     activeIndex
-  } = useHierarchyDndkitConfig({
+  } = dsDragAndDrop.useHierarchyDndkitConfig({
     flattenedItems,
+    dragOverlayDataTestid: constants.DATA_TESTID.DATA_TABLE_COLUMN_DRAG_OVERLAY,
     isHorizontalDnD: true,
-    onReorder
+    onReorder,
+    onPreviewResetState,
+    onPreviewDragStart
   });
   if (dragAndDropColumns) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
-    children: [/*#__PURE__*/_jsx__default["default"](DragOverlayContext.DragOverlayContext.Provider, {
-      value: {
-        setPureDraggedJSX
-      }
-    }, void 0, /*#__PURE__*/_jsx__default["default"](DnDGroupContext.Provider, {
+    children: [/*#__PURE__*/_jsx__default["default"](DnDGroupContext.Provider, {
       value: {
         activeIndex
       }
-    }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)))), /*#__PURE__*/_jsx__default["default"](core.DragOverlay, {}, void 0, activeId ? PureDraggedJSX : null)]
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props))), /*#__PURE__*/_jsx__default["default"](core.DragOverlay, {}, void 0, activeId ? /*#__PURE__*/_jsx__default["default"](HeaderCellGroup.HeaderCellGroup, {
+      header: flattenedItems.find(_ref3 => {
+        let [item] = _ref3;
+        return item.id === activeId;
+      })[1],
+      isDragOverlay: true
+    }) : null)]
   }));
   return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));
 };

package/cjs/parts/HoC/withConditionalDnDRowContext.js

@@ -8,15 +8,17 @@ require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.find.js');
+require('core-js/modules/esnext.iterator.find.js');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
-var useTreeDndkitConfig = require('../../helpers/dndkit/tree/useTreeDndkitConfig.js');
-var DragOverlayContext = require('./DragOverlayContext.js');
+var dsDragAndDrop = require('@elliemae/ds-drag-and-drop');
 var SortableItemContext = require('./SortableItemContext.js');
+var Row = require('../Row.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -48,8 +50,6 @@ const withConditionalDnDRowContext = Component => props => {
     flattenedData,
     allDataFlattened
   } = React__default["default"].useContext(DataTableContext["default"]);
-  const [PureDraggedJSX, setPureDraggedJSX] = React__default["default"].useState(null); // todo: check if this can be done via portal
-
   const [lastActiveId, setLastActiveId] = React__default["default"].useState(null);
   const onReorder = React.useCallback((newData, indexes, considerExpanding) => {
     // Pull the row's original data into an object
@@ -78,7 +78,7 @@ const withConditionalDnDRowContext = Component => props => {
     depth,
     dropIndicatorPosition,
     visibleItems
-  } = useTreeDndkitConfig({
+  } = dsDragAndDrop.useTreeDndkitConfig({
     flattenedItems: allDataFlattened,
     visibleItems: flattenedData,
     isHorizontalDnD: false,
@@ -89,11 +89,7 @@ const withConditionalDnDRowContext = Component => props => {
   if (lastActiveId !== activeId && activeId) setLastActiveId(activeId);
   if (dragAndDropRows) return /*#__PURE__*/jsxRuntime.jsxs(core.DndContext, _objectSpread(_objectSpread({}, dndContextProps), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, _objectSpread(_objectSpread({}, sortableContextProps), {}, {
-      children: /*#__PURE__*/_jsx__default["default"](DragOverlayContext.DragOverlayContext.Provider, {
-        value: {
-          setPureDraggedJSX
-        }
-      }, void 0, /*#__PURE__*/_jsx__default["default"](DnDTreeContext.Provider, {
+      children: /*#__PURE__*/_jsx__default["default"](DnDTreeContext.Provider, {
         value: {
           activeIndex,
           depth,
@@ -102,12 +98,15 @@ const withConditionalDnDRowContext = Component => props => {
           lastActiveId,
           setLastActiveId
         }
-      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props))))
+      }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)))
     })), /*#__PURE__*/_jsx__default["default"](core.DragOverlay, {
       style: {
         width: 'auto'
       }
-    }, void 0, activeId ? PureDraggedJSX : null)]
+    }, void 0, activeId ? /*#__PURE__*/_jsx__default["default"](Row.Row, {
+      row: flattenedData.find(row => row.uid === activeId),
+      isDragOverlay: true
+    }) : null)]
   }));
   return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));
 };

package/cjs/parts/HoC/withConditionalDnDSortableContext.js

@@ -35,7 +35,7 @@ const withConditionalDnDSortableContext = function (items) {
     // It's important that drag overlays DO NOT have any sortable functionality!
 
     if (!isDragOverlay && dragAndDropColumns) return /*#__PURE__*/_jsx__default["default"](sortable.SortableContext, {
-      items: items.map(item => item.Header),
+      items: items.map(item => item.id),
       strategy: sortable.horizontalListSortingStrategy
     }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
     return /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props));

package/cjs/parts/HoC/withDnDSortableColumnContext.js

@@ -12,7 +12,6 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
-var DragOverlayContext = require('./DragOverlayContext.js');
 var withConditionalDnDColumnContext = require('./withConditionalDnDColumnContext.js');
 var SortableItemContext = require('./SortableItemContext.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -31,18 +30,14 @@ const withDnDSortableColumnContext = Component => props => {
       dragAndDropColumns
     }
   } = React.useContext(DataTableContext["default"]);
-  const {
-    setPureDraggedJSX
-  } = React.useContext(DragOverlayContext.DragOverlayContext);
   const {
     activeIndex
   } = React.useContext(withConditionalDnDColumnContext.DnDGroupContext); // onMount generate unique options, so everyting is only ran once
 
   const draggableOptions = React.useMemo(() => ({
-    id: props.header.Header
-  }), [props.header.Header]);
-  const useSortableHelpers = sortable.useSortable(draggableOptions);
-  const PureComponentJSX = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)), [props]); // calculate all the "useSortable" values as per required
+    id: props.header.id
+  }), [props.header.id]);
+  const useSortableHelpers = sortable.useSortable(draggableOptions); // calculate all the "useSortable" values as per required
 
   const draggableProps = React.useMemo(() => {
     if (!dragAndDropColumns) return false;
@@ -54,16 +49,7 @@ const withDnDSortableColumnContext = Component => props => {
       shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,
       dropIndicatorPosition: index > activeIndex ? SortableItemContext.DropIndicatorPosition.After : SortableItemContext.DropIndicatorPosition.Before
     });
-  }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
-  React.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__*/React.cloneElement(PureComponentJSX, {
-        isDragOverlay: true
-      }));
-    }
-  }, [useSortableHelpers.isDragging, setPureDraggedJSX]); // we use a context so we can easly access information wherever without bubbling down
+  }, [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...
 
@@ -73,7 +59,7 @@ const withDnDSortableColumnContext = Component => props => {
 
   return /*#__PURE__*/_jsx__default["default"](SortableItemContext.SortableItemContext.Provider, {
     value: ctx
-  }, void 0, PureComponentJSX);
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
 };
 
 exports.withDnDSortableColumnContext = withDnDSortableColumnContext;

package/cjs/parts/HoC/withDnDSortableRowContext.js

@@ -13,7 +13,6 @@ var React = require('react');
 var sortable = require('@dnd-kit/sortable');
 var DataTableContext = require('../../DataTableContext.js');
 var withConditionalDnDRowContext = require('./withConditionalDnDRowContext.js');
-var DragOverlayContext = require('./DragOverlayContext.js');
 var SortableItemContext = require('./SortableItemContext.js');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -31,9 +30,6 @@ const withDnDSortableRowContext = Component => props => {
       dragAndDropRows
     }
   } = React.useContext(DataTableContext["default"]);
-  const {
-    setPureDraggedJSX
-  } = React.useContext(DragOverlayContext.DragOverlayContext);
   const {
     dropIndicatorPosition,
     lastActiveId,
@@ -43,8 +39,7 @@ const withDnDSortableRowContext = Component => props => {
   const draggableOptions = React.useMemo(() => ({
     id: props.row.uid
   }), [props.row]);
-  const useSortableHelpers = sortable.useSortable(draggableOptions);
-  const PureComponentJSX = React.useMemo(() => /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)), [props]); // calculate all the "useSortable" values as per required
+  const useSortableHelpers = sortable.useSortable(draggableOptions); // calculate all the "useSortable" values as per required
 
   const draggableProps = React.useMemo(() => {
     if (!dragAndDropRows) return false;
@@ -58,16 +53,7 @@ const withDnDSortableRowContext = Component => props => {
       lastActiveId,
       setLastActiveId
     });
-  }, [dragAndDropRows, useSortableHelpers, dropIndicatorPosition, lastActiveId, setLastActiveId]);
-  React.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__*/React.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...
 
@@ -77,7 +63,7 @@ const withDnDSortableRowContext = Component => props => {
 
   return /*#__PURE__*/_jsx__default["default"](SortableItemContext.SortableItemContext.Provider, {
     value: ctx
-  }, void 0, PureComponentJSX);
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(Component, _objectSpread({}, props)));
 };
 
 exports.withDnDSortableRowContext = withDnDSortableRowContext;

package/cjs/parts/Row.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
@@ -22,17 +24,17 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 
 const setItemRefs = (measureRef, draggableRef, ref) => {
-  const refsToSet = [measureRef];
+  const refsToSet = [];
+  if (measureRef) refsToSet.push(measureRef);
   if (draggableRef) refsToSet.push(draggableRef);
   refsHelpers.setMultipleRefs(...refsToSet)(ref);
 };
 
-const Row = props => {
+const RowComp = props => {
   const {
     row,
     measureRef,
     itemWrapperStyle,
-    itemIndex,
     isDragOverlay,
     focusedRowId,
     selectedRowId
@@ -47,7 +49,7 @@ const Row = props => {
     ref: ref => setItemRefs(measureRef, draggableRef, ref),
     children: /*#__PURE__*/_jsx__default["default"](index.RowVariantMapItem, {
       row: row,
-      itemIndex: itemIndex,
+      itemIndex: row.realIndex,
       isDragOverlay: isDragOverlay,
       ctx: ctx,
       focusedRowId: focusedRowId,
@@ -56,15 +58,13 @@ const Row = props => {
   });
 };
 
-Row.defaultProps = {
-  itemWrapperStyle: {}
-};
-
 const mapStateToProps = state => ({
   focusedRowId: state.rows.focusedRowId,
   selectedRowId: state.rows.selectedRowId
 });
 
-var Row$1 = withDnDSortableRowContext.withDnDSortableRowContext(reactRedux.connect(mapStateToProps)(Row));
+const Row = reactRedux.connect(mapStateToProps)(RowComp);
+var Row$1 = withDnDSortableRowContext.withDnDSortableRowContext(Row);
 
-module.exports = Row$1;
+exports.Row = Row;
+exports["default"] = Row$1;

package/cjs/parts/Rows.js

@@ -64,7 +64,7 @@ const Rows = () => {
         itemIndex: index,
         itemWrapperStyle: style
       };
-      return /*#__PURE__*/jsxRuntime.jsx(Row, _objectSpread({}, rowProps));
+      return /*#__PURE__*/jsxRuntime.jsx(Row["default"], _objectSpread({}, rowProps));
     })
   }), [virtualItems, items, visibleColumns, totalColumnsWidth]);
   return PureVirtualizedRows;

package/cjs/parts/index.js

@@ -14,6 +14,6 @@ var DnDHandle = require('./DnDHandle.js');
 exports.TableContent = TableContent;
 exports.Loader = Loader;
 exports.EmptyContent = EmptyContent;
-exports.Row = Row;
+exports.Row = Row["default"];
 exports.Footer = Footer;
 exports.DnDHandle = DnDHandle;

package/cjs/styled.js

@@ -158,22 +158,27 @@ const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPen
 })([""]);
 const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-15"
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], zIndexInternalConfig.ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
 const GroupHeaderContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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__default["default"].span.withConfig({
@@ -181,33 +186,33 @@ const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig
 })(["font-weight:", ";font-size:12px;color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral[700]);
 const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).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 === constants.ColsLayoutStyle.Fixed ? sizeToCss.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 === constants.ColsLayoutStyle.Fixed ? sizeToCss.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');
 
 exports.GroupHeaderContainer = GroupHeaderContainer;
 exports.GroupHeaderTitle = GroupHeaderTitle;

package/esm/DataTableSchema.js

@@ -1,7 +1,7 @@
 import { PropTypes } from 'react-desc';
 
 /* eslint-disable max-lines */
-const outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-text', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
+const outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
 const textWrappingType = PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);
 const rowVariantType = PropTypes.oneOf(['ds_header_group_row', 'ds_primary_row', 'ds_secondary_row']);
 const columnPropTypes = {
@@ -64,20 +64,29 @@ const DataTableSchema = {
     })).description('Any extra option you want in the dropdownmenu of the filter bar')
   }).description('Props for the filter bar'),
   onFiltersChange: PropTypes.func.description('Function invoked when filters change'),
-  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    pageIndex: PropTypes.number.description('Index of the current page, starting from 1'),
-    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not'),
-    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not'),
-    pageSize: PropTypes.number.description('The current page size'),
-    perPageOptions: PropTypes.arrayOf(PropTypes.number).description('The available options for page size'),
-    onPageChange: PropTypes.func.description('Function invoked when the page is changed'),
-    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed'),
-    onNextPage: PropTypes.func.description('Function invoked when next button is pressed'),
-    pageCount: PropTypes.number.description('How many pages are there. By default it will be calculated based on the ammount of rows you have'),
+  pagination: PropTypes.shape({
+    pageCount: PropTypes.number.description('How many pages are there'),
+    pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
+    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
+    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
+    pageSize: PropTypes.number.description('The current page size').defaultValue(10),
     showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
+    perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      dsId: PropTypes.string,
+      value: PropTypes.number,
+      label: PropTypes.string,
+      type: PropTypes.oneOf(['single'])
+    })])).description('The available options for page size').defaultValue([10]),
+    perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),
+    minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),
+    maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),
+    onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
+    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
+    onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
+    onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
     pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),
     pageDetailsTitle: PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue('')
-  })]).description('Object containing the data for the pagination'),
+  }).description('Object containing the data for the pagination'),
   colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),
   hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),
   dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),

package/esm/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -70,15 +70,31 @@ const TextEditableCell = props => {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  const handleOnKeyDown = useCallback(e => {
+    if (e.code === 'Enter') {
+      cell.ref.current.focus(); // will exec on blur callback from input and save new value
+    }
+
+    if (e.code === 'Escape') {
+      setValue(cell.value);
+      const auxRef = cell.ref.current; // this prevent the on blur
+
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
   return /*#__PURE__*/_jsx(EditableCell, {
     StandardRender: DefaultCellRender,
     EditableRenderer: /*#__PURE__*/_jsx(StyledInput, {
       value: value,
+      onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       onBlur: handleOnBlur,
       autoFocus: true
     }),
     cell: cell,
+    setValue: setValue,
     isRowSelected: isRowSelected
   });
 };

package/esm/addons/Filters/Components/CurrencyRangeFilter/index.js

@@ -37,6 +37,8 @@ import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
+import '../../../../redux/reducers/headersReducers/headersReducers.js';
+import { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
 var _SearchXsmall;
 
@@ -82,6 +84,20 @@ const CurrencyRangeFilter = props => {
     onValueChange(FILTER_TYPES.CURRENCY_RANGE, nextValue);
   };
 
+  const {
+    patchHeader
+  } = useDispatchHeadersActions(); // workaround to close menu with esc key since DSInputMask has stoppropagation on key down
+
+  const closePopover = e => {
+    if (e.code === 'Escape') {
+      patchHeader(column.id, {
+        hideFilterMenu: true,
+        hideFilterButton: false
+      });
+      innerRef.current.focus();
+    }
+  };
+
   const idPreffix = 'datatable-currency-range';
   return /*#__PURE__*/_jsx(FilterPopover, {
     reduxHeader: reduxHeader,
@@ -106,7 +122,10 @@ const CurrencyRangeFilter = props => {
       onChange: handleFromChange,
       placeholder: "0.00",
       mask: number => MASK_TYPES.NUMBER(opts)(number),
-      autoFocus: true
+      autoFocus: true,
+      onKeyDown: e => {
+        closePopover(e);
+      }
     })), /*#__PURE__*/_jsx(DSFormLayoutBlockItem, {
       label: "Max",
       inputID: "".concat(idPreffix, "-max-").concat(column.id)
@@ -120,7 +139,10 @@ const CurrencyRangeFilter = props => {
       value: "".concat((_filterValue$to = filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) !== null && _filterValue$to !== void 0 ? _filterValue$to : ''),
       onChange: handleToChange,
       placeholder: "0.00",
-      mask: number => MASK_TYPES.NUMBER(opts)(number)
+      mask: number => MASK_TYPES.NUMBER(opts)(number),
+      onKeyDown: e => {
+        closePopover(e);
+      }
     }))),
     triggerIcon: _SearchXsmall || (_SearchXsmall = /*#__PURE__*/_jsx(SearchXsmall, {})),
     customStyles: {

package/esm/addons/Filters/Components/DateRangeFilter/index.js

@@ -80,7 +80,10 @@ const DateRangeFilter = props => {
       width: "260px",
       "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
     }, void 0, /*#__PURE__*/_jsx(Grid, {
-      p: "xxs"
+      p: "xxs",
+      style: {
+        background: 'white'
+      }
     }, void 0, /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
       fromDate: startDate,
       onFromDateChange: setStartDate,