@synerise/ds-date-range-picker 0.14.3 → 0.14.4

package/CHANGELOG.md

@@ -3,25 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [0.14.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.14.2...@synerise/ds-date-range-picker@0.14.3) (2022-08-04)
-
-**Note:** Version bump only for package @synerise/ds-date-range-picker
-
-
-
-
-
-## [0.14.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.13.4...@synerise/ds-date-range-picker@0.14.2) (2022-08-04)
-
-**Note:** Version bump only for package @synerise/ds-date-range-picker
+# [0.14.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.13.4...@synerise/ds-date-range-picker@0.14.0) (2022-07-28)
 
 
+### Bug Fixes
 
+* **date-range-picker:** empty select time if ALL_TIME ([476ac41](https://github.com/Synerise/synerise-design/commit/476ac419a0ab1b1a43349e6b9c6647dceb564430))
+* **date-range-picker:** ensure proper relative-date-range onApply value ([e5a7d3a](https://github.com/Synerise/synerise-design/commit/e5a7d3acf4994e9be1a7f382d957eed70993de0c))
+* **date-range-picker:** fix and refactor tests, (re)add start/end of day ([413151d](https://github.com/Synerise/synerise-design/commit/413151d5f511ec5722c0576f0765ea74857b6b8d))
+* **date-range-picker:** fix prop and tests ([2ecb365](https://github.com/Synerise/synerise-design/commit/2ecb3658019bc67c820f85e759f42ad22417b001))
+* **date-range-picker:** fix selection of new date ([f94d822](https://github.com/Synerise/synerise-design/commit/f94d822f9fc3b78f806b96f98c4e723dac0dd075))
+* **date-range-picker:** fix selection of new date and tests ([07f703a](https://github.com/Synerise/synerise-design/commit/07f703a24ae9d62d6bf24bdc2ee3fb0157681be2))
+* **date-range-picker:** no relative date properties if absolute range ([e0bd9cb](https://github.com/Synerise/synerise-design/commit/e0bd9cb9c7a2a84bcbad1129b21186048482bc71))
 
 
-## [0.14.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.13.4...@synerise/ds-date-range-picker@0.14.1) (2022-08-04)
+### Features
 
-**Note:** Version bump only for package @synerise/ds-date-range-picker
+* **date-range-picker:** failing test for proper relative-date props ([2746147](https://github.com/Synerise/synerise-design/commit/27461470eccd39a9749b54d1aa508503c8861d98))
 
 
 

package/README.md

@@ -41,36 +41,34 @@ const value = {
 
 ## API
 
-| Property             | Description                                                                | Type                       | Default                                                       |
-| -------------------- | -------------------------------------------------------------------        | --------------------       | ------------------------------------------------------------- |
-| disabledDate         | Function to specify if particular dates are disabled or not                | (date:Date)=>boolean       | -                                                             |
-| disabledDefaultTexts | Disables the default texts translations provided by `react-intl`           | boolean                    | `false`                                                       |
-| forceAbsolute        | Force the outcome to be converted to an absolute date                      | boolean                    | `false`                                                       |
-| format               | Format of the value displayed in the footer                                | string                     | "MMM D, YYYY"                                                 |
-| onApply              | Callback executed after applying changes                                   | (date:Date)=>void          | -                                                             |
-| ranges               | An array containing custom ranges which may be used as a short-hand        | DateRange[]                | []                                                            |
-| popoverProps         | Object representing props applied to the Antd Popover component            | AntdPopoverProps           | {}                                                            |
-| rangeUnits           | Units available in relative range picker                                   | RelativeUnits[]            | ['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'] |
-| relativePast         | Enable relative filter for past ranges                                     | boolean                    | `false`                                                       |
-| relativeFuture       | Enable relative filter for future ranges                                   | boolean                    | `false`                                                       |
-| showTime             | Enable user to choose particular hour                                      | boolean                    | `false`                                                       |
-| showFilter           | Enable range filtering                                                     | boolean                    | `false`                                                       |
-| showCustomRange      | Enable custom range form in relative range picker                          | boolean                    | `true`                                                        |
-| validate             | Function to specify if particular date ranges are correct                  | (date:Date)=>boolean       | -                                                             |
-| value                | Value of the picker                                                        | DateRange                  | new Date()                                                    |
-| onVisibleChange      | Callback executed when popover with dateRangePicker changes its visibility | (visible: boolean) => void | -                                                             |
+| Property             | Description                                                         | Type                 | Default                                                       |
+| -------------------- | ------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------- |
+| disabledDate         | Function to specify if particular dates are disabled or not         | (date:Date)=>boolean | -                                                             |
+| disabledDefaultTexts | Disables the default texts translations provided by `react-intl`    | boolean              | `false`                                                       |
+| forceAbsolute        | Force the outcome to be converted to an absolute date               | boolean              | `false`                                                       |
+| format               | Format of the value displayed in the footer                         | string               | "MMM D, YYYY"                                                 |
+| onApply              | Callback executed after applying changes                            | (date:Date)=>void    | -                                                             |
+| ranges               | An array containing custom ranges which may be used as a short-hand | DateRange[]          | []                                                            |
+| popoverProps         | Object representing props applied to the Antd Popover component     | AntdPopoverProps     | {}                                                            |
+| rangeUnits           | Units available in relative range picker                            | RelativeUnits[]      | ['SECONDS','MINUTES','HOURS','DAYS','WEEKS','MONTHS','YEARS'] |
+| relativePast         | Enable relative filter for past ranges                              | boolean              | `false`                                                       |
+| relativeFuture       | Enable relative filter for future ranges                            | boolean              | `false`                                                       |
+| showTime             | Enable user to choose particular hour                               | boolean              | `false`                                                       |
+| showFilter           | Enable range filtering                                              | boolean              | `false`                                                       |
+| showCustomRange      | Enable custom range form in relative range picker                   | boolean              | `true`                                                       |
+| validate             | Function to specify if particular date ranges are correct           | (date:Date)=>boolean | -                                                             |
+| value                | Value of the picker                                                 | DateRange            | new Date()                                                    |
+| startAlwaysOnTheLeft | Enable not to move month from left side to right side               | boolean              | `false`                                                       |
+| onVisibleChange      | Callback executed when popover with dateRangePicker changes its visibility | (visible: boolean) => void | -                                                |
 
- 
 ### 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}                                                                          | -       |
-| arrowColor | Custom color arrow of popover when is footer   | {['bottomLeft' | 'topLeft' | 'anyOtherPlacement']: 'white' | 'grey' | anyPaletteColorToken}                    | -       |
-
+| 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} | -       |
 
 `RelativeUnit = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS'`

package/dist/DateRangePicker.types.d.ts

@@ -4,6 +4,7 @@ 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';
+import { Props as FooterProps } from './Footer/Footer.types';
 export declare type CustomColorArrow = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export declare type AdditionalMapper = {
     topLeft: CustomColorArrow;
@@ -16,11 +17,16 @@ export declare type AdditionalMapper = {
     rightBottom: CustomColorArrow;
 };
 export interface Props extends WrappedComponentProps {
+    /**
+     * overwrite default container's class. Default value is `ds-date-range-picker`.
+     */
+    containerClass?: string;
     disableDefaultTexts?: boolean;
     disabledDate?: (date?: Date) => boolean;
     format?: string;
     forceAdjacentMonths?: boolean;
     forceAbsolute?: boolean;
+    footerProps?: Partial<FooterProps>;
     onValueChange?: (value: Partial<DateFilter> | undefined) => void;
     onApply: (value: Partial<DateFilter> | undefined) => void;
     onVisibleChange?: (visible: boolean) => void;

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, "texts" | "format" | "mode" | "value" | "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" | "displayDateContainerClass"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/dist/Footer/Footer.js

@@ -1,4 +1,4 @@
-var _excluded = ["canApply", "onApply", "intl", "canSwitchMode", "onSwitchMode", "mode", "dateOnly", "message", "texts", "value", "format", "showTime"];
+var _excluded = ["canApply", "onApply", "intl", "canSwitchMode", "onSwitchMode", "mode", "dateOnly", "message", "texts", "value", "format", "showTime", "displayDateContainerClass"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -27,6 +27,8 @@ var Footer = function Footer(_ref) {
       value = _ref.value,
       format = _ref.format,
       showTime = _ref.showTime,
+      _ref$displayDateConta = _ref.displayDateContainerClass,
+      displayDateContainerClass = _ref$displayDateConta === void 0 ? 'ds-date-range-picker-value' : _ref$displayDateConta,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
   var footerFormat = format || (showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
@@ -40,11 +42,11 @@ var Footer = function Footer(_ref) {
     }
 
     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, {
+      className: displayDateContainerClass
+    }, !!value && !!value.from ? fnsFormat(getDateFromString(value == null ? void 0 : value.from), footerFormat, intl.locale) : texts.startDatePlaceholder, /*#__PURE__*/React.createElement(S.InvisibleTextContent, null, ' – '), /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(ArrowRightS, null)
     }), !!value && !!value.to ? fnsFormat(getDateFromString(value == null ? void 0 : value.to), footerFormat, intl.locale) : texts.endDatePlaceholder);
-  }, [value, footerFormat, intl.locale, texts]);
+  }, [value, footerFormat, intl.locale, texts, displayDateContainerClass]);
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     className: "ds-date-range-picker-footer"
   }, rest), ChosenRange, /*#__PURE__*/React.createElement(S.ActionsPlaceholder, null), /*#__PURE__*/React.createElement(S.Actions, null, /*#__PURE__*/React.createElement(Tooltip, {

package/dist/Footer/Footer.styles.d.ts

@@ -4,3 +4,14 @@ export declare const Actions: import("styled-components").StyledComponent<"div",
 export declare const Range: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export declare const ActionsPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChosenRange: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * This is mainly for unit-tests capabilitiess and WCAG compliancy, it is visible
+ * can be used for em-dashes (APA style) which will be recognized by screen-readers
+ * or in tests in `textContent` JS DOM property.
+ *
+ * Example usage:
+ *
+ *     <S.InvisibleTextContent>{' – '}</S.InvisibleTextContent>
+ *     <Icon component={<ArrowRightS/>}/>
+ */
+export declare const InvisibleTextContent: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/Footer/Footer.styles.js

@@ -25,4 +25,19 @@ export var ChosenRange = styled.div.withConfig({
   return props.theme.palette['grey-800'];
 }, function (props) {
   return props.theme.palette['grey-400'];
-});
+});
+/**
+ * This is mainly for unit-tests capabilitiess and WCAG compliancy, it is visible
+ * can be used for em-dashes (APA style) which will be recognized by screen-readers
+ * or in tests in `textContent` JS DOM property.
+ *
+ * Example usage:
+ *
+ *     <S.InvisibleTextContent>{' – '}</S.InvisibleTextContent>
+ *     <Icon component={<ArrowRightS/>}/>
+ */
+
+export var InvisibleTextContent = styled.span.withConfig({
+  displayName: "Footerstyles__InvisibleTextContent",
+  componentId: "sc-1oatjb7-5"
+})(["display:none;"]);

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

@@ -14,4 +14,5 @@ export declare type Props = {
     texts: Texts;
     format?: string;
     showTime?: boolean;
+    displayDateContainerClass?: string;
 } & WrappedComponentProps;

package/dist/RangePicker/RangePicker.js

@@ -34,6 +34,36 @@ var NOOP = function NOOP() {};
 
 var TOOLTIP_FORMAT = 'MMM d, yyyy, HH:mm';
 
+function replaceRange(value, day) {
+  var from = value.from,
+      to = value.to; // arguments to DateUtils functions are casted to Date because function arguments require Date
+
+  if (!from) {
+    from = day;
+  } else if (from && to && DateUtils.isSameDay(from, to) && DateUtils.isSameDay(day, from)) {
+    from = null;
+    to = null;
+  } else if (to && DateUtils.isSameDay(day, to)) {
+    from = day;
+    to = day;
+  } else if (from && to) {
+    from = day;
+    to = null;
+  } else {
+    to = day;
+
+    if (DateUtils.isDayBefore(to, from)) {
+      to = from;
+      from = day;
+    }
+  }
+
+  return {
+    from: from,
+    to: to
+  };
+}
+
 var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(RangePicker, _React$PureComponent);
 
@@ -63,21 +93,12 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
           onChange = _this$props.onChange;
       if (modifiers.disabled) return;
 
-      var _DateUtils$addDayToRa = DateUtils.addDayToRange(day, value),
-          from = _DateUtils$addDayToRa.from,
-          to = _DateUtils$addDayToRa.to;
+      var _replaceRange = replaceRange(value, day),
+          from = _replaceRange.from,
+          to = _replaceRange.to;
 
       from = from ? fnsStartOfDay(from) : from;
       to = to ? fnsEndOfDay(to) : to;
-
-      if (to) {
-        var now = new Date();
-
-        if (fnsIsSameDay(legacyParse(to), legacyParse(now))) {
-          to = now;
-        }
-      }
-
       onChange && onChange({
         type: ABSOLUTE,
         from: from,
@@ -382,11 +403,16 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
 
     var _this$props8 = this.props,
         value = _this$props8.value,
-        forceAdjacentMonths = _this$props8.forceAdjacentMonths;
+        forceAdjacentMonths = _this$props8.forceAdjacentMonths,
+        startAlwaysOnTheLeft = _this$props8.startAlwaysOnTheLeft;
     var left = this.state.left;
+    var toDateChanged = !!(value != null && value.to) && (value == null ? void 0 : value.to) !== (prevProps == null ? void 0 : (_prevProps$value = prevProps.value) == null ? void 0 : _prevProps$value.to);
+    var fromDateChanged = !!(value != null && value.from) && (value == null ? void 0 : value.from) !== (prevProps == null ? void 0 : (_prevProps$value2 = prevProps.value) == null ? void 0 : _prevProps$value2.from);
 
-    if (!!(value != null && value.to) && (value == null ? void 0 : value.to) !== (prevProps == null ? void 0 : (_prevProps$value = prevProps.value) == null ? void 0 : _prevProps$value.to) && !fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month)) || !!(value != null && value.from) && (value == null ? void 0 : value.from) !== (prevProps == null ? void 0 : (_prevProps$value2 = prevProps.value) == null ? void 0 : _prevProps$value2.from) && !fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month)) || forceAdjacentMonths !== prevProps.forceAdjacentMonths) {
-      this.setState(getSidesState(value, forceAdjacentMonths));
+    if (toDateChanged && !fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month)) || fromDateChanged && !fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month)) || forceAdjacentMonths !== prevProps.forceAdjacentMonths) {
+      if (startAlwaysOnTheLeft) {
+        this.setState(getSidesState(value, forceAdjacentMonths));
+      }
     }
 
     return null;

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

@@ -12,6 +12,7 @@ export interface Props extends WrappedComponentProps {
     texts: Texts;
     forceAdjacentMonths?: boolean;
     showCustomRange?: boolean;
+    startAlwaysOnTheLeft?: boolean;
 }
 export interface State {
     enteredTo?: Date | null;

package/dist/RawDateRangePicker.d.ts

@@ -24,7 +24,7 @@ export declare class RawDateRangePicker extends React.PureComponent<Props, State
     getAddons: () => AddonType[];
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "arrowColor"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "arrowColor"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/dist/RawDateRangePicker.js

@@ -1,3 +1,5 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -15,6 +17,7 @@ import fnsIsValid from 'date-fns/isValid';
 import { Container, Separator, Addon } from './DateRangePicker.styles';
 import RangePicker from './RangePicker/RangePicker';
 import { RELATIVE, ABSOLUTE, MODES, RELATIVE_PRESETS, ABSOLUTE_PRESETS } from './constants';
+import * as CONST from './constants';
 import relativeToAbsolute from './dateUtils/relativeToAbsolute';
 import AddonCollapse from './AddonCollapse/AddonCollapse';
 import RelativeRangePicker from './RelativeRangePicker/RelativeRangePicker';
@@ -64,7 +67,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         filter: value.filter
       }));
 
-      if (newValue.type === 'RELATIVE' && mode === MODES.TIME) {
+      if ((newValue.type === 'RELATIVE' || newValue.key === CONST.ALL_TIME) && mode === MODES.TIME) {
         // clicked on RangeButtons and was selecting time
         _this.setState({
           mode: MODES.DATE
@@ -92,7 +95,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
-      if (value.key === 'ALL_TIME') {
+      if (value.key === CONST.ALL_TIME) {
         onApply && onApply(omitBy(value, isUndefined));
         return;
       }
@@ -232,7 +235,10 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         texts = _this$props3.texts,
         savedFilters = _this$props3.savedFilters,
         onFilterSave = _this$props3.onFilterSave,
-        intl = _this$props3.intl;
+        intl = _this$props3.intl,
+        _this$props3$containe = _this$props3.containerClass,
+        containerClass = _this$props3$containe === void 0 ? 'ds-date-range-picker' : _this$props3$containe,
+        footerProps = _this$props3.footerProps;
     var _this$state3 = this.state,
         value = _this$state3.value,
         mode = _this$state3.mode;
@@ -251,9 +257,9 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
     var validator = validate ? validate(value) : {
       valid: true
     };
-    var isValid = (!!(from && to) || key === 'ALL_TIME') && validator.valid;
+    var isValid = key !== CONST.ALL_TIME && !!(from && to) && validator.valid;
     return /*#__PURE__*/React.createElement(Container, {
-      className: "ds-date-range-picker"
+      className: containerClass
     }, /*#__PURE__*/React.createElement(RangePicker, {
       value: value,
       onChange: this.handleRangeChange,
@@ -271,7 +277,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         className: "addon-wrapper",
         key: addon.key
       }, addon.content);
-    }), /*#__PURE__*/React.createElement(Footer, {
+    }), /*#__PURE__*/React.createElement(Footer, _extends({
       canApply: isValid,
       onApply: this.handleApply,
       dateOnly: !showTime,
@@ -283,7 +289,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       value: value,
       showTime: showTime,
       format: format
-    }));
+    }, footerProps)));
   };
 
   return RawDateRangePicker;

package/dist/utils.js

@@ -7,6 +7,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import fnsMin from 'date-fns/min';
 import fnsMax from 'date-fns/max';
 import { legacyParse } from '@date-fns/upgrade/v2';
+import { omit } from 'lodash';
 import { ABSOLUTE, CUSTOM_RANGE_KEY, RELATIVE } from './constants';
 import ADD from './dateUtils/add';
 import START_OF from './dateUtils/startOf';
@@ -54,11 +55,17 @@ export var normalizeRange = function normalizeRange(range) {
 
   var from = range.from ? legacyParse(range.from) : undefined;
   var to = range.to ? legacyParse(range.to) : undefined;
-  return _objectSpread({}, range, {
-    type: ABSOLUTE,
+
+  var dropNonAbsolute = function dropNonAbsolute(dateRange) {
+    return omit(dateRange, ['offset', 'duration']);
+  };
+
+  var absoluteRange = _objectSpread({}, dropNonAbsolute(range), {
     from: from,
     to: to
   });
+
+  return absoluteRange;
 };
 
 var getIntlMessage = function getIntlMessage(textMessageId, intl, areDefaultTextsDisabled) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.14.3",
+  "version": "0.14.4",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,12 +33,12 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-button": "^0.17.5",
-    "@synerise/ds-date-picker": "^0.6.27",
-    "@synerise/ds-icon": "^0.49.3",
-    "@synerise/ds-manageable-list": "^0.23.22",
-    "@synerise/ds-time-picker": "^0.6.26",
-    "@synerise/ds-tooltip": "^0.11.13",
+    "@synerise/ds-button": "^0.17.2",
+    "@synerise/ds-date-picker": "^0.6.24",
+    "@synerise/ds-icon": "^0.49.0",
+    "@synerise/ds-manageable-list": "^0.23.19",
+    "@synerise/ds-time-picker": "^0.6.23",
+    "@synerise/ds-tooltip": "^0.11.10",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
     "dayjs": "^1.8.35",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "28486eab4b37b485cbe2a383e3ae9b8e9d789862"
+  "gitHead": "1ff23a390382403be15699d1963ad8f6c26e5ba6"
 }