@reltio/components 1.4.878 → 1.4.879

package/components/CollaborationItem/Comment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"message" | "button" | "body" | "header" | "avatar" | "username" | "createdAt" | "commentTarget" | "dropdownMenu" | "buttons">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "message" | "button" | "header" | "avatar" | "username" | "createdAt" | "commentTarget" | "dropdownMenu" | "buttons">;

package/components/DropDownSelector/DropDownSelector.d.ts

@@ -1,4 +1,19 @@
+export namespace DropDownSelectorType {
+    const value: PropTypes.Requireable<object>;
+    const label: PropTypes.Validator<string>;
+    const getOptions: PropTypes.Requireable<(...args: any[]) => any>;
+    const options: PropTypes.Requireable<any[]>;
+    const onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    const onCreate: PropTypes.Requireable<(...args: any[]) => any>;
+    const onClear: PropTypes.Requireable<(...args: any[]) => any>;
+    const createLabel: PropTypes.Requireable<string>;
+    const components: PropTypes.Requireable<object>;
+    const textFieldInputRef: PropTypes.Requireable<object>;
+    const TextFieldProps: PropTypes.Requireable<object>;
+    const height: PropTypes.Requireable<number>;
+}
 export default DropDownSelector;
+import PropTypes from "prop-types";
 declare function DropDownSelector({ value, label, createLabel, getOptions, options, height, onChange, onCreate, onClear, components, textFieldInputRef, TextFieldProps, ...otherProps }: {
     [x: string]: any;
     value: any;
@@ -15,19 +30,5 @@ declare function DropDownSelector({ value, label, createLabel, getOptions, optio
     TextFieldProps: any;
 }): JSX.Element;
 declare namespace DropDownSelector {
-    namespace propTypes {
-        const value: PropTypes.Requireable<object>;
-        const label: PropTypes.Validator<string>;
-        const getOptions: PropTypes.Requireable<(...args: any[]) => any>;
-        const options: PropTypes.Requireable<any[]>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const onCreate: PropTypes.Requireable<(...args: any[]) => any>;
-        const onClear: PropTypes.Requireable<(...args: any[]) => any>;
-        const createLabel: PropTypes.Requireable<string>;
-        const components: PropTypes.Requireable<object>;
-        const textFieldInputRef: PropTypes.Requireable<object>;
-        const TextFieldProps: PropTypes.Requireable<object>;
-        const height: PropTypes.Requireable<number>;
-    }
+    export { DropDownSelectorType as propTypes };
 }
-import PropTypes from "prop-types";

package/components/DropDownSelector/DropDownSelector.js

@@ -56,7 +56,7 @@ var DropDownSelector = function (_a) {
     return (React.createElement(SelectComponent, __assign({ placeholder: "", defaultOptions: true }, otherProps, { value: defaultTo(null, value), loadOptions: getOptions, options: options, cacheOptions: true, onChange: onChange, onCreate: handleCreate, onClear: onClear, createLabel: createLabel, classes: styles, styles: mergedStyles, components: __assign(__assign({ DropdownIndicator: DropdownIndicator, LoadingIndicator: EmptyStub, SingleValue: SingleValue,
             Menu: Menu }, showIndicatorSeparator), components), menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { label: label, variant: 'filled', margin: 'dense', classes: __assign(__assign({}, prop('classes', TextFieldProps)), { root: classnames(styles.formControl, path(['classes', 'root'], TextFieldProps)) }), inputProps: __assign({}, prop('inputProps', TextFieldProps)), InputProps: __assign(__assign({}, prop('InputProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputProps', 'classes'], TextFieldProps)), { root: classnames(styles.filledInputRoot, path(['InputProps', 'classes', 'root'], TextFieldProps)), underline: classnames((_b = {}, _b[underlineStyle.filledInputUnderline] = isEmptyValue(value), _b), path(['InputProps', 'classes', 'underline'], TextFieldProps)), focused: classnames('focused', path(['InputProps', 'classes', 'focused'], TextFieldProps)) }) }), InputLabelProps: __assign(__assign({}, prop('InputLabelProps', TextFieldProps)), { classes: __assign(__assign({}, path(['InputLabelProps', 'classes'], TextFieldProps)), { root: classnames(styles.inputLabel, path(['InputLabelProps', 'classes', 'root'], TextFieldProps)), shrink: classnames('shrink', path(['InputLabelProps', 'classes', 'shrink'], TextFieldProps)) }), shrink: !isEmptyValue(value) ? true : undefined }), ref: textFieldInputRef || inputRef }), inputRef: textFieldInputRef || inputRef, menuIsOpen: open, onMenuOpen: function () { return setOpen(true); }, onMenuClose: function () { return setOpen(false); } })));
 };
