@synerise/ds-date-range-picker 0.26.5 → 0.26.7

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.26.7](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.26.6...@synerise/ds-date-range-picker@0.26.7) (2024-02-06)
+
+
+### Bug Fixes
+
+* **date-range-picker:** make texts optional ([5d33724](https://github.com/Synerise/synerise-design/commit/5d337248c423ef7b1caf17da6e0f0e56767cccf1))
+
+
+
+
+
+## [0.26.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.26.5...@synerise/ds-date-range-picker@0.26.6) (2024-01-31)
+
+
+### Bug Fixes
+
+* **date-range-picker:** added texts over translations ([7131f8c](https://github.com/Synerise/synerise-design/commit/7131f8c5c923527544fb54b5bb9eb15585bec442))
+
+
+
+
+
 ## [0.26.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.26.4...@synerise/ds-date-range-picker@0.26.5) (2024-01-24)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/README.md

@@ -64,6 +64,8 @@ const value = {
 | onVisibleChange           | Callback executed when popover with dateRangePicker changes its visibility       | (visible: boolean) => void | -                                                             |
 | filterValueSelectionModes | Allowed modes to display in filter                                               | DateLimitMode[]            | ["Range", "Hour"]                                             |
 | getPopupContainer         | Function used to set the container of the date range picker.                     | Function(triggerNode)      | `() => document.body`                                         |
+| texts         | custom translations                     | Texts      | undefined                                         |
+| disableDefaultTexts | disable DS translations fallback      | boolean | false
 
 ### DateRange
 
@@ -77,6 +79,98 @@ const value = {
 
 `RelativeUnit = 'SECONDS' | 'MINUTES' | 'HOURS' | 'DAYS' | 'WEEKS' | 'MONTHS' | 'YEARS'`
 
+### Texts
+
+- `texts` prop is now optional
+- all keys in `texts` is now also optional
+- if `texts` is `undefined` or if a key in `texts` is `undefined` default DS translations will appear in the component
+- `disableDefaultTexts` disables the above fallback, i.e. if any key is missing in `texts` then an empty string is used as a translation (this prop is provided for testing custom translation completeness)
+
+  
+| translation key          | Type              | Default  |
+| ------------------------ | ----------------- | -------- | 
+|  endDatePlaceholder      |        string     | -------- |
+|  startDatePlaceholder    |        string     | -------- |
+|  selectDate              |        string     | -------- |
+|  selectTime              |        string     | -------- |
+|  filterName              |        string     | -------- |
+|  custom                  |        ReactNode  | -------- |
+|  today                   |        ReactNode  | -------- |
+|  yesterday               |        ReactNode  | -------- |
+|  apply                   |        ReactNode  | -------- |
+|  clear                   |        ReactNode  | -------- |
+|  now                     |        ReactNode  | -------- |
+|  emptyDateError          |        ReactNode  | -------- |
+|  last7Days               |        ReactNode  | -------- |
+|  thisWeek                |        ReactNode  | -------- |
+|  lastWeek                |        ReactNode  | -------- |
+|  thisMonth               |        ReactNode  | -------- |
+|  lastMonth               |        ReactNode  | -------- |
+|  last3Months             |        ReactNode  | -------- |
+|  last6Months             |        ReactNode  | -------- |
+|  lastYear                |        ReactNode  | -------- |
+|  allTime                 |        ReactNode  | -------- |
+|  tomorrow                |        ReactNode  | -------- |
+|  next7Days               |        ReactNode  | -------- |
+|  nextWeek                |        ReactNode  | -------- |
+|  nextMonth               |        ReactNode  | -------- |
+|  next3Months             |        ReactNode  | -------- |
+|  next6Months             |        ReactNode  | -------- |
+|  nextYear                |        ReactNode  | -------- |
+|  more                    |        ReactNode  | -------- |
+|  relativeDateRange       |        ReactNode  | -------- |
+|  last                    |        ReactNode  | -------- |
+|  before                  |        ReactNode  | -------- |
+|  after                   |        ReactNode  | -------- |
+|  since                   |        ReactNode  | -------- |
+|  next                    |        ReactNode  | -------- |
+|  seconds                 |        ReactNode  | -------- |
+|  minutes                 |        ReactNode  | -------- |
+|  hours                   |        ReactNode  | -------- |
+|  days                    |        ReactNode  | -------- |
+|  weeks                   |        ReactNode  | -------- |
+|  months                  |        ReactNode  | -------- |
+|  years                   |        ReactNode  | -------- |
+|  timestampLast           |        ReactNode  | -------- |
+|  timestampNext           |        ReactNode  | -------- |
+|  timestampTill           |        ReactNode  | -------- |
+|  filter                  |        ReactNode  | -------- |
+|  startDate               |        ReactNode  | -------- |
+|  endDate                 |        ReactNode  | -------- |
+|  remove                  |        ReactNode  | -------- |
+|  savedFiltersTrigger     |        ReactNode  | -------- |
+|  clearRange              |        ReactNode  | -------- |
+|  copyRange               |        ReactNode  | -------- |
+|  pasteRange              |        ReactNode  | -------- |
+|  range                   |        ReactNode  | -------- |
+|  hour                    |        ReactNode  | -------- |
+|  filterEnabled           |        ReactNode  | -------- |
+|  selectDateFilter        |        ReactNode  | -------- |
+|  datesFilter             |        ReactNode  | -------- |
+|  cancel                  |        ReactNode  | -------- |
+|  everyDay                |        ReactNode  | -------- |
+|  nthDayOfMonth           |        ReactNode  | -------- |
+|  daysOf                  |        ReactNode  | -------- |
+|  countedFrom             |        ReactNode  | -------- |
+|  addRule                 |        ReactNode  | -------- |
+|  addTime                 |        ReactNode  | -------- |
+|  change                  |        ReactNode  | -------- |
+|  weekly                  |        ReactNode  | -------- |
+|  monthly                 |        ReactNode  | -------- |
+|  daily                   |        ReactNode  | -------- |
+|  saveFilter              |        ReactNode  | -------- |
+|  selected                |        ReactNode  | -------- |
+|  selectDaysDescription   |        ReactNode  | -------- |
+|  selectAll               |        ReactNode  | -------- |
+|  unselectAll             |        ReactNode  | -------- |
+|  inverseSelection        |        ReactNode  | -------- |
+|  setTimeFor              |        ReactNode  | -------- |
+|  week                    |        ReactNode  | -------- |
+|  month                   |        ReactNode  | -------- |
+|  beginning               |        ReactNode  | -------- |
+|  ending                  |        ReactNode  | -------- |
+|  maximumRanges           |        ReactNode  | -------- |
+
 ### Undocumented props
 
 - min in `MonthlyFilter` - controls minimal amount of entires in monthly filter, disable with `undefined`, default is `1`

package/dist/DateRangePicker.types.d.ts

@@ -53,7 +53,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
     showTime?: boolean;
     showCustomRange?: boolean;
     showNowButton?: boolean;
-    texts: Texts;
+    texts?: Partial<Texts>;
     validate?: (value: DateRange) => {
         valid: boolean;
         message?: string;
@@ -90,10 +90,10 @@ export type Texts = {
 } & {
     [k in TranslationsPlaceholders]: string;
 };
-export type TranslationsPlaceholders = 'endDatePlaceholder' | 'startDatePlaceholder' | 'selectDate' | 'selectTime';
-export type Translations = 'custom' | 'today' | 'yesterday' | 'apply' | 'clear' | 'now' | 'emptyDateError' | 'last7Days' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'last3Months' | 'last6Months' | 'lastYear' | 'allTime' | 'tomorrow' | 'next7Days' | 'nextWeek' | 'nextMonth' | 'next3Months' | 'next6Months' | 'nextYear' | 'more' | 'relativeDateRange' | 'last' | 'before' | 'after' | 'since' | 'next' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years' | 'timestampLast' | 'timestampNext' | 'timestampTill' | 'filter' | 'startDate' | 'endDate' | 'remove' | 'savedFiltersTrigger' | 'clearRange' | 'copyRange' | 'pasteRange' | 'range' | 'hour';
+export type TranslationsPlaceholders = 'endDatePlaceholder' | 'startDatePlaceholder' | 'selectDate' | 'selectTime' | 'everyDay' | 'filterName';
+export type Translations = 'custom' | 'today' | 'yesterday' | 'apply' | 'clear' | 'now' | 'emptyDateError' | 'last7Days' | 'thisWeek' | 'lastWeek' | 'thisMonth' | 'lastMonth' | 'last3Months' | 'last6Months' | 'lastYear' | 'allTime' | 'tomorrow' | 'next7Days' | 'nextWeek' | 'nextMonth' | 'next3Months' | 'next6Months' | 'nextYear' | 'more' | 'relativeDateRange' | 'last' | 'before' | 'after' | 'since' | 'next' | 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks' | 'months' | 'years' | 'timestampLast' | 'timestampNext' | 'timestampTill' | 'filter' | 'startDate' | 'endDate' | 'remove' | 'savedFiltersTrigger' | 'clearRange' | 'copyRange' | 'pasteRange' | 'range' | 'hour' | 'filterEnabled' | 'selectDateFilter' | 'datesFilter' | 'cancel' | 'nthDayOfMonth' | 'daysOf' | 'countedFrom' | 'addRule' | 'addTime' | 'change' | 'weekly' | 'monthly' | 'daily' | 'saveFilter' | 'selected' | 'selectDaysDescription' | 'selectAll' | 'unselectAll' | 'inverseSelection' | 'setTimeFor' | 'week' | 'month' | 'beginning' | 'ending' | 'maximumRanges';
 export type WithTranslations = {
-    texts?: Texts;
+    texts: Texts;
 };
 export type AddonType = {
     content: ReactNode;

package/dist/RangeFilter/Filters/DailyFilter/DailyFilter.js

@@ -11,7 +11,6 @@ var DailyFilter = function DailyFilter(props) {
   };
 
   var value = props.value,
-      intl = props.intl,
       onRangeCopy = props.onRangeCopy,
       onRangePaste = props.onRangePaste,
       onRangeClear = props.onRangeClear,
@@ -32,10 +31,7 @@ var DailyFilter = function DailyFilter(props) {
     numberOfDays: 0,
     customDays: {
       0: {
-        label: intl.formatMessage({
-          id: 'DS.DATE-RANGE-PICKER.EVERY_DAY',
-          defaultMessage: 'Every day'
-        })
+        label: texts.everyDay
       }
     } // @ts-expect-error: Type 'string' is not assignable to type 'Days'.ts(2322)
     ,

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

@@ -20,6 +20,7 @@ import { v4 as uuid } from 'uuid';
 import { MONTH_DAYS, DEFAULT_DAYS_OF_PERIODS, DEFAULT_COUNTED_FROM, defaultId, DAYS_OF_PERIOD_ENUM, COUNTED_FROM_ENUM, SPACE_UNICODE } from '../../constants';
 import * as S from './MonthlyFilter.styles';
 import TimeWindow from '../../Shared/TimeWindow/TimeWindow';
+import { getDefaultTexts } from '../../../utils';
 
 var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(MonthlyFilter, _React$PureComponent);
@@ -326,20 +327,21 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
         onRangePaste = _this$props4.onRangePaste,
         onRangeClear = _this$props4.onRangeClear,
         rangeClipboard = _this$props4.rangeClipboard,
-        intl = _this$props4.intl,
         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; // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-explicit-any
+        rangeDisplayMode = _this$props4.rangeDisplayMode,
+        intl = _this$props4.intl; // eslint-disable-next-line @typescript-eslint/no-unused-vars, @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) {
@@ -372,18 +374,12 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
               return event.stopPropagation();
             },
             className: visible[item.id] ? 'dropdown-header-visible' : 'dropdown-header'
-          }, /*#__PURE__*/React.createElement(S.DropdownLabel, null, /*#__PURE__*/React.createElement(FormattedMessage, {
-            id: "DS.DATE-RANGE-PICKER.DAYS-OF",
-            defaultMessage: "Days of"
-          }), SPACE_UNICODE), _this2.renderDaysOfField(item, key), /*#__PURE__*/React.createElement(S.DropdownLabel, null, SPACE_UNICODE, /*#__PURE__*/React.createElement(FormattedMessage, {
-            id: "DS.DATE-RANGE-PICKER.COUNTED-FROM",
-            defaultMessage: "counted from"
-          }), SPACE_UNICODE), _this2.renderCountedFromField(item, key)),
+          }, /*#__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,
             readOnly: !!disabled,
-            texts: texts // eslint-disable-next-line react/no-array-index-key
+            texts: allTexts // eslint-disable-next-line react/no-array-index-key
             ,
             key: item.period + "_" + key,
             showSelectAll: true,
@@ -411,17 +407,11 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
           }))) : /*#__PURE__*/React.createElement("div", null)
         },
         texts: {
-          itemActionDeleteTooltip: intl.formatMessage({
-            id: 'DS.DATE-RANGE-PICKER.REMOVE',
-            defaultMessage: 'Remove'
-          })
+          itemActionDeleteTooltip: allTexts.remove
         }
       });
     }), /*#__PURE__*/React.createElement(S.AddContainer, null, !disabled && value.length < Number(maxEntries) && /*#__PURE__*/React.createElement(Button.Creator, {
-      label: intl.formatMessage({
-        id: 'DS.DATE-RANGE-PICKER.ADD-RULE',
-        defaultMessage: 'Add rule'
-      }),
+      label: allTexts.addRule,
       onClick: this.handleAddRow,
       block: true
     })));

