@reltio/components 1.4.1839 → 1.4.1840

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cjs/CollaborationItem/components/Comment/styles.js +2 -1
  2. package/cjs/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js +10 -2
  3. package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.d.ts +1 -1
  4. package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.js +53 -58
  5. package/esm/CollaborationItem/components/Comment/styles.js +2 -1
  6. package/esm/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js +10 -2
  7. package/esm/CollaborationItem/components/TextFieldWithMentions/styles.d.ts +1 -1
  8. package/esm/CollaborationItem/components/TextFieldWithMentions/styles.js +53 -58
  9. package/package.json +1 -1
  10. package/cjs/CollaborationItem/components/TextFieldWithMentions/constants.d.ts +0 -1
  11. package/cjs/CollaborationItem/components/TextFieldWithMentions/constants.js +0 -4
  12. package/esm/CollaborationItem/components/TextFieldWithMentions/constants.d.ts +0 -1
  13. package/esm/CollaborationItem/components/TextFieldWithMentions/constants.js +0 -1
package/cjs/CollaborationItem/components/Comment/styles.js CHANGED
@@ -28,7 +28,8 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
28
28
  marginLeft: '40px'
29
29
  },
30
30
  commentTarget: {
31
- marginTop: '-15px'
31
+ marginTop: '-15px',
32
+ overflowWrap: 'break-word'
32
33
  },
33
34
  message: {
34
35
  marginTop: '12px'
package/cjs/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js CHANGED
@@ -55,8 +55,9 @@ var ramda_1 = require("ramda");
55
55
  var react_mentions_1 = require("react-mentions");
56
56
  var UsersContext_1 = require("../../../contexts/UsersContext");
57
57
  var styles_1 = require("./styles");
58
- var constants_1 = require("./constants");
58
+ var MENTIONS_TEXTAREA_CLASSNAME = 'mentionsTextArea';
59
59
  var TextFieldWithMentions = function (_a) {
60
+ var _b;
60
61
  var onChange = _a.onChange, className = _a.className, value = _a.value, placeholder = _a.placeholder, props = __rest(_a, ["onChange", "className", "value", "placeholder"]);
61
62
  var styles = (0, styles_1.useStyles)({ placeholder: value ? '' : placeholder });
62
63
  var users = (0, react_1.useContext)(UsersContext_1.UsersContext);
@@ -67,7 +68,14 @@ var TextFieldWithMentions = function (_a) {
67
68
  })));
68
69
  };
69
70
  return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, className) },
