@synerise/ds-date-range-picker 0.12.14 → 0.13.1

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.13.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.13.0...@synerise/ds-date-range-picker@0.13.1) (2022-06-29)
+
+**Note:** Version bump only for package @synerise/ds-date-range-picker
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* **date-range-picker:** add more options to set color arrow ([3890cd1](https://github.com/Synerise/synerise-design/commit/3890cd1dbd39b54fff07bb55ce962170affda984))
+* **date-range-picker:** add prop of arrow to set color when is footer ([19558d6](https://github.com/Synerise/synerise-design/commit/19558d678867db79aa26c71a92acf7cf8b1fc69f))
+* **date-range-picker:** fix arrow ([e56a188](https://github.com/Synerise/synerise-design/commit/e56a188357c897fcb444543f5f6212e1b270b8bc))
+* **date-range-picker:** fix color and add option to show difference ([41ba36d](https://github.com/Synerise/synerise-design/commit/41ba36dd64dc9927ea3e28bfab6e7ff0e56563fa))
+* **date-range-picker:** fix colors of arrow and test ([2aa2d73](https://github.com/Synerise/synerise-design/commit/2aa2d73c1975c1e5bc37347f02f3915be3d2f927))
+* **date-range-picker:** fix colors picking ([b5846eb](https://github.com/Synerise/synerise-design/commit/b5846eb1c7ceaaec9bd2a650a73da248a6cdf56f))
+* **date-range-picker:** fix documentation ([a0ef5e6](https://github.com/Synerise/synerise-design/commit/a0ef5e61d82af5082d36a4cabcb711a33dd55512))
+* **date-range-picker:** fix test ([fb64181](https://github.com/Synerise/synerise-design/commit/fb641811ef4af38f873f369b02c5b7b54f0d8697))
+* **date-range-picker:** fix test ([09ece1f](https://github.com/Synerise/synerise-design/commit/09ece1fc8194adf290c26026a6cda64e535fbdb5))
+* **date-range-picker:** update tests ([3024429](https://github.com/Synerise/synerise-design/commit/3024429050a48b17f1e96d25c8e1d99b37436923))
+
+
+
+
+
 ## [0.12.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.12.13...@synerise/ds-date-range-picker@0.12.14) (2022-05-13)
 
 

package/README.md

@@ -63,12 +63,14 @@ const value = {
  
 ### DateRange
 
-| Property | Description                                    | Type                                  | Default |
-| -------- | ---------------------------------------------- | ------------------------------------- | ------- |
-| from     | Start date                                     | Date / string                         | -       |
-| to       | End date                                       | Date / string                         | -       |
-| type     | String key for identifying the range type      | 'ABSOLUTE' / 'RELATIVE' / 'SINCE'     | -       |
-| duration | Duration of the relative range                 | {type: RelativeUnit, duration:number} | -       |
-| offset   | Offset of the relative range from today's date | {type: RelativeUnit, duration:number} | -       |
+| Property   | Description                                    | Type                                                                                                           | Default |
+| -----------| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------- |
+| from       | Start date                                     | Date / string                                                                                                  | -       |
+| to         | End date                                       | Date / string                                                                                                  | -       |
+| type       | String key for identifying the range type      | 'ABSOLUTE' / 'RELATIVE' / 'SINCE'                                                                              | -       |
+| duration   | Duration of the relative range                 | {type: RelativeUnit, duration:number}                                                                          | -       |
+| offset     | Offset of the relative range from today's date | {type: RelativeUnit, duration:number}                                                                          | -       |
+| arrowColor | Custom color arrow of popover when is footer   | {['bottomLeft' | 'topLeft' | 'anyOtherPlacement']: 'white' | 'grey' | anyPaletteColorToken}                    | -       |
+
 
 `RelativeUnit = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS'`

package/dist/DateRangePicker.js

@@ -8,7 +8,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import * as React from 'react';
 import { isEqual } from 'lodash';
-import { Popover } from 'antd';
 import "./style/index.css";
 import { useIntl } from 'react-intl';
 import RawDateRangePicker from './RawDateRangePicker';
@@ -25,6 +24,7 @@ var DateRangePicker = function DateRangePicker(props) {
       popoverTrigger = props.popoverTrigger,
       forceAdjacentMonths = props.forceAdjacentMonths,
       disableDefaultTexts = props.disableDefaultTexts,
+      arrowColor = props.arrowColor,
       _onVisibleChange = props.onVisibleChange,
       _props$popoverProps = props.popoverProps,
       popoverProps = _props$popoverProps === void 0 ? {} : _props$popoverProps;
@@ -71,7 +71,9 @@ var DateRangePicker = function DateRangePicker(props) {
     visible: false
   });
 
-  return /*#__PURE__*/React.createElement(S.PickerWrapper, null, /*#__PURE__*/React.createElement(Popover, _extends({
+  return /*#__PURE__*/React.createElement(S.PickerWrapper, {
+    arrowColor: arrowColor
+  }, /*#__PURE__*/React.createElement(S.PopoverWrapper, _extends({
     content: /*#__PURE__*/React.createElement(RawDateRangePicker, _extends({}, props, {
       showTime: showTime,
       onApply: onApplyCallback,

package/dist/DateRangePicker.styles.d.ts

@@ -1,9 +1,14 @@
+/// <reference types="react" />
+import { AdditionalMapper } from './DateRangePicker.types';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PopoverWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/popover").PopoverProps & import("react").RefAttributes<unknown>>, any, {}, never>;
 export declare const Addon: import("styled-components").StyledComponent<"div", any, {
     last?: boolean | undefined;
 }, never>;
-export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {
+    arrowColor?: AdditionalMapper | undefined;
+}, never>;
 export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {
     visible?: boolean | undefined;
 }, never>;

package/dist/DateRangePicker.styles.js

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Popover } from 'antd';
 export var Container = styled.div.withConfig({
   displayName: "DateRangePickerstyles__Container",
   componentId: "zmtbjf-0"
@@ -11,19 +12,55 @@ export var Separator = styled.div.withConfig({
 })(["margin:0;border-top:1px solid ", ";"], function (props) {
   return props.theme.palette['grey-200'];
 });
+export var PopoverWrapper = styled(Popover).withConfig({
+  displayName: "DateRangePickerstyles__PopoverWrapper",
+  componentId: "zmtbjf-2"
+})([""]);
 export var Addon = styled.div.withConfig({
   displayName: "DateRangePickerstyles__Addon",
-  componentId: "zmtbjf-2"
+  componentId: "zmtbjf-3"
 })(["", ""], function (props) {
   return !props.last && "border-bottom: 1px solid " + props.theme.palette['grey-200'] + ";";
 });
 export var PickerWrapper = styled.div.withConfig({
   displayName: "DateRangePickerstyles__PickerWrapper",
-  componentId: "zmtbjf-3"
-})(["position:relative;"]);
+  componentId: "zmtbjf-4"
+})(["position:relative;.ant-popover.ds-date-range-popover.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}"], function (props) {
+  var _props$theme$palette$, _props$arrowColor, _props$arrowColor2;
+
+  return props.arrowColor ? (_props$theme$palette$ = props.theme.palette[((_props$arrowColor = props.arrowColor) == null ? void 0 : _props$arrowColor.bottomLeft) + "-050"]) != null ? _props$theme$palette$ : (_props$arrowColor2 = props.arrowColor) == null ? void 0 : _props$arrowColor2.bottomLeft : props.theme.palette.white;
+}, function (props) {
+  var _props$theme$palette$2, _props$arrowColor3, _props$arrowColor4;
+
+  return props.arrowColor ? (_props$theme$palette$2 = props.theme.palette[((_props$arrowColor3 = props.arrowColor) == null ? void 0 : _props$arrowColor3.bottomRight) + "-050"]) != null ? _props$theme$palette$2 : (_props$arrowColor4 = props.arrowColor) == null ? void 0 : _props$arrowColor4.bottomRight : props.theme.palette.white;
+}, function (props) {
+  var _props$theme$palette$3, _props$arrowColor5, _props$arrowColor6;
+
+  return props.arrowColor ? (_props$theme$palette$3 = props.theme.palette[((_props$arrowColor5 = props.arrowColor) == null ? void 0 : _props$arrowColor5.rightTop) + "-050"]) != null ? _props$theme$palette$3 : (_props$arrowColor6 = props.arrowColor) == null ? void 0 : _props$arrowColor6.rightTop : props.theme.palette.white;
+}, function (props) {
+  var _props$theme$palette$4, _props$arrowColor7, _props$arrowColor8;
+
+  return props.arrowColor ? (_props$theme$palette$4 = props.theme.palette[((_props$arrowColor7 = props.arrowColor) == null ? void 0 : _props$arrowColor7.rightBottom) + "-050"]) != null ? _props$theme$palette$4 : (_props$arrowColor8 = props.arrowColor) == null ? void 0 : _props$arrowColor8.rightBottom : props.theme.palette.white;
+}, function (props) {
+  var _props$theme$palette$5, _props$arrowColor9, _props$arrowColor10;
+
+  return props.arrowColor ? (_props$theme$palette$5 = props.theme.palette[((_props$arrowColor9 = props.arrowColor) == null ? void 0 : _props$arrowColor9.leftBottom) + "-050"]) != null ? _props$theme$palette$5 : (_props$arrowColor10 = props.arrowColor) == null ? void 0 : _props$arrowColor10.leftBottom : props.theme.palette.white;
+}, function (props) {
+  var _props$theme$palette$6, _props$arrowColor11, _props$arrowColor12;
+
+  return props.arrowColor ? (_props$theme$palette$6 = props.theme.palette[((_props$arrowColor11 = props.arrowColor) == null ? void 0 : _props$arrowColor11.leftTop) + "-050"]) != null ? _props$theme$palette$6 : (_props$arrowColor12 = props.arrowColor) == null ? void 0 : _props$arrowColor12.leftTop : props.theme.palette.white;
+}, function (props) {
+  var _props$theme$palette$7, _props$arrowColor13, _props$arrowColor14;
+
+  return props.arrowColor ? (_props$theme$palette$7 = props.theme.palette[((_props$arrowColor13 = props.arrowColor) == null ? void 0 : _props$arrowColor13.topRight) + "-050"]) != null ? _props$theme$palette$7 : (_props$arrowColor14 = props.arrowColor) == null ? void 0 : _props$arrowColor14.topRight : props.theme.palette['grey-050'];
+}, function (props) {
+  var _props$theme$palette$8, _props$arrowColor15, _props$arrowColor16;
+
+  return props.arrowColor ? (_props$theme$palette$8 = props.theme.palette[((_props$arrowColor15 = props.arrowColor) == null ? void 0 : _props$arrowColor15.topLeft) + "-050"]) != null ? _props$theme$palette$8 : (_props$arrowColor16 = props.arrowColor) == null ? void 0 : _props$arrowColor16.topLeft : props.theme.palette['grey-050'];
+});
 export var OverlayContainer = styled.div.withConfig({
   displayName: "DateRangePickerstyles__OverlayContainer",
-  componentId: "zmtbjf-4"
+  componentId: "zmtbjf-5"
 })(["display:", ";"], function (props) {
   return props.visible ? 'flex' : 'none';
 });

package/dist/DateRangePicker.types.d.ts

@@ -4,6 +4,17 @@ import { PopoverProps } from 'antd/lib/popover';
 import { DateFilter, DateRange, RelativeUnits } from './date.types';
 import { FilterDefinition } from './RangeFilter/RangeFilter.types';
 import { SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
+export declare type CustomColorArrow = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
+export declare type AdditionalMapper = {
+    topLeft: CustomColorArrow;
+    topRight: CustomColorArrow;
+    bottomLeft: CustomColorArrow;
+    bottomRight: CustomColorArrow;
+    leftTop: CustomColorArrow;
+    leftBottom: CustomColorArrow;
+    rightTop: CustomColorArrow;
+    rightBottom: CustomColorArrow;
+};
 export interface Props extends WrappedComponentProps {
     disableDefaultTexts?: boolean;
     disabledDate?: (date?: Date) => boolean;
@@ -32,6 +43,7 @@ export interface Props extends WrappedComponentProps {
         message?: string;
     };
     value: DateRange;
+    arrowColor?: AdditionalMapper;
 }
 export declare type RelativeMode = 'PAST' | 'FUTURE' | 'SINCE';
 export interface State {

package/dist/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Props } from './Footer.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "format" | "mode" | "value" | "texts" | "message" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "mode" | "value" | "message" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

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/Filters/DailyFilter/DailyFilter.d.ts

@@ -9,7 +9,7 @@ export interface Props extends WrappedComponentProps, Partial<RangeActionsMethod
     onChange: (v: Days) => {};
     valueSelectionModes: ValueSelectionModes;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "onChange" | "disabled" | "value" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts" | "disabled" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MonthlyFilterProps } from './MonthlyFilter.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<MonthlyFilterProps, "onChange" | "disabled" | "value" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<MonthlyFilterProps, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "disabled" | "value" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<MonthlyFilterProps>;

package/dist/RangeFilter/RangeFilter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RangeFilterProps } from './RangeFilter.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<RangeFilterProps, "onChange" | "value" | "valueSelectionModes" | "texts" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "hideFooter" | "onCancel"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<RangeFilterProps, "onChange" | "valueSelectionModes" | "texts" | "value" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "hideFooter" | "onCancel"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<RangeFilterProps>;

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/RangeFilter/Shared/TimeWindow/TimeWindow.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TimeWindowProps } from './TimeWindow.types';
 import { DateLimitMode } from './RangeFormContainer/RangeForm/RangeForm.types';
 export declare const DEFAULT_LIMIT_MODE: DateLimitMode;
-declare const _default: React.ForwardRefExoticComponent<Pick<TimeWindowProps, "title" | "onChange" | "disabled" | "readOnly" | "monthlyFilter" | "monthlyFilterPeriod" | "hideHeader" | "days" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "customDays" | "showSelectAll" | "numberOfDays" | "numberOfDaysPerRow" | "rowLabelFormatter" | "dayTemplate" | "dayFormatter" | "onCheckDay" | "onSelectAll" | "onUnselectAll" | "inverted" | "labelInverted" | "reverseGroup" | "daily" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<TimeWindowProps, "monthlyFilter" | "monthlyFilterPeriod" | "hideHeader" | "onChange" | "days" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "customDays" | "showSelectAll" | "title" | "numberOfDays" | "numberOfDaysPerRow" | "rowLabelFormatter" | "dayTemplate" | "dayFormatter" | "onCheckDay" | "onSelectAll" | "onUnselectAll" | "readOnly" | "inverted" | "labelInverted" | "reverseGroup" | "daily" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "disabled"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<TimeWindowProps>;

package/dist/RangeFilter/constants.d.ts

@@ -23,7 +23,7 @@ export declare const defaultId: string;
 export declare const TYPES_DATA: {
     MONTHLY: {
         labelTranslationKey: string;
-        component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/MonthlyFilter/MonthlyFilter.types").MonthlyFilterProps, "onChange" | "disabled" | "value" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
+        component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/MonthlyFilter/MonthlyFilter.types").MonthlyFilterProps, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "disabled" | "value" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
             forwardedRef?: ((instance: any) => void) | import("react").RefObject<any> | null | undefined;
         } & import("react").RefAttributes<any>> & {
             WrappedComponent: import("react").ComponentType<import("./Filters/MonthlyFilter/MonthlyFilter.types").MonthlyFilterProps>;
@@ -42,7 +42,7 @@ export declare const TYPES_DATA: {
     };
     DAILY: {
         labelTranslationKey: string;
-        component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/DailyFilter/DailyFilter").Props, "onChange" | "disabled" | "value" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts"> & {
+        component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/DailyFilter/DailyFilter").Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts" | "disabled" | "value"> & {
             forwardedRef?: ((instance: any) => void) | import("react").RefObject<any> | null | undefined;
         } & import("react").RefAttributes<any>> & {
             WrappedComponent: import("react").ComponentType<import("./Filters/DailyFilter/DailyFilter").Props>;

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,6 +1,30 @@
 import * as React from 'react';
-import { Props } from './DateRangePicker.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "format" | "value" | "texts" | "onVisibleChange" | "rangeUnits" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate"> & {
+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>> & {
     WrappedComponent: React.ComponentType<Props>;

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.d.ts

@@ -1,7 +1,7 @@
 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" | "value" | "texts" | "since" | "rangeUnits" | "ranges" | "relativeModes" | "showCustomRange" | "future" | "past"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props & WrappedComponentProps<"intl">, "onChange" | "texts" | "value" | "since" | "rangeUnits" | "ranges" | "relativeModes" | "showCustomRange" | "future" | "past"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;

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.14",
+  "version": "0.13.1",
   "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.18",
+    "@synerise/ds-date-picker": "^0.6.20",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-manageable-list": "^0.23.13",
-    "@synerise/ds-time-picker": "^0.6.17",
+    "@synerise/ds-manageable-list": "^0.23.15",
+    "@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": "25e5737ebe9d4319de963b369bc281651872887c"
+  "gitHead": "3df224bc0e56a55beaa9df7e0dcfbda4c04631ad"
 }