@selfcommunity/react-ui 0.7.0-alpha.336 → 0.7.0-alpha.338

package/lib/cjs/components/Composer/Composer.d.ts

@@ -59,6 +59,14 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
  *
  *
  * The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ *
+ *
+ :::info
+ To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the `interactive-widget=resizes-content` on meta viewport.
+ This works on chrome for android.
+ For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
+ [More information](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
 
  #### Import
  ```jsx

package/lib/cjs/components/Composer/Composer.js

@@ -84,6 +84,14 @@ const reducer = (state, action) => {
  *
  *
  * The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ *
+ *
+ :::info
+ To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the `interactive-widget=resizes-content` on meta viewport.
+ This works on chrome for android.
+ For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
+ [More information](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
 
  #### Import
  ```jsx
@@ -178,6 +186,7 @@ function Composer(inProps) {
             (type === types_1.SCContributionType.POST && ((0, utils_1.stripHtml)(html).length > 0 || medias.length > 0 || hasPoll)) ||
             (type === Composer_1.COMPOSER_TYPE_POLL && hasPoll));
     }, [isLoading, type, title, html, medias, hasPoll]);
+    const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // Load feed object
     (0, react_1.useEffect)(() => {
         if (!editMode) {
@@ -216,6 +225,16 @@ function Composer(inProps) {
             window.onbeforeunload = null;
         }
     }, [state, canSubmit]);
+    (0, react_1.useEffect)(() => {
+        if (!dialogRef.current || !isIOS) {
+            return;
+        }
+        const handleBlur = () => {
+            dialogRef.current.focus();
+        };
+        dialogRef.current.addEventListener("touchstart", handleBlur);
+        return () => { var _a; return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("touchstart", handleBlur); };
+    }, [dialogRef.current, isIOS]);
     /* Handlers */
     const handleAddLayer = (0, react_1.useCallback)((layer) => setLayer(layer), []);
     const handleRemoveLayer = (0, react_1.useCallback)(() => setLayer(null), []);
@@ -406,7 +425,6 @@ function Composer(inProps) {
             handleClose(event);
         }
     }, [canSubmit, handleAddLayer, handleRemoveLayer, handleClose]);
