@synerise/ds-factors 1.2.2 → 1.3.1

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

@@ -0,0 +1,161 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { IconAlert } from '@synerise/ds-alert';
+import Button, { ButtonToggle } from '@synerise/ds-button';
+import ButtonGroup from '@synerise/ds-button-group';
+import Icon, { CodeM, EditM, TrashM } from '@synerise/ds-icon';
+import { SearchInput } from '@synerise/ds-search';
+import { useIsMounted } from '@synerise/ds-utils';
+import * as S from '../Array.styles';
+import { ArrayCreator } from './ArrayCreator';
+import { ArrayRaw } from './ArrayRaw';
+import { arrayWithUUID } from '../Array.utils';
+import { ArrayLimit } from './ArrayLimit';
+import { CopyButton } from './CopyButton';
+import { MODAL_VIEWPORT_HEIGHT } from '../Array.const';
+export var ArrayModal = function ArrayModal(_ref) {
+  var value = _ref.value,
+    itemType = _ref.itemType,
+    onApply = _ref.onApply,
+    onCancel = _ref.onCancel,
+    visible = _ref.visible,
+    readOnly = _ref.readOnly,
+    texts = _ref.texts,
+    limit = _ref.limit,
+    collectorSuggestions = _ref.collectorSuggestions;
+  var _useState = useState(arrayWithUUID(value || [])),
+    arrayValue = _useState[0],
+    setArrayValue = _useState[1];
+  var _useState2 = useState('creator'),
+    currentMode = _useState2[0],
+    setCurrentMode = _useState2[1];
+  var _useState3 = useState(''),
+    searchQuery = _useState3[0],
+    setSearchQuery = _useState3[1];
+  var _useState4 = useState(),
+    rawEditorError = _useState4[0],
+    setRawEditorError = _useState4[1];
+  var isMounted = useIsMounted();
+  useEffect(function () {
+    isMounted.current && setArrayValue(arrayWithUUID(value || []));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value, isMounted]);
+  var handleRawEditorError = function handleRawEditorError(errorMessage) {
+    setRawEditorError(errorMessage);
+  };
+  var plainArrayValue = useMemo(function () {
+    return arrayValue.map(function (item) {
+      return item.value;
+    });
+  }, [arrayValue]);
+  var handleOk = useCallback(function () {
+    onApply(plainArrayValue);
+    setCurrentMode('creator');
+  }, [onApply, plainArrayValue]);
+  var handleCancel = useCallback(function () {
+    onCancel();
+    setArrayValue(arrayWithUUID(value || []));
+    setCurrentMode('creator');
+  }, [onCancel, value]);
+  var showClearButton = !!(arrayValue != null && arrayValue.length) && !readOnly;
+  var handleClear = useCallback(function () {
+    setArrayValue([]);
+  }, []);
+  var clearButton = useMemo(function () {
+    return /*#__PURE__*/React.createElement(S.ModalFooterLeftSide, null, showClearButton && /*#__PURE__*/React.createElement(Button, {
+      onClick: handleClear,
+      "data-testid": "array-modal-clear-button",
+      type: "custom-color-ghost",
+      color: "red",
+      mode: "icon-label"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(TrashM, null)
+    }), texts.array.clearButtonLabel));
+  }, [showClearButton, texts.array.clearButtonLabel, handleClear]);
+  var handleSearchQueryChange = function handleSearchQueryChange(query) {
+    setSearchQuery(query || '');
+  };
+  var handleValueChange = useCallback(function (updatedArray) {
+    setArrayValue(updatedArray);
+    setSearchQuery('');
+  }, []);
+  var mainModalContent = useMemo(function () {
+    return currentMode === 'creator' ? /*#__PURE__*/React.createElement(ArrayCreator, {
+      texts: texts,
+      readOnly: readOnly,
+      itemType: itemType,
+      value: arrayValue,
+      limit: limit,
+      searchQuery: searchQuery,
+      onValueChange: handleValueChange,
+      collectorSuggestions: collectorSuggestions
+    }) : /*#__PURE__*/React.createElement(ArrayRaw, {
+      readOnly: readOnly,
+      onError: handleRawEditorError,
+      itemType: itemType,
+      limit: limit,
+      onValueChange: handleValueChange,
+      texts: texts,
+      value: arrayValue
+    });
+  }, [currentMode, texts, readOnly, itemType, arrayValue, limit, searchQuery, handleValueChange, collectorSuggestions]);
+  return /*#__PURE__*/React.createElement(S.Modal, {
+    size: "medium",
+    title: texts.array.modalTitle,
+    headerBottomBar: /*#__PURE__*/React.createElement(S.ModalSubHeader, null, /*#__PURE__*/React.createElement(S.LeftSide, null, /*#__PURE__*/React.createElement(ButtonGroup, {
+      compact: false
+    }, /*#__PURE__*/React.createElement(ButtonToggle, {
+      disabled: !!rawEditorError,
+      mode: "icon-label",
+      type: "ghost",
+      activated: currentMode === 'creator',
+      onClick: function onClick() {
+        return setCurrentMode('creator');
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(EditM, null)
+    }), " ", texts.array.creatorButtonLabel), /*#__PURE__*/React.createElement(ButtonToggle, {
+      mode: "icon-label",
+      activated: currentMode === 'raw',
+      type: "ghost",
+      onClick: function onClick() {
+        return setCurrentMode('raw');
+      }
+    }, /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(CodeM, null)
+    }), " ", texts.array.rawButtonLabel))), /*#__PURE__*/React.createElement(S.RightSide, null, rawEditorError ? /*#__PURE__*/React.createElement(IconAlert, {
+      iconAlert: true,
+      type: "alert",
+      message: rawEditorError
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, limit && /*#__PURE__*/React.createElement(ArrayLimit, {
+      limit: limit,
+      count: arrayValue.length,
+      texts: texts
+    })), /*#__PURE__*/React.createElement(CopyButton, {
+      texts: texts,
+      copyValue: (plainArrayValue == null ? void 0 : plainArrayValue.join(',')) || ''
+    }), /*#__PURE__*/React.createElement(S.SearchWrapper, null, /*#__PURE__*/React.createElement(SearchInput, {
+      disabled: currentMode === 'raw',
+      closeOnClickOutside: true,
+      value: searchQuery,
+      onChange: handleSearchQueryChange,
+      onClear: handleSearchQueryChange,
+      placeholder: texts.array.searchPlaceholder,
+      clearTooltip: texts.array.searchClearTooltip
+    })))),
+    closable: true,
+    onOk: !rawEditorError ? handleOk : undefined,
+    onCancel: handleCancel,
+    open: visible,
+    texts: {
+      okButton: texts.modalApply,
+      cancelButton: texts.modalCancel
+    },
+    bodyStyle: {
+      padding: 0
+    },
+    footer: readOnly ? null : undefined,
+    prefix: clearButton,
+    viewportHeight: MODAL_VIEWPORT_HEIGHT,
+    maxViewportHeight: currentMode === 'creator' ? MODAL_VIEWPORT_HEIGHT : undefined
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, mainModalContent));
+};

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

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

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

