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

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.2...@synerise/ds-date-range-picker@0.21.3) (2023-04-17)
+
+**Note:** Version bump only for package @synerise/ds-date-range-picker
+
+
+
+
+
+## [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)
 
 

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) {
@@ -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/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,14 +464,14 @@ 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, {

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.21.1",
+  "version": "0.21.3",
   "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.7",
     "@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": "3bc6aad4f4a0cbb7ceb7a92c5854d0680047bcdc"
+  "gitHead": "7e4f888ca6bd6fe09c94cccedd7ff9bd5985dc4d"
 }