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

package/esm/{styled-44bf75ae.js → styled-e953974e.js}

@@ -4,7 +4,7 @@ import EditPencil from '@elliemae/ds-icons/EditPencil';
 import { sizeToCss } from './helpers/sizeToCss.js';
 import { DATA_TESTID, momentFormat, ColsLayoutStyle } from './configs/constants.js';
 import { columnPadding, cellPadding } from './helpers/cellPadding.js';
-import React, { useMemo, useCallback, useContext, useEffect, useState, useRef, memo, useLayoutEffect, createContext, cloneElement } from 'react';
+import React, { useMemo, useCallback, useContext, useEffect, useState, useRef, useLayoutEffect, memo, createContext, cloneElement } from 'react';
 import { FIXED_SIZES } from './configs/fixedSizes.js';
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
 import { useVirtual } from 'react-virtual';
@@ -61,12 +61,11 @@ import { useHierarchyActionHandlers } from './helpers/dndkit/hierarchy/useHierar
 import { useHierarchyAnnouncements } from './helpers/dndkit/hierarchy/useHierarchyAnnouncements.js';
 import { SortByCaret } from './parts/SortByCaret.js';
 import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
-import { DatePickerRangeHeader, DatePickerSingleDate } from '@elliemae/ds-date-picker';
-import { DayPickerRangeController } from '@elliemae/ds-date-range-picker';
+import { DSControlledDateRangePicker, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
 import DSTextBox from '@elliemae/ds-form/TextBox';
 import SearchIcon from '@elliemae/ds-icons/SearchXsmall';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
-import { Wrapper as Wrapper$1, InputWrapper, Input, VirtualListWrapper, MenuList, MenuItem } from './addons/Filters/Components/SelectFilter/components.js';
+import { Wrapper, InputWrapper, Input, VirtualListWrapper, MenuList, MenuItem } from './addons/Filters/Components/SelectFilter/components.js';
 import { columnsToGrid } from './helpers/columnsToGrid.js';
 import { useHeaderCellHandlers } from './parts/Headers/useHeaderCellHandlers.js';
 import { useHeaderCellConfig } from './parts/Headers/useHeaderCellConfig.js';
@@ -126,7 +125,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": DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
@@ -182,6 +184,7 @@ var expandRowColumn = {
         onClick: onRowExpandHandler,
         onKeyDown: function onKeyDown(e) {
           if (['Enter', 'Space'].includes(e.code)) {
+            e.preventDefault();
             onRowExpandHandler(e);
           }
         },
@@ -273,8 +276,8 @@ var multiSelectColumn = {
 
       return {};
     }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    var onChangeHandler = useCallback(function () {
-      onSelectionChange(newSelection);
+    var onChangeHandler = useCallback(function (e) {
+      onSelectionChange(newSelection, 'All', e);
     }, [newSelection, onSelectionChange]);
     var PureHeaderCheckbox = useMemo(function () {
       return /*#__PURE__*/React.createElement(DSCheckbox, {
@@ -308,7 +311,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({}, uid, newState)); // we only want true and mixed values
@@ -316,7 +319,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,
@@ -512,8 +515,8 @@ var Button = /*#__PURE__*/styled(DSButton).withConfig({
   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,
@@ -539,7 +542,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) {
@@ -572,16 +575,15 @@ var FilterPopover = function FilterPopover(_ref2) {
   var updatedReferenceElement = 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 = 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',
@@ -683,11 +685,20 @@ var EditableCell = function EditableCell(props) {
   var _useState = useState(false),
       _useState2 = _slicedToArray(_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 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      lastIsEditing = _useState4[0],
+      setLastIsEditing = _useState4[1]; // When an editable cell is switched on-off, we recalculate the height of the rows
+
+
+  useLayoutEffect(function () {
+    if (isEditing !== lastIsEditing) {
+      virtualListHelpers.measure();
+      setLastIsEditing(isEditing);
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  useEffect(function () {
-    virtualListHelpers.measure(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isEditing]);
   var handleCellClick = useCallback(function (e) {
     if (!isEditing) {
@@ -918,8 +929,6 @@ var Cell = function Cell(_ref2) {
   }, [cellRendererProps, cell, row, isRowSelected, ctx, draggableProps, isDragOverlay, cellStyle, column]);
   var CellComponent = cell.render;
   var pureCellContent = useMemo(function () {
-    if (typeof cell.value === 'function') return cell.value(cell);
-
     if (shouldAddExpandCell) {
       return /*#__PURE__*/React.createElement(Grid, {
         cols: ['min-content', 'auto'],
@@ -929,7 +938,7 @@ var Cell = function Cell(_ref2) {
     }
 
     return /*#__PURE__*/React.createElement(CellComponent, cellProps);
-  }, [CellComponent, cell, cellProps, shouldAddExpandCell]);
+  }, [CellComponent, cellProps, shouldAddExpandCell]);
   var DefaultCellContentJSX = useMemo(function () {
     return /*#__PURE__*/React.createElement(StyledCellContent, null, appliedTextWrap === 'truncate' ? /*#__PURE__*/React.createElement(SimpleTruncatedTooltipText, {
       value: pureCellContent
@@ -950,12 +959,7 @@ var Cell = function Cell(_ref2) {
     }, cellProps));
     return null;
   }, [DefaultCellContentJSX, cellProps, column]);
-
-  if (!column.editable) {
-    return /*#__PURE__*/React.createElement(PureStandardCell, cellProps, DefaultCellContentJSX);
-  }
-
-  return /*#__PURE__*/React.createElement(PureStandardCell, cellProps, EditableContentJSX);
+  return /*#__PURE__*/React.createElement(PureStandardCell, cellProps, column.editable ? EditableContentJSX : DefaultCellContentJSX);
 };
 
 /* eslint-disable react/prop-types */
@@ -1056,6 +1060,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,
@@ -1079,6 +1084,20 @@ var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
       colLayoutStyle: colsLayoutStyle
     };
   }, [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable]);
+  var detailsIndent = 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 = useMemo(function () {
     var DetailsView = row.original.tableRowDetails;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledCellContainer, _extends({
@@ -1090,7 +1109,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,
@@ -1109,9 +1128,10 @@ var DefaultRowContentRenderer = function DefaultRowContentRenderer(props) {
       isDragOverlay: isDragOverlay,
       key: row.uid
     })), isExpandable && row.isExpanded && DetailsView && /*#__PURE__*/React.createElement(DetailsWrapper, null, /*#__PURE__*/React.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;
 };
 
@@ -1857,93 +1877,75 @@ var withConditionalDnDColumnContext = function withConditionalDnDColumnContext(C
   };
 };
 
-var START_DATE = 'startDate';
-var END_DATE = 'endDate';
-var Wrapper = /*#__PURE__*/styled.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 = useState(START_DATE),
-      _useState2 = _slicedToArray(_useState, 2),
-      focusedInputPicker = _useState2[0],
-      setFocusedInputPicker = _useState2[1];
-
   var dateRange = filterValue;
-  var startDate = dateRange.startDate,
-      endDate = dateRange.endDate;
-  var start = startDate ? moment(startDate, momentFormat) : null;
-  var end = endDate ? moment(endDate, 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(momentFormat) : null;
-    var ed = endD ? endD === null || endD === void 0 ? void 0 : endD.format(momentFormat) : null;
-    onValueChange(FILTER_TYPES.DATE_RANGE, {
-      startDate: sd,
-      endDate: ed
-    });
-  };
+  var _useState = useState(dateRange.startDate || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      startDate = _useState2[0],
+      setStartDate = _useState2[1];
 
-  var handleStartInputChange = function handleStartInputChange(newDate) {
-    handleDateChange({
-      startDate: newDate,
-      endDate: end
-    });
-  };
+  var _useState3 = useState(dateRange.endDate || ''),
+      _useState4 = _slicedToArray(_useState3, 2),
+      endDate = _useState4[0],
+      setEndDate = _useState4[1];
 
-  var handleEndInputChange = function handleEndInputChange(newDate) {
-    handleDateChange({
-      endDate: newDate,
-      startDate: start
-    });
-  };
+  useEffect(function () {
+    setStartDate(dateRange.startDate || '');
+    setEndDate(dateRange.endDate || '');
+  }, [dateRange]);
+  useEffect(function () {
+    if (!startDate.includes('_') && !endDate.includes('_')) {
+      onValueChange(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.createElement(FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: id,
-    menuContent: /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
+    menuContent: /*#__PURE__*/React.createElement(Grid, {
+      width: "260px",
+      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
+    }, /*#__PURE__*/React.createElement(Grid, {
+      p: "xxs"
+    }, /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-inputs",
+      autoFocus: true
+    })), /*#__PURE__*/React.createElement(Grid, {
+      onKeyDown: function onKeyDown(e) {
+        return e.code === 'Enter' && setTimeout(function () {
+          return patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate));
+        }, 0);
       }
-    }, /*#__PURE__*/React.createElement(DatePickerRangeHeader, {
-      handleDatesChange: handleDateChange,
-      onEndInputChange: handleEndInputChange,
-      onStartInputChange: handleStartInputChange,
-      selectedEndDate: end,
-      selectedStartDate: start
-    })), /*#__PURE__*/React.createElement(DayPickerRangeController, {
-      "data-testid": DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER,
-      focusedInput: focusedInputPicker,
-      onFocusChange: handlePickerFocusChange,
-      startDate: start,
-      endDate: end,
-      onDatesChange: handleDateChange
-    })),
+    }, /*#__PURE__*/React.createElement(DSControlledDateRangePicker, {
+      fromDate: startDate,
+      onFromDateChange: setStartDate,
+      toDate: endDate,
+      onToDateChange: setEndDate,
+      type: "date-range-picker-controller-only"
+    }))),
     triggerIcon: /*#__PURE__*/React.createElement(DatePickerIcon, null),
-    removeWrapperStyles: true,
-    onClickOutsideMenu: function onClickOutsideMenu() {
-      return patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate && dateRange.endDate));
-    },
     innerRef: innerRef,
     ariaLabel: "Open Date Range Filter"
   });
@@ -1953,6 +1955,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(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 ? {
@@ -1966,7 +1970,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
@@ -1978,7 +1982,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
@@ -1997,14 +2001,14 @@ var NumberRangeFilter = function NumberRangeFilter(props) {
       padding: "xs",
       cols: ['50px', 'auto', '50px']
     }, /*#__PURE__*/React.createElement(DSTextBox, {
-      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.createElement(Grid, {
       justifyItems: "center",
       alignItems: "center"
     }, "\u2014"), /*#__PURE__*/React.createElement(DSTextBox, {
-      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"
     })),
@@ -2072,7 +2076,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) {
@@ -2085,18 +2090,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 = useCallback(function () {
-    if (isMulti) {
-      patchHeaderFilterButtonAndMenu(id, true);
-    }
-  }, [id, isMulti, patchHeaderFilterButtonAndMenu]);
   return {
     onInputWrapperKeyDown: onInputWrapperKeyDown,
     onMenuItemClick: onMenuItemClick,
-    onMenuItemKeyDown: onMenuItemKeyDown,
-    onClickOutsideMenu: onClickOutsideMenu
+    onMenuItemKeyDown: onMenuItemKeyDown
   };
 };
 
@@ -2158,10 +2167,9 @@ 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.createElement(Wrapper$1, {
+  var Select = /*#__PURE__*/React.createElement(Wrapper, {
     "data-testid": rest['data-testid']
   }, /*#__PURE__*/React.createElement(InputWrapper, null, /*#__PURE__*/React.createElement(Input, {
     value: inputValue,
@@ -2205,7 +2213,6 @@ var BaseSelectFilter = function BaseSelectFilter(props) {
     columnId: column.id,
     menuContent: Select,
     triggerIcon: /*#__PURE__*/React.createElement(SearchIcon, null),
-    onClickOutsideMenu: onClickOutsideMenu,
     innerRef: innerRef,
     ariaLabel: "Open Selection Filter"
   });
@@ -2259,7 +2266,6 @@ var MultiSelectFilter = function MultiSelectFilter(_ref) {
   });
 };
 
-/* eslint-disable react/prop-types */
 var SingleDateFilter = function SingleDateFilter(props) {
   var column = props.column,
       id = props.column.id,
@@ -2268,10 +2274,19 @@ var SingleDateFilter = function SingleDateFilter(props) {
       onValueChange = props.onValueChange,
       patchHeaderFilterButtonAndMenu = props.patchHeaderFilterButtonAndMenu,
       innerRef = props.innerRef;
-  var date = filterValue;
-  var handleOnChange = useCallback(function (_date) {
-    onValueChange(FILTER_TYPES.SINGLE_DATE, _date === null || _date === void 0 ? void 0 : _date.format(momentFormat));
-  }, [onValueChange]);
+
+  var _useState = useState(filterValue || ''),
+      _useState2 = _slicedToArray(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  useEffect(function () {
+    setDate(filterValue || '');
+  }, [filterValue]);
+  useEffect(function () {
+    if (!date.includes('_')) onValueChange(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 = useCallback(function () {
     patchHeaderFilterButtonAndMenu(id, true);
   }, [id, patchHeaderFilterButtonAndMenu]);
@@ -2279,15 +2294,28 @@ var SingleDateFilter = function SingleDateFilter(props) {
     reduxHeader: reduxHeader,
     column: column,
     columnId: column.id,
-    menuContent: /*#__PURE__*/React.createElement(DatePickerSingleDate, {
+    menuContent: /*#__PURE__*/React.createElement(Grid, {
       "data-testid": DATA_TESTID.DATA_TABLE_SINGLE_DATE_CONTROLLER,
-      date: date ? moment(date, momentFormat) : null,
-      onChange: handleOnChange
-    }),
+      width: "260px"
+    }, /*#__PURE__*/React.createElement(Grid, {
+      p: "xxs"
+    }, /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
+      date: date,
+      onDateChange: setDate,
+      type: "date-inputs",
+      isClearable: true,
+      autoFocus: true
+    })), /*#__PURE__*/React.createElement(Grid, {
+      onKeyDown: function onKeyDown(e) {
+        return e.code === 'Enter' && setTimeout(commitDateChange, 0);
+      }
+    }, /*#__PURE__*/React.createElement(DSControlledDateTimePicker, {
+      date: date,
+      onDateChange: setDate,
+      type: "date-picker-controller-only"
+    }))),
     triggerIcon: /*#__PURE__*/React.createElement(DatePickerIcon, null),
-    removeWrapperStyles: true,
     innerRef: innerRef,
-    onClickOutsideMenu: commitDateChange,
     ariaLabel: "Open Single Date Filter"
   });
 };
@@ -2353,18 +2381,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(filters), [{
         id: column.id,
         type: type,
         value: newValue
       }]));
     } else {
-      var newFilters = _toConsumableArray(filters);
+      var _newFilters = _toConsumableArray(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]);
 
@@ -2662,7 +2695,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 ? DropIndicatorPosition.After : DropIndicatorPosition.Before
       });
     }, [useSortableHelpers, dragAndDropColumns, activeIndex]);
@@ -2877,12 +2910,28 @@ var TableContentComponent = function TableContentComponent(props) {
       allDataFlattened = _useContext.allDataFlattened,
       visibleColumns = _useContext.visibleColumns;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      shiftKeyPressed = _useState2[0],
+      setShiftKeyPressed = _useState2[1];
+
   var PureTableContent = useMemo(function () {
     return /*#__PURE__*/React.createElement(StyledDataTableWrapper, {
       "data-testid": 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.createElement(StyledTableWrapper, {
       role: "table",
       "aria-rowcount": allDataFlattened.length,
@@ -2891,7 +2940,7 @@ var TableContentComponent = function TableContentComponent(props) {
       height: height,
       width: width
     }, /*#__PURE__*/React.createElement(VirtualRowsList, null)), pagination ? /*#__PURE__*/React.createElement(Pagination, null) : null);
-  }, [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination]);
+  }, [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed]);
   return PureTableContent;
 };
 
@@ -2996,12 +3045,17 @@ var StyledFocusWithin = /*#__PURE__*/styled(Grid).withConfig({
 });
 var StyledDataTableWrapper = /*#__PURE__*/styled.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(sizeToCss(width), ";\n  height: ").concat(sizeToCss(height), ";\n");
+})(["width:", ";height:", ";user-select:", ";"], function (props) {
+  var _props$width;
+
+  return sizeToCss((_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : ' 100%');
+}, function (props) {
+  var _props$height;
+
+  return 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.div.withConfig({
   componentId: "sc-38sgfo-2"
@@ -3185,4 +3239,4 @@ var PaginationWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;margin:5px 0;justify-content:flex-end;"]);
 
 export { StyledTableWrapper as $, useHierarchyDndkitConfig as A, DnDGroupContext as B, ComboboxEditableCell as C, DragHandle as D, EditableCell as E, FilterPopover as F, withConditionalDnDColumnContext as G, focusNextMenuItem as H, focusPrevMenuItem as I, useSelectFilterHandlers as J, BaseSelectFilter as K, FilterMapItem as L, MultiSelectFilter as M, NumberRangeFilter as N, HeaderResizer as O, Pagination as P, HeaderCell as Q, Row$1 as R, SingleSelectFilter as S, TableContent as T, withDnDSortableColumnContext as U, HeaderCellGroup as V, Headers as W, VirtualRowsList as X, INTERNAL_COLUMNS as Y, StyledFocusWithin as Z, StyledDataTableWrapper as _, applyOutOfTheBoxFilters as a, StyledTableContentWrapper as a0, StyledVirtualListWrapper as a1, StyledHeadWrapper as a2, StyledHeadTr as a3, StyledHeadTh as a4, StyledHeaderRightIconsWrapper as a5, StyledResizer as a6, StyledActionCell as a7, StyledCell as a8, StyledCellContent as a9, StyledPencilIcon as aa, StyledEditableContainer as ab, StyledFullsizeGrid as ac, GroupHeaderContainer as ad, GroupHeaderTitle as ae, StyledCellContainer as af, PaginationContainer as ag, PaginationWrapper as ah, singleSelectColumn as b, dragHandleColumn as c, dateRangeFilterFn as d, expandRowColumn as e, DateRangeFilter as f, SingleDateFilter as g, TextInputFilter as h, PagesButtons as i, RowLoading as j, TextEditableCell as k, Cell as l, multiSelectColumn as m, Cells as n, outOfTheBoxEditables as o, DefaultRowContentRenderer as p, RowRenderer as q, RowVariantHeader as r, singleDateFilterFn as s, RowVariantPrimary as t, RowVariantSecondary as u, RowVariantMapItem as v, Rows$1 as w, useHierarchyPreviewHandlers as x, getHierarchyKeyboardCoordinates as y, customCollisionDetection as z };
-//# sourceMappingURL=styled-44bf75ae.js.map
+//# sourceMappingURL=styled-e953974e.js.map