@reltio/components 1.4.1737 → 1.4.1738

package/cjs/components/MultipleInput/MultipleInput.d.ts

@@ -1,28 +1,14 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material/TextField';
+type MultipleInputProps = Omit<TextFieldProps, 'classes' | 'value' | 'onChange' | 'onKeyPress' | 'onKeyDown' | 'onFocus' | 'onBlur'> & {
+    values?: string | string[];
+    InputProps?: Omit<TextFieldProps['InputProps'], 'startAdornment' | 'inputComponent'>;
+    classes?: {
+        root?: string;
+    };
+    isCrossedOut?: boolean;
+    onChange?: (values: string[]) => void;
+    getValueLabel?: (value: string) => string;
+};
+declare const MultipleInput: ({ values: valuesProp, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: MultipleInputProps) => JSX.Element;
 export default MultipleInput;
-declare function MultipleInput({ values, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: {
-    [x: string]: any;
-    values?: any[];
-    InputProps?: {};
-    inputProps?: {};
-    classes?: {};
-    isCrossedOut: any;
-    onChange?: () => void;
-    getValueLabel?: any;
-}): JSX.Element;
-declare namespace MultipleInput {
-    namespace propTypes {
-        const values: PropTypes.Requireable<string[]>;
-        const InputProps: PropTypes.Requireable<PropTypes.InferProps<{
-            classes: PropTypes.Requireable<PropTypes.InferProps<{
-                root: PropTypes.Requireable<string>;
-            }>>;
-            inputComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        }>>;
-        const inputProps: PropTypes.Requireable<object>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const classes: PropTypes.Requireable<object>;
-        const getValueLabel: PropTypes.Requireable<(...args: any[]) => any>;
-        const isCrossedOut: PropTypes.Requireable<boolean>;
-    }
-}
-import PropTypes from 'prop-types';

package/cjs/components/MultipleInput/MultipleInput.js

@@ -57,38 +57,38 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
 var react_input_autosize_1 = __importDefault(require("react-input-autosize"));
 var classnames_1 = __importDefault(require("classnames"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var TextField_1 = __importDefault(require("@mui/material/TextField"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var react_1 = __importStar(require("react"));
-var ramda_1 = require("ramda");
+var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
 var utils_1 = require("../../core/utils");
-var styles_1 = require("./styles");
 var ValueChip_1 = __importDefault(require("../ValueChip/ValueChip"));
-var Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var styles_1 = require("./styles");
+var EMPTY_VALUES_EDIT_HINT = ui_i18n_1.default.text('Press Enter to add. You may enter multiple values');
+var isEmptyValue = (0, ramda_1.pipe)(ramda_1.trim, ramda_1.isEmpty);
 var AutosizeInputWrapper = (0, react_1.forwardRef)(function (props, ref) {
     var CustomInputComponent = props.CustomInputComponent, other = __rest(props, ["CustomInputComponent"]);
     return CustomInputComponent ? (react_1.default.createElement(CustomInputComponent, __assign({}, other, { ref: ref, customInput: react_input_autosize_1.default }))) : (react_1.default.createElement(react_input_autosize_1.default, __assign({}, other, { ref: ref })));
 });
-AutosizeInputWrapper.propTypes = {
-    CustomInputComponent: prop_types_1.default.elementType
-};
 AutosizeInputWrapper.displayName = 'AutosizeInputWrapper';
-var BACKSPACE_KEY_CODE = 8;
-var EMPTY_VALUES_EDIT_HINT = ui_i18n_1.default.text('Press Enter to add. You may enter multiple values');
-var isEmptyValue = (0, ramda_1.pipe)(ramda_1.trim, ramda_1.isEmpty);
 var MultipleInput = function (_a) {
     var _b;
-    var _c = _a.values, values = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? utils_1.noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? ramda_1.identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
+    var _c = _a.values, valuesProp = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? utils_1.noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? ramda_1.identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
     var styles = (0, styles_1.useStyles)();
     var _j = InputProps.classes || {}, root = _j.root, InputClasses = __rest(_j, ["root"]);
     var _k = (0, react_1.useState)(''), inputValue = _k[0], setInputValue = _k[1];
+    var _l = (0, react_1.useState)(false), isFocused = _l[0], setIsFocused = _l[1];
+    var values = (0, mdm_sdk_1.wrapInArrayIfNeeded)(valuesProp);
+    var hasValues = values.length > 0;
     var clearInputValue = function () { return setInputValue(''); };
+    var setFocused = function () { return setIsFocused(true); };
+    var setUnfocused = function () { return setIsFocused(false); };
     var removeValueAt = function (index) { return onChange((0, ramda_1.remove)(index, 1, values)); };
     var appendValue = function (value) { return onChange((0, ramda_1.uniq)(__spreadArray(__spreadArray([], values, true), [value], false))); };
-    var hasValues = values.length > 0;
     var appendInputValueIfNotEmpty = function () {
         if (!isEmptyValue(inputValue)) {
             appendValue(inputValue);
@@ -100,25 +100,10 @@ var MultipleInput = function (_a) {
             removeValueAt(-1);
         }
     };
-    var _l = (0, react_1.useState)(false), isFocused = _l[0], setIsFocused = _l[1];
-    var setFocused = function () { return setIsFocused(true); };
-    var setUnfocused = function () { return setIsFocused(false); };
     var hintText = !hasValues && isFocused ? EMPTY_VALUES_EDIT_HINT : '';
     return (react_1.default.createElement(Tooltip_1.default, { title: hintText },
         react_1.default.createElement(TextField_1.default, __assign({ variant: "standard" }, otherProps, { classes: {
                 root: classes.root
-            }, value: inputValue, onChange: (0, ramda_1.pipe)(utils_1.getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: (0, classnames_1.default)(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: (0, classnames_1.default)(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: (0, ramda_1.when)((0, ramda_1.propEq)('keyCode', BACKSPACE_KEY_CODE), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: (0, ramda_1.pipe)(appendInputValueIfNotEmpty, setUnfocused) }))));
-};
-MultipleInput.propTypes = {
-    values: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    InputProps: prop_types_1.default.shape({
-        classes: prop_types_1.default.shape({ root: prop_types_1.default.string }),
-        inputComponent: prop_types_1.default.elementType
-    }),
-    inputProps: prop_types_1.default.object,
-    onChange: prop_types_1.default.func,
-    classes: prop_types_1.default.object,
-    getValueLabel: prop_types_1.default.func,
-    isCrossedOut: prop_types_1.default.bool
+            }, value: inputValue, onChange: (0, ramda_1.pipe)(utils_1.getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (react_1.default.createElement(ValueChip_1.default, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: (0, classnames_1.default)(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: (0, classnames_1.default)(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: (0, ramda_1.when)((0, ramda_1.propEq)('key', 'Backspace'), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: (0, ramda_1.pipe)(appendInputValueIfNotEmpty, setUnfocused) }))));
 };
 exports.default = MultipleInput;

package/cjs/components/MultipleInput/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;

package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.d.ts

@@ -8,7 +8,7 @@ type CommonProps = Omit<TextFieldProps, 'onChange' | 'value'> & {
     isCrossedOut?: boolean;
 };
 type MultipleProps = CommonProps & {
-    value?: string[];
+    value?: string | string[];
     onChange: (values: string[]) => void;
     multiple: true;
 };
@@ -18,5 +18,5 @@ type SingleProps = CommonProps & {
     multiple?: false;
 };
 export type Props = MultipleProps | SingleProps;
-declare const TypeaheadEditor: ({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
+declare const TypeaheadEditor: ({ value: valueProp, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
 export default TypeaheadEditor;

package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -119,7 +119,7 @@ var ChangeMethod;
     ChangeMethod["Enter"] = "enter";
 })(ChangeMethod || (ChangeMethod = {}));
 var TypeaheadEditor = function (_a) {
-    var value = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
+    var valueProp = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
     var styles = (0, styles_1.useStyles)();
     var inputRef = (0, react_1.useRef)(null);
     var safePromise = (0, hooks_1.useSafePromise)();
@@ -132,6 +132,7 @@ var TypeaheadEditor = function (_a) {
     var pageSizeForRequest = max + 1;
     var displayedSuggestions = (0, react_1.useMemo)(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
+    var value = multiple === true && !(0, ramda_1.isNil)(valueProp) ? (0, mdm_sdk_1.wrapInArrayIfNeeded)(valueProp) : valueProp;
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
     var fetchSuggestions = (0, react_1.useCallback)(function (_a) {
         var value = _a.value;
@@ -226,8 +227,9 @@ var TypeaheadEditor = function (_a) {
             onChange(inputValue);
     }, [inputValue, onChange, multiple]);
     (0, react_1.useEffect)(function () {
+        var _a;
         if (multiple !== true)
-            setInputValue(value !== null && value !== void 0 ? value : '');
+            setInputValue((_a = value) !== null && _a !== void 0 ? _a : '');
     }, [value, multiple]);
     (0, hooks_1.useDidUpdateEffect)(function () {
         setPageNumber(1);

package/esm/components/MultipleInput/MultipleInput.d.ts

@@ -1,28 +1,14 @@
+/// <reference types="react" />
+import { TextFieldProps } from '@mui/material/TextField';
+type MultipleInputProps = Omit<TextFieldProps, 'classes' | 'value' | 'onChange' | 'onKeyPress' | 'onKeyDown' | 'onFocus' | 'onBlur'> & {
+    values?: string | string[];
+    InputProps?: Omit<TextFieldProps['InputProps'], 'startAdornment' | 'inputComponent'>;
+    classes?: {
+        root?: string;
+    };
+    isCrossedOut?: boolean;
+    onChange?: (values: string[]) => void;
+    getValueLabel?: (value: string) => string;
+};
+declare const MultipleInput: ({ values: valuesProp, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: MultipleInputProps) => JSX.Element;
 export default MultipleInput;
-declare function MultipleInput({ values, InputProps, inputProps, classes, isCrossedOut, onChange, getValueLabel, ...otherProps }: {
-    [x: string]: any;
-    values?: any[];
-    InputProps?: {};
-    inputProps?: {};
-    classes?: {};
-    isCrossedOut: any;
-    onChange?: () => void;
-    getValueLabel?: any;
-}): JSX.Element;
-declare namespace MultipleInput {
-    namespace propTypes {
-        const values: PropTypes.Requireable<string[]>;
-        const InputProps: PropTypes.Requireable<PropTypes.InferProps<{
-            classes: PropTypes.Requireable<PropTypes.InferProps<{
-                root: PropTypes.Requireable<string>;
-            }>>;
-            inputComponent: PropTypes.Requireable<PropTypes.ReactComponentLike>;
-        }>>;
-        const inputProps: PropTypes.Requireable<object>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const classes: PropTypes.Requireable<object>;
-        const getValueLabel: PropTypes.Requireable<(...args: any[]) => any>;
-        const isCrossedOut: PropTypes.Requireable<boolean>;
-    }
-}
-import PropTypes from 'prop-types';

package/esm/components/MultipleInput/MultipleInput.js

@@ -29,38 +29,38 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+import React, { forwardRef, useState } from 'react';
+import i18n from 'ui-i18n';
+import { identity, pipe, propEq, remove, uniq, when, trim, isEmpty } from 'ramda';
 import AutosizeInput from 'react-input-autosize';
 import classnames from 'classnames';
+import { wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
 import TextField from '@mui/material/TextField';
-import PropTypes from 'prop-types';
-import React, { forwardRef, useState } from 'react';
-import { identity, pipe, propEq, remove, uniq, when, trim, isEmpty } from 'ramda';
+import Tooltip from '@mui/material/Tooltip';
 import { getValue, noop } from '../../core/utils';
-import { useStyles } from './styles';
 import ValueChip from '../ValueChip/ValueChip';
-import Tooltip from '@mui/material/Tooltip';
-import i18n from 'ui-i18n';
+import { useStyles } from './styles';
+var EMPTY_VALUES_EDIT_HINT = i18n.text('Press Enter to add. You may enter multiple values');
+var isEmptyValue = pipe(trim, isEmpty);
 var AutosizeInputWrapper = forwardRef(function (props, ref) {
     var CustomInputComponent = props.CustomInputComponent, other = __rest(props, ["CustomInputComponent"]);
     return CustomInputComponent ? (React.createElement(CustomInputComponent, __assign({}, other, { ref: ref, customInput: AutosizeInput }))) : (React.createElement(AutosizeInput, __assign({}, other, { ref: ref })));
 });
-AutosizeInputWrapper.propTypes = {
-    CustomInputComponent: PropTypes.elementType
-};
 AutosizeInputWrapper.displayName = 'AutosizeInputWrapper';
-var BACKSPACE_KEY_CODE = 8;
-var EMPTY_VALUES_EDIT_HINT = i18n.text('Press Enter to add. You may enter multiple values');
-var isEmptyValue = pipe(trim, isEmpty);
 var MultipleInput = function (_a) {
     var _b;
-    var _c = _a.values, values = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
+    var _c = _a.values, valuesProp = _c === void 0 ? [] : _c, _d = _a.InputProps, InputProps = _d === void 0 ? {} : _d, _e = _a.inputProps, inputProps = _e === void 0 ? {} : _e, _f = _a.classes, classes = _f === void 0 ? {} : _f, isCrossedOut = _a.isCrossedOut, _g = _a.onChange, onChange = _g === void 0 ? noop : _g, _h = _a.getValueLabel, getValueLabel = _h === void 0 ? identity : _h, otherProps = __rest(_a, ["values", "InputProps", "inputProps", "classes", "isCrossedOut", "onChange", "getValueLabel"]);
     var styles = useStyles();
     var _j = InputProps.classes || {}, root = _j.root, InputClasses = __rest(_j, ["root"]);
     var _k = useState(''), inputValue = _k[0], setInputValue = _k[1];
+    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
+    var values = wrapInArrayIfNeeded(valuesProp);
+    var hasValues = values.length > 0;
     var clearInputValue = function () { return setInputValue(''); };
+    var setFocused = function () { return setIsFocused(true); };
+    var setUnfocused = function () { return setIsFocused(false); };
     var removeValueAt = function (index) { return onChange(remove(index, 1, values)); };
     var appendValue = function (value) { return onChange(uniq(__spreadArray(__spreadArray([], values, true), [value], false))); };
-    var hasValues = values.length > 0;
     var appendInputValueIfNotEmpty = function () {
         if (!isEmptyValue(inputValue)) {
             appendValue(inputValue);
@@ -72,25 +72,10 @@ var MultipleInput = function (_a) {
             removeValueAt(-1);
         }
     };
-    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
-    var setFocused = function () { return setIsFocused(true); };
-    var setUnfocused = function () { return setIsFocused(false); };
     var hintText = !hasValues && isFocused ? EMPTY_VALUES_EDIT_HINT : '';
     return (React.createElement(Tooltip, { title: hintText },
         React.createElement(TextField, __assign({ variant: "standard" }, otherProps, { classes: {
                 root: classes.root
-            }, value: inputValue, onChange: pipe(getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (React.createElement(ValueChip, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: classnames(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: classnames(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: when(propEq('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: when(propEq('keyCode', BACKSPACE_KEY_CODE), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: pipe(appendInputValueIfNotEmpty, setUnfocused) }))));
-};
-MultipleInput.propTypes = {
-    values: PropTypes.arrayOf(PropTypes.string),
-    InputProps: PropTypes.shape({
-        classes: PropTypes.shape({ root: PropTypes.string }),
-        inputComponent: PropTypes.elementType
-    }),
-    inputProps: PropTypes.object,
-    onChange: PropTypes.func,
-    classes: PropTypes.object,
-    getValueLabel: PropTypes.func,
-    isCrossedOut: PropTypes.bool
+            }, value: inputValue, onChange: pipe(getValue, setInputValue), InputProps: __assign(__assign({}, InputProps), { startAdornment: values.map(function (value, index) { return (React.createElement(ValueChip, { key: value, label: getValueLabel(value), onDelete: function () { return removeValueAt(index); } })); }), inputComponent: AutosizeInputWrapper, classes: __assign({ root: classnames(styles.inputRoot, root, (_b = {}, _b[styles.isCrossedOut] = isCrossedOut, _b)), input: classnames(styles.autosizeInput, InputClasses.input) }, InputClasses) }), inputProps: __assign(__assign({}, inputProps), { CustomInputComponent: InputProps.inputComponent }), onKeyPress: when(propEq('key', 'Enter'), appendInputValueIfNotEmpty), onKeyDown: when(propEq('key', 'Backspace'), popLastValueIfInputIsEmpty), onFocus: setFocused, onBlur: pipe(appendInputValueIfNotEmpty, setUnfocused) }))));
 };
 export default MultipleInput;

package/esm/components/MultipleInput/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"inputRoot" | "isCrossedOut" | "autosizeInput">;

package/esm/components/editors/TypeaheadEditor/TypeaheadEditor.d.ts

@@ -8,7 +8,7 @@ type CommonProps = Omit<TextFieldProps, 'onChange' | 'value'> & {
     isCrossedOut?: boolean;
 };
 type MultipleProps = CommonProps & {
-    value?: string[];
+    value?: string | string[];
     onChange: (values: string[]) => void;
     multiple: true;
 };
@@ -18,5 +18,5 @@ type SingleProps = CommonProps & {
     multiple?: false;
 };
 export type Props = MultipleProps | SingleProps;
-declare const TypeaheadEditor: ({ value, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
+declare const TypeaheadEditor: ({ value: valueProp, max, getSuggestions, onChange, multiple, fullWidth, InputProps, isCrossedOut, ...inputProps }: Props) => JSX.Element;
 export default TypeaheadEditor;

package/esm/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -66,9 +66,9 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 import React, { useCallback, useRef, useMemo, useState, useEffect } from 'react';
-import { identity, isEmpty, nthArg, path, pipe, prop, remove, T, uniq } from 'ramda';
+import { identity, isEmpty, nthArg, path, pipe, prop, remove, T, uniq, isNil } from 'ramda';
 import classnames from 'classnames';
-import { debounce, isEmptyValue } from '@reltio/mdm-sdk';
+import { debounce, isEmptyValue, wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
 import Autosuggest from 'react-autosuggest';
 import AutosizeInput from 'react-input-autosize';
 import TextField from '@mui/material/TextField';
@@ -91,7 +91,7 @@ var ChangeMethod;
     ChangeMethod["Enter"] = "enter";
 })(ChangeMethod || (ChangeMethod = {}));
 var TypeaheadEditor = function (_a) {
-    var value = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
+    var valueProp = _a.value, _b = _a.max, max = _b === void 0 ? PAGE_SIZE : _b, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _c = _a.InputProps, InputProps = _c === void 0 ? {} : _c, _d = _a.isCrossedOut, isCrossedOut = _d === void 0 ? false : _d, inputProps = __rest(_a, ["value", "max", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps", "isCrossedOut"]);
     var styles = useStyles();
     var inputRef = useRef(null);
     var safePromise = useSafePromise();
@@ -104,6 +104,7 @@ var TypeaheadEditor = function (_a) {
     var pageSizeForRequest = max + 1;
     var displayedSuggestions = useMemo(function () { return suggestions.slice(0, pageNumber * max); }, [suggestions, pageNumber, max]);
     var showMoreButton = suggestions.length > displayedSuggestions.length;
+    var value = multiple === true && !isNil(valueProp) ? wrapInArrayIfNeeded(valueProp) : valueProp;
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
     var fetchSuggestions = useCallback(function (_a) {
         var value = _a.value;
@@ -198,8 +199,9 @@ var TypeaheadEditor = function (_a) {
             onChange(inputValue);
     }, [inputValue, onChange, multiple]);
     useEffect(function () {
+        var _a;
         if (multiple !== true)
-            setInputValue(value !== null && value !== void 0 ? value : '');
+            setInputValue((_a = value) !== null && _a !== void 0 ? _a : '');
     }, [value, multiple]);
     useDidUpdateEffect(function () {
         setPageNumber(1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1737",
+  "version": "1.4.1738",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",