package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.types.d.ts

@@ -18,7 +18,7 @@ export type MonthlyFilterProps = {
     rangeClipboard?: Partial<FilterDefinition>;
     valueSelectionModes?: DateLimitMode[];
     rangeDisplayMode?: RangeDisplayMode;
-} & WithDisabledProp & Partial<RangeActions> & WithTranslations;
+} & WithDisabledProp & Partial<RangeActions> & Partial<WithTranslations>;
 export type Month<T = DenormalizedFilter> = {
     id: string | number;
     period: string;

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

@@ -1,3 +1,3 @@
 import { DailyProps } from './Daily.types';
-declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, errorTexts, }: DailyProps) => JSX.Element;
+declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, texts, errorTexts, }: DailyProps) => JSX.Element;
 export default Daily;

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

@@ -5,12 +5,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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 React, { useMemo, useCallback } from 'react';
-import dayjs from 'dayjs';
 import { useIntl } from 'react-intl';
+import dayjs from 'dayjs';
 import { DEFAULT_RANGE_END, DEFAULT_RANGE_START, DEFAULT_TIME_FORMAT, DEFAULT_MAX_ENTRIES, NOOP, EMPTY_OBJECT, RENDER_EMPTY_NODE_FN } from '../constants';
 import * as S from '../../../RangeFilter.styles';
 import RangeFormContainer from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer';
 import { AddButton } from '../../../Shared';
