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

package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -3,41 +3,48 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 var React = require('react');
-var ComboBoxFreeSolo = require('@elliemae/ds-form/ComboBoxFreeSolo');
-require('../../../exported-related/FilterPopover.js');
-var EditableCell = require('../../../exported-related/EditableCell.js');
-require('styled-components');
+var dsForm = require('@elliemae/ds-form');
+require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@elliemae/ds-button');
-require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-popperjs');
+require('styled-components');
+require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
 require('react-virtual');
 require('../../../configs/useRowFlattenization.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-icons/ArrowShortReturn');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../../../styled.js');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 var DataTableContext = require('../../../DataTableContext.js');
 require('../../../parts/Row.js');
 require('../../../parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../../../parts/HoC/SortableItemContext.js');
+var EditableCell = require('../../../exported-related/EditableCell.js');
+require('@elliemae/ds-utilities');
 require('uid');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ComboBoxFreeSolo__default = /*#__PURE__*/_interopDefaultLegacy(ComboBoxFreeSolo);
 
 const ComboboxEditableCell = props => {
   const {
@@ -50,7 +57,7 @@ const ComboboxEditableCell = props => {
       onCellValueChange
     },
     flattenedData
-  } = React.useContext(DataTableContext['default']);
+  } = React.useContext(DataTableContext["default"]);
   const cellValue = React.useMemo(() => cell.value, [cell.value]);
   const columnId = React.useMemo(() => cell.column.id, [cell.column.id]);
   const [value, setValue] = React.useState({
@@ -81,9 +88,9 @@ const ComboboxEditableCell = props => {
       rowIndex: cell.row.index
     });
   }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell.row.index]);
