@synerise/ds-date-range-picker 0.20.8 → 0.21.1

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.0...@synerise/ds-date-range-picker@0.21.1) (2023-04-12)
+
+
+### Bug Fixes
+
+* **date-range-picker:** adds separated translation key indexes ([6e899e9](https://github.com/Synerise/synerise-design/commit/6e899e99800ba26f81faf22650698b27529acb95))
+
+
+
+
+
+# [0.21.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.20.9...@synerise/ds-date-range-picker@0.21.0) (2023-04-12)
+
+
+### Bug Fixes
+
+* **date-range-picker:** addsus notation support to monthly scheduler ([7cef538](https://github.com/Synerise/synerise-design/commit/7cef5388ee1e50b9f147e089bc2e88d4f6706c3f))
+* **date-range-picker:** fixes to support long display of days ([496e467](https://github.com/Synerise/synerise-design/commit/496e467e21d2071c8ab13a0b217332abb6e2cfc0))
+* **date-range-picker:** now button should not be left focused ([382dd26](https://github.com/Synerise/synerise-design/commit/382dd268e23337036933a5a420459e0748a7c170))
+* **date-range-picker:** prevent end time clearing to current time ([5e4cfb6](https://github.com/Synerise/synerise-design/commit/5e4cfb62b4a4bf50fb1fafc1497b146d2b31ad7c))
+
+
+### Features
+
+* **date-range-picker:** exposes a standalone monthly scheduler ([d73d59c](https://github.com/Synerise/synerise-design/commit/d73d59c2364fc4e9a6f8a1b2daeb306da8a9dc89))
+
+
+
+
+
+## [0.20.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.20.8...@synerise/ds-date-range-picker@0.20.9) (2023-04-05)
+
+**Note:** Version bump only for package @synerise/ds-date-range-picker
+
+
+
+
+
 ## [0.20.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.20.7...@synerise/ds-date-range-picker@0.20.8) (2023-04-05)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

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

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { MonthlyProps } from './Monthly.types';
+declare const Monthly: React.FC<MonthlyProps>;
+export default Monthly;

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

@@ -0,0 +1,372 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 { useIntl } from 'react-intl';
+import * as dayjs from 'dayjs';
+import { v4 as uuid } from 'uuid';
+import { useDataFormat } from '@synerise/ds-data-format';
+import RangeFormContainer from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer';
+import { SelectionCount, SelectionHint, AddButton } from '../../../Shared';
+import Grid from '../../../Shared/TimeWindow/Grid/Grid';
+import Day from '../../../Shared/TimeWindow/Day/Day';
+import * as S from '../../../RangeFilter.styles';
+import { useShiftAndControlKeys } from '../hooks/useShiftAndControlKeys';
+import { canAddAnotherRange, haveActiveDaysCommonRange, range } from './utils';
+import { DEFAULT_RANGE_START, DEFAULT_RANGE_END, DEFAULT_TIME_FORMAT, EMPTY_OBJECT, DEFAULT_MAX_ENTRIES, RENDER_EMPTY_NODE_FN, NOOP } from '../constants';
+import { MONTH_DAYS, DAYS_OF_PERIOD_ENUM, COUNTED_FROM_ENUM, MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_SHORT } from '../../../constants';
+import { US_NOTATION_WEEK_DAYS_INDEXES } from '../../../Shared/TimeWindow/constants/timeWindow.constants';
+
+var Monthly = function Monthly(_ref) {
+  var _ref$maxEntries = _ref.maxEntries,
+      maxEntries = _ref$maxEntries === void 0 ? DEFAULT_MAX_ENTRIES : _ref$maxEntries,
+      _ref$valueSelectionMo = _ref.valueSelectionMode,
+      valueSelectionMode = _ref$valueSelectionMo === void 0 ? ['Hour', 'Range'] : _ref$valueSelectionMo,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? NOOP : _ref$onChange,
+      timeFormat = _ref.timeFormat,
+      valueFormatOptions = _ref.valueFormatOptions,
+      value = _ref.value,
+      timePickerProps = _ref.timePickerProps,
+      disabled = _ref.disabled,
+      _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;
+  var defaultDayValue = React.useMemo(function () {
+    return {
+      start: DEFAULT_RANGE_START,
+      stop: DEFAULT_RANGE_END,
+      restricted: false,
+      display: false,
+      inverted: false,
+      mode: valueSelectionMode[0]
+    };
+  }, [valueSelectionMode]);
+
+  var _React$useState = React.useState(Object.keys(value)),
+      filteredSchedule = _React$useState[0],
+      setFilteredSchedule = _React$useState[1];
+
+  var _React$useState2 = React.useState([]),
+      activeDays = _React$useState2[0],
+      setActiveDays = _React$useState2[1];
+
+  var ref = React.useRef();
+
+  var _useShiftAndControlKe = useShiftAndControlKeys(ref),
+      controlKeyPressed = _useShiftAndControlKe[0],
+      shiftKeyPressed = _useShiftAndControlKe[1];
+
+  var intl = useIntl();
+
+  var _useDataFormat = useDataFormat(),
+      isSundayFirstWeekDay = _useDataFormat.isSundayFirstWeekDay;
+
+  var allKeys = React.useMemo(function () {
+    if (periodType === DAYS_OF_PERIOD_ENUM.DAY_OF_WEEK) {
+      if (isSundayFirstWeekDay) {
+        var keys = [];
+        range(0, 5).forEach(function (i) {
+          keys = [].concat(keys, US_NOTATION_WEEK_DAYS_INDEXES.map(function (index) {
+            return index + 7 * i;
+          }));
+        });
+        return keys;
+      }
+
+      return range(0, 5 * 7);
+    }
+
+    return range(0, 31);
+  }, [periodType, isSundayFirstWeekDay]);
+
+  var getGridSettings = function getGridSettings() {
+    var _settings;
+
+    var settings = (_settings = {}, _settings[DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH] = {
+      numberOfDays: 31,
+      reverseGroup: 1,
+      inverted: countedFrom === COUNTED_FROM_ENUM.ENDING
+    }, _settings[DAYS_OF_PERIOD_ENUM.DAY_OF_WEEK] = {
+      numberOfDays: 7 * 5,
+      reverseGroup: 7,
+      labelInverted: countedFrom === COUNTED_FROM_ENUM.ENDING,
+      inverted: countedFrom === COUNTED_FROM_ENUM.ENDING,
+      rowLabelFormatter: function rowLabelFormatter(rowIndex) {
+        return intl.formatMessage(MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK[rowIndex]);
+      }
+    }, _settings);
+    return settings[periodType];
+  };
+
+  React.useEffect(function () {
+    setFilteredSchedule(Object.keys(value));
+  }, [value]);
+  var removeEmptyEntries = React.useCallback(function (monthlySchedule) {
+    var emptyEntries = Object.keys(monthlySchedule).filter(function (key) {
+      return Object.keys(monthlySchedule[key]).length === 0;
+    });
+    var scheduleToUpdate = monthlySchedule;
+    emptyEntries.forEach(function (emptyEntry) {
+      delete scheduleToUpdate[emptyEntry];
+    });
+    onChange(scheduleToUpdate);
+  }, [onChange]);
+  React.useEffect(function () {
+    var entriesWithActiveDaysValue = Object.keys(value).filter(function (id) {
+      return activeDays.every(function (day) {
+        return !!value[id][day] && haveActiveDaysCommonRange(value[id], activeDays);
+      });
+    });
+    removeEmptyEntries(value);
+    setFilteredSchedule(entriesWithActiveDaysValue);
+  }, [value, activeDays, removeEmptyEntries]);
+  var handleDayTimeChange = React.useCallback(function (dayValue, dayKey, guid) {
+    var updatedSchedule = value;
+    var start = dayValue[0],
+        end = dayValue[1];
+
+    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
+        });
+      });
+    } 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
+      });
+    }
+
+    onChange(updatedSchedule);
+  }, [value, onChange]);
+
+  var _getDayValue = React.useCallback(function (dayKey, guid) {
+    if (typeof dayKey === 'number' && value[guid] && !!value[guid][dayKey]) {
+      return value[guid][dayKey];
+    }
+
+    return defaultDayValue;
+  }, [value, defaultDayValue]);
+
+  var handleModeChange = React.useCallback(function (selectedMode, dayKeys, guid) {
+    var updatedSchedule = value;
+    dayKeys.forEach(function (day) {
+      updatedSchedule[guid][day] = _objectSpread({}, value[guid][day], {
+        mode: selectedMode
+      });
+    });
+    onChange(updatedSchedule);
+  }, [value, onChange]);
+  var handleRangeDelete = React.useCallback(function (guid, activeDaysArray) {
+    var updatedSchedule = value;
+    activeDaysArray.forEach(function (activeDay) {
+      delete updatedSchedule[guid][activeDay];
+    });
+    onChange(_objectSpread({}, updatedSchedule));
+  }, [value, onChange]);
+  var dayWeekFormatter = React.useCallback(function (dayKey, _long) {
+    var weekStartIndex = Math.floor(dayKey / 7);
+    var dayOfWeek = dayKey - weekStartIndex * 7;
+    var weekday = intl.formatMessage(MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG[dayOfWeek]);
+    var nthWeek = intl.formatMessage(MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK[weekStartIndex]);
+    return _long ? nthWeek + " " + weekday : intl.formatMessage(MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_SHORT[dayOfWeek]);
+  }, [intl]);
+  var dayMonthFormatter = React.useCallback(function (dayKey) {
+    var locale = intl.locale.substring(0, 2);
+    return MONTH_DAYS(locale)[dayKey];
+  }, [intl]);
+  var dayFormatter = React.useCallback(function (dayKey, _long2) {
+    if (periodType === DAYS_OF_PERIOD_ENUM.DAY_OF_WEEK) {
+      return dayWeekFormatter(dayKey, _long2);
+    }
+
+    return dayMonthFormatter(dayKey);
+  }, [periodType, dayWeekFormatter, dayMonthFormatter]);
+  var checkDay = React.useCallback(function (dayKey) {
+    setActiveDays([dayKey]);
+  }, []);
+  var getDayLabel = React.useCallback(function (dayKey, _long3) {
+    return dayFormatter(dayKey, _long3 || false);
+  }, [dayFormatter]);
+  var excludeDayFromActive = React.useCallback(function (dayKey) {
+    setActiveDays(activeDays.filter(function (day) {
+      return day !== dayKey;
+    }));
+  }, [activeDays]);
+  var isDayRestricted = React.useCallback(function (dayKey) {
+    return Object.keys(value).some(function (key) {
+      return !!value[key][dayKey];
+    });
+  }, [value]);
+  var removeDaySelection = React.useCallback(function (dayKey) {
+    var updatedSchedule = value;
+    Object.keys(value).forEach(function (key) {
+      delete updatedSchedule[key][dayKey];
+    });
+    excludeDayFromActive(dayKey);
+    onChange(updatedSchedule);
+  }, [value, onChange, excludeDayFromActive]);
+  var uncheckActiveDay = React.useCallback(function (dayKey) {
+    removeDaySelection(dayKey);
+  }, [removeDaySelection]);
+  var handleSelectAll = React.useCallback(function () {
+    setActiveDays(allKeys);
+  }, [allKeys]);
+  var handleUnselectAll = React.useCallback(function () {
+    setActiveDays([]);
+  }, []);
+  var checkActiveDay = React.useCallback(function (dayKey) {
+    if (!isDayRestricted(dayKey)) {
+      checkDay(dayKey);
+    }
+
+    var updatedActiveDay = [];
+
+    if (controlKeyPressed) {
+      updatedActiveDay = activeDays.includes(dayKey) ? activeDays : [].concat(activeDays, [dayKey]);
+    } else if (activeDays.length > 0 && shiftKeyPressed) {
+      updatedActiveDay = activeDays[0] < dayKey ? range(+activeDays[0], +dayKey + 1) : range(+dayKey, +activeDays[0] + 1);
+    } else {
+      updatedActiveDay = [dayKey];
+    }
+
+    setActiveDays(updatedActiveDay);
+  }, [checkDay, isDayRestricted, activeDays, controlKeyPressed, shiftKeyPressed]);
+  var handleToggleDay = React.useCallback(function (dayKey, forcedState) {
+    if (typeof forcedState !== 'undefined') {
+      if (controlKeyPressed && forcedState) {
+        activeDays.includes(dayKey) ? excludeDayFromActive(dayKey) : checkActiveDay(dayKey);
+        return;
+      }
+
+      forcedState ? checkActiveDay(dayKey) : uncheckActiveDay(dayKey);
+    } else {
+      activeDays.includes(dayKey) ? uncheckActiveDay(dayKey) : checkActiveDay(dayKey);
+    }
+  }, [controlKeyPressed, activeDays, uncheckActiveDay, checkActiveDay, excludeDayFromActive]);
+  var renderDay = React.useCallback(function (dayKey) {
+    var isActive = activeDays.includes(dayKey);
+    return /*#__PURE__*/React.createElement(Day, {
+      key: dayKey,
+      dayKey: dayKey,
+      "data-attr": dayKey,
+      label: getDayLabel(dayKey),
+      restricted: isDayRestricted(dayKey),
+      active: isActive,
+      readOnly: disabled,
+      intl: intl,
+      onToggle: handleToggleDay,
+      texts: EMPTY_OBJECT
+    });
+  }, [activeDays, intl, getDayLabel, handleToggleDay, isDayRestricted, disabled]);
+  var handleRangeAdd = React.useCallback(function () {
+    var _objectSpread2;
+
+    var updatedDay = {};
+    var guid = Object.keys(value).find(function (key) {
+      return activeDays.every(function (day) {
+        return value[key][day] === undefined;
+      });
+    });
+    activeDays.forEach(function (day) {
+      updatedDay[day] = defaultDayValue;
+    });
+    var restOfScheduleObject = guid ? value[guid] : EMPTY_OBJECT;
+
+    var updatedSchedule = _objectSpread({}, value, (_objectSpread2 = {}, _objectSpread2[guid || uuid()] = _objectSpread({}, restOfScheduleObject, {}, updatedDay), _objectSpread2));
+
+    onChange(updatedSchedule);
+  }, [value, activeDays, defaultDayValue, onChange]);
+  var renderGridTitle = React.useCallback(function (count) {
+    return /*#__PURE__*/React.createElement(SelectionCount, {
+      selectedDayCount: count,
+      label: intl.formatMessage({
+        id: 'DS.DATE-RANGE-PICKER.SELECTED',
+        defaultMessage: 'Selected'
+      })
+    });
+  }, [intl]);
+  var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
+  var isAnyDaySelected = activeDays.length > 0;
+  var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
+  return /*#__PURE__*/React.createElement(S.NewFilterContainer, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Grid, _extends({
+    reverseGroup: 0,
+    onUnselectAll: handleUnselectAll,
+    onSelectAll: handleSelectAll,
+    showUnselectAll: Boolean(activeDays.length),
+    showSelectAll: true,
+    renderDay: renderDay,
+    keys: allKeys,
+    days: EMPTY_OBJECT,
+    intl: intl,
+    numberOfDays: 7,
+    numberOfDaysPerRow: 7,
+    texts: EMPTY_OBJECT,
+    title: renderGridTitle(activeDays.length)
+  }, getGridSettings())), isAnyDaySelected && filteredSchedule.map(function (guid, index) {
+    return /*#__PURE__*/React.createElement(RangeFormContainer, {
+      days: EMPTY_OBJECT,
+      onChange: NOOP,
+      key: "value-range-" + guid,
+      onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {
+        handleDayTimeChange(dayValue, dayKey, guid);
+      },
+      texts: EMPTY_OBJECT,
+      onMultipleDayTimeChange: function onMultipleDayTimeChange(dates) {
+        return handleDayTimeChange(dates, activeDays, guid);
+      },
+      dayKeys: activeDays // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ,
+      getDayLabel: getDayLabel,
+      activeDays: activeDays,
+      getDayValue: function getDayValue(dayKey) {
+        return _getDayValue(dayKey, guid);
+      },
+      onRangeDelete: disabled ? undefined : function () {
+        return handleRangeDelete(guid, activeDays);
+      },
+      onModeChange: function onModeChange(mode) {
+        return handleModeChange(mode, activeDays, guid);
+      },
+      valueSelectionModes: valueSelectionMode,
+      hideHeader: index !== 0,
+      renderSuffix: RENDER_EMPTY_NODE_FN,
+      timePickerProps: timePickerProps,
+      timeFormat: timeFormat,
+      valueFormatOptions: valueFormatOptions,
+      disabled: disabled,
+      monthlyFilterPeriod: periodType
+    });
+  }), isAnyDaySelected && !canAddRange && /*#__PURE__*/React.createElement(SelectionHint, {
+    message: intl.formatMessage({
+      id: 'DS.DATE-RANGE-PICKER.MAXIMUM-RANGES-MESSAGE',
+      defaultMessage: 'The maximum amount of ranges have been selected.'
+    })
+  }), shouldRenderAddButton && /*#__PURE__*/React.createElement(AddButton, {
+    label: intl.formatMessage({
+      id: 'DS.DATE-RANGE-PICKER.ADD-TIME',
+      defaultMessage: 'Add range'
+    }),
+    onClick: handleRangeAdd
+  }), !isAnyDaySelected && !disabled && /*#__PURE__*/React.createElement(SelectionHint, {
+    message: intl.formatMessage({
+      id: 'DS.DATE-RANGE-PICKER.SELECT-DAYS-DESCRIPTION',
+      defaultMessage: 'Select range.'
+    })
+  }));
+};
+
+export default Monthly;

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

@@ -0,0 +1,18 @@
+import { DAYS_OF_PERIOD_ENUM, COUNTED_FROM_ENUM } from '../../../constants';
+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';
+export declare type MonthlyScheduleDayValue = DayOptions & {
+    mode: DateLimitMode;
+};
+export declare type MonthlySchedule = {
+    [guid: string]: Record<DayOfMonthIndex, MonthlyScheduleDayValue>;
+};
+export declare 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 declare type MonthlyProps = {
+    value: MonthlySchedule;
+    periodType: DAYS_OF_PERIOD_ENUM;
+    countedFrom: COUNTED_FROM_ENUM;
+    onChange: (value: MonthlyProps['value']) => void;
+} & FilterBaseProps & WithDisabledProp;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,5 @@
+import { DayOfMonthIndex, MonthlySchedule, MonthlyScheduleDayValue } from './Monthly.types';
+import { DayKey } from '../../../Shared/TimeWindow/TimeWindow.types';
+export declare const range: (start: number, stop: number) => number[];
+export declare const haveActiveDaysCommonRange: (days: Record<DayOfMonthIndex, MonthlyScheduleDayValue>, activeDaysArray: DayKey[]) => boolean;
+export declare const canAddAnotherRange: (schedule: MonthlySchedule, activeDays: DayKey[], maxRanges?: number) => boolean;

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

@@ -0,0 +1,43 @@
+import { DEFAULT_MAX_ENTRIES } from '../constants';
+export var range = function range(start, stop) {
+  var result = [];
+
+  for (var i = start; i < stop; i += 1) {
+    result.push(i);
+  }
+
+  return result;
+};
+export var haveActiveDaysCommonRange = function haveActiveDaysCommonRange(days, activeDaysArray) {
+  var previousDay;
+  var activeDaysHaveDifferentRanges = activeDaysArray.some(function (dayIndex) {
+    var _previousDay, _previousDay2;
+
+    var currentDay = days[dayIndex];
+
+    if (!currentDay) {
+      return true;
+    }
+
+    if (!previousDay) {
+      previousDay = currentDay;
+      return false;
+    }
+
+    var areRangeDifferent = (currentDay == null ? void 0 : currentDay.start) !== ((_previousDay = previousDay) == null ? void 0 : _previousDay.start) || (currentDay == null ? void 0 : currentDay.stop) !== ((_previousDay2 = previousDay) == null ? void 0 : _previousDay2.stop);
+    previousDay = currentDay;
+    return areRangeDifferent;
+  });
+  return !activeDaysHaveDifferentRanges;
+};
+export var canAddAnotherRange = function canAddAnotherRange(schedule, activeDays, maxRanges) {
+  if (maxRanges === void 0) {
+    maxRanges = DEFAULT_MAX_ENTRIES;
+  }
+
+  return Object.keys(schedule).length < maxRanges || Object.keys(schedule).some(function (key) {
+    return activeDays.every(function (day) {
+      return schedule[key][day] === undefined;
+    }) && !haveActiveDaysCommonRange(schedule[key], activeDays);
+  });
+};

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

@@ -153,8 +153,8 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleDayTimeChange", function (value, dayKey) {
       _this.handleDayChange(dayKey, {
         restricted: true,
-        start: dayjs(value[0]).format(TIME_FORMAT),
-        stop: dayjs(value[1]).format(TIME_FORMAT)
+        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
       });
     });
 

package/dist/RangeFilter/constants.d.ts

@@ -58,3 +58,15 @@ export declare const TYPES_DATA: {
     };
 };
 export declare const SPACE_UNICODE = "\u00A0";
