@synerise/ds-factors 0.11.9 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.13.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.12.2...@synerise/ds-factors@0.13.0) (2022-04-29)
+
+
+### Features
+
+* **factors:** adds onDeactivate prop, updates Readme.md ([ff85234](https://github.com/Synerise/synerise-design/commit/ff852349a5c77047d6d0642d4b5587dbcc6d24cd))
+* **factors:** adds tests ([8c469e1](https://github.com/Synerise/synerise-design/commit/8c469e164e986f346b591b3a97ed3b6fbab3cdaa))
+
+
+
+
+
+## [0.12.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.12.1...@synerise/ds-factors@0.12.2) (2022-04-12)
+
+
+### Bug Fixes
+
+* fix filter dropdowns ([eaab107](https://github.com/Synerise/synerise-design/commit/eaab107b6dca7401a17c2e36806febd11edc677b))
+
+
+
+
+
+## [0.12.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.12.0...@synerise/ds-factors@0.12.1) (2022-04-08)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
+# [0.12.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.11.9...@synerise/ds-factors@0.12.0) (2022-04-05)
+
+
+### Bug Fixes
+
+* fix eslint errors ([7cce9b9](https://github.com/Synerise/synerise-design/commit/7cce9b94f8dea533b3c36a0f0cfd5145d4737166))
+
+
+### Features
+
+* **filter:** fixes bugs ([b862ddd](https://github.com/Synerise/synerise-design/commit/b862dddbce1293c2a5381663fc903bb574edd135))
+
+
+
+
+
 ## [0.11.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@0.11.8...@synerise/ds-factors@0.11.9) (2022-03-30)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/README.md

@@ -97,23 +97,25 @@ import Factors from '@synerise/ds-factors'
 
 ## API
 
-| Property                  | Description                                                                               | Type                                            | Default   | 
-| ---                       | ---                                                                                       | ---                                             | ---       | 
-| autocompleteText          | Array of available autocomplete suggestions (only if textType is equal to `autocomplete`) | {options: string[]}                             | -         | 
-| availableFactorTypes      | Array of available factor types                                                           | FactorType[]                                    | -         |
-| defaultFactorType         | Default factor type                                                                       | FactorType                                      | -         | 
-| formulaEditor             | Formula editor render in modal when factory type is equal to `formula`                    | React.ReactNode                                 | -         | 
-| onChangeValue             | Callback called when user change value                                                    | (value: FactorValueType) => void                | -         | 
-| opened                    | Whether if dropdown should opens from outside of component                                | boolean                                         | false     | 
-| parameters                | Options for parameters list                                                               | ParameterOptions                                | -         | 
-| selectedFactorType        | Selected factor type                                                                      | FactorType                                      | -         | 
-| setSelectedFactorType     | Callback called when user selects factor type                                             | (factor: FactorType) => void                    | -         | 
-| texts                     | Translations object                                                                       | FactorsTexts                                    | -         | 
-| textType                  | Variant of text type input (`autocomplete` \ `expansible` \ `default` )                   | string                                          | `default` | 
-| unavailableFactorTypes    | Array of excluded factor types                                                            | FactorType[]                                    | -         | 
-| value                     | Value                                                                                     | FactorValueType                                 | -         | 
-| withoutTypeSelector       | Whether if hide factor type selector                                                      | boolean                                         | -         | 
-| getPopupContainerOverride | Popup container function for child tooltips and dropdowns                                 | (trigger: HTMLElement | null) => HTMLElement;   | -       |
+| Property                  | Description                                                                               | Type                                          | Default   | 
+| ---                       | ---                                                                                       | ---                                           | ---       | 
+| autocompleteText          | Array of available autocomplete suggestions (only if textType is equal to `autocomplete`) | {options: string[]}                           | -         | 
+| availableFactorTypes      | Array of available factor types                                                           | FactorType[]                                  | -         | 
+| defaultFactorType         | Default factor type                                                                       | FactorType                                    | -         | 
+| formulaEditor             | Formula editor render in modal when factory type is equal to `formula`                    | React.ReactNode                               | -         | 
+| getPopupContainerOverride | Popup container function for child tooltips and dropdowns                                 | (trigger: HTMLElement \ null) => HTMLElement; | -         | 
+| onActivate                | Callback called when user opens dropdown                                                  | (fieldType: string) => void                   | -         | 
+| onChangeValue             | Callback called when user change value                                                    | (value: FactorValueType) => void              | -         | 
+| onDeactivate              | Callback called when user closes dropdown                                                 | () => void                                    | -         | 
+| opened                    | Whether if dropdown should opens from outside of component                                | boolean                                       | false     | 
+| parameters                | Options for parameters list                                                               | ParameterOptions                              | -         | 
+| selectedFactorType        | Selected factor type                                                                      | FactorType                                    | -         | 
+| setSelectedFactorType     | Callback called when user selects factor type                                             | (factor: FactorType) => void                  | -         | 
+| texts                     | Translations object                                                                       | FactorsTexts                                  | -         | 
+| textType                  | Variant of text type input (`autocomplete` \ `expansible` \ `default` )                   | string                                        | `default` | 
+| unavailableFactorTypes    | Array of excluded factor types                                                            | FactorType[]                                  | -         | 
+| value                     | Value                                                                                     | FactorValueType                               | -         | 
+| withoutTypeSelector       | Whether if hide factor type selector                                                      | boolean                                       | -         |
 
 ### FactorType
 

package/dist/FactorTypeSelector/FactorTypeSelector.styles.js

@@ -8,6 +8,6 @@ export var FactorTypeList = styled(Menu).withConfig({
 export var TriggerButton = styled(Button).withConfig({
   displayName: "FactorTypeSelectorstyles__TriggerButton",
   componentId: "sc-15cv997-1"
-})(["&&&{display:inline-flex;border-radius:3px 0 0 3px;&:focus{.btn-focus{box-shadow:inset 0 0 0 1px ", ";}}}"], function (props) {
+})(["&&&{display:inline-flex;border-radius:3px 0 0 3px;min-width:32px;&:focus{.btn-focus{box-shadow:inset 0 0 0 1px ", ";}}}"], function (props) {
   return props.theme.palette['grey-300'];
 });

package/dist/FactorValue/Date/Date.js

@@ -5,10 +5,16 @@ var DateInput = function DateInput(_ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
       texts = _ref.texts,
-      opened = _ref.opened;
+      opened = _ref.opened,
+      onDeactivate = _ref.onDeactivate;
   var changeHandler = React.useCallback(function (date) {
     onChange(date);
   }, [onChange]);
+  var handleVisibleChange = React.useCallback(function (visible) {
+    if (!visible) {
+      onDeactivate && onDeactivate();
+    }
+  }, [onDeactivate]);
   return /*#__PURE__*/React.createElement(DatePicker, {
     onApply: changeHandler,
     value: value,
@@ -18,7 +24,8 @@ var DateInput = function DateInput(_ref) {
     disabledHours: [],
     disabledMinutes: [],
     disabledSeconds: [],
-    autoFocus: opened
+    autoFocus: opened,
+    onDropdownVisibleChange: handleVisibleChange
   });
 };
 

package/dist/FactorValue/DateRange/DateRange.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { InputProps } from '../../Factors.types';
+declare const DateRangeInput: React.FC<InputProps>;
+export default DateRangeInput;

package/dist/FactorValue/DateRange/DateRange.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import DateRangePicker from '@synerise/ds-date-range-picker';
+import { useIntl } from 'react-intl';
+
+var DateRangeInput = function DateRangeInput(_ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      texts = _ref.texts,
+      onDeactivate = _ref.onDeactivate;
+  var intl = useIntl();
+  var changeHandler = React.useCallback(function (date) {
+    onChange(date);
+  }, [onChange]);
+  var handleVisibleChange = React.useCallback(function (visible) {
+    if (!visible) {
+      onDeactivate && onDeactivate();
+    }
+  }, [onDeactivate]);
+  return /*#__PURE__*/React.createElement(DateRangePicker, {
+    intl: intl,
+    onApply: changeHandler,
+    showTime: true,
+    showFilter: true,
+    value: value,
+    texts: texts.dateRangePicker,
+    relativeFuture: false,
+    relativeModes: ['PAST'],
+    showRelativePicker: true,
+    popoverProps: {
+      placement: 'bottomLeft',
+      onVisibleChange: handleVisibleChange
+    }
+  });
+};
+
+export default DateRangeInput;

package/dist/FactorValue/DynamicKey/DynamicKey.js

@@ -15,7 +15,8 @@ var DynamicKey = function DynamicKey(_ref) {
       _ref$withoutTypeSelec = _ref.withoutTypeSelector,
       withoutTypeSelector = _ref$withoutTypeSelec === void 0 ? false : _ref$withoutTypeSelec,
       texts = _ref.texts,
-      opened = _ref.opened;
+      opened = _ref.opened,
+      onDeactivate = _ref.onDeactivate;
 
   var _React$useState = React.useState({
     key: value.key,
@@ -44,7 +45,8 @@ var DynamicKey = function DynamicKey(_ref) {
     value: localValue.key,
     name: "key",
     onChange: handleChange,
-    autoFocus: opened
+    autoFocus: opened,
+    onBlur: onDeactivate
   }), /*#__PURE__*/React.createElement(RawInput, {
     placeholder: texts.dynamicKey.valuePlaceholder,
     value: localValue.value,

package/dist/FactorValue/FactorValue.js

@@ -19,34 +19,31 @@ var FactorValue = function FactorValue(_ref) {
       factorKey = _ref.factorKey,
       preventAutoloadData = _ref.preventAutoloadData,
       getPopupContainerOverride = _ref.getPopupContainerOverride,
-      onActivate = _ref.onActivate;
+      onActivate = _ref.onActivate,
+      onDeactivate = _ref.onDeactivate;
   var inputType = React.useMemo(function () {
     var InputComponent = selectedFactor.input;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-      // @ts-ignore
-      React.createElement(InputComponent, {
-        key: factorKey + "-" + selectedFactor.name,
-        value: value,
-        placeholder: texts.valuePlaceholder,
-        onChange: onChangeValue,
-        textType: textType,
-        factorType: selectedFactorType,
-        autocompleteText: autocompleteText,
-        parameters: ['parameter', 'contextParameter'].indexOf(selectedFactorType) >= 0 && parameters,
-        withoutTypeSelector: withoutTypeSelector,
-        texts: texts,
-        formulaEditor: formulaEditor,
-        opened: opened,
-        loading: loading,
-        onParamsClick: onParamsClick,
-        preventAutoloadData: preventAutoloadData,
-        getPopupContainerOverride: getPopupContainerOverride,
-        onActivate: onActivate
-      })
-    );
-  }, [selectedFactor.input, selectedFactor.name, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, onActivate, getPopupContainerOverride]);
+    return /*#__PURE__*/React.createElement(InputComponent, {
+      key: factorKey + "-" + selectedFactor.name,
+      value: value,
+      placeholder: texts.valuePlaceholder,
+      onChange: onChangeValue,
+      textType: textType,
+      factorType: selectedFactorType,
+      autocompleteText: autocompleteText,
+      parameters: ['parameter', 'contextParameter'].indexOf(selectedFactorType) >= 0 && parameters,
+      withoutTypeSelector: withoutTypeSelector,
+      texts: texts,
+      formulaEditor: formulaEditor,
+      opened: opened,
+      loading: loading,
+      onParamsClick: onParamsClick,
+      preventAutoloadData: preventAutoloadData,
+      getPopupContainerOverride: getPopupContainerOverride,
+      onActivate: onActivate,
+      onDeactivate: onDeactivate
+    });
+  }, [selectedFactor.input, selectedFactor.name, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate]);
   return /*#__PURE__*/React.createElement(S.FactorInput, {
     withoutTypeSelector: withoutTypeSelector
   }, inputType);

package/dist/FactorValue/Number/NumberInput.js

@@ -6,7 +6,8 @@ var NumberInput = function NumberInput(_ref) {
   var value = _ref.value,
       onChange = _ref.onChange,
       texts = _ref.texts,
-      opened = _ref.opened;
+      opened = _ref.opened,
+      onDeactivate = _ref.onDeactivate;
 
   var _React$useState = React.useState(value),
       localValue = _React$useState[0],
@@ -26,7 +27,8 @@ var NumberInput = function NumberInput(_ref) {
     autoFocus: opened,
     placeholder: texts.valuePlaceholder,
     value: localValue,
-    onChange: handleChange
+    onChange: handleChange,
+    onBlur: onDeactivate
   });
 };
 

package/dist/FactorValue/Parameter/Parameter.js

@@ -22,7 +22,8 @@ var ParameterInput = function ParameterInput(_ref) {
       opened = _ref.opened,
       preventAutoloadData = _ref.preventAutoloadData,
       getPopupContainerOverride = _ref.getPopupContainerOverride,
-      onActivate = _ref.onActivate;
+      onActivate = _ref.onActivate,
+      onDeactivate = _ref.onDeactivate;
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
   // @ts-ignore
@@ -44,9 +45,11 @@ var ParameterInput = function ParameterInput(_ref) {
     onActivate && onActivate();
   }, [onParamsClick, onActivate]);
   React.useEffect(function () {
+    setDropdownVisible(Boolean(opened));
+
     if (opened) {
-      setDropdownVisible(true);
       onParamsClick && onParamsClick();
+      onActivate && onActivate();
     } // eslint-disable-next-line
 
   }, [opened]);
@@ -54,13 +57,18 @@ var ParameterInput = function ParameterInput(_ref) {
     !preventAutoloadData && onParamsClick && onParamsClick(); // eslint-disable-next-line
   }, []);
   var onDropdownVisibilityChange = React.useCallback(function (newValue) {
-    return newValue && onActivate && onActivate();
-  }, [onActivate]);
+    newValue && onActivate && onActivate();
+
+    if (!newValue) {
+      onDeactivate && onDeactivate();
+      setDropdownVisible(false);
+    }
+  }, [onActivate, onDeactivate]);
   return /*#__PURE__*/React.createElement("div", {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Dropdown, {
     visible: dropdownVisible,
-    getPopupContainer: getPopupContainer,
+    getPopupContainer: getPopupContainerOverride || getPopupContainer,
     onVisibleChange: onDropdownVisibilityChange,
     overlay: /*#__PURE__*/React.createElement(ParameterDropdown, _extends({
       setDropdownVisible: setDropdownVisible,

package/dist/FactorValue/Text/Text.js

@@ -15,7 +15,8 @@ var TextInput = function TextInput(_ref) {
       textType = _ref.textType,
       autocompleteText = _ref.autocompleteText,
       factorType = _ref.factorType,
-      opened = _ref.opened;
+      opened = _ref.opened,
+      onDeactivate = _ref.onDeactivate;
 
   var _React$useState = React.useState(false),
       openExpanseEditor = _React$useState[0],
@@ -81,7 +82,8 @@ var TextInput = function TextInput(_ref) {
     placeholder: texts.valuePlaceholder,
     suffix: SuffixIcon,
     value: localValue,
-    onChange: handleChange
+    onChange: handleChange,
+    onBlur: onDeactivate
   })), /*#__PURE__*/React.createElement(TextModal, {
     visible: openExpanseEditor,
     onCancel: function onCancel() {

package/dist/Factors.d.ts

@@ -41,6 +41,11 @@ export declare const factorTypes: {
         name: string;
         input: React.FC<import("./Factors.types").InputProps>;
     };
+    dateRange: {
+        icon: JSX.Element;
+        name: string;
+        input: React.FC<import("./Factors.types").InputProps>;
+    };
 };
 declare const Factors: React.FC<FactorsProps>;
 export default Factors;

package/dist/Factors.js

@@ -16,6 +16,7 @@ import FormulaInput from './FactorValue/Formula/Formula';
 import TextInput from './FactorValue/Text/Text';
 import ParameterInput from './FactorValue/Parameter/Parameter';
 import NumberInput from './FactorValue/Number/NumberInput';
+import DateRangeInput from './FactorValue/DateRange/DateRange';
 export var factorTypes = {
   text: {
     icon: /*#__PURE__*/React.createElement(TextM, null),
@@ -56,6 +57,11 @@ export var factorTypes = {
     icon: /*#__PURE__*/React.createElement(Calendar2M, null),
     name: 'Date',
     input: DateInput
+  },
+  dateRange: {
+    icon: /*#__PURE__*/React.createElement(Calendar2M, null),
+    name: 'Date range',
+    input: DateRangeInput
   }
 }; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
@@ -85,6 +91,7 @@ var Factors = function Factors(_ref) {
       factorKey = _ref.factorKey,
       preventAutoloadData = _ref.preventAutoloadData,
       onActivate = _ref.onActivate,
+      onDeactivate = _ref.onDeactivate,
       getPopupContainerOverride = _ref.getPopupContainerOverride;
 
   var _useIntl = useIntl(),
@@ -92,6 +99,216 @@ var Factors = function Factors(_ref) {
 
   var text = React.useMemo(function () {
     return _objectSpread({
+      dateRangePicker: {
+        after: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.AFTER",
+          defaultMessage: 'after'
+        }),
+        allTime: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.ALL-TIME",
+          defaultMessage: 'Lifetime'
+        }),
+        apply: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.APPLY",
+          defaultMessage: 'Apply'
+        }),
+        before: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.BEFORE",
+          defaultMessage: 'before'
+        }),
+        clear: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.CLEAR",
+          defaultMessage: 'Clear'
+        }),
+        clearRange: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.CLEAR-RANGE",
+          defaultMessage: ' Clear range'
+        }),
+        copyRange: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.COPY-RANGE",
+          defaultMessage: 'Copy range'
+        }),
+        custom: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.CUSTOM",
+          defaultMessage: 'Custom'
+        }),
+        days: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.DAYS",
+          defaultMessage: 'Days'
+        }),
+        emptyDateError: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.EMPTY-DATE-ERROR",
+          defaultMessage: 'Date cannot be empty'
+        }),
+        endDate: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.END-DATE",
+          defaultMessage: 'End date'
+        }),
+        endDatePlaceholder: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.END-DATE-PLACEHOLDER",
+          defaultMessage: 'End date'
+        }),
+        filter: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.FILTER",
+          defaultMessage: 'Date filter'
+        }),
+        hours: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.HOURS",
+          defaultMessage: 'Hours'
+        }),
+        last3Months: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.LAST-3-MONTHS",
+          defaultMessage: 'Last 3 months'
+        }),
+        last6Months: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.LAST-6-MONTHS",
+          defaultMessage: 'Last 6 months'
+        }),
+        last7Days: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.LAST-7-DAYS",
+          defaultMessage: 'Last 7 days'
+        }),
+        last: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.LAST",
+          defaultMessage: 'Last'
+        }),
+        lastMonth: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.LAST-MONTH",
+          defaultMessage: 'Last month'
+        }),
+        lastWeek: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.LAST-WEEK",
+          defaultMessage: 'Last week'
+        }),
+        lastYear: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.LAST-YEAR",
+          defaultMessage: 'Last year'
+        }),
+        minutes: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.MINUTES",
+          defaultMessage: 'Minutes'
+        }),
+        months: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.MONTHS",
+          defaultMessage: 'Months'
+        }),
+        more: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.MORE",
+          defaultMessage: 'More'
+        }),
+        next3Months: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NEXT-3-MONTHS",
+          defaultMessage: 'Next 3 months'
+        }),
+        next6Months: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NEXT-6-MONTHS",
+          defaultMessage: 'Next 6 months'
+        }),
+        next7Days: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NEXT-7-DAYS",
+          defaultMessage: 'Next 7 days'
+        }),
+        next: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NEXT",
+          defaultMessage: 'Next'
+        }),
+        nextMonth: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NEXT-MONTH",
+          defaultMessage: 'Next month'
+        }),
+        nextWeek: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NEXT-WEEK",
+          defaultMessage: 'Next week'
+        }),
+        nextYear: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NEXT-YEAR",
+          defaultMessage: 'Next year'
+        }),
+        now: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.NOW",
+          defaultMessage: 'Now'
+        }),
+        pasteRange: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.PASTE-RANGE",
+          defaultMessage: 'Paste range'
+        }),
+        relativeDateRange: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.RELATIVE-DATE-RANGE",
+          defaultMessage: 'Relative date range'
+        }),
+        remove: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.REMOVE",
+          defaultMessage: 'Remove'
+        }),
+        savedFiltersTrigger: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.SAVED-FILTERS",
+          defaultMessage: 'Saved filters'
+        }),
+        seconds: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.SECONDS",
+          defaultMessage: 'Seconds'
+        }),
+        selectDate: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.SELECT-DATE",
+          defaultMessage: 'Select date'
+        }),
+        selectTime: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.SELECT-TIME",
+          defaultMessage: 'Select time'
+        }),
+        since: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.SINCE",
+          defaultMessage: 'Since'
+        }),
+        startDate: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.START-DATE",
+          defaultMessage: 'Start date'
+        }),
+        startDatePlaceholder: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.START-DATE-PLACEHOLDER",
+          defaultMessage: 'Start date'
+        }),
+        thisMonth: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.THIS-MONTH",
+          defaultMessage: 'This month'
+        }),
+        thisWeek: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.THIS-WEEK",
+          defaultMessage: 'This week'
+        }),
+        timestampLast: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.TIMESTAMP-LAST",
+          defaultMessage: 'Last'
+        }),
+        timestampNext: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.TIMESTAMP-NEXT",
+          defaultMessage: 'Next'
+        }),
+        timestampTill: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.TIMESTAMP-TILL",
+          defaultMessage: 'till'
+        }),
+        today: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.TODAY",
+          defaultMessage: 'Today'
+        }),
+        tomorrow: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.TOMORROW",
+          defaultMessage: 'Tomorrow'
+        }),
+        weeks: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.WEEKS",
+          defaultMessage: 'Weeks'
+        }),
+        years: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.YEARS",
+          defaultMessage: 'Years'
+        }),
+        yesterday: formatMessage({
+          id: "DS.DATE-RANGE-PICKER.YESTERDAY",
+          defaultMessage: 'Yesterday'
+        })
+      },
       datePicker: {
         apply: formatMessage({
           id: 'DS.FACTORS.DATE_PICKER.APPLY',
@@ -196,7 +413,8 @@ var Factors = function Factors(_ref) {
     factorKey: factorKey,
     preventAutoloadData: preventAutoloadData,
     getPopupContainerOverride: getPopupContainerOverride,
-    onActivate: onActivate
+    onActivate: onActivate,
+    onDeactivate: onDeactivate
   }));
 };
 

