@reltio/components 1.4.1711 → 1.4.1712

package/cjs/components/workflow/components/TaskActionButtons/TaskActionButtons.js

@@ -17,7 +17,7 @@ var TaskActionButtons = function (_a) {
         assignee: assignee,
         isOpen: isOpen
     }), actions = _b.actions, disabled = _b.actionRequestIsInProgress;
-    var _c = (0, ramda_1.partition)((0, ramda_1.propEq)('text', preferredAction.label), actions), preferredActions = _c[0], otherActions = _c[1];
+    var _c = (0, ramda_1.partition)((0, ramda_1.propEq)('text', preferredAction === null || preferredAction === void 0 ? void 0 : preferredAction.label), actions), preferredActions = _c[0], otherActions = _c[1];
     return (react_1.default.createElement(react_1.default.Fragment, null,
         otherActions.map(function (action) { return (react_1.default.createElement(Button_1.default, { variant: "outlined", onClick: action.onClick, key: action.text, disabled: disabled }, action.text)); }),
         preferredActions.map(function (action) { return (react_1.default.createElement(Button_1.default, { variant: "contained", color: "primary", onClick: action.onClick, key: action.text, disabled: disabled }, action.text)); })));

package/cjs/components/workflow/components/WorkflowComments/CollapsedComments.d.ts

@@ -1,16 +1,8 @@
-export function CollapsedComments({ comments, onClick }: {
-    comments: any;
-    onClick: any;
-}): JSX.Element;
-export namespace CollapsedComments {
-    namespace propTypes {
-        const comments: PropTypes.Requireable<PropTypes.InferProps<{
-            author: PropTypes.Requireable<string>;
-            id: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-            time: PropTypes.Requireable<number>;
-        }>[]>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from 'prop-types';
+import React from 'react';
+import { WorkflowComment } from '@reltio/mdm-sdk';
+type Props = {
+    comments: WorkflowComment[];
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const CollapsedComments: ({ comments, onClick }: Props) => JSX.Element;
+export {};

package/cjs/components/workflow/components/WorkflowComments/CollapsedComments.js

@@ -16,7 +16,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsedComments = void 0;
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 var Comment_1 = require("./Comment");
 var styles_1 = require("./styles");
@@ -30,12 +29,3 @@ var CollapsedComments = function (_a) {
         react_1.default.createElement(Comment_1.Comment, __assign({}, comments[comments.length - 1]))));
 };
 exports.CollapsedComments = CollapsedComments;
-exports.CollapsedComments.propTypes = {
-    comments: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        author: prop_types_1.default.string,
-        id: prop_types_1.default.string,
-        message: prop_types_1.default.string,
-        time: prop_types_1.default.number
-    })),
-    onClick: prop_types_1.default.func
-};

package/cjs/components/workflow/components/WorkflowComments/Comment.d.ts