+import { getDefaultTexts } from '../../../../utils';
 
 var Daily = function Daily(_ref) {
   var _ref$maxEntries = _ref.maxEntries,
@@ -24,9 +25,13 @@ var Daily = function Daily(_ref) {
       valueSelectionMode = _ref$valueSelectionMo === void 0 ? ['Hour', 'Range'] : _ref$valueSelectionMo,
       timeFormat = _ref.timeFormat,
       timePickerProps = _ref.timePickerProps,
+      texts = _ref.texts,
       _ref$errorTexts = _ref.errorTexts,
       errorTexts = _ref$errorTexts === void 0 ? [] : _ref$errorTexts;
   var intl = useIntl();
+  var allTexts = React.useMemo(function () {
+    return getDefaultTexts(intl, false, texts);
+  }, [texts, intl]);
   var defaultDayValue = useMemo(function () {
     return {
       start: DEFAULT_RANGE_START,
@@ -85,7 +90,7 @@ var Daily = function Daily(_ref) {
         handleDayTimeChange(dateValueArray, index);
       },
       dayKeys: [0],
-      texts: EMPTY_OBJECT,
+      texts: allTexts,
       activeDays: [0],
       getDayValue: function getDayValue() {
         return _getDayValue(index);
@@ -104,10 +109,7 @@ var Daily = function Daily(_ref) {
       hideHeader: true
     });
   }), value.length < maxEntries && !disabled && /*#__PURE__*/React.createElement(AddButton, {
-    label: intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.ADD-TIME',
-      defaultMessage: 'Add range'
-    }),
+    label: allTexts.addTime,
     onClick: handleRangeAdd
   }));
 };

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

