@synerise/ds-date-range-picker 0.12.15 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.12.15...@synerise/ds-date-range-picker@0.13.0) (2022-06-23)
+
+
+### Bug Fixes
+
+* **date-range-picker:** applying primary class to selected buttons ([cf1fd45](https://github.com/Synerise/synerise-design/commit/cf1fd45a65dd2bf724c7907f203d04e06ac2c856))
+* **date-range-picker:** babel array iteration fix ([15a0375](https://github.com/Synerise/synerise-design/commit/15a0375f7bdafa2856cad0f14616b60f9d1ad598))
+* **date-range-picker:** default relative custom date-range to 30 days ([a159680](https://github.com/Synerise/synerise-design/commit/a1596807d31f53739304bbc7d793a0bd911e5ed1))
+* **date-range-picker:** fix switching mode (componentDidUpdate) ([6d59489](https://github.com/Synerise/synerise-design/commit/6d594899bf338930951da5ff78123402491d29e1))
+* **date-range-picker:** handle custom relative date range ([d456923](https://github.com/Synerise/synerise-design/commit/d456923259ecd75246897665e5de4f07d9a689b5))
+* **date-range-picker:** handle Invalid Time ([fc52f67](https://github.com/Synerise/synerise-design/commit/fc52f67ef90297ea39e986ce928aaaab277c3e51))
+* **date-range-picker:** interaction: switch modes, onChange value type ([a3e1329](https://github.com/Synerise/synerise-design/commit/a3e132927b42934d5a9ea61712b855d38f2e6561))
+* **date-range-picker:** lifetime date-range-picker story ([f3cb1a6](https://github.com/Synerise/synerise-design/commit/f3cb1a66d3619da42226baebd56d66610964db7c))
+* **date-range-picker:** make sure lodash.range is an array ([f51b1c4](https://github.com/Synerise/synerise-design/commit/f51b1c4fb8aae85d73257e6631595a2828dba0cc))
+* **date-range-picker:** render popover in arrow-color test ([68090f5](https://github.com/Synerise/synerise-design/commit/68090f575da90ef0d788321b1c5a1b83cd4170cd))
+* **date-range-picker:** show last/next in relative-date-filter addon ([6e409cf](https://github.com/Synerise/synerise-design/commit/6e409cff94058181bc41c74d900d6f6794fd4cbc))
+* **date-range-picker:** show saving filters if passed proper props ([2e870b2](https://github.com/Synerise/synerise-design/commit/2e870b2eefbea9b7d66dbcb887e54ae291f1c619))
+
+
+### Features
+
+* **date-range-picker:** ALL_TIME as a const, expose CONST ([7d3d98e](https://github.com/Synerise/synerise-design/commit/7d3d98e9711141079c6f1e0f6101e559c5ef6faf))
+* **date-range-picker:** include Lifetime option in stories by default ([e84ae70](https://github.com/Synerise/synerise-design/commit/e84ae709e7c74e25d23c12ff41cb7c0daf8f858e))
+
+
+
+
+
 ## [0.12.15](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.12.14...@synerise/ds-date-range-picker@0.12.15) (2022-06-15)
 
 

package/dist/Footer/Footer.js

@@ -12,6 +12,7 @@ import Icon, { ArrowRightS } from '@synerise/ds-icon';
 import * as S from './Footer.styles';
 import fnsFormat from '../dateUtils/format';
 import getDateFromString from '../dateUtils/getDateFromString';
+import * as CONST from '../constants';
 
 var Footer = function Footer(_ref) {
   var canApply = _ref.canApply,
@@ -30,6 +31,14 @@ 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) {
+      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);
+    }
+
     return /*#__PURE__*/React.createElement(S.ChosenRange, {
       className: "ds-date-range-picker-value"
     }, !!value && !!value.from ? fnsFormat(getDateFromString(value == null ? void 0 : value.from), footerFormat, intl.locale) : texts.startDatePlaceholder, /*#__PURE__*/React.createElement(Icon, {

package/dist/RangeFilter/RangeFilter.js

@@ -130,6 +130,7 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
     var _this$props3 = this.props,
         intl = _this$props3.intl,
         savedFilters = _this$props3.savedFilters,
+        onFilterSave = _this$props3.onFilterSave,
         texts = _this$props3.texts,
         hideFooter = _this$props3.hideFooter,
         valueSelectionModes = _this$props3.valueSelectionModes;
@@ -171,7 +172,7 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
       onRangeCopy: this.handleRangeCopy,
       rangeClipboard: rangeClipboard,
       valueSelectionModes: valueSelectionModes
-    }))), !hideFooter && /*#__PURE__*/React.createElement(S.Footer, null, /*#__PURE__*/React.createElement(SaveFilterForm, {
+    }))), !hideFooter && /*#__PURE__*/React.createElement(S.Footer, null, savedFilters && onFilterSave && /*#__PURE__*/React.createElement(SaveFilterForm, {
       onFilterSave: this.handleFilterSave
     }), /*#__PURE__*/React.createElement(S.FooterSeparator, null), /*#__PURE__*/React.createElement(Button, {
       type: "ghost",

package/dist/RangePicker/RangePicker.js

@@ -11,6 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { DateUtils } from 'react-day-picker';
 import fnsIsSameDay from 'date-fns/isSameDay';
+import fnsIsValid from 'date-fns/isValid';
 import MonthPicker from '@synerise/ds-date-picker/dist/Elements/MonthPicker/MonthPicker';
 import MomentLocaleUtils from 'react-day-picker/moment';
 import TimePicker from '@synerise/ds-date-picker/dist/Elements/TimePicker/TimePicker';
@@ -247,10 +248,13 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
       var from = value.from,
           to = value.to,
           type = value.type;
-      var modifiers = getModifiers(from, to, enteredTo);
-      var selectedDays = [from, {
+      var modifiers = getModifiers(fnsIsValid(from) ? from : null, fnsIsValid(to) ? to : null, enteredTo);
+      var selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [from, {
         from: from,
         to: to
+      }] : [undefined, {
+        from: undefined,
+        to: undefined
       }];
       var parsedLeft = legacyParse(left.month);
       var parsedRight = legacyParse(right.month);

package/dist/RangePicker/utils.js

@@ -2,6 +2,7 @@ import fnsIsWithinRange from 'date-fns/isWithinInterval';
 import { legacyParse } from '@date-fns/upgrade/v2';
 import fnsMin from 'date-fns/min';
 import fnsMax from 'date-fns/max';
+import fnsIsValid from 'date-fns/isValid';
 import { fnsEndOfDay, fnsIsSameMonth, fnsStartOfDay, fnsStartOfMonth } from '../fns';
 import { TIME_OPTIONS } from '../constants';
 import SET from '../dateUtils/set';
@@ -37,8 +38,8 @@ export var getDisabledTimeOptions = function getDisabledTimeOptions(day, granula
   });
 };
 export var getSidesState = function getSidesState(value, forceAdjacentMonths) {
-  var from = fnsStartOfMonth(value.from ? legacyParse(value.from) : new Date());
-  var to = fnsStartOfMonth(value.to ? legacyParse(value.to) : new Date());
+  var from = fnsStartOfMonth(fnsIsValid(value.from) ? legacyParse(value.from) : new Date());
+  var to = fnsStartOfMonth(fnsIsValid(value.to) ? legacyParse(value.to) : new Date());
 
   if (fnsIsSameMonth(from, to)) {
     to = ADD.MONTHS(to, 1);
@@ -47,12 +48,12 @@ export var getSidesState = function getSidesState(value, forceAdjacentMonths) {
   return {
     left: {
       month: from,
-      monthTitle: format(legacyParse(from), 'MMM yyyy'),
+      monthTitle: fnsIsValid(from) ? format(legacyParse(from), 'MMM yyyy') : '',
       mode: 'date'
     },
     right: {
       month: forceAdjacentMonths ? ADD.MONTHS(from, 1) : to,
-      monthTitle: format(legacyParse(to), 'MMM yyyy'),
+      monthTitle: fnsIsValid(to) ? format(legacyParse(to), 'MMM yyyy') : '',
       mode: 'date'
     }
   };

package/dist/RangePickerInput/RangePickerInput.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Icon, { ArrowRightS, CalendarM, Close3S } from '@synerise/ds-icon';
+import fnsIsValid from 'date-fns/isValid';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 import Tooltip from '@synerise/ds-tooltip'; // eslint-disable-next-line import/no-named-default
 
@@ -45,7 +46,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
     onClick && onClick(e);
   }, [onClick]);
   var getText = React.useCallback(function (dateToDisplay) {
-    if (!dateToDisplay) return '';
+    if (!dateToDisplay || !fnsIsValid(dateToDisplay)) return '';
     var dateValue = dateToDisplay;
     if (typeof dateToDisplay === 'string') dateValue = new Date(dateToDisplay);
     return fnsFormat(dateValue, format || showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');

package/dist/RawDateRangePicker.d.ts

@@ -1,5 +1,29 @@
 import * as React from 'react';
-import { Props } from './DateRangePicker.types';
+import { Props, State, AddonType } from './DateRangePicker.types';
+import { DateRange } from './date.types';
+import { FilterDefinition, FilterValue } from './RangeFilter/RangeFilter.types';
+export declare class RawDateRangePicker extends React.PureComponent<Props, State> {
+    static defaultProps: {
+        ranges: DateRange[];
+        relativePast: boolean;
+        showRelativePicker: boolean;
+        validate: () => {
+            valid: boolean;
+        };
+    };
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Readonly<Props>): void;
+    handleFilterCancel: () => void;
+    handleFilterApply: (filter?: FilterValue<FilterDefinition> | undefined) => void;
+    handleRangeChange: (range?: import("./date.types").AbsoluteDateRange | import("./date.types").RelativeDateRange | undefined) => void;
+    handleApply: () => void;
+    handleModalOpenClick: () => void;
+    handleRemoveFilterClick: () => void;
+    handleSwitchMode: () => void;
+    handleAddonCollapse: (addonKey: string, expanded: boolean) => void;
+    getAddons: () => AddonType[];
+    render(): JSX.Element;
+}
 declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "arrowColor"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {

package/dist/RawDateRangePicker.js

@@ -11,9 +11,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import * as React from 'react';
 import { omitBy, isUndefined } from 'lodash';
 import { injectIntl } from 'react-intl';
+import fnsIsValid from 'date-fns/isValid';
 import { Container, Separator, Addon } from './DateRangePicker.styles';
 import RangePicker from './RangePicker/RangePicker';
-import { RELATIVE, ABSOLUTE, MODES, RELATIVE_PRESETS } from './constants';
+import { RELATIVE, ABSOLUTE, MODES, RELATIVE_PRESETS, ABSOLUTE_PRESETS } from './constants';
 import relativeToAbsolute from './dateUtils/relativeToAbsolute';
 import AddonCollapse from './AddonCollapse/AddonCollapse';
 import RelativeRangePicker from './RelativeRangePicker/RelativeRangePicker';
@@ -21,8 +22,7 @@ import Footer from './Footer/Footer';
 import { normalizeRange } from './utils';
 import RangeFilter from './RangeFilter/RangeFilter';
 import RangeFilterStatus from './RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus';
-
-var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
+export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(RawDateRangePicker, _React$PureComponent);
 
   function RawDateRangePicker(props) {
@@ -52,12 +52,25 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
+      if (range.from && !fnsIsValid(range == null ? void 0 : range.from)) {
+        return;
+      }
+
       var onValueChange = _this.props.onValueChange;
-      var value = _this.state.value;
+      var _this$state = _this.state,
+          value = _this$state.value,
+          mode = _this$state.mode;
       var newValue = normalizeRange(_objectSpread({}, range, {
         filter: value.filter
       }));
 
+      if (newValue.type === 'RELATIVE' && mode === MODES.TIME) {
+        // clicked on RangeButtons and was selecting time
+        _this.setState({
+          mode: MODES.DATE
+        });
+      }
+
       _this.setState({
         value: _objectSpread({}, newValue, {
           key: range == null ? void 0 : range.key,
@@ -130,9 +143,9 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
           intl = _this$props2.intl,
           rangeUnits = _this$props2.rangeUnits,
           showCustomRange = _this$props2.showCustomRange;
-      var _this$state = _this.state,
-          value = _this$state.value,
-          visibleAddonKey = _this$state.visibleAddonKey;
+      var _this$state2 = _this.state,
+          value = _this$state2.value,
+          visibleAddonKey = _this$state2.visibleAddonKey;
       var addons = [];
 
       if (showRelativePicker && !!relativeModes && (relativeModes == null ? void 0 : relativeModes.length) > 0) {
@@ -207,12 +220,6 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
     if (prevProps.value !== value && !value) {
       this.handleRangeChange(value);
     }
-
-    var mode = this.state.mode;
-
-    if (!(value != null && value.to) && !(value != null && value.from) && mode !== MODES.DATE) {
-      this.handleSwitchMode();
-    }
   };
 
   _proto.render = function render() {
@@ -226,9 +233,9 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         savedFilters = _this$props3.savedFilters,
         onFilterSave = _this$props3.onFilterSave,
         intl = _this$props3.intl;
-    var _this$state2 = this.state,
-        value = _this$state2.value,
-        mode = _this$state2.mode;
+    var _this$state3 = this.state,
+        value = _this$state3.value,
+        mode = _this$state3.mode;
     var from = value.from,
         to = value.to,
         key = value.key;
@@ -283,9 +290,8 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
 }(React.PureComponent); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 
-
 _defineProperty(RawDateRangePicker, "defaultProps", {
-  ranges: RELATIVE_PRESETS,
+  ranges: [].concat(RELATIVE_PRESETS, ABSOLUTE_PRESETS),
   relativePast: true,
   showRelativePicker: true,
   validate: function validate() {

package/dist/RelativeRangePicker/Elements/CustomRangeForm/DurationField/DurationField.js

@@ -5,11 +5,13 @@ import set from 'ramda/src/set';
 import lensPath from 'ramda/src/lensPath';
 import * as S from '../../../RelativeRangePicker.styles';
 import * as CONST from '../../../../constants';
+import { RANGES_MODE } from '../../../utils';
 export var setDurationType = set(lensPath(['duration', 'type']));
 var SELECT_DROPDOWN_OFFSET = -4;
 
 var DurationField = function DurationField(_ref) {
-  var currentRange = _ref.currentRange,
+  var currentGroup = _ref.currentGroup,
+      currentRange = _ref.currentRange,
       handleChange = _ref.handleChange,
       handleDurationValueChange = _ref.handleDurationValueChange,
       rangeUnits = _ref.rangeUnits,
@@ -20,14 +22,14 @@ var DurationField = function DurationField(_ref) {
       handleDurationValueChange(1);
     }
   }, [duration, handleDurationValueChange]);
-  return /*#__PURE__*/React.createElement(S.InputSelectGroup, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Title, null, currentGroup === RANGES_MODE.PAST ? texts.last : texts.next), /*#__PURE__*/React.createElement(S.InputSelectGroup, {
     compact: true
   }, /*#__PURE__*/React.createElement(InputNumber, {
     min: 1,
     max: CONST.RELATIVE_DURATION_MAX,
     precision: 0,
     step: 1,
-    value: duration.value,
+    value: duration == null ? void 0 : duration.value,
     onBlur: function onBlur(_ref2) {
       var value = _ref2.target.value;
       !value && handleDurationValueChange(1);
@@ -35,7 +37,7 @@ var DurationField = function DurationField(_ref) {
     onChange: handleDurationValueChange,
     raw: true
   }), /*#__PURE__*/React.createElement(Select, {
-    value: duration.type,
+    value: duration == null ? void 0 : duration.type,
     onChange: function onChange(type) {
       return handleChange(setDurationType(type, currentRange));
     },
@@ -51,7 +53,7 @@ var DurationField = function DurationField(_ref) {
       key: type,
       value: type
     }, texts[type.toLowerCase()]);
-  })));
+  }))));
 };
 
 export default DurationField;

package/dist/RelativeRangePicker/Elements/CustomRangeForm/OffsetField/OffsetField.js

@@ -27,14 +27,14 @@ var OffsetField = function OffsetField(_ref) {
     max: CONST.RELATIVE_OFFSET_MAX,
     precision: 0,
     step: 1,
-    value: offset.value,
+    value: offset == null ? void 0 : offset.value,
     onBlur: function onBlur(_ref2) {
       var value = _ref2.target.value;
       !value && handleOffsetValueChange(0);
     },
     onChange: handleOffsetValueChange
   }), /*#__PURE__*/React.createElement(Select, {
-    value: offset.type,
+    value: offset == null ? void 0 : offset.type,
     onChange: function onChange(type) {
       return handleChange(setOffsetType(type, currentRange));
     },

package/dist/RelativeRangePicker/Elements/ModeDropdown/ModeDropdown.js

@@ -59,6 +59,7 @@ var ModeDrop = function ModeDrop(_ref) {
     },
     disabled: !modes || !(modes != null && modes.length) || modes.length === 1
   }, !!currentGroup && /*#__PURE__*/React.createElement(Icon, {
+    key: currentGroup,
     component: [RANGES_ICON[currentGroup]]
   })), overlay);
 };

package/dist/RelativeRangePicker/Elements/RangeButtons/RangeButtons.js

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import * as S from '../../RelativeRangePicker.styles';
-import * as CONST from '../../../constants';
-import { isAbsolute } from '../../utils';
 
 var RangeButtons = function RangeButtons(_ref) {
   var ranges = _ref.ranges,
       currentRange = _ref.currentRange,
-      value = _ref.value,
       texts = _ref.texts,
       onChange = _ref.onChange;
   return /*#__PURE__*/React.createElement(React.Fragment, null, ranges.map(function (range) {
@@ -15,7 +12,7 @@ var RangeButtons = function RangeButtons(_ref) {
       onClick: function onClick() {
         onChange && onChange(range);
       },
-      type: currentRange && currentRange.key === range.key && value.type === CONST.RELATIVE || isAbsolute(currentRange) && range.key !== 'ALL_TIME' ? 'primary' : 'tertiary'
+      type: currentRange && currentRange.key === range.key ? 'primary' : 'tertiary'
     }, range.translationKey ? texts[range.translationKey] : texts == null ? void 0 : texts.custom);
   }));
 };

package/dist/RelativeRangePicker/RelativeRangePicker.js

@@ -177,7 +177,7 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         past = nextProps.past,
         relativeModes = nextProps.relativeModes;
     var state = prevState;
-    var currentRange = value && value.type === CONST.RELATIVE ? getRelativePresetForRange(value) : DEFAULT_RANGE;
+    var currentRange = getRelativePresetForRange(value);
     state.currentRange = currentRange;
     state.groupedRanges = ranges;
 
@@ -215,7 +215,7 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         groupedRanges = _this$state3.groupedRanges,
         currentGroup = _this$state3.currentGroup,
         currentRange = _this$state3.currentRange;
-    var isCustomValue = !(value != null && value.key) || !(currentRange != null && currentRange.key);
+    var isCustomValue = currentRange.type === 'RELATIVE' && (currentRange.key === 'CUSTOM' || !(value != null && value.key) || !(currentRange != null && currentRange.key));
     var visibleRanges = groupedRanges ? groupedRanges.slice(0, 3) : [];
     var hiddenRanges = groupedRanges ? groupedRanges.slice(3) : [];
     if (!currentGroup) return null;

package/dist/RelativeRangePicker/utils.js

@@ -34,7 +34,7 @@ export var getDefaultCustomRange = function getDefaultCustomRange(currentGroup)
     },
     duration: {
       type: 'DAYS',
-      value: 0
+      value: 30
     }
   };
 };

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-import { AbsoluteDateRange, RelativeDateRange, RelativeUnits } from './date.types';
+import { AbsoluteDateRange, RelativeDateRange, RelativeUnits, RangeKey } from './date.types';
 export declare const SECONDS = "SECONDS";
 export declare const MINUTES = "MINUTES";
 export declare const HOURS = "HOURS";
@@ -11,6 +11,7 @@ export declare const RELATIVE = "RELATIVE";
 export declare const RELATIVE_OFFSET_MAX = 999999;
 export declare const RELATIVE_DURATION_MAX = 999999;
 export declare const RELATIVE_UNITS: RelativeUnits[];
+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: {

package/dist/constants.js

@@ -10,13 +10,14 @@ export var RELATIVE = 'RELATIVE';
 export var RELATIVE_OFFSET_MAX = 999999;
 export var RELATIVE_DURATION_MAX = 999999;
 export var RELATIVE_UNITS = [SECONDS, MINUTES, HOURS, DAYS, WEEKS, MONTHS, YEARS];
+export var ALL_TIME = 'ALL_TIME';
 export var range = function range(start, end) {
   if (end <= start) {
     return [];
   }
 
   var size = end - start;
-  return [].concat(Array(size).keys()).map(function (i) {
+  return Array.from(Array(size).keys()).map(function (i) {
     return i + start;
   });
 };
@@ -282,7 +283,7 @@ export var RELATIVE_PRESETS = [{
   }
 }];
 export var ABSOLUTE_PRESETS = [{
-  key: 'ALL_TIME',
+  key: ALL_TIME,
   translationKey: 'allTime',
   type: ABSOLUTE,
   future: false

package/dist/date.types.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export declare type RelativeUnits = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS';
+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 {
     key?: string;
@@ -16,7 +17,7 @@ export interface DateFilter {
     };
 }
 export interface DateRangeBase {
-    key?: string;
+    key?: RangeKey | string;
     future?: boolean;
     filter?: DateFilter;
     translationKey?: string;

package/dist/dateUtils/format.js

@@ -1,4 +1,5 @@
 import fnsFormat from 'date-fns/format';
+import fnsIsValid from 'date-fns/isValid';
 import { pl, es, enGB as en } from 'date-fns/locale';
 import { legacyParse, convertTokens } from '@date-fns/upgrade/v2';
 var locales = {
@@ -13,6 +14,10 @@ var format = function format(date, formatStr, locale) {
     locale = defaultLocale;
   }
 
+  if (!fnsIsValid(date)) {
+    return '';
+  }
+
   return fnsFormat(legacyParse(date), convertTokens(formatStr), {
     locale: locales[locale.substring(0, 2)]
   });

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export { default as DailyDateFilter } from './RangeFilter/Filters/new/Daily/Daily';
 export { default as WeeklyDateFilter } from './RangeFilter/Filters/new/Weekly/Weekly';
 export { default as MonthlyDateFilter } from './RangeFilter/Filters/MonthlyFilter/MonthlyFilter';
+export { RawDateRangePicker } from './RawDateRangePicker';
+export * as CONST from './constants';
 export { default } from './DateRangePicker';

package/dist/index.js

@@ -1,4 +1,7 @@
 export { default as DailyDateFilter } from './RangeFilter/Filters/new/Daily/Daily';
 export { default as WeeklyDateFilter } from './RangeFilter/Filters/new/Weekly/Weekly';
 export { default as MonthlyDateFilter } from './RangeFilter/Filters/MonthlyFilter/MonthlyFilter';
+export { RawDateRangePicker } from './RawDateRangePicker';
+import * as _CONST from './constants';
+export { _CONST as CONST };
 export { default } from './DateRangePicker';

package/dist/utils.js

@@ -134,7 +134,7 @@ export var DEFAULT_RANGE = normalizeRange({
     type: 'DAYS'
   },
   duration: {
-    value: 1,
+    value: 30,
     type: 'DAYS'
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.12.15",
+  "version": "0.13.0",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
     "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-date-picker": "^0.6.19",
+    "@synerise/ds-date-picker": "^0.6.20",
     "@synerise/ds-icon": "^0.49.0",
     "@synerise/ds-manageable-list": "^0.23.14",
-    "@synerise/ds-time-picker": "^0.6.18",
+    "@synerise/ds-time-picker": "^0.6.19",
     "@synerise/ds-tooltip": "^0.11.9",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "d787395998e479858cb58f6d56555e4c51fe45d5"
+  "gitHead": "b2b8c9f85179763159e3c83801b568943f132741"
 }