@synerise/ds-date-range-picker 1.6.11 → 1.6.13

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

@@ -1,72 +1,70 @@
-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); }
-import dayjs from 'dayjs';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useIntl } from 'react-intl';
-import { v4 as uuid } from 'uuid';
-import { useDataFormat } from '@synerise/ds-core';
-import { getDefaultTexts } from '../../../../utils';
-import * as S from '../../../RangeFilter.styles';
-import { AddButton, SelectionCount, SelectionHint } from '../../../Shared';
-import Day from '../../../Shared/TimeWindow/Day/Day';
-import Grid from '../../../Shared/TimeWindow/Grid/Grid';
-import RangeFormContainer from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer';
-import { US_NOTATION_WEEK_DAYS_INDEXES } from '../../../Shared/TimeWindow/constants/timeWindow.constants';
-import { COUNTED_FROM_ENUM, DAYS_OF_PERIOD_ENUM, MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_SHORT, MONTH_DAYS } from '../../../constants';
-import { DEFAULT_MAX_ENTRIES, DEFAULT_RANGE_END, DEFAULT_RANGE_START, DEFAULT_TIME_FORMAT, EMPTY_OBJECT, NOOP, RENDER_EMPTY_NODE_FN } from '../constants';
-import { useShiftAndControlKeys } from '../hooks/useShiftAndControlKeys';
-import { canAddAnotherRange, haveActiveDaysCommonRange, range } from './utils';
-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,
-    texts = _ref.texts,
-    _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,
-    errorTexts = _ref.errorTexts;
-  var intl = useIntl();
-  var allTexts = useMemo(function () {
-    return getDefaultTexts(intl, false, texts);
-  }, [texts, intl]);
-  var defaultDayValue = useMemo(function () {
-    return {
-      start: DEFAULT_RANGE_START,
-      stop: DEFAULT_RANGE_END,
-      restricted: false,
-      display: false,
-      inverted: false,
-      mode: valueSelectionMode[0]
-    };
-  }, [valueSelectionMode]);
-  var _useState = useState(Object.keys(value)),
-    filteredSchedule = _useState[0],
-    setFilteredSchedule = _useState[1];
-  var _useState2 = useState([]),
-    activeDays = _useState2[0],
-    setActiveDays = _useState2[1];
-  var ref = useRef();
-  var _useShiftAndControlKe = useShiftAndControlKeys(ref),
-    controlKeyPressed = _useShiftAndControlKe[0],
-    shiftKeyPressed = _useShiftAndControlKe[1];
-  var _useDataFormat = useDataFormat(),
-    isSundayFirstWeekDay = _useDataFormat.isSundayFirstWeekDay;
-  var allKeys = useMemo(function () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { useMemo, useState, useRef, useEffect, useCallback } from "react";
+import { useIntl } from "react-intl";
+import { v4 } from "uuid";
+import { useDataFormat } from "@synerise/ds-core";
+import { getDefaultTexts } from "../../../../utils.js";
+import { NewFilterContainer } from "../../../RangeFilter.styles.js";
+import AddButton from "../../../Shared/AddButton/AddButton.js";
+import "@synerise/ds-button";
+import "@synerise/ds-dropdown";
+import "@synerise/ds-icon";
+import "@synerise/ds-tooltip";
+import "styled-components";
+import "@synerise/ds-list-item";
+import "@synerise/ds-badge";
+import "@synerise/ds-button/dist/Button.styles";
+import "@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem";
+import "@synerise/ds-input";
+import SelectionCount from "../../../Shared/SelectionCount/SelectionCount.js";
+import SelectionHint from "../../../Shared/SelectionHint/SelectionHint.js";
+import "../../../Shared/TimeWindow/TimeWindow.js";
+import Day from "../../../Shared/TimeWindow/Day/Day.js";
+import Grid from "../../../Shared/TimeWindow/Grid/Grid.js";
+import RangeFormContainer from "../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.js";
+import { US_NOTATION_WEEK_DAYS_INDEXES } from "../../../Shared/TimeWindow/constants/timeWindow.constants.js";
+import { DAYS_OF_PERIOD_ENUM, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG, MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK, MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_SHORT, MONTH_DAYS, COUNTED_FROM_ENUM } from "../../../constants.js";
+import { DEFAULT_RANGE_END, DEFAULT_RANGE_START, NOOP, DEFAULT_TIME_FORMAT, EMPTY_OBJECT, DEFAULT_MAX_ENTRIES, RENDER_EMPTY_NODE_FN } from "../constants.js";
+import { useShiftAndControlKeys } from "../hooks/useShiftAndControlKeys.js";
+import { range, haveActiveDaysCommonRange, canAddAnotherRange } from "./utils.js";
+const Monthly = ({
+  maxEntries = DEFAULT_MAX_ENTRIES,
+  valueSelectionMode = ["Hour", "Range"],
+  onChange = NOOP,
+  timeFormat,
+  valueFormatOptions,
+  value,
+  timePickerProps,
+  disabled,
+  texts,
+  periodType = DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH,
+  countedFrom = COUNTED_FROM_ENUM.BEGINNING,
+  errorTexts
+}) => {
+  const intl = useIntl();
+  const allTexts = useMemo(() => getDefaultTexts(intl, false, texts), [texts, intl]);
+  const defaultDayValue = useMemo(() => ({
+    start: DEFAULT_RANGE_START,
+    stop: DEFAULT_RANGE_END,
+    restricted: false,
+    display: false,
+    inverted: false,
+    mode: valueSelectionMode[0]
+  }), [valueSelectionMode]);
+  const [filteredSchedule, setFilteredSchedule] = useState(Object.keys(value));
+  const [activeDays, setActiveDays] = useState([]);
+  const ref = useRef();
+  const [controlKeyPressed, shiftKeyPressed] = useShiftAndControlKeys(ref);
+  const {
+    isSundayFirstWeekDay
+  } = useDataFormat();
+  const allKeys = useMemo(() => {
     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;
-          }));
+        let keys = [];
+        range(0, 5).forEach((i) => {
+          keys = [...keys, ...US_NOTATION_WEEK_DAYS_INDEXES.map((index) => index + 7 * i)];
         });
         return keys;
       }