@@ -0,0 +1,69 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { arrayWithUUID, isArrayOfNumbersAsString, sanitiseValues } from '../Array.utils';
+import * as S from '../Array.styles';
+export var ArrayRaw = function ArrayRaw(_ref) {
+  var _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    itemType = _ref.itemType,
+    onValueChange = _ref.onValueChange,
+    readOnly = _ref.readOnly,
+    texts = _ref.texts,
+    limit = _ref.limit,
+    onError = _ref.onError;
+  var ref = useRef(null);
+  var plainValues = useMemo(function () {
+    return value.map(function (item) {
+      return item.value;
+    }).join(',');
+  }, [value]);
+  var _useState = useState(plainValues || ''),
+    textareaValue = _useState[0],
+    setTextareaValue = _useState[1];
+  useEffect(function () {
+    var _ref$current;
+    if (document.activeElement !== ((_ref$current = ref.current) == null || (_ref$current = _ref$current.resizableTextArea) == null ? void 0 : _ref$current.textArea)) {
+      setTextareaValue(plainValues || '');
+    }
+  }, [plainValues]);
+  var handleChange = function handleChange(event) {
+    var stringifiedValue = event.target.value;
+    setTextareaValue(stringifiedValue);
+    if (!stringifiedValue) {
+      onError(null);
+      onValueChange([]);
+      return;
+    }
+    var items = (stringifiedValue == null ? void 0 : stringifiedValue.split(',')) || [];
+    var sanitisedItems = items.map(sanitiseValues);
+    var lastItemIsDelimiter = sanitisedItems.at(sanitisedItems.length - 1) === '';
+    var itemsToValidate = lastItemIsDelimiter ? [].concat(sanitisedItems.slice(0, -1)) : sanitisedItems;
+    var exceedsLimit = limit && items.length > limit;
+    if (itemType === 'number' && !isArrayOfNumbersAsString(itemsToValidate)) {
+      onError(texts.array.numericValidationError);
+      return;
+    }
+    if (exceedsLimit) {
+      onError(texts.array.limitExceeded);
+      return;
+    }
+    onError(null);
+    if (itemType === 'string') {
+      onValueChange(arrayWithUUID(itemsToValidate));
+    } else {
+      onValueChange(arrayWithUUID(itemsToValidate.map(function (item) {
+        return parseFloat(item);
+      })));
+    }
+  };
+  return /*#__PURE__*/React.createElement(S.TextArea, {
+    ref: ref,
+    "data-testid": "array-raw-textarea",
+    readOnly: readOnly,
+    spellCheck: "false",
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    autoComplete: "off",
+    onChange: !readOnly ? handleChange : undefined,
+    value: textareaValue
+  });
+};

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

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

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