-DropDownSelector.propTypes = {
+export var DropDownSelectorType = {
     value: PropTypes.object,
     label: PropTypes.string.isRequired,
     getOptions: PropTypes.func,
@@ -70,4 +70,5 @@ DropDownSelector.propTypes = {
     TextFieldProps: PropTypes.object,
     height: PropTypes.number
 };
+DropDownSelector.propTypes = DropDownSelectorType;
 export default DropDownSelector;

package/components/DropDownSelector/styles.d.ts

@@ -1,4 +1,4 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"control" | "valueContainer" | "dropdownIndicator" | "formControl" | "filledInputUnderline" | "filledInputRoot" | "inputLabel">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"control" | "valueContainer" | "dropdownIndicator" | "formControl" | "inputLabel" | "filledInputUnderline" | "filledInputRoot">;
 export namespace customStyles {
     function menu(baseStyles: any): any;
     function menuList(baseStyles: any): any;

package/components/ImageDetailsView/ImageDetailsViewSidebar/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"checkbox" | "body" | "header" | "root" | "headerTitle" | "bodyWrapper" | "formControlLabel" | "checkboxLabel">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "checkbox" | "header" | "root" | "headerTitle" | "bodyWrapper" | "formControlLabel" | "checkboxLabel">;

package/components/ImageGalleryDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "toolbar" | "backdrop" | "paper" | "closeIcon" | "appBar" | "closeButton" | "headerLeft" | "headerCenter" | "headerRight" | "modeSwitcher">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "toolbar" | "paper" | "backdrop" | "closeIcon" | "appBar" | "closeButton" | "headerLeft" | "headerCenter" | "headerRight" | "modeSwitcher">;

package/components/MatchRulesBlock/MatchRulesTooltip/styles.d.ts

@@ -1,2 +1,2 @@
-declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "body" | "container">;
+declare const styles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "title" | "container">;
 export default styles;

package/components/PotentialMatchReviewCard/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"flex" | "caption" | "title" | "expanded" | "icon" | "header" | "date" | "info" | "infoBlock" | "flag" | "pmReviewCard" | "mainInfo">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"flex" | "caption" | "title" | "expanded" | "icon" | "header" | "date" | "info" | "infoBlock" | "flag" | "mainInfo" | "pmReviewCard">;

package/components/SidePanel/styles.js

@@ -5,7 +5,7 @@ export var useStyles = makeStyles(function (theme) { return ({
         flexDirection: 'column',
         backgroundColor: theme.palette.background.paper,
         boxShadow: '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.2)',
-        marginLeft: '1px',
+        marginLeft: '3px',
         transition: theme.transitions.create(['width'], {
             duration: theme.transitions.duration.enteringScreen
         })

package/components/UploadImageDialog/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "body" | "root" | "divider" | "dialogPaper" | "targetBox">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "title" | "root" | "divider" | "dialogPaper" | "targetBox">;

package/components/attributes/PivotingAttributes/styles.d.ts

@@ -1,2 +1,2 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "entityTypeLabel" | "title" | "icon" | "body" | "footer" | "header" | "entityLabel" | "container" | "divider" | "headerCount" | "profileIcon" | "entityContainer">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "body" | "entityTypeLabel" | "title" | "icon" | "footer" | "header" | "entityLabel" | "container" | "divider" | "headerCount" | "profileIcon" | "entityContainer">;
 export declare const usePivotingTooltipStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"tooltip" | "arrow">;

package/components/editors/DateEditor/DateEditor.d.ts

@@ -1,11 +1,12 @@
 export default DateEditor;
-declare function DateEditor({ value, label, variant, onChange, InputProps, ...otherProps }: {
+declare function DateEditor({ value, label, variant, onChange, InputProps, InputLabelProps, ...otherProps }: {
     [x: string]: any;
     value?: any;
     label: any;
     variant?: string;
     onChange: any;
-    InputProps: any;
+    InputProps?: {};
+    InputLabelProps?: {};
 }): JSX.Element;
 declare namespace DateEditor {
     namespace propTypes {
@@ -13,6 +14,7 @@ declare namespace DateEditor {
         export const label: PropTypes.Requireable<string>;
         export { InputVariant as variant };
         export const InputProps: PropTypes.Requireable<object>;
+        export const InputLabelProps: PropTypes.Requireable<object>;
         export const onChange: PropTypes.Validator<(...args: any[]) => any>;
     }
 }

package/components/editors/DateEditor/DateEditor.js

@@ -33,10 +33,11 @@ import CalendarIcon from '../../../icons/Calendar';
 import { useStyles } from './styles';
 var format = moment.localeData().longDateFormat('L');
 var DateEditor = function (_a) {
-    var _b;
-    var _c = _a.value, value = _c === void 0 ? null : _c, label = _a.label, _d = _a.variant, variant = _d === void 0 ? 'filled' : _d, onChange = _a.onChange, InputProps = _a.InputProps, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps"]);
+    var _b, _c;
+    var _d;
+    var _e = _a.value, value = _e === void 0 ? null : _e, label = _a.label, _f = _a.variant, variant = _f === void 0 ? 'filled' : _f, onChange = _a.onChange, _g = _a.InputProps, InputProps = _g === void 0 ? {} : _g, _h = _a.InputLabelProps, InputLabelProps = _h === void 0 ? {} : _h, otherProps = __rest(_a, ["value", "label", "variant", "onChange", "InputProps", "InputLabelProps"]);
     var styles = useStyles();
-    var _e = useState(false), isCalendarOpen = _e[0], setIsCalendarOpen = _e[1];
+    var _j = useState(false), isCalendarOpen = _j[0], setIsCalendarOpen = _j[1];
     return (React.createElement(KeyboardDatePicker, __assign({ format: format, variant: "inline", invalidDateMessage: i18n.text('Invalid Date Format'), maxDateMessage: i18n.text('Date should not be after maximal date'), minDateMessage: i18n.text('Date should not be before minimal date'), inputVariant: variant, autoOk: true, InputAdornmentProps: { position: 'end', classes: { positionEnd: styles.adornmentPositionEnd } }, KeyboardButtonProps: {
             classes: { root: styles.iconButtonRoot },
             onKeyPress: invoker(0, 'stopPropagation')
@@ -53,18 +54,14 @@ var DateEditor = function (_a) {
                 vertical: 'top',
                 horizontal: 'left'
             }
-        }, InputLabelProps: {
-            classes: {
-                root: isCalendarOpen ? styles.inputLabel : undefined
-            },
-            shrink: !isNil(label)
-        } }, otherProps)));
+        }, InputLabelProps: __assign({ classes: __assign({ root: classnames((_c = {}, _c[styles.inputLabel] = isCalendarOpen, _c), (_d = InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.classes) === null || _d === void 0 ? void 0 : _d.root) }, InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.classes), shrink: !isNil(label) }, InputLabelProps) }, otherProps)));
 };
 DateEditor.propTypes = {
     value: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]),
     label: PropTypes.string,
     variant: InputVariant,
     InputProps: PropTypes.object,
+    InputLabelProps: PropTypes.object,
     onChange: PropTypes.func.isRequired
 };
 export default DateEditor;

package/components/index.d.ts

@@ -119,3 +119,4 @@ export { ReltioMap } from './ReltioMap';
 export { default as ErrorMessage } from './ErrorWrapper/ErrorMessage';
 export * from './history';
 export { default as OvIcon } from './attributes/OvIcon';
+export * from './workflow';

package/components/index.js

@@ -118,3 +118,4 @@ export { ReltioMap } from './ReltioMap';
 export { default as ErrorMessage } from './ErrorWrapper/ErrorMessage';
 export * from './history';
 export { default as OvIcon } from './attributes/OvIcon';
+export * from './workflow';

package/components/workflow/cards/DataChangeRequestTaskCard/DataChangeRequestTaskCard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type Props = {
+    task: WorkflowTaskData;
+};
+declare const DataChangeRequestTaskCard: ({ task }: Props) => JSX.Element;
+export default DataChangeRequestTaskCard;

package/components/workflow/cards/DataChangeRequestTaskCard/DataChangeRequestTaskCard.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { getDataChangeRequest } from '@reltio/mdm-sdk';
+import GenericWorkflowTaskCard from '../GenericWorkflowTaskCard/GenericWorkflowTaskCard';
+import LineDecorator from '../../components/LineDecorator/LineDecorator';
+import { getDCRUri } from '../../helpers';
+import DcrTaskIcon from '../../../../icons/DcrTaskIcon';
+//eslint-disable-next-line
+var AttributesChanges = function (_a) {
+    var objectsInfo = _a.objectsInfo, changes = _a.changes;
+    return (React.createElement("span", null,
+        "AttributesChanges",
+        React.createElement("br", null),
+        "AttributesChanges",
+        React.createElement("br", null),
+        "AttributesChanges"));
+};
+var DataChangeRequestTaskCard = function (_a) {
+    var task = _a.task;
+    var objectURIs = task.objectURIs;
+    var dcrUri = getDCRUri(objectURIs);
+    var _b = useState(null), dcr = _b[0], setDcr = _b[1];
+    useEffect(function () {
+        getDataChangeRequest(dcrUri).then(setDcr);
+    }, [dcrUri]);
+    return (React.createElement(GenericWorkflowTaskCard, { task: task, Icon: DcrTaskIcon }, dcr && (React.createElement(LineDecorator, { last: true },
+        React.createElement(AttributesChanges, { changes: dcr.changes, objectsInfo: dcr.objectsInfo })))));
+};
+export default DataChangeRequestTaskCard;

package/components/workflow/cards/GenericWorkflowTaskCard/GenericWorkflowTaskCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type Props = {
+    task: WorkflowTaskData;
+    children?: React.ReactNode;
+    actions?: React.ReactNode;
+    Icon?: React.ElementType;
+};
+declare const GenericWorkflowTaskCard: ({ task, children, actions, Icon }: Props) => JSX.Element;
+export default GenericWorkflowTaskCard;

package/components/workflow/cards/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import FlagIcon from '@material-ui/icons/Flag';
+import i18n from 'ui-i18n';
+import Tooltip from '@material-ui/core/Tooltip';
+import { useStyles } from './styles';
+import CollapseButton from '../../../CollapseButton/CollapseButton';
+import AssigneeSelector from '../../components/AssigneeSelector/AssigneeSelector';
+import DueDateField from '../../components/DueDateField/DueDateField';
+import PrioritySelector from '../../components/PrioritySelector/PrioritySelector';
+import WorkflowComments from '../../components/WorkflowComments';
+import { getDCRId } from '../../helpers';
+import TaskActions from '../../components/TaskActions/TaskActions';
+import LineDecorator from '../../components/LineDecorator/LineDecorator';
+import { useWorkflowColor } from '../../hooks/useWorkflowColor';
+import { useWorkflowCheckPermission } from '../../hooks/useWorkflowCheckPermission';
+import CollaborationIcon from '../../../../icons/CollaborationIcon';
+var GenericWorkflowTaskCard = function (_a) {
+    var _b;
+    var task = _a.task, children = _a.children, actions = _a.actions, Icon = _a.Icon;
+    var taskId = task.taskId, dueDate = task.dueDate, priority = task.priority, assignee = task.assignee, createdBy = task.createdBy, createTime = task.createTime, step = task.displayName, processDefinitionDisplayName = task.processDefinitionDisplayName, objectURIs = task.objectURIs, processInstanceComments = task.processInstanceComments, possibleActions = task.possibleActions;
+    var dcrId = getDCRId(objectURIs);
+    var color = useWorkflowColor({ processDefinitionDisplayName: processDefinitionDisplayName });
+    var styles = useStyles({ color: color });
+    var _c = useState(false), isExpanded = _c[0], setExpanded = _c[1];
+    var checkWorkflowPermission = useWorkflowCheckPermission();
+    var canViewComments = checkWorkflowPermission('VIEW_PROCESS_INSTANCE_COMMENTS');
+    return (React.createElement("div", { className: styles.card },
+        React.createElement("div", { className: classnames((_b = {}, _b[styles.withBackground] = isExpanded, _b)) },
+            React.createElement("div", { className: styles.lineWrapper },
+                React.createElement("div", { className: styles.line }),
+                Icon && React.createElement(Icon, { className: styles.icon }),
+                React.createElement(LineDecorator, { plain: true, first: true, transparent: !isExpanded },
+                    React.createElement("div", { className: styles.mainInfo },
+                        React.createElement("div", { className: styles.title },
+                            React.createElement("div", { className: classnames(styles.caption, styles.flex) }, processDefinitionDisplayName),
+                            React.createElement(FlagIcon, { className: styles.flag }),
+                            React.createElement(Tooltip, { title: i18n.text('Due date') },
+                                React.createElement("span", { className: styles.date }, i18n.date(dueDate, 'L'))),
+                            React.createElement(CollapseButton, { isOpen: isExpanded, size: "L", onClick: function () {
+                                    setExpanded(!isExpanded);
+                                } })),
+                        React.createElement("div", { className: styles.infoBlock },
+                            React.createElement("div", { className: styles.flex },
+                                dcrId && (React.createElement("div", { className: styles.info },
+                                    i18n.text('DCR ID'),
+                                    ': ',
+                                    React.createElement("span", { className: styles.infoValue }, dcrId))),
+                                React.createElement("div", { className: styles.info },
+                                    i18n.text('Created by'),
+                                    ': ',
+                                    React.createElement("span", { className: styles.infoValue }, createdBy),
+                                    " ",
+                                    i18n.text('on'),
+                                    ' ',
+                                    React.createElement("span", { className: styles.infoValue }, i18n.date(createTime, 'L'))),
+                                React.createElement("div", { className: styles.info },
+                                    i18n.text('Step'),
+                                    ': ',
+                                    React.createElement("span", { className: styles.infoValue }, step)),
+                                canViewComments && (processInstanceComments === null || processInstanceComments === void 0 ? void 0 : processInstanceComments.length) > 0 && (React.createElement("div", { className: styles.commentsInfo },
+                                    React.createElement(CollaborationIcon, { className: styles.commentsIcon }),
+                                    React.createElement("div", { className: styles.infoValue }, processInstanceComments.length)))),
+                            actions || (React.createElement(TaskActions, { taskId: taskId, possibleActions: possibleActions, assignee: assignee })))))),
+            isExpanded && (React.createElement(LineDecorator, { plain: true },
+                React.createElement("div", { className: styles.controlsBox },
+                    React.createElement("div", { className: styles.controlsInRow },
+                        React.createElement(DueDateField, { taskId: taskId, dueDate: dueDate }),
+                        React.createElement(PrioritySelector, { taskId: taskId, priority: priority, className: styles.priority })),
+                    React.createElement(AssigneeSelector, { taskId: taskId, assignee: assignee }))))),
+        isExpanded && (React.createElement(React.Fragment, null,
+            children,
+            canViewComments && (React.createElement("div", { className: styles.comments },
+                React.createElement(WorkflowComments, { taskId: taskId, processInstanceComments: processInstanceComments })))))));
+};
+export default GenericWorkflowTaskCard;

package/components/workflow/cards/GenericWorkflowTaskCard/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props: {
+    color: string;
+}) => import("@material-ui/core/styles/withStyles").ClassNameMap<"priority" | "flex" | "caption" | "title" | "icon" | "header" | "line" | "date" | "comments" | "info" | "card" | "withBackground" | "lineWrapper" | "commentsInfo" | "commentsIcon" | "infoValue" | "infoBlock" | "flag" | "mainInfo" | "controlsBox" | "controlsInRow">;

package/components/workflow/cards/GenericWorkflowTaskCard/styles.js

@@ -0,0 +1,110 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles(function (theme) { return ({
+    card: {
+        borderBottom: '1px solid rgba(0,0,0,0.06)'
+    },
+    withBackground: {
+        backgroundColor: 'rgba(0, 0, 0, 0.03)'
+    },
+    lineWrapper: {
+        position: 'relative'
+    },
+    icon: {
+        position: 'absolute',
+        top: '8px',
+        left: '16px',
+        width: '32px',
+        height: '32px',
+        zIndex: 1
+    },
+    line: function (_a) {
+        var color = _a.color;
+        return ({
+            borderLeft: "3px solid " + color,
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0
+        });
+    },
+    info: {
+        fontSize: '13px',
+        color: theme.palette.text.secondary,
+        wordWrap: 'break-word',
+        lineHeight: '15px'
+    },
+    commentsInfo: {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '-4px',
+        marginTop: '7px'
+    },
+    commentsIcon: {
+        width: '11px',
+        height: '11px',
+        marginLeft: '2px',
+        marginRight: '6px',
+        marginTop: '-2px'
+    },
+    infoValue: {
+        color: theme.palette.text.primary
+    },
+    infoBlock: {
+        display: 'flex',
+        flexDirection: 'row',
+        marginBottom: '5px'
+    },
+    header: {
+        display: 'flex',
+        flexDirection: 'row',
+        paddingBottom: '12px'
+    },
+    flex: {
+        flex: 1
+    },
+    caption: {
+        fontSize: '16px',
+        color: theme.palette.text.primary
+    },
+    title: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: '-4px'
+    },
+    flag: {
+        height: '13px',
+        width: '13px',
+        marginTop: '-2px',
+        stroke: '#000000',
+        fill: 'none',
+        margin: '2px 5px 0 5px'
+    },
+    date: {
+        fontSize: '13px',
+        color: theme.palette.text.primary
+    },
+    mainInfo: {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1
+    },
+    controlsBox: {
+        marginRight: '16px',
+        marginBottom: '12px',
+        marginTop: '13px'
+    },
+    controlsInRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: '20px'
+    },
+    priority: {
+        width: '162px'
+    },
+    comments: {
+        marginLeft: '11px'
+    }
+}); });

