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

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.20.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.20.3...@synerise/ds-date-range-picker@0.20.4) (2023-03-28)
+
+
+### Bug Fixes
+
+* **date-range-picker:** add allowedFilterTypes prop to DateRangePicker ([1be368e](https://github.com/Synerise/synerise-design/commit/1be368e03cb7f4224ed604c3c539a2385510d9ff))
+* **date-range-picker:** add default labels ([f9e8990](https://github.com/Synerise/synerise-design/commit/f9e899009d9eac4fba86ca8ed99704b2ad334b9d))
+* **date-range-picker:** allow range type buttons to be optional ([6d3e723](https://github.com/Synerise/synerise-design/commit/6d3e723b3324c3c73bcb29944211508de0069d87))
+* **date-range-picker:** change allowed filter types to string array ([4fbdca0](https://github.com/Synerise/synerise-design/commit/4fbdca055e576f2aaa115a2a2ebd403d4937e05c))
+* **date-range-picker:** fix monthly filter clipping ([20a205f](https://github.com/Synerise/synerise-design/commit/20a205fb892fd2bbeaf1d3f5f93641fe759f8dfe))
+* **date-range-picker:** fix vert align for 2nd select in monthly filter ([be25040](https://github.com/Synerise/synerise-design/commit/be25040b25378118290abfb85a888bb317501235))
+* **date-range-picker:** fix vertical alignment in monthly range filter ([b673345](https://github.com/Synerise/synerise-design/commit/b6733451ad42766f6a29e128969f531bbd7bd233))
+* **date-range-picker:** monthly filter dropdowns display current value ([3c70725](https://github.com/Synerise/synerise-design/commit/3c707252c0d6ef0899cfa60184356e084b56f1d6))
+
+
+
+
+
 ## [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)
 
 

package/dist/DateRangePicker.types.d.ts

@@ -64,6 +64,7 @@ export interface DateRangePickerProps extends WrappedComponentProps {
     arrowColor?: AdditionalMapper;
     disableAbsoluteTimepickerInRelative?: boolean;
     rangePickerInputProps?: RangePickerInputProps;
+    allowedFilterTypes?: string[];
     renderPopoverTrigger?: (...args: any) => JSX.Element;
 }
 /**

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

@@ -219,6 +219,9 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
           }
         };
       });
+      var daysOfPeriodValue = (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS).find(function (period) {
+        return (item == null ? void 0 : item.period) === period.value;
+      });
       return /*#__PURE__*/React.createElement(S.Select, {
         disabled: disabled,
         expanded: false,
@@ -234,9 +237,15 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
           id: (daysOfPeriods || DEFAULT_DAYS_OF_PERIODS)[0].translationKey
         }),
         input: {
+          value: daysOfPeriodValue ? intl.formatMessage({
+            id: daysOfPeriodValue == null ? void 0 : daysOfPeriodValue.translationKey
+          }) : undefined,
           name: 'days-of-period',
           maxLength: 120
         },
+        inputStyle: {
+          display: 'flex'
+        },
         dataSource: dataSource,
         size: "small"
       });
@@ -265,6 +274,9 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
           }
         };
       });
+      var countedFromValue = (countedFromPeriods || DEFAULT_COUNTED_FROM).find(function (i) {
+        return (item == null ? void 0 : item.periodType) === i.value;
+      });
       return /*#__PURE__*/React.createElement(S.Select, {
         disabled: disabled,
         expanded: false,
@@ -280,9 +292,16 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
           id: (countedFromPeriods || DEFAULT_COUNTED_FROM)[0].translationKey
         }),
         input: {
+          value: countedFromValue ? intl.formatMessage({
+            id: countedFromValue == null ? void 0 : countedFromValue.translationKey,
+            defaultMessage: item == null ? void 0 : item.periodType
+          }) : undefined,
           name: 'counted-from-select',
           maxLength: 120
         },
+        inputStyle: {
+          display: 'flex'
+        },
         dataSource: dataSource,
         size: "small"
       });
@@ -347,6 +366,7 @@ var MonthlyFilter = /*#__PURE__*/function (_React$PureComponent) {
             id: "DS.DATE-RANGE-PICKER.COUNTED-FROM",
             defaultMessage: "counted from"
           }), 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,

package/dist/RangeFilter/RangeFilter.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { RangeFilterProps } from './RangeFilter.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<RangeFilterProps, "onChange" | "valueSelectionModes" | "texts" | "value" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "hideFooter" | "onCancel"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<RangeFilterProps, "onChange" | "valueSelectionModes" | "texts" | "value" | "rangeUnits" | "onApply" | "onFilterSave" | "savedFilters" | "allowedFilterTypes" | "hideFooter" | "onCancel"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<RangeFilterProps>;

package/dist/RangeFilter/RangeFilter.js

@@ -24,16 +24,28 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(RangeFilter, _React$PureComponent);
 
   function RangeFilter(props) {
-    var _props$value, _this$state;
+    var _props$allowedFilterT, _props$value, _props$value2, _props$value3, _this$state;
 
     var _this;
 
     _this = _React$PureComponent.call(this, props) || this;
 
-    _defineProperty(_assertThisInitialized(_this), "handleApply", function () {
+    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function () {
       var _assertThisInitialize = _assertThisInitialized(_this),
           state = _assertThisInitialize.state;
 
+      var allowedFilterTypes = _this.props.allowedFilterTypes;
+      var activeType = state.activeType;
+
+      if (allowedFilterTypes != null && allowedFilterTypes.length && !allowedFilterTypes.includes(activeType)) {
+        _this.handleTypeChange(allowedFilterTypes[0]);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleApply", function () {
+      var _assertThisInitialize2 = _assertThisInitialized(_this),
+          state = _assertThisInitialize2.state;
+
       var onApply = _this.props.onApply;
       var activeType = state.activeType;
       var filter = state[String(activeType)];
@@ -48,8 +60,8 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "handleTypeChange", function (type) {
       var _this$setState;
 
-      var _assertThisInitialize2 = _assertThisInitialized(_this),
-          state = _assertThisInitialize2.state;
+      var _assertThisInitialize3 = _assertThisInitialized(_this),
+          state = _assertThisInitialize3.state;
 
       var previousValue = state[type];
       var previousDefinition = previousValue == null ? void 0 : previousValue.definition;
@@ -70,8 +82,8 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleFilterSave", function (filterName) {
-      var _assertThisInitialize3 = _assertThisInitialized(_this),
-          state = _assertThisInitialize3.state;
+      var _assertThisInitialize4 = _assertThisInitialized(_this),
+          state = _assertThisInitialize4.state;
 
       var activeType = state.activeType;
       var _this$props = _this.props,
@@ -108,7 +120,9 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
       }, _this$setState2[selected.type] = selected, _this$setState2));
     });
 
-    var valueType = props == null ? void 0 : (_props$value = props.value) == null ? void 0 : _props$value.type; // eslint-disable-next-line react/state-in-constructor
+    var _allowedFilterTypes = props != null && (_props$allowedFilterT = props.allowedFilterTypes) != null && _props$allowedFilterT.length ? props == null ? void 0 : props.allowedFilterTypes : Object.keys(TYPES);
+
+    var valueType = props != null && (_props$value = props.value) != null && _props$value.type && _allowedFilterTypes.includes(props == null ? void 0 : (_props$value2 = props.value) == null ? void 0 : _props$value2.type) ? props == null ? void 0 : (_props$value3 = props.value) == null ? void 0 : _props$value3.type : _allowedFilterTypes[0]; // eslint-disable-next-line react/state-in-constructor
 
     _this.state = (_this$state = {
       activeType: valueType
@@ -133,7 +147,12 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
         onFilterSave = _this$props3.onFilterSave,
         texts = _this$props3.texts,
         hideFooter = _this$props3.hideFooter,
-        valueSelectionModes = _this$props3.valueSelectionModes;
+        valueSelectionModes = _this$props3.valueSelectionModes,
+        allowedFilterTypes = _this$props3.allowedFilterTypes;
+    var buttonSource = allowedFilterTypes != null && allowedFilterTypes.length ? allowedFilterTypes : Object.values(TYPES);
+    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'
@@ -143,10 +162,10 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
       onFilterRemove: this.handleSavedFilterRemove,
       label: texts == null ? void 0 : texts.savedFiltersTrigger,
       removeTooltip: texts == null ? void 0 : texts.remove
-    })), /*#__PURE__*/React.createElement(S.Body, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+    })), /*#__PURE__*/React.createElement(S.Body, null, buttonSource.length > 1 && /*#__PURE__*/React.createElement(ButtonGroup, {
       fullWidth: true,
       size: "large"
-    }, Object.values(TYPES).map(function (key) {
+    }, buttonSource.map(function (key) {
       return /*#__PURE__*/React.createElement(Button, {
         key: key,
         type: activeType === key ? 'primary' : undefined,
@@ -154,7 +173,8 @@ var RangeFilter = /*#__PURE__*/function (_React$PureComponent) {
           return _this2.handleTypeChange(key);
         }
       }, intl.formatMessage({
-        id: TYPES_DATA[key].labelTranslationKey
+        id: TYPES_DATA[key].labelTranslationKey,
+        defaultMessage: TYPES_DATA[key].defaultLabel
       }));
     })), /*#__PURE__*/React.createElement(S.MainComponentWrapper, null, Component && /*#__PURE__*/React.createElement(Component, {
       intl: intl,

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

@@ -18,6 +18,7 @@ export declare type RangeFilterProps = {
     savedFilters?: SavedFilter[];
     onFilterSave?: (filters: SavedFilter[]) => void;
     texts?: Texts;
+    allowedFilterTypes?: string[];
     valueSelectionModes?: DateLimitMode[];
     rangeUnits?: Pick<DateRangePickerProps, 'rangeUnits'>;
 };

package/dist/RangeFilter/constants.d.ts

@@ -23,6 +23,7 @@ export declare const defaultId: string;
 export declare const TYPES_DATA: {
     MONTHLY: {
         labelTranslationKey: string;
+        defaultLabel: string;
         component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/MonthlyFilter/MonthlyFilter.types").MonthlyFilterProps, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "disabled" | "value" | "maxEntries" | "daysOfPeriods" | "countedFromPeriods"> & {
             forwardedRef?: ((instance: any) => void) | import("react").RefObject<any> | null | undefined;
         } & import("react").RefAttributes<any>> & {
@@ -37,11 +38,13 @@ export declare const TYPES_DATA: {
     };
     WEEKLY: {
         labelTranslationKey: string;
+        defaultLabel: string;
         component: ({ value, onChange, onRangeClear, onRangePaste, onRangeCopy, rangeClipboard, intl, valueSelectionModes, texts, }: import("./Filters/WeeklyFilter/WeeklyFilter.types").WeeklyFilterProps) => JSX.Element;
         definition: {};
     };
     DAILY: {
         labelTranslationKey: string;
+        defaultLabel: string;
         component: import("react").ForwardRefExoticComponent<Pick<import("./Filters/DailyFilter/DailyFilter").Props, "onChange" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "valueSelectionModes" | "texts" | "disabled" | "value"> & {
             forwardedRef?: ((instance: any) => void) | import("react").RefObject<any> | null | undefined;
         } & import("react").RefAttributes<any>> & {

package/dist/RangeFilter/constants.js

@@ -50,6 +50,7 @@ export var defaultId = uuid();
 export var TYPES_DATA = {
   MONTHLY: {
     labelTranslationKey: 'DS.DATE-RANGE-PICKER.MONTHLY',
+    defaultLabel: 'Monthly',
     component: MonthlyFilter,
     definition: [{
       period: DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH,
@@ -60,11 +61,13 @@ export var TYPES_DATA = {
   },
   WEEKLY: {
     labelTranslationKey: 'DS.DATE-RANGE-PICKER.WEEKLY',
+    defaultLabel: 'Weekly',
     component: WeeklyFilter,
     definition: {}
   },
   DAILY: {
     labelTranslationKey: 'DS.DATE-RANGE-PICKER.DAILY',
+    defaultLabel: 'Daily',
     component: DailyFilter,
     definition: {
       start: DEFAULT_RANGE_START,

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" | "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"> & {
+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"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<DateRangePickerProps>;

package/dist/RawDateRangePicker.js

@@ -302,6 +302,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
         _this$props4$containe = _this$props4.containerClass,
         containerClass = _this$props4$containe === void 0 ? 'ds-date-range-picker' : _this$props4$containe,
         footerProps = _this$props4.footerProps,
+        allowedFilterTypes = _this$props4.allowedFilterTypes,
         _this$props4$disableA = _this$props4.disableAbsoluteTimepickerInRelative,
         disableAbsoluteTimepickerInRelative = _this$props4$disableA === void 0 ? false : _this$props4$disableA;
     var _this$state3 = this.state,
@@ -326,6 +327,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       onCancel: this.handleFilterCancel,
       onApply: this.handleFilterApply,
       savedFilters: savedFilters,
+      allowedFilterTypes: allowedFilterTypes,
       onFilterSave: onFilterSave
     }));
     var validator = validate ? validate(value) : {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.20.3",
+  "version": "0.20.4",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -36,7 +36,7 @@
     "@synerise/ds-button": "^0.17.12",
     "@synerise/ds-date-picker": "^0.9.3",
     "@synerise/ds-icon": "^0.54.0",
-    "@synerise/ds-manageable-list": "^0.24.10",
+    "@synerise/ds-manageable-list": "^0.24.11",
     "@synerise/ds-time-picker": "^0.7.2",
     "@synerise/ds-tooltip": "^0.13.0",
     "@synerise/ds-utils": "^0.19.0",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "f6617e99a823599ee63f3d094b81cdbec3a979ea"
+  "gitHead": "68778b33000a395c36159c186b5e2a6392a1b375"
 }