@@ -0,0 +1,42 @@
+import React, { useCallback, useState } from 'react';
+import copy from 'copy-to-clipboard';
+import Tooltip from '@synerise/ds-tooltip';
+import Button from '@synerise/ds-button';
+import Icon, { CopyClipboardM } from '@synerise/ds-icon';
+export var CopyButton = function CopyButton(_ref) {
+  var copyValue = _ref.copyValue,
+    texts = _ref.texts;
+  var _useState = useState(false),
+    tooltipVisible = _useState[0],
+    setTooltipVisible = _useState[1];
+  var _useState2 = useState(texts.array.copyTooltip),
+    tooltipTitle = _useState2[0],
+    setTooltipTitle = _useState2[1];
+  var handleCopy = useCallback(function () {
+    if (copyValue && copy(copyValue)) {
+      setTooltipTitle(texts.array.copiedTooltip);
+      setTooltipVisible(true);
+    }
+  }, [copyValue, setTooltipTitle, texts.array.copiedTooltip]);
+  var handleMouseEnter = useCallback(function (event) {
+    event.stopPropagation();
+    setTooltipTitle(texts.array.copyTooltip);
+    setTooltipVisible(true);
+  }, [setTooltipVisible, texts.array]);
+  var handleMouseLeave = useCallback(function (event) {
+    event.stopPropagation();
+    setTooltipVisible(false);
+  }, [setTooltipVisible]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipTitle,
+    visible: tooltipVisible
+  }, /*#__PURE__*/React.createElement(Button, {
+    onClick: handleCopy,
+    type: "ghost",
+    mode: "single-icon",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CopyClipboardM, null)
+  })));
+};

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { FactorsTexts } from '../../../Factors.types';
+type UseCollectorProps = {
+    limit?: number;
+    collectorCount: number;
+    arrayValueCount?: number;
+    texts: FactorsTexts;
+};
+export declare const useCollector: ({ limit, collectorCount, arrayValueCount, texts }: UseCollectorProps) => {
+    disabled: boolean;
+    error: boolean;
+    errorMessage: import("react").ReactNode;
+    setHasTypeError: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    exceedsLimit: (newItems: number) => boolean;
+    addEnabled: boolean;
+};
+export {};

package/dist/FactorValue/Array/hooks/useCollector.js

