@synerise/ds-date-range-picker 0.17.3 → 0.17.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.17.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.17.3...@synerise/ds-date-range-picker@0.17.4) (2022-10-14)
+
+
+### Bug Fixes
+
+* **date-range-picker:** lifetime, onApply fixes, refactor, custom-day ([735b4b4](https://github.com/Synerise/synerise-design/commit/735b4b4b6375ed083e60831f641126346d63f14f))
+
+
+
+
+
 ## [0.17.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.17.2...@synerise/ds-date-range-picker@0.17.3) (2022-10-11)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/dist/DateRangePicker.js

@@ -19,7 +19,6 @@ var DateRangePicker = function DateRangePicker(props) {
   var value = props.value,
       onApply = props.onApply,
       showTime = props.showTime,
-      onValueChange = props.onValueChange,
       texts = props.texts,
       popoverTrigger = props.popoverTrigger,
       forceAdjacentMonths = props.forceAdjacentMonths,
@@ -27,7 +26,13 @@ var DateRangePicker = function DateRangePicker(props) {
       arrowColor = props.arrowColor,
       _onVisibleChange = props.onVisibleChange,
       _props$popoverProps = props.popoverProps,
-      popoverProps = _props$popoverProps === void 0 ? {} : _props$popoverProps;
+      popoverProps = _props$popoverProps === void 0 ? {} : _props$popoverProps,
+      _props$rangePickerInp = props.rangePickerInputProps,
+      rangePickerInputProps = _props$rangePickerInp === void 0 ? {} : _props$rangePickerInp,
+      _props$renderPopoverT = props.renderPopoverTrigger,
+      renderPopoverTrigger = _props$renderPopoverT === void 0 ? function () {
+    return undefined;
+  } : _props$renderPopoverT;
   var intl = useIntl();
 
   var _React$useState = React.useState(false),
@@ -56,10 +61,6 @@ var DateRangePicker = function DateRangePicker(props) {
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [value]);
-  var onValueChangeCallback = React.useCallback(function (val) {
-    onValueChange && onValueChange(val);
-    setSelectedDate(val);
-  }, [onValueChange]);
   var onApplyCallback = React.useCallback(function (val) {
     onApply && onApply(val);
     setSelectedDate(val);
@@ -77,7 +78,6 @@ var DateRangePicker = function DateRangePicker(props) {
     content: /*#__PURE__*/React.createElement(RawDateRangePicker, _extends({}, props, {
       showTime: showTime,
       onApply: onApplyCallback,
-      onValueChange: onValueChangeCallback,
       value: selectedDate,
       texts: allTexts,
       forceAdjacentMonths: forceAdjacentMonths
@@ -95,16 +95,18 @@ var DateRangePicker = function DateRangePicker(props) {
       setInputActive(visibility);
       _onVisibleChange && _onVisibleChange(visibility);
     }
-  }, popoverProps, conditionalVisibilityProps), popoverTrigger || /*#__PURE__*/React.createElement(RangePickerInput, {
+  }, popoverProps, conditionalVisibilityProps), popoverTrigger || renderPopoverTrigger({
+    setPopupVisible: setPopupVisible
+  }) || /*#__PURE__*/React.createElement(RangePickerInput, _extends({
     onClick: function onClick() {
       return setPopupVisible(undefined);
     },
     value: selectedDate,
     showTime: showTime,
     texts: allTexts,
-    onChange: onValueChangeCallback,
+    onChange: onApplyCallback,
     active: !!inputActive
-  })));
+  }, rangePickerInputProps))));
 };
 
 export default DateRangePicker;

package/dist/DateRangePicker.types.d.ts

@@ -5,6 +5,8 @@ import { DateFilter, DateRange, RelativeUnits } from './date.types';
 import { FilterDefinition } from './RangeFilter/RangeFilter.types';
 import { SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
 import { Props as FooterProps } from './Footer/Footer.types';
+import { RangePickerInputProps } from './RangePickerInput/RangePickerInput.types';
+export { DateRange } from './date.types';
 export declare type CustomColorArrow = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export declare type AdditionalMapper = {
     topLeft: CustomColorArrow;
@@ -16,7 +18,7 @@ export declare type AdditionalMapper = {
     rightTop: CustomColorArrow;
     rightBottom: CustomColorArrow;
 };
-export interface Props extends WrappedComponentProps {
+export interface DateRangePickerProps extends WrappedComponentProps {
     /**
      * overwrite default container's class. Default value is `ds-date-range-picker`.
      */
@@ -49,8 +51,19 @@ export interface Props extends WrappedComponentProps {
         message?: string;
     };
     value: DateRange;
+    /**
+     * transforms value, by default omits ALL_TIME props
+     */
+    valueTransformer?: (value: DateRange) => DateRange;
     arrowColor?: AdditionalMapper;
+    disableAbsoluteTimepickerInRelative?: boolean;
+    rangePickerInputProps?: RangePickerInputProps;
+    renderPopoverTrigger?: (...args: any) => JSX.Element;
 }
+/**
+ * @deprecated use `DateRangePickerProps`
+ */
+export declare type Props = DateRangePickerProps;
 export declare type RelativeMode = 'PAST' | 'FUTURE' | 'SINCE';
 export interface State {
     mode: string;

package/dist/DateRangePicker.types.js

@@ -1 +1,2 @@
-export {};
+import { DateRange } from './date.types';
+export { DateRange } from './date.types';

package/dist/Footer/Footer.js

@@ -13,6 +13,7 @@ import * as S from './Footer.styles';
 import fnsFormat from '../dateUtils/format';
 import getDateFromString from '../dateUtils/getDateFromString';
 import * as CONST from '../constants';
+import { isLifetime } from '../RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
 
 var Footer = function Footer(_ref) {
   var canApply = _ref.canApply,
@@ -33,12 +34,12 @@ var Footer = function Footer(_ref) {
 
   var footerFormat = format || (showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
   var ChosenRange = React.useMemo(function () {
-    if ((value == null ? void 0 : value.key) === CONST.ALL_TIME) {
+    if ((value == null ? void 0 : value.key) === CONST.ALL_TIME || value && isLifetime(value)) {
       var _texts$value$translat;
 
       return /*#__PURE__*/React.createElement(S.ChosenRange, {
         className: "ds-date-range-picker-value"
-      }, value.translationKey ? (_texts$value$translat = texts[value.translationKey]) != null ? _texts$value$translat : value.translationKey : value == null ? void 0 : value.key);
+      }, value != null && value.translationKey ? (_texts$value$translat = texts[value.translationKey]) != null ? _texts$value$translat : value.translationKey : (value == null ? void 0 : value.key) || 'LIFETIME');
     }
 
     return /*#__PURE__*/React.createElement(S.ChosenRange, {
@@ -55,7 +56,7 @@ var Footer = function Footer(_ref) {
     disabled: !canApply,
     type: "primary",
     onClick: function onClick() {
-      onApply && onApply();
+      onApply && onApply(value);
     }
   }, texts.apply))));
 };

package/dist/Footer/Footer.types.d.ts

@@ -8,7 +8,7 @@ export declare type Props = {
     value?: DateRange;
     canApply?: boolean;
     canSwitchMode?: boolean;
-    onApply?: (date?: Date | undefined) => void;
+    onApply?: (date?: Date | DateRange | undefined) => void;
     onSwitchMode?: () => void;
     message?: React.ReactNode | string;
     texts: Texts;

package/dist/RangePicker/RangePicker.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DayModifiers } from 'react-day-picker';
-import { Props, State, Side as SideType } from './RangePicker.types';
+import { RangePickerProps as Props, State, Side as SideType } from './RangePicker.types';
 export default class RangePicker extends React.PureComponent<Props, State> {
     constructor(props: Props);
     getSnapshotBeforeUpdate(prevProps: Readonly<Props>): null;

package/dist/RangePicker/RangePicker.js

@@ -36,7 +36,15 @@ var TOOLTIP_FORMAT = 'MMM d, yyyy, HH:mm';
 
 function replaceRange(value, day) {
   var from = value.from,
-      to = value.to; // arguments to DateUtils functions are casted to Date because function arguments require Date
+      to = value.to;
+
+  if (from && typeof from === 'object') {
+    from = new Date(from.getTime());
+  }
+
+  if (to && typeof to === 'object') {
+    to = new Date(to.getTime());
+  }
 
   if (!from) {
     from = day;
@@ -405,16 +413,40 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
         value = _this$props8.value,
         forceAdjacentMonths = _this$props8.forceAdjacentMonths,
         startAlwaysOnTheLeft = _this$props8.startAlwaysOnTheLeft;
-    var left = this.state.left;
+    var _this$props$jumpToSta = this.props.jumpToStartAndEnd,
+        jumpToStartAndEnd = _this$props$jumpToSta === void 0 ? true : _this$props$jumpToSta;
+    var _this$state3 = this.state,
+        left = _this$state3.left,
+        right = _this$state3.right;
     var toDateChanged = !!(value != null && value.to) && (value == null ? void 0 : value.to) !== (prevProps == null ? void 0 : (_prevProps$value = prevProps.value) == null ? void 0 : _prevProps$value.to);
     var fromDateChanged = !!(value != null && value.from) && (value == null ? void 0 : value.from) !== (prevProps == null ? void 0 : (_prevProps$value2 = prevProps.value) == null ? void 0 : _prevProps$value2.from);
+    var startOnLeft = fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month));
+    var endOnLeft = fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month));
 
-    if (toDateChanged && !fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month)) || fromDateChanged && !fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month)) || forceAdjacentMonths !== prevProps.forceAdjacentMonths) {
+    if (fromDateChanged && !endOnLeft || toDateChanged && !endOnLeft || forceAdjacentMonths !== prevProps.forceAdjacentMonths) {
       if (startAlwaysOnTheLeft) {
         this.setState(getSidesState(value, forceAdjacentMonths));
       }
     }
 
+    if (jumpToStartAndEnd && (fromDateChanged || toDateChanged)) {
+      var startOnRight = fnsIsSameMonth(legacyParse(value.from), legacyParse(right.month));
+      var isStartVisible = startOnLeft || startOnRight;
+
+      if (!isStartVisible) {
+        this.setState(getSidesState(value, forceAdjacentMonths));
+        return null;
+      }
+
+      var endOnRight = fnsIsSameMonth(legacyParse(value.to), legacyParse(right.month));
+      var isEndVisible = endOnLeft || endOnRight;
+
+      if (!isEndVisible) {
+        this.setState(getSidesState(value, forceAdjacentMonths));
+        return null;
+      }
+    }
+
     return null;
   };
 
@@ -433,11 +465,16 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
       mode: mode
     }, this.renderSide(COLUMNS.RIGHT))), /*#__PURE__*/React.createElement(S.PickerFooter, null, /*#__PURE__*/React.createElement(Range, {
       onClick: function onClick() {
-        onChange(_objectSpread({}, value, {
+        var now = new Date();
+
+        var literallyNow = _objectSpread({}, value, {
+          translationKey: 'now',
           type: 'ABSOLUTE',
-          to: fnsAddMinutes(new Date(), 1),
-          from: new Date()
-        }));
+          from: now,
+          to: fnsAddMinutes(now, 1)
+        });
+
+        onChange(literallyNow);
       }
     }, texts.now), /*#__PURE__*/React.createElement(S.FooterSeparator, null), !dateOnly && /*#__PURE__*/React.createElement(S.DateTimeModeSwitch, {
       type: "ghost",

package/dist/RangePicker/RangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { WrappedComponentProps } from 'react-intl';
 import { DateRange } from '../date.types';
 import { Texts } from '../DateRangePicker.types';
-export interface Props extends WrappedComponentProps {
+export interface RangePickerProps extends WrappedComponentProps {
     value: DateRange;
     onChange: (value: DateRange) => void;
     mode: string;
@@ -13,7 +13,12 @@ export interface Props extends WrappedComponentProps {
     forceAdjacentMonths?: boolean;
     showCustomRange?: boolean;
     startAlwaysOnTheLeft?: boolean;
+    jumpToStartAndEnd?: boolean;
 }
+/**
+ * @deprecated use @{type RangePickerProps}
+ */
+export declare type Props = RangePickerProps;
 export interface State {
     enteredTo?: Date | null;
     left: {

package/dist/RangePickerInput/RangePickerInput.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Props } from './RangePickerInput.types';
-declare const RangePickerInput: React.FC<Props>;
+import { RangePickerInputProps } from './RangePickerInput.types';
+declare const RangePickerInput: React.FC<RangePickerInputProps>;
 export default RangePickerInput;

package/dist/RangePickerInput/RangePickerInput.js

@@ -7,6 +7,7 @@ import Tooltip from '@synerise/ds-tooltip'; // eslint-disable-next-line import/n
 import { default as fnsFormat } from '../dateUtils/format';
 import * as S from './RangePickerInput.styles';
 import { normalizeRange } from '../utils';
+import { isLifetime } from '../RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
 
 var RangePickerInput = function RangePickerInput(_ref) {
   var value = _ref.value,
@@ -24,7 +25,9 @@ var RangePickerInput = function RangePickerInput(_ref) {
       onFocus = _ref.onFocus,
       onBlur = _ref.onBlur,
       error = _ref.error,
-      errorText = _ref.errorText;
+      errorText = _ref.errorText,
+      _ref$preferRelativeDe = _ref.preferRelativeDesc,
+      preferRelativeDesc = _ref$preferRelativeDe === void 0 ? false : _ref$preferRelativeDe;
   var dateRangeValue = value ? normalizeRange(value) : value;
 
   var _React$useState = React.useState(false),
@@ -66,6 +69,16 @@ var RangePickerInput = function RangePickerInput(_ref) {
       highlight: active && !!isFromDateDefined && !isEndDateDefined && highlight
     }, text);
   }, [dateRangeValue, getText, active, texts, highlight]);
+  var placeholder = React.useMemo(function () {
+    if (isLifetime(value)) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, (texts == null ? void 0 : texts['allTime']) || 'Lifetime');
+    }
+
+    return /*#__PURE__*/React.createElement(React.Fragment, null, preferRelativeDesc && (dateRangeValue == null ? void 0 : dateRangeValue.translationKey) && ((texts == null ? void 0 : texts[dateRangeValue.translationKey]) || (dateRangeValue == null ? void 0 : dateRangeValue.translationKey)) + " (", renderFromDate(), /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(ArrowRightS, null),
+      color: theme.palette['grey-400']
+    }), renderEndDate(), preferRelativeDesc && (dateRangeValue == null ? void 0 : dateRangeValue.translationKey) && value && ')');
+  }, [dateRangeValue, renderFromDate, renderEndDate, preferRelativeDesc, texts, value]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(S.Label, {
     label: label,
     tooltip: tooltip
@@ -82,10 +95,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
     active: !!highlight && !disabled,
     tabIndex: disabled ? -1 : 0,
     focus: active && !disabled
-  }, renderFromDate(), /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(ArrowRightS, null),
-    color: theme.palette['grey-400']
-  }), renderEndDate(), /*#__PURE__*/React.createElement(S.IconSeparator, null), hovered && !!value && !!value.to && !!value.from ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, placeholder, /*#__PURE__*/React.createElement(S.IconSeparator, null), hovered && !!value && !!value.to && !!value.from ? /*#__PURE__*/React.createElement(Tooltip, {
     title: texts == null ? void 0 : texts.clear
   }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(Close3S, null),

package/dist/RangePickerInput/RangePickerInput.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DateFilter, DateRange } from '../date.types';
 import { Texts } from '../DateRangePicker.types';
-export declare type Props = {
+export declare type RangePickerInputProps = {
     size?: 'large' | 'default' | 'small';
     format?: string;
     showTime?: boolean;
@@ -24,4 +24,9 @@ export declare type Props = {
     tooltip?: string | React.ReactNode;
     error?: boolean;
     errorText?: React.ReactNode | string;
+    preferRelativeDesc?: boolean;
 };
+/**
+ * @deprecated use `RangePickerInputProps`
+ */
+export declare type Props = RangePickerInputProps;

package/dist/RawDateRangePicker.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { Props, State, AddonType } from './DateRangePicker.types';
-import { DateRange, RelativeDateRange } from './date.types';
+import type { DateRangePickerProps, DateRangePickerProps as Props, State, AddonType } from './DateRangePicker.types';
+import type { DateRange, RelativeDateRange } from './date.types';
 import { FilterDefinition, FilterValue } from './RangeFilter/RangeFilter.types';
-export declare class RawDateRangePicker extends React.PureComponent<Props, State> {
+export declare function defaultValueTransformer(value: DateRange): DateRange;
+export declare class RawDateRangePicker extends React.PureComponent<DateRangePickerProps, State> {
     static defaultProps: {
         ranges: DateRange[];
         relativePast: boolean;
@@ -10,8 +11,9 @@ export declare class RawDateRangePicker extends React.PureComponent<Props, State
         validate: () => {
             valid: boolean;
         };
+        valueTransformer: typeof defaultValueTransformer;
     };
-    constructor(props: Props);
+    constructor(props: DateRangePickerProps);
     componentDidUpdate(prevProps: Readonly<Props>): void;
     handleFilterCancel: () => void;
     handleFilterApply: (filter?: FilterValue<FilterDefinition> | undefined) => void;
@@ -24,9 +26,9 @@ export declare class RawDateRangePicker extends React.PureComponent<Props, State
     getAddons: () => AddonType[];
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "arrowColor"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "texts" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "valueTransformer" | "arrowColor" | "disableAbsoluteTimepickerInRelative" | "rangePickerInputProps" | "renderPopoverTrigger"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
-    WrappedComponent: React.ComponentType<Props>;
+    WrappedComponent: React.ComponentType<DateRangePickerProps>;
 };
 export default _default;

package/dist/RawDateRangePicker.js

@@ -1,13 +1,13 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-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(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; }
-
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
 
+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(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; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import * as React from 'react';
@@ -25,6 +25,50 @@ import Footer from './Footer/Footer';
 import { normalizeRange } from './utils';
 import RangeFilter from './RangeFilter/RangeFilter';
 import RangeFilterStatus from './RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus';
+import { isLifetime } from './RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
+export function defaultValueTransformer(value) {
+  if (value.key === 'ALL_TIME' || isLifetime(value)) {
+    return {
+      type: 'ABSOLUTE'
+    };
+  }
+
+  var id = value.id,
+      timestamp = value.timestamp,
+      translationKey = value.translationKey;
+
+  var baseValue = _objectSpread({}, id ? {
+    id: id
+  } : {}, {}, timestamp ? {
+    timestamp: timestamp
+  } : {}, {}, translationKey ? {
+    translationKey: translationKey
+  } : {});
+
+  if (value.type === 'ABSOLUTE') {
+    return _objectSpread({}, baseValue, {
+      type: value.type
+    }, value.from ? {
+      from: value.from
+    } : {}, {}, value.to ? {
+      to: value.to
+    } : {});
+  }
+
+  if (value.type === 'RELATIVE') {
+    return _objectSpread({}, baseValue, {
+      type: value.type,
+      key: value.key,
+      duration: value.duration,
+      offset: value.offset,
+      future: value.future
+    }, value.filter ? {
+      filter: value.filter
+    } : {});
+  }
+
+  return value;
+}
 export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(RawDateRangePicker, _React$PureComponent);
 
@@ -51,6 +95,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleRangeChange", function (range) {
+      var _valueTransformer;
+
       if (!range) {
         return;
       }
@@ -59,7 +105,9 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      var onValueChange = _this.props.onValueChange;
+      var _this$props = _this.props,
+          onValueChange = _this$props.onValueChange,
+          valueTransformer = _this$props.valueTransformer;
       var _this$state = _this.state,
           value = _this$state.value,
           mode = _this$state.mode;
@@ -68,31 +116,33 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       }));
 
       if ((newValue.type === 'RELATIVE' || newValue.key === CONST.ALL_TIME) && mode === MODES.TIME) {
-        // clicked on RangeButtons and was selecting time
         _this.setState({
           mode: MODES.DATE
         });
       }
 
       if (range != null && range.key) {
-        // for validation, see `isValidAbsolute`, this key shouldn't be present
         newValue.key = range == null ? void 0 : range.key;
-      }
+      } // transformation has to take place here, because `key` property might get omitted by valueTransformer
+
+
+      var legacyValue = (_valueTransformer = valueTransformer == null ? void 0 : valueTransformer(newValue)) != null ? _valueTransformer : newValue;
 
       _this.setState({
-        value: _objectSpread({}, newValue, {
+        value: _objectSpread({}, legacyValue, {
           translationKey: range == null ? void 0 : range.translationKey
         })
       });
 
-      onValueChange && onValueChange(newValue);
+      onValueChange && onValueChange(legacyValue);
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleApply", function () {
       var value = _this.state.value;
-      var _this$props = _this.props,
-          forceAbsolute = _this$props.forceAbsolute,
-          onApply = _this$props.onApply;
+      var _this$props2 = _this.props,
+          forceAbsolute = _this$props2.forceAbsolute,
+          onApply = _this$props2.onApply,
+          valueTransformer = _this$props2.valueTransformer;
 
       if (forceAbsolute && value.type === RELATIVE) {
         onApply && onApply(_objectSpread({}, value, {}, relativeToAbsolute(value)));
@@ -104,11 +154,17 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      onApply && onApply(_objectSpread({}, value, {
-        from: value.type === ABSOLUTE && value.from instanceof Date ? value.from.toISOString() : undefined,
-        to: value.type === ABSOLUTE && value.to instanceof Date ? value.to.toISOString() : undefined,
-        type: value.type
-      }));
+      if (onApply) {
+        var _valueTransformer2;
+
+        var valueToEmit = _objectSpread({}, value, {
+          from: value.type === ABSOLUTE && value.from instanceof Date ? value.from.toISOString() : undefined,
+          to: value.type === ABSOLUTE && value.to instanceof Date ? value.to.toISOString() : undefined,
+          type: value.type
+        });
+
+        onApply((_valueTransformer2 = valueTransformer == null ? void 0 : valueTransformer(valueToEmit)) != null ? _valueTransformer2 : valueToEmit);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleModalOpenClick", function () {
@@ -139,17 +195,18 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getAddons", function () {
-      var _this$props2 = _this.props,
-          showRelativePicker = _this$props2.showRelativePicker,
-          showFilter = _this$props2.showFilter,
-          relativeFuture = _this$props2.relativeFuture,
-          relativePast = _this$props2.relativePast,
-          ranges = _this$props2.ranges,
-          relativeModes = _this$props2.relativeModes,
-          texts = _this$props2.texts,
-          intl = _this$props2.intl,
-          rangeUnits = _this$props2.rangeUnits,
-          showCustomRange = _this$props2.showCustomRange;
+      var _this$props3 = _this.props,
+          showRelativePicker = _this$props3.showRelativePicker,
+          showFilter = _this$props3.showFilter,
+          relativeFuture = _this$props3.relativeFuture,
+          relativePast = _this$props3.relativePast,
+          ranges = _this$props3.ranges,
+          relativeModes = _this$props3.relativeModes,
+          texts = _this$props3.texts,
+          intl = _this$props3.intl,
+          rangeUnits = _this$props3.rangeUnits,
+          showCustomRange = _this$props3.showCustomRange,
+          valueTransformer = _this$props3.valueTransformer;
       var _this$state2 = _this.state,
           value = _this$state2.value,
           visibleAddonKey = _this$state2.visibleAddonKey;
@@ -169,7 +226,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
               relativeModes: relativeModes,
               texts: texts,
               rangeUnits: rangeUnits,
-              showCustomRange: showCustomRange
+              showCustomRange: showCustomRange,
+              valueTransformer: valueTransformer
             }),
             expanded: addonKey === visibleAddonKey,
             title: texts == null ? void 0 : texts.relativeDateRange,
@@ -230,22 +288,33 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.render = function render() {
-    var _this$props3 = this.props,
-        showTime = _this$props3.showTime,
-        format = _this$props3.format,
-        disabledDate = _this$props3.disabledDate,
-        validate = _this$props3.validate,
-        forceAdjacentMonths = _this$props3.forceAdjacentMonths,
-        texts = _this$props3.texts,
-        savedFilters = _this$props3.savedFilters,
-        onFilterSave = _this$props3.onFilterSave,
-        intl = _this$props3.intl,
-        _this$props3$containe = _this$props3.containerClass,
-        containerClass = _this$props3$containe === void 0 ? 'ds-date-range-picker' : _this$props3$containe,
-        footerProps = _this$props3.footerProps;
+    var _this$props4 = this.props,
+        showTime = _this$props4.showTime,
+        format = _this$props4.format,
+        disabledDate = _this$props4.disabledDate,
+        validate = _this$props4.validate,
+        forceAdjacentMonths = _this$props4.forceAdjacentMonths,
+        texts = _this$props4.texts,
+        savedFilters = _this$props4.savedFilters,
+        onFilterSave = _this$props4.onFilterSave,
+        intl = _this$props4.intl,
+        _this$props4$containe = _this$props4.containerClass,
+        containerClass = _this$props4$containe === void 0 ? 'ds-date-range-picker' : _this$props4$containe,
+        footerProps = _this$props4.footerProps,
+        _this$props4$disableA = _this$props4.disableAbsoluteTimepickerInRelative,
+        disableAbsoluteTimepickerInRelative = _this$props4$disableA === void 0 ? false : _this$props4$disableA;
     var _this$state3 = this.state,
         value = _this$state3.value,
         mode = _this$state3.mode;
+
+    if (value.type === 'RELATIVE' && (!value.from || !value.to)) {
+      var absolute = normalizeRange(value);
+      Object.assign(value, {
+        from: absolute.from,
+        to: absolute.to
+      });
+    }
+
     var from = value.from,
         to = value.to,
         key = value.key;
@@ -271,7 +340,10 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
     }
 
     var isValidRelative = isRelative(value) && Boolean(value.offset && value.duration);
-    var isValid = (isValidAbsolute || isValidRelative || key === CONST.ALL_TIME) && validator.valid;
+    var isValidSince = value.type === 'SINCE' && Boolean(value.offset && value.duration); // TODO apply ranges and find mapped lifetime here, this applies only for defaultValueTransformer
+
+    var isValid = (isValidAbsolute || isValidRelative || isValidSince || key === CONST.ALL_TIME) && validator.valid;
+    var canSwitchToTimePicker = isValid && (!disableAbsoluteTimepickerInRelative || value.type === 'ABSOLUTE');
     return /*#__PURE__*/React.createElement(Container, {
       className: containerClass
     }, /*#__PURE__*/React.createElement(RangePicker, {
@@ -281,7 +353,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       disabledDate: disabledDate,
       onSwitchMode: this.handleSwitchMode,
       dateOnly: !showTime,
-      canSwitchMode: isValid,
+      canSwitchMode: canSwitchToTimePicker,
       texts: texts,
       forceAdjacentMonths: forceAdjacentMonths,
       intl: intl
@@ -292,7 +364,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         key: addon.key
       }, addon.content);
     }), /*#__PURE__*/React.createElement(Footer, _extends({
-      canApply: isValid,
+      canApply: isValid || isLifetime(value),
       onApply: this.handleApply,
       dateOnly: !showTime,
       mode: mode,
@@ -318,7 +390,8 @@ _defineProperty(RawDateRangePicker, "defaultProps", {
     return {
       valid: true
     };
-  }
+  },
+  valueTransformer: defaultValueTransformer
 });
 
 export default injectIntl(RawDateRangePicker);

package/dist/RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.d.ts

@@ -1,4 +1,12 @@
 import * as React from 'react';
-import { Props } from './RangeDropdown.types';
-declare const RangeDropdown: React.FC<Props>;
+import { RangeDropdownProps } from './RangeDropdown.types';
+import { RelativeDateRange } from '../../../date.types';
+/**
+ * Tell whether given date (range) is a lifetime value.
+ *
+ * @param date-value @{type DateRange}
+ * @param fallback whether to accept existing properties, but set to `undefined`, default `false`
+ */
+export declare const isLifetime: (range?: import("../../../date.types").AbsoluteDateRange | RelativeDateRange | undefined, fallback?: boolean) => boolean;
+declare const RangeDropdown: React.FC<RangeDropdownProps>;
 export default RangeDropdown;

package/dist/RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import find from 'ramda/src/find';
+import { isEqual } from 'lodash';
 import Icon, { AngleDownS, CheckS } from '@synerise/ds-icon';
 import { useOnClickOutside } from '@synerise/ds-utils';
 import Scrollbar from '@synerise/ds-scrollbar';
@@ -9,12 +10,39 @@ var MAX_ITEMS_COUNT = 7;
 var ITEMS_HEIGHT = 32;
 var DROPDOWN_WIDTH = 160;
 var DROPDOWN_PADDING = 8;
+/**
+ * Tell whether given date (range) is a lifetime value.
+ *
+ * @param date-value @{type DateRange}
+ * @param fallback whether to accept existing properties, but set to `undefined`, default `false`
+ */
+
+export var isLifetime = function isLifetime(range, fallback) {
+  if (fallback === void 0) {
+    fallback = false;
+  }
+
+  if (!range) {
+    return false;
+  }
+
+  var keys = Object.keys(range);
+  var legacyDef = range.type === 'ABSOLUTE' && !keys.includes('from') && !keys.includes('to'); // reasonable def comes from the fact that empty from and to sometimes might be also set like this (from/to as undefined)
+
+  var reasonableDef = range.type === 'ABSOLUTE' && range.from === undefined && range.to === undefined;
+  var legacyValueButLifetimeForSure = reasonableDef && range.translationKey === 'allTime';
+  return legacyDef || fallback && reasonableDef || legacyValueButLifetimeForSure;
+};
 
 var RangeDropdown = function RangeDropdown(_ref) {
   var ranges = _ref.ranges,
       currentRange = _ref.currentRange,
       texts = _ref.texts,
-      onChange = _ref.onChange;
+      onChange = _ref.onChange,
+      _ref$valueTransformer = _ref.valueTransformer,
+      valueTransformer = _ref$valueTransformer === void 0 ? function (e) {
+    return e;
+  } : _ref$valueTransformer;
 
   var _React$useState = React.useState(false),
       dropVisible = _React$useState[0],
@@ -32,9 +60,14 @@ var RangeDropdown = function RangeDropdown(_ref) {
     setDropVisible(false);
   }, [onChange, ranges]);
   if (!ranges || ranges.length === 0) return null;
+  var mappedRanges = ranges.map(valueTransformer);
+  var transformedCurrentRange = valueTransformer(currentRange);
+  var anyOfTransformedRangesMatchesCurrentRange = find(function (r) {
+    return isEqual(transformedCurrentRange, r);
+  }, mappedRanges);
   var containsCurrentRange = currentRange && find(function (range) {
     return range.key === currentRange.key;
-  }, ranges);
+  }, ranges) || anyOfTransformedRangesMatchesCurrentRange;
   var overlay = /*#__PURE__*/React.createElement(S.OverlayWrapper, {
     visible: dropVisible,
     ref: overlayRef,

package/dist/RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.types.d.ts

@@ -1,8 +1,13 @@
 import { AbsoluteDateRange, DateRange, RelativeDateRange } from '../../../date.types';
-import { Texts } from '../../../DateRangePicker.types';
-export declare type Props = {
+import { DateRangePickerProps, Texts } from '../../../DateRangePicker.types';
+export declare type RangeDropdownProps = {
     ranges: DateRange[];
     currentRange: RelativeDateRange;
     texts: Texts;
     onChange: (range: AbsoluteDateRange | RelativeDateRange | undefined) => void;
+    valueTransformer?: ((value: DateRange | object) => DateRange | object) | DateRangePickerProps['valueTransformer'];
 };
+/**
+ * @deprecated use `DateRangePickerProps`
+ */
+export declare type Props = DateRangePickerProps;

package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampRange.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { Props } from './TimestampRange.types';
+import { TimestampRangeProps as Props } from './TimestampRange.types';
 declare const TimestampRange: React.FC<Props>;
 export default TimestampRange;

package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampRange.js

@@ -4,6 +4,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import * as React from 'react';
 import DatePicker from '@synerise/ds-date-picker/dist/DatePicker';
 import * as S from '../../RelativeRangePicker.styles';
@@ -14,24 +15,41 @@ import END_OF from '../../../dateUtils/endOf';
 import DIFFERENCE from '../../../dateUtils/difference';
 import { DURATION_MODIFIERS } from '../../../constants';
 import { fnsIsAfter } from '../../../fns';
+import { DEFAULT_RANGE } from '../../../utils';
 
 var TimestampRange = function TimestampRange(_ref) {
+  var _currentRange$duratio, _currentRange$duratio2;
+
   var currentRange = _ref.currentRange,
       currentGroup = _ref.currentGroup,
       handleChange = _ref.handleChange,
       texts = _ref.texts,
       onTimestampChange = _ref.onTimestampChange,
+      _ref$getValueOnReset = _ref.getValueOnReset,
+      getValueOnReset = _ref$getValueOnReset === void 0 ? function () {
+    return _objectSpread({}, DEFAULT_RANGE, {
+      type: 'RELATIVE',
+      offset: {
+        type: 'SINCE',
+        value: new Date()
+      },
+      duration: {
+        type: 'DAYS',
+        value: 30
+      }
+    });
+  } : _ref$getValueOnReset,
       timestamp = _ref.timestamp;
 
   var _React$useState = React.useState(DURATION_MODIFIERS.LAST),
       durationModifier = _React$useState[0],
       setDurationModifier = _React$useState[1];
 
-  var _React$useState2 = React.useState(currentRange.duration.value),
+  var _React$useState2 = React.useState(currentRange == null ? void 0 : (_currentRange$duratio = currentRange.duration) == null ? void 0 : _currentRange$duratio.value),
       durationValue = _React$useState2[0],
       setDurationValue = _React$useState2[1];
 
-  var _React$useState3 = React.useState(currentRange.duration.type),
+  var _React$useState3 = React.useState(currentRange == null ? void 0 : (_currentRange$duratio2 = currentRange.duration) == null ? void 0 : _currentRange$duratio2.type),
       durationUnit = _React$useState3[0],
       setDurationUnit = _React$useState3[1];
 
@@ -48,11 +66,27 @@ var TimestampRange = function TimestampRange(_ref) {
       var NOW = new Date();
       var rangeStart, newOffset, offsetToTimestamp;
       var future = fnsIsAfter(NOW, date);
+      var isSince = currentGroup === 'SINCE';
 
-      if (durationModifier === DURATION_MODIFIERS.NEXT) {
+      if (isSince) {
+        offsetToTimestamp = {
+          future: durationModifier === DURATION_MODIFIERS.NEXT,
+          duration: {
+            type: duration.type,
+            value: duration.value
+          },
+          offset: {
+            type: 'SINCE',
+            value: timestamp
+          },
+          key: undefined
+        };
+      } else if (durationModifier === DURATION_MODIFIERS.NEXT) {
         rangeStart = END_OF[duration.type](ADD[duration.type](date, -Number(future)));
         newOffset = DIFFERENCE[duration.type](NOW, rangeStart);
-        offsetToTimestamp = _objectSpread({}, currentRange, {
+        offsetToTimestamp = _objectSpread({
+          future: true
+        }, currentRange, {
           duration: {
             type: duration.type,
             value: duration.value
@@ -63,12 +97,12 @@ var TimestampRange = function TimestampRange(_ref) {
           },
           key: undefined
         });
-      }
-
-      if (durationModifier === DURATION_MODIFIERS.LAST) {
+      } else if (durationModifier === DURATION_MODIFIERS.LAST) {
         rangeStart = START_OF[duration.type](ADD[duration.type](date, -Number(future)));
         newOffset = DIFFERENCE[duration.type](NOW, rangeStart);
-        offsetToTimestamp = _objectSpread({}, currentRange, {
+        offsetToTimestamp = _objectSpread({
+          future: false
+        }, currentRange, {
           duration: {
             type: duration.type,
             value: duration.value
@@ -81,7 +115,7 @@ var TimestampRange = function TimestampRange(_ref) {
         });
       }
 
-      offsetToTimestamp && handleChange(offsetToTimestamp);
+      offsetToTimestamp && handleChange(offsetToTimestamp); // FIXME
     }
   };
 
@@ -106,7 +140,7 @@ var TimestampRange = function TimestampRange(_ref) {
         onTimestampChange && onTimestampChange(date);
       },
       onClear: function onClear() {
-        onTimestampChange && onTimestampChange(undefined);
+        onTimestampChange && onTimestampChange(getValueOnReset()); // FIXME cannot reselect date after clearing
       },
       dropdownProps: {
         getPopupContainer: function getPopupContainer(node) {
@@ -142,7 +176,7 @@ var TimestampRange = function TimestampRange(_ref) {
     unit: durationUnit,
     durationModifier: durationModifier,
     onDurationModifierChange: function onDurationModifierChange(modifier) {
-      setDurationModifier(modifier);
+      setDurationModifier(modifier); // FIXME
     },
     texts: texts
   }));

package/dist/RelativeRangePicker/Elements/TimestampRange/TimestampRange.types.d.ts

@@ -1,6 +1,6 @@
 import { RelativeDateRange } from '../../../date.types';
 import { RelativeMode, Texts } from '../../../DateRangePicker.types';
-export declare type Props = {
+export declare type TimestampRangeProps = {
     currentRange: RelativeDateRange;
     currentGroup: string | null;
     handleChange: (value: RelativeDateRange) => void;
@@ -8,4 +8,9 @@ export declare type Props = {
     onTimestampChange?: (timestamp: Date | undefined) => void;
     timestamp?: Date | undefined;
     texts: Texts;
+    getValueOnReset?: (value?: Date) => RelativeDateRange | Date | undefined;
 };
+/**
+ * @deprecated
+ */
+export declare type Props = TimestampRangeProps;

package/dist/RelativeRangePicker/RelativeRangePicker.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { WrappedComponentProps } from 'react-intl';
-import { Props } from './RelativeRangePicker.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<Props & WrappedComponentProps<"intl">, "onChange" | "texts" | "value" | "since" | "rangeUnits" | "ranges" | "relativeModes" | "showCustomRange" | "future" | "past"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<import("./RelativeRangePicker.types").RelativeRangePickerProps & WrappedComponentProps<"intl">, "onChange" | "texts" | "value" | "since" | "rangeUnits" | "ranges" | "relativeModes" | "showCustomRange" | "valueTransformer" | "future" | "past"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+    WrappedComponent: React.ComponentType<import("./RelativeRangePicker.types").RelativeRangePickerProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/RelativeRangePicker/RelativeRangePicker.js

@@ -60,14 +60,15 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
           currentGroup = _this$state.currentGroup,
           currentRange = _this$state.currentRange;
 
-      if (currentGroup !== RANGES_MODE.SINCE) {
-        var sourceRange = getDefaultCustomRange(currentGroup);
-        onChange(_objectSpread({}, sourceRange, {
+      if (currentGroup === RANGES_MODE.SINCE) {
+        onChange(_objectSpread({}, currentRange, {
+          type: 'RELATIVE',
           key: undefined,
           translationKey: CUSTOM_RANGE_KEY
-        }));
+        })); // FIXME: make currentGroup rely on value rather than state
       } else {
-        onChange(_objectSpread({}, currentRange, {
+        var sourceRange = getDefaultCustomRange(currentGroup);
+        onChange(_objectSpread({}, sourceRange, {
           key: undefined,
           translationKey: CUSTOM_RANGE_KEY
         }));
@@ -77,11 +78,13 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "onChange", function (value) {
       var currentGroup = _this.state.currentGroup;
       var onChange = _this.props.onChange;
-      var isFuture = value.timestamp && fnsIsAfter(value.timestamp, new Date());
+      var isSince = currentGroup === RANGES_MODE.SINCE;
+      var isFuture = isSince ? value.future : value.timestamp && fnsIsAfter(value.timestamp, new Date()); // FIXME since past/future
 
       var changes = _objectSpread({}, setFuture(currentGroup === RANGES_MODE.FUTURE || isFuture, value), {
-        key: undefined
-      });
+        type: 'RELATIVE'
+      }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
       onChange(normalizeRange(changes));
     });
@@ -106,12 +109,14 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       var currentRange = _this.state.currentRange;
       var _this$props2 = _this.props,
           onChange = _this$props2.onChange,
-          texts = _this$props2.texts;
+          texts = _this$props2.texts,
+          valueTransformer = _this$props2.valueTransformer;
       return /*#__PURE__*/React.createElement(RangeDropdown, {
         ranges: ranges,
         currentRange: currentRange,
         texts: texts,
-        onChange: onChange
+        onChange: onChange,
+        valueTransformer: valueTransformer
       });
     });
 
@@ -233,7 +238,10 @@ _defineProperty(RelativeRangePicker, "defaultProps", {
   ranges: [].concat(CONST.RELATIVE_PRESETS, CONST.ABSOLUTE_PRESETS),
   relativeModes: ['PAST', 'FUTURE'],
   rangeUnits: CONST.RELATIVE_UNITS,
-  showCustomRange: true
+  showCustomRange: true,
+  valueTransformer: function valueTransformer(e) {
+    return e;
+  }
 });
 
 export default injectIntl(RelativeRangePicker);

package/dist/RelativeRangePicker/RelativeRangePicker.types.d.ts

@@ -1,7 +1,7 @@
 import { IntlShape } from 'react-intl';
 import { DateRange, RelativeDateRange } from '../date.types';
-import { Props as DateRangePickerProps, RelativeMode, Texts } from '../DateRangePicker.types';
-export declare type Props = {
+import { DateRangePickerProps, RelativeMode, Texts } from '../DateRangePicker.types';
+export declare type RelativeRangePickerProps = {
     ranges?: DateRange[];
     value: DateRange;
     onChange: (range: DateRange | undefined) => void;
@@ -13,6 +13,7 @@ export declare type Props = {
     relativeModes?: RelativeMode[];
     rangeUnits: DateRangePickerProps['rangeUnits'];
     showCustomRange?: boolean;
+    valueTransformer?: (e: RelativeDateRange | any) => RelativeDateRange | any;
 };
 export declare type State = {
     currentGroup: RelativeMode | null;
@@ -23,3 +24,7 @@ export declare type State = {
     groupedRanges?: DateRange[];
     sinceTimestamp?: Date | undefined;
 };
+/**
+ * @deprecated use `RelativeRangePickerProps`
+ */
+export declare type Props = RelativeRangePickerProps;

package/dist/constants.d.ts

@@ -2,7 +2,7 @@ import { AbsoluteDateRange, RelativeDateRange, RelativeUnits, RangeKey } from '.
 export declare const SECONDS = "SECONDS";
 export declare const MINUTES = "MINUTES";
 export declare const HOURS = "HOURS";
-export declare const DAYS = "DAYS";
+export declare const DAYS: RelativeUnits;
 export declare const WEEKS = "WEEKS";
 export declare const MONTHS = "MONTHS";
 export declare const YEARS = "YEARS";
@@ -15,8 +15,8 @@ export declare const ALL_TIME: RangeKey;
 export declare const range: (start: number, end: number) => number[];
 export declare const CUSTOM_RANGE_KEY = "custom";
 export declare const DURATION_MODIFIERS: {
-    LAST: string;
-    NEXT: string;
+    readonly LAST: "timestampLast";
+    readonly NEXT: "timestampNext";
 };
 export declare const RELATIVE_PRESETS: RelativeDateRange[];
 export declare const ABSOLUTE_PRESETS: AbsoluteDateRange[];

package/dist/date.types.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export declare type RelativeUnits = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS';
+import type startOf from './dateUtils/startOf';
+import type endOf from './dateUtils/endOf';
+export declare type RelativeUnits = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS' | 'SINCE' | keyof typeof startOf | keyof typeof endOf;
 export declare type RangeKey = 'TODAY' | 'YESTERDAY' | 'TOMORROW' | 'LAST_WEEK' | 'THIS_WEEK' | 'NEXT_WEEK' | 'LAST_7_DAYS' | 'NEXT_7_DAYS' | 'LAST_MONTH' | 'THIS_MONTH' | 'NEXT_MONTH' | 'LAST_3_MONTHS' | 'NEXT_3_MONTHS' | 'LAST_6_MONTHS' | 'NEXT_6_MONTHS' | 'LAST_YEAR' | 'NEXT_YEAR' | 'ALL_TIME';
 export declare type NullableDateLimit = null | string | Date;
 export interface DateFilter {

package/dist/utils.d.ts

@@ -1,6 +1,9 @@
 import { IntlShape } from 'react-intl';
 import { DateRange } from './date.types';
+import START_OF from './dateUtils/startOf';
+import END_OF from './dateUtils/endOf';
 import { Texts } from './DateRangePicker.types';
+export { START_OF, END_OF };
 export declare const normalizeRange: (range: DateRange) => DateRange;
 export declare const getDefaultTexts: (intl: IntlShape, disableDefault?: boolean | undefined, texts?: Partial<Texts> | undefined) => Texts;
 export declare const DEFAULT_RANGE: DateRange;

package/dist/utils.js

@@ -12,12 +12,12 @@ import { ABSOLUTE, CUSTOM_RANGE_KEY, RELATIVE } from './constants';
 import ADD from './dateUtils/add';
 import START_OF from './dateUtils/startOf';
 import END_OF from './dateUtils/endOf';
+export { START_OF, END_OF };
 export var normalizeRange = function normalizeRange(range) {
   if (!range || !range.type) {
     return {
       type: ABSOLUTE,
-      from: undefined,
-      to: undefined
+      from: undefined
     };
   }
 
@@ -29,7 +29,15 @@ export var normalizeRange = function normalizeRange(range) {
     var left;
     var right;
 
-    if (future) {
+    if ((offset == null ? void 0 : offset.type) === 'SINCE') {
+      if (future) {
+        left = offset.value;
+        right = ADD[duration.type](offset.value, duration.value);
+      } else {
+        left = ADD[duration.type](offset.value, -duration.value);
+        right = offset.value;
+      }
+    } else if (future) {
       left = ADD[offset.type](START_OF[offset.type](now), offset.value);
       right = ADD[duration.type](END_OF[duration.type](left), duration.value - 1);
     } else {
@@ -53,11 +61,12 @@ export var normalizeRange = function normalizeRange(range) {
     return normalizedRange;
   }
 
+  var keys = Object.keys(range);
   var from = range.from ? legacyParse(range.from) : undefined;
   var to = range.to ? legacyParse(range.to) : undefined;
 
   var dropNonAbsolute = function dropNonAbsolute(dateRange) {
-    return omit(dateRange, ['offset', 'duration']);
+    return omit(dateRange, ['offset', 'duration', 'future']);
   };
 
   var absoluteRange = _objectSpread({}, dropNonAbsolute(range), {
@@ -65,6 +74,10 @@ export var normalizeRange = function normalizeRange(range) {
     to: to
   });
 
+  if (!keys.includes('from') && !keys.includes('to')) {
+    absoluteRange.translationKey = 'allTime';
+  }
+
   return absoluteRange;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.17.3",
+  "version": "0.17.4",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "41d417bdee4ee513979582394f0b4cdcdb2fed2f"
+  "gitHead": "664dece0bd2c724cd411f46b35503fcb409b741e"
 }