package/dist/Factors.types.d.ts

@@ -1,5 +1,7 @@
 import * as React from 'react';
-export declare const ALL_FACTOR_TYPES: readonly ["text", "number", "parameter", "contextParameter", "dynamicKey", "formula", "array", "date"];
+import { DateFilter } from '@synerise/ds-date-range-picker/dist/date.types';
+import { Texts as DateRangeTexts } from '@synerise/ds-date-range-picker/dist/DateRangePicker.types';
+export declare const ALL_FACTOR_TYPES: readonly ["text", "number", "parameter", "contextParameter", "dynamicKey", "formula", "array", "date", "dateRange"];
 export declare type FactorType = typeof ALL_FACTOR_TYPES[number] | string;
 export declare type DynamicKeyValueType = {
     key: React.ReactText;
@@ -29,13 +31,14 @@ export declare type ParameterItem = {
     groupId: React.ReactText;
     icon?: React.ReactNode;
 };
-export declare type FactorValueType = string | number | Date | undefined | DynamicKeyValueType | FormulaValueType | ParameterValueType;
+export declare type FactorValueType = string | number | Date | undefined | DynamicKeyValueType | FormulaValueType | ParameterValueType | Partial<DateFilter>;
 export declare type SelectedFactorType = {
     name: string;
     icon: React.ReactNode;
-    input: React.ReactNode;
+    input: React.ElementType;
 };
 export declare type FactorsTexts = {
+    dateRangePicker: DateRangeTexts;
     datePicker: {
         apply: string;
         clearTooltip: string;
@@ -70,6 +73,7 @@ export declare type FactorsProps = {
     defaultFactorType: FactorType;
     getPopupContainerOverride?: (trigger: HTMLElement | null) => HTMLElement;
     onActivate?: () => void;
+    onDeactivate?: () => void;
     onChangeValue: (value: FactorValueType) => void;
     value: FactorValueType;
     textType?: 'autocomplete' | 'expansible' | 'default' | string;
@@ -95,11 +99,11 @@ export declare type FactorTypeSelectorProps = Pick<FactorsProps, 'unavailableFac
     setSelectedFactorType: (factor: FactorType) => void;
     selectedFactor: SelectedFactorType;
 };
-export declare type FactorValueProps = Pick<FactorsProps, 'onChangeValue' | 'onParamsClick' | 'value' | 'selectedFactorType' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'formulaEditor' | 'opened' | 'loading' | 'factorKey' | 'preventAutoloadData' | 'getPopupContainerOverride' | 'onActivate'> & {
+export declare type FactorValueProps = Pick<FactorsProps, 'onChangeValue' | 'onParamsClick' | 'value' | 'selectedFactorType' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'formulaEditor' | 'opened' | 'loading' | 'factorKey' | 'preventAutoloadData' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate'> & {
     texts: FactorsTexts;
     selectedFactor: SelectedFactorType;
 };
-export declare type InputProps = Pick<FactorsProps, 'value' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate'> & {
+export declare type InputProps = Pick<FactorsProps, 'value' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate'> & {
     texts: FactorsTexts;
     onChange: (value: FactorValueType) => void;
     factorType: FactorType;

package/dist/Factors.types.js

@@ -1 +1 @@
-export var ALL_FACTOR_TYPES = ['text', 'number', 'parameter', 'contextParameter', 'dynamicKey', 'formula', 'array', 'date'];
+export var ALL_FACTOR_TYPES = ['text', 'number', 'parameter', 'contextParameter', 'dynamicKey', 'formula', 'array', 'date', 'dateRange'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "0.11.9",
+  "version": "0.13.0",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -32,19 +32,20 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^0.4.8",
-    "@synerise/ds-badge": "^0.6.1",
+    "@synerise/ds-autocomplete": "^0.4.10",
+    "@synerise/ds-badge": "^0.6.3",
     "@synerise/ds-button": "^0.17.2",
-    "@synerise/ds-date-picker": "^0.6.15",
-    "@synerise/ds-dropdown": "^0.17.15",
+    "@synerise/ds-date-picker": "^0.6.17",
+    "@synerise/ds-date-range-picker": "^0.12.13",
+    "@synerise/ds-dropdown": "^0.17.17",
     "@synerise/ds-icon": "^0.49.0",
-    "@synerise/ds-inline-edit": "^0.6.9",
+    "@synerise/ds-inline-edit": "^0.6.12",
     "@synerise/ds-input": "^0.18.10",
-    "@synerise/ds-input-number": "^0.6.8",
+    "@synerise/ds-input-number": "^0.6.10",
     "@synerise/ds-menu": "^0.13.2",
     "@synerise/ds-modal": "^0.15.9",
     "@synerise/ds-result": "^0.6.9",
-    "@synerise/ds-tabs": "^0.13.9",
+    "@synerise/ds-tabs": "^0.13.11",
     "@synerise/ds-typography": "^0.12.2",
     "@synerise/ds-utils": "^0.19.0",
     "classnames": "^2.2.6",
@@ -54,5 +55,5 @@
     "@synerise/ds-core": "*",
     "react": ">=16.9.0 < 17.0.0"
   },
-  "gitHead": "93d7c60a7fe73188d715fd52b9701f81fcb4e60a"
+  "gitHead": "4a658911645846d1e329609ba9db06a7bc64962b"
 }