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

package/cjs/DataTableSchema.js

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

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

@@ -41,6 +41,8 @@ require('../../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');
 require('core-js/modules/esnext.async-iterator.some.js');
 require('core-js/modules/esnext.iterator.some.js');
+require('../../../../redux/reducers/headersReducers/headersReducers.js');
+var useDispatchHeadersActions = require('../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -92,6 +94,20 @@ const CurrencyRangeFilter = props => {
     onValueChange(FilterTypes.FILTER_TYPES.CURRENCY_RANGE, nextValue);
   };
 
+  const {
+    patchHeader
+  } = useDispatchHeadersActions.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__default["default"](FilterPopover.FilterPopover, {
     reduxHeader: reduxHeader,
@@ -116,7 +132,10 @@ const CurrencyRangeFilter = props => {
       onChange: handleFromChange,
       placeholder: "0.00",
       mask: number => dsForm.MASK_TYPES.NUMBER(opts)(number),
-      autoFocus: true
+      autoFocus: true,
+      onKeyDown: e => {
+        closePopover(e);
+      }
     })), /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
       label: "Max",
       inputID: "".concat(idPreffix, "-max-").concat(column.id)
@@ -130,7 +149,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 => dsForm.MASK_TYPES.NUMBER(opts)(number)
+      mask: number => dsForm.MASK_TYPES.NUMBER(opts)(number),
+      onKeyDown: e => {
+        closePopover(e);
+      }
     }))),
     triggerIcon: _SearchXsmall || (_SearchXsmall = /*#__PURE__*/_jsx__default["default"](dsIcons.SearchXsmall, {})),
     customStyles: {

package/cjs/addons/Filters/Components/NumberRangeFilter/index.js

@@ -41,6 +41,8 @@ require('../../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');
 require('core-js/modules/esnext.async-iterator.some.js');
 require('core-js/modules/esnext.iterator.some.js');
+require('../../../../redux/reducers/headersReducers/headersReducers.js');
+var useDispatchHeadersActions = require('../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -95,13 +97,27 @@ const NumberRangeFilter = props => {
     onValueChange(FilterTypes.FILTER_TYPES.CURRENCY_RANGE, nextValue);
   };
 
+  const {
+    patchHeader
+  } = useDispatchHeadersActions.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-number-range';
   return /*#__PURE__*/_jsx__default["default"](FilterPopover.FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
     menuContent: /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
-      "data-testid": constants.DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
+      "data-testid": constants.DATA_TESTID.DATA_TABLE_NUMBER_RANGE_CONTROLLER,
       gutter: "xxxs",
       padding: "xxs",
       cols: ['auto', 'auto']
@@ -119,7 +135,10 @@ const NumberRangeFilter = props => {
       onChange: handleFromChange,
       placeholder: "0",
       mask: number => dsForm.MASK_TYPES.NUMBER(opts)(number),
-      autoFocus: true
+      autoFocus: true,
+      onKeyDown: e => {
+        closePopover(e);
+      }
     })), /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
       label: "High",
       inputID: "".concat(idPreffix, "-high-").concat(column.id)