@@ -1,20 +1,9 @@
-export function Comment({ author, classes, message, time }: {
-    author: any;
-    classes: any;
-    message: any;
-    time: any;
-}): JSX.Element;
-export namespace Comment {
-    namespace defaultProps {
-        const classes: {};
-    }
-    namespace propTypes {
-        const classes_1: PropTypes.Requireable<object>;
-        export { classes_1 as classes };
-        export const author: PropTypes.Requireable<string>;
-        export const id: PropTypes.Requireable<string>;
-        export const message: PropTypes.Requireable<string>;
-        export const time: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from 'prop-types';
+/// <reference types="react" />
+import { WorkflowComment } from '@reltio/mdm-sdk';
+type Props = Pick<WorkflowComment, 'author' | 'message' | 'time'> & {
+    classes?: {
+        messageContainer?: string;
+    };
+};
+export declare const Comment: ({ author, message, time, classes }: Props) => JSX.Element;
+export {};

package/cjs/components/workflow/components/WorkflowComments/Comment.js

@@ -5,14 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Comment = void 0;
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var Avatar_1 = __importDefault(require("@mui/material/Avatar"));
-var Person_1 = __importDefault(require("@mui/icons-material/Person"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
+var Avatar_1 = __importDefault(require("@mui/material/Avatar"));
+var Person_1 = __importDefault(require("@mui/icons-material/Person"));
 var styles_1 = require("./styles");
 var Comment = function (_a) {
-    var author = _a.author, classes = _a.classes, message = _a.message, time = _a.time;
+    var author = _a.author, message = _a.message, time = _a.time, _b = _a.classes, classes = _b === void 0 ? {} : _b;
     var styles = (0, styles_1.useCommentStyles)();
     return (react_1.default.createElement("div", { className: styles.comment },
         react_1.default.createElement(Avatar_1.default, { className: styles.avatar },
@@ -24,13 +23,3 @@ var Comment = function (_a) {
             react_1.default.createElement("div", { className: styles.text }, message))));
 };
 exports.Comment = Comment;
-exports.Comment.defaultProps = {
-    classes: {}
-};
-exports.Comment.propTypes = {
-    classes: prop_types_1.default.object,
-    author: prop_types_1.default.string,
-    id: prop_types_1.default.string,
-    message: prop_types_1.default.string,
-    time: prop_types_1.default.number
-};

package/cjs/components/workflow/components/WorkflowComments/ExpandedComments.d.ts

@@ -1,14 +1,7 @@
-export function ExpandedComments({ comments }: {
-    comments: any;
-}): any;
-export namespace ExpandedComments {
-    namespace propTypes {
-        const comments: PropTypes.Requireable<PropTypes.InferProps<{
-            author: PropTypes.Requireable<string>;
-            id: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-            time: PropTypes.Requireable<number>;
-        }>[]>;
-    }
-}
-import PropTypes from 'prop-types';
+/// <reference types="react" />
+import { WorkflowComment } from '@reltio/mdm-sdk';
+type Props = {
+    comments: WorkflowComment[];
+};
+export declare const ExpandedComments: ({ comments }: Props) => JSX.Element;
+export {};

package/cjs/components/workflow/components/WorkflowComments/ExpandedComments.js

@@ -5,23 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ExpandedComments = void 0;
 var react_1 = __importDefault(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
 var Comment_1 = require("./Comment");
 var styles_1 = require("./styles");
 var ExpandedComments = function (_a) {
     var comments = _a.comments;
     var styles = (0, styles_1.useExpandedComments)();
-    return comments.map(function (_a) {
+    return (react_1.default.createElement(react_1.default.Fragment, null, comments.map(function (_a) {
         var author = _a.author, id = _a.id, message = _a.message, time = _a.time;
         return (react_1.default.createElement(Comment_1.Comment, { classes: { messageContainer: styles.messageContainer }, key: id, author: author, message: message, time: time }));
-    });
+    })));
 };
 exports.ExpandedComments = ExpandedComments;
-exports.ExpandedComments.propTypes = {
-    comments: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        author: prop_types_1.default.string,
-        id: prop_types_1.default.string,
-        message: prop_types_1.default.string,
-        time: prop_types_1.default.number
-    }))
-};

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

@@ -7,7 +7,7 @@ type Props = {
     processInstanceComments: WorkflowComment[];
     taskId: string;
     isTaskOpen: boolean;
-    preferredAction: WorkflowAction;
+    preferredAction?: WorkflowAction;
 };
 export declare const WorkflowComments: ({ workflowActions: actions, actionRequestIsInProgress, processInstanceComments, taskId, isTaskOpen, preferredAction }: Props) => JSX.Element;
 export {};

package/cjs/components/workflow/components/WorkflowComments/WorkflowComments.js

@@ -22,22 +22,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.WorkflowComments = void 0;
 var react_1 = __importStar(require("react"));
-var ramda_1 = require("ramda");
 var Input_1 = __importDefault(require("@mui/material/Input"));
 var InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 var Send_1 = __importDefault(require("@mui/icons-material/Send"));
@@ -49,13 +39,12 @@ var styles_1 = require("./styles");
 var useWorkflowComments_1 = require("../../hooks/useWorkflowComments");
 var SmallIconButton_1 = require("../../../SmallIconButton");
 var ModeSwitcherSelect_1 = require("../../../ModeSwitcherSelect/ModeSwitcherSelect");
-var getValue = function (e) { return e.target.value; };
 var WorkflowComments = function (_a) {
     var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen, preferredAction = _a.preferredAction;
     var styles = (0, styles_1.useWorkflowStyles)();
     var _b = (0, react_1.useState)(false), expanded = _b[0], setExpanded = _b[1];
     var _c = (0, react_1.useState)(''), comment = _c[0], setComment = _c[1];
-    var _d = (0, react_1.useState)(preferredAction.label), currentAction = _d[0], setCurrentAction = _d[1];
+    var _d = (0, react_1.useState)(function () { var _a; return (preferredAction === null || preferredAction === void 0 ? void 0 : preferredAction.label) || ((_a = actions[0]) === null || _a === void 0 ? void 0 : _a.text); }), currentAction = _d[0], setCurrentAction = _d[1];
     var _e = (0, useWorkflowComments_1.useWorkflowComments)({
         processInstanceComments: processInstanceComments,
         taskId: taskId,
@@ -65,8 +54,10 @@ var WorkflowComments = function (_a) {
         writeComment(comment);
         setComment('');
     }, [comment, writeComment]);
-    var onChange = (0, ramda_1.pipe)(getValue, setComment);
-    var onKeyPressHandler = function (e) {
+    var handleChange = (0, react_1.useCallback)(function (event) {
+        setComment(event.target.value);
+    }, []);
+    var handleKeyPress = (0, react_1.useCallback)(function (e) {
         if (e.key === 'Enter') {
             if (comment.length > 0 && !e.shiftKey) {
                 e.preventDefault();
@@ -77,18 +68,20 @@ var WorkflowComments = function (_a) {
             }
             e.preventDefault();
         }
-    };
-    var BUTTONS_GROUP = (0, react_1.useMemo)(function () { return __spreadArray([], actions.map(function (_a) {
-        var text = _a.text, onClick = _a.onClick;
-        return ({
-            label: text,
-            onClick: function () {
-                setCurrentAction(text);
-                onClick(comment);
-            },
-            value: text
+    }, [comment, sendComment]);
+    var buttonsGroup = (0, react_1.useMemo)(function () {
+        return actions.map(function (_a) {
+            var text = _a.text, onClick = _a.onClick;
+            return ({
+                label: text,
+                onClick: function () {
+                    setCurrentAction(text);
+                    onClick(comment);
+                },
+                value: text
+            });
         });
-    }), true); }, [actions, comment]);
+    }, [actions, comment]);
     return (react_1.default.createElement("div", { className: styles.container },
         react_1.default.createElement("div", { className: styles.title },
             " ",
@@ -96,9 +89,9 @@ var WorkflowComments = function (_a) {
             " "),
         react_1.default.createElement("div", { className: styles.commentsContainer }, expanded || comments.length < 3 ? (react_1.default.createElement(ExpandedComments_1.ExpandedComments, { comments: comments })) : (react_1.default.createElement(CollapsedComments_1.CollapsedComments, { onClick: function () { return setExpanded(true); }, comments: comments }))),
         !readOnly && (react_1.default.createElement(Input_1.default, { endAdornment: react_1.default.createElement(InputAdornment_1.default, { position: "end", className: styles.sendButton },
-                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: onKeyPressHandler, onChange: onChange, disableUnderline: true, multiline: true })),
+                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { icon: Send_1.default, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: ui_i18n_1.default.text('Write a comment'), value: comment, onKeyPress: handleKeyPress, onChange: handleChange, disableUnderline: true, multiline: true })),
         react_1.default.createElement("div", { className: styles.modeSwitcherWrapper },
-            BUTTONS_GROUP.length === 1 && (react_1.default.createElement(Button_1.default, { variant: "outlined", onClick: BUTTONS_GROUP[0].onClick, disabled: actionRequestIsInProgress }, BUTTONS_GROUP[0].label)),
-            BUTTONS_GROUP.length > 1 && (react_1.default.createElement(ModeSwitcherSelect_1.ModeSwitcherSelect, { buttonsGroup: BUTTONS_GROUP, value: currentAction, disabled: actionRequestIsInProgress })))));
+            buttonsGroup.length === 1 && (react_1.default.createElement(Button_1.default, { variant: "outlined", onClick: buttonsGroup[0].onClick, disabled: actionRequestIsInProgress }, buttonsGroup[0].label)),
+            buttonsGroup.length > 1 && (react_1.default.createElement(ModeSwitcherSelect_1.ModeSwitcherSelect, { buttonsGroup: buttonsGroup, value: currentAction, disabled: actionRequestIsInProgress })))));
 };
 exports.WorkflowComments = WorkflowComments;

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

@@ -1 +1 @@
-export { WorkflowComments as default } from "./WorkflowComments";
+export { WorkflowComments as default } from './WorkflowComments';

package/esm/components/workflow/components/TaskActionButtons/TaskActionButtons.js

@@ -11,7 +11,7 @@ export var TaskActionButtons = function (_a) {
         assignee: assignee,
         isOpen: isOpen
     }), actions = _b.actions, disabled = _b.actionRequestIsInProgress;
-    var _c = partition(propEq('text', preferredAction.label), actions), preferredActions = _c[0], otherActions = _c[1];
+    var _c = partition(propEq('text', preferredAction === null || preferredAction === void 0 ? void 0 : preferredAction.label), actions), preferredActions = _c[0], otherActions = _c[1];
     return (React.createElement(React.Fragment, null,
         otherActions.map(function (action) { return (React.createElement(Button, { variant: "outlined", onClick: action.onClick, key: action.text, disabled: disabled }, action.text)); }),
         preferredActions.map(function (action) { return (React.createElement(Button, { variant: "contained", color: "primary", onClick: action.onClick, key: action.text, disabled: disabled }, action.text)); })));

package/esm/components/workflow/components/WorkflowComments/CollapsedComments.d.ts

@@ -1,16 +1,8 @@
-export function CollapsedComments({ comments, onClick }: {
-    comments: any;
-    onClick: any;
-}): JSX.Element;
-export namespace CollapsedComments {
-    namespace propTypes {
-        const comments: PropTypes.Requireable<PropTypes.InferProps<{
-            author: PropTypes.Requireable<string>;
-            id: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-            time: PropTypes.Requireable<number>;
-        }>[]>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-    }
-}
-import PropTypes from 'prop-types';
+import React from 'react';
+import { WorkflowComment } from '@reltio/mdm-sdk';
+type Props = {
+    comments: WorkflowComment[];
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+};
+export declare const CollapsedComments: ({ comments, onClick }: Props) => JSX.Element;
+export {};

package/esm/components/workflow/components/WorkflowComments/CollapsedComments.js

@@ -10,7 +10,6 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import { Comment } from './Comment';
 import { useCollapsedCommentsStyles } from './styles';
@@ -23,12 +22,3 @@ export var CollapsedComments = function (_a) {
             React.createElement(IconButton, { className: styles.circleButton, onClick: onClick, size: "large" }, comments.length - 2)),
         React.createElement(Comment, __assign({}, comments[comments.length - 1]))));
 };
