@elliemae/ds-data-table 1.53.4-rc.3 → 1.53.5-rc.0

package/cjs/{styled-70bdf2af.js → styled-256fc644.js}

@@ -63,8 +63,7 @@ var helpers_dndkit_hierarchy_useHierarchyActionHandlers = require('./helpers/dnd
 var helpers_dndkit_hierarchy_useHierarchyAnnouncements = require('./helpers/dndkit/hierarchy/useHierarchyAnnouncements.js');
 var parts_SortByCaret = require('./parts/SortByCaret.js');
 var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
-var dsDatePicker = require('@elliemae/ds-date-picker');
-var dsDateRangePicker = require('@elliemae/ds-date-range-picker');
+var dsControlledForm = require('@elliemae/ds-controlled-form');
 var DSTextBox = require('@elliemae/ds-form/TextBox');
 var SearchIcon = require('@elliemae/ds-icons/SearchXsmall');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -152,7 +151,10 @@ var expandRowColumn = {
       title: "Toggle All Rows Expanded",
       onClick: onExpandedAllHandler,
       onKeyDown: function onKeyDown(e) {
-        return ['Enter', 'Space'].includes(e.code) && onExpandedAllHandler();
+        if (['Enter', 'Space'].includes(e.code)) {
+          onExpandedAllHandler();
+          e.preventDefault();
+        }
       },
       "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
@@ -208,6 +210,7 @@ var expandRowColumn = {
         onClick: onRowExpandHandler,
         onKeyDown: function onKeyDown(e) {
           if (['Enter', 'Space'].includes(e.code)) {
+            e.preventDefault();
             onRowExpandHandler(e);
           }
         },
@@ -299,8 +302,8 @@ var multiSelectColumn = {
 
       return {};
     }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    var onChangeHandler = React.useCallback(function () {
-      onSelectionChange(newSelection);
+    var onChangeHandler = React.useCallback(function (e) {
+      onSelectionChange(newSelection, 'All', e);
     }, [newSelection, onSelectionChange]);
     var PureHeaderCheckbox = React.useMemo(function () {
       return /*#__PURE__*/React__default['default'].createElement(DSCheckbox__default['default'], {
@@ -334,7 +337,7 @@ var multiSelectColumn = {
         "aria-checked": selectedState,
         "aria-disabled": false,
         checked: selectedState,
-        onChange: function onChange() {
+        onChange: function onChange(e) {
           var newState = !selectedState;
 
           var newSelection = _objectSpread$a(_objectSpread$a({}, selection), {}, _defineProperty__default['default']({}, uid, newState)); // we only want true and mixed values
@@ -342,7 +345,7 @@ var multiSelectColumn = {
 
           if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
 
-          onSelectionChange(newSelection);
+          onSelectionChange(newSelection, uid, e);
         },
         disabled: disabledRows[row.uid],
         innerRef: cell.ref,
@@ -538,8 +541,8 @@ var Button = /*#__PURE__*/styled__default['default'](DSButton__default['default'
   componentId: "sc-16i88ut-1"
 })(["position:relative;justify-self:flex-end;"]);
 var FilterPopover = function FilterPopover(_ref2) {
-  var column = _ref2.column,
-      columnId = _ref2.columnId,
+  _ref2.column;
+      var columnId = _ref2.columnId,
       triggerIcon = _ref2.triggerIcon,
       menuContent = _ref2.menuContent,
       onTriggerClick = _ref2.onTriggerClick,
@@ -565,7 +568,7 @@ var FilterPopover = function FilterPopover(_ref2) {
 
   var handleClickOutsideMenu = function handleClickOutsideMenu(e) {
     onClickOutsideMenu(columnId, e);
-    patchHeaderFilterButtonAndMenu(columnId, true);
+    if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);
   };
 
   var handleTriggerClick = function handleTriggerClick(e) {
@@ -598,16 +601,15 @@ var FilterPopover = function FilterPopover(_ref2) {
   var updatedReferenceElement = React.useCallback(function (newRef) {
     setPopperElement(newRef);
     ref.current = newRef;
-  }, [setPopperElement]);
-  var hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
+  }, [setPopperElement]); // const hasSortingCaret = column && column.canSort && typeof column.isSortedDesc === 'boolean';
 
   var _usePopper = reactPopper.usePopper(referenceElement, popperElement, {
-    placement: 'left-end',
+    placement: 'bottom-end',
     modifiers: [{
       name: 'offset',
       enabled: true,
       options: {
-        offset: [4, -22 - (hasSortingCaret ? 20 : 0)]
+        offset: [3, 4]
       }
     }, {
       name: 'preventOverflow',
@@ -709,11 +711,20 @@ var EditableCell = function EditableCell(props) {
   var _useState = React.useState(false),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
       isEditing = _useState2[0],
-      setIsEditing = _useState2[1]; // When an editable cell is switched on-off, we recalculate the height of the rows
+      setIsEditing = _useState2[1];
 
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      lastIsEditing = _useState4[0],
+      setLastIsEditing = _useState4[1]; // When an editable cell is switched on-off, we recalculate the height of the rows
+
+
+  React.useLayoutEffect(function () {
+    if (isEditing !== lastIsEditing) {
+      virtualListHelpers.measure();
+      setLastIsEditing(isEditing);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  React.useEffect(function () {
-    virtualListHelpers.measure(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEditing]);
   var handleCellClick = React.useCallback(function (e) {
     if (!isEditing) {
@@ -944,8 +955,6 @@ var Cell = function Cell(_ref2) {
   }, [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column]);
   var CellComponent = cell.render;
   var pureCellContent = React.useMemo(function () {
-    if (typeof cell.value === 'function') return cell.value(cell);
-
     if (shouldAddExpandCell) {
       return /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
         cols: ['min-content', 'auto'],
@@ -955,7 +964,7 @@ var Cell = function Cell(_ref2) {
     }
 
     return /*#__PURE__*/React__default['default'].createElement(CellComponent, cellProps);
-  }, [CellComponent, cell, cellProps, shouldAddExpandCell]);
+  }, [CellComponent, cellProps, shouldAddExpandCell]);
   var DefaultCellContentJSX = React.useMemo(function () {
     return /*#__PURE__*/React__default['default'].createElement(StyledCellContent, null, appliedTextWrap === 'truncate' ? /*#__PURE__*/React__default['default'].createElement(dsTruncatedTooltipText.SimpleTruncatedTooltipText, {
       value: pureCellContent
@@ -976,12 +985,7 @@ var Cell = function Cell(_ref2) {
     }, cellProps));
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
-
-  if (!column.editable) {
-    return /*#__PURE__*/React__default['default'].createElement(PureStandardCell, cellProps, DefaultCellContentJSX);
-  }
-
-  return /*#__PURE__*/React__default['default'].createElement(PureStandardCell, cellProps, EditableContentJSX);
+  return /*#__PURE__*/React__default['default'].createElement(PureStandardCell, cellProps, column.editable ? EditableContentJSX : DefaultCellContentJSX);
 };
 
 /* eslint-disable react/prop-types */
@@ -1082,6 +1086,7 @@ var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
       expandedRows = _props$ctx$tableProps.expandedRows,
       disabledRows = _props$ctx$tableProps.disabledRows,
       gridLayout = _props$ctx.layoutHelpers.gridLayout,
+      visibleColumns = _props$ctx.visibleColumns,
       draggableProps = props.draggableProps,
       isDragOverlay = props.isDragOverlay,
       _props$backgroundColo = props.backgroundColor,
@@ -1105,6 +1110,20 @@ var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
       colLayoutStyle: colsLayoutStyle
     };
   }, [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable]);
+  var detailsIndent = React.useMemo(function () {
+    var padding = 0;
+
+    for (var i = 0; i < visibleColumns.length; i += 1) {
+      if (INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {
+        padding += visibleColumns[i].width;
+      } else {
+        padding += row.depth * 32 + 15;
+        break;
+      }
+    }
+
+    return padding;
+  }, [row.depth, visibleColumns]);
   var PureRowContent = React.useMemo(function () {
     var DetailsView = row.original.tableRowDetails;
     return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(StyledCellContainer, _extends__default['default']({
@@ -1116,7 +1135,7 @@ var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
       "aria-label": ariaLabelMessage(row, (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true),
       "aria-level": row.depth + 1,
       "aria-selected": (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true,
-      "aria-expanded": isExpandable ? expandedRows[row.uid] : undefined,
+      "aria-expanded": isExpandable ? expandedRows[row.uid] === true : undefined,
       "aria-disabled": disabledRows[row.uid]
     }, gridTemplateColProps, {
       backgroundColor: backgroundColor,
@@ -1135,9 +1154,10 @@ var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
       isDragOverlay: isDragOverlay,
       key: row.uid
     })), isExpandable && row.isExpanded && DetailsView && /*#__PURE__*/React__default['default'].createElement(DetailsWrapper, null, /*#__PURE__*/React__default['default'].createElement(DetailsView, {
-      row: row
+      row: row,
+      detailsIndent: detailsIndent
     })));
-  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId]);
+  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId, detailsIndent]);
   return PureRowContent;
 };
 
@@ -1883,93 +1903,75 @@ var withConditionalDnDColumnContext = function withConditionalDnDColumnContext(C
   };
 };
 
-var START_DATE = 'startDate';
-var END_DATE = 'endDate';
-var Wrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
-  componentId: "sc-1sdd48h-0"
-})(["background:", ";box-shadow:0 6px 20px 0 rgba(0,0,0,0.24);&&& .DayPicker{box-shadow:none !important;}"], function (props) {
-  return props.theme.colors.neutral['000'];
-});
+var emptyFilterValue = {
+  startDate: null,
+  endDate: null
+};
 var DateRangeFilter = function DateRangeFilter(props) {
   var column = props.column,
       id = props.column.id,
       _props$filterValue = props.filterValue,
-      filterValue = _props$filterValue === void 0 ? {
-    startDate: null,
-    endDate: null
-  } : _props$filterValue,
+      filterValue = _props$filterValue === void 0 ? emptyFilterValue : _props$filterValue,
       onValueChange = props.onValueChange,
       patchHeaderFilterButtonAndMenu = props.patchHeaderFilterButtonAndMenu,
       reduxHeader = props.reduxHeader,
       innerRef = props.innerRef;
-
-  var _useState = React.useState(START_DATE),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      focusedInputPicker = _useState2[0],
-      setFocusedInputPicker = _useState2[1];
-
   var dateRange = filterValue;
-  var startDate = dateRange.startDate,
-      endDate = dateRange.endDate;
-  var start = startDate ? moment__default['default'](startDate, configs_constants.momentFormat) : null;
-  var end = endDate ? moment__default['default'](endDate, configs_constants.momentFormat) : null;
-
-  var handlePickerFocusChange = function handlePickerFocusChange() {
-    setFocusedInputPicker(focusedInputPicker === START_DATE ? END_DATE : START_DATE);
-  };
 
-  var handleDateChange = function handleDateChange(_ref) {
-    var startD = _ref.startDate,
-        endD = _ref.endDate;
-    var sd = startD ? startD === null || startD === void 0 ? void 0 : startD.format(configs_constants.momentFormat) : null;
-    var ed = endD ? endD === null || endD === void 0 ? void 0 : endD.format(configs_constants.momentFormat) : null;
-    onValueChange(exportedRelated_FilterTypes.FILTER_TYPES.DATE_RANGE, {
-      startDate: sd,
-      endDate: ed
-    });
-  };
+  var _useState = React.useState(dateRange.startDate || ''),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      startDate = _useState2[0],
+      setStartDate = _useState2[1];
 
-  var handleStartInputChange = function handleStartInputChange(newDate) {
-    handleDateChange({
-      startDate: newDate,
-      endDate: end
-    });
-  };
+  var _useState3 = React.useState(dateRange.endDate || ''),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      endDate = _useState4[0],
+      setEndDate = _useState4[1];
 
-  var handleEndInputChange = function handleEndInputChange(newDate) {
-    handleDateChange({
-      endDate: newDate,
-      startDate: start
-    });
-  };
+  React.useEffect(function () {
+    setStartDate(dateRange.startDate || '');
+    setEndDate(dateRange.endDate || '');
+  }, [dateRange]);
+  React.useEffect(function () {
+    if (!startDate.includes('_') && !endDate.includes('_')) {
+      onValueChange(exportedRelated_FilterTypes.FILTER_TYPES.DATE_RANGE, {
+        startDate: startDate,
+        endDate: endDate
+      });
+    } // We are missing onValueChange on purpose, this is an internal function and won't cause any problems
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
+  }, [startDate, endDate]);
   return /*#__PURE__*/React__default['default'].createElement(FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: id,
-    menuContent: /*#__PURE__*/React__default['default'].createElement(Wrapper, null, /*#__PURE__*/React__default['default'].createElement("div", {
-      style: {
-        display: 'flex'
+    menuContent: /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
+      width: "260px",
+      "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
+    }, /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
+      p: "xxs"
+    }, /*#__PURE__*/React__default['default'].createElement(dsControlledForm.DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-inputs",
+      autoFocus: true
+    })), /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
+      onKeyDown: function onKeyDown(e) {
+        return e.code === 'Enter' && setTimeout(function () {
+          return patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate));
+        }, 0);
       }
-    }, /*#__PURE__*/React__default['default'].createElement(dsDatePicker.DatePickerRangeHeader, {
-      handleDatesChange: handleDateChange,
-      onEndInputChange: handleEndInputChange,
-      onStartInputChange: handleStartInputChange,
-      selectedEndDate: end,
-      selectedStartDate: start
-    })), /*#__PURE__*/React__default['default'].createElement(dsDateRangePicker.DayPickerRangeController, {
-      "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER,
-      focusedInput: focusedInputPicker,
-      onFocusChange: handlePickerFocusChange,
-      startDate: start,
-      endDate: end,
-      onDatesChange: handleDateChange
-    })),
+    }, /*#__PURE__*/React__default['default'].createElement(dsControlledForm.DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-picker-controller-only"
+    }))),
     triggerIcon: /*#__PURE__*/React__default['default'].createElement(DatePickerIcon__default['default'], null),
-    removeWrapperStyles: true,
-    onClickOutsideMenu: function onClickOutsideMenu() {
-      return patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate && dateRange.endDate));
-    },
     innerRef: innerRef,
     ariaLabel: "Open Date Range Filter"
   });
@@ -1979,6 +1981,8 @@ function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$4(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var NumberRangeFilter = function NumberRangeFilter(props) {
+  var _filterValue$from, _filterValue$to;
+
   var column = props.column,
       _props$filterValue = props.filterValue,
       filterValue = _props$filterValue === void 0 ? {
@@ -1992,7 +1996,7 @@ var NumberRangeFilter = function NumberRangeFilter(props) {
   var handleFromChange = function handleFromChange(e) {
     var _e$target;
 
-    var from = e !== null && e !== void 0 && (_e$target = e.target) !== null && _e$target !== void 0 && _e$target.value ? parseInt(e.target.value, 10) : '';
+    var from = (e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.value) !== '' ? parseInt(e.target.value, 10) : '';
 
     var nextValue = _objectSpread$4(_objectSpread$4({}, filterValue), {}, {
       from: from
@@ -2004,7 +2008,7 @@ var NumberRangeFilter = function NumberRangeFilter(props) {
   var handleToChange = function handleToChange(e) {
     var _e$target2;
 
-    var to = e !== null && e !== void 0 && (_e$target2 = e.target) !== null && _e$target2 !== void 0 && _e$target2.value ? parseInt(e.target.value, 10) : '';
+    var to = (e === null || e === void 0 ? void 0 : (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.value) !== '' ? parseInt(e.target.value, 10) : '';
 
     var nextValue = _objectSpread$4(_objectSpread$4({}, filterValue), {}, {
       to: to
@@ -2023,14 +2027,14 @@ var NumberRangeFilter = function NumberRangeFilter(props) {
       padding: "xs",
       cols: ['50px', 'auto', '50px']
     }, /*#__PURE__*/React__default['default'].createElement(DSTextBox__default['default'], {
-      value: "".concat((filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) || ''),
+      value: "".concat((_filterValue$from = filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) !== null && _filterValue$from !== void 0 ? _filterValue$from : ''),
       onChange: handleFromChange,
       type: "number"
     }), /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
       justifyItems: "center",
       alignItems: "center"
     }, "\u2014"), /*#__PURE__*/React__default['default'].createElement(DSTextBox__default['default'], {
-      value: "".concat((filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) || ''),
+      value: "".concat((_filterValue$to = filterValue === null || filterValue === void 0 ? void 0 : filterValue.to) !== null && _filterValue$to !== void 0 ? _filterValue$to : ''),
       onChange: handleToChange,
       type: "number"
     })),
@@ -2098,7 +2102,8 @@ var useSelectFilterHandlers = function useSelectFilterHandlers(_ref) {
 
       if (e.code === 'ArrowDown') focusNextMenuItem(e, virtualIndex);
 
-      if (['Enter', 'Space'].includes(e.code)) {
+      if (e.code === 'Space') {
+        e.preventDefault();
         handleSelectItem(option);
 
         if (isSingle) {
@@ -2111,18 +2116,22 @@ var useSelectFilterHandlers = function useSelectFilterHandlers(_ref) {
           });
         }
       }
+
+      if (e.code === 'Enter') {
+        patchHeader(id, {
+          hideFilterMenu: true,
+          hideFilterButton: false
+        });
+        setTimeout(function () {
+          return innerRef.current.focus();
+        });
+      }
     };
   }, [handleSelectItem, id, isSingle, patchHeader]);
-  var onClickOutsideMenu = React.useCallback(function () {
-    if (isMulti) {
-      patchHeaderFilterButtonAndMenu(id, true);
-    }
-  }, [id, isMulti, patchHeaderFilterButtonAndMenu]);
   return {
     onInputWrapperKeyDown: onInputWrapperKeyDown,
     onMenuItemClick: onMenuItemClick,
-    onMenuItemKeyDown: onMenuItemKeyDown,
-    onClickOutsideMenu: onClickOutsideMenu
+    onMenuItemKeyDown: onMenuItemKeyDown
   };
 };
 
@@ -2184,8 +2193,7 @@ var BaseSelectFilter = function BaseSelectFilter(props) {
   var _useSelectFilterHandl = useSelectFilterHandlers(props),
       onInputWrapperKeyDown = _useSelectFilterHandl.onInputWrapperKeyDown,
       onMenuItemClick = _useSelectFilterHandl.onMenuItemClick,
-      onMenuItemKeyDown = _useSelectFilterHandl.onMenuItemKeyDown,
-      onClickOutsideMenu = _useSelectFilterHandl.onClickOutsideMenu;
+      onMenuItemKeyDown = _useSelectFilterHandl.onMenuItemKeyDown;
 
   var Select = /*#__PURE__*/React__default['default'].createElement(addons_Filters_Components_SelectFilter_components.Wrapper, {
     "data-testid": rest['data-testid']
@@ -2231,7 +2239,6 @@ var BaseSelectFilter = function BaseSelectFilter(props) {
     columnId: column.id,
     menuContent: Select,
     triggerIcon: /*#__PURE__*/React__default['default'].createElement(SearchIcon__default['default'], null),
-    onClickOutsideMenu: onClickOutsideMenu,
     innerRef: innerRef,
     ariaLabel: "Open Selection Filter"
   });
@@ -2285,7 +2292,6 @@ var MultiSelectFilter = function MultiSelectFilter(_ref) {
   });
 };
 
-/* eslint-disable react/prop-types */
 var SingleDateFilter = function SingleDateFilter(props) {
   var column = props.column,
       id = props.column.id,
@@ -2294,10 +2300,19 @@ var SingleDateFilter = function SingleDateFilter(props) {
       onValueChange = props.onValueChange,
       patchHeaderFilterButtonAndMenu = props.patchHeaderFilterButtonAndMenu,
       innerRef = props.innerRef;
-  var date = filterValue;
-  var handleOnChange = React.useCallback(function (_date) {
-    onValueChange(exportedRelated_FilterTypes.FILTER_TYPES.SINGLE_DATE, _date === null || _date === void 0 ? void 0 : _date.format(configs_constants.momentFormat));
-  }, [onValueChange]);
+
+  var _useState = React.useState(filterValue || ''),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  React.useEffect(function () {
+    setDate(filterValue || '');
+  }, [filterValue]);
+  React.useEffect(function () {
+    if (!date.includes('_')) onValueChange(exportedRelated_FilterTypes.FILTER_TYPES.SINGLE_DATE, date || undefined); // We are missing onValueChange on purpose, this is an internal function and won't cause any problems
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [date]);
   var commitDateChange = React.useCallback(function () {
     patchHeaderFilterButtonAndMenu(id, true);
   }, [id, patchHeaderFilterButtonAndMenu]);
@@ -2305,15 +2320,28 @@ var SingleDateFilter = function SingleDateFilter(props) {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
-    menuContent: /*#__PURE__*/React__default['default'].createElement(dsDatePicker.DatePickerSingleDate, {
+    menuContent: /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
       "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER,
-      date: date ? moment__default['default'](date, configs_constants.momentFormat) : null,
-      onChange: handleOnChange
-    }),
+      width: "260px"
+    }, /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
+      p: "xxs"
+    }, /*#__PURE__*/React__default['default'].createElement(dsControlledForm.DSControlledDateTimePicker, {
+      date: date,
+      onDateChange: setDate,
+      type: "date-inputs",
+      isClearable: true,
+      autoFocus: true
+    })), /*#__PURE__*/React__default['default'].createElement(Grid__default['default'], {
+      onKeyDown: function onKeyDown(e) {
+        return e.code === 'Enter' && setTimeout(commitDateChange, 0);
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(dsControlledForm.DSControlledDateTimePicker, {
+      date: date,
+      onDateChange: setDate,
+      type: "date-picker-controller-only"
+    }))),
     triggerIcon: /*#__PURE__*/React__default['default'].createElement(DatePickerIcon__default['default'], null),
-    removeWrapperStyles: true,
     innerRef: innerRef,
-    onClickOutsideMenu: commitDateChange,
     ariaLabel: "Open Single Date Filter"
   });
 };
@@ -2379,18 +2407,23 @@ var FilterMapItem = function FilterMapItem(props) {
       return filter.id === column.id;
     });
 
-    if (filterIndex === -1) {
+    if (newValue === undefined) {
+      var newFilters = filters.filter(function (filter) {
+        return filter.id !== column.id;
+      });
+      onFiltersChange(newFilters);
+    } else if (filterIndex === -1) {
       onFiltersChange([].concat(_toConsumableArray__default['default'](filters), [{
         id: column.id,
         type: type,
         value: newValue
       }]));
     } else {
-      var newFilters = _toConsumableArray__default['default'](filters);
+      var _newFilters = _toConsumableArray__default['default'](filters);
 
-      newFilters[filterIndex].type = type;
-      newFilters[filterIndex].value = newValue;
-      onFiltersChange(newFilters);
+      _newFilters[filterIndex].type = type;
+      _newFilters[filterIndex].value = newValue;
+      onFiltersChange(_newFilters);
     }
   }, [column.id, filters, onFiltersChange]);
 
@@ -2688,7 +2721,7 @@ var withDnDSortableColumnContext = function withDnDSortableColumnContext(Compone
       var index = useSortableHelpers.index,
           overIndex = useSortableHelpers.overIndex;
       return _objectSpread$1(_objectSpread$1({}, useSortableHelpers), {}, {
-        shouldShowDropIndicatorPosition: overIndex === index,
+        shouldShowDropIndicatorPosition: overIndex === index && overIndex !== -1,
         dropIndicatorPosition: index > activeIndex ? parts_HoC_SortableItemContext.DropIndicatorPosition.After : parts_HoC_SortableItemContext.DropIndicatorPosition.Before
       });
     }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
@@ -2903,12 +2936,28 @@ var TableContentComponent = function TableContentComponent(props) {
       allDataFlattened = _useContext.allDataFlattened,
       visibleColumns = _useContext.visibleColumns;
 
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray__default['default'](_useState, 2),
+      shiftKeyPressed = _useState2[0],
+      setShiftKeyPressed = _useState2[1];
+
   var PureTableContent = React.useMemo(function () {
     return /*#__PURE__*/React__default['default'].createElement(StyledDataTableWrapper, {
       "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
       height: height,
       width: width,
-      ref: forwardedRef
+      ref: forwardedRef,
+      noSelectionAllowed: shiftKeyPressed,
+      onKeyDown: function onKeyDown(e) {
+        return setShiftKeyPressed(function (prevShiftKeyPressed) {
+          return prevShiftKeyPressed || e.shiftKey;
+        });
+      },
+      onKeyUp: function onKeyUp(e) {
+        return setShiftKeyPressed(function (prevShiftKeyPressed) {
+          return prevShiftKeyPressed && e.code !== 'Shift';
+        });
+      }
     }, /*#__PURE__*/React__default['default'].createElement(StyledTableWrapper, {
       role: "table",
       "aria-rowcount": allDataFlattened.length,
@@ -2917,7 +2966,7 @@ var TableContentComponent = function TableContentComponent(props) {
       height: height,
       width: width
     }, /*#__PURE__*/React__default['default'].createElement(VirtualRowsList, null)), pagination ? /*#__PURE__*/React__default['default'].createElement(Pagination, null) : null);
-  }, [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination]);
+  }, [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed]);
   return PureTableContent;
 };
 
@@ -3022,12 +3071,17 @@ var StyledFocusWithin = /*#__PURE__*/styled__default['default'](Grid__default['d
 });
 var StyledDataTableWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
   componentId: "sc-38sgfo-1"
-})(["", ""], function (_ref2) {
-  var _ref2$width = _ref2.width,
-      width = _ref2$width === void 0 ? ' 100%' : _ref2$width,
-      _ref2$height = _ref2.height,
-      height = _ref2$height === void 0 ? ' 100%' : _ref2$height;
-  return "\n  width: ".concat(helpers_sizeToCss.sizeToCss(width), ";\n  height: ").concat(helpers_sizeToCss.sizeToCss(height), ";\n");
+})(["width:", ";height:", ";user-select:", ";"], function (props) {
+  var _props$width;
+
+  return helpers_sizeToCss.sizeToCss((_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : ' 100%');
+}, function (props) {
+  var _props$height;
+
+  return helpers_sizeToCss.sizeToCss((_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : ' 100%');
+}, function (_ref2) {
+  var noSelectionAllowed = _ref2.noSelectionAllowed;
+  return noSelectionAllowed ? 'none' : 'auto';
 });
 var StyledTableWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
   componentId: "sc-38sgfo-2"
@@ -3282,4 +3336,4 @@ exports.useHierarchyPreviewHandlers = useHierarchyPreviewHandlers;
 exports.useSelectFilterHandlers = useSelectFilterHandlers;
 exports.withConditionalDnDColumnContext = withConditionalDnDColumnContext;
 exports.withDnDSortableColumnContext = withDnDSortableColumnContext;
-//# sourceMappingURL=styled-70bdf2af.js.map
+//# sourceMappingURL=styled-256fc644.js.map