@selfcommunity/react-ui 0.7.0-alpha.344 → 0.7.0-alpha.346

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 (12) hide show
  1. package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.js +2 -1
  2. package/lib/cjs/components/Composer/Content/ContentPoll/ContentPoll.js +2 -1
  3. package/lib/cjs/components/Composer/Content/ContentPost/ContentPost.js +3 -5
  4. package/lib/cjs/components/Editor/plugins/MentionsPlugin.d.ts +1 -2
  5. package/lib/cjs/components/Editor/plugins/MentionsPlugin.js +22 -13
  6. package/lib/esm/components/Composer/Content/ContentDiscussion/ContentDiscussion.js +3 -2
  7. package/lib/esm/components/Composer/Content/ContentPoll/ContentPoll.js +2 -1
  8. package/lib/esm/components/Composer/Content/ContentPost/ContentPost.js +5 -8
  9. package/lib/esm/components/Editor/plugins/MentionsPlugin.d.ts +1 -2
  10. package/lib/esm/components/Editor/plugins/MentionsPlugin.js +22 -13
  11. package/lib/umd/react-ui.js +1 -1
  12. package/package.json +4 -4
package/lib/cjs/components/Composer/Content/ContentDiscussion/ContentDiscussion.js CHANGED
@@ -45,7 +45,8 @@ exports.default = (props) => {
45
45
  }, [value]);
46
46
  // RENDER
47
47
  return (react_1.default.createElement(Root, { className: (0, classnames_1.default)(classes.root, className) },
48
- generalError && react_1.default.createElement(material_1.Typography, { className: classes.generalError }, generalError),
48
+ generalError && react_1.default.createElement(material_1.Typography, { className: classes.generalError },
49
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` })),
49
50
  react_1.default.createElement(material_1.TextField, { className: classes.title, placeholder: intl.formatMessage({ id: "ui.composer.content.discussion.title.label", defaultMessage: "ui.composer.content.discussion.title.label" }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
50
51
  endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Composer_1.COMPOSER_TITLE_MAX_LENGTH - value.title.length)
51
52
  }, error: Boolean(titleError), helperText: titleError, disabled: disabled }),
package/lib/cjs/components/Composer/Content/ContentPoll/ContentPoll.js CHANGED
@@ -102,7 +102,8 @@ exports.default = (inProps) => {
102
102
  return minDate;
103
103
  }, []);
104
104
  return (react_1.default.createElement(Root, { className: (0, classnames_1.default)(classes.root, className) },
105
- generalError && react_1.default.createElement(material_1.Typography, { className: classes.generalError }, generalError),
105
+ generalError && react_1.default.createElement(material_1.Typography, { className: classes.generalError },
106
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })),
106
107
  react_1.default.createElement(material_1.Box, { className: classes.title },
107
108
  react_1.default.createElement(material_1.TextField, { autoFocus: true, disabled: disabled, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
108
109
  endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Composer_1.COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length)
package/lib/cjs/components/Composer/Content/ContentPost/ContentPost.js CHANGED
@@ -7,6 +7,7 @@ const styles_1 = require("@mui/material/styles");
7
7
  const classnames_1 = tslib_1.__importDefault(require("classnames"));
8
8
  const Editor_1 = tslib_1.__importDefault(require("../../../Editor"));
9
9
  const constants_1 = require("../../constants");
10
+ const react_intl_1 = require("react-intl");
10
11
  const classes = {
11
12
  root: `${constants_1.PREFIX}-content-post-root`,
12
13
  generalError: `${constants_1.PREFIX}-general-error`,
@@ -17,10 +18,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
17
18
  name: constants_1.PREFIX,
18
19
  slot: 'ContentPostRoot'
19
20
  })(({ theme }) => ({}));
20
- const SortableComponent = (0, react_1.forwardRef)((_a, ref) => {
21
- var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
22
- return (react_1.default.createElement(material_1.FormGroup, Object.assign({ direction: "column", ref: ref }, props), children));
23
- });
24
21
  /**
25
22
  * Default post
26
23
  */
@@ -46,6 +43,7 @@ exports.default = (props) => {
46
43
  }, [value]);
47
44
  // RENDER
48
45
  return (react_1.default.createElement(Root, { className: (0, classnames_1.default)(classes.root, className) },
49
- generalError && react_1.default.createElement(material_1.Typography, { className: classes.generalError }, generalError),
46
+ generalError && react_1.default.createElement(material_1.Typography, { className: classes.generalError },
47
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` })),
50
48
  react_1.default.createElement(Editor_1.default, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))));