-CollapsedComments.propTypes = {
-    comments: PropTypes.arrayOf(PropTypes.shape({
-        author: PropTypes.string,
-        id: PropTypes.string,
-        message: PropTypes.string,
-        time: PropTypes.number
-    })),
-    onClick: PropTypes.func
-};

package/esm/components/workflow/components/WorkflowComments/Comment.d.ts

@@ -1,20 +1,9 @@
-export function Comment({ author, classes, message, time }: {
-    author: any;
-    classes: any;
-    message: any;
-    time: any;
-}): JSX.Element;
-export namespace Comment {
-    namespace defaultProps {
-        const classes: {};
-    }
-    namespace propTypes {
-        const classes_1: PropTypes.Requireable<object>;
-        export { classes_1 as classes };
-        export const author: PropTypes.Requireable<string>;
-        export const id: PropTypes.Requireable<string>;
-        export const message: PropTypes.Requireable<string>;
-        export const time: PropTypes.Requireable<number>;
-    }
-}
-import PropTypes from 'prop-types';
+/// <reference types="react" />
+import { WorkflowComment } from '@reltio/mdm-sdk';
+type Props = Pick<WorkflowComment, 'author' | 'message' | 'time'> & {
+    classes?: {
+        messageContainer?: string;
+    };
+};
+export declare const Comment: ({ author, message, time, classes }: Props) => JSX.Element;
+export {};