+export declare const MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK: {
+    id: string;
+    defaultMessage: string;
+}[];
+export declare const MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG: {
+    id: string;
+    defaultMessage: string;
+}[];
+export declare const MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_SHORT: {
+    id: string;
+    defaultMessage: string;
+}[];

package/dist/RangeFilter/constants.js

@@ -76,4 +76,54 @@ export var TYPES_DATA = {
     }
   }
 };
-export var SPACE_UNICODE = "\xA0";
+export var SPACE_UNICODE = "\xA0";
+export var MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK = range(1, 6).map(function (i) {
+  return {
+    id: "DS.DATE-RANGE-PICKER.NTH." + i,
+    defaultMessage: "Week " + i
+  };
+});
+export var MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG = [{
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.1',
+  defaultMessage: 'Monday'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.2',
+  defaultMessage: 'Tuesday'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.3',
+  defaultMessage: 'Wednesday'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.4',
+  defaultMessage: 'Thursday'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.5',
+  defaultMessage: 'Friday'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.6',
+  defaultMessage: 'Saturday'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.7',
+  defaultMessage: 'Sunday'
+}];
+export var MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_SHORT = [{
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_SHORT.1',
+  defaultMessage: 'Mon'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_SHORT.2',
+  defaultMessage: 'Tue'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_SHORT.3',
+  defaultMessage: 'Wed'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_SHORT.4',
+  defaultMessage: 'Thu'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_SHORT.5',
+  defaultMessage: 'Fri'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_SHORT.6',
+  defaultMessage: 'Sat'
+}, {
+  id: 'DS.DATE-RANGE-PICKER.WEEKDAYS_SHORT.7',
+  defaultMessage: 'Sun'
+}];

