@synerise/ds-factors 1.4.4 → 1.5.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.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.4.5...@synerise/ds-factors@1.5.0) (2025-07-24)
+
+
+### Features
+
+* add uncontrolledComponent prop in factors ([1b40c36](https://github.com/Synerise/synerise-design/commit/1b40c36f8348b730bc8df924c039e4cb6be4c6b8))
+
+
+
+
+
+## [1.4.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.4.4...@synerise/ds-factors@1.4.5) (2025-07-24)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
 ## [1.4.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.4.3...@synerise/ds-factors@1.4.4) (2025-07-17)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/dist/FactorTypeSelector/FactorTypeSelector.js

@@ -26,11 +26,12 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
       });
     }
     return list.map(function (type) {
+      var typeData = factorTypeMapping[type];
       return /*#__PURE__*/React.createElement(ListItem, {
         className: "ds-factor-type",
-        key: factorTypeMapping[type].name,
+        key: typeData.name,
         prefixel: /*#__PURE__*/React.createElement(Icon, {
-          component: factorTypeMapping[type].icon
+          component: typeData.icon
         }),
         suffixel: type === selectedFactorType ? /*#__PURE__*/React.createElement(Icon, {
           component: /*#__PURE__*/React.createElement(CheckS, null),
@@ -54,17 +55,21 @@ var FactorTypeSelector = function FactorTypeSelector(_ref) {
   if (readOnly) {
     return trigger;
   }
-  return /*#__PURE__*/React.createElement(Tooltip, {
-    title: texts[selectedFactorType],
-    trigger: ['hover']
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    open: dropdownOpen,
-    onOpenChange: setDropdownOpen,
-    dropdownRender: function dropdownRender() {
-      return /*#__PURE__*/React.createElement(S.FactorTypeList, null, typesList);
-    },
-    trigger: ['click'],
-    disabled: readOnly
-  }, trigger));
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error selectedFactorType can be any string - requires type refactor in analytics-core
+    React.createElement(Tooltip, {
+      title: texts[selectedFactorType],
+      trigger: ['hover']
+    }, /*#__PURE__*/React.createElement(Dropdown, {
+      open: dropdownOpen,
+      onOpenChange: setDropdownOpen,
+      dropdownRender: function dropdownRender() {
+        return /*#__PURE__*/React.createElement(S.FactorTypeList, null, typesList);
+      },
+      trigger: ['click'],
+      disabled: readOnly
+    }, trigger))
+  );
 };
 export default FactorTypeSelector;

package/dist/FactorValue/Array/Array.styles.d.ts

@@ -1,12 +1,11 @@
-/// <reference types="react" />
 import Button from '@synerise/ds-button';
 export declare const TextArea: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/lib/input").TextAreaProps & {
-    error?: boolean | undefined;
+    error?: boolean;
 } & import("react").RefAttributes<import("antd/lib/input/TextArea").TextAreaRef>>, any, {
-    error?: boolean | undefined;
+    error?: boolean;
 }, never>;
 export declare const Modal: import("styled-components").StyledComponent<{
-    (props: import("@synerise/ds-modal").ModalProps): import("react").JSX.Element;
+    (props: import("@synerise/ds-modal").ModalProps): React.JSX.Element;
     info: import("antd/lib/modal/confirm").ModalFunc;
     success: import("antd/lib/modal/confirm").ModalFunc;
     error: import("antd/lib/modal/confirm").ModalFunc;
@@ -15,7 +14,7 @@ export declare const Modal: import("styled-components").StyledComponent<{
 }, any, {
     viewportHeight: number;
 }, never>;
-export declare const EmptyState: import("styled-components").StyledComponent<({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: import("@synerise/ds-empty-states").EmptyStatesProps) => import("react").JSX.Element, any, {}, never>;
+export declare const EmptyState: import("styled-components").StyledComponent<({ size, label, text, button, fontSize, customIcon, className, mode, iconPosition, textAlign, }: import("@synerise/ds-empty-states").EmptyStatesProps) => React.JSX.Element, any, {}, never>;
 export declare const TriggerButtonLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TriggerButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export declare const ModalFooterLeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -27,6 +26,6 @@ export declare const SearchWrapper: import("styled-components").StyledComponent<
 export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreatorItemsList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const DeleteIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => import("react").JSX.Element, any, {}, never>;
+export declare const DeleteIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
 export declare const CollectorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const CreatorRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FactorValue/Array/hooks/useCollector.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { FactorsTexts } from '../../../Factors.types';
 type UseCollectorProps = {
     limit?: number;

package/dist/FactorValue/Date/Date.d.ts

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

package/dist/FactorValue/Date/Date.js

@@ -12,13 +12,16 @@ var DateInput = function DateInput(_ref) {
     allowClear = _ref.allowClear,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    getPopupContainerOverride = _ref.getPopupContainerOverride;
+    getPopupContainerOverride = _ref.getPopupContainerOverride,
+    uncontrolledComponent = _ref.uncontrolledComponent;
   var _useState = useState(value),
     localValue = _useState[0],
     setLocalValue = _useState[1];
   useEffect(function () {
-    setLocalValue(value);
-  }, [value]);
+    if (!uncontrolledComponent) {
+      setLocalValue(value);
+    }
+  }, [value, uncontrolledComponent]);
   var changeHandler = useCallback(function (date) {
     onChange(date);
   }, [onChange]);

package/dist/FactorValue/DynamicKey/DynamicKey.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type FactorValueComponentProps } from '../../Factors.types';
-declare const DynamicKey: ({ value, onChange, withoutTypeSelector, texts, opened, onDeactivate, error, factorValueExtraProps, readOnly, }: FactorValueComponentProps) => React.JSX.Element;
+declare const DynamicKey: ({ value, onChange, withoutTypeSelector, texts, opened, onDeactivate, error, factorValueExtraProps, readOnly, uncontrolledComponent, }: FactorValueComponentProps) => React.JSX.Element;
 export default DynamicKey;

package/dist/FactorValue/DynamicKey/DynamicKey.js

@@ -12,33 +12,38 @@ var DynamicKey = function DynamicKey(_ref) {
     error = _ref.error,
     factorValueExtraProps = _ref.factorValueExtraProps,
     _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
-  var _useState = useState({
-      key: value.key,
-      value: value.value
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    uncontrolledComponent = _ref.uncontrolledComponent;
+  var _useState = useState(function () {
+      return {
+        key: value.key,
+        value: value.value
+      };
     }),
     localValue = _useState[0],
     setLocalValue = _useState[1];
   var _useState2 = useState(false),
     localError = _useState2[0],
     setLocalError = _useState2[1];
-  var handleChange = function handleChange(event) {
+  var handleChange = function handleChange(inputKey, inputValue) {
     var newValue = _extends({}, value);
-    newValue[event.target.name] = event.target.value;
+    newValue[inputKey] = inputValue;
     setLocalValue(newValue);
     onChange(newValue);
-    if (!event.target.value.length) {
+    if (!inputValue.length) {
       setLocalError(true);
     } else {
       setLocalError(false);
     }
   };
   useEffect(function () {
-    setLocalValue({
-      key: value.key,
-      value: value.value
-    });
-  }, [value]);
+    if (!uncontrolledComponent) {
+      setLocalValue({
+        key: value.key,
+        value: value.value
+      });
+    }
+  }, [value, uncontrolledComponent]);
   var _ref2 = (factorValueExtraProps == null ? void 0 : factorValueExtraProps.dynamicKey) || {},
     _ref2$keyInputProps = _ref2.keyInputProps,
     keyInputProps = _ref2$keyInputProps === void 0 ? {} : _ref2$keyInputProps,
@@ -51,7 +56,9 @@ var DynamicKey = function DynamicKey(_ref) {
     placeholder: texts.dynamicKey.keyPlaceholder,
     value: localValue.key,
     name: "key",
-    onChange: handleChange,
+    onChange: function onChange(event) {
+      return handleChange('key', event.target.value);
+    },
     autoFocus: opened,
     onBlur: onDeactivate,
     error: localError || error,
@@ -62,7 +69,9 @@ var DynamicKey = function DynamicKey(_ref) {
     placeholder: texts.dynamicKey.valuePlaceholder,
     value: localValue.value,
     name: "value",
-    onChange: handleChange,
+    onChange: function onChange(event) {
+      return handleChange('value', event.target.value);
+    },
     error: localError || error,
     readOnly: readOnly
   })));

package/dist/FactorValue/DynamicKey/DynamicKey.style.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-export declare const DynamicKeyInput: 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, {
+export declare const DynamicKeyInput: 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) => React.JSX.Element, any, {
     index: 0 | 1;
-    withoutTypeSelector?: boolean | undefined;
+    withoutTypeSelector?: boolean;
 }, never>;
 export declare const DynamicKey: import("styled-components").StyledComponent<"div", any, {
     withoutTypeSelector: boolean;

package/dist/FactorValue/FactorValue.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type 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, relativeDateProps, arrayProps, factorValueExtraProps, }: 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, arrayProps, factorValueExtraProps, uncontrolledComponent, }: FactorValueProps) => React.JSX.Element;
 export default FactorValue;

package/dist/FactorValue/FactorValue.js

@@ -29,7 +29,8 @@ var FactorValue = function FactorValue(_ref) {
     getMenuEntryProps = _ref.getMenuEntryProps,
     relativeDateProps = _ref.relativeDateProps,
     arrayProps = _ref.arrayProps,
-    factorValueExtraProps = _ref.factorValueExtraProps;
+    factorValueExtraProps = _ref.factorValueExtraProps,
+    uncontrolledComponent = _ref.uncontrolledComponent;
   var inputType = React.useMemo(function () {
     if (!selectedFactor) {
       return undefined;
@@ -62,8 +63,10 @@ var FactorValue = function FactorValue(_ref) {
       getMenuEntryProps: getMenuEntryProps,
       inputProps: inputProps,
       factorValueExtraProps: factorValueExtraProps
-    }, relativeDateProps));
-  }, [selectedFactor, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, inputProps, arrayProps, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, allowClear, readOnly, getMenuEntryProps, relativeDateProps, factorValueExtraProps]);
+    }, relativeDateProps, {
+      uncontrolledComponent: uncontrolledComponent
+    }));
+  }, [selectedFactor, factorKey, value, texts, onChangeValue, textType, selectedFactorType, autocompleteText, parameters, withoutTypeSelector, inputProps, arrayProps, formulaEditor, opened, loading, onParamsClick, preventAutoloadData, getPopupContainerOverride, onActivate, onDeactivate, error, allowClear, readOnly, getMenuEntryProps, relativeDateProps, factorValueExtraProps, uncontrolledComponent]);
   return /*#__PURE__*/React.createElement(S.FactorInput, {
     inputType: selectedFactorType,
     inputTextType: textType,

package/dist/FactorValue/FactorValue.style.d.ts

@@ -1,5 +1,5 @@
 export declare const FactorInput: import("styled-components").StyledComponent<"div", any, {
     withoutTypeSelector: boolean;
-    inputTextType?: string | undefined;
-    inputType?: string | undefined;
+    inputTextType?: "autocomplete" | "default" | "expansible";
+    inputType?: string;
 }, never>;

package/dist/FactorValue/Number/NumberInput.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { type FactorValueComponentProps } from '../../Factors.types';
-declare const NumberInput: ({ error, value, onChange, texts, opened, onDeactivate, readOnly, }: FactorValueComponentProps) => React.JSX.Element;
+declare const NumberInput: ({ error, value, onChange, texts, opened, onDeactivate, readOnly, uncontrolledComponent, }: FactorValueComponentProps) => React.JSX.Element;
 export default NumberInput;

package/dist/FactorValue/Number/NumberInput.js

@@ -8,13 +8,18 @@ var NumberInput = function NumberInput(_ref) {
     opened = _ref.opened,
     onDeactivate = _ref.onDeactivate,
     _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly;
-  var _useState = useState(value),
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    uncontrolledComponent = _ref.uncontrolledComponent;
+  var _useState = useState(function () {
+      return value;
+    }),
     localValue = _useState[0],
     setLocalValue = _useState[1];
   useEffect(function () {
-    setLocalValue(value);
-  }, [value]);
+    if (!uncontrolledComponent) {
+      setLocalValue(value);
+    }
+  }, [value, uncontrolledComponent]);
   var handleChange = function handleChange(val) {
     setLocalValue(val);
     onChange(val);

package/dist/FactorValue/Parameter/Parameter.style.d.ts

@@ -1,18 +1,17 @@
-/// <reference types="react" />
 import { VariableSizeList } from 'react-window';
 import Button from '@synerise/ds-button';
 export declare const TabsWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ContentPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ItemsList: import("styled-components").StyledComponent<"div", any, {
-    contentHeight?: number | undefined;
+    contentHeight?: number;
 }, never>;
 export declare const SearchResult: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const SearchResultHighlight: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const Value: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const ParameterButton: import("styled-components").StyledComponent<typeof Button, any, {}, never>;
 export declare const StyledList: import("styled-components").StyledComponent<typeof VariableSizeList, any, {}, never>;
-export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {
-    contentHeight?: number | undefined;
+export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import("@synerise/ds-skeleton").SkeletonProps) => React.JSX.Element, any, {
+    contentHeight?: number;
 }, never>;
 export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ShowMoreItem: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FactorValue/Parameter/ParameterDropdownItem.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { type ParameterGroup, type ParameterItem } from '../../Factors.types';
 import { type DropdownItem } from './Parameter.types';
-declare const ParameterDropdownItem: <ItemType extends ParameterGroup | ParameterItem>({ item, clearSearch, searchQuery, hideDropdown, select, className, style, label, }: DropdownItem<ItemType>) => React.JSX.Element;
+declare const ParameterDropdownItem: <ItemType extends ParameterItem | ParameterGroup>({ item, clearSearch, searchQuery, hideDropdown, select, className, style, label, }: DropdownItem<ItemType>) => React.JSX.Element;
 export default ParameterDropdownItem;

package/dist/FactorValue/Parameter/useGroups.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type ParameterGroup, type ParameterItem } from '../../Factors.types';
 export declare const useGroups: (items?: ParameterItem[], groups?: ParameterGroup[], renderEmptyGroups?: boolean) => {
     visibleGroups: ParameterGroup[] | undefined;

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

@@ -1,4 +1,4 @@
-import { type ParameterGroup } from 'Factors.types';
+import { type ParameterGroup } from '../../Factors.types';
 import { type DropdownItem } from './Parameter.types';
 import { type DividerItem, type TitleItem } from './ParameterDropdown';
 export declare const groupItems: (dropdownItems: DropdownItem<ParameterGroup>[], activeGroup: ParameterGroup | undefined) => (DropdownItem<ParameterGroup> | TitleItem | DividerItem)[];

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

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

package/dist/FactorValue/RelativeDate/RelativeDate.js

@@ -19,18 +19,23 @@ var RelativeDateInput = function RelativeDateInput(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     triggerValueFormatter = _ref.triggerValueFormatter,
     getPopupContainerOverride = _ref.getPopupContainerOverride,
-    availableUnits = _ref.availableUnits;
+    availableUnits = _ref.availableUnits,
+    uncontrolledComponent = _ref.uncontrolledComponent;
   var _useState = useState(opened),
     isOpen = _useState[0],
     setIsOpen = _useState[1];
-  var _useState2 = useState(value),
+  var _useState2 = useState(function () {
+      return value;
+    }),
     localValue = _useState2[0],
     setLocalValue = _useState2[1];
   var theme = useTheme();
   var texts = allTexts.relativeDate;
   useEffect(function () {
-    setLocalValue(value);
-  }, [value]);
+    if (!uncontrolledComponent) {
+      setLocalValue(value);
+    }
+  }, [value, uncontrolledComponent]);
   var handleOpenChange = useCallback(function (open) {
     if (!open) {
       onDeactivate && onDeactivate();

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

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

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

@@ -1,5 +1,10 @@
+import { RelativeDateKeysString } from '../../Factors.types';
+var isTextsKey = function isTextsKey(key) {
+  return [].concat(RelativeDateKeysString).includes(key);
+};
 export var getTranslation = function getTranslation(texts, key) {
-  return key.toLocaleLowerCase() in texts ? texts[key.toLocaleLowerCase()] : key;
+  var lowercaseKey = key.toLowerCase();
+  return isTextsKey(lowercaseKey) ? texts[lowercaseKey] : key;
 };
 export var defaultTriggerModifier = function defaultTriggerModifier(value, texts) {
   var relation = value.temporalModifier < 0 ? texts.before : texts.after;

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

@@ -1,8 +1,7 @@
-/// <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>;
+export declare const ClearIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => React.JSX.Element, any, {}, never>;
+export declare const ChevronIcon: import("styled-components").StyledComponent<({ name, component, className, ...rest }: import("@synerise/ds-icon").IconProps) => 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) => React.JSX.Element, any, {}, never>;

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

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

package/dist/FactorValue/Text/Text.js

@@ -21,14 +21,17 @@ var TextInput = function TextInput(_ref) {
     getPopupContainerOverride = _ref.getPopupContainerOverride,
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    factorValueExtraProps = _ref.factorValueExtraProps;
+    factorValueExtraProps = _ref.factorValueExtraProps,
+    uncontrolledComponent = _ref.uncontrolledComponent;
   var _useState = useState(false),
     openExpanseEditor = _useState[0],
     setOpenExpanseEditor = _useState[1];
   var _useState2 = useState(),
     inputRef = _useState2[0],
     setInputRef = _useState2[1];
-  var _useState3 = useState(value),
+  var _useState3 = useState(function () {
+      return value;
+    }),
     localValue = _useState3[0],
     setLocalValue = _useState3[1];
   var _useState4 = useState(false),
@@ -59,8 +62,10 @@ var TextInput = function TextInput(_ref) {
     onChange(val);
   }, [onChange]);
   useEffect(function () {
-    setLocalValue(value);
-  }, [value]);
+    if (!uncontrolledComponent) {
+      setLocalValue(value);
+    }
+  }, [value, uncontrolledComponent]);
   var autocompleteOptions = useMemo(function () {
     return autocompleteText && autocompleteText.options.filter(function (option) {
       return option.toLowerCase().includes(String(localValue).toLowerCase());

package/dist/Factors.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type DefinedFactorTypes, type FactorsProps, type SelectedFactorType } from './Factors.types';
+export declare const DEFAULT_FACTOR_TYPE: DefinedFactorTypes;
 export declare const FACTOR_TYPE_MAPPING: Record<DefinedFactorTypes, SelectedFactorType>;
-declare const Factors: ({ selectedFactorType, setSelectedFactorType, onChangeValue, onParamsClick, value, defaultFactorType, textType, unavailableFactorTypes, availableFactorTypes, parameters, autocompleteText, allowClear, withoutTypeSelector, texts, formulaEditor, opened, loading, factorKey, preventAutoloadData, onActivate, onDeactivate, getPopupContainerOverride, customFactorValueComponents, error, inputProps, arrayProps, readOnly, factorValueExtraProps, getMenuEntryProps, }: FactorsProps) => React.JSX.Element;
+declare const Factors: ({ selectedFactorType, setSelectedFactorType, onChangeValue, onParamsClick, value, defaultFactorType, textType, unavailableFactorTypes, availableFactorTypes, parameters, autocompleteText, allowClear, withoutTypeSelector, texts, formulaEditor, opened, loading, factorKey, preventAutoloadData, onActivate, onDeactivate, getPopupContainerOverride, customFactorValueComponents, error, inputProps, arrayProps, readOnly, factorValueExtraProps, getMenuEntryProps, uncontrolledComponent, }: FactorsProps) => React.JSX.Element;
 export default Factors;

package/dist/Factors.js

@@ -15,6 +15,7 @@ import RelativeDateInput from './FactorValue/RelativeDate/RelativeDate';
 import TextInput from './FactorValue/Text/Text';
 import { useTexts } from './hooks/useTexts';
 import * as S from './style/Factors.style';
+export var DEFAULT_FACTOR_TYPE = 'text';
 export var FACTOR_TYPE_MAPPING = {
   text: {
     icon: /*#__PURE__*/React.createElement(TextM, null),
@@ -67,6 +68,9 @@ export var FACTOR_TYPE_MAPPING = {
     component: DateRangeInput
   }
 };
+var isDefinedFactorType = function isDefinedFactorType(type) {
+  return FACTOR_TYPE_MAPPING[type] !== undefined;
+};
 var Factors = function Factors(_ref) {
   var selectedFactorType = _ref.selectedFactorType,
     _ref$setSelectedFacto = _ref.setSelectedFactorType,
@@ -77,7 +81,7 @@ var Factors = function Factors(_ref) {
     _ref$defaultFactorTyp = _ref.defaultFactorType,
     defaultFactorType = _ref$defaultFactorTyp === void 0 ? 'text' : _ref$defaultFactorTyp,
     _ref$textType = _ref.textType,
-    textType = _ref$textType === void 0 ? 'Default' : _ref$textType,
+    textType = _ref$textType === void 0 ? 'default' : _ref$textType,
     unavailableFactorTypes = _ref.unavailableFactorTypes,
     availableFactorTypes = _ref.availableFactorTypes,
     parameters = _ref.parameters,
@@ -101,7 +105,9 @@ var Factors = function Factors(_ref) {
     arrayProps = _ref.arrayProps,
     readOnly = _ref.readOnly,
     factorValueExtraProps = _ref.factorValueExtraProps,
-    getMenuEntryProps = _ref.getMenuEntryProps;
+    getMenuEntryProps = _ref.getMenuEntryProps,
+    _ref$uncontrolledComp = _ref.uncontrolledComponent,
+    uncontrolledComponent = _ref$uncontrolledComp === void 0 ? false : _ref$uncontrolledComp;
   var allTexts = useTexts(texts);
   var factorType = useMemo(function () {
     return selectedFactorType || defaultFactorType;
@@ -111,7 +117,8 @@ var Factors = function Factors(_ref) {
       var type = _ref2[0],
         factorTypeData = _ref2[1];
       var mergedData = customFactorValueComponents ? _extends({}, factorTypeData, customFactorValueComponents[type]) : factorTypeData;
-      return [type, _extends({}, factorTypeData, mergedData)];
+      var dataTuple = [type, _extends({}, factorTypeData, mergedData)];
+      return dataTuple;
     }).reduce(function (result, _ref3) {
       var type = _ref3[0],
         factorTypeData = _ref3[1];
@@ -120,7 +127,7 @@ var Factors = function Factors(_ref) {
     }, {});
   }, [customFactorValueComponents]);
   var selectedFactorData = useMemo(function () {
-    return mergedFactorData[factorType];
+    return mergedFactorData[isDefinedFactorType(factorType) ? factorType : DEFAULT_FACTOR_TYPE];
   }, [mergedFactorData, factorType]);
   return /*#__PURE__*/React.createElement(S.Group, {
     resetMargin: true,
@@ -161,7 +168,8 @@ var Factors = function Factors(_ref) {
     allowClear: allowClear,
     readOnly: readOnly,
     getMenuEntryProps: getMenuEntryProps,
-    factorValueExtraProps: factorValueExtraProps
+    factorValueExtraProps: factorValueExtraProps,
+    uncontrolledComponent: uncontrolledComponent
   }));
 };
 export default Factors;

package/dist/Factors.types.d.ts

@@ -12,6 +12,7 @@ import type { ArrayValueElement } from './FactorValue/Array/Array.types';
 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 TupleType = [DefinedFactorTypes, SelectedFactorType];
 export type RelativeDateUnit = Exclude<RelativeUnits, 'SINCE'>;
 export type RelativeTimeRelation = 'BEFORE' | 'AFTER';
 export type RelativeDateValueType = {
@@ -62,21 +63,13 @@ export type SelectedFactorType = {
     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 declare const RelativeDateKeysString: readonly ["triggerValue", "triggerPlaceholder", "seconds", "minutes", "hours", "days", "weeks", "months", "years", "before", "after"];
+export declare const RelativeDateKeysReactNode: readonly ["currentDatetime", "apply", "cancel"];
+export type RelativeDateFactorTextsString = {
+    [K in (typeof RelativeDateKeysString)[number]]: string;
+};
+export type RelativeDateFactorTexts = RelativeDateFactorTextsString & {
+    [K in (typeof RelativeDateKeysReactNode)[number]]: ReactNode;
 };
 export type FactorsTexts = {
     dateRangePicker: DateRangeTexts;
@@ -135,6 +128,7 @@ export type FactorsTexts = {
     };
 };
 export type FactorTypeMapping = Record<DefinedFactorTypes, Partial<SelectedFactorType>>;
+export type MergedFactorTypeMapping = Record<DefinedFactorTypes, SelectedFactorType>;
 type InputPropKeys = 'icon1' | 'icon1Tooltip' | 'icon2' | 'icon2Tooltip';
 export type ExtraPropsMapping = {
     text: {
@@ -169,7 +163,7 @@ export type FactorsProps = {
     onChangeValue: (value: FactorValueType) => void;
     value: FactorValueType;
     arrayProps?: ArrayProps;
-    textType?: LiteralStringUnion<'autocomplete' | 'expansible' | 'default'>;
+    textType?: 'autocomplete' | 'expansible' | 'default';
     autoResize?: AutoResizeProp;
     relativeDateProps?: {
         triggerValueFormatter?: (value: RelativeDateValueType) => string;
@@ -203,6 +197,7 @@ export type FactorsProps = {
     inputProps?: Partial<Omit<InputProps, 'handleInputRef' | 'defaultOpen' | 'placeholder' | 'value' | 'onChange' | 'onBlur' | 'error' | 'getPopupContainer' | 'readOnly' | 'allowClear'>>;
     readOnly?: boolean;
     getMenuEntryProps?: (arg?: ParameterValueType) => MenuItemProps;
+    uncontrolledComponent?: boolean;
 };
 export type FactorTypeSelectorProps = Pick<FactorsProps, 'unavailableFactorTypes' | 'availableFactorTypes' | 'selectedFactorType' | 'readOnly'> & {
     setSelectedFactorType: (factor: FactorType) => void;
@@ -212,11 +207,11 @@ 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' | 'relativeDateProps' | 'arrayProps' | 'getMenuEntryProps' | 'factorValueExtraProps'> & {
+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' | 'arrayProps' | 'getMenuEntryProps' | 'factorValueExtraProps' | 'uncontrolledComponent'> & {
     texts: FactorsTexts;
     selectedFactor: SelectedFactorType;
 };
-export type FactorValueComponentProps = Pick<FactorsProps, 'value' | 'parameters' | 'allowClear' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps' | 'autoResize' | 'readOnly' | 'arrayProps' | 'getMenuEntryProps' | 'factorValueExtraProps'> & {
+export type FactorValueComponentProps = Pick<FactorsProps, 'value' | 'parameters' | 'allowClear' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps' | 'autoResize' | 'readOnly' | 'arrayProps' | 'getMenuEntryProps' | 'factorValueExtraProps' | 'uncontrolledComponent'> & {
     texts: FactorsTexts;
     onChange: (value: FactorValueType) => void;
     factorType: FactorType;

package/dist/Factors.types.js

@@ -1 +1,3 @@
-export var ALL_FACTOR_TYPES = ['text', 'number', 'parameter', 'contextParameter', 'dynamicKey', 'formula', 'array', 'date', 'relativeDate', 'dateRange'];
+export var ALL_FACTOR_TYPES = ['text', 'number', 'parameter', 'contextParameter', 'dynamicKey', 'formula', 'array', 'date', 'relativeDate', 'dateRange'];
+export var RelativeDateKeysString = ['triggerValue', 'triggerPlaceholder', 'seconds', 'minutes', 'hours', 'days', 'weeks', 'months', 'years', 'before', 'after'];
+export var RelativeDateKeysReactNode = ['currentDatetime', 'apply', 'cancel'];

package/dist/style/Factors.style.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-export declare const Group: import("styled-components").StyledComponent<({ children, label, errors, description, resetMargin, tooltip, tooltipConfig, ...antdInputGroupProps }: import("@synerise/ds-input/dist/InputGroup.types").Props) => import("react").JSX.Element, any, {
+export declare const Group: import("styled-components").StyledComponent<({ children, label, errors, description, resetMargin, tooltip, tooltipConfig, ...antdInputGroupProps }: import("@synerise/ds-input/dist/InputGroup.types").Props) => React.JSX.Element, any, {
     withoutTypeSelector: boolean;
 }, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-factors",
-  "version": "1.4.4",
+  "version": "1.5.0",
   "description": "Factors UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,34 +34,34 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.10",
-    "@synerise/ds-autocomplete": "^1.2.3",
-    "@synerise/ds-badge": "^1.0.16",
-    "@synerise/ds-button": "^1.4.5",
-    "@synerise/ds-button-group": "^1.1.9",
-    "@synerise/ds-collector": "^1.3.4",
-    "@synerise/ds-date-picker": "^1.2.1",
-    "@synerise/ds-date-range-picker": "^1.3.15",
-    "@synerise/ds-divider": "^1.0.16",
-    "@synerise/ds-dropdown": "^1.0.18",
-    "@synerise/ds-empty-states": "^1.0.14",
-    "@synerise/ds-icon": "^1.6.1",
-    "@synerise/ds-information-card": "^1.0.22",
-    "@synerise/ds-inline-edit": "^1.0.21",
-    "@synerise/ds-input": "^1.3.5",
-    "@synerise/ds-input-number": "^1.2.6",
-    "@synerise/ds-list-item": "^1.0.16",
-    "@synerise/ds-menu": "^1.0.17",
-    "@synerise/ds-modal": "^1.2.5",
-    "@synerise/ds-result": "^1.0.17",
-    "@synerise/ds-scrollbar": "^1.1.4",
-    "@synerise/ds-search": "^1.2.5",
-    "@synerise/ds-select": "^1.1.12",
-    "@synerise/ds-skeleton": "^1.0.17",
-    "@synerise/ds-tabs": "^1.0.19",
-    "@synerise/ds-tag": "^1.1.14",
-    "@synerise/ds-tooltip": "^1.1.14",
-    "@synerise/ds-utils": "^1.3.1",
+    "@synerise/ds-alert": "^1.1.11",
+    "@synerise/ds-autocomplete": "^1.2.4",
+    "@synerise/ds-badge": "^1.0.17",
+    "@synerise/ds-button": "^1.4.6",
+    "@synerise/ds-button-group": "^1.1.10",
+    "@synerise/ds-collector": "^1.3.5",
+    "@synerise/ds-date-picker": "^1.2.2",
+    "@synerise/ds-date-range-picker": "^1.3.17",
+    "@synerise/ds-divider": "^1.0.17",
+    "@synerise/ds-dropdown": "^1.0.19",
+    "@synerise/ds-empty-states": "^1.0.15",
+    "@synerise/ds-icon": "^1.6.2",
+    "@synerise/ds-information-card": "^1.0.23",
+    "@synerise/ds-inline-edit": "^1.0.22",
+    "@synerise/ds-input": "^1.3.6",
+    "@synerise/ds-input-number": "^1.2.7",
+    "@synerise/ds-list-item": "^1.0.17",
+    "@synerise/ds-menu": "^1.0.18",
+    "@synerise/ds-modal": "^1.2.6",
+    "@synerise/ds-result": "^1.0.19",
+    "@synerise/ds-scrollbar": "^1.1.5",
+    "@synerise/ds-search": "^1.2.6",
+    "@synerise/ds-select": "^1.1.13",
+    "@synerise/ds-skeleton": "^1.0.18",
+    "@synerise/ds-tabs": "^1.0.20",
+    "@synerise/ds-tag": "^1.1.15",
+    "@synerise/ds-tooltip": "^1.1.15",
+    "@synerise/ds-utils": "^1.4.0",
     "copy-to-clipboard": "^3.3.3",
     "lodash": "^4.17.21",
     "react-window": "^1.8.5",
@@ -74,5 +74,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "4e851d649cb25346f2f8e0575dde91cc50f43bc4"
+  "gitHead": "e57b766f264575efe046c96200e81a8ccd0c3128"
 }