@synerise/ds-date-range-picker 1.6.10 → 1.6.12

package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.js

@@ -1,378 +1,337 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import React, { PureComponent } from 'react';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { v4 as uuid } from 'uuid';
-import Button from '@synerise/ds-button';
-import { theme } from '@synerise/ds-core';
-import ContentItem from '@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem';
-import Tag, { TagShape } from '@synerise/ds-tag';
-import { getDefaultTexts } from '../../../utils';
-import TimeWindow from '../../Shared/TimeWindow/TimeWindow';
-import { COUNTED_FROM_ENUM, DAYS_OF_PERIOD_ENUM, DEFAULT_COUNTED_FROM, DEFAULT_DAYS_OF_PERIODS, MONTH_DAYS, SPACE_UNICODE, defaultId } from '../../constants';
-import * as S from './MonthlyFilter.styles';
-var MonthlyFilter = /*#__PURE__*/function (_PureComponent) {
-  function MonthlyFilter() {
-    var _visible;
-    var _this;
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
-    _this.state = {
-      visible: (_visible = {}, _visible[defaultId] = true, _visible)
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PureComponent } from "react";
+import { FormattedMessage, injectIntl } from "react-intl";
+import { v4 } from "uuid";
+import Button from "@synerise/ds-button";
+import { theme } from "@synerise/ds-core";
+import DSContentItem from "@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem";
+import Tag, { TagShape } from "@synerise/ds-tag";
+import { getDefaultTexts } from "../../../utils.js";
+import TimeWindow from "../../Shared/TimeWindow/TimeWindow.js";
+import { defaultId, DEFAULT_DAYS_OF_PERIODS, DEFAULT_COUNTED_FROM, MONTH_DAYS, DAYS_OF_PERIOD_ENUM, COUNTED_FROM_ENUM, SPACE_UNICODE } from "../../constants.js";
+import { PeriodMode, Select, MonthlyFilterWrapper, ContentWrapper, DropdownHeader, DropdownLabel, AddContainer } from "./MonthlyFilter.styles.js";
+const _MonthlyFilter = class _MonthlyFilter extends PureComponent {
+  constructor() {
+    super(...arguments);
+    this.state = {
+      visible: {
+        [defaultId]: true
+      }
     };
-    _this.setData = function (definition) {
-      var onChange = _this.props.onChange;
+    this.setData = (definition) => {
+      const {
+        onChange
+      } = this.props;
       return onChange(definition);
     };
-    _this.handleAddRow = function () {
-      var id = uuid();
-      var _this$props = _this.props,
-        value = _this$props.value,
-        countedFromPeriods = _this$props.countedFromPeriods,
-        daysOfPeriods = _this$props.daysOfPeriods;
-      var defaultPeriod = (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS)[0].value;
-      var defaultPeriodType = (countedFromPeriods || DEFAULT_COUNTED_FROM)[0].value;
-      _this.setData([].concat(value, [{
+    this.handleAddRow = () => {
+      const id = v4();
+      const {
+        value,
+        countedFromPeriods,
+        daysOfPeriods
+      } = this.props;
+      const defaultPeriod = (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS)[0].value;
+      const defaultPeriodType = (countedFromPeriods || DEFAULT_COUNTED_FROM)[0].value;
+      this.setData([...value, {
         period: defaultPeriod,
         periodType: defaultPeriodType,
         definition: {},
-        id: id
-      }]));
-      _this.handleCollapse(id);
+        id
+      }]);
+      this.handleCollapse(id);
     };
-    _this.handleRemoveRow = function (index) {
-      var value = _this.props.value;
-      var result = value.filter(function (item, key) {
-        return key !== index;
-      });
-      // @ts-expect-error requires types refactor
-      _this.handleRemoveRowCollapse(value[index].id);
-      _this.setData([].concat(result));
+    this.handleRemoveRow = (index) => {
+      const {
+        value
+      } = this.props;
+      const result = value.filter((item, key) => key !== index);
+      this.handleRemoveRowCollapse(value[index].id);
+      this.setData([...result]);
     };
-    _this.handleRemoveRowCollapse = function (deletedId) {
-      var value = _this.props.value;
-      var visible = _this.state.visible;
-      var itemKey = value.findIndex(function (item) {
-        return item.id === deletedId;
-      });
-      var next = value[itemKey + 1];
-      var prev = value[itemKey - 1];
-      visible[deletedId] && (next || prev) && _this.handleCollapse(next ? next.id : prev.id);
+    this.handleRemoveRowCollapse = (deletedId) => {
+      const {
+        value
+      } = this.props;
+      const {
+        visible
+      } = this.state;
+      const itemKey = value.findIndex((item) => item.id === deletedId);
+      const next = value[itemKey + 1];
+      const prev = value[itemKey - 1];
+      visible[deletedId] && (next || prev) && this.handleCollapse(next ? next.id : prev.id);
     };
-    _this.handleTypeChange = function (val, index) {
-      var value = _this.props.value;
-      value[index] = _extends({}, value[index], {
+    this.handleTypeChange = (val, index) => {
+      const {
+        value
+      } = this.props;
+      value[index] = {
+        ...value[index],
         period: val,
         definition: {}
-      });
-      _this.setData(value);
+      };
+      this.setData(value);
     };
-    _this.handlePeriodTypeChange = function (val, index) {
-      var value = _this.props.value;
-      var data = [].concat(value);
-      data[index] = _extends({}, data[index], {
+    this.handlePeriodTypeChange = (val, index) => {
+      const {
+        value
+      } = this.props;
+      const data = [...value];
+      data[index] = {
+        ...data[index],
         periodType: val
-      });
-      _this.setData(data);
+      };
+      this.setData(data);
     };
-    _this.handleDefinitionChange = function (definition, index) {
-      var value = _this.props.value;
-      var data = [].concat(value);
-      var currentDefinition = data[index];
-      data[index] = _extends({}, currentDefinition, {
-        definition: definition
-      });
-      _this.setData(data);
+    this.handleDefinitionChange = (definition, index) => {
+      const {
+        value
+      } = this.props;
+      const data = [...value];
+      const currentDefinition = data[index];
+      data[index] = {
+        ...currentDefinition,
+        definition
+      };
+      this.setData(data);
     };
-    _this.dayWeekFormatter = function (index, _long) {
-      var intl = _this.props.intl;
-      var weekStartIndex = Math.floor(index / 7);
-      var dayOfWeek = index - weekStartIndex * 7;
-      var weekday = intl.formatMessage({
-        id: "DS.DATE-RANGE-PICKER.WEEKDAYS_LONG." + (dayOfWeek + 1)
+    this.dayWeekFormatter = (index, long) => {
+      const {
+        intl
+      } = this.props;
+      const weekStartIndex = Math.floor(index / 7);
+      const dayOfWeek = index - weekStartIndex * 7;
+      const weekday = intl.formatMessage({
+        id: `DS.DATE-RANGE-PICKER.WEEKDAYS_LONG.${dayOfWeek + 1}`
       });
-      var nthWeek = intl.formatMessage({
-        id: "DS.DATE-RANGE-PICKER.NTH." + (weekStartIndex === 5 ? 'LAST' : weekStartIndex + 1)
+      const nthWeek = intl.formatMessage({
+        id: `DS.DATE-RANGE-PICKER.NTH.${weekStartIndex === 5 ? "LAST" : weekStartIndex + 1}`
       });
-      return _long ? nthWeek + " " + weekday : intl.formatMessage({
-        id: "DS.DATE-RANGE-PICKER.WEEKDAYS-SHORT-" + dayOfWeek
+      return long ? `${nthWeek} ${weekday}` : intl.formatMessage({
+        id: `DS.DATE-RANGE-PICKER.WEEKDAYS-SHORT-${dayOfWeek}`
       });
     };
-    _this.dayMonthFormatter = function (i, _long2) {
-      var intl = _this.props.intl;
-      var locale = intl.locale.substring(0, 2);
-      return _long2 ? intl.formatMessage({
-        id: 'DS.DATE-RANGE-PICKER.NTH-DAY-OF-MONTH'
+    this.dayMonthFormatter = (i, long) => {
+      const {
+        intl
+      } = this.props;
+      const locale = intl.locale.substring(0, 2);
+      return long ? intl.formatMessage({
+        id: "DS.DATE-RANGE-PICKER.NTH-DAY-OF-MONTH"
       }, {
         nth: MONTH_DAYS(locale)[i]
       }) : MONTH_DAYS(locale)[i];
     };
-    _this.dayTemplate = function (index) {
-      var weekStartIndex = Math.floor(index / 7);
+    this.dayTemplate = (index) => {
+      const weekStartIndex = Math.floor(index / 7);
       return {
         week: weekStartIndex,
         day: index - weekStartIndex * 7
       };
     };
-    _this.getTimeWindowSettings = function (item) {
-      var _settings;
-      var intl = _this.props.intl;
-      var settings = (_settings = {}, _settings[DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH] = {
-        numberOfDays: 31,
-        reverseGroup: 1,
-        inverted: item.periodType === COUNTED_FROM_ENUM.ENDING,
-        dayTemplate: function dayTemplate(dayOfMonth) {
-          return {
+    this.getTimeWindowSettings = (item) => {
+      const {
+        intl
+      } = this.props;
+      const settings = {
+        [DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH]: {
+          numberOfDays: 31,
+          reverseGroup: 1,
+          inverted: item.periodType === COUNTED_FROM_ENUM.ENDING,
+          dayTemplate: (dayOfMonth) => ({
             day: dayOfMonth
-          };
+          }),
+          dayFormatter: this.dayMonthFormatter
         },
-        dayFormatter: _this.dayMonthFormatter
-      }, _settings[DAYS_OF_PERIOD_ENUM.DAY_OF_WEEK] = {
-        numberOfDays: 7 * 5,
-        reverseGroup: 7,
-        dayTemplate: _this.dayTemplate,
-        dayFormatter: _this.dayWeekFormatter,
-        labelInverted: item.periodType === COUNTED_FROM_ENUM.ENDING,
-        inverted: item.periodType === COUNTED_FROM_ENUM.ENDING,
-        rowLabelFormatter: function rowLabelFormatter(rowIndex) {
-          return intl.formatMessage({
-            id: "DS.DATE-RANGE-PICKER.NTH." + (rowIndex + 1)
-          });
+        [DAYS_OF_PERIOD_ENUM.DAY_OF_WEEK]: {
+          numberOfDays: 7 * 5,
+          reverseGroup: 7,
+          dayTemplate: this.dayTemplate,
+          dayFormatter: this.dayWeekFormatter,
+          labelInverted: item.periodType === COUNTED_FROM_ENUM.ENDING,
+          inverted: item.periodType === COUNTED_FROM_ENUM.ENDING,
+          rowLabelFormatter: (rowIndex) => intl.formatMessage({
+            id: `DS.DATE-RANGE-PICKER.NTH.${rowIndex + 1}`
+          })
         }
-      }, _settings);
+      };
       return settings[item.period];
     };
-    _this.handleCollapse = function (id) {
-      var visible = _this.state.visible;
-      var updatedVisible = {};
-      var visibleKeys = visible ? Object.keys(visible) : [];
-      for (var i = 0; i < visibleKeys.length; i += 1) {
-        var currentIndex = visibleKeys[i];
+    this.handleCollapse = (id) => {
+      const {
+        visible
+      } = this.state;
+      const updatedVisible = {};
+      const visibleKeys = visible ? Object.keys(visible) : [];
+      for (let i = 0; i < visibleKeys.length; i += 1) {
+        const currentIndex = visibleKeys[i];
         updatedVisible[currentIndex] = false;
       }
       updatedVisible[id] = true;
-      _this.setState({
+      this.setState({
         visible: updatedVisible
       });
     };
-    _this.renderDaysOfField = function (item, key) {
-      var _this$props2 = _this.props,
-        intl = _this$props2.intl,
-        daysOfPeriods = _this$props2.daysOfPeriods,
-        disabled = _this$props2.disabled;
-      if ((daysOfPeriods == null ? void 0 : daysOfPeriods.length) === 1) {
-        return /*#__PURE__*/React.createElement(S.PeriodMode, null, /*#__PURE__*/React.createElement(FormattedMessage, {
-          id: daysOfPeriods[0].translationKey
-        }));
+    this.renderDaysOfField = (item, key) => {
+      const {
+        intl,
+        daysOfPeriods,
+        disabled
+      } = this.props;
+      if (daysOfPeriods?.length === 1) {
+        return /* @__PURE__ */ jsx(PeriodMode, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: daysOfPeriods[0].translationKey }) });
       }
-      var dataSource = (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS).map(function (period) {
-        return {
-          checked: (item == null ? void 0 : item.period) === period.value,
-          text: intl.formatMessage({
-            id: period.translationKey
-          }),
-          onClick: function onClick() {
-            _this.handleTypeChange(period.value, key);
-          }
-        };
-      });
-      var daysOfPeriodValue = (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS).find(function (period) {
-        return (item == null ? void 0 : item.period) === period.value;
-      });
-      return /*#__PURE__*/React.createElement(S.Select, {
-        disabled: disabled,
-        expanded: false,
-        dropdownOverlayStyle: {
-          minWidth: '150px'
-        },
-        dropdownProps: {
-          getPopupContainer: function getPopupContainer(triggerNode) {
-            return triggerNode.closest('.monthly-wrapper') || document.body;
-          }
-        },
-        placeholder: intl.formatMessage({
-          id: (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS)[0].translationKey
+      const dataSource = (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS).map((period) => ({
+        checked: item?.period === period.value,
+        text: intl.formatMessage({
+          id: period.translationKey
         }),
-        input: {
-          value: daysOfPeriodValue ? intl.formatMessage({
-            id: daysOfPeriodValue == null ? void 0 : daysOfPeriodValue.translationKey
-          }) : undefined,
-          name: 'days-of-period',
-          maxLength: 120
-        },
-        inputStyle: {
-          display: 'flex'
-        },
-        dataSource: dataSource,
-        size: "small"
-      });
+        onClick: () => {
+          this.handleTypeChange(period.value, key);
+        }
+      }));
+      const daysOfPeriodValue = (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS).find((period) => item?.period === period.value);
+      return /* @__PURE__ */ jsx(Select, { disabled, expanded: false, dropdownOverlayStyle: {
+        minWidth: "150px"
+      }, dropdownProps: {
+        getPopupContainer: (triggerNode) => triggerNode.closest(".monthly-wrapper") || document.body
+      }, placeholder: intl.formatMessage({
+        id: (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS)[0].translationKey
+      }), input: {
+        value: daysOfPeriodValue ? intl.formatMessage({
+          id: daysOfPeriodValue?.translationKey
+        }) : void 0,
+        name: "days-of-period",
+        maxLength: 120
+      }, inputStyle: {
+        display: "flex"
+      }, dataSource, size: "small" });
     };
-    _this.renderCountedFromField = function (item, key) {
-      var _this$props3 = _this.props,
-        intl = _this$props3.intl,
-        countedFromPeriods = _this$props3.countedFromPeriods,
-        disabled = _this$props3.disabled;
-      if ((countedFromPeriods == null ? void 0 : countedFromPeriods.length) === 1) {
-        return /*#__PURE__*/React.createElement(S.PeriodMode, null, /*#__PURE__*/React.createElement(FormattedMessage, {
-          id: countedFromPeriods[0].translationKey
-        }));
+    this.renderCountedFromField = (item, key) => {
+      const {
+        intl,
+        countedFromPeriods,
+        disabled
+      } = this.props;
+      if (countedFromPeriods?.length === 1) {
+        return /* @__PURE__ */ jsx(PeriodMode, { children: /* @__PURE__ */ jsx(FormattedMessage, { id: countedFromPeriods[0].translationKey }) });
       }
-      var dataSource = (countedFromPeriods || DEFAULT_COUNTED_FROM).map(function (i) {
-        return {
-          checked: (item == null ? void 0 : item.periodType) === i.value,
-          text: intl.formatMessage({
-            id: i.translationKey
-          }),
-          onClick: function onClick() {
-            _this.handlePeriodTypeChange(i.value, key);
-          }
-        };
-      });
-      var countedFromValue = (countedFromPeriods || DEFAULT_COUNTED_FROM).find(function (i) {
-        return (item == null ? void 0 : item.periodType) === i.value;
-      });
-      return /*#__PURE__*/React.createElement(S.Select, {
-        disabled: disabled,
-        expanded: false,
-        dropdownProps: {
-          getPopupContainer: function getPopupContainer(triggerNode) {
-            return triggerNode.closest('.monthly-wrapper') || document.body;
-          }
-        },
-        dropdownOverlayStyle: {
-          minWidth: '150px'
-        },
-        placeholder: intl.formatMessage({
-          id: (countedFromPeriods || DEFAULT_COUNTED_FROM)[0].translationKey
+      const dataSource = (countedFromPeriods || DEFAULT_COUNTED_FROM).map((i) => ({
+        checked: item?.periodType === i.value,
+        text: intl.formatMessage({
+          id: i.translationKey
         }),
-        input: {
-          value: countedFromValue ? intl.formatMessage({
-            id: countedFromValue == null ? void 0 : countedFromValue.translationKey,
-            defaultMessage: item == null ? void 0 : item.periodType
-          }) : undefined,
-          name: 'counted-from-select',
-          maxLength: 120
-        },
-        inputStyle: {
-          display: 'flex'
-        },
-        dataSource: dataSource,
-        size: "small"
-      });
+        onClick: () => {
+          this.handlePeriodTypeChange(i.value, key);
+        }
+      }));
+      const countedFromValue = (countedFromPeriods || DEFAULT_COUNTED_FROM).find((i) => item?.periodType === i.value);
+      return /* @__PURE__ */ jsx(Select, { disabled, expanded: false, dropdownProps: {
+        getPopupContainer: (triggerNode) => triggerNode.closest(".monthly-wrapper") || document.body
+      }, dropdownOverlayStyle: {
+        minWidth: "150px"
+      }, placeholder: intl.formatMessage({
+        id: (countedFromPeriods || DEFAULT_COUNTED_FROM)[0].translationKey
+      }), input: {
+        value: countedFromValue ? intl.formatMessage({
+          id: countedFromValue?.translationKey,
+          defaultMessage: item?.periodType
+        }) : void 0,
+        name: "counted-from-select",
+        maxLength: 120
+      }, inputStyle: {
+        display: "flex"
+      }, dataSource, size: "small" });
     };
-    return _this;
   }
-  _inheritsLoose(MonthlyFilter, _PureComponent);
-  var _proto = MonthlyFilter.prototype;
-  _proto.componentDidMount = function componentDidMount() {
-    var value = this.props.value;
+  componentDidMount() {
+    const {
+      value
+    } = this.props;
     value.length && this.handleCollapse(value[0].id);
-  };
-  _proto.render = function render() {
-    var _this2 = this;
-    var _this$props4 = this.props,
-      value = _this$props4.value,
-      onRangeCopy = _this$props4.onRangeCopy,
-      onRangePaste = _this$props4.onRangePaste,
-      onRangeClear = _this$props4.onRangeClear,
-      rangeClipboard = _this$props4.rangeClipboard,
-      texts = _this$props4.texts,
-      valueSelectionModes = _this$props4.valueSelectionModes,
-      timePickerProps = _this$props4.timePickerProps,
-      disabled = _this$props4.disabled,
-      renderRangeFormSuffix = _this$props4.renderRangeFormSuffix,
-      maxEntries = _this$props4.maxEntries,
-      rangeDisplayMode = _this$props4.rangeDisplayMode,
-      intl = _this$props4.intl;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var _ref = this.props,
-      _ref$min = _ref.min,
-      min = _ref$min === void 0 ? 1 : _ref$min;
-    var visible = this.state.visible;
-    var data = [].concat(value);
-    var allTexts = getDefaultTexts(intl, false, texts);
-
-    /** if `min` is undefined, then entry can be always deleted, otherwise it's key has to be greated or equal than N */
-    var deletableDueToEntriesLimit = function deletableDueToEntriesLimit(key) {
-      return min === undefined || min !== undefined && key >= min;
-    };
-    return /*#__PURE__*/React.createElement(S.MonthlyFilterWrapper, {
-      className: "monthly-wrapper"
-    }, data.map(function (item, key) {
-      return /*#__PURE__*/React.createElement(ContentItem, {
-        key: item.id,
-        hideExpander: false,
-        onExpand: _this2.handleCollapse,
-        expanded: visible[item.id],
-        onRemove: function onRemove() {
-          return _this2.handleRemoveRow(key);
-        },
-        item: {
-          tag: /*#__PURE__*/React.createElement(Tag, {
-            name: String(key + 1),
-            shape: TagShape.SINGLE_CHARACTER_ROUND,
-            color: theme.palette['grey-100'],
-            textColor: theme.palette['grey-500']
-          }),
-          canDelete: !disabled && deletableDueToEntriesLimit(key),
-          id: item.id,
-          // @ts-ignore
-          name: /*#__PURE__*/React.createElement(S.DropdownHeader, {
-            onClick: function onClick(event) {
-              return event.stopPropagation();
-            },
-            className: visible[item.id] ? 'dropdown-header-visible' : 'dropdown-header'
-          }, /*#__PURE__*/React.createElement(S.DropdownLabel, null, allTexts.daysOf, SPACE_UNICODE), _this2.renderDaysOfField(item, key), /*#__PURE__*/React.createElement(S.DropdownLabel, null, SPACE_UNICODE, allTexts.countedFrom, SPACE_UNICODE), _this2.renderCountedFromField(item, key)),
-          nameWrapperClassNames: ['full-width'],
-          content: visible[item.id] ? /*#__PURE__*/React.createElement(S.ContentWrapper, null, /*#__PURE__*/React.createElement(TimeWindow, _extends({
-            disabled: disabled,
+  }
+  render() {
+    const {
+      value,
+      onRangeCopy,
+      onRangePaste,
+      onRangeClear,
+      rangeClipboard,
+      texts,
+      valueSelectionModes,
+      timePickerProps,
+      disabled,
+      renderRangeFormSuffix,
+      maxEntries,
+      rangeDisplayMode,
+      intl
+    } = this.props;
+    const {
+      min = 1
+    } = this.props;
+    const {
+      visible
+    } = this.state;
+    const data = [...value];
+    const allTexts = getDefaultTexts(intl, false, texts);
+    const deletableDueToEntriesLimit = (key) => min === void 0 || min !== void 0 && key >= min;
+    return /* @__PURE__ */ jsxs(MonthlyFilterWrapper, { className: "monthly-wrapper", children: [
+      data.map((item, key) => /* @__PURE__ */ jsx(DSContentItem, { hideExpander: false, onExpand: this.handleCollapse, expanded: visible[item.id], onRemove: () => this.handleRemoveRow(key), item: {
+        tag: /* @__PURE__ */ jsx(Tag, { name: String(key + 1), shape: TagShape.SINGLE_CHARACTER_ROUND, color: theme.palette["grey-100"], textColor: theme.palette["grey-500"] }),
+        canDelete: !disabled && deletableDueToEntriesLimit(key),
+        id: item.id,
+        // @ts-ignore
+        name: /* @__PURE__ */ jsxs(DropdownHeader, { onClick: (event) => event.stopPropagation(), className: visible[item.id] ? "dropdown-header-visible" : "dropdown-header", children: [
+          /* @__PURE__ */ jsxs(DropdownLabel, { children: [
+            allTexts.daysOf,
+            SPACE_UNICODE
+          ] }),
+          this.renderDaysOfField(item, key),
+          /* @__PURE__ */ jsxs(DropdownLabel, { children: [
+            SPACE_UNICODE,
+            allTexts.countedFrom,
+            SPACE_UNICODE
+          ] }),
+          this.renderCountedFromField(item, key)
+        ] }),
+        nameWrapperClassNames: ["full-width"],
+        content: visible[item.id] ? /* @__PURE__ */ jsx(ContentWrapper, { children: /* @__PURE__ */ jsx(
+          TimeWindow,
+          {
+            disabled,
             readOnly: !!disabled,
             texts: allTexts,
-            key: item.period + "_" + key,
             showSelectAll: true,
             invertibleTime: true,
-            numberOfDaysPerRow: 7
-            // @ts-expect-error: FIXME: Type '{ [day: number]: DenormalizedFilter; }' is not assignable to type 'Days'.
-            ,
-            days: item.definition
-            // @ts-expect-error: FIXME: Type '(definition: Month) => void' is not assignable to type '(days: Days) => void'.
-            ,
-            onChange: function onChange(definition) {
-              return _this2.handleDefinitionChange(definition, key);
-            },
-            onRangeClear: onRangeClear,
-            onRangeCopy: onRangeCopy,
-            onRangePaste: onRangePaste
-            // @ts-expect-error: FIXME: Type 'Partial<FilterDefinition> | undefined' is not assignable to type 'Partial<FilterDefinition>'.
-            ,
-            rangeClipboard: rangeClipboard,
-            monthlyFilterPeriod: data[key].period
-            // @ts-expect-error: FIXME: Type 'Partial<FilterDefinition> | undefined' is not assignable to type 'Partial<FilterDefinition>'.
-            ,
-            valueSelectionModes: valueSelectionModes,
-            renderRangeFormSuffix: renderRangeFormSuffix,
-            timePickerProps: timePickerProps
-          }, _this2.getTimeWindowSettings(item), {
+            numberOfDaysPerRow: 7,
+            days: item.definition,
+            onChange: (definition) => this.handleDefinitionChange(definition, key),
+            onRangeClear,
+            onRangeCopy,
+            onRangePaste,
+            rangeClipboard,
+            monthlyFilterPeriod: data[key].period,
+            valueSelectionModes,
+            renderRangeFormSuffix,
+            timePickerProps,
+            ...this.getTimeWindowSettings(item),
             monthlyFilter: true,
-            rangeDisplayMode: rangeDisplayMode
-          }))) : /*#__PURE__*/React.createElement("div", null)
-        },
-        texts: {
-          itemActionDeleteTooltip: allTexts.remove
-        }
-      });
-    }), /*#__PURE__*/React.createElement(S.AddContainer, null, !disabled && value.length < Number(maxEntries) && /*#__PURE__*/React.createElement(Button.Creator, {
-      label: allTexts.addRule,
-      onClick: this.handleAddRow,
-      block: true
-    })));
-  };
-  return MonthlyFilter;
-}(PureComponent);
-MonthlyFilter.defaultProps = {
+            rangeDisplayMode
+          },
+          `${item.period}_${key}`
+        ) }) : /* @__PURE__ */ jsx("div", {})
+      }, texts: {
+        itemActionDeleteTooltip: allTexts.remove
+      } }, item.id)),
+      /* @__PURE__ */ jsx(AddContainer, { children: !disabled && value.length < Number(maxEntries) && /* @__PURE__ */ jsx(Button.Creator, { label: allTexts.addRule, onClick: this.handleAddRow, block: true }) })
+    ] });
+  }
+};
+_MonthlyFilter.defaultProps = {
   maxEntries: 4
 };
-export default injectIntl(MonthlyFilter);
+let MonthlyFilter = _MonthlyFilter;
+const MonthlyFilter$1 = injectIntl(MonthlyFilter);
+export {
+  MonthlyFilter$1 as default
+};