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

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

@@ -4,7 +4,7 @@ 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 * as React from 'react';
+import React, { useRef, useEffect, useCallback, useState, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import dayjs from 'dayjs';
 import { v4 as uuid } from 'uuid';
@@ -18,6 +18,7 @@ import { useShiftAndControlKeys } from '../hooks/useShiftAndControlKeys';
 import { canAddAnotherRange, haveActiveDaysCommonRange, range, removeEmptyEntries } 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 { EU_NOTATION_WEEK_DAYS_INDEXES, US_NOTATION_WEEK_DAYS_INDEXES } from '../../../Shared/TimeWindow/constants/timeWindow.constants';
+import { getDefaultTexts } from '../../../../utils';
 
 var Weekly = function Weekly(_ref) {
   var _ref$maxEntries = _ref.maxEntries,
@@ -29,10 +30,15 @@ var Weekly = function Weekly(_ref) {
       timeFormat = _ref.timeFormat,
       valueFormatOptions = _ref.valueFormatOptions,
       value = _ref.value,
+      texts = _ref.texts,
       timePickerProps = _ref.timePickerProps,
       disabled = _ref.disabled,
       errorTexts = _ref.errorTexts;
-  var defaultDayValue = React.useMemo(function () {
+  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,
@@ -43,29 +49,27 @@ var Weekly = function Weekly(_ref) {
     };
   }, [valueSelectionMode]);
 
-  var _React$useState = React.useState(Object.keys(value)),
-      filteredSchedule = _React$useState[0],
-      setFilteredSchedule = _React$useState[1];
+  var _useState = useState(Object.keys(value)),
+      filteredSchedule = _useState[0],
+      setFilteredSchedule = _useState[1];
 
-  var _React$useState2 = React.useState([]),
-      activeDays = _React$useState2[0],
-      setActiveDays = _React$useState2[1];
+  var _useState2 = useState([]),
+      activeDays = _useState2[0],
+      setActiveDays = _useState2[1];
 
-  var ref = React.useRef();
+  var ref = useRef();
 
   var _useShiftAndControlKe = useShiftAndControlKeys(ref),
       controlKeyPressed = _useShiftAndControlKe[0],
       shiftKeyPressed = _useShiftAndControlKe[1];
 
-  var intl = useIntl();
-
   var _useDataFormat = useDataFormat(),
       isSundayFirstWeekDay = _useDataFormat.isSundayFirstWeekDay;
 
-  var allKeys = React.useMemo(function () {
+  var allKeys = useMemo(function () {
     return isSundayFirstWeekDay ? US_NOTATION_WEEK_DAYS_INDEXES : EU_NOTATION_WEEK_DAYS_INDEXES;
   }, [isSundayFirstWeekDay]);
-  React.useEffect(function () {
+  useEffect(function () {
     removeEmptyEntries(value);
     var entriesWithActiveDaysValue = activeDays.length ? Object.keys(value).filter(function (id) {
       return activeDays.every(function (day) {
@@ -74,7 +78,7 @@ var Weekly = function Weekly(_ref) {
     }) : [];
     setFilteredSchedule(entriesWithActiveDaysValue);
   }, [value, activeDays]);
-  var handleDayTimeChange = React.useCallback(function (dayValue, dayKey, guid) {
+  var handleDayTimeChange = useCallback(function (dayValue, dayKey, guid) {
     var updatedSchedule = value;
     var start = dayValue[0],
         end = dayValue[1],
@@ -103,7 +107,7 @@ var Weekly = function Weekly(_ref) {
     onChange(updatedSchedule);
   }, [value, onChange]);
 
-  var _getDayValue = React.useCallback(function (dayKey, guid) {
+  var _getDayValue = useCallback(function (dayKey, guid) {
     if (typeof dayKey === 'number' && value[guid] && !!value[guid][dayKey]) {
       return value[guid][dayKey];
     }
@@ -111,7 +115,7 @@ var Weekly = function Weekly(_ref) {
     return defaultDayValue;
   }, [value, defaultDayValue]);
 
-  var handleModeChange = React.useCallback(function (selectedMode, dayKeys, guid) {
+  var handleModeChange = useCallback(function (selectedMode, dayKeys, guid) {
     var updatedSchedule = value;
     dayKeys.forEach(function (day) {
       updatedSchedule[guid][day] = _objectSpread({}, value[guid][day], {
@@ -120,35 +124,35 @@ var Weekly = function Weekly(_ref) {
     });
     onChange(updatedSchedule);
   }, [value, onChange]);
-  var handleRangeDelete = React.useCallback(function (guid, activeDaysArray) {
+  var handleRangeDelete = useCallback(function (guid, activeDaysArray) {
     var updatedSchedule = value;
     activeDaysArray.forEach(function (activeDay) {
       delete updatedSchedule[guid][activeDay];
     });
     onChange(_objectSpread({}, updatedSchedule));
   }, [value, onChange]);
-  var dayFormatter = React.useCallback(function (dayKey) {
+  var dayFormatter = useCallback(function (dayKey) {
     return intl.formatMessage({
       id: "DS.DATE-RANGE-PICKER.WEEKDAYS-SHORT-" + dayKey
     });
   }, [intl]);
-  var checkDay = React.useCallback(function (dayKey) {
+  var checkDay = useCallback(function (dayKey) {
     setActiveDays([dayKey]);
   }, []);
-  var getDayLabel = React.useCallback(function (dayKey) {
+  var getDayLabel = useCallback(function (dayKey) {
     return dayFormatter(dayKey);
   }, [dayFormatter]);
-  var excludeDayFromActive = React.useCallback(function (dayKey) {
+  var excludeDayFromActive = useCallback(function (dayKey) {
     setActiveDays(activeDays.filter(function (day) {
       return day !== dayKey;
     }));
   }, [activeDays]);
-  var isDayRestricted = React.useCallback(function (dayKey) {
+  var isDayRestricted = useCallback(function (dayKey) {
     return Object.keys(value).some(function (key) {
       return !!value[key][dayKey];
     });
   }, [value]);
-  var removeDaySelection = React.useCallback(function (dayKey) {
+  var removeDaySelection = useCallback(function (dayKey) {
     var updatedSchedule = value;
     Object.keys(value).forEach(function (key) {
       delete updatedSchedule[key][dayKey];
@@ -156,16 +160,16 @@ var Weekly = function Weekly(_ref) {
     excludeDayFromActive(dayKey);
     onChange(updatedSchedule);
   }, [value, onChange, excludeDayFromActive]);
-  var uncheckActiveDay = React.useCallback(function (dayKey) {
+  var uncheckActiveDay = useCallback(function (dayKey) {
     removeDaySelection(dayKey);
   }, [removeDaySelection]);
-  var handleSelectAll = React.useCallback(function () {
+  var handleSelectAll = useCallback(function () {
     setActiveDays(allKeys);
   }, [allKeys]);
-  var handleUnselectAll = React.useCallback(function () {
+  var handleUnselectAll = useCallback(function () {
     setActiveDays([]);
   }, []);
-  var checkActiveDay = React.useCallback(function (dayKey) {
+  var checkActiveDay = useCallback(function (dayKey) {
     if (!isDayRestricted(dayKey)) {
       checkDay(dayKey);
     }
@@ -182,7 +186,7 @@ var Weekly = function Weekly(_ref) {
 
     setActiveDays(updatedActiveDay);
   }, [checkDay, isDayRestricted, activeDays, controlKeyPressed, shiftKeyPressed]);
-  var handleToggleDay = React.useCallback(function (dayKey, forcedState) {
+  var handleToggleDay = useCallback(function (dayKey, forcedState) {
     if (typeof forcedState !== 'undefined') {
       if (controlKeyPressed && forcedState) {
         activeDays.includes(dayKey) ? excludeDayFromActive(dayKey) : checkActiveDay(dayKey);
@@ -194,7 +198,7 @@ var Weekly = function Weekly(_ref) {
       activeDays.includes(dayKey) ? uncheckActiveDay(dayKey) : checkActiveDay(dayKey);
     }
   }, [controlKeyPressed, activeDays, uncheckActiveDay, checkActiveDay, excludeDayFromActive]);
-  var renderDay = React.useCallback(function (dayKey) {
+  var renderDay = useCallback(function (dayKey) {
     var isActive = activeDays.includes(dayKey);
     return /*#__PURE__*/React.createElement(Day, {
       key: dayKey,
@@ -207,10 +211,10 @@ var Weekly = function Weekly(_ref) {
       intl: intl,
       onToggle: handleToggleDay,
       onClear: removeDaySelection,
-      texts: EMPTY_OBJECT
+      texts: allTexts
     });
-  }, [activeDays, intl, getDayLabel, handleToggleDay, removeDaySelection, isDayRestricted, disabled]);
-  var handleRangeAdd = React.useCallback(function () {
+  }, [activeDays, getDayLabel, isDayRestricted, disabled, intl, handleToggleDay, removeDaySelection, allTexts]);
+  var handleRangeAdd = useCallback(function () {
     var _objectSpread2;
 
     var updatedDay = {};
@@ -228,15 +232,12 @@ var Weekly = function Weekly(_ref) {
 
     onChange(updatedSchedule);
   }, [value, activeDays, defaultDayValue, onChange]);
-  var renderGridTitle = React.useCallback(function (count) {
+  var renderGridTitle = 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;
@@ -258,7 +259,7 @@ var Weekly = function Weekly(_ref) {
     days: EMPTY_OBJECT,
     intl: intl,
     numberOfDays: 7,
-    texts: EMPTY_OBJECT,
+    texts: allTexts,
     title: renderGridTitle(activeDays.length)
   }), isAnyDaySelected && filteredSchedule.map(function (guid, index) {
     return /*#__PURE__*/React.createElement(RangeFormContainer, {
@@ -269,7 +270,7 @@ var Weekly = function Weekly(_ref) {
       onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {
         handleDayTimeChange(dayValue, dayKey, guid);
       },
-      texts: EMPTY_OBJECT,
+      texts: allTexts,
       onMultipleDayTimeChange: function onMultipleDayTimeChange(dates) {
         return handleDayTimeChange(dates, activeDays, guid);
       },
@@ -295,22 +296,13 @@ var Weekly = function Weekly(_ref) {
       disabled: disabled
     });
   }), 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, {
     "data-testid": "drp-filter-add-range",
-    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/Weekly/Weekly.types.d.ts

@@ -3,6 +3,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 WeeklyScheduleDayValue = DayOptions & {
     mode: DateLimitMode;
 };
@@ -16,4 +17,5 @@ export type WeeklyProps = {
         [guid: string]: FilterErrorType[];
     };
     onChange: (value: WeeklyProps['value']) => void;
+    texts?: Partial<Texts>;
 } & FilterBaseProps & WithDisabledProp;

package/dist/RangeFilter/RangeFilter.js

@@ -154,15 +154,12 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
     buttonSource.sort(function (a, b) {
       return Object.values(TYPES).indexOf(a) < Object.values(TYPES).indexOf(b) ? -1 : 1;
     });
-    return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Header, null, /*#__PURE__*/React.createElement(S.Title, null, intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.DATES_FILTER',
-      defaultMessage: 'Date filter'
-    })), !!(savedFilters != null && savedFilters.length) && /*#__PURE__*/React.createElement(FilterDropdown, {
+    return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Header, null, /*#__PURE__*/React.createElement(S.Title, null, texts.datesFilter), !!(savedFilters != null && savedFilters.length) && /*#__PURE__*/React.createElement(FilterDropdown, {
       filters: savedFilters,
       onFilterSelect: this.handleSavedFilterSelect,
       onFilterRemove: this.handleSavedFilterRemove,
-      label: texts == null ? void 0 : texts.savedFiltersTrigger,
-      removeTooltip: texts == null ? void 0 : texts.remove
+      label: texts.savedFiltersTrigger,
+      removeTooltip: texts.remove
     })), /*#__PURE__*/React.createElement(S.Body, null, buttonSource.length > 1 && /*#__PURE__*/React.createElement(ButtonGroup, {
       fullWidth: true,
       size: "large"
@@ -173,10 +170,7 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
         onClick: function onClick() {
           return _this2.handleTypeChange(key);
         }
-      }, intl.formatMessage({
-        id: TYPES_DATA[key].labelTranslationKey,
-        defaultMessage: TYPES_DATA[key].defaultLabel
-      }));
+      }, texts[key.toLowerCase()]);
     })), /*#__PURE__*/React.createElement(S.MainComponentWrapper, null, Component && /*#__PURE__*/React.createElement(Component, {
       intl: intl,
       texts: texts,
@@ -197,23 +191,18 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
     }))), !hideFooter && /*#__PURE__*/React.createElement(S.Footer, {
       "data-testid": "range-filter-footer"
     }, savedFilters && onFilterSave && /*#__PURE__*/React.createElement(SaveFilterForm, {
+      texts: texts,
       onFilterSave: this.handleFilterSave
     }), /*#__PURE__*/React.createElement(S.FooterSeparator, null), /*#__PURE__*/React.createElement(Button, {
       "data-testid": "range-filter-cancel-button",
       type: "ghost",
       onClick: this.handleCancel
-    }, intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.CANCEL',
-      defaultMessage: 'Cancel'
-    })), /*#__PURE__*/React.createElement(Button, {
+    }, texts.cancel), /*#__PURE__*/React.createElement(Button, {
       "data-testid": "range-filter-apply-button",
       type: "primary",
       disabled: !isValidValue(activeValue),
       onClick: this.handleApply
-    }, intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.APPLY',
-      defaultMessage: 'Apply'
-    }))));
+    }, texts.apply)));
   };
 
   return RangeFilter;

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IntlShape } from 'react-intl';
 import { SavedFilter } from './Shared/FilterDropdown/FilterDropdown.types';
 import { DateLimitMode, RangeDisplayMode } from './Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
-import { Props as DateRangePickerProps, Texts } from '../DateRangePicker.types';
+import { DateRangePickerProps, Texts } from '../DateRangePicker.types';
 import { COUNTED_FROM_ENUM, DAYS_OF_PERIOD_ENUM } from './constants';
 export type FilterValue<T = FilterDefinition> = {
     definition?: Partial<T>;
@@ -17,7 +17,7 @@ export type RangeFilterProps = {
     intl: IntlShape;
     savedFilters?: SavedFilter[];
     onFilterSave?: (filters: SavedFilter[]) => void;
-    texts?: Texts;
+    texts: Texts;
     allowedFilterTypes?: string[];
     valueSelectionModes?: DateLimitMode[];
     rangeDisplayMode?: RangeDisplayMode;

package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.js

@@ -15,7 +15,7 @@ var RangeFilterStatus = function RangeFilterStatus(_ref) {
       _onClick = _ref.onClick,
       texts = _ref.texts;
   var intl = useIntl();
-  return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Title, null, texts == null ? void 0 : texts.filter), !filter ? /*#__PURE__*/React.createElement(S.CreatorButton, {
+  return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Title, null, texts.filter), !filter ? /*#__PURE__*/React.createElement(S.CreatorButton, {
     label: label,
     disabled: disabled,
     onClick: _onClick,
@@ -26,14 +26,8 @@ var RangeFilterStatus = function RangeFilterStatus(_ref) {
 
       _onClick();
     },
-    headerSuffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.SuffixText, null, intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.CHANGE',
-      defaultMessage: 'Change'
-    })), /*#__PURE__*/React.createElement(Tooltip, {
-      title: intl.formatMessage({
-        id: 'DS.DATE-RANGE-PICKER.REMOVE',
-        defaultMessage: 'Remove'
-      })
+    headerSuffix: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.SuffixText, null, texts.change), /*#__PURE__*/React.createElement(Tooltip, {
+      title: texts.remove
     }, /*#__PURE__*/React.createElement(Icon, {
       onClick: function onClick(event) {
         event.stopPropagation();
@@ -44,7 +38,7 @@ var RangeFilterStatus = function RangeFilterStatus(_ref) {
     }))),
     item: {
       id: 'filter-trigger',
-      name: intl.formatMessage({
+      name: texts[filter.type.toLocaleLowerCase()] || intl.formatMessage({
         id: "DS.DATE-RANGE-PICKER." + filter.type,
         defaultMessage: 'Filter'
       }),
@@ -55,8 +49,7 @@ var RangeFilterStatus = function RangeFilterStatus(_ref) {
       }, /*#__PURE__*/React.createElement(Icon, {
         component: /*#__PURE__*/React.createElement(FilterM, null)
       })))
-    },
-    texts: {}
+    }
   }));
 };
 

package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.types.d.ts

@@ -1,10 +1,11 @@
+import { ReactNode } from 'react';
 import { DateFilter } from '../../../date.types';
 import { Texts } from '../../../DateRangePicker.types';
 export type RangeFilterStatusProps = {
     filter: DateFilter | undefined;
     disabled: boolean;
-    label: string;
-    texts?: Partial<Texts>;
+    label: ReactNode;
+    texts: Pick<Texts, 'filter' | 'change' | 'remove'>;
     onClick: () => void;
     onFilterRemove: () => void;
 };

package/dist/RangeFilter/Shared/SaveFilterForm/SaveFilterForm.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import Button from '@synerise/ds-button';
 import { RawInput } from '@synerise/ds-input';
 import Icon, { CheckM, CloseM } from '@synerise/ds-icon';
-import { useIntl } from 'react-intl';
 import * as S from './SaveFilterForm.styles';
 
 var SaveFilterForm = function SaveFilterForm(_ref) {
-  var onFilterSave = _ref.onFilterSave;
+  var texts = _ref.texts,
+      onFilterSave = _ref.onFilterSave;
 
   var _React$useState = React.useState(false),
       active = _React$useState[0],
@@ -16,12 +16,8 @@ var SaveFilterForm = function SaveFilterForm(_ref) {
       name = _React$useState2[0],
       setName = _React$useState2[1];
 
-  var intl = useIntl();
   var input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(RawInput, {
-    placeholder: intl.formatMessage({
-      id: 'DS.DATE-RANGE-PICKER.FILTER-NAME',
-      defaultMessage: 'Filter name'
-    }),
+    placeholder: texts.filterName,
     value: name,
     onChange: function onChange(e) {
       setName(e.target.value);
@@ -53,10 +49,7 @@ var SaveFilterForm = function SaveFilterForm(_ref) {
     onClick: function onClick() {
       return setActive(!active);
     }
-  }, intl.formatMessage({
-    id: 'DS.DATE-RANGE-PICKER.SAVE-FILTER',
-    defaultMessage: 'Save filter'
-  })));
+  }, texts.saveFilter));
 };
 
 export default SaveFilterForm;

package/dist/RangeFilter/Shared/SaveFilterForm/SaveFilterForm.types.d.ts

@@ -1,3 +1,5 @@
+import { Texts } from '../../../DateRangePicker.types';
 export type SaveFilterFormProps = {
+    texts: Pick<Texts, 'saveFilter' | 'filterName'>;
     onFilterSave: (name: string) => void;
 };

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

@@ -67,7 +67,7 @@ var Day = function Day(_ref) {
     mode: "label-icon"
   }), /*#__PURE__*/React.createElement(S.Content, null, label)), restricted && /*#__PURE__*/React.createElement(Tooltip, {
     trigger: ['hover'],
-    title: (texts == null ? void 0 : texts.clear) || 'Clear',
+    title: texts.clear || 'Clear',
     onVisibleChange: handleTooltipVisibleChange,
     getPopupContainer: getPopupContainer
   }, /*#__PURE__*/React.createElement(S.IconWrapper, {

package/dist/RangeFilter/Shared/TimeWindow/Day/Day.types.d.ts

@@ -10,5 +10,5 @@ export type DayProps = {
     onToggle: (dayKey: DayKey, forceState?: boolean) => void;
     onClear: (dayKey: DayKey) => void;
     readOnly?: boolean;
-    texts?: GridTexts;
+    texts: GridTexts;
 } & WrappedComponentProps;

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { range, rangeRight } from 'lodash';
 import { Header } from '../Header/Header';
 import * as S from '../TimeWindow.styles';
@@ -12,6 +11,7 @@ var Grid = function Grid(_ref) {
       numberOfDaysPerRow = _ref.numberOfDaysPerRow,
       rowLabelFormatter = _ref.rowLabelFormatter,
       title = _ref.title,
+      texts = _ref.texts,
       showSelectAll = _ref.showSelectAll,
       showUnselectAll = _ref.showUnselectAll,
       inverted = _ref.inverted,
@@ -26,18 +26,12 @@ var Grid = function Grid(_ref) {
   if (showSelectAll) actions.push({
     key: 'select-all',
     onClick: onSelectAll,
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.DATE-RANGE-PICKER.SELECT-ALL",
-      defaultMessage: "Select all"
-    })
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, texts.selectAll)
   });
   if (showUnselectAll) actions.push({
     key: 'unselect-all',
     onClick: onUnselectAll,
-    label: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.DATE-RANGE-PICKER.UNSELECT-ALL",
-      defaultMessage: "Unselect all"
-    })
+    label: /*#__PURE__*/React.createElement(React.Fragment, null, texts.unselectAll)
   });
   var grid = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.Days, {

package/dist/RangeFilter/Shared/TimeWindow/Grid/Grid.types.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IntlShape } from 'react-intl';
 import { DayKey, Days } from '../TimeWindow.types';
+import type { Texts } from '../../../../DateRangePicker.types';
 export type GridProps = {
     keys: number[];
     days: Days;
@@ -19,8 +20,6 @@ export type GridProps = {
     onSelectAll: () => void;
     onUnselectAll: () => void;
     renderDay: (day: DayKey) => React.ReactNode;
-    texts?: GridTexts;
-};
-export type GridTexts = {
-    clear?: string | React.ReactNode;
+    texts: GridTexts;
 };
+export type GridTexts = Pick<Texts, 'clear' | 'selectAll' | 'unselectAll'>;

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

@@ -79,7 +79,7 @@ var RangeForm = function RangeForm(_ref) {
     return /*#__PURE__*/React.createElement(TimePicker, _extends({
       errorText: errorForFirstItem,
       disabled: disabled,
-      clearTooltip: texts == null ? void 0 : texts.clear,
+      clearTooltip: texts.clear,
       onChange: function onChange(date) {
         onExactHourSelect(date);
         setStart(date);
@@ -151,7 +151,7 @@ var RangeForm = function RangeForm(_ref) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
       errorText: errorForFirstItem,
       disabled: disabled,
-      clearTooltip: texts == null ? void 0 : texts.clear,
+      clearTooltip: texts.clear,
       onChange: function onChange(date) {
         setStart(date);
         onStartChange(date);
@@ -168,7 +168,7 @@ var RangeForm = function RangeForm(_ref) {
     }, timePickerProps)), /*#__PURE__*/React.createElement(S.Separator, null, "-"), /*#__PURE__*/React.createElement(TimePicker, _extends({
       errorText: errorForSecondItem,
       disabled: disabled,
-      clearTooltip: texts == null ? void 0 : texts.clear,
+      clearTooltip: texts.clear,
       onChange: function onChange(date) {
         setEnd(date);
         onEndChange(date);
@@ -193,7 +193,7 @@ var RangeForm = function RangeForm(_ref) {
   };
 
   var getModeLabel = function getModeLabel(modeName) {
-    if (texts && texts[modeName]) return texts[modeName];
+    if (texts[modeName.toLocaleLowerCase()]) return texts[modeName.toLocaleLowerCase()];
     return intl.formatMessage(RANGE_FORM_INTL_KEYS[modeName]);
   };
 

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
-import { WithTranslations } from '../../../../../DateRangePicker.types';
 import { RangeFormContainerProps } from '../RangeFormContainer.types';
 import { WithDisabledProp } from '../../../../RangeFilter.types';
+import { TimeWindowTexts } from '../../TimeWindow.types';
 export type DateLimitMode = 'Hour' | 'Range';
 export type RangeDisplayMode = 'timepicker' | 'slider';
 export type RangeFormProps = {
@@ -17,7 +17,8 @@ export type RangeFormProps = {
     valueSelectionModes: DateLimitMode[];
     rangeDisplayMode?: RangeDisplayMode;
     isInvertedRange?: boolean;
-} & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions' | 'errorTexts'>;
+    texts: TimeWindowTexts;
+} & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions' | 'errorTexts'>;
 export type RangeFormTexts = {
     range: ReactNode | string;
     hour: ReactNode | string;

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

@@ -5,7 +5,6 @@ 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 * as React from 'react';
-import { FormattedMessage } from 'react-intl';
 import RangeForm from './RangeForm/RangeForm';
 import { RANGE_DISPLAY_MODES } from './RangeForm/RangeForm.constants';
 import { getDateFromDayValue, getDefaultFilterForLimitMode } from '../utils';
@@ -34,8 +33,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       onRangePaste = _ref.onRangePaste,
       onRangeCopy = _ref.onRangeCopy,
       onRangeDelete = _ref.onRangeDelete,
-      _ref$texts = _ref.texts,
-      texts = _ref$texts === void 0 ? {} : _ref$texts,
+      texts = _ref.texts,
       onChange = _ref.onChange,
       _ref$valueSelectionMo = _ref.valueSelectionModes,
       valueSelectionModes = _ref$valueSelectionMo === void 0 ? ['Range', 'Hour'] : _ref$valueSelectionMo,
@@ -138,11 +136,8 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
   var invertedToggleLink = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.InvertAction, {
       onClick: toggleInverted
-    }, /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.DATE-RANGE-PICKER.FILTER-INVERSE-SELECTION",
-      defaultMessage: "Inverse selection"
-    }));
-  }, [toggleInverted]);
+    }, texts.inverseSelection);
+  }, [texts.inverseSelection, toggleInverted]);
   var suffix = React.useMemo(function () {
     var _headerOptions$includ = headerOptions.includeActions,
         includeActions = _headerOptions$includ === void 0 ? true : _headerOptions$includ;
@@ -160,6 +155,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
     title: includeSummary && /*#__PURE__*/React.createElement(RangeSummary, {
       dayKeys: dayKeys,
       getDayLabel: getDayLabel,
+      texts: texts,
       monthlyFilter: monthlyFilter,
       monthlyFilterPeriod: monthlyFilterPeriod
     }),

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types.d.ts

@@ -18,7 +18,7 @@ export type RangeFormContainerProps = {
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
     rangeDisplayMode?: RangeDisplayMode;
-    texts: Partial<TimeWindowTexts>;
+    texts: TimeWindowTexts;
     /**
      * @deprecated use `valueFormatOptions` instead
      */