@synerise/ds-factors 1.2.2 → 1.3.1

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.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.3.0...@synerise/ds-factors@1.3.1) (2025-06-26)
+
+**Note:** Version bump only for package @synerise/ds-factors
+
+
+
+
+
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.2.2...@synerise/ds-factors@1.3.0) (2025-06-24)
+
+
+### Features
+
+* **factors:** array factor type ([195d328](https://github.com/Synerise/synerise-design/commit/195d3286e98b5f07fc9c1e56001e6ae844b7a080))
+
+
+
+
+
 ## [1.2.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-factors@1.2.1...@synerise/ds-factors@1.2.2) (2025-06-12)
 
 **Note:** Version bump only for package @synerise/ds-factors

package/README.md

@@ -6,6 +6,7 @@ title: Factors
 Factors UI Component
 
 ## Installation
+
 ```
 npm i @synerise/ds-factors
 or
@@ -13,6 +14,7 @@ yarn add @synerise/ds-factors
 ```
 
 ## Usage
+
 ```
 import Factors from '@synerise/ds-factors'
 
@@ -98,62 +100,52 @@ 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                               | -         | 
-| 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                                       | -         |
-| inputProps                | Array of available props of input                                                         | InputProps                                    | -         |
+| 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                                            | -         |
+| inputProps                | text input additional props (for text factor type)                                        | InputProps                                         | -         |
+| arrayProps                | options for array factor type                                                             | { itemType?: 'string' / 'number', limit?: number } | -         |
 
 ### FactorType
 
-All available factor types: `text`, `number`, `parameter`, `contextParameter`, `dynamicKey`, `formula`, `array`, `date`,
+All available factor types: `text`, `number`, `parameter`, `contextParameter`, `dynamicKey`, `formula`, `array`, `date`, `relativeDate`,
 
 ### FactorValueType
 
-Type of value depends on current factor type and can contain values: `string` \ `number` \ `Date` \ `undefined` \ `DynamicKeyValueType` \ `FormulaValueType` \ `ParameterValueType`;
+Type of value depends on current factor type and can contain values: `string` \ `number` \ `Array<string | numer>` \ `Date` \ `undefined` \ `DynamicKeyValueType` \ `FormulaValueType` \ `ParameterValueType`;
 
 ### DynamicKeyValueType
 
-`{ 
-    key: React.ReactText; 
-    value: React.ReactText 
-}`
+`{ key: React.ReactText; value: React.ReactText }`
 
 ### FormulaValueType
 
-`{ 
-    name: string; 
-    value: string 
-}`
+`{ name: string; value: string }`
 
 ### ParameterValueType
 
-`{
-  type: string;
-  icon: string;
-  name: string;
-  id: React.ReactText;
-}`
+`{ type: string; icon: string; name: string; id: React.ReactText; }`
 
 ### ParameterOptions
 
 | Property                | Description                                                | Type                     | Default |
-|-------------------------|------------------------------------------------------------|--------------------------|---------|
+| ----------------------- | ---------------------------------------------------------- | ------------------------ | ------- |
 | buttonIcon              | Icon in button                                             | React.ReactNode          | -       |
 | buttonLabel             | Label of button                                            | string \ React.ReactNode | -       |
 | groups                  | Array of parameter groups                                  | ParameterGroup[]         | -       |

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

@@ -0,0 +1 @@
+export declare const MODAL_VIEWPORT_HEIGHT = 80;

package/dist/FactorValue/Array/Array.const.js

@@ -0,0 +1 @@
+export var MODAL_VIEWPORT_HEIGHT = 80;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ArrayItemType, FactorValueComponentProps } from '../../Factors.types';
+export declare const Array: <ItemType extends ArrayItemType>({ value: arrayValue, onChange, texts, opened, onActivate, onDeactivate, readOnly, error, arrayProps, }: FactorValueComponentProps) => React.JSX.Element;

package/dist/FactorValue/Array/Array.js

@@ -0,0 +1,72 @@
+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, useState } from 'react';
+import Icon, { EditS } from '@synerise/ds-icon';
+import { useTheme } from '@synerise/ds-core';
+import { TagShape } from '@synerise/ds-tag';
+import { ArrayModal } from './components/ArrayModal';
+import * as S from './Array.styles';
+export var Array = function Array(_ref) {
+  var arrayValue = _ref.value,
+    onChange = _ref.onChange,
+    texts = _ref.texts,
+    opened = _ref.opened,
+    onActivate = _ref.onActivate,
+    onDeactivate = _ref.onDeactivate,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    error = _ref.error,
+    _ref$arrayProps = _ref.arrayProps,
+    arrayProps = _ref$arrayProps === void 0 ? {} : _ref$arrayProps;
+  var _useState = useState(opened),
+    isVisible = _useState[0],
+    setIsVisible = _useState[1];
+  var handleOnClick = function handleOnClick() {
+    setIsVisible(true);
+    onActivate && onActivate();
+  };
+  var buttonLabel = useMemo(function () {
+    if (!(arrayValue != null && arrayValue.length)) return texts.array.triggerLabel;
+    return arrayValue.join(', ') + " ";
+  }, [arrayValue, texts.array.triggerLabel]);
+  var triggerMode = useMemo(function () {
+    return readOnly ? '' : 'label-icon';
+  }, [readOnly]);
+  var handleApply = function handleApply(changedValue) {
+    setIsVisible(false);
+    onChange(changedValue);
+  };
+  var handleCancel = function handleCancel() {
+    setIsVisible(false);
+    onDeactivate && onDeactivate();
+  };
+  var theme = useTheme();
+  var tagProps = {
+    asPill: true,
+    name: "" + arrayValue.length,
+    color: error ? theme.palette['red-600'] : theme.palette['grey-600'],
+    textColor: '#fff',
+    shape: TagShape.DEFAULT_ROUND
+  };
+  var tooltipProps = arrayValue != null && arrayValue.length ? {
+    title: /*#__PURE__*/React.createElement(React.Fragment, null, arrayValue.join(', '))
+  } : undefined;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TriggerButton, {
+    error: error,
+    type: "secondary",
+    mode: triggerMode,
+    onClick: handleOnClick,
+    tooltipProps: tooltipProps,
+    "data-testid": "ds-factors-array",
+    tagProps: arrayValue.length ? tagProps : undefined
+  }, /*#__PURE__*/React.createElement(S.TriggerButtonLabel, null, buttonLabel), !readOnly && /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(EditS, null)
+  })), /*#__PURE__*/React.createElement(ArrayModal, _extends({
+    value: arrayValue,
+    onApply: handleApply,
+    onCancel: handleCancel,
+    texts: texts,
+    visible: isVisible,
+    readOnly: readOnly,
+    itemType: "string"
+  }, arrayProps)));
+};

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

@@ -0,0 +1,32 @@
+/// <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;
+} & import("react").RefAttributes<import("antd/lib/input/TextArea").TextAreaRef>>, any, {
+    error?: boolean | undefined;
+}, never>;
+export declare const Modal: import("styled-components").StyledComponent<{
+    (props: import("@synerise/ds-modal").ModalProps): import("react").JSX.Element;
+    info: import("antd/lib/modal/confirm").ModalFunc;
+    success: import("antd/lib/modal/confirm").ModalFunc;
+    error: import("antd/lib/modal/confirm").ModalFunc;
+    warning: import("antd/lib/modal/confirm").ModalFunc;
+    confirm: import("antd/lib/modal/confirm").ModalFunc;
+}, 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 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>;
+export declare const ModalSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ModalContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Limit: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LimitPart: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+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 CollectorWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CreatorRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/FactorValue/Array/Array.styles.js

@@ -0,0 +1,82 @@
+import styled from 'styled-components';
+import EmptyStateBase from '@synerise/ds-empty-states';
+import Icon from '@synerise/ds-icon';
+import Button from '@synerise/ds-button';
+import ModalBase from '@synerise/ds-modal';
+import { RawTextArea } from '@synerise/ds-input';
+export var TextArea = styled(RawTextArea).withConfig({
+  displayName: "Arraystyles__TextArea",
+  componentId: "sc-9atgo7-0"
+})([""]);
+export var Modal = styled(ModalBase).withConfig({
+  displayName: "Arraystyles__Modal",
+  componentId: "sc-9atgo7-1"
+})(["&&{top:50px;.ant-modal-content{height:", "vh;}}", "{height:calc(", "vh - 211px);min-height:auto;resize:none;font-family:'IBM Plex Mono Regular',monospace;&,&:focus{border:0;background:transparent;box-shadow:none;}}"], function (props) {
+  return props.viewportHeight;
+}, TextArea, function (props) {
+  return props.viewportHeight;
+});
+export var EmptyState = styled(EmptyStateBase).withConfig({
+  displayName: "Arraystyles__EmptyState",
+  componentId: "sc-9atgo7-2"
+})(["margin:90px auto 120px;"]);
+export var TriggerButtonLabel = styled.div.withConfig({
+  displayName: "Arraystyles__TriggerButtonLabel",
+  componentId: "sc-9atgo7-3"
+})(["min-width:0;text-overflow:ellipsis;overflow:hidden;"]);
+export var TriggerButton = styled(Button).withConfig({
+  displayName: "Arraystyles__TriggerButton",
+  componentId: "sc-9atgo7-4"
+})(["max-width:100%;"]);
+export var ModalFooterLeftSide = styled.div.withConfig({
+  displayName: "Arraystyles__ModalFooterLeftSide",
+  componentId: "sc-9atgo7-5"
+})(["flex:1 1 100%;text-align:left;"]);
+export var ModalSubHeader = styled.div.withConfig({
+  displayName: "Arraystyles__ModalSubHeader",
+  componentId: "sc-9atgo7-6"
+})(["padding:12px 24px;display:flex;justify-content:space-between;"]);
+export var ModalContentWrapper = styled.div.withConfig({
+  displayName: "Arraystyles__ModalContentWrapper",
+  componentId: "sc-9atgo7-7"
+})(["padding:24px;"]);
+export var Limit = styled.div.withConfig({
+  displayName: "Arraystyles__Limit",
+  componentId: "sc-9atgo7-8"
+})(["display:flex;gap:4px;align-items:center;"]);
+export var LimitPart = styled.div.withConfig({
+  displayName: "Arraystyles__LimitPart",
+  componentId: "sc-9atgo7-9"
+})([""]);
+export var SearchWrapper = styled.div.withConfig({
+  displayName: "Arraystyles__SearchWrapper",
+  componentId: "sc-9atgo7-10"
+})(["max-width:200px;min-width:32px;"]);
+export var RightSide = styled.div.withConfig({
+  displayName: "Arraystyles__RightSide",
+  componentId: "sc-9atgo7-11"
+})(["flex:1 1 auto;display:flex;justify-content:flex-end;align-items:center;gap:12px;"]);
+export var LeftSide = styled.div.withConfig({
+  displayName: "Arraystyles__LeftSide",
+  componentId: "sc-9atgo7-12"
+})(["flex:0 0 auto;text-align:left;"]);
+export var CreatorItemsList = styled.div.withConfig({
+  displayName: "Arraystyles__CreatorItemsList",
+  componentId: "sc-9atgo7-13"
+})(["display:flex;flex-direction:column;gap:12px;"]);
+export var DeleteIcon = styled(Icon).withConfig({
+  displayName: "Arraystyles__DeleteIcon",
+  componentId: "sc-9atgo7-14"
+})(["position:absolute;right:0;top:50%;transform:translateY(-50%);display:none;color:", ";&:hover{color:", ";}"], function (props) {
+  return props.theme.palette['red-600'];
+}, function (props) {
+  return props.theme.palette['red-500'];
+});
+export var CollectorWrapper = styled.div.withConfig({
+  displayName: "Arraystyles__CollectorWrapper",
+  componentId: "sc-9atgo7-15"
+})(["padding:0 34px;margin-bottom:24px;"]);
+export var CreatorRow = styled.div.withConfig({
+  displayName: "Arraystyles__CreatorRow",
+  componentId: "sc-9atgo7-16"
+})(["padding:0 34px;position:relative;&:hover{", "{display:block;}}"], DeleteIcon);

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

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+import type { RequiredProps } from '@synerise/ds-utils';
+import type { ArrayProps, FactorsTexts } from '../../Factors.types';
+export type ArrayModalProps<ItemType extends 'string' | 'number'> = RequiredProps<ArrayProps, 'itemType'> & {
+    visible?: boolean;
+    readOnly?: boolean;
+    onApply: (updatedValue: ArrayValueElement<ItemType>[]) => void;
+    onCancel: () => void;
+    texts: FactorsTexts;
+    value?: ArrayValueElement<ItemType>[];
+};
+export type ArrayValueElement<ItemType extends 'string' | 'number'> = ItemType extends 'number' ? number : string;
+export type ArrayValueWithID<ItemType extends 'string' | 'number'> = {
+    value: ArrayValueElement<ItemType>;
+    id: string;
+};
+export type ArrayCreatorProps<ItemType extends 'string' | 'number'> = Pick<ArrayModalProps<ItemType>, 'itemType' | 'texts' | 'readOnly' | 'limit' | 'collectorSuggestions'> & {
+    value: ArrayValueWithID<ItemType>[];
+    onValueChange: (updatedValue: ArrayValueWithID<ItemType>[]) => void;
+    searchQuery?: string;
+};
+export type ArrayCollectorProps<ItemType extends 'string' | 'number'> = Pick<ArrayModalProps<ItemType>, 'itemType' | 'texts' | 'limit' | 'collectorSuggestions'> & {
+    arrayValueCount: number;
+    onConfirm: (newItems: ArrayValueWithID<ItemType>[]) => void;
+};
+export type ArrayRawProps<ItemType extends 'string' | 'number'> = Pick<ArrayModalProps<ItemType>, 'itemType' | 'texts' | 'readOnly' | 'limit'> & {
+    value: ArrayValueWithID<ItemType>[];
+    onValueChange: (updatedValue: ArrayValueWithID<ItemType>[]) => void;
+    onError: (errorMessage: ReactNode) => void;
+};
+export type ArrayLimitProps = {
+    limit: number;
+    count?: number;
+    texts: FactorsTexts;
+};
+export type CopyButtonProps = {
+    copyValue: string;
+    texts: FactorsTexts;
+};

package/dist/FactorValue/Array/Array.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+import { ArrayValueElement, ArrayValueWithID } from './Array.types';
+export declare const matchesSearchQuery: (item: string | number, searchQuery: string) => boolean;
+export declare const arrayWithUUID: <ItemType extends "string" | "number">(items: ArrayValueElement<ItemType>[]) => ArrayValueWithID<ItemType>[];
+export declare const sanitiseValues: (element: string) => string;
+export declare const isNumberAsString: (value: string) => boolean;
+export declare const isArrayOfNumbersAsString: (array: string[]) => boolean;

package/dist/FactorValue/Array/Array.utils.js

@@ -0,0 +1,25 @@
+import { v4 as uuid } from 'uuid';
+export var matchesSearchQuery = function matchesSearchQuery(item, searchQuery) {
+  return String(item).toLocaleLowerCase().includes(searchQuery.toLocaleLowerCase());
+};
+export var arrayWithUUID = function arrayWithUUID(items) {
+  return items.map(function (item) {
+    return {
+      value: item,
+      id: uuid()
+    };
+  });
+};
+export var sanitiseValues = function sanitiseValues(element) {
+  return element.trim();
+};
+export var isNumberAsString = function isNumberAsString(value) {
+  return sanitiseValues(value) === "" + parseFloat(sanitiseValues(value));
+};
+export var isArrayOfNumbersAsString = function isArrayOfNumbersAsString(array) {
+  var sanitisedArray = array.map(sanitiseValues);
+  var comparisonArray = array.map(function (item) {
+    return "" + parseFloat(sanitiseValues(item));
+  });
+  return JSON.stringify(sanitisedArray) === JSON.stringify(comparisonArray);
+};

package/dist/FactorValue/Array/components/ArrayCollector.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ArrayCollectorProps } from '../Array.types';
+export declare const ArrayCollector: <ItemType extends "string" | "number">({ limit, itemType, arrayValueCount, texts, onConfirm, collectorSuggestions, }: ArrayCollectorProps<ItemType>) => React.JSX.Element;

package/dist/FactorValue/Array/components/ArrayCollector.js

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { v4 as uuid } from 'uuid';
+import Collector from '@synerise/ds-collector';
+import { isArrayOfNumbersAsString, isNumberAsString, sanitiseValues } from '../Array.utils';
+import { useCollector } from '../hooks/useCollector';
+import * as S from '../Array.styles';
+export var ArrayCollector = function ArrayCollector(_ref) {
+  var limit = _ref.limit,
+    itemType = _ref.itemType,
+    arrayValueCount = _ref.arrayValueCount,
+    texts = _ref.texts,
+    onConfirm = _ref.onConfirm,
+    collectorSuggestions = _ref.collectorSuggestions;
+  var _useState = useState([]),
+    collectorValues = _useState[0],
+    setCollectorValues = _useState[1];
+  var _useCollector = useCollector({
+      limit: limit,
+      collectorCount: collectorValues.length,
+      arrayValueCount: arrayValueCount,
+      texts: texts
+    }),
+    disabled = _useCollector.disabled,
+    error = _useCollector.error,
+    errorMessage = _useCollector.errorMessage,
+    addEnabled = _useCollector.addEnabled,
+    setHasTypeError = _useCollector.setHasTypeError,
+    exceedsLimit = _useCollector.exceedsLimit;
+  useEffect(function () {
+    if (itemType === 'number') {
+      var plainValues = collectorValues.map(function (item) {
+        return sanitiseValues(item.value);
+      });
+      setHasTypeError(!isArrayOfNumbersAsString(plainValues));
+    }
+  }, [collectorValues, setHasTypeError, itemType]);
+  var handleCancel = function handleCancel() {
+    setCollectorValues([]);
+  };
+  var handleConfirm = function handleConfirm(items) {
+    var hasError = items.some(function (item) {
+      return item.hasError;
+    });
+    var hasExceededLimit = exceedsLimit(items.length);
+    if (!hasError && !hasExceededLimit) {
+      var rawItemValues = items.map(function (item) {
+        return {
+          value: item.value,
+          id: item.id
+        };
+      });
+      onConfirm(rawItemValues);
+      setCollectorValues([]);
+    } else {
+      setCollectorValues(items);
+    }
+  };
+  var handleItemAdd = function handleItemAdd(text) {
+    return {
+      value: sanitiseValues("" + text),
+      type: itemType,
+      hasError: itemType === 'number' && !isNumberAsString("" + text),
+      id: uuid()
+    };
+  };
+  var handleItemSelect = function handleItemSelect(item) {
+    setCollectorValues([].concat(collectorValues, [item]));
+  };
+  var handleItemDeselect = function handleItemDeselect(deselectedItem) {
+    setCollectorValues(collectorValues.filter(function (collectorItem) {
+      return collectorItem.id !== deselectedItem.id;
+    }));
+  };
+  var handleMultipleItemSelect = function handleMultipleItemSelect(items) {
+    setCollectorValues([].concat(collectorValues, items));
+  };
+  return /*#__PURE__*/React.createElement(S.CollectorWrapper, null, /*#__PURE__*/React.createElement(Collector, {
+    valuesSeparator: ",",
+    error: error,
+    errorText: errorMessage,
+    onConfirm: addEnabled ? handleConfirm : undefined,
+    onItemSelect: handleItemSelect,
+    onMultipleItemsSelect: handleMultipleItemSelect,
+    selected: collectorValues,
+    onCancel: handleCancel,
+    onItemAdd: handleItemAdd,
+    allowCustomValue: true,
+    disabled: disabled,
+    cancelButtonProps: {
+      'data-testid': 'array-collector-cancel-button'
+    },
+    addButtonProps: addEnabled ? {
+      'data-testid': 'array-collector-add-button'
+    } : {
+      disabled: true,
+      'data-testid': 'array-collector-add-button'
+    },
+    allowMultipleValues: true,
+    lookupConfig: {
+      display: 'value',
+      filter: 'value'
+    },
+    onItemDeselect: handleItemDeselect,
+    allowPaste: true,
+    suggestions: collectorSuggestions || [],
+    texts: {
+      add: texts.array.collectorAdd,
+      placeholder: texts.array.collectorPlaceholder,
+      cancel: texts.array.collectorCancel
+    }
+  }));
+};

package/dist/FactorValue/Array/components/ArrayCreator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { ArrayCreatorProps } from '../Array.types';
+export declare const ArrayCreator: <ItemType extends "string" | "number">({ value: arrayValue, searchQuery, itemType, onValueChange, limit, readOnly, texts, collectorSuggestions, }: ArrayCreatorProps<ItemType>) => React.JSX.Element;

package/dist/FactorValue/Array/components/ArrayCreator.js

@@ -0,0 +1,81 @@
+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 { Input } from '@synerise/ds-input';
+import InputNumber from '@synerise/ds-input-number';
+import Tooltip from '@synerise/ds-tooltip';
+import { InboxNoResultsL, CloseM } from '@synerise/ds-icon';
+import * as S from '../Array.styles';
+import { matchesSearchQuery } from '../Array.utils';
+import { ArrayCollector } from './ArrayCollector';
+export var ArrayCreator = function ArrayCreator(_ref) {
+  var _ref$value = _ref.value,
+    arrayValue = _ref$value === void 0 ? [] : _ref$value,
+    searchQuery = _ref.searchQuery,
+    itemType = _ref.itemType,
+    onValueChange = _ref.onValueChange,
+    limit = _ref.limit,
+    readOnly = _ref.readOnly,
+    texts = _ref.texts,
+    collectorSuggestions = _ref.collectorSuggestions;
+  var arrayReversed = useMemo(function () {
+    return [].concat(arrayValue).reverse();
+  }, [arrayValue]);
+  var handleItemChange = function handleItemChange(valueIndex, newValue) {
+    var updatedArray = arrayReversed.map(function (currentValue, index) {
+      return index === valueIndex ? _extends({}, currentValue, {
+        value: newValue
+      }) : currentValue;
+    }).reverse();
+    onValueChange(updatedArray);
+  };
+  var handleItemRemove = function handleItemRemove(valueIndex) {
+    onValueChange([].concat(arrayReversed.slice(0, valueIndex), arrayReversed.slice(valueIndex + 1)).reverse());
+  };
+  var handleConfirm = function handleConfirm(rawItemValues) {
+    onValueChange([].concat(arrayValue, rawItemValues));
+  };
+  var filteredItems = useMemo(function () {
+    return searchQuery ? arrayReversed.filter(function (item) {
+      return matchesSearchQuery(item.value, searchQuery);
+    }) : arrayReversed;
+  }, [searchQuery, arrayReversed]);
+  return /*#__PURE__*/React.createElement(S.ModalContentWrapper, null, /*#__PURE__*/React.createElement(React.Fragment, null, !readOnly && /*#__PURE__*/React.createElement(ArrayCollector, {
+    arrayValueCount: arrayValue.length,
+    limit: limit,
+    itemType: itemType,
+    onConfirm: handleConfirm,
+    texts: texts,
+    collectorSuggestions: collectorSuggestions
+  }), filteredItems != null && filteredItems.length ? /*#__PURE__*/React.createElement(S.CreatorItemsList, null, filteredItems.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(S.CreatorRow, {
+      "data-testid": "ds-factors-array-item",
+      key: item.id
+    }, itemType === 'string' ? /*#__PURE__*/React.createElement(Input, {
+      resetMargin: true,
+      readOnly: readOnly,
+      onChange: function onChange(event) {
+        return handleItemChange(index, event.target.value);
+      },
+      value: item.value
+    }) : /*#__PURE__*/React.createElement(InputNumber, {
+      raw: true,
+      readOnly: readOnly,
+      onChange: function onChange(changedValue) {
+        return changedValue && handleItemChange(index, changedValue);
+      },
+      value: item.value
+    }), !readOnly && /*#__PURE__*/React.createElement(Tooltip, {
+      title: texts.array.deleteItemTooltip
+    }, /*#__PURE__*/React.createElement(S.DeleteIcon, {
+      "data-testid": "ds-factors-array-remove-item",
+      onClick: function onClick() {
+        return handleItemRemove(index);
+      },
+      component: /*#__PURE__*/React.createElement(CloseM, null)
+    })));
+  })) : /*#__PURE__*/React.createElement(S.EmptyState, {
+    customIcon: /*#__PURE__*/React.createElement(InboxNoResultsL, null),
+    text: searchQuery ? texts.array.emptyResultsTitle : texts.array.emptyTitle,
+    label: searchQuery ? texts.array.emptyResultsDescription : texts.array.emptyDescription
+  })));
+};

package/dist/FactorValue/Array/components/ArrayLimit.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ArrayLimitProps } from '../Array.types';
+export declare const ArrayLimit: ({ limit, count, texts }: ArrayLimitProps) => React.JSX.Element;

package/dist/FactorValue/Array/components/ArrayLimit.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { IconAlert } from '@synerise/ds-alert';
+import * as S from '../Array.styles';
+export var ArrayLimit = function ArrayLimit(_ref) {
+  var limit = _ref.limit,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 0 : _ref$count,
+    texts = _ref.texts;
+  return /*#__PURE__*/React.createElement(S.Limit, null, /*#__PURE__*/React.createElement(S.LimitPart, null, count === limit ? /*#__PURE__*/React.createElement(IconAlert, {
+    iconAlert: true,
+    type: "warning",
+    message: texts.array.limitReached
+  }) : texts.array.limitPrefix), /*#__PURE__*/React.createElement(S.LimitPart, null, " " + count + "/" + limit));
+};

package/dist/FactorValue/Array/components/ArrayModal.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ArrayModalProps } from '../Array.types';
+export declare const ArrayModal: <ItemType extends "string" | "number">({ value, itemType, onApply, onCancel, visible, readOnly, texts, limit, collectorSuggestions, }: ArrayModalProps<ItemType>) => React.JSX.Element;