@reltio/components 1.4.1837 → 1.4.1838

package/cjs/CollaborationItem/components/RepliedComment/RepliedComment.js

@@ -68,7 +68,7 @@ var RepliedComment = function (_a) {
     var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { inputRef: inputRef, popperRef: popperRef, uri: uri, onCancel: function () { return updateIsEditingReply(false); }, isEditingReply: isEditing, reply: reply, comment: comment }));
     return (react_1.default.createElement(Box_1.default, { className: (0, classnames_1.default)(styles.root, className) },
         react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, createdBy),
-        react_1.default.createElement(Box_1.default, { flexGrow: 1 },
+        react_1.default.createElement(Box_1.default, { className: styles.replyArea },
             react_1.default.createElement(Box_1.default, { className: styles.header },
                 react_1.default.createElement(Typography_1.default, { className: styles.username }, createdBy),
                 action === 'resolve' && (react_1.default.createElement(Typography_1.default, { className: styles.marked }, ui_i18n_1.default.text('Marked as resolved'))),

package/cjs/CollaborationItem/components/RepliedComment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"header" | "message" | "username" | "root" | "avatar" | "createdAt" | "marked">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"header" | "message" | "username" | "root" | "avatar" | "createdAt" | "replyArea" | "marked">;

package/cjs/CollaborationItem/components/RepliedComment/styles.js

@@ -12,6 +12,9 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
     avatar: {
         marginRight: '8px'
     },
+    replyArea: {
+        width: 'calc(100% - 60px)'
+    },
     header: {
         display: 'flex',
         marginBottom: '8px'

package/cjs/CollaborationItem/components/SendMessageArea/styles.js

@@ -14,7 +14,7 @@ exports.useStyles = (0, styles_1.makeStyles)({
     textField: function (_a) {
         var isEditing = _a.isEditing;
         return ({
-            maxWidth: isEditing ? '100%' : 'calc(100% - 40px)'
+            width: isEditing ? '100%' : 'calc(100% - 40px)'
         });
     },
     form: {

package/cjs/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.d.ts

@@ -2,5 +2,5 @@ import { MentionsInputProps } from 'react-mentions';
 type Props = Omit<MentionsInputProps, 'children' | 'onChange'> & {
     onChange?: (value: string, plainTextValue: string, mentions: string[]) => void;
 };
-export declare const TextFieldWithMentions: ({ onChange, className, ...props }: Props) => JSX.Element;
+export declare const TextFieldWithMentions: ({ onChange, className, value, placeholder, ...props }: Props) => JSX.Element;
 export {};

package/cjs/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js

@@ -55,9 +55,10 @@ var ramda_1 = require("ramda");
 var react_mentions_1 = require("react-mentions");
 var UsersContext_1 = require("../../../contexts/UsersContext");
 var styles_1 = require("./styles");
+var constants_1 = require("./constants");
 var TextFieldWithMentions = function (_a) {
-    var onChange = _a.onChange, className = _a.className, props = __rest(_a, ["onChange", "className"]);
-    var styles = (0, styles_1.useStyles)();
+    var onChange = _a.onChange, className = _a.className, value = _a.value, placeholder = _a.placeholder, props = __rest(_a, ["onChange", "className", "value", "placeholder"]);
+    var styles = (0, styles_1.useStyles)({ placeholder: value ? '' : placeholder });
     var users = (0, react_1.useContext)(UsersContext_1.UsersContext);
     var handleChange = function (_, value, plainTextValue, mentions) {
         onChange(value, plainTextValue, (0, ramda_1.uniq)(mentions.map(function (_a) {
@@ -65,10 +66,11 @@ var TextFieldWithMentions = function (_a) {
             return display.slice(1);
         })));
     };
-    return (react_1.default.createElement(react_mentions_1.MentionsInput, __assign({}, props, { onChange: handleChange, className: (0, classnames_1.default)(styles.root, className), suggestionsPortalHost: document.body }),
-        react_1.default.createElement(react_mentions_1.Mention, { trigger: "+", data: users.map(function (_a) {
-                var username = _a.username;
-                return ({ id: username, display: username });
-            }), displayTransform: function (_, username) { return "+".concat(username); }, appendSpaceOnAdd: true, className: styles.mention })));
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className) },
+        react_1.default.createElement(react_mentions_1.MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: (0, classnames_1.default)(constants_1.MENTIONS_TEXTAREA_CLASSNAME), suggestionsPortalHost: document.body }),
+            react_1.default.createElement(react_mentions_1.Mention, { trigger: "+", data: users.map(function (_a) {
+                    var username = _a.username;
+                    return ({ id: username, display: username });
+                }), displayTransform: function (_, username) { return "+".concat(username); }, appendSpaceOnAdd: true, className: styles.mention }))));
 };
 exports.TextFieldWithMentions = TextFieldWithMentions;

package/cjs/CollaborationItem/components/TextFieldWithMentions/constants.d.ts

@@ -0,0 +1 @@
+export declare const MENTIONS_TEXTAREA_CLASSNAME = "mentionsTextArea";

package/cjs/CollaborationItem/components/TextFieldWithMentions/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MENTIONS_TEXTAREA_CLASSNAME = void 0;
+exports.MENTIONS_TEXTAREA_CLASSNAME = 'mentionsTextArea';

package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.d.ts

@@ -1 +1,5 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "mention">;
+type StylesProps = {
+    placeholder?: string;
+};
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mention">;
+export {};

package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.js

@@ -3,53 +3,63 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 var constants_1 = require("../../../constants");
+var constants_2 = require("./constants");
 var suggestionsZIndex = constants_1.POPUP_Z_INDEX + 1;
-exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
-    root: {
-        width: '100%',
-        backgroundColor: '#fff',
-        fontFamily: 'Roboto',
-        '&__control': {
-            fontSize: '13px'
-        },
-        '&__highlighter': {
-            padding: '10px 22px',
-            border: '1px solid transparent !important'
-        },
-        '&__input': {
-            borderRadius: '2px',
-            border: '1px solid rgba(0,0,0,0.12)',
-            padding: '10px 22px',
-            outline: 0,
-            overflow: 'auto !important'
-        },
-        '&__suggestions': {
-            padding: '8px 0',
-            zIndex: suggestionsZIndex + '!important',
-            borderRadius: '4px',
-            backgroundColor: '#fafafa !important',
-            boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
-            transform: 'translateY(-100%)'
-        },
-        '&__suggestions__list': {
-            maxHeight: '200px',
-            overflowY: 'scroll'
-        },
-        '&__suggestions__item': {
-            padding: '6px 12px',
-            color: theme.palette.text.primary,
-            fontSize: '13px',
-            transition: theme.transitions.create(['background-color']),
-            '&:hover, &--focused': {
-                backgroundColor: 'rgba(0,0,0,0.04)'
-            }
+exports.useStyles = (0, styles_1.makeStyles)(function (theme) {
+    var _a;
+    return ({
+        root: (_a = {
+                backgroundColor: '#fff',
+                fontFamily: 'Roboto'
+            },
+            _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__control")] = {
+                fontSize: '13px'
+            },
+            _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = {
+                padding: '10px 22px',
+                border: '1px solid transparent !important',
+                '&::before': {
+                    content: function (_a) {
+                        var placeholder = _a.placeholder;
+                        return placeholder && "\"".concat(placeholder, "\"");
+                    }
+                }
+            },
+            _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__input")] = {
+                borderRadius: '2px',
+                border: '1px solid rgba(0,0,0,0.12)',
+                padding: '10px 22px',
+                outline: 0,
+                overflow: 'auto !important'
+            },
+            _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = {
+                padding: '8px 0',
+                zIndex: suggestionsZIndex + '!important',
+                borderRadius: '4px',
+                backgroundColor: '#fafafa !important',
+                boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+                transform: 'translateY(-100%)'
+            },
+            _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = {
+                maxHeight: '200px',
+                overflowY: 'scroll'
+            },
+            _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = {
+                padding: '6px 12px',
+                color: theme.palette.text.primary,
+                fontSize: '13px',
+                transition: theme.transitions.create(['background-color']),
+                '&:hover, &--focused': {
+                    backgroundColor: 'rgba(0,0,0,0.04)'
+                }
+            },
+            _a),
+        mention: {
+            position: 'relative',
+            zIndex: 1,
+            color: theme.palette.primary.main,
+            textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
+            pointerEvents: 'none'
         }
-    },
-    mention: {
-        position: 'relative',
-        zIndex: 1,
-        color: theme.palette.primary.main,
-        textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
-        pointerEvents: 'none'
-    }
-}); });
+    });
+});