package/esm/components/workflow/components/WorkflowComments/Comment.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import Avatar from '@mui/material/Avatar';
-import Person from '@mui/icons-material/Person';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
+import Avatar from '@mui/material/Avatar';
+import Person from '@mui/icons-material/Person';
 import { useCommentStyles } from './styles';
 export var Comment = function (_a) {
-    var author = _a.author, classes = _a.classes, message = _a.message, time = _a.time;
+    var author = _a.author, message = _a.message, time = _a.time, _b = _a.classes, classes = _b === void 0 ? {} : _b;
     var styles = useCommentStyles();
     return (React.createElement("div", { className: styles.comment },
         React.createElement(Avatar, { className: styles.avatar },
@@ -17,13 +16,3 @@ export var Comment = function (_a) {
                 React.createElement("span", { className: styles.date }, i18n.date(time, 'L LT'))),
             React.createElement("div", { className: styles.text }, message))));
 };
-Comment.defaultProps = {
-    classes: {}
-};
-Comment.propTypes = {
-    classes: PropTypes.object,
-    author: PropTypes.string,
-    id: PropTypes.string,
-    message: PropTypes.string,
-    time: PropTypes.number
-};

package/esm/components/workflow/components/WorkflowComments/ExpandedComments.d.ts

@@ -1,14 +1,7 @@
-export function ExpandedComments({ comments }: {
-    comments: any;
-}): any;
-export namespace ExpandedComments {
-    namespace propTypes {
-        const comments: PropTypes.Requireable<PropTypes.InferProps<{
-            author: PropTypes.Requireable<string>;
-            id: PropTypes.Requireable<string>;
-            message: PropTypes.Requireable<string>;
-            time: PropTypes.Requireable<number>;
-        }>[]>;
-    }
-}
-import PropTypes from 'prop-types';
+/// <reference types="react" />
+import { WorkflowComment } from '@reltio/mdm-sdk';
+type Props = {
+    comments: WorkflowComment[];
+};
+export declare const ExpandedComments: ({ comments }: Props) => JSX.Element;
+export {};