-    const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
     // RENDER
     const hasMediaShare = (0, react_1.useMemo)(() => medias.findIndex((m) => m.type === Media_1.MEDIA_TYPE_SHARE) !== -1, [medias]);
     const content = (0, react_1.useMemo)(() => {
@@ -431,7 +449,7 @@ function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: (0, classnames_1.default)(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen }),
+    return (react_1.default.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: (0, classnames_1.default)(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }),
         react_1.default.createElement("form", { onSubmit: handleSubmit, method: "post" },
             react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
                 react_1.default.createElement(material_1.IconButton, { onClick: handleClosePrompt },

package/lib/cjs/components/Editor/plugins/ToolbarPlugin.js

@@ -271,9 +271,7 @@ function ToolbarPlugin(inProps) {
                 activeEditor.dispatchCommand(lexical_1.FORMAT_ELEMENT_COMMAND, ALIGNMENTS[(ALIGNMENTS.findIndex((a) => alignment === a) + 1) % ALIGNMENTS.length]);
             } },
             React.createElement(material_1.Tooltip, { title: React.createElement(react_intl_1.FormattedMessage, { id: `ui.editor.toolbarPlugin.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }) },
-                React.createElement(material_1.Icon, null,
-                    "format_align_",
-                    alignment))),
+                React.createElement(material_1.Icon, null, `format_align_${alignment}`))),
         React.createElement(material_1.ToggleButtonGroup, { value: formats }, FORMATS.map((format) => (React.createElement(material_1.ToggleButton, { key: format, value: format, disabled: !isEditable, onClick: () => {
                 activeEditor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, format);
             } },

package/lib/esm/components/Composer/Composer.d.ts

@@ -59,6 +59,14 @@ export interface ComposerProps extends Omit<DialogProps, 'defaultValue' | 'scrol
  *
  *
  * The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ *
+ *
+ :::info
+ To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the `interactive-widget=resizes-content` on meta viewport.
+ This works on chrome for android.
+ For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
+ [More information](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
 
  #### Import
  ```jsx

package/lib/esm/components/Composer/Composer.js

@@ -82,6 +82,14 @@ const reducer = (state, action) => {
  *
  *
  * The Composer component contains the logic around the creation of [Post](https://developers.selfcommunity.com/docs/apireference/v2/post/create_a_post) and [Discussion](https://developers.selfcommunity.com/docs/apireference/v2/discussion/create_a_discussion) objects.
+ *
+ *
+ :::info
+ To prevent the editor toolbar and action botton bar being hidden underneath the Virtual Keyboard you need to set the `interactive-widget=resizes-content` on meta viewport.
+ This works on chrome for android.
+ For iOS devices there is a lack of support of this meta so we force the blur event when the user start dragging.
+ [More information](https://bram.us/2021/09/13/prevent-items-from-being-hidden-underneath-the-virtual-keyboard-by-means-of-the-virtualkeyboard-api/)
+ :::
 
  #### Import
  ```jsx
@@ -176,6 +184,7 @@ export default function Composer(inProps) {
             (type === SCContributionType.POST && (stripHtml(html).length > 0 || medias.length > 0 || hasPoll)) ||
             (type === COMPOSER_TYPE_POLL && hasPoll));
     }, [isLoading, type, title, html, medias, hasPoll]);
+    const isIOS = useMemo(() => iOS(), []);
     // Load feed object
     useEffect(() => {
         if (!editMode) {
@@ -214,6 +223,16 @@ export default function Composer(inProps) {
             window.onbeforeunload = null;
         }
     }, [state, canSubmit]);
+    useEffect(() => {
+        if (!dialogRef.current || !isIOS) {
+            return;
+        }
+        const handleBlur = () => {
+            dialogRef.current.focus();
+        };
+        dialogRef.current.addEventListener("touchstart", handleBlur);
+        return () => { var _a; return (_a = dialogRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("touchstart", handleBlur); };
+    }, [dialogRef.current, isIOS]);
     /* Handlers */
     const handleAddLayer = useCallback((layer) => setLayer(layer), []);
     const handleRemoveLayer = useCallback(() => setLayer(null), []);
@@ -404,7 +423,6 @@ export default function Composer(inProps) {
             handleClose(event);
         }
     }, [canSubmit, handleAddLayer, handleRemoveLayer, handleClose]);
-    const isIOS = useMemo(() => iOS(), []);
     // RENDER
     const hasMediaShare = useMemo(() => medias.findIndex((m) => m.type === MEDIA_TYPE_SHARE) !== -1, [medias]);
     const content = useMemo(() => {
@@ -429,7 +447,7 @@ export default function Composer(inProps) {
     if (!scUserContext.user && !(scUserContext.loading && open)) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen }),
+    return (React.createElement(Root, Object.assign({ ref: dialogRef, TransitionComponent: DialogTransition, keepMounted: true, onClose: handleClose }, rest, { className: classNames(classes.root, { [classes.ios]: isIOS }), scroll: "body", fullScreen: fullScreen, tabIndex: -1 }),
         React.createElement("form", { onSubmit: handleSubmit, method: "post" },
             React.createElement(DialogTitle, { className: classes.title },
                 React.createElement(IconButton, { onClick: handleClosePrompt },

package/lib/esm/components/Editor/plugins/ToolbarPlugin.js

@@ -268,9 +268,7 @@ export default function ToolbarPlugin(inProps) {
                 activeEditor.dispatchCommand(FORMAT_ELEMENT_COMMAND, ALIGNMENTS[(ALIGNMENTS.findIndex((a) => alignment === a) + 1) % ALIGNMENTS.length]);
             } },
             React.createElement(Tooltip, { title: React.createElement(FormattedMessage, { id: `ui.editor.toolbarPlugin.${alignment}`, defaultMessage: `ui.editor.toolbarPlugin.${alignment}` }) },
-                React.createElement(Icon, null,
-                    "format_align_",
-                    alignment))),
+                React.createElement(Icon, null, `format_align_${alignment}`))),
         React.createElement(ToggleButtonGroup, { value: formats }, FORMATS.map((format) => (React.createElement(ToggleButton, { key: format, value: format, disabled: !isEditable, onClick: () => {
                 activeEditor.dispatchCommand(FORMAT_TEXT_COMMAND, format);
             } },