package/components/workflow/cards/WorkflowTaskCard.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FactoryProps } from './WorkflowTaskCardsFactory';
+export declare const WorkflowTaskCard: ({ task }: FactoryProps) => JSX.Element;

package/components/workflow/cards/WorkflowTaskCard.js

@@ -0,0 +1,5 @@
+import WorkflowTaskCardsFactory from './WorkflowTaskCardsFactory';
+export var WorkflowTaskCard = function (_a) {
+    var task = _a.task;
+    return WorkflowTaskCardsFactory.build({ task: task });
+};

package/components/workflow/cards/WorkflowTaskCardsFactory.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+export declare type FactoryProps = {
+    task: WorkflowTaskData;
+};
+declare class WorkflowTaskCardsFactory {
+    static build: ({ task }: FactoryProps) => JSX.Element;
+}
+export default WorkflowTaskCardsFactory;

package/components/workflow/cards/WorkflowTaskCardsFactory.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { PredefinedWorkflowProcessType } from '@reltio/mdm-sdk';
+import GenericWorkflowTaskCard from './GenericWorkflowTaskCard/GenericWorkflowTaskCard';
+import DataChangeRequestTaskCard from './DataChangeRequestTaskCard/DataChangeRequestTaskCard';
+import DefaultTaskIcon from '../../../icons/DefaultTaskIcon';
+import DeleteRequestTaskIcon from '../../../icons/DeleteRequestTaskIcon';
+import PmTaskIcon from '../../../icons/PmTaskIcon';
+var WorkflowTaskCardsFactory = /** @class */ (function () {
+    function WorkflowTaskCardsFactory() {
+    }
+    WorkflowTaskCardsFactory.build = function (_a) {
+        var task = _a.task;
+        var processType = task.processType;
+        switch (processType) {
+            case PredefinedWorkflowProcessType.dataChangeRequestReview:
+                return React.createElement(DataChangeRequestTaskCard, { task: task });
+            case PredefinedWorkflowProcessType.potentialMatchReview:
+                return React.createElement(GenericWorkflowTaskCard, { task: task, Icon: PmTaskIcon });
+            case PredefinedWorkflowProcessType.recommendForDelete:
+                return React.createElement(GenericWorkflowTaskCard, { task: task, Icon: DeleteRequestTaskIcon });
+            default:
+                return React.createElement(GenericWorkflowTaskCard, { task: task, Icon: DefaultTaskIcon });
+        }
+    };
+    return WorkflowTaskCardsFactory;
+}());
+export default WorkflowTaskCardsFactory;

