@synerise/ds-factors 1.1.13 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.1.14...@synerise/ds-factors@1.2.0) (2025-06-05)
+
+
+### Features
+
+* **factors:** relative date type ([e3d17f1](https://github.com/Synerise/synerise-design/commit/e3d17f18350044322c06c6b51263d69f97ee7dba))
+
+
+
+
+
+## [1.1.14](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.1.13...@synerise/ds-factors@1.1.14) (2025-06-03)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
 ## [1.1.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.1.12...@synerise/ds-factors@1.1.13) (2025-06-02)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/dist/FactorValue/FactorValue.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { FactorValueProps } from '../Factors.types';
-declare const FactorValue: ({ selectedFactorType, value, onChangeValue, onParamsClick, selectedFactor, textType, parameters, autocompleteText, withoutTypeSelector, texts, formulaEditor, opened, loading, factorKey, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, inputProps, allowClear, readOnly, getMenuEntryProps, }: FactorValueProps) => React.JSX.Element;
+declare const FactorValue: ({ selectedFactorType, value, onChangeValue, onParamsClick, selectedFactor, textType, parameters, autocompleteText, withoutTypeSelector, texts, formulaEditor, opened, loading, factorKey, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, inputProps, allowClear, readOnly, getMenuEntryProps, relativeDateProps, }: FactorValueProps) => React.JSX.Element;
 export default FactorValue;

package/dist/FactorValue/FactorValue.js

@@ -1,3 +1,4 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from 'react';
 import * as S from './FactorValue.style';
 var FactorValue = function FactorValue(_ref) {
@@ -25,13 +26,14 @@ var FactorValue = function FactorValue(_ref) {
     allowClear = _ref.allowClear,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    getMenuEntryProps = _ref.getMenuEntryProps;
+    getMenuEntryProps = _ref.getMenuEntryProps,
+    relativeDateProps = _ref.relativeDateProps;
   var inputType = React.useMemo(function () {
     if (!selectedFactor) {
       return undefined;
     }
     var FactorValueComponent = selectedFactor.component;
-    return /*#__PURE__*/React.createElement(FactorValueComponent, {
+    return /*#__PURE__*/React.createElement(FactorValueComponent, _extends({
       key: factorKey + "-" + selectedFactor.name,
       value: value
       // placeholder={texts.valuePlaceholder}
@@ -43,7 +45,6 @@ var FactorValue = function FactorValue(_ref) {
       parameters: ['parameter', 'contextParameter'].indexOf(selectedFactorType) >= 0 ? parameters : undefined,
       withoutTypeSelector: withoutTypeSelector,
       texts: texts,
-      inputProps: inputProps,
       formulaEditor: formulaEditor,
       opened: opened,
       loading: loading,
@@ -55,9 +56,10 @@ var FactorValue = function FactorValue(_ref) {
       error: error,
       allowClear: allowClear,
       readOnly: readOnly,
-      getMenuEntryProps: getMenuEntryProps
-    });
-  }, [selectedFactor, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, inputProps, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, allowClear, readOnly, getMenuEntryProps]);
+      getMenuEntryProps: getMenuEntryProps,
+      inputProps: inputProps
+    }, relativeDateProps));
+  }, [selectedFactor, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, inputProps, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, allowClear, readOnly, getMenuEntryProps, relativeDateProps]);
   return /*#__PURE__*/React.createElement(S.FactorInput, {
     inputType: selectedFactorType,
     inputTextType: textType,

package/dist/FactorValue/RelativeDate/RelativeDate.const.d.ts

@@ -0,0 +1,6 @@
+import { RelativeDateUnit, RelativeTimeRelation } from '../../Factors.types';
+export declare const INTERVALS: RelativeDateUnit[];
+export declare const BEFORE: RelativeTimeRelation;
+export declare const AFTER: RelativeTimeRelation;
+export declare const TIME_RELATIONS: ("BEFORE" | "AFTER")[];
+export declare const DEFAULT_VALUE = 1;

package/dist/FactorValue/RelativeDate/RelativeDate.const.js

@@ -0,0 +1,5 @@
+export var INTERVALS = ['SECONDS', 'MINUTES', 'HOURS', 'DAYS', 'WEEKS', 'MONTHS', 'YEARS'];
+export var BEFORE = 'BEFORE';
+export var AFTER = 'AFTER';
+export var TIME_RELATIONS = [BEFORE, AFTER];
+export var DEFAULT_VALUE = 1;

package/dist/FactorValue/RelativeDate/RelativeDate.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { FactorValueComponentProps } from '../../Factors.types';
+declare const RelativeDateInput: ({ value, onChange, texts: allTexts, opened, onDeactivate, onActivate, error, allowClear, readOnly, triggerValueFormatter, getPopupContainerOverride, availableUnits, }: FactorValueComponentProps) => React.JSX.Element;
+export default RelativeDateInput;

package/dist/FactorValue/RelativeDate/RelativeDate.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTheme } from '@synerise/ds-core';
+import { getPopupContainer } from '@synerise/ds-utils';
+import Dropdown from '@synerise/ds-dropdown';
+import Icon, { AngleDownS, Close3S } from '@synerise/ds-icon';
+import { RelativeDateDropdown } from './RelativeDateDropdown';
+import * as S from './RelativeDateDropdown.styles';
+import { defaultTriggerModifier } from './RelativeDate.utils';
+var RelativeDateInput = function RelativeDateInput(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    allTexts = _ref.texts,
+    opened = _ref.opened,
+    onDeactivate = _ref.onDeactivate,
+    onActivate = _ref.onActivate,
+    error = _ref.error,
+    allowClear = _ref.allowClear,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    triggerValueFormatter = _ref.triggerValueFormatter,
+    getPopupContainerOverride = _ref.getPopupContainerOverride,
+    availableUnits = _ref.availableUnits;
+  var _useState = useState(opened),
+    isOpen = _useState[0],
+    setIsOpen = _useState[1];
+  var _useState2 = useState(value),
+    localValue = _useState2[0],
+    setLocalValue = _useState2[1];
+  var theme = useTheme();
+  var texts = allTexts.relativeDate;
+  useEffect(function () {
+    setLocalValue(value);
+  }, [value]);
+  var handleOpenChange = useCallback(function (open) {
+    if (!open) {
+      onDeactivate && onDeactivate();
+    } else {
+      onActivate && onActivate();
+    }
+    setIsOpen(open);
+  }, [onActivate, onDeactivate]);
+  var handleApply = useCallback(function (date) {
+    onChange(date);
+    handleOpenChange(false);
+  }, [onChange, handleOpenChange]);
+  var handleClear = useCallback(function () {
+    onChange(undefined);
+  }, [onChange]);
+  var handleOpen = useCallback(function () {
+    setIsOpen(true);
+  }, []);
+  var handleClose = useCallback(function () {
+    setIsOpen(false);
+  }, []);
+  var triggerValue = useMemo(function () {
+    if (!localValue) {
+      return undefined;
+    }
+    return triggerValueFormatter ? triggerValueFormatter(localValue) : defaultTriggerModifier(localValue, texts);
+  }, [texts, localValue, triggerValueFormatter]);
+  var icon = useMemo(function () {
+    if (!localValue || !allowClear) return /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(AngleDownS, null),
+      onClick: handleOpen
+    });
+    return /*#__PURE__*/React.createElement(S.IconWrapper, null, /*#__PURE__*/React.createElement(S.ChevronIcon, {
+      onClick: handleOpen,
+      component: /*#__PURE__*/React.createElement(AngleDownS, null)
+    }), /*#__PURE__*/React.createElement(S.ClearIcon, {
+      onClick: handleClear,
+      color: theme.palette['red-600'],
+      component: /*#__PURE__*/React.createElement(Close3S, null)
+    }));
+  }, [localValue, allowClear, handleClear, handleOpen, theme.palette]);
+  var trigger = useMemo(function () {
+    return /*#__PURE__*/React.createElement(S.Trigger, {
+      "data-testid": "ds-factors-relative-date-trigger",
+      error: error,
+      readOnly: true,
+      autoResize: {
+        minWidth: '123px',
+        stretchToFit: true
+      },
+      autoResizeProps: {
+        placeholderIsMinWidth: true
+      },
+      placeholder: texts.triggerPlaceholder,
+      value: triggerValue,
+      icon1: !readOnly ? icon : undefined
+    });
+  }, [error, triggerValue, readOnly, icon, texts.triggerPlaceholder]);
+  return readOnly ? trigger : /*#__PURE__*/React.createElement(Dropdown, {
+    getPopupContainer: getPopupContainerOverride || getPopupContainer,
+    open: isOpen,
+    onOpenChange: handleOpenChange,
+    dropdownRender: function dropdownRender() {
+      return /*#__PURE__*/React.createElement(RelativeDateDropdown, {
+        onApply: handleApply,
+        onCancel: handleClose,
+        value: localValue,
+        texts: texts,
+        availableUnits: availableUnits
+      });
+    }
+  }, trigger);
+};
+export default RelativeDateInput;

package/dist/FactorValue/RelativeDate/RelativeDate.utils.d.ts

@@ -0,0 +1,3 @@
+import type { RelativeDateFactorTexts, RelativeDateValueType } from '../../Factors.types';
+export declare const getTranslation: (texts: RelativeDateFactorTexts, key: string) => string;
+export declare const defaultTriggerModifier: (value: RelativeDateValueType, texts: RelativeDateFactorTexts) => string;

package/dist/FactorValue/RelativeDate/RelativeDate.utils.js

@@ -0,0 +1,8 @@
+export var getTranslation = function getTranslation(texts, key) {
+  return key.toLocaleLowerCase() in texts ? texts[key.toLocaleLowerCase()] : key;
+};
+export var defaultTriggerModifier = function defaultTriggerModifier(value, texts) {
+  var relation = value.temporalModifier < 0 ? texts.before : texts.after;
+  var absValue = Math.abs(value.temporalModifier);
+  return absValue + " " + getTranslation(texts, value.temporalUnit).toLocaleLowerCase() + " " + relation.toLocaleLowerCase() + " " + texts.currentDatetime;
+};

package/dist/FactorValue/RelativeDate/RelativeDateDropdown.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { RelativeDateFactorTexts, RelativeDateUnit, RelativeDateValueType } from '../../Factors.types';
+type RelativeDateDropdownProps = {
+    value?: RelativeDateValueType;
+    texts: RelativeDateFactorTexts;
+    onApply: (value: RelativeDateValueType) => void;
+    onCancel: () => void;
+    availableUnits?: RelativeDateUnit[];
+};
+export declare const RelativeDateDropdown: ({ onApply, onCancel, value: relativeDateValue, texts, availableUnits, }: RelativeDateDropdownProps) => React.JSX.Element;
+export {};

package/dist/FactorValue/RelativeDate/RelativeDateDropdown.js

@@ -0,0 +1,97 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import Button from '@synerise/ds-button';
+import { InputGroup } from '@synerise/ds-input';
+import Select from '@synerise/ds-select/dist/Select';
+import InputNumber from '@synerise/ds-input-number';
+import { AFTER, BEFORE, DEFAULT_VALUE, INTERVALS, TIME_RELATIONS } from './RelativeDate.const';
+import * as S from './RelativeDateDropdown.styles';
+import { getTranslation } from './RelativeDate.utils';
+var getRelationForModifier = function getRelationForModifier(value) {
+  return value < 0 ? BEFORE : AFTER;
+};
+export var RelativeDateDropdown = function RelativeDateDropdown(_ref) {
+  var onApply = _ref.onApply,
+    onCancel = _ref.onCancel,
+    relativeDateValue = _ref.value,
+    texts = _ref.texts,
+    availableUnits = _ref.availableUnits;
+  var defaultTimeRelation = relativeDateValue ? getRelationForModifier(relativeDateValue.temporalModifier) : BEFORE;
+  var defaultTemporalUnit = (relativeDateValue == null ? void 0 : relativeDateValue.temporalUnit) || (availableUnits != null && availableUnits.length ? availableUnits : INTERVALS)[0];
+  var defaultModifier = Math.abs((relativeDateValue == null ? void 0 : relativeDateValue.temporalModifier) || DEFAULT_VALUE);
+  var _useState = useState(defaultTimeRelation),
+    timeRelation = _useState[0],
+    setTimeRelation = _useState[1];
+  var _useState2 = useState(defaultTemporalUnit),
+    temporalUnit = _useState2[0],
+    setTemporalUnit = _useState2[1];
+  var _useState3 = useState(defaultModifier),
+    temporalModifier = _useState3[0],
+    setTemporalModifier = _useState3[1];
+  useEffect(function () {
+    setTimeRelation(relativeDateValue ? getRelationForModifier(relativeDateValue.temporalModifier) : BEFORE);
+    setTemporalUnit((relativeDateValue == null ? void 0 : relativeDateValue.temporalUnit) || INTERVALS[0]);
+    setTemporalModifier(Math.abs((relativeDateValue == null ? void 0 : relativeDateValue.temporalModifier) || DEFAULT_VALUE));
+  }, [relativeDateValue]);
+  var isApplyEnabled = temporalModifier && temporalUnit !== undefined;
+  var handleApply = function handleApply() {
+    var finalModifier = timeRelation === BEFORE ? -temporalModifier : temporalModifier;
+    isApplyEnabled && onApply({
+      temporalModifier: finalModifier,
+      temporalUnit: temporalUnit
+    });
+  };
+  var temporalUnitOptions = useMemo(function () {
+    return (availableUnits != null && availableUnits.length ? availableUnits : INTERVALS).map(function (intervalOption) {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        key: intervalOption,
+        value: intervalOption
+      }, getTranslation(texts, intervalOption));
+    });
+  }, [texts, availableUnits]);
+  var timeRelationOptions = useMemo(function () {
+    return TIME_RELATIONS.map(function (option) {
+      return /*#__PURE__*/React.createElement(Select.Option, {
+        key: option,
+        value: option
+      }, getTranslation(texts, option));
+    });
+  }, [texts]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.RelativeDateDropdownWrapper, {
+    "data-testid": "ds-factors-relative-date-dropdown"
+  }, /*#__PURE__*/React.createElement(InputGroup, {
+    resetMargin: true,
+    compact: true
+  }, /*#__PURE__*/React.createElement(InputNumber, {
+    "data-testid": "ds-factors-relative-date-modifier",
+    defaultValue: 1,
+    min: 1,
+    raw: true,
+    value: temporalModifier,
+    onChange: function onChange(newTemporalModifier) {
+      return newTemporalModifier && setTemporalModifier(newTemporalModifier);
+    }
+  }), /*#__PURE__*/React.createElement(Select, {
+    value: temporalUnit,
+    "data-testid": "ds-factors-relative-date-unit",
+    defaultValue: defaultTemporalUnit,
+    onChange: function onChange(newTemporalUnit) {
+      setTemporalUnit(newTemporalUnit);
+    },
+    dropdownMatchSelectWidth: false
+  }, temporalUnitOptions)), /*#__PURE__*/React.createElement(Select, {
+    value: timeRelation,
+    "data-testid": "ds-factors-relative-date-relation",
+    defaultValue: defaultTimeRelation,
+    onChange: function onChange(newTimeRelation) {
+      setTimeRelation(newTimeRelation);
+    },
+    dropdownMatchSelectWidth: false
+  }, timeRelationOptions), /*#__PURE__*/React.createElement(S.RelativeDateCurrentLabel, null, texts.currentDatetime)), /*#__PURE__*/React.createElement(S.RelativeDateDropdownFooter, null, /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    onClick: onCancel
+  }, texts.cancel), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: handleApply,
+    disabled: !isApplyEnabled
+  }, texts.apply)));
+};

