@elliemae/ds-datagrids 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js

@@ -1,11 +1,12 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
-var DSPopper = require('@elliemae/ds-basic/Popper');
-var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSPopper = require('@elliemae/ds-popper');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
 var moment = require('moment');
 var dsClassnames = require('@elliemae/ds-classnames');
 var defaultDateFormat = require('./defaultDateFormat.js');
@@ -14,26 +15,26 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-var DatePickerIcon__default = /*#__PURE__*/_interopDefaultLegacy(DatePickerIcon);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
-var _DatePickerIcon;
+var _DatePicker;
 const blockname = 'date-range';
 const Wrapper = dsClassnames.aggregatedClasses('div')(blockname, 'wrapper');
 const Header = dsClassnames.aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
 
-const DateRangePickerContainer = ({
-  onChange = () => null,
-  showHeader
-}) => {
+const DateRangePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
   const [startDate, setStartDate] = React.useState('');
   const [endDate, setEndDate] = React.useState(''); // For some reason it worked like this
 
   const [lastChangeWasPicker, setLastChangeWasPicker] = React.useState(false);
   React.useEffect(() => {
-    const startMoment = moment__default['default'](startDate);
-    const endMoment = moment__default['default'](endDate);
+    const startMoment = moment__default["default"](startDate);
+    const endMoment = moment__default["default"](endDate);
 
     if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
       onChange({
@@ -43,19 +44,21 @@ const DateRangePickerContainer = ({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [startDate, endDate, lastChangeWasPicker]);
-  return /*#__PURE__*/_jsx__default['default'](Wrapper, {
+  return /*#__PURE__*/_jsx__default["default"](Wrapper, {
     "data-testid": "date-range__wrapper",
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
     style: {
-      width: '262px'
-    },
-    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
-  }, void 0, showHeader && /*#__PURE__*/_jsx__default['default'](Header, {
+      backgroundColor: 'white',
+      boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
+      width: '261px'
+    }
+  }, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](Header, {
     style: {
       padding: '8px',
       display: 'flex',
       justifyContent: 'center'
     }
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsControlledForm.DSControlledDateRangePicker, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
     fromDate: startDate,
     onFromDateChange: _start => {
       setStartDate(_start);
@@ -67,7 +70,7 @@ const DateRangePickerContainer = ({
       setLastChangeWasPicker(false);
     },
     type: "date-range-inputs"
-  })), /*#__PURE__*/_jsx__default['default'](dsControlledForm.DSControlledDateRangePicker, {
+  })), /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
     fromDate: startDate,
     onFromDateChange: _start => {
       setStartDate(_start);
@@ -82,35 +85,39 @@ const DateRangePickerContainer = ({
   }));
 };
 
-const formatRangeDate = ({
-  startDate,
-  endDate
-}, format = defaultDateFormat.DEFAULT_DATE_FORMAT) => {
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDateFormat.DEFAULT_DATE_FORMAT;
   const sameDay = startDate.isSame(endDate, 'day');
-  if (sameDay) return `${endDate.format(format)}`;
-  return `${startDate.format(format)} - ${endDate.format(format)}`;
+  if (sameDay) return "".concat(endDate.format(format));
+  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
 };
 
-function DateRangeFilterMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = () => null,
-  placement = DSPopper.PopperPositions.BOTTOM_END,
-  onAddFilter = () => null,
-  dateFormatter = formatRangeDate,
-  showHeader = true,
-  menuProps
-}) {
-  return /*#__PURE__*/_jsx__default['default'](DSPopper__default['default'], {
-    contentComponent: /*#__PURE__*/_jsx__default['default']("div", {
+function DateRangeFilterMenu(_ref3) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = DSPopper.PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatRangeDate,
+    showHeader = true,
+    menuProps
+  } = _ref3;
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
       className: className
-    }, void 0, /*#__PURE__*/_jsx__default['default'](DateRangePickerContainer, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DateRangePickerContainer, {
       minimumNights: 0,
-      onChange: ({
-        startDate,
-        endDate
-      }) => {
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
         startDate.startOf('day');
         endDate.endOf('day');
         onAddFilter({
@@ -126,7 +133,7 @@ function DateRangeFilterMenu({
             start: startDate,
             end: endDate
           },
-          transformRowValue: value => moment__default['default'](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT),
+          transformRowValue: value => moment__default["default"](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT),
           operator: 'range'
         }, column);
         onOpenMenu(false);
@@ -137,9 +144,9 @@ function DateRangeFilterMenu({
     onOpen: onOpenMenu,
     placement: placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx__default['default'](DatePickerIcon__default['default'], {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),

package/cjs/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.js

@@ -1,12 +1,13 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
 var Grid = require('@elliemae/ds-grid');
 var dsControlledForm = require('@elliemae/ds-controlled-form');
-var DSPopper = require('@elliemae/ds-basic/Popper');
-var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
-var DSButton = require('@elliemae/ds-basic/Button');
+var DSPopper = require('@elliemae/ds-popper');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
 var moment = require('moment');
 var defaultDateFormat = require('./defaultDateFormat.js');
 
@@ -15,57 +16,61 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-var DatePickerIcon__default = /*#__PURE__*/_interopDefaultLegacy(DatePickerIcon);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 
-var _DatePickerIcon;
+var _DatePicker;
 
-const SingleDatePickerContainer = ({
-  onChange = () => null,
-  showHeader
-}) => {
-  const [date, setDate] = React.useState();
+const SingleDatePickerContainer = _ref => {
+  let {
+    onChange = () => null,
+    showHeader
+  } = _ref;
+  const [date, setDate] = React.useState('');
   const handleDateChange = React.useCallback(data => {
-    if (!data.includes('_')) onChange(moment__default['default'](data));
+    if (!data.includes('_')) onChange(moment__default["default"](data));
     setDate(data);
   }, [onChange]);
-  return /*#__PURE__*/_jsx__default['default']("div", {
+  return /*#__PURE__*/_jsx__default["default"]("div", {
     style: {
       boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)'
     }
-  }, void 0, showHeader && /*#__PURE__*/_jsx__default['default'](Grid__default['default'], {
+  }, void 0, showHeader && /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
     p: "xxs"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsControlledForm.DSControlledDateTimePicker, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateTimePicker, {
     date: date,
     onDateChange: handleDateChange,
     type: "date-inputs",
     isClearable: true
-  })), /*#__PURE__*/_jsx__default['default'](dsControlledForm.DSControlledDateTimePicker, {
+  })), /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateTimePicker, {
     date: date,
     onDateChange: handleDateChange,
     type: "date-picker-controller-only"
   }));
 };
 
-const formatDate = (date, format = defaultDateFormat.DEFAULT_DATE_FORMAT) => date.format(format);
+const formatDate = function (date) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDateFormat.DEFAULT_DATE_FORMAT;
+  return date.format(format);
+};
 
-function SingleDateFilterMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = () => null,
-  placement = DSPopper.PopperPositions.BOTTOM_END,
-  onAddFilter = () => null,
-  dateFormatter = formatDate,
-  showHeader = false,
-  menuProps
-}) {
-  return /*#__PURE__*/_jsx__default['default'](DSPopper__default['default'], {
-    contentComponent: /*#__PURE__*/_jsx__default['default']("div", {
+function SingleDateFilterMenu(_ref2) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = () => null,
+    placement = DSPopper.PopperPositions.BOTTOM_END,
+    onAddFilter = () => null,
+    dateFormatter = formatDate,
+    showHeader = false,
+    menuProps
+  } = _ref2;
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
       className: className,
       "data-testid": "date-single__wrapper"
-    }, void 0, /*#__PURE__*/_jsx__default['default'](SingleDatePickerContainer, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](SingleDatePickerContainer, {
       minimumNights: 0,
       onChange: date => {
         const t = date.clone();
@@ -79,7 +84,7 @@ function SingleDateFilterMenu({
             start: date.startOf('day'),
             end: t.endOf('day')
           },
-          transformRowValue: value => moment__default['default'](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT)
+          transformRowValue: value => moment__default["default"](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT)
         }, column);
         onOpenMenu(false);
       },
@@ -89,9 +94,9 @@ function SingleDateFilterMenu({
     onOpen: onOpenMenu,
     placement: placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx__default['default'](DatePickerIcon__default['default'], {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),

package/cjs/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.js

@@ -1,196 +1,162 @@
 'use strict';
 
 var _jsx = require('@babel/runtime/helpers/jsx');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+require('core-js/modules/web.dom-collections.iterator.js');
 var React = require('react');
-var dsDateRangePicker = require('@elliemae/ds-date-range-picker');
-var dsDatePicker = require('@elliemae/ds-date-picker');
+var dsControlledForm = require('@elliemae/ds-controlled-form');
 var DSPopper = require('@elliemae/ds-basic/Popper');
-var DatePickerIcon = require('@elliemae/ds-icons/DatePicker2');
+var dsIcons = require('@elliemae/ds-icons');
 var DSButton = require('@elliemae/ds-basic/Button');
+var Grid = require('@elliemae/ds-grid');
 var moment = require('moment');
-var dsClassnames = require('@elliemae/ds-classnames');
+var styled = require('styled-components');
 var defaultDateFormat = require('./defaultDateFormat.js');
-var jsxRuntime = require('react/jsx-runtime');
 
 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 _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
 var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
-var DatePickerIcon__default = /*#__PURE__*/_interopDefaultLegacy(DatePickerIcon);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var _DatePickerIcon;
+var _DatePicker;
+const StyledGridWrapper = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-jay5xg-0"
+})([".notCurrentMonth{opacity:", ";pointer-events:", ";}"], props => props.enableOutsideDays ? '1' : '0', props => props.enableOutsideDays ? 'auto' : 'none'); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
 
-const _excluded = ["onChange", "enableOutsideDays"];
-
-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 START_DATE = 'startDate';
-const END_DATE = 'endDate';
-const blockname = 'date-range';
-const Wrapper = dsClassnames.aggregatedClasses('div')(blockname, 'wrapper'); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
-
-const noop = (...args) => {};
+const noop = function () {};
 
 const SingleRangeSwitcherContainer = _ref => {
   let {
     onChange = noop,
     enableOutsideDays
-  } = _ref,
-      otherProps = _objectWithoutProperties__default['default'](_ref, _excluded);
+  } = _ref;
+  const [startDate, setStartDate] = React.useState('');
+  const [endDate, setEndDate] = React.useState(''); // For some reason it worked like this
 
-  const [focusedInputHeader, setFocusedInputHeader] = React.useState(START_DATE);
-  const [focusedInputPicker, setFocusedInputPicker] = React.useState(START_DATE);
-  const [singleDate, setSingleDate] = React.useState();
-  const [dateRange, setDateRange] = React.useState({});
+  const [lastChangeWasPicker, setLastChangeWasPicker] = React.useState(false);
   const [isDateRange, setIsDateRange] = React.useState(false);
-  const [pickerRange, setPickerRange] = React.useState({});
-
-  const handleHeaderFocusChange = inputType => {
-    setFocusedInputHeader(inputType);
-  };
-
-  const handlePickerFocusChange = () => {
-    setFocusedInputPicker(focusedInputPicker === START_DATE ? END_DATE : START_DATE);
-  };
-
-  const handleDatesChange = dates => {
-    if (dates.endDate) {
-      setTimeout(() => {
-        onChange({
-          startDate: dates.startDate,
-          endDate: dates.endDate.endOf('day')
-        });
-      }, 500);
+  React.useEffect(() => {
+    const startMoment = moment__default["default"](startDate);
+    const endMoment = moment__default["default"](endDate);
+
+    if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
+      onChange({
+        startDate: startMoment,
+        endDate: endMoment
+      });
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [startDate, endDate, lastChangeWasPicker]);
+  return /*#__PURE__*/_jsx__default["default"](StyledGridWrapper, {
+    "data-testid": "date-single-range__wrapper",
+    style: {
+      backgroundColor: 'white',
+      boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
+      width: '261px',
+      display: 'grid',
+      justifyContent: 'center'
+    },
+    cols: ['100%'],
+    enableOutsideDays: enableOutsideDays,
+    onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
+  }, void 0, /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {
+    gutter: "xxs",
+    alignItems: "center",
+    p: "xxs"
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledCheckbox, {
+    checked: isDateRange,
+    name: "Date range",
+    label: "Range",
+    id: "date-range-switcher-id-internal",
+    onChange: () => {
+      setIsDateRange(!isDateRange);
+      setStartDate('');
+      setEndDate('');
     }
-
-    setPickerRange({
-      startDate: dates.startDate,
-      endDate: dateRange.endDate
-    });
-    setDateRange(dates);
-  };
-
-  const handlePickerChange = dates => {
-    if (dates.endDate) {
-      setTimeout(() => {
-        onChange({
-          startDate: dates.startDate,
-          endDate: dates.endDate
-        });
-      }, 500);
+  }), /*#__PURE__*/_jsx__default["default"]("div", {
+    style: {
+      width: 'fit-content'
     }
-
-    if (dates.startDate) handleHeaderFocusChange(undefined);
-    setPickerRange(dates);
-    setDateRange(dates);
-  };
-
-  const handleSingleDateChange = React.useCallback(date => {
-    const dates = {
-      startDate: moment__default['default'](date).startOf('day'),
-      endDate: moment__default['default'](date).endOf('day')
-    };
-    onChange(dates);
-    setSingleDate(dates);
-  }, [onChange]);
-
-  const handleStartInputChange = newDate => {
-    setDateRange({
-      startDate: newDate,
-      endDate: dateRange.endDate
-    });
-    setPickerRange(_objectSpread(_objectSpread({}, pickerRange), {}, {
-      startDate: newDate
-    }));
-  };
-
-  const handleEndInputChange = newDate => {
-    setDateRange({
-      startDate: dateRange.startDate,
-      endDate: newDate
-    });
-    setPickerRange(_objectSpread(_objectSpread({}, pickerRange), {}, {
-      endDate: newDate
-    }));
-  };
-
-  const dateRangeController = /*#__PURE__*/jsxRuntime.jsx(dsDateRangePicker.DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
-    enableOutsideDays: enableOutsideDays,
-    endDate: pickerRange.endDate,
-    focusedInput: focusedInputPicker,
-    hideKeyboardShortcutsPanel: true,
-    onDatesChange: handlePickerChange,
-    onFocusChange: handlePickerFocusChange,
-    startDate: pickerRange.startDate
-  }));
-
-  const singleDateController = /*#__PURE__*/_jsx__default['default'](dsDatePicker.DSDatePickerController, {
-    date: singleDate,
-    enableOutsideDays: enableOutsideDays,
-    onDateChange: handleSingleDateChange
-  });
-
-  return /*#__PURE__*/_jsx__default['default'](Wrapper, {
-    "data-testid": "date-single-range__wrapper"
-  }, void 0, /*#__PURE__*/_jsx__default['default'](dsDatePicker.SingleRangeDateSwitcher, {
-    isDateRange: isDateRange,
-    focusedInput: focusedInputHeader,
-    onFocusChange: handleHeaderFocusChange,
-    onEndInputChange: handleEndInputChange,
-    onSingleInputChange: handleSingleDateChange,
-    onStartInputChange: handleStartInputChange,
-    selectedEndDate: dateRange.endDate,
-    selectedSingleDate: singleDate,
-    selectedStartDate: dateRange.startDate,
-    setIsDateRange: ({
-      target: {
-        checked
-      }
-    }) => {
-      setIsDateRange(checked);
+  }, void 0, isDateRange ? /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(false);
     },
-    handleDatesChange: handleDatesChange
-  }), isDateRange ? dateRangeController : singleDateController);
+    toDate: endDate,
+    onToDateChange: _end => {
+      setEndDate(_end);
+      setLastChangeWasPicker(false);
+    },
+    type: "date-range-inputs"
+  }) : /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateTimePicker, {
+    date: startDate,
+    onDateChange: _date => {
+      setLastChangeWasPicker(false);
+      setStartDate(_date);
+      setEndDate(_date);
+    },
+    type: "date-inputs"
+  }))), /*#__PURE__*/_jsx__default["default"](Grid__default["default"], {}, void 0, isDateRange ? /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateRangePicker, {
+    fromDate: startDate,
+    onFromDateChange: _start => {
+      setStartDate(_start);
+      setLastChangeWasPicker(true);
+    },
+    toDate: endDate,
+    onToDateChange: _end => {
+      setEndDate(_end);
+      setLastChangeWasPicker(true);
+    },
+    type: "date-range-picker-controller-only"
+  }) : /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSControlledDateTimePicker, {
+    date: startDate,
+    onDateChange: _date => {
+      setLastChangeWasPicker(true);
+      setStartDate(_date);
+      setEndDate(_date);
+    },
+    type: "date-picker-controller-only"
+  })));
 };
 
-const formatRangeDate = ({
-  startDate,
-  endDate
-}, format = defaultDateFormat.DEFAULT_DATE_FORMAT) => {
+const formatRangeDate = function (_ref2) {
+  let {
+    startDate,
+    endDate
+  } = _ref2;
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultDateFormat.DEFAULT_DATE_FORMAT;
   const sameDay = startDate.isSame(endDate, 'day');
-  if (sameDay) return `${endDate.format(format)}`;
-  return `${startDate.format(format)} - ${endDate.format(format)}`;
+  if (sameDay) return "".concat(endDate.format(format));
+  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
 }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 
 
-function SingleRangeSwitcherMenu({
-  column,
-  className,
-  isMenuOpened = false,
-  onOpenMenu = noop,
-  placement = DSPopper.PopperPositions.BOTTOM_END,
-  onAddFilter = noop,
-  dateFormatter = formatRangeDate,
-  enableOutsideDays = true,
-  menuProps
-}) {
-  return /*#__PURE__*/_jsx__default['default'](DSPopper__default['default'], {
-    contentComponent: /*#__PURE__*/_jsx__default['default']("div", {
+function SingleRangeSwitcherMenu(_ref3) {
+  let {
+    column,
+    className,
+    isMenuOpened = false,
+    onOpenMenu = noop,
+    placement = DSPopper.PopperPositions.BOTTOM_END,
+    onAddFilter = noop,
+    dateFormatter = formatRangeDate,
+    enableOutsideDays = true,
+    menuProps
+  } = _ref3;
+  return /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
+    contentComponent: /*#__PURE__*/_jsx__default["default"]("div", {
       className: className
-    }, void 0, /*#__PURE__*/_jsx__default['default'](SingleRangeSwitcherContainer, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](SingleRangeSwitcherContainer, {
       enableOutsideDays: enableOutsideDays,
-      minimumNights: 0,
-      onChange: ({
-        startDate,
-        endDate
-      }) => {
+      onChange: _ref4 => {
+        let {
+          startDate,
+          endDate
+        } = _ref4;
         startDate.startOf('day');
         endDate.endOf('day');
         onAddFilter({
@@ -206,7 +172,7 @@ function SingleRangeSwitcherMenu({
             start: startDate,
             end: endDate
           },
-          transformRowValue: value => moment__default['default'](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT),
+          transformRowValue: value => moment__default["default"](value, column.dateFormat || defaultDateFormat.DEFAULT_DATE_FORMAT),
           operator: 'range'
         }, column);
         onOpenMenu(false);
@@ -216,9 +182,9 @@ function SingleRangeSwitcherMenu({
     onOpen: onOpenMenu,
     placement: placement,
     showArrow: false,
-    triggerComponent: /*#__PURE__*/_jsx__default['default'](DSButton__default['default'], {
+    triggerComponent: /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
-      icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx__default['default'](DatePickerIcon__default['default'], {})),
+      icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx__default["default"](dsIcons.DatePicker2, {})),
       onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
       size: "s"
     }),