package/esm/components/workflow/components/WorkflowComments/ExpandedComments.js

@@ -1,20 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Comment } from './Comment';
 import { useExpandedComments } from './styles';
 export var ExpandedComments = function (_a) {
     var comments = _a.comments;
     var styles = useExpandedComments();
-    return comments.map(function (_a) {
+    return (React.createElement(React.Fragment, null, comments.map(function (_a) {
         var author = _a.author, id = _a.id, message = _a.message, time = _a.time;
         return (React.createElement(Comment, { classes: { messageContainer: styles.messageContainer }, key: id, author: author, message: message, time: time }));
-    });
-};
-ExpandedComments.propTypes = {
-    comments: PropTypes.arrayOf(PropTypes.shape({
-        author: PropTypes.string,
-        id: PropTypes.string,
-        message: PropTypes.string,
-        time: PropTypes.number
-    }))
+    })));
 };

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

@@ -7,7 +7,7 @@ type Props = {
     processInstanceComments: WorkflowComment[];
     taskId: string;
     isTaskOpen: boolean;
-    preferredAction: WorkflowAction;
+    preferredAction?: WorkflowAction;
 };
 export declare const WorkflowComments: ({ workflowActions: actions, actionRequestIsInProgress, processInstanceComments, taskId, isTaskOpen, preferredAction }: Props) => JSX.Element;
 export {};

package/esm/components/workflow/components/WorkflowComments/WorkflowComments.js

@@ -1,14 +1,4 @@
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import React, { useCallback, useState, useMemo } from 'react';
-import { pipe } from 'ramda';
 import Input from '@mui/material/Input';
 import InputAdornment from '@mui/material/InputAdornment';
 import SendIcon from '@mui/icons-material/Send';
@@ -20,13 +10,12 @@ import { useWorkflowStyles } from './styles';
 import { useWorkflowComments } from '../../hooks/useWorkflowComments';
 import { SmallIconButton } from '../../../SmallIconButton';
 import { ModeSwitcherSelect } from '../../../ModeSwitcherSelect/ModeSwitcherSelect';