package/esm/CollaborationItem/components/RepliedComment/RepliedComment.js

@@ -39,7 +39,7 @@ export var RepliedComment = function (_a) {
     var sendMessageArea = (React.createElement(SendMessageArea, { inputRef: inputRef, popperRef: popperRef, uri: uri, onCancel: function () { return updateIsEditingReply(false); }, isEditingReply: isEditing, reply: reply, comment: comment }));
     return (React.createElement(Box, { className: classnames(styles.root, className) },
         React.createElement(Avatar, { classes: { root: styles.avatar } }, createdBy),
-        React.createElement(Box, { flexGrow: 1 },
+        React.createElement(Box, { className: styles.replyArea },
             React.createElement(Box, { className: styles.header },
                 React.createElement(Typography, { className: styles.username }, createdBy),
                 action === 'resolve' && (React.createElement(Typography, { className: styles.marked }, i18n.text('Marked as resolved'))),

package/esm/CollaborationItem/components/RepliedComment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"header" | "message" | "username" | "root" | "avatar" | "createdAt" | "marked">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"header" | "message" | "username" | "root" | "avatar" | "createdAt" | "replyArea" | "marked">;

package/esm/CollaborationItem/components/RepliedComment/styles.js

@@ -9,6 +9,9 @@ export var useStyles = makeStyles(function (theme) { return ({
     avatar: {
         marginRight: '8px'
     },
+    replyArea: {
+        width: 'calc(100% - 60px)'
+    },
     header: {
         display: 'flex',
         marginBottom: '8px'

package/esm/CollaborationItem/components/SendMessageArea/styles.js

@@ -11,7 +11,7 @@ export var useStyles = makeStyles({
     textField: function (_a) {
         var isEditing = _a.isEditing;
         return ({
-            maxWidth: isEditing ? '100%' : 'calc(100% - 40px)'
+            width: isEditing ? '100%' : 'calc(100% - 40px)'
         });
     },
     form: {

package/esm/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.d.ts

@@ -2,5 +2,5 @@ import { MentionsInputProps } from 'react-mentions';
 type Props = Omit<MentionsInputProps, 'children' | 'onChange'> & {
     onChange?: (value: string, plainTextValue: string, mentions: string[]) => void;
 };
-export declare const TextFieldWithMentions: ({ onChange, className, ...props }: Props) => JSX.Element;
+export declare const TextFieldWithMentions: ({ onChange, className, value, placeholder, ...props }: Props) => JSX.Element;
 export {};

package/esm/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js

@@ -26,9 +26,10 @@ import { uniq } from 'ramda';
 import { MentionsInput, Mention } from 'react-mentions';
 import { UsersContext } from '../../../contexts/UsersContext';
 import { useStyles } from './styles';
+import { MENTIONS_TEXTAREA_CLASSNAME } from './constants';
 export var TextFieldWithMentions = function (_a) {
-    var onChange = _a.onChange, className = _a.className, props = __rest(_a, ["onChange", "className"]);
-    var styles = useStyles();
+    var onChange = _a.onChange, className = _a.className, value = _a.value, placeholder = _a.placeholder, props = __rest(_a, ["onChange", "className", "value", "placeholder"]);
+    var styles = useStyles({ placeholder: value ? '' : placeholder });
     var users = useContext(UsersContext);
     var handleChange = function (_, value, plainTextValue, mentions) {
         onChange(value, plainTextValue, uniq(mentions.map(function (_a) {
@@ -36,9 +37,10 @@ export var TextFieldWithMentions = function (_a) {
             return display.slice(1);
         })));
     };
-    return (React.createElement(MentionsInput, __assign({}, props, { onChange: handleChange, className: classnames(styles.root, className), suggestionsPortalHost: document.body }),
-        React.createElement(Mention, { trigger: "+", data: users.map(function (_a) {
-                var username = _a.username;
-                return ({ id: username, display: username });
-            }), displayTransform: function (_, username) { return "+".concat(username); }, appendSpaceOnAdd: true, className: styles.mention })));
+    return (React.createElement("div", { className: classnames(styles.root, className) },
+        React.createElement(MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: classnames(MENTIONS_TEXTAREA_CLASSNAME), suggestionsPortalHost: document.body }),
+            React.createElement(Mention, { trigger: "+", data: users.map(function (_a) {
+                    var username = _a.username;
+                    return ({ id: username, display: username });
+                }), displayTransform: function (_, username) { return "+".concat(username); }, appendSpaceOnAdd: true, className: styles.mention }))));
 };

package/esm/CollaborationItem/components/TextFieldWithMentions/constants.d.ts

@@ -0,0 +1 @@
+export declare const MENTIONS_TEXTAREA_CLASSNAME = "mentionsTextArea";

package/esm/CollaborationItem/components/TextFieldWithMentions/constants.js

@@ -0,0 +1 @@
+export var MENTIONS_TEXTAREA_CLASSNAME = 'mentionsTextArea';

package/esm/CollaborationItem/components/TextFieldWithMentions/styles.d.ts

@@ -1 +1,5 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root" | "mention">;
+type StylesProps = {
+    placeholder?: string;
+};
+export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mention">;
+export {};

package/esm/CollaborationItem/components/TextFieldWithMentions/styles.js

@@ -1,52 +1,62 @@
 import { makeStyles } from '@mui/styles';
 import { POPUP_Z_INDEX } from '../../../constants';
+import { MENTIONS_TEXTAREA_CLASSNAME } from './constants';
 var suggestionsZIndex = POPUP_Z_INDEX + 1;
-export var useStyles = makeStyles(function (theme) { return ({
-    root: {
-        width: '100%',
-        backgroundColor: '#fff',
-        fontFamily: 'Roboto',
-        '&__control': {
-            fontSize: '13px'
-        },
-        '&__highlighter': {
-            padding: '10px 22px',
-            border: '1px solid transparent !important'
-        },
-        '&__input': {
-            borderRadius: '2px',
-            border: '1px solid rgba(0,0,0,0.12)',
-            padding: '10px 22px',
-            outline: 0,
-            overflow: 'auto !important'
-        },
-        '&__suggestions': {
-            padding: '8px 0',
-            zIndex: suggestionsZIndex + '!important',
-            borderRadius: '4px',
-            backgroundColor: '#fafafa !important',
-            boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
-            transform: 'translateY(-100%)'
-        },
-        '&__suggestions__list': {
-            maxHeight: '200px',
-            overflowY: 'scroll'
-        },
-        '&__suggestions__item': {
-            padding: '6px 12px',
-            color: theme.palette.text.primary,
-            fontSize: '13px',
-            transition: theme.transitions.create(['background-color']),
-            '&:hover, &--focused': {
-                backgroundColor: 'rgba(0,0,0,0.04)'
-            }
+export var useStyles = makeStyles(function (theme) {
+    var _a;
+    return ({
+        root: (_a = {
+                backgroundColor: '#fff',
+                fontFamily: 'Roboto'
+            },
+            _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__control")] = {
+                fontSize: '13px'
+            },
+            _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = {
+                padding: '10px 22px',
+                border: '1px solid transparent !important',
+                '&::before': {
+                    content: function (_a) {
+                        var placeholder = _a.placeholder;
+                        return placeholder && "\"".concat(placeholder, "\"");
+                    }
+                }
+            },
+            _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__input")] = {
+                borderRadius: '2px',
+                border: '1px solid rgba(0,0,0,0.12)',
+                padding: '10px 22px',
+                outline: 0,
+                overflow: 'auto !important'
+            },
+            _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = {
+                padding: '8px 0',
+                zIndex: suggestionsZIndex + '!important',
+                borderRadius: '4px',
+                backgroundColor: '#fafafa !important',
+                boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+                transform: 'translateY(-100%)'
+            },
+            _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = {
+                maxHeight: '200px',
+                overflowY: 'scroll'
+            },
+            _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = {
+                padding: '6px 12px',
+                color: theme.palette.text.primary,
+                fontSize: '13px',
+                transition: theme.transitions.create(['background-color']),
+                '&:hover, &--focused': {
+                    backgroundColor: 'rgba(0,0,0,0.04)'
+                }
+            },
+            _a),
+        mention: {
+            position: 'relative',
+            zIndex: 1,
+            color: theme.palette.primary.main,
+            textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
+            pointerEvents: 'none'
         }
-    },
-    mention: {
-        position: 'relative',
-        zIndex: 1,
-        color: theme.palette.primary.main,
-        textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
-        pointerEvents: 'none'
-    }
-}); });
+    });
+});

package/package.json

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