@synerise/ds-date-range-picker 0.25.0 → 0.25.1

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.25.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.25.0...@synerise/ds-date-range-picker@0.25.1) (2023-10-18)
+
+
+### Bug Fixes
+
+* **date-range-picker:** ui/ux updates to filter and relative section ([8bb636b](https://github.com/Synerise/synerise-design/commit/8bb636b185a5fe98a4ef70350dc387493ac6f0a5))
+
+
+
+
+
 # [0.25.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.24.10...@synerise/ds-date-range-picker@0.25.0) (2023-10-17)
 
 

package/README.md

@@ -58,7 +58,8 @@ const value = {
 | 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()                                                    |
+| value                | Value of the picker                                                 | DateRange            |                                                     |
+| defaultValue         | Default value of the picker (when value is undefined and when user clears input) | DateRange            |                                                     |
 | 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 | -                                                |
 | filterValueSelectionModes  | Allowed modes to display in filter | DateLimitMode[] | ["Range", "Hour"]                                                |

package/dist/DateRangePicker.js

@@ -17,6 +17,7 @@ import { getDefaultTexts } from './utils';
 
 var DateRangePicker = function DateRangePicker(props) {
   var value = props.value,
+      defaultValue = props.defaultValue,
       onApply = props.onApply,
       showTime = props.showTime,
       texts = props.texts,
@@ -37,12 +38,13 @@ var DateRangePicker = function DateRangePicker(props) {
       _props$readOnly = props.readOnly,
       readOnly = _props$readOnly === void 0 ? false : _props$readOnly;
   var intl = useIntl();
+  var selectedRange = value || defaultValue;
 
   var _React$useState = React.useState(false),
       popupVisible = _React$useState[0],
       setPopupVisible = _React$useState[1];
 
-  var _React$useState2 = React.useState(value),
+  var _React$useState2 = React.useState(selectedRange),
       selectedDate = _React$useState2[0],
       setSelectedDate = _React$useState2[1];
 
@@ -59,17 +61,18 @@ var DateRangePicker = function DateRangePicker(props) {
     }
   }, [popupVisible]);
   React.useEffect(function () {
-    if (!isEqual(value, selectedDate)) {
-      setSelectedDate(value);
+    if (!isEqual(selectedRange, selectedDate)) {
+      setSelectedDate(selectedRange);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [value]);
-  var onApplyCallback = React.useCallback(function (val) {
-    onApply && onApply(val);
-    setSelectedDate(val);
+  }, [selectedRange]);
+  var onApplyCallback = React.useCallback(function (range) {
+    var finalDateRange = range === undefined && defaultValue !== undefined ? defaultValue : range;
+    onApply && onApply(finalDateRange);
+    setSelectedDate(finalDateRange);
     setPopupVisible(false);
     setInputActive(false);
-  }, [onApply]);
+  }, [defaultValue, onApply]);
 
   var conditionalVisibilityProps = _objectSpread({}, popupVisible === false && {
     visible: false

package/dist/DateRangePicker.types.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { WrappedComponentProps } from 'react-intl';
 import { PopoverProps } from 'antd/lib/popover';
 import { DateToFormatOptions } from '@synerise/ds-data-format';
-import { DateFilter, DateRange, RelativeUnits } from './date.types';
+import { DateFilter, DateRange, DateRangePreset, 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';
@@ -42,7 +42,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
     onFilterSave?: (filters: SavedFilter[]) => void;
     popoverProps?: Partial<PopoverProps>;
     popoverTrigger?: ReactNode;
-    ranges?: DateRange[];
+    ranges?: DateRangePreset[];
     rangeUnits?: Array<RelativeUnits>;
     relativeFuture?: boolean;
     relativePast?: boolean;
@@ -59,6 +59,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
         message?: string;
     };
     value: DateRange;
+    defaultValue?: DateRange;
     /**
      * transforms value, by default omits ALL_TIME props
      */

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { RangeFilterStatusProps } from './RangeFilterStatus.types';
-declare const RangeFilterStatus: React.FC<RangeFilterStatusProps>;
+declare const RangeFilterStatus: ({ onFilterRemove, disabled, filter, label, onClick, texts }: RangeFilterStatusProps) => JSX.Element;
 export default RangeFilterStatus;

package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import Button from '@synerise/ds-button';
 import ContentItem from '@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem';
 import Badge from '@synerise/ds-badge';
@@ -13,16 +13,17 @@ var RangeFilterStatus = function RangeFilterStatus(_ref) {
       disabled = _ref.disabled,
       filter = _ref.filter,
       label = _ref.label,
-      _onClick = _ref.onClick;
+      _onClick = _ref.onClick,
+      texts = _ref.texts;
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(S.Container, null, !filter ? /*#__PURE__*/React.createElement(Button.Creator, {
+  return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Title, null, texts == null ? void 0 : texts.filter), !filter ? /*#__PURE__*/React.createElement(Button.Creator, {
     label: label,
     disabled: disabled,
     onClick: _onClick,
     block: true
   }) : /*#__PURE__*/React.createElement(ContentItem, {
-    onClick: function onClick(e) {
-      e.stopPropagation();
+    onClick: function onClick(event) {
+      event.stopPropagation();
 
       _onClick();
     },
@@ -35,8 +36,8 @@ var RangeFilterStatus = function RangeFilterStatus(_ref) {
         defaultMessage: 'Remove'
       })
     }, /*#__PURE__*/React.createElement(Icon, {
-      onClick: function onClick(e) {
-        e.stopPropagation();
+      onClick: function onClick(event) {
+        event.stopPropagation();
         onFilterRemove && onFilterRemove();
       },
       component: /*#__PURE__*/React.createElement(CloseS, null),

package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.d.ts

@@ -1,3 +1,4 @@
 export declare const BadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"h3", any, {}, never>;
 export declare const SuffixText: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.js

@@ -3,13 +3,19 @@ export var BadgeWrapper = styled.div.withConfig({
   displayName: "RangeFilterStatusstyles__BadgeWrapper",
   componentId: "sc-1ei851t-0"
 })(["margin-right:16px;margin-bottom:-2px;"]);
+export var Title = styled.h3.withConfig({
+  displayName: "RangeFilterStatusstyles__Title",
+  componentId: "sc-1ei851t-1"
+})(["font-size:16px;line-height:1.39;color:", ";margin-bottom:1em;"], function (props) {
+  return props.theme.palette['grey-800'];
+});
 export var SuffixText = styled.span.withConfig({
   displayName: "RangeFilterStatusstyles__SuffixText",
-  componentId: "sc-1ei851t-1"
+  componentId: "sc-1ei851t-2"
 })(["color:", ";font-weight:500;margin-right:16px;"], function (props) {
   return props.theme.palette['blue-600'];
 });
 export var Container = styled.div.withConfig({
   displayName: "RangeFilterStatusstyles__Container",
-  componentId: "sc-1ei851t-2"
-})(["margin:10px 0 24px 0;"]);
+  componentId: "sc-1ei851t-3"
+})(["padding:16px 24px 24px;"]);

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

@@ -1,8 +1,10 @@
 import { DateFilter } from '../../../date.types';
+import { Texts } from '../../../DateRangePicker.types';
 export type RangeFilterStatusProps = {
     filter: DateFilter | undefined;
     disabled: boolean;
     label: string;
+    texts?: Partial<Texts>;
     onClick: () => void;
     onFilterRemove: () => void;
 };

package/dist/RangePickerInput/RangePickerInput.js

@@ -48,6 +48,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
       setHovered = _React$useState[1];
 
   var showError = error || !!errorText;
+  var hasValue = (dateRangeValue == null ? void 0 : dateRangeValue.from) && (dateRangeValue == null ? void 0 : dateRangeValue.to);
   var handleIconMouseEnter = React.useCallback(function () {
     return setHovered(true);
   }, []);
@@ -113,7 +114,7 @@ var RangePickerInput = function RangePickerInput(_ref) {
     active: !!highlight && !disabled,
     tabIndex: disabled ? -1 : 0,
     focus: active && !disabled
-  }, placeholder, /*#__PURE__*/React.createElement(S.IconSeparator, null), !readOnly && hovered && !!value && !!value.to && !!value.from ? /*#__PURE__*/React.createElement(Tooltip, {
+  }, placeholder, /*#__PURE__*/React.createElement(S.IconSeparator, null), !readOnly && hovered && hasValue ? /*#__PURE__*/React.createElement(Tooltip, {
     title: texts == null ? void 0 : texts.clear
   }, /*#__PURE__*/React.createElement(S.ClearIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(Close3S, null),

package/dist/RawDateRangePicker.d.ts

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
 import type { DateRangePickerProps, DateRangePickerProps as Props, State, AddonType } from './DateRangePicker.types';
-import type { DateRange, RelativeDateRange } from './date.types';
+import type { DateRange } from './date.types';
 import { FilterDefinition, FilterValue } from './RangeFilter/RangeFilter.types';
 export declare function defaultValueTransformer(value: DateRange): DateRange;
 export declare class RawDateRangePicker extends PureComponent<DateRangePickerProps, State> {
     static defaultProps: {
-        ranges: (import("./date.types").AbsoluteDateRange | RelativeDateRange)[];
+        ranges: (import("./date.types").RelativeDateRangePreset | import("./date.types").AbsoluteDateRangePreset)[];
         relativePast: boolean;
         showRelativePicker: boolean;
         validate: () => {

package/dist/RawDateRangePicker.js

@@ -257,34 +257,23 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
       }
 
       if (showFilter) {
-        var _value$filter, _value$filter2;
-
         var _addonKey = 'filter';
         var filterEnabled = value.from && value.to || isLifetime(value);
         var label = value != null && value.filter ? intl.formatMessage({
           id: "DS.DATE-RANGE-PICKER.FILTER-ENABLED",
           defaultMessage: 'Filter enabled'
         }) : intl.formatMessage({
-          id: "DS.DATE-RANGE-PICKER.ADD-FILTER",
-          defaultMessage: 'Add filter'
+          id: "DS.DATE-RANGE-PICKER.SELECT-DATE-FILTER",
+          defaultMessage: 'Select date filter'
         });
         addons.push({
-          content: /*#__PURE__*/React.createElement(AddonCollapse, {
-            content: /*#__PURE__*/React.createElement(RangeFilterStatus, {
-              onFilterRemove: _this.handleRemoveFilterClick,
-              filter: value.filter,
-              disabled: !filterEnabled,
-              label: label,
-              onClick: _this.handleModalOpenClick
-            }),
-            title: texts == null ? void 0 : texts.filter,
-            expanded: _addonKey === visibleAddonKey,
-            onCollapseChange: function onCollapseChange(expanded) {
-              return _this.handleAddonCollapse(_addonKey, expanded);
-            },
-            collapsedSummary: value != null && (_value$filter = value.filter) != null && _value$filter.type ? intl.formatMessage({
-              id: "DS.DATE-RANGE-PICKER." + (value == null ? void 0 : (_value$filter2 = value.filter) == null ? void 0 : _value$filter2.type)
-            }) : null
+          content: /*#__PURE__*/React.createElement(RangeFilterStatus, {
+            onFilterRemove: _this.handleRemoveFilterClick,
+            filter: value.filter,
+            texts: texts,
+            disabled: !filterEnabled,
+            label: label,
+            onClick: _this.handleModalOpenClick
           }),
           key: _addonKey
         });
@@ -296,7 +285,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
     _this.state = {
       mode: MODES.DATE,
       value: normalizeRange(props.value),
-      visibleAddonKey: ''
+      visibleAddonKey: 'relative-picker'
     };
     return _this;
   }
@@ -306,7 +295,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
   _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
     var value = this.props.value;
 
-    if (prevProps.value !== value && !value) {
+    if (prevProps.value !== value) {
       this.handleRangeChange(value);
     }
   };
@@ -367,9 +356,9 @@ export var RawDateRangePicker = /*#__PURE__*/function (_PureComponent) {
 
     function isRelative(dateRange) {
       var isLegacyCustom = Object.keys(value).includes('key') && key === undefined;
-      return CONST.RELATIVE_PRESETS.map(function (e) {
+      return dateRange.key && (CONST.RELATIVE_PRESETS.map(function (e) {
         return e.key;
-      }).includes(dateRange.key) || isLegacyCustom;
+      }).includes(dateRange.key) || dateRange.key === CONST.CUSTOM_RANGE_KEY) || isLegacyCustom;
     }
 
     var isValidRelative = isRelative(value) && Boolean(value.offset && value.duration);

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

@@ -5,7 +5,7 @@ import * as S from '../../RelativeRangePicker.styles';
 import ModeDropdown from '../ModeDropdown/ModeDropdown';
 import DurationField from './DurationField/DurationField';
 import OffsetField from './OffsetField/OffsetField';
-import { RANGES_MODE } from '../../utils';
+import { RANGES_MODE } from '../../../constants';
 import TimestampRange from '../TimestampRange/TimestampRange';
 export var setOffsetType = set(lensPath(['offset', 'type']));
 

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

@@ -4,8 +4,7 @@ import InputNumber from '@synerise/ds-input-number';
 import set from 'ramda/src/set';
 import lensPath from 'ramda/src/lensPath';
 import * as S from '../../../RelativeRangePicker.styles';
-import * as CONST from '../../../../constants';
-import { RANGES_MODE } from '../../../utils';
+import { RELATIVE_UNITS, RANGES_MODE, RELATIVE_DURATION_MAX } from '../../../../constants';
 export var setDurationType = set(lensPath(['duration', 'type']));
 var SELECT_DROPDOWN_OFFSET = -4;
 
@@ -26,7 +25,7 @@ var DurationField = function DurationField(_ref) {
     compact: true
   }, /*#__PURE__*/React.createElement(InputNumber, {
     min: 1,
-    max: CONST.RELATIVE_DURATION_MAX,
+    max: RELATIVE_DURATION_MAX,
     precision: 0,
     step: 1,
     value: duration == null ? void 0 : duration.value,
@@ -48,7 +47,7 @@ var DurationField = function DurationField(_ref) {
     getPopupContainer: function getPopupContainer(node) {
       return node.parentElement != null ? node.parentElement : document.body;
     }
-  }, (rangeUnits || CONST.RELATIVE_UNITS).map(function (type) {
+  }, (rangeUnits || RELATIVE_UNITS).map(function (type) {
     return /*#__PURE__*/React.createElement(Select.Option, {
       key: type,
       value: type

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import Select from '@synerise/ds-select';
 import InputNumber from '@synerise/ds-input-number';
 import * as S from '../../../RelativeRangePicker.styles';
-import * as CONST from '../../../../constants';
-import { RANGES_MODE } from '../../../utils';
+import { RELATIVE_UNITS, RANGES_MODE, RELATIVE_OFFSET_MAX } from '../../../../constants';
 import { setOffsetType } from '../CustomRangeForm';
 var SELECT_DROPDOWN_OFFSET = -4;
 
@@ -24,7 +23,7 @@ var OffsetField = function OffsetField(_ref) {
     compact: true
   }, /*#__PURE__*/React.createElement(InputNumber, {
     min: 0,
-    max: CONST.RELATIVE_OFFSET_MAX,
+    max: RELATIVE_OFFSET_MAX,
     precision: 0,
     step: 1,
     value: offset == null ? void 0 : offset.value,
@@ -45,7 +44,7 @@ var OffsetField = function OffsetField(_ref) {
     getPopupContainer: function getPopupContainer(node) {
       return node.parentElement != null ? node.parentElement : document.body;
     }
-  }, (rangeUnits || CONST.RELATIVE_UNITS).map(function (type) {
+  }, (rangeUnits || RELATIVE_UNITS).map(function (type) {
     return /*#__PURE__*/React.createElement(Select.Option, {
       key: type,
       value: type

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

@@ -3,7 +3,7 @@ import Icon, { CheckS } from '@synerise/ds-icon';
 import { theme } from '@synerise/ds-core';
 import { useOnClickOutside } from '@synerise/ds-utils';
 import * as S from '../../RelativeRangePicker.styles';
-import { RANGES_ICON } from '../../utils';
+import { RANGES_ICON } from '../../../constants';
 var MODE_TRANSLATION_KEYS = {
   PAST: 'last',
   FUTURE: 'next',

package/dist/RelativeRangePicker/Elements/RangeButtons/RangeButtons.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Props } from './RangeButtons.types';
-declare const RangeButtons: React.FC<Props>;
+declare const RangeButtons: ({ ranges, currentRange, texts, onChange }: Props) => JSX.Element;
 export default RangeButtons;

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

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import * as S from '../../RelativeRangePicker.styles';
+import { isLifetime } from '../RangeDropdown/RangeDropdown';
+import { ALL_TIME } from '../../../constants';
+import { findMatchingPreset } from '../../utils';
 
 var RangeButtons = function RangeButtons(_ref) {
   var ranges = _ref.ranges,
       currentRange = _ref.currentRange,
       texts = _ref.texts,
       onChange = _ref.onChange;
+  var matchingPreset = findMatchingPreset(currentRange);
   return /*#__PURE__*/React.createElement(React.Fragment, null, ranges.map(function (range) {
     return /*#__PURE__*/React.createElement(S.Range, {
       "data-testid": "relative-range-preset-" + (range.key || range.id),
@@ -13,7 +17,7 @@ var RangeButtons = function RangeButtons(_ref) {
       onClick: function onClick() {
         onChange && onChange(range);
       },
-      type: currentRange && currentRange.key === range.key ? 'primary' : 'tertiary'
+      type: matchingPreset && matchingPreset.key === range.key || isLifetime(currentRange) && range.key === ALL_TIME ? 'primary' : 'tertiary'
     }, range.translationKey ? texts[range.translationKey] : texts == null ? void 0 : texts.custom);
   }));
 };

package/dist/RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.js

@@ -67,8 +67,9 @@ var RangeDropdown = function RangeDropdown(_ref) {
     return isEqual(transformedCurrentRange, r);
   }, mappedRanges);
   var containsCurrentRange = currentRange && find(function (range) {
-    return range.key === currentRange.key;
-  }, ranges) || isLifetime(currentRange) || anyOfTransformedRangesMatchesCurrentRange;
+    var key = isLifetime(currentRange) ? ALL_TIME : currentRange.key;
+    return range.key === key;
+  }, ranges) || anyOfTransformedRangesMatchesCurrentRange;
   var overlay = /*#__PURE__*/React.createElement(S.OverlayWrapper, {
     visible: dropVisible,
     width: DROPDOWN_WIDTH

package/dist/RelativeRangePicker/Elements/RangeDropdown/RangeDropdown.types.d.ts

@@ -1,10 +1,10 @@
-import { AbsoluteDateRange, DateRange, RelativeDateRange } from '../../../date.types';
+import { DateRange } from '../../../date.types';
 import { DateRangePickerProps, Texts } from '../../../DateRangePicker.types';
 export type RangeDropdownProps = {
     ranges: DateRange[];
-    currentRange: RelativeDateRange;
+    currentRange: DateRange;
     texts: Texts;
-    onChange: (range: AbsoluteDateRange | RelativeDateRange | undefined) => void;
+    onChange: (range: DateRange | undefined) => void;
     valueTransformer?: ((value: DateRange | object) => DateRange | object) | DateRangePickerProps['valueTransformer'];
 };
 /**

package/dist/RelativeRangePicker/RelativeRangePicker.js

@@ -16,10 +16,10 @@ import getRelativePresetForRange from '../dateUtils/getRelativePresetForRange';
 import RangeButtons from './Elements/RangeButtons/RangeButtons';
 import RangeDropdown from './Elements/RangeDropdown/RangeDropdown';
 import CustomRangeForm from './Elements/CustomRangeForm/CustomRangeForm';
-import { getCurrentGroupFromProps, RANGES_MODE, getDefaultCustomRange, setFuture, setOffsetValue, setDurationValue } from './utils';
+import { getCurrentGroupFromProps, getDefaultCustomRange, setFuture, setOffsetValue, setDurationValue, updatePresetKey, findMatchingPreset } from './utils';
 import { fnsIsAfter } from '../fns';
 import { DEFAULT_RANGE, normalizeRange } from '../utils';
-import { CUSTOM_RANGE_KEY } from '../constants';
+import { CUSTOM_RANGE_KEY, RANGES_MODE } from '../constants';
 
 var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(RelativeRangePicker, _React$PureComponent);
@@ -27,8 +27,7 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
   function RelativeRangePicker(props) {
     var _this;
 
-    _this = _React$PureComponent.call(this, props) || this; // eslint-disable-next-line
-    // @ts-ignore
+    _this = _React$PureComponent.call(this, props) || this; // @ts-ignore
     // eslint-disable-next-line
 
     _defineProperty(_assertThisInitialized(_this), "onModeChange", function (mode) {
@@ -91,7 +90,7 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       }); // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
-      var resultRange = normalizeRange(changes);
+      var resultRange = normalizeRange(updatePresetKey(changes));
 
       if ((resultRange == null ? void 0 : resultRange.translationKey) === CUSTOM_RANGE_KEY) {
         _this.setState({
@@ -227,22 +226,25 @@ var RelativeRangePicker = /*#__PURE__*/function (_React$PureComponent) {
   _proto.render = function render() {
     var _this$props4 = this.props,
         texts = _this$props4.texts,
-        value = _this$props4.value,
         showCustomRange = _this$props4.showCustomRange;
     var _this$state3 = this.state,
         groupedRanges = _this$state3.groupedRanges,
         currentGroup = _this$state3.currentGroup,
         currentRange = _this$state3.currentRange;
-    var isCustomValue = currentRange.type === 'RELATIVE' && (currentRange.key === 'CUSTOM' || !(value != null && value.key) || !(currentRange != null && currentRange.key));
-    var visibleRanges = groupedRanges ? groupedRanges.slice(0, 3) : [];
-    var hiddenRanges = groupedRanges ? groupedRanges.slice(3) : [];
+    var isCustomValue = currentRange.type === 'RELATIVE' && !findMatchingPreset(currentRange);
+    var orderedGroupedRanges = groupedRanges == null ? void 0 : groupedRanges.sort(function (a, b) {
+      return CONST.RELATIVE_SECTION_BUTTON_KEYS_ORDER.indexOf(a.key) - CONST.RELATIVE_SECTION_BUTTON_KEYS_ORDER.indexOf(b.key);
+    });
+    var visibleRanges = orderedGroupedRanges ? orderedGroupedRanges.slice(0, 4) : [];
+    var hiddenRanges = orderedGroupedRanges ? orderedGroupedRanges.slice(4) : [];
+    var displayRangeForm = isCustomValue || currentRange && currentRange.type === CONST.RELATIVE;
     if (!currentGroup) return null;
     return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Ranges, null, showCustomRange && /*#__PURE__*/React.createElement(S.Range, {
       "data-testid": "relative-range-preset-" + CUSTOM_RANGE_KEY,
       key: CUSTOM_RANGE_KEY,
       onClick: this.handleCustomClick,
       type: isCustomValue ? 'primary' : 'tertiary'
-    }, texts == null ? void 0 : texts.custom), this.renderRanges(visibleRanges), this.renderRangesDropdown(hiddenRanges)), isCustomValue && showCustomRange && this.renderCustomRangeForm());
+    }, texts == null ? void 0 : texts.custom), this.renderRanges(visibleRanges), this.renderRangesDropdown(hiddenRanges)), displayRangeForm && this.renderCustomRangeForm());
   };
 
   return RelativeRangePicker;

package/dist/RelativeRangePicker/RelativeRangePicker.types.d.ts

@@ -1,8 +1,8 @@
 import { IntlShape } from 'react-intl';
-import { DateRange, RelativeDateRange } from '../date.types';
+import { DateRangePreset, DateRange, RelativeDateRange } from '../date.types';
 import { DateRangePickerProps, RelativeMode, Texts } from '../DateRangePicker.types';
 export type RelativeRangePickerProps = {
-    ranges?: DateRange[];
+    ranges?: DateRangePreset[];
     value: DateRange;
     onChange: (range: DateRange | undefined) => void;
     future?: boolean;
@@ -21,7 +21,7 @@ export type State = {
     past: boolean;
     showCustomForm: boolean;
     currentRange: RelativeDateRange;
-    groupedRanges?: DateRange[];
+    groupedRanges?: DateRangePreset[];
     sinceTimestamp?: Date | undefined;
     lastCustomRange?: RelativeDateRange;
 };

package/dist/RelativeRangePicker/utils/findMatchingPreset.utils.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { DateRange } from '../../date.types';
+export declare const findMatchingPreset: (range: DateRange) => {
+    type: "SINCE" | "RELATIVE";
+    offset: {
+        type: import("../../date.types").RelativeUnits;
+        value: number;
+    };
+    duration: import("../../date.types").Duration;
+    from?: import("../../date.types").NullableDateLimit | undefined;
+    to?: import("../../date.types").NullableDateLimit | undefined;
+    key: string;
+    future?: boolean | undefined;
+    filter?: import("../../date.types").DateFilter | undefined;
+    translationKey?: string | undefined;
+    id?: import("react").ReactText | undefined;
+    timestamp?: Date | undefined;
+} | undefined;

package/dist/RelativeRangePicker/utils/findMatchingPreset.utils.js

@@ -0,0 +1,20 @@
+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; }
+
+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 CONST from '../../constants';
+export var findMatchingPreset = function findMatchingPreset(range) {
+  if (!range || range.type !== CONST.RELATIVE) {
+    return;
+  }
+
+  var matchingPreset = CONST.RELATIVE_PRESETS.find(function (preset) {
+    var _preset$offset, _range$offset, _preset$offset2, _range$offset2, _preset$duration, _range$duration, _preset$duration2, _range$duration2;
+
+    return Boolean(preset.future) === Boolean(range.future) && ((_preset$offset = preset.offset) == null ? void 0 : _preset$offset.type) === ((_range$offset = range.offset) == null ? void 0 : _range$offset.type) && ((_preset$offset2 = preset.offset) == null ? void 0 : _preset$offset2.value) === ((_range$offset2 = range.offset) == null ? void 0 : _range$offset2.value) && ((_preset$duration = preset.duration) == null ? void 0 : _preset$duration.type) === ((_range$duration = range.duration) == null ? void 0 : _range$duration.type) && ((_preset$duration2 = preset.duration) == null ? void 0 : _preset$duration2.value) === ((_range$duration2 = range.duration) == null ? void 0 : _range$duration2.value);
+  }); // eslint-disable-next-line consistent-return
+
+  return matchingPreset && _objectSpread({}, matchingPreset);
+};

package/dist/RelativeRangePicker/utils/getCurrentGroupFromProps.utils.d.ts

@@ -0,0 +1,3 @@
+import { RelativeRangePickerProps } from '../RelativeRangePicker.types';
+import { RelativeMode } from '../../DateRangePicker.types';
+export declare function getCurrentGroupFromProps({ relativeModes }: RelativeRangePickerProps): RelativeMode | null;

package/dist/RelativeRangePicker/utils/getCurrentGroupFromProps.utils.js

@@ -0,0 +1,9 @@
+export function getCurrentGroupFromProps(_ref) {
+  var relativeModes = _ref.relativeModes;
+
+  if (!!relativeModes && (relativeModes == null ? void 0 : relativeModes.length) > 0) {
+    return relativeModes[0];
+  }
+
+  return null;
+}

package/dist/RelativeRangePicker/utils/getDefaultCustomRange.utils.d.ts

@@ -0,0 +1,2 @@
+import { RelativeDateRange } from '../../date.types';
+export declare const getDefaultCustomRange: (currentGroup: string | null) => RelativeDateRange;

package/dist/RelativeRangePicker/utils/getDefaultCustomRange.utils.js

@@ -0,0 +1,17 @@
+import { RELATIVE, RANGES_MODE } from '../../constants';
+export var getDefaultCustomRange = function getDefaultCustomRange(currentGroup) {
+  return {
+    type: RELATIVE,
+    from: undefined,
+    to: undefined,
+    future: currentGroup === RANGES_MODE.FUTURE,
+    offset: {
+      type: 'DAYS',
+      value: 0
+    },
+    duration: {
+      type: 'DAYS',
+      value: 30
+    }
+  };
+};

package/dist/RelativeRangePicker/utils/index.d.ts

@@ -0,0 +1,8 @@
+export { findMatchingPreset } from './findMatchingPreset.utils';
+export { setFuture } from './setFuture.utils';
+export { updatePresetKey } from './updatePresetKey.utils';
+export { setDurationValue } from './setDurationValue.utils';
+export { setOffsetValue } from './setOffsetValue.utils';
+export { getDefaultCustomRange } from './getDefaultCustomRange.utils';
+export { getCurrentGroupFromProps } from './getCurrentGroupFromProps.utils';
+export { isAbsolute } from './isAbsolute.utils';

package/dist/RelativeRangePicker/utils/index.js

@@ -0,0 +1,8 @@
+export { findMatchingPreset } from './findMatchingPreset.utils';
+export { setFuture } from './setFuture.utils';
+export { updatePresetKey } from './updatePresetKey.utils';
+export { setDurationValue } from './setDurationValue.utils';
+export { setOffsetValue } from './setOffsetValue.utils';
+export { getDefaultCustomRange } from './getDefaultCustomRange.utils';
+export { getCurrentGroupFromProps } from './getCurrentGroupFromProps.utils';
+export { isAbsolute } from './isAbsolute.utils';

package/dist/RelativeRangePicker/utils/isAbsolute.utils.d.ts

@@ -0,0 +1,2 @@
+import { DateRange } from '../../date.types';
+export declare const isAbsolute: (value: DateRange) => boolean;

package/dist/RelativeRangePicker/utils/isAbsolute.utils.js

@@ -0,0 +1,4 @@
+import { ABSOLUTE } from '../../constants';
+export var isAbsolute = function isAbsolute(value) {
+  return value.type === ABSOLUTE && !value.from && !value.to;
+};

package/dist/RelativeRangePicker/utils/setDurationValue.utils.d.ts

@@ -0,0 +1,2 @@
+import { RelativeDateRange } from '../../date.types';
+export declare const setDurationValue: (value: number | string, currentRange: RelativeDateRange) => RelativeDateRange;

package/dist/RelativeRangePicker/utils/setDurationValue.utils.js

@@ -0,0 +1,6 @@
+import set from 'ramda/src/set';
+import lensPath from 'ramda/src/lensPath';
+export var setDurationValue = function setDurationValue(value, currentRange) {
+  var updatedValue = value === '' ? null : value;
+  return set(lensPath(['duration', 'value']))(typeof updatedValue === 'number' && updatedValue >= 1 ? Math.round(updatedValue) : 1, currentRange);
+};

package/dist/RelativeRangePicker/utils/setFuture.utils.d.ts

@@ -0,0 +1 @@
+export declare const setFuture: (a: any, obj: any) => any;

package/dist/RelativeRangePicker/utils/setFuture.utils.js

@@ -0,0 +1,3 @@
+import set from 'ramda/src/set';
+import lensPath from 'ramda/src/lensPath';
+export var setFuture = set(lensPath(['future']));

package/dist/RelativeRangePicker/utils/setOffsetValue.utils.d.ts

@@ -0,0 +1,2 @@
+import { RelativeDateRange } from '../../date.types';
+export declare const setOffsetValue: (value: number | string, currentRange: RelativeDateRange) => RelativeDateRange;

package/dist/RelativeRangePicker/utils/setOffsetValue.utils.js

@@ -0,0 +1,6 @@
+import set from 'ramda/src/set';
+import lensPath from 'ramda/src/lensPath';
+export var setOffsetValue = function setOffsetValue(value, currentRange) {
+  var updatedValue = value === '' ? null : value;
+  return set(lensPath(['offset', 'value']))(typeof updatedValue === 'number' && updatedValue >= 0 ? Math.round(updatedValue) : 0, currentRange);
+};

package/dist/RelativeRangePicker/utils/updatePresetKey.utils.d.ts

@@ -0,0 +1,2 @@
+import { RelativeDateRange } from '../../date.types';
+export declare const updatePresetKey: (range: RelativeDateRange) => RelativeDateRange;

package/dist/RelativeRangePicker/utils/updatePresetKey.utils.js

@@ -0,0 +1,23 @@
+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; }
+
+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 { findMatchingPreset } from './findMatchingPreset.utils';
+import { CUSTOM_RANGE_KEY } from '../../constants';
+export var updatePresetKey = function updatePresetKey(range) {
+  var matchingPreset = findMatchingPreset(range);
+
+  if (matchingPreset && matchingPreset.key) {
+    return _objectSpread({}, range, {
+      key: matchingPreset.key,
+      translationKey: matchingPreset.translationKey
+    });
+  }
+
+  return _objectSpread({}, range, {
+    key: CUSTOM_RANGE_KEY,
+    translationKey: CUSTOM_RANGE_KEY
+  });
+};

package/dist/constants.d.ts

@@ -1,4 +1,4 @@
-import { AbsoluteDateRange, RelativeDateRange, RelativeUnits, RangeKey } from './date.types';
+import { RelativeDateRangePreset, AbsoluteDateRangePreset, RelativeUnits, RangeKey } from './date.types';
 export declare const SECONDS = "SECONDS";
 export declare const MINUTES = "MINUTES";
 export declare const HOURS = "HOURS";
@@ -12,14 +12,25 @@ export declare const RELATIVE_OFFSET_MAX = 999999;
 export declare const RELATIVE_DURATION_MAX = 999999;
 export declare const RELATIVE_UNITS: RelativeUnits[];
 export declare const ALL_TIME: RangeKey;
+export declare const RANGES_MODE: {
+    PAST: string;
+    FUTURE: string;
+    SINCE: string;
+};
+export declare const RANGES_ICON: {
+    PAST: JSX.Element;
+    FUTURE: JSX.Element;
+    SINCE: JSX.Element;
+};
 export declare const range: (start: number, end: number) => number[];
 export declare const CUSTOM_RANGE_KEY = "custom";
 export declare const DURATION_MODIFIERS: {
     readonly LAST: "timestampLast";
     readonly NEXT: "timestampNext";
 };
-export declare const RELATIVE_PRESETS: RelativeDateRange[];
-export declare const ABSOLUTE_PRESETS: AbsoluteDateRange[];
+export declare const RELATIVE_PRESETS: RelativeDateRangePreset[];
+export declare const RELATIVE_SECTION_BUTTON_KEYS_ORDER: string[];
+export declare const ABSOLUTE_PRESETS: AbsoluteDateRangePreset[];
 export declare const TIME_OPTIONS: {
     HOURS: number[];
     MINUTES: number[];

package/dist/constants.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import { ArrowRightM, ArrowLeftM, SinceArrowRightM } from '@synerise/ds-icon';
 export var SECONDS = 'SECONDS';
 export var MINUTES = 'MINUTES';
 export var HOURS = 'HOURS';
@@ -11,6 +13,16 @@ export var RELATIVE_OFFSET_MAX = 999999;
 export var RELATIVE_DURATION_MAX = 999999;
 export var RELATIVE_UNITS = [SECONDS, MINUTES, HOURS, DAYS, WEEKS, MONTHS, YEARS];
 export var ALL_TIME = 'ALL_TIME';
+export var RANGES_MODE = {
+  PAST: 'PAST',
+  FUTURE: 'FUTURE',
+  SINCE: 'SINCE'
+};
+export var RANGES_ICON = {
+  PAST: /*#__PURE__*/React.createElement(ArrowLeftM, null),
+  FUTURE: /*#__PURE__*/React.createElement(ArrowRightM, null),
+  SINCE: /*#__PURE__*/React.createElement(SinceArrowRightM, null)
+};
 export var range = function range(start, end) {
   if (end <= start) {
     return [];
@@ -282,6 +294,7 @@ export var RELATIVE_PRESETS = [{
     value: 1
   }
 }];
+export var RELATIVE_SECTION_BUTTON_KEYS_ORDER = [CUSTOM_RANGE_KEY, ALL_TIME, 'TODAY', 'YESTERDAY', 'LAST_WEEK', 'LAST_MONTH', 'LAST_YEAR', 'THIS_WEEK', 'THIS_MONTH', 'LAST_7_DAYS', 'LAST_3_MONTHS', 'LAST_6_MONTHS'];
 export var ABSOLUTE_PRESETS = [{
   key: ALL_TIME,
   translationKey: 'allTime',

package/dist/date.types.d.ts

@@ -45,7 +45,15 @@ export interface RelativeDateRange extends DateRangeBase {
     from?: NullableDateLimit;
     to?: NullableDateLimit;
 }
+type PresetType = {
+    key: string;
+    translationKey?: string;
+};
+export type RelativeDateRangePreset = RelativeDateRange & PresetType;
+export type AbsoluteDateRangePreset = AbsoluteDateRange & PresetType;
+export type DateRangePreset = RelativeDateRangePreset | AbsoluteDateRangePreset;
 export type Days = {
     [key: string]: object;
 };
 export type DateRange = AbsoluteDateRange | RelativeDateRange;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.25.0",
+  "version": "0.25.1",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,25 +34,25 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-badge": "^0.6.39",
-    "@synerise/ds-button": "^0.18.4",
-    "@synerise/ds-button-group": "^0.6.32",
+    "@synerise/ds-badge": "^0.6.40",
+    "@synerise/ds-button": "^0.18.5",
+    "@synerise/ds-button-group": "^0.6.33",
     "@synerise/ds-data-format": "^0.4.4",
-    "@synerise/ds-date-picker": "^0.10.21",
-    "@synerise/ds-dropdown": "^0.17.83",
-    "@synerise/ds-icon": "^0.58.4",
-    "@synerise/ds-inline-edit": "^0.6.83",
-    "@synerise/ds-input": "^0.19.4",
-    "@synerise/ds-input-number": "^0.8.26",
-    "@synerise/ds-manageable-list": "^0.26.13",
-    "@synerise/ds-menu": "^0.18.1",
-    "@synerise/ds-scrollbar": "^0.6.9",
-    "@synerise/ds-select": "^0.15.22",
-    "@synerise/ds-slider": "^0.13.1",
-    "@synerise/ds-tags": "^0.8.17",
-    "@synerise/ds-time-picker": "^0.9.0",
-    "@synerise/ds-tooltip": "^0.14.6",
-    "@synerise/ds-utils": "^0.24.18",
+    "@synerise/ds-date-picker": "^0.10.22",
+    "@synerise/ds-dropdown": "^0.17.84",
+    "@synerise/ds-icon": "^0.58.5",
+    "@synerise/ds-inline-edit": "^0.6.84",
+    "@synerise/ds-input": "^0.19.5",
+    "@synerise/ds-input-number": "^0.8.27",
+    "@synerise/ds-manageable-list": "^0.26.14",
+    "@synerise/ds-menu": "^0.18.2",
+    "@synerise/ds-scrollbar": "^0.6.10",
+    "@synerise/ds-select": "^0.15.23",
+    "@synerise/ds-slider": "^0.13.2",
+    "@synerise/ds-tags": "^0.8.18",
+    "@synerise/ds-time-picker": "^0.9.1",
+    "@synerise/ds-tooltip": "^0.14.7",
+    "@synerise/ds-utils": "^0.24.19",
     "date-fns": "^2.16.1",
     "dayjs": "^1.8.35",
     "lodash": "^4.17.20",
@@ -73,5 +73,5 @@
     "@testing-library/user-event": "^10.3.1",
     "@types/ramda": "^0.28.23"
   },
-  "gitHead": "02f0a1dad6df5acf89b3d3defa6993716ba992fb"
+  "gitHead": "1b2696001dd88b4c11413977e38b541b0c78733d"
 }

package/dist/RelativeRangePicker/utils.d.ts

@@ -1,19 +0,0 @@
-import { DateRange, RelativeDateRange } from '../date.types';
-import { Props } from './RelativeRangePicker.types';
-import { RelativeMode } from '../DateRangePicker.types';
-export declare const setOffsetValue: (value: number | string, currentRange: RelativeDateRange) => RelativeDateRange;
-export declare const setDurationValue: (value: number | string, currentRange: RelativeDateRange) => RelativeDateRange;
-export declare const setFuture: (a: any, obj: any) => any;
-export declare const RANGES_MODE: {
-    PAST: string;
-    FUTURE: string;
-    SINCE: string;
-};
-export declare const RANGES_ICON: {
-    PAST: JSX.Element;
-    FUTURE: JSX.Element;
-    SINCE: JSX.Element;
-};
-export declare const getDefaultCustomRange: (currentGroup: string | null) => RelativeDateRange;
-export declare const isAbsolute: (value: DateRange) => boolean;
-export declare function getCurrentGroupFromProps({ relativeModes }: Props): RelativeMode | null;

package/dist/RelativeRangePicker/utils.js

@@ -1,52 +0,0 @@
-import set from 'ramda/src/set';
-import lensPath from 'ramda/src/lensPath';
-import { ArrowRightM, ArrowLeftM, SinceArrowRightM } from '@synerise/ds-icon';
-import * as React from 'react';
-import * as CONST from '../constants';
-export var setOffsetValue = function setOffsetValue(value, currentRange) {
-  var updatedValue = value === '' ? null : value;
-  return set(lensPath(['offset', 'value']))(typeof updatedValue === 'number' && updatedValue >= 0 ? Math.round(updatedValue) : 0, currentRange);
-};
-export var setDurationValue = function setDurationValue(value, currentRange) {
-  var updatedValue = value === '' ? null : value;
-  return set(lensPath(['duration', 'value']))(typeof updatedValue === 'number' && updatedValue >= 1 ? Math.round(updatedValue) : 1, currentRange);
-};
-export var setFuture = set(lensPath(['future']));
-export var RANGES_MODE = {
-  PAST: 'PAST',
-  FUTURE: 'FUTURE',
-  SINCE: 'SINCE'
-};
-export var RANGES_ICON = {
-  PAST: /*#__PURE__*/React.createElement(ArrowLeftM, null),
-  FUTURE: /*#__PURE__*/React.createElement(ArrowRightM, null),
-  SINCE: /*#__PURE__*/React.createElement(SinceArrowRightM, null)
-};
-export var getDefaultCustomRange = function getDefaultCustomRange(currentGroup) {
-  return {
-    type: CONST.RELATIVE,
-    from: undefined,
-    to: undefined,
-    future: currentGroup === RANGES_MODE.FUTURE,
-    offset: {
-      type: 'DAYS',
-      value: 0
-    },
-    duration: {
-      type: 'DAYS',
-      value: 30
-    }
-  };
-};
-export var isAbsolute = function isAbsolute(value) {
-  return value.type === CONST.ABSOLUTE && !value.from && !value.to;
-};
-export function getCurrentGroupFromProps(_ref) {
-  var relativeModes = _ref.relativeModes;
-
-  if (!!relativeModes && (relativeModes == null ? void 0 : relativeModes.length) > 0) {
-    return relativeModes[0];
-  }
-
-  return null;
-}