@reltio/components 1.4.1381 → 1.4.1383

package/cjs/components/editors/DependentLookupEditor/DependentLookupEditor.js

@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEBOUNCE_INTERVAL = void 0;
 var react_1 = __importStar(require("react"));
+var react_select_1 = require("react-select");
 var prop_types_1 = __importDefault(require("prop-types"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Select_1 = __importDefault(require("../../ReactSelect/Select"));
@@ -69,6 +70,7 @@ var useAutopopulation_1 = __importDefault(require("./useAutopopulation"));
 var useSavingFocus_1 = __importDefault(require("./useSavingFocus"));
 var LoadMoreButton_1 = __importDefault(require("../../commonReactSelectComponents/LoadMoreButton"));
 var hooks_1 = require("../../../hooks");
+var Input = function (props) { return react_1.default.createElement(react_select_1.components.Input, __assign({}, props, { isHidden: false })); };
 var SelectComponents = {
     IndicatorSeparator: utils_1.EmptyStub,
     LoadingIndicator: utils_1.EmptyStub,
@@ -76,7 +78,8 @@ var SelectComponents = {
     DropdownIndicator: DropdownIndicator_1.default,
     Menu: MenuWithPopper_1.default,
     MenuList: MenuList_1.default,
-    MultiValue: MultiValueChip_1.default
+    MultiValue: MultiValueChip_1.default,
+    Input: Input
 };
 exports.DEBOUNCE_INTERVAL = 400;
 var MAX_DEPENDENT_LOOKUP_VALUES = 50;
@@ -85,6 +88,10 @@ var DependentLookupEditor = function (_a) {
     var inputRef = (0, react_1.useRef)(null);
     var selectRef = (0, react_1.useRef)(null);
     var styles = (0, styles_1.useStyles)();
+    var _d = (0, react_1.useState)(''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = (0, react_1.useState)([]), options = _e[0], setOptions = _e[1];
+    var _f = (0, react_1.useState)(1), pageNumber = _f[0], setPageNumber = _f[1];
+    var _g = (0, react_1.useState)(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
     (0, useLookupsResolver_1.default)({
         lookups: value,
         resolvedValues: lookups[lookupTypeCode],
@@ -92,15 +99,55 @@ var DependentLookupEditor = function (_a) {
         onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
     });
     (0, useSavingFocus_1.default)(selectRef, inputRef, disabled);
-    var _d = (0, react_1.useState)(''), inputValue = _d[0], setInputValue = _d[1];
-    var _e = (0, react_1.useState)([]), options = _e[0], setOptions = _e[1];
-    var _f = (0, react_1.useState)(1), pageNumber = _f[0], setPageNumber = _f[1];
-    var _g = (0, react_1.useState)(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
-    var handleInputChange = function (value) {
-        if (value !== inputValue) {
-            setInputValue(value);
+    (0, react_1.useEffect)(function () {
+        if (!multiple) {
+            setInputValue((0, helpers_1.getOptionLabel)(value));
+            setOptions(defaultOptions);
             setPageNumber(1);
-            debouncedLoadOptions(value, setOptions);
+        }
+    }, [value]);
+    var handleChange = function (value) {
+        markAsTouched();
+        onChange(value);
+    };
+    var handleFocus = function () {
+        value && selectRef.current.select.inputRef.select();
+    };
+    var resetOptions = function () {
+        setPageNumber(1);
+        debouncedLoadOptions('', setOptions);
+    };
+    var restoreSelectedOption = function () {
+        if (!multiple && inputValue && inputValue !== (0, helpers_1.getOptionLabel)(value)) {
+            setInputValue((0, helpers_1.getOptionLabel)(value));
+            resetOptions();
+        }
+    };
+    var handleInputChange = function (newValue, _a) {
+        var action = _a.action;
+        switch (action) {
+            case 'menu-close': {
+                restoreSelectedOption();
+                break;
+            }
+            case 'input-blur': {
+                if (multiple && inputValue) {
+                    setInputValue('');
+                    resetOptions();
+                    break;
+                }
+                restoreSelectedOption();
+                break;
+            }
+            case 'input-change': {
+                setInputValue(newValue);
+                setPageNumber(1);
+                debouncedLoadOptions(newValue, setOptions);
+                if (!multiple && newValue === '') {
+                    handleChange('');
+                }
+                break;
+            }
         }
     };
     var loadOptions = (0, react_1.useCallback)(function (value, pageNumber) {
@@ -120,7 +167,8 @@ var DependentLookupEditor = function (_a) {
             .finally(function () { return setOptionsAreLoading(false); });
     }, [max, lookupTypeCode, parents]);
     var loadMoreOptions = (0, react_1.useCallback)(function () {
-        loadOptions(inputValue, pageNumber + 1).then(function (buildOptions) {
+        var filterValue = inputValue !== (0, helpers_1.getOptionLabel)(value) ? inputValue : '';
+        loadOptions(multiple ? inputValue : filterValue, pageNumber + 1).then(function (buildOptions) {
             setOptions(function (options) { return (0, ramda_1.concat)(options.slice(0, pageNumber * max), buildOptions); });
             setPageNumber(function (page) { return page + 1; });
         });
@@ -150,10 +198,7 @@ var DependentLookupEditor = function (_a) {
             container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); }
         }, noOptionsMessage: function () {
             return optionsAreLoading && !showMoreButton ? ui_i18n_1.default.text('Loading...') : ui_i18n_1.default.text('No results found');
-        }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: handleInputChange, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: (0, ramda_1.either)((0, ramda_1.prop)('value'), (0, ramda_1.prop)('lookupCode')), getOptionLabel: helpers_1.getOptionLabel, onChange: function (value) {
-            markAsTouched();
-            onChange(value);
-        }, value: (0, ramda_1.defaultTo)(multiple ? [] : null, value), menuListFooter: showMoreButton && react_1.default.createElement(LoadMoreButton_1.default, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
+        }, components: SelectComponents, isClearable: true, isSearchable: true, controlShouldRenderValue: multiple, inputValue: inputValue, filterOption: multiple ? undefined : ramda_1.T, onInputChange: handleInputChange, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: (0, ramda_1.either)((0, ramda_1.prop)('value'), (0, ramda_1.prop)('lookupCode')), getOptionLabel: helpers_1.getOptionLabel, onChange: handleChange, onFocus: multiple ? undefined : handleFocus, value: (0, ramda_1.defaultTo)(multiple ? [] : null, value), menuListFooter: showMoreButton && react_1.default.createElement(LoadMoreButton_1.default, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
 };
 DependentLookupEditor.propTypes = {
     multiple: prop_types_1.default.bool,

package/cjs/components/editors/DependentLookupEditor/helpers.d.ts

@@ -1,7 +1,4 @@
-export function getOptionLabel({ lookupCode, value }: {
-    lookupCode: any;
-    value: any;
-}): any;
+export function getOptionLabel(obj: any): any;
 export function buildLookupOptions(lookups: any): {
     lookupCode: string;
     value: any;

package/cjs/components/editors/DependentLookupEditor/helpers.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.buildLookupOptions = exports.getOptionLabel = void 0;
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var getOptionLabel = function (_a) {
-    var lookupCode = _a.lookupCode, value = _a.value;
+var getOptionLabel = function (obj) {
+    if (!obj)
+        return '';
+    var lookupCode = obj.lookupCode, value = obj.value;
     return (0, mdm_sdk_1.getLookupLabel)(lookupCode, value);
 };
 exports.getOptionLabel = getOptionLabel;

package/cjs/components/workflow/hooks/useWorkflowActions.js

@@ -34,13 +34,13 @@ var WorkflowTasksContext_1 = require("../../../contexts/WorkflowTasksContext");
 var helpers_1 = require("../helpers");
 var useWorkflowActions = function (_a) {
     var possibleActions = _a.possibleActions, assignee = _a.assignee, taskId = _a.taskId, isOpen = _a.isOpen;
-    var loadWorkflowTasks = ((0, react_1.useContext)(WorkflowTasksContext_1.WorkflowTasksContext) || {}).loadWorkflowTasks;
+    var _b = (0, react_1.useContext)(WorkflowTasksContext_1.WorkflowTasksContext) || {}, loadTasks = _b.loadTasks, onActionSuccess = _b.onActionSuccess;
     var workflowPath = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getWorkflowPath);
     var environment = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getWorkflowEnvironmentUrl);
     var tenant = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getTenant);
     var username = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getUserName);
     var entityUri = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getEntityUri);
-    var _b = (0, react_1.useState)(false), actionRequestIsInProgress = _b[0], setActionRequestIsInProgress = _b[1];
+    var _c = (0, react_1.useState)(false), actionRequestIsInProgress = _c[0], setActionRequestIsInProgress = _c[1];
     var viewId = (0, react_1.useContext)(ViewIdContext_1.ViewIdContext);
     var dispatch = (0, react_redux_1.useDispatch)();
     var performTaskAction = (0, react_1.useCallback)(function (action) { return function () {
@@ -60,15 +60,16 @@ var useWorkflowActions = function (_a) {
                 else {
                     // entity refreshing
                     dispatch(mdm_module_1.profile.entity.actions.loadEntity({ viewId: viewId, uri: entityUri }));
-                    loadWorkflowTasks === null || loadWorkflowTasks === void 0 ? void 0 : loadWorkflowTasks();
+                    loadTasks === null || loadTasks === void 0 ? void 0 : loadTasks();
                 }
+                onActionSuccess === null || onActionSuccess === void 0 ? void 0 : onActionSuccess(action);
             })
                 .catch(errors_1.showWorkflowError)
                 .finally(function () {
                 setActionRequestIsInProgress(false);
             });
         }
-    }; }, [workflowPath, taskId, environment, tenant, dispatch, entityUri, viewId, loadWorkflowTasks]);
+    }; }, [workflowPath, taskId, environment, tenant, dispatch, entityUri, viewId, loadTasks]);
     var actions = (0, react_1.useMemo)(function () {
         return username === assignee && (0, helpers_1.isOpenTask)(isOpen)
             ? (possibleActions || []).map(function (_a) {

package/cjs/components/workflow/hooks/useWorkflowProcessInstance.js

@@ -11,7 +11,7 @@ var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var WorkflowTasksContext_1 = require("../../../contexts/WorkflowTasksContext");
 var errors_1 = require("../helpers/errors");
 var useWorkflowProcessInstance = function () {
-    var loadWorkflowTasks = (0, react_1.useContext)(WorkflowTasksContext_1.WorkflowTasksContext).loadWorkflowTasks;
+    var loadTasks = (0, react_1.useContext)(WorkflowTasksContext_1.WorkflowTasksContext).loadTasks;
     var workflowPath = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getWorkflowPath);
     var environment = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getWorkflowEnvironmentUrl);
     var tenant = (0, react_redux_1.useSelector)(mdm_module_1.default.selectors.getTenant);
@@ -29,7 +29,7 @@ var useWorkflowProcessInstance = function () {
             objectURIs: [entityUri]
         })
             .then(function () {
-            loadWorkflowTasks();
+            loadTasks();
         })
             .catch(function (error) {
             (0, errors_1.showWorkflowError)(error);
@@ -38,7 +38,7 @@ var useWorkflowProcessInstance = function () {
             .finally(function () {
             setLoading(false);
         });
-    }, [entityUri, environment, loadWorkflowTasks, tenant, workflowPath]);
+    }, [entityUri, environment, loadTasks, tenant, workflowPath]);
     return { processInstance: processInstance, loading: loading };
 };
 exports.useWorkflowProcessInstance = useWorkflowProcessInstance;

package/cjs/components/workflow/hooks/useWorkflowTasks.d.ts

@@ -9,6 +9,6 @@ export declare const useWorkflowTasks: (config?: Config) => {
     total: number;
     loading: boolean;
     updateTaskState: (taskId: WorkflowTaskData['taskId'], payload: Partial<WorkflowTaskData>) => void;
-    loadWorkflowTasks: () => void;
+    loadTasks: () => void;
 };
 export {};

package/cjs/components/workflow/hooks/useWorkflowTasks.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -37,7 +26,7 @@ var useWorkflowTasks = function (config) {
     var _b = (0, react_1.useState)(null), tasks = _b[0], setTasks = _b[1];
     var _c = (0, react_1.useState)(0), total = _c[0], setTotal = _c[1];
     var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
-    var loadWorkflowTasks = (0, react_1.useCallback)(function () {
+    var loadTasks = (0, react_1.useCallback)(function () {
         setLoading(true);
         var parsedProcessTypes = !Array.isArray(processTypes) || processTypes.includes('*') ? null : processTypes;
         var requests = (parsedProcessTypes || [null]).map(function (processType) {
@@ -65,22 +54,17 @@ var useWorkflowTasks = function (config) {
     }, [entityUri, environment, safePromise, tenant, workflowPath, assignee, showClosedTasks, processTypes]);
     (0, react_1.useEffect)(function () {
         if (entityUri && enabled && !(0, mdm_sdk_1.isTempUri)(entityUri)) {
-            loadWorkflowTasks();
+            loadTasks();
         }
         else {
             setTasks(null);
             setTotal(0);
         }
-    }, [enabled, entityUri, loadWorkflowTasks, isEditableMode]);
+    }, [enabled, entityUri, loadTasks, isEditableMode]);
     var updateTaskState = (0, react_1.useCallback)(function (taskId, payload) {
-        setTasks(function (tasks) {
-            return tasks.map(function (task) {
-                return task.taskId === taskId
-                    ? __assign(__assign({}, task), payload) : task;
-            });
-        });
+        setTasks((0, ramda_1.map)((0, ramda_1.when)((0, ramda_1.propEq)('taskId', taskId), (0, ramda_1.mergeLeft)(payload))));
     }, []);
-    return { tasks: tasks, total: total, loading: loading, updateTaskState: updateTaskState, loadWorkflowTasks: loadWorkflowTasks };
+    return { tasks: tasks, total: total, loading: loading, updateTaskState: updateTaskState, loadTasks: loadTasks };
 };
 exports.useWorkflowTasks = useWorkflowTasks;
 var isRequestedTask = function (processTypes, assignee) { return function (task) {

package/cjs/components/workflow/index.d.ts

@@ -1,5 +1,7 @@
 export { WorkflowTaskCard } from './cards/WorkflowTaskCard';
 export { AddWorkflowButton } from './components/AddWorkflowButton/AddWorkflowButton';
+export { default as TaskActions } from './components/TaskActions/TaskActions';
+export { default as AssigneeSelector } from './components/AssigneeSelector/AssigneeSelector';
 export { default as WorkflowComments } from './components/WorkflowComments';
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';

package/cjs/components/workflow/index.js

@@ -3,11 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWorkflowTasks = exports.useWorkflowCheckPermission = exports.useWorkflowComments = exports.useWorkflowAssignee = exports.WorkflowComments = exports.AddWorkflowButton = exports.WorkflowTaskCard = void 0;
+exports.useWorkflowTasks = exports.useWorkflowCheckPermission = exports.useWorkflowComments = exports.useWorkflowAssignee = exports.WorkflowComments = exports.AssigneeSelector = exports.TaskActions = exports.AddWorkflowButton = exports.WorkflowTaskCard = void 0;
 var WorkflowTaskCard_1 = require("./cards/WorkflowTaskCard");
 Object.defineProperty(exports, "WorkflowTaskCard", { enumerable: true, get: function () { return WorkflowTaskCard_1.WorkflowTaskCard; } });
 var AddWorkflowButton_1 = require("./components/AddWorkflowButton/AddWorkflowButton");
 Object.defineProperty(exports, "AddWorkflowButton", { enumerable: true, get: function () { return AddWorkflowButton_1.AddWorkflowButton; } });
+var TaskActions_1 = require("./components/TaskActions/TaskActions");
+Object.defineProperty(exports, "TaskActions", { enumerable: true, get: function () { return __importDefault(TaskActions_1).default; } });
+var AssigneeSelector_1 = require("./components/AssigneeSelector/AssigneeSelector");
+Object.defineProperty(exports, "AssigneeSelector", { enumerable: true, get: function () { return __importDefault(AssigneeSelector_1).default; } });
 var WorkflowComments_1 = require("./components/WorkflowComments");
 Object.defineProperty(exports, "WorkflowComments", { enumerable: true, get: function () { return __importDefault(WorkflowComments_1).default; } });
 var useWorkflowAssignee_1 = require("./hooks/useWorkflowAssignee");

package/cjs/contexts/WorkflowTasksContext/index.d.ts

@@ -5,5 +5,6 @@ export declare const WorkflowTasksContext: React.Context<{
     total: WorkflowTasksResponse['total'];
     loading: boolean;
     updateTaskState: (taskId: WorkflowTaskData['taskId'], payload: Partial<WorkflowTaskData>) => void;
-    loadWorkflowTasks: () => void;
+    loadTasks: () => void;
+    onActionSuccess?: (action: string) => void;
 }>;

package/esm/components/editors/DependentLookupEditor/DependentLookupEditor.js

@@ -20,11 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { components } from 'react-select';
 import PropTypes from 'prop-types';
 import { debounce, LookupValueType } from '@reltio/mdm-sdk';
 import Select from '../../ReactSelect/Select';
-import { concat, defaultTo, either, isEmpty, prop } from 'ramda';
+import { concat, defaultTo, either, isEmpty, prop, T } from 'ramda';
 import { buildLookupOptions, getOptionLabel } from './helpers';
 import i18n from 'ui-i18n';
 import { EmptyStub } from '../../../core/utils';
@@ -40,6 +41,7 @@ import useAutopopulation from './useAutopopulation';
 import useSavingFocus from './useSavingFocus';
 import LoadMoreButton from '../../commonReactSelectComponents/LoadMoreButton';
 import { useDidUpdateEffect } from '../../../hooks';
+var Input = function (props) { return React.createElement(components.Input, __assign({}, props, { isHidden: false })); };
 var SelectComponents = {
     IndicatorSeparator: EmptyStub,
     LoadingIndicator: EmptyStub,
@@ -47,7 +49,8 @@ var SelectComponents = {
     DropdownIndicator: DropdownIndicator,
     Menu: MenuWithPopper,
     MenuList: MenuList,
-    MultiValue: MultiValueChip
+    MultiValue: MultiValueChip,
+    Input: Input
 };
 export var DEBOUNCE_INTERVAL = 400;
 var MAX_DEPENDENT_LOOKUP_VALUES = 50;
@@ -56,6 +59,10 @@ var DependentLookupEditor = function (_a) {
     var inputRef = useRef(null);
     var selectRef = useRef(null);
     var styles = useStyles();
+    var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = useState([]), options = _e[0], setOptions = _e[1];
+    var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
+    var _g = useState(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
     useLookupsResolver({
         lookups: value,
         resolvedValues: lookups[lookupTypeCode],
@@ -63,15 +70,55 @@ var DependentLookupEditor = function (_a) {
         onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
     });
     useSavingFocus(selectRef, inputRef, disabled);
-    var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
-    var _e = useState([]), options = _e[0], setOptions = _e[1];
-    var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
-    var _g = useState(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
-    var handleInputChange = function (value) {
-        if (value !== inputValue) {
-            setInputValue(value);
+    useEffect(function () {
+        if (!multiple) {
+            setInputValue(getOptionLabel(value));
+            setOptions(defaultOptions);
             setPageNumber(1);
-            debouncedLoadOptions(value, setOptions);
+        }
+    }, [value]);
+    var handleChange = function (value) {
+        markAsTouched();
+        onChange(value);
+    };
+    var handleFocus = function () {
+        value && selectRef.current.select.inputRef.select();
+    };
+    var resetOptions = function () {
+        setPageNumber(1);
+        debouncedLoadOptions('', setOptions);
+    };
+    var restoreSelectedOption = function () {
+        if (!multiple && inputValue && inputValue !== getOptionLabel(value)) {
+            setInputValue(getOptionLabel(value));
+            resetOptions();
+        }
+    };
+    var handleInputChange = function (newValue, _a) {
+        var action = _a.action;
+        switch (action) {
+            case 'menu-close': {
+                restoreSelectedOption();
+                break;
+            }
+            case 'input-blur': {
+                if (multiple && inputValue) {
+                    setInputValue('');
+                    resetOptions();
+                    break;
+                }
+                restoreSelectedOption();
+                break;
+            }
+            case 'input-change': {
+                setInputValue(newValue);
+                setPageNumber(1);
+                debouncedLoadOptions(newValue, setOptions);
+                if (!multiple && newValue === '') {
+                    handleChange('');
+                }
+                break;
+            }
         }
     };
     var loadOptions = useCallback(function (value, pageNumber) {
@@ -91,7 +138,8 @@ var DependentLookupEditor = function (_a) {
             .finally(function () { return setOptionsAreLoading(false); });
     }, [max, lookupTypeCode, parents]);
     var loadMoreOptions = useCallback(function () {
-        loadOptions(inputValue, pageNumber + 1).then(function (buildOptions) {
+        var filterValue = inputValue !== getOptionLabel(value) ? inputValue : '';
+        loadOptions(multiple ? inputValue : filterValue, pageNumber + 1).then(function (buildOptions) {
             setOptions(function (options) { return concat(options.slice(0, pageNumber * max), buildOptions); });
             setPageNumber(function (page) { return page + 1; });
         });
@@ -121,10 +169,7 @@ var DependentLookupEditor = function (_a) {
             container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); }
         }, noOptionsMessage: function () {
             return optionsAreLoading && !showMoreButton ? i18n.text('Loading...') : i18n.text('No results found');
-        }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: handleInputChange, loadingMessage: function () { return i18n.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: either(prop('value'), prop('lookupCode')), getOptionLabel: getOptionLabel, onChange: function (value) {
-            markAsTouched();
-            onChange(value);
-        }, value: defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && React.createElement(LoadMoreButton, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
+        }, components: SelectComponents, isClearable: true, isSearchable: true, controlShouldRenderValue: multiple, inputValue: inputValue, filterOption: multiple ? undefined : T, onInputChange: handleInputChange, loadingMessage: function () { return i18n.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: either(prop('value'), prop('lookupCode')), getOptionLabel: getOptionLabel, onChange: handleChange, onFocus: multiple ? undefined : handleFocus, value: defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && React.createElement(LoadMoreButton, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
 };
 DependentLookupEditor.propTypes = {
     multiple: PropTypes.bool,

package/esm/components/editors/DependentLookupEditor/helpers.d.ts

@@ -1,7 +1,4 @@
-export function getOptionLabel({ lookupCode, value }: {
-    lookupCode: any;
-    value: any;
-}): any;
+export function getOptionLabel(obj: any): any;
 export function buildLookupOptions(lookups: any): {
     lookupCode: string;
     value: any;

package/esm/components/editors/DependentLookupEditor/helpers.js

@@ -1,6 +1,8 @@
 import { getLookupLabel, utils } from '@reltio/mdm-sdk';
-var getOptionLabel = function (_a) {
-    var lookupCode = _a.lookupCode, value = _a.value;
+var getOptionLabel = function (obj) {
+    if (!obj)
+        return '';
+    var lookupCode = obj.lookupCode, value = obj.value;
     return getLookupLabel(lookupCode, value);
 };
 var buildLookupOptions = function (lookups) {

package/esm/components/workflow/hooks/useWorkflowActions.js

@@ -8,13 +8,13 @@ import { WorkflowTasksContext } from '../../../contexts/WorkflowTasksContext';
 import { isOpenTask } from '../helpers';
 export var useWorkflowActions = function (_a) {
     var possibleActions = _a.possibleActions, assignee = _a.assignee, taskId = _a.taskId, isOpen = _a.isOpen;
-    var loadWorkflowTasks = (useContext(WorkflowTasksContext) || {}).loadWorkflowTasks;
+    var _b = useContext(WorkflowTasksContext) || {}, loadTasks = _b.loadTasks, onActionSuccess = _b.onActionSuccess;
     var workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
     var environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
     var tenant = useSelector(mdmModule.selectors.getTenant);
     var username = useSelector(mdmModule.selectors.getUserName);
     var entityUri = useSelector(mdmModule.selectors.getEntityUri);
-    var _b = useState(false), actionRequestIsInProgress = _b[0], setActionRequestIsInProgress = _b[1];
+    var _c = useState(false), actionRequestIsInProgress = _c[0], setActionRequestIsInProgress = _c[1];
     var viewId = useContext(ViewIdContext);
     var dispatch = useDispatch();
     var performTaskAction = useCallback(function (action) { return function () {
@@ -34,15 +34,16 @@ export var useWorkflowActions = function (_a) {
                 else {
                     // entity refreshing
                     dispatch(profile.entity.actions.loadEntity({ viewId: viewId, uri: entityUri }));
-                    loadWorkflowTasks === null || loadWorkflowTasks === void 0 ? void 0 : loadWorkflowTasks();
+                    loadTasks === null || loadTasks === void 0 ? void 0 : loadTasks();
                 }
+                onActionSuccess === null || onActionSuccess === void 0 ? void 0 : onActionSuccess(action);
             })
                 .catch(showWorkflowError)
                 .finally(function () {
                 setActionRequestIsInProgress(false);
             });
         }
-    }; }, [workflowPath, taskId, environment, tenant, dispatch, entityUri, viewId, loadWorkflowTasks]);
+    }; }, [workflowPath, taskId, environment, tenant, dispatch, entityUri, viewId, loadTasks]);
     var actions = useMemo(function () {
         return username === assignee && isOpenTask(isOpen)
             ? (possibleActions || []).map(function (_a) {

package/esm/components/workflow/hooks/useWorkflowProcessInstance.js

@@ -5,7 +5,7 @@ import { startProcessInstance } from '@reltio/mdm-sdk';
 import { WorkflowTasksContext } from '../../../contexts/WorkflowTasksContext';
 import { showWorkflowError } from '../helpers/errors';
 export var useWorkflowProcessInstance = function () {
-    var loadWorkflowTasks = useContext(WorkflowTasksContext).loadWorkflowTasks;
+    var loadTasks = useContext(WorkflowTasksContext).loadTasks;
     var workflowPath = useSelector(mdmModule.selectors.getWorkflowPath);
     var environment = useSelector(mdmModule.selectors.getWorkflowEnvironmentUrl);
     var tenant = useSelector(mdmModule.selectors.getTenant);
@@ -23,7 +23,7 @@ export var useWorkflowProcessInstance = function () {
             objectURIs: [entityUri]
         })
             .then(function () {
-            loadWorkflowTasks();
+            loadTasks();
         })
             .catch(function (error) {
             showWorkflowError(error);
@@ -32,6 +32,6 @@ export var useWorkflowProcessInstance = function () {
             .finally(function () {
             setLoading(false);
         });
-    }, [entityUri, environment, loadWorkflowTasks, tenant, workflowPath]);
+    }, [entityUri, environment, loadTasks, tenant, workflowPath]);
     return { processInstance: processInstance, loading: loading };
 };

package/esm/components/workflow/hooks/useWorkflowTasks.d.ts

@@ -9,6 +9,6 @@ export declare const useWorkflowTasks: (config?: Config) => {
     total: number;
     loading: boolean;
     updateTaskState: (taskId: WorkflowTaskData['taskId'], payload: Partial<WorkflowTaskData>) => void;
-    loadWorkflowTasks: () => void;
+    loadTasks: () => void;
 };
 export {};

package/esm/components/workflow/hooks/useWorkflowTasks.js

@@ -1,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { filter, flatten, isNil, map, pipe, prop, reject, uniqBy } from 'ramda';
+import { filter, flatten, isNil, map, mergeLeft, pipe, prop, propEq, reject, uniqBy, when } from 'ramda';
 import mdmModule from '@reltio/mdm-module';
 import { getTasksForEntity, isTempUri } from '@reltio/mdm-sdk';
 import { useSafePromise } from '../../../hooks/useSafePromise';
@@ -31,7 +20,7 @@ export var useWorkflowTasks = function (config) {
     var _b = useState(null), tasks = _b[0], setTasks = _b[1];
     var _c = useState(0), total = _c[0], setTotal = _c[1];
     var _d = useState(false), loading = _d[0], setLoading = _d[1];
-    var loadWorkflowTasks = useCallback(function () {
+    var loadTasks = useCallback(function () {
         setLoading(true);
         var parsedProcessTypes = !Array.isArray(processTypes) || processTypes.includes('*') ? null : processTypes;
         var requests = (parsedProcessTypes || [null]).map(function (processType) {
@@ -59,22 +48,17 @@ export var useWorkflowTasks = function (config) {
     }, [entityUri, environment, safePromise, tenant, workflowPath, assignee, showClosedTasks, processTypes]);
     useEffect(function () {
         if (entityUri && enabled && !isTempUri(entityUri)) {
-            loadWorkflowTasks();
+            loadTasks();
         }
         else {
             setTasks(null);
             setTotal(0);
         }
-    }, [enabled, entityUri, loadWorkflowTasks, isEditableMode]);
+    }, [enabled, entityUri, loadTasks, isEditableMode]);
     var updateTaskState = useCallback(function (taskId, payload) {
-        setTasks(function (tasks) {
-            return tasks.map(function (task) {
-                return task.taskId === taskId
-                    ? __assign(__assign({}, task), payload) : task;
-            });
-        });
+        setTasks(map(when(propEq('taskId', taskId), mergeLeft(payload))));
     }, []);
-    return { tasks: tasks, total: total, loading: loading, updateTaskState: updateTaskState, loadWorkflowTasks: loadWorkflowTasks };
+    return { tasks: tasks, total: total, loading: loading, updateTaskState: updateTaskState, loadTasks: loadTasks };
 };
 var isRequestedTask = function (processTypes, assignee) { return function (task) {
     return (!processTypes || processTypes.includes(task.processType)) && (!assignee || assignee === task.assignee);

package/esm/components/workflow/index.d.ts

@@ -1,5 +1,7 @@
 export { WorkflowTaskCard } from './cards/WorkflowTaskCard';
 export { AddWorkflowButton } from './components/AddWorkflowButton/AddWorkflowButton';
+export { default as TaskActions } from './components/TaskActions/TaskActions';
+export { default as AssigneeSelector } from './components/AssigneeSelector/AssigneeSelector';
 export { default as WorkflowComments } from './components/WorkflowComments';
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';

package/esm/components/workflow/index.js

@@ -1,5 +1,7 @@
 export { WorkflowTaskCard } from './cards/WorkflowTaskCard';
 export { AddWorkflowButton } from './components/AddWorkflowButton/AddWorkflowButton';
+export { default as TaskActions } from './components/TaskActions/TaskActions';
+export { default as AssigneeSelector } from './components/AssigneeSelector/AssigneeSelector';
 export { default as WorkflowComments } from './components/WorkflowComments';
 export { useWorkflowAssignee } from './hooks/useWorkflowAssignee';
 export { useWorkflowComments } from './hooks/useWorkflowComments';

package/esm/contexts/WorkflowTasksContext/index.d.ts

@@ -5,5 +5,6 @@ export declare const WorkflowTasksContext: React.Context<{
     total: WorkflowTasksResponse['total'];
     loading: boolean;
     updateTaskState: (taskId: WorkflowTaskData['taskId'], payload: Partial<WorkflowTaskData>) => void;
-    loadWorkflowTasks: () => void;
+    loadTasks: () => void;
+    onActionSuccess?: (action: string) => void;
 }>;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1381",
+  "version": "1.4.1383",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1381",
-    "@reltio/mdm-sdk": "^1.4.1381",
+    "@reltio/mdm-module": "^1.4.1383",
+    "@reltio/mdm-sdk": "^1.4.1383",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",