package/dist/RangePicker/RangePicker.js

@@ -475,7 +475,8 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
     }, this.renderSide(COLUMNS.LEFT)), /*#__PURE__*/React.createElement(S.Side, {
       mode: mode
     }, this.renderSide(COLUMNS.RIGHT))), /*#__PURE__*/React.createElement(S.PickerFooter, null, /*#__PURE__*/React.createElement(Range, {
-      onClick: function onClick() {
+      onClick: function onClick(_ref) {
+        var currentTarget = _ref.currentTarget;
         var now = new Date();
 
         var literallyNow = _objectSpread({}, value, {
@@ -486,6 +487,7 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         onChange(literallyNow);
+        currentTarget.blur();
       }
     }, texts.now), /*#__PURE__*/React.createElement(S.FooterSeparator, null), !dateOnly && /*#__PURE__*/React.createElement(S.DateTimeModeSwitch, {
       type: "ghost",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.20.8",
+  "version": "0.21.1",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,7 +36,7 @@
     "@synerise/ds-button": "^0.17.12",
     "@synerise/ds-date-picker": "^0.9.5",
     "@synerise/ds-icon": "^0.54.0",
-    "@synerise/ds-manageable-list": "^0.24.13",
+    "@synerise/ds-manageable-list": "^0.25.0",
     "@synerise/ds-time-picker": "^0.7.4",
     "@synerise/ds-tooltip": "^0.13.0",
     "@synerise/ds-utils": "^0.19.0",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "42bda32506d121cbc207c73efca09f300a749120"
+  "gitHead": "3bc6aad4f4a0cbb7ceb7a92c5854d0680047bcdc"
 }