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

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.21.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.4...@synerise/ds-date-range-picker@0.21.5) (2023-04-26)
+
+
+### Bug Fixes
+
+* **date-range-picker:** adds missing translation keys and texts ([8b9c454](https://github.com/Synerise/synerise-design/commit/8b9c454590aac1fd49f5cac9a7eb3f05a5f70822))
+* **date-range-picker:** fixes filter limit mode change for multiple days ([713a8e2](https://github.com/Synerise/synerise-design/commit/713a8e2b19a8e224b0ba696e93ac260639b590e4))
+
+
+
+
+
+## [0.21.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.3...@synerise/ds-date-range-picker@0.21.4) (2023-04-19)
+
+
+### Bug Fixes
+
+* **date-range-picker:** date range values are rounded to full seconds ([aa6d01b](https://github.com/Synerise/synerise-design/commit/aa6d01bf445abb613acfded51f868b70c116a1e3))
+* **date-range-picker:** makes ms truncation optional via props ([20480d4](https://github.com/Synerise/synerise-design/commit/20480d4636f4d439880cc0785fbe5e8339d91c2c))
+* **date-range-picker:** rounds range from & to to full seconds ([7f13dfe](https://github.com/Synerise/synerise-design/commit/7f13dfebb7f210b6b425e05907660c195d532874))
+
+
+
+
+
 ## [0.21.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.21.2...@synerise/ds-date-range-picker@0.21.3) (2023-04-17)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/dist/DateRangePicker.types.d.ts

@@ -66,6 +66,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
     rangePickerInputProps?: RangePickerInputProps;
     allowedFilterTypes?: string[];
     renderPopoverTrigger?: (...args: any) => JSX.Element;
+    isTruncateMs?: boolean;
 }
 /**
  * @deprecated use `DateRangePickerProps`
@@ -84,7 +85,7 @@ export declare type Texts = {
     [k in TranslationsPlaceholders]: string;
 };
 export declare type TranslationsPlaceholders = 'endDatePlaceholder' | 'startDatePlaceholder' | 'selectDate' | 'selectTime';
-export declare 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';
+export declare 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 declare type WithTranslations = {
     texts?: Texts;
 };

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

@@ -1,5 +1,15 @@
 import * as React from 'react';
 import { DateLimitMode, RangeFormProps } from './RangeForm.types';
 export declare const FORM_MODES: Record<string, DateLimitMode>;
+export declare const RANGE_FORM_INTL_KEYS: {
+    Hour: {
+        id: string;
+        defaultMessage: string;
+    };
+    Range: {
+        id: string;
+        defaultMessage: string;
+    };
+};
 declare const RangeForm: React.FC<RangeFormProps>;
 export default RangeForm;

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

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import * as React from 'react';
+import { useIntl } from 'react-intl';
 import Select from '@synerise/ds-select';
 import Icon, { CloseS } from '@synerise/ds-icon';
 import { useDataFormat } from '@synerise/ds-data-format';
@@ -12,6 +13,16 @@ export var FORM_MODES = {
   HOUR: 'Hour',
   RANGE: 'Range'
 };
+export var RANGE_FORM_INTL_KEYS = {
+  Hour: {
+    id: 'DS.DATE-RANGE-PICKER.HOUR',
+    defaultMessage: 'Hour'
+  },
+  Range: {
+    id: 'DS.DATE-RANGE-PICKER.RANGE',
+    defaultMessage: 'Range'
+  }
+};
 
 var RangeForm = function RangeForm(_ref) {
   var onModeChange = _ref.onModeChange,
@@ -33,6 +44,8 @@ var RangeForm = function RangeForm(_ref) {
   var _useDataFormat = useDataFormat(),
       is12HoursClock = _useDataFormat.is12HoursClock;
 
+  var intl = useIntl();
+
   var _React$useState = React.useState(startDate),
       start = _React$useState[0],
       setStart = _React$useState[1];
@@ -102,6 +115,10 @@ var RangeForm = function RangeForm(_ref) {
       use12HourClock: is12HoursClock
     }, timePickerProps)));
   }, [start, end, onStartChange, onEndChange, setStart, setEnd, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock, valueFormatOptions]);
+  var getModeLabel = React.useCallback(function (modeName) {
+    if (texts && texts[modeName]) return texts[modeName];
+    return intl.formatMessage(RANGE_FORM_INTL_KEYS[modeName]);
+  }, [texts, intl]);
   var limitModeSelect = React.useMemo(function () {
     return valueSelectionModes.length > 1 ? /*#__PURE__*/React.createElement(Select, {
       value: mode,
@@ -114,9 +131,9 @@ var RangeForm = function RangeForm(_ref) {
       return /*#__PURE__*/React.createElement(Select.Option, {
         key: modeName,
         value: modeName
-      }, modeName);
+      }, getModeLabel(modeName));
     })) : null;
-  }, [mode, onModeChange, getPopupContainer, valueSelectionModes, disabled]);
+  }, [mode, onModeChange, getPopupContainer, valueSelectionModes, disabled, getModeLabel]);
   return /*#__PURE__*/React.createElement(S.Container, null, /*#__PURE__*/React.createElement(S.Row, {
     justifyContent: "flex-start"
   }, limitModeSelect, mode === FORM_MODES.HOUR ? singleHourPicker : renderRangePicker(), !!onRangeDelete && !disabled && /*#__PURE__*/React.createElement(S.RemoveIconWrapper, {

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

@@ -15,3 +15,7 @@ export declare type RangeFormProps = {
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
 } & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions'>;
+export declare type RangeFormTexts = {
+    range: React.ReactNode | string;
+    hour: React.ReactNode | string;
+};

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

@@ -165,12 +165,12 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
       var activeDays = _this.state.activeDays;
       var updatedDays = {};
       activeDays.forEach(function (k) {
-        updatedDays[k] = {
+        updatedDays[k] = _objectSpread({}, _this.getDayValue(k), {
           day: k,
           start: dayjs(value[0]).format(TIME_FORMAT),
           stop: dayjs(value[1]).format(TIME_FORMAT),
           restricted: true
-        };
+        });
       });
       onChange(_objectSpread({}, days, {}, updatedDays));
     });

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

@@ -28,6 +28,8 @@ export declare type TimeWindowTexts = {
     clearRange: React.ReactNode | string;
     copyRange: React.ReactNode | string;
     pasteRange: React.ReactNode | string;
+    range: React.ReactNode | string;
+    hour: React.ReactNode | string;
 };
 export declare type TimeWindowProps = {
     days: Days;

package/dist/RawDateRangePicker.d.ts

@@ -12,6 +12,7 @@ export declare class RawDateRangePicker extends React.PureComponent<DateRangePic
             valid: boolean;
         };
         valueTransformer: typeof defaultValueTransformer;
+        isTruncateMs: boolean;
     };
     constructor(props: DateRangePickerProps);
     componentDidUpdate(prevProps: Readonly<Props>): void;
@@ -26,7 +27,7 @@ export declare class RawDateRangePicker extends React.PureComponent<DateRangePic
     getAddons: () => AddonType[];
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "readOnly" | "texts" | "valueFormatOptions" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "valueTransformer" | "arrowColor" | "disableAbsoluteTimepickerInRelative" | "rangePickerInputProps" | "allowedFilterTypes" | "renderPopoverTrigger"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "readOnly" | "texts" | "valueFormatOptions" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "valueTransformer" | "arrowColor" | "disableAbsoluteTimepickerInRelative" | "rangePickerInputProps" | "allowedFilterTypes" | "renderPopoverTrigger" | "isTruncateMs"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<DateRangePickerProps>;

package/dist/RawDateRangePicker.js

@@ -14,6 +14,8 @@ import * as React from 'react';
 import { omitBy, isUndefined } from 'lodash';
 import { injectIntl } from 'react-intl';
 import fnsIsValid from 'date-fns/isValid';
+import fnsStartOfSecond from 'date-fns/startOfSecond';
+import { legacyParse } from '@date-fns/upgrade/v2';
 import { Container, Separator, Addon } from './DateRangePicker.styles';
 import RangePicker from './RangePicker/RangePicker';
 import { RELATIVE, ABSOLUTE, MODES, RELATIVE_PRESETS, ABSOLUTE_PRESETS } from './constants';
@@ -108,7 +110,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
 
       var _this$props = _this.props,
           onValueChange = _this$props.onValueChange,
-          valueTransformer = _this$props.valueTransformer;
+          valueTransformer = _this$props.valueTransformer,
+          isTruncateMs = _this$props.isTruncateMs;
       var _this$state = _this.state,
           value = _this$state.value,
           mode = _this$state.mode;
@@ -116,6 +119,16 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         filter: value.filter
       }));
 
+      if (isTruncateMs) {
+        if (newValue.from !== undefined) {
+          newValue.from = fnsStartOfSecond(legacyParse(newValue.from));
+        }
+
+        if (newValue.to !== undefined) {
+          newValue.to = fnsStartOfSecond(legacyParse(newValue.to));
+        }
+      }
+
       if ((newValue.type === 'RELATIVE' || newValue.key === CONST.ALL_TIME) && mode === MODES.TIME) {
         _this.setState({
           mode: MODES.DATE
@@ -245,13 +258,20 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         var _value$filter, _value$filter2;
 
         var _addonKey = 'filter';
+        var label = value != null && value.filter ? intl.formatMessage({
+          id: "DS.DATE-RANGE-PICKER.FILTER-ENABLED",
+          defaultMessage: 'Filter enabled'
+        }) : intl.formatMessage({
+          id: "DS.DATE-RANGE-PICKER.ADD-FILTER",
+          defaultMessage: 'Add filter'
+        });
         addons.push({
           content: /*#__PURE__*/React.createElement(AddonCollapse, {
             content: /*#__PURE__*/React.createElement(RangeFilterStatus, {
               onFilterRemove: _this.handleRemoveFilterClick,
               filter: value.filter,
               disabled: !value.from || !value.to,
-              label: value != null && value.filter ? 'Filter enabled' : 'Add filter',
+              label: label,
               onClick: _this.handleModalOpenClick
             }),
             title: texts == null ? void 0 : texts.filter,
@@ -396,7 +416,8 @@ _defineProperty(RawDateRangePicker, "defaultProps", {
       valid: true
     };
   },
-  valueTransformer: defaultValueTransformer
+  valueTransformer: defaultValueTransformer,
+  isTruncateMs: true
 });
 
 export default injectIntl(RawDateRangePicker);

package/dist/utils.js

@@ -47,9 +47,9 @@ export var normalizeRange = function normalizeRange(range) {
 
       if (future) {
         left = ADD[offset.type](START_OF[offset.type](now), offset.value);
-        right = ADD[duration.type](END_OF[duration.type](left), duration.value - 1);
+        right = END_OF[duration.type](ADD[duration.type](left, duration.value - 1));
       } else {
-        right = ADD[offset.type](END_OF[rightBoundaryRoundingUnit](now), -offset.value);
+        right = END_OF[rightBoundaryRoundingUnit](ADD[offset.type](now, -offset.value));
         left = ADD[duration.type](START_OF[duration.type](right), 1 - duration.value);
       }
     }
@@ -149,7 +149,9 @@ export var getDefaultTexts = function getDefaultTexts(intl, disableDefault, text
     clearRange: (texts == null ? void 0 : texts.clearRange) || getIntlMessage("DS.DATE-RANGE-PICKER.CLEAR-RANGE", intl, disableDefault),
     copyRange: (texts == null ? void 0 : texts.copyRange) || getIntlMessage("DS.DATE-RANGE-PICKER.COPY-RANGE", intl, disableDefault),
     remove: (texts == null ? void 0 : texts.remove) || getIntlMessage("DS.DATE-RANGE-PICKER.REMOVE", intl, disableDefault),
-    savedFiltersTrigger: (texts == null ? void 0 : texts.savedFiltersTrigger) || getIntlMessage("DS.DATE-RANGE-PICKER.SAVED-FILTERS", intl, disableDefault)
+    savedFiltersTrigger: (texts == null ? void 0 : texts.savedFiltersTrigger) || getIntlMessage("DS.DATE-RANGE-PICKER.SAVED-FILTERS", intl, disableDefault),
+    range: (texts == null ? void 0 : texts.range) || getIntlMessage("DS.DATE-RANGE-PICKER.RANGE", intl, disableDefault),
+    hour: (texts == null ? void 0 : texts.hour) || getIntlMessage("DS.DATE-RANGE-PICKER.HOUR", intl, disableDefault)
   };
 };
 export var DEFAULT_RANGE = normalizeRange({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.21.3",
+  "version": "0.21.5",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -33,12 +33,12 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
-    "@synerise/ds-button": "^0.17.12",
-    "@synerise/ds-date-picker": "^0.9.7",
-    "@synerise/ds-icon": "^0.54.0",
-    "@synerise/ds-manageable-list": "^0.25.1",
-    "@synerise/ds-time-picker": "^0.7.5",
-    "@synerise/ds-tooltip": "^0.13.0",
+    "@synerise/ds-button": "^0.17.14",
+    "@synerise/ds-date-picker": "^0.9.9",
+    "@synerise/ds-icon": "^0.56.0",
+    "@synerise/ds-manageable-list": "^0.25.3",
+    "@synerise/ds-time-picker": "^0.7.7",
+    "@synerise/ds-tooltip": "^0.13.2",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
     "dayjs": "^1.8.35",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "7e4f888ca6bd6fe09c94cccedd7ff9bd5985dc4d"
+  "gitHead": "41163901b144e78a83329029519cb9eb48bf4787"
 }