70
- 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 }),
71
+ react_1.default.createElement(react_mentions_1.MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: MENTIONS_TEXTAREA_CLASSNAME, suggestionsPortalHost: document.body, classNames: (_b = {},
72
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__input")] = styles.mentionsInput,
73
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = styles.mentionsHighlighter,
74
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__control")] = styles.mentionsControl,
75
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = styles.mentionsSuggestions,
76
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = styles.mentionsSuggestionsList,
77
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = styles.mentionsSuggestionsItem,
78
+ _b) }),
71
79
  react_1.default.createElement(react_mentions_1.Mention, { trigger: "+", data: users.map(function (_a) {
72
80
  var username = _a.username;
73
81
  return ({ id: username, display: username });
package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  type StylesProps = {
2
2
  placeholder?: string;
3
3
  };
4
- export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mention">;
4
+ export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mentionsControl" | "mentionsHighlighter" | "mentionsInput" | "mentionsSuggestions" | "mentionsSuggestionsList" | "mentionsSuggestionsItem" | "mention">;
5
5
  export {};
package/cjs/CollaborationItem/components/TextFieldWithMentions/styles.js CHANGED
@@ -3,63 +3,58 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useStyles = void 0;
4
4
  var styles_1 = require("@mui/styles");
5
5
  var constants_1 = require("../../../constants");
6
- var constants_2 = require("./constants");
7
6
  var suggestionsZIndex = constants_1.POPUP_Z_INDEX + 1;
8
- exports.useStyles = (0, styles_1.makeStyles)(function (theme) {
9
- var _a;
10
- return ({
11
- root: (_a = {
12
- backgroundColor: '#fff',
13
- fontFamily: 'Roboto'
14
- },
15
- _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__control")] = {
16
- fontSize: '13px'
17
- },
18
- _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = {
19
- padding: '10px 22px',
20
- border: '1px solid transparent !important',
21
- '&::before': {
22
- content: function (_a) {
23
- var placeholder = _a.placeholder;
24
- return placeholder && "\"".concat(placeholder, "\"");
25
- }
26
- }
27
- },
28
- _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__input")] = {
29
- borderRadius: '2px',
30
- border: '1px solid rgba(0,0,0,0.12)',
31
- padding: '10px 22px',
32
- outline: 0,
33
- overflow: 'auto !important'
34
- },
35
- _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = {
36
- padding: '8px 0',
37
- zIndex: suggestionsZIndex + '!important',
38
- borderRadius: '4px',
39
- backgroundColor: '#fafafa !important',
40
- 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)',
41
- transform: 'translateY(-100%)'
42
- },
43
- _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = {
44
- maxHeight: '200px',
45
- overflowY: 'scroll'
46
- },
47
- _a["& .".concat(constants_2.MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = {
48
- padding: '6px 12px',
49
- color: theme.palette.text.primary,
50
- fontSize: '13px',
51
- transition: theme.transitions.create(['background-color']),
52
- '&:hover, &--focused': {
53
- backgroundColor: 'rgba(0,0,0,0.04)'
54
- }
55
- },
56
- _a),
57
- mention: {
58
- position: 'relative',
59
- zIndex: 1,
60
- color: theme.palette.primary.main,
61
- textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
62
- pointerEvents: 'none'
7
+ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
8
+ root: {
9
+ backgroundColor: '#fff',
10
+ fontFamily: 'Roboto'
11
+ },
12
+ mentionsControl: {
13
+ fontSize: '13px'
14
+ },
15
+ mentionsHighlighter: {
16
+ padding: '10px 22px',
17
+ border: '1px solid transparent !important',
18
+ '&::before': {
19
+ content: function (_a) {
20
+ var placeholder = _a.placeholder;
21
+ return placeholder && "\"".concat(placeholder, "\"");
22
+ }
63
23
  }
64
- });
65
- });
24
+ },
25
+ mentionsInput: {
26
+ borderRadius: '2px',
27
+ border: '1px solid rgba(0,0,0,0.12)',
28
+ padding: '10px 22px',
29
+ outline: 0,
30
+ overflow: 'auto !important'
31
+ },
32
+ mentionsSuggestions: {
33
+ padding: '8px 0',
34
+ zIndex: suggestionsZIndex + '!important',
35
+ borderRadius: '4px',
36
+ backgroundColor: '#fafafa !important',
37
+ 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)',
38
+ transform: 'translateY(-100%)'
39
+ },
40
+ mentionsSuggestionsList: {
41
+ maxHeight: '200px',
42
+ overflowY: 'scroll'
43
+ },
44
+ mentionsSuggestionsItem: {
45
+ padding: '6px 12px',
46
+ color: theme.palette.text.primary,
47
+ fontSize: '13px',
48
+ transition: theme.transitions.create(['background-color']),
49
+ '&:hover, &--focused': {
50
+ backgroundColor: 'rgba(0,0,0,0.04)'
51
+ }
52
+ },
53
+ mention: {
54
+ position: 'relative',
55
+ zIndex: 1,
56
+ color: theme.palette.primary.main,
57
+ textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
58
+ pointerEvents: 'none'
59
+ }
60
+ }); });
package/esm/CollaborationItem/components/Comment/styles.js CHANGED
@@ -25,7 +25,8 @@ export var useStyles = makeStyles(function (theme) { return ({
25
25
  marginLeft: '40px'
26
26
  },
27
27
  commentTarget: {
28
- marginTop: '-15px'
28
+ marginTop: '-15px',
29
+ overflowWrap: 'break-word'
29
30
  },
30
31
  message: {
31
32
  marginTop: '12px'
package/esm/CollaborationItem/components/TextFieldWithMentions/TextFieldWithMentions.js CHANGED
@@ -26,8 +26,9 @@ import { uniq } from 'ramda';
26
26
  import { MentionsInput, Mention } from 'react-mentions';
27
27
  import { UsersContext } from '../../../contexts/UsersContext';
28
28
  import { useStyles } from './styles';
29
- import { MENTIONS_TEXTAREA_CLASSNAME } from './constants';
29
+ var MENTIONS_TEXTAREA_CLASSNAME = 'mentionsTextArea';
30
30
  export var TextFieldWithMentions = function (_a) {
31
+ var _b;
31
32
  var onChange = _a.onChange, className = _a.className, value = _a.value, placeholder = _a.placeholder, props = __rest(_a, ["onChange", "className", "value", "placeholder"]);
32
33
  var styles = useStyles({ placeholder: value ? '' : placeholder });
33
34
  var users = useContext(UsersContext);
@@ -38,7 +39,14 @@ export var TextFieldWithMentions = function (_a) {
38
39
  })));
39
40
  };
40
41
  return (React.createElement("div", { className: classnames(styles.root, className) },
41
- React.createElement(MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: classnames(MENTIONS_TEXTAREA_CLASSNAME), suggestionsPortalHost: document.body }),
42
+ React.createElement(MentionsInput, __assign({}, props, { value: value, placeholder: placeholder, onChange: handleChange, className: MENTIONS_TEXTAREA_CLASSNAME, suggestionsPortalHost: document.body, classNames: (_b = {},
43
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__input")] = styles.mentionsInput,
44
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = styles.mentionsHighlighter,
45
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__control")] = styles.mentionsControl,
46
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = styles.mentionsSuggestions,
47
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = styles.mentionsSuggestionsList,
48
+ _b["".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = styles.mentionsSuggestionsItem,
49
+ _b) }),
42
50
  React.createElement(Mention, { trigger: "+", data: users.map(function (_a) {
43
51
  var username = _a.username;
44
52
  return ({ id: username, display: username });
package/esm/CollaborationItem/components/TextFieldWithMentions/styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  type StylesProps = {
2
2
  placeholder?: string;
3
3
  };
4
- export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mention">;
4
+ export declare const useStyles: (props: StylesProps) => import("@mui/styles").ClassNameMap<"root" | "mentionsControl" | "mentionsHighlighter" | "mentionsInput" | "mentionsSuggestions" | "mentionsSuggestionsList" | "mentionsSuggestionsItem" | "mention">;
5
5
  export {};
package/esm/CollaborationItem/components/TextFieldWithMentions/styles.js CHANGED
@@ -1,62 +1,57 @@
1
1
  import { makeStyles } from '@mui/styles';
2
2
  import { POPUP_Z_INDEX } from '../../../constants';
3
- import { MENTIONS_TEXTAREA_CLASSNAME } from './constants';
4
3
  var suggestionsZIndex = POPUP_Z_INDEX + 1;
5
- export var useStyles = makeStyles(function (theme) {
6
- var _a;
7
- return ({
8
- root: (_a = {
9
- backgroundColor: '#fff',
10
- fontFamily: 'Roboto'
11
- },
12
- _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__control")] = {
13
- fontSize: '13px'
14
- },
15
- _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__highlighter")] = {
16
- padding: '10px 22px',
17
- border: '1px solid transparent !important',
18
- '&::before': {
19
- content: function (_a) {
20
- var placeholder = _a.placeholder;
21
- return placeholder && "\"".concat(placeholder, "\"");
22
- }
23
- }
24
- },
25
- _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__input")] = {
26
- borderRadius: '2px',
27
- border: '1px solid rgba(0,0,0,0.12)',
28
- padding: '10px 22px',
29
- outline: 0,
30
- overflow: 'auto !important'
31
- },
32
- _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions")] = {
33
- padding: '8px 0',
34
- zIndex: suggestionsZIndex + '!important',
35
- borderRadius: '4px',
36
- backgroundColor: '#fafafa !important',
37
- 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)',
38
- transform: 'translateY(-100%)'
39
- },
40
- _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__list")] = {
41
- maxHeight: '200px',
42
- overflowY: 'scroll'
43
- },
44
- _a["& .".concat(MENTIONS_TEXTAREA_CLASSNAME, "__suggestions__item")] = {
45
- padding: '6px 12px',
46
- color: theme.palette.text.primary,
47
- fontSize: '13px',
48
- transition: theme.transitions.create(['background-color']),
49
- '&:hover, &--focused': {
50
- backgroundColor: 'rgba(0,0,0,0.04)'
51
- }
52
- },
53
- _a),
54
- mention: {
55
- position: 'relative',
56
- zIndex: 1,
57
- color: theme.palette.primary.main,
58
- textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
59
- pointerEvents: 'none'
4
+ export var useStyles = makeStyles(function (theme) { return ({
5
+ root: {
6
+ backgroundColor: '#fff',
7
+ fontFamily: 'Roboto'
8
+ },
9
+ mentionsControl: {
10
+ fontSize: '13px'
11
+ },
12
+ mentionsHighlighter: {
13
+ padding: '10px 22px',
14
+ border: '1px solid transparent !important',
15
+ '&::before': {
16
+ content: function (_a) {
17
+ var placeholder = _a.placeholder;
18
+ return placeholder && "\"".concat(placeholder, "\"");
19
+ }
60
20
  }
61
- });
62
- });
21
+ },
22
+ mentionsInput: {
23
+ borderRadius: '2px',
24
+ border: '1px solid rgba(0,0,0,0.12)',
25
+ padding: '10px 22px',
26
+ outline: 0,
27
+ overflow: 'auto !important'
28
+ },
29
+ mentionsSuggestions: {
30
+ padding: '8px 0',
31
+ zIndex: suggestionsZIndex + '!important',
32
+ borderRadius: '4px',
33
+ backgroundColor: '#fafafa !important',
34
+ 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)',
35
+ transform: 'translateY(-100%)'
36
+ },
37
+ mentionsSuggestionsList: {
38
+ maxHeight: '200px',
39
+ overflowY: 'scroll'
40
+ },
41
+ mentionsSuggestionsItem: {
42
+ padding: '6px 12px',
43
+ color: theme.palette.text.primary,
44
+ fontSize: '13px',
45
+ transition: theme.transitions.create(['background-color']),
46
+ '&:hover, &--focused': {
47
+ backgroundColor: 'rgba(0,0,0,0.04)'
48
+ }
49
+ },
50
+ mention: {
51
+ position: 'relative',
52
+ zIndex: 1,
53
+ color: theme.palette.primary.main,
54
+ textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
55
+ pointerEvents: 'none'
56
+ }
57
+ }); });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1839",
3
+ "version": "1.4.1840",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
package/cjs/CollaborationItem/components/TextFieldWithMentions/constants.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const MENTIONS_TEXTAREA_CLASSNAME = "mentionsTextArea";
package/cjs/CollaborationItem/components/TextFieldWithMentions/constants.js DELETED
@@ -1,4 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.MENTIONS_TEXTAREA_CLASSNAME = void 0;
4
- exports.MENTIONS_TEXTAREA_CLASSNAME = 'mentionsTextArea';
package/esm/CollaborationItem/components/TextFieldWithMentions/constants.d.ts DELETED
@@ -1 +0,0 @@
1
- export declare const MENTIONS_TEXTAREA_CLASSNAME = "mentionsTextArea";
package/esm/CollaborationItem/components/TextFieldWithMentions/constants.js DELETED
@@ -1 +0,0 @@
1
- export var MENTIONS_TEXTAREA_CLASSNAME = 'mentionsTextArea';