package/dist/FactorValue/RelativeDate/RelativeDateDropdown.styles.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const RelativeDateDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RelativeDateDropdownFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RelativeDateCurrentLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ClearIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
+export declare const ChevronIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
+export declare const Trigger: import("styled-components").StyledComponent<({ className, errorText, label, description, counterLimit, tooltip, tooltipConfig, icon1, icon1Tooltip, autoResize, icon2, icon2Tooltip, resetMargin, handleInputRef, prefixel, suffixel, error, expandable, expandableTooltip, renderCustomCounter, autoResizeProps, ...antdInputProps }: import("@synerise/ds-input").InputProps) => import("react").JSX.Element, any, {}, never>;

package/dist/FactorValue/RelativeDate/RelativeDateDropdown.styles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import Icon from '@synerise/ds-icon';
+import { InputNumberWrapper } from '@synerise/ds-input-number/dist/InputNumber.styles';
+import Dropdown from '@synerise/ds-dropdown';
+import { Input } from '@synerise/ds-input';
+export var RelativeDateDropdownWrapper = styled(Dropdown.Wrapper).withConfig({
+  displayName: "RelativeDateDropdownstyles__RelativeDateDropdownWrapper",
+  componentId: "sc-1xn8l81-0"
+})(["padding:24px;display:flex;align-items:center;width:100%;gap:8px;min-width:420px;", "{width:70px;}& > *{flex:1 1 auto;}"], InputNumberWrapper);
+export var RelativeDateDropdownFooter = styled.div.withConfig({
+  displayName: "RelativeDateDropdownstyles__RelativeDateDropdownFooter",
+  componentId: "sc-1xn8l81-1"
+})(["background:", ";display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:8px;"], function (props) {
+  return props.theme.palette['grey-100'];
+});
+export var RelativeDateCurrentLabel = styled.div.withConfig({
+  displayName: "RelativeDateDropdownstyles__RelativeDateCurrentLabel",
+  componentId: "sc-1xn8l81-2"
+})(["font-weight:500;"]);
+export var IconWrapper = styled.div.withConfig({
+  displayName: "RelativeDateDropdownstyles__IconWrapper",
+  componentId: "sc-1xn8l81-3"
+})([""]);
+export var ClearIcon = styled(Icon).withConfig({
+  displayName: "RelativeDateDropdownstyles__ClearIcon",
+  componentId: "sc-1xn8l81-4"
+})([""]);
+export var ChevronIcon = styled(Icon).withConfig({
+  displayName: "RelativeDateDropdownstyles__ChevronIcon",
+  componentId: "sc-1xn8l81-5"
+})([""]);
+export var Trigger = styled(Input).withConfig({
+  displayName: "RelativeDateDropdownstyles__Trigger",
+  componentId: "sc-1xn8l81-6"
+})(["", "{display:none;}&:hover{", "{display:block;svg{fill:", ";}&:hover svg{fill:", ";}}", "{display:none;}}"], ClearIcon, ClearIcon, function (props) {
+  return props.theme.palette['red-600'];
+}, function (props) {
+  return props.theme.palette['red-500'];
+}, ChevronIcon);