package/components/workflow/components/AssigneeSelector/AssigneeSelector.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type Props = Pick<WorkflowTaskData, 'taskId' | 'assignee'>;
+declare const AssigneeSelector: ({ taskId, assignee }: Props) => JSX.Element;
+export default AssigneeSelector;

package/components/workflow/components/AssigneeSelector/AssigneeSelector.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import DropDownSelector from '../../../DropDownSelector/DropDownSelector';
+import { useWorkflowAssignee } from '../../hooks/useWorkflowAssignee';
+var AssigneeSelector = function (_a) {
+    var taskId = _a.taskId, assignee = _a.assignee;
+    var _b = useWorkflowAssignee({
+        taskId: taskId,
+        assignee: assignee
+    }), currentAssignee = _b.assignee, getAssignees = _b.getAssignees, updateAssignee = _b.updateAssignee, updateRequestIsInProgress = _b.updateRequestIsInProgress, readOnly = _b.readOnly;
+    var disabled = updateRequestIsInProgress || readOnly;
+    return (React.createElement(DropDownSelector, { isDisabled: disabled, getOptions: getAssignees, onChange: updateAssignee, hideSelectedOptions: false, label: i18n.text('Assigned to'), value: currentAssignee, defaultOptions: true, TextFieldProps: { disabled: disabled }, height: 40 }));
+};
+export default AssigneeSelector;

