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

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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)
+
+
+### Features
+
+* **date-range-picker:** display errors in daily / weekly / monthly scheduler ([1bc8695](https://github.com/Synerise/synerise-design/commit/1bc8695af46628b30492fb247a2ddbe5785711b0))
+
+
+
+
+
 ## [0.24.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.24.9...@synerise/ds-date-range-picker@0.24.10) (2023-10-11)
 
 

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

@@ -1,3 +1,3 @@
 import { DailyProps } from './Daily.types';
-declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, }: DailyProps) => JSX.Element;
+declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, errorTexts, }: DailyProps) => JSX.Element;
 export default Daily;

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

@@ -23,7 +23,9 @@ var Daily = function Daily(_ref) {
       _ref$valueSelectionMo = _ref.valueSelectionMode,
       valueSelectionMode = _ref$valueSelectionMo === void 0 ? ['Hour', 'Range'] : _ref$valueSelectionMo,
       timeFormat = _ref.timeFormat,
-      timePickerProps = _ref.timePickerProps;
+      timePickerProps = _ref.timePickerProps,
+      _ref$errorTexts = _ref.errorTexts,
+      errorTexts = _ref$errorTexts === void 0 ? [] : _ref$errorTexts;
   var intl = useIntl();
   var defaultDayValue = useMemo(function () {
     return {
@@ -75,6 +77,7 @@ var Daily = function Daily(_ref) {
       disabled: disabled,
       days: EMPTY_OBJECT,
       onChange: NOOP,
+      errorTexts: errorTexts[index],
       onMultipleDayTimeChange: NOOP // eslint-disable-next-line react/no-array-index-key
       ,
       key: "range-" + index + "-" + String(s == null ? void 0 : s.start),

package/dist/RangeFilter/Filters/new/Daily/Daily.types.d.ts

@@ -2,10 +2,12 @@ import { FilterBaseProps } from '../Filters.types';
 import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
+import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
 export type DailySchedule = DayOptions & {
     mode: DateLimitMode;
 };
 export type DailyProps = {
     value: DailySchedule[];
+    errorTexts?: FilterErrorType[];
     onChange: (value: DailyProps['value']) => void;
 } & FilterBaseProps & WithDisabledProp;

package/dist/RangeFilter/Filters/new/Monthly/Monthly.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { MonthlyProps } from './Monthly.types';
-declare const Monthly: React.FC<MonthlyProps>;
+declare const Monthly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, periodType, countedFrom, errorTexts, }: MonthlyProps) => JSX.Element;
 export default Monthly;

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

@@ -37,7 +37,8 @@ var Monthly = function Monthly(_ref) {
       _ref$periodType = _ref.periodType,
       periodType = _ref$periodType === void 0 ? DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH : _ref$periodType,
       _ref$countedFrom = _ref.countedFrom,
-      countedFrom = _ref$countedFrom === void 0 ? COUNTED_FROM_ENUM.BEGINNING : _ref$countedFrom;
+      countedFrom = _ref$countedFrom === void 0 ? COUNTED_FROM_ENUM.BEGINNING : _ref$countedFrom,
+      errorTexts = _ref.errorTexts;
   var defaultDayValue = React.useMemo(function () {
     return {
       start: DEFAULT_RANGE_START,
@@ -304,6 +305,11 @@ var Monthly = function Monthly(_ref) {
   var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
   var isAnyDaySelected = activeDays.length > 0;
   var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
+
+  var getErrorTextsForFormRow = function getErrorTextsForFormRow(guid) {
+    return activeDays.length === 1 && errorTexts && errorTexts[guid] && errorTexts[guid][activeDays[0]];
+  };
+
   return /*#__PURE__*/React.createElement(S.NewFilterContainer, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Grid, _extends({
@@ -323,6 +329,7 @@ var Monthly = function Monthly(_ref) {
   }, getGridSettings())), isAnyDaySelected && filteredSchedule.map(function (guid, index) {
     return /*#__PURE__*/React.createElement(RangeFormContainer, {
       days: EMPTY_OBJECT,
+      errorTexts: getErrorTextsForFormRow(guid),
       onChange: NOOP,
       key: "value-range-" + guid,
       onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {

package/dist/RangeFilter/Filters/new/Monthly/Monthly.types.d.ts

@@ -3,6 +3,7 @@ import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
 import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { FilterBaseProps } from '../Filters.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
+import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
 export type MonthlyScheduleDayValue = DayOptions & {
     mode: DateLimitMode;
 };
@@ -12,6 +13,9 @@ export type MonthlySchedule = {
 export type DayOfMonthIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31;
 export type MonthlyProps = {
     value: MonthlySchedule;
+    errorTexts?: {
+        [guid: string]: FilterErrorType[];
+    };
     periodType: DAYS_OF_PERIOD_ENUM;
     countedFrom: COUNTED_FROM_ENUM;
     onChange: (value: MonthlyProps['value']) => void;

package/dist/RangeFilter/Filters/new/Weekly/Weekly.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { WeeklyProps } from './Weekly.types';
-declare const Weekly: React.FC<WeeklyProps>;
+declare const Weekly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, errorTexts, }: WeeklyProps) => JSX.Element;
 export default Weekly;

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

@@ -30,7 +30,8 @@ var Weekly = function Weekly(_ref) {
       valueFormatOptions = _ref.valueFormatOptions,
       value = _ref.value,
       timePickerProps = _ref.timePickerProps,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      errorTexts = _ref.errorTexts;
   var defaultDayValue = React.useMemo(function () {
     return {
       start: DEFAULT_RANGE_START,
@@ -239,6 +240,11 @@ var Weekly = function Weekly(_ref) {
   var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
   var isAnyDaySelected = activeDays.length > 0;
   var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
+
+  var getErrorTextsForFormRow = function getErrorTextsForFormRow(guid) {
+    return activeDays.length === 1 && errorTexts && errorTexts[guid] && errorTexts[guid][activeDays[0]];
+  };
+
   return /*#__PURE__*/React.createElement(S.NewFilterContainer, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -258,6 +264,7 @@ var Weekly = function Weekly(_ref) {
     return /*#__PURE__*/React.createElement(RangeFormContainer, {
       days: EMPTY_OBJECT,
       onChange: NOOP,
+      errorTexts: getErrorTextsForFormRow(guid),
       key: "value-range-" + guid,
       onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {
         handleDayTimeChange(dayValue, dayKey, guid);

package/dist/RangeFilter/Filters/new/Weekly/Weekly.types.d.ts

@@ -2,6 +2,7 @@ import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
 import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { FilterBaseProps } from '../Filters.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
+import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
 export type WeeklyScheduleDayValue = DayOptions & {
     mode: DateLimitMode;
 };
@@ -11,5 +12,8 @@ export type WeeklySchedule = {
 export type DayOfWeekIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type WeeklyProps = {
     value: WeeklySchedule;
+    errorTexts?: {
+        [guid: string]: FilterErrorType[];
+    };
     onChange: (value: WeeklyProps['value']) => void;
 } & FilterBaseProps & WithDisabledProp;

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

@@ -1,5 +1,5 @@
 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;
+declare const RangeForm: ({ onModeChange, disabled, startDate, endDate, onStartChange, onEndChange, onExactHourSelect, onRangeDelete, valueSelectionModes, mode, rangeDisplayMode, isInvertedRange, timePickerProps, texts, valueFormatOptions, errorTexts, }: RangeFormProps) => JSX.Element;
 export default RangeForm;

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

@@ -34,7 +34,8 @@ var RangeForm = function RangeForm(_ref) {
       isInvertedRange = _ref.isInvertedRange,
       timePickerProps = _ref.timePickerProps,
       texts = _ref.texts,
-      valueFormatOptions = _ref.valueFormatOptions;
+      valueFormatOptions = _ref.valueFormatOptions,
+      errorTexts = _ref.errorTexts;
 
   var _useDataFormat = useDataFormat(),
       is12HoursClock = _useDataFormat.is12HoursClock;
@@ -71,8 +72,12 @@ var RangeForm = function RangeForm(_ref) {
     return node.parentElement != null ? node.parentElement : document.body;
   };
 
+  var errorForFirstItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[0];
+  var errorForSecondItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[1];
+
   var singleHourPicker = function singleHourPicker() {
     return /*#__PURE__*/React.createElement(TimePicker, _extends({
+      errorText: errorForFirstItem,
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {
@@ -144,6 +149,7 @@ var RangeForm = function RangeForm(_ref) {
 
   var renderRangePicker = function renderRangePicker() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
+      errorText: errorForFirstItem,
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {
@@ -160,6 +166,7 @@ var RangeForm = function RangeForm(_ref) {
       use12HourClock: is12HoursClock,
       valueFormatOptions: valueFormatOptions
     }, timePickerProps)), /*#__PURE__*/React.createElement(S.Separator, null, "-"), /*#__PURE__*/React.createElement(TimePicker, _extends({
+      errorText: errorForSecondItem,
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import { WithTranslations } from '../../../../../DateRangePicker.types';
 import { RangeFormContainerProps } from '../RangeFormContainer.types';
 import { WithDisabledProp } from '../../../../RangeFilter.types';
@@ -7,7 +7,7 @@ export type RangeDisplayMode = 'timepicker' | 'slider';
 export type RangeFormProps = {
     mode: DateLimitMode;
     onModeChange: (mode: DateLimitMode) => void;
-    title?: React.ReactNode;
+    title?: ReactNode;
     startDate: Date | undefined;
     endDate: Date | undefined;
     onStartChange: (value?: Date) => void;
@@ -17,8 +17,8 @@ export type RangeFormProps = {
     valueSelectionModes: DateLimitMode[];
     rangeDisplayMode?: RangeDisplayMode;
     isInvertedRange?: boolean;
-} & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions'>;
+} & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions' | 'errorTexts'>;
 export type RangeFormTexts = {
-    range: React.ReactNode | string;
-    hour: React.ReactNode | string;
+    range: ReactNode | string;
+    hour: ReactNode | string;
 };

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

@@ -1,3 +1,3 @@
 import type { RangeFormContainerProps } from './RangeFormContainer.types';
-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;
+declare const RangeFormContainer: ({ errorTexts, 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

@@ -16,7 +16,8 @@ import { DEFAULT_LIMIT_MODE } from '../TimeWindow';
 import * as S from './RangeFormContainer.styles';
 
 var RangeFormContainer = function RangeFormContainer(_ref) {
-  var activeDays = _ref.activeDays,
+  var errorTexts = _ref.errorTexts,
+      activeDays = _ref.activeDays,
       disabled = _ref.disabled,
       days = _ref.days,
       dayKeys = _ref.dayKeys,
@@ -115,6 +116,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
     return /*#__PURE__*/React.createElement(RangeForm, {
       disabled: disabled,
       texts: texts,
+      errorTexts: errorTexts,
       onModeChange: function onModeChange(selected) {
         setMode(selected);
         handleModeChange(selected);
@@ -132,7 +134,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       rangeDisplayMode: rangeDisplayMode,
       isInvertedRange: Boolean(dayValue == null ? void 0 : dayValue.inverted)
     });
-  }, [timeFormat, rangeDisplayMode, valueSelectionModes, handleModeChange, mode, disabled, dayValue, onRangeDelete, texts, timePickerProps, onStartChange, onEndChange, onExactHourSelect, valueFormatOptions]);
+  }, [disabled, texts, errorTexts, mode, dayValue.start, dayValue.stop, dayValue == null ? void 0 : dayValue.inverted, timeFormat, onStartChange, onEndChange, onExactHourSelect, onRangeDelete, valueSelectionModes, valueFormatOptions, timePickerProps, rangeDisplayMode, handleModeChange]);
   var invertedToggleLink = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.InvertAction, {
       onClick: toggleInverted

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

@@ -1,14 +1,16 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 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, RangeDisplayMode } from './RangeForm/RangeForm.types';
 export type DateValue = [Date | undefined, Date | undefined, boolean | undefined];
+export type FilterErrorType = [ReactNode?, ReactNode?];
 export type RangeFormContainerProps = {
+    errorTexts?: FilterErrorType;
     activeDays: DayKey[];
     dayKeys: DayKey | DayKey[];
-    getDayLabel: (dayKey: DayKey, long?: boolean) => string | object | React.ReactNode;
+    getDayLabel: (dayKey: DayKey, long?: boolean) => string | object | ReactNode;
     getDayValue: (dayKey: DayKey) => Partial<FilterDefinition>;
     onMultipleDayTimeChange: (value: DateValue) => void;
     onDayTimeChange: (value: DateValue, dayKey: DayKey) => void;
@@ -23,5 +25,5 @@ export type RangeFormContainerProps = {
     timeFormat?: string;
     valueFormatOptions?: DateToFormatOptions;
     timePickerProps?: Partial<TimePickerProps>;
-    renderSuffix?: () => React.ReactNode;
+    renderSuffix?: () => ReactNode;
 } & Pick<TimeWindowProps, 'monthlyFilter' | 'monthlyFilterPeriod' | 'hideHeader' | 'headerOptions' | 'onChange' | 'days'> & WithDisabledProp & Partial<RangeActions>;

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']));