51
49
  };
package/lib/cjs/components/Editor/plugins/MentionsPlugin.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { MutableRefObject } from 'react';
2
1
  declare type MentionMatch = {
3
2
  leadOffset: number;
4
3
  matchingString: string;
@@ -10,6 +9,6 @@ declare type Resolution = {
10
9
  };
11
10
  export declare function getScrollParent(element: HTMLElement, includeHidden: boolean): HTMLElement | HTMLBodyElement;
12
11
  export declare function useDynamicPositioning(resolution: Resolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
13
- export declare function useMenuAnchorRef(resolution: Resolution | null, setResolution: (r: Resolution | null) => void, className?: string): MutableRefObject<HTMLElement>;
12
+ export declare function useMenuAnchorRef(resolution: Resolution | null, setResolution: (r: Resolution | null) => void, className?: string): HTMLElement;
14
13
  export default function MentionsPlugin(): JSX.Element;
15
14
  export {};
package/lib/cjs/components/Editor/plugins/MentionsPlugin.js CHANGED
@@ -106,16 +106,17 @@ function useDynamicPositioning(resolution, targetElement, onReposition, onVisibi
106
106
  }
107
107
  exports.useDynamicPositioning = useDynamicPositioning;
108
108
  function useMenuAnchorRef(resolution, setResolution, className) {
109
+ const [anchorElementRef, setAnchorElementRef] = (0, react_1.useState)(null);
109
110
  const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
110
- const anchorElementRef = (0, react_1.useRef)(typeof document !== undefined ? document.createElement('div') : null);
111
+ //const anchorElementRef = useRef<HTMLElement>(null);
111
112
  const positionMenu = (0, react_1.useCallback)(() => {
112
113
  const rootElement = editor.getRootElement();
113
- const containerDiv = anchorElementRef.current;
114
+ const containerDiv = anchorElementRef;
114
115
  const menuEle = containerDiv.firstChild;
115
116
  if (rootElement !== null && resolution !== null) {
116
117
  const { left, top, width, height } = resolution.range.getBoundingClientRect();
117
- containerDiv.style.top = `${top + window.pageYOffset}px`;
118
- containerDiv.style.left = `${left + window.pageXOffset}px`;
118
+ containerDiv.style.top = `${top + window.scrollY}px`;
119
+ containerDiv.style.left = `${left + window.scrollX}px`;
119
120
  containerDiv.style.height = `${height}px`;
120
121
  containerDiv.style.width = `${width}px`;
121
122
  if (menuEle !== null) {
@@ -124,11 +125,11 @@ function useMenuAnchorRef(resolution, setResolution, className) {
124
125
  const menuWidth = menuRect.width;
125
126
  const rootElementRect = rootElement.getBoundingClientRect();
126
127
  if (left + menuWidth > rootElementRect.right) {
127
- containerDiv.style.left = `${rootElementRect.right - menuWidth + window.pageXOffset}px`;
128
+ containerDiv.style.left = `${rootElementRect.right - menuWidth + window.scrollX}px`;
128
129
  }
129
130
  const margin = 10;
130
131
  if ((top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight) {
131
- containerDiv.style.top = `${top - menuHeight + window.pageYOffset - (height + margin)}px`;
132
+ containerDiv.style.top = `${top - menuHeight + window.scrollY - (height + margin)}px`;
132
133
  }
133
134
  }
134
135
  if (!containerDiv.isConnected) {
@@ -142,25 +143,30 @@ function useMenuAnchorRef(resolution, setResolution, className) {
142
143
  containerDiv.style.position = 'absolute';
143
144
  document.body.append(containerDiv);
144
145
  }
145
- anchorElementRef.current = containerDiv;
146
+ setAnchorElementRef(containerDiv);
146
147
  rootElement.setAttribute('aria-controls', 'typeahead-menu');
147
148
  }
148
- }, [editor, resolution, className]);
149
+ }, [anchorElementRef, editor, resolution, className]);
150
+ (0, react_1.useEffect)(() => {
151
+ if (resolution && !anchorElementRef) {
152
+ setAnchorElementRef(document.createElement('div'));
153
+ }
154
+ }, [resolution]);
149
155
  (0, react_1.useEffect)(() => {
150
156
  const rootElement = editor.getRootElement();
151
- if (resolution !== null) {
157
+ if (resolution !== null && anchorElementRef) {
152
158
  positionMenu();
153
159
  return () => {
154
160
  if (rootElement !== null) {
155
161
  rootElement.removeAttribute('aria-controls');
156
162
  }
157
- const containerDiv = anchorElementRef.current;
163
+ const containerDiv = anchorElementRef;
158
164
  if (containerDiv !== null && containerDiv.isConnected) {
159
165
  containerDiv.remove();
160
166
  }
161
167
  };
162
168
  }
163
- }, [editor, positionMenu, resolution]);
169
+ }, [anchorElementRef, editor, positionMenu, resolution]);
164
170
  const onVisibilityChange = (0, react_1.useCallback)((isInView) => {
165
171
  if (resolution !== null) {
166
172
  if (!isInView) {
@@ -168,7 +174,7 @@ function useMenuAnchorRef(resolution, setResolution, className) {
168
174
  }
169
175
  }
170
176
  }, [resolution, setResolution]);
171
- useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
177
+ useDynamicPositioning(resolution, anchorElementRef, positionMenu, onVisibilityChange);
172
178
  return anchorElementRef;
173
179
  }
174
180
  exports.useMenuAnchorRef = useMenuAnchorRef;
@@ -528,8 +534,11 @@ function useMentions(editor, anchorClassName = null) {
528
534
  if (resolution === null || editor === null) {
529
535
  return null;
530
536
  }
537
+ if (!anchorElementRef) {
538
+ return null;
539
+ }
531
540
  return (react_1.default.createElement(ClickAwayListener_1.default, { onClickAway: closeTypeahead },
532
- react_1.default.createElement(material_1.Portal, { container: anchorElementRef.current },
541
+ react_1.default.createElement(material_1.Portal, { container: anchorElementRef },
533
542
  react_1.default.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
534
543
  }
535
544
  function MentionsPlugin() {
package/lib/esm/components/Composer/Content/ContentDiscussion/ContentDiscussion.js CHANGED
@@ -3,7 +3,7 @@ import { Box, TextField, Typography } from '@mui/material';
3
3
  import { styled } from '@mui/material/styles';
4
4
  import classNames from 'classnames';
5
5
  import Editor from '../../../Editor';
6
- import { useIntl } from 'react-intl';
6
+ import { FormattedMessage, useIntl } from 'react-intl';
7
7
  import { COMPOSER_TITLE_MAX_LENGTH } from '../../../../constants/Composer';
8
8
  import { PREFIX } from '../../constants';
9
9
  const classes = {
@@ -42,7 +42,8 @@ export default (props) => {
42
42
  }, [value]);
43
43
  // RENDER
44
44
  return (React.createElement(Root, { className: classNames(classes.root, className) },
45
- generalError && React.createElement(Typography, { className: classes.generalError }, generalError),
45
+ generalError && React.createElement(Typography, { className: classes.generalError },
46
+ React.createElement(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` })),
46
47
  React.createElement(TextField, { className: classes.title, placeholder: intl.formatMessage({ id: "ui.composer.content.discussion.title.label", defaultMessage: "ui.composer.content.discussion.title.label" }), autoFocus: true, fullWidth: true, variant: "outlined", value: value.title, multiline: true, onChange: handleChangeTitle, InputProps: {
47
48
  endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_TITLE_MAX_LENGTH - value.title.length)
48
49
  }, error: Boolean(titleError), helperText: titleError, disabled: disabled }),
package/lib/esm/components/Composer/Content/ContentPoll/ContentPoll.js CHANGED
@@ -100,7 +100,8 @@ export default (inProps) => {
100
100
  return minDate;
101
101
  }, []);
102
102
  return (React.createElement(Root, { className: classNames(classes.root, className) },
103
- generalError && React.createElement(Typography, { className: classes.generalError }, generalError),
103
+ generalError && React.createElement(Typography, { className: classes.generalError },
104
+ React.createElement(FormattedMessage, { id: `ui.composer.content.poll.error.${generalError}`, defaultMessage: `ui.composer.content.poll.error.${generalError}` })),
104
105
  React.createElement(Box, { className: classes.title },
105
106
  React.createElement(TextField, { autoFocus: true, disabled: disabled, label: React.createElement(FormattedMessage, { id: "ui.composer.content.poll.title", defaultMessage: "ui.composer.content.poll.title" }), variant: "outlined", value: poll.title, onChange: handleChangeTitle, fullWidth: true, error: Boolean(titleError), helperText: titleError && titleError, InputProps: {
106
107
  endAdornment: React.createElement(Typography, { variant: "body2" }, COMPOSER_POLL_TITLE_MAX_LENGTH - poll.title.length)
package/lib/esm/components/Composer/Content/ContentPost/ContentPost.js CHANGED
@@ -1,10 +1,10 @@
1
- import { __rest } from "tslib";
2
- import React, { forwardRef, useCallback, useEffect, useRef } from 'react';
3
- import { Box, FormGroup, Typography } from '@mui/material';
1
+ import React, { useCallback, useEffect, useRef } from 'react';
2
+ import { Box, Typography } from '@mui/material';
4
3
  import { styled } from '@mui/material/styles';
5
4
  import classNames from 'classnames';
6
5
  import Editor from '../../../Editor';
7
6
  import { PREFIX } from '../../constants';
7
+ import { FormattedMessage } from 'react-intl';
8
8
  const classes = {
9
9
  root: `${PREFIX}-content-post-root`,
10
10
  generalError: `${PREFIX}-general-error`,
@@ -15,10 +15,6 @@ const Root = styled(Box, {
15
15
  name: PREFIX,
16
16
  slot: 'ContentPostRoot'
17
17
  })(({ theme }) => ({}));
18
- const SortableComponent = forwardRef((_a, ref) => {
19
- var { children } = _a, props = __rest(_a, ["children"]);
20
- return (React.createElement(FormGroup, Object.assign({ direction: "column", ref: ref }, props), children));
21
- });
22
18
  /**
23
19
  * Default post
24
20
  */
@@ -44,6 +40,7 @@ export default (props) => {
44
40
  }, [value]);
45
41
  // RENDER
46
42
  return (React.createElement(Root, { className: classNames(classes.root, className) },
47
- generalError && React.createElement(Typography, { className: classes.generalError }, generalError),
43
+ generalError && React.createElement(Typography, { className: classes.generalError },
44
+ React.createElement(FormattedMessage, { id: `ui.composer.error.${generalError}`, defaultMessage: `ui.composer.error.${generalError}` })),
48
45
  React.createElement(Editor, Object.assign({ ref: editorRef }, EditorProps, { editable: !disabled, className: classes.editor, onChange: handleChangeHtml, defaultValue: value.html }))));
49
46
  };
package/lib/esm/components/Editor/plugins/MentionsPlugin.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- import { MutableRefObject } from 'react';
2
1
  declare type MentionMatch = {
3
2
  leadOffset: number;
4
3
  matchingString: string;
@@ -10,6 +9,6 @@ declare type Resolution = {
10
9
  };
11
10
  export declare function getScrollParent(element: HTMLElement, includeHidden: boolean): HTMLElement | HTMLBodyElement;
12
11
  export declare function useDynamicPositioning(resolution: Resolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
13
- export declare function useMenuAnchorRef(resolution: Resolution | null, setResolution: (r: Resolution | null) => void, className?: string): MutableRefObject<HTMLElement>;
12
+ export declare function useMenuAnchorRef(resolution: Resolution | null, setResolution: (r: Resolution | null) => void, className?: string): HTMLElement;
14
13
  export default function MentionsPlugin(): JSX.Element;
15
14
  export {};
package/lib/esm/components/Editor/plugins/MentionsPlugin.js CHANGED
@@ -100,16 +100,17 @@ export function useDynamicPositioning(resolution, targetElement, onReposition, o
100
100
  }, [targetElement, editor, onVisibilityChange, onReposition, resolution]);
101
101
  }
102
102
  export function useMenuAnchorRef(resolution, setResolution, className) {
103
+ const [anchorElementRef, setAnchorElementRef] = useState(null);
103
104
  const [editor] = useLexicalComposerContext();
104
- const anchorElementRef = useRef(typeof document !== undefined ? document.createElement('div') : null);
105
+ //const anchorElementRef = useRef<HTMLElement>(null);
105
106
  const positionMenu = useCallback(() => {
106
107
  const rootElement = editor.getRootElement();
107
- const containerDiv = anchorElementRef.current;
108
+ const containerDiv = anchorElementRef;
108
109
  const menuEle = containerDiv.firstChild;
109
110
  if (rootElement !== null && resolution !== null) {
110
111
  const { left, top, width, height } = resolution.range.getBoundingClientRect();
111
- containerDiv.style.top = `${top + window.pageYOffset}px`;
112
- containerDiv.style.left = `${left + window.pageXOffset}px`;
112
+ containerDiv.style.top = `${top + window.scrollY}px`;
113
+ containerDiv.style.left = `${left + window.scrollX}px`;
113
114
  containerDiv.style.height = `${height}px`;
114
115
  containerDiv.style.width = `${width}px`;
115
116
  if (menuEle !== null) {
@@ -118,11 +119,11 @@ export function useMenuAnchorRef(resolution, setResolution, className) {
118
119
  const menuWidth = menuRect.width;
119
120
  const rootElementRect = rootElement.getBoundingClientRect();
120
121
  if (left + menuWidth > rootElementRect.right) {
121
- containerDiv.style.left = `${rootElementRect.right - menuWidth + window.pageXOffset}px`;
122
+ containerDiv.style.left = `${rootElementRect.right - menuWidth + window.scrollX}px`;
122
123
  }
123
124
  const margin = 10;
124
125
  if ((top + menuHeight > window.innerHeight || top + menuHeight > rootElementRect.bottom) && top - rootElementRect.top > menuHeight) {
125
- containerDiv.style.top = `${top - menuHeight + window.pageYOffset - (height + margin)}px`;
126
+ containerDiv.style.top = `${top - menuHeight + window.scrollY - (height + margin)}px`;
126
127
  }
127
128
  }
128
129
  if (!containerDiv.isConnected) {
@@ -136,25 +137,30 @@ export function useMenuAnchorRef(resolution, setResolution, className) {
136
137
  containerDiv.style.position = 'absolute';
137
138
  document.body.append(containerDiv);
138
139
  }
139
- anchorElementRef.current = containerDiv;
140
+ setAnchorElementRef(containerDiv);
140
141
  rootElement.setAttribute('aria-controls', 'typeahead-menu');
141
142
  }
142
- }, [editor, resolution, className]);
143
+ }, [anchorElementRef, editor, resolution, className]);
144
+ useEffect(() => {
145
+ if (resolution && !anchorElementRef) {
146
+ setAnchorElementRef(document.createElement('div'));
147
+ }
148
+ }, [resolution]);
143
149
  useEffect(() => {
144
150
  const rootElement = editor.getRootElement();
145
- if (resolution !== null) {
151
+ if (resolution !== null && anchorElementRef) {
146
152
  positionMenu();
147
153
  return () => {
148
154
  if (rootElement !== null) {
149
155
  rootElement.removeAttribute('aria-controls');
150
156
  }
151
- const containerDiv = anchorElementRef.current;
157
+ const containerDiv = anchorElementRef;
152
158
  if (containerDiv !== null && containerDiv.isConnected) {
153
159
  containerDiv.remove();
154
160
  }
155
161
  };
156
162
  }
157
- }, [editor, positionMenu, resolution]);
163
+ }, [anchorElementRef, editor, positionMenu, resolution]);
158
164
  const onVisibilityChange = useCallback((isInView) => {
159
165
  if (resolution !== null) {
160
166
  if (!isInView) {
@@ -162,7 +168,7 @@ export function useMenuAnchorRef(resolution, setResolution, className) {
162
168
  }
163
169
  }
164
170
  }, [resolution, setResolution]);
165
- useDynamicPositioning(resolution, anchorElementRef.current, positionMenu, onVisibilityChange);
171
+ useDynamicPositioning(resolution, anchorElementRef, positionMenu, onVisibilityChange);
166
172
  return anchorElementRef;
167
173
  }
168
174
  const mentionsCache = new Map();
@@ -521,8 +527,11 @@ function useMentions(editor, anchorClassName = null) {
521
527
  if (resolution === null || editor === null) {
522
528
  return null;
523
529
  }
530
+ if (!anchorElementRef) {
531
+ return null;
532
+ }
524
533
  return (React.createElement(ClickAwayListener, { onClickAway: closeTypeahead },
525
- React.createElement(Portal, { container: anchorElementRef.current },
534
+ React.createElement(Portal, { container: anchorElementRef },
526
535
  React.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root }))));
527
536
  }
528
537
  export default function MentionsPlugin() {