@synerise/ds-date-range-picker 0.20.9 → 0.21.2

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.1...@synerise/ds-date-range-picker@0.21.2) (2023-04-14)
+
+
+### Bug Fixes
+
+* **date-range-picker:** "more" dropdown trigger should toggle dropdown ([7083de0](https://github.com/Synerise/synerise-design/commit/7083de02906eb79a2274ef952b2cbd2c8122e1a7))
+* **date-range-picker:** add some it.todo in tests ([ec6f52a](https://github.com/Synerise/synerise-design/commit/ec6f52a69df81e2d14312850521bc47114a70bdc))
+* **date-range-picker:** date range picker us notation fixes ([c17afe0](https://github.com/Synerise/synerise-design/commit/c17afe052c3c0226ab4ed2f7c25655a0d2e89a75))
+* **date-range-picker:** disable AM mode for 12 PM lower limit ([237bc00](https://github.com/Synerise/synerise-design/commit/237bc00277fa3fa3cb6dacba14a2630da75706fe))
+* **date-range-picker:** fixes filter unselect all ([592b48e](https://github.com/Synerise/synerise-design/commit/592b48eedc876dd8215790d2b73a08f3e0ade170))
+* **date-range-picker:** fixes issues with range cloning in old filters ([15fc3b4](https://github.com/Synerise/synerise-design/commit/15fc3b4878e761e2685cda99afdfd1ff590e2ac4))
+* **date-range-picker:** month filter US notation fixes ([06ce486](https://github.com/Synerise/synerise-design/commit/06ce4861a1cc468b15ba01b82f75eca374f96f0f))
+* **date-range-picker:** rangePicker 12HoursClock disabling options fix ([5de9505](https://github.com/Synerise/synerise-design/commit/5de95050e786821892557528cd3a61a0b5eadcbf))
+* **date-range-picker:** tests fixes ([68935f3](https://github.com/Synerise/synerise-design/commit/68935f394b102e4af8cb1f04f314275cb45a41bb))
+* **date-range-picker:** uS_NOTATION_MONTH_DAYS_INDEXES order fix ([1e1f701](https://github.com/Synerise/synerise-design/commit/1e1f701521a8a50c21f33bcf476cf41449e5c0f2))
+
+
+
+
+
+## [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

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/Filters/new/Weekly/Weekly.js

@@ -78,11 +78,11 @@ var Weekly = function Weekly(_ref) {
     onChange(scheduleToUpdate);
   }, [onChange]);
   React.useEffect(function () {
-    var entriesWithActiveDaysValue = Object.keys(value).filter(function (id) {
+    var entriesWithActiveDaysValue = activeDays.length ? 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]);

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

@@ -30,7 +30,7 @@ import AddButton from '../AddButton/AddButton';
 import RangeFormContainer from './RangeFormContainer/RangeFormContainer';
 import Day from './Day/Day';
 import SelectionHint from '../SelectionHint/SelectionHint';
-import { EU_NOTATION_WEEK_DAYS_INDEXES, US_NOTATION_WEEK_DAYS_INDEXES } from './constants/timeWindow.constants';
+import { EU_NOTATION_MONTH_DAYS_INDEXES, EU_NOTATION_WEEK_DAYS_INDEXES, US_NOTATION_MONTH_DAYS_INDEXES, US_NOTATION_WEEK_DAYS_INDEXES } from './constants/timeWindow.constants';
 export var DEFAULT_LIMIT_MODE = 'Range';
 
 var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
@@ -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
       });
     });
 
@@ -189,7 +189,8 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
 
     _defineProperty(_assertThisInitialized(_this), "handleClearSelection", function () {
       _this.setState({
-        activeDays: []
+        activeDays: [],
+        isRangeDefined: false
       });
     });
 
@@ -263,17 +264,30 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "replaceDaysIndexesForUSNotation", function (daysIndexes) {
+      var isSundayFirstWeekDay = _this.props.isSundayFirstWeekDay;
+      var stringifyDaysIndexes = JSON.stringify(daysIndexes);
+      var stringifyEUNotationWeekDaysIndexes = JSON.stringify(EU_NOTATION_WEEK_DAYS_INDEXES);
+      var stringifyEUNotationMonthDaysIndexes = JSON.stringify(EU_NOTATION_MONTH_DAYS_INDEXES);
+      var result = daysIndexes;
+
+      if (stringifyDaysIndexes === stringifyEUNotationWeekDaysIndexes && isSundayFirstWeekDay) {
+        result = US_NOTATION_WEEK_DAYS_INDEXES;
+      }
+
+      if (stringifyDaysIndexes === stringifyEUNotationMonthDaysIndexes && isSundayFirstWeekDay) {
+        result = US_NOTATION_MONTH_DAYS_INDEXES;
+      }
+
+      return result;
+    });
+
     _defineProperty(_assertThisInitialized(_this), "getAllKeys", function () {
       var _this$props7 = _this.props,
           numberOfDays = _this$props7.numberOfDays,
-          customDays = _this$props7.customDays,
-          isSundayFirstWeekDay = _this$props7.isSundayFirstWeekDay;
+          customDays = _this$props7.customDays;
       var keys = range(numberOfDays);
-
-      if (JSON.stringify(keys) === JSON.stringify(EU_NOTATION_WEEK_DAYS_INDEXES) && isSundayFirstWeekDay) {
-        keys = US_NOTATION_WEEK_DAYS_INDEXES;
-      }
-
+      keys = _this.replaceDaysIndexesForUSNotation(keys).slice();
       if (customDays) keys = [].concat(keys, Object.keys(customDays));
       return keys;
     });
@@ -444,9 +458,10 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    var activeDays = this.state.activeDays;
     var hasCommonRange = this.haveActiveDaysCommonRange();
 
-    if (prevState.isRangeDefined !== hasCommonRange) {
+    if (prevState.isRangeDefined !== hasCommonRange && activeDays.length) {
       // eslint-disable-next-line react/no-did-update-set-state
       this.setState(function (state) {
         return _objectSpread({}, state, {

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

@@ -1,2 +1,4 @@
 export declare const EU_NOTATION_WEEK_DAYS_INDEXES: number[];
 export declare const US_NOTATION_WEEK_DAYS_INDEXES: number[];
+export declare const EU_NOTATION_MONTH_DAYS_INDEXES: number[];
+export declare const US_NOTATION_MONTH_DAYS_INDEXES: number[];

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

@@ -1,2 +1,4 @@
 export var EU_NOTATION_WEEK_DAYS_INDEXES = [0, 1, 2, 3, 4, 5, 6];
-export var US_NOTATION_WEEK_DAYS_INDEXES = [6, 0, 1, 2, 3, 4, 5];
+export var US_NOTATION_WEEK_DAYS_INDEXES = [6, 0, 1, 2, 3, 4, 5];
+export var EU_NOTATION_MONTH_DAYS_INDEXES = [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, 32, 33, 34];
+export var US_NOTATION_MONTH_DAYS_INDEXES = [6, 0, 1, 2, 3, 4, 5, 13, 7, 8, 9, 10, 11, 12, 20, 14, 15, 16, 17, 18, 19, 27, 21, 22, 23, 24, 25, 26, 34, 28, 29, 30, 31, 32, 33];

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

@@ -337,7 +337,9 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderTimePicker", function (side) {
-      var value = _this.props.value;
+      var _this$props8 = _this.props,
+          value = _this$props8.value,
+          is12HoursClock = _this$props8.is12HoursClock;
       var from = value.from,
           to = value.to;
 
@@ -354,9 +356,9 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
               key: "time-picker-" + side,
               value: getDateFromString(from),
               onChange: _this.handleFromTimeChange,
-              disabledHours: getDisabledTimeOptions(from, 'HOURS', null, to),
-              disabledMinutes: getDisabledTimeOptions(from, 'MINUTES', null, to),
-              disabledSeconds: getDisabledTimeOptions(from, 'SECONDS', null, to),
+              disabledHours: getDisabledTimeOptions(from, 'HOURS', null, to, is12HoursClock),
+              disabledMinutes: getDisabledTimeOptions(from, 'MINUTES', null, to, is12HoursClock),
+              disabledSeconds: getDisabledTimeOptions(from, 'SECONDS', null, to, is12HoursClock),
               onShortNext: sidesAreAdjacent ? undefined : function () {
                 _this.handleAddDay(1, COLUMNS.LEFT);
               },
@@ -372,9 +374,9 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
               key: "time-picker-" + side,
               value: getDateFromString(to),
               onChange: _this.handleToTimeChange,
-              disabledHours: getDisabledTimeOptions(to, 'HOURS', from, null),
-              disabledMinutes: getDisabledTimeOptions(to, 'MINUTES', from, null),
-              disabledSeconds: getDisabledTimeOptions(to, 'SECONDS', from, null),
+              disabledHours: getDisabledTimeOptions(to, 'HOURS', from, null, is12HoursClock),
+              disabledMinutes: getDisabledTimeOptions(to, 'MINUTES', from, null, is12HoursClock),
+              disabledSeconds: getDisabledTimeOptions(to, 'SECONDS', from, null, is12HoursClock),
               onShortNext: function onShortNext() {
                 _this.handleAddDay(1, COLUMNS.RIGHT);
               },
@@ -420,10 +422,10 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
   _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
     var _prevProps$value, _prevProps$value2;
 
-    var _this$props8 = this.props,
-        value = _this$props8.value,
-        forceAdjacentMonths = _this$props8.forceAdjacentMonths,
-        startAlwaysOnTheLeft = _this$props8.startAlwaysOnTheLeft;
+    var _this$props9 = this.props,
+        value = _this$props9.value,
+        forceAdjacentMonths = _this$props9.forceAdjacentMonths,
+        startAlwaysOnTheLeft = _this$props9.startAlwaysOnTheLeft;
     var _this$props$jumpToSta = this.props.jumpToStartAndEnd,
         jumpToStartAndEnd = _this$props$jumpToSta === void 0 ? true : _this$props$jumpToSta;
     var _this$state3 = this.state,
@@ -462,20 +464,21 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.render = function render() {
-    var _this$props9 = this.props,
-        mode = _this$props9.mode,
-        onChange = _this$props9.onChange,
-        value = _this$props9.value,
-        canSwitchMode = _this$props9.canSwitchMode,
-        dateOnly = _this$props9.dateOnly,
-        onSwitchMode = _this$props9.onSwitchMode,
-        texts = _this$props9.texts;
+    var _this$props10 = this.props,
+        mode = _this$props10.mode,
+        onChange = _this$props10.onChange,
+        value = _this$props10.value,
+        canSwitchMode = _this$props10.canSwitchMode,
+        dateOnly = _this$props10.dateOnly,
+        onSwitchMode = _this$props10.onSwitchMode,
+        texts = _this$props10.texts;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Sides, null, /*#__PURE__*/React.createElement(S.Side, {
       mode: mode
     }, 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 +489,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/dist/RangePicker/utils.js

@@ -4,7 +4,7 @@ import fnsMin from 'date-fns/min';
 import fnsMax from 'date-fns/max';
 import fnsIsValid from 'date-fns/isValid';
 import dayjs from 'dayjs';
-import { AM, PM, HOUR_12, MAP_24_HOUR_TO_12, HOUR } from '@synerise/ds-time-picker';
+import { AM, PM, HOUR_12, MAP_24_HOUR_TO_12, HOUR, DISABLE_CLOCK_MODE_HOUR } from '@synerise/ds-time-picker';
 import { fnsEndOfDay, fnsIsSameMonth, fnsStartOfDay, fnsStartOfMonth } from '../fns';
 import { TIME_OPTIONS } from '../constants';
 import SET from '../dateUtils/set';
@@ -46,10 +46,21 @@ export var getDisabledTimeOptions = function getDisabledTimeOptions(initialDay,
   var dayClockMode = getAmOrPmFromDate(legacyParse(day));
   var lowerLimitClockMode = getAmOrPmFromDate(legacyParse(lowerLimit));
   var upperLimitClockMode = getAmOrPmFromDate(legacyParse(upperLimit));
+  var dayBuilder = dayjs(day);
+  var dayHour = dayBuilder.get(HOUR);
 
   if (is12HoursClock && lowerLimit) {
     if (lowerLimitClockMode === PM && dayjs(lowerLimit).get(HOUR) === HOUR_12) {
-      return [];
+      return [DISABLE_CLOCK_MODE_HOUR];
+    }
+
+    if (lowerLimitClockMode === AM && dayClockMode === PM) {
+      var day12HBuilder = dayjs(change24To12Hour(dayBuilder.toDate()));
+      var lowLimitDayBuilder = dayjs(lowerLimit);
+
+      if (day12HBuilder.isBefore(lowLimitDayBuilder)) {
+        return [DISABLE_CLOCK_MODE_HOUR];
+      }
     }
 
     if (lowerLimitClockMode === AM && dayClockMode === PM) {
@@ -65,15 +76,22 @@ export var getDisabledTimeOptions = function getDisabledTimeOptions(initialDay,
   if (is12HoursClock && upperLimit) {
     if (upperLimitClockMode === PM && dayClockMode === PM) {
       day = change24To12Hour(legacyParse(day));
-      upperLimit = change24To12Hour(legacyParse(upperLimit));
+    }
+
+    upperLimit = change24To12Hour(legacyParse(upperLimit));
+    var upLimitDayBuilder = dayjs(upperLimit);
+
+    if (upperLimitClockMode === PM && dayClockMode === AM && dayBuilder.isAfter(upLimitDayBuilder)) {
+      return [DISABLE_CLOCK_MODE_HOUR];
+    }
+
+    if (upperLimitClockMode === PM && dayClockMode === AM) {
+      return [];
     }
   }
 
   if (is12HoursClock && granularity !== HOURS_GRANULARITY) {
-    var dayBuilder = dayjs(day);
-    var hour = dayBuilder.get(HOUR);
-
-    if (hour === HOUR_12) {
+    if (dayHour === HOUR_12) {
       return [];
     }
   }
@@ -97,6 +115,22 @@ export var getDisabledTimeOptions = function getDisabledTimeOptions(initialDay,
       result = result.filter(function (item) {
         return item !== HOUR_12;
       });
+
+      var _lowLimitDayBuilder = dayjs(lowLimit);
+
+      var lowerLimitHour = _lowLimitDayBuilder.get(HOUR);
+
+      if (lowerLimitClockMode === PM && lowerLimitHour !== HOUR_12 && result[0] === 0) {
+        result.push(HOUR_12);
+      }
+
+      if (lowerLimitClockMode === AM && lowerLimitHour !== 0 && dayClockMode === AM && initialLowerLimit !== null) {
+        result.push(HOUR_12);
+      }
+
+      if (upperLimit && upperLimitClockMode === AM && dayClockMode === AM) {
+        result.push(DISABLE_CLOCK_MODE_HOUR);
+      }
     }
   }
 

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

@@ -48,8 +48,8 @@ var RangeDropdown = function RangeDropdown(_ref) {
       dropVisible = _React$useState[0],
       setDropVisible = _React$useState[1];
 
-  var overlayRef = React.useRef(null);
-  useOnClickOutside(overlayRef, function () {
+  var dropdownRef = React.useRef(null);
+  useOnClickOutside(dropdownRef, function () {
     setDropVisible(false);
   });
   var onMenuItemClick = React.useCallback(function (_ref2) {
@@ -70,7 +70,6 @@ var RangeDropdown = function RangeDropdown(_ref) {
   }, ranges) || anyOfTransformedRangesMatchesCurrentRange;
   var overlay = /*#__PURE__*/React.createElement(S.OverlayWrapper, {
     visible: dropVisible,
-    ref: overlayRef,
     width: DROPDOWN_WIDTH
   }, /*#__PURE__*/React.createElement(Scrollbar, {
     maxHeight: MAX_ITEMS_COUNT * ITEMS_HEIGHT,
@@ -90,7 +89,9 @@ var RangeDropdown = function RangeDropdown(_ref) {
       })
     }, range.translationKey ? texts[range.translationKey] : range.key);
   }))));
-  return /*#__PURE__*/React.createElement(S.DropdownContainer, null, /*#__PURE__*/React.createElement(S.Range, {
+  return /*#__PURE__*/React.createElement(S.DropdownContainer, {
+    ref: dropdownRef
+  }, /*#__PURE__*/React.createElement(S.Range, {
     type: containsCurrentRange ? 'primary' : 'tertiary',
     mode: "label-icon",
     onClick: function onClick() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.20.9",
+  "version": "0.21.2",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
     "@synerise/ds-button": "^0.17.12",
-    "@synerise/ds-date-picker": "^0.9.5",
+    "@synerise/ds-date-picker": "^0.9.6",
     "@synerise/ds-icon": "^0.54.0",
-    "@synerise/ds-manageable-list": "^0.25.0",
-    "@synerise/ds-time-picker": "^0.7.4",
+    "@synerise/ds-manageable-list": "^0.25.1",
+    "@synerise/ds-time-picker": "^0.7.5",
     "@synerise/ds-tooltip": "^0.13.0",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "f84931e820ffcf263bec74e9371f9d6a48e38a34"
+  "gitHead": "a81aad1ee5bb7249f069115cab0ec06b66ab12b0"
 }