package/dist/FactorValue/Text/Text.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { FactorValueComponentProps } from '../../Factors.types';
-declare const TextInput: ({ value, onChange, texts, textType, autocompleteText, factorType, opened, onDeactivate, error, inputProps, getPopupContainerOverride, readOnly, }: FactorValueComponentProps) => React.JSX.Element;
+declare const TextInput: ({ value, onChange, texts, textType, autocompleteText, factorType, opened, onDeactivate, onActivate, error, inputProps, getPopupContainerOverride, readOnly, }: FactorValueComponentProps) => React.JSX.Element;
 export default TextInput;

package/dist/FactorValue/Text/Text.js

@@ -15,6 +15,7 @@ var TextInput = function TextInput(_ref) {
     factorType = _ref.factorType,
     opened = _ref.opened,
     onDeactivate = _ref.onDeactivate,
+    onActivate = _ref.onActivate,
     error = _ref.error,
     inputProps = _ref.inputProps,
     getPopupContainerOverride = _ref.getPopupContainerOverride,
@@ -70,6 +71,7 @@ var TextInput = function TextInput(_ref) {
         value: localValue,
         onChange: handleAutocomplete,
         onBlur: onDeactivate,
+        onFocus: onActivate,
         error: localError || error,
         handleInputRef: setInputRef,
         defaultOpen: true,
@@ -89,6 +91,7 @@ var TextInput = function TextInput(_ref) {
         value: localValue,
         onChange: handleChange,
         onBlur: onDeactivate,
+        onFocus: onActivate,
         error: localError || error,
         readOnly: readOnly
       })));