@@ -0,0 +1,40 @@
+import { useState, useCallback, useMemo } from 'react';
+export var useCollector = function useCollector(_ref) {
+  var limit = _ref.limit,
+    collectorCount = _ref.collectorCount,
+    _ref$arrayValueCount = _ref.arrayValueCount,
+    arrayValueCount = _ref$arrayValueCount === void 0 ? 0 : _ref$arrayValueCount,
+    texts = _ref.texts;
+  var _useState = useState(false),
+    hasTypeError = _useState[0],
+    setHasTypeError = _useState[1];
+  var exceedsLimit = useCallback(function (newItems) {
+    if (limit) {
+      return newItems + arrayValueCount > limit;
+    }
+    return false;
+  }, [arrayValueCount, limit]);
+  var collectorExceedsLimit = useMemo(function () {
+    return exceedsLimit(collectorCount);
+  }, [exceedsLimit, collectorCount]);
+  var errorMessage = useMemo(function () {
+    if (hasTypeError) {
+      return texts.array.numericValidationError;
+    }
+    if (collectorExceedsLimit) {
+      return texts.array.limitExceeded;
+    }
+    return undefined;
+  }, [hasTypeError, collectorExceedsLimit, texts.array.limitExceeded, texts.array.numericValidationError]);
+  var addEnabled = useMemo(function () {
+    return !hasTypeError && !collectorExceedsLimit;
+  }, [hasTypeError, collectorExceedsLimit]);
+  return {
+    disabled: !!(limit && arrayValueCount >= limit),
+    error: !!errorMessage,
+    errorMessage: errorMessage,
+    setHasTypeError: setHasTypeError,
+    exceedsLimit: exceedsLimit,
+    addEnabled: addEnabled
+  };
+};

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, relativeDateProps, }: 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, }: FactorValueProps) => React.JSX.Element;
 export default FactorValue;

package/dist/FactorValue/FactorValue.js

