@synerise/ds-date-range-picker 0.23.1 → 0.24.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.24.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.23.1...@synerise/ds-date-range-picker@0.24.0) (2023-08-30)
+
+
+### Features
+
+* **date-range-picker:** range filter as slider with "inverted" toggler ([6ae7d9e](https://github.com/Synerise/synerise-design/commit/6ae7d9e27925c4fee502ed8fac84806836e5e727))
+
+
+
+
+
 ## [0.23.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.23.0...@synerise/ds-date-range-picker@0.23.1) (2023-08-25)
 
 

package/dist/DateRangePicker.types.d.ts

@@ -7,7 +7,7 @@ import { FilterDefinition } from './RangeFilter/RangeFilter.types';
 import { SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
 import { Props as FooterProps } from './Footer/Footer.types';
 import { RangePickerInputProps } from './RangePickerInput/RangePickerInput.types';
-import { DateLimitMode } from './RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
+import { DateLimitMode, RangeDisplayMode } from './RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 export { DateRange } from './date.types';
 export declare type CustomColorArrow = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
 export declare type AdditionalMapper = {
@@ -70,6 +70,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
     renderPopoverTrigger?: (...args: any) => JSX.Element;
     isTruncateMs?: boolean;
     filterValueSelectionModes?: DateLimitMode[];
+    filterRangeDisplayMode?: RangeDisplayMode;
 }
 /**
  * @deprecated use `DateRangePickerProps`

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

@@ -1,15 +1,17 @@
-import * as React from 'react';
+import React from 'react';
 import { WrappedComponentProps } from 'react-intl';
 import { RangeActions as RangeActionsMethods } from '../../Shared/TimeWindow/TimeWindow.types';
 import { Days } from '../../../date.types';
 import { WithTranslations } from '../../../DateRangePicker.types';
 import { ValueSelectionModes, WithDisabledProp } from '../../RangeFilter.types';
+import { RangeDisplayMode } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 export interface Props extends WrappedComponentProps, Partial<RangeActionsMethods>, WithTranslations, WithDisabledProp {
     value: string;
     onChange: (v: Days) => {};
+    rangeDisplayMode?: RangeDisplayMode;
     valueSelectionModes: ValueSelectionModes;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts" | "disabled" | "value"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "rangeDisplayMode" | "texts" | "disabled" | "value"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/dist/RangeFilter/Filters/DailyFilter/DailyFilter.js

@@ -1,7 +1,8 @@
-import * as React from 'react';
+import React from 'react';
 import { injectIntl } from 'react-intl';
 import * as S from './DailyFilter.styles';
 import TimeWindow from '../../Shared/TimeWindow/TimeWindow';
+import { RANGE_DISPLAY_MODES } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.constants';
 
 var DailyFilter = function DailyFilter(props) {
   var handleChange = function handleChange(value) {
@@ -16,11 +17,18 @@ var DailyFilter = function DailyFilter(props) {
       onRangeClear = props.onRangeClear,
       texts = props.texts,
       valueSelectionModes = props.valueSelectionModes,
-      disabled = props.disabled;
+      disabled = props.disabled,
+      rangeDisplayMode = props.rangeDisplayMode;
+  var hideHeader = rangeDisplayMode !== RANGE_DISPLAY_MODES.SLIDER;
+  var headerOptions = rangeDisplayMode === RANGE_DISPLAY_MODES.SLIDER ? {
+    includeSummary: false,
+    includeActions: false
+  } : undefined;
   return /*#__PURE__*/React.createElement(S.DailyFilterWrapper, null, /*#__PURE__*/React.createElement(TimeWindow, {
     disabled: disabled,
     texts: texts,
-    hideHeader: true,
+    hideHeader: hideHeader,
+    headerOptions: headerOptions,
     numberOfDays: 0,
     customDays: {
       0: {
@@ -40,6 +48,7 @@ var DailyFilter = function DailyFilter(props) {
     onRangePaste: onRangePaste,
     onRangeCopy: onRangeCopy,
     onRangeClear: onRangeClear,
+    rangeDisplayMode: rangeDisplayMode,
     valueSelectionModes: valueSelectionModes
   }), ' ');
 };

package/dist/RangeFilter/Filters/DailyFilter/DailyFilter.styles.js

@@ -1,5 +1,4 @@
-import styled from 'styled-components'; // eslint-disable-next-line import/prefer-default-export
-
+import styled from 'styled-components';
 export var DailyFilterWrapper = styled.div.withConfig({
   displayName: "DailyFilterstyles__DailyFilterWrapper",
   componentId: "sc-17xrhgz-0"

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" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "disabled" | "value" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<MonthlyFilterProps, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "rangeDisplayMode" | "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/Filters/MonthlyFilter/MonthlyFilter.js

@@ -332,7 +332,8 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
         timePickerProps = _this$props4.timePickerProps,
         disabled = _this$props4.disabled,
         renderRangeFormSuffix = _this$props4.renderRangeFormSuffix,
-        maxEntries = _this$props4.maxEntries; // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        maxEntries = _this$props4.maxEntries,
+        rangeDisplayMode = _this$props4.rangeDisplayMode; // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
 
     var _ref = this.props,
         _ref$min = _ref.min,
@@ -407,7 +408,8 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
             renderRangeFormSuffix: renderRangeFormSuffix,
             timePickerProps: timePickerProps
           }, _this2.getTimeWindowSettings(item), {
-            monthlyFilter: true
+            monthlyFilter: true,
+            rangeDisplayMode: rangeDisplayMode
           }))) : /*#__PURE__*/React.createElement("div", null)
         },
         texts: {

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

@@ -4,7 +4,7 @@ import type { TimePickerProps } from '@synerise/ds-time-picker';
 import { RangeActions } from '../../Shared/TimeWindow/TimeWindow.types';
 import { DenormalizedFilter, FilterDefinition, MonthlySelectValue, WithDisabledProp } from '../../RangeFilter.types';
 import { WithTranslations } from '../../../DateRangePicker.types';
-import { DateLimitMode } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
+import { RangeDisplayMode, DateLimitMode } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { COUNTED_FROM_ENUM, DAYS_OF_PERIOD_ENUM } from '../../constants';
 export declare type MonthlyFilterProps = {
     maxEntries?: number;
@@ -17,6 +17,7 @@ export declare type MonthlyFilterProps = {
     timePickerProps?: Partial<TimePickerProps>;
     rangeClipboard?: Partial<FilterDefinition>;
     valueSelectionModes?: DateLimitMode[];
+    rangeDisplayMode?: RangeDisplayMode;
 } & WithDisabledProp & Partial<RangeActions> & WithTranslations;
 export declare type Month<T = DenormalizedFilter> = {
     id: string | number;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { WeeklyFilterProps } from './WeeklyFilter.types';
-declare const WeeklyFilter: ({ value, onChange, onRangeClear, onRangePaste, onRangeCopy, rangeClipboard, intl, valueSelectionModes, texts, }: WeeklyFilterProps) => JSX.Element;
+declare const WeeklyFilter: ({ value, onChange, onRangeClear, onRangePaste, onRangeCopy, rangeClipboard, intl, valueSelectionModes, rangeDisplayMode, texts, }: WeeklyFilterProps) => JSX.Element;
 export default WeeklyFilter;

package/dist/RangeFilter/Filters/WeeklyFilter/WeeklyFilter.js

@@ -11,6 +11,7 @@ var WeeklyFilter = function WeeklyFilter(_ref) {
       rangeClipboard = _ref.rangeClipboard,
       intl = _ref.intl,
       valueSelectionModes = _ref.valueSelectionModes,
+      rangeDisplayMode = _ref.rangeDisplayMode,
       texts = _ref.texts;
   var handleDayFormatter = React.useCallback(function (dayKey) {
     return intl.formatMessage({
@@ -38,7 +39,8 @@ var WeeklyFilter = function WeeklyFilter(_ref) {
     onRangeCopy: onRangeCopy,
     onRangeClear: onRangeClear,
     rangeClipboard: rangeClipboard,
-    valueSelectionModes: valueSelectionModes
+    valueSelectionModes: valueSelectionModes,
+    rangeDisplayMode: rangeDisplayMode
   }));
 };
 

package/dist/RangeFilter/Filters/WeeklyFilter/WeeklyFilter.types.d.ts

@@ -2,13 +2,14 @@ import { IntlShape } from 'react-intl';
 import { DayOptions, RangeActions } from '../../Shared/TimeWindow/TimeWindow.types';
 import { FilterDefinition } from '../../RangeFilter.types';
 import { WithTranslations } from '../../../DateRangePicker.types';
-import { DateLimitMode } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
+import { DateLimitMode, RangeDisplayMode } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 export declare type WeeklyFilterProps = {
     value: Days;
     onChange: (days: Days) => void;
     intl: IntlShape;
     rangeClipboard: Partial<FilterDefinition>;
     valueSelectionModes: DateLimitMode[];
+    rangeDisplayMode?: RangeDisplayMode;
 } & WithTranslations & Partial<RangeActions>;
 export declare type DayKey = number | string;
 export declare type Days = {

package/dist/RangeFilter/Filters/new/Daily/Daily.js

@@ -40,7 +40,8 @@ var Daily = function Daily(_ref) {
     updatedSchedule[index] = _objectSpread({}, value[index], {
       restricted: true,
       start: dayjs(dateValueArray[0]).format(DEFAULT_TIME_FORMAT),
-      stop: dayjs(dateValueArray[1]).format(DEFAULT_TIME_FORMAT)
+      stop: dayjs(dateValueArray[1]).format(DEFAULT_TIME_FORMAT),
+      inverted: Boolean(dateValueArray[2])
     });
   }, [value]);
 

package/dist/RangeFilter/Filters/new/Monthly/Monthly.js

@@ -130,21 +130,24 @@ var Monthly = function Monthly(_ref) {
   var handleDayTimeChange = React.useCallback(function (dayValue, dayKey, guid) {
     var updatedSchedule = value;
     var start = dayValue[0],
-        end = dayValue[1];
+        end = dayValue[1],
+        inverted = dayValue[2];
 
     if (dayKey instanceof Array) {
       dayKey.forEach(function (day) {
         updatedSchedule[guid][day] = _objectSpread({}, value[guid][day], {
           restricted: true,
           start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
-          stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
+          stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined,
+          inverted: Boolean(inverted)
         });
       });
     } else {
       updatedSchedule[guid][dayKey] = _objectSpread({}, value[guid][dayKey], {
         restricted: true,
         start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
-        stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
+        stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined,
+        inverted: Boolean(inverted)
       });
     }
 

package/dist/RangeFilter/Filters/new/Weekly/Weekly.js

@@ -76,7 +76,8 @@ var Weekly = function Weekly(_ref) {
   var handleDayTimeChange = React.useCallback(function (dayValue, dayKey, guid) {
     var updatedSchedule = value;
     var start = dayValue[0],
-        end = dayValue[1];
+        end = dayValue[1],
+        inverted = dayValue[2];
 
     if (dayKey instanceof Array) {
       dayKey.forEach(function (day) {
@@ -84,7 +85,8 @@ var Weekly = function Weekly(_ref) {
           updatedSchedule[guid][day] = _objectSpread({}, value[guid][day], {
             restricted: true,
             start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
-            stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
+            stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined,
+            inverted: Boolean(inverted)
           });
         }
       });
@@ -92,7 +94,8 @@ var Weekly = function Weekly(_ref) {
       updatedSchedule[guid][dayKey] = _objectSpread({}, value[guid][dayKey], {
         restricted: true,
         start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
-        stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined
+        stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined,
+        inverted: Boolean(inverted)
       });
     }
 

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" | "valueSelectionModes" | "texts" | "value" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "allowedFilterTypes" | "hideFooter" | "onCancel"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<RangeFilterProps, "onChange" | "valueSelectionModes" | "rangeDisplayMode" | "texts" | "value" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "allowedFilterTypes" | "hideFooter" | "onCancel"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<RangeFilterProps>;

package/dist/RangeFilter/RangeFilter.js

@@ -148,7 +148,8 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
         texts = _this$props3.texts,
         hideFooter = _this$props3.hideFooter,
         valueSelectionModes = _this$props3.valueSelectionModes,
-        allowedFilterTypes = _this$props3.allowedFilterTypes;
+        allowedFilterTypes = _this$props3.allowedFilterTypes,
+        rangeDisplayMode = _this$props3.rangeDisplayMode;
     var buttonSource = allowedFilterTypes != null && allowedFilterTypes.length ? allowedFilterTypes : Object.values(TYPES);
     buttonSource.sort(function (a, b) {
       return Object.values(TYPES).indexOf(a) < Object.values(TYPES).indexOf(b) ? -1 : 1;
@@ -179,6 +180,7 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
     })), /*#__PURE__*/React.createElement(S.MainComponentWrapper, null, Component && /*#__PURE__*/React.createElement(Component, {
       intl: intl,
       texts: texts,
+      rangeDisplayMode: rangeDisplayMode,
       value: definition,
       onChange: function onChange(def) {
         var _updatedFilter;

package/dist/RangeFilter/RangeFilter.types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IntlShape } from 'react-intl';
 import { SavedFilter } from './Shared/FilterDropdown/FilterDropdown.types';
-import { DateLimitMode } from './Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
+import { DateLimitMode, RangeDisplayMode } from './Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { Props as DateRangePickerProps, Texts } from '../DateRangePicker.types';
 import { COUNTED_FROM_ENUM, DAYS_OF_PERIOD_ENUM } from './constants';
 export declare type FilterValue<T = FilterDefinition> = {
@@ -20,6 +20,7 @@ export declare type RangeFilterProps = {
     texts?: Texts;
     allowedFilterTypes?: string[];
     valueSelectionModes?: DateLimitMode[];
+    rangeDisplayMode?: RangeDisplayMode;
     rangeUnits?: Pick<DateRangePickerProps, 'rangeUnits'>;
 };
 export declare type RangeFilterState = {

package/dist/RangeFilter/Shared/TimeWindow/Header/Header.d.ts

@@ -9,5 +9,5 @@ declare type HeaderProps = {
     actions?: Action[];
     suffix?: React.ReactNode;
 };
-export declare const Header: React.NamedExoticComponent<HeaderProps>;
+export declare const Header: React.MemoExoticComponent<({ title, actions, suffix }: HeaderProps) => JSX.Element>;
 export {};

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.constants.d.ts

@@ -0,0 +1,16 @@
+import type { DateLimitMode, RangeDisplayMode } from './RangeForm.types';
+export declare const FORM_MODES: Record<string, DateLimitMode>;
+export declare const RANGE_DISPLAY_MODES: Record<string, RangeDisplayMode>;
+export declare const RANGE_FORM_INTL_KEYS: {
+    Hour: {
+        id: string;
+        defaultMessage: string;
+    };
+    Range: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export declare const SLIDER_MAX = 24;
+export declare const SLIDER_MIN = 0;
+export declare const SLIDER_STEP = 0.25;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.constants.js

@@ -0,0 +1,21 @@
+export var FORM_MODES = {
+  HOUR: 'Hour',
+  RANGE: 'Range'
+};
+export var RANGE_DISPLAY_MODES = {
+  TIMEPICKER: 'timepicker',
+  SLIDER: 'slider'
+};
+export var RANGE_FORM_INTL_KEYS = {
+  Hour: {
+    id: 'DS.DATE-RANGE-PICKER.HOUR',
+    defaultMessage: 'Hour'
+  },
+  Range: {
+    id: 'DS.DATE-RANGE-PICKER.RANGE',
+    defaultMessage: 'Range'
+  }
+};
+export var SLIDER_MAX = 24;
+export var SLIDER_MIN = 0;
+export var SLIDER_STEP = 0.25;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.d.ts

@@ -1,15 +1,6 @@
-import * as React from 'react';
-import { DateLimitMode, RangeFormProps } from './RangeForm.types';
-export declare const FORM_MODES: Record<string, DateLimitMode>;
-export declare const RANGE_FORM_INTL_KEYS: {
-    Hour: {
-        id: string;
-        defaultMessage: string;
-    };
-    Range: {
-        id: string;
-        defaultMessage: string;
-    };
-};
-declare const RangeForm: React.FC<RangeFormProps>;
+/// <reference types="react" />
+import { RangeFormProps } from './RangeForm.types';
+import { FORM_MODES, RANGE_FORM_INTL_KEYS } from './RangeForm.constants';
+export { FORM_MODES, RANGE_FORM_INTL_KEYS };
+declare const RangeForm: ({ onModeChange, disabled, startDate, endDate, onStartChange, onEndChange, onExactHourSelect, onRangeDelete, valueSelectionModes, mode, rangeDisplayMode, isInvertedRange, timePickerProps, texts, valueFormatOptions, }: RangeFormProps) => JSX.Element;
 export default RangeForm;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.js

@@ -1,28 +1,20 @@
 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); }
 
-import * as React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
+import dayjs from 'dayjs';
 import Select from '@synerise/ds-select';
 import Icon, { CloseS } from '@synerise/ds-icon';
 import { useDataFormat } from '@synerise/ds-data-format';
 import TimePicker from '@synerise/ds-time-picker';
+import Slider from '@synerise/ds-slider';
 import { theme } from '@synerise/ds-core';
 import * as S from './RangeForm.styles';
 import { getDisabledTimeOptions } from '../../../../../RangePicker/utils';
-export var FORM_MODES = {
-  HOUR: 'Hour',
-  RANGE: 'Range'
-};
-export var RANGE_FORM_INTL_KEYS = {
-  Hour: {
-    id: 'DS.DATE-RANGE-PICKER.HOUR',
-    defaultMessage: 'Hour'
-  },
-  Range: {
-    id: 'DS.DATE-RANGE-PICKER.RANGE',
-    defaultMessage: 'Range'
-  }
-};
+import { FORM_MODES, RANGE_DISPLAY_MODES, RANGE_FORM_INTL_KEYS, SLIDER_MIN, SLIDER_MAX, SLIDER_STEP } from './RangeForm.constants';
+import { numberToDate, dateToNumber } from './RangeForm.utils'; // @deprecated, moved to ./RangeForm.constants
+
+export { FORM_MODES, RANGE_FORM_INTL_KEYS };
 
 var RangeForm = function RangeForm(_ref) {
   var onModeChange = _ref.onModeChange,
@@ -37,6 +29,9 @@ var RangeForm = function RangeForm(_ref) {
       valueSelectionModes = _ref$valueSelectionMo === void 0 ? [FORM_MODES.RANGE, FORM_MODES.HOUR] : _ref$valueSelectionMo,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? valueSelectionModes[0] : _ref$mode,
+      _ref$rangeDisplayMode = _ref.rangeDisplayMode,
+      rangeDisplayMode = _ref$rangeDisplayMode === void 0 ? RANGE_DISPLAY_MODES.TIMEPICKER : _ref$rangeDisplayMode,
+      isInvertedRange = _ref.isInvertedRange,
       timePickerProps = _ref.timePickerProps,
       texts = _ref.texts,
       valueFormatOptions = _ref.valueFormatOptions;
@@ -46,22 +41,37 @@ var RangeForm = function RangeForm(_ref) {
 
   var intl = useIntl();
 
-  var _React$useState = React.useState(startDate),
-      start = _React$useState[0],
-      setStart = _React$useState[1];
+  var _useState = useState(startDate),
+      start = _useState[0],
+      setStart = _useState[1];
+
+  var _useState2 = useState(endDate),
+      end = _useState2[0],
+      setEnd = _useState2[1];
+
+  var _useState3 = useState(startDate ? dateToNumber(startDate) : SLIDER_MIN),
+      sliderStart = _useState3[0],
+      setSliderStart = _useState3[1];
 
-  var _React$useState2 = React.useState(endDate),
-      end = _React$useState2[0],
-      setEnd = _React$useState2[1];
+  var _useState4 = useState(endDate ? dateToNumber(endDate) : SLIDER_MAX),
+      sliderEnd = _useState4[0],
+      setSliderEnd = _useState4[1];
 
-  var getPopupContainer = React.useCallback(function (node) {
+  useEffect(function () {
+    if (rangeDisplayMode !== RANGE_DISPLAY_MODES.SLIDER) {
+      setStart(startDate);
+      setEnd(endDate);
+    } else {
+      setSliderStart(startDate ? dateToNumber(startDate) : SLIDER_MIN);
+      setSliderEnd(endDate ? dateToNumber(endDate) : SLIDER_MAX);
+    }
+  }, [rangeDisplayMode, startDate, endDate]);
+
+  var getPopupContainer = function getPopupContainer(node) {
     return node.parentElement != null ? node.parentElement : document.body;
-  }, []);
-  React.useEffect(function () {
-    setStart(startDate);
-    setEnd(endDate);
-  }, [startDate, endDate]);
-  var singleHourPicker = React.useMemo(function () {
+  };
+
+  var singleHourPicker = function singleHourPicker() {
     return /*#__PURE__*/React.createElement(TimePicker, _extends({
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
@@ -80,8 +90,59 @@ var RangeForm = function RangeForm(_ref) {
       use12HourClock: is12HoursClock,
       valueFormatOptions: valueFormatOptions
     }, timePickerProps));
-  }, [start, onExactHourSelect, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock, valueFormatOptions]);
-  var renderRangePicker = React.useCallback(function () {
+  };
+
+  var timeFormatByClockMode = is12HoursClock ? 'hh:mm A' : 'HH:mm';
+
+  var tipFormatter = function tipFormatter(value) {
+    if (value === undefined) return null;
+    var valueAsDate = numberToDate(value, SLIDER_MAX);
+    return dayjs(valueAsDate).format(timeFormatByClockMode);
+  };
+
+  var renderRangeSlider = function renderRangeSlider() {
+    var handleSliderChange = function handleSliderChange(range) {
+      if (range[0] !== sliderStart) {
+        setSliderStart(range[0]);
+      } else if (range[1] !== sliderEnd) {
+        setSliderEnd(range[1]);
+      }
+    };
+
+    var handleSliderAfterChange = function handleSliderAfterChange(range) {
+      var currentStartDateAsNumber = startDate ? dateToNumber(startDate) : SLIDER_MIN;
+      var currentEndDateAsNumber = endDate ? dateToNumber(endDate) : SLIDER_MAX;
+      var newStartDate = numberToDate(range[0], SLIDER_MAX, true);
+      var newEndDate = numberToDate(range[1], SLIDER_MAX);
+
+      if (range[0] !== currentStartDateAsNumber) {
+        setSliderStart(range[0]);
+        onStartChange(newStartDate);
+      } else if (range[1] !== currentEndDateAsNumber) {
+        setSliderEnd(range[1]);
+        onEndChange(newEndDate);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement(Slider, {
+      range: true,
+      min: SLIDER_MIN,
+      max: SLIDER_MAX,
+      step: SLIDER_STEP,
+      inverted: isInvertedRange,
+      value: [sliderStart, sliderEnd],
+      included: true,
+      getTooltipPopupContainer: function getTooltipPopupContainer(container) {
+        return container;
+      },
+      tooltipVisible: true,
+      onAfterChange: handleSliderAfterChange,
+      onChange: handleSliderChange,
+      tipFormatter: tipFormatter
+    });
+  };
+
+  var renderRangePicker = function renderRangePicker() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
@@ -114,12 +175,22 @@ var RangeForm = function RangeForm(_ref) {
       disabledSeconds: getDisabledTimeOptions(end || start, 'SECONDS', start, null, is12HoursClock),
       use12HourClock: is12HoursClock
     }, timePickerProps)));
-  }, [start, end, onStartChange, onEndChange, setStart, setEnd, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock, valueFormatOptions]);
-  var getModeLabel = React.useCallback(function (modeName) {
+  };
+
+  var renderRangeUI = function renderRangeUI() {
+    if (rangeDisplayMode === RANGE_DISPLAY_MODES.SLIDER) {
+      return renderRangeSlider();
+    }
+
+    return renderRangePicker();
+  };
+
+  var getModeLabel = function getModeLabel(modeName) {
     if (texts && texts[modeName]) return texts[modeName];
     return intl.formatMessage(RANGE_FORM_INTL_KEYS[modeName]);
-  }, [texts, intl]);
-  var limitModeSelect = React.useMemo(function () {
+  };
+
+  var limitModeSelect = function limitModeSelect() {
     return valueSelectionModes.length > 1 ? /*#__PURE__*/React.createElement(Select, {
       value: mode,
       disabled: disabled,
@@ -133,10 +204,12 @@ var RangeForm = function RangeForm(_ref) {
         value: modeName
       }, getModeLabel(modeName));
     })) : null;
-  }, [mode, onModeChange, getPopupContainer, valueSelectionModes, disabled, getModeLabel]);
+  };
+
   return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Row, {
-    justifyContent: "flex-start"
-  }, limitModeSelect, mode === FORM_MODES.HOUR ? singleHourPicker : renderRangePicker(), !!onRangeDelete && !disabled && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
+    justifyContent: "flex-start",
+    mode: rangeDisplayMode
+  }, rangeDisplayMode !== RANGE_DISPLAY_MODES.SLIDER && limitModeSelect, mode === FORM_MODES.HOUR ? singleHourPicker() : renderRangeUI(), !!onRangeDelete && !disabled && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {
     onClick: onRangeDelete
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CloseS, null),

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.styles.d.ts

@@ -1,6 +1,8 @@
+import type { RangeDisplayMode } from './RangeForm.types';
 export declare const RemoveIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Row: import("styled-components").StyledComponent<"div", any, {
     justifyContent: string;
+    mode: RangeDisplayMode;
 }, never>;
 export declare const Separator: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 export var RemoveIconWrapper = styled.div.withConfig({
   displayName: "RangeFormstyles__RemoveIconWrapper",
   componentId: "sc-4k3o5r-0"
@@ -10,8 +10,12 @@ export var Container = styled.div.withConfig({
 export var Row = styled.div.withConfig({
   displayName: "RangeFormstyles__Row",
   componentId: "sc-4k3o5r-2"
-})(["width:100%;display:flex;justify-content:", ";min-height:32px;margin:8px 0;"], function (props) {
+})(["width:100%;display:flex;justify-content:", ";min-height:32px;margin:8px 0;", " .ant-slider{width:100%;margin:24px 8px 8px;}.ant-tooltip-inner{white-space:nowrap;}&& .ant-slider-handle:focus,&& .ant-slider-handle:hover{.ant-tooltip-content{background-color:transparent;}.ant-tooltip-inner{color:", ";}}"], function (props) {
   return props.justifyContent;
+}, function (props) {
+  return props.mode === 'slider' && css(["&{column-gap:8px;margin-top:16px;", "{margin-top:14px;}}"], RemoveIconWrapper);
+}, function (props) {
+  return props.theme.palette['grey-600'];
 });
 export var Separator = styled.span.withConfig({
   displayName: "RangeFormstyles__Separator",

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types.d.ts

@@ -3,6 +3,7 @@ import { WithTranslations } from '../../../../../DateRangePicker.types';
 import { RangeFormContainerProps } from '../RangeFormContainer.types';
 import { WithDisabledProp } from '../../../../RangeFilter.types';
 export declare type DateLimitMode = 'Hour' | 'Range';
+export declare type RangeDisplayMode = 'timepicker' | 'slider';
 export declare type RangeFormProps = {
     mode: DateLimitMode;
     onModeChange: (mode: DateLimitMode) => void;
@@ -14,6 +15,8 @@ export declare type RangeFormProps = {
     onExactHourSelect: (value?: Date) => void;
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
+    rangeDisplayMode?: RangeDisplayMode;
+    isInvertedRange?: boolean;
 } & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions'>;
 export declare type RangeFormTexts = {
     range: React.ReactNode | string;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.utils.d.ts

@@ -0,0 +1,2 @@
+export declare const numberToDate: (number: number, max: number, isRangeStart?: boolean | undefined) => Date;
+export declare const dateToNumber: (date: Date) => number;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.utils.js

@@ -0,0 +1,19 @@
+import dayjs from 'dayjs';
+import startOf from '../../../../../dateUtils/startOf';
+import endOf from '../../../../../dateUtils/endOf';
+export var numberToDate = function numberToDate(number, max, isRangeStart) {
+  if (number === max) {
+    return dayjs().endOf('day').toDate();
+  }
+
+  var hours = Math.floor(number);
+  var minutes = 60 * (number % 1);
+  var result = dayjs().hour(hours).minute(minutes).toDate();
+  return isRangeStart ? startOf.MINUTES(result) : endOf.MINUTES(result);
+};
+export var dateToNumber = function dateToNumber(date) {
+  var integer = date.getHours();
+  var decimal = Math.round(date.getMinutes() / 60 * 4) / 4;
+  var result = integer + decimal;
+  return result;
+};

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+/// <reference types="react" />
 import type { RangeFormContainerProps } from './RangeFormContainer.types';
-declare const RangeFormContainer: React.FC<RangeFormContainerProps>;
+declare const RangeFormContainer: ({ activeDays, disabled, days, dayKeys, getDayValue, getDayLabel, onDayTimeChange, onMultipleDayTimeChange, hideHeader, headerOptions, monthlyFilter, monthlyFilterPeriod, onRangeClear, onRangePaste, onRangeCopy, onRangeDelete, texts, onChange, valueSelectionModes, rangeDisplayMode, onModeChange, timePickerProps, renderSuffix, timeFormat, valueFormatOptions, }: RangeFormContainerProps) => JSX.Element;
 export default RangeFormContainer;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.js

@@ -5,12 +5,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
 import RangeForm from './RangeForm/RangeForm';
+import { RANGE_DISPLAY_MODES } from './RangeForm/RangeForm.constants';
 import { getDateFromDayValue, getDefaultFilterForLimitMode } from '../utils';
 import { Header } from '../Header/Header';
 import RangeSummary from '../RangeSummary/RangeSummary';
 import RangeActions from '../RangeActions/RangeActions';
 import { DEFAULT_LIMIT_MODE } from '../TimeWindow';
+import * as S from './RangeFormContainer.styles';
 
 var RangeFormContainer = function RangeFormContainer(_ref) {
   var activeDays = _ref.activeDays,
@@ -22,6 +25,8 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       onDayTimeChange = _ref.onDayTimeChange,
       onMultipleDayTimeChange = _ref.onMultipleDayTimeChange,
       hideHeader = _ref.hideHeader,
+      _ref$headerOptions = _ref.headerOptions,
+      headerOptions = _ref$headerOptions === void 0 ? {} : _ref$headerOptions,
       monthlyFilter = _ref.monthlyFilter,
       monthlyFilterPeriod = _ref.monthlyFilterPeriod,
       onRangeClear = _ref.onRangeClear,
@@ -33,6 +38,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       onChange = _ref.onChange,
       _ref$valueSelectionMo = _ref.valueSelectionModes,
       valueSelectionModes = _ref$valueSelectionMo === void 0 ? ['Range', 'Hour'] : _ref$valueSelectionMo,
+      rangeDisplayMode = _ref.rangeDisplayMode,
       onModeChange = _ref.onModeChange,
       timePickerProps = _ref.timePickerProps,
       renderSuffix = _ref.renderSuffix,
@@ -63,8 +69,9 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
   }, [dayValue, valueSelectionModes]);
   var onStartChange = React.useCallback(function (start) {
     var dayVal = getDayValue(activeDays[0]);
-    var end = dayVal.stop;
-    var value = [start, end ? getDateFromDayValue(end, timeFormat) : undefined];
+    var inverted = dayVal.inverted,
+        end = dayVal.stop;
+    var value = [start, end ? getDateFromDayValue(end, timeFormat) : undefined, Boolean(inverted)];
 
     if (activeDays.length > 1) {
       onMultipleDayTimeChange(value);
@@ -74,8 +81,22 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
   }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, getDayValue, dayKeys]);
   var onEndChange = React.useCallback(function (end) {
     var dayVal = getDayValue(activeDays[0]);
-    var start = dayVal.start;
-    var value = [start ? getDateFromDayValue(start, timeFormat) : undefined, end];
+    var start = dayVal.start,
+        inverted = dayVal.inverted;
+    var value = [start ? getDateFromDayValue(start, timeFormat) : undefined, end, Boolean(inverted)];
+
+    if (activeDays.length > 1) {
+      onMultipleDayTimeChange(value);
+    } else {
+      onDayTimeChange(value, dayKeys);
+    }
+  }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, getDayValue, dayKeys]);
+  var toggleInverted = React.useCallback(function () {
+    var dayVal = getDayValue(activeDays[0]);
+    var start = dayVal.start,
+        inverted = dayVal.inverted,
+        end = dayVal.stop;
+    var value = [start ? getDateFromDayValue(start, timeFormat) : undefined, end ? getDateFromDayValue(end, timeFormat) : undefined, Boolean(!inverted)];
 
     if (activeDays.length > 1) {
       onMultipleDayTimeChange(value);
@@ -85,9 +106,9 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
   }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, timeFormat, getDayValue, dayKeys]);
   var onExactHourSelect = React.useCallback(function (value) {
     if (activeDays.length > 1) {
-      onMultipleDayTimeChange([value, value]);
+      onMultipleDayTimeChange([value, value, false]);
     } else {
-      onDayTimeChange([value, value], dayKeys);
+      onDayTimeChange([value, value, false], dayKeys);
     }
   }, [activeDays, onMultipleDayTimeChange, onDayTimeChange, dayKeys]);
   var rangeForm = React.useMemo(function () {
@@ -107,20 +128,34 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       onRangeDelete: onRangeDelete,
       valueSelectionModes: valueSelectionModes,
       valueFormatOptions: valueFormatOptions,
-      timePickerProps: timePickerProps
+      timePickerProps: timePickerProps,
+      rangeDisplayMode: rangeDisplayMode,
+      isInvertedRange: Boolean(dayValue == null ? void 0 : dayValue.inverted)
     });
-  }, [timeFormat, valueSelectionModes, handleModeChange, mode, disabled, dayValue, onRangeDelete, texts, timePickerProps, onStartChange, onEndChange, onExactHourSelect, valueFormatOptions]);
+  }, [timeFormat, rangeDisplayMode, valueSelectionModes, handleModeChange, mode, disabled, dayValue, onRangeDelete, texts, timePickerProps, onStartChange, onEndChange, onExactHourSelect, valueFormatOptions]);
+  var invertedToggleLink = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement(S.InvertAction, {
+      onClick: toggleInverted
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.DATE-RANGE-PICKER.FILTER-INVERSE-SELECTION",
+      defaultMessage: "Inverse selection"
+    }));
+  }, [toggleInverted]);
   var suffix = React.useMemo(function () {
-    return renderSuffix ? renderSuffix() : /*#__PURE__*/React.createElement(RangeActions, {
+    var _headerOptions$includ = headerOptions.includeActions,
+        includeActions = _headerOptions$includ === void 0 ? true : _headerOptions$includ;
+    return renderSuffix ? renderSuffix() : /*#__PURE__*/React.createElement(React.Fragment, null, rangeDisplayMode === RANGE_DISPLAY_MODES.SLIDER && invertedToggleLink, includeActions && /*#__PURE__*/React.createElement(RangeActions, {
       onRangeClear: onRangeClear,
       onRangeCopy: onRangeCopy,
       onRangePaste: onRangePaste,
       texts: texts
-    });
-  }, [onRangePaste, onRangeClear, onRangeCopy, texts, renderSuffix]);
+    }));
+  }, [onRangePaste, onRangeClear, onRangeCopy, texts, renderSuffix, rangeDisplayMode, invertedToggleLink, headerOptions]);
   if (hideHeader) return rangeForm;
+  var _headerOptions$includ2 = headerOptions.includeSummary,
+      includeSummary = _headerOptions$includ2 === void 0 ? true : _headerOptions$includ2;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Header, {
-    title: /*#__PURE__*/React.createElement(RangeSummary, {
+    title: includeSummary && /*#__PURE__*/React.createElement(RangeSummary, {
       dayKeys: dayKeys,
       getDayLabel: getDayLabel,
       monthlyFilter: monthlyFilter,

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.styles.d.ts

@@ -0,0 +1 @@
+export declare const InvertAction: import("styled-components").StyledComponent<"a", any, {}, never>;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.styles.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+export var InvertAction = styled.a.withConfig({
+  displayName: "RangeFormContainerstyles__InvertAction",
+  componentId: "vxg8mc-0"
+})(["align-self:center;margin-right:6px;"]);

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types.d.ts

@@ -3,8 +3,8 @@ import type { TimePickerProps } from '@synerise/ds-time-picker';
 import type { DateToFormatOptions } from '@synerise/ds-data-format';
 import { DayKey, RangeActions, TimeWindowProps, TimeWindowTexts } from '../TimeWindow.types';
 import { FilterDefinition, WithDisabledProp } from '../../../RangeFilter.types';
-import { DateLimitMode } from './RangeForm/RangeForm.types';
-export declare type DateValue = [Date | undefined, Date | undefined];
+import { DateLimitMode, RangeDisplayMode } from './RangeForm/RangeForm.types';
+export declare type DateValue = [Date | undefined, Date | undefined, boolean | undefined];
 export declare type RangeFormContainerProps = {
     activeDays: DayKey[];
     dayKeys: DayKey | DayKey[];
@@ -15,6 +15,7 @@ export declare type RangeFormContainerProps = {
     onModeChange?: (mode: DateLimitMode) => void;
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
+    rangeDisplayMode?: RangeDisplayMode;
     texts: Partial<TimeWindowTexts>;
     /**
      * @deprecated use `valueFormatOptions` instead
@@ -23,4 +24,4 @@ export declare type RangeFormContainerProps = {
     valueFormatOptions?: DateToFormatOptions;
     timePickerProps?: Partial<TimePickerProps>;
     renderSuffix?: () => React.ReactNode;
-} & Pick<TimeWindowProps, 'monthlyFilter' | 'monthlyFilterPeriod' | 'hideHeader' | 'onChange' | 'days'> & WithDisabledProp & Partial<RangeActions>;
+} & Pick<TimeWindowProps, 'monthlyFilter' | 'monthlyFilterPeriod' | 'hideHeader' | 'headerOptions' | 'onChange' | 'days'> & WithDisabledProp & Partial<RangeActions>;

package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { TimeWindowProps } from './TimeWindow.types';
 import { DateLimitMode } from './RangeFormContainer/RangeForm/RangeForm.types';
 export declare const DEFAULT_LIMIT_MODE: DateLimitMode;

package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.js

@@ -14,11 +14,9 @@ function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.crea
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from 'react';
+import React, { PureComponent, createRef } from 'react';
 import { range } from 'lodash';
-import { FormattedMessage, injectIntl } from 'react-intl'; // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-// @ts-ignore
-
+import { FormattedMessage, injectIntl } from 'react-intl';
 import dayjs from 'dayjs';
 import { withDataFormat } from '@synerise/ds-data-format';
 import * as S from './TimeWindow.styles';
@@ -33,8 +31,8 @@ import SelectionHint from '../SelectionHint/SelectionHint';
 import { EU_NOTATION_MONTH_DAYS_INDEXES, EU_NOTATION_WEEK_DAYS_INDEXES, US_NOTATION_MONTH_DAYS_INDEXES, US_NOTATION_WEEK_DAYS_INDEXES } from './constants/timeWindow.constants';
 export var DEFAULT_LIMIT_MODE = 'Range';
 
-var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
-  _inheritsLoose(TimeWindowBase, _React$PureComponent);
+var TimeWindowBase = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(TimeWindowBase, _PureComponent);
 
   function TimeWindowBase() {
     var _this;
@@ -43,14 +41,14 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
 
-    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       activeDays: _this.props.daily ? [0] : [],
       controlKeyPressed: false
     });
 
-    _defineProperty(_assertThisInitialized(_this), "wrapperRef", React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "wrapperRef", createRef());
 
     _defineProperty(_assertThisInitialized(_this), "isDayRestricted", function (dayKey) {
       var days = _this.props.days;
@@ -158,7 +156,8 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
       _this.handleDayChange(dayKey, {
         restricted: true,
         start: value[0] !== undefined ? dayjs(value[0]).format(TIME_FORMAT) : DEFAULT_RANGE_START,
-        stop: value[1] !== undefined ? dayjs(value[1]).format(TIME_FORMAT) : DEFAULT_RANGE_END
+        stop: value[1] !== undefined ? dayjs(value[1]).format(TIME_FORMAT) : DEFAULT_RANGE_END,
+        inverted: Boolean(value[2])
       });
     });
 
@@ -173,6 +172,7 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
           day: k,
           start: dayjs(value[0]).format(TIME_FORMAT),
           stop: dayjs(value[1]).format(TIME_FORMAT),
+          inverted: Boolean(value[2]),
           restricted: true
         });
       });
@@ -252,7 +252,7 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
       var activeDays = _this.state.activeDays;
 
       if (rangeClipboard != null && rangeClipboard.stop && rangeClipboard != null && rangeClipboard.start) {
-        activeDays.length > 1 ? _this.handleMultipleDayTimeChange([getDateFromDayValue(rangeClipboard.start), getDateFromDayValue(rangeClipboard.stop)]) : _this.handleDayTimeChange([getDateFromDayValue(rangeClipboard.start), getDateFromDayValue(rangeClipboard.stop)], dayKeys);
+        activeDays.length > 1 ? _this.handleMultipleDayTimeChange([getDateFromDayValue(rangeClipboard.start), getDateFromDayValue(rangeClipboard.stop), rangeClipboard == null ? void 0 : rangeClipboard.inverted]) : _this.handleDayTimeChange([getDateFromDayValue(rangeClipboard.start), getDateFromDayValue(rangeClipboard.stop), rangeClipboard == null ? void 0 : rangeClipboard.inverted], dayKeys);
       }
     });
 
@@ -264,7 +264,8 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
 
       onRangeCopy && onRangeCopy({
         start: dayValue.start,
-        stop: dayValue.stop
+        stop: dayValue.stop,
+        inverted: dayValue.inverted
       });
     });
 
@@ -337,7 +338,7 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
       var daily = _this.props.daily;
 
       if (!daily && !_this.haveActiveDaysCommonRange()) {
-        _this.handleMultipleDayTimeChange([getDateFromDayValue(DEFAULT_RANGE_START), getDateFromDayValue(DEFAULT_RANGE_END)]);
+        _this.handleMultipleDayTimeChange([getDateFromDayValue(DEFAULT_RANGE_START), getDateFromDayValue(DEFAULT_RANGE_END), false]);
       }
 
       _this.setState({
@@ -349,6 +350,7 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
       var activeDays = _this.state.activeDays;
       var _this$props9 = _this.props,
           hideHeader = _this$props9.hideHeader,
+          headerOptions = _this$props9.headerOptions,
           monthlyFilterPeriod = _this$props9.monthlyFilterPeriod,
           monthlyFilter = _this$props9.monthlyFilter,
           daily = _this$props9.daily,
@@ -358,7 +360,8 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
           valueSelectionModes = _this$props9.valueSelectionModes,
           renderRangeFormSuffix = _this$props9.renderRangeFormSuffix,
           timePickerProps = _this$props9.timePickerProps,
-          disabled = _this$props9.disabled;
+          disabled = _this$props9.disabled,
+          rangeDisplayMode = _this$props9.rangeDisplayMode;
       return /*#__PURE__*/React.createElement(RangeFormContainer, {
         disabled: disabled,
         onChange: onChange,
@@ -375,13 +378,15 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
           return _this.handleRangePaste(dayKeys);
         },
         hideHeader: hideHeader,
+        headerOptions: headerOptions,
         monthlyFilter: monthlyFilter,
         monthlyFilterPeriod: monthlyFilterPeriod,
         onRangeDelete: daily ? undefined : _this.handleRangeDelete,
         texts: texts || {},
         renderSuffix: renderRangeFormSuffix,
         timePickerProps: timePickerProps,
-        valueSelectionModes: valueSelectionModes
+        valueSelectionModes: valueSelectionModes,
+        rangeDisplayMode: rangeDisplayMode
       });
     });
 
@@ -533,7 +538,7 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   return TimeWindowBase;
-}(React.PureComponent);
+}(PureComponent);
 
 _defineProperty(TimeWindowBase, "defaultProps", {
   days: {},

package/dist/RangeFilter/Shared/TimeWindow/TimeWindow.types.d.ts

@@ -5,7 +5,7 @@ import type { WithDataFormatProps } from '@synerise/ds-data-format';
 import { DayProps } from './Day/Day.types';
 import { FilterDefinition, WithDisabledProp } from '../../RangeFilter.types';
 import { GridTexts } from './Grid/Grid.types';
-import { DateLimitMode } from './RangeFormContainer/RangeForm/RangeForm.types';
+import { DateLimitMode, RangeDisplayMode } from './RangeFormContainer/RangeForm/RangeForm.types';
 export declare type DayKey = number | string;
 export declare type DayOptions = {
     display?: boolean;
@@ -47,6 +47,10 @@ export declare type TimeWindowProps = {
     dayTemplate: (day: DayKey) => object;
     dayFormatter: (day: DayKey, long?: boolean) => string | React.ReactNode;
     hideHeader?: boolean;
+    headerOptions?: {
+        includeSummary?: boolean;
+        includeActions?: boolean;
+    };
     onCheckDay?: (dayKey: DayKey) => void;
     onSelectAll?: () => void;
     onUnselectAll?: () => void;
@@ -57,6 +61,7 @@ export declare type TimeWindowProps = {
     daily?: boolean;
     rangeClipboard: Partial<FilterDefinition>;
     valueSelectionModes: DateLimitMode[];
+    rangeDisplayMode?: RangeDisplayMode;
     texts?: TimeWindowTexts & GridTexts;
     renderRangeFormSuffix?: () => React.ReactNode;
     timePickerProps?: Partial<TimePickerProps>;

package/dist/RangeFilter/constants.d.ts

@@ -24,7 +24,7 @@ export declare const TYPES_DATA: {
     MONTHLY: {
         labelTranslationKey: string;
         defaultLabel: string;
-        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"> & {
+        component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/MonthlyFilter/MonthlyFilter.types").MonthlyFilterProps, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "rangeDisplayMode" | "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>;
@@ -39,13 +39,13 @@ export declare const TYPES_DATA: {
     WEEKLY: {
         labelTranslationKey: string;
         defaultLabel: string;
-        component: ({ value, onChange, onRangeClear, onRangePaste, onRangeCopy, rangeClipboard, intl, valueSelectionModes, texts, }: import("./Filters/WeeklyFilter/WeeklyFilter.types").WeeklyFilterProps) => JSX.Element;
+        component: ({ value, onChange, onRangeClear, onRangePaste, onRangeCopy, rangeClipboard, intl, valueSelectionModes, rangeDisplayMode, texts, }: import("./Filters/WeeklyFilter/WeeklyFilter.types").WeeklyFilterProps) => JSX.Element;
         definition: {};
     };
     DAILY: {
         labelTranslationKey: string;
         defaultLabel: string;
-        component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/DailyFilter/DailyFilter").Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts" | "disabled" | "value"> & {
+        component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/DailyFilter/DailyFilter").Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "rangeDisplayMode" | "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/RawDateRangePicker.d.ts

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

package/dist/RawDateRangePicker.js

@@ -330,6 +330,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
         _this$props4$disableA = _this$props4.disableAbsoluteTimepickerInRelative,
         disableAbsoluteTimepickerInRelative = _this$props4$disableA === void 0 ? false : _this$props4$disableA,
         filterValueSelectionModes = _this$props4.filterValueSelectionModes,
+        filterRangeDisplayMode = _this$props4.filterRangeDisplayMode,
         _this$props4$showNowB = _this$props4.showNowButton,
         showNowButton = _this$props4$showNowB === void 0 ? true : _this$props4$showNowB;
     var _this$state3 = this.state,
@@ -356,7 +357,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
       savedFilters: savedFilters,
       allowedFilterTypes: allowedFilterTypes,
       onFilterSave: onFilterSave,
-      valueSelectionModes: filterValueSelectionModes
+      valueSelectionModes: filterValueSelectionModes,
+      rangeDisplayMode: filterRangeDisplayMode
     }));
     var validator = validate ? validate(value) : {
       valid: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.23.1",
+  "version": "0.24.0",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,22 +33,22 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-badge": "^0.6.33",
+    "@synerise/ds-badge": "^0.6.34",
     "@synerise/ds-button": "^0.18.0",
     "@synerise/ds-button-group": "^0.6.28",
     "@synerise/ds-data-format": "^0.4.1",
-    "@synerise/ds-date-picker": "^0.10.11",
-    "@synerise/ds-dropdown": "^0.17.74",
+    "@synerise/ds-date-picker": "^0.10.12",
+    "@synerise/ds-dropdown": "^0.17.75",
     "@synerise/ds-icon": "^0.58.0",
-    "@synerise/ds-inline-edit": "^0.6.73",
-    "@synerise/ds-input": "^0.18.48",
-    "@synerise/ds-input-number": "^0.8.21",
-    "@synerise/ds-manageable-list": "^0.26.2",
+    "@synerise/ds-inline-edit": "^0.6.74",
+    "@synerise/ds-input": "^0.18.49",
+    "@synerise/ds-input-number": "^0.8.22",
+    "@synerise/ds-manageable-list": "^0.26.3",
     "@synerise/ds-menu": "^0.17.16",
     "@synerise/ds-scrollbar": "^0.6.5",
-    "@synerise/ds-select": "^0.15.13",
-    "@synerise/ds-tags": "^0.8.8",
-    "@synerise/ds-time-picker": "^0.8.2",
+    "@synerise/ds-slider": "^0.12.24",
+    "@synerise/ds-tags": "^0.8.9",
+    "@synerise/ds-time-picker": "^0.8.3",
     "@synerise/ds-tooltip": "^0.14.2",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
@@ -67,5 +67,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "9d424b025fe368bbf3beccea2102f000f4d7e82c"
+  "gitHead": "291e114ff38d1a8e9d5ad8d9e499add6c6f25ee5"
 }