@@ -3,11 +3,13 @@ import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/Ran
 import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
 import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
+import { Texts } from '../../../../DateRangePicker.types';
 export type DailySchedule = DayOptions & {
     mode: DateLimitMode;
 };
 export type DailyProps = {
     value: DailySchedule[];
     errorTexts?: FilterErrorType[];
+    texts?: Partial<Texts>;
     onChange: (value: DailyProps['value']) => void;
 } & FilterBaseProps & WithDisabledProp;

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

@@ -1,3 +1,3 @@
 import { MonthlyProps } from './Monthly.types';
-declare const Monthly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, periodType, countedFrom, errorTexts, }: MonthlyProps) => JSX.Element;
+declare const Monthly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, texts, periodType, countedFrom, errorTexts, }: MonthlyProps) => JSX.Element;
 export default Monthly;

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

@@ -21,6 +21,7 @@ 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';
+import { getDefaultTexts } from '../../../../utils';
 
 var Monthly = function Monthly(_ref) {
   var _ref$maxEntries = _ref.maxEntries,
@@ -34,11 +35,16 @@ var Monthly = function Monthly(_ref) {
       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 = React.useMemo(function () {
+    return getDefaultTexts(intl, false, texts);
+  }, [texts, intl]);
   var defaultDayValue = React.useMemo(function () {
     return {
       start: DEFAULT_RANGE_START,
@@ -64,8 +70,6 @@ var Monthly = function Monthly(_ref) {
       controlKeyPressed = _useShiftAndControlKe[0],
       shiftKeyPressed = _useShiftAndControlKe[1];
 
-  var intl = useIntl();
-
   var _useDataFormat = useDataFormat(),
       isSundayFirstWeekDay = _useDataFormat.isSundayFirstWeekDay;
 
@@ -272,9 +276,9 @@ var Monthly = function Monthly(_ref) {
       intl: intl,
       onToggle: handleToggleDay,
       onClear: removeDaySelection,
-      texts: EMPTY_OBJECT
+      texts: allTexts
     });
-  }, [activeDays, intl, getDayLabel, handleToggleDay, removeDaySelection, isDayRestricted, disabled]);
+  }, [activeDays, getDayLabel, isDayRestricted, disabled, intl, handleToggleDay, removeDaySelection, allTexts]);
   var handleRangeAdd = React.useCallback(function () {
     var _objectSpread2;
 
@@ -296,12 +300,9 @@ var Monthly = function Monthly(_ref) {
   var renderGridTitle = React.useCallback(function (count) {
     return /*#__PURE__*/React.createElement(SelectionCount, {
       selectedDayCount: count,
-      label: intl.formatMessage({
-        id: 'DS.DATE-RANGE-PICKER.SELECTED',
-        defaultMessage: 'Selected'
-      })
+      label: allTexts.selected
     });
-  }, [intl]);
+  }, [allTexts.selected]);
   var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
   var isAnyDaySelected = activeDays.length > 0;
   var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
@@ -324,7 +325,7 @@ var Monthly = function Monthly(_ref) {
     intl: intl,
     numberOfDays: 7,
     numberOfDaysPerRow: 7,
-    texts: EMPTY_OBJECT,
+    texts: allTexts,
     title: renderGridTitle(activeDays.length)
   }, getGridSettings())), isAnyDaySelected && filteredSchedule.map(function (guid, index) {
     return /*#__PURE__*/React.createElement(RangeFormContainer, {
@@ -335,7 +336,7 @@ var Monthly = function Monthly(_ref) {
       onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {
         handleDayTimeChange(dayValue, dayKey, guid);
       },
-      texts: EMPTY_OBJECT,
+      texts: allTexts,
       onMultipleDayTimeChange: function onMultipleDayTimeChange(dates) {
         return handleDayTimeChange(dates, activeDays, guid);
       },
@@ -362,21 +363,12 @@ var Monthly = function Monthly(_ref) {
       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.'
-    })
+    message: allTexts.maximumRanges
   }), shouldRenderAddButton && /*#__PURE__*/React.createElement(AddButton, {
-    label: intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.ADD-TIME',
-      defaultMessage: 'Add range'
-    }),
+    label: allTexts.addTime,
     onClick: handleRangeAdd
   }), !isAnyDaySelected && !disabled && /*#__PURE__*/React.createElement(SelectionHint, {
-    message: intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.SELECT-DAYS-DESCRIPTION',
-      defaultMessage: 'Select range.'
-    })
+    message: allTexts.selectDaysDescription
   }));
 };
 

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

@@ -4,6 +4,7 @@ import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/Ran
 import { FilterBaseProps } from '../Filters.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
 import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
+import { Texts } from '../../../../DateRangePicker.types';
 export type MonthlyScheduleDayValue = DayOptions & {
     mode: DateLimitMode;
 };
@@ -19,4 +20,5 @@ export type MonthlyProps = {
     periodType: DAYS_OF_PERIOD_ENUM;
     countedFrom: COUNTED_FROM_ENUM;
     onChange: (value: MonthlyProps['value']) => void;
+    texts?: Partial<Texts>;
 } & FilterBaseProps & WithDisabledProp;

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

@@ -1,3 +1,3 @@
 import { WeeklyProps } from './Weekly.types';
-declare const Weekly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, errorTexts, }: WeeklyProps) => JSX.Element;
+declare const Weekly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, texts, timePickerProps, disabled, errorTexts, }: WeeklyProps) => JSX.Element;
 export default Weekly;