@@ -133,7 +152,10 @@ const NumberRangeFilter = 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",
-      mask: number => dsForm.MASK_TYPES.NUMBER(opts)(number)
+      mask: number => dsForm.MASK_TYPES.NUMBER(opts)(number),
+      onKeyDown: e => {
+        closePopover(e);
+      }
     }))),
     triggerIcon: _SearchXsmall || (_SearchXsmall = /*#__PURE__*/_jsx__default["default"](dsIcons.SearchXsmall, {})),
     customStyles: {

package/cjs/addons/Filters/Components/index.js

@@ -9,7 +9,6 @@ var index$3 = require('./CurrencyRangeFilter/index.js');
 var SingleSelectFilter = require('./SelectFilter/SingleSelectFilter.js');
 var MultiSelectFilter = require('./SelectFilter/MultiSelectFilter.js');
 var index$4 = require('./SingleDateFilter/index.js');
-var index$5 = require('./TextInputFilter/index.js');
 
 
 
@@ -20,4 +19,3 @@ exports.CurrencyRangeFilter = index$3.CurrencyRangeFilter;
 exports.SingleSelectFilter = SingleSelectFilter.SingleSelectFilter;
 exports.MultiSelectFilter = MultiSelectFilter.MultiSelectFilter;
 exports.SingleDateFilter = index$4.SingleDateFilter;
-exports.TextInputFilter = index$5.TextInputFilter;

package/cjs/addons/Filters/index.js

@@ -9,7 +9,6 @@ var index$3 = require('./Components/CurrencyRangeFilter/index.js');
 var SingleSelectFilter = require('./Components/SelectFilter/SingleSelectFilter.js');
 var MultiSelectFilter = require('./Components/SelectFilter/MultiSelectFilter.js');
 var index$4 = require('./Components/SingleDateFilter/index.js');
-var index$5 = require('./Components/TextInputFilter/index.js');
 
 
 
@@ -20,4 +19,3 @@ exports.CurrencyRangeFilter = index$3.CurrencyRangeFilter;
 exports.SingleSelectFilter = SingleSelectFilter.SingleSelectFilter;
 exports.MultiSelectFilter = MultiSelectFilter.MultiSelectFilter;
 exports.SingleDateFilter = index$4.SingleDateFilter;
-exports.TextInputFilter = index$5.TextInputFilter;

package/cjs/configs/usePaginationConfig.js

@@ -24,7 +24,7 @@ const usePaginationConfig = (props, flattenedData) => {
     onPreviousPage = emptyFunc,
     onNextPage = emptyFunc,
     onPageChange = emptyFunc,
-    pageCount = Math.floor(flattenedData.length / pageSize),
+    pageCount = Math.ceil(flattenedData.length / pageSize),
     perPageStep = 5,
     minPerPage = 0,
     maxPerPage = 100,

package/cjs/configs/useRowFlattenization.js

@@ -25,7 +25,7 @@ const flatten = function (data, expandedRows, uniqueRowAccessor) {
     const id = (parentId ? "".concat(parentId, ".") : '') + index.toString();
     const uid = getIdFromUniqueRowAccessor.getIdFromUniqueRowAccessor(uniqueRowAccessor, {
       id,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     });
     const isExpanded = expandedRows[uid];
     const rowToPush = {
@@ -37,11 +37,11 @@ const flatten = function (data, expandedRows, uniqueRowAccessor) {
       parentIndex,
       depth,
       isExpanded,
-      original: row
+      original: row !== null && row !== void 0 ? row : {}
     };
     result.push(rowToPush); // If we have subrows and we are expanded
 
-    if (row.subRows && expandedRows[uid] && depth <= maxDepth) {
+    if (row !== null && row !== void 0 && row.subRows && expandedRows[uid] && depth <= maxDepth) {
       row.subRows.forEach((subRow, i) => doit(subRow, i, uid, rowToPush.realIndex, depth + 1));
     }
   };

package/cjs/exported-related/EditableCell.js

@@ -62,14 +62,14 @@ const EditableCell = props => {
     onBlur: handleOnBlur,
     shouldDisplayEditIcon: cell.column.alwaysDisplayEditIcon,
     role: "cell",
-    "aria-describedby": isEditing ? undefined : cell.id,
+    "aria-labelledby": isEditing ? undefined : cell.id,
     children: [!isEditing ? StandardRender : EditableRenderer, !isEditing && (_StyledPencilIcon || (_StyledPencilIcon = /*#__PURE__*/_jsx__default["default"](styled.StyledPencilIcon, {}))), /*#__PURE__*/_jsx__default["default"]("span", {
       id: cell.id,
       style: {
         display: 'none'
       },
       "aria-hidden": "true"
-    }, void 0, "Editable cell. To edit the content's of this cell, press the Enter key")]
+    }, void 0, cell.value, ", editable cell. To edit the content's of this cell, press the Enter key")]
   });
 };
 