@@ -109,6 +112,7 @@ var TextInput = function TextInput(_ref) {
       value: localValue,
       onChange: handleChange,
       onBlur: onDeactivate,
+      onFocus: onActivate,
       error: localError || error,
       readOnly: readOnly
     }))), /*#__PURE__*/React.createElement(TextModal, {

package/dist/Factors.js

@@ -1,6 +1,6 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React, { useMemo } from 'react';
-import { BookM, Calendar2M, DynamicKeyM, FormulaM, HashM, ListM, ShowM, TextM } from '@synerise/ds-icon';
+import { BookM, Calendar2M, CalendarSwitchM, DynamicKeyM, FormulaM, HashM, ListM, ShowM, TextM } from '@synerise/ds-icon';
 import { NOOP } from '@synerise/ds-utils';
 import * as S from './style/Factors.style';
 import FactorTypeSelector from './FactorTypeSelector/FactorTypeSelector';
@@ -12,6 +12,7 @@ import TextInput from './FactorValue/Text/Text';
 import ParameterInput from './FactorValue/Parameter/Parameter';
 import NumberInput from './FactorValue/Number/NumberInput';
 import DateRangeInput from './FactorValue/DateRange/DateRange';
+import RelativeDateInput from './FactorValue/RelativeDate/RelativeDate';
 import { useTexts } from './hooks/useTexts';
 export var FACTOR_TYPE_MAPPING = {
   text: {
@@ -54,6 +55,11 @@ export var FACTOR_TYPE_MAPPING = {
     name: 'Date',
     component: DateInput
   },
+  relativeDate: {
+    icon: /*#__PURE__*/React.createElement(CalendarSwitchM, null),
+    name: 'Relative date',
+    component: RelativeDateInput
+  },
   dateRange: {
     icon: /*#__PURE__*/React.createElement(Calendar2M, null),
     name: 'Date range',

package/dist/Factors.types.d.ts

@@ -1,14 +1,20 @@
 import type { ReactText, ReactNode, ComponentType } from 'react';
-import type { DateFilter } from '@synerise/ds-date-range-picker/dist/date.types';
+import type { DateFilter, RelativeUnits } from '@synerise/ds-date-range-picker/dist/date.types';
 import type { Texts as DateRangeTexts } from '@synerise/ds-date-range-picker/dist/DateRangePicker.types';
 import type { MenuItemProps } from '@synerise/ds-menu';
-import type { AutoResizeProp } from '@synerise/ds-input';
+import type { AutoResizeProp, InputProps } from '@synerise/ds-input';
 import type { InformationCardProps } from '@synerise/ds-information-card';
 import type { ListItemProps } from '@synerise/ds-list-item';
 import type { LiteralStringUnion, DeepPartial } from '@synerise/ds-utils';
-export declare const ALL_FACTOR_TYPES: readonly ["text", "number", "parameter", "contextParameter", "dynamicKey", "formula", "array", "date", "dateRange"];
+export declare const ALL_FACTOR_TYPES: readonly ["text", "number", "parameter", "contextParameter", "dynamicKey", "formula", "array", "date", "relativeDate", "dateRange"];
 export type FactorType = LiteralStringUnion<typeof ALL_FACTOR_TYPES[number]>;
 export type DefinedFactorTypes = typeof ALL_FACTOR_TYPES[number];
+export type RelativeDateUnit = Exclude<RelativeUnits, 'SINCE'>;
+export type RelativeTimeRelation = 'BEFORE' | 'AFTER';
+export type RelativeDateValueType = {
+    temporalUnit: RelativeDateUnit;
+    temporalModifier: number;
+};
 export type DynamicKeyValueType = {
     key: ReactText;
     value: ReactText;
@@ -45,12 +51,28 @@ export type ParameterItem = {
     disabled?: boolean;
     excludeFromSearchResults?: boolean;
 };
-export type FactorValueType = string | number | null | Date | undefined | DynamicKeyValueType | FormulaValueType | ParameterValueType | Partial<DateFilter>;
+export type FactorValueType = string | number | null | Date | RelativeDateValueType | undefined | DynamicKeyValueType | FormulaValueType | ParameterValueType | Partial<DateFilter>;
 export type SelectedFactorType = {
     name: string;
     icon: ReactNode;
     component: ComponentType<FactorValueComponentProps>;
 };
+export type RelativeDateFactorTexts = {
+    triggerValue: string;
+    triggerPlaceholder: string;
+    currentDatetime: ReactNode;
+    seconds: string;
+    minutes: string;
+    hours: string;
+    days: string;
+    weeks: string;
+    months: string;
+    years: string;
+    before: string;
+    after: string;
+    apply: ReactNode;
+    cancel: ReactNode;
+};
 export type FactorsTexts = {
     dateRangePicker: DateRangeTexts;
     datePicker: {
@@ -75,6 +97,7 @@ export type FactorsTexts = {
         recentItemsGroupName: string;
         allItemsGroupName: string;
     };
+    relativeDate: RelativeDateFactorTexts;
     valuePlaceholder: string;
     modalApply: string;
     modalCancel: string;
@@ -102,6 +125,10 @@ export type FactorsProps = {
     value: FactorValueType;
     textType?: LiteralStringUnion<'autocomplete' | 'expansible' | 'default'>;
     autoResize?: AutoResizeProp;
+    relativeDateProps?: {
+        triggerValueFormatter?: (value: RelativeDateValueType) => string;
+        availableUnits?: RelativeDateUnit[];
+    };
     autocompleteText?: {
         options: string[];
     };
@@ -127,8 +154,7 @@ export type FactorsProps = {
     allowClear?: boolean;
     loading?: boolean;
     preventAutoloadData?: boolean;
-    withCustomFactor?: ReactNode;
-    inputProps?: Partial<FactorValueComponentProps>;
+    inputProps?: Partial<Omit<InputProps, 'handleInputRef' | 'defaultOpen' | 'placeholder' | 'value' | 'onChange' | 'onBlur' | 'error' | 'getPopupContainer' | 'readOnly' | 'allowClear'>>;
     readOnly?: boolean;
     getMenuEntryProps?: (arg?: ParameterValueType) => MenuItemProps;
 };
@@ -140,7 +166,7 @@ export type FactorTypeSelectorProps = Pick<FactorsProps, 'unavailableFactorTypes
         [k in DefinedFactorTypes]: string;
     };
 };
-export type FactorValueProps = Pick<FactorsProps, 'onChangeValue' | 'onParamsClick' | 'value' | 'selectedFactorType' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'formulaEditor' | 'opened' | 'loading' | 'factorKey' | 'preventAutoloadData' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'allowClear' | 'inputProps' | 'autoResize' | 'readOnly' | 'getMenuEntryProps'> & {
+export type FactorValueProps = Pick<FactorsProps, 'onChangeValue' | 'onParamsClick' | 'value' | 'selectedFactorType' | 'parameters' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'formulaEditor' | 'opened' | 'loading' | 'factorKey' | 'preventAutoloadData' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'allowClear' | 'inputProps' | 'autoResize' | 'readOnly' | 'relativeDateProps' | 'getMenuEntryProps'> & {
     texts: FactorsTexts;
     selectedFactor: SelectedFactorType;
 };
@@ -152,7 +178,7 @@ export type FactorValueComponentProps = Pick<FactorsProps, 'value' | 'parameters
     formulaEditor?: ReactNode;
     loading?: boolean;
     preventAutoloadData?: boolean;
-};
+} & FactorsProps['relativeDateProps'];
 export type TextModalProps = {
     value: string;
     onApply: (value: string) => void;

package/dist/Factors.types.js

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

package/dist/hooks/useTexts.js

@@ -35,6 +35,68 @@ export var useTexts = function useTexts(defaultTexts) {
           defaultMessage: 'Value'
         })
       },
+      relativeDate: {
+        currentDatetime: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.CURRENT_DATETIME',
+          defaultMessage: 'current datetime'
+        }),
+        seconds: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.SECONDS',
+          defaultMessage: 'Seconds'
+        }),
+        minutes: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.MINUTE',
+          defaultMessage: 'Minutes'
+        }),
+        hours: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.HOURS',
+          defaultMessage: 'Hours'
+        }),
+        days: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.DAYS',
+          defaultMessage: 'Days'
+        }),
+        weeks: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.WEEKS',
+          defaultMessage: 'Weeks'
+        }),
+        months: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.MONTHS',
+          defaultMessage: 'Months'
+        }),
+        years: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.YEARS',
+          defaultMessage: 'Years'
+        }),
+        before: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.BEFORE',
+          defaultMessage: 'Before'
+        }),
+        after: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.AFTER',
+          defaultMessage: 'After'
+        }),
+        apply: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.APPLY',
+          defaultMessage: 'Apply'
+        }),
+        cancel: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.CANCEL',
+          defaultMessage: 'Cancel'
+        }),
+        triggerPlaceholder: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.TRIGGER_PLACEHOLDER',
+          defaultMessage: 'Select date'
+        }),
+        triggerValue: intl.formatMessage({
+          id: 'DS.FACTORS.RELATIVE_DATE.TRIGGER_VALUE',
+          defaultMessage: '{value} {interval} {timeRelation} current datetime'
+        }, {
+          value: '1',
+          interval: 'days',
+          timeRelation: 'before'
+        })
+      },
       formula: {
         buttonPlaceholder: intl.formatMessage({
           id: 'DS.FACTORS.FORMULA.BUTTON_PLACEHOLDER',
@@ -120,6 +182,10 @@ export var useTexts = function useTexts(defaultTexts) {
           id: 'DS.FACTORS.FACTOR_TYPES.DATE',
           defaultMessage: 'Date'
         }),
+        relativeDate: intl.formatMessage({
+          id: 'DS.FACTORS.FACTOR_TYPES.RELATIVE_DATE',
+          defaultMessage: 'Relative date'
+        }),
         dateRange: intl.formatMessage({
           id: 'DS.FACTORS.FACTOR_TYPES.DATE_RANGE',
           defaultMessage: 'Date range'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "1.1.13",
+  "version": "1.2.0",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,26 +34,26 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-autocomplete": "^1.1.4",
-    "@synerise/ds-badge": "^1.0.9",
-    "@synerise/ds-button": "^1.3.1",
-    "@synerise/ds-date-picker": "^1.1.4",
-    "@synerise/ds-date-range-picker": "^1.3.3",
-    "@synerise/ds-dropdown": "^1.0.9",
-    "@synerise/ds-icon": "^1.5.1",
-    "@synerise/ds-information-card": "^1.0.11",
-    "@synerise/ds-inline-edit": "^1.0.10",
-    "@synerise/ds-input": "^1.1.4",
-    "@synerise/ds-input-number": "^1.1.4",
-    "@synerise/ds-list-item": "^1.0.9",
-    "@synerise/ds-menu": "^1.0.9",
-    "@synerise/ds-modal": "^1.1.2",
-    "@synerise/ds-result": "^1.0.9",
-    "@synerise/ds-scrollbar": "^1.0.9",
-    "@synerise/ds-skeleton": "^1.0.10",
-    "@synerise/ds-tabs": "^1.0.9",
-    "@synerise/ds-tooltip": "^1.1.8",
-    "@synerise/ds-utils": "^1.1.1",
+    "@synerise/ds-autocomplete": "^1.1.5",
+    "@synerise/ds-badge": "^1.0.10",
+    "@synerise/ds-button": "^1.3.3",
+    "@synerise/ds-date-picker": "^1.1.6",
+    "@synerise/ds-date-range-picker": "^1.3.5",
+    "@synerise/ds-dropdown": "^1.0.10",
+    "@synerise/ds-icon": "^1.5.2",
+    "@synerise/ds-information-card": "^1.0.13",
+    "@synerise/ds-inline-edit": "^1.0.12",
+    "@synerise/ds-input": "^1.2.0",
+    "@synerise/ds-input-number": "^1.2.0",
+    "@synerise/ds-list-item": "^1.0.10",
+    "@synerise/ds-menu": "^1.0.11",
+    "@synerise/ds-modal": "^1.1.4",
+    "@synerise/ds-result": "^1.0.11",
+    "@synerise/ds-scrollbar": "^1.0.10",
+    "@synerise/ds-skeleton": "^1.0.11",
+    "@synerise/ds-tabs": "^1.0.11",
+    "@synerise/ds-tooltip": "^1.1.9",
+    "@synerise/ds-utils": "^1.2.0",
     "lodash": "^4.17.21",
     "react-window": "1.8.5",
     "uuid": "^8.3.2"
@@ -65,5 +65,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "022e7ef05dd9d54cdb148bdd03dcf592fbaf3a52"
+  "gitHead": "93bc81d59d20bc8f3bc80c5d56ae7f7c0838380d"
 }