-var getValue = function (e) { return e.target.value; };
 export var WorkflowComments = function (_a) {
     var actions = _a.workflowActions, actionRequestIsInProgress = _a.actionRequestIsInProgress, processInstanceComments = _a.processInstanceComments, taskId = _a.taskId, isTaskOpen = _a.isTaskOpen, preferredAction = _a.preferredAction;
     var styles = useWorkflowStyles();
     var _b = useState(false), expanded = _b[0], setExpanded = _b[1];
     var _c = useState(''), comment = _c[0], setComment = _c[1];
-    var _d = useState(preferredAction.label), currentAction = _d[0], setCurrentAction = _d[1];
+    var _d = useState(function () { var _a; return (preferredAction === null || preferredAction === void 0 ? void 0 : preferredAction.label) || ((_a = actions[0]) === null || _a === void 0 ? void 0 : _a.text); }), currentAction = _d[0], setCurrentAction = _d[1];
     var _e = useWorkflowComments({
         processInstanceComments: processInstanceComments,
         taskId: taskId,
@@ -36,8 +25,10 @@ export var WorkflowComments = function (_a) {
         writeComment(comment);
         setComment('');
     }, [comment, writeComment]);
-    var onChange = pipe(getValue, setComment);
-    var onKeyPressHandler = function (e) {
+    var handleChange = useCallback(function (event) {
+        setComment(event.target.value);
+    }, []);
+    var handleKeyPress = useCallback(function (e) {
         if (e.key === 'Enter') {
             if (comment.length > 0 && !e.shiftKey) {
                 e.preventDefault();
@@ -48,18 +39,20 @@ export var WorkflowComments = function (_a) {
             }
             e.preventDefault();
         }
-    };
-    var BUTTONS_GROUP = useMemo(function () { return __spreadArray([], actions.map(function (_a) {
-        var text = _a.text, onClick = _a.onClick;
-        return ({
-            label: text,
-            onClick: function () {
-                setCurrentAction(text);
-                onClick(comment);
-            },
-            value: text
+    }, [comment, sendComment]);
+    var buttonsGroup = useMemo(function () {
+        return actions.map(function (_a) {
+            var text = _a.text, onClick = _a.onClick;
+            return ({
+                label: text,
+                onClick: function () {
+                    setCurrentAction(text);
+                    onClick(comment);
+                },
+                value: text
+            });
         });
-    }), true); }, [actions, comment]);
+    }, [actions, comment]);
     return (React.createElement("div", { className: styles.container },
         React.createElement("div", { className: styles.title },
             " ",
@@ -67,8 +60,8 @@ export var WorkflowComments = function (_a) {
             " "),
         React.createElement("div", { className: styles.commentsContainer }, expanded || comments.length < 3 ? (React.createElement(ExpandedComments, { comments: comments })) : (React.createElement(CollapsedComments, { onClick: function () { return setExpanded(true); }, comments: comments }))),
         !readOnly && (React.createElement(Input, { endAdornment: React.createElement(InputAdornment, { position: "end", className: styles.sendButton },
-                React.createElement(SmallIconButton, { icon: SendIcon, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: i18n.text('Write a comment'), value: comment, onKeyPress: onKeyPressHandler, onChange: onChange, disableUnderline: true, multiline: true })),
+                React.createElement(SmallIconButton, { icon: SendIcon, disabled: comment.length === 0, onClick: sendComment, "data-reltio-id": "send-button" })), classes: { root: styles.filledInputRoot }, placeholder: i18n.text('Write a comment'), value: comment, onKeyPress: handleKeyPress, onChange: handleChange, disableUnderline: true, multiline: true })),
         React.createElement("div", { className: styles.modeSwitcherWrapper },
-            BUTTONS_GROUP.length === 1 && (React.createElement(Button, { variant: "outlined", onClick: BUTTONS_GROUP[0].onClick, disabled: actionRequestIsInProgress }, BUTTONS_GROUP[0].label)),
-            BUTTONS_GROUP.length > 1 && (React.createElement(ModeSwitcherSelect, { buttonsGroup: BUTTONS_GROUP, value: currentAction, disabled: actionRequestIsInProgress })))));
+            buttonsGroup.length === 1 && (React.createElement(Button, { variant: "outlined", onClick: buttonsGroup[0].onClick, disabled: actionRequestIsInProgress }, buttonsGroup[0].label)),
+            buttonsGroup.length > 1 && (React.createElement(ModeSwitcherSelect, { buttonsGroup: buttonsGroup, value: currentAction, disabled: actionRequestIsInProgress })))));
 };

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

@@ -1 +1 @@
-export { WorkflowComments as default } from "./WorkflowComments";
+export { WorkflowComments as default } from './WorkflowComments';

package/package.json

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