package/cjs/exported-related/FilterPopover.js

@@ -52,6 +52,9 @@ const FilterButton = /*#__PURE__*/styled__default["default"].span.withConfig({
 const Button = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
+const PopperContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-16i88ut-2"
+})(["background-color:'#fff';"]);
 const FilterPopover = _ref2 => {
   var _column$ref$current$o, _column$ref, _column$ref$current;
 
@@ -152,9 +155,20 @@ const FilterPopover = _ref2 => {
       minWidth: (_column$ref$current$o = (_column$ref = column.ref) === null || _column$ref === void 0 ? void 0 : (_column$ref$current = _column$ref.current) === null || _column$ref$current === void 0 ? void 0 : _column$ref$current.offsetWidth) !== null && _column$ref$current$o !== void 0 ? _column$ref$current$o : '0px'
     }),
     placementOrderPreference: ['bottom-end']
-  }, void 0, /*#__PURE__*/jsxRuntime.jsx("div", {
-    style: {
-      backgroundColor: '#fff'
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx(PopperContent, {
+    onKeyDown: e => {
+      if (e.code === 'Tab') {
+        setTimeout(() => {
+          var _popperRef$current;
+
+          if (!(popperRef !== null && popperRef !== void 0 && (_popperRef$current = popperRef.current) !== null && _popperRef$current !== void 0 && _popperRef$current.contains(document.activeElement))) {
+            patchHeader(columnId, {
+              hideFilterMenu: true,
+              hideFilterButton: false
+            });
+          }
+        });
+      }
     },
     ref: popperRef,
     children: menuContent

package/cjs/exported-related/FilterTypes.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const FILTER_TYPES = {
   SELECT: 'ds-filter-select',
   MULTI_SELECT: 'ds-filter-multi-select',
-  TEXT: 'ds-filter-text',
   SINGLE_DATE: 'ds-filter-single-date',
   DATE_RANGE: 'ds-filter-date-range',
   DATE_SWITCHER: 'ds-filter-date-switcher',

package/cjs/exported-related/Filters/applyOutOfTheBoxFilters.js

@@ -7,7 +7,6 @@ require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 var singleSelectFilterFn = require('./singleSelectFilterFn.js');
 var multiSelectFilterFn = require('./multiSelectFilterFn.js');
-var textFilterFn = require('./textFilterFn.js');
 var singleDateFilterFn = require('./singleDateFilterFn.js');
 var dateRangeFilterFn = require('./dateRangeFilterFn.js');
 var dateSwitcherFilterFn = require('./dateSwitcherFilterFn.js');
@@ -19,7 +18,6 @@ var FilterTypes = require('../FilterTypes.js');
 const filterMapper = {
   [FilterTypes.FILTER_TYPES.SELECT]: singleSelectFilterFn.singleSelectFilterFn,
   [FilterTypes.FILTER_TYPES.MULTI_SELECT]: multiSelectFilterFn.multiSelectFilterFn,
-  [FilterTypes.FILTER_TYPES.TEXT]: textFilterFn.textFilterFn,
   [FilterTypes.FILTER_TYPES.SINGLE_DATE]: singleDateFilterFn.singleDateFilterFn,
   [FilterTypes.FILTER_TYPES.DATE_RANGE]: dateRangeFilterFn.dateRangeFilterFn,
   [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: dateSwitcherFilterFn.dateSwitcherFilterFn,

package/cjs/exported-related/Filters/index.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var applyOutOfTheBoxFilters = require('./applyOutOfTheBoxFilters.js');
-var textFilterFn = require('./textFilterFn.js');
 var singleDateFilterFn = require('./singleDateFilterFn.js');
 var singleSelectFilterFn = require('./singleSelectFilterFn.js');
 var multiSelectFilterFn = require('./multiSelectFilterFn.js');
@@ -14,7 +13,6 @@ var dateRangeFilterFn = require('./dateRangeFilterFn.js');
 
 
 exports.applyOutOfTheBoxFilters = applyOutOfTheBoxFilters.applyOutOfTheBoxFilters;
-exports.textFilterFn = textFilterFn.textFilterFn;
 exports.singleDateFilterFn = singleDateFilterFn.singleDateFilterFn;
 exports.singleSelectFilterFn = singleSelectFilterFn.singleSelectFilterFn;
 exports.multiSelectFilterFn = multiSelectFilterFn.multiSelectFilterFn;

package/cjs/exported-related/index.js

@@ -9,7 +9,6 @@ var groupBy = require('./groupBy.js');
 var FilterTypes = require('./FilterTypes.js');
 var RowVariants = require('./RowVariants.js');
 var applyOutOfTheBoxFilters = require('./Filters/applyOutOfTheBoxFilters.js');
-var textFilterFn = require('./Filters/textFilterFn.js');
 var singleDateFilterFn = require('./Filters/singleDateFilterFn.js');
 var singleSelectFilterFn = require('./Filters/singleSelectFilterFn.js');
 var multiSelectFilterFn = require('./Filters/multiSelectFilterFn.js');
@@ -28,7 +27,6 @@ exports.ROW_VARIANTS = RowVariants.ROW_VARIANTS;
 exports.ROW_VARIANT_COMPACT_KEY = RowVariants.ROW_VARIANT_COMPACT_KEY;
 exports.ROW_VARIANT_KEY = RowVariants.ROW_VARIANT_KEY;
 exports.applyOutOfTheBoxFilters = applyOutOfTheBoxFilters.applyOutOfTheBoxFilters;
-exports.textFilterFn = textFilterFn.textFilterFn;
 exports.singleDateFilterFn = singleDateFilterFn.singleDateFilterFn;
 exports.singleSelectFilterFn = singleSelectFilterFn.singleSelectFilterFn;
 exports.multiSelectFilterFn = multiSelectFilterFn.multiSelectFilterFn;

package/cjs/helpers/refs-helpers.js

@@ -15,8 +15,8 @@ const setMultipleRefs = function () {
   }
 
   const filteredRefs = refs.filter(Boolean);
-  if (!filteredRefs.length) return null;
-  if (filteredRefs.length === 0) return filteredRefs[0];
+  if (!filteredRefs.length) return () => null;
+  if (filteredRefs.length === 0) return () => null;
   return newRef => {
     filteredRefs.forEach(refToBeUpdated => {
       if (typeof refToBeUpdated === 'function') {

package/cjs/index.js

@@ -10,7 +10,6 @@ var groupBy = require('./exported-related/groupBy.js');
 var FilterTypes = require('./exported-related/FilterTypes.js');
 var RowVariants = require('./exported-related/RowVariants.js');
 var applyOutOfTheBoxFilters = require('./exported-related/Filters/applyOutOfTheBoxFilters.js');
-var textFilterFn = require('./exported-related/Filters/textFilterFn.js');
 var singleDateFilterFn = require('./exported-related/Filters/singleDateFilterFn.js');
 var singleSelectFilterFn = require('./exported-related/Filters/singleSelectFilterFn.js');
 var multiSelectFilterFn = require('./exported-related/Filters/multiSelectFilterFn.js');
@@ -31,7 +30,6 @@ exports.ROW_VARIANTS = RowVariants.ROW_VARIANTS;
 exports.ROW_VARIANT_COMPACT_KEY = RowVariants.ROW_VARIANT_COMPACT_KEY;
 exports.ROW_VARIANT_KEY = RowVariants.ROW_VARIANT_KEY;
 exports.applyOutOfTheBoxFilters = applyOutOfTheBoxFilters.applyOutOfTheBoxFilters;
-exports.textFilterFn = textFilterFn.textFilterFn;
 exports.singleDateFilterFn = singleDateFilterFn.singleDateFilterFn;
 exports.singleSelectFilterFn = singleSelectFilterFn.singleSelectFilterFn;
 exports.multiSelectFilterFn = multiSelectFilterFn.multiSelectFilterFn;

package/cjs/parts/FilterBar/FiltersBar.js

@@ -49,7 +49,6 @@ var MultiSelectPill = require('./components/MultiSelectPill.js');
 var NumberRangePill = require('./components/NumberRangePill.js');
 var SelectPill = require('./components/SelectPill.js');
 var SingleDatePill = require('./components/SingleDatePill.js');
-var TextPill = require('./components/TextPill.js');
 var styled = require('./styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -62,7 +61,6 @@ var _MoreOptionsVert;
 const pillRenderMapper = {
   [FilterTypes.FILTER_TYPES.SELECT]: SelectPill.SelectPill,
   [FilterTypes.FILTER_TYPES.MULTI_SELECT]: MultiSelectPill.MultiSelectPill,
-  [FilterTypes.FILTER_TYPES.TEXT]: TextPill.TextPill,
   [FilterTypes.FILTER_TYPES.SINGLE_DATE]: SingleDatePill.SingleDatePill,
   [FilterTypes.FILTER_TYPES.DATE_RANGE]: DateRangePill.DateRangePill,
   [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill.DateSwitcherPill,

package/cjs/parts/FilterBar/components/index.js

@@ -8,7 +8,6 @@ var MultiSelectPill = require('./MultiSelectPill.js');
 var NumberRangePill = require('./NumberRangePill.js');
 var SelectPill = require('./SelectPill.js');
 var SingleDatePill = require('./SingleDatePill.js');
-var TextPill = require('./TextPill.js');
 
 
 
@@ -18,4 +17,3 @@ exports.MultiSelectPill = MultiSelectPill.MultiSelectPill;
 exports.NumberRangePill = NumberRangePill.NumberRangePill;
 exports.SelectPill = SelectPill.SelectPill;
 exports.SingleDatePill = SingleDatePill.SingleDatePill;
-exports.TextPill = TextPill.TextPill;

package/cjs/parts/Filters/index.js

@@ -12,14 +12,13 @@ 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.for-each.js');
 var React = require('react');
-var index$2 = require('../../addons/Filters/Components/DateRangeFilter/index.js');
-var index$3 = require('../../addons/Filters/Components/DateSwitcherFilter/index.js');
-var index$4 = require('../../addons/Filters/Components/NumberRangeFilter/index.js');
-var index$5 = require('../../addons/Filters/Components/CurrencyRangeFilter/index.js');
+var index$1 = require('../../addons/Filters/Components/DateRangeFilter/index.js');
+var index$2 = require('../../addons/Filters/Components/DateSwitcherFilter/index.js');
+var index$3 = require('../../addons/Filters/Components/NumberRangeFilter/index.js');
+var index$4 = require('../../addons/Filters/Components/CurrencyRangeFilter/index.js');
 var SingleSelectFilter = require('../../addons/Filters/Components/SelectFilter/SingleSelectFilter.js');
 var MultiSelectFilter = require('../../addons/Filters/Components/SelectFilter/MultiSelectFilter.js');
-var index$1 = require('../../addons/Filters/Components/SingleDateFilter/index.js');
-var index = require('../../addons/Filters/Components/TextInputFilter/index.js');
+var index = require('../../addons/Filters/Components/SingleDateFilter/index.js');
 require('@babel/runtime/helpers/jsx');
 require('@elliemae/ds-button');
 require('@elliemae/ds-popperjs');
@@ -63,12 +62,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 const FilterMapper = {
   [FilterTypes.FILTER_TYPES.SELECT]: SingleSelectFilter.SingleSelectFilter,
   [FilterTypes.FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter.MultiSelectFilter,
-  [FilterTypes.FILTER_TYPES.TEXT]: index.TextInputFilter,
-  [FilterTypes.FILTER_TYPES.SINGLE_DATE]: index$1.SingleDateFilter,
-  [FilterTypes.FILTER_TYPES.DATE_RANGE]: index$2.DateRangeFilter,
-  [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: index$3.DateSwitcherFilter,
-  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: index$4.NumberRangeFilter,
-  [FilterTypes.FILTER_TYPES.CURRENCY_RANGE]: index$5.CurrencyRangeFilter
+  [FilterTypes.FILTER_TYPES.SINGLE_DATE]: index.SingleDateFilter,
+  [FilterTypes.FILTER_TYPES.DATE_RANGE]: index$1.DateRangeFilter,
+  [FilterTypes.FILTER_TYPES.DATE_SWITCHER]: index$2.DateSwitcherFilter,
+  [FilterTypes.FILTER_TYPES.NUMBER_RANGE]: index$3.NumberRangeFilter,
+  [FilterTypes.FILTER_TYPES.CURRENCY_RANGE]: index$4.CurrencyRangeFilter
 };
 const FilterMapItem = props => {
   const {

package/cjs/parts/Headers/HeaderCellGroup.js

@@ -63,7 +63,7 @@ const HeaderCellGroupComp = _ref => {
   const children = header.columns;
   const isDragging = draggableProps && draggableProps.isDragging || isDraggingParent;
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
-  const ChildGroup = isDragOverlay ? NotSortableHeaderCellGroup : HeaderCellGroup;
+  const ChildGroup = isDragOverlay ? HeaderCellGroup : HeaderCellGroupSortable;
   const colSpan = (_children$length = children === null || children === void 0 ? void 0 : children.length) !== null && _children$length !== void 0 ? _children$length : 1;
   return /*#__PURE__*/jsxRuntime.jsxs(StyledWrapper, {
     ref: draggableProps ? draggableProps.setNodeRef : null,
@@ -93,7 +93,8 @@ const HeaderCellGroupComp = _ref => {
 };
 
 // We need to declare this because we MUST avoid the useSortable call in the recursive calls of the function
-const NotSortableHeaderCellGroup = HeaderCellGroupComp;
-const HeaderCellGroup = withDnDSortableColumnContext.withDnDSortableColumnContext(HeaderCellGroupComp);
+const HeaderCellGroup = HeaderCellGroupComp;
+const HeaderCellGroupSortable = withDnDSortableColumnContext.withDnDSortableColumnContext(HeaderCellGroupComp);
 
 exports.HeaderCellGroup = HeaderCellGroup;
+exports["default"] = HeaderCellGroupSortable;

package/cjs/parts/Headers/index.js

@@ -35,7 +35,7 @@ const HeadersComp = () => {
     cols: gridLayout,
     colsLayoutStyle: colsLayoutStyle,
     isExpandable: isExpandable
-  }, void 0, visibleColumns.map((h, index) => /*#__PURE__*/_jsx__default["default"](HeaderCellGroup.HeaderCellGroup, {
+  }, void 0, visibleColumns.map((h, index) => /*#__PURE__*/_jsx__default["default"](HeaderCellGroup["default"], {
     header: h,
     isLast: index === visibleColumns.length - 1
   }, h.id)))), [isExpandable, visibleColumns, gridLayout, colsLayoutStyle]);

package/cjs/parts/Headers/useHeaderCellHandlers.js

@@ -45,7 +45,9 @@ const useHeaderCellHandlers = _ref => {
     patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
   }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);
   const onMouseLeave = React.useCallback(() => {
-    if (!headerRef.current.contains(document.activeElement)) {
+    var _headerRef$current;
+
+    if (!(headerRef !== null && headerRef !== void 0 && (_headerRef$current = headerRef.current) !== null && _headerRef$current !== void 0 && _headerRef$current.contains(document.activeElement))) {
       patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
@@ -80,7 +82,7 @@ const useHeaderCellHandlers = _ref => {
   }, [column.canSort, column.id, onColumnSortChange, patchHeader, reduxHeader, hasFilter, hasDnD, dragHandleRef, filterIconRef]);
   const onFocus = React.useCallback(e => {
     // Don't do anything if focus wasn't placed in the element (bubling issues)
-    if (e.target === headerRef.current) {
+    if (e.target === (headerRef === null || headerRef === void 0 ? void 0 : headerRef.current)) {
       patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
     }
   }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);

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));
 };