@@ -27,7 +27,8 @@ var FactorValue = function FactorValue(_ref) {
     _ref$readOnly = _ref.readOnly,
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     getMenuEntryProps = _ref.getMenuEntryProps,
-    relativeDateProps = _ref.relativeDateProps;
+    relativeDateProps = _ref.relativeDateProps,
+    arrayProps = _ref.arrayProps;
   var inputType = React.useMemo(function () {
     if (!selectedFactor) {
       return undefined;
@@ -45,6 +46,7 @@ var FactorValue = function FactorValue(_ref) {
       parameters: ['parameter', 'contextParameter'].indexOf(selectedFactorType) >= 0 ? parameters : undefined,
       withoutTypeSelector: withoutTypeSelector,
       texts: texts,
+      arrayProps: arrayProps,
       formulaEditor: formulaEditor,
       opened: opened,
       loading: loading,
@@ -59,7 +61,7 @@ var FactorValue = function FactorValue(_ref) {
       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]);
+  }, [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]);
   return /*#__PURE__*/React.createElement(S.FactorInput, {
     inputType: selectedFactorType,
     inputTextType: textType,

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

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

package/dist/Factors.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DefinedFactorTypes, FactorsProps, SelectedFactorType } from './Factors.types';
 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, readOnly, 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, getMenuEntryProps, }: FactorsProps) => React.JSX.Element;
 export default Factors;

package/dist/Factors.js

@@ -14,6 +14,7 @@ import NumberInput from './FactorValue/Number/NumberInput';
 import DateRangeInput from './FactorValue/DateRange/DateRange';
 import RelativeDateInput from './FactorValue/RelativeDate/RelativeDate';
 import { useTexts } from './hooks/useTexts';
+import { Array } from './FactorValue/Array/Array';
 export var FACTOR_TYPE_MAPPING = {
   text: {
     icon: /*#__PURE__*/React.createElement(TextM, null),
@@ -48,7 +49,7 @@ export var FACTOR_TYPE_MAPPING = {
   array: {
     icon: /*#__PURE__*/React.createElement(ListM, null),
     name: 'Array',
-    component: TextInput
+    component: Array
   },
   date: {
     icon: /*#__PURE__*/React.createElement(Calendar2M, null),
@@ -97,6 +98,7 @@ var Factors = function Factors(_ref) {
     customFactorValueComponents = _ref.customFactorValueComponents,
     error = _ref.error,
     inputProps = _ref.inputProps,
+    arrayProps = _ref.arrayProps,
     readOnly = _ref.readOnly,
     getMenuEntryProps = _ref.getMenuEntryProps;
   var allTexts = useTexts(texts);
@@ -148,6 +150,7 @@ var Factors = function Factors(_ref) {
     texts: allTexts,
     opened: opened,
     inputProps: inputProps,
+    arrayProps: arrayProps,
     loading: loading,
     factorKey: factorKey,
     preventAutoloadData: preventAutoloadData,

package/dist/Factors.types.d.ts

@@ -1,11 +1,13 @@
 import type { ReactText, ReactNode, ComponentType } from 'react';
+import type { CollectorValue } from '@synerise/ds-collector';
 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 { DateRangePickerTexts as DateRangeTexts } from '@synerise/ds-date-range-picker';
 import type { MenuItemProps } from '@synerise/ds-menu';
 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';
+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];
@@ -51,7 +53,9 @@ export type ParameterItem = {
     disabled?: boolean;
     excludeFromSearchResults?: boolean;
 };
-export type FactorValueType = string | number | null | Date | RelativeDateValueType | undefined | DynamicKeyValueType | FormulaValueType | ParameterValueType | Partial<DateFilter>;
+export type ArrayItemType = 'string' | 'number';
+export type ArrayValue = ArrayValueElement<'string'>[] | ArrayValueElement<'number'>[];
+export type FactorValueType = string | number | null | Date | RelativeDateValueType | undefined | DynamicKeyValueType | FormulaValueType | ArrayValue | ParameterValueType | Partial<DateFilter>;
 export type SelectedFactorType = {
     name: string;
     icon: ReactNode;
@@ -89,6 +93,29 @@ export type FactorsTexts = {
         buttonPlaceholder: string;
         defaultName: string;
     };
+    array: {
+        triggerLabel: ReactNode;
+        modalTitle: ReactNode;
+        emptyTitle: ReactNode;
+        emptyDescription: ReactNode;
+        emptyResultsTitle: ReactNode;
+        emptyResultsDescription: ReactNode;
+        searchPlaceholder: string;
+        searchClearTooltip: ReactNode;
+        limitPrefix: ReactNode;
+        collectorPlaceholder: string;
+        collectorAdd: ReactNode;
+        collectorCancel: ReactNode;
+        creatorButtonLabel: ReactNode;
+        rawButtonLabel: ReactNode;
+        clearButtonLabel: ReactNode;
+        deleteItemTooltip: ReactNode;
+        numericValidationError: ReactNode;
+        limitReached: ReactNode;
+        limitExceeded: ReactNode;
+        copiedTooltip: ReactNode;
+        copyTooltip: ReactNode;
+    };
     parameter: {
         searchPlaceholder: string;
         noResults: string;
@@ -107,6 +134,11 @@ export type FactorsTexts = {
     };
 };
 export type FactorTypeMapping = Record<DefinedFactorTypes, Partial<SelectedFactorType>>;
+export type ArrayProps = {
+    itemType?: ArrayItemType;
+    limit?: number;
+    collectorSuggestions?: CollectorValue[];
+};
 export type FactorsProps = {
     factorKey?: ReactText;
     error?: boolean;
@@ -123,6 +155,7 @@ export type FactorsProps = {
     onDeactivate?: () => void;
     onChangeValue: (value: FactorValueType) => void;
     value: FactorValueType;
+    arrayProps?: ArrayProps;
     textType?: LiteralStringUnion<'autocomplete' | 'expansible' | 'default'>;
     autoResize?: AutoResizeProp;
     relativeDateProps?: {
@@ -166,11 +199,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' | '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' | 'arrayProps' | 'getMenuEntryProps'> & {
     texts: FactorsTexts;
     selectedFactor: SelectedFactorType;
 };
-export type FactorValueComponentProps = Pick<FactorsProps, 'value' | 'parameters' | 'allowClear' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps' | 'autoResize' | 'readOnly' | 'getMenuEntryProps'> & {
+export type FactorValueComponentProps = Pick<FactorsProps, 'value' | 'parameters' | 'allowClear' | 'autocompleteText' | 'withoutTypeSelector' | 'textType' | 'opened' | 'getPopupContainerOverride' | 'onActivate' | 'onDeactivate' | 'error' | 'inputProps' | 'autoResize' | 'readOnly' | 'arrayProps' | 'getMenuEntryProps'> & {
     texts: FactorsTexts;
     onChange: (value: FactorValueType) => void;
     factorType: FactorType;

package/dist/hooks/useTexts.d.ts

@@ -1,3 +1,3 @@
-import { DeepPartial } from '@synerise/ds-utils';
+import type { DeepPartial } from '@synerise/ds-utils';
 import type { FactorsTexts } from '../Factors.types';
 export declare const useTexts: (defaultTexts?: DeepPartial<FactorsTexts>) => FactorsTexts;

package/dist/hooks/useTexts.js

@@ -107,6 +107,92 @@ export var useTexts = function useTexts(defaultTexts) {
           defaultMessage: 'Formula'
         })
       },
+      array: {
+        triggerLabel: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.TRIGGER_LABEL',
+          defaultMessage: 'Define array'
+        }),
+        modalTitle: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.MODAL_TITLE',
+          defaultMessage: 'Array'
+        }),
+        clearButtonLabel: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.CLEAR_BUTTON',
+          defaultMessage: 'Clear all'
+        }),
+        creatorButtonLabel: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.CREATOR',
+          defaultMessage: 'Creator'
+        }),
+        rawButtonLabel: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.RAW_BUTTON_LABEL',
+          defaultMessage: 'Raw'
+        }),
+        searchPlaceholder: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.SEARCH_PLACEHOLDER',
+          defaultMessage: 'Search'
+        }),
+        collectorPlaceholder: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.COLLECTOR_PLACEHOLDER',
+          defaultMessage: 'Type value or paste multiple values separated by `,`'
+        }),
+        collectorAdd: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.COLLECTOR_ADD',
+          defaultMessage: 'Add'
+        }),
+        collectorCancel: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.COLLECTOR_CANCEL',
+          defaultMessage: 'Cancel'
+        }),
+        searchClearTooltip: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.SEARCH_CLEAR_TOOLTIP',
+          defaultMessage: 'Clear'
+        }),
+        deleteItemTooltip: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.DELETE_ITEM_TOOLTIP',
+          defaultMessage: 'Delete'
+        }),
+        emptyTitle: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.EMPTY_TITLE',
+          defaultMessage: 'No items defined yet'
+        }),
+        emptyDescription: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.EMPTY_DESCRIPTION',
+          defaultMessage: 'This is a simple empty state example text. You can easily change it.'
+        }),
+        emptyResultsTitle: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.EMPTY_RESULTS_TITLE',
+          defaultMessage: 'No items match your query'
+        }),
+        emptyResultsDescription: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.EMPTY_RESULTS_DESCRIPTION',
+          defaultMessage: 'This is a simple empty state example text. You can easily change it.'
+        }),
+        limitPrefix: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.LIMIT_PREFIX',
+          defaultMessage: 'Limit'
+        }),
+        numericValidationError: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.NUMERIC_VALIDATION_ERROR',
+          defaultMessage: 'Some of the values are not a number'
+        }),
+        limitReached: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.LIMIT_REACHED',
+          defaultMessage: 'Limit has been reached'
+        }),
+        limitExceeded: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.LIMIT_EXCEEDED',
+          defaultMessage: 'Adding these items will exceed maximum items limit'
+        }),
+        copiedTooltip: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.COPIED',
+          defaultMessage: 'Copied'
+        }),
+        copyTooltip: intl.formatMessage({
+          id: 'DS.FACTORS.ARRAY.COPY-VALUE',
+          defaultMessage: 'Copy value'
+        })
+      },
       parameter: {
         searchPlaceholder: intl.formatMessage({
           id: 'DS.FACTORS.PARAMETER.SEARCH_PLACEHOLDER',