@@ -74,160 +72,147 @@ var Monthly = function Monthly(_ref) {
     }
     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]);
+  const getGridSettings = () => {
+    const settings = {
+      [DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH]: {
+        numberOfDays: 31,
+        reverseGroup: 1,
+        inverted: countedFrom === COUNTED_FROM_ENUM.ENDING
+      },
+      [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: (rowIndex) => intl.formatMessage(MONTHLY_SCHEDULER_INTL_KEYS_NTH_WEEK[rowIndex])
       }
-    }, _settings);
+    };
     return settings[periodType];
   };
-  useEffect(function () {
+  useEffect(() => {
     setFilteredSchedule(Object.keys(value));
   }, [value]);
-  var removeEmptyEntries = 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) {
+  const removeEmptyEntries = useCallback((monthlySchedule) => {
+    const emptyEntries = Object.keys(monthlySchedule).filter((key) => Object.keys(monthlySchedule[key]).length === 0);
+    const scheduleToUpdate = monthlySchedule;
+    emptyEntries.forEach((emptyEntry) => {
       delete scheduleToUpdate[emptyEntry];
     });
     onChange(scheduleToUpdate);
   }, [onChange]);
-  useEffect(function () {
-    var entriesWithActiveDaysValue = activeDays.length ? Object.keys(value).filter(function (id) {
-      return activeDays.every(function (day) {
-        return (
-          // @ts-expect-error - requires type refactor
-          !!value[id][day] && haveActiveDaysCommonRange(value[id], activeDays)
-        );
-      });
-    }) : [];
+  useEffect(() => {
+    const entriesWithActiveDaysValue = activeDays.length ? Object.keys(value).filter((id) => activeDays.every((day) => (
+      // @ts-expect-error - requires type refactor
+      !!value[id][day] && haveActiveDaysCommonRange(value[id], activeDays)
+    ))) : [];
     removeEmptyEntries(value);
     setFilteredSchedule(entriesWithActiveDaysValue);
   }, [value, activeDays, removeEmptyEntries]);
-  var handleDayTimeChange = useCallback(function (dayValue, dayKey, guid) {
-    var updatedSchedule = value;
-    var start = dayValue[0],
-      end = dayValue[1],
-      inverted = dayValue[2];
+  const handleDayTimeChange = useCallback((dayValue, dayKey, guid) => {
+    const updatedSchedule = value;
+    const [start, end, inverted] = dayValue;
     if (dayKey instanceof Array) {
-      dayKey.forEach(function (day) {
-        // @ts-expect-error - requires type refactor
-        updatedSchedule[guid][day] = _extends({}, value[guid][day], {
+      dayKey.forEach((day) => {
+        updatedSchedule[guid][day] = {
+          // @ts-expect-error - requires type refactor
+          ...value[guid][day],
           restricted: true,
-          start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
-          stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined,
+          start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : void 0,
+          stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : void 0,
           inverted: Boolean(inverted)
-        });
+        };
       });
     } else {
-      // @ts-expect-error - requires type refactor
-      updatedSchedule[guid][dayKey] = _extends({}, value[guid][dayKey], {
+      updatedSchedule[guid][dayKey] = {
+        // @ts-expect-error - requires type refactor
+        ...value[guid][dayKey],
         restricted: true,
-        start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : undefined,
-        stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : undefined,
+        start: start ? dayjs(start).format(DEFAULT_TIME_FORMAT) : void 0,
+        stop: end ? dayjs(end).format(DEFAULT_TIME_FORMAT) : void 0,
         inverted: Boolean(inverted)
-      });
+      };
     }
     onChange(updatedSchedule);
   }, [value, onChange]);
-  var _getDayValue = useCallback(function (dayKey, guid) {
-    // @ts-expect-error - requires type refactor
-    if (typeof dayKey === 'number' && value[guid] && !!value[guid][dayKey]) {
-      // @ts-expect-error - requires type refactor
+  const getDayValue = useCallback((dayKey, guid) => {
+    if (typeof dayKey === "number" && value[guid] && !!value[guid][dayKey]) {
       return value[guid][dayKey];
     }
     return defaultDayValue;
   }, [value, defaultDayValue]);
-  var handleModeChange = useCallback(function (selectedMode, dayKeys, guid) {
-    var updatedSchedule = value;
-    dayKeys.forEach(function (day) {
-      // @ts-expect-error - requires type refactor
-      updatedSchedule[guid][day] = _extends({}, value[guid][day], {
+  const handleModeChange = useCallback((selectedMode, dayKeys, guid) => {
+    const updatedSchedule = value;
+    dayKeys.forEach((day) => {
+      updatedSchedule[guid][day] = {
+        // @ts-expect-error - requires type refactor
+        ...value[guid][day],
         mode: selectedMode
-      });
+      };
     });
     onChange(updatedSchedule);
   }, [value, onChange]);
-  var handleRangeDelete = useCallback(function (guid, activeDaysArray) {
-    var updatedSchedule = value;
-    activeDaysArray.forEach(function (activeDay) {
-      // @ts-expect-error - requires type refactor
+  const handleRangeDelete = useCallback((guid, activeDaysArray) => {
+    const updatedSchedule = value;
+    activeDaysArray.forEach((activeDay) => {
       delete updatedSchedule[guid][activeDay];
     });
-    onChange(_extends({}, updatedSchedule));
+    onChange({
+      ...updatedSchedule
+    });
   }, [value, onChange]);
-  var dayWeekFormatter = 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]);
+  const dayWeekFormatter = useCallback((dayKey, long) => {
+    const weekStartIndex = Math.floor(dayKey / 7);
+    const dayOfWeek = dayKey - weekStartIndex * 7;
+    const weekday = intl.formatMessage(MONTHLY_SCHEDULER_INTL_KEYS_WEEKDAYS_LONG[dayOfWeek]);
+    const 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 = useCallback(function (dayKey) {
-    var locale = intl.locale.substring(0, 2);
-    // @ts-expect-error - requires type refactor
+  const dayMonthFormatter = useCallback((dayKey) => {
+    const locale = intl.locale.substring(0, 2);
     return MONTH_DAYS(locale)[dayKey];
   }, [intl]);
-  var dayFormatter = useCallback(function (dayKey, _long2) {
+  const dayFormatter = useCallback((dayKey, long) => {
     if (periodType === DAYS_OF_PERIOD_ENUM.DAY_OF_WEEK) {
-      return dayWeekFormatter(dayKey, _long2);
+      return dayWeekFormatter(dayKey, long);
     }
     return dayMonthFormatter(dayKey);
   }, [periodType, dayWeekFormatter, dayMonthFormatter]);
-  var checkDay = useCallback(function (dayKey) {
+  const checkDay = useCallback((dayKey) => {
     setActiveDays([dayKey]);
   }, []);
-  var getDayLabel = useCallback(function (dayKey, _long3) {
-    return dayFormatter(dayKey, _long3 || false);
+  const getDayLabel = useCallback((dayKey, long) => {
+    return dayFormatter(dayKey, long || false);
   }, [dayFormatter]);
-  var excludeDayFromActive = useCallback(function (dayKey) {
-    setActiveDays(activeDays.filter(function (day) {
-      return day !== dayKey;
-    }));
+  const excludeDayFromActive = useCallback((dayKey) => {
+    setActiveDays(activeDays.filter((day) => day !== dayKey));
   }, [activeDays]);
-  var isDayRestricted = useCallback(function (dayKey) {
-    // @ts-expect-error - requires type refactor
-    return Object.keys(value).some(function (key) {
-      return !!value[key][dayKey];
-    });
+  const isDayRestricted = useCallback((dayKey) => {
+    return Object.keys(value).some((key) => !!value[key][dayKey]);
   }, [value]);
-  var removeDaySelection = useCallback(function (dayKey) {
-    var updatedSchedule = value;
-    Object.keys(value).forEach(function (key) {
-      // @ts-expect-error - requires type refactor
+  const removeDaySelection = useCallback((dayKey) => {
+    const updatedSchedule = value;
+    Object.keys(value).forEach((key) => {
       delete updatedSchedule[key][dayKey];
     });
     excludeDayFromActive(dayKey);
     onChange(updatedSchedule);
   }, [value, onChange, excludeDayFromActive]);
-  var uncheckActiveDay = useCallback(function (dayKey) {
+  const uncheckActiveDay = useCallback((dayKey) => {
     removeDaySelection(dayKey);
   }, [removeDaySelection]);
-  var handleSelectAll = useCallback(function () {
+  const handleSelectAll = useCallback(() => {
     setActiveDays(allKeys);
   }, [allKeys]);
-  var handleUnselectAll = useCallback(function () {
+  const handleUnselectAll = useCallback(() => {
     setActiveDays([]);
   }, []);
-  var checkActiveDay = useCallback(function (dayKey) {
+  const checkActiveDay = useCallback((dayKey) => {
     if (!isDayRestricted(dayKey)) {
       checkDay(dayKey);
     }
-    var updatedActiveDay = [];
+    let updatedActiveDay = [];
     if (controlKeyPressed) {
-      updatedActiveDay = activeDays.includes(dayKey) ? activeDays : [].concat(activeDays, [dayKey]);
+      updatedActiveDay = activeDays.includes(dayKey) ? activeDays : [...activeDays, dayKey];
     } else if (activeDays.length > 0 && shiftKeyPressed) {
       updatedActiveDay = activeDays[0] < dayKey ? range(+activeDays[0], +dayKey + 1) : range(+dayKey, +activeDays[0] + 1);
     } else {
@@ -235,8 +220,8 @@ var Monthly = function Monthly(_ref) {
     }
     setActiveDays(updatedActiveDay);
   }, [checkDay, isDayRestricted, activeDays, controlKeyPressed, shiftKeyPressed]);
-  var handleToggleDay = useCallback(function (dayKey, forcedState) {
-    if (typeof forcedState !== 'undefined') {
+  const handleToggleDay = useCallback((dayKey, forcedState) => {
+    if (typeof forcedState !== "undefined") {
       if (controlKeyPressed && forcedState) {
         activeDays.includes(dayKey) ? excludeDayFromActive(dayKey) : checkActiveDay(dayKey);
         return;
@@ -246,114 +231,72 @@ var Monthly = function Monthly(_ref) {
       activeDays.includes(dayKey) ? uncheckActiveDay(dayKey) : checkActiveDay(dayKey);
     }
   }, [controlKeyPressed, activeDays, uncheckActiveDay, checkActiveDay, excludeDayFromActive]);
-  var renderDay = 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,
-      onClear: removeDaySelection,
-      texts: allTexts
-    });
+  const renderDay = useCallback((dayKey) => {
+    const isActive = activeDays.includes(dayKey);
+    return /* @__PURE__ */ jsx(Day, { dayKey, "data-attr": dayKey, label: getDayLabel(dayKey), restricted: isDayRestricted(dayKey), active: isActive, readOnly: disabled, intl, onToggle: handleToggleDay, onClear: removeDaySelection, texts: allTexts }, dayKey);
   }, [activeDays, getDayLabel, isDayRestricted, disabled, intl, handleToggleDay, removeDaySelection, allTexts]);
-  var handleRangeAdd = useCallback(function () {
-    var _extends2;
-    var updatedDay = {};
-    var guid = Object.keys(value).find(function (key) {
-      return (
-        // @ts-expect-error - requires type refactor
-        activeDays.every(function (day) {
-          return value[key][day] === undefined;
-        })
-      );
-    });
-    activeDays.forEach(function (day) {
+  const handleRangeAdd = useCallback(() => {
+    const updatedDay = {};
+    const guid = Object.keys(value).find((key) => (
       // @ts-expect-error - requires type refactor
+      activeDays.every((day) => value[key][day] === void 0)
+    ));
+    activeDays.forEach((day) => {
       updatedDay[day] = defaultDayValue;
     });
-    var restOfScheduleObject = guid ? value[guid] : EMPTY_OBJECT;
-    var updatedSchedule = _extends({}, value, (_extends2 = {}, _extends2[guid || uuid()] = _extends({}, restOfScheduleObject, updatedDay), _extends2));
+    const restOfScheduleObject = guid ? value[guid] : EMPTY_OBJECT;
+    const updatedSchedule = {
+      ...value,
+      [guid || v4()]: {
+        ...restOfScheduleObject,
+        ...updatedDay
+      }
+    };
     onChange(updatedSchedule);
   }, [value, activeDays, defaultDayValue, onChange]);
-  var renderGridTitle = useCallback(function (count) {
-    return /*#__PURE__*/React.createElement(SelectionCount, {
-      selectedDayCount: count,
-      label: allTexts.selected
-    });
-  }, [allTexts.selected]);
-  var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
-  var isAnyDaySelected = activeDays.length > 0;
-  var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
-  var getErrorTextsForFormRow = function getErrorTextsForFormRow(guid) {
-    return activeDays.length === 1 && errorTexts && errorTexts[guid] &&
-    // @ts-expect-error - requires type refactor
+  const renderGridTitle = useCallback((count) => /* @__PURE__ */ jsx(SelectionCount, { selectedDayCount: count, label: allTexts.selected }), [allTexts.selected]);
+  const canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
+  const isAnyDaySelected = activeDays.length > 0;
+  const shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
+  const getErrorTextsForFormRow = (guid) => {
+    return activeDays.length === 1 && errorTexts && errorTexts[guid] && // @ts-expect-error - requires type refactor
     errorTexts[guid][activeDays[0]];
   };
-  return /*#__PURE__*/React.createElement(S.NewFilterContainer, {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(Grid, _extends({
-    reverseGroup: 0,
-    onUnselectAll: handleUnselectAll,
-    onSelectAll: handleSelectAll,
-    showUnselectAll: Boolean(activeDays.length),
-    showSelectAll: allKeys.length > activeDays.length,
-    renderDay: renderDay,
-    keys: allKeys,
-    days: EMPTY_OBJECT,
-    intl: intl,
-    numberOfDays: 7,
-    numberOfDaysPerRow: 7,
-    texts: allTexts,
-    title: renderGridTitle(activeDays.length)
-  }, getGridSettings())), isAnyDaySelected && filteredSchedule.map(function (guid, index) {
-    return /*#__PURE__*/React.createElement(RangeFormContainer, {
-      days: EMPTY_OBJECT,
-      errorTexts: getErrorTextsForFormRow(guid),
-      onChange: NOOP,
-      key: "value-range-" + guid,
-      onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {
-        handleDayTimeChange(dayValue, dayKey, guid);
-      },
-      texts: allTexts,
-      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);
+  return /* @__PURE__ */ jsxs(NewFilterContainer, { ref, children: [
+    /* @__PURE__ */ jsx(Grid, { reverseGroup: 0, onUnselectAll: handleUnselectAll, onSelectAll: handleSelectAll, showUnselectAll: Boolean(activeDays.length), showSelectAll: allKeys.length > activeDays.length, renderDay, keys: allKeys, days: EMPTY_OBJECT, intl, numberOfDays: 7, numberOfDaysPerRow: 7, texts: allTexts, title: renderGridTitle(activeDays.length), ...getGridSettings() }),
+    isAnyDaySelected && filteredSchedule.map((guid, index) => /* @__PURE__ */ jsx(
+      RangeFormContainer,
+      {
+        days: EMPTY_OBJECT,
+        errorTexts: getErrorTextsForFormRow(guid),
+        onChange: NOOP,
+        onDayTimeChange: (dayValue, dayKey) => {
+          handleDayTimeChange(dayValue, dayKey, guid);
+        },
+        texts: allTexts,
+        onMultipleDayTimeChange: (dates) => handleDayTimeChange(dates, activeDays, guid),
+        dayKeys: activeDays,
+        getDayLabel,
+        activeDays,
+        getDayValue: (dayKey) => getDayValue(dayKey, guid),
+        onRangeDelete: disabled ? void 0 : () => handleRangeDelete(guid, activeDays),
+        onModeChange: (mode) => handleModeChange(mode, activeDays, guid),
+        valueSelectionModes: valueSelectionMode,
+        hideHeader: index !== 0,
+        renderSuffix: RENDER_EMPTY_NODE_FN,
+        timePickerProps,
+        timeFormat,
+        valueFormatOptions,
+        disabled,
+        monthlyFilterPeriod: periodType
       },
-      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: allTexts.maximumRanges
-  }), shouldRenderAddButton && /*#__PURE__*/React.createElement(AddButton, {
-    label: allTexts.addTime,
-    onClick: handleRangeAdd
-  }), !isAnyDaySelected && !disabled && /*#__PURE__*/React.createElement(SelectionHint, {
-    message: allTexts.selectDaysDescription
-  }));
+      `value-range-${guid}`
+    )),
+    isAnyDaySelected && !canAddRange && /* @__PURE__ */ jsx(SelectionHint, { message: allTexts.maximumRanges }),
+    shouldRenderAddButton && /* @__PURE__ */ jsx(AddButton, { label: allTexts.addTime, onClick: handleRangeAdd }),
+    !isAnyDaySelected && !disabled && /* @__PURE__ */ jsx(SelectionHint, { message: allTexts.selectDaysDescription })
+  ] });
+};
+export {
+  Monthly as default
 };
-export default Monthly;

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

@@ -1,10 +1,10 @@
-import { type Texts } from '../../../../DateRangePicker.types';
-import { type WithDisabledProp } from '../../../RangeFilter.types';
-import { type DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
-import { type FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
-import { type DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
-import { type COUNTED_FROM_ENUM, type DAYS_OF_PERIOD_ENUM } from '../../../constants';
-import { type FilterBaseProps } from '../Filters.types';
+import { Texts } from '../../../../DateRangePicker.types';
+import { WithDisabledProp } from '../../../RangeFilter.types';
+import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
+import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
+import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
+import { COUNTED_FROM_ENUM, DAYS_OF_PERIOD_ENUM } from '../../../constants';
+import { FilterBaseProps } from '../Filters.types';
 export type MonthlyScheduleDayValue = DayOptions & {
     mode: DateLimitMode;
 };

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

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

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

@@ -1,5 +1,5 @@
-import { type DayKey } from '../../../Shared/TimeWindow/TimeWindow.types';
-import { type DayOfMonthIndex, type MonthlySchedule, type MonthlyScheduleDayValue } from './Monthly.types';
+import { DayKey } from '../../../Shared/TimeWindow/TimeWindow.types';
+import { DayOfMonthIndex, MonthlySchedule, MonthlyScheduleDayValue } from './Monthly.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;