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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +59 -0
  2. package/README.md +28 -24
  3. package/dist/DateRangePicker.js +6 -2
  4. package/dist/DateRangePicker.styles.d.ts +6 -1
  5. package/dist/DateRangePicker.styles.js +41 -4
  6. package/dist/DateRangePicker.types.d.ts +13 -0
  7. package/dist/Footer/Footer.d.ts +1 -1
  8. package/dist/Footer/Footer.js +9 -0
  9. package/dist/RangeFilter/Filters/DailyFilter/DailyFilter.d.ts +1 -1
  10. package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.d.ts +1 -1
  11. package/dist/RangeFilter/RangeFilter.d.ts +1 -1
  12. package/dist/RangeFilter/RangeFilter.js +2 -1
  13. package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.d.ts +1 -1
  14. package/dist/RangeFilter/constants.d.ts +2 -2
  15. package/dist/RangePicker/RangePicker.js +6 -2
  16. package/dist/RangePicker/utils.js +5 -4
  17. package/dist/RangePickerInput/RangePickerInput.js +2 -1
  18. package/dist/RawDateRangePicker.d.ts +26 -2
  19. package/dist/RawDateRangePicker.js +24 -18
  20. package/dist/RelativeRangePicker/Elements/CustomRangeForm/DurationField/DurationField.js +7 -5
  21. package/dist/RelativeRangePicker/Elements/CustomRangeForm/OffsetField/OffsetField.js +2 -2
  22. package/dist/RelativeRangePicker/Elements/ModeDropdown/ModeDropdown.js +1 -0
  23. package/dist/RelativeRangePicker/Elements/RangeButtons/RangeButtons.js +1 -4
  24. package/dist/RelativeRangePicker/RelativeRangePicker.d.ts +1 -1
  25. package/dist/RelativeRangePicker/RelativeRangePicker.js +2 -2
  26. package/dist/RelativeRangePicker/utils.js +1 -1
  27. package/dist/constants.d.ts +2 -1
  28. package/dist/constants.js +3 -2
  29. package/dist/date.types.d.ts +2 -1
  30. package/dist/dateUtils/format.js +5 -0
  31. package/dist/index.d.ts +2 -0
  32. package/dist/index.js +3 -0
  33. package/dist/utils.js +1 -1
  34. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,65 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **date-range-picker:** applying primary class to selected buttons ([cf1fd45](https://github.com/Synerise/synerise-design/commit/cf1fd45a65dd2bf724c7907f203d04e06ac2c856))
12
+ * **date-range-picker:** babel array iteration fix ([15a0375](https://github.com/Synerise/synerise-design/commit/15a0375f7bdafa2856cad0f14616b60f9d1ad598))
13
+ * **date-range-picker:** default relative custom date-range to 30 days ([a159680](https://github.com/Synerise/synerise-design/commit/a1596807d31f53739304bbc7d793a0bd911e5ed1))
14
+ * **date-range-picker:** fix switching mode (componentDidUpdate) ([6d59489](https://github.com/Synerise/synerise-design/commit/6d594899bf338930951da5ff78123402491d29e1))
15
+ * **date-range-picker:** handle custom relative date range ([d456923](https://github.com/Synerise/synerise-design/commit/d456923259ecd75246897665e5de4f07d9a689b5))
16
+ * **date-range-picker:** handle Invalid Time ([fc52f67](https://github.com/Synerise/synerise-design/commit/fc52f67ef90297ea39e986ce928aaaab277c3e51))
17
+ * **date-range-picker:** interaction: switch modes, onChange value type ([a3e1329](https://github.com/Synerise/synerise-design/commit/a3e132927b42934d5a9ea61712b855d38f2e6561))
18
+ * **date-range-picker:** lifetime date-range-picker story ([f3cb1a6](https://github.com/Synerise/synerise-design/commit/f3cb1a66d3619da42226baebd56d66610964db7c))
19
+ * **date-range-picker:** make sure lodash.range is an array ([f51b1c4](https://github.com/Synerise/synerise-design/commit/f51b1c4fb8aae85d73257e6631595a2828dba0cc))
20
+ * **date-range-picker:** render popover in arrow-color test ([68090f5](https://github.com/Synerise/synerise-design/commit/68090f575da90ef0d788321b1c5a1b83cd4170cd))
21
+ * **date-range-picker:** show last/next in relative-date-filter addon ([6e409cf](https://github.com/Synerise/synerise-design/commit/6e409cff94058181bc41c74d900d6f6794fd4cbc))
22
+ * **date-range-picker:** show saving filters if passed proper props ([2e870b2](https://github.com/Synerise/synerise-design/commit/2e870b2eefbea9b7d66dbcb887e54ae291f1c619))
23
+
24
+
25
+ ### Features
26
+
27
+ * **date-range-picker:** ALL_TIME as a const, expose CONST ([7d3d98e](https://github.com/Synerise/synerise-design/commit/7d3d98e9711141079c6f1e0f6101e559c5ef6faf))
28
+ * **date-range-picker:** include Lifetime option in stories by default ([e84ae70](https://github.com/Synerise/synerise-design/commit/e84ae709e7c74e25d23c12ff41cb7c0daf8f858e))
29
+
30
+
31
+
32
+
33
+
34
+ ## [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)
35
+
36
+
37
+ ### Bug Fixes
38
+
39
+ * **date-range-picker:** add more options to set color arrow ([3890cd1](https://github.com/Synerise/synerise-design/commit/3890cd1dbd39b54fff07bb55ce962170affda984))
40
+ * **date-range-picker:** add prop of arrow to set color when is footer ([19558d6](https://github.com/Synerise/synerise-design/commit/19558d678867db79aa26c71a92acf7cf8b1fc69f))
41
+ * **date-range-picker:** fix arrow ([e56a188](https://github.com/Synerise/synerise-design/commit/e56a188357c897fcb444543f5f6212e1b270b8bc))
42
+ * **date-range-picker:** fix color and add option to show difference ([41ba36d](https://github.com/Synerise/synerise-design/commit/41ba36dd64dc9927ea3e28bfab6e7ff0e56563fa))
43
+ * **date-range-picker:** fix colors of arrow and test ([2aa2d73](https://github.com/Synerise/synerise-design/commit/2aa2d73c1975c1e5bc37347f02f3915be3d2f927))
44
+ * **date-range-picker:** fix colors picking ([b5846eb](https://github.com/Synerise/synerise-design/commit/b5846eb1c7ceaaec9bd2a650a73da248a6cdf56f))
45
+ * **date-range-picker:** fix documentation ([a0ef5e6](https://github.com/Synerise/synerise-design/commit/a0ef5e61d82af5082d36a4cabcb711a33dd55512))
46
+ * **date-range-picker:** fix test ([fb64181](https://github.com/Synerise/synerise-design/commit/fb641811ef4af38f873f369b02c5b7b54f0d8697))
47
+ * **date-range-picker:** fix test ([09ece1f](https://github.com/Synerise/synerise-design/commit/09ece1fc8194adf290c26026a6cda64e535fbdb5))
48
+ * **date-range-picker:** update tests ([3024429](https://github.com/Synerise/synerise-design/commit/3024429050a48b17f1e96d25c8e1d99b37436923))
49
+
50
+
51
+
52
+
53
+
54
+ ## [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)
55
+
56
+
57
+ ### Bug Fixes
58
+
59
+ * **date-range-picker:** onVisibleChange prop, example custom trigger ([e6aab36](https://github.com/Synerise/synerise-design/commit/e6aab3666df0bac8b999faa0a9046c244ea2a35f))
60
+
61
+
62
+
63
+
64
+
6
65
  ## [0.12.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.12.12...@synerise/ds-date-range-picker@0.12.13) (2022-04-29)
7
66
 
8
67
  **Note:** Version bump only for package @synerise/ds-date-range-picker
package/README.md CHANGED
@@ -41,32 +41,36 @@ const value = {
41
41
 
42
42
  ## API
43
43
 
44
- | Property | Description | Type | Default |
45
- | -------------------- | ------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------- |
46
- | disabledDate | Function to specify if particular dates are disabled or not | (date:Date)=>boolean | - |
47
- | disabledDefaultTexts | Disables the default texts translations provided by `react-intl` | boolean | `false` |
48
- | forceAbsolute | Force the outcome to be converted to an absolute date | boolean | `false` |
49
- | format | Format of the value displayed in the footer | string | "MMM D, YYYY" |
50
- | onApply | Callback executed after applying changes | (date:Date)=>void | - |
51
- | ranges | An array containing custom ranges which may be used as a short-hand | DateRange[] | [] |
52
- | popoverProps | Object representing props applied to the Antd Popover component | AntdPopoverProps | {} |
53
- | rangeUnits | Units available in relative range picker | RelativeUnits[] | ['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'] |
54
- | relativePast | Enable relative filter for past ranges | boolean | `false` |
55
- | relativeFuture | Enable relative filter for future ranges | boolean | `false` |
56
- | showTime | Enable user to choose particular hour | boolean | `false` |
57
- | showFilter | Enable range filtering | boolean | `false` |
58
- | showCustomRange | Enable custom range form in relative range picker | boolean | `true` |
59
- | validate | Function to specify if particular date ranges are correct | (date:Date)=>boolean | - |
60
- | value | Value of the picker | DateRange | new Date() |
44
+ | Property | Description | Type | Default |
45
+ | -------------------- | ------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------- |
46
+ | disabledDate | Function to specify if particular dates are disabled or not | (date:Date)=>boolean | - |
47
+ | disabledDefaultTexts | Disables the default texts translations provided by `react-intl` | boolean | `false` |
48
+ | forceAbsolute | Force the outcome to be converted to an absolute date | boolean | `false` |
49
+ | format | Format of the value displayed in the footer | string | "MMM D, YYYY" |
50
+ | onApply | Callback executed after applying changes | (date:Date)=>void | - |
51
+ | ranges | An array containing custom ranges which may be used as a short-hand | DateRange[] | [] |
52
+ | popoverProps | Object representing props applied to the Antd Popover component | AntdPopoverProps | {} |
53
+ | rangeUnits | Units available in relative range picker | RelativeUnits[] | ['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'] |
54
+ | relativePast | Enable relative filter for past ranges | boolean | `false` |
55
+ | relativeFuture | Enable relative filter for future ranges | boolean | `false` |
56
+ | showTime | Enable user to choose particular hour | boolean | `false` |
57
+ | showFilter | Enable range filtering | boolean | `false` |
58
+ | showCustomRange | Enable custom range form in relative range picker | boolean | `true` |
59
+ | validate | Function to specify if particular date ranges are correct | (date:Date)=>boolean | - |
60
+ | value | Value of the picker | DateRange | new Date() |
61
+ | onVisibleChange | Callback executed when popover with dateRangePicker changes its visibility | (visible: boolean) => void | - |
61
62
 
63
+
62
64
  ### DateRange
63
65
 
64
- | Property | Description | Type | Default |
65
- | -------- | ---------------------------------------------- | ------------------------------------- | ------- |
66
- | from | Start date | Date / string | - |
67
- | to | End date | Date / string | - |
68
- | type | String key for identifying the range type | 'ABSOLUTE' / 'RELATIVE' / 'SINCE' | - |
69
- | duration | Duration of the relative range | {type: RelativeUnit, duration:number} | - |
70
- | offset | Offset of the relative range from today's date | {type: RelativeUnit, duration:number} | - |
66
+ | Property | Description | Type | Default |
67
+ | -----------| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------- |
68
+ | from | Start date | Date / string | - |
69
+ | to | End date | Date / string | - |
70
+ | type | String key for identifying the range type | 'ABSOLUTE' / 'RELATIVE' / 'SINCE' | - |
71
+ | duration | Duration of the relative range | {type: RelativeUnit, duration:number} | - |
72
+ | offset | Offset of the relative range from today's date | {type: RelativeUnit, duration:number} | - |
73
+ | arrowColor | Custom color arrow of popover when is footer | {['bottomLeft' | 'topLeft' | 'anyOtherPlacement']: 'white' | 'grey' | anyPaletteColorToken} | - |
74
+
71
75
 
72
76
  `RelativeUnit = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS'`
package/dist/DateRangePicker.js CHANGED
@@ -8,7 +8,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
8
8
 
9
9
  import * as React from 'react';
10
10
  import { isEqual } from 'lodash';
11
- import { Popover } from 'antd';
12
11
  import "./style/index.css";
13
12
  import { useIntl } from 'react-intl';
14
13
  import RawDateRangePicker from './RawDateRangePicker';
@@ -25,6 +24,8 @@ var DateRangePicker = function DateRangePicker(props) {
25
24
  popoverTrigger = props.popoverTrigger,
26
25
  forceAdjacentMonths = props.forceAdjacentMonths,
27
26
  disableDefaultTexts = props.disableDefaultTexts,
27
+ arrowColor = props.arrowColor,
28
+ _onVisibleChange = props.onVisibleChange,
28
29
  _props$popoverProps = props.popoverProps,
29
30
  popoverProps = _props$popoverProps === void 0 ? {} : _props$popoverProps;
30
31
  var intl = useIntl();
@@ -70,7 +71,9 @@ var DateRangePicker = function DateRangePicker(props) {
70
71
  visible: false
71
72
  });
72
73
 
73
- return /*#__PURE__*/React.createElement(S.PickerWrapper, null, /*#__PURE__*/React.createElement(Popover, _extends({
74
+ return /*#__PURE__*/React.createElement(S.PickerWrapper, {
75
+ arrowColor: arrowColor
76
+ }, /*#__PURE__*/React.createElement(S.PopoverWrapper, _extends({
74
77
  content: /*#__PURE__*/React.createElement(RawDateRangePicker, _extends({}, props, {
75
78
  showTime: showTime,
76
79
  onApply: onApplyCallback,
@@ -90,6 +93,7 @@ var DateRangePicker = function DateRangePicker(props) {
90
93
  overlayClassName: "ds-date-range-popover",
91
94
  onVisibleChange: function onVisibleChange(visibility) {
92
95
  setInputActive(visibility);
96
+ _onVisibleChange && _onVisibleChange(visibility);
93
97
  }
94
98
  }, popoverProps, conditionalVisibilityProps), popoverTrigger || /*#__PURE__*/React.createElement(RangePickerInput, {
95
99
  onClick: function onClick() {
package/dist/DateRangePicker.styles.d.ts CHANGED
@@ -1,9 +1,14 @@
1
+ /// <reference types="react" />
2
+ import { AdditionalMapper } from './DateRangePicker.types';
1
3
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
2
4
  export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
5
+ export declare const PopoverWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/popover").PopoverProps & import("react").RefAttributes<unknown>>, any, {}, never>;
3
6
  export declare const Addon: import("styled-components").StyledComponent<"div", any, {
4
7
  last?: boolean | undefined;
5
8
  }, never>;
6
- export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {
10
+ arrowColor?: AdditionalMapper | undefined;
11
+ }, never>;
7
12
  export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {
8
13
  visible?: boolean | undefined;
9
14
  }, never>;
package/dist/DateRangePicker.styles.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import styled from 'styled-components';
2
+ import { Popover } from 'antd';
2
3
  export var Container = styled.div.withConfig({
3
4
  displayName: "DateRangePickerstyles__Container",
4
5
  componentId: "zmtbjf-0"
@@ -11,19 +12,55 @@ export var Separator = styled.div.withConfig({
11
12
  })(["margin:0;border-top:1px solid ", ";"], function (props) {
12
13
  return props.theme.palette['grey-200'];
13
14
  });
15
+ export var PopoverWrapper = styled(Popover).withConfig({
16
+ displayName: "DateRangePickerstyles__PopoverWrapper",
17
+ componentId: "zmtbjf-2"
18
+ })([""]);
14
19
  export var Addon = styled.div.withConfig({
15
20
  displayName: "DateRangePickerstyles__Addon",
16
- componentId: "zmtbjf-2"
21
+ componentId: "zmtbjf-3"
17
22
  })(["", ""], function (props) {
18
23
  return !props.last && "border-bottom: 1px solid " + props.theme.palette['grey-200'] + ";";
19
24
  });
20
25
  export var PickerWrapper = styled.div.withConfig({
21
26
  displayName: "DateRangePickerstyles__PickerWrapper",
22
- componentId: "zmtbjf-3"
23
- })(["position:relative;"]);
27
+ componentId: "zmtbjf-4"
28
+ })(["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) {
29
+ var _props$theme$palette$, _props$arrowColor, _props$arrowColor2;
30
+
31
+ 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;
32
+ }, function (props) {
33
+ var _props$theme$palette$2, _props$arrowColor3, _props$arrowColor4;
34
+
35
+ 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;
36
+ }, function (props) {
37
+ var _props$theme$palette$3, _props$arrowColor5, _props$arrowColor6;
38
+
39
+ 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;
40
+ }, function (props) {
41
+ var _props$theme$palette$4, _props$arrowColor7, _props$arrowColor8;
42
+
43
+ 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;
44
+ }, function (props) {
45
+ var _props$theme$palette$5, _props$arrowColor9, _props$arrowColor10;
46
+
47
+ 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;
48
+ }, function (props) {
49
+ var _props$theme$palette$6, _props$arrowColor11, _props$arrowColor12;
50
+
51
+ 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;
52
+ }, function (props) {
53
+ var _props$theme$palette$7, _props$arrowColor13, _props$arrowColor14;
54
+
55
+ 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'];
56
+ }, function (props) {
57
+ var _props$theme$palette$8, _props$arrowColor15, _props$arrowColor16;
58
+
59
+ 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'];
60
+ });
24
61
  export var OverlayContainer = styled.div.withConfig({
25
62
  displayName: "DateRangePickerstyles__OverlayContainer",
26
- componentId: "zmtbjf-4"
63
+ componentId: "zmtbjf-5"
27
64
  })(["display:", ";"], function (props) {
28
65
  return props.visible ? 'flex' : 'none';
29
66
  });
package/dist/DateRangePicker.types.d.ts CHANGED
@@ -4,6 +4,17 @@ import { PopoverProps } from 'antd/lib/popover';
4
4
  import { DateFilter, DateRange, RelativeUnits } from './date.types';
5
5
  import { FilterDefinition } from './RangeFilter/RangeFilter.types';
6
6
  import { SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
7
+ export declare type CustomColorArrow = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
8
+ export declare type AdditionalMapper = {
9
+ topLeft: CustomColorArrow;
10
+ topRight: CustomColorArrow;
11
+ bottomLeft: CustomColorArrow;
12
+ bottomRight: CustomColorArrow;
13
+ leftTop: CustomColorArrow;
14
+ leftBottom: CustomColorArrow;
15
+ rightTop: CustomColorArrow;
16
+ rightBottom: CustomColorArrow;
17
+ };
7
18
  export interface Props extends WrappedComponentProps {
8
19
  disableDefaultTexts?: boolean;
9
20
  disabledDate?: (date?: Date) => boolean;
@@ -12,6 +23,7 @@ export interface Props extends WrappedComponentProps {
12
23
  forceAbsolute?: boolean;
13
24
  onValueChange?: (value: Partial<DateFilter> | undefined) => void;
14
25
  onApply: (value: Partial<DateFilter> | undefined) => void;
26
+ onVisibleChange?: (visible: boolean) => void;
15
27
  onFilterSave?: (filters: SavedFilter[]) => void;
16
28
  popoverProps?: Partial<PopoverProps>;
17
29
  popoverTrigger?: React.ReactNode;
@@ -31,6 +43,7 @@ export interface Props extends WrappedComponentProps {
31
43
  message?: string;
32
44
  };
33
45
  value: DateRange;
46
+ arrowColor?: AdditionalMapper;
34
47
  }
35
48
  export declare type RelativeMode = 'PAST' | 'FUTURE' | 'SINCE';
36
49
  export interface State {
package/dist/Footer/Footer.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { Props } from './Footer.types';
3
- declare const _default: React.ForwardRefExoticComponent<Pick<Props, "format" | "mode" | "value" | "texts" | "message" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply"> & {
3
+ declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "mode" | "value" | "message" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply"> & {
4
4
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
5
5
  } & React.RefAttributes<any>> & {
6
6
  WrappedComponent: React.ComponentType<Props>;
package/dist/Footer/Footer.js CHANGED
@@ -12,6 +12,7 @@ import Icon, { ArrowRightS } from '@synerise/ds-icon';
12
12
  import * as S from './Footer.styles';
13
13
  import fnsFormat from '../dateUtils/format';
14
14
  import getDateFromString from '../dateUtils/getDateFromString';
15
+ import * as CONST from '../constants';
15
16
 
16
17
  var Footer = function Footer(_ref) {
17
18
  var canApply = _ref.canApply,
@@ -30,6 +31,14 @@ var Footer = function Footer(_ref) {
30
31
 
31
32
  var footerFormat = format || (showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
32
33
  var ChosenRange = React.useMemo(function () {
34
+ if ((value == null ? void 0 : value.key) === CONST.ALL_TIME) {
35
+ var _texts$value$translat;
36
+
37
+ return /*#__PURE__*/React.createElement(S.ChosenRange, {
38
+ className: "ds-date-range-picker-value"
39
+ }, value.translationKey ? (_texts$value$translat = texts[value.translationKey]) != null ? _texts$value$translat : value.translationKey : value == null ? void 0 : value.key);
40
+ }
41
+
33
42
  return /*#__PURE__*/React.createElement(S.ChosenRange, {
34
43
  className: "ds-date-range-picker-value"
35
44
  }, !!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 CHANGED
@@ -9,7 +9,7 @@ export interface Props extends WrappedComponentProps, Partial<RangeActionsMethod
9
9
  onChange: (v: Days) => {};
10
10
  valueSelectionModes: ValueSelectionModes;
11
11
  }
12
- declare const _default: React.ForwardRefExoticComponent<Pick<Props, "onChange" | "disabled" | "value" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts"> & {
12
+ declare const _default: React.ForwardRefExoticComponent<Pick<Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts" | "disabled" | "value"> & {
13
13
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
14
14
  } & React.RefAttributes<any>> & {
15
15
  WrappedComponent: React.ComponentType<Props>;
package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { MonthlyFilterProps } from './MonthlyFilter.types';
3
- declare const _default: React.ForwardRefExoticComponent<Pick<MonthlyFilterProps, "onChange" | "disabled" | "value" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
3
+ declare const _default: React.ForwardRefExoticComponent<Pick<MonthlyFilterProps, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "disabled" | "value" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
4
4
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
5
5
  } & React.RefAttributes<any>> & {
6
6
  WrappedComponent: React.ComponentType<MonthlyFilterProps>;
package/dist/RangeFilter/RangeFilter.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { RangeFilterProps } from './RangeFilter.types';
3
- declare const _default: React.ForwardRefExoticComponent<Pick<RangeFilterProps, "onChange" | "value" | "valueSelectionModes" | "texts" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "hideFooter" | "onCancel"> & {
3
+ declare const _default: React.ForwardRefExoticComponent<Pick<RangeFilterProps, "onChange" | "valueSelectionModes" | "texts" | "value" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "hideFooter" | "onCancel"> & {
4
4
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
5
5
  } & React.RefAttributes<any>> & {
6
6
  WrappedComponent: React.ComponentType<RangeFilterProps>;
package/dist/RangeFilter/RangeFilter.js CHANGED
@@ -130,6 +130,7 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
130
130
  var _this$props3 = this.props,
131
131
  intl = _this$props3.intl,
132
132
  savedFilters = _this$props3.savedFilters,
133
+ onFilterSave = _this$props3.onFilterSave,
133
134
  texts = _this$props3.texts,
134
135
  hideFooter = _this$props3.hideFooter,
135
136
  valueSelectionModes = _this$props3.valueSelectionModes;
@@ -171,7 +172,7 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
171
172
  onRangeCopy: this.handleRangeCopy,
172
173
  rangeClipboard: rangeClipboard,
173
174
  valueSelectionModes: valueSelectionModes
174
- }))), !hideFooter && /*#__PURE__*/React.createElement(S.Footer, null, /*#__PURE__*/React.createElement(SaveFilterForm, {
175
+ }))), !hideFooter && /*#__PURE__*/React.createElement(S.Footer, null, savedFilters && onFilterSave && /*#__PURE__*/React.createElement(SaveFilterForm, {
175
176
  onFilterSave: this.handleFilterSave
176
177
  }), /*#__PURE__*/React.createElement(S.FooterSeparator, null), /*#__PURE__*/React.createElement(Button, {
177
178
  type: "ghost",
package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { TimeWindowProps } from './TimeWindow.types';
3
3
  import { DateLimitMode } from './RangeFormContainer/RangeForm/RangeForm.types';
4
4
  export declare const DEFAULT_LIMIT_MODE: DateLimitMode;
5
- 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"> & {
5
+ 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"> & {
6
6
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
7
7
  } & React.RefAttributes<any>> & {
8
8
  WrappedComponent: React.ComponentType<TimeWindowProps>;
package/dist/RangeFilter/constants.d.ts CHANGED
@@ -23,7 +23,7 @@ export declare const defaultId: string;
23
23
  export declare const TYPES_DATA: {
24
24
  MONTHLY: {
25
25
  labelTranslationKey: string;
26
- 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"> & {
26
+ 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"> & {
27
27
  forwardedRef?: ((instance: any) => void) | import("react").RefObject<any> | null | undefined;
28
28
  } & import("react").RefAttributes<any>> & {
29
29
  WrappedComponent: import("react").ComponentType<import("./Filters/MonthlyFilter/MonthlyFilter.types").MonthlyFilterProps>;
@@ -42,7 +42,7 @@ export declare const TYPES_DATA: {
42
42
  };
43
43
  DAILY: {
44
44
  labelTranslationKey: string;
45
- component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/DailyFilter/DailyFilter").Props, "onChange" | "disabled" | "value" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts"> & {
45
+ component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/DailyFilter/DailyFilter").Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts" | "disabled" | "value"> & {
46
46
  forwardedRef?: ((instance: any) => void) | import("react").RefObject<any> | null | undefined;
47
47
  } & import("react").RefAttributes<any>> & {
48
48
  WrappedComponent: import("react").ComponentType<import("./Filters/DailyFilter/DailyFilter").Props>;
package/dist/RangePicker/RangePicker.js CHANGED
@@ -11,6 +11,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
11
11
  import * as React from 'react';
12
12
  import { DateUtils } from 'react-day-picker';
13
13
  import fnsIsSameDay from 'date-fns/isSameDay';
14
+ import fnsIsValid from 'date-fns/isValid';
14
15
  import MonthPicker from '@synerise/ds-date-picker/dist/Elements/MonthPicker/MonthPicker';
15
16
  import MomentLocaleUtils from 'react-day-picker/moment';
16
17
  import TimePicker from '@synerise/ds-date-picker/dist/Elements/TimePicker/TimePicker';
@@ -247,10 +248,13 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
247
248
  var from = value.from,
248
249
  to = value.to,
249
250
  type = value.type;
250
- var modifiers = getModifiers(from, to, enteredTo);
251
- var selectedDays = [from, {
251
+ var modifiers = getModifiers(fnsIsValid(from) ? from : null, fnsIsValid(to) ? to : null, enteredTo);
252
+ var selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [from, {
252
253
  from: from,
253
254
  to: to
255
+ }] : [undefined, {
256
+ from: undefined,
257
+ to: undefined
254
258
  }];
255
259
  var parsedLeft = legacyParse(left.month);
256
260
  var parsedRight = legacyParse(right.month);
package/dist/RangePicker/utils.js CHANGED
@@ -2,6 +2,7 @@ import fnsIsWithinRange from 'date-fns/isWithinInterval';
2
2
  import { legacyParse } from '@date-fns/upgrade/v2';
3
3
  import fnsMin from 'date-fns/min';
4
4
  import fnsMax from 'date-fns/max';
5
+ import fnsIsValid from 'date-fns/isValid';
5
6
  import { fnsEndOfDay, fnsIsSameMonth, fnsStartOfDay, fnsStartOfMonth } from '../fns';
6
7
  import { TIME_OPTIONS } from '../constants';
7
8
  import SET from '../dateUtils/set';
@@ -37,8 +38,8 @@ export var getDisabledTimeOptions = function getDisabledTimeOptions(day, granula
37
38
  });
38
39
  };
39
40
  export var getSidesState = function getSidesState(value, forceAdjacentMonths) {
40
- var from = fnsStartOfMonth(value.from ? legacyParse(value.from) : new Date());
41
- var to = fnsStartOfMonth(value.to ? legacyParse(value.to) : new Date());
41
+ var from = fnsStartOfMonth(fnsIsValid(value.from) ? legacyParse(value.from) : new Date());
42
+ var to = fnsStartOfMonth(fnsIsValid(value.to) ? legacyParse(value.to) : new Date());
42
43
 
43
44
  if (fnsIsSameMonth(from, to)) {
44
45
  to = ADD.MONTHS(to, 1);
@@ -47,12 +48,12 @@ export var getSidesState = function getSidesState(value, forceAdjacentMonths) {
47
48
  return {
48
49
  left: {
49
50
  month: from,
50
- monthTitle: format(legacyParse(from), 'MMM yyyy'),
51
+ monthTitle: fnsIsValid(from) ? format(legacyParse(from), 'MMM yyyy') : '',
51
52
  mode: 'date'
52
53
  },
53
54
  right: {
54
55
  month: forceAdjacentMonths ? ADD.MONTHS(from, 1) : to,
55
- monthTitle: format(legacyParse(to), 'MMM yyyy'),
56
+ monthTitle: fnsIsValid(to) ? format(legacyParse(to), 'MMM yyyy') : '',
56
57
  mode: 'date'
57
58
  }
58
59
  };
package/dist/RangePickerInput/RangePickerInput.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import Icon, { ArrowRightS, CalendarM, Close3S } from '@synerise/ds-icon';
3
+ import fnsIsValid from 'date-fns/isValid';
3
4
  import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
4
5
  import Tooltip from '@synerise/ds-tooltip'; // eslint-disable-next-line import/no-named-default
5
6
 
@@ -45,7 +46,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
45
46
  onClick && onClick(e);
46
47
  }, [onClick]);
47
48
  var getText = React.useCallback(function (dateToDisplay) {
48
- if (!dateToDisplay) return '';
49
+ if (!dateToDisplay || !fnsIsValid(dateToDisplay)) return '';
49
50
  var dateValue = dateToDisplay;
50
51
  if (typeof dateToDisplay === 'string') dateValue = new Date(dateToDisplay);
51
52
  return fnsFormat(dateValue, format || showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
package/dist/RawDateRangePicker.d.ts CHANGED
@@ -1,6 +1,30 @@
1
1
  import * as React from 'react';
2
- import { Props } from './DateRangePicker.types';
3
- declare const _default: React.ForwardRefExoticComponent<Pick<Props, "format" | "value" | "texts" | "rangeUnits" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate"> & {
2
+ import { Props, State, AddonType } from './DateRangePicker.types';
3
+ import { DateRange } from './date.types';
4
+ import { FilterDefinition, FilterValue } from './RangeFilter/RangeFilter.types';
5
+ export declare class RawDateRangePicker extends React.PureComponent<Props, State> {
6
+ static defaultProps: {
7
+ ranges: DateRange[];
8
+ relativePast: boolean;
9
+ showRelativePicker: boolean;
10
+ validate: () => {
11
+ valid: boolean;
12
+ };
13
+ };
14
+ constructor(props: Props);
15
+ componentDidUpdate(prevProps: Readonly<Props>): void;
16
+ handleFilterCancel: () => void;
17
+ handleFilterApply: (filter?: FilterValue<FilterDefinition> | undefined) => void;
18
+ handleRangeChange: (range?: import("./date.types").AbsoluteDateRange | import("./date.types").RelativeDateRange | undefined) => void;
19
+ handleApply: () => void;
20
+ handleModalOpenClick: () => void;
21
+ handleRemoveFilterClick: () => void;
22
+ handleSwitchMode: () => void;
23
+ handleAddonCollapse: (addonKey: string, expanded: boolean) => void;
24
+ getAddons: () => AddonType[];
25
+ render(): JSX.Element;
26
+ }
27
+ 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"> & {
4
28
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
5
29
  } & React.RefAttributes<any>> & {
6
30
  WrappedComponent: React.ComponentType<Props>;
package/dist/RawDateRangePicker.js CHANGED
@@ -11,9 +11,10 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
11
11
  import * as React from 'react';
12
12
  import { omitBy, isUndefined } from 'lodash';
13
13
  import { injectIntl } from 'react-intl';
14
+ import fnsIsValid from 'date-fns/isValid';
14
15
  import { Container, Separator, Addon } from './DateRangePicker.styles';
15
16
  import RangePicker from './RangePicker/RangePicker';
16
- import { RELATIVE, ABSOLUTE, MODES, RELATIVE_PRESETS } from './constants';
17
+ import { RELATIVE, ABSOLUTE, MODES, RELATIVE_PRESETS, ABSOLUTE_PRESETS } from './constants';
17
18
  import relativeToAbsolute from './dateUtils/relativeToAbsolute';
18
19
  import AddonCollapse from './AddonCollapse/AddonCollapse';
19
20
  import RelativeRangePicker from './RelativeRangePicker/RelativeRangePicker';
@@ -21,8 +22,7 @@ import Footer from './Footer/Footer';
21
22
  import { normalizeRange } from './utils';
22
23
  import RangeFilter from './RangeFilter/RangeFilter';
23
24
  import RangeFilterStatus from './RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus';
24
-
25
- var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
25
+ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
26
26
  _inheritsLoose(RawDateRangePicker, _React$PureComponent);
27
27
 
28
28
  function RawDateRangePicker(props) {
@@ -52,12 +52,25 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
52
52
  return;
53
53
  }
54
54
 
55
+ if (range.from && !fnsIsValid(range == null ? void 0 : range.from)) {
56
+ return;
57
+ }
58
+
55
59
  var onValueChange = _this.props.onValueChange;
56
- var value = _this.state.value;
60
+ var _this$state = _this.state,
61
+ value = _this$state.value,
62
+ mode = _this$state.mode;
57
63
  var newValue = normalizeRange(_objectSpread({}, range, {
58
64
  filter: value.filter
59
65
  }));
60
66
 
67
+ if (newValue.type === 'RELATIVE' && mode === MODES.TIME) {
68
+ // clicked on RangeButtons and was selecting time
69
+ _this.setState({
70
+ mode: MODES.DATE
71
+ });
72
+ }
73
+
61
74
  _this.setState({
62
75
  value: _objectSpread({}, newValue, {
63
76
  key: range == null ? void 0 : range.key,
@@ -130,9 +143,9 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
130
143
  intl = _this$props2.intl,
131
144
  rangeUnits = _this$props2.rangeUnits,
132
145
  showCustomRange = _this$props2.showCustomRange;
133
- var _this$state = _this.state,
134
- value = _this$state.value,
135
- visibleAddonKey = _this$state.visibleAddonKey;
146
+ var _this$state2 = _this.state,
147
+ value = _this$state2.value,
148
+ visibleAddonKey = _this$state2.visibleAddonKey;
136
149
  var addons = [];
137
150
 
138
151
  if (showRelativePicker && !!relativeModes && (relativeModes == null ? void 0 : relativeModes.length) > 0) {
@@ -207,12 +220,6 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
207
220
  if (prevProps.value !== value && !value) {
208
221
  this.handleRangeChange(value);
209
222
  }
210
-
211
- var mode = this.state.mode;
212
-
213
- if (!(value != null && value.to) && !(value != null && value.from) && mode !== MODES.DATE) {
214
- this.handleSwitchMode();
215
- }
216
223
  };
217
224
 
218
225
  _proto.render = function render() {
@@ -226,9 +233,9 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
226
233
  savedFilters = _this$props3.savedFilters,
227
234
  onFilterSave = _this$props3.onFilterSave,
228
235
  intl = _this$props3.intl;
229
- var _this$state2 = this.state,
230
- value = _this$state2.value,
231
- mode = _this$state2.mode;
236
+ var _this$state3 = this.state,
237
+ value = _this$state3.value,
238
+ mode = _this$state3.mode;
232
239
  var from = value.from,
233
240
  to = value.to,
234
241
  key = value.key;
@@ -283,9 +290,8 @@ var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
283
290
  }(React.PureComponent); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
284
291
  // @ts-ignore
285
292
 
286
-
287
293
  _defineProperty(RawDateRangePicker, "defaultProps", {
288
- ranges: RELATIVE_PRESETS,
294
+ ranges: [].concat(RELATIVE_PRESETS, ABSOLUTE_PRESETS),
289
295
  relativePast: true,
290
296
  showRelativePicker: true,
291
297
  validate: function validate() {
package/dist/RelativeRangePicker/Elements/CustomRangeForm/DurationField/DurationField.js CHANGED
@@ -5,11 +5,13 @@ import set from 'ramda/src/set';
5
5
  import lensPath from 'ramda/src/lensPath';
6
6
  import * as S from '../../../RelativeRangePicker.styles';
7
7
  import * as CONST from '../../../../constants';
8
+ import { RANGES_MODE } from '../../../utils';
8
9
  export var setDurationType = set(lensPath(['duration', 'type']));
9
10
  var SELECT_DROPDOWN_OFFSET = -4;
10
11
 
11
12
  var DurationField = function DurationField(_ref) {
12
- var currentRange = _ref.currentRange,
13
+ var currentGroup = _ref.currentGroup,
14
+ currentRange = _ref.currentRange,
13
15
  handleChange = _ref.handleChange,
14
16
  handleDurationValueChange = _ref.handleDurationValueChange,
15
17
  rangeUnits = _ref.rangeUnits,
@@ -20,14 +22,14 @@ var DurationField = function DurationField(_ref) {
20
22
  handleDurationValueChange(1);
21
23
  }
22
24
  }, [duration, handleDurationValueChange]);
23
- return /*#__PURE__*/React.createElement(S.InputSelectGroup, {
25
+ 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, {
24
26
  compact: true
25
27
  }, /*#__PURE__*/React.createElement(InputNumber, {
26
28
  min: 1,
27
29
  max: CONST.RELATIVE_DURATION_MAX,
28
30
  precision: 0,
29
31
  step: 1,
30
- value: duration.value,
32
+ value: duration == null ? void 0 : duration.value,
31
33
  onBlur: function onBlur(_ref2) {
32
34
  var value = _ref2.target.value;
33
35
  !value && handleDurationValueChange(1);
@@ -35,7 +37,7 @@ var DurationField = function DurationField(_ref) {
35
37
  onChange: handleDurationValueChange,
36
38
  raw: true
37
39
  }), /*#__PURE__*/React.createElement(Select, {
38
- value: duration.type,
40
+ value: duration == null ? void 0 : duration.type,
39
41
  onChange: function onChange(type) {
40
42
  return handleChange(setDurationType(type, currentRange));
41
43
  },
@@ -51,7 +53,7 @@ var DurationField = function DurationField(_ref) {
51
53
  key: type,
52
54
  value: type
53
55
  }, texts[type.toLowerCase()]);
54
- })));
56
+ }))));
55
57
  };
56
58
 
57
59
  export default DurationField;
package/dist/RelativeRangePicker/Elements/CustomRangeForm/OffsetField/OffsetField.js CHANGED
@@ -27,14 +27,14 @@ var OffsetField = function OffsetField(_ref) {
27
27
  max: CONST.RELATIVE_OFFSET_MAX,
28
28
  precision: 0,
29
29
  step: 1,
30
- value: offset.value,
30
+ value: offset == null ? void 0 : offset.value,
31
31
  onBlur: function onBlur(_ref2) {
32
32
  var value = _ref2.target.value;
33
33
  !value && handleOffsetValueChange(0);
34
34
  },
35
35
  onChange: handleOffsetValueChange
36
36
  }), /*#__PURE__*/React.createElement(Select, {
37
- value: offset.type,
37
+ value: offset == null ? void 0 : offset.type,
38
38
  onChange: function onChange(type) {
39
39
  return handleChange(setOffsetType(type, currentRange));
40
40
  },
package/dist/RelativeRangePicker/Elements/ModeDropdown/ModeDropdown.js CHANGED
@@ -59,6 +59,7 @@ var ModeDrop = function ModeDrop(_ref) {
59
59
  },
60
60
  disabled: !modes || !(modes != null && modes.length) || modes.length === 1
61
61
  }, !!currentGroup && /*#__PURE__*/React.createElement(Icon, {
62
+ key: currentGroup,
62
63
  component: [RANGES_ICON[currentGroup]]
63
64
  })), overlay);
64
65
  };
package/dist/RelativeRangePicker/Elements/RangeButtons/RangeButtons.js CHANGED
@@ -1,12 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import * as S from '../../RelativeRangePicker.styles';
3
- import * as CONST from '../../../constants';
4
- import { isAbsolute } from '../../utils';
5
3
 
6
4
  var RangeButtons = function RangeButtons(_ref) {
7
5
  var ranges = _ref.ranges,
8
6
  currentRange = _ref.currentRange,
9
- value = _ref.value,
10
7
  texts = _ref.texts,
11
8
  onChange = _ref.onChange;
12
9
  return /*#__PURE__*/React.createElement(React.Fragment, null, ranges.map(function (range) {
@@ -15,7 +12,7 @@ var RangeButtons = function RangeButtons(_ref) {
15
12
  onClick: function onClick() {
16
13
  onChange && onChange(range);
17
14
  },
18
- type: currentRange && currentRange.key === range.key && value.type === CONST.RELATIVE || isAbsolute(currentRange) && range.key !== 'ALL_TIME' ? 'primary' : 'tertiary'
15
+ type: currentRange && currentRange.key === range.key ? 'primary' : 'tertiary'
19
16
  }, range.translationKey ? texts[range.translationKey] : texts == null ? void 0 : texts.custom);
20
17
  }));
21
18
  };
package/dist/RelativeRangePicker/RelativeRangePicker.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { WrappedComponentProps } from 'react-intl';
3
3
  import { Props } from './RelativeRangePicker.types';
4
- declare const _default: React.ForwardRefExoticComponent<Pick<Props & WrappedComponentProps<"intl">, "onChange" | "value" | "texts" | "since" | "rangeUnits" | "ranges" | "relativeModes" | "showCustomRange" | "future" | "past"> & {
4
+ declare const _default: React.ForwardRefExoticComponent<Pick<Props & WrappedComponentProps<"intl">, "onChange" | "texts" | "value" | "since" | "rangeUnits" | "ranges" | "relativeModes" | "showCustomRange" | "future" | "past"> & {
5
5
  forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
6
6
  } & React.RefAttributes<any>> & {
7
7
  WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
package/dist/RelativeRangePicker/RelativeRangePicker.js CHANGED
@@ -177,7 +177,7 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
177
177
  past = nextProps.past,
178
178
  relativeModes = nextProps.relativeModes;
179
179
  var state = prevState;
180
- var currentRange = value && value.type === CONST.RELATIVE ? getRelativePresetForRange(value) : DEFAULT_RANGE;
180
+ var currentRange = getRelativePresetForRange(value);
181
181
  state.currentRange = currentRange;
182
182
  state.groupedRanges = ranges;
183
183
 
@@ -215,7 +215,7 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
215
215
  groupedRanges = _this$state3.groupedRanges,
216
216
  currentGroup = _this$state3.currentGroup,
217
217
  currentRange = _this$state3.currentRange;
218
- var isCustomValue = !(value != null && value.key) || !(currentRange != null && currentRange.key);
218
+ var isCustomValue = currentRange.type === 'RELATIVE' && (currentRange.key === 'CUSTOM' || !(value != null && value.key) || !(currentRange != null && currentRange.key));
219
219
  var visibleRanges = groupedRanges ? groupedRanges.slice(0, 3) : [];
220
220
  var hiddenRanges = groupedRanges ? groupedRanges.slice(3) : [];
221
221
  if (!currentGroup) return null;
package/dist/RelativeRangePicker/utils.js CHANGED
@@ -34,7 +34,7 @@ export var getDefaultCustomRange = function getDefaultCustomRange(currentGroup)
34
34
  },
35
35
  duration: {
36
36
  type: 'DAYS',
37
- value: 0
37
+ value: 30
38
38
  }
39
39
  };
40
40
  };
package/dist/constants.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { AbsoluteDateRange, RelativeDateRange, RelativeUnits } from './date.types';
1
+ import { AbsoluteDateRange, RelativeDateRange, RelativeUnits, RangeKey } from './date.types';
2
2
  export declare const SECONDS = "SECONDS";
3
3
  export declare const MINUTES = "MINUTES";
4
4
  export declare const HOURS = "HOURS";
@@ -11,6 +11,7 @@ export declare const RELATIVE = "RELATIVE";
11
11
  export declare const RELATIVE_OFFSET_MAX = 999999;
12
12
  export declare const RELATIVE_DURATION_MAX = 999999;
13
13
  export declare const RELATIVE_UNITS: RelativeUnits[];
14
+ export declare const ALL_TIME: RangeKey;
14
15
  export declare const range: (start: number, end: number) => number[];
15
16
  export declare const CUSTOM_RANGE_KEY = "custom";
16
17
  export declare const DURATION_MODIFIERS: {
package/dist/constants.js CHANGED
@@ -10,13 +10,14 @@ export var RELATIVE = 'RELATIVE';
10
10
  export var RELATIVE_OFFSET_MAX = 999999;
11
11
  export var RELATIVE_DURATION_MAX = 999999;
12
12
  export var RELATIVE_UNITS = [SECONDS, MINUTES, HOURS, DAYS, WEEKS, MONTHS, YEARS];
13
+ export var ALL_TIME = 'ALL_TIME';
13
14
  export var range = function range(start, end) {
14
15
  if (end <= start) {
15
16
  return [];
16
17
  }
17
18
 
18
19
  var size = end - start;
19
- return [].concat(Array(size).keys()).map(function (i) {
20
+ return Array.from(Array(size).keys()).map(function (i) {
20
21
  return i + start;
21
22
  });
22
23
  };
@@ -282,7 +283,7 @@ export var RELATIVE_PRESETS = [{
282
283
  }
283
284
  }];
284
285
  export var ABSOLUTE_PRESETS = [{
285
- key: 'ALL_TIME',
286
+ key: ALL_TIME,
286
287
  translationKey: 'allTime',
287
288
  type: ABSOLUTE,
288
289
  future: false
package/dist/date.types.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as React from 'react';
2
2
  export declare type RelativeUnits = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS';
3
+ 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';
3
4
  export declare type NullableDateLimit = null | string | Date;
4
5
  export interface DateFilter {
5
6
  key?: string;
@@ -16,7 +17,7 @@ export interface DateFilter {
16
17
  };
17
18
  }
18
19
  export interface DateRangeBase {
19
- key?: string;
20
+ key?: RangeKey | string;
20
21
  future?: boolean;
21
22
  filter?: DateFilter;
22
23
  translationKey?: string;
package/dist/dateUtils/format.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import fnsFormat from 'date-fns/format';
2
+ import fnsIsValid from 'date-fns/isValid';
2
3
  import { pl, es, enGB as en } from 'date-fns/locale';
3
4
  import { legacyParse, convertTokens } from '@date-fns/upgrade/v2';
4
5
  var locales = {
@@ -13,6 +14,10 @@ var format = function format(date, formatStr, locale) {
13
14
  locale = defaultLocale;
14
15
  }
15
16
 
17
+ if (!fnsIsValid(date)) {
18
+ return '';
19
+ }
20
+
16
21
  return fnsFormat(legacyParse(date), convertTokens(formatStr), {
17
22
  locale: locales[locale.substring(0, 2)]
18
23
  });
package/dist/index.d.ts CHANGED
@@ -1,4 +1,6 @@
1
1
  export { default as DailyDateFilter } from './RangeFilter/Filters/new/Daily/Daily';
2
2
  export { default as WeeklyDateFilter } from './RangeFilter/Filters/new/Weekly/Weekly';
3
3
  export { default as MonthlyDateFilter } from './RangeFilter/Filters/MonthlyFilter/MonthlyFilter';
4
+ export { RawDateRangePicker } from './RawDateRangePicker';
5
+ export * as CONST from './constants';
4
6
  export { default } from './DateRangePicker';
package/dist/index.js CHANGED
@@ -1,4 +1,7 @@
1
1
  export { default as DailyDateFilter } from './RangeFilter/Filters/new/Daily/Daily';
2
2
  export { default as WeeklyDateFilter } from './RangeFilter/Filters/new/Weekly/Weekly';
3
3
  export { default as MonthlyDateFilter } from './RangeFilter/Filters/MonthlyFilter/MonthlyFilter';
4
+ export { RawDateRangePicker } from './RawDateRangePicker';
5
+ import * as _CONST from './constants';
6
+ export { _CONST as CONST };
4
7
  export { default } from './DateRangePicker';
package/dist/utils.js CHANGED
@@ -134,7 +134,7 @@ export var DEFAULT_RANGE = normalizeRange({
134
134
  type: 'DAYS'
135
135
  },
136
136
  duration: {
137
- value: 1,
137
+ value: 30,
138
138
  type: 'DAYS'
139
139
  }
140
140
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-date-range-picker",
3
- "version": "0.12.13",
3
+ "version": "0.13.0",
4
4
  "description": "Date-Range-Picker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
34
34
  "dependencies": {
35
35
  "@date-fns/upgrade": "^1.0.3",
36
36
  "@synerise/ds-button": "^0.17.2",
37
- "@synerise/ds-date-picker": "^0.6.17",
37
+ "@synerise/ds-date-picker": "^0.6.20",
38
38
  "@synerise/ds-icon": "^0.49.0",
39
- "@synerise/ds-manageable-list": "^0.23.13",
40
- "@synerise/ds-time-picker": "^0.6.17",
39
+ "@synerise/ds-manageable-list": "^0.23.14",
40
+ "@synerise/ds-time-picker": "^0.6.19",
41
41
  "@synerise/ds-tooltip": "^0.11.9",
42
42
  "@synerise/ds-utils": "^0.19.0",
43
43
  "date-fns": "^2.16.1",
@@ -54,5 +54,5 @@
54
54
  "devDependencies": {
55
55
  "@types/ramda": "^0.27.14"
56
56
  },
57
- "gitHead": "4a658911645846d1e329609ba9db06a7bc64962b"
57
+ "gitHead": "b2b8c9f85179763159e3c83801b568943f132741"
58
58
  }