package/components/workflow/components/DueDateField/DueDateField.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { WorkflowTaskData } from '@reltio/mdm-sdk';
+declare type Props = Pick<WorkflowTaskData, 'taskId' | 'dueDate'> & {
+    className?: string;
+};
+declare const DueDateField: ({ taskId, dueDate, className }: Props) => JSX.Element;
+export default DueDateField;

package/components/workflow/components/DueDateField/DueDateField.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import i18n from 'ui-i18n';
+import classnames from 'classnames';
+import { pipe } from 'ramda';
+import { useStyles } from './styles';
+import { DateEditor } from '../../../editors';
+import { useWorkflowDueDate } from '../../hooks/useWorkflowDueDate';
+var DueDateField = function (_a) {
+    var taskId = _a.taskId, dueDate = _a.dueDate, className = _a.className;
+    var styles = useStyles();
+    var _b = useWorkflowDueDate({ dueDate: dueDate, taskId: taskId }), updateDueDate = _b.updateDueDate, updateRequestIsInProgress = _b.updateRequestIsInProgress, readOnly = _b.readOnly;
+    return (React.createElement(DateEditor, { className: classnames(styles.dueDate, className), disabled: updateRequestIsInProgress || readOnly, value: dueDate, label: i18n.text('Due date'), onChange: pipe(function (date) { return date && date.getTime(); }, updateDueDate), margin: "dense", InputProps: { className: styles.dueDateInput }, InputLabelProps: { classes: { root: styles.inputLabel } } }));
+};
+export default DueDateField;

