@synerise/ds-date-range-picker 0.20.1 → 0.20.3

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.20.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.20.2...@synerise/ds-date-range-picker@0.20.3) (2023-03-24)
+
+
+### Bug Fixes
+
+* **date-range-picker:** data format in date range picker usage fix ([0f17e68](https://github.com/Synerise/synerise-design/commit/0f17e68dbdf1d324e939e2dc45f5c5a454dc20f7))
+
+
+
+
+
+## [0.20.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.20.1...@synerise/ds-date-range-picker@0.20.2) (2023-03-22)
+
+
+### Bug Fixes
+
+* **date-range-picker:** display date range for relative ranges fixed ([fedcf35](https://github.com/Synerise/synerise-design/commit/fedcf356e86e5ccb4c82cd4c8bb4b85fc845de5d))
+* **date-range-picker:** exclude date ranges with offset.type 'since' ([a73e689](https://github.com/Synerise/synerise-design/commit/a73e689be1259b4537cb882f544773be38c9a7a6))
+* **date-range-picker:** round relative boundary to smaller unit ([2c47a26](https://github.com/Synerise/synerise-design/commit/2c47a26d528ba6f1845c13840fa3b997f8d5fda3))
+
+
+
+
+
 ## [0.20.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.20.0...@synerise/ds-date-range-picker@0.20.1) (2023-03-21)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/dist/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Props } from './Footer.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "mode" | "value" | "valueFormatOptions" | "message" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply" | "displayDateContainerClass"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "valueFormatOptions" | "format" | "mode" | "value" | "message" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply" | "displayDateContainerClass"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

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

@@ -1,8 +1,13 @@
 import type { TimePickerProps } from '@synerise/ds-time-picker';
+import type { DateToFormatOptions } from '@synerise/ds-data-format';
 import { DateLimitMode } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 export declare type FilterBaseProps = {
     maxEntries?: number;
     valueSelectionMode?: DateLimitMode[];
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     timeFormat?: string;
     timePickerProps?: Partial<TimePickerProps>;
+    valueFormatOptions?: DateToFormatOptions;
 };

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

@@ -26,8 +26,8 @@ var Weekly = function Weekly(_ref) {
       valueSelectionMode = _ref$valueSelectionMo === void 0 ? ['Hour', 'Range'] : _ref$valueSelectionMo,
       _ref$onChange = _ref.onChange,
       onChange = _ref$onChange === void 0 ? NOOP : _ref$onChange,
-      _ref$timeFormat = _ref.timeFormat,
-      timeFormat = _ref$timeFormat === void 0 ? 'HH:mm' : _ref$timeFormat,
+      timeFormat = _ref.timeFormat,
+      valueFormatOptions = _ref.valueFormatOptions,
       value = _ref.value,
       timePickerProps = _ref.timePickerProps,
       disabled = _ref.disabled;
@@ -291,6 +291,7 @@ var Weekly = function Weekly(_ref) {
       renderSuffix: RENDER_EMPTY_NODE_FN,
       timePickerProps: timePickerProps,
       timeFormat: timeFormat,
+      valueFormatOptions: valueFormatOptions,
       disabled: disabled
     });
   }), isAnyDaySelected && !canAddRange && /*#__PURE__*/React.createElement(SelectionHint, {

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

@@ -27,7 +27,8 @@ var RangeForm = function RangeForm(_ref) {
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? valueSelectionModes[0] : _ref$mode,
       timePickerProps = _ref.timePickerProps,
-      texts = _ref.texts;
+      texts = _ref.texts,
+      valueFormatOptions = _ref.valueFormatOptions;
 
   var _useDataFormat = useDataFormat(),
       is12HoursClock = _useDataFormat.is12HoursClock;
@@ -63,9 +64,10 @@ var RangeForm = function RangeForm(_ref) {
       disabledHours: [],
       disabledMinutes: [],
       disabledSeconds: [],
-      use12HourClock: is12HoursClock
+      use12HourClock: is12HoursClock,
+      valueFormatOptions: valueFormatOptions
     }, timePickerProps));
-  }, [start, onExactHourSelect, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock]);
+  }, [start, onExactHourSelect, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock, valueFormatOptions]);
   var renderRangePicker = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
       disabled: disabled,
@@ -81,7 +83,8 @@ var RangeForm = function RangeForm(_ref) {
       disabledHours: getDisabledTimeOptions(start || end, 'HOURS', null, end, is12HoursClock),
       disabledMinutes: getDisabledTimeOptions(start || end, 'MINUTES', null, end, is12HoursClock),
       disabledSeconds: getDisabledTimeOptions(start || end, 'SECONDS', null, end, is12HoursClock),
-      use12HourClock: is12HoursClock
+      use12HourClock: is12HoursClock,
+      valueFormatOptions: valueFormatOptions
     }, timePickerProps)), /*#__PURE__*/React.createElement(S.Separator, null, "-"), /*#__PURE__*/React.createElement(TimePicker, _extends({
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
@@ -98,7 +101,7 @@ var RangeForm = function RangeForm(_ref) {
       disabledSeconds: getDisabledTimeOptions(end || start, 'SECONDS', start, null, is12HoursClock),
       use12HourClock: is12HoursClock
     }, timePickerProps)));
-  }, [start, end, onStartChange, onEndChange, setStart, setEnd, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock]);
+  }, [start, end, onStartChange, onEndChange, setStart, setEnd, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock, valueFormatOptions]);
   var limitModeSelect = React.useMemo(function () {
     return valueSelectionModes.length > 1 ? /*#__PURE__*/React.createElement(Select, {
       value: mode,

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

@@ -14,4 +14,4 @@ export declare type RangeFormProps = {
     onExactHourSelect: (value?: Date) => void;
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
-} & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps'>;
+} & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions'>;

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

@@ -36,7 +36,8 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       onModeChange = _ref.onModeChange,
       timePickerProps = _ref.timePickerProps,
       renderSuffix = _ref.renderSuffix,
-      timeFormat = _ref.timeFormat;
+      timeFormat = _ref.timeFormat,
+      valueFormatOptions = _ref.valueFormatOptions;
   var dayValue = getDayValue(activeDays[0]);
 
   var _React$useState = React.useState((dayValue == null ? void 0 : dayValue.mode) || valueSelectionModes[0] || DEFAULT_LIMIT_MODE),
@@ -103,9 +104,10 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       onExactHourSelect: onExactHourSelect,
       onRangeDelete: onRangeDelete,
       valueSelectionModes: valueSelectionModes,
+      valueFormatOptions: valueFormatOptions,
       timePickerProps: timePickerProps
     });
-  }, [timeFormat, valueSelectionModes, handleModeChange, mode, disabled, dayValue, onRangeDelete, texts, timePickerProps, onStartChange, onEndChange, onExactHourSelect]);
+  }, [timeFormat, valueSelectionModes, handleModeChange, mode, disabled, dayValue, onRangeDelete, texts, timePickerProps, onStartChange, onEndChange, onExactHourSelect, valueFormatOptions]);
   var suffix = React.useMemo(function () {
     return renderSuffix ? renderSuffix() : /*#__PURE__*/React.createElement(RangeActions, {
       onRangeClear: onRangeClear,

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { TimePickerProps } from '@synerise/ds-time-picker';
+import type { DateToFormatOptions } from '@synerise/ds-data-format';
 import { DayKey, RangeActions, TimeWindowProps, TimeWindowTexts } from '../TimeWindow.types';
 import { FilterDefinition, WithDisabledProp } from '../../../RangeFilter.types';
 import { DateLimitMode } from './RangeForm/RangeForm.types';
@@ -15,7 +16,11 @@ export declare type RangeFormContainerProps = {
     onRangeDelete?: () => void;
     valueSelectionModes: DateLimitMode[];
     texts: Partial<TimeWindowTexts>;
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     timeFormat?: string;
+    valueFormatOptions?: DateToFormatOptions;
     timePickerProps?: Partial<TimePickerProps>;
     renderSuffix?: () => React.ReactNode;
 } & Pick<TimeWindowProps, 'monthlyFilter' | 'monthlyFilterPeriod' | 'hideHeader' | 'onChange' | 'days'> & WithDisabledProp & Partial<RangeActions>;

package/dist/RawDateRangePicker.d.ts

@@ -26,7 +26,7 @@ export declare class RawDateRangePicker extends React.PureComponent<DateRangePic
     getAddons: () => AddonType[];
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "readOnly" | "texts" | "format" | "value" | "valueFormatOptions" | "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" | "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" | "renderPopoverTrigger"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<DateRangePickerProps>;

package/dist/utils.js

@@ -37,12 +37,21 @@ export var normalizeRange = function normalizeRange(range) {
         left = ADD[duration.type](offset.value, -duration.value);
         right = offset.value;
       }
-    } else 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);
     } else {
-      right = ADD[offset.type](END_OF[offset.type](now), -offset.value);
-      left = ADD[duration.type](START_OF[duration.type](right), 1 - duration.value);
+      var rightBoundaryRoundingUnit = future ? duration.type : offset.type;
+
+      if (duration.type !== offset.type) {
+        var unitGranularityOrder = ['SECONDS', 'MINUTES', 'HOURS', 'DAYS', 'WEEKS', 'MONTHS', 'YEARS'];
+        rightBoundaryRoundingUnit = unitGranularityOrder.indexOf(duration.type) < unitGranularityOrder.indexOf(offset.type) ? duration.type : offset.type;
+      }
+
+      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);
+      } else {
+        right = ADD[offset.type](END_OF[rightBoundaryRoundingUnit](now), -offset.value);
+        left = ADD[duration.type](START_OF[duration.type](right), 1 - duration.value);
+      }
     }
 
     var _from = fnsMin([left, right]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.20.1",
+  "version": "0.20.3",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
     "@synerise/ds-button": "^0.17.12",
-    "@synerise/ds-date-picker": "^0.9.2",
+    "@synerise/ds-date-picker": "^0.9.3",
     "@synerise/ds-icon": "^0.54.0",
     "@synerise/ds-manageable-list": "^0.24.10",
-    "@synerise/ds-time-picker": "^0.7.1",
+    "@synerise/ds-time-picker": "^0.7.2",
     "@synerise/ds-tooltip": "^0.13.0",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "d8913fe084ae139a15d419477da3b6dac969bd3a"
+  "gitHead": "f6617e99a823599ee63f3d094b81cdbec3a979ea"
 }