-  return /*#__PURE__*/_jsx__default['default'](EditableCell.EditableCell, {
+  return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
     StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/_jsx__default['default'](ComboBoxFreeSolo__default['default'], {
+    EditableRenderer: /*#__PURE__*/_jsx__default["default"](dsForm.ComboBoxFreeSolo, {
       value: value,
       autoFocus: true,
       onBlur: handleOnBlur,

package/cjs/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -3,35 +3,44 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-require('../../../exported-related/FilterPopover.js');
-var EditableCell = require('../../../exported-related/EditableCell.js');
-require('styled-components');
+require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@elliemae/ds-button');
-require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-popperjs');
+require('styled-components');
+require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
 require('../../../configs/useRowFlattenization.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-icons/ArrowShortReturn');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../../../styled.js');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('@elliemae/ds-form');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 var DataTableContext = require('../../../DataTableContext.js');
 require('../../../parts/Row.js');
 require('../../../parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../../../parts/HoC/SortableItemContext.js');
+var EditableCell = require('../../../exported-related/EditableCell.js');
+require('@elliemae/ds-utilities');
 require('uid');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -46,7 +55,7 @@ function DateEditableCell(props) {
     tableProps: {
       onCellValueChange
     }
-  } = React.useContext(DataTableContext['default']);
+  } = React.useContext(DataTableContext["default"]);
   const [value, setValue] = React.useState(cell.value);
   const handleOnChange = React.useCallback(e => {
     const {
@@ -65,9 +74,9 @@ function DateEditableCell(props) {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
-  return /*#__PURE__*/_jsx__default['default'](EditableCell.EditableCell, {
+  return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
     StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/_jsx__default['default']("input", {
+    EditableRenderer: /*#__PURE__*/_jsx__default["default"]("input", {
       value: value,
       onChange: handleOnChange,
       onBlur: handleOnBlur,

package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -3,42 +3,51 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var styled = require('styled-components');
-require('../../../exported-related/FilterPopover.js');
-var EditableCell = require('../../../exported-related/EditableCell.js');
+require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('@elliemae/ds-button');
-require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-popperjs');
+require('../../../redux/reducers/index.js');
 require('../../../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
 require('../../../configs/useRowFlattenization.js');
-require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-icons/ArrowShortReturn');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../../../styled.js');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('@elliemae/ds-form');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 var DataTableContext = require('../../../DataTableContext.js');
 require('../../../parts/Row.js');
 require('../../../parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../../../parts/HoC/SortableItemContext.js');
+var EditableCell = require('../../../exported-related/EditableCell.js');
+require('@elliemae/ds-utilities');
 require('uid');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledInput = /*#__PURE__*/styled__default['default'].input.withConfig({
+const StyledInput = /*#__PURE__*/styled__default["default"].input.withConfig({
   componentId: "sc-15pvvoa-0"
 })(["outline:none;:focus{border:2px solid ", ";}max-width:100%;"], props => props.theme.colors.brand[700]);
 const TextEditableCell = props => {
@@ -51,7 +60,7 @@ const TextEditableCell = props => {
     tableProps: {
       onCellValueChange
     }
-  } = React.useContext(DataTableContext['default']);
+  } = React.useContext(DataTableContext["default"]);
   const [value, setValue] = React.useState(cell.value);
   const handleOnChange = React.useCallback(e => {
     const {
@@ -70,15 +79,31 @@ const TextEditableCell = props => {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
-  return /*#__PURE__*/_jsx__default['default'](EditableCell.EditableCell, {
+  const handleOnKeyDown = React.useCallback(e => {
+    if (e.code === 'Enter') {
+      cell.ref.current.focus(); // will exec on blur callback from input and save new value
+    }
+
+    if (e.code === 'Escape') {
+      setValue(cell.value);
+      const auxRef = cell.ref.current; // this prevent the on blur
+
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
+  return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
     StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/_jsx__default['default'](StyledInput, {
+    EditableRenderer: /*#__PURE__*/_jsx__default["default"](StyledInput, {
       value: value,
+      onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       onBlur: handleOnBlur,
       autoFocus: true
     }),
     cell: cell,
+    setValue: setValue,
     isRowSelected: isRowSelected
   });
 };

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

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var Grid = require('@elliemae/ds-grid');
+var dsForm = require('@elliemae/ds-form');
+var dsFormLayoutBlocks = require('@elliemae/ds-form-layout-blocks');
+var dsIcons = require('@elliemae/ds-icons');
+var FilterPopover = require('../../../../exported-related/FilterPopover.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('../../../../styled.js');
+require('../../../../DataTableContext.js');
+require('react/jsx-runtime');
+require('styled-components');
+require('@elliemae/ds-button');
+require('@elliemae/ds-utilities');
+var constants = require('../../../../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('react-virtual');
+require('../../../../configs/useRowFlattenization.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('../../../../parts/TableContent.js');
+require('@elliemae/ds-circular-progress-indicator');
+require('@elliemae/ds-system');
+require('../../../../parts/Row.js');
+require('../../../../parts/Footer.js');
+require('../../../../parts/HoC/SortableItemContext.js');
+require('uid');
+var FilterTypes = require('../../../../exported-related/FilterTypes.js');
+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 }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+
+var _SearchXsmall;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(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(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+const opts = {
+  prefix: '',
+  suffix: '',
+  allowDecimal: true,
+  decimalLimit: 2,
+  includeThousandsSeparator: false,
+  requireDecimal: true,
+  allowNegative: true
+};
+const CurrencyRangeFilter = props => {
+  var _filterValue$from, _filterValue$to, _column$ref$current$o, _column$ref, _column$ref$current;
+
+  const {
+    column,
+    filterValue = {
+      from: null,
+      to: null
+    },
+    reduxHeader,
+    onValueChange,
+    innerRef
+  } = props;
+
+  const handleFromChange = e => {
+    const nextValue = _objectSpread(_objectSpread({}, filterValue), {}, {
+      from: e.target.value
+    });
+
+    onValueChange(FilterTypes.FILTER_TYPES.CURRENCY_RANGE, nextValue);
+  };
+
+  const handleToChange = e => {
+    const nextValue = _objectSpread(_objectSpread({}, filterValue), {}, {
+      to: e.target.value
+    });
+
+    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,
+    column: column,
+    columnId: column.id,
+    menuContent: /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+      "data-testid": constants.DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER,
+      gutter: "xxxs",
+      padding: "xxs",
+      cols: ['auto', 'auto'],
+      style: {
+        background: 'white'
+      }
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
+      label: "Min",
+      inputID: "".concat(idPreffix, "-min-").concat(column.id)
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputMask, {
+      containerProps: {
+        style: {
+          textAlign: 'right'
+        }
+      },
+      id: "".concat(idPreffix, "-min-").concat(column.id),
+      value: "".concat((_filterValue$from = filterValue === null || filterValue === void 0 ? void 0 : filterValue.from) !== null && _filterValue$from !== void 0 ? _filterValue$from : ''),
+      onChange: handleFromChange,
+      placeholder: "0.00",
+      mask: number => dsForm.MASK_TYPES.NUMBER(opts)(number),
+      autoFocus: true,
+      onKeyDown: e => {
+        closePopover(e);
+      }
+    })), /*#__PURE__*/_jsx__default["default"](dsFormLayoutBlocks.DSFormLayoutBlockItem, {
+      label: "Max",
+      inputID: "".concat(idPreffix, "-max-").concat(column.id)
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsForm.DSInputMask, {
+      containerProps: {
+        style: {
+          textAlign: 'right'
+        }
+      },
+      id: "".concat(idPreffix, "-max-").concat(column.id),
+      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),
+      onKeyDown: e => {
+        closePopover(e);
+      }
+    }))),
+    triggerIcon: _SearchXsmall || (_SearchXsmall = /*#__PURE__*/_jsx__default["default"](dsIcons.SearchXsmall, {})),
+    customStyles: {
+      width: (_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'
+    },
+    innerRef: innerRef,
+    ariaLabel: "Open Currency Range Filter"
+  });
+};
+
+exports.CurrencyRangeFilter = CurrencyRangeFilter;

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

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
+var dsIcons = require('@elliemae/ds-icons');
 var Grid = require('@elliemae/ds-grid');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
 var FilterPopover = require('../../../../exported-related/FilterPopover.js');
@@ -13,35 +14,40 @@ require('../../../../DataTableContext.js');
 require('react/jsx-runtime');
 require('styled-components');
 require('@elliemae/ds-button');
-require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities');
 var constants = require('../../../../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('../../../../configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-icons/ArrowShortReturn');
-require('@elliemae/ds-icons');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('@elliemae/ds-form');
 require('../../../../parts/TableContent.js');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 require('../../../../parts/Row.js');
 require('../../../../parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../../../../parts/HoC/SortableItemContext.js');
 require('uid');
 var FilterTypes = require('../../../../exported-related/FilterTypes.js');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DatePickerIcon__default = /*#__PURE__*/_interopDefaultLegacy(DatePickerIcon);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-var _DatePickerIcon;
+var _DatePicker;
 const emptyFilterValue = {
   startDate: null,
   endDate: null
@@ -66,7 +72,7 @@ const DateRangeFilter = props => {
     setEndDate(dateRange.endDate || '');
   }, [dateRange]);
   React.useEffect(() => {
-    if (!startDate.includes('_') && !endDate.includes('_')) {
+    if (startDate && endDate && !startDate.includes('_') && !endDate.includes('_')) {
       onValueChange(FilterTypes.FILTER_TYPES.DATE_RANGE, {
         startDate,
         endDate
@@ -75,31 +81,32 @@ const DateRangeFilter = props => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [startDate, endDate]);
-  return /*#__PURE__*/_jsx__default['default'](FilterPopover.FilterPopover, {
+  return /*#__PURE__*/_jsx__default["default"](FilterPopover.FilterPopover, {
     reduxHeader: reduxHeader,
     column: column,
     columnId: id,
-    menuContent: /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+    menuContent: /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
       width: "260px",
       "data-testid": constants.DATA_TESTID.DATA_TABLE_DATE_RANGE_CONTROLLER
-    }, void 0, /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
       p: "xxs"
-    }, void 0, /*#__PURE__*/_jsx__default['default'](dsControlledForm.DSControlledDateRangePicker, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
       fromDate: startDate,
       onFromDateChange: setStartDate,
       toDate: endDate,
       onToDateChange: setEndDate,
-      type: "date-range-inputs"
-    })), /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+      type: "date-range-inputs",
+      autoFocus: true
+    })), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
       onKeyDown: e => e.code === 'Enter' && setTimeout(() => patchHeaderFilterButtonAndMenu(id, !!(dateRange.startDate || dateRange.endDate)), 0)
-    }, void 0, /*#__PURE__*/_jsx__default['default'](dsControlledForm.DSControlledDateRangePicker, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
       fromDate: startDate,
       onFromDateChange: setStartDate,
       toDate: endDate,
       onToDateChange: setEndDate,
       type: "date-range-picker-controller-only"
     }))),
-    triggerIcon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx__default['default'](DatePickerIcon__default['default'], {})),
+    triggerIcon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
     innerRef: innerRef,
     ariaLabel: "Open Date Range Filter"
   });