package/components/workflow/components/DueDateField/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dueDate" | "dueDateInput" | "inputLabel">;

package/components/workflow/components/DueDateField/styles.js

@@ -0,0 +1,13 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    dueDate: {
+        marginTop: 0,
+        marginBottom: 0
+    },
+    dueDateInput: {
+        height: '40px'
+    },
+    inputLabel: {
+        fontSize: '14px'
+    }
+});

package/components/workflow/components/LineDecorator/LineDecorator.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+declare type Props = {
+    className?: string;
+    children: React.ReactNode;
+    plain?: boolean;
+    first?: boolean;
+    last?: boolean;
+    transparent?: boolean;
+};
+declare const LineDecorator: ({ className, children, plain, first, last, transparent }: Props) => JSX.Element;
+export default LineDecorator;

package/components/workflow/components/LineDecorator/LineDecorator.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import classnames from 'classnames';
+import { useStyles } from './styles';
+var LineDecorator = function (_a) {
+    var _b, _c, _d;
+    var className = _a.className, children = _a.children, plain = _a.plain, first = _a.first, last = _a.last, transparent = _a.transparent;
+    var styles = useStyles();
+    return (React.createElement("div", { className: classnames(className, styles.decorator) },
+        React.createElement("div", { className: classnames(styles.lineBlock, (_b = {}, _b[styles.withLinePadding] = first, _b)) }, !transparent && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: styles.noLine }),
+            React.createElement("div", { className: classnames(styles.line, (_c = {}, _c[styles.plain] = plain, _c), (_d = {}, _d[styles.last] = last, _d)) })))),
+        React.createElement("div", { className: styles.content }, children)));
+};
+export default LineDecorator;

package/components/workflow/components/LineDecorator/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"content" | "last" | "line" | "decorator" | "plain" | "lineBlock" | "withLinePadding" | "noLine">;